*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101f2a;color:#f8f6eb;font-family:system-ui,-apple-system,"PingFang SC",sans-serif;-webkit-user-select:none;user-select:none}body{display:flex;justify-content:center;align-items:center}#stage{position:relative;width:min(100vw,50dvh);height:min(100dvh,200vw);max-width:520px;max-height:1040px;overflow:hidden;background:#153340;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}header{position:absolute;top:max(22px,env(safe-area-inset-top));left:7%;right:7%;display:flex;align-items:center;gap:20px;pointer-events:none}header small{display:block;font-size:10px;letter-spacing:2px;opacity:.55;margin-bottom:3px}header strong{font-size:28px;font-weight:400;letter-spacing:-1px}header .best{margin-left:auto;text-align:right}header .best span{font-size:16px;color:#c3d5c9}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}#settings{pointer-events:auto;font-size:25px;color:#b9ccc5;padding:10px;margin-right:-10px}#hint{position:absolute;top:33%;left:0;width:100%;text-align:center;font-size:20px;letter-spacing:3px;pointer-events:none;transition:opacity .4s}#hint span{display:block;font-size:11px;letter-spacing:1px;color:#b5ccca;margin-top:13px}#readout{position:absolute;top:71%;width:100%;text-align:center;color:#d9ddd1;font-size:11px;letter-spacing:1px;pointer-events:none}footer{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));width:100%;text-align:center;font-size:10px;letter-spacing:3px;color:#9bb0b1;pointer-events:none}footer span{font-size:7px;letter-spacing:2px;margin-left:8px;opacity:.6}#result{position:absolute;top:30%;width:100%;text-align:center}#result small{font-size:13px;color:#c3d5c9;letter-spacing:2px}#result strong{display:block;font-size:64px;font-weight:250;margin:10px}#result p{font-size:12px;color:#a9c3c1}#again,#resume{border:1px solid #a3bca080;border-radius:30px;padding:14px 26px;background:#34534d99;margin-top:18px;font-size:14px;letter-spacing:2px}#paused{position:absolute;inset:0;background:#142d3b99;backdrop-filter:blur(8px);display:grid;place-items:center}#paused[hidden],#result[hidden]{display:none}dialog{width:86%;max-width:380px;background:#1c3943;color:#dbe6da;border:1px solid #8ba9a650;border-radius:22px;padding:25px;box-shadow:0 25px 100px #071b25aa}dialog::backdrop{background:#08151b99;backdrop-filter:blur(5px)}dialog h2{font-size:18px;font-weight:500;margin:14px 0 28px}dialog label{display:flex;justify-content:space-between;align-items:center;margin:20px 0;font-size:14px}dialog small{font-size:10px;color:#9aafab}dialog p{font-size:11px;line-height:1.9;color:#9eb7b5}dialog input{accent-color:#bedda6;width:20px;height:20px}.close{position:absolute;right:12px;top:9px;font-size:27px}

/* Sky edition */
html,body{background:#a5cbd0;color:#355a65}#stage{background:#bdd9d7}header small{opacity:.7}header .best span,#settings{color:#44636b}#hint span{color:#5b7b81}#readout{color:#647264}footer{color:#6b8179}#height{position:absolute;top:100px;left:7%;font-size:11px;letter-spacing:1px;color:#527780;pointer-events:none}#result small,#result p{color:#57757a}#again,#resume{background:#f7e6baca;border-color:#a68e5a66;color:#53675e}#paused{background:#c3dad899}dialog{background:#eaf0e2;color:#41636a}dialog p,dialog small{color:#647e7d}

/* B: luminous sky and restrained translucent controls */
html,body{background:#89c6ee;color:white}#stage{background:#66b7e9}header small,header .best span,#settings,#hint span,#height,#readout,footer{color:#fff;text-shadow:0 1px 4px #205d8999}header>div:first-child{background:#4f9ed088;border:1px solid #ffffffad;border-radius:24px;padding:5px 13px;backdrop-filter:blur(6px)}header small{opacity:.94}#hint{text-shadow:0 1px 5px #24638eaa}#again,#resume{background:#4d9fd5bb;color:white;border-color:#ffffffaa}dialog{background:#dff2fc;color:#245a79}dialog p,dialog small{color:#447087}
/* A: soft picture-book ink on warm paper */
html,body{background:#d9e7e8;color:#755f58}#stage{background:#dce9ee}header small,header .best span,#settings,#hint span,#height,#readout,footer{color:#735f58;text-shadow:0 1px 4px #fff9}header>div:first-child{background:#fffaf0d9;border:1px solid #fff8;border-radius:24px;padding:5px 13px}#hint{color:#755f58;text-shadow:0 1px 5px #fff}#again,#resume{background:#fff4dd;color:#735d54;border-color:#bd9c8788}dialog{background:#fff9ed;color:#725d55}dialog p,dialog small{color:#856f65}
/* 简洁的绘本计数与结算 */
header .counter{display:flex;align-items:center;gap:8px;padding:6px 12px}header .counter strong{font-size:23px;font-weight:650;color:#795d54}header .rainbow-icon{font-size:23px;line-height:1}#settings{margin-left:auto}#readout{top:68%;width:auto;left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:18px;background:#fff9e8dc;color:#745f58;text-shadow:none}#readout:empty{display:none}#result{left:12%;width:76%;padding:24px 14px 28px;border-radius:32px;background:#fff9eaf2;border:2px solid #e4c4ab;box-shadow:0 12px 28px #806f5830;color:#745e55}#result strong{font-size:40px;font-weight:600;margin:8px}#result p{font-size:16px;color:#745e55}#again{padding:12px 26px;border:2px solid #e4b9aa;background:#fce2d6;color:#765b52;border-radius:30px;box-shadow:inset 0 2px 0 #ffffffaa,0 3px 0 #d8b7a8;font-weight:600;letter-spacing:1px}
/* Matching crayon rainbow artwork in counter and result. */
header .rainbow-icon{width:35px;height:27px;object-fit:contain}#final{display:flex;align-items:center;justify-content:center;gap:8px}#final .rainbow-icon{width:55px;height:42px;object-fit:contain}#bird-advice{font-size:12px;color:#987668;margin:6px 0 0}

#bubble3d{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}header,#hint,#height,#readout,#result,#paused,footer{z-index:2}