/* ===================================================================== DEADMAN'S CROSS / HOLLOWCROSS — a11y.css Accessibility + cosmetics/settings/store component layer. Linked LAST in (after style.css + app.css) so :root overrides here win the cascade. Colours stay in the dark-gothic key: charred panels, forged gold (#c8a45a), blood (#8e1c20), ember (#cf5a2a). ===================================================================== */ /* ===================================================================== 1. NEW SEMANTIC VARS (base values) on :root app.js reads var(--dmg) / var(--heal) / etc. to tint numbers + bars. These are the DEFAULT (full-colour) values; sections 2 & 3 override them per colour-blind / high-contrast mode. ===================================================================== */ :root { --dmg: #ff5a5a; /* incoming damage numbers */ --heal: #6fc97a; /* healing numbers */ --buff: #ffd970; /* positive status / buffs */ --debuff: #c89b5a; /* negative status / debuffs */ --hp-low: #b03442; /* HP bar — critical */ --hp-mid: #cf8a2a; /* HP bar — wounded */ --hp-high: #6fc97a; /* HP bar — healthy */ } /* ===================================================================== 2. COLOUR-BLIND PALETTES (Okabe–Ito, dark-bg safe) Triggered by data-cb on the root element. Overrides both the affinity vars (factions) and the semantic vars above, so every CSS consumer AND app.js's var(--dmg/--heal/...) recolours instantly. Rarity ramp is remapped to distinguishable steps. ===================================================================== */ /* --- Deuteranopia & Protanopia (red–green deficiency) ----------------- Never rely on red-vs-green: damage goes WARM (vermillion/orange), healing goes COOL (blue). Buff = yellow, debuff = reddish-purple. */ :root[data-cb="deuteranopia"], :root[data-cb="protanopia"] { /* semantic */ --dmg: #D55E00; /* vermillion */ --heal: #0072B2; /* blue */ --buff: #F0E442; /* yellow */ --debuff: #CC79A7; /* red-purple */ --hp-low: #D55E00; /* warm = danger */ --hp-mid: #E69F00; /* orange */ --hp-high: #0072B2; /* cool = safe */ /* affinities */ --aff-blood: #D55E00; /* vermillion */ --aff-flesh: #E69F00; /* orange */ --aff-spirit: #56B4E9; /* sky blue */ --aff-void: #CC79A7; /* red-purple */ --aff-storm: #0072B2; /* deep blue */ /* rarity ramp — spread across warm→cool distinguishable steps */ --r-common: #999999; --r-rare: #56B4E9; --r-super: #CC79A7; --r-ultra: #E69F00; --r-legend: #D55E00; --r-mythic: #009E73; --r-deity: #F0E442; } /* --- Tritanopia (blue–yellow deficiency) ------------------------------ Avoid blue/yellow reliance; lean on red / green / magenta / teal. */ :root[data-cb="tritanopia"] { /* semantic */ --dmg: #D81B60; /* magenta-red */ --heal: #009E73; /* green */ --buff: #E69F00; /* amber */ --debuff: #CC79A7; /* pink */ --hp-low: #D81B60; --hp-mid: #E69F00; --hp-high: #009E73; /* affinities */ --aff-blood: #D81B60; /* magenta-red */ --aff-flesh: #E69F00; /* amber */ --aff-spirit: #009E73; /* green */ --aff-void: #CC79A7; /* pink */ --aff-storm: #1E88E5; /* strong blue */ /* rarity ramp */ --r-common: #999999; --r-rare: #1E88E5; --r-super: #CC79A7; --r-ultra: #E69F00; --r-legend: #D81B60; --r-mythic: #009E73; --r-deity: #F5C710; } /* ===================================================================== 3. HIGH CONTRAST — :root[data-contrast="high"] Brighter text, darker panels, stronger borders/outlines, no low- contrast muted greys, thicker focus rings. ===================================================================== */ :root[data-contrast="high"] { --ink: #ffffff; /* near-white body text */ --muted: #d3ccbe; /* bump muted up out of the mud */ --bg: #000000; --panel: #0b0910; /* darker panels = more separation */ --gold: #ecd9a8; /* brighter gold */ } /* darken / border-boost the common surfaces so text pops */ :root[data-contrast="high"] .panel, :root[data-contrast="high"] .auth-box, :root[data-contrast="high"] .lobby-box, :root[data-contrast="high"] .play-card, :root[data-contrast="high"] .hub-card, :root[data-contrast="high"] .set-row, :root[data-contrast="high"] .cos-opt, :root[data-contrast="high"] .deal-card { background: #050409 !important; border-color: #b9ad8f !important; } /* muted text is legible, not decorative */ :root[data-contrast="high"] .muted, :root[data-contrast="high"] .set-desc, :root[data-contrast="high"] .cos-state, :root[data-contrast="high"] .deal-parts { color: #d3ccbe !important; } /* stronger dividers + inputs */ :root[data-contrast="high"] #topbar, :root[data-contrast="high"] input, :root[data-contrast="high"] select, :root[data-contrast="high"] textarea { border-color: #b9ad8f !important; } /* thicker, brighter focus outline in this mode */ :root[data-contrast="high"] :focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; } /* ===================================================================== 4. TEXT SIZE — :root[data-textscale="lg" | "xl"] Scale the root font so rem-based type grows; the app uses mostly px, so ALSO bump common text-bearing classes by the same ratio. Layouts are allowed to wrap rather than break. ===================================================================== */ :root[data-textscale="lg"] { font-size: 118%; } :root[data-textscale="xl"] { font-size: 135%; } /* px-based elements: nudge the frequent text classes up (lg ~ +18%) */ :root[data-textscale="lg"] body, :root[data-textscale="lg"] button, :root[data-textscale="lg"] input, :root[data-textscale="lg"] select, :root[data-textscale="lg"] textarea, :root[data-textscale="lg"] .muted, :root[data-textscale="lg"] .navbtn, :root[data-textscale="lg"] .set-label, :root[data-textscale="lg"] .set-desc, :root[data-textscale="lg"] .cos-name, :root[data-textscale="lg"] .cos-state { font-size: 1.18em; } /* xl ~ +35% */ :root[data-textscale="xl"] body, :root[data-textscale="xl"] button, :root[data-textscale="xl"] input, :root[data-textscale="xl"] select, :root[data-textscale="xl"] textarea, :root[data-textscale="xl"] .muted, :root[data-textscale="xl"] .navbtn, :root[data-textscale="xl"] .set-label, :root[data-textscale="xl"] .set-desc, :root[data-textscale="xl"] .cos-name, :root[data-textscale="xl"] .cos-state { font-size: 1.35em; } /* let scaled text wrap gracefully instead of overflowing */ :root[data-textscale="lg"] .navbtn, :root[data-textscale="xl"] .navbtn, :root[data-textscale="lg"] button, :root[data-textscale="xl"] button { white-space: normal; overflow-wrap: break-word; } /* ===================================================================== 5. REDUCED MOTION — :root[data-motion="reduce"] Global kill-switch (app.css only nulled a handful of animations). Also hides the ambient fog + ember decorative layers. Canvas/JS motion is gated separately via a flag — this section is CSS-only. ===================================================================== */ :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* kill the decorative atmosphere layers entirely */ :root[data-motion="reduce"] #fx-ambient, :root[data-motion="reduce"] #fx-ambient .fog, :root[data-motion="reduce"] #fx-ambient .embers, :root[data-motion="reduce"] .fog-a, :root[data-motion="reduce"] .fog-b, :root[data-motion="reduce"] .fog-c { display: none !important; } /* ===================================================================== 6. SCREEN-READER UTILITIES + focus-visible defaults ===================================================================== */ /* .sr-only — standard visually-hidden, still read by AT */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* .skip-link — hidden until focused, then a prominent gold-on-dark chip */ .skip-link { position: absolute; top: -100px; left: 8px; z-index: 9999; background: #0c0a0e; color: var(--gold); border: 2px solid var(--gold); border-radius: 8px; padding: 10px 18px; font-weight: 700; letter-spacing: 1px; text-decoration: none; box-shadow: 0 0 26px rgba(200,164,90,0.5); transition: top .15s ease; } .skip-link:focus, .skip-link:focus-visible { top: 8px; outline: 2px solid #fff; outline-offset: 2px; } /* strong :focus-visible for the mouse-designed interactive surfaces. Additive only — we never strip an existing outline, just guarantee one. */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .navbtn:focus-visible, .tab:focus-visible, .chip:focus-visible, .cos-opt:focus-visible, .set-main:focus-visible { outline: 3px solid var(--gold-hi, #ecd9a8); outline-offset: 2px; border-radius: 6px; } /* keyboard users get a visible ring on text fields too */ :root input:focus-visible, :root select:focus-visible, :root textarea:focus-visible { border-color: var(--gold, #c8a45a); } /* ===================================================================== 7. COSMETICS COMPONENT STYLES (profile + store) Gothic swatch tiles for card backs / board floors / borders. ===================================================================== */ .cos-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 12px; flex-wrap: wrap; } .cos-random { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; user-select: none; } .cos-random input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; } .cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } /* a swatch tile */ .cos-opt { position: relative; background: #14111a; border: 1px solid #2e2733; border-radius: 10px; padding: 0 0 8px; overflow: hidden; cursor: pointer; text-align: center; transition: transform .1s ease, border-color .15s ease, box-shadow .15s ease; } .cos-opt:hover, .cos-opt:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 14px rgba(200,164,90,.25); } /* equipped */ .cos-opt.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(200,164,90,.5); } .cos-opt.active::after { content: "EQUIPPED"; position: absolute; top: 6px; right: 6px; background: rgba(12,10,14,.85); color: var(--gold); border: 1px solid var(--gold); border-radius: 5px; padding: 1px 6px; font-size: 9px; font-weight: 800; letter-spacing: 1px; } /* not owned */ .cos-opt.locked { opacity: .5; filter: grayscale(.55); cursor: default; } .cos-opt.locked:hover { transform: none; border-color: #2e2733; box-shadow: none; } .cos-opt.locked::before { content: "🔒"; position: absolute; top: 6px; left: 6px; font-size: 13px; filter: drop-shadow(0 1px 2px #000); z-index: 2; } .cos-thumb { width: 100%; aspect-ratio: 16 / 10; background: #0c0a0e center / cover no-repeat; border-radius: 9px 9px 0 0; border-bottom: 1px solid #2a242f; } .cos-name { display: block; font-weight: 700; font-size: 12px; color: var(--ink); margin: 7px 6px 2px; overflow-wrap: break-word; } .cos-state { display: block; font-size: 10px; color: var(--muted); padding: 0 6px; } /* optional rarity accent (reuses existing rarity vars) */ .cos-opt.rarity-rare { border-color: var(--r-rare); } .cos-opt.rarity-super { border-color: var(--r-super); } .cos-opt.rarity-ultra { border-color: var(--r-ultra); } .cos-opt.rarity-legend { border-color: var(--r-legend); } .cos-opt.rarity-mythic { border-color: var(--r-mythic); } .cos-opt.rarity-deity { border-color: var(--r-deity); } /* ===================================================================== 8. SETTINGS PANEL STYLES Stacked bordered rows; label left, control right; description under. ===================================================================== */ .settings-grid { display: flex; flex-direction: column; gap: 12px; } .set-row { background: #14111a; border: 1px solid #2e2733; border-radius: 10px; padding: 14px 16px; } .set-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; } .set-label { font-weight: 700; color: var(--ink); letter-spacing: .5px; } .set-desc { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; } /* make the controls big enough to tap + clearly visible */ .set-main select, .set-row select { background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 9px 12px; min-width: 130px; font-size: 14px; cursor: pointer; } .set-main input[type="checkbox"], .set-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--gold); cursor: pointer; flex: 0 0 auto; } .set-main select:focus-visible, .set-main input[type="checkbox"]:focus-visible { outline: 3px solid var(--gold-hi, #ecd9a8); outline-offset: 2px; } /* ===================================================================== 9. STORE — cosmetics + bundle deals ===================================================================== */ /* shop cosmetics reuse the .cos-opt tile */ .shop-cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .cos-buy { display: inline-block; margin: 6px auto 2px; background: linear-gradient(180deg, #d8b76a, #a97f2f); color: #1a1206; border: 1px solid var(--gold); border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 800; letter-spacing: 1px; cursor: pointer; } .cos-buy:hover { filter: brightness(1.1); } .cos-buy:disabled { filter: grayscale(.8) brightness(.6); cursor: default; } /* --- bundle deals: make them look irresistible --- */ .deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .deal-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(40,26,16,.55), rgba(16,10,14,.9)), #15121a; border: 2px solid var(--gold); border-radius: 14px; padding: 0 0 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(200,164,90,.18); transition: transform .12s ease, box-shadow .15s ease; } .deal-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 26px rgba(200,164,90,.3); } .deal-thumb { width: 100%; aspect-ratio: 16 / 9; background: #0c0a0e center / cover no-repeat; border-bottom: 1px solid rgba(200,164,90,.3); } .deal-name { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 17px; letter-spacing: 1px; color: var(--gold); margin: 12px 14px 4px; } .deal-parts { list-style: none; margin: 0 0 10px; padding: 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; } .deal-parts li::before { content: "✦ "; color: var(--ember, #cf5a2a); } /* price block */ .deal-price { margin: auto 14px 2px; font-size: 26px; font-weight: 900; color: #d8b048; letter-spacing: 1px; } .deal-price::before { content: "💎 "; font-size: 18px; } .deal-value { margin: 0 14px 10px; color: var(--muted); font-size: 13px; text-decoration: line-through; opacity: .8; } /* bright corner "SAVE 40%" badge — ember/blood, screams a deal */ .deal-save { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(180deg, #e8562a, #8e1c20); color: #fff; border: 1px solid #ffcf9a; border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: 0 0 16px rgba(207,90,42,.7); transform: rotate(4deg); } /* buy button — big gold call to action */ .deal-buy { margin: 4px 14px 0; background: linear-gradient(180deg, #e6c878, #a97f2f); color: #1a1206; border: 1px solid var(--gold); border-radius: 8px; padding: 11px 16px; font-size: 15px; font-weight: 800; letter-spacing: 1px; cursor: pointer; box-shadow: 0 3px 0 #6e5216, 0 6px 16px rgba(0,0,0,.5); transition: filter .12s ease, transform .05s ease; } .deal-buy:hover { filter: brightness(1.1); } .deal-buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e5216; } .deal-buy:disabled { filter: grayscale(.8) brightness(.6); cursor: default; } /* ===================================================================== RESPONSIVE — keep the new grids comfortable on phones ===================================================================== */ @media (max-width: 640px) { .cos-grid, .shop-cos-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; } .deal-grid { grid-template-columns: 1fr; } .set-main { flex-wrap: wrap; } .deal-name { font-size: 15px; } .deal-price { font-size: 22px; } } /* ===================================================================== ACCESSIBILITY MENU — open button (login + profile) + dialog ===================================================================== */ .a11y-open { display: inline-flex; align-items: center; gap: 7px; margin: 4px auto 12px; padding: 9px 16px; border: 1px solid var(--gold, #c8a45a); border-radius: 10px; background: rgba(200, 164, 90, .07); color: var(--gold-hi, #e6cd93); font: inherit; font-size: 14px; letter-spacing: .3px; cursor: pointer; transition: background .15s, box-shadow .15s; } .a11y-open:hover { background: rgba(200, 164, 90, .16); } .a11y-open:focus-visible { outline: 3px solid var(--gold-hi, #e6cd93); outline-offset: 2px; } .a11y-box { width: min(94vw, 580px); max-height: 86vh; overflow-y: auto; text-align: left; } .a11y-box h2 { margin: 0 0 4px; } .a11y-box #a11y-close { margin-top: 16px; } :root[data-textscale="lg"] .a11y-open, :root[data-textscale="xl"] .a11y-open { font-size: 1.2em; } /* ===================================================================== GAUNTLET — fixed status sidebar (timer / gold / level always visible) ===================================================================== */ .tac-side { position: fixed; left: 10px; top: 74px; z-index: 60; width: 152px; display: flex; flex-direction: column; gap: 9px; padding: 12px 11px; border-radius: 14px; background: linear-gradient(180deg, rgba(30,24,36,.96), rgba(18,14,22,.98)); border: 1px solid var(--gold, #c8a45a); box-shadow: 0 10px 30px rgba(0,0,0,.5); } .tac-side-timer { font-family: var(--font-display, Georgia, serif); font-size: 30px; font-weight: 800; text-align: center; color: var(--gold-hi, #e6cd93); letter-spacing: 1px; } .tac-side-timer.urgent { color: #e0483a; } .tac-side-fight { width: 100%; padding: 10px 6px; font-size: 14px; } .tac-side-stats { display: flex; flex-direction: column; gap: 4px; } .tac-side-stat { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--muted, #9b9080); } .tac-side-stat b { color: #f2ecdd; font-variant-numeric: tabular-nums; } .tac-side-stat.gold b { color: var(--gold-hi, #e6cd93); } /* shift the scrolling content clear of the fixed sidebar (desktop) */ #tac-root > *:not(.tac-side) { margin-left: 176px; } @media (max-width: 820px) { .tac-side { position: sticky; top: 54px; left: 0; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; } .tac-side-timer { font-size: 22px; } .tac-side-fight { width: auto; order: 3; margin-left: auto; } .tac-side-stats { flex-direction: row; flex-wrap: wrap; gap: 3px 12px; } #tac-root > *:not(.tac-side) { margin-left: 0; } } /* ===================================================================== STAFF — clickable account rows + full player-detail modal ===================================================================== */ .an-row { cursor: pointer; transition: background .12s; } .an-row:hover, .an-row:focus-visible { background: rgba(200,164,90,.14); outline: none; } .sd-box { width: min(96vw, 680px); max-height: 90vh; overflow-y: auto; text-align: left; position: relative; } .sd-x { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--muted,#9b9080); font-size: 20px; line-height: 1; cursor: pointer; } .sd-x:hover, .sd-x:focus-visible { color: var(--ink,#ece4d6); outline: none; } .sd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 34px 6px 0; } .sd-head h2 { margin: 0; } .sd-box h3 { margin: 16px 0 7px; font-size: 14px; color: var(--gold-hi,#e6cd93); } .sd-modegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 8px; } .sd-mode { background: rgba(200,164,90,.06); border: 1px solid var(--edge,#2c2636); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; } .sd-mode-n { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted,#9b9080); } .sd-mode b { font-size: 16px; } .sd-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 5px 10px; } .sd-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 6px; border-bottom: 1px solid rgba(120,110,140,.12); } .sd-stat span { color: var(--muted,#9b9080); } .sd-email { margin-top: 6px; word-break: break-all; } .sd-log { max-height: 190px; overflow-y: auto; font-size: 12px; } .sd-logrow { padding: 4px 0; border-bottom: 1px solid rgba(120,110,140,.1); } .gf-sel { max-width: 230px; } /* Shop: Open-All packs button + summary reveal */ .pack-openall-row { grid-column: 1 / -1; margin-bottom: 4px; } #pack-openall { width: 100%; } .oa-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 14px; } .oa-tally { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--edge,#2c2636); background: rgba(200,164,90,.06); font-size: 13px; font-variant-numeric: tabular-nums; } .oa-best-label { text-align: center; color: var(--gold-hi,#e6cd93); font-weight: 700; letter-spacing: 1px; margin: 10px 0; } .oa-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px,1fr)); gap: 10px; justify-items: center; } /* Prominent Discord join CTA on the hub hero (Discord blurple, stands out from the gothic key) */ .hub-discord-cta { display: flex; align-items: center; gap: 14px; width: min(560px, 92%); margin: 4px auto 20px; padding: 13px 18px; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #5865F2, #4752c4); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 6px 24px rgba(88,101,242,.42); transition: transform .12s ease, box-shadow .12s ease; } .hub-discord-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(88,101,242,.62); } .hub-discord-cta .hd-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .hub-discord-cta .hd-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; flex: 1 1 auto; } .hub-discord-cta .hd-txt b { font-size: 16px; font-weight: 800; letter-spacing: .2px; } .hub-discord-cta .hd-txt small { font-size: 12px; opacity: .92; line-height: 1.3; } .hub-discord-cta .hd-go { flex: 0 0 auto; font-weight: 800; background: rgba(255,255,255,.20); padding: 8px 14px; border-radius: 9px; white-space: nowrap; } @media (max-width: 520px) { .hub-discord-cta .hd-txt small { display: none; } .hub-discord-cta { padding: 11px 14px; } } /* Redeem-a-code panel in the store */ .code-row { display: flex; gap: 8px; align-items: center; max-width: 460px; } #code-input { flex: 1 1 auto; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--edge,#2c2636); background: rgba(0,0,0,.25); color: inherit; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; } #code-redeem { flex: 0 0 auto; } .code-msg { min-height: 18px; margin-top: 10px; font-size: 14px; font-weight: 600; } .code-msg.good { color: #6fcf7b; } .code-msg.bad { color: #e0736b; } /* Gauntlet warband reordering (drag on desktop; ◀ ▶ arrows for touch/keyboard/screen-reader) */ .tac-unit.on-board { cursor: grab; } .tac-unit.on-board:active { cursor: grabbing; } .tac-unit.dragging { opacity: .45; } .tac-unit.drag-over { outline: 2px dashed var(--gold, #c8a45a); outline-offset: 2px; } .tac-mv { min-width: 26px; padding: 4px 7px; font-weight: 700; }