/* ===================================================================== SolRPG — PS1 / retro-JRPG UI theme (SELF-CONTAINED, OPT-IN). Inert until is set. Skins the preview's mock markup (.ps1-*) AND the real game's panels/buttons/chat/bottom-bar. Font: Silkscreen (OFL, self-hosted in /fonts). Icons: game-icons.net (CC BY). To enable on the live game later: add this stylesheet + `ps1-theme` on . ===================================================================== */ @font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/silkscreen.woff2') format('woff2'); } @font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/silkscreen-bold.woff2') format('woff2'); } .ps1-theme { /* Kevon: the Silkscreen pixel font was hard to read — game-wide UI font is now a clean system stack (zero download, crisp on every device incl. old phones). Silkscreen's @font-face stays registered; to bring the retro look back, set this to: 'Silkscreen', 'Courier New', monospace */ --ps1-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ps1-ink: #dbe6f5; /* primary text */ --ps1-ink-dim: #8ea2c2; /* secondary */ --ps1-gold: #f0cc6e; /* accent / headings */ --ps1-cyan: #74d6ff; /* accent 2 / links */ --ps1-green: #7fe08a; --ps1-red: #ff6a78; --ps1-fill: #131d33; /* panel fill */ --ps1-fill2: #0b1426; /* sunken inset */ --ps1-edge-lt: #43608f; /* bevel highlight (top-left) */ --ps1-edge-dk: #05080f; /* bevel shadow (bottom-right) */ --ps1-line: #20304f; /* hard outline */ /* tier colours (match the item-rarity ramp) */ --t1:#9aa7bd; --t2:#67d27a; --t3:#56a8ff; --t4:#b478ff; --t5:#f0c052; --t6:#ff5d6c; } /* crisp pixels everywhere in the theme */ .ps1-theme, .ps1-theme * { image-rendering: pixelated; } .ps1-theme img { image-rendering: pixelated; } /* ---- the chunky beveled FRAME shared by every panel ---- */ .ps1-theme .ps1-panel, .ps1-theme .panel, .ps1-theme #charPanel, .ps1-theme #bankPanel, .ps1-theme #stationPanel, .ps1-theme #builderPanel, .ps1-theme #debugPanel, .ps1-theme #chatBox, .ps1-theme #bottomBar { font-family: var(--ps1-font); color: var(--ps1-ink); background: linear-gradient(180deg, var(--ps1-fill) 0%, #0e1729 100%); border: 2px solid var(--ps1-line); border-radius: 0; /* PS1 = hard corners */ box-shadow: inset 2px 2px 0 0 var(--ps1-edge-lt), /* top-left highlight */ inset -2px -2px 0 0 var(--ps1-edge-dk),/* bottom-right shadow */ 0 4px 0 0 rgba(0,0,0,0.55), /* drop step */ 0 0 0 2px #000; /* black keyline */ letter-spacing: 0.5px; } /* riveted corner studs */ .ps1-theme .ps1-panel::before, .ps1-theme #charPanel::before, .ps1-theme #chatBox::before { content:''; position:absolute; top:4px; left:4px; right:4px; height:0; border-top:1px solid rgba(255,255,255,0.10); pointer-events:none; } /* ---- headings / labels ---- */ .ps1-theme h1, .ps1-theme h2, .ps1-theme h3, .ps1-theme .ps1-title, .ps1-theme legend { font-family: var(--ps1-font); color: var(--ps1-gold); text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 0 #000; margin: 0 0 8px; } .ps1-theme .ps1-sub { color: var(--ps1-ink-dim); font-size: 11px; } /* ---- buttons: raised bevel, "pressed" on active ---- */ .ps1-theme .ps1-btn, .ps1-theme .bbBtn, .ps1-theme button:not(.chatTab) { font-family: var(--ps1-font); text-transform: uppercase; letter-spacing: 0.5px; color: var(--ps1-ink); background: linear-gradient(180deg,#26375a,#16223b); border: 2px solid var(--ps1-line); border-radius: 0; cursor: pointer; padding: 8px 12px; font-size: 12px; box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.18), inset -2px -2px 0 0 var(--ps1-edge-dk), 0 2px 0 0 #000; transition: filter .05s; } .ps1-theme .ps1-btn:hover, .ps1-theme .bbBtn:hover, .ps1-theme button:not(.chatTab):hover { filter: brightness(1.25); } .ps1-theme .ps1-btn:active, .ps1-theme .bbBtn:active, .ps1-theme button:not(.chatTab):active { box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk), inset -2px -2px 0 0 rgba(255,255,255,0.12); transform: translateY(1px); } .ps1-theme .ps1-btn.gold { color:#1a1408; background:linear-gradient(180deg,#f3d273,#d3a33c); border-color:#7a5a16; } /* ---- tabs ---- */ .ps1-theme .ps1-tabs, .ps1-theme #chatTabs { display:flex; gap:4px; } .ps1-theme .ps1-tab, .ps1-theme .chatTab, .ps1-theme #charPanel [data-tab] { font-family: var(--ps1-font); font-size: 11px; text-transform: uppercase; color: var(--ps1-ink-dim); background: #0e1729; border: 2px solid var(--ps1-line); border-bottom: none; border-radius: 0; padding: 7px 12px; cursor: pointer; box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.08); } .ps1-theme .ps1-tab.active, .ps1-theme .chatTab.active, .ps1-theme #charPanel [data-tab].active { color: var(--ps1-gold); background: var(--ps1-fill); box-shadow: inset 0 -3px 0 0 var(--ps1-gold); } /* ---- inventory / hotbar SLOTS: sunken cells ---- */ .ps1-theme .ps1-grid { display:grid; grid-template-columns: repeat(6, 46px); gap:6px; } .ps1-theme .ps1-slot, .ps1-theme .hotslot { width:46px; height:46px; background: var(--ps1-fill2); border: 2px solid var(--ps1-line); box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk), inset -2px -2px 0 0 rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; position:relative; } .ps1-theme .ps1-slot img, .ps1-theme .hotslot img { width:32px; height:32px; } .ps1-theme .ps1-slot .qty { position:absolute; right:2px; bottom:0; font-family:var(--ps1-font); font-size:10px; color:#fff; text-shadow:1px 1px 0 #000; } /* tier rings */ .ps1-theme .ps1-slot.t1{border-color:var(--t1)} .ps1-theme .ps1-slot.t2{border-color:var(--t2)} .ps1-theme .ps1-slot.t3{border-color:var(--t3)} .ps1-theme .ps1-slot.t4{border-color:var(--t4)} .ps1-theme .ps1-slot.t5{border-color:var(--t5)} .ps1-theme .ps1-slot.t6{border-color:var(--t6)} /* ---- bars (HP / XP / skill) ---- */ .ps1-theme .ps1-bar { height:16px; background: var(--ps1-fill2); border:2px solid var(--ps1-line); box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk); position:relative; overflow:hidden; } .ps1-theme .ps1-bar > i { display:block; height:100%; background: repeating-linear-gradient(90deg,#3fbf57 0 8px,#36a94c 8px 10px); } .ps1-theme .ps1-bar.hp > i { background: repeating-linear-gradient(90deg,#e0414f 0 8px,#c2333f 8px 10px); } .ps1-theme .ps1-bar.xp > i { background: repeating-linear-gradient(90deg,#f0c052 0 8px,#d3a33c 8px 10px); } .ps1-theme .ps1-bar > span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ps1-font); font-size:10px; color:#fff; text-shadow:1px 1px 0 #000; } /* ---- skills/stats rows ---- */ .ps1-theme .ps1-skill { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:12px; } .ps1-theme .ps1-skill img { width:22px; height:22px; } .ps1-theme .ps1-skill .lv { color:var(--ps1-gold); min-width:60px; } .ps1-theme .ps1-skill .ps1-bar { flex:1; height:12px; } /* ---- chat ---- */ .ps1-theme #chatLog, .ps1-theme .ps1-log { font-family: var(--ps1-font); font-size: 11px; line-height:1.7; color: var(--ps1-ink); } .ps1-theme #chatInput, .ps1-theme .ps1-input { font-family: var(--ps1-font); font-size: 11px; color:#fff; background: var(--ps1-fill2); border: 2px solid var(--ps1-line); border-radius:0; padding:8px 10px; outline:none; box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk); } /* ---- bottom bar specifics ---- */ .ps1-theme #bottomBar .bbBtn { min-width:54px; } .ps1-theme #selfhud, .ps1-theme .ps1-hud { font-family: var(--ps1-font); font-size:11px; color:var(--ps1-ink); } /* ========================================================= CRT / scanline overlay — add class `ps1-crt` to (separate so it can be toggled in Settings; off = no cost). ========================================================= */ /* ========================================================= Responsive safety-net: keep every panel INSIDE small screens (phones) — fit width, cap height, scroll instead of overflowing. ========================================================= */ @media (max-width: 680px) { .ps1-theme .ps1-panel, .ps1-theme .panel, .ps1-theme #charPanel, .ps1-theme #bankPanel, .ps1-theme #stationPanel, .ps1-theme #builderPanel, .ps1-theme #debugPanel { max-width: 94vw !important; width: auto !important; max-height: 80vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } .ps1-theme #chatBox { max-width: 92vw !important; } .ps1-theme #bottomBar { max-width: 98vw; } .ps1-theme .invgrid { grid-template-columns: repeat(5, 1fr); } /* fewer columns so cells don't shrink to nothing */ } .ps1-crt::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, rgba(0,0,0,0) 1px 3px), /* scanlines */ radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,0.38) 100%); /* vignette */ mix-blend-mode: multiply; opacity: 0.55; } /* ========================================================= Real-game content classes (so the LIVE UI is fully skinned, not just the panel frames). Matches main.js render output. ========================================================= */ .ps1-theme .invgrid { display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; } .ps1-theme .slot { /* inventory/bank/output cell — border-color is set inline to the item tier, so we keep it */ background: var(--ps1-fill2); border-width:2px; border-style:solid; border-radius:0; box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk), inset -2px -2px 0 0 rgba(255,255,255,0.06); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; } .ps1-theme .slot.empty { border-color: var(--ps1-line) !important; opacity:0.7; } .ps1-theme .slot .ic, .ps1-theme .slot img { width:30px; height:30px; image-rendering:pixelated; } .ps1-theme .slot .qty { position:absolute; right:2px; bottom:0; font-family:var(--ps1-font); font-size:10px; color:#fff; text-shadow:1px 1px 0 #000; } .ps1-theme .hbSlot { /* hotbar */ background: var(--ps1-fill2); border:2px solid var(--ps1-line); border-radius:0; box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk), inset -2px -2px 0 0 rgba(255,255,255,0.06); } .ps1-theme .hbSlot.sel { border-color: var(--ps1-gold); box-shadow: inset 0 0 0 1px var(--ps1-gold); } .ps1-theme .coins, .ps1-theme .coinrow, .ps1-theme h4 { font-family:var(--ps1-font); color:var(--ps1-gold); } .ps1-theme .cic, .ps1-theme .coins img { image-rendering:pixelated; } /* stats/details + gear rows: `

namelevelxp

` */ .ps1-theme #tab-details .row, .ps1-theme #tab-gear .row, .ps1-theme .ps1-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--ps1-font); font-size:12px; padding:6px 4px; border-bottom:1px solid var(--ps1-line); } .ps1-theme #tab-details .row b, .ps1-theme #tab-gear .row b { color:var(--ps1-gold); } .ps1-theme .muted { color: var(--ps1-ink-dim); } /* skills tab: each row is a full-width XP bar (fill = progress to next level), level in gold on the right */ .ps1-theme #tab-details { display:flex; flex-direction:column; gap:7px; padding:6px 2px; } .ps1-theme .skrow { width:100%; cursor:help; } .ps1-theme .skbar { position:relative; height:30px; background:var(--ps1-fill2); border:2px solid var(--ps1-line); box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk); overflow:hidden; display:flex; align-items:center; } .ps1-theme .skbar > i { position:absolute; left:0; top:0; bottom:0; background:repeating-linear-gradient(90deg,#3fbf57 0 10px,#36a94c 10px 12px); } .ps1-theme .skbar.maxed > i { background:repeating-linear-gradient(90deg,#f0c052 0 10px,#d3a33c 10px 12px); } .ps1-theme .skname { position:relative; z-index:1; display:flex; align-items:center; gap:7px; padding-left:8px; font-family:var(--ps1-font); font-size:12px; color:#fff; text-shadow:1px 1px 0 #000; } .ps1-theme .skname img { width:20px; height:20px; image-rendering:pixelated; } .ps1-theme .sklvl { position:relative; z-index:1; margin-left:auto; padding-right:10px; font-family:var(--ps1-font); font-size:13px; color:var(--ps1-gold); text-shadow:1px 1px 0 #000; } /* skill tooltip (appended to , which carries the ps1-theme vars) */ #skTip { position:fixed; z-index:10000; max-width:240px; pointer-events:none; background:#0b1426; border:2px solid var(--ps1-line,#20304f); color:var(--ps1-ink,#dbe6f5); padding:8px 10px; font-family:var(--ps1-font,monospace); font-size:11px; line-height:1.55; box-shadow: inset 2px 2px 0 0 var(--ps1-edge-lt,#43608f), inset -2px -2px 0 0 var(--ps1-edge-dk,#05080f), 0 0 0 2px #000; } #skTip .t-name { color: var(--ps1-gold,#f0cc6e); margin-bottom:3px; } #skTip .t-stat { color:#74d6ff; margin-top:4px; } #skTip .t-stat b { color:#fff; } #skTip .t-xp { color:#8ea2c2; margin-top:4px; } #skTip .t-desc { color:#dbe6f5; } /* crafting recipes */ .ps1-theme .recipe { border:2px solid var(--ps1-line); background:var(--ps1-fill2); padding:8px; margin:6px 0; box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk); } .ps1-theme .recipe .top b { color:var(--ps1-gold); font-family:var(--ps1-font); } .ps1-theme .recipe .need { font-size:11px; color:var(--ps1-ink-dim); } /* HP / XP bars — hard corners + pixel label, keep their coloured fills */ .ps1-theme #shpbar, .ps1-theme #xptrack { border-radius:0 !important; border:2px solid var(--ps1-line) !important; box-shadow: inset 2px 2px 0 0 var(--ps1-edge-dk) !important; } .ps1-theme #selfhud, .ps1-theme #xpbar { font-family:var(--ps1-font); }