.resource-choice{border-color:#c5a772;background:linear-gradient(130deg,#fffdf4,#f8edd6)}.resource-game{width:min(100%,720px);min-height:100vh;margin:auto;padding:18px 14px 24px;display:grid;grid-template-rows:auto 7px auto auto minmax(300px,1fr) auto;gap:10px}.resource-instruction{min-height:2.4em;margin:2px auto 0;max-width:42ch;text-align:center;color:#425970;font-weight:700}.resource-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#53677c;font-size:.88rem;font-weight:800}.rotate-button{min-height:46px;padding:8px 14px}.rotate-button:disabled{opacity:.45;cursor:not-allowed}.packing-grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);aspect-ratio:1;min-height:300px;overflow:hidden;border:3px solid #55748a;border-radius:20px;background:#eaf3ed;box-shadow:inset 0 0 0 8px #d4e4dc}.packing-cell{z-index:1;min-width:0;min-height:0;padding:0;border:1px solid #aac2b4;background:#f9fcf8;cursor:pointer}.packing-cell.blocked{background:repeating-linear-gradient(-45deg,#bcc5c2 0 4px,#e3e7e5 4px 8px);cursor:not-allowed}.resource-piece{z-index:2;min-width:0;min-height:0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:none}.resource-piece.selected .piece-cells{filter:drop-shadow(0 0 5px #f4c947);transform:scale(1.04)}.drag-ghost{position:fixed!important;z-index:1000!important;pointer-events:none!important;opacity:.88;filter:drop-shadow(0 7px 8px #09284855);transform:translate(-50%,-50%) scale(1.08);transition:none!important}.drop-zone{z-index:3;display:grid;pointer-events:none;grid-template-columns:repeat(var(--piece-cols),1fr);grid-template-rows:repeat(var(--piece-rows),1fr);opacity:.72}.drop-zone i{border:3px dashed currentColor;background:color-mix(in srgb,currentColor 20%,transparent)}.drop-zone.valid{color:#16894a}.drop-zone.invalid{color:#b53640}.piece-cells{position:relative;display:grid;width:100%;height:100%;grid-template-columns:repeat(var(--piece-cols),1fr);grid-template-rows:repeat(var(--piece-rows),1fr);transition:transform .15s ease,filter .15s ease}.piece-cells i{z-index:1;display:block;min-width:0;min-height:0;border:2px solid #285d6f;background:color-mix(in srgb,var(--resource) 28%,white);box-shadow:inset 0 2px #ffffffaa}.resource-art{position:absolute;z-index:2;inset:7%;display:grid;place-items:center;pointer-events:none;transform:rotate(calc(var(--rotation) * 90deg));transform-origin:center}.resource-art svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#173e5b;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.resource-art .art-fill{fill:color-mix(in srgb,var(--resource) 82%,#fff)}.resource-art .art-light{fill:#fff8e9}.resource-tray{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:96px;padding:12px;border:2px dashed #a7bbc6;border-radius:16px;background:#fff}.tray-piece{width:calc(44px * var(--piece-cols));height:calc(44px * var(--piece-rows));flex:0 0 auto}.resource-game .hud{margin:0}.resource-game .progress{margin:0}@media(min-width:760px){.resource-game{padding:26px 34px}.packing-grid{min-height:450px}.tray-piece{width:calc(54px * var(--piece-cols));height:calc(54px * var(--piece-rows))}}@media(forced-colors:active){.resource-piece.selected{outline:3px solid Highlight}.packing-cell.blocked{background:GrayText}}
.resource-art img{width:100%;height:100%;object-fit:contain}