:root{--cream:#fff8ec;--ink:#123c3b;--muted:#476a66;--teal:#05645b;--orange:#ffbc65;--line:#dedfd0;--white:#fffdf7;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:500 16px/1.55 system-ui,-apple-system,"PingFang HK","Noto Sans CJK TC","Microsoft JhengHei",sans-serif}
[hidden]{display:none!important}
button,select{font:inherit;color:inherit}
a{color:inherit}
button,a,select{touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:3px solid #98540b;outline-offset:4px}
.shell{width:min(1120px,calc(100% - 48px));margin:auto}
.top,.footer{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.top{min-height:78px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;font-weight:900}
.mark{background:var(--teal);color:#fff4b6;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;transform:rotate(-7deg)}
.top-note,.eyebrow,.footer{font-weight:850;letter-spacing:.13em;font-size:12px}
.top-note,.footer,.eyebrow{color:var(--muted)}
.hero{min-height:505px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #cfdfd3;border-radius:36px;background:#e1f2e4;display:grid;align-items:center;grid-template-columns:43% 57%}
.hero-copy{padding:44px 0 50px 52px;z-index:1}
.hero-art{width:110%;height:100%;position:absolute;inset:0 0 0 auto;max-width:69%;object-fit:cover;object-position:left center;z-index:-1}
h1,h2,p{margin:0}h1,h2{line-height:1.13}
.hero h1{font-size:clamp(54px,8vw,109px);font-weight:950;letter-spacing:-.09em;margin:12px 0 18px}
.sun-dot{font-size:.38em;color:#e97145;vertical-align:super;margin-left:.4em}
.hero p{font-weight:700;font-size:clamp(15px,2vw,20px);margin:0 0 26px}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:12px;font-weight:850;padding:11px 17px;text-decoration:none}
.primary{background:var(--teal);color:white;box-shadow:0 3px #05463f}
.primary:hover{background:#074e48}
.secondary{background:var(--white);border:1px solid #bdd2c5}
.secondary:hover{background:#edf5e9}
.collection{display:grid;grid-template-columns:1fr minmax(260px,1.2fr);align-items:center;gap:10px 28px;padding:38px 0}
.collection h2,.game-head h1{margin-top:5px;font-size:clamp(30px,5.5vw,46px);font-weight:920;letter-spacing:-.05em}
.game-card{padding:12px 15px;display:flex;gap:14px;align-items:center;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:18px}
.game-card:hover{border-color:var(--teal)}
.card-icon{background:#dff2e7;border-radius:12px;width:47px;height:47px;display:grid;place-items:center;font-size:23px}
.game-card strong,.game-card small{display:block}
small,.future{color:var(--muted)}
.card-go{margin-left:auto;font-size:20px}
.future{grid-column:2;font-size:13px}
.footer{border-top:1px solid var(--line);margin-top:12px;letter-spacing:.07em}
.back{display:inline-block;text-decoration:none;font-size:14px;font-weight:800;margin-bottom:13px}
.game-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:20px}
.game-head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.game-head-actions button{white-space:nowrap}
.play-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(210px,1fr);gap:20px}
.stage{position:relative;background:#128980;isolation:isolate;overflow:hidden;border-radius:24px;min-height:290px;aspect-ratio:4/3}
#ocean{display:block;width:100%;height:100%;position:absolute;inset:0}
.hud{position:absolute;top:13px;left:13px;display:flex;gap:8px}
.hud>span,.pause,.cue{padding:6px 11px;border-radius:11px;background:var(--white);border:0;font-weight:850;box-shadow:0 2px 5px #123c3b2b}
.pause{position:absolute;right:13px;top:13px}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#063d3b55;padding:52px 12px 12px}
.overlay-card{background:var(--white);text-align:center;border-radius:20px;padding:21px 17px;max-width:97%;box-shadow:0 8px 26px #073b3a48}
.overlay h2,.dialog-title h2{margin:6px 0;font-size:clamp(24px,4vw,35px);font-weight:900}
.overlay p{margin-bottom:14px}
.actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.actions .button{padding-inline:10px;font-size:14px}
.cue{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);text-align:center;width:max-content;max-width:93%;margin:0}
.instructions{align-self:start;border-radius:20px;border:1px solid var(--line);background:var(--white);padding:21px}
.instructions h2{margin:5px 0 16px;font-size:24px}
.instructions ol{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.instructions li{display:flex;gap:9px;align-items:flex-start}
.instructions li>span{background:#e1f2e4;border-radius:8px;width:29px;flex:none;text-align:center;font-weight:900}
.instructions small{display:block;line-height:1.5}
.instructions p{font-size:13px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin:9px 0 0}
.controls button{min-height:49px;touch-action:none;user-select:none;background:var(--white);border:1px solid #b9cec1;border-radius:12px;font-weight:850}
.controls button:active,.controls button[aria-pressed=true]{background:#b3e4d8}
dialog{width:min(500px,calc(100% - 24px));max-height:calc(100% - 28px);border:1px solid var(--line);border-radius:22px;background:var(--white);color:var(--ink);padding:22px}
dialog::backdrop{background:#102d2ab3}
.dialog-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.icon-btn{background:transparent;border:1px solid var(--line);border-radius:10px;min-width:42px;min-height:42px}
dialog label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0;font-weight:750}
select{min-height:40px;max-width:65%;padding:3px 6px;border:1px solid #aac9bb;border-radius:8px;background:white}
#settings-done{width:100%;margin-top:13px}
@media(max-width:800px){.shell{width:calc(100% - 32px)}.hero{min-height:425px}.hero-copy{padding-left:32px}.play-layout{grid-template-columns:minmax(0,1fr)}.instructions ol{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.top{min-height:65px;padding:12px 0}.hero{grid-template-columns:1fr;align-items:start;border-radius:24px;min-height:0}.hero-copy{padding:23px 20px 10px}.hero h1{font-size:clamp(39px,10.4vw,56px);letter-spacing:-.08em;margin:8px 0}.hero-break{display:none}.hero p{margin-bottom:11px}.hero-art{position:static;width:100%;height:auto;max-width:none;aspect-ratio:1.7;object-position:center 47%}.collection{grid-template-columns:1fr;padding:24px 0;gap:10px}.future{grid-column:1}.stage{border-radius:17px}.instructions ol{grid-template-columns:1fr}.game-head .button{font-size:13px;padding:8px 9px}.overlay-card{padding:14px 10px}.overlay{padding-top:46px}.hud>span,.pause{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
.stage-tools{position:absolute;right:13px;top:13px;display:flex;gap:7px}
.stage-tools .pause{position:static}
.camera-view{position:relative;overflow:hidden;aspect-ratio:4/3;max-height:34dvh;background:#193f3b;border-radius:13px;display:grid;place-items:center}
.camera-view video,.camera-view canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);object-fit:contain}
#camera-placeholder{font-size:47px;color:#d5ecd7}
.camera-rail{position:absolute;bottom:0;left:0;width:100%;height:6px;background:#123c3b99}
.camera-rail i{display:block;width:0;height:100%;background:#c7f572}
.camera-status{font-size:15px;font-weight:850;margin:8px 0 2px}
.camera-help{font-size:13px;color:var(--muted);margin:4px 0 8px}
.camera-actions{justify-content:flex-start;margin:9px 0 12px}
#camera-options{border-block:1px solid var(--line);padding:8px 0}
#camera-options summary{cursor:pointer;font-weight:850}
#camera-options input[type=range]{min-width:72px;width:37%;accent-color:var(--teal)}
#camera-options label output{margin-left:auto;font-size:13px;white-space:nowrap}
button:disabled{opacity:.48;cursor:default}
body.distance .play-layout{grid-template-columns:1fr}
body.distance .instructions,body.distance .controls{display:none}
body.distance .stage{width:min(100%, calc((100dvh - 125px) * 4 / 3));margin-inline:auto}
#hearts{color:#b82d48;letter-spacing:.12em;white-space:nowrap}
#hearts .empty-heart{color:#8c7274}
.rider-picker{margin:0 0 12px;padding:11px 12px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.rider-picker>strong{font-size:14px}
.riders{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:7px}
.rider-option{display:grid;justify-items:center;align-content:center;gap:3px;min-height:68px;padding:4px 2px;border:1px solid var(--line);border-radius:9px;background:#fff9ea;color:var(--ink);font-size:clamp(9px,1.5vw,13px);font-weight:800;line-height:1.22;text-align:center}
.rider-option[aria-pressed=true]{background:#d7f2e4;border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.rider-option canvas{display:block;width:42px;height:37px}
.balance-meter{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;border-radius:11px;padding:6px 10px;background:var(--white);font-size:13px;font-weight:850}
.balance-meter progress{width:105px;height:13px;accent-color:var(--teal)}
@media(max-width:540px){.rider-picker{padding:8px}.riders{gap:3px}.rider-option{min-height:58px}.rider-option canvas{width:34px;height:31px}.hud{gap:4px}.hud>span,.stage-tools .pause{padding-inline:7px;font-size:12px}.stage-tools{gap:4px}}
.camera-live-view{position:absolute;right:13px;top:59px;width:clamp(52px,12%,90px);aspect-ratio:4/3;overflow:hidden;border:2px solid #fffdf7bd;border-radius:8px;background:#193f3b;pointer-events:none}
.camera-live-view video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
body.distance .camera-live-view{width:48px}

/* Sunrise Bay */
:root{
  --cream:#0a2235;--ink:#f5faff;--muted:#a8c6d7;--teal:#47dcd0;
  --orange:#ffca69;--line:#3b6074;--white:#112f47;color-scheme:dark
}
body{background:radial-gradient(ellipse at 70% -15%,#1d5266 0,transparent 51%),#091e31}
.top{border-bottom:1px solid #51788d52;margin-bottom:19px}
.mark{background:linear-gradient(145deg,#e7fffa,#5de0d5 55%,#1f939e);color:#0a4156;box-shadow:0 3px 0 #145774;font-size:31px;line-height:1}
.top-note,.eyebrow{color:#9ee6dc}
.hero{background:#16455e;border-color:#7194a3;box-shadow:0 22px 55px #020f23a1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,#082138f2 4%,#0a2744a3 44%,transparent 77%);pointer-events:none}
.hero-art{max-width:none;width:100%;object-position:center 37%}
.hero h1{color:#fff9db;text-shadow:0 4px 0 #123853,0 9px 22px #021025c9}
.hero p{color:#e0f1fa}
.sun-dot{color:#ffcb61}
.primary{background:linear-gradient(180deg,#ffde86,#ffc161 68%,#ed9e38);color:#322509;box-shadow:0 3px 0 #9f6228,0 6px 11px #06192570}
.primary:hover{background:linear-gradient(180deg,#fff0a5,#ffcb66)}
.secondary{background:linear-gradient(#2b536b,#163850);color:#f5fbff;border-color:#638496}
.secondary:hover{background:#355f77}
.back{color:#abd9df}
.game-head h1{color:#fff9df;text-shadow:0 3px 0 #062135}
.game-card{background:linear-gradient(120deg,#214c60,#15324a)}
.card-icon,.instructions li>span{background:#214d65;color:#99f5e3}
.stage{border:1px solid #75b4bb;box-shadow:0 0 0 4px #10283d,0 18px 34px #030f2496;background:#0a4b72}
.hud>span,.pause,.cue,.balance-meter{
  background:linear-gradient(180deg,#21445be8,#0c263ff5);
  border:1px solid #9bd9dc80;color:#f8fdff;box-shadow:0 3px 0 #061928b8,0 4px 10px #02101d60
}
.hud>span{min-height:33px;display:flex;align-items:center;font-variant-numeric:tabular-nums}
#hearts{color:#ff8293;letter-spacing:.14em;text-shadow:0 1px 2px #210521}
#hearts .empty-heart{color:#9b9db0}
.coin-hud{gap:5px}
.coin-hud i{display:block;width:15px;height:15px;border:1px solid #ffef9a;border-radius:50%;background:radial-gradient(circle at 33% 28%,#fff7b3,#fcd258 53%,#cb721b);box-shadow:0 0 5px #ffc86060}
.overlay{background:radial-gradient(ellipse at center,#06182928,#04182e8c)}
.overlay-card{background:linear-gradient(165deg,#275269f7,#112b47fa 72%);border:1px solid #7cbbca;border-top:3px solid #7fd9d6;box-shadow:0 16px 36px #020c20a6}
.overlay h2{color:#fff4cc;text-shadow:0 2px 0 #092c47}
.overlay p{color:#d6edf6}
.instructions,.rider-picker{background:linear-gradient(160deg,#183d54,#102a40);box-shadow:0 8px 17px #04142559}
.rider-option{background:linear-gradient(#254c62,#153248);border-color:#4e7588}
.rider-option[aria-pressed=true]{background:linear-gradient(#2c717d,#205569);border-color:#9aece0;box-shadow:inset 0 -2px 0 #56cdc9;color:#fffde8}
.rider-option canvas{filter:drop-shadow(0 2px 1px #061628a6)}
.controls{margin-top:13px}
.controls button{background:linear-gradient(#25566d,#173a53);border-color:#5e8a9c;box-shadow:0 3px 0 #06172c;color:#f0fbff}
.controls button:active,.controls button[aria-pressed=true]{background:#236f7e;box-shadow:0 1px 0 #06172c}
dialog{background:#132e45;border-color:#658c9d}
dialog::backdrop{background:#020f22c4}
select{background:#24475e;border-color:#5d8699}
dialog input{accent-color:#67dfd4}
:focus-visible{outline-color:#ffcf72}
@media(max-width:540px){
  .top{margin-bottom:12px}
  .hero::after{background:linear-gradient(120deg,#091e34ed,#0e30418a 55%,#0a223515)}
  .hero-art{position:absolute;height:100%;width:100%;object-position:61% 31%}
  .hero{min-height:284px}
  .hero-copy{padding:28px 20px}
  .hud{top:9px;left:9px}.stage-tools{top:9px;right:9px}
  .hud>span,.stage-tools .pause{min-height:28px;padding:4px 5px}
  .coin-hud i{width:12px;height:12px}
}
.collection .bridge-card{grid-column:2}
.collection .bridge-card img{object-fit:cover}
@media(max-width:540px){.collection .bridge-card{grid-column:1}}
.game-menu{padding:clamp(18px,4vw,50px) 0 40px}
.game-menu h1{font-size:clamp(29px,5vw,49px);color:#fff6db;margin-bottom:20px;letter-spacing:-.055em}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,25px)}
.menu-game{position:relative;display:block;overflow:hidden;isolation:isolate;border:2px solid var(--cover-rim);border-radius:clamp(17px,2vw,25px);aspect-ratio:4/3;text-decoration:none;background:var(--cover-shadow);box-shadow:0 5px 0 var(--cover-shadow),0 14px 28px #03121ea0;transition:transform .2s ease}
.menu-game--surf{--cover-rim:#63dfd2;--cover-shadow:#125668;--cover-button:#7beddf}
.menu-game--bridge{--cover-rim:#b7dd75;--cover-shadow:#304f37;--cover-button:#d3ed94}
.menu-game--dino{--cover-rim:#f4bb65;--cover-shadow:#663e2a;--cover-button:#ffd083}
.menu-game img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.menu-game:is(:hover,:focus-visible) img{transform:scale(1.045)}
.menu-game:active{transform:translateY(3px)}
.menu-game-name{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:32px clamp(10px,1.5vw,18px) 12px;background:linear-gradient(transparent,#0c1719e8 70%);font-size:clamp(20px,2.6vw,30px);font-weight:950;color:#fff8e8;line-height:1.18;text-shadow:0 2px 4px #111b19}
.menu-game-name i{display:grid;place-items:center;flex:none;width:clamp(34px,4.1vw,44px);aspect-ratio:1;border-radius:50%;padding-left:2px;background:var(--cover-button);box-shadow:0 3px 0 var(--cover-shadow);font:900 15px/1 system-ui;color:#152826;text-shadow:none}
@media(min-width:850px){.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.riders{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
.rider-option .cartoon-art{display:block;width:52px;height:46px;filter:drop-shadow(0 2px 1px #061628a6)}
@media(max-width:540px){
  .game-grid{grid-template-columns:1fr}
  .riders{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
  .rider-option .cartoon-art{width:40px;height:36px}
}
@media(prefers-reduced-motion:reduce){.menu-game,.menu-game img{transition:none}.menu-game:is(:hover,:focus-visible) img,.menu-game:active{transform:none}}

.game-fullscreen body{overflow:hidden}
.game-fullscreen body>.top,.game-fullscreen body>.footer,
.game-fullscreen .game-screen>.back,.game-fullscreen .instructions{display:none}
.game-fullscreen main.shell{width:100%}
.game-fullscreen .game-screen{
  display:flex;flex-direction:column;height:100dvh;gap:6px;
  padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.game-fullscreen .game-head{margin:0;align-items:center}
.game-fullscreen .game-head .eyebrow{display:none}
.game-fullscreen .game-head h1{margin:0;font-size:clamp(16px,3vw,25px)}
.game-fullscreen .game-head .button{padding:5px 9px;font-size:13px}
.game-fullscreen .play-layout,.game-fullscreen .play-layout>div{display:flex;flex:1;flex-direction:column;min-height:0}
.game-fullscreen .rider-picker{max-height:26dvh;overflow:auto;margin-bottom:6px}
.game-fullscreen .stage-frame{container-type:size;flex:1;min-height:0;display:grid;place-items:center}
.game-fullscreen .stage-frame .stage{--stage-ratio:4 / 3;width:min(100%,calc(100cqh * var(--stage-ratio)));min-height:0;box-shadow:none}
.game-fullscreen .stage-frame :is(.bridge-stage,.dino-stage){--stage-ratio:7 / 5}
.game-fullscreen .stage-frame .overlay{overflow:auto}
.game-fullscreen .controls{margin-top:5px}
.game-fullscreen .controls button{min-height:38px}
@media(max-height:480px){.game-fullscreen .overlay{padding:34px 6px 4px}.game-fullscreen .overlay-card{padding:7px}.game-fullscreen .overlay h2{font-size:18px;margin:0}.game-fullscreen .overlay p{font-size:12px;margin-bottom:5px}}