#boot {
  position: absolute;
  inset: 0;
  z-index: 30;
  background-color: #050403;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(196,161,90,0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(139,30,24,0.18) 0%, transparent 50%),
    linear-gradient(180deg, rgba(5,4,3,0.85) 0%, rgba(5,4,3,0.95) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 16px);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8vh 8vw;
}
#boot.hidden { display: none !important; }

.boot-stone {
  width: min(320px, 86vw);
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, rgba(22,19,15,.75), rgba(8,7,5,.88));
  border: 1px solid rgba(196,161,90,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 46px rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}

.boot-logo { display: none; }

.slab {
  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 15px 14px;
  border: 1px solid #1c1712;
  color: #e8d4a0;
  letter-spacing: .2em;
  font: 700 14px Georgia, serif;
  text-align: center;
  background-color: #39332b;
  background-image:
    radial-gradient(circle, rgba(170,156,124,.4) 1.3px, transparent 2px),
    linear-gradient(180deg, #5c5448 0%, #3c362c 55%, #221d17 100%);
  background-size: 18px 18px, 100% 100%;
  background-position: 5px 5px, 0 0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -4px 8px rgba(0,0,0,.6),
    0 4px 0 #0b0906,
    0 7px 14px rgba(0,0,0,.55);
  cursor: pointer;
  transition: transform 0.05s ease;
}
.slab:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1), inset 0 -2px 4px rgba(0,0,0,.6), 0 1px 0 #0b0906;
}

.boot-ver { color: #a89878; font-size: 11px; letter-spacing: .12em; text-shadow: 0 1px 0 #000; }
#roomCodeView { font-size: 32px; letter-spacing: .28em; text-align: center; color: #c4a15a; margin: 8px 0 14px; }
#netStatus { color: #8a7a62; font-size: 12px; }
#joinCode { letter-spacing: .3em; text-align: center; font-size: 20px; }

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

html, body, #app {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c1016;
  font-family: Georgia, 'Times New Roman', serif;
  color: #d7c4a3;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  display: block;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

#modeTitle {
  position: absolute;
  top: calc(10px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: .2em;
  font-size: 13px;
  color: #8a7a62;
}

#scoreLine, #queueLine {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #6e6456;
  text-align: center;
  max-width: 80vw;
}
#scoreLine { top: calc(28px + var(--safe-top)); }
#queueLine { top: calc(44px + var(--safe-top)); }

#vial {
  position: absolute;
  left: 16px;
  bottom: calc(132px + var(--safe-bottom));
  width: 28px;
  height: 168px;
}

#hpTrack, #staTrack {
  position: relative;
  background: #140e0a;
  box-shadow: inset 0 0 0 1px #1c1610, 0 0 0 1px #3a342c;
  overflow: hidden;
}
#hpTrack { height: 128px; width: 16px; }
#staTrack { margin-top: 6px; height: 28px; width: 16px; }

#hpGhost { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #4a1c16; }
#hpBar { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #8b1e18; }
#staminaBar { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #7a5a28; }

#weaponIcon {
  width: 16px;
  height: 16px;
  margin-top: 6px;
  background: #2a241c;
  box-shadow: inset 0 0 0 1px #5a4a32;
}

#weaponLine {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .16em;
  color: #c4b090;
  text-shadow: 0 1px 0 #000;
}

#playerState {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translateX(-50%);
  letter-spacing: .12em;
  font-size: 12px;
  color: rgba(215,196,163,.85);
  text-shadow: 0 2px 0 #000;
}

#pickupHint {
  position: absolute;
  left: 50%;
  bottom: calc(46px + var(--safe-bottom));
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .12em;
  color: #0c0a08;
  background: #c4a15a;
  padding: 6px 14px;
  border-radius: 3px;
  box-shadow: 0 2px 0 #6a4a1e;
  animation: pickupPulse 1.1s ease-in-out infinite;
}
@keyframes pickupPulse { 0%,100% { opacity: 1; } 50% { opacity: .68; } }

.mini-btn {
  position: absolute;
  z-index: 20;
  top: calc(10px + var(--safe-top));
  width: 40px;
  height: 40px;
  border: 1px solid #3a342c;
  background: rgba(12,10,8,.72);
  color: #c4b090;
  pointer-events: auto;
  cursor: pointer;
}
#menuBtn { right: 12px; }
.mini-btn.audio { right: 56px; }

.joystick {
  position: absolute;
  z-index: 15;
  left: 18px;
  bottom: calc(18px + var(--safe-bottom));
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid rgba(196,176,144,.25);
  background: rgba(10,10,10,.18);
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.joystick.is-active { opacity: 1; pointer-events: auto; }

#stick {
  position: absolute;
  left: 31px;
  top: 31px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(210,190,150,.28);
}

#combatPad {
  position: absolute;
  z-index: 15;
  right: 14px;
  bottom: calc(16px + var(--safe-bottom));
  width: 224px;
  height: 176px;
  pointer-events: auto;
}

.combat-btn {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #4a4032;
  background: rgba(28,22,16,.7);
  color: #d7c4a3;
  font: 700 10px Georgia, serif;
  letter-spacing: .06em;
  cursor: pointer;
}

#attackBtn { width: 72px; height: 72px; right: 82px; bottom: 58px; }
#heavyBtn  { width: 58px; height: 58px; right: 18px; bottom: 82px; }
#blockBtn  { width: 58px; height: 58px; right: 132px; bottom: 18px; }
#throwBtn  { width: 50px; height: 50px; right: 10px; bottom: 18px; }
#rollBtn   { width: 46px; height: 46px; right: 142px; bottom: 74px; font-size: 9px; }

.bash, .lock { display: none; }

.panel {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(92vw, 400px);
  padding: 24px 22px;
  border: 1px solid #1c1712;
  color: #d7c4a3;
  background-color: #221d18;
  background-image:
    radial-gradient(circle, rgba(160,146,116,.13) 1.3px, transparent 2px),
    linear-gradient(180deg,#2c2620,#141210);
  background-size: 20px 20px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 26px 60px rgba(0,0,0,.65);
}
.panel.hidden, .hidden { display: none !important; }

.panel h1 {
  margin: 0 0 6px;
  letter-spacing: .16em;
  color: #e0c37a;
  padding-bottom: 10px;
  border-bottom: 2px solid #4a3d24;
  text-shadow: 0 2px 0 #000;
}
.sub { opacity: .6; }
.panel label { display: block; margin-top: 14px; }
.panel select, .panel input {
  width: 100%;
  background: #1a1512;
  color: #eee;
  border: 1px solid #4b4036;
  padding: 10px;
  accent-color: #c4a15a;
}

.panel-btn {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #1c1712;
  background-image:
    radial-gradient(circle, rgba(255,230,180,.28) 1.2px, transparent 2px),
    linear-gradient(180deg,#d8b46a,#8a6a38);
  background-size: 16px 16px, 100% 100%;
  color: #17120e;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 #4a3a1e;
  cursor: pointer;
}
.panel-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #4a3a1e; }

.panel-btn.secondary {
  background-image:
    radial-gradient(circle, rgba(200,186,156,.16) 1.2px, transparent 2px),
    linear-gradient(180deg,#3c362c,#1c1712);
  color: #d7c4a3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 0 #0b0906;
}
.panel-btn.secondary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 #0b0906; }

.hint { font-size: 12px; opacity: .65; }

#toast {
  position: absolute;
  z-index: 50;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  font-size: 15px;
  letter-spacing: .14em;
  color: #d7c4a3;
  text-shadow: 0 2px 0 #000;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

/* Cinematic gate: two halves of one material plate; no impact flashes. */
#introOverlay {position:absolute;inset:0;z-index:100;overflow:hidden;perspective:1200px;background:transparent;opacity:1;}
#introOverlay.intro-done {display:none!important;pointer-events:none!important;}
.gate-leaf {position:absolute;top:0;bottom:0;width:50%;background-image:url('./assets/orda-gates.png');background-size:200% 100%;backface-visibility:hidden;will-change:transform;box-shadow:inset 0 0 45px #0009;}
.gate-left {left:0;background-position:left center;transform-origin:left center;}
.gate-right {right:0;background-position:right center;transform-origin:right center;}
@keyframes gateOpenLeft {to {transform:rotateY(-105deg);}}
@keyframes gateOpenRight {to {transform:rotateY(105deg);}}
@keyframes introFade {from{opacity:1;}to{opacity:0;visibility:hidden;}}
.gate-mist {position:absolute;inset:60% -20% -10%;pointer-events:none;background:radial-gradient(ellipse at 35% 70%,#a6b6c322,transparent 60%),radial-gradient(ellipse at 70% 80%,#9facb21a,transparent 55%);filter:blur(20px);animation:mistDrift 3.5s ease-out both;}
@keyframes mistDrift {from{transform:translateX(-3%);opacity:.2;}to{transform:translateX(4%);opacity:0;}}
#skipIntro {position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:14px 24px;border:1px solid #9d8864;background:#10151bea;color:#e6d4b0;letter-spacing:.15em;font:600 12px Georgia,serif;cursor:pointer;white-space:nowrap;}
@media(prefers-reduced-motion:reduce){#introOverlay{display:none;}.gate-mist{animation:none;}}

/* Векторные иконки шлема и руны прямо в CSS */
.hero-panel { width: min(94vw, 760px); }
.hero-layout { display: flex; gap: 16px; margin-top: 14px; }
.hero-roster { display: flex; flex-direction: column; gap: 8px; width: 150px; flex: none; }
.hero-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #362f26;
  background: linear-gradient(180deg,#241f19,#151210);
  color: #a89880;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-slot-mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 2px;
  border: 1px solid #4a4032;
  background-color: #241d16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4a15a'%3E%3Cpath d='M12 2L4 5v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-5.45 8-12V5l-8-3zm0 4a3 3 0 0 1 3 3v2h-6V9a3 3 0 0 1 3-3zm-5 7h10v2a5 5 0 0 1-10 0v-2z'/%3E%3C/svg%3E");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-slot.locked .hero-slot-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a6a52'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  filter: grayscale(1) brightness(.7);
}

.hero-slot-name { font-size: 11px; letter-spacing: .08em; }
.hero-slot.selected {
  border-color: #c4a15a;
  background: linear-gradient(180deg,#3a2f1c,#241c12);
  color: #f0e2c0;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.2);
}
.hero-slot.selected .hero-slot-mark { border-color: #c4a15a; }
.hero-slot.locked { opacity: .5; cursor: default; }

.hero-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 30%, #1c2530 0%, #0c0f13 70%);
  border: 1px solid #3a342c;
  touch-action: none;
}
#heroCanvas { width: 100%; height: 100%; display: block; }
.hero-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 10px;
  letter-spacing: .1em;
  color: #8a7a62;
  pointer-events: none;
}

#app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, transparent 45%, rgba(130,0,0,.32));
  opacity: 0;
  transition: opacity .18s;
}
#app.is-hurt::after { opacity: 1; }

.check-row { display: flex !important; align-items: center; gap: 10px; text-align: left; }
.check-row input { width: auto !important; accent-color: #8a6a38; }

@media (min-width: 900px) {
  .joystick, #combatPad { opacity: .75; }
  #vial { bottom: 24px; }
}

@media (max-width: 640px) {
  .hero-layout { flex-direction: column; }
  .hero-roster { flex-direction: row; overflow-x: auto; width: 100%; }
  .hero-slot { flex: none; width: 108px; flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  #vial { left: 10px; bottom: calc(188px + var(--safe-bottom)); height: 142px; width: 24px; }
  #weaponLine { left: 10px; bottom: calc(166px + var(--safe-bottom)); font-size: 10px; transform: none; }
  #combatPad { right: 6px; bottom: calc(8px + var(--safe-bottom)); transform: scale(.9); transform-origin: right bottom; }
  #menuBtn { right: 8px; }
  .mini-btn.audio { right: 52px; }
}/* v0.22 — touch controls and portrait layout */
#boot { padding:0;justify-content:center;align-items:flex-end;background:#080d12 url('./assets/orda-menu.png') center top / cover no-repeat; }
.boot-stone { width:min(86vw,380px); margin:0 0 max(7vh,calc(24px + var(--safe-bottom)));padding:16px;background:linear-gradient(180deg,rgba(12,18,22,.88),rgba(6,10,14,.96));border:1px solid #79603b;box-shadow:0 12px 50px #000b; }
.boot-logo { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);display:block;margin:0; }
.slab { background:linear-gradient(180deg,#302b23,#15191c);border:1px solid #806640;color:#e8c784;font-size:15px;letter-spacing:.12em;padding:16px;box-shadow:inset 0 1px #cfb17744,0 4px 12px #0007; }
#bootLocal {background:linear-gradient(180deg,#977647,#54402b);color:#fff1ca;}
.boot-ver {text-align:center;margin:14px 0 0;font:11px system-ui;color:#b6b2a9;letter-spacing:.08em;}
.panel {max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;overscroll-behavior:contain;padding:20px;}
.panel h1 {font-size:clamp(22px,5.5vw,32px);letter-spacing:.10em;}
.hero-viewport {aspect-ratio:auto;height:min(48dvh,440px);min-height:230px;overflow:hidden;}
#heroCanvas {touch-action:none;}
.view-tools {position:absolute;top:10px;right:10px;display:flex;gap:6px;}
.view-tools button {min-width:36px;min-height:36px;padding:0 8px;border:1px solid #8b7549;background:#101820dc;color:#efdab0;font:bold 11px system-ui;touch-action:manipulation;}
.hero-hint {width:90%;text-align:center;font:10px/1.4 system-ui;letter-spacing:0;color:#baa98d;bottom:10px;}
.setting-help {font:12px/1.5 system-ui;color:#bcb4a3;margin:10px 0;}
#sensValue {float:right;font:12px system-ui;color:#e3bd73;}
#combatPad {width:148px;height:148px;right:18px;bottom:calc(26px + var(--safe-bottom));transform:none;pointer-events:none;}
#combatPad .combat-btn {width:64px;height:64px;border-radius:50%;font:700 10px system-ui;letter-spacing:0;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;border:1px solid #aa895744;background:linear-gradient(155deg,#252724e6,#101517e6);box-shadow:0 4px 12px #0005;color:#ecdfc6;}
#combatPad #attackBtn {right:0;bottom:84px;border-color:#cf9d57aa;background:linear-gradient(155deg,#695331e6,#241f18ee);}
#combatPad #rollBtn {right:84px;bottom:84px;}
#combatPad #blockBtn {right:84px;bottom:0;}
#combatPad #throwBtn {right:0;bottom:0;}
#combatPad #pickupBtn {right:0;bottom:168px;width:148px;height:42px;border-radius:9px;}
#combatPad #pickupBtn.ready {background:linear-gradient(180deg,#ffdc77,#bf902e);color:#241807;border-color:#ffe5a0;box-shadow:0 0 18px #e9b43f55;}
#combatPad .combat-btn:active,#combatPad .combat-btn.held {border-color:#ffe4a1;background:#806238;color:#fff6d5;}
#combatPad .combat-btn:disabled {opacity:.35;}
#pickupHint {display:none!important;}
#weaponLine {left:14px;bottom:calc(14px + var(--safe-bottom));transform:none;font-size:10px;letter-spacing:.05em;}
#playerState {left:14px;bottom:calc(34px + var(--safe-bottom));transform:none;font-size:10px;}
#vial {left:14px;bottom:calc(70px + var(--safe-bottom));height:160px;}
#modeTitle,#scoreLine,#queueLine {left:12px;transform:none;text-align:left;max-width:calc(100vw - 126px);}
#modeTitle {color:#dfc38d;}
#scoreLine,#queueLine {color:#b7b3ab;}
#queueLine {max-height:32px;overflow:hidden;}
#toast {top:22%;width:85%;text-align:center;font:600 14px system-ui;}
@media (max-width:640px){
 .hero-roster {gap:8px;}
 .hero-slot {width:84px;padding:6px;}
 .hero-slot-mark {width:24px;height:24px;}
 .hero-slot-name {font-size:9px;}
 .hero-layout {gap:10px;}
 .hero-panel {padding:14px;}
 .panel-btn {padding:12px;}
}
@media (orientation:landscape){
 #boot {background-size:auto 100%;background-position:15% center;align-items:center;justify-content:flex-end;}
 .boot-stone {margin:0 7vw 0 0;width:min(36vw,380px);}
 .hero-viewport {height:min(60dvh,420px);}
}
@media (max-height:480px) and (orientation:landscape){
 #combatPad {width:128px;height:128px;right:20px;bottom:calc(14px + var(--safe-bottom));}
 #combatPad .combat-btn {width:56px;height:56px;font-size:9px;}
 #combatPad #attackBtn {bottom:72px;}
 #combatPad #rollBtn {bottom:72px;right:72px;}
 #combatPad #blockBtn {right:72px;}
 #combatPad #pickupBtn {bottom:144px;width:128px;height:36px;}
 .hero-layout {flex-direction:row;}
 .hero-roster {width:92px;flex-direction:column;max-height:220px;overflow:auto;}
 .hero-viewport {height:220px;min-height:220px;}
 .panel {padding:14px;}
}
@media (max-width:350px){
 #combatPad {right:10px;width:136px;height:136px;}
 #combatPad .combat-btn {width:60px;height:60px;font-size:9px;}
 #combatPad #attackBtn {bottom:76px;}
 #combatPad #rollBtn {bottom:76px;right:76px;}
 #combatPad #blockBtn {right:76px;}
 #combatPad #pickupBtn {bottom:152px;width:136px;}
}

/* v23: charge feedback and lava damage. Never intercept input. */
#damageVeil{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;box-shadow:inset 0 0 16vw 5vw #b91b10;transition:opacity .25s;}
#app:not(.is-play) #damageVeil{display:none;}
#attackBtn.charging{background:conic-gradient(#e8c06c var(--charge),#29231d 0);color:#fff;text-shadow:0 1px 3px #000;border-color:#ffe4a2;}
#combatPad button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
#combatPad button:disabled{opacity:.45;}
#hpBar{transition:height .10s linear;}
@media(max-width:600px){#queueLine{font-size:10px;max-width:240px;}#scoreLine{font-size:12px;}}

[hidden]{display:none!important}
#roomCodeView{font-size:22px;letter-spacing:2px;line-height:1.4;margin:12px 0;overflow-wrap:anywhere}

/* ORDA: preserve the entire title and fortress on narrow phone screens. */
#boot {background-size:cover;background-position:center top;}
.boot-stone {background:linear-gradient(180deg,#0a1019b8,#060a10eb);border-color:#8b75504d;box-shadow:0 16px 50px #0009;backdrop-filter:blur(3px);margin-bottom:max(7vh,calc(20px + var(--safe-bottom)));}
.boot-ver {color:#b5ac99;letter-spacing:.18em;}
@media (max-aspect-ratio:2/3){#boot{background-size:100% auto;background-color:#080d12;}}
@media (orientation:landscape){#boot{background-size:auto 100%;background-position:15% top;background-color:#080d12;}.boot-stone{margin:0 7vw 0 0;}}

#introOverlay.is-ready{animation:introFade .6s 2.8s both;}
.is-ready .gate-left{animation:gateOpenLeft 2.9s .25s cubic-bezier(.45,0,.3,1) both;}
.is-ready .gate-right{animation:gateOpenRight 2.9s .25s cubic-bezier(.45,0,.3,1) both;}
@media(orientation:landscape){#boot{background-image:linear-gradient(90deg,transparent 35%,#080d12 62%),url('./assets/orda-menu.png');background-size:100% 100%,auto 150%;background-position:center,10% top;background-repeat:no-repeat;}}