/* Actual WebGL cafe; the SVG layout remains the fallback when WebGL is unavailable. */
.hall.is-3d{aspect-ratio:4/3;min-height:390px;border:0;border-radius:18px;background:#e2d9c8;box-shadow:0 18px 42px #172e4b24;container-type:inline-size}
.hall.is-3d>.hp-wrap{display:none}
.hall3d{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.hall3d-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none}
.hall3d-canvas:active{cursor:grabbing}
.hall3d-hud{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.hall3d-clock,.hall3d-guests{display:flex;align-items:center;gap:7px;background:#123461;color:#fff5df;border-radius:10px;padding:8px 11px;box-shadow:0 5px 13px #142d4b23;font-size:11px;font-weight:800}
.hall3d-clock i{width:9px;height:9px;border-radius:50%;background:#ffce36;box-shadow:0 0 0 3px #ffce3624}
.hall3d-clock b{font-size:17px;line-height:1;font-variant-numeric:tabular-nums;color:#ffdc71}
.hall3d-clock span{font-size:10px;font-weight:600;color:#e2e9f2}
.hall3d-guests b{font-size:17px;line-height:1;font-variant-numeric:tabular-nums;color:#ffdc71}
.hall3d-labels,.hall3d-pops{position:absolute;inset:0;pointer-events:none}
.hall3d-table{position:absolute;top:0;left:0;padding:0;display:grid;place-items:center;width:30px;min-height:30px;border:1px solid #fff5d8;border-radius:9px;background:#143c68;color:#fff9e8;font:800 12px Manrope,sans-serif;box-shadow:0 3px 7px #112c4b35;pointer-events:auto;cursor:pointer;opacity:.65}
.hall3d-table:disabled{cursor:default}
.hall3d-table.is-occupied{opacity:1;background:#fff7e7;color:#153966;border-color:#173d65}
.hall3d-table.is-selected{background:#ffce36;border-color:#fff;color:#102f60;scale:1.15}
.hall3d-table.is-urgent{background:#d94734;color:white}
.hall3d-table.is-out{visibility:hidden}
.hall3d-table i{display:none;width:22px;height:3px;margin-bottom:3px;border-radius:2px;background:#d3d1ba;overflow:hidden}
.hall3d-table.is-occupied i{display:block}
.hall3d-table i span{display:block;width:100%;height:100%;background:#56a56a;transform-origin:left}
.hall3d-table.is-urgent i span{background:#ffe5b0}
.hall3d[data-camera="kitchen"] .hall3d-table{opacity:0;pointer-events:none}
.hall3d-banner{position:absolute;left:50%;top:57px;transform:translateX(-50%);padding:9px 16px;border-radius:9px;background:#cf4534;color:#fffaf0;box-shadow:0 7px 18px #7e332b35;font:800 16px/1.1 var(--display);white-space:nowrap}
.hall3d-say{position:absolute;left:0;top:0;max-width:135px;padding:6px 9px;border-radius:8px;background:#fff8e6;color:#173765;box-shadow:0 4px 10px #142e4e28;font:800 10px/1.2 var(--body);pointer-events:none}
.hall3d-say.is-out{visibility:hidden}
.hall3d-pop{position:absolute;color:#163866;background:#ffce36;padding:4px 8px;border-radius:7px;font:900 16px/1 var(--body);box-shadow:0 5px 10px #172f4b33;animation:hall3d-score 1.7s ease-out both}
.hall3d-bottom{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.hall3d-bottom>span{max-width:180px;padding:6px 9px;border-radius:6px;background:#fff5e5e8;color:#224165;font:700 10px/1.3 var(--body)}
.hall3d-cameras{display:flex;gap:3px;padding:4px;border-radius:10px;background:#143761;box-shadow:0 5px 14px #16304a24;pointer-events:auto}
.hall3d-cameras button{min-height:32px;padding:7px 11px;border:0;border-radius:6px;background:transparent;color:#e7eef8;font:800 11px/1 var(--body);cursor:pointer;white-space:nowrap}
.hall3d-cameras button[aria-pressed="true"]{background:#ffce36;color:#102f60}
.hall3d-cameras button:hover{background:#315581;color:#fff}
.hall3d-cameras button[aria-pressed="true"]:hover{background:#ffdc70;color:#102f60}
.hall.is-3d.is-paused .hall3d-pop{animation-play-state:paused}
.hall.is-3d.is-paused::after{display:none}
@media(min-width:1000px){
  .game-layout:has(.hall.is-3d){grid-template-columns:minmax(0,1.43fr) minmax(430px,.9fr);column-gap:23px;align-items:start}
  .hall.is-3d{position:sticky;top:94px}
  body[data-mode="idle"]:has(.hall.is-3d) .arena{height:230px}
  body[data-mode="idle"]:has(.hall.is-3d) .scene-theo{height:240px;bottom:-15px;width:144px;background-size:615px 410px;background-position:-55px 0}
}
@media(max-width:999px){.hall.is-3d{min-height:0;aspect-ratio:1.32;border-radius:15px 15px 0 0;margin-bottom:-17px}}
@media(max-width:520px){
  .hall.is-3d{aspect-ratio:1.17;margin-bottom:-12px}
  .hall3d-hud{top:8px;left:8px;right:8px;gap:5px}
  .hall3d-clock,.hall3d-guests{padding:6px 7px;gap:5px;border-radius:7px;font-size:9px}
  .hall3d-clock b,.hall3d-guests b{font-size:13px}
  .hall3d-clock span{max-width:112px;font-size:8px;line-height:1.1}
  .hall3d-clock i{width:6px;height:6px}
  .hall3d-bottom{left:8px;right:8px;bottom:8px;justify-content:center}
  .hall3d-bottom>span{display:none}
  .hall3d-cameras{padding:3px;border-radius:8px;gap:2px}
  .hall3d-cameras button{min-height:32px;padding:7px 13px;font-size:10px}
  .hall3d-table{width:22px;min-height:22px;font-size:10px;border-radius:6px}
  .hall3d-table i{width:16px;height:2px;margin-bottom:2px}
  /* Телефон: пустые столы не показываем — нажимать на них нечего, а соседние метки не налезают друг на друга. */
  .hall3d-table:not(.is-occupied){display:none}
  .hall3d-banner{top:43px;font-size:13px;padding:7px 11px}
  .hall3d-say{font-size:9px;max-width:110px}
}
@keyframes hall3d-score{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1;transform:translate(-50%,-12px) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-65px)}}
@media(prefers-reduced-motion:reduce){.hall3d-pop{animation:none}}
body:has(.hall.is-3d) .guest-portrait[data-guest="courier"]{background:#476a7e url('assets/guest-nao.webp') center/cover}
.hall3d-table:not(.is-occupied){opacity:.36;scale:.86}
.hall3d-table:not(.is-occupied):hover{opacity:.65}
.hall3d-capture{position:absolute;right:12px;top:56px;border:0;border-radius:6px;padding:6px 9px;background:#fff5e5;color:#224165;font:700 10px var(--body);cursor:pointer}