:root {
  color-scheme: dark;
  --ink:#090d0b;
  --ink-2:#101612;
  --ink-3:#182019;
  --panel:rgba(12,17,14,.88);
  --panel-solid:#111813;
  --panel-soft:rgba(26,34,27,.78);
  --line:rgba(214,191,126,.18);
  --line-strong:rgba(226,196,112,.42);
  --gold:#d9bc69;
  --gold-2:#f0d990;
  --brass:#9c7942;
  --text:#e9e4d2;
  --muted:#979d8d;
  --dim:#687064;
  --green:#69b77a;
  --green-soft:#9bd1a5;
  --red:#d55f55;
  --red-soft:#eca099;
  --blue:#62aacf;
  --mana:#598fcf;
  --stamina:#c7a64f;
  --shadow:0 18px 54px rgba(0,0,0,.38), 0 2px 10px rgba(0,0,0,.35);
  --inset:inset 0 1px rgba(255,255,255,.035), inset 0 -1px rgba(0,0,0,.35);
  --radius:14px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

* { box-sizing:border-box; }
html, body { width:100%; height:100%; height:100dvh; margin:0; overflow:hidden; overscroll-behavior:none; background:#090d0b; color:var(--text); font-family:Inter,system-ui,sans-serif; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
[hidden] { display:none !important; }
button, input, select { font:inherit; }
button { color:inherit; }
.hidden { display:none !important; }
[hidden] { display:none !important; }
#app, #game-canvas { position:fixed; inset:0; width:100%; height:100%; height:100dvh; }
#game-canvas { display:block; outline:0; touch-action:none; }

.vignette { position:fixed; inset:0; pointer-events:none; z-index:2; background:radial-gradient(circle at 50% 46%,transparent 42%,rgba(3,5,4,.08) 66%,rgba(3,5,4,.43) 100%); }
.film-grain { position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.12; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }

.ui-surface {
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(20,27,22,.93),rgba(8,12,10,.91));
  box-shadow:var(--shadow),var(--inset);
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
}
.ui-surface::before { content:""; position:absolute; inset:1px; border-radius:inherit; border:1px solid rgba(255,255,255,.025); pointer-events:none; }
button {
  border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  padding:8px 10px; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease,color .16s ease,opacity .16s ease;
}
button:hover { border-color:var(--line-strong); background:linear-gradient(180deg,rgba(222,194,111,.13),rgba(255,255,255,.018)); }
button:active { transform:translateY(1px); }
button.active, button.accent { border-color:rgba(224,191,99,.48); background:linear-gradient(180deg,rgba(177,137,53,.26),rgba(96,70,25,.13)); color:var(--gold-2); }
button.danger { color:var(--red-soft); border-color:rgba(211,92,82,.24); }
button.danger:hover { border-color:rgba(211,92,82,.5); background:rgba(124,39,34,.2); }
kbd { display:inline-grid; place-content:center; min-width:22px; height:19px; padding:0 5px; border:1px solid rgba(229,213,169,.25); border-bottom-color:rgba(229,213,169,.38); border-radius:5px; background:rgba(0,0,0,.25); color:#d8d1bb; font:600 9px/1 'IBM Plex Mono',monospace; box-shadow:inset 0 -1px rgba(0,0,0,.45); }
input, select { outline:0; }
input[type="text"],input[type="number"],input[type="search"],select {
  width:100%; border:1px solid var(--line); border-radius:8px; background:rgba(0,0,0,.25); color:var(--text); padding:9px 10px; font-size:10px;
}
input:focus,select:focus { border-color:rgba(224,191,99,.52); box-shadow:0 0 0 2px rgba(224,191,99,.08); }
input[type="range"] { width:100%; accent-color:var(--gold); }
input[type="checkbox"] { appearance:none; width:38px; height:20px; border-radius:20px; border:1px solid var(--line); background:rgba(0,0,0,.35); position:relative; cursor:pointer; }
input[type="checkbox"]::after { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; border-radius:50%; background:#80877d; transition:.18s ease; }
input[type="checkbox"]:checked { background:rgba(96,151,104,.32); border-color:rgba(105,183,122,.45); }
input[type="checkbox"]:checked::after { left:20px; background:var(--green-soft); }

#loading-screen { position:fixed; z-index:500; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 43%,#243427 0,#111a14 34%,#070a08 76%); transition:opacity .8s ease,visibility .8s ease; }
#loading-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.8%,rgba(221,190,104,.06) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(221,190,104,.04) 50%,transparent 50.2%); background-size:96px 96px; opacity:.35; }
#loading-screen.done { opacity:0; visibility:hidden; pointer-events:none; }
.loading-sigil { position:relative; width:100px; height:100px; display:grid; place-items:center; margin-bottom:20px; }
.loading-sigil::before,.loading-sigil::after,.loading-sigil i { content:""; position:absolute; inset:0; border:1px solid rgba(224,191,99,.35); transform:rotate(45deg); animation:sigil 5s linear infinite; }
.loading-sigil::after { inset:12px; animation-direction:reverse; animation-duration:3.8s; }
.loading-sigil i { inset:26px; border-color:rgba(224,191,99,.2); animation-duration:2.7s; }
.loading-sigil span { position:relative; z-index:1; font:600 46px Cinzel,serif; color:var(--gold-2); text-shadow:0 0 30px rgba(218,186,99,.3); }
@keyframes sigil { to { transform:rotate(405deg); } }
#loading-screen .eyebrow { position:relative; z-index:1; color:var(--gold); font:600 9px 'IBM Plex Mono',monospace; letter-spacing:.28em; }
#loading-screen h1 { position:relative; z-index:1; margin:8px 0 3px; font:600 40px/1 Cinzel,serif; letter-spacing:.16em; }
#loading-screen > p:not(.eyebrow) { position:relative; z-index:1; margin:10px 0 20px; color:var(--muted); font-size:11px; }
#loading-screen > small { position:relative; z-index:1; margin-top:12px; color:#6e776d; font:600 8px 'IBM Plex Mono',monospace; letter-spacing:.16em; }
.loading-bar { position:relative; z-index:1; width:260px; height:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.loading-bar span { display:block; width:42%; height:100%; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:loading 1.7s ease-in-out infinite; }
@keyframes loading { from{transform:translateX(-120%)} to{transform:translateX(340%)} }

.topbar { position:fixed; z-index:30; top:14px; left:14px; right:14px; height:62px; border-radius:13px; display:grid; grid-template-columns:minmax(250px,1fr) auto minmax(190px,1fr); align-items:center; padding:0 13px; }
.brand-block { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-rune { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(224,191,99,.38); transform:rotate(45deg); color:var(--gold-2); font:700 19px Cinzel,serif; }
.brand-rune::first-letter { transform:rotate(-45deg); }
.brand-block > div { min-width:0; }
.brand-block strong { display:block; font:600 13px Cinzel,serif; letter-spacing:.12em; white-space:nowrap; }
.brand-block small { display:block; margin-top:4px; color:var(--muted); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.16em; }
.world-status { display:flex; align-items:center; gap:7px; }
.status-badge { height:31px; display:inline-flex; align-items:center; padding:0 12px; border:1px solid rgba(105,183,122,.28); border-radius:7px; background:rgba(58,113,67,.15); color:#a9d7af; font:700 8px 'IBM Plex Mono',monospace; letter-spacing:.11em; }
.status-badge.build { border-color:rgba(222,190,99,.4); background:rgba(137,103,39,.2); color:var(--gold-2); }
.status-badge.gm { border-color:rgba(98,170,207,.42); background:rgba(46,104,134,.2); color:#a8d7ef; }
.status-cell { height:35px; min-width:74px; padding:5px 9px; border-left:1px solid var(--line); }
.status-cell small { display:block; color:var(--dim); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.12em; }
.status-cell b { display:block; margin-top:3px; font:600 9px 'IBM Plex Mono',monospace; color:#d5d8ca; }
.top-actions { justify-self:end; display:flex; gap:6px; }
.back-link { height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01)); color:var(--text); text-decoration:none; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.back-link:hover { border-color:var(--line-strong); background:linear-gradient(180deg,rgba(222,194,111,.13),rgba(255,255,255,.018)); }
.back-link:active { transform:translateY(1px); }
.back-link span { color:var(--gold-2); font-size:14px; }
.back-link b { font:700 8px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.icon-button { height:34px; min-width:34px; padding:0 9px; font:700 9px 'IBM Plex Mono',monospace; }
.icon-button.wide { min-width:55px; }

.player-frame { position:fixed; z-index:20; top:88px; left:16px; width:315px; min-height:130px; padding:13px; border-radius:15px; display:grid; grid-template-columns:55px 1fr; grid-template-rows:auto auto; gap:10px 12px; }
.portrait-orb { position:relative; width:54px; height:54px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:radial-gradient(circle at 40% 30%,#684f2f,#1b251c 64%,#0a0d0b); }
.portrait-orb::after { content:""; position:absolute; inset:4px; border:1px solid rgba(231,207,139,.18); border-radius:50%; }
.portrait-orb span { font:600 16px Cinzel,serif; color:var(--gold-2); }
.portrait-orb i { position:absolute; right:-2px; bottom:4px; width:12px; height:12px; border-radius:50%; border:2px solid #121812; background:var(--green); box-shadow:0 0 10px rgba(105,183,122,.5); }
.identity { min-width:0; align-self:center; }
.identity > small { display:block; color:var(--gold); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.13em; }
.identity > strong { display:block; margin:4px 0; font:600 15px Cinzel,serif; }
.identity > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
.vitals { grid-column:1/-1; display:grid; gap:5px; }
.vital label { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; color:#9da296; font:600 7px 'IBM Plex Mono',monospace; }
.vital label b { color:#d9ddcf; font-size:8px; }
.vital > div { height:7px; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:5px; background:rgba(0,0,0,.35); }
.vital i { display:block; width:100%; height:100%; transition:width .24s ease; }
.vital.health i { background:linear-gradient(90deg,#81372f,#d15a4d,#e48567); }
.vital.mana i { background:linear-gradient(90deg,#315779,#568cc5,#75b0e1); }
.vital.stamina i { background:linear-gradient(90deg,#786529,#b59a43,#dfc76d); }
.xp-line { height:2px; background:rgba(255,255,255,.05); overflow:hidden; margin-top:2px; }
.xp-line span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--gold),#fff0ae); transition:width .3s ease; }

.target-frame { position:fixed; z-index:24; top:88px; left:50%; transform:translateX(-50%); width:400px; min-height:72px; padding:10px 42px 10px 11px; border-radius:14px; display:grid; grid-template-columns:50px 1fr; gap:10px; }
.target-frame::after { content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(213,95,85,.28); pointer-events:none; }
.target-icon { grid-row:1/3; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#7a3b33,#201412 70%); color:#f0a096; border:1px solid rgba(213,95,85,.35); }
.target-copy small { display:block; color:#d77a70; font:700 7px 'IBM Plex Mono',monospace; letter-spacing:.16em; }
.target-copy strong { display:block; margin:2px 0; font:600 13px Cinzel,serif; }
.target-copy span { color:var(--muted); font-size:8px; }
.target-health { grid-column:2; }
.target-health > div { height:6px; border-radius:4px; overflow:hidden; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.05); }
.target-health i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#7c302b,#d55f55); transition:width .12s linear; }
.target-health b { display:block; text-align:right; margin-top:3px; color:#bfa7a2; font:600 7px 'IBM Plex Mono',monospace; }
.target-frame > button { position:absolute; top:7px; right:7px; width:27px; height:27px; padding:0; }

.quest-tracker { position:fixed; z-index:18; left:16px; top:230px; width:315px; max-height:265px; border-radius:13px; padding:10px; overflow:hidden; }
.compact-heading { display:flex; align-items:center; justify-content:space-between; min-height:23px; border-bottom:1px solid var(--line); padding-bottom:7px; }
.compact-heading span { color:var(--gold); font:700 7px 'IBM Plex Mono',monospace; letter-spacing:.16em; }
.compact-heading button { width:25px; height:24px; padding:0; border:0; background:transparent; }
.tracked-quests { padding-top:7px; display:grid; gap:8px; max-height:220px; overflow:auto; }
.tracked-quest { padding:8px; border-radius:8px; background:rgba(255,255,255,.025); border-left:2px solid rgba(220,188,96,.45); }
.tracked-quest strong { display:block; font:600 10px Cinzel,serif; color:#ded6bb; }
.tracked-quest small { display:block; margin-top:4px; color:var(--muted); font-size:8px; line-height:1.45; }
.tracked-objective { display:flex; gap:6px; align-items:center; margin-top:5px; font-size:8px; color:#b6b8aa; }
.tracked-objective.complete { color:var(--green-soft); text-decoration:line-through; opacity:.72; }

.mode-switch { position:fixed; z-index:22; left:50%; bottom:100px; transform:translateX(-50%); border-radius:13px; padding:5px; display:flex; gap:4px; }
.mode-button { min-width:100px; height:38px; border-color:transparent; display:flex; align-items:center; justify-content:center; gap:7px; font:600 9px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.mode-button.gm { color:#abd7eb; }

.side-panel { position:fixed; z-index:38; top:88px; right:16px; bottom:96px; width:390px; border-radius:16px; padding:14px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(216,188,105,.25) transparent; }
.side-panel::-webkit-scrollbar,.game-window::-webkit-scrollbar,.tracked-quests::-webkit-scrollbar { width:5px; }
.side-panel::-webkit-scrollbar-thumb,.game-window::-webkit-scrollbar-thumb,.tracked-quests::-webkit-scrollbar-thumb { background:rgba(216,188,105,.24); border-radius:10px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); }
.panel-heading small { color:var(--gold); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.15em; }
.panel-heading h2 { margin:4px 0 0; font:600 18px Cinzel,serif; }
.panel-close { width:30px; height:30px; padding:0; font-size:17px; }
.catalog-search { height:36px; margin-top:10px; display:flex; align-items:center; gap:7px; padding:0 9px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.22); }
.catalog-search span { color:var(--gold); }
.catalog-search input { border:0; background:transparent; padding:0; box-shadow:none; }
.category-tabs { display:flex; gap:5px; padding:10px 0 8px; overflow-x:auto; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tabs button { flex:0 0 auto; min-width:40px; padding:7px 9px; font-size:9px; white-space:nowrap; }
.category-tabs button i { font-style:normal; margin-right:5px; color:var(--gold); }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.catalog-item { position:relative; min-height:98px; overflow:hidden; text-align:left; padding:10px; }
.catalog-item::after { content:""; position:absolute; width:60px; height:60px; right:-22px; bottom:-30px; transform:rotate(45deg); border:1px solid rgba(218,188,100,.12); }
.catalog-item .catalog-icon { width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(218,188,100,.18); border-radius:7px; color:var(--gold-2); background:rgba(218,188,100,.06); font-size:14px; }
.catalog-item strong { display:block; margin-top:6px; font-size:10px; }
.catalog-item small { display:block; margin-top:4px; color:var(--muted); font-size:7.5px; line-height:1.38; }
.catalog-item .cost { margin-top:7px; color:#c8be99; font:600 7px 'IBM Plex Mono',monospace; }
.catalog-item.active { border-color:rgba(224,191,99,.57); background:linear-gradient(145deg,rgba(160,119,42,.24),rgba(47,38,18,.1)); }
.build-settings { margin-top:12px; padding-top:8px; border-top:1px solid var(--line); }
.setting-row { min-height:40px; display:flex; align-items:center; justify-content:space-between; color:#babcae; font-size:9px; }
.setting-row > div { display:flex; align-items:center; gap:5px; }
.setting-row button { height:29px; min-width:32px; padding:0 9px; font-size:8px; }
.setting-row b { min-width:39px; text-align:center; color:var(--gold-2); font:600 9px 'IBM Plex Mono',monospace; }
.setting-row.compact { border-top:1px solid rgba(255,255,255,.035); }
.segmented { border:1px solid var(--line); border-radius:8px; padding:2px; }
.segmented button { border:0; background:transparent; }
.placement-message { margin-top:9px; padding:9px 10px; border-radius:8px; border:1px solid rgba(105,183,122,.22); background:rgba(59,111,68,.13); color:#aad0ae; font-size:8.5px; line-height:1.45; }
.placement-message.invalid { border-color:rgba(213,95,85,.28); background:rgba(116,42,36,.14); color:#eba29b; }

.gm-panel { width:410px; }
.gm-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:10px 0; }
.gm-tabs button { padding:8px 4px; font-size:8px; }
.gm-tab { display:none; }
.gm-tab.active { display:block; }
.gm-section { padding:11px 0; border-bottom:1px solid var(--line); }
.gm-section:last-child { border-bottom:0; }
.gm-section h3 { margin:0 0 9px; color:#d9d1b6; font:600 9px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.selection-card { min-height:55px; padding:10px; border-radius:9px; border:1px solid rgba(98,170,207,.2); background:rgba(49,102,130,.1); }
.selection-card strong { display:block; color:#c3e1ef; font-size:10px; }
.selection-card small { display:block; margin-top:5px; color:#829daa; font:500 8px/1.45 'IBM Plex Mono',monospace; }
.transform-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:8px 0; }
.transform-tabs button { font:600 8px 'IBM Plex Mono',monospace; }
.transform-readout { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.transform-readout label { display:grid; grid-template-columns:16px 1fr; align-items:center; gap:3px; color:var(--muted); font:600 8px 'IBM Plex Mono',monospace; }
.transform-readout input { padding:7px 6px; }
.button-grid { display:grid; gap:6px; }
.button-grid.two { grid-template-columns:repeat(2,1fr); margin-top:7px; }
.button-grid button { min-height:34px; font-size:8px; }
.button-grid .wide { grid-column:1/-1; }
.toggle-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; color:#c6c7b8; font-size:9px; }
.toggle-line + .toggle-line { border-top:1px solid rgba(255,255,255,.035); }
.toggle-line span small { display:block; margin-top:3px; color:var(--dim); font-size:7px; }
.scene-browser-section { border:0; }
.scene-summary { display:flex; justify-content:space-between; padding:8px 2px; color:var(--muted); font:600 8px 'IBM Plex Mono',monospace; }
.scene-summary b { color:#c6dce7; }
.scene-object-list { display:grid; gap:4px; max-height:calc(100vh - 255px); overflow:auto; }
.scene-object { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; padding:8px; border:1px solid rgba(255,255,255,.045); border-radius:8px; background:rgba(255,255,255,.018); cursor:pointer; }
.scene-object:hover,.scene-object.active { border-color:rgba(98,170,207,.35); background:rgba(49,102,130,.12); }
.scene-object .scene-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:6px; background:rgba(98,170,207,.08); color:#a8d7ed; }
.scene-object strong { display:block; font-size:9px; }
.scene-object small { display:block; margin-top:3px; color:var(--dim); font:500 7px 'IBM Plex Mono',monospace; }
.scene-object .lock-state { color:var(--muted); font-size:9px; }
.full-field,.inline-fields label,.permission-editor label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:8px; }
.full-field { margin-top:8px; }
.inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:7px; }
.permission-editor { display:grid; grid-template-columns:1.3fr .7fr; gap:7px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.range-label { display:flex; justify-content:space-between; color:var(--muted); font-size:8px; }
.range-label b { color:#cce1eb; }
.weather-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:7px; }
.weather-grid button { padding:8px 2px; font-size:7px; }
.fine-print { margin:10px 2px 0; color:var(--dim); font-size:7.5px; line-height:1.55; }

.minimap-card { position:fixed; z-index:17; top:88px; right:16px; width:190px; padding:8px; border-radius:14px; }
.map-frame { position:relative; }
.map-frame canvas { display:block; width:172px; height:172px; border-radius:9px; background:#111814; }
.north { position:absolute; top:5px; left:50%; transform:translateX(-50%); color:var(--gold-2); font:700 7px 'IBM Plex Mono',monospace; text-shadow:0 1px 3px #000; }
.map-caption { padding:8px 3px 2px; }
.map-caption strong { display:block; font:600 10px Cinzel,serif; }
.map-caption small { display:block; margin-top:3px; color:var(--dim); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.side-panel:not(.hidden) ~ .minimap-card { display:none; }
.resource-strip { position:fixed; z-index:19; top:226px; right:16px; display:flex; gap:2px; padding:5px; border-radius:10px; }
.resource-strip span { min-width:48px; height:29px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 7px; border-right:1px solid var(--line); }
.resource-strip span:last-child { border-right:0; }
.resource-strip i { color:var(--gold); font-style:normal; }
.resource-strip b { font:600 8px 'IBM Plex Mono',monospace; }
.side-panel:not(.hidden) ~ .minimap-card + .resource-strip { display:none; }

.utility-dock { position:fixed; z-index:21; left:16px; bottom:101px; display:flex; gap:3px; padding:5px; border-radius:11px; }
.utility-dock button { width:56px; height:44px; padding:3px; border-color:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.utility-dock button span { color:var(--muted); font-size:6.5px; text-transform:uppercase; }
.utility-dock button.window-open { border-color:rgba(224,191,99,.35); background:rgba(137,103,39,.18); }

.interaction-prompt { position:fixed; z-index:28; left:50%; bottom:166px; transform:translateX(-50%); display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:10px; background:rgba(7,10,8,.9); border:1px solid var(--line-strong); box-shadow:var(--shadow); font-size:9px; }
.action-progress { position:fixed; z-index:27; left:50%; bottom:162px; transform:translateX(-50%); width:270px; padding:9px 10px; border-radius:10px; }
.action-progress label { display:flex; justify-content:space-between; margin-bottom:6px; color:#cfd3c6; font:600 8px 'IBM Plex Mono',monospace; }
.action-progress label b { color:var(--gold-2); }
.action-progress > div { height:5px; overflow:hidden; border-radius:5px; background:rgba(0,0,0,.4); }
.action-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#99763a,var(--gold-2)); }

.touch-controls,.touch-build-controls { display:none; }
.touch-controls { position:fixed; z-index:44; inset:0; pointer-events:none; }
.touch-joystick { position:absolute; left:calc(var(--safe-left) + 16px); bottom:calc(var(--safe-bottom) + 98px); width:116px; height:116px; border:1px solid rgba(240,217,144,.24); border-radius:50%; background:radial-gradient(circle,rgba(35,49,39,.58),rgba(7,11,8,.32) 68%,transparent 70%); box-shadow:inset 0 0 32px rgba(0,0,0,.35),0 10px 34px rgba(0,0,0,.22); pointer-events:auto; touch-action:none; }
.touch-joystick-ring { position:absolute; inset:18px; border:1px solid rgba(240,217,144,.13); border-radius:50%; }
.touch-joystick-knob { position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border:1px solid rgba(240,217,144,.48); border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(240,217,144,.32),rgba(45,62,49,.92) 55%,rgba(10,15,11,.96)); box-shadow:0 8px 18px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.12); transition:transform .05s linear; will-change:transform; }
.touch-joystick.active .touch-joystick-knob { border-color:rgba(255,235,170,.72); box-shadow:0 8px 22px rgba(0,0,0,.42),0 0 24px rgba(217,188,105,.18); }
.touch-action-stack { position:absolute; right:calc(var(--safe-right) + 16px); bottom:calc(var(--safe-bottom) + 102px); display:grid; gap:10px; pointer-events:auto; }
.touch-action { width:68px; height:58px; padding:4px; display:grid; place-content:center; gap:2px; border-radius:17px; touch-action:none; background:linear-gradient(155deg,rgba(34,48,38,.93),rgba(8,12,9,.9)); box-shadow:0 12px 28px rgba(0,0,0,.3); }
.touch-action span { color:var(--gold-2); font:700 10px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.touch-action small { color:var(--dim); font:700 6px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.touch-action.active,.touch-action.available:active { border-color:rgba(240,217,144,.72); background:linear-gradient(155deg,rgba(152,117,48,.48),rgba(45,34,13,.86)); }
.touch-action:disabled { opacity:.38; pointer-events:none; }
.touch-interact.available { border-color:rgba(105,183,122,.5); }
.touch-interact.available span { color:#b9e5bf; }

.touch-build-controls { position:fixed; z-index:46; left:50%; bottom:calc(var(--safe-bottom) + 10px); transform:translateX(-50%); align-items:center; gap:4px; max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 14px); padding:5px; border-radius:14px; }
.touch-build-controls button { width:54px; height:54px; padding:3px; display:grid; place-content:center; gap:2px; touch-action:manipulation; }
.touch-build-controls button span { color:var(--gold-2); font-size:16px; line-height:1; }
.touch-build-controls button small { color:var(--muted); font:700 5.5px 'IBM Plex Mono',monospace; letter-spacing:.04em; }

html.touch-capable[data-game-mode="explore"] .touch-controls { display:block; }
html.touch-capable[data-game-mode="build"] .touch-build-controls,
html.touch-capable[data-game-mode="gm-build"] .touch-build-controls { display:flex; }
html.touch-capable[data-game-mode="build"] .action-bar,
html.touch-capable[data-game-mode="build"] .utility-dock,
html.touch-capable[data-game-mode="build"] .mode-switch,
html.touch-capable[data-game-mode="gm-build"] .action-bar,
html.touch-capable[data-game-mode="gm-build"] .utility-dock,
html.touch-capable[data-game-mode="gm-build"] .mode-switch { display:none; }
html.touch-capable[data-game-mode="build"] .side-panel,
html.touch-capable[data-game-mode="gm-build"] .side-panel { bottom:calc(var(--safe-bottom) + 76px); }
.performance-tablet .film-grain { display:none; }
.performance-tablet .ui-surface { backdrop-filter:blur(10px) saturate(1.06); -webkit-backdrop-filter:blur(10px) saturate(1.06); }

.combat-log { position:fixed; z-index:16; right:16px; bottom:100px; width:285px; max-height:150px; padding:9px; border-radius:12px; }
#combat-log-lines { height:92px; overflow:hidden; padding-top:6px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; }
.log-line { font-size:7.5px; color:#a7ac9f; line-height:1.35; animation:logIn .18s ease both; }
.log-line.hostile { color:#d99a93; }
.log-line.loot,.log-line.success { color:#a4cfa9; }
.log-line.xp { color:#d9c983; }
@keyframes logIn { from{opacity:0;transform:translateY(4px)} }

.action-bar { position:fixed; z-index:25; left:16px; right:16px; bottom:14px; height:76px; border-radius:15px; display:grid; grid-template-columns:minmax(190px,1fr) auto minmax(130px,1fr); align-items:center; padding:7px 9px; }
.weapon-readout { display:flex; align-items:center; gap:9px; padding-left:4px; min-width:0; }
.weapon-readout > span { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(224,191,99,.23); border-radius:9px; background:rgba(224,191,99,.07); font-size:20px; }
.weapon-readout small { display:block; color:var(--dim); font:600 7px 'IBM Plex Mono',monospace; }
.weapon-readout strong { display:block; max-width:180px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#d9d4c0; }
.combat-hotbar { display:flex; gap:6px; }
.action-slot { position:relative; width:96px; height:60px; overflow:hidden; padding:5px 5px 4px; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; text-align:left; }
.action-slot kbd { position:absolute; top:4px; left:4px; z-index:3; min-width:18px; height:16px; padding:0 4px; font-size:7px; }
.action-slot .action-icon { grid-row:1/3; width:30px; height:30px; align-self:center; display:grid; place-items:center; margin-left:5px; font-size:17px; }
.action-slot strong { align-self:end; font-size:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.action-slot small { align-self:start; color:var(--dim); font-size:6.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.action-slot .slot-amount { color:var(--gold-2); font:700 8px 'IBM Plex Mono',monospace; }
.action-slot .cooldown { position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(7,9,8,.77); pointer-events:none; transition:height .08s linear; }
.action-slot.cooling { filter:saturate(.55); }
.action-slot.unavailable { opacity:.42; }
.console-launch { justify-self:end; min-width:86px; height:45px; display:flex; align-items:center; justify-content:center; gap:7px; font:600 8px 'IBM Plex Mono',monospace; }

.game-window { position:fixed; z-index:60; left:var(--window-x); top:var(--window-y); width:var(--window-w); max-height:calc(100vh - 130px); border-radius:15px; overflow:auto; resize:both; min-width:340px; min-height:250px; }
.game-window.focused { z-index:70; border-color:rgba(224,191,99,.32); }
.window-header { position:sticky; top:0; z-index:2; height:53px; display:grid; grid-template-columns:1fr auto 30px; align-items:center; gap:10px; padding:0 10px 0 13px; border-bottom:1px solid var(--line); background:rgba(12,17,14,.97); cursor:move; }
.window-header small { display:block; color:var(--gold); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.13em; }
.window-header strong { display:block; margin-top:2px; font:600 13px Cinzel,serif; }
.window-header > span { color:var(--muted); font:600 7px 'IBM Plex Mono',monospace; }
.window-header button { width:28px; height:28px; padding:0; }
.window-body { padding:12px; }

.inventory-layout { display:grid; grid-template-columns:1fr 145px; gap:11px; min-height:300px; }
.inventory-grid { display:grid; grid-template-columns:repeat(5,1fr); align-content:start; gap:6px; }
.inventory-slot { position:relative; aspect-ratio:1; min-height:53px; padding:4px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.045),rgba(0,0,0,.2)); cursor:pointer; }
.inventory-slot:hover,.inventory-slot.selected { border-color:var(--line-strong); background:rgba(137,103,39,.12); }
.inventory-slot.empty { cursor:default; opacity:.45; }
.inventory-slot .item-icon { font-size:22px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.inventory-slot .item-count { position:absolute; right:4px; bottom:3px; color:#f1e8c9; font:700 8px 'IBM Plex Mono',monospace; text-shadow:0 1px 3px #000; }
.inventory-slot .rarity-pin { position:absolute; left:3px; top:3px; width:4px; height:4px; border-radius:50%; }
.item-details { min-height:270px; padding:10px; border-left:1px solid var(--line); }
.empty-detail { display:grid; place-content:center; height:100%; color:var(--dim); text-align:center; font-size:8px; line-height:1.5; }
.item-inspect .large-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); font-size:31px; }
.item-inspect h3 { margin:0; text-align:center; font:600 12px Cinzel,serif; }
.item-inspect .item-type { display:block; margin-top:4px; text-align:center; color:var(--muted); font:600 7px 'IBM Plex Mono',monospace; text-transform:uppercase; }
.item-inspect p { color:#aaa99a; font-size:8px; line-height:1.55; }
.item-inspect .item-stats { padding:8px; border-radius:7px; background:rgba(105,183,122,.07); color:#a8ceb0; font-size:7.5px; line-height:1.45; }
.item-actions { display:grid; gap:5px; margin-top:9px; }
.item-actions button { font-size:8px; }

.character-layout { display:grid; grid-template-columns:225px 1fr; gap:12px; min-height:350px; }
.paperdoll { position:relative; min-height:330px; border:1px solid var(--line); border-radius:12px; background:radial-gradient(ellipse at center,rgba(145,117,62,.14),rgba(0,0,0,.16) 68%); }
.paperdoll::before,.paperdoll::after { content:""; position:absolute; inset:12px; border:1px solid rgba(224,191,99,.08); transform:rotate(45deg) scale(.58); }
.paperdoll::after { inset:35px; }
.paperdoll-silhouette { position:absolute; left:50%; top:48px; transform:translateX(-50%); width:90px; height:230px; opacity:.38; }
.paperdoll-silhouette span { position:absolute; display:block; background:linear-gradient(180deg,#826d4a,#273228); border:1px solid rgba(224,191,99,.2); }
.paperdoll-silhouette .head { width:42px; height:45px; border-radius:50%; left:24px; }
.paperdoll-silhouette .body { width:58px; height:96px; left:16px; top:45px; border-radius:20px 20px 12px 12px; }
.paperdoll-silhouette .arm { width:20px; height:105px; top:50px; border-radius:12px; transform-origin:top; }
.paperdoll-silhouette .arm.left { left:2px; transform:rotate(8deg); }
.paperdoll-silhouette .arm.right { right:2px; transform:rotate(-8deg); }
.paperdoll-silhouette .leg { width:24px; height:96px; top:135px; border-radius:10px; }
.paperdoll-silhouette .leg.left { left:18px; transform:rotate(2deg); }
.paperdoll-silhouette .leg.right { right:18px; transform:rotate(-2deg); }
.equipment-slot { position:absolute; width:58px; min-height:58px; padding:4px; display:grid; place-items:center; border:1px solid rgba(224,191,99,.16); border-radius:9px; background:rgba(0,0,0,.25); cursor:pointer; }
.equipment-slot:hover { border-color:var(--line-strong); }
.equipment-slot[data-slot="head"] { left:50%; top:12px; transform:translateX(-50%); }
.equipment-slot[data-slot="chest"] { left:50%; top:108px; transform:translateX(-50%); }
.equipment-slot[data-slot="mainHand"] { left:10px; top:115px; }
.equipment-slot[data-slot="offHand"] { right:10px; top:115px; }
.equipment-slot[data-slot="feet"] { left:50%; bottom:10px; transform:translateX(-50%); }
.equipment-slot .slot-label { position:absolute; bottom:2px; left:3px; right:3px; text-align:center; color:var(--dim); font:600 6px 'IBM Plex Mono',monospace; text-transform:uppercase; }
.equipment-slot .item-icon { font-size:23px; }
.character-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.stat-card { padding:8px; border:1px solid rgba(255,255,255,.055); border-radius:8px; background:rgba(255,255,255,.02); }
.stat-card span { display:block; color:var(--dim); font:600 7px 'IBM Plex Mono',monospace; text-transform:uppercase; }
.stat-card b { display:block; margin-top:4px; color:#e1dbc5; font:600 13px Cinzel,serif; }
.character-layout aside h4 { margin:15px 0 7px; color:var(--gold); font:600 7px 'IBM Plex Mono',monospace; letter-spacing:.12em; }
.buff-list { display:grid; gap:5px; }
.buff-list > span,.buff-row { padding:7px; border-radius:7px; background:rgba(255,255,255,.025); color:var(--muted); font-size:8px; }

.skills-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.skill-row { padding:9px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(255,255,255,.02); }
.skill-row header { display:flex; justify-content:space-between; align-items:center; }
.skill-row strong { font-size:9px; text-transform:capitalize; }
.skill-row b { color:var(--gold-2); font:600 9px 'IBM Plex Mono',monospace; }
.skill-row .skill-track { height:4px; margin-top:7px; overflow:hidden; border-radius:4px; background:rgba(0,0,0,.38); }
.skill-row .skill-track i { display:block; height:100%; background:linear-gradient(90deg,#7e6631,var(--gold)); }
.skill-row small { display:block; margin-top:5px; color:var(--dim); font:500 7px 'IBM Plex Mono',monospace; }

.quest-list { display:grid; gap:9px; }
.quest-card { padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.quest-card.completed { opacity:.66; border-color:rgba(105,183,122,.22); }
.quest-card header { display:flex; justify-content:space-between; gap:12px; }
.quest-card h3 { margin:0; font:600 12px Cinzel,serif; }
.quest-card header span { color:var(--green-soft); font:600 7px 'IBM Plex Mono',monospace; }
.quest-card .giver { display:block; margin-top:4px; color:var(--gold); font-size:7px; }
.quest-card p { margin:8px 0; color:#a8a99c; font-size:8px; line-height:1.5; }
.quest-objective { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-top:1px solid rgba(255,255,255,.035); font-size:8px; }
.quest-objective.complete { color:var(--green-soft); }
.quest-rewards { margin-top:7px; padding:7px; border-radius:7px; background:rgba(224,191,99,.055); color:#c9bd94; font-size:7.5px; }

.recipe-list { display:grid; gap:8px; }
.recipe-card { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:rgba(255,255,255,.02); }
.recipe-card .recipe-icon { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:rgba(224,191,99,.05); font-size:22px; }
.recipe-card h3 { margin:0; font-size:10px; }
.recipe-card p { margin:4px 0; color:var(--muted); font-size:7.5px; }
.recipe-meta { display:flex; flex-wrap:wrap; gap:5px; }
.recipe-meta span { padding:3px 5px; border-radius:4px; background:rgba(0,0,0,.25); color:#aaa99b; font:600 6.5px 'IBM Plex Mono',monospace; }
.recipe-meta span.missing { color:#e39a92; }
.recipe-meta span.ready { color:#9ed0a7; }
.recipe-card button { min-width:74px; font-size:8px; }
.recipe-card button:disabled { cursor:not-allowed; opacity:.38; }

.console { position:fixed; z-index:100; left:16px; right:16px; bottom:99px; height:285px; border-radius:14px; overflow:hidden; background:rgba(5,8,6,.97); }
.console-header { height:42px; display:flex; align-items:center; gap:12px; padding:0 12px; border-bottom:1px solid var(--line); }
.console-header strong { font:600 10px 'IBM Plex Mono',monospace; color:var(--gold-2); }
.console-header span { color:var(--muted); font-size:8px; }
.console-header button { margin-left:auto; width:28px; height:28px; padding:0; }
.console-output { height:195px; overflow:auto; padding:10px 13px; color:#b0b9aa; white-space:pre-wrap; font:9px/1.55 'IBM Plex Mono',monospace; }
.console-output .error { color:#ee9b8f; }
.console-output .success { color:#9ed3a5; }
.console-output .system { color:#91c8e3; }
#console-form { height:47px; display:flex; align-items:center; gap:8px; padding:0 13px; border-top:1px solid var(--line); }
#console-form > span { color:var(--gold); }
#console-input { flex:1; border:0; background:transparent; color:#f0ead7; outline:0; font:10px 'IBM Plex Mono',monospace; }

.modal-backdrop { position:fixed; z-index:200; inset:0; display:grid; place-items:center; background:rgba(3,5,4,.76); backdrop-filter:blur(10px); }
.modal { position:relative; width:min(860px,calc(100vw - 32px)); padding:28px; border-radius:20px; }
.modal-close { position:absolute; top:13px; right:13px; width:32px; height:32px; padding:0; }
.eyebrow { color:var(--gold); font:600 8px 'IBM Plex Mono',monospace; letter-spacing:.18em; }
.modal h2 { margin:8px 0 22px; max-width:680px; font:600 28px/1.17 Cinzel,serif; }
.help-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.help-grid section { position:relative; padding:15px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); }
.help-grid section > b { position:absolute; right:10px; top:8px; color:rgba(224,191,99,.18); font:600 22px Cinzel,serif; }
.help-grid h3 { margin:0 0 8px; color:#dfd3ac; font-size:10px; }
.help-grid p { margin:0; color:#a1a395; font-size:9px; line-height:1.65; }
.shortcut-ribbon { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.shortcut-ribbon span { padding:6px 8px; border:1px solid rgba(255,255,255,.05); border-radius:7px; color:var(--muted); font-size:8px; }
.primary-action { width:100%; height:43px; margin-top:15px; border-color:rgba(224,191,99,.45); color:var(--gold-2); font:600 9px 'IBM Plex Mono',monospace; letter-spacing:.13em; }

.tutorial-guide { position:fixed; z-index:200; inset:0; pointer-events:none; }
.tutorial-guide-card { position:absolute; top:calc(var(--safe-top) + 88px); left:50%; width:min(380px,calc(100vw - var(--safe-left) - var(--safe-right) - 28px)); padding:15px 16px 16px; border-radius:17px; pointer-events:auto; transform:translateX(-50%); background:linear-gradient(150deg,rgba(22,31,24,.96),rgba(7,11,8,.97)); box-shadow:0 22px 58px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.08); }
.tutorial-guide-head { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; }
.tutorial-guide-head .eyebrow { margin:0; }
#help-step-label { min-width:48px; padding:6px 8px; border:1px solid rgba(224,191,99,.2); border-radius:999px; color:var(--gold-2); text-align:center; font:700 8px 'IBM Plex Mono',monospace; }
#help-close { min-width:44px; min-height:44px; padding:0 9px; border-color:transparent; color:var(--muted); font:700 8px 'IBM Plex Mono',monospace; }
.tutorial-guide-card h2 { margin:7px 0 6px; color:#f0ead7; font:600 clamp(20px,3vw,26px)/1.08 Cinzel,serif; }
#help-step-copy { margin:0; color:#b7b9ad; font-size:11px; font-weight:600; line-height:1.5; }
#help-step-action { width:max-content; margin-top:11px; padding:8px 10px; border-radius:8px; color:#1d211a; background:var(--gold-2); font:800 8px 'IBM Plex Mono',monospace; letter-spacing:.09em; }
.shard-tutorial-focus { z-index:202 !important; outline:3px solid rgba(255,226,139,.92); outline-offset:6px; animation:shardTutorialPulse 1.25s ease-in-out infinite; }
@keyframes shardTutorialPulse { 0%,100%{outline-color:rgba(255,226,139,.5)} 50%{outline-color:#fff0bd} }

/* First-run focus mode: reveal one gameplay control cluster at a time. */
html[data-shard-tutorial-step] .top-actions > :not(.back-link):not(#btn-help),
html[data-shard-tutorial-step] .mode-switch > button,
html[data-shard-tutorial-step] .utility-dock,
html[data-shard-tutorial-step] .quest-tracker button,
html[data-shard-tutorial-step] #target-clear,
html[data-shard-tutorial-step] .action-bar,
html[data-shard-tutorial-step] #touch-joystick,
html[data-shard-tutorial-step] .touch-action-stack > button,
html[data-shard-tutorial-step] #interaction-prompt {
  opacity:.18 !important;
  filter:saturate(.18) brightness(.72);
  pointer-events:none !important;
  transition:opacity 180ms ease,filter 180ms ease;
}

html[data-shard-tutorial-step="0"] #touch-joystick,
html[data-shard-tutorial-step="1"] #touch-interact,
html[data-shard-tutorial-step="1"] #interaction-prompt,
html[data-shard-tutorial-step="2"] #btn-build {
  opacity:1 !important;
  filter:none;
  pointer-events:auto !important;
}

.toast-stack { position:fixed; z-index:300; left:50%; top:87px; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { min-width:290px; max-width:470px; padding:10px 13px; border:1px solid var(--line); border-radius:9px; background:rgba(10,14,11,.96); box-shadow:var(--shadow); color:#d8d5c5; font-size:9px; line-height:1.45; animation:toastIn .22s ease both; }
.toast.success { border-color:rgba(105,183,122,.35); }
.toast.error { border-color:rgba(213,95,85,.42); color:#f0aaa1; }
.toast.info { border-color:rgba(98,170,207,.35); }
@keyframes toastIn { from{opacity:0;transform:translateY(-8px) scale(.98)} }

@media (max-width:1250px) {
  .status-cell.save-state,.status-cell:last-child { display:none; }
  .player-frame,.quest-tracker { width:285px; }
  .action-slot { width:86px; }
  .combat-log { display:none; }
  .resource-strip { top:auto; bottom:101px; right:16px; }
}
@media (max-width:980px) {
  .brand-block small,.status-cell:nth-of-type(n+3),.weapon-readout { display:none; }
  .topbar { grid-template-columns:1fr auto auto; }
  .action-bar { grid-template-columns:1fr auto; }
  .combat-hotbar { justify-self:center; }
  .action-slot { width:78px; }
  .player-frame { width:250px; }
  .quest-tracker { top:230px; width:250px; }
  .utility-dock button { width:45px; }
  .utility-dock button span { display:none; }
}
@media (max-width:760px) {
  .topbar { top:7px; left:7px; right:7px; height:52px; padding:0 8px; }
  .brand-rune { width:31px; height:31px; }
  .brand-block strong { font-size:10px; }
  .world-status .status-cell { display:none; }
  .top-actions #btn-save,.top-actions #btn-audio { display:none; }
  .player-frame { top:67px; left:7px; width:225px; min-height:112px; padding:9px; }
  .portrait-orb { width:45px; height:45px; }
  .identity > strong { font-size:11px; }
  .quest-tracker { display:none; }
  .target-frame { top:67px; width:min(390px,calc(100vw - 245px)); min-width:210px; right:7px; left:auto; transform:none; }
  .minimap-card { top:185px; right:7px; width:118px; }
  .map-frame canvas { width:100px; height:100px; }
  .resource-strip { display:none; }
  .side-panel { top:67px; left:7px; right:7px; bottom:91px; width:auto; }
  .mode-switch { bottom:88px; }
  .mode-button { min-width:82px; }
  .utility-dock { left:7px; bottom:88px; }
  .utility-dock button { width:40px; }
  .action-bar { left:7px; right:7px; bottom:7px; height:73px; padding:6px; grid-template-columns:1fr 42px; }
  .combat-hotbar { gap:3px; width:100%; }
  .action-slot { flex:1; width:auto; min-width:50px; grid-template-columns:1fr; text-align:center; }
  .action-slot .action-icon { grid-row:auto; margin:0 auto; width:24px; height:24px; font-size:14px; }
  .action-slot strong,.action-slot small { display:none; }
  .console-launch { min-width:38px; padding:0; }
  .console-launch span { display:none; }
  .game-window { left:7px !important; top:67px !important; width:calc(100vw - 14px) !important; max-height:calc(100vh - 155px); resize:none; }
  .inventory-layout,.character-layout { grid-template-columns:1fr; }
  .item-details { border-left:0; border-top:1px solid var(--line); }
  .help-grid,.skills-list { grid-template-columns:1fr; }
  .modal { max-height:92vh; overflow:auto; padding:20px; }
  .tutorial-guide-card { top:calc(var(--safe-top) + 188px); }
}

@media (pointer:coarse) and (max-width:1180px) {
  .topbar { top:calc(var(--safe-top) + 7px); left:calc(var(--safe-left) + 7px); right:calc(var(--safe-right) + 7px); height:52px; padding:0 8px; grid-template-columns:1fr auto auto; }
  .brand-rune { width:31px; height:31px; }
  .brand-block strong { font-size:10px; }
  .brand-block small { display:none; }
  .world-status .status-cell { display:none; }
  .top-actions #btn-save,.top-actions #btn-audio { display:none; }
  .back-link { min-width:46px; height:38px; justify-content:center; }
  .back-link b { display:none; }
  .icon-button { min-width:42px; height:42px; }
  .player-frame { top:calc(var(--safe-top) + 67px); left:calc(var(--safe-left) + 7px); width:225px; min-height:112px; padding:9px; }
  .portrait-orb { width:45px; height:45px; }
  .identity > strong { font-size:11px; }
  .quest-tracker,.combat-log { display:none; }
  .target-frame { top:calc(var(--safe-top) + 67px); width:min(390px,calc(100vw - var(--safe-left) - var(--safe-right) - 245px)); min-width:210px; right:calc(var(--safe-right) + 7px); left:auto; transform:none; }
  .minimap-card { top:calc(var(--safe-top) + 185px); right:calc(var(--safe-right) + 7px); width:118px; }
  .map-frame canvas { width:100px; height:100px; }
  .resource-strip { display:none; }
  .side-panel { top:calc(var(--safe-top) + 67px); left:calc(var(--safe-left) + 7px); right:calc(var(--safe-right) + 7px); bottom:calc(var(--safe-bottom) + 91px); width:auto; }
  .mode-switch { bottom:calc(var(--safe-bottom) + 88px); }
  .mode-button { min-width:82px; min-height:44px; }
  .utility-dock { top:calc(var(--safe-top) + 190px); left:calc(var(--safe-left) + 7px); bottom:auto; flex-direction:column; }
  .utility-dock button { width:44px; height:44px; }
  .utility-dock button span { display:none; }
  .action-bar { left:calc(var(--safe-left) + 7px); right:calc(var(--safe-right) + 7px); bottom:calc(var(--safe-bottom) + 7px); height:73px; padding:6px; grid-template-columns:1fr 46px; }
  .weapon-readout { display:none; }
  .combat-hotbar { gap:3px; width:100%; justify-self:center; }
  .action-slot { flex:1; width:auto; min-width:50px; grid-template-columns:1fr; text-align:center; }
  .action-slot .action-icon { grid-row:auto; margin:0 auto; width:26px; height:26px; font-size:15px; }
  .action-slot strong,.action-slot small { display:none; }
  .console-launch { min-width:42px; padding:0; }
  .console-launch span { display:none; }
  .game-window { left:calc(var(--safe-left) + 7px) !important; top:calc(var(--safe-top) + 67px) !important; width:calc(100vw - var(--safe-left) - var(--safe-right) - 14px) !important; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 155px); resize:none; }
  .interaction-prompt,.action-progress { bottom:calc(var(--safe-bottom) + 166px); }
  .console { left:calc(var(--safe-left) + 7px); right:calc(var(--safe-right) + 7px); bottom:calc(var(--safe-bottom) + 88px); }
  .toast-stack { top:calc(var(--safe-top) + 67px); }
}

@media (pointer:coarse) and (max-width:560px) {
  .player-frame { width:205px; }
  .minimap-card,.target-frame { display:none; }
  .touch-joystick { width:104px; height:104px; }
  .touch-action { width:62px; height:54px; }
  .touch-build-controls button { width:45px; }
  .modal h2 { font-size:22px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}