*{box-sizing:border-box;margin:0;padding:0}:root{--page-bg:#ececec;--board-bg:#fafafa;--ink:#333;--danger:#c0392b;--final:#8e44ad}html,body{min-height:100%}body{background:var(--page-bg);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:12px;font-family:Microsoft YaHei,PingFang SC,sans-serif;display:flex;overflow:hidden}.game-wrapper{background:#fff;border-radius:14px;width:min(420px,100vw - 24px);position:relative;overflow:hidden;box-shadow:0 6px 24px #0000002e}.game-canvas{aspect-ratio:420/680;touch-action:none;background:var(--board-bg);display:block;width:100%!important;height:auto!important}.score-board{color:var(--ink);pointer-events:none;font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;position:absolute;top:12px;left:16px}.best-board{color:#999;pointer-events:none;font-variant-numeric:tabular-nums;font-size:15px;position:absolute;top:16px;right:16px}.modal-surface{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.game-over{z-index:10;background:#fffffff0}.game-over h2{color:var(--danger);margin-bottom:12px;font-size:30px}.game-over p{color:#666;margin-bottom:24px;font-size:18px}.final-modal{z-index:20;background:#fffffff5}.final-modal img{aspect-ratio:640/547;object-fit:contain;width:min(260px,62%);height:auto;margin-bottom:30px}.final-text{color:var(--final);letter-spacing:6px;margin-bottom:36px;font-size:26px;font-weight:700}.modal-backdrop{z-index:100;overscroll-behavior:contain;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.rule-box{text-align:center;background:#fff;border-radius:16px;flex-direction:column;align-items:center;width:min(380px,100%);max-height:min(680px,100dvh - 32px);padding:32px 28px;display:flex;overflow:hidden;box-shadow:0 10px 40px #00000040}.rule-box h2{color:var(--danger);margin-bottom:18px;font-size:24px}.rule-text{overscroll-behavior:contain;color:#444;text-align:left;text-wrap:pretty;flex:auto;width:100%;min-height:0;margin-bottom:24px;font-size:15px;line-height:1.8;overflow-y:auto}button{min-height:44px;font:inherit;color:#fff;background:var(--danger);cursor:pointer;touch-action:manipulation;border:none;border-radius:10px;padding:12px 36px;font-size:18px;transition:background-color .14s,transform .14s}.final-modal button{background:var(--final);padding-inline:40px}button:active{transform:scale(.96)}button:focus-visible{outline-offset:3px;outline:3px solid #c0392b59}@media (max-width:420px){body{min-height:100dvh;padding:8px}.modal-backdrop{padding:8px}.rule-box{max-height:calc(100dvh - 16px);padding:24px 20px 18px}.rule-box h2{margin-bottom:14px;font-size:22px}.rule-text{margin-bottom:16px;font-size:14px;line-height:1.68}.rule-box button{flex:none}}@media (max-width:340px){.rule-box{padding:18px 16px 16px}.rule-box h2{margin-bottom:10px;font-size:20px}.rule-text{font-size:13px;line-height:1.6}.rule-box button{min-height:42px;font-size:16px}}@media (hover:hover){button:hover{background:#a93226}.final-modal button:hover{background:#6c3483}}@media (max-height:760px) and (min-width:421px){body{justify-content:flex-start}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}