/* 拼出T · 木块限时拼图 — styles (no CSS `inset`, no external deps) */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#141416}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;color:#f3eadc;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{position:relative;width:100%;height:100%;overflow:hidden;background:#1b1c1f}
.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:none}
.screen.show{display:block}
button{font-family:inherit;cursor:pointer;border:0;outline:none}
button:focus-visible{box-shadow:0 0 0 3px #ffd36a}

/* ---------- game screen ---------- */
#game{display:none;flex-direction:column}
#game.show{display:flex}
#hud{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(#2a2420,#201b18);border-bottom:1px solid #3b322b;box-shadow:0 2px 10px rgba(0,0,0,.45);z-index:3}
#hud .grow{flex:1 1 auto;min-width:0}
.lvl-title{font-weight:800;font-size:18px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl-sub{font-size:12px;color:#c9b79f;margin-top:2px;white-space:nowrap}
.lvl-sub .st{color:#ffc93c}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:38px;min-width:38px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:700;color:#3a2614;background:linear-gradient(#f2d7a8,#d9b47a);box-shadow:0 2px 0 #9b7444,0 3px 8px rgba(0,0,0,.35);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 #9b7444,0 1px 4px rgba(0,0,0,.35)}
.btn.dark{color:#f3eadc;background:linear-gradient(#4a3f37,#372f29);box-shadow:0 2px 0 #1e1916,0 3px 8px rgba(0,0,0,.35)}
.btn.red{color:#fff;background:linear-gradient(#e2483d,#b9271f);box-shadow:0 2px 0 #7b1611,0 3px 8px rgba(0,0,0,.35)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .ic{font-size:17px;line-height:1}
.tools{display:flex;gap:8px;align-items:center}
#bottombar{display:none;flex:0 0 auto;justify-content:space-around;gap:6px;padding:8px 8px 10px;background:linear-gradient(#241f1b,#1a1613);border-top:1px solid #3b322b;z-index:3}
#boardwrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
#board{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;display:block}
#hintTag{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#ffe7a8;font-size:13px;padding:4px 12px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap;z-index:2}
#hintTag.on{opacity:1}

/* kitchen timer (white, LCD, three blue buttons) */
.ktimer{position:relative;flex:0 0 auto;width:118px;height:58px;margin-top:6px;border-radius:16px;background:linear-gradient(160deg,#ffffff,#e9edf0 70%,#d6dbe0);box-shadow:inset 0 -4px 0 #c7cdd3,0 4px 10px rgba(0,0,0,.45)}
.ktimer .kb{position:absolute;top:-6px;width:20px;height:10px;border-radius:10px 10px 4px 4px;background:linear-gradient(#5fd0ff,#1f9fe0);box-shadow:inset 0 -2px 0 #157bb0}
.ktimer .kb1{left:22px}.ktimer .kb2{left:49px}.ktimer .kb3{left:76px}
.ktimer .lcd{position:absolute;left:12px;right:12px;top:10px;height:32px;border-radius:7px;background:linear-gradient(#9fa79a,#b7bfb1);box-shadow:inset 0 2px 4px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-family:"DSEG7 Classic","Courier New",ui-monospace,monospace;font-weight:900;font-size:24px;letter-spacing:1px;color:#20251f;text-shadow:0 0 1px rgba(0,0,0,.3)}
.ktimer .feet{position:absolute;bottom:-3px;left:16px;right:16px;height:5px;border-radius:0 0 6px 6px;background:#c3c9cf}
.ktimer.warn .lcd{color:#5a1d12}

/* goal card (white card, red silhouette) */
.goalcard{flex:0 0 auto;width:86px;height:60px;border-radius:7px;background:#fdfdfb;border:2px solid #d7d7d2;box-shadow:0 3px 8px rgba(0,0,0,.45);transform:rotate(-4deg);display:flex;align-items:center;justify-content:center}
.goalcard canvas{width:74px;height:50px;display:block}

/* portrait / compact layout (set by ResizeObserver on #app) */
#app.portrait #hud{flex-wrap:wrap;row-gap:6px;padding:6px 10px}
#app.portrait #hud .tools{display:none}
#app.portrait #bottombar{display:flex}
#app.portrait .goalcard{width:72px;height:52px}
#app.portrait .goalcard canvas{width:62px;height:42px}
#app.portrait .ktimer{width:104px;height:52px}
#app.portrait .ktimer .lcd{font-size:21px;height:28px}
#app.portrait .ktimer .kb1{left:18px}#app.portrait .ktimer .kb2{left:42px}#app.portrait .ktimer .kb3{left:66px}
#app.portrait #hudrow2{display:flex;width:100%;align-items:center;gap:12px;justify-content:center}
#hudrow2{display:contents}
#app.tight .btn .lbl{display:none}
#app.tight .btn{padding:0 10px}
#app.portrait #bottombar .btn .lbl{display:inline}
#app.short #hud{padding:5px 10px}
#app.short .ktimer{transform:scale(.86);margin:0 -6px}
#app.short .goalcard{transform:rotate(-4deg) scale(.86);margin:0 -5px}

/* ---------- title screen ---------- */
#title{background:#17181b}
#titleArt{position:absolute;top:0;left:0;width:100%;height:100%}
.title-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:22px 30px 24px;border-radius:22px;background:rgba(20,16,13,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 10px 40px rgba(0,0,0,.5);max-width:92%}
.title-panel h1{margin:0;font-size:44px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 3px 0 #9b1d16,0 6px 18px rgba(0,0,0,.6)}
.title-panel h1 .t{color:#ff4b3e;text-shadow:0 3px 0 #7d120c,0 6px 18px rgba(0,0,0,.6)}
.title-panel .sub{margin:6px 0 18px;font-size:17px;color:#f0d9b5;letter-spacing:4px}
.title-panel .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.title-panel .btn{height:46px;font-size:17px;padding:0 22px}
.title-panel .tip{margin-top:14px;font-size:12.5px;color:#bba78c;line-height:1.7}
#app.short .title-panel h1{font-size:34px}
#app.short .title-panel{padding:14px 22px 16px}
#app.short .title-panel .sub{margin:4px 0 10px}

/* ---------- level select ---------- */
#select{background:radial-gradient(ellipse at 50% 0%,#2c2f33,#151619 70%);display:none;flex-direction:column}
#select.show{display:flex}
.sel-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #2f3236}
.sel-head h2{margin:0;font-size:20px;flex:1}
.sel-head .total{font-size:14px;color:#ffc93c}
#levelGrid{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;align-content:start}
.lv{position:relative;border-radius:14px;padding:8px 8px 9px;background:linear-gradient(#3a3d42,#2b2d31);box-shadow:0 3px 0 #1a1b1e,0 6px 14px rgba(0,0,0,.35);color:#eee;text-align:center}
.lv:active{transform:translateY(2px)}
.lv .card{height:78px;border-radius:8px;background:#fbfbf8;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.lv .card canvas{width:100px;height:68px}
.lv .num{position:absolute;top:4px;left:8px;font-size:12px;font-weight:900;color:#3b3b3b;background:#ffd36a;border-radius:9px;padding:0 6px;line-height:18px}
.lv .nm{font-size:14px;font-weight:800}
.lv .stars{font-size:15px;letter-spacing:1px;color:#55585e}
.lv .stars .on{color:#ffc93c}
.lv .bt{font-size:11px;color:#a9adb3;min-height:14px}
.lv.locked{opacity:.5}
.lv.locked .card{background:#cfcfcf}
.lv .lock{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:26px}

/* ---------- overlays ---------- */
.overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(8,8,10,.55);z-index:20}
.overlay.show{display:flex}
.dlg{width:min(380px,92%);max-height:94%;overflow:auto;border-radius:20px;padding:20px 20px 18px;text-align:center;background:linear-gradient(#fff8ec,#f1dfbf);color:#3a2614;box-shadow:0 14px 50px rgba(0,0,0,.6);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.dlg h3{margin:0 0 6px;font-size:26px;color:#b9271f}
.dlg .bigstars{font-size:42px;letter-spacing:6px;margin:4px 0;color:#d8c7a8}
.dlg .bigstars span{display:inline-block;transform:scale(0);animation:star .4s forwards}
.dlg .bigstars span.on{color:#ffb700;text-shadow:0 2px 0 #b97f00}
@keyframes star{to{transform:scale(1)}}
.dlg .stat{font-size:15px;margin:4px 0;color:#5b4128}
.dlg .stat b{font-size:20px;color:#3a2614}
.dlg .row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.dlg .newbest{display:inline-block;margin-top:4px;background:#e2483d;color:#fff;font-size:12px;border-radius:10px;padding:2px 10px}
.dlg ul{text-align:left;font-size:14px;line-height:1.75;padding-left:20px;margin:8px 0}
#confetti{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:30}
.toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:6px 14px;border-radius:16px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:25;white-space:nowrap}
.toast.on{opacity:1}
#app.portrait #btnMenu{order:1}
#app.portrait #hud .grow{order:2}
#app.portrait #btnMute{order:3}
#app.portrait #hudrow2{order:4}