.rowing-game{--rowing-water:#91c2b4;position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--rowing-water);color:var(--ink);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}
.rowing-header{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;gap:12px;background:#fff9e8f2;z-index:2}
.rowing-header h1{margin:0;font-size:clamp(24px,4vw,38px)}.rowing-header .eyebrow{margin:0 0 2px;font-size:11px}.rowing-header button{width:auto;min-height:44px;margin:0}
.rowing-course{min-height:0;position:relative;overflow:hidden}.rowing-course canvas{display:block;width:100%;height:100%}
.rowing-loading{position:absolute;top:15px;left:50%;transform:translateX(-50%);z-index:2;padding:10px 18px;border-radius:14px;background:#fff9e8;max-width:90%;text-align:center}
.rowing-countdown{position:absolute;left:50%;top:50%;transform:translate(var(--countdown-x,0px),var(--countdown-y,0px)) translate(-50%,-50%);z-index:3;font-size:clamp(40px,8vw,80px);font-weight:1000;color:#fff9e8;text-shadow:0 4px 0 #196b69,0 7px 18px #174c5b66;text-align:center;white-space:nowrap;pointer-events:none}
.rowing-panel{z-index:2;justify-self:center;width:min(520px,calc(100% - 24px));padding:16px 20px;display:grid;grid-template-columns:54px minmax(0,1fr);gap:22px;background:var(--paper);border:4px solid #e9d8b1;border-radius:24px 24px 0 0;box-shadow:0 -5px 24px #15585b18}
.rowing-meter{position:relative;align-self:center;height:142px;border:3px solid #437e78;border-radius:16px;background:#244f55;box-shadow:inset 0 2px 8px #14383b80;margin:8px 0 12px}
.rowing-hit-zone{position:absolute;top:var(--rowing-target,38%);height:var(--rowing-zone,46%);left:3px;right:3px;transform:translateY(-50%);border-radius:6px;background:#8bb58955}
.rowing-target{position:absolute;top:var(--rowing-target,38%);left:-7px;right:-7px;height:5px;transform:translateY(-50%);background:#ffd66f;border-radius:3px;box-shadow:0 0 0 2px #715b31}
.rowing-marker{position:absolute;top:0;left:7px;right:7px;height:8px;transform:translateY(-50%);will-change:transform;border-radius:4px;background:#fffdf0;box-shadow:0 2px 0 #0004}
.rowing-meter-top,.rowing-meter-bottom{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;white-space:nowrap;color:#41636a}.rowing-meter-top{bottom:calc(100% + 5px)}.rowing-meter-bottom{top:calc(100% + 5px)}
.rowing-me{font-weight:800;font-size:12px;margin:0;color:var(--muted)}.rowing-instruction{font-size:22px;margin:2px 0 4px}.rowing-feedback{font-size:13px;line-height:1.4;margin:0;min-height:36px;color:var(--muted)}.rowing-feedback[data-hit=perfect]{color:#127768;font-weight:800}.rowing-feedback[data-hit=good]{color:#267c72}
.rowing-button{width:100%;min-height:54px;margin:9px 0 4px!important;font-size:24px!important;touch-action:manipulation;user-select:none}.rowing-progress{margin:5px 0 0;font-size:11px;font-weight:700;color:var(--muted)}
.rowing-panel.is-spectator{grid-template-columns:1fr}.rowing-panel.is-spectator .rowing-meter,.rowing-panel.is-spectator .rowing-button{display:none}
.rowing-label{position:absolute;top:0;left:0;pointer-events:none;background:#fff9e8e8;border-radius:9px;padding:3px 7px;line-height:1.1;white-space:nowrap;font-size:11px;font-weight:850;max-width:86px;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid var(--boat-color)}
.rowing-label.is-own{outline:2px solid #185857}.rowing-label.is-offline{opacity:.7}.rowing-label.is-finished{background:#ffe28b}
.rowing-line-label{position:absolute;top:0;left:0;pointer-events:none;font-size:11px;font-weight:1000;letter-spacing:2px;color:#fff8dd;text-shadow:0 2px 1px #285e61}
.rowing-results{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;background:var(--paper);border-radius:24px;box-shadow:0 8px 35px #164d5f55}.rowing-results[hidden]{display:none}.rowing-results h2{font-size:30px;margin:6px 0 16px}.rowing-results .eyebrow{margin:0}.rowing-results p:last-child{font-size:13px;color:var(--muted);margin:16px 0 0}.rowing-results ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}.rowing-results li{display:flex;gap:10px;align-items:center;font-size:14px}.rowing-results li>span:last-child{margin-left:auto;font-size:11px}.rowing-place{width:30px;height:30px;display:grid;place-items:center;background:#e9d8b1;border-radius:50%;font-weight:900}
.rowing-standings{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.rowing-course-fallback .rowing-standings{clip-path:none;top:70px;left:10%;width:80%;height:auto;max-height:calc(100% - 80px);overflow:auto;background:var(--paper);border-radius:12px;padding:16px 32px}
.rowing-result-detail{text-align:right;flex-shrink:0}.rowing-reward{display:block;color:#127768;font-size:14px}.rowing-results li>strong{min-width:0;overflow-wrap:anywhere}
@media(max-width:400px){.rowing-header{padding:10px 14px}.rowing-panel{padding:12px 16px;gap:18px}.rowing-instruction{font-size:19px}.rowing-meter{height:124px}.rowing-label{font-size:9px;max-width:59px}}
@media(max-height:500px) and (min-width:600px){.rowing-game{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto minmax(0,1fr)}.rowing-header{grid-column:1/-1;padding:6px 16px}.rowing-header h1{font-size:24px}.rowing-panel{grid-column:2;grid-row:2;align-self:center;border-radius:20px;width:calc(100% - 16px);padding:14px;gap:14px;grid-template-columns:38px minmax(0,1fr)}.rowing-instruction{font-size:18px}.rowing-meter{height:144px}.rowing-countdown{font-size:48px}.rowing-button{min-height:48px}.rowing-results{max-height:calc(100dvh - 20px)}}

/* Player screens keep the timing bar beside the water, within the same glance. */
.rowing-game:not([data-view=shared]){grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr) auto}
.rowing-game:not([data-view=shared]) .rowing-header{grid-column:1/-1}
.rowing-game:not([data-view=shared]) .rowing-course{grid-column:1;grid-row:2}
.rowing-game:not([data-view=shared]) .rowing-panel{display:contents}
.rowing-game:not([data-view=shared]) .rowing-meter{grid-column:2;grid-row:2;justify-self:center;align-self:center;width:30px;height:clamp(140px,44dvh,340px);max-height:calc(100% - 64px);margin:24px 8px 24px 0;border-radius:12px}
.rowing-game:not([data-view=shared]) .rowing-marker{left:3px;right:3px}
.rowing-game:not([data-view=shared]) .rowing-actions{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(104px,32%);column-gap:16px;align-items:center;justify-self:center;width:min(600px,calc(100% - 24px));padding:12px 16px 10px;border:3px solid #e9d8b1;border-bottom:0;border-radius:22px 22px 0 0;background:var(--paper);z-index:2}
.rowing-game:not([data-view=shared]) .rowing-me{grid-column:1;grid-row:1}
.rowing-game:not([data-view=shared]) .rowing-instruction{grid-column:1;grid-row:2;font-size:20px}
.rowing-game:not([data-view=shared]) .rowing-feedback{grid-column:1;grid-row:3;font-size:12px;min-height:34px}
.rowing-game:not([data-view=shared]) .rowing-button{grid-column:2;grid-row:1/4;min-height:64px;margin:0!important}
.rowing-game:not([data-view=shared]) .rowing-progress{grid-column:1/-1;grid-row:4}
.rowing-game:not([data-view=shared]) .rowing-countdown{font-size:clamp(24px,5vw,36px);line-height:1.1;white-space:normal;width:max-content;max-width:70%}
.rowing-game:not([data-view=shared]) .rowing-countdown[data-step]{font-size:clamp(56px,14vw,80px)}
.rowing-game:not([data-view=shared]).is-spectator{grid-template-columns:minmax(0,1fr)}
.rowing-game:not([data-view=shared]).is-spectator .rowing-actions{grid-template-columns:minmax(0,1fr)}
.rowing-rival{position:absolute;left:8px;top:0;width:78px;display:grid;gap:1px;padding:3px 4px;border-bottom:3px solid var(--boat-color);border-radius:4px 4px 0 0;background:#fff9e8d9;color:#244f55;pointer-events:none;line-height:1.1;font-size:11px}
.rowing-rival[hidden]{display:none}.rowing-rival strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rowing-rival>span{font-size:10px}.rowing-rival.is-offline{opacity:.6}
@media(max-width:360px){.rowing-game:not([data-view=shared]){grid-template-columns:minmax(0,1fr) 52px}.rowing-game:not([data-view=shared]) .rowing-actions{padding:10px 12px;column-gap:10px;width:calc(100% - 16px)}.rowing-game:not([data-view=shared]) .rowing-instruction{font-size:18px}.rowing-rival{left:5px;width:66px;font-size:10px}}
@media(max-height:500px) and (min-width:600px){.rowing-game:not([data-view=shared]){grid-template-columns:minmax(0,1fr) 60px 230px;grid-template-rows:auto minmax(0,1fr)}.rowing-game:not([data-view=shared]) .rowing-actions{grid-column:3;grid-row:2;grid-template-columns:1fr;align-self:center;width:calc(100% - 16px);padding:14px;border-bottom:3px solid #e9d8b1;border-radius:20px}.rowing-game:not([data-view=shared]) .rowing-button{grid-column:1;grid-row:4;margin:8px 0!important;min-height:54px}.rowing-game:not([data-view=shared]) .rowing-progress{grid-row:5}.rowing-game:not([data-view=shared]) .rowing-meter{height:70%;max-height:calc(100% - 56px)}.rowing-game:not([data-view=shared]).is-spectator{grid-template-columns:minmax(0,1fr) 230px}.rowing-game:not([data-view=shared]).is-spectator .rowing-actions{grid-column:2}}
@media(max-height:500px) and (min-width:600px){.rowing-game[data-view=focus] .rowing-countdown{font-size:28px}.rowing-game[data-view=focus] .rowing-countdown[data-step]{font-size:44px}}