@font-face{font-family:Commissioner;font-style:normal;font-weight:400 900;font-display:block;src:url(../fonts/commissioner-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400 900;font-display:block;src:url(../fonts/commissioner-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--green:#006633;--green-d:#004d26;--lime:#5BAB26;--ink:#1d2b22;--muted:#5d6b62;--red:#E0342B}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0d140f;font-family:Commissioner,system-ui,sans-serif;color:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
img{-webkit-user-drag:none;user-select:none}

/* 1080x1920 logical stage, scaled to fit the window */
#stage{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden;background:#e9e5dc}
#bg{position:absolute;inset:0;background:url(../img/background.webp) center/cover}
#cv{position:absolute;left:0;top:0;width:1080px;height:1920px;touch-action:none}

.screen{position:absolute;inset:0;display:none;opacity:0;transition:opacity .35s ease}
.screen.on{display:block}
.screen.vis{opacity:1}
.screen.soft::before{content:"";position:absolute;inset:-40px;background:url(../img/background.webp) center/cover;filter:blur(14px) saturate(1.1)}
.screen.soft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.45))}
.screen.soft>*{z-index:1}
.screen.passthrough{pointer-events:none}
.screen>*{position:absolute}

.logo-top{left:50%;transform:translateX(-50%);top:15px;width:432px}
.logo-top.sm{top:30px;width:300px}
.head{left:0;right:0;top:200px;text-align:center}
.head h1{font-size:76px;font-weight:900;color:var(--green);line-height:1.04}
.head p{font-size:36px;font-weight:500;color:#2b3a30;line-height:1.35;margin-top:10px}
.head b{color:var(--green)}
.card{background:#fff;border-radius:44px;box-shadow:0 20px 50px rgba(0,40,20,.18)}

.btn{left:50%;transform:translateX(-50%);height:150px;min-width:620px;padding:0 60px;border-radius:80px;background:linear-gradient(180deg,#72c436,#4a9a1c);
  box-shadow:0 12px 0 #2f6e0e,0 26px 40px rgba(0,60,20,.35);color:#fff;font-weight:900;font-size:56px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:24px;white-space:nowrap}
.btn svg{width:46px;height:46px}
.btn.dark{background:linear-gradient(180deg,#0a7a3f,#005a2c);box-shadow:0 12px 0 #003a1c,0 26px 40px rgba(0,40,20,.35)}
.btn:active{transform:translateX(-50%) translateY(8px);box-shadow:0 4px 0 #2f6e0e,0 14px 24px rgba(0,60,20,.35)}
.btn.dark:active{box-shadow:0 4px 0 #003a1c,0 14px 24px rgba(0,40,20,.35)}
.autonote{left:0;right:0;text-align:center;font-size:30px;color:var(--muted);font-weight:600}

/* ---------- attract ---------- */
#s-attract .glow{left:-120px;top:260px;width:1320px;height:1100px;background:radial-gradient(ellipse at center,rgba(255,255,255,.7),rgba(255,255,255,0) 65%)}
.attract-hero{left:0;top:0;width:1080px;height:1400px}
.attract-hero>*{position:absolute}
.game-logo{left:95px;top:250px;width:890px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.22));transition:opacity .6s,transform .6s}
.attract-lb{left:110px;top:330px;width:860px;padding:44px 0 30px;opacity:0;transform:scale(.92);transition:opacity .6s,transform .6s;pointer-events:none}
.attract-lb .lb{position:relative;left:auto;width:auto;margin:0 40px}
#s-attract.show-lb .game-logo{opacity:0;transform:scale(.92)}
#s-attract.show-lb .attract-lb{opacity:1;transform:none}
.startbtn{left:50%;transform:translateX(-50%);top:1440px;width:350px;height:105px;border-radius:55px;background:#0f1a12;padding:6px;box-shadow:0 12px 24px rgba(0,0,0,.3);animation:pulse 1.6s ease-in-out infinite}
.startbtn .in{height:100%;border-radius:50px;background:linear-gradient(180deg,#3fd06a 0%,#12a043 48%,#0a8a36 100%);display:flex;align-items:center;gap:22px;padding:0 40px 0 6px;position:relative;overflow:hidden;box-shadow:inset 0 4px 8px rgba(255,255,255,.35),inset 0 -8px 12px rgba(0,60,20,.4)}
.startbtn .in::after{content:"";position:absolute;left:20px;right:20px;top:4px;height:42%;border-radius:40px;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0))}
.startbtn .play{flex:0 0 81px;height:81px;border-radius:50%;border:5px solid #fff;background:radial-gradient(circle at 40% 35%,#86e6a0,#2fb85a);display:flex;align-items:center;justify-content:center}
.startbtn .play svg{width:40px;height:40px}
.startbtn .lbl{font-size:52px;font-weight:600;color:#fff;text-shadow:0 3px 6px rgba(0,60,20,.35)}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
.tap-hint{left:0;right:0;top:1575px;text-align:center;font-size:32px;font-weight:700;color:var(--green-d)}
.prize{left:60px;right:60px;top:1730px;height:130px;border-radius:40px;background:rgba(0,102,51,.94);display:flex;align-items:center;gap:28px;padding:0 44px;color:#fff;font-size:44px;font-weight:600}
.prize svg{width:64px;height:64px;flex:0 0 64px}
.prize b{color:#b8f08a}

/* ---------- registration ---------- */
.close{left:40px;top:40px;width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:0 10px 30px rgba(0,40,20,.18);display:flex;align-items:center;justify-content:center}
.close svg{width:44px;height:44px}
#s-register .head h1{font-size:72px}
#s-register .head p{font-size:34px}
.form{left:50px;right:50px;top:370px;padding:40px 44px}
.row2{display:flex;gap:28px}
.row2 .field{flex:1;min-width:0}
.field{margin-bottom:20px}
.field label{display:block;font-size:28px;font-weight:700;color:var(--green);margin:0 0 10px 8px}
.field input{width:100%;height:96px;border-radius:24px;border:3px solid #d7ddd3;background:#f7f9f5;font:500 38px Commissioner,sans-serif;padding:0 28px;color:var(--ink);outline:none;caret-color:var(--green)}
.field input:focus{border:5px solid var(--lime);background:#fff;box-shadow:0 0 0 10px rgba(91,171,38,.18);padding:0 26px}
.field input::placeholder{color:#a3ada6}
.field em,.chk-err{display:block;min-height:0;font-style:normal;font-size:24px;font-weight:600;color:var(--red);margin:6px 0 0 8px}
.field em:empty,.chk-err:empty{display:none}
.field.err input{border-color:var(--red);background:#fff6f5}
.phone{display:flex;align-items:center;gap:0}
.phone span{height:96px;display:flex;align-items:center;padding:0 22px;font-size:38px;font-weight:600;color:var(--ink);background:#eef2eb;border-radius:24px 0 0 24px;border:3px solid #d7ddd3;border-right:0}
.phone input{border-radius:0 24px 24px 0}
.checks{margin-top:26px}
.chk{display:flex;gap:22px;align-items:flex-start;font-size:29px;line-height:1.3;color:#2b3a30;margin-bottom:20px}
.chk .box{flex:0 0 52px;height:52px;border-radius:14px;border:3px solid #b9c4bb;background:#fff;display:flex;align-items:center;justify-content:center}
.chk.on .box{background:var(--lime);border-color:var(--lime)}
.chk.on .box::after{content:"";width:14px;height:26px;border:solid #fff;border-width:0 6px 6px 0;transform:translateY(-3px) rotate(45deg)}
.chk.err .box{border-color:var(--red)}
.chk u{color:var(--green);font-weight:700;text-decoration-thickness:2px}
.form .btn{position:relative;left:auto;transform:none;margin:22px auto 0;height:120px;font-size:48px}
.form .btn:active{transform:translateY(8px)}

.kb{left:0;right:0;bottom:0;height:560px;background:#dfe6da;border-radius:40px 40px 0 0;padding:24px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 30px rgba(0,0,0,.1);transition:transform .25s ease;z-index:2}
.kb.off{transform:translateY(100%)}
.kb .r{display:flex;gap:12px;justify-content:center;flex:1}
.kb .k{flex:0 0 92px;background:#fff;border-radius:16px;box-shadow:0 5px 0 #b7c2b2;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:600;color:var(--ink)}
.kb .k:active,.kb .k.down{transform:translateY(4px);box-shadow:0 1px 0 #b7c2b2;background:#eef6e6}
.kb .k.w{flex:0 0 150px;font-size:30px;font-weight:700}
.kb .k.sp{flex:1}
.kb .k.alt{background:#c8d3c3;box-shadow:0 5px 0 #a3b09e}
.kb .k.on{background:var(--green);color:#fff;box-shadow:0 5px 0 #003a1c}
.kb .k.go{flex:0 0 240px;background:var(--lime);color:#fff;box-shadow:0 5px 0 #3d7d16;font-size:32px;font-weight:800}
.kb.numpad .k{flex:0 0 300px;font-size:52px}
.kb.numpad .k.go{flex:0 0 300px}

.modal{inset:0;z-index:5 !important;background:rgba(0,30,15,.55);display:none;align-items:center;justify-content:center}
.modal.on{display:flex}
.modal-card{width:940px;max-height:1500px;background:#fff;border-radius:44px;padding:50px;display:flex;flex-direction:column;gap:30px}
.modal-card h2{font-size:52px;font-weight:900;color:var(--green)}
.modal-body{flex:1;overflow:auto;font-size:30px;line-height:1.5;color:#2b3a30;touch-action:pan-y}
.modal-body p{margin-bottom:18px}
.modal-card .btn{position:relative;left:auto;transform:none;margin:0 auto;height:120px}

/* ---------- how to ---------- */
.howto-title{left:50%;top:20px;width:360px;transform:translateX(-50%)}
.howto-head{top:262px}
.howto-head p{font-size:34px}
.hcard{left:60px;width:960px;height:300px;background:#fff;border-radius:44px;box-shadow:0 18px 44px rgba(0,40,20,.16);overflow:hidden}
.hcard>*{position:absolute}
.hcard .pic{left:0;top:0;width:300px;height:300px;background:linear-gradient(135deg,#eef6e6,#dcebd0);overflow:hidden}
.hcard .pic img{position:absolute}
.hcard .swipe{position:absolute;left:150px;top:150px;width:130px;height:130px;fill:#fff;stroke:#006633;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-90px,-70px) rotate(-12deg)}}
.hcard .txt{left:340px;top:44px;right:40px}
.hcard h3{font-size:50px;font-weight:900;color:var(--green);margin-bottom:10px}
.hcard p{font-size:31px;line-height:1.35;color:#2b3a30}
.badge{display:inline-block;margin-top:16px;font-size:28px;font-weight:800;padding:8px 22px;border-radius:30px;background:#e7f4dc;color:#3d7d16}
.num{left:22px;top:22px;width:62px;height:62px;border-radius:50%;background:var(--green);color:#fff;font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;z-index:3}
.btn.go{top:1510px}
#s-howto .autonote{top:1720px}

/* bowl composite (native 1080x1920 frame, visible bowl ≈ x175–918, y1280–1660) */
.bowlc{position:absolute;overflow:visible}
.bowlc .fr{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0}
.bowlc .fr img{position:absolute}
.bowlc .fr .b{left:0;top:524px;width:1080px;-webkit-mask-image:radial-gradient(ellipse 48% 30% at 50% 66%,#000 85%,transparent 100%);mask-image:radial-gradient(ellipse 48% 30% at 50% 66%,#000 85%,transparent 100%)}
.bowlmini{position:absolute;left:17px;top:72px}

/* ---------- countdown / game ---------- */
#hud{position:absolute;inset:0;pointer-events:none;display:none}
body.playing #hud{display:block}
#hud>*{position:absolute}
.hud-score{left:40px;top:40px;width:310px;height:140px;border-radius:36px;background:rgba(255,255,255,.93);box-shadow:0 10px 30px rgba(0,40,20,.2);padding:18px 30px}
.hud-score small{display:block;font-size:26px;font-weight:800;letter-spacing:.16em;color:var(--lime)}
.hud-score b{display:block;font-size:66px;font-weight:900;color:var(--green);line-height:1}
.hud-score.bump b{animation:bump .25s ease}
@keyframes bump{50%{transform:scale(1.18)}}
.hud-logo{left:390px;top:26px;width:300px}
.hud-time{right:40px;top:30px;width:170px;height:170px;border-radius:50%;padding:14px;box-shadow:0 10px 30px rgba(0,40,20,.2);background:conic-gradient(var(--lime) 360deg,rgba(255,255,255,.6) 0)}
.hud-time .in{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hud-time b{font-size:52px;font-weight:900;color:var(--green);line-height:1}
.hud-time small{font-size:20px;font-weight:700;color:var(--muted);letter-spacing:.1em}
.hud-time.low b{color:var(--red)}

#s-countdown{background:radial-gradient(ellipse at 50% 45%,rgba(0,50,25,.35),rgba(0,35,18,.72))}
.cd-name{left:0;right:0;top:560px;text-align:center;font-size:64px;font-weight:800;color:#fff}
.cd-ring{left:310px;top:700px;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.2);padding:22px}
.cd-num{width:100%;height:100%;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:300px;font-weight:900;color:#fff;line-height:1}
.cd-num.go{font-size:150px}
.cd-num.pop{animation:cdpop .9s ease-out}
@keyframes cdpop{0%{transform:scale(1.35);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:scale(.96)}}
.cd-sub{left:0;right:0;top:1230px;text-align:center;font-size:44px;font-weight:600;color:#e6f5da}

/* ---------- score ---------- */
#s-score .head{top:220px}
#s-score .head h1{font-size:96px}
.bowlbig{left:205px;top:520px}
.score-card{left:120px;right:120px;top:960px;height:560px;text-align:center;padding-top:50px}
.score-card .lbl{font-size:32px;font-weight:800;letter-spacing:.16em;color:var(--lime)}
.score-card .big{font-size:200px;font-weight:900;color:var(--green);line-height:1.05}
.stats{display:flex;justify-content:center;gap:24px;margin-top:40px}
.stats div{width:230px;background:#eef6e6;border-radius:28px;padding:22px 10px}
.stats b{display:block;font-size:60px;font-weight:900;color:var(--green)}
.stats span{font-size:26px;font-weight:600;color:var(--muted)}

/* ---------- thanks / leaderboard ---------- */
.chef{left:50%;transform:translateX(-50%);top:190px;width:520px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.thanks-head{top:575px}
.thanks-head h1{font-size:80px}
.thanks-head small{display:block;font-size:30px;color:var(--muted);margin-top:16px;font-weight:500}
.lb-title{left:0;right:0;text-align:center;font-size:34px;font-weight:800;letter-spacing:.14em;color:var(--lime)}
.attract-lb .lb-title{position:relative;margin-bottom:24px}
.thanks-lbt{top:905px}
.lb{left:90px;width:900px}
.lb .row{display:flex;align-items:center;height:92px;padding:0 34px;border-radius:26px;margin-bottom:12px;background:rgba(255,255,255,.92);font-size:36px;font-weight:600;box-shadow:0 4px 14px rgba(0,40,20,.06)}
.lb .row .p{width:100px;font-weight:900;color:var(--lime)}
.lb .row .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb .row .s{font-weight:900;color:var(--green)}
.lb .row.me{background:var(--green);color:#fff;transform:scale(1.04);box-shadow:0 14px 30px rgba(0,60,20,.3)}
.lb .row.me .p,.lb .row.me .s{color:#b8f08a}
.lb .gap{text-align:center;font-size:36px;color:var(--muted);line-height:.6;margin:-4px 0 8px}
.lb .empty{text-align:center;font-size:32px;color:var(--muted);padding:30px 0}
.thanks-lb{top:965px}
.agapame{left:50%;transform:translateX(-50%);top:1765px;width:280px}
body:not(.playing) #cv{visibility:hidden}
.score-pill{display:inline-block;margin-top:22px;padding:14px 40px;border-radius:60px;background:var(--green);color:#fff;font-size:36px;font-weight:700}
.score-pill b{color:#b8f08a;font-weight:900}
#s-register .form{top:520px}
.ghost{left:50%;transform:translateX(-50%);padding:20px 50px;font-size:36px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:8px;white-space:nowrap}
#s-score .btn{font-size:50px}
.modal-body h3{font-size:34px;font-weight:800;color:var(--green);margin:30px 0 10px}
.modal-body ul{margin:0 0 18px 34px}
.modal-body li{margin-bottom:8px}
.modal-body mark{background:#fff3b0;padding:0 4px;border-radius:4px}
.modal-body .legal-meta{font-size:24px;color:var(--muted)}
.bowlbig .bowlc .fr .b{-webkit-mask-image:radial-gradient(ellipse 44% 26% at 50% 64%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 44% 26% at 50% 64%,#000 78%,transparent 100%)}