/* ================= handheld console shell ================= */
/* Nothing outside the shell may scroll: a single rubber-band on a phone moved
   the whole device down and never came back. */
html { overflow: hidden; overscroll-behavior: none; }
body {
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(1100px 600px at 50% -10%, #121a22 0%, #070a0e 55%),
    #05070a;
}
#app {
  height: 100vh; min-height: 100vh;
  height: 100dvh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 12px 14px;
}
/* Desktop: fill the window instead of capping width with a conservative
   viewport-height ratio. The screen stretches to the available height. */
.handheld { width: min(1760px, 97vw); }
.device {
  position: relative; border-radius: 34px; padding: 12px 24px 10px;
  height: calc(100vh - 24px); height: calc(100dvh - 24px);
  display: flex; flex-direction: column;
  background: linear-gradient(158deg, var(--shell-a, #262b33) 0%, var(--shell-b, #171b21) 28%, var(--shell-c, #0b0e13) 72%, var(--shell-d, #080b0f) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -2px 0 rgba(0, 0, 0, .6),
    0 44px 90px -36px rgba(0, 0, 0, .95),
    0 0 0 10px rgba(0, 0, 0, .28);
}
.device::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  opacity: .6;
}
.device::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5);
}
.device-top {
  display: flex; align-items: center; gap: 12px; padding: 2px 4px 9px;
  font-size: 8px; letter-spacing: .26em; color: var(--ink-3);
}
.device-brand { font-family: var(--display); font-size: 12px; letter-spacing: .18em; color: var(--ink); }
.device-brand b { color: var(--cyan); font-weight: 600; }
.device-tag { margin-left: auto; font-size: 7px; letter-spacing: .32em; }
.device-led { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.device, .device * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.device input, .device textarea, .device select { -webkit-user-select: text; user-select: text; }
/* touch-action: manipulation still allows panning — holding the D-pad and
   drifting a millimetre made the whole handheld slide up on a phone. `none`
   hands every touch to the handler instead. */
.dp-btn, .ab, .sys-btn, .hard-btn, #btn-start, #btn-select {
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none;
}
.device-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr) 196px; gap: 20px; align-items: center; }
.screen-frame {
  position: relative; align-self: stretch; min-height: 0; display: flex; flex-direction: column;
  background: #070a0e; border-radius: 20px; padding: 10px 10px 5px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 10px 26px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(0, 0, 0, .6);
}
.screen {
  position: relative; border-radius: 12px; overflow: hidden; background: #041018;
  flex: 1; min-height: 0; box-shadow: inset 0 0 0 1px rgba(94, 231, 255, .08);
}
.screen main {
  max-width: none; width: 100%; height: 100%; margin: 0; padding: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
.screen main::-webkit-scrollbar { width: 6px; }
.screen main::-webkit-scrollbar-thumb { background: rgba(94, 231, 255, .25); border-radius: 99px; }
.screen-glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(118deg, rgba(255,255,255,.07), transparent 32%, transparent 72%, rgba(255,255,255,.035));
  mix-blend-mode: screen;
}
.screen-bezel {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 0; font-size: 6.5px; letter-spacing: .28em; color: rgba(255, 255, 255, .28);
}
.bezel-led { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* d-pad */
.console-dpad {
  position: relative; width: 164px; height: 164px; justify-self: end;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .6));
}
.console-dpad::before, .console-dpad::after {
  content: ""; position: absolute; z-index: 1; border-radius: 16px;
  background: linear-gradient(180deg, #2b313a, #191e24 70%, #12161b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 3px rgba(0, 0, 0, .55);
}
.console-dpad::before { left: 54px; top: 0; width: 56px; height: 164px; }
.console-dpad::after { left: 0; top: 54px; width: 164px; height: 56px; }
.dp-btn {
  position: absolute; width: 56px; height: 56px; padding: 0; z-index: 2;
  border: 0; background: transparent;
  color: #93a2b5; display: grid; place-items: center; cursor: pointer;
  transition: color .1s, background .1s;
}
.dp-btn .ic { width: 18px; height: 18px; }
.dp-btn:active, .dp-btn.holding { color: var(--cyan); background: rgba(94, 231, 255, .07); }
.dp-btn.up { left: 54px; top: 0; border-radius: 12px 12px 6px 6px; }
.dp-btn.left { left: 0; top: 54px; border-radius: 12px 6px 6px 12px; }
.dp-btn.right { left: 108px; top: 54px; border-radius: 6px 12px 12px 6px; }
.dp-btn.down { left: 54px; top: 108px; border-radius: 6px 6px 12px 12px; }
.dp-center { display: none; }

/* A / B */
.console-ab { position: relative; width: 164px; height: 164px; justify-self: start; }
.ab {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--display); font-size: 19px; font-weight: 600; color: #04131a;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 12px 20px -8px rgba(0, 0, 0, .95);
  transition: transform .08s, box-shadow .08s;
}
.ab.a { right: 0; top: 16px; background: radial-gradient(circle at 35% 28%, #C6FAFF, #4FD6F2 58%, #1D8AA4); }
.ab.b { left: 0; top: 74px; background: radial-gradient(circle at 35% 28%, #FFEDB0, #FFC24B 58%, #9A6210); }
.ab:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 5px 10px -4px rgba(0,0,0,.9); }
.ab-hint {
  position: absolute; right: 0; bottom: -6px; text-align: right;
  font-size: 6.5px; line-height: 1.7; letter-spacing: .2em; color: rgba(255, 255, 255, .3);
}

.device-bottom { display: flex; flex-direction: column; gap: 5px; padding: 3px 4px 0; }
.sys-buttons { display: flex; justify-content: center; gap: 28px; padding: 3px 0 1px; }
.sys-btn {
  min-width: 58px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, #2b323b, #171c23 55%, #0e1218);
  color: var(--ink-2); font-family: inherit; font-size: 6px; font-weight: 600;
  letter-spacing: .24em; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 3px rgba(0, 0, 0, .6),
    0 6px 10px -6px rgba(0, 0, 0, .95);
  transition: transform .08s, color .1s;
}
.sys-btn:active { transform: translateY(1px); color: var(--cyan); }
.device-foot { display: flex; align-items: center; gap: 10px; }
.screw {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #4d545e, #14181d 72%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), 0 1px 1px rgba(255, 255, 255, .08);
}
.screw::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 3.5px; height: 1px;
  background: rgba(0, 0, 0, .65); transform: rotate(32deg);
}
.s1 { left: 12px; top: 12px; }
.s2 { right: 12px; top: 12px; }
.s3 { left: 12px; bottom: 12px; }
.s4 { right: 12px; bottom: 12px; }
.hard-btn {
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #262c34, #141920);
  color: var(--ink-3); border-radius: 999px; font-size: 6.5px; font-weight: 600;
  letter-spacing: .22em; padding: 5px 10px; cursor: pointer;
}
.hard-btn.off { opacity: .45; }
.hard-btn:active { transform: translateY(1px); }
.speaker { margin: 0 auto; color: rgba(255, 255, 255, .16); letter-spacing: .26em; font-size: 9px; }

/* focus + screen content */
.console-focus {
  outline: 2px solid var(--cyan) !important; outline-offset: 3px;
  box-shadow: 0 0 22px -6px rgba(94, 231, 255, .9) !important;
}
.screen .page-head { padding: 16px 14px 8px; }
.screen .page-head h1 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 6px; }
.screen .page-head .lede { font-size: 11px; line-height: 1.5; max-width: 46ch; }
.screen .btn { padding: 6px 11px; font-size: 10px; border-radius: 9px; gap: 6px; }
.screen .btn.big { padding: 8px 14px; font-size: 11px; }
.screen .eyebrow { font-size: 7px; margin-bottom: 5px; letter-spacing: .2em; }
.screen .muted { font-size: 11px; }

/* menu */
/* Vertical scrolling is a safety net: on short windows the menu must never
   be clipped at the top (which used to cut the first line of the title). */
.console-menu { position: relative; min-height: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }
.console-menu canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  object-fit: cover; opacity: .62; filter: saturate(1.15) blur(.4px);
}
.menu-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 12, .25) 0%, rgba(3, 8, 12, .72) 58%, rgba(3, 8, 12, .94) 100%),
    radial-gradient(80% 60% at 50% 18%, transparent, rgba(3, 8, 12, .55));
}
.menu-panel { position: relative; z-index: 2; min-height: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 3% 6%; }
.menu-kicker { font-size: 7px; letter-spacing: .34em; color: var(--cyan); margin-bottom: 4px; }
.menu-title { font-family: var(--display); font-size: clamp(28px, 3.8vw, 52px); line-height: 1; letter-spacing: -.045em; color: #fff; }
.menu-tag { font-size: 10px; color: var(--ink-2); margin: 6px 0 10px; }
.menu-list { display: flex; flex-direction: column; gap: 5px; max-width: 380px; }
.menu-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  text-align: left; padding: 8px 11px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(8, 14, 20, .62);
  color: var(--ink); cursor: pointer; transition: transform .12s, border-color .12s;
}
.menu-item span { font-family: var(--display); font-size: 14px; letter-spacing: -.01em; }
.menu-item em { font-style: normal; font-size: 9px; color: var(--ink-3); letter-spacing: .02em; }
.menu-item.primary { border-color: rgba(94, 231, 255, .5); background: linear-gradient(90deg, rgba(94, 231, 255, .2), rgba(94, 231, 255, .04)); }
.menu-item:hover { transform: translateX(2px); border-color: rgba(94, 231, 255, .4); }
/* Main menu as a wall of function blocks. */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; max-width: min(720px, 100%); }
/* Wide desktops: four columns keep the wall short in wide/low windows. */
@media (min-width: 1100px) {
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: min(920px, 100%); }
}
.menu-block {
  position: relative; appearance: none; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-height: 66px; padding: 8px 9px;
  text-align: left; color: var(--ink); border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(160deg, rgba(13, 28, 36, .9), rgba(6, 14, 20, .8));
  transition: transform .16s ease, border-color .16s, box-shadow .16s;
}
.menu-block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(94, 231, 255, .18) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .5s ease;
}
.menu-block:hover::after, .menu-block.console-focus::after { transform: translateX(120%); }
.menu-block:hover, .menu-block.console-focus {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(94, 231, 255, .55);
  box-shadow: 0 0 0 2px rgba(94, 231, 255, .16), 0 14px 26px -18px #000;
}
.mb-ico { display: block; color: var(--cyan); }
.mb-ico svg { display: block; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-block.console-focus .mb-ico svg, .menu-block:hover .mb-ico svg { animation: mb-pop .3s ease-out; }
@keyframes mb-pop { 0% { transform: scale(.86); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }
.mb-main { font-family: var(--display); font-size: 12px; line-height: 1.1; letter-spacing: -.01em; }
.mb-sub { font-size: 7.5px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-block.primary { border-color: rgba(94, 231, 255, .42); background: linear-gradient(160deg, rgba(94, 231, 255, .22), rgba(8, 18, 24, .86)); }
.menu-foot { margin-top: 10px; font-size: 6.5px; letter-spacing: .22em; color: var(--ink-3); }

/* Wide but low windows (e.g. a short browser window): use the extra width
   for six columns so all twelve tiles stay visible without scrolling. */
@media (min-width: 1100px) and (max-height: 640px) {
  .menu-panel { padding: 2% 5%; }
  .menu-kicker { display: none; }
  .menu-title { font-size: clamp(28px, 3.2vw, 40px); }
  .menu-tag { margin: 3px 0 6px; }
  .menu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; gap: 5px; }
  .menu-block { min-height: 56px; padding: 5px 7px; gap: 1px; }
  .menu-foot { margin-top: 6px; }
  .mb-ico svg { width: 15px; height: 15px; }
  .mb-main { font-size: 11px; }
  .mb-sub { font-size: 6.5px; }
}

/* play inside the screen */
.screen .play { min-height: 100%; height: 100%; padding: 0; }
.screen .play-top { padding: 8px 12px 4px; gap: 8px; }
.screen .play-top .icon-btn { height: 26px; min-width: 26px; padding: 0 6px; }
.screen .play-meta h1 { font-size: 17px; }
.screen .play-meta p { font-size: 8px; margin-top: 1px; }
.screen .hud { gap: 5px; }
.screen .hud-item { padding: 3px 7px; min-width: 50px; border-radius: 7px; }
.screen .hud-item span { font-size: 7px; letter-spacing: .14em; }
.screen .hud-item b { font-size: 14px; }
.screen .legend { font-size: 8.5px; gap: 8px; padding: 2px 12px 4px; }
.screen .lg { width: 9px; height: 9px; }
.screen .board-wrap { min-height: 0; flex: 1; border-radius: 0; box-shadow: none; }
.screen .play-bottom { padding: 2px 12px 8px; gap: 8px; }
.screen .play-bottom .btn { padding: 5px 9px; font-size: 9px; }
.screen .play-hint { font-size: 8px; letter-spacing: .12em; color: var(--ink-3); }
.screen .play-actions .icon-btn { height: 28px; min-width: 28px; padding: 0 8px; font-size: 10px; }

/* roadmap inside the screen */
.screen .road-node, .screen .node-badge { width: 42px; height: 42px; }
.screen .node-badge { font-size: 12px; border-radius: 11px; }
.screen .road-node.cleared .node-badge::after { width: 14px; height: 14px; font-size: 8px; right: -4px; bottom: -4px; }
.screen .node-label { top: 46px; width: 128px; font-size: 8px; }
.screen .node-label b { font-size: 9.5px; }
.screen .chapter-mark em { font-size: 16px; }
.screen .chapter-mark span { font-size: 7px; }

/* cards / editor in the screen */
.screen .plaza-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.screen .card-body { padding: 9px 10px 10px; }
.screen .card-body h3 { font-size: 13px; }
.screen .thumb { min-height: 96px; padding: 6px; }
.screen .by, .screen .card-stats { font-size: 8.5px; }
.screen .search { padding: 6px 9px; font-size: 10px; min-width: 150px; }
.screen .tabs button { padding: 5px 10px; font-size: 9px; }
.screen .level-grid { grid-template-columns: 1fr; gap: 6px; }
.screen .level-card { padding: 8px 10px; }
.screen .lv-no { width: 30px; height: 30px; font-size: 12px; }
.screen .lv-body h3 { font-size: 12px; }
.screen .lv-body p { font-size: 8.5px; }
.screen .editor-wrap { grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.screen .ed-help { display: none; }
.screen .ed-side { padding: 8px; }
.screen .ed-main { padding: 8px; }
.screen .pal-row { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.screen .pal-tile em { font-size: 6.5px; }
.screen .ed-title { font-size: 13px; padding: 6px 8px; }
.screen .ed-tools .btn { padding: 5px 8px; font-size: 9px; }
.screen .ed-status { font-size: 9px; }
.screen .ed-board { height: clamp(190px, 34vh, 300px); }
.screen .ed-side-head { margin-bottom: 6px; }
.screen .ed-pal-note { font-size: 8px; margin-top: 8px; }

/* modals inside the screen */
.screen .modal { position: absolute; inset: 0; padding: 12px; border-radius: 12px; }
.screen .modal-card { width: min(360px, 100%); padding: 16px; border-radius: 14px; max-height: 92%; overflow-y: auto; }

/* Account sheet opened while a room is running. It takes the right-hand column
   of the LCD and the room shrinks into the remaining one, so the board stays in
   view and the D-pad / A-B outside the LCD keep doing what they did before the
   panel opened. A full-screen overlay here made the game feel frozen. */
.screen.docked-open .play { width: 42%; }
.screen.docked-open .play-top { padding: 6px 8px 2px; gap: 5px; flex-wrap: wrap; }
.screen.docked-open .legend { display: none; }
.screen.docked-open .play-bottom .play-hint { display: none; }
.screen.docked-open .board-wrap { padding: 0; }
.screen .modal.docked {
  inset: 0 0 0 auto; width: 58%; padding: 5px; border-radius: 0;
  background: linear-gradient(180deg, rgba(6, 12, 18, .96), rgba(4, 8, 13, .98));
  border-left: 1px solid rgba(94, 231, 255, .14);
  place-items: stretch; backdrop-filter: none; animation: slide-in .18s ease-out;
}
@keyframes slide-in { from { transform: translateX(14px); opacity: .4; } }
.screen .modal.docked .modal-card.account {
  width: 100%; max-height: 100%; height: 100%; padding: 10px 12px; border-radius: 10px;
  overflow-y: auto;
}
.screen .modal.docked .modal-card.account h2 { font-size: 15px; margin-bottom: 3px; }
.screen .modal.docked .modal-card.account .account-avatar > .avatar { width: 34px; height: 34px; font-size: 12px; }
.screen .modal.docked .modal-card.account .account-avatar-side b { font-size: 10px; }
.screen .modal.docked .modal-card.account .modal-actions .btn { padding: 5px 8px; font-size: 9px; }
.screen .modal.docked .modal-card.account .field .search { height: 28px; font-size: 11px; }

/* The account dialog is the one long form in the game, so it is mounted on
   <body> and gets the whole window instead of the handheld's small LCD. The
   type scale stays close to the console look rather than desktop-web large,
   so the sign-in fields and both buttons fit a 540px-tall window. */
.modal-card.account {
  width: min(430px, 92vw);
  max-height: min(92vh, 760px);
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: 18px;
}
.modal-card.account h2 { font-size: 26px; margin-bottom: 10px; }
.modal-card.account .muted { font-size: 12px; line-height: 1.45; margin-bottom: 12px; }
.modal-card.account .field { margin-bottom: 10px; font-size: 11px; }
.modal-card.account .field .search { height: 34px; font-size: 12px; }
.modal-card.account .modal-actions { margin-top: 12px; gap: 8px; }
.modal-card.account .modal-actions .btn { padding: 8px 12px; font-size: 11px; }
.modal-card.account .auth-tabs button { font-size: 11px; padding: 7px 10px; }
.screen .modal-card h2 { font-size: 20px; margin-bottom: 8px; }
.screen .modal-card .muted { font-size: 10px; margin-bottom: 8px; }
.screen .modal-actions { margin-top: 10px; gap: 6px; }
.screen .modal-actions .btn { padding: 6px 10px; font-size: 9px; }
.screen .win-stats { gap: 6px; }
.screen .win-stats > div { padding: 7px 9px; }
.screen .win-stats b { font-size: 16px; }
.screen .win-stats span { font-size: 6px; }
.screen .board li { font-size: 9px; }

/* Test play fills the handheld screen. The generic .screen .modal-card rule
   above clamps every dialog to 360px, which squeezed the play-test canvas into
   a narrow column with the draft title overflowing its header. */
.screen .modal.test { padding: 8px; }
.screen .modal.test .modal-card,
.screen .modal.test .test-card {
  width: min(1120px, 100%);
  height: 100%;
  max-height: 100%;
  padding: 10px 12px;
  gap: 8px;
  border-radius: 13px;
  overflow: hidden;
}
.screen .modal.test .test-head { align-items: center; gap: 10px; }
.screen .modal.test .test-head > div { min-width: 0; flex: 1; }
.screen .modal.test .test-head .eyebrow { font-size: 7px; margin: 0 0 2px; }
.screen .modal.test .test-head h2 {
  font-size: clamp(13px, 1.5vw, 20px);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.screen .modal.test .test-head .icon-btn { flex: none; width: 22px; height: 22px; font-size: 10px; }
.screen .modal.test .test-board { min-height: 0; flex: 1; border-radius: 10px; }
.screen .modal.test .test-board canvas { max-width: 100%; max-height: 100%; }
.screen .modal.test .test-foot { font-size: 9px; }
.screen .modal.test .test-foot .btn { padding: 5px 9px; font-size: 8px; }
.screen .howto-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 5px; }
.screen .howto-list li { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--ink-2); }
.screen .howto-list b { color: var(--ink); font-weight: 500; }
.screen .toast { position: absolute; bottom: 10px; font-size: 9px; padding: 7px 12px; white-space: nowrap; }

@media (max-width: 900px) {
  #app { padding: 0; }
  .handheld { width: 100%; }
  .device {
    height: 100vh;
    height: 100dvh;
    border-radius: 0; padding: 8px 7px 5px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
  }
  .device-top { padding-bottom: 6px; }
  .device-main {
    flex: 1; display: grid; grid-template-columns: 132px 132px;
    justify-content: space-between; grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px; align-content: stretch; min-height: 0;
  }
  .screen-frame {
    grid-column: 1 / -1; grid-row: 1; width: 100%; padding: 6px 6px 3px;
    align-self: stretch; min-height: 0; display: flex; flex-direction: column;
  }
  .screen { aspect-ratio: auto; height: auto; flex: 1; min-height: 0; max-height: none; }
  .console-dpad {
    grid-column: 1; grid-row: 2; justify-self: start; align-self: end;
    width: 164px; height: 164px; transform: none; transform-origin: top left;
    margin-bottom: 6px;
  }
  .console-dpad .dp-btn .ic { width: 22px; height: 22px; }
  .console-ab {
    grid-column: 2; grid-row: 2; justify-self: end; align-self: end;
    width: 164px; height: 164px; transform: none; transform-origin: top right;
    margin-bottom: 6px;
  }
  .console-menu { overflow: visible; }
  .menu-panel { justify-content: flex-start; padding: 6% 6%; }
  .menu-title { font-size: 26px; }
  .menu-tag { margin: 4px 0 8px; }
  .menu-item { padding: 6px 9px; }
  .menu-item span { font-size: 12px; }
  .menu-item em { font-size: 7px; }
  .menu-foot { margin-top: 7px; }  .screen .page-head { padding: 12px 10px 6px; }
  .screen .page-head h1 { font-size: 24px; }
  .screen .editor-wrap { grid-template-columns: 1fr; }
  .screen .ed-side { order: 2; }
  .screen .plaza-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* mechanics chips used by the how-to card */
.lg.heavy {
  background: linear-gradient(160deg, #4A5A66, #1A242C);
  box-shadow: inset 0 0 0 2px rgba(255, 194, 75, .7);
  border-radius: 3px;
}
.lg.lever {
  background: linear-gradient(160deg, #FFC24B, #9A6210);
  border-radius: 2px 2px 5px 5px;
}
.lg.tramp {
  background: radial-gradient(circle, #BFF6FF 0 26%, #1D8AA4 28% 58%, #0E141C 60%);
  border-radius: 50%;
}
.lg.crack {
  background: linear-gradient(150deg, #CFF8FF, #7FCBD9);
  box-shadow: inset 0 0 0 1px rgba(60, 130, 150, .6);
}

/* ---------------- handheld editor ---------------- */
.view-editor { position: relative; height: 100%; overflow: hidden !important; }
.view-editor #editor-root { height: 100%; }
.ed-stage { position: absolute; inset: 0; overflow: hidden; background: #041018; }
.ed-stage #ed-canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  display: block; touch-action: none; cursor: crosshair;
}
.ed-hud {
  position: absolute; left: 8px; right: 8px; top: 6px; z-index: 4;
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.ed-hud .icon-btn {
  pointer-events: auto; width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
  background: rgba(4, 10, 14, .78); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px; backdrop-filter: blur(6px);
}
.ed-hud .ed-live { pointer-events: none; }
.ed-hud .ed-live {
  margin: 0 2px; font-size: 9px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-3); background: rgba(4, 10, 14, .78); backdrop-filter: blur(6px);
  white-space: nowrap;
}
.ed-hud .ed-live.ok { color: var(--green); border-color: rgba(61, 220, 151, .5); }
.ed-hud .ed-live.bad { color: var(--red); border-color: rgba(255, 92, 108, .5); }
.ed-hud .ed-live.busy { color: var(--cyan); }

/* Which floor is on the canvas. The L1/L2/L3 strip is small and easy to miss;
   this badge sits on the board so the active floor is never ambiguous. */
.ed-floor {
  position: absolute; right: 8px; bottom: 10px; z-index: 5;
  display: flex; align-items: baseline; gap: 2px;
  padding: 5px 9px; border-radius: 10px;
  background: rgba(4, 10, 14, .85); border: 1px solid rgba(255, 194, 75, .5);
  backdrop-filter: blur(6px); pointer-events: none;
}
.ed-floor[hidden] { display: none; }
.ed-floor b { font-family: var(--display); font-size: 16px; line-height: 1; color: var(--gold); }
.ed-floor em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.ed-floor span { font-size: 6.5px; letter-spacing: .16em; color: var(--ink-3); margin-left: 5px; }
/* Solver progress while Auto test is searching (below the floor strip). */
.ed-progress {
  position: absolute; left: 8px; right: 8px; top: 76px; z-index: 6;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(4, 10, 14, .82); border: 1px solid rgba(94, 231, 255, .28);
  backdrop-filter: blur(6px); pointer-events: none;
}
.ed-progress[hidden] { display: none; }
.ed-progress-label { font-size: 9px; letter-spacing: .1em; color: var(--cyan); white-space: nowrap; }
.ed-progress-track {
  flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .09);
}
.ed-progress-track i {
  display: block; height: 100%; width: 4%; border-radius: inherit;
  background: linear-gradient(90deg, #45c8e6, #9df3ff);
  position: relative; overflow: hidden;
  transition: width .16s linear;
}
.ed-progress-track i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: ed-solve-shimmer 1.1s linear infinite;
}
@keyframes ed-solve-shimmer { to { transform: translateX(100%); } }
.ed-hud .ed-brush {
  pointer-events: auto; margin-left: auto; max-width: 42%;
  font-family: var(--display); font-size: 10px; letter-spacing: .02em;
  color: var(--ink); background: rgba(4, 10, 14, .78);
  border: 1px solid rgba(94, 231, 255, .35); border-radius: 999px;
  padding: 5px 11px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(6px);
}
.ed-tip {
  position: absolute; left: 0; right: 0; bottom: 5px; z-index: 3; text-align: center;
  font-size: 7px; letter-spacing: .1em; color: rgba(255, 255, 255, .38); pointer-events: none;
}
.ed-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: rgba(4, 10, 14, .97); border-top: 1px solid rgba(94, 231, 255, .25);
  border-radius: 14px 14px 0 0; padding: 9px 10px 12px;
  max-height: 70%; overflow-y: auto; scrollbar-width: thin;
  box-shadow: 0 -20px 44px -22px rgba(0, 0, 0, .95);
  backdrop-filter: blur(8px);
}
.ed-sheet[hidden] { display: none; }
.ed-sheet-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.ed-sheet-head b { font-family: var(--display); font-size: 13px; letter-spacing: .06em; color: var(--ink); }
.ed-sheet-head span:last-child { margin-left: auto; }
.ed-sheet-head .ed-sheet-hint { color: var(--cyan); }
.ed-tiles .pal-group { margin-bottom: 8px; }
.ed-tiles .pal-name { font-size: 7.5px; margin-bottom: 4px; }
.ed-tiles .pal-row { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ed-tiles .pal-tile {
  aspect-ratio: 1; padding: 0; border-radius: 8px; overflow: hidden;
  background: #0a1118; border: 1px solid var(--line); position: relative;
}
.ed-tiles .pal-ico { width: 100%; height: 100%; display: block; }
.ed-tiles .pal-tile em {
  position: absolute; left: 0; right: 0; bottom: 0; transform: none;
  font-size: 8.5px; padding: 3px 0; background: rgba(3, 8, 12, .8);
  text-align: center; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-tiles .pal-tile.on {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(94, 231, 255, .35), 0 0 18px -6px rgba(94, 231, 255, .6);
}
/* Undo / eraser / reset sit with the paint tiles for quick picking. */
.ed-tiles { display: flex; flex-direction: column; overflow: hidden; }
.ed-tiles .ed-fixed {
  position: sticky; top: 0; z-index: 3; flex: none;
  background: rgba(4, 10, 14, .98); padding-bottom: 6px;
  border-bottom: 1px solid rgba(94, 231, 255, .12); margin-bottom: 6px;
}
.ed-tiles .ed-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ed-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.ed-stat { font-size: 8px; color: var(--ink-3); margin-right: auto; font-variant-numeric: tabular-nums; }
.ed-mini-group { display: inline-flex; align-items: center; gap: 3px; }
.ed-mini-label { font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ed-mini-group button {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink-2);
  border-radius: 5px; padding: 2px 5px; font-size: 8px; cursor: pointer;
}
.ed-mini-group button.on { border-color: rgba(94, 231, 255, .55); color: var(--cyan); }
.ed-mini-group button:disabled { opacity: .3; cursor: default; }
/* Map size lives in the tile drawer, next to the floor pickers. */
.ed-mini-size input {
  width: 30px; padding: 2px 4px; text-align: center;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink-1);
  border-radius: 5px; font-size: 8px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.ed-mini-size input::-webkit-outer-spin-button,
.ed-mini-size input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-mini-size input:focus { outline: none; border-color: rgba(94, 231, 255, .55); color: var(--cyan); }
.ed-mini-x { font-size: 8px; color: var(--ink-3); font-style: normal; }
.ed-tiles .pal-tools .pal-row { grid-template-columns: repeat(4, 1fr); }
.ed-tiles .pal-tile.ed-tool {
  background: linear-gradient(180deg, #15242f, #0a1118);
  display: grid; place-items: center;
}
.ed-tiles .pal-tile.ed-tool .pal-ico {
  display: grid; place-items: center; width: 100%; height: 100%;
  padding-bottom: 11px; font-size: 21px; line-height: 1; color: var(--ink-2);
}
.ed-tiles .pal-tile.ed-tool[data-tool="reset"] .pal-ico { color: #ff8b98; }
.ed-tiles .pal-tile.ed-tool.on .pal-ico { color: var(--cyan); }
.ed-menu .ed-title {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 10px; font-family: var(--display); font-size: 15px;
  background: rgba(255, 255, 255, .04); outline: none;
}
.ed-menu .ed-size { display: flex; gap: 8px; margin-top: 7px; font-size: 9px; color: var(--ink-3); }
.ed-menu .ed-size label { display: inline-flex; align-items: center; gap: 5px; }
.ed-menu .ed-size input {
  width: 46px; border: 1px solid var(--line); border-radius: 7px; padding: 5px;
  background: rgba(255, 255, 255, .04); text-align: center;
  font-family: var(--display); font-size: 12px;
}
.ed-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.ed-actions .btn { justify-content: center; padding: 7px 5px; font-size: 10.5px; border-radius: 8px; }
.ed-actions .btn.on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 2px rgba(94, 231, 255, .2); }
.ed-menu .ed-status { margin-top: 8px; font-size: 10px; color: var(--ink-3); min-height: 14px; }

/* Desktop editor: dock the tile/room drawers to the right so the map stays visible. */
@media (min-width: 900px) {
  .ed-sheet {
    left: auto; right: 0; top: 0; bottom: 0;
    width: min(340px, 40%);
    max-height: 100%;
    border-top: 0; border-left: 1px solid rgba(94, 231, 255, .25);
    border-radius: 14px 0 0 14px;
    padding: 11px 13px 14px;
    box-shadow: -24px 0 48px -28px rgba(0, 0, 0, .95);
  }
  .ed-sheet.ed-menu { width: min(380px, 44%); }
  .ed-tiles .pal-row { grid-template-columns: repeat(3, 1fr); }
  .ed-sheet-head { position: sticky; top: 0; z-index: 2; padding: 2px 0 6px; background: rgba(4, 10, 14, .97); }
}

/* Very narrow phones: keep both thumb clusters from overlapping. */
@media (max-width: 350px) {
  .console-dpad { transform: scale(.86); transform-origin: top left; }
  .console-ab { transform: scale(.86); transform-origin: top right; }
}

/* ---------------------------------------------------------------- capture
   Recording mode (?capture=1). The handheld shell is the product's face, but
   when the window is 800x450 the plastic around the LCD eats a third of the
   frame and squeezes the playfield into a letterbox. For the duel recordings
   the game itself is what matters, so the shell steps aside and the screen
   takes the whole window — which also lands on a clean 16:9 canvas. */
body.capture #app { padding: 0; }
body.capture .handheld { width: 100%; }
body.capture .device {
  height: 100dvh; padding: 0; border: 0; border-radius: 0;
  box-shadow: none; background: #041018;
}
body.capture .device::before,
body.capture .device::after { display: none; }
body.capture .device-top,
body.capture .device-bottom,
body.capture .console-dpad,
body.capture .console-ab,
body.capture .screen-bezel { display: none !important; }
body.capture .device-main { display: block; min-height: 0; height: 100%; }
body.capture .screen-frame {
  height: 100%; padding: 0; border-radius: 0;
  background: #041018; box-shadow: none;
}
body.capture .screen { border-radius: 0; box-shadow: none; }
body.capture .screen-glare { opacity: .3; }