:root{--ink:#293e3c;--muted:#71807a;--paper:#f6f1e7;--accent:#a34c35;--blue:#316c86}*{box-sizing:border-box}body{margin:0;background:#eae4d6;color:var(--ink);font-family:ui-rounded,'Avenir Next',Avenir,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ad6e28;outline-offset:3px}.shell{min-height:100dvh;display:flex;gap:clamp(30px,5vw,90px);justify-content:center;align-items:center;padding:32px 25px;background:radial-gradient(ellipse at 50% 30%,#faf7ed88,transparent 70%)}.intro,.notes{width:245px}.eyebrow,.label,.dock-heading{font-size:10px;letter-spacing:2px;font-weight:700}.eyebrow{color:#7b8477}h1{font-family:Georgia,serif;font-weight:400;font-size:88px;line-height:.97;letter-spacing:-5px;margin:25px 0}h1 em{color:var(--accent);font-weight:400}.intro>p{line-height:1.7;font-size:18px}.intro-rule{width:38px;border-top:2px solid #a89e87;margin:30px 0}.intro .explain{font-size:14px}.legend{display:flex;gap:15px;align-items:center;margin-top:32px}.legend p{font-size:11px;line-height:1.7}.mini-tile{position:relative;display:inline-block;background:#d7d8d4;border:1px solid #aab3af;border-radius:8px;width:50px;height:61px;padding:13px 9px;font:28px Georgia;flex-shrink:0}.mini-tile sup,.mini-tile sub{position:absolute;right:5px;font:10px system-ui}.mini-tile sup{top:5px}.mini-tile sub{bottom:5px;color:var(--blue)}.intro .prototype{font-size:9px;letter-spacing:1.5px;margin-top:50px}.game{width:410px;flex-shrink:0;background:var(--paper);border-radius:26px;box-shadow:0 25px 75px #394f3e24,0 0 0 1px #a49e8725;overflow:hidden;position:relative}header{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 23px}.brand{font:25px Georgia;letter-spacing:-1px}.brand-wave{color:var(--blue);font-size:32px;margin-left:5px}.icon{border:1px solid #b6beb3;border-radius:50%;height:29px;width:29px;background:none;font-family:Georgia;font-size:18px}.stats{display:flex;justify-content:space-between;padding:10px 29px 16px;text-align:center}.stats>div{min-width:70px}.label{color:var(--muted);display:block;font-size:9px;margin-bottom:3px}.stats strong{font:30px Georgia;font-variant-numeric:tabular-nums}.clock strong{color:var(--accent)}.river{height:267px;background:linear-gradient(#c9dfe1,#b6d5d9);position:relative;overflow:hidden;border-top:1px solid #b8d2d3}.island{position:absolute;top:-11px;width:100%;text-align:center}.island svg{width:100%;height:112px}.island>span{display:block;margin-top:-10px;font-size:8px;letter-spacing:2px;color:#688178}.waterline{position:absolute;height:7px;border-top:2px solid #f2faf566;border-radius:50%;width:70px}.w1{top:136px;left:25px;transform:rotate(-5deg)}.w2{top:117px;right:25px;width:45px}.w3{top:172px;right:12px;width:30px}.raft-zone{position:absolute;bottom:48px;left:12px;right:12px;height:83px;display:flex;align-items:center;justify-content:center;perspective:600px}.raft{position:relative;min-height:69px;width:100%;border:5px solid #9d7752;border-left-width:10px;border-right-width:10px;border-radius:14px;background:repeating-linear-gradient(0deg,#ba956b 0px,#ba956b 16px,#98764e 17px,#d0ae81 19px);box-shadow:0 8px 0 #789fa055;display:flex;justify-content:center;align-items:center;transition:filter .2s,transform .2s}.raft::before,.raft::after{content:'';position:absolute;top:-7px;bottom:-7px;width:5px;background:#dfc59a;box-shadow:1px 0 #95744d;left:12px;z-index:0}.raft::after{left:auto;right:12px}.raft-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;position:relative;z-index:1}.raft-tiles:empty{display:none}#raftPlaceholder{font:italic 16px Georgia;color:#654f35;padding:15px}#status{position:absolute;bottom:13px;left:12px;right:12px;text-align:center;font-size:11px;color:#3e686d}#arrival{position:absolute;top:112px;width:100%;text-align:center;font-size:14px;font-weight:700;color:#3d6263;z-index:3}.raft.sailing{animation:sail .9s ease-in forwards;pointer-events:none}@keyframes sail{0%{transform:translateY(0) scale(1)}65%{opacity:1}100%{transform:translateY(-140px) scale(.35);opacity:0}}.controls{padding:13px 23px 12px}.word-info{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:10px}.lift{font-size:9px;letter-spacing:1px;color:var(--blue)}.lift b{font:700 16px system-ui;margin-left:5px}.lift.heavy{color:#a34c35}.action-row{display:flex;gap:10px}.secondary{background:none;border:1px solid #c8c9bd;border-radius:9px;padding:11px 17px;font-size:13px}.send{background:var(--accent);border:0;color:#fff9e9;font-weight:650;border-radius:9px;padding:13px;flex:1;box-shadow:0 3px 0 #793f2d}.send:disabled{background:#cdc8ba;color:#f8f4ea;box-shadow:0 3px 0 #b6b2a7}.dock-area{background:#e9e2d2;padding:13px 23px 12px;border-top:1px solid #ddd4c2}.dock-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;color:#737d70;font-size:9px}.dock-heading button,.dock-footer button,footer button{border:0;background:none;font-size:11px;padding:3px;letter-spacing:0}.dock{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.tile{position:relative;aspect-ratio:1.08;border:1px solid #d3c2a0;border-radius:9px;background:#fff5dc;box-shadow:0 3px 0 #b4a38b;display:flex;justify-content:center;align-items:center;font:29px Georgia;color:#2c3935;user-select:none;transition:transform .12s}.tile:hover:not(:disabled){transform:translateY(-2px)}.tile.negative{background:linear-gradient(140deg,#e5e7df,#c8d0ca);border-color:#a8b8b0;box-shadow:0 3px 0 #98a79e}.tile.positive{background:linear-gradient(140deg,#fff7dd,#ecddb4)}.tile.zero{background:#ece7da}.tile .points{position:absolute;right:6px;top:4px;font:600 10px system-ui}.tile .weight{position:absolute;right:5px;bottom:4px;font:700 11px system-ui;color:var(--blue)}.tile.selected{visibility:hidden}.slot{aspect-ratio:1.08;border:1px dashed #c8bfaa;border-radius:9px}.raft-tiles .tile{width:46px;height:51px;aspect-ratio:auto;font-size:24px;flex-shrink:0}.raft-tiles.many{gap:3px}.raft-tiles.many .tile{width:30px;height:46px;font-size:19px;border-radius:5px}.raft-tiles.many .points{right:3px;font-size:8px;top:2px}.raft-tiles.many .weight{right:3px;bottom:2px;font-size:9px}.dock-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:10px;color:#69766b}.dock-footer button{text-decoration:underline;text-underline-offset:3px}footer{padding:12px 23px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#8a8c7e}footer button{font-size:10px}.notes h2{font:32px/1.2 Georgia;margin:20px 0 35px}.notes ol{padding-left:23px}.notes li{padding-left:8px;margin-bottom:24px;font-size:13px}.notes li::marker{font:italic 20px Georgia;color:#a28b68}.notes p{font-size:12px;line-height:1.7;color:#758075;margin:7px 0}.notes .keyboard{font-size:10px;margin-top:40px}.overlay{position:absolute;inset:0;z-index:10;background:#dce6dfbb;backdrop-filter:blur(5px);display:grid;place-items:center;padding:25px}.overlay[hidden]{display:none}.card{background:#faf6eb;border:1px solid #ddd7c8;padding:30px 25px;border-radius:18px;box-shadow:0 15px 35px #314d3420;width:100%;text-align:center}.card h2{font:38px/1.12 Georgia;letter-spacing:-1px;margin:20px 0}.card p{font-size:13px;line-height:1.7;color:#69776a}.card .send{width:100%;margin-top:15px}.practice{display:block;font-size:11px;margin-top:20px}.end-score{font:68px Georgia;color:var(--accent)}#history{font-size:12px;max-height:135px;overflow:auto;line-height:1.8}dialog{border:1px solid #cecabb;border-radius:18px;background:var(--paper);color:var(--ink);width:min(90vw,440px);padding:30px;font-size:14px;line-height:1.6}dialog::backdrop{background:#2c494b88}dialog h2{font:32px Georgia}dialog .close{float:right}dialog a{color:var(--blue)}details{font-size:12px}.urgent{color:#b63728!important}@media(max-width:1080px){.notes{display:none}.shell{gap:65px}}@media(max-width:720px){.intro{display:none}.shell{padding:0;min-height:100dvh;background:var(--paper)}.game{border-radius:0;box-shadow:none;width:min(100%,460px);min-height:100dvh;display:flex;flex-direction:column}header{padding-top:env(safe-area-inset-top);height:calc(54px + env(safe-area-inset-top))}.river{flex:1;min-height:205px;height:auto}.dock-area{padding-bottom:13px}.controls{padding-top:11px;padding-bottom:11px}footer{padding-bottom:max(10px,env(safe-area-inset-bottom))}.stats{padding-bottom:12px}.tile{max-height:67px}.dock{gap:8px}}@media(max-height:700px) and (max-width:720px){.river{min-height:170px}.island svg{height:85px}.island>span{display:none}.raft-zone{bottom:37px}.stats strong{font-size:26px}.stats{padding-top:2px;padding-bottom:9px}.dock-area{padding-top:9px}.dock-heading{margin-bottom:7px}.tile{max-height:55px}#status{font-size:10px;bottom:8px}header{height:45px}.dock-footer{margin-top:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}

/* Seven distinct buoyancy levels, reinforced by the signed numerical label. */
.tile.weight-minus1{background:#f7d9d2;border-color:#d8aba2;box-shadow:0 3px #bc9189}
.tile.weight-minus2{background:#eda99b;border-color:#cb8475;box-shadow:0 3px #b6786c}
.tile.weight-minus3{background:#d97567;border-color:#ad554b;box-shadow:0 3px #944b42}
.tile.weight-plus0{background:#fff3d9;border-color:#d3c2a0;box-shadow:0 3px #b4a38b}
.tile.weight-plus1{background:#dceef6;border-color:#a8c9db;box-shadow:0 3px #8eaebe}
.tile.weight-plus2{background:#a4cfe7;border-color:#75acc8;box-shadow:0 3px #658fa6}
.tile.weight-plus3{background:#6aa9ce;border-color:#4e87a8;box-shadow:0 3px #426f89}
.tile{touch-action:none}.tile.hinted{outline:3px solid #458257;outline-offset:2px}.tile.hinted::after{content:attr(data-order);position:absolute;left:-5px;top:-7px;border-radius:50%;background:#306744;color:white;font:700 10px system-ui;width:17px;height:17px;display:grid;place-items:center}
#status.inappropriate{color:#855c56;font-weight:700}.flash-red .tile{animation:word-alert .4s ease-in-out 1}@keyframes word-alert{50%{background:#f3d4cc}}
.drag-source{opacity:.25}.drag-ghost{position:fixed!important;z-index:1000;width:56px!important;height:60px!important;pointer-events:none;opacity:.9;transform:rotate(-4deg);box-shadow:0 8px 16px #283d4a55!important}.drop-target{outline:3px dashed #427b77;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.flash-red .tile{animation:none;background:#f3d4cc}}

.stats{gap:6px;padding-left:20px;padding-right:20px}.stats>div{min-width:0;flex:1}.hint-stat strong{color:var(--muted);font-size:25px}

/* All encounters run for 500 ms inside the river; they never intercept input. */
.raft.sailing{animation-duration:.5s}
.sea-event{position:absolute;z-index:4;left:50%;top:48%;width:160px;height:100px;margin:-50px 0 0 -80px;pointer-events:none;opacity:0}
.sea-event svg{width:100%;height:100%;overflow:visible}
.sea-event.active{animation:sea-appear .5s ease-out both}
.sea-event.motion-pass{animation:sea-pass .5s linear both}
.sea-event.motion-fly{animation:sea-fly .5s ease-in-out both}
.sea-event.motion-leap{animation:sea-leap .5s ease-in-out both}
.sea-event.motion-surface{animation:sea-surface .5s ease-in-out both}
.sea-event.motion-rock{animation:sea-rock .5s ease-in-out both}
.sea-event.motion-spin svg{animation:sea-spin .5s ease-out both;transform-origin:50% 60%}
.sea-event.motion-burst svg{animation:sea-burst .5s ease-out both}
.sea-event .spray{animation:sea-spray .5s ease-out both;transform-origin:50% 85%}
.sea-event .spout{animation:sea-spout .5s ease-out both;transform-origin:45% 40%}
.sea-event .wave-part{animation:sea-wave .5s ease-in-out both;transform-origin:50% 65%}
.sea-event .smoke{animation:sea-smoke .5s ease-out both}
@keyframes sea-appear{0%,100%{opacity:0;transform:translateY(5px)}18%,78%{opacity:1;transform:translateY(0)}}
@keyframes sea-pass{0%{opacity:0;transform:translateX(-100px)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(100px)}}
@keyframes sea-fly{0%{opacity:0;transform:translate(-105px,20px) rotate(-8deg)}20%,80%{opacity:1}100%{opacity:0;transform:translate(105px,-25px) rotate(5deg)}}
@keyframes sea-leap{0%{opacity:0;transform:translate(-55px,28px) rotate(-22deg)}40%{opacity:1;transform:translate(0,-23px) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(60px,30px) rotate(25deg)}}
@keyframes sea-surface{0%,100%{opacity:0;transform:translateY(30px) scale(.8)}25%,70%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sea-rock{0%,100%{opacity:0;transform:rotate(-12deg)}25%{opacity:1;transform:rotate(12deg)}65%{opacity:1;transform:rotate(-8deg)}}
@keyframes sea-spin{from{transform:rotate(-45deg) scale(.65)}to{transform:rotate(100deg) scale(1.05)}}
@keyframes sea-burst{0%{transform:scale(.5)}60%{transform:scale(1)}100%{transform:scale(1.4);opacity:0}}
@keyframes sea-spray{0%,15%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(1.4) translateY(-5px)}}
@keyframes sea-spout{0%,10%{transform:scaleY(0)}50%,80%{transform:scaleY(1)}100%{opacity:0}}
@keyframes sea-wave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@keyframes sea-smoke{from{opacity:1;transform:translateY(8px)}to{opacity:0;transform:translate(-15px,-13px)}}
@media(max-height:700px) and (max-width:720px){.sea-event{top:43%;width:115px;height:74px;margin:-37px 0 0 -57px}}
@media(prefers-reduced-motion:reduce){.sea-event.active{animation:none;opacity:1}.sea-event.active svg,.sea-event.active svg *{animation:none!important}.raft.sailing{animation-duration:.01ms}}

/* Version 4: centred clock, pastel tiles, full island and separate encounter corners. */
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;padding-left:23px;padding-right:23px}
.stats .score-stat{display:flex;gap:6px;align-items:end;text-align:center}.stats .score-column{min-width:34px;text-align:center}.stats .hint-stat{text-align:center;padding-bottom:2px}.stats .hint-stat strong{font-size:16px;color:#76867e}.stats .hint-stat .label{font-size:6px;letter-spacing:.7px}.stats .clock{text-align:center}.stats .best-stat{text-align:right}
.tile.weight-minus1{background:#f9e7e2;border-color:#dfc3bd;box-shadow:0 3px #c7aaa3}
.tile.weight-minus2{background:#f3d4cc;border-color:#d7b3aa;box-shadow:0 3px #c29d94}
.tile.weight-minus3{background:#ebbbb0;border-color:#cfa498;box-shadow:0 3px #bc9489}
.tile.weight-plus1{background:#e7f2f6;border-color:#bbd4df;box-shadow:0 3px #a1bbc6}
.tile.weight-plus2{background:#d3e7f0;border-color:#abcbdc;box-shadow:0 3px #94b4c4}
.tile.weight-plus3{background:#b9d8e8;border-color:#9bbfd2;box-shadow:0 3px #86a9bc}
.river{height:320px;min-height:300px;background:linear-gradient(to bottom,#e6eff0 0,#dfeded 76px,#c9dfe1 142px,#b6d5d9 100%)}
.sun{position:absolute;left:32%;top:17px;width:25px;height:25px;border-radius:50%;background:#f4dda1;box-shadow:0 0 0 6px #f6e4b544;pointer-events:none}
.island{top:34px;left:19%;width:62%;height:110px}.island svg{height:100px;width:100%;display:block}.island>span{margin-top:-2px;display:block;font-size:7px;letter-spacing:1.5px}
#arrival{top:153px;font-size:12px}.w1{top:161px}.w2{top:148px}.w3{top:192px}
.sea-event{left:auto;right:auto;top:98px;width:19%;max-width:86px;height:63px;margin:0;overflow:hidden;contain:paint;z-index:2;transform:none!important;pointer-events:none}
.sea-event.side-left{left:3px}.sea-event.side-right{right:3px}.sea-event.sky-event{top:9px;height:62px}
.sea-event.active{animation:none!important;opacity:1}.sea-event.active svg{width:100%;height:100%;overflow:hidden;animation:corner-pop .5s ease-out both;transform-origin:center}
.sea-event.motion-pass svg,.sea-event.motion-fly svg{animation:corner-pass .5s ease-in-out both}
.sea-event.motion-leap svg{animation:corner-leap .5s ease-in-out both}
.sea-event.motion-spin svg{animation:corner-spin .5s ease-out both}
@keyframes corner-pop{0%,100%{opacity:0;transform:translateY(8px) scale(.85)}20%,75%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes corner-pass{0%{opacity:0;transform:translateX(-12px)}20%,75%{opacity:1}100%{opacity:0;transform:translateX(12px)}}
@keyframes corner-leap{0%,100%{opacity:0;transform:translateY(9px) rotate(8deg)}45%{opacity:1;transform:translateY(-4px) rotate(-8deg)}}
@keyframes corner-spin{0%{opacity:0;transform:scale(.7) rotate(-30deg)}25%,75%{opacity:1}100%{opacity:0;transform:scale(.95) rotate(60deg)}}
@keyframes sail{0%{transform:translateY(0) scale(1)}23%{transform:translateY(-12px) scale(.42);opacity:1}85%{opacity:1}100%{transform:translateY(var(--sail-y,-170px)) scale(.20);opacity:0}}
@media(max-width:720px){.river{height:auto;min-height:300px}.island{top:34px;height:110px}.island svg{height:100px}.island>span{display:block}.sea-event{top:98px;width:19%;height:63px;margin:0}.sea-event.sky-event{top:9px}}
@media(prefers-reduced-motion:reduce){.sea-event.active svg,.sea-event.active svg *{animation:none!important}}

#raftTiles .tile.drop-target{outline:3px solid #427b77;outline-offset:2px;filter:brightness(1.08)}

/* Version 7: placeholders reserve exactly the same dock geometry as tiles. */
.dock>.tile,.dock>.slot{min-width:0;width:100%}
@media(max-width:720px){.dock>.slot{max-height:67px}}
@media(max-height:700px) and (max-width:720px){.dock>.slot{max-height:55px}}
/* Keep bonus text and long raft words from changing the surrounding layout. */
.word-info{min-height:34px}.lift{flex-shrink:0}#wordScore{text-align:right}
.raft-tiles.many{width:100%;flex-wrap:nowrap}
.raft-tiles.many .tile{width:min(30px,calc((100% - 27px)/10));min-width:0;padding:0}
.raft-tiles{width:100%;flex-wrap:nowrap}
.raft-tiles:not(.many) .tile{width:min(46px,calc((100% - 20px)/6));min-width:0;padding:0}

/* Version 10: leave scrollable clearance for floating mobile browser controls. */
@media(max-width:720px){
 .shell{min-height:100svh;align-items:flex-start}
 .game{min-height:100svh;padding-bottom:84px}
 footer{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:720px) and (display-mode:standalone){.game{padding-bottom:0}}

/* Version 11: single-letter deletion with a phone-friendly touch target. */
.action-row{gap:8px}.action-row .secondary{min-height:44px;padding:10px 12px}
.action-row .send{min-width:80px;min-height:44px}
.action-row .secondary:disabled{opacity:.5}

/* Version 13: Home Screen mode owns a fixed viewport, without browser clearance. */
@media(max-width:720px){
 html.standalone,html.standalone body{height:100%;overflow:hidden;overscroll-behavior:none}
 .standalone .shell{position:fixed;inset:0;min-height:0;height:100%;padding:0;overflow:hidden}
 .standalone .game{height:100%;min-height:0;padding-bottom:0;overflow:hidden}
 .standalone .game>header,.standalone .stats,.standalone .controls,.standalone .dock-area,.standalone footer{flex-shrink:0}
 .standalone .river{flex:1 1 0;min-height:0;height:auto}
 .standalone .island{top:14px;height:96px}.standalone .island svg{height:84px}
 .standalone .sun{top:10px}
 .standalone footer{padding-top:7px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 .standalone .overlay{overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:720px) and (max-height:700px){
 .standalone header{height:calc(42px + env(safe-area-inset-top,0px))}
 .standalone .stats{padding-top:0;padding-bottom:7px}
 .standalone .controls{padding-top:5px;padding-bottom:7px}
 .standalone .word-info{margin-bottom:4px;min-height:34px}
 .standalone .dock-area{padding-top:7px;padding-bottom:7px}
 .standalone .dock-heading{margin-bottom:6px}.standalone .dock-footer{margin-top:6px}
 .standalone .island{top:0;left:27%;width:46%;height:58px}
 .standalone .island svg{height:55px}.standalone .island>span{display:none}
 .standalone .sun{top:6px;left:22%;width:16px;height:16px}
 .standalone .raft-zone{bottom:24px;height:65px}.standalone .raft{min-height:61px}
 .standalone .raft-tiles .tile{height:43px}
 .standalone #status{bottom:5px;font-size:10px}
 .standalone .sea-event{top:45px;height:40px}.standalone .sea-event.sky-event{top:0;height:40px}
}
/* Very short landscape displays retain access through an internal scroll area. */
@media(max-width:720px) and (max-height:450px){
 .standalone .game{overflow-y:auto}.standalone .river{flex:none;min-height:180px}
}

/* Version 14: ring stays in the header or on the raft, outside encounter corners. */
.header-tools{display:flex;align-items:center;gap:8px}
#lifelineHome{display:block;width:44px;height:44px}
.life-ring{width:44px;height:44px;padding:3px;border:0;background:none;display:block;position:relative;z-index:5;touch-action:manipulation}
.life-ring svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 1px #293e3c30)}
.life-ring.spent{opacity:.25;filter:grayscale(1)}
#lifelineRaft{position:absolute;right:0;top:-43px;z-index:5}
#lifelineRaft .life-ring{background:transparent;border-radius:50%}

/* Version 15: reachable sky lifeline and a shared home/results screen. */
#lifelineHome{position:absolute;top:8px;right:8px;z-index:5}
.sea-event.side-right.sky-event{top:60px}
.home-screen{background:var(--paper);backdrop-filter:none;overflow-y:auto;overscroll-behavior:contain}
.home-card{box-shadow:none;background:transparent;border:0;max-height:100%;overflow-y:auto}
.home-card h2{font-size:42px;margin:14px 0}.home-card .brand-wave{font-size:38px}
.home-card #history{max-height:120px;overflow-y:auto;overscroll-behavior:contain}
.home-card .end-score{font-size:54px}.home-card #endSummary{margin:4px 0 12px}
.home-card .practice{margin-top:16px}
@media(max-height:700px){.home-card{padding:12px}.home-card h2{font-size:34px}.home-card #history{max-height:90px}}

/* Version 16: title, scrollable information area, and a persistent home action. */
.home-screen{padding:0;display:block;overflow:hidden}
.home-card{height:100%;max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:0;overflow:hidden}
.home-title{padding:calc(28px + env(safe-area-inset-top,0px)) 24px 20px;border-bottom:1px solid #ded6c4}
.home-title h1{font:42px Georgia;letter-spacing:-2px;margin:10px 0 0}.home-title .brand-wave{font-size:38px}
.home-middle{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px;text-align:left}
#homeIntro{text-align:center;padding:25px 0}#homeIntro h2{font:36px/1.15 Georgia}
.home-bottom{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid #ded6c4;background:#eee7d8}
.home-bottom .practice{margin:0;max-width:130px;font-size:11px}.home-bottom .send{flex:0 0 auto;min-height:48px;padding:12px 20px;margin:0;width:auto}
.voyage-total{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px}.voyage-total strong{font:48px Georgia;color:var(--accent)}
#homeResults #endSummary{font-size:12px;margin:8px 0}.results-note{font-size:10px;line-height:1.5;color:#687770}
.results-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
.results-table th{text-align:left;font-size:10px;letter-spacing:.5px;padding:12px 6px;border-bottom:2px solid #c7c6b4}
.results-table td{vertical-align:top;padding:10px 6px;border-bottom:1px solid #ded8c9;overflow-wrap:anywhere}
.results-table small{display:block;margin-top:5px;color:#69766b;font-size:11px}.review-word{font-weight:650}
.longest-word{background:#f4dfa3;text-decoration:underline;text-underline-offset:3px;border-radius:3px;padding:2px 3px}
.review-ring{white-space:nowrap;font-size:14px}.rescue-review{margin:20px 0 10px;padding:14px;background:#e0ecea;border-radius:10px;font-size:12px}.rescue-review p{margin:8px 0}.rescue-review small{font-size:10px;line-height:1.4;display:block}
.home-card #history{max-height:none;overflow:visible}
@media(max-height:700px){.home-title{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:12px}.home-title h1{font-size:34px}.home-middle{padding:14px}.home-bottom{padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* Version 17: the phone home fits the viewport, with a centred persistent action. */
.home-bottom{justify-content:center}
.home-bottom .send{width:100%;max-width:340px;min-height:56px;font-size:18px}
@media(max-width:720px){
 html.home-open,html.home-open body{height:100%;overflow:hidden;overscroll-behavior:none}
 .home-open .shell{position:fixed;inset:0;height:100svh;min-height:0;padding:0;overflow:hidden}
 .home-open .game{height:100%;min-height:0;padding-bottom:0;overflow:hidden}
 .standalone.home-open .shell{height:100%}
 .home-open .home-card{padding:0}
 .home-open .home-middle:has(#homeResults[hidden]){overflow:hidden;display:flex;align-items:center;justify-content:center}
 .home-open #homeIntro{padding:0}
 .home-open #homeIntro h2{font-size:clamp(26px,5vh,36px);margin:8px 0 14px}
 .home-open #homeIntro p{font-size:13px;line-height:1.5}
}

/* Version 18: shared masthead, swipe cards and an end-of-voyage overlay. */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;height:78px;border:0}
.brand-lockup{min-width:0}.brand-line{display:flex;align-items:center;gap:10px}.brand-line .brand{font:28px Georgia;letter-spacing:-1px;white-space:nowrap}
.wave-tile{display:grid;place-items:center;width:34px;height:36px;border:1px solid #d3c2a0;border-radius:8px;background:#fff3d8;color:var(--blue);font:34px Georgia;box-shadow:0 2px #b4a38b;line-height:1}
.welcome{display:block;margin:7px 0 0 44px;font-size:8px;font-weight:700;letter-spacing:1.7px;color:var(--muted)}
.menu-toggle{width:44px;height:44px;border:0;border-radius:10px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.menu-toggle span{display:block;width:21px;height:2px;border-radius:2px;background:var(--ink)}
.home-title.masthead{height:auto;padding:calc(20px + env(safe-area-inset-top,0px)) 22px 16px}
.home-card .home-middle{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch;padding:18px 22px;overflow:hidden;gap:14px}
.home-carousel{display:flex;flex:0 1 430px;min-height:0;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;overscroll-behavior-x:contain}
.home-carousel::-webkit-scrollbar{display:none}
.home-slide{box-sizing:border-box;flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-align:start;scroll-snap-stop:always;background:var(--accent);color:#fff6e6;padding:24px;border-radius:22px;text-align:left}
.tutorial-dialog #homeIntro{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0;text-align:left}
.tutorial-dialog #homeIntro h2{font:38px/1.1 Georgia!important;margin:20px 0 12px!important;letter-spacing:-1px}
.tutorial-dialog #homeIntro p{font-size:14px!important;line-height:1.6!important;color:#fff6e6}
.card-kicker{font-size:9px;letter-spacing:1.7px;font-weight:700}.swipe-tip{font-size:11px;margin-top:22px;opacity:.85}
.slide-title{font:29px Georgia;margin:0 0 18px}.home-slide>p{font-size:14px;line-height:1.6}
.carousel-nav{display:flex;justify-content:center;gap:3px;flex-shrink:0;height:30px}
.carousel-nav button{width:30px;height:30px;border:0;background:none;padding:10px}
.carousel-nav button::after{content:'';display:block;width:8px;height:8px;background:#c5bbae;border-radius:50%}
.carousel-nav button[aria-current=true]::after{background:var(--accent)}
.home-slide .voyage-total strong,.result-card .voyage-total strong{color:#fff6e6}
.home-slide .results-note,.result-card .results-note,.home-slide .results-table small,.result-card .results-table small{color:#fff0d9}
.home-slide .results-table th,.home-slide .results-table td,.result-card .results-table th,.result-card .results-table td{border-color:#ffffff40}
.home-slide .longest-word,.result-card .longest-word{color:#3f342c;background:#f4dfa3}
.home-slide .rescue-review,.result-card .rescue-review{background:#7a372a;color:#fff6e6}
.voyage-history-row{padding:14px 0;border-bottom:1px solid #ffffff40}.voyage-history-row strong{display:block;font:24px Georgia}.voyage-history-row span{display:block;font-size:11px;line-height:1.6;margin-top:5px}
.sky-hint{position:absolute;top:8px;left:8px;min-width:52px;height:44px;border:1px solid #7a9c9b;border-radius:12px;background:#f6f1e7d9;color:#355d62;font-size:12px;z-index:5}
.sky-hint:disabled{opacity:.45}.sea-event.sky-event,.sea-event.side-right.sky-event{top:62px}
.dock-footer{justify-content:flex-end}
.menu-dialog{max-width:280px}.menu-dialog h2{font-size:28px}.menu-dialog>button:not(.close){display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #d7cfbd;background:none;padding:15px 0;font-size:17px}.menu-dialog p{font-size:11px;line-height:1.5}
.result-overlay{position:absolute;inset:0;z-index:12;display:flex;align-items:flex-start;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px));background:#e6eadd66;overflow:hidden}
.result-overlay[hidden]{display:none}
.result-card{width:100%;max-height:100%;display:flex;flex-direction:column;min-height:0;border-radius:22px;background:var(--accent);color:#fff6e6;box-shadow:0 18px 50px #293e3c33;animation:result-arrive .45s ease-out both}
.result-heading{padding:22px 22px 8px;flex-shrink:0}.result-heading h2{font:34px Georgia;margin:8px 0}
.result-body{padding:0 22px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.result-body>p{font-size:12px;line-height:1.5}
.result-actions{padding:16px 22px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.replay-button{min-height:48px;border:0;border-radius:12px;background:#fff1d8;color:#713c2e;font-weight:700;font-size:17px}.home-link{align-self:center;border:0;background:none;color:#fff6e6;text-decoration:underline;padding:10px 22px;font-size:12px}
.game>header,.game>.stats,.game>.river,.game>.controls,.game>.dock-area{transition:filter .4s ease,opacity .4s ease}
.game.round-ended>header,.game.round-ended>.stats,.game.round-ended>.river,.game.round-ended>.controls,.game.round-ended>.dock-area{filter:blur(5px);opacity:.55;pointer-events:none}
@keyframes result-arrive{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){header.masthead,.standalone header.masthead{height:calc(78px + env(safe-area-inset-top,0px));padding-top:calc(12px + env(safe-area-inset-top,0px))}.standalone .dock-area{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
@media(max-height:700px){.home-title.masthead{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:8px}.home-card .home-middle{padding:10px 18px;gap:5px}.home-slide{padding:18px}.tutorial-dialog #homeIntro h2{font-size:30px!important;margin:10px 0!important}.tutorial-dialog #homeIntro p{font-size:12px!important;margin:6px 0}.swipe-tip{margin-top:10px}.home-bottom{padding-top:10px}.result-heading{padding-top:16px}.result-heading h2{font-size:28px}.result-actions{padding-top:10px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.result-card{animation:none}.game>header,.game>.stats,.game>.river,.game>.controls,.game>.dock-area{transition:none}}

@media(max-width:720px){html.results-open,html.results-open body{height:100%;overflow:hidden;overscroll-behavior:none}.results-open .shell{position:fixed;inset:0;height:100svh;min-height:0;padding:0;overflow:hidden}.results-open .game{height:100%;min-height:0;padding-bottom:0;overflow:hidden}.standalone.results-open .shell{height:100%}}
.menu-dialog>button[hidden]{display:none}

/* Version 19: delivered count beside the far-shore label. */
.shore-caption{position:relative;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;color:#55746c;font-size:7px;letter-spacing:1px;margin-top:-2px}
.shore-caption #trips{font-size:9px;letter-spacing:0;color:#466b68}
@media(max-height:700px) and (max-width:720px){.shore-caption{font-size:6px;gap:5px}.shore-caption #trips{font-size:8px}}

/* Version 21: independent home settings and a third dock row. */
.settings-dialog{max-width:370px;max-height:85svh;overflow:auto}
.settings-dialog h2{font:28px Georgia}.settings-dialog p{font-size:12px;line-height:1.5}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid #d7cfbd;font-weight:700}
.setting-row small{display:block;font-size:12px;font-weight:400;line-height:1.5;margin-top:5px}
.setting-row input{appearance:none;flex:0 0 46px;width:46px;height:28px;border-radius:20px;background:#b7b8ad;position:relative;cursor:pointer}
.setting-row input:before{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#fff9ee;top:3px;left:3px;transition:transform .15s}
.setting-row input:checked{background:var(--accent)}.setting-row input:checked:before{transform:translateX(18px)}
.setting-row input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:720px){.large-dock .dock{gap:6px}.large-dock .dock .tile,.large-dock .dock .slot{height:clamp(40px,7svh,60px);min-height:0}.large-dock .dock .tile>span:first-child{font-size:29px}}
@media(max-width:720px) and (max-height:700px){.standalone.large-dock header.masthead{height:54px;padding-top:5px;padding-bottom:5px}.standalone.large-dock .welcome{margin-top:3px}.standalone.large-dock .dock-area{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.standalone.large-dock .dock .tile,.standalone.large-dock .dock .slot{height:40px}.standalone.large-dock .dock{gap:5px}.standalone.large-dock .dock-heading{margin-bottom:3px}.standalone.large-dock .controls{padding-top:3px;padding-bottom:4px}}

@media(max-width:720px) and (max-height:700px){.large-dock .dock .tile>span:first-child{font-size:24px}.large-dock .dock .tile .points{font-size:9px;top:3px;right:4px}.large-dock .dock .tile .weight{font-size:10px;bottom:3px;right:4px}}

/* Version 22: switches directly in the home menu. */
.menu-dialog{max-width:370px;max-height:85svh;overflow-y:auto}.menu-dialog #homeSettings[hidden]{display:none}.menu-dialog #menuNote:empty,.menu-dialog #settingsSaveNote:empty{display:none}

/* Version 23: arrival points follow the raft's resting position, in the water above it. */
#arrival{top:auto;bottom:126px;line-height:18px;pointer-events:none}
@media(max-height:700px) and (max-width:720px){#arrival{bottom:115px}.standalone #arrival{bottom:91px}}

/* Version 24: keep the close-button ring when focus moves to a toggle. */
dialog .icon.close{outline:3px solid #ad6e28;outline-offset:3px}
dialog .icon.close:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 8px #316c8640}

/* Version 28: fixed card headings and scrollable voyage details. */
.home-slide.fixed-slide{display:flex;flex-direction:column;overflow:hidden;padding:0}
.slide-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 20px 12px;flex-shrink:0}
.slide-heading .slide-title{margin:0;font-size:27px}.slide-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 20px}
.share-button{flex-shrink:0;width:40px;height:40px;padding:8px;border:0;border-radius:9px;background:transparent;color:inherit}.share-button svg{width:24px;height:24px}.share-button:disabled{opacity:.35}
.history-heading{align-items:flex-start;flex-direction:column;gap:12px}.history-sort{display:flex;align-items:center;gap:10px;font-size:12px}
.history-sort input{appearance:none;width:36px;height:22px;border-radius:12px;background:#ffffff55;position:relative;margin:0}.history-sort input:before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff6e6;border-radius:50%}.history-sort input:checked{background:#344e47}.history-sort input:checked:before{left:17px}.history-sort input:focus-visible{outline:2px solid #fff6e6;outline-offset:3px}
button.voyage-history-row{display:block;width:100%;text-align:left;background:none;color:inherit;border:0;border-bottom:1px solid #ffffff40;cursor:pointer}
.voyage-dialog{width:min(92vw,460px);max-height:85svh;padding:20px;overflow:hidden}.voyage-dialog[open]{display:flex;flex-direction:column}.detail-heading{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-bottom:12px}.detail-heading h2{font-size:25px;margin:0;flex:1}.detail-scroll{overflow-y:auto;min-height:0}.detail-scroll .results-table{width:100%}
#shareText{width:100%;height:180px;resize:vertical;font:14px/1.5 system-ui;color:var(--ink);background:#fff9ee;border:1px solid #b6beb3;border-radius:8px;padding:10px}
#historyStorageNote:empty{display:none}

/* Version 30: replay docks, centred close icons and separated swipe cards. */
dialog .icon.close{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-family:Arial,sans-serif;font-size:20px;flex-shrink:0}
.home-carousel{gap:12px}
button.review-word{font:inherit;font-weight:700;color:inherit;padding:2px 0;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
button.review-word.longest-word{background:#f4dfa3;color:#3f342c}
.dock-replay-dialog{width:min(94vw,440px);max-height:85svh;overflow:auto;padding:24px}.dock-replay-dialog h2{font-size:30px;margin:10px 0}.dock-replay-dialog p{font-size:12px;line-height:1.5}
#dockReplayGrid{padding:12px 3px;gap:9px}#dockReplayGrid .tile{display:flex;align-items:center;justify-content:center;height:62px;min-width:0;max-height:none;font-size:29px;cursor:default}#dockReplayGrid .points{font-size:10px}#dockReplayGrid .weight{font-size:11px}.replay-unused{opacity:.55}

/* Version 32: dock column and complete image reports. */
.results-table .dock-column{width:22px;font-size:10px;text-align:left;padding-left:0;padding-right:5px;opacity:.8}
.image-share-dialog{max-height:85svh;overflow-y:auto}.image-share-dialog h2{font-size:28px}#shareImage{display:block;width:100%;height:auto;border-radius:12px}.image-share-actions{display:flex;align-items:center;gap:20px;margin-top:14px}.image-share-dialog p{font-size:12px}

/* Version 33: share directly from the end-of-voyage panel. */
.result-heading{position:relative;padding-right:66px}#shareResult{position:absolute;right:16px;top:16px;color:#fff6e6}

/* Version 34: deliberate end-panel actions and centred close control. */
.result-heading{padding-right:108px}#shareResult{right:58px}.result-close{position:absolute;right:22px;top:22px;color:#fff6e6;border-color:#fff6e688;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font:20px Arial;outline:2px solid #fff6e666;outline-offset:3px}
#resultPanel:focus{outline:none}

/* Version 35: welcome alignment, onboarding and daily challenge. */
.tutorial-dialog #homeIntro{justify-content:flex-start}.tutorial-dialog #homeIntro h2{margin:0 0 16px!important}
.tutorial-button{align-self:flex-start;background:transparent;color:#fff6e6;border:1px solid #fff6e688;border-radius:10px;padding:9px 18px;margin-top:10px;font-size:14px}
.home-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.daily-button{width:100%;max-width:340px;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:12px;padding:8px;font-weight:700;font-size:15px}.daily-button small{display:block;font-weight:400;font-size:10px;margin-top:2px}.daily-button:disabled{opacity:.55}
#dailyNote{font-size:10px;line-height:1.3;margin:0;text-align:center;max-width:340px;color:var(--muted)}
.tutorial-dialog{width:min(92vw,420px);padding:22px;max-height:90svh;overflow:hidden;background:var(--accent);color:#fff6e6;border:0;border-radius:22px;box-shadow:0 18px 40px #1f3b3f55}.tutorial-dialog[open]{display:flex;flex-direction:column}.tutorial-heading{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:3px 5px 15px 0}.tutorial-heading h2{font-size:28px;margin:0}
.tutorial-slides{display:flex;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.tutorial-slides section{flex:0 0 100%;min-width:0;scroll-snap-align:start;overflow-y:auto;max-height:57svh;padding:12px 4px;box-sizing:border-box}.tutorial-slides h3{font:25px Georgia;margin:16px 0}.tutorial-slides p{font-size:14px;line-height:1.6}.tutorial-art{display:block;background:#c5e0e3;border-radius:14px;padding:22px 8px;text-align:center;font:bold 26px Georgia;color:#355d62}.tutorial-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;flex-shrink:0}.tutorial-nav button{font-size:13px;padding:10px}.tutorial-nav span{font-size:12px}
@media(max-height:700px){.home-bottom .send{min-height:44px}.home-bottom{gap:5px}.tutorial-dialog #homeIntro h2{font-size:27px!important;margin:0 0 8px!important}.tutorial-dialog #homeIntro p{margin:5px 0!important}.tutorial-button{margin-top:4px;padding:6px 14px}.swipe-tip{margin-top:10px}.tutorial-art{padding:12px}.tutorial-slides p{font-size:13px}}

/* Version 36: daily countdown to midnight GMT. */
#dailyCountdown{display:block;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:1px;margin-top:3px}#dailyNote:empty{display:none}

/* Version 37: life-ring placeholder and local, looping tutorial demonstrations. */
#lifelineGhost{position:absolute;inset:0;pointer-events:none}#lifelineGhost[hidden]{display:none}
.tutorial-demo{display:block;width:100%;max-height:210px;border-radius:14px;overflow:hidden}.demo-letter{font:25px Georgia;fill:#293e3c;text-anchor:middle}.demo-number{font:bold 9px Arial;fill:#355d62;text-anchor:end}.demo-caption{font:12px Arial;fill:#355d62;text-anchor:middle}.demo-total{font:bold 27px Georgia;fill:#a34c35;text-anchor:middle}
.tutorial-demo [class*="demo-"]{animation-duration:5s;animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
.demo-playing .tutorial-demo [class*="demo-"]{animation-play-state:running}.demos-paused .tutorial-demo [class*="demo-"]{animation-play-state:paused!important}
.demo-move-0{animation-name:demo-c}.demo-move-1{animation-name:demo-a}.demo-move-2{animation-name:demo-t}.demo-tap{animation-name:demo-tap}
@keyframes demo-c{0%,12%{transform:translate(0,0)}25%,88%{transform:translate(74px,-72px)}100%{transform:translate(0,0)}}
@keyframes demo-a{0%,30%{transform:translate(0,0)}43%,88%{transform:translate(59px,-72px)}100%{transform:translate(0,0)}}
@keyframes demo-t{0%,48%{transform:translate(0,0)}61%,88%{transform:translate(44px,-72px)}100%{transform:translate(0,0)}}
@keyframes demo-tap{0%,10%,29%,47%{opacity:0}12%,22%{opacity:1;transform:translateX(0)}30%,40%{opacity:1;transform:translateX(59px)}48%,58%{opacity:1;transform:translateX(118px)}62%,100%{opacity:0;transform:translateX(118px)}}
.demo-message-first{animation-name:demo-first}.demo-message-last{animation-name:demo-last}@keyframes demo-first{0%,38%{opacity:1}45%,100%{opacity:0}}@keyframes demo-last{0%,38%{opacity:0}45%,90%{opacity:1}100%{opacity:0}}
.demo-score-tile{animation-name:demo-score}.demo-total{animation-name:demo-score}@keyframes demo-score{0%,20%,90%,100%{opacity:.6}35%,80%{opacity:1}}
.demo-ring-ghost{opacity:.25;filter:grayscale(1)}.demo-ring-move{animation-name:demo-ring}@keyframes demo-ring{0%,18%{transform:translate(0,0)}40%,82%{transform:translate(-41px,42px)}100%{transform:translate(0,0)}}
.demo-sailing{transform-origin:160px 24px;animation-name:demo-sail}@keyframes demo-sail{0%,18%{transform:translateY(0) scale(1);opacity:1}42%,85%{transform:translateY(-45px) scale(.3);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.demo-old-dock{animation-name:demo-first}.demo-new-dock{animation-name:demo-last}
.demo-motion{align-self:center;background:none;border:0;text-decoration:underline;font-size:11px;padding:5px;color:var(--muted);flex-shrink:0}
@media(max-height:700px){.tutorial-demo{max-height:155px}.tutorial-slides h3{font-size:22px;margin:10px 0}.tutorial-slides p{margin:8px 0}.tutorial-heading{padding-bottom:6px}}
@media(prefers-reduced-motion:reduce){.tutorial-demo [class*="demo-"]{animation-duration:5s!important;animation-iteration-count:infinite!important}}

/* Version 39 special tiles. Badges leave score and buoyancy readable. */
.special-badge{position:absolute;left:4px;top:3px;font:700 11px/1.2 Arial,sans-serif;color:#713e25;background:#fff3d8;border-radius:5px;padding:2px;}
.vowel-change{position:absolute;top:-28px;bottom:auto;left:50%;transform:translateX(-50%);font-size:12px;padding:3px 8px;border-radius:8px;background:#fff3d8;color:#293e3c;}
.vowel-options{display:flex;gap:8px;margin:20px 0;}.vowel-options button{min-width:40px;padding:10px;}
#vowelDialog{max-width:340px;padding:25px;border-radius:20px;background:#f6f1e7;color:#293e3c;}
.vowel-change[hidden]{display:none;}

/* Version 40: prominent corner specials without changing tile dimensions. */
.tile.special-ring,.tile.special-double{overflow:visible;}
.tile.special-double{border-width:4px;}
.tile.special-ring .special-badge,.tile.special-double .special-badge{left:-9px;top:-10px;z-index:3;font:900 16px/1 Arial,sans-serif;border-radius:50%;padding:4px;background:#fff8eb;box-shadow:0 1px 3px #293e3c33;}
.tile.special-ring .special-badge{font-size:23px;background:transparent;box-shadow:none;padding:0;}
.tile.special-double .special-badge{border:2px solid;border-color:inherit;color:#293e3c;}
.tile.special-ring.hinted::after,.tile.special-double.hinted::after{left:auto;right:-7px;}
.review-special{display:inline-block;margin-left:3px;font-size:.85em;}

/* Version 41: fixed special-marker track in each results column. */
.review-heading{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:start;gap:3px;}
.review-heading .review-word{justify-self:start;text-align:left;min-width:0;overflow-wrap:anywhere;}
.review-markers{display:flex;align-items:center;justify-content:center;gap:2px;padding-top:3px;white-space:nowrap;font-size:11px;}
.review-markers .review-special{margin:0;font-size:1em;}

.review-markers{display:grid;grid-template-columns:16px 16px;gap:2px;justify-content:center;}
.review-markers .review-special{grid-column:1;grid-row:1;}
.review-markers .review-ring{grid-column:2;grid-row:1;}

/* Version 42: transparent vector ring, no platform emoji box. */
.tile.special-ring .special-badge{width:26px;height:26px;border:0;border-radius:0;background:none;box-shadow:none;line-height:0;}
.tile.special-ring .special-badge svg{display:block;width:100%;height:100%;pointer-events:none;}

/* Version 43: bonus tabs follow the widest marked word, not the cell edge. */
.review-heading{display:block;}
.review-heading.has-markers{display:grid;grid-template-columns:minmax(0,min(var(--bonus-tab,6em),calc(100% - 37px))) 34px;}
.review-heading:not(.has-markers) .review-markers{display:none;}

/* Version 44: departing raft is visual only; next dock is immediately playable. */
.raft.departing-raft{position:absolute;pointer-events:none!important;z-index:4;margin:0;}

.departing-lifeline{position:absolute;right:0;top:-43px;z-index:5}.departing-lifeline .life-ring{background:transparent;border-radius:50%;}

/* Version 45: matching thick borders for every active special type. */
.tile.special-ring,.tile.special-clock{border-width:4px;overflow:visible;}
.tile.special-clock .special-badge{position:absolute;left:-9px;top:-10px;z-index:3;width:26px;height:26px;padding:0;border:0;background:none;box-shadow:none;line-height:0;}
.tile.special-clock .special-badge svg{display:block;width:100%;height:100%;pointer-events:none;}
.tile.special-clock.hinted::after{left:auto;right:-7px;}

/* Version 49: smaller ring badge, closer to its own tile. */
.tile.special-ring .special-badge{width:22px;height:22px;left:-5px;top:-7px;}

.brand-line .brand-version{font:14px/1 Georgia,serif;color:var(--muted);white-space:nowrap;align-self:center}

.word-definition{margin-top:20px;padding-top:14px;border-top:1px solid #cfc8b8}.word-definition h3{font-size:14px;margin:0 0 10px}.word-definition ol{padding-left:20px;margin:0}.word-definition li{padding-left:2px;margin-bottom:10px;font-size:12px}.word-definition li strong{color:var(--muted);font-size:11px}.word-definition li p{margin:3px 0}.word-definition small{font-size:10px;color:var(--muted)}#definitionLicense{white-space:pre-wrap;font:10px/1.5 system-ui;overflow-wrap:anywhere}

#resultFireworks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;border-radius:22px}.firework-burst{position:absolute;width:0;height:0}.firework-burst i{position:absolute;width:4px;height:7px;border-radius:3px;opacity:0;animation:result-spark 1.1s ease-out var(--spark-delay) both}@keyframes result-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.4)}}@media(prefers-reduced-motion:reduce){#resultFireworks{display:none}}

.word-definition .base-definition{padding-left:8px;border-left:2px solid #cfc8b8;margin-top:6px}.word-definition small a{color:var(--blue)}#supplementLicense{white-space:pre-wrap;font:10px/1.5 system-ui;overflow-wrap:anywhere}

/* Reactions occupy their own scorecard row; never cover words or controls. */
.result-reaction{display:flex;align-items:center;gap:14px;padding:10px 12px;margin:0 0 16px;background:#743e3338;border-radius:14px;min-height:76px;overflow:hidden}.result-reaction svg{width:90px;height:63px;flex-shrink:0}.result-reaction p{margin:0;font-weight:700;font-size:15px;line-height:1.35}
.result-reaction .whale{animation:reaction-breach 1.8s ease-in-out both}.result-reaction .hat{transform-origin:60px 56px;animation:reaction-tip 1.6s ease-in-out both}.result-reaction .drift,.result-reaction .boat{animation:reaction-drift 2s ease-in-out both}.result-reaction .gull{animation:reaction-fly 2s ease-in-out both}.result-reaction .lid{transform-origin:27px 44px;animation:reaction-tip 1.8s ease-in-out both}.result-reaction .glint{animation:reaction-glint 1.8s ease-in-out both}.result-reaction .dart{animation:reaction-dart 1.5s ease-out both}
@keyframes reaction-breach{0%,100%{transform:translateY(8px) rotate(0deg)}45%{transform:translateY(-8px) rotate(-12deg)}}
@keyframes reaction-tip{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-18deg)}}
@keyframes reaction-drift{0%{transform:translateX(-15px)}100%{transform:translateX(10px)}}
@keyframes reaction-fly{0%{transform:translate(-22px,10px)}55%{transform:translate(0,-4px)}100%{transform:translate(18px,0)}}
@keyframes reaction-glint{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes reaction-dart{0%{transform:translateX(-35px)}100%{transform:translateX(20px)}}
.reaction-finished svg *{animation:none!important}
@media(prefers-reduced-motion:reduce){.result-reaction svg *{animation:none!important}}

.result-reaction .flags{animation:reaction-rise 1.7s ease-out both}.result-reaction .clockhands{transform-origin:60px 42px;animation:reaction-clock 1.8s ease-in-out both}.result-reaction .walker{transform-origin:60px 65px;animation:reaction-balance 1.8s ease-in-out both}.result-reaction .anchor{animation:reaction-rise 1.8s ease-out both}.result-reaction .bridge{transform-origin:9px 36px;animation:reaction-close 1.8s ease-out both}.result-reaction .sock{transform-origin:24px 22px;animation:reaction-droop 1.8s ease-out both}
@keyframes reaction-rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
@keyframes reaction-clock{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}
@keyframes reaction-balance{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}70%{transform:rotate(10deg)}}
@keyframes reaction-close{from{transform:rotate(-22deg)}to{transform:rotate(0)}}
@keyframes reaction-droop{from{transform:rotate(0)}to{transform:rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.result-reaction svg *{animation:none!important}}

/* Light reaction inset with room for brief flourishes outside the illustration. */
.result-reaction{background:#fff2d9;color:#293d3b;overflow:visible;position:relative;padding:14px 16px;gap:16px}
.result-reaction svg{overflow:visible;pointer-events:none}.result-reaction>div{min-width:0;position:relative;z-index:1}
.result-reaction .reaction-description{display:block;font-size:12px;font-weight:400;line-height:1.4;margin-top:6px;color:#526661}
@keyframes reaction-dart{0%{opacity:0;transform:translateX(-80px)}15%{opacity:1}100%{opacity:1;transform:translateX(20px)}}

.player-guide{padding:22px;width:min(94vw,520px);max-height:88dvh;overflow:hidden}.player-guide[open]{display:flex;flex-direction:column}.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;padding:0 4px 12px}.guide-heading h2{margin:0;font-size:28px}.guide-heading .close{float:none}.guide-scroll{overflow-y:auto;min-height:0;padding:0 4px 8px}.player-guide details{border-top:1px solid #d6cdbb;padding:12px 0;font-size:13px}.player-guide summary{font-weight:700;cursor:pointer;font-size:15px}.player-guide li{margin:8px 0}.player-guide ul{padding-left:20px}.guide-table{width:100%;border-collapse:collapse;margin:12px 0}.guide-table th,.guide-table td{text-align:left;padding:7px;border-bottom:1px solid #ded6c7;vertical-align:top}.guide-table kbd{white-space:nowrap;font:600 12px monospace}.guide-example{padding:12px;border-radius:10px;background:#e5eded;margin:12px 0}.guide-revision{font-size:11px;color:#65756f}.player-guide pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* v62: local membership and leaderboard preview, preserving the existing palette. */
.allowance-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#647671;width:100%;max-width:420px;margin:0 auto 6px}
.allowance-line button{border:0;background:none;color:inherit;text-decoration:underline;padding:7px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-label{font-size:10px!important;letter-spacing:.12em;font-weight:700;opacity:.8}
.board-tabs{display:flex;gap:6px;margin:12px 0}.board-tabs button{flex:1;background:transparent;color:inherit;border:1px solid #efc7ad;border-radius:9px;padding:10px 5px;font-size:13px}.board-tabs button[aria-pressed=true]{background:#fff3d8;color:#783b2b;font-weight:bold}
.preview-board{width:100%;border-collapse:collapse;text-align:left;font-size:15px}.preview-board td,.preview-board th{padding:12px 4px;border-bottom:1px solid #ffffff40}.preview-board th:last-child,.preview-board td:last-child{text-align:right}
#boardDescription,#boardMembership{font-size:14px;line-height:1.45}
.account-dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 30px);box-sizing:border-box;overflow:auto;padding:28px;background:#f6f1e6;color:#293f3d;border:1px solid #dcd4c4;border-radius:24px}
.account-dialog h2{padding-right:45px;font-size:30px}.account-dialog p{font-size:14px;line-height:1.5}.account-dialog label{display:block;margin:14px 0 6px;font-size:13px;font-weight:bold}.account-dialog input,.account-dialog select{box-sizing:border-box;width:100%;padding:12px;border:1px solid #bbc7c1;border-radius:9px;background:#fffaf0;color:#293f3d;font:inherit}.account-dialog .send{width:100%;margin-top:10px}.membership-card{background:#e8ded0;border-radius:12px;padding:16px;margin-top:16px}.membership-card strong{font-size:22px}.membership-card p{margin-bottom:0}.preview-footnote{font-size:11px!important;color:#677771}
@media(max-height:740px){.allowance-line{font-size:11px;margin-bottom:2px}.home-bottom .daily-button{padding-top:7px;padding-bottom:7px}}

/* v63: account in masthead; allowance belongs to the primary action. */
.home-title .brand-lockup{margin-right:auto;min-width:0}
.top-account{border:1px solid #b6c2b9;border-radius:18px;padding:8px 10px;background:transparent;color:#293f3d;font:600 12px system-ui;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:8px;margin-right:8px;min-height:38px}
.home-bottom #start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px}
#start #playAllowance{display:block;font:500 12px/1.35 system-ui;color:inherit;letter-spacing:0;text-transform:none;white-space:normal}
@media(max-width:380px){.home-title.masthead{padding-left:14px;padding-right:14px}.home-title .brand{font-size:29px}.top-account{padding:7px;max-width:74px;margin-left:4px;margin-right:4px}}

/* v65: single swipe carousel, button-driven tutorial, raised play actions. */
.home-card{grid-template-rows:auto minmax(0,1fr) auto clamp(20px,10dvh,100px)}
.home-card::after{content:"";display:block}
.home-bottom{border-top:0;background:transparent}
.tutorial-dialog{overflow:hidden;padding:18px}
.tutorial-dialog #homeIntro.inline-tutorial{min-height:0;gap:8px}
.tutorial-dialog #homeIntro.inline-tutorial h2{font-size:24px!important;margin:0!important;flex-shrink:0}
.inline-tutorial .tutorial-slides{display:block;overflow-x:hidden;overflow-y:auto;flex:1;min-height:0;touch-action:pan-y}
.inline-tutorial .tutorial-slides section{max-height:none;padding:0;overflow:visible}
.inline-tutorial .tutorial-slides section[hidden]{display:none}
.inline-tutorial .tutorial-demo{display:block;width:100%;height:clamp(80px,18dvh,155px);margin:0 auto;object-fit:contain}
.inline-tutorial .tutorial-slides h3{font:21px Georgia;margin:10px 0 6px}
.tutorial-dialog #homeIntro.inline-tutorial p{font-size:12px!important;line-height:1.45!important;margin:6px 0!important}
.inline-tutorial .tutorial-nav{padding-top:4px}.inline-tutorial .tutorial-nav button{background:#fff3d8;color:#783b2b;border:0;border-radius:8px;min-height:36px;padding:8px 12px}.inline-tutorial .tutorial-nav button:disabled{opacity:.45}
@media(max-height:650px){.home-card{grid-template-rows:auto minmax(0,1fr) auto 12px}.inline-tutorial .tutorial-demo{height:80px}.tutorial-dialog #homeIntro.inline-tutorial h2{font-size:20px!important}}

/* v66: integrated illustration headings and larger animated tutorial scenes. */
.inline-tutorial .tutorial-demo{width:100%;height:auto;max-height:clamp(180px,36dvh,320px);margin:0 auto 10px;object-fit:contain;border-radius:14px}
.tutorial-dialog #homeIntro.inline-tutorial p{margin:8px 0!important}
@media(max-height:650px){.inline-tutorial .tutorial-demo{height:auto;max-height:210px}}

/* v67: one instruction and one animation, without competing text layers. */
.inline-tutorial .tutorial-slides{overflow:hidden;display:flex;flex-direction:column}
.inline-tutorial .tutorial-slides section{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0}
.inline-tutorial .tutorial-slides section[hidden]{display:none}
.inline-tutorial .tutorial-demo{width:100%;height:100%;max-height:100%;margin:0;object-fit:contain}

/* v68: matching serif instructions and gentler, longer tutorial movements. */
.tutorial-demo [class*="demo-"]{animation-duration:6s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.tutorial-demo .demo-move-0,.tutorial-demo .demo-move-1,.tutorial-demo .demo-move-2,.tutorial-demo .demo-ring-move,.tutorial-demo .demo-sailing{will-change:transform,opacity}
@keyframes demo-c{0%,8%{transform:translate(0,0)}28%,86%{transform:translate(74px,-72px)}100%{transform:translate(0,0)}}
@keyframes demo-a{0%,28%{transform:translate(0,0)}48%,86%{transform:translate(59px,-72px)}100%{transform:translate(0,0)}}
@keyframes demo-t{0%,48%{transform:translate(0,0)}68%,86%{transform:translate(44px,-72px)}100%{transform:translate(0,0)}}

/* v72: sequential score/weight callouts; each circle travels from value to label. */
.tutorial-demo .demo-score-ring{animation-name:tutorial-score-ring;transform-origin:0 0}
.tutorial-demo .demo-weight-ring{animation-name:tutorial-weight-ring;transform-origin:0 0}
@keyframes tutorial-score-ring{0%{opacity:0;transform:translateX(0) scaleX(1)}6%,16%{opacity:1;transform:translateX(0) scaleX(1)}34%,43%{opacity:1;transform:translateX(97px) scaleX(1.6)}49%,100%{opacity:0;transform:translateX(97px) scaleX(1.6)}}
@keyframes tutorial-weight-ring{0%,49%{opacity:0;transform:translateX(0) scaleX(1)}55%,65%{opacity:1;transform:translateX(0) scaleX(1)}83%,93%{opacity:1;transform:translateX(104px) scaleX(1.9)}100%{opacity:0;transform:translateX(104px) scaleX(1.9)}}
@media(prefers-reduced-motion:reduce){.tutorial-demo .demo-score-ring,.tutorial-demo .demo-weight-ring{animation:none!important;opacity:.75}}

/* v74: inactive tutorial pages never participate in flex sizing. */
#tutorialSlides > section[hidden]{display:none!important}
#tutorialSlides > section:not([hidden]){flex:1 1 auto;width:100%;height:100%;min-height:0}

/* v77: daily title and countdown share one line. */
.daily-heading{display:flex;align-items:baseline;justify-content:center;gap:12px;white-space:nowrap}
.daily-heading #dailyCountdown{display:inline-block;margin:0;letter-spacing:.5px;font-size:14px}
@media(max-width:350px){.daily-heading{gap:8px;font-size:14px}.daily-heading #dailyCountdown{font-size:13px}}

/* v78: circular WR emblem and quiet ocean backdrop. */
.brand-emblem{display:block;width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.brand-line{gap:7px}.brand-version{font-size:10px}
.home-screen{background:linear-gradient(180deg,#f3f3e9 0%,#e6efeb 40%,#c4dfe1 100%)}
.home-seascape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.home-card{position:relative;z-index:1}
.home-title.masthead{border-bottom:0}
.home-water-back{animation:home-water-drift 24s ease-in-out infinite alternate}
.home-water-front{animation:home-water-drift 31s ease-in-out infinite alternate-reverse}
@keyframes home-water-drift{from{transform:translateX(-12px)}to{transform:translateX(16px)}}
#dailyCountdown{display:block;margin-top:3px;font-size:14px;font-weight:500;letter-spacing:1px}
.top-account{background:#f6f1e780}
@media(max-width:400px){.brand-line .brand{font-size:24px}.brand-emblem{width:32px;height:32px}.brand-line{gap:5px}.home-title.masthead{padding-left:14px;padding-right:14px}.top-account{font-size:11px;padding:7px}.brand-version{font-size:9px}}
@media(prefers-reduced-motion:reduce){.home-water{animation:none!important}}

/* v79: opaque secondary action and more distinct coastal colours. */
.home-screen{background:linear-gradient(180deg,#d7e8e8 0%,#c5dfe2 43%,#92bec8 100%)}
.home-bottom .daily-button{background:#fff3d8;border:1px solid #b87958;box-shadow:0 3px 0 #b3a186;color:#91462f}
.home-bottom .daily-button:disabled{opacity:1;background:#e6dfcf;color:#757e76;border-color:#b8b5a6;box-shadow:0 3px 0 #b8b5a6}
.top-account{background:#f6f1e7}
.carousel-nav button{background:transparent}
.carousel-nav button::after{background:#e9e1d0}
.carousel-nav button[aria-current=true]{background:transparent}

/* v80: separate the home masthead from the coastal scene. */
.home-title.masthead{border-bottom:0}
.home-title .brand-line{position:relative;width:max-content}
.home-title .brand-line::after{content:"";position:absolute;left:0;right:-8px;bottom:-12px;height:2px;background:var(--accent)}


/* Version 84: tutorial overlay, hidden previews, raft buoyancy visual. */
.tutorial-dialog::backdrop{background:#2c494bb3;backdrop-filter:blur(2px)}
.tutorial-dialog .tutorial-heading{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:6px}
.tutorial-dialog .tutorial-heading h2{font:24px Georgia;margin:0;color:#fff6e6}
.tutorial-dialog .tutorial-close{float:none;width:40px;height:40px;font-size:26px;line-height:1;border:2px solid #fff6e6;color:#fff6e6;background:#ffffff22;outline:0}
.tutorial-dialog .tutorial-close:hover,.tutorial-dialog .tutorial-close:focus-visible{background:#fff6e6;color:var(--accent)}
.tutorial-dialog #homeIntro{height:auto;max-height:calc(90svh - 110px);display:flex;flex-direction:column;min-height:0}
.tutorial-dialog .tutorial-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;flex-shrink:0}
.tutorial-dialog .tutorial-nav span{color:#fff6e6}
.brand-version{display:none}
.show-version .brand-version{display:inline}
.about-version{color:var(--muted);font-size:12px}
.accounts-preview[hidden]{display:none!important}
.raft{overflow:visible}
/* Version 84: result words never break mid-word; the marker tab only widens for rows that need it. */
.review-heading .review-word{white-space:nowrap;overflow-wrap:normal}
.review-heading.has-markers{grid-template-columns:minmax(min-content,min(var(--bonus-tab,6em),calc(100% - 37px))) 34px}
.review-word.long-word{font-size:12px;letter-spacing:-.2px}
.tutorial-dialog #homeIntro:focus{outline:0}
/* Version 84: welcome card with tagline and news replaces the About card (About stays in the menu). */
.news-slide .slide-title{line-height:1.08}
.news-tagline{font-size:15px;line-height:1.55;margin:0 0 14px}
.news-heading{font:600 11px system-ui;letter-spacing:1.4px;text-transform:uppercase;color:#fff0d9;margin:6px 0 8px}
.news-list{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.5}
.news-list li{padding:9px 0;border-top:1px solid #ffffff40}
.news-list li:last-child{border-bottom:1px solid #ffffff40}
.news-list strong{color:#fff6e6}
/* Version 85: stable desktop shell height; Daily Challenge typography. */
@media (min-width:721px){
 .game{display:flex;flex-direction:column;min-height:min(840px,calc(100dvh - 64px))}
 .river{flex:1 1 auto;height:auto;min-height:300px}
 .game>header,.game>.stats,.game>.controls,.game>.dock-area{flex-shrink:0}
}
.daily-button{padding:12px 10px 11px;border:2px solid var(--accent);box-shadow:0 4px 0 #b3a186}
.daily-title{display:block;font:700 19px/1.1 system-ui,-apple-system,sans-serif;color:var(--accent);letter-spacing:.2px}
.daily-when{display:block;margin-top:5px;font:600 13px/1.2 system-ui,-apple-system,sans-serif;color:var(--ink)}
.daily-when #dailyCountdown{font-variant-numeric:tabular-nums;letter-spacing:1px}
.daily-button small{display:block;margin-top:4px;font-size:11px;color:#6c5a4c}
.home-bottom .daily-button:disabled .daily-title{color:#6b7d79}
.home-bottom .daily-button:disabled .daily-when{color:#4b5a57}
/* Version 86: fixed raft, moving waterline with wavetops. --water is the water level in px above the raft's bottom. */
.raft-zone{--lift:0}
.raft{--water:-14px}
.raft .raft-water{display:none;position:absolute;left:-12px;right:-12px;bottom:-14px;height:calc(14px + var(--water));min-height:0;border-radius:0 0 16px 16px;background:linear-gradient(#a9cfd4c4,#8fbac0e6 60%,#86b3b9f0);pointer-events:none;z-index:2;transition:height .35s cubic-bezier(.4,.7,.3,1);animation:raft-water-bob 3.4s ease-in-out infinite}
.raft .raft-water::before{content:'';position:absolute;left:0;right:0;top:-11px;height:12px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 360 12%22 width=%22360%22 height=%2212%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,12L0,10Q30,9.6 40,3Q50,9.6 62,10L92,10Q111,9.6 120,2Q130,9.6 150,10L176,10Q185,9.6 191,4.5Q197,9.6 208,10L240,10Q257,9.6 266,2.5Q275,9.6 294,10L316,10Q326,9.6 331,3.5Q336,9.6 350,10L360,10L360,12Z%22 fill=%22%23a9cfd4%22 fill-opacity=%220.78%22/%3E%3C/svg%3E") 0 0/360px 12px repeat-x;animation:raft-wavetops 14s linear infinite}
.raft .raft-water::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#e8f5f3aa}
.raft.sinking{filter:saturate(.9)}
@keyframes raft-water-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes raft-wavetops{to{background-position:360px 0}}
@media (prefers-reduced-motion: reduce){.raft .raft-water,.raft .raft-water::before{animation:none;transition:none}}
/* Version 86: completed Daily Challenge reads as an achievement, not a disabled control. */
.home-bottom .daily-button:disabled.complete{background:#e4efe6;border-color:#5f8f7a;box-shadow:0 4px 0 #9fb8a9;color:var(--ink)}
.home-bottom .daily-button:disabled.complete .daily-title{color:#2f6a53}
.home-bottom .daily-button:disabled.complete .daily-when{color:var(--ink);margin-top:6px}
.daily-button small[hidden]{display:none}
/* Version 87: result markers share one centred slot; the drawn ring replaces the emoji; ring tile shown as a mini tile. */
.review-markers{display:flex!important;align-items:center;justify-content:center;gap:4px;padding-top:2px}
.review-heading.has-markers{grid-template-columns:minmax(min-content,min(var(--bonus-tab,6em),calc(100% - 45px))) 42px}
.review-ring{display:inline-block;width:18px;height:18px;line-height:0}
.review-ring svg{width:100%;height:100%;display:block}
.review-ring-tile{position:relative;display:inline-block;width:12px;height:13px;border-radius:3px;background:#fdf6e3;border:1.5px solid #c8b690;box-shadow:0 1px 0 #b9ab8e;margin:6px 0 0 7px;line-height:0}

.inline-ring{display:inline-block;width:16px;height:16px;vertical-align:-3px;line-height:0}
.inline-ring svg{width:100%;height:100%;display:block}
.review-special{font-weight:800;font-size:13px}
/* Version 89/90: wavetops are five shallow pointed crests of uneven height and spacing on a 360 px tile, drifting one tile per 14 s. */
/* Version 92: water only when heavy. -1: laps the tiles; -2 or heavier: deep. */
.raft.sinking .raft-water{display:block;--water:0px}
.raft.sinking.deep .raft-water{--water:14px}
.raft.rescued .raft-water{display:none}
/* Version 93: ×2 and clock markers are mini tiles too; the badge sits on the corner like the real tile. */
.review-ring-tile .special-badge{position:absolute;left:-10px;top:-10px;width:17px;height:17px;padding:0;border:0;background:none;box-shadow:none;line-height:0;font:900 9px/15px Arial,sans-serif;text-align:center}
.review-ring-tile .special-badge svg{display:block;width:100%;height:100%}
.review-tile-double .special-badge{width:15px;height:15px;left:-9px;top:-9px;border-radius:50%;background:#fff8eb;border:1.5px solid #c8b690;color:#293e3c;box-shadow:0 1px 2px #293e3c33;line-height:12px}
.review-tile-double{border-width:2px}
/* Version 94: badge offsets apply once; ×2 text keeps tile ink regardless of the card's small-text colour. */
.home-slide .review-ring-tile .special-badge,.result-card .review-ring-tile .special-badge,dialog .review-ring-tile .special-badge{margin:0;color:#293e3c;display:block}
.review-ring-tile .special-badge svg{position:static}
/* Version 95: shallower water (10/22 px) and lighter tint so the letters stay readable. */
.raft .raft-water{background:linear-gradient(#a9cfd4a6,#8fbac0cc 60%,#86b3b9d9)}
/* Version 96: level one is the wave peaks along the raft's bottom edge (water body at 0); level two 14 px. */
/* Version 97: the whole tile stays visible at both levels. -1: a thin waterline with small peaks at the raft's
   bottom edge (water body 6 px below). -2 or heavier: the former level one (wave peaks along the bottom edge). */
.raft.sinking .raft-water{--water:-6px}
.raft.sinking .raft-water::before{top:-7px;height:8px;background-size:360px 8px}
.raft.sinking.deep .raft-water{--water:0px}
.raft.sinking.deep .raft-water::before{top:-11px;height:12px;background-size:360px 12px}
/* Version 97: stuck on an overloaded word for two seconds — the buoyancy figure pulses gently. */
.lift.stuck b{animation:lift-pulse 1.5s ease-in-out infinite}
@keyframes lift-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.lift.stuck b{animation:none;text-decoration:underline dotted}}
.voyage-score{display:flex;align-items:baseline;gap:10px}.end-percent{font:26px Georgia;letter-spacing:0;opacity:.9;color:inherit}.end-percent:empty{display:none}
.history-form{font-size:12px;line-height:1.5;margin:0 0 8px;color:inherit;opacity:.9}.history-form:empty{display:none}

/* v97: real accounts, leaderboards and membership */
.rank-note{font-size:12px;color:inherit;opacity:.85;margin:4px 0 0;min-height:0}.rank-note:empty{display:none}
.account-dialog .account-offline{background:#fff3d8;color:#783b2b;border-radius:10px;padding:10px 12px;font-size:13px}
.account-dialog #accountMessage{min-height:1.4em;margin:12px 0 0;font-size:14px;color:#2f5d4c}.account-dialog #accountMessage.error{color:#9a3b2b}
.account-dialog .code-sent{margin:4px 0 0;font-size:14px}
.account-dialog .tutorial-button{width:100%;margin-top:10px;color:#293f3d;border-color:#b6c2b9;background:#fffaf0;padding:11px 14px}
.account-dialog .membership-card .send{margin-top:14px}
.account-actions{margin-top:18px;border-top:1px solid #dcd4c4;padding-top:6px}
.account-dialog details.danger{margin-top:12px;font-size:13px}.account-dialog details.danger summary{cursor:pointer;color:#8a4a3c;font-weight:600;padding:6px 0}.account-dialog details.danger p{margin:6px 0}
.account-dialog label.check{display:flex;align-items:center;gap:8px;font-weight:normal;margin:8px 0}.account-dialog label.check input{width:auto;margin:0}
.account-dialog .preview-footnote a{color:inherit}
.preview-board tr.you td{font-weight:700;color:#783b2b;background:#fff3d880}
.preview-board td:nth-child(2){overflow-wrap:anywhere}

/* Version 98: the WordRafts house flag flies from the raft's left post, blowing with the waves. Cloth, emblem,
   lettering and shading are one flat drawing pushed through a single travelling displacement map. */
.raft .raft-flag{position:absolute;left:9px;bottom:calc(100% - 5px);width:80px;height:80px;z-index:3;pointer-events:none;overflow:visible}
.departing-raft .raft-flag{z-index:3}
.lift.ringed{color:var(--blue)}.lift.ringed b{font-size:20px;line-height:1}