@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --ink: #f6f6f3;
    --muted: #aeb8be;
    --line: rgba(255, 255, 255, .13);
    --panel: rgba(14, 23, 31, .78);
    --mint: #a9f2d0;
    --lime: #d2fb75;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
    color: var(--ink);
    background: #101b28;
    font-family: "DM Sans", Arial, sans-serif;
    user-select: none;
}

button { font: inherit; }

#game-container { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }

#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: 0; }

.scene-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 17, 26, .48) 0%, transparent 24%, transparent 63%, rgba(8, 17, 26, .53) 100%),
                linear-gradient(90deg, rgba(8, 17, 26, .18), transparent 35%, transparent 75%, rgba(8, 17, 26, .12));
}

.topbar {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 78px;
    padding: 0 42px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(10, 19, 27, .63), rgba(10, 19, 27, .16));
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark, .loading-mark {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: var(--mint);
    color: #152922;
    font: 700 25px/1 "Space Grotesk", sans-serif;
    transform: rotate(-4deg);
}
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font: 700 14px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; }
.brand-copy small { color: #c1cbd0; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.location { margin-left: 38px; color: #e0e5e5; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.live-dot, .save-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #9af0c2; box-shadow: 0 0 12px rgba(154, 240, 194, .8); }
.world-clock { display: flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 19px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: #e7ece8; background: rgba(255,255,255,.055); font: 600 10px "Space Grotesk", sans-serif; letter-spacing: .04em; }
.clock-sun { color: #f4ca8b; font-size: 13px; }
.shop-open-button { display: flex; align-items: center; gap: 9px; height: 36px; margin-right: 10px; padding: 0 12px; border: 1px solid rgba(169,242,208,.34); border-radius: 10px; color: var(--mint); background: rgba(169,242,208,.08); font-size: 9px; font-weight: 800; letter-spacing: .12em; cursor: pointer; }
.shop-open-button:hover { border-color: rgba(169,242,208,.68); background: rgba(169,242,208,.15); }
.shop-open-button span { font-size: 12px; }
.icon-button { margin-left: 0; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; color: white; background: rgba(255,255,255,.08); cursor: pointer; }
.icon-button:hover { background: rgba(255,255,255,.16); }

.mission-card {
    position: absolute;
    z-index: 2;
    top: 103px;
    left: 42px;
    width: 304px;
    padding: 20px 21px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    background: var(--panel);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    backdrop-filter: blur(15px);
}
.eyebrow { color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.mission-icon { margin-right: 5px; font-size: 13px; }
.mission-card h1 { margin: 10px 0 6px; font: 600 21px/1.15 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.mission-card p { margin: 0; color: #b7c2c5; font-size: 11px; line-height: 1.6; }
.mission-progress { margin-top: 17px; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #c1cbcd; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.progress-label strong { color: white; font-size: 10px; letter-spacing: .04em; }
.progress-track { height: 5px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.14); }
.progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #82e8bf, #d2fb75); transition: width .35s ease; }
.reward { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: #c1cbcd; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.reward-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: rgba(210, 251, 117, .14); color: var(--lime); font-size: 11px; }
.reward strong { color: white; font-size: 11px; letter-spacing: 0; }
.reward-xp { margin-left: auto; color: var(--mint); font-size: 9px; letter-spacing: .02em; }
.district-job { margin-top: 14px; padding: 11px 12px 10px; border: 1px solid rgba(169, 242, 208, .18); border-left: 2px solid var(--district-job-color, #a9f2d0); border-radius: 10px; background: rgba(169, 242, 208, .055); }
.district-job-heading { display: flex; align-items: center; gap: 6px; color: var(--mint); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.district-job-heading strong { margin-left: auto; color: white; font-size: 9px; letter-spacing: .04em; }
.district-job-icon { font-size: 12px; }
.district-job-title { display: block; margin-top: 6px; color: #f5f7f3; font: 600 12px "Space Grotesk", sans-serif; }
.district-job-bottom { display: flex; justify-content: space-between; gap: 5px; margin-top: 5px; color: #aeb9bd; font-size: 8px; }
.district-job-bottom span:last-child { color: var(--mint); font-weight: 700; white-space: nowrap; }

.status-card { position: absolute; z-index: 2; top: 98px; right: 42px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); backdrop-filter: blur(15px); }
.avatar-chip { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: linear-gradient(145deg, #e6b48c, #9d6656); color: #241b19; font: 700 18px "Space Grotesk", sans-serif; }
.player-info { display: grid; gap: 3px; min-width: 94px; }
.player-info strong { font: 700 11px "Space Grotesk", sans-serif; letter-spacing: .1em; }
.player-info small, .stat small { color: #aeb9bd; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.status-divider { width: 1px; height: 28px; background: var(--line); }
.stat { display: grid; gap: 4px; min-width: 42px; }
.stat strong { color: var(--lime); font: 600 12px "Space Grotesk", sans-serif; }

.objective-callout { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: white; background: rgba(14,23,31,.68); font-size: 10px; font-weight: 700; letter-spacing: .04em; transform: translate(-50%, -50%); opacity: .93; backdrop-filter: blur(10px); }
.objective-dot { width: 7px; height: 7px; border-radius: 50%; background: #d2fb75; box-shadow: 0 0 10px #d2fb75; }

.map-card { position: absolute; z-index: 2; right: 42px; bottom: 93px; width: 198px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); backdrop-filter: blur(15px); }
.map-heading, .map-legend { display: flex; align-items: center; justify-content: space-between; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.map-heading { padding: 0 1px 8px; color: #dce3e2; }
.map-live { color: var(--mint); font-size: 7px; }
#minimap { display: block; width: 100%; height: auto; border-radius: 8px; background: rgba(37, 57, 62, .75); }
.map-legend { justify-content: flex-start; gap: 9px; padding: 9px 1px 0; color: #aab6b9; font-size: 7px; }
.map-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; vertical-align: 1px; }
.legend-player { background: #a9f2d0; box-shadow: 0 0 5px #a9f2d0; }
.legend-beacon { background: #d2fb75; }
.legend-job { background: #ffad73; }

.bottom-bar { position: absolute; z-index: 2; right: 42px; bottom: 29px; left: 42px; display: flex; align-items: center; justify-content: space-between; }
.controls-hint { display: flex; align-items: center; gap: 7px; color: #edf0ed; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 5px; color: #fff; background: rgba(16,28,35,.63); font: 700 8px "DM Sans", sans-serif; }
.key-group { display: flex; gap: 3px; }
.dash-hint { display: flex; align-items: center; gap: 5px; }
.dash-hint kbd { border-color: rgba(169,242,208,.48); color: var(--mint); }
.dash-hint span { color: var(--mint); }
.dash-hint.cooldown kbd, .dash-hint.cooldown span { border-color: rgba(255,255,255,.24); color: #aeb9bd; }
.dash-hint.active kbd, .dash-hint.active span { color: var(--lime); text-shadow: 0 0 8px rgba(210,251,117,.45); }
.hint-divider { width: 1px; height: 16px; margin: 0 5px; background: rgba(255,255,255,.28); }
.save-state { color: #d4dfdc; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.save-dot { width: 6px; height: 6px; }

.toast { position: absolute; z-index: 4; top: 80px; left: 50%; padding: 10px 16px; border: 1px solid rgba(169,242,208,.4); border-radius: 10px; color: #eafff2; background: rgba(16,39,33,.9); font-size: 11px; font-weight: 700; opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.dialogue-overlay { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5, 13, 19, .6); backdrop-filter: blur(8px); }
.dialogue-overlay[hidden] { display: none; }
.dialogue-panel { display: grid; grid-template-columns: 210px minmax(310px, 390px); width: min(650px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: #101b23; box-shadow: 0 24px 80px rgba(0,0,0,.42); }
.dialogue-scene { position: relative; display: flex; min-height: 292px; align-items: flex-end; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #f5bd8b 0%, #ce9277 46%, #566d70 100%); }
.dialogue-scene::before { position: absolute; right: -25px; bottom: 0; left: -25px; height: 95px; background: linear-gradient(180deg, transparent, rgba(23,40,44,.6)); content: ""; }
.dialogue-skyline { position: absolute; inset: 0 0 56px; display: flex; align-items: flex-end; justify-content: space-around; opacity: .54; }
.dialogue-skyline span { width: 22px; height: 64px; background: #394d52; }
.dialogue-skyline span:nth-child(2) { width: 34px; height: 114px; background: #40555a; }
.dialogue-skyline span:nth-child(3) { width: 27px; height: 84px; background: #32474c; }
.dialogue-skyline span:nth-child(4) { width: 40px; height: 137px; background: #40565b; }
.dialogue-skyline span:nth-child(5) { width: 24px; height: 74px; background: #354a4f; }
.dialogue-contact { position: relative; z-index: 1; width: 124px; height: 218px; margin-bottom: 0; }
.contact-halo { position: absolute; top: 16px; left: 20px; width: 84px; height: 84px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(255,229,187,.14); box-shadow: 0 0 35px rgba(255,235,203,.26); }
.contact-body { position: absolute; bottom: -28px; left: 5px; width: 114px; height: 128px; border: 3px solid rgba(31,52,51,.3); border-radius: 50px 50px 0 0; background: linear-gradient(110deg, #293d40, #526a64 48%, #263b3d); box-shadow: inset -12px 0 rgba(0,0,0,.12); }
.contact-face { position: absolute; z-index: 2; top: 40px; left: 34px; width: 57px; height: 70px; border: 2px solid rgba(67,48,38,.3); border-radius: 45% 45% 48% 48%; background: linear-gradient(110deg,#d69b76,#efbd95 55%,#c9896d); }
.contact-face span { position: absolute; top: 30px; left: 12px; width: 5px; height: 3px; border-radius: 50%; background: #312621; }
.contact-face span:last-child { left: 38px; }
.contact-hair { position: absolute; z-index: 3; top: 33px; left: 31px; width: 62px; height: 29px; border-radius: 50% 50% 15% 20%; background: #272321; transform: rotate(-5deg); }
.scene-location, .scene-complete { position: absolute; z-index: 2; bottom: 13px; color: white; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.scene-location { left: 12px; }
.scene-location i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.scene-complete { top: 14px; right: 12px; bottom: auto; padding: 6px 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; background: rgba(18,33,37,.28); }
.scene-complete b { margin-left: 3px; color: var(--lime); }
.dialogue-content { display: flex; flex-direction: column; justify-content: center; padding: 27px 26px 18px; }
.dialogue-meta { display: flex; align-items: center; gap: 10px; }
.dialogue-avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(169,242,208,.35); border-radius: 12px; color: #152922; background: var(--mint); font: 700 20px "Space Grotesk", sans-serif; }
.dialogue-meta > span:nth-child(2) { display: grid; gap: 3px; }
.dialogue-meta strong { font: 700 13px "Space Grotesk", sans-serif; letter-spacing: .06em; }
.dialogue-meta small { color: #aeb9bd; font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.dialogue-step { margin-left: auto; color: #92aaa6; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.dialogue-line { min-height: 72px; margin: 24px 0 20px; color: #e5ece8; font: 400 14px/1.75 "Space Grotesk", sans-serif; }
.dialogue-actions { display: flex; flex-direction: column; gap: 8px; }
.dialogue-choice { padding: 11px 13px; border: 1px solid rgba(169,242,208,.35); border-radius: 8px; color: #14261e; background: var(--mint); font-size: 10px; font-weight: 800; text-align: left; cursor: pointer; }
.dialogue-choice:hover { background: #c3f7dd; }
.dialogue-choice span { float: right; font-size: 15px; line-height: 11px; }
.dialogue-choice-secondary { color: #dce6e2; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); }
.dialogue-choice-secondary:hover { background: rgba(255,255,255,.11); }
.dialogue-choice[hidden] { display: none; }
.dialogue-footer { display: flex; justify-content: space-between; margin-top: 19px; color: #758784; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.shop-overlay { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5,13,19,.67); backdrop-filter: blur(9px); }
.shop-overlay[hidden] { display: none; }
.shop-panel { width: min(740px, 100%); padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: #111c25; box-shadow: 0 24px 90px rgba(0,0,0,.48); }
.shop-header { display: flex; align-items: flex-start; justify-content: space-between; }
.shop-live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #9af0c2; box-shadow: 0 0 9px #9af0c2; }
.shop-header h2 { margin: 8px 0 4px; font: 600 24px "Space Grotesk", sans-serif; }
.shop-header p { margin: 0; color: #aeb9bd; font-size: 11px; }
.shop-close-button { width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 9px; color: white; background: rgba(255,255,255,.06); font-size: 23px; line-height: 1; cursor: pointer; }
.shop-balance { display: flex; align-items: center; justify-content: space-between; margin: 19px 0 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; color: #aeb9bd; background: rgba(255,255,255,.035); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.shop-balance strong { color: var(--lime); font: 600 14px "Space Grotesk", sans-serif; letter-spacing: 0; }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shop-item { min-width: 0; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.035); }
.item-preview { position: relative; display: grid; height: 98px; place-items: center; overflow: hidden; border-radius: 7px; background: linear-gradient(150deg,#31494b,#17292c); }
.item-preview::before { position: absolute; top: 9px; width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; }
.item-preview > span { position: relative; z-index: 1; display: grid; width: 42px; height: 56px; place-items: center; border: 1px solid rgba(255,255,255,.23); border-radius: 20px 20px 8px 8px; color: #e4f0e8; background: linear-gradient(135deg,#273b3d,#62716a); font: 700 17px "Space Grotesk", sans-serif; box-shadow: 0 8px 16px rgba(0,0,0,.3); }
.item-preview > i { position: absolute; top: 9px; right: 10px; color: var(--lime); font-size: 12px; font-style: normal; }
.outfit-mint > span { background: linear-gradient(135deg,#347862,#87ad83); }
.outfit-sunset { background: linear-gradient(150deg,#644039,#27242b); }
.outfit-sunset > span { background: linear-gradient(135deg,#994d40,#e08a5a); }
.outfit-violet { background: linear-gradient(150deg,#45395e,#1e2431); }
.outfit-violet > span { background: linear-gradient(135deg,#52477d,#9680ac); }
.upgrade-preview > span { width: 52px; height: 52px; border: 1px solid rgba(210,251,117,.45); border-radius: 14px; color: var(--lime); background: rgba(210,251,117,.11); font-size: 30px; }
.upgrade-preview > i { color: var(--mint); font: 700 8px "DM Sans",sans-serif; }
.item-category { margin-top: 11px; color: #99aaa8; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.shop-item h3 { margin: 5px 0 3px; color: #f4f5f0; font: 600 12px "Space Grotesk",sans-serif; }
.shop-item p { min-height: 28px; margin: 0; color: #aeb9bd; font-size: 8px; line-height: 1.5; }
.shop-buy-button { width: 100%; min-height: 31px; margin-top: 10px; padding: 6px; border: 1px solid rgba(169,242,208,.26); border-radius: 7px; color: var(--mint); background: rgba(169,242,208,.07); font-size: 8px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.shop-buy-button:hover:not(:disabled) { background: rgba(169,242,208,.15); }
.shop-buy-button:disabled { border-color: rgba(255,255,255,.08); color: #899491; background: rgba(255,255,255,.035); cursor: default; }
.shop-footer { display: flex; justify-content: space-between; margin-top: 15px; color: #778985; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.shop-footer > span:last-child { color: #aeb9bd; }
.shop-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--mint); }
.shop-footer strong { margin-left: 5px; color: var(--lime); }
.pause-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: rgba(5, 13, 19, .62); backdrop-filter: blur(8px); }
.pause-overlay[hidden] { display: none; }
.pause-panel { width: min(360px, calc(100% - 40px)); padding: 31px; border: 1px solid var(--line); border-radius: 18px; background: rgba(17, 29, 37, .96); text-align: center; }
.pause-panel h2 { margin: 12px 0 5px; font: 600 27px "Space Grotesk", sans-serif; }
.pause-panel p { margin: 0 0 23px; color: var(--muted); font-size: 13px; }
.save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 10px; }
.secondary-button { padding: 11px 8px; border: 1px solid rgba(169,242,208,.28); border-radius: 9px; color: var(--mint); background: rgba(169,242,208,.07); font-size: 11px; font-weight: 800; cursor: pointer; }
.secondary-button:hover { background: rgba(169,242,208,.15); }
.pause-panel p.save-hint { margin: 0 0 19px; font-size: 10px; }
.primary-button { width: 100%; padding: 12px 15px; border: 0; border-radius: 9px; color: #16261e; background: var(--mint); font-size: 12px; font-weight: 800; cursor: pointer; }
.primary-button span { float: right; font-size: 16px; line-height: 12px; }
.loading { position: absolute; z-index: 10; inset: 0; display: flex; align-items: center; justify-content: center; gap: 13px; color: white; background: #182b38; font-size: 10px; font-weight: 800; letter-spacing: .17em; transition: opacity .5s; }
.loading-mark { width: 34px; height: 34px; font-size: 21px; }
.loading.done { opacity: 0; pointer-events: none; }

@media (max-width: 700px) {
    .topbar { height: 64px; padding: 0 17px; }
    .brand-mark { width: 34px; height: 34px; }
    .brand { gap: 7px; }
    .brand-copy small { display: none; }
    .brand-copy strong { font-size: 11px; letter-spacing: .12em; }
    .location { max-width: 92px; margin-left: 8px; overflow: hidden; font-size: 7px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
    .world-clock { flex: 0 0 auto; gap: 4px; margin-right: 6px; padding: 6px; font-size: 8px; }
    .clock-sun { font-size: 10px; }
    .shop-open-button { gap: 4px; height: 32px; margin-right: 6px; padding: 0 7px; font-size: 8px; letter-spacing: .07em; }
    .icon-button { flex: 0 0 34px; width: 34px; height: 34px; }
    .mission-card { top: 79px; left: 15px; width: min(276px, calc(100% - 30px)); padding: 15px; }
    .mission-card h1 { font-size: 18px; }
    .mission-card p { font-size: 10px; }
    .district-job { margin-top: 10px; padding: 9px 10px; }
    .dialogue-overlay { padding: 15px; }
    .dialogue-panel { grid-template-columns: 1fr; width: min(410px, 100%); }
    .dialogue-scene { min-height: 155px; }
    .dialogue-contact { transform: scale(.68); transform-origin: bottom center; margin-bottom: -67px; }
    .dialogue-skyline { bottom: 42px; }
    .dialogue-content { padding: 18px 19px 14px; }
    .dialogue-line { min-height: 55px; margin: 15px 0; font-size: 12px; }
    .dialogue-footer { margin-top: 12px; }
    .shop-overlay { padding: 12px; overflow-y: auto; }
    .shop-panel { padding: 16px; }
    .shop-header h2 { font-size: 21px; }
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .item-preview { height: 72px; }
    .item-preview::before { width: 55px; height: 55px; }
    .item-preview > span { width: 33px; height: 44px; }
    .status-card { top: auto; right: 15px; bottom: 305px; gap: 9px; padding: 8px 10px; }
    .player-info { min-width: 76px; }
    .avatar-chip { width: 30px; height: 30px; }
    .status-divider { height: 23px; }
    .stat { min-width: 33px; }
    .map-card { right: 15px; bottom: 77px; width: 142px; padding: 9px; }
    .map-heading { font-size: 7px; }
    .bottom-bar { right: 15px; bottom: 19px; left: 15px; }
    .controls-hint { gap: 3px; font-size: 6px; }
    kbd { min-width: 17px; height: 18px; padding: 0 3px; font-size: 7px; }
    .hint-divider { margin: 0 1px; }
    .save-state { font-size: 7px; letter-spacing: .06em; }
    .objective-callout { top: auto; bottom: 165px; max-width: 75vw; white-space: nowrap; font-size: 9px; }
}

@media (max-width: 390px) {
    .status-card { bottom: 305px; }
    .player-info { min-width: 63px; }
    .controls-hint { gap: 2px; font-size: 5px; }
    .dash-hint { gap: 2px; }
}