/* Shared presentation tokens come from game-ui.css. Games own layout and state. */
.fg-shell { color:var(--ink); font-family:var(--body); background:var(--bg); }
.fg-window { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.fg-lobby { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.fg-loading { color:var(--ink); background:var(--bg); font-family:var(--body); }
.fg-loading [role="status"], .fg-loading [role="alert"] { color:var(--muted); letter-spacing:normal; line-height:1.5; }
.fg-loading .boot-box { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.fg-loading progress { accent-color:var(--accent); }
.fg-dock { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.fg-dock-button, .fg-dock > button { min-height:44px; color:var(--ink); background:var(--hi); border:1px solid var(--line); border-radius:6px; font:600 12px var(--body); cursor:pointer; }
.fg-dock-button:hover, .fg-dock > button:hover, .fg-dock-button[aria-pressed="true"], .fg-dock > button[aria-pressed="true"] { border-color:var(--accent); }
.fg-dock-button:focus-visible, .fg-dock > button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* One centered card; preserve all game-owned loading nodes and controls. */
.fg-loading { position:absolute; inset:0; z-index:60; display:grid; place-items:center; padding:16px; text-align:center; letter-spacing:normal; }
.fg-loading[hidden] { display:none !important; }
.fg-loading-card { width:min(26rem,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:clamp(16px,4vw,26px); display:grid; justify-items:center; gap:10px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.fg-loading-card::before { content:''; width:20px; height:20px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:fg-load-spin 1.1s linear infinite; }
.fg-loading.has-error .fg-loading-card::before { animation:none; border-color:var(--accent); }
.fg-loading-card .loading-mark { display:none; }
.fg-loading-card h1, .fg-loading-card strong { margin:0; font:700 18px/1.3 var(--body); color:var(--ink); letter-spacing:.04em; }
.fg-loading-card p { margin:0; }
.fg-loading-card progress { width:100%; }
@keyframes fg-load-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .fg-loading-card::before { animation:none; } }
/* Consistent bottom dock with bounded horizontal overflow on narrow screens. */
.fg-dock { position:fixed; z-index:5; inset:auto max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); transform:none; display:flex; align-items:stretch; justify-content:flex-start; gap:3px; padding:4px; overflow-x:auto; max-width:48rem; margin-inline:auto; }
.fg-dock[hidden] { display:none !important; }
.fg-dock > button { flex:1 0 auto; min-width:44px; padding:4px 8px; }
.fg-survivor #hotbar { bottom:calc(3.8rem + env(safe-area-inset-bottom)); }
@media (pointer:coarse), (max-width:600px) {
 .fg-survivor #touch-pad, .fg-survivor .touch-dash { bottom:calc(4rem + env(safe-area-inset-bottom)); }
 .fg-survivor #hotbar { bottom:calc(9.4rem + env(safe-area-inset-bottom)); }
}
.fg-loading-card img { display:block; max-width:min(12rem,100%); max-height:5rem; width:auto; height:auto; object-fit:contain; }

/* Tactics workspace is below a header: cover the entire viewport during boot. */
.loading-screen.fg-loading { position:fixed; inset:0; height:auto; }

.fg-dock > button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; line-height:1.1; }
.fg-dock-icon, .fg-dock-icon svg { display:block; width:16px; height:16px; flex:none; }

/* The same workspace controls and windows in every standalone fan game. */
.fg-shell { --fg-gutter:clamp(16px,2.5vw,28px); }
.fg-shell :is(button,.game-site-link) { box-sizing:border-box; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:7px; background:var(--hi); color:var(--ink); font:600 13px/1.4 var(--body); box-shadow:none; text-decoration:none; }
.fg-shell button { cursor:pointer; }
.fg-shell :is(button,.game-site-link):hover:not(:disabled) { background:#2a3847; border-color:#627e96; color:var(--ink); }
.fg-shell button:disabled { opacity:.5; cursor:default; }
.fg-shell button:is(.primary,[type=submit]), .fg-shell #new-journey { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.fg-shell button:is(.primary,[type=submit]):hover:not(:disabled), .fg-shell #new-journey:hover:not(:disabled) { background:#c2d9eb; color:var(--bg); }
.fg-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { box-sizing:border-box; min-width:0; max-width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); font:400 16px/1.4 var(--body); }
.fg-shell :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.fg-shell :is(dialog#panel,#modal .window,dialog#game-dialog) { box-sizing:border-box; width:min(1040px,calc(100vw - 40px)); max-width:calc(100vw - 40px); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); box-shadow:0 24px 80px #0009; outline:0; }
.fg-shell :is(dialog#panel[open],#modal:not([hidden]) .window) { display:flex; flex-direction:column; overflow:hidden; }
.fg-shell :is(#panel>header,.window>header,.dialog-heading) { flex:none; position:relative; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); border-radius:0; background:var(--panel); }
.fg-shell :is(#panel>header,.window>header) { display:flex; align-items:center; justify-content:space-between; }
.fg-shell :is(#panel>header,.window>header)>div:first-child { min-width:0; }
.fg-shell :is(#panel-title,#dialog-title) { margin:0; color:var(--ink); font:650 18px/1.35 var(--body); letter-spacing:-.02em; overflow-wrap:anywhere; }
.fg-shell :is(#panel-kicker,.window>header .eyebrow) { display:none; }
.fg-shell :is(#panel-body,.window-body) { flex:1; min-height:0; min-width:0; padding:var(--fg-gutter); overflow:auto; overscroll-behavior:contain; color:var(--ink); font-size:14px; line-height:1.55; }
.fg-shell :is(#panel-close,.window .close,[data-do=close],.fg-help-button) { flex:none; width:44px; min-width:44px; padding:0; background:transparent; color:var(--muted); font-size:22px; }
.fg-shell :is(.panel-header-actions,.fg-header-actions) { display:flex; align-items:center; gap:6px; }
.fg-shell :is(dialog#panel,dialog#game-dialog)::backdrop { background:#05090fc9; }
.fg-shell :is(.entry,.card,.company-card,.dex-card,.zone-card,.lobby-save,.lobby-profile,.journey,.shop-row,.quest-row) { min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--bg); box-shadow:none; }
.fg-shell :is(.actions,.lobby-actions,.form-actions,.dialog-actions) { gap:8px; }
.fg-shell :is(.grid,.cards,.save-grid,.starter-grid,.move-grid) { gap:12px; }
.fg-shell :is(.muted,.subtle,.small) { color:var(--muted); }
.fg-shell :is(.fg-lobby-content,.landing-copy) h1 { margin:0; font:700 clamp(24px,2.6vw,34px)/1.15 var(--body); letter-spacing:-.035em; text-wrap:balance; }
.fg-shell .fg-lobby-subtitle { display:block; margin-top:6px; color:var(--muted); font-size:.6em; font-weight:500; letter-spacing:0; line-height:1.4; }

/* A spacious desktop welcome, with its actions kept together on phones. */
.fg-shell .lobby { padding:24px; }
.fg-shell .lobby .lobby-card { width:min(1040px,100%); padding:0; overflow:visible; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 24px 80px #0009; }
.fg-shell .fg-lobby-layout, .tactics-game .landing { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); min-width:0; }
.fg-shell .fg-lobby-art { position:relative; min-width:0; min-height:280px; margin:0; overflow:hidden; border-radius:13px 0 0 13px; background:var(--bg); }
.fg-shell .fg-lobby-art :is(img,picture) { display:block; width:100%; height:100%; margin:0; border:0; border-radius:0; }
.fg-shell .fg-lobby-art img { position:absolute; inset:0; object-fit:cover; object-position:center; }
.fg-shell .fg-lobby-content, .tactics-game .landing-copy { position:relative; min-width:0; padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:18px; background:var(--panel); border-radius:0 13px 13px 0; }
.fg-shell .fg-lobby-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fg-shell .fg-lobby-heading .logo { display:block; width:auto; height:auto; max-height:52px; max-width:160px; object-fit:contain; }
.fg-shell .fg-lobby-eyebrow { margin:0; color:var(--muted); font-size:12px; font-weight:500; }
.fg-shell .fg-lobby-description { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.fg-shell .fg-lobby-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fg-shell .fg-lobby-actions>button:first-child { flex:1 1 auto; }
.fg-shell .fg-lobby-footer { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:0; padding-top:14px; border-top:1px solid var(--line); }
.fg-shell .fg-lobby-footer a { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:transparent; color:var(--muted); font:500 12px/1.4 var(--body); text-decoration:none; }
.fg-shell .fg-lobby-footer a:hover { color:var(--ink); }
.fg-shell .fg-lobby-content :is(#journeys,.list,.save-grid):empty { display:none; }
.fg-shell .fg-lobby-content .save-grid { grid-template-columns:minmax(0,1fr); }
.fg-shell .fg-lobby-content :is(.journey,.lobby-save,.lobby-profile) { margin:0; padding:14px; }
.fg-shell .fg-lobby-content :is(.journey,.lobby-save,.lobby-profile)+:is(.journey,.lobby-save,.lobby-profile) { margin-top:10px; }
.fg-shell .fg-lobby-content :is(h3,p) { overflow-wrap:anywhere; }
.fg-shell .fg-lobby-content .empty { margin:0; padding:12px 0; color:var(--muted); font-size:13px; }
.fg-shell #load-status { color:var(--muted); font-size:13px; }
.fg-shell #panel-body:has(>.fg-lobby-layout) { padding:0; }
.fg-shell #panel-body>.fg-lobby-layout { min-height:360px; }
.fg-shell .fg-help-button { height:44px; font-size:18px; }
.fg-shell .fg-lobby-help { position:relative; flex:none; margin:0; }
.fg-shell .fg-lobby-help>summary { display:grid; place-items:center; box-sizing:border-box; width:44px; min-height:44px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:17px; cursor:pointer; list-style:none; }
.fg-shell .fg-lobby-help>summary::-webkit-details-marker { display:none; }
.fg-shell .fg-lobby-help[open]>div { position:absolute; z-index:8; top:calc(100% + 8px); right:0; width:min(330px,calc(100vw - 64px)); padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--hi); box-shadow:var(--shadow); color:var(--muted); font-size:13px; line-height:1.6; }
.fg-shell .fg-lobby-help p { margin:0; }
.fg-shell .fg-lobby-help p+p { margin-top:10px; }
.fg-shell .fg-lobby-help summary:focus-visible { outline-offset:3px; }
.fg-shell .fg-lobby-help a { color:var(--accent); }

/* Account and cloud saves are one quiet row; authentication stays optional. */
.fg-shell .project-save-manager { gap:8px; margin:0; padding:16px 0 0; border-top:1px solid var(--line); }
.fg-shell .project-save-manager>p { flex:1 1 150px; display:flex; align-items:center; gap:6px; margin:0; font-size:12px; }
.fg-shell .project-save-manager>p strong { overflow-wrap:anywhere; }
.fg-shell .project-save-manager>button { border-color:var(--line); padding:9px 11px; font-size:12px; }
.fg-shell .project-save-manager>[data-refresh] { width:44px; padding:0; }
.fg-shell .project-save-manager>[data-refresh] .game-icon { width:16px; height:16px; margin:0; }
.fg-shell .project-save-manager>[role=status] { flex-basis:100%; color:var(--muted); font-size:12px; }
.fg-shell .project-save-manager>[role=status]:empty { display:none; }
.fg-shell .project-save-choice { max-width:100%; font-size:12px; }
.fg-shell :is(#panel-body,.window-body) .project-save-choice { display:flex; align-items:center; gap:8px; min-height:44px; margin:0; }
.fg-shell .panel-body form .grid:has(>label.entry) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.fg-shell .panel-body form .grid>label.entry { display:flex; flex-direction:column; align-items:center; text-align:center; padding:16px; }
.fg-shell .panel-body label.entry:has(input:checked) { border-color:var(--accent); background:var(--hi); }
.fg-shell .project-save-manager .project-save-cloud-list { gap:8px; }
.fg-shell .project-save-cloud-row { padding:10px; background:var(--bg); border-color:var(--line); }
.fg-shell :is(.project-backup-dialog,.project-save-dialog) { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 24px 80px #0009; font-family:var(--body); }
.fg-shell .project-backup-dialog h2 { font-size:24px; letter-spacing:-.025em; }
.fg-shell .project-backup-dialog p { line-height:1.6; }
.fg-shell .project-backup-dialog input { min-height:48px; }
.fg-shell .project-backup-dialog button { min-height:44px; margin:6px 6px 0 0; }
.fg-shell .project-backup-dialog button[value=login] { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.fg-shell .project-backup-dialog form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fg-shell .project-backup-dialog form>:is(label,p) { grid-column:1/-1; margin:4px 0; }
.fg-shell .project-backup-dialog form>button { margin:0; padding-inline:8px; }
.fg-shell .project-backup-dialog button[value=register] { background:var(--hi); color:var(--ink); border-color:var(--line); }
.fg-shell .project-backup-dialog button[data-cancel] { grid-column:1/-1; border-color:transparent; background:transparent; color:var(--muted); }
.fg-shell :is(.project-backup-dialog,.project-save-dialog) .error:empty { display:none; }

/* Tactical campaigns share the welcome proportions and neutral site palette. */
.tactics-game.fg-shell { --surface:var(--panel); --surface-raised:var(--hi); --border:var(--line); --text:var(--ink); --accent:#a4c3dd; }
.tactics-game .landing { height:100%; overflow:auto; }
.tactics-game .landing-art { min-height:0; background:var(--bg); }
.tactics-game .landing-art img { object-fit:cover; }
.tactics-game .landing-copy { border-radius:0; overflow:visible; gap:16px; padding:clamp(22px,4vw,56px); }
.tactics-game .landing-copy h1 { font-size:clamp(26px,3vw,40px); }
.tactics-game .landing-copy h1 span { margin-top:6px; color:var(--muted); font-size:.6em; line-height:1.4; }
.tactics-game .landing-copy p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.tactics-game .landing-copy .eyebrow { font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; }
.tactics-game .landing-copy form { gap:12px; margin:0; }
.tactics-game .landing-copy small { color:var(--muted); font-size:12px; line-height:1.5; }
.tactics-game .landing-copy #landing-backups { width:100%; }
.tactics-game .game-header { border-bottom-color:var(--line); background:var(--panel); }
.tactics-game .header-actions button { width:44px; min-width:44px; padding:0; }
.tactics-game .header-actions #help { font-size:18px; }
.fg-shell .fg-dock>button { padding:4px 8px; border-color:transparent; background:transparent; color:var(--muted); font:600 12px/1.1 var(--body); }
.fg-shell .fg-dock>button:hover, .fg-shell .fg-dock>button[aria-pressed=true] { border-color:var(--line); background:var(--hi); color:var(--ink); }

@media(max-width:700px) {
 .fg-shell { --fg-gutter:16px; }
 .fg-shell :is(dialog#panel,#modal .window,dialog#game-dialog) { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:12px; }
 .fg-shell :is(#panel>header,.window>header,.dialog-heading) { padding:10px 12px; }
 .fg-shell :is(#panel-title,#dialog-title) { font-size:17px; }
 .fg-shell .lobby { padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
 .fg-shell .fg-lobby-layout, .tactics-game .landing { grid-template-columns:minmax(0,1fr); }
 .fg-shell .fg-lobby-art { min-height:0; height:clamp(96px,20dvh,156px); border-radius:13px 13px 0 0; }
 .fg-shell .fg-lobby-content, .tactics-game .landing-copy { padding:20px; gap:14px; border-radius:0 0 13px 13px; }
 .fg-shell .fg-lobby-heading .logo { max-height:40px; max-width:130px; }
 .fg-shell .fg-lobby-content h1 { font-size:25px; }
 .fg-shell #panel-body>.fg-lobby-layout { min-height:0; }
 .fg-shell .fg-lobby-content :is(.lobby-profile,.lobby-save,.journey) { padding:12px; }
 .fg-shell .fg-lobby-content .lobby-profile { display:block; }
 .fg-shell .panel-body form .grid:has(>label.entry) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fg-shell .fg-lobby-actions>button { flex:1 1 auto; }
 .fg-shell .fg-lobby-footer { padding-top:8px; }
 .fg-shell :is(.project-backup-dialog,.project-save-dialog) { padding:22px; }
 .tactics-game .landing { display:flex; flex-direction:column; }
 .tactics-game .landing-art { flex:none; min-height:0; height:clamp(96px,18dvh,150px); }
 .tactics-game .landing-copy { flex:1 0 auto; padding:20px; border-radius:0; gap:14px; }
 .tactics-game .landing-copy h1 { font-size:27px; }
 .fg-shell .fg-dock>button { padding:5px 6px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .fg-shell .fg-lobby-layout, .tactics-game .landing { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
 .fg-shell .fg-lobby-art, .tactics-game .landing-art { height:auto; min-height:240px; }
 .fg-shell .fg-lobby-content, .tactics-game .landing-copy { padding:18px; gap:12px; }
}