/* 3D canvas, controls and game menus */
#game { position: fixed; inset: 0; z-index: 0; outline: none; }
#game canvas { width: 100% !important; height: 100% !important; }
#game::after { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 42%, transparent 0 48%, rgba(12,7,4,.34) 100%), linear-gradient(180deg, rgba(255,220,140,.08), transparent 30%, rgba(58,31,10,.16)); z-index:1; mix-blend-mode:multiply; }
#game::before { content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); opacity:.45; z-index:2; }
#loadMsg { position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gold); background: #24170e; font-size: 12px; letter-spacing: .13em; }
.loadPick { font-size: 44px; animation: mine 1s steps(4) infinite; transform-origin: 60% 70%; }
.loadDots { letter-spacing: .5em; animation: fade 1s steps(3) infinite; }
@keyframes mine { 50% { transform: rotate(-28deg); } } @keyframes fade { 50% { opacity: .25; } }

#xhair { position: fixed; z-index: 12; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; display: none; pointer-events: none; }
#xhair i { position: absolute; inset: 0; border: 2px solid rgba(255,247,215,.72); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(32,21,13,.45); }
#xhair b { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 14px; text-shadow: 2px 2px 0 #20150d; }

#joy { position: fixed; z-index: 17; width: 122px; height: 122px; border-radius: 50%; display: none; background: rgba(32,21,13,.4); border: 3px solid rgba(255,243,207,.75); box-shadow: inset 0 0 0 3px rgba(157,89,31,.7); touch-action: none; pointer-events: none; }
#joy::after { content: "MOVE"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.55); font-size: 9px; font-weight: 900; }
#joyKnob { position: absolute; z-index: 2; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(244,201,93,.9); border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px #c77a2e; }

#hudToggle { float: right; width: 22px; height: 20px; background: var(--gold); border: 2px solid var(--ink); color: var(--ink); font-size: 10px; font-weight: 900; cursor: pointer; }
#hud.collapsed #hudPop, #hud.collapsed #hudStats, #hud.collapsed .hudVerdict, #hud.collapsed .hudFoot, #hud.collapsed .hudEyebrow { display: none; }
#hud.collapsed { width: auto; } #hud.collapsed #hudToggle { transform: rotate(180deg); }
.dim3d { font-size: 8px; color: white; background: linear-gradient(135deg, rgba(120,61,28,.92), rgba(27,18,12,.92)); border: 2px solid var(--ink); padding: 1px 5px; vertical-align: middle; box-shadow: 0 0 10px rgba(255,216,107,.18); backdrop-filter: blur(2px); }

.enterBtn { margin-top: 9px; width: 100%; color: #fff7e2; background: var(--rust); border: 3px solid var(--ink); padding: 9px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); font-weight: 900; font-size: 11px; }
.enterBtn:hover { filter: brightness(1.08); } .enterBtn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
#exitBtn { position: fixed; z-index: 28; left: 50%; top: 64px; transform: translateX(-50%); display: none; color: #fff7e2; background: var(--rust); border: 3px solid var(--ink); padding: 8px 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); font-weight: 900; font-size: 10px; }
.floatingAction { position: fixed; z-index: 19; right: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: var(--gold); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); font-size: 22px; font-weight: 900; cursor: pointer; }
.floatingAction:active { transform: translate(2px, calc(-50% + 2px)); box-shadow: 1px 1px 0 var(--ink); }

/* Full-screen RPG menu */
#marketBackdrop { position: fixed; z-index: 29; inset: 0; background: rgba(21,13,8,.72); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .16s; }
#marketBackdrop.show { opacity: 1; pointer-events: auto; }
#market { position: fixed; z-index: 30; top: 50%; left: 50%; width: min(900px, 94vw); height: min(650px, 86vh); transform: translate(-50%,-48%) scale(.97); opacity: 0; pointer-events: none; display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 5px solid var(--ink); box-shadow: 9px 9px 0 #120b07, inset 0 0 0 4px #b66b2f; transition: .16s; overflow: hidden; }
#market.show { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.mkHead { min-height: 78px; padding: 14px 54px 10px 18px; background: linear-gradient(90deg,var(--rust),#6f2b1e); color: #fff5db; border-bottom: 4px solid var(--ink); }
.mkHead h2 { font-family: Impact,"Arial Black",sans-serif; font-size: 24px; letter-spacing: .06em; line-height: 1; }
.mkHead p { margin-top: 7px; font-size: 10px; max-width: 680px; opacity: .9; }
#marketClose { position: absolute; z-index: 2; top: 12px; right: 14px; width: 34px; height: 32px; background: var(--gold); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-size: 20px; font-weight: 900; cursor: pointer; }
.mkShell { min-height: 0; display: grid; grid-template-columns: 188px 1fr; }
.mkTabs { min-height: 0; overflow: auto; padding: 10px; background: #d3a965; border-right: 4px solid var(--ink); display: flex; flex-direction: column; gap: 5px; }
.mkTab { min-height: 42px; display: flex; align-items: center; gap: 8px; text-align: left; padding: 7px 9px; border: 3px solid var(--ink); background: #f2d99f; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font-weight: 900; font-size: 11px; }
.mkTab span { min-width: 21px; font-size: 17px; text-align: center; }.mkTab.on { color: white; background: var(--rust); transform: translateX(3px); }
.mkBody { min-height: 0; overflow: auto; padding: 18px 20px 28px; background: #fff7df; color: var(--ink); font-size: 12.5px; }
.mkTitle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 3px solid var(--ink); }
.mkTitle h3 { color: var(--rust); font-size: 18px; }.mkBadge { padding: 3px 6px; border: 2px solid var(--ink); background: var(--gold); font-size: 9px; font-weight: 900; }
.mkGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.mkCard { border: 3px solid var(--ink); background: #f0d8a8; padding: 9px; box-shadow: 3px 3px 0 #9b672f; }
.mkCard h4 { color: var(--rust); font-size: 12px; margin-bottom: 5px; }.mkCard p { font-size: 10.5px; line-height: 1.5; }
.mkRow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 7px 3px; border-bottom: 1px dashed #a97b42; }
.mkRow > span { min-width: 0; overflow-wrap: anywhere; }.mkRow b { color: var(--ink); text-align: right; }.mkRow i { font-size: 9px; color: #78563a; }
.mkForm { margin-top: 10px; padding: 11px; border: 3px solid var(--ink); background: #f0d8a8; }.mkFormGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mkForm label { display: block; font-size: 10px; font-weight: 900; color: #5e3b22; margin: 7px 0 3px; text-transform: uppercase; }
.mkForm input, .mkForm select, .mkForm textarea { width: 100%; min-height: 36px; padding: 7px 8px; border: 3px solid var(--ink); border-radius: 0; background: #fffdf4; color: var(--ink); outline: none; resize: vertical; font-size: 11px; }
.mkForm input:focus, .mkForm select:focus, .mkForm textarea:focus { box-shadow: inset 0 0 0 3px var(--gold); }
.mkNote { font-size: 10.5px; line-height: 1.5; color: #573821; background: #f7e8c1; border: 2px solid #a96a33; padding: 8px 9px; margin: 8px 0; }
.mkNote.good { border-color: var(--sage); background: #e0efd9; }.mkNote.warn { border-color: var(--rust); background: #f4d4c0; }
.mkMono { font-size: 10px; word-break: break-all; background: var(--ink); color: #ffe7a8; padding: 8px; border: 3px solid #bd813d; user-select: all; }
.mkAction { border: 3px solid var(--ink); background: var(--gold); color: var(--ink); padding: 7px 10px; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font-weight: 900; font-size: 10px; }.mkAction.danger { background: #d07058; }.mkAction:active { transform: translate(2px,2px); box-shadow: none; }
.mkAction:disabled { cursor: wait; opacity: .62; }.mkOrder { margin: 8px 0; padding: 9px; border: 3px solid var(--ink); background: #fff0c8; box-shadow: 2px 2px 0 #9b672f; overflow-wrap: anywhere; }.mkOrder .mkTitle { margin-bottom: 5px; padding-bottom: 5px; }.mkOrder .mkAction { margin: 5px 5px 0 0; }.realmWorkshop { background: #dce9cc; }.realmList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.mkStatus { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 900; }.mkStatus::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--ink); background: #cf9e60; }.mkStatus.live::before { background: #5bb46d; }.mkStatus.preview::before { background: var(--gold); }

@media (pointer: coarse) { #xhair { display: block; } }
@media (max-width: 700px) {
  .floatingAction { display: none; } #market { width: 100vw; height: 100dvh; max-width: none; border-width: 0; box-shadow: none; }
  .mkHead { min-height: 70px; padding: 12px 50px 9px 13px; }.mkHead h2 { font-size: 20px; }.mkShell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .mkTabs { min-height: 66px; max-height: 76px; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 4px solid var(--ink); padding: 7px; }
  .mkTab { min-width: 78px; height: 50px; flex-direction: column; justify-content: center; gap: 1px; padding: 3px; font-size: 8px; text-align: center; }.mkTab span { font-size: 16px; }
  .mkTab.on { transform: translateY(2px); }.mkBody { padding: 13px 12px 90px; }.mkGrid, .mkFormGrid, .realmList { grid-template-columns: 1fr; }
  #exitBtn { top: 48px; }.dev-phone #hud { width: 188px; }.dev-phone #hud.collapsed { width: auto; }.dev-phone #hint { bottom: 84px; }
}

/* 2D single-floor pixel realm: 3D town outside, scalable tilemap inside. */
body.pixel-realm-open #xhair,
body.pixel-realm-open #joy,
body.pixel-realm-open #hotbar,
body.pixel-realm-open #marketBtn,
body.pixel-realm-open #mapWrap,
body.pixel-realm-open #legend { display: none !important; }
#pixelRealm { position: fixed; z-index: 27; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 8%, rgba(242,210,139,.2), rgba(22,15,10,.96) 48%), #130d09; color: #ffe7aa; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
#pixelRealm .pxHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 10px; width: min(960px, 100%); padding: 9px 11px; background: #27180f; border: 4px solid #0f0906; box-shadow: 4px 4px 0 #000, inset 0 0 0 2px #9a6a34; }
#pixelRealm .pxHeader b { display: block; font-size: 14px; letter-spacing: .08em; color: #ffd86b; text-transform: uppercase; }
#pixelRealm .pxHeader small { display: block; margin-top: 2px; font-size: 9px; color: #cba972; letter-spacing: .08em; }
#pixelRealm .pxHeader button { border: 3px solid #0f0906; background: #b8562d; color: #fff6d6; box-shadow: 3px 3px 0 #000; padding: 8px 13px; font-weight: 900; cursor: pointer; }
#pixelRealm .pxFrame { overflow: auto; display: grid; place-items: center; border: 5px solid #0f0906; background: repeating-linear-gradient(45deg, #21150d 0 12px, #1a100a 12px 24px); box-shadow: inset 0 0 0 4px #6b4325; }
#pixelRealm .pxMap { --px: clamp(20px, 3.2vmin, 34px); position: relative; display: grid; gap: 2px; padding: 12px; image-rendering: pixelated; }
#pixelRealm .pxTile { position: relative; width: var(--px); height: var(--px); border: 0; padding: 0; background: #8a6f4a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); cursor: pointer; font: inherit; color: #21150d; overflow: hidden; }
#pixelRealm .pxTile.floor { background: #8a6f4a; }
#pixelRealm .pxTile.road { background: #765235; }
#pixelRealm .pxTile.wall { background: #cdb893; box-shadow: inset 0 0 0 3px #6b4a2c; }
#pixelRealm .pxTile.counter { background: #7e4e28; box-shadow: inset 0 4px 0 #b88a52, inset 0 0 0 2px #3a2416; }
#pixelRealm .pxTile.crate { background: #6b4a2c; }
#pixelRealm .pxTile.sign { background: #caa23a; box-shadow: inset 0 0 0 3px #4b321d; }
#pixelRealm .pxTile.lamp { background: #ffd45c; box-shadow: 0 0 13px rgba(255,212,92,.7), inset 0 0 0 3px #6b4a2c; }
#pixelRealm .pxTile.water { background: #3d83a3; }
#pixelRealm .pxTile.action { animation: pxPulse 1.2s steps(2,end) infinite; }
#pixelRealm .pxTile span { position: absolute; left: 1px; right: 1px; top: 50%; transform: translateY(-50%); font-size: 7px; line-height: .9; font-weight: 900; text-align: center; color: #1b1109; text-shadow: 1px 1px 0 rgba(255,242,196,.5); pointer-events: none; }
#pixelRealm .pxAvatar { z-index: 4; display: grid; place-items: center; width: var(--px); height: var(--px); color: #fff7d0; background: #2f6fae; border: 3px solid #0f0906; box-shadow: 2px 2px 0 #000; font-size: calc(var(--px) * .55); pointer-events: none; }
#pixelRealm .pxHelp { margin: 10px auto 0; width: min(960px, 100%); padding: 7px 9px; background: rgba(20,13,8,.85); border-left: 5px solid #ffd86b; font-size: 10px; color: #e6c78f; }
@keyframes pxPulse { 50% { filter: brightness(1.35); } }
@media (max-width: 700px) { #pixelRealm .pxHeader { padding-right: 72px; } #pixelRealm .pxMap { --px: clamp(18px, 5vw, 28px); padding: 8px; gap: 1px; } #pixelRealm .pxTile span { font-size: 6px; } }

/* Pixel office object layer — furniture/sprite-like props over the safe tilemap. */
#pixelRealm .pxObj { position: relative; z-index: 3; margin: 1px; border: 0; padding: 0; background: transparent; font: inherit; color: #ffdf79; overflow: visible; cursor: pointer; image-rendering: pixelated; }
#pixelRealm .pxObj i { position: absolute; inset: 0; display: block; border: 3px solid #20120a; box-shadow: 2px 2px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,235,165,.16); }
#pixelRealm .pxObj span, #pixelRealm .pxObj b { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; background: rgba(27,18,12,.94); border: 2px solid #caa23a; color: #ffe477; padding: 2px 5px; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .04em; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
#pixelRealm .pxObj span { top: -12px; }
#pixelRealm .pxObj b { top: -16px; border-color: #6f86a8; color: #e8efff; }
#pixelRealm .pxObj.action i { animation: pxPulse 1.2s steps(2,end) infinite; }
#pixelRealm .pxObj.desk i { background: linear-gradient(#a77745 0 28%, #6b4325 28% 100%); border-color: #2b1a10; }
#pixelRealm .pxObj.desk i::before { content: ""; position: absolute; left: 10%; right: 10%; top: 11%; height: 16%; background: #20252d; box-shadow: inset 0 0 0 2px #4c5868, 0 8px 0 #2f2016; }
#pixelRealm .pxObj.receptionDesk i { background: linear-gradient(90deg,#6b3d1f,#8a562d 18% 82%,#6b3d1f); border-radius: 0 0 10px 10px; box-shadow: 3px 3px 0 #000, inset 0 6px 0 #b8874f, inset 0 0 0 3px #3a2315; }
#pixelRealm .pxObj.monitor i { background: #242a33; border-color: #55606f; }
#pixelRealm .pxObj.monitor i::before { content: ""; position: absolute; inset: 22% 18%; background: #4f8fb1; box-shadow: 0 0 8px rgba(92,195,220,.6); }
#pixelRealm .pxObj.chair i { background: #46633e; border-color: #1c291a; border-radius: 8px 8px 2px 2px; }
#pixelRealm .pxObj.sofa i { background: #9a562e; border-color: #3a2012; border-radius: 10px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), inset 11px 0 0 rgba(255,222,150,.12), 2px 2px 0 #000; }
#pixelRealm .pxObj.coffeeTable i { background: #7c4c28; border-color: #2b1a10; }
#pixelRealm .pxObj.coffeeTable i::before { content: ""; position: absolute; width: 20%; height: 32%; right: 16%; top: 28%; background: #f4ead5; border: 2px solid #3a2315; }
#pixelRealm .pxObj.rug { z-index: 2; }
#pixelRealm .pxObj.rug i { background: repeating-linear-gradient(90deg,#6d7d4b 0 10px,#819157 10px 20px); border-color: #334024; box-shadow: inset 0 0 0 4px rgba(255,231,170,.12); }
#pixelRealm .pxObj.bookshelf i, #pixelRealm .pxObj.shelf i { background: #5a341b; border-color: #28180e; }
#pixelRealm .pxObj.bookshelf i::before, #pixelRealm .pxObj.shelf i::before { content: ""; position: absolute; inset: 16% 10%; background: repeating-linear-gradient(90deg,#8a3f2b 0 8px,#315b43 8px 15px,#c09a48 15px 22px,#4d5f89 22px 30px); box-shadow: 0 -8px 0 #3b2414, 0 8px 0 #3b2414; }
#pixelRealm .pxObj.plant i { border-radius: 50% 50% 8px 8px; background: radial-gradient(circle at 50% 35%,#6fa45b 0 35%,#386d35 36% 62%,#7a4c2a 63%); border-color: #22391f; }
#pixelRealm .pxObj.floorLamp i { background: linear-gradient(#f2ce71 0 35%,#5a3a22 35% 100%); border-color: #3a2315; box-shadow: 0 0 18px rgba(255,211,99,.65), 2px 2px 0 #000; }
#pixelRealm .pxObj.serverRack i { background: #202630; border-color: #485463; box-shadow: inset 0 0 0 3px #11161d, 2px 2px 0 #000; }
#pixelRealm .pxObj.serverRack i::before { content: ""; position: absolute; inset: 10% 16%; background: repeating-linear-gradient(180deg,#2a3340 0 8px,#57d181 8px 10px,#2a3340 10px 18px,#55a3d8 18px 20px); }
#pixelRealm .pxObj.whiteboard i { background: #e5dcc5; border-color: #5d4c39; }
#pixelRealm .pxObj.whiteboard i::before { content: "PLAN → BUILD\A TEST → SHIP"; white-space: pre; position: absolute; inset: 18% 8%; color: #5c4d3c; font-size: 8px; line-height: 1.2; font-weight: 900; text-align: center; }
#pixelRealm .pxObj.bulletinBoard i { background: #744b28; border-color: #2c1b0f; }
#pixelRealm .pxObj.bulletinBoard i::before { content: ""; position: absolute; inset: 18% 12%; background: #d7c18a; box-shadow: 16px 4px 0 #e8dca8, 34px 10px 0 #bd8a55; }
#pixelRealm .pxObj.cabinet i { background: #6e513b; border-color: #2b1a10; }
#pixelRealm .pxObj.meetingTable i { background: #7a4a27; border-color: #2b1a10; border-radius: 8px; box-shadow: inset 0 0 0 4px rgba(255,232,160,.15), 2px 2px 0 #000; }
#pixelRealm .pxObj.meetingTable i::before { content: ""; position: absolute; left: 42%; top: 30%; width: 15%; height: 32%; background: #d5a62b; box-shadow: 0 0 10px rgba(255,216,107,.75); }
#pixelRealm .pxObj.npc { z-index: 6; }
#pixelRealm .pxObj.npc i { left: 24%; right: 24%; top: 4%; bottom: 4%; background: linear-gradient(#2f2b26 0 30%,#476e8b 30% 67%,#30231b 67%); border-color: #1b120d; border-radius: 12px 12px 5px 5px; }
#pixelRealm .pxObj.npc i::before { content: ""; position: absolute; left: 22%; right: 22%; top: 10%; height: 22%; background: #d1a176; border: 2px solid #1b120d; border-radius: 50%; }
#pixelRealm .pxObj.door i { background: #4c2d18; border-color: #1b120d; }
#pixelRealm .pxObj.door i::before { content: ""; position: absolute; right: 18%; top: 46%; width: 6px; height: 6px; background: #d5a62b; }
#pixelRealm .pxObj.gold i { background: radial-gradient(circle,#ffd86b 0 35%,#c8962e 36% 65%,#7a4d17 66%); border-radius: 50%; border-color: #5a3515; box-shadow: 0 0 14px rgba(255,216,107,.6); }
#pixelRealm .pxObj.waterCooler i { background: linear-gradient(#76a8c6 0 45%,#e8e0d0 45% 100%); border-color: #33434c; border-radius: 6px; }
#pixelRealm .pxObj.divider i { background: repeating-linear-gradient(90deg,#3d5d34 0 14px,#4d7a45 14px 28px); border-color: #20351d; }
#pixelRealm .pxObj.printer i { background: #bfc4c6; border-color: #3d4548; }

/* Finish pass: quarter-block and conversion-rail clarity */
.iBlock,.iNext{margin:.65rem 0;padding:.62rem .7rem;border:1px solid rgba(244,201,93,.34);background:rgba(43,28,16,.54);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.iBlock b,.iNext b{display:block;color:#ffd86b;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.iBlock span,.iNext span{display:block;color:#f6ead0;line-height:1.35}
.iBlock small{display:block;color:#c7b895;line-height:1.3;margin-top:.25rem}
.mdSub{color:#d9caa5;font-size:.76rem;line-height:1.35;margin:.25rem 0 .45rem;max-width:40rem}
.docLinkBtn{display:inline-flex;align-items:center;justify-content:center;padding:.52rem .7rem;border:1px solid rgba(244,201,93,.5);background:rgba(244,201,93,.12);color:#ffe2a3;text-decoration:none;font-weight:700;letter-spacing:.04em}
@media (max-width: 640px){.iBlock,.iNext{font-size:.82rem}.mdSub{display:none}.docLinkBtn{width:100%}}

/* Tablet QA pass: make modal panels reliably visible and de-clutter mid-size screens. */
#info.show,
#market.show,
#marketBackdrop.show {
  opacity: 1 !important;
}
#market.show {
  transform: translate(-50%,-50%) scale(1) !important;
}

@media (min-width: 641px) and (max-width: 1180px) {
  #intro { padding: 12px; }
  .introCard { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; }

  #info {
    right: 12px;
    width: min(370px, calc(100vw - 48px));
    max-height: calc(100dvh - 172px);
  }
  #info.show {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
    pointer-events: auto;
  }

  #mapWrap {
    transform: scale(.82);
    transform-origin: bottom right;
    bottom: 92px;
    right: 10px;
  }
  #market {
    width: min(880px, calc(100vw - 32px));
    height: min(680px, calc(100dvh - 80px));
  }
  .mkHead { min-height: 68px; padding: 11px 52px 8px 15px; }
  .mkHead h2 { font-size: 21px; }
  .mkShell { grid-template-columns: 164px 1fr; }
  .mkTabs { padding: 8px; }
  .mkTab { min-height: 38px; font-size: 10px; }
  .mkBody { padding: 14px 15px 90px; }
}

@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  #missionDock {
    display: block !important;
    top: auto;
    left: 10px;
    bottom: 96px;
    transform: none;
    width: min(342px, calc(100vw - 270px));
    min-width: 0;
    max-height: 186px;
    overflow: auto;
    padding: 7px 8px;
    text-align: left;
    font-size: 10px;
  }
  #missionDock .mdTitle { font-size: 10px; margin-bottom: 4px; }
  #missionDock .mdSub { display: block; font-size: 9px; line-height: 1.25; }
  #missionDock .mdActions { justify-content: flex-start; gap: 4px; flex-wrap: wrap; }
  #missionDock button { font-size: 8px; padding: 4px 5px; box-shadow: 1px 1px 0 var(--ink); }
  #hud { max-height: 34dvh; overflow: auto; }
  #info { top: 52%; }
}

@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  #missionDock {
    display: block !important;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 470px));
    min-width: 0;
    padding: 7px 10px;
  }
  #missionDock .mdActions { flex-wrap: wrap; gap: 5px; }
  #missionDock button { font-size: 8px; padding: 4px 6px; }
  #activityTape { display: none !important; }
}

/* Tablet final pass: preserve core conversion context without panel collisions. */
@media (min-width: 641px) and (max-width: 1180px) {
  #activityTape { display: none !important; }
  #topBar { top: 8px; }
  #hotbar {
    bottom: max(8px, var(--safe-b));
    max-width: calc(100vw - 22px);
    gap: 3px;
    padding: 4px;
  }
  #hotbar button {
    width: clamp(52px, 8vw, 62px);
    height: 54px;
  }
  #hotbar button span { font-size: 19px; }
  #hotbar button b { font-size: 7px; }
  #hint {
    left: 50%;
    transform: translateX(-50%);
    bottom: 76px;
    max-width: min(560px, calc(100vw - 24px));
  }
  #mapWrap {
    bottom: 78px !important;
    right: 8px !important;
    max-width: 174px;
  }
  #mapWrap canvas { width: 132px !important; height: 86px !important; }
  #legend { display: none !important; }
  #hud {
    width: 218px;
    max-height: min(360px, 39dvh);
    overflow: auto;
  }
  #hud.collapsed { max-height: none; overflow: visible; }
  #info {
    z-index: 30;
    max-height: calc(100dvh - 128px);
  }
  #infoBody h3 { max-width: calc(100% - 28px); }
  .iActions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .iActions button, .docLinkBtn { min-height: 36px; }
}

@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  #missionDock {
    left: 238px !important;
    right: 8px !important;
    bottom: auto !important;
    top: 8px !important;
    width: auto !important;
    max-height: 118px !important;
  }
  #missionDock .mdSub { display: none !important; }
  #missionDock .mdActions { max-height: 58px; overflow: hidden; }
  #mapWrap { bottom: 72px !important; transform: scale(.74) !important; }
  #info {
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 78px !important;
    width: auto !important;
    max-height: 48dvh !important;
    transform: translateY(26px) !important;
  }
  #info.show { transform: translateY(0) !important; }
}

@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  #missionDock {
    top: 8px !important;
    width: min(480px, calc(100vw - 520px)) !important;
    max-height: 116px;
    overflow: hidden;
  }
  #missionDock .mdSub { display: none !important; }
  #info {
    width: min(344px, calc(100vw - 42px)) !important;
    max-height: calc(100dvh - 104px) !important;
  }
  #mapWrap { transform: scale(.74) !important; }
}

/* Tablet overlap fixes from actual 820x1180 / 1180x820 measurements. */
@media (min-width: 641px) and (max-width: 1180px) {
  #missionDock { top: 56px !important; }
}
@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  #info {
    bottom: 176px !important;
    max-height: 46dvh !important;
  }
  #missionDock { top: 56px !important; }
}
@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  #missionDock { top: 56px !important; }
}

/* Tablet correction: keep the top-center view clear and make minimap visible. */
@media (min-width: 641px) and (max-width: 1180px) {
  #topBar {
    left: auto !important;
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
    z-index: 22 !important;
  }
  #mapWrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    bottom: auto !important;
    transform: scale(.82) !important;
    transform-origin: top right !important;
    z-index: 19 !important;
  }
  #mapWrap canvas {
    width: 144px !important;
    height: 94px !important;
  }
  #missionDock {
    display: block !important;
    left: 10px !important;
    right: auto !important;
    top: 304px !important;
    bottom: auto !important;
    transform: none !important;
    width: 218px !important;
    min-width: 0 !important;
    max-height: 168px !important;
    overflow: auto !important;
    text-align: left !important;
    z-index: 14 !important;
    padding: 7px 8px !important;
  }
  #missionDock .mdTitle { font-size: 10px !important; margin-bottom: 4px !important; }
  #missionDock .mdSub { display: none !important; }
  #missionDock .mdActions { justify-content: flex-start !important; gap: 4px !important; flex-wrap: wrap !important; }
  #missionDock button { font-size: 8px !important; padding: 4px 5px !important; box-shadow: 1px 1px 0 var(--ink) !important; }
}

@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  #locationChip { display: none !important; }
  #topBar { width: auto !important; }
  #missionDock { top: 304px !important; }
  #info {
    bottom: 78px !important;
    max-height: 50dvh !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  #missionDock { top: 304px !important; }
  #locationChip { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Tablet dossier bottom clearance: keep the hotbar touch area free. */
@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  #info {
    bottom: 156px !important;
    max-height: 47dvh !important;
  }
}

/* iPad / large-tablet Safari correction from real screenshot.
   iPad landscape can report >1180 CSS px, so the earlier tablet media query missed it. */
@media (pointer: coarse) and (min-width: 641px),
       (min-width: 1181px) and (max-width: 1400px) {
  #legend,
  #activityTape {
    display: none !important;
  }

  #topBar {
    left: auto !important;
    right: 8px !important;
    top: 8px !important;
    transform: none !important;
    z-index: 25 !important;
  }
  #locationChip {
    display: none !important;
  }
  #helpBtn {
    min-width: 72px !important;
  }

  #mapWrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    bottom: auto !important;
    transform: scale(.9) !important;
    transform-origin: top right !important;
    z-index: 21 !important;
    pointer-events: auto !important;
  }
  #mapWrap canvas {
    width: 154px !important;
    height: 100px !important;
  }

  #missionDock {
    display: block !important;
    left: 10px !important;
    right: auto !important;
    top: 304px !important;
    bottom: auto !important;
    transform: none !important;
    width: 232px !important;
    min-width: 0 !important;
    max-height: 168px !important;
    overflow: auto !important;
    text-align: left !important;
    z-index: 14 !important;
    padding: 7px 8px !important;
  }
  #missionDock .mdTitle {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  #missionDock .mdSub {
    display: none !important;
  }
  #missionDock .mdActions {
    justify-content: flex-start !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  #missionDock button {
    font-size: 8px !important;
    padding: 4px 5px !important;
    box-shadow: 1px 1px 0 var(--ink) !important;
  }

  #hud {
    width: 232px !important;
    max-height: 286px !important;
    overflow: auto !important;
  }
  #hud.collapsed {
    max-height: none !important;
    overflow: visible !important;
  }

  #hotbar {
    bottom: max(8px, var(--safe-b)) !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 20 !important;
  }
  #info {
    z-index: 30 !important;
  }
}

/* iPad wide: when a Dossier is open, keep minimap visible but move it away from the right-side panel. */
@media (pointer: coarse) and (min-width: 641px),
       (min-width: 1181px) and (max-width: 1400px) {
  body:has(#info.show) #mapWrap {
    left: 252px !important;
    right: auto !important;
    top: 56px !important;
    transform-origin: top left !important;
  }
}

/* Left rail stack correction: HUD → MCP Catalog launcher → objective dock. */
@media (pointer: coarse) and (min-width: 641px),
       (min-width: 1181px) and (max-width: 1400px) {
  #grtLaunch {
    left: 10px !important;
    top: 306px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 18 !important;
  }
  #missionDock {
    top: 356px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    width: 232px !important;
    max-height: 154px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  #grtLaunch {
    left: 10px !important;
    top: 306px !important;
  }
  #missionDock {
    top: 356px !important;
    max-height: 154px !important;
  }
}

/* Agent Mining Benchmark tab */
.scripMissionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.scripMission{background:#1e140c;color:#fff4ce;border:2px solid #6b4a2c;padding:9px;box-shadow:2px 2px 0 #9b672f}
.scripMission b{display:block;color:#ffd86b;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.scripMission span{display:block;color:#7fd1a0;font-size:8px;text-transform:uppercase;letter-spacing:.08em;margin:3px 0}
.scripMission p{font-size:10px;line-height:1.32;margin:4px 0;color:#f5e4bd}
.scripMission em{display:block;font-style:normal;color:#ffd86b;font-size:10px;border-top:1px dashed #7a5631;margin-top:6px;padding-top:5px}
.mkTiny{font-size:10px;color:#6b4a2c;line-height:1.35}
@media(max-width:760px){.scripMissionGrid{grid-template-columns:1fr}}

/* ============================================================
   Accessibility pass (#872/#1077/#1078): visible focus, reduced
   motion, screen-reader utility, keyboard-navigable core route.
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.pixelButton:focus-visible, .mkTab:focus-visible, .mkAction:focus-visible, #hotbar button:focus-visible,
#mapWrap:focus-visible, .floatingAction:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #ffe08a !important; outline-offset: 2px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .loadPick, .loadDots, .sp-loading { animation: none !important; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mobile gesture containment: prevent Safari/Chrome page zoom/back gestures while walking the town. */
html.grt-gesture-guard, html.grt-gesture-guard body, html.grt-gesture-guard #game, html.grt-gesture-guard canvas {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
html.grt-gesture-guard input, html.grt-gesture-guard textarea, html.grt-gesture-guard select,
html.grt-gesture-guard button, html.grt-gesture-guard a, html.grt-gesture-guard #docPopup,
html.grt-gesture-guard #grtModal, html.grt-gesture-guard #info {
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}


/* Gold Rush Town bulk UX pass: command map, data boundaries, quality dock. */
.iBoundary{margin:8px 0;padding:8px 10px;border:1px solid rgba(202,164,90,.35);border-radius:8px;background:rgba(28,20,12,.55);color:#d8c39b;font-size:11px;line-height:1.35}.iBoundary b{display:block;color:#ffd86b;margin-bottom:3px}.iBoundary span{display:block}.cmdGrid{display:grid;grid-template-columns:max-content 1fr;gap:8px 12px;margin:10px 0 14px}.cmdGrid b{color:#ffd86b}.cmdGrid span{color:#ead8b0}#qualityDock{position:fixed;right:12px;bottom:12px;z-index:54;width:min(250px,calc(100vw - 24px));padding:9px 10px;background:rgba(28,20,12,.88);border:1px solid rgba(202,164,90,.55);border-radius:10px;color:#f6dfad;font:11px ui-monospace,Menlo,monospace;box-shadow:0 8px 24px #0008}#qualityDock .qHead{display:flex;justify-content:space-between;gap:8px;color:#ffd86b;margin-bottom:6px}#qualityDock label{display:flex;align-items:center;justify-content:space-between;gap:8px}#qualityDock select{background:#241a10;color:#ffe9bf;border:1px solid #6b4a2c;border-radius:7px;padding:3px 6px;font:11px ui-monospace,Menlo,monospace}#qualityDock .qStats{margin-top:5px;color:#d7bd83}#qualityDock .qNote{margin-top:5px;color:#a98d64;line-height:1.25}@media(max-width:640px){#qualityDock{left:10px;right:auto;bottom:72px;width:190px;font-size:10px}}


/* Route rail, resilience banner and UX regression surfaces. */
#resilienceBanner{position:fixed;left:50%;top:56px;transform:translateX(-50%) translateY(-12px);z-index:140;display:none;gap:10px;align-items:center;max-width:min(720px,92vw);padding:9px 12px;border:1px solid rgba(224,168,76,.75);border-radius:10px;background:rgba(28,20,12,.94);color:#f6dfad;font:12px ui-monospace,Menlo,monospace;box-shadow:0 8px 24px #0009}#resilienceBanner.show{display:flex;transform:translateX(-50%) translateY(0)}#resilienceBanner b{color:#ffd86b}#resilienceBanner button{background:#caa45a;color:#241a10;border:0;border-radius:7px;padding:4px 9px;font:800 11px ui-monospace,monospace}.emptyState{padding:16px;color:#d7bd83;border:1px dashed rgba(202,164,90,.45);border-radius:10px;background:rgba(28,20,12,.35)}#routeRail{position:fixed;left:12px;bottom:12px;z-index:55;width:min(420px,calc(100vw - 24px));display:none;padding:10px;background:rgba(28,20,12,.9);border:1px solid rgba(202,164,90,.55);border-radius:12px;color:#f6dfad;font:11px ui-monospace,Menlo,monospace;box-shadow:0 8px 24px #0008}#routeRail.show{display:block}.rrHead{display:flex;justify-content:space-between;align-items:center;color:#ffd86b}.rrHead button{background:#3a2a18;color:#e9d4a6;border:1px solid #6b4a2c;border-radius:6px}.rrMode{color:#b89a6a;margin:4px 0 8px}.rrSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.rrSteps button,.rrTours button{cursor:pointer;text-align:left;background:#241a10;color:#e9d4a6;border:1px solid #6b4a2c;border-radius:8px;padding:6px}.rrSteps button.on{background:#caa45a;color:#241a10}.rrSteps b{display:block}.rrSteps small{display:block;font-size:9px;line-height:1.2;opacity:.85}.rrTours{display:flex;gap:6px;margin-top:8px}.rrNote{margin-top:7px;color:#d7bd83;line-height:1.35}@media(max-width:640px){#routeRail{left:10px;right:10px;bottom:118px;width:auto}.rrSteps{grid-template-columns:1fr 1fr}#resilienceBanner{top:46px}}


/* Local design proposal preview sandbox. */
#designPreviewDock{position:fixed;right:12px;top:88px;z-index:56;width:min(260px,calc(100vw - 24px));display:none;padding:10px;background:rgba(28,20,12,.9);border:1px solid rgba(255,216,107,.55);border-radius:12px;color:#f6dfad;font:11px ui-monospace,Menlo,monospace;box-shadow:0 8px 24px #0008}#designPreviewDock.on{display:block}#designPreviewDock div{display:flex;justify-content:space-between;align-items:center;color:#ffd86b}#designPreviewDock button{background:#caa45a;color:#241a10;border:0;border-radius:7px;padding:4px 8px;font:800 10px ui-monospace,monospace}#designPreviewDock p{color:#d7bd83;line-height:1.3}.design-preview #game{outline:3px dashed rgba(255,216,107,.55);outline-offset:-6px}.design-preview #routeRail,.design-preview #qualityDock,.design-preview #resilienceBanner{box-shadow:0 0 0 2px rgba(255,216,107,.35),0 8px 24px #0008}
.iFunction{margin:10px 0;padding:10px;border:1px solid rgba(255,216,107,.45);background:rgba(255,216,107,.07)}.iFunction b{display:block;color:#ffd86b;text-transform:uppercase;font-size:11px;letter-spacing:.06em}.iFunction span{display:block;color:#8fb9d4;font-size:10px;text-transform:uppercase;margin-top:3px}.iFunction p{margin:6px 0 3px;color:#ffe7b6;font-size:12px;line-height:1.35}.iFunction small{display:block;color:#b99b70}.iFunction em{display:block;margin-top:6px;color:#d6c199;font-style:normal;font-size:10px;line-height:1.35}