:root, body[data-biome] { --bg: #f5f0e4; --panel: #fffcf3; --border: #d8ddc2; --mint: #6ba76a; --muted: #8d9584; --text: #536052; }
body[data-biome="swamp"] { --bg: #edf3ee; --mint: #5d9c9c; --border: #c5dcd3; }
body[data-biome="floors"] { --bg: #f8f0e7; --mint: #cf9860; --border: #ead3b8; }
body { background: var(--bg); color: var(--text); }
body:before { background: radial-gradient(ellipse at 15% 0%, #b7dfb330, transparent 50%), radial-gradient(ellipse at 90% 30%, #f4dba340, transparent 50%); }
.topbar { border-color: var(--border); }
.brand, .brand small, .text-button, .nav-active { color: #687b66; }
.brand-mark { background: #91b777; border: 2px solid #fff5d6; border-radius: 17px; color: #fff9e3; transform: rotate(-7deg); box-shadow: 0 4px 0 #77945e; }
.connection { background: #fffdf4; color: #789279; border: 1px solid #d8ddc4; border-radius: 22px; }
.hero-copy h1 { color: #556e52; font-weight: 900; letter-spacing: 1px; text-shadow: 0 4px 0 #fffdf4; }
.hero-copy h1 span { color: #dba765; }
.hero-copy p, .mission-coordinate, .section-note, .section-title h2 small { color: #8c987f; }
.hero-tags span, .section-number { background: #fff9e9; border: 1px solid #e6dfbe; color: #9a9d72; border-radius: 18px; }
.mission-coordinate strong { color: #708762; }
body[data-biome] .lobby-card, body[data-biome] .map-card, body[data-biome] .class-card { background: #fffdf6; border: 2px solid #e0e1cb; border-radius: 22px; box-shadow: 0 7px 0 #c4c8aa35, 0 12px 24px #8097700c; }
.lobby-card:before { display: none; }
.lobby-card h2, .lobby-card strong, .section-title h2, .room-title h2 { color: #69755b; }
.lobby-card label { color: #8f927d; }
.lobby-card p, .field-note, .chosen-loadout, .lobby-notice, .room-title p, .room-actions>span { color: #979d86; }
input, .lobby-card input, dialog input { background: #f6f6e9; color: #65765c; border: 1px solid #dfdfc9; border-radius: 12px; }
input::placeholder { color: #b2b49e; }
.button { border-radius: 17px; font-weight: 800; }
.button.primary { color: #fffdf0; background: #e5b66d; border: 2px solid #f9d7a5; box-shadow: 0 4px 0 #c49958; }
.button.primary:hover { background: #efc680; }
.button.secondary, .button.ghost { color: #7c9470; background: #f2f5e6; border: 1px solid #d7dec1; }
.map-card.selected, .class-card.selected { border-color: #a1bd83 !important; background: #f3f8e9 !important; box-shadow: 0 5px 0 #a9b98b42 !important; }
.map-card canvas { filter: none; border-radius: 19px 19px 0 0; border-bottom: 1px solid #dbe3cb; }
.map-card .map-region, .map-card .selection-mark { background: #fffbeb; color: #88a16e; border: 1px solid #d6dcba; border-radius: 12px; }
.map-name-line strong, .class-card strong, .loadout-copy h3, .material-card strong { color: #6f7c5f; }
.map-name-line>span { color: #97a57f; background: #f1f5e6; border: 1px solid #dce5ca; border-radius: 9px; }
.map-copy p, .map-copy small, .class-card .class-name, .class-card .class-weapon, .class-card .class-top { color: #9aa28b; }
.class-card { overflow: hidden; }
.class-card canvas { filter: none; }
.class-card .class-top span:last-child { color: #b2a578; }
.loadout-detail { background: #fffcf2; border: 2px solid #e1e2c9; border-radius: 22px; overflow: hidden; }
.loadout-portrait { background: radial-gradient(ellipse, #f6e9c8, #edf3dd); border-color: #e2dfc3; }
.loadout-portrait>span, .loadout-copy>.eyebrow, .loadout-copy h3 small { color: #a7a47e; }
.loadout-copy>p, .loadout-specs small, .operator-skill span, .operator-stats label { color: #90977c; }
.loadout-specs strong, .operator-skill strong { color: #81946d; }
.operator-skill { border-color: #e0e4cb; }
.operator-skill kbd, kbd { background: #edf2df; color: #9da478; border: 1px solid #d7ddbe; border-radius: 7px; }
.operator-stats .trait-chip { color: #9eaa7c; background: #f1f5e3; border-color: #dfe5c8; border-radius: 12px; }
.operator-stats meter::-webkit-meter-bar { background: #e6ecd5; }
.operator-stats meter::-webkit-meter-optimum-value { background: #acbf87; }
.material-card { background: #fffcf3; border: 2px solid #e1e3cb; border-radius: 17px; }
.material-card small, .material-intel { color: #979e86; }
.material-card.selected { background: #f4f6e8; border-color: #bdc996; }
.material-swatch { border: 1px solid #00000010; border-radius: 9px; }
.material-swatch.soil { background: linear-gradient(#a3cc78 0 25%, #d4a173 25% 65%, #af805d 65%); }
.arena-section { border: 3px solid #fffdf0; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 0 #8ba78b33; }
body[data-biome] .arena-topline, body[data-biome] .arena-bottomline { background: #f6f7e9; color: #8e9b7e; border-color: #e0e7d0; }
.arena-topline h2, .map-label, .arena-bottomline em { color: #82966d; }
.icon-button { background: #fffdf3; color: #91a47e; border: 1px solid #dce5c7; border-radius: 11px; }
.stage { aspect-ratio: 16/9; background: #c6e5df; }
#arena { aspect-ratio: 16/9; }
.stage.active #arena { cursor: none; }
.scoreboard { background: #426776e8; color: #f9f3d6; border: 1px solid #ffffff66; border-radius: 21px; box-shadow: 0 3px 8px #32687922; }
.score-player>span { color: #a8eef1; }
.score-player.orange span { color: #ffe2ae; }
.score-player strong, .match-clock strong { color: #fff7d6; }
.match-clock, .match-clock span { color: #cfe3df; border-color: #bcd6cd77; }
.overlay-card { background: #fffdf3f5; color: #809673; border: 2px solid #e1e4cb; border-radius: 23px; box-shadow: 0 8px 0 #77976820; }
.overlay-card h2 { color: #799967; }
.overlay-card p { color: #98a18a; }
.preview-stamp { color: #fffdf0; text-shadow: 0 3px 0 #74956f; background: #85ad84dd; border: 2px solid #ffffffc0; border-radius: 22px; padding: 17px 23px; transform: rotate(-3deg); box-shadow: 0 5px 0 #72946a66; }
.preview-stamp span { color: #eff4d7; }
.ammo-display, .skill-display, .dash-display, .material-focus { background: #426776e8; color: #f7efcf; border: 1px solid #ffffff66; border-radius: 16px; }
.ammo-display small, .ammo-display b, .ammo-display span { color: #d3e5de; }
.ammo-display strong { color: #fff0ac; }
.countdown-number { color: #fff3bb; text-shadow: 0 6px 0 #6c9586; }
.skill-display kbd { background: #a1b790; color: #fffbea; }
.skill-display>span, .skill-display>small { color: #eeeccf; }
.accuracy-hud { position: absolute; left: 18px; top: 78px; display: grid; gap: 5px; width: 176px; padding: 11px 14px; background: #426776df; border: 1px solid #ffffff66; border-radius: 15px; pointer-events: none; }
.accuracy-hud span { color: #fff0c3; font-size: 11px; font-weight: 800; }
.accuracy-hud small { font-size: 9px; color: #cee6dc; }
.accuracy-hud meter { width: 100%; height: 7px; }
.accuracy-hud meter::-webkit-meter-bar { border: 0; background: #6a9197; border-radius: 5px; }
.accuracy-hud meter::-webkit-meter-optimum-value { background: #e9cb79; border-radius: 5px; }
.guide-strip { border-color: #dce3cd; }
.guide-strip strong { color: #8b9a7c; }
.guide-strip small, .guide-number, footer { color: #9eaa90; }
.room-code-panel, .player-card, .player-card.empty { background: #f7f8ea; border: 1px solid #dce3ca; border-radius: 17px; }
.room-code-panel strong, .player-card strong { color: #889b70; }
.player-card small { color: #a4ac8e; }
.player-avatar { background: #deebcc; color: #89a574; }
.room-title p, .room-actions>span { color: #909c80; }
.room-code-label, .room-code-panel span { color: #a6ad93; }
.room-code-panel button { color: #81936c; }
.room-status { color: #81996d; }
.dialog-close { color: #92a080; }
dialog { background: #fffdf3; color: #829572; border: 2px solid #dde2c6; border-radius: 22px; }
dialog p, dialog ul { color: #929d83; }
.toast { background: #fff8e6; color: #8e9a76; border: 1px solid #d7dfbf; border-radius: 15px; }
.killfeed div { background: #426776dd; color: #fff2c8; border: 1px solid #ffffff66; border-radius: 12px; }
.touch-controls button { background: #547e87d9; color: #fff4d0; border: 2px solid #fff8dd99; border-radius: 18px; }
.touch-controls .touch-fire { background: #e6b574; color: #fff8df; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .accuracy-hud { top: 48px; left: 10px; width: 122px; padding: 7px 9px; gap: 3px; } .accuracy-hud span { font-size: 8px; } .accuracy-hud small { font-size: 7px; } .preview-stamp { font-size: 12px; } }