#overlay {
  --ui: clamp(1px, .05208333vw, 1.333333px);
  pointer-events: none;
  color: #f4f0e8;
  font-family: "Manrope Local", Arial, sans-serif;
  font-synthesis: none;
}

.opening {
  position: absolute;
  left: 6.4%;
  top: 7.5%;
  width: 34%;
  color: #f7f4eb;
  text-shadow: 0 3px 32px #14283ab3, 0 1px 5px #203747a0;
  opacity: 0;
  transform: translateY(calc(15 * var(--ui)));
  animation: title-settle 1.55s cubic-bezier(.18,.74,.2,1) .12s forwards;
  will-change: transform, opacity;
}
.opening h1 {
  margin: 0;
  font-family: "Georgia Local", Georgia, serif;
  font-weight: 400;
  font-size: calc(79 * var(--ui));
  letter-spacing: -.049em;
  line-height: 1.12;
}
.opening h1 span { display: block; }
.opening .scroll-hint {
  display: inline-flex;
  gap: calc(13 * var(--ui));
  align-items: center;
  margin-top: calc(27 * var(--ui));
  font-size: calc(13 * var(--ui));
  letter-spacing: .085em;
  color: #fbf7ee;
  opacity: 0;
  transition: opacity 1s ease .2s;
}
.scroll-hint svg { width: calc(13 * var(--ui)); height: calc(24 * var(--ui)); opacity: .9; }
.opening.is-ready .scroll-hint { opacity: .9; }
.opening.is-leaving { animation: none; }
@keyframes title-settle { to { opacity: 1; transform: translateY(0); } }

.money-panel {
  position: absolute;
  top: calc(34 * var(--ui));
  right: calc(40 * var(--ui));
  width: calc(384 * var(--ui));
  opacity: 0;
  transform: translateY(calc(-8 * var(--ui)));
  transition: opacity .7s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
.money-panel.is-visible { opacity: 1; transform: translateY(0); }
.gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: calc(16 * var(--ui)) calc(19 * var(--ui));
  border: 1px solid #f4ecdf33;
  border-radius: calc(11 * var(--ui));
  background: #2a3444e8;
  box-shadow: 0 calc(7 * var(--ui)) calc(26 * var(--ui)) #16223024;
}
.gauge { min-width: 0; border-right: 1px solid #f4ecdf1c; padding: 0 calc(15 * var(--ui)); }
.gauge:first-child { padding-left: 0; }
.gauge:last-child { border-right: 0; padding-right: 0; }
.gauge-label { display: block; color: #e2e1dc; font-size: calc(11 * var(--ui)); font-weight: 500; white-space: nowrap; }
.gauge strong { display: block; margin: calc(4 * var(--ui)) 0 calc(8 * var(--ui)); font-size: calc(25 * var(--ui)); line-height: 1.15; font-weight: 600; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.gauge i { position: relative; display: block; height: calc(2 * var(--ui)); border-radius: 4px; background: #f4ecdf24; }
.gauge i::before { content: ""; position: absolute; left: 0; top: 0; width: calc(2 * var(--ui)); height: 100%; background: currentColor; border-radius: 4px; }
.gauge i::after { content: ""; position: absolute; left: 0; top: 0; width: calc(100% * var(--money-fill, 0)); height: 100%; background: currentColor; border-radius: 4px; }
.gauge.amber { color: #efc078; }
.gauge.blue { color: #a4c7eb; }
.gauge.green { color: #a6d0b2; }
.money-hint { margin: calc(12 * var(--ui)) calc(4 * var(--ui)) 0; font-size: calc(11 * var(--ui)); letter-spacing: .012em; color: #f9f5e9; text-shadow: 0 1px 5px #1b253bbb; opacity: 0; }

.caption {
  position: absolute;
  left: calc(40 * var(--ui));
  bottom: calc(32 * var(--ui));
  display: flex;
  gap: calc(14 * var(--ui));
  align-items: center;
  padding: calc(14 * var(--ui)) calc(21 * var(--ui)) calc(14 * var(--ui)) calc(15 * var(--ui));
  border: 1px solid #f4ecdf22;
  border-radius: calc(10 * var(--ui));
  background: #2a3444e8;
  box-shadow: 0 5px 25px #16223022;
  opacity: 0;
  transform: translateY(calc(8 * var(--ui)));
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.caption.is-visible { opacity: 1; transform: translateY(0); }
.caption p { margin: 0; max-width: calc(780 * var(--ui)); font-size: calc(16 * var(--ui)); font-weight: 500; letter-spacing: -.016em; line-height: 1.45; }
.beat-mark { width: calc(27 * var(--ui)); height: calc(27 * var(--ui)); flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #e4bb75; color: #333b43; font-size: calc(13 * var(--ui)); font-weight: 700; }

.film-controls {
  position: absolute;
  right: calc(40 * var(--ui));
  bottom: calc(34 * var(--ui));
  display: flex;
  gap: calc(6 * var(--ui));
  align-items: center;
  padding: calc(7 * var(--ui));
  border: 1px solid #f4ecdf28;
  border-radius: calc(10 * var(--ui));
  background: #2a3444e8;
  box-shadow: 0 5px 25px #16223022;
  transition: opacity .65s ease;
  pointer-events: auto;
}
.film-controls button { min-width: calc(35 * var(--ui)); height: calc(35 * var(--ui)); padding: 0 calc(8 * var(--ui)); display: grid; place-items: center; border: 1px solid transparent; border-radius: calc(6 * var(--ui)); background: transparent; color: #e7e8e3; font-size: calc(13 * var(--ui)); cursor: pointer; }
.film-controls button:hover { background: #f8f2e315; border-color: #f2cf9455; }
.film-controls button svg { display: block; width: calc(17 * var(--ui)); height: calc(17 * var(--ui)); }
.film-controls .play-button { min-width: calc(76 * var(--ui)); padding: 0 calc(16 * var(--ui)); color: #f2d6a3; background: #d1ad5715; border-color: #eac58244; }
.film-controls .play-button:hover { background: #dfba5c29; }
.film-controls .beat-button { margin: 0 calc(4 * var(--ui)); color: #eccc90; background: #e8bd7422; border-color: #e8bd7444; }
.film-controls .control-divider { width: 1px; height: calc(18 * var(--ui)); background: #f4ecdf22; margin: 0 calc(2 * var(--ui)); }
.film-controls button:disabled { opacity: .4; cursor: default; }
.film-controls button:disabled:hover { background: transparent; border-color: transparent; }
.film-progress { position: absolute; left: 0; top: 0; right: 0; height: calc(2 * var(--ui)); background: #f1f3ee26; transition: opacity .65s ease; }
.film-progress i { display: block; height: 100%; width: 100%; background: #e8c581; transform: scaleX(0); transform-origin: left center; }
.film-progress input { position: absolute; left: 0; top: 0; width: 100%; height: calc(14 * var(--ui)); opacity: 0; margin: 0; cursor: ew-resize; pointer-events: auto; }
.controls-idle .film-controls, .controls-idle .film-progress { opacity: 0; pointer-events: none; }
.controls-idle .film-progress input { pointer-events: none; }

.table-tooltip { position: absolute; z-index: 4; pointer-events: none; border: 1px solid #f2d19c66; border-radius: calc(6 * var(--ui)); padding: calc(8 * var(--ui)) calc(12 * var(--ui)); color: #f9ecd2; background: #293442f5; box-shadow: 0 5px 20px #111d3155; font-size: calc(13 * var(--ui)); font-weight: 500; white-space: nowrap; }
.table-shade { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: #1c293855; backdrop-filter: blur(3px); pointer-events: auto; }
.table-card { position: relative; min-width: calc(340 * var(--ui)); padding: calc(45 * var(--ui)) calc(60 * var(--ui)); border: 1px solid #e2c38c77; border-radius: calc(13 * var(--ui)); background: #313d4b; box-shadow: 0 22px 90px #121f4480; }
.table-card h2 { margin: 0; font-family: "Georgia Local", Georgia, serif; font-size: calc(30 * var(--ui)); font-weight: 400; color: #f6e9cd; }
.card-close { position: absolute; top: calc(11 * var(--ui)); right: calc(12 * var(--ui)); display: grid; place-items: center; width: calc(29 * var(--ui)); height: calc(29 * var(--ui)); padding: 0; color: #e2e4dd; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.card-close svg { width: calc(18 * var(--ui)); height: calc(18 * var(--ui)); }
.card-close:hover { background: #ffffff12; }
#overlay button:focus-visible, .film-progress:focus-within { outline: 2px solid #f1c981; outline-offset: 3px; }

.opening::before { content: ''; position: absolute; z-index: -1; inset: -55px -80px -45px -65px; background: radial-gradient(ellipse, #253c4b75 0%, #253c4b32 45%, transparent 73%); filter: blur(26px); pointer-events: none; }
.film-controls .beat-button { margin: 0; min-width: calc(28 * var(--ui)); background: transparent; border-color: transparent; }
.film-controls .beat-button[aria-current="step"] { background: #e8bd7422; border-color: #e8bd7444; }

.chapter-row{position:absolute;bottom:calc(104 * var(--ui));left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px 14px;border-radius:24px;background:#35404ae8;pointer-events:auto;z-index:5}.chapter-row button{font:inherit;color:#fff;background:transparent;border:0;border-radius:50%;width:32px;height:32px;cursor:pointer}.chapter-row button[aria-current="step"]{background:#edf1ef;color:#313b43}.chapter-row button:disabled{opacity:.25;cursor:default}.beat-row{display:flex;gap:inherit}.controls-idle .chapter-row{opacity:.3}.chapter-row:hover{opacity:1}
.gauge.has-provision i::before { width:calc(var(--provision-fill) * 100%);height:calc(7 * var(--ui));top:calc(-3 * var(--ui));background:#b292daaa;border:1px solid #d6bfee88;border-radius:3px; }
.provision-note { margin-top:calc(10 * var(--ui));font-size:calc(12 * var(--ui));color:#f0dfff;background:#354052e8;border-radius:5px;padding:6px 10px;display:inline-block; }