/* Kryptris Service Shell - Bytes of Destiny alpha4 */
body.kryptris-page {
  min-height: 100vh;
  overflow: hidden;
  background: #020303;
}
.kryptris-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,0,212,.15), transparent 24%),
    radial-gradient(circle at 82% 30%, rgba(0,255,204,.16), transparent 26%),
    linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.72)),
    url('../assets/images/startbild.png') center/cover no-repeat;
  transform: scale(1.03);
  animation: kryptrisDrift 26s ease-in-out infinite alternate;
  z-index: -3;
}
.kryptris-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,255,204,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,212,.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000 0, transparent 78%);
}
.kryptris-shell {
  width: min(1600px, 96vw);
  height: min(900px, 94vh);
  margin: 3vh auto;
  position: relative;
  border: 1px solid rgba(0,255,204,.34);
  box-shadow: 0 0 42px rgba(0,255,204,.18), inset 0 0 90px rgba(0,0,0,.62);
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.kryptris-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0,255,204,.25);
  background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,35,30,.45), rgba(0,0,0,.84));
}
.kryptris-brand {
  display:flex;
  flex-direction:column;
  line-height:1;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing:.16em;
}
.kryptris-brand strong { color: var(--kaspa); font-size: 1.1rem; text-shadow: var(--shadow-kaspa); }
.kryptris-brand span { color: var(--muted); font-size:.72rem; margin-top:5px; }
.kryptris-account-strip {
  display:flex;
  align-items:center;
  gap: 18px;
  color: var(--text);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
}
.kryptris-account-strip b { color: var(--kaspa); font-family: monospace; font-size:1rem; letter-spacing:.04em; }
.status-dot { width:10px; height:10px; border-radius:99px; display:inline-block; margin-right:7px; background: var(--kaspa); box-shadow: 0 0 14px var(--kaspa); }
.status-dot.is-warn { background: var(--magenta); box-shadow: 0 0 14px var(--magenta); }
.kryptris-stage { position:absolute; inset:64px 0 0 0; }
.game-setup-mask {
  position:absolute;
  top:50%; left:50%; transform: translate(-50%, -50%);
  width:min(820px, 92vw);
  padding: 28px;
  border: 1px solid rgba(0,255,204,.38);
  background: linear-gradient(180deg, rgba(2,10,10,.88), rgba(0,0,0,.84));
  box-shadow: 0 0 36px rgba(0,255,204,.22), inset 0 0 42px rgba(255,0,212,.04);
}
.service-kicker { color: var(--magenta); font-family: var(--font-display); text-transform:uppercase; letter-spacing:.22em; font-weight:700; font-size:.82rem; text-shadow: var(--shadow-magenta); }
.game-setup-mask h1, .game-setup-mask h2 {
  margin: 6px 0 10px;
  color: var(--kaspa);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 7vw, 5.4rem);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.12em;
  text-shadow: 0 0 26px rgba(0,255,204,.42);
}
.kryptris-subline { color: var(--text); max-width: 680px; line-height:1.55; margin-bottom: 20px; }
.kryptris-rules {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.rule-tile {
  min-height: 84px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.48);
}
.rule-tile small { display:block; color: var(--muted); text-transform:uppercase; font-family:var(--font-display); letter-spacing:.12em; }
.rule-tile strong { display:block; margin-top: 8px; color: var(--kaspa); font-family:monospace; font-size:1.2rem; }
.mask-name-input, .session-id-field {
  width:100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(0,255,204,.42);
  outline:none;
  font-family: var(--font-display);
  letter-spacing:.08em;
  text-transform: uppercase;
}
.mask-name-input:focus, .session-id-field:focus { box-shadow: 0 0 22px rgba(0,255,204,.25); border-color: var(--kaspa); }
.kryptris-controls-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top:18px; }
.kryptris-menu-stack { display:grid; gap: 12px; }
.multiplayer-stack-box {
  border: 1px solid rgba(255,0,212,.34);
  background: rgba(255,0,212,.045);
  padding: 14px;
  box-shadow: inset 0 0 30px rgba(255,0,212,.04);
}
.stack-join-row { display:grid; grid-template-columns: 1fr auto auto; gap: 10px; margin-top: 10px; }
.mp-lobby-text { color: var(--magenta); font-family: var(--font-display); text-transform:uppercase; letter-spacing:.14em; margin-top:16px; text-shadow: var(--shadow-magenta); }
.kryptris-help {
  color: var(--muted);
  line-height:1.55;
  border-left: 1px solid rgba(0,255,204,.34);
  padding-left: 16px;
}
.kryptris-help b { color: var(--kaspa); }
.kryptris-help .mag { color: var(--magenta); }
#kryptris-game-area {
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, rgba(0,255,204,.05), rgba(0,0,0,.78) 60%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
#kryptris-fullscreen-layout {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: clamp(18px, 3vw, 42px);
  width: 100%;
}
.kryptris-player-zone { display:flex; flex-direction:column; align-items:center; gap:8px; }
.kryptris-player-zone h3 { color: var(--text); font-family: var(--font-display); text-transform:uppercase; letter-spacing:.14em; text-shadow: var(--shadow-kaspa); }
.kryptris-matrix-border {
  position:relative;
  padding: 8px;
  border: 1px solid rgba(0,255,204,.65);
  background: rgba(0,0,0,.72);
  box-shadow: 0 0 32px rgba(0,255,204,.30), inset 0 0 34px rgba(0,255,204,.04);
}
.kryptris-matrix-border::before, .kryptris-matrix-border::after { content:""; position:absolute; width:20px; height:20px; border-color: var(--magenta); opacity:.9; }
.kryptris-matrix-border::before { left:-2px; top:-2px; border-left:2px solid; border-top:2px solid; }
.kryptris-matrix-border::after { right:-2px; bottom:-2px; border-right:2px solid; border-bottom:2px solid; }
.kryptris-grid-canvas {
  width: min(36vh, 360px);
  height: min(72vh, 720px);
  display:grid;
  grid-template-rows: repeat(20, 1fr);
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  background: #020303;
}
.k-cell { background: rgba(7,14,14,.86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.block-I { background: #00f7ff; box-shadow: inset 0 0 10px rgba(255,255,255,.65), 0 0 10px rgba(0,247,255,.45); }
.block-O { background: #f7ff00; box-shadow: inset 0 0 10px rgba(255,255,255,.65), 0 0 10px rgba(247,255,0,.45); }
.block-T { background: #ff00d4; box-shadow: inset 0 0 10px rgba(255,255,255,.55), 0 0 12px rgba(255,0,212,.55); }
.block-L { background: #ff8a00; box-shadow: inset 0 0 10px rgba(255,255,255,.55), 0 0 10px rgba(255,138,0,.45); }
.block-J { background: #4864ff; box-shadow: inset 0 0 10px rgba(255,255,255,.55), 0 0 10px rgba(72,100,255,.45); }
.block-S { background: #00ff7b; box-shadow: inset 0 0 10px rgba(255,255,255,.55), 0 0 10px rgba(0,255,123,.45); }
.block-Z { background: #ff3050; box-shadow: inset 0 0 10px rgba(255,255,255,.55), 0 0 10px rgba(255,48,80,.45); }
.block-G { background: #555; border:1px solid #999; box-shadow: inset 0 0 12px rgba(0,0,0,.85), 0 0 8px rgba(255,255,255,.10); }
#kryptris-hud-panel { width: 230px; display:grid; gap: 14px; margin-top: 32px; }
.hud-block { padding: 14px; border:1px solid rgba(0,255,204,.42); background:rgba(0,0,0,.72); box-shadow: inset 0 0 28px rgba(0,255,204,.035); }
.hud-title { color: var(--muted); font-family: var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; }
.hud-value { color: var(--kaspa); font-family:monospace; font-size:1.8rem; text-shadow:var(--shadow-kaspa); }
#kryptris-next-preview { width: 92px; height:92px; display:grid; grid-template: repeat(4,1fr)/repeat(4,1fr); gap:2px; margin:10px auto 0; background:#020303; padding:3px; border:1px solid rgba(255,255,255,.12); }
.ingame-cancel-btn { position:absolute; top: 82px; left: 18px; z-index:4; }
.kryptris-popup {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:340px; padding:30px; z-index:50; text-align:center;
  color:var(--text); background:rgba(0,0,0,.92); border:1px solid rgba(0,255,204,.55); box-shadow:0 0 42px rgba(0,255,204,.28);
}
.kryptris-popup h2 { color:var(--kaspa); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; margin-bottom:18px; }
.hidden { display:none !important; }
@keyframes kryptrisDrift { from { transform: scale(1.03) translate3d(0,0,0); } to { transform: scale(1.08) translate3d(-1.2%, .8%, 0); } }
@media (max-width: 1050px) {
  .kryptris-controls-grid, .kryptris-rules { grid-template-columns:1fr; }
  .kryptris-shell { height: 96vh; margin:2vh auto; overflow-y:auto; }
  .kryptris-stage { position:relative; inset:auto; min-height:calc(96vh - 64px); }
  .game-setup-mask { position:relative; top:auto; left:auto; transform:none; margin: 24px auto; }
  .kryptris-grid-canvas { width: 270px; height:540px; }
  #kryptris-hud-panel { width:180px; }
}

/* === GO-LIVE MERGED FIX: GLOBAL HUD SAFE AREA ===
   Only the interactive shell moves below the fixed KAS header.
   .kryptris-backdrop remains fixed and is NOT moved. */
body.has-destiny-global-hud .kryptris-shell {
  box-sizing: border-box;
  height: 100vh;
  padding-top: 76px;
}
body.has-destiny-global-hud .ingame-cancel-btn {
  top: 88px;
  z-index: 12100;
}
@media (max-width:760px) {
  body.has-destiny-global-hud .kryptris-shell { padding-top: 118px; }
  body.has-destiny-global-hud .ingame-cancel-btn { top: 130px; }
}