/* Packing Club 1.1 — warm cardboard, illustrated product textures, toy depth. */
:root{--paper:#f5f2e9;--ink:#273447;--muted:#626d68;--line:#deded4;--orange:#ef8a53;--green:#397d68;--card:#fffef8}
body{background:radial-gradient(ellipse at 14% 8%,#fff9e6 0,transparent 48%),radial-gradient(ellipse at 95% 86%,#e2e8d8 0,transparent 48%),var(--paper);font-family:'PingFang SC','Microsoft YaHei UI','Microsoft YaHei',system-ui,sans-serif}
.game-shell{isolation:isolate}
.brand-icon{background:linear-gradient(145deg,#f8b177,#e78c52);box-shadow:inset 0 2px 1px #ffe0b4,0 3px 0 #c97742,0 6px 10px #a57b2d18;border:1px solid #da965c;border-radius:12px;transform:rotate(-5deg)}
.brand-icon svg{fill:#efcc8d;stroke:#775336;stroke-width:1.8}
.brand h1{letter-spacing:.5px}.brand p{color:#756e60}.topbar{border-bottom-color:#d8cdb5}.top-actions small{color:#737564}
.icon-button{background:#fffcf2;box-shadow:0 2px 0 #e1d7c3;border-color:#d8cdb6}.icon-button:hover{background:#fff}
.section-title h2,.goods-header h2{font-weight:700;color:#3b453d}.step-label{background:#f4ead4;color:#987447;border-color:#dac6a0;box-shadow:inset 0 1px #fff8}
.belt{background:#293748;border:1px solid #263346;border-radius:14px;box-shadow:0 4px 0 #1f2d3a,0 7px 12px #27344716}
.belt-rail{background:linear-gradient(#efd39a,#c6a165);border-top:1px solid #fff2ce;box-shadow:0 1px #6e5737}
.belt-window{background:repeating-linear-gradient(90deg,#293748 0,#39465a 5px,#354258 31px,#1e2a3b 34px,#465369 37px,#293748 40px);box-shadow:inset 0 5px 9px #101b2433}
.box-option{border:1px solid transparent}.box-option.selected{background:linear-gradient(145deg,#a7c4ad35,#8eaf8f15);border-color:#a8c5a1;box-shadow:inset 0 1px #f8ffe833}.box-option svg{filter:drop-shadow(2px 3px 1px #10192366)}
.box-caption>span{color:#d5d5be}.box-caption strong{color:#fff1ce;font-variant-numeric:tabular-nums}.box-option .box-check{color:#dbf1ca}
.packing-panel{border:1px solid #d9c9aa;background:#fffcf3;border-radius:16px;box-shadow:inset 0 2px #fff,0 3px 0 #ded2bc,0 7px 16px #826a3c08}
.panel-header{padding-top:16px}.box-name{color:#746d5e}
.board-area{background:radial-gradient(#ae977c18 .7px,transparent .8px),linear-gradient(135deg,#f2e8d4,#fcf8eb 45%,#ede3cc);background-size:12px 12px,100% 100%;border:1px solid #e4d8bf;box-shadow:inset 0 2px 8px #9d845311;border-radius:10px}
.board{filter:drop-shadow(2px 5px 0 #8e6f473d) drop-shadow(0 8px 9px #735d281c)}
.board.full{filter:drop-shadow(2px 5px 0 #56755244) drop-shadow(0 6px 10px #56755218)}
.board-cell{border:1px solid #bc9e6980;background:linear-gradient(135deg,#e6cf9e,#f2dfb6 45%,#ddc28d);box-shadow:inset 0 2px 3px #96754720,inset 2px 0 2px #8e724411}
.board-cell:before{inset:3px;border:1px dashed #8f74422e;border-radius:2px}
.carton-grain{width:100%;height:100%;pointer-events:none;background:repeating-linear-gradient(13deg,transparent 0 3px,#9c815c09 3px 4px)}
.board-cell.edge-top{border-top:4px solid #e9c98b}.board-cell.edge-bottom{border-bottom:4px solid #a47c43}.board-cell.edge-left{border-left:4px solid #e9c98b}.board-cell.edge-right{border-right:4px solid #ac844d}
.board-cell.occupied{background:var(--tile);border-color:#ffffff25;box-shadow:inset 0 2px #ffffff35,inset 0 -2px #27344716;overflow:hidden}
.board-cell.occupied:before{display:none}
.board-cell .product-texture{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;position:absolute;inset:0}
.board-cell.piece-edge-top{border-top-color:#27344777}.board-cell.piece-edge-bottom{border-bottom-color:#27344777}.board-cell.piece-edge-left{border-left-color:#27344777}.board-cell.piece-edge-right{border-right-color:#27344777}
.board-cell.ghost-valid{background:#b6d9b9;box-shadow:inset 0 0 0 2px #397d68}
.board-cell.ghost-invalid{background:#f1c8b8;box-shadow:inset 0 0 0 2px #a84f45}
.board-cell.ghost-invalid:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#a84f45;font-size:20px;font-weight:700;background:#fce8e388}
.board-cell.hint-cell{background:#fff3ce;box-shadow:inset 0 0 0 2px #a98439}
.board-cell.cursor-cell:after{font-size:19px;font-weight:700}
.empty-prompt{background:#fffaf0f5;border-color:#dac8a2;box-shadow:0 4px 0 #e2d0ae55}.empty-prompt>span:last-child{color:#716e5f}.empty-arrow{background:#f0e2bc;color:#98733a}
.fill-status>span{color:#6d7462}.fill-status>strong{font-variant-numeric:tabular-nums}.progress-track{height:5px;background:#e3d7be;box-shadow:inset 0 1px #c7b68f}.progress-track>span{background:linear-gradient(90deg,#68a284,#397d68)}
.soft-button,.rotate-button{border:1px solid #d3c8af;background:linear-gradient(#fffdf4,#f0eadc);box-shadow:0 2px 0 #d4c5a7;border-radius:9px;color:#526047}
.soft-button:disabled,.rotate-button:disabled{opacity:1;color:#a19e8b;background:#eee9dc;box-shadow:none;border-color:#ddd5c3}
.goods-panel{background:linear-gradient(155deg,#e9eddd,#e0e6d2);border:1px solid #cdd4bd;box-shadow:inset 0 2px #ffffff80,0 3px 0 #cbd1bb;border-radius:16px}
.goods-count{color:#536349;border-color:#cbd4bd;background:#fffdf2}.goods-note{color:#6a775f}
.piece-card{background:linear-gradient(145deg,#fffef8,#f6f1e1);border:1px solid #d8cfb8;box-shadow:0 3px 0 #d6ccb2,inset 0 1px #fff;border-radius:10px;overflow:visible}
.piece-card .piece-art{filter:drop-shadow(0 2px 1px #8c71483b);overflow:visible}
.piece-card .piece-name{font-weight:600;color:#5d5b4c;letter-spacing:0}
.piece-card.selected{background:#fffdf4;border-color:#397d68;box-shadow:0 0 0 2px #397d6828,0 3px 0 #89a68e}
.piece-card.selected:after{content:'✓';position:absolute;top:2px;right:3px;background:#397d68;color:white;border-radius:50%;width:14px;height:14px;display:grid;place-items:center;font-size:10px}
.piece-card.packed{opacity:1;background:#dce4cf;border:1px dashed #9bae91;box-shadow:none}.piece-card.packed .piece-art{opacity:.6;filter:saturate(.65)}.piece-card.packed .piece-name{color:#65705b}.packed-tag{background:#edf3e4;color:#3f6f51;font-weight:600;padding:1px 3px;border-radius:3px}
.hint-button{color:#7e673e}.ship-button,.primary-button{background:linear-gradient(#4f9278,#397d68);border:1px solid #2b6554;border-bottom:4px solid #275c4b;box-shadow:inset 0 1px #93bea2,0 3px 6px #397d6818;color:#fffdf3;font-weight:700;border-radius:10px;letter-spacing:.3px}
.ship-button:disabled{background:linear-gradient(#eee9db,#e1dac8);border-color:#d2c6ac;border-bottom-color:#c7b99b;color:#80765f;box-shadow:inset 0 1px #fff7;opacity:1}
.ship-button:hover:not(:disabled),.primary-button:hover{background:linear-gradient(#579a7f,#3a806a)}
.layer-bar{display:flex;gap:6px;margin:10px 24px 0;background:#e7ddc6;padding:4px;border-radius:10px;border:1px solid #d6c7a7;flex-shrink:0}
.layer-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;color:#796c53;font-size:12px;min-height:32px;font-weight:600}
.layer-tab.active{background:#fffdf1;border-color:#cbb58c;box-shadow:0 2px 0 #cabb9b;color:#72582e}.layer-tab.done{color:#397d68}.layer-tab small{font-size:10px;font-variant-numeric:tabular-nums}.layer-stack{font-size:22px;line-height:1;color:#ae874c}.layer-tab.active .layer-stack{color:#866130}
#level-dots{display:grid;grid-template-columns:30px minmax(0,1fr) 30px 44px;gap:5px;width:min(400px,100%);min-width:0;height:30px}
#level-dots .level-strip{display:flex;gap:4px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;height:100%;position:relative}
#level-dots .level-strip::-webkit-scrollbar{display:none}
#level-dots .level-dot{position:relative;flex:0 0 34px;min-width:34px;width:34px;height:100%;padding:0 6px 0 2px;box-shadow:none;font-variant-numeric:tabular-nums}
#level-dots .level-dot small,#level-dots .level-lock{position:absolute;right:1px;top:2px;font-size:8px;line-height:9px;width:9px;height:9px}
#level-dots .level-dot.locked{color:#8b8578;background:#eee9dd;border-style:dashed;cursor:default}
#level-dots .level-dot.current{background:#293748;color:#fff9e8;border-color:#293748}
#level-dots .level-nav{width:100%;min-width:0;height:100%;padding:0;box-shadow:none}
#level-dots .continue-order{color:#397d68;font-size:11px}
.page-footer nav{gap:7px}.level-dot,.level-nav{height:30px;min-width:30px;border:1px solid #d1c7b0;background:#fffaf0;border-radius:7px;box-shadow:0 2px 0 #e1d5bc;color:#746747;font-size:12px}.level-dot.current{background:#293748;color:#fff9e8;border-color:#293748;box-shadow:0 2px 0 #162334}.level-dot.done{background:#e3eddb;color:#397d68;border-color:#acbfa0}.level-nav:disabled{opacity:.4;box-shadow:none}
.modal{background:linear-gradient(145deg,#fffdf4,#f6edda);border:1px solid #ceba91;box-shadow:0 8px 0 #ae8c5455,0 24px 80px #27344740;border-radius:20px;color:#394233}.modal::backdrop{background:#27344775;backdrop-filter:blur(4px)}.modal h2{color:#3c493b}.modal-close{color:#7f735d}.help-steps b{background:#ead9b4;color:#97713c}.help-steps p,.help-extra{color:#65705b}.success-mark{background:#e3edcf;border:2px solid #80a474;box-shadow:0 4px 0 #b8cda4;color:#397d68}.success-stats{border-color:#d7c9aa}.success-stats strong{color:#397d68}
.toast{background:#3e4e3e;color:#fff8e7;box-shadow:0 3px 0 #27382a;border:1px solid #6b7d5d}.hint-label{color:#71562d;border:1px solid #d6b87c;background:#fff0c5}
@media(max-width:780px),(max-height:500px) and (orientation:landscape){
  #level-dots{width:100%;height:100%;gap:4px;grid-template-columns:30px minmax(0,1fr) 30px 40px}
  .game-shell{grid-template-rows:40px 86px minmax(0,1fr) 30px}
  .brand-icon{border-radius:9px}.topbar{padding-bottom:4px}.brand h1{font-size:16px}
  .belt{border-radius:10px;box-shadow:0 2px 0 #1f2d3a}.box-option{border-radius:6px}.box-caption>span{font-size:8px}
  .packing-panel,.goods-panel{border-radius:12px;box-shadow:inset 0 1px #fff8,0 2px #d6c9ac}
  .panel-header{padding:4px 8px 0}.board-area{margin:2px 6px;padding:7px;border-radius:8px}
  .packing-panel{grid-template-rows:22px minmax(0,1fr) 32px}
  .two-layer .packing-panel{grid-template-rows:22px 32px minmax(0,1fr) 32px}
  .layer-bar{margin:1px 7px 0;padding:2px;gap:4px;border-radius:7px}.layer-tab{min-height:0;padding:0 4px;font-size:11px;gap:5px;border-radius:5px}.layer-tab small{font-size:9px}.layer-stack{font-size:19px}
  .goods-panel{grid-template-columns:58px 64px minmax(0,1fr);grid-template-rows:17px minmax(0,1fr) 42px;padding:6px 8px;gap:5px}
  .goods-header h2{font-size:12px}.goods-count{font-size:10px}.goods-grid{gap:5px}.piece-card,.piece-card.selected{border-radius:7px;padding:3px 3px 2px;gap:2px}.piece-card .piece-art{height:calc(100% - 13px);max-height:66px;max-width:114px}.goods-grid.few-goods .piece-art{max-height:112px}.piece-card .piece-name{font-size:9px;line-height:11px}.piece-card .packed-tag{font-size:8px;top:1px;right:1px}
  .rotate-button>span{font-size:12px}.rotate-button{border-radius:8px;font-size:17px;min-height:40px}.hint-button{font-size:11px}.ship-button{border-radius:8px;min-height:40px;font-size:12px;letter-spacing:0}
  .fill-status>span{font-size:10px}.fill-status>strong{font-size:13px}.soft-button{border-radius:7px}
  .page-footer nav{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.level-dot,.level-nav{width:100%;min-width:0;height:100%;padding:0;font-size:11px;border-radius:6px;box-shadow:none}
  .modal{border-radius:16px}
  .toast{font-size:10px}.account-entry{background:#fff9ea;border-color:#cfc1a4;color:#6b624d}
}
@media(max-width:780px) and (max-height:680px) and (orientation:portrait){
  .game-shell{grid-template-rows:36px 76px minmax(0,1fr) 26px}
  .goods-panel{padding:5px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:16px minmax(0,1fr) 40px 42px;gap:5px}
  .goods-header h2{font-size:0}.goods-header h2::after{font-size:10px}.two-layer .goods-header h2::after{content:'本层商品'}
  .goods-count{font-size:9px}.piece-card .piece-art{height:100%;max-height:90px}.goods-grid.few-goods{grid-template-rows:repeat(2,minmax(0,1fr))}
  .hint-button{font-size:10px}.rotate-button>span{font-size:10px}.rotate-button{font-size:15px;gap:1px}.ship-button{font-size:11px}
  .panel-header{padding-inline:5px}.panel-header h2{font-size:10px}.box-name{font-size:8px}.board-area{padding:5px;margin-inline:4px}.layer-bar{margin-inline:4px}.layer-tab{gap:3px;font-size:10px}.layer-tab small{font-size:8px}.layer-stack{display:none}
  .brand h1{font-size:15px}.icon-button{width:30px;height:30px}.top-actions{gap:3px}.brand{gap:5px}
}
@media(max-height:500px) and (orientation:landscape){
  .game-shell{grid-template-rows:32px 66px minmax(0,1fr) 26px}
  .packing-panel{grid-template-rows:20px minmax(0,1fr) 28px}.two-layer .packing-panel{grid-template-rows:20px 28px minmax(0,1fr) 28px}
  .goods-panel{grid-template-rows:15px minmax(0,1fr) 40px}.goods-header h2{font-size:11px}.piece-card .piece-art{max-height:50px}
}
@media(prefers-reduced-motion:reduce){.board,.piece-card,.ship-button,.layer-tab{transition:none!important}}