/* Cybli-AI — noche índigo, menta neón, coral suave */
:root{--bg:#0f1130;--panel:#191c4a;--line:#2e3380;--mint:#5af2c4;--coral:#ff7a9c;--lav:#b9a8ff;--text:#eef0ff;--muted:#9aa0d6}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:'DM Sans',system-ui,sans-serif;color:var(--text);
  background:radial-gradient(900px 500px at 85% -10%,#2b2f86,transparent 60%),var(--bg)}
h2{font-family:'Sora',sans-serif;margin:0 0 .8rem;font-size:1.3rem}
.muted{color:var(--muted)}
.top{display:flex;justify-content:space-between;padding:.8rem 1.2rem}
button{font:inherit;cursor:pointer;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:10px;padding:.5rem .9rem}
button:hover{border-color:var(--mint)}
button:focus-visible,input:focus-visible{outline:3px solid var(--lav);outline-offset:2px}
.actions{display:flex;gap:.5rem}
.lang button.on{background:var(--mint);color:#07261d;border-color:var(--mint);font-weight:700}
.primary{background:var(--coral);border-color:var(--coral);color:#2a0612;font-weight:700;width:100%;padding:.75rem;margin-top:.6rem}
.primary:disabled{opacity:.5}
.screen{flex:1;display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,1.4fr);gap:2rem;align-items:center;max-width:1000px;width:100%;margin:0 auto;padding:1rem}
.side{display:flex;flex-direction:column;align-items:center;gap:1rem}
#mascot{width:min(260px,60vw);filter:drop-shadow(0 0 22px #5af2c455)}
.bubble{background:var(--panel);border:1px solid var(--mint);border-radius:18px;padding:1rem 1.2rem;text-align:center;line-height:1.5;max-width:300px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:1.6rem;box-shadow:0 20px 50px -25px #000}
label{display:block;font-size:.9rem;color:var(--muted);margin:.7rem 0 .25rem}
input{width:100%;padding:.7rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.tabs{display:flex;gap:.4rem;margin-bottom:.5rem}.tabs button{flex:1}.tabs .on{background:var(--mint);color:#07261d;font-weight:700}
.msg{color:var(--coral);min-height:1.4em;margin:.5rem 0 0}
.q{font-size:1.15rem;line-height:1.4;margin:.5rem 0 1rem}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.scale button{padding:.8rem 0;font-weight:700}
.legend{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-top:.4rem}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-width:360px;margin:0 auto}
.cell{aspect-ratio:1;padding:0;font-weight:700;background:#262b7a;border-radius:6px;font-size:1rem}
.cell.open{background:var(--bg);border-color:transparent;cursor:default}
.cell.mine{background:var(--coral)}
.n1{color:#5af2c4}.n2{color:#b9a8ff}.n3{color:#ff7a9c}.n4,.n5,.n6,.n7,.n8{color:#ffd166}
.rank{width:100%;border-collapse:collapse}.rank th,.rank td{padding:.5rem;text-align:left;border-bottom:1px solid var(--line)}
.rank .me td{color:var(--mint);font-weight:700}
dialog.card{color:var(--text);text-align:center;min-width:260px;border:1px solid var(--mint)}
dialog::backdrop{background:#0009}
.big{font-size:4rem;line-height:1.1}
.pname{font-family:'Sora',sans-serif;font-size:1.4rem;margin:.3rem 0}
.pf{position:relative;width:min(340px,92vw);padding:2rem 1.5rem 1.5rem;background:linear-gradient(180deg,#2b3090 0,var(--panel) 48%);--c:var(--mint)}
.pf.m0{--c:var(--coral)}.pf.m1{--c:#ffd166}.pf.m2{--c:var(--lav)}.pf.m3{--c:var(--mint)}
.pf .x{position:absolute;top:.7rem;right:.7rem;padding:.2rem .55rem;border-radius:99px}
.avatar{width:104px;height:104px;margin:0 auto .6rem;display:grid;place-items:center;font-size:3.4rem;border-radius:50%;background:var(--bg);border:4px solid var(--c);box-shadow:0 0 30px var(--c)}
.badge{display:inline-block;padding:.2rem .8rem;border:1px solid var(--c);color:var(--c);border-radius:99px;font-weight:700;font-size:.9rem}
.pct{display:flex;justify-content:space-between;align-items:baseline;margin:1.2rem 0 .4rem;color:var(--muted)}.pct b{font-family:'Sora',sans-serif;font-size:1.6rem;color:var(--c)}
.bar{height:10px;background:var(--bg);border-radius:99px;overflow:hidden}.bar span{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .6s}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.2rem}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.8rem .4rem}.stat b{display:block;font-family:'Sora',sans-serif;font-size:1.4rem}.stat small{color:var(--muted)}
.footnote{margin:0;padding:.9rem 1rem 1.2rem;text-align:center;color:var(--muted);font-size:.9rem}
.footnote:not(:empty)::before{content:'⏳ '}
@media (max-width:700px){.screen{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}