/* Last-loaded visual layer. No assets, extra render surfaces, or gameplay changes. */
:root{
 --px-ink:#29483b;--px-edge:#385346;--px-paper:#fff9e8;
 --px-mint:#dcebd4;--px-rose:#f4dce7;--px-gold:#f8df9b;
 --px-muted:#53695a;--px-shadow:#29483b;--px-micro:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
}
.panel,dialog{
 border:2px solid var(--px-edge);border-radius:2px;
 background-color:var(--px-paper);
 box-shadow:4px 4px 0 var(--px-shadow);
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
.topbar,#action-dock,.minimap,dialog{
 background-image:linear-gradient(90deg,#38534605 1px,transparent 1px),linear-gradient(#38534605 1px,transparent 1px);
 background-size:8px 8px;
}
button,input,select{ -webkit-tap-highlight-color:transparent }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
 outline:3px solid #b76735;outline-offset:3px;
}
button{transition:background-color .12s,box-shadow .12s,transform .08s}
button:disabled{cursor:not-allowed}
:is(.place small,.stats small,.eyebrow,.profile-label,.minimap-heading,.map-caption,.mobile-camera-label,.host-lighting legend,.round-options-label,.action-shortcut,.combo-badge,.kaiju-options small,.city-cards small){
 font-family:var(--px-micro);font-weight:700;
}
.eyebrow{color:var(--px-muted);font-size:10px;letter-spacing:1.3px}

/* One compact, clearly divided location / score / clock / menu group. */
.topbar{overflow:visible;align-items:stretch;box-shadow:4px 4px 0 var(--px-shadow)}
.topbar>.panel{border:0;box-shadow:none;background:transparent;border-radius:0;backdrop-filter:none}
.topbar .place{align-self:stretch;padding:12px 14px;transition:background .12s}
.topbar .place:hover{background:#dcebd48c;transform:none}
.topbar .place small{color:#506451;font-size:9px;letter-spacing:.4px}
.topbar .place strong{font-size:26px;line-height:1.05}
.topbar .pin{color:#a47532}
.topbar .stats{border-left:2px solid #38534636!important;gap:14px;padding:10px 15px}
.topbar .stats strong{font-size:30px;letter-spacing:.1px}
.topbar .stats small{font-size:9px;letter-spacing:.2px}
.topbar .stat-divider{background:#38534636;height:31px}
#mobile-menu-button{align-self:center;border:2px solid var(--px-edge);border-radius:1px;background:var(--px-mint);width:42px;min-height:42px;margin:0 9px 0 3px;box-shadow:2px 2px 0 var(--px-edge);font-size:21px}
#mobile-menu-button:hover{background:#c9e0bc}
#mobile-menu-button:active{transform:translate(2px,2px);box-shadow:none}
.topbar #mode-button{border-radius:0;min-height:44px}
.topbar #mode-button:hover{background:#f8df9b66}

/* Recessed meters, chunky action tiles, and consistent tactile states. */
#action-dock{background-color:var(--px-paper);border:2px solid var(--px-edge);border-radius:2px;padding:7px;gap:7px;box-shadow:4px 4px 0 var(--px-shadow)}
#action-dock>button{border:2px solid var(--px-edge);border-radius:1px;box-shadow:2px 2px 0 var(--px-edge);background:#deebd6;color:var(--px-ink);overflow:visible}
#action-dock .ultimate-control{background:var(--px-rose)}
#action-dock .ultimate-control[data-state=charging]{background:#f4c7dc;box-shadow:2px 2px 0 var(--px-edge),inset 0 0 0 2px #fff3f8}
#action-dock .ultimate-control[data-state=ready]{background:var(--px-gold);box-shadow:2px 2px 0 var(--px-edge),inset 0 0 0 2px #fff5d8}
#action-dock .sprint-control[data-state=active]{background:#ccebaa;box-shadow:2px 2px 0 var(--px-edge),inset 0 0 0 2px #f3ffe3}
#action-dock #touch-roar{background:#e1e9f0}
#action-dock #touch-stomp{background:#365b46;color:#fff9e8}
#action-dock>button:active{transform:translate(2px,2px);box-shadow:none}
#action-dock>button:disabled{opacity:.65}
#action-dock strong{font-weight:800;letter-spacing:.7px}
#action-dock small{font-family:var(--px-micro);color:#526452;font-size:8px;font-weight:700}
#action-dock .ultimate-control small{color:#754b64}
#action-dock .ultimate-track,#action-dock .sprint-track{
 border-radius:0;background:#29483b2a;height:4px;box-shadow:inset 1px 1px 0 #29483b30;
}
#action-dock .ultimate-track>span{background:#b56892}
#action-dock .sprint-track>span{background:#548568}
.action-shortcut{opacity:1;color:var(--px-ink);border:1px solid var(--px-edge);border-bottom-width:2px;background:#fffbed;border-radius:0;min-width:22px;padding:2px 4px;line-height:1;text-align:center}

/* No change to world-projected positions or the small overhead HP footprint. */
.combat-status .health-panel{border:1px solid var(--px-edge);border-radius:1px;background:#fff9e8;box-shadow:2px 2px 0 #29483b9c}
.combat-status .health-panel::after{bottom:-4px;width:6px;height:4px;transform:translateX(-50%);border:1px solid var(--px-edge);border-top:0}
.combat-status .health-panel.hurt{background:#ffd6b9}
.combat-status .health-panel b{font-family:var(--px-micro);font-size:7px;letter-spacing:0}
.combat-status .hp-track,.peer-label .hp-track{border-radius:0;background:#29483b30}
.combat-status .hp-fill{background:#6cae77}
.combo-badge{border:1px solid #fff0c8;border-radius:0;box-shadow:2px 2px 0 #29483b;color:#e6f3bc}
.combo-amount{text-shadow:2px 0 #55623e,-2px 0 #55623e,0 2px #55623e,0 -2px #55623e,3px 4px #29483b66}
.peer-label{border:1px solid var(--px-edge);border-radius:1px;background:#fff9e8;box-shadow:2px 2px 0 #29483b80}

.minimap{border-radius:2px;box-shadow:4px 4px 0 var(--px-shadow)}
#map{border:1px solid #526b52;border-radius:0;image-rendering:pixelated}
.live-dot{border-radius:0;background:#5e9b68;box-shadow:1px 1px 0 #345840}
#map-close{border-radius:0}
#coordinates{font-family:var(--px-micro);font-size:10px}
.toast{border:2px solid #fff2c5;border-radius:1px;background:#29483bf2;box-shadow:3px 3px 0 #29483b;line-height:1.5}

/* A subtle eight-pixel title stripe brings the same language into every menu. */
dialog{border:2px solid var(--px-edge);border-top-width:6px;border-radius:2px;box-shadow:7px 7px 0 #1e3429b3;padding-top:30px;scrollbar-color:#789371 #ebeedd;scrollbar-width:thin}
dialog::backdrop,.leaderboard::backdrop{background:#203b327d;backdrop-filter:none;-webkit-backdrop-filter:none}
dialog h1{color:var(--px-ink);letter-spacing:-.6px;text-shadow:2px 2px 0 #dce9cb}
dialog .close{display:grid;place-items:center;right:13px;top:12px;width:32px;height:32px;line-height:1;font-size:25px;opacity:1;background:#e8edd9;border:2px solid var(--px-edge);border-radius:0;box-shadow:2px 2px 0 var(--px-edge)}
dialog .close:active{transform:translate(2px,2px);box-shadow:none}
dialog .data-note,.dialog-description,.leaderboard-subtitle{color:var(--px-muted)}
dialog :is(input:not([type=radio]):not([type=range]),select){border:2px solid #698169;border-radius:1px;background:#fffdf3;box-shadow:inset 2px 2px 0 #d9e1ce}
dialog :is(.primary,.secondary,.join-row button,#copy-room,#search-submit,.search-result,.mode-options button,.preset-grid button,.profile-room-choices button,.mobile-menu-grid button,.mobile-camera button,.carousel-nav button){
 border:2px solid var(--px-edge);border-radius:1px;box-shadow:2px 2px 0 var(--px-edge);
}
dialog :is(.primary,#search-submit){background:#365b46;color:#fff9e8}
dialog :is(.secondary,.profile-room-choices button,.mobile-menu-grid button,.mobile-camera button,.carousel-nav button){background:#e5edd9;color:var(--px-ink)}
dialog :is(.primary,.secondary,.join-row button,#copy-room,#search-submit,.search-result,.mode-options button,.preset-grid button,.profile-room-choices button,.mobile-menu-grid button,.mobile-camera button,.carousel-nav button):active{transform:translate(2px,2px);box-shadow:none}
#entry-lobby{border-radius:2px}
#entry-lobby .entry-mark{display:grid;place-items:center;width:66px;height:58px;margin:10px auto 17px;background:#dcebd4;color:#4c795b;font-size:40px;box-shadow:-4px 0 #dcebd4,4px 0 #dcebd4,0 -4px #dcebd4,0 4px #dcebd4}
#entry-lobby h1{letter-spacing:-1px;text-shadow:3px 3px 0 #e1e9ce}
.entry-choices button{border:2px solid var(--px-edge);border-radius:1px;background:var(--px-mint);box-shadow:3px 3px 0 var(--px-edge)}
.entry-choices button:first-child{background:#365b46;border-color:var(--px-edge)}
.entry-choices button:hover{transform:translateY(-2px);background:#d0e5c5}
.entry-choices button:first-child:hover{background:#426d53}
.entry-choices button:active{transform:translate(3px,3px);box-shadow:none}
.entry-solo,.entry-back{color:#3d634b;min-height:32px}
#host-settings{border:2px solid #839778;border-radius:1px;background:#e8efdd}
.host-lighting span{border:2px solid #71876c;border-radius:0;background:#fff9e8;box-shadow:1px 1px 0 #71876c}
.host-lighting input:checked+span{border-color:var(--px-edge);background:#365b46;color:#fff9e8;box-shadow:2px 2px 0 var(--px-edge)}
.host-lighting input:focus-visible+span{outline:3px solid #b76735;outline-offset:3px}
.camera-setting output{border:1px solid #7b9075;border-radius:0;background:#e0eacf;font-family:var(--px-micro)}
.camera-setting input{accent-color:#548364}

/* Both selectors remain a single, horizontally swipable strip. */
.kaiju-options.carousel-track,.city-cards{gap:10px;padding:4px 4px 9px;scrollbar-color:#718b69 #e7ecd9;scrollbar-width:thin}
.kaiju-options.carousel-track button,.city-cards>button{border:2px solid #72856b;border-radius:1px;background:#edf1e2;box-shadow:2px 2px 0 #72856b;scroll-snap-align:center}
.kaiju-options.carousel-track button[aria-pressed=true],.city-cards>button[aria-pressed=true]{border-color:#365b46;background:#d3e6bb;box-shadow:3px 3px 0 #365b46,inset 0 0 0 2px #f6ffe8}
.kaiju-options.carousel-track button:active,.city-cards>button:active{transform:translate(2px,2px);box-shadow:none}
.kaiju-options.carousel-track canvas,.city-cards canvas{image-rendering:pixelated}
.kaiju-options.carousel-track small{font-size:8px;letter-spacing:0;line-height:1.35;color:#4e624e}
.city-cards small{color:#4e624e;font-size:9px;line-height:1.4}
.carousel-nav button{height:32px;width:38px}
.leaderboard-row{border:2px solid #819373;border-radius:1px;background:#e7edda;box-shadow:2px 2px 0 #819373}
.leaderboard-row[data-rank="1"]{background:#f8e3a7;border-color:#9d7a3f;box-shadow:2px 2px 0 #9d7a3f}
.leaderboard-row[data-self="true"]{box-shadow:inset 4px 0 #365b46,2px 2px 0 #819373}
.leaderboard-score,.leaderboard-rank{font-family:var(--px-micro)}
.leaderboard-actions{background:var(--px-paper);border-top:2px solid #becbaa;box-shadow:none}
.round-options button[aria-pressed=true]{background:#d3e6bb;border-color:#365b46;box-shadow:3px 3px 0 #365b46}

/* Desktop keyboard play gets one horizontal action dock. */
.desktop-movement{display:none}
@media(min-width:901px) and (pointer:fine){
 .topbar{top:max(20px,env(safe-area-inset-top));left:24px;width:min(600px,calc(100vw - 48px))}
 .topbar .place{padding:14px 16px}
 #mobile-menu-button{width:46px;min-height:46px}
 .minimap{left:auto;right:24px;top:max(20px,env(safe-area-inset-top));width:190px}
 #map{height:140px}
 #action-dock{left:50%;right:auto;bottom:max(36px,env(safe-area-inset-bottom));transform:translateX(-50%);width:clamp(500px,46vw,580px);grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;gap:8px}
 #action-dock>button{height:86px;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left}
 #action-dock strong{font-size:12px;letter-spacing:.7px;margin:0}
 #action-dock small{margin:5px 0 7px;width:100%;font-size:8px;line-height:1.2}
 #action-dock .action-shortcut{display:block;position:absolute;top:7px;right:8px;font-size:9px;min-height:18px}
 #action-dock :is(.ultimate-track,.sprint-track){width:100%;max-width:none;margin:0}
 #action-dock :is(#touch-roar,#touch-stomp){padding-bottom:14px}
 #action-dock :is(#touch-roar,#touch-stomp)::after{display:block;margin-top:6px;font:700 8px var(--px-micro);letter-spacing:.3px}
 #action-dock #touch-roar::after{content:'WIDE SHOCKWAVE';color:#526452}
 #action-dock #touch-stomp::after{content:'SMASH NEARBY';color:#e3edcf}
 .desktop-movement{position:absolute;display:flex;align-items:center;gap:10px;width:200px;left:24px;bottom:max(49px,env(safe-area-inset-bottom));margin:0;z-index:6;color:#29483b;pointer-events:none;font:700 9px var(--px-micro);letter-spacing:.25px;text-shadow:1px 1px #fff9e8;line-height:1.5}
 .desktop-movement .movement-keys{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
 .desktop-movement .movement-keys>span{display:flex;gap:3px}
 .desktop-movement kbd{display:inline-grid;place-items:center;background:#fff9e8;border:1px solid #385346;border-bottom-width:3px;border-radius:0;width:19px;height:22px;padding:2px;font:700 10px var(--px-micro);text-shadow:none;box-shadow:1px 1px 0 #38534644}
 .desktop-movement strong{display:block;font:800 11px var(--px-micro);letter-spacing:1px}
 .desktop-movement small{display:block;max-width:129px;margin-top:4px;font:700 8px/1.6 var(--px-micro)}
 .toast{bottom:156px;max-width:min(500px,65vw)}
}

@media(min-width:901px) and (max-width:1100px) and (pointer:fine){
 .desktop-movement{width:164px;gap:8px;left:20px}
 .desktop-movement kbd{width:16px;height:20px;font-size:9px}
 .desktop-movement small{max-width:102px}
}

/* Keep the existing touch layout and safe-area placement. */
@media(pointer:coarse),(max-width:600px){
 .topbar{border-radius:2px;box-shadow:3px 3px 0 var(--px-shadow)}
 .topbar .place{padding:10px 8px;gap:5px}
 .topbar .place strong{font-size:20px}
 .topbar .place small{font-size:7px;letter-spacing:0}
 .topbar .stats{gap:8px;padding:8px}
 .topbar .stats strong{font-size:25px}
 .topbar .stats small{font-size:7px;letter-spacing:0}
 #mobile-menu-button{width:36px;min-height:40px;margin:0 7px 0 2px;font-size:20px}
 #action-dock{grid-template-columns:repeat(2,minmax(0,1fr));width:174px;padding:6px;gap:6px;border-radius:2px;right:max(12px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));box-shadow:3px 3px 0 var(--px-shadow)}
 #action-dock>button{height:58px;border-radius:1px;padding:8px 4px 6px}
 #action-dock strong{font-size:9px;letter-spacing:.1px}
 #action-dock small{font-size:7px;margin:6px 0 5px}
 #action-dock .action-shortcut{display:none}
 #touch-controls{left:max(18px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom))}
 #joystick{background:#fff9e83d;border:2px solid #38534699;box-shadow:2px 2px 0 #29483b55}
 #joystick-knob{background:#fff9e8d9;border:2px solid #57705b;box-shadow:2px 3px 0 #29483b66}
 .combat-status .health-panel{border-radius:1px}
 #coordinates{font-size:9px}
 .minimap{border-radius:2px}
 dialog{box-shadow:4px 4px 0 #1e3429b3}
 #entry-lobby,#multiplayer,#mobile-menu{border-radius:2px}
 #entry-lobby{padding-top:25px}
 #entry-lobby h1{font-size:43px}
 .entry-choices button{padding:19px 8px}
 .entry-choices small{line-height:1.5}
 .kaiju-options.carousel-track{gap:9px}
 .kaiju-options.carousel-track button{flex-basis:98px}
 .mobile-menu-grid button{font-size:12px}
}
@media(max-width:360px){
 .topbar .place strong{font-size:18px}
 .topbar .stats{gap:6px;padding:8px 6px}
 .topbar .stats strong{font-size:23px}
 #mobile-menu-button{width:32px;margin-right:5px}
 #action-dock{width:166px;right:10px}
 #joystick{width:90px;height:90px}
}
@media(max-height:520px) and (pointer:coarse){
 #action-dock{bottom:max(27px,env(safe-area-inset-bottom));width:164px}
 #action-dock>button{height:51px}
 #touch-controls{bottom:max(27px,env(safe-area-inset-bottom))}
 .minimap{max-height:calc(100dvh - 104px);overflow:auto}
}
body.night .panel{background-color:#edf3df}
body.night .topbar>.panel{background:transparent}
body.night #action-dock .ultimate-control{background:#f0d7e4}
body.night #action-dock .ultimate-control[data-state=charging]{background:#f4c7dc}
body.night #action-dock .ultimate-control[data-state=ready]{background:var(--px-gold)}
body.night #action-dock .sprint-control[data-state=active]{background:#ccebaa}
body.night .desktop-movement{color:#f7f4db;text-shadow:1px 1px #29483b}
body.night .desktop-movement kbd{color:var(--px-ink)}
@media(prefers-reduced-motion:reduce){
 button,.toast{transition:none}
 .entry-choices button:hover,#action-dock>button:active{transform:none}
}


.kaiju-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:7px 1px 0;padding-top:6px;border-top:1px solid #bdcbae;font-family:var(--px-micro)}
.kaiju-card-stats>span{display:flex;flex-direction:column;gap:2px;font-size:7px;letter-spacing:0;color:#586d52}
.kaiju-card-stats b{font-size:11px;color:var(--px-ink)}