*{margin:0;padding:0;box-sizing:border-box}:root{--desktop: #0e7a74;--panel: #c0c0c0;--edge-light: #ffffff;--edge-mid: #dfdfdf;--edge-dark: #9a9a9a;--edge-darker: #7b7b7b;--ink: #1a1a1a;--led-red: #ff2b2b}html,body{height:100%}body{background:var(--desktop);color:var(--ink);font-family:Tahoma,Microsoft YaHei,PingFang SC,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(16px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom))}.app{display:flex;flex-direction:column;align-items:center;gap:12px}.tb-btn,.face,.diff-seg button,.restart-bar,.modal{background:var(--panel);border:1px solid #0a0a0a;border-radius:0;box-shadow:inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-darker),inset 2px 2px 0 var(--edge-mid),inset -2px -2px 0 var(--edge-dark);color:var(--ink)}.tb-btn:active,.face:active,.diff-seg button:active,.restart-bar:active{box-shadow:inset 1px 1px 0 var(--edge-darker),inset -1px -1px 0 var(--edge-light)}.tb-btn.pressed,.diff-seg button.pressed{box-shadow:inset 1px 1px 0 var(--edge-darker),inset -1px -1px 0 var(--edge-light),inset 2px 2px 0 var(--edge-dark)}.led,.board-frame{background:var(--panel);border:1px solid #0a0a0a;box-shadow:inset 2px 2px 0 var(--edge-darker),inset -2px -2px 0 var(--edge-light)}button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}.window{background:var(--panel);border:1px solid #0a0a0a;box-shadow:inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),4px 4px #0000004d;width:fit-content;max-width:calc(100vw - 16px)}.titlebar{background:linear-gradient(90deg,navy,#1084d0);color:#fff;font-weight:700;font-size:14px;letter-spacing:6px;padding:5px 10px 4px}.inner{padding:10px;display:flex;flex-direction:column;gap:8px}.diff-seg{display:flex;gap:4px}.diff-seg button{padding:5px 12px 3px;font-size:13px;line-height:1.2;display:flex;flex-direction:column;align-items:center}.diff-seg button small{font-size:10px;color:#555}.diff-seg button.pressed small{color:#333}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.led{display:flex;align-items:center;gap:5px;padding:3px 8px;min-width:78px;justify-content:center}.led b{font-family:Consolas,Courier New,monospace;font-size:19px;font-weight:700;color:var(--led-red);background:#000;padding:1px 6px;letter-spacing:2px;font-variant-numeric:tabular-nums;text-shadow:0 0 5px rgba(255,40,40,.55)}.led-ico{width:15px;height:15px;flex:none}.face{width:42px;height:42px;display:grid;place-items:center;flex:none}.face-ico{width:28px;height:28px}.flag-toggle{padding:8px 10px;font-size:12px;font-weight:700;line-height:1;flex:none}.flag-toggle.pressed{color:#7b0000}.daily-chip{flex:none;padding:8px 10px;font-size:12px;font-weight:700;line-height:1;color:#7b0000;background:#ffd93b;border:1px solid #0a0a0a;box-shadow:inset 1px 1px #fff2b8,inset -1px -1px #c9a227}.board-frame{padding:6px;overflow:auto;max-width:100%}.board{display:grid;gap:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;width:fit-content}.cell{display:grid;place-items:center;position:relative;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.cell.raised{background:var(--panel);box-shadow:inset 2px 2px 0 var(--edge-light),inset -2px -2px 0 var(--edge-darker);cursor:pointer}.cell.raised:active{background:#b5b5b5;box-shadow:inset 1px 1px 0 var(--edge-darker),inset -1px -1px 0 var(--edge-light)}.cell.revealed{background:var(--panel);box-shadow:inset 0 0 0 1px #8f8f8f}.cell.exploded{background:#e02020}.n1{color:#0000fa}.n2{color:#007b00}.n3{color:#fa0000}.n4{color:#00007b}.n5{color:#7b0000}.n6{color:#007b7b}.n7{color:#000}.n8{color:#7b7b7b}.cell .ico{width:74%;height:74%;display:block;pointer-events:none}.cell .ico.no{position:absolute;inset:0;width:100%;height:100%}footer{display:flex;flex-direction:column;align-items:center;gap:4px;color:#d9f2f0;font-size:12px;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.35);padding:0 6px 4px}footer .best-line b{color:#ffe27a;font-variant-numeric:tabular-nums}.overlay{position:fixed;inset:0;background:#00000073;display:grid;place-items:center;z-index:50;padding:20px}.modal{width:min(340px,calc(100vw - 40px));box-shadow:inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),6px 6px #00000059}.modal-title{background:linear-gradient(90deg,navy,#1084d0);color:#fff;font-weight:700;font-size:13px;letter-spacing:4px;padding:5px 10px 4px}.modal-body{padding:18px 20px 20px;text-align:center;display:flex;flex-direction:column;gap:10px}.modal-body h2{font-size:22px;letter-spacing:2px}.modal-body h2.win{color:#007b00}.modal-body h2.lose{color:#a00}.modal-body .sub{font-size:14px;color:#222}.modal-body .sub b{font-variant-numeric:tabular-nums}.modal-body .record{color:#d00;margin-left:8px}.modal-body .row{display:flex;gap:10px;justify-content:center;margin-top:6px}.modal-body .tb-btn{padding:9px 18px;font-size:14px}.modal-body .tb-btn.strong{font-weight:700}.pop-enter-active,.pop-leave-active{transition:opacity .15s ease}.pop-enter-from,.pop-leave-to{opacity:0}.restart-bar{position:fixed;left:50%;transform:translate(-50%);bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));z-index:40;padding:12px 30px;font-size:15px;font-weight:700;letter-spacing:2px;box-shadow:inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-darker),inset 2px 2px 0 var(--edge-mid),inset -2px -2px 0 var(--edge-dark),3px 3px #00000059}@keyframes cell-pop{0%{transform:scale(1.28);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes ico-pop{0%{transform:scale(.3)}70%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes explode-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}}.cell.revealed{animation:cell-pop .13s ease-out}.cell .ico{animation:ico-pop .18s ease-out}.cell.exploded{animation:explode-shake .3s ease-out}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.footer-btns{display:flex;gap:8px;margin-bottom:4px}.tb-btn.mini{padding:5px 14px;font-size:12px;font-weight:700}.stats-table{width:100%;border-collapse:collapse;font-size:13px}.stats-table th,.stats-table td{padding:6px 8px;border-bottom:1px solid #9a9a9a;text-align:center;font-variant-numeric:tabular-nums}.stats-table th{background:#b5b5b5;font-weight:700;white-space:nowrap}.daily-actions{white-space:nowrap}.daily-actions .tb-btn{padding:4px 10px;font-size:12px;margin-left:4px}.stats-table td.best{color:#7b0000;font-weight:700}.lb-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.lb-tabs .tb-btn{padding:5px 10px;font-size:12px}.lb-list{list-style:none;margin:0;padding:0;text-align:left;font-size:14px;max-height:260px;overflow-y:auto}.lb-list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid #ababab;font-variant-numeric:tabular-nums}.lb-list li:nth-child(odd){background:#b8b8b8}.lb-rank{width:26px;text-align:center;font-weight:700;color:#555}.lb-rank.top{color:#7b0000}.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-time{font-weight:700;color:#00007b}.custom-grid{display:flex;gap:10px;justify-content:center}.custom-grid label{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:700}.custom-grid input{width:72px;padding:7px 8px;font:inherit;font-size:15px;text-align:center;border:1px solid #7b7b7b;background:#fff;box-shadow:inset 1px 1px #9a9a9a}.name-input{flex:1;min-width:0;padding:8px 10px;font:inherit;font-size:14px;border:1px solid #7b7b7b;background:#fff;box-shadow:inset 1px 1px #9a9a9a}.submit-row{display:flex;gap:8px;align-items:stretch}.submit-row .tb-btn{padding:8px 12px;font-size:13px;white-space:nowrap}.rank-line{color:#007b00;font-weight:700}.lb-error{color:#a00}.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%);z-index:60;background:#000;color:#fff;font-size:13px;padding:8px 16px;border:1px solid #fff;box-shadow:3px 3px #00000059;pointer-events:none}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}@media(max-width:560px){#app{padding-top:max(10px,env(safe-area-inset-top))}.titlebar{letter-spacing:4px}.inner{padding:8px}.statusbar{flex-wrap:wrap;justify-content:center}.led{min-width:68px}.led b{font-size:17px}.face{width:38px;height:38px}.face-ico{width:25px;height:25px}.flag-toggle{padding:7px 8px}.diff-seg button{padding:4px 10px 3px}}
