@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;600;700;800&display=swap');
:root{--ink:#07112b;--navy:#19345f;--blue:#2196f3;--green:#23c322;--gold:#f6a800;--purple:#7b31ef;--line:#dbe1e9;--paper:#f6f8fb}*{box-sizing:border-box}body{margin:0;background:#eef1f6;color:var(--ink);font-family:Inter,Arial,sans-serif}.hidden{display:none!important}button{font:inherit}.demo-bar{height:70px;background:#07112b;color:#fff;display:flex;align-items:center;padding:0 3vw;gap:32px;position:sticky;top:0;z-index:20;box-shadow:0 4px 20px #07112b33}.brand{text-decoration:none;font-size:20px;font-weight:900;font-style:italic}.brand span{color:#6545ff}.brand em{color:#31c722}.demo-bar nav{display:flex;gap:6px;margin:auto}.view-tab,.reset-button{border:0;background:transparent;color:#aeb8ca;font-weight:800;font-size:13px;padding:10px 16px;border-radius:8px;cursor:pointer}.view-tab.active{background:#ffffff16;color:#fff}.reset-button{border:1px solid #ffffff26;color:#fff}
.game-stage{min-height:calc(100vh - 70px);display:grid;grid-template-columns:minmax(360px,470px) minmax(360px,560px);justify-content:center;align-items:center;gap:7vw;padding:30px}.phone-shell{width:min(430px,94vw);aspect-ratio:853/1847;background:#050505;border:8px solid #151515;border-radius:54px;box-shadow:0 28px 70px #17244644;overflow:hidden;margin:auto}.phone-screen{height:100%;position:relative;overflow:hidden;background:#fff;color:var(--ink);padding:0 24px}.phone-screen:before{content:"";position:absolute;left:34px;right:34px;top:435px;height:580px;background:linear-gradient(90deg,transparent 49.5%,#e7ebf0 50%,transparent 50.5%),repeating-linear-gradient(180deg,#e8ecf155 0 1px,transparent 1px 58px);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);opacity:.8}.ios-bar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:13px;position:relative;z-index:2}.island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:118px;height:33px;border-radius:22px;background:#050505}.app-header{height:80px;display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}.app-logo{display:flex;flex-direction:column;transform:skew(-7deg);padding-left:3px}.app-logo strong{font-size:31px;line-height:1;color:#5b38ff;font-weight:900;font-style:italic;letter-spacing:-2px}.app-logo strong span{color:#2dca20}.app-logo small{font-weight:800;color:#149af4;font-size:13px;margin-left:13px}.header-icons{display:flex;gap:13px}.header-icons button{border:0;background:transparent;font-size:23px;color:#07112b;padding:0}.scoreboard{height:82px;border:1px solid #e0e5ec;border-radius:18px;box-shadow:0 8px 18px #13234612;display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:2;background:#fff}.scoreboard>div{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.scoreboard>div+div:before{content:"";position:absolute;left:0;height:54px;border-left:1px solid #d9dee6}.scoreboard span{font:600 14px 'Barlow Condensed';color:#3c567e}.scoreboard strong{font:600 27px 'Barlow Condensed';margin-top:4px}.scoreboard strong small{font-size:17px;font-weight:500}.scoreboard b{color:#ff4d00}.scoreboard i{position:absolute;bottom:8px;width:25px;height:3px;border-radius:3px;background:var(--green)}.team-heading{height:68px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.team-heading div{display:flex;align-items:center;gap:9px;color:#28466f;font:600 16px 'Barlow Condensed'}.team-heading i{width:9px;height:9px;border-radius:50%;background:var(--green)}.team-heading span{color:#16a81c;margin-left:10px}.team-heading button,.active-boosts header button{border:0;background:transparent;color:#0756ed;font-size:13px}.roster{height:432px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:12px 10px;align-items:center;position:relative;z-index:2}.player{height:127px;border:1.5px solid #cbd2dc;border-radius:11px;background:linear-gradient(#fff,#f6f8fa);display:flex;flex-direction:column;align-items:center;overflow:hidden;box-shadow:0 4px 10px #1627470d;transition:.2s}.player.qb{grid-column:2/4;width:50%;justify-self:center}.card-top{width:100%;height:24px;padding:7px 8px 0;display:flex;justify-content:space-between;font:700 15px 'Barlow Condensed'}.card-top b{font-size:18px;line-height:1}.portrait{border:0;background:transparent;padding:0;width:68px;height:65px;display:grid;place-items:end center;cursor:default}.portrait span{width:56px;height:56px;border-radius:50% 50% 42% 42%;display:grid;place-items:center;background:linear-gradient(145deg,#1c3153,#8798ae);color:#fff;font-weight:800;font-size:15px;box-shadow:inset 0 -10px 15px #ffffff22}.player-name{font:600 14px 'Barlow Condensed';white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.player-status{font:600 12px 'Barlow Condensed';margin-top:3px}.state-pregame,.state-final{color:#4e5968;filter:grayscale(.9);background:linear-gradient(#fff,#f1f3f5)}.state-live{border-color:var(--blue);box-shadow:0 5px 14px #2196f32c}.state-live .card-top,.state-live .player-status{color:#0878ea}.state-available{border-color:var(--green);box-shadow:0 0 13px #34d62972;background:linear-gradient(#fff,#edffea)}.state-available .card-top,.state-available .player-status{color:#129d13}.state-available .portrait{cursor:pointer}.state-available:hover{transform:translateY(-2px)}.state-boosted{border-color:var(--gold);box-shadow:0 0 14px #f6a80055;background:linear-gradient(#fff,#fff9e9)}.state-boosted .card-top,.state-boosted .player-status{color:#e77d00}.player:nth-child(9){border-color:var(--purple);box-shadow:0 0 14px #7b31ef55}.player:nth-child(9) .card-top,.player:nth-child(9) .player-status{color:var(--purple)}
.active-boosts{height:88px;border:1px solid #e0e5ec;border-radius:13px;background:#fff;position:relative;z-index:2;box-shadow:0 5px 14px #17294a0c}.active-boosts header{height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 14px}.active-boosts header strong{font:600 14px 'Barlow Condensed';color:#3b557b}.boost-summary{height:52px;border-top:1px solid #e5e9ef;display:grid;grid-template-columns:48px 1.5fr .8fr .8fr;align-items:center;padding:4px 12px;gap:9px}.boost-badge{width:34px;height:34px;border:1px solid var(--gold);border-radius:6px;display:grid;place-items:center;color:#d78100;font:700 22px 'Barlow Condensed'}.boost-summary div,.boost-summary b,.boost-summary em{display:flex;flex-direction:column;font-style:normal}.boost-summary div strong{font:600 14px 'Barlow Condensed'}.boost-summary small{font:600 10px 'Barlow Condensed';color:#4f6589}.boost-summary b{font-size:24px;color:var(--gold);border-left:1px solid #e0e5ec;align-items:center}.boost-summary em{font:500 17px 'Barlow Condensed';color:#4d6386;border-left:1px solid #e0e5ec;align-items:center}.last-play{height:72px;border:1px solid #e0e5ec;border-radius:13px;background:#fff;margin-top:9px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;box-shadow:0 5px 14px #17294a0c}.last-play div{display:flex;flex-direction:column}.last-play span{font:500 12px 'Barlow Condensed';margin-bottom:5px}.last-play strong{font:500 13px 'Barlow Condensed'}.last-play small{font:500 12px 'Barlow Condensed';color:#16ad1b}.last-play>b{font:600 30px 'Barlow Condensed';color:#1db71d}.app-nav{height:72px;margin:10px -24px 0;border-top:1px solid #e1e5eb;display:grid;grid-template-columns:repeat(5,1fr);position:relative;z-index:2;background:#fff}.app-nav button{border:0;background:transparent;color:#3d577d;font:600 10px 'Barlow Condensed';display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.app-nav button span{font-size:18px}.app-nav button.active{color:#111}.app-nav button.active:after{content:"";height:3px;width:26px;background:var(--green);border-radius:2px}.event-toast{position:absolute;z-index:8;top:155px;left:50%;transform:translate(-50%,-15px);background:#07112b;color:#fff;padding:10px 17px;border-radius:28px;font-weight:900;opacity:0;transition:.25s;white-space:nowrap;box-shadow:0 8px 22px #0004}.event-toast.show{opacity:1;transform:translate(-50%,0)}
.game-help .eyebrow,.director-heading .eyebrow{font-weight:900;letter-spacing:2px;color:#3d52d9;font-size:12px}.game-help h1{font-size:49px;line-height:1.04;margin:12px 0 22px;letter-spacing:-2px}.game-help h1 span{color:#28b823}.game-help>p:not(.eyebrow){font-size:17px;line-height:1.65;color:#586174}.state-key{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.state-key span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800}.key-dot{width:18px;height:18px;border-radius:5px}.key-dot.pregame{background:#aaa}.key-dot.live{background:var(--blue)}.key-dot.available{background:var(--green)}.key-dot.boosted{background:var(--gold)}.primary-action{border:0;border-radius:10px;background:#07112b;color:white;padding:15px 22px;font-weight:900;cursor:pointer}
.director-view{max-width:1360px;margin:auto;padding:48px 40px 80px}.director-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}.director-heading h1{font-size:45px;margin:4px 0}.director-heading p{color:#706d7e;margin:0;max-width:610px}.live-pill{background:#e5f9ed;color:#178246;border-radius:30px;padding:10px 15px;font-weight:900;font-size:12px}.live-pill span{display:inline-block;width:8px;height:8px;background:#20cb63;border-radius:50%;margin-right:7px}.director-grid{display:grid;grid-template-columns:1.2fr .9fr .75fr;gap:18px}.control-card{background:white;border-radius:16px;padding:23px;box-shadow:0 6px 20px #2219440d}.scenario-card{grid-row:span 2}.log-card{grid-column:2/4}.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.card-heading>div{display:flex;align-items:center;gap:10px}.card-heading span{font-size:10px;font-weight:900;color:#3b52c8;background:#eef0ff;padding:6px;border-radius:6px}.card-heading h2{font-size:17px;margin:0}.card-heading p{font-size:11px;color:#148047;font-weight:800}.card-heading button{border:0;background:transparent;color:#777;cursor:pointer}.scenario-steps{display:flex;flex-direction:column;gap:10px}.scenario-steps button{display:flex;text-align:left;gap:12px;padding:15px;border:1px solid #eceaf2;background:#fafafd;border-radius:10px;cursor:pointer}.scenario-steps button:hover{border-color:#28b823;background:#f2fff2}.scenario-steps b{width:27px;height:27px;display:grid;place-items:center;background:#e9f9e9;color:#179a18;border-radius:50%}.scenario-steps span{display:flex;flex-direction:column;gap:3px}.scenario-steps small{color:#858292}.team-controls{display:flex;flex-direction:column;gap:9px}.team-row{display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;border-bottom:1px solid #eee;padding-bottom:9px}.team-row strong{font-size:12px}.team-actions{display:flex;gap:5px}.team-actions button{border:1px solid #dedbe9;background:white;border-radius:6px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}.team-actions button.active{background:#19345f;color:#fff;border-color:#19345f}.scoring-card label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;color:#777;margin-bottom:14px}.scoring-card select,.scoring-card input{border:1px solid #dedbe9;border-radius:8px;padding:11px;background:white}.scoring-card .primary-action{width:100%}.score-preview{margin-top:16px;border-radius:10px;background:#f1f4f9;padding:14px;display:grid}.score-preview span,.score-preview small{font-size:10px;color:#777}.score-preview strong{font-size:24px}.log-card ol{max-height:180px;overflow:auto;margin:0;padding:0;list-style:none}.log-card li{display:grid;grid-template-columns:64px 1fr;gap:12px;border-bottom:1px solid #eee;padding:9px 0;font-size:12px}.log-card time{color:#9895a4}.empty-log{color:#888}
@media(max-width:900px){.game-stage{grid-template-columns:1fr;padding:24px}.game-help{max-width:600px;margin:auto}.director-grid{grid-template-columns:1fr 1fr}.scenario-card{grid-row:auto;grid-column:1/3}.log-card{grid-column:1/3}}@media(max-width:600px){.demo-bar{height:58px;padding:0 12px;gap:8px}.brand{font-size:14px}.demo-bar nav{margin-left:auto}.view-tab{padding:8px;font-size:11px}.reset-button{display:none}.game-stage{padding:12px 0}.phone-shell{width:min(430px,100vw);border-radius:0;border:0}.game-help{padding:28px 22px}.game-help h1{font-size:38px}.director-view{padding:28px 14px}.director-heading{align-items:flex-start;gap:20px}.director-heading h1{font-size:35px}.director-grid{display:flex;flex-direction:column}}

/* Enhanced gameplay-state hierarchy approved for the filled-card demo. */
.login-overlay{position:fixed;inset:0;z-index:1000;background:linear-gradient(145deg,#08142d,#263d77);display:grid;place-items:center;padding:24px}.login-overlay.hidden{display:none}.login-card{width:min(390px,100%);background:#fff;border-radius:22px;padding:34px;box-shadow:0 30px 90px #0007;display:flex;flex-direction:column;gap:16px}.login-logo{font-size:30px;font-weight:950;font-style:italic;letter-spacing:-2px}.login-logo span{color:#5b38ff}.login-logo em{color:#2dca20}.login-card>p{margin:-8px 0 4px;color:#64718a}.login-card label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:850;color:#34415b}.login-card input{border:1px solid #d5dbea;border-radius:10px;padding:13px;font:inherit}.login-card button{border:0;border-radius:10px;padding:14px;background:#0b1834;color:#fff;font-weight:900;cursor:pointer}.login-card .local-mode{background:#eef1f7;color:#42506a}.login-card small{min-height:18px;color:#d33232;font-weight:700}.connection-status{margin-left:auto;font-size:11px;font-weight:850;padding:7px 10px;border-radius:20px;background:#eef1f7;color:#68738a}.connection-status[data-tone="connected"]{background:#e1f8e7;color:#168340}.connection-status[data-tone="warning"]{background:#fff0d9;color:#a45c00}.disconnect-button{border:0;background:transparent;color:#536079;font-size:11px;font-weight:800;cursor:pointer}body[data-demo-role="user"] [data-view="director"],body[data-demo-role="user"] #resetButton,body[data-site-role="user"] [data-view="director"],body[data-site-role="user"] #resetButton,body[data-site-role="user"] #openDirector{display:none}
.player.state-pregame,.player.state-final{color:#3f4855;filter:grayscale(1) brightness(.82);background:linear-gradient(#f7f8f9,#dfe3e7);border-color:#9aa3ad;box-shadow:0 4px 12px #26334126}
.player.state-live{background:linear-gradient(#f5fbff,#e2f1ff);border:2px solid #1685f8;box-shadow:0 4px 14px #1685f85c}
.player.state-live .card-top,.player.state-live .player-status{color:#0069d9}
.player.state-available{background:linear-gradient(#f4fff1,#ddfad5);border:2px solid #24c51c;box-shadow:0 4px 15px #24c51c6b}
.player.state-available .card-top,.player.state-available .player-status{color:#118a12}
.player.state-boosted{background:linear-gradient(#fffaf0,#ffe9ad);border:2px solid #f2a400;box-shadow:0 4px 16px 1px #f2a4007a}
.player.state-boosted .card-top,.player.state-boosted .player-status{color:#c96a00}