:root{color-scheme:dark;--cream:#f4e6c3;--ink:#25231c;--red:#d74e3d;--safe-top:max(15px,env(safe-area-inset-top))}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#76573f;color:var(--cream);touch-action:none}button,a{font:inherit}button{color:inherit}#game,#canvas-wrap{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}.loading{position:fixed;z-index:60;inset:0;display:grid;place-content:center;justify-items:center;background:#342a23;transition:.35s}.loading.hidden{opacity:0;visibility:hidden}.loading span{font-size:64px;color:#de5a45;animation:stretch .8s ease-in-out infinite alternate}.loading p{font-size:13px;font-weight:900;letter-spacing:.12em}@keyframes stretch{to{transform:scaleX(1.6)}}.topbar{position:fixed;z-index:9;left:0;right:0;top:0;padding:var(--safe-top) 16px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.topbar>*{pointer-events:auto}.back{justify-self:start;color:inherit;text-decoration:none;font-size:13px;font-weight:850;text-shadow:0 1px 5px #0009}.level-pill{padding:9px 14px;border:1px solid #fff5;border-radius:99px;background:#372c26da;backdrop-filter:blur(8px);font-size:12px;font-weight:850}.icon-btn{justify-self:end;width:38px;height:38px;border:1px solid #fff5;border-radius:50%;background:#372c26da;cursor:pointer;font-weight:900}.hud{position:fixed;z-index:8;top:calc(var(--safe-top) + 54px);left:50%;transform:translateX(-50%);display:flex;border:1px solid #fff3;border-radius:15px;overflow:hidden;background:#302721e8;backdrop-filter:blur(8px);pointer-events:none}.hud div{min-width:112px;padding:8px 13px;text-align:center}.hud div+div{border-left:1px solid #fff2}.hud span{display:block;font-size:10px;opacity:.65}.hud strong{font-size:18px}.hud strong b,.hud strong em{font:inherit}.hud strong em{opacity:.5}.hud div:nth-child(2) strong{color:#e86652;letter-spacing:.08em}.hud div:nth-child(3) strong{color:#e9ca62}.message{position:fixed;z-index:10;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 16px;border:1px solid #fff3;border-radius:99px;background:#302721e8;font-size:12px;font-weight:900;white-space:nowrap;pointer-events:none}.knot-board{position:fixed;z-index:11;left:50%;top:52%;width:min(650px,85vw);height:min(390px,47vh);transform:translate(-50%,-50%);pointer-events:none}.knot-board button{position:absolute;width:48px;height:48px;margin:-24px;border:3px solid #f4d09d;border-radius:50%;background:#8b3428aa;box-shadow:0 0 0 7px #d7583e22,0 8px 15px #25191255;cursor:pointer;opacity:.76;pointer-events:auto;transition:transform .15s,box-shadow .15s,background .15s}.knot-board button:after{content:"";position:absolute;inset:13px;border-radius:50%;background:#f1cf8b}.knot-board button:nth-child(1){left:12%;top:18%}.knot-board button:nth-child(2){left:50%;top:8%}.knot-board button:nth-child(3){left:88%;top:18%}.knot-board button:nth-child(4){left:17%;top:82%}.knot-board button:nth-child(5){left:50%;top:92%}.knot-board button:nth-child(6){left:83%;top:82%}.knot-board button.flash{transform:scale(1.35);background:#e8bd48;box-shadow:0 0 0 11px #ffd75e3d,0 0 35px #ffd65d}.knot-board button.correct{background:#4f9a68}.knot-board.disabled{pointer-events:none}.knot-board.disabled button{pointer-events:none}.feedback{position:fixed;z-index:14;left:50%;top:45%;transform:translate(-50%,-50%) scale(.65);padding:10px 20px;border-radius:99px;background:#e9c850;color:#30261f;font-size:21px;font-weight:950;opacity:0}.feedback.show{animation:pop .8s ease-out}.feedback.bad{background:#d24c3b;color:#fff}@keyframes pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-85%) scale(.9)}}
.panel{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#241d188f;backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.25s}.panel.visible{opacity:1;visibility:visible}.panel-card{position:relative;overflow:hidden;width:min(500px,100%);padding:32px 32px 27px;border:1px solid #fffa;border-radius:28px;background:#eee0bb;color:var(--ink);text-align:center;box-shadow:0 24px 80px #17110d99}.panel-card:before{content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;background-image:radial-gradient(#714722 .7px,transparent .8px);background-size:6px 6px}.panel-card>*{position:relative}.eyebrow{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.15em;color:#8b4934}.panel h1,.panel h2{margin:0 0 12px;font:900 clamp(44px,9vw,66px)/1 "Songti SC","Noto Serif SC",serif;letter-spacing:-.06em}.panel h2{font-size:clamp(33px,7vw,50px)}.panel-card>p:not(.eyebrow){margin:0 auto 18px;max-width:390px;line-height:1.65;color:#55584e;font-size:14px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.rules span{padding:11px 4px;border:1px dashed #8b7d67;border-radius:12px;font-size:11px;font-weight:850}.rules i{display:block;color:#cf503c;font:900 23px serif}.primary,.secondary{width:100%;min-height:50px;border-radius:14px;border:0;cursor:pointer;font-weight:900}.primary{background:#d2573f;color:#fff;box-shadow:0 7px 0 #983b2d}.secondary{margin-top:13px;background:transparent;color:#39483b;border:1px solid #6e776c}.compact{max-width:390px}.pattern-stamp{display:grid;place-items:center;width:85px;height:85px;margin:7px auto 20px;border:3px solid #d2573f;border-radius:50%;color:#d2573f;font-size:48px}
@media(max-width:650px){.back span{display:none}.topbar{grid-template-columns:42px 1fr 42px}.level-pill{justify-self:center}.hud{top:calc(var(--safe-top) + 49px);width:calc(100% - 24px)}.hud div{min-width:0;flex:1;padding:7px 4px}.hud strong{font-size:15px}.knot-board{width:94vw;height:45vh;top:53%}.knot-board button{width:42px;height:42px;margin:-21px}.panel-card{padding:27px 20px 23px}.rules{margin:13px 0}.message{bottom:18px}}@media(max-height:680px){.panel-card{transform:scale(.9)}.knot-board{height:40vh}.message{bottom:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
