:root {
  color-scheme: light; --ink: #2d2033; --paper: #f4d694; --paper-light: #fff0be; --cedar: #7a4434;
  --moss: #35533e; --lake: #4b8ea1; --warning: #bd5a4e; --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
}
@font-face { font-family: "EcoText"; src: url("../assets/fonts/VT323/VT323-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: block; }
* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #17110e; color: var(--ink); font-family: "EcoText", monospace; image-rendering: pixelated; touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 4px solid var(--paper-light); outline-offset: 2px; }
.boot-screen { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; overflow: hidden; background: #248db7 url("../assets-pixel/ui-v2/eco-loading-island-v2.png") center/cover no-repeat; color: var(--paper-light); font-family: "EcoText", monospace; text-shadow: 3px 3px var(--ink); }
.boot-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 45, 60, .08), rgba(12, 30, 36, .48)); }
.boot-card { position: relative; display: grid; place-items: center; gap: 8px; min-width: min(380px, calc(100vw - 32px)); padding: 14px 34px 18px; border: 18px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-panel-v3.png") 30 fill stretch; background: rgba(49, 73, 51, .88); }
.boot-card img { width: 112px; image-rendering: pixelated; animation: boot-bob 900ms steps(2, end) infinite; }
.boot-card strong { color: #31543c; font-size: clamp(34px, 6vw, 48px); line-height: .8; letter-spacing: 3px; text-shadow: 2px 2px #fff0be, 4px 4px #7a4434; }
.boot-card span { font-family: "EcoText", monospace; color: #4b3541; font-size: 22px; text-shadow: none; }
.boot-progress { width: min(280px, 70vw); height: 18px; padding: 4px; border: 4px solid #2d2033; background: #f6dda0; box-shadow: 0 4px 0 rgba(45, 32, 51, .55); overflow: hidden; }
.boot-progress i { display: block; width: 46%; height: 100%; background: repeating-linear-gradient(90deg, #78b85b 0 12px, #9bd36c 12px 18px); animation: boot-progress 1.2s steps(6, end) infinite; }
@keyframes boot-bob { 50% { transform: translateY(-6px); } }
@keyframes boot-progress { from { transform: translateX(-110%); } to { transform: translateX(230%); } }
.main-menu { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: calc(56px + var(--safe-top)) calc(12px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
.menu-shade { position: absolute; inset: 0; background: rgba(31, 29, 37, .36); pointer-events: none; }
.pixel-board { border: 24px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-panel-v3.png") 30 fill stretch; image-rendering: pixelated; }
.menu-utility { position: absolute; z-index: 2; top: calc(8px + var(--safe-top)); left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--paper-light); font-size: 22px; text-shadow: 2px 2px var(--ink); }
.language-switch, .account-strip { display: flex; align-items: center; gap: 7px; }
.language-switch button, .small-tile { min-width: 46px; min-height: 34px; padding: 0 10px; border: 8px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-button-compact-cedar-v3.png") 16 fill stretch; background: transparent; color: var(--ink); line-height: 18px; text-shadow: none; }
.language-switch button.selected { border-image-source: url("../assets-pixel/ui-v3/eco-ui-button-compact-moss-v3.png"); }
.account-strip > img { width: 32px; height: 32px; image-rendering: pixelated; }
.account-strip > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permit-panel { position: relative; z-index: 1; width: min(880px, calc(100vw - 24px)); max-height: calc(100vh - 76px); overflow: hidden; padding: 8px 24px 12px; text-align: center; background: #f2d99b; filter: drop-shadow(0 12px 0 rgba(45, 32, 51, .34)); }
.permit-brand { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 0; }
.permit-brand > img { width: 106px; height: auto; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 var(--cedar)); }
.permit-brand h1 { margin: 0; color: var(--moss); font-family: "EcoText", monospace; font-size: clamp(42px, 6vw, 64px); line-height: .78; letter-spacing: 3px; text-shadow: 2px 2px var(--paper-light), 4px 4px var(--cedar); }
.permit-brand p { margin: 10px 0 0; color: var(--cedar); font-size: 18px; letter-spacing: 2px; }
.permit-subtitle { margin: 3px 0 12px; font-size: 24px; }
.permit-grid { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(340px, 1.18fr); gap: 26px; text-align: left; }
.permit-grid h2, .identity-section > label { display: block; margin: 6px 0; color: var(--cedar); font-size: 23px; font-weight: 700; }
.pixel-input { width: 100%; min-height: 50px; padding: 3px 18px; border: 14px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; background: transparent; color: var(--ink); font-size: 28px; user-select: text; -webkit-user-select: text; touch-action: auto; outline: none; }
.character-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.character-picker button { min-height: 152px; padding: 3px 8px; border: 13px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-button-cedar-v3.png") 28 fill stretch; background: transparent; font-size: 24px; display: grid; place-items: center; gap: 0; }
.character-picker button.selected { border-image-source: url("../assets-pixel/ui-v3/eco-ui-button-moss-v3.png"); transform: translateY(-3px); }
.character-picker img { width: 64px; height: 96px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(45, 32, 51, .32)); }
.mode-section { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px 12px; }
.mode-section h2 { grid-column: 1 / -1; margin-bottom: 2px; }
.mode-badge { border: 0; padding: 0 5px 6px; background: transparent; display: grid; place-items: center; text-align: center; }
.mode-badge img { width: 100%; max-width: 210px; image-rendering: pixelated; }
.mode-badge strong { min-width: 150px; margin-top: -12px; padding: 3px 12px; border: 8px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-button-compact-moss-v3.png") 16 fill stretch; color: var(--ink); background: transparent; font-size: 22px; line-height: 18px; text-shadow: none; }
.mode-badge.selected img { filter: drop-shadow(0 5px 0 #e1b44c); transform: translateY(-3px); }
.mode-badge.locked { opacity: .7; cursor: not-allowed; }
.mode-badge.locked strong { border-image-source: url("../assets-pixel/ui-v3/eco-ui-button-compact-coral-v3.png"); }
.menu-message { min-height: 23px; margin: 5px 0; color: var(--warning); font-size: 21px; }
.play-button, .primary-button, .secondary-button { border: 13px solid transparent; background: transparent; min-height: 58px; padding: 2px 24px; color: var(--ink); font-family: "EcoText", monospace; font-size: 22px; line-height: 23px; letter-spacing: 1px; text-shadow: none; }
.play-button { width: min(520px, 100%); border-image: url("../assets-pixel/ui-v3/eco-ui-button-moss-v3.png") 28 fill stretch; }
.play-button:active, .primary-button:active, .secondary-button:active, .small-tile:active { transform: translateY(3px); }
.permit-panel footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; color: var(--cedar); font-size: 17px; }
.auth-dialog { position: fixed; z-index: 5; width: min(460px, calc(100vw - 24px)); padding: 14px 24px 20px; text-align: center; background: #f2d99b; }
.auth-dialog[hidden] { display: none; }
.auth-dialog h2 { margin: 2px 0 12px; font-size: 30px; color: var(--moss); }
.auth-mark { width: 48px; image-rendering: pixelated; }
.auth-dialog label { display: block; margin: 9px 0; text-align: left; font-size: 22px; }
.auth-dialog label span { display: block; margin-bottom: 3px; }
.auth-dialog form > div { display: flex; justify-content: center; gap: 10px; }
.auth-message { min-height: 24px; color: var(--warning); font-size: 20px; }
.primary-button { border-image: url("../assets-pixel/ui-v3/eco-ui-button-moss-v3.png") 28 fill stretch; }
.secondary-button { border-image: url("../assets-pixel/ui-v3/eco-ui-button-cedar-v3.png") 28 fill stretch; }
.online-lobby { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) max(14px, var(--safe-bottom)) max(14px, var(--safe-left)); background: #287c88 url("../assets-pixel/ui-v2/eco-online-lobby-v2.png") center/cover no-repeat; }
.lobby-vignette { position: absolute; inset: 0; background: rgba(24, 39, 42, .22); box-shadow: inset 0 0 90px rgba(20, 24, 31, .42); }
.lobby-bunting { position: absolute; z-index: 1; top: max(8px, var(--safe-top)); left: 50%; width: min(620px, 82vw); height: 16px; transform: translateX(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.lobby-bunting i { width: 14px; height: 14px; display: block; background: #d7764e; border: 3px solid #5a3035; transform: rotate(45deg); image-rendering: pixelated; }
.lobby-bunting i:nth-child(2n) { background: #e6b34f; }
.lobby-bunting i:nth-child(3n) { background: #6fae67; }
.matchmaking-board { position: relative; z-index: 1; width: min(720px, calc(100vw - 24px)); padding: 16px 28px 18px; background: rgba(244, 214, 148, .97); text-align: center; filter: drop-shadow(0 12px 0 rgba(45, 32, 51, .38)); }
.matchmaking-board header { display: flex; justify-content: center; align-items: center; gap: 18px; }
.matchmaking-board header img { width: 94px; image-rendering: pixelated; filter: drop-shadow(3px 4px 0 rgba(45, 32, 51, .35)); }
.matchmaking-board h1 { margin: 0; color: var(--moss); font-family: "EcoText", monospace; font-size: clamp(34px, 5vw, 54px); font-weight: 700; line-height: .82; letter-spacing: 2px; text-shadow: 2px 2px #f7e6b5, 3px 3px #8b5a35; }
.matchmaking-board header p { margin: 10px 0 0; color: var(--cedar); font-size: 23px; }
.lobby-kicker { display: block; margin-bottom: 6px; color: #4b8ea1; font-size: 17px; letter-spacing: 2px; }
.queue-status { margin: 14px auto 12px; padding: 7px 14px; display: grid; gap: 2px; border: 8px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; color: var(--cedar); font-size: 20px; }
.queue-status strong { color: var(--ink); font-family: "EcoText", monospace; font-size: 21px; letter-spacing: 1px; }
.queue-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.queue-slots article { position: relative; min-width: 0; min-height: 104px; display: grid; place-items: center; align-content: center; gap: 5px; border: 13px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-button-cedar-v3.png") 28 fill stretch; color: var(--cedar); font-size: 18px; transition: transform 160ms steps(2, end), filter 160ms steps(2, end); }
.queue-slots article.filled { border-image-source: url("../assets-pixel/ui-v3/eco-ui-button-moss-v3.png"); color: var(--ink); text-shadow: none; }
.queue-slots article.filled { transform: translateY(-3px); filter: drop-shadow(0 4px 0 rgba(45, 32, 51, .28)); }
.queue-slots article > b { position: absolute; top: 4px; left: 7px; color: #7a4434; font-size: 15px; }
.queue-slots img { width: 38px; image-rendering: pixelated; }
.queue-slots span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.online-rules p { margin: 0; padding: 7px 8px; border: 8px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; font-size: 17px; display: grid; gap: 1px; }
.online-rules b { color: var(--moss); font-size: 16px; }
.online-rules span { color: var(--cedar); line-height: 16px; }
.online-lobby.launching .matchmaking-board { animation: lobby-launch 420ms steps(3, end) infinite alternate; }
.online-lobby.launching .queue-slots article { border-image-source: url("../assets-pixel/ui-v3/eco-ui-button-moss-v3.png"); filter: brightness(1.08); }
@keyframes lobby-launch { to { transform: translateY(-5px); filter: drop-shadow(0 17px 0 rgba(45, 32, 51, .3)); } }
#queue-message { min-height: 25px; margin: 5px; color: var(--warning); font-size: 20px; }
#cancel-queue { min-width: 240px; }
.online-scoreboard { position: fixed; z-index: 9000; top: calc(7px + var(--safe-top)); left: 50%; width: 430px; transform: translateX(-50%); padding: 7px 12px 9px; border: 11px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; color: var(--ink); pointer-events: none; filter: drop-shadow(0 4px 0 rgba(45, 32, 51, .28)); }
.online-scoreboard header { display: flex; justify-content: space-between; align-items: center; color: var(--cedar); font-size: 17px; }
.online-scoreboard time { min-width: 74px; color: var(--ink); font-family: "EcoText", monospace; font-size: 20px; }
.online-scoreboard ol { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.online-scoreboard li { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 5px; padding: 1px 5px; background: rgba(213, 169, 101, .55); font-size: 16px; }
.online-scoreboard li.local { background: rgba(131, 187, 96, .65); }
.online-scoreboard li.offline { opacity: .5; }
.online-scoreboard li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-ping { position: fixed; z-index: 9100; top: calc(9px + var(--safe-top)); right: calc(10px + var(--safe-right)); width: 86px; height: 32px; padding: 2px 7px 2px 6px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; justify-content: stretch; gap: 4px; overflow: hidden; border: 6px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; color: #315b3d; font-size: 16px; }
.network-ping-icon { width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden; }
.network-ping img { display: block; width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.network-ping b { min-width: 0; overflow: hidden; text-align: right; font-variant-numeric: tabular-nums; }
.network-ping small { font-size: 12px; line-height: 1; }
.network-ping.fair { color: #9b6a2f; }
.network-ping.slow, .network-ping.offline { color: #b44d48; }
.match-result { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; background: rgba(41, 34, 56, .55); padding: 16px; }
.match-result > div { width: min(540px, calc(100vw - 24px)); padding: 24px; background: #f2d99b; text-align: center; }
.match-result h2 { margin: 0 0 12px; color: var(--moss); font-family: "EcoText", monospace; font-size: clamp(30px, 6vw, 46px); }
.match-result p { font-size: 24px; }

/* Rebuilt outer shell: a quiet coastal frame lets the pixel board carry the hierarchy. */
.main-menu { background: #236f7a url("../assets-pixel/ui-v2/eco-loading-island-v2.png") center/cover no-repeat; }
.main-menu .menu-shade { background: linear-gradient(180deg, rgba(19, 54, 58, .2), rgba(21, 34, 42, .58)); }
.permit-panel { width: min(980px, calc(100vw - 28px)); padding: 18px 34px 16px; background: rgba(249, 222, 159, .97); border-width: 20px; }
.permit-brand { gap: 18px; margin-bottom: 5px; }
.permit-brand > img { width: 84px; filter: drop-shadow(4px 4px 0 #6d4036); }
.permit-brand h1 { font-size: clamp(44px, 6vw, 68px); letter-spacing: 4px; }
.permit-brand p { margin-top: 7px; font-size: 16px; letter-spacing: 3px; }
.permit-subtitle { margin: 7px 0 17px; color: #6a4838; font-size: 22px; }
.permit-grid { gap: 32px; }
.identity-section, .mode-section { padding: 10px 14px 12px; border: 10px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; background: rgba(255, 239, 190, .25); }
.permit-grid h2, .identity-section > label { font-size: 21px; }
.mode-badge img { max-width: 190px; }
.menu-signature { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px 0; border-top: 3px solid rgba(122, 68, 52, .45); color: #7a4434; font-size: 15px; letter-spacing: 1px; }
.menu-signature span:first-child { color: #35533e; }
.boot-card { min-width: min(520px, calc(100vw - 32px)); padding: 15px 26px 20px; }
.boot-scene { position: relative; width: min(420px, 78vw); height: 96px; overflow: hidden; border: 8px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; background: #2e6872; image-rendering: pixelated; }
.boot-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: boot-pan 2200ms steps(6, end) infinite alternate; }
.boot-scene i { position: absolute; left: 17%; bottom: 13px; width: 34px; height: 7px; background: #74423b; box-shadow: 5px -7px 0 #bd704d, 22px -7px 0 #bd704d; animation: boot-boat 1100ms steps(3, end) infinite alternate; }
.boot-card > img { width: 78px; margin: -10px 0 -2px; }
.boot-card strong { font-size: clamp(34px, 6vw, 52px); }
@keyframes boot-pan { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.08) translateX(2%); } }
@keyframes boot-boat { to { transform: translateX(170%); } }
.lobby-signature { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 10px 0 0; color: #35533e; font-size: 16px; letter-spacing: 2px; }
.lobby-signature small { color: #4b8ea1; font: inherit; font-size: 12px; letter-spacing: 1px; }
@media (max-width: 700px) {
  .main-menu { align-items: start; padding-top: calc(58px + var(--safe-top)); }
  .menu-utility { font-size: 18px; }
  .language-switch > span, .account-strip > span, .account-strip [data-open-auth="register"] { display: none; }
  .permit-panel { max-height: calc(100vh - 66px); overflow-x: hidden; overflow-y: auto; padding: 2px 8px 8px; border-width: 18px; }
  .permit-panel { scrollbar-width: none; }
  .permit-panel::-webkit-scrollbar { width: 0; height: 0; }
  .permit-brand { gap: 5px; margin-top: 2px; }
  .permit-brand > img { width: 68px; }
  .permit-brand h1 { font-size: clamp(20px, 7vw, 30px); }
  .permit-brand p { font-size: 15px; margin-top: 6px; letter-spacing: 1px; }
  .permit-subtitle { font-size: 19px; line-height: 18px; }
  .permit-grid { grid-template-columns: 1fr; gap: 4px; }
  .identity-section, .mode-section { min-width: 0; }
  .mode-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-badge { min-width: 0; }
  .mode-badge strong { min-width: 0; width: 100%; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
  .character-picker button { min-height: 104px; }
  .character-picker img { width: 64px; height: 96px; }
  .mode-badge img { max-width: 132px; }
  .mode-badge strong { font-size: 19px; }
  .play-button { font-size: 17px; }
  .menu-message { min-height: 16px; margin: 0; }
  .permit-panel footer { display: none; }
  .menu-signature { padding-top: 5px; font-size: 12px; letter-spacing: .5px; }
  .menu-signature span:nth-child(2) { display: none; }
  .boot-scene { height: 74px; }
  .boot-card > img { width: 64px; }
  .lobby-signature { flex-direction: column; align-items: center; gap: 0; margin-top: 5px; font-size: 12px; letter-spacing: 1px; }
  .lobby-signature small { font-size: 10px; }
  .matchmaking-board { padding: 10px 10px 14px; border-width: 18px; }
  .matchmaking-board header { gap: 4px; }
  .matchmaking-board header img { width: 68px; }
  .matchmaking-board h1 { font-size: 29px; letter-spacing: 1px; }
  .matchmaking-board header p { margin-top: 6px; font-size: 15px; }
  .lobby-kicker { margin-bottom: 3px; font-size: 13px; letter-spacing: 1px; }
  .queue-status { margin: 8px auto; padding: 4px 8px; font-size: 17px; }
  .queue-status strong { font-size: 18px; }
  .queue-slots { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .queue-slots article { min-height: 76px; }
  .online-rules { grid-template-columns: 1fr; gap: 3px; }
  .online-rules p { padding: 4px 6px; }
  .lobby-trim { min-height: 30px; margin: 4px 0 0; }
  .online-scoreboard { top: calc(57px + var(--safe-top)); width: calc(100vw - 12px); padding: 5px 8px 7px; border-width: 9px; }
  .online-scoreboard header { font-size: 15px; }
  .online-scoreboard ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .online-scoreboard li { grid-template-columns: 16px minmax(0, 1fr); font-size: 14px; }
  .online-scoreboard li strong { grid-column: 1 / -1; text-align: center; font-size: 13px; }
  .network-ping { top: auto; right: calc(8px + var(--safe-right)); bottom: calc(102px + var(--safe-bottom)); }
}
@media (max-height: 520px) and (min-width: 701px), (pointer: coarse) and (orientation: landscape) {
  .main-menu { align-items: start; padding: calc(40px + var(--safe-top)) max(6px, var(--safe-right)) max(5px, var(--safe-bottom)) max(6px, var(--safe-left)); }
  .menu-utility { top: calc(3px + var(--safe-top)); font-size: 16px; }
  .language-switch > span, .account-strip > span, .account-strip [data-open-auth="register"] { display: none; }
  .language-switch button, .small-tile { min-height: 30px; border-width: 6px; line-height: 15px; }
  .permit-panel { width: min(800px, calc(100vw - 12px)); height: calc(100vh - 45px); max-height: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; padding: 0 10px 5px; border-width: 14px; scrollbar-width: none; }
  .permit-panel::-webkit-scrollbar { width: 0; height: 0; }
  .permit-brand { gap: 5px; margin-top: 0; }
  .permit-brand > img { width: 52px; }
  .permit-brand h1 { font-size: 21px; }
  .permit-brand p { margin-top: 2px; font-size: 14px; }
  .permit-subtitle { display: none; }
  .permit-grid { min-height: 0; grid-template-columns: minmax(210px, .78fr) minmax(330px, 1.22fr); gap: 8px; align-items: start; }
  .permit-grid h2, .identity-section > label { margin: 1px 0; font-size: 16px; }
  .pixel-input { min-height: 36px; padding: 0 12px; border-width: 9px; font-size: 21px; }
  .character-picker { gap: 5px; }
  .character-picker button { min-height: 76px; grid-template-columns: 48px 1fr; padding: 0 3px; border-width: 8px; font-size: 17px; }
  .character-picker img { width: 42px; height: 64px; }
  .mode-section { gap: 1px 7px; }
  .mode-badge { padding-bottom: 0; }
  .mode-badge img { max-width: 86px; }
  .mode-badge strong { margin-top: -8px; padding: 0 8px; border-width: 6px; font-size: 15px; line-height: 14px; }
  .menu-message { min-height: 12px; margin: 0; font-size: 14px; line-height: 12px; }
  .play-button { position: static; min-height: 38px; margin-top: 2px; padding: 0 16px; border-width: 9px; font-size: 16px; line-height: 16px; }
  .permit-panel footer { display: none; }
  .menu-signature { display: none; }
  .boot-scene { height: 58px; }
  .online-lobby { padding: 5px max(8px, var(--safe-right)) max(5px, var(--safe-bottom)) max(8px, var(--safe-left)); }
  .matchmaking-board { width: min(760px, calc(100vw - 20px)); max-height: calc(100vh - 10px); padding: 0 14px 6px; border-width: 14px; }
  .matchmaking-board header { gap: 8px; }
  .matchmaking-board header img { width: 50px; }
  .matchmaking-board h1 { font-size: 28px; }
  .lobby-kicker { margin: 0 0 2px; font-size: 13px; }
  .matchmaking-board header p { margin: 3px 0 0; font-size: 15px; }
  .queue-status { margin: 2px auto 4px; font-size: 15px; }
  .queue-status strong { font-size: 16px; }
  .queue-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .queue-slots article { min-height: 58px; gap: 0; border-width: 8px; font-size: 14px; }
  .queue-slots article > b { top: 1px; left: 3px; font-size: 11px; }
  .queue-slots img { width: 24px; }
  .online-rules { display: none; }
  #queue-message { min-height: 13px; margin: 0; font-size: 14px; }
  #cancel-queue { min-width: 190px; min-height: 36px; padding: 0 14px; border-width: 9px; font-size: 14px; line-height: 16px; }
  .online-scoreboard { top: calc(4px + var(--safe-top)); width: min(360px, calc(100vw - 288px)); padding: 3px 7px 4px; border-width: 8px; }
  .online-scoreboard header { font-size: 13px; }
  .online-scoreboard time { min-width: 58px; font-size: 15px; }
  .online-scoreboard ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 5px; margin-top: 2px; }
  .online-scoreboard li { grid-template-columns: 13px minmax(0, 1fr) auto; gap: 2px; padding: 0 3px; font-size: 12px; }
  .online-scoreboard li strong { grid-column: auto; font-size: 11px; }
  .network-ping { top: calc(54px + var(--safe-top)); right: calc(8px + var(--safe-right)); bottom: auto; width: 78px; height: 26px; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 3px; border-width: 5px; font-size: 14px; }
  .network-ping-icon, .network-ping img { width: 17px; height: 17px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  .permit-panel { max-height: calc(100vh - 58px); padding-top: 0; }
  .permit-brand > img { width: 70px; }
  .permit-brand h1 { font-size: 30px; }
  .permit-brand p, .permit-subtitle { font-size: 18px; margin: 2px 0; }
  .character-picker button { min-height: 105px; grid-template-columns: 70px 1fr; }
  .character-picker img { width: 64px; height: 96px; }
  .mode-badge img { max-width: 145px; }
  .menu-message { min-height: 18px; margin: 0; }
  .play-button { min-height: 48px; }
}

.game-tutorial[hidden] { display: none; }
.game-tutorial { position: fixed; inset: 0; z-index: 9600; pointer-events: none; font-family: "EcoText", monospace; }
.tutorial-focus {
  position: fixed; left: var(--focus-x, 50%); top: var(--focus-y, 50%); width: var(--focus-w, 96px); height: var(--focus-h, 96px);
  border: 4px solid #ffe69a; border-radius: 14px; box-shadow: 0 0 0 3px #5b3032, 0 0 0 9999px rgba(18, 18, 22, .58), 0 0 22px 8px rgba(255, 224, 121, .58);
  animation: tutorial-pulse 850ms steps(2, end) infinite alternate;
}
.tutorial-card {
  position: fixed; left: 50%; bottom: max(18px, var(--safe-bottom)); width: min(520px, calc(100vw - 24px)); transform: translateX(-50%);
  padding: 8px 20px 12px; border: 14px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-panel-v3.png") 30 fill stretch;
  background: #f1d18d; color: var(--ink); filter: drop-shadow(0 8px 0 rgba(45, 32, 51, .34)); pointer-events: auto;
}
.tutorial-card header { display: flex; align-items: center; gap: 12px; text-align: left; }
.tutorial-card header img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.tutorial-card header small { display: block; color: var(--cedar); font-size: 16px; letter-spacing: 1px; }
.tutorial-card h2 { margin: 0; color: var(--moss); font-size: 28px; line-height: .9; }
.tutorial-card > p { margin: 7px 0; font-size: 21px; line-height: 1; }
.tutorial-task { display: block; padding: 5px 10px; border: 7px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-card-v3.png") 18 fill stretch; color: var(--cedar); font-size: 18px; text-align: center; }
.tutorial-card footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.tutorial-card button { min-width: 112px; min-height: 36px; padding: 0 14px; border: 8px solid transparent; border-image: url("../assets-pixel/ui-v3/eco-ui-button-compact-cedar-v3.png") 16 fill stretch; background: transparent; font-size: 18px; }
.tutorial-card [data-tutorial-next] { border-image-source: url("../assets-pixel/ui-v3/eco-ui-button-compact-moss-v3.png"); color: var(--ink); text-shadow: none; }
.tutorial-card.step-complete { filter: brightness(1.12) drop-shadow(0 8px 0 rgba(45, 32, 51, .34)); }
.game-tutorial[data-step="build"] .tutorial-card { bottom: max(126px, calc(var(--safe-bottom) + 112px)); }
@keyframes tutorial-pulse { to { transform: scale(1.035); } }

@media (max-width: 720px), (max-height: 520px), (pointer: coarse) {
  .tutorial-card { width: min(440px, calc(100vw - 16px)); padding: 5px 12px 8px; border-width: 11px; }
  .tutorial-card header img { width: 44px; height: 44px; }
  .tutorial-card header small { font-size: 13px; }
  .tutorial-card h2 { font-size: 23px; }
  .tutorial-card > p { margin: 4px 0; font-size: 17px; }
  .tutorial-task { padding: 2px 7px; border-width: 5px; font-size: 15px; }
  .tutorial-card footer { margin-top: 4px; }
  .tutorial-card button { min-width: 92px; min-height: 31px; border-width: 6px; font-size: 15px; }
}
@media (max-height: 430px) and (orientation: landscape) {
  .tutorial-card { top: calc(var(--safe-top) + 52px); right: max(7px, var(--safe-right)); bottom: auto; left: auto; width: min(380px, calc(100vw - 118px)); transform: none; padding: 3px 9px 5px; }
  .tutorial-card header { gap: 0; }
  .tutorial-card header img { display: none; }
  .tutorial-card h2 { font-size: 18px; white-space: nowrap; }
  .tutorial-card > p { margin: 2px 0; font-size: 14px; line-height: .9; }
  .tutorial-task { padding: 1px 5px; font-size: 13px; }
  .tutorial-card footer { position: absolute; right: 8px; top: 4px; margin: 0; }
  .tutorial-card footer button { min-width: 72px; min-height: 27px; font-size: 13px; }
  .tutorial-card header div { padding-right: 80px; }
  .game-tutorial[data-step="build"] .tutorial-card { top: 2px; bottom: auto; }
}