.icon-btn,.nav-btn,.primary-btn,.secondary-btn,.ghost-btn,.back-btn{cursor:pointer;color:inherit;transition:transform .18s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),opacity .25s var(--ease),filter .25s var(--ease)}
.icon-btn:active,.nav-btn:active,.primary-btn:active,.secondary-btn:active,.ghost-btn:active,.back-btn:active{transform:scale(.965)}
.icon-btn,.back-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.055);border:1px solid var(--line);box-shadow:0 0 0 1px rgba(255,255,255,.02),0 8px 20px rgba(0,0,0,.18)}
.icon-svg{display:block;width:24px;height:24px;color:inherit;overflow:visible}.icon-slot svg{display:block;width:100%;height:100%;color:inherit;overflow:visible}
.back-btn{font-size:1.15rem}
.nav-btn{border-radius:19px;display:grid;place-items:center;background:transparent;position:relative;color:var(--text-muted)}
.nav-btn::after{content:"";position:absolute;inset:7px;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));opacity:0;transition:opacity .25s var(--ease)}
.nav-btn .icon-svg{width:31px;height:31px;position:relative;z-index:1;transition:.25s var(--ease);filter:drop-shadow(0 0 8px rgba(255,255,255,.04))}
.nav-btn.active{color:var(--accent-2);background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 28%,transparent),0 0 26px var(--glow)}
.nav-btn.active::after{opacity:1}.nav-btn.active .icon-svg{transform:translateY(-1px) scale(1.06);filter:drop-shadow(0 0 12px var(--glow))}
.primary-btn,.secondary-btn,.ghost-btn{min-height:48px;padding:0 18px;border-radius:17px;font-weight:800;position:relative;overflow:hidden}
.primary-btn::before,.secondary-btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-140%);transition:transform .55s var(--ease)}
.primary-btn:hover::before,.secondary-btn:hover::before,.primary-btn:focus-visible::before,.secondary-btn:focus-visible::before{transform:translateX(140%)}
.primary-btn{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent-2) 18%,var(--accent)));color:var(--accent-fg);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 30%,transparent),0 0 0 1px color-mix(in srgb,var(--accent-2) 18%,transparent);animation:ctaPulse 2.8s ease-in-out infinite}.primary-btn:hover,.primary-btn:focus-visible{box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 34%,transparent),0 0 24px var(--glow)}
.secondary-btn{background:color-mix(in srgb,var(--accent-2) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent);box-shadow:0 8px 20px rgba(0,0,0,.12)}.ghost-btn{background:rgba(255,255,255,.05);border:1px solid var(--line)}.button-row{display:flex;gap:10px;flex-wrap:wrap}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;animation:none}
.onboarding{min-height:100vh;min-height:100dvh;padding:24px;display:grid;place-items:center}.onboarding-card{width:min(100%,420px);padding:24px;border-radius:32px;border:1px solid var(--line);background:rgba(18,18,26,.82);box-shadow:var(--shadow);backdrop-filter:blur(22px)}.onboarding-logo{width:190px;margin:0 auto 24px;display:block}.onboarding-card h1{font-size:1.9rem;text-align:center}.onboarding-card p{text-align:center;color:var(--text-muted);line-height:1.52;margin:12px 0 22px}.language-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.language-option{padding:16px 12px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);font-weight:800;cursor:pointer}.language-option.selected{border-color:color-mix(in srgb,var(--accent-2) 40%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 24%,transparent),0 0 20px var(--glow)}.splash{min-height:100vh;min-height:100dvh;display:grid;place-items:center}.splash img{width:min(54vw,196px);max-width:196px;animation:splashPulse 1.4s ease-in-out infinite alternate;filter:drop-shadow(0 0 22px rgba(255,117,157,.18))}
.modal-backdrop,.popup-backdrop{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.56);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:14px}.popup-backdrop{align-items:center;padding:18px;animation:fadeIn .22s ease}.sheet{width:min(100%,620px);max-height:88dvh;overflow:auto;padding:22px;border-radius:28px 28px 22px 22px;background:#17171F;border:1px solid var(--line);box-shadow:var(--shadow)}.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.settings-group{padding:16px 0;border-top:1px solid var(--line)}.settings-group:first-of-type{border-top:0}.settings-group h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:12px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}.toggle{width:52px;height:30px;border-radius:99px;background:rgba(255,255,255,.12);padding:3px;cursor:pointer}.toggle span{width:24px;height:24px;border-radius:50%;background:#fff;display:block;transition:.25s var(--ease)}.toggle.on{background:var(--accent)}.toggle.on span{transform:translateX(22px)}
.pack-card{padding:14px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:var(--shadow-soft);display:grid;grid-template-rows:auto 1fr auto;gap:8px;overflow:hidden;position:relative;cursor:pointer;min-height:0;text-align:left}.pack-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 48%);pointer-events:none}.pack-card::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-48px;top:-50px;background:var(--glow);filter:blur(12px);opacity:.82}.pack-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.28)}.pack-icon-wrap{height:76px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;color:var(--accent-2)}.pack-icon{width:68px;height:68px;color:var(--accent-2);filter:drop-shadow(0 0 12px var(--glow));position:relative;z-index:1;overflow:visible}.pack-card h2{font-size:1.05rem;position:relative;z-index:1;line-height:1.1;text-align:center}.pack-card p{margin-top:4px;color:var(--text-muted);font-size:.79rem;line-height:1.32;position:relative;z-index:1;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pack-cta{justify-self:center;align-self:end;position:relative;z-index:1;padding:6px 11px;border-radius:999px;font-size:.7rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-2);background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--accent-2) 22%,transparent)}
.progress{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit;box-shadow:0 0 12px var(--glow)}
.question-card{height:100%;max-height:100%;padding:20px 20px 17px;border-radius:29px;position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent-2) 24%,var(--line));box-shadow:0 14px 38px rgba(0,0,0,.3),0 0 20px color-mix(in srgb,var(--glow) 55%,transparent);background:radial-gradient(circle at 78% 14%,color-mix(in srgb,var(--accent-2) 20%,transparent),transparent 20%),linear-gradient(155deg,color-mix(in srgb,var(--surface-2) 94%,var(--accent)),var(--surface));display:flex;flex-direction:column;text-align:center}.question-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 28%,transparent 72%,rgba(255,255,255,.025));pointer-events:none}.question-card::after{content:"";position:absolute;inset:-20% auto auto -20%;width:40%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:rotate(24deg) translateX(-180%);opacity:.45}.card-enter::after{animation:cardShine .48s ease-out}.card-type{font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:900;margin-bottom:9px;position:relative;z-index:1}.card-intensity{display:flex;justify-content:center;gap:5px;color:var(--accent-2);font-size:.8rem;margin-bottom:8px;position:relative;z-index:1}.card-intensity .faint{opacity:.25}.card-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;position:relative;z-index:1}.card-text{font-family:var(--font-display);font-size:clamp(1.28rem,5.2vw,2rem);line-height:1.14;max-height:100%;overflow:auto;padding:3px 8px;scrollbar-width:thin}.card-note{margin-top:0;padding:11px 13px;border-radius:17px;display:flex;align-items:flex-start;gap:10px;text-align:left;background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.045));border:1px solid color-mix(in srgb,var(--accent-2) 22%,var(--line));position:relative;z-index:1}.note-icon{font-size:.98rem;line-height:1.2;transform:translateY(1px)}.card-note p{margin:0;color:var(--text-muted);font-size:.8rem;line-height:1.36}.empty-state,.batch-complete{padding:30px 20px;text-align:center;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.04);display:grid;place-items:center;flex:1}.empty-state h2,.batch-complete h2{font-family:var(--font-display);font-size:1.6rem}.empty-state p,.batch-complete p{color:var(--text-muted);line-height:1.5;margin:10px 0 18px}.mini-note{font-size:.72rem;line-height:1.35;color:var(--text-muted);text-align:center}.complete-note{color:color-mix(in srgb,var(--accent-2) 78%,white)}.toast{position:fixed;z-index:120;left:50%;bottom:104px;transform:translateX(-50%);width:min(calc(100% - 32px),520px);padding:14px 16px;border-radius:18px;background:#20202A;border:1px solid var(--line);box-shadow:var(--shadow);animation:toastIn .3s var(--ease)}
.bedroom-hero{min-height:0;flex:1;padding:24px;border-radius:32px;border:1px solid var(--line);background:radial-gradient(circle at 80% 10%,rgba(233,196,106,.14),transparent 30%),linear-gradient(145deg,#1A0F16,#0B0B10);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}.bedroom-hero h1{font-size:2.25rem;line-height:.95}.bedroom-hero p{color:var(--text-muted);line-height:1.5;margin:12px 0 18px}
.board-shell{padding:10px;border:1px solid rgba(233,196,106,.16);border-radius:27px;background:radial-gradient(circle at 20% 0%,rgba(176,58,91,.14),transparent 30%),linear-gradient(155deg,#130B11,#0B0B10);box-shadow:var(--shadow);overflow:hidden;height:100%;display:flex;flex-direction:column;gap:9px;min-height:0}.players{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.player-chip{padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.74rem}.player-chip.current{border-color:rgba(233,196,106,.5);box-shadow:0 0 18px rgba(233,196,106,.12)}.player-chip:last-child{text-align:right}.turn-dot{width:8px;height:8px;border-radius:50%;background:#E9C46A;box-shadow:0 0 14px rgba(233,196,106,.8)}
.game-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:8px;aspect-ratio:1/1;padding:9px;border-radius:26px;background-image:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),url('../assets/board/board-bg.png');background-size:cover;background-position:center;border:1px solid rgba(233,196,106,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);isolation:isolate}.board-cell{position:relative;min-width:0;display:grid;place-items:center;isolation:isolate;overflow:hidden;border-radius:50%;transform:translateY(var(--drift));transition:.28s var(--ease);font-size:.7rem;color:var(--text);box-shadow:0 8px 18px rgba(0,0,0,.22)}.board-cell::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:url('../assets/board/tile-normal.png');background-size:cover;background-position:center}.board-cell.special{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);border-radius:0}.board-cell.special::before{border-radius:0;background-image:url('../assets/board/tile-special.png')}.board-cell.finish::before{background-image:url('../assets/board/tile-finish.png')}.board-cell.finish{box-shadow:0 10px 22px rgba(0,0,0,.24),0 0 18px rgba(233,196,106,.18)}.board-cell.active{box-shadow:0 0 22px rgba(233,196,106,.4),0 8px 20px rgba(0,0,0,.25);transform:translateY(var(--drift)) scale(1.06);animation:tilePulse 2.4s ease-in-out infinite}.cell-index{position:relative;z-index:1;font-weight:900;letter-spacing:.03em;font-size:.7rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}.cell-glyph{position:absolute;top:6px;right:7px;font-size:.62rem;color:#E9C46A;z-index:1;text-shadow:0 0 8px rgba(233,196,106,.6)}.token{position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid rgba(11,11,16,.95);transition:.24s var(--ease);z-index:2;box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 14px rgba(255,255,255,.18);animation:tokenPulse 2.6s ease-in-out infinite}.token.p1{background:#D9A6A0;left:18%;bottom:12%}.token.p2{background:#E9C46A;right:18%;top:12%}
.dice-area{display:flex;align-items:center;justify-content:space-between;gap:12px}.dice-wrap{display:flex;align-items:center;gap:12px;perspective:760px}.dice{width:60px;height:60px;position:relative;transform-style:preserve-3d;transition:transform .55s var(--ease)}.dice.rolling{animation:diceRoll 1s cubic-bezier(.2,.8,.2,1)}.dice.value-1{transform:rotateX(0deg) rotateY(0deg)}.dice.value-2{transform:rotateX(90deg) rotateY(0deg)}.dice.value-3{transform:rotateX(0deg) rotateY(-90deg)}.dice.value-4{transform:rotateX(0deg) rotateY(90deg)}.dice.value-5{transform:rotateX(-90deg) rotateY(0deg)}.dice.value-6{transform:rotateX(180deg) rotateY(0deg)}.dice-face{position:absolute;width:60px;height:60px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#23131b,#593240);border:1px solid rgba(233,196,106,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 14px rgba(217,166,160,.12)}.face-front{transform:translateZ(30px)}.face-back{transform:rotateY(180deg) translateZ(30px)}.face-right{transform:rotateY(90deg) translateZ(30px)}.face-left{transform:rotateY(-90deg) translateZ(30px)}.face-top{transform:rotateX(90deg) translateZ(30px)}.face-bottom{transform:rotateX(-90deg) translateZ(30px)}.pips{width:38px;height:38px;display:grid}.pips-1{place-items:center}.pips-2,.pips-3,.pips-4,.pips-5,.pips-6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.pip{width:7px;height:7px;border-radius:50%;background:#E9C46A;justify-self:center;align-self:center;box-shadow:0 0 10px rgba(233,196,106,.3)}.pips-2 .pip:nth-child(1){grid-column:1;grid-row:1}.pips-2 .pip:nth-child(2){grid-column:3;grid-row:3}.pips-3 .pip:nth-child(1){grid-column:1;grid-row:1}.pips-3 .pip:nth-child(2){grid-column:2;grid-row:2}.pips-3 .pip:nth-child(3){grid-column:3;grid-row:3}.pips-4 .pip:nth-child(1){grid-column:1;grid-row:1}.pips-4 .pip:nth-child(2){grid-column:3;grid-row:1}.pips-4 .pip:nth-child(3){grid-column:1;grid-row:3}.pips-4 .pip:nth-child(4){grid-column:3;grid-row:3}.pips-5 .pip:nth-child(1){grid-column:1;grid-row:1}.pips-5 .pip:nth-child(2){grid-column:3;grid-row:1}.pips-5 .pip:nth-child(3){grid-column:2;grid-row:2}.pips-5 .pip:nth-child(4){grid-column:1;grid-row:3}.pips-5 .pip:nth-child(5){grid-column:3;grid-row:3}.pips-6 .pip:nth-child(1){grid-column:1;grid-row:1}.pips-6 .pip:nth-child(2){grid-column:3;grid-row:1}.pips-6 .pip:nth-child(3){grid-column:1;grid-row:2}.pips-6 .pip:nth-child(4){grid-column:3;grid-row:2}.pips-6 .pip:nth-child(5){grid-column:1;grid-row:3}.pips-6 .pip:nth-child(6){grid-column:3;grid-row:3}
.popup-card{width:min(100%,420px);padding:22px;border-radius:28px;background:linear-gradient(155deg,color-mix(in srgb,var(--surface-2) 94%,var(--accent)),var(--surface));border:1px solid color-mix(in srgb,var(--accent-2) 24%,var(--line));box-shadow:var(--shadow);transform-origin:center;animation:popupIn .24s var(--ease)}.popup-card h3{font-family:var(--font-display);font-size:1.42rem;line-height:1.16}.popup-card p{color:var(--text-muted);line-height:1.5;margin-top:10px}.popup-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.timer{font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:900;color:#E9C46A;margin-top:10px}
.boot-error{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}.boot-error-card{max-width:560px;padding:24px;border-radius:28px;background:rgba(18,18,26,.86);border:1px solid var(--line);box-shadow:var(--shadow)}.boot-error-card h1{font-size:2rem;font-family:var(--font-display);margin:.4rem 0 1rem}.boot-error-small{margin-top:12px;color:var(--text-muted);line-height:1.5}
@media (max-height:760px){.pack-card{padding:10px}.pack-icon-wrap{height:58px}.pack-icon{width:54px;height:54px}.pack-card h2{font-size:.92rem}.pack-card p{font-size:.72rem;-webkit-line-clamp:2}.pack-cta{font-size:.64rem;padding:5px 9px}.question-card{padding:15px 16px 13px;border-radius:25px}.card-type{margin-bottom:5px}.card-intensity{margin-bottom:5px}.card-text{font-size:clamp(1.14rem,4.7vw,1.68rem)}.card-note{margin-top:8px;padding:9px 11px}.card-note p{font-size:.73rem}.primary-btn,.secondary-btn,.ghost-btn{min-height:44px}.game-board{gap:6px;padding:7px}.dice{width:54px;height:54px}.dice-face{width:54px;height:54px;border-radius:14px}.face-front{transform:translateZ(27px)}.face-back{transform:rotateY(180deg) translateZ(27px)}.face-right{transform:rotateY(90deg) translateZ(27px)}.face-left{transform:rotateY(-90deg) translateZ(27px)}.face-top{transform:rotateX(90deg) translateZ(27px)}.face-bottom{transform:rotateX(-90deg) translateZ(27px)}}

.pack-screen,.flip-stage,.card-footer{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important}
.card-reminder{flex:0 0 auto}


/* Step 3.7 — visual alignment to approved concept mock */
.nav-couple{color:#ff5f93}.nav-deep{color:#b776ff}.nav-party{color:#f1c06b}.nav-bedroom{color:#ff6574}.nav-btn.active{color:inherit}
.icon-btn[data-action="settings"]{color:#f1c878;box-shadow:0 0 18px rgba(241,200,120,.12)}

.pack-card{background:linear-gradient(160deg,rgba(91,19,49,.45),rgba(25,12,28,.88));border-color:rgba(255,255,255,.09);padding:13px 12px 12px;gap:5px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.pack-card::after{width:110px;height:110px;opacity:.45}
.pack-icon-wrap{height:68px}
.pack-icon{width:58px;height:58px;filter:drop-shadow(0 0 10px currentColor)}
.pack-card h2{font-size:.98rem;min-height:2.15em;display:grid;place-items:center}
.pack-card p{display:none}
.pack-cta{width:100%;text-align:center;padding:8px 10px;margin-top:5px;color:#221014;background:linear-gradient(90deg,#ffd0a1,#ff5d87);border:0;font-size:.7rem;text-transform:none;letter-spacing:.01em;box-shadow:0 6px 16px rgba(255,93,135,.18)}
.pack-couple_questions .pack-icon,.pack-gossip .pack-icon{color:#ff5d90}
.pack-date_nights .pack-icon,.pack-deep_questions .pack-icon,.pack-late_night .pack-icon{color:#bb78ff}
.pack-spicy_questions .pack-icon,.pack-hot_questions .pack-icon{color:#ff6272}
.pack-no_limits .pack-icon{color:#ff766f}
.pack-would_you_rather .pack-icon{color:#55e6d1}
.pack-pre_party .pack-icon,.pack-do_it_or_drink .pack-icon{color:#f1c06b}

.mock-card-screen{gap:11px;padding:7px 4px 5px}
.card-progress{padding:1px 12% 0}
.mock-progress{height:7px;margin:0;background:rgba(117,71,124,.27);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.mock-progress>span{background:linear-gradient(90deg,#ffc990,var(--accent));box-shadow:0 0 12px var(--glow)}
.flip-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:3px 7px;min-height:0}
.question-card.paper-card{width:100%;height:auto;min-height:min(40dvh,350px);max-height:min(44dvh,390px);padding:24px 23px;border-radius:20px;border:1px solid rgba(255,224,209,.72);background:linear-gradient(145deg,#fff2e8,#f9e5dc);box-shadow:0 16px 40px rgba(0,0,0,.32),0 0 18px color-mix(in srgb,var(--accent) 15%,transparent);color:#28171a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.question-card.paper-card::before{content:"";position:absolute;inset:8px;border-radius:14px;border:1px solid rgba(166,92,91,.09);background:radial-gradient(circle at 7% 8%,rgba(175,89,95,.06),transparent 18%),radial-gradient(circle at 92% 92%,rgba(175,89,95,.06),transparent 17%);pointer-events:none}
.question-card.paper-card::after{opacity:.25}
.paper-card .card-content{width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.paper-card .card-text{font-family:var(--font-display);font-size:clamp(1.42rem,5.7vw,2.05rem);line-height:1.18;color:#28171a;max-height:min(31dvh,260px);overflow:auto;padding:8px 10px;text-align:center;font-weight:650;scrollbar-width:thin;scrollbar-color:rgba(122,15,37,.24) transparent}
.card-reminder{margin:0 8px;padding:12px 14px;border-radius:15px;display:grid;grid-template-columns:32px 1fr;align-items:center;gap:11px;background:linear-gradient(145deg,rgba(74,13,36,.86),rgba(36,12,30,.92));border:1px solid color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.06));box-shadow:0 8px 22px rgba(0,0,0,.19),0 0 14px color-mix(in srgb,var(--accent) 12%,transparent)}
.drink-icon{width:28px;height:28px;color:#ffc98f;filter:drop-shadow(0 0 7px rgba(255,201,143,.22))}
.card-note p{font-size:.78rem;line-height:1.35;color:#f3e6e1}
.card-footer{gap:8px;padding:0 8px 2px}
.card-next-btn{min-height:48px;border-radius:17px;background:linear-gradient(90deg,#ffd0a0 0%,#ffb18e 32%,#ff5d87 100%);color:#2c1419;font-size:1rem;box-shadow:0 8px 22px rgba(255,93,135,.2),0 0 14px rgba(255,190,142,.1);animation:ctaPulseSoft 3.1s ease-in-out infinite}
.progress-dots{display:flex;justify-content:center;align-items:center;gap:5px;height:14px}
.progress-dots span{width:7px;height:7px;border-radius:50%;background:rgba(149,109,151,.28);transition:.24s var(--ease)}
.progress-dots span.active{background:#ffc78f;box-shadow:0 0 8px rgba(255,199,143,.55)}

@media(max-height:760px){
  .pack-icon-wrap{height:56px}.pack-icon{width:48px;height:48px}.pack-card h2{font-size:.87rem}.pack-cta{padding:6px 8px}
  .question-card.paper-card{min-height:min(36dvh,285px);max-height:min(39dvh,315px);padding:17px 18px}.paper-card .card-text{font-size:clamp(1.18rem,4.8vw,1.6rem);max-height:min(27dvh,215px)}
  .card-reminder{padding:9px 11px}.card-note p{font-size:.71rem}.drink-icon{width:24px;height:24px}.card-next-btn{min-height:43px;font-size:.9rem}
}

/* Step 3.9 onboarding + header polish */
.onboarding-premium{position:relative;overflow:hidden}
.onboarding-premium::before{content:"";position:absolute;inset:-10% -5% auto;height:65%;background:radial-gradient(circle at 50% 18%,rgba(255,111,154,.22),transparent 36%),radial-gradient(circle at 72% 26%,rgba(244,200,138,.14),transparent 28%);filter:blur(18px);pointer-events:none}
.onboarding-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:heroLiftIn .55s var(--ease)}
.onboarding-card--language{width:min(100%,460px);padding:32px 26px 28px;min-height:560px}
.onboarding-card--adult{width:min(100%,460px);padding:30px 26px 28px;min-height:530px;justify-content:center}
.logo-glow{position:absolute;inset:52px 18% auto;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,115,156,.26),rgba(244,200,138,.11) 42%,transparent 70%);filter:blur(20px);animation:brandGlowPulse 4.6s ease-in-out infinite;pointer-events:none}
.onboarding-logo--hero{width:min(62vw,220px);margin:4px auto 22px;position:relative;z-index:1;filter:drop-shadow(0 0 22px rgba(255,114,154,.20))}
.onboarding-card--adult .onboarding-logo{width:min(56vw,188px);margin:2px auto 18px;position:relative;z-index:1;filter:drop-shadow(0 0 18px rgba(255,114,154,.17))}
.onboarding-card p{max-width:31ch}
.adult-actions{justify-content:center;width:100%}
.adult-actions .primary-btn,.adult-actions .ghost-btn{min-width:148px}

/* Pack cards */
.pack-card{padding:16px 14px 14px;border-radius:26px;gap:10px;grid-template-rows:auto auto auto}
.pack-icon-wrap{height:84px}
.pack-icon{width:72px;height:72px}
.pack-copy{display:flex;flex-direction:column;gap:4px;align-items:center}
.pack-card h2{font-size:1.02rem;line-height:1.14;margin:0}
.pack-desc{font-size:.76rem;line-height:1.3;color:var(--text-muted);margin:0;min-height:2.4em;-webkit-line-clamp:2}
.pack-cta{margin-top:2px}

/* Question view spacing and remove redundant dots */
.card-progress{padding:2px 12% 2px}
.question-card.paper-card{min-height:min(37dvh,310px);max-height:min(41dvh,350px)}
.card-reminder{margin:0 10px}
.card-footer .mini-note{margin-top:2px}
.progress-dots{display:none !important}

/* Bedroom hub */
.bedroom-hub{height:100%;display:grid;grid-template-rows:minmax(0,1.05fr) auto;gap:14px;min-height:0}
.bedroom-hub-art{min-height:0;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);background:linear-gradient(155deg,#170a12,#2a0f1d)}
.bedroom-hub-art img{width:100%;height:100%;object-fit:cover}
.bedroom-hub-body{padding:4px 6px 2px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.bedroom-hub-body p{color:var(--text-muted);line-height:1.45;max-width:34ch}
.bedroom-hub .hero-actions{justify-content:center}

/* Bedroom board redesign */
.board-shell{display:flex;flex-direction:column;gap:12px;min-height:0}
.players{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.player-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.82rem;color:var(--text-muted)}
.player-chip.current{color:var(--text);border-color:color-mix(in srgb,var(--accent-2) 35%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--glow) 38%,transparent)}
.turn-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--glow)}
.game-board{position:relative;display:block;aspect-ratio:1/1;width:100%;padding:0;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.01));border:1px solid rgba(233,196,106,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--shadow);overflow:hidden;isolation:isolate}
.game-board::before{content:"";position:absolute;inset:0;background-image:url('../assets/board/board-bg.svg');background-size:cover;background-position:center;opacity:1}
.board-track{display:none}
.board-cell{position:absolute;width:13.5%;aspect-ratio:1/1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:50%;background:linear-gradient(145deg,rgba(27,14,22,.94),rgba(54,20,34,.96));border:1.2px solid rgba(244,200,138,.20);box-shadow:0 10px 22px rgba(0,0,0,.28);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.board-cell.special{border-color:rgba(244,200,138,.52);box-shadow:0 0 0 1px rgba(244,200,138,.15),0 0 18px rgba(244,200,138,.18),0 10px 22px rgba(0,0,0,.28)}
.board-cell.finish{border-color:rgba(255,126,157,.55);box-shadow:0 0 0 1px rgba(255,126,157,.16),0 0 22px rgba(255,126,157,.16),0 10px 22px rgba(0,0,0,.28)}
.board-cell.active{transform:translate(-50%,-50%) scale(1.07);animation:tilePulse 2.2s ease-in-out infinite}
.cell-icon{display:grid;place-items:center;width:54%;height:54%;color:var(--accent-2);filter:drop-shadow(0 0 9px rgba(255,201,143,.14))}
.board-glyph{width:100%;height:100%}
.cell-index{position:static;z-index:1;font-size:.58rem;letter-spacing:.04em;color:#f7e2d5;text-shadow:none;opacity:.85}
.token-layer{position:absolute;inset:0;pointer-events:none}
.token.token-floating{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);transition:left .34s ease-in-out, top .34s ease-in-out, transform .24s ease;z-index:5}
.token.p1{background:#f5b0a8}.token.p2{background:#f3cf7c}
.dice-area{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dice-area .primary-btn{flex:1}

@media (max-height:760px){
  .onboarding-card--language{min-height:500px;padding:28px 22px 24px}
  .onboarding-logo--hero{width:min(60vw,206px)}
  .pack-card{padding:12px 12px 11px}
  .pack-icon-wrap{height:72px}
  .pack-icon{width:60px;height:60px}
  .pack-card h2{font-size:.95rem}
  .pack-desc{font-size:.72rem}
  .question-card.paper-card{min-height:min(34dvh,270px);max-height:min(38dvh,310px)}
  .board-cell{width:13%}
  .token.token-floating{width:16px;height:16px}
}

/* Step 4 corrections */
.back-btn{background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.03));border:1px solid color-mix(in srgb,var(--accent-2) 24%,rgba(255,255,255,.06));box-shadow:0 0 0 1px rgba(255,255,255,.02),0 10px 28px rgba(0,0,0,.22),0 0 18px color-mix(in srgb,var(--glow) 25%,transparent)}
.back-btn .icon-svg,.back-btn .back-icon{width:20px;height:20px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 35%,transparent))}
.back-btn:hover,.back-btn:focus-visible{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.02),0 12px 30px rgba(0,0,0,.24),0 0 22px color-mix(in srgb,var(--glow) 38%,transparent)}

.nav-btn{background:transparent;border:none;box-shadow:none;overflow:visible}
.nav-btn::before{content:"";position:absolute;left:50%;bottom:7px;width:30px;height:10px;transform:translateX(-50%) scale(.8);border-radius:999px;background:radial-gradient(circle, color-mix(in srgb,var(--accent-2) 65%,white 10%) 0%, color-mix(in srgb,var(--glow) 45%,transparent) 45%, transparent 72%);opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.nav-btn::after{content:"";position:absolute;left:50%;bottom:7px;width:18px;height:3px;transform:translateX(-50%) scaleX(.6);border-radius:999px;background:currentColor;opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease),filter .28s var(--ease);inset:auto auto 7px 50%}
.nav-btn .icon-svg{width:31px;height:31px;position:relative;z-index:1;transition:transform .25s var(--ease),filter .25s var(--ease),opacity .25s var(--ease);opacity:.72;filter:drop-shadow(0 0 8px rgba(255,255,255,.03))}
.nav-btn.active{background:transparent;box-shadow:none;color:inherit}
.nav-btn.active::before,.nav-btn.active::after{opacity:1;transform:translateX(-50%) scale(1)}
.nav-btn.active::after{filter:drop-shadow(0 0 8px var(--glow))}
.nav-btn.active .icon-svg{opacity:1;transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 12px var(--glow))}
.nav-btn:not(.active){color:color-mix(in srgb,var(--text-muted) 92%,white 4%)}

.pack-desc{display:block;visibility:visible;opacity:1;color:color-mix(in srgb,var(--text) 80%, rgba(255,255,255,.65));font-size:.78rem;line-height:1.28;max-width:17ch;text-align:center}
.pack-copy{min-height:3.6rem;justify-content:flex-start}

.bedroom-hub-art{position:relative;border:none;box-shadow:none;background:none;border-radius:0;overflow:visible;display:flex;align-items:flex-start;justify-content:center;min-height:0}
.bedroom-hub-art::after{content:"";position:absolute;inset:auto 0 -2% 0;height:32%;background:linear-gradient(to bottom,rgba(12,12,18,0),var(--bg));pointer-events:none}
.bedroom-hub-art img{width:110%;height:100%;object-fit:cover;display:block;mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 72%, rgba(0,0,0,.55) 88%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 72%, rgba(0,0,0,.55) 88%, transparent 100%);filter:drop-shadow(0 18px 34px rgba(0,0,0,.28))}
.bedroom-hub-body{margin-top:-6px}

.game-board{background:transparent;overflow:hidden}
.game-board::before{background-image:url('../assets/board/board-bg.svg');background-size:contain;background-repeat:no-repeat;background-position:center center;opacity:1;inset:0}
.board-cell{width:12.8%;background:linear-gradient(145deg,rgba(22,13,20,.93),rgba(59,24,39,.96));border-color:rgba(244,200,138,.24)}
.board-cell.special{border-color:rgba(244,200,138,.6)}
.board-cell .cell-icon{width:56%;height:56%}
.board-cell.finish{background:linear-gradient(145deg,rgba(43,16,28,.98),rgba(85,27,45,.98))}

/* Step 4.1 gameplay polish */
.board-shell{gap:16px}
.game-board::before{background-size:100% 100%;background-repeat:no-repeat;background-position:center center}
.board-cell{width:12.2%;gap:2px;background:linear-gradient(145deg,rgba(23,14,21,.96),rgba(65,25,42,.98));border:1.3px solid rgba(244,200,138,.26);box-shadow:0 10px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05)}
.board-cell .cell-icon{width:52%;height:52%;display:grid;place-items:center;color:color-mix(in srgb,var(--accent-2) 78%, white 8%)}
.board-cell .cell-icon .icon-svg{width:100%;height:100%}
.board-cell.special{border-color:rgba(244,200,138,.72);box-shadow:0 0 0 1px rgba(244,200,138,.18),0 0 18px rgba(244,200,138,.18),0 10px 22px rgba(0,0,0,.3)}
.board-cell.finish{border-color:rgba(255,126,157,.72);box-shadow:0 0 0 1px rgba(255,126,157,.18),0 0 22px rgba(255,126,157,.18),0 10px 22px rgba(0,0,0,.32)}
.cell-index{font-size:.63rem;opacity:.88}
.dice-area{align-items:stretch;gap:14px}
.dice-actions{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.orgasm-btn{white-space:nowrap}
.popup-actions--stack{display:grid;grid-template-columns:1fr;gap:10px}

@media (max-width:390px){
  .dice-actions{grid-template-columns:1fr;}
  .orgasm-btn{font-size:.84rem}
}

/* Step 4.2 — board path and circular cells share the exact same 0–100 coordinate space */
.game-board{position:relative !important;overflow:hidden !important;aspect-ratio:1/1 !important}
.game-board::before{background-image:url('../assets/board/board-bg.svg') !important;background-size:100% 100% !important;background-repeat:no-repeat !important;background-position:center !important}
.board-path-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.board-path-glow,.board-path-line{fill:none;stroke:url(#boardTrack);stroke-linecap:round;stroke-linejoin:round}
.board-path-glow{stroke-width:3.6;opacity:.20;filter:drop-shadow(0 0 2.5px rgba(241,195,139,.35))}
.board-path-line{stroke-width:.68;opacity:.92}
.board-cell{
  z-index:2 !important;
  width:11.8% !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  clip-path:none !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,rgba(24,14,22,.98),rgba(64,25,42,.98)) !important;
  border:1.25px solid rgba(244,200,138,.30) !important;
}
.board-cell.special{
  border-radius:50% !important;
  clip-path:none !important;
  border-color:rgba(244,200,138,.72) !important;
}
.board-cell.finish{border-radius:50% !important;clip-path:none !important}
.board-cell .cell-icon{width:50% !important;height:50% !important;color:#f0c58f !important}
.board-cell .cell-index{font-size:.6rem !important}
.token-layer{z-index:4 !important}

/* Step 4.3 — navbar polish */
.nav-btn{
  border-radius:18px !important;
  min-height:54px;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  transition:transform .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.nav-btn::before,
.nav-btn::after{content:none !important; display:none !important;}
.nav-btn .icon-svg{
  width:30px !important;
  height:30px !important;
  opacity:.78 !important;
  transform:none !important;
  filter:none !important;
}
.nav-btn:hover,
.nav-btn:focus-visible{
  transform:translateY(-1px);
  color:color-mix(in srgb,var(--accent-2) 78%, white 6%) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.18);
}
.nav-btn:hover .icon-svg,
.nav-btn:focus-visible .icon-svg{opacity:.96 !important; transform:scale(1.04) !important; filter:drop-shadow(0 0 9px color-mix(in srgb,var(--glow) 28%, transparent)) !important;}
.nav-btn:active{
  transform:translateY(0) scale(.97) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%, rgba(255,255,255,.06)),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 18%, rgba(255,255,255,.06)), 0 5px 12px rgba(0,0,0,.16);
}
.nav-btn.active{
  color:color-mix(in srgb,var(--accent-2) 88%, white 8%) !important;
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--glow) 20%, transparent) 0%, transparent 58%), linear-gradient(180deg, color-mix(in srgb,var(--accent) 22%, rgba(255,255,255,.06)), rgba(255,255,255,.01));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 24%, rgba(255,255,255,.06)), 0 10px 20px rgba(0,0,0,.22), 0 0 18px color-mix(in srgb,var(--glow) 22%, transparent);
}
.nav-btn.active .icon-svg{
  opacity:1 !important;
  transform:translateY(-1px) scale(1.08) !important;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--glow) 36%, transparent)) !important;
}
.nav-btn:not(.active){color:color-mix(in srgb,var(--text-muted) 92%, white 4%) !important;}

/* Step 5 final polish overrides */
.bedroom-hub-art{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  min-height:0;
  background:transparent;
}
.bedroom-hub-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(12,12,18,0) 48%, rgba(12,12,18,0.06) 64%, rgba(12,12,18,0.28) 82%, rgba(12,12,18,0.82) 100%);
  pointer-events:none;
}
.bedroom-hub-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 55%, rgba(0,0,0,.96) 68%, rgba(0,0,0,.75) 82%, rgba(0,0,0,.2) 92%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 55%, rgba(0,0,0,.96) 68%, rgba(0,0,0,.75) 82%, rgba(0,0,0,.2) 92%, transparent 100%);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.24));
}
.view-pack{gap:12px}
.flip-stage{
  align-items:flex-start;
  padding:12px 8px 4px;
}
.question-card.paper-card{
  min-height:min(34dvh,270px);
  max-height:min(39dvh,320px);
  margin-top:0;
}
.paper-card .card-text{
  max-height:min(26dvh,205px);
}

/* Step 4.4 final refinements */
.bedroom-hub-art{
  position:relative !important;
  border:none !important;
  box-shadow:none !important;
  background:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
.bedroom-hub-art::before{
  content:"";
  position:absolute;
  inset:-2%;
  background:radial-gradient(ellipse at center, rgba(18,10,18,0) 52%, rgba(18,10,18,.08) 68%, rgba(18,10,18,.38) 84%, rgba(18,10,18,.94) 100%);
  pointer-events:none;
  z-index:1;
}
.bedroom-hub-art::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  height:auto !important;
  background:radial-gradient(ellipse at center, rgba(11,11,16,0) 54%, rgba(11,11,16,.12) 70%, rgba(11,11,16,.38) 86%, rgba(11,11,16,.92) 100%) !important;
  pointer-events:none !important;
  z-index:2;
}
.bedroom-hub-art img{
  width:108% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  mask-image:radial-gradient(ellipse 90% 88% at 50% 48%, rgba(0,0,0,1) 56%, rgba(0,0,0,.94) 71%, rgba(0,0,0,.72) 83%, rgba(0,0,0,.28) 93%, transparent 100%) !important;
  -webkit-mask-image:radial-gradient(ellipse 90% 88% at 50% 48%, rgba(0,0,0,1) 56%, rgba(0,0,0,.94) 71%, rgba(0,0,0,.72) 83%, rgba(0,0,0,.28) 93%, transparent 100%) !important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.22)) !important;
}

.view-bedroom-play{
  padding-top:4px;
  overflow:visible;
}
.bedroom-play-layout{
  gap:8px !important;
  overflow:visible !important;
}
.board-shell{
  gap:10px !important;
  padding:6px 4px 10px;
  overflow:visible !important;
}
.players{
  padding-top:2px;
}
.game-board{
  width:min(100%, 430px);
  margin:0 auto;
  aspect-ratio:1 / 1;
}
.dice-area{margin-top:2px}

.view-pack{
  gap:10px !important;
}
.pack-screen{
  justify-content:flex-start;
  gap:10px !important;
}
.card-progress{
  padding-bottom:0;
}
.flip-stage{
  flex:0 0 auto !important;
  padding:6px 8px 2px !important;
}
.question-card.paper-card{
  min-height:min(32dvh,248px) !important;
  max-height:min(36dvh,292px) !important;
}
.paper-card .card-text{
  max-height:min(22dvh,170px) !important;
}
.card-footer{
  gap:7px !important;
  padding-top:0 !important;
}

@media (max-height:760px){
  .question-card.paper-card{
    min-height:min(30dvh,226px) !important;
    max-height:min(34dvh,266px) !important;
  }
  .paper-card .card-text{max-height:min(20dvh,152px) !important;}
}

/* Direct asset integration overrides */
.icon-slot svg,
.icon-slot .icon-raster{display:block;width:100%;height:100%;color:inherit;overflow:visible}
.icon-slot .icon-raster{object-fit:contain;filter:inherit}

/* Use provided PNG icons cleanly in nav/pack cards */
.nav-btn .icon-raster{width:100%;height:100%;object-fit:contain;transform-origin:center center;opacity:1}
.pack-icon .icon-raster{width:100%;height:100%;object-fit:contain}

/* Bedroom hub hero: no box, fully faded around all edges */
.bedroom-hub-art,
.bedroom-hub-art{position:relative !important;border:none !important;box-shadow:none !important;background:none !important;border-radius:0 !important;overflow:visible !important;display:flex !important;align-items:center !important;justify-content:center !important;min-height:0 !important}
.bedroom-hub-art::before{content:"" !important;position:absolute !important;inset:-1% !important;background:radial-gradient(ellipse at center, rgba(11,11,16,0) 52%, rgba(11,11,16,.08) 68%, rgba(11,11,16,.34) 84%, rgba(11,11,16,.94) 100%) !important;pointer-events:none !important;z-index:1 !important}
.bedroom-hub-art::after{content:none !important}
.bedroom-hub-art img{width:112% !important;height:100% !important;display:block !important;object-fit:cover !important;object-position:center center !important;mask-image:radial-gradient(ellipse 88% 86% at 50% 48%, rgba(0,0,0,1) 58%, rgba(0,0,0,.96) 70%, rgba(0,0,0,.76) 82%, rgba(0,0,0,.26) 93%, transparent 100%) !important;-webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 48%, rgba(0,0,0,1) 58%, rgba(0,0,0,.96) 70%, rgba(0,0,0,.76) 82%, rgba(0,0,0,.26) 93%, transparent 100%) !important;filter:drop-shadow(0 18px 34px rgba(0,0,0,.20)) !important}
.bedroom-hub-body{margin-top:-2px !important}

/* Small extra safety for play area clipping */
.view-bedroom-play{padding-top:6px !important}
.bedroom-play-layout{overflow:visible !important;gap:8px !important}
.board-shell{overflow:visible !important;padding:12px 8px 10px !important}
.players{padding-top:2px !important}


/* Step 4.4.1 board container unclipping fix */
.view-bedroom-play{
  padding-top:12px !important;
}
.bedroom-play-layout{
  padding-top:2px !important;
}
.board-shell{
  padding:18px 10px 12px !important;
  border-radius:30px !important;
  box-sizing:border-box !important;
}
.players{
  padding-top:0 !important;
  margin-top:0 !important;
}
.game-board{
  width:min(100%, 418px) !important;
}
@media (max-height: 760px){
  .view-bedroom-play{padding-top:10px !important;}
  .board-shell{padding:16px 8px 10px !important;}
  .game-board{width:min(100%, 402px) !important;}
}

/* Step 4.5 — category-consistent pack icons */
.pack-card .pack-icon-wrap,
.pack-card .pack-icon{
  color:var(--pack-icon-color) !important;
}
.pack-card .pack-icon{
  filter:drop-shadow(0 0 10px var(--pack-icon-glow)) drop-shadow(0 0 20px color-mix(in srgb,var(--pack-icon-color) 16%,transparent)) !important;
}
.pack-card:hover .pack-icon{
  transform:translateY(-2px) scale(1.055);
  filter:drop-shadow(0 0 12px var(--pack-icon-glow)) drop-shadow(0 0 24px color-mix(in srgb,var(--pack-icon-color) 22%,transparent)) !important;
}

/* Step 4.5 — premium Start / Resume CTA inside pack cards */
.pack-cta{
  min-width:104px;
  min-height:34px;
  padding:8px 15px 8px 16px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px !important;
  color:var(--accent-fg) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--accent) 96%,white 4%),
      color-mix(in srgb,var(--accent) 74%,var(--accent-2) 26%)) !important;
  border:1px solid color-mix(in srgb,var(--accent-2) 32%,rgba(255,255,255,.16)) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb,var(--accent) 25%,transparent),
    0 0 0 1px color-mix(in srgb,var(--accent-2) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.17) !important;
  font-size:.69rem !important;
  font-weight:900 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase;
  transition:transform .2s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease);
}
.pack-cta::after{
  content:"→";
  font-size:.9rem;
  line-height:1;
  transform:translateX(0);
  transition:transform .2s var(--ease);
}
.pack-card:hover .pack-cta,
.pack-card:focus-visible .pack-cta{
  transform:translateY(-1px);
  box-shadow:
    0 11px 24px color-mix(in srgb,var(--accent) 32%,transparent),
    0 0 18px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.pack-card:hover .pack-cta::after,
.pack-card:focus-visible .pack-cta::after{
  transform:translateX(3px);
}
.pack-card:active .pack-cta{
  transform:translateY(0) scale(.975);
}


/* Step 4.5 pack question layout tightening */
.view-pack{
  gap:8px !important;
}
.pack-screen.mock-card-screen{
  height:100%;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  align-items:stretch;
  gap:10px !important;
  padding:4px 4px 4px !important;
}
.card-progress{
  padding:0 12% 0 !important;
}
.flip-stage{
  min-height:0;
  height:100%;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:2px 8px 0 !important;
}
.question-card.paper-card{
  width:100%;
  margin:0 auto;
  min-height:min(35dvh,284px) !important;
  max-height:min(40dvh,340px) !important;
}
.paper-card .card-text{
  max-height:min(24dvh,190px) !important;
}
.card-reminder{
  margin:0 8px !important;
}
.card-footer{
  margin-top:0 !important;
  padding:0 8px 2px !important;
  gap:8px !important;
}
.card-next-btn{
  order:2;
}
.card-footer .mini-note{
  order:3;
  margin-top:2px;
}
@media (max-height:760px){
  .pack-screen.mock-card-screen{
    gap:8px !important;
  }
  .question-card.paper-card{
    min-height:min(33dvh,250px) !important;
    max-height:min(37dvh,292px) !important;
  }
  .paper-card .card-text{
    max-height:min(22dvh,166px) !important;
  }
}


/* Step 4.6 settings icon theme + boudoir hero full fade */
.app-header .icon-btn[data-action="settings"]{
  color:var(--accent-2) !important;
  border-color:color-mix(in srgb,var(--accent-2) 24%, var(--line)) !important;
  background:color-mix(in srgb,var(--accent) 10%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 14%, transparent),0 0 18px color-mix(in srgb,var(--glow) 58%, transparent),0 10px 22px rgba(0,0,0,.20) !important;
}
.app-header .icon-btn[data-action="settings"]:hover,
.app-header .icon-btn[data-action="settings"]:focus-visible{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 20%, transparent),0 0 24px color-mix(in srgb,var(--glow) 76%, transparent),0 12px 26px rgba(0,0,0,.24) !important;
  transform:translateY(-1px) scale(1.02);
}
.app-header .icon-btn[data-action="settings"] .icon-svg,
.app-header .icon-btn[data-action="settings"] .icon-slot svg{
  color:inherit !important;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--glow) 74%, transparent));
}

.bedroom-hub-art{
  position:relative !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
}
.bedroom-hub-art::before,
.bedroom-hub-art::after{
  content:none !important;
}
.bedroom-hub-art img{
  width:118% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:0 !important;
  mask-image:radial-gradient(ellipse 92% 88% at 50% 50%, rgba(0,0,0,1) 48%, rgba(0,0,0,.96) 61%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.56) 82%, rgba(0,0,0,.22) 92%, transparent 100%) !important;
  -webkit-mask-image:radial-gradient(ellipse 92% 88% at 50% 50%, rgba(0,0,0,1) 48%, rgba(0,0,0,.96) 61%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.56) 82%, rgba(0,0,0,.22) 92%, transparent 100%) !important;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.16)) !important;
}
.bedroom-hub{
  overflow:hidden;
}


/* Step 4.7 smooth pack hover + premium start buttons + stronger boudoir fade */
.pack-card{
  transition:transform .38s cubic-bezier(.22,.72,.2,1), box-shadow .38s cubic-bezier(.22,.72,.2,1), border-color .32s ease, background .32s ease, filter .32s ease !important;
  transform:translateY(0) scale(1);
  will-change:transform, box-shadow;
}
.pack-card::before{
  opacity:.9;
  transition:opacity .34s ease;
}
.pack-card::after{
  transition:transform .42s cubic-bezier(.22,.72,.2,1), opacity .34s ease, filter .34s ease;
  filter:blur(16px);
}
.pack-card:hover,
.pack-card:focus-visible{
  transform:translateY(-4px) scale(1.012) !important;
  border-color:color-mix(in srgb,var(--accent-2) 24%, rgba(255,255,255,.12)) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb,var(--accent-2) 14%, transparent), 0 0 24px color-mix(in srgb,var(--glow) 34%, transparent) !important;
}
.pack-card:hover::before,
.pack-card:focus-visible::before{
  opacity:1;
}
.pack-card:hover::after,
.pack-card:focus-visible::after{
  transform:translate3d(-4px, 4px, 0) scale(1.06);
  opacity:.62;
  filter:blur(18px);
}
.pack-card:active{
  transform:translateY(-1px) scale(.995) !important;
}

.pack-cta{
  width:100%;
  min-height:42px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px !important;
  border-radius:15px !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.015em !important;
  color:var(--accent-fg) !important;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 88%, white), color-mix(in srgb,var(--accent-2) 30%, var(--accent))) !important;
  border:1px solid color-mix(in srgb,var(--accent-2) 24%, transparent) !important;
  box-shadow:0 12px 22px color-mix(in srgb,var(--accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -10px 18px rgba(0,0,0,.08) !important;
  text-transform:none !important;
  overflow:hidden;
  position:relative;
  transition:transform .28s cubic-bezier(.22,.72,.2,1), box-shadow .28s cubic-bezier(.22,.72,.2,1), filter .28s ease !important;
}
.pack-cta::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02) 40%, transparent 100%);
  pointer-events:none;
}
.pack-cta::after{
  content:"→";
  position:relative;
  z-index:1;
  font-size:.9rem;
  opacity:.86;
  transform:translateX(0);
  transition:transform .24s ease, opacity .24s ease;
}
.pack-card:hover .pack-cta,
.pack-card:focus-visible .pack-cta,
.pack-cta:hover,
.pack-cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 14px 28px color-mix(in srgb,var(--accent) 28%, transparent), 0 0 20px color-mix(in srgb,var(--glow) 54%, transparent), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -10px 18px rgba(0,0,0,.1) !important;
}
.pack-card:hover .pack-cta::after,
.pack-card:focus-visible .pack-cta::after,
.pack-cta:hover::after,
.pack-cta:focus-visible::after{
  transform:translateX(2px);
  opacity:1;
}
.pack-cta:active{
  transform:translateY(1px) scale(.99);
}

.bedroom-hub-art{
  margin-inline:-10px;
}
.bedroom-hub-art img{
  width:122% !important;
  mask-image:radial-gradient(ellipse 98% 94% at 50% 50%, rgba(0,0,0,1) 40%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.76) 68%, rgba(0,0,0,.42) 80%, rgba(0,0,0,.14) 91%, transparent 100%) !important;
  -webkit-mask-image:radial-gradient(ellipse 98% 94% at 50% 50%, rgba(0,0,0,1) 40%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.76) 68%, rgba(0,0,0,.42) 80%, rgba(0,0,0,.14) 91%, transparent 100%) !important;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.13)) !important;
}
.bedroom-hub-art::before{
  content:"" !important;
  position:absolute !important;
  inset:-6% !important;
  background:radial-gradient(ellipse at center, rgba(11,11,16,0) 45%, rgba(11,11,16,.12) 66%, rgba(11,11,16,.34) 82%, rgba(11,11,16,.78) 92%, rgba(11,11,16,.98) 100%) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* Step 4.8 — unclipped pack hover + M-House glass/neon pack CTA */
.pack-grid{
  overflow:visible !important;
  padding:7px 4px 5px !important;
  margin-top:-2px;
  box-sizing:border-box;
}
.view-section{
  overflow:visible !important;
}
.pack-card{
  transform-origin:center center !important;
  transition:transform .34s cubic-bezier(.2,.72,.22,1), box-shadow .34s cubic-bezier(.2,.72,.22,1), border-color .3s ease, filter .3s ease !important;
}
.pack-card:hover,
.pack-card:focus-visible{
  transform:scale(1.012) !important;
  border-color:color-mix(in srgb,var(--accent-2) 26%, rgba(255,255,255,.10)) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.27),
    0 0 0 1px color-mix(in srgb,var(--accent-2) 12%, transparent),
    0 0 22px color-mix(in srgb,var(--glow) 28%, transparent) !important;
}
.pack-card:active{
  transform:scale(.995) !important;
}

.pack-cta{
  width:min(82%, 168px) !important;
  min-height:40px !important;
  justify-self:center !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  color:color-mix(in srgb,var(--accent-2) 88%, white 8%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    color-mix(in srgb,var(--surface-2) 88%, var(--accent) 12%) !important;
  border:1px solid color-mix(in srgb,var(--accent-2) 38%, rgba(255,255,255,.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 18px rgba(0,0,0,.10),
    0 8px 18px rgba(0,0,0,.20),
    0 0 14px color-mix(in srgb,var(--glow) 22%, transparent) !important;
  font-size:.76rem !important;
  font-weight:850 !important;
  letter-spacing:.035em !important;
  text-transform:none !important;
  overflow:hidden !important;
  position:relative !important;
  isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.72,.22,1), border-color .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease !important;
}
.pack-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:
    radial-gradient(circle at 28% 0%, color-mix(in srgb,var(--accent-2) 18%, transparent), transparent 40%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  transform:translateX(-115%);
  transition:transform .5s cubic-bezier(.2,.72,.22,1);
  pointer-events:none;
  z-index:-1;
}
.pack-cta::after{
  content:"→" !important;
  position:relative;
  z-index:1;
  font-size:.9rem;
  opacity:.8;
  transform:translateX(0);
  transition:transform .24s ease, opacity .24s ease;
}
.pack-card:hover .pack-cta,
.pack-card:focus-visible .pack-cta,
.pack-cta:hover,
.pack-cta:focus-visible{
  color:white !important;
  border-color:color-mix(in srgb,var(--accent-2) 62%, rgba(255,255,255,.12)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--accent) 22%, rgba(255,255,255,.08)), rgba(255,255,255,.018)),
    color-mix(in srgb,var(--surface-2) 78%, var(--accent) 22%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 10px 22px rgba(0,0,0,.22),
    0 0 18px color-mix(in srgb,var(--glow) 40%, transparent) !important;
  transform:translateY(-1px) !important;
}
.pack-card:hover .pack-cta::before,
.pack-card:focus-visible .pack-cta::before,
.pack-cta:hover::before,
.pack-cta:focus-visible::before{
  transform:translateX(115%);
}
.pack-card:hover .pack-cta::after,
.pack-card:focus-visible .pack-cta::after,
.pack-cta:hover::after,
.pack-cta:focus-visible::after{
  transform:translateX(3px);
  opacity:1;
}
.pack-cta:active{
  transform:translateY(0) scale(.98) !important;
}

@media (max-height:760px){
  .pack-grid{padding-top:6px !important;}
  .pack-cta{min-height:36px !important;width:min(84%,154px) !important;padding:7px 13px !important;font-size:.70rem !important;}
}

/* Step 4.8 — settings sheet dark-glass / neon theme */
.modal-backdrop[data-overlay="settings"]{
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb,var(--glow) 26%, transparent), transparent 44%),
    rgba(3,3,8,.68) !important;
  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
  padding:16px !important;
}
.modal-backdrop[data-overlay="settings"] .sheet{
  position:relative;
  isolation:isolate;
  width:min(100%,560px) !important;
  max-height:min(86dvh,720px) !important;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom)) !important;
  border-radius:30px 30px 24px 24px !important;
  overflow:auto;
  background:
    linear-gradient(160deg, color-mix(in srgb,var(--surface-2) 88%, transparent), color-mix(in srgb,var(--surface) 96%, #09090e)) !important;
  border:1px solid color-mix(in srgb,var(--accent-2) 28%, rgba(255,255,255,.08)) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,.52),
    0 0 0 1px color-mix(in srgb,var(--accent-2) 8%, transparent),
    0 0 36px color-mix(in srgb,var(--glow) 58%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  animation:settingsSheetIn .34s cubic-bezier(.2,.85,.24,1) both;
}
.modal-backdrop[data-overlay="settings"] .sheet::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 88% 4%, color-mix(in srgb,var(--accent-2) 13%, transparent), transparent 26%),
    radial-gradient(circle at 4% 88%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%);
  pointer-events:none;
}
.modal-backdrop[data-overlay="settings"] .sheet-header{
  position:relative;
  align-items:center;
  margin-bottom:14px !important;
  padding:1px 2px 14px;
}
.modal-backdrop[data-overlay="settings"] .sheet-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-2) 38%,transparent),transparent);
}
.modal-backdrop[data-overlay="settings"] .sheet-header h2{
  font-size:clamp(1.45rem,6vw,1.85rem);
  letter-spacing:-.02em;
  text-shadow:0 0 22px color-mix(in srgb,var(--glow) 62%,transparent);
}
.modal-backdrop[data-overlay="settings"] .sheet-header .icon-btn{
  width:42px;
  height:42px;
  font-size:1.35rem;
  line-height:1;
  color:var(--accent-2);
  background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.045));
  border-color:color-mix(in srgb,var(--accent-2) 24%,var(--line));
  box-shadow:0 0 18px color-mix(in srgb,var(--glow) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.07);
}
.modal-backdrop[data-overlay="settings"] .settings-group{
  padding:16px 2px !important;
  border-top:1px solid color-mix(in srgb,var(--accent-2) 10%,var(--line)) !important;
}
.modal-backdrop[data-overlay="settings"] .settings-group:first-of-type{
  border-top:0 !important;
}
.modal-backdrop[data-overlay="settings"] .settings-group h3{
  margin-bottom:11px !important;
  color:color-mix(in srgb,var(--accent-2) 84%,white 16%) !important;
  font-size:.72rem !important;
  letter-spacing:.15em !important;
}
.modal-backdrop[data-overlay="settings"] .language-grid{
  gap:10px;
}
.modal-backdrop[data-overlay="settings"] .language-option{
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  color:var(--text);
  background:linear-gradient(155deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border:1px solid color-mix(in srgb,var(--accent-2) 10%,var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .22s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.modal-backdrop[data-overlay="settings"] .language-option:hover,
.modal-backdrop[data-overlay="settings"] .language-option:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent-2) 32%,transparent);
  box-shadow:0 8px 20px rgba(0,0,0,.16),0 0 16px color-mix(in srgb,var(--glow) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.06);
}
.modal-backdrop[data-overlay="settings"] .language-option.selected{
  color:var(--text);
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 23%,rgba(255,255,255,.055)),color-mix(in srgb,var(--accent-2) 9%,rgba(255,255,255,.025)));
  border-color:color-mix(in srgb,var(--accent-2) 48%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 12%,transparent),0 0 20px color-mix(in srgb,var(--glow) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
}
.modal-backdrop[data-overlay="settings"] .settings-row{
  min-height:52px;
  padding:6px 0 !important;
}
.modal-backdrop[data-overlay="settings"] .toggle{
  width:54px;
  height:31px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28);
  transition:background .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.modal-backdrop[data-overlay="settings"] .toggle span{
  width:23px;
  height:23px;
  background:linear-gradient(145deg,#fff,#d9d9e3);
  box-shadow:0 2px 8px rgba(0,0,0,.34);
}
.modal-backdrop[data-overlay="settings"] .toggle.on{
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent-2) 32%,var(--accent)));
  border-color:color-mix(in srgb,var(--accent-2) 38%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--glow) 58%,transparent),inset 0 1px 2px rgba(255,255,255,.08);
}
.modal-backdrop[data-overlay="settings"] .toggle.on span{
  transform:translateX(23px);
}
.modal-backdrop[data-overlay="settings"] .settings-group .secondary-btn,
.modal-backdrop[data-overlay="settings"] .settings-group .ghost-btn{
  width:100%;
  min-height:46px;
  border-radius:15px;
}
.modal-backdrop[data-overlay="settings"] .settings-group .secondary-btn{
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 11%,var(--surface-2)),color-mix(in srgb,var(--accent) 10%,var(--surface)));
  border-color:color-mix(in srgb,var(--accent-2) 26%,transparent);
  box-shadow:0 8px 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.05);
}
.modal-backdrop[data-overlay="settings"] .settings-group .ghost-btn{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
  color:color-mix(in srgb,var(--text) 82%,var(--accent-2) 18%);
}
.modal-backdrop[data-overlay="settings"] .settings-group .muted{
  margin:0;
  font-size:.76rem;
  line-height:1.45;
  color:color-mix(in srgb,var(--text-muted) 90%,var(--accent-2) 10%);
}
@keyframes settingsSheetIn{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* v3.1 — clean pack surfaces: remove iOS compositor rectangles */
.pack-card{
  isolation:isolate !important;
  contain:paint;
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb,var(--accent-2) 8%, transparent), transparent 31%),
    linear-gradient(160deg,rgba(91,19,49,.45),rgba(25,12,28,.88)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.pack-card::after{
  content:none !important;
  display:none !important;
}
.pack-card:hover,
.pack-card:focus-visible{
  box-shadow:
    0 17px 36px rgba(0,0,0,.29),
    0 0 0 1px color-mix(in srgb,var(--accent-2) 12%,transparent),
    0 0 20px color-mix(in srgb,var(--glow) 25%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* v3.2 — concise pack descriptions */
.pack-card .pack-copy{
  gap:5px !important;
  min-height:0;
}
.pack-card .pack-desc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  margin:0 auto !important;
  max-width:95%;
  min-height:2.15em;
  color:color-mix(in srgb,var(--text-muted) 88%,var(--accent-2) 12%) !important;
  font-size:.69rem !important;
  line-height:1.18 !important;
  text-align:center !important;
  opacity:.88;
}
@media (max-height:760px){
  .pack-card .pack-desc{
    font-size:.63rem !important;
    min-height:2.05em;
    line-height:1.14 !important;
  }
}

/* v3.2 — smoother startup transition */
.splash{
  opacity:1;
  transform:scale(1);
  transition:opacity .24s ease,transform .34s cubic-bezier(.22,.72,.2,1),filter .34s ease;
}
.splash.splash-exit{
  opacity:0;
  transform:scale(.985);
  filter:blur(2px);
}
#app.boot-prep > .app-root,
#app.boot-prep > .onboarding{
  opacity:0;
  transform:translateY(5px) scale(.994);
}
#app.boot-prep.boot-enter > .app-root,
#app.boot-prep.boot-enter > .onboarding{
  opacity:1;
  transform:none;
  transition:opacity .30s ease,transform .38s cubic-bezier(.22,.72,.2,1);
}

/* v3.3 — compact responsive layout for standard-size phones */
@media (max-width:430px){
  .shell{padding-left:10px !important;padding-right:10px !important}
  .section-hero{padding:2px 2px 5px !important}
  .section-hero h1{font-size:clamp(1.72rem,8vw,2.35rem) !important}
  .section-hero p{font-size:.80rem !important;line-height:1.30 !important;margin-top:5px !important}
  .pack-grid{gap:8px !important;padding:5px 2px 4px !important;grid-template-rows:repeat(2,minmax(0,1fr)) !important}
  .pack-card{padding:10px 9px 10px !important;border-radius:22px !important;gap:5px !important;grid-template-rows:auto minmax(0,1fr) auto !important}
  .pack-icon-wrap{height:60px !important}
  .pack-icon{width:52px !important;height:52px !important}
  .pack-copy{gap:3px !important;min-height:0 !important;justify-content:center !important}
  .pack-card h2{font-size:.91rem !important;line-height:1.08 !important;min-height:0 !important}
  .pack-card .pack-desc{font-size:.62rem !important;line-height:1.13 !important;min-height:0 !important;-webkit-line-clamp:2 !important}
  .pack-cta{width:min(88%,150px) !important;min-height:35px !important;padding:7px 10px !important;font-size:.68rem !important;margin-top:1px !important}
  .bottom-nav{width:min(calc(100% - 18px),560px) !important;height:66px !important;padding:6px !important}
  .nav-btn{min-height:50px !important}
  .nav-btn .icon-svg{width:28px !important;height:28px !important}

  .pack-screen.mock-card-screen{gap:8px !important}
  .question-card.paper-card{min-height:min(33dvh,270px) !important;max-height:min(37dvh,305px) !important;padding:18px 17px !important}
  .paper-card .card-text{font-size:clamp(1.16rem,5vw,1.55rem) !important;max-height:min(23dvh,176px) !important}
  .card-reminder{margin:0 5px !important;padding:9px 10px !important;grid-template-columns:27px 1fr !important;gap:8px !important}
  .drink-icon{width:23px !important;height:23px !important}
  .card-note p{font-size:.70rem !important;line-height:1.24 !important}
  .card-footer{padding-inline:5px !important}
  .card-next-btn{min-height:42px !important;font-size:.88rem !important}

  .players{gap:7px !important}
  .player-chip{padding:7px 8px !important;font-size:.68rem !important}
  .game-board{width:min(100%,calc(100dvh - 315px),390px) !important}
  .dice-area{gap:8px !important}
  .dice-actions{grid-template-columns:1fr 1fr !important;gap:7px !important}
  .dice-actions .primary-btn,.dice-actions .secondary-btn{min-height:42px !important;padding:0 8px !important;font-size:.72rem !important;line-height:1.08 !important}
  .orgasm-btn{white-space:normal !important}

  .bedroom-hub-body{gap:8px !important}
  .bedroom-hub-body p{font-size:.80rem !important;line-height:1.32 !important;margin:0 !important}
  .bedroom-hub .hero-actions{gap:7px !important}
  .bedroom-hub .hero-actions .primary-btn,.bedroom-hub .hero-actions .secondary-btn,.bedroom-hub .hero-actions .ghost-btn{min-height:42px !important;padding:0 12px !important;font-size:.76rem !important}
}

@media (max-width:400px) and (max-height:880px){
  .shell{padding-top:calc(68px + env(safe-area-inset-top)) !important;padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}
  .view{gap:7px !important}
  .section-hero{padding:0 2px 3px !important}
  .section-hero .eyebrow{font-size:.63rem !important;letter-spacing:.13em !important}
  .section-hero h1{font-size:clamp(1.52rem,7.6vw,2rem) !important;line-height:.98 !important}
  .section-hero p{font-size:.73rem !important;line-height:1.23 !important;margin-top:4px !important}
  .pack-grid{gap:7px !important;padding:4px 2px 3px !important}
  .pack-card{padding:8px 8px 8px !important;gap:4px !important;border-radius:20px !important}
  .pack-icon-wrap{height:50px !important}
  .pack-icon{width:44px !important;height:44px !important}
  .pack-card h2{font-size:.82rem !important;line-height:1.06 !important}
  .pack-card .pack-desc{font-size:.56rem !important;line-height:1.10 !important;-webkit-line-clamp:2 !important}
  .pack-cta{width:min(90%,142px) !important;min-height:32px !important;padding:6px 9px !important;font-size:.63rem !important}

  .pack-screen.mock-card-screen{gap:7px !important;padding-top:2px !important}
  .question-card.paper-card{min-height:min(31dvh,242px) !important;max-height:min(35dvh,278px) !important;padding:15px 15px !important}
  .paper-card .card-text{font-size:clamp(1.08rem,4.8vw,1.42rem) !important;max-height:min(21dvh,156px) !important}
  .card-reminder{padding:8px 9px !important}
  .card-note p{font-size:.66rem !important}
  .card-next-btn{min-height:40px !important;font-size:.84rem !important}

  .board-shell{gap:7px !important;padding:10px 7px 8px !important}
  .game-board{width:min(100%,calc(100dvh - 300px),375px) !important}
  .players{gap:6px !important}
  .player-chip{padding:6px 7px !important;font-size:.64rem !important}
  .dice-actions .primary-btn,.dice-actions .secondary-btn{min-height:39px !important;font-size:.68rem !important}
  .bottom-nav{height:62px !important;padding:5px !important;border-radius:22px !important}
  .nav-btn{min-height:47px !important}
  .nav-btn .icon-svg{width:26px !important;height:26px !important}
}

@media (max-width:360px){
  .dice-actions{grid-template-columns:1fr !important}
  .pack-card .pack-desc{-webkit-line-clamp:1 !important}
  .pack-icon-wrap{height:46px !important}
  .pack-icon{width:40px !important;height:40px !important}
}

@media (max-height:700px){
  .section-hero p{display:none !important}
  .pack-card .pack-desc{-webkit-line-clamp:1 !important}
  .pack-icon-wrap{height:42px !important}
  .pack-icon{width:38px !important;height:38px !important}
  .pack-cta{min-height:30px !important;padding:5px 8px !important}
  .question-card.paper-card{min-height:28dvh !important;max-height:32dvh !important}
  .card-reminder{padding:7px 8px !important}
}