*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#244341}body{background:#fbefed}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,.button{border:1px solid #24434122;border-radius:9px;background:#fff9;padding:10px 18px;color:inherit;cursor:pointer;white-space:nowrap;transition:.15s}button:hover,.button:hover{background:#fff;transform:translateY(-1px)}button.active,button.primary{background:#078b91;color:white;border-color:#046d73}button.yellow{background:#ffe471;color:#544521}button.danger{color:#b5484d}button:focus-visible,a:focus-visible{outline:3px solid #e09e13;outline-offset:2px}input[type=range]{accent-color:#0797a4;cursor:pointer;min-width:110px}input[type=number]{width:82px;padding:8px;border:1px solid #799b9f;border-radius:7px;background:#ffffffb8}select{padding:9px;border:1px solid #91adb0;border-radius:7px;background:#fffd}label{display:flex;align-items:center;gap:9px;white-space:nowrap}header{min-height:74px;padding:14px 28px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #52757524;background:#fff7;position:relative;z-index:2}header h1{font-size:24px;font-weight:600;margin:0;letter-spacing:1px}header small{font-size:12px;color:#6c8888;display:block;margin-top:4px}.back{font-size:20px;color:#326b70;text-decoration:none;padding:9px 11px;border-radius:9px;background:#fff9}.top-actions{margin-left:auto;display:flex;gap:8px}main{height:calc(100vh - 74px);min-height:570px;display:flex;flex-direction:column;overflow:hidden}.tabs,.toolbar{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;flex-wrap:wrap;background:#ffffff26;border-bottom:1px solid #6283851a}.toolbar.bottom{margin-top:auto;border-top:1px solid #62838530;border-bottom:0;padding:13px 20px;min-height:68px}.workspace{position:relative;flex:1;min-height:280px;display:flex;overflow:hidden}.workspace svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}.canvas-wrap{position:relative;flex:1;min-width:0;min-height:0}.side{width:285px;flex-shrink:0;padding:25px 24px;background:#ffffff38;border-left:1px solid #59828622;overflow-y:auto}.side h2{font-size:21px;margin:0 0 18px;font-weight:500}.side p{font-size:17px;line-height:1.9}.side strong{color:#d66c62;font-size:22px}.side .rule{padding-bottom:16px;border-bottom:1px solid #548c8d22;margin-bottom:18px}.readout{background:#043d4d;border:3px solid #558b97;border-radius:10px;color:#d8fbff;font-variant-numeric:tabular-nums;text-align:right;padding:12px 16px;font-size:44px;letter-spacing:3px;box-shadow:inset 0 0 16px #092c3d}.readout small{font-size:18px;letter-spacing:0}.hint{position:absolute;top:16px;left:20px;color:#547575;font-size:15px;z-index:1;pointer-events:none}.badge{background:#fff9;border:1px solid #fff;padding:9px 15px;border-radius:8px;display:inline-flex;align-items:center;gap:8px}.floating-info{position:absolute;bottom:18px;left:22px;background:#fffe;padding:12px 18px;border-radius:10px;border:1px solid #45798025;max-width:calc(100% - 44px);font-size:18px}.floating-info small{font-size:13px;color:#648484}.notice{min-height:24px;color:#7b6966;text-align:center;padding:3px 15px;font-size:14px}.pink{background:#fde9e9}.blue{background:#d4e5ff}.map{background:#a8d5f2}.forest{background:#8cce59}.grab{cursor:grab}.grab:active{cursor:grabbing}.svg-text{font-family:"Microsoft YaHei",sans-serif;fill:#27484b}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip{border:1px solid #abd3da;border-radius:30px;padding:6px 13px;background:#ffffff9c}.divider{height:26px;width:1px;background:#385f6333;margin:0 5px}.answer{display:inline-flex;border:2px dashed #db8f86;padding:10px 22px;border-radius:8px;color:#ad665d}.toast{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#124f58ed;color:white;padding:11px 20px;border-radius:9px;z-index:5;pointer-events:none;box-shadow:0 4px 16px #0002}.stat{font-size:17px;color:#376578}.stat b{font-size:26px;color:#0b8191}.panel-label{font-size:13px;color:#577779}.projection{display:grid;gap:12px}.projection section{background:#ffffffc4;border:1px solid #92aaa933;border-radius:9px;padding:10px}.projection h3{font-size:15px;margin:0 0 8px}.projection svg{height:100px;width:100%;display:block}.side.compact{width:235px;padding:18px}.side button{margin:3px 0}.side label{white-space:normal;margin:12px 0}.formula-bar{padding:12px;text-align:center;background:#ffffff99;border-radius:28px;color:#a25563;font-size:21px;position:absolute;top:18px;left:8%;width:84%;z-index:1;pointer-events:none}.duel{display:flex;gap:25px;justify-content:center;width:100%;padding:45px 25px}.duel-card{flex:1;background:#ffffff60;border-radius:16px;padding:20px;max-width:500px;text-align:center}.duel-card svg{height:220px}.duel-card input{width:90px}.board3d{width:100%;height:100%;display:block;touch-action:none}.mode-info{position:absolute;bottom:16px;right:16px;pointer-events:none;background:#ffffffb5;border-radius:8px;padding:10px}.map-title{position:absolute;top:15px;left:20px;pointer-events:none;background:#ffffffb5;border-radius:8px;padding:10px;color:#406368}.small{font-size:13px;color:#648184}.ribbon-list{display:flex;flex-wrap:wrap;gap:8px;padding:10px;min-height:76px;justify-content:center;align-items:center}.ribbon-piece{background:#fff9;padding:8px 12px;border-radius:8px;border-left:7px solid var(--piece);font-size:16px}.range-wide{width:240px}.status-footer{font-size:14px;line-height:1.5;padding:8px 18px;text-align:center;background:#fff4;color:#5c787a}.canvas-wrap canvas{display:block;max-width:100%}@media(max-width:850px){header{padding:10px 14px;gap:8px;min-height:67px}header h1{font-size:18px}header small{display:none}.top-actions button{font-size:13px;padding:8px 10px}main{height:calc(100dvh - 67px);min-height:580px}.tabs,.toolbar{padding:8px 10px;gap:6px}button{padding:8px 12px;font-size:14px}.side{width:210px;padding:15px}.side p{font-size:14px}.side strong{font-size:18px}.readout{font-size:34px}.floating-info{font-size:15px}.side.compact{width:190px}.formula-bar{font-size:16px}.range-wide{width:140px}.duel{padding:15px;gap:10px}}@media(max-width:600px){main{height:auto;min-height:calc(100dvh - 67px);overflow:auto}.workspace{min-height:470px;flex-direction:column}.canvas-wrap{min-height:340px}.side,.side.compact{width:100%;border-left:0;border-top:1px solid #52757524;display:flex;flex-wrap:wrap;gap:12px;padding:14px;overflow:visible}.side .rule{margin:0;flex:1;min-width:170px;padding-bottom:0;border-bottom:0}.side h2{font-size:17px;margin-bottom:7px}.side p{margin:4px 0}.readout{font-size:30px;min-width:150px;align-self:center}.side .projection{grid-template-columns:repeat(3,1fr);width:100%}.projection svg{height:80px}.top-actions button:first-child{display:none}.floating-info{bottom:8px;left:8px;font-size:13px;padding:8px}.hint{top:10px;left:10px;font-size:12px}.toolbar.bottom{position:sticky;bottom:0;background:#f4f3f0ee;z-index:4}.formula-bar{top:8px;font-size:13px}.duel-card{padding:12px 6px}.duel-card svg{height:170px}.duel-card h2{font-size:17px}header h1{font-size:17px}.back{font-size:16px;padding:8px}.badge{padding:6px 9px;font-size:13px}}
/* Respect semantic visibility even on flex labels and sections. */
[hidden]{display:none!important}
@media(min-width:851px){header{height:80px}main{height:calc(100vh - 80px)}}