@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root { --purple:#7257ff; --purple-dark:#5139d7; --yellow:#ffcb45; --ink:#29244a; --muted:#706b8d; --panel:#fffdf9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Nunito",sans-serif; background:linear-gradient(180deg,#8fe6ff 0%,#d7f7ff 42%,#fff4cd 100%); overflow-x:hidden; }
button { font:inherit; }
button:focus-visible { outline:4px solid #1b9bd7; outline-offset:3px; }
.sky { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.cloud { position:absolute; width:150px; height:44px; border-radius:50px; background:rgba(255,255,255,.8); filter:drop-shadow(0 10px 15px rgba(45,113,160,.08)); animation:drift 18s linear infinite; }
.cloud:before,.cloud:after { content:""; position:absolute; background:inherit; border-radius:50%; }
.cloud:before { width:70px;height:70px;left:22px;bottom:4px; }.cloud:after{width:90px;height:90px;right:12px;bottom:0}.cloud-one{top:16%;left:-180px}.cloud-two{top:62%;left:-200px;animation-delay:-9s;transform:scale(.7)}
.star { position:absolute;color:#fff4a5;font-size:38px;animation:float 3s ease-in-out infinite}.star-one{top:12%;right:8%}.star-two{bottom:18%;left:8%;animation-delay:-1.3s}
.app-shell { position:relative; z-index:1; width:calc(100% - 40px); max-width:1440px; margin:0 auto; padding:24px 0 40px; }
.brand { display:flex;align-items:center;gap:14px;color:#412b86;margin:0 8px 18px}.brand h1{font-family:"Baloo 2";font-size:clamp(25px,4vw,38px);line-height:.9;margin:0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;margin:0 0 5px}.mascot{display:grid;place-items:center;width:62px;height:62px;border-radius:22px;background:#fff;border:4px solid #fff7c2;font-size:36px;transform:rotate(-5deg);box-shadow:0 8px 0 rgba(88,66,180,.15)}.brand .icon-button{margin-left:auto}
.panel { width:100%; background-color:rgba(250,247,237,.96); background-image:radial-gradient(circle at 18px 18px,rgba(114,87,255,.07) 0 3px,transparent 3.5px),linear-gradient(45deg,transparent 47%,rgba(83,197,169,.035) 47% 53%,transparent 53%),linear-gradient(-45deg,transparent 47%,rgba(255,183,71,.035) 47% 53%,transparent 53%); background-size:38px 38px,76px 76px,76px 76px; border:5px solid rgba(255,255,255,.72); border-radius:34px; box-shadow:0 22px 0 rgba(77,55,150,.12),0 30px 70px rgba(52,86,144,.18); padding:clamp(22px,3vw,42px); }
.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:24px;border-bottom:2px dashed #e7e1ff}.intro h2,.result-panel h2{font:800 clamp(29px,5vw,44px)/1.05 "Baloo 2";margin:9px 0 4px}.intro p,.result-panel p{margin:0;color:var(--muted);font-size:17px}.badge{display:inline-block;background:#efeaff;color:var(--purple-dark);border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1px}.number-orbit{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-width:155px;height:95px;border-radius:48% 52% 42% 58%;background:#fff0a9;color:#5a4096;font:800 30px "Baloo 2";transform:rotate(3deg)}.number-orbit b,.number-orbit i{display:grid;place-items:center;width:43px;height:43px;background:#fff;border-radius:15px;font-style:normal;box-shadow:0 5px 0 #e0c86b}.number-orbit span{color:#f47953}
.welcome-title{animation:welcomePop .55s cubic-bezier(.2,.9,.3,1.25)}
.player-mode-choices{grid-template-columns:repeat(3,1fr)}.cpu-choice strong img{transform:scale(1.12)}
.setup-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:24px;margin-top:26px}.choice-group{border:0;margin:0;padding:0}.choice-group:last-child{grid-column:1/-1}.choice-group legend{font:800 21px "Baloo 2";margin-bottom:10px}.choice-group legend span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--purple);color:white;margin-right:7px}.hint{font-size:13px;color:var(--muted);margin:-8px 0 10px 39px}.choice-row,.time-grid{display:grid;gap:11px}.two-cols{grid-template-columns:1fr 1fr}.choice-card,.operation,.time-grid button{border:3px solid #e9e5f6;background:white;border-radius:20px;color:var(--ink);cursor:pointer;transition:.18s ease;box-shadow:0 5px 0 #e7e1f2}.choice-card:hover,.operation:hover,.time-grid button:hover{transform:translateY(-3px)}.choice-card.selected,.operation.selected,.time-grid button.selected{border-color:var(--purple);background:#f2efff;box-shadow:0 5px 0 #b7a9ff}.choice-card{display:flex;flex-direction:column;align-items:center;padding:15px 8px}.choice-card strong{font-size:28px;height:38px}.choice-card span{font-weight:800}.choice-card small{color:var(--muted);font-size:11px}.operations{grid-template-columns:repeat(4,1fr)}.operation{padding:10px 5px}.operation b{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;margin:0 auto 5px;color:white;font:800 30px "Baloo 2"}.operation span{font-size:12px;font-weight:800}.add b{background:#45c88a}.subtract b{background:#ff806e}.multiply b{background:#ffb634}.divide b{background:#4aa8ef}.time-grid{grid-template-columns:repeat(4,1fr)}.time-grid button{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px}.time-grid b{font:800 25px "Baloo 2";color:var(--purple)}.time-grid span{font-size:12px;font-weight:800;color:var(--muted)}.error{height:14px;margin:4px 0 0;color:#db3d5b;font-size:12px;font-weight:800}
.primary-button{display:flex;align-items:center;justify-content:center;gap:12px;width:min(360px,100%);margin:29px auto 0;border:0;border-radius:18px;background:linear-gradient(135deg,#785cff,#5940da);color:white;padding:15px 22px;cursor:pointer;font:800 21px "Baloo 2";box-shadow:0 8px 0 #412aa6,0 12px 20px rgba(94,64,218,.28);transition:.15s}.primary-button:hover{transform:translateY(-3px);box-shadow:0 11px 0 #412aa6}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #412aa6}.primary-button b{font-size:26px}
.hidden{display:none!important}.icon-button{width:48px;height:48px;border:0;border-radius:16px;background:white;box-shadow:0 5px 0 rgba(80,53,150,.15);font-size:22px;cursor:pointer}.game-topbar{display:flex;align-items:center;gap:12px}.player-chip{display:flex;align-items:center;gap:10px;background:#f2efff;border-radius:18px;padding:8px 15px}.player-chip>span{font-size:29px}.player-chip small,.stat small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800}.player-chip b,.stat b{font:800 18px "Baloo 2"}.stat{margin-left:auto;background:#fff7d6;border-radius:18px;padding:7px 17px;text-align:center}.timer{margin-left:0;background:#eaf8ff}.progress-track{height:12px;background:#eeeaf7;border-radius:99px;margin:24px 0;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#5edb9d,#ffcf4b);border-radius:inherit;transition:width .3s}.question-area{text-align:center;min-height:390px;display:flex;flex-direction:column;justify-content:center}.question-area>p{color:var(--muted);font-weight:800}.question{font:800 clamp(54px,10vw,92px) "Baloo 2";letter-spacing:4px;color:#4b378d;text-shadow:0 6px 0 #e6dfff}.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(720px,100%);margin:18px auto}.answer{border:3px solid #ded7f4;border-radius:22px;background:white;padding:13px;cursor:pointer;font:800 30px "Baloo 2";color:var(--ink);box-shadow:0 7px 0 #d8d0eb;transition:.15s}.answer:hover{transform:translateY(-4px);border-color:#8f7bf3}.answer.correct{background:#dff9e9;border-color:#39bd79}.answer.wrong{background:#ffe4e5;border-color:#f06770;animation:shake .3s}.feedback{height:36px;font:800 23px "Baloo 2"}.feedback.good{color:#22a56a}.feedback.bad{color:#dc4b5c}
.result-panel{text-align:center}.trophy{font-size:85px;animation:bounce 1.2s ease-in-out infinite}.score-cards{display:flex;justify-content:center;gap:15px;margin:25px 0}.score-card{min-width:150px;border-radius:22px;background:#f2efff;padding:16px;border:3px solid #dcd3ff}.score-card b{display:block;font:800 32px "Baloo 2";color:var(--purple)}.result-actions{display:flex;flex-direction:column;align-items:center}.secondary-button{border:0;background:transparent;color:var(--purple-dark);font-weight:800;padding:16px;cursor:pointer}.confetti{position:fixed;inset:0;z-index:10;pointer-events:none}.confetti i{position:absolute;top:-20px;width:11px;height:20px;animation:confetti 1.4s ease-in forwards}
@keyframes welcomePop{0%{opacity:0;transform:translateY(10px) scale(.94)}70%{transform:translateY(-2px) scale(1.02)}100%{opacity:1;transform:none}}@keyframes drift{to{transform:translateX(calc(100vw + 400px))}}@keyframes float{50%{transform:translateY(-16px) rotate(12deg)}}@keyframes bounce{50%{transform:translateY(-10px) rotate(5deg)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes confetti{to{transform:translateY(110vh) rotate(800deg);opacity:.2}}
@media(max-width:720px){.app-shell{padding-top:14px}.brand{margin-bottom:12px}.mascot{width:50px;height:50px;font-size:29px}.panel{border-radius:26px;padding:20px}.number-orbit{display:none}.setup-grid{grid-template-columns:1fr}.choice-group:last-child{grid-column:auto}.operations,.time-grid{grid-template-columns:1fr 1fr}.choice-card small{display:none}.game-topbar{flex-wrap:wrap}.player-chip{flex:1}.stat{margin-left:0}.question-area{min-height:360px}.answers{grid-template-columns:1fr 1fr}.question{font-size:58px}.answer{font-size:25px}.score-cards{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Character and two-player arena */
.mascot{overflow:hidden;padding:0}.mascot img{width:78px;height:78px;object-fit:contain;object-position:center 18%}
.choice-card strong{height:64px}.choice-card strong img{width:70px;height:70px;object-fit:contain;object-position:center top;filter:drop-shadow(0 5px 5px rgba(64,45,120,.2))}.choice-card .duo-mini{display:flex;justify-content:center;width:100%}.choice-card .duo-mini img{width:58px;margin:0 -6px}.name-group{grid-column:1/-1}.name-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.name-grid label{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:#f7f4ff;border:3px solid #e5dfff;border-radius:20px;padding:9px 14px}.name-grid label img{grid-row:1/3;width:64px;height:64px;object-fit:contain}.name-grid label span{align-self:end;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.name-grid input{align-self:start;width:100%;border:0;border-bottom:3px solid #cfc3ff;background:transparent;color:var(--ink);font:800 22px "Baloo 2";padding:1px 3px;outline:0}.name-grid input:focus{border-color:var(--purple)}
.customizer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.player-customizer{min-width:0;background:rgba(255,255,255,.7);border:2px solid #e5def8;border-radius:20px;padding:13px}.player-customizer h4{margin:0 0 9px;font:800 17px "Baloo 2";color:var(--purple-dark)}.character-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.character-option{min-width:0;border:2px solid #e6e0f3;border-radius:15px;background:#fff;padding:4px 2px 6px;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 #e3ddec;transition:.16s}.character-option:hover{transform:translateY(-2px)}.character-option.selected{border-color:var(--purple);background:#f1edff;box-shadow:0 4px 0 #a998ff}.character-option.unavailable{opacity:.33;filter:grayscale(.7);cursor:not-allowed}.character-option img{display:block;width:100%;height:64px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(55,40,90,.18))}.character-option span{display:block;font-size:10px;font-weight:800}.hero-name{display:block;margin-top:11px}.hero-name span{display:block;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.hero-name input{width:100%;border:0;border-bottom:3px solid #cfc3ff;background:transparent;color:var(--ink);font:800 21px "Baloo 2";padding:2px 4px;outline:0}.hero-name input:focus{border-color:var(--purple)}
.game-panel{padding:22px;background:rgba(255,253,249,.97)}.turn-banner{display:flex;align-items:center;gap:9px;margin:auto;background:#fff;border:2px solid #e8e1ff;border-radius:99px;padding:8px 18px;color:var(--purple-dark)}.turn-dot{width:11px;height:11px;border-radius:50%;background:#4fd794;box-shadow:0 0 0 6px rgba(79,215,148,.18);animation:pulse 1s ease-in-out infinite}.duel-board{display:grid;grid-template-columns:1fr;min-height:520px;border-radius:26px;overflow:hidden;background:#edfbff;border:3px solid #cbedf8}.duel-board.two-player{grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#e9faff 0 50%,#fff0f4 50% 100%)}.player-lane{position:relative;min-width:0;padding:18px;transition:filter .25s,opacity .25s,transform .25s}.player-lane.player-two{border-left:4px dashed rgba(112,87,255,.2)}.player-lane:not(.active){filter:saturate(.65);opacity:.68}.player-lane.active{box-shadow:inset 0 0 0 5px rgba(114,87,255,.3)}.lane-head{display:flex;align-items:center;gap:10px}.lane-head img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 7px 6px rgba(53,45,91,.2));transition:transform .25s}.active .lane-head img{transform:scale(1.08) rotate(-3deg)}.player-two.active .lane-head img{transform:scale(1.08) rotate(3deg)}.lane-head small{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.lane-head h3{font:800 25px/1 "Baloo 2";margin:1px 0}.lane-head b{color:var(--purple-dark)}.lane-play-slot{min-height:360px;display:grid;place-items:center}.waiting{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font:800 18px "Baloo 2"}.waiting span{font-size:44px}.question-area{width:100%;min-height:340px}.question{font-size:clamp(42px,6vw,72px)}.duel-board.two-player .answers{grid-template-columns:1fr 1fr;max-width:420px}.duel-board.two-player .answer{font-size:25px;padding:10px}.duel-board.two-player .question-area>p{font-size:13px}.duel-board.two-player .feedback{font-size:19px}.score-card img{width:80px;height:80px;object-fit:contain;display:block;margin:-10px auto 2px}
.home-button{display:flex;align-items:center;gap:9px;min-height:52px;border:3px solid #dcd3ff;border-radius:18px;background:#fff;color:var(--purple-dark);padding:8px 15px;cursor:pointer;font-weight:800;box-shadow:0 6px 0 #d8cfef;transition:.15s}.home-button svg{width:30px;height:30px;fill:#eee9ff;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.home-button:hover{transform:translateY(-2px);border-color:var(--purple)}.home-button:active{transform:translateY(4px);box-shadow:0 2px 0 #d8cfef}.home-button span{font-size:13px}
.music-button{position:relative}.music-button.playing{animation:musicBeat .65s ease-in-out infinite;background:#fff5bd;box-shadow:0 5px 0 #dfc95f}.music-button.playing:after{content:"♪";position:absolute;margin:-38px 0 0 24px;color:#7257ff;font-size:18px;animation:noteFloat 1.3s ease-out infinite}
@keyframes pulse{50%{transform:scale(.7);opacity:.7}}@keyframes musicBeat{50%{transform:scale(1.08) rotate(3deg)}}@keyframes noteFloat{to{transform:translateY(-18px) rotate(12deg);opacity:0}}
@media(max-width:720px){.mascot img{width:64px;height:64px}.name-grid{grid-template-columns:1fr}.duel-board.two-player{grid-template-columns:1fr 1fr}.player-lane{padding:9px}.lane-head{display:block;text-align:center}.lane-head img{width:68px;height:68px}.lane-head h3{font-size:19px}.lane-play-slot{min-height:380px}.duel-board.two-player .question{font-size:34px;letter-spacing:1px}.duel-board.two-player .answers{gap:8px}.duel-board.two-player .answer{font-size:20px;padding:8px}.duel-board.two-player .question-area>p{font-size:11px;min-height:28px}.turn-banner{font-size:13px}.game-topbar .timer{padding:7px 10px}}
@media(max-width:520px){.home-button{width:54px;padding:8px;justify-content:center}.home-button span{display:none}}
.game-panel{background-color:rgba(250,247,237,.97);background-image:radial-gradient(circle at 18px 18px,rgba(114,87,255,.055) 0 3px,transparent 3.5px),linear-gradient(45deg,transparent 47%,rgba(83,197,169,.03) 47% 53%,transparent 53%),linear-gradient(-45deg,transparent 47%,rgba(255,183,71,.03) 47% 53%,transparent 53%);background-size:38px 38px,76px 76px,76px 76px}
@media(min-width:721px){
  .setup-panel{min-height:calc(100vh - 135px);display:flex;flex-direction:column}
  .setup-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 28px;flex:1;align-content:center}
  .setup-grid .choice-group,.setup-grid .choice-group:last-child,.setup-grid .name-group{grid-column:auto;min-width:0;background:linear-gradient(145deg,rgba(247,243,233,.78),rgba(255,253,247,.84));border:2px solid rgba(222,214,239,.8);border-radius:24px;padding:18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
  .name-grid{grid-template-columns:1fr}
  .two-cols,.operations,.time-grid{width:100%}
  .choice-card{min-height:122px;justify-content:center}
  .operation{min-height:102px}
  .time-grid button{min-height:102px;flex-direction:column}
  .setup-panel>.primary-button{flex:0 0 auto}
  .setup-grid .character-group{grid-column:1/-1}
  .setup-grid>.choice-group:first-child{grid-column:1/-1}
  .setup-grid>.choice-group:first-child .player-mode-choices{grid-template-columns:repeat(3,1fr)}
  .customizer-grid:has(#player2Customizer.hidden){grid-template-columns:1fr}
}
@media(max-width:720px){.customizer-grid{grid-template-columns:1fr}.character-picker{gap:5px}.character-option img{height:56px}.character-option span{font-size:9px}.character-group{grid-column:auto}}
@media(max-width:520px){.player-mode-choices{grid-template-columns:repeat(3,1fr);gap:6px}.player-mode-choices .choice-card{padding-inline:3px}.player-mode-choices .choice-card span{font-size:11px}.player-mode-choices .choice-card strong img{width:50px;height:50px}}
.character-picker{grid-template-columns:repeat(5,minmax(58px,88px));justify-content:center;overflow-x:auto;padding:2px 2px 7px}.character-option{width:100%;max-width:88px}.character-option img{width:100%;height:58px;object-fit:contain}.customizer-grid:has(#player2Customizer.hidden) .character-picker{justify-content:center}
.lane-head{position:relative}.score-pop{position:absolute;right:12px;top:15px;display:grid;place-items:center;min-width:58px;height:42px;border-radius:18px;background:linear-gradient(135deg,#ffda54,#ff9f32);color:#fff;font:800 24px "Baloo 2";text-shadow:0 2px 0 rgba(148,79,14,.25);box-shadow:0 6px 0 #d98222,0 9px 18px rgba(209,125,25,.24);opacity:0;transform:scale(.4) translateY(15px);pointer-events:none}.score-pop.show{animation:scoreBurst .85s ease-out}.score-pop.no-point{background:#c9c3d8;box-shadow:0 6px 0 #9992aa}@keyframes scoreBurst{0%{opacity:0;transform:scale(.4) translateY(15px)}25%{opacity:1;transform:scale(1.18) translateY(-7px)}70%{opacity:1;transform:scale(1) translateY(-9px)}100%{opacity:0;transform:scale(.8) translateY(-32px)}}
@media(max-width:420px){.character-picker{grid-template-columns:repeat(5,58px);justify-content:center}.character-option img{height:50px}}

/* Single-screen layout */
html,body{height:100%;overflow:hidden}
.app-shell{height:100dvh;padding:10px 0 12px;display:flex;flex-direction:column}
.brand{flex:0 0 auto;margin-bottom:8px}
.panel{flex:1;min-height:0;overflow:hidden}
.setup-panel{display:flex;flex-direction:column;min-height:0!important}
.setup-panel .intro{flex:0 0 auto}
.setup-panel .setup-grid{flex:1;min-height:0;margin-top:12px;gap:12px 16px;align-content:center}
.setup-panel>.primary-button{flex:0 0 auto;margin-top:12px}
.game-panel{display:flex;flex-direction:column;min-height:0}
.game-panel .game-topbar,.game-panel .progress-track{flex:0 0 auto}
.game-panel .progress-track{margin:10px 0}
.duel-board{flex:1;min-height:0}
.player-lane{min-height:0;overflow:hidden}
.lane-play-slot,.question-area{min-height:0}
.result-panel{display:flex;flex-direction:column;align-items:center;justify-content:center}

@media(max-height:850px){
  .app-shell{padding:6px 0 9px}
  .brand{margin-bottom:5px}.brand .mascot{width:46px;height:46px;border-width:2px}.brand .mascot img{width:58px;height:58px}.brand h1{font-size:28px}.eyebrow{display:none}
  .panel{padding:13px 18px;border-width:3px;border-radius:26px}
  .intro{padding-bottom:8px}.intro h2{font-size:27px;margin:3px 0}.intro p{font-size:13px}.badge{padding:4px 9px;font-size:10px}.number-orbit{height:62px;min-width:125px;font-size:23px}.number-orbit b,.number-orbit i{width:34px;height:34px}
  .setup-panel .setup-grid{margin-top:8px;gap:8px 12px}
  .setup-grid .choice-group,.setup-grid .choice-group:last-child,.setup-grid .name-group{padding:8px 11px;border-radius:17px}
  .choice-group legend{font-size:16px;margin-bottom:5px}.choice-group legend span{width:24px;height:24px;border-radius:8px}.hint{display:none}.error{height:7px;margin:1px 0;font-size:10px}
  .choice-card{min-height:72px!important;padding:4px}.choice-card strong{height:43px}.choice-card strong img{width:48px;height:48px}.choice-card .duo-mini img{width:43px}.choice-card small{display:none}.choice-card span{font-size:12px}
  .customizer-grid{gap:8px}.player-customizer{padding:6px 8px;border-radius:14px}.player-customizer h4{font-size:13px;margin-bottom:3px}.character-picker{grid-template-columns:repeat(5,minmax(44px,66px));gap:4px;padding-bottom:3px}.character-option{border-radius:11px;padding:2px}.character-option img{height:38px}.character-option span{font-size:8px}.hero-name{margin-top:5px}.hero-name span{font-size:8px}.hero-name input{font-size:16px;border-bottom-width:2px;padding:0 3px}
  .operation{min-height:66px!important;padding:4px}.operation b{width:34px;height:34px;font-size:24px;margin-bottom:2px}.operation span{font-size:10px}
  .time-grid button{min-height:66px!important;padding:5px;gap:1px}.time-grid b{font-size:20px}.time-grid span{font-size:9px}
  .primary-button{margin-top:8px!important;padding:8px 16px;font-size:17px;border-radius:14px}.primary-button b{font-size:20px}
  .game-topbar{min-height:45px}.home-button{min-height:42px}.lane-head img{width:66px;height:66px}.lane-head h3{font-size:19px}.lane-play-slot{min-height:0}.question-area{min-height:0}.question-area>p{margin:3px}.question{font-size:clamp(36px,7vh,60px)}.answers{margin:7px auto}.answer{padding:7px;font-size:23px}.feedback{height:26px;font-size:18px}
  .trophy{font-size:58px}.result-panel h2{font-size:32px}.score-cards{margin:10px 0}.score-card{padding:8px}.score-card img{width:58px;height:58px}.result-panel .primary-button{margin-top:5px!important}
}

@media(max-width:720px){
  .app-shell{width:calc(100% - 14px)}
  .setup-grid{grid-template-columns:1fr 1fr!important}.setup-grid>.choice-group:first-child,.setup-grid .character-group{grid-column:1/-1!important}.setup-grid>.choice-group:last-child{grid-column:auto}
  .customizer-grid{grid-template-columns:1fr 1fr}.character-picker{grid-template-columns:repeat(5,26px);gap:2px;justify-content:center;overflow:hidden}.character-option img{height:28px}.character-option span{font-size:7px}
  .player-customizer{padding:5px}.hero-name input{font-size:14px}.operations,.time-grid{grid-template-columns:1fr 1fr}
}

/* Larger character portraits inside the picker */
.character-option{padding:1px 2px 3px}.character-option img{height:72px;margin:-3px 0 -1px}
@media(max-height:850px){.character-option img{height:54px;margin:-2px 0}.character-picker{padding-top:0;padding-bottom:1px}}
@media(max-width:720px){.character-option img{height:42px}.character-option span{line-height:1}}
@media(max-width:420px) and (max-height:700px){.character-option img{height:36px}}

/* Extra-large picker presentation */
.character-picker{grid-template-columns:repeat(5,minmax(70px,105px))}.character-option{max-width:105px}.character-option img{height:92px;margin:-8px 0 -3px}
@media(max-height:850px){.character-option img{height:72px;margin:-6px 0 -2px}}
@media(max-width:720px){.character-picker{grid-template-columns:repeat(5,34px)}.character-option img{height:50px;margin:-6px -8px -2px;width:calc(100% + 16px);max-width:none}}
@media(max-width:420px) and (max-height:700px){.character-option img{height:43px}}

/* Enlarged result celebration */
.result-panel{gap:3px}.result-panel .trophy{font-size:128px;line-height:1}.result-panel .badge{font-size:19px;padding:8px 16px}.result-panel h2{font-size:clamp(46px,6vw,66px);margin:5px 0}.result-panel>p{font-size:25px}.result-panel .score-cards{margin:16px 0;gap:20px}.result-panel .score-card{min-width:225px;padding:18px 22px}.result-panel .score-card img{width:120px;height:120px}.result-panel .score-card span{font-size:21px;font-weight:800}.result-panel .score-card b{font-size:48px}.result-panel .primary-button{font-size:29px}.result-panel .secondary-button{font-size:18px}
@media(max-height:850px){.result-panel .trophy{font-size:87px}.result-panel .badge{font-size:15px;padding:5px 12px}.result-panel h2{font-size:48px;margin:2px 0}.result-panel>p{font-size:20px}.result-panel .score-cards{margin:7px 0}.result-panel .score-card{min-width:190px;padding:9px 15px}.result-panel .score-card img{width:87px;height:87px}.result-panel .score-card span{font-size:17px}.result-panel .score-card b{font-size:40px}.result-panel .primary-button{font-size:24px}.result-panel .secondary-button{font-size:16px;padding:8px}}
@media(max-width:520px){.result-panel .trophy{font-size:72px}.result-panel h2{font-size:38px}.result-panel>p{font-size:17px}.result-panel .score-card{min-width:140px}.result-panel .score-card img{width:72px;height:72px}.result-panel .score-card b{font-size:32px}}

/* Game library + Opposite Word game */
.hub-panel,.word-setup,.word-preview{min-height:0;overflow:auto}.hub-hero,.word-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:2px dashed #e3daf8;padding-bottom:20px}.hub-hero h2,.word-intro h2{font:800 clamp(30px,5vw,48px)/1 "Baloo 2";margin:8px 0 3px;color:#49328d}.hub-hero p,.word-intro p{margin:0;color:var(--muted);font-size:17px}.hub-spark{width:140px;height:100px;display:grid;place-items:center;border-radius:35% 65% 55% 45%;background:linear-gradient(135deg,#fff09a,#ffbd5c);transform:rotate(3deg);box-shadow:0 8px 0 #e89a31}.hub-spark span{font-size:36px;line-height:1}.hub-spark b{font:800 22px "Baloo 2";color:#8b4d19}.game-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}.library-card{position:relative;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:18px;min-height:190px;border:0;border-radius:28px;padding:22px;text-align:left;color:#fff;cursor:pointer;box-shadow:0 10px 0 rgba(55,39,107,.18),0 18px 30px rgba(55,39,107,.16);transition:.18s}.library-card:hover{transform:translateY(-5px)}.math-card{background:linear-gradient(135deg,#7257ff,#4d3ac3)}.word-card{background:linear-gradient(135deg,#ff6f78,#f04e9a)}.library-art{display:flex;align-items:center;justify-content:center;gap:6px;width:145px;height:125px;border-radius:29px;background:rgba(255,255,255,.2);font:800 34px "Baloo 2"}.library-art b{display:grid;place-items:center;width:48px;height:55px;background:#fff;color:#5640b5;border-radius:15px;box-shadow:0 6px 0 rgba(34,20,91,.2)}.library-art i{font-style:normal}.word-art b{background:transparent;box-shadow:none;font-size:39px}.library-copy{display:flex;flex-direction:column}.library-copy small{font-weight:800;letter-spacing:1.6px;opacity:.85}.library-copy strong{font:800 clamp(24px,3vw,34px)/1.05 "Baloo 2";margin:6px 0}.library-copy em{font-style:normal;opacity:.9}.library-go{align-self:end;background:#fff;color:#5640b5;border-radius:99px;padding:10px 14px;font-weight:800}.word-card .library-go{color:#d9367e}.soon-card{grid-column:1/-1;min-height:105px;grid-template-columns:90px 1fr;background:linear-gradient(135deg,#4ec9ae,#29a998);cursor:default;opacity:.8}.soon-card:hover{transform:none}.soon-card .library-art{width:80px;height:70px;font-size:38px}
.word-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.back-to-hub{border:0;border-radius:14px;background:#f1ebff;color:#5c41b4;padding:9px 14px;font-weight:800;cursor:pointer}.word-logo,.mode-pill{background:#fff0a8;color:#96551b;border-radius:99px;padding:7px 15px;font:800 17px "Baloo 2"}.coral{background:#ffe3e9;color:#d83b68}.opposite-bubbles{display:flex;align-items:center;gap:9px;padding:18px;border-radius:25px;background:#ebfaff}.opposite-bubbles span{padding:11px 14px;border-radius:14px;background:#ffbb3e;color:#7b4811;font:800 17px "Baloo 2";box-shadow:0 5px 0 #db8f1c}.opposite-bubbles span:last-child{background:#7257ff;color:#fff;box-shadow:0 5px 0 #4e36c3}.opposite-bubbles b{color:#f05d78;font-size:25px}.word-setup-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-top:16px}.word-block{min-width:0;border:2px solid #eadff3;border-radius:22px;padding:14px;background:rgba(255,255,255,.68)}.word-block legend{font:800 18px "Baloo 2"}.word-block legend span{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#f05d78;color:#fff;margin-right:6px}.version-block{grid-row:span 2}.version-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.version-card{display:grid;grid-template-columns:48px 1fr;text-align:left;align-items:center;border:3px solid #eee6f4;background:#fff;border-radius:17px;padding:9px;color:var(--ink);cursor:pointer;box-shadow:0 4px 0 #e7dced}.version-card i{grid-row:span 2;font-style:normal;font-size:30px}.version-card b{font:800 16px "Baloo 2"}.version-card small{color:var(--muted)}.version-card.selected{border-color:#f05d78;background:#fff0f4;box-shadow:0 4px 0 #f4a2b9}.team-inputs{display:grid;grid-template-columns:1fr 35px 1fr;gap:8px;align-items:center}.team-name{border-radius:17px;padding:8px 10px}.team-sun{background:#fff2bf}.team-moon{background:#ebe5ff}.team-name span{display:block;font-size:11px;font-weight:800}.team-name input{width:100%;border:0;border-bottom:2px solid currentColor;background:transparent;padding:3px 1px;color:#393052;font:800 17px "Baloo 2";outline:0}.versus-badge{text-align:center;font:800 15px "Baloo 2";color:#ee5678}.round-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.round-choices button{border:2px solid #e5dcf0;background:#fff;border-radius:14px;padding:7px;color:#5c41b4;font:800 20px "Baloo 2";cursor:pointer}.round-choices small{display:block;font:700 9px "Nunito"}.round-choices .selected{background:#7257ff;color:#fff;border-color:#5941c7}.word-start{display:flex;align-items:center;justify-content:center;gap:10px;width:min(350px,100%);margin:14px auto 2px;border:0;border-radius:17px;padding:12px;background:linear-gradient(135deg,#ff6b72,#e74795);color:#fff;font:800 20px "Baloo 2";box-shadow:0 7px 0 #bd2c6b;cursor:pointer}
.math-hub-link{flex:0 0 auto;text-align:right;margin:-4px 0 5px}.setup-panel{position:relative}
.word-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:center}.word-team-score{display:flex;align-items:center;gap:12px;border-radius:21px;padding:12px 17px}.word-team-score>span{font-size:36px}.word-team-score div{flex:1}.word-team-score small{display:block;font-size:10px;font-weight:800}.word-team-score strong{font:800 22px "Baloo 2"}.word-team-score>b{font:800 38px "Baloo 2"}.sun-score{background:#fff0ab;color:#7e5018}.moon-score{background:#e8e0ff;color:#5135ad;text-align:right}.round-center{text-align:center}.round-center small,.round-center span{display:block;color:var(--muted);font-size:10px;font-weight:800}.round-center strong{font:800 17px "Baloo 2";color:#ed537a}.word-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:430px;margin-top:14px;border-radius:26px;background:radial-gradient(circle at 20% 25%,#fff4bd 0 4px,transparent 5px),radial-gradient(circle at 80% 70%,#dcd1ff 0 5px,transparent 6px),linear-gradient(145deg,#fff9e7,#f5edff);background-size:70px 70px,90px 90px,auto;border:3px solid #eadff6}.question-tag{background:#f05d78;color:#fff;border-radius:99px;padding:7px 15px;font-weight:800;font-size:12px;letter-spacing:1px}.big-word{font:800 clamp(58px,9vw,92px) "Baloo 2";color:#5035a1;text-shadow:0 6px 0 #dcd0ff;margin:8px 0}.word-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(780px,92%)}.word-options button{border:3px solid #e2d8ef;border-radius:19px;background:#fff;padding:14px;color:#372d52;font:800 22px "Baloo 2";box-shadow:0 6px 0 #d9cee7;cursor:pointer}.word-options button:first-child{border-color:#59cfa6;background:#e3faef}.word-stage p{margin:20px 0 0;color:var(--muted);font-weight:800}
@media(max-height:850px){.hub-hero,.word-intro{padding-bottom:9px}.game-library{margin-top:14px}.library-card{min-height:145px}.library-art{height:100px}.word-setup-grid{margin-top:9px;gap:9px}.word-block{padding:8px}.version-card{padding:5px}.word-start{margin-top:7px;padding:8px}.word-stage{min-height:340px}}@media(max-width:800px){.game-library{grid-template-columns:1fr}.soon-card{grid-column:auto}.library-card{grid-template-columns:90px 1fr}.library-art{width:86px;height:90px}.library-go{display:none}.word-setup-grid{grid-template-columns:1fr}.version-block{grid-row:auto}.word-intro .opposite-bubbles{display:none}.word-scoreboard{grid-template-columns:1fr 1fr}.round-center{grid-column:1/-1;grid-row:1}.word-options{grid-template-columns:1fr 1fr}.word-team-score{padding:8px}.word-team-score strong{font-size:16px}.word-team-score>span{font-size:25px}}

/* Working word-game states */
.word-options button:first-child{border-color:#e2d8ef;background:#fff}
.word-team-score{transition:.2s}.word-team-score.current-team{outline:4px solid #ff6b8b;transform:translateY(-2px);box-shadow:0 7px 0 rgba(129,76,163,.15)}.word-feedback{min-height:34px;margin-top:14px;font:800 22px "Baloo 2"}.word-feedback.good{color:#1ca56b}.word-feedback.bad{color:#dc4560}.word-options button.correct,.judge-buttons button.correct,.write-answer.correct{background:#dff9e9;border-color:#39bd79}.word-options button.wrong,.judge-buttons button.wrong,.write-answer.wrong{background:#ffe4e5;border-color:#f06770;animation:shake .3s}.match-line{display:flex;align-items:center;gap:18px;margin:25px 0}.match-line span{min-width:210px;padding:18px 25px;border:4px solid #ddcff8;border-radius:22px;background:#fff;color:#5135a8;text-align:center;font:800 clamp(34px,5vw,52px) "Baloo 2";box-shadow:0 7px 0 #d2c4ef}.match-line span:last-child{border-style:dashed;color:#ef587c}.match-line b{color:#f15a7c;font-size:38px}.match-options{max-width:700px}.write-answer{display:flex;width:min(620px,90%);gap:10px}.write-answer input{flex:1;min-width:0;border:4px solid #dcd0f5;border-radius:18px;background:#fff;padding:12px 18px;color:#45327f;font:800 24px "Baloo 2";outline:0}.write-answer input:focus{border-color:#7257ff}.write-answer button,.judge-buttons button{border:0;border-radius:18px;padding:13px 20px;background:#7257ff;color:#fff;font:800 18px "Baloo 2";box-shadow:0 6px 0 #4d36bd;cursor:pointer}.mime-card{width:min(660px,90%);margin:14px 0;padding:18px;text-align:center;border:4px dashed #f096b0;border-radius:25px;background:#fff3c5}.mime-card small{color:#c13c67;font-weight:800;letter-spacing:1px}.mime-card .big-word{margin:0}.mime-card p{margin:0;color:#71587c}.judge-buttons{display:flex;gap:14px}.judge-buttons button:first-child{background:#958ba9;box-shadow:0 6px 0 #6e647e}.judge-buttons button:last-child{background:#35bc82;box-shadow:0 6px 0 #218e60}.word-result{min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.word-trophy{font-size:100px;line-height:1;animation:bounce 1.2s ease-in-out infinite}.word-result h2{margin:8px 0;font:800 clamp(38px,6vw,62px) "Baloo 2";color:#5135a8}.word-result p{font-size:23px;color:var(--muted)}.word-result p b{color:#ef4f7a;font:800 32px "Baloo 2"}.word-result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.word-result-actions button{border:0;border-radius:15px;padding:11px 17px;background:#7257ff;color:#fff;font-weight:800;cursor:pointer}.word-result-actions button:nth-child(2){background:#ef5b7e}.word-result-actions button:last-child{background:#40b798}
@media(max-width:650px){.match-line span{min-width:0;padding:12px;font-size:28px}.write-answer{flex-direction:column}.write-answer button{width:100%}.word-feedback{font-size:17px}.word-result{min-height:350px}.word-trophy{font-size:70px}}

/* Round header mascot */
.brand .mascot{border-radius:50%;padding:0;overflow:hidden;background:linear-gradient(145deg,#e9fbff,#eee8ff);border:4px solid rgba(255,255,255,.9);box-shadow:0 6px 0 rgba(88,66,180,.16),0 9px 18px rgba(67,49,130,.15);transform:none}
.brand .mascot img{display:block;width:100%!important;height:100%!important;object-fit:cover;object-position:center;transform:scale(1.05)}
.cpu-customizer{background:linear-gradient(145deg,rgba(239,250,255,.92),rgba(242,238,255,.9));border-color:#bcdff0}.cpu-customizer .hero-name input{cursor:default;color:#39718c}.cpu-badge{display:inline-grid;place-items:center;background:#4aa8ef;color:#fff;border-radius:8px;padding:2px 7px;font-size:10px;letter-spacing:1px;vertical-align:2px}.cpu-hero-preview{display:flex;align-items:center;justify-content:center;gap:12px;min-height:72px}.cpu-hero-preview img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(45,94,130,.2))}.cpu-hero-preview b{font:800 21px "Baloo 2";color:#39718c}.cpu-note{margin:4px 0 -2px;text-align:center;color:#52798b;font-size:10px;font-weight:800}.player-lane.cpu-thinking{box-shadow:inset 0 0 0 5px rgba(74,168,239,.42)}.player-lane.cpu-thinking .lane-head img{animation:cpuThink 1.1s ease-in-out infinite}.player-lane.cpu-thinking .waiting{color:#3187b5}.player-lane.cpu-thinking .answer{cursor:wait;opacity:.82}@keyframes cpuThink{50%{transform:scale(1.09) rotate(5deg)}}

/* Moda Oyunlar integration */
.moda-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 3px solid rgba(91, 59, 148, .2);
  border-radius: 17px;
  background: #fff;
  color: #563b88;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 7px 0 rgba(70, 47, 116, .15), 0 12px 22px rgba(70, 47, 116, .1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.moda-home-link:hover { transform: translateY(-2px); box-shadow: 0 9px 0 rgba(70, 47, 116, .15), 0 15px 25px rgba(70, 47, 116, .12); }
@media (max-width: 720px) {
  .moda-home-link { min-height: 46px; padding: 0 17px; font-size: 15px; }
}