/* ============================================================ PIXEL IDLE RPG — commercial-grade retro shell Palette: Endesga-32 + gold trim · Dark fantasy pixel aesthetic ------------------------------------------------------------ Layout model Shell is a single grid column: HUD · main · footer, with a position:fixed dock pinned to the bottom. --dock-h reserves the body's bottom padding so nothing ever hides behind it. The dock and the character sub-tabs are BOTH made of real .tab-btn elements, because game.js binds and badges that class. The shell uses :has() to react to whichever .tab-panel game.js unhid — that is what keeps the dock's HEROES slot lit while a sub-tab is open, and what shows the sub-tab row only for the character group. No extra JS. ------------------------------------------------------------ Contents 1. Reset 2. Design tokens 3. Base / page 4. Pixel primitives (panel, buttons, gold trim) 5. Top HUD (avatar ring · wave tracker · currency pills) 6. Language toggle 7. Stage: canvas, CRT stack + option, combat overlay, hit text 8. Skill dock (three 64x64 pixel slots, radial cooldown) 9. Sidebar sub-tabs, buy dock, panels 9b. Bottom dock 10. Shop rows / upgrade cards 10b. Marketplace, chat, arena + the rival inspection sheet 11. Inventory, rarity, item tooltips 12. Blacksmith / Forge 13. Skill orb (SKILLS tab icon) 14. Artifacts / prestige 15. Loot notifications 16. Settings modal (CSS-only toggles) 16b. Progression: speed, tower, save I/O 16c. Audio, enrage, achievements 16d. Town hub 16e. Party roster 17. Utilities (.hidden is required by game.js) 18. Responsive 19. Reduced motion ---- the Metin2-flavoured expansion pack ---- 26a. The constellation WINDOW (drag bar, resize grip, hover card) 26b. Efsun (enchant bonus) + the +7 enhancement aura 26c. Evcil hayvan — the companion pet block 26d. Zindanlar — the raid board 26e. Günlük görevler — the daily bounty board 26f. The AFK chest and the milestone bonus line ============================================================ */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; /* pixel art: never round a corner */ } /* ---------- 2. Design tokens ---------- */ :root { /* Endesga-32 */ --e-brick:#be4a2f; --e-rust:#d77643; --e-cream:#ead4aa; --e-sand:#e4a672; --e-clay:#b86f50; --e-brown:#733e39; --e-ink:#3e2731; --e-crimson:#a22633; --e-red:#e43b44; --e-orange:#f77622; --e-amber:#feae34; --e-yellow:#fee761; --e-green:#63c74d; --e-forest:#3e8948; --e-pine:#265c42; --e-deep:#193c3e; --e-blue:#124e89; --e-sky:#0099db; --e-cyan:#2ce8f5; --e-white:#ffffff; --e-silver:#c0cbdc;--e-grey:#8b9bb4; --e-steel:#5a6988; --e-slate:#3a4466; --e-navy:#262b44; --e-black:#181425; --e-hot:#ff0044; --e-purple:#68386c; --e-mauve:#b55088; --e-rose:#f6757a; --e-skin:#e8b796; --e-tan:#c28569; /* ---------- 16-bit JRPG dark slate theme ---------- Three colours carry the whole redesign, and everything below is expressed in terms of them rather than of the Endesga swatches directly, so re-theming is a three-line edit: --jrpg-bg #1a1c23 the page ground --jrpg-panel #2d3242 the inner panel plate --jrpg-gold #e2b714 the accent The Endesga-32 ramp above is kept because the CANVAS art is drawn from it — sprites, biomes and particles all index those names, so they are not interchangeable with the UI theme and must not be folded into it. */ --jrpg-bg:#1a1c23; --jrpg-bg2:#14161c; /* one step darker, for wells and tracks */ --jrpg-panel:#2d3242; --jrpg-panel2:#363c50; /* raised face inside a panel */ --jrpg-gold:#e2b714; --jrpg-gold-hi:#ffdf5e; --jrpg-edge:#0d0f14; /* the 2px pixel border */ --jrpg-bevel-hi:rgba(255,255,255,.10); --jrpg-bevel-lo:rgba(0,0,0,.42); /* semantic — now mapped onto the theme above */ --page:var(--jrpg-bg); --panel-bg:var(--jrpg-panel); --panel-bg2:var(--jrpg-panel2); --line:var(--jrpg-edge); --bevel-hi:var(--jrpg-bevel-hi); --bevel-lo:var(--jrpg-bevel-lo); --txt:var(--e-silver); --txt-strong:var(--e-white); --txt-dim:#8b93a8; --trim:var(--jrpg-gold); /* gold trim */ --trim-hi:var(--jrpg-gold-hi); /* the 2px pixel frame every container wears, plus its bevel */ --pxframe:0 0 0 2px var(--jrpg-edge); --pxbevel:inset 2px 2px 0 var(--jrpg-bevel-hi), inset -2px -2px 0 var(--jrpg-bevel-lo); /* accents used by the HUD chrome */ --xp-a:var(--e-cyan); /* level ring + level chip */ --alert:var(--e-red); /* notification badges */ /* rhythm — every gap in the shell comes from these three */ --gap-sm:6px; --gap-md:9px; --gap-lg:12px; /* shell metrics; --dock-h also reserves the body's bottom padding */ --dock-h:70px; --rail:352px; /* sidebar width on desktop */ /* reusable pixel elevation, so panels and buttons stay consistent */ --bevel:inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.3); --ring:0 0 0 3px var(--line); --lift:0 4px 0 0 var(--line); /* ---------- pixel type stack ---------- Press Start 2P first, because it IS the game's look. Silkscreen and Pixelify Sans follow it purely to supply the glyphs it does not have: Press Start 2P is Latin-only, so Turkish (ş ğ ı İ ç ö ü) and every other latin-ext character fell through to 'Courier New' one glyph at a time. Font fallback is per-glyph, so this list alone fixes the mixed-font words — the Turkish letters now come from a pixel face. Courier New stays at the end as the offline/no-network path: opened straight off the disk with no webfonts, the whole UI degrades to one consistent monospace rather than to a mixture. */ --font-pixel:'Press Start 2P','Silkscreen','Pixelify Sans','Courier New',monospace; --font-body:ui-monospace,'Lucida Console',Consolas,'Courier New',monospace; } /* ---------- Turkish glyph handling ---------- Two separate problems, both of which show up as "broken Turkish". 1. SUBSTITUTED GLYPHS — handled by the fallback list above. 2. WRONG-CASE GLYPHS — Turkish is one of the two locales where Latin casing is not universal: uppercase of `i` is `İ` (not `I`), and lowercase of `I` is `ı` (not `i`). A browser only knows to do that if the text is tagged as Turkish, so every `text-transform: uppercase` in this sheet depends on the lang attribute being right. game.js sets from the language toggle and the .t spans carry their own lang, so both paths are covered — this block just makes the dependency explicit and guards the descenders, which is where the remaining clipping came from: ş, ğ and ç all drop below the baseline, and a pixel font at 6px with the default line-height had no room for the tail. */ :lang(tr) { /* never let the browser fake a bold/italic for a face that has none — a synthesised pixel glyph is what produces the smeared look */ font-synthesis: none; } /* Any pixel-font label can hold a descender in Turkish, so no pixel-font run is allowed a line-height under 1.5. Individual rules may raise it, never lower it. `:lang(tr)` (not `[lang=tr]`) so it follows AND the per-span lang the .t pattern sets, without caring which one supplied it. */ :lang(tr) .pill-label, :lang(tr) .zone-chapter, :lang(tr) .zone-name, :lang(tr) .lv-badge, :lang(tr) .wave-word, :lang(tr) .tower-label, :lang(tr) .sub-txt, :lang(tr) .dock-txt, :lang(tr) .auto-label, :lang(tr) .skill-name { line-height: 1.65; } /* ---------- 3. Base / page ---------- */ html, body { min-height: 100%; } body { background-color: var(--page); /* A flat slate ground with a faint scanline and one soft overhead pool. The old background was a purple radial wash; the JRPG theme wants the panels to be the brightest thing on screen, so the page is deliberately dull. */ background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px), radial-gradient(120% 80% at 50% -20%, #262a35 0%, #1f222b 45%, var(--jrpg-bg) 100%); background-attachment: fixed; color: var(--txt); font-family: var(--font-body); font-size: 13px; line-height: 1.5; letter-spacing: .3px; padding: var(--gap-lg); /* the fixed dock must never cover the last row of content */ padding-bottom: calc(var(--dock-h) + var(--gap-lg) + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; } .app { max-width: 1180px; margin: 0 auto; display: grid; gap: var(--gap-lg); } h1, h2 { font-family: var(--font-pixel); font-weight: 400; color: var(--txt-strong); } h1 { font-size: 15px; line-height: 1.4; text-shadow: 0 3px 0 var(--e-black), 0 0 14px rgba(254,174,52,.25); } h2 { font-size: 11px; letter-spacing: 1.5px; color: var(--e-cream); text-shadow: 0 2px 0 var(--e-black); } canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; } ::selection { background: var(--e-yellow); color: var(--e-black); } /* bilingual labels: CSS mirrors html[data-lang], which applyI18n() maintains */ .t > [lang] { font-style: normal; } .t > [lang="tr"] { display: none; } html[data-lang="tr"] .t > [lang="en"] { display: none; } html[data-lang="tr"] .t > [lang="tr"] { display: inline; } /* ---------- 4. Pixel primitives ---------- */ /* Every container wears the same 2px pixel frame plus a one-step bevel. Two tokens, so the whole shell is consistent and re-theming is central. */ .panel { position: relative; background: var(--panel-bg); padding: 12px; box-shadow: var(--pxframe), var(--pxbevel), 0 4px 0 0 rgba(0, 0, 0, .38); } /* thin gold trim along the top edge of major panels */ .panel::before { content: ''; position: absolute; left: 3px; right: 3px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--trim), transparent); opacity: .55; pointer-events: none; } .icon-btn, .buy-btn, .tab-btn, .lang-btn, .skill-btn, .inv-btn { font-family: var(--font-pixel); border: 0; cursor: pointer; color: var(--txt-strong); text-transform: uppercase; -webkit-tap-highlight-color: transparent; } /* Compact 2px-framed toggle. Square-ish and small so a rail of six of them still fits beside the currency pills. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--panel-bg2); font-size: 10px; letter-spacing: 1px; padding: 7px 8px; min-height: 30px; min-width: 30px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .13), inset 0 -2px 0 rgba(0, 0, 0, .34), var(--pxframe), 0 3px 0 0 var(--jrpg-edge); transition: transform .08s steps(2), filter .12s linear; } .icon-btn:hover { filter: brightness(1.18) saturate(1.1); transform: translateY(-2px); } .icon-btn:active { transform: translateY(2px); } .icon-btn.is-danger { background: var(--e-crimson); } .icon-btn.is-cog { font-size: 15px; padding: 8px 11px; background: var(--e-brown); color: var(--trim-hi); } .icon-btn.is-close { font-size: 16px; min-height: 30px; padding: 4px 10px; background: var(--e-steel); } .icon-btn:focus-visible, .buy-btn:focus-visible, .tab-btn:focus-visible, .lang-btn:focus-visible, .skill-btn:focus-visible, .inv-btn:focus-visible, .forge-slot:focus-visible, .artifact-slot:focus-visible { outline: 3px solid var(--trim-hi); outline-offset: 3px; } /* ---------- 5. Top HUD ---------- Three zones on one flex row: avatar · stage tracker · currency + utilities. This used to be `grid-template-columns: auto minmax(0,1fr) auto`, and the right-hand `auto` track is what clipped the currency pills and the utility icons: an `auto` track sizes to content and then refuses to shrink, so once the rail grew past the space available it simply overflowed the panel instead of wrapping. Flex fixes it because the zones can be given different shrink behaviour: left fixed content (portrait, level badge, XP) — never shrinks centre the elastic one: flex 1 with min-width 0 so long biome names ellipsise instead of pushing the rail off the edge right never shrinks either, but the ROW is allowed to wrap, so on a narrow viewport the rail drops to its own line at full width rather than being cut off min-width: 0 on every zone is load-bearing: a flex item's default min-width:auto refuses to shrink below its content, which is the other half of the original overflow. */ .hud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-md) var(--gap-lg); padding: var(--gap-md) var(--gap-lg); } /* --- left: avatar frame with level ring --- */ .hud-left { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 0; } /* The ring is a conic-gradient disc; .av-plate sits on top of its middle and is opaque, which is what turns the disc into an annulus. That is deliberately done with layering rather than mask-composite, because the prefixed -webkit-mask composite keywords differ from the standard ones. game.js writes --p (0-100) once per HUD tick. */ .avatar { --p: 0; position: relative; width: 58px; height: 58px; flex: 0 0 auto; } .av-ring { position: absolute; inset: 0; background: conic-gradient(from -90deg, var(--xp-a) 0 calc(var(--p) * 1%), rgba(0, 0, 0, .55) calc(var(--p) * 1%) 100%); box-shadow: 0 0 0 2px var(--line), 0 0 12px rgba(44, 232, 245, .28); } .av-plate { position: absolute; inset: 7px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--panel-bg2), var(--e-black)); box-shadow: inset 0 0 0 2px var(--line), inset 2px 2px 0 rgba(255, 255, 255, .09); } .av-face { font-size: 21px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); } /* class sigil, bottom-left; level chip, bottom-right */ .av-class { position: absolute; left: -3px; bottom: -3px; font-size: 11px; line-height: 1; padding: 2px; background: var(--e-slate); box-shadow: 0 0 0 2px var(--line); } /* NOTE: .av-lv is gone — the level moved out of the portrait and onto its own .lv-badge plate beneath it, so the number is readable at 6.5px instead of being a 20px chip hanging off the ring's corner. */ /* the hero box: framed portrait with the level badge welded to its base */ .hero-box { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; } .lv-badge { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 6px; font-family: var(--font-pixel); font-size: 6.5px; line-height: 1.6; letter-spacing: .8px; color: var(--jrpg-edge); background: var(--jrpg-gold); box-shadow: var(--pxframe), inset 0 2px 0 rgba(255, 255, 255, .3); } .lv-badge b { font-weight: 400; font-size: 8px; } .hud-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hud-name { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px; line-height: 1.6; color: var(--txt-strong); text-shadow: 0 2px 0 var(--jrpg-edge); } /* the segmented EXP strip: narrow, 20 chunks, green. Compound `.bar.bar-xp` on purpose — this rule sits ABOVE the base `.bar` block in the file, and at equal specificity source order would let `.bar`'s height win. The extra class makes the override order-independent. */ .bar.bar-xp { --seg: 20; width: 132px; max-width: 100%; height: 9px; } .fill-xp { background: var(--e-green); } .hud-meta { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-pixel); font-size: 6.5px; letter-spacing: 1px; line-height: 1.7; color: var(--txt-dim); } .hud-meta b { font-weight: 400; color: var(--e-cream); } .hud-xp { color: var(--e-green); } .hud-best { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } /* --- centre: chapter / zone / wave --- */ .hud-mid { /* the elastic zone: 260px is the basis it would LIKE, but flex-shrink keeps it collapsible so the rail never gets pushed out of the panel */ flex: 1 1 260px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 0 var(--gap-md); } /* "BÖLÜM 1" · "BOŞLUK ENGİNİ" — the chapter tag is a gold plate so the zone name beside it can be the long, ellipsising half. */ .zone-line { display: flex; align-items: center; gap: 8px; min-width: 0; } .zone-chapter { flex: 0 0 auto; padding: 2px 6px; font-family: var(--font-pixel); font-size: 6px; letter-spacing: 1.4px; line-height: 1.7; color: var(--jrpg-edge); background: var(--jrpg-gold); box-shadow: var(--pxframe); white-space: nowrap; } .zone-name { min-width: 0; font-family: var(--font-pixel); font-size: 8px; letter-spacing: .6px; line-height: 1.7; color: var(--jrpg-gold-hi); text-shadow: 0 2px 0 var(--jrpg-edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wave-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .wave-word { font-family: var(--font-pixel); font-size: 6.5px; letter-spacing: 2px; line-height: 1.7; color: var(--txt-dim); } .wave-num { font-family: var(--font-pixel); font-size: 18px; font-weight: 400; line-height: 1.05; color: var(--txt-strong); text-shadow: 0 3px 0 var(--jrpg-edge); } .wave-step { margin-left: auto; font-family: var(--font-pixel); font-size: 7px; line-height: 1.7; color: var(--jrpg-gold); white-space: nowrap; } /* Zone progress bar: one segment per wave in the CURRENT zone, so the divider count changes with depth (five early, fifteen deep) rather than always being five. The skull lights on the boss run. */ .wave-track { position: relative; height: 12px; background: var(--e-black); box-shadow: 0 0 0 2px var(--line), inset 2px 2px 0 rgba(0, 0, 0, .6); } .wave-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 6px), linear-gradient(180deg, var(--e-cyan), var(--e-sky)); box-shadow: 0 0 10px rgba(44, 232, 245, .5); transition: width .3s cubic-bezier(.2, .8, .2, 1); } /* Divider overlay. game.js rebuilds its children whenever the zone changes width, so the notch count always equals (waves in this zone - 1). It sits on top of the fill and must not eat pointer events. Absolutely positioned over the whole track so a child's `left: 37.5%` still resolves against the track. */ .wave-notches { position: absolute; inset: 0; display: block; pointer-events: none; } .wave-notch { position: absolute; top: 0; width: 2px; height: 100%; background: var(--e-black); opacity: .85; } .wave-skull { position: absolute; right: -7px; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1; filter: grayscale(1) brightness(.55); transition: filter .25s linear; } /* game.js toggles .is-boss while the wave in progress IS the boss wave */ .wave-track.is-boss .wave-fill { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 6px), linear-gradient(180deg, var(--e-red), var(--e-crimson)); box-shadow: 0 0 12px rgba(228, 59, 68, .6); } .wave-track.is-boss .wave-skull { filter: none; animation: skull-throb 1.1s ease-in-out infinite; } @keyframes skull-throb { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.22); } } /* NOTE: .boss-chip / .chip-label / .chip-val are gone with the boss countdown they displayed. The Tower still has a clock, and it still has a readout — in the Tower panel (.tower-timer), not in the header. */ /* --- right: currency pills + utility rail --- flex: 0 0 auto plus margin-left:auto pins the rail to the right edge while the centre zone absorbs the slack. Nothing inside the rail is allowed to shrink (flex-shrink: 0) — a half-width gold counter is worse than a wrapped row — so when there genuinely is not enough space the ROW wraps instead, and at the breakpoints below the rail takes a line of its own. */ .hud-right { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; } .pill-row, .util-row { gap: 6px; } .pill-row { display: flex; flex-wrap: wrap; justify-content: flex-end; } .pill-row > *, .util-row > * { flex-shrink: 0; } /* CURRENCY PILL — clipping fix. "ALTIN 1.45K" used to collide with both the coin icon and the pill's own right border. Three separate causes, all fixed here: 1. `min-width: 0` on .pill-body let the flex item shrink BELOW its content, so a five-glyph value like "1.45K" was squeezed under the label. It is now `fit-content`, which refuses to compress the text at all. 2. `padding: 4px 8px 4px 7px` gave the value 8px of clearance on the right; the pixel font's advance width plus its 2px text-shadow needed more, so the last glyph sat on the frame. Now a symmetric `4px 12px`. 3. `line-height: 1.15` on an 11px pixel face is shorter than the glyph box, so the value's cap-height overlapped the label sitting above it. 1.45 gives each row its own band. `flex-shrink: 0` and `min-width: fit-content` are stated on the pill itself as well: the row wraps to a second line rather than ever compressing a counter. */ .pill { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-shrink: 0; min-width: fit-content; padding: 4px 12px; overflow: visible; background: linear-gradient(180deg, var(--jrpg-panel2) 0%, var(--jrpg-panel) 100%); box-shadow: var(--pxframe), inset 2px 2px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .38), inset 4px 0 0 var(--c-accent); } .pill-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; min-width: fit-content; overflow: visible; } .pill-label { font-family: var(--font-pixel); font-size: 6px; letter-spacing: 1.4px; /* Turkish labels (CEVHER, MİTİK) carry a dotted capital and descenders; a tight default line-height clipped them inside the pill */ line-height: 1.6; color: var(--txt-dim); white-space: nowrap; overflow: visible; } .pill-val { display: block; font-family: var(--font-pixel); font-size: 11px; font-weight: 400; /* room for the glyph box AND the 2px drop shadow beneath it */ line-height: 1.45; /* the pixel font's last glyph carries no side bearing of its own */ margin-right: 2px; color: var(--c-accent); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); white-space: nowrap; overflow: visible; } /* Pixel currency icons, drawn entirely with box-shadow on a 3px cell grid. The element itself is one transparent cell at (0,0); every lit cell is a shadow offset by a multiple of 3px, so the art stays crisp at any zoom. */ .pill-ico { width: 3px; height: 3px; flex: 0 0 auto; /* box-shadow never affects layout, so the margin reserves the 15x15 footprint the shadow grid actually paints (3px cell + 12px of cells to the right/below) */ margin: 0 12px 12px 0; background: transparent; } .pill.is-gold { --c-accent: var(--jrpg-gold-hi); } .pill.is-gem { --c-accent: var(--e-cyan); } .pill.is-mythic { --c-accent: var(--e-mauve); } /* coin */ .pill.is-gold .pill-ico { box-shadow: 3px 0 0 var(--e-amber), 6px 0 0 var(--e-amber), 9px 0 0 var(--e-amber), 0 3px 0 var(--e-amber), 3px 3px 0 var(--e-yellow), 6px 3px 0 var(--e-yellow), 9px 3px 0 var(--e-yellow), 12px 3px 0 var(--e-amber), 0 6px 0 var(--e-amber), 3px 6px 0 var(--e-yellow), 6px 6px 0 #fff, 9px 6px 0 var(--e-yellow), 12px 6px 0 var(--e-amber), 0 9px 0 var(--e-amber), 3px 9px 0 var(--e-yellow), 6px 9px 0 var(--e-yellow), 9px 9px 0 var(--e-yellow), 12px 9px 0 var(--e-amber), 3px 12px 0 var(--e-amber), 6px 12px 0 var(--e-amber), 9px 12px 0 var(--e-amber); filter: drop-shadow(0 0 5px rgba(254, 231, 97, .7)); } /* gem */ .pill.is-gem .pill-ico { box-shadow: 6px 0 0 var(--e-sky), 3px 3px 0 var(--e-sky), 6px 3px 0 var(--e-cyan), 9px 3px 0 var(--e-sky), 0 6px 0 var(--e-sky), 3px 6px 0 var(--e-cyan), 6px 6px 0 #fff, 9px 6px 0 var(--e-cyan), 12px 6px 0 var(--e-sky), 3px 9px 0 var(--e-sky), 6px 9px 0 var(--e-cyan), 9px 9px 0 var(--e-sky), 6px 12px 0 var(--e-sky); filter: drop-shadow(0 0 5px rgba(44, 232, 245, .7)); } /* shard */ .pill.is-mythic .pill-ico { box-shadow: 6px 0 0 #fff, 3px 3px 0 var(--e-purple), 6px 3px 0 var(--e-cyan), 9px 3px 0 var(--e-purple), 3px 6px 0 var(--e-purple), 6px 6px 0 var(--e-cyan), 9px 6px 0 var(--e-purple), 3px 9px 0 var(--e-purple), 6px 9px 0 var(--e-cyan), 9px 9px 0 var(--e-purple), 6px 12px 0 var(--e-mauve); filter: drop-shadow(0 0 5px rgba(181, 80, 136, .8)); } .util-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; } /* ---------- 6. Language toggle ---------- */ .lang-toggle { display: flex; background: var(--jrpg-bg2); padding: 2px; box-shadow: var(--pxframe), inset 0 2px 0 rgba(0, 0, 0, .4); } .lang-btn { background: transparent; color: var(--txt-dim); font-size: 8px; letter-spacing: 1px; padding: 6px 7px; min-width: 28px; transition: background .2s ease, color .2s ease; } .lang-btn:hover { color: var(--txt-strong); } .lang-btn.active { background: var(--e-cyan); color: var(--jrpg-edge); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28); } /* ---------- 7. Stage ---------- */ .main { display: grid; grid-template-columns: minmax(0,1fr) var(--rail); gap: var(--gap-lg); align-items: start; } .stage-column { min-width: 0; display: grid; gap: 10px; } .stage { padding: 6px; background: var(--jrpg-bg2); box-shadow: var(--pxframe), var(--pxbevel), 0 5px 0 0 rgba(0, 0, 0, .45); } .stage::before { opacity: .8; } /* The arena is centred inside its frame and capped, so at 1280px the canvas does not span the whole panel edge-to-edge while the (centred) combat dock sits beneath it — the two were visibly out of alignment before. */ .stage-inner { position: relative; line-height: 0; margin: 0 auto; width: 100%; max-width: 960px; background: #0b0912; box-shadow: inset 0 0 0 2px var(--jrpg-edge); overflow: hidden; } /* --stage-ar is written by applyRes() from the live backing-store size, so the box follows the chosen resolution's aspect and the absolutely-positioned overlay layer (boss bar, HP stack, hit text) stays glued to the world rect. The fallback keeps older/JS-less rendering at the 16:9 design ratio. */ #game-canvas { display: block; width: 100%; height: auto; aspect-ratio: var(--stage-ar, 16 / 9); image-rendering: pixelated; image-rendering: crisp-edges; } /* ---------- resolution picker (top bar) ---------- */ .res-ctl { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; } .res-ico { font-size: 11px; line-height: 1; filter: saturate(.7); } .res-select { font-family: var(--font-pixel); font-size: 6px; letter-spacing: .5px; padding: 4px 3px; color: var(--txt-strong); background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .res-select:focus-visible { outline: 2px solid var(--trim-hi); outline-offset: 1px; } .res-select option { background: var(--e-ink); color: var(--txt-strong); font-family: inherit; } .res-note { font-family: var(--font-pixel); font-size: 5.5px; letter-spacing: .4px; color: var(--txt-dim); white-space: nowrap; } /* the readout is the first thing worth dropping when the bar gets tight */ @media (max-width: 900px) { .res-note { display: none; } } @media (max-width: 620px) { .res-ico { display: none; } } /* ---------- HUD responsiveness ---------- Four stages of graceful degradation, worst case last. The ordering matters: each stage gives up the least useful thing still on screen, and the counters themselves — the numbers a player actually reads — survive to the end. */ /* 1. The rail no longer fits beside the centre zone: give it its own full-width row and spread it out, rather than letting it clip. */ @media (max-width: 1180px) { .hud-right { flex: 1 1 100%; margin-left: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; } .hud-right .pill-row { margin-right: auto; justify-content: flex-start; } } /* 2. Tighter: drop the pill captions and keep the values. A gold coin icon with a number next to it does not need the word GOLD over it. */ @media (max-width: 780px) { .hud { gap: var(--gap-sm) var(--gap-md); padding: var(--gap-sm) var(--gap-md); } .pill { padding: 4px 7px; gap: 5px; } .pill-label { display: none; } .pill-val { font-size: 10px; } } /* 3. The portrait's text block is the largest thing left that repeats information available elsewhere (level is on the badge, XP is on the ring). */ @media (max-width: 620px) { .hud-id { display: none; } .hud-mid { flex-basis: 180px; padding: 0; } .pill-ico { display: none; } } /* 4. Last resort: stack the zones. Nothing is hidden that has not already been hidden above, so this is purely a reflow. */ @media (max-width: 460px) { .hud-left { flex: 1 1 100%; } .hud-mid { flex: 1 1 100%; } .hud-right { justify-content: flex-start; } .hud-right .pill-row { margin-right: 0; } } /* --- CRT filter stack --- */ .crt-scan, .crt-mask, .crt-flicker, .crt-vig { position: absolute; inset: 0; pointer-events: none; } .crt-scan { background: repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 2px, rgba(0,0,0,0) 2px 4px); } .crt-mask { background: repeating-linear-gradient(90deg, rgba(255,0,68,.05) 0 1px, rgba(44,232,245,.05) 1px 2px, rgba(99,199,77,.05) 2px 3px); } .crt-flicker { background: rgba(192,203,220,.035); animation: crt-flick 5.5s steps(2, end) infinite; } .crt-vig { box-shadow: inset 0 0 46px rgba(11,9,18,.75), inset 0 0 120px rgba(11,9,18,.5), inset 0 0 8px rgba(0,0,0,.9); } @keyframes crt-flick { 0%, 96%, 100% { opacity: .5; } 97% { opacity: .95; } 98% { opacity: .3; } } /* --- Render mode --- game.js owns this now: it stamps `gfx-crt` (or `gfx-crisp`) on from the GRAPHICS panel and writes the choice straight to localStorage. CRISP is the default, so the filter layers are opt-in rather than opt-out. The vignette is deliberately excluded from the toggle: it frames the art rather than filtering it, so it stays on in both modes. */ body:not(.gfx-crt) .crt-scan, body:not(.gfx-crt) .crt-mask, body:not(.gfx-crt) .crt-flicker { display: none; } /* Crisp mode leans the other way: hard nearest-neighbour everywhere and a slightly tighter vignette, so the pixel grid is the whole picture. */ body.gfx-crisp canvas { image-rendering: pixelated; image-rendering: crisp-edges; } body.gfx-crisp .crt-vig { box-shadow: inset 0 0 30px rgba(11,9,18,.55), inset 0 0 90px rgba(11,9,18,.34); } /* CRT mode pushes the grille and glow a little harder than the base stack. */ body.gfx-crt .crt-scan { background: repeating-linear-gradient(180deg, rgba(0,0,0,.30) 0 2px, rgba(0,0,0,0) 2px 4px); } body.gfx-crt .crt-mask { background: repeating-linear-gradient(90deg, rgba(255,0,68,.075) 0 1px, rgba(44,232,245,.075) 1px 2px, rgba(99,199,77,.075) 2px 3px); } body.gfx-crt .stage-inner, body.gfx-crt .town-stage { box-shadow: 0 0 0 3px #0d0a14, inset 0 0 0 2px var(--e-slate), 0 0 22px rgba(44,232,245,.10); } .stage-overlay { position: absolute; inset: 0; pointer-events: none; line-height: 1.4; } /* combat bars — the hero and enemy plates take 12 chunks each */ .bar-stack { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; } .bar-name, .bar-text { font-family: var(--font-pixel); font-size: 7px; letter-spacing: 1px; line-height: 1.6; text-shadow: 0 2px 0 #000; } .bar-name { color: var(--e-white); } .bar-text { color: var(--e-silver); } /* ---------- segmented arcade bars ---------- EVERY progress bar in the game is segmented, and it is done in one place. The mechanism: .bar is the well, .bar-fill is the coloured mass, and .bar::after lays a comb of 1px opaque teeth over the top. Because the teeth are painted ABOVE the fill and match the well's colour, a continuous fill reads as discrete chunks with no extra elements and — crucially — no JS involvement: game.js still writes exactly one width per bar, as it always did. --seg is the segment count, so a bar can be re-cut per instance: the hero and enemy bars use 12, the boss plate 10, the EXP strip 20. */ .bar { --seg: 12; position: relative; height: 12px; background: var(--jrpg-bg2); box-shadow: var(--pxframe), inset 0 2px 0 rgba(0, 0, 0, .55); overflow: hidden; } .bar-fill { height: 100%; width: 100%; transition: width .22s steps(10, end); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .24), inset 0 -3px 0 rgba(0, 0, 0, .3); } /* the comb. calc(100% / var(--seg)) is one segment; the last 1px of each is a tooth, which is what produces the 1px gap between chunks. */ .bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--seg) - 1px), var(--jrpg-bg2) calc(100% / var(--seg) - 1px) calc(100% / var(--seg))); } .fill-player { background: var(--e-green); } .fill-enemy { background: var(--e-red); } .fill-boss { background: var(--e-hot); } .fill-forge { background: var(--jrpg-gold); } /* ---------- boss banner ---------- Centred at the top of the canvas, wearing a 2px pixel frame and an ornate crest. The crest is the ::before of the panel rather than markup, so the boss plate stays a two-element structure that game.js can keep writing blind. */ .boss-panel { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(330px, 80%); padding: 9px 12px 9px; background: linear-gradient(180deg, #2a2030 0%, #1d1826 100%); box-shadow: 0 0 0 2px var(--jrpg-edge), 0 0 0 4px var(--e-hot), inset 2px 2px 0 rgba(255, 255, 255, .09), inset -2px -2px 0 rgba(0, 0, 0, .5), 0 5px 0 rgba(0, 0, 0, .5); text-align: center; } /* the crest: a skull on a notched plate, straddling the top frame */ .boss-panel::before { content: '\1F480'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 22px; font-size: 13px; line-height: 22px; text-align: center; background: var(--e-hot); color: #1a0a10; /* the notch: clipping the lower corners turns the plate into a crest rather than a floating box */ clip-path: polygon(18% 0, 82% 0, 100% 26%, 86% 100%, 14% 100%, 0 26%); box-shadow: 0 0 0 2px var(--jrpg-edge); } .boss-name { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 2px; line-height: 1.7; color: var(--jrpg-gold-hi); text-shadow: 0 2px 0 #000; margin: 3px 0 6px; overflow-wrap: break-word; } /* the boss plate is cut into 10 chunky segments — compound for the same order-independence reason as .bar.bar-xp above */ .bar.bar-boss { --seg: 10; height: 15px; } /* floating message */ .game-msg { position: absolute; left: 50%; top: 34%; transform: translate(-50%, 10px); width: max-content; max-width: 88%; padding: 8px 12px; background: rgba(24,20,37,.9); box-shadow: 0 0 0 3px var(--trim-hi); font-family: var(--font-pixel); font-size: 9px; line-height: 1.6; letter-spacing: 1px; color: var(--trim-hi); text-align: center; opacity: 0; transition: opacity .25s ease, transform .25s ease; } .game-msg.visible { opacity: 1; transform: translate(-50%, 0); } /* DOM hit-text layer (percentage positioned by JS). Bold multi-layer drop shadow so numbers stay legible over any biome, and a two-stage pop on crits: overshoot, settle, then drift up and fade. */ .hit-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .hit-text { position: absolute; transform: translate(-50%, 0); font-family: var(--font-pixel); font-size: 10px; line-height: 1; color: var(--e-rose); /* stacked 1px offsets read as a hard pixel outline, not a blur */ text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0 3px 0 rgba(0, 0, 0, .55), 0 0 9px rgba(0, 0, 0, .75); animation: hit-rise .9s cubic-bezier(.2, .8, .2, 1) forwards; will-change: transform, opacity; } .hit-text.is-crit { font-size: 16px; color: var(--trim-hi); text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0 3px 0 var(--e-brick), 0 0 14px rgba(254, 231, 97, .85); animation: hit-pop 1.05s cubic-bezier(.2, .8, .2, 1) forwards; } .hit-text.is-heal { color: var(--e-green); } .hit-text.is-block { color: var(--e-cyan); } @keyframes hit-rise { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 30% { transform: translate(-50%, -4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1); } } @keyframes hit-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.5) rotate(-6deg); } 14% { opacity: 1; transform: translate(-50%, -2px) scale(1.5) rotate(3deg); } 26% { transform: translate(-50%, -6px) scale(1.05) rotate(-1deg); } 38% { transform: translate(-50%, -9px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } } /* ---------- 8. Skill dock — three square slots + an auto-cast switch ---------- The dock used to stretch the slots across the whole stage width (a 1fr grid), which at 1280px made three enormous lozenges. It is now CENTRED and the slots are a fixed square size, so the dock reads the same at every resolution. Two rows: the buff strip spans the top, then one centred row holding the three slots and the switch. */ .skill-dock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--gap-md); } .dock-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .buff-strip { align-self: stretch; } .skill-bar { display: flex; align-items: center; justify-content: center; gap: 12px; } /* --------------------------------------------------------------------------- SKILL SLOT — 64x64 pixel-art plate, not an HTML button. Every trace of the browser's button chrome is stripped (appearance, border, background, font inheritance) and replaced with the four things that make a slot read as inventory furniture rather than as a control: ground a flat #1a1c23 well — the theme's own page colour, so the slot reads as a HOLE cut in the dock rather than a raised lozenge frame a real 2px solid #00ffff border on all four sides bevel inset highlight top/left + inset shade bottom/right, 3px each, so the well has depth without a gradient shell a 2px black keyline outside the cyan, which is what stops the cyan from bleeding into the dock's own panel colour No clip-path, no border-radius: the square IS the shape, and box-shadow is used for the bevel so the cyan glow can spill outside the box. --------------------------------------------------------------------------- */ .skill-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 64px; min-width: 64px; min-height: 64px; flex: 0 0 auto; padding: 0; margin: 0; cursor: pointer; overflow: visible; /* kill the UA button entirely */ -webkit-appearance: none; appearance: none; font: inherit; color: var(--txt-strong); /* the square dark well + its cyan frame */ background: #1a1c23; border: 2px solid #00ffff; box-shadow: /* inset bevels: lit from the top-left, shaded to the bottom-right */ inset 3px 3px 0 rgba(255, 255, 255, .14), inset -3px -3px 0 rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(0, 255, 255, .18), /* black keyline outside the cyan so the frame never bleeds into the dock */ 0 0 0 2px var(--jrpg-edge), 0 3px 0 0 rgba(0, 0, 0, .5); transition: transform .08s steps(2), filter .15s linear, box-shadow .18s linear; } /* Ready-state CYAN border glow. Driven by .is-ready from updateHUD, so it lights only when the skill can actually be pressed — a dock where everything always glows tells the player nothing. */ .skill-btn.is-ready { border-color: #7cf6ff; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .18), inset -3px -3px 0 rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(0, 255, 255, .3), 0 0 0 2px var(--jrpg-edge), 0 0 14px 2px rgba(0, 255, 255, .5), 0 3px 0 0 rgba(0, 0, 0, .5); animation: slot-glow 1.9s ease-in-out infinite; } @keyframes slot-glow { 0%, 100% { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .16), inset -3px -3px 0 rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 255, 255, .22), 0 0 0 2px var(--jrpg-edge), 0 0 9px 1px rgba(0, 255, 255, .34), 0 3px 0 0 rgba(0, 0, 0, .5); } 50% { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .22), inset -3px -3px 0 rgba(0, 0, 0, .56), inset 0 0 0 1px rgba(0, 255, 255, .38), 0 0 0 2px var(--jrpg-edge), 0 0 20px 5px rgba(0, 255, 255, .62), 0 3px 0 0 rgba(0, 0, 0, .5); } } @media (prefers-reduced-motion: reduce) { .skill-btn.is-ready { animation: none; } } .skill-btn:hover { filter: brightness(1.16) saturate(1.08); transform: translateY(-2px); } .skill-btn:active { transform: translateY(2px); } .skill-btn:focus-visible { outline: 3px solid var(--trim-hi); outline-offset: 4px; } .skill-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)); pointer-events: none; } .skill-name { max-width: 60px; font-family: var(--font-pixel); font-size: 5px; letter-spacing: .5px; line-height: 1.6; text-align: center; color: var(--e-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* Hotkey badge, bracketed like the brief asks: [1] [2] [3], absolutely positioned at the TOP LEFT of the square. Nudged out by 4px on both axes so it straddles the cyan frame and reads as a tab welded onto the slot rather than a label floating inside it. */ .skill-key { position: absolute; top: -4px; left: -4px; z-index: 4; padding: 1px 3px; font-family: var(--font-pixel); font-size: 6px; letter-spacing: .5px; line-height: 1.5; color: #00ffff; background: var(--jrpg-edge); box-shadow: 0 0 0 2px #00ffff, 0 2px 0 rgba(0, 0, 0, .5); pointer-events: none; } .skill-key::before { content: '['; } .skill-key::after { content: ']'; } /* CIRCULAR radial cooldown sweep, inset inside the square slot. game.js sets --cd (0-100) every HUD tick and the conic gradient wipes from 12 o'clock; the circular mask is what makes it read as a clock face rather than a corner-filling wedge, which is what a conic gradient on a bare square looks like. */ .skill-btn::before { content: ''; position: absolute; /* relative to the PADDING box, so this already sits inside the 2px cyan frame — 4px keeps the bevel highlight readable around the clock face */ inset: 4px; z-index: 1; pointer-events: none; border-radius: 50%; background: conic-gradient(from -90deg, rgba(8, 6, 14, .82) calc(var(--cd, 0) * 1%), transparent 0); } /* the countdown readout — empty (and therefore invisible) when off cooldown */ .skill-cd { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); z-index: 2; font-family: var(--font-pixel); font-size: 7px; letter-spacing: .4px; line-height: 1; color: var(--e-white); text-shadow: 0 0 4px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .7); pointer-events: none; } .skill-btn.on-cd { filter: grayscale(.55) brightness(.82); } /* while counting down, the label gives way to the number */ .skill-btn.on-cd .skill-name { opacity: 0; } /* Active (toggled-on) skill keeps the square well and swaps the frame to gold, so "running" and "ready" are told apart by COLOUR rather than by shape. */ .skill-btn.active-skill { background: #1c2a1e; border-color: var(--trim-hi); box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .18), inset -3px -3px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(254, 231, 97, .3), 0 0 0 2px var(--jrpg-edge), 0 0 14px 2px rgba(254, 231, 97, .45), 0 3px 0 0 rgba(0, 0, 0, .5); animation: slot-live 1.2s ease-in-out infinite; } @keyframes slot-live { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } /* ---------- active buff / aura strip ---------- One chip per running effect, above the slots. Skill auras, town draughts and the Aegis absorb pool each get their own accent so the source is readable without hovering. Scrolls sideways rather than wrapping, so a stack of eight buffs never pushes the skill slots down mid-fight. */ .buff-strip { display: flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 1px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .buff-strip::-webkit-scrollbar { height: 0; } .buff-strip.is-empty { display: none; } .buff-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 6px; background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 2px var(--line); animation: buff-in .18s steps(3); } .buff-chip-ico { font-size: 10px; line-height: 1; } .buff-chip-val { font-family: var(--font-pixel); font-size: 6px; font-weight: 400; letter-spacing: .4px; color: var(--e-cream); } .buff-chip.is-skill { box-shadow: inset 0 0 0 2px var(--e-green); } .buff-chip.is-skill .buff-chip-val { color: var(--e-green); } .buff-chip.is-town { box-shadow: inset 0 0 0 2px var(--e-amber); } .buff-chip.is-town .buff-chip-val { color: var(--trim-hi); } .buff-chip.is-ward { box-shadow: inset 0 0 0 2px var(--e-sky); } .buff-chip.is-ward .buff-chip-val { color: var(--e-cyan); } @keyframes buff-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .buff-chip { animation: none; } } /* ---------- AUTO-CAST toggle switch ---------- Was a fourth slot that looked exactly like a skill but behaved like a checkbox. It is now an actual switch, which is what it always was: a persistent on/off state, not a thing you press to fire. Lives outside #skill-bar because buildSkillBar() wipes that container's innerHTML. game.js keeps driving #auto-skill and toggling .is-locked on this wrapper, so none of its wiring changed. */ .auto-switch { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 10px; cursor: pointer; background: rgba(0, 0, 0, .34); box-shadow: 0 0 0 2px var(--e-black), 0 0 0 4px #2f3b5e, inset 0 2px 0 rgba(255, 255, 255, .06); transition: box-shadow .18s linear, filter .18s linear; -webkit-tap-highlight-color: transparent; } /* the real control, kept in the accessibility tree but visually replaced */ .auto-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .auto-key { font-family: var(--font-pixel); font-size: 5.5px; letter-spacing: .5px; line-height: 1.5; color: var(--e-cyan); } .auto-key::before { content: '['; } .auto-key::after { content: ']'; } /* The status LED: a 6px pixel lamp that is dark when off and pulses when auto-cast is actually firing, so the dock says at a glance whether the hero is casting on his own. */ .auto-led { width: 6px; height: 6px; flex: 0 0 auto; background: #2a2f3c; box-shadow: 0 0 0 1px var(--jrpg-edge), inset 0 1px 0 rgba(255, 255, 255, .12); transition: background .18s linear, box-shadow .18s linear; } .auto-label { font-family: var(--font-pixel); font-size: 6px; letter-spacing: .8px; line-height: 1.6; color: var(--txt-dim); transition: color .18s linear; } /* track + knob, both on the pixel grid (no border-radius) */ .auto-track { position: relative; width: 28px; height: 14px; flex: 0 0 auto; background: #141827; box-shadow: inset 0 0 0 2px #3a4466; transition: box-shadow .18s linear, background .18s linear; } .auto-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--e-steel); transition: transform .16s steps(3), background .18s linear; } .auto-switch:hover { filter: brightness(1.14); } .auto-switch:focus-within { box-shadow: 0 0 0 2px var(--e-black), 0 0 0 4px var(--trim-hi), inset 0 2px 0 rgba(255, 255, 255, .06); } /* ---- on ---- */ .auto-switch:has(input:checked) .auto-track { background: #0b3a63; box-shadow: inset 0 0 0 2px var(--e-cyan); } .auto-switch:has(input:checked) .auto-knob { transform: translateX(14px); background: var(--e-cyan); } .auto-switch:has(input:checked) .auto-label { color: var(--e-cyan); } .auto-switch:has(input:checked) { box-shadow: 0 0 0 2px var(--jrpg-edge), 0 0 0 4px var(--e-cyan), 0 0 10px 1px rgba(44, 232, 245, .35), inset 0 2px 0 rgba(255, 255, 255, .06); } /* the LED lights and breathes only while auto-cast is live */ .auto-switch:has(input:checked) .auto-led { background: var(--e-cyan); box-shadow: 0 0 0 1px var(--jrpg-edge), 0 0 7px 2px rgba(44, 232, 245, .75); animation: led-pulse 1.15s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 1px var(--jrpg-edge), 0 0 5px 1px rgba(44, 232, 245, .6); } 50% { opacity: .55; box-shadow: 0 0 0 1px var(--jrpg-edge), 0 0 11px 3px rgba(44, 232, 245, .95); } } @media (prefers-reduced-motion: reduce) { .auto-switch:has(input:checked) .auto-led { animation: none; } } /* ---- locked until the unlock level ---- */ .auto-switch.is-locked { filter: grayscale(1) brightness(.62); cursor: not-allowed; } .auto-switch.is-locked:hover { filter: grayscale(1) brightness(.62); } /* :has() is well supported now, but a browser without it would leave the switch permanently in its off state. This fallback drives the same visuals off the checkbox's sibling order instead, which needs no :has(). */ .auto-switch input:checked ~ .auto-track { background: #0b3a63; box-shadow: inset 0 0 0 2px var(--e-cyan); } .auto-switch input:checked ~ .auto-track .auto-knob { transform: translateX(14px); background: var(--e-cyan); } .auto-switch input:checked ~ .auto-label { color: var(--e-cyan); } .auto-switch input:checked ~ .auto-led { background: var(--e-cyan); box-shadow: 0 0 0 1px var(--jrpg-edge), 0 0 7px 2px rgba(44, 232, 245, .75); } @media (max-width: 460px) { .auto-label { display: none; } } /* ---------- 9. Sidebar: sub-tabs, buy dock, panels ---------- */ .sidebar { min-width: 0; display: grid; gap: var(--gap-lg); } .shop { padding: 0; overflow: visible; } /* --- character sub-tabs --- Only revealed while one of the five character panels is on screen. :has() lets the shell react to which .tab-panel game.js unhid, with no JS of its own. */ .sub-tabs { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: var(--gap-sm); background: var(--e-black); } body:has(#tab-attributes:not(.hidden)) .sub-tabs, body:has(#tab-heroes:not(.hidden)) .sub-tabs, body:has(#tab-companions:not(.hidden)) .sub-tabs, body:has(#tab-tower:not(.hidden)) .sub-tabs, body:has(#tab-dungeon:not(.hidden)) .sub-tabs { display: grid; } /* Taller than they were, and stacked rather than inline. At 6px the Turkish labels (ÖZELLİK, YOLDAŞ) are long enough that icon-beside-text forced them to ellipsise; putting the icon above the label gives the text the full button width and the extra height keeps the descenders off the bottom edge. */ .sub-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 50px; padding: 9px 5px 8px; background: rgba(255, 255, 255, .04); color: var(--txt-dim); font-size: 6px; letter-spacing: .4px; line-height: 1.6; text-align: center; transition: background .18s linear, color .18s linear, transform .08s steps(2); } .sub-txt { display: block; max-width: 100%; overflow-wrap: break-word; } .sub-ico { font-size: 11px; line-height: 1; filter: grayscale(.6); transition: filter .18s linear; } .sub-btn:hover { color: var(--txt-strong); background: rgba(255, 255, 255, .09); } .sub-btn:hover .sub-ico { filter: none; } .sub-btn:active { transform: translateY(2px); } .sub-btn.active { background: var(--panel-bg2); color: var(--trim-hi); box-shadow: inset 0 -3px 0 var(--trim-hi), inset 0 2px 0 rgba(255, 255, 255, .1); } .sub-btn.active .sub-ico { filter: none; } /* --- buy-amount dock, floating just above the active view --- */ .buy-dock { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); margin: 0 var(--gap-md) calc(var(--gap-md) * -1); padding: var(--gap-sm) var(--gap-md); background: linear-gradient(180deg, #262d49, #14111f); box-shadow: 0 0 0 3px var(--line), inset 0 3px 0 rgba(255, 255, 255, .09), inset 0 -3px 0 rgba(0, 0, 0, .45), 0 5px 0 0 rgba(0, 0, 0, .35); transform: translateY(calc(var(--gap-md) * -0.5)); } .dock-label { font-family: var(--font-pixel); font-size: 6.5px; letter-spacing: 1.5px; color: var(--txt-dim); } .mult-ctl { display: flex; gap: 3px; } .mult-btn { font-family: var(--font-pixel); border: 0; cursor: pointer; background: var(--e-slate); color: var(--txt-dim); font-size: 7px; letter-spacing: .5px; padding: 7px 8px; min-width: 36px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .34), 0 0 0 2px var(--line); transition: background .16s linear, color .16s linear, transform .08s steps(2); } .mult-btn:hover { color: var(--txt-strong); filter: brightness(1.18); } .mult-btn:active { transform: translateY(2px); } .mult-btn.active { background: var(--e-cyan); color: var(--e-black); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--line), 0 0 12px rgba(44, 232, 245, .55); } .mult-btn.is-max.active { background: var(--trim-hi); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--line), 0 0 12px rgba(254, 231, 97, .6); } .mult-btn:focus-visible { outline: 3px solid var(--trim-hi); outline-offset: 2px; } /* --- notification badge: red dot when a tab holds an affordable action --- */ .tab-badge { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; background: var(--alert); box-shadow: 0 0 0 2px var(--e-black), 0 0 8px rgba(228, 59, 68, .85); opacity: 0; transform: scale(.4); transition: opacity .18s linear, transform .18s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .tab-btn.has-alert .tab-badge { opacity: 1; transform: scale(1); animation: badge-pip 1.5s ease-in-out infinite; } @keyframes badge-pip { 0%, 100% { box-shadow: 0 0 0 2px var(--e-black), 0 0 5px rgba(228, 59, 68, .7); } 50% { box-shadow: 0 0 0 2px var(--e-black), 0 0 13px rgba(246, 117, 122, 1); } } /* the badge stays visible on the open tab but stops shouting */ .tab-btn.active.has-alert .tab-badge { animation: none; background: var(--e-rose); } /* The panel body scrolls, but its ceiling is now viewport-relative instead of a flat 486px. That fixed number was cutting the bottom off the taller panels — the Tower's relic-bonus block and the talent hints under it — on any window shorter than about 700px, with no way to reach them. */ .tab-body { /* A flex COLUMN, not a block. Panels are laid out one under another and each keeps its own natural height (see .tab-body > .tab-panel below); when the stack is taller than the scrollport the panel scrolls instead of its blocks being compressed into one another. */ display: flex; flex-direction: column; align-items: stretch; padding: var(--gap-lg); max-height: clamp(320px, 62vh, 640px); overflow-y: auto; /* momentum scrolling on touch, and never a horizontal bar. This stays `hidden` on purpose. `overflow-x: visible` is NOT available here: CSS computes `visible` to `auto` on one axis as soon as the other axis scrolls, so asking for visible would only add a horizontal scrollbar and would still clip. Tooltips escape this box by being cloned into #tip-layer on instead — see initTipPortal() in game.js. */ overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* A flex item defaults to flex-shrink: 1, which is what let a tall panel — the forge, with its anvil + success meter + actions + sockets + gems — get squeezed toward the scrollport height so its blocks bled into each other. Panels now refuse to shrink and simply overflow into the scrollbar. */ .tab-body > .tab-panel { flex: 0 0 auto; min-height: fit-content; min-width: 0; } .tab-panel:not(.hidden) { animation: panel-in .24s cubic-bezier(.2,.8,.2,1) both; } @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .tab-body::-webkit-scrollbar { width: 10px; } .tab-body::-webkit-scrollbar-track { background: var(--e-black); } .tab-body::-webkit-scrollbar-thumb { background: var(--e-steel); box-shadow: inset 2px 2px 0 rgba(255,255,255,.14); } .tab-body { scrollbar-width: thin; scrollbar-color: var(--e-steel) var(--e-black); } .section-rule { height: 3px; margin: 14px 0; background: linear-gradient(90deg, transparent, var(--e-steel), transparent); } /* ---------- 9c. Marketplace, arena and the chat dock ---------- All three are new surfaces built out of the existing pixel vocabulary — the same 2px frames, the same .buy-btn, the same .item-tip — so nothing here introduces a second visual language. */ .mkt-mode { font-family: var(--font-pixel); font-size: 6px; letter-spacing: .8px; line-height: 1.7; color: var(--jrpg-gold); white-space: nowrap; } .mkt-tabs { display: flex; gap: 3px; margin-bottom: 9px; } .mkt-tab { flex: 1 1 0; min-width: 0; padding: 9px 6px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .04); color: var(--txt-dim); font-family: var(--font-pixel); font-size: 6px; letter-spacing: .6px; line-height: 1.7; transition: background .18s linear, color .18s linear; } .mkt-tab:hover { color: var(--txt-strong); background: rgba(255, 255, 255, .08); } .mkt-tab.active { background: var(--panel-bg2); color: var(--jrpg-gold-hi); box-shadow: inset 0 -3px 0 var(--jrpg-gold); } .mkt-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .mkt-search { flex: 1 1 120px; min-width: 0; padding: 7px 8px; font-family: inherit; font-size: 10px; color: var(--txt-strong); background: var(--jrpg-bg2); border: 0; box-shadow: inset 0 0 0 2px var(--jrpg-edge); } .mkt-search:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--jrpg-gold); } .mkt-select { flex: 0 1 auto; width: auto; min-width: 84px; margin-top: 0; } .mkt-filters .inv-btn { flex: 0 0 auto; } .mkt-status { min-height: 1.5em; margin-bottom: 7px; font-size: 9.5px; line-height: 1.6; color: var(--txt-dim); } .mkt-status.is-win { color: var(--e-green); } .mkt-status.is-fail { color: var(--e-rose); } .mkt-body { display: grid; gap: 8px; } .mkt-list { display: grid; gap: 6px; } /* One listing. position:relative so the .item-tip has something to anchor to. */ .mkt-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 2px var(--jrpg-edge), inset 2px 2px 0 rgba(255, 255, 255, .04); } .mkt-row:hover { filter: brightness(1.12); } /* The rarity classes already set --r elsewhere; borrow it for the left edge. Spelled out rather than matched with [class*='rar-'] — the classes are .r-common … .r-mythic, so a substring match on 'rar-' silently never fires and every listing on the board loses its rarity rule. */ .mkt-row:is(.r-common, .r-uncommon, .r-rare, .r-epic, .r-legendary, .r-mythic) { box-shadow: inset 0 0 0 2px var(--jrpg-edge), inset 4px 0 0 var(--r, var(--e-steel)); } .mkt-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 15px; } .mkt-ico canvas { display: block; image-rendering: pixelated; width: 30px; height: 30px; } .mkt-row-body { min-width: 0; } /* Declared explicitly rather than inherited from
: the arena's rival rows are