/* AVE DOJO V37 — tested audio-clock HUD, no screen-wide backdrop filter. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&family=Share+Tech+Mono&display=swap');
:root {
  color-scheme:dark;
  --bg:#061018; --text:#e5f3f4; --muted:#91a9ad; --accent:#75d5bc;
  --line:rgba(112,211,185,.43); --panel:rgba(3,17,23,.88);
  --danger:#ee6868; --blue:#62baff; --mono:'Share Tech Mono','Courier New',monospace;
  --sans:Raleway,'Segoe UI',Arial,sans-serif; --gap:12px;
  --side-w:320px; --spec-h:194px; --macro-h:222px; --controls-h:146px; --species-h:368px;
  --dock-h:calc(var(--spec-h) + var(--macro-h) + var(--gap));
  --dock-left:calc(var(--side-w) + var(--gap) * 2);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}
body{overflow:hidden}
button,input,select{font:inherit;color:inherit}
button,select{border:1px solid var(--line);border-radius:9px;background:rgba(3,20,26,.84)}
button{cursor:pointer;padding:9px 12px;transition:background .15s,border-color .15s;line-height:1.1}
button:hover:not(:disabled){border-color:#a4f3d7;background:rgba(18,65,56,.8)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a0e6fd;outline-offset:2px}
button:disabled{opacity:.43;cursor:not-allowed}
button.primary{background:rgba(21,88,73,.88);border-color:#65c7aa}
input[type=range]{accent-color:#72d9c5;min-width:0;cursor:pointer}
input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}
select{min-width:0;max-width:100%;padding:7px 9px}
/* These boxes only organize DOM; they must never become a screen-sized pane. */
#app,.workspace,.sidebar,.arena,.experience-grid{display:contents;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.forest-card{position:fixed;inset:0;z-index:0;margin:0;padding:0;border:0;background:var(--bg)}
.forest-stage,#forestFrame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;filter:none;opacity:1}
#forestFrame{touch-action:none}
.forest-loading{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:3;padding:13px 20px;background:#0a1b23;border:1px solid var(--line);border-radius:20px;font:13px var(--mono);max-width:90%;text-align:center}
/* The header has no fill, dividing line, effect, or event-catching blank surface. */
.topbar{position:fixed;inset:8px 12px auto;z-index:50;height:132px;pointer-events:none;background:none;border:0;box-shadow:none}
.partner-stack{position:absolute;top:4px;left:0;width:186px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.partner-brand{width:176px;height:56px;display:grid;place-items:center}
.partner-brand img{display:block;width:100%;height:100%;object-fit:contain}
.main-brand{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:520px;height:140px;pointer-events:none}
.main-brand img{width:100%;height:100%;object-fit:contain;display:block}
.brand-reset{pointer-events:auto}
.top-status{position:absolute;right:0;top:4px;display:flex;gap:7px;align-items:flex-start;pointer-events:none}
.top-status button,.settings-shell,.brand-reset{pointer-events:auto}
.view-controls{display:flex;gap:7px}
.micro,.icon-button,.reset-button{display:inline-flex;align-items:center;justify-content:center;height:38px;min-height:38px;padding:0 12px;font:11px var(--mono);letter-spacing:.075em;white-space:nowrap;border-radius:20px}
.micro.active{color:#b7f4d9;border-color:#63b799}
.reset-button{border-color:#9b5258;color:#f5b9bc;background:rgba(32,12,17,.85)}
.help-button{width:38px;padding:0}
.settings-shell{position:relative}
.settings-dropdown{position:absolute;top:47px;right:0;width:358px;max-height:calc(100dvh - 70px);overflow:auto;overscroll-behavior:contain;padding:16px;background:#091c24;border:1px solid #64aa97;border-radius:14px;box-shadow:0 16px 30px #0008;z-index:55}
.settings-card{padding:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font:12px var(--mono);letter-spacing:.07em;color:#c8e8e5}
.gap-top{margin-top:16px}
.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px}
.segmented button{font:12px var(--mono);text-transform:uppercase;padding:9px 4px}
.segmented button.active{color:#b7f4dd;background:#174b3d;border-color:#73c6ad}
.toggle-row{display:flex;align-items:center;gap:9px;padding:10px;margin-top:9px;border:1px solid #315b58;border-radius:8px;background:#081a22}
.toggle-row strong{display:block;font:12px var(--mono)}
.toggle-row small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.settings-phone{display:flex;gap:10px;align-items:center;width:100%;text-align:left;margin-top:12px}
.settings-phone b{font:12px var(--mono)}.settings-phone small{display:block;font-size:12px;color:var(--muted)}
.settings-levels{margin-top:16px}.progress-card{margin:10px 0;padding:10px;border:1px solid #254943;border-radius:8px}
.progress-line{height:5px;background:#162d36;margin-top:8px;border-radius:9px;overflow:hidden}.progress-line>div{height:100%;background:#7cd4c1}
.progress-meta{display:flex;justify-content:space-between;gap:6px;margin-top:5px;font-size:11px;color:var(--muted)}
.campaign-list{display:flex;flex-direction:column;gap:5px}.campaign-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 6px;text-align:left}
.campaign-index,.campaign-mark{font:11px var(--mono)}.campaign-main strong{display:block;font-size:12px;font-weight:500}.campaign-main small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.campaign-item.selected{border-color:#7ddfb9;background:#123e33}.campaign-item.complete .campaign-mark{color:#8de2b8}.campaign-item.locked{opacity:.43}
.link-button{border:0;border-radius:3px;background:none;padding:0;font:11px var(--mono);color:#bad1d4;text-decoration:underline;text-underline-offset:3px}
/* Every interactive card has a bounded box and a tint, never a backdrop filter. */
.control-bar,.species-card,.players-card,.spectrogram-card,.macro-panel{z-index:10;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:none}
.side-control-bar{position:fixed;left:var(--gap);bottom:calc(var(--species-h) + var(--gap)*2);top:auto;width:var(--side-w);height:var(--controls-h);display:grid;grid-template-rows:32px 40px 34px;gap:6px;padding:9px}
.volume-cluster{display:flex;align-items:center;gap:10px;min-width:0;font:11px var(--mono)}
.range-shell{display:flex;align-items:center;gap:7px;flex:1;min-width:0}.range-shell input{width:100%}.range-shell output{font:12px var(--mono);min-width:32px;text-align:right}
.transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.transport button{padding:5px;font:12px var(--mono);min-width:0}
.audio-source-cluster{display:flex;align-items:center;gap:8px;min-width:0;font:10px var(--mono)}.audio-source-cluster>span{max-width:49px}.audio-source-cluster select{flex:1;font-size:12px;width:100%}
#spatialReadout{display:none}
.species-card{position:fixed;left:var(--gap);top:auto;bottom:var(--gap);width:var(--side-w);height:var(--species-h);padding:10px;display:flex;flex-direction:column;gap:4px;overflow:visible}
.eyebrow{color:#8bddc2;font:11px var(--mono);letter-spacing:.09em;margin:0}
.species-title-row{position:relative;display:block;min-width:0;padding-right:52px}
.species-name-prefix{font-size:14px;line-height:1.1;letter-spacing:.025em;color:#d6e8ed}
#speciesCommonGroup{font-family:var(--sans);font-size:29px;font-weight:300;line-height:1.03;letter-spacing:.055em;margin:3px 0 4px;overflow-wrap:normal}
#speciesScientific{display:block;font:italic 15px Georgia,'Times New Roman',serif;line-height:1.25;color:#adc4ca}
.species-icon{position:absolute;top:0;right:0;width:53px;height:60px;display:grid;place-items:center}
.species-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:var(--species-filter,none)}
.roster-heading{font:10px var(--mono);letter-spacing:.12em;color:#9cb4b8;margin-top:1px;padding-top:4px;border-top:1px solid #3e60544d}
.species-roster{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(7,minmax(22px,auto));list-style:none;gap:0;padding:0;margin:0;flex:0 0 auto;min-height:0;overflow:visible}
.species-chip{display:grid;grid-template-columns:7px 36px minmax(0,1fr);align-items:center;gap:6px;padding:3px 4px;border-radius:4px;border:1px solid transparent;background:rgba(5,20,26,.22);color:#798990;font-size:12px;line-height:1.13;min-height:23px}
.species-chip .dot{width:6px;height:6px;border-radius:50%;background:#728187}.species-chip .code{font:10px var(--mono)}
.species-chip .label{white-space:normal;overflow:visible;font-size:11px}
.species-chip.active{color:#e0f5ed;border-color:#58aa8e88;background:rgba(18,66,50,.5)}.species-chip.active .dot{background:var(--chip,#7bd7b7)}
.card-actions{display:grid;grid-template-columns:1fr 1.14fr;gap:7px;margin-top:auto;flex-shrink:0}.card-actions button{height:39px;min-width:0;padding:6px 4px;font:11px var(--mono)}
/* Right-aligned stats do not reserve a column in the bottom dock. */
.hud{position:fixed;right:var(--gap);top:124px;width:260px;z-index:9;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;pointer-events:none;color:#eff9f8;text-shadow:0 1px 3px #000}
.hud-cell{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0;background:transparent;border:0;padding:3px 0}
.hud-cell>span{font:11px var(--mono);letter-spacing:.1em;color:#b9d6d7}.hud-cell strong{display:block;font:36px var(--mono);font-weight:400;line-height:1.1}.hud-cell.score strong{color:#a0eed5}
.hud .risk-cell{grid-column:1 / -1;border-top:1px solid #5b8a8133;padding-top:7px}.risk-cell strong{font-size:15px;line-height:1.2;white-space:normal}.health-cell,.predator-cell{display:none}
.risk-track,.health-track,.predator-track{width:100%;height:3px;background:#294644;margin-top:6px}.risk-track i,.health-track i,.predator-track i{display:block;height:100%;background:#62baff}
.players-card{position:fixed;left:var(--dock-left);top:126px;width:242px;padding:10px;max-height:260px;overflow:auto}
.player-list{display:flex;flex-direction:column;gap:5px;margin-top:7px}.player-row{display:grid;grid-template-columns:7px minmax(0,1fr) auto;gap:7px;align-items:center;padding:6px;border:1px solid #315451;border-radius:6px}.player-row strong{display:block;font-size:12px}.player-row small{font-size:10px;color:var(--muted)}.player-dot{width:6px;height:6px;background:#566e6e;border-radius:50%}.player-row.connected .player-dot{background:#86d5b1}.player-contribution.correct{color:#78c7ff}.player-contribution.wrong{color:#fb8080}
/* The plot, timeline, and macro are adjacent lower-screen regions. */
.spectrogram-card{position:fixed;left:var(--dock-left);right:var(--gap);bottom:calc(var(--macro-h) + var(--gap) * 2);height:var(--spec-h);display:grid;grid-template-rows:22px minmax(0,1fr) 30px 25px auto;overflow:hidden}
.spectrogram-topline{min-width:0;display:flex;align-items:center;padding:3px 10px;border-bottom:1px solid #4c877033;font:10px var(--mono);letter-spacing:.1em;color:#afd0cf}
.spectrogram-head{min-width:0}.spectrogram-head>span:first-child{font-size:10px}#streamReadout{display:none}
.spectrogram-stage{position:relative;min-height:0;background:#030b11;overflow:hidden}
#spectrogramCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.spectrogram-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;padding:8px 12px;pointer-events:none}
.spectrogram-empty strong{font:400 18px var(--sans);letter-spacing:.12em}.spectrogram-empty p{display:none}
.pause-curtain{position:absolute;inset:0;display:grid;place-items:center;font:15px var(--mono);letter-spacing:.18em;background:#0610188f;pointer-events:none}
.feedback-bar{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:6px;padding:3px 8px;font-size:10px;min-width:0;border-top:1px solid #31594b4d;background:rgba(3,15,22,.85)}
.feedback-bar strong{display:block;font:11px var(--mono);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.feedback-bar small{display:none}.feedback-bar>b{font:10px var(--mono);color:#afc7cc}.feedback-bar.correct{color:#8ad1ff}.feedback-bar.wrong,.feedback-bar.warning{color:#fa8585}
.direction-deck{display:grid;grid-template-columns:122px minmax(0,1fr);gap:7px;padding:5px 8px;border-top:1px solid #2b5656;font:10px var(--mono);min-height:43px;background:#071a21}
.direction-deck.inactive{display:none}.direction-deck small{display:block;font-size:10px;color:var(--muted)}
.direction-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.direction-buttons button{display:flex;align-items:center;justify-content:center;gap:7px;padding:4px;font-size:17px;min-height:32px}.direction-buttons small{font-size:10px;color:inherit}
#hawkAlertBtn{position:fixed;right:var(--gap);bottom:calc(var(--dock-h) + var(--gap) * 2);z-index:12;width:166px;height:49px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #b3656577;border-radius:10px;background:rgba(30,13,17,.91)}
.hawk-alert img{width:47px;height:34px;object-fit:contain;filter:brightness(0) saturate(100%) invert(62%) sepia(85%) saturate(1450%) hue-rotate(325deg)}
.hawk-alert b{display:block;font:12px var(--mono);letter-spacing:.06em}.hawk-alert small{display:block;font-size:10px;color:#d3a9ae;margin-top:2px}.hawk-alert.legitimate{border-color:#fb8383;box-shadow:0 0 12px #e25c6255}.hawk-alert:disabled{opacity:.55}
.level-timeline{position:relative;min-height:30px;background:#06131b;overflow:hidden}
.level-timeline-rail,.level-timeline-fill{position:absolute;top:17px;left:12px;right:12px;height:3px;background:#30434b;border-radius:4px}
.level-timeline-fill{right:auto;width:0;background:#72c1d7}.level-timeline-marker{position:absolute;top:11px;left:12px;width:2px;height:14px;background:#dcf3f5;transform:translateX(-50%);z-index:3;box-shadow:0 0 10px rgba(220,243,245,.35)}
.level-timeline-calls{position:absolute;inset:0 12px;pointer-events:none}.call-node{position:absolute;top:13px;width:10px;height:10px;transform:translateX(-50%);border-radius:50%;border:2px solid #abc5cd;background:#07141b;box-shadow:0 0 0 3px #07141b}
.call-node.correct{background:#60b2fc;border-color:#b0dbff}.call-node.wrong{background:#e46669;border-color:#fcafb1}.call-node.open{border-color:#cbffe7;box-shadow:0 0 0 3px #07141b,0 0 12px rgba(126,241,217,.28)}.call-node.current{border-color:white}
#levelTimelineText{position:absolute;right:10px;top:0;font:9px var(--mono);color:#9ab5bb}
.macro-panel{position:fixed;left:var(--dock-left);right:var(--gap);bottom:var(--gap);height:var(--macro-h);display:grid;grid-template-rows:29px minmax(0,1fr);overflow:hidden}
.macro-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:5px 10px;border-bottom:1px solid #426c604d;font:10px var(--mono);letter-spacing:.08em}.macro-topline small{margin-left:12px;font:11px var(--sans);color:var(--muted)}
 .macro-board{display:grid;grid-template-columns:repeat(var(--macro-columns,3),minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:6px;min-height:0;overflow:visible;padding:7px}
.species-macro{display:grid;grid-template-rows:40px minmax(0,1fr);grid-column:span var(--call-cols,3);min-width:0;border:1px solid #68b49655;border-radius:8px;background:rgba(3,19,24,.75);overflow:visible}
.macro-species-head{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:3px 5px;border-bottom:1px solid #34564955;min-width:0}
.macro-species-head>div{min-width:0}.macro-species-head strong{display:block;font:500 12px var(--sans);white-space:normal;line-height:1.05}.macro-species-head em{font:italic 10px Georgia,serif;color:#a9c3c7;line-height:1.1;display:block}.macro-species-head>span{font:9px var(--mono);color:#91aab0;white-space:nowrap}
.call-grid{display:grid;grid-template-columns:repeat(var(--call-cols,3),minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-flow:column;gap:4px;padding:5px;min-height:0}
.call-button{--risk:#708d9d;position:relative;min-width:0;min-height:0;padding:9px 5px 5px;border-color:color-mix(in srgb,var(--risk) 72%,#628277);background:linear-gradient(180deg,color-mix(in srgb,var(--risk) 16%,#081921),#07181e)}
.call-button strong{display:block;font:19px var(--mono);font-weight:400;line-height:1.05}.call-button small{display:block;font:9px var(--mono);line-height:1.25;margin-top:4px;color:#c5d7dc;white-space:normal}.call-button .prob{position:absolute;right:5px;top:4px;font:8px var(--mono);color:#a8bdbf}
.call-button.correct{outline:2px solid #61b8fc;outline-offset:-2px}.call-button.wrong{outline:2px solid #ef7171;outline-offset:-2px}.audio-pending{opacity:.38}
.macro-panel.collapsed{height:29px}.macro-panel.collapsed .macro-board{display:none}
/* Field health graphics remain contained in the open forest area. */
.flock-display,.field-meter-overlay{position:fixed;right:calc(var(--gap) + 280px);z-index:8;width:234px;padding:9px;border:1px solid #4c8e7766;border-radius:10px;background:#061923e0;color:#cbe4e1}
.flock-display{top:130px}.flock-heading{display:flex;justify-content:space-between;gap:6px;font:10px var(--mono)}.flock-heading small{font-size:9px;color:var(--muted)}.flock-members{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.flock-member{position:relative;width:29px;height:29px;--health:100%;--species:#73bdba}.flock-member:before{content:'';position:absolute;inset:0;background:var(--species);-webkit-mask:url('assets/digiviz-bird-512.png') center/contain no-repeat;mask:url('assets/digiviz-bird-512.png') center/contain no-repeat;clip-path:inset(calc(100% - var(--health)) 0 0 0)}
.flock-member:after{content:'';position:absolute;inset:0;background:url('assets/flock-bird-outline.png') center/contain no-repeat}.flock-member.lost{opacity:.5}.lost-x{display:none;position:absolute;inset:-5px;z-index:2;color:#ff7575;font-size:40px;text-align:center;line-height:36px}.flock-member.lost .lost-x{display:block}.flock-sex{position:absolute;bottom:-1px;right:0;font:8px var(--mono)}
.field-meter-overlay{top:231px;font:10px var(--mono)}.field-status-line,.field-mini-head{display:flex;justify-content:space-between;gap:8px}.field-mini-meters{display:grid;gap:6px;margin-top:8px}.mini-track{height:4px;background:#243d3c;margin-top:4px}.mini-track i{display:block;height:100%;background:#7cc7b0}.mini-track.predator i{background:#e07c79}
/* Modal windows are explicit opaque/tinted surfaces, not blur layers. */
.modal-layer{position:fixed;inset:0;z-index:100;background:rgba(0,6,10,.80);display:grid;place-items:center;padding:18px}
.modal-card{position:relative;width:min(780px,100%);max-height:calc(100dvh - 36px);overflow:auto;padding:23px;border:1px solid #5c9988;border-radius:15px;background:#0a1b25;box-shadow:0 18px 70px #0009}
.modal-close{position:absolute;right:12px;top:12px;width:34px;height:34px;padding:0;font-size:22px}
.modal-card h2{font:400 26px var(--sans);line-height:1.15;margin:12px 36px 8px 0}.modal-card>em{font:italic 17px Georgia,serif;color:#b7d1d2}.modal-card p{font-size:14px;line-height:1.5;color:#b1c7ce}
.modal-call-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:9px;margin:16px 0}.modal-call{background:color-mix(in srgb,var(--risk) 18%,#081b21);border-color:var(--risk);padding:13px}.modal-call b{display:block;font:20px var(--mono)}.modal-call small{display:block;font-size:11px;line-height:1.3;margin-top:5px}
.modal-rules,.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.modal-rules div,.result-stats div{border:1px solid #32524c;border-radius:7px;text-align:center;padding:10px}.modal-rules span,.result-stats span{display:block;font:10px var(--mono);color:#a9c1c8}.modal-rules strong,.result-stats strong{display:block;font:20px var(--mono);margin-top:6px}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.modal-actions button{min-height:42px;font:12px var(--mono)}
.tutorial-card{text-align:center}.tutorial-card h2{margin-right:0}.tutorial-visual{height:140px;margin:14px 0;background:url('assets/digiviz-bird-512.png') center/140px auto no-repeat}.skip-tutorial{position:absolute;top:12px;right:12px;font:10px var(--mono)}.tutorial-actions{display:flex;justify-content:space-between;gap:12px}
.network-canvas{display:block;width:100%;height:290px;background:#05111a;border:1px solid #426d60;border-radius:8px;margin-top:15px}.network-key{display:flex;justify-content:center;gap:18px;margin-top:8px;font-size:12px}.network-key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.network-key .correct{background:#62baff}.network-key .missed{background:#98a2ad88}
.slot-tabs{display:flex;gap:6px;margin:15px 0}.slot-tabs button{font:12px var(--mono)}.slot-tabs .active{background:#155342;border-color:#80d4ba}
.phone-pair-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;align-items:center}.qr-frame{width:270px;height:270px;display:grid;place-items:center;border:13px solid #f7fbfc;background:#f7fbfc;border-radius:10px;overflow:hidden}.qr-frame>div{grid-area:1/1}.qr-frame #qrCode,.qr-frame #qrCode>div{width:236px;height:236px;overflow:hidden;display:grid;place-items:center}.qr-frame canvas,.qr-frame img{width:236px;height:236px;display:block}.qr-frame #qrCode>*:not(:first-child),.qr-frame #qrCode>div>*:not(:first-child){display:none!important}#qrPlaceholder{font-size:12px;text-align:center;color:#183c43}
.pair-copy ol{padding-left:18px;line-height:1.6;font-size:14px}.room-code{display:flex;align-items:center;justify-content:space-between;padding:9px;border:1px solid #3a5b59;border-radius:7px;font:13px var(--mono)}.room-code strong{font-size:17px}.pair-status{display:flex;gap:7px;align-items:center;margin-top:8px;font-size:12px}.pair-status i{width:6px;height:6px;border-radius:50%;background:#88b9af}.pair-copy p{font-size:12px}.pair-actions{display:flex;gap:6px}.pair-actions button{font:11px var(--mono)}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.help-grid article{padding:12px;border:1px solid #35554b;border-radius:8px}.help-grid b{font:12px var(--mono);color:#94dcbe}.help-grid p{font-size:13px;margin-bottom:0}.data-warning{border-left:3px solid #c39857;padding-left:12px}.game-over-card{max-width:500px;text-align:center}.game-over-card h2{font-size:44px;color:#ef8383;margin-right:0}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:150;max-width:90vw;border:1px solid #78bba9;background:#0a2029;border-radius:16px;padding:10px 15px;color:#e4f5f2;font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s}.toast.show{opacity:1}
/* Smaller laptops retain the entire roster and all bottom controls. */
@media(max-width:1430px){:root{--side-w:304px;--gap:10px;--macro-h:212px;--spec-h:176px;--controls-h:140px;--species-h:352px}.main-brand{width:430px;height:124px;top:-5px}.partner-stack{width:170px}.partner-brand{width:162px;height:52px}.micro,.icon-button,.reset-button{padding:0 9px;font-size:10px}.top-status,.view-controls{gap:5px}.side-control-bar{top:auto}.species-card{top:auto}#speciesCommonGroup{font-size:26px}.species-title-row{padding-right:48px}.species-icon{width:49px}.species-roster{min-height:0}.species-chip{grid-template-columns:6px 34px minmax(0,1fr);gap:4px;padding:2px 4px}.species-chip .label{font-size:11px}.hud{width:240px}.hud-cell strong{font-size:33px}.flock-display,.field-meter-overlay{right:270px}}
@media(max-height:735px) and (min-width:901px){:root{--macro-h:196px;--spec-h:154px;--controls-h:132px;--species-h:330px}.side-control-bar{top:auto;grid-template-rows:26px 34px 30px;gap:5px;padding:8px}.species-card{top:auto;gap:3px;padding:8px}.species-roster{min-height:0;grid-template-rows:repeat(7,minmax(21px,auto))}.species-chip{min-height:21px}.roster-heading{padding-top:4px;margin-top:1px}.card-actions button{height:34px}.hud{top:119px}.hud-cell strong{font-size:28px}#speciesCommonGroup{font-size:25px}.call-button strong{font-size:18px}.call-button small{font-size:8px}.flock-display{top:125px}.field-meter-overlay{top:218px}}
/* Phones: no nested species-card scrolling; the document can grow as needed. */
@media(max-width:900px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 :root{--side-w:auto;--gap:8px;--controls-h:auto;--macro-h:230px;--spec-h:188px}
 #app{display:block;min-height:100dvh;padding:132px 8px 14px;background:none}
 .topbar{position:absolute;inset:8px 8px auto;height:122px}
 .partner-stack{width:116px;gap:3px}.partner-brand{width:110px;height:42px}.brand-reset{height:32px;min-height:32px;font-size:9px;padding:0 9px}
 .main-brand{top:-2px;left:50%;right:auto;transform:translateX(-50%);width:240px;max-width:60vw;height:90px}
 .top-status{top:86px;left:0;right:0;display:flex;justify-content:flex-end;gap:5px}.top-status .micro,.top-status .icon-button{height:34px;min-height:34px;font-size:10px;padding:0 8px}.view-controls{gap:5px}.help-button{width:30px;min-width:30px}
 .settings-dropdown{top:40px;right:-34px;width:min(350px,calc(100vw - 16px));max-height:calc(100dvh - 140px)}
 .workspace{display:flex;flex-direction:column;gap:8px;pointer-events:none;padding-top:120px}
 .sidebar,.arena,.experience-grid{display:contents}
 .hud{position:absolute;top:142px;right:10px;width:245px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hud-cell strong{font-size:25px}.hud-cell>span{font-size:9px}.hud .risk-cell{grid-column:1/-1;padding-top:3px}.risk-cell strong{font-size:12px}
 .spectrogram-card,.macro-panel,.species-card,.side-control-bar,.players-card,#hawkAlertBtn{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;pointer-events:auto;flex-shrink:0}
 #hawkAlertBtn{order:1;width:150px;align-self:flex-end;height:41px}.spectrogram-card{order:2;height:var(--spec-h)}.side-control-bar{order:3;height:108px;grid-template-columns:1fr;grid-template-rows:25px 36px 24px;gap:5px;padding:6px 8px}.audio-source-cluster>span{max-width:none;font-size:9px}.audio-source-cluster select{height:25px;padding:2px 8px;font-size:11px}.volume-cluster{font-size:10px}.transport button{font-size:12px}.macro-panel{order:4;height:auto;min-height:210px}.species-card{order:5;height:auto;min-height:0;max-height:none}.players-card{order:6;max-height:none}
 .species-title-row{padding-right:76px}.species-icon{width:70px;height:65px}.species-name-prefix{font-size:15px}#speciesCommonGroup{font-size:31px}#speciesScientific{font-size:16px}.species-roster{flex:none;min-height:0;grid-template-rows:repeat(7,minmax(27px,auto));gap:0}.species-chip{grid-template-columns:8px 38px minmax(0,1fr);padding:5px 7px;min-height:29px}.species-chip .label{font-size:12px}.card-actions{margin-top:6px}.card-actions button{height:40px;font-size:12px}
 .macro-topline small{display:none}.macro-topline{font-size:10px}.macro-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;overflow:visible}.species-macro{grid-column:span 1;min-height:176px;grid-template-rows:44px 128px}.species-macro:only-child{grid-column:1 / -1}.macro-species-head strong{font-size:12px}.call-button{padding-top:12px}.call-button strong{font-size:21px}.call-button small{font-size:9px}
 .flock-display,.field-meter-overlay{position:relative;right:auto;top:auto;left:8px;width:calc(100% - 16px);margin:8px 0}.forest-stage>.flock-display{position:fixed;top:190px;left:8px;width:115px;z-index:8}.forest-stage>.field-meter-overlay{display:none}
 .modal-layer{padding:8px}.modal-card{max-height:calc(100dvh - 16px);padding:19px 12px}.modal-card h2{font-size:22px}.modal-rules,.result-stats{grid-template-columns:1fr 1fr}.help-grid{grid-template-columns:1fr}.phone-pair-grid{grid-template-columns:1fr;gap:12px}.qr-frame{margin:auto}.network-canvas{height:240px}.pair-copy p{font-size:12px}.modal-actions{flex-wrap:wrap}.toast{font-size:12px}
}
@media(max-width:370px){.top-status .micro,.top-status .icon-button{font-size:9px;padding:0 6px}.top-status,.view-controls{gap:3px}.main-brand{max-width:56vw}.partner-stack{width:125px}.partner-brand{width:120px}.settings-dropdown{right:-29px}.hud{width:229px}.species-chip .label{font-size:11px}}
@media(prefers-reduced-motion:reduce){button,.toast{transition:none}}
/* Last rule by design: hidden placeholders/modals must never cover the scene. */
[hidden],.ui-hidden,#speciesDataLine,#lessonCopy,#spatialReadout,.status-pill,#phoneBtn{display:none!important}
@media(max-width:900px){
 .hud{right:8px;width:calc(100% - 16px);grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .hud-cell strong{font-size:23px;white-space:nowrap}
 .hud .risk-cell strong{font-size:12px;white-space:normal}
 #hawkAlertBtn{width:170px;height:42px;gap:8px;padding:5px 9px}
 #hawkAlertBtn b{font-size:11px;white-space:nowrap}
 #hawkAlertBtn small{display:none}
 .modal-card .eyebrow{padding-right:44px}
}
/* Seven roster rows have guaranteed space even for long species group names. */
.species-roster{min-height:0}
#speciesCommonGroup.long-group{font-size:24px;letter-spacing:.025em}
@media(max-height:735px) and (min-width:901px){.species-roster{min-height:0}}
@media(max-width:900px){
 .species-roster{min-height:0}
 #speciesCommonGroup.long-group{font-size:27px}
 .brand-reset{height:34px;min-height:34px;font-size:10px}
}

/* V34 dense cumulative macro board: no hidden call buttons. */
.macro-board.dense .macro-species-head>span{display:none}
.macro-board.dense .macro-species-head strong{font-size:11px}
.macro-board.dense .macro-species-head em{font-size:9px}
.macro-board.dense .call-button strong{font-size:17px}
.macro-board.dense .call-button small{font-size:8px;line-height:1.08}
.macro-board.dense .call-button .prob{font-size:8px;right:3px}
@media(max-width:1100px) and (min-width:901px){.macro-board.dense .call-button .prob{display:none}.macro-board.dense .call-button strong{font-size:16px}.macro-board.dense .macro-species-head em{display:none}}
@media(max-width:500px){.macro-board{grid-template-columns:1fr}.species-macro{grid-column:1 / -1}.macro-species-head strong{font-size:13px}.macro-board.dense .macro-species-head strong{font-size:13px}.macro-board.dense .call-button small{font-size:10px}.macro-board.dense .call-button strong{font-size:21px}}
@media(min-width:901px) and (max-height:660px){:root{--species-h:306px;--controls-h:125px}.side-control-bar{grid-template-rows:23px 31px 28px;gap:5px;padding:8px}.species-card{gap:2px;padding:8px}.species-chip{min-height:20px;padding:2px 4px}.species-roster{grid-template-rows:repeat(7,20px)}.roster-heading{padding-top:1px}#speciesCommonGroup{font-size:23px}.card-actions button{height:31px}}

#questionValue{white-space:nowrap;font-size:30px}
@media(max-width:900px){#questionValue{font-size:23px}}
/* Small viewports retain both brands without overlap or a separate header pane. */
@media(max-width:500px){
 .partner-stack{width:86px;gap:2px}.partner-brand{width:82px;height:43px}
 .brand-reset{width:86px;padding:0 4px;font-size:10px;height:34px;min-height:34px}
 .main-brand{width:min(200px,calc(100vw - 190px));max-width:none;height:80px;left:50%;top:0}
 .top-status{top:90px}
}
@media(min-width:901px) and (max-width:1100px){
 .main-brand{width:310px;height:90px;top:-2px}
 .top-status{top:82px}
 .hud{top:151px}
 .flock-display{top:156px}.field-meter-overlay{top:250px}
}
@media(min-width:901px){
 .macro-board.dense .species-macro{grid-template-rows:56px minmax(0,1fr)}
 .macro-board.dense .macro-species-head{align-items:flex-start;padding-top:5px}
 .macro-board.dense .macro-species-head em{overflow-wrap:anywhere}
}
@media(min-width:901px) and (max-width:1430px){.macro-board.dense .call-button .prob{display:none}}

/* V35 controls: bounded, no backdrop filters. Forest remains directly interactive. */
.settings-reset{display:flex;width:100%;justify-content:center;margin-top:16px;min-height:40px;font:12px var(--mono)}
.hud{display:flex;flex-direction:column;gap:8px;width:190px;right:var(--gap);top:118px}
.hud-cell{align-items:flex-end;text-align:right;padding:0;min-height:0}
.hud-cell strong{font-size:29px;line-height:1.05}.hud-cell>span{font-size:10px}
.hud .risk-cell{margin-top:3px;padding-top:6px}.hud .risk-cell strong{font-size:14px;line-height:1.15}
#questionValue{font-size:26px}
.entry-actions{display:contents}
.entry-button{position:fixed;z-index:12;width:184px;height:60px;font:16px var(--mono);letter-spacing:.08em;border-radius:12px;box-shadow:0 0 16px #62bca322;top:min(calc(50dvh - 30px),calc(100dvh - var(--dock-h) - 82px))}
#beginBtn{left:var(--dock-left)}#enterFlockBtn{right:154px}
.card-actions{grid-template-columns:1fr}.card-actions #previewBtn{width:100%}
#hawkAlertBtn{isolation:isolate;width:112px;height:112px;border-radius:50%;right:var(--gap);bottom:calc(var(--dock-h) + var(--gap) * 2);display:flex;flex-direction:column;gap:5px;padding:17px 7px 13px;background:rgba(35,8,15,.96);border:1px solid #b0646477;overflow:visible;color:#e2ccc9}
#hawkAlertBtn::before{content:'';position:absolute;inset:-16px;z-index:-1;background:url('assets/hawk-alert-code-v35.png') center/contain no-repeat;filter:sepia(1) saturate(2) hue-rotate(310deg);opacity:.28;pointer-events:none}
#hawkAlertBtn b{font:12px var(--mono);letter-spacing:.07em;white-space:nowrap}#hawkAlertBtn img{width:65px;height:39px;object-fit:contain;filter:brightness(0) saturate(100%) invert(51%) sepia(47%) saturate(851%) hue-rotate(335deg)}
#hawkAlertBtn small{display:block;font:11px var(--mono);margin:0;color:#f2c3b5}#hawkAlertBtn:disabled{opacity:.48}
#hawkAlertBtn.legitimate{border-color:#ffa195;box-shadow:0 0 30px #e96a6577;animation:predatorCue .5s ease-in-out infinite alternate}
@keyframes predatorCue{from{box-shadow:0 0 14px #e96a6544}to{box-shadow:0 0 34px #e96a65aa}}
.flock-health-panel{position:fixed;z-index:10;left:var(--dock-left);right:calc(210px + var(--gap));top:140px;max-width:770px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(210px,1.1fr);gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(3,17,23,.80);pointer-events:auto}
#flockHealthPanel #flockDisplay,#flockHealthPanel #fieldMeterOverlay{position:static;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;margin:0;padding:0;border:0;background:none;min-width:0}
#flockHealthPanel .flock-heading{display:block}#flockHealthPanel .flock-heading span{display:block;font:11px var(--mono);letter-spacing:.07em}#flockHealthPanel .flock-heading small{display:block;margin-top:3px;font:10px var(--mono);color:var(--muted)}
#flockHealthPanel .flock-members{display:flex;flex-wrap:nowrap;gap:2px;margin-top:6px;width:100%}#flockHealthPanel .flock-member{flex:1 1 18px;min-width:0;max-width:28px;height:28px}
#flockHealthPanel #fieldMeterOverlay{display:flex;flex-direction:column;justify-content:center;gap:8px}#flockHealthPanel .field-mini-meters{display:grid;grid-template-columns:1fr 1fr;gap:12px}#flockHealthPanel .field-mini-head{font:10px var(--mono);display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap}#flockHealthPanel .field-mini-head strong{font-size:14px}
#flockHealthPanel .field-status-line{display:flex;justify-content:space-between;font:10px var(--mono)}#flockHealthPanel .mini-track{margin-top:6px}
.species-roster{grid-template-rows:repeat(6,minmax(24px,auto))}
@media(min-width:901px) and (max-width:1430px){
 .hud{top:125px;width:170px;gap:5px}.hud-cell strong{font-size:24px;line-height:1}.hud-cell>span{font-size:9px}.hud .risk-cell strong{font-size:12px}#questionValue{font-size:23px}
 .flock-health-panel{right:190px;top:140px;gap:9px;padding:9px;grid-template-columns:minmax(155px,1fr) minmax(210px,1.1fr)}
 .entry-button{width:144px;height:54px;font-size:14px;top:auto;bottom:calc(var(--dock-h) + var(--gap) * 2)}#enterFlockBtn{right:142px}#hawkAlertBtn{width:108px;height:108px;right:var(--gap)}
}
@media(min-width:901px) and (max-height:800px){
 .hud{gap:4px;top:124px}.hud-cell strong{font-size:22px}.hud .risk-cell strong{font-size:11px}#questionValue{font-size:22px}.hud-cell>span{font-size:9px}
 .flock-health-panel{top:135px;padding:8px}.flock-health-panel .flock-member{height:24px}
}
@media(max-width:900px){
 .workspace{padding-top:248px}
 .hud{position:absolute;top:137px;right:9px;left:auto;width:158px;display:flex;flex-direction:column;gap:7px}
 .hud-cell strong{font-size:25px;line-height:1}.hud-cell>span{font-size:9px}.hud .risk-cell strong{font-size:12px}#questionValue{font-size:24px}
 .flock-health-panel{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:none;order:-3;flex-shrink:0;grid-template-columns:minmax(145px,1fr) minmax(174px,1fr);gap:8px;padding:8px}
 #flockHealthPanel .field-mini-meters{gap:7px}#flockHealthPanel .field-mini-head{font-size:9px}#flockHealthPanel .field-mini-head strong{font-size:12px}
 .entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;order:0;width:100%;pointer-events:auto}
 .entry-button,#beginBtn,#enterFlockBtn{position:static;width:100%;height:50px;font-size:14px;left:auto;right:auto;top:auto;bottom:auto}
 #hawkAlertBtn{position:relative;align-self:flex-end;order:1;width:92px;height:92px;right:auto;bottom:auto;top:auto;margin:8px;gap:2px;padding:14px 5px 9px}
 #hawkAlertBtn b{font-size:11px}#hawkAlertBtn img{width:54px;height:31px}#hawkAlertBtn small{font-size:10px}
 .species-roster{grid-template-rows:repeat(6,minmax(27px,auto))}
}
@media(max-width:370px){.flock-health-panel{grid-template-columns:minmax(122px,1fr) minmax(169px,1.1fr);gap:4px;padding:6px}#flockHealthPanel .field-mini-head{font-size:8px}}
@media(prefers-reduced-motion:reduce){#hawkAlertBtn.legitimate{animation:none}}
/* Keep entry/alert controls to the left of the right-aligned metric column. */
@media(min-width:1440px){#hawkAlertBtn{right:calc(var(--gap) + 210px)}#enterFlockBtn{right:calc(var(--gap) + 342px)}}
@media(min-width:901px) and (max-width:1430px){#hawkAlertBtn{right:calc(var(--gap) + 190px)}#enterFlockBtn{right:calc(var(--gap) + 318px)}}

/* V36: centered, two-times-size entry pair and square-framed circular alert. */
:root{--entry-w:368px;--entry-h:120px;--entry-green:101,250,159;--alert-side:142px}
.entry-actions{position:fixed;z-index:12;display:flex;gap:calc(var(--entry-w) * .5);left:50%;top:min(50dvh,calc(100dvh - var(--dock-h) - 90px));transform:translate(-50%,-50%);width:calc(var(--entry-w) * 2.5);pointer-events:none}
.entry-actions .entry-button,.entry-actions #beginBtn,.entry-actions #enterFlockBtn{position:static;inset:auto;flex:0 0 var(--entry-w);width:var(--entry-w);height:var(--entry-h);min-height:var(--entry-h);margin:0;transform:none;pointer-events:auto;display:flex;align-items:center;justify-content:center;font:22px var(--mono);letter-spacing:.09em;color:rgb(var(--entry-green));background:rgba(var(--entry-green),.16);border:1px solid rgba(var(--entry-green),.66);border-radius:15px;box-shadow:0 0 14px rgba(var(--entry-green),.10);backdrop-filter:none}
.entry-actions .entry-button:hover:not(:disabled){background:rgba(var(--entry-green),.27);border-color:rgb(var(--entry-green))}
.entry-actions .entry-button:disabled{opacity:1;color:rgba(var(--entry-green),.5);background:rgba(var(--entry-green),.07);border-color:rgba(var(--entry-green),.27)}
.hawk-alert-frame{position:fixed;z-index:12;right:calc(var(--gap) + 210px);bottom:calc(var(--dock-h) + var(--gap) * 2);width:var(--alert-side);height:var(--alert-side);display:grid;place-items:center;isolation:isolate;pointer-events:none;background:transparent;border:0;border-radius:0}
.hawk-alert-frame::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/hawk-alert-frame-v36.png') center/100% 100% no-repeat;filter:sepia(1) saturate(1.8) hue-rotate(310deg);opacity:.65}
#hawkAlertFrame #hawkAlertBtn{position:relative;align-self:center;justify-self:center;inset:auto;width:72%;height:72%;margin:0;z-index:1;pointer-events:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:8px 3px;background:rgba(35,8,15,.94);border:1px solid rgba(214,115,109,.56);overflow:visible}
#hawkAlertFrame #hawkAlertBtn::before{display:none;content:none}
#hawkAlertFrame #hawkAlertBtn img{width:62%;height:32%;object-fit:contain}
#hawkAlertFrame #hawkAlertBtn b{font:11px var(--mono);letter-spacing:.05em}
#hawkAlertFrame #hawkAlertBtn small{font:10px var(--mono)}
@media (min-width:901px) and (max-width:1430px){
 :root{--entry-w:min(288px,calc((100vw - 2 * var(--dock-left) - 24px) / 2.5));--entry-h:108px;--alert-side:126px}
 .entry-actions{top:min(50dvh,calc(100dvh - var(--dock-h) - 76px))}
 .entry-actions .entry-button{font-size:18px}
 .hawk-alert-frame{right:calc(var(--gap) + 190px)}
}
@media (max-width:900px){
 :root{--entry-w:calc((100vw - 28px) / 2.5);--entry-h:100px;--alert-side:126px}
 .entry-actions{position:relative;order:0;top:auto;left:auto;right:auto;bottom:auto;transform:none;align-self:center;width:calc(var(--entry-w)*2.5);display:flex;gap:calc(var(--entry-w)*.5);margin:0 auto}
 .entry-actions .entry-button,.entry-actions #beginBtn,.entry-actions #enterFlockBtn{font-size:clamp(13px,3.6vw,20px);height:100px;min-height:100px;padding:8px;white-space:normal}
 .hawk-alert-frame{position:relative;order:1;top:auto;left:auto;right:auto;bottom:auto;align-self:flex-end;flex-shrink:0;margin:4px 4px 4px 0}
}

/* V37: hidden entry controls during gameplay; bounded pause card; exact square alert. */
.entry-actions[hidden],.app.session-active .entry-actions{display:none!important}
.pause-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;width:var(--entry-w);min-width:280px;max-width:calc(100vw - 32px);padding:24px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;border:1px solid rgba(var(--entry-green),.66);border-radius:15px;color:rgb(var(--entry-green));background:rgba(7,32,24,.92);box-shadow:0 0 14px rgba(var(--entry-green),.12);backdrop-filter:none}
.pause-card h2{font:26px var(--mono);letter-spacing:.13em;margin:0}.pause-card p{font:13px var(--sans);color:#b4eac8;margin:0}
#continueGameBtn{width:100%;height:54px;font:18px var(--mono);letter-spacing:.1em;border-radius:10px;border:1px solid rgba(var(--entry-green),.62);color:rgb(var(--entry-green));background:rgba(var(--entry-green),.16)}
#continueGameBtn:hover{background:rgba(var(--entry-green),.27)}
.pause-card[hidden]{display:none!important}
#hawkAlertFrame{width:var(--alert-side);height:var(--alert-side);min-width:var(--alert-side);min-height:var(--alert-side);max-width:var(--alert-side);max-height:var(--alert-side);aspect-ratio:1/1;box-sizing:border-box;flex:none;padding:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:center;justify-items:center;border:1px solid rgba(214,115,109,.34);border-radius:0;background:rgba(22,9,14,.26)}
#hawkAlertFrame::before{inset:0;aspect-ratio:1;background-image:url('assets/hawk-alert-frame-v37.png');background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0}
#hawkAlertFrame #hawkAlertBtn{box-sizing:border-box;align-self:center;justify-self:center;width:72%;height:72%;aspect-ratio:1;min-width:0;min-height:0;max-width:none;max-height:none;border-radius:50%;margin:0;inset:auto}
.network-layout-option{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;color:#d8eee3}
.network-layout-option span{font:12px var(--mono);letter-spacing:.07em}.network-layout-option select{width:100%;font-size:12px;min-height:36px}.network-layout-option small{font-size:11px;color:#92b6aa;line-height:1.35}
@media(max-width:900px){.pause-card{width:min(368px,calc(100vw - 32px));padding:20px}#continueGameBtn{height:50px}}

/* V38: use the supplied alpha artwork exactly, not a synthetic outlined square. */
#hawkAlertFrame{border:0;background:transparent;outline:0;box-shadow:none;border-radius:0;isolation:isolate}
#hawkAlertFrame::before{background:url('assets/hawk-alert-art-v38.png') center/contain no-repeat;filter:none;opacity:1;border:0;outline:0;box-shadow:none}
#hawkAlertFrame #hawkAlertBtn{width:60%;height:60%;gap:3px;padding:6px 2px;border-radius:50%}
#hawkAlertFrame #hawkAlertBtn b{font-size:10px}
#hawkAlertFrame #hawkAlertBtn small{font-size:9px}
.entry-actions .entry-button:disabled{color:#879493;background:rgba(55,67,66,.25);border-color:#73817f66;box-shadow:none}
/* All six species stay legible, with no internal scrolling. */
.species-roster{grid-template-rows:repeat(6,minmax(24px,auto));gap:1px;min-height:0;flex:0 0 auto}
.species-chip{padding-top:3px;padding-bottom:3px;min-height:24px}
.species-card{gap:5px}

/* V39: focus on the forest, attribution in Help, nine independent score columns. */
.help-attribution{text-align:center;margin:0 auto 22px;max-width:650px}
.help-attribution img{display:block;width:min(260px,70%);height:94px;object-fit:contain;margin:0 auto 14px}
.help-attribution p{font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.settings-highscores{display:block;width:100%;margin:12px 0 0;padding:12px;font:13px var(--mono);letter-spacing:.08em;color:#bff5d8}
#hawkAlertFrame::before{inset:-25%;width:150%;height:150%;aspect-ratio:1;pointer-events:none}
.highscore-card{width:min(1680px,calc(100vw - 24px));max-width:none;background:#061720}
.highscore-card h2{font:clamp(24px,3vw,42px) var(--mono);color:#93edc5;letter-spacing:.1em;text-align:center;margin:8px 36px 12px}
.highscore-card .eyebrow{text-align:center;padding:0 40px}
#leaderboardStatus{text-align:center;font:12px var(--mono);line-height:1.5;min-height:20px}
#leaderboardStatus[data-kind=error]{color:#ffadb4}
.leaderboard-toolbar{display:flex;gap:8px;justify-content:flex-end;margin:8px 0}
.leaderboard-toolbar button{font:12px var(--mono)}
.leaderboard-grid{display:grid;grid-template-columns:repeat(9,minmax(168px,1fr));overflow-x:auto;gap:7px;padding:8px 0 12px;scrollbar-width:thin}
.leaderboard-column{border:1px solid #4b807369;border-radius:8px;background:#081d25;min-height:190px;overflow:hidden}
.leaderboard-column h3{font:12px var(--mono);text-align:center;color:#a3e6c5;padding:11px 4px;margin:0;border-bottom:1px solid #40655d}
.leaderboard-row{position:relative;display:grid;grid-template-columns:1fr;gap:3px;padding:9px 8px;font:12px var(--mono);border-bottom:1px solid #45685833}
.leaderboard-row>span:first-child{color:#e7f7ec}.leaderboard-row>span:nth-child(2){text-align:right;color:#afd5e2}
.leaderboard-row:nth-child(odd){background:#10413733}.leaderboard-head{font-size:10px;background:#19322e!important}
.leaderboard-empty{font:11px var(--mono)!important;text-align:center;padding:20px 4px;color:#7c9a9e!important}
.score-remove{position:absolute;right:4px;top:4px;padding:0 3px;border:0;color:#ffa0a9;background:#4f2024;font:16px var(--mono)}
.leaderboard-row:has(.score-remove){padding-right:25px}
.leaderboard-submit,.leaderboard-admin{margin-top:14px;border:1px solid #56897470;border-radius:10px;padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.leaderboard-submit label,.leaderboard-admin label{display:flex;flex-direction:column;gap:6px;font:11px var(--mono);flex:1 1 180px}
.leaderboard-submit input,.leaderboard-admin input{height:39px;padding:7px 9px;border-radius:7px;border:1px solid #558b79;background:#06121c;min-width:0;max-width:100%}
#leaderboardQualification{flex-basis:100%;font:13px var(--mono);line-height:1.5;color:#c0dfda}
#leaderboardMessage,#leaderboardAdminMessage{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;color:#d7e8de}
.leaderboard-admin strong{flex-basis:100%;font:13px var(--mono)}
.leaderboard-disclaimer{font-size:11px!important;color:#8ba8aa!important;text-align:center;margin:15px 0 0}
#resultModal .modal-actions{flex-wrap:wrap}
@media(max-width:900px){
 #hawkAlertFrame{margin-right:calc(var(--alert-side) * .25);margin-top:calc(var(--alert-side) * .25);margin-bottom:calc(var(--alert-side) * .25)}
 .highscore-card{width:100%;padding:18px 10px}.leaderboard-grid{grid-template-columns:repeat(9,176px)}
 .leaderboard-submit,.leaderboard-admin{padding:10px}.highscore-card .eyebrow{font-size:9px;padding:0 32px}
}

/* V40: bounded inactivity tint only. Structural panes never blur the forest. */
#app.hud-idle .macro-panel,#app.hud-idle .spectrogram-card,#app.hud-idle .side-control-bar,#app.hud-idle .hawk-alert-frame{filter:grayscale(1) brightness(.66);opacity:.86}
.entry-actions #beginBtn:disabled,.entry-actions #enterFlockBtn:disabled{color:#9aa3a2;background:rgba(65,72,71,.24);border-color:#73817f66;box-shadow:none;opacity:1;filter:grayscale(1)}
/* Reserved desktop slots are sized exactly as the full six-species roster. */
.macro-board{display:grid;grid-template-columns:repeat(var(--roster-cols,11),minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:8px;overflow:hidden}
.species-macro{grid-column:span var(--call-cols,2);grid-template-rows:48px minmax(0,1fr);flex:none;min-width:0}
.macro-slot-empty{visibility:hidden;pointer-events:none}
.macro-species-head{display:flex;gap:5px;padding:4px 5px;min-width:0;align-items:center}
.macro-species-icon{width:23px;height:28px;flex:0 0 23px;object-fit:contain;display:block}
.macro-species-head>div{min-width:0;flex:1}
.macro-species-head strong{font-size:11px;white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.macro-species-head em{font-size:9px;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.call-grid{gap:5px;padding:5px}
/* Timer spans the full artwork width, not the smaller circular click target. */
#hawkAlertFrame{bottom:calc(var(--dock-h) + var(--gap) * 2 + var(--alert-side) * .25 + 46px)}
#hawkAlertFrame .hawk-key{font:9px var(--mono);color:#d8a8ac}
.hawk-timer{position:absolute;left:-25%;top:calc(125% + 6px);width:150%;height:36px;display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:4px 7px;border:1px solid rgba(101,250,159,.36);border-radius:5px;background:rgba(3,18,13,.87);color:#8ffabb;box-shadow:inset 0 0 10px #65fa9f0a;pointer-events:none}
.hawk-timer .timer-caption{font:9px var(--mono);letter-spacing:.08em;line-height:1.05}
.hawk-timer output{font:26px var(--mono);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.04em;text-shadow:0 0 7px #65fa9f60;white-space:nowrap}
.hawk-timer .timer-unit{font:8px var(--mono);align-self:end;padding-bottom:3px}
.hawk-timer[data-status=idle]{color:#7c988c;border-color:#5e917c55}
.hawk-timer[data-status=protected] output{font-size:14px;letter-spacing:.02em}
.hawk-timer[data-status=protected] .timer-unit{visibility:hidden}
.hawk-timer[data-status=held]{border-style:dashed}
@media(max-width:1120px) and (min-width:901px){.macro-species-icon{width:18px;flex-basis:18px;height:23px}.macro-species-head{gap:3px}.macro-species-head strong{font-size:10px}.macro-species-head em{font-size:8px}}
@media(max-width:900px){
 .macro-panel{height:auto;min-height:226px;overflow:visible}
 .macro-board{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:175px;overflow:visible;align-items:stretch}
 .species-macro{grid-column:span 2;flex:none}
 .macro-slot-empty{display:none}
 .macro-species-icon{width:25px;height:29px;flex-basis:25px}
 .macro-species-head strong{font-size:12px}
 .call-grid{grid-auto-columns:minmax(0,1fr);gap:6px;padding:6px}
 #hawkAlertFrame{bottom:auto;margin-bottom:calc(var(--alert-side)*.25 + 48px);margin-top:calc(var(--alert-side)*.25);align-self:flex-end}
 .hawk-timer{height:36px}
 .hawk-timer output{font-size:24px}
}
@media(max-width:560px){.macro-board{grid-template-columns:minmax(0,1fr);grid-auto-rows:175px}.species-macro{grid-column:1}.macro-species-head strong{font-size:13px}.macro-species-head em{font-size:11px}}