:root{--bg: #f3f8fd;--surface: #ffffff;--ink: #0d2640;--muted: #5d7590;--line: #dbe7f3;--blue: #1668dc;--blue-dark: #0f4fa8;--blue-soft: #e4f0fd;--gold: #f6b715;--gold-soft: #fff5d6;--red: #e5484d;--red-soft: #fdecec;--green: #1f9d6b;--green-soft: #e3f6ee;--radius: 20px;--shadow: 0 1px 2px rgba(13, 38, 64, .06), 0 6px 20px rgba(13, 38, 64, .06);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body{background:radial-gradient(1200px 400px at 50% -200px,#dcecfc 0%,transparent 70%),var(--bg);min-height:100dvh}h1,h2,.logo,.btn,.room-code,.pill,.outcome strong,.truth-box strong,.role-banner strong{font-family:Mitr,IBM Plex Sans Thai,sans-serif;font-weight:500}.app{max-width:520px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}.screen{display:flex;flex-direction:column;gap:14px}.muted{color:var(--muted);font-weight:400}.hint{margin:0;font-size:14px;color:var(--muted)}.label{font-size:13px;letter-spacing:.02em;color:var(--muted)}.center-note{text-align:center;color:var(--muted);padding:18px 0;margin:0}.stack{display:flex;flex-direction:column;gap:10px}.logo{display:flex;align-items:center;justify-content:center;gap:12px;font-size:44px;color:var(--ink);letter-spacing:-.01em;margin-top:28px}.logo.small{font-size:26px;gap:8px;margin-top:4px}.tagline{text-align:center;color:var(--muted);margin:0 0 12px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:16px;padding:12px 18px;font-size:17px;cursor:pointer;transition:transform .08s ease,background .15s ease,opacity .15s ease;color:var(--ink);background:transparent}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:default}.btn.big{width:100%;min-height:58px;font-size:19px}.btn.small{font-size:14px;padding:6px 12px}.btn.primary{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-dark)}.btn.primary:active:not(:disabled){box-shadow:0 1px 0 var(--blue-dark);transform:translateY(3px)}.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 4px #c98f00}.btn.gold:active:not(:disabled){box-shadow:0 1px #c98f00;transform:translateY(3px)}.btn.ghost{background:var(--surface);border:2px solid var(--line)}.btn.text{color:var(--muted);align-self:center}.btn.danger{color:var(--red)}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:var(--blue-soft);color:var(--blue-dark);width:36px;height:36px;border-radius:12px;font-size:18px;cursor:pointer;flex:none}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:14px;color:var(--muted)}.field input{font:inherit;font-size:19px;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);outline:none;width:100%}.field input:focus{border-color:var(--blue)}.code-input{text-align:center;font-family:Mitr,sans-serif!important;font-size:32px!important;letter-spacing:.3em}.card{background:var(--surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.card-title{font-size:17px;margin:0 0 10px}.room-code-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;align-items:center;gap:4px}.room-code{font-size:56px;letter-spacing:.18em;line-height:1.1;color:var(--blue);padding-left:.18em}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.player-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.player-list li:last-child{border-bottom:0}.player-list li.offline .name{color:var(--muted)}.player-list .name{flex:1;font-weight:500}.dot{width:10px;height:10px;border-radius:50%;background:#c5d3e0;flex:none}.dot.on{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}.tag{font-size:12px;background:var(--gold-soft);color:#8a6500;padding:2px 8px;border-radius:99px}.rules summary{cursor:pointer;font-weight:600}.rules ol{padding-left:20px;margin:10px 0 6px;display:flex;flex-direction:column;gap:6px}.rules p{margin:0}.stepper{display:flex;align-items:center;justify-content:center;gap:12px}.stepper strong{font-family:Mitr,sans-serif;font-size:24px;min-width:2ch;text-align:center}.sticky-actions{position:sticky;bottom:0;display:flex;flex-direction:column;gap:10px;padding:12px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 75%,transparent);z-index:5}.topbar{display:flex;align-items:center;gap:8px}.pill{background:var(--surface);box-shadow:var(--shadow);border-radius:99px;padding:5px 12px;font-size:15px}.pill.subtle{color:var(--muted)}.pill.score{margin-left:auto;background:var(--gold-soft)}.role-banner{display:flex;gap:14px;align-items:center;border-radius:var(--radius);padding:14px 16px;color:#fff}.role-banner strong{font-size:22px;display:block;line-height:1.3}.role-banner p{margin:2px 0 0;font-size:15px;opacity:.92}.role-icon{font-size:40px;line-height:1}.role-banner.guesser{background:linear-gradient(135deg,#1668dc,#0f4fa8)}.role-banner.truth{background:linear-gradient(135deg,#f6b715,#e59a00);color:var(--ink)}.role-banner.bluffer{background:linear-gradient(135deg,#ef5f63,#d93b40)}.role-banner.neutral,.role-banner.spectator{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}.question-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border-top:5px solid var(--blue)}.category{font-size:14px;color:var(--muted)}.question{margin:6px 0 0;font-size:21px;line-height:1.5;font-weight:500}.instruction{margin:0;padding:0 4px;color:var(--muted)}.truth-box{background:var(--gold-soft);border:2px dashed var(--gold);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px}.truth-box strong{font-size:26px;line-height:1.3}.truth-box p{margin:4px 0 0;font-size:15px}.truth-box.reveal{border-style:solid;text-align:center;align-items:center;padding:18px}.truth-box.reveal strong{font-size:30px}.answer-form{display:flex;flex-direction:column;gap:8px}.submitted{background:var(--green-soft);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:var(--green)}.submitted strong{color:var(--ink);font-size:20px}.progress{display:flex;flex-direction:column;gap:8px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:14px;padding:4px 10px;border-radius:99px;background:var(--surface);border:1.5px solid var(--line);color:var(--muted)}.chip.done{background:var(--green-soft);border-color:transparent;color:var(--green)}.pending{text-align:center;color:var(--muted)}.pending strong{font-family:Mitr,sans-serif;color:var(--blue);font-size:22px;margin-left:4px}.answer-cards{display:flex;flex-direction:column;gap:10px}.answer-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:3px solid transparent;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .2s ease}.answer-card:disabled{cursor:default}.answer-card .text{font-size:21px;font-weight:500;line-height:1.35}.answer-card.selected{border-color:var(--blue);background:var(--blue-soft);transform:scale(1.015)}.answer-card.mine{border-color:var(--line)}.answer-card .owner{font-size:14px;color:var(--red)}.answer-card .mine-tag{color:var(--muted)}.answer-card.caught{background:var(--red-soft);box-shadow:none;animation:flip .45s ease}.answer-card.caught .text{text-decoration:line-through;text-decoration-color:#e5484d99;color:var(--muted)}@keyframes flip{0%{transform:rotateX(80deg)}to{transform:rotateX(0)}}.catch-flash{position:fixed;top:18px;left:50%;transform:translate(-50%);z-index:20;background:var(--red);color:#fff;font-family:Mitr,sans-serif;font-size:20px;padding:12px 22px;border-radius:99px;box-shadow:0 10px 30px #e5484d59;white-space:nowrap;animation:pop 2.6s ease forwards}.catch-flash span{font-size:15px;opacity:.9;margin-left:4px}@keyframes pop{0%{transform:translate(-50%,-30px) scale(.8);opacity:0}10%{transform:translate(-50%) scale(1.05);opacity:1}15%,85%{transform:translate(-50%) scale(1);opacity:1}to{transform:translate(-50%,-20px);opacity:0}}.outcome{border-radius:var(--radius);padding:20px 16px;text-align:center;display:flex;flex-direction:column;gap:2px;animation:rise .4s ease}.outcome strong{font-size:28px;line-height:1.3}.outcome.bad{background:var(--red-soft);color:#a3262a}.outcome.good{background:var(--blue-soft);color:var(--blue-dark)}.outcome.great{background:var(--gold-soft);color:#7a5600}@keyframes rise{0%{transform:translateY(10px);opacity:0}}.answers-list,.scoreboard{list-style:none;margin:0;padding:0}.answers-list li{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}.answers-list li:last-child,.scoreboard li:last-child{border-bottom:0}.answers-list .who{font-weight:600}.answers-list .mark{font-size:13px;color:var(--muted);white-space:nowrap}.answers-list li.is-truth{background:var(--gold-soft);margin:0 -10px;padding:8px 10px;border-radius:12px}.fact p{margin:0 0 8px}.fact a{color:var(--blue);font-weight:500}.scoreboard{counter-reset:rank}.scoreboard li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);counter-increment:rank}.scoreboard li:before{content:counter(rank);width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}.scoreboard li.me .name{font-weight:700}.scoreboard .name{flex:1}.scoreboard .delta{color:var(--green);font-weight:600;font-size:15px}.scoreboard .pts{font-family:Mitr,sans-serif;font-size:20px;min-width:2ch;text-align:right}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0d264059;display:flex;align-items:flex-end;justify-content:center;z-index:30;animation:fade .15s ease}.sheet{background:var(--bg);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;max-height:85dvh;overflow-y:auto;animation:slide .2s ease}@keyframes fade{0%{opacity:0}}@keyframes slide{0%{transform:translateY(40px)}}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;z-index:40;max-width:calc(100% - 32px);text-align:center;word-break:break-word;animation:rise .2s ease}.offline-bar{position:sticky;top:0;background:var(--gold);color:var(--ink);text-align:center;font-size:14px;padding:6px;border-radius:12px;margin-bottom:10px;z-index:10}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.fish-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fish-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;color:var(--ink);background:var(--surface);border:3px solid transparent;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 10px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .2s ease}.fish-card:disabled{cursor:default}.fish-card .fish-icon{font-size:34px;line-height:1.1}.fish-card .text{font-family:Mitr,sans-serif;font-size:20px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fish-card .owner{font-size:13px;color:var(--muted);min-height:1.2em}.fish-card.selected{border-color:var(--blue);background:var(--blue-soft);transform:scale(1.03)}.fish-card.mine{border-color:var(--line)}.fish-card.caught{background:var(--red-soft);box-shadow:none;animation:flip .45s ease}.fish-card.caught .text{text-decoration:line-through;text-decoration-color:#e5484d99;color:var(--muted)}.fish-card.caught .owner{color:var(--red)}