/* style.css — Reactor World theme over engine.css: amber Sparks, slate panels, rarity colours,
   the quest log, the compass ribbon, the minimap, the Forge and loot cards. */
:root { --accent: #f2c14e; --accent-2: #4cc9f0; --panel: rgba(10, 13, 22, .88); --line: rgba(160, 180, 210, .22); }
.title-name { background: linear-gradient(180deg, #fff6dc 0%, #f2c14e 55%, #d98b3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.title-kicker { color: #4cc9f0; }
.screen { background: radial-gradient(ellipse at 50% 20%, rgba(40, 30, 10, .25), rgba(2, 4, 10, .82)); }
.hud-hz { color: #f2c14e; }
.btn.primary { color: #1a1206; }
.tab.on { color: #1a1206; }
.prompt b { color: #1a1206; }

/* rarity */
.rar-common { color: #d7dde8; } .rar-uncommon { color: #43c785; } .rar-rare { color: #4cc9f0; } .rar-epic { color: #b06bff; } .rar-legendary { color: #e6b84c; }
.rar-b-common { border-color: rgba(215,221,232,.35) !important; }
.rar-b-uncommon { border-color: rgba(67,199,133,.6) !important; }
.rar-b-rare { border-color: rgba(76,201,240,.7) !important; }
.rar-b-epic { border-color: rgba(176,107,255,.8) !important; box-shadow: 0 0 14px rgba(176,107,255,.18); }
.rar-b-legendary { border-color: rgba(230,184,76,.9) !important; box-shadow: 0 0 18px rgba(230,184,76,.28); background: linear-gradient(160deg, rgba(230,184,76,.12), rgba(0,0,0,.2)) !important; }

/* HUD tracker line */
.hud-obj { border-left: 3px solid var(--accent); font-weight: 500; }
.hud-obj::before { content: ''; }

/* class picker (creator) */
.class-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.class-card { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 30px 1fr; gap: 2px 8px; align-items: center; }
.class-card.on { border-color: var(--accent); background: rgba(242,193,78,.08); }
.class-emoji { font-size: 20px; grid-row: span 2; }
.class-name { font-family: var(--display); font-weight: 700; font-size: 14px; }
.class-line { font-size: 11px; color: var(--ink-dim); line-height: 1.3; }

/* compass ribbon */
.compass { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(340px, 34vw); height: 30px; overflow: hidden; border-radius: 999px; background: rgba(8, 11, 18, .96); border: 1px solid var(--line); z-index: 5; pointer-events: none; }
.compass-strip { position: absolute; inset: 0; }
.compass-strip .cmark { position: absolute; top: 5px; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); }
.compass-strip i { position: absolute; top: 11px; width: 1px; height: 8px; background: rgba(255,255,255,.3); }
.compass-strip .ctarget { position: absolute; top: 4px; transform: translateX(-50%); font-size: 15px; color: var(--accent); text-shadow: 0 0 8px rgba(242,193,78,.8); }
.compass-strip .ctarget.edge { color: #ffd98a; }
.compass-tick { position: absolute; left: 50%; top: 0; width: 2px; height: 7px; background: #fff; transform: translateX(-50%); }
.compass-label { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; z-index: 5; pointer-events: none; white-space: nowrap; }
.compass-label b { color: var(--accent); }

/* minimap */
.minimap-wrap { position: absolute; right: 14px; bottom: 14px; z-index: 5; cursor: pointer; text-align: center; }
.minimap { display: block; border-radius: 50%; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.minimap-label { margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); text-shadow: 0 1px 2px #000; }
@media (max-width: 700px) { .minimap-wrap { right: 10px; bottom: 96px; transform: scale(.8); transform-origin: bottom right; } .compass { width: 52vw; } }
body[data-input="touch"] .minimap-wrap { bottom: 120px; }
/* zoom / full-screen buttons sit LEFT of the minimap, never under it (Derek 2026-10-23: full screen click opened the map) */
.hud-tools { right: 178px; bottom: 14px; z-index: 6; }
@media (max-width: 700px) { .hud-tools { right: 10px; bottom: 14px; } }
body[data-input="touch"] .hud-tools { bottom: 120px; }

/* quest log */
.qlist { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.qcard { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.qcard.tracked { border-color: var(--accent); background: rgba(242,193,78,.06); }
.qcard.done { opacity: .65; }
.qhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.qtitle { font-family: var(--display); font-weight: 700; font-size: 15px; }
.qsteps { margin: 8px 0 6px; display: flex; flex-direction: column; gap: 3px; }
.qstep { font-size: 13px; color: var(--ink-dim); display: flex; gap: 8px; align-items: baseline; }
.qstep.cur { color: var(--ink); font-weight: 500; }
.qstep.done { text-decoration: line-through; opacity: .6; }
.qdot { font-family: var(--display); color: var(--accent); min-width: 14px; }
.qfoot { display: flex; justify-content: space-between; font-size: 12px; }
.qprog { color: var(--ink-dim); }
.qbadge.done { font-size: 12px; color: #8dc63f; border: 1px solid rgba(141,198,63,.5); border-radius: 999px; padding: 4px 10px; }

/* the Forge */
.statrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.stat { font-size: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-dim); }
.stat b { color: var(--accent); margin-right: 3px; }
.forge-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 12px; }
.slotbox { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; text-align: center; }
.slotbox.on { outline: 2px solid var(--accent); }
.slot-ic { font-size: 18px; } .slot-name { font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slot-rar { font-size: 10px; }
.forge-grid, .loot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.gear-card, .loot-card { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.gear-card.eq { outline: 2px solid rgba(242,193,78,.6); }
.gear-top { display: flex; justify-content: space-between; align-items: center; }
.gear-ic { font-size: 18px; } .gear-rar, .loot-rar { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gear-name, .loot-name { font-family: var(--display); font-weight: 700; font-size: 14px; }
.gear-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.gear-stats span { font-size: 11px; background: rgba(76,201,240,.1); border: 1px solid rgba(76,201,240,.3); border-radius: 999px; padding: 2px 7px; color: #9fd9ff; }
.btn-row.tight { margin-top: 6px; gap: 6px; }
.btn-row.tight .btn { padding: 6px 8px; font-size: 12px; }
.loot-card { text-align: center; align-items: center; animation: lootIn .5s ease both; }
.loot-card .gear-stats { justify-content: center; }
@keyframes lootIn { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.si-rar { font-size: 11px; font-weight: 600; }

/* trials + arena */
.trial-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.trial-genre { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.trial-stars { font-size: 18px; color: rgba(255,255,255,.3); letter-spacing: 2px; } .trial-stars.on { color: var(--accent); }
.flash-tag { background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.5); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
.boss-card { border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.boss-name { font-family: var(--display); font-weight: 700; font-size: 20px; }
.lesson-frame { width: 100%; height: min(68vh, 640px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* fast travel */
.ft-list { display: flex; flex-direction: column; gap: 6px; }
.ft-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ft-item:hover:not(:disabled) { border-color: var(--accent); }
.ft-item.here { opacity: .6; cursor: default; }
.ft-name { font-family: var(--display); font-weight: 700; }

/* Sparks sit under the name (left column) so the compass owns the top centre */
.hud-left .hud-hz { display: inline-block; margin-top: 6px; font-size: 15px; padding: 4px 12px; }

/* narrow windows: let the panel body shrink so an 820-wide trial canvas scales down instead of clipping */
.opanel, .obody { min-width: 0; }
.mgcanvas { max-width: 100%; }
@media (max-width: 900px) { .hud-btn { padding: 6px 9px; font-size: 12px; } .compass { width: 28vw; } .compass-strip .cmark { font-size: 11px; } }

/* location card (world/cutscenes.js showCard) */
.loc-card { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -8px); width: min(560px, 90vw); display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 14px; padding: 12px 16px; opacity: 0; transition: opacity .45s, transform .45s; pointer-events: none; z-index: 7; }
.loc-card.show { opacity: 1; transform: translate(-50%, 0); }
.loc-art { width: 0; height: 0; border-radius: 10px; background-size: cover; background-position: center; transition: width .3s; }
.loc-card.has-art .loc-art { width: 150px; height: 84px; }
.loc-title { font-family: var(--display); font-weight: 700; font-size: 22px; }
.loc-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.cine-title { font-family: var(--display); }
.title-art { height: 170px; margin: -6px -6px 14px; border-radius: 14px 14px 0 0; background-size: cover; background-position: center 35%; box-shadow: inset 0 -40px 40px -20px var(--panel); }

/* minigame feedback: a wash + word over the canvas, a coloured status line, a shake on a miss */
.mgwrap { position: relative; }
.mgflash { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 3; }
.mgflash span { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 6vw, 48px); letter-spacing: .04em; padding: 10px 26px; border-radius: 14px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); transform: scale(.8); transition: transform .18s; }
.mgflash.show { opacity: 1; } .mgflash.show span { transform: scale(1); }
.mgflash.ok { background: rgba(141,198,63,.28); box-shadow: inset 0 0 0 4px #8dc63f; } .mgflash.ok span { background: rgba(60,120,20,.85); }
.mgflash.bad { background: rgba(255,77,61,.26); box-shadow: inset 0 0 0 4px #ff4d3d; } .mgflash.bad span { background: rgba(150,30,20,.88); }
.mgstatus { border-left: 4px solid transparent; padding-left: 10px; transition: border-color .2s, background .2s; border-radius: 6px; }
.mgstatus.ok { border-left-color: #8dc63f; background: rgba(141,198,63,.12); animation: mgfade 1.6s forwards; }
.mgstatus.bad { border-left-color: #ff4d3d; background: rgba(255,77,61,.12); animation: mgfade 1.6s forwards; }
@keyframes mgfade { 0%, 60% { opacity: 1; } 100% { background: transparent; } }
.mgwrap.shake { animation: mgshake .45s; }
@keyframes mgshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

/* the congratulations card that covers a finished board */
.mgwin { position: absolute; inset: 0; z-index: 4; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; background: radial-gradient(ellipse at center, #23401c, #070a12); box-shadow: inset 0 0 0 3px #8dc63f; opacity: 0; transform: scale(.96); transition: opacity .35s, transform .35s; }
.mgwin.show { opacity: 1; transform: scale(1); }
.mgwin-kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #8dc63f; }
.mgwin-title { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 5vw, 44px); line-height: 1.05; }
.mgwin-stars { font-size: clamp(34px, 7vw, 56px); letter-spacing: .08em; color: #c9d3e2; line-height: 1.1; }
.mgwin-stars.gold { color: #f2c14e; text-shadow: 0 0 18px rgba(242,193,78,.6); }
.mgwin-sub { color: var(--ink-dim); font-size: 15px; }
.mgwin-btn { margin-top: 10px; min-width: 240px; font-size: 20px; padding: 14px 28px; }
.mgwin-key { font-size: 12px; color: var(--ink-dim); } .mgwin-key b { background: #1a2130; padding: 1px 6px; border-radius: 4px; }

/* Reactimals: aim banner, Field Card, Menagerie */
.aim-banner { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); background: var(--panel); border: 1px solid #43c785; border-radius: 12px; padding: 10px 16px; z-index: 7; font-size: 14px; pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,.5); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.rw-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.rw-portrait { flex: none; width: 92px; height: 92px; border-radius: 50%; border: 3px solid #d7dde8; display: flex; align-items: center; justify-content: center; background: #0d1220; }
.rw-portrait.big { width: 120px; height: 120px; } .rw-portrait.sm { width: 48px; height: 48px; border-width: 2px; }
.rw-glyph { font-family: var(--display); font-weight: 800; font-size: 40px; color: var(--ink); } .rw-portrait.sm .rw-glyph { font-size: 20px; }
.rw-rarity { font-weight: 700; letter-spacing: .04em; } .rw-meta { font-size: 13px; color: var(--ink-dim); margin: 4px 0; } .rw-blurb { margin: 6px 0; line-height: 1.45; }
.rw-nodes { display: grid; gap: 8px; margin: 10px 0; }
.rw-node { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); }
.rw-node.none { opacity: .55; } .rw-icon { color: #4cc9f0; } .rw-empty { background: rgba(255,122,92,.12); border-left: 4px solid #ff7a5c; padding: 8px 12px; border-radius: 6px; }
.rw-stats { font-size: 15px; margin-bottom: 8px; }
.rw-index-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; } .rw-index-zone { width: 130px; font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; }
.rw-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); } .rw-chip.have { font-weight: 700; background: rgba(255,255,255,.04); }
.rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rw-card { border: 2px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.03); } .rw-card.companion { background: rgba(67,199,133,.1); }
.rw-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.rw-redeem { display: flex; gap: 8px; align-items: center; } .rw-redeem .text-in { flex: 1; }
.rw-code { width: 100%; font-family: Consolas, monospace; font-size: 12px; word-break: break-all; }
.rw-menagerie h3 { margin: 14px 0 6px; font-size: 15px; }

.rw-addr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 8px; } .rw-addr-code { font-family: Consolas, monospace; font-size: 15px; letter-spacing: .08em; color: #43c785; }

/* capture panel (bottom centre) */
.cap-panel { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(720px, 94vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; z-index: 7; box-shadow: 0 10px 40px rgba(0,0,0,.55); }
.cap-head { display: flex; gap: 12px; align-items: flex-start; }
.cap-portrait { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #d7dde8; display: flex; align-items: center; justify-content: center; background: #0d1220; font-family: var(--display); font-weight: 800; font-size: 24px; }
.cap-text { flex: 1; min-width: 0; } .cap-title { font-size: 18px; } .cap-sub { font-size: 13px; color: var(--ink-dim); margin-top: 2px; } .cap-blurb { font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; } .cap-dist { font-size: 12.5px; margin-top: 4px; }
.cap-close { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.cap-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.cap-node { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.cap-node:hover:not(:disabled) { border-color: var(--accent); background: rgba(242,193,78,.1); } .cap-node.none { opacity: .45; cursor: default; }
.cap-key { font-size: 11px; font-weight: 700; background: #1a2130; padding: 1px 6px; border-radius: 4px; } .cap-node-name { font-size: 13px; } .cap-node-name small { color: var(--ink-dim); } .cap-odds { font-weight: 800; font-size: 15px; }
.cap-empty { margin-top: 10px; background: rgba(255,122,92,.12); border-left: 4px solid #ff7a5c; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.cap-hint { font-size: 11.5px; color: var(--ink-dim); margin-top: 8px; } .cap-hint b { background: #1a2130; padding: 1px 6px; border-radius: 4px; }
@media (max-width: 700px) { .cap-panel { bottom: 150px; } .cap-blurb { display: none; } }