/* 全部言えるかな？：吹き出し・ストップウォッチ・光る盤面 */
:root {
  --accent: #c2410c; --accent-ink: #ffffff; --accent-soft: #fde7da;
  --zi-bg-a: #ffe9c7; --zi-bg-b: #ffc9a8; --zi-bubble: #ffffff; --zi-word: #3a1c4a;
  --zi-off: #e6e1d8; --zi-off-t: transparent; --zi-miss: #e25b5b; --zi-on-t: #ffffff;
  --zi-r0: #4f7cd8; --zi-r1: #3a9e8f; --zi-r2: #d9822b; --zi-r3: #8a5cc7; --zi-r4: #d24f6c; --zi-r5: #2f9c55; --zi-r6: #c19a1b; --zi-r7: #e0613a;
  --zi-track: #9acd32; --zi-sun: #ffb020;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #ff9a62; --accent-ink: #1a0f08; --accent-soft: #3a2216; --zi-bg-a: #3a2440; --zi-bg-b: #5a2c22; --zi-bubble: #1f2236; --zi-word: #ffe3c9; --zi-off: #2a2f45; --zi-miss: #ff7a7a; }
}
:root[data-theme="dark"] { --accent: #ff9a62; --accent-ink: #1a0f08; --accent-soft: #3a2216; --zi-bg-a: #3a2440; --zi-bg-b: #5a2c22; --zi-bubble: #1f2236; --zi-word: #ffe3c9; --zi-off: #2a2f45; --zi-miss: #ff7a7a; }

/* ヒーロー */
.zi-hero-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.zi-hero { display: block; width: 100%; height: auto; }
.zi-bg-a { stop-color: var(--zi-bg-a); } .zi-bg-b { stop-color: var(--zi-bg-b); }
.zi-bubble { fill: var(--zi-bubble); }
.zi-word { fill: var(--zi-word); font-size: 14px; font-weight: 800; animation: zi-say .4s ease-out both; }
.zi-dots { fill: var(--accent); animation-delay: 2.2s; }
@keyframes zi-say { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.zi-w-rim { fill: #c2410c; } .zi-w-top { fill: #8a2d08; }
.zi-w-tick { stroke: #555; stroke-width: 2; }
.zi-w-fill { fill: rgba(194, 65, 12, .25); }
.zi-w-hand { stroke: #222; stroke-width: 3; stroke-linecap: round; transform-origin: 0 0; animation: zi-spin 4s linear infinite; }
.zi-w-c { fill: #c2410c; }
@keyframes zi-spin { to { transform: rotate(360deg); } }

/* お題選択 */
.zi-daily { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.zi-daily-h { margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .08em; }
.zi-daily-cat { margin: 2px 0 10px; font-size: 24px; font-weight: 900; }
.zi-daily .mn-row { margin-top: 8px; }
.zi-h2 { font-size: 18px; margin: 18px 0 0; }
.zi-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zi-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; min-height: 92px; touch-action: manipulation; }
.zi-cat:hover { border-color: var(--accent); }
.zi-cat-em { font-size: 24px; line-height: 1; }
.zi-cat b { font-size: 15px; line-height: 1.35; }
.zi-cat small { font-size: 12px; color: var(--text-sub); }

/* プレイ */
.zi-head { display: flex; gap: 10px; align-items: flex-start; }
.zi-head-em { font-size: 30px; line-height: 1.2; }
.zi-head-name { font-size: 20px; }
.zi-status { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--text-sub); }
.zi-clock, .zi-count { font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; }
.zi-clock.low { color: var(--bad); }
.zi-inrow { display: flex; gap: 8px; position: sticky; top: 58px; z-index: 5; background: var(--bg); padding: 4px 0; }
.zi-input { flex: 1; min-width: 0; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--accent); background: var(--surface); color: var(--text); font-family: inherit; }
.zi-input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.zi-ok { flex: none; }
.zi-feed { margin: 0; min-height: 1.6em; font-weight: 800; text-align: center; color: var(--text-sub); }
.zi-feed.ok { color: var(--good); } .zi-feed.ng { color: var(--bad); }
.zi-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow: hidden; }
.zi-chips:empty { display: none; }
.zi-chip { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--good-soft); color: var(--good); }
.zi-give { color: var(--text-sub); font-size: 14px; }

/* 盤面 */
.zi-board-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.zi-board { display: block; width: 100%; height: auto; max-height: 420px; }
.zi-cell rect, .zi-cell circle { fill: var(--zi-off); transition: fill .25s; }
.zi-lbl { font-weight: 800; font-size: 11px; fill: var(--zi-off-t); pointer-events: none; }
.zi-lbl-s { font-size: 8.5px; }
.zi-cell.on .zi-lbl { fill: var(--zi-on-t); }
.zi-cell.pop { animation: zi-pop .45s cubic-bezier(.2, 1.6, .4, 1); transform-box: fill-box; transform-origin: center; }
@keyframes zi-pop { from { transform: scale(.4); } to { transform: none; } }
.zi-r0.on rect { fill: var(--zi-r0); } .zi-r1.on rect { fill: var(--zi-r1); } .zi-r2.on rect { fill: var(--zi-r2); } .zi-r3.on rect { fill: var(--zi-r3); }
.zi-r4.on rect { fill: var(--zi-r4); } .zi-r5.on rect { fill: var(--zi-r5); } .zi-r6.on rect { fill: var(--zi-r6); } .zi-r7.on rect { fill: var(--zi-r7); }
.zi-cell.miss rect, .zi-cell.miss circle { fill: var(--zi-miss); }
.zi-cell.miss .zi-lbl { fill: #ffffff; }
.zi-track { fill: none; stroke: var(--zi-track); stroke-width: 9; opacity: .85; }
.zi-track-in { fill: none; stroke: var(--surface); stroke-width: 2; stroke-dasharray: 6 6; }
.zi-st circle { stroke: var(--surface); stroke-width: 2; }
.zi-st.on circle { fill: #2f8f2f; }
.zi-lbl-st { font-size: 10px; }
.zi-st.on .zi-lbl, .zi-st.miss .zi-lbl { fill: var(--text); }
.zi-st.miss .zi-lbl { fill: var(--zi-miss); }
.zi-center { fill: var(--text-sub); font-size: 22px; font-weight: 900; opacity: .6; }
.zi-sun { fill: var(--zi-sun); }
.zi-orb { fill: none; stroke: var(--line); stroke-width: 1.2; }
.zi-ringp { fill: none !important; stroke: #c9a46a; stroke-width: 2; opacity: 0; }
.zi-pl.on .zi-ringp { opacity: 1; }
.zi-lbl-pl { font-size: 11px; }
.zi-pl.on .zi-lbl, .zi-pl.miss .zi-lbl { fill: var(--text); }
.zi-pl.miss .zi-lbl { fill: var(--zi-miss); }
.zi-p0.on circle { fill: #9e9e9e; } .zi-p1.on circle { fill: #e3b75f; } .zi-p2.on circle { fill: #3b82f6; } .zi-p3.on circle { fill: #d9532b; }
.zi-p4.on circle { fill: #c98d5a; } .zi-p5.on circle { fill: #e2c37a; } .zi-p6.on circle { fill: #6fd3d8; } .zi-p7.on circle { fill: #3f5fd6; }
.zi-ring-bg { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.zi-rg.on circle { fill: var(--accent); }
.zi-lbl-rg { font-size: 18px; }
.zi-lbl-rg.zi-lbl-s { font-size: 12px; }
.zi-lbl-sub { font-size: 9px; }

/* 結果 */
.zi-result { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); text-align: center; }
.zi-result.is-rare { border-color: #e2a72e; box-shadow: 0 0 0 3px rgba(226, 167, 46, .35), var(--shadow); }
.zi-res-big { font-size: clamp(48px, 16vw, 72px); font-weight: 900; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.zi-res-big small { font-size: 22px; color: var(--text-sub); }
.zi-res-line { font-weight: 800; font-size: 17px; margin: 6px 0; }
.zi-res-type { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.zi-res-type b { font-size: 20px; }
.zi-res-type > span:first-child { font-size: 26px; }
.zi-res-bar { margin: 8px 0 0; font-size: 18px; letter-spacing: 1px; }
.zi-miss { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--bad); }
.zi-zukan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.zi-z { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); text-align: center; color: var(--text-sub); }
.zi-z span { font-size: 22px; line-height: 1.2; }
.zi-z small { font-size: 11px; line-height: 1.35; }
.zi-z.got { background: var(--accent-soft); color: var(--text); }
.zi-z.cur { outline: 2px solid var(--accent); }
.zi-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.zi-stamp { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 10px; border: 1px dashed var(--line); font-size: 12px; font-weight: 700; color: var(--text-sub); text-align: center; }
.zi-stamp i { font-style: normal; font-size: 20px; }
.zi-stamp small { font-size: 10px; font-weight: 500; }
.zi-stamp.got { border-style: solid; border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
@media (max-width: 360px) { .zi-zukan { grid-template-columns: repeat(2, 1fr); } .zi-cats { grid-template-columns: 1fr; } }