body.chess-body { min-height:100vh; background:#000; color:var(--text); overflow:hidden; }
.chess-shell { min-height:100vh; position:relative; isolation:isolate; padding:18px; }
.chess-bg { position:fixed; inset:-4vh -4vw; background:url("../assets/images/startbild.png") center/cover no-repeat; transform:scale(1.06); filter:saturate(.82) contrast(1.1); z-index:-4; animation:chessDrift 30s ease-in-out infinite alternate; }
.chess-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(0,255,204,.10), transparent 30%), rgba(0,0,0,.72); }
.chess-shell::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(rgba(0,255,204,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,212,.025) 1px, transparent 1px); background-size:54px 54px; opacity:.55; z-index:-2; }
.chess-shell::after { content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035), rgba(255,255,255,.035) 1px, transparent 1px, transparent 5px); opacity:.18; z-index:20; mix-blend-mode:overlay; }
@keyframes chessDrift { from { transform:scale(1.05) translate(-.5%, -.3%); } to { transform:scale(1.1) translate(.5%, .3%); } }
.service-topbar { width:min(1240px,100%); margin:0 auto; display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; }
.service-brand,.service-meter { min-height:58px; background:rgba(0,0,0,.72); border:1px solid var(--line); box-shadow:var(--shadow-kaspa); backdrop-filter:blur(12px); padding:10px 14px; display:flex; flex-direction:column; justify-content:center; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); font-family:var(--font-display); text-transform:uppercase; }
.service-brand small,.service-meter small,.panel-block small { color:var(--muted); letter-spacing:.14em; font-size:.72rem; }
.service-brand strong,.service-meter strong,.panel-block strong { color:var(--text); letter-spacing:.08em; }
.chess-menu { min-height:calc(100vh - 96px); display:grid; place-items:center; }
.menu-panel { width:min(760px,calc(100% - 16px)); background:linear-gradient(135deg, rgba(0,0,0,.88), rgba(2,18,18,.7)); border:1px solid var(--line); box-shadow:var(--shadow-kaspa), inset 0 0 50px rgba(0,255,204,.045); backdrop-filter:blur(12px); padding:clamp(22px,4vw,44px); clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }
.eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.22em; color:var(--kaspa); text-shadow:0 0 12px rgba(0,255,204,.55); }
.menu-panel h1 { margin-top:12px; font-size:clamp(3rem,8vw,7rem); font-family:var(--font-display); text-transform:uppercase; line-height:.9; letter-spacing:.08em; text-shadow:0 0 34px rgba(0,255,204,.38); }
.copy { max-width:640px; margin-top:16px; color:#d6fffa; line-height:1.55; }
.input-label { display:block; margin-top:22px; color:var(--muted); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; }
.machine-input { width:100%; margin-top:8px; min-height:48px; background:rgba(0,0,0,.76); border:1px solid var(--line); color:var(--text); padding:10px 14px; font-family:var(--font-display); font-size:1rem; letter-spacing:.08em; outline:none; }
.machine-input:focus { border-color:var(--kaspa); box-shadow:0 0 18px rgba(0,255,204,.22); }
.difficulty-row,.menu-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.diff-btn.is-active { background:var(--kaspa); color:#001412; }
.note-box { margin-top:18px; border:1px solid rgba(255,0,212,.28); background:rgba(255,0,212,.06); padding:12px 14px; display:flex; flex-direction:column; gap:4px; color:#e6d8e9; }
.note-box strong { color:var(--magenta); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; }
.chess-game { width:min(1240px,100%); height:calc(100vh - 100px); margin:18px auto 0; display:grid; grid-template-columns:220px minmax(420px, 680px) 260px; gap:18px; align-items:center; }
.side-panel { height:min(680px,calc(100vh - 118px)); background:rgba(0,0,0,.74); border:1px solid var(--line); box-shadow:var(--shadow-kaspa), inset 0 0 38px rgba(0,255,204,.04); backdrop-filter:blur(10px); padding:16px; display:flex; flex-direction:column; gap:12px; clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.right-panel { border-color:rgba(255,0,212,.34); box-shadow:var(--shadow-magenta), inset 0 0 38px rgba(255,0,212,.04); }
.panel-block { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035); padding:12px; display:flex; flex-direction:column; gap:5px; font-family:var(--font-display); text-transform:uppercase; }
.capture-row { min-height:34px; color:var(--kaspa); font-size:1.25rem; letter-spacing:.12em; word-break:break-word; }
.log-panel { flex:1; overflow:auto; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.55); padding:10px; color:#c9dfdc; font-family:var(--font-mono); font-size:.82rem; line-height:1.55; }
.log-line { border-bottom:1px solid rgba(255,255,255,.06); padding:4px 0; }
.board-wrap { position:relative; display:grid; place-items:center; width:100%; min-width:0; }
.chess-board {
  --board-size: min(680px, calc(100vw - 560px), calc(100vh - 142px));
  width: var(--board-size);
  height: var(--board-size);
  min-width: 0;
  min-height: 0;
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  grid-template-rows:repeat(8, minmax(0,1fr));
  border:2px solid var(--kaspa);
  box-shadow:0 0 36px rgba(0,255,204,.34), inset 0 0 30px rgba(0,255,204,.12);
  background:#000;
  overflow:hidden;
  contain:layout paint size;
}
.square {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  appearance:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  line-height:1;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",serif;
  font-size:clamp(1.8rem, min(4.25vw, 7vh), 4rem);
  cursor:pointer;
  transition:filter .12s ease, box-shadow .12s ease;
}
.square.light { background:linear-gradient(135deg, rgba(0,255,204,.20), rgba(0,0,0,.76)); }
.square.dark { background:linear-gradient(135deg, rgba(255,0,212,.11), rgba(0,0,0,.88)); }
.square:hover { filter:brightness(1.35); box-shadow:inset 0 0 24px rgba(0,255,204,.22); }
.square.selected { box-shadow:inset 0 0 0 3px var(--kaspa), inset 0 0 26px rgba(0,255,204,.45); }
.square.legal::after { content:""; width:24%; height:24%; border-radius:50%; background:var(--kaspa); box-shadow:0 0 16px var(--kaspa); opacity:.75; position:absolute; }
.square.capture::after { content:""; position:absolute; inset:8px; border:3px solid var(--magenta); box-shadow:inset 0 0 18px rgba(255,0,212,.3), 0 0 18px rgba(255,0,212,.35); }
.piece-white { color:#ecfffb; text-shadow:0 0 15px rgba(0,255,204,.45); }
.piece-black { color:#ffbcf2; text-shadow:0 0 15px rgba(255,0,212,.55); }
.check-banner { position:absolute; top:-16px; z-index:5; background:rgba(255,0,212,.92); color:#000; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.2em; font-weight:800; padding:8px 18px; box-shadow:0 0 24px rgba(255,0,212,.55); }
.result-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.result-card { width:min(520px,calc(100% - 32px)); background:rgba(0,0,0,.92); border:1px solid var(--kaspa); box-shadow:var(--shadow-kaspa); padding:30px; text-align:center; }
.result-card h2 { font-family:var(--font-display); text-transform:uppercase; color:var(--kaspa); font-size:clamp(2rem,7vw,4rem); }
.result-card p { color:#c9dfdc; margin-top:10px; }
.hidden { display:none !important; }
@media (max-width: 960px) { body.chess-body { overflow:auto; } .service-topbar { grid-template-columns:1fr 1fr; } .chess-game { height:auto; grid-template-columns:1fr; } .side-panel { height:auto; } .chess-board { width:min(92vw,680px); } }

.square.last-from { box-shadow: inset 0 0 0 3px rgba(0,255,204,.55), inset 0 0 28px rgba(0,255,204,.18); }
.square.last-to { box-shadow: inset 0 0 0 3px rgba(255,0,212,.72), inset 0 0 30px rgba(255,0,212,.22); }
.move-path {
  position:absolute;
  z-index:30;
  height:3px;
  transform-origin:left center;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,255,204,.15), var(--kaspa), var(--magenta));
  box-shadow:0 0 12px var(--kaspa), 0 0 24px rgba(255,0,212,.45);
  opacity:0;
}
.moving-piece {
  position:absolute;
  z-index:40;
  display:grid;
  place-items:center;
  pointer-events:none;
  line-height:1;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",serif;
  filter:drop-shadow(0 0 12px rgba(0,255,204,.65));
  will-change:transform;
}
@media (max-width: 960px) {
  .chess-board { --board-size:min(92vw, 680px); }
}

.chess-clock{font-family:var(--font-mono);font-size:1.45rem;color:var(--kaspa);margin-top:6px}.right-panel .chess-clock{color:var(--magenta)}.time-btn.is-active{background:var(--kaspa);color:#001412}

.chess-lobby{margin-top:18px;padding:16px;border:1px solid rgba(0,255,204,.3);background:rgba(0,0,0,.5)}
.chess-lobby .lobby-head,.chess-lobby .session-code-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.chess-lobby .lobby-actions{display:grid;gap:10px;margin-top:12px}
.chess-lobby .join-line{display:flex;gap:8px}
.chess-lobby .join-line .machine-input{flex:1}
.chess-lobby .player-list{display:grid;gap:6px;margin:12px 0}
.chess-lobby .lobby-player{display:flex;justify-content:space-between;padding:8px;border:1px solid rgba(255,255,255,.1)}

/* === GO-LIVE MERGED FIX: GLOBAL HUD SAFE AREA ===
   Background remains untouched; chess menu/board starts below the fixed KAS header. */
body.has-destiny-global-hud .chess-shell {
  box-sizing: border-box;
  height: 100vh;
  padding-top: 76px;
}
@media (max-width:760px) {
  body.has-destiny-global-hud .chess-shell { padding-top: 118px; }
}