/* Cryptic Breach standalone presentation and integration surfaces. */
:root {
  --ward-bone: #e8fafa;
  --ward-parchment: #d8ffff;
  --ward-cyan: #00cccc;
  --ward-cyan-hot: #00ffff;
  --ward-purple: #8e66c8;
  --ward-oxblood: #702936;
  --ward-green: #6fb7b7;
  --ward-soot: #0a0a0a;
  --ward-void: #050607;
}

[hidden] { display: none !important; }

html, body {
  cursor: url('/images/cursors/pointer.cur') 8 8, url('/images/cursors/pointer.png') 8 8, auto;
}

button, a, input, summary {
  cursor: url('/images/cursors/hover.cur') 11 0, url('/images/cursors/hover.png') 11 0, pointer;
}

#game-canvas { position: fixed; inset: 0; z-index: 0; }
#game-hud, #hud, #crosshair, #hitmarker, #wave-banner, #boss-bar,
#score-pop, #damage-vignette, #target-layer, #touch-controls, #rotate-overlay { z-index: 4; }

#overlay {
  overflow: auto;
  padding: 34px 22px 42px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(0, 204, 204, .08), transparent 48%),
    radial-gradient(ellipse at 18% 90%, rgba(112, 41, 54, .18), transparent 44%),
    linear-gradient(135deg, #050607 0%, #0d1015 54%, #050607 100%);
}

#overlay::before {
  background-image: none;
  opacity: 0;
}

#overlay h1 { color: var(--ward-bone); text-shadow: 0 0 18px rgba(0, 204, 204, .2), 0 0 30px rgba(142, 102, 200, .16); }
#overlay .sub { color: rgba(216, 255, 255, .72); letter-spacing: 3px; }
#overlay .brief { color: rgba(207, 234, 234, .78); border-color: rgba(0, 204, 204, .28); }
#overlay .cta {
  min-height: 48px;
  min-width: 230px;
  border-color: var(--ward-cyan);
  color: var(--ward-cyan);
  background: linear-gradient(180deg, rgba(18, 25, 29, .98), rgba(9, 12, 17, .98));
  text-shadow: 0 0 9px rgba(0, 204, 204, .22);
}
#overlay .cta:hover:not(:disabled) { background: linear-gradient(180deg, rgba(50, 37, 72, .98), rgba(22, 15, 31, .98)); border-color: var(--ward-cyan-hot); color: var(--ward-bone); box-shadow: 0 0 22px rgba(142, 102, 200, .34), inset 0 0 12px rgba(0, 204, 204, .12); }
#overlay .cta:focus-visible { background: linear-gradient(180deg, rgba(42, 31, 62, .98), rgba(13, 12, 20, .98)); border-color: var(--ward-cyan-hot); color: var(--ward-bone); outline: 2px solid var(--ward-cyan-hot); outline-offset: 4px; box-shadow: 0 0 0 5px rgba(142, 102, 200, .22), 0 0 20px rgba(0, 204, 204, .28); }
#overlay .cta:active:not(:disabled) { transform: translateY(1px); background: #702936; border-color: #8e66c8; }
#overlay .cta:disabled,
#overlay .cta[aria-disabled="true"] { background: #130f14; border-color: #644653; color: #846f82; box-shadow: none; text-shadow: none; }

.keeper-field { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 16px; color: rgba(216, 255, 255, .86); font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: 1.5px; text-transform: uppercase; }
.keeper-field input { width: min(240px, 45vw); padding: 9px 11px; border: 1px solid rgba(0, 204, 204, .56); background: rgba(5, 10, 13, .92); color: var(--ward-bone); font: 600 14px/1.2 system-ui, sans-serif; letter-spacing: .04em; }
.keeper-field input:focus { outline: 2px solid rgba(0, 255, 255, .82); outline-offset: 2px; }
.cc-keeper-name-status { display: block; max-width: 320px; margin: -8px auto 10px; color: #e08c96; font: 700 10px/1.4 ui-monospace, monospace; }

.breach-board { width: min(650px, 94vw); margin: 18px auto 0; padding-top: 12px; border-top: 1px solid rgba(0, 204, 204, .28); text-align: left; }
.breach-board h2 { margin: 0 0 7px; color: var(--ward-bone); font: 700 12px/1.2 ui-monospace, monospace; letter-spacing: 2.5px; text-align: center; text-transform: uppercase; }
#lbTable { width: 100%; border-collapse: collapse; border: 1px solid rgba(0, 127, 127, .9); background: rgba(5, 12, 16, .9); color: #cfeaea; font: 600 11px/1.2 ui-monospace, monospace; }
#lbTable th, #lbTable td { padding: 5px 8px; border: 1px solid rgba(0, 204, 204, .28); text-align: left; }
#lbTable th { background: rgba(0, 204, 204, .1); color: #aefefe; }
#lbTable td:not(:nth-child(2)), #lbTable th:not(:nth-child(2)) { text-align: right; }
#lbTable .empty-cell { color: rgba(223, 245, 240, .56); font-style: italic; text-align: center; }
.breach-status { min-height: 1.2em; margin: 7px 0 0; color: rgba(232, 245, 239, .68); font: 600 10px/1.35 ui-monospace, monospace; text-align: center; }
.breach-status.is-error { color: #e08c96; }
.overlay-footer {
  order: 3;
  flex: 0 0 auto;
  width: min(650px, 94vw);
  display: flex;
  justify-content: center;
  margin: 20px auto 0;
  padding: 0 0 max(0px, env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 3;
}

.return-link {
  position: static;
  z-index: 3;
  display: inline-flex;
  min-height: 48px;
  min-width: 220px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 22px;
  transform: none;
  border: 1px solid var(--ward-cyan);
  border-radius: 4px;
  background: rgba(5, 12, 16, .96);
  color: var(--ward-cyan);
  font: 800 12px/1.2 ui-monospace, monospace;
  letter-spacing: 1.4px;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: auto;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .52), inset 0 0 0 1px rgba(0, 204, 204, .1);
}

/* The shared bug bar and Krix cameo live in the lower corners on standalone
   pages; this centered control stays clear of both widgets in every menu state. */
.return-link:hover,
.return-link:focus-visible {
  border-color: var(--ward-cyan-hot);
  background: #2b1b3c;
  color: var(--ward-bone);
  outline: 2px solid var(--ward-cyan-hot);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  #overlay { justify-content: flex-start; padding-top: 22px; padding-bottom: 32px; }
  .overlay-footer { width: min(650px, 94vw); margin-top: 14px; }
  #overlay h1 { font-size: clamp(34px, 12vw, 56px); }
  .keeper-field { flex-direction: column; gap: 6px; }
  .keeper-field input { width: min(280px, 78vw); }
  #lbTable { font-size: 9px; }
  #lbTable th, #lbTable td { padding: 4px 5px; }
}