:root{
    --bg:#050A1C;--panel:#091632;--panel2:#071128;--line:rgba(255,255,255,.10);
    --text:#F7FBFF;--muted:#91A5C0;--cyan:#2BDBFF;--yellow:#FFD447;
    --green:#3EE29B;--pink:#FF6EAD;--purple:#8C72FF;--red:#FF6178;
    --shadow:0 32px 80px rgba(0,0,0,.36)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    min-height:100vh;color:var(--text);font-family:'Nunito',sans-serif;overflow-x:hidden;
    background:
        radial-gradient(circle at 8% 5%,rgba(43,219,255,.15),transparent 28%),
        radial-gradient(circle at 92% 5%,rgba(255,212,71,.12),transparent 28%),
        radial-gradient(circle at 50% 110%,rgba(140,114,255,.14),transparent 34%),
        var(--bg)
}
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;
    background-image:radial-gradient(circle,#fff 1px,transparent 1px),radial-gradient(circle,#fff 1px,transparent 1px);
    background-size:90px 90px,145px 145px;background-position:0 0,35px 55px
}
button,input,select{font:inherit}
button{user-select:none}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(255,212,71,.38);outline-offset:2px}
.app{width:min(1480px,100%);margin:auto;padding:18px;position:relative;z-index:2}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:51px;height:51px;object-fit:contain}
.brand small{display:block;color:#8398B8;font-size:.61rem;font-weight:900;letter-spacing:1.45px}
.brand strong{display:block;font-family:'Fredoka';font-size:1.28rem}
.brand strong span{color:var(--yellow)}
.top-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.icon-btn,.link-btn{
    border:1px solid var(--line);background:rgba(255,255,255,.05);color:white;border-radius:999px;
    padding:9px 13px;cursor:pointer;text-decoration:none;font-size:.74rem;font-weight:900;transition:.2s ease
}
.icon-btn:hover,.link-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}

.hero{
    min-height:330px;padding:38px;border:1px solid var(--line);border-radius:34px;box-shadow:var(--shadow);
    display:grid;grid-template-columns:1.1fr .9fr;gap:25px;align-items:center;
    background:linear-gradient(110deg,rgba(43,219,255,.08),transparent 42%),linear-gradient(250deg,rgba(255,212,71,.10),transparent 42%),#091833;
    position:relative;overflow:hidden
}
.hero::after{
    content:"A B C";position:absolute;right:-30px;bottom:-45px;font:700 9rem 'Fredoka';
    letter-spacing:18px;color:rgba(255,255,255,.023);transform:rotate(-8deg)
}
.hero-copy,.hero-visual{position:relative;z-index:2}
.kicker{
    display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,212,71,.25);
    border-radius:999px;background:rgba(255,212,71,.08);color:#FFE799;font-size:.71rem;font-weight:900;
    letter-spacing:1.1px;margin-bottom:15px
}
.hero h1{font-family:'Fredoka';font-size:clamp(3.3rem,7vw,6.1rem);line-height:.84;letter-spacing:-4px}
.hero h1 em{color:var(--yellow);font-style:normal;text-shadow:0 0 45px rgba(255,212,71,.2)}
.hero p{margin-top:18px;max-width:650px;color:#A9BAD3;font-weight:700;line-height:1.65}
.hero-visual{min-height:250px;display:grid;place-items:center}
.mini-board{
    width:min(350px,90%);aspect-ratio:1;display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:18px;
    border-radius:32px;background:#071129;border:1px solid var(--line);transform:rotate(4deg);
    box-shadow:0 24px 50px rgba(0,0,0,.34)
}
.mini-board span{
    display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.06);font:700 1.05rem 'Fredoka';color:#DCE8F8
}
.mini-board span.hot{color:#04111C;background:var(--yellow);box-shadow:0 0 20px rgba(255,212,71,.25)}

.setup{
    margin-top:18px;padding:26px;border:1px solid var(--line);border-radius:27px;background:rgba(8,20,44,.92);
    box-shadow:0 25px 65px rgba(0,0,0,.24)
}
.setup-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.setup-title i{
    width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-style:normal;
    color:#231800;background:linear-gradient(135deg,var(--yellow),#FF9C32);font-family:'Fredoka'
}
.setup-title h2{font-family:'Fredoka';font-size:1.45rem}
.setup-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:12px}
.field{padding:15px;border-radius:17px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.field label{display:block;color:#8EA3C1;font-size:.68rem;font-weight:900;letter-spacing:.9px;margin-bottom:8px}
.field input,.field select{
    width:100%;height:44px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:#050D22;
    color:white;padding:0 12px;outline:none;font-weight:800
}
.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.diff input{display:none}
.diff span{
    display:block;padding:12px;border:1px solid var(--line);border-radius:13px;background:#071128;
    text-align:center;cursor:pointer;color:#A9B8CF;font-weight:900;font-size:.78rem
}
.diff input:checked + span.easy{color:#C7F8E0;border-color:rgba(62,226,155,.55);background:rgba(62,226,155,.10)}
.diff input:checked + span.medium{color:#FFE999;border-color:rgba(255,212,71,.55);background:rgba(255,212,71,.10)}
.diff input:checked + span.hard{color:#FFC1CC;border-color:rgba(255,97,120,.55);background:rgba(255,97,120,.10)}
.start-btn{
    width:100%;margin-top:16px;border:0;border-radius:17px;padding:17px;color:white;cursor:pointer;font-weight:900;
    letter-spacing:.9px;background:linear-gradient(90deg,#23C8EB,#297DE1 34%,#8C63FF 67%,#FF6EAD);
    box-shadow:0 16px 38px rgba(0,0,0,.24);transition:.2s ease
}
.start-btn:hover{transform:translateY(-2px)}
.setup-note{margin-top:10px;text-align:center;color:#7185A3;font-size:.74rem;font-weight:800}

.game-screen{display:none}.game-screen.active{display:block}.lobby.hidden{display:none}
.hud{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;margin-bottom:12px}
.hud-card{
    min-height:66px;padding:11px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(8,20,44,.92);
    display:flex;align-items:center;gap:11px
}
.avatar{
    width:43px;height:43px;flex:0 0 43px;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--cyan),#2879DC);font-size:1.35rem
}
.hud-card small{display:block;color:#7F93B2;font-size:.62rem;font-weight:900;letter-spacing:.8px}
.hud-card strong{display:block;margin-top:1px;font-family:'Fredoka';font-size:1.1rem;white-space:nowrap}
.metric{min-width:112px;justify-content:center;text-align:center}.metric strong{font-size:1.35rem}
.timer-card strong{color:var(--yellow)}.score-card strong{color:var(--cyan)}.combo-card strong{color:var(--pink)}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:13px;align-items:start}
.board-panel{
    border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,rgba(9,23,50,.96),rgba(5,12,29,.99));
    box-shadow:var(--shadow);overflow:hidden
}
.board-head{padding:14px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.board-head-left{min-width:0}
.board-head small{display:block;color:#8498B5;font-size:.63rem;font-weight:900;letter-spacing:1px}
.board-head h2{font-family:'Fredoka';font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-wrap{width:min(300px,38%);display:flex;align-items:center;gap:9px}
.progress{flex:1;height:9px;border-radius:99px;background:#03091A;overflow:hidden}
.progress > i{
    display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--green),var(--yellow));
    transition:width .35s ease
}
.progress-label{color:#A2B3C9;font-size:.72rem;font-weight:900;white-space:nowrap}
.board-stage{min-height:610px;display:grid;place-items:center;padding:19px;position:relative;overflow:hidden}
.board-stage::before,.board-stage::after{
    content:"";position:absolute;width:330px;height:330px;border-radius:50%;filter:blur(130px);opacity:.08;pointer-events:none
}
.board-stage::before{left:-160px;top:0;background:var(--cyan)}
.board-stage::after{right:-170px;bottom:0;background:var(--purple)}
.word-grid{
    --size:12;width:min(100%,640px);aspect-ratio:1;position:relative;z-index:2;display:grid;
    grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);
    gap:clamp(2px,.45vw,5px);user-select:none;touch-action:none
}
.letter-cell{
    min-width:0;min-height:0;border:1px solid rgba(255,255,255,.075);border-radius:clamp(5px,.7vw,10px);
    background:rgba(255,255,255,.045);color:#E9F2FF;display:grid;place-items:center;font-family:'Fredoka';
    font-size:clamp(.68rem,1.45vw,1.22rem);cursor:pointer;
    transition:transform .09s ease,background .13s ease,border-color .13s ease,color .13s ease,box-shadow .13s ease
}
.letter-cell:hover{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.075)}
.letter-cell.selecting{
    background:rgba(255,212,71,.20);border-color:rgba(255,212,71,.75);color:#FFF3B5;transform:scale(1.06);
    box-shadow:0 0 15px rgba(255,212,71,.16)
}
.letter-cell.found{
    color:#041019;border-color:transparent;background:linear-gradient(135deg,#47E9AF,#21BCD8);
    box-shadow:0 0 13px rgba(62,226,155,.18)
}
.letter-cell.bonus-found{background:linear-gradient(135deg,#FFE35F,#FF9C32);box-shadow:0 0 17px rgba(255,212,71,.28)}
.letter-cell.hint{animation:hintPulse .45s ease 3}
@keyframes hintPulse{50%{transform:scale(1.18);color:#251800;background:var(--yellow);border-color:#fff;box-shadow:0 0 24px rgba(255,212,71,.38)}}

.sidebar{display:flex;flex-direction:column;gap:11px}
.side-card{
    padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(8,20,44,.92);
    box-shadow:0 18px 45px rgba(0,0,0,.18)
}
.side-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.side-title h3{font-family:'Fredoka';font-size:1.08rem}
.side-title span{color:#7F94B2;font-size:.69rem;font-weight:900}
.words-list{display:grid;gap:7px;max-height:360px;overflow:auto;padding-right:3px}
.word-item{
    padding:10px 11px;border-radius:12px;background:#061027;border:1px solid rgba(255,255,255,.07);
    display:flex;align-items:center;justify-content:space-between;gap:8px;transition:.18s ease
}
.word-item .w-main{min-width:0}
.word-item b{display:block;font-family:'Fredoka';font-size:.89rem;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.word-item small{display:block;margin-top:2px;color:#6F85A4;font-size:.64rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.word-item .check{
    width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:grid;place-items:center;
    background:rgba(255,255,255,.05);color:#53657D;font-size:.72rem
}
.word-item.found{opacity:.65;border-color:rgba(62,226,155,.22);background:rgba(62,226,155,.055)}
.word-item.found b{text-decoration:line-through;color:#8FE8BD}
.word-item.found .check{color:#06130E;background:var(--green)}
.word-item.bonus:not(.found){border-color:rgba(255,212,71,.27);box-shadow:inset 3px 0 0 var(--yellow)}
.bonus-badge{color:var(--yellow);font-size:.63rem;font-weight:900}
.power-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.power{
    border:1px solid var(--line);border-radius:13px;padding:11px 8px;background:#071128;color:#DCE6F5;
    cursor:pointer;font-weight:900;font-size:.74rem
}
.power:hover{border-color:rgba(255,255,255,.22)}.power:disabled{cursor:not-allowed;opacity:.38}
.power small{display:block;color:#758AA7;font-size:.61rem;margin-top:2px}
.instructions{color:#8FA3BE;font-size:.74rem;line-height:1.55;font-weight:800}.instructions b{color:#DFE7F5}
.ranking{display:grid;gap:6px;max-height:240px;overflow:auto}
.rank-item{
    display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;padding:8px 9px;
    border-radius:11px;background:#061027;border:1px solid rgba(255,255,255,.06)
}
.rank-pos{color:var(--yellow);font-family:'Fredoka'}
.rank-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:.78rem}
.rank-score{color:#A6B8CF;font-size:.72rem;font-weight:900}

.toast{
    position:fixed;top:82px;left:50%;z-index:2000;transform:translate(-50%,-18px);opacity:0;pointer-events:none;
    padding:11px 17px;border-radius:999px;background:#0B1832;border:1px solid var(--line);
    box-shadow:0 18px 45px rgba(0,0,0,.34);font-weight:900;transition:.22s ease
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{color:#BDF7DA;border-color:rgba(62,226,155,.28)}
.toast.bad{color:#FFC0CB;border-color:rgba(255,97,120,.28)}
.toast.bonus{color:#FFE99C;border-color:rgba(255,212,71,.32)}

.modal{
    position:fixed;inset:0;z-index:3000;display:none;place-items:center;padding:20px;
    background:rgba(2,5,15,.76);backdrop-filter:blur(12px)
}
.modal.open{display:grid}
.result-card{
    width:min(620px,100%);padding:31px;border-radius:30px;border:1px solid var(--line);
    background:radial-gradient(circle at 50% -10%,rgba(255,212,71,.15),transparent 38%),#081630;
    box-shadow:0 40px 110px rgba(0,0,0,.52);text-align:center
}
.result-icon{font-size:4.6rem}
.result-card h2{margin-top:5px;font-family:'Fredoka';font-size:clamp(2.2rem,6vw,4.1rem);line-height:.92;color:var(--yellow)}
.result-card p{margin-top:11px;color:#9FB1C8;font-weight:800}
.result-stats{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.result-stat{padding:13px 8px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.result-stat small{display:block;color:#7E92B0;font-size:.61rem;font-weight:900;letter-spacing:.7px}
.result-stat strong{display:block;margin-top:3px;font-family:'Fredoka';font-size:1.45rem}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.result-actions button{border:0;border-radius:14px;padding:14px;cursor:pointer;color:white;font-weight:900}
.again{background:linear-gradient(90deg,#21C4E7,#8865F2)}
.home{background:#15213D;border:1px solid var(--line)!important}
.confetti{position:fixed;top:-20px;width:10px;height:18px;border-radius:3px;z-index:2999;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}

@media(max-width:1050px){
    .setup-grid{grid-template-columns:1fr 1fr}.game-layout{grid-template-columns:1fr}
    .sidebar{display:grid;grid-template-columns:1fr 1fr}.words-card{grid-row:span 2}.board-stage{min-height:auto}
}
@media(max-width:760px){
    .app{padding:10px}.brand small{display:none}.hero{grid-template-columns:1fr;padding:27px}.hero-visual{display:none}
    .setup-grid{grid-template-columns:1fr}.hud{grid-template-columns:1fr 1fr}.player-card{grid-column:1/-1}.metric{min-width:0}
    .sidebar{grid-template-columns:1fr}.words-card{grid-row:auto}.board-head{align-items:flex-start}.progress-wrap{width:42%}
}
@media(max-width:520px){
    .topbar{align-items:flex-start}.top-actions .link-btn{display:none}.hero h1{letter-spacing:-2px}.setup{padding:18px}
    .board-stage{padding:10px}.letter-cell{border-radius:5px;font-size:clamp(.62rem,3vw,.92rem)}
    .result-stats{grid-template-columns:1fr}
}