/* 会議を一秒でも早く終わらせろ — 色はすべてCSS変数 */
:root {
  --accent: #0f7a6a; --accent-ink: #ffffff; --accent-soft: #d9f2ec;
  --call: #1d2733; --call-tile: #2b3746; --call-ink: #eef3f7;
  --skin: #f3cfb0; --ink-face: #2a2a2a; --glass: rgba(255, 255, 255, .35);
  --p1: #6c8cd5; --p2: #e2a33b; --p3: #c86da6; --p4: #59b37f; --p5: #8a7ad6; --p0: #3fa7a0;
  --h1: #5a4636; --h2: #2e2e2e; --h3: #8a4b2a; --h4: #3b3b6b; --h5: #6b3a3a; --h0: #2b2b2b;
  --dis: #e5534b; --dis-soft: #fde5e3; --me-bg: #d9f2ec; --bubble: #ffffff; --bubble-ink: #1b1a17;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #4fd1b8; --accent-ink: #062520; --accent-soft: #143a33;
    --dis-soft: #3d1f1e; --me-bg: #143a33; --bubble: #22283a; --bubble-ink: #eef0f7;
  }
}
:root[data-theme="dark"] {
  --accent: #4fd1b8; --accent-ink: #062520; --accent-soft: #143a33;
  --dis-soft: #3d1f1e; --me-bg: #143a33; --bubble: #22283a; --bubble-ink: #eef0f7;
}

/* スタートの絵 */
.kg-hero { text-align: center; }
.kg-art { width: 100%; max-width: 340px; height: auto; }
.kg-a-win { fill: var(--call); }
.kg-a-tile { fill: var(--call-tile); }
.kg-a-t0 { stroke: var(--dis); stroke-width: 3; animation: kg-blink 1.2s infinite; }
.kg-a-head { fill: var(--call-ink); opacity: .55; }
.kg-a-me { fill: var(--accent); }
.kg-a-metxt { fill: var(--accent-ink); font-weight: 900; font-size: 14px; }
.kg-a-bub { fill: var(--bubble); stroke: var(--line); }
.kg-a-bubt { fill: var(--bubble-ink); font-size: 13px; font-weight: 700; }
.kg-a-bubble { animation: kg-bob 2.4s ease-in-out infinite; }
.kg-a-clock { fill: var(--surface); }
.kg-a-rim { fill: none; stroke: var(--accent); stroke-width: 6; }
.kg-a-hand { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.kg-a-min { transform-origin: 272px 118px; animation: kg-spin 6s linear infinite; }
.kg-a-cap { fill: var(--text-sub); font-size: 12px; font-weight: 700; }
@keyframes kg-spin { to { transform: rotate(360deg); } }
@keyframes kg-blink { 50% { stroke-opacity: .2; } }
@keyframes kg-bob { 50% { transform: translateY(-4px); } }
.kg-agenda-list { margin: 0; padding-left: 1.4em; font-size: 14px; }

/* 顔 */
.kg-face { display: block; width: 100%; height: auto; }
.kg-bgc { fill: var(--p0); }
.kg-c1 .kg-bgc { fill: var(--p1); } .kg-c2 .kg-bgc { fill: var(--p2); } .kg-c3 .kg-bgc { fill: var(--p3); } .kg-c4 .kg-bgc { fill: var(--p4); } .kg-c5 .kg-bgc { fill: var(--p5); }
.kg-skin { fill: var(--skin); }
.kg-hair, .kg-bun { fill: var(--h0); }
.kg-c1 .kg-hair { fill: var(--h1); } .kg-c2 .kg-hair { fill: var(--h2); } .kg-c3 .kg-hair, .kg-c3 .kg-bun { fill: var(--h3); } .kg-c4 .kg-hair { fill: var(--h4); } .kg-c5 .kg-hair { fill: var(--h5); }
.kg-eye { fill: var(--ink-face); }
.kg-mouth, .kg-line { fill: none; stroke: var(--ink-face); stroke-width: 2.4; stroke-linecap: round; }
.kg-glass { fill: var(--glass); stroke: var(--ink-face); stroke-width: 2; }
.kg-note { fill: var(--bubble); stroke: var(--ink-face); stroke-width: 1.5; }

/* プレイ画面 */
.kg-play { display: flex; flex-direction: column; gap: 8px; }
.kg-top { position: sticky; top: 57px; z-index: 5; background: var(--bg); padding: 4px 0; }
.kg-clockrow { display: flex; align-items: baseline; gap: 6px; }
.kg-clock { font-size: 32px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.kg-rec { font-size: 12px; color: var(--dis); font-weight: 700; animation: kg-recb 1.4s infinite; }
@keyframes kg-recb { 50% { opacity: .3; } }
.kg-bar { margin-top: 2px; }
.kg-late > i { background: var(--dis); }
.kg-ag { display: flex; gap: 8px; align-items: center; margin-top: 6px; min-height: 28px; }
.kg-ag-chips { display: flex; gap: 4px; flex: none; }
.kg-chip { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-sub); }
.kg-chip.on { background: var(--accent-soft); color: var(--accent); outline: 2px solid var(--accent); }
.kg-chip.done { background: var(--accent); color: var(--accent-ink); }
.kg-ag-t { font-weight: 700; font-size: 14px; min-width: 0; }
.kg-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--call); padding: 6px; border-radius: 12px; }
.kg-tile { position: relative; background: var(--call-tile); border-radius: 8px; padding: 4px; text-align: center; border: 2px solid transparent; min-width: 0; }
.kg-tile-face { width: 100%; max-width: 64px; margin: 0 auto; border-radius: 8px; overflow: hidden; }
.kg-tile-n { display: block; font-size: 10px; color: var(--call-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-tile-badge { display: block; font-size: 9px; font-weight: 700; color: var(--dis); min-height: 1.3em; }
.kg-tile:last-child .kg-tile-badge { color: var(--accent); }
.kg-dis { border-color: var(--dis); animation: mn-shake .4s; }
.kg-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; height: min(36vh, 340px); min-height: 220px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.kg-msg { display: flex; gap: 8px; align-items: flex-start; animation: mn-in .25s ease-out; }
.kg-msg-face { width: 30px; flex: none; border-radius: 6px; overflow: hidden; }
.kg-msg-body { background: var(--surface-2); border-radius: 4px 12px 12px 12px; padding: 4px 10px; min-width: 0; }
.kg-msg-body b { font-size: 11px; color: var(--text-sub); }
.kg-msg-body p { margin: 0; font-size: 14px; line-height: 1.55; }
.kg-k-dis .kg-msg-body { background: var(--dis-soft); }
.kg-k-dis .kg-msg-body b { color: var(--dis); }
.kg-k-ready .kg-msg-body, .kg-k-decide .kg-msg-body, .kg-k-next .kg-msg-body { background: var(--accent-soft); }
.kg-k-miss .kg-msg-body p { color: var(--text-sub); font-style: italic; }
.kg-k-idle .kg-msg-body p { color: var(--text-sub); }
.kg-me { flex-direction: row-reverse; }
.kg-me .kg-msg-body { background: var(--accent); border-radius: 12px 4px 12px 12px; }
.kg-me .kg-msg-body b, .kg-me .kg-msg-body p { color: var(--accent-ink); }
.kg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: sticky; bottom: 0; background: var(--bg); padding: 6px 0 4px; }
.kg-card { min-height: 54px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-weight: 800; font-size: 14px; line-height: 1.35; padding: 6px 8px; cursor: pointer; touch-action: manipulation; box-shadow: 0 2px 0 var(--line); }
.kg-card:active { transform: translateY(2px); box-shadow: none; }
.kg-card:hover { border-color: var(--accent); }
#c-vote { border-color: var(--accent); color: var(--accent); }
.kg-card:disabled { opacity: .45; }

/* 結果 */
.kg-rank { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; font-size: 40px; font-weight: 900; background: var(--accent); color: var(--accent-ink); margin: 0 auto 6px; }
.kg-rank-e, .kg-rank-d { background: var(--surface-2); color: var(--text-sub); }
.kg-unit { font-size: 22px; color: var(--text-sub); margin-left: 4px; }
.kg-rname { font-size: 22px; font-weight: 900; margin: 6px 0 2px; }
.kg-minutes ol { margin: 6px 0 0; padding-left: 1.4em; }
.kg-ranks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kg-zukan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.kg-zukan li { font-size: 13px; background: var(--surface-2); color: var(--text-sub); border-radius: 8px; padding: 4px 10px; }
.kg-zukan li.on { background: var(--dis-soft); color: var(--text); }
.kg-zukan small { color: var(--dis); font-weight: 700; }

.mn-daily-num { white-space: nowrap; flex: none; }