:root { --ink:#10251d; --cream:#f5f0e5; --paper:#fffdf7; --gold:#e6b84e; --red:#cf4d3f; --sage:#dfe9d8; --line:rgba(16,37,29,.14); --shadow:0 18px 55px rgba(16,37,29,.12); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
.site-header { max-width:1180px; margin:auto; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.11em; font-size:.84rem; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--cream); background:var(--ink); font-size:1.1rem; }
.text-button { border:0; border-bottom:1px solid currentColor; background:none; color:var(--ink); padding:4px 0; cursor:pointer; font:600 .85rem inherit; }
main { width:min(1180px,calc(100% - 64px)); margin:0 auto; position:relative; z-index:1; }
.setup-view { min-height:calc(100vh - 150px); display:grid; grid-template-columns:1fr minmax(440px,520px); align-items:center; gap:8vw; padding:35px 0 80px; }
.eyebrow,.kicker { margin:0 0 14px; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.eyebrow { color:#82785f; }
h1,h2 { font-family:"Fraunces",serif; margin:0; line-height:.98; }
.hero-copy h1 { font-size:clamp(3.2rem,6.2vw,6.1rem); letter-spacing:-.055em; }
.hero-copy h1 em { color:var(--red); font-style:italic; }
.intro { max-width:520px; font-size:1.08rem; line-height:1.7; color:#5c655e; margin:30px 0; }
.card-fan { height:170px; position:relative; width:320px; margin:55px 0 0 50px; }
.playing-card { position:absolute; width:104px; height:145px; border-radius:8px; background:var(--paper); border:1px solid rgba(16,37,29,.2); box-shadow:0 12px 20px rgba(16,37,29,.12); padding:10px; font:800 1.6rem "Fraunces",serif; transform-origin:bottom center; }
.playing-card small { display:block; font-size:1.25rem; }
.playing-card::after { content:""; position:absolute; inset:7px; border:1px solid rgba(16,37,29,.13); border-radius:4px; }
.red { color:var(--red); }.card-one{transform:rotate(-17deg);left:0}.card-two{transform:rotate(-2deg);left:70px;top:-15px}.card-three{transform:rotate(14deg);left:140px;top:1px}
.setup-card,.score-entry-panel,.leaderboard-panel,.score-sheet-panel { background:rgba(255,253,247,.88); border:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow); }
.setup-card { padding:38px; border-radius:3px; }
.form-heading,.panel-heading { display:flex; gap:15px; align-items:center; justify-content:space-between; }
.form-heading { justify-content:flex-start; margin-bottom:26px; }
.step-badge { width:38px; height:38px; display:grid; place-items:center; background:var(--gold); border-radius:50%; font-weight:800; }
.kicker { margin-bottom:6px; color:var(--red); font-size:.65rem; }
h2 { font-size:1.85rem; }
.player-row { display:flex; gap:10px; margin:10px 0; }
.player-number { width:36px; display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:800; color:#887f6c; }
input[type="text"],input[type="number"] { width:100%; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:600 1rem "DM Sans",sans-serif; outline:0; }
input[type="text"] { padding:14px 15px; }
input:focus { border-color:#61806f; box-shadow:0 0 0 3px rgba(97,128,111,.13); }
.remove-player { width:40px; flex:none; border:0; background:transparent; color:#aa9d85; font-size:1.15rem; cursor:pointer; }
.remove-player:hover { color:var(--red); }
.add-player { margin:12px 0 26px 46px; border:0; background:transparent; color:var(--ink); font:700 .85rem inherit; cursor:pointer; }.add-player span{color:var(--red);font-size:1rem}
.round-control { padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.round-control label { font:700 1rem "Fraunces",serif; }.round-control p{font-size:.75rem;color:#887f6c;margin:4px 0 0}
.stepper { display:flex; align-items:center; background:var(--sage); border-radius:30px; overflow:hidden; }.stepper button{border:0;background:transparent;width:38px;height:38px;font-size:1.1rem;cursor:pointer;color:var(--ink)}.stepper output{font-weight:800;width:30px;text-align:center}.stepper input{position:absolute;opacity:0;pointer-events:none}
.rule-note { display:flex; gap:12px; align-items:center; margin:22px 0; color:#59665e; font-size:.78rem; line-height:1.45; }.rule-note span{background:var(--sage);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#42604e;font-weight:800}.rule-note p{margin:0}.rule-note strong{color:var(--ink)}
.primary-button { width:100%; border:0; border-radius:3px; padding:16px 20px; background:var(--ink); color:#fffdf7; cursor:pointer; font:700 .92rem "DM Sans",sans-serif; display:flex; justify-content:center; gap:14px; align-items:center; transition:transform .18s,box-shadow .18s; }.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,37,29,.2)}.primary-button span{color:var(--gold);font-size:1.2rem}
.form-error { min-height:18px; color:var(--red); font-size:.78rem; margin:0 0 8px; }
.hidden { display:none!important; }
footer { text-align:center; padding:25px; color:#998e76; font-size:.72rem; letter-spacing:.08em; }footer span{margin:0 10px;color:var(--red)}
/* game */
.game-view { padding:40px 0 80px; }.game-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.game-heading h1{font-size:3.6rem}.game-heading h1 small{font:500 1rem "DM Sans",sans-serif;color:#887f6c;letter-spacing:0}.progress-wrap{width:260px;height:5px;background:#ded8c9}.progress-bar{height:100%;background:var(--red);transition:width .3s}
.game-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}.score-entry-panel,.leaderboard-panel{border-radius:4px;padding:30px}.panel-heading{padding-bottom:22px;border-bottom:1px solid var(--line)}.panel-heading>p{font-size:.72rem;color:#887f6c}.trophy{font-size:1.6rem;color:var(--gold)}
.entry-head,.entry-row{display:grid;grid-template-columns:minmax(120px,1fr) 95px 95px 80px;gap:12px;align-items:center}.entry-head{padding:18px 0 8px;color:#8a806c;font-size:.65rem;font-weight:800;letter-spacing:.12em}.entry-row{padding:9px 0;border-bottom:1px solid rgba(16,37,29,.07)}.entry-player{font-weight:700}.entry-player small{display:block;font-weight:500;color:#9a907b;font-size:.68rem}.entry-row input{text-align:center;padding:11px 5px}.round-points{font-family:"Fraunces",serif;font-weight:800;text-align:center;font-size:1.1rem}.round-points.hit{color:#46704f}.round-points.miss{color:var(--red)}.round-summary{background:var(--sage);padding:12px;text-align:center;font-size:.75rem;margin:20px 0 12px;border-radius:3px}
.leaderboard{padding:10px 0;margin:0;list-style:none}.leaderboard li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;padding:15px 5px;border-bottom:1px solid var(--line)}.rank{font:800 1.1rem "Fraunces",serif;color:#9a907b}.rank.first{color:var(--gold)}.leader-name{font-weight:700}.leader-name small{display:block;color:#9a907b;font-weight:500;font-size:.68rem;margin-top:2px}.leader-score{font:800 1.5rem "Fraunces",serif}.scoring-reminder{font-size:.68rem;line-height:1.6;color:#8a806c;margin:18px 0 0}
.score-sheet-panel{margin-top:22px;padding:0 30px;border-radius:4px}.sheet-toggle{border:0;background:transparent;width:100%;padding:22px 0;display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--ink);cursor:pointer}.sheet-toggle strong{font:700 1rem "Fraunces",serif}.sheet-toggle .kicker{display:block}.sheet-scroll{overflow-x:auto;padding-bottom:25px}table{border-collapse:collapse;width:100%;font-size:.75rem}th,td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--line)}th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--paper)}th{color:#887f6c;font-size:.65rem;text-transform:uppercase}
/* winner */
.winner-view{text-align:center;max-width:720px;margin:50px auto 100px}.winner-crown{font-size:4rem;color:var(--gold);line-height:1}.winner-view h1{font-size:clamp(3.5rem,8vw,6rem);margin:15px 0}.winner-view>p:not(.eyebrow){color:#746b5a}.final-board{background:var(--paper);box-shadow:var(--shadow);padding:15px 30px;margin:35px auto;max-width:500px}.final-row{display:grid;grid-template-columns:40px 1fr auto;text-align:left;align-items:center;padding:15px 5px;border-bottom:1px solid var(--line)}.final-row:last-child{border:0}.final-row strong:last-child{font:800 1.4rem "Fraunces",serif}.compact{max-width:220px;margin:auto}
@media(max-width:850px){main{width:min(100% - 32px,650px)}.site-header{padding:20px 18px}.setup-view{grid-template-columns:1fr;padding-top:30px}.hero-copy{text-align:center}.intro{margin:24px auto}.card-fan{display:none}.setup-card{padding:25px 20px}.game-heading{display:block}.progress-wrap{width:100%;margin-top:25px}.game-layout{grid-template-columns:1fr}.game-heading h1{font-size:2.8rem}}
@media(max-width:520px){.hero-copy h1{font-size:3.3rem}.entry-head,.entry-row{grid-template-columns:minmax(90px,1fr) 65px 65px 52px;gap:7px}.score-entry-panel,.leaderboard-panel{padding:22px 15px}.entry-head{font-size:.58rem}.entry-row input{padding:10px 2px}.round-points{font-size:.95rem}.score-sheet-panel{padding:0 18px}.round-control{align-items:flex-start;flex-direction:column}.stepper{align-self:flex-end;margin-top:-50px}}