*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Arial,Helvetica,sans-serif;color:#184b30;background:#179dcf url('../assets/images/banner.png') center/cover no-repeat}body:before{content:'';position:fixed;inset:0;background:linear-gradient(120deg,#073b3299,#0c6fa744);backdrop-filter:blur(9px)}main{position:relative;height:100dvh;display:flex;flex-direction:column;align-items:center;padding: max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));gap:8px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:700;cursor:pointer;border:1px solid #bad4ba;border-radius:14px;background:#f0f6de;color:#215535;min-height:48px;padding:12px 16px}button:hover{background:#e2f1b7}button:focus-visible,a:focus-visible{outline:3px solid #147bb1;outline-offset:3px}.primary{background:linear-gradient(#e7ff65,#b5e632);border-color:#96bc2b;box-shadow:0 4px 0 #6fa12d;color:#204b22;font-size:19px;margin-bottom:5px}.primary:hover{background:#dcff64}.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}.card{width:min(480px,100%);background:#fffdf0;border:1px solid #ffffffbd;border-radius:26px;overflow:hidden;box-shadow:0 22px 70px #00282277}.card.menu{width:min(700px,100%)}.banner{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.body{padding:26px;display:flex;flex-direction:column;gap:13px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#598046}h1,h2,p{margin:0}h1,h2{font-size:32px;letter-spacing:-1px;line-height:1.05}p{font-size:14px;line-height:1.5;color:#4f6958}.record{font-size:11px;letter-spacing:1px;display:flex;align-items:center;gap:12px}.record strong{font-size:24px}.portal{display:block;text-align:center;padding:12px;color:#3c654e;font-size:13px;text-decoration:none}#panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;background:#073b3233}#panel[hidden],[hidden]{display:none!important}#toolbar{display:flex;align-items:center;gap:8px;width:min(430px,100%);color:white}#toolbar button{font-size:22px;padding:8px;min-width:46px;background:#fff9e9}.score{flex:1;display:flex;justify-content:space-around;gap:10px}.score span{font-size:10px;letter-spacing:1px}.score b{font-size:23px;display:block;letter-spacing:0}#board{min-height:0;flex:1;aspect-ratio:180/320;max-width:100%;border-radius:18px;overflow:hidden;box-shadow:0 10px 45px #00362b88;background:#62bde1}iframe{display:block;border:0;width:100%;height:100%;touch-action:none}#tip{color:white;text-align:center;font-size:11px}ul{margin:0;padding-left:18px;line-height:1.5;font-size:14px}li{margin:9px 0}.results{display:flex;justify-content:center;gap:55px;text-align:center;font-size:11px;letter-spacing:2px;padding:12px}.results strong{display:block;font-size:48px;letter-spacing:-2px;margin-top:6px}.loader{height:5px;border-radius:5px;background:linear-gradient(90deg,#acd435,#31b0e1,#acd435);background-size:200%;animation:load 1s linear infinite}@keyframes load{to{background-position:200%}}@media(min-width:650px) and (min-height:650px){.menu .body{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}.menu .eyebrow,.menu h1,.menu p,.menu .record{grid-column:1}.menu .primary{grid-column:2;grid-row:1/3;align-self:center}.menu .row{grid-column:2;grid-row:3}.menu .portal{grid-column:2;grid-row:4}}@media(max-height:600px){#panel{align-items:flex-start;padding:10px}.card.menu{display:grid;grid-template-columns:1fr 1fr;width:min(780px,100%)}.banner{height:100%;object-fit:cover}.body{padding:18px;gap:9px}h1,h2{font-size:27px}main{padding:6px;gap:5px}#toolbar{position:absolute;left:12px;top:12px;width:100px;flex-wrap:wrap}.score{order:-1;flex-basis:100%}#tip{position:absolute;right:10px;bottom:10px;max-width:100px}#board{height:100%;flex:none}}@media(max-width:480px){#panel{padding:14px}.body{padding:20px}.card.menu{display:block}.banner{height:auto}.eyebrow{letter-spacing:1.5px}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.loader{animation:none}}
#board{flex:none;width:min(calc((100dvh - 100px)*.5625),calc(100vw - 24px));height:auto;max-width:100%;margin:auto 0}
@media(max-height:600px){#board{width:auto;height:100%;margin:0}}
@media(min-width:481px) and (max-height:600px){.banner{object-fit:contain;background:#1ea8de}}
#steering{display:flex;gap:14px;width:min(366px,100%);flex-shrink:0}#steering button{flex:1;min-height:54px;touch-action:none;user-select:none;font-size:18px;background:#e2fa93;border:2px solid #8cb744;box-shadow:0 3px 0 #527d2c}#steering button:active{background:#b7e95d;transform:translateY(2px)}#board{width:min(calc((100dvh - 165px)*.5625),calc(100vw - 24px))}@media(max-height:600px){#board{width:auto}#steering{position:absolute;right:14px;bottom:58px;width:110px;flex-direction:column;gap:10px}#steering button{min-height:56px}}