/* V9.2.0 — Midnight Game Hall redesign */
:root{
  --bg:#090a0f;
  --bg-soft:#0f1017;
  --surface-1:rgba(19,20,28,.92);
  --surface-2:rgba(24,23,33,.96);
  --surface-3:rgba(32,30,42,.98);
  --line:rgba(222,202,164,.14);
  --line-strong:rgba(222,202,164,.28);
  --text:#f6f2ea;
  --muted:#b9b3c0;
  --muted-soft:#8f8a97;
  --gold:#c9a66b;
  --gold-soft:#f1dcaf;
  --wine:#8b2338;
  --violet:#6c4e86;
  --shadow-lg:0 24px 70px rgba(0,0,0,.45);
  --shadow-md:0 14px 36px rgba(0,0,0,.34);
}
html,body{background:var(--bg);color:var(--text)}
body{background-image:radial-gradient(circle at top,rgba(101,56,126,.28),transparent 36%),linear-gradient(180deg,#090a0f 0%,#0e1017 100%)}
body::before{content:"";position:fixed;inset:0;background-image:url('../assets/midnight/starfield.svg');background-size:320px 320px;opacity:.18;pointer-events:none;mix-blend-mode:screen}
.app-shell{position:relative;max-width:480px;margin:0 auto;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
.ambient{display:none}
.app-header{background:linear-gradient(to bottom,rgba(7,8,12,.96),rgba(7,8,12,.82),rgba(7,8,12,.12));border-bottom:1px solid rgba(255,255,255,.03)}
.brand-button{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:10px 14px 12px;border-radius:22px;border:1px solid rgba(222,202,164,.12);background:linear-gradient(180deg,rgba(24,22,31,.96),rgba(14,15,20,.92));box-shadow:var(--shadow-md);overflow:hidden}
.brand-button::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:14px;background:url('../assets/midnight/divider.svg') center/contain no-repeat;opacity:.55;pointer-events:none}
.brand-button .brand-mark{width:48px;height:48px;border-radius:16px;background:radial-gradient(circle at 50% 22%,rgba(115,67,137,.48),transparent 54%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(222,202,164,.15);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.brand-button .brand-mark img{width:32px;height:32px;display:block}
.brand-copy strong{font-size:15px;letter-spacing:.02em;color:var(--gold-soft)}
.brand-copy small{display:block;margin-top:2px;color:#d1c6b6;font-size:11px}
.icon-button,.sheet-close{background:linear-gradient(180deg,rgba(26,27,35,.98),rgba(17,18,24,.98));border:1px solid rgba(222,202,164,.12);color:#ddd4c7;box-shadow:var(--shadow-md)}
.icon-button svg,.back-button svg{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app-view{padding-inline:16px;padding-bottom:calc(44px + var(--safe-bottom))}
.eyebrow{letter-spacing:.2em;color:#ccb185;font-size:10px;text-transform:uppercase}
/* room lobby */
.room-summary-card{position:relative;padding:20px;border-radius:28px;background:linear-gradient(180deg,rgba(24,22,31,.98),rgba(15,16,22,.98));border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.room-summary-card::before{content:"";position:absolute;inset:0;background:url('../assets/midnight/stage-arch.svg') center top/120% auto no-repeat;opacity:.36;pointer-events:none}
.room-summary-card::after{content:"";position:absolute;right:-6px;bottom:-6px;width:90px;height:90px;background:url('../assets/midnight/corner-flourish.svg') center/contain no-repeat;opacity:.45;transform:rotate(180deg);pointer-events:none}
.room-top{position:relative;z-index:1;align-items:flex-start}
.room-summary-card h1{font-size:26px;letter-spacing:-.03em;margin-top:8px;color:#fff8eb}
.room-manage{color:#e8decd;font-size:13px}
.room-summary-chips{position:relative;z-index:1;margin-top:14px}
.room-summary-chips span{background:rgba(8,9,13,.42);border:1px solid var(--line);color:#d7c9b2;padding:7px 10px;font-size:10px}
.room-players{position:relative;z-index:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.avatar{background:linear-gradient(180deg,#231d28,#17131c);border:1px solid rgba(222,202,164,.18);color:#f4ebd8;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.avatar.more{background:rgba(255,255,255,.04)}
.ready-chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(201,166,107,.18);background:rgba(139,35,56,.16);color:#efdcc2}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}
.section-title>span{font-size:12px;color:var(--muted)}
.section-title h2{font-size:22px;color:#fff6e7}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game-card{position:relative;isolation:isolate;overflow:hidden;min-height:178px;padding:16px;border-radius:24px;background:linear-gradient(180deg,rgba(26,25,35,.98),rgba(14,15,20,.98));border:1px solid var(--line);box-shadow:var(--shadow-md);text-align:left}
.game-card::before,.game-card::after{content:"";position:absolute;width:64px;height:64px;background:url('../assets/midnight/corner-flourish.svg') center/contain no-repeat;opacity:.3;pointer-events:none}
.game-card::before{top:8px;left:8px}.game-card::after{right:8px;bottom:8px;transform:rotate(180deg)}
.game-card .game-glow{position:absolute;inset:auto -16% 38% auto;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,transparent) 22%,transparent 70%);opacity:.16;filter:blur(8px);pointer-events:none}
.game-card-top,.game-card strong,.game-card p,.game-card-footer{position:relative;z-index:1}
.game-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:color-mix(in srgb,var(--accent) 70%,white 18%)}
.game-card strong{margin-top:16px;font-size:17px;color:#fbf7ef}
.game-card p{margin:6px 0 14px;font-size:12px;color:#c6bfcb;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.game-index{color:#7d7781;font-size:10px;letter-spacing:.18em}
.game-meta{font-size:11px;color:#d8c8ac}
.advanced-chip{background:rgba(110,33,51,.35);border-color:rgba(214,124,142,.18);color:#f5d8dd}

.room-subcopy{margin-top:8px;color:#cbc1b0;max-width:28ch;line-height:1.55;font-size:12px}
.game-room-label{display:inline-flex;align-items:center;margin-bottom:10px;padding:4px 9px;border-radius:999px;border:1px solid rgba(201,166,107,.14);background:rgba(255,255,255,.035);color:#d8c8ac;font-size:10px;position:relative;z-index:1}
.text-button{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;color:#f1e7d3;padding:0 10px}
/* pages */
.page-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0 4px}
.page-head h1{font-size:24px;letter-spacing:-.03em;color:#fff6e7}
.page-head p{color:var(--muted)}
.panel,.players-editor,.room-card{background:linear-gradient(180deg,rgba(24,22,31,.98),rgba(15,16,22,.98));border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:24px}
.panel{padding:18px}.panel-title strong{font-size:16px}.panel-title span{color:var(--muted);font-size:12px}
.count-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px}
.count-button{border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#f5eedf}
.count-button.active{background:linear-gradient(180deg,rgba(201,166,107,.2),rgba(139,35,56,.2));border-color:rgba(201,166,107,.38);color:#fffaf1}
.players-editor{padding:18px;margin-top:18px}
.section-title.compact h2{font-size:18px}.section-title.compact span{font-size:12px;color:var(--muted)}
.player-list{margin-top:14px}
.player-row{display:grid;grid-template-columns:38px minmax(0,1fr) 72px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.player-row:last-child{border-bottom:0}.player-row input{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);color:#fff8ee;border-radius:14px;padding:0 12px}
.away-button{background:rgba(255,255,255,.035);border:1px solid var(--line);color:#f2e6d2}
.player-row.is-away{opacity:.56}.player-row.is-away .avatar{filter:saturate(.6)}
.sticky-actions{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 calc(14px + var(--safe-bottom));background:linear-gradient(to top,rgba(9,10,15,.98),rgba(9,10,15,.78),transparent)}
/* buttons */
.button{border-radius:18px;font-weight:700;letter-spacing:.01em;border:1px solid transparent}
.button.primary{background:linear-gradient(180deg,#d4b376,#b48b4d);color:#1a1410;box-shadow:0 12px 24px rgba(110,80,38,.26)}
.button.secondary{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:var(--line);color:#f2eadf}
.button.ghost{background:transparent;border-color:rgba(255,255,255,.08);color:#d5cfbf}
.button.danger{background:linear-gradient(180deg,#b64256,#7b2232);color:#fff4f4}
.button.success{background:linear-gradient(180deg,#4cb69a,#297c69);color:#081713}
/* sheets & modals */
.overlay-backdrop{background:rgba(4,5,8,.72);backdrop-filter:blur(8px)}
.bottom-sheet,.modal-card{position:relative;background:linear-gradient(180deg,rgba(20,20,27,.99),rgba(13,14,19,.99));border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.bottom-sheet::before,.modal-card::before{content:"";position:absolute;left:18px;right:18px;top:8px;height:18px;background:url('../assets/midnight/divider.svg') center/contain no-repeat;opacity:.55;pointer-events:none}
.sheet-handle{background:linear-gradient(90deg,transparent,#c9a66b,transparent);opacity:.9}
.sheet-body{padding-top:26px}.sheet-header p,.sheet-copy,.rule-card,.setting-label small,.setting-row p,.modal-copy{color:#c9c2cf}
.rule-card,.setting-block,.modal-card,.private-stage,.game-stage,.panel,.players-editor{backdrop-filter:blur(4px)}
.rule-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}
.rule-card h3{font-size:15px;color:#fbf6ed;margin-bottom:10px}.rule-card div{display:flex;justify-content:space-between;gap:12px}
.settings-heading{font-size:12px;letter-spacing:.18em;color:#cfae7b;text-transform:uppercase}
.level-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-color:var(--line);border-radius:18px;min-height:64px}
.level-card.active{background:linear-gradient(180deg,rgba(201,166,107,.18),rgba(108,78,134,.16));border-color:rgba(201,166,107,.45)}
.level-card.advanced{background:linear-gradient(180deg,rgba(74,17,33,.65),rgba(37,18,50,.65));border-color:rgba(211,121,140,.22)}
.level-card.advanced.active{background:linear-gradient(180deg,rgba(132,35,56,.75),rgba(68,31,95,.72));border-color:rgba(237,180,192,.38)}
.adult-plus-panel{margin-top:14px;padding:16px;border-radius:20px;border:1px solid rgba(226,167,180,.18);background:linear-gradient(180deg,rgba(79,22,36,.36),rgba(36,16,48,.26))}
.adult-plus-title strong{color:#fff1f2}.adult-plus-title small,.adult-plus-safety,.adult-plus-toggle small{color:#e7cfd6}
.sheet-inline-confirm{background:linear-gradient(180deg,rgba(74,36,10,.45),rgba(61,22,53,.35));border-color:rgba(226,184,113,.28)}
.segmented,.preset-cards,.preset-row,.count-grid,.player-choice-grid,.private-choice,.modal-actions,.dual-actions{gap:10px}
.segmented button,.preset-cards button,.preset-row button,.player-choice-grid button,.private-choice button,.count-button,.text-button,.away-button,.switch{border:1px solid var(--line)}
.segmented button,.preset-cards button,.preset-row button,.player-choice-grid button,.private-choice button,.count-button{background:rgba(255,255,255,.025);color:#f8f2e7;border-radius:15px}
.segmented button.active,.preset-cards button.active,.preset-row button.active{background:linear-gradient(180deg,rgba(201,166,107,.18),rgba(107,78,134,.18));border-color:rgba(201,166,107,.38)}
.time-stepper input{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:14px;color:#fff7ec}
.switch{background:rgba(255,255,255,.035)}.switch.on{background:linear-gradient(180deg,rgba(201,166,107,.45),rgba(139,35,56,.45))}
/* stage */
.stage-header{position:sticky;top:70px;z-index:12;padding:12px 0 14px;background:linear-gradient(to bottom,rgba(8,9,13,.97),rgba(8,9,13,.8),transparent)}
.stage-header::before{content:"";position:absolute;left:0;right:0;top:-4px;height:56px;background:url('../assets/midnight/divider.svg') center top/360px auto no-repeat;opacity:.52;pointer-events:none}
.stage-header h1{margin-top:8px;font-size:24px;letter-spacing:-.03em;color:#fff8ec}.stage-header p{color:#cbbfb0}
.game-stage,.private-stage{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(20,20,27,.98),rgba(13,14,19,.98));border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.game-stage::before,.private-stage::before{content:"";position:absolute;inset:0;background:url('../assets/midnight/stage-arch.svg') center top/140% auto no-repeat;opacity:.26;pointer-events:none}
.game-stage>*,.private-stage>*{position:relative;z-index:1}
.private-stage h2,.game-stage h2,.choice-question,.private-choice-question{color:#fff7eb;letter-spacing:-.02em}
.feature-question,.private-question,.question-text{color:#f4ead9}
.requirement-tags span{background:rgba(201,166,107,.12);border:1px solid rgba(201,166,107,.2);color:#edd8b2}
.player-choice-grid button,.private-choice button,.choice-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);color:#f7f1e7;border-radius:18px}
.choice-card{padding:14px 16px}.choice-card strong{color:#fff6e9}.choice-card span{color:#cbc1b5}
.modal-card h2{color:#fff8ee;letter-spacing:-.02em}.modal-copy,.consent-note,.consent-gate p,.safety-note{color:#cbbfb0}
.consent-gate{padding:14px 16px;border-radius:18px;border:1px solid rgba(226,184,113,.24);background:rgba(95,52,16,.16)}
.result-callout{padding:14px 16px;border-radius:18px;border:1px solid rgba(201,166,107,.18);background:rgba(201,166,107,.08);color:#f4e7cb}
/* wheel reskin */
.casino-felt{position:relative;padding:12px 8px 0}.casino-felt::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(98,48,30,.16),transparent 46%),linear-gradient(180deg,rgba(139,35,56,.16),transparent 24%);pointer-events:none}
.casino-wheel-assembly{filter:drop-shadow(0 28px 36px rgba(0,0,0,.4))}
.casino-wood-rim{padding:12px;border-radius:50%;background:linear-gradient(145deg,#2d1f1b,#131117)}
.casino-gold-rim{padding:10px;border-radius:50%;background:linear-gradient(145deg,#d7b77f,#8b6236)}
.casino-ball-track{padding:12px;border-radius:50%;background:linear-gradient(180deg,#131216,#060608)}
.casino-wheel-disc{background:conic-gradient(var(--pockets));border:10px solid #c9a66b;box-shadow:inset 0 0 0 4px rgba(0,0,0,.38)}
.casino-inner-bowl{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle at 45% 30%,#3d3143,#131118 72%);border:1px solid rgba(222,202,164,.2)}
.casino-spindle{background:radial-gradient(circle at 50% 30%,#f4dfb4,#c9a66b 34%,#6f4f2e 68%,#2a1e15 100%);box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.32)}
.casino-spindle::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.casino-top-marker{border-bottom-color:#e8d6ab;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.casino-ball{background:radial-gradient(circle at 35% 30%,#fffefb,#ece5d4 38%,#cfc5af 75%);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.casino-pocket-label b{background:rgba(11,11,16,.72);border:1px solid rgba(222,202,164,.14);color:#f7efe1;padding:4px 7px;border-radius:999px}
.casino-pocket-label.selected b{background:linear-gradient(180deg,rgba(201,166,107,.28),rgba(139,35,56,.22));border-color:rgba(233,214,172,.34)}
.casino-spin-button{margin-top:18px}
.casino-hint{color:#cdbfae}
/* update banners */
.update-banner{background:linear-gradient(180deg,rgba(24,22,31,.98),rgba(14,15,20,.98));border:1px solid var(--line);box-shadow:var(--shadow-md)}
.toast{background:rgba(17,18,24,.95);border:1px solid rgba(222,202,164,.16);color:#f4ecdf}
@media (max-width:360px){
  .app-view{padding-inline:12px}.room-summary-card{padding:18px}.game-grid{gap:10px}.game-card{min-height:168px;padding:14px}.section-title h2,.page-head h1,.stage-header h1{font-size:22px}
  .count-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.brand-button{grid-template-columns:42px minmax(0,1fr);gap:10px}.brand-button .brand-mark{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){body::before,.game-card .game-glow{display:none}}


/* V9.2.1 — iOS/Safari header grid hotfix
   Keep all header controls in explicit grid columns even when one button is hidden. */
.app-header{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  min-height:86px;
}
.back-button{grid-column:1;grid-row:1}
.brand-button{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:100%;
  min-width:0;
  height:64px;
  align-self:center;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  padding:8px 12px 10px;
}
#settingsButton{grid-column:3;grid-row:1;justify-self:end}
.brand-button .brand-mark{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  overflow:hidden;
}
.brand-button .brand-mark img{width:30px;height:30px;max-width:100%;display:block}
.brand-copy{min-width:0;overflow:hidden;align-content:center}
.brand-copy strong,.brand-copy small{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:360px){
  .app-header{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}
  .brand-button{height:60px;grid-template-columns:38px minmax(0,1fr);padding:7px 10px 9px}
  .brand-button .brand-mark{width:38px;height:38px;min-width:38px;min-height:38px}
  .brand-button .brand-mark img{width:27px;height:27px}
  .brand-copy strong{font-size:14px}
  .brand-copy small{font-size:9px}
}

/* ========================================================================== 
   V9.2.3 — Midnight Game Hall design-system consolidation
   UI only. No game flow, question bank, scoring or settlement rules changed.
   ========================================================================== */
:root{
  --bg:#0a0b10;
  --bg-soft:#0e1016;
  --surface-1:#14151c;
  --surface-2:#191a22;
  --surface-3:#20212b;
  --line:rgba(231,220,196,.11);
  --line-strong:rgba(231,220,196,.22);
  --text:#f4f0e8;
  --muted:#aaa6b0;
  --muted-soft:#7f7c86;
  --gold:#c6a46a;
  --gold-strong:#d7ba82;
  --gold-soft:#ecd9b2;
  --wine:#8e3043;
  --wine-strong:#aa3b52;
  --violet:#625071;
  --semantic-blue:#6484ad;
  --semantic-amber:#a56e43;
  --semantic-green:#4f8f7c;
  --shadow-lg:0 22px 56px rgba(0,0,0,.34);
  --shadow-md:0 10px 28px rgba(0,0,0,.24);
}
html,body{background:var(--bg);color:var(--text)}
body{background-image:radial-gradient(circle at 50% -8%,rgba(98,71,115,.18),transparent 34%),linear-gradient(180deg,#090a0f 0%,#0d0f15 100%)}
body::before{background-size:420px 420px;opacity:.07;mix-blend-mode:normal}

/* Header: full brand in lobby, compact functional header inside subpages/games. */
.app-header{
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:10px;
  min-height:78px;
  padding:calc(9px + env(safe-area-inset-top)) 16px 8px;
  background:linear-gradient(to bottom,rgba(8,9,13,.98),rgba(8,9,13,.9),rgba(8,9,13,.55));
  border-bottom:1px solid rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
}
#backButton{grid-column:1;grid-row:1}
#brandButton{grid-column:2;grid-row:1}
#settingsButton{grid-column:3;grid-row:1}
#backButton[hidden],#settingsButton[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
.icon-button,.sheet-close{
  width:44px;height:44px;border-radius:14px;
  background:#171820;border:1px solid var(--line);
  color:#ddd6c9;box-shadow:none;
}
.brand-button{
  height:58px;padding:7px 10px;border-radius:18px;
  grid-template-columns:40px minmax(0,1fr);gap:10px;
  background:#15161d;border:1px solid var(--line);
  box-shadow:none;
}
.brand-button::after{display:none}
.brand-button .brand-mark{
  width:40px;height:40px;min-width:40px;min-height:40px;border-radius:13px;
  background:rgba(255,255,255,.025);border:1px solid rgba(215,186,130,.14);
}
.brand-button .brand-mark img{width:28px;height:28px}
.brand-copy{min-width:0;display:grid;align-content:center;overflow:hidden}
.brand-copy strong{font-size:16px;line-height:1.25;color:#f1e6d2;letter-spacing:0}
.brand-copy small{font-size:10px;color:#aaa4a1;margin-top:3px}
.brand-copy strong,.brand-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-button.compact{height:46px;grid-template-columns:32px minmax(0,1fr);padding:6px 9px;border-radius:15px}
.brand-button.compact .brand-mark{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:10px}
.brand-button.compact .brand-mark img{width:23px;height:23px}
.brand-button.compact .brand-copy strong{font-size:14px;text-align:center}
.brand-button.compact .brand-copy small{display:none}
.app-header:has(.brand-button.compact){min-height:64px;padding-top:calc(7px + env(safe-area-inset-top));padding-bottom:7px}

/* Global rhythm and typography. */
.app-shell{max-width:460px}
.app-view{padding:8px 16px calc(36px + var(--safe-bottom))}
.eyebrow{font-size:9px;letter-spacing:.13em;color:#bfa77e}
.lobby-section .section-title .eyebrow,
.page-head .eyebrow,
.sheet-header .eyebrow,
.stage-header .eyebrow{display:none}
.section-title{margin-bottom:14px;align-items:center}
.section-title h2{font-size:20px;color:#f5f1e8;letter-spacing:-.02em}
.section-title>span{font-size:11px;color:var(--muted-soft)}

/* Lobby: retain one branded room surface, simplify all game cards. */
.room-summary-card{
  padding:18px;border-radius:22px;background:#14151c;border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.room-summary-card::before{background-size:112% auto;opacity:.12}
.room-summary-card::after{display:none}
.room-summary-card h1{font-size:23px;margin-top:6px;color:#f7f1e7}
.room-subcopy{max-width:32ch;color:#aaa5ad;font-size:11px;line-height:1.55}
.room-manage{min-height:40px;padding:0 11px;border-radius:12px;background:#1a1b23;border:1px solid var(--line);color:#ded4c1;font-size:12px}
.room-summary-chips{gap:6px;margin-top:12px}
.room-summary-chips span{padding:5px 8px;border-radius:999px;background:#101116;border-color:rgba(231,220,196,.08);color:#bdb5a8;font-size:9px}
.room-players{gap:0;margin-top:14px}
.room-players .avatar{margin-left:-7px;box-shadow:none;border:2px solid #14151c}
.room-players .avatar:first-child{margin-left:0}
.ready-chip{margin-left:auto;padding:7px 10px;background:rgba(142,48,67,.12);border-color:rgba(174,59,82,.18);color:#dfc9c9}
.lobby-section{margin-top:24px}
.game-grid{gap:10px}
.game-card{
  min-height:150px;padding:14px;border-radius:18px;
  background:#15161d;border:1px solid rgba(231,220,196,.09);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.game-card::before{
  display:block;content:"";position:absolute;left:14px;right:14px;top:0;width:auto;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,var(--gold) 55%),transparent);
  opacity:.42;
}
.game-card::after{display:none}
.game-card .game-glow{width:58px;height:58px;right:-12px;top:-14px;inset:auto -12px auto auto;opacity:.08;filter:blur(12px)}
.game-card-top{width:100%;display:flex;align-items:flex-start;justify-content:space-between}
.game-icon{
  width:38px;height:38px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 9%,#181920 91%);
  border-color:color-mix(in srgb,var(--accent) 25%,transparent);
  color:color-mix(in srgb,var(--accent) 55%,#f0e6d6 45%);
  box-shadow:none;
}
.game-index{font-size:9px;color:#686670;letter-spacing:.12em}
.game-card strong{margin-top:13px;font-size:16px;color:#f3efe7}
.game-card p{margin:5px 0 12px;font-size:10.5px;line-height:1.55;color:#a8a4ae;-webkit-line-clamp:2}
.game-room-label{display:none!important}
.game-card-footer{margin-top:auto}
.game-meta{font-size:9px;color:#a99e8b}
.advanced-chip{padding:4px 6px;border-radius:999px;background:rgba(142,48,67,.12);border:1px solid rgba(174,59,82,.18);color:#d8b9bf;font-size:8px}

/* Functional surfaces: less atmosphere, clearer hierarchy. */
.panel,.players-editor,.room-card,.bottom-sheet,.modal-card,.game-stage,.private-stage{
  background:#15161d;border-color:var(--line);box-shadow:var(--shadow-md);backdrop-filter:none;
}
.panel,.players-editor{border-radius:20px}
.page-head{padding-top:4px;margin-bottom:12px}
.page-head h1{font-size:22px;color:#f4f0e8}
.page-head p{font-size:11px;color:#9f9ba4}
.count-button,.away-button,.segmented button,.preset-row button,.preset-cards button,.player-choice-grid button,.private-choice button{
  background:#1a1b23;border-color:rgba(231,220,196,.1);color:#e8e2d7;
}
.count-button.active,.segmented button.active,.preset-row button.active,.preset-cards button.active{
  background:rgba(198,164,106,.14);border-color:rgba(198,164,106,.35);color:#f1e2c3;box-shadow:none;
}
.player-row{border-bottom-color:rgba(255,255,255,.045)}
.player-row input{background:#101116;border-color:rgba(255,255,255,.07);color:#f1ede6}
.sticky-actions{background:linear-gradient(to top,#0a0b10 78%,rgba(10,11,16,.9),transparent)}

/* Buttons: one brand action color; game accents remain secondary. */
.button{border-radius:14px;letter-spacing:0;box-shadow:none}
.button.primary{
  background:linear-gradient(180deg,var(--gold-strong),#b99054);
  color:#1b1710;border:1px solid rgba(255,245,220,.15);
  box-shadow:0 9px 20px rgba(104,74,31,.18);
}
.button.secondary{background:#1a1b23;border:1px solid var(--line);color:#e5dfd4}
.button.ghost{background:transparent;border:1px solid rgba(231,220,196,.08);color:#aaa5ae}
.button.danger{background:linear-gradient(180deg,var(--wine-strong),#7b2839);color:#fff1f3;border-color:rgba(255,210,218,.08)}
.button.success{background:linear-gradient(180deg,#5b9a87,#3c7464);color:#effcf7}

/* Sheets and settings: reduce ornament and English decoration. */
.bottom-sheet,.modal-card{border-radius:24px 24px 0 0}
.modal-card{border-radius:20px}
.bottom-sheet::before,.modal-card::before{display:none}
.sheet-handle{width:34px;background:#55515a;opacity:.72}
.sheet-body{padding-top:18px}
.sheet-header h2{font-size:21px;color:#f4efe6}
.sheet-header p,.sheet-copy,.rule-card,.setting-label small,.setting-row p,.modal-copy{color:#a8a3ad}
.rule-card{border-radius:16px;background:#181920;border-color:rgba(231,220,196,.08)}
.rule-card h3{font-size:13px;margin-bottom:8px;color:#eee8dd}
.settings-heading{font-size:11px;letter-spacing:.08em;text-transform:none;color:#b9a27d}
.level-card{min-height:60px;border-radius:15px;background:#191a22}
.level-card.active{background:rgba(198,164,106,.12);border-color:rgba(198,164,106,.34)}
.level-card.advanced{background:rgba(89,33,48,.28);border-color:rgba(174,59,82,.14)}
.level-card.advanced.active{background:rgba(116,39,57,.38);border-color:rgba(187,77,98,.28)}
.adult-plus-panel{border-radius:17px;background:rgba(87,31,47,.22);border-color:rgba(176,73,95,.17)}
.sheet-inline-confirm{background:rgba(95,65,31,.18);border-color:rgba(198,164,106,.24)}
.sheet-action-bar{background:linear-gradient(to top,#15161d 82%,rgba(21,22,29,.96));border-top-color:rgba(255,255,255,.05)}

/* Game header: functional title hierarchy, no duplicate brand banner effect. */
.stage-header{
  top:64px;padding:8px 0 10px;margin-bottom:10px;
  background:linear-gradient(to bottom,rgba(10,11,16,.98),rgba(10,11,16,.9),rgba(10,11,16,.56));
  backdrop-filter:blur(10px);
}
.stage-header::before{display:none}
.stage-header h1{font-size:21px;margin:2px 0 1px;color:#f4efe6}
.stage-header p{font-size:10px;color:#9d98a2}
.game-stage,.private-stage{border-radius:20px;box-shadow:var(--shadow-md)}
.game-stage::before,.private-stage::before{display:none}
.game-stage h2,.private-stage h2,.choice-question,.private-choice-question{color:#f4efe6}
.feature-question,.private-question,.question-text{color:#efe9de}
.privacy-icon{color:#b59a71;font-size:36px}

/* Interaction-specific visual grammar. */
.player-choice-grid button,.choice-card{border-radius:14px}
.vote-bar{background:#25262f}
.vote-bar i{background:linear-gradient(90deg,#9a8054,var(--gold-strong))}
.choice-preview article,.private-choice button,.reveal-columns article{background:#181920;border-color:var(--line)}
.choice-preview article:first-child,.private-choice button:first-child,.reveal-columns article:first-child{
  background:rgba(63,86,117,.22);border-color:rgba(100,132,173,.34)
}
.choice-preview article:last-child,.private-choice button:last-child,.reveal-columns article:last-child{
  background:rgba(112,72,42,.22);border-color:rgba(165,110,67,.34)
}
.choice-preview article:first-child small,.private-choice button:first-child small,.reveal-columns article:first-child small{color:#9cb6d8}
.choice-preview article:last-child small,.private-choice button:last-child small,.reveal-columns article:last-child small{color:#d5a77e}
.result-callout{border-radius:14px;background:rgba(198,164,106,.08);border-color:rgba(198,164,106,.16);color:#ead9b8!important}
.countdown-ring{border-color:rgba(198,164,106,.26);box-shadow:inset 0 0 34px rgba(198,164,106,.08),0 0 28px rgba(198,164,106,.06)}
.score-strip b,.result-number{color:#d8b779}
.target-numbers span{background:rgba(198,164,106,.1);border-color:rgba(198,164,106,.28);color:#ead2a5}
.speech-timer{border-color:rgba(79,143,124,.24);color:#7eb39f}
.requirement-tags span{background:rgba(198,164,106,.08);border-color:rgba(198,164,106,.17);color:#d9c5a1}
.consent-gate{border-radius:15px;background:rgba(108,69,27,.12);border-color:rgba(198,164,106,.2)}

/* Keep roulette distinctive without reintroducing casino-red dominance. */
.casino-felt::before{background:radial-gradient(circle at center,rgba(91,61,45,.12),transparent 46%)}
.casino-wheel-assembly{filter:drop-shadow(0 20px 28px rgba(0,0,0,.32))}
.casino-wood-rim{background:linear-gradient(145deg,#262128,#141419)}
.casino-gold-rim{background:linear-gradient(145deg,#d3b77f,#8f7045)}
.casino-wheel-disc{border-color:#b99861}
.casino-pocket-label.selected b{background:rgba(198,164,106,.2);border-color:rgba(222,200,157,.32)}

/* Update feedback. */
.update-banner{background:#181920;border-color:var(--line);box-shadow:var(--shadow-md)}
.update-banner button{background:var(--gold-strong);color:#1a1710}
.toast{background:#181920;border-color:var(--line);color:#eee7dc}

@media(max-width:360px){
  .app-header{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;padding-left:12px;padding-right:12px}
  .brand-button{height:54px;grid-template-columns:36px minmax(0,1fr);padding:6px 8px}
  .brand-button .brand-mark{width:36px;height:36px;min-width:36px;min-height:36px}
  .brand-button .brand-mark img{width:25px;height:25px}
  .brand-copy strong{font-size:14px}.brand-copy small{font-size:9px}
  .brand-button.compact{height:44px;grid-template-columns:30px minmax(0,1fr)}
  .brand-button.compact .brand-mark{width:30px;height:30px;min-width:30px;min-height:30px}
  .app-view{padding-left:12px;padding-right:12px}
  .room-summary-card{padding:16px}.game-grid{gap:8px}.game-card{min-height:146px;padding:12px}
  .game-card strong{font-size:15px}.game-card p{font-size:10px}
  .stage-header h1{font-size:20px}
}
@media(prefers-reduced-motion:reduce){body::before{display:none}.game-card::before{opacity:.24}}