/* UI polish (owner 2026-10-22: "glowing, contrast, a bit more modernized but still the same theme", touches from idle-realms_8.html).
   Loaded last; only adds light, depth and contrast on top of the existing pixel look. Glows switch off with Visual effects off. */
:root { --glow: #ffd34d80; --glow2: #6be3ff70; }
/* older phones and app web views have no color-mix; a variable holding one would break every rule that uses it, so these only
   switch on where it works */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --glow: color-mix(in srgb, var(--accent) 55%, transparent); --glow2: color-mix(in srgb, var(--accent2) 45%, transparent); }
  :root:not([data-theme="parchment"]):not([data-theme="pride"]):not([data-theme="transpride"]) { --dim: color-mix(in srgb, var(--dim) 82%, #fff); }          /* easier to read secondary text */
}

body { background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--panel2) 70%, transparent), transparent 60%), var(--bg); background-attachment: fixed; }

/* panels: a soft top light and an inner edge, like the prototype's lit cards */
.panel { background: linear-gradient(180deg, color-mix(in srgb, var(--panel2) 55%, var(--panel)) 0%, var(--panel) 38%); box-shadow: 3px 3px 0 #000, inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); }
.panel.flat { background: var(--bg2); box-shadow: inset 0 2px 4px #0007; }

/* headings: a small accent marker and a hard drop shadow for contrast */
.panel h2, .panel h3 { text-shadow: 2px 2px 0 #000a; }
.sec-head h3::before, .panel > h3:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: currentColor; box-shadow: 0 0 6px currentColor; vertical-align: middle; }

/* buttons: lit edge, glow on hover, a real press */
.btn { box-shadow: 2px 2px 0 #000, inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent); transition: box-shadow .12s, transform .06s; }
.btn:hover:not(:disabled) { box-shadow: 2px 2px 0 #000, 0 0 12px -2px var(--glow2), inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent); }
.btn.primary { box-shadow: 2px 2px 0 #000, 0 0 14px -4px var(--glow), inset 0 2px 0 #fff6; text-shadow: 0 1px 0 #fff5; }
.btn.primary:hover:not(:disabled) { box-shadow: 2px 2px 0 #000, 0 0 20px -2px var(--glow), inset 0 2px 0 #fff8; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 #000, inset 0 2px 4px #0007; }
.btn:disabled { filter: saturate(.4) brightness(.8); }

/* selected things glow (tabs, chips, cards) */
.tabs button.on, .chip.on, .skill-cat.on, .class-card.sel, .hs-card.active { box-shadow: inset 0 0 0 2px var(--accent), 0 0 22px -4px var(--glow); }
.tabs button { transition: box-shadow .15s; }

/* recessed wells: inputs, logs, bars */
input[type=text], input[type=password], input[type=number], select, textarea, .chatlog, .bar { box-shadow: inset 0 2px 4px #0008; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 2px 4px #0008, 0 0 0 2px var(--glow2); }

/* bars: glossy fill with a glow at the leading edge */
.bar > i { box-shadow: 0 0 8px -1px currentColor; }
.bar.xp > i { color: var(--xp); } .bar.hp > i { color: var(--hp); } .bar.pts > i, .bar.gold > i { color: var(--accent); } .bar.rank > i { color: var(--good); }

/* cards and tiles lift a little on hover */
.skill-card, .ttile, .skill-cat, .opt, .worn-row .bslot, .bslot { transition: transform .1s, box-shadow .15s; }
@media (hover: hover) {
  .skill-card:hover, .ttile:hover:not(.locked), .skill-cat:hover, .opt:hover { transform: translateY(-2px); box-shadow: 0 4px 0 #000, 0 0 16px -4px var(--glow2); }
}

/* tags read better */
.tag { text-shadow: 0 1px 0 #000a; }
.tag.accent, .tag.good, .tag.bad { box-shadow: 0 0 8px -3px currentColor; }

/* HUD: names and currencies pop */
.hud-name .cn { text-shadow: 2px 2px 0 #000; }
.purse { box-shadow: inset 0 2px 4px #0007, 0 0 10px -4px var(--glow); }

/* dock: the active place glows */
.dock button.on { box-shadow: inset 0 0 0 2px var(--accent), 0 0 18px -2px var(--glow); }

/* effects off: keep the contrast, drop the glow and motion */
html.fx-off .btn, html.fx-off .btn:hover, html.fx-off .tabs button.on, html.fx-off .chip.on, html.fx-off .dock button.on, html.fx-off .bar > i { box-shadow: 2px 2px 0 #000; }
html.fx-off .skill-card:hover, html.fx-off .ttile:hover, html.fx-off .opt:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn, .skill-card, .ttile, .opt { transition: none; } }

/* Sign in with Google / Discord buttons on the login screen and in Settings (server/src/oauth.js) */
.oauth-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.oauth-row .note { font-size: 0.8em; opacity: 0.7; }
.btn.oauth-google { background: #fff; color: #1f1f1f; text-align: center; text-decoration: none; }
.btn.oauth-discord { background: #5865f2; color: #fff; text-align: center; text-decoration: none; }

/* Tasks screen rework (2026-10-23): the Next strip under the running task, and the Queue window */
.next-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line2); }
.next-strip .chip { font-size: 0.85em; padding: 3px 8px; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-strip .btn { margin-left: auto; }
.qwin .card .row { flex-wrap: wrap; gap: 6px; }
.qwin h3 { margin: 10px 0 2px; }