:root { --s: 4; --u: calc(var(--s) * 1px); --red: #d21f3c; --red2: #9b1530; --ink: #1b1320; --ink2: #2b2233; --cream: #fff8e8; --gold: #ffe46b; --teal: #7fe0d0; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #120c16; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { font-family: 'DotGothic', monospace; color: var(--cream); }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #2a1c2e 0%, #120c16 70%); }
#game { position: relative; width: calc(320 * var(--u)); height: calc(200 * var(--u)); overflow: hidden; box-shadow: 0 0 0 var(--u) #000, 0 10px 40px rgba(0,0,0,.6); }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; cursor: pointer; }
.hidden { display: none !important; }
button { font-family: inherit; }

/* пиксельная рамка */
.px-border { box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink); }

/* HUD */
#hud { position: absolute; left: 0; top: 0; width: 100%; height: calc(28 * var(--u)); pointer-events: none; }
.hudpanel { position: absolute; top: calc(5 * var(--u)); left: calc(2 * var(--u)); width: calc(52 * var(--u)); height: calc(21 * var(--u));
  background: #12090e; border: var(--u) solid #000; outline: var(--u) solid #55506a; padding: calc(1 * var(--u)) calc(2 * var(--u)); }
.hudpanel.right { left: auto; right: calc(2 * var(--u)); text-align: right; }
.hudpanel .lbl { font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); color: #a3a1b6; letter-spacing: 1px; }
.hudpanel .big { font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 4px)); color: var(--gold); margin-top: calc(1 * var(--u)); text-shadow: var(--u) var(--u) 0 #5e0f1f; line-height: 1; }
.combo { font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); color: var(--teal); margin-top: calc(1.5 * var(--u)); }
.sat { font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); color: #ff9b94; margin-top: calc(1.5 * var(--u)); }
#tickets { position: absolute; left: calc(58 * var(--u)); right: calc(58 * var(--u)); top: calc(4 * var(--u)); height: calc(24 * var(--u)); display: flex; gap: calc(2 * var(--u)); justify-content: flex-start; }
.ticket { position: relative; background: var(--cream); color: var(--ink); padding: calc(1 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u)); min-width: calc(30 * var(--u));
  box-shadow: 0 var(--u) 0 0 #cdb38a, var(--u) var(--u) 0 0 rgba(0,0,0,.4); animation: drop .35s steps(4) both; }
.ticket::before { content: ''; position: absolute; top: calc(-1 * var(--u)); left: 50%; width: calc(4 * var(--u)); height: calc(2 * var(--u)); margin-left: calc(-2 * var(--u)); background: #a3a1b6; }
.ticket .th { display: flex; justify-content: space-between; align-items: center; font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); line-height: 1; height: calc(3 * var(--u)); }
.ticket .th .num { color: var(--red); }
.ticket .icons { display: flex; gap: 0; margin-top: calc(0.5 * var(--u)); }
.ticket .icons img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); image-rendering: pixelated; }
.ticket .icons img.done { opacity: .35; filter: grayscale(1); }
.ticket .pbar { height: calc(1.5 * var(--u)); background: #cdb38a; margin-top: calc(0.5 * var(--u)); }
.ticket .pbar i { display: block; height: 100%; background: #5bb04a; }
.ticket.ready { background: #dff7c8; }
.ticket.pending { background: #e6d3ac; }
.ticket.pending .icons img { opacity: .5; }
.ticket.urgent .pbar i { background: #d21f3c; }
@keyframes drop { from { transform: translateY(calc(-20 * var(--u))); } to { transform: none; } }

/* подсказка у станции */
#tip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: var(--cream); border: var(--u) solid #000; outline: var(--u) solid #7a7690;
  padding: calc(1 * var(--u)) calc(2 * var(--u)); font-size: max(12px, calc(var(--s) * 3px)); white-space: nowrap; pointer-events: none; line-height: 1.15; z-index: 5; }
#tip .nm { color: #a3a1b6; font-size: .85em; }
#tip .k { display: inline-block; font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); background: var(--cream); color: var(--ink); padding: 2px 4px; margin-right: 4px; vertical-align: middle; }
#tip.ok .act { color: #a6de6e; } #tip.bad .act { color: #ff9b94; } #tip.neutral .act { color: var(--cream); }

#handbar { position: absolute; left: calc(2 * var(--u)); bottom: calc(2 * var(--u)); max-width: calc(160 * var(--u)); background: rgba(27,19,32,.92); border: var(--u) solid #000;
  padding: calc(1 * var(--u)) calc(2 * var(--u)); font-size: max(12px, calc(var(--s) * 3px)); line-height: 1.2; pointer-events: none; display: flex; gap: calc(2 * var(--u)); align-items: center; }
#handbar img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); image-rendering: pixelated; flex: none; }
#handbar .nx { color: var(--gold); }
#handbar .dirty { color: #a6de6e; font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); display: block; margin-top: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }

#toasts { position: absolute; right: calc(2 * var(--u)); bottom: calc(13 * var(--u)); width: calc(150 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(1 * var(--u)); pointer-events: none; z-index: 6; }
.toast { background: rgba(27,19,32,.95); border-left: calc(2 * var(--u)) solid #7a7690; padding: calc(1 * var(--u)) calc(2 * var(--u)); font-size: max(12px, calc(var(--s) * 3px)); line-height: 1.2;
  box-shadow: var(--u) var(--u) 0 rgba(0,0,0,.5); animation: tin .2s steps(3) both; }
.toast.error { border-color: #f2545b; background: rgba(94,15,31,.95); }
.toast.error .pts { font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); color: var(--gold); margin-right: 6px; }
.toast.good { border-color: #5bb04a; } .toast.warn { border-color: #f2c230; } .toast.order { border-color: #4fa3e0; }
.toast.out { animation: tout .3s steps(3) both; }
@keyframes tin { from { transform: translateY(calc(-4 * var(--u))); opacity: 0; } }
@keyframes tout { to { opacity: 0; transform: translateY(calc(-3 * var(--u))); } }

#buttons { position: absolute; right: calc(2 * var(--u)); bottom: calc(2 * var(--u)); display: flex; gap: calc(1 * var(--u)); z-index: 4; }
#buttons button { background: var(--ink); color: var(--cream); border: var(--u) solid #000; outline: var(--u) solid #55506a; font-size: max(11px, calc(var(--s) * 2.5px)); padding: calc(1 * var(--u)) calc(2 * var(--u)); cursor: pointer; }
#buttons button:hover { background: #3a3546; }
#buttons button.off { color: #7a7690; text-decoration: line-through; }

/* экраны */
.screen { position: absolute; inset: 0; background: rgba(18,8,20,.72); display: flex; align-items: center; justify-content: center; z-index: 10; }
.panel { background: #1f1726; border: var(--u) solid #000; outline: var(--u) solid var(--red); box-shadow: 0 0 0 calc(2 * var(--u)) #000, calc(3 * var(--u)) calc(3 * var(--u)) 0 calc(2 * var(--u)) rgba(0,0,0,.5);
  padding: calc(6 * var(--u)) calc(8 * var(--u)); max-width: calc(200 * var(--u)); max-height: calc(186 * var(--u)); overflow: auto; text-align: center; }
.panel.wide { max-width: calc(296 * var(--u)); width: calc(296 * var(--u)); text-align: left; }
.panel::-webkit-scrollbar { width: 8px; } .panel::-webkit-scrollbar-thumb { background: var(--red); }
.kicker { font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); color: #ff9b94; letter-spacing: 2px; }
h1 { font-family: 'PressStart'; font-weight: normal; font-size: max(16px, calc(var(--s) * 8px)); line-height: 1.15; margin: calc(3 * var(--u)) 0; color: var(--cream); text-shadow: var(--u) var(--u) 0 var(--red), calc(2 * var(--u)) calc(2 * var(--u)) 0 #000; }
h1 span { color: var(--gold); }
h2 { font-family: 'PressStart'; font-weight: normal; font-size: max(12px, calc(var(--s) * 4px)); margin: 0 0 calc(3 * var(--u)); color: var(--gold); text-shadow: var(--u) var(--u) 0 #5e0f1f; }
h3 { font-family: 'PressStart'; font-weight: normal; font-size: max(8px, calc(var(--s) * 2px)); color: #ff9b94; margin: calc(3 * var(--u)) 0 calc(1.5 * var(--u)); letter-spacing: 1px; }
.sub { font-size: max(12px, calc(var(--s) * 3.5px)); color: #e6d3ac; margin: 0 0 calc(3 * var(--u)); line-height: 1.3; }
ul { margin: 0; padding-left: 1.1em; font-size: max(12px, calc(var(--s) * 3px)); line-height: 1.35; color: #f4e8cc; }
li { margin-bottom: calc(0.8 * var(--u)); } li b { color: var(--gold); font-weight: normal; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)); }
.btns { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); justify-content: center; margin-top: calc(4 * var(--u)); }
.btn { background: #3a3546; color: var(--cream); border: none; font-size: max(12px, calc(var(--s) * 3.5px)); padding: calc(2 * var(--u)) calc(4 * var(--u)); cursor: pointer;
  box-shadow: inset 0 calc(-1 * var(--u)) 0 #1b1320, inset 0 var(--u) 0 #55506a, 0 0 0 var(--u) #000; }
.btn:hover { background: #4a4458; transform: translateY(-1px); }
.btn.primary { background: var(--red); box-shadow: inset 0 calc(-1 * var(--u)) 0 var(--red2), inset 0 var(--u) 0 #f2545b, 0 0 0 var(--u) #000; }
.btn.primary:hover { background: #e2324e; }
.chk { display: block; margin-top: calc(3 * var(--u)); font-size: max(11px, calc(var(--s) * 2.8px)); color: #a3a1b6; cursor: pointer; }
.menu-icons { display: flex; justify-content: center; gap: calc(2 * var(--u)); margin: calc(1 * var(--u)) 0; }
.menu-icons img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); image-rendering: pixelated; animation: bob 1.2s steps(2) infinite; }
.menu-icons img:nth-child(2n) { animation-delay: .3s; }
@keyframes bob { 50% { transform: translateY(calc(-1 * var(--u))); } }

.book { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); }
.card { background: #2b2233; padding: calc(2 * var(--u)) calc(3 * var(--u)); border-left: var(--u) solid var(--red); }
.card.prep { border-left-color: #f2c230; }
.card h4 { margin: 0 0 calc(1.5 * var(--u)); font-family: 'PressStart'; font-weight: normal; font-size: max(8px, calc(var(--s) * 2px)); color: var(--gold); display: flex; align-items: center; gap: 6px; }
.card h4 img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); image-rendering: pixelated; }
.card ol { margin: 0; padding-left: 1.3em; font-size: max(11px, calc(var(--s) * 2.8px)); line-height: 1.3; }
.card ol li { margin-bottom: 2px; }
.card ol li .st { color: #9fe0ff; }
.card .tag { font-size: .85em; color: #a3a1b6; }

.stars { display: flex; justify-content: center; gap: calc(3 * var(--u)); margin: calc(1 * var(--u)) 0 calc(2 * var(--u)); }
.stars img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); image-rendering: pixelated; animation: pop .4s steps(4) both; }
.stars img:nth-child(2) { animation-delay: .25s; } .stars img:nth-child(3) { animation-delay: .5s; }
@keyframes pop { from { transform: scale(0); } }
.res-score { text-align: center; font-family: 'PressStart'; font-size: max(12px, calc(var(--s) * 5px)); color: var(--gold); margin-bottom: calc(3 * var(--u)); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2 * var(--u)); }
.stat { background: #2b2233; padding: calc(2 * var(--u)); text-align: center; }
.stat .v { font-family: 'PressStart'; font-size: max(10px, calc(var(--s) * 3px)); color: var(--cream); }
.stat .l { font-size: max(11px, calc(var(--s) * 2.6px)); color: #a3a1b6; margin-top: 4px; }
.tips li .n { color: #ff9b94; font-family: 'PressStart'; font-size: max(8px, calc(var(--s) * 2px)); }

#rotate { position: absolute; inset: 0; background: rgba(18,8,20,.92); z-index: 50; display: flex; align-items: center; justify-content: center; font-size: 18px; text-align: center; padding: 20px; }