:root {
    --ink: #263652;
    --coral: #f66b74;
    --cream: rgba(255, 251, 244, 0.94);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    background: #ffd9c9;
}

button { font: inherit; }

.parcel-game,
.sort-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scene-background,
.scene-tint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.scene-background { object-fit: cover; object-position: center; }
.scene-tint { background: linear-gradient(180deg, rgba(255,245,240,.2), rgba(255,224,211,.18)); }

.game-header {
    position: fixed;
    z-index: 50;
    top: max(9px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) 54px;
    align-items: start;
    pointer-events: none;
}

.round-btn {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255,255,255,.82);
    box-shadow: 0 6px 0 rgba(65,56,69,.15), 0 9px 22px rgba(45,55,78,.16);
    backdrop-filter: blur(8px);
    text-decoration: none;
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

.round-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(65,56,69,.15); }

.title-wrap {
    justify-self: center;
    width: min(570px, 72vw);
    padding: 2px 18px 7px;
    border-radius: 22px;
    text-align: center;
    color: var(--ink);
    background: rgba(255,249,245,.78);
    box-shadow: 0 6px 20px rgba(77,63,67,.13);
    backdrop-filter: blur(8px);
}

.title-wrap h1 { margin: 0; font-size: clamp(28px,4vw,43px); line-height: 1.08; text-shadow: 0 3px 0 rgba(255,255,255,.8); }
.title-wrap p { margin: 2px 0 0; color: #687185; font-size: clamp(13px,1.8vw,18px); font-weight: 800; }

.score-badge {
    position: absolute;
    z-index: 22;
    top: 96px;
    min-width: 135px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 8px 12px;
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255,250,246,.84);
    box-shadow: 0 5px 15px rgba(65,55,74,.14);
    font-size: 13px;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.score-badge strong { font-size: 19px; }
.combo-badge { left: max(16px, env(safe-area-inset-left)); }
.total-badge { right: max(16px, env(safe-area-inset-right)); }
.combo-badge.hot { color: #c54a31; animation: comboPulse .45s cubic-bezier(.2,.9,.3,1.3); }

.encouragement {
    position: absolute;
    z-index: 23;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    min-width: 190px;
    padding: 7px 15px;
    border-radius: 17px;
    text-align: center;
    color: #c85543;
    background: rgba(255,250,246,.82);
    box-shadow: 0 4px 14px rgba(65,55,74,.11);
    font-size: clamp(15px,2vw,20px);
    font-weight: 900;
    opacity: .94;
    backdrop-filter: blur(7px);
}

.encouragement.pop { animation: encouragementPop .5s cubic-bezier(.2,.9,.3,1.3); }

.bins {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 136px;
    transform: translateX(-50%);
    width: min(1120px, 94vw);
    height: min(55vh, 465px);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 14px;
}

.bin {
    position: relative;
    width: min(30%, 355px);
    height: 100%;
    border: 0;
    padding: 0 0 25px;
    background: transparent;
    cursor: pointer;
    touch-action: none;
}

.bin img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 14px 10px rgba(35,44,61,.23));
    transition: transform .18s ease, filter .18s ease;
}

.bin span {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    min-width: 88px;
    padding: 4px 11px;
    border-radius: 13px;
    color: #525e70;
    background: rgba(255,250,240,.92);
    box-shadow: 0 3px 8px rgba(46,51,63,.15);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
}

.bin.ready img,
.bin.selected-target img { transform: translateY(-5px) scale(1.04); filter: drop-shadow(0 0 22px rgba(255,222,92,.95)); }
.bin.correct img { animation: binCorrect .5s cubic-bezier(.2,.9,.3,1.2); }
.bin.wrong img { animation: binWrong .38s ease; }

.queue-panel {
    position: absolute;
    z-index: 26;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(810px, 96vw);
    min-height: 158px;
    padding: 25px 12px 7px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,252,248,.95), rgba(255,239,232,.91));
    box-shadow: 0 13px 30px rgba(60,49,62,.2), inset 0 2px 0 white;
    backdrop-filter: blur(9px);
}

.queue-heading {
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7a6670;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}
.queue-heading i { color: var(--coral); font-style: normal; animation: arrowNudge 1s ease-in-out infinite; }

.parcel-queue {
    height: 125px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px,2.2vw,28px);
}

.parcel-item {
    position: relative;
    width: clamp(105px,12vw,128px);
    height: 122px;
    flex: 0 0 auto;
    border: 0;
    padding: 0 0 18px;
    background: transparent;
    cursor: grab;
    touch-action: none;
    transition: opacity .2s ease, transform .2s ease;
    animation: queueIn .45s cubic-bezier(.2,.9,.3,1.2);
}

.parcel-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 9px 7px rgba(52,48,57,.22)); }
.parcel-item span {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 10px;
    color: #586173;
    background: rgba(255,255,255,.88);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.parcel-item.selected { transform: translateY(-8px) scale(1.07); filter: drop-shadow(0 0 14px rgba(255,209,77,.95)); }
.parcel-item.dragging { opacity: 0; }
.parcel-item.wrong { animation: itemWrong .38s ease; }

.drag-ghost,
.delivery-ghost {
    position: fixed;
    z-index: 1000;
    display: block;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 15px 12px rgba(45,42,50,.3));
}
.drag-ghost { transform: translate(-50%,-50%) scale(1.08); }
.delivery-ghost { transform-origin: center; animation: parcelDeliver .52s cubic-bezier(.25,.75,.3,1) forwards; }

@keyframes queueIn { from { opacity:0; transform:translateX(65px) scale(.7); } to { opacity:1; transform:none; } }
@keyframes parcelDeliver { to { transform:translate(var(--dx),var(--dy)) scale(.18) rotate(16deg); opacity:.25; } }
@keyframes comboPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.13) rotate(-2deg)} }
@keyframes encouragementPop { 0%{transform:translateX(-50%) scale(.75);opacity:.25} 65%{transform:translateX(-50%) scale(1.12)} 100%{transform:translateX(-50%) scale(1);opacity:.94} }
@keyframes binCorrect { 0%,100%{transform:none} 45%{transform:translateY(-8px) scale(1.05)} }
@keyframes binWrong { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-9px)} 70%{transform:translateX(9px)} }
@keyframes itemWrong { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-9px) rotate(-5deg)} 70%{transform:translateX(9px) rotate(5deg)} }
@keyframes arrowNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

@media (max-height: 740px) and (min-width: 601px) {
    .bins { top: 116px; height: min(52vh, 375px); }
    .score-badge { top: 86px; }
    .encouragement { top: 88px; }
    .queue-panel { min-height: 132px; }
    .parcel-queue { height: 102px; }
    .parcel-item { width: 105px; height: 103px; }
}

@media (max-width: 600px) {
    .game-header { grid-template-columns: 44px minmax(0,1fr) 44px; left: 7px; right: 7px; }
    .round-btn { width: 43px; height: 43px; border-width: 2px; font-size: 24px; }
    .title-wrap { width: min(265px,72vw); padding: 2px 7px 5px; }
    .title-wrap h1 { font-size: 27px; }
    .title-wrap p { font-size: 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .score-badge { top: 72px; min-width: 107px; padding: 5px 7px; border-radius: 14px; font-size: 10px; }
    .score-badge strong { font-size: 15px; }
    .combo-badge { left: 7px; }
    .total-badge { right: 7px; }
    .encouragement { top: 112px; min-width: 165px; padding: 5px 10px; font-size: 14px; }
    .bins { top: 143px; width: 100vw; height: 32vh; gap: 0; align-items:center; }
    .bin { width: 33.333%; height: 100%; padding-bottom: 20px; }
    .bin span { bottom: 1px; min-width: 70px; padding: 3px 7px; font-size: 11px; }
    .queue-panel { width: 98vw; min-height: 128px; padding: 22px 3px 5px; border-radius: 22px; }
    .parcel-queue { height: 101px; gap: 0; justify-content:space-evenly; }
    .parcel-item { width: 24vw; height: 101px; padding-bottom:16px; }
    .parcel-item span { font-size: 9px; padding: 1px 5px; }
}

@media (orientation: portrait) and (min-width: 700px) {
    .bins { top: 150px; height: 45vh; }
    .queue-panel { min-height: 175px; }
    .parcel-queue { height: 140px; }
    .parcel-item { width: 140px; height: 137px; }
}