:root{--bg:#0d0f0e;--panel:#121514;--panel2:#171b19;--card:#1a1e1c;--line:#2c332f;--line2:#3b443f;--text:#e9ede9;--muted:#929c96;--faint:#636d67;--accent:#c6a667;--accent2:#7f6c43;--hp:#a76d66;--mp:#6f7f9d;--xp:#899b6b;--good:#7fa27d;--warn:#b39b62;--bad:#b8736c}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans KR",sans-serif}button,input{font:inherit}.game-shell{min-height:100vh;display:grid;grid-template-columns:210px minmax(420px,1fr) 360px;grid-template-rows:64px 1fr;grid-template-areas:"top top top" "nav story detail";background:var(--line);gap:1px}.topbar{grid-area:top;background:#101311;display:grid;grid-template-columns:210px 1fr 360px;align-items:center;border-bottom:1px solid var(--line);min-width:0}.brand,.location,.top-actions{height:100%;display:flex;align-items:center;padding:0 18px}.brand{gap:10px;border-right:1px solid var(--line)}.brand-mark{width:30px;height:30px;border:1px solid var(--accent2);display:grid;place-items:center;font-family:Georgia,serif;color:var(--accent);border-radius:3px}.brand b{font-family:Georgia,serif;letter-spacing:.12em;font-size:14px;color:#ded3b8}.brand small,.identity small,.topbar small,.panel-head small{display:block;color:var(--muted);font-size:9px;letter-spacing:.13em;margin-top:2px}.location{gap:10px}.location strong{font-family:Georgia,serif;font-weight:500;font-size:17px}.top-actions{justify-content:flex-end;gap:10px;color:var(--muted);font-size:11px;border-left:1px solid var(--line)}button{border:1px solid var(--line2);background:var(--panel2);color:var(--text);border-radius:4px;cursor:pointer}.ghost{background:transparent;padding:7px 9px;color:var(--muted)}.sidebar{background:var(--panel);min-width:0}.nav-side{grid-area:nav;padding:16px 12px;display:flex;flex-direction:column}.detail-side{grid-area:detail;padding:18px;overflow:auto}.identity{display:flex;align-items:center;gap:10px;padding:2px 5px 16px;border-bottom:1px solid var(--line)}.avatar,.mini-avatar{width:38px;height:38px;border:1px solid var(--line2);background:#202520;display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif;color:var(--accent)}.avatar.large{width:62px;height:62px;font-size:24px}.main-nav{display:grid;gap:3px;margin-top:14px}.main-nav button{border:0;background:transparent;text-align:left;padding:10px;color:var(--muted);display:flex;gap:10px;align-items:center}.main-nav button span{width:20px;text-align:center;color:var(--faint)}.main-nav button.active{background:#1b201d;color:var(--text);box-shadow:inset 2px 0 var(--accent)}.main-nav button.active span{color:var(--accent)}.compact-vitals{margin-top:auto;border-top:1px solid var(--line);padding:14px 6px 2px}.vital-line{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-top:8px}.vital-line b{color:var(--text);font-weight:500}.meter{height:5px;background:#090b0a;border:1px solid #242a27;margin-top:5px;overflow:hidden}.meter span{display:block;height:100%;background:var(--good)}.meter .hp{background:var(--hp)}.meter .mp{background:var(--mp)}.meter .xp{background:var(--xp)}.meter .weight{background:var(--warn)}.meter .quest{background:var(--accent)}.load-good{color:var(--good)!important}.load-warn{color:var(--warn)!important}.load-bad{color:var(--bad)!important}.compact-vitals>small{display:block;margin-top:7px;font-size:10px}.story-column{grid-area:story;background:var(--bg);display:flex;flex-direction:column;min-width:0;min-height:calc(100vh - 65px)}.story-heading{padding:28px 34px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.story-heading span{font-size:9px;color:var(--accent);letter-spacing:.15em}.story-heading h1{font:500 25px Georgia,serif;margin:4px 0 0}.roll-pill{padding:7px 9px;font-size:10px;color:var(--muted);background:transparent}.story-log{flex:1;overflow:auto;padding:28px 7%;scrollbar-width:thin}.message{max-width:760px;margin:0 auto 22px;line-height:1.75;font-size:14px;white-space:pre-wrap}.message .speaker{font-size:9px;letter-spacing:.16em;color:var(--accent);margin-bottom:5px}.message.player{padding-left:12%;color:#c5cbc6}.message.player .speaker{color:var(--muted)}.suggestions{padding:0 7% 11px;display:flex;gap:7px;flex-wrap:wrap}.suggestions button{padding:8px 10px;background:#121512;color:#aeb6b0;font-size:11px}.composer{display:flex;gap:8px;padding:13px 7% 17px;border-top:1px solid var(--line);background:#0f1210}.composer input{flex:1;min-width:0;background:#080a09;border:1px solid var(--line2);color:var(--text);padding:12px;border-radius:4px;outline:none}.composer input:focus{border-color:var(--accent2)}.composer button{padding:0 18px;border-color:var(--accent2);background:#2a261d;color:#e7d8b4}.panel-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:14px}.panel-head h2{font:500 20px Georgia,serif;margin:2px 0 0}.gold,.counter{font-size:11px;color:var(--accent)}.sheet,.quest-card,.simple-card{border:1px solid var(--line);background:var(--panel2);padding:12px;margin-bottom:10px}.sheet h3,.hero-sheet h3,.quest-card h3{margin:0 0 5px;font-size:13px}.sheet p,.quest-card p,.simple-card p{font-size:11px;color:var(--muted);line-height:1.55;margin:7px 0}.hero-sheet{display:flex;gap:13px;align-items:center}.hero-sheet p{margin:2px 0}.hero-sheet span{font-size:9px;color:var(--accent)}.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:10px}.stat-grid div{background:var(--panel2);padding:12px;text-align:center}.stat-grid span{display:block;font-size:9px;color:var(--muted)}.stat-grid b{font:500 20px Georgia,serif}.muted{color:var(--muted)!important}.map-card{position:relative;height:300px;border:1px solid var(--line);background:linear-gradient(145deg,#171b18,#111411);overflow:hidden;margin-bottom:10px}.map-grid{position:absolute;inset:0;background-image:linear-gradient(#2a302c 1px,transparent 1px),linear-gradient(90deg,#2a302c 1px,transparent 1px);background-size:32px 32px;opacity:.18}.route-layer{position:absolute;inset:0;width:100%;height:100%}.route-layer path{fill:none;stroke:#505850;stroke-width:.7;stroke-dasharray:2 2}.map-node{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;color:var(--muted);padding:0;text-align:center;z-index:2}.map-node span{display:block;width:10px;height:10px;border:1px solid #69736d;background:#1c211e;transform:rotate(45deg);margin:auto}.map-node em{display:block;font-style:normal;font-size:9px;white-space:nowrap;margin-top:5px}.map-node.current span{background:var(--accent);border-color:var(--accent)}.map-node.current em{color:var(--accent)}.map-node.unknown{opacity:.28}.legend{display:flex;gap:12px;font-size:9px;color:var(--muted);margin:8px 0 12px}.dot{width:7px;height:7px;border:1px solid var(--faint);display:inline-block;margin-right:4px;transform:rotate(45deg)}.dot.current{background:var(--accent);border-color:var(--accent)}.dot.unknown{opacity:.35}.stack{display:grid;gap:8px}.quest-card{margin:0}.quest-top{display:flex;justify-content:space-between;font-size:9px;color:var(--accent);text-transform:uppercase}.quest-card ul{list-style:none;padding:0;margin:10px 0 0}.quest-card li{font-size:10px;color:var(--muted);padding:4px 0}.quest-card li:before{content:'□';margin-right:6px}.quest-card li.done{color:#78847a;text-decoration:line-through}.quest-card li.done:before{content:'■';color:var(--good)}.relation-web{height:185px;border:1px solid var(--line);position:relative;margin-bottom:12px;background:radial-gradient(circle at 50% 50%,#1c211e 0 1px,transparent 1px)}.relation-web:before,.relation-web:after{content:'';position:absolute;left:50%;top:50%;width:35%;border-top:1px solid #3c443f;transform-origin:left}.relation-web:before{transform:rotate(-28deg)}.relation-web:after{transform:rotate(32deg)}.you-node,.person-node{position:absolute;text-align:center;font-size:8px}.you-node{left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:1px solid var(--accent2);border-radius:50%;display:grid;place-items:center;color:var(--accent);background:#1a1d19}.person-node span{width:32px;height:32px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;margin:auto;background:#181c19;color:#c9c4b4}.person-node b,.person-node small{display:block;white-space:nowrap}.person-node b{margin-top:4px}.person-node small{color:var(--muted)}.person-node.n0{left:11%;top:17%}.person-node.n1{right:10%;bottom:16%}.person-node.n2{right:11%;top:15%}.person-node.n3{left:12%;bottom:12%}.relation-card{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;border-bottom:1px solid var(--line);padding:9px 0}.relation-card b,.relation-card small{display:block}.relation-card small{font-size:9px;color:var(--muted);margin-top:2px}.relation-card>strong{font-size:11px;color:var(--accent)}.affinity{height:3px;background:#252b27;margin-top:7px}.affinity span{display:block;height:100%;background:var(--good)}.weight-summary{padding:4px 0 14px}.weight-summary strong{font:500 22px Georgia,serif}.weight-summary>span{font-size:11px;color:var(--muted);margin-left:5px}.item-list{display:grid}.inventory-item{display:grid;grid-template-columns:38px 1fr auto;gap:9px;border-top:1px solid var(--line);padding:11px 0;align-items:start}.item-icon{width:34px;height:34px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--accent)}.inventory-item b,.inventory-item small{display:block}.inventory-item small{font-size:9px;color:var(--muted);margin-top:2px}.inventory-item p{font-size:10px;color:var(--faint);margin:4px 0 0}.inventory-item>strong{font-size:11px;font-weight:500}.equipment-body{display:grid;gap:10px}.silhouette{height:300px;border:1px solid var(--line);position:relative;background:radial-gradient(circle,#1b211d 0,#121512 62%)}.slot{position:absolute;width:104px;padding:8px;border:1px dashed var(--line2);background:#151916;color:var(--muted);font-size:9px}.slot small{display:block;color:#d3d8d3;margin-top:3px}.slot.head{top:18px;left:50%;transform:translateX(-50%)}.slot.body{top:105px;left:50%;transform:translateX(-50%)}.slot.hand{left:14px;top:178px}.slot.pack{right:14px;top:178px}.big-number{display:block;font:500 24px Georgia,serif;margin-top:6px}.skill-list{display:grid;gap:7px}.skill-list article{border:1px solid var(--line);padding:10px;background:var(--panel2)}.skill-list article>div{display:flex;align-items:center;gap:8px}.skill-rank{width:23px;height:23px;border:1px solid var(--accent2);display:grid;place-items:center;color:var(--accent);font:500 13px Georgia,serif}.skill-list small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.skill-list p{font-size:10px;color:var(--faint);margin:7px 0 0}.codex-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:10px}.codex-stats div{background:#131713;text-align:center;padding:10px}.codex-stats b,.codex-stats span{display:block}.codex-stats b{font:500 20px Georgia,serif}.codex-stats span{font-size:9px;color:var(--muted)}.simple-card{margin:0}.mobile-tabs{display:none}
@media(max-width:1050px){.game-shell{grid-template-columns:180px minmax(360px,1fr) 310px}.topbar{grid-template-columns:180px 1fr 310px}.brand{padding:0 12px}.detail-side{padding:14px}.story-log,.suggestions,.composer{padding-left:5%;padding-right:5%}}
@media(max-width:820px){.game-shell{display:grid;grid-template-columns:1fr;grid-template-rows:56px 1fr 56px;grid-template-areas:"top" "story" "mobile"}.topbar{grid-template-columns:1fr auto;height:56px}.brand{border:0}.location{display:none}.top-actions{border:0;padding:0 10px}.top-actions #apiStatus{display:none}.nav-side{display:none}.detail-side{display:none}.story-column{min-height:calc(100vh - 112px)}.story-heading{padding:18px 16px 12px}.story-log{padding:18px 16px}.message.player{padding-left:6%}.suggestions{padding:0 16px 9px;overflow:auto;flex-wrap:nowrap}.suggestions button{white-space:nowrap}.composer{padding:10px 12px}.mobile-tabs{grid-area:mobile;display:grid;grid-template-columns:repeat(5,1fr);background:#101311;border-top:1px solid var(--line)}.mobile-tabs button{border:0;border-radius:0;background:transparent;color:var(--muted);font-size:10px}.mobile-tabs button.active{color:var(--accent);box-shadow:inset 0 2px var(--accent)}.top-actions .ghost{display:none}}

/* Galaxy Tab / resizable multi-window layout */
.game-shell{height:100vh;height:100dvh;overflow:hidden;position:relative}.sidebar,.story-column{min-height:0}.story-log,.detail-side{overscroll-behavior:contain}.mobile-panel{display:none}

@media (min-width:901px) and (max-width:1180px){
  .game-shell{grid-template-columns:72px minmax(0,1fr) 300px;grid-template-rows:56px minmax(0,1fr);grid-template-areas:"top top top" "nav story detail"}
  .topbar{grid-template-columns:72px minmax(0,1fr) 300px;height:56px}
  .brand{justify-content:center;padding:0;border-right:1px solid var(--line)}
  .brand>div{display:none}.brand-mark{width:32px;height:32px}
  .location{padding:0 16px}.location strong{font-size:15px}.location small{font-size:8px}
  .top-actions{padding:0 10px}.top-actions #apiStatus{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-side{padding:10px 7px;align-items:stretch}.identity{justify-content:center;padding:2px 0 11px}.identity>div:last-child{display:none}.avatar{width:34px;height:34px}
  .main-nav{gap:2px;margin-top:8px}.main-nav button{justify-content:center;padding:10px 4px;font-size:0}.main-nav button span{width:auto;font-size:17px}.main-nav button.active{box-shadow:inset 2px 0 var(--accent)}
  .compact-vitals{padding:10px 3px 2px}.compact-vitals .vital-line{display:none}.compact-vitals .meter{height:6px;margin-top:8px}.compact-vitals>small{font-size:8px;text-align:center;white-space:nowrap;overflow:hidden}
  .story-heading{padding:20px 24px 14px}.story-heading h1{font-size:21px}.story-log{padding:22px 5%}.message{font-size:13px;line-height:1.68;margin-bottom:18px}.suggestions{padding:0 5% 9px}.composer{padding:10px 5% 13px}
  .detail-side{padding:13px}.panel-head h2{font-size:18px}.map-card{height:250px}.relation-web{height:170px}.silhouette{height:260px}.slot{width:94px}
}

@media (max-width:900px){
  .game-shell{grid-template-columns:1fr;grid-template-rows:56px minmax(0,1fr) 60px;grid-template-areas:"top" "story" "mobile"}
  .topbar{grid-template-columns:minmax(0,1fr) auto;height:56px}.brand{border:0;padding:0 12px}.brand-mark{width:29px;height:29px}.brand b{font-size:12px}.brand small{font-size:7px}
  .location,.nav-side,.detail-side{display:none}.top-actions{border:0;padding:0 8px}.top-actions #apiStatus{display:block;font-size:9px;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-actions .ghost{display:none}
  .story-column{min-height:0;height:auto}.story-heading{padding:14px 16px 10px;align-items:center}.story-heading h1{font-size:19px}.story-heading span{font-size:8px}.roll-pill{padding:6px 8px;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .story-log{padding:16px clamp(12px,3.5vw,24px)}.message{font-size:13px;line-height:1.62;margin-bottom:17px}.message.player{padding-left:5%}
  .suggestions{padding:0 12px 8px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none}.suggestions::-webkit-scrollbar{display:none}.suggestions button{white-space:nowrap;flex:0 0 auto;padding:8px 10px}
  .composer{padding:9px 10px 10px;gap:7px}.composer input{padding:11px;font-size:16px}.composer button{padding:0 15px;min-width:62px}
  .mobile-tabs{grid-area:mobile;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#101311;border-top:1px solid var(--line);min-width:0;z-index:31}
  .mobile-tabs button{min-width:0;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:9px;display:grid;place-items:center;align-content:center;gap:2px;padding:4px 1px;line-height:1.05}.mobile-tabs button span{font-size:14px;line-height:1}.mobile-tabs button.active{color:var(--accent);box-shadow:inset 0 2px var(--accent)}
  .mobile-panel{display:flex;position:absolute;z-index:30;top:56px;right:0;bottom:60px;width:min(420px,52%);min-width:330px;background:var(--panel);border-left:1px solid var(--line);transform:translateX(102%);transition:transform .18s ease;flex-direction:column;min-height:0;box-shadow:-10px 0 26px rgba(0,0,0,.22)}
  .mobile-panel.open{transform:translateX(0)}.mobile-panel-toolbar{display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid var(--line);background:#101311}.panel-switches{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}.panel-switches::-webkit-scrollbar{display:none}.panel-switches button{flex:0 0 auto;padding:7px 9px;background:transparent;color:var(--muted);font-size:9px;border-color:var(--line)}.panel-switches button.active{color:var(--accent);border-color:var(--accent2);background:#1b1d18}.mobile-close{flex:0 0 36px;width:36px;height:36px;background:transparent;font-size:20px;color:var(--muted)}
  .mobile-panel-content{padding:13px 14px 20px;overflow:auto;min-height:0}.mobile-panel-content .panel-head{position:sticky;top:-13px;background:var(--panel);z-index:2;padding-top:4px}.mobile-panel-content .map-card{height:250px}.mobile-panel-content .relation-web{height:170px}.mobile-panel-content .silhouette{height:260px}
}

@media (max-width:600px){
  .brand small{display:none}.top-actions #apiStatus{max-width:98px}.story-heading{padding-left:12px;padding-right:12px}.story-log{padding-left:12px;padding-right:12px}.message{font-size:12.5px}
  .mobile-panel{width:100%;min-width:0;border-left:0}.mobile-panel-content{padding-left:12px;padding-right:12px}.mobile-tabs button{font-size:8px}.mobile-tabs button span{font-size:13px}
  .stat-grid{grid-template-columns:repeat(3,1fr)}.map-card{height:230px}.slot{width:92px}.slot.hand{left:8px}.slot.pack{right:8px}
}

@media (max-width:420px){
  .top-actions #apiStatus{display:none}.story-heading h1{font-size:17px}.roll-pill{font-size:9px}.composer button{min-width:56px;padding:0 10px}.mobile-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){.mobile-panel{transition:none}}

/* Character creation / race system */
.setup-overlay{position:absolute;z-index:80;inset:0;background:rgba(7,9,8,.86);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px;overflow:auto}
.setup-card{width:min(760px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 18px 55px rgba(0,0,0,.4)}
.setup-head,.alloc-head,.rarity-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.setup-head small{letter-spacing:.18em;color:var(--muted);font-size:9px}.setup-head h2{margin:3px 0 0;font-size:25px}.race-tier{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:10px;white-space:nowrap}.race-tier.common{color:#cbd0cc}.race-tier.rare{color:#8fc7ff}.race-tier.unusual{color:#d8a9ff}.race-tier.legendary{color:#ffd083}
.name-field{display:grid;gap:6px;margin:17px 0 12px;color:var(--muted);font-size:10px}.name-field input{width:100%;box-sizing:border-box;background:#0e110f;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:11px 12px;font-size:16px;outline:none}.name-field input:focus{border-color:var(--accent)}
.race-card{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#121512}.race-card small{color:var(--muted);font-size:9px;letter-spacing:.1em}.race-card h3{margin:3px 0 5px;font-size:20px}.race-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.race-card button,.trait-picks button{flex:0 0 auto;padding:8px 10px;background:#181c18;color:var(--text);border:1px solid var(--line);border-radius:8px}
.innate-traits{display:flex;gap:10px;align-items:center;padding:10px 2px;color:var(--muted);font-size:11px}.innate-traits b{color:var(--text)}
.trait-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}.trait-picks>b{grid-column:1/-1;font-size:12px}.trait-picks article{border:1px solid var(--line);border-radius:10px;padding:10px;background:#111411}.trait-picks article strong{font-size:12px}.trait-picks article p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.trait-picks>button{grid-column:1/-1;justify-self:start}
.alloc-head{margin-top:17px}.alloc-head>div{display:grid}.alloc-head b{font-size:13px}.alloc-head small{color:var(--muted);font-size:10px;margin-top:2px}.alloc-head>strong{font-size:12px;color:var(--accent)}
.alloc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:10px}.alloc-stat{min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 6px;text-align:center;background:#111411}.alloc-stat>span{display:block;color:var(--muted);font-size:9px}.alloc-stat>b{display:block;font-size:21px;margin:3px 0}.alloc-stat>small{display:block;color:var(--muted);font-size:8px}.alloc-stat>div{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;gap:3px;margin-top:7px}.alloc-stat button{width:28px;height:28px;padding:0;border:1px solid var(--line);background:#181c18;color:var(--text);border-radius:6px}.alloc-stat button:disabled{opacity:.3}.alloc-stat em{font-style:normal;font-size:10px;color:var(--accent)}
.start-game{width:100%;margin-top:15px;padding:12px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:#0b0e0c;font-weight:700}.start-game:disabled{opacity:.35;cursor:not-allowed}.setup-note{text-align:center;color:var(--muted);font-size:9px;margin:9px 0 0}
.race-summary p{margin:6px 0;color:var(--muted);font-size:11px;line-height:1.5}.race-summary small{color:var(--muted);line-height:1.5}
@media(max-width:700px){.setup-overlay{padding:8px;place-items:start center}.setup-card{max-height:calc(100dvh - 16px);padding:14px;border-radius:12px}.setup-head h2{font-size:20px}.trait-picks{grid-template-columns:1fr}.trait-picks>b,.trait-picks>button{grid-column:auto}.alloc-grid{grid-template-columns:repeat(3,1fr)}.race-card{align-items:stretch}.race-card button{align-self:center}.setup-head{align-items:flex-start}}
@media(max-width:420px){.alloc-grid{grid-template-columns:repeat(2,1fr)}.race-card{display:grid}.race-card button{justify-self:start}.setup-card{padding:12px}}

/* =========================================================
   Chronicle RPG — Dark Arcane HUD visual pass (2026-09-13)
   Pure CSS visual layer: no gameplay or layout semantics changed.
   ========================================================= */
:root{
  --bg:#090c0d;
  --panel:#0f1415;
  --panel2:#151b1c;
  --card:#182021;
  --line:#2b3938;
  --line2:#425451;
  --text:#edf2ee;
  --muted:#9ba9a4;
  --faint:#60706b;
  --accent:#d5b56b;
  --accent2:#8f7440;
  --arcane:#5fa6a0;
  --arcane-soft:#315d5a;
  --violet:#8977b7;
  --hp:#b85f5b;
  --mp:#6689b8;
  --xp:#88a866;
  --good:#82b884;
  --warn:#d0aa5e;
  --bad:#c66b63;
  --shadow:0 18px 40px rgba(0,0,0,.34);
}

html,body,#app{
  background:
    radial-gradient(circle at 22% -10%,rgba(49,93,90,.13),transparent 33%),
    radial-gradient(circle at 88% 0%,rgba(143,116,64,.09),transparent 30%),
    linear-gradient(180deg,#0a0d0e,#080a0b 70%);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}

.game-shell{background:#1b2524;position:relative;isolation:isolate}
.game-shell:before{
  content:"";position:fixed;inset:64px 360px 0 210px;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 50% 22%,rgba(95,166,160,.055),transparent 32%),
    linear-gradient(120deg,transparent 0 48%,rgba(213,181,107,.018) 49%,transparent 50%);
}

.topbar{
  background:linear-gradient(180deg,rgba(20,27,27,.98),rgba(12,16,17,.98));
  box-shadow:0 7px 24px rgba(0,0,0,.28);z-index:20;
}
.brand{position:relative;background:linear-gradient(90deg,rgba(213,181,107,.035),transparent)}
.brand:after{content:"";position:absolute;right:12px;bottom:0;width:58px;height:1px;background:linear-gradient(90deg,transparent,var(--accent2))}
.brand-mark{
  border-color:#9b824d;background:
  radial-gradient(circle,rgba(213,181,107,.12),transparent 55%),#111716;
  box-shadow:0 0 0 3px rgba(213,181,107,.035),inset 0 0 16px rgba(213,181,107,.06);
  transform:rotate(45deg);
}
.brand-mark>*{transform:rotate(-45deg)}
.brand b{text-shadow:0 0 14px rgba(213,181,107,.16)}
.location strong{color:#f0eadb;text-shadow:0 0 18px rgba(213,181,107,.08)}

button{transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease}
button:hover{border-color:#60726d;background:#1a2322}
button:active{transform:translateY(1px)}
.ghost:hover{color:#e5d7b8;border-color:var(--accent2);background:rgba(213,181,107,.04)}

.nav-side,.detail-side{background:linear-gradient(180deg,#101617,#0d1213)}
.identity{position:relative}
.identity:after{content:"";position:absolute;left:4px;right:44%;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--arcane-soft),transparent)}
.avatar,.mini-avatar{
  background:
    radial-gradient(circle at 35% 30%,rgba(213,181,107,.12),transparent 28%),
    radial-gradient(circle,rgba(95,166,160,.08),transparent 62%),#18201f;
  border-color:#50645f;box-shadow:inset 0 0 16px rgba(95,166,160,.07),0 0 0 3px rgba(95,166,160,.025)
}
.avatar.large{box-shadow:inset 0 0 22px rgba(213,181,107,.08),0 0 0 4px rgba(213,181,107,.025),0 10px 28px rgba(0,0,0,.24)}
.main-nav button{border-radius:6px;position:relative;overflow:hidden}
.main-nav button:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(95,166,160,.05),transparent 70%);opacity:0;transition:.18s}
.main-nav button:hover:after,.main-nav button.active:after{opacity:1}
.main-nav button.active{background:linear-gradient(90deg,#172322,#151b1a 75%);box-shadow:inset 2px 0 var(--accent),0 0 18px rgba(95,166,160,.035)}

.meter{height:7px;background:#070a0a;border-color:#26302e;border-radius:999px;box-shadow:inset 0 1px 4px rgba(0,0,0,.8)}
.meter span{border-radius:999px;box-shadow:0 0 8px currentColor;position:relative}
.meter span:after{content:"";position:absolute;left:4px;right:4px;top:1px;height:1px;background:rgba(255,255,255,.28)}
.meter .hp{box-shadow:0 0 9px rgba(184,95,91,.32)}
.meter .mp{box-shadow:0 0 9px rgba(102,137,184,.32)}
.meter .xp{box-shadow:0 0 9px rgba(136,168,102,.28)}
.meter .weight{box-shadow:0 0 9px rgba(208,170,94,.25)}

.story-column{background:
  radial-gradient(circle at 50% 0%,rgba(95,166,160,.035),transparent 34%),
  linear-gradient(180deg,#0b0f10,#090c0d)}
.story-heading{position:relative;background:linear-gradient(180deg,rgba(17,23,23,.62),rgba(10,14,15,.2))}
.story-heading:after{content:"";position:absolute;left:7%;right:7%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--arcane-soft),var(--accent2),transparent);opacity:.7}
.story-heading h1{letter-spacing:.015em;text-shadow:0 0 24px rgba(213,181,107,.1)}
.roll-pill{border-color:#364643;background:rgba(15,23,22,.72);box-shadow:inset 0 0 14px rgba(95,166,160,.025)}
.story-log{position:relative}
.story-log:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:radial-gradient(circle at center,rgba(213,181,107,.7) 0 1px,transparent 1.4px);
  background-size:72px 72px;
}
.message{position:relative;padding:13px 16px 13px 18px;border-left:1px solid transparent}
.message:not(.player){
  background:linear-gradient(90deg,rgba(21,30,29,.55),rgba(12,16,17,.05));
  border-left-color:#4d625d;border-radius:0 8px 8px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.message:not(.player):before{content:"◆";position:absolute;left:-5px;top:18px;color:var(--arcane);font-size:8px;text-shadow:0 0 10px rgba(95,166,160,.6)}
.message.player{background:linear-gradient(270deg,rgba(68,57,34,.28),transparent);border-right:1px solid #6d5c38;border-radius:8px 0 0 8px}
.message .speaker{font-weight:700;text-shadow:0 0 10px rgba(213,181,107,.18)}
.suggestions button{background:linear-gradient(180deg,#151c1b,#101514);border-color:#354542;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.suggestions button:hover{border-color:var(--accent2);color:#f2e7ca;box-shadow:0 0 0 1px rgba(213,181,107,.05),0 8px 18px rgba(0,0,0,.2)}
.composer{background:linear-gradient(180deg,#0d1212,#090c0d);box-shadow:0 -10px 28px rgba(0,0,0,.12)}
.composer input{background:linear-gradient(180deg,#070a0a,#0a0e0e);box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
.composer input:focus{border-color:#6d8a83;box-shadow:0 0 0 2px rgba(95,166,160,.07),inset 0 2px 10px rgba(0,0,0,.35)}
.composer button{background:linear-gradient(180deg,#3a3221,#272118);border-color:#967b45;color:#f1dfb8;box-shadow:inset 0 1px rgba(255,255,255,.06),0 5px 16px rgba(0,0,0,.18)}
.composer button:hover{background:linear-gradient(180deg,#4a3c25,#302719);box-shadow:0 0 18px rgba(213,181,107,.1)}

.panel-head{position:relative}
.panel-head:after{content:"";position:absolute;left:0;bottom:-1px;width:34%;height:1px;background:linear-gradient(90deg,var(--accent2),transparent)}
.panel-head h2{text-shadow:0 0 18px rgba(213,181,107,.08)}
.sheet,.quest-card,.simple-card{
  border-color:#2f3d3a;background:
  linear-gradient(145deg,rgba(27,37,36,.96),rgba(18,24,24,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.018),0 8px 22px rgba(0,0,0,.12);
  border-radius:7px;position:relative;overflow:hidden
}
.sheet:before,.quest-card:before,.simple-card:before{
  content:"";position:absolute;left:0;top:0;width:54px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.55
}
.hero-sheet{padding:15px;background:
  radial-gradient(circle at 12% 30%,rgba(213,181,107,.08),transparent 22%),
  linear-gradient(145deg,#1b2422,#121817)}
.race-summary{background:
  radial-gradient(circle at 85% 20%,rgba(95,166,160,.06),transparent 28%),
  linear-gradient(145deg,#192120,#121817)}
.race-tier{box-shadow:inset 0 0 12px rgba(255,255,255,.02)}
.race-tier.rare{border-color:#44698e;background:rgba(60,104,150,.08);text-shadow:0 0 10px rgba(143,199,255,.22)}
.race-tier.unusual{border-color:#70568b;background:rgba(120,75,150,.08);text-shadow:0 0 10px rgba(216,169,255,.2)}
.race-tier.legendary{border-color:#8d7138;background:rgba(171,129,45,.08);box-shadow:0 0 14px rgba(255,208,131,.06);text-shadow:0 0 12px rgba(255,208,131,.26)}

.stat-grid{gap:1px;background:#30403d;border-color:#30403d;border-radius:7px;overflow:hidden}
.stat-grid div{background:linear-gradient(180deg,#18201f,#121817);position:relative}
.stat-grid div:after{content:"";position:absolute;inset:auto 18% 0;height:1px;background:linear-gradient(90deg,transparent,rgba(95,166,160,.45),transparent)}
.stat-grid b{color:#f0eadc;text-shadow:0 0 10px rgba(213,181,107,.08)}

.map-card{
  border-color:#3a4a46;border-radius:8px;
  background:
    radial-gradient(circle at 45% 42%,rgba(95,166,160,.09),transparent 24%),
    radial-gradient(circle at 75% 22%,rgba(213,181,107,.05),transparent 22%),
    linear-gradient(145deg,#16201e,#0c1111);
  box-shadow:inset 0 0 42px rgba(0,0,0,.48),0 10px 26px rgba(0,0,0,.16)
}
.map-card:after{content:"";position:absolute;inset:9px;border:1px solid rgba(95,166,160,.08);pointer-events:none;border-radius:4px}
.map-grid{background-size:28px 28px;opacity:.12;transform:rotate(.01deg)}
.route-layer path{stroke:#60746e;stroke-width:.8;filter:drop-shadow(0 0 2px rgba(95,166,160,.16))}
.map-node span{width:12px;height:12px;background:#111918;border-color:#61736d;box-shadow:0 0 0 3px rgba(95,166,160,.025)}
.map-node.current span{background:#d6b66a;border-color:#f0d189;box-shadow:0 0 0 4px rgba(213,181,107,.08),0 0 18px rgba(213,181,107,.48);animation:mapPulse 2.6s ease-in-out infinite}
.map-node.current em{color:#f3ddb0;text-shadow:0 0 10px rgba(213,181,107,.45)}
.map-node.known:hover span{border-color:#88aaa2;box-shadow:0 0 14px rgba(95,166,160,.18)}
@keyframes mapPulse{50%{box-shadow:0 0 0 6px rgba(213,181,107,.035),0 0 26px rgba(213,181,107,.58)}}

.quest-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.quest-card:hover{transform:translateY(-1px);border-color:#465b55;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.quest-top{letter-spacing:.08em}.quest-card li:before{color:#738981}.quest-card li.done:before{filter:drop-shadow(0 0 4px rgba(130,184,132,.3))}

.relation-web{
  background:
    radial-gradient(circle at 50% 50%,rgba(95,166,160,.07),transparent 34%),
    radial-gradient(circle at 50% 50%,#26322f 0 1px,transparent 1.2px);
  background-size:auto,20px 20px;border-radius:8px;box-shadow:inset 0 0 30px rgba(0,0,0,.35)
}
.relation-web:before,.relation-web:after{border-color:#51635e;filter:drop-shadow(0 0 2px rgba(95,166,160,.1))}
.you-node{border-color:#a78b4e;background:radial-gradient(circle,rgba(213,181,107,.12),#151c1b 68%);box-shadow:0 0 18px rgba(213,181,107,.08)}
.person-node span{border-color:#465a55;background:radial-gradient(circle,rgba(95,166,160,.07),#151b1a);box-shadow:0 0 12px rgba(95,166,160,.04)}
.affinity{height:4px;border-radius:999px;overflow:hidden;background:#1e2826}.affinity span{border-radius:999px;box-shadow:0 0 8px rgba(130,184,132,.22)}

.weight-summary strong{color:#f0e5cc;text-shadow:0 0 12px rgba(213,181,107,.08)}
.inventory-item{transition:background .14s ease,padding .14s ease,border-color .14s ease}
.inventory-item:hover{background:linear-gradient(90deg,rgba(95,166,160,.045),transparent);padding-left:5px;border-top-color:#3c4c48}
.item-icon{background:radial-gradient(circle,rgba(213,181,107,.07),transparent),#121918;border-color:#435550;box-shadow:inset 0 0 14px rgba(95,166,160,.04)}

/* equipment silhouette / slots */
.silhouette{background:
  radial-gradient(ellipse at 50% 38%,rgba(95,166,160,.055),transparent 32%),
  linear-gradient(180deg,#121918,#0d1212);border-radius:8px;border-color:#2e3c39}
.slot{background:linear-gradient(180deg,rgba(28,37,36,.96),rgba(17,23,23,.96));border-color:#3a4b47;box-shadow:inset 0 0 14px rgba(95,166,160,.025)}
.slot:hover{border-color:#7d6a41;box-shadow:0 0 14px rgba(213,181,107,.05),inset 0 0 14px rgba(213,181,107,.025)}

/* skill cards / codex entries */
.skill-card,.codex-card{background:linear-gradient(145deg,#18201f,#111716);border-color:#2f3e3a;box-shadow:0 7px 18px rgba(0,0,0,.1)}
.skill-card:hover,.codex-card:hover{border-color:#445a54}

/* Character setup: make the opening feel like a game scene, not a form */
.setup-overlay{
  background:
    radial-gradient(circle at 50% 18%,rgba(95,166,160,.15),transparent 30%),
    radial-gradient(circle at 18% 75%,rgba(213,181,107,.08),transparent 28%),
    rgba(5,8,8,.92);
  backdrop-filter:blur(10px)
}
.setup-card{
  border-color:#3d4f4a;background:
    linear-gradient(145deg,rgba(19,27,26,.98),rgba(11,16,16,.99));
  box-shadow:0 25px 80px rgba(0,0,0,.62),0 0 0 1px rgba(213,181,107,.035),inset 0 1px rgba(255,255,255,.025);position:relative
}
.setup-card:before,.setup-card:after{content:"";position:absolute;width:66px;height:66px;pointer-events:none;opacity:.55}
.setup-card:before{left:8px;top:8px;border-left:1px solid var(--accent2);border-top:1px solid var(--accent2)}
.setup-card:after{right:8px;bottom:8px;border-right:1px solid var(--arcane-soft);border-bottom:1px solid var(--arcane-soft)}
.setup-head h2{font-family:Georgia,serif;letter-spacing:.02em;color:#f1eadb;text-shadow:0 0 20px rgba(213,181,107,.12)}
.name-field input{background:#09100f;border-color:#344541;box-shadow:inset 0 3px 12px rgba(0,0,0,.32)}
.race-card{background:
  radial-gradient(circle at 84% 10%,rgba(213,181,107,.065),transparent 24%),
  linear-gradient(145deg,#182120,#111716);border-color:#344641;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.trait-picks article{background:linear-gradient(145deg,#151d1c,#0f1515);border-color:#30413d;position:relative;overflow:hidden}
.trait-picks article:after{content:"";position:absolute;left:0;top:0;width:34px;height:1px;background:var(--arcane);opacity:.36}
.alloc-stat{background:linear-gradient(180deg,#16201e,#101615);border-color:#30413d;box-shadow:inset 0 1px rgba(255,255,255,.015)}
.alloc-stat>b{color:#f0e5ca;text-shadow:0 0 12px rgba(213,181,107,.08)}
.alloc-stat button:hover{border-color:#60766f;background:#1c2926}
.start-game{background:linear-gradient(180deg,#dabb76,#9e7c3f);border-color:#e2c681;color:#0b0e0d;box-shadow:0 10px 24px rgba(213,181,107,.13),inset 0 1px rgba(255,255,255,.3);letter-spacing:.05em}
.start-game:hover{background:linear-gradient(180deg,#e7c982,#aa8745);box-shadow:0 0 22px rgba(213,181,107,.18),0 10px 24px rgba(0,0,0,.22)}

/* Mobile/tablet polish */
.mobile-tabs{background:linear-gradient(180deg,#111716,#0a0e0e);box-shadow:0 -8px 20px rgba(0,0,0,.24)}
.mobile-tabs button.active{background:linear-gradient(180deg,rgba(213,181,107,.055),transparent);text-shadow:0 0 9px rgba(213,181,107,.16)}
.mobile-panel{background:linear-gradient(180deg,#111817,#0d1212);box-shadow:-18px 0 42px rgba(0,0,0,.42)}
.mobile-panel-toolbar{background:linear-gradient(180deg,#141b1a,#0e1313)}

@media(max-width:1180px){
  .game-shell:before{inset:64px 300px 0 70px}
}
@media(max-width:900px){
  body:before{background-size:40px 40px;opacity:.12}
  .game-shell:before{display:none}
  .story-log:before{opacity:.035}
  .message{padding:11px 12px 11px 14px}
}
@media(max-width:600px){
  .setup-card:before,.setup-card:after{width:38px;height:38px}
  .message:not(.player){border-radius:0 6px 6px 0}
  .message.player{border-radius:6px 0 0 6px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}