*{box-sizing:border-box} :root{ --glass-bg: rgba(255,255,255,0.6); --glass-br: 16px; --shadow: 0 10px 30px rgba(0,0,0,.15); } html,body{height:100%;margin:0;font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#112} #app{min-height:100%;display:flex;flex-direction:column} .scene-bg{position:fixed;inset:0;background:url('./assets/IMG_8213.jpg') center/cover no-repeat fixed;filter:saturate(1.05) contrast(1.05);z-index:-2} .scene-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5) 0, rgba(255,255,255,.75) 60%, rgba(255,255,255,.9) 100%);z-index:-1} .topbar,.bottombar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:12px} .topbar h1{font-size:clamp(18px,2.6vw,28px);margin:0;font-weight:800;letter-spacing:.5px} .glass{background:var(--glass-bg);backdrop-filter:blur(8px);box-shadow:var(--shadow);border-radius:var(--glass-br)} .scoreboard{display:flex;align-items:center;gap:8px;font-size:18px} .scoreboard strong{font-size:22px;min-width:28px;display:inline-block;text-align:center} .game-area{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;padding:18px;margin:auto;width:min(1200px,100%)} .items-panel{padding:16px} .items-panel h2{margin:0 0 8px 0;font-size:20px} .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .item{user-select:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:16px;background:white;box-shadow:var(--shadow);cursor:grab;transition:transform .15s ease,box-shadow .15s ease;touch-action:none} .item:active{cursor:grabbing;transform:scale(.98)} .item .icon{width:84px;height:84px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.05)} .item .icon img{width:100%;height:100%;object-fit:contain} .item .icon.missing,.item .icon.missing img{opacity:.7} .item .label{font-weight:700;text-align:center} .status{min-height:28px;margin-top:6px;font-weight:600} .status.ok{color:#2e7d32}.status.err{color:#c62828} .bins-panel{display:flex;flex-direction:column;gap:16px;align-items:stretch;justify-content:center} .bins-row{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap} .bin{flex:1 1 180px;max-width:calc(50% - 7px);display:flex;flex-direction:column;align-items:center;gap:6px} .bin-body{width:100%;min-height:160px;border-radius:16px;padding:10px;background:linear-gradient(180deg,var(--bin),color-mix(in srgb,var(--bin),#000 20%));box-shadow:var(--shadow);display:grid;place-items:center;color:white;text-align:center;font-weight:800} .bin-lid{width:70%;height:14px;border-radius:10px;background:color-mix(in srgb,var(--bin),#fff 30%);box-shadow:var(--shadow);transform:translateY(8px)} .bin-label{line-height:1.1} .bin.highlight{outline:4px dashed color-mix(in srgb,var(--bin),#fff 30%);outline-offset:4px} .btn{border:0;border-radius:14px;padding:10px 16px;font-weight:700;box-shadow:var(--shadow);cursor:pointer} .btn.primary{background:#0ea5e9;color:#fff} .btn.primary:hover{filter:brightness(1.05)} .bottombar{margin:18px;gap:16px} .powered{display:flex;align-items:center;gap:10px} .powered img{height:36px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))} @media (max-width:960px){.game-area{grid-template-columns:1fr}.bin{max-width:unset}} /* intro */ .intro-screen{position:fixed;inset:0;background:url('./assets/IMG_8213.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;z-index:9999} .intro-content{max-width:460px;padding:32px;text-align:center;border-radius:24px} .intro-content h1{font-size:28px;margin-bottom:12px} .intro-content p{font-size:16px;line-height:1.6;margin-bottom:24px}