:root {
  color-scheme: dark;
  --page: #101923;
  --surface: #151f2b;
  --surface-soft: #182837;
  --surface-deep: #0b121a;
  --line: #364d60;
  --text: #eaf4fb;
  --muted: #90a7b9;
  --accent-a: #58d5ee;
  --accent-b: #7a6fe6;
  --accent-text: #0a1721;
  --scene-main: #153a58;
  --scene-edge: #241e49;
  --scene-glow: #8adfff;
  --scene-structure: #0c2031;
  --scene-foreground: #0a1522;
  --chat: #13202c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 78% -10%, color-mix(in srgb, var(--accent-a) 16%, transparent), transparent 34%), var(--page); color: var(--text); font-family: Pretendard, "Malgun Gothic", system-ui, sans-serif; letter-spacing: -0.02em; transition: background 260ms ease; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-shell { width: 100%; height: 100dvh; overflow: hidden; background: var(--surface); }
.topbar { height: 64px; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--scene-main) 72%, #071019), color-mix(in srgb, var(--scene-edge) 66%, #0c101d)); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none; }
.brand-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: var(--accent-text); font-size: 13px; }
.public-region { margin: 0; color: var(--muted); font-size: 12px; }
.public-region strong { color: color-mix(in srgb, var(--text) 84%, var(--accent-a)); font-weight: 500; }
.topbar-spacer { flex: 1; }
.admin-preview { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--accent-b) 64%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--accent-b) 17%, transparent); color: color-mix(in srgb, var(--text) 90%, var(--accent-b)); font-size: 10px; }
.account-summary { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; }
.account-summary button, .account-summary a { min-height: 28px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent-a)); border-radius: 6px; background: color-mix(in srgb, var(--surface-deep) 74%, transparent); color: var(--muted); font-size: 10px; display:inline-flex; align-items:center; text-decoration:none; }
.account-avatar,.profile-avatar-preview { display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent-a) 68%,var(--line)); border-radius:50%; background:var(--surface-deep); color:var(--text); font-weight:700; }.account-avatar { width:28px; height:28px; }.account-avatar img,.profile-avatar-preview img { width:100%; height:100%; object-fit:cover; }.account-avatar b,.profile-avatar-preview b { font:inherit; }
.profile-settings-dialog { width:min(420px,calc(100vw - 28px)); padding:0; border:1px solid color-mix(in srgb,var(--accent-a) 70%,var(--line)); border-radius:13px; background:linear-gradient(145deg,var(--surface),var(--surface-deep)); color:var(--text); }.profile-settings-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(3px); }.profile-settings-dialog form { display:grid; gap:15px; padding:20px; }.profile-settings-dialog header { display:flex; justify-content:space-between; gap:14px; }.profile-settings-dialog h2,.profile-settings-dialog p { margin:0; }.profile-settings-dialog header p:not(.section-kicker) { margin-top:6px; color:var(--muted); font-size:11px; }.profile-settings-content { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:12px; padding:13px; border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 62%,transparent); }.profile-avatar-preview { width:72px; height:72px; font-size:26px; }.profile-settings-content label { display:grid; gap:6px; min-width:0; }.profile-settings-content label span,.profile-settings-content small,.profile-settings-dialog > form > #profile-settings-status { color:var(--muted); font-size:10px; }.profile-settings-content small { grid-column:1/-1; }.profile-settings-dialog footer { display:flex; justify-content:space-between; gap:8px; }.profile-settings-dialog footer button { min-height:34px; } .profile-settings-dialog #profile-settings-status { min-height:15px; }
.profile-preference-toggle { display:flex; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 56%,transparent); cursor:pointer; }.profile-preference-toggle input { width:16px; height:16px; margin:1px 0 0; accent-color:var(--accent-a); }.profile-preference-toggle span { display:grid; gap:4px; }.profile-preference-toggle b { font-size:12px; }.profile-preference-toggle small { color:var(--muted); font-size:10px; line-height:1.45; }
.profile-volume-control { display:grid; grid-template-columns:minmax(0,1fr) 72px 42px; align-items:center; gap:10px; padding:12px 13px; border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 56%,transparent); }.profile-volume-control span { display:grid; gap:4px; }.profile-volume-control b { font-size:12px; }.profile-volume-control small { color:var(--muted); font-size:10px; line-height:1.45; }.profile-volume-control input { width:100%; accent-color:var(--accent-a); }.profile-volume-control output { color:var(--accent-a); font-family:var(--mono); font-size:11px; text-align:right; }
.quiet-button { min-height: 34px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius: 8px; background: color-mix(in srgb, var(--surface-deep) 74%, transparent); color: var(--text); font-size: 12px; }
.app-layout { display: grid; grid-template-columns: 156px minmax(0, 1fr) 380px; height: calc(100dvh - 64px); min-height: 0; overflow: hidden; }
.sidebar { min-height: 0; overflow-y: auto; -ms-overflow-style:none; scrollbar-width:none; padding: 14px 10px; border-right: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-deep) 56%, var(--scene-main)), var(--surface-deep)); }
.sidebar::-webkit-scrollbar { width:0; height:0; display:none; }
.nav-label { margin: 5px 8px 9px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.13em; }
.nav-item { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; margin: 2px 0; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--text) 76%, var(--muted)); text-align: left; font-size: 13px; }
.nav-item > span { width: 15px; color: var(--accent-a); text-align: center; }
.nav-item small { margin-left: auto; color: var(--muted); font-size: 10px; }
.sidebar #admin-nav[hidden] { display: none !important; }
.nav-item:hover, .nav-item.is-current { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-a) 22%, transparent), color-mix(in srgb, var(--accent-b) 16%, transparent)); color: var(--text); }
.nav-children { display: grid; gap: 1px; margin: 2px 0 5px 24px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--line) 76%, transparent); }
.nav-children button { min-height: 27px; padding: 0 5px; border: 0; border-radius: 5px; background: transparent; color: color-mix(in srgb, var(--text) 74%, var(--muted)); text-align: left; font-size: 11px; }
.nav-children button:hover, .nav-children button.is-current { background: color-mix(in srgb, var(--accent-a) 14%, transparent); color: var(--text); }
.nav-children small { float: right; color: var(--muted); font-size: 9px; }
.nav-admin-divider { height: 1px; margin: 8px 8px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.workspace { min-width: 0; min-height: 0; overflow-y: auto; padding: 24px; background: radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--accent-a) 12%, transparent), transparent 26%), var(--page); }
.screen { display: none; }
.screen.is-active { display: block; }
.page-heading, .section-heading, .admin-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.page-heading { margin-bottom: 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: 25px; font-weight: 600; }
.page-heading p, .admin-heading > div > p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.location-chip { flex: 0 0 auto; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--accent-a) 55%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--scene-main) 50%, transparent); color: color-mix(in srgb, var(--text) 82%, var(--accent-a)); font-size: 11px; }
.location-scene { position: relative; min-height: 224px; overflow: hidden; isolation: isolate; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent-a) 48%, var(--line)); border-radius: 14px; background: linear-gradient(122deg, color-mix(in srgb, var(--scene-main) 91%, #0a0d18), color-mix(in srgb, var(--scene-edge) 75%, #111521)); }
.location-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55; background-image: linear-gradient(90deg, color-mix(in srgb, var(--scene-glow) 14%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--scene-glow) 11%, transparent) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, transparent 10%, #000 52%, #000); }
.scene-light { position: absolute; z-index: -1; right: 14%; top: 14%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--scene-glow) 68%, transparent) 0 4%, color-mix(in srgb, var(--accent-b) 31%, transparent) 26%, transparent 69%); filter: blur(1px); }
.scene-shape { position: absolute; z-index: -1; bottom: 0; }
.scene-shape-one { right: 14%; width: 56%; height: 68%; background: var(--scene-structure); clip-path: polygon(0 58%, 9% 58%, 9% 23%, 17% 23%, 17% 74%, 29% 74%, 29% 0, 39% 0, 39% 49%, 51% 49%, 51% 18%, 63% 18%, 63% 69%, 72% 69%, 72% 30%, 84% 30%, 84% 57%, 100% 57%, 100% 100%, 0 100%); opacity: 0.9; }
.scene-shape-two { right: 2%; width: 47%; height: 49%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--scene-glow) 17%, var(--scene-structure)) 0 2px, var(--scene-structure) 2px 16px); clip-path: polygon(0 70%, 18% 35%, 28% 70%, 46% 5%, 56% 70%, 72% 38%, 100% 70%, 100% 100%, 0 100%); }
.scene-foreground { position: absolute; z-index: -1; left: 0; right: 0; bottom: -16px; height: 53%; background: linear-gradient(157deg, transparent 0 28%, color-mix(in srgb, var(--scene-foreground) 84%, transparent) 29% 32%, transparent 33% 48%, color-mix(in srgb, var(--scene-foreground) 84%, transparent) 49% 52%, transparent 53%), linear-gradient(180deg, transparent, color-mix(in srgb, var(--scene-foreground) 82%, transparent)); transform: skewY(-7deg); }
.scene-copy { position: relative; max-width: min(56%, 390px); }
.eyebrow, .section-kicker { margin-bottom: 8px; color: var(--accent-a); font-size: 10px; font-weight: 600; letter-spacing: 0.13em; }
.location-scene h2 { margin-bottom: 8px; font-size: 22px; font-weight: 600; }
.location-scene p:not(.eyebrow) { margin-bottom: 0; color: color-mix(in srgb, var(--text) 80%, var(--accent-a)); font-size: 12px; line-height: 1.6; }
.scene-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.scene-tags span { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent-a) 36%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--surface-deep) 48%, transparent); color: var(--text); font-size: 10px; }
.battle-summary { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(132deg, color-mix(in srgb, var(--surface) 89%, var(--scene-main)), color-mix(in srgb, var(--surface-soft) 84%, var(--scene-edge))); }
.section-heading h2 { margin-bottom: 0; font-size: 16px; font-weight: 600; }
.turn-label { color: var(--accent-a); font-size: 11px; }
.combatants { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 10px; align-items: center; margin-top: 14px; }
.fighter-card { min-width: 0; padding: 12px; border-radius: 9px; background: color-mix(in srgb, var(--surface-deep) 62%, transparent); }
.fighter-card h3 { margin-bottom: 3px; font-size: 13px; font-weight: 600; }
.fighter-card p { margin-bottom: 0; color: var(--muted); font-size: 10px; }
.health-track { height: 5px; overflow: hidden; margin-top: 11px; border-radius: 99px; background: color-mix(in srgb, var(--line) 76%, transparent); }
.health-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); }
.enemy-track span { background: linear-gradient(90deg, #d18471, #edb35a); }
.fighter-card strong { display: block; margin-top: 5px; font-size: 11px; }
.versus { color: var(--muted); text-align: center; font-size: 11px; }
.battle-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.battle-footer p { margin-bottom: 0; color: var(--muted); font-size: 11px; }
.battle-footer strong { color: var(--text); font-weight: 600; }
.primary-button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 13px; margin-top: 13px; }
.detail-panel { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 83%, transparent); }
.activity-row { display: flex; justify-content: space-between; gap: 9px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 54%, transparent); color: color-mix(in srgb, var(--text) 85%, var(--muted)); font-size: 11px; }
.activity-row:last-child { border-bottom: 0; }
.activity-row time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.panel-copy { margin-bottom: 0; color: color-mix(in srgb, var(--text) 76%, var(--muted)); font-size: 12px; line-height: 1.65; }
.placeholder-screen { min-height: 430px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--scene-main) 34%, var(--surface)), color-mix(in srgb, var(--scene-edge) 34%, var(--surface-deep))); }
.placeholder-screen h1 { margin-bottom: 8px; }
.placeholder-screen > p:last-child { color: var(--muted); font-size: 13px; }
.progress-screen { max-width: 980px; }
.progress-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.progress-heading h1 { margin:0 0 6px; font-size:26px; font-weight:600; }
.progress-heading p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.progress-context-card { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:126px; padding:21px; border:1px solid color-mix(in srgb, var(--accent-a) 48%, var(--line)); border-radius:14px; background:radial-gradient(circle at 91% 5%, color-mix(in srgb, var(--accent-b) 30%, transparent), transparent 38%), linear-gradient(125deg, color-mix(in srgb, var(--scene-main) 42%, var(--surface)), color-mix(in srgb, var(--scene-edge) 38%, var(--surface-deep))); }
.progress-context-main { display:flex; align-items:center; gap:15px; min-width:0; }
.progress-context-icon { display:grid; flex:0 0 auto; width:54px; height:54px; place-items:center; border:1px solid color-mix(in srgb, var(--accent-a) 68%, var(--line)); border-radius:14px; background:color-mix(in srgb, var(--surface-deep) 65%, transparent); color:var(--accent-a); font-size:24px; box-shadow:inset 0 0 22px color-mix(in srgb, var(--accent-a) 12%, transparent); }
.progress-context-main p { margin:0; color:var(--muted); font-size:11px; letter-spacing:.08em; }
.progress-context-main h2 { margin:4px 0; overflow-wrap:anywhere; font-size:20px; font-weight:600; }
.progress-context-main p:last-child { letter-spacing:0; line-height:1.5; }
.progress-context-state { flex:0 0 auto; padding:7px 9px; border:1px solid color-mix(in srgb, var(--accent-a) 54%, var(--line)); border-radius:999px; background:color-mix(in srgb, var(--surface-deep) 55%, transparent); color:var(--text); font-size:11px; }
.progress-session-locked { margin-top:14px; padding:19px; border:1px solid color-mix(in srgb, var(--accent-b) 55%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--surface-deep) 63%, var(--scene-edge)); }
.progress-session-locked h2 { margin:5px 0; font-size:17px; font-weight:600; }
.progress-session-locked > p:not(.section-kicker) { margin:0 0 13px; color:var(--muted); font-size:12px; line-height:1.6; }
.progress-actions { margin-top:14px; overflow:hidden; border:1px solid color-mix(in srgb, var(--line) 82%, var(--accent-a)); border-radius:13px; background:color-mix(in srgb, var(--surface-deep) 44%, var(--surface)); }
.progress-actions > header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 19px; border-bottom:1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.progress-actions h2 { margin:4px 0 0; font-size:17px; font-weight:600; }
.progress-actions > header > span { color:var(--muted); font-size:11px; text-align:right; }
.progress-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.progress-action-grid article { display:flex; gap:11px; min-width:0; padding:18px; border-right:1px solid color-mix(in srgb, var(--line) 64%, transparent); background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 72%,transparent),color-mix(in srgb,var(--surface-deep) 62%,transparent)); }
.progress-action-grid article:last-child { border-right:0; }
.progress-action-grid article > span { display:grid; flex:0 0 auto; width:31px; height:31px; place-items:center; border:1px solid color-mix(in srgb, var(--accent-a) 46%, var(--line)); border-radius:8px; color:var(--accent-a); font-size:14px; }
.progress-action-grid strong { display:block; margin:1px 0 5px; font-size:13px; font-weight:600; }
.progress-action-grid p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.progress-action-grid small { align-self:flex-start; margin-left:auto; color:color-mix(in srgb,var(--muted) 74%,var(--accent-a)); font-size:9px; white-space:nowrap; }
.progress-footnote { margin:12px 2px; color:var(--muted); font-size:11px; line-height:1.55; }
.progress-screen { max-width:none; }
.screen.progress-screen.is-active { display:flex; flex-direction:column; min-height:calc(100dvh - 112px); }
.progress-console-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 2px 14px; }
.progress-console-channel { display:flex; align-items:center; gap:11px; min-width:0; }
.progress-console-channel > span { display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; border:1px solid color-mix(in srgb,var(--accent-a) 58%,var(--line)); border-radius:9px; color:var(--accent-a); background:color-mix(in srgb,var(--surface-deep) 65%,transparent); font-size:15px; }
.progress-console-channel p { margin:0; color:var(--muted); font-size:10px; line-height:1.35; }
.progress-console-channel h1 { margin:1px 0 2px; overflow-wrap:anywhere; font-size:18px; font-weight:600; }
.progress-console-meta { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.progress-console-meta > span { padding:6px 8px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-a)); border-radius:999px; color:var(--muted); font-size:10px; }
.progress-session-bar { display:flex; align-items:center; gap:0; min-height:65px; border:1px solid color-mix(in srgb,var(--line) 86%,var(--accent-a)); border-radius:11px 11px 0 0; background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 84%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 82%,var(--scene-edge))); }
.progress-session-bar > div { min-width:0; flex:1; padding:11px 16px; border-right:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.progress-session-bar p { margin:0 0 4px; color:var(--muted); font-size:9px; letter-spacing:.08em; }
.progress-session-bar strong { display:block; overflow:hidden; color:var(--text); font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.progress-session-bar .primary-button { flex:0 0 auto; margin:0 12px; }
.progress-log { display:flex; flex:1; flex-direction:column; min-height:420px; overflow-y:auto; padding:20px clamp(16px,4vw,44px); border:1px solid color-mix(in srgb,var(--line) 84%,var(--accent-a)); border-top:0; background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent-a) 7%,transparent),transparent 34%),color-mix(in srgb,var(--surface-deep) 80%,var(--page)); }
.progress-log-divider { align-self:center; margin:2px 0 22px; padding:4px 11px; border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:999px; color:var(--muted); font-size:10px; }
.list-search { display:block; margin:16px 0 10px; }.list-search input { width:min(100%,460px); min-height:38px; padding:8px 11px; border:1px solid color-mix(in srgb,var(--accent-a) 45%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 84%,var(--page)); color:var(--text); }
.admin-library-pager { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:12px 0 4px; color:var(--muted); font-size:12px; }.admin-library-pager span { margin-right:auto; }.admin-library-pager .quiet-button { min-width:38px; min-height:32px; }
.entity-picker-native { display:none !important; }.entity-picker-button { width:100%; min-height:36px; padding:8px 10px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent-a) 48%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 82%,var(--page)); color:var(--text); text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }.entity-picker-button::after { content:'⌕'; float:right; color:var(--accent-a); font-size:16px; line-height:.8; }.entity-picker-dialog { width:min(620px,calc(100vw - 28px)); max-height:min(720px,calc(100dvh - 28px)); padding:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent-a) 60%,var(--line)); border-radius:14px; background:linear-gradient(150deg,var(--surface),var(--surface-deep)); color:var(--text); box-shadow:0 24px 70px rgba(0,0,0,.54); }.entity-picker-dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }.entity-picker-dialog header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px 11px; border-bottom:1px solid var(--line); }.entity-picker-dialog h2,.entity-picker-dialog p { margin:0; }.entity-picker-dialog h2 { font-size:19px; }.entity-picker-dialog > label { display:block; padding:13px 18px 9px; }.entity-picker-dialog input { width:100%; min-height:40px; padding:8px 11px; border:1px solid color-mix(in srgb,var(--accent-a) 52%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 85%,var(--page)); color:var(--text); }.entity-picker-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:min(530px,calc(100dvh - 190px)); padding:9px 18px 18px; overflow:auto; }.entity-picker-list button { display:grid; gap:3px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 76%,var(--page)); color:var(--text); text-align:left; cursor:pointer; }.entity-picker-list button:hover,.entity-picker-list button.is-selected { border-color:var(--accent-a); background:color-mix(in srgb,var(--accent-a) 13%,var(--surface-deep)); }.entity-picker-list strong,.entity-picker-list small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.entity-picker-list small { color:var(--muted); font-size:10px; }
@media (max-width:700px) { .entity-picker-list { grid-template-columns:1fr; } }
.progress-log-entry { display:flex; gap:10px; max-width:min(680px,92%); margin-bottom:10px; padding:12px 13px; border:1px solid color-mix(in srgb,var(--line) 74%,var(--accent-a)); border-radius:3px 12px 12px 12px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 84%,transparent),color-mix(in srgb,var(--surface-deep) 70%,transparent)); }
.progress-log-entry > span { color:var(--accent-a); font-size:11px; line-height:1.5; }
.progress-log-entry strong { display:block; margin-bottom:4px; color:var(--text); font-size:12px; font-weight:600; }
.progress-log-entry p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
.progress-battle-dock { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 15px; border:1px solid color-mix(in srgb,var(--accent-a) 44%,var(--line)); border-top:0; border-radius:0 0 11px 11px; background:color-mix(in srgb,var(--surface) 82%,var(--scene-main)); }
.progress-command-dock { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px; border:1px solid color-mix(in srgb,var(--accent-a) 44%,var(--line)); border-top:0; border-radius:0 0 11px 11px; background:color-mix(in srgb,var(--surface) 82%,var(--scene-main)); }.progress-check-controls,.progress-admin-move { display:flex; align-items:center; gap:8px; }.progress-command-dock select { min-height:32px; max-width:190px; }.progress-command-status { flex:1 1 160px; min-height:16px; margin:0 0 0 auto; color:var(--muted); font-size:10px; line-height:1.4; text-align:right; }.progress-check-panel { display:grid; gap:9px; margin:0 auto 14px; padding:15px; border:1px solid color-mix(in srgb,var(--accent-a) 60%,var(--line)); border-radius:11px; background:color-mix(in srgb,var(--surface-deep) 72%,var(--scene-main)); }.progress-check-panel p,.progress-check-panel h2 { margin:0; }.progress-check-panel p { color:var(--accent-a); font-size:10px; letter-spacing:.1em; }.progress-check-panel h2 { font-size:13px; font-weight:600; }.progress-check-panel > div { display:flex; flex-wrap:wrap; gap:7px; }
.progress-battle-dock p { margin:0 0 2px; color:var(--accent-a); font-size:9px; letter-spacing:.12em; }
.progress-battle-dock strong { font-size:12px; font-weight:600; }
.progress-battle-dock .quiet-button:disabled { opacity:.55; cursor:default; }
.battle-order { width:min(680px,100%); margin:18px auto 0; overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-a)); border-radius:11px; background:color-mix(in srgb,var(--surface) 74%,var(--surface-deep)); }
.battle-order > p { margin:0; padding:10px 13px; border-bottom:1px solid var(--line); }
.battle-order article { display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; padding:10px 13px; border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent); }
.battle-order article:last-child { border-bottom:0; }
.battle-order article > span { color:var(--muted); font-size:10px; }.battle-order article.ally > span { color:var(--accent-a); }.battle-order article.enemy > span { color:var(--accent-b); }.battle-order strong { font-size:12px; }.battle-order em { color:var(--text); font-size:13px; font-style:normal; font-weight:700; }
.battle-hand { width:min(680px,100%); margin:14px auto 0; padding:13px; border:1px solid color-mix(in srgb,var(--accent-a) 48%,var(--line)); border-radius:11px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 80%,var(--scene-edge))); }.battle-hand > p { margin:0 0 9px; }.battle-hand > div { display:flex; gap:8px; }.battle-hand > div span { min-width:48px; padding:9px 11px; border:1px solid color-mix(in srgb,var(--accent-a) 58%,var(--line)); border-radius:8px; color:var(--text); background:color-mix(in srgb,var(--surface-deep) 65%,transparent); text-align:center; font-size:12px; }.battle-hand small { display:block; margin-top:10px; color:var(--muted); font-size:10px; line-height:1.5; }
.enemy-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface) 82%,var(--scene-main)); }.enemy-form label { display:grid; gap:6px; }.enemy-form label span { color:var(--muted); font-size:11px; }.enemy-form input,.enemy-form select { min-width:0; }.enemy-form button { align-self:end; }
.enemy-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.enemy-template-grid article { min-width:0; padding:13px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 68%,var(--surface)); }.enemy-template-grid p { margin:0 0 5px; color:var(--accent-a); font-size:10px; }.enemy-template-grid h2 { margin:0 0 8px; overflow-wrap:anywhere; font-size:15px; }.enemy-template-grid span { color:var(--muted); font-size:10px; line-height:1.5; }
.combat-data-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface) 82%,var(--scene-main)); }.combat-data-form label { display:grid; gap:6px; }.combat-data-form label span { color:var(--muted); font-size:11px; }.combat-data-form .wide { grid-column:span 3; }.combat-data-form button { align-self:end; }.passive-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.passive-form .wide { grid-column:span 2; }.combat-data-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }.combat-data-list article { min-width:0; padding:13px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 68%,var(--surface)); }.combat-data-list p { margin:0 0 5px; color:var(--accent-a); font-size:10px; }.combat-data-list h2 { margin:0 0 7px; overflow-wrap:anywhere; font-size:15px; }.combat-data-list strong { display:block; margin-bottom:8px; color:color-mix(in srgb,var(--text) 84%,var(--accent-b)); font-size:12px; }.combat-data-list span { color:var(--muted); font-size:10px; line-height:1.5; white-space:pre-wrap; }
.skill-editor { display:grid; grid-template-columns:1fr; gap:15px; }.skill-base-fields { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }.skill-effect-group { display:grid; gap:10px; padding:13px; border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent-a)); border-radius:11px; background:color-mix(in srgb,var(--surface-deep) 54%,transparent); }.effect-group-heading,.coin-editor-heading,.skill-form-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }.effect-group-heading h2,.coin-editor-heading h3 { margin:0; color:var(--text); font-size:14px; }.effect-group-heading p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }.effect-group-heading .quiet-button,.coin-editor-heading .quiet-button { min-height:30px; padding:0 9px; }.effect-list { display:grid; gap:8px; }.effect-list:empty::before { content:'등록된 효과가 없습니다.'; padding:7px 1px; color:var(--muted); font-size:10px; }.skill-effect-row { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:25px 9px 9px; border:1px solid color-mix(in srgb,var(--line) 72%,var(--accent-b)); border-radius:8px; background:color-mix(in srgb,var(--surface) 72%,var(--surface-deep)); }.skill-effect-row label { min-width:0; }.skill-effect-row label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.skill-effect-row input,.skill-effect-row select { min-width:0; padding:7px; font-size:10px; }.effect-remove { position:absolute; top:6px; right:7px; width:20px; height:20px; padding:0; border:1px solid color-mix(in srgb,#dc6c74 62%,var(--line)); border-radius:5px; background:transparent; color:#f39ba1; font-size:15px; line-height:1; }.coin-editor-list { display:grid; gap:11px; }.coin-editor { display:grid; gap:10px; padding:12px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-b)); border-radius:10px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 78%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 78%,var(--scene-edge))); }.coin-base-fields { display:grid; grid-template-columns:repeat(2,minmax(0,180px)); gap:10px; }.skill-description { max-width:760px; }.skill-description textarea { width:100%; resize:vertical; }.skill-form-footer { align-items:center; padding-top:2px; }.skill-form-footer .admin-save-status { margin:0; }.combat-data-list article strong { white-space:pre-line; }
.base-skill-admin { padding:15px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:11px; background:color-mix(in srgb,var(--surface-deep) 48%,transparent); }.base-skill-admin h2 { margin:0; }.base-skill-admin > p { margin:6px 0 13px; color:var(--muted); font-size:11px; line-height:1.55; }
.skill-editor { gap:20px; padding:22px; }.skill-base-fields { grid-template-columns:repeat(3,minmax(170px,1fr)); gap:16px; }.skill-editor label > span { font-size:13px; }.skill-editor input,.skill-editor select,.skill-editor textarea { min-height:42px; padding:9px 11px; font-size:14px; }.skill-editor textarea { line-height:1.55; }.skill-effect-group { gap:15px; padding:19px; border-radius:14px; }.effect-group-heading h2,.coin-editor-heading h3 { font-size:18px; }.effect-group-heading p { margin-top:6px; font-size:12px; }.effect-group-heading .quiet-button,.coin-editor-heading .quiet-button { min-height:38px; padding:0 13px; font-size:13px; }.effect-list { gap:12px; }.effect-list:empty::before { padding:10px 2px; font-size:12px; }.skill-effect-row { grid-template-columns:repeat(4,minmax(145px,1fr)); gap:14px; padding:34px 14px 15px; border-radius:11px; }.skill-effect-row label { gap:7px; }.skill-effect-row label span { font-size:12px; }.skill-effect-row input,.skill-effect-row select { min-height:39px; padding:8px 9px; font-size:13px; }.effect-remove { top:8px; right:9px; width:25px; height:25px; font-size:19px; }.coin-editor-list { gap:15px; }.coin-editor { gap:14px; padding:17px; border-radius:13px; }.coin-base-fields { grid-template-columns:repeat(2,minmax(170px,230px)); gap:14px; }.skill-description { max-width:100%; }.skill-form-footer { padding-top:6px; }.skill-form-footer .primary-button { min-height:42px; padding:0 18px; font-size:14px; }
.passive-editor { display:grid; grid-template-columns:1fr; gap:20px; padding:22px; }.passive-editor label > span { font-size:13px; }.passive-editor input,.passive-editor select,.passive-editor textarea { min-height:42px; padding:9px 11px; font-size:14px; }.passive-name { max-width:360px; }.passive-effect-group { display:grid; gap:15px; padding:19px; border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent-b)); border-radius:14px; background:color-mix(in srgb,var(--surface-deep) 54%,transparent); }.passive-effect-list { display:grid; gap:12px; }.passive-effect-list:empty::before { content:'등록된 효과가 없습니다.'; padding:10px 2px; color:var(--muted); font-size:12px; }.passive-effect-row { position:relative; display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:14px; padding:34px 14px 15px; border:1px solid color-mix(in srgb,var(--line) 72%,var(--accent-a)); border-radius:11px; background:color-mix(in srgb,var(--surface) 72%,var(--surface-deep)); }.passive-effect-row label { min-width:0; gap:7px; }.passive-effect-row label span { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.passive-effect-row input,.passive-effect-row select { min-width:0; min-height:39px; padding:8px 9px; font-size:13px; }
.battle-casting-panel,.battle-active-card { padding:17px; border:1px solid color-mix(in srgb,var(--accent-a) 48%,var(--line)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 82%,var(--scene-edge))); }.placement-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.placement-picker button,.battle-slot-grid button,.battle-entity-grid button { min-width:0; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-deep) 72%,transparent); color:var(--text); }.placement-picker button { min-height:44px; padding:8px; border-radius:8px; font-size:11px; }.placement-picker button.is-selected,.battle-slot-grid button.is-selected { border-color:var(--accent-a); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 44%,transparent); color:var(--accent-a); }.battle-casting-grid { display:grid; grid-template-columns:minmax(210px,.8fr) minmax(0,1.6fr); gap:17px; margin-top:18px; }.battle-slot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.battle-slot-grid button { display:grid; gap:6px; min-height:80px; padding:11px; border-radius:9px; text-align:left; }.battle-slot-grid span { color:var(--muted); font-size:10px; }.battle-slot-grid strong { overflow-wrap:anywhere; font-size:12px; }.battle-selection-copy { margin:5px 0 10px; color:var(--muted); font-size:11px; }.battle-enemy-groups section + section { margin-top:12px; }.battle-enemy-groups section > p { margin:0 0 7px; color:var(--muted); font-size:10px; }.battle-entity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.battle-entity-grid button { display:grid; gap:5px; padding:10px; border-radius:8px; text-align:left; }.battle-entity-grid strong { overflow-wrap:anywhere; font-size:12px; }.battle-entity-grid span,.battle-entity-grid small,.empty-choice { color:var(--muted); font-size:10px; line-height:1.35; }.battle-cast-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }.battle-cast-footer p,.battle-active-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.battle-active-card { margin-top:14px; }.battle-active-card h2 { margin:5px 0; font-size:18px; }.battle-active-card .danger-button { margin-top:13px; }
.battle-join-control { display:flex; gap:8px; margin-top:13px; }.battle-join-control select { min-width:0; flex:1; }
.progress-log:has(.battle-board) { display:flex; gap:14px; min-height:0; padding:18px clamp(14px,2vw,28px) 0; overflow:hidden; }
.battle-board { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.32fr) minmax(0,1fr); align-items:center; flex:1 1 auto; min-height:350px; padding:16px 10px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:13px; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent-a) 9%,transparent),transparent 44%),linear-gradient(165deg,color-mix(in srgb,var(--surface-deep) 88%,var(--page)),color-mix(in srgb,var(--surface) 68%,var(--page))); }
.battle-board-side { min-width:0; }.battle-board-side > p { margin:0 0 15px; color:var(--muted); font-size:10px; letter-spacing:.14em; }.enemy-side > p { text-align:right; }.combatant-line { display:flex; flex-wrap:wrap; gap:26px 18px; align-items:flex-end; }.ally-side .combatant-line { justify-content:flex-start; }.enemy-side .combatant-line { justify-content:flex-end; }.combatant { position:relative; display:grid; justify-items:center; width:112px; min-width:0; padding-top:56px; }.combat-speed { position:absolute; top:0; margin:0; color:var(--text); font-size:19px; font-weight:700; }.combat-speed::before { content:'속도'; display:block; margin-bottom:2px; color:var(--muted); font-size:8px; font-weight:500; letter-spacing:.1em; text-align:center; }.combat-slot { position:absolute; top:28px; z-index:4; display:grid; width:76px; min-height:30px; place-items:center; padding:5px; border:1px solid #f3d34b; border-radius:5px; background:color-mix(in srgb,var(--surface-deep) 84%,#342c00); color:#ffe97c; font-size:10px; cursor:pointer; }.combat-slot:hover,.combat-slot:focus-visible { box-shadow:0 0 0 2px color-mix(in srgb,#f3d34b 45%,transparent),0 0 24px color-mix(in srgb,#f3d34b 18%,transparent); }.slot-preview { position:absolute; bottom:calc(100% + 8px); left:50%; z-index:20; width:158px; padding:10px; border:1px solid #f3d34b; border-radius:7px; background:#17140a; color:#fff3ae; font-size:11px; font-style:normal; line-height:1.45; opacity:0; pointer-events:none; transform:translate(-50%,5px) scale(.94); transition:.16s ease; }.combat-slot:hover .slot-preview,.combat-slot:focus-visible .slot-preview { opacity:1; transform:translate(-50%,0) scale(1); }.combat-token { display:grid; width:76px; height:76px; place-items:center; overflow:hidden; border:3px solid #77d9ff; border-radius:50%; background:radial-gradient(circle at 30% 26%,#d9f4ff,#4eb9e9); color:#072537; box-shadow:0 0 0 5px color-mix(in srgb,#77d9ff 12%,transparent); font-size:25px; font-weight:700; }.combatant.enemy .combat-token { border-color:#ff7cb4; background:radial-gradient(circle at 30% 26%,#ffd3e6,#df367f); color:#3d0520; box-shadow:0 0 0 5px color-mix(in srgb,#ff7cb4 12%,transparent); }.combat-token img { width:100%; height:100%; object-fit:cover; }.combatant > strong { max-width:100%; margin-top:9px; overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.combatant > small { margin-top:3px; color:var(--muted); font-size:9px; }.battle-target-lane { display:grid; gap:6px; place-items:center; align-self:center; min-height:90px; color:var(--muted); text-align:center; }.battle-target-lane span { color:#f3d34b; font-size:55px; line-height:.8; text-shadow:0 0 16px color-mix(in srgb,#f3d34b 54%,transparent); }.battle-target-lane.is-targeting::after { content:'지정'; color:#f3d34b; font-size:9px; letter-spacing:.12em; }.battle-target-lane small { max-width:100px; font-size:10px; line-height:1.4; }
.battle-card-zone { display:grid; grid-template-columns:112px minmax(0,1fr) 112px; align-items:end; flex:0 0 auto; min-height:172px; margin:-5px -28px 0; padding:13px 28px 0; border-top:1px solid color-mix(in srgb,var(--line) 76%,transparent); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface-deep) 76%,var(--page)) 22%); }.battle-pile { display:grid; justify-items:center; gap:8px; align-self:center; }.battle-pile p { margin:0; color:var(--muted); font-size:9px; line-height:1.4; text-align:center; }.battle-pile p strong { display:block; color:#fff; font-size:17px; }.battle-pile button { width:75px; height:76px; border:3px solid #6f8bff; border-radius:7px; background:linear-gradient(135deg,#10162e,#233c76); color:#dce5ff; font-size:10px; cursor:pointer; }.draw-pile button { border-color:#70e78d; background:linear-gradient(135deg,#0b2814,#226a37); color:#d7ffe0; }.battle-pile button:hover { filter:brightness(1.2); transform:translateY(-3px); }.battle-hand-zone { position:relative; min-width:0; min-height:160px; overflow:visible; }.battle-hand-zone > .section-kicker { margin:0 0 0 12px; color:var(--muted); font-size:9px; }.battle-card-hand { display:flex; justify-content:center; align-items:flex-end; min-height:143px; padding:24px 4px 0; overflow:visible; }.battle-card { position:relative; display:grid; align-content:start; gap:6px; width:128px; height:142px; margin-left:-13px; padding:14px 11px; border:2px solid #c34553; border-bottom:0; border-radius:10px 10px 0 0; background:linear-gradient(145deg,#421319,#9c2938 54%,#321115); color:#fff0f0; text-align:left; transform:translateY(39px); transition:transform .17s ease,filter .17s ease; cursor:pointer; }.battle-card:first-child { margin-left:0; }.battle-card:hover,.battle-card:focus-visible,.battle-card.is-selected { z-index:10; filter:brightness(1.22); transform:translateY(-7px); }.battle-card.is-selected { border-color:#ffe477; box-shadow:0 0 0 2px color-mix(in srgb,#ffe477 50%,transparent); }.battle-card span { font-size:19px; font-weight:700; }.battle-card strong { font-size:10px; font-weight:500; }.battle-card small { color:#ffd9d9; font-size:9px; line-height:1.45; }.battle-pile-panel { position:absolute; bottom:154px; left:50%; z-index:30; display:grid; gap:5px; width:min(360px,92%); padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 95%,#000); box-shadow:0 14px 30px #0008; transform:translateX(-50%); }.battle-pile-panel strong { color:var(--text); font-size:11px; }.battle-pile-panel span { color:var(--muted); font-size:10px; line-height:1.5; }
.lobby-channel-board { overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-a) 34%, var(--line)); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--scene-main)), color-mix(in srgb, var(--surface-deep) 88%, var(--scene-edge))); }
.lobby-channel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 22px; border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent); background: radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--accent-a) 17%, transparent), transparent 28%); }
.lobby-channel-heading h2 { margin-bottom: 6px; font-size: 22px; font-weight: 600; }
.lobby-channel-heading > div > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lobby-channel-heading > span { flex: 0 0 auto; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--accent-a) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface-deep) 55%, transparent); color: color-mix(in srgb, var(--text) 84%, var(--accent-a)); font-size: 10px; }
.channel-group { padding: 18px 20px 0; }
.channel-group-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.channel-group-heading p { margin: 0; color: var(--accent-a); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.channel-group-heading span { padding: 2px 6px; border-radius: 99px; background: color-mix(in srgb, var(--accent-a) 18%, transparent); color: var(--text); font-size: 10px; }
.channel-card { position: relative; min-height: 108px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; overflow: hidden; padding: 15px; border: 1px solid color-mix(in srgb, var(--line) 87%, var(--accent-a)); border-radius: 10px; background: color-mix(in srgb, var(--surface-deep) 54%, var(--surface)); color: var(--text); text-align: left; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.channel-card::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: transparent; }
.channel-card:hover { transform: translateY(-2px); border-color: var(--accent-a); background: color-mix(in srgb, var(--scene-main) 34%, var(--surface)); }
.channel-card.is-current, .channel-card[aria-pressed="true"] { border-color: var(--accent-a); background: linear-gradient(126deg, color-mix(in srgb, var(--accent-a) 18%, var(--surface)), color-mix(in srgb, var(--accent-b) 12%, var(--surface-deep))); }
.channel-card.is-current::after, .channel-card[aria-pressed="true"]::after { background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); }
.channel-card-kicker { color: var(--accent-a); font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.channel-card strong { font-size: 14px; font-weight: 600; }
.channel-card-copy { color: var(--muted); font-size: 11px; line-height: 1.5; }
.session-card { min-height: 128px; padding-right: 100px; background: radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--accent-a) 22%, transparent), transparent 30%), color-mix(in srgb, var(--surface-deep) 45%, var(--surface)); }
.session-entry { overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 87%, var(--accent-a)); border-radius: 10px; background: color-mix(in srgb, var(--surface-deep) 43%, var(--surface)); }
.session-entry .session-card { border: 0; border-radius: 0; }
.session-entry .session-card:hover { transform: none; }
.session-actions { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent); }
.session-actions p { flex: 1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.session-actions .quiet-button { min-height: 29px; }
.channel-card-state { position: absolute; top: 16px; right: 18px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent-a) 52%, var(--line)); border-radius: 999px; color: color-mix(in srgb, var(--text) 88%, var(--accent-a)); font-size: 10px; }
.online-count { flex:0 0 auto; padding:5px 8px; border:1px solid color-mix(in srgb,var(--accent-a) 52%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--surface-deep) 60%,transparent); color:var(--muted); font-size:10px; }.session-member-list { display:flex; flex-wrap:wrap; gap:6px; padding:9px 12px 11px; border-top:1px solid color-mix(in srgb,var(--line) 68%,transparent); background:color-mix(in srgb,var(--surface-deep) 37%,transparent); }.session-member-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 7px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:999px; color:var(--muted); font-size:10px; white-space:nowrap; }.session-member-chip i { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--muted); }.session-member-chip.is-online { border-color:color-mix(in srgb,var(--accent-a) 65%,var(--line)); color:var(--text); }.session-member-chip.is-online i { background:var(--accent-a); box-shadow:0 0 8px color-mix(in srgb,var(--accent-a) 76%,transparent); }.session-member-chip b { color:var(--accent-b); font-size:9px; }.empty-session-members { color:var(--muted); font-size:10px; }
.plaza-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.plaza-channel-grid .channel-card { min-height: 126px; }
.notice-board { margin-top:14px; padding:18px 20px; border:1px solid color-mix(in srgb, var(--accent-a) 38%, var(--line)); border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, var(--scene-main)), color-mix(in srgb, var(--surface-deep) 84%, var(--scene-edge))); }
.notice-list { display:grid; gap:8px; margin-top:13px; }
.notice-list article { padding:11px 12px; border-left:3px solid var(--accent-a); border-radius:0 8px 8px 0; background:color-mix(in srgb, var(--surface-deep) 52%, transparent); }
.notice-history { width:min(640px,calc(100vw - 32px)); max-height:min(720px,calc(100dvh - 32px)); border:1px solid color-mix(in srgb,var(--accent-a) 60%,var(--line)); border-radius:14px; background:linear-gradient(145deg,var(--surface),var(--surface-deep)); color:var(--text); box-shadow:0 26px 70px #000a; }.notice-history::backdrop { background:#0009; }.notice-history header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }.notice-history h2 { margin:0; font-size:18px; }.notice-history-list,.notice-history #notice-history-list { display:grid; gap:9px; overflow:auto; max-height:calc(100dvh - 170px); }.notice-history article { padding:12px; border-left:3px solid var(--accent-a); border-radius:0 8px 8px 0; background:color-mix(in srgb,var(--surface-deep) 65%,transparent); }.notice-history article p { margin:5px 0 0; line-height:1.65; white-space:pre-wrap; }
.notice-list strong { display:block; margin-bottom:4px; color:var(--accent-a); font-size:11px; }
.notice-list p, .notice-form p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.notice-form { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.notice-form label { display:grid; gap:5px; }
.notice-form label > span { color:var(--muted); font-size:10px; }
.notice-form textarea { width:100%; min-height:70px; padding:8px; border:1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius:7px; outline:0; resize:vertical; background:color-mix(in srgb, var(--surface-deep) 76%, transparent); color:var(--text); font-size:12px; }
.notice-form .primary-button { justify-self:start; }
.selected-channel-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); gap: 16px; margin: 20px; padding: 17px; border: 1px solid color-mix(in srgb, var(--accent-a) 38%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface-deep) 43%, var(--surface)); }
.selected-channel-card h2 { margin-bottom: 5px; font-size: 16px; font-weight: 600; }
.selected-channel-card > div > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.selected-channel-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.selected-channel-actions > p { margin: 0; color: color-mix(in srgb, var(--text) 78%, var(--muted)); font-size: 11px; line-height: 1.5; text-align: right; }
.selected-channel-card .movement-menu { grid-column: 1 / -1; margin: 0 -17px -17px; border-radius: 0 0 11px 11px; }
.chat-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: 100%; overflow: hidden; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--chat), var(--surface-deep)); }
.chat-header { padding: 17px 15px 14px; border-bottom: 1px solid var(--line); }
.chat-header p { margin: 0 0 6px; color: var(--accent-a); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.chat-header strong { display: block; font-size: 16px; font-weight: 600; }
.chat-header span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.channel-context { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.channel-context span { color: var(--muted); font-size: 12px; }
.channel-action { flex: 0 0 auto; min-height: 29px; padding: 0 8px; border: 0; border-radius: 6px; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: var(--accent-text); font-size: 10px; font-weight: 700; }
.channel-action:disabled { cursor: not-allowed; opacity: 0.46; }
.channel-notice { min-height: 42px; margin: 0; padding: 10px 15px; border-bottom: 1px solid color-mix(in srgb, var(--line) 52%, transparent); color: color-mix(in srgb, var(--text) 75%, var(--muted)); font-size: 12px; line-height: 1.5; }
.movement-menu { display: grid; gap: 5px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 52%, transparent); background: color-mix(in srgb, var(--surface-deep) 38%, transparent); }
.movement-menu p { margin: 0 0 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.movement-option { min-height: 29px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--scene-main) 34%, var(--surface)); color: var(--text); text-align: left; font-size: 10px; }
.movement-option:disabled { cursor: default; opacity: 0.55; }
.chat-messages { display: flex; flex: 1; flex-direction: column; gap: 11px; min-height: 90px; overflow: auto; padding: 16px; }
.chat-messages article { display:flex; align-items:flex-start; gap:8px; max-width:86%; margin:0; padding:10px 12px; border:1px solid color-mix(in srgb,var(--line) 76%,transparent); border-radius:4px 13px 13px; background:color-mix(in srgb,var(--surface-deep) 54%,var(--surface)); color:color-mix(in srgb,var(--text) 88%,var(--muted)); font-size:14px; line-height:1.6; overflow-wrap:anywhere; word-break:break-word; }.chat-message-copy { min-width:0; }.chat-avatar { flex:0 0 auto; width:30px; height:30px; border:1px solid color-mix(in srgb,var(--accent-a) 62%,var(--line)); border-radius:50%; object-fit:cover; }
.chat-messages article.is-mine { align-self:flex-end; flex-direction:row-reverse; border-color:color-mix(in srgb,var(--accent-a) 70%,var(--line)); border-radius:13px 4px 13px 13px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-a) 26%,var(--surface)),color-mix(in srgb,var(--accent-b) 18%,var(--surface-deep))); color:var(--text); text-align:right; }
.chat-messages article:not(.is-mine) { align-self: flex-start; }
.chat-messages article.chat-system-message { align-self: center; max-width: 100%; padding: 2px 12px; border: 0; border-radius: 0; background: transparent; color: color-mix(in srgb, var(--muted) 82%, var(--accent-a)); font-size: 11px; line-height: 1.45; text-align: center; }
.chat-messages article.chat-system-message p { margin: 0; }
.chat-messages strong { display: block; margin-bottom: 3px; color: var(--accent-a); font-size: 11px; }
.chat-messages article.is-mine strong { color: color-mix(in srgb, var(--text) 84%, var(--accent-a)); }
.chat-messages p { margin-bottom: 0; }
.chat-composer { display: flex; gap: 8px; padding: 13px; border-top: 1px solid var(--line); }
.chat-composer textarea { min-width: 0; flex: 1; min-height: 42px; resize: none; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 85%, var(--accent-a)); border-radius: 8px; outline: 0; background: color-mix(in srgb, var(--surface-deep) 77%, transparent); color: var(--text); font-size: 13px; }
.chat-composer textarea:disabled { cursor: not-allowed; opacity: 0.58; }
.chat-composer button { width: 44px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent-b) 56%, var(--accent-a)); color: var(--accent-text); font-size: 16px; }
.chat-emote { display:inline-block; width:1.45em; height:1.45em; margin:-.18em .08em; vertical-align:middle; object-fit:contain; }
.emote-picker-wrap { position:relative; flex:0 0 auto; }
.emote-picker-wrap > button { width:38px; height:42px; border:1px solid color-mix(in srgb, var(--line) 84%, var(--accent-a)); border-radius:8px; background:color-mix(in srgb, var(--surface-deep) 76%, transparent); color:var(--accent-a); font-size:17px; }
.emote-picker { position:absolute; z-index:20; right:0; bottom:50px; display:grid; grid-template-columns:repeat(6, 32px); gap:5px; width:max-content; max-width:240px; max-height:180px; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-deep); box-shadow:0 12px 30px rgba(0,0,0,.35); color:var(--muted); font-size:10px; }
.emote-picker[hidden] { display:none; }
.emote-picker button { width:32px; height:32px; padding:3px; border:1px solid transparent; border-radius:6px; background:transparent; }
.emote-picker button:hover { border-color:var(--accent-a); background:color-mix(in srgb, var(--accent-a) 16%, transparent); }
.emote-picker img { width:100%; height:100%; object-fit:contain; }
.mobile-chat-toggle { display: none; }
.region-admin-screen { max-width: 920px; }
.admin-heading { align-items: flex-start; margin-bottom: 16px; }
.admin-heading h1 { margin-bottom: 6px; }
.admin-heading > span { flex: 0 0 auto; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--accent-b) 70%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--accent-b) 17%, transparent); color: color-mix(in srgb, var(--text) 88%, var(--accent-b)); font-size: 10px; }
.active-region-card { padding: 15px; border: 1px solid color-mix(in srgb, var(--accent-a) 42%, var(--line)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--scene-main) 67%, var(--surface)), color-mix(in srgb, var(--scene-edge) 62%, var(--surface-deep))); }
.active-region-card p { margin-bottom: 5px; color: color-mix(in srgb, var(--accent-a) 78%, var(--text)); font-size: 10px; letter-spacing: 0.1em; }
.active-region-card h2 { margin-bottom: 4px; font-size: 18px; font-weight: 600; }
.active-region-card span { color: color-mix(in srgb, var(--text) 74%, var(--muted)); font-size: 11px; }
.session-policy-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.7fr); gap: 14px; margin-top: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 85%, var(--scene-main)); }
.session-policy-card h2 { margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.session-policy-card > div > span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.session-members-admin { display:grid; grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr); gap:14px; margin-top:13px; padding:14px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-b)); border-radius:12px; background:color-mix(in srgb,var(--surface) 85%,var(--scene-main)); }.session-members-admin h2,.session-members-admin p { margin:0; }.session-members-admin h2 { margin-top:4px; font-size:15px; }.session-members-admin > div > p:last-child { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.55; }.session-member-admin-list { display:grid; gap:7px; align-content:start; }.session-member-admin-list article { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:8px 9px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 52%,transparent); }.session-member-admin-list small,.session-member-self { color:var(--muted); font-size:10px; }.session-member-admin-list .danger-button { min-height:28px; padding:0 8px; font-size:10px; }
.policy-controls { display: grid; gap: 8px; align-content: center; }
.admin-field { display: grid; gap: 4px; }
.admin-field > span { color: var(--muted); font-size: 10px; }
.admin-field input, .admin-field select { width: 100%; min-height: 32px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius: 7px; outline: 0; background: color-mix(in srgb, var(--surface-deep) 66%, transparent); color: var(--text); font-size: 11px; }
.admin-field select { cursor: pointer; }
.admin-save-status { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.policy-toggle { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-deep) 45%, transparent); cursor: pointer; }
.policy-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent-a); }
.policy-toggle b { display: block; color: var(--text); font-size: 11px; }
.policy-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.region-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 14px; }
.region-choice { position: relative; min-height: 114px; overflow: hidden; isolation: isolate; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #1f3040; color: #f4f9fb; text-align: left; }
.region-choice::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.94; }
.region-choice strong, .region-choice span { display: block; position: relative; }
.region-choice strong { font-size: 13px; }
.region-choice span { margin-top: 5px; color: rgba(255,255,255,0.82); font-size: 10px; }
.region-choice.is-selected { outline: 2px solid var(--text); outline-offset: 2px; }
.region-choice.east::before { background: radial-gradient(circle at 76% 20%, #d7dd77 0 7%, transparent 8%), repeating-radial-gradient(circle at 84% 70%, transparent 0 10px, rgba(239, 243, 155, 0.2) 11px 13px), linear-gradient(135deg, #183f2a, #695530); }
.region-choice.west::before { background: repeating-linear-gradient(90deg, rgba(172,230,239,.15) 0 2px, transparent 2px 17px), linear-gradient(135deg, #283a45, #687982 55%, #303e4b); }
.region-choice.south::before { background: radial-gradient(ellipse at 50% 120%, #35c9d3 0 25%, transparent 26%), linear-gradient(145deg, #082e51, #195078 45%, #061826); }
.region-choice.north::before { background: radial-gradient(circle at 72% 46%, transparent 0 16px, rgba(182,150,255,.78) 17px 19px, transparent 20px), linear-gradient(135deg, #27304e, #68427d 55%, #2b2540); }
.region-choice.central::before { background: repeating-linear-gradient(90deg, rgba(93,206,255,.17) 0 2px, transparent 2px 18px), radial-gradient(circle at 74% 24%, #9363e7, transparent 24%), linear-gradient(135deg, #0c3a58, #1d3152 50%, #211b48); }
.region-choice.dark::before { background: radial-gradient(circle at 68% 38%, rgba(255,255,255,.8) 0 7%, transparent 26%), radial-gradient(ellipse at 5% 130%, #5a5a5a 0 18%, transparent 45%), linear-gradient(135deg, #000, #151515 63%, #000); }
.admin-note { margin: 14px 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.inventory-screen, .catalog-admin-screen { max-width: 920px; }
.catalog-screen { max-width: 1080px; }
.inventory-intro { margin-bottom: 17px; color: var(--muted); font-size: 12px; }
.inventory-tabs { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.inventory-tabs button { min-height: 32px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent-a)); border-radius: 7px; background: color-mix(in srgb, var(--surface-deep) 62%, transparent); color: var(--muted); font-size: 11px; }
.inventory-tabs button.is-current { border-color: var(--accent-a); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-a) 24%, var(--surface)), color-mix(in srgb, var(--accent-b) 15%, var(--surface-deep))); color: var(--text); }
.inventory-panel { display: none; padding-top: 16px; }
.inventory-panel.is-active { display: block; }
.inventory-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inventory-resources p { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 13px; border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-a)); border-radius: 10px; background: color-mix(in srgb, var(--surface-deep) 48%, var(--surface)); color: var(--muted); font-size: 12px; }
.inventory-resources strong { color: var(--text); font-size: 15px; }
.empty-storage { margin-top: 12px; padding: 26px 16px; border: 1px dashed color-mix(in srgb, var(--line) 84%, var(--accent-a)); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.catalog-admin-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr); gap: 13px; }
.catalog-form { display: grid; align-content: start; gap: 9px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-deep) 40%, var(--surface)); }
.catalog-form h2 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.catalog-form label { display: grid; gap: 4px; }
.catalog-form label > span { color: var(--muted); font-size: 10px; }
.catalog-form input, .catalog-form select, .catalog-form textarea { width: 100%; min-height: 34px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius: 7px; outline: 0; background: color-mix(in srgb, var(--surface-deep) 78%, transparent); color: var(--text); font-size: 12px; }
.catalog-form textarea { resize: vertical; }
.catalog-public-toggle { display: flex !important; align-items: center; gap: 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--surface-deep) 48%, transparent); cursor: pointer; }
.catalog-public-toggle input, .catalog-inline-public input { width: 15px; min-height: 15px; margin: 0; accent-color: var(--accent-a); }
.catalog-public-toggle b { display: block; color: var(--text); font-size: 11px; }
.catalog-public-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.catalog-form .primary-button { width: 100%; min-height: 35px; margin-top: 2px; }
.catalog-admin-status { margin: 14px 0 8px; color: var(--muted); font-size: 11px; }
.catalog-category-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.catalog-category-list article { display: flex; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-deep) 49%, transparent); }
.catalog-category-list strong { font-size: 12px; font-weight: 500; }
.catalog-category-list span { color: var(--muted); font-size: 10px; }
.catalog-category-list input, .catalog-category-list button, .catalog-entry-admin-list input, .catalog-entry-admin-list select, .catalog-entry-admin-list textarea, .catalog-entry-admin-list button { min-height: 31px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent-a)); border-radius: 6px; background: color-mix(in srgb, var(--surface-deep) 72%, transparent); color: var(--text); font-size: 11px; }
.catalog-category-list input { flex: 1; min-width: 0; }
.catalog-category-list button, .catalog-entry-admin-list button { cursor: pointer; }
.danger-button { border-color: color-mix(in srgb, #d98484 68%, var(--line)) !important; color: #ffc1c1 !important; }
.catalog-entry-admin-list { display: grid; gap: 9px; margin-top: 12px; }
.catalog-entry-group { overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface-deep) 35%, transparent); }
.catalog-entry-group-heading { width: 100%; min-height: 37px; padding: 0 11px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent); background: color-mix(in srgb, var(--scene-main) 28%, transparent); color: var(--text); text-align: left; font-size: 12px; font-weight: 600; }
.catalog-entry-group-body { display: grid; gap: 7px; padding: 8px; }
.catalog-entry-group-body[hidden] { display: none !important; }
.catalog-entry-group-body > p { margin: 5px; color: var(--muted); font-size: 11px; }
.catalog-entry-admin-list article { display: grid; grid-template-columns: 130px minmax(130px, .6fr) minmax(180px, 1.4fr) auto; gap: 7px; align-items: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--surface-deep) 49%, transparent); }
.catalog-entry-admin-list textarea { min-height: 68px; resize: vertical; }
.catalog-entry-admin-list article > div { display: flex; gap: 5px; }
.catalog-inline-public { display: inline-flex; align-items: center; gap: 4px; min-height: 31px; padding: 0 5px; color: var(--muted); font-size: 10px; cursor: pointer; }
.catalog-browser { display: grid; grid-template-columns: 170px minmax(190px, .72fr) minmax(260px, 1.3fr); min-height: 390px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--surface-deep) 48%, var(--surface)); }
.catalog-categories, .catalog-entry-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding: 11px; border-right: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.catalog-categories button, .catalog-entry-list button { min-height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); text-align: left; font-size: 12px; }
.catalog-categories button:hover, .catalog-categories button.is-current, .catalog-entry-list button:hover, .catalog-entry-list button.is-current { background: color-mix(in srgb, var(--accent-a) 16%, transparent); color: var(--text); }
.catalog-detail { min-width: 0; padding: 20px; overflow-y: auto; }
.catalog-detail h2 { margin-bottom: 11px; font-size: 19px; font-weight: 600; }
.catalog-detail p { margin: 0; color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.status-screen, .player-admin-screen { max-width: 920px; }
.judgement-card { display:grid; gap:16px; margin-top:14px; padding:19px; border:1px solid color-mix(in srgb,var(--accent-a) 50%,var(--line)); border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 86%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 84%,var(--scene-edge))); }.judgement-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }.judgement-heading h2,.judgement-heading p { margin:0; }.judgement-heading h2 { font-size:18px; }.judgement-heading > div > p:last-child { margin-top:5px; color:var(--muted); font-size:12px; }.judgement-heading > div > p:last-child strong { color:var(--accent-a); }.judgement-radar { position:relative; display:grid; width:118px; height:108px; place-items:center; clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); background:color-mix(in srgb,var(--surface-deep) 86%,var(--scene-main)); box-shadow:0 0 22px color-mix(in srgb,var(--accent-a) 14%,transparent); overflow:hidden; }.judgement-radar-grid,.judgement-radar-fill { position:absolute; inset:4px; clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }.judgement-radar-grid { background:repeating-radial-gradient(circle at 50% 50%,transparent 0 16px,color-mix(in srgb,var(--line) 82%,transparent) 17px 18px),conic-gradient(from -90deg,transparent 0 29deg,color-mix(in srgb,var(--line) 80%,transparent) 30deg 31deg,transparent 32deg 89deg,color-mix(in srgb,var(--line) 80%,transparent) 90deg 91deg,transparent 92deg 149deg,color-mix(in srgb,var(--line) 80%,transparent) 150deg 151deg,transparent 152deg 209deg,color-mix(in srgb,var(--line) 80%,transparent) 210deg 211deg,transparent 212deg 269deg,color-mix(in srgb,var(--line) 80%,transparent) 270deg 271deg,transparent 272deg 329deg,color-mix(in srgb,var(--line) 80%,transparent) 330deg 331deg,transparent 332deg); }.judgement-radar-fill { background:color-mix(in srgb,var(--accent-a) 42%,transparent); outline:1px solid var(--accent-a); opacity:.88; }.judgement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.judgement-grid article { display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 55%,transparent); }.judgement-grid span { color:var(--muted); font-size:11px; }.judgement-grid strong { margin-right:auto; color:var(--accent-a); font-size:16px; }.judgement-grid button { min-height:27px; padding:0 8px; font-size:10px; }
.status-identity-card { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:20px; border:1px solid color-mix(in srgb, var(--accent-a) 50%, var(--line)); border-radius:13px; background:linear-gradient(125deg, color-mix(in srgb, var(--scene-main) 45%, var(--surface)), color-mix(in srgb, var(--scene-edge) 28%, var(--surface-deep))); }
.status-identity-card h2 { margin:0 0 5px; font-size:22px; font-weight:600; }
.status-identity-card p:not(.section-kicker) { margin:0; color:var(--muted); font-size:12px; }
.status-identity-card > span { flex:0 0 auto; padding:6px 8px; border:1px solid color-mix(in srgb, var(--accent-a) 50%, var(--line)); border-radius:999px; background:color-mix(in srgb, var(--surface-deep) 52%, transparent); color:var(--text); font-size:11px; }
.status-core-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.status-card, .status-spec-card { padding:15px; border:1px solid color-mix(in srgb, var(--line) 82%, var(--accent-a)); border-radius:11px; background:color-mix(in srgb, var(--surface-deep) 46%, var(--surface)); }
.status-card p { margin:0 0 7px; color:var(--muted); font-size:11px; }
.status-card strong { display:block; font-size:18px; font-weight:600; }
.status-card small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.status-track { height:5px; overflow:hidden; margin-top:12px; border-radius:99px; background:color-mix(in srgb, var(--line) 76%, transparent); }
.status-track span { display:block; width:0; height:100%; background:linear-gradient(90deg, var(--accent-a), var(--accent-b)); transition:width 160ms ease; }
.status-track.stagger span { background:linear-gradient(90deg, #e0c26c, #d77b5e); }
.status-spec-card { margin-top:12px; }
.status-spec-card .section-kicker { margin-bottom:11px; }
.status-spec-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.status-spec-grid p { display:flex; flex-direction:column; gap:5px; margin:0; padding:10px; border-radius:7px; background:color-mix(in srgb, var(--surface-deep) 52%, transparent); color:var(--muted); font-size:10px; }
.status-spec-grid strong { color:var(--text); font-size:12px; font-weight:600; }
.admin-player-picker { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:12px; padding:14px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb, var(--surface-deep) 42%, var(--surface)); }
.admin-player-picker label { display:grid; min-width:min(100%, 340px); gap:5px; }
.admin-player-picker label span, .admin-player-form label > span { color:var(--muted); font-size:10px; }
.admin-player-picker select, .admin-player-form input, .admin-player-form select { min-height:34px; padding:7px 8px; border:1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius:7px; outline:0; background:color-mix(in srgb, var(--surface-deep) 78%, transparent); color:var(--text); font-size:12px; }
.admin-player-picker p { max-width:440px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; text-align:right; }
.admin-player-form { display:grid; gap:11px; }
.admin-player-form > section { padding:15px; border:1px solid color-mix(in srgb, var(--line) 82%, var(--accent-a)); border-radius:11px; background:color-mix(in srgb, var(--surface-deep) 40%, var(--surface)); }
.admin-player-form h2 { margin:0 0 11px; font-size:14px; font-weight:600; }
.admin-role-panel { display:grid; gap:9px; }
.admin-role-panel h2, .admin-role-panel p { margin:0; }
.admin-role-panel p { color:var(--muted); font-size:11px; line-height:1.5; }
.admin-role-panel .quiet-button { justify-self:start; }
.admin-check-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:11px; }
.admin-check-grid label { display:flex; align-items:center; gap:6px; min-height:34px; padding:0 9px; border:1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius:7px; color:var(--text); font-size:11px; }
.admin-check-grid input { min-height:auto; margin:0; accent-color:var(--accent-a); }
.admin-field-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.admin-field-grid label { display:grid; gap:5px; }
.admin-field-grid input { width:100%; }
.admin-player-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.admin-player-actions p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.admin-player-actions .primary-button { min-height:35px; flex:0 0 auto; }
.gacha-screen, .emote-admin-screen { max-width:920px; }
.gacha-tabs { display:flex; gap:7px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.gacha-tabs button { min-height:34px; padding:0 12px; border:1px solid color-mix(in srgb, var(--line) 80%, var(--accent-a)); border-radius:7px; background:color-mix(in srgb, var(--surface-deep) 64%, transparent); color:var(--muted); font-size:12px; }
.gacha-tabs button.is-current { border-color:var(--accent-a); background:linear-gradient(135deg, color-mix(in srgb, var(--accent-a) 25%, var(--surface)), color-mix(in srgb, var(--accent-b) 18%, var(--surface-deep))); color:var(--text); }
.gacha-panel { display:none; min-height:210px; margin-top:14px; padding:22px; border:1px solid var(--line); border-radius:12px; background:radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--accent-a) 20%, transparent), transparent 32%), color-mix(in srgb, var(--surface-deep) 45%, var(--surface)); }
.gacha-panel.is-active { display:block; }
.gacha-panel h2 { margin-bottom:8px; font-size:20px; font-weight:600; }
.gacha-panel p { color:var(--muted); font-size:12px; }
.gacha-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.gacha-actions button:disabled { opacity:.55; cursor:not-allowed; }
.gacha-panel .section-kicker { margin:0; }.gacha-panel .gacha-actions { margin-top:26px; }.gacha-admin-card { display:grid; gap:12px; margin-top:18px; padding:18px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-b)); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 82%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 88%,var(--scene-edge))); }.gacha-admin-card h2,.gacha-admin-card p { margin:0; }.gacha-admin-card h2 { font-size:17px; }.gacha-admin-card form { display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:10px; }.gacha-admin-card label { display:grid; gap:5px; min-width:0; }.gacha-admin-card label > span { color:var(--muted); font-size:10px; }.gacha-admin-card select,.gacha-admin-card input { min-width:0; width:100%; box-sizing:border-box; }.gacha-admin-card > p { color:var(--muted); font-size:11px; }
.emote-form { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(240px,1fr) auto; align-items:end; gap:10px; padding:15px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb, var(--surface-deep) 40%, var(--surface)); }
.emote-form label { display:grid; gap:5px; }
.emote-form label > span { color:var(--muted); font-size:10px; }
.emote-form input { min-height:34px; padding:7px 8px; border:1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius:7px; background:color-mix(in srgb, var(--surface-deep) 78%, transparent); color:var(--text); font-size:12px; }
.emote-form p { grid-column:1 / -1; margin:0; color:var(--muted); font-size:11px; }
.emote-admin-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px; margin-top:14px; }
.emote-admin-list article { display:flex; align-items:center; gap:7px; min-height:48px; padding:8px; border:1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius:8px; background:color-mix(in srgb, var(--surface-deep) 48%, transparent); color:var(--muted); font-size:11px; overflow:hidden; }
.emote-admin-list img { width:30px; height:30px; object-fit:contain; flex:0 0 auto; }
.sidebar-emote-add { margin-top:10px; border:1px dashed color-mix(in srgb, var(--line) 75%, var(--accent-a)); }

.auth-gate { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; overflow: auto; padding: 28px; background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent-b) 31%, transparent), transparent 30%), radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--accent-a) 20%, transparent), transparent 38%), color-mix(in srgb, var(--page) 92%, #000); }
.auth-gate[hidden] { display: none; }
.auth-panel { width: min(900px, 100%); padding: 26px; border: 1px solid color-mix(in srgb, var(--accent-a) 50%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--scene-main)), color-mix(in srgb, var(--surface-deep) 90%, var(--scene-edge))); box-shadow: 0 28px 90px rgba(0,0,0,.35); }
.auth-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-heading .brand-mark { flex: 0 0 auto; width: 38px; height: 38px; font-size: 17px; }
.auth-heading .eyebrow { margin-bottom: 4px; }
.auth-heading h1 { margin-bottom: 3px; font-size: 22px; }
.auth-heading p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.auth-columns { display: grid; grid-template-columns: .78fr 1.22fr; gap: 14px; align-items: start; }
.auth-discord-columns { grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr); }
.discord-auth-intro { min-height: 100%; align-content: center; }
.discord-auth-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.discord-auth-intro .primary-button { display: grid; place-items: center; text-decoration: none; }
.auth-discord-note { color: color-mix(in srgb, var(--muted) 82%, var(--accent-a)) !important; font-size: 10px !important; }
.auth-legacy { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 9px; color: var(--muted); font-size: 11px; }
.auth-legacy summary { cursor: pointer; color: var(--text); }
.auth-legacy p { margin: 9px 0; line-height: 1.5; }
.auth-legacy .auth-form { margin-top: 10px; }
.auth-form { display: grid; gap: 9px; padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-a)); border-radius: 11px; background: color-mix(in srgb, var(--surface-deep) 54%, transparent); }
.auth-form h2 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.auth-form label { display: grid; gap: 4px; }
.auth-form label > span { color: var(--muted); font-size: 10px; }
.auth-form input, .auth-form select, .auth-form textarea { width: 100%; min-height: 34px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-a)); border-radius: 7px; outline: 0; background: color-mix(in srgb, var(--surface-deep) 78%, transparent); color: var(--text); font-size: 12px; }
.auth-form textarea { resize: vertical; min-height: 62px; }
.auth-form .primary-button { width: 100%; min-height: 36px; margin-top: 3px; font-size: 12px; }
.auth-split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-form-divider { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--accent-a); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.auth-form-divider::before, .auth-form-divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--line) 72%, transparent); }
.auth-status { margin: 13px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

body[data-region="east"] { --page:#0c1410; --surface:#152218; --surface-soft:#1e3122; --surface-deep:#070d09; --line:#3d5c40; --text:#f2f7ea; --muted:#a8bd9c; --accent-a:#e0c368; --accent-b:#5fb079; --accent-text:#111d13; --scene-main:#2a5c37; --scene-edge:#7a5a30; --scene-glow:#f0e39d; --scene-structure:#15321c; --scene-foreground:#0c1d12; --chat:#152318; }
body[data-region="west"] { --page:#070a11; --surface:#111725; --surface-soft:#1a2336; --surface-deep:#04060c; --line:#33415e; --text:#eef3ff; --muted:#94a2c0; --accent-a:#9ed8ff; --accent-b:#6c74f0; --accent-text:#070c18; --scene-main:#1b2450; --scene-edge:#2f2a63; --scene-glow:#bfe4ff; --scene-structure:#101636; --scene-foreground:#080b18; --chat:#101625; }
body[data-region="south"] { --page:#05101a; --surface:#0e1f2b; --surface-soft:#153042; --surface-deep:#020a12; --line:#2a5570; --text:#eaf7fa; --muted:#8bb0bf; --accent-a:#46dcc8; --accent-b:#2b86b5; --accent-text:#04161c; --scene-main:#0f4a5e; --scene-edge:#123a52; --scene-glow:#8ef0e2; --scene-structure:#08283a; --scene-foreground:#04141f; --chat:#0d1f2b; }
body[data-region="north"] { --page:#110d1b; --surface:#1d1730; --surface-soft:#2a2145; --surface-deep:#0a0713; --line:#4d3d70; --text:#f6efff; --muted:#b6a6cf; --accent-a:#e6c479; --accent-b:#a97ce4; --accent-text:#1a1229; --scene-main:#3d2f66; --scene-edge:#5a3a72; --scene-glow:#f3dcae; --scene-structure:#241a44; --scene-foreground:#120d22; --chat:#1c1730; }
body[data-region="dark"] { --page:#000; --surface:#0b0b0b; --surface-soft:#181818; --surface-deep:#000; --line:#5c5c5c; --text:#fff; --muted:#b8b8b8; --accent-a:#fff; --accent-b:#dedede; --accent-text:#000; --scene-main:#161616; --scene-edge:#080808; --scene-glow:#fff; --scene-structure:#121212; --scene-foreground:#000; --chat:#0a0a0a; }
body[data-region="dark"] .topbar { background:linear-gradient(90deg,#000,#141414); }
body[data-region="dark"] .location-scene { background:linear-gradient(122deg,#151515,#000); }
body[data-region="east"] .location-scene::before { background-image: repeating-radial-gradient(circle at 80% 46%, transparent 0 17px, rgba(223,235,137,.17) 18px 20px), linear-gradient(90deg, transparent 34%, rgba(223,236,136,.08)); mask-image:none; }
body[data-region="east"] .scene-shape-one { right:0; width:92%; height:88%; background:radial-gradient(ellipse at 12% 60%,#19351f 0 13%,transparent 14%),radial-gradient(ellipse at 36% 37%,#234d25 0 17%,transparent 18%),radial-gradient(ellipse at 67% 44%,#1b3b22 0 19%,transparent 20%),radial-gradient(ellipse at 89% 63%,#254823 0 15%,transparent 16%); clip-path:none; }
body[data-region="east"] .scene-shape-two { right:0; width:100%; height:53%; background:radial-gradient(ellipse at 30% 110%,#37562c 0 42%,transparent 43%),radial-gradient(ellipse at 73% 110%,#2f4b27 0 41%,transparent 42%); clip-path:none; }
body[data-region="east"] .scene-foreground { background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--scene-foreground) 80%,transparent)); transform:none; }
body[data-region="west"] .location-scene::before { background-image:linear-gradient(90deg,transparent 0 47%,rgba(198,242,248,.18) 48% 52%,transparent 53%),repeating-linear-gradient(0deg,rgba(207,239,245,.08) 0 1px,transparent 1px 14px); mask-image:none; }
body[data-region="west"] .scene-shape-one { background:repeating-linear-gradient(90deg,#17252d 0 14px,#263941 14px 18px,#132129 18px 35px); }
body[data-region="west"] .scene-shape-two { background:repeating-linear-gradient(90deg,#24333b 0 12px,#1a252b 12px 15px); }
body[data-region="south"] .location-scene::before { background-image:radial-gradient(ellipse at 62% 113%,rgba(52,220,224,.38) 0 20%,transparent 21%),radial-gradient(ellipse at 72% 103%,rgba(66,135,212,.55) 0 34%,transparent 35%),radial-gradient(circle at 72% 20%,rgba(203,255,246,.65) 0 2px,transparent 3px); mask-image:none; }
body[data-region="south"] .scene-shape-one { right:17%; width:64%; height:55%; background:linear-gradient(90deg,transparent 0 15%,rgba(5,38,65,.75) 15% 19%,transparent 19% 35%,rgba(4,38,63,.74) 35% 40%,transparent 40% 64%,rgba(5,43,66,.76) 64% 68%,transparent 68%); clip-path:polygon(0 87%,9% 64%,16% 74%,31% 30%,40% 74%,55% 12%,63% 72%,80% 50%,100% 85%,100% 100%,0 100%); }
body[data-region="south"] .scene-shape-two { width:100%; height:60%; background:radial-gradient(ellipse at 35% 110%,#0c7c95 0 42%,transparent 43%),radial-gradient(ellipse at 75% 107%,#1262a0 0 40%,transparent 41%); clip-path:none; }
body[data-region="south"] .scene-foreground { background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--scene-foreground) 76%,transparent)); transform:none; }
body[data-region="north"] .location-scene::before { background-image:radial-gradient(circle at 72% 48%,transparent 0 40px,rgba(207,175,255,.52) 41px 43px,transparent 44px),radial-gradient(circle at 72% 48%,transparent 0 21px,rgba(207,175,255,.28) 22px 24px,transparent 25px),linear-gradient(45deg,transparent 48%,rgba(220,190,255,.24) 49% 51%,transparent 52%); mask-image:none; }
body[data-region="north"] .scene-shape-one { background:linear-gradient(90deg,#241d46 0 8%,transparent 8% 12%,#2e2457 12% 25%,transparent 25% 30%,#211944 30% 48%,transparent 48% 53%,#2a1e4d 53% 70%,transparent 70% 76%,#332258 76%); }
body[data-region="dark"] .location-scene::before { background-image:radial-gradient(ellipse at 73% 112%,rgba(255,255,255,.24) 0 24%,transparent 25%),radial-gradient(ellipse at 61% 88%,rgba(55,55,55,.88) 0 36%,transparent 37%),linear-gradient(45deg,transparent 45%,rgba(255,255,255,.13) 46% 50%,transparent 51%); mask-image:none; }
body[data-region="dark"] .scene-shape-one { background:radial-gradient(ellipse at 20% 57%,#050505 0 17%,transparent 18%),radial-gradient(ellipse at 54% 46%,#171717 0 20%,transparent 21%),radial-gradient(ellipse at 86% 64%,#080808 0 17%,transparent 18%); clip-path:none; }
body[data-region="dark"] .scene-shape-two { width:100%; height:63%; background:radial-gradient(ellipse at 29% 110%,#111 0 42%,transparent 43%),radial-gradient(ellipse at 75% 111%,#333 0 41%,transparent 42%); clip-path:none; }
body[data-region="dark"] .scene-foreground { background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--scene-foreground) 86%,transparent)); transform:none; }
body[data-region="dark"] .enemy-track span { background: linear-gradient(90deg, #fff, #a9a9a9); }

/* Dark World: a high-contrast, retro RPG combat console.  It is deliberately
   RIM-specific rather than a reproduction of any existing game's interface. */
body[data-region="dark"] .progress-screen.is-active { --dark-ink:#000; --dark-paper:#fff; --dark-ash:#a7a7a7; --dark-panel:#111; font-family:ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; letter-spacing:.015em; }
body[data-region="dark"] .progress-console-header { position:relative; padding:16px 18px; border:2px solid var(--dark-paper); border-radius:0; background:var(--dark-ink); box-shadow:inset 0 0 0 3px var(--dark-ink), inset 0 0 0 4px #555; }
body[data-region="dark"] .progress-console-header::after { content:"DARK WORLD // PROGRESS"; position:absolute; right:14px; bottom:9px; color:var(--dark-ash); font-size:8px; letter-spacing:.12em; }
body[data-region="dark"] .progress-console-channel > span { border:1px solid var(--dark-paper); border-radius:0; background:var(--dark-paper); color:var(--dark-ink); box-shadow:none; }
body[data-region="dark"] .progress-console-header h1, body[data-region="dark"] .progress-session-bar strong { color:var(--dark-paper); text-shadow:2px 2px 0 #333; }
body[data-region="dark"] .progress-session-bar { margin-top:10px; border:2px solid var(--dark-paper); border-radius:0; background:var(--dark-ink); }
body[data-region="dark"] .progress-session-bar > div { border-right:1px solid #777; }
body[data-region="dark"] .progress-session-bar > div:not(.progress-field-resources) { display:none; }
body[data-region="dark"] .progress-session-bar:has(.progress-field-resources[hidden]) { display:none; }
body[data-region="dark"] .progress-log { margin-top:10px; border:2px solid var(--dark-paper); background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),var(--dark-ink); }
body[data-region="dark"] .progress-log-divider { border-color:var(--dark-paper); border-radius:0; color:var(--dark-paper); background:var(--dark-ink); }
body[data-region="dark"] .progress-log-entry { max-width:min(760px,96%); border:1px solid var(--dark-paper); border-radius:0; background:var(--dark-panel); box-shadow:3px 3px 0 #353535; }
body[data-region="dark"] .progress-log-entry > span, body[data-region="dark"] .progress-log-entry strong { color:var(--dark-paper); }
body[data-region="dark"] .progress-battle-dock, body[data-region="dark"] .progress-command-dock { border:2px solid var(--dark-paper); border-top:0; border-radius:0; background:var(--dark-ink); }
body[data-region="dark"] .progress-battle-dock .primary-button, body[data-region="dark"] .progress-command-dock button { border:2px solid var(--dark-paper); border-radius:0; background:var(--dark-paper); color:var(--dark-ink); box-shadow:3px 3px 0 #555; font-family:inherit; }
body[data-region="dark"] .progress-battle-dock .primary-button:hover, body[data-region="dark"] .progress-command-dock button:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 #555; }

body[data-region="dark"] .progress-log:has(.battle-layout) { background:var(--dark-ink); }
body[data-region="dark"] .battle-board { border:2px solid var(--dark-paper); border-radius:0; background:radial-gradient(ellipse at center,rgba(255,255,255,.08),transparent 42%),var(--dark-ink); box-shadow:inset 0 0 0 4px var(--dark-ink),inset 0 0 0 5px #555; }
body[data-region="dark"] .battle-board-side > p { color:var(--dark-paper); font-weight:700; }
body[data-region="dark"] .combat-speed { color:var(--dark-paper); text-shadow:2px 2px 0 #333; }
body[data-region="dark"] .combat-speed::before { color:var(--dark-ash); }
body[data-region="dark"] .combat-slot { border:1px solid var(--dark-paper); border-radius:0; background:var(--dark-ink); color:var(--dark-paper); font-family:inherit; }
body[data-region="dark"] .combat-slot:hover, body[data-region="dark"] .combat-slot:focus-visible { background:var(--dark-paper); color:var(--dark-ink); box-shadow:0 0 0 2px #777; }
body[data-region="dark"] .slot-preview { border:2px solid var(--dark-paper); border-radius:0; background:var(--dark-ink); color:var(--dark-paper); box-shadow:4px 4px 0 #555; font-family:inherit; }
body[data-region="dark"] .combat-token, body[data-region="dark"] .combatant.enemy .combat-token { border:3px solid var(--dark-paper); border-radius:0; background:var(--dark-ink); color:var(--dark-paper); box-shadow:3px 3px 0 #666; }
body[data-region="dark"] .combat-token img { filter:grayscale(1) contrast(1.3); }
body[data-region="dark"] .combatant.is-you .combat-token { background:var(--dark-paper); color:var(--dark-ink); }
body[data-region="dark"] .combatant > strong { color:var(--dark-paper); font-family:inherit; }
body[data-region="dark"] .combatant > small, body[data-region="dark"] .combat-statuses span { color:var(--dark-ash); }
body[data-region="dark"] .battle-trajectory { stroke:#fff !important; filter:none !important; }
body[data-region="dark"] .battle-trajectory.is-muted { opacity:.15 !important; }
body[data-region="dark"] .battle-card-zone { border-top-color:var(--dark-paper); background:linear-gradient(180deg,transparent,#080808 35%,#000); }
body[data-region="dark"] .battle-pile button { border:2px solid var(--dark-paper); border-radius:0; background:#101010; color:var(--dark-paper); box-shadow:3px 3px 0 #555; font-family:inherit; }
body[data-region="dark"] .battle-pile button:hover { filter:none; background:var(--dark-paper); color:var(--dark-ink); transform:translate(-1px,-1px); }
body[data-region="dark"] .battle-pile p strong { color:var(--dark-paper); }
body[data-region="dark"] .battle-card { border:2px solid var(--dark-paper); border-bottom:0; border-radius:0; background:linear-gradient(135deg,#252525,#050505); color:var(--dark-paper); box-shadow:none; font-family:inherit; }
body[data-region="dark"] .battle-card small { color:var(--dark-ash); }
body[data-region="dark"] .battle-card:hover, body[data-region="dark"] .battle-card:focus-visible, body[data-region="dark"] .battle-card.is-selected { border-color:var(--dark-paper); background:var(--dark-paper); box-shadow:0 0 0 2px #777; color:var(--dark-ink); filter:none; }
body[data-region="dark"] .battle-card:hover small, body[data-region="dark"] .battle-card:focus-visible small, body[data-region="dark"] .battle-card.is-selected small { color:#333; }
body[data-region="dark"] .battle-pile-panel { border:2px solid var(--dark-paper); border-radius:0; background:var(--dark-ink); box-shadow:4px 4px 0 #555; }
body[data-region="dark"] .battle-pile-panel strong { color:var(--dark-paper); }
@media (max-width:700px) { body[data-region="dark"] .progress-console-header::after { display:none; } body[data-region="dark"] .progress-console-header, body[data-region="dark"] .progress-session-bar, body[data-region="dark"] .progress-log { border-width:1px; } }

@media (max-width: 1050px) { .app-layout { grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(260px, .75fr); } .chat-panel { grid-column: 1 / -1; min-height: 0; border-top: 1px solid var(--line); border-left: 0; } .plaza-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .region-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .topbar { height:56px; } .app-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height:calc(100dvh - 56px); } .sidebar { display: flex; gap: 3px; overflow: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); } .nav-label { display:none; } .nav-item { width:auto; flex:0 0 auto; padding:0 9px; } .nav-item > span, .nav-item small { display:none; } .nav-group { display:contents; } .nav-parent i, .nav-children { display:none; } #admin-nav { display:contents; } .workspace { padding:16px; } .chat-panel { display:none; position:fixed; z-index:50; inset:0; grid-column:auto; min-height:0; max-height:none; height:100dvh; border:0; } .chat-panel.is-mobile-open { display:flex; } .chat-panel.is-mobile-open .chat-header { padding-right:76px; } .mobile-chat-toggle { position:fixed; z-index:55; right:16px; bottom:16px; display:grid; width:48px; height:48px; place-items:center; border:1px solid color-mix(in srgb, var(--accent-a) 72%, var(--line)); border-radius:50%; background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); box-shadow:0 10px 25px rgba(0,0,0,.32); color:var(--accent-text); font-size:20px; font-weight:700; } body.chat-open .mobile-chat-toggle { top:10px; right:12px; bottom:auto; background:color-mix(in srgb, var(--surface-deep) 82%, var(--accent-b)); color:var(--text); } .scene-copy { max-width:66%; } .detail-grid, .session-policy-card, .auth-columns, .catalog-admin-grid { grid-template-columns:1fr; } .lobby-channel-heading { flex-direction:column; } .selected-channel-card { grid-template-columns:1fr; } .selected-channel-actions { justify-content:space-between; } .selected-channel-actions > p { text-align:left; } .auth-gate { padding:14px; } .auth-panel { padding:17px; } .catalog-category-list { grid-template-columns:1fr; } .catalog-entry-admin-list article { grid-template-columns:1fr; } .catalog-browser { grid-template-columns:130px minmax(160px, 1fr); } .catalog-detail { grid-column:1 / -1; min-height:160px; border-top:1px solid var(--line); } }
@media (max-width:700px) { .mobile-chat-toggle.has-unread::after { position:absolute; top:-3px; right:-3px; display:grid; min-width:17px; height:17px; padding:0 3px; place-items:center; border:2px solid var(--page); border-radius:999px; background:#df4157; color:#fff; content:attr(data-unread); font-size:9px; font-weight:700; line-height:1; } }
@media (max-width: 460px) { .topbar { padding:11px 12px; } .public-region { display:none; } .page-heading { align-items:flex-start; flex-direction:column; } .combatants { grid-template-columns:1fr; } .versus { display:none; } .battle-footer { align-items:flex-start; flex-direction:column; } .scene-copy { max-width:80%; } .plaza-channel-grid, .region-choice-grid { grid-template-columns:1fr; } .admin-heading { align-items:flex-start; flex-direction:column; } .lobby-channel-heading, .channel-group { padding-left:15px; padding-right:15px; } .selected-channel-card { margin:15px; } .session-card { padding-right:15px; } .channel-card-state { position:static; margin-top:4px; } }
@media (max-width: 700px) { .status-core-grid, .status-spec-grid, .admin-field-grid { grid-template-columns:1fr; } .status-identity-card, .admin-player-picker, .admin-player-actions { align-items:flex-start; flex-direction:column; } .admin-player-picker p { text-align:left; } }
@media (max-width: 700px) { .sidebar { gap:7px; padding:9px 10px; background:color-mix(in srgb, var(--surface-deep) 82%, var(--scene-main)); } .nav-item { min-height:34px; border:1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius:8px; background:color-mix(in srgb, var(--surface-deep) 68%, var(--surface)); color:var(--text); font-size:12px; } .nav-item.is-current { border-color:var(--accent-a); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-a) 35%, transparent); } .nav-children button { min-height:32px; border:1px solid color-mix(in srgb, var(--line) 64%, transparent); border-radius:7px; background:color-mix(in srgb, var(--surface-deep) 62%, var(--surface)); } .notice-board { padding:15px; } .emote-form { grid-template-columns:1fr; } .emote-form .primary-button { justify-self:start; } .gacha-actions { justify-content:stretch; } .gacha-actions button { flex:1; } }
@media (max-width:700px) { .gacha-admin-card form { grid-template-columns:1fr; }.gacha-admin-card form button { justify-self:start; } }
@media (max-width: 700px) { .progress-heading, .progress-context-card, .progress-actions > header { align-items:flex-start; flex-direction:column; } .progress-action-grid { grid-template-columns:1fr; } .progress-action-grid article { border-right:0; border-bottom:1px solid color-mix(in srgb, var(--line) 64%, transparent); } .progress-action-grid article:last-child { border-bottom:0; } .progress-actions > header > span { text-align:left; } }
@media (max-width: 700px) { .enemy-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.enemy-form button { grid-column:1 / -1; }.enemy-template-grid { grid-template-columns:1fr; }.placement-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }.battle-casting-grid { grid-template-columns:1fr; }.battle-entity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.battle-cast-footer { align-items:flex-start; flex-direction:column; }.battle-cast-footer button { width:100%; } }
@media (max-width:700px) { .skill-editor { padding:15px; gap:15px; }.skill-base-fields,.skill-effect-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.skill-effect-group,.coin-editor { padding:14px; }.skill-effect-row { padding:33px 10px 11px; }.skill-effect-row input,.skill-effect-row select { font-size:12px; }.coin-base-fields { grid-template-columns:1fr 1fr; }.skill-form-footer { align-items:stretch; flex-direction:column; }.skill-form-footer .primary-button { width:100%; } }
@media (max-width:700px) { .passive-editor { padding:15px; gap:15px; }.passive-effect-group { padding:14px; }.passive-effect-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:33px 10px 11px; }.passive-effect-row input,.passive-effect-row select { font-size:12px; } }
@media (max-width: 700px) { .progress-log:has(.battle-board) { gap:8px; padding:12px 10px 0; }.battle-board { grid-template-columns:1fr; gap:10px; min-height:0; padding:12px 4px; }.battle-target-lane { order:2; min-height:36px; }.battle-target-lane span { font-size:32px; transform:rotate(90deg); }.enemy-side { order:3; }.enemy-side > p { text-align:left; }.enemy-side .combatant-line { justify-content:flex-start; }.combatant-line { gap:17px 8px; }.combatant { width:90px; padding-top:50px; }.combat-token { width:62px; height:62px; }.combat-slot { top:26px; width:68px; font-size:9px; }.battle-card-zone { grid-template-columns:65px minmax(0,1fr) 65px; min-height:145px; margin:0 -10px; padding:8px 8px 0; }.battle-pile button { width:55px; height:62px; font-size:9px; }.battle-pile p { font-size:8px; }.battle-pile p strong { font-size:14px; }.battle-card-hand { justify-content:flex-start; min-height:128px; overflow-x:auto; padding:20px 0 0; }.battle-card { flex:0 0 102px; height:123px; transform:translateY(30px); }.battle-card:hover,.battle-card:focus-visible,.battle-card.is-selected { transform:translateY(-4px); }.battle-card span { font-size:16px; }.battle-card small { font-size:8px; }.battle-pile-panel { bottom:132px; }.slot-preview { width:135px; }.progress-battle-dock { position:sticky; bottom:0; z-index:10; } }

/* Combat board uses each region's palette instead of fixed tutorial colours. */
.combatant { padding-top:112px; }
.combat-speed { top:6px; }
.combat-slot { top:53px; border-color:color-mix(in srgb,var(--accent-b) 84%,var(--line)); background:color-mix(in srgb,var(--surface-deep) 78%,var(--accent-b)); color:color-mix(in srgb,var(--text) 88%,var(--accent-b)); }
.combat-slot:hover,.combat-slot:focus-visible { box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-b) 46%,transparent),0 0 24px color-mix(in srgb,var(--accent-b) 18%,transparent); }
.slot-preview { border-color:color-mix(in srgb,var(--accent-b) 82%,var(--line)); background:color-mix(in srgb,var(--surface-deep) 94%,var(--scene-edge)); color:color-mix(in srgb,var(--text) 90%,var(--accent-b)); }
.combat-token { border-color:var(--accent-a); background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--text) 56%,var(--accent-a)),var(--accent-a)); color:var(--accent-text); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-a) 12%,transparent); }
.combatant.enemy .combat-token { border-color:var(--accent-b); background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--text) 42%,var(--accent-b)),var(--accent-b)); color:var(--accent-text); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-b) 12%,transparent); }
.battle-target-lane span,.battle-target-lane.is-targeting::after { color:var(--accent-b); text-shadow:0 0 16px color-mix(in srgb,var(--accent-b) 54%,transparent); }
.battle-pile button { border-color:var(--accent-a); background:linear-gradient(135deg,color-mix(in srgb,var(--surface-deep) 72%,var(--accent-a)),color-mix(in srgb,var(--scene-main) 74%,var(--accent-a))); color:var(--text); }
.draw-pile button { border-color:var(--accent-b); background:linear-gradient(135deg,color-mix(in srgb,var(--surface-deep) 72%,var(--accent-b)),color-mix(in srgb,var(--scene-edge) 74%,var(--accent-b))); color:var(--text); }
.battle-card-zone { min-height:220px; padding-bottom:37px; }
.battle-card-hand { min-height:180px; padding-top:27px; }
.battle-card { border-color:color-mix(in srgb,var(--accent-b) 76%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--surface-deep) 62%,var(--accent-b)),color-mix(in srgb,var(--scene-edge) 58%,var(--accent-b)) 54%,color-mix(in srgb,var(--surface-deep) 78%,var(--accent-b))); color:var(--text); transform:translateY(12px); }
.battle-card:hover,.battle-card:focus-visible,.battle-card.is-selected { border-color:var(--accent-a); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-a) 48%,transparent); transform:translateY(-32px); }
.battle-card small { color:color-mix(in srgb,var(--text) 78%,var(--accent-b)); }
@media (max-width:700px) { .combatant { padding-top:98px; }.combat-speed { top:5px; }.combat-slot { top:47px; }.battle-card-zone { min-height:188px; padding-bottom:24px; }.battle-card-hand { min-height:153px; }.battle-card { transform:translateY(7px); }.battle-card:hover,.battle-card:focus-visible,.battle-card.is-selected { transform:translateY(-23px); } }

.battle-card { border-bottom:2px solid color-mix(in srgb,var(--accent-b) 76%,var(--line)); border-radius:10px; }

.battle-targeting-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex:0 0 auto; padding:10px 13px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-a)); border-radius:10px; background:color-mix(in srgb,var(--surface) 76%,var(--scene-main)); }
.battle-targeting-bar > div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; }.battle-targeting-bar .section-kicker { width:100%; margin:0 0 1px; }.battle-targeting-bar strong { font-size:11px; }.battle-targeting-bar > div > span { color:var(--accent-a); }.target-choice-list { display:flex; flex-wrap:wrap; gap:5px; }.target-choice-list button { min-height:27px; padding:0 9px; border:1px solid color-mix(in srgb,var(--line) 75%,var(--accent-b)); border-radius:6px; background:color-mix(in srgb,var(--surface-deep) 72%,transparent); color:var(--muted); font-size:10px; }.target-choice-list button:hover,.target-choice-list button.is-selected { border-color:var(--accent-b); background:color-mix(in srgb,var(--accent-b) 18%,var(--surface-deep)); color:var(--text); }.enemy-target-copy { max-width:45%; margin:0; color:var(--muted); font-size:10px; line-height:1.55; text-align:right; }.enemy-target-copy b { color:color-mix(in srgb,var(--text) 83%,var(--accent-b)); font-weight:600; }
@media (max-width:700px) { .battle-targeting-bar { align-items:flex-start; flex-direction:column; gap:8px; }.enemy-target-copy { max-width:none; text-align:left; } }

.screen.progress-screen.is-active { height:calc(100dvh - 112px); min-height:0; overflow:hidden; }
.progress-log:has(.battle-board) { overflow:hidden; }
.battle-board { position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.battle-board-side { position:relative; z-index:3; }
.battle-arrow-overlay { position:absolute; inset:60px 11% 34px; z-index:2; pointer-events:none; }.battle-arrow { position:absolute; display:block; height:2px; border-radius:999px; }.battle-arrow i { position:absolute; top:50%; display:block; width:11px; height:11px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:translateY(-50%) rotate(45deg); }.player-arrow { top:28%; left:2%; width:60%; color:var(--accent-a); background:var(--accent-a); box-shadow:0 0 12px color-mix(in srgb,var(--accent-a) 52%,transparent); }.player-arrow i { right:0; }.enemy-arrow { right:3%; width:52%; color:var(--accent-b); background:var(--accent-b); box-shadow:0 0 12px color-mix(in srgb,var(--accent-b) 52%,transparent); }.enemy-arrow i { left:0; transform:translateY(-50%) rotate(-135deg); }.enemy-arrow-0 { top:16%; }.enemy-arrow-1 { top:39%; }.enemy-arrow-2 { top:62%; }.enemy-arrow-3 { top:82%; }
@media (max-width:700px) { .screen.progress-screen.is-active { height:calc(100dvh - 88px); }.battle-board { grid-template-columns:1fr; }.battle-arrow-overlay { inset:70px 15% 70px; }.player-arrow { top:27%; left:3%; width:76%; }.enemy-arrow { right:3%; width:68%; }.enemy-arrow-0 { top:52%; }.enemy-arrow-1 { top:63%; }.enemy-arrow-2 { top:74%; }.enemy-arrow-3 { top:85%; } }

/* Curved combat trajectories and a genuinely submerged card hand. */
.battle-arrow-overlay { inset:42px 24% 34px; z-index:2; }.battle-arrow { height:94px; background:transparent; border-top:2px solid currentColor; border-radius:50% 50% 0 0; box-shadow:none; }.battle-arrow i { top:1px; }.player-arrow { top:16%; left:0; width:82%; color:var(--accent-a); }.enemy-arrow { right:0; width:74%; color:var(--accent-b); }.enemy-arrow-0 { top:5%; }.enemy-arrow-1 { top:28%; }.enemy-arrow-2 { top:51%; }.enemy-arrow-3 { top:73%; }
.battle-board { min-height:160px; }.battle-card-zone { min-height:170px; padding-bottom:0; }.battle-hand-zone { height:170px; min-height:0; }.battle-card-hand { min-height:0; height:170px; padding-top:0; overflow:visible; }.battle-card { flex:0 0 174px; width:174px; height:250px; padding:17px 15px; transform:translateY(120px); }.battle-card span { font-size:24px; }.battle-card strong { font-size:12px; }.battle-card small { font-size:10px; }.battle-card:hover,.battle-card:focus-visible,.battle-card.is-selected { transform:translateY(0); }
@media (max-width:700px) { .battle-arrow-overlay { inset:50px 19% 50px; }.battle-arrow { height:66px; }.player-arrow { top:13%; width:86%; }.enemy-arrow { width:78%; }.enemy-arrow-0 { top:42%; }.enemy-arrow-1 { top:57%; }.enemy-arrow-2 { top:72%; }.enemy-arrow-3 { top:86%; }.battle-board { min-height:144px; }.battle-card-zone { min-height:150px; }.battle-hand-zone,.battle-card-hand { height:150px; }.battle-card { flex-basis:132px; width:132px; height:210px; padding:13px 11px; transform:translateY(94px); }.battle-card:hover,.battle-card:focus-visible,.battle-card.is-selected { transform:translateY(0); }.battle-card span { font-size:20px; } }

svg.battle-arrow-overlay { position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.battle-trajectory { opacity:.9; transition:opacity 120ms ease; }.battle-trajectory.is-muted { opacity:.08 !important; }
.progress-field-resources strong { color:var(--accent-a); white-space:normal; }
.status-effect-editor { display:grid; gap:18px; padding:22px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-a)); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 88%,var(--scene-edge))); }
.status-base-fields,.status-config-grid,.status-rule-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.status-config-personal,.status-rule-group { display:grid; gap:13px; padding:16px; border:1px solid color-mix(in srgb,var(--line) 76%,transparent); border-radius:11px; background:color-mix(in srgb,var(--surface-deep) 56%,transparent); }.status-config-heading h2 { margin:0; font-size:15px; }.status-config-heading p,.status-power-note { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }.status-base-fields > label,.status-config-grid > label,.status-rule-row > label { min-width:0; }.status-base-fields input,.status-base-fields select,.status-config-grid input:not([type="checkbox"]),.status-config-grid select,.status-rule-row input,.status-rule-row select { box-sizing:border-box; width:100%; min-width:0; }.status-check { display:flex; align-items:center; gap:8px; min-width:0; min-height:40px; padding:0 11px; border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 68%,transparent); }.status-check input { flex:0 0 auto; width:auto; min-width:0; accent-color:var(--accent-a); }.status-check span { overflow-wrap:anywhere; font-size:12px; }.status-rule-list { display:grid; gap:10px; }.status-rule-row { position:relative; padding:35px 12px 12px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 62%,transparent); }.status-rule-row .effect-remove { position:absolute; top:8px; right:8px; }
.data-card-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.danger-button { border-color:color-mix(in srgb,#e56a76 70%,var(--line)) !important; color:#ffb6bd !important; }
.identity-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.identity-resistance-fields,.identity-loadout-fields { display:grid; grid-column:1 / -1; gap:10px; padding:13px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 56%,transparent); }.identity-resistance-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }.identity-resistance-fields h2 { grid-column:1 / -1; margin:0; font-size:14px; }.identity-resistance-fields label { min-width:0; }.identity-resistance-fields select { width:100%; min-width:0; }.identity-loadout-fields h2 { margin:0; font-size:14px; }.identity-loadout-fields > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.identity-loadout-fields label { min-width:0; }.identity-loadout-fields select { min-width:0; width:100%; }
.enemy-loadout-fields { display:grid; grid-column:1/-1; gap:10px; padding:13px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-b)); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 56%,transparent); }.enemy-loadout-fields h2 { margin:0; font-size:14px; }.enemy-loadout-fields > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.enemy-loadout-fields label,.enemy-loadout-fields select { min-width:0; width:100%; }.enemy-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; grid-column:1/-1; }.identity-inventory-card { position:relative; display:flex !important; align-items:flex-start; justify-content:space-between; gap:14px; }.identity-inventory-card > div { min-width:0; }.identity-inventory-card aside { display:grid; flex:0 0 auto; gap:6px; min-width:72px; }.identity-inventory-card aside button { min-height:29px; font-size:10px; }.base-skill-selectors { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:700px) { .identity-resistance-fields,.identity-loadout-fields > div { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .status-effect-editor { width:100%; box-sizing:border-box; overflow:hidden; }.status-base-fields,.status-config-grid,.status-rule-row { grid-template-columns:1fr; }.status-rule-row { padding-top:38px; }.status-effect-editor input,.status-effect-editor select,.status-effect-editor textarea { max-width:100%; box-sizing:border-box; }.screen.progress-screen.is-active { height:calc(100dvh - 88px); min-height:0; }.progress-session-bar { display:grid; grid-template-columns:1fr; }.progress-session-bar > div { border-right:0; }.progress-log { min-height:0; }.progress-command-dock { align-items:stretch; flex-direction:column; }.progress-check-controls,.progress-admin-move { width:100%; }.progress-command-dock select,.progress-command-dock button { flex:1; max-width:none; }.progress-command-status { width:100%; text-align:left; }.judgement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.enemy-loadout-fields > div,.base-skill-selectors { grid-template-columns:repeat(2,minmax(0,1fr)); }.enemy-form-actions { justify-content:stretch; }.enemy-form-actions button { flex:1; }.identity-inventory-card { gap:10px; }.identity-inventory-card aside { min-width:62px; }.loadout-tooltip { position:fixed; right:12px; bottom:12px; width:calc(100vw - 24px); max-height:45dvh; } }
.skills-passives-screen.is-active { display:grid; align-content:start; gap:18px; }.loadout-section { display:grid; gap:12px; padding:18px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 88%,var(--scene-edge))); }.loadout-section h2 { margin:2px 0 0; font-size:18px; }.loadout-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.passive-loadout-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.loadout-grid article { display:grid; align-content:start; gap:7px; min-height:122px; padding:13px; border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 62%,transparent); }.loadout-grid p { margin:0; color:var(--muted); font-size:10px; }.loadout-grid h2 { margin:0; font-size:15px; }.loadout-grid strong { color:var(--accent-a); font-size:11px; }.loadout-grid span { color:var(--muted); font-size:11px; line-height:1.5; white-space:pre-wrap; }.loadout-grid .empty-loadout { opacity:.72; }.empty-loadout strong { color:var(--muted); }
.loadout-card { position:relative; cursor:help; }.loadout-tooltip { position:absolute; right:8px; bottom:calc(100% + 12px); z-index:30; display:block; width:min(390px,calc(100vw - 48px)); max-height:300px; margin:0; padding:15px 16px; overflow:auto; border:1px solid color-mix(in srgb,var(--accent-a) 76%,var(--line)); border-radius:11px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 98%,var(--scene-edge))); box-shadow:0 18px 38px color-mix(in srgb,#000 66%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 24%,transparent); color:var(--text); font-family:inherit; font-size:11px; font-weight:400; line-height:1.7; letter-spacing:.01em; white-space:pre-wrap; opacity:0; pointer-events:none; transform:translateY(7px) scale(.98); transition:opacity .16s ease,transform .16s ease; }.loadout-tooltip::before { content:'DETAIL'; display:block; margin-bottom:8px; color:var(--accent-a); font-family:inherit; font-size:9px; font-weight:700; letter-spacing:.16em; }.loadout-card:hover .loadout-tooltip,.loadout-card:focus-within .loadout-tooltip { opacity:1; transform:translateY(0) scale(1); }
.identity-detail-dialog { width:min(900px,calc(100vw - 34px)); max-height:min(800px,calc(100dvh - 34px)); padding:0; overflow:auto; border:1px solid color-mix(in srgb,var(--accent-a) 62%,var(--line)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 96%,var(--scene-edge))); box-shadow:0 28px 70px color-mix(in srgb,#000 75%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 26%,transparent); color:var(--text); font-family:inherit; }.identity-detail-dialog::backdrop { background:color-mix(in srgb,#000 72%,transparent); backdrop-filter:blur(4px); }.identity-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px 23px 16px; border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent); background:linear-gradient(90deg,color-mix(in srgb,var(--scene-main) 28%,transparent),transparent); }.identity-detail-header h2,.identity-detail-header p,.identity-detail-section h3,.identity-detail-section p,.identity-detail-description { margin:0; }.identity-detail-header h2 { margin-top:3px; font-size:24px; font-weight:600; }.identity-detail-header > div > p:last-child { margin-top:7px; color:var(--accent-a); font-size:12px; }.identity-detail-description { padding:17px 23px 4px; color:var(--muted); font-size:13px; line-height:1.7; white-space:pre-wrap; }.identity-detail-section { display:grid; gap:10px; padding:18px 23px 4px; }.identity-detail-section:last-child { padding-bottom:23px; }.identity-detail-section h3 { margin-top:3px; font-size:17px; font-weight:600; }.identity-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.identity-detail-grid article { display:grid; align-content:start; gap:7px; min-height:130px; padding:13px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 61%,transparent); }.identity-detail-grid p { color:var(--muted); font-size:10px; }.identity-detail-grid h4 { margin:0; font-size:15px; font-weight:600; }.identity-detail-grid strong { color:var(--accent-a); font-size:11px; }.identity-detail-grid span { color:var(--muted); font-size:11px; line-height:1.55; white-space:pre-wrap; }.identity-detail-passives { grid-template-columns:repeat(4,minmax(0,1fr)); }
.confirm-dialog { width:min(430px,calc(100vw - 34px)); margin:auto; padding:0; border:1px solid color-mix(in srgb,var(--accent-a) 64%,var(--line)); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 97%,var(--scene-edge))); box-shadow:0 28px 70px color-mix(in srgb,#000 76%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 28%,transparent); color:var(--text); font-family:inherit; }.confirm-dialog::backdrop { background:color-mix(in srgb,#000 72%,transparent); backdrop-filter:blur(4px); }.confirm-dialog section { display:grid; gap:10px; padding:22px; }.confirm-dialog .section-kicker,.confirm-dialog h2,.confirm-dialog p { margin:0; }.confirm-dialog h2 { font-size:20px; }.confirm-dialog #confirm-dialog-copy { color:var(--muted); font-size:13px; line-height:1.65; white-space:pre-wrap; }.confirm-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }.confirm-dialog-actions button { min-width:76px; }
.battle-settlement-dialog { width:min(500px,calc(100vw - 34px)); margin:auto; padding:0; border:1px solid color-mix(in srgb,var(--accent-a) 72%,var(--line)); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 95%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 97%,var(--scene-edge))); box-shadow:0 30px 80px color-mix(in srgb,#000 78%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 34%,transparent); color:var(--text); font-family:inherit; }.battle-settlement-dialog::backdrop { background:color-mix(in srgb,#000 76%,transparent); backdrop-filter:blur(5px); }.battle-settlement-dialog section { display:grid; gap:11px; padding:26px; text-align:center; }.battle-settlement-dialog .section-kicker,.battle-settlement-dialog h2,.battle-settlement-dialog p { margin:0; }.battle-settlement-dialog h2 { font-size:25px; }.battle-settlement-dialog #battle-settlement-copy { color:var(--muted); font-size:14px; line-height:1.7; white-space:pre-wrap; }.battle-settlement-actions { display:flex; justify-content:center; margin-top:10px; }.battle-settlement-actions button { min-width:160px; }
@media (max-width:700px) { .loadout-grid,.passive-loadout-grid,.identity-detail-grid,.identity-detail-passives { grid-template-columns:repeat(2,minmax(0,1fr)); }.loadout-grid article { min-height:105px; padding:11px; }.identity-detail-header { padding:18px 16px 14px; }.identity-detail-description,.identity-detail-section { padding-left:16px; padding-right:16px; } }
@media (max-width:700px) { .status-effect-editor { padding:15px; gap:15px; }.status-base-fields,.status-config-grid,.status-rule-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.status-config-personal,.status-rule-group { padding:14px; }.status-rule-row { padding:33px 10px 11px; }.status-rule-row input,.status-rule-row select { font-size:12px; } }
@media (max-width: 700px) { .screen.progress-screen.is-active { min-height:calc(100dvh - 88px); } .progress-console-header { align-items:flex-start; flex-direction:column; } .progress-console-meta { width:100%; justify-content:space-between; } .progress-session-bar { align-items:stretch; flex-wrap:wrap; } .progress-session-bar > div { flex:1 1 50%; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); } .progress-session-bar > div:nth-child(2) { border-right:0; } .progress-session-bar > div:nth-child(3) { border-bottom:0; } .progress-session-bar .primary-button { margin:10px; } .progress-log { min-height:360px; padding:18px 14px; } }

.slot-preview { white-space:pre-wrap; text-align:left; }
.combat-statuses { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:100%; margin-top:4px; }
.combat-status-chip { position:relative; display:inline-flex; align-items:baseline; gap:4px; max-width:100%; padding:3px 5px; overflow:visible; border:1px solid color-mix(in srgb,var(--accent-a) 58%,var(--line)); border-radius:5px; background:color-mix(in srgb,var(--surface-deep) 76%,var(--accent-a)); color:var(--accent-a); font-size:9px; line-height:1.2; white-space:nowrap; cursor:help; outline:none; }
.combat-status-chip b { max-width:72px; overflow:hidden; font:inherit; font-weight:700; text-overflow:ellipsis; }.combat-status-chip small { color:var(--text); font:inherit; font-size:8px; font-weight:700; }.combat-status-chip.is-stack { border-color:color-mix(in srgb,var(--accent-b) 62%,var(--line)); background:color-mix(in srgb,var(--surface-deep) 76%,var(--accent-b)); color:var(--accent-b); }
.battle-status-popover { position:fixed; z-index:100; max-width:min(280px,calc(100vw - 24px)); max-height:min(220px,calc(100dvh - 24px)); padding:10px 11px; overflow:auto; border:1px solid color-mix(in srgb,var(--accent-a) 70%,var(--line)); border-radius:8px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 98%,var(--scene-edge))); box-shadow:0 12px 28px color-mix(in srgb,#000 58%,transparent); color:var(--text); font-family:inherit; font-size:10px; font-style:normal; font-weight:500; line-height:1.55; letter-spacing:0; text-align:left; white-space:pre-wrap; pointer-events:none; }
.combatant > small.combat-stagger { color:color-mix(in srgb,var(--accent-b) 78%,var(--text)); }.combatant.is-staggered .combat-token { filter:grayscale(.7) brightness(.72); }.combatant.is-staggered .combat-stagger { color:var(--accent-b); font-weight:700; }
.battle-action-stage { position:absolute; z-index:8; top:50%; left:50%; display:grid; grid-template-columns:76px minmax(100px,150px) 76px; align-items:center; gap:12px; padding:13px 16px; border:1px solid color-mix(in srgb,var(--accent-a) 68%,var(--line)); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 96%,var(--scene-edge))); box-shadow:0 16px 42px color-mix(in srgb,#000 64%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 28%,transparent); transform:translate(-50%,-50%); animation:battle-action-enter .2s ease-out; }.battle-action-actor,.battle-action-target { display:grid; justify-items:center; gap:5px; min-width:0; }.battle-action-token { display:grid; width:54px; height:54px; place-items:center; overflow:hidden; border:3px solid var(--accent-a); border-radius:50%; background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--text) 56%,var(--accent-a)),var(--accent-a)); color:var(--accent-text); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-a) 13%,transparent); font-size:20px; font-weight:700; }.battle-action-target .battle-action-token { border-color:var(--accent-b); background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--text) 42%,var(--accent-b)),var(--accent-b)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-b) 13%,transparent); }.battle-action-token img { width:100%; height:100%; object-fit:cover; }.battle-action-actor strong,.battle-action-target strong { max-width:76px; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.battle-action-copy { display:grid; gap:4px; text-align:center; }.battle-action-copy p,.battle-action-copy span,.battle-action-copy b,.battle-action-target em { margin:0; font-style:normal; }.battle-action-copy p { overflow:hidden; color:var(--text); font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.battle-action-copy span { color:var(--accent-a); font-size:9px; letter-spacing:.12em; }.battle-action-copy b { color:var(--muted); font-size:9px; font-weight:500; }.battle-action-target em { color:var(--accent-b); font-size:12px; font-weight:700; }@keyframes battle-action-enter { from { opacity:0; transform:translate(-50%,-45%) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.battle-board { box-sizing:border-box; padding-top:42px; }.battle-board-side { align-self:center; }
@media (max-width:700px) { .battle-action-stage { grid-template-columns:62px minmax(82px,120px) 62px; gap:7px; padding:10px; }.battle-action-token { width:45px; height:45px; }.battle-action-actor strong,.battle-action-target strong { max-width:60px; }.battle-action-copy p { font-size:10px; } }

/* The hand owns a fixed strip at the bottom: cards remain submerged until hovered,
   while the board consumes only the space above it instead of pushing upward. */
.progress-log:has(.battle-board) { display:grid; grid-template-rows:minmax(0,1fr) 170px; gap:0; align-items:stretch; padding:12px clamp(14px,2vw,28px) 0; }
.progress-log:has(.battle-board) .battle-board { min-height:0; height:100%; padding-top:26px; }
.progress-log:has(.battle-board) .battle-card-zone { min-height:0; height:170px; margin:0 -28px; padding:0 28px; }
.progress-log:has(.battle-board) .battle-hand-zone,.progress-log:has(.battle-board) .battle-card-hand { height:170px; }
.battle-card:disabled.is-assigned { filter:saturate(.45) brightness(.72); opacity:.72; cursor:default; }
@media (max-width:700px) { .progress-log:has(.battle-board) { grid-template-rows:minmax(0,1fr) 150px; padding:8px 10px 0; }.progress-log:has(.battle-board) .battle-card-zone { height:150px; margin:0 -10px; padding:0 8px; }.progress-log:has(.battle-board) .battle-hand-zone,.progress-log:has(.battle-board) .battle-card-hand { height:150px; } }

/* A combat action is the focal point, not a small tooltip: both sides, the skill,
   coin result, damage and resolved effects remain readable for the full interval. */
.battle-action-stage { width:min(620px,88%); grid-template-columns:1fr; gap:16px; padding:22px 26px; border-width:2px; border-radius:18px; }.battle-action-stage header { display:grid; gap:5px; text-align:center; }.battle-action-stage header span { color:var(--accent-a); font-size:10px; font-weight:700; letter-spacing:.17em; }.battle-action-stage header b { font-size:24px; }.battle-action-stage header small { color:var(--muted); font-size:12px; }.battle-action-combatants { display:grid; grid-template-columns:1fr minmax(150px,.85fr) 1fr; align-items:center; gap:18px; }.battle-action-actor,.battle-action-target { gap:8px; }.battle-action-actor > p,.battle-action-target > p { margin:0; color:var(--muted); font-size:10px; letter-spacing:.12em; }.battle-action-token { width:88px; height:88px; border-width:4px; font-size:31px; }.battle-action-actor strong,.battle-action-target strong { max-width:132px; font-size:14px; }.battle-action-copy { gap:8px; }.battle-action-copy span { color:var(--accent-a); font-size:11px; font-weight:700; letter-spacing:.14em; }.battle-action-copy i { color:var(--accent-a); font-size:38px; font-style:normal; line-height:.7; text-shadow:0 0 20px color-mix(in srgb,var(--accent-a) 45%,transparent); }.battle-action-copy b { color:var(--text); font-size:13px; line-height:1.55; }.battle-action-stage footer { display:grid; gap:6px; padding-top:13px; border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent); text-align:center; }.battle-action-stage footer strong { color:var(--accent-b); font-size:20px; }.battle-action-stage footer span { color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width:700px) { .battle-action-stage { width:min(94%,440px); padding:16px 14px; gap:12px; }.battle-action-stage header b { font-size:18px; }.battle-action-combatants { grid-template-columns:1fr minmax(90px,.7fr) 1fr; gap:8px; }.battle-action-token { width:62px; height:62px; font-size:23px; }.battle-action-actor strong,.battle-action-target strong { max-width:82px; font-size:11px; }.battle-action-copy i { font-size:28px; }.battle-action-copy b { font-size:10px; }.battle-action-stage footer strong { font-size:17px; }.battle-action-stage footer span { font-size:10px; } }

/* The hand must not reserve its full card height.  Its baseline sits at the viewport
   edge, so only the upper edge is visible until the card rises on hover. */
.progress-log:has(.battle-board) { grid-template-rows:minmax(0,1fr) 0; overflow:hidden; }
.progress-log:has(.battle-board) .battle-card-zone { position:relative; height:0; min-height:0; margin:0; padding:0; overflow:visible; }
.progress-log:has(.battle-board) .battle-hand-zone { position:absolute; right:132px; bottom:0; left:132px; height:0; min-height:0; }
.progress-log:has(.battle-board) .battle-hand-zone > .section-kicker { position:absolute; bottom:5px; left:0; z-index:3; }
.progress-log:has(.battle-board) .battle-card-hand { position:absolute; right:0; bottom:0; left:0; height:0; min-height:0; padding:0; align-items:flex-end; }
.progress-log:has(.battle-board) .battle-pile { position:absolute; bottom:8px; z-index:4; }.progress-log:has(.battle-board) .discard-pile { left:26px; }.progress-log:has(.battle-board) .draw-pile { right:26px; }
.progress-log:has(.battle-board) .battle-card { align-self:flex-end; margin-bottom:0; transform:translateY(205px); transform-origin:center bottom; }.progress-log:has(.battle-board) .battle-card:hover,.progress-log:has(.battle-board) .battle-card:focus-visible,.progress-log:has(.battle-board) .battle-card.is-selected { transform:translateY(85px); }
.battle-card.is-dragging { opacity:.38; transform:translateY(-18px) rotate(-3deg) !important; }
.battle-card-detail { display:block; white-space:pre-line; overflow:hidden; font-size:10px; line-height:1.45; text-wrap:pretty; }
.battle-trajectory.is-clash { filter:drop-shadow(0 0 6px currentColor); }
@media (max-width:700px) { .progress-log:has(.battle-board) .battle-hand-zone { right:68px; left:68px; }.progress-log:has(.battle-board) .discard-pile { left:8px; }.progress-log:has(.battle-board) .draw-pile { right:8px; }.progress-log:has(.battle-board) .battle-card { transform:translateY(170px); }.progress-log:has(.battle-board) .battle-card:hover,.progress-log:has(.battle-board) .battle-card:focus-visible,.progress-log:has(.battle-board) .battle-card.is-selected { transform:translateY(68px); } }

/* Keep card copy legible even while the hand remains submerged. */
.battle-card .battle-card-detail { font-size:10px; line-height:1.45; white-space:pre-line; }
@media (max-width:700px) { .progress-log:has(.battle-layout) .battle-card .battle-card-detail { font-size:9px; line-height:1.42; } }
.battle-action-stage { animation:none !important; }
.battle-clash-record { display:grid; gap:4px; max-height:128px; margin:0; padding:0; overflow:auto; list-style:none; }.battle-clash-record li { padding:4px 6px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:5px; color:var(--text); font-size:10px; line-height:1.35; }.battle-clash-record li.is-omitted { border-style:dashed; color:var(--muted); text-align:center; }.battle-clash-result { display:block; color:var(--muted); font-size:9px; line-height:1.4; }.battle-action-copy .battle-clash-record + .battle-clash-result { margin-top:2px; }

/* Result sheets share the in-world dialog styling instead of browser alerts. */
.gacha-result-dialog { width:min(760px,calc(100vw - 34px)); max-height:min(760px,calc(100dvh - 34px)); margin:auto; padding:0; overflow:auto; border:1px solid color-mix(in srgb,var(--accent-a) 62%,var(--line)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 96%,var(--scene-edge))); box-shadow:0 28px 70px color-mix(in srgb,#000 75%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 26%,transparent); color:var(--text); font-family:inherit; }.gacha-result-dialog::backdrop { background:color-mix(in srgb,#000 72%,transparent); backdrop-filter:blur(4px); }.gacha-result-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px 23px 16px; border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent); background:linear-gradient(90deg,color-mix(in srgb,var(--scene-main) 28%,transparent),transparent); }.gacha-result-dialog h2,.gacha-result-dialog p { margin:0; }.gacha-result-dialog h2 { margin-top:3px; font-size:23px; font-weight:600; }.gacha-result-dialog header > div > p:last-child { margin-top:7px; color:var(--accent-a); font-size:12px; }.gacha-result-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:18px 23px; }.gacha-result-card { position:relative; display:grid; align-content:start; min-height:122px; gap:7px; padding:12px; overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:10px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 82%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 92%,var(--scene-edge))); }.gacha-result-card::after { position:absolute; inset:auto -16px -22px auto; width:70px; height:70px; border:1px solid currentColor; border-radius:50%; content:""; opacity:.18; }.gacha-result-card p,.gacha-result-card strong,.gacha-result-card h3,.gacha-result-card span { margin:0; }.gacha-result-card p { color:var(--muted); font-size:9px; letter-spacing:.1em; }.gacha-result-card strong { color:var(--accent-a); font-size:12px; letter-spacing:.08em; }.gacha-result-card h3 { overflow:hidden; font-size:15px; font-weight:600; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.gacha-result-card span { color:var(--muted); font-size:10px; line-height:1.45; }.gacha-result-card.grade-000 { border-color:#d9b66e; color:#f0cc78; background:radial-gradient(circle at 72% 22%,color-mix(in srgb,#f0cc78 29%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 84%,#765b2d),var(--surface-deep)); }.gacha-result-card.grade-00 { border-color:color-mix(in srgb,var(--accent-b) 76%,#dce5ff); }.gacha-result-card.grade-0 { border-color:color-mix(in srgb,var(--line) 82%,var(--accent-a)); }.gacha-result-card.decompose-skill { border-color:color-mix(in srgb,var(--accent-a) 78%,var(--line)); }.gacha-result-card.decompose-passive { border-color:color-mix(in srgb,var(--accent-b) 78%,var(--line)); }.gacha-result-dialog > footer { display:flex; justify-content:flex-end; padding:0 23px 22px; }.gacha-result-dialog > footer button { min-width:88px; }
.gacha-result-card.decompose-insanity { border-color:#d9b66e; color:#f0cc78; background:radial-gradient(circle at 72% 22%,color-mix(in srgb,#f0cc78 29%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 84%,#765b2d),var(--surface-deep)); }
@media (max-width:700px) { .gacha-result-dialog > header { padding:17px 16px 13px; }.gacha-result-dialog h2 { font-size:19px; }.gacha-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:13px 16px; }.gacha-result-card { min-height:102px; padding:10px; }.gacha-result-card h3 { font-size:14px; }.gacha-result-dialog > footer { padding:0 16px 16px; } }
.battle-board > .battle-pile-panel { position:absolute; bottom:18px; left:50%; z-index:20; width:min(420px,62%); transform:translateX(-50%); }.battle-pile-panel span { overflow-wrap:anywhere; }

/* Admin-only login notices are added by the client after a new online transition. */
.admin-login-toasts { position:fixed; right:22px; bottom:22px; z-index:180; display:grid; justify-items:end; gap:8px; width:min(340px,calc(100vw - 34px)); pointer-events:none; }.admin-login-toasts article { display:flex; align-items:baseline; gap:4px; width:max-content; max-width:100%; padding:12px 15px; border:1px solid color-mix(in srgb,var(--accent-a) 72%,var(--line)); border-radius:10px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 94%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 96%,var(--scene-edge))); box-shadow:0 14px 36px color-mix(in srgb,#000 54%,transparent); color:var(--text); font-size:12px; opacity:0; transform:translateY(10px); transition:opacity .22s ease,transform .22s ease; }.admin-login-toasts article.is-visible { opacity:1; transform:translateY(0); }.admin-login-toasts strong { overflow:hidden; color:var(--accent-a); text-overflow:ellipsis; white-space:nowrap; }.admin-login-toasts span { color:var(--text); white-space:nowrap; }
@media (max-width:700px) { .admin-login-toasts { right:12px; bottom:74px; width:min(300px,calc(100vw - 24px)); }.admin-login-toasts article { padding:10px 12px; font-size:11px; } }

.equipment-screen { align-content:start; gap:16px; }.screen.equipment-screen.is-active { display:grid; }.equipment-slots,.equipment-owned-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.equipment-slots article,.equipment-owned-grid article { display:grid; align-content:start; gap:8px; min-height:138px; padding:15px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 86%,var(--scene-edge))); }.equipment-slots p,.equipment-owned-grid p { margin:0; color:var(--accent-a); font-size:10px; letter-spacing:.12em; }.equipment-slots h2,.equipment-owned-grid h2 { margin:0; font-size:17px; }.equipment-slots span,.equipment-owned-grid span { color:var(--muted); font-size:11px; line-height:1.55; }.equipment-slots button,.equipment-owned-grid button { align-self:end; justify-self:start; margin-top:auto; }.equipment-owned { display:grid; gap:11px; padding:16px; border:1px solid color-mix(in srgb,var(--line) 74%,var(--accent-b)); border-radius:13px; background:color-mix(in srgb,var(--surface-deep) 65%,transparent); }.equipment-owned > .section-kicker { margin:0; }.equipment-set-effect { margin:0; padding:10px 12px; border-left:3px solid var(--accent-b); background:color-mix(in srgb,var(--accent-b) 12%,transparent); color:var(--text); font-size:12px; }.equipment-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.equipment-form-actions { display:flex; grid-column:1/-1; align-items:center; justify-content:flex-end; gap:8px; }.equipment-form-actions .admin-save-status { margin-right:auto; }.enemy-equipment-drops { display:grid; gap:10px; padding:14px; border:1px solid color-mix(in srgb,var(--line) 72%,var(--accent-b)); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 56%,transparent); }.enemy-equipment-drops > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }.enemy-equipment-drops h2,.enemy-equipment-drops p { margin:0; }.enemy-equipment-drops p { color:var(--muted); font-size:11px; }.enemy-drop-row { display:grid; grid-template-columns:minmax(0,1fr) 130px auto 32px; align-items:center; gap:8px; }.enemy-drop-row input,.enemy-drop-row select { min-width:0; }.enemy-drop-row span { color:var(--muted); font-size:12px; }
@media (max-width:700px) { .equipment-slots,.equipment-owned-grid { grid-template-columns:1fr; }.equipment-form { grid-template-columns:1fr; }.equipment-form .wide { grid-column:auto; }.enemy-drop-row { grid-template-columns:minmax(0,1fr) 90px auto 30px; gap:6px; } }

/* Compact, individually bounded storage cards. */
.inventory-equipment { display:grid; gap:9px; margin-top:14px; }.inventory-equipment > .section-kicker { margin:0; }
.inventory-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.inventory-card-grid > article { display:grid; align-content:start; gap:6px; min-width:0; min-height:104px; padding:12px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:10px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 90%,var(--scene-edge))); }
.inventory-card-grid > article p,.inventory-card-grid > article h2,.inventory-card-grid > article strong,.inventory-card-grid > article span { margin:0; min-width:0; }.inventory-card-grid > article p { color:var(--accent-a); font-size:10px; letter-spacing:.1em; }.inventory-card-grid > article p b { display:inline-grid; min-width:24px; margin-left:4px; padding:2px 5px; border-radius:999px; background:color-mix(in srgb,var(--accent-b) 24%,transparent); color:var(--text); font-size:10px; text-align:center; }.inventory-card-grid > article h2 { overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.inventory-card-grid > article strong { color:var(--text); font-size:11px; line-height:1.45; }.inventory-card-grid > article span { display:-webkit-box; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.inventory-card-grid > article button { align-self:end; justify-self:start; min-height:28px; margin-top:auto; font-size:10px; }
.inventory-card-grid .identity-inventory-card { grid-column:span 2; min-height:118px; padding:12px; }.inventory-card-grid .identity-inventory-card > div { display:grid; gap:5px; }.inventory-card-grid .identity-inventory-card strong { overflow:hidden; color:var(--text); font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }.inventory-card-grid .identity-inventory-card span { -webkit-line-clamp:2; }.inventory-card-grid .identity-inventory-card aside { min-width:58px; }.inventory-card-grid .identity-inventory-card aside button { min-height:27px; padding:0 8px; font-size:9px; }
.identity-decompose-toolbar { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-b)); border-radius:10px; background:color-mix(in srgb,var(--surface-deep) 66%,transparent); }.identity-decompose-toolbar > div { display:grid; gap:3px; }.identity-decompose-toolbar p,.identity-decompose-toolbar strong,.identity-decompose-toolbar span { margin:0; }.identity-decompose-toolbar strong { font-size:13px; }.identity-decompose-toolbar span { color:var(--muted); font-size:10px; }.identity-decompose-count { display:grid; gap:3px; color:var(--muted); font-size:9px; }.identity-decompose-count input { width:64px; min-height:27px; padding:3px 5px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-b)); border-radius:6px; background:var(--surface-deep); color:var(--text); font:inherit; }.identity-inventory-card aside small { max-width:70px; color:var(--muted); font-size:9px; line-height:1.4; text-align:right; }
.card-apply-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; margin-top:auto; }.card-apply-actions select { min-width:0; min-height:28px; padding:3px 5px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-b)); border-radius:6px; background:var(--surface-deep); color:var(--text); font-size:10px; }.card-apply-actions button { min-height:28px !important; margin:0 !important; padding:0 8px; white-space:nowrap; }
.inventory-item-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; margin-top:auto; }.inventory-item-actions input { min-width:0; min-height:28px; padding:3px 6px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-b)); border-radius:6px; background:var(--surface-deep); color:var(--text); font:inherit; font-size:10px; }.inventory-item-actions button { min-height:28px !important; margin:0 !important; padding:0 9px; }
.trade-dialog { width:min(640px,calc(100vw - 34px)); max-height:min(760px,calc(100dvh - 34px)); margin:auto; padding:0; overflow:auto; border:1px solid color-mix(in srgb,var(--accent-a) 65%,var(--line)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 97%,var(--scene-edge))); box-shadow:0 28px 70px color-mix(in srgb,#000 76%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent-a) 27%,transparent); color:var(--text); font-family:inherit; }.trade-dialog::backdrop { background:color-mix(in srgb,#000 72%,transparent); backdrop-filter:blur(4px); }.trade-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px 23px 16px; border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent); background:linear-gradient(90deg,color-mix(in srgb,var(--scene-main) 28%,transparent),transparent); }.trade-dialog header p,.trade-dialog header h2,.trade-dialog h3,.trade-dialog-content > p { margin:0; }.trade-dialog header h2 { margin-top:3px; font-size:23px; }.trade-dialog header > div > p:last-child { margin-top:7px; color:var(--muted); font-size:12px; }.trade-dialog-content { display:grid; gap:16px; padding:19px 23px; }.trade-dialog label { display:grid; gap:6px; color:var(--muted); font-size:11px; }.trade-dialog select,.trade-dialog input { min-width:0; min-height:34px; padding:6px 8px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-b)); border-radius:7px; background:var(--surface-deep); color:var(--text); font:inherit; }.trade-resource-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.trade-item-section { display:grid; gap:9px; }.trade-item-section > div { display:flex; align-items:end; justify-content:space-between; gap:10px; }.trade-item-section h3 { font-size:16px; }.trade-item-section .section-kicker { color:var(--accent-a); font-size:10px; letter-spacing:.1em; }.trade-item-section > #trade-item-rows { display:grid; gap:7px; max-height:260px; overflow:auto; padding-right:3px; }.trade-item-row { grid-template-columns:auto minmax(0,1fr) 76px; align-items:center; gap:9px; padding:9px 10px; border:1px solid color-mix(in srgb,var(--line) 76%,var(--accent-a)); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 65%,transparent); }.trade-item-row > input[type="checkbox"] { width:16px; min-height:16px; padding:0; accent-color:var(--accent-a); }.trade-item-row span { display:grid; min-width:0; gap:2px; }.trade-item-row b { overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.trade-item-row small { color:var(--muted); font-size:10px; }.trade-item-row input[type="number"] { min-height:29px; font-size:11px; }.trade-dialog > form > footer { display:flex; justify-content:flex-end; gap:8px; padding:0 23px 22px; }.trade-dialog > form > footer button { min-width:82px; }
.session-assistant-list { display:grid; gap:7px; }.session-assistant-list > article { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid color-mix(in srgb,var(--line) 75%,var(--accent-a)); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 66%,transparent); }.session-assistant-list strong,.session-assistant-list small { display:block; }.session-assistant-list strong { font-size:12px; }.session-assistant-list small { margin-top:3px; color:var(--muted); font-size:10px; }
.equipment-owned-grid article.is-equipped { border-color:var(--accent-b); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-b) 24%,transparent); }.equipment-owned-grid article p b { margin-left:4px; color:var(--text); }
@media (max-width:700px) { .inventory-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.inventory-card-grid > article { min-height:94px; padding:10px; }.inventory-card-grid > article h2 { font-size:14px; }.inventory-card-grid > article strong { font-size:10px; }.inventory-card-grid .identity-inventory-card { grid-column:1 / -1; min-height:104px; }.inventory-card-grid .identity-inventory-card > div { min-width:0; }.inventory-item-actions { grid-template-columns:1fr; }.inventory-item-actions button { justify-self:stretch !important; }.trade-dialog header { padding:17px 16px 13px; }.trade-dialog header h2 { font-size:19px; }.trade-dialog-content { gap:13px; padding:14px 16px; }.trade-resource-fields { grid-template-columns:1fr; gap:8px; }.trade-dialog > form > footer { padding:0 16px 16px; }.trade-item-section > #trade-item-rows { max-height:220px; } }

/* Separate Dark World battle board: no cards, coin clashes, or normal status widgets. */
.dark-battle-board { display:grid; min-height:100%; gap:14px; padding:clamp(14px,2vw,28px); border:2px solid var(--dark-paper,#fff); background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.08),transparent 48%),#000; color:#fff; font-family:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,monospace; }.dark-battle-board > header { display:grid; gap:5px; padding-bottom:12px; border-bottom:1px solid #777; }.dark-battle-board > header span { color:#aaa; font-size:10px; letter-spacing:.16em; }.dark-battle-board > header strong { font-size:18px; }.dark-battle-board > header small { color:#bbb; font-size:10px; }.dark-battle-sides { display:grid; grid-template-columns:1fr 1fr; gap:20px; min-height:150px; }.dark-battle-sides > section { display:grid; align-content:start; gap:12px; }.dark-battle-sides > section > p,.dark-pattern-readout > p,.dark-battle-history > p { margin:0; color:#aaa; font-size:10px; font-weight:700; letter-spacing:.14em; }.dark-battle-sides > section:last-child > p { text-align:right; }.dark-combatant-line { display:flex; flex-wrap:wrap; gap:12px; }.dark-battle-sides > section:last-child .dark-combatant-line { justify-content:flex-end; }.dark-combatant { display:grid; justify-items:center; gap:5px; width:90px; min-width:0; padding:9px 6px; border:1px solid #555; background:#101010; cursor:default; }.dark-combatant.enemy { border-color:#888; cursor:pointer; }.dark-combatant.enemy.is-target { border-color:#fff; box-shadow:3px 3px 0 #777; }.dark-combatant-token { display:grid; width:55px; height:55px; place-items:center; overflow:hidden; border:2px solid #fff; background:#000; color:#fff; font-size:22px; font-weight:700; }.dark-combatant-token img { width:100%; height:100%; object-fit:cover; }.dark-combatant strong { max-width:100%; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.dark-combatant small { color:#aaa; font-size:9px; }.dark-mercy { display:grid; grid-template-columns:auto minmax(24px,1fr) auto; align-items:center; gap:3px; width:100%; margin-top:2px; color:#ddd; font-size:8px; }.dark-mercy i { display:block; height:5px; overflow:hidden; border:1px solid #aaa; background:#000; }.dark-mercy b { display:block; height:100%; background:#fff; }.dark-mercy em { color:#fff; font-style:normal; }.dark-pattern-readout,.dark-battle-history { display:grid; gap:8px; padding:10px; border:1px solid #555; background:#0b0b0b; }.dark-pattern-readout > div { display:flex; flex-wrap:wrap; gap:7px; }.dark-pattern-readout span { padding:5px 7px; border:1px solid #777; color:#fff; font-size:10px; }.dark-pattern-readout small { color:#aaa; font-size:9px; }.dark-battle-history ul { display:grid; gap:4px; max-height:92px; margin:0; padding:0; overflow:auto; list-style:none; }.dark-battle-history li { color:#ddd; font-size:10px; line-height:1.5; }.dark-battle-history li strong { color:#fff; }.dark-player-controls { display:grid; gap:10px; padding-top:12px; border-top:1px solid #777; }.dark-target-choice label,.dark-action-buttons label { display:grid; gap:5px; color:#aaa; font-size:10px; }.dark-target-choice select,.dark-action-buttons select { min-height:32px; border:1px solid #fff; border-radius:0; background:#000; color:#fff; font:inherit; }.dark-action-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:8px; }.dark-action-buttons button { min-width:0; }.dark-action-buttons button,.dark-attack-timing button,.dark-battle-settlement button { min-height:32px; border:2px solid #fff; border-radius:0; background:#fff; color:#000; box-shadow:3px 3px 0 #555; font-family:inherit; }.dark-action-buttons .quiet-button { background:#000; color:#fff; }.dark-action-buttons button:disabled { border-color:#555; background:#222; color:#777; box-shadow:none; }.dark-attack-timing { display:grid; gap:8px; padding:11px; border:1px solid #fff; background:#111; }.dark-attack-timing p { margin:0; color:#ccc; font-size:10px; }.dark-timing-track { position:relative; height:18px; overflow:hidden; border:1px solid #aaa; background:#000; }.dark-timing-perfect { position:absolute; top:0; bottom:0; left:50%; width:4px; background:#fff; transform:translateX(-50%); }.dark-timing-cursor { position:absolute; top:2px; bottom:2px; left:0; width:10px; background:#aaa; animation:dark-timing-sweep 1.2s linear infinite; }.dark-attack-timing button { justify-self:end; min-width:110px; }.dark-battle-settlement { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:2px solid #fff; background:#111; }.dark-battle-settlement strong { font-size:14px; }.dark-battle-settlement span { color:#bbb; font-size:10px; }@keyframes dark-timing-sweep { from { transform:translateX(0); } to { transform:translateX(calc(100vw - 90px)); } }
@media (max-width:700px) { .dark-battle-board { gap:11px; padding:12px; }.dark-battle-sides { gap:10px; min-height:128px; }.dark-combatant-line { gap:7px; }.dark-combatant { width:68px; padding:6px 3px; }.dark-combatant-token { width:42px; height:42px; font-size:17px; }.dark-combatant strong { font-size:9px; }.dark-mercy { font-size:7px; }.dark-action-buttons { grid-template-columns:1fr 1fr; }.dark-action-buttons label { grid-column:1/-1; }.dark-action-buttons button { width:100%; }.dark-battle-settlement { align-items:stretch; flex-direction:column; }.dark-battle-settlement button { width:100%; } }
@media (max-width:700px) { .identity-decompose-toolbar { padding:9px 10px; }.identity-decompose-toolbar span { display:none; }.card-apply-actions { grid-template-columns:1fr; }.card-apply-actions button { justify-self:stretch !important; } }
@media (max-width:700px) { .online-count { padding:4px 6px; font-size:9px; }.session-members-admin { grid-template-columns:1fr; }.session-member-admin-list article { grid-template-columns:minmax(0,1fr) auto; }.session-member-admin-list .danger-button { grid-column:2; grid-row:1 / span 2; }.session-member-self { justify-self:end; } }
@keyframes dark-timing-sweep { from { left:0; } to { left:calc(100% - 10px); } }
.dark-dodge-arena { position:relative; min-height:260px; overflow:hidden; border:2px solid #fff; background:radial-gradient(circle at 50% 48%,#1c1c1c,#000 72%); touch-action:none; }.dark-dodge-arena canvas { display:block; width:100%; height:260px; }.dark-dodge-overlay { position:absolute; top:8px; left:10px; color:#aaa; font-size:9px; letter-spacing:.08em; pointer-events:none; }.dark-mobile-joystick { position:relative; z-index:4; display:none; width:128px; height:128px; margin:22px auto 4px; border:2px solid #aaa; border-radius:50%; background:rgba(0,0,0,.5); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }.dark-mobile-joystick.is-active { border-color:#fff; }.dark-mobile-joystick::before,.dark-mobile-joystick::after { position:absolute; top:50%; left:50%; background:#777; content:""; transform:translate(-50%,-50%); }.dark-mobile-joystick::before { width:1px; height:104px; }.dark-mobile-joystick::after { width:104px; height:1px; }.dark-mobile-joystick i { position:absolute; top:50%; left:50%; width:44px; height:44px; border:1px solid #fff; border-radius:50%; background:#333; transform:translate(calc(-50% + var(--stick-x,0) * 42px),calc(-50% + var(--stick-y,0) * 42px)); }.dark-mobile-joystick.is-active i { background:#555; }.dark-action-choice { display:grid; gap:5px; color:#aaa; font-size:10px; }.dark-action-choice select { min-height:32px; border:1px solid #fff; border-radius:0; background:#000; color:#fff; font:inherit; }.dark-action-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }.dark-timing-track { height:30px; }.dark-timing-cursor { top:3px; bottom:3px; animation-duration:1.6s; }.dark-timing-perfect { width:5px; }
.dark-dodge-arena { width:min(100%,520px); min-height:0; aspect-ratio:1; justify-self:center; }.dark-dodge-arena canvas { height:100%; }.dark-phase-wait { display:grid; gap:5px; padding:14px; border:1px solid #777; background:#101010; text-align:center; }.dark-phase-wait strong { font-size:13px; }.dark-phase-wait span { color:#aaa; font-size:10px; }
@media (max-width:700px) { .dark-dodge-arena { min-height:220px; }.dark-dodge-arena canvas { height:220px; }.dark-mobile-joystick { display:block; }.dark-action-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }.dark-action-buttons button { min-height:38px; } }
@media (max-width:700px) { .dark-dodge-arena { min-height:0; aspect-ratio:1; }.dark-dodge-arena canvas { height:100%; } }
.dark-dodge-stage { position:relative; width:min(calc(100% - 96px),520px); aspect-ratio:1; margin:48px auto; touch-action:none; }.dark-dodge-stage > canvas { position:absolute; inset:-88px; z-index:1; display:block; width:calc(100% + 176px); height:calc(100% + 176px); }.dark-dodge-stage > .dark-dodge-arena { position:absolute; inset:0; z-index:2; width:auto; min-height:0; margin:0; border:0; background:transparent; pointer-events:none; }.dark-dodge-stage .dark-dodge-overlay { z-index:3; }.dark-dodge-stage .dark-dodge-overlay { top:8px; left:9px; }
.dark-dodge-stage.is-opening { transform-origin:center; animation:dark-dodge-stage-open .38s cubic-bezier(.18,.82,.25,1) both; }.dark-dodge-stage.is-opening::after { position:absolute; z-index:5; inset:-12px; border:1px solid #fff; opacity:0; content:""; animation:dark-dodge-flash .38s ease-out both; pointer-events:none; }.dark-dodge-close-overlay { position:absolute; z-index:30; inset:0; display:grid; overflow:hidden; place-items:center; background:#000; animation:dark-dodge-close-screen .38s ease-in both; pointer-events:none; }.dark-dodge-close-overlay i { display:block; width:min(calc(100% - 28px),696px); aspect-ratio:1; border:1px solid #fff; background-position:center; background-repeat:no-repeat; background-size:100% 100%; animation:dark-dodge-stage-close .38s cubic-bezier(.55,0,.9,.3) both; }
.progress-log:has(.dark-battle-board) { position:relative; overflow:hidden; }
@keyframes dark-dodge-stage-open { 0% { opacity:0; transform:scale(.74); filter:brightness(2.4); } 62% { opacity:1; transform:scale(1.025); filter:brightness(1.2); } 100% { opacity:1; transform:scale(1); filter:brightness(1); } }
@keyframes dark-dodge-flash { 0% { opacity:.9; transform:scale(.86); } 100% { opacity:0; transform:scale(1.15); } }
@keyframes dark-dodge-stage-close { 0% { opacity:1; transform:scale(1); filter:brightness(1); } 100% { opacity:0; transform:scale(.7); filter:brightness(2); } }
@keyframes dark-dodge-close-screen { 0% { opacity:1; } 78% { opacity:1; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .dark-dodge-stage.is-opening,.dark-dodge-stage.is-opening::after,.dark-dodge-close-overlay,.dark-dodge-close-overlay i { animation-duration:1ms; } }
@media (max-width:700px) { .dark-dodge-stage { width:calc(100% - 72px); margin:36px auto; }.dark-dodge-stage > canvas { inset:-56px; width:calc(100% + 112px); height:calc(100% + 112px); } }
.dark-pattern-preview { display:grid; gap:7px; justify-items:center; padding:15px; border:1px solid #fff; background:repeating-linear-gradient(135deg,#070707 0 8px,#101010 8px 16px); text-align:center; box-shadow:4px 4px 0 #444; }.dark-pattern-preview p { margin:0; color:#ddd; font-size:13px; }.dark-pattern-preview strong,.dark-pattern-preview b { color:#fff; }
.dark-pattern-rule .dark-rule-toggle { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding-top:18px; }.dark-pattern-rule .dark-rule-toggle input { width:15px; height:15px; margin:0; }.dark-pattern-rule .dark-rule-toggle span { color:var(--text); font-size:11px; }
/* The piles remain at their original baseline.  Only the bordered battle field
   inside the black session plate is placed lower. */
.progress-log:has(.battle-board) .battle-pile { bottom:8px; }
.progress-log:has(.battle-layout) { display:block; position:relative; padding:0 clamp(14px,2vw,28px); }
.battle-layout { display:grid; grid-template-rows:minmax(0,1fr) 0; height:calc(100% - 72px); margin-top:36px; overflow:hidden; }
.progress-log:has(.battle-layout) .battle-board { position:relative; top:auto; height:100%; margin:0; }
.progress-log:has(.battle-layout) .battle-card-zone { position:relative; }
.progress-log:has(.battle-layout) .battle-hand-zone { transform:translateY(-72px); }
.progress-log:has(.battle-layout) .battle-pile { grid-template-rows:38px 76px; gap:8px; }
.progress-log:has(.battle-layout) .battle-pile p { display:grid; min-height:38px; place-items:center; }

/* Mobile combat uses the same fixed-height console as desktop, but a compact
   two-side board.  Earlier rules mixed a one-column board with an absolutely
   positioned hand, which left almost no usable height and crushed every token. */
@media (max-width:700px) {
  .screen.progress-screen.is-active { height:calc(100dvh - 88px); min-height:0; }
  .progress-log:has(.battle-layout) { display:block; min-height:0; padding:0 8px; overflow:hidden; }
  .battle-layout { height:calc(100% - 18px); margin-top:10px; grid-template-rows:minmax(0,1fr) 0; }
  .progress-log:has(.battle-layout) .battle-board { display:grid; grid-template-columns:minmax(70px,.72fr) minmax(0,1.28fr); align-items:end; min-height:0; height:100%; padding:42px 6px 12px; overflow:auto; }
  .battle-board-side > p { margin-bottom:8px; font-size:9px; }
  .enemy-side > p { text-align:right; }
  .combatant-line { gap:14px 7px; align-items:flex-end; }
  .ally-side .combatant-line { justify-content:flex-start; }
  .enemy-side .combatant-line { justify-content:flex-end; }
  .combatant { width:64px; padding-top:82px; }
  .combat-speed { top:2px; font-size:15px; }
  .combat-slot { top:35px; width:62px; min-height:27px; padding:4px 3px; font-size:8px; }
  .combat-token { width:54px; height:54px; border-width:2px; font-size:20px; }
  .combatant > strong { margin-top:6px; font-size:10px; }
  .combatant > small,.combat-statuses span { font-size:8px; }
  .progress-log:has(.battle-layout) .battle-hand-zone { right:57px; bottom:0; left:57px; transform:none; }
  .progress-log:has(.battle-layout) .battle-hand-zone > .section-kicker { bottom:3px; font-size:8px; }
  .progress-log:has(.battle-layout) .battle-pile { bottom:6px; grid-template-rows:30px 58px; gap:4px; }
  .progress-log:has(.battle-layout) .battle-pile p { min-height:30px; font-size:8px; }
  .progress-log:has(.battle-layout) .battle-pile button { width:50px; height:58px; font-size:8px; }
  .progress-log:has(.battle-layout) .battle-card { flex:0 0 104px; width:104px; height:172px; margin-left:-22px; padding:10px 8px; transform:translateY(133px); }
  .progress-log:has(.battle-layout) .battle-card:first-child { margin-left:0; }
  .progress-log:has(.battle-layout) .battle-card:hover,.progress-log:has(.battle-layout) .battle-card:focus-visible,.progress-log:has(.battle-layout) .battle-card.is-selected { transform:translateY(54px); }
  .progress-log:has(.battle-layout) .battle-card span { font-size:14px; }
  .progress-log:has(.battle-layout) .battle-card strong,.progress-log:has(.battle-layout) .battle-card small { font-size:8px; line-height:1.35; }
  .battle-board > .battle-pile-panel { bottom:8px; width:72%; padding:8px; }
  .battle-action-stage { width:min(96%,400px); max-height:70%; padding:12px 10px; overflow:auto; }
  .battle-action-stage header b { font-size:16px; }
  .battle-action-combatants { grid-template-columns:1fr minmax(70px,.65fr) 1fr; gap:5px; }
  .battle-action-token { width:48px; height:48px; }
  .battle-action-actor strong,.battle-action-target strong { max-width:70px; font-size:10px; }
  .battle-action-copy i { font-size:23px; }
  .battle-clash-record { max-height:92px; }
}

/* Dark World authoring tools: compact, theme-aware panels for actual pattern data. */
.dark-combat-admin-screen.is-active { display:grid; align-content:start; gap:16px; }.dark-combat-admin-screen > h1,.dark-combat-admin-screen > p { margin:0; }.dark-combat-admin-grid { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr); gap:14px; align-items:start; }.dark-admin-panel { display:grid; gap:13px; min-width:0; padding:16px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-a)); border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,var(--scene-main)),color-mix(in srgb,var(--surface-deep) 91%,var(--scene-edge))); }.dark-admin-panel-heading,.dark-rule-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.dark-admin-panel-heading h2,.dark-rule-heading h3,.dark-admin-panel-heading p,.dark-rule-heading p { margin:0; }.dark-admin-panel-heading h2 { margin-top:3px; font-size:18px; }.dark-admin-panel-heading > span { color:var(--muted); font-size:10px; text-align:right; }.dark-data-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.dark-data-form label { display:grid; min-width:0; gap:6px; }.dark-data-form label > span { color:var(--muted); font-size:10px; }.dark-form-actions { display:flex; grid-column:1/-1; align-items:center; justify-content:flex-end; gap:8px; }.dark-form-actions .admin-save-status { min-width:0; margin:0 auto 0 0; }.dark-asset-grid,.dark-pattern-list { display:grid; gap:8px; }.dark-asset-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:9px; border:1px solid color-mix(in srgb,var(--line) 74%,transparent); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 62%,transparent); }.dark-asset-card img { width:42px; height:42px; image-rendering:pixelated; object-fit:contain; border:1px solid color-mix(in srgb,var(--accent-a) 64%,var(--line)); border-radius:6px; background:repeating-conic-gradient(#111 0 25%,#222 0 50%) 50% / 8px 8px; }.dark-asset-card div { display:grid; min-width:0; gap:3px; }.dark-asset-card strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.dark-asset-card small,.dark-pattern-card small { color:var(--muted); font-size:10px; }.dark-card-actions,.dark-rule-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }.dark-card-actions button,.dark-rule-actions button { min-height:28px; padding:4px 7px; font-size:10px; }.dark-pattern-base { display:grid; grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.dark-rule-heading { grid-column:1/-1; padding-top:3px; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent); }.dark-rule-heading h3 { font-size:14px; }.dark-rule-heading p { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }.dark-pattern-rule-list { display:grid; grid-column:1/-1; gap:8px; }.dark-pattern-rule { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px; border:1px solid color-mix(in srgb,var(--line) 72%,var(--accent-b)); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 66%,transparent); }.dark-pattern-rule header { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; }.dark-pattern-rule header strong { color:var(--accent-a); font-size:11px; }.dark-pattern-rule input,.dark-pattern-rule select { min-width:0; }.dark-pattern-library-toolbar { display:flex; align-items:end; justify-content:space-between; gap:10px; }.dark-pattern-library-toolbar label { display:grid; flex:1; min-width:0; gap:5px; }.dark-pattern-library-toolbar label span,.dark-pattern-library-toolbar small { color:var(--muted); font-size:10px; }.dark-pattern-library-toolbar small { padding-bottom:8px; white-space:nowrap; }.dark-pattern-list { max-height:440px; min-height:96px; overflow-y:auto; overscroll-behavior:contain; padding:1px 5px 1px 1px; }.dark-pattern-card { display:grid; gap:8px; padding:11px; border:1px solid color-mix(in srgb,var(--line) 74%,transparent); border-radius:9px; background:color-mix(in srgb,var(--surface-deep) 62%,transparent); }.dark-pattern-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.dark-pattern-card header > div { display:grid; min-width:0; gap:4px; }.dark-pattern-card strong { overflow-wrap:anywhere; font-size:13px; }.dark-pattern-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }.dark-enemy-config-panel { gap:15px; }.dark-enemy-picker { max-width:420px; }.dark-enemy-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.dark-enemy-config-grid > section { display:grid; align-content:start; gap:9px; min-width:0; }.dark-enemy-row { display:grid; grid-template-columns:minmax(0,1fr) 94px 30px; align-items:end; gap:7px; padding:8px; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 58%,transparent); }.dark-enemy-row label { min-width:0; }.dark-enemy-row button { min-width:30px; height:30px; padding:0; }.dark-enemy-pattern-row { grid-template-columns:minmax(0,1.6fr) 94px 94px 30px; }
@media (max-width:900px) { .dark-combat-admin-grid { grid-template-columns:1fr; }.dark-pattern-base { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .dark-admin-panel { padding:13px; }.dark-data-form,.dark-pattern-base,.dark-enemy-config-grid { grid-template-columns:1fr; }.dark-pattern-rule { grid-template-columns:repeat(2,minmax(0,1fr)); }.dark-enemy-row,.dark-enemy-pattern-row { grid-template-columns:minmax(0,1fr) 84px 30px; }.dark-enemy-pattern-row label:first-child { grid-column:1/-1; }.dark-enemy-pattern-row button { grid-column:3; grid-row:2; }.dark-form-actions { align-items:stretch; flex-direction:column; }.dark-form-actions button { width:100%; }.dark-form-actions .admin-save-status { margin:0; }.dark-asset-card { grid-template-columns:42px minmax(0,1fr); }.dark-asset-card .dark-card-actions { grid-column:1/-1; justify-content:flex-start; }.dark-pattern-card header { align-items:stretch; flex-direction:column; }.dark-card-actions { justify-content:flex-start; } }

/* Per-account relief mode: Dark World remains monochrome, but avoids pure black. */
body[data-region="dark"].dark-low-contrast { --page:#292929; --surface:#343434; --surface-soft:#414141; --surface-deep:#242424; --line:#777; --text:#f7f7f7; --muted:#c5c5c5; --accent-a:#fff; --accent-b:#e2e2e2; --accent-text:#242424; --scene-main:#454545; --scene-edge:#2a2a2a; --scene-glow:#fff; --scene-structure:#383838; --scene-foreground:#202020; --chat:#303030; }

/* Dark enemy actions have a distinct TP-cost field in addition to mercy. */
.dark-enemy-row:not(.dark-enemy-pattern-row) { grid-template-columns:minmax(0,1fr) 94px 94px 30px; }
.dark-tp { align-self:end; padding:8px 10px; border:1px solid color-mix(in srgb,var(--accent-a) 70%,var(--line)); border-radius:8px; color:var(--accent-a); font-size:12px; letter-spacing:.04em; white-space:nowrap; }
@media (max-width:700px) { .dark-enemy-row:not(.dark-enemy-pattern-row) { grid-template-columns:minmax(0,1fr) 72px 72px 30px; }.dark-enemy-row:not(.dark-enemy-pattern-row) label:first-child { grid-column:1/-1; }.dark-enemy-row:not(.dark-enemy-pattern-row) button { grid-column:4; grid-row:2; } }

/* In the dodge phase TP remains readable without covering the square arena. */
.dark-dodge-tp-gauge { position:absolute; z-index:4; top:50%; left:-78px; display:grid; width:48px; place-items:center; gap:7px; color:#fff; font-size:10px; font-weight:700; letter-spacing:.1em; transform:translateY(-50%); pointer-events:none; }.dark-dodge-tp-gauge span { color:#aaa; }.dark-dodge-tp-gauge i { position:relative; display:flex; width:16px; height:226px; align-items:flex-end; overflow:hidden; border:2px solid #aaa; background:#111; box-shadow:0 0 0 3px #000; }.dark-dodge-tp-gauge b { display:block; width:100%; min-height:0; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.72); transition:height .14s linear; }.dark-dodge-tp-gauge strong { font-size:13px; line-height:1; }
@media (max-width:700px) { .dark-dodge-stage { width:calc(100% - 108px); }.dark-dodge-tp-gauge { left:-54px; width:38px; gap:5px; font-size:9px; }.dark-dodge-tp-gauge i { width:13px; height:158px; }.dark-dodge-tp-gauge strong { font-size:12px; } }

/* Direct target/action buttons are deliberately large for touch and mouse use. */
.dark-combatant.enemy { appearance:none; color:#fff; font:inherit; text-align:inherit; }.dark-combatant.enemy:focus-visible { outline:2px solid #fff; outline-offset:3px; }.dark-action-choice { min-width:0; }.dark-action-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }.dark-action-option { display:grid; min-height:52px; gap:4px; padding:8px 10px; border:1px solid #777; border-radius:0; background:#090909; color:#fff; text-align:left; font:inherit; cursor:pointer; }.dark-action-option strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.dark-action-option small { color:#aaa; font-size:9px; }.dark-action-option:hover,.dark-action-option.is-selected { border-color:#fff; background:#242424; box-shadow:3px 3px 0 #555; }.dark-action-option.is-selected strong { color:#fff; }.dark-action-option:disabled { border-color:#333; background:#111; color:#555; cursor:not-allowed; box-shadow:none; }.dark-action-option:disabled small { color:#555; }
@media (max-width:700px) { .dark-action-list { grid-template-columns:1fr; }.dark-action-option { min-height:50px; } }
body[data-region="dark"].dark-low-contrast .topbar { background:linear-gradient(90deg,#252525,#464646); }
body[data-region="dark"].dark-low-contrast .location-scene { background:linear-gradient(122deg,#484848,#252525); }
body[data-region="dark"].dark-low-contrast .progress-screen.is-active { --dark-ink:#282828; --dark-paper:#fff; --dark-ash:#d0d0d0; --dark-panel:#393939; }
body[data-region="dark"].dark-low-contrast .dark-battle-board { background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.08),transparent 48%),#282828; }
body[data-region="dark"].dark-low-contrast .dark-combatant { background:#343434; }
body[data-region="dark"].dark-low-contrast .dark-combatant-token,.dark-low-contrast .dark-mercy i { background:#282828; }
body[data-region="dark"].dark-low-contrast .dark-pattern-readout,.dark-low-contrast .dark-battle-history { background:#303030; }
/* The arena itself is a transparent layer above the bullet canvas. Put the
   relief background behind that canvas, otherwise the playfield is hidden. */
body[data-region="dark"].dark-low-contrast .dark-dodge-stage::before { position:absolute; z-index:0; inset:0; background:radial-gradient(circle at 50% 48%,#505050,#282828 72%); content:""; }
body[data-region="dark"].dark-low-contrast .dark-mobile-joystick { background:rgba(40,40,40,.75); }

/* Authoring fields are grouped by meaning instead of one undifferentiated grid. */
.dark-pattern-rule { grid-template-columns:1fr; gap:10px; }
.dark-rule-set { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:start; gap:10px; padding:10px; border:1px solid color-mix(in srgb,var(--line) 58%,transparent); border-radius:7px; background:color-mix(in srgb,var(--surface-deep) 40%,transparent); }
.dark-rule-set h4 { margin:3px 0 0; color:var(--accent-a); font-size:10px; letter-spacing:.08em; }
.dark-rule-set > div { display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)); gap:8px; }
.dark-rule-set label { min-width:0; }
.dark-rule-hint { margin:0; align-self:center; color:var(--muted); font-size:12px; line-height:1.45; }
.dark-rule-content { display:grid; gap:10px; }
.dark-rule-title { display:flex; align-items:center; min-width:0; gap:7px; }
.dark-rule-title small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.dark-rule-collapse-button { min-width:27px; padding:3px 6px; font-size:12px; }
.dark-pattern-rule.is-collapsed { gap:0; }
@media (max-width:700px) { .dark-rule-set { grid-template-columns:1fr; }.dark-rule-set > div { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px) { .dark-rule-set > div { grid-template-columns:1fr; } }

/* Keep a large authored bullet-image library compact. */
.dark-asset-grid { max-height:440px; min-height:96px; overflow-y:auto; overscroll-behavior:contain; padding:1px 5px 1px 1px; }
@media (max-width:700px) { .dark-asset-grid { max-height:62dvh; } }

/* Live authoring preview occupies the short column below bullet assets. */
.dark-rule-preview-panel { display:grid; gap:9px; margin-top:2px; padding:11px; border:1px solid color-mix(in srgb,var(--accent-a) 58%,var(--line)); border-radius:9px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-deep) 78%,#07101a),color-mix(in srgb,var(--surface) 72%,#101923)); }.dark-rule-preview-panel header { display:flex; align-items:center; justify-content:space-between; gap:10px; }.dark-rule-preview-panel header > div { display:grid; gap:3px; }.dark-rule-preview-panel h3,.dark-rule-preview-panel p { margin:0; }.dark-rule-preview-panel h3 { font-size:14px; }.dark-rule-preview-panel .section-kicker { font-size:9px; }.dark-rule-preview-panel button { min-height:28px; padding:4px 8px; font-size:10px; }.dark-rule-preview-panel canvas { display:block; width:100%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--accent-a) 70%,var(--line)); background:#090d12; }.dark-rule-preview-panel > p { color:var(--muted); font-size:10px; line-height:1.5; }

/* Pattern areas are real battle geometry rather than authoring-only labels. */
.dark-dodge-stage > .dark-dodge-arena { height:auto; min-height:0; aspect-ratio:auto; }
.dark-dodge-stage[data-arena="corridor"] { width:min(calc(100% - 32px),860px); aspect-ratio:2.35 / 1; }
.dark-dodge-stage[data-arena="road"] { width:min(350px,32.48dvh); height:min(56dvh,500px); margin:24px auto; aspect-ratio:.58 / 1; }
.dark-dodge-stage[data-arena="road"] > canvas { inset:-52px; width:calc(100% + 104px); height:calc(100% + 104px); }
.dark-dodge-stage[data-arena="fullscreen"] { position:fixed; z-index:110; inset:0; width:100vw; height:100dvh; margin:0; aspect-ratio:auto; background:#000; isolation:isolate; }
.dark-dodge-stage[data-arena="fullscreen"] > canvas { inset:0; width:100%; height:100%; }
.dark-dodge-stage[data-arena="fullscreen"] > .dark-dodge-arena { inset:0; }
.dark-dodge-stage[data-arena="fullscreen"] .dark-dodge-overlay { top:18px; left:20px; }
.dark-dodge-stage[data-arena="fullscreen"] .dark-dodge-self { top:22px; left:22px; }
.dark-dodge-stage[data-arena="fullscreen"] .dark-dodge-tp-gauge { top:112px; bottom:22px; left:22px; height:auto; transform:none; }
.dark-dodge-stage[data-arena="fullscreen"] + .dark-mobile-joystick { position:fixed; z-index:112; bottom:22px; left:50%; margin:0; transform:translateX(-50%); }
.dark-rule-preview-panel[data-arena="corridor"] canvas { aspect-ratio:2.15 / 1; }
.dark-rule-preview-panel[data-arena="road"] canvas { width:min(100%,210px); justify-self:center; aspect-ratio:.58 / 1; }
.dark-rule-preview-panel[data-arena="fullscreen"] canvas { aspect-ratio:16 / 9; }
@media (max-width:700px) {
  .dark-dodge-stage[data-arena="corridor"] { width:calc(100% - 38px); aspect-ratio:1.85 / 1; }
  .dark-dodge-stage[data-arena="road"] { width:min(270px,37.2dvh); height:min(60dvh,440px); margin:18px auto; aspect-ratio:.62 / 1; }
  .dark-dodge-stage[data-arena="fullscreen"] { width:100vw; height:100dvh; }
  .dark-dodge-stage[data-arena="fullscreen"] .dark-dodge-tp-gauge { top:58px; bottom:auto; left:18px; width:32px; height:auto; transform:none; }
  .dark-dodge-stage[data-arena="fullscreen"] .dark-dodge-tp-gauge i { height:146px; }
  .dark-dodge-stage[data-arena="fullscreen"] .dark-dodge-overlay { top:13px; left:14px; right:14px; text-align:center; }
}

.dark-enemy-order-toggle { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-self:end; gap:4px 7px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent-a)); border-radius:8px; background:color-mix(in srgb,var(--surface-deep) 64%,transparent); cursor:pointer; }.dark-enemy-order-toggle input { grid-row:1 / span 2; width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent-a); }.dark-enemy-order-toggle span { color:var(--text); font-size:11px; }.dark-enemy-order-toggle small { color:var(--muted); font-size:9px; line-height:1.35; }.dark-enemy-order-toggle:has(input:disabled) { opacity:.52; cursor:not-allowed; }

/* Enemy behavior authoring needs room for long pattern names and ranges.
   Keep the two sections vertical and let each row wrap naturally instead of
   forcing five controls into a narrow grid cell. */
.dark-enemy-config-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
.dark-enemy-row,.dark-enemy-row:not(.dark-enemy-pattern-row),.dark-enemy-pattern-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; padding:12px; }
.dark-enemy-row label { display:grid; flex:1 1 132px; gap:6px; min-width:0; }
.dark-enemy-row:not(.dark-enemy-pattern-row) label:first-child { flex-basis:210px; }
.dark-enemy-row:not(.dark-enemy-pattern-row) label:nth-child(4) { flex-basis:220px; }
.dark-enemy-pattern-row label:first-child { flex:2 1 260px; }
.dark-enemy-pattern-row label:nth-child(2) { flex:1 1 130px; }
.dark-enemy-pattern-row label:nth-child(3),.dark-enemy-pattern-row label:nth-child(4) { flex:1 1 170px; }
.dark-enemy-row label > span:not(:first-child) { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; }
.dark-enemy-row button { flex:0 0 32px; width:32px; min-width:32px; height:32px; }
@media (max-width:700px) { .dark-enemy-row,.dark-enemy-row:not(.dark-enemy-pattern-row),.dark-enemy-pattern-row { display:grid; grid-template-columns:minmax(0,1fr) 34px; }.dark-enemy-row label,.dark-enemy-row:not(.dark-enemy-pattern-row) label:first-child,.dark-enemy-row:not(.dark-enemy-pattern-row) label:nth-child(4),.dark-enemy-pattern-row label:first-child,.dark-enemy-pattern-row label:nth-child(2),.dark-enemy-pattern-row label:nth-child(3),.dark-enemy-pattern-row label:nth-child(4) { grid-column:1; }.dark-enemy-row button,.dark-enemy-row:not(.dark-enemy-pattern-row) button,.dark-enemy-pattern-row button { grid-column:2; grid-row:1; align-self:start; } }

/* Mobile dark-battle layout.  On a phone the battle board is about twice the
   height of .progress-log, and `:has(.dark-battle-board) { overflow:hidden }`
   clipped everything past the fold -- joystick and action panel included --
   with no way to scroll to it.  Keep the horizontal clip, since the stage
   canvas deliberately bleeds past the arena, and let the column scroll; then
   buy arena width back from the oversized TP gauge gutter. */
@media (max-width:700px) {
  .progress-log:has(.dark-battle-board) { overflow-x:hidden; overflow-y:auto; }
  .dark-dodge-stage { width:calc(100% - 62px); margin:24px auto; }
  .dark-dodge-stage > canvas { inset:-44px; width:calc(100% + 88px); height:calc(100% + 88px); }
  .dark-dodge-tp-gauge { left:-32px; width:26px; }
  .dark-dodge-tp-gauge i { width:11px; }
  /* The channel header and session bar are read-only captions that ate 166px of
     a 724px screen, which is why the arena and its pad could not share the
     viewport mid-dodge.  They come back as soon as the battle board is gone. */
  .progress-screen:has(.dark-battle-board) .progress-console-header,
  .progress-screen:has(.dark-battle-board) .progress-session-bar { display:none; }
}

/* Self status card in the dodge stage's left gutter (desktop only -- the phone
   layout has no room beside the arena and keeps the joystick row instead). */
.dark-dodge-self { display:none; }
@media (min-width:701px) {
  .dark-dodge-stage .dark-dodge-self { position:absolute; z-index:4; top:0; left:-88px; display:grid; width:76px; justify-items:center; gap:5px; color:#fff; font-size:10px; letter-spacing:.06em; pointer-events:none; }
  .dark-dodge-stage .dark-dodge-self-token { display:grid; overflow:hidden; width:48px; height:48px; border:2px solid #aaa; border-radius:50%; background:#111; box-shadow:0 0 0 3px #000; place-items:center; font-size:18px; font-weight:700; }
  .dark-dodge-stage .dark-dodge-self-token img { width:100%; height:100%; object-fit:cover; }
  .dark-dodge-stage .dark-dodge-self strong { max-width:100%; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  .dark-dodge-stage .dark-dodge-self i { display:block; width:100%; height:8px; border:1px solid #aaa; background:#111; box-shadow:0 0 0 2px #000; }
  .dark-dodge-stage .dark-dodge-self b { display:block; height:100%; background:#fff; }
  .dark-dodge-stage .dark-dodge-self small { font-size:9px; }
  /* Share the gutter: the card takes the top, the gauge stretches from under
     it to the floor, so the two cannot collide at any window height. */
  .dark-dodge-stage .dark-dodge-tp-gauge { top:104px; bottom:0; left:-88px; width:76px; height:auto; grid-template-rows:auto minmax(0,1fr) auto; transform:none; }
  .dark-dodge-stage .dark-dodge-tp-gauge i { height:100%; }
}

/* Prepare-phase notice.  In the flow it pushed the dodge stage down for three
   seconds and the arena's bottom fell outside the clipped log, so during the
   countdown it rides on top of the stage and the stage never moves. */
.dark-pattern-preview.is-stage-overlay { position:absolute; z-index:5; top:50%; left:50%; width:min(90%,420px); padding:12px 14px; transform:translate(-50%,-50%); pointer-events:none; animation:dark-prepare-notice-fade 2s ease-out forwards; }
@keyframes dark-prepare-notice-fade { from { opacity:1; } to { opacity:0; } }
.dark-pattern-preview.is-stage-overlay p { font-size:12px; }
@media (max-width:700px) {
  .dark-pattern-preview.is-stage-overlay { width:min(94%,300px); padding:9px 10px; }
  .dark-pattern-preview.is-stage-overlay p { font-size:11px; }
}

/* Region change sweep.  The palette swaps in a single frame because it hangs off
   body[data-region]; this veil is painted with the incoming region's own accent,
   so the cut reads as the new place arriving rather than a colour glitch. */
.region-transition { position:fixed; z-index:120; inset:0; background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent-a) 58%,transparent),var(--page) 74%); animation:region-transition-veil .62s ease-out forwards; pointer-events:none; }
.region-transition::after { position:absolute; inset:-40% 0; background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--accent-a) 42%,transparent) 46%,color-mix(in srgb,#fff 26%,transparent) 50%,color-mix(in srgb,var(--accent-a) 42%,transparent) 54%,transparent 100%); content:""; animation:region-transition-sweep .62s cubic-bezier(.3,.75,.35,1) forwards; }
@keyframes region-transition-veil { 0% { opacity:.94; } 52% { opacity:.4; } 100% { opacity:0; } }
@keyframes region-transition-sweep { 0% { transform:translateY(-72%); } 100% { transform:translateY(72%); } }
@media (prefers-reduced-motion:reduce) {
  .region-transition { animation-duration:.34s; }
  .region-transition::after { display:none; }
}

/* ---- Region identity -------------------------------------------------------
   Regions differed by palette alone.  Each now also declares a surface texture,
   a corner language and a header rule that the shared chrome consumes, so a
   move changes how the interface is built and not just its hue.  Dark opts out:
   its starkness is deliberate. */
:root {
  /* 중부 · modern city, hunters, earth -- surveyor's grid */
  --region-texture:repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent-a) 7%,transparent) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 7%,transparent) 0 1px,transparent 1px 26px);
  --region-corner:4px;
  --region-rule:linear-gradient(90deg,transparent,var(--accent-b) 12%,var(--accent-a) 50%,var(--accent-b) 88%,transparent);
}
body[data-region="east"] {
  /* 동부 · primal timber, the great forest, the world tree -- grain and veins */
  --region-texture:repeating-linear-gradient(92deg,color-mix(in srgb,var(--scene-edge) 16%,transparent) 0 2px,transparent 2px 11px),repeating-linear-gradient(-56deg,color-mix(in srgb,var(--accent-b) 10%,transparent) 0 1px,transparent 1px 26px);
  --region-corner:16px 5px 16px 5px;
  --region-rule:linear-gradient(90deg,var(--scene-edge),var(--accent-b) 26%,var(--accent-a) 50%,var(--accent-b) 74%,var(--scene-edge));
}
body[data-region="west"] {
  /* 서부 · future machines, steel, space -- circuit runs over a starfield */
  --region-texture:repeating-linear-gradient(90deg,transparent 0 17px,color-mix(in srgb,var(--accent-a) 9%,transparent) 17px 20px,transparent 20px 48px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent-a) 7%,transparent) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 5%,transparent) 0 1px,transparent 1px 48px),radial-gradient(circle at 17% 23%,color-mix(in srgb,#fff 46%,transparent) 0 1px,transparent 2px),radial-gradient(circle at 68% 57%,color-mix(in srgb,#fff 34%,transparent) 0 1px,transparent 2px),radial-gradient(circle at 88% 14%,color-mix(in srgb,#fff 28%,transparent) 0 1px,transparent 2px);
  --region-corner:0 12px 0 12px;
  --region-rule:linear-gradient(90deg,var(--accent-b),var(--accent-a) 34%,#fff 50%,var(--accent-a) 66%,var(--accent-b));
}
body[data-region="south"] {
  /* 남부 · the deep sea and the martial world -- ripples from the floor */
  --region-texture:repeating-radial-gradient(circle at 50% 118%,color-mix(in srgb,var(--accent-b) 11%,transparent) 0 2px,transparent 2px 38px);
  --region-corner:14px;
  --region-rule:linear-gradient(90deg,transparent,var(--accent-b) 20%,var(--accent-a) 50%,var(--accent-b) 80%,transparent);
}
body[data-region="north"] {
  /* 북부 · medieval magic, the palace, runes -- heraldic lattice */
  --region-texture:repeating-linear-gradient(60deg,color-mix(in srgb,var(--accent-a) 9%,transparent) 0 1px,transparent 1px 20px),repeating-linear-gradient(-60deg,color-mix(in srgb,var(--accent-a) 9%,transparent) 0 1px,transparent 1px 20px);
  --region-corner:12px 12px 3px 3px;
  --region-rule:linear-gradient(90deg,transparent,var(--accent-a) 18%,color-mix(in srgb,#fff 60%,var(--accent-a)) 50%,var(--accent-a) 82%,transparent);
}
body[data-region="dark"] { --region-texture:none; --region-corner:0; --region-rule:linear-gradient(90deg,#fff,transparent); }

.workspace { background-image:var(--region-texture,none),radial-gradient(circle at 88% 2%,color-mix(in srgb,var(--accent-a) 12%,transparent),transparent 26%); background-color:var(--page); }
.nav-item { border-radius:var(--region-corner,8px); }
.topbar { position:relative; }
.topbar::after { position:absolute; z-index:1; right:0; bottom:0; left:0; height:2px; background:var(--region-rule,none); content:""; opacity:.72; pointer-events:none; }

/* ---- Region identity, part two --------------------------------------------
   Part one only skinned the page background.  These tokens push the same five
   identities into the chrome people actually touch: the marker on every
   kicker, panel corners and edges, buttons, fields and scrollbars. */
:root {           /* 중부 · surveyor's mark, crisp square chrome */
  --region-edge:inset 0 1px 0 color-mix(in srgb,var(--accent-a) 20%,transparent);
  --region-mark-fill:var(--accent-a); --region-mark-radius:0; --region-mark-clip:polygon(34% 0,66% 0,66% 100%,34% 100%); --region-mark-transform:none;
  --region-field-corner:5px; --region-button-clip:none;
}
body[data-region="east"] {   /* bark rail down the side, a leaf for a marker */
  --region-edge:inset 3px 0 0 color-mix(in srgb,var(--accent-b) 46%,transparent);
  --region-mark-fill:var(--accent-b); --region-mark-radius:0 100% 0 100%; --region-mark-clip:none; --region-mark-transform:rotate(-8deg);
  --region-field-corner:12px 3px 12px 3px; --region-button-clip:none;
}
body[data-region="west"] {   /* steel plate: hairline frame, inner glow, cut corners */
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 24%,transparent),inset 0 0 16px color-mix(in srgb,var(--accent-a) 9%,transparent);
  --region-mark-fill:var(--accent-a); --region-mark-radius:0; --region-mark-clip:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); --region-mark-transform:none;
  --region-field-corner:0 8px 0 8px; --region-button-clip:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
body[data-region="south"] {  /* a waterline along the bottom, a droplet marker */
  --region-edge:inset 0 -3px 0 color-mix(in srgb,var(--accent-b) 38%,transparent);
  --region-mark-fill:var(--accent-b); --region-mark-radius:50% 50% 50% 0; --region-mark-clip:none; --region-mark-transform:rotate(-45deg);
  --region-field-corner:11px; --region-button-clip:none;
}
body[data-region="north"] {  /* gilt double frame, rune diamond */
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 30%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--surface-deep) 55%,transparent);
  --region-mark-fill:var(--accent-a); --region-mark-radius:1px; --region-mark-clip:none; --region-mark-transform:rotate(45deg);
  --region-field-corner:9px 9px 2px 2px; --region-button-clip:none;
}
body[data-region="dark"] {   /* stays stark on purpose */
  --region-edge:none; --region-mark-fill:#fff; --region-mark-radius:0; --region-mark-clip:none; --region-mark-transform:none;
  --region-field-corner:0; --region-button-clip:none;
}

/* Every kicker in the app carries the region's mark. */
.eyebrow::before,.section-kicker::before { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:var(--region-mark-radius,0); background:var(--region-mark-fill,var(--accent-a)); clip-path:var(--region-mark-clip,none); content:""; transform:var(--region-mark-transform,none); vertical-align:middle; }

/* Panels and cards take the region's corner language and edge treatment. */
.placeholder-screen,.channel-card,.selected-channel-card,.notice-board,.detail-panel,.progress-context-card,.progress-context-state,.progress-check-panel,.battle-summary,.fighter-card,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.region-choice,.active-region-card,.session-policy-card,.movement-option,.judgement-card,.status-identity-card,.gacha-panel,.gacha-admin-card,.base-skill-admin,.admin-player-picker,.location-scene { border-radius:var(--region-corner,10px); box-shadow:var(--region-edge,none); }

.primary-button,.quiet-button { border-radius:var(--region-field-corner,7px); clip-path:var(--region-button-clip,none); }
input,select,textarea { border-radius:var(--region-field-corner,7px); }

*::-webkit-scrollbar-thumb { border-radius:var(--region-corner,8px); background:color-mix(in srgb,var(--accent-a) 42%,var(--line)); }
*::-webkit-scrollbar-track { background:color-mix(in srgb,var(--surface-deep) 70%,transparent); }

/* ---- Region identity, part three ------------------------------------------
   The first two passes were too polite: low-opacity textures and 8px marks read
   as noise.  Grounds go deeper, accents go to jewel tones, and the decoration
   is dialled up until each region is legible at a glance. */
:root {   /* 중부 · graphite and electric cyan */
  --page:#0a1018; --surface:#111c27; --surface-soft:#172735; --surface-deep:#060c13;
  --line:#2c4459; --text:#eef6fc; --muted:#8ba4b8; --accent-a:#4fd6f2; --accent-b:#3d7fe0; --accent-text:#04121c;
  --scene-main:#123653; --scene-edge:#1e1a42; --scene-glow:#8adfff; --scene-structure:#0a1c2c; --scene-foreground:#07111c; --chat:#101a25;
  --region-texture:radial-gradient(116% 60% at 80% -14%,color-mix(in srgb,var(--accent-a) 24%,transparent),transparent 60%),radial-gradient(96% 46% at 18% 108%,color-mix(in srgb,var(--accent-b) 24%,transparent),transparent 66%),repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent-a) 13%,transparent) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 13%,transparent) 0 1px,transparent 1px 26px);
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 52%,transparent),inset 0 0 0 3px color-mix(in srgb,var(--surface-deep) 70%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--accent-b) 26%,transparent),inset 0 34px 34px -34px color-mix(in srgb,var(--accent-a) 16%,transparent);
}
body[data-region="east"] {
  --region-texture:radial-gradient(120% 64% at 62% -16%,color-mix(in srgb,var(--accent-a) 26%,transparent),transparent 62%),radial-gradient(58% 40% at 22% 8%,color-mix(in srgb,var(--accent-a) 15%,transparent),transparent 66%),radial-gradient(96% 52% at 14% 106%,color-mix(in srgb,var(--accent-b) 24%,transparent),transparent 68%),repeating-linear-gradient(93deg,transparent 0 15px,color-mix(in srgb,var(--scene-edge) 13%,transparent) 19px,transparent 23px 38px);
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-b) 62%,transparent),inset 0 0 0 3px color-mix(in srgb,var(--surface-deep) 72%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--scene-edge) 62%,transparent),inset 5px 0 0 color-mix(in srgb,var(--accent-b) 70%,transparent),inset 0 46px 46px -46px color-mix(in srgb,var(--accent-b) 18%,transparent);
}
body[data-region="west"] {
  --region-texture:radial-gradient(64% 44% at 90% -8%,color-mix(in srgb,var(--accent-a) 30%,transparent),transparent 58%),radial-gradient(112% 62% at 10% 104%,color-mix(in srgb,var(--accent-b) 30%,transparent),transparent 66%),repeating-linear-gradient(90deg,transparent 0 17px,color-mix(in srgb,var(--accent-a) 16%,transparent) 17px 20px,transparent 20px 48px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent-a) 12%,transparent) 0 1px,transparent 1px 48px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 8%,transparent) 0 1px,transparent 1px 48px),radial-gradient(circle at 17% 23%,color-mix(in srgb,#fff 60%,transparent) 0 1px,transparent 2px),radial-gradient(circle at 68% 57%,color-mix(in srgb,#fff 46%,transparent) 0 1px,transparent 2px),radial-gradient(circle at 88% 14%,color-mix(in srgb,#fff 38%,transparent) 0 1px,transparent 2px);
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 66%,transparent),inset 0 0 0 3px color-mix(in srgb,var(--surface-deep) 76%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--accent-b) 44%,transparent),inset 0 0 26px color-mix(in srgb,var(--accent-a) 14%,transparent);
}
body[data-region="south"] {
  --region-texture:linear-gradient(180deg,color-mix(in srgb,var(--accent-a) 24%,transparent),transparent 38%),radial-gradient(92% 50% at 50% 110%,color-mix(in srgb,var(--accent-a) 22%,transparent),transparent 64%),repeating-radial-gradient(circle at 50% 118%,color-mix(in srgb,var(--accent-b) 20%,transparent) 0 2px,transparent 2px 38px);
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 58%,transparent),inset 0 0 0 3px color-mix(in srgb,var(--surface-deep) 74%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--accent-b) 40%,transparent),inset 0 -48px 48px -48px color-mix(in srgb,var(--accent-b) 26%,transparent);
}
body[data-region="north"] {
  --region-texture:radial-gradient(108% 56% at 50% -14%,color-mix(in srgb,var(--accent-a) 24%,transparent),transparent 60%),radial-gradient(84% 46% at 84% 106%,color-mix(in srgb,var(--accent-b) 28%,transparent),transparent 66%),repeating-linear-gradient(60deg,color-mix(in srgb,var(--accent-a) 15%,transparent) 0 1px,transparent 1px 20px),repeating-linear-gradient(-60deg,color-mix(in srgb,var(--accent-a) 15%,transparent) 0 1px,transparent 1px 20px);
  --region-edge:inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 62%,transparent),inset 0 0 0 3px color-mix(in srgb,var(--surface-deep) 85%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--accent-a) 30%,transparent),inset 0 42px 42px -42px color-mix(in srgb,var(--accent-b) 26%,transparent);
}

/* Kickers become a titled rule, not a word with a dot. */
.section-kicker { display:flex; align-items:center; gap:9px; }
.section-kicker::after { flex:1; height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 55%,transparent),transparent); content:""; }
.eyebrow::before,.section-kicker::before { width:11px; height:11px; margin-right:0; box-shadow:0 0 10px color-mix(in srgb,var(--region-mark-fill,var(--accent-a)) 55%,transparent); }
.eyebrow::before { margin-right:8px; }

/* Panels read as built objects: region frame plus a lit top edge. */
.placeholder-screen,.channel-card,.selected-channel-card,.notice-board,.detail-panel,.progress-context-card,.progress-check-panel,.battle-summary,.fighter-card,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.region-choice,.active-region-card,.session-policy-card,.movement-option,.judgement-card,.status-identity-card,.gacha-panel,.gacha-admin-card,.base-skill-admin,.admin-player-picker,.location-scene { border-color:color-mix(in srgb,var(--accent-a) 26%,var(--line)); }

/* Buttons get weight. */
.primary-button { box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent),0 2px 0 color-mix(in srgb,var(--surface-deep) 80%,transparent),0 6px 18px -8px color-mix(in srgb,var(--accent-a) 70%,transparent); }
.quiet-button { border-color:color-mix(in srgb,var(--accent-a) 34%,var(--line)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-a) 14%,transparent); }

/* The rail marks the current screen in the region's own colour. */
.nav-item.is-current { background:linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 26%,transparent),transparent 78%); box-shadow:inset 3px 0 0 var(--accent-a); color:var(--text); }
.topbar::after { height:3px; opacity:.9; }

/* ---- Region identity, part four: built panels -------------------------------
   Previous passes only tuned borders.  Panels are now constructed objects: each
   carries a material band across its head and an ornament in its corner, drawn
   from the region's own vocabulary.  All ornaments are inert (pointer-events
   none) so nothing here can intercept input. */
:root {           /* 중부 · technical ruler + corner tab */
  --panel-band:linear-gradient(90deg,transparent,var(--accent-b) 14%,var(--accent-a) 50%,var(--accent-b) 86%,transparent);
  --panel-band-h:4px;
  --panel-art:linear-gradient(225deg,var(--accent-a) 0 50%,transparent 50%);
  --panel-art-size:16px; --panel-art-top:0; --panel-art-right:0; --panel-art-radius:0; --panel-art-rotate:none;
  --rail-emblem:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  --rail-emblem-radius:2px; --rail-emblem-rotate:none;
}
body[data-region="east"] {   /* plank head, carved leaf */
  --panel-band:linear-gradient(90deg,var(--scene-edge),var(--accent-b) 28%,color-mix(in srgb,var(--accent-a) 70%,var(--accent-b)) 50%,var(--accent-b) 72%,var(--scene-edge));
  --panel-band-h:5px;
  --panel-art:radial-gradient(circle at 100% 0,var(--accent-b) 0 62%,transparent 62%);
  --panel-art-size:26px; --panel-art-top:0; --panel-art-right:0; --panel-art-radius:0 0 0 100%; --panel-art-rotate:none;
  --rail-emblem:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  --rail-emblem-radius:0 100% 0 100%; --rail-emblem-rotate:rotate(-8deg);
}
body[data-region="west"] {   /* data strip, machined bracket */
  --panel-band:linear-gradient(90deg,var(--accent-b),var(--accent-a) 36%,#fff 50%,var(--accent-a) 64%,var(--accent-b));
  --panel-band-h:4px;
  --panel-art:linear-gradient(var(--accent-a),var(--accent-a)) 0 0/2px 100% no-repeat,linear-gradient(var(--accent-a),var(--accent-a)) 0 0/100% 2px no-repeat;
  --panel-art-size:18px; --panel-art-top:auto; --panel-art-right:0; --panel-art-radius:0; --panel-art-rotate:rotate(180deg);
  --rail-emblem:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  --rail-emblem-radius:0; --rail-emblem-rotate:none;
}
body[data-region="south"] {  /* caustic light, rising bubbles */
  --panel-band:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-a) 85%,transparent) 30%,color-mix(in srgb,var(--accent-b) 70%,transparent) 62%,transparent);
  --panel-band-h:4px;
  --panel-art:radial-gradient(circle at 76% 26%,var(--accent-a) 0 22%,transparent 23%),radial-gradient(circle at 40% 58%,color-mix(in srgb,var(--accent-a) 74%,transparent) 0 16%,transparent 17%),radial-gradient(circle at 66% 78%,color-mix(in srgb,var(--accent-a) 54%,transparent) 0 11%,transparent 12%);
  --panel-art-size:26px; --panel-art-top:0; --panel-art-right:0; --panel-art-radius:0; --panel-art-rotate:none;
  --rail-emblem:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  --rail-emblem-radius:50% 50% 50% 0; --rail-emblem-rotate:rotate(-45deg);
}
body[data-region="north"] {  /* gilt header, rune boss */
  --panel-band:linear-gradient(90deg,transparent,var(--accent-a) 18%,color-mix(in srgb,#fff 60%,var(--accent-a)) 50%,var(--accent-a) 82%,transparent);
  --panel-band-h:4px;
  --panel-art:linear-gradient(var(--accent-a),var(--accent-a));
  --panel-art-size:13px; --panel-art-top:9px; --panel-art-right:9px; --panel-art-radius:2px; --panel-art-rotate:rotate(45deg);
  --rail-emblem:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  --rail-emblem-radius:2px; --rail-emblem-rotate:rotate(45deg);
}
body[data-region="dark"] { --panel-band:none; --panel-band-h:0; --panel-art:none; --rail-emblem:linear-gradient(#fff,#fff); --rail-emblem-radius:0; --rail-emblem-rotate:none; }

.placeholder-screen,.selected-channel-card,.notice-board,.detail-panel,.progress-context-card,.progress-check-panel,.battle-summary,.fighter-card,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.active-region-card,.session-policy-card,.movement-option,.judgement-card,.status-identity-card,.gacha-panel,.gacha-admin-card,.base-skill-admin,.admin-player-picker,.channel-card { position:relative; }
.placeholder-screen::before,.selected-channel-card::before,.notice-board::before,.detail-panel::before,.progress-context-card::before,.progress-check-panel::before,.battle-summary::before,.fighter-card::before,.combat-data-form::before,.combat-data-list::before,.enemy-form::before,.catalog-form::before,.emote-form::before,.active-region-card::before,.session-policy-card::before,.movement-option::before,.judgement-card::before,.status-identity-card::before,.gacha-panel::before,.gacha-admin-card::before,.base-skill-admin::before,.admin-player-picker::before,.channel-card::before {
  position:absolute; z-index:2; top:0; right:0; left:0; height:var(--panel-band-h,3px); border-radius:var(--region-corner,10px) var(--region-corner,10px) 0 0; background:var(--panel-band,none); content:""; opacity:.9; pointer-events:none;
}
.placeholder-screen::after,.selected-channel-card::after,.notice-board::after,.detail-panel::after,.progress-context-card::after,.progress-check-panel::after,.battle-summary::after,.fighter-card::after,.combat-data-form::after,.combat-data-list::after,.enemy-form::after,.catalog-form::after,.emote-form::after,.active-region-card::after,.session-policy-card::after,.movement-option::after,.judgement-card::after,.status-identity-card::after,.gacha-panel::after,.gacha-admin-card::after,.base-skill-admin::after,.admin-player-picker::after,.region-choice::after {
  position:absolute; z-index:2; top:var(--panel-art-top,0); right:var(--panel-art-right,0); width:var(--panel-art-size,16px); height:var(--panel-art-size,16px); border-radius:var(--panel-art-radius,0); background:var(--panel-art,none); content:""; opacity:.85; transform:var(--panel-art-rotate,none); pointer-events:none;
}
body[data-region="west"] .placeholder-screen::after,body[data-region="west"] .notice-board::after,body[data-region="west"] .combat-data-form::after,body[data-region="west"] .detail-panel::after,body[data-region="west"] .catalog-form::after,body[data-region="west"] .enemy-form::after { top:auto; bottom:0; }

/* Headings become a titled masthead rather than a bare string. */
.screen > h1 { margin-bottom:6px; font-size:26px; letter-spacing:-.01em; line-height:1.16; }
.screen > h1 + p { max-width:64ch; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-a); }

/* The rail carries the region emblem and reads as a chosen place. */
.topbar::before { display:inline-block; width:14px; height:14px; margin-right:2px; border-radius:var(--rail-emblem-radius,2px); background:var(--rail-emblem,none); box-shadow:0 0 14px color-mix(in srgb,var(--accent-a) 70%,transparent); content:""; transform:var(--rail-emblem-rotate,none); }
.nav-item { letter-spacing:.04em; }

/* ---- Region identity, part five: form, not fill -----------------------------
   Colour and light were doing all the work while every region kept the same
   geometry and the same rhythm.  Regions now differ in silhouette, in how
   densely they pack, and in how a heading is built.  Panel clipping is
   deliberately avoided -- .loadout-tooltip escapes its panel -- so silhouettes
   come from radii and drawn plates, never from clip-path on a container. */
:root {                                   /* 중부 · compact technical grid */
  --region-corner:3px; --panel-pad:15px; --panel-gap:11px; --panel-border:1px;
  --kicker-align:flex-start; --kicker-tail:1;
  --nav-clip:none; --nav-radius:3px;
  --rivets:inset 0 0 0 0 transparent;
}
body[data-region="east"] {                /* 동부 · loose, grown, left-weighted */
  --region-corner:22px 7px 22px 7px; --panel-pad:19px 18px 19px 24px; --panel-gap:15px; --panel-border:1px;
  --kicker-align:flex-start; --kicker-tail:1;
  --nav-clip:none; --nav-radius:16px 4px 16px 4px;
  --rivets:inset 0 0 0 0 transparent;
}
body[data-region="west"] {                /* 서부 · tight, machined, riveted */
  --region-corner:2px 18px 2px 18px; --panel-pad:13px 15px; --panel-gap:8px; --panel-border:1px;
  --kicker-align:flex-start; --kicker-tail:1;
  --nav-clip:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%); --nav-radius:0;
  --rivets:inset 9px 9px 0 -6.5px color-mix(in srgb,var(--accent-a) 70%,transparent),inset -9px 9px 0 -6.5px color-mix(in srgb,var(--accent-a) 70%,transparent),inset 9px -9px 0 -6.5px color-mix(in srgb,var(--accent-a) 70%,transparent),inset -9px -9px 0 -6.5px color-mix(in srgb,var(--accent-a) 70%,transparent);
}
body[data-region="south"] {               /* 남부 · rounded, roomy, drifting */
  --region-corner:20px; --panel-pad:18px 20px; --panel-gap:14px; --panel-border:1px;
  --kicker-align:flex-start; --kicker-tail:1;
  --nav-clip:none; --nav-radius:999px;
  --rivets:inset 0 0 0 0 transparent;
}
body[data-region="north"] {               /* 북부 · ceremonial, arched, centred */
  --region-corner:24px 24px 4px 4px; --panel-pad:24px 22px 20px; --panel-gap:16px; --panel-border:2px;
  --kicker-align:center; --kicker-tail:0;
  --nav-clip:none; --nav-radius:14px 14px 3px 3px;
  --rivets:inset 0 0 0 0 transparent;
}
body[data-region="dark"] { --region-corner:0; --panel-pad:14px; --panel-gap:11px; --panel-border:1px; --kicker-align:flex-start; --kicker-tail:1; --nav-clip:none; --nav-radius:0; --rivets:inset 0 0 0 0 transparent; }

/* Density and weight are part of a region's character, not a constant. */
.notice-board,.detail-panel,.progress-context-card,.progress-check-panel,.battle-summary,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.active-region-card,.session-policy-card,.judgement-card,.status-identity-card,.gacha-panel,.gacha-admin-card,.base-skill-admin,.admin-player-picker,.channel-card,.selected-channel-card { padding:var(--panel-pad,15px); gap:var(--panel-gap,11px); border-width:var(--panel-border,1px); box-shadow:var(--region-edge,none),var(--rivets,none); }

/* A heading is assembled differently in each place. */
.section-kicker { justify-content:var(--kicker-align,flex-start); }
.section-kicker::before { flex:0 0 auto; }
.section-kicker::after { flex:var(--kicker-tail,1) 1 0; min-width:14px; }
body[data-region="north"] .section-kicker { gap:12px; }

/* The rail is cut to the region's own shape. */
.nav-item { border-radius:var(--nav-radius,8px); clip-path:var(--nav-clip,none); }

/* ---- Region identity, part six: lettering ----------------------------------
   Only Latin display faces are fetched (one request, ~20-30KB each).  Korean
   glyphs fall through to the system stack, and switching that fallback between
   고딕 and 명조 changes Korean headings for free -- a Korean webfont would cost
   megabytes for the same effect. */
:root                      { --font-display:'Rajdhani',Pretendard,"Malgun Gothic",system-ui,sans-serif; --display-track:.06em; --display-weight:700; --kicker-case:uppercase; --kicker-track:.22em; }
body[data-region="east"]   { --font-display:'Alegreya',"Nanum Myeongjo",Batang,serif; --display-track:.005em; --display-weight:700; --kicker-case:uppercase; --kicker-track:.2em; }
body[data-region="west"]   { --font-display:'Share Tech Mono',Pretendard,"Malgun Gothic",ui-monospace,monospace; --display-track:.1em; --display-weight:400; --kicker-case:uppercase; --kicker-track:.34em; }
body[data-region="south"]  { --font-display:'Spectral',"Nanum Myeongjo",Batang,serif; --display-track:.01em; --display-weight:700; --kicker-case:uppercase; --kicker-track:.24em; }
body[data-region="north"]  { --font-display:'Cinzel',"Nanum Myeongjo",Batang,serif; --display-track:.09em; --display-weight:700; --kicker-case:uppercase; --kicker-track:.3em; }
body[data-region="dark"]   { --font-display:ui-monospace,"Cascadia Mono",Consolas,monospace; --display-track:.08em; --display-weight:700; --kicker-case:uppercase; --kicker-track:.26em; }

.screen > h1,.topbar strong { font-family:var(--font-display); font-weight:var(--display-weight,700); letter-spacing:var(--display-track,.02em); }
.eyebrow,.section-kicker { font-family:var(--font-display); letter-spacing:var(--kicker-track,.18em); text-transform:var(--kicker-case,uppercase); }

/* ---- Region skins ----------------------------------------------------------
   Dark feels like another product because it rewrites widgets (65 rules against
   .battle-card, .combat-slot, .progress-command-dock and friends) while the
   other four only declared variables (43 between them, nearly all tokens).
   Variables cannot change what the base stylesheet builds, so the four regions
   now override the same shared chrome dark does. */

/* 동부 · timber hall: beams, bark columns, canopy light */
body[data-region="east"] .topbar { border-bottom:3px solid color-mix(in srgb,var(--scene-edge) 76%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--scene-edge) 46%,var(--page)),var(--page)); }
body[data-region="east"] .nav-rail { position:relative; border-right:2px solid color-mix(in srgb,var(--scene-edge) 60%,transparent); }
body[data-region="east"] .nav-rail::before { position:absolute; top:0; right:-2px; bottom:0; width:2px; background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent-b) 60%,transparent) 0 12px,transparent 12px 26px); content:""; }
body[data-region="east"] .progress-log { border-left:4px solid color-mix(in srgb,var(--scene-edge) 72%,transparent); background:radial-gradient(120% 46% at 50% 0%,color-mix(in srgb,var(--accent-a) 12%,transparent),transparent 62%),color-mix(in srgb,var(--surface-deep) 84%,var(--page)); }
body[data-region="east"] .progress-console-header::after { flex:0 0 84px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent-b),transparent); content:""; }
body[data-region="east"] .progress-session-bar,body[data-region="east"] .progress-command-dock { border-radius:18px 6px 18px 6px; border-color:color-mix(in srgb,var(--scene-edge) 66%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--scene-edge) 26%,var(--surface)),var(--surface-deep)); }

/* 서부 · hull plating: seams, brackets, a lit console */
body[data-region="west"] .topbar { border-bottom:1px solid color-mix(in srgb,var(--accent-a) 62%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 90%,var(--page)),var(--page) 72%); box-shadow:0 1px 0 color-mix(in srgb,var(--accent-a) 30%,transparent),0 8px 22px -14px color-mix(in srgb,var(--accent-a) 80%,transparent); }
body[data-region="west"] .nav-rail { position:relative; border-right:1px solid color-mix(in srgb,var(--accent-a) 34%,transparent); }
body[data-region="west"] .nav-rail::before { position:absolute; top:14px; right:-1px; width:9px; height:34px; border-top:2px solid var(--accent-a); border-right:2px solid var(--accent-a); content:""; }
body[data-region="west"] .progress-log { position:relative; border-color:color-mix(in srgb,var(--accent-a) 46%,var(--line)); background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent-a) 6%,transparent) 0 1px,transparent 1px 4px),color-mix(in srgb,var(--surface-deep) 92%,#000); box-shadow:inset 0 0 44px color-mix(in srgb,var(--accent-a) 12%,transparent); }
body[data-region="west"] .progress-console-header::after { flex:0 0 64px; height:8px; border-top:2px solid var(--accent-a); border-right:2px solid var(--accent-a); content:""; }
body[data-region="west"] .progress-session-bar,body[data-region="west"] .progress-command-dock { border-radius:2px 14px 2px 14px; border-color:color-mix(in srgb,var(--accent-a) 50%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 80%,transparent),var(--surface-deep)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-a) 34%,transparent); }

/* 남부 · submerged: a surface far above, glass and caustics */
body[data-region="south"] .topbar { border-bottom:2px solid color-mix(in srgb,var(--accent-a) 56%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--accent-a) 26%,var(--page)),var(--page) 80%); }
body[data-region="south"] .nav-rail { border-right:1px solid color-mix(in srgb,var(--accent-b) 40%,transparent); }
body[data-region="south"] .progress-log { border-radius:22px; border-color:color-mix(in srgb,var(--accent-b) 44%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--accent-a) 11%,transparent),transparent 42%),radial-gradient(90% 40% at 50% 108%,color-mix(in srgb,var(--accent-a) 14%,transparent),transparent 68%),color-mix(in srgb,var(--surface-deep) 88%,var(--page)); }
body[data-region="south"] .progress-console-header::after { flex:0 0 92px; height:2px; border-radius:999px; background:linear-gradient(90deg,transparent,var(--accent-a),transparent); content:""; }
body[data-region="south"] .progress-session-bar,body[data-region="south"] .progress-command-dock { border-radius:999px; padding-inline:20px; border-color:color-mix(in srgb,var(--accent-b) 46%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 72%,transparent),var(--surface-deep)); }

/* 북부 · the hall: cornices, pilasters, an illuminated page */
body[data-region="north"] .topbar { border-bottom:0; background:linear-gradient(180deg,color-mix(in srgb,var(--scene-main) 62%,var(--page)),var(--page)); box-shadow:0 2px 0 var(--accent-a),0 5px 0 color-mix(in srgb,var(--surface-deep) 90%,transparent),0 7px 0 color-mix(in srgb,var(--accent-a) 48%,transparent); }
body[data-region="north"] .nav-rail { position:relative; border-right:2px solid color-mix(in srgb,var(--accent-a) 34%,transparent); }
body[data-region="north"] .nav-rail::before { position:absolute; top:0; right:-2px; bottom:0; width:2px; background:linear-gradient(180deg,var(--accent-a),transparent 22%,transparent 78%,var(--accent-a)); content:""; }
body[data-region="north"] .progress-log { border-radius:26px 26px 6px 6px; border-top:2px solid color-mix(in srgb,var(--accent-a) 52%,transparent); border-color:color-mix(in srgb,var(--accent-a) 40%,var(--line)); background:radial-gradient(110% 42% at 50% 0%,color-mix(in srgb,var(--accent-a) 14%,transparent),transparent 60%),color-mix(in srgb,var(--surface-deep) 86%,var(--page)); }
body[data-region="north"] .progress-console-header::after { flex:0 0 110px; height:3px; background:linear-gradient(90deg,transparent,var(--accent-a) 30%,color-mix(in srgb,#fff 60%,var(--accent-a)) 50%,var(--accent-a) 70%,transparent); content:""; }
body[data-region="north"] .progress-session-bar,body[data-region="north"] .progress-command-dock { border-radius:20px 20px 4px 4px; border-width:2px; border-color:color-mix(in srgb,var(--accent-a) 46%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--scene-main) 40%,var(--surface)),var(--surface-deep)); }

/* ---- Materials -------------------------------------------------------------
   The first attempt at this was the page wallpaper at a smaller period: a
   repeating gradient tiled inside every panel.  Tiles are patterns, not
   materials.  What separates them is that a material answers the *object* --
   one light sits above and slightly right of the screen, and each surface
   catches, scatters or throws it back according to what it is.  Nothing here
   repeats; every layer is positioned against the panel's own geometry, and each
   panel gets a contact shadow so it rests on the ground instead of floating. */
:root {          /* 중부 · plain ground, a little light off the top */
  --material:linear-gradient(180deg,color-mix(in srgb,#fff 7%,transparent),transparent 22%);
  --material-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);
  --material-drop:0 8px 16px -12px color-mix(in srgb,#000 70%,transparent);
}
body[data-region="east"] {   /* 목재와 흙 · fully diffuse: it swallows the light */
  --material:radial-gradient(150% 110% at 22% -10%,color-mix(in srgb,var(--accent-a) 11%,transparent),transparent 56%),linear-gradient(180deg,color-mix(in srgb,#fff 5%,transparent),transparent 24%);
  --material-shadow:inset 0 -22px 28px -24px #000,inset 0 1px 0 color-mix(in srgb,var(--accent-a) 10%,transparent);
  --material-drop:0 12px 20px -13px color-mix(in srgb,#000 78%,transparent);
}
body[data-region="west"] {   /* 유광 금속 · one tight hot spot, hard rim, dark body */
  --material:radial-gradient(58% 130% at 79% -24%,color-mix(in srgb,#fff 24%,transparent),transparent 44%),linear-gradient(180deg,transparent 84%,color-mix(in srgb,#000 46%,transparent));
  --material-shadow:inset 0 1px 0 color-mix(in srgb,#fff 62%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 70%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent-a) 20%,transparent);
  --material-drop:0 14px 26px -15px color-mix(in srgb,var(--accent-a) 34%,#000);
}
body[data-region="south"] {  /* 수면 · a lit surface line, light rising from beneath */
  --material:linear-gradient(180deg,color-mix(in srgb,#fff 19%,transparent),transparent 11%),radial-gradient(130% 76% at 50% 120%,color-mix(in srgb,var(--accent-a) 17%,transparent),transparent 60%);
  --material-shadow:inset 0 2px 0 color-mix(in srgb,#fff 30%,transparent),inset 0 -20px 28px -24px color-mix(in srgb,var(--accent-b) 76%,transparent);
  --material-drop:0 12px 24px -14px color-mix(in srgb,var(--accent-b) 40%,#000);
}
body[data-region="north"] {  /* 비단 · one very broad sheen, spread wide and low */
  --material:linear-gradient(101deg,transparent 4%,color-mix(in srgb,var(--accent-a) 10%,transparent) 32%,color-mix(in srgb,#fff 7%,transparent) 47%,color-mix(in srgb,var(--accent-a) 10%,transparent) 62%,transparent 92%),linear-gradient(180deg,color-mix(in srgb,#fff 5%,transparent),transparent 18%);
  --material-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-a) 26%,transparent),inset 0 -16px 24px -22px #000;
  --material-drop:0 12px 22px -14px color-mix(in srgb,#000 74%,transparent);
}
body[data-region="dark"] { --material:none; --material-shadow:inset 0 0 0 0 transparent; --material-drop:0 0 0 0 transparent; }

.notice-board,.detail-panel,.progress-context-card,.progress-check-panel,.battle-summary,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.active-region-card,.session-policy-card,.judgement-card,.status-identity-card,.gacha-panel,.gacha-admin-card,.base-skill-admin,.admin-player-picker,.channel-card,.selected-channel-card,.placeholder-screen,.progress-session-bar,.progress-command-dock {
  background-color:color-mix(in srgb,var(--surface) 88%,var(--page));
  background-image:var(--material,none);
  box-shadow:var(--region-edge,none),var(--rivets,inset 0 0 0 0 transparent),var(--material-shadow,inset 0 0 0 0 transparent),var(--material-drop,0 0 0 0 transparent);
}

/* The normal-region log is the mobile scroll container.  A stale 360px minimum
   could exceed the fixed progress console and push its command dock below the
   viewport, leaving the screen impossible to operate. */
@media (max-width:700px) {
  .screen.progress-screen.is-active { height:calc(100dvh - 88px); min-height:0; overflow:hidden; }
  .screen.progress-screen.is-active .progress-log { flex:1 1 auto; min-height:0; }
  /* On phones the header becomes two rows.  Keep its caption visibly paired
     with the session/location panel instead of leaving desktop-sized air. */
  .progress-console-header { gap:4px; padding-bottom:4px; }
  /* Regional header ornaments use a horizontal flex basis on desktop.  Once
     the header stacks vertically, that same basis became an 64–110px empty
     row before the session panel.  It is decoration, so omit it on phones. */
  .progress-console-header::after { display:none; }
  /* Keep the administration dock compact: its two control groups need rows,
     but never a full-width column with a third empty status row. */
  .progress-command-dock { align-items:center; flex-direction:row; flex-wrap:wrap; gap:6px; padding:7px 9px; }
  .progress-check-controls,.progress-admin-move { display:grid; width:100%; gap:5px; }
  .progress-check-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
  .progress-admin-move { width:fit-content; grid-template-columns:128px auto; justify-content:start; }
  .progress-admin-move select { width:128px; max-width:128px; }
  .progress-command-dock select,.progress-command-dock button { min-height:28px; min-width:0; padding-inline:7px; font-size:10px; }
  .progress-command-status { display:none; width:auto; min-height:0; margin:0; }
  .progress-command-status:not(:empty) { display:block; flex:1 1 100%; font-size:9px; }
}

.dark-action-buttons .is-keyboard-selected:not(:disabled) { outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 1px #000,0 0 16px rgba(255,255,255,.42); }
.dark-action-option.is-keyboard-focused { outline:1px solid #fff; outline-offset:2px; box-shadow:0 0 12px rgba(255,255,255,.28); }
.dark-action-keyboard-hint { display:block; color:#aaa; font-size:0; letter-spacing:.05em; text-align:center; }
.dark-action-keyboard-hint::after { content:'↑ ↓ 구역 · ← → 선택 · Enter 결정'; font-size:9px; }

/* ---- Mobile card battle ----------------------------------------------------
   The piles sat at the bottom where the hand and the chat button crowd them,
   and the ready button sat hard right underneath the floating chat control. */
@media (max-width:700px) {
  /* .battle-hand-zone is absolutely positioned against .battle-card-zone, so
     that element must stay a containing block -- making it static reparented
     the whole hand and put the cards out of reach.  The pile is lifted within
     the zone instead, clearing the cards without touching their anchor. */
  /* Cards overlapped by 22px and sat low, so most of each one was buried under
     its neighbour and the hit area was a thin sliver.  Spread them out and
     bring the row up. */
  .progress-log:has(.battle-board) .battle-card { margin-left:-7px; transform:translateY(112px); }
  .progress-log:has(.battle-board) .battle-card:hover,.progress-log:has(.battle-board) .battle-card:focus-visible,.progress-log:has(.battle-board) .battle-card.is-selected { transform:translateY(34px); }
  .battle-board > .battle-pile-panel { top:64px; bottom:auto; }
  .progress-battle-dock { justify-content:center; gap:12px; padding-right:64px; }
  .progress-battle-dock > div { flex:0 1 auto; min-width:0; }
  .progress-battle-dock #battle-ready-button { flex:0 0 auto; }
}

@media (max-width:520px) {
  /* The narrow tier packs tighter still; keep the same relief proportionally. */
  .progress-log:has(.battle-board) .battle-card { margin-left:-5px; transform:translateY(92px); }
  .progress-log:has(.battle-board) .battle-card:hover,.progress-log:has(.battle-board) .battle-card:focus-visible,.progress-log:has(.battle-board) .battle-card.is-selected { transform:translateY(26px); }
}

/* ---- Card battle: piles above the board, hand centred ----------------------
   The piles used to live in .battle-card-zone underneath the hand.  They are
   now a rail inside the board itself, so they can sit at the top on a phone
   without touching .battle-hand-zone, which anchors to the card zone. */
.battle-board { position:relative; }
.battle-pile-rail { position:absolute; z-index:6; top:auto; right:10px; bottom:12px; left:10px; display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none; }
.progress-log:has(.battle-board) .battle-pile-rail .battle-pile { position:static; inset:auto; align-self:start; grid-template-rows:auto auto; gap:4px; pointer-events:auto; }
.battle-card-zone { grid-template-columns:minmax(0,1fr); }

@media (max-width:700px) {
  /* Piles ride at the top of the board, clear of the hand. */
  .battle-pile-rail { top:6px; bottom:auto; right:8px; left:8px; align-items:flex-start; }
  /* The turn cost was the first line of the discard pile and got clipped; give
     it its own legible chip. */
  .progress-log:has(.battle-board) .battle-pile-rail .discard-pile > p { padding:2px 7px; border:1px solid color-mix(in srgb,var(--accent-a) 60%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--surface-deep) 88%,transparent); color:var(--text); font-size:10px; white-space:nowrap; }
  .progress-log:has(.battle-board) .battle-pile-rail .discard-pile > p strong { color:var(--accent-a); font-size:12px; }
  .progress-log:has(.battle-board) .battle-pile-rail .battle-pile button { min-height:34px; padding:3px 8px; font-size:10px; line-height:1.2; }
  /* Centre the hand: it was flex-start, which pushed the fan off to one side. */
  .progress-log:has(.battle-board) .battle-card-hand { justify-content:center; overflow-x:visible; }
}

/* Remaining turn cost now reads from the battle dock, beside the phase title. */
.battle-turn-cost { display:grid; align-items:center; gap:1px; padding:5px 11px; border:1px solid color-mix(in srgb,var(--accent-a) 58%,var(--line)); border-radius:var(--region-field-corner,7px); background:color-mix(in srgb,var(--surface-deep) 82%,transparent); text-align:center; }
.battle-turn-cost p { margin:0; color:var(--muted); font-size:9px; letter-spacing:.1em; white-space:nowrap; }
.battle-turn-cost strong { color:var(--accent-a); font-size:18px; line-height:1; }
.battle-turn-cost[hidden] { display:none; }

/* Mobile navigation uses the existing permission-filtered menu in a native
   dialog, including keyboard focus containment and Escape/backdrop dismissal. */
.mobile-menu-toggle { display:none; }
.dark-editor-shortcuts { display:none; }
.mobile-menu-dialog { width:min(360px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface-deep); color:var(--text); }
.mobile-menu-dialog::backdrop { background:rgb(0 0 0 / .65); }
.mobile-menu-dialog > header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--surface-deep); border-bottom:1px solid var(--line); }
.mobile-menu-dialog h2 { margin:0; font-size:18px; }
.mobile-menu-dialog > a:not([hidden]) { display:block; margin:12px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:15px; }
.mobile-menu-dialog > header button { min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); }
.mobile-menu-dialog .sidebar { display:block; overflow:visible; padding:12px; border:0; }
.mobile-menu-dialog .nav-label { display:block; margin:16px 4px 8px; font-size:12px; }
.mobile-menu-dialog .nav-group,.mobile-menu-dialog #admin-nav:not([hidden]) { display:block; }
.mobile-menu-dialog .nav-item { display:flex; width:100%; min-height:46px; margin:4px 0; padding:10px 12px; font-size:15px; }
.mobile-menu-dialog .nav-item > span { display:inline; }
.mobile-menu-dialog .nav-children { display:grid; gap:6px; margin:6px 0 12px 20px; }
.mobile-menu-dialog .nav-children button { min-height:44px; padding:8px 12px; text-align:left; font-size:14px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent-a); outline-offset:3px; }

@media (max-width:700px) {
  .mobile-menu-toggle { display:block; flex-shrink:0; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:14px; }
  .app-layout > .sidebar { display:none; }
  .app-layout { grid-template-rows:minmax(0,1fr); }
  .topbar { gap:8px; padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)); }
  .topbar::before,.topbar .public-region,.topbar .brand-mark,.topbar .account-avatar,.topbar #account-character-name,.topbar .admin-preview { display:none; }
  .topbar .brand { font-size:17px; }
  .topbar .account-summary { gap:5px; min-width:0; }
  .topbar .account-summary button,.topbar .account-summary a { min-height:40px; padding:8px; font-size:12px; }
  .topbar #discord-link-button { display:none; }
  .workspace { padding:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .workspace > .screen { min-width:0; }
  .screen.progress-screen.is-active { height:calc(100dvh - 80px - env(safe-area-inset-bottom)); }
  .screen :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),dialog :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),.auth-form :is(input,select,textarea),.chat-composer textarea { min-width:0; max-width:100%; font-size:16px; }
  .screen :is(input:not([type="checkbox"]):not([type="radio"]),select),dialog :is(input:not([type="checkbox"]):not([type="radio"]),select),.auth-form :is(input,select) { min-height:44px; }
  .screen :is(.primary-button,.secondary-button,.library-pagination button,.dark-action-buttons button,.dark-action-option),.progress-command-dock button,.progress-battle-dock button { min-height:44px; font-size:14px; }
  .screen :is(label > span,.dark-rule-set legend,.dark-enemy-row label > span) { font-size:13px; line-height:1.5; }
  .screen :is(.dark-pattern-base,.dark-rule-grid,.auth-split-fields) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-browser { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
  .catalog-browser > * { min-width:0; }
  .catalog-browser button { min-height:44px; overflow-wrap:anywhere; }
  .dark-enemy-row,.dark-enemy-row:not(.dark-enemy-pattern-row),.dark-enemy-pattern-row { grid-template-columns:minmax(0,1fr) 44px; }
  .dark-enemy-row button,.dark-rule-actions button,.dark-pattern-rule header button,.dark-card-actions button { min-width:44px; min-height:44px; font-size:13px; }
  .dark-pattern-rule header { flex-wrap:wrap; gap:8px; }
  .dark-pattern-rule header > .dark-rule-actions { margin-left:auto; }
  .dark-rule-preview-panel { position:static; min-width:0; }
  .dark-editor-shortcuts { position:sticky; top:-12px; z-index:12; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:12px 0; padding:8px 0; background:var(--page); }
  .dark-editor-shortcuts a { display:grid; min-height:44px; padding:6px 2px; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface); text-decoration:none; font-size:13px; }
  #dark-asset-form,#dark-pattern-form,#dark-rule-preview-title,#dark-enemy-config-form { scroll-margin-top:64px; }
  dialog:not(.mobile-menu-dialog) { max-width:calc(100vw - 20px); max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; }
  .auth-gate { overflow-y:auto; padding-bottom:max(14px,env(safe-area-inset-bottom)); }
  .auth-panel { width:100%; min-width:0; }
  .mobile-chat-toggle { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); }
  .chat-panel.is-mobile-open { padding-bottom:env(safe-area-inset-bottom); }
  .dark-mobile-joystick { touch-action:none; user-select:none; }
  .dark-dodge-stage[data-arena="fullscreen"] + .dark-mobile-joystick { bottom:max(16px,env(safe-area-inset-bottom)); }
  .dark-action-keyboard-hint { display:none; }
}

@media (max-width:700px) {
  /* The piles are gone on a phone: the cost they carried lives in the dock now,
     and the board has no room for two more columns of chrome. */
  .battle-pile-rail { display:none; }
  .battle-turn-cost { padding:4px 9px; }
  .battle-turn-cost strong { font-size:16px; }
}

.management-banner { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:8px 16px; background:#44391f; color:#fff0ce; border-bottom:1px solid #a38749; }
.management-banner[hidden] { display:none; }
.management-banner strong { margin-right:auto; }
.management-banner a, .management-banner button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid #b49a65; border-radius:6px; color:inherit; background:#342d1e; font:inherit; text-decoration:none; cursor:pointer; }
.management-banner :focus-visible { outline:3px solid #ffe0a1; outline-offset:2px; }
.management-active .app-shell { display:flex; flex-direction:column; }
.management-active .topbar, .management-active .management-banner { flex-shrink:0; }
.management-active .app-layout { flex:1; height:auto; }

/* Card battle choreography: bounded transform/opacity animations, no canvas loop. */
.battle-card { border-top:3px solid var(--card-tint,var(--accent-a)); }
.battle-card.is-selected { box-shadow:0 0 0 2px var(--card-tint,var(--accent-a)),0 6px 22px #0005; }
.combatant { isolation:isolate; }
.battle-hp { position:relative; width:100%; height:6px; margin-top:7px; overflow:hidden; border-radius:3px; background:#070c13; }
.battle-hp > i { position:absolute; inset:0; transform-origin:left center; background:#74dcb3; }
.battle-hp > .battle-hp-trail { background:#ffe0aa; }
.enemy .battle-hp > .battle-hp-fill { background:#ff8d91; }
.vfx-defeated .combat-token { opacity:.35; filter:grayscale(1); }
.vfx-flying-card { position:fixed; z-index:160; display:grid; place-items:center; padding:12px; border:2px solid var(--vfx-color,#e5cf91); border-radius:9px; background:#172634; color:#fff; font-weight:700; text-align:center; pointer-events:none; box-shadow:0 0 18px #0006; transform-origin:top left; }
.battle-vfx-stage { position:absolute; z-index:8; left:50%; top:8px; transform:translateX(-50%); width:min(520px,80%); max-height:calc(100% - 24px); overflow:auto; padding:13px 16px; border:1px solid #a9bdcf80; border-radius:14px; color:#eef5fc; background:linear-gradient(135deg,#111e2af5,#1d2735f5); box-shadow:0 16px 38px #0007; scrollbar-width:thin; }
.battle-vfx-stage header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.battle-vfx-stage header > span { color:#e5cf91; font-size:11px; font-weight:700; letter-spacing:.08em; }
.battle-vfx-stage button { min-height:32px; padding:5px 9px; border:1px solid #8395a0; border-radius:6px; background:#13202d; color:#d7e4eb; cursor:pointer; font:inherit; font-size:11px; }
.vfx-duel { display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); align-items:center; gap:8px; }
.vfx-duelist { display:grid; justify-items:center; gap:4px; min-width:0; }
.vfx-portrait { display:grid; place-items:center; width:60px; height:60px; border:2px solid var(--vfx-color); border-radius:14px; background:#152c3d; overflow:hidden; font-size:26px; }
.vfx-portrait img { width:100%; height:100%; object-fit:cover; }
.vfx-duelist > strong { max-width:100%; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vfx-skill { width:100%; min-height:27px; padding:5px 7px; border-left:3px solid var(--vfx-color); background:#ffffff0a; color:#eef5fc; font-size:11px; text-align:center; overflow-wrap:anywhere; }
.vfx-versus { color:#e5cf91; font-size:24px; text-align:center; }
.vfx-rolls { position:relative; min-height:88px; margin:8px 0 4px; }
.vfx-roll { position:absolute; inset:0; display:grid; align-content:center; gap:3px; text-align:center; }
.vfx-roll > small { color:#b9c9d6; font-size:10px; }
.vfx-powers { display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; gap:8px; }
.vfx-powers strong { color:#aebbc7; font-size:32px; line-height:1.1; font-variant-numeric:tabular-nums; }
.vfx-powers strong.is-winner { color:#ffe1a1; text-shadow:0 0 10px #e5cf9150; }
.vfx-powers > span { color:#95a8b8; font-size:10px; }
.vfx-coin-sides { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.vfx-coin-sides > div { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; }
.vfx-coin { display:grid; place-items:center; min-width:23px; height:23px; padding:2px; border:1px solid #8293a0; border-radius:50%; color:#aebbc7; font-size:10px; }
.vfx-coin.is-heads { border-color:#e5cf91; color:#ffe1a1; background:#e5cf9115; }
.vfx-single-roll { display:grid; align-content:center; gap:8px; min-height:80px; text-align:center; font-size:11px; color:#adbfcc; }
.vfx-single-roll strong { display:block; max-height:48px; overflow:auto; font-size:13px; color:#eee6d3; }
.battle-vfx-stage footer { border-top:1px solid #ffffff1a; padding-top:8px; text-align:center; }
.battle-vfx-stage footer > strong { display:block; color:#ffdbac; font-size:15px; }
.battle-vfx-stage details { margin-top:6px; font-size:11px; color:#b6c7d5; }
.battle-vfx-stage summary { cursor:pointer; padding:4px; }
.battle-vfx-stage details p { line-height:1.6; text-align:left; }
.vfx-hit { position:absolute; z-index:9; top:88px; left:50%; margin-left:-36px; width:72px; text-align:center; pointer-events:none; }
.vfx-hit b { position:relative; color:#fff0cf; font-size:30px; line-height:1; font-weight:900; text-shadow:0 2px 3px #000,1px 0 #662e29; }
.vfx-impact-mark { position:absolute; left:10%; top:8px; width:80%; height:3px; background:#ffe6bb; transform:rotate(-35deg); box-shadow:0 0 8px #ffbf82; }
.battle-vfx-stage.is-reduced .vfx-impact-mark { display:none; }
@media (max-width:700px) {
  .battle-vfx-stage { top:0; width:98%; padding:8px 10px; max-height:72%; border-radius:10px; }
  .battle-vfx-stage header { margin-bottom:4px; }
  .battle-vfx-stage header > span { font-size:9px; }
  .battle-vfx-stage button { min-height:44px; }
  .vfx-portrait { width:42px; height:42px; border-radius:10px; font-size:20px; }
  .vfx-duelist > strong { font-size:10px; }
  .vfx-skill { font-size:10px; padding:4px; }
  .vfx-rolls { min-height:78px; margin-top:4px; }
  .vfx-powers strong { font-size:27px; }
  .vfx-coin { min-width:19px; height:19px; font-size:9px; }
  .vfx-coin-sides { gap:20px; }
  .battle-vfx-stage footer > strong { font-size:12px; }
  .vfx-hit { top:94px; }
  .vfx-hit b { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .vfx-impact-mark { display:none; }
  .battle-card,.combat-token,.battle-trajectory { transition:none !important; }
}
@media (min-width:701px) { .battle-vfx-stage { width:min(440px,60%); } }
.progress-log .battle-card[data-battle-card] { border-top:3px solid var(--card-tint,var(--accent-a)); }

/* Readable coin decisions and crisp, layered battle routes. */
.vfx-coin { min-width:29px; height:29px; font-size:12px; font-weight:700; background:#172230; box-shadow:inset 0 0 0 2px #ffffff08; }
.vfx-coin.is-heads { background:#443824; box-shadow:inset 0 0 0 2px #e5cf9126; }
.vfx-coin-sides > div { gap:5px; }
.vfx-rolls { min-height:104px; }
.battle-trajectory.is-clash { filter:none; }
.battle-route { opacity:.85; transition:opacity 160ms ease; }
.battle-route.is-muted,.battle-clash-badge.is-muted { opacity:.08; }
.battle-route-bed { fill:none; stroke:#081320; stroke-width:7; stroke-linecap:round; opacity:.9; }
.battle-route-flow { fill:none; stroke:#f6fbff; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:5 35; animation:battle-route-travel 2.4s linear infinite; opacity:.85; }
.battle-route-origin { fill:#0c1825; stroke:var(--route-color); stroke-width:1.5; }
.battle-clash-badge { transition:opacity 160ms ease; }
.battle-clash-badge circle { fill:#101d2d; stroke:#dfc98e; stroke-width:1.4; }
.battle-clash-badge text { fill:#f4dfac; font-size:10px; font-weight:700; }
@keyframes battle-route-travel { to { stroke-dashoffset:-40; } }
@media (max-width:700px) { .vfx-coin { min-width:24px; height:24px; font-size:11px; }.vfx-rolls { min-height:104px; }.battle-route-flow { animation:none; } }
@media (prefers-reduced-motion:reduce) { .battle-route-flow { animation:none; }.battle-route,.battle-clash-badge { transition:none; } }

.vfx-rolls { min-height:calc(76px + var(--coin-rows, 1) * 34px); }

.vfx-coin.coin-indestructible { color:#ffb4b4; border-color:#fa6268; background:#591f2b; }
.vfx-coin.coin-extract { color:#baffcf; border-color:#55d988; background:#163e2b; }
.vfx-coin.coin-annihilation { color:#e8c4ff; border-color:#bd7df5; background:#3e235d; }
.vfx-attack-roll { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:10px; text-align:center; }
.vfx-attack-roll small { font-size:11px; color:#c9d8e6; }.vfx-attack-roll strong { font-size:25px; color:#ffe2ab; }
.combatant:has(.combat-slots) { padding-top:calc(66px + var(--slot-count, 1) * 34px); }
.combat-slots { position:absolute; top:49px; left:50%; transform:translateX(-50%); display:grid; gap:4px; width:100px; }
.combat-slots .combat-slot { position:relative; inset:auto; transform:none; width:100%; min-height:30px; border-color:var(--slot-color); }
@media(max-width:700px) { .combat-slots { top:40px; width:82px; }.combat-slots .combat-slot { font-size:9px; } }

.vfx-attack-coins { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:100%; }
.vfx-hit > small { display:block; color:#ffdfc8; font-size:10px; font-weight:600; }

.battle-vfx-stage footer { position:relative; }
[data-vfx-previous] { position:absolute; top:0; left:0; right:0; color:#ffe2ab; }

.battle-card.is-assigned { filter:saturate(.5) brightness(.58); translate:0 14px; }
.battle-card.is-assigned:hover,.battle-card.is-assigned:focus-visible,.battle-card.is-assigned.is-selected { filter:saturate(.8) brightness(.85); translate:0 7px; }
/* Regional visual systems: keep the monochrome world isolated. */
body:not([data-region="dark"]) { --ui-radius:16px; --ui-heading:var(--sans, sans-serif); background:var(--page); color:var(--text); }
body[data-region="east"] { --page:#111b14; --surface:#253126; --surface-soft:#303d2d; --surface-deep:#142017; --line:#626044; --text:#f2ead3; --muted:#b7b99d; --accent-a:#cbdc91; --accent-b:#b58c54; --accent-text:#192217; --chat:#1c291e; --scene-main:#314c2c; --scene-edge:#51422b; --ui-radius:20px 5px 20px 5px; --ui-heading:Georgia,'Batang',serif; --world-pattern:repeating-linear-gradient(96deg,#b9996410 0 1px,transparent 1px 13px); }
body[data-region="west"] { --page:#0a0a15; --surface:#171529; --surface-soft:#232039; --surface-deep:#100e1e; --line:#494063; --text:#f5f1ff; --muted:#b4aacb; --accent-a:#52f3e0; --accent-b:#ff66b4; --accent-text:#0d1420; --chat:#151225; --scene-main:#172a38; --scene-edge:#492142; --ui-radius:2px 14px 2px 2px; --world-pattern:repeating-linear-gradient(0deg,#a995e608 0 1px,transparent 1px 5px); }
body[data-region="south"] { --page:#0c2023; --surface:#183438; --surface-soft:#224448; --surface-deep:#102a2e; --line:#4b7773; --text:#eee9d6; --muted:#abc5bf; --accent-a:#8be0d2; --accent-b:#d6b47b; --accent-text:#112c2d; --chat:#142f33; --scene-main:#235e62; --scene-edge:#183e55; --ui-radius:4px 4px 20px 4px; --ui-heading:Georgia,'Batang',serif; --world-pattern:repeating-radial-gradient(ellipse at 100% 130%,transparent 0 38px,#90c8b80c 39px 40px,transparent 41px 65px); }
body[data-region="north"] { --page:#100f20; --surface:#211e38; --surface-soft:#302a48; --surface-deep:#171428; --line:#65547f; --text:#f0eafa; --muted:#c0b2d6; --accent-a:#dec88e; --accent-b:#b7a0ff; --accent-text:#241b37; --chat:#1c1930; --scene-main:#3d315b; --scene-edge:#252548; --ui-radius:16px; --ui-heading:Georgia,'Batang',serif; --world-pattern:radial-gradient(circle at 82% 15%,transparent 0 145px,#c6b4fc0d 146px 147px,transparent 148px 190px,#c6b4fc0a 191px 192px,transparent 193px); }
body[data-region="central"] { --page:#0c1520; --surface:#1a2938; --surface-soft:#22364a; --surface-deep:#111f2d; --line:#3d5269; --text:#eef4fc; --muted:#acbed2; --accent-a:#8dbdff; --accent-b:#9d92ff; --accent-text:#112239; --chat:#152331; --scene-main:#253d63; --scene-edge:#292e58; --ui-radius:14px; --world-pattern:linear-gradient(90deg,#9dbbea05 1px,transparent 1px),linear-gradient(#9dbbea05 1px,transparent 1px); }
body:not([data-region="dark"]) .topbar { background:var(--surface-deep); border-bottom:1px solid var(--line); box-shadow:0 5px 25px #0002; }
body:not([data-region="dark"]) .sidebar { background:var(--world-pattern),var(--surface-deep); padding:20px 10px; }
body:not([data-region="dark"]) .sidebar::before { content:attr(aria-label); display:block; }
body:not([data-region="dark"]) .sidebar button { border-radius:var(--ui-radius); min-height:38px; margin-bottom:3px; }
body:not([data-region="dark"]) .sidebar .is-current { color:var(--accent-a); background:color-mix(in srgb,var(--accent-a) 12%,var(--surface)); border-left:3px solid var(--accent-a); box-shadow:none; }
body:not([data-region="dark"]) main { background:var(--world-pattern),var(--page); background-size:auto; }
body:not([data-region="dark"]) :is(.screen-header,.progress-header) { border-bottom:1px solid var(--line); padding-bottom:18px; }
body:not([data-region="dark"]) :is(h1,h2,.chat-header strong) { font-family:var(--ui-heading); letter-spacing:.025em; }
body:not([data-region="dark"]) :is(.section-kicker,.eyebrow) { color:var(--accent-a); letter-spacing:.17em; }
body:not([data-region="dark"]) :is(.location-scene,.panel,.stat-panel,.equipment-card,.inventory-card,.catalog-entry,.session-card,.plaza-card,.progress-context,.battle-board) { border:1px solid var(--line); border-radius:var(--ui-radius); background-color:var(--surface); box-shadow:0 10px 30px #0002; }
body:not([data-region="dark"]) :is(.quiet-button,.primary-button,select,input,textarea) { border-radius:8px; }
body:not([data-region="dark"]) :is(input,select,textarea) { background:var(--surface-deep); color:var(--text); border-color:var(--line); }
body:not([data-region="dark"]) :is(button,input,select,textarea):focus-visible { outline:2px solid var(--accent-a); outline-offset:3px; }
body:not([data-region="dark"]) .primary-button { background:var(--accent-a); color:var(--accent-text); border:1px solid var(--accent-a); box-shadow:none; }
body:not([data-region="dark"]) .quiet-button { background:var(--surface); border-color:var(--line); }
body:not([data-region="dark"]) .quiet-button:hover { border-color:var(--accent-a); background:var(--surface-soft); }
body:not([data-region="dark"]) .chat-panel { background:var(--world-pattern),var(--chat); }
body:not([data-region="dark"]) .chat-header { padding:22px 18px; background:var(--surface-deep); }
body:not([data-region="dark"]) .chat-messages article:not(.chat-system-message) { border-radius:var(--ui-radius); background:var(--surface); }
body:not([data-region="dark"]) .chat-messages article.is-mine { background:color-mix(in srgb,var(--accent-a) 12%,var(--surface)); }
body:not([data-region="dark"]) .progress-log { background:var(--world-pattern),var(--surface-deep); border-radius:var(--ui-radius); }
body:not([data-region="dark"]) :is(.progress-command-dock,.progress-battle-dock) { background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 25px #0002; }
body:not([data-region="dark"]) .battle-board { background:var(--world-pattern),var(--surface-deep); }
body:not([data-region="dark"]) .combat-token { background:radial-gradient(circle at 35% 25%,var(--surface-soft),var(--surface-deep)); color:var(--accent-a); border:2px solid var(--accent-a); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-a) 10%,transparent); }
body:not([data-region="dark"]) .battle-card { background:linear-gradient(150deg,var(--surface-soft),var(--surface-deep)); border-color:var(--card-tint,var(--line)); color:var(--text); border-radius:var(--ui-radius); }
body:not([data-region="dark"]) .battle-vfx-stage { background:linear-gradient(145deg,var(--surface),var(--surface-deep)); border-color:var(--accent-a); border-radius:var(--ui-radius); }
body:not([data-region="dark"]) .location-scene { min-height:260px; padding:28px; background:linear-gradient(110deg,var(--surface-deep),var(--scene-main),var(--scene-edge)); }
body:not([data-region="dark"]) .location-scene::after { position:absolute; right:7%; top:14%; width:180px; height:180px; display:grid; place-items:center; color:var(--accent-a); font-size:120px; opacity:.35; z-index:-1; pointer-events:none; }
body[data-region="east"] .location-scene::after { content:'❧'; border:1px solid #cedd8b60; border-radius:50% 50% 8% 8%; font-size:175px; transform:rotate(-12deg); }
body[data-region="east"] :is(.topbar,.chat-header) { background:repeating-linear-gradient(4deg,#bda36b08 0 2px,transparent 3px 12px),#24281c; border-color:#817049; }
body[data-region="east"] .location-scene::before { background:repeating-linear-gradient(86deg,transparent 0 32px,#d7ce9810 33px 35px); }
body[data-region="west"] .location-scene::after { content:'⌁'; border:2px solid #52f3e0; border-right:10px solid #ff66b4; transform:skewY(-8deg); box-shadow:14px 14px 0 #ff66b415; }
body[data-region="west"] .topbar { border-bottom:2px solid #ff66b4; }
body[data-region="west"] :is(.panel,.battle-board,.chat-header) { border-top:2px solid var(--accent-a); }
body[data-region="west"] :is(.quiet-button,.primary-button) { border-radius:0 10px 0 0; }
body[data-region="south"] .location-scene::after { content:'海'; font-family:'Batang',serif; border:1px solid #b9dcd56b; border-radius:50%; }
body[data-region="south"] .topbar { border-bottom:3px double #97c6b5; }
body[data-region="south"] .location-scene { border-bottom:4px double var(--accent-b); }
body[data-region="north"] .location-scene::after { content:'ᛟ'; border:3px double #dec88e; border-radius:50%; outline:1px solid #b7a0ff70; outline-offset:14px; box-shadow:0 0 45px #b7a0ff20; }
body[data-region="north"] .topbar { border-bottom:3px double var(--line); }
body[data-region="north"] :is(.panel,.battle-board) { border-style:double; border-width:3px; }
body[data-region="central"] .location-scene::after { content:''; width:120px; border:5px solid #8dbdff; border-radius:50% 50% 5px 5px; box-shadow:0 0 0 12px #8dbdff10,0 0 50px #9d92ff50,inset 0 0 35px #9d92ff30; }
body[data-region="central"] .location-scene::before { background:linear-gradient(90deg,#8dbdff0d 1px,transparent 1px),linear-gradient(#8dbdff0d 1px,transparent 1px); background-size:40px 40px; }
/* Travel is a data-driven destination grid; adding a region adds a card. */
.travel-dialog { width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--line); border-radius:20px; background:var(--surface-deep); color:var(--text); box-shadow:0 30px 100px #0009; }
.travel-dialog::backdrop { background:#020710ba; backdrop-filter:blur(6px); }
.travel-dialog > header { display:flex; justify-content:space-between; align-items:flex-start; padding:26px 26px 18px; gap:16px; }
.travel-dialog h2 { margin:5px 0 10px; font-size:28px; }.travel-dialog p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
#travel-close { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); font-size:24px; cursor:pointer; }
.travel-search { display:grid; gap:7px; padding:0 26px 18px; font-size:12px; color:var(--muted); }.travel-search input { width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font:inherit; }
.travel-destinations { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 26px 24px; }
.travel-destination { position:relative; display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; text-align:left; min-height:128px; padding:17px 14px 29px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface); cursor:pointer; transition:border-color .15s,transform .15s; }
.travel-destination:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent-a); }.travel-destination[aria-pressed="true"] { border:2px solid var(--accent-a); background:var(--surface-soft); }
.travel-destination:disabled { opacity:.6; cursor:default; }.travel-destination > b { position:absolute; bottom:9px; right:14px; color:var(--accent-a); font-size:11px; }
.travel-art { display:grid; place-items:center; width:62px; height:72px; border:1px solid #ffffff30; border-radius:35px 35px 8px 8px; font-size:40px; background:#ffffff08; }
.travel-copy { display:grid; gap:6px; }.travel-copy small { font-size:9px; letter-spacing:.12em; color:var(--muted); }.travel-copy strong { font-size:18px; }.travel-copy > span { color:var(--muted); font-size:11px; line-height:1.5; }
.travel-destination[data-theme="east"] .travel-art { color:#d6e89b; background:#34432b; border-radius:30px 4px; }
.travel-destination[data-theme="west"] .travel-art { color:#60f4df; background:#272039; border-color:#f16ba8; border-radius:0 12px 0 0; }
.travel-destination[data-theme="south"] .travel-art { color:#9ce0d3; background:#19494d; font-family:'Batang',serif; border-radius:50%; }
.travel-destination[data-theme="north"] .travel-art { color:#d5b5ff; background:#352c50; border:3px double #c8b289; border-radius:50%; }
.travel-destination[data-theme="central"] .travel-art { color:#b1d6ff; background:#22364e; box-shadow:inset 0 0 20px #8dbdff20; }
.travel-destination[data-theme="dark"] .travel-art { color:white; background:black; border-radius:0; }
.travel-dialog > footer { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 26px; border-top:1px solid var(--line); background:var(--surface-deep); }.travel-dialog > footer button { min-height:44px; padding:10px 20px; white-space:nowrap; }.travel-empty { grid-column:1/-1; padding:24px; text-align:center; }
@media(max-width:700px) { body:not([data-region="dark"]) .location-scene { min-height:220px; padding:20px; } body:not([data-region="dark"]) .location-scene::after { right:3%; width:135px; height:135px; font-size:90px; opacity:.22; } .travel-dialog { border-radius:16px; }.travel-dialog > header { padding:20px 18px 14px; }.travel-dialog h2 { font-size:23px; }.travel-search { padding:0 18px 14px; }.travel-destinations { padding:0 18px 18px; gap:9px; }.travel-destination { grid-template-columns:1fr; min-height:175px; padding:12px 12px 30px; }.travel-art { width:44px; height:45px; font-size:27px; }.travel-copy strong { font-size:15px; }.travel-dialog > footer { padding:14px 18px; }.travel-dialog > footer p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .travel-destination { transition:none; } }

/* Material controls v2: paint only; existing layout and hit areas stay intact. */
body[data-region="east"] { --material-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23bdc991%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M155%20120C125%2098%2095%20100%2083%2075S90%2025%2051%203M130%20109C149%2083%20141%2065%20124%2055M96%2096C70%20104%2039%2082%2030%2062M86%2065C106%2063%20114%2035%20110%2017%22%2F%3E%3Cpath%20d%3D%22M126%2094C108%2062%20129%2050%20138%2043C153%2069%20143%2086%20126%2094ZM81%2085C55%2096%2028%2076%2024%2058C57%2053%2074%2064%2081%2085ZM81%2049C70%2020%2089%206%20109%204C116%2030%2096%2046%2081%2049Z%22%2F%3E%3Cpath%20d%3D%22M128%2092L136%2052M79%2083L35%2065M83%2046L105%2012%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body[data-region="west"] { --material-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%2361e8ed%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M160%2018H99L75%2042H17M160%2030H108L80%2058H34M160%2090H110L91%2071H61M160%20105H120L98%2083H77%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2242%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2258%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2261%22%20cy%3D%2271%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Cpath%20stroke%3D%22%23e7ed69%22%20stroke-width%3D%225%22%20d%3D%22M144%2045V73M153%2045V73%22%2F%3E%3Cpath%20fill%3D%22%23e7ed69%22%20d%3D%22M120%20112h7v4h-7zm12%200h7v4h-7zm12%200h7v4h-7z%22%2F%3E%3C%2Fsvg%3E"); }
body[data-region="south"] { --material-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%2355776c%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M5%20101Q35%2080%2066%20101T126%20101T186%20101M-5%20111Q25%2090%2056%20111T116%20111T176%20111M40%2078Q61%2065%2082%2078T124%2078T166%2078M80%2087Q103%2071%20126%2087T172%2087%22%2F%3E%3Cpath%20d%3D%22M95%2060L120%2023L153%2064M114%2036L121%2041L128%2036%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22133%22%20y%3D%2212%22%20width%3D%2218%22%20height%3D%2225%22%20rx%3D%221%22%20stroke%3D%22%23a64d39%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M138%2017h8m-4%200v15m-5-9h10m-9%205h8%22%20stroke%3D%22%23a64d39%22%2F%3E%3C%2Fsvg%3E"); }
body[data-region="north"] { --material-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23c3a575%22%20stroke-width%3D%22.8%22%3E%3Ccircle%20cx%3D%22123%22%20cy%3D%2275%22%20r%3D%2243%22%2F%3E%3Ccircle%20cx%3D%22123%22%20cy%3D%2275%22%20r%3D%2236%22%2F%3E%3Cpath%20d%3D%22M123%2033L159%2096H87ZM123%20117L87%2054H159ZM123%2048V101M112%2059L123%2048L136%2061L123%2074M113%2080L123%2091L134%2079%22%2F%3E%3Cpath%20d%3D%22M72%2024L78%2018L84%2024L78%2030ZM150%2014V28M145%2018L155%2024M61%2065L70%2073L61%2081M76%20105L70%20112M158%20114L153%20107%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22123%22%20cy%3D%2275%22%20r%3D%223%22%20fill%3D%22%23bca1fc%22%2F%3E%3C%2Fsvg%3E"); }
body[data-region="central"] { --material-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20120%22%20fill%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%3E%3Cstop%20stop-color%3D%22%2377ccff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aca1ff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M100%20111V51A29%2029%200%2001158%2051V111M108%20111V51A21%2021%200%2001150%2051V111%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M94%20116H160M123%2048H135M129%2042V54M115%20100H143%22%20stroke%3D%22%2380c4ed%22%2F%3E%3Cpath%20d%3D%22M68%2084H83M74%2078V90M76%20108H85%22%20stroke%3D%22%237396b4%22%2F%3E%3C%2Fsvg%3E"); }
body:not([data-region="dark"]) .nav-item[data-page="lobby"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010L12%203L21%2010M5%209V21H10V15H14V21H19V9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="progress"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204L20%2012L5%2020ZM2%204V20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="status"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021V19A8%208%200%200120%2019V21%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="inventory"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207H20L21%2021H3ZM8%207V5A4%204%200%200116%205V7M8%2012H16M12%2010V15%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="catalog"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205Q7%202%202%204V20Q7%2018%2012%2021Q17%2018%2022%2020V4Q17%202%2012%205V21M5%208H9M15%208H19%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="map"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%205L8%202L16%205L22%202V19L16%2022L8%2019L2%2022ZM8%202V19M16%205V22%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="gacha"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202L15%209L22%2012L15%2015L12%2022L9%2015L2%2012L9%209Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) .nav-item[data-page="base"] > span { font-size:0; height:18px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021V8L7%204L11%208L15%204L21%208V21ZM7%204V1M8%2021V15H16V21%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body:not([data-region="dark"]) {
 --material-face:linear-gradient(130deg,var(--surface-soft),var(--surface));
 --material-control:linear-gradient(180deg,var(--surface-soft),var(--surface-deep));
 --material-edge:var(--line); --material-shape:10px;
 --material-shadow:inset 0 1px #ffffff12,0 4px 9px #0003;
 --material-button-shadow:inset 0 1px #ffffff25,0 2px 0 #0007;
 --material-ornament-opacity:.4;
}
/* All selectors below retain grid, flex, ordering, sizing and spacing rules. */
body:not([data-region="dark"]) :is(.lobby-channel-board,.notice-board,.status-identity-card,.status-card,.status-spec-card,.judgement-card,.equipment-owned,.loadout-section,.catalog-detail,.catalog-categories,.catalog-entry-list,.gacha-panel,.base-skill-admin,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.session-policy-card,.admin-player-picker) {
 background:var(--material-face); border-color:var(--material-edge); border-radius:var(--material-shape); box-shadow:var(--material-shadow);
}
body:not([data-region="dark"]) :is(.channel-card,.status-identity-card,.notice-board,.gacha-panel)::after {
 content:''; display:block; position:absolute; inset:0; width:auto; height:auto; border:0; border-radius:inherit;
 background:var(--material-art) right bottom / 160px 120px no-repeat; opacity:var(--material-ornament-opacity); pointer-events:none; transform:none; box-shadow:none; z-index:-1;
}
body:not([data-region="dark"]) :is(.channel-card,.status-identity-card,.notice-board,.gacha-panel) { position:relative; isolation:isolate; }
body:not([data-region="dark"]) .channel-card > .channel-card-state { position:absolute; }
body:not([data-region="dark"]) .channel-card::before { content:none; }
body:not([data-region="dark"]) .channel-card { background:var(--material-control); border-color:var(--material-edge); border-radius:var(--material-shape); box-shadow:var(--material-button-shadow); }
body:not([data-region="dark"]) .session-entry { border-color:var(--material-edge); border-radius:var(--material-shape); background:var(--surface-deep); }
body:not([data-region="dark"]) .channel-card[aria-pressed="true"] { background:var(--material-control); box-shadow:inset 0 0 0 1px var(--accent-a),inset 0 -3px var(--accent-a),var(--material-button-shadow); }
body:not([data-region="dark"]) :is(.primary-button,.quiet-button,.channel-action,.nav-item,.travel-destination) {
 transition:filter 120ms ease,box-shadow 120ms ease,translate 100ms ease;
}
body:not([data-region="dark"]) :is(.quiet-button,.channel-action,.mobile-menu-toggle,.chat-form button) { background:var(--material-control); border-color:var(--material-edge); border-radius:var(--material-shape); box-shadow:var(--material-button-shadow); }
body:not([data-region="dark"]) .primary-button { background:linear-gradient(165deg,color-mix(in srgb,var(--accent-a) 80%,white),var(--accent-a) 48%,color-mix(in srgb,var(--accent-a) 70%,var(--accent-b))); border-radius:var(--material-shape); box-shadow:var(--material-button-shadow); }
@media(hover:hover) {
 body:not([data-region="dark"]) :is(.primary-button,.quiet-button,.channel-action,.nav-item,.travel-destination):hover:not(:disabled) { filter:brightness(1.14); }
}
body:not([data-region="dark"]) :is(.primary-button,.quiet-button,.channel-action,.nav-item,.travel-destination):active:not(:disabled) { translate:0 1px; box-shadow:inset 0 2px 5px #0006; }
body:not([data-region="dark"]) :is(button,input,textarea,select):focus-visible { outline:2px solid var(--accent-a); outline-offset:3px; }
body:not([data-region="dark"]) :is(input,textarea,select) { background:var(--surface-deep); border-color:var(--material-edge); box-shadow:inset 0 2px 5px #0003; }
body:not([data-region="dark"]) .sidebar .is-current { background:var(--material-control); border-color:var(--accent-a); border-radius:var(--material-shape); box-shadow:inset 0 0 0 1px var(--material-edge),var(--material-button-shadow); }
body:not([data-region="dark"]) :is(.lobby-channel-heading,.chat-header,.progress-console-header) { background:var(--material-face); border-color:var(--material-edge); }
body:not([data-region="dark"]) :is(.progress-command-dock,.progress-battle-dock) { background:var(--material-control); border-color:var(--material-edge); box-shadow:inset 0 1px var(--material-edge),0 -4px 15px #0002; }
body:not([data-region="dark"]) .progress-log { box-shadow:inset 0 0 24px #0003; }
body:not([data-region="dark"]) :is(.inventory-tabs,.gacha-tabs) button { border-radius:var(--material-shape); }
body:not([data-region="dark"]) :is(.inventory-tabs,.gacha-tabs) .is-current { background:var(--material-control); box-shadow:inset 0 -2px var(--accent-a); }
body:not([data-region="dark"]) .travel-destination { background:var(--material-control); border-color:var(--material-edge); border-radius:var(--material-shape); box-shadow:var(--material-button-shadow); }
body:not([data-region="dark"]) .travel-destination[aria-pressed="true"] { border-color:var(--accent-a); }

/* Wood is a carved surface with end grain, recessed leaves and bronze fittings. */
body[data-region="east"] {
 --material-shape:16px 4px 18px 4px; --material-edge:#887044;
 --material-face:repeating-linear-gradient(3deg,#d8a66508 0 1px,transparent 1px 6px),linear-gradient(105deg,#3b3022,#25281d 44%,#343023);
 --material-control:repeating-radial-gradient(ellipse at -20% 180%,transparent 0 9px,#deba7310 10px 11px,transparent 12px 18px),linear-gradient(100deg,#53402a,#342b1e 60%,#403724);
 --material-shadow:inset 0 0 0 1px #bda16445,inset 0 0 0 5px #100f0b35,0 5px 12px #0003;
 --material-button-shadow:inset 0 1px #d9bb7770,inset 1px 0 #d9bb7730,inset 0 -3px #1b1c13,0 2px 3px #0005;
}
body[data-region="east"] .sidebar { background:linear-gradient(90deg,#1a2118,#21291c 88%,#302c1c); }
body[data-region="east"] .sidebar .is-current { border-radius:22px 3px 22px 3px; }
body[data-region="east"] .channel-card strong { text-shadow:0 2px #171c12; }
body[data-region="east"] :is(.channel-card-kicker,.section-kicker,.eyebrow) { color:#ced4a0; }
body[data-region="east"] .status-track { box-shadow:inset 0 2px 4px #0008,0 1px #b9a46850; }

/* Machined metal, not a purple card: chamfered highlights and circuit engraving. */
body[data-region="west"] {
 --page:#0d1117; --surface:#1c252e; --surface-soft:#293540; --surface-deep:#10181f; --chat:#141c24; --text:#e5edf1; --muted:#a4b4be; --accent-a:#d9ef6d; --accent-b:#65dfea; --accent-text:#131a20;
 --material-shape:2px 16px 2px 2px; --material-edge:#53646f;
 --material-face:linear-gradient(135deg,#91a5af20 0 1px,transparent 1px) 0 0 / 7px 7px,linear-gradient(130deg,#29343e,#171f28 65%);
 --material-control:linear-gradient(135deg,#40515d 0 8px,#222f39 8px 50%,#1a232d 100%);
 --material-shadow:inset 0 1px #a8d6e940,inset 0 -1px #02070a,0 4px 10px #0005;
 --material-button-shadow:inset 0 1px #b9d4df45,inset 0 -2px #040b10,2px 2px #0004;
}
body[data-region="west"] :is(.topbar,.chat-header) { background:linear-gradient(100deg,#26343e,#121b23); border-color:#6f858e; }
body[data-region="west"] .sidebar { background:linear-gradient(90deg,#131c24,#1c2730); }
body[data-region="west"] .sidebar .is-current { box-shadow:inset 0 -2px #d9ef6d,inset -5px 0 #d9ef6d; color:#edff92; }
body[data-region="west"] :is(.channel-card-kicker,.eyebrow,.section-kicker) { color:#77dfe6; font-family:var(--mono); }
body[data-region="west"] .channel-card-state { border-radius:2px; color:#d9ef6d; background:#111d23; }
body[data-region="west"] .status-track { border-radius:0; background:repeating-linear-gradient(90deg,#0d151b 0 9px,#52616d 10px 11px); }
body[data-region="west"] .status-track > span { border-radius:0; background:repeating-linear-gradient(90deg,#d9ef6d 0 8px,#9da94f 9px 10px); }

/* Ink on sea-worn paper, with cinnabar seals and dark lacquer controls. */
body[data-region="south"] {
 --material-shape:3px 2px 12px 2px; --material-edge:#8b9378;
 --material-face:repeating-linear-gradient(0deg,#8d78460a 0 1px,transparent 1px 4px),linear-gradient(100deg,#c7c5a3,#e1ddbf 5%,#d7d5b7 96%,#b9bd9d);
 --material-control:linear-gradient(155deg,#315650,#183b38 65%,#14302e);
 --material-shadow:inset 0 1px #f3ecd2,inset 3px 0 #77846c66,inset -3px 0 #77846c66,0 4px 9px #0003;
 --material-button-shadow:inset 0 1px #9fb6a980,inset 0 -2px #082521,0 2px 3px #0004;
 --material-ornament-opacity:.55;
}
body[data-region="south"] :is(.lobby-channel-board,.notice-board,.status-identity-card,.status-card,.status-spec-card,.judgement-card,.equipment-owned,.loadout-section,.catalog-detail,.catalog-categories,.catalog-entry-list,.gacha-panel,.base-skill-admin,.combat-data-form,.combat-data-list,.enemy-form,.catalog-form,.emote-form,.session-policy-card,.admin-player-picker,.chat-header,.progress-console-header) {
 --text:#253d37; --muted:#526258; --accent-a:#285c50; --line:#99a08a; --surface:#d6d2b6; --surface-soft:#ebe5cb; --surface-deep:#c7c7a8; color:var(--text);
}
body[data-region="south"] :is(.channel-card,.session-entry,.quiet-button,.channel-action,.progress-command-dock,.progress-battle-dock,.travel-destination) { --text:#f1edd7; --muted:#b6cbbd; --accent-a:#a1d1be; --line:#638777; --surface:#183438; --surface-soft:#224448; --surface-deep:#102a2e; color:var(--text); }
body[data-region="south"] .primary-button { background:linear-gradient(155deg,#356356,#1d483d); color:#f1edd7; border-color:#77917b; }
body[data-region="south"] :is(input,textarea,select) { background:#15352f; color:#f1edd7; }
body[data-region="south"] :is(input,textarea)::placeholder { color:#b6cbbd; }
body[data-region="south"] .sidebar .is-current { color:#e3e6c9; border-radius:2px 18px 2px 2px; box-shadow:inset -4px 0 #a55441,inset 0 1px #bcc7a850; }
body[data-region="south"] .channel-card-state { border-radius:2px; border-color:#b5785c; color:#f1d9c0; background:#713e32; box-shadow:inset 0 0 0 2px #38291e; }
body[data-region="south"] .channel-card::after { filter:brightness(2); opacity:.35; }
body[data-region="south"] .status-track > span { background:linear-gradient(90deg,#2d6858,#628971); }

/* Runic etching: concentric sigils, brass brackets and polished stone. */
body[data-region="north"] {
 --material-shape:18px 3px 18px 3px; --material-edge:#887756;
 --material-face:radial-gradient(ellipse at 70% 0,#54476355,transparent 65%),linear-gradient(120deg,#2b263c,#171725);
 --material-control:linear-gradient(145deg,#41364f,#252238 50%,#31283e);
 --material-shadow:inset 0 0 0 1px #ccb58320,inset 0 0 0 4px #11101c80,0 4px 12px #0004;
 --material-button-shadow:inset 0 1px #d2be9260,inset 0 -2px #0c0b18,0 2px 5px #0004;
 --material-ornament-opacity:.55;
}
body[data-region="north"] .sidebar .is-current { border-radius:18px 3px; box-shadow:inset 0 0 0 1px #bda477,inset 0 0 16px #b19ae529; }
body[data-region="north"] :is(.channel-card-state,.location-chip) { border-radius:3px 12px 3px 12px; border-color:#b9a16f; }
body[data-region="north"] .status-track { box-shadow:0 0 0 1px #ae925550,inset 0 2px #0008; }
body[data-region="north"] .status-track > span { background:linear-gradient(90deg,#7c6db3,#c6b6ed); box-shadow:0 0 8px #b6a3e570; }

/* Laminated glass: restrained chrome and the lit rim of a gate. */
body[data-region="central"] {
 --material-shape:12px; --material-edge:#557185;
 --material-face:linear-gradient(130deg,#7799b02b,transparent 45%),linear-gradient(165deg,#253b4a,#152632);
 --material-control:linear-gradient(165deg,#3a5365,#213645 65%,#1c2d3a);
 --material-shadow:inset 0 1px #e0f4ff35,inset 1px 0 #c7e6ff10,0 5px 15px #0003;
 --material-button-shadow:inset 0 1px #cbeaff45,0 2px 5px #0004;
}
body[data-region="central"] .sidebar .is-current { background:linear-gradient(110deg,#3a627d,#243e53); box-shadow:inset 0 1px #a9d9fb60,inset -3px 0 #91d8ff; }
body[data-region="central"] .channel-card[aria-pressed="true"] { box-shadow:inset 0 0 0 1px #a2dcff,inset 0 -3px #81cafa,0 0 12px #7eb8ff18; }
body[data-region="central"] :is(.channel-card-state,.location-chip) { background:#162d3a; border-color:#6fa4bb; }
body[data-region="central"] .status-track > span { background:linear-gradient(90deg,#76b5d9,#b8e4f8); box-shadow:0 0 10px #73bcff30; }
@media(prefers-reduced-motion:reduce) {
 body:not([data-region="dark"]) :is(.primary-button,.quiet-button,.channel-action,.nav-item,.travel-destination) { transition:none; }
 body:not([data-region="dark"]) :is(.primary-button,.quiet-button,.channel-action,.nav-item,.travel-destination):active { translate:none; }
}

.admin-reconnect-actions { display:flex; flex-wrap:wrap; gap:8px; }.admin-reconnect-actions button { min-height:44px; }