:root{--white:#f9f6f0;--green:#124b39;--pink:#fb9697;--ice:#b9dfff}
*{box-sizing:border-box}html,body{margin:0;background:var(--green);color:var(--white);font-family:'DM Mono',monospace}
button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid white;outline-offset:6px}[hidden]{display:none!important}
.game{position:relative;width:100%;height:100svh;min-height:600px;isolation:isolate;overflow:hidden;background:#124b39}
.photos,.photo-shade{position:absolute;inset:0;pointer-events:none}.photos{z-index:-3;overflow:hidden;background:#14573e}.photos img{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;object-position:50% 38%;filter:blur(20px) saturate(.8);transform:scale(1.045);opacity:0;transition:opacity .6s ease,filter .7s ease,transform 2s ease}.photos img.visible{opacity:1}.photo-shade{z-index:-2;background:linear-gradient(120deg,rgba(5,38,27,.78),rgba(15,68,44,.62),rgba(6,34,26,.76));transition:opacity .6s}
#court{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}
.game-nav{position:absolute;top:0;left:0;right:0;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:25px 32px;font-size:14px}.game-nav>span{text-transform:uppercase;letter-spacing:.12em;font-size:13px}.back{width:max-content;border-bottom:1px solid #ffffff80;padding:3px 0}.tools{display:flex;justify-content:flex-end;gap:24px}.tools button{border:0;background:none;color:inherit;padding:5px 0;font-size:14px;white-space:nowrap}
.scores{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .4s}.score{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;width:240px}.score-kaan{left:5vw}.score-you{right:5vw}.score-name{font-family:'Instrument Serif',serif;font-size:clamp(28px,3vw,46px);font-style:italic;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score strong{font-family:'Instrument Serif',serif;font-size:clamp(120px,18vw,250px);line-height:.95;font-weight:400;font-variant-numeric:tabular-nums}
.screen{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(5,32,23,.32);padding:85px 24px;overflow-y:auto}.start-content{width:min(390px,100%);text-align:center}h1,h2{font-family:'Instrument Serif',serif;font-size:clamp(66px,7.5vw,112px);font-weight:400;line-height:.95;letter-spacing:-.03em;margin:0 0 40px;text-shadow:0 4px 30px #07193230}.start-content form{display:flex;flex-direction:column;align-items:center;gap:20px}.start-content label{font-size:14px;line-height:1.5}.start-content input{border:0;border-bottom:1px solid #ffffff80;background:transparent;padding:4px 8px 14px;text-align:center;color:var(--white);font-family:'Instrument Serif',serif;font-size:40px;width:min(280px,100%);border-radius:0;outline-offset:4px}.start-content input::placeholder{color:#ffffff75}.play-button{background:var(--white);color:#123e2b;border:1px solid var(--white);border-radius:999px;padding:15px 38px;min-width:136px;font-size:16px;transition:transform .2s,background .2s}.play-button:hover{transform:scale(1.055);background:#dcefcf}.instruction{font-size:13px;line-height:1.6;margin:26px 0 0;color:#edf6e9}.secondary{display:block;margin:25px auto 0;border:0;border-bottom:1px solid #ffffff75;background:none;color:inherit;padding:3px 0;font-size:14px}.final-score{font-family:'Instrument Serif',serif;font-size:64px;font-weight:400;line-height:1;margin:0 0 36px}
.game-footer{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;gap:20px;padding:25px 32px;font-size:12px;pointer-events:none;color:#edf6e9bf}.touch-instruction{display:none}.point,.countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;text-align:center;pointer-events:none}.point span{font-family:'Instrument Serif',serif;font-size:40px;font-style:italic;display:block;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.point strong{font-family:'Instrument Serif',serif;font-size:clamp(115px,16vw,210px);font-weight:400;line-height:1}.countdown{font-family:'Instrument Serif',serif;font-size:120px}.no-script{position:absolute;inset:0;background:#124b39;z-index:20;display:grid;place-content:center;padding:30px}.game.is-setup .scores{opacity:.28}
@media(pointer:coarse){.mouse-instruction{display:none}.touch-instruction{display:inline}}
@media(max-width:1000px){.score{width:calc(50% - 34px);top:80px;transform:none;align-items:flex-start}.score-kaan{left:22px}.score-you{right:22px;align-items:flex-end}.score-name{font-family:'DM Mono',monospace;font-size:14px;font-style:normal;max-width:100%}.score strong{font-size:70px;line-height:1.1}}
@media(max-width:700px){.game{min-height:580px}.game-nav{padding:20px;font-size:14px;gap:12px}.game-nav>span{font-size:12px;letter-spacing:.03em}.tools{gap:14px}.tools button{font-size:12px}.game-footer{padding:20px;gap:12px;font-size:12px}.game-footer>span:last-child{display:none}.screen{padding:90px 25px 65px}.start-content{width:320px;max-width:100%}h1,h2{font-size:78px;margin-bottom:32px}.point span{font-size:30px}.point strong{font-size:130px}.start-content input{font-size:36px}.instruction{font-size:12px}}
@media(max-height:670px) and (min-width:1001px){.game-nav{padding-top:18px}.game-footer{padding-bottom:18px}.score strong{font-size:150px}h1,h2{font-size:80px;margin-bottom:26px}}
@media(prefers-reduced-motion:reduce){.photos img,.photo-shade,.play-button{transition:none}}
.game.is-setup #court{opacity:.44}
.celebrating .photos img.visible{animation:photo-reveal 2.5s cubic-bezier(.2,.7,.2,1) both}
.celebrating .photo-shade{opacity:.7}
.celebrating .point strong{animation:point-pop 2.5s cubic-bezier(.15,.8,.2,1) both;color:var(--point-color,#fff)}
.celebrating .point span{animation:point-name 2.5s ease both}
.point{text-shadow:0 4px 60px #091b43b0}
.score strong.pulse{animation:score-pulse .65s cubic-bezier(.15,.8,.2,1)}
.is-paused.celebrating .photos img.visible,.is-paused .point strong,.is-paused .point span{animation-play-state:paused}
@keyframes photo-reveal{0%{filter:blur(20px) saturate(.8);transform:scale(1.08)}16%,65%{filter:blur(0) saturate(1.1);transform:scale(1.01)}100%{filter:blur(20px) saturate(.8);transform:scale(1.045)}}
@keyframes point-pop{0%{opacity:0;transform:translateY(30px) scale(.6);filter:blur(9px)}15%,65%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(-30px) scale(1.15);filter:blur(2px)}}
@keyframes point-name{0%,8%{opacity:0;transform:translateY(12px)}22%,65%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes score-pulse{0%{transform:scale(.88);filter:blur(2px)}35%{transform:scale(1.15);color:var(--point-color)}100%{transform:scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.celebrating .photos img.visible{animation:none;filter:blur(0)}.celebrating .point strong,.celebrating .point span,.score strong.pulse{animation:none}}
.start-content label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Compact navigation and a separate, clearly labeled player panel. */
.game-nav{display:flex;justify-content:space-between;padding:18px 32px}.mark{font-weight:500;font-size:1.5rem;letter-spacing:-.08em}.game{min-height:480px}.game-footer{padding:16px 32px}.setup{place-items:center end;padding:80px max(32px,6vw)}.setup .start-content{width:330px;background:#103c2fed;border:1px solid #ffffff35;padding:32px;text-align:left;box-shadow:0 15px 70px #001f1b40}.setup h1{font-size:64px;margin-bottom:30px}.setup form{align-items:stretch;gap:14px}.setup label{position:static;width:auto;height:auto;clip-path:none;overflow:visible;font-size:14px}.setup input{width:100%;text-align:left;font-size:28px;border:1px solid #ffffff70;padding:14px;background:#ffffff0b;border-radius:4px}.setup input::placeholder{color:#ffffff9c}.setup .play-button{margin-top:8px}.setup .instruction{font-size:14px}.game.is-setup .scores{opacity:0}
@media(max-width:1000px){.score{top:65px}.score strong{font-size:54px}.setup{place-items:center;padding:76px 24px}.setup .start-content{width:min(350px,100%)}}
@media(max-width:700px){.game{min-height:480px}.game-nav{padding:14px 20px}.game-footer{padding:12px 20px}.setup .start-content{padding:26px}.setup h1{font-size:60px}.screen{padding-top:70px;padding-bottom:50px}}

.setup h1{font-size:54px;line-height:1.05;padding-bottom:24px;border-bottom:1px solid #ffffff65;margin-bottom:24px}.setup label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.setup input{font-family:"DM Mono",monospace;font-size:16px;padding:16px 12px}.game-footer{justify-content:flex-end}
