:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#29223b;background:#eeeafa}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;cursor:pointer}.app-shell{width:100%;min-height:100vh;display:grid;place-items:center;padding:24px;overflow:hidden;background:radial-gradient(circle at 50% 0,#fefcff,#e7e1f5 70%)}.menu,.game{width:100%;max-width:760px;min-width:0}.menu{text-align:center;padding:48px 24px}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800;color:#7965a8}h1,h2{margin:0;color:#342953}h1{font-size:clamp(3rem,12vw,5.5rem)}h2{font-size:clamp(1.8rem,7vw,2.7rem)}.menu>p:not(.eyebrow){margin:18px auto 32px;max-width:410px;line-height:1.5;color:#625a76}.primary-button,.secondary-button{border:0;padding:14px 24px;border-radius:14px;font-weight:800;min-height:50px}.primary-button{color:#fff;background:#6e54a3;box-shadow:0 8px 20px #6e54a355}.primary-button:hover{background:#573d8d}.secondary-button{color:#5d5174;background:#e9e4f3}.menu-link{display:block;margin:18px auto 0;border:0;color:#655184;background:transparent;text-decoration:underline;font-weight:700}.column-picker{margin:0 auto 28px;border:0;padding:0}.column-picker legend{margin-bottom:10px;color:#655b77;font-size:.9rem}.column-picker div{display:flex;justify-content:center;gap:8px}.column-option{width:48px;height:46px;border:2px solid #d9d0e8;border-radius:12px;color:#625574;background:#f8f6fc;font-weight:800}.column-option--active{border-color:#6e54a3;color:#fff;background:#6e54a3;box-shadow:0 5px 14px #6e54a355}.capacity-picker{display:grid;gap:8px;width:min(100%,250px);margin:-10px auto 28px;color:#655b77;font-size:.9rem}.capacity-picker select{min-height:44px;padding:0 12px;border:2px solid #d9d0e8;border-radius:12px;color:#3d3157;background:#f8f6fc;font:inherit;font-weight:800}.game{position:relative;background:#fcfbff;border:1px solid #ded7ec;border-radius:24px;padding:18px;box-shadow:0 18px 48px #4b356522}.game-header{display:flex;align-items:center;justify-content:space-between;gap:4px;text-align:center}.game-header div{display:grid;gap:2px}.game-header span{font-size:.78rem;color:#81778f}.text-button{color:#655184;background:transparent;border:0;padding:8px;font-size:clamp(.72rem,3.5vw,1rem);font-weight:700}.hint{margin:18px auto;text-align:center;max-width:540px;color:#706780;font-size:.87rem;line-height:1.35}.buffer{--card-height: clamp(28px, 8vw, 62px);display:grid;grid-template-columns:repeat(var(--column-count),minmax(0,1fr));gap:clamp(2px,1vw,8px);width:100%;margin:0 auto 22px;padding:clamp(4px,2vw,10px);background:#eee9f6;border-radius:14px}.buffer-slot{height:calc(var(--card-height) + 6px);min-width:0;border:2px dashed #c6bbd8;border-radius:10px;display:grid;place-items:center;transition:border-color .12s,background .12s,box-shadow .12s}.buffer-slot--drop-target{border-color:#6e54a3;background:#ddd2f2;box-shadow:inset 0 0 0 2px #6e54a344}.board{--card-height: clamp(22px, 5.5vw, 58px);display:grid;grid-template-columns:repeat(var(--column-count),minmax(0,1fr));align-items:stretch;gap:clamp(2px,1vw,7px);width:100%}.column{min-width:0;display:flex;flex-direction:column;border:1px solid #dfd7e9;border-radius:12px;padding:clamp(4px,1vw,8px) clamp(2px,.7vw,4px);background:#f8f6fb;transition:border-color .12s,background .12s,box-shadow .12s}.column--drop-target{border-color:#6e54a3;background:#eee7fb;box-shadow:0 0 0 2px #6e54a344,0 8px 18px #6e54a322}.column-number{color:#a79bb9;text-align:center;font-size:.73rem;font-weight:800;margin-bottom:5px}.stack{display:grid;grid-template-rows:repeat(var(--column-capacity),var(--card-height));align-content:end;gap:5px}.card{width:100%;height:var(--card-height, 42px);flex:0 0 var(--card-height, 42px);min-width:0;border-radius:clamp(5px,1.5vw,9px);border:2px solid #ccc1dc;background:#e9e3f0;touch-action:none;padding:0;font-size:clamp(.9rem,4vw,2.25rem);transition:transform .12s,opacity .12s}.card--closed{color:#795d9d;font-weight:900}.card--open{background:var(--card-color);border-color:color-mix(in srgb,var(--card-color),#735a8f 35%)}.card--dragging{opacity:.28;transform:scale(.93)}.drag-preview{position:fixed;z-index:10;width:clamp(48px,13vw,76px);height:clamp(48px,13vw,76px);min-height:0;transform:translate(-50%,-62%) rotate(4deg) scale(1.08);pointer-events:none;box-shadow:0 14px 22px #33224a55;animation:pickup .14s ease-out}@keyframes pickup{0%{transform:translate(-50%,-52%) rotate(0) scale(.82)}to{transform:translate(-50%,-62%) rotate(4deg) scale(1.08)}}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;border-radius:24px;background:#211735b8}.result-card{width:min(100%,400px);padding:30px 24px;text-align:center;background:#fff;border-radius:22px;box-shadow:0 14px 40px #120a2244}.result-card>p:not(.eyebrow){color:#6f657b}.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}.record-form{display:grid;gap:10px;margin-top:20px;text-align:left}.record-form label{color:#625574;font-size:.85rem;font-weight:700}.record-form input{min-height:46px;border:2px solid #d9d0e8;border-radius:12px;padding:0 12px;font:inherit}.record-form .primary-button{justify-self:stretch}.form-error{margin:0;color:#af3759;font-size:.8rem}.leaderboard{margin:14px 0;text-align:left}.leaderboard h3{margin:0 0 8px;color:#44345f;text-align:center}.leaderboard p{color:#71677d;text-align:center;font-size:.85rem}.leaderboard ol{max-height:230px;margin:0;padding-left:28px;overflow:auto}.leaderboard li{display:flex;justify-content:space-between;gap:12px;padding:5px 2px;border-bottom:1px solid #eee9f5}.leaderboard li b{color:#5e428f}@media(max-width:450px){.app-shell{padding:10px}.game{border-radius:18px;padding:12px}.column-number{font-size:.65rem}.hint{font-size:.78rem}}
