:root{
  color-scheme:dark;
  --bg:#070910;
  --surface:#0d111c;
  --surface-2:#121827;
  --surface-3:#171f31;
  --line:#232c41;
  --line-soft:#1a2233;
  --text:#f8f9fd;
  --muted:#909bb0;
  --muted-2:#6f7a8f;
  --purple:#7c5cff;
  --purple-2:#a58cff;
  --mint:#37dfb5;
  --cyan:#41c8ff;
  --danger:#ff6f88;
  --warning:#ffc966;
  --shadow:0 24px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:320px;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 15% -10%,rgba(124,92,255,.18),transparent 28rem),
    radial-gradient(circle at 100% 0,rgba(55,223,181,.06),transparent 24rem),
    var(--bg);
}
button,input,select{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.42}
input,select{color-scheme:dark}
#app{min-height:100vh}
.app-shell{
  width:min(100% - 28px,1040px);
  margin:0 auto;
  padding:max(14px,env(safe-area-inset-top)) 0 calc(40px + env(safe-area-inset-bottom));
}
.topbar{
  min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-button{appearance:none;background:none;border:0;color:inherit;padding:0;text-align:left}
.brand-logo{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:block;
  box-shadow:0 8px 24px rgba(124,92,255,.2);
}
.brand h1{font-size:.92rem;line-height:1.05;letter-spacing:.23em;margin:0;font-weight:950}
.brand small{display:block;color:var(--muted);font-size:.69rem;margin-top:4px;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:8px}
.status-chip,.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;
  border:1px solid var(--line);border-radius:999px;padding:0 10px;
  background:rgba(13,17,28,.82);color:var(--muted);font-size:.67rem;
  font-weight:850;letter-spacing:.055em;text-transform:uppercase;
}
.status-chip{display:none}
.pill.good{color:#bafbe9;border-color:rgba(55,223,181,.25);background:rgba(55,223,181,.07)}
.account-btn{
  min-height:38px!important;padding:0 13px!important;border-radius:12px!important;
  background:rgba(18,24,39,.88)!important;white-space:nowrap;font-size:.8rem!important;
}
.account-dot{width:7px;height:7px;border-radius:999px;background:var(--mint);display:inline-block;margin-right:6px}

.eyebrow{
  color:var(--mint);font-size:.67rem;font-weight:950;letter-spacing:.19em;text-transform:uppercase
}
.section{margin-top:14px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:10px}
.row.between,.between{justify-content:space-between}
.card{
  border:1px solid var(--line-soft);border-radius:19px;background:rgba(13,17,28,.9);
  padding:16px;box-shadow:0 10px 32px rgba(0,0,0,.12)
}
.card h3{margin:0 0 6px;font-size:1rem}
.card p{line-height:1.55}
.muted{color:var(--muted)}
.subtle{color:var(--muted-2)}
.small{font-size:.8rem}
.correct{color:#7ef0cc}
.wrong{color:#ff9bab}

.btn{
  min-height:46px;border:1px solid var(--line);border-radius:13px;padding:0 15px;
  background:var(--surface-2);color:var(--text);font-weight:900;transition:transform .14s ease,border-color .14s ease,background .14s ease
}
.btn:active{transform:scale(.985)}
.btn.primary{border-color:transparent;background:linear-gradient(135deg,#8d6cff,#6645ed);box-shadow:0 10px 26px rgba(124,92,255,.24)}
.btn.cyan{border-color:rgba(65,200,255,.25);background:rgba(65,200,255,.09);color:#c8f2ff}
.btn.danger{border-color:rgba(255,111,136,.27);background:rgba(255,111,136,.07);color:#ffd6dd}
.btn.small{min-height:38px;padding:0 11px;font-size:.79rem}
.btn.big{min-height:54px;padding:0 20px}
.btn.block{width:100%}

.hero{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;
  padding:clamp(24px,5vw,46px);background:
  linear-gradient(145deg,rgba(18,24,39,.96),rgba(8,11,18,.98));box-shadow:var(--shadow)
}
.hero:after{content:"";position:absolute;right:-80px;top:-120px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.28),transparent 67%);pointer-events:none}
.hero h2{position:relative;z-index:1;max-width:750px;font-size:clamp(2.1rem,7vw,5rem);line-height:.96;letter-spacing:-.052em;margin:10px 0 15px}
.hero p{position:relative;z-index:1;max-width:700px;margin:0;color:var(--muted);line-height:1.6}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1}

.screen-title,.game-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px
}
.screen-title h2,.game-head h2{margin:4px 0 0;font-size:clamp(1.4rem,4vw,1.9rem)}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--text);font-size:1.15rem
}

/* Solo setup */
.solo-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.solo-title-row h2{font-size:clamp(1.8rem,7vw,2.5rem);margin:4px 0 4px;letter-spacing:-.04em}
.solo-title-row p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.45}
.mara-card{
  display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid rgba(124,92,255,.24);
  border-radius:18px;background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(55,223,181,.045));
}
.mara-avatar{
  position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:18px;
  display:grid;place-items:center;background:linear-gradient(145deg,#a28cff,#6747e8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(124,92,255,.2);
  font-size:1.35rem;font-weight:950
}
.mara-avatar i{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border:3px solid var(--bg);border-radius:50%;background:var(--mint)}
.mara-copy{min-width:0;flex:1}.mara-name-row{display:flex;align-items:center;gap:7px}.mara-name-row strong{font-size:1.05rem}.mara-name-row small{color:var(--muted);font-size:.7rem}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.mara-copy p{margin:4px 0 0;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-preview{min-height:36px;border-radius:11px;border:1px solid rgba(124,92,255,.22);background:rgba(124,92,255,.08);color:#ddd5ff;padding:0 10px;font-size:.74rem;font-weight:900}

.setup-panel{
  border:1px solid var(--line);border-radius:22px;background:rgba(13,17,28,.9);padding:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.16)
}
.identity-strip{display:flex;align-items:center;gap:10px;padding:3px 2px 12px}
.mini-avatar{width:36px;height:36px;border-radius:12px;background:var(--surface-3);display:grid;place-items:center;color:#d8ddea;font-weight:950}
.identity-copy{min-width:0;flex:1}.identity-copy span{display:block;color:var(--muted);font-size:.68rem;margin-bottom:2px}
.identity-copy input{
  width:100%;border:0;background:transparent;color:var(--text);font-size:.98rem;font-weight:850;outline:none;padding:0
}
.category-feature{
  width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:11px;align-items:center;text-align:left;
  border:1px solid rgba(124,92,255,.23);border-radius:17px;padding:12px;
  background:linear-gradient(135deg,rgba(124,92,255,.105),rgba(18,24,39,.7));color:var(--text)
}
.category-feature-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.055);display:grid;place-items:center;font-size:1.45rem}
.category-feature-copy{display:grid;gap:2px;min-width:0}.category-feature-copy>span{color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;font-weight:850}
.category-feature-copy strong{font-size:.98rem}.category-feature-copy small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-feature-arrow{font-size:1.7rem;color:var(--muted);text-align:center}
.compact-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.setting-block{display:grid;gap:6px}.setting-label{color:var(--muted);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.segmented{display:flex;padding:3px;border-radius:13px;background:#080c14;border:1px solid var(--line-soft)}
.segmented button{
  min-height:36px;flex:1;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:850;font-size:.8rem
}
.segmented button.active{background:var(--surface-3);color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.personality-row{display:grid;grid-template-columns:.9fr 1.35fr;gap:10px;margin-top:12px}
.option-tile{
  min-height:58px;border:1px solid var(--line-soft);border-radius:15px;background:#0a0f19;color:var(--text);
  display:flex;align-items:center;gap:9px;padding:9px 10px;text-align:left
}
.option-tile>span:nth-child(2){display:grid;gap:2px;min-width:0}.option-tile strong{font-size:.79rem}.option-tile small{font-size:.66rem;color:var(--muted)}
.option-icon{color:var(--purple-2);font-weight:950}.switch-dot{margin-left:auto;width:30px;height:18px;border-radius:999px;background:#252d3d;position:relative}
.switch-dot:after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#6d7789;transition:.15s ease}
.option-tile.active .switch-dot{background:rgba(55,223,181,.22)}.option-tile.active .switch-dot:after{left:15px;background:var(--mint)}
.option-tile.static{cursor:default}.mini-segment{display:flex;margin-left:auto;gap:3px}.mini-segment button{border:0;background:transparent;color:var(--muted);font-size:.62rem;padding:6px;border-radius:8px;font-weight:850}.mini-segment button.active{background:var(--surface-3);color:var(--text)}
.launch-btn{
  width:100%;min-height:60px;margin-top:13px;display:flex;align-items:center;justify-content:center;gap:10px
}
.launch-btn span{font-size:.92rem;letter-spacing:.02em}.launch-btn small{font-size:.66rem;font-weight:700;color:#ddd6ff}

/* category bottom sheet */
.category-sheet-backdrop{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;padding-top:env(safe-area-inset-top)
}
.category-sheet{
  width:min(720px,100%);max-height:88vh;border-radius:24px 24px 0 0;
  border:1px solid var(--line);border-bottom:0;background:#0b0f18;box-shadow:0 -30px 80px rgba(0,0,0,.5);
  padding:8px 14px calc(18px + env(safe-area-inset-bottom));overflow:hidden;display:flex;flex-direction:column
}
.sheet-grabber{width:42px;height:4px;border-radius:999px;background:#30394a;margin:2px auto 10px}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.sheet-head h2{margin:4px 0 0;font-size:1.55rem}
.sheet-close{width:36px;height:36px;border:0;border-radius:11px;background:var(--surface-2);color:var(--text);font-size:1.35rem}
.category-search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:13px;background:#080c14;padding:0 11px;margin:12px 0}
.category-search{width:100%;height:44px;border:0;background:transparent;color:var(--text);outline:none;font-size:16px}
.category-picker-list{overflow:auto;padding-right:2px}.picker-group{margin-bottom:16px}.picker-group-title{color:var(--muted-2);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;margin:0 0 7px 3px}
.picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.picker-item{
  display:grid;grid-template-columns:38px minmax(0,1fr) 20px;gap:9px;align-items:center;text-align:left;
  min-height:68px;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);color:var(--text);padding:9px
}
.picker-item.selected{border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.1)}
.picker-icon{font-size:1.2rem;text-align:center}.picker-item>span:nth-child(2){min-width:0;display:grid;gap:2px}.picker-item strong{font-size:.79rem}.picker-item small{color:var(--muted);font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-check{color:var(--purple-2);font-weight:900}

/* General forms */
.field{display:grid;gap:6px}.field label{color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.input,.select{
  width:100%;min-height:46px;border:1px solid var(--line);border-radius:13px;background:#090e17;color:var(--text);padding:0 12px;outline:none;font-size:16px
}
.input:focus,.select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,92,255,.1)}
.code-input{text-transform:uppercase;letter-spacing:.15em;font-weight:900}

/* game */
.scoreboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.score{border:1px solid var(--line-soft);border-radius:15px;background:rgba(13,17,28,.88);padding:10px}
.score.active{border-color:rgba(124,92,255,.55);box-shadow:inset 0 0 0 1px rgba(124,92,255,.13)}
.score-top{display:flex;justify-content:space-between;gap:7px;align-items:center}.score-name{font-size:.78rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cash{font-weight:950;font-variant-numeric:tabular-nums}.inventory{min-height:24px;margin-top:7px;font-size:1.02rem}
.clue-card{text-align:center;padding:22px 14px}.clue-badges{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.clue{font-size:clamp(2rem,10vw,4.8rem);font-weight:950;letter-spacing:.07em;margin:18px 0 8px;word-break:break-word}.clue.letters{letter-spacing:.12em}.clue-help{color:var(--muted);font-size:.78rem}
.guess-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.voice-guess{white-space:nowrap}
.auction-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr);gap:12px}.bid-center{text-align:center}.bid-amount{font-size:clamp(3rem,10vw,5rem);font-weight:1000;letter-spacing:-.06em;margin-top:3px}.bid-leader{color:var(--muted);font-size:.8rem;font-weight:800}.raise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.turn-panel{margin-top:14px;border:1px solid var(--line-soft);border-radius:14px;padding:12px;background:#090e17}.turn-panel h4{margin:0}.turn-panel p{margin:4px 0 0;color:var(--muted);font-size:.77rem}.thinking strong:after{content:"…";animation:blink 1.1s steps(2,end) infinite}@keyframes blink{50%{opacity:.2}}
.leftover-box{margin-top:13px;border:1px solid rgba(255,201,102,.25);background:rgba(255,201,102,.07);border-radius:14px;padding:12px;color:#ffe2a8}.leftover-box p{margin:4px 0 0;color:#d7bd8a;font-size:.75rem}
.feed{max-height:250px;overflow:auto;display:grid;gap:6px}.feed-entry{border:1px solid var(--line-soft);border-radius:11px;background:#090e17;color:var(--muted);padding:8px 9px;font-size:.76rem;line-height:1.4}
.reveal-hero{text-align:center;padding:25px}.reveal-emoji{font-size:3.7rem}.reveal-title{font-size:clamp(1.8rem,6vw,3rem);margin:7px 0}.reveal-detail{max-width:620px;margin:0 auto;color:var(--muted);line-height:1.5}.guess-result{display:grid;gap:7px;text-align:center}.guess-result strong{font-size:1rem}.roster-item{display:flex;align-items:center;gap:9px;border:1px solid var(--line-soft);background:#090e17;border-radius:12px;padding:9px 10px;margin-top:7px}.roster-emoji{font-size:1.25rem}

/* online */
.room-code{font-size:clamp(2.25rem,9vw,4.2rem);font-weight:1000;letter-spacing:.14em;line-height:1}
.player-list{display:grid;gap:7px}.player-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line-soft);border-radius:13px;background:#090e17;padding:9px 10px}.player-id{display:flex;align-items:center;gap:9px}.avatar{width:34px;height:34px;border-radius:11px;background:var(--surface-3);display:grid;place-items:center;font-size:.78rem;font-weight:950}.player-name{font-size:.8rem;font-weight:900}.dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}
.waiting-banner{border:1px dashed var(--line);border-radius:14px;padding:12px;text-align:center;color:var(--muted);font-size:.78rem}
.rule-callout{border:1px solid rgba(124,92,255,.22);background:rgba(124,92,255,.07);border-radius:14px;padding:12px;color:#d8d2f8;font-size:.78rem;line-height:1.45}
.voice-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(55,223,181,.2);background:linear-gradient(135deg,rgba(55,223,181,.055),rgba(124,92,255,.05));border-radius:15px;padding:12px}
.voice-actions{display:flex;gap:7px;flex-wrap:wrap}.guess-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px}.guess-person{display:grid;gap:3px;border:1px solid var(--line-soft);border-radius:12px;background:#090e17;padding:9px}.guess-person span{color:#d7dce7;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guess-person small{font-size:.7rem;font-weight:850}
.empty{text-align:center;padding:28px}.spinner{font-size:2.6rem}

/* account */
.modal-backdrop{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:14px}
.modal-card{position:relative;width:min(500px,100%);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:21px;background:#0c111b;padding:18px;box-shadow:var(--shadow)}
.modal-card h2{margin:6px 0}.modal-x{position:absolute;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:11px;background:var(--surface-2);color:var(--text);font-size:1.3rem}
.account-hero{display:flex;align-items:center;gap:10px;border:1px solid var(--line-soft);border-radius:14px;background:#090e17;padding:11px;margin-top:13px}
.account-hero .brand-logo{width:48px;height:48px}

.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:400;width:min(480px,calc(100% - 24px));border:1px solid var(--line);border-radius:13px;background:#111827;padding:10px 12px;box-shadow:var(--shadow);font-size:.78rem}
.footer{text-align:center;color:#465066;font-size:.64rem;margin-top:24px;letter-spacing:.04em}
.hidden{display:none!important}

@media(min-width:760px){
  .status-chip{display:inline-flex}
  .app-shell{padding-top:20px}
}
@media(max-width:760px){
  .app-shell{width:calc(100% - 18px)}
  .topbar{margin-bottom:13px}.brand-logo{width:39px;height:39px;flex-basis:39px}.brand h1{font-size:.83rem}.brand small{font-size:.64rem}
  .grid.two,.grid.three,.auction-grid{grid-template-columns:1fr}
  .hero{border-radius:20px;padding:23px 18px}.hero h2{font-size:2.15rem}
  .card{padding:13px}
  .feed{max-height:205px}
  .mara-card{padding:11px}.mara-avatar{width:48px;height:48px;flex-basis:48px;border-radius:15px}.voice-preview{padding:0 8px}
  .picker-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .brand small{display:none}
  .account-btn{padding:0 11px!important}
  .solo-title-row h2{font-size:1.9rem}
  .solo-title-row p{font-size:.8rem}
  .mara-copy p{max-width:190px}
  .compact-settings{grid-template-columns:1fr 1fr}
  .personality-row{grid-template-columns:1fr}
  .option-tile.static{display:grid;grid-template-columns:auto 1fr auto}
  .guess-row{grid-template-columns:1fr}.voice-guess{width:100%}
  .voice-panel{align-items:flex-start;flex-direction:column}.voice-actions{width:100%}.voice-actions .btn{flex:1}
}
@media(max-width:380px){
  .mara-copy p{max-width:145px}
  .voice-preview{font-size:.68rem}
  .launch-btn{flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}