/* Day of the Blok: shared styles for the game (index.html) and the admin page (admin/). */

:root {
  /* Blokyz brand (blokyz.com): ink, bone, slate, red */
  --ink: #060606;
  --bone: #efe9cc;
  --bone-hi: #fffbe6;
  --bone-dk: #b9b294;
  --slate: #2b2e38;
  --slate-lt: #4a4f5e;
  --red: #d02e2e;
  /* pops pulled from the collection's backgrounds */
  --pink: #f90366;
  --lime: #e3ffc2;
  --gold: #f2b632;
  --teal: #3fd1c8;
  --green: #138a4a;
}
* { box-sizing: border-box; }
/* the pixel font has no symbol glyphs: symbols are wrapped in .sym and drawn by a system font */
.sym { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; font-size: 1.25em; line-height: 1; vertical-align: -.1em; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: "VT323", monospace;
  font-size: 22px;
  line-height: 1.2;
  overflow-x: hidden;
  image-rendering: pixelated;
}
button { font: inherit; }

/* --- backdrop: drifting pixel blocks + CRT scanlines --- */
#stars { position: fixed; inset: 0; z-index: 0; }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}
#flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: var(--red); opacity: 0; }
#flash.on { animation: flash .35s steps(3); }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

.wrap { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }

/* --- marquee bar --- */
.marquee {
  border: 3px solid var(--bone); background: var(--red); color: var(--bone);
  font-family: "Press Start 2P", monospace; font-size: 11px; padding: 8px 0;
  overflow: hidden; white-space: nowrap; margin-bottom: 24px;
}
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 26s linear -7s infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

/* --- logo --- */
.logo { text-align: center; margin: 4px 0 24px; }
.logo h1 {
  font-family: "Press Start 2P", monospace; font-size: clamp(28px, 8vw, 56px);
  margin: 0; letter-spacing: 2px; color: var(--bone);
  text-shadow: 4px 4px 0 var(--red), 8px 8px 0 var(--slate);
}
.logo .sub {
  font-family: "Press Start 2P", monospace; font-size: clamp(10px, 2.6vw, 14px);
  color: var(--gold); margin-top: 18px; letter-spacing: 3px;
}
.playing .logo, .playing .marquee { display: none; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- win95-ish window --- */
.win {
  background: var(--bone); color: var(--ink);
  border: 3px solid; border-color: var(--bone-hi) var(--slate) var(--slate) var(--bone-hi);
  box-shadow: 0 0 0 3px var(--ink), 8px 8px 0 3px var(--pink);
}
.win.shake { animation: shake .4s steps(8); }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 2px); }
  40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -2px); }
}
.win .bar {
  background: linear-gradient(90deg, var(--slate), var(--slate-lt));
  color: var(--bone); padding: 5px 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-family: "Press Start 2P", monospace; font-size: 10px;
}
.win .bar .btns { display: flex; gap: 4px; align-items: center; }
.win .bar .btns i {
  width: 16px; height: 14px; background: var(--bone); display: inline-block;
  border: 2px solid; border-color: var(--bone-hi) var(--ink) var(--ink) var(--bone-hi);
}
.win .bar .tb {
  background: var(--bone); color: var(--ink); cursor: pointer; font-family: "Press Start 2P", monospace; font-size: 8px;
  padding: 3px 5px; border: 2px solid; border-color: var(--bone-hi) var(--ink) var(--ink) var(--bone-hi);
}
.win .bar .tb.off { background: var(--slate-lt); color: var(--bone-dk); text-decoration: line-through; }
.win .body { padding: 22px 20px 26px; text-align: center; }
.win p { margin: 0 0 16px; }
.muted { color: var(--slate-lt); }
h2 { font-family: "Press Start 2P", monospace; font-size: 15px; margin: 0 0 16px; line-height: 1.5; }

/* --- buttons --- */
.btn {
  font-family: "Press Start 2P", monospace; font-size: 14px; cursor: pointer;
  background: var(--red); color: var(--bone); padding: 16px 22px;
  border: 4px solid; border-color: #ff7a7a #6b1010 #6b1010 #ff7a7a;
  box-shadow: 0 0 0 3px var(--ink);
  text-transform: uppercase;
}
.btn:hover { background: var(--pink); }
.btn:active { border-color: #6b1010 #ff7a7a #ff7a7a #6b1010; transform: translate(2px, 2px); }
.btn:disabled { background: var(--slate-lt); cursor: not-allowed; }
.btn.alt { background: var(--slate); border-color: var(--slate-lt) var(--ink) var(--ink) var(--slate-lt); font-size: 11px; padding: 10px 14px; }
.btn.alt:hover { background: var(--slate-lt); }
.btn.go { background: var(--gold); color: var(--ink); border-color: #ffe08a #8a6410 #8a6410 #ffe08a; }
.btn.go:hover { background: #ffd45e; }
.btn.go:disabled { background: var(--bone-dk); color: var(--slate); }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

.wallets { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.wallets .btn { font-size: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.wallets img { width: 20px; height: 20px; }

.progress {
  height: 26px; border: 3px solid var(--ink); background: var(--ink); padding: 3px;
  display: flex; gap: 3px; margin: 12px auto 6px; max-width: 420px;
}
.progress b { flex: 1; background: var(--slate); }
.progress b.on { background: var(--teal); }

.status { font-family: "Press Start 2P", monospace; font-size: 12px; margin: 6px 0 12px; line-height: 1.6; }
.granted { color: var(--green); }
.denied { color: var(--red); }

/* --- character pick --- */
/* the cast: a centred row that wraps as more Blokyz join */
.grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 18px; }
.grid .card { width: min(200px, calc((100% - 36px) / 3)); }
.card { background: var(--ink); color: var(--bone); cursor: pointer; padding: 6px; border: 3px solid var(--slate); text-align: center; }
.card:hover, .card.sel { border-color: var(--gold); }
.card.sel { box-shadow: 0 0 0 3px var(--gold); }
.card canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--slate); }
.card .id { font-family: "Press Start 2P", monospace; font-size: 14px; margin: 10px 0 4px; color: var(--gold); }
.card .nm { font-size: 19px; color: var(--bone-dk); margin-bottom: 4px; }
.daily-note { margin-top: 18px; font-size: 20px; }
.daily-note b { font-family: "Press Start 2P", monospace; font-size: 11px; }

/* --- play --- */
.play { display: grid; grid-template-columns: 240px 1fr; gap: 22px; text-align: left; align-items: start; }
.side { text-align: center; }
.portrait { position: relative; aspect-ratio: 1; border: 4px solid var(--ink); background: var(--slate); overflow: hidden; }
.portrait canvas { width: 100%; height: 100%; display: block; transition: filter .6s; }
.portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portrait .tint { position: absolute; inset: 0; background: var(--red); opacity: 0; pointer-events: none; }
.portrait.w2 .tint { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .22; } }
.portrait .static {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.25) 1px 3px);
  background-size: 100% 6px;
}
.portrait.w3 canvas { filter: grayscale(1) contrast(1.3) brightness(.7); }
.portrait.w3 .static { opacity: 1; animation: roll .25s steps(3) infinite; }
@keyframes roll { to { background-position: 0 6px; } }
.portrait .lost {
  position: absolute; left: 0; right: 0; top: 42%; text-align: center; display: none;
  font-family: "Press Start 2P", monospace; font-size: 15px; color: var(--bone-hi);
  background: var(--ink); padding: 8px 0;
}
.portrait.w3 .lost { display: block; }

.hud { margin-top: 12px; display: grid; gap: 8px; font-family: "Press Start 2P", monospace; font-size: 10px; }
.hp { display: flex; gap: 6px; justify-content: center; align-items: center; }
.hp i { width: 22px; height: 22px; background: var(--red); border: 3px solid var(--ink); display: inline-block; }
.hp i.gone { background: var(--slate); position: relative; }
.hp i.gone::after { content: "✖"; position: absolute; inset: -3px 0 0 0; color: var(--bone); font-size: 14px; font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif; text-align: center; line-height: 22px; font-style: normal; }
.gold { color: #8a6410; font-size: 12px; }
.relic-slot { color: var(--slate-lt); }
.relic-slot.got { color: var(--green); }

.scene-head { font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--slate-lt); margin-bottom: 10px; line-height: 1.6; }
.scene-title { font-family: "Press Start 2P", monospace; font-size: 17px; margin: 0 0 14px; line-height: 1.4; }
.scene-text { font-size: 24px; line-height: 1.15; min-height: 5.2em; }
.choices { display: grid; gap: 10px; margin-top: 16px; }
.choice {
  text-align: left; cursor: pointer; background: var(--bone-hi); color: var(--ink); font-size: 22px; padding: 8px 12px;
  border: 3px solid; border-color: var(--bone-hi) var(--slate) var(--slate) var(--bone-hi); box-shadow: 0 0 0 2px var(--ink);
  display: flex; gap: 10px; align-items: baseline;
}
.choice:hover, .choice:focus-visible { background: var(--gold); outline: none; }
.choice .k { font-family: "Press Start 2P", monospace; font-size: 11px; color: var(--red); }
.choice .special { font-family: "Press Start 2P", monospace; font-size: 8px; line-height: 1.5; color: var(--pink); margin-left: auto; text-align: right; max-width: 38%; }
.result { margin-top: 16px; padding: 12px 14px; border: 3px solid var(--ink); background: var(--ink); color: var(--bone); font-size: 22px; }
.result .tag { font-family: "Press Start 2P", monospace; font-size: 11px; display: block; margin-bottom: 8px; line-height: 1.6; }
.result.good .tag { color: var(--lime); }
.result.bad .tag { color: #ff6b6b; }
.result.relic .tag { color: var(--gold); }

/* --- end + ledger --- */
.share {
  font-family: "VT323", monospace; font-size: 24px; white-space: pre-wrap; text-align: left; margin: 14px auto 0;
  background: var(--ink); color: var(--bone); padding: 14px 16px; border: 3px solid var(--slate); max-width: 460px;
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 18px; }
.stat { background: var(--ink); color: var(--bone); padding: 10px 6px; border: 3px solid var(--slate); }
.stat b { display: block; font-family: "Press Start 2P", monospace; font-size: 18px; color: var(--gold); margin-bottom: 6px; }
.stat span { font-size: 18px; color: var(--bone-dk); }
.relics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: left; }
.relic { background: var(--ink); color: var(--bone); padding: 10px; border: 3px solid var(--slate); font-size: 18px; line-height: 1.1; }
.relic b { display: block; font-family: "Press Start 2P", monospace; font-size: 9px; color: var(--gold); margin-bottom: 6px; line-height: 1.5; }
.relic.locked { opacity: .55; }
.relic.locked b { color: var(--slate-lt); }
.history { margin-top: 18px; text-align: left; font-size: 20px; }
.history div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px dashed var(--bone-dk); padding: 4px 0; }
.board { margin: 20px auto 0; max-width: 520px; text-align: left; }
.board h2 { font-size: 12px; text-align: center; }
.board .row-b { display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 10px; align-items: baseline;
  font-size: 20px; padding: 4px 8px; border-bottom: 2px dashed var(--bone-dk); }
.board .row-b.you { background: var(--gold); border-bottom-color: var(--ink); }
.board .rk { font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--red); }
.board .nm { font-family: "Press Start 2P", monospace; font-size: 9px; }
.board .sq { font-size: 13px; letter-spacing: -1px; white-space: nowrap; }
@media (max-width: 480px) { .board .sq { display: none; } .board .row-b { grid-template-columns: 2.2em 1fr auto; } }

.footer { text-align: center; margin-top: 36px; font-size: 18px; color: var(--bone-dk); }
.footer .counter { display: inline-flex; gap: 2px; margin-top: 8px; font-family: "Press Start 2P", monospace; font-size: 12px; }
.footer .counter span { background: var(--ink); color: #39ff14; border: 2px solid var(--slate-lt); padding: 4px 3px; }
.footer a { color: var(--gold); }

/* --- the wallet safety notice --- */
.safety {
  text-align: left; margin: 22px auto 0; max-width: 560px; padding: 12px 16px 6px;
  background: var(--ink); color: var(--bone); border: 3px solid var(--green); font-size: 19px; line-height: 1.2;
}
.safety > b:first-child { display: block; font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--lime); line-height: 1.6; margin-bottom: 8px; }
.safety p { margin: 0 0 10px; }
.safety ul { margin: 0 0 10px; padding-left: 20px; }
.safety li { margin-bottom: 6px; }
.safety code { font-family: inherit; color: var(--gold); }
.safety.compact { margin: 0 auto 14px; }

.hidden { display: none !important; }

@media (max-width: 680px) {
  .play { grid-template-columns: 1fr; }
  .side { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; text-align: left; }
  .hud { margin-top: 0; }
  .hp { justify-content: flex-start; }
  .stats, .relics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  body { font-size: 20px; }
  .win .body { padding: 18px 14px 22px; }
  .win .bar .btns i { display: none; }
  .btn { font-size: 12px; padding: 14px 16px; }
  .grid { gap: 12px; }
  .scene-text { font-size: 22px; }
}