/* =====================================================================================================
   RU: Оформление веб-каркаса игры (план «Г», Г3): пять вариантов — стекло/sci-fi, пиксель, казуальный, фэнтези,
       минимал — те же, что games/ui.py LOOKS и прототипы mockups/game-studio-v3/demos. Акцент — переменная
       --orca-accent из ui.json. Каркас лежит поверх холста игры и не перехватывает мышь, пока игра идёт
       (класс .playing), кроме кнопки паузы.
   EN: Web shell styles (plan "G", G3): five looks mirroring games/ui.py; the accent comes from ui.json; the overlay
       lets the mouse through while playing except for the pause button.
   ===================================================================================================== */
@font-face { font-family: "OrcaSans"; src: url("../vendor/fonts/PTSans-Regular.ttf"); font-display: swap; }
@font-face { font-family: "OrcaPixel"; src: url("../vendor/fonts/PressStart2P.ttf"); font-display: swap; }

.orca-shell { position: fixed; inset: 0; z-index: 1000; font: 18px/1.4 "OrcaSans", -apple-system, "Segoe UI", sans-serif;
  color: #e8f1fa; background: rgba(4, 6, 10, .62); display: grid; --orca-accent: #5cc8ff;
  --panel: rgba(10, 16, 24, .86); --border: rgba(92, 200, 255, .35); --radius: 14px; --btn: rgba(92, 200, 255, .1); }
.orca-shell.playing { background: transparent; pointer-events: none; }
.orca-screen { display: none; place-items: center; grid-area: 1 / 1; }
.orca-screen.on { display: grid; }
.orca-panel { background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius); padding: 26px 28px;
  min-width: 340px; max-width: 92vw; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(6px); }
.orca-title { margin: 0 0 8px; font-size: 34px; text-align: center; letter-spacing: .02em; }
.orca-accent { color: var(--orca-accent); }
.orca-muted { margin: 0; opacity: .75; text-align: center; white-space: pre-line; }
.orca-btn { font: inherit; font-size: 20px; min-height: 52px; min-width: 300px; border-radius: calc(var(--radius) - 4px);
  border: 2px solid var(--border); background: var(--btn); color: #e8f1fa; cursor: pointer; padding: 0 18px; }
.orca-btn:hover, .orca-btn:focus-visible { border-color: var(--orca-accent); outline: none; filter: brightness(1.15); }
.orca-btn.primary { background: var(--orca-accent); border-color: var(--orca-accent); color: #06121f; font-weight: 700; }
.orca-grid { display: grid; grid-template-columns: repeat(4, 72px); gap: 10px; justify-content: center; }
.orca-grid .orca-btn { min-width: 72px; }
.orca-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.orca-row input[type="range"] { width: 200px; accent-color: var(--orca-accent); }
.orca-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--orca-accent); }
.orca-bar { height: 10px; border-radius: 5px; background: var(--orca-accent); opacity: .8; animation: orca-load 1.2s ease-in-out infinite; }
@keyframes orca-load { 0% { opacity: .3; } 50% { opacity: .9; } 100% { opacity: .3; } }
.orca-hint { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); opacity: 0; transition: opacity .25s; pointer-events: none; }
.orca-hint.on { opacity: 1; }
.orca-pause-btn { position: fixed; top: 16px; right: 16px; width: 56px; height: 56px; border-radius: 14px; font: 700 20px/1 inherit;
  background: var(--panel); border: 2px solid var(--border); color: #e8f1fa; cursor: pointer; display: none; pointer-events: auto; }
.orca-shell.playing .orca-pause-btn { display: block; }
.orca-shell.orca-big { font-size: 22px; }
.orca-shell.orca-big .orca-btn { font-size: 24px; min-height: 60px; }

/* RU: Пять оформлений. / EN: The five looks. */
.orca-look-pixel { font-family: "OrcaPixel", "OrcaSans", monospace; font-size: 13px;
  --panel: rgba(20, 16, 46, .94); --border: #8a64b8; --radius: 0px; --btn: rgba(255, 255, 255, .07); }
.orca-look-pixel .orca-btn { font-size: 13px; border-radius: 0; }
.orca-look-pixel .orca-title { font-size: 22px; }
.orca-look-casual { --panel: rgba(42, 26, 94, .96); --border: #c59bff; --radius: 26px; --btn: rgba(255, 255, 255, .1); }
.orca-look-fantasy { --panel: rgba(52, 36, 20, .95); --border: #e0b458; --radius: 8px; --btn: rgba(255, 230, 180, .08); }
.orca-look-minimal { --panel: rgba(19, 24, 32, .95); --border: #262e3c; --radius: 10px; --btn: rgba(255, 255, 255, .05); }
@media (max-width: 480px) { .orca-panel { min-width: 0; width: 92vw; padding: 18px; } .orca-btn { min-width: 0; width: 100%; } }