*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);overflow-x:hidden;transition:.35s}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 10%,var(--glowA),transparent 34%),radial-gradient(circle at 85% 30%,var(--glowB),transparent 34%),linear-gradient(135deg,#02040a,#07111f 55%,#03040a);z-index:-4}.bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 85%);z-index:-3}.bg-orb{position:fixed;width:360px;height:360px;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-2}.orb-a{left:-80px;top:70px;background:var(--orbA)}.orb-b{right:-120px;bottom:40px;background:var(--orbB)}.app{min-height:100vh;display:grid;grid-template-columns:390px 1fr;gap:26px;padding:26px}.glass,.panel,.moves,.topbar{background:var(--panel);border:1px solid var(--border);box-shadow:0 20px 60px #0008,inset 0 1px 0 #fff2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:26px}.panel{padding:24px;height:max-content}.glass-inner{background:var(--inner);border:1px solid var(--border);border-radius:20px;padding:16px;box-shadow:inset 0 1px 0 #fff1}.brand{display:flex;gap:14px;align-items:center}.logo{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101a;font-size:32px;font-weight:900;box-shadow:0 0 28px var(--accentGlow)}h1{margin:0;font-size:30px;letter-spacing:-.04em;text-shadow:0 0 22px var(--accentGlow)}h2{font-size:17px;margin:0}.muted,.empty,.security-note{color:var(--muted)}.security-note{font-size:12px;line-height:1.45}.actions{display:grid;gap:12px;margin:18px 0}.create-form{display:grid;gap:10px}button,input,select{border:0;border-radius:16px;padding:13px 15px;font-size:15px}button{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--btnText);font-weight:900;cursor:pointer;box-shadow:0 10px 28px var(--accentGlow);transition:.15s transform,.15s filter}button:hover{filter:brightness(1.12);transform:translateY(-1px)}button.secondary{background:var(--secondary);color:var(--secondaryText);box-shadow:inset 0 1px 0 #fff2,0 10px 24px #0004}button.small{font-size:13px;padding:9px 11px}input,select{width:100%;background:var(--input);color:var(--text);border:1px solid var(--border);outline:none;box-shadow:inset 0 1px 0 #fff1}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--focus)}#joinForm{display:flex;gap:8px}.theme-box{display:grid;gap:8px;margin:18px 0}.sound-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;color:var(--muted)}.sound-row input{width:auto}.info{margin-top:16px}.info p{margin:8px 0}.hidden{display:none!important}.board-zone{min-width:0}.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 18px;margin-bottom:18px;font-weight:900}.board-wrap{display:flex;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.board{width:min(86vw,660px);height:min(86vw,660px);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:1px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:0 30px 80px #000a,0 0 70px var(--boardGlow),inset 0 1px 0 #fff2}.sq{display:flex;align-items:center;justify-content:center;font-size:clamp(34px,7.4vw,66px);user-select:none;cursor:pointer;color:var(--piece);text-shadow:0 2px 8px #0007;transition:.12s transform,.12s filter}.sq:hover{transform:scale(1.03);filter:brightness(1.15)}.light{background:var(--light)}.dark{background:var(--dark)}.selected{outline:5px solid var(--select);outline-offset:-6px;box-shadow:inset 0 0 24px var(--select)}.hint{box-shadow:inset 0 0 0 999px var(--hint)}.danger{box-shadow:inset 0 0 0 999px var(--danger)}.moves{min-width:245px;max-width:330px;max-height:660px;overflow:auto;padding:18px}.moves h3{margin:0 0 10px}.move{padding:8px 0;border-bottom:1px solid var(--border);color:var(--moveText);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.servers{padding:16px;margin-top:16px}.servers-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.games-list{display:grid;gap:10px}.game-card{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:12px;display:grid;gap:7px;box-shadow:inset 0 1px 0 #fff1}.game-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;color:var(--accent)}.pill{font-size:12px;border-radius:999px;padding:5px 9px;background:var(--pill);color:var(--text);border:1px solid var(--border)}.mini-actions{display:flex;gap:8px}.mini-actions button{padding:8px 10px;font-size:13px}.theme-glass{--bg:#020612;--panel:#ffffff14;--inner:#ffffff0d;--card:#ffffff0b;--text:#f3fbff;--muted:#a8bad0;--accent:#64f4ff;--accent2:#a66bff;--accentGlow:#64f4ff55;--btnText:#041018;--secondary:#ffffff16;--secondaryText:#fff;--input:#03101fcc;--border:#ffffff2a;--light:#dffaffcc;--dark:#2c6a82cc;--piece:#061018;--select:#9ffcff;--hint:#58ffc855;--danger:#ff4b7a66;--moveText:#e4fbff;--pill:#ffffff14;--glowA:#00d9ff55;--glowB:#9c5cff55;--orbA:#00d9ff;--orbB:#934cff;--grid:#ffffff0b;--focus:#64f4ff30;--boardGlow:#64f4ff25}.theme-cyber{--bg:#08000f;--panel:#1b092ccc;--inner:#2b0d3f88;--card:#240934aa;--text:#fff4ff;--muted:#d7a9e8;--accent:#ff4fd8;--accent2:#00ffe1;--accentGlow:#ff4fd855;--btnText:#160018;--secondary:#32184dcc;--secondaryText:#fff;--input:#12051dcc;--border:#ff75e333;--light:#ffe2fb;--dark:#6f25e8;--piece:#19001e;--select:#00ffe1;--hint:#00ff9955;--danger:#ff2e6355;--moveText:#ffe8ff;--pill:#ffffff14;--glowA:#ff00aa55;--glowB:#00ffe155;--orbA:#ff00aa;--orbB:#00ffe1;--grid:#ffb7f70b;--focus:#ff4fd82b;--boardGlow:#ff4fd82d}.theme-aurora{--bg:#04140f;--panel:#eafff014;--inner:#eafff00d;--card:#eafff00b;--text:#f5fff8;--muted:#b8d8c5;--accent:#7dff9e;--accent2:#65d5ff;--accentGlow:#7dff9e45;--btnText:#04120a;--secondary:#ffffff16;--secondaryText:#fff;--input:#04140fcc;--border:#dfffff25;--light:#eaffe8;--dark:#219071;--piece:#06120b;--select:#fff270;--hint:#7dff9e55;--danger:#ff6d8e55;--moveText:#effff5;--pill:#ffffff14;--glowA:#7dff9e55;--glowB:#65d5ff55;--orbA:#7dff9e;--orbB:#65d5ff;--grid:#eafff00b;--focus:#7dff9e25;--boardGlow:#7dff9e25}.theme-obsidian{--bg:#050507;--panel:#111217dd;--inner:#1a1c2388;--card:#15171dcc;--text:#f7f7fb;--muted:#aaaebc;--accent:#e8edf7;--accent2:#8f98aa;--accentGlow:#ffffff22;--btnText:#050507;--secondary:#252832;--secondaryText:#fff;--input:#090a0dcc;--border:#ffffff1c;--light:#e5e7ec;--dark:#555c68;--piece:#07080a;--select:#f4d35e;--hint:#60d39455;--danger:#ee605555;--moveText:#e8eaf0;--pill:#ffffff10;--glowA:#ffffff18;--glowB:#6f7dff22;--orbA:#ffffff;--orbB:#6577ff;--grid:#ffffff08;--focus:#ffffff22;--boardGlow:#ffffff18}.theme-classic{--bg:#17110c;--panel:#2b2018dd;--inner:#3b2b2088;--card:#2b2018cc;--text:#fff8ee;--muted:#d2bfa5;--accent:#f0c36a;--accent2:#b9823a;--accentGlow:#f0c36a40;--btnText:#201205;--secondary:#4a3829;--secondaryText:#fff;--input:#1d1510cc;--border:#f0c36a26;--light:#f0d9b5;--dark:#b58863;--piece:#17100b;--select:#ffe66d;--hint:#74ff9555;--danger:#ff6a6a55;--moveText:#fff2df;--pill:#ffffff12;--glowA:#f0c36a44;--glowB:#b9823a44;--orbA:#f0c36a;--orbB:#b9823a;--grid:#f0c36a0a;--focus:#f0c36a2b;--boardGlow:#f0c36a22}@media(max-width:980px){.app{grid-template-columns:1fr;padding:16px}.panel{order:2}.board-zone{order:1}.board{width:min(94vw,660px);height:min(94vw,660px)}#joinForm{flex-direction:column}}

/* Correctif mobile + carreaux visibles dès le design par défaut */
body:not([class^="theme-"]) { background:#020612; color:#f3fbff; }
body:not([class^="theme-"]) .light { background:linear-gradient(135deg,rgba(223,250,255,.92),rgba(160,230,255,.75)); }
body:not([class^="theme-"]) .dark { background:linear-gradient(135deg,rgba(44,106,130,.92),rgba(11,62,88,.82)); }
.board { background:transparent !important; touch-action:manipulation; }
.sq.light,.sq.dark { background-clip:padding-box; }
.sq::after{content:attr(data-coord);position:absolute;font-size:10px;left:7px;bottom:5px;color:rgba(0,0,0,.45);font-weight:800;pointer-events:none}.sq{position:relative}
.dark::after{color:rgba(255,255,255,.5)}
@media(max-width:700px){
  .app{padding:10px;gap:12px}.panel{padding:15px;border-radius:20px}.brand{align-items:flex-start}.logo{width:48px;height:48px;font-size:27px;border-radius:15px}h1{font-size:24px}.muted{font-size:13px}.topbar{position:sticky;top:8px;z-index:5;padding:11px 13px;border-radius:18px;font-size:13px}.board-wrap{gap:12px}.board{width:calc(100vw - 20px);height:calc(100vw - 20px);border-radius:18px}.sq{font-size:clamp(30px,10.5vw,54px)}.sq::after{font-size:8px;left:4px;bottom:3px}.moves{width:100%;min-width:0;max-width:none;max-height:180px;border-radius:18px;padding:12px}.theme-box,.actions{margin:12px 0}button,input,select{padding:12px;border-radius:14px;font-size:14px}.servers{padding:12px}.game-row,.servers-head{align-items:flex-start}.mini-actions{flex-wrap:wrap}.sound-row{font-size:13px}
}
@media(max-width:420px){.board{width:calc(100vw - 12px);height:calc(100vw - 12px)}.app{padding:6px}.panel{padding:12px}.brand{gap:10px}.logo{width:42px;height:42px}h1{font-size:21px}.topbar{font-size:12px}.game-row{flex-direction:column;gap:4px}.pill{align-self:flex-start}}