:root{--ink:#292235;--paper:#faf6ed;--purple:#71509c;--gold:#e2b752}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}header{height:84px;max-width:1440px;margin:auto;padding:0 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfd8ce}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;font-weight:900;font-size:22px;gap:12px}.brand-icon{background:var(--purple);color:#ffe49b;border-radius:12px;padding:4px 11px;font-size:30px}.edition{font-size:9px;letter-spacing:1.8px;margin-left:16px;font-weight:500}header button{background:transparent;border:0;font-size:13px;padding:12px}main{max-width:1288px;padding:38px 44px 0;margin:auto}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:#87798e;display:flex;gap:20px}.eyebrow span{color:#b5a89a}.headline{display:flex;align-items:center;justify-content:space-between;margin:14px 0 27px}h1{font-size:34px;letter-spacing:1px;margin:0;font-weight:900}.headline p{font-size:13px;color:#8b8190}.game-shell{border:2px solid var(--ink);border-radius:17px;overflow:hidden;background:#efe7d9;box-shadow:0 6px 0 #ddd3c3}.game-top,.game-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:#fffaf0;font-size:12px;font-weight:700}.game-top{height:48px;border-bottom:2px solid var(--ink)}#hearts{color:#c1677b;letter-spacing:6px;font-size:19px}#skill-label{font-size:11px;color:var(--purple)}.viewport{position:relative;aspect-ratio:2/1;overflow:hidden;background:#e4e0f0}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.game-bottom{font-size:10px;color:#948878;border-top:2px solid var(--ink);height:35px;font-weight:400}.dot{display:inline-block;width:6px;height:6px;background:#6d9b7d;border-radius:50%;margin-right:6px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(90deg,#f6eddeed,#f5eddfbf 43%,#f2e7d93d);padding:30px}.overlay.hidden{display:none}.intro{align-items:flex-start;text-align:left;padding:5% 7%}.overline{font-size:11px;letter-spacing:3px;color:#7c628e;font-weight:700}.overlay h2{font-size:clamp(26px,3.5vw,48px);line-height:1.3;margin:14px 0}.overlay p{font-size:13px;line-height:1.9;color:#72677c;margin:0 0 20px}.overlay .actions{display:flex;gap:10px;flex-wrap:wrap}.primary,.secondary{border:2px solid var(--ink);border-radius:9px;padding:12px 24px;font-weight:800;font-size:13px;box-shadow:0 3px 0 var(--ink)}.primary{color:white;background:var(--purple)}.secondary{background:#fff8e9}.overlay .note{margin-top:18px;font-size:10px;color:#8e8295}.level-grid{display:flex;gap:12px;margin:16px}.level-grid button{max-width:190px;text-align:left;line-height:1.8}.level-grid button:disabled{opacity:.45;cursor:not-allowed}.under{display:flex;justify-content:space-between;align-items:center;padding:20px 0 28px}.controls{display:flex;gap:21px;font-size:10px;color:#84798b}.controls span{display:flex;align-items:center;gap:5px}kbd{font-family:inherit;border:1px solid #d5cbbd;box-shadow:0 2px 0 #e5dcce;padding:3px 6px;border-radius:4px;background:#fffdf7;font-size:10px}.under button{font-size:11px;border:0;background:transparent}.chapters{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ded5c8;border-bottom:1px solid #ded5c8}.chapters article{padding:25px 25px 26px 0}.chapters article+article{padding-left:28px;border-left:1px solid #ded5c8}.chapter-number{font-size:9px;letter-spacing:1.5px;color:#a488aa}h2{font-size:16px;margin:12px 0 8px}.chapters p{font-size:11px;color:#918594;margin:0 0 17px}.tag{font-size:9px;padding:5px 8px;border:1px solid #ddd1e1;border-radius:4px;color:#80658a}footer{padding:23px 0;display:flex;justify-content:space-between;font-size:9px;color:#a397a4}#toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#33273be6;color:white;font-size:12px;border-radius:8px;padding:10px 18px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}.touch{display:none;position:absolute;bottom:12px;left:15px;right:15px;justify-content:space-between;pointer-events:none}.touch>div{display:flex;gap:8px}.touch button{pointer-events:auto;touch-action:none;user-select:none;width:52px;height:52px;border:2px solid #3b2c4b88;border-radius:50%;background:#fff7dfb8;color:#503765;font-size:21px;box-shadow:0 3px 0 #49345255}.touch button.active{background:#d5b2ed}.touch small{display:block;font-size:8px}.rotate{display:none}@media(pointer:coarse){.touch{display:flex}.controls{visibility:hidden}}@media(max-width:800px){header{height:60px;padding:0 20px}.edition{display:none}main{padding:24px 18px 0}.headline{display:block}h1{font-size:26px}.headline p{font-size:12px}.controls{gap:8px}.chapters p{line-height:1.7}.game-top{padding:8px 12px;font-size:10px}#hearts{font-size:14px;letter-spacing:2px}.overlay p{font-size:11px}.intro{padding:4% 5%}.overlay h2{margin:8px 0}.overlay p{margin-bottom:12px}.primary,.secondary{padding:9px 15px}.overlay .note{margin-top:10px}.chapters article{padding:20px 10px}.chapters article+article{padding-left:15px}}@media(max-height:600px) and (orientation:landscape){header,.eyebrow,.headline,.under,.chapters,footer{display:none}main{padding:4px;max-width:1100px}.game-shell{border-radius:8px;max-width:calc((100dvh - 61px)*2);margin:auto}.game-top{height:30px;padding:3px 12px}.game-bottom{height:20px;padding:2px 12px}.overlay h2{font-size:27px}.overlay p{font-size:11px}.overlay .note{display:none}}

[hidden]{display:none!important}#mobile-pause{display:none;border:0;background:#e9ddeb;border-radius:4px;font-size:14px;padding:2px 8px}.viewport:not([data-playing="true"]) .touch{display:none}@media(pointer:coarse){#mobile-pause{display:block}.game-top{gap:8px}#level-label{flex:1}#hearts{white-space:nowrap}.game-bottom{font-size:9px}}

/* Mobile: a borderless landscape game, including when opened in portrait. */
@media (pointer:coarse) and (max-width:1100px), (max-width:600px){
 html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#211a2c}
 body{position:fixed;inset:0;touch-action:none}
 header,.eyebrow,.headline,.under,.chapters,footer,.rotate{display:none!important}
 main{position:fixed;left:0;top:0;width:100vw;height:100vh;width:100dvw;height:100dvh;max-width:none;padding:0;margin:0;overflow:hidden}
 .game-shell{position:relative;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#211a2c}
 .viewport{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
 .viewport canvas{width:100%;height:100%}
 .game-top{position:absolute;z-index:5;inset:0 0 auto;height:50px;padding:8px max(16px,env(safe-area-inset-right));gap:12px;background:linear-gradient(#241b3b99,transparent);border:0;color:#fff7e8;text-shadow:0 1px 3px #211a2c;pointer-events:none}
 .game-top button{pointer-events:auto}
 #level-label{font-size:11px;flex:1}
 #hearts{font-size:19px;letter-spacing:3px;color:#ffb5c6}
 #skill-label{font-size:11px;color:#ffedb3}
 #mobile-pause{display:block;background:#3324429e;color:#fff9e8;border:1px solid #fff4dc66;border-radius:7px;padding:5px 11px;font-size:17px}
 .game-bottom{display:none}
 .touch{display:flex;bottom:max(14px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
 .touch button{width:58px;height:58px;background:#fff4e3ba}
 .overlay{background:linear-gradient(90deg,#251a3dcc,#251a3d88 50%,#251a3d11);color:#fff7e9;padding:25px}
 .overlay p,.overlay .overline,.overlay .note{color:#fff0d7;text-shadow:0 1px 3px #211a2c}
 .overlay h2{font-size:30px;margin:10px 0;text-shadow:0 2px 5px #211a2c55}
 .overlay p{font-size:12px;margin-bottom:18px}
 .overlay .note{display:none}
 .intro{padding:5% 7%}
 #toast{top:55px;font-size:11px;padding:8px 14px}
 .level-grid{gap:12px;margin:12px}
 .level-grid button{font-size:12px;padding:10px 18px}
}
@media (pointer:coarse) and (max-width:1100px) and (orientation:portrait), (max-width:600px) and (orientation:portrait){
 main{width:100vh;height:100vw;width:100dvh;height:100dvw;transform-origin:0 0;transform:translateX(100vw) rotate(90deg);transform:translateX(100dvw) rotate(90deg)}
}
@media (pointer:coarse) and (max-width:1100px), (max-width:600px){.overlay .secondary{color:var(--ink);text-shadow:none}}