*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif;color:#43516b}body{background:radial-gradient(circle at 32% 18%,#eaf5fc,#ccdef0 75%)}button,input{font:inherit}button{border:0;cursor:pointer;color:#3e6280;background:#eaf3f8;border-radius:12px;padding:9px 13px;touch-action:manipulation}button:hover{filter:brightness(.96)}button.primary{background:#178db0;color:white;font-weight:650;box-shadow:0 4px 12px #187ea42e}button:disabled{opacity:.48;cursor:default}.hidden{display:none!important}#app{max-width:1500px;margin:auto;padding:16px}header{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:17px;background:#ffffffa8;box-shadow:0 8px 25px #557b9914}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:750;letter-spacing:2px}.brand small{display:block;font-size:11px;font-weight:500;letter-spacing:1px;color:#7891a4}.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#18bad6;background:#fff2d7;box-shadow:inset 0 0 0 2px #ebd19d}#serverStatus{margin-left:auto;color:#338873;font-size:12px}#who{font-size:12px;background:#e4edf1;padding:7px 10px;border-radius:20px}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:15px;margin-top:15px}.gameSide,.socialSide{background:#ffffffbb;border:1px solid white;border-radius:20px;padding:15px;box-shadow:0 12px 30px #43739a1a}.topline{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 3px 12px}.topline small{font-size:11px;color:#1f9cb1}.topline h1{font-size:20px;margin:3px 0 0}.topline #progress{font-size:12px;color:#6d879b;white-space:nowrap}#stage{position:relative;height:min(76vh,760px);border-radius:17px;background:radial-gradient(circle at 50% 50%,#e8f5ff,#bcd5eb);overflow:hidden;touch-action:none}#game,#confetti{display:block;width:100%;height:100%;touch-action:none}#confetti{position:absolute;inset:0;pointer-events:none}#boardOverlay,#winPanel{position:absolute;inset:0;display:grid;place-items:center;background:#c4dcef7d;backdrop-filter:blur(5px)}#boardOverlay{z-index:5}#winPanel{z-index:8}.modal{width:min(340px,90%);text-align:center;border-radius:22px;background:#fffbf2f2;border:1px solid white;padding:24px;box-shadow:0 15px 35px #3a5a8040}.modal h2{margin:10px 0;color:#3e6179}.modal p,.pane p{font-size:13px;line-height:1.6;color:#71889d}.modal small{letter-spacing:2px;color:#a38b54}.winIcon{font-size:48px}.winButtons{display:grid;gap:9px}#completeCover{position:absolute;inset:0;z-index:7;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:24px}#completeCover span{padding:8px 15px;border-radius:19px;background:#fff9eac4;color:#2d7189;box-shadow:0 3px 14px #526a842b;font-size:13px}.gameBar{display:flex;align-items:center;gap:9px;margin:11px 0}.gameBar span{font-size:12px;color:#6c8094}#gameTip{flex:1}.levelsHead{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.levelsHead h2{font-size:16px;margin:0}.levelsHead button{font-size:11px}.levelList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;max-height:260px;overflow:auto}.levelCard{display:flex;align-items:center;gap:10px;text-align:left;min-height:70px;background:#eff6fa;border:1px solid white;border-radius:13px}.levelCard img{width:55px;height:55px;object-fit:cover;border-radius:8px;image-rendering:pixelated}.levelCard .placeholder{width:55px;height:55px;display:grid;place-items:center;border-radius:8px;background:#ddc792;color:#805d2d;font-weight:bold}.levelCard strong{font-size:12px;display:block}.levelCard small{font-size:10px;color:#8193a0}.socialSide{align-self:start;min-height:470px}#tabs{display:flex;gap:4px;background:#eef4f6;padding:4px;border-radius:12px}#tabs button{flex:1;padding:8px 2px;font-size:12px;background:transparent}#tabs button.active{background:white;color:#138eae;box-shadow:0 2px 8px #517c9822}.pane{padding:14px 2px}.pane h2{font-size:16px;margin:7px 0}.pane h3{font-size:13px;margin:18px 0 8px}.pane label{display:block;font-size:12px;color:#71889a;margin:13px 0}.pane input:not([type=file]){display:block;width:100%;margin-top:5px;border:1px solid #d5e4ec;border-radius:9px;background:#fff;padding:10px;color:#455870}.pane input[type=file]{display:block;margin-top:9px;max-width:100%;font-size:11px}.pane form button{margin-top:3px}.row{display:flex;gap:8px}.row button{flex:1}.miniCard{background:#edf5f8;border:1px solid #fff;border-radius:12px;padding:10px;margin:7px 0;font-size:12px}.miniCard strong{display:block;margin-bottom:5px}.miniCard button{font-size:11px;padding:6px 8px;margin-right:5px}.miniCard img{width:100%;max-height:200px;object-fit:contain;image-rendering:pixelated;border-radius:8px}.chatLog{height:250px;overflow-y:auto;background:#edf5f8;border-radius:12px;padding:10px}.bubble{padding:8px 11px;border-radius:11px;background:white;margin:6px 0;font-size:12px;max-width:92%;word-break:break-word}.bubble.mine{margin-left:auto;background:#c5ecf5}.bubble small{display:block;color:#91a7b1;font-size:10px;margin-top:4px}#chatForm{display:flex;gap:5px;margin-top:7px}#chatForm input{min-width:0;flex:1;margin:0!important}#chatForm button{margin:0}#message{font-size:12px;color:#177d73;min-height:18px}.demoNote{font-size:11px;line-height:1.5;color:#8997a6;border-top:1px solid #e2eaf0;margin-top:12px;padding-top:11px}@media(max-width:900px){main{grid-template-columns:1fr}.socialSide{min-height:unset}.levelList{grid-template-columns:repeat(2,minmax(0,1fr))}#stage{height:min(75svh,620px)}}@media(max-width:500px){#app{padding:7px}header{padding:7px}.brand{font-size:15px}.logo{width:29px;height:29px}#serverStatus{display:none}.gameSide,.socialSide{padding:8px;border-radius:13px}#stage{height:min(67svh,530px)}.topline h1{font-size:15px}.topline #progress{font-size:10px}.gameBar{flex-wrap:wrap}.gameBar #gameTip{display:none}.levelList{grid-template-columns:repeat(2,minmax(0,1fr))}}

#tabs button{position:relative}.badge{position:absolute;right:1px;top:0;min-width:13px;height:13px;border-radius:20px;background:#ec354d;color:white;font-size:9px;line-height:13px;text-align:center;padding:0 2px;box-shadow:0 0 0 2px #fff}#cropPreview{width:min(100%,340px);aspect-ratio:1;display:block;margin:8px auto;border-radius:12px;touch-action:none;background:#e1e9ee}#cropZoom{width:100%;accent-color:#178db0}#cropControls p{margin-bottom:6px}
@media(max-width:900px){#app{padding-bottom:calc(74px + env(safe-area-inset-bottom))}.socialSide{position:fixed;inset:auto 0 0;z-index:20;background:transparent;border:0;box-shadow:none;padding:0;pointer-events:none}#tabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:#f7fcfff7;box-shadow:0 -5px 24px #365a7a35;pointer-events:auto}#tabs button{min-height:48px;padding:8px 0;font-size:12px;font-weight:650;white-space:nowrap}#tabs button.active{background:#d7f1f9}.pane{display:none!important;position:absolute;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));max-height:min(70dvh,620px);overflow:auto;overscroll-behavior:contain;padding:14px 16px 22px;background:#f9fcfff9;border-radius:18px 18px 0 0;box-shadow:0 -8px 24px #365a7a3a;pointer-events:auto}.socialSide.open .pane:not(.hidden){display:block!important}.demoNote,#message{display:none}#stage{height:min(68svh,640px)}}
@media(max-width:900px){.socialSide #message:not(:empty){display:block;position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:40;min-height:0;padding:10px 14px;border-radius:12px;background:#fffdf4;box-shadow:0 4px 18px #2c527548;pointer-events:auto}}
@media(max-width:900px){.pane .panelClose{display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:3;width:124px;min-height:38px;margin:0 auto 10px;padding:6px 14px;border:1px solid #b9e0ed;border-radius:22px;background:#e4f5fb;color:#187d9f;font-size:14px;font-weight:700;box-shadow:0 3px 10px #417b9826}}
@media(min-width:901px){.pane .panelClose{display:none}}
.paneLevelList{max-height:none;grid-template-columns:1fr}.paneLevelList .levelCard{width:100%}.paneLevelList p{grid-column:1/-1}
.offlineMode main{grid-template-columns:1fr}.offlineMode .socialSide,.offlineMode #who{display:none}.offlineMode #goOnline{margin-left:auto;background:#d7f1f9;color:#187d9f;font-size:12px;white-space:nowrap}