/* Shared game surfaces: cream keys on an evergreen frame, without a gold rim. */
:root {
  --game-ink:#163b2e;
  --game-panel:#183f32;
  --game-panel-edge:#102d24;
  --game-cream:#fff9e8;
  --game-cream-shade:#d8c48c;
  --game-muted:#657268;
  --game-accent:#d77840;
  --game-gold:#f4bf43;
  --game-key-shadow:inset 0 1px 0 #fffefa,inset 0 -4px 0 var(--game-cream-shade),0 2px 0 var(--game-panel-edge);
  --game-header-height:64px;
  --ui-surface:var(--game-cream);
  --ui-canvas:#f1ead7;
  --ui-soft:#f6efd9;
  --ui-border:#b6bda4;
  --ui-text:var(--game-ink);
  --ui-muted:#56664f;
  --ui-accent:#a74e29;
  --ui-accent-soft:#f5d3ab;
  --ui-accent-border:#9c502c;
  --ui-accent-text:#66391f;
}
/* Masks use the original, locally served Phosphor SVG assets. */
.game-icon { display:inline-block; flex:none; width:20px; height:20px; background:currentColor; mask:var(--game-icon) center/contain no-repeat; pointer-events:none; }
.game-icon-plus { --game-icon:url('/icons/phosphor/plus-bold.svg'); }
.game-icon-minus { --game-icon:url('/icons/phosphor/minus-bold.svg'); }
.game-icon-menu { --game-icon:url('/icons/phosphor/list-bold.svg'); }
.game-icon-energy { --game-icon:url('/icons/phosphor/lightning-fill.svg'); }
.game-icon-flag { --game-icon:url('/icons/phosphor/flag-fill.svg'); }
.game-icon-note { --game-icon:url('/icons/phosphor/note-fill.svg'); }
.game-icon-chevron { --game-icon:url('/icons/phosphor/caret-right-bold.svg'); }
.game-icon-pencil { --game-icon:url('/icons/phosphor/pencil-simple-fill.svg'); }
.game-icon-help { --game-icon:url('/icons/circle-question-mark.svg'); }
.game-icon-settings { --game-icon:url('/icons/settings.svg'); }
.game-icon-pin { --game-icon:url('/icons/phosphor/map-pin-fill.svg'); }
.game-icon-cube { --game-icon:url('/icons/phosphor/cube-bold.svg'); }
.game-icon-undo { --game-icon:url('/icons/phosphor/arrow-u-up-left-fill.svg'); }

.header { background:var(--game-panel); border-bottom:2px solid var(--game-panel-edge); box-shadow:inset 0 -1px 0 #42614b; color:var(--game-cream); }
html:not([data-mobile-shell="true"]) .header { height:var(--game-header-height); }
html:not([data-mobile-shell="true"]) body > main { height:calc(100dvh - var(--game-header-height)); }
.header .brand h1 { color:var(--game-cream); font-weight:700; }
.header .brand img { border-radius:10px; box-shadow:0 2px 0 #0c2b22; }
#random-region .random-region-icon { font:22px/1 sans-serif; }
#random-region .random-region-label { font:600 14px/1.2 var(--font-ui); white-space:nowrap; }
.header .connection { color:#d0dbc4; }
.header #header-profile { color:var(--game-cream); border-color:#51715b; background:#244a3a; }
.header #header-nickname { color:var(--game-cream); }
.header-actions :is(#settings-open,#admin-link,#help-open) { border:2px solid var(--game-panel-edge); background:var(--game-cream); box-shadow:var(--game-key-shadow); border-radius:9px; }
.header #account-open { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px; padding:7px 10px; border:2px solid var(--game-panel-edge); border-radius:10px; background:var(--game-gold); color:#22371d; box-shadow:inset 0 1px 0 #fff0a0,inset 0 -3px 0 #c09228,0 2px 0 #102d24; }
.header #account-open strong { color:inherit; font:700 15px/1.2 var(--font-game); white-space:nowrap; }
.header #account-open .game-icon { width:19px; height:23px; color:inherit; }
.header #account-open:not([data-authenticated="true"]) .game-icon { display:none; }
.header #energy-refill { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

body[data-world-kind="island"] .world-stage { background:#e5ebdb; }
body[data-world-kind="island"] .world-stage::before { display:none; }
.world-heading h2 { color:var(--game-ink); text-shadow:0 1px 0 #fff7d975; }
.world-links > button, .world-controls button, .view-rotation button, #view-mode {
  border:2px solid var(--game-panel-edge); border-radius:9px; background:var(--game-cream); color:var(--game-ink); box-shadow:var(--game-key-shadow); font-weight:600;
}
.world-links > button { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.world-links .game-icon { width:17px; height:19px; }
.world-links #markers-open b { padding-left:0; }
.world-controls button { display:flex; align-items:center; justify-content:center; }
.world-controls .game-icon { width:23px; height:23px; }
html:not([data-mobile-shell="true"]) .map-view-controls { padding:6px; gap:6px; border:2px solid var(--game-panel-edge); border-radius:13px; background:var(--game-panel); box-shadow:inset 0 1px 0 #5b7861,0 3px 0 #0e2a2180; }
html:not([data-mobile-shell="true"]) .map-view-controls .world-controls { gap:4px; border-radius:0; background:none; overflow:visible; }
html:not([data-mobile-shell="true"]) .map-view-controls .world-controls button { border:1px solid var(--game-panel-edge); background:var(--game-cream); color:var(--game-ink); }
html:not([data-mobile-shell="true"]) .map-view-controls .world-controls button + button { border-left:1px solid var(--game-panel-edge); }
html:not([data-mobile-shell="true"]) #view-options .view-rotation { gap:4px; background:none; overflow:visible; }
html:not([data-mobile-shell="true"]) #view-options .view-rotation button,
html:not([data-mobile-shell="true"]) #view-options #view-mode { background:var(--game-cream); border:1px solid var(--game-panel-edge); box-shadow:var(--game-key-shadow); }
.world-links > button[aria-expanded="true"], #view-mode[aria-pressed="true"] { background:var(--ui-accent-soft); color:var(--ui-accent-text); box-shadow:inset 0 2px 0 #ad673733; }
.map-caption, .tile-detail { color:var(--game-ink); text-shadow:0 1px 1px #fff9e8; }

#selection-panel,
body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel {
  padding:10px; border:2px solid var(--game-panel-edge); border-radius:16px; background:var(--game-panel); color:var(--game-cream);
  box-shadow:inset 0 1px 0 #64866a,0 3px 0 #0b291f85;
}
#selection-panel #edit-mode-status { color:var(--game-cream); font-size:13px; line-height:1.4; margin:0 3px 7px; }
#selection-panel .selection-bar, #selection-panel .edit-secondary { border-color:#55715b; }
#selection-panel .selection-info strong, #selection-panel #selection-preview { color:var(--game-cream); }
#selection-panel #selection-editor-name { color:#f3ddb0; }
#selection-panel #selection-editor-detail, #selection-panel #selection-editor-empty { color:#d0d9c5; }
#selection-panel .toolbar, #selection-panel .edit-actions { gap:6px; }
#selection-panel .tool, #selection-panel .tool.active, #selection-panel #undo {
  min-height:62px; padding:5px 5px 8px; border:2px solid var(--game-panel-edge); border-radius:11px;
  background:var(--game-cream); color:var(--game-ink); box-shadow:var(--game-key-shadow);
  font-family:var(--font-game); font-size:15px; font-weight:700; gap:3px;
}
#selection-panel .tool .game-tool-art { display:block; flex:none; width:32px; height:32px; object-fit:contain; pointer-events:none; }
#selection-panel .tool kbd { color:var(--game-muted); background:#fffdf5; border-color:#c6c6ab; }
#selection-panel .tool[aria-pressed="true"] { background:#f4bd82; color:#59311a; border-color:#743e23; box-shadow:inset 0 2px 0 #b9754238,0 1px 0 #0c2b22; }
#selection-panel .tool[aria-pressed="true"]::after { content:""; position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%; background:#873e1e; }
#selection-panel .tool { position:relative; }
#selection-panel #recent-work { flex-basis:62px; }
#selection-panel #undo { gap:4px; font-size:12px; }
#selection-panel #undo .game-icon { width:31px; height:31px; }
#selection-panel #undo:disabled, #selection-panel #undo[aria-disabled="true"] { opacity:1; color:#82866f; background:#dcd9c7; box-shadow:inset 0 -2px 0 #bfc2aa; border-color:#254638; }
#selection-panel :is(#inventory-open,#material-pick,#scope-toggle,#edit-more,#edit-close,#edit-back,#line-reset),
#selection-panel .brush-sizes button, #selection-panel .selection-options > button {
  border:1px solid var(--game-panel-edge); background:var(--game-cream); color:var(--game-ink); box-shadow:inset 0 -2px 0 var(--game-cream-shade); border-radius:8px;
}
#selection-panel #scope-panel, #selection-panel #edit-extras { border:2px solid var(--game-panel-edge); background:var(--game-cream); color:var(--game-ink); box-shadow:0 3px 0 #102d2440; }
#selection-panel .brush-sizes button[aria-pressed="true"], #selection-panel #scope-toggle[aria-expanded="true"], #selection-panel #edit-more[aria-expanded="true"],
body[data-material-sampling="true"] #selection-panel #material-pick, #selection-panel #material-pick[aria-pressed="true"] { background:var(--ui-accent-soft); color:var(--ui-accent-text); border-color:var(--ui-accent-border); box-shadow:inset 0 2px 0 #ad673733; }
#selection-panel #scope-panel .brush-sizes small, #selection-panel #brush-summary { color:#526449; }
#selection-panel #line-panel { border-color:#55715b; }
#selection-panel #line-apply { border:1px solid var(--game-panel-edge); box-shadow:inset 0 -2px 0 #823e25; }
#selection-panel #line-apply:disabled { background:#dcd9c7; color:#65705b; box-shadow:none; }
body[data-edit-mode="look"] #selection-panel #edit-close { color:var(--game-cream); background:transparent; box-shadow:none; }
#selection-panel .edit-mode-header { display:flex; align-items:center; justify-content:space-between; gap:12px; grid-column:1/-1; min-width:0; margin-bottom:6px; }
#selection-panel .edit-mode-header #edit-mode-status { flex:1; min-width:0; margin:0; }
body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"],[data-material-sampling="true"]) #selection-panel .edit-mode-header #edit-close {
  position:static; display:flex; flex:0 0 auto; flex-direction:row; gap:6px; width:auto; height:44px; min-width:96px; margin:0 0 0 auto; padding:8px 12px;
  border:2px solid #703b26; border-radius:9px; background:#f4bd82; color:#482915; box-shadow:inset 0 1px 0 #ffdeaf,inset 0 -3px 0 #cd8a52,0 2px 0 #102d24;
  font:700 13px/1.3 var(--font-ui);
}
body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"],[data-material-sampling="true"]) #selection-panel .edit-mode-header .edit-close-icon { display:block; font-size:21px; line-height:1; }
#selection-panel .edit-mode-header #edit-close-label { white-space:nowrap; }
#selection-panel .edit-mode-header #edit-close:disabled { opacity:.55; box-shadow:none; }
#selection-panel .edit-mode-header #edit-close:not(:disabled):active { transform:translateY(1px); }
#selection-panel #recent-work-copy { background:#274f3c; border-color:#d3b774; color:var(--game-cream); }
#selection-panel #undo-status { color:#eed9af; }
#selection-panel #quick-start-copy, #selection-panel #quick-start-dismiss { color:var(--game-cream); }
#selection-panel #energy-reduce-range { background:#fff0cb; color:#653c21; border-color:#b0793f; }

.header button:focus-visible, #selection-panel button:focus-visible {
  outline:3px solid #ffb978; outline-offset:3px;
}
.world-navigation button:focus-visible { outline:3px solid var(--game-ink); outline-offset:3px; }
#selection-panel :is(#scope-panel,#edit-extras) button:focus-visible { outline:3px solid #875026; outline-offset:2px; }
@media (hover:hover) {
  .world-links > button:hover, .world-controls button:hover, #selection-panel .tool:not(:disabled):hover { filter:brightness(1.045); }
}
.world-links > button:active, .world-controls button:active, #selection-panel .tool:not(:disabled):active { transform:translateY(1px); }

html[data-mobile-shell="true"] .header { height:calc(56px + env(safe-area-inset-top)); min-height:56px; gap:6px; }
html[data-mobile-shell="true"] .header .brand { gap:7px; }
html[data-mobile-shell="true"] .header .brand img { width:34px; height:34px; border-radius:9px; }
html[data-mobile-shell="true"] .header .brand h1 { font-size:26px; }
html[data-mobile-shell="true"] .header #account-open { min-width:0; max-width:none; height:44px; padding:6px 8px; }
html[data-mobile-shell="true"] .header #account-open strong { font-size:16px; }
html[data-mobile-shell="true"] #mobile-menu-open { flex-direction:column; gap:0; width:44px; min-width:44px; height:44px; padding:3px; border:2px solid var(--game-panel-edge); border-radius:10px; background:#244d3c; color:var(--game-cream); box-shadow:inset 0 1px 0 #53755d,0 2px 0 #0c2b22; font-size:11px; line-height:1.2; }
html[data-mobile-shell="true"] #mobile-menu-open .game-icon { width:22px; height:21px; }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-heading h2 { font-size:32px; }
html[data-mobile-shell="true"] #regions-open[data-region-heading="true"] { padding:2px 0; color:var(--game-ink); box-shadow:none; }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-navigation .world-controls { gap:3px; width:138px; background:transparent; box-shadow:none; overflow:visible; border-radius:0; }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-navigation { grid-template-columns:minmax(0,1fr) 138px; }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-navigation .world-controls button { border:2px solid var(--game-panel-edge); border-radius:9px; background:var(--game-cream); box-shadow:var(--game-key-shadow); }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-navigation .world-controls button + button { border:2px solid var(--game-panel-edge); }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links > button { padding:5px 6px; gap:4px; border:2px solid var(--game-panel-edge); font-size:13px; font-weight:700; }
html[data-mobile-shell="true"] #view-options { border:2px solid var(--game-panel-edge); background:var(--game-panel); box-shadow:0 3px 0 #102d2460; }
html[data-mobile-shell="true"] #view-options .view-rotation { border:0; gap:5px; background:none; box-shadow:none; overflow:visible; }
html[data-mobile-shell="true"] #view-options .view-rotation button { border:1px solid var(--game-panel-edge); }
html[data-mobile-shell="true"] #view-options #view-mode { border:1px solid var(--game-panel-edge); }
@media (min-height:451px), (orientation:portrait) {
  html[data-mobile-shell="true"] #selection-panel { padding:7px; bottom:max(12px,env(safe-area-inset-bottom)); }
  html[data-mobile-shell="true"] #selection-panel #edit-mode-status { font-size:12px; margin-bottom:6px; }
  html[data-mobile-shell="true"] #selection-panel .tool { min-height:72px; padding:4px 3px 7px; gap:3px; font-size:16px; }
  html[data-mobile-shell="true"] #selection-panel .tool .game-tool-art { width:36px; height:36px; }
  html[data-mobile-shell="true"] #selection-panel #recent-work { flex-basis:56px; }
  html[data-mobile-shell="true"] #selection-panel #undo { min-height:72px; padding:4px 2px 7px; font:700 11px/1.3 var(--font-game); }
}
@media(max-width:360px) {
  html[data-mobile-shell="true"] .header .brand img { width:28px; height:28px; }
  html[data-mobile-shell="true"] .header .brand h1 { font-size:20px; }
  html[data-mobile-shell="true"] .header #account-open { gap:3px; padding:6px; }
  html[data-mobile-shell="true"] .header #account-open strong { font-size:14px; }
  html[data-mobile-shell="true"] .header #account-open .game-icon { width:15px; height:20px; }
  html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links { gap:4px; }
  html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links > button { padding:5px 4px; gap:3px; font-size:11px; }
  html[data-mobile-shell="true"] .world-links .game-icon { width:12px; height:16px; }
  html[data-mobile-shell="true"] .world-links #recent-places-map-open .game-icon { display:none; }
  html[lang="en"][data-mobile-shell="true"] #selection-panel .tool { font-size:14px; }
}
@media(max-width:1100px) and (max-height:450px) and (orientation:landscape) {
  html[data-mobile-shell="true"] .header { height:calc(52px + env(safe-area-inset-top)); min-height:52px; }
  html[data-mobile-shell="true"] #selection-panel { padding:5px; border-radius:12px; }
  html[data-mobile-shell="true"] #selection-panel .tool, html[data-mobile-shell="true"] #selection-panel #undo { min-height:44px; padding:3px; font-size:12px; }
  html[data-mobile-shell="true"] #selection-panel .tool .game-tool-art { width:23px; height:23px; }
  html[data-mobile-shell="true"] #selection-panel #undo .game-icon { width:21px; height:21px; }
}