:root{color:#3e171d;background:#fff7f8;font-family:Inter,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #fff7f8;--bg-soft: #fffdfd;--panel: rgba(255, 251, 251, .94);--panel-strong: #ffffff;--line: rgba(197, 77, 94, .16);--line-strong: rgba(178, 41, 61, .3);--text: #3e171d;--text-soft: #7c5960;--blue: #d63d4c;--blue-deep: #b32235;--blue-soft: #ffe6e9;--green: #1f8f58;--green-soft: #e8f8ef;--red: #d63d4c;--red-soft: #fff0f2;--shadow-soft: 0 16px 34px rgba(178, 34, 53, .1);--shadow-strong: 0 24px 52px rgba(148, 26, 44, .14)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;min-height:100vh;font-size:16px;color:var(--text);background:radial-gradient(circle at top left,rgba(255,213,221,.78),transparent 30%),radial-gradient(circle at top right,rgba(255,229,233,.68),transparent 26%),linear-gradient(180deg,#fffafafa,#fff4f6fa),repeating-linear-gradient(90deg,rgba(214,61,76,.04) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(214,61,76,.028) 0 1px,transparent 1px 34px)}button,input,select{font:inherit}button{border:1px solid rgba(214,61,76,.22);border-radius:8px;background:linear-gradient(180deg,#e04454fa,#b32235fa);color:#fff;font-size:1rem;font-weight:800;line-height:1.35;cursor:pointer;min-height:48px;padding:12px 18px;box-shadow:0 10px 22px #b2223514;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}button:hover:not(:disabled){border-color:#961b2c7a;background:linear-gradient(180deg,#d53547,#a11a2c);box-shadow:0 16px 30px #b2223524;transform:translateY(-2px)}button:active:not(:disabled){border-color:#84132385;background:linear-gradient(180deg,#bf293a,#921426);transform:translateY(0) scale(.98);box-shadow:0 10px 18px #b222351f}button:disabled{cursor:not-allowed;opacity:.56;box-shadow:none}input,select{width:100%;border:1px solid rgba(214,61,76,.18);border-radius:8px;background:#fffcfcfa;color:var(--text);min-height:48px;padding:11px 12px;box-shadow:inset 0 1px #ffffffe6;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(214,61,76,.2);outline-offset:2px}h1,h2,p{margin-top:0}.app{position:relative;min-height:100vh}.app-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(214,61,76,.12);background:#fff8f9e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:14px 24px}.brand-button{border:none;background:transparent;min-height:auto;padding:0;box-shadow:none;color:var(--blue-deep);font-size:1.08rem;font-weight:800}.brand-button:hover,.brand-button:active{transform:none;box-shadow:none}.header-nav{display:flex;align-items:center;gap:12px}.header-actions,.button-row{display:flex;flex-wrap:wrap;gap:10px}.desktop-nav{align-items:center}.menu-toggle{display:none;min-width:52px;min-height:52px;padding:12px;border-color:#d63d4c2e;background:linear-gradient(180deg,#e04454fa,#b32235fa);box-shadow:0 12px 24px #b222351f}.menu-toggle span{display:block;width:22px;height:2px;border-radius:999px;background:#fff;margin:4px auto;transition:transform .18s ease,opacity .18s ease,background-color .18s ease}.menu-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle.is-open span:nth-child(2){opacity:0}.menu-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.mobile-menu-overlay{display:none;position:fixed;inset:0;background:#45101847;opacity:0;pointer-events:none;transition:opacity .18s ease}.mobile-menu-overlay.is-open{opacity:1;pointer-events:auto}.mobile-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(260px,calc(100vw - 24px));border:1px solid rgba(214,61,76,.16);border-radius:8px;background:linear-gradient(180deg,#fffffffc,#fff5f6fc);box-shadow:0 24px 42px #941a2c2e;padding:12px;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.mobile-menu.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.mobile-menu-actions{display:grid;gap:8px}.mobile-menu-button{width:100%;min-height:52px;justify-content:flex-start;text-align:left}.screen{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:40px 0 68px;animation:screen-fade .32s ease}.narrow-screen{width:min(860px,calc(100% - 32px))}.top-screen{display:grid;min-height:calc(100vh - 73px);justify-items:center;align-content:start;padding-top:clamp(40px,8vh,96px)}.hero-panel,.panel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:radial-gradient(circle at top right,rgba(255,226,230,.72),transparent 22%),linear-gradient(180deg,#fffffffa,#fff7f8f5);box-shadow:var(--shadow-soft);animation:panel-rise .38s ease both}.hero-panel:before,.panel:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#d63d4ce0,#ff8b9885)}.hero-panel{width:min(760px,100%);min-height:clamp(360px,46vh,440px);padding:62px 56px;box-shadow:var(--shadow-strong);display:flex;flex-direction:column;justify-content:center}.hero-panel h1,.section-heading h1,.quiz-topbar h1,.result-hero h1{margin-bottom:12px;line-height:1.15}.hero-panel h1,.section-heading h1,.result-hero h1{font-size:clamp(2rem,4vw,3rem)}.quiz-topbar h1{font-size:clamp(1.8rem,3vw,2.4rem)}.lead{color:var(--text-soft);font-size:1.08rem;line-height:1.85;margin-bottom:22px}.eyebrow{color:var(--blue);font-weight:800;letter-spacing:normal;margin-bottom:8px}.hero-highlights{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.hero-highlights span,.result-summary span{border:1px solid rgba(214,61,76,.14);border-radius:999px;background:#ffeff2eb;color:#92313d;font-weight:700;padding:8px 12px}.section-heading{margin-bottom:24px}.form-panel{display:grid;gap:20px;padding:28px}.form-panel label{display:grid;gap:8px;font-weight:700}.form-message{border:1px solid rgba(214,61,76,.12);border-radius:8px;background:#fff4f6f0;color:var(--text-soft);line-height:1.7;margin-bottom:0;padding:12px 14px}.error-message{border-color:#c1494947;background:#ffeceffa;color:#8c1d1d}.quiz-screen,.history-screen,.room-screen,.review-screen{display:grid;gap:20px}.quiz-topbar,.result-hero{display:flex;align-items:end;justify-content:space-between;gap:16px}.score-mini{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.score-mini span,.question-meta span,.badge{border:1px solid rgba(214,61,76,.12);border-radius:999px;background:#ffeff2e6;color:#92313d;font-weight:700;padding:7px 11px}.timer-chip{border-color:#d63d4c29;background:linear-gradient(180deg,#e04454f5,#b32235f5);color:#fff;box-shadow:0 12px 22px #b2223538}.result-mode-badge{background:#ffe9edf5;color:var(--blue-deep)}.question-panel{padding:28px}.question-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.question-text{white-space:pre-wrap;font-size:1.04rem;line-height:1.95;margin-bottom:0}.question-assets{display:grid;gap:16px;margin-top:20px}.question-asset{margin:0}.question-asset-image,.question-image{display:block;width:min(100%,760px);max-height:560px;object-fit:contain;border:1px solid rgba(214,61,76,.16);border-radius:8px;background:#fff;box-shadow:inset 0 1px #fffffff2,0 10px 24px #b2223514}.question-asset-caption{color:var(--text-soft);font-size:.92rem;margin-top:8px}.players-grid,.result-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.player-panel,.result-card,.answer-panel,.result-summary,.empty-state,.history-item,.review-item{padding:24px}.player-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.player-title h2{margin:0}.choice-list{display:grid;gap:12px}.choice-button{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:12px;width:100%;min-height:62px;padding:15px 16px;color:var(--text);text-align:left;line-height:1.65;background:linear-gradient(180deg,#fff,#fff5f6)}.choice-button:hover:not(:disabled){background:linear-gradient(180deg,#fff,#ffedf0)}.choice-content{display:grid;gap:10px}.choice-image{display:block;max-width:min(100%,360px);max-height:220px;object-fit:contain;border:1px solid rgba(214,61,76,.16);border-radius:8px;background:#fff}.choice-label{display:inline-grid;place-items:center;border-radius:999px;background:#ffeceff5;width:30px;height:30px;font-weight:800}.choice-button.selected{border-color:#d63d4c57;background:linear-gradient(180deg,#fff4f5,#ffe7ea);box-shadow:inset 0 0 0 1px #d63d4c24,0 12px 24px #d63d4c1a}.choice-button.correct-choice{border-color:#1f8f5870;background:linear-gradient(180deg,#effcf5,#e3f8ec);box-shadow:inset 0 0 0 1px #1f8f5829,0 10px 22px #1f8f5814}.choice-button.wrong-choice{border-color:#c149496b;background:linear-gradient(180deg,#fff6f6,#ffeaea);box-shadow:inset 0 0 0 1px #c1494924,0 10px 22px #c1494914}.badge.correct{background:linear-gradient(180deg,#fff1dffa,#ffe9d2fa);color:#9a4b16;border:1px solid rgba(214,133,61,.24)}.badge.wrong{background:linear-gradient(180deg,#fde4e4fa,#ffededfa);color:#8c1d1d;border:1px solid rgba(193,73,73,.24)}.answer-panel{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-color:#d63d4c29;background:linear-gradient(180deg,#fffafb,#fff1f3)}.compact-answer-panel{margin-top:16px;padding:16px}.result-hero{padding:26px 28px;box-shadow:var(--shadow-strong);background:radial-gradient(circle at top right,rgba(255,205,213,.9),transparent 24%),linear-gradient(180deg,#fffffffc,#fff3f5fa)}.result-hero-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.score-large{font-size:3rem;font-weight:800;margin-bottom:6px}.score-large span{color:var(--text-soft);font-size:1rem}.accuracy{color:var(--blue);font-weight:800;margin-bottom:0}.winner-card{border-color:#d63d4c38;background:radial-gradient(circle at top right,rgba(255,211,218,.82),transparent 22%),linear-gradient(180deg,#fff,#fff0f3);box-shadow:0 20px 38px #d63d4c24}.result-summary{display:flex;flex-wrap:wrap;gap:12px;color:var(--text-soft)}.accuracy-meter{overflow:hidden;height:12px;border-radius:999px;background:#ffe6eaf5;margin:12px 0}.accuracy-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff8d98,#d63d4c)}.subtle-text{color:var(--text-soft);line-height:1.75;margin-bottom:0}.segmented-field{display:grid;gap:10px;border:0;margin:0;padding:0}.segmented-field legend{font-weight:700;margin-bottom:2px}.radio-card{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:12px;border:1px solid rgba(214,61,76,.16);border-radius:8px;padding:14px;background:linear-gradient(180deg,#fffffffa,#fff5f6f5);font-weight:700}.radio-card input{width:auto;min-height:auto;margin-top:4px}.radio-card small{display:block;color:#5e6a78;font-weight:500;line-height:1.55;margin-top:4px}.online-menu-grid,.room-layout{display:grid;gap:16px}.progress-board{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.progress-gauge{display:grid;gap:10px;padding:18px 20px}.progress-gauge.is-complete{background:linear-gradient(180deg,#fffcfcfc,#fff1f3f7)}.progress-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}.progress-track{position:relative;overflow:visible;height:12px;border-radius:999px;background:#ffdfe4e6}.progress-track.is-disconnected{background:#ecdcdfeb}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff8f9b,#d63d4c);transition:width .26s ease}.progress-gauge.is-complete .progress-fill{background:linear-gradient(90deg,#ff7685,#b32235)}.progress-thumb{position:absolute;top:50%;width:14px;height:14px;border:2px solid #ffffff;border-radius:50%;background:#d63d4c;box-shadow:0 6px 14px #d63d4c3d;transform:translateY(-50%);transition:left .26s ease,background-color .26s ease,box-shadow .26s ease}.progress-gauge.is-complete .progress-thumb{background:#b32235;box-shadow:0 6px 14px #b3223547}.progress-caption{font-size:.94rem}.online-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}.menu-card,.room-summary,.room-code-card,.waiting-card{display:grid;gap:14px;padding:24px}.menu-card h2,.waiting-card h2{margin-bottom:0}.room-hero-grid{display:grid;gap:16px;grid-template-columns:minmax(240px,300px) minmax(0,1fr)}.room-code-card{align-content:start;background:radial-gradient(circle at top right,rgba(255,214,221,.88),transparent 26%),linear-gradient(180deg,#fffffffc,#fff1f3f7)}.room-code-value{border:1px solid rgba(214,61,76,.18);border-radius:8px;background:linear-gradient(180deg,#ffe1e6eb,#ffeff1f5);box-shadow:inset 0 1px #fffffff2;color:var(--blue-deep);font-size:clamp(2rem,5vw,3.4rem);font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:normal;line-height:1;padding:18px 16px;text-align:center}.waiting-card{background:radial-gradient(circle at top right,rgba(255,222,227,.76),transparent 24%),linear-gradient(180deg,#fffdfdfc,#fff2f4fa)}.waiting-card-main,.waiting-card-center{display:flex;align-items:center;gap:18px}.waiting-card-center{min-height:180px;justify-content:center;text-align:center;flex-direction:column}.loading-spinner{position:relative;display:inline-block;flex:0 0 auto;border-radius:50%;border:3px solid rgba(214,61,76,.14);border-top-color:#d63d4cf0;border-right-color:#b32235b8;animation:spinner-rotate .9s linear infinite}.loading-spinner-sm{width:18px;height:18px}.loading-spinner-md{width:28px;height:28px}.loading-spinner-lg{width:46px;height:46px}.history-list,.review-list{display:grid;gap:14px}.history-item{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto}.history-item h2{margin-bottom:8px}.history-item p{margin-bottom:0}.history-date{color:var(--text-soft);font-size:.9rem}.history-scores{display:grid;align-content:center;gap:8px;min-width:220px}.history-details{grid-column:1 / -1;border-top:1px solid rgba(214,61,76,.12);padding-top:12px}.history-details summary{cursor:pointer;font-weight:700}.history-answer-list{display:grid;gap:8px;margin-top:12px}.history-answer-row{display:grid;grid-template-columns:minmax(160px,auto) auto 1fr 1fr;gap:10px;border-radius:8px;background:#fff5f7f5;padding:10px 12px}.review-answer-block{display:grid;gap:6px;border-left:4px solid rgba(214,61,76,.88);background:linear-gradient(180deg,#fffafbfc,#fff1f3fa);margin-top:18px;padding:14px 16px}.review-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.review-player-answer{border:1px solid rgba(214,61,76,.14);border-radius:8px;padding:16px}.review-player-answer p{line-height:1.7;margin-bottom:0}.review-player-answer.is-correct{border-color:#d6853d38;background:#fff8f1fa}.review-player-answer.is-wrong{border-color:#c1494933;background:#fff3f5fa}.empty-state{text-align:center;color:var(--text-soft)}.compact-title{margin-bottom:10px}.primary-button{border-color:#b322354d;box-shadow:0 14px 28px #b222352e}.primary-button:hover:not(:disabled){box-shadow:0 18px 30px #b222353d}.primary-button:active:not(:disabled){box-shadow:0 10px 18px #b222352e}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@keyframes screen-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes panel-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:860px){.room-hero-grid,.online-menu-grid,.progress-board{grid-template-columns:1fr}.result-hero,.quiz-topbar{align-items:stretch;flex-direction:column}.result-hero-badges,.score-mini{justify-content:flex-start}}@media(max-width:760px){.history-item{align-items:stretch;flex-direction:column}.app-header{padding:14px 16px}.brand-button{min-width:0;font-size:1rem;text-align:left}.header-nav{position:relative;margin-left:auto}.desktop-nav{display:none}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.mobile-menu-overlay,.mobile-menu{display:block}.mobile-menu-button,.menu-toggle{flex:none}.button-row button{flex:1 1 180px}.screen,.narrow-screen{width:min(100% - 24px,1120px);padding-top:24px;padding-bottom:40px}.hero-panel{min-height:auto;padding:40px 20px 44px}.question-panel,.player-panel,.result-card,.answer-panel,.result-summary,.history-item,.review-item,.menu-card,.room-summary,.room-code-card,.waiting-card{padding:20px}.players-grid,.result-grid,.review-players,.history-answer-row,.history-item{grid-template-columns:1fr}.history-scores{min-width:0}.waiting-card-main{align-items:flex-start;flex-direction:column}.room-code-value{font-size:2.4rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}