/* World-first shell. The shared world and its tools keep their original rendering. */
:root {
  --shell-paper:#fffbee;
  --shell-edge:#839078;
  --shell-line:#dad7bd;
  --shell-ink:#244437;
  --shell-shadow:inset 0 1px 0 #ffffff,inset 0 -3px 0 #e4d9b5,0 2px 3px #243e3433;
  --shell-control-edge:#aeb08a;
  --shell-control-shadow:inset 0 1px 0 #fffef7,inset 0 -2px 0 #dedbc1;
  --shell-control-pressed:inset 0 2px 0 #aeb08a44;
  --drawer-width:clamp(300px,30vw,384px);
  --game-key-shadow:var(--shell-shadow);
}
html, body, html[data-mobile-shell="true"], html[data-mobile-shell="true"] body {
  width:100%; height:100dvh; min-height:0; overflow:hidden;
}
body > main, html:not([data-mobile-shell="true"]) body > main, html[data-mobile-shell="true"] body > main {
  position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; padding:0;
}
body > main > .world-stage, html[data-mobile-shell="true"] .world-stage {
  position:relative; width:100%; height:100%; min-height:0; border:0; border-radius:0;
}
.terrain-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.terrain-layer[hidden] { display:none; }
.terrain-layer > canvas { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; pointer-events:none; }
#world { position:relative; }
.map-travel-frame { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; transition:opacity 140ms ease-out; }
.map-travel-frame-leaving { opacity:0; }
#region-boundary { position:absolute; z-index:5; top:90px; left:50%; transform:translateX(-50%); width:300px; max-width:calc(100% - 132px); padding:12px; border:1px solid var(--shell-edge); border-radius:12px; background:var(--shell-paper); color:var(--shell-ink); box-shadow:var(--shell-shadow); }
#region-boundary[hidden] { display:none; }
#region-boundary strong { display:block; padding-right:24px; font:700 14px/1.4 var(--font-ui); }
#region-boundary p { margin:5px 0 0; font:400 12px/1.5 var(--font-ui); word-break:keep-all; overflow-wrap:anywhere; }
#region-boundary-close { position:absolute; top:0; right:0; width:40px; height:40px; padding:0; border:0; box-shadow:none; background:transparent; color:var(--shell-ink); font-size:22px; }
#region-boundary-travel { display:block; width:100%; min-height:44px; margin-top:10px; padding:8px; border:1px solid var(--shell-control-edge); border-radius:8px; background:#f0eddb; color:var(--shell-ink); box-shadow:var(--shell-control-shadow); font:700 13px/1.4 var(--font-ui); }
#region-boundary-travel[hidden] { display:none; }
@media(max-width:600px) { #region-boundary { top:132px; } }
@media(max-width:350px) {
  #region-boundary { top:122px; padding:10px; }
  #region-boundary strong { font-size:13px; }
  #region-boundary p { font-size:11px; line-height:1.4; }
  #region-boundary-travel { margin-top:8px; }
}
@media(max-height:520px) and (orientation:landscape) { #region-boundary { top:72px; } }
[data-map-travel-preview] #loading:is(:not([data-connection-status]),[data-connection-status=""]) { background:transparent; }
[data-map-travel-preview] #loading:is(:not([data-connection-status]),[data-connection-status=""]) strong { padding:12px 18px; border-radius:10px; background:var(--shell-paper); box-shadow:var(--shell-shadow); }
[data-map-travel-preview] #loading:is(:not([data-connection-status]),[data-connection-status=""]) p { display:none; }
@media(prefers-reduced-motion:reduce) { .map-travel-frame { transition:none; } }
body { background:#88a967; }
.header, html:not([data-mobile-shell="true"]) .header, html[data-mobile-shell="true"] .header {
  position:absolute; z-index:6; inset:0 0 auto; height:80px; min-height:0; padding:16px 22px;
  background:transparent; border:0; box-shadow:none; pointer-events:none;
}
.header > * { pointer-events:auto; }
.header .brand { gap:10px; }
.header .brand img { width:42px; height:42px; border-radius:10px; }
.header .brand h1 { font-size:29px; color:var(--shell-ink); text-shadow:0 1px 0 #fffdf380; }
.header-actions { gap:8px; }
.header :is(.utility-control,#header-profile,#mobile-menu-open) {
  display:inline-flex; align-items:center; justify-content:center; width:46px; min-width:46px; height:46px;
  padding:8px; background:var(--shell-paper); color:var(--shell-ink); border:1.5px solid var(--shell-control-edge);
  border-radius:10px; box-shadow:var(--shell-control-shadow),0 1px 2px #2444371a;
}
.header #account-open { order:-1; height:46px; min-height:46px; padding:8px 14px; background:#ffda68; color:var(--shell-ink); border:1.5px solid #7e885f; box-shadow:inset 0 1px 0 #fff5b7,inset 0 -3px 0 #e7b950,0 2px 3px #243e3433; }
.header #header-profile { max-width:46px; }
.header #header-profile .profile-avatar-image { width:34px; height:30px; }
.header #header-nickname, .header .utility-label, .header #mobile-menu-open > span:last-child { display:none; }
.header #mobile-menu-open .game-icon { width:25px; height:25px; }
.header #connection { display:none; }
.header [hidden] { display:none!important; }
.world-navigation, html[data-mobile-shell="true"] body[data-world-kind="island"] .world-navigation {
  position:absolute; inset:0; display:block; padding:0; margin:0; width:auto; height:auto; z-index:5; pointer-events:none;
}
.world-navigation button { pointer-events:auto; }
.world-heading { position:absolute; top:16px; left:208px; padding:0; margin:0; }
.world-heading h2 { margin:0; line-height:1; }
#regions-open[data-region-heading="true"], html[data-mobile-shell="true"] #regions-open[data-region-heading="true"] {
  display:flex; align-items:center; gap:8px; height:46px; padding:8px 15px; border:1.5px solid var(--shell-control-edge);
  border-radius:10px; background:var(--shell-paper); color:var(--shell-ink); box-shadow:var(--shell-control-shadow),0 1px 2px #2444371a; font:700 20px/1.3 var(--font-game);
}
.header :is(.utility-control,#header-profile,#mobile-menu-open):active:not(:disabled),
html #regions-open[data-region-heading="true"]:active:not(:disabled) { box-shadow:var(--shell-control-pressed); }
html #regions-open[data-region-heading="true"][aria-expanded="true"],
.header #mobile-menu-open[aria-expanded="true"] { background:#e7edda; border-color:#8f9c79; box-shadow:var(--shell-control-pressed); }
#regions-open .regions-label { display:none; }
.world-heading h2 > #world-title { font-size:22px; }
.world-links, html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links {
  position:absolute; inset:88px auto auto 22px; display:flex; flex-direction:column; align-items:stretch; gap:10px; width:116px; padding:0; margin:0;
}
.world-links > button, html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links > button {
  width:100%; min-height:42px; padding:8px; border:1.5px solid var(--shell-edge); border-radius:10px;
  background:var(--shell-paper); color:var(--shell-ink); box-shadow:var(--shell-shadow); font:700 14px/1.25 var(--font-game);
}
body[data-world-kind="island"] .world-links #recent-places-map-open:not([hidden]) { order:-1; display:flex; flex-direction:column; gap:2px; padding:8px 10px 11px; font-size:17px; }
.discovery-art { width:60px; height:54px; object-fit:contain; pointer-events:none; }
.world-links .nav-short { display:none; }
.world-links .nav-long { display:inline; }
#marker-count { font:600 11px/1 var(--font-ui); }
#marker-count:empty { display:none; }
.map-view-controls, html:not([data-mobile-shell="true"]) .map-view-controls, html[data-mobile-shell="true"] .map-view-controls {
  position:absolute; inset:42% 16px auto auto; display:flex; flex-direction:column; width:92px; padding:0; gap:5px;
  border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:auto;
}
html[lang] body[data-world-kind] .map-view-controls .world-controls,
html[lang] body[data-world-kind] .map-view-controls #view-rotation {
  position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin:0; padding:0; gap:4px;
  border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; transform:none;
}
html[lang] body[data-world-kind] .map-view-controls button,
html[lang] body[data-world-kind] #view-options :is(.view-rotation button,#view-mode) {
  position:static; display:flex; align-items:center; justify-content:center; flex-direction:row; gap:6px;
  width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:6px;
  border:1.5px solid #c1cbb0; border-radius:9px; background:#eff1e3; color:var(--shell-ink); box-shadow:inset 0 1px 0 #fbfcf5,inset 0 -2px 0 #d6ddc8,0 1px 2px #24443712;
  font:700 13px/1.2 var(--font-ui); touch-action:manipulation;
}
html[lang] body[data-world-kind] .map-view-controls #view-options {
  position:static; display:flex; flex-direction:column; gap:5px; width:100%; padding:0; border:0; border-radius:0;
  background:none; box-shadow:none;
}
#view-options svg, #view-options .game-icon { flex:none; width:21px; height:21px; }
#view-options svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#view-options svg.rotation-icon { width:30px; height:30px; stroke-width:1.6; }
#view-options .rotation-icon text { fill:currentColor; stroke:none; font:700 7.5px var(--font-ui); letter-spacing:-.3px; }
html[lang] body[data-world-kind] #view-options #view-mode[aria-pressed="true"] { background:#e7eed4; }
#view-mode .view-mode-isometric,
body[data-view-mode="top"] #view-mode .view-mode-top { display:none; }
body[data-view-mode="top"] #view-mode .view-mode-isometric { display:block; }
html[lang] body[data-world-kind] .map-view-controls [hidden] { display:none!important; }
html[lang][data-mobile-shell="true"] body[data-world-kind] .map-view-controls .world-controls { display:none; }
.map-view-controls button:focus-visible { outline:3px solid #995522; outline-offset:2px; }
#map-view-controls[hidden] { display:none!important; }
html:not([data-mobile-shell="true"]) .map-view-controls {
  inset:auto 16px 24px auto; flex-direction:row; align-items:center; width:auto; padding:4px 6px; gap:8px;
  border:1px solid var(--shell-edge); border-radius:12px; background:var(--shell-paper); box-shadow:var(--shell-shadow);
}
html:not([data-mobile-shell="true"]) body[data-world-kind] .map-view-controls .world-controls,
html:not([data-mobile-shell="true"]) body[data-world-kind] .map-view-controls #view-rotation {
  width:auto; grid-template-columns:repeat(2,44px); gap:0;
}
html:not([data-mobile-shell="true"]) body[data-world-kind] .map-view-controls #view-options {
  width:auto; flex-direction:row; align-items:center; gap:8px;
}
html:not([data-mobile-shell="true"]) body[data-world-kind] .map-view-controls button,
html:not([data-mobile-shell="true"]) body[data-world-kind] #view-options :is(.view-rotation button,#view-mode) {
  width:44px; min-width:44px; border:0; border-radius:7px; background:transparent; box-shadow:none;
}
html:not([data-mobile-shell="true"]) body[data-world-kind] #view-options #view-mode { width:72px; padding-left:8px; border-left:1px solid var(--shell-line); }
@media(max-width:1160px) {
  html:not([data-mobile-shell="true"]) .map-view-controls { top:82px; bottom:auto; }
}
@media(hover:hover) {
  html[lang] body[data-world-kind] .map-view-controls button:hover,
  html[lang] body[data-world-kind] #view-options :is(.view-rotation button,#view-mode):hover { background:#fff1c8; }
}
.map-caption { left:22px; top:auto; bottom:12px; opacity:.75; font-size:11px; }
.tile-detail, .input-hint { display:none; }
#build-start {
  position:absolute; z-index:4; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:12px;
  min-width:194px; height:66px; padding:8px 28px; border:2px solid #cf823d; border-radius:14px;
  background:var(--shell-paper); color:var(--shell-ink); box-shadow:inset 0 -4px 0 #efad60,0 3px 0 #46603a55; font:700 24px/1.2 var(--font-game); white-space:nowrap;
}
#build-start img { width:42px; height:42px; object-fit:contain; }
#build-start:hover { background:#fff4d8; }
#build-start:active { transform:translate(-50%,2px); }
#build-start:focus-visible { outline:3px solid #7f4924; outline-offset:4px; }
#build-start[hidden] { display:none; }
/* The work panel contains the view controls, leaving the edge free for materials. */
#inventory-mount {
  position:fixed; z-index:5; top:82px; right:16px; bottom:16px; width:var(--drawer-width); min-height:0;
}
#inventory-mount[hidden] { display:none; }
#inventory-panel, #inventory-dialog .inventory-panel {
  display:flex; flex-direction:column; height:100%; min-height:0; padding:12px;
  background:var(--shell-paper); color:var(--shell-ink); border:1.5px solid var(--shell-edge); border-radius:14px; box-shadow:0 3px 8px #28433026;
}
#inventory-panel .inventory-heading, #inventory-dialog .inventory-heading { position:static; display:flex; flex-shrink:0; align-items:center; width:100%; height:auto; min-height:36px; margin:0 0 10px; overflow:visible; clip-path:none; white-space:normal; }
#inventory-panel .inventory-heading h2 { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; font-size:24px; white-space:normal; }
#inventory-panel #inventory-close, #inventory-dialog #inventory-close { display:block; width:44px; min-width:44px; height:44px; min-height:44px; border:1.5px solid var(--shell-control-edge); border-radius:9px; background:var(--shell-paper); color:var(--shell-ink); box-shadow:var(--shell-control-shadow); }
#inventory-panel .inventory-toolbar, #inventory-dialog #inventory-panel .inventory-toolbar { padding:0; margin:0 0 10px; box-shadow:none; background:none; }
#inventory-panel #inventory-search { background:#fffef9; border-color:#a5ae94; border-radius:9px; padding-right:38px; box-shadow:inset 0 2px 0 #6478550c; }
#inventory-panel #inventory-search:focus-visible { border-color:#9b6c33; outline:2px solid #d4ad70; outline-offset:1px; }
#inventory-panel #inventory-search-clear { width:36px; min-height:44px; color:var(--shell-ink); }
html[data-mobile-shell="true"] #inventory-panel #inventory-search { font-size:16px; }
#inventory-panel .inventory-filters button { border:1.5px solid var(--shell-control-edge); border-radius:9px; background:var(--shell-paper); box-shadow:var(--shell-control-shadow); }
#inventory-panel .inventory-filters button[aria-pressed="true"] { border-color:#bd913e; background:#ffedb8; color:#785320; box-shadow:inset 0 2px 0 #bb8e3826,inset 0 -1px 0 #e6cd91; }
#inventory-panel .inventory-types { border:0; background:transparent; padding:0; gap:4px; margin-bottom:10px; }
#inventory-panel .inventory-types button { min-height:44px; border:1px solid var(--shell-control-edge); border-radius:8px; background:#f7f3e3; box-shadow:var(--shell-control-shadow); color:var(--shell-ink); font-size:13px; font-weight:700; padding:5px 3px; }
#inventory-mount #inventory-panel .inventory-types button { font-size:14px; }
#inventory-panel .inventory-types button[aria-pressed="true"] { border-color:#bd913e; background:#ffedb8; color:#785320; box-shadow:inset 0 1px 0 #fff6d8,inset 0 -2px 0 #e6cd91; }
#inventory-panel #material-grid:not([data-color-view="true"]) { grid-auto-rows:100px; }
#inventory-mount #inventory-panel #material-grid:not([data-color-view="true"]),
html:not([data-mobile-shell="true"]) body[data-edit-mode="look"] #inventory-mount #material-grid:not([data-color-view="true"]) {
  flex:1; max-height:none; min-height:0; grid-auto-rows:104px; gap:5px;
}
#inventory-panel :is(.material-choice,.material-color-choice) {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 2.4em; align-items:center; justify-items:center; gap:3px; padding:4px 4px 5px;
  border:2px solid #9fa17b; border-radius:9px; background:linear-gradient(#fffced,#f1e8cb); color:var(--shell-ink);
  box-shadow:inset 0 1px 0 #fffff8,inset 0 -3px 0 #c9c397,0 1px 0 #8d947655;
}
#inventory-panel .material-choice { height:100px; min-height:100px; font-size:13px; }
#inventory-mount #inventory-panel .material-choice { height:104px; min-height:104px; font-size:14px; }
#inventory-panel :is(.material-choice,.material-color-choice) .material-preview,
#inventory-mount #inventory-panel .material-choice .material-preview {
  width:100%; height:100%; min-height:0; aspect-ratio:auto; object-fit:contain; box-sizing:border-box; padding:2px;
  border:1px solid #b0b793; border-radius:5px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--material-color,#8c9c75) 12%,#dce2cd),#eff0df);
  box-shadow:inset 0 2px 0 #9ca9804d,0 1px 0 #fffff2;
}
#inventory-mount #inventory-panel .material-choice .material-name { font-size:14px; font-weight:700; }
#inventory-panel .material-color-choice { height:78px; min-height:78px; grid-template-rows:minmax(0,1fr) 1.3em; font-size:11px; }
#inventory-panel :is(.material-choice,.material-color-choice)[aria-pressed="true"] { border-color:#b97d24; background:linear-gradient(#fff0b7,#ffdb79); color:var(--shell-ink); box-shadow:inset 0 1px 0 #fff9dc,inset 0 -3px 0 #dea438,0 1px 0 #8f672e66; }
#inventory-panel :is(.material-choice,.material-color-choice)[aria-pressed="true"] .material-preview { border-color:#c9a14e; background:linear-gradient(145deg,#e7c777,#fff0b8); box-shadow:inset 0 2px 0 #b5853440,0 1px 0 #fff6d8; }
#inventory-panel .material-choice[aria-pressed="true"]::before { z-index:1; top:3px; right:3px; width:18px; height:18px; background:#97671e; box-shadow:0 1px 0 #fff4c8; }
#inventory-panel .material-choice[aria-pressed="true"]::after { z-index:1; top:6px; right:6px; width:12px; height:12px; background:#fffdf3; }
#inventory-panel .material-color-choice[aria-pressed="true"]::after { top:2px; left:auto; right:2px; width:16px; height:16px; border-radius:50%; background:#97671e; color:#fffdf3; font-size:11px; line-height:16px; }
#inventory-panel .material-choice .material-name { display:flex; align-items:center; justify-content:center; height:100%; min-height:0; font-size:13px; font-weight:700; line-height:1.2; text-shadow:0 1px 0 #fffaf0; }
#inventory-panel .material-color-choice .material-name { font-size:11px; font-weight:600; }
#inventory-panel .material-variants { z-index:1; top:3px; right:3px; padding:1px 4px; border:1px solid #a8ae89; border-radius:4px; background:#f4f0da; color:#425742; font-weight:700; box-shadow:0 1px 0 #ffffee; }
#inventory-panel .inventory-selection { flex-shrink:0; grid-template-columns:44px minmax(0,1fr) 44px; margin-top:10px; padding:10px 8px; border:1px solid #d5c9a6; border-radius:10px; background:#f8efd8; }
#inventory-panel #inventory-selected { font:700 17px/1.3 var(--font-game); color:var(--shell-ink); }
#inventory-selected-category { color:#6a775e; }
#inventory-panel #inventory-selected-preview, #selection-panel #bag-preview {
  box-sizing:border-box; object-fit:contain; padding:2px; border:1px solid #c9a14e; border-radius:5px;
  background:linear-gradient(145deg,#e7c777,#fff0b8); box-shadow:inset 0 2px 0 #b5853440,0 1px 0 #fff6d8;
}
#inventory-panel #inventory-selected-preview { width:44px; height:40px; }
#selection-panel #bag-preview { width:36px; height:32px; }
html[data-mobile-shell="true"] #selection-panel #bag-preview { width:28px; height:28px; }
#inventory-panel :is(#inventory-results:not(.sr-only),.inventory-note,.inventory-empty,.material-find,.material-favorite) { color:#53664b; }
#inventory-panel .material-favorite { width:44px; height:44px; min-width:44px; min-height:44px; border:1.5px solid var(--shell-control-edge); border-radius:9px; background:var(--shell-paper); box-shadow:var(--shell-control-shadow); }
#inventory-panel #material-favorite { width:44px; height:44px; min-width:44px; min-height:44px; }
#inventory-panel .material-favorite[aria-pressed="true"] { color:#8f641d; border-color:#bd913e; background:#ffedb8; box-shadow:inset 0 2px 0 #bb8e3826; }
#inventory-panel .material-favorite[aria-pressed="true"] svg { fill:#e9b64b; }
#inventory-panel .material-colors { border-color:var(--shell-line); background:#f5f0df; }
#inventory-panel :is(.material-colors-back,#inventory-search-reset) { border:1px solid var(--shell-control-edge); border-radius:8px; padding:8px 10px; background:var(--shell-paper); color:var(--shell-ink); box-shadow:var(--shell-control-shadow); font-weight:600; }
#inventory-panel :is(.inventory-filters button,.inventory-types button,.material-favorite,.material-colors-back,#inventory-close,#inventory-search-reset):active:not(:disabled) { box-shadow:var(--shell-control-pressed); }
#inventory-panel :is(.material-choice,.material-color-choice):active:not(:disabled) { box-shadow:inset 0 2px 0 #9da47b66,inset 0 -1px 0 #c9c397; }
#inventory-panel :is(button,input):focus-visible { outline-color:#995522; }
@media(hover:hover) {
  #inventory-panel :is(.inventory-filters button,.inventory-types button,.material-favorite):hover:not([aria-pressed="true"]),
  #inventory-panel :is(#inventory-close,.material-colors-back,#inventory-search-reset):hover { background:#f2ecd5; }
  #inventory-panel :is(.material-choice,.material-color-choice):hover:not([aria-pressed="true"]) { background:linear-gradient(#fffdf1,#f7edca); border-color:#77865d; }
  .header :is(.utility-control,#header-profile,#mobile-menu-open):hover,
  html #regions-open[data-region-heading="true"]:hover { background:#f5f0dc; }
}
#inventory-panel .material-grid[data-color-view="true"] { flex:1; min-height:0; max-height:none; }
#inventory-dialog { background:var(--shell-paper); }
html:not([data-mobile-shell="true"]) #inventory-dialog { width:500px; max-width:calc(100vw - 32px); border-radius:14px; }
html:not([data-mobile-shell="true"]) #inventory-dialog .inventory-panel { height:min(700px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); }
html:not([data-mobile-shell="true"]) #inventory-dialog #material-grid { flex:1; min-height:0; max-height:none; }
#inventory-dialog #inventory-panel .material-colors-back { width:100%; }
#selection-panel, body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel {
  width:520px; max-width:calc(100% - 34px); bottom:24px; padding:9px;
  border:1px solid var(--shell-edge); border-radius:14px; color:var(--shell-ink); background:var(--shell-paper); box-shadow:0 3px 8px #28433026;
}
#selection-panel #edit-tools, body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel #edit-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
#selection-panel .edit-mode-header { display:contents; }
#selection-panel #edit-mode-status { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
#selection-panel .edit-secondary { grid-column:1/-1; grid-row:1; padding:0 0 8px; margin:0; gap:6px; border-color:var(--shell-line); }
#selection-panel .edit-actions { grid-column:1; grid-row:2; margin:0; }
#selection-panel .edit-actions .toolbar { padding:0; gap:5px; }
#selection-panel .tool, #selection-panel .tool.active { flex-direction:row; gap:7px; font-size:20px; min-height:62px; padding:8px; border:2px solid #979c70; border-radius:10px; background:#fff9e8; color:var(--shell-ink); box-shadow:inset 0 2px 0 #fffefa,inset 0 -4px 0 #c4c094,0 1px 2px #2444371a; }
#selection-panel .tool .game-tool-art { width:34px; height:34px; }
#selection-panel .tool[aria-pressed="true"] { border-color:#d98a0d; color:var(--shell-ink); background:#ffdc79; box-shadow:inset 0 2px 0 #ffefb4,inset 0 -4px 0 #ecac25,0 1px 2px #9b68151a; }
#selection-panel .tool:active:not(:disabled) { box-shadow:inset 0 2px 0 #a5aa8155,inset 0 -1px 0 #c3c398; }
#selection-panel .tool[aria-pressed="true"]:active:not(:disabled) { box-shadow:inset 0 2px 0 #bf801f55,inset 0 -1px 0 #eab43f; }
#selection-panel .tool[aria-pressed="true"]::after { display:none; }
body #selection-panel .tool > .shortcut-key { display:none; }
#selection-panel .edit-mode-header #edit-close,
body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-mode-header #edit-close {
  grid-column:2; grid-row:2; position:static; min-width:78px; width:auto; height:58px; margin:0; padding:8px 12px; gap:6px;
  border:1px solid var(--shell-line); border-radius:9px; background:var(--shell-paper); color:var(--shell-ink); box-shadow:inset 0 -2px 0 #e5dcbc; font:700 16px/1.3 var(--font-game);
}
#selection-panel .edit-mode-header .edit-close-icon,
body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-mode-header .edit-close-icon {
  display:block; width:19px; height:19px; --game-icon:url('/icons/phosphor/check-bold.svg');
}
#selection-panel :is(#inventory-open,#material-pick,#scope-toggle,#edit-more) { min-height:38px; border-color:var(--shell-line); background:#f9f5e5; box-shadow:none; color:var(--shell-ink); }
#selection-panel #inventory-open[aria-expanded="true"] { border-color:var(--shell-edge); }
#selection-panel #inventory-open[aria-expanded="true"] .material-chevron { transform:rotate(180deg); }
#selection-panel #scope-panel, #selection-panel #edit-extras { border:1px solid var(--shell-edge); }
#selection-panel .selection-info strong, #selection-panel #selection-preview { color:var(--shell-ink); }
#selection-panel :is(#selection-editor-name,#selection-editor-detail,#selection-editor-empty) { color:#59704e; }
#selection-panel #line-panel { grid-column:1/-1; grid-row:3; border-color:var(--shell-line); }
#selection-panel #quick-start, #selection-panel #energy-reduce-range { grid-column:1/-1; }
#selection-panel #quick-start-copy, #selection-panel #quick-start-dismiss { color:var(--shell-ink); }
#selection-panel #undo { min-height:58px; height:58px; border:1px solid var(--shell-line); font-size:11px; }
#selection-panel #undo:disabled { border-color:var(--shell-line); }
#selection-panel #recent-work { flex-basis:52px; }
body[data-edit-mode="look"] #selection-panel { bottom:106px; width:370px; }
body[data-edit-mode="look"] #selection-panel .edit-actions { display:none; }
body[data-edit-mode="look"] #selection-panel #edit-tools { display:flex; justify-content:flex-end; }
body[data-edit-mode="look"] #selection-panel .edit-secondary { border:0; padding:0; }
body[data-edit-mode="look"] #selection-panel .edit-mode-header #edit-close { height:38px; min-width:38px; padding:8px; }
#recent-places-card { display:none!important; }
#mobile-menu[open] { display:flex; flex-direction:column; max-height:calc(100dvh - 32px); background:var(--shell-paper); }
#mobile-menu .mobile-menu-heading { background:var(--shell-paper); border-bottom:1px solid var(--shell-line); }
#mobile-menu .mobile-menu-heading h2 { color:var(--shell-ink); }
#mobile-menu-scroll { flex:1; }
#mobile-menu .sidebar { width:auto; max-height:none; color:var(--shell-ink); }
#recent-places-dialog { width:640px; }
#recent-places-dialog #recent-places-all { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#recent-places-dialog .recent-place { grid-template-columns:1fr; padding:8px; gap:8px; border:1px solid var(--shell-line); border-radius:12px; background:#fffcf0; }
#recent-places-dialog .recent-place-preview { width:100%; height:142px; border:0; border-radius:7px; background:#e4ead6; }
#recent-places-dialog .recent-place-copy { padding:2px 6px 4px; }
#recent-places-dialog .recent-place-copy strong { font:700 18px/1.3 var(--font-game); }
#recent-places-dialog .recent-place-action { color:#8b5128; font-weight:700; font-size:13px; }
#recent-places-dialog .recent-place-meta { margin:6px 0 0; color:#607354; font:12px/1.5 var(--font-ui); }
#recent-places-dialog .recent-place-meta summary { min-height:36px; padding:8px; cursor:pointer; }
#recent-places-dialog .recent-place-meta p { margin:0; padding:0 8px 8px; }
#recent-places-dialog .recent-place-meta p > * { display:block; }
#recent-places-dialog .recent-places-updated { grid-column:1/-1; }
@media (max-width:1100px) and (min-width:761px) { #selection-panel { width:480px; } #selection-panel .tool, #selection-panel .tool.active { font-size:18px; gap:4px; } }
html[data-mobile-shell="true"] .header { height:66px; padding:10px 12px; }
html[data-mobile-shell="true"] .header .brand img { width:34px; height:34px; }
html[data-mobile-shell="true"] .header .brand h1 { font-size:24px; }
html[data-mobile-shell="true"] .header #account-open { height:44px; min-height:44px; padding:6px 9px; }
html[data-mobile-shell="true"] .header #account-open strong { font-size:14px; }
html[data-mobile-shell="true"] .header #mobile-menu-open { width:44px; min-width:44px; height:44px; background:var(--shell-paper); color:var(--shell-ink); border:1.5px solid var(--shell-edge); box-shadow:var(--shell-shadow); }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-heading { position:absolute; inset:72px auto auto 12px; width:auto; }
html[data-mobile-shell="true"] #regions-open[data-region-heading="true"] { height:40px; padding:6px 12px; font-size:18px; }
html[data-mobile-shell="true"] .world-links, html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links { top:123px; left:12px; width:88px; gap:8px; }
html[data-mobile-shell="true"] .world-links .discovery-art { width:43px; height:39px; }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links #recent-places-map-open:not([hidden]) { font-size:14px; padding:6px; }
html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links > button { font-size:12px; min-height:44px; padding:6px 4px; }
html[data-mobile-shell="true"] .world-links .nav-long { display:inline; }
html[data-mobile-shell="true"] .world-links .nav-short { display:none; }
html[data-mobile-shell="true"] .map-view-controls { right:12px; top:36%; width:44px; }
html[lang][data-mobile-shell="true"] body[data-world-kind] .map-view-controls #view-rotation { grid-template-columns:minmax(0,1fr); gap:5px; }
html[lang][data-mobile-shell="true"] body[data-world-kind] #view-options #view-mode { flex-direction:column; gap:2px; padding:4px; font-size:11px; }
html[data-mobile-shell="true"] #view-mode :is(svg,.game-icon) { width:18px; height:18px; }
html[data-mobile-shell="true"] .map-caption #map-scale { display:none; }
html[data-mobile-shell="true"] #build-start { height:60px; min-width:170px; padding:8px 20px; gap:10px; bottom:max(24px,env(safe-area-inset-bottom)); font-size:22px; }
html[data-mobile-shell="true"] #selection-panel { left:50%; right:auto; transform:translateX(-50%); margin:0; bottom:max(12px,env(safe-area-inset-bottom)); padding:7px; }
html[data-mobile-shell="true"] #selection-panel .tool { flex-direction:column; gap:2px; min-height:64px; padding:5px 2px; font-size:14px; }
html[data-mobile-shell="true"] #selection-panel .tool .game-tool-art { width:29px; height:29px; }
html[data-mobile-shell="true"] #selection-panel .edit-mode-header #edit-close { min-width:57px; height:64px; padding:7px; flex-direction:column; font-size:13px; }
html[data-mobile-shell="true"] #selection-panel #undo { height:64px; min-height:64px; }
html[data-mobile-shell="true"] #selection-panel .edit-secondary { flex-wrap:wrap; }
html[data-mobile-shell="true"] #inventory-dialog { border:0; }
html[data-mobile-shell="true"] #inventory-dialog .inventory-panel { max-height:calc(var(--mobile-viewport-height,100dvh) - 16px); height:calc(var(--mobile-viewport-height,100dvh) - 16px); }
html[data-mobile-shell="true"] #inventory-dialog #inventory-panel .inventory-heading { margin-bottom:8px; }
html[data-mobile-shell="true"] #inventory-dialog #inventory-panel #inventory-close { width:44px; height:44px; min-width:44px; min-height:44px; }
html[data-mobile-shell="true"] #inventory-dialog #inventory-panel .inventory-navigation { padding-right:0; }
html[data-mobile-shell="true"] #inventory-dialog #inventory-panel .inventory-empty { flex:1; }
html[data-mobile-shell="true"] #inventory-dialog {
  --inventory-viewport-space:calc(var(--mobile-viewport-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));
  inset:calc(var(--mobile-viewport-top,0px) + max(8px,env(safe-area-inset-top))) 0 auto;
  margin:0 auto; max-height:var(--inventory-viewport-space);
}
html[data-mobile-shell="true"] #inventory-dialog-content { max-height:calc(var(--inventory-viewport-space) - 2px); }
html[data-mobile-shell="true"] #inventory-dialog #inventory-panel { height:calc(var(--inventory-viewport-space) - 2px); max-height:calc(var(--inventory-viewport-space) - 2px); }
html[data-mobile-shell="true"][data-mobile-viewport-compact="true"] #inventory-panel :is(.inventory-selection,.inventory-note) { display:none; }
@media(max-width:360px) {
  html[data-mobile-shell="true"] .header .brand { gap:5px; }
  html[data-mobile-shell="true"] .header .brand h1 { font-size:20px; }
  html[data-mobile-shell="true"] .header .brand img { width:28px; height:28px; }
  html[data-mobile-shell="true"] .header-actions { gap:5px; }
  html[data-mobile-shell="true"] .header #account-open { padding:5px 6px; }
  html[data-mobile-shell="true"] .header #account-open strong { font-size:12px; }
  #recent-places-dialog #recent-places-all { grid-template-columns:1fr; }
}
@media(max-height:450px) and (orientation:landscape) {
  html[data-mobile-shell="true"] .header .brand h1 { font-size:22px; }
  html[data-mobile-shell="true"] body[data-world-kind="island"] .world-heading { top:11px; left:184px; }
  html[data-mobile-shell="true"] .world-links, html[data-mobile-shell="true"] body[data-world-kind="island"] .world-links { top:76px; width:88px; }
  html[data-mobile-shell="true"] .map-view-controls { top:90px; }
  html[data-mobile-shell="true"] #selection-panel { width:450px; }
  html[data-mobile-shell="true"] #selection-panel .tool { flex-direction:row; min-height:44px; }
  html[data-mobile-shell="true"] #selection-panel .edit-mode-header #edit-close { flex-direction:row; min-height:44px; height:44px; }
  html[data-mobile-shell="true"] #selection-panel #undo { min-height:44px; height:44px; }
  html[data-mobile-shell="true"] #inventory-dialog #inventory-panel { padding:8px 12px; }
  html[data-mobile-shell="true"] #inventory-dialog #inventory-panel .inventory-heading { min-height:30px; margin-bottom:4px; }
}

/* Discovery names appear on hover or keyboard focus, and stay visible on mobile. */
html[lang] body[data-world-kind] .world-navigation .world-links { width:56px; gap:10px; }
html[lang] body[data-world-kind] .world-navigation .world-links > button {
  position:relative; inset:auto; display:flex; flex-direction:row; align-items:center; justify-content:center;
  width:56px; height:56px; min-height:56px; padding:5px; gap:0; overflow:visible;
}
html[lang] body[data-world-kind] .world-links #recent-places-map-open:not([hidden]) { padding:3px; }
html[lang] body[data-world-kind] .world-links .discovery-art { width:50px; height:50px; }
html[lang] body[data-world-kind] .world-links #markers-open .game-icon { display:block; width:27px; height:29px; color:#b66535; }
html[lang] body[data-world-kind] .world-links :is(.nav-short,#marker-count) { display:none; }
html[lang] body[data-world-kind] .world-links .nav-long {
  display:none; position:absolute; z-index:8; left:calc(100% + 9px); top:50%; transform:translateY(-50%);
  width:max-content; max-width:180px; padding:8px 11px; border:1px solid var(--shell-edge); border-radius:8px;
  background:var(--shell-paper); color:var(--shell-ink); box-shadow:0 2px 6px #28433026;
  font:700 13px/1.4 var(--font-ui); white-space:nowrap; pointer-events:none;
}
html[lang] body[data-world-kind] .world-links > button:focus-visible .nav-long { display:block; }
@media (hover:hover) and (pointer:fine) {
  html[lang] body[data-world-kind] .world-links > button:hover .nav-long { display:block; }
}
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-navigation .world-links { width:60px; }
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-navigation .world-links > button { width:48px; height:48px; min-height:48px; }
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-links :is(#recent-places-map-open,#markers-open) {
  flex-direction:column; width:60px; height:64px; min-height:64px; padding:4px; gap:2px;
}
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-links .discovery-art { width:34px; height:34px; }
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-links #markers-open .game-icon { width:24px; height:26px; }
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-links :is(#recent-places-map-open,#markers-open) .nav-short {
  display:block; font:700 11px/1.3 var(--font-ui); white-space:nowrap;
}
html[lang][data-mobile-shell="true"] body[data-world-kind] .world-links :is(#recent-places-map-open,#markers-open) .nav-long { display:none; }

/* Place actions belong to the inspected place; requests travel with the tool tray. */
body[data-edit-mode="look"] #selection-panel { bottom:24px; width:420px; padding:14px; }
body[data-edit-mode="look"] #selection-panel #selection-bar { padding:0 40px 8px 0; }
body[data-edit-mode="look"] #selection-panel #edit-tools { border:0; min-height:0; padding:0; margin:0; }
body[data-edit-mode="look"] #selection-panel .edit-secondary { display:none; }
body[data-edit-mode="look"] #selection-panel .edit-mode-header #edit-close { position:absolute; top:8px; right:8px; width:36px; height:36px; min-width:36px; padding:8px; }
body[data-edit-mode="look"] #selection-panel .edit-mode-header .edit-close-icon { display:none; }
body[data-edit-mode="look"] #selection-panel #edit-close-label { display:block; font:18px/1 var(--font-ui); }
body[data-edit-mode="look"] #selection-panel #edit-tools .edit-mode-header #edit-close { color:var(--shell-ink); background:var(--shell-paper); border:1px solid var(--shell-line); }
body[data-edit-mode="look"] #selection-panel #selection-bar { border-bottom:0; }
#selection-context { border-top:1px solid var(--shell-line); padding-top:10px; }
#selection-build, #selection-panel #onboarding #find-gate, #request-create {
  min-height:46px; border:1px solid #dd962d; border-radius:9px; background:#ffdc79; color:var(--shell-ink); font:700 17px/1.3 var(--font-game); padding:10px 16px;
}
#selection-build { width:100%; }
.selection-place-actions { display:flex; gap:8px; align-items:center; padding-top:5px; flex-wrap:wrap; }
.selection-place-actions > button { min-height:44px; padding:8px; background:transparent; color:#52634f; border:0; box-shadow:none; font:600 13px/1.4 var(--font-ui); }
.selection-place-actions #report-open { margin-left:auto; }
body #selection-panel #onboarding {
  position:relative; inset:auto; transform:none; width:100%; max-width:none; display:block; margin:0 0 10px; padding:12px;
  border:1px solid var(--shell-line); border-radius:10px; background:#f6f1df; box-shadow:none;
}
body #selection-panel #onboarding .step-number { display:none; }
body #selection-panel #onboarding > div[aria-live] { padding-right:26px; }
body #selection-panel #onboarding strong { display:block; font:700 14px/1.4 var(--font-game); }
body #selection-panel #onboarding p { max-height:100px; overflow:auto; margin:6px 0 0; color:var(--shell-ink); font:400 14px/1.5 var(--font-ui); overflow-wrap:anywhere; white-space:normal; }
body #selection-panel #onboarding .request-context-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
body #selection-panel #onboarding .request-context-actions button { flex:1; min-width:0; max-width:none; margin:0; min-height:44px; border-radius:8px; padding:9px 12px; font:700 15px/1.4 var(--font-game); }
body #selection-panel #onboarding #find-gate { font-size:15px; padding:9px 12px; white-space:nowrap; }
body #selection-panel #onboarding #request-open { background:var(--shell-paper); color:var(--shell-ink); border:1px solid var(--shell-edge); }
body #selection-panel #onboarding #guide-dismiss { position:absolute; top:2px; right:2px; width:40px; height:40px; padding:0; font-size:22px; color:var(--shell-ink); }
#request-placement { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:5; width:390px; max-width:calc(100% - 24px); padding:16px 72px 16px 16px; background:var(--shell-paper); border:1px solid var(--shell-edge); border-radius:12px; box-shadow:var(--shell-shadow); }
#request-placement strong, #request-placement span { display:block; }
#request-placement strong { font:700 17px/1.4 var(--font-game); }
#request-placement span { margin-top:4px; font:13px/1.5 var(--font-ui); }
#request-placement-cancel { position:absolute; right:10px; top:14px; min-height:44px; padding:10px; border:1px solid var(--shell-edge); border-radius:8px; background:var(--shell-paper); color:var(--shell-ink); }
#material-sampling-notice {
  position:absolute; z-index:6; top:80px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  width:max-content; max-width:calc(100% - 32px); padding:10px 12px; border:1.5px solid #b58850; border-radius:10px;
  background:#fff4d9; color:var(--shell-ink); box-shadow:var(--shell-shadow);
}
#material-sampling-notice[hidden] { display:none; }
#material-sampling-notice strong { display:block; font:700 14px/1.4 var(--font-ui); }
#material-sampling-copy { display:block; margin-top:3px; font:12px/1.5 var(--font-ui); }
#material-sampling-cancel { flex:none; min-height:44px; padding:8px 10px; border:1px solid #b58850; border-radius:7px; background:var(--shell-paper); color:var(--shell-ink); font:700 12px/1.3 var(--font-ui); }
html[data-mobile-shell="true"] #material-sampling-notice { top:124px; max-width:calc(100% - 168px); flex-direction:column; gap:8px; text-align:center; }
@media (max-height:450px) and (orientation:landscape) {
  html[data-mobile-shell="true"] #material-sampling-notice { top:76px; max-width:calc(100% - 360px); flex-direction:row; text-align:left; }
}
body[data-request-choosing="true"] #selection-panel { display:none; }
#request-validation { color:#9c3f20; font-size:13px; line-height:1.5; }
#request-pins { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
#request-pins .request-map-pin { position:absolute; left:0; top:0; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; pointer-events:auto; touch-action:manipulation; }
#request-pins .request-map-pin:focus-visible { outline:3px solid #dd962d; outline-offset:0; background:#fff7df40; }
#request-dialog #request-build { margin:12px 0; background:#ffdc79; color:var(--shell-ink); }
#request-dialog #request-manage { gap:8px; }
#request-dialog #request-manage button { margin:0; }
@media(max-height:520px) {
  body #selection-panel #onboarding p { max-height:44px; }
  body #selection-panel { max-height:calc(100dvh - 82px); overflow-y:auto; }
}
html[data-mobile-shell="true"] body[data-edit-mode="look"] #selection-panel { bottom:max(12px,env(safe-area-inset-bottom)); }
html[data-mobile-shell="true"] body[data-edit-mode="look"] #selection-panel .edit-mode-header #edit-close { width:44px; height:44px; min-width:44px; }
@media(max-width:760px) and (min-height:451px) {
  html[data-mobile-shell="true"] body[data-world-kind] .world-stage:has(#selection-panel:not([hidden])) .map-view-controls { top:76px; }
}

/* Work mode keeps requests as a compact entry and separates leaving from completing. */
#selection-panel { z-index:6; }
body #selection-panel #onboarding[data-request="true"] {
  display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:2px; padding:0; margin-bottom:8px; border:0; background:#f2eedb;
}
body #selection-panel #onboarding[data-request="true"] #request-open {
  display:flex; align-items:center; gap:8px; width:100%; max-width:none; min-width:0; min-height:44px; padding:7px 10px; margin:0;
  border:0; background:transparent; color:var(--shell-ink); text-align:left; font:600 13px/1.4 var(--font-ui);
}
.request-summary-icon { flex:0 0 18px; width:18px; height:18px; color:#a06032; --game-icon:url('/icons/phosphor/flag-fill.svg'); }
#request-summary { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.request-summary-more { flex-shrink:0; color:#80532e; font-size:12px; }
body #selection-panel #onboarding[data-request="true"] #guide-dismiss { position:static; width:44px; height:44px; min-height:44px; font-size:20px; }
#work-mode-heading { flex:1; min-width:0; display:flex; align-items:center; }
#work-mode-hint { color:#48603e; font:600 13px/1.45 var(--font-ui); word-break:keep-all; }
#work-view-controls { flex-shrink:0; margin-left:auto; }
html[lang] body[data-world-kind] #work-view-controls #view-options,
html[lang] body[data-world-kind] #work-view-controls #view-rotation {
  position:static; display:flex; align-items:center; gap:4px; width:auto; margin:0; padding:0; border:0; background:none; box-shadow:none;
}
html[lang] body[data-world-kind] #work-view-controls #view-options { flex-direction:row; }
html[lang] body[data-world-kind] #work-view-controls #view-options button {
  position:static; display:flex; flex-direction:row; align-items:center; justify-content:center; flex-shrink:0; gap:4px;
  width:40px; min-width:40px; height:44px; min-height:44px; margin:0; padding:3px;
  border:1.5px solid #c1cbb0; border-radius:9px; background:#eff1e3; color:var(--shell-ink); box-shadow:inset 0 1px 0 #fbfcf5,inset 0 -2px 0 #d6ddc8,0 1px 2px #24443712; font:700 12px/1.2 var(--font-ui);
}
html[lang] body[data-world-kind] #work-view-controls #view-options #view-mode { width:62px; padding:5px; }
html[lang] body[data-world-kind] :is(#work-view-controls,#map-view-controls) #view-options #view-mode[aria-pressed="true"] { background:#dfe9cb; border-color:#879d71; box-shadow:inset 0 2px 0 #8ba07030,inset 0 -1px 0 #d0dbbb; }
html[lang] body[data-world-kind] :is(#work-view-controls,#map-view-controls) #view-options button:active:not(:disabled) { box-shadow:inset 0 2px 0 #9ba98b44; }
#work-view-controls button:focus-visible { outline:3px solid #995522; outline-offset:1px; }
@media(hover:hover) {
  html[lang] body[data-world-kind] #work-view-controls #view-options button:hover { background:#e7edda; }
}
html[lang] body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-mode-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px; grid-column:1/-1; grid-row:1; margin:0;
}
html[lang] body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-mode-header #edit-close {
  position:static; flex-direction:row; flex-shrink:0; min-width:82px; min-height:44px; height:44px; padding:8px 10px; font-size:13px;
}
html[lang] body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-close-icon { display:block; width:16px; height:20px; font:20px/1 var(--font-ui); }
#selection-panel .edit-exit-icon { display:none; flex:none; width:20px; height:20px; }
html[lang] body #selection-panel .edit-mode-header #edit-close[data-exit-kind="work"] { border:1.5px solid #bd845f; background:#ffdfc5; color:#724420; box-shadow:inset 0 2px 0 #fff1df,inset 0 -3px 0 #d99e74,0 1px 2px #72442012; }
html[lang] body #selection-panel #edit-close[data-exit-kind="work"] .edit-close-icon { display:none; }
#selection-panel #edit-close[data-exit-kind="work"] .edit-exit-icon { display:block; }
html[lang] #selection-panel .edit-secondary { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.65fr); align-items:stretch; }
html[lang] #selection-panel .edit-secondary:has(>button:not([hidden])) { margin:0; padding-bottom:8px; }
html[lang] #selection-panel .edit-secondary :is(#inventory-open,#material-pick,#scope-toggle) { min-width:0; width:100%; max-width:none; margin:0; min-height:44px; border:2px solid #aeb08a; border-radius:9px; background:#f9f5e5; box-shadow:inset 0 1px 0 #fffef7,inset 0 -2px 0 #dedbc1; }
html[lang] #selection-panel .edit-secondary :is(#inventory-open,#scope-toggle)[aria-expanded="true"],
html[lang] #selection-panel .edit-secondary #material-pick[aria-pressed="true"] { background:#f9e4bf; border-color:#b58850; box-shadow:inset 0 2px 0 #b588502b,inset 0 -1px 0 #e7c995; }
html[lang] #selection-panel .edit-secondary :is(#inventory-open,#material-pick,#scope-toggle):active:not(:disabled) { box-shadow:inset 0 2px 0 #aeb08a44; }
html[lang] #selection-panel .edit-secondary .shortcut-key { border-color:#acb394; background:#fffdf4; color:var(--shell-ink); }
html[lang] #selection-panel :is(#bag-material,#material-pick,#scope-toggle) { font-weight:700; }
html[lang]:not([data-mobile-shell="true"]) #selection-panel :is(#material-pick,#scope-toggle) { font-size:14px; }
html[lang] #selection-panel #scope-toggle { gap:5px; padding-left:10px; padding-right:23px; }
html[lang] #selection-panel .scope-caption { position:static; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip-path:none; font-weight:inherit; }
#selection-panel #brush-summary { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); }
#selection-panel #scope-panel .brush-sizes button { border:1.5px solid #aeb08a; background:#f9f5e5; box-shadow:inset 0 1px 0 #fffef7,inset 0 -2px 0 #dedbc1; }
#selection-panel #scope-panel .brush-sizes button[aria-pressed="true"] { border-color:#ba8b51; background:#ffe5b3; box-shadow:inset 0 2px 0 #b588502b; }
@media(hover:hover) {
  html[lang] body #selection-panel .edit-mode-header #edit-close[data-exit-kind="work"]:hover { background:#f0cba7; }
}
html[lang] body #selection-panel .edit-mode-header #edit-close[data-exit-kind="work"]:active { box-shadow:inset 0 2px 0 #b9896444; }
html[lang] body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-secondary { grid-row:2; }
html[lang] body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel .edit-actions { grid-column:1/-1; grid-row:3; }
html[lang] body:is([data-edit-mode="dig"],[data-edit-mode="fill"],[data-edit-mode="paint"]) #selection-panel #line-panel { grid-row:4; }
html[data-mobile-shell="true"] #selection-panel .edit-secondary { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(76px,1fr) minmax(90px,1.05fr); align-items:stretch; }
html[data-mobile-shell="true"] #selection-panel #inventory-open { min-width:0; width:auto; grid-column:1; padding-left:7px; }
html[data-mobile-shell="true"] #selection-panel #material-pick { min-width:0; grid-column:2; }
html[data-mobile-shell="true"] #selection-panel #scope-toggle { min-width:0; width:100%; grid-column:3; }
html[data-mobile-shell="true"] #selection-panel :is(#inventory-open,#material-pick,#scope-toggle) { min-height:44px; }
@media(max-width:370px) {
  html[data-mobile-shell="true"] #selection-panel .edit-secondary { grid-template-columns:minmax(0,1fr) 72px 80px; }
  html[data-mobile-shell="true"] #selection-panel #scope-toggle { gap:3px; padding-left:6px; padding-right:16px; }
}
body[data-scope-open="true"] .world-navigation .map-view-controls { visibility:hidden; }
html[data-mobile-shell="true"] body[data-scope-open="true"] .world-navigation .world-links { visibility:hidden; }
@media(max-height:520px) {
  html[lang] #selection-panel #scope-panel { position:static; width:100%; max-width:none; max-height:none; margin-top:8px; }
}
/* Shared sheets use the same light frame, title spacing, and 44px close target. */
dialog:not(#inventory-dialog):not(#mobile-menu):not(.game-modal) {
  --sheet-padding:20px;
  padding:var(--sheet-padding); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px);
  border:1.5px solid var(--shell-edge); border-radius:14px;
  background:var(--shell-paper); color:var(--shell-ink);
  box-shadow:0 8px 28px #243e3433; scrollbar-width:thin;
}
dialog:not(#inventory-dialog):not(#mobile-menu) > h2 {
  display:flex; align-items:center; min-height:44px; margin:0 56px 14px 0; padding:0;
  color:var(--shell-ink); font:700 24px/1.3 var(--font-game);
}
dialog :is(.dialog-close,#settings-close,#region-overview-close), #inventory-dialog #inventory-panel #inventory-close, #mobile-menu-close {
  display:grid; place-items:center; width:44px; min-width:44px; height:44px; min-height:44px;
  padding:0; border:1px solid var(--shell-line); border-radius:8px;
  background:var(--shell-paper); color:var(--shell-ink);
  box-shadow:inset 0 -2px 0 #e5dcbc; font:400 22px/1 var(--font-ui);
}
dialog:not(#inventory-dialog) .dialog-close { top:var(--sheet-padding,20px); right:var(--sheet-padding,20px); }
dialog :is(.dialog-close,#settings-close,#region-overview-close):hover { background:#fff1d8; }
#settings-dialog .settings-heading, .region-overview-heading, .request-list-heading {
  position:static; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:44px; margin:0 0 14px; padding:0; border:0; background:none; color:var(--shell-ink);
}
#settings-dialog .settings-heading h2, .region-overview-heading h2, .request-list-heading h2 {
  margin:0; padding:0; font:700 24px/1.3 var(--font-game); color:var(--shell-ink);
}
#settings-dialog .settings-heading + .settings-section { margin-top:0; padding-top:0; border-top:0; }
#profile-dialog .profile-heading { margin:0 56px 14px 0; padding-right:0; }
#profile-dialog .profile-heading h2 { font-size:24px; }
#profile-edit-dialog .profile-form-actions { bottom:calc(-1 * var(--sheet-padding)); background:var(--shell-paper); }
#inventory-dialog, html[data-mobile-shell="true"] #inventory-dialog {
  border:1.5px solid var(--shell-edge); border-radius:14px; box-shadow:0 8px 28px #243e3433;
}
#inventory-dialog #inventory-panel, html[data-mobile-shell="true"] #inventory-dialog #inventory-panel {
  padding:16px; border:0; border-radius:0;
}
#inventory-dialog #inventory-panel .inventory-heading { min-height:44px; margin-bottom:12px; }
.mobile-menu-heading { background:var(--shell-paper); border-bottom:1px solid var(--shell-line); color:var(--shell-ink); }
.mobile-menu-heading h2 { color:var(--shell-ink); }

/* Selected game-modal system: fixed header/actions and independently scrolling content. */
html dialog.game-modal:is(#markers-dialog,#request-dialog,#settings-dialog,#account-dialog,#profile-dialog,#profile-edit-dialog,#help) {
  padding:0; width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px);
  overflow:hidden; border:2px solid #46634e; border-radius:14px;
  background:var(--shell-paper); color:var(--shell-ink);
  box-shadow:0 3px 0 #244437,0 8px 24px #18362a33; text-align:left;
}
html dialog.game-modal[open] { display:flex; flex-direction:column; }
html dialog.game-modal::backdrop { background:#193e2b45; }
:is(#settings-dialog,#markers-dialog,#request-dialog,#account-dialog,#profile-dialog,#profile-edit-dialog,#help) .game-modal-heading {
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:66px; margin:0; padding:10px 20px; border:0;
  background:#244e39; box-shadow:inset 0 2px 0 #698369; color:var(--shell-paper);
}
:is(#settings-dialog,#markers-dialog,#request-dialog,#account-dialog,#profile-dialog,#profile-edit-dialog,#help) .game-modal-heading h2 {
  display:flex; align-items:center; gap:12px; margin:0; padding:0;
  font:700 24px/1.3 var(--font-game); color:var(--shell-paper);
}
.game-modal-heading h2 .game-icon { width:26px; height:26px; }
.game-modal-heading form { margin:0; }
:is(#markers-dialog,#request-dialog,#account-dialog,#profile-dialog,#profile-edit-dialog,#help) .game-modal-heading .dialog-close, #settings-dialog #settings-close {
  position:static; flex:none; margin:0; width:44px; min-width:44px; height:44px;
  border:1px solid #bcc1a7; border-radius:8px; background:var(--shell-paper); color:var(--shell-ink);
  box-shadow:inset 0 -2px 0 #e5dcbc; font:400 24px/1 var(--font-ui);
}
.game-modal > .game-modal-body { min-height:0; padding:22px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.game-modal > .game-modal-body > :first-child { margin-top:0; }
.game-modal > .game-modal-body > :last-child { margin-bottom:0; }
.game-modal-footer { flex:none; padding:16px 22px 20px; border-top:1px solid var(--shell-line); background:var(--shell-paper); }
.game-modal-footer > button { margin:0; }
html dialog#help.game-modal { width:560px; }
:is(#account-dialog,#profile-edit-dialog,#help).game-modal .primary-button, #account-dialog.game-modal #account-browse.primary-button {
  min-height:48px; padding:10px 16px; border:1.5px solid #c9902c; border-radius:9px;
  background:#ffdc79; color:var(--shell-ink); box-shadow:inset 0 1px 0 #fff3ba,inset 0 -3px 0 #eabd56; font:700 18px/1.4 var(--font-game);
}
#account-dialog #account-copy, #help #help-intro { font:400 14px/1.8 var(--font-ui); color:#526456; }
#account-dialog #account-name { margin:0 0 8px; font:700 18px/1.5 var(--font-ui); color:var(--shell-ink); overflow-wrap:anywhere; }
#account-dialog .account-energy { margin:20px 0; background:#f1efdc; border:1px solid var(--shell-line); box-shadow:none; }
#account-dialog .account-energy strong { font:700 28px/1.4 var(--font-game); }
#account-dialog #account-rules { background:none; padding:0; font:400 13px/1.8 var(--font-ui); color:#586f64; }
#account-dialog #account-logout { width:100%; margin-top:10px; }
#account-dialog .account-privacy { margin-top:20px; }
#profile-dialog .profile-heading { margin:0; padding:0; }
#profile-dialog #profile-name { margin:0; font:700 22px/1.5 var(--font-game); }
#profile-dialog #profile-avatar { flex:none; width:72px; height:60px; }
#profile-dialog #profile-bio { padding:18px 0; margin:18px 0 0; border-top:1px solid var(--shell-line); font:400 15px/1.8 var(--font-ui); }
#profile-dialog .profile-actions { margin-top:4px; }
#profile-edit-dialog #profile-edit-copy { margin:0 0 18px; color:#586f64; }
#profile-edit-dialog .profile-field { margin-top:18px; }
#profile-edit-dialog .profile-form-actions { position:static; margin:0; padding:16px 22px 20px; gap:10px; }
#profile-edit-dialog #profile-avatar-options > button { background:var(--shell-paper); border-color:var(--shell-line); min-height:72px; }
#profile-edit-dialog #profile-avatar-options > button[aria-pressed="true"] { background:#fff0c8; border-color:#c9902c; box-shadow:inset 0 0 0 1px #c9902c; }
#help .help-quick { margin:20px 0; }
#help .help-quick h3 { font:700 18px/1.5 var(--font-game); }
#help .help-quick ol { margin:16px 0 0; }
#help .help-quick li { padding-left:38px; margin:18px 0; }
#help .help-quick li::before { width:26px; height:26px; background:#e5ecd9; color:var(--shell-ink); font-weight:600; }
#help li strong { font:600 15px/1.5 var(--font-ui); }
#help li span { font:400 14px/1.8 var(--font-ui); color:#526456; }
#help .help-details { margin-bottom:0; }
#help .help-details .help-note { font-size:12px; }
#request-dialog .request-draft-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:18px; }
#request-dialog #request-relocate { flex:none; min-height:44px; margin:0; padding:8px 12px; font:600 13px/1.4 var(--font-ui); }
#request-pins .request-map-pin[data-arrival="true"] { outline:3px solid #e2a136; outline-offset:3px; background:#fff0b433; box-shadow:0 0 0 7px #fffbee99; }
@media(max-width:760px) {
  .game-modal-footer, #profile-edit-dialog .profile-form-actions { padding:12px 18px 16px; }
}
html dialog#markers-dialog.game-modal { width:590px; }
#markers-dialog .note-toolbar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; }
.note-toolbar > div { display:flex; gap:8px; }
.note-toolbar button { min-height:44px; min-width:96px; padding:8px 16px; border:1px solid var(--shell-line); border-radius:8px; background:var(--shell-paper); color:var(--shell-ink); font:600 14px/1.4 var(--font-ui); }
.note-toolbar button[aria-pressed="true"] { border-color:#244e39; background:#2d593e; color:#fffbee; box-shadow:inset 0 1px 0 #648565; }
.note-toolbar > span { color:#526456; font:600 13px/1.4 var(--font-ui); white-space:nowrap; }
#markers-dialog #marker-list { min-height:100px; max-height:510px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#9ca58e transparent; margin:0 14px 0 20px; padding:0 6px 0 0; border-top:1px solid var(--shell-line); }
#markers-dialog .marker-entry { display:flex; gap:6px; margin:0; padding:0; border:0; border-bottom:1px solid var(--shell-line); border-radius:0; background:transparent; }
#markers-dialog .marker-jump { display:grid; grid-template-columns:44px minmax(0,1fr) 20px; gap:12px; align-items:center; width:100%; min-width:0; min-height:84px; margin:0; padding:14px 6px; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:left; color:var(--shell-ink); }
#markers-dialog .marker-jump:hover, #markers-dialog .marker-jump:focus-visible { background:#ecf0de; }
#markers-dialog .marker-jump:focus-visible { outline-offset:-3px; }
#markers-dialog .marker-jump strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font:600 18px/1.5 var(--font-ui); color:var(--shell-ink); }
#markers-dialog .marker-entry span { display:block; margin:0; }
#markers-dialog .marker-jump .note-row-copy { min-width:0; }
.note-avatar, #request-avatar { object-fit:contain; border-radius:12px; background:#f6efd9; }
#markers-dialog .marker-jump .note-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:6px; font:400 13px/1.5 var(--font-ui); color:#586f64; }
#markers-dialog .note-meta > span:first-child { overflow:hidden; text-overflow:ellipsis; max-width:100%; color:inherit; font:inherit; }
.note-meta time { white-space:nowrap; }
.note-meta time::before { content:'·'; margin-right:8px; }
.game-modal .note-own, #markers-dialog .note-meta .note-own { display:inline-block; flex:none; padding:2px 9px; border-radius:6px; background:#ffe3c4; color:#995026; font:600 12px/1.45 var(--font-ui); white-space:nowrap; }
#markers-dialog .marker-jump .marker-go { display:block; width:18px; height:18px; color:var(--shell-ink); }
#markers-dialog .marker-cancel { align-self:center; min-width:44px; min-height:44px; padding:8px; }
#markers-dialog .marker-empty { margin:0; padding:36px 16px; text-align:center; font:400 14px/1.7 var(--font-ui); }
#markers-dialog .note-footer { flex:none; padding:14px 20px 18px; }
#markers-dialog .note-footer p { margin:0 0 10px; font:400 12px/1.5 var(--font-ui); color:#586f64; }
.game-modal :is(#request-create,#request-build,#request-save) { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; margin:0; padding:10px 16px; border:1.5px solid #c9902c; border-radius:9px; background:#ffdc79; color:var(--shell-ink); box-shadow:inset 0 1px 0 #fff3ba,inset 0 -3px 0 #eabd56; font:700 18px/1.4 var(--font-game); }
.game-modal :is(#request-create,#request-build,#request-save):hover:not(:disabled) { background:#ffe491; }
.game-modal :is(#request-create,#request-build,#request-save):disabled { opacity:.5; }
#request-dialog .note-author { display:flex; align-items:center; gap:14px; }
#request-dialog .note-author > div { min-width:0; }
#request-dialog .note-author-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#request-dialog .note-author strong { font:700 17px/1.5 var(--font-ui); overflow-wrap:anywhere; }
#request-date { display:block; margin-top:5px; color:#586f64; font:400 12px/1.5 var(--font-ui); }
#request-dialog #request-copy { margin:22px 0; padding:22px 0; border-top:1px solid var(--shell-line); border-bottom:1px solid var(--shell-line); border-radius:0; background:none; font:600 20px/1.75 var(--font-ui); color:var(--shell-ink); }
#request-dialog .note-location { display:flex; align-items:center; gap:8px; margin:0 0 22px; font:600 14px/1.5 var(--font-ui); }
#request-dialog #request-build { margin:0 0 10px; }
#request-dialog #request-manage button { flex:1; min-height:44px; font:600 14px/1.4 var(--font-ui); }
#request-dialog #request-remove { color:#9a3831; }
#request-dialog #request-draft-location { margin:0; color:#586f64; font:400 13px/1.5 var(--font-ui); }
#request-dialog #request-form label { font-size:14px; }
#request-dialog #request-form .selection-actions { margin-top:12px; }
#request-dialog #request-save { flex:1; width:auto; }
#request-dialog #request-edit-cancel { flex:1; margin:0; font-size:14px; }
#settings-dialog .settings-section { margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--shell-line); }
#settings-dialog .settings-language { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center; margin:0; padding:0; border:0; }
#settings-dialog .settings-section :is(h3,label,legend) { color:var(--shell-ink); font:600 15px/1.5 var(--font-ui); }
#settings-dialog .language-select { min-height:44px; padding:8px 12px; font:400 14px/1.5 var(--font-ui); }
#settings-dialog .settings-sound-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#settings-dialog .sound-toggle { margin:0; padding:0 0 0 12px; }
#settings-dialog #edit-sound-enabled { appearance:none; position:relative; width:44px; height:26px; margin:0; border:1px solid #819076; border-radius:16px; background:#b4bdac; cursor:pointer; }
#edit-sound-enabled::before { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fffbee; box-shadow:0 1px 2px #24443733; }
#settings-dialog #edit-sound-enabled:checked { background:#50784c; border-color:#50784c; }
#edit-sound-enabled:checked::before { transform:translateX(18px); }
#settings-dialog .sound-tone { margin:12px 0 0; padding:0; border:0; min-width:0; }
#settings-dialog .sound-tone legend { float:left; width:96px; padding:12px 0; }
#settings-dialog .sound-tone-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-left:108px; }
#settings-dialog .sound-tone-options label { position:relative; display:flex; justify-content:center; margin:0; padding:10px 6px; border:1px solid var(--shell-line); border-radius:8px; font-size:13px; background:var(--shell-paper); }
#settings-dialog .sound-tone-options input { position:absolute; width:1px; height:1px; opacity:0; }
#settings-dialog .sound-tone-options label:has(input:checked) { background:#446e3e; border-color:#355d31; color:#fffbee; }
#settings-dialog .sound-tone-options label:has(input:focus-visible) { outline:3px solid #a64e28; outline-offset:2px; }
#settings-dialog .sound-tone-options label:has(input:disabled) { opacity:.45; cursor:default; }
#settings-dialog .settings-volume { display:grid; grid-template-columns:96px minmax(0,1fr) 38px; align-items:center; gap:12px; margin-top:10px; }
#settings-dialog #edit-sound-value { font:400 13px/1.5 var(--font-ui); text-align:right; }
#settings-dialog .settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#settings-dialog .settings-links { display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:20px; padding-top:18px; border-top:1px solid var(--shell-line); }
#settings-dialog .settings-links a { font:400 12px/1.5 var(--font-ui); }
#settings-dialog #analytics-settings { order:-1; flex:0 0 auto; margin:0 100% 4px 0; white-space:nowrap; min-height:44px; font:600 13px/1.4 var(--font-ui); }
@media(max-width:760px) {
  dialog:not(#inventory-dialog):not(#mobile-menu) { --sheet-padding:16px; }
  #inventory-dialog #inventory-panel, html[data-mobile-shell="true"] #inventory-dialog #inventory-panel { padding:12px; }
  html dialog.game-modal { max-height:calc(100dvh - 24px); }
  :is(#settings-dialog,#markers-dialog,#request-dialog,#account-dialog,#profile-dialog,#profile-edit-dialog,#help) .game-modal-heading { padding:8px 14px; min-height:62px; }
  .game-modal > .game-modal-body { padding:18px; }
  #markers-dialog .note-toolbar { padding:10px 14px; }
  .note-toolbar button { min-width:82px; padding:8px 12px; }
  #markers-dialog #marker-list { margin-left:14px; margin-right:8px; }
  #markers-dialog .marker-jump { grid-template-columns:36px minmax(0,1fr) 16px; gap:10px; padding:14px 2px; }
  #markers-dialog .note-avatar { width:36px; height:36px; }
  #markers-dialog .marker-jump strong { font-size:15px; }
  #markers-dialog .marker-jump .note-meta { font-size:12px; }
  #request-dialog #request-copy { font-size:18px; }
  #markers-dialog .note-footer { padding:12px 14px 14px; }
  #settings-dialog .settings-language { grid-template-columns:86px minmax(0,1fr); gap:10px; }
  #settings-dialog .sound-tone legend { width:86px; }
  #settings-dialog .sound-tone-options { margin-left:96px; }
  #settings-dialog .settings-volume { grid-template-columns:86px minmax(0,1fr) 34px; gap:10px; }
}