:root { --paper: #f6f3eb; --ink: #292a24; --muted: #77786f; --line: #deded2; --lime: #d4fa49; --coral: #ed7f74; --white: #fffefa; --font: 'Arial', 'Helvetica Neue', sans-serif; }
* { box-sizing: border-box; }
html { overflow-anchor: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, summary, select { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #8b9b34; outline-offset: 5px; }
button, a, input, select, summary { touch-action: manipulation; }
input, select { width: 100%; min-height: 56px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); padding: 15px 16px; color: var(--ink); font-size: 16px; outline: none; }
input:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px #d4fa4945; }
input::placeholder { color: #a1a096; font-size: 14px; }
label { display: block; font-size: 13px; font-weight: 700; margin: 24px 0 9px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(43px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -.065em; font-weight: 800; overflow-wrap: anywhere; }
h2 { font-size: 26px; letter-spacing: -.045em; line-height: 1.15; }
.accent { color: #8b9b34; }
.app-shell { max-width: 1140px; padding: 0 40px; margin: 0 auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.topbar { min-height: 105px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.wordmark { font-weight: 800; font-size: 29px; letter-spacing: -1.8px; text-decoration: none; display: flex; align-items: center; }
.wordmark span { font-weight: 400; }
.wordmark i { font-size: 29px; font-style: normal; margin-left: 9px; color: #919d45; }
.connection { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.connection > span, .live-dot { width: 6px; height: 6px; display: inline-block; border-radius: 100%; background: #89a446; }
.connection.offline > span { background: #cb8f64; animation: pulse 1.5s infinite; }
main { flex: 1; padding: 30px 0 52px; }
.footer { border-top: 1px solid var(--line); padding: 22px 0 max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; color: #88887a; font-size: 9px; letter-spacing: 1.9px; font-weight: 600; gap: 15px; }
.footer-symbols { display: flex; align-items: center; gap: 5px; font-size: 15px; letter-spacing: 5px; }
.finger-icon { width: .85em; height: 1.15em; object-fit: contain; vertical-align: -.2em; }
.mini-card .finger-icon { width: 65px; height: 91px; }
.finger-art .finger-icon { width: 72px; height: 105px; }
.count-field .finger-icon { width: 28px; height: 40px; }
.spectator-art .finger-icon { width: 66px; height: 96px; }
.empty-state { min-height: 65vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 25px; text-align: center; touch-action: manipulation; user-select: none; }
.empty-state p { font-size: 18px; line-height: 1.5; }
.waiting .topbar, .waiting .footer { display: none; }
.waiting main { padding: 0; }
.waiting .empty-state { min-height: 100vh; min-height: 100svh; }
.game-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 42px; font-size: 12px; }
.game-meta > span:first-child { display: flex; align-items: center; gap: 9px; font-weight: 600; overflow-wrap: anywhere; }
.target-pill { border: 1px solid #d7d8cb; border-radius: 30px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 70px; align-items: start; }
.intro { padding-top: 24px; }
.intro-copy { padding-top: 15px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.65px; line-height: 1.7; margin-bottom: 20px; color: #77786a; }
.lead { font-size: 16px; line-height: 1.65; margin-top: 22px; color: #77786f; }
.lead strong { color: var(--ink); }
.panel { border: 1px solid var(--line); border-radius: 22px; background: var(--white); padding: 28px; min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 10px; }
.step-tag { font-size: 10px; letter-spacing: 1.4px; font-weight: 700; color: #76776b; }
.small-symbol { font-size: 23px; }
.muted { font-size: 13px; color: var(--muted); line-height: 1.7; }
.panel > .muted { margin-top: 9px; }
.button { display: flex; width: 100%; min-height: 55px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--ink); border-radius: 12px; padding: 16px 19px; background: var(--lime); font-weight: 700; font-size: 14px; transition: transform .15s, box-shadow .15s; }
.button:not(:disabled):active { transform: translateY(2px); }
.button:not(:disabled):hover { box-shadow: 3px 3px 0 var(--ink); }
.button > span { font-size: 22px; line-height: 16px; }
form .button { margin-top: 25px; }
.secondary { background: transparent; border-color: var(--line); }
.danger { background: var(--coral); }
.text-button { display: block; border: 0; background: none; color: var(--muted); font-size: 12px; padding: 15px; margin: 5px auto 0; text-decoration: underline; text-underline-offset: 4px; }
.number-wrap { position: relative; }.number-wrap input { padding-right: 75px; }.number-wrap span { position: absolute; right: 18px; top: 18px; font-size: 13px; color: var(--muted); pointer-events: none; }
.panel-note { font-size: 10px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); padding-top: 21px; margin-top: 17px; }
.hero-cards { position: relative; height: 250px; width: 330px; max-width: 100%; margin: 43px 0 0 8px; }
.mini-card { position: absolute; border: 1.5px solid var(--ink); border-radius: 15px; height: 186px; width: 143px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 4px 5px 0 #292a2410; }
.mini-card span { position: absolute; top: 9px; left: 12px; font-size: 17px; }.mini-card b { position: absolute; bottom: 20px; font-size: 13px; letter-spacing: -.4px; }.mini-card i { font-size: 69px; font-style: normal; margin-bottom: 14px; }
.love { transform: rotate(-12deg); left: 22px; top: 12px; background: var(--coral); }.disrespect { transform: rotate(11deg); left: 143px; top: 17px; background: var(--lime); }.disrespect i { font-size: 59px; }
.card-caption { position: absolute; bottom: 8px; width: 100%; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-align: center; color: #818173; }
.join-count { display: flex; align-items: center; gap: 12px; padding: 24px 0; margin-top: 9px; }.join-count p { font-size: 11px; color: var(--muted); }.join-count b { color: var(--ink); }
.avatar-stack { display: flex; padding-left: 5px; }.avatar-stack .avatar { margin-left: -5px; width: 29px; height: 29px; border: 2px solid var(--white); font-size: 10px; }
.avatar { height: 39px; width: 39px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; position: relative; }
.tone-0 { background: #e9edcd; }.tone-1 { background: #f3d9d2; }.tone-2 { background: #e0dcef; }.tone-3 { background: #dce9e9; }.tone-4 { background: #f2e5c9; }
.presence { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--white); background: #b9b7ac; }.presence.online { background: #86a446; }
.rules { border-top: 1px solid var(--line); font-size: 12px; padding-top: 19px; }.rules summary { list-style: none; font-weight: 600; display: flex; justify-content: space-between; align-items: center; min-height: 25px; }.rules summary::-webkit-details-marker { display: none; }.rules summary span { font-size: 18px; font-weight: 400; }.rules[open] summary span { transform: rotate(45deg); }.rules-body { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--muted); }.rules-body strong { color: var(--ink); }.rule-line { display: flex; gap: 12px; margin: 17px 0; }.rule-line b { color: #92977b; font-size: 10px; padding-top: 3px; }
.play-layout { gap: 60px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }.main-panel { padding-top: 7px; min-width: 0; }.main-panel > .button { margin-top: 26px; }
.seat-card { border: 1px solid var(--line); border-radius: 18px; margin-top: 30px; padding: 25px; background: #eeefe3; }.section-icon { margin-bottom: 13px; font-size: 29px; line-height: 1; }.seat-card h2 { font-size: 22px; }.seat-card .muted { margin: 10px 0 19px; }.seat-confirm { color: #677339; margin-top: 15px; font-size: 12px; }
.lobby-status { margin-top: 25px; }.progress-track { display: block; width: 100%; height: 4px; border: 0; appearance: none; background: #e3e2d6; border-radius: 4px; overflow: hidden; }.progress-track::-webkit-progress-bar { background: #e3e2d6; }.progress-track::-webkit-progress-value { background: #96a947; }.progress-track::-moz-progress-bar { background: #96a947; }.lobby-status p { font-size: 11px; color: var(--muted); margin-top: 10px; }.lobby-status strong { color: var(--ink); }
.help-text { font-size: 11px; color: var(--muted); line-height: 1.7; text-align: center; margin-top: 14px; }.waiting-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 19px; margin-top: 24px; border: 1px dashed #cbcbbd; border-radius: 12px; font-size: 12px; color: var(--muted); line-height: 1.6; text-align: center; }
.count-tag { color: var(--muted); font-size: 10px; background: #f1f1e8; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.player-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid #eaeade; }.player-row:first-child { padding-top: 0; }.player-row:last-child { border: 0; }.player-info { flex: 1; min-width: 0; }.player-info > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }.player-info strong { font-size: 13px; overflow-wrap: anywhere; }.player-info small { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; line-height: 1.5; }.you-tag, .host-tag { font-size: 8px; font-weight: 500; border: 1px solid #dbddc9; border-radius: 4px; padding: 2px 4px; color: #8a8c74; }.is-you .player-info strong { color: #727f31; }.ready-mark { font-size: 15px; color: #7c8d36; }.not-ready { font-size: 25px; color: #c2c2b2; }.remove-player { background: none; border: none; color: #929285; width: 27px; min-height: 36px; font-size: 20px; margin-right: -10px; }
.share-button { margin: 17px 0 24px; min-height: 46px; font-size: 12px; }.host-control { margin-top: 18px; font-size: 10px; padding-bottom: 0; }.score { display: flex; flex-direction: column; align-items: flex-end; font-size: 22px; letter-spacing: -.8px; }.score small { font-size: 8px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }.score-goal { font-size: 11px; color: var(--muted); padding: 16px 0 22px; margin-top: 3px; border-top: 1px solid var(--line); }.score-goal strong { color: var(--ink); }
.round-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 27px; }.round-top .eyebrow { margin: 0; font-size: 9px; letter-spacing: 1px; max-width: 56%; }.round-steps { display: flex; align-items: center; gap: 5px; white-space: nowrap; }.round-steps span { width: 18px; height: 18px; border: 1px solid #cfcebf; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #a1a094; position: relative; }.round-steps small { display: none; }.round-steps .done { background: #e0e6c8; border-color: #a5b465; color: #6c7839; }.round-steps .current { background: var(--ink); color: var(--lime); border-color: var(--ink); }.round-steps i { width: 10px; height: 1px; background: #cfcebf; }
.points-badge { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 1px; background: #e6eccd; padding: 7px 10px; border-radius: 6px; margin-bottom: 20px; color: #687738; }.bonus-badge { background: #f3ded5; color: #9e594a; }
.card-choices { display: flex; gap: 18px; margin-top: 31px; }.choice-card { min-width: 0; width: 50%; height: 260px; border: 1.5px solid var(--ink); border-radius: 18px; padding: 18px 10px 32px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; }.heart-card { background: #f1b0a6; }.finger-card { background: var(--lime); }.choice-card:not(:disabled):hover { transform: translateY(-5px) rotate(-2deg); box-shadow: 4px 5px 0 var(--ink); }.choice-card:disabled { opacity: .45; }.choice-card.selected:disabled { opacity: 1; box-shadow: 4px 5px 0 var(--ink); }.card-corner { position: absolute; left: 13px; top: 11px; font-size: 20px; }.card-art { font-size: 80px; line-height: 1.3; margin-bottom: 9px; }.finger-art { font-size: 68px; }.choice-card strong { font-size: 18px; letter-spacing: -.6px; }.choice-card small { font-size: 10px; margin-top: 6px; color: #383a2bad; }.card-bottom { position: absolute; bottom: 14px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: 1px; }.card-counter { font-size: 11px; color: var(--muted); text-align: center; margin-top: 24px; }
.turn-wait { margin-top: 35px; border: 1px dashed #cccdbd; border-radius: 18px; text-align: center; padding: 35px 20px; }.large-orbit { display: block; font-size: 60px; color: #a1b14b; margin-bottom: 22px; animation: orbit 15s linear infinite; }.turn-wait h2 { font-size: 21px; }.turn-wait .muted { margin-top: 10px; }.ready-people { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 24px; }.ready-chip { padding: 6px 10px; background: #eae9df; color: #939283; border-radius: 30px; font-size: 10px; }.ready-chip.checked { background: #e4edc6; color: #6c7936; }
.spectator-card { text-align: center; border: 1px solid var(--line); border-radius: 18px; background: #eeefe3; padding: 27px 20px; margin-top: 30px; }.spectator-card .eyebrow { display: block; margin-bottom: 14px; }.spectator-art { display: block; font-size: 68px; margin-bottom: 14px; }.spectator-card h2 { font-size: 21px; }.spectator-card .muted { margin-top: 12px; }
.count-fields { display: flex; gap: 17px; margin-top: 30px; }.count-field { flex: 1; min-width: 0; padding: 23px 20px; background: #eeefe3; border: 1px solid #d9dcce; border-radius: 16px; text-align: center; }.count-field > span { font-size: 35px; }.count-field:first-child > span { color: #d77d71; }.count-field label { margin: 14px 0 16px; font-size: 12px; }.count-field input { text-align: center; font-size: 32px; font-weight: 700; padding: 13px 6px; appearance: textfield; -moz-appearance: textfield; }.count-field input::-webkit-inner-spin-button, .count-field input::-webkit-outer-spin-button { -webkit-appearance: none; }.bonus-note { border-left: 2px solid #d4d7b5; margin-top: 26px; padding-left: 17px; font-size: 12px; line-height: 1.8; color: var(--muted); }.bonus-note strong { color: var(--ink); }
.result-lines { border-top: 1px solid var(--line); margin-top: 30px; }.result-line { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 19px 0; border-bottom: 1px solid var(--line); }.result-line b { display: block; font-size: 14px; }.result-line small { display: block; font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.7; }.result-points { min-width: 39px; height: 37px; border-radius: 8px; background: #e8e7dd; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; }.result-points.positive { background: var(--lime); }.result-points.negative { background: #f3b6ad; }.winner-crown { font-size: 45px; color: #82962c; margin-bottom: 15px; }.winner-heading { font-size: clamp(40px, 5vw, 60px); }.spectator-row { display: flex; justify-content: space-between; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.spectator-row span { color: var(--muted); }.spectator-row + .rules { margin-top: 22px; border: 0; }
.toast { position: fixed; bottom: max(25px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--white); padding: 15px 21px; border-radius: 12px; max-width: calc(100vw - 35px); width: max-content; z-index: 100; box-shadow: 0 6px 30px #292a2425; font-size: 13px; line-height: 1.5; }.toast[hidden] { display: none; }
dialog { border: 1px solid var(--line); background: var(--paper); border-radius: 20px; padding: 29px; width: calc(100% - 40px); max-width: 450px; color: var(--ink); }dialog::backdrop { background: #292a2480; backdrop-filter: blur(4px); }dialog > p:not(.eyebrow) { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 14px; }.dialog-actions { display: flex; gap: 10px; margin-top: 25px; }.dialog-actions .button { justify-content: center; font-size: 12px; padding: 12px; }
.spinner { height: 13px; width: 13px; flex-shrink: 0; border: 1.5px solid #cdcebd; border-top-color: #84954b; border-radius: 50%; animation: orbit 1s linear infinite; }.initial-loader { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60vh; font-size: 13px; color: var(--muted); }.sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@keyframes orbit { to { transform: rotate(360deg); } }@keyframes pulse { 50% { opacity: .3; } }
@media (max-width: 850px) { .stage-grid { gap: 35px; }.app-shell { padding: 0 28px; }.panel { padding: 23px; }.hero-cards { transform: scale(.9); transform-origin: left top; }.choice-card { height: 230px; }.card-art { font-size: 70px; }.finger-art { font-size: 60px; }.choice-card strong { font-size: 16px; }.card-choices { gap: 12px; } }
@media (max-width: 650px) {
  .app-shell { padding: 0 22px; }.topbar { min-height: 78px; }.wordmark { font-size: 25px; }.wordmark i { font-size: 25px; }.connection { font-size: 9px; }main { padding-top: 22px; padding-bottom: 35px; }.footer { font-size: 7px; letter-spacing: 1.15px; padding-top: 18px; }.footer-symbols { font-size: 12px; letter-spacing: 3px; }
  .game-meta { margin-bottom: 30px; font-size: 11px; }.target-pill { font-size: 9px; padding: 7px 9px; }.stage-grid { grid-template-columns: 1fr; gap: 30px; }.intro { padding-top: 0; gap: 17px; }.intro-copy { padding-top: 4px; }.eyebrow { font-size: 9px; letter-spacing: 1.25px; margin-bottom: 16px; }h1 { font-size: 48px; }.lead { font-size: 14px; margin-top: 18px; }.panel { padding: 23px; border-radius: 18px; }.intro .hero-cards { margin-top: 20px; height: 175px; width: 300px; transform: scale(.74); transform-origin: left top; margin-bottom: -32px; }.intro .card-caption { display: none; }.intro .panel { margin-top: 5px; }.panel-heading { margin-bottom: 20px; }.panel h2 { font-size: 25px; }
  .main-panel { padding: 0; }.seat-card { padding: 22px; margin-top: 25px; }.seat-card h2 { font-size: 22px; }.round-top { margin-bottom: 25px; }.card-choices { gap: 15px; margin-top: 27px; }.choice-card { height: 250px; }.card-art { font-size: 80px; }.finger-art { font-size: 68px; }.choice-card strong { font-size: 18px; }.turn-wait { padding: 28px 18px; }.roster-panel { margin-top: 3px; }.count-field { padding: 21px 17px; }.count-field input { min-height: 65px; }.winner-heading { font-size: 45px; }.empty-state { min-height: 70vh; }.empty-state p { font-size: 16px; }.button { min-height: 56px; }.remove-player { width: 35px; min-height: 44px; }
}
@media (max-width: 360px) { .app-shell { padding: 0 16px; }h1 { font-size: 43px; }.connection { font-size: 8px; }.wordmark { font-size: 23px; }.choice-card { height: 225px; }.choice-card strong { font-size: 15px; }.choice-card small { font-size: 9px; }.card-art { font-size: 68px; }.finger-art { font-size: 58px; }.card-choices { gap: 11px; }.game-meta { gap: 8px; }.target-pill { padding: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }