:root{--steel-dark: #2b2f33;--steel: #3c4247;--steel-light: #565d63;--manila: #d9c9a3;--ink: #1d2a4d;--stamp: #b22222}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Roboto Mono,ui-monospace,Menlo,Consolas,monospace;color:#f0ead9;background:radial-gradient(circle at 30% 15%,#4a4038,#2c2620 55%,#1a1712)}.room{max-width:1080px;margin:0 auto;padding:28px 16px 80px}.hint{text-align:center;font-size:12.5px;letter-spacing:.3px;color:#cdbf98;margin:0 0 22px}.stage{display:flex;flex-wrap:wrap;gap:46px;align-items:flex-start;justify-content:center}.machine{position:relative;width:340px;min-height:470px;padding:18px 18px 26px;border-radius:18px 18px 12px 12px;background:linear-gradient(180deg,#61686e,#454b50 30%,#2e3338 78%,#23272b);border:2px solid #16191c;box-shadow:inset 0 3px 5px #ffffff38,inset 0 -26px 40px #00000080,0 30px 60px #0000008c}.machine__brand{text-align:center;font-family:Black Han Sans,sans-serif;font-size:19px;letter-spacing:2px;color:#d7c58c;text-shadow:0 1px 0 #000;display:flex;flex-direction:column;line-height:1.25}.machine__brand span{font-family:Roboto Mono,monospace;font-size:8.5px;letter-spacing:2.5px;color:#8b8f93}.machine__clockwell{width:244px;height:244px;margin:14px auto 6px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#1c1f22,#0e1012);box-shadow:inset 0 8px 18px #000000bf,0 2px #ffffff14;display:flex;align-items:center;justify-content:center}.machine__clock{width:220px;height:220px}.machine__slot{position:relative;width:268px;height:20px;margin:12px auto 0;border-radius:4px;background:#101315;box-shadow:inset 0 7px 12px #000000d9,0 1px #ffffff1f;transition:box-shadow .15s}.machine__slot-lip{position:absolute;left:8px;right:8px;top:50%;height:4px;transform:translateY(-50%);background:#000;border-radius:2px}.machine__slot.slot--hot{box-shadow:inset 0 7px 12px #000000d9,0 0 0 3px #7cf6c68c,0 0 18px #7cf6c680}.machine__body{margin:16px 6px 0;height:92px;border-radius:8px;background:linear-gradient(180deg,#3f454a,#2b3034);box-shadow:inset 0 2px 3px #ffffff1f,inset 0 -8px 14px #0006}.machine__bolts{display:flex;justify-content:space-between;padding:10px 12px}.machine__bolts i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#efeff0,#9a9ea1 45%,#3d4043);box-shadow:0 1px 2px #00000080}.machine__msg{min-height:20px;margin:14px 4px 0;font-size:12.5px;text-align:center;color:#ffe6a0}.machine__msg.error{color:#ff9d9d}.machine__msg.ok{color:#9df6c7}.lever{position:absolute;right:-26px;top:300px;width:30px;height:132px;padding:0;background:none;border:none;cursor:grab;transform-origin:50% 100%;transform:rotate(-6deg);transition:transform .16s cubic-bezier(.3,1.4,.5,1)}.lever:active{cursor:grabbing}.lever.lever--pulled{transform:rotate(74deg)}.lever__arm{position:absolute;left:50%;bottom:0;width:9px;height:118px;transform:translate(-50%);border-radius:5px;background:linear-gradient(90deg,#8b9096,#d6dade 40%,#6b7076);box-shadow:0 2px 4px #00000080}.lever__ball{position:absolute;left:50%;top:-6px;width:30px;height:30px;transform:translate(-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#ff7b73,#c1271f 55%,#7c110c);box-shadow:inset 0 3px 4px #fff6,0 4px 8px #00000080}.lever__label{position:absolute;left:50%;bottom:-20px;transform:translate(-50%);font-size:8px;letter-spacing:2px;color:#cdbf98}.lever:focus-visible{outline:2px solid #7cf6c6;outline-offset:4px}.inserted{position:absolute;left:22px;right:22px;top:314px;z-index:3;display:flex;flex-direction:column;align-items:center;animation:card-in .3s ease-out}@keyframes card-in{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}.inserted__viewport{width:100%;height:320px;overflow:hidden auto;background:var(--manila);border:1px solid #8a7550;border-radius:3px 3px 0 0;box-shadow:0 18px 34px #00000080,inset 0 8px 12px #00000040;scrollbar-width:thin}.inserted__eject{margin-top:-1px;padding:7px 14px;font-family:inherit;font-size:11.5px;letter-spacing:1px;color:#eee;background:#3a4045;border:1px solid #16191c;border-radius:0 0 6px 6px;cursor:pointer}.inserted__eject:hover{background:#4a5157}.rack{width:320px;padding:16px 16px 26px;border-radius:10px;background:linear-gradient(180deg,#6b5233,#4a3a26 60%,#37291a);border:2px solid #241a10;box-shadow:inset 0 2px 3px #ffffff24,0 24px 46px #00000080}.rack__head{font-family:Black Han Sans,sans-serif;letter-spacing:3px;font-size:14px;color:#e6d3a5;text-align:center;margin-bottom:12px}.rack__pocket{position:relative;min-height:320px}.rack__pocket:after{content:"";position:absolute;left:-8px;right:-8px;bottom:-20px;height:40px;border-radius:4px;background:linear-gradient(180deg,#5a4629,#3d2f1c);box-shadow:0 -3px 8px #0006,inset 0 2px 2px #ffffff1a;pointer-events:none;z-index:50}.card{position:absolute;left:0;right:0;height:66px;overflow:hidden;border-radius:4px 4px 2px 2px;background:var(--manila);border:1px solid #a8946b;box-shadow:0 6px 12px #00000059;cursor:grab;touch-action:none;transition:transform .16s ease,box-shadow .16s ease,height .18s ease}.card__tab{position:relative;height:54px;padding:14px 12px 0 36px;display:flex;align-items:baseline;gap:10px}.card__tab:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--stripe, #b22222)}.card__tab:after{content:"";position:absolute;left:13px;top:26px;width:8px;height:8px;border-radius:50%;background:#b7a578;box-shadow:15px 0 #b7a578,inset 0 1px 1px #0006}.card__no{font-family:Black Han Sans,sans-serif;font-size:19px;letter-spacing:1px;color:#8a2b2b;line-height:1}.card__name{font-size:14px;font-weight:700;color:#25324f}.card__grid{display:block;width:100%;height:auto}.card__tab,.card__grid{touch-action:none}.card:hover{transform:translateY(-16px);box-shadow:0 18px 26px #00000073}.card.card--dragging{position:fixed;height:300px;margin:0;cursor:grabbing;transition:none;transform:rotate(-3deg);box-shadow:0 28px 44px #0000008c;z-index:1000;pointer-events:auto}.card.card--returning{position:fixed;z-index:1000;transition:left .3s ease,top .3s ease}.card.card--inserted{position:static;height:auto;overflow:visible;transform:none;border:none;box-shadow:none;cursor:default;width:100%!important}.card.card--inserted:hover{transform:none}.card.card--inserted .card__tab{position:sticky;top:0;z-index:4;background:var(--manila);box-shadow:0 3px 8px #00000047}@media (max-width: 760px){.stage{gap:28px}.machine,.rack{width:100%;max-width:340px}}
