:root{color-scheme:light;--ink:#254957;--muted:#728991;--cream:#f5f3eb;--mint:#9be1cc;--board:#163442;--line:#dce5e4;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;overflow:hidden;background:#102731;color:var(--ink)}[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e9b46d;outline-offset:4px}header,aside,.game-note{display:none!important}
.play-layout{position:relative;width:min(504px,100vw,calc(100dvh * .56));aspect-ratio:504/900;container-type:inline-size;isolation:isolate}.play-card{position:absolute;inset:0;overflow:hidden;background:var(--board)}.board,#stage{position:absolute;inset:0;width:100%;height:100%}#stage canvas{border-radius:0}.play-heading{position:absolute;z-index:3;top:5.9%;left:25%;width:50%;text-align:center;color:#f6f3e9;pointer-events:none}#game-title{display:inline-block;font-size:5.2cqw;font-weight:750;letter-spacing:.5px;border:0;background:transparent;color:inherit;pointer-events:auto}#game-title[role=button]:after{content:'⌄';font-size:3cqw;opacity:.6;margin-left:6px}.ring-difficulty{position:absolute;z-index:4;top:3%;left:50%;transform:translateX(-50%);font-size:2.15cqw;letter-spacing:2px;color:#a8c7cc;font-weight:650;white-space:nowrap}
#sound,#ring-back,#ring-top-restart{position:absolute;z-index:12;top:3.4%;width:9cqw;height:9cqw;padding:2.4cqw;border:1px solid #ffffff15;border-radius:3cqw;background:#ffffff0c;color:#d3e6e5;display:grid;place-items:center}#sound{right:3.6%}#sound img,#ring-back img,#ring-top-restart img{width:100%;height:100%;filter:brightness(0) invert(1);opacity:.85}#ring-back{left:3.6%}#ring-top-restart{right:14.4%}#sound[aria-pressed=true]{opacity:.55}#level{position:absolute;right:-40%;top:2cqw;width:8cqw;height:8cqw;border:1px solid #ffffff20;border-radius:2cqw;background:#294b58;color:#fff;font-size:2.5cqw}#ring-jump-button,#mode{display:none}
.hud{position:absolute;z-index:3;top:12.5%;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;color:#9bb7bd;font-size:2.4cqw;pointer-events:none}.hud #status{order:2;font-size:2.35cqw;letter-spacing:.3px}.hud>span:last-child{padding:1.3cqw 3cqw;border:1px solid #ffffff12;border-radius:20px;color:#c1d9d9;background:#ffffff04}.hud b{color:#f5f1e5;font-size:2.8cqw;font-weight:650}.hud time{font-variant-numeric:tabular-nums;color:#9bb7bd}
.toolbar{position:absolute;z-index:4;bottom:4%;left:8%;right:8%;display:flex;justify-content:center;gap:4cqw}.toolbar button{display:flex;flex:1;max-width:25cqw;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:1.6cqw;height:18cqw;border:1px solid #ffffff14;border-radius:4.3cqw;background:#254957;color:#d3e3e3;font-size:2.7cqw;font-weight:600;box-shadow:0 5px 0 #0a202b50;transition:transform .15s,background .15s}.toolbar button img{width:6.5cqw;height:6.5cqw;filter:brightness(0) invert(1);opacity:.9}.toolbar #hint{background:var(--mint);color:#204d4c;border-color:var(--mint)}.toolbar #hint img{filter:none;opacity:1}.toolbar button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #0a202b50}.toolbar button:disabled{opacity:.30}.toolbar #ring-unlock{background:#f2d9aa;color:#5d4f39;border-color:#f2d9aa}.toolbar #ring-unlock img{filter:none}body[data-ring-screen] .toolbar #restart,#next{display:none}.toolbar button.working img{animation:hint-pulse .8s ease-in-out infinite}.toolbar button.bulge{animation:button-bulge .5s ease-out}@keyframes hint-pulse{50%{transform:scale(1.14);opacity:.55}}@keyframes button-bulge{35%{transform:scale(1.1)}}
#paused{position:absolute;inset:0;display:grid;place-items:center;z-index:5;background:#163442ed;color:#f5f3eb;font-size:5cqw}.toast{position:fixed;z-index:30;left:50%;bottom:19%;transform:translateX(-50%);max-width:min(85vw,370px);padding:13px 20px;background:#f5f3eb;color:#254957;border-radius:16px;box-shadow:0 8px 30px #071d3540;font-size:13px;line-height:1.6;text-align:center}
/* Lifting poses express effort; the pictured nuts do not preview board size. */
#ring-menu{position:absolute;inset:0;z-index:10;background:#f7f5ee;color:var(--ink);overflow:clip;--difficulty-color:#28765f;--difficulty-soft:#e4f1e8}
#ring-menu:before{content:'';position:absolute;inset:12% -25% 30%;background:radial-gradient(ellipse,var(--difficulty-soft),transparent 67%);pointer-events:none;transition:background .2s}
.ring-menu-banner{position:absolute;left:8%;right:8%;top:5.7%}.menu-kicker{display:flex;align-items:center;gap:2.2cqw;font-size:2.7cqw;font-weight:700;color:#54746e;letter-spacing:.5px}.menu-kicker span{font-size:1.85cqw;letter-spacing:1.5px;font-weight:550;opacity:.65}
.ring-menu-banner h1{margin:3.5cqw 0 2cqw;font-size:7.4cqw;font-weight:750;letter-spacing:-.5px;line-height:1.28}.ring-menu-banner h1 em{font-style:normal;color:var(--difficulty-color);transition:color .18s}.ring-menu-banner p{font-size:2.8cqw;color:#7d8e87;margin:0;line-height:1.7}
.ring-preview{position:absolute;top:25.5%;left:6%;right:6%;height:32.5%;border:1px solid #ffffff;border-radius:6cqw;background:#163442;box-shadow:0 8px 24px #28443718;overflow:hidden}
.ring-preview-top{position:absolute;z-index:1;top:6%;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;font-size:2.5cqw;color:#a8c7cc}.ring-preview-top span:last-child{font-size:2.35cqw;letter-spacing:1px;color:#c0e5d8;font-weight:650;background:#ffffff0d;padding:1cqw 1.8cqw;border-radius:10px;font-variant-numeric:tabular-nums}
.ring-face{position:absolute;inset:6% 22% 22%}.ring-effort-figure{display:block;width:100%;height:100%;object-fit:contain;user-select:none}.ring-face.changing{animation:illustration-swap .22s ease-out}@keyframes illustration-swap{from{transform:translateY(4px);opacity:.45}to{transform:none;opacity:1}}
.menu-selector{position:absolute;bottom:6%;left:6%;right:6%;display:flex;align-items:baseline;gap:2cqw}#ring-difficulty-name{font-size:5.1cqw;font-weight:750;margin:0;color:#f5f3eb}#ring-difficulty-english{font-size:2.2cqw;letter-spacing:1.6px;color:#b5d2d2;opacity:.8}.ring-preview-hint{margin-left:auto;font-size:2.55cqw;color:#c0e5d8;font-weight:600;background:#ffffff0d;padding:1.2cqw 2cqw;border-radius:2cqw;white-space:nowrap}
#ring-difficulty-note{position:absolute;top:58.7%;left:5%;right:5%;margin:0;text-align:center;font-size:2.8cqw;line-height:1.7;color:#6c8178}
.ring-difficulty-buttons{position:absolute;top:63.5%;left:8%;right:8%;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw}.ring-difficulty-buttons button{height:22cqw;padding:1.2cqw .3cqw 1.8cqw;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:3.5cqw;border:2px solid transparent;background:#163442;color:#d2e2df;font-size:2.85cqw;transition:border-color .16s,color .16s,transform .16s;min-width:0}.ring-difficulty-buttons button:hover{border-color:#8bb5ad}.ring-difficulty-buttons button[aria-pressed=true]{color:#fff;border-color:var(--difficulty-color);box-shadow:0 0 0 2px var(--difficulty-soft),0 4px 10px #25463820;transform:translateY(-3px)}.ring-difficulty-buttons button:active{transform:translateY(0)}
.difficulty-effort{display:block;width:100%;height:14.5cqw;object-fit:contain;user-select:none;pointer-events:none}
.ring-menu-bottom{position:absolute;left:8%;right:8%;bottom:6%}#ring-menu-progress{text-align:center;font-size:2.65cqw;color:#809086;margin:0 0 3cqw}#ring-play{display:flex;align-items:center;justify-content:space-between;gap:2cqw;width:100%;height:15cqw;padding:0 5cqw;background:var(--difficulty-color);border:0;border-radius:4cqw;color:#fff;box-shadow:0 4px 0 #183c3520;transition:background .16s}#ring-play strong{font-size:4cqw;font-weight:650}#ring-play-level{margin-left:auto;font-size:2.8cqw;opacity:.8}#ring-play:after{content:'→';font-size:5cqw}#ring-help{display:block;margin:3.5cqw auto 0;background:none;border:0;color:#7d9285;font-size:2.7cqw;padding:1cqw 3cqw}#ring-entry-error{position:absolute;top:58.7%;left:8%;right:8%;font-size:2.5cqw;color:#a83b4a;line-height:1.6;margin:0;text-align:center}.has-entry-error #ring-difficulty-note{visibility:hidden}.menu-footer{position:absolute;bottom:2.7%;width:100%;text-align:center;letter-spacing:.5px;color:#98a59c;font-size:2.2cqw}
body[data-ring-screen=difficulty] .play-heading,body[data-ring-screen=difficulty] .hud,body[data-ring-screen=difficulty] .toolbar,body[data-ring-screen=difficulty] #ring-back,body[data-ring-screen=difficulty] #ring-top-restart{display:none}body[data-ring-screen=difficulty] #sound{background:#e6eae0;border-color:#dce3d7}body[data-ring-screen=difficulty] #sound img{filter:none}
dialog{width:min(86vw,360px);border:1px solid #dde4db;border-radius:25px;padding:28px;background:var(--cream);color:var(--ink);box-shadow:0 20px 90px #061a3860}dialog::backdrop{background:#071f2bab;backdrop-filter:blur(5px)}dialog h2{font-size:23px;margin:0 0 18px}dialog p,dialog label{font-size:14px;line-height:1.9;color:#71867f}dialog label{display:block;margin:0 0 12px}dialog button{display:block;width:100%;padding:14px;border-radius:13px;border:1px solid #d6dfd5;background:transparent;color:#486558;margin-top:12px}.primary,#ring-help-dialog button{background:#285949;color:white;border-color:#285949}dialog input{width:100%;padding:14px;border:1px solid #c6d5c8;background:#fffef8;border-radius:12px;color:var(--ink);font-size:22px;text-align:center}.result-mark{font-size:42px;color:#6aa68a}#result-kicker{font-size:10px;letter-spacing:2px;color:#829183}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}