/* Pixel Realm UI kit (see docs/design/21_UI_DIRECTION.md). Loaded after base.css, so it restyles the shared classes everywhere. */

/* ---- frames: every .panel is a framed object now; .frm is the chunky version for things that deserve attention */
.panel, .modal, .toast {
  border: 4px solid transparent; border-image: var(--frm-stone-s) 4 / 4px stretch; background-clip: padding-box; image-rendering: pixelated;
  background-color: var(--panel); box-shadow: 3px 3px 0 #000;
}
.frm { border: 8px solid transparent; border-image: var(--frm-stone) 8 / 8px stretch; background-clip: padding-box; image-rendering: pixelated; background-color: var(--panel); box-shadow: 4px 4px 0 #000; position: relative; }
.panel, .frm { isolation: isolate; }
.panel::before, .frm::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: -1;
  background: repeating-conic-gradient(transparent 0 25%, rgba(0, 0, 0, .14) 0 50%) 0 0 / 4px 4px; }
.panel.flat { box-shadow: none; }
.panel.gold, .modal { border-image-source: var(--frm-gold-s); } .frm.gold { border-image-source: var(--frm-gold); }
.panel.ruby { border-image-source: var(--frm-ruby-s); } .frm.ruby { border-image-source: var(--frm-ruby); }
.panel.moss { border-image-source: var(--frm-moss-s); } .frm.moss { border-image-source: var(--frm-moss); }
.panel.ice { border-image-source: var(--frm-ice-s); } .frm.ice { border-image-source: var(--frm-ice); }
.panel.violet { border-image-source: var(--frm-violet-s); } .frm.violet { border-image-source: var(--frm-violet); }
.toast.good { border-image-source: var(--frm-moss-s); } .toast.bad { border-image-source: var(--frm-ruby-s); } .toast.accent { border-image-source: var(--frm-gold-s); }
.panel.locked { filter: saturate(.5) brightness(.85); }

/* ---- ribbons for headings */
.ribbon { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; padding: 6px 18px 6px 14px; position: relative; color: #1a1205;
  background: linear-gradient(var(--accent), var(--accent) 70%, #c99a1c 70%); border: 3px solid #000; box-shadow: 3px 3px 0 #000;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.ribbon .rb-title { font-family: var(--font-head); font-size: calc(13px * var(--ts, 1)); line-height: 1.5; }
.ribbon .rb-sub { font-size: calc(18px * var(--ts, 1)); opacity: .8; }
.ribbon.ruby { background: linear-gradient(#e0586a, #e0586a 70%, #a83446 70%); color: #fff; }
.ribbon.moss { background: linear-gradient(#5fd484, #5fd484 70%, #35985a 70%); }
.ribbon.ice { background: linear-gradient(#7cc4ff, #7cc4ff 70%, #4a8fe8 70%); }

/* ---- buttons: chunky, they sink when pressed */
.btn { border: 3px solid #000; border-radius: 0; padding: 9px 12px; background: var(--panel2);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .22), inset 0 -4px 0 rgba(0, 0, 0, .4), 0 4px 0 #000; transition: none; }
.btn:hover:not(:disabled) { filter: brightness(1.18); border-color: #000; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3), 0 0 0 #000; }
.btn.primary { background: var(--accent); color: #1a1205; border-color: #000; text-shadow: 1px 1px 0 rgba(255, 255, 255, .35); }
.btn.danger { background: #a02a3c; border-color: #000; } .btn.good { background: #2a8a4a; border-color: #000; }
.btn.small { padding: 6px 8px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .4), 0 3px 0 #000; }

/* ---- bars: chunky segments with a lit top row and a spark at the tip */
.bar { height: 18px; background: var(--well); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line2); }
.bar.tall { height: 24px; }
.bar > i { background-image: linear-gradient(rgba(255, 255, 255, .38) 0 3px, transparent 3px), repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 0, 0, .28) 11px 12px); transition: width .3s steps(10); }
.bar > i::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: rgba(255, 255, 255, .7); }
.bar > span { font-size: calc(15px * var(--ts, 1)); letter-spacing: 1px; }

/* ---- crest, pips */
.crest { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; position: relative;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: #000; }
.crest::before { content: ''; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(#ffe58a, #d6a22e 55%, #8a5d12); }
.crest.ruby::before { background: linear-gradient(#ff8a9a, #b8364a 55%, #68182a); } .crest.ice::before { background: linear-gradient(#b4e4ff, #4a8fe8 55%, #244f96); }
.crest.moss::before { background: linear-gradient(#9af0a8, #3f9a58 55%, #1f5a30); } .crest.violet::before { background: linear-gradient(#e4a8ff, #9a4fd8 55%, #52207e); }
.crest b { position: relative; font-family: var(--font-head); font-size: calc(11px * var(--ts, 1)); color: #1a1205; text-shadow: 1px 1px 0 rgba(255, 255, 255, .45); font-weight: normal; }
.crest.sm { width: 28px; height: 28px; } .crest.sm b { font-size: calc(8px * var(--ts, 1)); } .crest.lg { width: 56px; height: 56px; } .crest.lg b { font-size: calc(15px * var(--ts, 1)); }
.pips { display: inline-flex; gap: 2px; flex-wrap: wrap; vertical-align: middle; }
.pips i { width: 6px; height: 10px; background: var(--well); border: 1px solid var(--line2); } .pips i.on { background: var(--accent); border-color: #000; }

/* ---- HUD */
.hud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.hud-portrait { position: relative; width: 84px; height: 84px; flex: none; border: 8px solid transparent; border-image: var(--frm-gold) 8 / 8px stretch; background-clip: padding-box;
  background: radial-gradient(circle at 50% 80%, #4a3a8a, #120e24); box-shadow: 3px 3px 0 #000; overflow: hidden; cursor: pointer; }
.hud-portrait canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.hud-crest { position: absolute; right: -6px; bottom: -6px; z-index: 2; }
.hud-main { flex: 1 1 220px; min-width: 0; }
.hud-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.hud-tick { font-size: calc(18px * var(--ts, 1)); color: var(--dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-purse { display: flex; gap: 8px; flex-wrap: wrap; }
.purse { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; background: var(--well); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line2); font-family: var(--font-head); font-size: calc(11px * var(--ts, 1)); }
.purse.gold { color: var(--accent); } .purse.gems { color: var(--accent2); }
.hud-flags { flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.flag { position: relative; font-size: calc(17px * var(--ts, 1)); padding: 2px 14px 2px 8px; background: var(--accent); color: #1a1205; border: 2px solid #000; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); font-family: var(--font); }
.flag:hover { filter: brightness(1.15); }

/* ---- shell: no sidebar. Content in the middle, dock at the bottom */
.shell { display: block; min-height: 100vh; }
.main { max-width: 1060px; margin: 0 auto; padding: 12px 12px calc(120px + var(--safe-b)); }
.taskbar { display: none; }

/* ---- dock */
.dock { position: fixed; left: 50%; bottom: calc(8px + var(--safe-b)); transform: translateX(-50%); z-index: 60; display: flex; gap: 4px; align-items: flex-end; padding: 8px 10px 6px;
  border: 8px solid transparent; border-image: var(--frm-stone) 8 / 8px stretch; background: var(--card); background-clip: padding-box; box-shadow: 0 5px 0 #000, 0 0 30px rgba(0, 0, 0, .6); max-width: 98vw; }   /* stone frame: the gold one read as yellow shading (owner 2026-10-23) */
.dock button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 62px; height: 62px; padding: 3px 0 2px;
  background: transparent; border: 3px solid transparent; color: var(--dim); cursor: pointer; font-family: var(--font-head); font-size: calc(7px * var(--ts, 1)); line-height: 1.3; }
.dock button .icon { width: 34px; height: 34px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }
.dock button:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.dock button.on { color: var(--accent); background: linear-gradient(#3a2d6a, #251d45); border-color: var(--line); box-shadow: inset 0 0 0 2px #000; }
.dock button.on .icon { animation: bob 1s steps(2) infinite; }
.dock button.home { width: 74px; height: 74px; margin-top: -22px; border: 4px solid #000; background: linear-gradient(#ffd34d, #c99a1c); color: #1a1205; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(0, 0, 0, .3), 0 4px 0 #000; }
.dock button.home .icon { width: 40px; height: 40px; }
.dock button.home.on { background: linear-gradient(#fff0a0, #e0b030); }
.dock .badge { position: absolute; top: -2px; right: 2px; background: var(--bad); color: #fff; font-size: calc(8px * var(--ts, 1)); padding: 2px 4px; border: 2px solid #000; }
.dock-sep { width: 4px; align-self: stretch; margin: 6px 4px; background: repeating-linear-gradient(#000 0 4px, transparent 4px 8px); opacity: .5; }

/* ---- the game menu (everything that is not on the dock) */
.menu-back { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: radial-gradient(ellipse at center, rgba(26, 18, 56, .92), rgba(5, 3, 14, .96)); animation: menu-in .18s steps(4); }
@keyframes menu-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.menu-box { width: min(640px, 100%); max-height: 92vh; overflow: auto; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 8px; }
.menu-grid button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; cursor: pointer; color: var(--text);
  font-family: var(--font-head); font-size: calc(9px * var(--ts, 1)); line-height: 1.4; background: linear-gradient(var(--panel2), var(--bg2)); border: 4px solid #000; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), 0 4px 0 #000; }
.menu-grid button .icon { width: 52px; height: 52px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)); }
.menu-grid button:hover { filter: brightness(1.2); transform: translateY(-2px); }
.menu-grid button:active { transform: translateY(3px); box-shadow: none; }
.menu-grid .badge { position: absolute; top: 4px; right: 4px; background: var(--bad); color: #fff; font-size: calc(8px * var(--ts, 1)); padding: 2px 5px; border: 2px solid #000; }

/* ---- screen change: panels rise in, staggered, with a short gold edge glow */
.screen-root.enter > * { animation: rise .32s steps(5) both; }
.screen-root.enter > *:nth-child(2) { animation-delay: .04s; }
.screen-root.enter > *:nth-child(3) { animation-delay: .08s; }
.screen-root.enter > *:nth-child(4) { animation-delay: .12s; }
.screen-root.enter > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: brightness(1.8) drop-shadow(0 0 6px rgba(255, 211, 77, .8)); }
  60% { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 3px rgba(255, 211, 77, .4)); }
  to { opacity: 1; transform: none; filter: none; }
}
.fx-off .screen-root.enter > *, .fx-off .menu-back { animation: none; }
@media (prefers-reduced-motion: reduce) { .screen-root.enter > * { animation: none; } }

@media (max-width: 560px) {
  .dock { gap: 2px; padding: 6px 6px 4px; }
  .dock button { width: 50px; height: 56px; font-size: calc(6px * var(--ts, 1)); } .dock button .icon { width: 28px; height: 28px; }
  .dock button.home { width: 60px; height: 64px; margin-top: -18px; } .dock button.home .icon { width: 32px; height: 32px; }
  .hud-portrait { width: 64px; height: 64px; }
}

/* ---------- Title screen (main.js showAuth) ---------- */
.title { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; display: flex; justify-content: center; }
.title-world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--well); }
.title-sky { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; object-fit: cover; object-position: center 70%; image-rendering: pixelated;
  animation: title-pan 40s ease-in-out infinite alternate; filter: saturate(1.15); }
.title-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 8, 22, .15) 0%, rgba(11, 8, 22, .05) 40%, rgba(11, 8, 22, .85) 100%); }
@keyframes title-pan { from { transform: translateX(0); } to { transform: translateX(-5%); } }
.title-motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; background: #ffd34d; box-shadow: 0 0 6px #ffd34d; animation: title-mote linear infinite; opacity: 0; }
.title-motes i:nth-child(3n) { background: #c05fff; box-shadow: 0 0 6px #c05fff; } .title-motes i:nth-child(4n) { background: #6be3ff; box-shadow: 0 0 6px #6be3ff; }
@keyframes title-mote { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(30px, -90vh); opacity: 0; } }
.title-front { position: relative; z-index: 1; width: 100%; max-width: 520px; padding: 5vh 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.title-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; font-family: var(--font-head); animation: title-float 3s steps(6) infinite; }
.title-logo span { display: block; letter-spacing: 4px; }
.tl-idle { font-size: clamp(22px, 6vw, 34px); color: #fff3c4; text-shadow: 3px 0 #000, -3px 0 #000, 0 3px #000, 0 -3px #000, 3px 3px #000, 0 6px #7a3d00; }
.tl-realms { font-size: clamp(34px, 11vw, 64px); margin-top: 6px; color: #ffd34d;
  text-shadow: 4px 0 #000, -4px 0 #000, 0 4px #000, 0 -4px #000, 4px 4px #000, -4px 4px #000, 0 8px #a34f00, 0 12px #000, 0 0 24px rgba(255, 211, 77, .55); }
@keyframes title-float { 50% { transform: translateY(-4px); } }
.title-tag { font-size: calc(19px * var(--ts, 1)); color: #e8e0ff; text-shadow: 2px 2px 0 #000; text-align: center; }
.title-heroes { display: flex; gap: 6px; justify-content: center; align-items: flex-end; margin: 6px 0 -4px; }
.title-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); font: inherit; }
.title-hero canvas { width: 72px; height: 72px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)); animation: bob 1.2s steps(2) infinite; }
.title-hero:nth-child(2) canvas { animation-delay: .3s; } .title-hero:nth-child(3) canvas { animation-delay: .6s; } .title-hero:nth-child(4) canvas { animation-delay: .9s; }
.title-hero span { font-size: calc(15px * var(--ts, 1)); padding: 0 4px; background: rgba(0, 0, 0, .55); color: var(--dim); }
.title-hero:hover canvas { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 8px #fff8); transform: translateY(-2px); }
.title-hero.on canvas { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 10px var(--accent)); }
.title-hero.on span { color: #000; background: var(--accent); }
.title .auth { margin: 0; width: 100%; max-width: 460px; padding: 14px; border: 8px solid transparent; border-image: var(--frm-gold) 8 / 8px stretch; background-color: rgba(23, 17, 44, .94); background-clip: padding-box; box-shadow: 4px 4px 0 #000; }
.title .auth .tabs { margin-bottom: 8px; }
.title .auth .btn.primary { width: 100%; margin-top: 8px; font-size: calc(13px * var(--ts, 1)); padding: 12px; animation: title-glow 1.6s steps(2) infinite; }
@keyframes title-glow { 50% { box-shadow: 0 0 0 2px #000, 0 0 14px var(--accent); } }
.class-pick { cursor: pointer; margin: 0; } .class-pick.on { box-shadow: 0 0 0 2px var(--accent); }
.title-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(16px * var(--ts, 1)); text-shadow: 1px 1px 0 #000; }
.title-test { color: #000; background: var(--accent); padding: 0 6px; font-family: var(--font-head); font-size: calc(9px * var(--ts, 1)); line-height: 16px; }
@media (max-width: 420px) { .title-hero canvas { width: 60px; height: 60px; } .title-front { padding-top: 3vh; } }
html.fx-off .title-sky, html.fx-off .title-motes, html.fx-off .title-logo, html.fx-off .title-hero canvas, html.fx-off .title .auth .btn.primary { animation: none; }

/* ---------- Landscape phones (short and wide): dock becomes a rail on the left, HUD gets compact ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .dock { left: 0; top: 0; bottom: 0; transform: none; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 4px calc(4px + env(safe-area-inset-bottom, 0px)) calc(4px + env(safe-area-inset-left, 0px));
    overflow-y: auto; max-width: none; max-height: 100vh; }
  .dock button { width: 58px; height: 44px; font-size: calc(6px * var(--ts, 1)); } .dock button .icon { width: 24px; height: 24px; }
  .dock button.home { width: 64px; height: 52px; margin: 2px 0; } .dock button.home .icon { width: 28px; height: 28px; }
  .dock-sep { width: auto; height: 4px; align-self: stretch; margin: 2px 6px; background: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 8px); }
  .main { max-width: none; padding: calc(6px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(84px + env(safe-area-inset-left, 0px)); }
  .hud { gap: 8px; margin-bottom: 6px; flex-wrap: nowrap; }
  .hud-portrait { width: 48px; height: 48px; border-width: 5px; }
  .hud-main { flex: 1 1 auto; } .hud-tick { font-size: calc(15px * var(--ts, 1)); margin-top: 2px; }
  .hud-purse { flex-wrap: nowrap; } .hud-flags { display: none; }
  .modal { max-height: 92vh; overflow-y: auto; }
  /* title screen: logo and heroes on the left, the gate on the right */
  .title-front { max-width: 900px; display: grid; grid-template-columns: 1fr minmax(300px, 400px); grid-template-areas: "logo auth" "tag auth" "heroes auth" "foot auth"; align-items: center; column-gap: 20px; padding-top: 3vh; }
  .title-logo { grid-area: logo; } .title-tag { grid-area: tag; font-size: calc(16px * var(--ts, 1)); } .title-heroes { grid-area: heroes; } .title-foot { grid-area: foot; }
  .title .auth { grid-area: auth; max-height: 94vh; overflow-y: auto; }
  .tl-idle { font-size: calc(22px * var(--ts, 1)); } .tl-realms { font-size: calc(44px * var(--ts, 1)); }
  .title-hero canvas { width: 56px; height: 56px; }
  /* tutorial dialog stays clear of the rail */
  .tut.landscape .tut-box[data-pos="left"] { left: calc(90px + env(safe-area-inset-left, 0px)); }
  .tut.portrait .tut-box[data-pos="bottom"] { bottom: 8px; }
}

/* Expand / minimise (js/collapse.js): the toggle is a "-" / "+" on the left of the heading; the heading is tappable too */
.fold-title { cursor: pointer; user-select: none; }
.fold-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 20px; margin-right: 8px; padding: 0; vertical-align: middle;
  font-family: var(--font-head); font-size: calc(14px * var(--ts, 1)); line-height: 1; color: var(--accent2); background: transparent; border: 0; box-shadow: none; cursor: pointer; }   /* matches .zone-head .caret on Hunt */
.fold-mark:hover { color: var(--accent); }
.fold-title::before { content: none !important; }          /* the mark replaces the old decorative square */
.panel.folded > :not(.fold-head) { display: none !important; }
.panel.folded { padding-bottom: 8px; }
.player-link { cursor: pointer; } .player-link:hover { text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }

/* Daily event banners in the top bar (2026-10-23): icon, name, bonus badge; colour by kind, a slow light sweep */
.ev-flag { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 4px; font: inherit; font-size: calc(16px * var(--ts, 1));
  color: #fff; border: 2px solid #000; box-shadow: 2px 2px 0 #000; cursor: pointer; background: linear-gradient(180deg, var(--ev1), var(--ev2)); text-shadow: 1px 1px 0 #000; }
.ev-flag .ev-name { white-space: nowrap; }
.ev-flag .ev-pct { font-family: var(--font-head); font-size: calc(9px * var(--ts, 1)); background: #fff; color: #1a1205; text-shadow: none; padding: 3px 5px; border: 2px solid #000; }
.ev-flag::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffff55 50%, transparent 65%); transform: translateX(-120%); animation: evSweep 5s ease-in-out infinite; pointer-events: none; }
@keyframes evSweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ev-flag:hover { filter: brightness(1.12); }
.ev-essence { --ev1: #7a4ad8; --ev2: #3c1f80; }
.ev-xp { --ev1: #2f9fd0; --ev2: #1b5a86; }
.ev-gold { --ev1: #e0a21c; --ev2: #8a5a10; }
.ev-yield { --ev1: #4cae4c; --ev2: #24662a; }
html.fx-off .ev-flag::after { display: none; }
@media (prefers-reduced-motion: reduce) { .ev-flag::after { animation: none; display: none; } }

/* Name your hero (creator.js openNamer): shown once to Google/Discord sign-ups before the look creator */
.namer { max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.namer input { font: inherit; font-size: calc(22px * var(--ts, 1)); padding: 8px 10px; }

/* the gem counter in the top bar is a button to the Store's Gems tab */
button.purse { cursor: pointer; }
.purse-plus { margin-left: 4px; font-family: var(--font-head); font-size: calc(10px * var(--ts, 1)); background: var(--accent); color: #1a1205; border: 2px solid #000; padding: 0 3px; line-height: 14px; }
.store-tabs .gems-tab { border-color: var(--accent); }

/* ---------- Title screen, premium pass (owner 2026-10-23). Layers over the rules above; motion stops with effects off. ---------- */
.title-rays { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; transform: translateX(-50%); pointer-events: none; opacity: .22; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .55) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); animation: title-rays 90s linear infinite; }
@keyframes title-rays { to { transform: translateX(-50%) rotate(360deg); } }
.title-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(6, 3, 18, .55) 72%, rgba(4, 2, 12, .9) 100%); }
.tl-odyssey { font-size: clamp(32px, 10vw, 62px); margin-top: 6px; letter-spacing: 3px; color: #ffd34d;
  background: linear-gradient(100deg, #ffd34d 0%, #fff4c0 18%, #ffd34d 30%, #f0a020 60%, #ffd34d 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000) drop-shadow(0 6px 0 #8a3c00) drop-shadow(0 0 18px rgba(255, 200, 80, .55));
  animation: tl-shine 5s ease-in-out infinite; }
@keyframes tl-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.title-logo .tl-rule { display: flex; align-items: center; gap: 10px; width: min(320px, 70vw); margin-top: 12px; }
.tl-rule i { flex: 1; height: 3px; background: linear-gradient(90deg, transparent, #ffd34d); box-shadow: 0 2px 0 #000; }
.tl-rule i:last-child { background: linear-gradient(90deg, #ffd34d, transparent); }
.tl-rule b { color: #ffd34d; font-size: calc(14px * var(--ts, 1)); text-shadow: 0 0 10px #ffd34d, 2px 2px 0 #000; }
.title-tag { letter-spacing: .02em; color: #f2ecff; }
.title-rise { position: relative; padding: 4px 18px 0; }
.title-rise::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 120%; height: 46px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 211, 77, .45), rgba(124, 92, 255, .18) 45%, transparent 70%); filter: blur(2px); }
.title .auth.gate { position: relative; overflow: visible; padding: 26px 18px 16px;
  background-color: rgba(18, 12, 38, .9); background-image: linear-gradient(180deg, rgba(124, 92, 255, .22), transparent 40%), radial-gradient(ellipse at 50% 0%, rgba(255, 211, 77, .14), transparent 60%);
  box-shadow: 0 0 0 2px #000, 0 18px 50px rgba(0, 0, 0, .65), 0 0 46px rgba(124, 92, 255, .35); backdrop-filter: blur(3px); }
.gate-crest { position: absolute; left: 50%; top: -22px; transform: translateX(-50%) rotate(45deg); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3a2a6a, #120c26); border: 3px solid #ffd34d; box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 211, 77, .7); }
.gate-crest .icon { transform: rotate(-45deg); width: 22px; height: 22px; filter: drop-shadow(0 0 4px #9be7ff); }
.gate-greet { text-align: center; font-family: var(--font-head); font-size: calc(11px * var(--ts, 1)); color: #ffd34d; letter-spacing: .08em; margin-bottom: 12px; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 211, 77, .4); }
.title .auth.gate .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.title .auth.gate .tabs button { padding: 10px 6px; font-size: calc(10px * var(--ts, 1)); }
.title .auth.gate .tabs button.on { background: linear-gradient(180deg, #ffe58a, #f0b030); color: #1a0f00; border-color: #000; box-shadow: 0 0 12px rgba(255, 211, 77, .5); }
.title .auth.gate input[type=text], .title .auth.gate input[type=password] { background: rgba(6, 4, 16, .75); border-color: #4a3a7a; transition: border-color .15s, box-shadow .15s; }
.title .auth.gate input:focus { outline: none; border-color: #ffd34d; box-shadow: 0 0 0 2px #000, 0 0 14px rgba(255, 211, 77, .45); }
.title .auth.gate input::placeholder { color: #8a80b0; }
.title .auth.gate .btn.primary { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffe993 0%, #ffd34d 45%, #e8a020 100%); color: #1a0f00; border-color: #000; letter-spacing: .06em; }
.title .auth.gate .btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: gate-shine 3.2s ease-in-out infinite; }
@keyframes gate-shine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.title .auth.gate .oauth-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; align-items: stretch; text-align: center; }
.title .auth.gate .oauth-row > .dim.small { display: flex; align-items: center; gap: 8px; }
.title .auth.gate .oauth-row > .dim.small::before, .title .auth.gate .oauth-row > .dim.small::after { content: ""; flex: 1; height: 2px; background: #3a2e60; }
.title .auth.gate .oauth-google { background: #f4f4f8; color: #1a1a2a; border-color: #000; }
.title .auth.gate .oauth-discord { background: #5865f2; color: #fff; border-color: #000; }
.title-online { display: inline-flex; align-items: center; gap: 6px; color: #d8d0f0; }
.title-online i { width: 8px; height: 8px; background: #5aff8a; box-shadow: 0 0 8px #5aff8a; animation: online-pulse 2s ease-in-out infinite; }
@keyframes online-pulse { 50% { opacity: .35; } }
html.fx-off .title-rays, html.fx-off .tl-odyssey, html.fx-off .title .auth.gate .btn.primary::after, html.fx-off .title-online i { animation: none; }
@media (prefers-reduced-motion: reduce) { .title-rays, .tl-odyssey, .title .auth.gate .btn.primary::after, .title-online i { animation: none; } }
@media (orientation: landscape) and (max-height: 520px) { .title-rise { grid-area: heroes; } .tl-odyssey { font-size: calc(40px * var(--ts, 1)); } .tl-rule { display: none; } }