:root{
  --bg:#061722;--bg2:#092539;--panel:#0b2234;--panel2:#0d2b42;--ink:#f7fbff;--muted:#a8bed0;
  --cyan:#32d9ff;--cyan2:#1594ff;--orange:#ffb33c;--orange2:#ff7a2f;--green:#3ce2a4;--red:#ff6b7f;
  --line:rgba(99,191,255,.22);--radius-xl:30px;--radius-lg:22px;--radius-md:15px;--shadow:0 24px 70px rgba(0,0,0,.34);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{min-height:100dvh;overflow-x:hidden}button{font:inherit;touch-action:manipulation}.is-hidden{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible{outline:4px solid rgba(50,217,255,.3);outline-offset:3px}.app-shell{min-height:100dvh;background:radial-gradient(circle at 8% 8%,rgba(255,126,47,.13),transparent 26rem),radial-gradient(circle at 92% 80%,rgba(50,217,255,.15),transparent 30rem),linear-gradient(145deg,#06141f,#082235 58%,#071a2a);position:relative;overflow-x:hidden;overflow-y:visible}.app-shell::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}.screen{min-height:100dvh}
/* splash */.splash-screen{display:grid;place-items:center;background:#06141f}.splash-picture{width:100%;height:100dvh}.splash-art{width:100%;height:100%;object-fit:contain;display:block}
/* header */.topbar{height:76px;padding:12px clamp(14px,2.5vw,32px);display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:8}.setup-topbar{max-width:1260px;margin:auto}.brand-logo{width:132px;height:auto}.icon-btn{width:48px;height:48px;border-radius:15px;border:1px solid rgba(112,194,255,.24);background:rgba(7,28,45,.82);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.15);transition:.18s ease}.icon-btn:hover{transform:translateY(-1px);border-color:rgba(50,217,255,.62);background:#0d314b}
/* setup */.setup-main{max-width:1190px;margin:18px auto 0;padding:0 clamp(14px,3vw,34px) 32px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);gap:26px}.setup-visual,.setup-card{min-height:620px;border:1px solid rgba(107,193,255,.19);border-radius:32px;box-shadow:var(--shadow);position:relative;overflow:hidden}.setup-visual{background:radial-gradient(circle at 50% 40%,rgba(39,214,255,.16),transparent 28%),radial-gradient(circle at 22% 76%,rgba(255,155,48,.16),transparent 27%),linear-gradient(145deg,#071d2d,#0c2c42 60%,#09243a);display:grid;place-items:center}.setup-visual::before,.setup-visual::after{content:"";position:absolute;border:2px solid rgba(50,217,255,.18);border-radius:50%;width:520px;height:170px;transform:rotate(-14deg)}.setup-visual::after{width:420px;height:130px;border-color:rgba(255,159,47,.17);transform:rotate(22deg)}.hero-board{width:min(70%,420px);aspect-ratio:1;border-radius:32px;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:linear-gradient(145deg,#8d5128,#4f2e1c);border:5px solid #c47738;box-shadow:0 30px 60px rgba(0,0,0,.34),inset 0 0 0 2px rgba(255,224,163,.16);position:relative;z-index:2;transform:perspective(900px) rotateX(6deg) rotateY(-5deg)}.hero-board i{display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#182a38,#091721);box-shadow:inset 0 0 0 2px rgba(255,255,255,.04),inset 0 -12px 24px rgba(0,0,0,.22);font-style:normal;font-size:clamp(42px,6vw,74px);font-weight:1000}.hero-board .x{color:var(--orange);text-shadow:0 0 14px #ff9d32,0 5px 0 #a9541d}.hero-board .o{color:var(--cyan);text-shadow:0 0 14px #29d8ff,0 5px 0 #087db6}.floating-piece{position:absolute;z-index:3;font-size:82px;font-weight:1000;filter:drop-shadow(0 16px 22px rgba(0,0,0,.25));animation:float 3s ease-in-out infinite}.fp-x{left:8%;top:12%;color:var(--orange);transform:rotate(-12deg)}.fp-o{right:8%;bottom:18%;color:var(--cyan);animation-delay:-1.4s}.hero-caption{position:absolute;left:36px;bottom:34px;color:#d7e7f1;font-size:17px;line-height:1.45;z-index:3}.hero-caption strong{color:#fff}.setup-card{background:linear-gradient(180deg,rgba(11,34,52,.97),rgba(7,24,39,.98));padding:clamp(28px,3.7vw,48px);display:flex;flex-direction:column;justify-content:center}.eyebrow{margin:0 0 8px;color:#78e6ff;font-size:11px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}.setup-card h1{margin:0;font-size:clamp(42px,5vw,64px);line-height:.98;letter-spacing:-.05em;background:linear-gradient(180deg,#fff8db,#ffc95b 46%,#ff8b36);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(85,43,8,.28))}.subtitle{margin:17px 0 24px;color:#bed0dd;line-height:1.55;font-size:16px}.choice-group{border:0;padding:0;margin:0 0 16px}.choice-group legend{font-size:12px;font-weight:900;color:#ecf6fb;margin-bottom:8px}.segmented{display:grid;gap:9px}.segmented.two{grid-template-columns:1fr 1fr}.segmented.three{grid-template-columns:repeat(3,1fr)}.segment{min-height:68px;border:1px solid rgba(101,182,234,.22);border-radius:15px;background:#0d2b42;color:#dcebf3;padding:10px 12px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;align-items:center;transition:.17s ease}.segment>span{grid-row:1/3;font-size:20px;color:#88eaff}.segment b{font-size:14px}.segment small{color:#89a7ba;font-size:10px}.segment:hover{border-color:rgba(50,217,255,.5);background:#10354e}.segment.is-selected{border-color:#2bdcff;background:linear-gradient(180deg,#0e4159,#0d344c);box-shadow:0 0 0 2px rgba(50,217,255,.08),0 8px 24px rgba(21,160,210,.12)}.compact .segment{min-height:48px;display:grid;place-items:center;text-align:center;padding:0}.symbol-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}.symbol-choice{height:66px;border-radius:16px;border:1px solid rgba(103,183,234,.22);background:#0b2a40;font-size:36px;font-weight:1000;cursor:pointer;transition:.17s ease}.x-choice{color:var(--orange)}.o-choice{color:var(--cyan)}.symbol-choice.is-selected{border-color:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent),0 0 24px color-mix(in srgb,currentColor 18%,transparent);background:#102f43}.setup-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:4px}.primary-btn,.secondary-btn,.ghost-btn{min-height:54px;border-radius:16px;padding:0 20px;font-weight:900;cursor:pointer;transition:.17s ease}.primary-btn{border:0;background:linear-gradient(135deg,#ffd969,#ffad38 55%,#ff7c34);color:#251608;box-shadow:0 13px 30px rgba(255,151,50,.18)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(255,151,50,.25)}.secondary-btn{border:1px solid rgba(100,186,239,.24);background:#0d2d46;color:#ecf8ff}.secondary-btn:hover,.ghost-btn:hover{border-color:rgba(50,217,255,.5);background:#113a57}.ghost-btn{border:1px solid rgba(100,186,239,.18);background:rgba(8,31,49,.66);color:#aecdde}.stats-strip{margin-top:19px;border-top:1px solid rgba(106,185,235,.14);padding-top:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats-strip div{display:grid;gap:2px}.stats-strip strong{font-size:21px}.stats-strip span{font-size:10px;color:#85a2b5}
/* game */.game-topbar{position:sticky;top:0;background:rgba(5,20,31,.75);backdrop-filter:blur(13px);border-bottom:1px solid rgba(104,191,245,.13)}.game-brand{display:flex;align-items:center;gap:10px;min-width:0}.game-brand img{width:60px}.game-brand>div{display:grid;gap:2px}.game-brand strong{font-size:17px}.game-brand small{font-size:10px;color:#79e7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.top-actions{display:flex;gap:8px}.game-main{max-width:720px;margin:18px auto 0;padding:0 clamp(12px,2.2vw,26px) 22px;display:flex;flex-direction:column;gap:14px;align-items:stretch}.board-column{min-width:0}.scorebar{display:flex;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:10px;margin-bottom:12px;padding-right:calc(var(--nb-gs-safe,60px) + 12px);max-width:100%;box-sizing:border-box}.score-card{flex:0 1 auto;min-width:0;min-height:72px;border:1px solid rgba(96,187,241,.18);border-radius:18px;background:linear-gradient(180deg,#0d2a42,#091f33);display:flex;align-items:center;justify-content:flex-start;gap:11px;padding:10px 14px;transition:.18s ease;box-shadow:0 10px 28px rgba(0,0,0,.12)}.score-card.active{border-color:rgba(50,217,255,.5);box-shadow:0 0 0 2px rgba(50,217,255,.06),0 10px 28px rgba(0,0,0,.14)}.score-card>span:not(.mini-symbol){color:#d9b55f}.score-card div{display:grid;gap:1px}.score-card small{font-size:10px;color:#8ea9ba}.score-card strong{font-size:26px;line-height:1}.mini-symbol{font-size:31px;font-weight:1000}.x-mini{color:var(--orange);text-shadow:0 0 10px rgba(255,169,48,.45)}.o-mini{color:var(--cyan);text-shadow:0 0 10px rgba(50,217,255,.45)}.turn-pill{height:50px;border:1px solid rgba(89,183,239,.2);border-radius:16px;background:rgba(8,31,49,.86);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.turn-mark{font-size:23px;font-weight:1000}.turn-pill strong{font-size:14px}.thinking-dots{display:flex;gap:4px;margin-left:2px}.thinking-dots b{width:5px;height:5px;border-radius:50%;background:#7de7ff;animation:dots 1s ease-in-out infinite}.thinking-dots b:nth-child(2){animation-delay:.14s}.thinking-dots b:nth-child(3){animation-delay:.28s}.board-shell{display:grid;place-items:center;border-radius:30px;padding:clamp(10px,1.7vw,18px);background:linear-gradient(145deg,#8d5129,#5d351f);border:4px solid #c87a3b;box-shadow:0 28px 60px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,225,170,.12)}.board{width:min(100%,640px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(7px,1.2vw,12px);position:relative}.cell{border:1px solid rgba(108,186,233,.16);border-radius:clamp(13px,2vw,22px);background:linear-gradient(145deg,#102c3d,#071921 62%);box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -16px 28px rgba(0,0,0,.22),0 7px 15px rgba(0,0,0,.18);cursor:pointer;position:relative;display:grid;place-items:center;overflow:hidden;transition:transform .13s ease,border-color .18s ease,background .18s ease}.cell:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(50,217,255,.4);background:linear-gradient(145deg,#153b50,#092231)}.cell:active:not(:disabled){transform:scale(.97)}.cell:disabled{cursor:default}.cell::before{font-size:clamp(58px,10vw,118px);line-height:1;font-weight:1000;opacity:0;transform:scale(.74) rotate(-8deg);transition:.16s ease}.board[data-preview="X"] .cell:not(.filled):hover::after,.board[data-preview="O"] .cell:not(.filled):hover::after{position:absolute;font-size:clamp(48px,8vw,92px);font-weight:1000;opacity:.14}.board[data-preview="X"] .cell:not(.filled):hover::after{content:"X";color:var(--orange)}.board[data-preview="O"] .cell:not(.filled):hover::after{content:"O";color:var(--cyan)}.cell.x::before{content:"X";color:var(--orange);text-shadow:0 0 15px rgba(255,164,42,.72),0 7px 0 #a8521c;opacity:1;animation:pieceIn .24s cubic-bezier(.2,.9,.2,1) forwards}.cell.o::before{content:"O";color:var(--cyan);text-shadow:0 0 15px rgba(50,217,255,.72),0 7px 0 #087caf;opacity:1;animation:pieceIn .24s cubic-bezier(.2,.9,.2,1) forwards}.cell.winner{border-color:#ffe185;background:linear-gradient(145deg,#193b43,#0b2831);box-shadow:inset 0 0 26px rgba(255,210,86,.14),0 0 24px rgba(255,203,71,.22)}.cell.winner::before{filter:brightness(1.17);animation:winnerPulse .75s ease-in-out infinite alternate}.win-line{position:absolute;height:8px;border-radius:99px;background:linear-gradient(90deg,#fff1a4,#ffb63f);box-shadow:0 0 18px rgba(255,191,62,.68);transform-origin:center;z-index:6;pointer-events:none}.keyboard-tip{text-align:center;color:#7897aa;font-size:10px;margin:10px 0 0}.keyboard-tip strong{color:#b9d6e5}.side-panel{display:grid;gap:14px}.side-card{border:1px solid rgba(102,191,246,.17);border-radius:24px;background:linear-gradient(180deg,rgba(13,42,65,.96),rgba(8,28,44,.96));box-shadow:0 18px 48px rgba(0,0,0,.19)}.round-card{padding:26px}.round-card h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.04em}.round-card>p:not(.eyebrow){color:#a9bfcd;line-height:1.55;font-size:13px;margin:0}.round-info{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.round-info div{background:#0a263b;border-radius:14px;padding:11px;display:grid;gap:2px}.round-info span{font-size:9px;color:#7f9eb0;text-transform:uppercase;letter-spacing:.06em}.round-info strong{font-size:13px}.streak-card{padding:18px;display:flex;align-items:center;gap:14px}.streak-icon{width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#ffc95c,#ff8734);color:#2b1808;display:grid;place-items:center;font-size:24px}.streak-card>div:last-child{display:grid;gap:1px}.streak-card span{font-size:10px;color:#8fa9ba}.streak-card strong{font-size:28px}.streak-card small{font-size:9px;color:#7191a3}.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.side-actions button{min-height:48px;font-size:12px}
/* modal */.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(3,13,20,.48);backdrop-filter:blur(3px)}.result-modal{background:rgba(3,13,20,.34);backdrop-filter:blur(1.5px)}.modal-card{width:min(92vw,560px);max-height:90dvh;overflow:auto;border-radius:28px;border:1px solid rgba(111,198,251,.25);background:linear-gradient(180deg,rgba(13,43,66,.98),rgba(7,25,40,.99));box-shadow:0 30px 90px rgba(0,0,0,.47);padding:30px;position:relative;animation:modalIn .22s cubic-bezier(.2,.85,.2,1)}.modal-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(111,198,251,.2);background:#0a2a42;color:#fff;font-size:24px;cursor:pointer}.tutorial-card h2,.result-card h2{margin:0 0 12px;font-size:clamp(28px,5vw,42px);letter-spacing:-.04em}.tutorial-steps{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:12px}.tutorial-steps li{display:grid;grid-template-columns:42px 1fr;gap:12px}.tutorial-steps li>span{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#2ddcff,#158eff);display:grid;place-items:center;color:#071926;font-weight:1000}.tutorial-steps strong{font-size:13px}.tutorial-steps p{margin:4px 0 0;color:#9db5c5;font-size:12px;line-height:1.45}.tutorial-ok{width:100%}.result-card{text-align:center;width:min(92vw,490px);overflow:hidden}.result-icon{width:68px;height:68px;margin:0 auto 13px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,#ffd65f,#ff8632);color:#2a1708;box-shadow:0 12px 28px rgba(255,150,45,.2)}.result-text{color:#a9bdca;line-height:1.5;margin:0 auto 18px;max-width:380px}.result-board-summary{display:flex;align-items:center;justify-content:center;gap:14px;background:#092a40;border:1px solid rgba(103,194,248,.18);border-radius:18px;padding:12px}.big-mark{font-size:36px;font-weight:1000}.result-board-summary strong{font-size:21px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:8px;height:14px;border-radius:2px;animation:confettiFall 1.5s ease-out forwards}
@keyframes float{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-10px) rotate(-6deg)}}@keyframes dots{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}@keyframes pieceIn{0%{opacity:0;transform:scale(.35) rotate(-16deg)}75%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}@keyframes winnerPulse{from{transform:scale(1)}to{transform:scale(1.06)}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(520px) rotate(520deg);opacity:0}}
/* tablet */@media(max-width:1050px){.setup-main{grid-template-columns:.9fr 1.1fr;gap:17px}.setup-visual,.setup-card{min-height:570px}.setup-card{padding:30px}.hero-board{width:78%}.game-main{gap:14px}.round-card{padding:20px}.board-shell{padding:12px}}
/* mobile */@media(max-width:720px){.topbar{height:66px;padding:8px 12px}.brand-logo{width:110px}.icon-btn{width:43px;height:43px;border-radius:13px}.setup-main{display:block;margin-top:5px;padding:0 11px 22px}.setup-visual{display:none}.setup-card{min-height:auto;padding:27px 18px;border-radius:25px}.setup-card h1{font-size:45px}.segmented.two{grid-template-columns:1fr}.setup-actions{grid-template-columns:1fr}.secondary-btn{min-height:50px}.game-brand img{width:46px}.game-brand strong{font-size:14px}.game-brand small{font-size:9px;max-width:40vw}.game-main{display:flex;flex-direction:column;margin-top:9px;padding:0 9px 14px;gap:10px}.board-column{width:100%}.scorebar{gap:5px;margin-bottom:7px;padding-right:calc(var(--nb-gs-safe,60px) + 8px)}.score-card{min-height:57px;border-radius:14px;padding:7px 10px;gap:7px}.score-card small{font-size:8px}.score-card strong{font-size:21px}.mini-symbol{font-size:24px}.turn-pill{height:43px;margin-bottom:7px;border-radius:13px}.turn-pill strong{font-size:12px}.board-shell{border-width:3px;padding:8px;border-radius:23px}.board{gap:6px}.cell{border-radius:14px}.keyboard-tip{display:none}.side-panel{width:100%;grid-template-columns:1fr}.round-card{padding:16px;border-radius:20px}.round-card h2{font-size:22px}.round-card>p:not(.eyebrow){font-size:12px}.round-info{margin-top:13px}.streak-card{padding:13px;border-radius:20px}.streak-icon{width:44px;height:44px}.side-actions{grid-template-columns:1fr 1fr}.modal{padding:11px}.modal-card{padding:25px 18px;border-radius:23px}.result-actions{grid-template-columns:1fr}.tutorial-steps li{grid-template-columns:38px 1fr}}
/* short landscape */@media(max-height:560px) and (orientation:landscape){.topbar{height:54px;padding:5px 10px}.game-topbar .icon-btn{width:38px;height:38px}.game-brand img{width:40px}.game-main{display:flex;flex-direction:column;margin-top:6px;padding:0 8px 8px;gap:8px}.scorebar{margin-bottom:5px;padding-right:calc(var(--nb-gs-safe,60px) + 8px)}.score-card{min-height:46px;border-radius:12px}.score-card strong{font-size:18px}.score-card small{font-size:8px}.mini-symbol{font-size:20px}.turn-pill{height:34px;margin-bottom:5px}.board-shell{padding:5px;border-radius:18px}.board{height:calc(100dvh - 150px);width:auto;max-width:100%;gap:5px}.cell{border-radius:10px}.keyboard-tip{display:none}.side-panel{gap:7px}.round-card{padding:12px}.round-card h2{font-size:19px;margin-bottom:6px}.round-card>p:not(.eyebrow){font-size:10px;line-height:1.35}.round-info{margin-top:8px;gap:5px}.round-info div{padding:7px}.streak-card{padding:9px}.streak-icon{width:38px;height:38px}.side-actions{gap:5px}.side-actions button{min-height:37px;padding:0 9px}.modal-card{max-height:92dvh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* scenario picker */
.theme-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-choice{min-height:64px;border-radius:16px;border:1px solid rgba(118,208,255,.2);background:linear-gradient(180deg,#112c46,#0a2134);color:#eefaff;padding:12px 13px;display:grid;gap:3px;align-content:center;text-align:left;cursor:pointer;transition:.16s ease;box-shadow:inset 0 1px rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.12)}
.theme-choice b{font-size:14px}.theme-choice small{font-size:11px;color:#8fb3c8}.theme-choice:hover{transform:translateY(-1px);border-color:rgba(54,217,255,.45)}
.theme-choice.is-selected{border-color:rgba(54,217,255,.7);box-shadow:inset 0 0 0 1px rgba(54,217,255,.32),0 0 26px rgba(54,217,255,.14);background:linear-gradient(180deg,#143955,#0c2740)}
.round-info-extended{grid-template-columns:repeat(3,1fr)}

/* board scenarios */
.board-shell,.cell,.win-line,.draw-cross i{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}
#app[data-theme="madeira"] .board-shell{
  background:
    repeating-linear-gradient(92deg,
      rgba(255,220,170,.09) 0 1px,
      transparent 1px 9px,
      rgba(70,32,10,.08) 9px 10px,
      transparent 10px 18px
    ),
    repeating-linear-gradient(0deg,
      rgba(40,18,6,.07) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(145deg,#b87842 0%,#8d5129 38%,#6a3a1c 72%,#4f2a14 100%);
  border:4px solid #c88745;
  box-shadow:0 28px 60px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,225,170,.18),inset 0 -18px 36px rgba(40,18,6,.28);
}
#app[data-theme="madeira"] .board-shell::before{
  background:
    radial-gradient(ellipse 80% 55% at 20% 18%,rgba(255,230,180,.2),transparent 55%),
    radial-gradient(ellipse 70% 50% at 82% 78%,rgba(60,28,10,.28),transparent 60%),
    repeating-linear-gradient(88deg,rgba(255,214,150,.06) 0 1px,transparent 1px 13px);
  opacity:1;
  filter:none;
  transform:none;
  border-radius:inherit;
}
#app[data-theme="madeira"] .cell{
  background:
    linear-gradient(160deg,rgba(255,230,190,.14),transparent 46%),
    linear-gradient(145deg,#8f5630,#5f3418 68%);
  border-color:rgba(70,35,14,.45);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.28),inset 0 -1px rgba(255,220,170,.16),0 6px 12px rgba(0,0,0,.16);
}
#app[data-theme="madeira"] .cell:hover:not(:disabled){
  background:
    linear-gradient(160deg,rgba(255,236,200,.22),transparent 46%),
    linear-gradient(145deg,#a46838,#6e3c1c 68%);
  border-color:rgba(210,150,80,.45);
}
#app[data-theme="madeira"] .cell.winner{
  border-color:#ffe185;
  background:linear-gradient(145deg,#b67842,#7a4520);
  box-shadow:inset 0 0 26px rgba(255,210,86,.18),0 0 24px rgba(255,203,71,.18);
}
#app[data-theme="madeira"] .win-line{background:linear-gradient(90deg,#fff1a4,#ffb63f);box-shadow:0 0 18px rgba(255,191,62,.55)}

#app[data-theme="papel"] .board-shell{background:linear-gradient(180deg,#f7f3e7,#ece2c8);border:4px solid #d4c29a;box-shadow:0 24px 48px rgba(0,0,0,.2),inset 0 0 0 2px rgba(255,255,255,.4);position:relative}
#app[data-theme="papel"] .board-shell::before{content:"";position:absolute;inset:0;border-radius:26px;background:repeating-linear-gradient(180deg,rgba(80,138,205,.1) 0 1px,transparent 1px 38px),linear-gradient(90deg,transparent 0 10%,rgba(229,109,109,.16) 10% 11%,transparent 11%);pointer-events:none}
#app[data-theme="papel"] .board{z-index:1}
#app[data-theme="papel"] .cell{background:rgba(255,250,240,.72);border-color:rgba(123,112,89,.18);box-shadow:inset 0 1px rgba(255,255,255,.7),inset 0 -10px 16px rgba(0,0,0,.06),0 5px 10px rgba(0,0,0,.06)}
#app[data-theme="papel"] .cell:hover:not(:disabled){background:rgba(255,255,250,.92);border-color:rgba(74,140,201,.35)}
#app[data-theme="papel"] .cell.x::before{color:#f29c31;text-shadow:0 0 6px rgba(242,156,49,.28),0 3px 0 rgba(143,85,30,.26)}
#app[data-theme="papel"] .cell.o::before{color:#269ee1;text-shadow:0 0 6px rgba(38,158,225,.2),0 3px 0 rgba(24,92,145,.22)}
#app[data-theme="papel"] .win-line{background:linear-gradient(90deg,#4366a8,#6aaeff);height:7px;box-shadow:0 0 10px rgba(67,102,168,.28)}

#app[data-theme="lousa"] .board-shell{background:linear-gradient(145deg,#65442e,#3a2416);border:4px solid #8d603e;box-shadow:0 24px 52px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,236,204,.08)}
#app[data-theme="lousa"] .cell{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.06),transparent 36%),linear-gradient(145deg,#1b4b42,#102f29 62%);border-color:rgba(223,245,232,.15)}
#app[data-theme="lousa"] .cell:hover:not(:disabled){background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.08),transparent 36%),linear-gradient(145deg,#245c52,#123630 62%)}
#app[data-theme="lousa"] .cell.x::before,#app[data-theme="lousa"] .cell.o::before{text-shadow:0 0 8px rgba(255,255,255,.18),0 0 0 transparent;filter:saturate(.85)}
#app[data-theme="lousa"] .win-line{background:linear-gradient(90deg,#efffef,#9affda);box-shadow:0 0 12px rgba(154,255,218,.38)}

#app[data-theme="neon"] .board-shell{background:linear-gradient(145deg,#182f7e,#080f38 72%);border:4px solid #4bc7ff;box-shadow:0 0 0 2px rgba(75,199,255,.15),0 22px 60px rgba(0,0,0,.34),0 0 28px rgba(75,199,255,.24)}
#app[data-theme="neon"] .cell{background:radial-gradient(circle at 50% 35%,rgba(38,75,255,.15),transparent 38%),linear-gradient(145deg,#101f5b,#080e2c 65%);border-color:rgba(91,165,255,.28)}
#app[data-theme="neon"] .cell:hover:not(:disabled){background:radial-gradient(circle at 50% 35%,rgba(64,210,255,.17),transparent 40%),linear-gradient(145deg,#13266a,#0a1235 65%)}
#app[data-theme="neon"] .win-line{background:linear-gradient(90deg,#6ff0ff,#ff8cd1);box-shadow:0 0 18px rgba(111,240,255,.48)}

/* draw X effect — cobre o tabuleiro inteiro (canto a canto) */
.draw-cross{position:absolute;inset:0;z-index:7;pointer-events:none}
.draw-cross i{position:absolute;left:50%;top:50%;width:141.42%;height:clamp(12px,2.4vw,18px);border-radius:999px;opacity:.96;transform-origin:center;box-shadow:0 0 18px rgba(255,138,82,.22)}
.draw-cross i:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.draw-cross i:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.board.draw-finished .cell{filter:saturate(.86) brightness(.92)}
#app[data-theme="madeira"] .draw-cross i,#app[data-theme="neon"] .draw-cross i{background:linear-gradient(90deg,#ffdc72,#ff7c48)}
#app[data-theme="papel"] .draw-cross i{height:clamp(10px,2vw,14px);background:linear-gradient(90deg,#9f9f9f,#5c5c5c);box-shadow:none;opacity:.9;border-radius:7px}
#app[data-theme="papel"] .draw-cross i:first-child{transform:translate(-50%,-50%) rotate(45deg)}
#app[data-theme="papel"] .draw-cross i:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
#app[data-theme="lousa"] .draw-cross i{background:linear-gradient(90deg,#f2fff7,#c8ffe1);box-shadow:0 0 12px rgba(201,255,226,.25)}
.result-icon{font-weight:1000}
.big-mark.draw-mark{font-size:42px;color:#ffd56a;text-shadow:0 0 14px rgba(255,213,106,.4)}

/* responsive tweaks for scenario picker */
@media(max-width:720px){.theme-picker{grid-template-columns:1fr 1fr}.theme-choice{min-height:58px;padding:10px 11px}.theme-choice b{font-size:13px}.theme-choice small{font-size:10px}.round-info-extended{grid-template-columns:1fr 1fr}.round-info-extended div:last-child{grid-column:1/-1}}
@media(max-width:420px){.theme-picker{grid-template-columns:1fr}.draw-cross i{height:10px}}
@media(max-height:560px) and (orientation:landscape){.theme-picker{grid-template-columns:1fr 1fr}.theme-choice{min-height:54px;padding:8px 10px}.theme-choice b{font-size:12px}.theme-choice small{font-size:10px}}


/* ===== Adoção das novas capas aprovadas (abertura + estética) ===== */
.setup-screen,.game-screen{position:relative;isolation:isolate}
.setup-screen::before,.game-screen::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:url('../assets/catalogo/jogo-da-velha-desktop.webp') center/cover no-repeat;
  filter:blur(18px) brightness(.28) saturate(1.02);
  transform:scale(1.05);
}
.setup-screen::after,.game-screen::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,183,58,.14), transparent 16rem),
    radial-gradient(circle at 82% 24%, rgba(55,208,255,.14), transparent 18rem),
    linear-gradient(180deg, rgba(5,18,39,.3), rgba(5,16,33,.7) 48%, rgba(6,17,34,.9));
}
.app-shell{background:linear-gradient(145deg,#041223,#071c36 54%,#05172b)}
.app-shell::before{opacity:.12;background-size:46px 46px}
.splash-screen{background:#051224}
.splash-art{object-position:center center}
.setup-topbar,.game-topbar{max-width:1280px;margin:auto}
.icon-btn{background:rgba(8,28,50,.84);border-color:rgba(109,196,255,.22);box-shadow:0 10px 28px rgba(0,0,0,.24)}
.icon-btn:hover{background:#11375d}
.setup-main{max-width:1240px}
.setup-visual{
  background:url('../assets/catalogo/jogo-da-velha-desktop.webp') center/cover no-repeat;
  border-color:rgba(92,198,255,.24);
  box-shadow:0 26px 66px rgba(0,0,0,.32);
}
.setup-visual::before,.setup-visual::after,.setup-visual > *{display:none !important}
.setup-card{
  background:linear-gradient(180deg,rgba(8,30,54,.9),rgba(7,24,42,.95));
  border-color:rgba(98,194,255,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
}
.setup-card h1,.game-brand strong{
  text-shadow:0 4px 18px rgba(0,0,0,.18);
}
.segment,.symbol-choice,.theme-choice,.secondary-btn,.ghost-btn{
  background:linear-gradient(180deg,#0f3150,#0b2740);
}
.primary-btn{
  box-shadow:0 14px 32px rgba(255,168,51,.24), inset 0 1px rgba(255,255,255,.24);
}
.game-topbar{background:rgba(5,22,42,.72);border-bottom:1px solid rgba(110,195,255,.14)}
.game-main{max-width:720px}
.score-card,.turn-pill,.side-card{
  background:linear-gradient(180deg,rgba(10,34,58,.92),rgba(7,24,40,.96));
  border-color:rgba(96,190,244,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.03);
}
.score-card.active,.turn-pill{box-shadow:0 0 0 1px rgba(50,217,255,.1),0 14px 34px rgba(0,0,0,.2)}
.board-shell{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#153a88,#09143a 75%);
  border:4px solid #36cfff;
  box-shadow:0 0 0 2px rgba(54,207,255,.12),0 26px 64px rgba(0,0,0,.35),0 0 34px rgba(54,207,255,.18);
}
.board-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../assets/catalogo/jogo-da-velha-tablet.webp') center/cover no-repeat;
  opacity:.10;
  filter:blur(8px) saturate(1.05);
  transform:scale(1.03);
  pointer-events:none;
}
.board{position:relative;z-index:1}
.cell{
  border:1px solid rgba(106,177,255,.28);
  background:linear-gradient(145deg,#12235f,#0a1435 68%);
  box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -16px 28px rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.18);
}
.cell:hover:not(:disabled){background:linear-gradient(145deg,#17307e,#0b1843 68%);border-color:rgba(82,219,255,.48)}
.cell.x::before{color:#ffca50;text-shadow:0 0 16px rgba(255,179,41,.72),0 7px 0 #b85a1f}
.cell.o::before{color:#3fd2ff;text-shadow:0 0 16px rgba(63,210,255,.65),0 7px 0 #0d6cb7}
.cell.winner{border-color:#ffe482;background:linear-gradient(145deg,#1b2a67,#111f4f);box-shadow:inset 0 0 24px rgba(255,213,86,.14),0 0 24px rgba(255,193,74,.2)}
#app[data-theme="neon"] .board-shell{
  background:linear-gradient(145deg,#153a88,#09143a 75%);
  border:4px solid #36cfff;
  box-shadow:0 0 0 2px rgba(54,207,255,.12),0 26px 64px rgba(0,0,0,.35),0 0 34px rgba(54,207,255,.18);
}
#app[data-theme="neon"] .cell{
  background:linear-gradient(145deg,#12235f,#0a1435 68%);
  border-color:rgba(106,177,255,.28);
}
#app[data-theme="neon"] .cell:hover:not(:disabled){background:linear-gradient(145deg,#17307e,#0b1843 68%);border-color:rgba(82,219,255,.48)}
#app[data-theme="neon"] .win-line{background:linear-gradient(90deg,#fff09d,#ffb43c);box-shadow:0 0 18px rgba(255,191,62,.68)}

/* madeira precisa vencer o shell azul genérico da capa */
#app[data-theme="madeira"] .board-shell{
  background:
    repeating-linear-gradient(92deg,
      rgba(255,220,170,.09) 0 1px,
      transparent 1px 9px,
      rgba(70,32,10,.08) 9px 10px,
      transparent 10px 18px
    ),
    repeating-linear-gradient(0deg,
      rgba(40,18,6,.07) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(145deg,#b87842 0%,#8d5129 38%,#6a3a1c 72%,#4f2a14 100%);
  border:4px solid #c88745;
  box-shadow:0 28px 60px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,225,170,.18),inset 0 -18px 36px rgba(40,18,6,.28);
}
#app[data-theme="madeira"] .board-shell::before{
  background:
    radial-gradient(ellipse 80% 55% at 20% 18%,rgba(255,230,180,.2),transparent 55%),
    radial-gradient(ellipse 70% 50% at 82% 78%,rgba(60,28,10,.28),transparent 60%),
    repeating-linear-gradient(88deg,rgba(255,214,150,.06) 0 1px,transparent 1px 13px);
  opacity:1;
  filter:none;
  transform:none;
}
#app[data-theme="madeira"] .cell{
  background:
    linear-gradient(160deg,rgba(255,230,190,.14),transparent 46%),
    linear-gradient(145deg,#8f5630,#5f3418 68%);
  border-color:rgba(70,35,14,.45);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.28),inset 0 -1px rgba(255,220,170,.16),0 6px 12px rgba(0,0,0,.16);
}
#app[data-theme="madeira"] .cell:hover:not(:disabled){
  background:
    linear-gradient(160deg,rgba(255,236,200,.22),transparent 46%),
    linear-gradient(145deg,#a46838,#6e3c1c 68%);
  border-color:rgba(210,150,80,.45);
}
#app[data-theme="madeira"] .win-line{background:linear-gradient(90deg,#fff1a4,#ffb63f);box-shadow:0 0 18px rgba(255,191,62,.55)}
.round-card h2{font-size:clamp(26px,2.5vw,36px)}
.streak-icon{background:linear-gradient(145deg,#ffd76b,#ff8b35)}
.result-card{
  background:linear-gradient(180deg,rgba(11,37,67,.95),rgba(7,24,41,.98));
  border:1px solid rgba(103,191,245,.18);
  box-shadow:0 28px 80px rgba(0,0,0,.34), 0 0 40px rgba(54,207,255,.14);
}
@media(max-width:1100px){
  .setup-screen::before,.game-screen::before{background-image:url('../assets/catalogo/jogo-da-velha-tablet.webp')}
  .setup-visual{background-image:url('../assets/catalogo/jogo-da-velha-tablet.webp')}
  .board-shell::before{background-image:url('../assets/catalogo/jogo-da-velha-tablet.webp')}
}
@media(max-width:720px){
  .setup-screen::before,.game-screen::before{background-image:url('../assets/catalogo/jogo-da-velha-mobile.webp');filter:blur(12px) brightness(.31) saturate(1.02)}
  .board-shell::before{background-image:url('../assets/catalogo/jogo-da-velha-mobile.webp');opacity:.08}
  .setup-card{padding:24px 16px}
  .board-shell{border-width:3px;box-shadow:0 0 0 1px rgba(54,207,255,.12),0 22px 48px rgba(0,0,0,.3),0 0 26px rgba(54,207,255,.16)}
}

/* ===== Setup premium (tela clara) — não altera catálogo nem tela de partida ===== */
.setup-screen{
  --setup-ink:#1f3a52;
  --setup-muted:#5d7790;
  --setup-card:rgba(255,252,246,.9);
  --setup-card-border:rgba(255,255,255,.72);
  --setup-cyan:#19b7ff;
  --setup-cyan-soft:rgba(25,183,255,.12);
  --setup-x:#ff5a3d;
  --setup-o:#1aa7e8;
  --setup-radius:22px;
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
  color:var(--setup-ink);
  background:transparent;
  padding:
    max(4px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow-x:hidden;
}
.setup-screen::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    url("../assets/ui-premium/fundos/fundo-horizontal-16x9.webp") center/cover no-repeat;
  filter:none;
  transform:none;
}
.setup-screen::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(180,226,255,.18), rgba(255,255,255,.08) 42%, rgba(120,190,120,.12));
}
.setup-foliage{
  position:fixed;
  left:0;right:0;bottom:0;
  height:min(18vh,140px);
  pointer-events:none;
  z-index:0;
  background:url("../assets/ui-premium/fundos/folhagem-rodape-transparente.webp") center bottom/cover no-repeat;
  opacity:.55;
}
.setup-main{
  position:relative;
  z-index:1;
  max-width:860px;
  margin:0 auto;
  padding:0 0 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  grid-template-columns:none;
}
.setup-hero{
  text-align:center;
  width:100vw;
  max-width:100vw;
  margin:0 0 -6px;
  margin-left:calc(50% - 50vw);
  padding:
    max(0px, env(safe-area-inset-top, 0px))
    calc(var(--nb-gs-safe, 60px) + max(8px, env(safe-area-inset-right, 0px)))
    0
    calc(var(--nb-gs-safe, 60px) + max(8px, env(safe-area-inset-left, 0px)));
  display:grid;
  gap:0;
  justify-items:center;
  box-sizing:border-box;
}
.setup-logo-wrap{
  margin:0;
  line-height:0;
  width:100%;
  max-width:100%;
  display:flex;
  justify-content:center;
}
.setup-logo{
  width:100%;
  max-width:100%;
  height:auto;
  max-height:clamp(210px, 38vh, 340px);
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 14px 26px rgba(20,60,90,.32));
}
.setup-card{
  min-height:auto;
  background:var(--setup-card);
  border:1px solid var(--setup-card-border);
  border-radius:28px;
  box-shadow:0 18px 40px rgba(28,70,100,.14), inset 0 1px rgba(255,255,255,.75);
  padding:clamp(16px,3vw,26px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.setup-screen .choice-group{margin:0 0 14px}
.setup-screen .choice-group legend{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  color:var(--setup-ink);
  font-size:13px;
  font-weight:900;
}
.setup-screen .choice-group legend img{
  width:22px;height:22px;object-fit:contain;flex:0 0 auto;
}
.setup-screen .segmented{gap:10px}
.setup-screen .segmented.two{grid-template-columns:1fr 1fr}
.setup-screen .segmented.three{grid-template-columns:repeat(3,1fr)}
.setup-screen .segment{
  min-height:56px;
  border:2px solid rgba(80,130,170,.16);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  color:var(--setup-ink);
  padding:10px 12px;
  box-shadow:0 6px 14px rgba(30,70,100,.06);
  grid-template-columns:auto 1fr;
  align-items:center;
  align-content:center;
}
.setup-screen .segment .seg-ico{
  grid-row:auto;
  width:34px;height:34px;
  border-radius:11px;
  display:grid;place-items:center;
  background:rgba(25,183,255,.12);
  color:#1288c8;
}
.setup-screen .segment b{font-size:15px;font-weight:900}
.setup-screen .segment:hover{
  transform:translateY(-1px);
  border-color:rgba(25,183,255,.45);
  background:#fff;
}
.setup-screen .segment:active{transform:scale(.99)}
.setup-screen .segment.is-selected{
  border-color:var(--setup-cyan);
  background:linear-gradient(180deg,#eef9ff,#e4f5ff);
  box-shadow:0 0 0 3px rgba(25,183,255,.14), 0 10px 22px rgba(25,183,255,.12);
}
.setup-screen .compact .segment{
  min-height:46px;
  display:grid;
  place-items:center;
  grid-template-columns:1fr;
  text-align:center;
  padding:0 8px;
}
.setup-screen .symbol-picker{gap:12px}
.setup-screen .symbol-choice{
  height:78px;
  min-height:44px;
  border-radius:18px;
  border:2px solid rgba(80,130,170,.16);
  background:rgba(255,255,255,.82);
  display:grid;place-items:center;
  box-shadow:0 8px 18px rgba(30,70,100,.07);
  padding:8px;
}
.setup-screen .symbol-choice img{
  width:56px;height:56px;object-fit:contain;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));
  pointer-events:none;
}
.setup-screen .symbol-choice:hover{transform:translateY(-1px)}
.setup-screen .x-choice.is-selected{
  border-color:var(--setup-x);
  background:linear-gradient(180deg,#fff4f1,#ffe8e2);
  box-shadow:0 0 0 3px rgba(255,90,61,.14), 0 10px 22px rgba(255,90,61,.14);
}
.setup-screen .o-choice.is-selected{
  border-color:var(--setup-o);
  background:linear-gradient(180deg,#eef9ff,#e2f4fc);
  box-shadow:0 0 0 3px rgba(26,167,232,.14), 0 10px 22px rgba(26,167,232,.14);
}
.setup-screen .theme-picker{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.setup-screen .theme-choice{
  min-height:0;
  padding:0;
  overflow:hidden;
  border-radius:16px;
  border:2px solid rgba(80,130,170,.16);
  background:rgba(255,255,255,.86);
  display:grid;
  grid-template-rows:auto auto;
  gap:0;
  text-align:left;
  box-shadow:0 8px 16px rgba(30,70,100,.07);
}
.setup-screen .theme-thumb{
  width:100%;
  height:64px;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#d9e8f2;
}
.setup-screen .theme-copy{
  display:grid;
  gap:1px;
  padding:8px 10px 10px;
}
.setup-screen .theme-choice b{font-size:13px;color:var(--setup-ink);font-weight:900}
.setup-screen .theme-choice small{font-size:10px;color:var(--setup-muted);font-weight:700}
.setup-screen .theme-choice:hover{transform:translateY(-1px);border-color:rgba(25,183,255,.4)}
.setup-screen .theme-choice.is-selected{
  border-color:var(--setup-cyan);
  box-shadow:0 0 0 3px rgba(25,183,255,.14), 0 10px 22px rgba(25,183,255,.12);
  background:#fff;
}
.setup-screen .setup-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:2px;
}
.setup-screen .primary-btn{
  min-height:54px;
  border-radius:16px;
  border:0;
  background:linear-gradient(135deg,#ffe27a,#ffb13a 52%,#ff7d2f);
  color:#2a1608;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 14px 28px rgba(255,140,40,.28), inset 0 1px rgba(255,255,255,.45);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.setup-screen .primary-btn .play-ico{
  width:0;height:0;
  border-style:solid;
  border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #2a1608;
}
.setup-screen .primary-btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(255,140,40,.34)}
.setup-screen .primary-btn:active{transform:scale(.99)}
.setup-screen .secondary-btn.how-btn{
  min-height:46px;
  border-radius:14px;
  border:1.5px solid rgba(80,130,170,.22);
  background:rgba(255,255,255,.86);
  color:var(--setup-ink);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 6px 14px rgba(30,70,100,.06);
}
.setup-screen .secondary-btn.how-btn:hover{
  border-color:rgba(25,183,255,.45);
  background:#fff;
}
.setup-screen .info-ico{
  width:18px;height:18px;border-radius:50%;
  display:inline-grid;place-items:center;
  font-size:11px;font-weight:900;font-style:normal;
  background:#19b7ff;color:#fff;
}
.setup-screen .stats-strip{
  margin-top:12px;
  border-top:1px solid rgba(80,130,170,.14);
  padding-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.setup-screen .stats-strip > div{
  display:grid;
  justify-items:center;
  gap:2px;
  text-align:center;
}
.setup-screen .stats-strip img{width:22px;height:22px;object-fit:contain}
.setup-screen .stats-strip strong{font-size:20px;color:var(--setup-ink);line-height:1}
.setup-screen .stats-strip span{font-size:10px;color:var(--setup-muted);font-weight:700}
.setup-screen button:focus-visible{
  outline:3px solid rgba(25,183,255,.45);
  outline-offset:2px;
}

/* Mantém o fundo claro; engrenagem com a cor padrão dos outros jogos */
body:has(#setup:not(.is-hidden)) .app-shell{
  background:transparent;
}
body:has(#setup:not(.is-hidden)) .app-shell::before{
  opacity:0;
}

@media(max-width:720px){
  .setup-screen::before{
    background-image:url("../assets/ui-premium/fundos/fundo-mobile-9x16.webp");
    background-position:center top;
    filter:none;
    transform:none;
  }
  .setup-logo{max-height:clamp(220px, 40vh, 320px)}
  .setup-card{padding:16px 14px;border-radius:24px}
  .setup-screen .segment{min-height:52px;padding:9px 10px}
  .setup-screen .symbol-choice{height:70px}
  .setup-screen .symbol-choice img{width:50px;height:50px}
  .setup-screen .theme-thumb{height:56px}
  .setup-foliage{height:min(14vh,110px);opacity:.45}
}
@media(max-width:380px){
  .setup-logo{max-height:clamp(190px, 38vh, 260px)}
  .setup-screen .segment b{font-size:14px}
  .setup-screen .theme-thumb{height:50px}
}
@media(min-width:900px){
  .setup-main{max-width:880px;padding-top:4px}
  .setup-logo{max-height:clamp(240px, 34vh, 360px)}
  .setup-screen .theme-thumb{height:78px}
  .setup-screen .symbol-choice{height:88px}
}
@media(prefers-reduced-motion:reduce){
  .setup-screen .segment,
  .setup-screen .symbol-choice,
  .setup-screen .theme-choice,
  .setup-screen .primary-btn{
    transition:none;
  }
}