/* ===================================================================== * Phase 2.14 (2026-06-12) — Rental-unit hardware tile shapes. * * Adapted from reference/new design/new pc tiles/PC Management - Hardware.html. * Operator picks per-section in the Section Editor when "Rental Unit" * is checked. The shape is conveyed via data-device on the .pc-card: * • data-device="table" → pool table (felt + 6 pockets, NO legs) * • data-device="ps" → PlayStation (TV bezel + console-bar + gamepad, * NO tv-feet) * • everything else → default monitor rendering (unchanged) * * The .pc-card flex column structure is preserved so the magnifier, * floor-plan positioning, and density presets keep working untouched. * The shape "shell" sits inside the existing card padding; the inner * .face block holds the status pill + timer. * * For rental units the renderer emits ONLY status + timer inside the * shape (no user name, no avatar, no balance — operator-confirmed). * Status colors come from the existing .pc-edge--{state} variables. * ===================================================================== */ #pc-grid-sections .pc-card[data-device="table"], #pc-grid-sections .pc-card[data-device="ps"] { /* Strip the gradient + border + inset shadows from the legacy .pc-card frame so the inner shape shows cleanly. The status edge bar (.pc-edge) is also hidden — these shapes communicate state via the felt scrim / bezel glow instead. */ background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px !important; } #pc-grid-sections .pc-card[data-device="table"] .pc-edge, #pc-grid-sections .pc-card[data-device="ps"] .pc-edge, #pc-grid-sections .pc-card[data-device="table"] .pc-sheen, #pc-grid-sections .pc-card[data-device="ps"] .pc-sheen { display: none !important; } /* ============================================================ * POOL TABLE * ============================================================ */ #pc-grid-sections .pc-card[data-device="table"] .pc-shape { position: relative; width: 100%; border-radius: 12px; padding: 10px; background: linear-gradient(180deg, #3a2718 0%, #2a1c11 100%); /* wood rail */ border: 1px solid #1f140b; box-shadow: 0 1px 0 rgba(255, 221, 170, .10) inset, 0 10px 24px -14px rgba(0, 0, 0, .9); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #pc-grid-sections .pc-card[data-device="table"] .pc-felt { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 6px; background: radial-gradient(130% 120% at 50% 0%, #1f7a4e 0%, #14613c 55%, #0e4a2d 100%); box-shadow: 0 0 0 2px #11281b inset, 0 6px 14px -6px rgba(0, 0, 0, .7) inset; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; flex: 1 1 auto; min-height: 0; } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #000 0%, #050505 60%, #1a1a1a 100%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); pointer-events: none; z-index: 2; } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket--tl { top: 3px; left: 3px; } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket--tr { top: 3px; right: 3px; } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket--bl { bottom: 3px; left: 3px; } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket--br { bottom: 3px; right: 3px; } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket--tm { top: 1px; left: 50%; transform: translateX(-50%); } #pc-grid-sections .pc-card[data-device="table"] .pc-pocket--bm { bottom: 1px; left: 50%; transform: translateX(-50%); } /* Status overlay: tint felt by state. Available stays clean green. */ #pc-grid-sections .pc-card[data-device="table"] .pc-felt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px; } #pc-grid-sections .pc-card[data-device="table"][data-state="in-use"] .pc-felt::after { background: rgba(245,158,11,.18); } #pc-grid-sections .pc-card[data-device="table"][data-state="guest-times-up"] .pc-felt::after { background: rgba(239,68,68,.22); } #pc-grid-sections .pc-card[data-device="table"][data-state="reserved"] .pc-felt::after { background: rgba(96,165,250,.18); } #pc-grid-sections .pc-card[data-device="table"][data-state="cleaning"] .pc-felt::after { background: rgba(34,211,238,.16); } #pc-grid-sections .pc-card[data-device="table"][data-state="issue"] .pc-felt::after { background: rgba(192,132,252,.18); } #pc-grid-sections .pc-card[data-device="table"][data-state="offline"] .pc-felt { filter: grayscale(.7) brightness(.6); } /* Felt-internal labels — white-ish so they pop on green */ #pc-grid-sections .pc-card[data-device="table"] .pc-name, #pc-grid-sections .pc-card[data-device="table"] .pc-time, #pc-grid-sections .pc-card[data-device="table"] .pc-state-word { color: #eafff3 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); position: relative; z-index: 3; } /* ============================================================ * PLAYSTATION (TV + console-bar + gamepad) * ============================================================ */ #pc-grid-sections .pc-card[data-device="ps"] .pc-shape { position: relative; width: 100%; border-radius: 12px; padding: 7px 8px 8px; background: linear-gradient(165deg, #222834 0%, #14181f 55%, #0e1116 100%); border: 1px solid #2c3340; box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 24px -16px rgba(0, 0, 0, .9); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #pc-grid-sections .pc-card[data-device="ps"] .pc-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 5px; background: #06080b; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6) inset; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; flex: 1 1 auto; min-height: 0; } #pc-grid-sections .pc-card[data-device="ps"][data-state="available"] .pc-screen { background: radial-gradient(120% 120% at 50% 0%, #0d2016 0%, #06110b 70%); } #pc-grid-sections .pc-card[data-device="ps"][data-state="in-use"] .pc-screen { background: radial-gradient(120% 130% at 50% 0%, #161208 0%, #0a0905 72%); } #pc-grid-sections .pc-card[data-device="ps"][data-state="guest-times-up"] .pc-screen { background: radial-gradient(120% 130% at 50% 0%, #200d0d 0%, #0c0606 72%); } #pc-grid-sections .pc-card[data-device="ps"][data-state="reserved"] .pc-screen { background: radial-gradient(120% 120% at 50% 0%, #0b1626 0%, #060b15 70%); } #pc-grid-sections .pc-card[data-device="ps"][data-state="offline"] .pc-screen { background: linear-gradient(160deg, #0a0c0f, #060708); } /* Console bar with gamepad below the bezel */ #pc-grid-sections .pc-card[data-device="ps"] .pc-console { position: relative; margin-top: 6px; width: 78%; align-self: center; height: 12px; border-radius: 4px; background: linear-gradient(180deg, #1d222b, #101319); border: 1px solid #2a313c; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; } #pc-grid-sections .pc-card[data-device="ps"] .pc-console-led { width: 4px; height: 4px; border-radius: 50%; background: #4ade80; } #pc-grid-sections .pc-card[data-device="ps"][data-state="in-use"] .pc-console-led { background: #f59e0b; } #pc-grid-sections .pc-card[data-device="ps"][data-state="guest-times-up"] .pc-console-led { background: #ef4444; } #pc-grid-sections .pc-card[data-device="ps"][data-state="reserved"] .pc-console-led { background: #60a5fa; } #pc-grid-sections .pc-card[data-device="ps"][data-state="offline"] .pc-console-led { background: #2a2f38; } #pc-grid-sections .pc-card[data-device="ps"] .pc-console-slot { width: 20px; height: 3px; border-radius: 2px; background: #2c333f; } #pc-grid-sections .pc-card[data-device="ps"] .pc-gamepad { position: absolute; right: -8px; top: -10px; width: 28px; height: 16px; border-radius: 9px; background: linear-gradient(180deg, #232934, #14181f); border: 1px solid #2c3340; box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .85); } #pc-grid-sections .pc-card[data-device="ps"] .pc-gamepad::before, #pc-grid-sections .pc-card[data-device="ps"] .pc-gamepad::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #3a414d; } #pc-grid-sections .pc-card[data-device="ps"] .pc-gamepad::before { left: 5px; } #pc-grid-sections .pc-card[data-device="ps"] .pc-gamepad::after { right: 5px; } /* Inside-screen labels — same crisp white as the felt */ #pc-grid-sections .pc-card[data-device="ps"] .pc-name, #pc-grid-sections .pc-card[data-device="ps"] .pc-time, #pc-grid-sections .pc-card[data-device="ps"] .pc-state-word { color: #eafff3 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .65); position: relative; z-index: 2; } /* ============================================================ * Shared rental content layout — name/timer/status stacked center. * Hide foot (no avatar/user/balance for rentals, operator-confirmed). * ============================================================ */ #pc-grid-sections .pc-card[data-device="table"] .pc-name, #pc-grid-sections .pc-card[data-device="ps"] .pc-name { font-size: clamp(8px, 10cqi, 13px); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 4px; } #pc-grid-sections .pc-card[data-device="table"] .pc-time, #pc-grid-sections .pc-card[data-device="ps"] .pc-time { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: clamp(11px, 16cqi, 22px); font-weight: 600; letter-spacing: -0.01em; } #pc-grid-sections .pc-card[data-device="table"] .pc-state-word, #pc-grid-sections .pc-card[data-device="ps"] .pc-state-word { font-size: clamp(7px, 9cqi, 11px); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; } /* Rental state-word coloring — only the three states a rental tile can express (operator-confirmed). Mirrors the kiosk substate. */ #pc-grid-sections .pc-card[data-device="table"][data-state="available"] .pc-state-word, #pc-grid-sections .pc-card[data-device="ps"][data-state="available"] .pc-state-word { color: #4ade80 !important; } #pc-grid-sections .pc-card[data-device="table"][data-state="in-use"] .pc-state-word, #pc-grid-sections .pc-card[data-device="ps"][data-state="in-use"] .pc-state-word { color: #fbbf24 !important; } #pc-grid-sections .pc-card[data-device="table"][data-state="guest-times-up"] .pc-state-word, #pc-grid-sections .pc-card[data-device="ps"][data-state="guest-times-up"] .pc-state-word { color: #ef4444 !important; }