:root{
  --y:#ffd21a; --k:#111; --r:#e8322b; --paper:#f3ead2; --ink:#1a1613;
  --font: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: "Trebuchet MS", "Segoe UI", sans-serif;
}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#1d1a17;color:#fff;font-family:var(--body);
  -webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:crosshair}
button{font-family:var(--font);letter-spacing:.04em;cursor:pointer}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
#hud button,#hud .card,#toys .toy{pointer-events:auto}
#standings{position:absolute;left:12px;top:12px;width:250px;font-family:var(--font)}
.st{display:flex;align-items:center;gap:6px;height:25px;margin-bottom:3px;padding:0 6px;
  background:rgba(12,10,8,.72);border-left:5px solid #888;transition:transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:auto;cursor:pointer;font-size:15px}
.st.me{background:rgba(70,55,0,.85);outline:2px solid var(--y)}
.st.tg{outline:2px dashed #ff5b4f}
.st .key{display:inline-block;min-width:15px;text-align:center;background:#2a2a2a;color:var(--y);font-size:12px;margin-right:5px;padding:0 3px}
.toy.tool{width:98px}
.toy.armed{border-color:#46e0ff!important;background:rgba(8,48,58,.92);transform:translateY(-5px)}
.st .pos{width:18px;text-align:right;color:#ccc}
.st .nm{flex:1;white-space:nowrap;overflow:hidden}
.st .nm small{font-family:var(--body);font-size:10px;color:#aaa;margin-left:4px}
.st .dmg{width:46px;height:6px;background:#333;position:relative}
.st .dmg i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#58d14a,#e8c62b,#e8322b)}
.st .ico{font-size:11px;width:34px;text-align:right;color:#ff8a7a}
#lapinfo{position:absolute;top:10px;left:50%;transform:translateX(-50%);text-align:center;font-family:var(--font);
  text-shadow:0 2px 0 #000}
#lap{font-size:34px;color:var(--y)}
#rtime{font-size:16px;color:#eee}
#feed{position:absolute;right:12px;top:12px;width:330px;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.fe{background:rgba(12,10,8,.78);padding:4px 9px;font-size:13px;border-right:4px solid var(--y);
  animation:fe-in .25s cubic-bezier(.2,.8,.2,1);max-width:330px}
.fe.hot{border-right-color:var(--r);font-weight:bold}
.fe.me{border-right-color:#46e0ff}
.fe.out{opacity:0;transform:translateX(20px);transition:all .4s}
@keyframes fe-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
#banner{position:absolute;left:0;right:0;top:28%;text-align:center;font-family:var(--font);font-size:84px;
  color:var(--y);text-shadow:0 5px 0 #000,0 0 30px rgba(0,0,0,.6);opacity:0;transform:scale(.8);
  transition:opacity .2s,transform .25s cubic-bezier(.2,1.6,.4,1)}
#banner.show{opacity:1;transform:scale(1)}
#banner small{display:block;font-size:26px;color:#fff}
#targetTag{position:absolute;font-family:var(--font);font-size:14px;color:#fff;background:#e8322b;padding:1px 6px;
  transform:translate(-50%,-100%);white-space:nowrap;display:none}
#bottom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%)}
#toys{display:flex;gap:10px}
.toy{position:relative;width:118px;height:78px;background:rgba(15,12,9,.85);border:3px solid #444;color:#fff;
  font-family:var(--font);text-align:center;overflow:hidden;cursor:pointer;transition:transform .12s,border-color .2s}
.toy:hover{transform:translateY(-3px)}
.toy.ready{border-color:var(--y)}
.toy.ram{border-color:var(--r)}
.toy.ram.ready{background:rgba(90,10,6,.9)}
.toy .k{position:absolute;left:5px;top:3px;font-size:14px;color:var(--y)}
.toy .ic{font-size:26px;margin-top:8px;line-height:1}
.toy .n{font-size:14px;margin-top:4px}
.toy .h{font-family:var(--body);font-size:9px;color:#aaa}
.toy .cd{position:absolute;left:0;bottom:0;height:5px;background:var(--y)}
.toy .ch{position:absolute;right:5px;top:3px;font-size:13px;color:#fff}
.toy.fired{animation:fired .35s}
@keyframes fired{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:none}}
#cams{position:absolute;right:12px;bottom:14px;display:flex;flex-direction:column;gap:4px}
#cams button{background:rgba(12,10,8,.8);color:#ddd;border:2px solid #444;font-size:13px;padding:4px 10px;text-align:right}
#cams button.on{border-color:var(--y);color:var(--y)}
#cams b{color:#888;margin-left:4px}
#help{position:absolute;left:12px;bottom:10px;font-size:11px;color:#bbb;max-width:330px;text-shadow:0 1px 0 #000}
#help b{color:var(--y)}
#service{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);text-align:center;
  animation:fe-in .3s cubic-bezier(.2,.8,.2,1)}
.svc-title{font-family:var(--font);font-size:20px;color:var(--y);text-shadow:0 2px 0 #000;margin-bottom:6px}
#svcCards{display:flex;gap:10px}
.card{width:170px;background:var(--paper);color:var(--ink);border:4px solid var(--k);padding:8px;cursor:pointer;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);transition:transform .15s}
.card:hover{transform:translateY(-5px) rotate(-1deg)}
.card .cat{font-family:var(--font);font-size:12px;background:var(--k);color:var(--y);display:inline-block;padding:0 5px}
.card .nm{font-family:var(--font);font-size:21px;margin:3px 0}
.card .ds{font-size:11px;line-height:1.3}
.card .kk{font-family:var(--font);float:right;font-size:18px}
.card.picked{outline:4px solid var(--r);transform:scale(1.05)}

/* ---------- screens ---------- */
#screens .screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#s-title{background:radial-gradient(ellipse at center,rgba(0,0,0,.2),rgba(0,0,0,.75))}
#s-loadout,#s-results{background:rgba(10,8,6,.6)}
.panel{background:rgba(20,16,12,.9);border:4px solid var(--k);outline:3px solid var(--y);padding:22px 28px;box-shadow:10px 10px 0 rgba(0,0,0,.5)}
.panel.wide{width:min(920px,94vw);max-height:92vh;overflow:auto}
.title-panel{text-align:center;background:transparent;border:0;outline:0;box-shadow:none}
.logo{font-family:var(--font);font-size:110px;line-height:.85;color:var(--y);text-shadow:0 7px 0 #000,7px 7px 0 var(--r);
  transform:rotate(-4deg) skewX(-8deg)}
.logo span{color:#fff}
.logo.small{font-size:44px;text-shadow:0 4px 0 #000,4px 4px 0 var(--r);transform:rotate(-2deg) skewX(-8deg);margin-bottom:6px}
.tag{font-size:15px;color:#ddd;letter-spacing:.06em}
#loadmsg{color:#aaa}
.row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
button.big{background:var(--y);color:var(--k);border:4px solid var(--k);font-size:26px;padding:10px 26px;box-shadow:5px 5px 0 #000;transition:transform .1s}
button.big:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
button.big:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
button.ghost{background:transparent;color:#ddd;border:3px solid #666;font-size:18px;padding:8px 16px}
.laps{font-family:var(--font);font-size:18px}
.laps select{font-size:18px;font-family:var(--font)}

#l-toys{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.lt{background:#2a241d;border:3px solid #4a4036;padding:10px;cursor:pointer;position:relative;transition:transform .12s}
.lt:hover{transform:translateY(-2px)}
.lt.sel{border-color:var(--y);background:#3d3318}
.lt.locked{opacity:.38;cursor:not-allowed}
.lt .ic{font-size:28px;float:left;margin-right:8px}
.lt .nm{font-family:var(--font);font-size:20px;color:var(--y)}
.lt .ds{font-size:12px;color:#ccc;clear:both;margin-top:6px}
.lt .lk{font-size:11px;color:#f88}

#s-garage{pointer-events:none}
#s-garage .panel,#s-garage button{pointer-events:auto}
.garage-top{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;padding:0 24px;align-items:center}
#g-cash{font-family:var(--font);font-size:30px;color:var(--y);text-shadow:0 3px 0 #000}
.garage-side{position:absolute;top:90px;width:290px;max-height:calc(100vh - 200px);overflow:auto;padding:14px 16px}
.garage-side.left{left:18px}.garage-side.right{right:18px}
.garage-side h3{font-family:var(--font);margin:0 0 8px;color:var(--y);font-weight:normal;font-size:24px}
.garage-bottom{position:absolute;bottom:22px;left:0;right:0;text-align:center}
.slot{margin-bottom:10px}
.slot .sl{font-family:var(--font);font-size:14px;color:#aaa}
.slot .opts{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.opt{font-size:12px;background:#2a241d;border:2px solid #4a4036;color:#eee;padding:3px 7px;cursor:pointer;font-family:var(--body)}
.opt.on{border-color:var(--y);background:#4a3c10}
.opt.locked{opacity:.4;cursor:not-allowed}
.hist{font-size:12px;color:#ccc;border-left:3px solid #555;padding-left:7px;margin-bottom:5px}
#g-repair button{margin-top:8px;font-size:16px;padding:6px 12px}

#r-awards{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.aw{flex:1;min-width:180px;background:var(--paper);color:var(--ink);border:4px solid #000;padding:8px 10px;transform:rotate(-1deg)}
.aw:nth-child(2n){transform:rotate(1deg)}
.aw .t{font-family:var(--font);font-size:26px}
.aw .d{font-size:12px}
.aw.dim{opacity:.35}
#r-story{font-size:15px;line-height:1.5;background:#1a1510;border-left:5px solid var(--r);padding:10px 14px;margin:10px 0}
#r-story p{margin:3px 0}
#r-table table{width:100%;border-collapse:collapse;font-size:13px}
#r-table td,#r-table th{padding:3px 6px;border-bottom:1px solid #333;text-align:left}
#r-table tr.me{background:#3d3318}
#r-cash{font-family:var(--font);font-size:22px;color:var(--y);margin-top:8px}
#lookbar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%)}
#pause{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font);
  font-size:90px;color:var(--y);background:rgba(0,0,0,.35);text-shadow:0 6px 0 #000;pointer-events:none}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* ---------- touch ---------- */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}
#c{touch-action:none}
#standings{left:calc(12px + env(safe-area-inset-left))}
#feed,#cams{right:calc(12px + env(safe-area-inset-right))}
#sys{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:152px;display:flex;gap:4px}
#sys button{width:38px;height:34px;padding:0;background:rgba(12,10,8,.8);color:#ddd;border:2px solid #444;font-size:16px;line-height:1}
#sys button.on{border-color:var(--y);color:var(--y)}
#help-touch,#rotate{display:none}
.touch #help{display:none}
.touch #help-touch{display:block;position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:10px;max-width:300px;font-size:11px;color:#ddd;
  text-shadow:0 1px 0 #000;pointer-events:none;animation:help-out .8s 14s forwards}
.touch #help-touch b{color:var(--y)}
@keyframes help-out{to{opacity:0;visibility:hidden}}
.touch .toy .k,.touch #cams b,.touch .card .kk{display:none}

/* ---------- small screens (phones, small windows) ---------- */
@media (max-width: 900px), (max-height: 520px) {
  #standings{width:168px;top:6px;left:calc(6px + env(safe-area-inset-left))}
  .st{height:18px;margin-bottom:3px;padding:0 4px;gap:3px;font-size:11px;border-left-width:3px}
  .st .nm small,.st .ico{display:none}
  .st .key{min-width:11px;margin-right:3px;padding:0 2px;font-size:10px}
  .st .dmg{width:28px;height:4px}
  .st .pos{width:12px}
  #lapinfo{top:4px}
  #lap{font-size:22px}
  #rtime{font-size:12px}
  #feed{width:200px;top:6px;right:calc(6px + env(safe-area-inset-right))}
  .fe{max-width:200px;padding:2px 6px;font-size:10px}
  .fe:nth-child(n+5){display:none}
  #banner{top:22%;font-size:44px}
  #banner small{font-size:16px}
  #targetTag{font-size:11px}
  #bottom{bottom:calc(6px + env(safe-area-inset-bottom))}
  #toys{gap:5px}
  .toy{width:70px;height:54px;border-width:2px}
  .toy.tool{width:62px}
  .toy .ic{margin-top:5px;font-size:18px}
  .toy .n{margin-top:2px;font-size:11px;white-space:nowrap;overflow:hidden}
  .toy .h{display:none}
  .toy.next .h{display:block;font-size:8px;line-height:1.1;white-space:nowrap;overflow:hidden}
  .toy .ch{font-size:11px}
  .toy .cd{height:4px}
  #cams{bottom:calc(6px + env(safe-area-inset-bottom));right:calc(6px + env(safe-area-inset-right));gap:3px}
  #cams button{padding:3px 6px;font-size:10px}
  #sys{bottom:112px;right:calc(6px + env(safe-area-inset-right))}
  #sys button{width:32px;height:28px;font-size:14px}
  #help{display:none}
  .touch #help-touch{bottom:calc(68px + env(safe-area-inset-bottom))}   /* above the toy row, not on it */
  #service{bottom:68px;width:96vw}
  .svc-title{margin-bottom:3px;font-size:13px}
  #svcCards{gap:5px;justify-content:center}
  .card{flex:1;width:auto;max-width:190px;padding:5px;border-width:3px}
  .card .nm{font-size:14px}
  .card .ds{font-size:9.5px}
  .card .cat{font-size:10px}
  #pause{font-size:48px}
  /* menus */
  .logo{font-size:min(110px,15vw)}
  .logo.small{font-size:26px}
  .panel{padding:12px 14px}
  .panel.wide{width:96vw;max-height:94vh}
  button.big{padding:7px 14px;border-width:3px;font-size:18px}
  button.ghost{padding:6px 10px;font-size:14px}
  .row{margin-top:10px;gap:8px}
  #l-toys{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
  .lt{padding:6px}
  .lt .ic{font-size:20px}
  .lt .nm{font-size:15px}
  .lt .ds{font-size:10.5px}
  .garage-top{top:6px;padding:0 12px}
  #g-cash{font-size:20px}
  .garage-side{top:46px;width:38vw;max-height:calc(100vh - 110px);padding:8px 10px}
  .garage-side.left{left:calc(6px + env(safe-area-inset-left))}
  .garage-side.right{right:calc(6px + env(safe-area-inset-right))}
  .garage-side h3{margin-bottom:4px;font-size:16px}
  .slot{margin-bottom:6px}
  .opt{padding:3px 6px;font-size:11px}
  .hist{font-size:10.5px}
  .garage-bottom{bottom:calc(8px + env(safe-area-inset-bottom))}
  .aw{min-width:130px;padding:5px 7px}
  .aw .t{font-size:17px}
  #r-story{padding:6px 10px;font-size:12px}
  #r-table{overflow-x:auto}
  #r-table table{font-size:11px}
}

/* portrait phone: menus stack, the race HUD asks for landscape */
@media (orientation: portrait) and (max-width: 700px) {
  .touch #hud:not([hidden]) ~ #rotate{display:block;position:fixed;left:50%;top:190px;transform:translateX(-50%);padding:4px 10px;
    background:rgba(12,10,8,.85);border:2px solid var(--y);color:#fff;font-family:var(--font);font-size:14px;white-space:nowrap;pointer-events:none}
  #toys{flex-wrap:wrap;justify-content:center;width:96vw}
  #cams{bottom:128px}
  #sys{bottom:236px}
  /* no room for three things across the top: lap info goes right, the feed drops above the buttons */
  #lapinfo{left:auto;right:calc(8px + env(safe-area-inset-right));transform:none;text-align:right}
  #feed{top:auto;bottom:272px;left:6px;right:6px;width:auto;align-items:flex-start}
  .fe:nth-child(n+4){display:none}
  .touch #help-touch{top:228px;bottom:auto;left:6px;right:6px;max-width:none;text-align:center}
  .garage-side{left:6px;right:6px;width:auto}
  .garage-side.left{top:46px;max-height:30vh}
  .garage-side.right{top:auto;bottom:64px;max-height:36vh}
}