@font-face { font-family: "Tiny5"; src: url("fonts/tiny5-cyrillic.woff2") format("woff2"); font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Tiny5"; src: url("fonts/tiny5-latin.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+25B2, U+25BC; }

:root {
  --bg: #000; --ink: #f3efe4; --dim: #9c978b; --line: #2b2a28; --hot: #9b1b30; --hot2: #c22a44; --good: #7fc46a; --bad: #e0604f; --gold: #ecbd3e;
  --f: "Tiny5", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #1e2e60; color: var(--ink); font: 15px/1.3 var(--f); overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: #111; border: 2px solid var(--line); padding: 3px 8px; }
button:hover { border-color: var(--dim); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

#c { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: grab; display: block; }
#c.drag { cursor: grabbing; }

.panel { position: fixed; background: var(--bg); border: 2px solid var(--line); box-shadow: 0 0 0 2px #000; }

/* ── сводка */
#hud { left: 12px; top: 12px; width: 236px; padding: 10px 12px 9px; }
#pname { font-size: 20px; line-height: 1.1; font-weight: 400; letter-spacing: 0; }
#sub { color: var(--dim); margin: 3px 0 8px; display: flex; flex-wrap: wrap; gap: 0 10px; }
#sub span:first-child { color: var(--gold); }
#bars { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
#bars label { color: var(--dim); font-size: 15px; }
#bars .bar { height: 8px; background: #1a1917; position: relative; }
#bars .bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width .4s steps(8); }
#bars .bar.low i { background: var(--bad); }
#nums { color: var(--dim); font-size: 15px; margin-top: 8px; }
#nums { display: flex; flex-wrap: wrap; gap: 0 12px; }
#nums b { color: var(--ink); font-weight: 400; }

/* ── время */
#ctl { right: 12px; top: 12px; padding: 5px; display: flex; gap: 4px; align-items: center; }
#ctl button.on { background: var(--ink); color: #000; border-color: var(--ink); }
#fps { color: var(--dim); min-width: 34px; text-align: right; font-size: 15px; padding-right: 4px; }
#toggle { display: none; }

/* ── летопись и законы */
#side { right: 12px; top: 62px; bottom: 132px; width: 300px; display: flex; flex-direction: column; }
.tabs { display: flex; border-bottom: 2px solid var(--line); }
.tabs button { flex: 1; border: 0; background: none; padding: 7px 4px; color: var(--dim); }
.tabs button.on { color: var(--ink); background: #141312; }
.tabs i { font-style: normal; color: var(--gold); }
#log, #laws { list-style: none; padding: 8px 10px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #333 #000; }
#log li { padding: 3px 0 3px 42px; position: relative; font-size: 15px; color: #cfcabd; }
#log li b { position: absolute; left: 0; width: 36px; text-align: right; color: var(--dim); font-weight: 400; }
#log li.m { color: var(--ink); }
#log li.m b { color: var(--gold); }
#log li.l { color: #d9b9c0; }
#log li.d, #log li.r { color: var(--bad); }
#laws li { padding: 8px 0; border-bottom: 2px solid #171615; font-size: 15px; }
#laws li:last-child { border: 0; }
#laws h3 { font-size: 15px; font-weight: 400; }
#laws small { color: var(--dim); display: block; margin: 1px 0 3px; font-size: 15px; }
#laws p { color: #cfcabd; }
#laws button { margin-top: 5px; font-size: 15px; padding: 1px 6px; }
#laws .empty { color: var(--dim); border: 0; }

/* ── указ */
#decree { left: 50%; bottom: 12px; transform: translateX(-50%); width: min(680px, calc(100vw - 24px)); padding: 8px; }
#chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
#chips button { font-size: 15px; color: var(--dim); padding: 1px 7px; background: none; }
#chips button:hover { color: var(--ink); }
.row { display: flex; gap: 6px; }
#text { flex: 1; min-width: 0; background: #0d0c0b; border: 2px solid var(--line); padding: 8px 10px; font-size: 20px; }
#text::placeholder { color: #6d695f; }
#go, .hot { background: var(--hot); border-color: var(--hot2); padding: 6px 14px; font-weight: 400; }
#go:hover, .hot:hover { background: var(--hot2); }
#go:disabled { opacity: .55; cursor: wait; }
#status { color: var(--dim); font-size: 15px; min-height: 0; }
#status:not(:empty) { margin-top: 6px; }

/* ── карточка указа */
#card { left: 50%; bottom: 136px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); padding: 12px 14px; border-color: var(--hot); }
#card small { color: var(--gold); font-size: 15px; }
#card h2 { font-size: 20px; line-height: 1.15; margin: 2px 0 6px; }
#card p { color: #ded9cc; }
#card p.par { color: var(--dim); margin-top: 6px; font-size: 15px; }
#card .fx { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 9px; }
#card .fx span { font-size: 15px; border: 2px solid var(--line); padding: 0 6px; white-space: nowrap; }
#card .fx .good { color: var(--good); }
#card .fx .bad { color: var(--bad); }
#card .x { position: absolute; right: 6px; top: 6px; border: 0; background: none; color: var(--dim); padding: 0 6px; }

#ticker { left: 50%; bottom: 136px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); padding: 6px 10px; font-size: 15px; display: none; }
#tip { padding: 5px 9px; font-size: 15px; pointer-events: none; white-space: nowrap; }
#tip b { color: var(--gold); font-weight: 400; }

dialog { left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 16px; max-width: 320px; color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog form { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ── телефон */
@media (max-width: 760px) {
    #hud { left: 6px; top: 6px; width: 172px; padding: 7px 8px 6px; }
  #pname { font-size: 20px; }
  #sub { margin-bottom: 5px; font-size: 15px; gap: 0 7px; }
  #bars { gap: 3px 6px; }
  #bars label { font-size: 15px; }
  #bars .bar { height: 6px; }
  #nums { font-size: 15px; margin-top: 5px; }
  #ctl { right: 6px; top: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 190px); padding: 4px; gap: 3px; }
  #ctl button { padding: 2px 6px; }
  #fps { display: none; }
  #toggle { display: block; }
  #side { display: none; left: 6px; right: 6px; top: auto; bottom: 118px; width: auto; height: 44vh; }
  body.side #side { display: flex; }
  body.side #ticker, body.side #card { display: none !important; }
  #decree { bottom: 6px; padding: 6px; width: calc(100vw - 12px); }
  #chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; }
  #chips button { white-space: nowrap; flex: none; }
  #go { padding: 6px 10px; }
  #card, #ticker { bottom: 112px; width: calc(100vw - 12px); }
  #ticker:not([hidden]) { display: block; }
}
@media (prefers-reduced-motion: reduce) { #bars .bar i { transition: none; } }