/* ===== static/css/basev3.css ===== */
html {
    background-color: #29292e;
    height: 100%;
}

:root {
    --aspect-ratio: calc(16/9);
    --game-width: calc(100vh * var(--aspect-ratio));
    --outline:
        2px 0px 0 black,
        1px 1px 0 black,
        0px 2px 0 black,
       -1px 1px 0 black,
       -1px 0px 0 black,
      -1px -1px 0 black,
       0px -1px 0 black,
       1px -1px 0 black;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Demi.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src:
        url('../fonts/AvenirNext-Bold.ttc') format('truetype'),
        url('../fonts/AvenirNext-Demi.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Firefox on Windows may not load .ttc via @font-face; provide explicit fallbacks for heavier weights. */
@font-face {
    font-family: 'Avenir Next';
    src:
        url('../fonts/AvenirNext-Bold.ttc') format('truetype'),
        url('../fonts/AvenirNext-Demi.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src:
        url('../fonts/AvenirNext-Bold.ttc') format('truetype'),
        url('../fonts/AvenirNext-Demi.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
    -webkit-font-smoothing: antialiased;
      background-color: #29292e;
      margin: 0px;
      left:0;
      right:0;
      margin: auto;
      font-family: Avenir Next;
      font-weight: 600;
      user-select: none;
      overflow-x: hidden;
      transform: none;
  }

/* Keep the body tied to the real viewport and center the 16:9 game root without
   transforms. A transformed root breaks fixed overlays / hit-testing on mobile Firefox. */
#main-game.full-window {
    left: calc((100% - var(--game-width)) / 2);
    right: auto;
    width: var(--game-width);
    height: 100vh;
    transform: none;
}

#game-boot-overlay.full-window {
    position: fixed;
    left: calc((100% - var(--game-width)) / 2);
    top: 0;
    right: auto;
    bottom: auto;
    width: var(--game-width);
    height: 100vh;
    z-index: 300000;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 15, 0.9);
}

.game-boot-overlay__text {
    color: #fff;
    font-weight: 800;
    font-size: 2.4vh;
    text-align: center;
}

/* Firefox: `backdrop-filter` frequently causes rendering / hit-testing bugs (especially with overlays).
   Disable it globally for Firefox to keep UI functional. */
@supports (-moz-appearance: none) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Debug interface hide mode */
body.debug-interface-hidden #cards-debug-sidebar,
body.debug-interface-hidden #levelup-modal .lu-actions,
body.debug-interface-hidden #roll-debug-log {
  display: none !important;
}
  


.full-window {
    position: absolute;
    height: 100vh;
    width: var(--game-width);
}

.game_block {
    background-color: white;
}

/* Base doll should sit above bunny ears, under emotions/cum */
#base-doll {
    /* z-index: 8; */
}

/* Emotion layers - overlay on top of base-doll */
.emotion-layer {
    pointer-events: none;
}

/* Layering order: mouth (lowest), eyes (middle), brows (highest) */
.emotion-layer-ears {
    /* z-index: 7; */
}

.emotion-layer-mouth {
    z-index: 10;
}

.emotion-layer-eyes {
    z-index: 11;
}

.emotion-layer-brow {
    z-index: 12;
}

/* Cum layers - overlay on top of emotions */
.cum-layer {
    pointer-events: none;
}

/* Layering order: legs (lowest), boobs, hands, face (highest cum layer) */
.cum-layer-legs {
    z-index: 15;
}

.cum-layer-boobs {
    z-index: 16;
}

.cum-layer-hands {
    z-index: 17;
}

.cum-layer-face {
    z-index: 18;
}

.gh-points-icon{
    width: 4vh;
    height: 4vh;
    display: inline-block;
    background: url("../images_of_glory/luna/love.webp") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 0.2vh 0.2vh rgba(0,0,0,.25));
    flex: 0 0 auto;
}

/* ---- Rotate Phone Warning ---- */
#warning-message {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(10, 10, 26, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10vh;
    gap: 3vh;
    overflow: hidden;
}

#warning-message .icon_rotate {
    width: 14vh;
    height: 14vh;
    flex-shrink: 0;
    filter: invert(1);
}

#warning-message .rotate_text {
    color: #fff;
    max-width: 92vw;
    font-size: clamp(2.4vh, 6vw, 2.8vh);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

#warning-message .rotate_char {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 55vh;
    object-fit: contain;
    object-position: bottom;
}

@media screen and (max-width: 900px) and (orientation: portrait) {
    #main-game {
        display: none;
    }

    #warning-message {
        display: flex;
    }
}


/* ===== static/css/gloryholeV5.css ===== */
/* legacy hole buttons removed */

 .work-controls {
    display: flex;
    align-items: center;
    gap: 1vh;
    margin-bottom: 1vh;
  }
  /* visitor-chance badge (debug only) перенесён в debug модуль и отключён в релизе */

/* ==== Patience HUD ==== */
.left_hole,
.right_hole {
  position: relative; /* база для абсолютного позиционирования бейджа */
}

/* визуал клиента в дыре (пенис) */
/* background-layer occupants: scale with full-window */
.hole-occupant-bg {
  pointer-events: none;
  z-index: 15;          /* над фоном, ниже куклы (по DOM-слою) */
  display: none;
}
.hole-occupant-bg.is-visible { display: block; }

/* ---- Luna masturbation frames overlay (from freeze slots) ---- */
/* (removed) old always-on masturbation overlay */

/* кружок терпения в правом верхнем углу блока дыры */
.patience-badge {
  position: absolute;
  top: .6vh;
  right: -3.6vh;
  width: 4.2vh;
  height: 4.2vh;
  display: none;             /* по умолчанию скрыт; показываем при n>0 */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(14,14,24,.28);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  z-index: 10050;            /* поверх внутренностей дыры */
  pointer-events: none;
  overflow: hidden;
}

/* когда у клиента есть терпение (n>0) */
.patience-badge.is-visible {
  display: flex;
}

/* Compact patience ring visuals */
.patience-ring__svg{ width:100%; height:100%; transform: rotate(-90deg); }
.patience-ring__track{ stroke: rgba(76,74,123,.6); stroke-width:6; fill:none; }
.patience-ring__fill{ stroke:#44d16f; stroke-width:6; stroke-linecap:butt; fill:none; stroke-dasharray: 113 113; stroke-dashoffset: 113; transition: stroke-dashoffset .45s ease, opacity .2s ease; }
.patience-ring__fill--overflow{ stroke:#2563eb; filter: drop-shadow(0 0 6px rgba(37,99,235,.55)); opacity:0; transition: stroke-dashoffset .45s ease, opacity .2s ease; }

/* Бейдж серии позы (стек ниже терпения) */
/* pose streak badges (.streak-badge) считаются дебаг-UI и перенесены в debug_backup.
 * В релизной сборке эти бейджи не используются.
 */

.hud-summary {
  position: absolute;
  top: 0vh;
  left: 52%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  width: 58vh;
  height: 6.3vh;
  box-sizing: border-box;
  justify-content: space-between;
  /* gap: 0.6vh; */
  padding: 0 1.2vh 0 3.2vh; /* space from both beveled edges */
  /* Background and border are drawn by ::before to allow trapezoid shape */
  z-index: 30080; /* above LevelUp/DayEnd modals (30060/30055) */
  /* backdrop-filter: blur(12px); */
  pointer-events: none; /* avoid clicks through modal */
  /* True trapezoid: full-width top, inset bottom (≈8% each side) */
  /* -webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); */
  /* clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); */
  filter: drop-shadow(0px 0.3vh 0.3vh #00000057);
}

/* Shift number - inline mini badge */
.hud-shift-number {
  font-weight: 800;
  font-size: 2.2vh;
  color: #fff;
  background: rgb(0 0 0 / 25%);
  padding: 0.5vh 1.2vh;
  border-radius: 1vh;
  white-space: nowrap;
  pointer-events: none;
  flex: 0 0 auto;
}

/* Trapezoid (beveled) background for goals HUD, keeps 4th Coins item intact */
.hud-summary::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #514986;
  /* border: 1px solid rgba(255,255,255,.14); */
  box-shadow: 0 1vh 1vh rgba(0,0,0,.28);
  border-radius: 0; /* clip-path defines the shape */
  /* Same trapezoid as parent: full-width top, inset bottom */
  -webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  pointer-events: none;
  z-index: -1; /* sit behind content */
}

.hud-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.7vh 1.2vh;
  color: #fff;
  position: relative; /* anchor for xp gain badge */
  flex: 1 1 0;
  min-width: 0;
}

.hud-summary__item + .hud-summary__item {
  position: relative;
}

.hud-summary__item + .hud-summary__item::before {
  content: "";
  position: absolute;
  top: 1.2vh;
  bottom: 1.2vh;
  left: 0;
  width: 0.2vh;
  background: rgb(255 255 255);
}

.hud-summary__label {
  font-weight: 700;
  /* text-transform: uppercase; */
  /* letter-spacing: .14vh; */
  /* opacity: .78; */
  margin-bottom: .45vh;
  white-space: nowrap;
  font-size: 1.5vh;
}

.hud-summary__value {
  display: flex;
  align-items: center;
  gap: 0.4vh;
  font-weight: 700;
  font-size: 1.8vh;
}

.hud-summary__sep {
  opacity: .8;
}

/* XP overflow flash and +N badge */
.hud-summary__item.xp-flash {
  background: rgba(255,88,179,.28);
  border-radius: .8vh;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  animation: xpFlash .6s ease;
}
@keyframes xpFlash { 0%{ box-shadow:0 0 0 rgba(255,88,179,0)} 50%{ box-shadow:0 0 1.4vh rgba(255,88,179,.6)} 100%{ box-shadow:0 0 0 rgba(255,88,179,0)} }

.xp-gain-badge{
  position: absolute;
  right: -2.2vh;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  padding: .2vh .6vh;
  font: 800 1.6vh/1 Avenir Next;
  color: #fff;
  background: #D54DF0;
  border-radius: .6vh;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.xp-gain-badge.is-visible{
  opacity: 1;
  transform: translateY(-50%) translateX(.4vh);
}

/* XP event badge (e.g., Level Up!) */
.xp-event-badge{
  position: absolute;
  right: -2.2vh;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  padding: .2vh .8vh;
  font: 900 1.6vh/1 Avenir Next;
  color: #fff;
  background: #D54DF0;
  border-radius: .6vh;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.xp-event-badge.is-visible{ opacity:1; transform: translateY(-50%) translateX(.4vh); }

/* Coins gain badge (overflow XP -> coins) */
.coins-gain-badge{
  position: absolute;
  right: -2.2vh;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  padding: .2vh .6vh;
  font: 800 1.6vh/1 Avenir Next;
  color: #0b1020;
  background: #facc15; /* amber-400 */
  border-radius: .6vh;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.coins-gain-badge.is-visible{
  opacity: 1;
  transform: translateY(-50%) translateX(.4vh);
}

/* Coins pulse highlight */
.coins-pulse {
  background: rgba(250, 204, 21, .25);
  border-radius: .8vh;
  animation: coinsFlash 1s ease;
}
@keyframes coinsFlash {
  0% { box-shadow: 0 0 0 rgba(250,204,21,0); }
  50%{ box-shadow: 0 0 1.4vh rgba(250,204,21,.65); }
  100%{ box-shadow: 0 0 0 rgba(250,204,21,0); }
}

/* Floating coin transfer token */
.coin-float {
  position: fixed;
  z-index: 40000;
  padding: .3vh .8vh;
  font: 900 1.8vh/1 Avenir Next;
  color: #0b1020;
  background: #facc15;
  border-radius: .8vh;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

.hole-meter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2vh;
  margin: 0 auto 1.5vh;
}

/* Call-client floating buttons (outside hidden holes) */
.call-client-btn {
  position: absolute;
  margin-top: 0;
  padding: 1vh 2vh;
  border: none;
  border-radius: 0.8vh;
  cursor: pointer;
  z-index: 50000; /* below card inspect overlay (60002) */
  
  background: rgba(60, 50, 100, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  font-weight: 700;
  font-size: 2vh;
  font-family: avenir next;
  color: #ffffff;
  text-align: center;
  
  transition: all 0.2s ease;
}

.call-client-btn.hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.call-client-btn:hover {
  background: #D54DF0;
  box-shadow: 0 4px 12px rgba(213, 77, 240, 0.4);
  transform: translateY(-0.2vh);
}
.call-client-btn:active {
  transform: translateY(0);
}
.call-client-btn--left {
  left: 20vh;
  top: 54vh;
  z-index: 50000;
}
.call-client-btn--right{
  left: 129vh;
  top: 58vh;
  z-index: 50000;
}

/* Action buttons below hole meters ("Прогнать" / "Позвать") */
#left-replace-client-btn,
#right-replace-client-btn,
#left-call-client-btn,
#right-call-client-btn {
  margin-top: 0.8vh;
  padding: 1vh 2vh;
  border: none;
  border-radius: 0.8vh;
  cursor: pointer;
  position: relative;
  z-index: 0; /* above slots, within hole */
  background: rgba(60, 50, 100, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: 2vh;
  font-family: avenir next;
  color: #ffffff;
  text-align: center;
  transition: all 0.2s ease;
}

/* Hover/active states for action buttons */
#left-replace-client-btn:hover,
#right-replace-client-btn:hover,
#left-call-client-btn:hover,
#right-call-client-btn:hover {
  background: #D54DF0;
  box-shadow: 0 4px 12px rgba(213, 77, 240, 0.4);
  transform: translateY(-0.2vh);
}

#left-replace-client-btn:active,
#right-replace-client-btn:active,
#left-call-client-btn:active,
#right-call-client-btn:active {
  transform: translateY(0);
}

.hole-meter__label {
  /* min-width: 9vh; */
  padding: 0.6vh 1.4vh;
  background: rgba(82,77,142,.92);
  color: #fff;
  font-size: 2vh;
  text-align: center;
  border-radius: 1.2vh;
  filter: drop-shadow(0px 0.3vh 0.3vh #00000057);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vh;
}

/* XP badge state shown during counting phase */
.hole-meter__label.label--xp{
  background: #D54DF0;
  color: #fff;
  border-radius: 1.6vh;
  box-shadow: 0 6px 18px rgba(213, 77, 240, .45);
}

/* XP bonus multiplier badge — pulsing glow to hint interactivity */
@keyframes xpBonusPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(213,77,240,.45); }
  50%       { box-shadow: 0 0 0 2px rgba(255,210,80,.85), 0 6px 22px rgba(255,180,40,.65); }
}
.hole-meter__label.label--xp.label--xp-bonus {
  animation: xpBonusPulse 1.5s ease-in-out infinite;
  cursor: pointer;
}

/* Разделитель между основным числом и XP бейджем */
.xp-divider {
  display: inline-block;
  width: 0.15vh;
  height: 1.6vh;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 1.2vh;
  vertical-align: middle;
  position: relative;
  top: -0.1vh;
}

/* Значение XP бейджа */
.xp-badge-value {
  display: inline-block;
  margin-left: 0.3vh;
}

.hole-meter__ring {
  width: var(--hole-ring-size, 15vh);
  height: var(--hole-ring-size, 15vh);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  /* Do not clip thick strokes of inner SVG */
  overflow: visible;
}

.hole-meter__pose{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1.9vh/1.1 Avenir Next;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}

.hole-meter__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  /* Allow stroke to extend beyond viewBox so round ring isn’t clipped */
  overflow: visible;
}

/* Outer patience ring around pleasure meter */
.patience-outer__track{ stroke: var(--patience-color); opacity:.45; stroke-width: var(--patience-stroke); fill:none; }
.patience-outer__fill{ stroke: var(--patience-color); stroke-width: var(--patience-stroke); stroke-linecap:butt; fill:none; /* stroke-dasharray and stroke-dashoffset are set by JavaScript */ transition: stroke-dashoffset .45s ease, opacity .2s ease; filter: drop-shadow(0 0 6px rgba(239,83,80,.35)); }
.patience-outer__fill--overflow{ stroke: var(--patience-overflow-color); stroke-width: var(--patience-stroke); filter: drop-shadow(0 0 6px rgba(37,99,235,.55)); opacity:0; /* stroke-dasharray and stroke-dashoffset are set by JavaScript */ transition: stroke-dashoffset .45s ease, opacity .2s ease; }

.hole-meter__track {
  stroke: var(--hole-track-color);
  stroke-width: var(--hole-pleasure-stroke);
  fill: none;
}

.hole-meter__fill {
  stroke: var(--hole-pleasure-color);
  stroke-width: var(--hole-pleasure-stroke);
  stroke-linecap: butt; /* flat ends; no masking */
  fill: none;
  /* stroke-dasharray and stroke-dashoffset are set by JavaScript based on calculated circumference */
  transition: stroke-dashoffset .5s ease, stroke .2s ease;
}

/* Separate overflow layer: pink stroke over green base */
.hole-meter__fill--overflow {
  stroke: var(--hole-pleasure-overflow-color);
  opacity: 0;
  transition: stroke-dashoffset .5s ease, opacity .2s ease, filter .2s ease;
  filter: drop-shadow(0 0 6px rgba(255,88,179,.55));
}

/* Small round cap that renders only at the end of arc */
/* cap element no longer used; kept for compatibility if needed */

.hole-meter__ring.overfill-bump {
  animation: meter-bump .6s ease;
}

@keyframes meter-bump {
  0% { transform: scale(1); }
  50%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}
.hole-hit{
  position:absolute;
  cursor: pointer;
  z-index: 10004; /* ниже слотов (10005), выше фона */
  background: transparent;
}
#left-hole-hit {left: 40vh;top: 32vh;width: 28vh;height: 19vh;}
#right-hole-hit {right: 37vh;top: 28vh;width: 27vh;height: 23vh;}
.hole-hit:hover{ outline: none; }

/* вспышка на блоке выбора поз */
.pose-selector.pulse { animation: poseSelPulse .8s ease; }
@keyframes poseSelPulse{ 0%{box-shadow:0 0 0 rgba(135,106,199,0)} 50%{box-shadow:0 0 2vh rgba(135,106,199,.8)} 100%{box-shadow:0 0 0 rgba(135,106,199,0)} }

/* Контекстное меню выбора позы у дыры */
.pose-menu {
  position: absolute;
  /* Default: above holes/slots (>=20030) */
  z-index: 40000; /* below work overlays (20010), above most UI */
  display: flex;
  padding: 1.2vh;
  border-radius: 1.2vh;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  flex-direction: column;
  align-items: center;
  gap: 0.8vh;
  background: #5c5c8f;
}
.work-overlay-active .pose-menu{
  /* When frames overlay is active, push menu below it and disable clicks */
  z-index: 20005;
  pointer-events: none;
}
.work-overlay-active .hole-hit{
  pointer-events: none !important; /* блокируем клики по выбору поз на оверлее */
}
.pose-menu.left-hole-menu  {left: 19vh;top: 50vh;}
.pose-menu.right-hole-menu {left: 109vh;top: 50vh;}

.pose-menu > div:first-child {
  display: flex;
  gap: 1.2vh;
  justify-content: center;
  flex-wrap: wrap;
}

.pose-menu .pose-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8.5vh;
  height: 10vh;
  cursor: pointer;
  background: rgba(60, 50, 100, 0.7);
  backdrop-filter: blur(8px); /* glass blur effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  border: none;
  border-radius: 0.8vh;
  outline: none;
  transition: all 0.2s ease;
  padding: 0.6vh;
  gap: 0.4vh;
  color: #fff;
  position: relative;
  overflow: visible;
}
.pose-menu .pose-btn:hover:not(.locked) {
  background: rgba(100, 80, 140, 0.9);
}
.pose-menu .pose-btn img {
  width: 4.5vh;
  height: 4.5vh;
  object-fit: contain;
}
.pose-menu .pose-btn div {
  display: block;
  font: 600 1.3vh/1.3 Avenir Next;
  color: #fff;
  opacity: 1;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.pose-menu .pose-btn.locked {
  opacity: 0.45;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

/* Status badges for pose buttons - now outside button in wrapper */
.pose-menu .status-badge {
  position: absolute;
  top: -1.6vh;
  left: 50%;
  transform: translateX(-50%);
  font: 700 1.5vh/1.1 Avenir Next;
  white-space: nowrap;
  padding: 0.5vh 0.9vh;
  border-radius: 0.8vh;
  box-shadow: 0 2px 6px rgb(0 0 0 / 19%);
  z-index: 2;
  pointer-events: none;
}

.pose-menu .status-badge.cooldown {
  color: #fff;
  background: #6366f1;
}

.pose-menu .status-badge.active {
  color: #fff;
  background: #d54df0;
}

/* Hourglass icon replaces suit icon for cooldown poses */
.pose-menu .pose-btn .cooldown-icon {
  width: 3.5vh;
  height: 4.5vh;
  object-fit: cover;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* Cooldown rounds counter next to hourglass */
.pose-menu .pose-btn .cooldown-rounds {
  font: 700 2.5vh/1 Avenir Next;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Suit-specific hover colors */
.pose-menu .pose-btn[data-pose="handjob"]:hover:not(.locked) {
  background: rgb(221 61 74 / 90%);
  /* box-shadow: 0 0 12px rgba(221, 61, 74, 0.3); */
}
.pose-menu .pose-btn[data-pose="blowjob"]:hover:not(.locked) {
  background: rgb(10 191 247 / 90%);
  /* box-shadow: 0 0 12px rgba(10, 191, 247, 0.3); */
}
.pose-menu .pose-btn[data-pose="titjob"]:hover:not(.locked) {
  background: rgb(240 126 77 / 90%);
  /* box-shadow: 0 0 12px rgba(240, 126, 77, 0.3); */
}
.pose-menu .pose-btn[data-pose="vaginal"]:hover:not(.locked) {
  background: rgb(2 182 113 / 90%);
  /* box-shadow: 0 0 12px rgba(2, 182, 113, 0.3); */
}
.pose-menu .pose-btn[data-pose="anal"]:hover:not(.locked) {
  background: rgb(213 77 240 / 90%);
  /* box-shadow: 0 0 12px rgba(213, 77, 240, 0.3); */
}

.pose-menu > div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.6vh;
  width: 100%;
  gap: 0.6vh;
}

.pose-menu button[type="button"],
.cancel-pose-button {
  padding: 1vh 17.3vh;
  font-weight: 700;
  font-size: 2vh;
  font-family: avenir next;
  color: #fff;
  border: none;
  border-radius: 0.6vh;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pose-menu button[type="button"] {
  background: #e0577d;
  /* box-shadow: 0 2px 8px rgba(0,0,0,.3); */
}

.pose-menu button[type="button"]:hover:not(:disabled) {
  background: #f43f5e;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}

.cancel-pose-button:hover:not(:disabled) {
  background: #e63050;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}

.cancel-pose-button[data-cooldown]::after {
  content: attr(data-cooldown);
  margin-left: 1vh;
  font: 1.2vh/1 Avenir Next;
  color: #ffe0e0;
  opacity: 0.95;
}

.pose-menu button[type="button"]:disabled,
.cancel-pose-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Luna orgasm & super-orgasm debug visuals removed for release.
 * Исходные стили перенесены в debug_backup/luna_orgasm_panels.html (описание в README).
 */

/* Wild Magic: noticeable pulses/highlights */
.wm-pulse{
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease;
  transform: scale(1.12);
  background-color: #d12b2b !important;
  color: #fff !important;
  box-shadow: 0 0 0 .3vh rgba(209,43,43,.75), 0 0 1.6vh rgba(209,43,43,.55);
}

.wm-card-flash{
  outline: .5vh solid #22c3ee;
  outline-offset: .3vh;
  border-radius: .8vh;
  transform: scale(1.06);
  transition: transform .25s ease, outline-color .25s ease, outline-offset .25s ease;
}

.wm-slot-flash{
  box-shadow: 0 0 0 .5vh rgba(34,195,238,.8), 0 0 2.2vh rgba(34,195,238,.55) inset;
  transition: box-shadow .25s ease;
}
@keyframes luna-flash{ 0%{opacity:0} 20%{opacity:1} 100%{opacity:0} }

/* Deck button */
.pile-buttons{position:absolute;left: 2vh;bottom: 27vh;display:flex;gap: 1.4vh;z-index: 0;}
.pile-btn{background:#6366f1;color:#eaf0ff;border:none;border-radius:1.2vh;/* padding: 1vh 2vh; */padding: 0 2vh;height: 4vh;font: 700 2vh/1 Avenir Next;box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;}
.pile-btn b{ color:#fff; }

/* Modal for pile list */
.pile-modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index:100010; opacity:1; }
.pile-modal-overlay.pile-hidden{ opacity:0; pointer-events:none; transition: opacity .3s ease; }
.pile-modal{position:absolute;left:50%;height: 63.5vh;top:50%;transform:translate(-50%,-50%);z-index:100011;background: #5c5c8f;color:#fff;border-radius:1.4vh;/* padding: 2vh 1vh 2vh 2vh; */box-shadow:0 8px 24px rgba(0,0,0,.4);width: 103vh;opacity:1;}
.pile-modal.pile-hidden{ opacity:0; pointer-events:none; transition: opacity .3s ease; }
.pile-modal h3{margin:0;padding-top: 0.5vh;font: 600 2vh/1.2 Avenir Next;}
/* Header container with title + close */
.pile-header{display:flex;align-items:center;justify-content:space-between;gap:2vh;margin: 0 0 2.2vh;padding: 2vh 2.5vh;border-bottom: .2vh solid rgb(255 255 255 / 18%);}
/* Close button (X) inside header */
.pile-close{
  background: url("../images_of_glory/interface/close.svg") no-repeat;
  border:none;
  color:transparent; /* hide any fallback text */
  width: 2.2vh;  /* clickable target */
  height: 2.2vh;
  background-size: cover;
  padding: 1vh 1vh;    /* icon centers via background */
  cursor:pointer;
  opacity:.9;
}
.pile-close:hover{ opacity:1; transform: scale(1.04); }
.pile-grid{
  display:grid;
  box-sizing: border-box;
  /* Exactly 5 cards per row */
  grid-template-columns: repeat(5, var(--card-w-hand));
  justify-content: start; /* keep a tidy left-aligned grid */
  /* Spacing from modal edges and between items */
  padding: 3vh 2.8vh;  /* inner gutter so cards don’t touch border */
  gap: 4.2vh 2vh;     /* space between cards */
  max-height: 54.1vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 230, 255, 0.35) rgba(0, 0, 0, 0.22);
}

.pile-grid::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.pile-grid::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, 0.22);
  border-radius: 10px;
}
.pile-grid::-webkit-scrollbar-thumb{
  background: rgba(233, 230, 255, 0.35);
  border-radius: 10px;
}
.pile-grid::-webkit-scrollbar-thumb:hover{
  background: rgba(233, 230, 255, 0.55);
}
/* Cards inside the deck modal should look exactly like in hand */
.pile-grid .card-mini{
  width: var(--card-w-hand);
  height: var(--card-h-hand);
}
/* Upgraded cards in deck modal - show upgrade ring */
.pile-grid .card-mini.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35);
}
/* Upgrade plus marker in deck modal */
.pile-grid .lu-plus-corner{
  position: absolute;
  right: -0.4vh;
  top: 2.6vh;
  background: #ff5b6b;
  color: #fff;
  font-weight: 900;
  font-size: 2.5vh;
  border-radius: 0.5vh 0 0 0.5vh;
  padding: 0.5vh 0.5vh;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Match larger icon sizing used in hand */
.pile-grid .card-mini .cm-icon-tag {width:2.2vh;height: 2.2vh;margin-left:.5vh;margin-bottom:.2vh;}
.pile-grid .card-mini .cm-icon-suit{ width:1.6vh; height:1.6vh; }
.pile-grid .card-mini .cm-badge-text{ font-size:1.3vh; }

/* Shop (intermission) */
.gh-overlay-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 30058;
  align-items: center;
  justify-content: center;
}
.gh-modal-card{
  width: min(92vw, 66vh);
  box-sizing: border-box;
  padding: 0;
  border-radius: 1.4vh;
  background: #5c5c8f;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
}
.gh-modal-header{
  margin: 0 0 2.2vh;
  padding: 2vh 2.5vh;
  border-bottom: .2vh solid rgb(255 255 255 / 18%);
}
.gh-modal-header h3{ margin:0; padding-top: .5vh; font: 600 2vh/1.2 Avenir Next; }
.gh-modal-subtitle{
  font: 650 1.8vh/1.25 Avenir Next;
  opacity: .92;
  padding: 0 2.5vh 2.2vh;
}
.gh-shop-coins{
  font: 800 2.0vh/1.2 Avenir Next;
  opacity: .96;
  margin-bottom: 1.6vh;
  padding: 0 2.5vh;
}
.gh-shop-items{
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  padding: 0 2.5vh 2.6vh;
}

.shop-item{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.65vh;
  width:100%;
  padding:1.2vh 1.4vh;
  border:none;
  border-radius:1.0vh;
  cursor:pointer;
  background:rgba(255,255,255,.08);
  color:#fff;
  text-align:left;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.shop-item:hover{ background:rgba(255,255,255,.12); }
.shop-item--disabled{ opacity:.45; cursor:not-allowed; }
.shop-item__title{ font:700 1.9vh/1.2 Avenir Next; }
.shop-item__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2vh;
}
.shop-item__price{
  font: 900 1.7vh/1 Avenir Next;
  background: rgba(0,0,0,.16);
  border: .12vh solid rgba(255,255,255,.14);
  padding: .55vh .9vh;
  border-radius: .85vh;
  white-space: nowrap;
}
.shop-item__desc{
  font: 600 1.55vh/1.35 Avenir Next;
  opacity: .86;
}

/* Shop dialogs (confirm/warn) — use pile-modal shell, but compact like other popups */
.shop-dialog-modal{
  width: min(92vw, 62vh);
  height: auto;
  max-height: 56vh;
}
.shop-dialog-modal .pile-header{
  margin: 0 0 1.4vh;
  padding: 1.6vh 2.2vh;
}
.shop-dialog-body{
  padding: 0 2.2vh 2vh;
  font: 600 1.9vh/1.4 Avenir Next;
  color: rgba(255,255,255,.92);
  text-align: center;
}
.shop-dialog-actions{
  display: flex;
  justify-content: center;
  gap: 1.2vh;
  padding: 0 2.2vh 2.2vh;
}
.shop-dialog-btn{
  padding: .9vh 2.4vh;
  font: 800 1.9vh/1 Avenir Next;
  background: #384166;
  color: #fff;
  border: none;
  border-radius: .9vh;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.shop-dialog-btn:hover{ filter: brightness(1.06); transform: translateY(-.08vh); }
.shop-dialog-btn:active{ transform: translateY(.06vh); }
.shop-dialog-btn--primary{ background: #5865F2; }
.shop-dialog-btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; }
.shop-item__price{ font:800 1.9vh/1.2 Avenir Next; opacity:.95; }


.shop-exile-grid .card-mini{ cursor:pointer; }
.shop-exile-item,
.shop-upgrade-item{
  width: var(--card-w-hand);
  display:flex;
  flex-direction:column;
  gap:1.1vh;
}
.shop-exile-action,
.shop-upgrade-action{
  width:100%;
  border:none;
  border-radius:1.1vh;
  padding:1.0vh 1.2vh;
  font:900 1.7vh/1 Avenir Next;
  cursor:pointer;
  background: linear-gradient(90deg, #FF56CC 0%, #FF5053 100%);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.shop-exile-action:hover,
.shop-upgrade-action:hover{ transform: translateY(-.05vh); }
.shop-exile-action:disabled,
.shop-upgrade-action:disabled{
  opacity: 1;
  cursor:not-allowed;
  transform:none;
  background: #757094;
  color: rgba(255,255,255,.4);
}

/* SweetAlert2 toasts inside gameplay overlays */
.gh-swal2-container{ z-index: 100500 !important; }
.gh-swal2-popup{
  border-radius: 1.2vh !important;
  border: .14vh solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}


.orgasm_plus_text_container {position:absolute;right: 1vh;bottom:0vh;z-index:20020;}
/* Configurable variables for pleasure/patience rings */
:root{
  /* Overall widget size in viewport units */
  --hole-ring-size: 30vh;                /* default container size */

  /* Optional: absolute diameters per ring (override radii below). */
  /* If set, use vh or any CSS length; the JS converts to SVG radius. */
  --pleasure-diameter: 18vh;                 /* e.g., 14vh */
  --patience-diameter: 25vh;                 /* e.g., 15.4vh */

  /* Pleasure (inner) ring */
  --hole-pleasure-stroke: 14;         /* viewBox units (not vh!) to maintain ratio */
  --hole-pleasure-color: #6d7bfb;        /* green */
  --hole-pleasure-overflow-color: #D54DF0; /* pink */
  --hole-track-color: rgb(76 74 123 / 66%);

  /* Patience (outer) ring */
  --patience-stroke: 6;              /* viewBox units (not vh!) to maintain ratio */
  --patience-color: #ef5350;             /* red */
  --patience-overflow-color: #2563eb;    /* blue */
  filter: drop-shadow(0px 0.5vh 0.2vh #00000057);
}

/* Endless disclaimer modal checkbox */
.ed-checkbox-label {
  display: flex;
  align-items: center;
  gap: 1.2vh;
  margin-top: 1.4vh;
  padding: 0 .2vh;
  cursor: pointer;
  user-select: none;
  align-self: flex-start;
}
.ed-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ed-checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4vh;
  height: 2.4vh;
  border-radius: .5vh;
  border: .22vh solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.ed-checkbox-label:hover .ed-checkbox-box {
  border-color: #ff6aff;
  box-shadow: 0 0 0 .6vh rgba(255,106,255,.15);
  background: rgba(255,106,255,.08);
}
.ed-checkbox-input:checked + .ed-checkbox-box {
  background: #ff6aff;
  border-color: #ff6aff;
  box-shadow: 0 0 0 .6vh rgba(255,106,255,.22);
}
.ed-checkbox-check {
  width: 1.5vh;
  height: 1.5vh;
  opacity: 0;
  transition: opacity .15s;
}
.ed-checkbox-input:checked + .ed-checkbox-box .ed-checkbox-check {
  opacity: 1;
}
.ed-checkbox-text {
  font-family: 'Avenir Next';
  font-size: 2.1vh;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  line-height: 1;
}
.ed-checkbox-label:hover .ed-checkbox-text {
  color: #fff;
}

/* Back-to-menu button: mirrors the Sound button, sits to the left of the HUD */
.menu_back_container{
  position: absolute;
  left: 57.2vh;
  top: 0;
  display: flex;
  filter: drop-shadow(0px 0.2vh 0.2vh #00000057);
}

.menu_back{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
  height: 6.3vh;
  width: 8.2vh;
  background-repeat: no-repeat;
  background-image: url(../images_of_glory/interface/arrow_back.svg);
  background-size: 3.7vh;
  /* Mirror of .sound bg-position */
  background-position: 45% 50%;
  cursor: pointer;
  border-radius: 0;
  background-color: transparent;
  transition: none;
  position: relative;
}

.menu_back::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #514986;
  box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.28);
  /* Mirrored parallelogram (relative to .sound) */
  clip-path: polygon(0 0, 63% 0, 97% 100%, 38% 100%);
  z-index: -1;
}

/* ===== static/css/progressbar.css ===== */
/* ==========================================================================
   PROGRESS BARS ONLY
   - vertical & horizontal progress containers
   - bars, labels, overflow states
   - shake / bump / ping animations
   - floating points feedback
   - orgasm container
   ========================================================================== */

/* Generic vertical container (legacy-friendly) */
.progress-container {
  height: 20vh;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  background-color: #e0e0e0;
}

/* Generic bar (will be overridden by orientation rules) */
.progress-bar {
  width: 3vh;
  background-color: #4caf50;
  transition: background-color 0.5s ease, height 0.5s ease;
}

/* Label */
.progress-label {
  font-size: 2vh;
  font-weight: 700;
  color: white;
  /* background-color: #373741; */
  /* margin-bottom: 3vh; */
  text-align: center;
  width: 9vh;
  height: 5vh;
  line-height: 5vh;
}

/* XP badge state for label (after counting) */
.progress-label.label--xp{
  background: linear-gradient(0deg, #D54DF0, #D54DF0);
  color: #fff;
  border-radius: 1.6vh;
  padding: 0 .8vh;
  box-shadow: 0 6px 18px rgba(213, 77, 240, .45);
}

/* Negative feedback & shake */
.negative-progress { background-color: red !important; animation: shake 0.5s ease; }
.shake-animation   { animation: shake 0.5s ease; }

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-0.45vh); }
  50%  { transform: translateX(0.45vh); }
  75%  { transform: translateX(-0.45vh); }
  100% { transform: translateX(0); }
}

/* Horizontal variant */
.progress-container.horizontal-progress {
  width: 20vh;
  height: 3vh;
  margin-top: 2vh;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-radius: 1.6vh;
  background-color: #e9edf4;
}

.progress-container.horizontal-progress .progress-bar {
  width: 0%;
  height: 100%;
  background-color: #44d16f;
  transition: width 0.5s ease;
  border-radius: 1.2vh;
}

/* Energy bar: yellow color */
#girlEnergyContainer.horizontal-progress .progress-bar,
#girlEnergyBar {
  background-color: #facc15; /* amber-400 */
}

/* Vertical variant (explicit) */
.progress-container.vertical-progress {
  position: relative;
  width: 3vh;      /* narrow column */
  height: 20vh;    /* legacy height */
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  background-color: #e0e0e0;
}

.progress-container.vertical-progress .progress-bar {
  display: block;
  width: 100% !important;
  height: var(--pct, 0%) !important;  /* controlled via CSS var */
  background-color: #4caf50;
  transition: height .5s ease;
  transform-origin: bottom center;    /* for bump animation */
  will-change: transform;
}

/* Overflow visual: pink when overflowing */
.progress-container.vertical-progress .progress-bar.is-overflowing {
  background-color: #ff4da6 !important;
}

/* Overflow bump (scaleY pulse) */
.progress-bar.overfill-bump { animation: barOverfillBump 280ms ease; }
@keyframes barOverfillBump {
  0%   { transform: scaleY(1);    filter: none; }
  60%  { transform: scaleY(1.08); filter: brightness(1.1); }
  100% { transform: scaleY(1);    filter: none; }
}

/* Label ping on overflow */
.progress-label.overflow-ping { animation: labelOverflowPing 800ms ease; }
@keyframes labelOverflowPing {
  0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(124,77,255,0); }
  40%  { transform: scale(1.06); box-shadow: 0 0 .8vh rgba(124,77,255,.7); }
  100% { transform: scale(1);    box-shadow: 0 0 0 rgba(124,77,255,0); }
}

/* Overflow ghost badge above the bar */
.progress-overflow-ghost{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:-4vh;
  padding:.4vh .8vh;
  font:1.6vh/1 Avenir Next;
  font-weight:700;
  color:#fff;
  background:#7c4dff;
  border-radius:.6vh;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0;
  animation: overflowPop 1.1s ease forwards;
  z-index:10020;
}
@keyframes overflowPop{
  0%   { opacity:0; transform:translate(-50%,0.7vh) scale(.9); }
  20%  { opacity:1; transform:translate(-50%,0)   scale(1); }
  100% { opacity:0; transform:translate(-50%,-1.6vh) scale(1); }
}

/* Fade-out helper for bars when hiding */
.progress-bar-fade-out { transition: width 0.6s ease, height 0.6s ease; }

/* Floating +N points (feedback) */
.float-points {
  position: fixed;
  font: 2vh/1 Avenir Next;
  color: #ffeb3b;
  text-shadow: 0 0 5px #000;
  animation: floatUp 1.5s ease forwards;
  pointer-events: none;
  z-index: 10020;
}
@keyframes floatUp {
  0%   { opacity:0; transform: translateY(0); }
  20%  { opacity:1; }
  100% { opacity:0; transform: translateY(-3.5vh); }
}

/* Helpers */
.progress-hidden{ display:none !important; }

/* Elevate/suppress progress bars relative to work overlay */
.elevate-progress {
  position: relative;
  z-index: 20020; /* above .work-trapezoids (20010) */
  pointer-events: auto;
}
.suppress-progress {
  position: relative;
  z-index: 100; /* below overlay */
}

/* Orgasm/Arousal container (progress-related UI) */
.orgasm_container {
  background-color: #5C5C8F;
  width: 34vh;
  display: flex;
  flex-wrap: wrap;          /* позволяет перенос на новую строку */
  /* row-gap: 1vh; */
  padding: 1vh 1.2vh;
  height: 9vh;             /* больше места под 2 строки */
  align-items: center;
  border-radius: 1vh 1vh 0vh 0vh;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  filter: drop-shadow(0px 0.5vh 0.2vh #00000057);
}

.orgasm_text {
  color:white;
  font-size:3vh;
  margin-bottom: 2vh;
}

/* Legacy id kept for compatibility */
#girlProgressLabel {
  /* margin-right: 2vh; */
  margin-bottom: 0;
}

/* Энергия внизу стопкой: на всю ширину контейнера */
.energy_block { flex-basis: 100%; }

/* Optional button (legacy) */
#girl-progress-button {
  height: 5vh;
  margin-right: 2vh;
  margin-top: 6vh;
}

/* ----------------------------
   Libido bar (prototype)
   ---------------------------- */
.libido-container{ background:transparent; padding:0; }
.libido-label-wrapper{
  position:absolute;
  bottom:2vh;
  right:40vh;
  display:flex;
  align-items:center;
  gap:0.8vh;
  z-index: 20020;
}
.libido-label-text{
  font:700 1.4vh/1 Avenir Next;
  color:#ffffff;
  text-transform:uppercase;
  opacity:.85;
  letter-spacing:.08em;
}
.libido-help-button{
  width: 3vh;
  height: 3vh;
  border:none;
  padding:0;
  background:transparent url("../images_of_glory/interface/question.png") center/contain no-repeat;
  cursor:pointer;
}
.libido-help-tooltip{
  position:absolute;
  left:50%;
  bottom:3.2vh;
  transform:translateX(-50%);
  min-width:32vh;
  max-width:44vh;
  padding:1.2vh 1.4vh;
  background:rgba(9,9,16,.96);
  color:#fff;
  font:500 1.5vh/1.3 Avenir Next;
  border-radius:.8vh;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease, transform .16s ease;
}
.libido-label-wrapper.is-open .libido-help-tooltip{
  opacity:1;
  pointer-events:auto;
  transform: translateX(-86%) translateY(-0.4vh);
}
.libido-scale{
  display:flex;
  justify-content:space-between;
  font:700 1.6vh/1 Avenir Next;
  color:#fff;
  margin-bottom:.6vh;
}
.libido-bar{
  position:relative;
  height:2.2vh;
  background:#e9edf4;
  border-radius:1.2vh;
  overflow:visible; /* маркер должен выходить за границы */
}
.libido-zero-marker{
  position:absolute;
  left:50%;
  top:-.6vh;   /* выступает сверху и снизу */
  bottom:-.6vh;
  width:0;
  z-index:2;
}
.libido-zero-marker::before{
  content:"";
  position:absolute;
  left: -0.5vh;
  top:0;
  bottom:0;
  width: 0.5vh;
  background: #5c5c90;
  /* border-radius:.2vh; */
}
.libido-zero-marker::after{content:"";position:absolute;left: -0.2vh;top:0;bottom:0;width: 0.3vh;background:#ffffff;/* border-radius:.2vh; */}
.libido-fill{ position:absolute; top:0; bottom:0; width:0; transition:width .35s ease; z-index:1; }
.libido-fill--pos{ left:50%; background:#ff3fb4; border-top-right-radius:1.2vh; border-bottom-right-radius:1.2vh; }
.libido-fill--neg{right:50%;background: #ef5350;border-top-left-radius:1.2vh;border-bottom-left-radius:1.2vh;}
/* Ghost bar showing max achieved arousal (positive side) */
.libido-ghost{ position:absolute; top:0; bottom:0; width:0; z-index:0; pointer-events:none; }
.libido-ghost--pos{ left:50%; background:rgba(255,63,180,.35); border-top-right-radius:1.2vh; border-bottom-right-radius:1.2vh; }

/* Number overlay inside the filled area */
.libido-number{
  position:absolute; top:50%; transform:translateY(-50%);
  width:50%; text-align:center; pointer-events:none;
  font:800 1.9vh/1 Avenir Next;
  z-index:2;
}
.libido-number--pos{ right:0; color:#ff3fb4; }
.libido-number--neg{ left:0;  color:#ef4444; }
.libido-cover{ color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.25); z-index:3; }


/* ===== static/css/cardsv3.css ===== */
/* ==========================================================================
   CARDS & SLOTS SYSTEM (FULL)
   - hand / ephemeral / reserve
   - hole slots (left/right)
   - freeze slots (independent sizing)
   - card component + variants
   - card inspect + animations
   - sizing split: hand vs client slots; FREEZE UNTOUCHED
   ========================================================================== */

:root{
  /* Sizing */
  /* Hand - larger cards */
  --card-w-hand: 17.5vh;
  --card-h-hand: 21.5vh;
  --slot-w-hand: var(--card-w-hand);
  --slot-h-hand: var(--card-h-hand);

  /* Client slots - compact cards */
  --card-w-slot: 10.6vh;
  --card-h-slot: 13.5vh;
  --slot-w-slot: var(--card-w-slot);
  --slot-h-slot: var(--card-h-slot);

  /* Freeze - independent, unaffected by hand/client sizes */
  --freeze-w: 15vh;
  --freeze-h: 19vh;
  --slot-radius: 0.8vh;

  /* Colors */
  --color-title-bg: rgba(129, 140, 248, .95);
  --color-tag-bg: rgba(245, 158, 11, .95);
  --color-ice: #22c3ee;
  --color-inspect-bg: #251d3f;

  /* Shadows */
  --shadow-elevated: 0 12px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-activated: 0 0 0.6vh rgba(255, 255, 255, .85), 0 0 2.2vh rgba(199, 106, 199, .85), inset 0 0 1.2vh rgba(255, 255, 255, .35);
  --shadow-inspect: 0 0 20px rgba(255, 255, 255, 0.8);
  --shadow-wasted: 0 0 0.6vh rgba(255, 100, 100, .85), 0 0 2.2vh rgba(255, 40, 40, .85), inset 0 0 1.2vh rgba(255, 120, 120, .35);
  --shadow-burn: 0 0 .6vh rgba(255, 100, 100, .95), 0 0 2.2vh rgba(255, 40, 40, .95), inset 0 0 1.2vh rgba(255, 120, 120, .45);

  /* Z-index tiers */
  --z-cards-ui: 10000;
  --z-holes: 20030;
  /* Ensure inspected cards overlay progress/panels from anywhere */
  --z-inspect-card: 100015;
  --z-inspect-overlay: 9998; /* default for hand/freeze inspect - below freeze UI */
  --z-inspect-clone: 100016;
}

/* =========================
   Bottom cards UI panel
   ========================= */
.cards-ui {
  position: absolute;
  left: 1vh;
  bottom: 2vh;
  z-index: var(--z-cards-ui);
  pointer-events: none;      /* only inner blocks clickable */
  display: flex;
  align-items: flex-end;
}

/* =========================
   Hand - grid slots
   ========================= */
.cards-hand {
  display: grid;
  grid-template-columns: repeat(9, minmax(var(--slot-w-hand), 1fr));
  gap: 2.2vh;
  pointer-events: auto;
}

/* Hand controls (e.g., Replace Cards button) must be clickable
   because parent .cards-ui has pointer-events: none */
.hand-controls { pointer-events: auto; }

.hand-slot {
  position: relative;
  width: var(--slot-w-hand);
  min-height: var(--slot-h-hand);
  border-radius: var(--slot-radius);
  background: #ffffff1f;
}

.hand-slot.slot--occupied {
  border-style: solid;
  background: #fff;
}

.hand-slot.filled {
  border: 0;
  background: transparent;
}

.hand-slot.slot--dragover {
  box-shadow: 0 0 0 0.25vh rgba(0,0,0,.22) inset;
}

/* Card fills hand slot fully */
.hand-slot .card-mini {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* Larger card inside hand */
.cards-hand .card-mini {
  width: var(--card-w-hand);
  height: var(--card-h-hand);
}

.cards-hand .card-mini[draggable="true"] { cursor: grab; }
.cards-hand .card-mini.dragging {
  opacity: 1;
  cursor: grabbing;
}

/* Ensure the OS drag preview is fully opaque (Windows/Firefox/Chromium) */
.dnd-drag-image {
  opacity: 1 !important;
  filter: none !important;
}

/* Slot index (debug) */
.hand-slot:empty::after {
  content: attr(data-index);
  position: absolute;
  right: 0.5vh;
  bottom: 0.35vh;
  color: #bbb;
  display: none;
}

/* Ephemeral UI removed */

/* =========================
   Reserve / debug panel
   ========================= */
.cards-reserve {
  position: absolute;
  top: -3vh;
  left: 1vh;
  display: flex;
  flex-wrap: wrap;
  gap: 1vh;
  width: 52vh;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: auto;
}

/* =========================
   Hole blocks + slots near holes
   ========================= */
.left_hole, .right_hole {
  position: absolute;
  top: 19vh;
  width: 18vh;
  /* Raise hole container above work overlay so client meters can overlay frames */
  z-index: var(--z-holes);
}
.left_hole  { left: 6vh; }
.right_hole { right: 6vh; }

.hole-slots {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 2vh;
  z-index: 10007;
}

.left-hole-slots  {left: 5vh;top: 35vh;}
.right-hole-slots {top: 35vh;left: -7vh;}

/* When extra slot is active, shift all three slots to the left */
.hole-slots.has-extra-slot {
  transform: translateX(-8.5vh);
}
.hole-slots.right-hole-slots.has-extra-slot {
  transform: translateX(-6.5vh);
}

.hole-slot {
  width: var(--slot-w-slot);
  height: var(--slot-h-slot);
  /* border: .3vh dashed rgba(255,255,255,.4); */
  border-radius: 1.6vh;
  display: none; /* shown when pose exists */
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 40%);
  position: relative; /* Allow child absolute positioning */
}
.hole-slot.active { display:flex; }
.hole-slot.filled {}

/* Strict Selection aura display - large fire emoji across entire slot */
.slot-aura-fire {
  font-size: 5.5vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 100, 0, 0.9)) drop-shadow(0 0 3px rgba(255, 60, 0, 0.8));
  z-index: 10;
  line-height: 1;
}

/* Hide hole slots while awaiting pose */
.left_hole.awaiting-pose .hole-slots,
.right_hole.awaiting-pose .hole-slots {
  display: none !important;
}

/* =========================
   Freeze UI  (independent sizing)
   ========================= */
.freeze-ui {
  position: absolute;
  bottom: 9vh;
  right: 2vh;
  display: flex;
  /* Elevate well above progress panel */
  z-index: 40010;
}

/* Wild Magic: mini slot-machine host near Freeze UI */
#wm-slot-host{
  position: absolute;
  right: 37vh;
  bottom: 5vh; /* above freeze slots, visible on base scene */
  z-index: 30055;
  pointer-events: none; /* never blocks UI */
}
#wm-slot-host .work-dice-slots{ position: static; left:auto; right:auto; bottom:auto; z-index:1; }
#wm-slot-host .work-dice-pill{ transform-origin: 100% 100%; }

/* Crit: turn red, blink and scale */
@keyframes wmCritBlink {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}
#wm-slot-host.wm-slot--crit .work-dice-pill{
  background: linear-gradient(180deg, #ff4d4d, #c80000);
  box-shadow: 0 .6vh 1.6vh rgba(0,0,0,.35), 0 0 0 .2vh rgba(239,68,68,.55) inset;
  animation: wmCritBlink .24s ease-in-out infinite;
  transform: scale(1.2);
}

.freeze-slots {position:relative;display:flex;gap: 2.2vh;}


/* Freeze slot — independent sizing (middle) */
.freeze-slot {
  position: relative;
  width: var(--freeze-w);
  height: var(--freeze-h);
  border-radius: var(--slot-radius);
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 0; /* allow elevation when inspected */
}

/* Card inside freeze keeps freeze size, not hand/client */
/* Card inside freeze — keep independent size */
.freeze-slot .card-mini { width: var(--freeze-w); height: var(--freeze-h); }

/* Freeze badge: dedicated selector to style independently */
.card-mini__tag.freeze-badge .cm-type-label,
.card-mini__tag.freeze-badge .cm-type-tail { display: none; }
.card-mini.cm-effect   .card-mini__tag.freeze-badge::after { content: 'Effect'; }
.card-mini.cm-friction .card-mini__tag.freeze-badge::after { content: 'Friction'; }
.card-mini.cm-junk     .card-mini__tag.freeze-badge::after { content: 'Junk'; }
/* Customize look here if needed (font, spacing, etc.) */
/* .card-mini__tag.freeze-badge { font-weight: 600; } */

/* ---- FREEZE SLOT BADGES (Effect/Friction badges in freeze slots) ---- */
/* Dedicated selector for Effect badges inside freeze slot cards */
.freeze-slot .card-mini .cm-badge--effect,
.card-mini.card-in-freeze .cm-badge--effect {font-size: 1.35vh;padding: 1vh 1.2vh;font-weight: 700;}
/* Dedicated selector for Friction badges inside freeze slot cards */
.freeze-slot .card-mini .cm-badge--friction {font-size: 1.35vh;padding: 1vh 1.2vh;font-weight: 700;}

/* Freeze title: center title content */
.card-mini__title.freeze-title { justify-content: center; }
.card-mini__title.freeze-title .card-mini__title-text { text-align: center; }

.freeze-slot.filled { border-color: rgba(255,255,255,.35); }

/* Freeze inspect effects — mirror hand behaviour */
.freeze-slots .freeze-slot .card-mini { transition: opacity .5s ease, transform .5s ease; }
.freeze-slots .freeze-slot .card-mini.is-fresh { opacity: 0; transform: translateY(0.7vh) scale(.98); }
.freeze-slots .freeze-slot .card-mini.is-fresh.is-in { opacity: 1; transform: none; }
.freeze-slots .freeze-slot.is-inspected .card-mini,
.freeze-slots .freeze-slot .card-mini.is-inspected{
  transform: translateZ(0) scale(1.05) !important;
  box-shadow: var(--shadow-inspect) !important;
  z-index: var(--z-inspect-card);
}
/* Raise the whole slot when inspected so panel never covers it */
.freeze-slots .freeze-slot.is-inspected{ z-index: calc(var(--z-inspect-card) - 1); }
/* Dim non-selected freeze cards during inspect */
.freeze-slots:has(.freeze-slot.is-inspected) .freeze-slot .card-mini { filter: brightness(.7); }
.freeze-slots .freeze-slot.is-inspected .card-mini,
.freeze-slots .freeze-slot .card-mini.is-inspected { filter: brightness(1) !important; }

.freeze-hint {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.freeze-hint__title {
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  margin-bottom: 1.6vh; opacity:.95; font-size: 2vh;
}
.freeze-cost{
  display:flex; align-items:center; gap: 1vh;
  padding:1vh 1.6vh; background:var(--color-ice); color:#fff;
  border-radius: 0.8vh; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.freeze-cost__icon{ font-size: 2.2vh; line-height:1; }

.freeze-slot.slot--dragover { box-shadow: 0 0 0 0.25vh rgba(34,195,238,.6) inset; }

/* Freeze streak badge UI removed for release build.
 * Original styles moved to debug_backup/cards_freeze_streak_badge.css
 */

/* =========================
/* Base card component
   (defaults to client-slot size)
   ========================= */
.card-mini {
  width: var(--card-w-slot);
  height: var(--card-h-slot);
  border-radius: var(--slot-radius);
  color: #fff;
  display: block;
  user-select: none;
  position: relative; /* anchor for image layer */
  transition: filter 0.6s ease-in-out;
}

/* Shape by type */
.card-mini.cm-friction {border-radius: 0.5vh;}
.card-mini.cm-effect   { border-radius: 1.6vh; }
.card-mini.cm-junk     { border-radius: 1.6vh; }

/* Sharp/round panels by type */
.card-mini.cm-friction .card-mini__title {border-radius: 0 0 0.3vh 0.3vh;}
.card-mini.cm-effect   .card-mini__title { border-radius: 0 0 1.4vh 1.4vh; }
.card-mini.cm-junk     .card-mini__title { border-radius: 0 0 1.4vh 1.4vh; }
.card-mini.cm-friction .card-mini__tag   {border-radius: .2vh;font-size: 1.35vh;font-weight: 700;}
.card-mini.cm-effect   .card-mini__tag   {border-radius: 2vh;}
.card-mini.cm-junk     .card-mini__tag   {border-radius: 2vh;height: 2vh;}

/* image layer */
.card-mini__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(1.05) contrast(1.02);
  border-radius: inherit;
  background-color: bisque; /* fallback */
  filter: drop-shadow(0px 0.2vh 0.3vh #00000057);
}

.card-mini__bg {}

/* Roster visual: invert the look to distinguish */
/* Only invert the art layer for roster cards */
.card-mini.is-roster .card-mini__bg {filter: hue-rotate(
45deg);}

/* Top title pill (default: single line) */
.card-mini__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  padding: 0.9vh 1.1vh;
  border-radius: 0 0 .8vh .8vh;
  background: var(--title-bg, var(--color-title-bg));
  color: #fff;
  font-size: 1.35vh;
  line-height: 1.1;
  /* box-shadow: 0 -2px 8px rgba(0,0,0,.15) inset; */
  display:flex;
  align-items:center;
  gap: .7vh;
}
.card-mini__title-text{overflow:hidden;/* text-overflow:ellipsis; */white-space:nowrap;}

/* Bottom tag (default: single line) */
.card-mini__tag {
  position: absolute;
  top: -1.8vh;
  left: 50%;
  transform: translateX(-50%);
  padding: .6vh 1.1vh;
  border-radius: .9vh;
  background: var(--tag-bg, var(--color-tag-bg));
  color: #fff;
  font-size: 1.35vh;
  line-height: 1;
  white-space: nowrap;
  display:flex;
  align-items:center;
  /* inner spacing controlled by children to allow non-uniform gaps */
}

/* Separate pieces inside badge on mini-cards */
.card-mini__tag .cm-type-label {display:inline-block;font-weight: 700;margin-right: 0.6vh;}
.card-mini.cm-junk .card-mini__tag .cm-type-label { margin-right: 0; }
.card-mini__tag .cm-type-tail  {display:inline-flex;align-items:center;gap: 0.4vh;}

/* Explicit badge selectors by type (mini cards) */
.cm-badge { display:flex; align-items:center; }
.cm-badge--effect   { border-radius: 1.4vh; }
.cm-badge--friction { border-radius: .2vh; }

/* Placeholder rectangles for icons */
.ph-rect{ display:inline-block; background: rgba(255,255,255,.5); border-radius:.3vh; }
.ph-rect--small{ width:1.8vh; height:1.2vh; }
.ph-rect--tiny{ width:1.2vh; height:1.2vh; border-radius:.4vh; }

/* Real mini icons (no placeholder background) */
/* Default sizes (client slots, reserve, generic) */
.cm-icon-tag { width:1.8vh; height:1.2vh; vertical-align:middle; object-fit:contain; display:inline-block; background-repeat:no-repeat; background-size:contain; background-position:center; }
.cm-icon-suit{ width:1.2vh; height:1.2vh; vertical-align:middle; object-fit:contain; display:inline-block; background-repeat:no-repeat; background-size:contain; background-position:center; }
.cm-badge-text{font-weight: 700;/* font-size:1.35vh; */line-height:1;vertical-align:middle;}

/* Larger icons in hand */
/* Use either real hand container or a generic hand-context wrapper */
.cards-hand .card-mini .cm-icon-tag,
.hand-context .card-mini .cm-icon-tag {width: 2vh;height: 2vh;margin-bottom: 0.2vh;}
.cards-hand .card-mini .cm-icon-tag.is-wide,
.hand-context .card-mini .cm-icon-tag.is-wide { width: 2.5vh; height: 2.5vh; }
/* Inspect clone: make wide tag icons a bit larger */
/* Slightly narrower badge when the card has a wide tag icon */
.cards-hand .card-mini.has-wide-tag .card-mini__tag,
.hand-context .card-mini.has-wide-tag .card-mini__tag { padding-top: 0.35vh; padding-bottom: 0.35vh; }
.cards-hand .card-mini .cm-icon-suit,
.hand-context .card-mini .cm-icon-suit{ width:1.6vh; height:1.6vh; }
.cards-hand .card-mini .cm-badge-text,
.hand-context .card-mini .cm-badge-text{font-size: 1.3vh;}

/* Inspect clone (zoomed preview) */
.card-inspect-clone.card-mini .cm-icon-tag {width: 2.4vh;height: 2.4vh;margin-bottom: 0.2vh;}
.card-inspect-clone.card-mini .cm-icon-suit{ width:3vh; height:3vh; }
.card-inspect-clone.card-mini .cm-badge-text{ font-size:2vh; }
.card-inspect-clone .cm-icon-tag.is-wide { width: 2.8vh; height: 2.8vh; }

/* If inspect clone has a very wide tag icon (>=1.2 ratio), shrink badge height by 0.6vh */
.card-inspect-clone.card-mini.has-very-wide-tag .card-mini__tag { padding-top: 0.7vh; padding-bottom: 0.7vh; }

/* legacy label (fallback) */
.card-mini__label { display: none; }

/* (removed) aura emoji inside a card - icon now lives in aura badges */

/* =========================
   Variant: in-slot (client slots)
   ========================= */
.card-mini.card-in-slot{
  width: var(--card-w-slot);
  height: var(--card-h-slot);
}

.card-mini.card-in-slot.cm-friction {}

.card-mini.card-in-slot .card-mini__bg{
  /* shift artwork upward to match mock */
  background-position: 0vh -0.8vh;
}

/* Visible note shown below a card when suit mismatch is detected */
.slot-note {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5vh;
  width: max-content;
  max-width: 13vh;
  color: #fff;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px); /* glass blur effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  padding: 0.8vh 1.2vh;
  border-radius: 0.8vh;
  font-size: 1.2vh;
  line-height: 1.3;
  white-space: pre-line;
  box-shadow: 0 8px 16px rgba(0,0,0,0.65);
  pointer-events: none; /* purely informative */
  z-index: 100;
}

/* Allow multi-line title only when card is in client slot */
.card-in-slot .card-mini__title{
  font-size: 1.25vh;
}

/* In client slots, allow title to wrap to two lines */
.card-mini.card-in-slot .card-mini__title-text{
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  width: 100%;
}

/* Center whole title row in slots */
.card-mini.card-in-slot .card-mini__title{ justify-content: center; }

/* Compact corner badge in client slots: E (effect) / F (friction) */
.card-mini.card-in-slot .card-mini__tag{ display:none; }
.card-mini.card-in-slot::before{
  content: 'E';
  position:absolute;
  top: -0.8vh;
  left: -0.8vh;
  min-width: 3.6vh;
  height: 3.6vh;
  /* padding: 0 .4vh; */
  display:flex;
  align-items:center;
  font-weight: 700;
  justify-content:center;
  border-radius: 50%;
  background: #F07E4D; /* effect */
  color:#fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  font-size: 2vh;
  line-height: 1;
  z-index: 5;
}
.card-mini.card-in-slot.cm-friction::before{
  content: 'F';
  background: #D54DF0; /* friction */
  border-radius: .4vh;
}
.card-mini.card-in-slot.cm-junk::before{
  content: 'J';
  background: #888; /* gray for junk */
  border-radius: 50%;
}

/* Hide suit icon in client slots */
.card-mini.card-in-slot .cm-icon-suit{ display:none; }

/* Hide suit icon for freeze-slot cards */
.freeze-slot .card-mini .cm-icon-suit{ display:none; }

/* =========================
   States / highlights
   ========================= */
.card-mini.is-activated {
  box-shadow: var(--shadow-activated);
  transform: translateZ(0) scale(1.02);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* highlight for inspected (clicked) card */
.card-mini.is-inspected{
  /* Figma: Drop shadow X0 Y0, Blur 20, Color #FFFFFF at 80% */
  box-shadow: var(--shadow-inspect);
  transform: translateZ(0) scale(1.2);
  position: relative;
  z-index: var(--z-inspect-card); /* above inspect overlay */
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Client slots: reduce inspect zoom to 1.05 */
.hole-slots .hole-slot .card-mini.is-inspected{
  transform: translateZ(0) scale(1.05) !important;
}

/* Persist highlight if the hand slot is marked (survives hand rerenders) */
.cards-hand .hand-slot.is-inspected .card-mini{
  box-shadow: var(--shadow-inspect);
  transform: translateZ(0) scale(1.2);
  z-index: var(--z-inspect-card);
}

.card-mini.is-wasted {
  box-shadow: var(--shadow-wasted);
  transform: translateZ(0) scale(1.02);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* Card is mismatched suit (fully non-suited) — completely desaturated gray effect */
.card-mini.is-suit-mismatch {
  filter: saturate(0);
}

/* Card is partially mismatched suit (secondary suit) — 50% desaturated */
.card-mini.is-suit-partial-mismatch {
  filter: saturate(0.5);
}

/* Tooltip styling for mismatched cards */
.card-mini.is-suit-mismatch[title],
.card-mini.is-suit-partial-mismatch[title] {
  cursor: help;
}

/* Animate full mismatch effect when applied (fade to grayscale) */
.card-mini.is-suit-mismatch.animating-mismatch {
  animation: mismatchFadeInFull 0.6s ease-in-out forwards;
}

/* Animate partial mismatch effect when applied (fade to 50% saturation) */
.card-mini.is-suit-partial-mismatch.animating-mismatch {
  animation: mismatchFadeInPartial 0.6s ease-in-out forwards;
}

@keyframes mismatchFadeInFull {
  from {
    filter: saturate(1);
  }
  to {
    filter: saturate(0);
  }
}

@keyframes mismatchFadeInPartial {
  from {
    filter: saturate(1);
  }
  to {
    filter: saturate(0.5);
  }
}

/* =========================
   Inspect overlay
   ========================= */
.card-inspect-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-inspect-overlay);
  background: rgba(0,0,0,.6); /* darken everything */
  backdrop-filter: blur(8px); /* glass blur effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  /* Smooth fade-in on open */
  opacity: 0;
  transition: opacity 500ms ease;
}

/* When inspecting from deck - overlay should be above everything including freeze UI */
.card-inspect-backdrop.card-inspect-backdrop--from-deck {
  z-index: 100012; /* above freeze UI (40010) but below inspect content and above chat */
  backdrop-filter: none; /* Disable blur to prevent stacking context issues with description panel */
  -webkit-backdrop-filter: none; /* Safari support */
}

.card-inspect-backdrop.is-open { opacity: 1; }

/* Deck inspect mode: ensure the preview card renders ABOVE the backdrop.
   (Otherwise the backdrop tint/blur overlays the inspected card itself.) */
.inspect-readonly .card-inspect-backdrop{
  z-index: 100012;
}
.inspect-readonly .card-inspect-clone{
  z-index: 100016;
}
.inspect-readonly .card-inspect-wrap{
  z-index: 100017; /* explicitly above backdrop and chat to prevent visual overlay of description */
}
.inspect-readonly .card-inspect-panel{
  z-index: 100018; /* ensure description panel is fully visible above backdrop and chat */
}

.card-inspect-clone {
  position: fixed;
  z-index: var(--z-inspect-clone);
  pointer-events: auto;
  box-shadow: var(--shadow-elevated);
  border-radius: 1vh;
  background: var(--color-inspect-bg);
  color: #fff;
  overflow: hidden;
  transform-origin: center center;
  transition:
    transform .12s ease,
    opacity 500ms ease,
    left .12s ease,
    top .12s ease,
    width .12s ease,
    height .12s ease;
  transform: scale(1);
  opacity: 0;
}

.card-inspect-zoomed { transform: scale(2.2); }

.card-inspect-clone.is-open { opacity: 1; }

/* centered duplicate (overridden inside .card-inspect-wrap) */
.card-inspect-center{ position:absolute; z-index:100016; left:50%; top:50%; transform:translate(-50%,-50%); width:22vh; height:27vh; border-radius:12px; overflow:hidden; }
/* use shared elevated shadow for center preview */
.card-inspect-center{ box-shadow: var(--shadow-elevated); }

/* Wrapper that centers preview + info side-by-side */
.card-inspect-wrap{
  position: absolute;
  top: 30vh;
  left: 0;
  margin: auto;
  right: 0;
  width: max-content;
  z-index: 100017; /* above chat (100000) to prevent overlay */
  --inspect-card-w: 24.5vh;
  --inspect-card-h: 32vh;
  --inspect-gap: 6.5vh;
  padding-left: calc(var(--inspect-card-w) + var(--inspect-gap));
  isolation: isolate; /* Create new stacking context to prevent backdrop-filter interference */
}

/* Info panel inside the wrap (no absolute positioning here) */
.card-inspect-wrap .card-inspect-panel{position: relative;display: flex;transform:none;left:auto;top:auto;margin-top: -3vh;width: max-content;}

/* The clone inside wrap uses static layout */
.card-inspect-wrap .card-inspect-center{position:absolute;left:0;top: -3vh;transform:none;width:var(--inspect-card-w);height:var(--inspect-card-h);overflow:visible !important;transition: transform 220ms ease, opacity 500ms ease;}

.card-inspect-info {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 12px;
  background: rgba(20,16,32,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 12px;
  width: clamp(260px, 32vw, 420px);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  font-size: 14px;
  line-height: 1.35;
  color: #eee;
}

/* detached panel wrapper placed above overlay */
.card-inspect-panel{position: relative;z-index:100018;transition: transform 220ms ease, opacity 500ms ease; opacity: 0;}
.card-inspect-panel.is-open{ opacity: 1; }

/* preview of original card placed over overlay */
.card-inspect-origin{box-shadow: var(--shadow-elevated);border-radius: 12px;/* overflow: hidden; */}

.card-inspect-info h3 {
  margin: 2px 0 10px;
  font-size: 18px;
  line-height: 1.2;
}

.card-inspect-info img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 6px;
  margin: 4px 0 10px;
}

.card-inspect-info .meta { opacity: .9; margin-top: 8px; }
.card-inspect-info .meta div { margin: 4px 0; }

/* While inspecting from deck: disable interactions/highlights on other UI */
.inspect-readonly #cards-ui,
.inspect-readonly #left-hole-slots,
.inspect-readonly #right-hole-slots,
.inspect-readonly #freeze-ui,
.inspect-readonly #freeze-slots,
.inspect-readonly .pile-buttons {
  pointer-events: none !important;
}

/* =========================
   Inspect Clone Card (priority styles)
   Ensures the preview card renders exactly like mini-card,
   but isolates layout tweaks if needed. Higher specificity.
   ========================= */
.card-inspect-clone.card-mini {/* overflow:hidden; */}
.card-inspect-clone.card-mini .card-mini__bg{ border-radius: inherit; }
.card-inspect-clone.card-mini .card-mini__tag{
  position: absolute;
  top: -2.5vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 1vh 1.5vh;
  border-radius: 5vh;
  background: var(--tag-bg, var(--color-tag-bg));
  color: #fff;
  font-size: 2vh;
  line-height:1;
  white-space: nowrap;
  display:flex;
  align-items:center;
  /* label->tail spacing is set by label's margin; icon gaps set below */
}
/* Inspect clone: tune spacing inside badge (label and tail icons) */
.card-inspect-clone.card-mini .card-mini__tag .cm-type-label {margin-right: 1.2vh;}
.card-inspect-clone.card-mini.cm-junk .card-mini__tag .cm-type-label { margin-right: 0; }
.card-inspect-clone.card-mini .card-mini__tag .cm-type-tail  {gap: 0.8vh;}
/* Friction in inspect view uses sharp rectangular badge */
.card-inspect-clone.card-mini .card-mini__tag.cm-badge--friction{ border-radius: .4vh; }
.card-inspect-clone.card-mini .card-mini__title {
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  transform:none;
  padding: 1vh 0vh 1vh 1.3vh;
  /* border-radius: 0 0 .8vh .8vh; */
  background: var(--title-bg, var(--color-title-bg));
  color:#fff;
  font-size: 1.7vh;
  font-weight: 600;
  line-height: 1.8vh;
  /* box-shadow: 0 -2px 8px rgba(0,0,0,.15) inset; */
  display:flex;
  align-items:center;
  gap: 1.2vh;
}

.card-inspect-clone.card-mini .card-mini__title .ph-rect--tiny {
    width: 3vh;
    height: 3vh;
    border-radius: .4vh;
}

.card-inspect-clone.card-mini .card-mini__title-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Icon assets via CSS (no inline image references in JS) */
/* Dice icon */
.cm-icon-tag.cm-icon--die{ background-image:url('../images_of_glory/luna/icons-effects/dice-default.png'); }

/* Suit icons */
.cm-icon-suit.cm-suit--suitless{ background-image:url('../images_of_glory/luna/icons-suits/suitless.svg'); }
.cm-icon-suit.cm-suit--handjob { background-image:url('../images_of_glory/luna/icons-suits/handjob.svg'); }
.cm-icon-suit.cm-suit--blowjob { background-image:url('../images_of_glory/luna/icons-suits/blowjob.svg'); }
.cm-icon-suit.cm-suit--titjob  { background-image:url('../images_of_glory/luna/icons-suits/titjob.svg'); }
.cm-icon-suit.cm-suit--vaginal { background-image:url('../images_of_glory/luna/icons-suits/vaginal.svg'); }
.cm-icon-suit.cm-suit--anal    { background-image:url('../images_of_glory/luna/icons-suits/anal.svg'); }

/* =========================
   Appearing animation (bulk/refill)
   ========================= */
.cards-hand .card-mini.card-fresh {
  opacity: 0;
  transform: translateY(1.4vh);
  animation: cardEnter .5s ease .5s forwards;
  will-change: opacity, transform;
}

@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   Burn animation
   ========================= */
.card-mini.is-burned {
  position: relative;
  animation: burnOut 1500ms ease forwards;
  box-shadow: var(--shadow-burn);
  will-change: opacity, transform, filter;
}

.card-mini.is-burned::after {
  /* Use unicode escape to avoid mojibake if a tool/server mis-decodes UTF-8. */
  content: "\01F525";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5) rotate(-15deg);
  font-size: 4.5vh;
  opacity: 0.95;
  animation: burnPulse 1500ms ease forwards;
  text-shadow: 0 0 8px rgba(255, 100, 0, 0.8);
  will-change: opacity, transform;
}

@keyframes burnPulse {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1.5) rotate(-15deg); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.8) rotate(5deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(45deg); }
}

@keyframes burnOut {
  0%   { opacity: 1; transform: scale(1);    filter: none; }
  60%  { opacity: .9; transform: scale(.98); filter: brightness(1.15); }
  100% { opacity: 0; transform: scale(.92);  filter: blur(2px) brightness(1.3); }
}

/* Discard animation (fade out) */
.card-mini.is-discarded {
  animation: discardOut 600ms ease forwards;
  opacity: 1;
}

@keyframes discardOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

.cards-hand .hand-slot .card-mini {transition: opacity .5s ease, transform .5s ease;filter: drop-shadow(0px 0.2vh 0.3vh #00000057);}
.cards-hand .hand-slot .card-mini.is-burned { transition: none; } /* Disable transition for burn animation */
.cards-hand .hand-slot .card-mini.is-discarded { transition: none; } /* Disable transition for discard animation */
.cards-hand .hand-slot .card-mini.is-fresh { opacity: 0; transform: translateY(0.7vh) scale(.98); }
.cards-hand .hand-slot .card-mini.is-fresh.is-in {opacity: 1;transform: none;filter: drop-shadow(0px 0.2vh 0.3vh #00000057);}

/* Strong override: keep inspected scale even if fresh/in animations set transform */
.cards-hand .hand-slot.is-inspected .card-mini,
.cards-hand .hand-slot .card-mini.is-inspected{
  transform: translateZ(0) scale(1.05) !important;
  box-shadow: var(--shadow-inspect) !important;
  z-index: var(--z-inspect-card);
}

/* Dim non-selected hand cards during inspect */
.cards-hand:has(.hand-slot.is-inspected) .hand-slot .card-mini {
  filter: brightness(.7);
}
.cards-hand .hand-slot.is-inspected .card-mini,
.cards-hand .hand-slot .card-mini.is-inspected { 
  filter: brightness(1) !important; 
}

/* =========================
   Discard animation (hand only)
   ========================= */
.card-mini.is-discarding{
  position: relative;
  box-shadow: 0 0 .6vh rgba(56,189,248,.85), 0 0 1.6vh rgba(56,189,248,.55);
  animation: handDiscard 450ms ease forwards;
}

@keyframes handDiscard{
  0%   { opacity:1; transform: translateY(0) scale(1); filter:none; }
  60%  { opacity:.7; transform: translateY(0.5vh) scale(.98); filter: brightness(1.05); }
  100% { opacity:0; transform: translateY(1.4vh) scale(.96); filter: blur(0.1vh); }
}

/* Mistrust highlight when entering hand */
.cards-hand .hand-slot .card-mini.mistrust-flash {
  position: relative;
  z-index: 50;
  box-shadow: 0 0 1.6vh rgba(250, 204, 21, .9), 0 0 3vh rgba(254, 243, 199, .9);
  animation: mistrustFlash 1800ms ease-out;
}

.cards-hand .hand-slot .card-mini.mistrust-flash-final {
  position: relative;
  z-index: 55;
  box-shadow: 0 0 1.8vh rgba(248, 113, 113, .95), 0 0 3.4vh rgba(254, 202, 202, .95);
  animation: mistrustFlash 1800ms ease-out;
}

/* Customer Complaint trio highlight when causing loss */
.card-mini.complaint-flash {
  position: relative;
  z-index: 52;
  box-shadow: 0 0 1.6vh rgba(248, 113, 113, .95), 0 0 3vh rgba(254, 202, 202, .9);
  animation: mistrustFlash 1800ms ease-out;
}

@keyframes mistrustFlash {
  0%   { transform: translateY(0) scale(1);        filter: brightness(1.05); }
  25%  { transform: translateY(-4vh) scale(1.6); filter: brightness(1.3); }
  60%  { transform: translateY(-4vh) scale(1.4); filter: brightness(1.2); }
  100% { transform: translateY(0) scale(1);        filter: brightness(1); }
}


/* ===== static/css/chatv2.css ===== */

/* Стили для фразы на экране (в режиме игры) */
.chat_new_phrases .chat_message {
  border-radius: 1vh;
  padding: 1vh 1.5vh;
  margin: 2vh 0vh 0vh 2vh;
  font-size: 2vh;
  font-weight: 600;
  line-height: 1.3;
  width: 35vh;
  color: white;
  word-wrap: break-word;
  overflow-wrap: break-word;
  filter: drop-shadow(0px 0.3vh 0.3vh #00000057);
}

/* Стили для фраз в истории */
.chat_history .chat_message {
  border-radius: 1vh;
  padding: 0.8vh 1.2vh;
  margin: 0vh;
  font-size: 2vh;
  font-weight: 600;
  line-height: 1.2;
  width: auto;
  max-width: 45vh;
  color: white;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.chat_message[style*="text-align: right"] {
    background-color: #876ac7;
    margin-left: auto;
}

.chat_message[style*="text-align: left"] {
    background-color: #c2d6f2; 
    margin-right: auto;
}

.chat_main .chat_new_phrases {
    position: relative;
    z-index: 10;
    max-height: 19vh;
    overflow-y: auto;
    border-radius: 1vh;
}

.chat_history {
    max-height: 70vh;
    overflow-y: auto;
    padding: 2vh 1vh 1vh 1vh;
    /* border-radius: 1vh; */
    background-color: #514986;
    width: 46vh;
    border-radius: 1vh;
    left: 2vh;
}

.chat_main {
    position: absolute;
    z-index: 100000;
    top: -1vh;
    left: 0.5vh;
}

/* Стили для обёртки фразы на экране */
.chat_new_phrases .chat_wrapper {
  display: flex;
  align-items: flex-start;
  margin: 1vh 2vh;
}

.chat_new_phrases .chat_wrapper.men {
  justify-content: flex-start;
}

.chat_new_phrases .chat_wrapper.girl {
  justify-content: flex-end;
}

.chat_new_phrases .chat_wrapper img {
  width: 7vh;
  height: 7vh;
  margin-top: 2vh;
  border-radius: 50%;
  filter: drop-shadow(0px 0.2vh 0.2vh #00000057);
}

.chat_new_phrases .chat_wrapper.men .chat_message {
  background-color: #474757;
}

.chat_new_phrases .chat_wrapper.girl .chat_message {
  background-color: #6f7dff;
}

/* Стили для обёртки фразы в истории */
.chat_history .chat_wrapper {
  display: flex;
  align-items: flex-start;
  margin: 1vh 1vh;
}

.chat_history .chat_wrapper.men {
  justify-content: flex-start;
}

.chat_history .chat_wrapper.girl {
  justify-content: flex-end;
}

.chat_history .chat_wrapper img {
  width: 5vh;
  height: 5vh;
  margin-top: 0.5vh;
  border-radius: 50%;
  opacity: 0.9;
  margin-left: 1vh;
}

.chat_history .chat_wrapper.men .chat_message {
  background-color: #373741;
}

.chat_history .chat_wrapper.girl .chat_message {
  background-color: #6f7dff;
}

.chat_main .show_history {
  position: relative;
  z-index: 30;
  width: 6vh;
  border-radius: 1vh;
  height: 5vh;
  background-color: #514986;
  border: none;
  background-image: url("../images_of_glory/luna/arrowdown.svg");
  background-size: 3vh;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  padding: 0;
  margin-top: 3vh;
  display: none;
  filter: drop-shadow(0px 0.2vh 0.2vh #00000057);
  transition: transform 0.3s ease;
}

/* Перевёрнутая стрелка когда история открыта */
.show_history.active {
  transform: rotate(180deg);
}

.new_phrases {
  display: flex;
}

.chat_main .history {
  position: absolute;
  top: -30vh;
  left: 1vh;
  z-index: 20;
  transition: 0.5s;
  /* transform: translateY(-20vh); */ /* Скрыта */
  /* transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1); */
  /* will-change: transform; */
}

.history.visible {
   top: 0vh;
   left: 1vh;
}
/* Анимация мигания для новой реплики */
/* Анимация мигания для новой реплики */
@keyframes phrase-flash {
  0% {
    background-color: #6f7dff;
  }
  20% {
    background-color: #9c67f5;
  }
  40% {
    background-color: #c557f3;
  }
  60% {
    background-color: #D54DF0;
  }
  80% {
    background-color: #9c67f5;
  }
  100% {
    background-color: #6f7dff;
  }
}

.chat_new_phrases .chat_wrapper.phrase-flash .chat_message {
  animation: phrase-flash 1s ease-in-out;
}


/* ===== static/css/work.css ===== */
.work-button {
  position: absolute;
  top: 4vh;
  right: 4vh;
  z-index: 10010;
  /* Render as image-like button */
  width: 31vh;
  aspect-ratio: 292 / 97; /* keep SVG proportion */
  padding: 0;
  border: none;
  /* Three layers: top text, middle moving pink shine, bottom base SVG */
  background-image:
    url("../images_of_glory/interface/continue_button_text_layer.svg"),
    linear-gradient(90deg,
      rgba(213, 77, 240, 0) 0%,
      rgba(213, 77, 240, 0.0) 35%,
      rgba(213, 77, 240, 0.45) 50%,
      rgba(213, 77, 240, 0.0) 65%,
      rgba(213, 77, 240, 0) 100%
    ),
    url("../images_of_glory/interface/continue_button.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, -150% 0, center;
  background-size: contain, 220% 100%, contain;
  background-blend-mode: normal, screen, normal;
  /* Clip both background layers to the SVG silhouette */
  -webkit-mask: url("../images_of_glory/interface/continue_button.svg") no-repeat center / contain;
          mask: url("../images_of_glory/interface/continue_button.svg") no-repeat center / contain;
  color: transparent; /* hide text */
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
  filter: brightness(1);
}

/* .work-button:hover { transform: scale(1.1); filter: brightness(1.1); } */
/* Do not shrink on click while in working state */
.work-button:active { transform: scale(0.98); }
.work-button.is-working:active { transform: none; }

/* Working state: subtle pulse + nudge to indicate activity */
.work-button.is-working {
  filter: brightness(1.15) saturate(1.05);
  cursor: progress;
  /* keep a stable slightly enlarged size while working */
  transform: scale(1.06);
  /* lengthen the enlarge animation when entering working state */
  transition: transform .45s ease, filter .25s ease;
  animation: workPulse 900ms ease-in-out infinite;
}
/* keep the same size even if hover state drops while working */
.work-button.is-working:hover { transform: scale(1.06); }

/* Animate the pink shine (top background layer) left→right while working */
.work-button.is-working {
  animation: workPulse 900ms ease-in-out infinite, workShineBG 1.6s linear infinite;
}

/* Fast shine variant used for empty-turn freeze */
.work-button.is-working.is-fast-shine{
  /* keep pulse; accelerate the shine sweep significantly */
  animation: workPulse 900ms ease-in-out infinite, workShineBG .25s linear infinite;
}

/* When overlay awaits user click: stop sweep, show static pink highlight */
body.work-overlay-active.work-next-ready .work-button {
  /* keep pulse only; cancel sweeping shine */
  animation: workPulse 900ms ease-in-out infinite !important;
  /* static pink layer between base and text */
  background-image:
    url("../images_of_glory/interface/continue_button_text_layer.svg"),
    linear-gradient(0deg, rgba(213, 77, 240, .38), rgba(213, 77, 240, .38)),
    url("../images_of_glory/interface/continue_button.svg");
  background-size: contain, 100% 100%, contain;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, screen, normal;
  /* Ensure the Continue arrow is clickable above the overlay */
  z-index: 30010;
  pointer-events: auto;
}

/* One-shot shrink at next turn start */
.work-button.just-shrunk {
  animation: workShrink 220ms ease-out 1;
}

@keyframes workPulse {
  0%   { filter: brightness(1.0) saturate(1.0); }
  50%  { filter: brightness(1.25) saturate(1.1); }
  100% { filter: brightness(1.0) saturate(1.0); }
}

/* removed transform-based nudge to avoid size flicker when hover ends */

@keyframes workShrink {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes workShineBG {
  0%   { background-position: center, -150% 0, center; }
  100% { background-position: center,  150% 0, center; }
}

/* legacy .work-next removed; use .work-next-ghost inside overlays */

/* Pseudo-Next button embedded into overlay */
.work-next-ghost{
  display: none;
  position: absolute;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  padding: 1.6vh 3.2vh;
  font: 800 2.4vh/1.2 Avenir Next;
  color: #0b1220;
  background: #ffd66e;
  border-radius: .9vh;
  box-shadow: 0 .6vh 2vh rgba(0,0,0,.35);
  cursor: pointer;
  user-select: none;
  z-index: 20060;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.work-next-ghost.work-next-ghost--disabled{
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.2) saturate(.8);
}
.work-next-ghost:hover{ transform: translateX(-50%) scale(1.04); filter: brightness(1.05); }
.work-next-ghost:active{ transform: translateX(-50%) scale(0.98); }

/* Pseudo-Reroll button — bright, large, below tiles */
.work-reroll-ghost{
  position: absolute;
  left: 36%;
  bottom: 2.2vh; /* sit above NEXT or swap if single */
  transform: translateX(-50%);
  padding: 1.8vh 3.6vh;
  font: 900 2.6vh/1.2 Avenir Next;
  color: #fff;
  background: linear-gradient(180deg, #6366f1, #4f46e5); /* indigo */
  border-radius: 1.1vh;
  box-shadow: 0 .8vh 2.2vh rgba(0,0,0,.38);
  cursor: pointer;
  user-select: none;
  z-index: 20070; /* above next */
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.work-reroll-ghost:hover{ transform: translateX(-50%) scale(1.05); filter: brightness(1.05); }
.work-reroll-ghost:active{ transform: translateX(-50%) scale(0.98); }
.work-reroll-ghost.work-reroll-ghost--disabled{
  pointer-events: none;
  opacity: .6;
  filter: grayscale(.2) saturate(.8);
}

/* Pseudo-Replace-Cards button — uses the same reroll charge */
/* removed overlay replace button styles — hand phase control instead */

.work-stage {
  position: absolute;
  inset: 0;
  z-index: 20000; /* ensure overlay is above UI */
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* default off; enabled when active */
}
.work-stage.active { display: flex; pointer-events: auto; }

.work-stage img {
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* === Trapezoid frames view (score phase) === */
.work-trapezoids {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0vh;
  /* Allow overlay to intercept clicks to block underlying UI */
  pointer-events: auto;
  background: rgba(0,0,0,.45); /* semi-transparent black overlay under tiles */
  backdrop-filter: blur(8px); /* glass blur effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  z-index: 20010;
}
.work-stage.active .work-trapezoids { display: flex; }

/* Inner row holds tiles; we shift only the row, not the overlay */
.work-trapezoids__row{
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative; /* allow absolutely-positioned slots inside row */
  transform: translateY(-10vh);
}
/* When serving LEFT client, shift frames to the RIGHT; and vice versa. */
.work-trapezoids--left  .work-trapezoids__row {transform: translateX(5vh) translateY(-8vh) scale(0.93);}
.work-trapezoids--right .work-trapezoids__row { transform: translateX(-5vh) translateY(-8vh) scale(0.93);; }

.work-trapezoids__item {
  position: relative;
  width: 45vh; /* even wider tiles */
  height: 58vh;
  background: rgba(200,200,200,.55);
  border-radius: 0; /* no rounded corners */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  /* Important: allow elements (slot machine) to render outside frame */
  overflow: visible;
  /* Trapezoid without skewing inner image: use clip-path */
  /* Stronger taper: increase inset on top-left and bottom-right */
  clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);
  margin-right: -6vh; /* tighter visual spacing by overlapping */
}
.work-trapezoids__item:last-child { margin-right: 0; }

/* Identical shape for all trapezoids */

.work-trapezoids__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.02) contrast(1.02);
  opacity: 0; /* hidden until its step starts */
  transition: opacity .22s ease; /* fade-in on step */
  background-color: bisque; /*fallback*/
  /* Apply trapezoid shape to the image itself, not the container */
  clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);
}

.work-trapezoids__item.is-active .work-trapezoids__img {
  opacity: 1;
}

/* Активная трапеция без серого фона и затемнения */
.work-trapezoids__item.is-active { background: transparent; }
.work-trapezoids__item.is-active .work-trapezoids__shade { display: none; }

.work-trapezoids__shade {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.08);
  /* Match image trapezoid shape so shade aligns */
  clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);
}

/* Dice slot reels under active trapezoid */
.work-dice-slots:not(.is-bonus){
  position: absolute;
  left: -10vh;
  transform: translateX(-3vh);
  right: 6vh;
  bottom: 0vh; /* sit outside trapezoid frame */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  pointer-events: none;
  z-index: 2;
  /* CSS переменная для gap между основным и bonus слотом */
  --bonus-slot-gap: 2vh;
}

/* For slots positioned by JS (is-outer), reset static positioning */
.work-dice-slots.is-outer:not(.is-bonus) {
  left: auto;
  right: auto;
  transform: translateX(-50%);
  width: auto;
}

/* When showing result, align to the right edge */
.work-dice-slots:not(.is-bonus).is-result {
  justify-content: flex-end;
}

/* Bonus slots: compact, positioned via JS */
.work-dice-slots.is-bonus {
  position: absolute;
  bottom: -8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  pointer-events: none;
  z-index: 3;
  --bonus-slot-gap: 2vh;
}

/* When showing result, align to the left edge */
.work-dice-slots.is-bonus.is-result {
  justify-content: flex-start;
}

.work-dice-slots.is-interactive { pointer-events: auto; }

/* Slot variants: wave (approach/retreat) and shake */
.work-dice-slots.slots--wave .work-dice-pill{
  animation: slotsWaveScale 1.8s ease-in-out infinite;
}
.work-dice-slots.slots--shake .work-dice-pill{
  animation: slotsShake 0.22s cubic-bezier(.36,.07,.19,.97) infinite;
}

/* Electric variant: short spark flashes */
.work-dice-slots.slots--electric .work-dice-pill{
  position: relative;
}
.work-dice-slots.is-interactive.is-spark .work-dice-pill,
.work-dice-slots.slots--electric.is-spark .work-dice-pill{
  filter: brightness(1.15) contrast(1.08);
  box-shadow: 0 0 1.2vh rgba(255,255,255,.85), 0 0 2.6vh rgba(255,255,255,.45) inset;
}
.work-dice-slots.slots--electric .work-dice-pill::after{
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .08s ease;
}
.work-dice-slots.slots--electric.is-spark .work-dice-pill::after{ opacity: 1; }

/* When two slot hosts are shown (e.g., doubled friction),
   offset the second one slightly downward for clarity */
.work-dice-slots.is-secondary:not(.is-bonus){
  /* Base secondary slots: center + shift down */
  transform: translate(-50%, 7vh) !important;
}

.work-dice-slots.is-secondary.is-bonus{
  /* Bonus secondary slots: vertical alignment handled in JS via reference pill */
  transform: none !important;
}

/* Stutter variant: dim and pulse frame during freeze */
.work-dice-slots.slots--stutter .work-dice-pill{ transition: filter .12s ease, transform .12s ease, box-shadow .12s ease; }
.work-dice-slots.slots--stutter.is-freeze .work-dice-pill{
  filter: brightness(0.85) saturate(0.9);
  transform: scale(0.98);
  box-shadow: 0 .3vh .8vh rgba(0,0,0,.35);
}

/* Advantage/Disadvantage visual hints */
/* Base type backgrounds */
.work-dice-slots.has-adv:not(.has-luck) .work-dice-pill{
  background: linear-gradient(180deg, #34d399, #10b981); /* green advantage */
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(16,185,129,.55) inset;
}
.work-dice-slots.has-dis:not(.has-luck) .work-dice-pill{
  background: linear-gradient(180deg, #fb7185, #ef4444); /* red disadvantage */
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(239,68,68,.55) inset;
}
.work-dice-slots.has-luck:not(.has-adv):not(.has-dis) .work-dice-pill{
  background: linear-gradient(180deg, #f5c563, #d4a335); /* golden luck */
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(212,163,53,.55) inset;
}

/* Combined types */
.work-dice-slots.has-adv.has-luck .work-dice-pill{
  background: linear-gradient(135deg,
    #34d399 0%,
    #10b981 40%,
    #f5c563 70%,
    #d4a335 100%
  ); /* green-gold */
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(212,163,53,.6) inset;
}
.work-dice-slots.has-dis.has-luck .work-dice-pill{
  background: linear-gradient(135deg,
    #fb7185 0%,
    #ef4444 40%,
    #f5c563 70%,
    #d4a335 100%
  ); /* red-gold */
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(212,163,53,.6) inset;
}
.work-dice-slots.is-adv .work-dice-pill{ filter: brightness(1.06) saturate(1.05); }
.work-dice-slots.is-adv-win .work-dice-pill{ box-shadow: 0 0 1.2vh rgba(48,198,102,.9), 0 0 2.2vh rgba(48,198,102,.45) inset; }
.work-dice-slots.is-dis .work-dice-pill{ filter: brightness(0.98) saturate(0.96); }
.work-dice-slots.is-dis-win .work-dice-pill{ box-shadow: 0 0 1.2vh rgba(239,68,68,.85), 0 0 2.2vh rgba(239,68,68,.4) inset; }

/* Lane appearance improvements */
.work-dice-lane {
  position: relative;
  transition: filter .28s ease, opacity .28s ease, transform .28s ease;
}

/* Winner lanes get enhanced visual */
.work-dice-lane.is-winner {
  animation: lane-highlight 600ms ease-out;
}

/* Individual zone winners (per die) */
.slot-die.is-zone-winner .slot-die__window {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 .8vh rgba(255, 255, 255, .4), 0 0 .8vh rgba(255, 255, 255, .5);
  border: .2vh solid rgba(255, 255, 255, .6);
}

/* Loser lanes get dimmed */
.work-dice-lane.is-loser {
  opacity: 0.65;
  filter: saturate(0.75) brightness(0.88);
}

/* Advantage winner - bright green */
.work-dice-lane.is-winner.is-winner-advantage {
  filter: brightness(1.12) saturate(1.15);
}

.work-dice-lane.is-winner.is-winner-advantage .slot-die__window {
  background: rgba(20, 224, 0, 0.1);
  box-shadow: inset 0 0 .8vh rgba(20, 224, 0, .6), 0 0 1.2vh rgba(20, 224, 0, .7);
}

/* Disadvantage winner - bright red */
.work-dice-lane.is-winner.is-winner-disadvantage {
  filter: brightness(1.12) saturate(1.15);
}

.work-dice-lane.is-winner.is-winner-disadvantage .slot-die__window {
  background: rgba(255, 0, 0, 0.1);
  box-shadow: inset 0 0 .8vh rgba(255, 0, 0, .6), 0 0 1.2vh rgba(255, 0, 0, .7);
}

@keyframes lane-highlight {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes slotsWaveScale{
  0%   { transform: scale(0.96); filter: brightness(1); }
  50%  { transform: scale(1.06); filter: brightness(1.06); }
  100% { transform: scale(0.96); filter: brightness(1); }
}

@keyframes slotsShake{
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  25% { transform: translate3d(.2vh, 0, 0) rotate(-.4deg); }
  50% { transform: translate3d(-.2vh, 0, 0) rotate(.4deg); }
  75% { transform: translate3d(.15vh, 0, 0) rotate(-.2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0); }
}

/* Pretty pink pill like mock */
.work-dice-pill{
  display:flex; align-items:center; gap: 2vh;
  background: linear-gradient(180deg, #ff8fd1, #ff5fba);
  border-radius: 1.2vh; padding: 1.2vh 1.8vh; box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25);
}
/* Special modes (advantage, disadvantage, luck) - keep horizontal layout */
.work-dice-slots.has-adv .work-dice-pill,
.work-dice-slots.has-dis .work-dice-pill,
.work-dice-slots.has-luck .work-dice-pill {
  /* Removed vertical layout - keep default horizontal */
  padding: 1.2vh 1.8vh;
}
/* Bonus слот-машина теперь позиционируется в JS относительно основной */
/* Reroll variant — green pill and reroll icon */
.work-dice-slots.is-reroll .work-dice-pill{
  background: linear-gradient(180deg, #34d399, #10b981);
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(16,185,129,.55) inset;
}
.work-dice-slots.is-reroll.is-red-reroll .work-dice-pill{
  background: linear-gradient(180deg, #fb7185, #e11d48);
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25), 0 0 0 .2vh rgba(225,29,72,.55) inset;
}
.work-dice-slots.is-reroll .work-dice-pill__icon{
  background-image: url('../images_of_glory/luna/icons-effects/reroll.svg');
}
.work-dice-slots.is-reroll .work-dice-pill__title{
  text-transform: uppercase;
}
.work-dice-pill__reels{ display:flex; align-items:center; gap:.8vh; }
.work-dice-pill__reels.has-dual-lanes{ display:flex; flex-direction:row; align-items:center; gap:1.2vh; }
.work-dice-lane{display:flex;align-items:center;gap:.8vh;padding: .2vh;border-radius: .6vh;transition: box-shadow .28s ease, filter .28s ease, background-color .28s ease;}
/* Zones for advantage/disadvantage - each zone is a horizontal pair of dice */
.work-dice-zone { display:flex; align-items:center; gap:.8vh; padding: .2vh; border-radius: .6vh; position: relative; }
.work-dice-zone + .work-dice-zone::before {
  content: '';
  position: absolute;
  left: -0.6vh;
  top: 50%;
  transform: translateY(-50%);
  width: .3vh;
  height: 6vh;
  background: rgba(255,255,255,.4);
}
/* In advantage/disadvantage mode, keep dice horizontal within each lane */
.work-dice-pill__reels.has-dual-lanes .work-dice-lane { flex-direction: row; }
.work-dice-lane.lane-a { order: 1; }
.work-dice-lane.lane-b { order: 3; }
.work-dice-lane.lane-c { order: 3; }
.work-dice-lane.lane-d { order: 3; }
.work-dice-lane.lane-e { order: 3; }
/* Vertical separator between lanes (old style, kept for compatibility) */
.work-dice-pill__reels.has-dual-lanes .lane-a::after {
  content: '';
  display: block;
  width: .3vh;
  height: 3vh;
  background: rgba(255,255,255,.4);
  margin: 0 1vh;
  order: 2;
}
.work-dice-lane + .work-dice-lane{ margin-left: 0; }
.work-dice-pill__label{ display:flex; align-items:center; gap:.8vh; color:#fff; font-weight:800; font-size:2.2vh; }
.work-dice-pill__title{ font-weight:800; font-size:2.2vh; margin-right:.6vh; }
.work-dice-pill__luck-badge{ 
  font-size: 2.2vh; 
  font-weight: 800; 
  color: #fff; 
  text-shadow: none;
}
.work-dice-pill__icon{ width: 2.6vh; height: 2.6vh; background: center/contain no-repeat url('../images_of_glory/luna/icons-effects/dice-default.png'); filter: drop-shadow(0 .2vh .3vh rgba(0,0,0,.25)); }
.work-dice-pill__variant{ font: 700 1.6vh/1.2 Avenir Next; padding:.2vh .6vh; border-radius:.4vh; background: rgba(0,0,0,.28); color:#fff; text-transform: uppercase; letter-spacing:.06em; }

/* Flat bonus badge shown after reels stop */
.work-flat-bonus{
  margin-left: 1.6vh;
  background: #ff5b5b;
  color: #fff;
  font-weight: 900;
  font-size: 2.2vh;
  line-height: 1;
  padding: 1.2vh 1.5vh;
  border-radius: .6vh;
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  transform: translateY(.4vh);
  opacity: 0;                 /* revealed via .is-visible */
}
.work-flat-bonus.is-visible{ opacity: 1; transform: translateY(0); }

/* Flat bonus badge that flies out from result */
.work-flat-bonus-flyout {
  position: fixed;
  background: #ff5b5b;
  color: #fff;
  font-weight: 900;
  font-size: 2.8vh;
  line-height: 1;
  padding: 1.2vh 1.5vh;
  border-radius: .6vh;
  box-shadow: 0 .6vh 1.8vh rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 30020; /* Above overlay and buttons */
  animation: flyOutBonus 2s ease-out forwards;
}

@keyframes flyOutBonus {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -10vh) scale(1.4);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -12vh) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -14vh) scale(0.9);
  }
}

/* Winner highlight: paint the active window area green like mock */
/* Winner styles split by mode */
.work-dice-lane.is-winner-advantage .slot-die__window,
.work-dice-lane.is-winner-advantage .wheel__window{
  background: #14e000;
  box-shadow: 0 0 .6vh rgba(0,0,0,.3) inset, 0 0 1.2vh rgba(20,224,0,.75);
  transition: background .18s ease, box-shadow .18s ease;
}
.work-dice-lane.is-winner-disadvantage .slot-die__window,
.work-dice-lane.is-winner-disadvantage .wheel__window{
  background: #ff0000; /* strict red for disadvantage */
  box-shadow: 0 0 .6vh rgba(0,0,0,.3) inset, 0 0 1.2vh rgba(255,0,0,.75);
}
/* Loser in disadvantage: dim and slightly desaturate */
.work-dice-slots.is-dis .work-dice-lane.is-loser .slot-die__window,
.work-dice-slots.is-dis .work-dice-lane.is-loser .wheel__window{
  background: rgba(0,0,0,.15);
  filter: saturate(.85) brightness(.92);
}
/* Winner lane styling */
.work-dice-lane.is-winner{ font-weight: 700; }
.work-dice-lane.is-loser{ opacity: .72; filter: saturate(.80); }

/* Slot machine result display - result styling is on pill */
.work-dice-pill.is-result {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5vh 2vh;
  min-width: auto;
  width: auto;
  background: linear-gradient(135deg, #ff8fd1, #ff5fba);
  border-radius: 1.2vh;
  box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.25);
  transition: all 0.3s ease;
}

.slot-result-text {
  font-size: 2.2vh;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0.2vh 0.4vh rgba(0,0,0,.4);
  white-space: nowrap;
  letter-spacing: 0.05em;
}

/* .roll-bubble removed - visual effect disabled */

/* === Penis glow effect === */
.hole-occupant-bg.penis-glow {
  animation: penisPulse 1.6s ease-in-out infinite;
  filter: brightness(1.3);
}

@keyframes penisPulse {
  0%   { filter: brightness(1);   }
  50%  { filter: brightness(1.6); }
  100% { filter: brightness(1);   }
}
.work-overlay-active .work-button { z-index: 20060; pointer-events: none; }

/* When reused as in-overlay Next, allow clicks and bring above overlay */
.work-button.as-next { pointer-events: auto; z-index: 20080; }
.work-button.as-next.is-next-ready { cursor: pointer; }

/* Reuse button as Next: stop sweep, show pink highlight */
.work-button.as-next {
  /* ensure it's interactable above overlay */
  cursor: pointer;
}
.work-button.as-next.is-next-ready{
  /* static pink glow between base and text layers */
  background-image:
    url("../images_of_glory/interface/continue_button_text_layer.svg"),
    linear-gradient(0deg, rgba(213, 77, 240, .38), rgba(213, 77, 240, .38)),
    url("../images_of_glory/interface/continue_button.svg");
  background-size: contain, 100% 100%, contain;
  background-position: center, center, center;
  background-blend-mode: normal, screen, normal;
  /* stop moving sweep; keep subtle pulse only */
  animation: workPulse 900ms ease-in-out infinite !important;
}


/* ===== static/css/auras.css ===== */
.aura-badges {
  position: absolute;
  top: 28vh;
  right: -0.7vh;
  display: flex;
  gap: 0.5vh;
  flex-wrap: wrap;
  z-index: 30;
}

.aura-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5vh;
  height: 3.5vh;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  margin: 0.7vh;
}

.aura-badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Halo for upgraded auras */
.aura-badge.is-upgraded {
  position: relative;
}
.aura-badge.is-upgraded::before{
  content: '';
  position: absolute;
  inset: -0.35vh;
  border-radius: 50%;
  box-shadow:
    0 0 0 0.17vh rgba(255, 214, 102, .9),
    0 0 0.9vh 0.25vh rgba(255, 196, 0, .65),
    0 0 1.6vh 0.5vh rgba(255, 140, 0, .35);
  pointer-events: none;
}

/* legacy text styles kept in case something still uses them */
.aura-badge__title { display:none; }
.aura-badge__ttl   { display:none; }

/* === Aura Inspect Overlay content fixes ===
   Ensure generic card-inspect styles don't reposition/hide our simple text panel. */
.aura-overlay-panel .card-inspect-info{
  position: static; /* reset absolute from cards.css */
  left: auto; top: auto; margin: 0;
  background: transparent; /* panel already has a background */
  border: 0; box-shadow: none; border-radius: 0; padding: 0;
  width: auto; color: inherit; font-size: 2.2vh; line-height: 1.4;
}
.aura-overlay-panel .card-inspect-info h3{ margin: 0 0 1.2vh; font-size: 2.6vh; line-height: 1.2; }
.aura-overlay-panel .card-inspect-info .meta{ opacity: .95; font-size: 2.1vh; }

/* Header icon inside aura overlay title */
.aura-overlay-panel .aura-header-icon{
  width: 2.6vh;
  height: 2.6vh;
  object-fit: contain;
  vertical-align: middle;
  margin-right: .8vh;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.aura-overlay-panel .aura-header-title{ vertical-align: middle; }
.aura-overlay-panel .aura-header-ttl{ vertical-align: middle; margin-left: .8vh; }

/* === Aura Cooldown/Charges Counter === */
.aura-counter {
  position: absolute;
  bottom: -3.5vh;
  right: 0.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  z-index: 10;
}

.aura-counter-icon {
  object-fit: contain;
  flex-shrink: 0;
}

/* Разные параметры для разных типов иконок */
.aura-counter-icon[data-counter-icon-type="reroll"] {
  width: 2.5vh;
  height: 2.5vh;
  margin-right: 0.6vh;
}

.aura-counter-icon[data-counter-icon-type="cooldown"] {
  width: 3vh;
  height: 3vh;
}

.aura-counter-text {
  font-size: 2vh;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}


/* ===== static/css/card_inspect_views.css ===== */
.civ {
    position: relative;
    color: #fff;
}


.civ-card__title {
    display: none;
}

.civ__body {
    display: flex;
    /* gap: 2vh; */
    align-items: flex-start;
}

.civ-card {
    position: relative;
    width: 18vh;
    height: 24vh;
    border-radius: 1.2vh;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.civ-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /*fallback:*/
    background-color: bisque;
    /*for alt-text:*/
    color: black;
    font-size: 1.5em;
}

.civ-card__tag {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -2.6vh;
    background: #F07E4D;
    color: #fff;
    padding: .7vh 1.4vh;
    border-radius: 1.4vh;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.civ-card__tag--friction {
    background: #D54DF0;
}

.civ__right {
    background: #5C5C8F;
    border-radius: 1.6vh;
    /* box-shadow: 0 8px 20px rgba(0,0,0,.35); */
    /* padding: 2.4vh; */
    position: relative;
    min-width: 47vh;
    max-width: 81vh;
    min-height: 15vh;
    overflow: visible;
    /* Space reserved for the top badge that protrudes above the container */
    padding-top: 2.5vh;
}

.civ-pill {
    display: inline-block;
    background: #ea7b3c;
    color: #fff;
    font-weight: 600;
    padding: 1vh 2vh;
    border-radius: 3vh;
    margin: -4.2vh auto 1.4vh;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* box-shadow:0 4px 14px rgba(0,0,0,.25); */
}

.civ-pill--type {
    background: #F07E4D;
    display: inline-flex;
    /* Enforce explicit distances via margins (no reliance on flex gap). */
    gap: 0;
    align-items: center;
    font-size: 2vh;
    /* Use absolute positioning instead of negative margin for reliable
       protrusion above .civ__right at all viewport sizes */
    position: absolute;
    top: -2vh;
    margin-top: 0;
    gap: 0.6vh;
}

.civ-rect--type {
    background: #D54DF0;
    display: inline-flex;
    /* Enforce explicit distances via margins (no reliance on flex gap). */
    align-items: center;
    font-size: 2vh;
    /* Use absolute positioning instead of negative margin for reliable
       protrusion above .civ__right at all viewport sizes */
    position: absolute;
    top: -2.5vh;
    margin-top: 0;
    border-radius: 0.3vh;
    gap: 0.6vh;
}

.civ-type-label {
    margin-right: 0.6vh;
    font-weight: 700;
}
.civ-pill--type.civ-pill--junk .civ-type-label {
    margin-right: 0;
}

/* Type-specific modifiers for the top tag in inspect description */
.civ-pill--type.civ-pill--friction { background: #D54DF0; border-radius: .8vh; }
.civ-pill--type.civ-pill--effect   { background: #F07E4D; }
.civ-pill--type.civ-pill--junk     { background: #8B9BBF; }

.civ-box {
    background: rgba(255,255,255,.06);
    border-radius: 1vh;
    padding: 1.2vh;
    margin: .8vh 0;
}

.civ-invisible-box {
    margin-top: 3vh;
    margin-bottom: 6vh;
    padding: 0.5vh;
    /* Center the box itself without affecting text alignment */
    margin-left: auto;
    margin-right: auto;
    width: max-content; /* shrink-wrap to content so centering is precise */
    text-align: left;   /* keep text left-aligned inside */
}

.civ-row {
    display: flex;
    align-items: center;
    gap: 1vh;
    padding: 0vh 3vh;
}

.civ-row__icon {
    font-size: 2.2vh;
}

.civ-row__content {
    font-size: 2.3vh;
}

.civ-link {
    color: #FFAC33;
    text-decoration: underline;
    cursor: pointer;
    /* margin-right: 0.5vh; */
}


/* Inspect inline hint popup */
.civ-hint{
    position: relative; /* participates in panel flow */
    background:#5C5C8F;
    color:#fff;
    border-radius: 1.6vh;
    width: 0vh;
    margin-left: 0vh;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    box-sizing: border-box;
    overflow: hidden;
    height: max-content;
    opacity: 0;
    transition-property: width, opacity, margin-left;
    /* максимально плавно: чуть длиннее ширина, мягкий фейд */
    transition-duration: 420ms, 280ms, 420ms;
    /* Material-like smooth curve for both directions */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
}
.civ-hint.is-open{opacity: 1;width: 38vh;transition-delay: 0ms, 440ms, 0ms;margin-left: 5vh;height: max-content;}
/* Swap mode: keep current width/margin, but remove delays for opacity and allow fade-only */
.civ-hint.is-open.swap-mode { transition-delay: 0ms, 0ms, 0ms; }
.civ-hint.is-open.swap-mode.is-faded { opacity: 0; }
.civ-hint__title{font-weight:800;font-size:2.4vh;margin-bottom: 1vh;display:flex;align-items:center;gap:1vh;width: 26vh;padding: 2vh 2vh 0vh;}
/* Title word styling (e.g., "Next") */
.civ-hint__title span{color:#FFAC33;font-weight: 600;text-decoration:none;}
.civ-hint__content{font-size:2vh;line-height:2.8vh;opacity:.95;min-width: 21vh;padding: 1vh 2vh;}
.civ-hint__content p{ margin: 0 0 1.2vh 0; }

.civ-pill--die {
    background: #6366f1;
    border-radius: .8vh;
    padding: 1vh 1vh 0.8vh 1vh;
    display: inline-flex;
    align-items: center;
    gap: .6vh;
}

/* Plain bonus badge (e.g., +X) shown next to dice */
.civ-pill--buff {
    background: #6366f1;
    border-radius: .8vh;
    padding: 1.3vh 1.1vh 1.3vh 1.1vh;
    display: inline-flex;
    align-items: center;
}

.civ-note {
    font-size: 2vh;
    text-align: center;
    margin-bottom: 5vh;
}

.civ-bottom-tag {
    display: none;
}

.civ-bottom-suit {
    display: inline-flex;
    align-items: center;
    gap: 1.2vh;
    color: #fff;
    padding: 1.1vh 2.2vh;
    border-radius: 4vh;
    font-weight: 700;
    margin-top: -2.5vh;
    font-size: 2vh;
    width: max-content;
    /* box-shadow:0 4px 14px rgba(0,0,0,.25); */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* bottom:-1.6vh; */
}

/* Variants: Friction vs Effects */
/* Friction: square corners */
.civ__right:has(.civ-rect--type) .civ-bottom-suit { border-radius: 0; }
/* Effects: rounded (explicit for clarity; matches default) */
.civ__right:has(.civ-pill--type) .civ-bottom-suit { border-radius: 4vh; }

/* shared placeholders */
.ph-rect {
    display: inline-block;
    background: rgba(255,255,255,.65);
    border-radius: .3vh;
}

.ph-rect--small {
    width: 1.9vh;
    height: 1.2vh;
}

.ph-rect--tiny {
    width: 1.2vh;
    height: 1.2vh;
    border-radius: .4vh;
}

.civ-bottom-suit .ph-rect--tiny  {
    width: 3vh;
    height: 3vh;
    border-radius: .4vh;
}


.civ-pill .ph-rect--small {
    width: 3vh;
    height: 3vh;
}

.civ-card-name {
    font-weight:600;
}

.civ-effect-text {
    font-weight:700;
}

.card-inspect-clone  .ph-rect--small {
    width: 2vh;
    height: 2vh;
}

.icon-next-helper {
    display: inline-block;
    width: 1.9vh;
    height: 1.2vh;
    object-fit: contain;
    vertical-align: middle;
}

.civ-hint.is-closing {
  opacity: 0;
  /* закрытие: сначала прячем (opacity 280ms), затем (с запасом) сужаем ширину и двигаем */
  /* порядок соответствует transition-property: width, opacity, margin-left */
  transition-delay: 300ms, 0ms, 300ms;
}

/* utility sizes for real icons in inspect views */
.civ-icon-effect {width: 2.6vh;height: 2.6vh;vertical-align: middle;object-fit: contain;display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:center;}
.civ-icon-next   {width: 3vh;height: 3vh;vertical-align: middle;margin-right: 0.5vh;/* margin-left: 0.5vh; */background-size: contain;}
.civ-icon-suit   { width: 3vh;  height: 3vh;  vertical-align: middle; object-fit: contain; display:inline-block; background-repeat:no-repeat; background-size:contain; background-position:center; }
.civ-badge-text  {font-weight: 700;font-size: 2vh;line-height: 1;vertical-align: middle;}

/* Spacing: 2vh between label and icon; 1vh between icon and text */
.civ-pill--type .civ-type-label {/* margin-right: 1.2vh; */display:inline-block;font-weight: 700;}
.civ-pill--type .civ-icon-effect {}
.civ-pill--type .civ-effect-text, .civ-pill--type .civ-badge-text {}

.civ-visible-box {
    margin-top: 2vh;
    margin-bottom: 6vh;
    padding: 0.5vh;
    background-color: #00000027;
    padding: 3vh;
    width: max-content;
}

/* Icon assets (CSS-only) */
.civ-icon-effect.civ-icon--die{background-image:url('../images_of_glory/luna/icons-effects/dice-default.png');margin-bottom: 0.2vh;}
/* Luck icon for inspect pills/rows */
.civ-icon-effect.civ-icon--luck{background-image:url('../images_of_glory/luna/icons-effects/luck.svg');}

/* Suit icons for inspect view */
.civ-icon-suit.civ-suit--suitless{ background-image:url('../images_of_glory/luna/icons-suits/suitless.svg'); }
.civ-icon-suit.civ-suit--handjob { background-image:url('../images_of_glory/luna/icons-suits/handjob.svg'); }
.civ-icon-suit.civ-suit--blowjob { background-image:url('../images_of_glory/luna/icons-suits/blowjob.svg'); }
.civ-icon-suit.civ-suit--titjob  { background-image:url('../images_of_glory/luna/icons-suits/titjob.svg'); }
.civ-icon-suit.civ-suit--vaginal { background-image:url('../images_of_glory/luna/icons-suits/vaginal.svg'); }
.civ-icon-suit.civ-suit--anal    { background-image:url('../images_of_glory/luna/icons-suits/anal.svg'); }


.civ-icon-effect.is-wide { width: 2.8vh; height: 2.8vh; }

/* ---- Mini Slot Machine (dice reel) ---- */
.slot-die {
  display: inline-block;
  width: 4.2vh;
  height: 3.2vh;
  margin: 0 .5vh;
  perspective: 60vh;
}
.slot-die__window{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .5vh;
  background: rgba(14, 14, 24, 0.6); /* dark semi-transparent background */
  backdrop-filter: blur(8px); /* glass blur effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
  box-shadow: inset 0 0 .6vh rgba(0,0,0,.5), 0 .2vh .5vh rgba(0,0,0,.3);
  border: .15vh solid rgba(255,255,255,.12);
  transform: rotateX(12deg) skewX(-6deg);
}
.slot-die__reel{
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  will-change: transform;
}
.slot-die__face{
  height: 3.2vh; line-height: 3.2vh; text-align:center;
  color:#ffffff; font-weight:900; font-size: 2.2vh; font-family: Avenir Next;
  text-shadow: 0 .2vh 0 rgba(0,0,0,.35);
}
.slot-die__face--best{
  color: #fde68a; /* warm gold */
  text-shadow: 0 .25vh .4vh rgba(0,0,0,.55), 0 0 1.1vh rgba(253,230,138,.65);
}
.slot-die__shine{
  content:''; 
  position: absolute; 
  inset: 0; 
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.14) 60%, rgba(255,255,255,0) 100%);
  mix-blend-mode: overlay; 
  opacity: .6;
}
.slot-die--stop .slot-die__window{ transform: rotateX(6deg) skewX(-3deg); transition: transform .28s ease; }

/* subtle bounce when stopping */
@keyframes slot-bounce {
  0%{ transform: translateY(var(--start,0)); }
  80%{ transform: translateY(calc(var(--end,0) + .6vh)); }
  100%{ transform: translateY(var(--end,0)); }
}

/* Luck styling moved to container level - no individual dice effects */

.pose_title {
    color: #FF56CC;
}

.civ-quick-box {
    margin-top: 2vh;
    margin-bottom: 3vh;
}

.civ-semibold {
    font-weight: 700;
}

.civ-badge-text-bonus {
    font-weight: 700;
    font-size: 2vh;
    line-height: 1;
    vertical-align: middle;
    background: #ff5b6b;
    border-radius: .8vh;
    padding: 1.3vh 1vh 1.3vh 1vh;
    display: inline-flex;
    align-items: center;
    gap: .6vh;
}


/* ===== static/css/levelupv3.css ===== */
/* Level Up modal styling */

#levelup-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 30060;
  align-items: flex-start;
  justify-content: center;
  backdrop-filter: blur(8px); /* increased glass blur effect */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}

/* Inner container for modal content */
.lu-container {
  margin-top: 9vh;
}

#levelup-choices.lu-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(18vh, 1fr));
  gap: 4vh;
  align-items: start;
  justify-items: center;
  margin-bottom: 0;
}

.lu-card {
  background: #5C5C8F;
  border-radius: 1.6vh;
  width: 43vh;
  box-shadow: 0 1.6vh 3.6vh rgba(0,0,0,.45);
  color: #e9e6ff;
  /* overflow: hidden; */
  height: 76vh;
  position: relative;          /* anchor footer */
  /* padding-bottom: 10vh; */        /* space for pinned footer */
}

/* ====================================
   Level-Up: Sync with hand card styles
   ==================================== */

/* Main container for level-up cards with hand-sized card previews */
.lu-container {
  --card-context: hand;
}

/* Mini cards in level-up should use hand sizing, same as in hand */
.lu-mini-cards .card-mini {
  width: var(--card-w-hand);
  height: var(--card-h-hand);
}

.lu-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2vh 1.6vh;
  gap: 1vh;
  /* background: #5C5C8F; */
  font-weight: 600;
  font-size: 2.5vh;
  border-bottom: 1px solid rgba(233,230,255,.12);
}

/* Badge styling - sync with .card-mini__tag from cards.css */
.lu-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,#FF5493,#FE5053);
  color: #fff;
  border-radius: 0.3vh;
  padding: 0.6vh 1.1vh;
  font-size: 1.7vh;
  font-weight: 600;
  /* box-shadow: 0 .2vh .6vh rgba(255,105,150,.35); */
  white-space: nowrap;
}

/* Friction badge - sharp corners like friction cards */
.lu-badge.cm-friction {
  border-radius: 0.2vh;
}

/* Effect badge - rounded like effect cards */
.lu-badge.cm-effect {
  border-radius: 2vh;
}

.lu-title {
  font-weight: 600;
  font-size: 2vh;
  line-height: 3.3vh;
  color: white;
}

/* Hide base card hint row in level-up pose cards only */
.lu-card--pose .civ-invisible-box {
  display: none;
}

.lu-body {
  /* padding: 1.8vh 2vh 1.4vh; */
  /* border-bottom: 1px solid rgba(233,230,255,.12); */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5vh;
}
.lu-body p {margin: 0 0 1.2vh;opacity: .95;font-size: 1.5vh;width: 26vh;text-align: center;}

/* Pose card specific: different margin for pose description block */
.lu-card--pose .lu-body {
  margin-top: 3vh;
}

.lu-card-hero {display:flex;flex-direction:column;align-items:center;gap:1.2vh;margin-bottom: 2.6vh;}
.lu-card-hero img {
  /* width: 10vh; */
  /* height: 10vh; */
  /* border-radius: .8vh; */
  /* object-fit: cover; */
  /* box-shadow: 0 .6vh 1.6vh rgba(0,0,0,.3); */
  display: block;
}
.lu-tag { background:#6a7ad6; color:#fff; border-radius:.8vh; padding:.2vh .8vh; font-size:1.2vh; font-weight:800; display:inline-block; }
.lu-pose-info {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.8vh;
  margin-bottom: 1vh;
}

.lu-pose-line {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8vh;
  font-weight: 800;
  font-size: 3vh;
  letter-spacing:.02em;
  background: #22222227;
  color:#fff;
  padding: 1.7vh 2.4vh;
  border-radius:1.2vh;
}

.lu-mini-cards {display:flex;gap:1.4vh;justify-content:center;margin-top: 2vh;margin-bottom: 2vh;}
.lu-mini { position:relative; width: var(--card-w-hand); height: var(--card-h-hand); }
.lu-mini .card-mini { 
  width: var(--card-w-hand); 
  height: var(--card-h-hand);
  border-radius: 1.6vh;
}
.lu-mini .card-mini.cm-effect { border-radius: 1.6vh; }
.lu-mini .card-mini.cm-friction { border-radius: 0.5vh; }

/* Title styling in level-up mini cards (same as hand) */
.lu-mini .card-mini .card-mini__title {
  padding: 0.9vh 1.1vh;
  font-size: 1.35vh;
  border-radius: 0 0 1.4vh 1.4vh;
}
.lu-mini .card-mini.cm-friction .card-mini__title { border-radius: 0 0 0.3vh 0.3vh; }
.lu-mini .card-mini.cm-effect .card-mini__title { border-radius: 0 0 1.4vh 1.4vh; }

/* Badge styling in level-up mini cards */
.lu-mini .card-mini .card-mini__tag {
  padding: 0.6vh 1.1vh;
  font-size: 1.35vh;
  border-radius: 0.9vh;
}
.lu-mini .card-mini.cm-effect .card-mini__tag { border-radius: 2vh; }
.lu-mini .card-mini.cm-friction .card-mini__tag { border-radius: 0.2vh; }

/* Icon sizing in level-up mini cards (same as hand) */
.lu-mini .card-mini .cm-icon-tag,
.lu-mini .card-mini .cm-icon-tag.is-wide {
  width: 2vh;
  height: 2vh;
  margin-bottom: 0.2vh;
}
.lu-mini .card-mini .cm-icon-tag.is-wide { width: 2.5vh; height: 2.5vh; }
.lu-mini .card-mini .cm-icon-suit { width: 1.6vh; height: 1.6vh; }
.lu-mini .card-mini .cm-badge-text { font-size: 1.3vh; }

/* Badge element styling inside mini cards */
.lu-mini .card-mini .cm-badge {
  display: flex;
  align-items: center;
  gap: 0.4vh;
}
.lu-mini .card-mini .cm-badge--effect { border-radius: 1.4vh; }
.lu-mini .card-mini .cm-badge--friction { border-radius: 0.2vh; }

/* Type label and tail styling for badges */
.lu-mini .card-mini__tag .cm-type-label {
  display: inline-block;
  font-weight: 700;
  margin-right: 0.6vh;
}
.lu-mini .card-mini__tag .cm-type-tail {
  display: inline-flex;
  align-items: center;
  gap: 0.4vh;
}

/* Handle wide tags in level-up mini cards */
.lu-mini .card-mini.has-wide-tag .card-mini__tag { 
  padding-top: 0.35vh; 
  padding-bottom: 0.35vh; 
}

/* ===== LevelUp Mini Cards: Type-Specific Styling (Effect vs Friction) ===== */

/* Friction mini cards in level-up */
.lu-mini .card-mini.cm-friction {
  border-radius: 0.5vh;
}
.lu-mini .card-mini.cm-friction .card-mini__title {
  border-radius: 0 0 0.3vh 0.3vh;
}
.lu-mini .card-mini.cm-friction .card-mini__tag {
  border-radius: 0.2vh;
  font-size: 1.35vh;
  font-weight: 700;
}

/* Effect mini cards in level-up */
.lu-mini .card-mini.cm-effect {
  border-radius: 1.6vh;
}
.lu-mini .card-mini.cm-effect .card-mini__title {
  border-radius: 0 0 1.4vh 1.4vh;
}
.lu-mini .card-mini.cm-effect .card-mini__tag {
  border-radius: 2vh;
  font-size: 1.35vh;
  font-weight: 700;
}

/* On narrow screens, slightly scale mini-cards to fit */
@media (max-width: 1100px){
  .lu-mini { transform: scale(.86); transform-origin: top center; }
}

/* Upgrade visual - scoped per context */
/* Level Up modal preview - sync with hand card styling */
.lu-mini .card-mini.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35);
}
/* Card in hand - same as level-up mini for consistency */
.cards-hand .card-mini.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35);
}
/* Card in reserve (deck view) */
.cards-reserve .card-mini.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35);
}
/* Inspect clone: keep upgrade ring + elevated shadow */
.card-inspect-clone.card-mini.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35), var(--shadow-elevated);
}
/* Client slot: show upgrade ring */
.card-mini.card-in-slot.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 .8vh 1vh rgba(255,91,107,.35);
}
/* Freeze slot: show upgrade ring (separate selector) */
.freeze-slot .card-mini.lu-upgraded,
.card-mini.card-in-freeze.lu-upgraded { 
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 .8vh 1vh rgba(255,91,107,.35);
}
/* Style the upgrade plus only for cards in hand to avoid bleeding into inspect */
.cards-hand .lu-plus-corner{position:absolute;right: -0.4vh;top: 2.6vh;background:#ff5b6b;color:#fff;font-weight:900;font-size: 2.5vh;border-radius: 0.5vh 0vh 0vh 0.5vh;padding: 0.5vh 0.5vh;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);} 
/* Reserve (deck view) plus marker - same as hand */
.cards-reserve .lu-plus-corner{position:absolute;right: -0.4vh;top: 2.6vh;background:#ff5b6b;color:#fff;font-weight:900;font-size: 2.5vh;border-radius: 0.5vh 0vh 0vh 0.5vh;padding: 0.5vh 0.5vh;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);} 
/* Inspect clone keeps its original plus mark (not affected by hand restyle) */
.card-inspect-clone .lu-plus-corner{position:absolute;right: -0.4vh;top: 3.6vh;background:#ff5b6b;color:#fff;font-weight:900;font-size: 3vh;border-radius: 0.5vh 0 0 0.5vh;padding:1.1vh 1vh;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);} 
/* LevelUp modal mini previews also show plus - sync with hand card styling */
.lu-mini .lu-plus-corner{
  position: absolute;
  right: -0.4vh;
  top: 2.6vh;
  background: #ff5b6b;
  color: #fff;
  font-weight: 900;
  font-size: 2.5vh;
  border-radius: 0.5vh 0 0 0.5vh;
  padding: 0.5vh 0.5vh;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
} 
/* Client slot: compact plus marker */
.card-in-slot .lu-plus-corner{position:absolute;right:-0.3vh;top:1.6vh;background:#ff5b6b;color:#fff;font-weight:900;font-size:2vh;border-radius: 0.5vh 0 0 0.5vh;padding:.6vh .6vh;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);} 
/* Freeze slot: compact plus marker */
.card-in-freeze .lu-plus-corner,
.freeze-slot .card-mini .lu-plus-corner{position:absolute;right:-0.3vh;top:1.6vh;background:#ff5b6b;color:#fff;font-weight:900;font-size:2vh;border-radius: 0.5vh 0 0 0.5vh;padding:.6vh .6vh;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);} 

.lu-choose {
  margin: 0;
  /* Fill the footer content width so left/right padding stays equal */
  width: 100%;
  display: block;
  padding: 1.4vh 2.2vh;
  border: none;
  border-radius: 0.5vh;
  background: linear-gradient(90deg, #FF56CC 0%, #FF5053 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.9vh;
  cursor: pointer;
  box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.12), 0 .4vh 1.6vh rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.lu-choose:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

.lu-choose:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

/* Footer that pins the choose button to the card bottom - sync with hand card styling */
.lu-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6vh 2vh 1.8vh;
  border-top: 1px solid rgba(233,230,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.10) 100%);
  box-sizing: border-box;
  border-radius: 0 0 1.6vh 1.6vh;
}

.lu-box { background:#3a3663; border-radius:.9vh; padding:1vh; margin:.8vh 0; }
.lu-row { display:flex; align-items:center; gap:.8vh; }
.lu-die { background:#e9e6ff; color:#2c2950; font-weight:900; padding:.2vh .6vh; border-radius:.6vh; min-width:3.6vh; text-align:center; }
.lu-plus { background:#ff5b6b; color:#fff; font-weight:900; padding:.2vh .6vh; border-radius:.6vh; }


.lu-note { opacity:.8; font-size:1.4vh; margin:.6vh 0 0; }

.lu-header{
  text-align: center;
  color: #fff;
  margin-bottom: 2vh;
  background: #5c5c90;
  padding: 1.5vh 1vh;
  width: 14vh;
  margin: auto;
  border-radius: 1vh;
  margin-bottom: 2vh;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.lu-header > div:first-child{
  font-weight: 700;
  font-size: 2.5vh;
}
.lu-header > div:nth-child(2){ 
  font-size: 1.8vh; 
  opacity: .9; 
}
.lu-actions{ text-align:center; margin-top:2vh; }
.lu-close{padding:1vh 2vh;font-weight:700;background:#876ac7;color:#fff;border:none;border-radius:.8vh;cursor:pointer;display: none;}

/* Keep upgrade ring visible when inspecting a hand card */
.cards-hand .hand-slot.is-inspected .card-mini.lu-upgraded,
.cards-hand .hand-slot .card-mini.is-inspected.lu-upgraded {
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35), var(--shadow-inspect) !important;
}
/* Keep upgrade ring visible when inspecting a freeze card */
.freeze-slot.is-inspected .card-mini.lu-upgraded,
.freeze-slot .card-mini.is-inspected.lu-upgraded{
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 .8vh 1vh rgba(255,91,107,.35), var(--shadow-inspect) !important;
}

/* === Adapt Card Inspect templates inside LevelUp ===
   We reuse ready-made inspect templates as-is, but when they appear in
   LevelUp we want only the description and we want it to fit the LevelUp
   card column. These overrides are scoped to `.lu-inspect-content` so
   the original inspect modal remains unchanged. */

/* Layout: center the description block and let it span the column */
.lu-body .lu-inspect-content {
  /* center the description */
  color: inherit;
}
.lu-body .lu-inspect-content .civ {
  display: contents;
}
.lu-body .lu-inspect-content .civ__body {justify-content: center;padding: 0;}
.lu-body .lu-inspect-content .civ__right {
  
  
   /* remove large intrinsic min width from templates */
  min-height: max-content;
  /* margin-left: auto; */   /* ensure the right pane itself is centered */
  margin-right: auto;
  padding: 0;
  min-width: max-content;
}

/* In LevelUp, hide the left preview column to center description */
.lu-body .lu-inspect-content .civ__body > :not(.civ__right) {
  display: none !important;
}

/* Fit inner content boxes to container (no intrinsic max-content width) */
.lu-body .lu-inspect-content .civ-invisible-box {
  /* max-width: 41vh; */               /* fixed column width for description */
  /* padding: 0 3vh; */            /* horizontal breathing room */
  box-sizing: border-box;    /* keep padding inside the width */
  /* margin-left: auto; */         /* center the block */
  /* margin-right: auto; */
  /* margin: 0; */
  /* margin-top: 1vh; */
  /* margin-bottom: 2vh; */
            /* keep text left-aligned inside */
  /* width: max-content; */
  margin-top: 0;
  width: max-content;
  line-height: 3vh;
  max-width: 36vh;
}

/* Hide badges not needed in LevelUp (keep dice/buff badges intact) */
.lu-body .lu-inspect-content .civ-pill--type,
.lu-body .lu-inspect-content .civ-rect--type,
.lu-body .lu-inspect-content .civ-bottom-suit,
.lu-body .lu-inspect-content .civ-card__tag,
.lu-body .lu-inspect-content .civ-bottom-tag {
  display: none !important;
}

.lu-body .civ-row__content {
    font-size: 1.7vh;
}

/* In LevelUp, keep the info block centered but align text left */
.lu-body .lu-inspect-content,
.lu-body .lu-inspect-content .civ-row,
.lu-body .lu-inspect-content .civ-row__content {
  text-align: left;
}

/* Paragraphs inside LevelUp inspect should shrink to content and be centered as a block,
   but their text remains left-aligned. This overrides `.lu-body p` defaults. */
.lu-body .lu-inspect-content p { width: auto; margin: 0 0 1.2vh; text-align: left; }

.lu-body .civ-pill--die {
    padding:0.5vh;
}

.lu-body .civ-badge-text {
  font-size: 1.5vh;
}

.lu-body br {
  display:none;
}

/* Rows should span the full inner width of the centered column
   so the text aligns to the left edge of that column. */
.lu-body .civ-row {/* width: 100%; *//* margin: 0; */padding: 0;}

.lu-body .civ-visible-box {
    margin-top: 2vh;
    margin-bottom: 2vh;
    /* padding: 0.5vh; */
    background-color: #00000000;
    padding: 0;
    padding-top: 2vh;
    padding-bottom: 2vh;
    width: max-content;
    margin: auto;
    /* width: 41vh; */
}

/* In LevelUp, merge consecutive civ-rows into one block
   This keeps Aura/description lines together as a single paragraph
   without changing the original inspect templates elsewhere. */
/* Inside the invisible box, rows also take full width */
.lu-body .lu-inspect-content .civ-invisible-box .civ-row {width: 100%;margin: auto;margin-left: auto;margin-right: auto;}
.lu-body .lu-inspect-content .civ-invisible-box .civ-row__content { display: block; }

.lu-body .civ-note {
    font-size: 1.7vh;
    margin: 3vh;
}

.lu-body .civ-quick-box {
    margin-top: 1vh;
    margin-bottom: 2vh;
    margin-left: 5vh;
}

.lu-body .civ-additional-container {
  background-color: #00000027;
  width: 43vh;
}

.lu-body .civ-badge-text-bonus {
    font-weight: 700;
    font-size: 1.7vh;
    line-height: 1;
    vertical-align: middle;
    background: #ff5b6b;
    border-radius: .8vh;
    padding: 1vh 0.5vh;
    display: inline-flex;
    align-items: center;
    gap: .6vh;
}

.lu-body .civ-pill--buff {
    background: #6366f1;
    border-radius: .8vh;
    padding: 1vh 0.8vh;
    display: inline-flex;
    align-items: center;
}

/* Pose icon styling in LevelUp */
.lu-pose-icon {
  width: 4.8vh;
  height: 4.8vh;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Make hint links and dice elements clickable in level-up modal */
#levelup-modal .civ-link,
#levelup-modal .civ-pill--die,
#levelup-modal .civ-icon--die {
  cursor: pointer;
}

#levelup-modal .civ-link:hover {
  text-decoration-thickness: 2px;
}

#levelup-modal .civ-pill--die:hover,
#levelup-modal .civ-icon--die:hover {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

/* ====================================
   Hint Overlay for Level Up Modal
   ==================================== */

#levelup-hint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 30065; /* Above levelup-modal (30060) */
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

#levelup-hint-content {
  background: #5C5C8F;
  border-radius: 1.6vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  width: 38vh; /* Same as .civ-hint.is-open */
  max-height: 80vh;
  overflow-y: auto;
  cursor: default;
  color: #fff;
}

/* Hint title styling inside overlay */
#levelup-hint-content .civ-hint__title {
  font-weight: 800;
  font-size: 2.4vh;
  margin-bottom: 1vh;
  display: flex;
  align-items: center;
  gap: 1vh;
  width: 26vh; /* Same as .civ-hint__title */
  padding: 2vh 2vh 0vh;
}

#levelup-hint-content .civ-hint__title span {
  color: #FFAC33;
  font-weight: 600;
  text-decoration: none;
}

#levelup-hint-content .civ-hint__title img {
  width: 3vh;
  height: 3vh;
}

/* Hint content styling inside overlay */
#levelup-hint-content .civ-hint__content {
  font-size: 2vh;
  line-height: 2.8vh;
  opacity: 0.95;
  min-width: 21vh; /* Same as .civ-hint__content */
  padding: 1vh 2vh 2vh;
}

#levelup-hint-content .civ-hint__content p {
  margin: 0 0 1.2vh 0;
}

#levelup-hint-content .civ-semibold {
  font-weight: 700;
}


/* ===== static/css/day_endv2.css ===== */
/* ==========================================================================
   DAY END MODAL - SIMPLIFIED SINGLE COLUMN DESIGN
   Matching the reference screenshot with centered card and flat stats
   ========================================================================== */

/* Outer modal overlay with blur */
#day-end-modal {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30055;
  background: rgba(11, 16, 32, .8);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#day-end-modal[style*="display: flex"],
#day-end-modal[style*="display:flex"] {
  display: flex !important;
}

/* Background layer with custom image */
#day-end-bg {
  position: absolute;
  inset: 0;
  background: #0b1020 center/cover no-repeat;
  opacity: 1;
  z-index: 1;
}

/* Main content container - single centered column */
.day-end-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  width: 52vh;
  left: 40vh;
}

/* Single card container */
.day-end-card {
  background: #5C5C8F;
  border-radius: 1.8vh;
  box-shadow: 0 2vh 4vh rgba(0,0,0,.5);
  color: #e9e6ff;
  /* max-height: 85vh; */
  display: flex;
  flex-direction: column;
}

/* Side actions - compact vertical buttons */
.day-end-side-actions {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.side-action-btn {
  background: #5C5C8F;
  border: 2px solid rgba(233, 230, 255, .2);
  border-radius: 1.4vh;
  padding: 2vh 2.2vh;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 0.8vh 1.6vh rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8vh;
  min-width: 12vh;
}

.side-action-btn:hover {
  transform: translateY(-0.3vh);
  box-shadow: 0 1.2vh 2.4vh rgba(0,0,0,.45);
  border-color: rgba(233, 230, 255, .4);
  background: #6a6fa0;
}

.side-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 0.4vh 1vh rgba(0,0,0,.3);
}

.side-action-icon {
  font-size: 3.2vh;
  line-height: 1;
}

.side-action-text {
  font-size: 1.6vh;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-align: center;
  line-height: 1.1;
}

/* Restart button variant - red accent */
.side-action-btn--restart {
  border-color: rgba(239, 68, 68, .3);
  background: #6b4955;
}

.side-action-btn--restart:hover {
  background: #7d5563;
  border-color: rgba(239, 68, 68, .5);
}

/* Header with title and tabs in one row */
.day-end-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  margin-bottom: 0vh;
  width: 61vh;
  height: 11vh;
}

.day-end-title {
  font-weight: 700;
  font-size: 2.8vh;
  color: #fff;
  text-align: left;
  margin: 0;
  margin-left: 5vh;
  flex-shrink: 0;
}

.day-end-header-divider {
  width: 100%;
  height: 0.15vh;
  background: rgba(255,255,255,.35);
  margin-bottom: 0vh;
}

.day-end-subtitle {
  font-weight: 600;
  font-size: 2vh;
  color: rgba(255,255,255,.7);
  text-align: center;
  margin: 0 0 1.2vh 0;
}

.day-end-tabs {
  display: flex;
  gap: 0.8vh;
  flex-shrink: 0;
  margin-right: 3vh;
}

.day-end-tab {
  border: none;
  border-radius: 0.8vh;
  padding: 0.9vh 2vh;
  font-size: 1.7vh;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  color: rgba(255, 255, 255, .55);
  transition: all .18s ease;
  position: relative;
}

.day-end-tab.is-active {
  background: rgba(255,255,255,.18);
  color: #e0deff;
  box-shadow: 0 0 0 0.2vh rgba(124, 130, 255, .4);
}

.day-end-reason {
  font-weight: 600;
  font-size: 1.8vh;
  color: rgba(255, 180, 180, .9);
  text-align: center;
  margin: 0 0 1.2vh 0;
}

/* Stats container - NO nested cards, flat rows */
.day-end-stats {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  flex: 1;
  padding-top: 3vh;
  padding-bottom: 3vh;
  border-bottom: 0.12vh solid rgb(255 255 255 / 16%);
}

.stat-divider{
  height: 0;
  /* border-top: 0.12vh solid rgb(255 255 255 / 14%); */
  margin-left: 5vh;
}

.stat-divider--love{
  margin-top: 1.2vh;
  margin-bottom: 0.2vh;
}

.gh-love-row{
  margin-left: 5vh;
  margin-right: 5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  padding: 1.2vh 1.4vh;
  border-radius: 1.6vh;
  background: linear-gradient(135deg, rgba(255, 76, 161, .18), rgba(0, 0, 0, .18));
  /* border: 0.18vh solid rgba(255, 167, 214, .28); */
  box-shadow:
    0 0.8vh 2.4vh rgba(0,0,0,.22),
    inset 0 0 0 0.12vh rgba(255,255,255,.08);
  position: relative;
  cursor: pointer;
}

.gh-love-row:focus{
  outline: none;
  box-shadow:
    0 0.8vh 2.4vh rgba(0,0,0,.22),
    inset 0 0 0 0.12vh rgba(255,255,255,.12),
    0 0 0 0.22vh rgba(255, 76, 161, .35);
}

.gh-love-tooltip{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.2vh);
  transform: translateX(-50%) translateY(0.4vh);
  min-width: 36vh;
  max-width: 46vh;
  padding: 2.2vh 2.4vh;
  background: rgb(44 44 65 / 96%);
  color: #fff;
  border-radius: .8vh;
  box-shadow: 0 0.8vh 2.4vh rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 4;
}
.gh-love-row.is-open .gh-love-tooltip{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.gh-love-tooltip-title{
  font: 800 1.5vh/1.1 Avenir Next;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .7vh;
}
.gh-love-tooltip-text{
  font: 500 1.5vh/1.3 Avenir Next;
  color: rgba(255,255,255,.92);
}

.gh-love-main{
  display: flex;
  align-items: center;
  gap: 1.1vh;
  min-width: 0;
}

.gh-love-icon{
  width: 4.2vh;
  height: 4.2vh;
  flex: 0 0 auto;
}

.gh-love-balance{
  display: flex;
  align-items: baseline;
  gap: 0.8vh;
  min-width: 0;
}

.gh-love-balance-value{
  font: 900 2.6vh/1 Avenir Next;
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 0.4vh 1.2vh rgba(0,0,0,.35);
}

.gh-love-balance-label{
  font: 800 1.4vh/1 Avenir Next;
  color: rgba(255, 235, 245, .92);
  letter-spacing: .18em;
}

.gh-love-earned{
  display: flex;
  align-items: baseline;
  gap: 0.4vh;
  font: 800 1.8vh/1 Avenir Next;
  color: rgba(255, 235, 245, .92);
  white-space: nowrap;
}

.gh-love-earned-prefix{
  color: rgba(255, 235, 245, .78);
  font-weight: 700;
}

.gh-love-earned-value{
  color: #fff;
}

.gh-love-earned-label{
  color: rgba(255, 235, 245, .82);
  letter-spacing: .12em;
  font-size: 1.4vh;
  font-weight: 800;
  margin-left: 0.4vh;
}

/* Stat rows with dark glass background for icon + value */
.stat-row {
  display: flex;
  align-items: center;
  margin-left: 5vh;
}

.stat-primary {
  display: flex;
  gap: 1vh;
  width: 22vh;
  height: 8vh;
  border-radius: 1.4vh;
  background: rgb(0 0 0 / 15%);
  justify-content: center;
  align-items: center;
}

.stat-icon {
  font-size: 4.5vh;
  width: 5.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon .gh-points-icon{
  width: 4.0vh;
  height: 4.0vh;
}

.stat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.stat-value {
  font-size: 2vh;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.stat-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4vh;
  min-width: 12vh;
  margin-left: 2vh;
}

.stat-best {
  font-size: 2vh;
  font-weight: 600;
  color: rgb(255 255 255);
  text-align: right;
}

/* Record indicator - orange like in reference */
.stat-record {
  display: none; /* Hidden by default, shown via JS */
  align-items: center;
  gap: 0.6vh;
  color: #ff9b5e;
  font-weight: 800;
  font-size: 1.5vh;
  white-space: nowrap;
  animation: recordGlow 2s ease-in-out infinite;
}

.stat-record-icon {
  font-size: 2.2vh;
}

.stat-record-text {
  color: #ff9b5e;
}

@keyframes recordGlow {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 0.8vh rgba(255, 155, 94, .4);
  }
  50% {
    opacity: 0.9;
    text-shadow: 0 0 1.4vh rgba(255, 155, 94, .7);
  }
}

/* Continue button - styled similar to LevelUp "Select" button */
.day-end-continue-btn {
  background: linear-gradient(90deg, #FF56CC 0%, #FF5053 100%);
  border: none;
  border-radius: 1.2vh;
  font-weight: 800;
  font-size: 2.6vh;
  color: #ffffff;
  margin-right: 1vh;
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
  width: 35vh;
  height: 6vh;
  margin: auto;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.day-end-continue-btn:hover:not(:disabled) {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

.day-end-continue-btn:active:not(:disabled) {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

.day-end-continue-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: #757094;
  color: rgba(255,255,255,.4);
}

/* Success/Failure text colors */
#day-end-modal.day-end--success .day-end-title {
  color: #66ff88;
}

#day-end-modal.day-end--failure .day-end-title {
  margin-left: 6vh;
  color: #ff5555;
}
/* Animation for modal appearance */
@keyframes dayEndFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#day-end-modal[style*="display: flex"] .day-end-card,
#day-end-modal[style*="display:flex"] .day-end-card {
  animation: dayEndFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ===== static/css/main_menuv5.css ===== */
#main-game {
  position: relative;
  width: 100%;
  height: 100%;
}

.game_block {
  display: none;
}

.game_block.active {
  display: block;
}


.paywall_menu {
  z-index: 300;
  display: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images_of_glory/main_back3.webp");
  background-color: #1a1a2e;
}

.paywall_menu.active {
  display: block !important;
}

.paywall_menu .logomain {
  position: absolute;
  top: 8vh;
  left: 118vh;
  height: 36vh;
  pointer-events: none;
  z-index: 301;
}

.paywall_menu .logo-text {
  position: absolute;
  top: 8vh;
  left: 3vh;
  z-index: 301;
  color: #ff6aff;
  font-size: 7vh;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5vh;
  text-shadow: 
    0 0 2vh rgba(255, 106, 255, 0.8),
    0 0 4vh rgba(255, 106, 255, 0.6),
    0 0.5vh 1vh rgba(0, 0, 0, 0.8);
  user-select: none;
  pointer-events: none;
  line-height: 1.2;
}

.paywall_menu .logo-subtitle {
  display: block;
  font-size: 2.5vh;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1vh;
  letter-spacing: 0.3vh;
  text-shadow: 0 0.3vh 0.8vh rgba(0, 0, 0, 0.6);
}

.paywall_menu .version_container {
  position: absolute;
  bottom: 3vh;
  left: 19.5vh;
  z-index: 301;
}

.paywall_menu .version {
  font-size: 2.5vh;
  color: white;
  font-weight: 700;
}

.choose_version {
  display: none;
  margin: auto;
  background-color: #474757;
  color: white;
  font-size: 3vh;
  padding: 2vh 3vh;
  left: 27vh;
  top: 8vh;
  position: absolute;
  font-weight: 800;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.paywall_main {
  position: absolute;
  display: flex;
  bottom: 6vh;
}

.main_paywall_block {
  color: #ffffff;
  display: flex;
  background-color: #5c5c8f;
  height: 61vh;
  border-radius: 1.4vh;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transform: scale(0.82);
}

.main_paywall_block video:hover {
  opacity: 1 !important;
  filter: none !important;
}

.paywall_container {
  /* margin: 3.2vh 2vh 0 3.5vh; */
}

.paywall_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  padding-bottom: 1.6vh;
  border-bottom: 0.2vh solid rgb(255 255 255 / 18%);
  margin-bottom: 2.2vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  padding-left: 3vh;
  padding-top: 3vh;
  padding-bottom: 2.8vh;
  font-size: 2.5vh;
  line-height: 1.2;
}

.logline {
  width: 64vh;
  line-height: 3.6vh;
  font-weight: 600;
  font-size: 2vh;
  margin-top: 1.2vh;
  margin-left: 3vh;
}

.paywall_item {
  margin: 0 2vh 1.2vh 0vh;
  font-size: 2vh;
  font-weight: 600;
  margin-top: 2.5vh;
  width: 62vh;
  line-height: 3.5vh;
  padding: 2vh;
  margin-left: 3vh;
  border-radius: 1vh;
  background-color: #00000025;
}

.paywall_item b {
  color: #ff6aff;
  font-weight: 700;
}

.pink_text {
  color: #ff6aff;
}

.orange_text {
  color: #ef00ff;
}

.main_paywall_image {
  width: 108.5vh;
  object-fit: contain;
  max-height: 61vh;
  background: #000;
}

video.main_paywall_image {
  cursor: pointer;
}

video.main_paywall_image::-webkit-media-controls-enclosure {
  background-image: none !important;
  background: transparent !important;
}

video.main_paywall_image::-webkit-media-controls-overlay-enclosure {
  display: none !important;
}

video.main_paywall_image::-webkit-media-controls-panel {
  background-color: transparent !important;
  background-image: none !important;
}

video.main_paywall_image::-webkit-media-controls-play-button,
video.main_paywall_image::-webkit-media-controls-volume-slider {
  filter: brightness(1.2);
}

.buttons_paywall {
  display: flex;
}

#play_game_new,
#play_game_endless,
#open_gallery,
#play_game_big,
#play_game_endless_big {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}

#play_game_new {
  text-decoration: none;
  margin-right: 2vh;
  background: linear-gradient(90deg, #FF56CC 0%, #FF5053 100%);
  box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.12), 0 .4vh 1.6vh rgba(0, 0, 0, 0.08);
  border-radius: 1vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  margin-top: 2.2vh;
  margin-left: 3vh;
  color: #ffffff;
  width: 20vh;
  height: 5.6vh;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

#play_game_new:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

#play_game_new:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

#play_game_endless {
  text-decoration: none;
  margin-right: 2vh;
  background: linear-gradient(90deg, #5eead4 0%, #60a5fa 100%);
  box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.12), 0 .4vh 1.6vh rgba(0, 0, 0, 0.08);
  border-radius: 1vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  margin-top: 2.2vh;
  color: #ffffff;
  width: 20vh;
  height: 5.6vh;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

#play_game_endless:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

#play_game_endless:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

#open_gallery {
  text-decoration: none;
  margin-right: 2vh;
  background: linear-gradient(90deg, #a78bfa 0%, #60a5fa 100%);
  box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.12), 0 .4vh 1.6vh rgba(0, 0, 0, 0.08);
  border-radius: 2vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 4vh;
  color: #ffffff;
  width: 38vh;
  height: 9.6vh;
  display: flex;
  top: 63vh;
  cursor: pointer;
  right: 12vh;
  position: absolute;
  z-index: 500;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

#open_gallery:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

#open_gallery:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

#play_game_big {
  position: absolute;
  text-decoration: none;
  top: 50vh;
  box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.12), 0 .4vh 1.6vh rgba(0, 0, 0, 0.08);
  border-radius: 0.3vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 4vh;
  /* margin-top: 1.2vh; */
  color: #292929;
  width: 38vh;
  height: 10.6vh;
  right: 14vh;
  border: none;
  z-index: 500;
  background: linear-gradient(90deg, #FF56CC 0%, #FF5053 100%);
  text-align: center;
  transition: all 0.2s ease;
  color: white;
  line-height: 9.8vh;
  font-weight: 700;
  border-radius: 2vh;
  display: block;
}

#play_game_big:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

#play_game_big:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

#play_game_endless_big {
  position: absolute;
  text-decoration: none;
  top: 57vh;
  box-shadow: 0 .2vh .8vh rgba(0, 0, 0, 0.12), 0 .4vh 1.6vh rgba(0, 0, 0, 0.08);
  border-radius: 0.3vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 4vh;
  color: #292929;
  width: 38vh;
  height: 10.6vh;
  border: none;
  right: 14vh;
  z-index: 500;
  background: linear-gradient(90deg, #5eead4 0%, #60a5fa 100%);
  text-align: center;
  transition: all 0.2s ease;
  color: white;
  line-height: 9.8vh;
  border-radius: 2vh;
  display: block;
}

#play_game_endless_big:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

#play_game_endless_big:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

#play_game_endless.is-locked,
#play_game_endless_big.is-locked {
  opacity: 0.6;
  filter: grayscale(0.25);
  cursor: not-allowed;
}

.log_in_button {
  position: absolute;
  width: 16vh;
  height: 7vh;
  left: 3vh;
  text-decoration: none;
  top: 0vh;
  font-size: 2vh;
  border-radius: 0vh 0vh 1vh 1vh;
  background-size: 24%;
  background-position: 10.2vh;
  background-repeat: no-repeat;
  background-image: url(../images_of_glory/interface/account.svg);
  cursor: pointer;
  background-color: #5c5c90;
  transition: 0.2s;
  box-shadow: 0 0.3vh 0.9vh rgb(0 0 0 / 21%);
}

.log_in_text {
  padding: 2.2vh 1.9vh;
  font-weight: 600;
  transition: 0.2s;
  color: white;
}

.log_in_button:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 0.4vh 1.2vh rgba(0, 0, 0, 0.4), 0 0.8vh 2.4vh rgba(0, 0, 0, 0.3);
}

.log_in_button:active {
  transform: translateY(0);
  box-shadow: 0 0.2vh 0.6vh rgba(0, 0, 0, 0.35);
}

#log_in_button_game {
  left: 8vh;
  height: 6.1vh;
  width: 15vh;
  background-size: 20%;
  background-position: 9.9vh;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  background-color: #474757;
}

#log_in_button_game .log_in_text {
  padding: 1.8vh 1.75vh;
}

.profile.profile_game {
  left: 2vh;
}

.profile {
  position: relative;
  width: max-content;
  max-width: 17vh;
  top: 0;
  position: absolute;
}

.profile_menu,
.profile_menu_game {
  display: none;
}

.profile_menu.active,
.profile_menu_game.active {
  display: block;
}

.profile_menu {
  margin-top: 8vh !important;
}

.profile_menu_game {
  margin-top: 2vh;
}

.profile_button,
.profile_button_game {
  background-color: #5c5c90;
  height: 5.1vh;
  transition: 0.2s;
  color: white;
  cursor: pointer;
  border-radius: 0 0 1vh 1vh;
  display: flex;
  padding: 0.9vh 1.2vh 0 1.5vh;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.profile_button:hover,
.profile_button_game:hover {
  padding: 1.3vh 1.2vh 0.5vh 1.5vh;
}

.profile_button_game {
  position: relative;
  flex: 0 0 auto;
}

.avatar {
  width: 4.1vh;
  height: 4.1vh;
  background-size: contain;
  border-radius: 5vh;
}

.nickname {
  font-size: 2.4vh;
  padding: 0.5vh 0.5vh 0 1.5vh;
  max-width: 9.5vh;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile_menu,
.profile_menu_game {
  width: 31vh;
  position: relative;
  border-radius: 1vh;
  z-index: 600;
  background-color: #5c5c90;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
  right: 0;
  left: auto;
}

.profile_title {
  font-size: 2vh;
  display: flex;
  padding: 2vh;
  padding-top: 2.3vh;
  font-weight: 700;
  color: white;
  flex-wrap: nowrap;
}

.benefits {
  padding: 0.5vh 2vh 0.8vh 2vh;
  color: white;
}

.benefits_item {
  font-size: 2vh;
  font-weight: 600;
  margin-bottom: 1.5vh;
}

.benefits_item.inactive {
  color: #c3c3c3;
  text-decoration: line-through;
}

.link_improve {
  right: 2vh;
  position: absolute;
  text-decoration: none;
  color: #ff6aff;
}

.log_out {
  position: relative;
  cursor: pointer;
  font-size: 2vh;
  bottom: 0;
  display: flex;
  border-top: 0.1vh solid #979797;
  padding: 1.7vh 2vh;
  color: #ff6aff;
  text-decoration: none;
  font-weight: 700;
}

.log_out::after {
  background-image: url("../images_of_glory/interface/exit.svg");
  width: 2.8vh;
  height: 2.8vh;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  display: block;
  position: absolute;
  right: 2vh;
  filter: hue-rotate(43deg) brightness(1.3);
}

.login_wrapper {
  position: relative;
  top: 0vh;
  right: 2vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  z-index: 3123123;
  align-items: flex-end;
}

/* Hide login/nickname UI on save selection modal */
body.save-game-modal-open .log_in_button,
body.save-game-modal-open .login_wrapper,
body.save-game-modal-open .profile,
body.save-game-modal-open .profile_game {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#log_in_paywall {
  text-decoration: none;
  margin-right: 2vh;
  background: linear-gradient(257deg, #ae82ff 24%, #b78bff 100%);
  box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
  border-radius: 1vh;
  outline: none;
  border: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  margin-top: 2.2vh;
  color: #ffffff;
  width: 12vh;
  height: 5.6vh;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all 0.2s 
ease;
}

#log_in_paywall:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
}

.game_block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.game_block.active {
  display: block;
}

body.stop-transitions * {
  transition: none !important;
}
/* ============= CHANGELOG BUTTON ============= */

.changelog_button {
  background: rgb(92 92 143);
  border-radius: 1vh;
  border: 0.2vh solid transparent;
  outline: none;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 700;
  font-size: 2vh;
  position: absolute;
  bottom: 2vh;
  left: 2vh;
  color: #ffffff;
  width: 16vh;
  height: 5.6vh;
  display: flex;
  cursor: pointer;
  z-index: 500;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.changelog_button:hover {
  transform: translateY(-0.2vh);
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, 0.15), 0 .8vh 2.4vh rgba(0, 0, 0, 0.12);
  background: rgba(106, 111, 160, 0.9);
  border-color: rgba(233, 230, 255, 0.5);
}

.changelog_button:active {
  transform: translateY(0.1vh);
  box-shadow: 0 .1vh .4vh rgba(0, 0, 0, 0.1), 0 .2vh .8vh rgba(0, 0, 0, 0.06);
}

/* ============= CHANGELOG MODAL ============= */

.changelog-modal {
  position: fixed;
  inset: 0;
  z-index: 30060;
  display: none;
  align-items: center;
  justify-content: center;
  /* Defensive: avoid invisible overlays eating clicks in Firefox. */
  pointer-events: none;
  visibility: hidden;
}

.changelog-modal[style*="display: flex"],
.changelog-modal[style*="display:flex"] {
  display: flex !important;
  pointer-events: auto;
  visibility: visible;
}

.changelog-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.changelog-modal-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.changelog-modal-card {
  background: #5c5c8f;
  border-radius: 1.4vh;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.changelog-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  padding: 2vh 2.5vh;
  border-bottom: 0.2vh solid rgb(255 255 255 / 18%);
}

.changelog-modal-title {
  font-family: 'Avenir Next';
  font-weight: 600;
  font-size: 2vh;
  line-height: 1.2;
  color: #ffffff;
}

.changelog-close {
  background: url("../images_of_glory/interface/close.svg") no-repeat center;
  background-size: cover;
  border: none;
  color: transparent;
  width: 2.2vh;
  height: 2.2vh;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;
}

.changelog-close:hover {
  opacity: 1;
  transform: scale(1.04);
}

.changelog-modal-body {
  padding: 0 2.5vh 2.5vh;
  overflow-y: auto;
  max-height: 65vh;
}

.changelog-modal-body::-webkit-scrollbar {
  width: 1vh;
}

.changelog-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5vh;
}

.changelog-modal-body::-webkit-scrollbar-thumb {
  background: rgba(233, 230, 255, 0.3);
  border-radius: 0.5vh;
}

.changelog-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(233, 230, 255, 0.5);
}

.changelog-version {
  margin-bottom: 3vh;
}

.changelog-version:last-child {
  margin-bottom: 0;
}

.changelog-version h3 {
  font-family: 'Avenir Next';
  font-weight: 700;
  font-size: 2.4vh;
  color: #ff6aff;
  margin-bottom: 1.5vh;
  padding-bottom: 1vh;
  border-bottom: 0.15vh solid rgba(255, 106, 255, 0.3);
}

.changelog-version ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.changelog-version li {
  font-family: 'Avenir Next';
  font-weight: 600;
  font-size: 1.9vh;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.2vh;
  padding-left: 2.5vh;
  position: relative;
}

.changelog-version li:before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: #ff6aff;
  font-weight: 700;
}

/* SKIN SELECTION MODAL */
.skin-selection-modal {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 0;
  width: var(--game-width);
  height: 100vh;
  transform: translateX(-50%);
  z-index: 30070;
  display: none;
  align-items: center;
  justify-content: center;
  /* Defensive: when hidden, do not block main menu clicks (Firefox hit-testing can be flaky). */
  pointer-events: none;
  visibility: hidden;
}

.skin-selection-modal[style*="display: flex"],
.skin-selection-modal[style*="display:flex"] {
  display: flex !important;
  pointer-events: auto;
  visibility: visible;
}

.skin-selection-bg {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 83%);
  backdrop-filter: blur(6px);
  z-index: 1;
  /* Must intercept clicks to prevent click-through to the main menu (Firefox hit-testing can be flaky with overlays). */
  pointer-events: auto;
}

/* Firefox: backdrop-filter can break hit-testing for overlays on some versions.
   Prefer a non-blurred dim layer to keep clicks working reliably. */
@supports (-moz-appearance: none) {
  /* Firefox: `position: fixed` inside transformed body can render off-screen.
     Use absolute overlays anchored to the game root instead. */
  .changelog-modal,
  .skin-selection-modal,
  .save-game-modal,
  .patron-tier-modal {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  /* Defensive: some Firefox builds fail to paint backdrop-filter layers; keep a solid dim on the modal root. */
  .changelog-modal,
  .skin-selection-modal,
  .save-game-modal,
  .patron-tier-modal {
    background: rgba(0, 0, 0, 0.75);
  }

  .skin-selection-modal {
    background: rgb(0 0 0 / 83%);
  }
  .patron-tier-modal {
    background: rgba(0, 0, 0, 0.75);
  }
  .skin-selection-bg {
    backdrop-filter: none;
    display: none;
  }
  .patron-tier-bg {
    backdrop-filter: none;
    display: none;
  }
  .save-game-bg,
  .changelog-modal-bg {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.skin-selection-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
}

.skin-selection-title {
  font-family: 'Avenir Next';
  font-weight: 800;
  font-size: 4.5vh;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2vh;
  text-shadow: 0 0 2vh rgb(154 82 255 / 80%), 0 0 3vh rgb(92 92 145);
}

.skin-selection-options {
  display: flex;
  gap: 6vh;
  justify-content: center;
  align-items: center;
}

.skin-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(0.8);
}

.skin-option:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.skin-option.selected {
  filter: brightness(1.3);
}

.skin-option--locked {
  position: relative;
  opacity: 0.6;
  cursor: pointer;
}

.skin-option--locked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8vh;
  height: 8vh;
  background: url("../images_of_glory/lock.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 2vh rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

.skin-option--locked:hover {
  opacity: 0.8;
  filter: brightness(1);
}

.skin-preview {
  width: 40vh;
  height: 60vh;
  background: rgba(92, 92, 143, 0.3);
  /* border: 0.4vh solid rgba(255, 106, 255, 0.5); */
  border-radius: 2vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.skin-option:hover .skin-preview {
  border-color: rgb(0 0 0);
}

.skin-option.selected .skin-preview {
  border-color: #000000;
}

.skin-preview img {
  /* width: 100%; */
  height: 131%;
  /* object-fit: contain; */
  /* Make the whole tile reliably clickable (avoid image drag cancelling clicks in Firefox). */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.skin-preview img.bunny-shift-up {
  transform: translateY(-4vh);
}

.skin-label {
  font-family: 'Avenir Next';
  font-weight: 700;
  font-size: 2.8vh;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.1vh;
  text-shadow: 0 0.3vh 1vh rgba(0, 0, 0, 0.7);
}

/* Save Game Modal */
.save-game-modal {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 0;
  width: var(--game-width);
  height: 100vh;
  transform: translateX(-50%);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  /* Defensive: avoid blocking clicks when hidden. */
  pointer-events: none;
  visibility: hidden;
}

.save-game-modal[style*="display: flex"],
.save-game-modal[style*="display:flex"] {
  display: flex !important;
  pointer-events: auto;
  visibility: visible;
}

.save-game-bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 15, 0.95);
  backdrop-filter: blur(1vh);
  -webkit-backdrop-filter: blur(1vh);
  z-index: 1;
}

.save-game-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vh;
}

.save-game-title {
  font-family: 'Avenir Next';
  font-weight: 800;
  font-size: 5vh;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3vh;
  text-shadow: 0 0 2vh #5c5c8f, 0 0.5vh 1.5vh rgba(0, 0, 0, 0.9);
  margin-bottom: 3vh;
}

.save-game-options {
  display: flex;
  gap: 5vh;
  align-items: center;
  justify-content: center;
}

.save-option {
  width: 35vh;
  padding: 4vh 3vh;
  background: linear-gradient(135deg, rgba(92, 92, 143, 0.4), rgba(58, 58, 95, 0.4));
  /* border: 0.4vh solid rgba(255, 106, 255, 0.5); */
  border-radius: 2vh;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vh;
}

.save-option:hover {
  transform: scale(1.05);
  border-color: #ff6aff;
  background: linear-gradient(135deg, rgba(92, 92, 143, 0.6), rgba(58, 58, 95, 0.6));

}

.save-option-title {
  font-family: 'Avenir Next';
  font-weight: 700;
  font-size: 3.5vh;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2vh;
  /* text-shadow: 0 0.3vh 1vh rgba(0, 0, 0, 0.7); */
}

.save-option-desc {
  font-family: 'Avenir Next';
  font-weight: 400;
  font-size: 2vh;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.save-option-info {
  font-family: 'Avenir Next';
  font-weight: 500;
  font-size: 1.8vh;
  color: #8b8dff;
  text-align: center;
  margin-top: 1vh;
}

/* ============= PATRON TIER MODAL ============= */
.patron-tier-modal {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 0;
  width: var(--game-width);
  height: 100vh;
  transform: translateX(-50%);
  z-index: 100020;
  display: none;
  align-items: center;
  justify-content: center;
  /* Defensive: avoid blocking clicks when hidden. */
  pointer-events: none;
  visibility: hidden;
}

.patron-tier-modal[style*="display: flex"],
.patron-tier-modal[style*="display:flex"] {
  display: flex !important;
  pointer-events: auto;
  visibility: visible;
}

.patron-tier-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}

.patron-tier-content {
  position: relative;
  z-index: 2;
  width: 70vh;
  max-width: 90vw;
  background: #5c5c8f;
  border-radius: 1.4vh;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.patron-tier-close {
  background: url("../images_of_glory/interface/close.svg") no-repeat center;
  background-size: cover;
  border: none;
  color: transparent;
  width: 2.2vh;
  height: 2.2vh;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;
  flex-shrink: 0;
}

.patron-tier-close:hover {
  opacity: 1;
  transform: scale(1.04);
}

.patron-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  padding: 2vh 2.5vh;
  border-bottom: 0.2vh solid rgb(255 255 255 / 18%);
  margin-bottom: 2.2vh;
}

.patron-tier-title {
  font-family: 'Avenir Next';
  font-weight: 600;
  font-size: 2vh;
  line-height: 1.2;
  color: #ffffff;
}

.patron-tier-body {
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
  align-items: center;
  padding: 0 2.5vh 2.5vh;
}

.patron-tier-preview {
  width: 100%;
  max-height: 40vh;
  border-radius: 1.5vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.patron-tier-preview img,
.patron-tier-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patron-tier-message {
  /* padding: 0 2vh; */
  text-align: center;
}

.patron-tier-message p {
  font-family: 'Avenir Next';
  font-weight: 400;
  font-size: 2.2vh;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.patron-tier-message p + p {
  margin-top: 1.8vh;
  text-align: left;
}

.patron-tier-message ul {
  margin: 1vh 0 0;
  padding-left: 2.2vh;
  text-align: left;
}

.patron-tier-message ul li {
  font-family: 'Avenir Next';
  font-weight: 400;
  font-size: 2.2vh;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 0.6vh;
}

.patron-tier-highlight {
  color: #ff6aff;
  font-weight: 700;
}

.patron-tier-buttons {
  display: flex;
  gap: 2vh;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 2vh;
}

.patron-tier-button {
  font-family: 'Avenir Next';
  font-weight: 700;
  font-size: 2vh;
  padding: 1.8vh 3.5vh;
  border: none;
  border-radius: 1.2vh;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.1vh;
  box-shadow: 0 0.5vh 1.5vh rgba(0, 0, 0, 0.3);
}

.patron-tier-button--patreon {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
  color: #ffffff;
  flex: 1;
  min-width: 25vh;
}

.patron-tier-button--patreon:hover {
  background: linear-gradient(135deg, #ff5252 0%, #ee5a6f 100%);
  transform: translateY(-0.3vh);
  box-shadow: 0 0.8vh 2vh rgba(255, 71, 87, 0.4);
}

.patron-tier-button--login {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  flex: 1;
  min-width: 18vh;
}

.patron-tier-button--login:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-0.3vh);
  box-shadow: 0 0.8vh 2vh rgba(99, 102, 241, 0.4);
}

.patron-tier-button-icon {
  font-size: 2.2vh;
  line-height: 1;
}

.patron-tier-button-text {
  line-height: 1;
}


/* ===== static/css/music_ui.css ===== */
/* 
 * Music UI Styles
 * Стили для кнопок управления музыкой и слайдера громкости
 */

/* Кнопка включения/выключения звука */
.sound {
  height: 6.3vh;
  background-repeat: no-repeat;
  width: 14.5vh;
  background-image: url(../images_of_glory/interface/sound.svg);
  cursor: pointer;
  /* filter: none !important; */
  border-radius: 0;
  background-color: transparent;
  background-size: 2.2vh;
  background-position: 35% 50%;
  transition: 0.2s;
  position: relative;
}

/* Параллелограмм фон для кнопки звука (как у HUD) */
.sound::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #514986;
  box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.28);
  border-radius: 0;
  /* -webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%); */
clip-path: polygon(100% 0, 28% 0, 9% 100%, 81% 100%);
  z-index: -1;
}

/* Состояние кнопки когда музыка играет */
.sound_clicked {
  background-image: url(../images_of_glory/interface/sound_clicked.svg);
}

/* Кнопка показа слайдера громкости (стрелка) */
.show_slider {
  transition: 0.2s;
  width: 4vh;
  cursor: pointer;
  background-repeat: no-repeat;
  height: 4vh;
  background-size: 50%;
  border-left: 0.2vh solid rgba(255, 255, 255, 0.14);
  top: 1.2vh;
  right: 2.3vh;
  background-position: center;
  position: absolute;
  background-image: url(../images_of_glory/interface/arrow_down.svg);
  border-radius: 0;
}


/* Контейнер для кнопок управления музыкой */
.sound_container {
  position: absolute;
  top: 0;
  left: calc(50% + 29.4vh);
  right: auto;
  display: flex;
  filter: drop-shadow(0px 0.2vh 0.2vh #00000057);
}

/* Контейнер слайдера громкости */
.range_container {
  transition: 0.5s;
  background-color: #514986;
  position: absolute;
  left: -4vh;
  width: 22vh;
  height: 4vh;
  border-radius: 0.2vh;
  top: -14vh;
  transform: rotate(270deg);
  box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
}

/* Активное состояние слайдера (видимый) */
.range_active {
  top: 17vh;
  opacity: 1;
  pointer-events: all;
  z-index: 32874623874632;
}

/* Стрелка в активном состоянии (вверх) */
.range_active_arrow {
  background-image: url(../images_of_glory/interface/arrow_top.svg);
}

/* Стили для input range слайдера */
input[type='range'] {
  overflow: hidden;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.2);
  /* border-radius: 0.6vh; */
}

#volume-control {
  margin-left: 1.4vh;
  margin-top: 1.45vh;
  width: 19vh;
  height: 1.2vh;
}

/* Ползунок слайдера (WebKit) */
input[type='range']::-webkit-slider-thumb {
  width: 1.5vh;
  -webkit-appearance: none;
  height: 1.5vh;
  cursor: pointer;
  background: white;
  box-shadow: -10vh 0 0 10vh #fff;
  border-radius: 50%;
}

/* Убираем outline при фокусе */
input[type=range]:focus {
  outline: none;
}


/* ===== static/css/settings_uiv2.css ===== */
.gh-settings-btn {
  font-size: 3vh;
}
  
.switch {
  position: relative;
  display: inline-block;
  width: 4.8vh;
  margin-left: 1.5vh;
  height: 4vh;
  user-select: none;
}

/* Hide default HTML checkbox */
.switch
  input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_text {
  font-size: 2vh;
  margin-top: 0.5vh;
  font-weight: 600;
  color: rgb(255 255 255);
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 1vh;
  left: 0;
  right: 0;
  bottom: 1vh;
  background-color: rgba(0, 0, 0, 0.38);
  border-radius: 1.75vh;
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
}

  input:checked + .slider {
  background-color: #ff6aff;
}
  input:checked + .slider:before {
  -webkit-transform: translateX(2.3vh);
  -ms-transform: translateX(2.3vh);
  transform: translateX(2.3vh);
}
  input:focus + .slider {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 106, 255, 0.25);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1.75vh;
}

.gh-settings-btn.gh-settings-btn--dirty {
  background: #d12b2b !important;
  color: #fff !important;
  box-shadow: 0 0 0 .3vh rgba(209,43,43,.75), 0 6px 16px rgba(0,0,0,.25);
}

.pile-modal.gh-settings-modal {
  width: 39vh;
  /* height: auto; */
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gh-settings-content {
  padding: 0 2.3vh 2.6vh 2.3vh;
  overflow: visible;
}

.gh-settings-section {
  margin-top: 3vh;
  padding: 1.4vh 0 0.6vh 0;
  border-top: 0.2vh solid rgb(255 255 255 / 10%);
}

.gh-settings-section__title {
  font-size: 1.6vh;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 90%);
  text-transform: uppercase;
}

.gh-settings-section__subtitle {
  margin-top: 0.4vh;
  font-size: 1.4vh;
  font-weight: 600;
  color: rgb(255 255 255 / 55%);
}

.gh-setting-text {
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
  padding-right: 8vh;
}

.gh-setting-subtext {
  font-size: 1.35vh;
  font-weight: 600;
  color: rgb(255 255 255 / 55%);
  line-height: 1.2;
}

.gh-settings-item {
  position: relative;
  padding: 1.6vh 0;
  display: flex;
  /* border-top: 0.2vh solid rgb(255 255 255 / 10%); */
}

.gh-settings-item.gh-settings-item--stack {
  display: block;
}

.gh-settings-item.gh-settings-item--stack .switch_text {
  margin-top: 0;
}

.gh-segment {
  margin-top: 1.2vh;
  display: flex;
  gap: 0.8vh;
}

.gh-segment__opt {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.3vh;
  border-radius: 1.2vh;
  background: rgba(0, 0, 0, 0.3);
  border: 0.2vh solid rgb(255 255 255 / 12%);
  cursor: pointer;
  user-select: none;
  font-size: 1.6vh;
  font-weight: 700;
  color: rgb(255 255 255 / 70%);
}

.gh-segment__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gh-segment__opt.is-checked,
.gh-segment__opt:has(input:checked) {
  background: rgba(255, 106, 255, 0.22);
  border-color: rgba(255, 106, 255, 0.55);
  box-shadow: 0 0 0 0.25vh rgba(255, 106, 255, 0.18);
  color: rgb(255 255 255 / 95%);
}

.gh-settings-item:first-of-type {
  border-top: none;
}

.gh-hide-cum .cum-layer {
  display: none !important;
}

/* Switch styles (provided) */
.switch {
  position: relative;
  display: inline-block;
  width: 4.8vh;
  margin-left: 1.5vh;
  height: 4vh;
  user-select: none;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_container {
  display: flex;
  position: absolute;
  right: 0;
}

.switch_text {
  font-size: 2vh;
  margin-top: 0.5vh;
  font-weight: 600;
  color: rgb(255 255 255);
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 1vh;
  left: 0;
  right: 0;
  bottom: 1vh;
  background-color: rgba(0, 0, 0, 0.38);
  border-radius: 1.75vh;
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 2.5vh;
  width: 2.5vh;
  left: 0;
  bottom: -0.2vh;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0,  0.12);
  -webkit-transition: -webkit-transform .4s, background-color .4s;
  transition: transform .4s, background-color .4s;
}

input:checked + .slider {
  background-color: #ff6aff;
}

input:checked + .slider:before {
  -webkit-transform: translateX(2.3vh);
  -ms-transform: translateX(2.3vh);
  transform: translateX(2.3vh);
}

input:focus + .slider {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 106, 255, 0.25);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1.75vh;
}

.slider.round:before {
  border-radius: 50%;
}


/* ===== static/css/gallery_ui.css ===== */
.gh-gallery-overlay{
  position: absolute;
  inset: 0;
  z-index: 30090;
  display: none;
  pointer-events: none;
  visibility: hidden;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gh-gallery-overlay:not(.gh-gallery-open){
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.gh-gallery-overlay.gh-gallery-open{
  display: block;
  pointer-events: auto;
  visibility: visible;
}

@supports (-moz-appearance: none) {
  /* Backdrop-filter is unreliable in Firefox (often behind a pref); keep a solid dim. */
  .gh-gallery-overlay{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Gallery-specific card styles (not card-mini!) */
.gh-card {
  width: var(--card-w-hand);
  height: var(--card-h-hand);
  border-radius: var(--slot-radius);
  position: relative;
  display: block;
  user-select: none;
  color: #fff;
  /* Allow tags to overflow outside card bounds */
  overflow: visible;
}

/* Shape by type */
.gh-card.gh-friction { border-radius: 0.5vh; }
.gh-card.gh-effect { border-radius: 1.6vh; }
.gh-card.gh-junk { border-radius: 1.6vh; }

/* Gallery card image layer */
.gh-card-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* filter: saturate(1.05) contrast(1.02); */
  border-radius: inherit;
  background-color: bisque;
  filter: drop-shadow(0px 0.2vh 0.3vh #00000057);
}

/* Gallery card title at bottom */
.gh-card-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9vh 1.1vh;
  border-radius: 0 0 .8vh .8vh;
  color: #fff;
  font-size: 1.35vh;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: .7vh;
}

.gh-card.gh-friction .gh-card-title { border-radius: 0 0 0.3vh 0.3vh; }
.gh-card.gh-effect .gh-card-title { border-radius: 0 0 1.4vh 1.4vh; }

.gh-card-title-text {
  overflow: hidden;
  white-space: nowrap;
}

/* Gallery card tag at top */
.gh-card-tag {
  position: absolute;
  top: -1.8vh;
  left: 50%;
  transform: translateX(-50%);
  padding: .6vh 1.1vh;
  border-radius: .9vh;
  color: #fff;
  font-size: 1.35vh;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.gh-card.gh-friction .gh-card-tag { border-radius: .2vh; }
.gh-card.gh-effect .gh-card-tag { border-radius: 1.4vh; }

/* Show Effect/Friction/Junk text */
.gh-card-tag.gh-card-effect::after { content: 'Effect'; }
.gh-card-tag.gh-card-friction::after { content: 'Friction'; }
.gh-card-tag.gh-card-junk::after { content: 'Junk'; }

/* Gallery card suit icons */
.gh-card-suit {
  width: 1.6vh;
  height: 1.6vh;
  vertical-align: middle;
  object-fit: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.gh-card-suit.gh-suit--suitless { background-image: url('../images_of_glory/luna/icons-suits/suitless.svg'); }
.gh-card-suit.gh-suit--handjob { background-image: url('../images_of_glory/luna/icons-suits/handjob.svg'); }
.gh-card-suit.gh-suit--blowjob { background-image: url('../images_of_glory/luna/icons-suits/blowjob.svg'); }
.gh-card-suit.gh-suit--titjob { background-image: url('../images_of_glory/luna/icons-suits/titjob.svg'); }
.gh-card-suit.gh-suit--vaginal { background-image: url('../images_of_glory/luna/icons-suits/vaginal.svg'); }
.gh-card-suit.gh-suit--anal { background-image: url('../images_of_glory/luna/icons-suits/anal.svg'); }
.gh-card-suit.gh-suit--junk { background-image: url('../images_of_glory/luna/icons-suits/junk.svg'); }

/* Upgraded cards - red/pink border matching in-game style */
.gh-card--upgraded {
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35);
}

/* Plus badge for upgraded cards (top-right corner) - matches in-game styling */
.gh-card .gh-plus-corner {
  position: absolute;
  right: -0.4vh;
  top: 2.6vh;
  background: #ff5b6b;
  color: #fff;
  font-weight: 900;
  font-size: 2.5vh;
  border-radius: 0.5vh 0vh 0vh 0.5vh;
  padding: 0.5vh 0.5vh;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 10;
}

.gh-gallery-shell{
  position: absolute;
  inset: 0;
  display: flex;
  gap: 4vh;
  align-items: flex-start;
  padding: 6vh 5vh;
  box-sizing: border-box;
}

.gh-gallery-panel{
  width: 82vh;
  height: 88vh;
  background: #5c5c8f;
  color: #fff;
  border-radius: 1.4vh;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gh-gallery-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  padding: 2vh 2.6vh;
  border-bottom: .2vh solid rgb(255 255 255 / 18%);
}

.gh-gallery-title{
  font: 700 2.4vh/1.1 Avenir Next;
  letter-spacing: .02em;
}

.gh-gallery-title-row{
  display: flex;
  align-items: center;
  gap: 1.6vh;
  min-width: 0;
}

.gh-gallery-points{
  display: inline-flex;
  align-items: center;
  gap: .8vh;
  padding: 0.5vh 2.4vh 0.5vh 1.8vh;
  border-radius: 1vh;
  background: rgba(0,0,0,.18);
  /* border: .2vh solid rgba(255,255,255,.15); */
  font: 800 2.2vh/1 Avenir Next;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.gh-gallery-points:focus{ outline: none; }
.gh-gallery-points:focus-visible{
  box-shadow: 0 0 0 0.22vh rgba(255, 76, 161, .35);
}

.gh-gallery-points-value{
  min-width: 3ch;
  text-align: right;
}

/* L.O.V.E tooltip (isolated, not shared with day_end.css) */
.gh-gallery-overlay .gh-love-tooltip{
  position: absolute;
  min-width: 36vh;
  max-width: 46vh;
  padding: 2.2vh 2.4vh;
  background: rgb(44 44 65 / 96%);
  color: #fff;
  border-radius: .8vh;
  box-shadow: 0 0.8vh 2.4vh rgba(0,0,0,.45);
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 30;
}
.gh-gallery-overlay .gh-love-tooltip--gallery{
  left: 20.5vh;
  top: 6vh;
  height: 10vh;
}
.gh-gallery-overlay .gh-gallery-points.is-open .gh-love-tooltip{
  opacity: 1;
  pointer-events: auto;
}
.gh-gallery-overlay .gh-gallery-points.is-open .gh-love-tooltip--gallery{
  /* transform: translateY(0); */
}
.gh-gallery-overlay .gh-love-tooltip-title{
  font: 800 1.5vh/1.1 Avenir Next;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .7vh;
}
.gh-gallery-overlay .gh-love-tooltip-text{
  font: 500 1.5vh/1.3 Avenir Next;
  color: rgba(255,255,255,.92);
}

.gh-gallery-close{
  background: url("../images_of_glory/interface/close.svg") no-repeat;
  border: none;
  color: transparent;
  width: 2.2vh;
  height: 2.2vh;
  background-size: cover;
  padding: 1vh 1vh;
  cursor: pointer;
  opacity: .9;
}
.gh-gallery-close:hover{ opacity: 1; transform: scale(1.04); }

.gh-gallery-tabs{
  display: flex;
  gap: 4vh;
  padding: 2vh 1.6vh 0vh 2.6vh;
  /* border-bottom: 0.2vh solid #ffffff1f; */
}

.gh-gallery-tab{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  font: 800 clamp(3.6vh, 2vh, 6vh)/1 Avenir Next;
  padding: 0;
  letter-spacing: .02em;
}
.gh-gallery-tab-inner{
  display: inline-flex;
  align-items: center;
  gap: 1.2vh;
}
.gh-gallery-tab-label{
  display: inline-block;
}
.gh-ea-lock{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8vh;
  height: 2.8vh;
  margin-left: .3vh;
  border-radius: .7vh;
  cursor: pointer;
}
.gh-ea-lock:focus{
  outline: none;
}
.gh-ea-lock:focus-visible{
  box-shadow: 0 0 0 0.22vh rgba(255, 106, 255, .35);
}
.gh-ea-lock-icon{
  width: 3.2vh;
  height: 3.2vh;
  opacity: .9;
  filter: drop-shadow(0 0.25vh 0.35vh rgba(0,0,0,.35));
}
.gh-ea-lock:hover .gh-ea-lock-icon{
  opacity: 1;
}

/* Early access tooltip (isolated, not shared with day_end.css) */
.gh-ea-tooltip{
  position: absolute;
  left: 6vh;
  top: 6vh;
  transform: translateX(-50%) translateY(0.4vh);
  min-width: 34vh;
  max-width: 46vh;
  padding: 2.0vh 2.2vh;
  background: rgb(44 44 65 / 96%);
  color: #fff;
  border-radius: .8vh;
  box-shadow: 0 0.8vh 2.4vh rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 20;
}
.gh-ea-tooltip-title{
  font: 800 1.5vh/1.1 Avenir Next;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .7vh;
}
.gh-ea-tooltip-text{
  font: 500 1.5vh/1.3 Avenir Next;
  color: rgba(255,255,255,.92);
}
.gh-ea-lock.is-open .gh-ea-tooltip,
.gh-ea-lock:hover .gh-ea-tooltip,
.gh-ea-lock:focus-within .gh-ea-tooltip{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.gh-gallery-tab.is-active{
  color: #fff;
  text-shadow: 0 0 0.8vh rgba(0,0,0,.2);
}

.gh-gallery-tab-underline{
  height: .35vh;
  margin-top: 1vh;
  border-radius: 1vh;
  background: transparent;
}
.gh-gallery-tab.is-active .gh-gallery-tab-underline{
  background: #ff6aff;
}

.gh-gallery-scroll{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2.6vh 2.6vh 2.6vh;
  box-sizing: border-box;
  /* Improve scroll performance */
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 230, 255, 0.35) rgba(0, 0, 0, 0.22);
}

.gh-gallery-scroll::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.gh-gallery-scroll::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, 0.22);
  border-radius: 10px;
}
.gh-gallery-scroll::-webkit-scrollbar-thumb{
  background: rgba(233, 230, 255, 0.35);
  border-radius: 10px;
}
.gh-gallery-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(233, 230, 255, 0.55);
}

.gh-gallery-suit{
  margin-top: 2.4vh;
  /* Improve rendering performance for large lists (no paint to avoid clipping) */
  contain: layout;
}
.gh-gallery-suit:first-child{ margin-top: 0; }

.gh-gallery-suit-title{
  font: 800 3.6vh/1.05 Avenir Next;
  margin-bottom: 4vh;
  margin-top: 4vh;
  padding: 1vh 2vh;
  border-radius: 3vh;
  background-color: #0000001f;
  width: max-content;
}

.gh-gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, var(--card-w-hand));
  justify-content: start;
  gap: 4.2vh 2vh;
  /* Prevent clipping of overflowing badges */
  overflow: visible;
}

.gh-gallery-grid.gh-gallery-grid--actions{
  /* Same grid, but no special overflow needs */
}

.gh-gallery-card{
  position: relative;
  width: var(--card-w-hand);
  height: var(--card-h-hand);
  border-radius: var(--slot-radius);
  /* Allow badges to overflow */
  overflow: visible !important;
  cursor: pointer;
  /* Ensure clicks work */
  pointer-events: auto;
}

.gh-gallery-card .gh-card{
  position: absolute;
  inset: 0;
  margin: 0;
  /* Simple transition for gallery only */
  transition: transform .2s ease, box-shadow .2s ease !important;
  transform-origin: center;
  /* Override game animations */
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto;
  /* Allow badges to overflow */
  overflow: visible !important;
  /* Improve rendering performance (but not paint, as it clips overflow) */
  contain: layout style;
}


/* Selected card highlight - same as is-inspected in hand */
.gh-gallery-card.is-selected .gh-card{
  /* box-shadow: var(--shadow-inspect) !important; */
  transform: translateZ(0) scale(1.1) !important;
  z-index: var(--z-inspect-card);
  box-shadow: none;
}

.gh-gallery-action-mini{
  position: absolute;
  inset: 0;
  border-radius: var(--slot-radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1vh 1.6vh rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.gh-gallery-card.is-selected .gh-gallery-action-mini{
  transform: translateZ(0) scale(1.1);
  z-index: var(--z-inspect-card);
  box-shadow: 0 1.2vh 2vh rgba(0,0,0,.28);
}

.gh-gallery-action-qm{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 6.2vh/1 Avenir Next;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  text-shadow: none;
  z-index: 10;
  transition: opacity 0.2s ease;
}
.gh-gallery-card--locked .gh-gallery-action-qm{ opacity: 1; }

.gh-gallery-action-label{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1vh 1.2vh;
  font: 800 2.1vh/1.1 Avenir Next;
  color: #fff;
  /* background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); */
  text-shadow: 0 .35vh .7vh rgb(0 0 0 / 27%);
  letter-spacing: .01em;
  box-sizing: border-box;
}

/* Keep upgrade ring visible when card is selected (matches in-game behavior) */
.gh-gallery-card.is-selected .gh-card.gh-card--upgraded {
  box-shadow: 0 0 0 0.5vh #ff5b6b, 0 1vh 1.2vh rgba(255,91,107,.35), var(--shadow-inspect) !important;
}

/* Question mark is now inside gh-card, scales with card */
.gh-card-qm{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 6.2vh/1 Avenir Next;
  color: #fff;
  /* Allow clicks to pass through */
  pointer-events: none !important;
  opacity: 0;
  /* No shadow on question mark per requirements */
  text-shadow: none;
  z-index: 10;
  /* Ensure question mark scales with parent */
  transition: inherit;
}
.gh-gallery-card--locked .gh-card-qm{ opacity: 1; }

.gh-gallery-view{
  position: relative;
  flex: 1;
  height: 70vh;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-gallery-frame-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vh;
  max-height: 70vh;
}

.gh-gallery-frame{
  max-width: 70vh;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 1.4vh;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  background: rgba(0,0,0,.12);
}

/* Question mark on locked full-size frame */
.gh-gallery-frame-qm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 20vh/1 Avenir Next;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.gh-gallery-view.is-locked .gh-gallery-frame-qm {
  opacity: 1;
}

.gh-gallery-buy-btn{
  appearance: none;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.2vh;
  padding: 1.0vh 1.2vh;
  border-radius: 1.1vh;
  font: 900 2.4vh/1 Avenir Next;
  color: #fff;
  background: #5c5c8f;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

.gh-gallery-buy-title{
  white-space: nowrap;
}

.gh-gallery-buy-price{
  display: inline-flex;
  align-items: center;
  gap: .6vh;
  padding: .45vh .7vh;
  border-radius: .85vh;
  background: rgba(0,0,0,.16);
  border: .12vh solid rgba(255,255,255,.14);
  white-space: nowrap;
  flex: 0 0 auto;
}
.gh-gallery-buy-price .gh-points-icon{
  width: 3.7vh;
  height: 3.7vh;
  filter: drop-shadow(0 0.15vh 0.15vh rgba(0,0,0,.22));
  vertical-align: -0.15vh;
}

.gh-gallery-buy-btn:disabled{
  cursor: not-allowed;
  opacity: 1;
  background: #757094;
  color: rgba(255,255,255,.4);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  filter: none;
}
.gh-gallery-buy-btn:disabled .gh-gallery-buy-price{
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.08);
}

.gh-gallery-buy-card{
  position: absolute;
  z-index: 15;
  bottom: 2.4vh;
  width: max-content;
}
.gh-gallery-chat-wrapper{
  position: relative;
}
.gh-gallery-buy-quote{
  position: absolute;
  top: 8vh;
  z-index: 5;
  margin-left: -6vh;
  width: max-content;
}

/* Quote: reuse in-game chat look, but position inside Gallery viewer */
.gh-gallery-chat.chat_new_phrases{
  position: absolute;
  /* right: 3vh; */
  /* bottom: 3vh; */
  max-height: none;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  bottom: -11vh;
}
.gh-gallery-chat.chat_new_phrases .chat_wrapper{
  margin: 0;
  align-items: center;
  justify-content: flex-start; /* avatar left of bubble */
  gap: 1.2vh;
}
.gh-gallery-chat.chat_new_phrases .chat_wrapper img{
  width: 6vh;
  height: 6vh;
  margin-top: 0;
}
.gh-gallery-chat.chat_new_phrases .chat_message{
  margin: 0;
  width: auto;
  max-width: 56vh;
  filter: drop-shadow(0px 0.3vh 0.3vh #00000057);
}