/* Grimhollow -- gothic UI stylesheet. Frames built from CSS gradients only, no image assets. Everything lives inside #ui-root (created by index.html; JS falls back to if absent). */ #ui-root { --c-common: #b8b2a6; --c-magic: #5aa2ff; --c-rare: #ffe14d; --c-epic: #b45cff; --c-legendary: #ff8c1a; --c-mythic: #ff4d6d; --c-panel: #151020; --c-panel-edge: #3a2b52; --c-bone: #cfc4ad; --c-gold: #e8c163; --c-gold-dim: #8a6d33; --c-blood: #8e1f1f; --c-arcane: #7c5cff; --c-arcane-bright: #b9a8ff; --c-bg: #08060b; --font-gothic: Georgia, "Times New Roman", serif; position: fixed; inset: 0; z-index: 100; pointer-events: none; font-family: var(--font-gothic); color: var(--c-bone); -webkit-user-select: none; user-select: none; } #ui-root *, #ui-root *::before, #ui-root *::after { box-sizing: border-box; } #ui-root button { font-family: var(--font-gothic); color: var(--c-bone); background: none; border: none; cursor: pointer; } /* gothic gradient-border frame used by panels/overlay cards (see .gh-panel::before, .gh-death-card) */ /* ---------- utility button row (bottom-right; keyboard shortcuts made touchable) ---------- */ .gh-hudbtns { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: auto; } .gh-hudbtn { width: 42px; height: 42px; border-radius: 50%; font-size: 15px; font-weight: bold; background: radial-gradient(circle at 35% 30%, #241c33, #120e1a 72%); border: 2px solid var(--c-panel-edge); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55); transition: transform 0.12s ease, border-color 0.12s ease; } .gh-hudbtn:hover, .gh-hudbtn:focus-visible { border-color: var(--c-arcane-bright); transform: scale(1.08); } .gh-hudbtn:active { transform: scale(0.94); } .gh-hudbtn-mute.is-muted { color: var(--c-blood); border-color: var(--c-blood); } /* ---------- touch joystick ---------- */ .gh-joystick { position: fixed; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(21, 16, 32, 0.55), rgba(8, 6, 11, 0.35) 70%); border: 2px solid rgba(58, 43, 82, 0.85); pointer-events: none; z-index: 90; } /* index.html sets a blanket `#ui-root > *{pointer-events:auto}` (ID-level specificity, which beats our class selectors above); these two must stay click-through regardless, so re-assert at matching specificity as direct children of #ui-root. */ #ui-root > .gh-joystick { pointer-events: none; } .gh-joystick-thumb { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c-arcane-bright), var(--c-arcane) 60%, #3a2b6b 100%); border: 1px solid rgba(185, 168, 255, 0.7); will-change: transform; } /* ---------- panels (shared) ---------- */ .gh-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); max-height: 82vh; display: flex; flex-direction: column; pointer-events: auto; } .gh-panel[hidden] { display: none; } .gh-panel-character, .gh-panel-skills { width: min(420px, 92vw); } .gh-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-panel-edge); } .gh-panel-title { font-size: 18px; letter-spacing: 0.04em; color: var(--c-gold); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); flex: 0 0 auto; } .gh-tabs { display: flex; gap: 6px; flex: 1 1 auto; } .gh-tab { padding: 6px 12px; min-height: 32px; border: 1px solid var(--c-panel-edge); border-radius: 4px; background: rgba(255, 255, 255, 0.03); font-size: 13px; } .gh-tab.is-active { background: rgba(124, 92, 255, 0.22); border-color: var(--c-arcane-bright); color: #fff; } .gh-panel-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--c-panel-edge); font-size: 13px; line-height: 1; } .gh-panel-close:hover { border-color: var(--c-blood); color: var(--c-blood); } .gh-panel-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .gh-panel::before { content: ""; position: absolute; inset: -2px; border-radius: 8px; z-index: -1; border: 2px solid transparent; background: linear-gradient(180deg, rgba(21, 16, 32, 0.97), rgba(9, 7, 13, 0.97)) padding-box, linear-gradient(145deg, var(--c-gold-dim), var(--c-panel-edge) 30%, var(--c-arcane) 65%, var(--c-gold-dim)) border-box; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.45); } /* generic slot cell, reused by doll / charm / bag */ .gh-slot { position: relative; aspect-ratio: 1; border-radius: 4px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35)); border: 1px solid rgba(58, 43, 82, 0.75); min-width: 38px; min-height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .gh-slot:hover { border-color: var(--c-arcane-bright); box-shadow: 0 0 0 1px rgba(185, 168, 255, 0.35) inset; } .gh-slot-icon { image-rendering: pixelated; width: 82%; height: 82%; pointer-events: none; } .gh-slot.has-item { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.3)); } .gh-slot.is-assigned { box-shadow: 0 0 0 2px var(--c-arcane-bright) inset; } .gh-slot.rarity-common { border-color: var(--c-common); } .gh-slot.rarity-magic { border-color: var(--c-magic); box-shadow: 0 0 6px rgba(90, 162, 255, 0.5); } .gh-slot.rarity-rare { border-color: var(--c-rare); box-shadow: 0 0 6px rgba(255, 225, 77, 0.5); } .gh-slot.rarity-epic { border-color: var(--c-epic); box-shadow: 0 0 8px rgba(180, 92, 255, 0.6); } .gh-slot.rarity-legendary { border-color: var(--c-legendary); box-shadow: 0 0 8px rgba(255, 140, 26, 0.65); } .gh-slot.rarity-mythic { border-color: var(--c-mythic); box-shadow: 0 0 10px rgba(255, 77, 109, 0.7); } /* ---------- equipment doll ---------- */ .gh-doll-wrap[hidden] { display: none; } .gh-doll { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". head ." "off chest weapon" ". hands ." ". legs ." ". feet ."; gap: 8px; max-width: 240px; margin: 0 auto; } .gh-doll-slot { width: 100%; } .slot-head { grid-area: head; } .slot-weapon { grid-area: weapon; } .slot-chest { grid-area: chest; } .slot-off { grid-area: off; } .slot-hands { grid-area: hands; } .slot-legs { grid-area: legs; } .slot-feet { grid-area: feet; } .gh-doll-tag { position: absolute; bottom: 2px; left: 3px; font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(184, 178, 166, 0.55); pointer-events: none; } .gh-doll-slot.has-item .gh-doll-tag { display: none; } /* ---------- charms tab ---------- */ .gh-charm-wrap[hidden] { display: none; } .gh-charm-wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 420px; margin: 0 auto; } .gh-charm-slot { border-color: rgba(124, 92, 255, 0.5); } /* ---------- bag grid ---------- */ .gh-bag-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; } /* ---------- character sheet ---------- */ .gh-stat-list { display: flex; flex-direction: column; gap: 2px; } .gh-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 4px; font-size: 13px; border-bottom: 1px solid rgba(58, 43, 82, 0.35); } .gh-stat-label { color: rgba(184, 178, 166, 0.85); } .gh-stat-value { color: var(--c-bone); font-weight: bold; } .gh-stat-divider { height: 1px; margin: 6px 0; background: linear-gradient(90deg, transparent, var(--c-panel-edge), transparent); } /* ---------- skills panel ---------- */ .gh-skills-hint { font-size: 12px; color: rgba(184, 178, 166, 0.75); font-style: italic; } .gh-skills-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-gold-dim); margin-top: 2px; } .gh-skills-grid, .gh-skills-hotrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .gh-skill-cell.is-selected { box-shadow: 0 0 0 2px var(--c-arcane-bright) inset, 0 0 10px rgba(185, 168, 255, 0.6); } .gh-skill-hot-num { position: absolute; bottom: 2px; left: 4px; font-size: 9px; color: rgba(184, 178, 166, 0.6); pointer-events: none; } /* ---------- full-screen overlays ---------- */ .gh-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; pointer-events: none; } .gh-overlay.is-visible { opacity: 1; visibility: visible; } .gh-death-overlay { background: radial-gradient(circle at 50% 45%, rgba(60, 8, 8, 0.4), rgba(4, 2, 5, 0.92) 75%); } .gh-death-overlay.is-visible { pointer-events: auto; } .gh-death-card { text-align: center; padding: 32px 44px; border: 2px solid transparent; border-radius: 6px; background: linear-gradient(180deg, rgba(21, 16, 32, 0.97), rgba(9, 7, 13, 0.97)) padding-box, linear-gradient(145deg, var(--c-blood), var(--c-panel-edge) 60%, var(--c-blood)) border-box; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); transform: translateY(-6%); } .gh-death-title { margin: 0 0 8px; font-size: clamp(26px, 5vw, 40px); letter-spacing: 0.05em; color: var(--c-blood); text-shadow: 0 2px 10px rgba(142, 31, 31, 0.6); } .gh-death-sub { margin: 0 0 22px; color: rgba(184, 178, 166, 0.8); font-style: italic; } .gh-death-btn { padding: 12px 28px; min-height: 44px; font-size: 16px; letter-spacing: 0.04em; border: 1px solid var(--c-gold-dim); border-radius: 4px; background: linear-gradient(180deg, #3a2b1a, #1c1610); color: var(--c-gold); } .gh-death-btn:hover { border-color: var(--c-gold); box-shadow: 0 0 14px rgba(232, 193, 99, 0.4); } .gh-zone-overlay { background: rgba(4, 2, 5, 0); transition: opacity 0.7s ease, background 0.7s ease; } #ui-root > .gh-zone-overlay { pointer-events: none; } .gh-zone-overlay.is-visible { background: rgba(4, 2, 5, 0.55); } .gh-zone-title { font-size: clamp(24px, 4.5vw, 38px); letter-spacing: 0.08em; color: var(--c-bone); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); transform: translateY(-8px); transition: transform 0.7s ease; } .gh-zone-overlay.is-visible .gh-zone-title { transform: translateY(0); } /* ---------- mobile / small screens ---------- */ @media (max-width: 720px) { .gh-panel { width: 96vw; max-height: 88vh; } .gh-panel-body { padding: 10px; gap: 10px; } .gh-bag-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; } .gh-doll { max-width: 200px; gap: 6px; } .gh-charm-wrap { grid-template-columns: repeat(3, 1fr); max-width: 260px; } .gh-skills-grid, .gh-skills-hotrow { grid-template-columns: repeat(4, 1fr); } .gh-slot { min-width: 40px; min-height: 40px; } .gh-hudbtn { width: 46px; height: 46px; font-size: 16px; } .gh-panel-title { font-size: 16px; } .gh-tab { padding: 8px 10px; font-size: 12px; } .gh-death-card { padding: 24px 26px; } } @media (pointer: coarse) { .gh-slot { min-width: 42px; min-height: 42px; } .gh-panel-close, .gh-tab { min-height: 40px; } }