:root{--ink:#26223f;--muted:#6f6a88;--purple:#5b4bdb;--purple2:#7c69f2;--pink:#ef6cab;--gold:#ffcb55;--danger:#c7425f;--line:#e7e2f4;--shadow:0 18px 50px rgba(59,47,116,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 10%,#f9e4f2 0 15%,transparent 35%),radial-gradient(circle at 92% 15%,#e0f3ff 0 14%,transparent 35%),linear-gradient(180deg,#f7f3ff,#fffaf1 55%,#eefcf7)}button,select,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,3vw,40px);border-bottom:1px solid rgba(91,75,219,.12);background:rgba(255,255,255,.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:26px;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 8px 22px rgba(91,75,219,.25)}.brand h1{font-size:clamp(20px,3vw,30px);margin:0}.brand p{margin:2px 0 0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:8px;flex-wrap:wrap}
main{width:min(1320px,96vw);margin:24px auto 60px}.screen{display:none}.screen.active{display:block}.hero-card,.bonus-card{background:rgba(255,255,255,.94);border:1px solid #eee8ff;border-radius:30px;box-shadow:var(--shadow);padding:clamp(22px,4vw,48px)}.hero-copy{text-align:center;max-width:780px;margin:0 auto 28px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:12px;color:var(--purple)}.hero-copy h2,.bonus-card h2,.center h2{font-size:clamp(30px,5vw,54px);margin:8px 0}.hero-copy p{font-size:18px;color:var(--muted);line-height:1.55}
.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.panel{background:#faf8ff;border:1px solid var(--line);border-radius:22px;padding:22px}.panel h3{margin-top:0}.panel label{display:grid;gap:8px;font-weight:800;margin:14px 0}.panel select,.panel input[type=text],.modal-card input,.modal-card textarea,.solve-inline input{width:100%;border:2px solid var(--line);background:white;border-radius:14px;padding:12px 14px;outline:none}.panel select:focus,.panel input:focus,.modal-card input:focus,.modal-card textarea:focus,.solve-inline input:focus{border-color:var(--purple2)}.check-row{display:flex!important;align-items:center;gap:10px!important}.name-fields{display:grid;gap:10px}.mascot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.mascot-card{background:#fff7dc;border:1px solid #f0dfa2;border-radius:20px;padding:16px;text-align:center;display:grid;gap:4px}.mascot-card span{font-size:38px}.mascot-card small{color:var(--muted)}
button{border:0;border-radius:14px;padding:11px 16px;font-weight:900;transition:.18s transform,.18s box-shadow}.primary{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple2));box-shadow:0 8px 20px rgba(91,75,219,.24)}.secondary{color:var(--ink);background:#fff;border:2px solid var(--line)}.ghost{background:#f3f0fa;color:var(--ink)}.danger{color:var(--danger)}.jumbo{font-size:20px;padding:16px 26px;min-width:200px}.hero-card>.jumbo{display:block;margin:0 auto}.primary:hover,.secondary:hover,.ghost:hover{transform:translateY(-1px)}
.game-status{display:grid;grid-template-columns:1fr 2fr 1fr;gap:12px;margin-bottom:12px}.game-status>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px;text-align:center;box-shadow:0 8px 24px rgba(70,60,120,.06)}.game-status span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.game-status strong{font-size:18px}.category-box strong{color:var(--purple)}
.player-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.player-card{background:white;border:2px solid transparent;border-radius:20px;padding:14px 16px;box-shadow:0 8px 24px rgba(70,60,120,.08);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.player-card.active{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,203,85,.22),0 10px 25px rgba(70,60,120,.12)}.player-avatar{font-size:34px;width:68px;height:68px;display:grid;place-items:center;overflow:hidden;border-radius:18px}.player-name{font-weight:900}.player-type{font-size:11px;color:var(--muted);text-transform:uppercase}.player-score{text-align:right}.player-score strong{display:block;font-size:20px}.round-score{font-size:12px;color:var(--muted)}
.puzzle-zone{position:relative;overflow:hidden;background:radial-gradient(circle at 50% -20%,rgba(255,216,92,.22),transparent 42%),linear-gradient(145deg,#32206f,#4d3fb2 55%,#2d6ca8);border-radius:28px;padding:clamp(18px,3vw,32px);box-shadow:var(--shadow);margin-bottom:16px}.puzzle-board{display:flex;flex-wrap:wrap;row-gap:12px;column-gap:24px;justify-content:center;align-items:center;min-height:170px}.word{display:flex;gap:5px;white-space:nowrap;margin-inline:2px}.tile{width:clamp(30px,4vw,47px);height:clamp(42px,5.3vw,60px);background:linear-gradient(180deg,#fffdf7,#f6f0ff);border:2px solid rgba(255,214,91,.75);border-radius:12px;display:grid;place-items:center;font-weight:1000;font-size:clamp(18px,3vw,30px);box-shadow:inset 0 -5px 0 rgba(0,0,0,.07)}.tile.blank{color:transparent}.tile.punct{background:transparent;color:#fff;box-shadow:none;width:auto;min-width:14px}.round-message{text-align:center;color:#fff;margin-top:14px;font-weight:900;min-height:24px}
.game-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:16px}.wheel-panel,.control-panel{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:var(--shadow)}.wheel-panel{text-align:center}.wheel-wrap{position:relative;width:min(520px,84vw);aspect-ratio:1;margin:0 auto}.wheel-wrap canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 14px 20px rgba(44,37,91,.16));transition:transform 4.2s cubic-bezier(.08,.76,.14,1)}.pointer{position:absolute;z-index:2;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:36px solid #2a2447;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}.spin-result{font-weight:1000;font-size:22px;margin:4px 0 10px;color:var(--purple)}.wheel-spin-button{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;min-width:0;padding:0;border-radius:50%;font-size:21px;letter-spacing:.04em;border:7px solid #fff;box-shadow:0 9px 24px rgba(36,28,88,.28),inset 0 -7px 0 rgba(0,0,0,.12)}.wheel-spin-button:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.04)}.wheel-spin-button:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}.wheel-spin-button:disabled{transform:translate(-50%,-50%);opacity:.78}
.control-panel h3{margin-top:0}.action-row{display:flex;gap:10px;flex-wrap:wrap}.action-row>*{flex:1}.secondary small{display:block;font-size:11px;color:var(--muted)}.letters-wrap{margin-top:18px}.letters-wrap h4{margin:0 0 10px}.letter-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.letter-btn{padding:10px 4px;background:#f4f1fb;border:2px solid #e4def3;border-radius:10px;font-weight:1000}.letter-btn.vowel{background:#fff2d3}.letter-btn.used{opacity:.28}.mini-actions{display:flex;gap:10px;margin-top:18px}.mini-actions button{flex:1}
.modal{position:fixed;inset:0;background:rgba(28,24,55,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:18px}.modal.hidden,.hidden{display:none!important}.modal-card{position:relative;background:#fff;width:min(760px,96vw);max-height:90vh;overflow:auto;border-radius:26px;padding:28px;box-shadow:0 30px 80px rgba(25,20,60,.3)}.modal-close{position:absolute;right:14px;top:12px;background:#f3f0fa;width:38px;height:38px;padding:0;border-radius:50%;font-size:24px}.modal-card h2{margin-top:0}.modal-card textarea{min-height:200px;resize:vertical}.choice-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.choice-grid button{background:#f6f3fb;border:2px solid var(--line)}
.bonus-card{text-align:center}.bonus-card>p{color:var(--muted)}.bonus-board{background:linear-gradient(160deg,#352e75,#5146a9);border-radius:22px;padding:26px;margin:18px 0}.bonus-letters{max-width:680px;margin:0 auto 16px}.timer{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:1000;background:#fff2d3;border:5px solid var(--gold);margin:16px auto}.solve-inline{display:flex;gap:10px;max-width:620px;margin:14px auto}.solve-inline input{flex:1}.solve-inline button{min-width:110px}.center{text-align:center}.final-scores{display:grid;gap:12px;max-width:700px;margin:20px auto}.final-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#faf8ff;border:1px solid var(--line);border-radius:18px;padding:14px;text-align:left}.final-row .rank{font-size:22px}.achievement-shelf{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0}.badge{background:#fff4c9;border:1px solid #edd27d;border-radius:999px;padding:8px 12px;font-weight:900;font-size:13px}.center-actions{max-width:520px;margin:0 auto}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{background:#faf8ff;border:1px solid var(--line);border-radius:16px;padding:14px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{font-size:24px}.custom-list{display:grid;gap:8px;max-height:230px;overflow:auto;margin:14px 0}.custom-item{padding:10px 12px;background:#faf8ff;border-radius:12px;font-size:13px}
@media(max-width:850px){.setup-grid,.game-grid{grid-template-columns:1fr}.player-strip{grid-template-columns:1fr}.game-status{grid-template-columns:repeat(3,1fr)}.top-actions{display:none}.wheel-wrap{width:min(460px,88vw)}.letter-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){main{width:100%;margin-top:10px}.hero-card,.bonus-card,.wheel-panel,.control-panel{border-radius:20px}.hero-card,.bonus-card{padding:18px}.mascot-row{grid-template-columns:1fr}.game-status{gap:5px}.game-status>div{padding:9px 5px}.game-status strong{font-size:14px}.tile{width:28px;height:40px;font-size:18px}.puzzle-zone{border-radius:18px}.letter-grid{grid-template-columns:repeat(5,1fr)}.choice-grid{grid-template-columns:repeat(4,1fr)}.solve-inline{flex-direction:column}.topbar{padding:12px}.brand p{display:none}.brand-mark{width:42px;height:42px}.brand h1{font-size:18px}}
.start-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.start-row .jumbo{margin:0}.audience-strip{margin:-4px 0 16px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:18px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 8px 24px rgba(70,60,120,.07);font-size:20px}.audience-strip b{font-size:14px;color:var(--muted)}
body[data-stage="sunny"]{background:radial-gradient(circle at 20% 5%,#fff0a8 0 13%,transparent 28%),radial-gradient(circle at 85% 16%,#ffd2e8 0 14%,transparent 30%),linear-gradient(180deg,#fff9dc,#fff1de 55%,#f0fff6)}
body[data-stage="ocean"]{background:radial-gradient(circle at 12% 12%,#c7f3ff 0 15%,transparent 32%),radial-gradient(circle at 88% 12%,#d8d5ff 0 14%,transparent 30%),linear-gradient(180deg,#e8fbff,#eef5ff 55%,#edfff8)}
.confetti-piece{position:fixed;top:-20px;width:10px;height:16px;z-index:1000;pointer-events:none;animation:confettiFall 1.9s linear forwards}@keyframes confettiFall{to{transform:translate(var(--drift),105vh) rotate(720deg);opacity:.2}}


.mascot-illust{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 10px 16px rgba(80,63,140,.18))}.clipart-shelf{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 0 22px}.clipart-badge{display:flex;align-items:center;gap:10px;background:#f9f7ff;border:1px solid var(--line);border-radius:18px;padding:10px 14px;font-weight:800;color:var(--ink)}.clipart-badge img{width:48px;height:48px;display:block}.stage-friends{display:flex;justify-content:center;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:14px 0 18px}.stage-friend,.stage-badge{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 24px rgba(80,63,140,.08)}.stage-friend{padding:8px 12px 0}.stage-badge{padding:10px}.stage-friend img{display:block;width:92px;height:92px;object-fit:contain}.stage-badge img{display:block;width:68px;height:68px;object-fit:contain}.player-avatar img{width:100%;height:100%;object-fit:contain;display:block}.player-avatar.is-image img{transform:scale(1.05)}.player-avatar.is-image{padding:3px;background:linear-gradient(180deg,#fffdf6,#fff5dd);border:2px solid #efe5ff;box-shadow:0 6px 14px rgba(70,60,120,.12)}@media (max-width:760px){.mascot-illust{width:76px;height:76px}.stage-friend img{width:70px;height:70px}.stage-badge img{width:52px;height:52px}.clipart-badge img{width:40px;height:40px}}

.feature-clipart-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}.feature-clipart-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:20px;padding:10px 14px;box-shadow:0 8px 18px rgba(80,63,140,.08);font-weight:800;color:var(--ink)}.feature-clipart-card img{width:48px;height:48px;display:block}.wheel-badges{display:flex;justify-content:center;gap:10px;align-items:center;margin:4px 0 12px}.wheel-badges img{display:block;width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:16px;padding:4px;box-shadow:0 8px 18px rgba(80,63,140,.10)}@media (max-width:760px){.feature-clipart-card{font-size:14px;padding:9px 12px}.feature-clipart-card img,.wheel-badges img{width:40px;height:40px}}

@media(max-width:560px){.puzzle-board{column-gap:17px;row-gap:10px}.wheel-spin-button{width:88px;height:88px;font-size:18px;border-width:6px}}

.bonus-clues{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0}.clue-tile{border:2px solid #ffd45d;background:linear-gradient(180deg,#fff9cf,#ffe58c);color:#5d3f00;border-radius:16px;padding:11px 15px;font-weight:900;box-shadow:0 7px 16px rgba(160,111,0,.12)}.clue-tile:disabled{opacity:.72}.howto-mini{line-height:1.55}.howto-mini p{background:#faf8ff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin:8px 0}.howto-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.howto-pills span{background:#efeaff;color:var(--purple);border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px}.game-footer{width:min(1320px,96vw);margin:-30px auto 34px;text-align:center;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.02em}.puzzle-zone:before,.puzzle-zone:after{content:'★';position:absolute;color:rgba(255,214,91,.2);font-size:70px;pointer-events:none}.puzzle-zone:before{left:18px;top:4px;transform:rotate(-15deg)}.puzzle-zone:after{right:18px;bottom:-10px;transform:rotate(18deg)}

.brand-mark-image{overflow:hidden;padding:0;background:#fff}.brand-mark-image img{width:100%;height:100%;object-fit:cover;display:block}.play-game-banner{display:block;width:min(920px,100%);height:auto;margin:0 auto 24px;border-radius:24px;box-shadow:0 14px 34px rgba(66,46,145,.18);border:1px solid rgba(91,75,219,.12)}@media(max-width:560px){.play-game-banner{border-radius:16px;margin-bottom:16px}}