@charset "UTF-8";
:root {
  --ink:#292437; --muted:#6e657d; --surface:#f8f7fb; --line:#ddd6e7;
  --pink:#c71766; --violet:#5842ba; --paper:#fff5df; --white:#fff;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  color:var(--ink); font-weight:700; color-scheme:light;
}
* { box-sizing:border-box; }
body { margin:0; background:#eeebf3; -webkit-tap-highlight-color:transparent; }
button,a,input { touch-action:manipulation; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; border:0; }
button:disabled { cursor:default; }
a { color:inherit; text-underline-offset:4px; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--violet); outline-offset:4px; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.stage { max-width:500px; min-height:100svh; margin:auto; background:var(--surface); overflow:clip; }
#app { min-height:100svh; }
.screen { min-height:100svh; padding:max(16px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; position:relative; }
.screen.enter { animation:enter-screen 180ms ease-out both; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; flex-shrink:0; }
.topbar-label { font-size:13px; color:var(--muted); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:48px; min-width:48px; height:48px; background:transparent; border-radius:12px; text-decoration:none; }
.icon-button:hover { background:#eae5f2; }
button:active:not(:disabled) { filter:brightness(.94); }
.page-heading { font-size:30px; font-weight:900; line-height:1.4; text-align:center; margin:32px 0 12px; letter-spacing:-.035em; text-wrap:balance; }
.lead { text-align:center; font-size:16px; line-height:1.6; margin:0 0 28px; color:var(--muted); }
.spacer { flex:1; min-height:24px; }
.primary,.secondary { width:100%; min-height:60px; border-radius:12px; display:flex; justify-content:center; align-items:center; gap:10px; font-size:20px; font-weight:800; padding:16px; text-decoration:none; transition:background 120ms; }
.primary { background:var(--pink); color:var(--white); }
.primary:hover { background:#ac1156; }
.secondary { background:#ece7f5; color:var(--violet); }
.primary:disabled { background:#e5e0ec; color:#8b8197; }
.text-button { background:none; padding:12px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.actions { display:grid; gap:12px; }
.white-note { padding:12px 0; font-size:15px; line-height:1.7; color:var(--muted); }
.home-screen { padding:0; isolation:isolate; background:linear-gradient(90deg,#f52991 50%,#655dee 50%); color:#fff; }
.hero-art { width:100%; height:auto; position:absolute; top:0; z-index:-1; pointer-events:none; }
.home-top { padding:max(12px,env(safe-area-inset-top)) 20px 0; }
.home-screen .icon-button:hover { background:#24134525; }
.home-title { margin:16px 0 0; text-align:center; font-weight:900; font-size:clamp(46px,13vw,64px); line-height:1.1; letter-spacing:-.07em; }
.home-title span { display:block; }
.home-title span:last-child { font-size:1.2em; }
.hero-space { min-height:clamp(210px,60vw,310px); flex:1; }
.home-footer { padding:24px 24px max(24px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,#221731 22%); }
.home-stats { display:flex; justify-content:center; gap:24px; font-size:14px; margin:24px 0 4px; }
.home-links { display:flex; justify-content:center; gap:24px; }
.home-links .text-button { color:#fff; }
.credit { text-align:center; font-size:12px; color:#d8d1e0; font-weight:500; margin:8px 0 0; }
.setup-list { display:grid; gap:10px; }
.setup-row { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 16px; }
.setup-row.unselected { background:transparent; }
.participant { display:flex; align-items:center; gap:16px; cursor:pointer; min-height:48px; }
.participant input { width:24px; height:24px; accent-color:var(--violet); flex-shrink:0; }
.participant-name { overflow-wrap:anywhere; font-size:21px; }
.setup-footer { margin-top:auto; padding-top:32px; }
.setup-count { text-align:center; font-size:14px; color:var(--muted); margin:0 0 16px; }
.answerer-panel { text-align:center; margin:auto 0; padding:32px 0; }
.answerer-caption { margin:0; color:var(--muted); font-size:15px; }
.answerer-name { font-size:28px; margin:8px 0 40px; overflow-wrap:anywhere; line-height:1.4; font-weight:900; }
.privacy-warning { color:var(--pink); }
.privacy-warning .icon { width:56px; height:56px; stroke-width:1.7; }
.privacy-warning h1 { margin:16px 0 0; font-size:clamp(28px,8vw,38px); font-weight:900; line-height:1.55; letter-spacing:-.04em; }
.scorer-note { text-align:center; color:var(--muted); font-size:15px; line-height:1.5; margin:0 0 4px; }
.topic-screen .page-heading { font-size:20px; color:var(--muted); }
.topic-wrap { margin:auto 0; padding:32px 0; perspective:1000px; }
.topic-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:64px 16px; text-align:center; }
.topic-word { font-size:clamp(30px,8vw,40px); font-weight:900; overflow-wrap:anywhere; line-height:1.5; margin:0; }
.topic-screen.enter .topic-card { animation:reveal-card 280ms ease-out; }
.board-header { display:flex; gap:12px; align-items:center; justify-content:space-between; }
.board-header>div:first-child { flex:1; min-width:0; }
.current-answerer { margin:4px 0 0; font-size:21px; line-height:1.4; overflow-wrap:anywhere; }
.current-answerer small { font-size:13px; font-weight:500; color:var(--muted); }
.board-title { font-size:28px; text-align:center; margin:28px 0 4px; font-weight:900; line-height:1.4; }
.board-subtitle { font-size:15px; text-align:center; color:var(--muted); margin:0 0 24px; }
.board-layout { flex:1; display:flex; flex-direction:column; min-height:0; }
.letter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:4px 2px; }
.letter-grid[data-count="9"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.letter-grid[data-count="18"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
.letter { position:relative; min-width:0; min-height:56px; height:clamp(60px,18vw,80px); border-radius:8px; background:var(--paper); color:var(--ink); font-size:clamp(32px,9vw,44px); line-height:1; font-weight:900; border:1px solid #d5bd8b; transition:background 120ms,border-color 120ms; }
.letter:hover:not(:disabled) { border-color:var(--violet); }
.letter.selected { background:var(--violet); border:2px solid var(--violet); color:#fff; box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--violet); }
.selection-number { position:absolute; top:-9px; right:-5px; width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--violet); background:#fff; border:1px solid var(--violet); font-size:13px; line-height:1; }
.letter.used,.letter.returned { background:#eeebf2; border:1px solid #ded8e7; color:#8c8398; box-shadow:none; }
.letter.used .card-char { font-size:.65em; }
.letter.returned { background:transparent; border-style:dashed; }
.card-state { display:block; margin-top:4px; font-size:11px; color:var(--muted); font-weight:500; }
.letter.returned .icon { width:22px; height:22px; }
.board-controls { margin-top:auto; padding-top:28px; }
.hint-info { text-align:center; color:var(--muted); font-size:15px; margin:0 0 16px; min-height:24px; }
.judgement { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.judge { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--violet); border-radius:12px; padding:16px 8px; min-height:68px; font-size:23px; font-weight:900; color:var(--violet); background:#eee9fb; }
.judge .icon { width:26px; height:26px; stroke-width:3; }
.judge .circle { width:23px; height:23px; border:3px solid currentColor; border-radius:50%; flex-shrink:0; }
.judge.correct { background:var(--pink); border-color:var(--pink); color:#fff; }
.judge:disabled { background:#ece8f1; border-color:#e0d9e9; color:#94899f; }
.timer { display:inline-flex; gap:4px; align-items:center; background:#eae5f5; color:var(--violet); padding:8px; border-radius:8px; font-variant-numeric:tabular-nums; font-size:21px; justify-content:center; }
.timer .icon { width:18px; height:18px; }
.timer small { font-size:13px; }
.timer.urgent { background:#ffe7b1; color:#6a3900; }
.return-screen .board-title { color:#804a09; }
.success-label { display:flex; align-items:center; gap:6px; justify-content:center; color:var(--violet); font-size:18px; margin:32px 0 0; }
.scorer-screen .page-heading { margin-top:12px; margin-bottom:28px; }
.scorer-list { display:grid; gap:12px; }
.scorer-button { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; color:var(--ink); min-height:68px; border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-size:24px; text-align:left; }
.scorer-name { min-width:0; overflow-wrap:anywhere; }
.scorer-button:hover:not(:disabled) { border-color:var(--violet); background:#f2eefb; }
.scorer-button:disabled:not(.chosen) { opacity:.42; }
.scorer-button.chosen { background:var(--violet); border-color:var(--violet); color:#fff; }
.next-action { min-height:60px; }
.ranking-heading { text-align:center; margin:24px 0; }
.ranking-heading>.icon { width:40px; height:36px; color:#92680e; fill:#f8dfa1; }
.ranking-heading .page-heading { margin:8px 0 0; font-size:30px; }
.ranking-columns,.ranking-row { display:grid; grid-template-columns:40px minmax(0,1fr) 60px; align-items:center; gap:12px; }
.ranking-columns { padding:0 16px 10px; font-size:12px; color:var(--muted); }
.ranking-columns span:last-child { text-align:right; }
.round-ranking { list-style:none; display:grid; gap:10px; margin:0; padding:0; }
.ranking-row { min-height:72px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; animation:ranking-arrive 320ms cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--row-delay); }
.ranking-row.is-leading { background:#fff5d9; border-color:#cfad56; }
.ranking-place { font-size:28px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1; }
.ranking-place small { font-size:12px; margin-left:2px; font-weight:700; }
.is-leading .ranking-place { color:#77530b; }
.ranking-person { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }
.ranking-name { font-size:20px; line-height:1.4; overflow-wrap:anywhere; }
.gain-badge { display:inline-flex; align-items:baseline; gap:2px; background:var(--pink); color:#fff; border-radius:6px; padding:5px 8px; font-size:17px; line-height:1; white-space:nowrap; animation:gain-pop 460ms cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--row-delay) + 100ms); }
.gain-badge small { font-size:11px; }
.gain-badge.answerer-gain { background:var(--violet); }
.ranking-score { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ranking-score b { display:inline-block; font-size:29px; line-height:1; }
.ranking-score small { font-size:12px; margin-left:3px; color:var(--muted); }
.has-gain .ranking-score b { animation:score-pop 360ms ease-out both; animation-delay:calc(var(--row-delay) + 220ms); }
.quiet-button { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px auto 0; padding:10px 12px; min-height:44px; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; }
.quiet-button .icon { width:16px; height:16px; }
.quiet-button:hover:not(:disabled) { background:#ebe7f2; }
.quiet-button:disabled { opacity:.45; }
.topic-pass { align-self:center; margin-top:8px; }
.text-button:disabled { opacity:.45; text-decoration:none; cursor:default; }
.primary,.secondary,.scorer-button,.icon-button,.judge,.quiet-button,.text-button { transition:transform 120ms ease-out,background 140ms,border-color 140ms,opacity 140ms; }
.primary:active:not(:disabled),.secondary:active:not(:disabled),.judge:active:not(:disabled),.scorer-button:active:not(:disabled),.icon-button:active { transform:scale(.975); }
.quiet-button:active:not(:disabled),.text-button:active:not(:disabled) { transform:translateY(1px); }
.setup-row { transition:background 160ms,border-color 160ms; }
.setup-row:has(input:checked) { border-color:var(--violet); }
.selection-number { animation:selection-mark 180ms ease-out; }
.letter.swapping { animation:letter-swap 260ms ease-out both; animation-delay:var(--deal-delay); }
.topic-card.topic-changed { animation:topic-change 250ms ease-out; }
.success-label .icon { animation:score-pop 280ms ease-out; }
@keyframes ranking-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes gain-pop { 0% { opacity:0; transform:translateY(6px) scale(.7); } 60% { opacity:1; transform:translateY(-2px) scale(1.12); } 100% { opacity:1; transform:none; } }
@keyframes score-pop { 0% { transform:scale(.88); } 65% { transform:scale(1.13); } 100% { transform:none; } }
@keyframes selection-mark { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes letter-swap { from { opacity:.35; transform:translateY(5px) rotateX(25deg); } to { opacity:1; transform:none; } }
@keyframes topic-change { from { opacity:.25; transform:translateX(10px); } to { opacity:1; transform:none; } }
.final-screen { text-align:center; }
.winner-card { padding:24px 0; margin:16px 0; }
.winner-card .page-heading { color:var(--pink); font-size:22px; margin:0 0 12px; }
.winner-card h2 { font-size:36px; line-height:1.4; overflow-wrap:anywhere; margin:0 0 16px; }
.winner-card strong { font-size:48px; line-height:1; }
.winner-card small { font-size:16px; margin-left:6px; }
.rank-list { display:grid; gap:0; margin:8px 0 24px; }
.rank-row { display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line); text-align:left; min-height:60px; }
.rank-row .name { flex:1; min-width:0; overflow-wrap:anywhere; font-size:18px; }
.rank-row b { font-size:23px; }.rank-row small { font-size:13px; margin-left:3px; }
.rank { font-size:16px; min-width:20px; color:var(--muted); }
dialog { width:min(440px,calc(100% - 32px)); max-height:calc(100svh - 40px); border:0; border-radius:18px; padding:24px; color:var(--ink); background:#fff; }
dialog::backdrop { background:#23163499; }
dialog[open] { animation:enter-screen 160ms ease-out; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
dialog h2 { margin:0; font-size:23px; }dialog h3 { font-size:18px; margin:24px 0 8px; }
dialog p,dialog li { line-height:1.8; font-size:16px; }dialog ul,dialog ol { padding-left:22px; }
.setting { width:100%; display:flex; justify-content:space-between; align-items:center; min-height:60px; border-bottom:1px solid var(--line); background:none; gap:16px; text-align:left; }
.toggle-track { width:44px; height:26px; padding:3px; border-radius:20px; background:#8a8098; flex-shrink:0; }
.toggle-track::before { content:''; display:block; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform 150ms; }
.setting[aria-checked=true] .toggle-track { background:var(--violet); }
.setting[aria-checked=true] .toggle-track::before { transform:translateX(18px); }
.rules-score { width:100%; border-collapse:collapse; font-size:15px; }
.rules-score td { border-bottom:1px solid var(--line); padding:12px 4px; }.rules-score td:last-child { color:var(--pink); text-align:right; }
details { border-top:1px solid var(--line); margin-top:20px; }
summary { cursor:pointer; padding:16px 0; min-height:52px; color:var(--violet); font-size:16px; }
#toast { position:fixed; z-index:5; max-width:440px; width:calc(100% - 32px); left:50%; transform:translateX(-50%); bottom:max(20px,env(safe-area-inset-bottom)); padding:16px; border-radius:12px; background:#292437; color:#fff; font-size:15px; line-height:1.6; text-align:center; pointer-events:none; }
.celebration { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:10; }
.confetti { position:absolute; top:-24px; left:var(--x); font-size:var(--size); color:var(--color); animation:confetti-fall var(--duration) ease-out forwards; animation-delay:var(--delay); }
.letter.flash { animation:select-flash 180ms ease-out; }
body.calm *,body.calm *::before,body.calm *::after { animation:none!important; transition:none!important; }
@keyframes enter-screen { from { opacity:0; } to { opacity:1; } }
@keyframes reveal-card { from { opacity:0; transform:rotateY(-25deg); } to { opacity:1; transform:none; } }
@keyframes select-flash { 50% { filter:brightness(1.12); } }
@keyframes confetti-fall { from { transform:translateY(-20px); } to { transform:translate(var(--drift),100vh) rotate(var(--spin)); opacity:0; } }
@media(min-width:700px) { body { padding:24px; }.stage { border-radius:20px; }.stage,#app,.screen { min-height:calc(100svh - 48px); } }
@media(max-height:760px) and (orientation:portrait) { .screen { padding-left:20px; padding-right:20px; }.home-screen { padding:0; }.home-title { font-size:46px; }.hero-space { min-height:180px; }.letter { height:60px; font-size:33px; }.letter-grid { gap:8px; }.board-title { margin-top:16px; }.board-subtitle { margin-bottom:16px; }.board-controls { padding-top:20px; }.answerer-name { margin-bottom:24px; } }
@media(orientation:landscape) and (max-height:600px) {
  body { padding:0; }.stage { max-width:none; border-radius:0; }.stage,#app,.screen { min-height:100svh; }
  .screen { max-width:940px; margin:auto; padding:12px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left)); }
  .board-layout { flex-direction:row; gap:28px; align-items:center; }.board-deck { width:64%; }.board-controls { width:36%; padding:0; margin:0; }
  .letter-grid[data-count] { grid-template-columns:repeat(6,minmax(0,1fr)); }.letter { height:56px; font-size:32px; }.board-title { margin:8px 0 0; font-size:24px; }.board-subtitle { margin-bottom:12px; }
  .home-screen { padding:0 0 0 48%; justify-content:center; }.hero-art { width:45%; height:100%; object-fit:cover; object-position:bottom; }.home-top { padding:8px 20px 0; }.home-title { font-size:36px; margin:8px 0 0; }.hero-space { min-height:8px; flex:0; }.home-footer { padding:12px 24px; background:#221731; }.home-stats { margin:12px 0 0; }.credit { display:none; }
  .topic-wrap { padding:16px 0; }.topic-card { padding:24px; }.topic-screen .page-heading { margin:8px 0; }
  .answerer-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:12px 0; }.answerer-caption { grid-column:1; }.answerer-name { grid-column:1; margin:0; }.privacy-warning { grid-column:2; grid-row:1/3; }.privacy-warning .icon { width:32px; height:32px; }.privacy-warning h1 { font-size:26px; margin:8px 0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }