:root {
  color-scheme: dark; --ink: #090d16; --panel: rgba(14, 22, 34, .94); --panel-2: #111c2b;
  --line: rgba(174, 206, 235, .16); --gold: #f2c86f; --cyan: #78dcff; --mint: #65dfb3;
  --danger: #ff6e76; --muted: #90a0b4; --text: #eef6ff; --serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: Inter, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.app-shell { min-height: 100dvh; }
.screen { position: relative; min-height: 100dvh; animation: screen-in .45s ease both; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: 10px; letter-spacing: .25em; font-weight: 800; text-transform: uppercase; }
.primary { border: 1px solid rgba(255, 226, 157, .8); border-radius: 4px; background: linear-gradient(135deg, #f6d78b, #b98231); color: #171106; font-weight: 900; box-shadow: 0 8px 30px rgba(213, 158, 54, .25), inset 0 1px #fff1ba; cursor: pointer; }
.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary.huge { min-width: 270px; padding: 15px 28px; letter-spacing: .08em; }
.primary.huge span, .primary.huge small { display: block; }
.primary.huge small { margin-top: 3px; font-size: 8px; opacity: .65; letter-spacing: .24em; }
.ghost, .icon-button { border: 1px solid var(--line); background: rgba(9, 15, 26, .66); color: var(--text); cursor: pointer; }
.ghost { padding: 10px 24px; border-radius: 3px; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; }
.icon-button.compact { width: 34px; height: 34px; }
.hidden { display: none !important; }

/* Title */
.title-screen { display: grid; place-items: center; isolation: isolate; overflow: hidden; }
.title-art, .title-vignette { position: absolute; inset: 0; }
.title-art { z-index: -3; background: url("assets/scenes/title.webp") center 34%/cover no-repeat; transform: scale(1.035); animation: title-breathe 14s ease-in-out infinite alternate; }
@keyframes title-breathe { to { transform: scale(1.09); } }
.title-vignette { z-index: -2; background: radial-gradient(circle at 50% 38%, transparent 12%, rgba(7, 10, 17, .23) 48%, #070a11 92%), linear-gradient(0deg, #070a11 0, transparent 53%); }
.title-screen::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,255,255,.02) 141px, transparent 142px); }
.title-content { width: min(720px, 92vw); padding-top: 19vh; text-align: center; text-shadow: 0 3px 20px #000; }
.title-content .eyebrow { color: #bfefff; }
.title-content h1 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: .18em; filter: drop-shadow(0 5px 10px #000); }
.title-content h1 span { display: block; font-size: clamp(48px, 8vw, 92px); background: linear-gradient(#fff 15%, #cbe5f9 55%, #759aba); -webkit-background-clip: text; color: transparent; }
.title-content h1 small { display: block; margin-top: -6px; color: #e9c86f; font-size: clamp(19px, 3vw, 32px); letter-spacing: .55em; }
.title-copy { margin: 34px 0 25px; font-family: var(--serif); font-size: 16px; line-height: 1.9; letter-spacing: .12em; }
.title-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.asset-note { position: absolute; bottom: 15px; margin: 0; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .13em; }

/* Hub */
.hub-screen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 230px 1fr; background: radial-gradient(circle at 18% 24%, rgba(41, 85, 110, .24), transparent 37%), #0a1019; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 12px 26px; border-bottom: 1px solid var(--line); background: rgba(7, 12, 20, .84); backdrop-filter: blur(16px); }
.hub-topbar { grid-column: 1 / -1; }
.topbar h1 { margin: 0; font: 600 22px var(--serif); letter-spacing: .12em; }
.top-actions { display: flex; gap: 8px; }
.hub-hero { position: relative; grid-column: 1 / -1; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #0a1520 15%, transparent 65%), url("assets/scenes/camp.webp") center 58%/cover; }
.hub-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #08121e 5%, transparent 64%, #08121e), linear-gradient(0deg, #08121e, transparent 60%); }
.hub-hero-art { position: relative; z-index: 2; width: 210px; height: 100%; margin-left: 4%; background: url("assets/characters/hero.webp") center top/cover; mask-image: linear-gradient(#000 60%, transparent); }
.hub-hero-copy { position: relative; z-index: 3; padding: 0 20px 30px; font-family: var(--serif); text-shadow: 0 3px 12px #000; }
.hub-hero-copy p { margin: 0 0 11px; line-height: 1.8; color: #cad8e4; }
.hub-hero-copy strong { color: #f4d387; font-weight: 500; letter-spacing: .1em; }
.chapter-mark { position: absolute; right: -60px; bottom: -32px; color: rgba(255,255,255,.035); font-size: 160px; }
.hub-main { padding: 24px 26px 50px; min-width: 0; }
.stash-panel { padding: 24px 18px; border-left: 1px solid var(--line); background: rgba(10, 16, 26, .75); }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.section-heading.compact { align-items: center; }
.section-heading h2 { margin: 0; font: 600 22px var(--serif); letter-spacing: .08em; }
.meta-chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 30px; color: var(--muted); font-size: 11px; }
.meta-chip b { color: var(--gold); }
.hint { margin: -4px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.dungeon-list { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px; }
.dungeon-card { position: relative; min-height: 250px; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, rgba(29, 48, 63, .82), rgba(11, 18, 29, .96)); text-align: left; cursor: pointer; transition: .25s ease; }
.dungeon-card::before { content: ""; position: absolute; width: 190px; height: 190px; right: -85px; top: -90px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .19; }
.dungeon-card:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,.3); }
.dungeon-card:disabled { filter: grayscale(.8); opacity: .45; cursor: not-allowed; }
.dungeon-card .number { color: var(--accent); font: 700 11px var(--serif); letter-spacing: .18em; }
.dungeon-card h3 { margin: 10px 0 4px; font: 600 22px var(--serif); }
.dungeon-card .subtitle { color: var(--accent); font-size: 11px; }
.dungeon-card p { color: #9eafc0; font-size: 11px; line-height: 1.7; }
.dungeon-card footer { width: 100%; margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); font-size: 10px; }
.dungeon-card footer b { color: var(--gold); }
.stash-list { display: grid; gap: 8px; max-height: calc(100dvh - 400px); overflow: auto; padding-right: 3px; }
.stone-row { width: 100%; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 5px; background: #101a28; text-align: left; cursor: pointer; }
.stone-row.selected { border-color: var(--gold); background: rgba(126, 92, 29, .22); }
.stone-row .gem { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50% 50% 45% 55%; background: radial-gradient(circle at 35% 25%, #fff, #72c5e9 28%, #273c77 70%); box-shadow: 0 0 13px rgba(104, 208, 255, .25); }
.stone-row span:nth-child(2) { min-width: 0; flex: 1; }
.stone-row b, .stone-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stone-row b { font-size: 12px; }.stone-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.empty-state { padding: 24px 14px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.8; }

/* Game */
.game-screen { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 78px minmax(0, 1fr) 126px; overflow: hidden; background: #070b12; }
.gear-card.socket-pulse { animation:socket-pulse .18s ease-out; }.gear-card.socket-release { animation:socket-release .18s ease-out; }@keyframes socket-pulse { 40%{border-color:#78efd2;box-shadow:0 0 22px rgba(94,235,199,.55);transform:scale(1.025)} }@keyframes socket-release { 45%{border-color:#a8c9e5;filter:brightness(1.55);transform:scale(.985)} }
.game-header { z-index: 5; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 20px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #101a27, #0a111c); box-shadow: 0 5px 20px #000; }
.dungeon-title { display: flex; gap: 12px; align-items: center; }.dungeon-title p { margin: 0 0 3px; font: 600 16px var(--serif); letter-spacing: .1em; }.dungeon-title strong { color: var(--muted); font-size: 9px; letter-spacing: .15em; }.dungeon-title i { color: var(--gold); }
.status-cluster { display: flex; align-items: center; gap: 12px; }.level-orb { width: 50px; height: 50px; display: grid; grid-template-columns: auto auto; place-content: center; gap: 3px; border: 1px solid rgba(243, 203, 104, .5); border-radius: 50%; background: radial-gradient(circle, #273042, #101621); box-shadow: 0 0 20px rgba(239,194,92,.12); }.level-orb small { font-size: 7px; color: var(--gold); }.level-orb b { font: 600 19px var(--serif); }
.vital-bars { display: grid; gap: 7px; }.bar-row { display: grid; grid-template-columns: 35px 170px 56px; gap: 8px; align-items: center; font-size: 9px; color: var(--muted); }.bar { height: 7px; overflow: hidden; border-radius: 8px; background: #202836; box-shadow: inset 0 1px 3px #000; }.bar i { display: block; width: 100%; height: 100%; transition: width .25s; }.bar.hp i { background: linear-gradient(90deg, #d4404f, #ff7c76); }.bar.hunger i { background: linear-gradient(90deg, #c18f32, #f3da74); }.bar-row b { color: #dfe8f0; font-size: 9px; }
.inventory-toggle { justify-self: end; width: 105px; padding: 8px 11px; display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 4px; background: #131f2e; cursor: pointer; font-size: 11px; }.inventory-toggle b { color: var(--gold); }
.map-stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle, #172330, #070b11 75%); }
#game-canvas { width: 100%; height: 100%; display: block; image-rendering: auto; touch-action: none; }
.equipment-rail { min-height: 0; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; border-left: 1px solid var(--line); background: #0c131e; }.equipment-fixed { flex: 0 0 auto; display: grid; gap: 8px; }.rail-heading { display: flex; align-items: center; justify-content: space-between; color: #7f94a8; font-size: 8px; letter-spacing: .16em; }.rail-heading small { color: var(--muted); font-size: 8px; letter-spacing: 0; }.rail-heading b { color: var(--gold); }.quick-pack { min-height: 0; padding-top: 10px; display: flex; flex: 1 1 0; flex-direction: column; gap: 7px; overflow: hidden; border-top: 1px solid var(--line); }.quick-inventory { min-height: 0; padding-right: 3px; display: grid; flex: 1 1 0; grid-auto-rows: minmax(42px,max-content); gap: 6px; align-content: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #3b5368 #0b121c; }.quick-inventory::-webkit-scrollbar { width:6px; }.quick-inventory::-webkit-scrollbar-track { background:#0b121c; }.quick-inventory::-webkit-scrollbar-thumb { border-radius:6px; background:#3b5368; }.quick-item { min-width: 0; min-height:42px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border: 1px solid var(--line); border-radius: 4px; background: #111c29; overflow: hidden; }.quick-item-info { min-width: 0; padding: 7px; display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 6px; border: 0; background: transparent; text-align: left; cursor: pointer; }.quick-item-info > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #1d3043; }.quick-item-info b, .quick-item-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.quick-item-info b { font-size: 9px; }.quick-item-info small { margin-top: 2px; color: var(--muted); font-size: 7px; }.quick-action { min-width: 43px; padding: 5px; border: 0; border-left: 1px solid var(--line); background: rgba(33, 55, 76, .75); color: var(--gold); cursor: pointer; font-size: 8px; }.quick-action:hover, .quick-item-info:hover { background-color: rgba(65, 100, 127, .25); }
.rail-magic-button { padding:4px 7px; border:1px solid rgba(193,130,231,.3); border-radius:3px; background:rgba(76,36,98,.28); color:#d8a9f1; cursor:pointer; font-size:8px; letter-spacing:0; }.rail-magic-button b { margin-left:3px; color:var(--gold); }
.gear-card { width: 100%; padding: 10px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(135deg, #152334, #0e1723); text-align: left; cursor: pointer; }.gear-card:hover { border-color: rgba(118, 216, 255, .42); }.gear-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(240,198,105,.25); border-radius: 50%; color: var(--gold); }.gear-card small, .gear-card b, .gear-card em { display: block; }.gear-card small { color: var(--muted); font-size: 7px; letter-spacing: .12em; }.gear-card b { margin: 2px 0; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.gear-card em { color: var(--cyan); font-size: 9px; font-style: normal; }.gear-card strong { font-size: 8px; color: var(--muted); }.gear-card strong i { display: block; color: var(--gold); font: normal 700 17px var(--serif); text-align: center; }
.minimap-card { position: absolute; z-index: 3; top: 94px; right: 320px; width: 230px; padding: 9px; pointer-events: none; border: 1px solid var(--line); border-radius: 4px; background: rgba(8, 14, 22, .82); backdrop-filter: blur(5px); }.mini-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 7px; letter-spacing: .1em; color: var(--muted); }.mini-head b { font-weight: 400; }.mini-head i { color: var(--cyan); font-style: normal; }#minimap { width: 100%; height: 86px; display: block; }
.message-log { grid-column: 1; padding: 15px 18px; display: flex; align-items: center; gap: 15px; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, #0d1622, #090e17); }.history-button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: #142131; color: #b9cbd9; cursor: pointer; font-size: 10px; }.history-button:hover { border-color: var(--cyan); }.history-button span { color: var(--gold); }.message-current { min-width: 0; flex: 1; overflow: hidden; }.message-current > span { display: block; overflow: hidden; color: #dce7f0; font-size: 16px; font-weight: 600; letter-spacing: .03em; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }.message-current > span::before { content: "›"; margin-right: 11px; color: #6586a0; }.message-current > span.good, .message-current > span.level { color: #8ee8ba; }.message-current > span.warning { color: #f2c66f; }.message-current > span.danger, .message-current > span.damage { color: #ff8c92; }.message-current > span.story { color: #dfbdff; }.message-current > span.loot, .message-current > span.effect { color: #89ddff; }.message-current > span.muted { color: #8b9baf; }.message-enter { animation: message-in .3s ease both; }@keyframes message-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.mobile-controls { grid-column: 2; grid-row: 3; padding: 7px 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: #0c131e; }.mobile-controls button { border: 1px solid var(--line); border-radius: 3px; background: #142131; color: #b9d1e4; cursor: pointer; }.mobile-controls .attack { color: #171106; border-color: #d9b75f; background: linear-gradient(135deg, #f4d27a, #a8752d); font-size: 11px; font-weight: 900; }
.status-list { position: absolute; z-index: 3; top: 12px; left: 14px; display: flex; flex-wrap:wrap; gap: 6px; }.status-pill { padding: 5px 9px 5px 5px; display:flex; align-items:center; gap:5px; border: 1px solid color-mix(in srgb,var(--status-color,#8fa9bd) 68%,transparent); border-radius: 20px; background: rgba(8, 14, 22, .9); box-shadow:0 0 10px color-mix(in srgb,var(--status-color,#8fa9bd) 16%,transparent); font-size: 10px; }.status-pill i { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--status-color,#8fa9bd) 17%,#081018); color:var(--status-color,#dce8ef); font-style:normal; font-weight:900; }.status-pill b { color: var(--gold); }
.ground-item-panel { position:absolute; z-index:4; left:50%; bottom:14px; width:min(720px,calc(100% - 28px)); padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:14px; transform:translateX(-50%); border:1px solid rgba(242,200,111,.5); border-radius:7px; background:rgba(7,13,21,.94); box-shadow:0 8px 30px rgba(0,0,0,.48),inset 0 0 20px rgba(235,191,92,.06); backdrop-filter:blur(8px); }.ground-item-copy { min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:10px; }.ground-item-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#17283a; }.ground-item-copy small,.ground-item-copy b { display:block; }.ground-item-copy small { margin-bottom:3px; color:var(--gold); font-size:11px; }.ground-item-copy b { overflow:hidden; font:600 16px var(--serif); text-overflow:ellipsis; white-space:nowrap; }.ground-item-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.ground-item-actions button { padding:9px 11px; border:1px solid var(--line); border-radius:4px; background:#17283a; color:var(--text); cursor:pointer; font-size:12px; white-space:nowrap; }.ground-item-actions button.primary { border-color:#e5c56e; background:linear-gradient(135deg,#f5d57f,#ad792e); color:#181207; font-weight:700; }.ground-item-actions button:disabled { opacity:.45; cursor:not-allowed; }
.floor-flash { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(20, 47, 65, .42), transparent 62%); opacity: 0; font: 500 34px var(--serif); letter-spacing: .22em; text-shadow: 0 3px 20px #000; }.floor-flash.active { animation: flash-floor 1.2s ease both; }@keyframes flash-floor { 0%,100%{opacity:0} 20%,70%{opacity:1} }

/* Modal */
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,5,10,.78); backdrop-filter: blur(7px); animation: screen-in .2s ease; }
.modal { width: min(680px, 94vw); max-height: min(760px, 90dvh); overflow: auto; border: 1px solid rgba(173,205,232,.25); border-radius: 7px; background: linear-gradient(155deg, #182638, #0d1622 55%); box-shadow: 0 24px 80px #000; }.modal.wide { width: min(860px, 95vw); }.modal-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 19px; border-bottom: 1px solid var(--line); background: rgba(14,23,35,.96); }.modal-header h2 { margin: 0; font: 500 20px var(--serif); }.close-modal { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }.modal-body { padding: 18px; }.modal-footer { position: sticky; bottom: 0; padding: 13px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: rgba(14,23,35,.97); }.modal-footer button { padding: 9px 18px; }
.recipe-earned { width: min(520px, 94vw); }.recipe-earned .modal-body { text-align: center; }.recipe-earned-icon { width: 82px; height: 82px; margin: 2px auto 12px; display: grid; place-items: center; border: 1px solid rgba(242,200,111,.42); border-radius: 50%; background: radial-gradient(circle, rgba(120,220,255,.22), rgba(17,29,44,.85) 68%); box-shadow: 0 0 34px rgba(120,220,255,.14); font-size: 42px; }.recipe-earned h3 { margin: 7px 0; color: var(--gold); font: 600 22px var(--serif); }.recipe-earned .modal-body > p { color: #b8c9d8; font-size: 11px; line-height: 1.8; }.recipe-needs { margin: 17px 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: rgba(6,12,20,.45); }.recipe-needs small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }.recipe-needs > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }.recipe-needs span { padding: 6px 9px; border-radius: 20px; background: #182a3c; color: #dceaf5; font-size: 10px; }.recipe-earned .permanent-note { color: #83d9ff; }
.magic-book-button { border-color: rgba(213,163,255,.48); background: radial-gradient(circle,rgba(130,67,175,.45),rgba(9,15,26,.8)); color:#e7c1ff; font:700 15px var(--serif); }.magic-recipe-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.magic-recipe-card { min-width:0; padding:9px; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:6px; background:rgba(8,15,24,.72); color:var(--text); text-align:left; cursor:pointer; }.magic-recipe-card:hover { border-color:#ba86e3; background:rgba(66,37,85,.3); }.magic-recipe-card.craftable { border-color:rgba(108,225,182,.52); box-shadow:inset 0 0 20px rgba(75,208,158,.07); }.magic-recipe-card > span:nth-child(2) { min-width:0; }.magic-recipe-card small,.magic-recipe-card b,.magic-recipe-card em { display:block; }.magic-recipe-card small { color:var(--muted); font-size:8px; }.magic-recipe-card b { margin:4px 0; font:600 14px var(--serif); }.magic-recipe-card em { overflow:hidden; color:#d6a8f3; font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.magic-recipe-card strong { color:var(--gold); font-size:9px; white-space:nowrap; }.magic-recipe-art,.magic-result-art { position:relative; display:grid; place-items:center; border:1px solid rgba(214,166,255,.35); border-radius:6px; background-color:#182336; background-position:center; background-size:cover; box-shadow:inset 0 0 25px rgba(31,15,46,.68),0 0 18px rgba(164,91,221,.1); }.magic-recipe-art { width:64px; height:64px; color:#efd5ff; font-size:22px; text-shadow:0 2px 8px #000; }.magic-craft-hero { display:grid; grid-template-columns:160px minmax(0,1fr); gap:18px; align-items:center; }.magic-result-art { width:160px; height:150px; }.magic-result-art::after,.magic-recipe-art::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle,transparent 35%,rgba(9,7,18,.65)); }.magic-craft-hero h3 { margin:5px 0; color:#e9c4ff; font:600 25px var(--serif); }.magic-craft-hero p { color:#acbccb; font-size:10px; line-height:1.7; }.magic-abilities { display:grid; gap:6px; }.magic-abilities > div { padding:9px 10px; display:grid; gap:3px; border:1px solid rgba(196,137,236,.25); border-radius:4px; background:rgba(69,34,87,.22); text-align:left; }.magic-abilities b { color:#e4b8ff; font-size:10px; }.magic-abilities span { color:#bccbd8; font-size:9px; line-height:1.55; }.magic-abilities.compact { margin:8px 0; }.craft-stat-change { margin:16px 0; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }.craft-stat-change span { padding:11px; color:var(--muted); font-size:9px; text-align:center; border-right:1px solid var(--line); }.craft-stat-change span:last-child { border:0; }.craft-stat-change b { display:block; margin-top:4px; color:var(--gold); font:600 16px var(--serif); }.craft-section { margin-top:18px; }.craft-section > h3 { margin:0 0 9px; font:500 15px var(--serif); }.craft-section > h3 small { margin-left:8px; color:var(--muted); font:400 9px var(--sans); }.material-choices,.material-requirement > div { display:flex; flex-wrap:wrap; gap:7px; }.material-choice { min-width:125px; padding:8px; display:grid; grid-template-columns:28px 1fr; align-items:center; gap:2px 7px; border:1px solid var(--line); border-radius:5px; background:#101b29; color:var(--text); text-align:left; cursor:pointer; }.material-choice > span { grid-row:1 / 3; font-size:20px; }.material-choice b { font-size:10px; }.material-choice small { color:var(--muted); font-size:7px; }.material-choice.selected { border-color:var(--gold); background:rgba(120,80,28,.25); box-shadow:inset 0 0 16px rgba(237,193,95,.08); }.material-choice.blocked { opacity:.58; }.material-requirement { margin:8px 0; padding:10px; border:1px solid var(--line); border-radius:5px; background:rgba(8,15,24,.52); }.material-requirement header { margin-bottom:8px; display:flex; justify-content:space-between; }.material-requirement header b { font-size:10px; }.material-requirement header small { color:var(--muted); font-size:8px; }.condition-missing,.craft-blocked { padding:10px; color:#ff9da3; border:1px dashed rgba(255,110,118,.35); border-radius:4px; font-size:9px; }.consumption-warning { margin-top:16px; padding:12px; border:1px solid rgba(242,200,111,.28); border-radius:5px; background:rgba(91,64,21,.15); }.consumption-warning.high { border-color:rgba(255,111,118,.48); background:rgba(98,30,38,.2); }.consumption-warning h3 { margin:0 0 7px; color:var(--gold); font-size:11px; }.consumption-warning.high h3,.consumption-warning li.warning { color:#ff9da3; }.consumption-warning ul { margin:0; padding-left:20px; }.consumption-warning li,.consumption-warning p { color:#b8c6d3; font-size:9px; line-height:1.65; }.craft-blocked { margin-top:14px; }.gear-portrait.magic { border-color:rgba(202,143,241,.5); box-shadow:inset 0 0 45px rgba(73,25,100,.28),0 0 25px rgba(164,91,221,.12); }.forge-backdrop { background:radial-gradient(circle,rgba(86,39,111,.44),rgba(2,5,10,.9) 70%); }.magic-recipe-earned .magic-result-art { margin:0 auto 12px; }.magic-forge-result { position:relative; overflow:hidden; border-color:rgba(232,194,255,.55); animation:forge-arrive .9s cubic-bezier(.2,.8,.2,1) both; }.magic-forge-result .modal-body { position:relative; z-index:2; }.magic-result-art.large { width:230px; height:210px; margin:8px auto 15px; animation:gear-awaken 1.15s ease both; }.magic-forge-result h2 { margin:5px 0 14px; color:#f1d0ff; font:600 31px var(--serif); }.forge-rays { position:absolute; width:520px; height:520px; left:50%; top:42%; background:repeating-conic-gradient(from 0deg,rgba(228,192,255,.13) 0 7deg,transparent 7deg 18deg); transform:translate(-50%,-50%); animation:forge-spin 12s linear infinite; }@keyframes forge-arrive { from{opacity:0;transform:scale(.82)} 55%{transform:scale(1.03)} to{opacity:1;transform:none} }@keyframes gear-awaken { 0%{opacity:0;filter:brightness(5) blur(7px);transform:scale(.45) rotate(-5deg)} 55%{opacity:1;filter:brightness(2);transform:scale(1.08)} 100%{filter:none;transform:none} }@keyframes forge-spin { to{transform:translate(-50%,-50%) rotate(360deg)} }
.history-modal { width: min(760px, 95vw); }.history-list { display: grid; gap: 7px; }.history-row { margin: 0; padding: 10px 12px; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 4px; background: rgba(7,13,21,.52); }.history-row > span { padding-top: 2px; color: #71869a; font-size: 8px; letter-spacing: .08em; }.history-row p { margin: 0; color: #dce7f0; font-size: 12px; line-height: 1.6; white-space: normal; }.history-row.good p, .history-row.level p { color: #8ee8ba; }.history-row.warning p { color: #f2c66f; }.history-row.danger p, .history-row.damage p { color: #ff8c92; }.history-row.story p { color: #dfbdff; }.history-row.loot p, .history-row.effect p { color: #89ddff; }.history-row.muted p { color: #8b9baf; }
.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.inventory-item { min-height: 72px; padding: 10px; display: grid; grid-template-columns: 42px 1fr auto; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 5px; background: rgba(9,16,25,.72); cursor: pointer; text-align: left; }.inventory-item:hover { border-color: rgba(119,216,255,.4); }.inventory-item.selected { border-color: var(--gold); box-shadow: inset 0 0 20px rgba(217,167,71,.1); }.item-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 25%, #f8ffff, #5a9bc2 30%, #202b55 70%); font-size: 17px; }.inventory-item b, .inventory-item small { display: block; }.inventory-item b { font-size: 11px; }.inventory-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }.inventory-item em { color: var(--gold); font: normal 700 10px var(--serif); }
.bag-list { display: grid; gap: 10px; }.bag-item { padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: rgba(8, 15, 24, .72); }.bag-item-main { display: flex; align-items: center; gap: 10px; }.bag-item-main h3 { margin: 0; font: 500 14px var(--serif); }.bag-item-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.bag-description { margin: 10px 0; color: #aebdcc; font-size: 10px; line-height: 1.65; }.bag-item-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }.bag-item-actions button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 4px; background: #162538; color: var(--text); cursor: pointer; font-size: 10px; }.bag-item-actions button.primary { border-color: rgba(255,226,157,.8); background: linear-gradient(135deg,#f6d78b,#b98231); color: #171106; }.stone-effects { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.stone-effects > div, .stone-effects.recipe-effect { padding: 8px; border: 1px solid rgba(120, 205, 240, .14); border-radius: 4px; background: rgba(23, 40, 57, .58); }.stone-effects span, .stone-effects b { display: block; }.stone-effects span { margin-bottom: 4px; color: var(--gold); font-size: 8px; letter-spacing: .08em; }.stone-effects b { color: #bdcedd; font-size: 9px; font-weight: 400; line-height: 1.55; }.stone-effects.recipe-effect { display: block; }
.item-detail { margin-top: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: rgba(7,12,19,.6); }.item-detail h3 { margin: 0 0 7px; font: 500 17px var(--serif); }.item-detail p { color: #aebdcc; font-size: 11px; line-height: 1.7; }.detail-actions { display: flex; flex-wrap: wrap; gap: 7px; }.detail-actions button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: #162538; cursor: pointer; font-size: 10px; }.detail-actions button.primary { color: #171106; background: linear-gradient(135deg,#f6d78b,#b98231); }
.quick-item { grid-template-columns:minmax(0,1fr); }.quick-item-info { width:100%; grid-template-columns:27px minmax(0,1fr) auto; }.quick-item-info em { color:var(--gold); font-size:8px; font-style:normal; white-space:nowrap; }
.item-popup { width:min(560px,94vw); }.item-popup-hero { padding:6px 3px 18px; display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:15px; border-bottom:1px solid var(--line); }.item-popup-icon { width:72px; height:72px; display:grid; place-items:center; border:1px solid rgba(242,200,111,.3); border-radius:50%; background:radial-gradient(circle,rgba(61,105,137,.45),rgba(12,21,32,.85)); box-shadow:0 0 24px rgba(94,190,230,.1); font-size:35px; }.item-popup-hero small { color:var(--gold); font-size:9px; letter-spacing:.12em; }.item-popup-hero h3 { margin:5px 0; font:600 23px var(--serif); }.item-popup-hero p { margin:0; color:var(--muted); font-size:10px; }.item-popup-description { margin-top:15px; padding:13px; border:1px solid rgba(120,205,240,.14); border-radius:5px; background:rgba(7,12,19,.55); }.item-popup-description h3 { margin:0 0 6px; color:var(--gold); font-size:10px; letter-spacing:.08em; }.item-popup-description p { margin:0; color:#bdcedd; font-size:11px; line-height:1.75; }.item-popup-note { margin:13px 2px 0; color:#8296a8; font-size:9px; }.item-popup-actions { flex-wrap:wrap; }.item-popup-actions button { border:1px solid var(--line); border-radius:4px; background:#162538; color:var(--text); cursor:pointer; }.item-popup-actions button.primary { border-color:rgba(255,226,157,.8); background:linear-gradient(135deg,#f6d78b,#b98231); color:#171106; }
.pixel-item-sprite { width:100%; height:100%; display:block; background-repeat:no-repeat; image-rendering:pixelated; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }.quick-item-info > span:first-child .pixel-item-sprite { width:26px; height:26px; }.item-icon .pixel-item-sprite { width:36px; height:36px; }.item-popup-icon .pixel-item-sprite { width:58px; height:58px; }.material-stone-icon { width:28px; height:28px; display:block; }
.unarmed-icon { width:100%; height:100%; display:grid; place-items:center; color:#8da0ae; font:700 24px/1 var(--serif); }
.gear-icon { overflow:hidden; padding:3px; border-radius:7px; background:radial-gradient(circle,rgba(75,126,161,.34),rgba(10,18,29,.85)); }.gear-icon .pixel-item-sprite { width:32px; height:32px; }.gear-portrait { display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(66,119,151,.28),rgba(7,13,22,.95) 68%); }.gear-portrait .pixel-item-sprite { width:170px; height:170px; }.gear-description { margin:0 0 10px; color:#aebdcc; font-size:11px; line-height:1.65; }.magic-recipe-art .pixel-item-sprite { width:54px; height:54px; }
.gear-layout { display: grid; grid-template-columns: 190px 1fr; gap: 18px; }.gear-portrait { min-height: 260px; border: 1px solid var(--line); border-radius: 6px; background-position: center; background-size: cover; }.auto-socket-panel { margin:0 0 9px; padding:9px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(242,200,111,.32); border-radius:5px; background:linear-gradient(135deg,rgba(117,85,31,.16),rgba(29,54,72,.2)); }.auto-socket-panel span,.auto-socket-panel b,.auto-socket-panel small { display:block; }.auto-socket-panel b { color:var(--gold); font-size:11px; }.auto-socket-panel small { margin-top:2px; color:var(--muted); font-size:8px; }.auto-socket-panel button { flex:0 0 auto; padding:8px 11px; font-size:10px; }.auto-socket-panel button:disabled { opacity:.4; cursor:not-allowed; }.slot-list { display: grid; gap: 7px; }.gear-slot { width: 100%; padding: 11px; display: flex; justify-content: space-between; align-items: center; border: 1px dashed rgba(176,206,232,.24); border-radius: 5px; background: transparent; color: var(--muted); text-align: left; }.gear-slot.filled { border-style: solid; color: var(--text); background: rgba(28,45,64,.5); cursor: pointer; }.gear-slot.empty { cursor: pointer; }.gear-slot.empty:hover, .gear-slot.empty.selected { border-color: var(--gold); color: var(--gold); background: rgba(135, 98, 35, .16); }.gear-slot b { color: var(--cyan); font-size: 11px; }.socket-guide { margin-top: 16px; padding: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px dashed var(--line); border-radius: 5px; color: var(--muted); text-align: center; }.socket-guide > span { color: var(--gold); font-size: 25px; }.socket-guide p { margin: 0; font-size: 10px; line-height: 1.7; }.socket-selection-title { margin: 18px 0 9px; display: flex; align-items: end; justify-content: space-between; }.socket-selection-title h3 { margin: 0; font: 500 16px var(--serif); }.socket-selection-title button { padding: 6px 10px; font-size: 9px; }.socket-stone-list { display: grid; gap: 7px; }.socket-stone { width: 100%; padding: 9px; display: grid; grid-template-columns: 40px 100px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 5px; background: rgba(8,15,24,.74); color: var(--text); text-align: left; cursor: pointer; }.socket-stone:hover { border-color: var(--gold); background: rgba(43, 53, 61,.84); }.socket-name b, .socket-name small, .socket-preview b, .socket-preview small { display: block; }.socket-name b { color: var(--cyan); font-size: 11px; }.socket-name small { margin-top: 3px; color: var(--muted); font-size: 8px; }.socket-preview { padding-left: 9px; display: grid; gap: 3px; border-left: 1px solid var(--line); }.socket-preview b { font-size: 9px; font-weight: 500; }.socket-preview small { color: var(--gold); font-size: 8px; }.socket-stone em { color: var(--gold); font-size: 8px; font-style: normal; white-space: nowrap; }
.fusion-preview { margin: 12px 0; padding: 14px; border: 1px solid rgba(242,200,111,.3); border-radius: 5px; background: radial-gradient(circle at 50% 0, rgba(99,184,224,.12), transparent 60%); text-align: center; }.fusion-preview strong { display: block; margin-top: 6px; color: var(--gold); font: 500 18px var(--serif); }.recipe-options { display: grid; gap: 6px; }.recipe-option { padding: 10px; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: #101b2a; cursor: pointer; }.recipe-option.selected { border-color: var(--gold); }.recipe-option span { font-size: 20px; }.recipe-option b, .recipe-option small { display: block; }.recipe-option small { color: var(--muted); }
.codex-tabs { display: flex; gap: 5px; margin-bottom: 14px; }.codex-tabs button { padding: 7px 12px; border: 1px solid var(--line); background: transparent; cursor: pointer; }.codex-tabs button.active { color: var(--gold); border-color: var(--gold); }.codex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.codex-card { min-height: 150px; padding: 10px; display: flex; flex-direction: column; justify-content: end; border: 1px solid var(--line); border-radius: 5px; background: #111a26 center/cover; overflow: hidden; position: relative; }.codex-card::after { content:""; position:absolute; inset:25% 0 0; background:linear-gradient(transparent,#08101a); }.codex-card > * { position:relative; z-index:1; }.codex-card.locked { filter: grayscale(1); }.codex-card h3 { margin: 0; font: 500 14px var(--serif); }.codex-card p { margin: 5px 0 0; color: #acbac9; font-size: 9px; line-height: 1.5; }
.guide-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.guide-page { padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: #101b29; }.guide-page .big-icon { color: var(--gold); font-size: 30px; }.guide-page h3 { font: 500 16px var(--serif); }.guide-page p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.settings-list { display: grid; gap: 10px; }.setting-row { padding: 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.setting-row input[type="range"],.setting-row input[type="checkbox"] { accent-color: var(--gold); }.setting-row select { min-width:130px; padding:7px 9px; border:1px solid var(--line); border-radius:4px; background:#0b1420; color:var(--text); }.danger-button { padding: 8px 13px; border: 1px solid #873f48; border-radius: 4px; background: rgba(126,39,49,.3); color: #ff9da3; cursor: pointer; }

/* Item readability, sorting feedback, and ground exchange */
.quick-inventory { grid-auto-rows:minmax(52px,max-content); }.quick-item { min-height:52px; }.quick-item-info { padding:8px; grid-template-columns:34px minmax(0,1fr) auto; gap:8px; }.quick-item-info > span:first-child { width:32px; height:32px; }.quick-item-info > span:first-child .pixel-item-sprite { width:32px; height:32px; }.quick-item-info b { font-size:12px; line-height:1.35; }.quick-item-info small { font-size:10px; }.quick-item-info em { font-size:10px; }.gear-card b { max-width:125px; font-size:12px; }.gear-card small { font-size:9px; }.gear-card em { font-size:11px; }.rail-heading,.rail-heading small { font-size:10px; }.new-item-badge { display:inline-block !important; margin-left:7px; padding:2px 5px; border-radius:9px; background:#dc5b46; color:#fff !important; font:800 8px/1.2 var(--sans) !important; letter-spacing:.05em; vertical-align:2px; box-shadow:0 0 10px rgba(255,101,67,.32); }.inventory-item b { font-size:14px; }.inventory-item small { font-size:11px; }.bag-item-main h3 { font-size:18px; }.bag-item-main small { font-size:12px; }.bag-description { font-size:13px; }.bag-item-actions button { padding:9px 13px; font-size:12px; }.stone-effects span { font-size:11px; }.stone-effects b { font-size:12px; }.item-popup-hero small { font-size:11px; }.item-popup-hero h3 { font-size:26px; }.item-popup-hero p { font-size:13px; line-height:1.65; }.item-popup-description h3 { font-size:13px; }.item-popup-description p { font-size:13px; }.item-popup-note { font-size:11px; }.item-popup-actions button { font-size:12px; }.socket-name b { font-size:14px; }.socket-name small { font-size:11px; }.socket-preview b { font-size:12px; }.socket-preview small,.socket-stone em { font-size:10px; }.material-choice b { font-size:12px; }.material-choice small,.material-requirement header small { font-size:10px; }.material-requirement header b { font-size:12px; }.stone-row b { font-size:13px; }.stone-row small { font-size:11px; }.ground-exchange-target { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:14px; padding-bottom:15px; border-bottom:1px solid var(--line); }.ground-exchange-target small { color:var(--gold); font-size:11px; }.ground-exchange-target h3 { margin:4px 0; font:600 21px var(--serif); }.ground-exchange-target p { margin:0; color:var(--muted); font-size:12px; }.exchange-choice-list { max-height:48vh; margin-top:12px; display:grid; gap:7px; overflow-y:auto; }.exchange-choice { width:100%; padding:10px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:5px; background:#101b29; color:var(--text); text-align:left; cursor:pointer; }.exchange-choice:hover { border-color:var(--gold); }.exchange-choice b,.exchange-choice small { display:block; }.exchange-choice b { font-size:14px; }.exchange-choice small { margin-top:3px; color:var(--muted); font-size:11px; }.exchange-choice em { color:var(--gold); font-size:11px; font-style:normal; }
.stack-count { display:inline-block !important; margin-left:7px; color:#ffe08a !important; font:800 .82em/1 var(--sans) !important; letter-spacing:.02em; white-space:nowrap; vertical-align:1px; }

/* Experience, level-up feedback, and scrollable two-line system messages */
.bar.exp i { background:linear-gradient(90deg,#5a79d7,#8bdcff); box-shadow:0 0 8px rgba(113,197,255,.4); }.level-orb.level-up { animation:level-orb-up 1.05s cubic-bezier(.2,.8,.2,1); }.message-current { height:50px; display:flex; flex-direction:column; gap:2px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#3b5368 #0b121c; }.message-current::-webkit-scrollbar { width:6px; }.message-current::-webkit-scrollbar-track { background:#0b121c; }.message-current::-webkit-scrollbar-thumb { border-radius:6px; background:#3b5368; }.message-current:focus-visible { outline:1px solid rgba(120,220,255,.5); outline-offset:3px; }.message-current > span { flex:0 0 24px; line-height:24px; }.message-current > span:not(:last-child) { opacity:.7; font-size:13px; }.message-current > span:last-child { opacity:1; }@keyframes level-orb-up { 0%{transform:scale(1)} 28%{border-color:#fff1a8;box-shadow:0 0 34px rgba(255,223,111,.9);filter:brightness(1.8);transform:scale(1.22)} 62%{transform:scale(.96)} 100%{transform:none} }

/* Material fusion and short zero-turn feedback */
.fusion-result-backdrop { background:radial-gradient(circle,rgba(88,50,117,.48),rgba(2,5,10,.92) 66%); }.fusion-result { --fusion-color:#dca8ff; position:relative; width:min(480px,92vw); padding:42px 28px 30px; overflow:hidden; border:1px solid color-mix(in srgb,var(--fusion-color) 55%,transparent); border-radius:8px; background:rgba(10,17,27,.95); box-shadow:0 0 70px color-mix(in srgb,var(--fusion-color) 20%,transparent); text-align:center; animation:fusion-pop .44s cubic-bezier(.2,.9,.25,1) both; }.fusion-result h2 { margin:5px 0 10px; color:var(--fusion-color); font:600 27px var(--serif); }.fusion-result > small,.fusion-result > p:not(.eyebrow) { color:#b9c9d7; }.fusion-gem { position:relative; z-index:2; display:grid; place-items:center; width:108px; height:108px; margin:8px auto 14px; filter:drop-shadow(0 0 14px var(--fusion-color)); animation:fusion-gem .55s ease both; }.fusion-gem .pixel-item-sprite { width:100%; height:100%; image-rendering:pixelated; }.fusion-rings { position:absolute; width:270px; height:270px; left:50%; top:43%; border:2px solid color-mix(in srgb,var(--fusion-color) 60%,transparent); border-radius:50%; transform:translate(-50%,-50%); animation:fusion-ring .7s ease-out both; }.fusion-rings::before,.fusion-rings::after { content:""; position:absolute; inset:28px; border:1px dashed var(--fusion-color); border-radius:50%; animation:forge-spin 8s linear infinite; }.fusion-rings::after { inset:63px; animation-direction:reverse; }.fusion-result .primary { margin-top:18px; }.fusion-result-backdrop.level-three::after { content:"魔石 → クリスタル　砕く効果強化"; position:fixed; top:8vh; left:0; right:0; color:#fff3b4; font:600 clamp(14px,2.4vw,22px) var(--serif); letter-spacing:.12em; text-align:center; text-shadow:0 0 18px #fff,0 0 30px var(--gold); animation:level-three-title .9s ease both; }.crystal-awakening-note,.crystal-power-note { position:relative; z-index:2; display:grid; gap:4px; margin:14px 0 4px; padding:11px 13px; border:1px solid rgba(255,222,111,.55); border-radius:5px; background:linear-gradient(135deg,rgba(255,211,87,.14),rgba(111,214,255,.08)); color:#fff0a7; box-shadow:inset 0 0 18px rgba(255,218,99,.07); }.crystal-awakening-note strong,.crystal-power-note strong { font:600 14px var(--serif); letter-spacing:.08em; }.crystal-awakening-note span,.crystal-power-note span { color:#d9e9ef; font-size:11px; }.stone-effects.crystal > div:first-child { border-color:rgba(255,220,105,.6); background:rgba(255,206,69,.09); }.fusion-preview.crystal { border-color:rgba(255,218,93,.55); box-shadow:inset 0 0 22px rgba(255,218,93,.08); }.fusion-preview > span { display:block; margin-top:7px; color:#ffe385; font-size:10px; }.crush-action { box-shadow:0 0 20px rgba(255,122,77,.18); }@keyframes fusion-pop { from{opacity:0;transform:scale(.68) rotate(-2deg)} 65%{transform:scale(1.04)} to{opacity:1;transform:none} }@keyframes fusion-gem { from{opacity:0;transform:scale(.2) rotate(-35deg);filter:brightness(5) blur(5px)} to{opacity:1;transform:none} }@keyframes fusion-ring { from{opacity:1;transform:translate(-50%,-50%) scale(.18)} to{opacity:0;transform:translate(-50%,-50%) scale(1.5)} }@keyframes level-three-title { from{opacity:0;transform:translateY(15px) scale(.85)} 35%,75%{opacity:1;transform:none} to{opacity:0} }

/* Result */
.result-screen { display: grid; place-items: center; isolation: isolate; overflow: hidden; }.result-art, .result-vignette { position: absolute; inset: 0; }.result-art { z-index: -2; background: url("assets/scenes/camp.webp") center/cover; animation:result-light 1s ease both; }.result-screen.defeat .result-art { filter: grayscale(.7) brightness(.48); animation:defeat-darken 1.1s ease both; }.result-vignette { z-index:-1; background:radial-gradient(circle,rgba(7,12,20,.2),#070b12 85%); }.result-card { width: min(650px,92vw); padding: 34px; border: 1px solid var(--line); border-radius: 7px; background: rgba(8,14,23,.88); backdrop-filter:blur(14px); text-align:center; }.result-card.return-arrival { animation:return-arrival .75s ease both; }.result-card.defeat-arrival { animation:defeat-arrival 1.05s ease both; }.result-card h1 { margin: 3px 0 8px; color:var(--gold); font:500 clamp(34px,7vw,58px) var(--serif); letter-spacing:.16em; }.defeat .result-card h1 { color:#bdc5cf; }.result-lead { color:#b8c6d5; line-height:1.8; }.result-stats { margin:24px 0; display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }.result-stats div { padding:16px 8px; border-right:1px solid var(--line); }.result-stats div:last-child { border:0; }.result-stats small,.result-stats b { display:block; }.result-stats small { color:var(--muted); font-size:9px; }.result-stats b { margin-top:5px; font:600 21px var(--serif); }.result-items { margin:-10px 0 22px; padding:12px; border:1px solid var(--line); border-radius:5px; background:rgba(4,9,15,.55); }.result-items > small { display:block; margin-bottom:8px; color:var(--muted); font-size:9px; }.result-items > div { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }.result-items span { padding:6px 9px; border-radius:20px; background:#152536; color:#cce8f4; font-size:10px; }.result-items.returned span { color:#aaf2cd; box-shadow:inset 0 0 12px rgba(89,225,168,.08); }.result-items.lost span { color:#d38a91; background:#24161c; }@keyframes result-light { from{filter:brightness(2);transform:scale(1.06)} to{filter:none;transform:none} }@keyframes defeat-darken { from{filter:grayscale(0) brightness(1.8)} 18%{filter:grayscale(.2) brightness(.25)} to{filter:grayscale(.7) brightness(.48)} }@keyframes return-arrival { from{opacity:0;transform:translateY(20px);box-shadow:0 0 90px rgba(116,223,255,.5)} to{opacity:1;transform:none} }@keyframes defeat-arrival { 0%,32%{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,20px); padding:9px 14px; pointer-events:none; border:1px solid var(--line); border-radius:4px; background:#101a27; opacity:0; transition:.25s; font-size:11px; }.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 900px) {
  .hub-screen { grid-template-columns: 1fr; grid-template-rows:auto 220px auto auto; }.stash-panel { border-left:0; border-top:1px solid var(--line); }.stash-list { max-height:none; grid-template-columns:repeat(2,1fr); }.dungeon-list { grid-template-columns:1fr; }.dungeon-card { min-height:190px; }
  .game-screen { grid-template-columns:1fr; grid-template-rows:108px minmax(0,1fr) 58px 96px 154px; }.game-header { height:108px; grid-template-columns:1fr auto; grid-template-rows:43px 45px; gap:3px 8px; padding:7px 10px; }.status-cluster { grid-column:1 / -1; grid-row:2; display:flex; gap:8px; }.level-orb { width:36px; height:36px; flex:0 0 36px; }.level-orb b { font-size:15px; }.vital-bars { width:100%; grid-template-columns:1fr 1fr; gap:3px 10px; }.bar-row { grid-template-columns:25px minmax(42px,1fr) 42px; gap:4px; }.bar-row.exp-row { grid-column:1 / -1; }.inventory-toggle { width:86px; }.equipment-rail { z-index:4; grid-column:1; grid-row:4; padding:7px; display:block; border-left:0; border-top:1px solid var(--line); }.equipment-fixed { grid-template-columns:1fr 1fr; gap:8px; }.equipment-fixed .rail-heading, .quick-pack { display:none; }.gear-card { padding:6px; }.gear-card strong { display:none; }.message-log { grid-column:1; grid-row:3; padding:6px 10px; display:flex; gap:8px; }.history-button { padding:7px 9px; font-size:9px; }.message-current { height:38px; gap:2px; }.message-current > span,.message-current > span:not(:last-child) { flex-basis:18px; font-size:11px; line-height:18px; }.message-current > span::before { margin-right:7px; }.mobile-controls { grid-column:1; grid-row:5; padding:8px max(30px,calc(50% - 145px)); border-left:0; }.minimap-card { top:116px; right:8px; width:128px; padding:5px; }.mini-head { display:none; } #minimap { height:72px; }.map-stage { grid-row:2; }
}
@media (max-width: 620px) {
  .title-content { padding-top:28vh; }.title-content h1 span { font-size:45px; }.title-content h1 small { letter-spacing:.35em; }.title-copy { font-size:13px; }
  .topbar { padding:10px 14px; }.hub-hero-art { width:140px; margin-left:-10px; }.hub-hero-copy { padding:0 10px 24px; font-size:12px; }.hub-main { padding:20px 13px; }.stash-panel { padding:20px 13px 50px; }.stash-list { grid-template-columns:1fr; }.section-heading h2 { font-size:19px; }
  .inventory-grid, .stone-effects { grid-template-columns:1fr; }.gear-layout { grid-template-columns:1fr; }.gear-portrait { min-height:150px; }.guide-pages { grid-template-columns:1fr; }.codex-grid { grid-template-columns:repeat(2,1fr); }.result-card { padding:24px 15px; }.result-stats { grid-template-columns:repeat(2,1fr); }.result-stats div:nth-child(2) { border-right:0; }.result-stats div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .dungeon-title p { font-size:13px; }.dungeon-title strong { font-size:8px; }.inventory-toggle { width:78px; padding:7px; }.gear-card b { max-width:84px; }.modal-backdrop { padding:8px; }.modal-body { padding:13px; }.history-row { grid-template-columns:58px minmax(0,1fr); gap:7px; padding:9px; }.history-row p { font-size:11px; }.socket-stone { grid-template-columns:40px minmax(0,1fr) auto; }.socket-preview { grid-column:1 / -1; padding:8px 0 0; border-left:0; border-top:1px solid var(--line); }.magic-recipe-list { grid-template-columns:1fr; }.magic-recipe-card { grid-template-columns:52px minmax(0,1fr) auto; }.magic-recipe-art { width:52px; height:52px; }.magic-craft-hero { grid-template-columns:1fr; text-align:center; }.magic-result-art { width:100%; height:140px; }.magic-abilities { text-align:left; }.craft-stat-change span { padding:8px 3px; }.craft-section > h3 small { display:block; margin:4px 0 0; }.material-choice { min-width:calc(50% - 4px); }.magic-result-art.large { width:100%; height:190px; }
  .ground-item-panel { bottom:8px; padding:8px; align-items:stretch; flex-direction:column; gap:7px; }.ground-item-copy { grid-template-columns:38px minmax(0,1fr); }.ground-item-icon { width:36px; height:36px; }.ground-item-copy b { font-size:14px; }.ground-item-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.ground-item-actions button { padding:7px 4px; font-size:10px; white-space:normal; }.exchange-choice { grid-template-columns:40px minmax(0,1fr); }.exchange-choice em { grid-column:2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Three-tier magic-stone presentation */
.fusion-result-backdrop.rank-up::after { position:fixed; top:8vh; left:0; right:0; color:#fff3b4; font:600 clamp(14px,2.4vw,22px) var(--serif); letter-spacing:.12em; text-align:center; text-shadow:0 0 18px #fff,0 0 30px var(--gold); animation:rank-awakening-title 1.05s ease both; }
.fusion-result-backdrop.rank-up.crystal::after { content:"魔石 → クリスタル　力が開花した"; }
.fusion-result-backdrop.rank-up.radiant::after { content:"クリスタル → 宝玉　最上位へ昇華"; color:#fffbd0; text-shadow:0 0 18px #fff,0 0 34px #ffd86b,0 0 48px #9be8ff; }
.fusion-result-backdrop.radiant .fusion-result { --fusion-color:#fff09a; border-width:2px; background:radial-gradient(circle at 50% 32%,rgba(255,229,113,.13),rgba(10,17,27,.97) 55%); box-shadow:0 0 90px rgba(255,220,100,.28),inset 0 0 36px rgba(139,225,255,.08); }
.fusion-result-backdrop.radiant .fusion-gem { width:126px; height:126px; filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px #ffd765); }
.crystal-power-note.radiant { border-color:#fff3a5; background:linear-gradient(135deg,rgba(255,220,90,.22),rgba(111,214,255,.13)); box-shadow:0 0 22px rgba(255,220,90,.13),inset 0 0 20px rgba(255,255,255,.06); }
.stone-effects.radiant > div:first-child { border-color:#fff0a0; background:linear-gradient(135deg,rgba(255,220,85,.2),rgba(101,215,255,.1)); box-shadow:0 0 16px rgba(255,221,91,.12); }
.fusion-preview.radiant { border-color:#fff09b; background:radial-gradient(circle at 50% 0,rgba(255,224,102,.2),rgba(105,209,255,.07) 50%,transparent 72%); box-shadow:inset 0 0 28px rgba(255,225,113,.12),0 0 20px rgba(255,220,90,.08); }
.inventory-item.incompatible { opacity:.38; filter:grayscale(.75); cursor:not-allowed; }
.pixel-item-sprite.rank-crystal { filter:drop-shadow(0 0 5px rgba(126,220,255,.72)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.pixel-item-sprite.unidentified-crystal-sprite { filter:grayscale(.72) saturate(.5) brightness(1.2) hue-rotate(12deg) drop-shadow(0 0 6px rgba(203,235,255,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.pixel-item-sprite.rank-radiant { transform:scale(1.08); filter:saturate(1.15) brightness(1.08) drop-shadow(0 0 6px rgba(255,246,178,.95)) drop-shadow(0 0 11px rgba(112,216,255,.58)); }
.item-icon:has(.rank-radiant),.item-popup-icon:has(.rank-radiant),.ground-item-icon:has(.rank-radiant) { border-color:rgba(255,229,126,.8); background:radial-gradient(circle,rgba(255,226,112,.19),rgba(67,162,205,.12) 50%,rgba(8,15,25,.88)); box-shadow:inset 0 0 10px rgba(255,239,168,.12),0 0 9px rgba(255,218,99,.14); }
.unidentified-crystal { width:100%; height:100%; display:grid; place-items:center; border-radius:45% 45% 52% 52%; background:radial-gradient(circle at 42% 32%,#fff,#88e8ff 12%,#4857b9 48%,#201748 72%); color:#fff7ba; font:800 22px var(--serif); text-shadow:0 0 7px #fff; box-shadow:0 0 8px rgba(116,224,255,.75),inset 0 0 8px rgba(255,255,255,.55); clip-path:polygon(50% 0,82% 22%,100% 61%,68% 100%,27% 91%,0 52%,18% 17%); }
@keyframes rank-awakening-title { from{opacity:0;transform:translateY(15px) scale(.85)} 35%,75%{opacity:1;transform:none} to{opacity:0} }

/* Arcane book reading and result presentation */
.book-read-action { border-color:rgba(188,139,255,.72) !important; background:linear-gradient(135deg,#d8b3ff,#7d4cae) !important; color:#160d20 !important; }
.book-reading-backdrop,.book-result-backdrop { background:radial-gradient(circle, color-mix(in srgb,var(--book-accent) 24%,transparent),rgba(2,5,10,.94) 68%); }
.book-reading { width:min(460px,92vw); padding:34px 22px; color:#e9eff7; text-align:center; }.book-reading p { margin:16px 0 5px; color:var(--book-accent); font-size:9px; letter-spacing:.2em; }.book-reading h2 { margin:0; font:600 25px var(--serif); }.book-opening { position:relative; width:142px; height:96px; margin:0 auto; perspective:500px; filter:drop-shadow(0 0 18px var(--book-accent)); }.book-opening span { position:absolute; top:8px; width:70px; height:80px; border:2px solid var(--book-accent); background:linear-gradient(135deg,#f8ebc5,#b8a578); box-shadow:inset 0 0 15px rgba(64,37,92,.3); }.book-opening span:first-child { right:50%; transform-origin:right; animation:book-open-left .55s ease both; }.book-opening span:last-child { left:50%; transform-origin:left; animation:book-open-right .55s ease both; }.book-rune-ring { position:absolute; left:50%; margin:26px 0 0 -72px; width:144px; height:144px; display:grid; place-items:center; border:1px dashed var(--book-accent); border-radius:50%; color:#fff4bb; font-size:24px; animation:forge-spin 5s linear infinite; }.floating-letters { margin-top:15px; color:#fff1b1; font:600 15px var(--serif); letter-spacing:.22em; text-shadow:0 0 12px var(--book-accent); animation:book-letters .7s ease both; }.book-stone-list { max-height:52vh; display:grid; gap:7px; overflow-y:auto; }.book-stone-choice { width:100%; padding:10px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:5px; background:#101b29; color:var(--text); text-align:left; cursor:pointer; }.book-stone-choice:hover { border-color:var(--gold); }.book-stone-choice b,.book-stone-choice small { display:block; }.book-stone-choice small { margin-top:3px; color:var(--muted); }.book-stone-choice em { color:var(--gold); font-size:10px; font-style:normal; }.book-select-description { color:#bdcbd7; line-height:1.7; }.book-result { position:relative; overflow:hidden; text-align:center; border-color:color-mix(in srgb,var(--book-accent) 65%,transparent); box-shadow:0 0 65px color-mix(in srgb,var(--book-accent) 20%,transparent); }.book-result .modal-body { position:relative; z-index:2; }.book-result h2 { margin:12px 0 7px; color:var(--book-accent); font:600 27px var(--serif); }.book-result .modal-body>p:last-child { color:#d4e0e8; }.book-result-rays { position:absolute; width:480px; height:480px; left:50%; top:42%; background:repeating-conic-gradient(color-mix(in srgb,var(--book-accent) 14%,transparent) 0 7deg,transparent 7deg 20deg); transform:translate(-50%,-50%); animation:forge-spin 14s linear infinite; }.book-reinforce-gear { display:grid; place-items:center; gap:7px; }.book-reinforce-gear .gear-icon { width:90px; height:90px; display:grid; place-items:center; border:1px solid var(--book-accent); box-shadow:0 0 28px color-mix(in srgb,var(--book-accent) 35%,transparent); }.book-reinforce-gear .gear-icon .pixel-item-sprite { width:76px; height:76px; }.book-reinforce-gear strong { font:600 19px var(--serif); }.book-reinforce-gear div { display:flex; align-items:center; gap:13px; }.book-reinforce-gear b { color:var(--gold); font:700 25px var(--serif); }.book-reinforce-gear i { color:var(--book-accent); font-style:normal; }.book-effect-sigil { width:92px; height:92px; margin:0 auto; display:grid; place-items:center; border:2px solid var(--book-accent); border-radius:50%; color:#fff4bd; font:700 32px var(--serif); box-shadow:0 0 30px color-mix(in srgb,var(--book-accent) 38%,transparent),inset 0 0 22px color-mix(in srgb,var(--book-accent) 22%,transparent); animation:fusion-gem .55s ease both; }@keyframes book-open-left { from{transform:rotateY(0)} to{transform:rotateY(-18deg) rotateZ(-4deg)} }@keyframes book-open-right { from{transform:rotateY(0)} to{transform:rotateY(18deg) rotateZ(4deg)} }@keyframes book-letters { from{opacity:0;transform:translateY(14px);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }