:root { --pink:#ff7dab; --pink-dark:#e8558c; --blue:#4cc2f1; --blue-dark:#1f9fd4; --ink:#334155; --paper:#fffafc; --mint:#6acb9b; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; color:var(--ink); background:linear-gradient(150deg,#ffe9f2,#e9f9ff 60%,#fff); }
* { box-sizing:border-box; } html { min-height:100%; touch-action:manipulation; } body { margin:0; min-height:100dvh; } button,input { font:inherit; } button { cursor:pointer; border:0; } #app { min-height:100dvh; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); }
.screen { width:min(100%,600px); animation:appear .22s ease-out; } .title-screen,.result-screen { text-align:center; } .title-logo { display:block; width:min(100%,480px); margin:4vh auto 1rem; } .lead { font-weight:700; color:var(--blue-dark); } .title-actions,.result-actions { display:grid; gap:12px; width:min(100%,360px); margin:1.6rem auto; } .title-note { font-size:.82rem; color:#64748b; }
.primary,.secondary { min-height:48px; padding:.7rem 1.1rem; border-radius:999px; font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,.12); transition:transform .12s,filter .12s; } .primary { color:white; background:linear-gradient(135deg,var(--pink),var(--pink-dark)); } .secondary { color:white; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); } .primary.big,.secondary.big { min-height:58px; font-size:1.15rem; } button:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.12); } button:disabled { cursor:not-allowed; filter:grayscale(.65); opacity:.55; }
.solo-game-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .retry-question,.retire { min-height:42px; border-radius:12px; font-weight:800; } .retry-question { color:var(--blue-dark); border:2px solid #a8e3f8; background:#f3fcff; } .retire { color:#8f4962; border:2px solid #ffd3e2; background:#fff8fb; }
.sound-toggle { position:fixed; right:16px; top:max(16px,env(safe-area-inset-top)); width:42px; height:42px; border-radius:50%; background:white; color:var(--pink-dark); box-shadow:0 2px 10px #e8558c33; }
.game-screen { display:grid; gap:14px; } .game-header { display:flex; justify-content:space-between; align-items:center; font-weight:800; color:var(--pink-dark); } .timer { border-radius:99px; padding:.35rem .75rem; color:white; background:var(--blue-dark); } .quiz-progress { height:8px; overflow:hidden; border-radius:99px; background:#dceff7; } .quiz-progress::after { content:""; display:block; width:var(--progress); height:100%; background:var(--pink); transition:width .3s; }
.shape-card { min-height:min(50dvh,380px); display:grid; place-items:center; border:5px solid white; border-radius:28px; background:radial-gradient(circle at 50% 38%,#fff 0,#fff 44%,#eefaff 100%); box-shadow:0 10px 28px #1f9fd422; } .prefecture-wrap { width:min(82vw,360px); aspect-ratio:1; display:grid; place-items:center; } .prefecture-shape { width:100%; height:100%; overflow:visible; fill:var(--blue); filter:drop-shadow(0 8px 5px #1f9fd442); transform:rotate(var(--rotation)); transition:transform .85s cubic-bezier(.25,.8,.25,1); }
.answer-area { background:white; border-radius:20px; padding:16px; box-shadow:0 5px 18px #e8558c17; } .answer-label { display:block; margin:0 0 7px; font-size:.85rem; font-weight:800; color:var(--pink-dark); text-align:left; } .suggest-box { position:relative; } .answer-input { width:100%; min-height:48px; border:2px solid #bde9fa; border-radius:12px; padding:.65rem .8rem; outline:none; touch-action:auto; } .answer-input:focus { border-color:var(--blue-dark); } .suggestions { position:absolute; z-index:4; width:100%; max-height:210px; overflow:auto; margin:5px 0; padding:4px; list-style:none; border-radius:12px; background:white; box-shadow:0 9px 24px #33415533; } .suggestions li { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:.7rem; border-radius:8px; text-align:left; } .suggestions li.active,.suggestions li:hover { background:#eaf8ff; } .suggestions span { color:#64748b; font-size:.72rem; } .submit-answer { width:100%; margin-top:12px; }.answer-feedback { padding:.85rem; border-radius:12px; text-align:center; }.answer-feedback.correct { background:#e9fbf2; color:#16784e; }.answer-feedback.wrong { background:#fff0f3; color:#ba3c65; }.answer-feedback p { margin:.3rem 0; font-size:.9rem; }
.answered-players,.lobby-card,.multi-menu { padding:16px; border-radius:20px; background:white; box-shadow:0 5px 18px #1f9fd417; }.answered-players h2 { margin:.1rem 0 .5rem; font-size:1rem; }.answered-players p { display:flex; gap:.5rem; align-items:center; margin:.35rem 0; font-size:.9rem; }.answered-players small { margin-left:auto; color:#94a3b8; }.status-dot { width:9px; height:9px; border-radius:50%; background:#cbd5e1; }
.score-bubble { display:grid; place-items:center; width:160px; height:160px; margin:1rem auto; border:7px solid white; border-radius:50%; color:white; background:linear-gradient(145deg,var(--pink),var(--blue)); box-shadow:0 8px 20px #1f9fd433; }.score-bubble strong { font-size:4.2rem; line-height:1; }.score-bubble span { font-size:.8rem; }.result-list { max-height:42dvh; margin:1rem 0; padding:0; overflow:auto; list-style:none; text-align:left; }.result-list li { display:grid; grid-template-columns:4.8rem 1fr; gap:2px 8px; padding:.65rem .8rem; margin:.35rem 0; border-radius:12px; background:white; }.result-list li small { grid-column:2; color:#64748b; }.result-list .correct { border-left:5px solid var(--mint); }.result-list .wrong { border-left:5px solid var(--pink-dark); }
.reveal-row { display:grid; grid-template-columns:4.8rem 1fr; gap:2px 8px; padding:.55rem .75rem; margin:.35rem 0; border-radius:10px; background:white; }.reveal-row small { grid-column:2; color:#64748b; }.reveal-row.correct { border-left:5px solid var(--mint); }.reveal-row.wrong { border-left:5px solid var(--pink-dark); }.correct-name { text-align:center; color:var(--pink-dark); }.reveal-shape { min-height:200px; max-height:250px; }
.multi-menu label { display:block; margin:.8rem 0 .35rem; font-weight:800; }.multi-menu input { width:100%; min-height:46px; padding:.6rem; border:2px solid #bde9fa; border-radius:10px; touch-action:auto; }.multi-menu .error { color:#ba3c65; min-height:1.5em; }.room-code { font-size:2.5rem; letter-spacing:.16em; color:var(--pink-dark); }.player-list { padding:0; list-style:none; }.player-list li { display:flex; align-items:center; padding:.5rem; border-bottom:1px solid #edf2f7; }.host-badge { margin-left:auto; padding:.12rem .45rem; border-radius:99px; background:#ffe3ed; color:var(--pink-dark); font-size:.72rem; }
@keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @media (min-width:700px) { #app { padding:32px; }.shape-card { min-height:360px; } } @media (max-height:700px) { .title-logo { width:min(74vw,360px); margin-top:0; }.shape-card { min-height:38dvh; }.result-list { max-height:31dvh; } }