/* The game's in-menu colours and fonts (InvectedUiSkin). Amber means one thing: you can act on it now. */
:root{
  --ink:#0e1318; --ink-deep:#080c0f; --slate:#1c252b; --slate-hi:#26333c;
  --steel:#6b8c9e; --edge:rgba(107,140,158,.55); --edge-soft:rgba(107,140,158,.22);
  --bone:#e6f0f5; --fog:#8ca1ad; --ice:#a9cbdb; --amber:#eab45d; --short:#e67361;
  --prime:#7fe6a2; --good:#3fbf7c; --rim:#2f8f63; --reel:#59b3ff; --scope:#7fe6a2;
  --num:"Oxanium",system-ui,sans-serif; --lab:"Electrolize",system-ui,sans-serif; --arcade:"Silkscreen",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#06080a;color:var(--bone);font-family:var(--lab)}
button{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}

.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;max-width:1280px;margin:0 auto;padding:14px 16px}
.brand{font:800 18px/1 var(--num);letter-spacing:.14em;text-decoration:none}
.here{font:700 12px/1 var(--num);letter-spacing:.22em;text-transform:uppercase;color:var(--fog)}
.bar nav{margin-left:auto;display:flex;gap:16px;font-size:14px}
.bar nav a{color:var(--fog);text-decoration:none}
.bar nav a:hover{color:var(--bone)}
.bar nav #acct-link{color:var(--bone)}
.eyebrow{font:700 12px/1 var(--num);letter-spacing:.22em;text-transform:uppercase;color:var(--fog)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;max-width:1280px;margin:0 auto;padding:0 16px 56px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

.screen{background:var(--ink);border:1px solid var(--edge);padding:16px 18px 18px;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.screen:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.hud div{background:var(--ink-deep);border:1px solid var(--edge-soft);padding:8px 12px}
.hud span{display:block;font:700 11px/1 var(--num);letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}
.hud b{display:block;font:800 26px/1.15 var(--num);margin-top:4px}
.stage{position:relative;user-select:none;touch-action:none;cursor:pointer}
canvas{display:block;width:100%;height:auto;margin:0 auto}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:rgba(6,8,10,.88);cursor:default}
.overlay h1{font:800 clamp(34px,7vw,60px)/1 var(--num);letter-spacing:.05em;text-transform:uppercase;margin:0}
.overlay p{margin:0;max-width:440px;line-height:1.5;color:var(--ice)}
.overlay .small{font-size:13px;color:var(--fog)}
.overlay .warn{color:var(--short)}
#entry{display:grid;gap:12px;justify-items:center}
.read{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-top:12px}
.read strong{font:800 30px/1 var(--num);letter-spacing:.06em;text-transform:uppercase}
.read span{color:var(--fog);font-size:14px}
.fuel{height:10px;background:var(--ink-deep);border:1px solid var(--edge-soft);margin-top:12px}
.fuel i{display:block;height:100%;background:var(--ice)}
.touch{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.hint{margin:12px 0 0;font-size:13px;color:var(--fog);text-align:center}
.hint b{color:var(--bone);font-weight:400}
@media (hover:none){.hint{display:none}}

.btn{display:inline-block;padding:12px 16px;background:var(--slate-hi);border:0;cursor:pointer;font:800 13px/1 var(--num);letter-spacing:.12em;text-transform:uppercase;touch-action:manipulation}
.btn:hover{background:#31424d}
.btn[aria-pressed=true]{background:var(--bone);color:var(--ink)}
.btn.act{background:var(--amber);color:var(--ink)}
.btn.pad{min-width:52px;font-size:16px;touch-action:none}
.btn:disabled{background:var(--slate);color:var(--fog);cursor:default}
button:focus-visible{outline:2px solid var(--bone);outline-offset:2px}

.panel{background:var(--ink);border:1px solid var(--edge);padding:16px 18px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.panel + .panel{margin-top:14px}
.shop{display:grid;gap:8px;margin-top:10px}
.shop button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;padding:10px 12px;background:var(--slate);border:1px solid var(--edge-soft);cursor:pointer}
.shop button b{font:700 13px/1.2 var(--num);letter-spacing:.08em;text-transform:uppercase}
.shop button em{font:800 15px/1.2 var(--num);font-style:normal;text-align:right}
.shop button small{grid-column:1/-1;font-size:12px;color:var(--fog)}
.shop button.can{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.shop button.can small{color:#4a3a1c}
.shop button:disabled{cursor:default;color:var(--fog)}
.blurb{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ice)}
.blurb.small{color:var(--fog);font-size:12px}
.blurb a{color:var(--bone)}
.blurb.note{color:var(--bone);border-left:2px solid var(--bone);padding-left:10px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tiers button{padding:10px 6px;background:var(--slate);border:1px solid var(--edge-soft);cursor:pointer;font:800 16px/1.2 var(--num);text-align:center}
.tiers button small{display:block;font:400 12px/1.3 var(--lab);color:var(--fog);margin-top:2px}
.tiers button[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.tiers button[aria-pressed=true] small{color:#33424c}
.own{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--fog)}
.own span{font:800 15px var(--num);color:var(--bone)}
.own input{width:92px;margin-left:4px;padding:8px;background:var(--ink-deep);border:1px solid var(--edge-soft);color:var(--bone);font:800 15px var(--num)}
#give{width:100%;margin-top:10px}
#starsrow{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--ice)}
input:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.log{list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--fog)}
.log li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--edge-soft)}
.log li b{color:var(--bone);font-weight:400}

/* The board is the one place that dresses up: a cabinet high-score table. */
.board ol{list-style:none;margin:12px 0 0;padding:0;font-family:var(--arcade);font-size:15px}
.board li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:5px 0;color:var(--ice)}
.board li i{font-style:normal;font-family:var(--lab);letter-spacing:.05em;margin-left:8px}
.board li b{font-weight:400;text-align:right;color:var(--bone)}
.board li:first-child,.board li:first-child b{color:var(--prime)}
.board li.you{background:var(--bone);color:var(--ink);padding-inline:6px;margin-inline:-6px}
.board li.you b{color:var(--ink)}
.board li.none{display:block;color:var(--fog);font-family:var(--lab);font-size:13px}
.letters{display:flex;gap:10px;justify-content:center}
.letters div{display:grid;gap:4px;justify-items:center}
.letters button{background:none;border:0;color:var(--fog);font-size:18px;cursor:pointer;padding:4px 14px}
.letters span{display:grid;place-items:center;width:64px;height:76px;background:var(--ink-deep);border:2px solid var(--edge-soft);font:700 44px/1 var(--arcade)}
.letters div.on span{border-color:var(--bone)}

/* the shop and the trophy room: sheets that open over the view */
.overlay.sheet{justify-content:flex-start;overflow:auto;padding:26px 20px;background:rgba(6,8,10,.94)}
.overlay.sheet h1{font-size:clamp(28px,5vw,44px)}
.sheet .shop{width:min(100%,640px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:6px}
.sheet .shop button{padding:14px 16px}
.sheet .shop button b{font-size:15px}
.sheet .log{width:min(100%,520px);text-align:left}
.sheet .eyebrow{margin-top:6px}
.trophies{width:min(100%,520px);border-collapse:collapse;font-size:15px;text-align:left}
.trophies th{font:700 11px/1 var(--num);letter-spacing:.2em;text-transform:uppercase;color:var(--fog);padding:8px 10px;border-bottom:1px solid var(--edge)}
.trophies td{padding:9px 10px;border-bottom:1px solid var(--edge-soft);color:var(--bone)}
.trophies td:nth-child(2),.trophies th:nth-child(2){text-align:right;font-family:var(--num)}
.trophies td:nth-child(3),.trophies th:nth-child(3){text-align:right;font-family:var(--num)}
.trophies tr.unknown td{color:var(--fog)}
.sheet .blurb{max-width:560px}
#timeview{justify-content:center}
#timeview .btn,#installview .btn{min-width:240px}
/* full screen: the view fills the screen; the score row and the controls float over it */
.screen:fullscreen{padding:0;border:0;clip-path:none;background:#06080a;width:100vw;height:100vh;overflow:hidden}
.screen:fullscreen .stage{position:absolute;inset:0}
.screen:fullscreen canvas{width:100vw;height:100vh;margin:0}
.screen:fullscreen .hud{position:absolute;z-index:3;top:14px;left:14px;width:min(520px,calc(100vw - 300px));margin:0}
.screen:fullscreen .hud div{background:rgba(8,12,15,.82)}
.screen:fullscreen .dock{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);width:min(980px,calc(100vw - 28px));padding:10px 16px 12px;background:rgba(14,19,24,.84);border:1px solid var(--edge)}
.screen:fullscreen .dock .read:first-child{margin-top:0}
.screen:fullscreen .hint{display:none}
.screen:fullscreen .overlay{z-index:5}