:root {
  --ink: #2b2033; --paper: #f4ecdc; --paper2: #e8dcc4; --shadow: #1a1222;
  --accent: #e0703a; --accent2: #3a9a8a; --app: #8b5cf6; --beh: #0d9488; --con: #d97706;
  --title: #5a3a6a; --title2: #8a4a6a;
  --font: 'VT323', ui-monospace, monospace; --pix: 'Silkscreen', 'VT323', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #140c1c; color: var(--ink); font-family: var(--font); font-size: 19px; }
#game { position: fixed; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
.hidden { display: none !important; }
kbd { font-family: var(--pix); font-size: 10px; background: rgba(0,0,0,.25); padding: 1px 4px; margin-left: 6px; border-radius: 2px; }

/* ---------- the Pocket HUD (js/ui.js UI.init): dark chips at the edges, the world keeps the screen ---------- */
/* The HUD is drawn for a 1280×720 window and grows with the screen: --hud-z (set by UI.fitHud)
   scales each corner about its own corner, so a wide or 4K screen gets the same proportions.
   --hud-x is the side margin: 12px, more on an ultrawide screen so the corners stay near the middle. */
:root { --hud-z: 1; --hud-x: 12px; --vw: calc(100vw / var(--hud-z)); --vh: calc(100vh / var(--hud-z)); --glass: rgba(26,18,34,.8); --glass-line: rgba(255,244,224,.28); --cream: #fff4e0; --outline: 2px 2px 0 #1a1222, -1px -1px 0 #1a1222, 1px -1px 0 #1a1222, -1px 1px 0 #1a1222; }
.px { display: inline-flex; flex: none; font-style: normal; }
.px svg { display: block; }
#hud kbd, #hud-right kbd, #dock kbd, #feed kbd { margin: 0; border-radius: 0; background: var(--cream); color: var(--ink); font-size: 9px; padding: 2px 5px; text-shadow: none; }
/* top left: you and the clock */
#hud { position: fixed; left: var(--hud-x); top: 12px; transform: scale(var(--hud-z)); transform-origin: 0 0; z-index: 10; display: flex; align-items: center; gap: 10px; background: var(--glass); color: var(--cream); border: 2px solid var(--glass-line); padding: 3px 12px 3px 3px; font-size: 22px; line-height: 1; pointer-events: none; }
.hud-face { position: relative; width: 30px; height: 30px; overflow: hidden; background: #8ec8e0; flex: none; }
#hud-face { position: absolute; left: -1px; top: 0; width: 32px; height: 60px; image-rendering: pixelated; }
#hud-name { font-family: var(--pix); font-size: 11px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-coins { display: flex; align-items: center; gap: 4px; color: #ffd860; }
.hud-dot { width: 3px; height: 3px; background: var(--glass-line); flex: none; }
.hud-clock { display: flex; align-items: center; gap: 5px; }
/* top centre: where you are, lettered straight onto the world */
#hud-place { position: fixed; left: 50%; top: 14px; transform: translateX(-50%) scale(var(--hud-z)); transform-origin: 50% 0; z-index: 10; width: max-content; max-width: calc(100vw / var(--hud-z) - 560px); text-align: center; color: var(--cream); text-shadow: var(--outline); pointer-events: none; line-height: 1.15; }
#hud-loc { display: block; font-family: var(--pix); font-size: 16px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
#hud-sub { font-size: 16px; }
/* top right: the tool rail */
#hud-right { position: fixed; right: var(--hud-x); top: 12px; transform: scale(var(--hud-z)); transform-origin: 100% 0; z-index: 10; display: flex; flex-direction: column; gap: 6px; }
.hud-btn { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--glass); color: var(--cream); border: 2px solid var(--glass-line); padding: 0; }
.hud-btn:hover, .hud-btn:focus-visible { border-color: var(--cream); outline: none; }
.hud-btn:active { transform: translate(1px, 1px); }
.hud-btn.on { background: #ffd860; color: var(--ink); border-color: var(--ink); }
.hud-btn.disabled { opacity: .5; }
.hud-tip { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; pointer-events: none; color: var(--cream); font-size: 17px; line-height: 1; }
#hud-right .hud-tip kbd { background: none; color: var(--cream); opacity: .8; padding: 0; text-shadow: var(--outline); }
.hud-tip-l { display: none; }
.hud-btn:hover .hud-tip, .hud-btn:focus-visible .hud-tip { background: var(--glass); border: 2px solid var(--glass-line); padding: 3px 8px; }
.hud-btn:hover .hud-tip-l, .hud-btn:focus-visible .hud-tip-l { display: inline; }
#hud-right .hud-btn:hover .hud-tip kbd, #hud-right .hud-btn:focus-visible .hud-tip kbd { text-shadow: none; }
#music-btn { color: #ff90d0; }
.hud-badge { position: absolute; right: -6px; top: -6px; background: #d04a4a; color: #fff; font-family: var(--pix); font-size: 9px; line-height: 1.3; padding: 0 4px; }
/* bottom centre: the action prompt, the Build bar, the bag */
#dock { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%) scale(var(--hud-z)); transform-origin: 50% 100%; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc((100vw - 24px) / var(--hud-z)); pointer-events: none; }
#dock > * { pointer-events: auto; }
#prompt { display: flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--glass); color: var(--cream); border: 2px solid var(--glass-line); padding: 2px 12px 3px 6px; font-family: var(--font); font-size: 19px; line-height: 1.1; cursor: pointer; }
#prompt:hover { border-color: var(--cream); }
#slot-tip { position: fixed; z-index: 3000; background: var(--glass); color: var(--cream); border: 2px solid var(--glass-line); padding: 1px 8px; font-size: calc(17px * var(--hud-z)); white-space: nowrap; pointer-events: none; }
#prompt > span:first-child { padding-left: 6px; }
#prompt kbd.go { background: #ffd860; }
.pr-key { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; opacity: .9; }
#build-bar { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; background: var(--glass); color: var(--cream); border: 2px solid #ffd860; padding: 4px 10px 4px 4px; }
#build-bar > b { display: flex; align-items: center; gap: 6px; font-family: var(--pix); font-size: 10px; font-weight: normal; text-transform: uppercase; background: #ffd860; color: var(--ink); padding: 5px 8px; margin-right: 2px; white-space: nowrap; }
.bb-tool { background: none; border: 2px solid var(--glass-line); padding: 0 8px; font-size: 17px; color: var(--cream); white-space: nowrap; }
.bb-tool:hover { border-color: var(--cream); }
.bb-keys { display: flex; align-items: center; gap: 5px; font-size: 16px; margin-left: 6px; white-space: nowrap; }
body.build::after { content: ''; position: fixed; inset: 4px; border: calc(2px * var(--hud-z)) dashed rgba(255,216,96,.7); pointer-events: none; z-index: 9; }
#inventory { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; }
#inv-items { display: flex; gap: 4px; }
#inventory.open #inv-items { flex-wrap: wrap; justify-content: center; max-width: 496px; max-height: 174px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cream) transparent; }
#inventory:not(.open) .inv-item:nth-child(n+7) { display: none; }
.inv-empty { display: flex; align-items: center; gap: 8px; background: var(--glass); color: var(--cream); border: 2px solid var(--glass-line); font-size: 16px; padding: 4px 10px; white-space: nowrap; }
.inv-item { position: relative; width: 46px; height: 54px; background: #e8dcc4; border: 2px solid #c8b898; padding: 0; flex: none; }
.inv-item img { width: 34px; height: 49px; image-rendering: pixelated; }
.inv-item:hover, .inv-item.on { border-color: var(--ink); background: #fff4d8; }
#inv-items .inv-item { background: var(--glass); border-color: var(--glass-line); }
#inv-items .inv-item:hover { border-color: var(--cream); }
#inv-items .inv-item.on { background: rgba(255,216,96,.92); border-color: var(--cream); }
#inv-items .inv-box { background: #d8b078; border-color: #8a6030; }
.inv-k { position: absolute; left: 3px; top: 1px; font-family: var(--pix); font-size: 8px; text-decoration: none; color: var(--cream); opacity: .7; }
.inv-item.on .inv-k, .inv-box .inv-k { color: var(--ink); }
.inv-n { position: absolute; right: 1px; bottom: 0; font-family: var(--pix); font-size: 10px; background: var(--ink); color: #fff; padding: 0 3px; }
#inv-more { height: 54px; min-width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--glass); color: var(--cream); border: 2px solid var(--glass-line); padding: 0 6px; font-size: 17px; line-height: .9; flex: none; }
#inv-more:hover, #inv-more.on { border-color: var(--cream); }
#dock #inv-more kbd { font-size: 8px; background: none; color: var(--cream); opacity: .7; padding: 0; }
/* bottom left: the feed (what was said, what happened) and the chat line */
#feed { position: fixed; left: var(--hud-x); bottom: 12px; transform: scale(var(--hud-z)); transform-origin: 0 100%; z-index: 2000; width: 340px; max-width: calc(50vw / var(--hud-z) - 190px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--cream); font-size: 18px; pointer-events: none; }
#feed-log { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.feed-l { display: flex; align-items: baseline; gap: 6px; background: var(--glass); padding: 1px 8px 2px; line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; transition: opacity .5s; }
.feed-l b { font-weight: normal; flex: none; }
.feed-l.me b { color: #ffd860; }
.feed-l .px { align-self: center; }
.feed-l.sys { color: #d0c8e0; } .feed-l.sys.good { color: #9ae0b0; } .feed-l.sys.msg { color: #e8b8f4; }
.feed-l.out { opacity: 0; }
.feed-l.old { display: none; }
#feed:focus-within #feed-log { max-height: min(260px, 40vh); overflow-y: auto; flex-wrap: nowrap; pointer-events: auto; scrollbar-width: thin; scrollbar-color: var(--cream) transparent; display: block; }
#feed:focus-within .feed-l { display: flex; opacity: 1; width: fit-content; margin-bottom: 2px; }
#chat { display: flex; align-items: center; pointer-events: auto; max-width: 100%; position: relative; }
/* what a command in the chat line could be completed to (js/ui.js chatAssist) */
#chat-ac { position: absolute; left: 0; bottom: calc(100% + 4px); width: 340px; max-height: 232px; overflow-y: auto; background: var(--glass); border: 2px solid var(--cream); color: var(--cream); font-size: 18px; }
#chat-ac .ac { display: flex; align-items: center; gap: 8px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
#chat-ac .ac img { width: 17px; height: 24px; image-rendering: pixelated; flex: none; }
#chat-ac .ac span { opacity: .6; overflow: hidden; text-overflow: ellipsis; }
#chat-ac .ac.on, #chat-ac .ac:hover { background: var(--cream); color: var(--ink); }
.chat-hint { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; color: var(--cream); font-size: 17px; text-shadow: var(--outline); opacity: .85; }
.chat-hint:hover { opacity: 1; }
#chat-in { width: 0; padding: 0; border: 0; opacity: 0; position: absolute; font-family: var(--font); font-size: 19px; background: var(--glass); color: var(--cream); outline: none; }
#chat-in::placeholder { color: var(--cream); opacity: .5; }
#chat:focus-within .chat-hint { display: none; }
#chat:focus-within #chat-in { position: static; width: 300px; max-width: 100%; opacity: 1; padding: 4px 8px; border: 2px solid var(--cream); }
/* seated at the computer, only what happened shows, in a strip under the screen */
body.pc-open #feed { left: 50%; transform: translateX(-50%) scale(var(--hud-z)); transform-origin: 50% 100%; bottom: 14px; width: max-content; max-width: calc((100vw - 32px) / var(--hud-z)); align-items: center; }
body.pc-open #feed-log { align-items: center; }
body.pc-open #feed .feed-l { background: rgba(26,18,34,.94); border: 1px solid var(--glass-line); }
body.pc-open #feed .say, body.pc-open #chat { display: none; }
#tooltip { position: fixed; z-index: 3000; display: none; background: var(--ink); color: #fff4e0; padding: calc(2px * var(--hud-z)) calc(8px * var(--hud-z)); font-size: calc(17px * var(--hud-z)); pointer-events: none; white-space: nowrap; border: 1px solid #fff4e0; }
#popover { position: fixed; transform: scale(var(--hud-z)); transform-origin: 0 0; z-index: 1500; background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow); padding: 6px; width: 190px; display: flex; flex-direction: column; gap: 3px; }
#popover button { text-align: left; background: #fffaf0; border: 2px solid #c8b898; padding: 2px 8px; }
#popover button:hover { border-color: var(--ink); }
#popover button.danger { color: #a02a2a; }
.pop-title { font-family: var(--pix); font-size: 12px; }
.pop-sub { font-size: 15px; opacity: .65; margin-bottom: 3px; }

/* windows */
/* World windows sit in a layer that grows with the screen like the HUD (js/ui.js bounds()): the
   layer is the viewport divided by --hud-z, scaled back up. Size windows with --vw / --vh. */
#windows { position: fixed; left: 0; top: 0; width: var(--vw); height: var(--vh); transform: scale(var(--hud-z)); transform-origin: 0 0; z-index: 100; pointer-events: none; }
#windows > * { pointer-events: auto; }
.win { position: fixed; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 rgba(10,6,16,.6); max-width: calc(var(--vw) - 16px); max-height: calc(var(--vh) - 60px); display: flex; flex-direction: column; }
.win-title { background: linear-gradient(90deg, var(--title), var(--title2)); color: #fff4e0; padding: 4px 6px 4px 8px; display: flex; align-items: center; gap: 8px; cursor: move; user-select: none; font-family: var(--pix); font-size: 12px; border-bottom: 3px solid var(--ink); }
.win-name { flex: 1; }
.win-x { background: var(--paper); border: 2px solid var(--ink); width: 22px; height: 20px; line-height: 12px; padding: 0; font-size: 18px; }
.no-close .win-x { display: none; }
.win-body { padding: 12px 14px; overflow: auto; }
.win.paper .win-body { background: #fbf5e6; }
.win p { margin: 6px 0 10px; line-height: 1.05; }
h2, h3, h4 { font-family: var(--pix); font-weight: normal; margin: 4px 0 8px; }
h3 { font-size: 15px; } h4 { font-size: 12px; margin-top: 14px; }
.lead { font-size: 21px; }
.dim { opacity: .62; }
.center { text-align: center; }
.hint { font-size: 16px; opacity: .7; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row.end { justify-content: flex-end; margin-top: 12px; }
.b { background: #fffaf0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 3px 12px; color: var(--ink); }
.b:hover { background: #fff; }
.b:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.b.primary { background: #ffd860; }
.b.big { font-size: 24px; padding: 4px 20px; }
.b.small { padding: 1px 8px; font-size: 17px; }
.b.on { background: var(--ink); color: #fff4e0; }
.b.danger { color: #a02a2a; }
.field { font-family: var(--font); font-size: 19px; border: 2px solid var(--ink); background: #fffdf6; padding: 3px 6px; color: var(--ink); max-width: 100%; }
.field.small { font-size: 17px; padding: 1px 4px; }
input.field { width: 100%; }
label input.field { width: auto; }
.err { color: #c03030; font-size: 16px; min-height: 1em; }
.check { font-size: 16px; display: inline-flex; align-items: center; gap: 4px; }

/* creator */
.creator { display: flex; gap: 18px; align-items: flex-start; }
.creator-prev { background: radial-gradient(circle at 50% 70%, #6ab04a 0 40%, #4a8a3a 41% 46%, transparent 47%); padding: 18px 30px 12px; border: 3px solid var(--ink); background-color: #8ec8e0; }
.avatar-big { width: 128px; height: 240px; image-rendering: pixelated; display: block; }
.creator-opts { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sw-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sw-row > span { width: 50px; font-family: var(--pix); font-size: 10px; }
.sw { width: 22px; height: 22px; border: 2px solid var(--ink); padding: 0; }
.sw.on { outline: 3px solid #ffd860; outline-offset: -1px; transform: scale(1.12); }
.triad { display: flex; gap: 8px; margin: 6px 0 10px; }
.triad > div { flex: 1; color: #fff; padding: 6px 8px; border: 2px solid var(--ink); display: flex; flex-direction: column; }
.triad b { font-family: var(--pix); font-size: 11px; font-weight: normal; }
.triad span { font-size: 16px; opacity: .9; }
.t-app { background: var(--app); } .t-beh { background: var(--beh); } .t-con { background: var(--con); }
.steps li { margin: 4px 0; }

/* OS */
.win.os .win-body { padding: 0; display: flex; flex-direction: column; background: #efe6d2; }
.os-tabs { display: flex; gap: 2px; background: #d8cbb0; padding: 6px 8px 0; border-bottom: 3px solid var(--ink); }
.os-tab { background: #e8dcc4; border: 2px solid var(--ink); border-bottom: none; padding: 3px 14px; font-family: var(--pix); font-size: 11px; }
.os-tab.on { background: #efe6d2; position: relative; top: 3px; padding-bottom: 6px; }
.os-pane { padding: 10px 14px 14px; overflow: auto; }
.pane-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Studio: menu bar, name + template, the three parts, status line */
.win.app-studio .win-body.os-pane { padding: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.win.app-studio .win-name .st-sub { font-style: normal; font-family: var(--font); font-size: 17px; opacity: .8; margin-left: 8px; letter-spacing: 1px; }
.ic { display: inline-flex; flex: none; font-style: normal; }
.ic svg { display: block; width: 18px; height: 18px; }
.st-menubar { display: flex; gap: 2px; padding: 1px 8px; border-bottom: 2px solid #c8b898; }
.st-menubar button { background: none; border: none; font-family: var(--font); font-size: 18px; line-height: 20px; padding: 0 9px; color: var(--ink); }
.st-menubar button:hover, .st-menubar button.open { background: var(--title); color: #fff4e0; }
.st-menu { min-width: 230px; }
.st-menu .ck { display: inline-block; width: 18px; font-style: normal; }
.st-menu kbd { font-size: 10px; opacity: .75; }
.st-menu button.off { opacity: .4; pointer-events: none; }
.st-main { flex: 1; min-height: 0; overflow: auto; padding: 4px 14px 8px; }
.st-ib { display: inline-flex; align-items: center; gap: 8px; }
.studio-head { display: flex; gap: 12px; align-items: flex-end; }
.st-doc { align-self: center; }
.st-doc svg { width: 30px; height: 30px; }
.st-f { display: flex; flex-direction: column; gap: 1px; font-family: var(--pix); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.st-f .field { width: 250px; height: 28px; box-sizing: border-box; font-size: 19px; padding: 1px 6px; }
.st-f select.field { width: 290px; }
.st-fork { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.studio-tabs { display: flex; gap: 8px; margin: 6px 0; }
.stab { flex: 1; color: #fff; border: 3px solid var(--ink); padding: 1px 12px; text-align: left; display: flex; align-items: center; gap: 12px; position: relative; opacity: .72; }
.stab > .ic svg { width: 24px; height: 24px; }
.stab-t { display: flex; flex-direction: column; line-height: 1; }
.stab b { font-family: var(--pix); font-size: 13px; font-weight: normal; letter-spacing: 1px; }
.stab-t span { font-size: 15px; }
.stab.on { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 3px 3px 0 var(--ink); }
.stab-appearance { background: var(--app); } .stab-behavior { background: var(--beh); } .stab-content { background: var(--con); }
.dot { position: absolute; right: 8px; top: 8px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; }
.dot.done { background: #fff; }
.studio-body { min-height: 300px; }
.studio-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; border-top: 2px dashed #c8b898; padding-top: 6px; margin-top: 6px; }
.st-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; white-space: nowrap; overflow: hidden; }
.st-status i:not(.ic) { font-style: normal; opacity: .65; }
.app-grid { display: flex; gap: 16px; align-items: flex-start; }
.pixed-wrap { background: #2b2033; padding: 6px; border: 3px solid var(--ink); width: fit-content; }
.pixed { display: block; cursor: crosshair; image-rendering: pixelated; }
.side { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.side-h { font-family: var(--pix); font-size: 11px; }
.prev-box { background: #8ec8e0; border: 3px solid var(--ink); width: fit-content; padding: 4px 10px; }
.pix-prev { image-rendering: pixelated; display: block; }
.tools, .frames { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.frames span { font-family: var(--pix); font-size: 10px; }
.palette { display: grid; grid-template-columns: repeat(8, 24px); gap: 3px; }
textarea.code { width: 100%; height: 330px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; line-height: 1.45; background: #1a1424; color: #c8f0d8; border: 3px solid var(--ink); padding: 8px 10px; resize: vertical; tab-size: 2; caret-color: #ffd860; }
textarea.prose { width: 100%; height: 280px; font-family: var(--font); font-size: 20px; background: #fffdf6; border: 2px solid var(--ink); padding: 8px; resize: vertical; }
textarea.prose.short { height: 90px; }
/* Studio > Appearance: tool rail | toolbar, canvas, frames | preview and view options; the
   animation bar runs under the last two */
.ap-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) 200px; gap: 6px 12px; align-items: start; }
.ap-rail, .ap-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-sec { display: flex; flex-direction: column; gap: 5px; }
.ap-h { display: flex; align-items: center; justify-content: space-between; min-height: 22px; border-bottom: 2px solid #d8cbb0; padding-bottom: 2px; }
.ap-h .side-h { letter-spacing: 1px; text-transform: uppercase; }
.ap-grid .b.on { background: #ffd860; color: var(--ink); }
.ap-grid .b:disabled, .ap-tbar .tb:disabled { opacity: .35; pointer-events: none; }
.ap-rail .tools { flex-direction: column; align-items: stretch; gap: 5px; }
.st-tool { display: flex; align-items: center; gap: 8px; padding: 2px 6px; text-align: left; font-size: 18px; }
.st-tool span { flex: 1; }
.st-tool kbd { margin: 0; background: #fffaf0; border: 1px solid var(--ink); border-radius: 2px; padding: 1px 4px; font-size: 9px; }
.ap-custom { display: flex; align-items: center; gap: 8px; background: #fffaf0; border: 2px solid var(--ink); padding: 2px 6px 2px 3px; }
.ap-custom input[type=color] { width: 38px; height: 20px; padding: 0; border: 2px solid var(--ink); background: none; }
.ap-custom input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ap-custom input[type=color]::-webkit-color-swatch { border: none; }
.st-hex { font-size: 17px; }
.ap-rail .palette { grid-template-columns: repeat(6, 22px); gap: 3px; justify-content: space-between; }
.ap-rail .sw { width: 22px; height: 22px; }
.ap-work { min-width: 0; background: #1e1a2a; border: 3px solid var(--ink); }
.ap-tbar { display: flex; align-items: center; gap: 3px; padding: 1px 6px; background: #2b2438; border-bottom: 2px solid var(--ink); color: #e8e0f0; }
.ap-tbar .tb { display: flex; background: none; border: 2px solid transparent; padding: 2px 3px; color: inherit; }
.ap-tbar .tb:hover { border-color: #6a5c80; }
.ap-tbar .tb.on { background: #ffd860; color: var(--ink); border-color: var(--ink); }
.ap-tbar .tsep { width: 2px; height: 20px; background: #4a3f5a; margin: 0 5px; }
.ap-tbar .grow { flex: 1; }
.ap-tbar select.field { font-size: 16px; padding: 0 2px; height: 24px; }
.ap-stage { display: flex; align-items: stretch; height: 386px; }
.ap-stage .pixed-wrap { flex: 1; width: auto; min-width: 0; display: flex; overflow: auto; border: none; background: none; padding: 1px; }
.ap-stage .pixed { margin: auto; flex: none; }
.ap-frames { flex: none; width: 56px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-left: 2px solid var(--ink); background: #2b2438; }
.ap-frames .fstrip { flex: 1; min-height: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 0; max-width: none; overflow-y: auto; overflow-x: hidden; }
.ap-frames .fbtn { flex: none; border-color: #4a3f5a; background: #1e1a2a; }
.ap-frames .fbtn.on { border-color: #ffd860; outline: none; }
.ap-frames .fthumb { height: 34px; max-width: 100%; margin: 0 auto; }
.ap-fops { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.b.lb { display: inline-flex; align-items: center; justify-content: center; padding: 2px 3px; box-shadow: 1px 1px 0 var(--ink); }
.ap-fops .b.lb { padding: 1px 0; }
.ap-fops .ic svg { width: 16px; height: 16px; }
.ap-anim { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; border: 2px solid #c8b898; background: #f4ecdc; padding: 2px 10px; white-space: nowrap; }
.ap-anim .side-h { margin-right: 4px; }
.ap-anim .check { margin-left: 4px; }
.ap-anim .num { width: 50px; }
.ap-anim .b.lb { padding: 2px 6px; }
.ap-fno { font-family: var(--pix); font-size: 10px; min-width: 26px; text-align: center; }
.ap-seg { display: flex; }
.ap-seg .b + .b { margin-left: -2px; }
.ap-side .ap-seg .b { flex: 1; }
.ap-h .ap-seg .b { flex: none; padding: 0 10px; font-size: 16px; box-shadow: 1px 1px 0 var(--ink); }
/* the preview, with a facing arrow in each corner laid out as the front points on screen */
.ap-compass { position: relative; height: 232px; background: #8ec8e0; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.ap-compass.flat { background: repeating-conic-gradient(#433852 0 25%, #3a3046 0 50%) 0 0 / 16px 16px; }
.ap-compass .b { position: absolute; width: 30px; padding: 2px 0; text-align: center; }
.ap-compass .c1 { left: 6px; top: 6px; } .ap-compass .c2 { right: 6px; top: 6px; }
.ap-compass .c0 { left: 6px; bottom: 6px; } .ap-compass .c3 { right: 6px; bottom: 6px; }
.ap-compass .b.auto { border-style: dashed; color: #8a7e90; }
.ap-compass .creset { left: 50%; bottom: 6px; margin-left: -15px; display: flex; justify-content: center; }
.ap-size { display: flex; align-items: center; gap: 10px; }
.ap-size select { flex: 1; min-width: 0; }
.ap-es { justify-content: space-between; padding: 3px 10px; }
.ap-es span { flex: 1; text-align: left; }
@media (max-width: 760px) { .ap-grid { grid-template-columns: 1fr; } .ap-anim { grid-column: auto; flex-wrap: wrap; white-space: normal; } .ap-rail .tools { flex-direction: row; flex-wrap: wrap; } }
.beh-grid { display: grid; grid-template-columns: 1fr 260px; gap: 12px; }
.beh-grid .side .b { text-align: left; }
.console { background: #140c1c; color: #9ad0f0; font-family: ui-monospace, monospace; font-size: 12px; height: 150px; overflow: auto; padding: 6px; border: 2px solid var(--ink); }
.console .err { color: #ff8080; font-size: 12px; }
.state { font-family: ui-monospace, monospace; font-size: 11px; background: #2b2033; color: #ffd860; padding: 4px 6px; word-break: break-all; }
.api summary { cursor: pointer; font-size: 16px; }
.api pre, pre.ref { font-size: 11px; font-family: ui-monospace, monospace; white-space: pre-wrap; background: #fffaf0; padding: 6px; border: 1px solid #c8b898; }
/* Studio: frames and sizes */
.fstrip { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; max-width: 460px; }
.fbtn { background: #2b2033; border: 2px solid var(--ink); padding: 2px; display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: .7; }
.fbtn.on { opacity: 1; outline: 2px solid #ffd860; }
.fbtn span { font-family: var(--pix); font-size: 9px; color: #fff; }
.fthumb { height: 36px; width: auto; image-rendering: pixelated; background: #433852; display: block; }
.b.tiny { padding: 0 6px; font-size: 15px; line-height: 1.2; }
.field.num { width: 58px; }
/* Studio: Blocks 2.0 (js/blocks.js) */
.modes .b.on { background: var(--beh); color: #fff; }
.blocks2 { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow: auto; padding: 2px 2px 6px; }
.brule { background: #e6f6f1; border: 2px solid var(--beh); box-shadow: 2px 2px 0 var(--ink); }
.bhead { display: flex; align-items: center; gap: 4px; background: var(--beh); color: #fff; padding: 1px 6px; }
.bhead b { font-family: var(--pix); font-size: 10px; font-weight: normal; }
.bspace { flex: 1; }
.brow { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; padding: 4px 6px; }
.brow > i { font-style: normal; font-family: var(--pix); font-size: 10px; width: 38px; padding-top: 5px; color: var(--beh); }
.brow.bif { background: #f2fbf8; }
.bacts { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bact { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border-left: 3px solid var(--beh); padding-left: 4px; }
.bf { display: flex; gap: 3px; align-items: center; font-size: 15px; }
.bf span { color: #5a4a6a; }
.bf .field { max-width: 190px; }
.bsel { max-width: 230px; }
.gencode summary { cursor: pointer; font-size: 16px; margin: 4px 0; }
textarea.code.gen { height: 220px; opacity: .85; }
/* Studio: test bench */
.bench-prev { image-rendering: pixelated; border: 3px solid var(--ink); display: block; max-width: 100%; height: auto !important; }
.bench-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bench-btns .b { font-size: 15px; padding: 1px 4px; }
.tracker { width: 100%; max-width: 530px; image-rendering: pixelated; border: 3px solid var(--ink); cursor: pointer; display: block; }
.bezel { background: #1a1424; padding: 12px; border: 3px solid var(--ink); border-radius: 6px; width: fit-content; box-shadow: inset 0 0 0 3px #3a2e4a; }
.cart-screen { width: 320px; height: 320px; image-rendering: pixelated; display: block; outline: none; background: #000; }
.cart-screen.small { width: 192px; height: 192px; }
.cart-screen:focus { box-shadow: 0 0 0 2px #ffd860; }
.win.cabinet .win-body { background: #2b2033; color: #fff4e0; display: flex; flex-direction: column; align-items: center; }
.cart-help { font-size: 15px; opacity: .7; margin-top: 6px; text-align: center; }
.book-text { white-space: pre-wrap; font-family: var(--font); font-size: 21px; line-height: 1.15; margin: 0; }
.by { opacity: .6; margin-bottom: 10px; }

/* files, cards */
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; gap: 10px; align-items: center; background: #fffaf0; border: 2px solid #c8b898; padding: 4px 8px; }
.file img, .card img { width: 34px; height: 49px; image-rendering: pixelated; }
.file-info { flex: 1; min-width: 0; }
.file-act { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 52%; }
.badges { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.bdg { font-style: normal; font-family: var(--pix); font-size: 8px; color: #fff; padding: 1px 4px; }
.b-app { background: var(--app); } .b-beh { background: var(--beh); } .b-con { background: var(--con); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.card { background: #fffaf0; border: 2px solid var(--ink); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.card img { width: 51px; height: 73px; align-self: center; }
.card p { font-size: 16px; margin: 2px 0; flex: 1; }
.card .badges { margin: 0; }
.card.mine { background: #fff4c8; }

/* ElseNet: deliberately 90s */
.net-nav { display: flex; gap: 12px; align-items: center; background: #c0c0c0; border: 2px inset #fff; padding: 4px 8px; margin-bottom: 8px; flex-wrap: wrap; }
.net-nav .addr { background: #fff; border: 2px inset #888; padding: 0 8px; font-family: ui-monospace, monospace; font-size: 13px; flex: 1; min-width: 160px; }
.net-nav a { color: #0000cc; text-decoration: underline; cursor: pointer; }
.net-nav a.on { color: #800080; font-weight: bold; }
.net-view { background: #fffff0; border: 2px solid #888; padding: 10px; min-height: 340px; }
.net-h { text-align: center; color: #800080; font-family: 'Times New Roman', serif; font-size: 26px; font-style: italic; }
.marquee { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { color: #e04080; } }
.post { border-bottom: 1px dashed #aaa; padding: 4px 0; }
.post summary { cursor: pointer; }
.reply { margin-left: 18px; font-size: 17px; }
.person { display: flex; gap: 10px; border-bottom: 1px dotted #aaa; padding: 6px 0; }
.person .face { width: 32px; height: 60px; image-rendering: pixelated; }
.person .role { margin-left: 8px; background: #ffe0a0; padding: 0 6px; font-size: 15px; }
.person p { margin: 2px 0; }
.made img { width: 23px; height: 33px; image-rendering: pixelated; }
.homepage { background: repeating-linear-gradient(45deg, #fff8f0 0 10px, #fff0f8 10px 20px); padding: 8px; }

/* jobs */
.job { display: flex; gap: 10px; align-items: center; background: #fffaf0; border: 2px solid var(--ink); padding: 6px 10px; margin: 6px 0; }
.job.done { opacity: .6; }
.job-r { font-family: var(--pix); font-size: 13px; background: #ffd860; border: 2px solid var(--ink); padding: 6px 8px; min-width: 64px; text-align: center; }
.job.goal .job-r { background: #9ad0f0; }
.job-info { flex: 1; }
.job-info p { margin: 2px 0; font-size: 17px; }
.job-act { display: flex; gap: 4px; align-items: center; }
.job-act select { max-width: 180px; }
.job-done { font-family: var(--pix); font-size: 11px; color: #2a6a4a; }
.help ul { margin: 4px 0; padding-left: 22px; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  #hud { left: 8px; top: 8px; gap: 8px; font-size: 20px; }
  #hud-name, .hud-dot { display: none; }
  #hud-right { right: 8px; top: 8px; }
  .hud-tip { display: none; }
  #hud-place { top: 50px; left: 8px; transform: none; width: auto; max-width: calc(100vw - 70px); text-align: left; }
  #hud-loc { font-size: 12px; letter-spacing: 1px; }
  #hud-sub { font-size: 14px; }
  #dock { bottom: 8px; }
  #feed { left: 8px; bottom: 112px; width: auto; max-width: calc(100vw - 16px); font-size: 16px; }
  #dock { width: auto; max-width: calc(100vw - 16px); }
  #chat { display: none; }
  .app-grid, .creator { flex-direction: column; }
  .beh-grid { grid-template-columns: 1fr; }
}

/* A shop's catalog: wide and short so it fits in the game window */
.win.catalog .win-body { background: #fbf3dc; padding: 0 0 12px; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: repeating-linear-gradient(135deg, #e0a030 0 14px, #d08a20 14px 28px); border-bottom: 3px solid var(--ink); color: var(--ink); }
.cat-logo { display: flex; flex-direction: column; line-height: 1.05; }
.cat-logo b { font-family: var(--pix); font-size: 20px; color: #fff4e0; text-shadow: 2px 2px 0 var(--ink); letter-spacing: 1px; }
.cat-logo span { font-size: 17px; }
.cat-wallet { background: #fffaf0; border: 2px solid var(--ink); padding: 2px 10px; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.cat-tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 3px solid var(--ink); background: #efe2c0; flex-wrap: wrap; }
.cat-tab { background: #e8d8b0; border: 2px solid var(--ink); border-bottom: none; padding: 2px 14px; font-family: var(--pix); font-size: 11px; position: relative; top: 3px; }
.cat-tab.on { background: #fbf3dc; padding-bottom: 5px; }
.win.catalog .cat-blurb { margin: 8px 16px 6px; font-size: 17px; opacity: .75; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding: 0 16px; }
.cat-item { display: flex; gap: 8px; background: #fffaf0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(43,32,51,.35); padding: 6px; }
.cat-pic { flex: none; width: 66px; display: flex; align-items: center; justify-content: center; background: #efe6d2; border: 1px dashed #c8b898; }
.cat-pic img { width: 51px; height: 73px; image-rendering: pixelated; }
.cat-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cat-info b { font-size: 19px; line-height: 1; }
.cat-desc { font-size: 15px; opacity: .7; line-height: 1.05; flex: 1; }
.cat-buy { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
.cat-price { font-family: var(--pix); font-size: 12px; background: #f8e070; border: 2px solid var(--ink); padding: 0 6px; }
.cat-owned { font-size: 15px; color: #2a6a4a; }

/* ElseCell phone */
#phone { position: fixed; right: max(18px, var(--hud-x)); bottom: 12px; z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 6px; transform-origin: 100% 100%; transform: translateY(calc(110% * var(--hud-z))) scale(var(--hud-z)); transition: transform .18s ease-out; }
#phone.on { transform: scale(var(--hud-z)); }
.ph-body { position: relative; width: 236px; background: linear-gradient(90deg, #2a2a34, #3c3c48 40%, #2a2a34); border: 3px solid #120c18; border-radius: 28px 28px 38px 38px; padding: 22px 16px 16px; box-shadow: 6px 6px 0 rgba(10,6,16,.55), inset 2px 2px 0 rgba(255,255,255,.12); }
.ph-antenna { position: absolute; right: 26px; top: -34px; width: 12px; height: 38px; background: #1a1a22; border: 3px solid #120c18; border-bottom: none; border-radius: 6px 6px 0 0; }
.ph-ear { width: 48px; height: 6px; margin: 0 auto 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #120c18 0 3px, transparent 3px 6px); }
.ph-brand { text-align: center; font-family: var(--pix); font-size: 9px; color: #b8b0c8; letter-spacing: 2px; margin-bottom: 6px; }
.ph-bezel { background: #120c18; padding: 7px; border-radius: 6px; }
.ph-screen { background: #a8c890; color: #1c2a18; height: 228px; display: flex; flex-direction: column; font-size: 17px; line-height: 1.05; box-shadow: inset 0 0 12px rgba(30,50,20,.45); overflow: hidden; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 2px 5px; border-bottom: 1px solid #6a8a58; font-size: 15px; }
.ph-bars { display: flex; gap: 1px; align-items: flex-end; height: 10px; }
.ph-bars i { width: 3px; background: #8aa878; }
.ph-bars i:nth-child(1) { height: 3px; } .ph-bars i:nth-child(2) { height: 5px; } .ph-bars i:nth-child(3) { height: 7px; } .ph-bars i:nth-child(4) { height: 10px; }
.ph-bars i.on { background: #1c2a18; }
.ph-batt { width: 16px; height: 8px; border: 1px solid #1c2a18; padding: 1px; position: relative; }
.ph-batt i { display: block; height: 100%; width: 75%; background: #1c2a18; }
.ph-view { flex: 1; overflow-y: auto; padding: 3px 5px; display: flex; flex-direction: column; gap: 2px; }
.ph-view::-webkit-scrollbar { width: 4px; } .ph-view::-webkit-scrollbar-thumb { background: #1c2a18; }
.ph-logo { font-family: var(--pix); font-size: 12px; text-align: center; margin-top: 6px; }
.ph-big { font-size: 40px; text-align: center; line-height: 1; }
.ph-dim { opacity: .7; font-size: 15px; text-align: center; }
.ph-note { text-align: center; margin: 10px 0 4px; border: 1px solid #1c2a18; padding: 2px; }
.ph-note.blink { animation: phblink 1s steps(2) infinite; }
@keyframes phblink { 50% { background: #1c2a18; color: #a8c890; } }
.ph-title { font-family: var(--pix); font-size: 10px; background: #1c2a18; color: #a8c890; padding: 2px 4px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.ph-row { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: none; border-bottom: 1px dotted #6a8a58; padding: 2px 2px; color: inherit; font-size: 16px; line-height: 1; flex: none; }
.ph-row:hover { background: #1c2a18; color: #a8c890; }
.ph-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ph-row.unread b { text-decoration: underline; }
.ph-n { display: inline !important; font-family: var(--pix); font-size: 9px; margin-right: 4px; }
.ph-row:has(.ph-n) { flex-direction: row; align-items: center; }
.ph-subj { font-weight: bold; text-decoration: underline; }
.ph-text { white-space: pre-wrap; font-family: inherit; font-size: 15px; margin: 2px 0; }
.ph-tx { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; border-bottom: 1px dotted #6a8a58; }
.ph-tx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-sel { font-family: inherit; font-size: 15px; background: #b8d8a0; border: 1px solid #1c2a18; color: #1c2a18; margin-top: 4px; flex: none; }
.ph-game { width: 128px; height: 128px; image-rendering: pixelated; align-self: center; border: 1px solid #1c2a18; outline: none; flex: none; margin-top: 4px; }
.ph-softs { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 8px; gap: 6px; }
.ph-soft { flex: 1; background: #55556a; color: #e8e4f0; border: 2px solid #120c18; border-radius: 10px; height: 26px; font-family: var(--pix); font-size: 10px; }
.ph-soft:empty { opacity: .5; }
.ph-nav { width: 38px; height: 30px; border-radius: 50%; background: #6a6a80; color: #a8c890; border: 2px solid #120c18; font-size: 12px; }
.ph-soft:active, .ph-nav:active, .ph-key:active { transform: translateY(1px); filter: brightness(.85); }
.ph-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 10px; }
.ph-key { background: #d8d4e0; border: 2px solid #120c18; border-radius: 40% 40% 50% 50%; height: 22px; font-family: var(--pix); font-size: 10px; color: #2a2a34; padding: 0; }
.ph-away { background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); font-family: var(--pix); font-size: 10px; padding: 2px 10px; }
@media (max-height: 640px) { .ph-keys { display: none; } }

/* ---------- the easel (js/paint.js) ---------- */
.win.painter .win-body { padding: 8px; background: #3a2e28; color: #f4ecdc; }
.win.painter .b { color: var(--ink); }
.win.painter .dim, .win.painter .hint { color: #c8b8a0; opacity: 1; }
.pt-wrap { display: flex; gap: 10px; align-items: stretch; }
.pt-left { width: 150px; display: flex; flex-direction: column; gap: 6px; }
.pt-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pt-tool { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0; background: #4a3c34; border: 2px solid #2a201c; color: #f4ecdc; font-family: var(--font); font-size: 16px; }
.pt-tool:hover { background: #5a4a40; }
.pt-tool.on { background: #f4d890; color: var(--ink); border-color: #fff4d0; }
.ti { width: 22px; height: 14px; border-radius: 2px; background: currentColor; opacity: .85; }
.ti-round { border-radius: 2px 50% 50% 2px; } .ti-flat { height: 8px; margin: 3px 0; } .ti-soft { border-radius: 50%; filter: blur(2px); }
.ti-knife { clip-path: polygon(0 40%, 70% 30%, 100% 50%, 70% 70%, 0 60%); } .ti-blend { border-radius: 50%; width: 14px; background: radial-gradient(currentColor, transparent 70%); }
.ti-spatter { background: radial-gradient(circle at 20% 30%, currentColor 2px, transparent 3px), radial-gradient(circle at 60% 60%, currentColor 3px, transparent 4px), radial-gradient(circle at 85% 25%, currentColor 1.5px, transparent 2.5px); }
.ti-gesso { background: #f4f0e4; border: 1px solid currentColor; } .ti-pick { width: 6px; transform: rotate(35deg); }
.pt-slider { display: grid; grid-template-columns: 52px 1fr 26px; align-items: center; gap: 4px; font-size: 16px; }
.pt-slider input { width: 100%; accent-color: #f4d890; }
.pt-slider b { font-weight: normal; text-align: right; }
.pt-stage { flex: 1; display: grid; place-items: center; min-height: 500px; background: radial-gradient(ellipse at 50% 40%, #5a4a40, #2a201c 80%); border: 2px solid #1a1210; }
.pt-board { position: relative; box-shadow: 0 0 0 4px #8a6a40, 0 0 0 6px #4a3420, 8px 10px 22px rgba(0,0,0,.6); }
.pt-canvas { display: block; cursor: none; touch-action: none; }
.pt-weave { position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .45; background-size: 48px 48px; }
.pt-ring { position: absolute; pointer-events: none; border: 1px solid rgba(0,0,0,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.6); border-radius: 50%; }
.pt-right { width: 256px; display: flex; flex-direction: column; gap: 6px; }
.pt-right .side-h { font-family: var(--pix); font-size: 10px; color: #c8b8a0; }
.pt-tubes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.pt-tube { height: 30px; padding: 0; border: 2px solid #1a1210; border-radius: 3px 3px 8px 8px; background: linear-gradient(180deg, #d8d8d8 0 22%, #888 22% 28%, var(--c) 28%); }
.pt-tube:hover { transform: translateY(-2px); }
.pt-current { width: 36px; height: 26px; border: 2px solid #f4ecdc; box-shadow: 0 0 0 1px #000; }
.pt-right input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid #1a1210; }
.pt-mix { display: block; width: 240px; height: 150px; border-radius: 12px 40px 30px 14px; cursor: crosshair; touch-action: none; box-shadow: 2px 3px 0 #1a1210; }
.pt-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pt-formats { display: flex; gap: 10px; justify-content: center; margin: 6px 0 4px; }
.pt-format { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 12px; background: #fffaf0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); min-width: 110px; }
.pt-format i { display: block; background: #f4f0e4; border: 2px solid #8a6a40; box-shadow: 2px 2px 0 rgba(0,0,0,.25); margin-bottom: 4px; }
.pt-format b { font-family: var(--pix); font-size: 11px; font-weight: normal; }
.pt-format span { font-size: 16px; opacity: .7; }
.pt-format:hover { background: #fff4c8; }

/* ---------- artwork viewer ---------- */
.win.artview .win-body { background: #ece6da; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; }
.art-frame { padding: 14px; background: linear-gradient(135deg, #e8c070, #a07830 40%, #f0d080 60%, #8a6020); box-shadow: inset 0 0 0 3px #5a3a10, 0 6px 14px rgba(0,0,0,.35); }
.art-frame img { display: block; max-width: 520px; max-height: 400px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.art-frame.px { background: linear-gradient(135deg, #7a5030, #4a2e1a); padding: 10px; }
.art-frame.px canvas { display: block; image-rendering: pixelated; background: #f4f0e4; }
.art-cap { text-align: center; line-height: 1; }
.art-cap b { display: block; font-family: var(--pix); font-weight: normal; font-size: 13px; }
.art-cap span { font-style: italic; opacity: .7; }
.art-mini { width: 120px; max-height: 100px; object-fit: contain; border: 3px solid #8a6a40; margin-right: 12px; background: #f4f0e4; }
.art-mini.px { image-rendering: pixelated; object-fit: cover; object-position: left; }
/* settings window */
.set-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.set-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: #3a8a6a; flex: none; }
.set-opt p { margin: 2px 0 0; }

/* ElseNet presence (js/net.js) */
.hud-net { display: flex; align-items: center; gap: 6px; font-family: var(--pix); font-size: 10px; text-transform: uppercase; align-self: flex-start; }
.hud-net i { width: 8px; height: 8px; background: #3ac860; box-shadow: 0 0 6px #3ac860; }
.hud-net.off i { background: #a09080; box-shadow: none; }
.hud-net.off { opacity: .6; }
/* ElseCell texts (js/phone.js) */
.ph-in { font-family: inherit; font-size: 15px; background: #b8d8a0; border: 1px solid #1c2a18; color: #1c2a18; padding: 1px 3px; margin-top: 3px; flex: none; outline: none; width: 100%; box-sizing: border-box; }
.ph-in::placeholder { color: #5a7a48; }
.ph-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; min-height: 60px; }
.ph-bub { align-self: flex-start; max-width: 85%; border: 1px solid #1c2a18; padding: 1px 4px; font-size: 15px; line-height: 1.05; word-wrap: break-word; white-space: pre-wrap; }
.ph-bub.out { align-self: flex-end; background: #1c2a18; color: #a8c890; }
.ph-bub.failed { opacity: .55; text-decoration: line-through; }
.ph-bub small { display: block; font-size: 11px; opacity: .65; text-align: right; }

/* Elm Apartments intercom (js/visit.js): a brass panel of buzzers. */
.win.intercom .win-body { background: #2a2420; color: #f0e2c0; }
.ic-plate { font-family: var(--pix); font-size: 12px; letter-spacing: 2px; text-align: center; color: #2a2014; background: linear-gradient(#e8c878, #b8903e); border: 2px solid #6a5020; padding: 4px; margin-bottom: 8px; }
.ic-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin: 4px 0 8px; }
.ic-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #3a322a; color: inherit; border: 2px solid #5a4a38; padding: 4px 6px; }
.ic-row:hover, .ic-row:focus { border-color: #e8c878; outline: none; }
.ic-row.me { border-color: #8a7a50; }
.ic-row.open .ic-act { color: #90e0a0; }
.ic-apt { font-family: var(--pix); font-size: 11px; min-width: 32px; text-align: center; color: #2a2014; background: #d8b868; border: 1px solid #6a5020; padding: 2px 3px; }
.ic-name { flex: 1; display: flex; flex-direction: column; line-height: 1.05; }
.ic-name small { font-size: 14px; opacity: .65; }
.ic-act { font-family: var(--pix); font-size: 10px; color: #e8c878; }
.ic-dim { font-size: 15px; opacity: .6; }
.ph-invite { color: #c8e8a0; }
.inv-del { position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; line-height: 13px; font-size: 14px; text-align: center; background: #c04040; color: #fff; border: 2px solid var(--ink); display: none; cursor: pointer; }
.inv-item:hover .inv-del { display: block; }

/* Property (js/props.js): cards, the lobby, listings, the Architect and Decorate. */
/* Never taller than the screen: the window stops well above the inventory bar and scrolls inside. */
.win.realty { max-height: min(640px, calc(var(--vh) - 220px)); }
.win.realty .win-body { background: #fbf5e6; overflow-y: auto; min-height: 0; }
.win.realty.intercom .win-body { background: #2a2420; color: #f0e2c0; }
.win.realty.intercom .rl-fact b { color: #e8c878; }
canvas.site { image-rendering: pixelated; display: block; border: 2px solid var(--ink); background: #9ac8e8; }
.rl-top { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.rl-pic { flex: none; }
.rl-facts { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.rl-fact { display: flex; gap: 8px; line-height: 1.05; }
.rl-fact b { font-family: var(--pix); font-size: 10px; min-width: 96px; padding-top: 3px; color: #6a4a2a; }
.rl-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; padding: 8px 10px; background: #fff3c8; border: 2px dashed #c8a050; color: var(--ink); }
.rl-price b { font-size: 22px; }
.rl-manage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.rl-role { font-family: var(--pix); font-size: 10px; background: var(--ink); color: #fff4e0; padding: 3px 6px; }
.rl-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rl-intro { font-size: 17px; opacity: .8; }
.rl-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.rl-row { display: flex; gap: 10px; align-items: center; background: #fffaf0; border: 2px solid var(--ink); padding: 4px 8px; color: var(--ink); }
.rl-row-pic canvas.site { border-width: 1px; max-height: 64px; width: auto !important; height: 64px !important; }
.rl-row-main { flex: 1; line-height: 1.05; }
.rl-row-main .dim { font-size: 15px; }
.rl-row-price { font-family: var(--pix); font-size: 11px; white-space: nowrap; }
.win.realty h4, .realty-site h4 { font-family: var(--pix); font-size: 11px; margin: 12px 0 4px; letter-spacing: 1px; }
.arch { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.arch-left { flex: none; display: flex; flex-direction: column; gap: 6px; width: 350px; }
.arch-pic { height: 300px; display: flex; align-items: center; justify-content: center; }
.arch-cost { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: #fff3c8; border: 2px dashed #c8a050; padding: 6px 8px; }
.arch-ctl { flex: 1; min-width: 300px; }
.arch-sec { border: 2px solid var(--ink); margin: 0 0 8px; padding: 4px 8px 8px; background: #fffaf0; }
.arch-sec legend { font-family: var(--pix); font-size: 10px; padding: 0 4px; }
.arch-row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.arch-f { display: flex; flex-direction: column; gap: 1px; font-size: 15px; margin-top: 4px; }
.arch-f > span { opacity: .7; }
.arch-f input[type=color] { width: 44px; height: 24px; border: 2px solid var(--ink); padding: 0; background: none; }
.arch-f input[type=checkbox] { width: 18px; height: 18px; }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.swatch { display: flex; align-items: center; gap: 6px; background: #fffdf6; border: 2px solid #c8b890; padding: 2px 6px; font-size: 15px; text-align: left; color: var(--ink); }
.swatch canvas { width: 24px; height: 24px; image-rendering: pixelated; border: 1px solid var(--ink); }
.swatch.on { border-color: var(--ink); background: #ffd860; }

.ic-list { max-height: min(300px, calc(var(--vh) - 560px)); min-height: 120px; }
.rl-tabbox { display: flex; flex-direction: column; min-height: 0; }
.rl-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--ink); }
.rl-tab { font-family: var(--pix); font-size: 10px; padding: 5px 6px 4px; background: #e8dcc0; border: 2px solid var(--ink); border-bottom: none; color: var(--ink); margin-bottom: -2px; }
.rl-tab.on { background: #fffaf0; position: relative; }
.rl-page { background: #fffaf0; border: 2px solid var(--ink); border-top: none; padding: 6px 10px 10px; height: min(340px, calc(var(--vh) - 380px)); overflow-y: auto; }
.win.realty:not(.architect) .rl-page { height: min(360px, calc(var(--vh) - 400px)); }
.rl-page .rl-list { margin: 0; }
.arch-sub { font-family: var(--pix); font-size: 10px; margin: 8px 0 2px; }
.arch-c { display: inline-flex; align-items: center; gap: 3px; }
.plan-tools { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 2px; }
.rl-page .arch-row { margin: 0; }
.plan-wrap { display: flex; justify-content: center; margin: 4px 0; }
canvas.plan { border: 2px solid var(--ink); cursor: crosshair; image-rendering: pixelated; max-width: 100%; }
.dim.small, p.small { font-size: 14px; line-height: 1.05; }

/* a blueprint staked out on its plot (js/props.js P.stakeOut) */
.stake { position: fixed; top: calc(14px + 50px * var(--hud-z)); left: 50%; transform: translateX(-50%) scale(var(--hud-z)); transform-origin: 50% 0; z-index: 1500; display: flex; gap: 8px; align-items: center; padding: 5px 10px; background: #163a6c; color: #d6eaff; border: 2px solid #8ab4e8; box-shadow: 3px 3px 0 rgba(0,0,0,.4); font-size: 15px; width: max-content; max-width: calc((100vw - 32px) / var(--hud-z)); flex-wrap: wrap; }
.stake b { color: #ffd860; }
body.pc-open .stake { display: none; }

/* ---------- the Sales Board of a shop (js/props.js) ---------- */
.sales-win .win-body { display: flex; flex-direction: column; gap: 8px; }
.sales-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sales-sum div { border: 2px solid var(--ink); background: #fffdf4; padding: 4px 8px; display: flex; flex-direction: column; }
.sales-sum b { font-size: 22px; color: #8a5a00; }
.sales-sum span { font-size: 13px; opacity: .75; }
.sales-list { max-height: 260px; overflow-y: auto; border: 2px solid var(--ink); background: #fff; }
.sales-tbl { width: 100%; border-collapse: collapse; }
.sales-tbl th { position: sticky; top: 0; background: #2b2033; color: #f8f0d0; text-align: left; padding: 2px 6px; font-weight: normal; }
.sales-tbl td { padding: 2px 6px; border-bottom: 1px dashed #c8c0a8; }
.sales-tbl .num { text-align: right; }
.sales-list p { margin: 8px; }

/* ---------- trading with another resident (js/trade.js) ---------- */
.win.trade .win-body { display: flex; flex-direction: column; gap: 6px; background: #fbf5e6; }
.tr-table { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-side { border: 2px solid var(--ink); background: #fffdf4; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tr-side.ok { background: #e6f4d4; border-color: #3c7a2a; }
.tr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--pix); font-size: 11px; }
.tr-head .dim { font-family: var(--font); font-size: 15px; }
.tr-ok { color: #3c7a2a; white-space: nowrap; }
.tr-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; height: 116px; overflow-y: auto; }
.tr-grid.inv { height: auto; min-height: 58px; max-height: 116px; border: 2px solid #c8b898; background: #f3ead4; padding: 4px; }
.tr-empty { opacity: .55; font-size: 16px; padding: 4px 2px; }
.tr-coins { display: flex; align-items: center; gap: 6px; height: 28px; font-size: 19px; }
.tr-coins .field { width: 90px; }
.tr-coins.some { color: #8a5a00; font-weight: bold; }
.tr-status { flex: 1; min-width: 0; font-size: 16px; opacity: .8; }
.tr-status.bad { color: #a02a2a; opacity: 1; }
.win.trade .b:disabled { opacity: .45; box-shadow: none; }

/* the bulletin board (js/ui.js openBoard): cork, pinned notes */
.win.board-win .win-body { padding: 10px; background: #6a4a30; }
.bb-cork { background: #c89a60; background-image: radial-gradient(#b08048 1px, transparent 1.5px), radial-gradient(#d8ac74 1px, transparent 1.5px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; border: 3px solid #4a3020; box-shadow: inset 0 0 0 2px #8a6038; padding: 16px 14px; max-height: min(420px, calc(var(--vh) - 220px)); overflow: auto; }
.bb-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
.bb-note, .bb-sheet { position: relative; color: #2b2033; box-shadow: 2px 3px 0 rgba(40,20,10,.45); border: 0; font: inherit; text-align: left; }
.bb-note { display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 16px 10px 8px; cursor: pointer; }
.bb-note:hover { filter: brightness(1.06); z-index: 1; }
.bb-note b { font-size: 19px; line-height: 1; font-weight: normal; }
.bb-note span { margin-top: auto; font-size: 15px; opacity: .7; }
.bb-pin { position: absolute; top: 4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; box-shadow: 1px 1px 0 rgba(0,0,0,.45), inset -2px -2px 0 rgba(0,0,0,.2); }
.bb-sheet { padding: 20px 16px 12px; max-width: 460px; margin: 0 auto; }
.bb-sheet .bb-t { display: block; font-size: 24px; line-height: 1; font-weight: normal; }
.bb-sheet .bb-by { font-size: 16px; opacity: .65; margin: 2px 0 8px; }
.bb-sheet .bb-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.bb-sheet .field, .bb-sheet textarea { width: 100%; margin-top: 6px; }
.bb-sheet .row { margin-top: 8px; }
.bb-reply { border-top: 1px dashed rgba(43,32,51,.4); padding: 4px 0; font-size: 17px; overflow-wrap: anywhere; }
.bb-foot { margin-top: 10px; align-items: center; gap: 10px; }
.win.board-win .bb-foot .dim { color: #e8d4b0; opacity: .8; }
.bb-msg { color: #3a2414; text-align: center; }

/* ---------- property: the card, its papers, signing, moving boxes (js/props.js) ---------- */
.rl-card .rl-top { gap: 12px; }
.rl-chip { align-self: flex-start; font-family: var(--pix); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border: 2px solid var(--ink); background: #fffaf0; margin-bottom: 2px; }
.rl-chip.free { background: #ffd860; }
.rl-chip.own { background: var(--accent2); color: #fff; }
.rl-chip.taken { background: #e8dcc4; }
.rl-addr { font-size: 21px; line-height: 1; }
.rl-kind { font-size: 16px; opacity: .75; margin-bottom: 4px; }
.rl-door { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.rl-door .dim { font-size: 16px; }
.rl-offers { display: flex; gap: 10px; margin-top: 10px; align-items: stretch; }
.rl-offer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: #fffaf0; border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(43,32,51,.3); padding: 0 10px 8px; }
.rl-offer-h { font-family: var(--pix); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #fff4e0; background: var(--ink); margin: 0 -10px 4px; padding: 3px 10px; }
.rl-offer.let .rl-offer-h { background: #2a4a8a; }
.rl-offer.sale .rl-offer-h { background: #a8323a; }
.rl-offer-p b { font-size: 30px; font-weight: normal; line-height: 1; }
.rl-offer-p span { margin-left: 6px; opacity: .7; }
.rl-offer ul, .rl-doc ul { margin: 4px 0 6px; padding-left: 18px; font-size: 16px; line-height: 1.05; }
.rl-offer ul { flex: 1; }
.rl-offer li, .rl-doc li { margin-bottom: 3px; }
.rl-offer-n { font-size: 15px; opacity: .7; margin-bottom: 4px; }
.rl-offer-n.bad, .rl-sum .bad b { color: #b02a2a; opacity: 1; }
.rl-offer .b { align-self: stretch; text-align: center; }
.rl-papers { margin-top: 12px; border-top: 2px dashed #c8a050; padding-top: 8px; }
.rl-papers-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rl-papers .rl-page { min-height: 96px; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.rl-papers .rl-fact b { min-width: 84px; }
.rl-line { display: flex; align-items: center; gap: 8px; line-height: 1.05; }
.rl-line .b { flex: none; min-width: 132px; text-align: center; }
.rl-line .field.num { width: 76px; }
.rl-line .dim { font-size: 16px; }
.rl-state { padding: 0 6px; border: 2px solid var(--ink); background: #e0f0d8; font-size: 16px; line-height: 1.1; }
.rl-state.warn { background: #ffe9a8; }
.rl-state.bad { background: #f4c0b8; }
.rl-warn { background: #f4c0b8; border: 2px solid var(--ink); padding: 4px 8px; font-size: 16px; margin: 4px 0 !important; }
.win.rl-deal-win .win-body { background: #fbf5e6; }
.rl-doc { display: flex; flex-direction: column; gap: 3px; border: 2px solid #b8a070; outline: 1px solid #b8a070; outline-offset: 3px; margin: 4px; padding: 10px 14px 12px; background: #fffdf4; }
.rl-doc-h { font-family: var(--pix); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; text-align: center; color: #6a4a2a; }
.rl-doc-t { font-family: var(--pix); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; text-align: center; border-bottom: 2px solid #b8a070; padding-bottom: 6px; margin-bottom: 6px; }
.rl-doc .rl-fact b { min-width: 84px; }
.rl-sum { display: flex; gap: 8px; margin: 2px 0 10px; }
.rl-sum > div { flex: 1; display: flex; flex-direction: column; background: #fff3c8; border: 2px dashed #c8a050; padding: 2px 8px; line-height: 1.05; }
.rl-sum span { font-family: var(--pix); font-size: 9px; text-transform: uppercase; opacity: .7; }
.rl-sum b { font-size: 22px; font-weight: normal; }
.rl-box-items { display: flex; flex-wrap: wrap; gap: 4px; max-height: 124px; overflow-y: auto; padding: 4px; background: #efe2c0; border: 2px solid var(--ink); }
.rl-box-items .inv-item { cursor: default; }
.inv-box { background: #d8b078; border-color: #8a6030; }
.inv-box i { position: absolute; left: 6px; right: 6px; top: 14px; bottom: 8px; background: #c89858; border: 2px solid #6a4420; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.inv-box i::before { content: ''; position: absolute; left: -2px; right: -2px; top: -8px; height: 6px; background: #e0b880; border: 2px solid #6a4420; }
.inv-box i::after { content: ''; position: absolute; left: calc(50% - 3px); width: 6px; top: -8px; bottom: -2px; background: rgba(255,244,216,.75); }
.win.realty .rl-papers .rl-page { height: auto; min-height: 96px; }
.rl-card .b:disabled, .rl-deal-win .b:disabled, .rl-box .b:disabled, .intercom .b:disabled, .deckwin .b:disabled { opacity: .45; box-shadow: none; cursor: default; }

/* ---------- a film on a screen (js/reel-view.js) ---------- */
.win.filmview .win-body { background: #140c1c; color: #e8e0f0; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.fv-frame { padding: 6px; background: #2b2033; box-shadow: inset 0 0 0 2px #0c0812; align-self: center; }
.fv-screen { display: block; width: 640px; max-width: 100%; aspect-ratio: 8 / 5; image-rendering: pixelated; cursor: pointer; }
.fv-ctl { display: flex; align-items: center; gap: 10px; }
.fv-bar { flex: 1; accent-color: #ffd860; }
.fv-time { font-family: var(--pix); font-size: 10px; color: #7ad07a; white-space: nowrap; }
.fv-play { min-width: 44px; }
.fv-credits { font-size: 16px; line-height: 1.1; color: #b8a8d0; }
.fv-credits b { color: #fff4e0; font-weight: normal; }
.fv-screen.live { cursor: default; }
.fv-air { font-family: var(--pix); font-size: 10px; color: #ff6a5a; white-space: nowrap; min-width: 74px; }
.fv-air.off { color: #8a7a9a; }
.fv-bar:disabled { opacity: .8; }
/* the disk deck's panel (js/reel-view.js) */
.win.deckwin .win-body { background: #1c1822; color: #e8e0f0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.dk-lcd { background: #0c1410; box-shadow: inset 0 0 0 2px #05080a; padding: 8px 10px; display: grid; gap: 2px; font-size: 16px; line-height: 1.1; color: #5a8a6a; }
.dk-lcd b { font-family: var(--pix); font-size: 10px; font-weight: normal; color: #4a7a5a; }
.dk-lcd.on, .dk-lcd.on b { color: #7aff9a; }
.dk-lcd span { color: #b8e0c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-lcd small { font-size: 14px; color: #5a8a6a; }
.dk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dk-loop { margin-left: auto; font-size: 16px; white-space: nowrap; cursor: pointer; }
.deckwin .hint { margin: 0; color: #a898b8; }
.dk-head { font-family: var(--pix); font-size: 9px; color: #ffd860; }
.dk-disks { display: grid; gap: 4px; }
.dk-disk { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 2px 8px 2px 2px; background: #2b2033; border: 2px solid #0c0812; color: #e8e0f0; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.dk-disk:hover { background: #3a2c46; border-color: #ffd860; }
.dk-disk img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.dk-disk small { color: #7ad07a; font-family: var(--pix); font-size: 9px; }
/* ---------- the Metro's map (js/metro.js) ---------- */
.win.metro .win-body { background: #f4eedc; color: #2b2033; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.metro-here { font-size: 18px; line-height: 1.1; }
.metro-here b { font-weight: normal; color: #2f6248; }
.metro-name { font-family: var(--pix); font-size: 10px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.metro-badge { background: var(--line); color: #fff8ec; padding: 3px 6px; }
.metro-stops { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.metro-stops::before { content: ''; position: absolute; left: 10%; right: 10%; top: 8px; height: 6px; background: var(--line); }
.metro-stop { all: unset; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; padding-bottom: 2px; }
.metro-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff8ec; box-shadow: 0 0 0 4px var(--line); margin-top: 3px; }
.metro-label { font-size: 16px; line-height: 1; max-width: 86px; }
.metro-stop:hover .metro-dot, .metro-stop:focus-visible .metro-dot { background: #ffd860; }
.metro-stop:hover .metro-label { text-decoration: underline; }
.metro-stop.here { cursor: default; }
.metro-stop.here .metro-dot { background: #2b2033; }
.metro-stop.here .metro-label { font-family: var(--pix); font-size: 9px; color: #2f6248; }
.metro-note { font-size: 15px; color: #6a5a4a; border-top: 2px dotted #c8bea8; padding-top: 8px; }