/* «Сейф»: вид. Всё под .g-seyf; общие токены — в shared/base.css. Акцент — латунь. */

.g-seyf {
  --accent: #6f5412;          /* на белом 8,2:1, на фоне 7,3:1 */
  --on-accent: #ffffff;
  --star: #9a5b00;
  --star-off: #8a98a6;
  --sf-metal: #c3cbd3;
  --sf-groove: #6d7a86;
  --sf-brass: #c9a24a;
  --sf-ink: #1f2933;
  --sf-halo: rgba(255, 255, 255, 0.85);
  --sf-wall: #2a3430;
  --sf-floor: #1b2320;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 6px;
  overflow: hidden;
  color: var(--text);
}
:root[data-theme='dark'] .g-seyf {
  --accent: #e2c26c;
  --on-accent: #231a05;
  --star: #f0b43c;
  --star-off: #6a7d90;
  --sf-metal: #55626e;
  --sf-groove: #0d1217;
  --sf-brass: #d8b25a;
  --sf-halo: rgba(0, 0, 0, 0.7);
  --sf-wall: #3b4943;
  --sf-floor: #141b18;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .g-seyf {
    --accent: #e2c26c; --on-accent: #231a05; --star: #f0b43c; --star-off: #6a7d90;
    --sf-metal: #55626e; --sf-groove: #0d1217; --sf-brass: #d8b25a; --sf-halo: rgba(0, 0, 0, 0.7);
    --sf-wall: #3b4943; --sf-floor: #141b18;
  }
}

/* ---------- шапка ---------- */

.g-seyf .sf-msg { min-height: 40px; }
.g-seyf .sf-ov:empty { display: none; }
.g-seyf .sf-stat { font-variant-numeric: tabular-nums; }

/* ---------- замок ---------- */

.g-seyf .sf-stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; margin: 0 8px; }
.g-seyf .sf-box { position: relative; perspective: 1000px; width: 100%; aspect-ratio: 1; }
.g-seyf .sf-door,
.g-seyf .sf-inside { position: absolute; inset: 0; }
.g-seyf .sf-door { transform-origin: 0% 50%; transition: transform 0.85s cubic-bezier(0.55, 0, 0.25, 1), opacity 0.3s 0.55s; backface-visibility: hidden; }
.g-seyf.opening .sf-door { transform: rotateY(-100deg); opacity: 0.12; pointer-events: none; }
.g-seyf .sf-inside { opacity: 0; transition: opacity 0.4s; }
.g-seyf.opening .sf-inside { opacity: 1; }
.g-seyf .sf-inside svg,
.g-seyf .sf-dial { display: block; width: 100%; height: 100%; }
.g-seyf .sf-dial { touch-action: none; overflow: visible; }

.g-seyf .in-wall { fill: var(--sf-wall); }
.g-seyf .in-floor { fill: var(--sf-floor); }
.g-seyf .in-check { fill: none; stroke: var(--sf-brass); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }

.g-seyf .sf-base { fill: var(--sf-metal); stroke: var(--sf-groove); stroke-width: 1.5; outline: none; cursor: pointer; }
.g-seyf .sf-base.press { stroke: var(--accent); stroke-width: 3; }
.g-seyf .sf-base:focus-visible { stroke: var(--accent); stroke-width: 3; }
.g-seyf .sf-base.hint { animation: sf-pulse 0.9s ease-in-out infinite alternate; }
.g-seyf .sf-hub { fill: var(--sf-groove); }

.g-seyf .sf-ring { transition: transform 180ms cubic-bezier(0.3, 0.8, 0.3, 1); pointer-events: none; }
.g-seyf .sf-sec { stroke: none; }
.g-seyf .sf-glyph { fill: var(--sf-ink); stroke: none; opacity: 0.86; }
.g-seyf .sf-glyph .line { fill: none; stroke: var(--sf-ink); stroke-width: 2.6; stroke-linecap: round; }

.g-seyf .sf-gear { transform-box: fill-box; transform-origin: center; transition: transform 180ms ease-out; fill: var(--sf-brass); stroke: var(--sf-ink); stroke-width: 1.3; stroke-linejoin: round; }
.g-seyf .sf-bore { fill: var(--sf-ink); stroke: none; }
.g-seyf .sf-shaft { stroke: var(--sf-ink); stroke-width: 4.5; stroke-linecap: round; }
.g-seyf .sf-arrow { fill: var(--sf-brass); stroke: var(--sf-ink); stroke-width: 1.3; stroke-linejoin: round; }

.g-seyf .sf-hintlayer .halo { fill: none; stroke: var(--sf-halo); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.g-seyf .sf-hintlayer .halo.head { fill: var(--sf-halo); }
.g-seyf .sf-hintlayer .ink { fill: none; stroke: var(--sf-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.g-seyf .sf-hintlayer .ink.head { fill: var(--sf-ink); }
:root[data-theme='dark'] .g-seyf .sf-hintlayer .ink { stroke: #f4f7fa; }
:root[data-theme='dark'] .g-seyf .sf-hintlayer .ink.head { fill: #f4f7fa; }

.g-seyf .sf-flash { fill: #ffffff; opacity: 0; animation: sf-flash 0.5s ease-out; }

@keyframes sf-flash { 0% { opacity: 0; } 30% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes sf-pulse { from { stroke: var(--accent); stroke-width: 2; } to { stroke: var(--accent); stroke-width: 4.5; } }

/* ---------- нижняя панель: общая (.cbar), здесь только скрытие при открытии ---------- */

.g-seyf.opening .cbar { visibility: hidden; }

@media (max-height: 620px) {
  .g-seyf { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-seyf .sf-ring, .g-seyf .sf-gear, .g-seyf .sf-door, .g-seyf .sf-inside { transition: none; }
  .g-seyf .sf-base.hint { animation: none; }
}