/* HOOD DERBY — пиксельный UI-кит. Палитра карточек коллекции.
   Правила: никаких градиентов (дизеринг), сетка 4px, фаски 2px,
   image-rendering: pixelated везде. */
:root{
  --track:#0d120e; --panel:#151c16; --panel2:#1b241c; --panel3:#232e24;
  --cream:#ece5d3; --dim:#9aa08f; --amber:#ffb52e; --gold:#f5c542;
  --line:#2a352b; --red:#cc2020; --green:#3e8e4e; --navy:#16233a;
  --burn:#ff6a2b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--track); color:var(--cream);
  font:14px/1.6 "IBM Plex Mono",ui-monospace,monospace;
  min-height:100vh; display:flex; flex-direction:column;
}
img{image-rendering:pixelated}
a{color:var(--amber); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.disp{font-family:"Press Start 2P",monospace; letter-spacing:0; line-height:1.5}
h1{font-size:18px} h2{font-size:12px;color:var(--amber);margin-bottom:10px}
.dim{color:var(--dim)} .gold{color:var(--gold)} .red{color:var(--red)}
.burn{color:var(--burn)}

/* ---- фазы дня (класс на body) ---- */
body.phase-night{--track:#0a0d16; --panel:#10141f; --panel2:#151a28; --line:#232a3c}
body.phase-dawn{--track:#141110; --panel:#1c1714; --panel2:#241d18; --line:#3a2f26}
body.phase-dusk{--track:#160f12; --panel:#1e1418; --panel2:#281a1f; --line:#3c2630}

/* ---- вывеска / навигация ---- */
header.sign{
  background:var(--panel); border-bottom:2px solid var(--line);
  padding:10px 16px; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:8px;font-family:"Press Start 2P";
  font-size:13px;color:var(--gold)}
.logo img{width:24px;height:24px}
nav.marq{display:flex;gap:2px;flex-wrap:wrap}
nav.marq a{
  padding:6px 10px; color:var(--cream); background:var(--panel2);
  border:2px solid var(--line); border-bottom-width:4px;
  font-family:"Press Start 2P"; font-size:9px; line-height:1.6;
}
nav.marq a:hover{background:var(--panel3);text-decoration:none}
nav.marq a.on{background:var(--amber); color:#161207; border-color:#7a5a16}
.signright{margin-left:auto; display:flex; gap:10px; align-items:center;
  font-size:12px}
.clock{color:var(--amber)}
button.px, .px-btn{
  font:9px/1.6 "Press Start 2P",monospace; color:#161207; background:var(--amber);
  border:2px solid #7a5a16; border-bottom-width:5px; padding:8px 14px;
  cursor:pointer; letter-spacing:1px;
}
button.px:active{border-bottom-width:2px; transform:translateY(3px)}
button.px[disabled]{background:var(--panel3);color:var(--dim);
  border-color:var(--line); cursor:not-allowed}
button.px.ghost{background:var(--panel2);color:var(--cream);border-color:var(--line)}

/* ---- панели ---- */
main{flex:1; width:min(1120px,100%); margin:0 auto; padding:20px 16px}
.panel{
  background:var(--panel); border:2px solid var(--line);
  box-shadow:0 4px 0 #060906; padding:14px; margin-bottom:16px;
}
.panel .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---- перекидное табло ---- */
.flap{display:inline-flex;gap:2px}
.flap span{
  display:inline-block;min-width:22px;padding:4px 2px;text-align:center;
  background:#0a0f0b;color:var(--gold);border:1px solid var(--line);
  border-bottom:3px solid #000;font:14px/1.4 "Press Start 2P";
}
.flap span.flip{animation:flapflip .18s steps(2)}
@keyframes flapflip{0%{transform:scaleY(1)}50%{transform:scaleY(.1)}100%{transform:scaleY(1)}}
.flap small{align-self:center;color:var(--dim);padding:0 4px}

/* ---- бегущая строка ---- */
.tape{
  overflow:hidden; white-space:nowrap; background:#0a0f0b;
  border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  font-size:12px; padding:5px 0; color:var(--dim);
}
.tape .in{display:inline-block; padding-left:100%;
  animation:tape 60s linear infinite}
@keyframes tape{to{transform:translateX(-100%)}}
.tape b{color:var(--cream)} .tape i{font-style:normal;color:var(--amber)}

/* ---- жетоны конюшен ---- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;
  background:var(--panel2);border:2px solid var(--line);font-size:12px;
}
.chip .sw{width:14px;height:14px;border:1px solid #000;
  display:inline-block}
.chip .sw i{display:block;width:50%;height:100%}

/* ---- терминал кассы ---- */
.term{
  background:#07130a; border:2px solid #1c3a24; color:#7ce28a;
  font:13px/1.7 "IBM Plex Mono",monospace; padding:14px;
  text-shadow:0 0 6px rgba(124,226,138,.35);
}
.term h2{color:#a8f0b0;font-family:"IBM Plex Mono";font-size:14px}
.term .amber{color:var(--amber)}
.term input{
  background:#04220c;border:2px solid #1c3a24;color:#c8f5cd;
  font:inherit;padding:4px 8px;width:120px
}

/* ---- таблицы ---- */
table.px{width:100%;border-collapse:collapse;font-size:13px}
table.px th{color:var(--dim);text-align:left;font-weight:400;
  border-bottom:2px solid var(--line);padding:4px 8px}
table.px td{padding:5px 8px;border-bottom:1px solid #1c241d}
table.px tr:hover td{background:var(--panel2)}

/* ---- штампы/бейджи ---- */
.stamp{
  display:inline-block;border:2px solid var(--red);color:var(--red);
  padding:3px 8px;font:8px/1.6 "Press Start 2P";transform:rotate(-4deg)
}
.stamp.free{border-color:var(--green);color:#7ce28a}
.badge{display:inline-block;background:var(--panel3);border:1px solid var(--line);
  padding:1px 7px;font-size:11px;color:var(--dim)}

/* ---- карточки лошадей ---- */
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.hcard{background:var(--panel);border:2px solid var(--line);padding:10px;
  text-align:center}
.hcard img{width:100%;height:auto;aspect-ratio:1/1;border:1px solid var(--line);background:var(--panel2)}
.hcard.gold{border-color:var(--gold)}
.hcard .nm{font-family:"Press Start 2P";font-size:9px;line-height:1.6;margin-top:8px}

/* ---- CRT ---- */
body.crt::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 4px);
}
.crt-toggle{cursor:pointer;user-select:none}

/* ---- разное ---- */
.big-num{font:20px/1.4 "Press Start 2P";color:var(--gold)}
.hr{border:0;border-top:2px solid var(--line);margin:12px 0}
.note{font-size:12px;color:var(--dim)}
.center{text-align:center}
.mt{margin-top:12px}
ul.px{list-style:none}
ul.px li{padding-left:16px;position:relative}
ul.px li::before{content:"▸";position:absolute;left:0;color:var(--amber)}