:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101c18;color:#f5edda}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 12% 0%,#27483a 0%,transparent 50%),radial-gradient(ellipse at 95% 80%,#33291e 0%,transparent 52%),#101c18}
.grain{pointer-events:none;position:fixed;inset:0;z-index:3;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.app{max-width:1160px;margin:auto;padding:0 24px}
h1,h2,h3,p{margin-top:0}
.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.73rem;font-weight:800;color:#a6b6aa}
.highlight{color:#ecc276}
.topbar{display:flex;align-items:center;gap:13px;padding:23px 0;border-bottom:1px solid #57736145}
.brand-mark{font-size:2.15rem;color:#edc47d;display:grid;place-items:center;width:54px;height:54px;border:2px solid #9a7951;border-radius:16px;transform:rotate(-9deg)}
.topbar .eyebrow{margin:0 0 3px}
.topbar h1{font-weight:1000;letter-spacing:.095em;font-size:1.5rem;line-height:1}.topbar h1 span{color:#edc47d}
.prototype{margin-left:auto;border:1px solid #7c8a6d;padding:9px 12px;border-radius:40px;color:#b4c2ad;font-size:.68rem;font-weight:800;letter-spacing:.14em}
.intro{display:flex;justify-content:space-between;gap:24px;align-items:end;padding:35px 0 27px}
.intro h2{font-size:clamp(2rem,5vw,3.35rem);line-height:1.08;letter-spacing:-.05em;margin:8px 0}
.intro em{font-family:Georgia,serif;font-weight:400;color:#efc37c}
.intro p{max-width:610px;line-height:1.55;color:#c0ccbc;margin-bottom:0}
.mode-controls{display:grid;gap:8px;min-width:230px}
.mode-controls label{font-size:.75rem;color:#a3b7a9;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
button,select,input{font:inherit}button,select{border-radius:11px;padding:12px 16px;font-size:.91rem;cursor:pointer}
select{background:#203a30;color:#f6ead6;border:1px solid #59725e}
button{border:0;font-weight:900}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffd38e;outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed}
.secondary{background:#4a4d37;color:#fff0cf;border:1px solid #696d54}.secondary:hover{background:#61634a}
.match{padding:14px;border:1px solid #725d3d;border-radius:22px;background:linear-gradient(145deg,#312c21,#151d19 38%,#15231d 90%);box-shadow:0 18px 60px #0008,inset 0 0 0 1px #78906a2a}
.scoreboard{display:grid;grid-template-columns:1fr 114px 1fr;align-items:center;gap:9px;padding:4px 6px 17px}
.player{display:flex;align-items:center;gap:13px;border:1px solid #82906a33;background:#f4edd008;padding:11px 13px;border-radius:13px;min-width:0}
.player.active{border-color:#e1b66a;background:#e1b66a19}.player strong{display:block;font-size:1rem}
.player small{display:block;color:#c2caba;margin-top:4px}
.portrait{height:41px;width:41px;border-radius:11px;display:grid;place-items:center;background:#355341;font-size:1.45rem;flex-shrink:0}
.squatch{background:#554531}.player-count{margin-left:auto;font-size:.85rem;color:#e6c991;font-weight:900}
.center-score{text-align:center}.center-score span,.center-score small{display:block;color:#cba978;font-size:.66rem;font-weight:800;letter-spacing:.1em}
.center-score strong{font-size:1.15rem;display:block;color:#f1e0ba}
.table-frame{border:13px solid #69452d;box-shadow:inset 0 0 0 2px #cb955e,0 8px 0 #2d1b14,0 14px 22px #0008;background:#402c1e;border-radius:22px;overflow:hidden}
.table-topline,.table-bottomline{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#d8ae78;font-size:.64rem;font-weight:850;letter-spacing:.17em;background:repeating-linear-gradient(90deg,#3c2519,#4b2c1d 14px,#3c2519 32px)}
#table{display:block;width:100%;height:auto;aspect-ratio:2/1;cursor:crosshair;touch-action:none;background:#155b4d}
.announcer{display:flex;gap:12px;align-items:center;padding:23px 10px 15px;min-height:91px}
.announcer-avatar{width:47px;height:47px;flex-shrink:0;display:grid;place-items:center;font-size:1.6rem;border-radius:50%;background:#56725033;border:1px solid #7e987659}
.announcer .eyebrow{margin:0 0 4px;color:#e6bd7d}.announcer p{margin:0;color:#f2e9d3;font-size:1.03rem}
.control-panel{display:grid;grid-template-columns:1.45fr 1fr 180px;align-items:center;gap:23px;border-radius:14px;background:#09160f99;border:1px solid #94ab7d30;padding:18px}
.aim-help strong{display:block;font-size:1.09rem;color:#f4d192}.aim-help span{color:#c0cbbd;font-size:.87rem;line-height:1.4}
.power label{display:flex;justify-content:space-between;color:#d4b984;font-size:.74rem;font-weight:900;letter-spacing:.1em}
.power output{color:#f6e6c0}.power input{width:100%;margin:14px 0 7px;accent-color:#e3b96d;height:16px;cursor:pointer}
.shoot{background:linear-gradient(#f1cb81,#d89548);color:#252018;box-shadow:0 5px 0 #795328,0 9px 12px #0007;font-weight:1000;letter-spacing:.07em;min-height:51px}
.shoot:not(:disabled):hover{filter:brightness(1.12)}.shoot:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #795328}
.below{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin:25px 0}
.rules-card{border-radius:16px;background:#21342a99;border:1px solid #697a5a64;padding:25px}
.rules-card h3{font-size:1.42rem;margin:6px 0 12px;color:#f9d9a1}.rules-card p{color:#d4d9c9;line-height:1.58}
.rules-card .note{font-size:.79rem;color:#adbda9;margin:14px 0 0}
.log-card ol{padding-left:21px;margin:0;max-height:125px;overflow:auto;color:#d6d5c5;font-size:.9rem;line-height:1.7}
.log-card li:first-child{color:#f2d29a}footer{padding:15px 0 40px;color:#a4b6a7;font-size:.77rem}a{color:#eaca8f}
.modal-backdrop{position:fixed;inset:0;z-index:5;background:#000b;display:grid;place-items:center;padding:18px}
.modal-backdrop[hidden]{display:none}
.result{text-align:center;max-width:410px;width:100%;padding:38px 28px;background:linear-gradient(150deg,#24483a,#19251e);border:2px solid #deb776;border-radius:23px;box-shadow:0 30px 90px #000}
.result-art{font-size:4rem}.result h2{font-size:2rem}.result p{line-height:1.5}.result button{width:100%;margin-top:15px}
@media(max-width:760px){
 .app{padding:0 12px}.topbar{padding:17px 0}.prototype{font-size:.57rem;padding:7px}
 .intro{display:block;padding:25px 4px}.mode-controls{margin-top:21px;grid-template-columns:1fr 1fr;gap:8px}
 .mode-controls label{grid-column:1/-1}.mode-controls select{min-width:0;width:100%;font-size:.8rem}
 .match{padding:7px;border-radius:13px}.scoreboard{grid-template-columns:1fr 51px 1fr;padding:4px 1px 12px;gap:4px}
 .player{padding:8px 5px;gap:5px}.player strong{font-size:.78rem}.player small{font-size:.67rem}.player-count{font-size:.7rem}
 .portrait{width:28px;height:34px;font-size:1.1rem}.center-score span{display:none}.center-score small{font-size:.59rem}
 .table-frame{border-width:6px;border-radius:11px}.table-topline,.table-bottomline{height:15px;padding:0 6px;font-size:.42rem}
 .announcer{padding:14px 7px;min-height:84px}.announcer p{font-size:.91rem}
 .control-panel{grid-template-columns:1fr 125px;gap:12px;padding:13px}.aim-help{grid-column:1/-1}
 .shoot{min-height:50px;font-size:.92rem}.below{grid-template-columns:1fr;gap:12px}.rules-card{padding:19px}
 .brand-mark{width:45px;height:45px}.topbar h1{font-size:1.17rem}.topbar .eyebrow{font-size:.59rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}

/* First-run guidance: prominent but short, including narrow mobile layouts. */
.quickstart{display:flex;align-items:center;flex-wrap:wrap;gap:10px 17px;margin:0 0 16px;padding:15px 19px;border:2px solid #f1c77d;border-radius:15px;background:#3d3320;color:#fff6df;box-shadow:0 6px 22px #0005}
.quickstart strong{color:#ffdb91;font-size:1.03rem;letter-spacing:.035em}
.quickstart span{font-size:1rem;font-weight:700}
.quickstart b{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:5px;border-radius:50%;background:#f1c77d;color:#1c211b}
.quickstart small{flex-basis:100%;font-size:.92rem;color:#f6e4bd}
.aim-help strong{font-size:1.22rem;color:#ffe0a4}
.aim-help span{display:block;margin-top:5px;font-size:1.02rem;line-height:1.5;color:#fff4dd}
.control-panel{border:2px solid #d4aa64;background:#182a20}
@media(max-width:760px){.quickstart{gap:9px 13px;padding:13px}.quickstart strong{flex-basis:100%}.quickstart span{font-size:.91rem}.quickstart small{font-size:.86rem}.aim-help span{font-size:.97rem}}