*{box-sizing:border-box}html,body{margin:0;background:#0d0e00;color:#faf9f3}body{font-family:Arial,Helvetica,sans-serif}.footer{width:100%;min-height:100svh;overflow:hidden}.previous{height:35px;background:#f6f6f4;border-radius:0 0 60px 60px}.stage{position:relative;width:1914px;height:863px;transform-origin:top left}header{position:absolute;left:90px;top:91px}.available{display:inline-flex;align-items:center;gap:12px;font-size:21px;border:1px solid #efefe3;border-radius:30px;padding:10px 17px}.available i{width:13px;height:13px;background:#91e553;border-radius:50%;box-shadow:0 0 0 3px #26391c}h1{font-family:Georgia,'Times New Roman',serif;font-size:64px;line-height:1.23;font-weight:400;letter-spacing:-2.8px;margin:27px 0 0}nav{position:absolute;left:1470px;top:91px;display:flex;gap:60px;font-size:23px}nav div{display:flex;flex-direction:column;gap:25px}nav span{color:#a5a49b;margin-bottom:4px}a{color:inherit;text-decoration:none;width:max-content;transition:opacity .2s,transform .2s}a:hover{opacity:.8;transform:translateX(1px)}.card{position:absolute;width:118px;height:136px;user-select:none;touch-action:none;cursor:grab;filter:drop-shadow(0 2px 1px #0002);will-change:transform}.card:active{cursor:grabbing}.card img{width:100%;height:100%;pointer-events:none}.star{position:absolute;left:1737px;top:744px;width:90px;height:90px;border:0;background:none;padding:0;cursor:pointer;transform:rotate(-12deg);transition:transform .65s cubic-bezier(.22,1,.36,1);z-index:30}.star:hover{transform:rotate(-6deg) scale(1.025)}.star svg{width:100%;height:100%}.peek{position:absolute;left:775px;top:380px;background:#141414;padding:15px 22px;border-radius:35px;font-size:23px;pointer-events:none;animation:peek 1.1s both}@keyframes peek{0%,45%{opacity:1}100%{opacity:0}}dialog{width:min(680px,94vw);border:0;background:#f2efe7;color:#202116;padding:30px;border-radius:8px}dialog::backdrop{background:#0007;backdrop-filter:blur(3px)}dialog h2{font:36px Georgia;margin:0 30px 10px 0}dialog p{color:#6c6b62}canvas{width:100%;background:#fff;touch-action:none;border:1px solid #ddd8cc;cursor:crosshair}.close{position:absolute;right:18px;top:10px;border:0;background:none;font-size:32px}.tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}.tools button,.tools input{padding:10px;border:1px solid #c8c5b9;background:transparent;color:inherit}.tools input[type=color]{padding:3px;width:40px;height:40px}.tools #save{background:#202116;color:white;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #91e553;outline-offset:5px}@media(max-width:700px){.previous{height:20px;border-radius:0 0 26px 26px}.stage{width:1914px}dialog{padding:20px}.tools #name{width:160px}}

.peek{display:none}.available{border-color:#8c8d7a;color:#e2e2d6}.available i{background:#91bd70;box-shadow:0 0 0 3px #25301e}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Warm paper / terracotta / olive palette */
html,body{background:#e8dfce;color:#4d4939}.previous{background:#faf7f0}.available{border-color:#ada58e;color:#68634f}.available i{background:#778561;box-shadow:0 0 0 3px #d5dcc6}nav span{color:#93866e}nav a{color:#5c5948}h1{color:#514834}.card{filter:drop-shadow(0 3px 4px #79634b14)}dialog{background:#eee4d4;color:#514834}dialog p{color:#88765f}canvas{background:#f7f1e6;border-color:#d4c7b1}.tools #save{background:#a45c42;color:#faf4e9;border-color:#a45c42}button:focus-visible,a:focus-visible{outline-color:#a45c42}

/* Independent image motion preserves each card's placement and drag transform. */
.card img{display:block;transform-origin:50% 60%;will-change:transform;animation:card-drift var(--float-duration,7s) ease-in-out var(--float-delay,0s) infinite}
.card.dragging img{animation-play-state:paused}
@keyframes card-drift{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}35%{transform:translate3d(var(--float-x,6px),var(--float-y,-10px),0) rotate(var(--float-angle,1.8deg))}70%{transform:translate3d(calc(var(--float-x,6px) * -.55),calc(var(--float-y,-10px) * .35),0) rotate(calc(var(--float-angle,1.8deg) * -.6))}}
@media(prefers-reduced-motion:reduce){.card img{animation:none;will-change:auto}}
