/* Project Pumper — tracking cabinet page styles. * * Page-specific classes lifted verbatim from the tracking shell's former * inline styles. Shared chrome (.screen, .nav__*, .accent-*) is reused from * pumper.css; only styles unique to this page live here. Loaded after * pumper.css so the page-local body background wins. */ /* this page's frame is a shade darker than the shared default */ body { background: #080312 } /* The cabinet's CRT texture is on the SURFACES, not on a fixed overlay stretched * across the viewport. The old version was the only `position` left in the site: * an empty div pinned over everything at z-index 50, which had to be there * because a background sits behind its own element's content and the panels are * opaque. Painting each opaque surface instead needs no element and no z-index — * and it is what every other page here already does. */ .cabinet-shell { min-height:100vh;background:var(--scanline),#0d0517;color:#e6def5;display:flex;flex-direction:column } .cabinet-nav { display:flex;flex-wrap:wrap;align-items:center;gap:clamp(0.8em,2vw,1.75em);padding:0.75em clamp(0.8em,2vw,1.6em);background:#080312;border-bottom:0.15em solid #ff2fa0;flex:none } .cabinet-brand { font-family:'Press Start 2P',monospace;font-size:0.875em;color:#fff } .cabinet-nav__links { display:flex;flex-wrap:wrap;gap:clamp(0.8em,2vw,1.5em);align-items:center;font-family:'Press Start 2P',monospace;font-size:0.6em;min-width:0 } .cabinet-nav__link--active { color:#ffd23e;border-bottom:0.3em solid #ffd23e;padding-bottom:0.4em } .cabinet-nav__join { margin-left:auto;font-family:'Press Start 2P',monospace;font-size:0.6em;background:#ff2fa0;color:#fff;padding:0.9em 1.4em;box-shadow:0.3em 0.3em 0 #7a0e4c;flex:none } .cabinet { flex:1;display:flex;gap:1.2%;padding:1.2% 1.6%;align-items:stretch;min-width:0 } .rail--left { flex:0 1 16%;min-width:0;display:flex;flex-direction:column;gap:1em } .panel--today { border:0.15em solid #ff2fa0;background:#140a26;padding:8%;display:flex;flex-direction:column;gap:0.5em } .panel__label { font-family:'Press Start 2P',monospace;font-size:0.6em;color:#8d7fae } .panel__day { font-family:'Press Start 2P',monospace;font-size:0.8em;color:#ff2fa0;line-height:1.5 } .panel__stage { font-size:0.9em;color:#b8aecb } .panel--sprite { border:0.15em solid #2c1a4a;background:#140a26;padding:8%;display:flex;flex-direction:column;align-items:center;gap:0.75em } /* The sprite is a stack of flex lines, one per pixel row, each cell an equal share of the line — so it scales with its container instead of being pinned to a fixed aspect ratio by absolutely positioned pixels. */ .sprite-box { width:70%;display:flex;flex-direction:column;min-width:0 } .sprite__row { display:flex;flex:1 1 0;min-width:0 } .sprite__px { display:block;flex:1 1 0;min-width:0;aspect-ratio:1 } .sprite__portrait { width:100%;height:auto;object-fit:contain;image-rendering:pixelated } /* The sprite palette. The GRIDS in cabinet.js carry ink LETTERS; the colours are here, where a theme can reach them. */ .sprite__px[data-ink="K"] { background:#1a1a1a } .sprite__px[data-ink="P"] { background:#ff2fa0 } .sprite__px[data-ink="S"] { background:#f0b98c } .sprite__px[data-ink="D"] { background:#c98a5e } .sprite__px[data-ink="C"] { background:#25e8e0 } .sprite__px[data-ink="T"] { background:#12888a } .sprite__px[data-ink="Y"] { background:#ffd23e } .sprite__px[data-ink="V"] { background:#4a1d7a } .sprite__px[data-ink="W"] { background:#f4f4f4 } .sprite__px[data-ink="G"] { background:#6a5a8a } .sprite__px[data-ink="M"] { background:#9aa2ad } .sprite__caption { font-family:'Press Start 2P',monospace;font-size:0.55em;color:#25e8e0;text-align:center;line-height:1.8 } .panel--vitals { border:0.15em solid #2c1a4a;background:#140a26;padding:8%;display:flex;flex-direction:column;gap:0.75em } .meter { display:flex;flex-direction:column;gap:0.3em } .meter__head--hp { display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:0.55em;color:#39ff5a } .meter__track--hp { height:0.75em;border:0.14em solid #39ff5a;background:#0a0414 } /* --fill is the one thing the script says about a meter: a percentage. Everything else about what a filled meter LOOKS like stays here. */ .meter__fill--hp { height:100%;width:var(--fill,82%);background:#39ff5a;transition:width .4s } .meter__head--sta { display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:0.55em;color:#ffd23e } .meter__track--sta { height:0.75em;border:0.14em solid #ffd23e;background:#0a0414 } .meter__fill--sta { height:100%;width:var(--fill,68%);background:#ffd23e;transition:width .4s } .meter__head--hype { display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:0.55em;color:#ff2fa0 } .meter__track--hype { height:0.75em;border:0.14em solid #ff2fa0;background:#0a0414 } .meter__fill--hype { height:100%;width:var(--fill,76%);background:#ff2fa0;transition:width .4s } .log { flex:1 1 0;min-width:0;border:0.15em solid #25e8e0;background:#140a26;padding:1.5%;display:flex;flex-direction:column;gap:1em } .log__head { display:flex;justify-content:space-between;align-items:baseline;gap:1em;flex-wrap:wrap } .log__title { font-family:'Press Start 2P',monospace;font-size:0.9em;color:#25e8e0 } .log__elapsed { font-size:0.9em;color:#8d7fae } .move { border:0.15em solid #ffd23e;background:#0a0414;padding:1.2em;display:flex;flex-direction:column;gap:0.9em } .move__head { display:flex;justify-content:space-between;align-items:center;gap:1em } .move__name { font-family:'Archivo Black',sans-serif;font-style:italic;font-size:1.9em;transform:skewX(-6deg);background:linear-gradient(180deg,#fffbe8 0%,#ffe482 45%,#8a6414 50%,#fff 54%,#ffd23e 100%);-webkit-background-clip:text;background-clip:text;color:transparent } .move__controls { display:flex;gap:1em;align-items:center;flex:none } .unit-toggle { display:flex;border:0.2em solid #8d7fae } /* One class, one state attribute. Two classes for on and off meant something had to swap a class name to change appearance — styling by another route; `data-on` is the state the server states, and what it looks like is here. */ .unit-btn { font-family:'Press Start 2P',monospace;font-size:0.55em;padding:0.9em 1.2em;border:none;cursor:pointer;background:transparent;color:#8d7fae } .unit-btn[data-on="true"] { background:#25e8e0;color:#08131a } /* The set form. `.input` is a