* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e5566; color: #10343a; font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Noto Color Emoji"; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 14px; min-height: 44px; padding: 10px 16px; background: #f4fbf8; color: #0e5566; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
button.big { background: #ff7a2f; color: #fff; font-size: 20px; padding: 14px 22px; width: 100%; box-shadow: 0 4px 0 #b84d14; }
button.icon { position: fixed; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(244,251,248,.85); font-size: 20px; z-index: 30; }
#muteBtn { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
#pauseBtn { right: max(62px, calc(env(safe-area-inset-right) + 52px)); bottom: max(10px, env(safe-area-inset-bottom)); }
/* screens */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; background: linear-gradient(180deg, rgba(14,85,102,.15), rgba(14,85,102,.55)); }
.screen[hidden] { display: none; }
.panel { width: min(420px, 100%); background: rgba(244,251,248,.94); border-radius: 22px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); max-height: 100%; overflow: auto; }
.panel button { margin-top: 8px; }
h1 { margin: 0; font-size: 54px; letter-spacing: -1px; color: #0e5566; line-height: 1; font-weight: 900; }
h1 span { color: #ff7a2f; }
h2 { margin: 4px 0 6px; font-size: 26px; color: #0e5566; }
.tag { margin: 8px 0 4px; font-weight: 700; }
.rule { margin: 6px 0 14px; color: #35585c; }
.two { display: flex; gap: 8px; }
.two button { flex: 1; font-size: 14px; }
.how { font-size: 13px; color: #35585c; margin: 12px 0 6px; }
#records { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #35585c; margin: 8px 0; }
#records .trophy { color: #8a5a00; font-size: 14px; }
#records .streak { color: #b2431a; }
#paints { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 2px; }
#paints .sw { width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(14,85,102,.25); font-size: 12px; line-height: 1; box-shadow: none; }
#paints .sw.on { border-color: #0e5566; box-shadow: 0 0 0 2px #f4fbf8, 0 0 0 4px #0e5566; }
#paints .sw.locked { filter: grayscale(.7) opacity(.45); }
#paints .sw.gold:not(.locked) { box-shadow: 0 0 8px #ffc928; }
#paints .sw.gold.on { box-shadow: 0 0 0 2px #f4fbf8, 0 0 0 4px #0e5566, 0 0 10px #ffc928; }
#paintNote { font-size: 12px; color: #35585c; margin: 2px 0 6px; min-height: 1.3em; }
#cardGot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0; font-size: 13px; }
#cardGot span { background: #fff4d6; color: #6b4a00; border-radius: 999px; padding: 3px 10px 3px 4px; display: inline-flex; align-items: center; gap: 5px; }
#cardGot i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.credit { font-size: 12px; color: #6a8689; margin: 10px 0 0; }
.credit a { color: #0e5566; }
.kicker { margin: 0; color: #ff7a2f; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
#cardStats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
#cardStats span { background: #e3f2ef; border-radius: 10px; padding: 8px 4px; font-size: 13px; }
#cardStats b { display: block; font-size: 18px; color: #0e5566; }
#cardBest { font-weight: 700; color: #ff7a2f; margin: 4px 0; }
#card .panel { animation: rise .35s ease-out; }
#cardBrag { margin: 2px 0 6px; font-size: 14px; color: #0e5566; background: #fff1e6; border-radius: 10px; padding: 6px 8px; }
/* The replay plays behind the card: the card moves to the bottom and the water stays clear above it. */
body.replaying #card { align-items: flex-end; background: linear-gradient(180deg, rgba(14,85,102,0) 45%, rgba(14,85,102,.45)); }
body.replaying #card .panel { padding: 14px 16px 12px; }
body.replaying #card h2 { font-size: 22px; }
body.replaying #cardStats { grid-template-columns: repeat(4, 1fr); margin: 8px 0; }
body.replaying #cardStats span { font-size: 11px; padding: 6px 2px; }
body.replaying #cardStats b { font-size: 15px; }
@media (min-width: 700px) { body.replaying #card { align-items: center; justify-content: flex-end; padding-right: 5vw; background: linear-gradient(90deg, rgba(14,85,102,0) 50%, rgba(14,85,102,.4)); } }
#replayTag { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 21; display: none; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(16,52,58,.7); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
#replayTag i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; animation: blink 1s infinite; }
#replayTag span { display: none; color: #ffd23f; }
#replayTag.slow span { display: inline; }
body.replaying #replayTag { display: flex; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.hint { font-size: 12px; color: #6a8689; margin: 8px 0 0; }
.hint span { display: none; }
body:not(.touch):not(.pad) .hint .m, body.touch:not(.pad) .hint .t, body.pad .hint .p { display: inline; }
/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
#hud[hidden] { display: none; }
#me { position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); width: 150px; background: rgba(14,85,102,.55); border-radius: 12px; padding: 7px 10px; }
#me .row { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; }
#me #loot { font-weight: 800; color: #ffd23f; }
.prog { height: 7px; border-radius: 4px; background: rgba(255,255,255,.25); margin: 5px 0 3px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: #ffd23f; transition: width .2s; }
#me small { font-size: 11px; opacity: .85; }
#tilt { position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); width: 92px; height: 50px; background: rgba(14,85,102,.55); border-radius: 12px; overflow: hidden; --t: 0; }
#tilt .fill { position: absolute; left: 0; bottom: 0; height: 6px; width: calc(var(--t) * 100%); background: linear-gradient(90deg, #5be28a, #ff7a2f 60%, #ff2d3c); }
#tiltBoard { position: absolute; left: 50%; top: 18px; width: 52px; height: 7px; margin-left: -26px; border-radius: 4px; background: #f4fbf8; transition: transform .08s; }
#tiltBoard::after { content: ''; position: absolute; left: 22px; top: -14px; width: 8px; height: 14px; border-radius: 4px 4px 0 0; background: #ff7a2f; }
#tilt small { position: absolute; left: 0; right: 0; bottom: 7px; font-size: 10px; text-align: center; opacity: .8; }
#tilt.hot { animation: shake .15s infinite; background: rgba(160,30,30,.6); }
@keyframes shake { 50% { transform: translateX(-50%) rotate(3deg); } }
#board { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); margin: 0; padding: 6px 8px; list-style: none; width: 150px; background: rgba(14,85,102,.55); border-radius: 12px; font-size: 12px; }
#board li { display: flex; gap: 5px; white-space: nowrap; }
#board li span { width: 14px; opacity: .7; }
#board li i { flex: 1; font-style: normal; overflow: hidden; text-overflow: ellipsis; }
#board li.me { color: #ffd23f; font-weight: 800; }
#map { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: 96px; height: 96px; border-radius: 50%; }
#lakeName { position: absolute; left: max(112px, calc(env(safe-area-inset-left) + 112px)); bottom: max(14px, env(safe-area-inset-bottom)); font-size: 11px; opacity: .8; }
#pauseBtn { pointer-events: auto; }
#feed { position: absolute; right: max(10px, env(safe-area-inset-right)); top: 170px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; }
#feed div { background: rgba(14,85,102,.5); padding: 2px 8px; border-radius: 8px; }
#ferryTag { position: absolute; left: 50%; top: max(122px, calc(env(safe-area-inset-top) + 122px)); transform: translateX(-50%); background: rgba(255,122,47,.92); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 999px; font-size: 15px; animation: ferryPulse 1s ease-in-out infinite; }
#ferryTag[hidden], #ferryPin[hidden] { display: none; }
#ferryPin { position: absolute; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none; }
#ferryPin span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(255,122,47,.92); font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
#ferryPin i { position: absolute; inset: -9px; }
#ferryPin i::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid #ff7a2f; border-right: 0; }
@keyframes ferryPulse { 50% { transform: translateX(-50%) scale(1.08); } }
#toast { position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 10px); width: max-content; max-width: 88vw; text-align: center; background: rgba(14,85,102,.75); padding: 8px 14px; border-radius: 12px; opacity: 0; transition: opacity .25s, transform .25s; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast b { color: #ffd23f; }
#big { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 34px; font-weight: 900; color: #ffd23f; opacity: 0; text-shadow: 0 3px 0 #b84d14, 0 0 20px rgba(0,0,0,.3); padding: 0 12px; }
#big.pop { animation: pop 1.8s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.12); } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
#sprintHint { position: absolute; left: 0; right: 0; bottom: 190px; padding: 0 12px; text-align: center; color: #fff; opacity: .75; animation: fadeHint 1s 9s forwards; }
@keyframes fadeHint { to { opacity: 0; } }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.nametag { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }
.nametag.wob { color: #ffd23f; }
/* The coach: in your first few big waves, a ghost arrow on your boat points the way to face. */
#coach { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .2s; }
#coach.on { opacity: 1; }
#coach .arr { position: absolute; left: 0; top: 0; width: 110px; height: 30px; margin: -15px 0 0 0; transform-origin: 0 50%; }
#coach .arr::before { content: ''; position: absolute; left: 22px; right: 22px; top: 11px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.85); }
#coach .arr::after { content: ''; position: absolute; right: 0; top: 0; border: 15px solid transparent; border-left: 24px solid rgba(255,255,255,.9); border-right: 0; }
#coach.ok .arr::before { background: rgba(98,214,154,.9); } #coach.ok .arr::after { border-left-color: rgba(98,214,154,.95); }
#coach span { position: absolute; left: 0; top: 34px; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
@media (max-width: 500px) {
#me, #board { width: 120px; }
#board { font-size: 11px; }
#tilt { width: 76px; }
h1 { font-size: 46px; }
}
@media (min-width: 1000px) {
#me, #board { width: 190px; font-size: 14px; }
#map { width: 150px; height: 150px; }
#lakeName { left: 172px; }
}
body.replaying #hud, body.replaying #labels, body.replaying #feed { opacity: 0; transition: opacity .3s; }