/* ANNUNAKI CITY // sim.css :: gold-on-obsidian watchers' console */

/* ---- THE HOUSE TYPE: IBM PLEX, SELF-HOSTED ----------------------------------
   Gemini's typography brief (2026-08-16), adopted after evaluation: IBM
   designed Plex to voice "the relationship between human and machine", which
   is this game's whole premise — Mono for the system's voice, Sans for the
   story's. Self-hosted woff2 (latin + latin-ext for Turkish, ~97KB total, a
   week of cache per .htaccess) rather than a Google Fonts link: the PWA works
   offline and no third party learns who is playing. The system stacks below
   remain as fallbacks, so a failed font load degrades to exactly the old look. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/IBMPlexMono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/IBMPlexMono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexSans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexSans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- ENDÜSTRİYEL NOIR (owner's UI mandate, 2026-08-16) --------------------
   The old ladder was warm parchment on brown-black — an archaeology museum.
   The console belongs to a corporation: the ground is vantablack, the metal is
   tarnished and matte, and the ONLY bright thing anywhere is the alarm. */
:root {
  --bg: #060709;
  --panel: #0b0c10;
  --gold: var(--w-gold);
  --gold-dim: #7a6437;
  --ink: #b8ad8c;
  --ink-dim: #625b47;
  --line: #24242a;
  /* THE ACCENT UNDER EVERY NAME THE STYLESHEET GAVE IT. "Gold" is written here
     as three different rgba triples and five different hexes -- the base
     (var(--w-gold)), the lit (var(--acc-lit)), the door (var(--acc-door)), the bright icon
     (var(--acc-hi)), the rim (var(--acc-rim)), the deep (var(--acc-deep)) and the pale badge text
     (var(--acc-pale)). They are one colour at seven steps. racePalette() re-tints all
     of them per kind, and for the Annunaki every value below is exactly what
     shipped, so their console renders unchanged. */
  --gold-rgb: 197,160,89;
  --lit-rgb: 232,201,106;
  --door-rgb: 216,183,108;
  --acc-hi: #d9b877;
  --acc-door: #d8b76c;
  --acc-lit: #e8c96a;
  --acc-rim: #8c7343;
  --acc-deep: #8c6a1e;
  --acc-pale: #f0e4c4;
  /* THE PARCHMENT LADDER. Under the accent there is a second warm family --
     not gold but PAPER: sand, bone, clay, olive, mud. Fifteen steps, ~190
     uses. A Kovan console has no paper in it; it has a machine. Named here so
     racePalette() can rotate the whole ladder to another hue, keeping every
     step's saturation and lightness -- which keeps the relationships between
     them exactly as they were tuned. */
  --w-glow: #f0cd7a;
  --w-gold: #c5a059;
  --w-lit: #e0c489;
  --w-warm: #d9b46a;
  --w-sand: #d9c9a8;
  --w-bone: #d8cfae;
  --w-tan: #cfa864;
  --w-brass: #c9a24a;
  --w-clay: #b0966a;
  --w-stone: #a89a80;
  --w-olive: #a2916d;
  --w-mud: #8a7a5c;
  --w-earth: #8a7250;
  --w-moss: #6d6045;
  --w-ash: #c0b298;
  --bad: #e63900;
  /* set per kind by racePalette(); the value here is only the cold-boot one */
  --good: var(--w-gold);
  --good-dim: rgba(var(--gold-rgb),.35);
  /* ---- TWO TYPEFACES, AND WHY -------------------------------------------
     Everything was Courier New: thin strokes, wide glyphs, weak hinting, and
     .03em of tracking on top of it. On a phone it is hard to read, and the
     place it hurt most was the long paragraphs — a card's situation text, its
     "?" sheet, the verdicts in the watch report.

     --font   the instrument. Headings, labels, readings, anything with a
              number in it. The system's own mono is the same terminal
              register as Courier New and far better drawn at small sizes,
              and it keeps figures on a common width.
     --read   the voice. Paragraphs a person actually reads through. The
              system UI face, which every platform has already tuned for
              exactly this and which draws Turkish diacritics properly.
     Neither is downloaded, so the game stays offline-clean and adds no weight. */
  --font: 'IBM Plex Mono', ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
  --read: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #000; color: var(--ink);
  font-family: var(--font); font-size: 15px; letter-spacing: .03em;
  overflow: hidden;
}

/* explicit offsets (not `inset`) for older mobile browsers */
.crt {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  /* the void the interface sits in — barely lit at the centre, absolute at the
     edges, so the console reads as the only thing switched on for light-years */
  background: radial-gradient(ellipse at center, #0c0d11 0%, #070809 62%, #000 100%);
}
/* ---- THE TUBE IS A FRAME, NOT A TUNNEL (owner, 2026-08-22: 'buradaki
   karakterin parlaklığı aynı yukarıdaki ikonlar gibi olması gerekiyor, bu
   alanlarda hep bir karanlık efekti kullanılmış') ---------------------------
   The vignette was a FIXED 140px blur over a 30px spread, so its black reached
   30 + 140/2 = 100px in from every edge no matter how wide the screen was.
   Measured live at 375x812 with a card dealt: the picture is 375x521 and the
   wash bit 100px off each side — 53% of the picture's width under black,
   leaving a clean band of 175px. The same 100px on a 1280px desktop is 16%,
   which is why this only ever looked wrong on a phone. It also explains the
   comparison the owner drew: the strip's marks sit ABOVE --deck-top and are
   excluded from both sheets, so they were being read against a figure with
   half its width painted over.

   Both layers are proportional now. The vignette holds a steady ~12% of the
   width on any screen; the scan sheet keeps the tube's texture without
   striping a face. */
/* THE GLASS IS GONE. The vignette put up to 140px of 85% black over every
   edge of the screen and the comb laid a black line across every fourth pixel
   of every paragraph. Both were sold as texture and both were read as dirt on
   the words. The ground below (.crt's radial) still darkens the room; nothing
   sits in front of the text any more. The .scanlines element stays in the
   markup — it is addressed from a few layout rules — but it draws nothing. */
.crt::before { content: none; }
.scanlines { display: none; }

/* ---- top bar (in flow; wraps on narrow screens) ---- */
#topbar {
  position: relative; z-index: 10; flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  min-height: 42px; padding: 6px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  text-transform: uppercase; font-size: 12px;
}
.brand { color: var(--gold); font-weight: bold; letter-spacing: .2em; text-shadow: 0 0 8px rgba(var(--lit-rgb),.4); }
.sep { color: var(--ink-dim); }
.grow { flex: 1; }
#topbar b { color: var(--gold); }
#topbar button {
  font-family: var(--font); font-size: 12px; cursor: pointer;
  color: var(--ink); background: #0c0a06; border: 1px solid var(--line);
  padding: 5px 10px; transition: all .12s;
}
#topbar button:hover { color: var(--gold); border-color: var(--gold-dim); }
#topbar button.sel { color: #0a0906; background: var(--gold); border-color: var(--gold); font-weight: bold; }
#btn-reseed { color: var(--bad) !important; }
#btn-reseed:hover { background: var(--bad) !important; color: #0a0906 !important; border-color: var(--bad) !important; }

/* ---- layout (in flow below the wrapping topbar) ---- */
#layout {
  position: relative; z-index: 5; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr clamp(340px, 25vw, 460px);
}
@media (max-width: 1100px) { #layout { grid-template-columns: 1fr 320px; } }
#left { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }

#statbar {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 7px 14px;
  border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase;
  color: var(--ink-dim);
}
#statbar b { color: var(--gold); margin-left: 4px; }
.flags { color: var(--bad); font-weight: bold; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }

#viewport { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: auto; }
#worldview { image-rendering: pixelated; border: 1px solid var(--line); max-width: 100%; max-height: 100%; }

#genebar {
  padding: 5px 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-dim); text-transform: uppercase;
}
#genebar span { color: var(--gold-dim); }

#feed {
  list-style: none; margin: 0; padding: 8px 14px; height: 150px; overflow-y: auto;
  border-top: 1px solid var(--line); font-size: 14px;
}
#feed li { padding: 3px 0; border-bottom: 1px solid rgba(42,36,22,.5); line-height: 1.35; }
#feed .yr { color: var(--gold-dim); margin-right: 6px; }
#feed li.bad { color: var(--bad); }
#feed li.good { color: var(--good); }

/* ---- right panel ---- */
#right { display: flex; flex-direction: column; background: var(--panel); min-height: 0; }
/* ---- C · KART: the tab strip is a segmented control ------------------------
   Seven tabs in one row crushed to 43px and overlapped; three columns left an
   orphan row. Four columns takes 7 tabs as 4 + 3, and each button carries its
   mark above its label so the label has the full cell width. */
#tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; padding: 1px 1px 0; background: var(--line);
}
.tab {
  box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 3px 8px; cursor: pointer;
  font-size: 11px; letter-spacing: .05em; line-height: 1.15;
  color: var(--ink-dim); background: rgba(8,7,12,.93);
  border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s, color .14s;
}
.tab > i { font-style: normal; font-size: 15px; line-height: 1; opacity: .9; }
.tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tab > b { font-weight: normal; font-size: 11px; color: var(--ink-dim); opacity: .8; }
.tab:hover { color: var(--ink); background: rgba(20,17,26,.95); }
.tab.sel {
  color: var(--race); background: color-mix(in srgb, var(--race) 13%, rgba(8,7,12,.95));
  box-shadow: inset 0 -2px 0 var(--race);
}
.tab.sel > i { opacity: 1; }
.tab:last-child { border-right: none; }
.tab:hover { color: var(--ink); }
.tab.sel { color: var(--gold); background: #171408; font-weight: bold; }
.pane { flex: 1; overflow-y: auto; min-height: 0; }
.pane.hidden { display: none !important; }   /* an id-level display: rule must never beat this */

/* objective bar — what humanity reaches for next */
#next-bar { padding: 10px 12px 6px; border-bottom: 1px solid var(--line); }
.nb-label { font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.nb-label b { color: var(--gold); }
.nb-track { height: 7px; background: #0c0a06; border: 1px solid var(--line); }
.nb-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .4s; }

/* grounding line inside the decision modal */
#dc-ctx { font-size: 11.5px; color: var(--ink-dim); letter-spacing: .1em; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px dotted var(--line); }
/* the provenance line: a consequence card names the decision that caused it */
#dc-cause { font-size: 11px; color: #c99b4a; letter-spacing: .08em;
  margin: -4px 14px 8px 40px; opacity: .9; }
/* ---- MUHURLU HALDE NEGATIF MARJ SATIRI SERIDIN ALTINA SOKUYOR (b1022) ----
   Sahibi: "bir kararin bedeli yazan yer de yine en yukarida yarim cikmis".
   Olculdu (375x812, gercek muhur karesi, 44 ornek):
     cause ust 50 · ust serit alt 54  ->  KIRPILAN 4px
   Yani iki satirlik bedel satirinin ILK SATIRI 4px boyunca seridin altinda
   kaliyordu; 11px yaziyla bu satirin ucte birine denk geliyor.
   SEBEP: muhurlu halde #dc-scene `position:absolute; inset:0` ile akistan
   cikiyor, dolayisiyla normalde sahnenin ALTINDA duran #dc-cause kutunun
   en ustune yukseliyor -- ve ustunde -4px'i emecek bir sey kalmiyor.
   Muhursuz halde ayni satir 459'da, kirpilma yok (olculdu: KIRPILAN -405),
   o yuzden negatif marj oradan kaldirilmadi; yalnizca muhurlu hal duzeltildi.
   Olcum sonrasi: KIRPILAN +4 -> -8, yani satir seridin 8px altinda basliyor. */
.dc-box.muhurlu #dc-cause { margin-top: 8px; }

#milestones { list-style: none; margin: 0; padding: 8px 12px; }
#milestones li {
  display: flex; justify-content: space-between; padding: 6px 8px; margin: 2px 0;
  border: 1px solid transparent; color: var(--ink-dim); font-size: 13.5px;
}
#milestones li.done { color: var(--gold); border-color: var(--line); background: #171408; }
#milestones li.done .myear { color: var(--good); }
#milestones li.asc { letter-spacing: .15em; font-weight: bold; }
#milestones li.asc.done { color: #fff; background: var(--gold-dim); }
.myear { color: var(--line); }

.asc-label { color: var(--good); }
.asc-label b { color: var(--good) !important; }

#tabs .tab b { color: var(--gold-dim); font-weight: normal; margin-left: 3px; }

/* ---- census ---- */
#census { padding: 8px 12px; font-size: 12px; }
.cs { color: var(--gold); font-size: 11px; letter-spacing: .14em; margin: 9px 0 4px; }
.crow { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; color: var(--ink-dim); font-size: 13px; border-bottom: 1px dotted var(--line); }
.crow b { color: var(--gold); }
.crow span { margin-right: 4px; }
.cbar { height: 4px; background: #0c0a06; border: 1px solid var(--line); margin: 2px 0 4px; }
.cbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

#annals { list-style: none; margin: 0; padding: 8px 12px; }
#annals li { padding: 6px; margin: 4px 0; border: 1px solid var(--line); font-size: 12px; }
.an-n { color: var(--gold); font-weight: bold; }
.an-cause { float: right; font-weight: bold; }
.an-cause.bad { color: var(--bad); }
.an-cause.good { color: var(--good); }
.an-detail { color: var(--ink-dim); font-size: 11px; margin-top: 3px; }
.an-story { color: var(--ink); font-size: 11px; margin-top: 5px; line-height: 1.45; border-top: 1px dotted var(--line); padding-top: 4px; }
.an-empty { color: var(--ink-dim); border: none !important; text-align: center; }

#credit { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); text-transform: uppercase; }
#credit a { color: var(--gold-dim); text-decoration: none; }
#credit a:hover { color: var(--gold); }

.research { color: #6ab8e8; }
.pct.good { color: var(--good) !important; }
.pct.warn { color: var(--gold) !important; }
.pct.bad { color: var(--bad) !important; animation: blink 1s steps(1) infinite; }

/* ---- divine decision modal ---- */
.decision {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,3,1,.8);
  overflow: hidden;
}
.decision::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg,
    rgba(var(--lit-rgb),0) 0deg, rgba(var(--lit-rgb),.06) 12deg, rgba(var(--lit-rgb),0) 24deg,
    rgba(var(--lit-rgb),0) 90deg, rgba(var(--lit-rgb),.05) 102deg, rgba(var(--lit-rgb),0) 114deg,
    rgba(var(--lit-rgb),0) 180deg, rgba(var(--lit-rgb),.06) 192deg, rgba(var(--lit-rgb),0) 204deg,
    rgba(var(--lit-rgb),0) 270deg, rgba(var(--lit-rgb),.05) 282deg, rgba(var(--lit-rgb),0) 294deg);
  animation: rays 40s linear infinite;
  pointer-events: none;
}
@keyframes rays { to { transform: rotate(360deg); } }
.decision.hidden { display: none; }
.dc-box {
  position: relative;
  width: min(600px, 92%); max-height: 88%; overflow-y: auto; overflow-x: hidden;
  text-align: center; padding: 22px 26px;
  border: 1px solid var(--gold-dim); background: #0e0c07;
  box-shadow: 0 0 40px rgba(var(--lit-rgb),.15);
  animation: dcIn .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes dcIn { from { transform: scale(.9) translateY(14px); } }

/* ---- THE VERB IS NEVER OFF-SCREEN ------------------------------------------
   MEASURED, 2026-08-31, at a viewport 420px tall: .dc-box is 356px with its own
   overflow-y, the card's prose fills all of it, and the two option buttons sit
   at y=366..494 — inside the box, below its visible area, reachable only by
   scrolling a container that gives no sign it scrolls. The one thing a decision
   card exists for was the one thing not on screen.
   The prose may scroll; the choice may not. On a short screen the option list
   is pinned to the foot of the card and the text runs under it. */
@media (max-height: 620px) {
  #decision #dc-options {
    position: sticky; bottom: 0; z-index: 3;
    background: #0e0c07;
    padding-top: 8px;
    /* the seam where the prose slides under the buttons, softened rather than
       drawn as a rule — a hairline here reads as a second card edge */
    box-shadow: 0 -16px 18px -10px #0e0c07;
  }
}
.dc-eye {
  font-size: 30px; color: var(--gold); text-shadow: 0 0 14px rgba(var(--lit-rgb),.6);
  animation: eyePulse 2.4s ease-in-out infinite;
}
@keyframes eyePulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 14px rgba(var(--lit-rgb),.6); }
  50% { transform: scale(1.15); text-shadow: 0 0 26px rgba(var(--lit-rgb),.95); }
}
.dc-box h2 { margin: 8px 0 8px; font-size: 24px; letter-spacing: .16em; color: var(--gold); }
/* The card's own sentences — the longest thing a player reads in this game. */
/* the story's voice: Sans, never justified, never all-caps (spec §B) */
#dc-text { color: var(--ink); font-family: var(--read); text-align: left;
  font-size: 15.5px; line-height: 1.6; margin: 0 0 14px;
  font-family: var(--read); letter-spacing: 0; }
#dc-options { display: flex; flex-direction: column; gap: 8px; }
.dc-opt {
  font-family: var(--font); cursor: pointer; text-align: left;
  background: #12100a; border: 1px solid var(--line); padding: 10px 14px;
  transition: border-color .12s, background .12s, transform .12s;
  /* NO FORWARDS FILL, AND NO BLUR IN THE KEYFRAMES. Both were load-bearing for
     the wrong thing: the fill held opacity at 1, and holding it meant the plate
     never left the animation — which, because the animation touched `filter`,
     pinned it to a composited layer that iOS rasterises once. The plate's own
     words came back soft. Opacity now rests at 1 in the style, the entrance
     fades from 0 with `backwards`, and nothing filters. */
  opacity: 1; animation: optIn .34s ease-out backwards;
}
@keyframes optIn { from { transform: translateY(4px); } to { transform: none; } }
@media (hover: hover) {
.dc-opt:hover { border-color: var(--gold); background: #171408; transform: translateX(4px); }
}
/* ACTION vs CONSEQUENCE (Gemini type spec §C): the action line is the
   machine's voice — mono, semibold, zero tracking, bright gold, and it must
   out-rank its own consequence line in both size and light. */
.dc-label { display: block; color: var(--gold); font-family: var(--font);
  font-weight: 600; font-size: 14px; letter-spacing: 0; }
/* THE ACTION IS READ, THE CONSEQUENCE IS OFFERED. By year 200 a player reads
   only the labels, and the old styling made the hint compete for that read —
   same brightness class, four pixels away. The hint drops to .62 so the eye can
   skip it without effort, and comes back to full under the finger, because the
   moment of weighing one option is exactly when its consequence is wanted. */
.dc-hint { display: block; color: var(--ink); font-size: 13px; line-height: 1.4;
  margin-top: 4px; font-family: var(--read); letter-spacing: 0;
  opacity: .65; transition: opacity .15s; }
.dc-opt:hover .dc-hint, .dc-opt:focus-visible .dc-hint, .dc-opt:active .dc-hint { opacity: 1; }

/* THE ARMED OPTION. First tap arms: the option lights gold, its hint comes to
   full, the readings above hold their lean, and the second tap's meaning is
   written on the option itself. (The old CRT commit-flicker that jolted the
   whole panel on every answer is gone — the screen now only shakes for events
   that deserve it.) */
/* a commissioned plate in the scene slot — same frame the vector scenes get */
.dc-plate { display: block; width: 100%; max-height: 34vh; object-fit: cover;
  object-position: center 30%; }
.dc-opt { position: relative; }
.dc-opt.armed { border-color: var(--gold); background: rgba(var(--lit-rgb),.07);
  box-shadow: 0 0 0 1px rgba(var(--lit-rgb),.25), 0 0 18px rgba(var(--lit-rgb),.12); }
.dc-opt.armed .dc-hint { opacity: 1; }
/* THE CUE SITS UNDER THE OPTION, NOT ON TOP OF IT. It was absolutely placed at
   the top-right corner, which is empty on a short label and directly over the
   words on a long one — "Katili yörüngeden lazerle vur (İbret)" had MÜHÜRLE
   printed across it. It goes to the bottom edge now, and the armed option
   reserves the room, so it can never collide with anything it is describing. */
/* the base .dc-opt padding is set elsewhere at a weight this has to match, or
   the cue sits over the last line of a long hint instead of under it */
/* THE WHOLE BOX IS THE SEAL. A 10px pill in a corner is what a web form calls
   a submit button; this is a god deciding what a species is going to be, and
   the control has to weigh that much. Armed, the option stops being a list item
   — the plate lights, and the bottom of it becomes a full-width press bar in
   the alarm's own weight. Papers, Please is the reference the owner gave: the
   stamp is the whole pleasure of the game, so the stamp gets the whole box. */
.dc-opt.armed, body.mapless .dc-opt.armed { padding-bottom: 42px; }
.dc-opt.armed::after { content: attr(data-confirm); position: absolute;
  left: 0; right: 0; bottom: 0; height: 34px; display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .3em;
  color: #0b0906; border: 0; border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, var(--w-glow), var(--w-gold));
  box-shadow: 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  animation: armPulse 1.2s ease-in-out 4; }
/* NO FILTER HERE. brightness() on a loop pins this bar to its own composited
   layer for as long as it is armed, and iOS rasterises that layer once — the
   text goes soft (owner's screenshot). A glow says the same thing with a
   box-shadow, which repaints in place. */
@keyframes armPulse {
  0%, 100% { box-shadow: 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35),
                         0 0 0 rgba(var(--lit-rgb),0); }
  50%      { box-shadow: 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35),
                         0 0 16px rgba(var(--lit-rgb),.5); } }
@media (prefers-reduced-motion: reduce) { .dc-opt.armed::after { animation: none; } }/* press handled by MÜHÜR */

.dc-opt.armed:active::after { background: linear-gradient(180deg, var(--w-gold), var(--w-earth)); }
/* THE PLATE THAT WAS PRESSED TAKES THE BLOW. The chosen option used to simply
   vanish with the card; for the half-second the seal is landing it is the thing
   the player did, and it reads that way. */
/* THE SEAL MUST NOT ERASE THE PLATE. The base .dc-opt enters at opacity:0 and
   optIn's forwards-fill is what holds it at 1 — so swapping the animation to
   optSeal dropped that fill and the CHOSEN option vanished while its unchosen
   sibling (still carrying optIn's fill) ignored the .locked dimming. Exactly
   backwards ("seçilen şık kalmalı, seçilmeyen yok olmalı"). opacity:1 stands
   on the sealed plate itself, and .locked kills the entrance fill on the
   others so the dimming actually lands. */
.dc-opt.sealed { animation: optSeal .42s cubic-bezier(.2,.9,.3,1) backwards;
  opacity: 1 !important; border-color: var(--w-glow) !important; }
@keyframes optSeal {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(240,205,122,.55); }
  22%  { transform: scale(.955); box-shadow: 0 0 0 10px rgba(240,205,122,.30);
         background: rgba(240,205,122,.22); }
  100% { transform: scale(1);    box-shadow: 0 0 0 22px rgba(240,205,122,0); }
}
@media (prefers-reduced-motion: reduce) { .dc-opt.sealed { animation: none; } }

/* THE "?" TEACHES ITSELF ONCE. The why-sheet is the best-hidden thing on the
   card, so for the first few cards the button breathes until it has been
   pressed once — main.js stamps data-teach while the count is low. */
#dc-why[data-teach] { animation: whyPulse 1.6s ease-in-out infinite; }
@keyframes whyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--lit-rgb),.0); }
  50% { box-shadow: 0 0 10px 2px rgba(var(--lit-rgb),.45); color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) { #dc-why[data-teach] { animation: none; color: var(--gold); } }
.dc-note { margin-top: 14px; color: var(--ink-dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; animation: blink 1.6s steps(1) infinite; }

/* effect chips: each option's true consequences */
#dc-legend { font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip {
  font-size: 11.5px; padding: 2px 8px; border: 1px solid var(--line);
  background: #0a0805; color: var(--ink-dim); letter-spacing: .04em;
}
.chip.g { color: var(--good); border-color: var(--good-dim); }
.chip.b { color: var(--bad); border-color: rgba(255,106,90,.35); }
.chip.n { color: var(--gold); border-color: rgba(var(--lit-rgb),.35); }

/* ---- world / regions panel ---- */
.favor-label { color: var(--gold); }
.favor-label b { color: var(--gold) !important; }
#regions { padding: 8px 10px; }
.rg-card { border: 1px solid var(--line); background: #14110a; padding: 9px 11px; margin: 0 0 8px; cursor: pointer; transition: border-color .12s; }
.rg-card:hover { border-color: var(--gold-dim); }
.rg-card.sel { border-color: var(--gold); background: #171408; }
.rg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.rg-name { color: var(--gold); font-weight: bold; letter-spacing: .12em; font-size: 14px; }
.rg-pop { color: var(--ink-dim); font-size: 11px; }
.rg-belief { margin-top: 4px; font-size: 12.5px; color: var(--ink); }
.rg-belief b { color: var(--gold); }
.rg-stats { margin-top: 3px; font-size: 11.5px; color: var(--ink-dim); }
.rg-more { margin-top: 5px; font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; }
.rg-acts-label { margin: 9px 0 5px; font-size: 11px; color: var(--gold-dim); letter-spacing: .12em; }
.rg-acts { display: flex; flex-direction: column; gap: 5px; }
.ra-btn {
  font-family: var(--font); font-size: 12px; text-align: left; cursor: pointer;
  color: var(--ink); background: #0c0a06; border: 1px solid var(--line); padding: 7px 9px;
  display: flex; justify-content: space-between; gap: 6px; transition: all .12s;
}
.ra-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.ra-btn:disabled { opacity: .4; cursor: not-allowed; }
.ra-cost { color: var(--gold-dim); }

/* ---- the other hand ---- */
.rg-acts-label.wrath { color: #d4694f; letter-spacing: .14em; border-top: 1px solid rgba(212,105,79,.22); padding-top: 8px; }
.rw-btn {
  font-family: var(--font); font-size: 12px; text-align: left; cursor: pointer;
  color: #e3a893; background: #150c08; border: 1px solid rgba(212,105,79,.3); padding: 7px 9px;
  display: flex; justify-content: space-between; gap: 6px; transition: all .12s;
}
.rw-btn:hover:not(:disabled) { color: #ffd4c2; border-color: #d4694f; background: #1e0f09; box-shadow: 0 0 14px rgba(212,105,79,.25); }
.rw-btn:disabled { opacity: .38; cursor: not-allowed; }
.rw-btn.locked { color: var(--ink-dim); border-style: dashed; }
.rw-btn.locked .ra-cost { color: #9a86c8; }

/* ---- top bar: echo, streak, seed, sound ---- */
.echo-label { color: #b9a8dd; }
.echo-label b { color: #d6c6f5 !important; }
.streak-chip { color: #ffb057; letter-spacing: .06em; }
.streak-chip.hidden { display: none; }
.seed-chip { cursor: pointer; color: var(--ink-dim); letter-spacing: .04em; user-select: none; }
.seed-chip b { color: var(--gold-dim); }
.seed-chip i { color: var(--good); font-style: normal; }
.seed-chip:hover b { color: var(--gold); }

/* ---- decision: the meters you are judged on ---- */
.dc-meters { display: grid; gap: 4px; margin: 4px 0 12px; text-align: left; }
.dm { display: grid; grid-template-columns: 74px 1fr 62px; gap: 7px; align-items: center; font-size: 11px; color: var(--ink-dim); letter-spacing: .08em; }
.dm-b { height: 6px; background: #0a0805; border: 1px solid var(--line); }
.dm-b i { display: block; height: 100%; transition: width .3s; }
.dm-b i.g { background: linear-gradient(90deg, var(--gold-dim), var(--good)); }
.dm-b i.n { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.dm-b i.b { background: linear-gradient(90deg, #6b2a22, var(--bad)); }
.dm b { color: var(--gold); text-align: right; font-size: 11px; }
.dc-tone { float: right; font-size: 11px; letter-spacing: .12em; padding: 1px 6px; border: 1px solid var(--line); }
.dc-tone.g { color: var(--good); border-color: var(--good-dim); }
.dc-tone.b { color: var(--bad); border-color: rgba(255,106,90,.35); }
.dc-tone.n { color: var(--gold-dim); }

/* ---- follow ---- */
.pc-follow {
  width: 100%; margin: 8px 0 2px; padding: 7px 0; cursor: pointer;
  font-family: var(--font); font-size: 11px; letter-spacing: .1em;
  color: var(--gold); background: #14110a; border: 1px solid var(--gold-dim); transition: all .12s;
}
.pc-follow:hover { background: #1c1710; box-shadow: 0 0 14px rgba(var(--lit-rgb),.2); }
.pc-follow.on { color: #0b0a07; background: var(--gold); }

/* ---- the long memory ---- */
.echo-box { width: min(560px, 94%); max-height: 90%; overflow-y: auto; }
.ec-bank { display: flex; justify-content: center; gap: 22px; font-size: 12px; color: var(--ink-dim); letter-spacing: .1em; margin-bottom: 14px; }
.ec-bank b { color: #d6c6f5; }
.ec-daily { font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; margin: -6px 0 14px; }
.ec-daily b { color: var(--gold); }
.ec-list { display: grid; gap: 8px; text-align: left; margin-bottom: 16px; }
.ec-card { border: 1px solid var(--line); background: #100e08; padding: 10px 12px; cursor: pointer; transition: all .12s; }
.ec-card:hover { border-color: #7d6bb0; box-shadow: 0 0 16px rgba(150,120,210,.18); }
.ec-card.owned { border-color: var(--good-dim); background: var(--t-panel); cursor: default; }
.ec-card.owned:hover { box-shadow: none; }
.ec-card.poor { opacity: .5; }
.ec-top { display: flex; align-items: center; gap: 8px; }
.ec-icon { font-size: 18px; }
.ec-name { flex: 1; color: var(--gold); letter-spacing: .1em; font-size: 13px; }
.ec-cost { color: #d6c6f5; font-size: 12px; }
.ec-card.owned .ec-cost { color: var(--good); }
.ec-desc { margin-top: 5px; font-size: 12px; color: var(--ink); line-height: 1.5; }

/* ---- the chronicle card ---- */
.share-box { width: min(700px, 96%); max-height: 94%; overflow-y: auto; }
.sh-canvas { margin: 6px 0 10px; }
.sh-canvas canvas { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.sh-text {
  text-align: left; white-space: pre-wrap; word-break: break-word; margin: 0 0 12px;
  font-family: var(--font); font-size: 12px; line-height: 1.6; color: var(--ink);
  background: #0a0805; border: 1px solid var(--line); padding: 10px 12px;
}
.sh-btns { display: flex; gap: 8px; }
.sh-btns button { flex: 1; margin: 0 !important; }
.ov-share {
  font-family: var(--font); font-size: 14px; letter-spacing: .1em; cursor: pointer;
  color: var(--gold); background: #14110a; border: 1px solid var(--gold-dim);
  padding: 11px 26px; margin: 0 8px 10px 0;
}
.ov-share:hover { background: #1c1710; box-shadow: 0 0 18px rgba(var(--lit-rgb),.3); }
.ov-share.hidden { display: none; }
.ov-echo { color: #d6c6f5 !important; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px !important; }

/* how close you were — the reason anyone starts another run */
.ov-near { border: 1px solid rgba(var(--lit-rgb),.35); background: rgba(20,16,8,.55); padding: 10px 14px; margin: 12px 0 4px; }
.ov-near-h { color: var(--gold); font-size: 11px; letter-spacing: .2em; margin-bottom: 7px; }
.ov-near-r { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.ov-near-r b { color: var(--gold); font-size: 22px; min-width: 52px; text-align: right; }
.ov-near-r span { color: var(--ink); font-size: 13px; }

/* ---- game menu ---- */
.gamemenu { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(3,2,0,.88); }
.gamemenu.hidden { display: none; }
.gm-box { width: min(360px, 90%); padding: 26px 28px; border: 1px solid var(--gold-dim); background: #0e0c07; text-align: center; box-shadow: 0 0 50px rgba(var(--lit-rgb),.12); }
.gm-box h2 { margin: 0 0 18px; color: var(--gold); letter-spacing: .2em; font-size: 18px; }
.gm-box button { display: block; width: 100%; margin: 7px 0; padding: 11px 0; font-family: var(--font); font-size: 14px; letter-spacing: .08em; cursor: pointer; color: var(--ink); background: #12100a; border: 1px solid var(--line); transition: all .12s; }
.gm-box button:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.gm-box button:disabled { opacity: .35; cursor: not-allowed; }
.gm-danger { color: var(--bad) !important; }
.gm-danger:hover { border-color: var(--bad) !important; }
.gm-note { margin-top: 14px; font-size: 11px; color: var(--ink-dim); letter-spacing: .08em; text-transform: uppercase; }


/* world-view (zoom out) button */
#viewport { position: relative; }
#btn-worldview { position: absolute; top: 14px; left: 14px; z-index: 6; font-family: var(--font); font-size: 12px; letter-spacing: .1em; cursor: pointer; color: var(--gold); background: rgba(10,8,5,.85); border: 1px solid var(--gold-dim); padding: 7px 12px; }
#btn-worldview:hover { background: var(--gold); color: #0a0906; }
#btn-worldview.hidden { display: none; }

/* character card */
.person-card { position: absolute; top: 14px; right: 14px; z-index: 7; width: 232px; max-height: 88%; overflow-y: auto;
  border: 1px solid var(--gold-dim); background: rgba(12,10,6,.96); padding: 10px 12px; box-shadow: 0 0 26px rgba(0,0,0,.6); }
.person-card.hidden { display: none; }
.pc-head { display: flex; justify-content: space-between; color: var(--gold); font-weight: bold;
  letter-spacing: .1em; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 6px; }
.pc-x { cursor: pointer; color: var(--ink-dim); }
.pc-x:hover { color: var(--bad); }
.pc-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); padding: 2px 0; }
.pc-row b { color: var(--ink); }
.pc-marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pc-gene { display: grid; grid-template-columns: 46px 1fr 30px; gap: 5px; align-items: center; font-size: 11px; color: var(--ink-dim); padding: 1px 0; }
.pc-bar { height: 5px; background: #0c0a06; border: 1px solid var(--line); }
.pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.pc-gene b { color: var(--gold); text-align: right; }

/* chapter deadline + failure */
.ch-deadline { font-size: 11px; color: var(--gold-dim); letter-spacing: .12em; margin-bottom: 6px; }
.ms-dl { font-size: 11px; color: var(--gold-dim); margin-top: 5px; letter-spacing: .06em; }
.ms-dl.urgent { color: var(--bad); font-weight: bold; animation: blink 1.2s steps(1) infinite; }
.ms-item.fail { color: var(--bad); border-color: rgba(255,106,90,.35); background: #1a0f0c; }
#btn-lang { font-weight: bold; }

/* mission / campaign */
.ch-box { width: min(640px, 94%); }
.ch-kind { font-size: 12px; letter-spacing: .18em; font-weight: bold; margin-bottom: 4px; }
.ch-legend { font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
#ch-brief { color: var(--ink); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.ch-goal { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .06em; color: var(--gold); text-transform: uppercase; }
#mission { padding: 10px 12px; }
.ms-head { font-weight: bold; letter-spacing: .16em; font-size: 14px; }
.ms-mission { font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin: 5px 0 4px; }
.ms-ch { color: var(--gold); font-weight: bold; font-size: 13.5px; }
.ms-path { color: var(--ink); font-size: 12.5px; margin-top: 3px; }
.ms-goal { color: var(--ink-dim); font-size: 12px; margin: 4px 0 5px; line-height: 1.4; }
.ms-prog { color: var(--gold-dim); font-size: 11px; margin-top: 4px; }
.ms-item { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 12px;
  color: var(--ink-dim); padding: 5px 6px; border: 1px solid transparent; margin: 2px 0; }
.ms-item.done { color: var(--good); border-color: var(--line); background: var(--t-panel); }
.ms-item.cur { color: var(--gold); border-color: var(--gold-dim); background: #171408; }
.ms-item .ms-sub { width: 100%; color: var(--ink-dim); font-size: 11px; }
.ms-none { color: var(--ink-dim); font-size: 12px; }

/* faction selection */
.st-faction { font-weight: bold; letter-spacing: .1em; }
.fs-box { width: min(760px, 96%); max-height: 92%; overflow-y: auto; text-align: center; }
.fs-sub { color: var(--ink-dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
#fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; text-align: left; }
.fs-card { border: 1px solid var(--line); background: #100e08; padding: 12px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.fs-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.fs-icon { font-size: 26px; }
.fs-name { font-weight: bold; letter-spacing: .14em; margin: 4px 0 6px; }
.fs-lore { font-size: 12px; color: var(--ink); line-height: 1.5;
  font-family: var(--read); letter-spacing: 0; }
.fs-mission { margin-top: 8px; font-size: 11px; color: var(--gold-dim); line-height: 1.45; text-transform: uppercase; letter-spacing: .04em; }

/* guide overlay */
.guide-box { width: min(560px, 94%); max-height: 86%; overflow-y: auto; text-align: left; }
.gd p { margin: 8px 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.gd b { color: var(--gold); }
#guide-close { margin-top: 12px; }

/* ---- cinematic moments ----
   EVERY LAYER HERE ENDS IN AN OPAQUE COLOUR. The gradients are all written with
   alpha — .55 at the centre for the neutral tone, .16 for a win — which is the
   right look over black and the wrong one over a card. The cinematic sits at
   z-index 48 and the decision modal at 45, so a rite resolving while a card was
   on the table put the medallion and THE WORK HELD straight on top of the card's
   own title and its three answers, both readable at once. Layering a solid under
   the gradient keeps the vignette and stops the thing behind it coming through. */
.cine {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 48;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,8,4,.55) 0%, rgba(2,1,0,.92) 100%),
              #060503;
  opacity: 0; transition: opacity .35s; cursor: pointer;
}
.cine.hidden { display: none; }
.cine.show { opacity: 1; }
/* ---- KALKAN PERDE DOKUNUS YEMEZ (olculdu, 2026-09-06) ---------------------
   hideCine `out` giydirip 350ms'lik solmayi baslatiyor, sonra `hidden`.
   Ama .cine tam ekran ve pointer-events: auto -- yani o solma boyunca
   altindaki oyunun her dokunusunu yiyor. Ve arka plandaki bir sekmede CSS
   gecisi ILERLEMIYOR: kampanya kosusunda #cine.out opacity 0.417'de DONMUS
   halde yakalandi, tam ekran, dokunus alan bir katman olarak. Kayittaki
   imza: "yol < DIV.ik-slayt" -- yolun dugmesini solmakta olan bir sinematik
   ortuyordu. Kalkmakta olan bir perde kimsenin yoluna cikmamali. */
.cine.out { pointer-events: none; }
/* ---- ARKA PLANDAKI SEKMEDE HICBIR SEY ANIMASYONLA GECMEZ -----------------
   Bu, bir dizi ayri hatanin TEK koku. CSS gecisleri rAF'a bagli ve gizli bir
   sekmede ILERLEMIYOR -- sinanarak olculdu: gecisli bir katmanin opacity'si
   420ms sonra hala 0, gecis kapatilinca ayni anda 1. Sonuc, oyunun her yerinde
   ayni imza: `show` giymis ama gorunmeyen perdeler, `out` giymis ama kalkmayan
   perdeler (0.417'de donmus yakalandi), hayalet supurgecinin ceset sandigi
   canli modaller, arkasinda kart degistiren ekranlar.

   Tek tek yamamak yerine sebebi kaldiriyoruz: sekme gizliyken gecis suresi
   sifir. Durum degisiklikleri ANINDA uygulanir -- ki zaten kimsenin gormedigi
   bir animasyonun tek etkisi arayuzu yarida birakmakti. Sekme geri gelince
   gecisler aynen doner. Animasyonlara dokunulmuyor: gecis.js gibi yerler
   animationend'i yedek olarak kullaniyor ve onlarin kendi zamanlayicilari var. */
body.arka-plan, body.arka-plan *,
body.arka-plan *::before, body.arka-plan *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
/* ---- a win and a loss are not the same beat ------------------------------
   Every cinematic wore one grey: the rite that HELD and the rite that got away
   from you were the same card with different words. `tone` separates them —
   gold rays sweeping out behind a win, a red ground under a loss — and the
   sub-line says which it was. Rays are drawn on a pseudo-element so nothing in
   the existing markup moves. */
.cine.good { background:
  radial-gradient(ellipse at center, rgba(var(--lit-rgb),.16) 0%, rgba(4,3,1,.94) 68%),
  #070502; }
.cine.good .cine-sub { color: var(--gold); letter-spacing: .18em; }
.cine.good::before { content: ''; position: absolute; width: 150vmax; height: 150vmax;
  left: 50%; top: 50%; margin: -75vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(var(--lit-rgb),.10) 0deg 4deg, transparent 4deg 14deg);
  animation: cineRays 3.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes cineRays {
  0%   { transform: scale(.25) rotate(0deg); }
  100% { transform: scale(1) rotate(26deg); }
}
.cine.bad { background:
  radial-gradient(ellipse at center, rgba(150,40,30,.20) 0%, rgba(3,1,1,.95) 70%),
  #0a0403; }
.cine.bad .cine-title { color: var(--bad, #d1605e); text-shadow: 0 0 24px rgba(209,96,94,.5); }
@media (prefers-reduced-motion: reduce) { .cine.good::before { animation: none; } }
/* Positioned so the ray sweep cannot paint over it: `.cine.good::before` is
   absolute with z-index auto, and an unpositioned in-flow child loses to that
   in paint order however faint the rays are. */
.cine-inner { position: relative; text-align: center; }
.cine-icon {
  font-size: 84px; line-height: 1;
  filter: drop-shadow(0 0 26px rgba(var(--lit-rgb),.55));
  animation: cineIcon 3.4s ease-out;
}
@keyframes cineIcon {
  0% { transform: scale(.3) translateY(30px); }
  18% { transform: scale(1.15); opacity: 1; }
  30% { transform: scale(1); }
  100% { transform: scale(1.04); opacity: 1; }
}
.cine-title {
  margin-top: 18px; font-size: 44px; font-weight: bold; color: var(--gold);
  text-shadow: 0 0 24px rgba(var(--lit-rgb),.6);
  animation: cineTitle 3.4s ease-out;
}
@keyframes cineTitle {
  0% { letter-spacing: .02em; }
  25% { opacity: 1; }
  100% { letter-spacing: .3em; opacity: 1; }
}
.cine-sub {
  margin-top: 12px; font-size: 15px; color: var(--ink); max-width: 560px;
  padding: 0 20px; line-height: 1.5;
  animation: cineSub 3.4s ease-out;
}
@keyframes cineSub { 0%, 30% { transform: translateY(8px); } 55% { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .cine-icon { font-size: 58px; }
  .cine-title { font-size: 26px; }
  .cine-sub { font-size: 13px; }
}

/* ---- the era screen ----
   Sits inside the existing cinematic layer, so it inherits the opaque ground and
   the ray sweep and needs no scrim of its own. Everything is centred on one
   narrow column because this is read, not scanned: a plate, a name, then a
   ledger of what the age produced and what it lost. A won stone and a lost one
   share a type size on purpose — printing the failures only matters if they are
   not visibly demoted. */
.es { text-align: center; max-width: 460px; padding: 0 18px; }
.es-tag { font-size: 11px; letter-spacing: .13em; color: var(--gold-dim); }
.es-plate { display: block; width: 168px; height: auto; margin: 10px auto 2px; opacity: .9; }
/* THE RITE'S OWN PLATE had no rule at all, so it took whatever width its flex
   parent handed it and its own natural height — which is the stretching the
   owner saw. Same contract as every other plate on the game: fill the width,
   crop rather than distort, square corners. */
.rt-art { display: block; width: 100%; height: auto; max-height: 38vh;
  object-fit: cover; border-radius: 0; }
.es-name { margin: 0 0 14px; font-size: 27px; letter-spacing: .16em; color: var(--gold);
  text-shadow: 0 0 22px rgba(var(--lit-rgb),.45); }
.es-sec { font-size: 11px; letter-spacing: .13em; color: var(--gold-dim);
  border-top: 1px solid var(--line); padding-top: 9px; margin: 14px 0 8px; }
.es-list { display: flex; flex-wrap: wrap; gap: 5px 8px; justify-content: center; }
.es-list span { font-size: 11.5px; border: 1px solid var(--line); padding: 3px 8px; }
.es-w { color: var(--ink); }
.es-l { color: var(--bad); border-color: rgba(255,106,90,.32) !important; }
.es-none { color: var(--ink-dim); font-style: italic; border: 0 !important; }
.es-f { display: flex; gap: 10px; text-align: left; margin: 9px 0; align-items: flex-start; }
.es-fi { font-size: 17px; line-height: 1.2; width: 22px; text-align: center; color: var(--gold); }
.es-f b { display: block; font-size: 11px; letter-spacing: .14em; color: var(--gold);
  font-weight: normal; }
.es-f i { display: block; font-style: normal; font-size: 11px; line-height: 1.55;
  color: var(--ink); font-family: var(--read); margin-top: 2px; }
@media (max-width: 600px) {
  .es-plate { width: 128px; }
  .es-name { font-size: 21px; }
}

/* ---- the seals, live in the mission pane ----
   Reads as instrumentation rather than as a score: no fill colour on the track,
   a hairline bar, numbers in the dim gold. It sits above the chapter board and
   deliberately does not look like the world readings under it, because it is
   not measuring the same thing. */
.sl { border: 1px solid var(--line); background: rgba(6,5,3,.55);
  padding: 8px 10px; margin: 0 0 10px; }
.sl-h { font-size: 11px; letter-spacing: .13em; color: var(--gold-dim);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 7px; }
.sl-h i { font-style: normal; font-size: 11px; letter-spacing: .06em; opacity: .65;
  text-transform: none; }
.sl-r { display: grid; grid-template-columns: 12px 1fr 46px 20px; align-items: center;
  gap: 6px; margin: 3px 0; }
.sl-g { color: var(--gold-dim); font-size: 11px; text-align: center; }
.sl-n { font-size: 11px; letter-spacing: .1em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-b { height: 2px; background: rgba(var(--lit-rgb),.14); }
.sl-b u { display: block; height: 100%; background: var(--gold); text-decoration: none;
  transition: width .4s; }
.sl-v { font-size: 11px; color: var(--gold-dim); text-align: right; }

/* ---- the candidate report ----
   Deliberately plainer than everything around it. The run's own screens are
   gold and lit; this is the layer underneath speaking, so it is a form: a rule,
   a class line, four measured rows and a paragraph of assessment. Mono
   throughout, including the paragraph, because the instrument does not use the
   reading typeface it gave the player. */
.cnd { border: 1px solid var(--gold-dim); background: rgba(6,5,3,.7);
  padding: 14px 16px; margin: 4px 0 16px; }
.cnd-h { font-size: 11px; letter-spacing: .13em; color: var(--gold-dim); }
.cnd-k { font-size: 15px; letter-spacing: .12em; color: var(--gold); margin: 6px 0 12px;
  text-shadow: 0 0 14px rgba(var(--lit-rgb),.35); }
.cnd-bars { display: grid; gap: 7px; margin-bottom: 12px; }
.cnd-s { display: grid; grid-template-columns: 16px 1fr 84px 26px; align-items: center; gap: 9px; }
.cnd-g { color: var(--gold-dim); font-size: 13px; text-align: center; }
.cnd-t b { display: block; font-size: 11px; letter-spacing: .14em; color: var(--ink); font-weight: normal; }
.cnd-t i { display: block; font-size: 11px; font-style: normal; color: var(--gold-dim); opacity: .8; }
.cnd-b { height: 3px; background: rgba(var(--lit-rgb),.14); }
.cnd-b u { display: block; height: 100%; background: var(--gold); text-decoration: none; }
.cnd-v { font-size: 11px; color: var(--gold-dim); text-align: right; }
.cnd-o { margin: 0; font-size: 11.5px; line-height: 1.65; color: var(--ink);
  font-family: var(--font); border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 600px) {
  .cnd-s { grid-template-columns: 14px 1fr 54px 24px; gap: 7px; }
  .cnd-t i { display: none; }
}

/* ---- overlay ---- */
/* A CONTROL ON THIS SCREEN MUST BE REACHABLE. The box was centred in a
   non-scrolling flex parent, so on a phone whatever sat at the bottom of the
   button column — RESTART, when the share button was still above it — was
   simply outside the viewport with no way to get to it. The overlay scrolls
   now, and the box centres only while it fits. */
.overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(4,3,1,.88);
}
/* `align-items: center` on a scroll container clips the top of anything taller
   than the viewport; `auto` margins centre without ever cutting it off. */
.overlay > .ov-box { margin: auto; }
/* THE TITLE MOMENT. Key art behind the boot overlay only — the class comes from
   showIntro and hideOverlay strips it, so an ending never inherits the tableau.
   FIRST VERSION KILLED THE PAINTING: a .72-.9 flat scrim over an already dark
   image read as a plain black screen, which made the whole install pointless.
   The scrim is now a vertical ramp — nearly open at the top where the five
   figures live, closing toward the floor where the text column sits — so the
   art carries the frame and the words still have their ground. The box itself
   gets a translucent panel instead of relying on the scrim. */
.overlay.title { background:
  radial-gradient(ellipse 90% 46% at 50% 12%, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),0) 60%),
  radial-gradient(ellipse 70% 40% at 18% 88%, rgba(89,194,180,.08), rgba(89,194,180,0) 62%),
  radial-gradient(ellipse 70% 40% at 82% 88%, rgba(199,107,69,.08), rgba(199,107,69,0) 62%),
  linear-gradient(rgba(4,3,1,.2) 0%, rgba(4,3,1,.5) 42%, rgba(4,3,1,.92) 100%),
  #0b0908; }
.overlay.title .ov-box { background: rgba(6,5,3,.66); border: 1px solid var(--line);
  padding: 18px 22px; backdrop-filter: blur(2px); }
/* The emblem is a TRANSPARENT circle cut from the delivery — never the square.
   A black box floating over a painting is the one thing this screen must not
   contain, and if the asset ever regresses to a square the drop-shadow will
   betray it immediately. */
#ov-logo { display: none; }
.overlay.title #ov-logo { display: block; width: 96px; height: 96px; margin: 0 auto 12px;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(var(--lit-rgb),.28)); }
.overlay.hidden { display: none; }
/* THE FRONT DOOR STANDS ABOVE THE GAME, NOT INSIDE IT. The title overlay was
   at 50 and the kind picker at 60, while the map is 620, the arrival 720, the
   collapse warning 716 and the rites 960 — so any layer left standing buried
   the one screen the player uses to leave. Scoped to `.title` so an ENDING
   overlay keeps its own stacking exactly as it was: the will (940) and the
   rites (960) still play over a fallen civilisation, which is right.
   #onay-modal (980) stays above both, because the door raises it. */
.overlay.title { z-index: 800; }
#factionsel { z-index: 810; }
/* .crt is position:fixed and therefore its own stacking context, so the two
   numbers above only order the door against its SIBLINGS inside the console.
   Every sheet the game builds on the fly is appended to <body>, outside it, at
   700-980 — and those out-stack the whole console no matter what the door
   says. While a front screen is up the console lifts above them; perdeleriKapat
   sets this, hideOverlay and selectFaction clear it. */
body.kapida .crt { z-index: 850; }
.ov-box { text-align: center; max-width: 620px; padding: 24px; }
.ov-box h1 { margin: 0; font-size: 42px; letter-spacing: .16em; color: var(--bad); text-shadow: 0 0 16px rgba(255,106,90,.5); }
.ov-box h1.good { color: var(--gold); text-shadow: 0 0 16px rgba(var(--lit-rgb),.55); }
#ov-sub { color: var(--gold); letter-spacing: .2em; font-size: 15px; margin: 10px 0 12px; }
.ov-story {
  text-align: left; max-height: 260px; overflow-y: auto; margin: 0 0 20px;
  border: 1px solid var(--line); background: rgba(10,9,6,.7); padding: 12px 16px;
}
.ov-story p { margin: 7px 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.ov-story p:first-child { color: var(--gold); }
@media (max-width: 600px) { #ov-resume { width: 100%; padding: 12px 0; font-size: 13px; } }/* press handled by MÜHÜR */

/* A DOOR SAYS WHAT IS BEHIND IT. The three openers were typed glyphs and a line
   of caps, and nothing on them distinguished seeding a new world from replaying
   the opening — the difference is entirely that one skips the ceremony, which
   was written down nowhere. Each carries a drawn mark now, and the middle one
   carries that sentence. Grid, so the subtitle sits under the label and the
   mark stays centred against both. */
/* THREE MARKS AND A CAPTION. The title screen is a tableau, so the doors stop
   being three stacked bars of caps and become three plates you press. The first
   press NAMES the door underneath; the second opens it — which is also why no
   door can be opened by accident before its label has been read. */
.ov-doors {
  display: flex; justify-content: center; gap: 14px; margin: 22px 0 0;
}
/* ID WEIGHT FOR THE BOX, CLASS WEIGHT FOR THE COLOUR. The old openers still
   claim `.overlay #ov-reseed { width:100% }`, and an id outranks any number of
   classes — which is why the marks came out 136px wide with the third squeezed
   to 29. So the METRICS are restated at id weight here, and nothing else is:
   the calm and armed treatments live on the class below, where they only ever
   compete with each other and the armed one simply comes later. */
.overlay .ov-doors > #ov-resume,
.overlay .ov-doors > #ov-reseed,
.overlay .ov-doors > #ov-reset,
.overlay .ov-doors > #ov-fresh {
  display: grid; place-items: center;
  flex: 0 0 auto; width: 66px; height: 66px;
  min-width: 66px; max-width: 66px; min-height: 0; margin: 0;
  padding: 0; border-radius: 2px; font-size: 0; letter-spacing: 0;
  border-style: solid; border-width: 1px;
}
.overlay .ov-doors > .ov-door {
  border-color: rgba(var(--gold-rgb),.34); background: rgba(var(--gold-rgb),.05);
  color: var(--gold); box-shadow: none; cursor: pointer;
  /* NO TRANSITION ON THE STATE ITSELF. Colour, border and background were
     transitioned here and the armed door stayed visually calm: on a clock that
     is throttled or frozen the transition never advances, so the property sits
     on its start value forever and the one signal the player needs — this door
     is the one that will open — never arrives. Same rule this codebase learned
     for requestAnimationFrame: nothing that carries meaning may wait on the
     animation clock. Only the press bounce, which is decoration, still does. */
  transition: transform .12s;
}
.overlay .ov-doors > .ov-door:hover {
  border-color: rgba(var(--lit-rgb),.7); color: var(--ink);
}/* press handled by MÜHÜR */

.overlay .ov-doors > .ov-door:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ARMED: named in the caption below, and one more press opens it */
.overlay .ov-doors > .ov-door.armed {
  border-color: var(--acc-lit); background: rgba(var(--lit-rgb),.18); color: var(--w-glow);
  box-shadow: 0 0 0 1px rgba(var(--lit-rgb),.35), 0 0 22px rgba(var(--lit-rgb),.2);
}
.ov-door .ob-i { width: 26px; height: 26px; min-width: 26px; min-height: 26px;
  max-width: 26px; max-height: 26px; fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.ov-door.hidden { display: none !important; }
.ov-doorcap {
  min-height: 40px; margin: 14px 0 0; text-align: center;
  font-family: var(--font); font-size: 12px; letter-spacing: .18em;
  color: var(--gold); line-height: 1.5;
}
.ov-doorcap i {
  display: block; font-style: normal; font-size: 11px; letter-spacing: .12em;
  color: var(--ink-dim); text-transform: lowercase; margin-top: 3px;
}
.ov-doorcap b { font-weight: 400; }
.ov-doorcap .go { display: block; margin-top: 5px; font-size: 11px;
  letter-spacing: .2em; color: var(--ink-dim); opacity: .8; }
/* the archive action is a filing cabinet, not an offer: last, quiet, thin */
.overlay .ov-share {
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  font-size: 11px; min-height: 42px; max-width: 300px; opacity: .8; box-shadow: none;
}
.overlay .ov-share:hover { border-color: var(--gold-dim); color: var(--gold); opacity: 1; }

/* ==========================================================================
   İNİSİYASYON — the title screen as a doctrine, not a paragraph
   Three things the owner asked for, and one reason each:
     · the briefing is STAGES, so each clause can be read as an order rather
       than skimmed as a wall;
     · the two buttons that begin or erase something wear the danger colour,
       because a permanent act should not look like a menu item;
     · the seal breathes and the ground carries coordinates, so the screen
       reads as a place the player is being observed from.
   ========================================================================== */
/* ---- 1 · doctrine stages -------------------------------------------------- */
.overlay.title .ov-story p { margin: 0; padding: 11px 0 12px; }
.overlay.title .ov-story p + p { border-top: 1px solid rgba(var(--gold-rgb),.13); }
/* the opening clause is the one that names the watch — it keeps the gold */
.overlay.title .ov-story p:first-child { color: var(--gold); padding-top: 2px; }
@keyframes ovDanger {
  0%, 100% { box-shadow: 0 0 8px rgba(255,69,0,.18); }
  50%      { box-shadow: 0 0 22px rgba(255,69,0,.45); }
}
/* ---- 3 · greebling -------------------------------------------------------- */
/* the seal, lit from behind by something that has not stopped running */
.overlay.title #ov-logo { position: relative; z-index: 1; }
.overlay.title .ov-box { position: relative; }
.overlay.title .ov-box::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 190px; height: 190px;
  margin-left: -95px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(212,175,55,.10) 0%, rgba(212,175,55,.04) 45%, transparent 70%);
  animation: ovBreath 6s ease-in-out infinite;
}
@keyframes ovBreath { 0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); } }
/* the coordinate grid over the world — read as texture, never as pattern */
.overlay.title::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(var(--gold-rgb),.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(180deg, rgba(var(--gold-rgb),.05) 0 1px, transparent 1px 64px);
}
.overlay.title .ov-box { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .overlay.title .ov-box::before { animation: none; }
  .overlay.title #ov-reseed:hover, .overlay.title #ov-fresh:hover { animation: none;
    box-shadow: 0 0 16px rgba(255,69,0,.35); }
}

/* ==========================================================================
   TASFİYE RAPORU — the ending as a fault report (owner's revision 2026-08-16)
   The player is not being told their game is over. They are being handed the
   High Council's insolvency and fault report on the branch they ran, and every
   rule here exists to make that the reading: a dashed warning frame like
   something torn off a machine, figures as system-log rows, deaths as
   deductions, crises as a numbered fault list, and buttons re-tiered so the
   destructive one is finally the one that looks destructive.
   ========================================================================== */
/* the ground: a chessboard so faint it is texture, not pattern — the cosmic
   game is what the whole screen is about and it should be felt, not seen */
.overlay.ending {
  background:
    repeating-linear-gradient(90deg, rgba(var(--gold-rgb),.028) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(180deg, rgba(var(--gold-rgb),.028) 0 1px, transparent 1px 46px),
    rgba(3,3,4,.95);
}
/* the scanline wash, over everything, never in the way */
.overlay.ending::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .5;
}
.overlay.ending .ov-box {
  /* a column, so the archive button can be ordered to the bottom without the
     markup having to know it is the least important thing on the screen */
  display: flex; flex-direction: column; align-items: stretch;
  position: relative; z-index: 1;
  border: 1px dashed rgba(230,57,0,.42); background: rgba(8,9,11,.82);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.7);
  padding: 18px 18px 20px;
}
.overlay.ending.good .ov-box { border-color: rgba(var(--gold-rgb),.4); }
/* ---- THE DOOR FURNITURE DOES NOT ATTEND THE FUNERAL (build 783, B2) ------
   Measured on a live ending: the sealed chronicle (#ov-defter) and the quiet
   row's three tiles were all still standing on the report — and every measure
   they own is scoped under `.overlay.title`, so here they rendered raw: the
   KIND arrow blew up to 181–216px and OPTIONS was a bare native button. The
   ending's own doors are the card's KAPAT and YENİ DÜNYA; nothing else gets a
   seat. `!important` because the ledger is revealed by removing `.hidden` at
   boot, and that id-level state must not outrank the ending's floor plan. */
.overlay.ending #ov-defter,
.overlay.ending .ov-altsira { display: none !important; }
/* ---- THE TERMINAL CRASH --------------------------------------------------
   Black, then one horizontal line closing across the middle the way an old
   set switched off, then the report prints in. Two classes and one timer from
   main.js crashIn(); a browser that never runs them shows the finished report,
   because both classes only ever REMOVE the blackout. */
.overlay.crashing .ov-box { visibility: hidden; }
.overlay.crashing::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: #f4efe2; box-shadow: 0 0 22px rgba(255,255,255,.85); z-index: 3;
  animation: ovCrash .42s ease-in forwards;
}
@keyframes ovCrash {
  0% { transform: scaleX(0); }
  22% { transform: scaleX(1); opacity: 1; }
  72% { transform: scaleX(1) scaleY(1); opacity: 1; }
  100% { transform: scaleX(1) scaleY(60); opacity: 0; }
}
/* the print: each block wipes down rather than fading, so the report reads as
   coming off a machine one line at a time */
.overlay.crashed .rr, .overlay.crashed .rr-narr {
  animation: ovPrint .55s steps(14) both;
}
.overlay.crashed .rr-narr { animation-delay: .22s; }
@keyframes ovPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* ---- the headline --------------------------------------------------------- */
.overlay.ending .ov-box h1 { font-size: 30px; letter-spacing: .12em; }
@media (max-width: 620px) { .overlay.ending .ov-box h1 { font-size: 22px; } }
.rr-glitch { position: relative; }
.rr-glitch::before, .rr-glitch::after {
  content: attr(data-t); position: absolute; left: 0; right: 0; top: 0;
  pointer-events: none; opacity: 0;
}
.rr-glitch::before { color: #ff8f6a; animation: rrG1 4s steps(1) infinite; }
.rr-glitch::after { color: var(--gold); animation: rrG2 4s steps(1) infinite; }
@keyframes rrG1 { 0%,90%,100% { opacity: 0; } 91% { opacity: .55; transform: translate(-3px,1px); }
  95% { opacity: .3; transform: translate(2px,-1px); } }
@keyframes rrG2 { 0%,90%,100% { opacity: 0; } 93% { opacity: .45; transform: translate(3px,-1px); }
  97% { opacity: .25; transform: translate(-2px,1px); } }
.overlay.ending #ov-sub { color: var(--bad); font-size: 12px; letter-spacing: .16em; }
.overlay.ending.good #ov-sub { color: var(--gold); }
/* ==========================================================================
   THE THREE INSTRUMENTS (js/sim/runviz.js)
   No bars, no lines, no pies, no chart library — the owner's prohibition. Each
   of these is a picture of one fact, and each animates by drawing ITSELF: the
   trace strokes on, the tower stacks course by course, the receipt prints line
   by line. Every animation ends in the finished state, so a frozen animation
   clock costs the motion and never the drawing.
   ========================================================================== */
.rv-viz { margin: 0 0 14px; }
.rv-viz-h { font-size: 11px; letter-spacing: .2em; color: var(--gold-dim);
  margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.rv-viz-f { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px;
  font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); }
.rv-viz-empty { font-size: 11px; letter-spacing: .13em; color: var(--ink-dim);
  padding: 10px 0; }
/* ---- 1 · the seismograph -------------------------------------------------- */
.lf-svg { display: block; width: 100%; height: 132px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb),.035), transparent); }
.lf-grid line { stroke: rgba(var(--gold-rgb),.10); stroke-width: 1; }
.lf-path { stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--gold-rgb),.45));
  /* drawn on: one dash the length of the path, walked to zero offset */
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: lfDraw 2.4s cubic-bezier(.25,.6,.3,1) .25s forwards; }
@keyframes lfDraw { to { stroke-dashoffset: 0; } }
/* the sins: lit where the hand came down, brighter where it came down hard */
.lf-node { fill: var(--bad); opacity: 0;
  animation: lfNode .5s ease-out 1.9s forwards; }
.lf-node.big { filter: drop-shadow(0 0 6px rgba(230,57,0,.85)); }
@keyframes lfNode { to { opacity: .95; } }
/* ---- 2 · the ziggurat ----------------------------------------------------- */
.zg-svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.zg-c { transform-box: fill-box; transform-origin: 50% 100%;
  animation: zgRise .42s cubic-bezier(.2,1.5,.4,1) both;
  animation-delay: calc(.35s + var(--i) * .09s); }
@keyframes zgRise { from { transform: translateY(14px) scaleY(.2); } }
.zg-c.on { fill: rgba(var(--gold-rgb),.82); stroke: var(--gold); stroke-width: .6; }
.zg .full .zg-c.on, .rv-viz.zg.full .zg-c.on { fill: var(--gold); }
.rv-viz.zg.full .zg-svg { filter: drop-shadow(0 0 12px rgba(var(--gold-rgb),.4)); }
/* what was never built: dim, offset, and drawn anyway */
.zg-c.off { fill: rgba(var(--gold-rgb),.05); stroke: rgba(var(--gold-rgb),.20);
  stroke-width: .6; stroke-dasharray: 4 3; }
.zg-crack { stroke: rgba(230,57,0,.45); stroke-width: 1; stroke-dasharray: 6 5; }
.zg-line { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.zg-pct { color: var(--gold); }
.rv-viz.zg.full .zg-pct { color: var(--gold); text-shadow: 0 0 10px rgba(var(--gold-rgb),.6); }
/* ---- 3 · the receipt ------------------------------------------------------ */
.rc-body { border: 1px solid var(--line); border-left: 2px solid rgba(var(--gold-rgb),.45);
  background: rgba(var(--gold-rgb),.03); padding: 8px 10px; }
.rc-l { display: flex; align-items: baseline; gap: 8px; padding: 2.5px 0;
  font-family: var(--font); font-size: 11px; letter-spacing: .04em;
  /* printed, not faded: each line clips down into place on its own beat */
  animation: rcPrint .18s steps(6) both; animation-delay: calc(.5s + var(--i) * .09s); }
@keyframes rcPrint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rc-k { color: var(--ink-dim); white-space: nowrap; }
.rc-l::before { content: ''; order: 1; flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted rgba(var(--gold-rgb),.20); transform: translateY(-3px); }
.rc-v { order: 2; color: var(--gold); white-space: nowrap; }
.rc-l.neg .rc-v { color: var(--bad); }
.rc-rule { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }
.rc-rule .rc-k, .rc-rule .rc-v { color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) {
  .lf-path { animation: none; stroke-dashoffset: 0; }
  .lf-node { animation: none; opacity: .95; }
  .zg-c { animation: none; }
  .rc-l { animation: none; clip-path: none; }
}

/* ---- the report ----------------------------------------------------------- */
.rr { text-align: left; margin: 0 0 12px; }
.rr-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .13em; color: var(--ink-dim); margin-bottom: 8px; }
/* two columns on a desktop, one on a phone — the fault record is a sidebar
   where there is room for one and a section where there is not */
.rr-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
@media (max-width: 620px) { .rr-cols { grid-template-columns: 1fr; gap: 8px; } }
.rr-h { font-size: 11px; letter-spacing: .2em; color: var(--gold-dim);
  margin: 8px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.rr-col > .rr-h:first-child { margin-top: 0; }
/* the log row: label left, value right, dotted rule between — an invoice line */
.rr-kv { display: flex; align-items: baseline; gap: 6px; padding: 3px 0;
  font-size: 11px; letter-spacing: .04em; }
.rr-kv span { color: var(--ink-dim); white-space: nowrap; }
.rr-kv::before { content: ''; order: 1; flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted rgba(var(--gold-rgb),.22); transform: translateY(-3px); }
.rr-kv b { order: 2; color: var(--ink); font-weight: 400; white-space: nowrap; }
.rr-kv.rr-neg b { color: var(--bad); }
/* the fault list: name, count, dead */
.rr-cr { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 3px 0; font-size: 11px; }
.rr-cr span { color: var(--ink-dim); }
.rr-cr i { font-style: normal; color: var(--gold-dim); }
.rr-cr b { color: var(--bad); font-weight: 400; min-width: 44px; text-align: right; }
.rr-cr.rr-none { color: var(--ink-dim); display: block; }
/* the prose keeps its own block and its own voice */
.rr-narr { text-align: left; }
.rr-narr p { margin: 6px 0; font-size: 12.5px; line-height: 1.65; color: var(--ink); }
.rr-narr p:first-of-type { color: var(--gold); }
/* ---- the scrollbar is not part of the fiction ----------------------------- */
.ov-story { scrollbar-width: none; -ms-overflow-style: none; }
.ov-story::-webkit-scrollbar { display: none; width: 0; height: 0; }
.overlay.ending .ov-story { max-height: 46vh; border-color: rgba(230,57,0,.22);
  background: rgba(6,7,9,.6); }
.overlay.ending .ov-share { order: 9; opacity: .72; font-size: 11px; }
.overlay.ending .ov-share:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .overlay.crashing::before { animation: none; display: none; }
  .overlay.crashing .ov-box { visibility: visible; }
  .overlay.crashed .rr, .overlay.crashed .rr-narr { animation: none; }
  .rr-glitch::before, .rr-glitch::after { animation: none; opacity: 0; }
}

#genebar { overflow-x: auto; white-space: nowrap; }

/* ---- the console opens slowly ---- */
[data-lock].locked { display: none !important; }

.unlockbar {
  position: absolute; left: 50%; top: 12px; transform: translate(-50%, -140%);
  z-index: 8; width: min(560px, 92%); cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border: 1px solid var(--gold-dim);
  background: rgba(12,10,6,.97); box-shadow: 0 8px 34px rgba(0,0,0,.65);
  opacity: 0; transition: transform .45s cubic-bezier(.2,1.3,.4,1), opacity .35s;
}
.unlockbar.show { transform: translate(-50%, 0); opacity: 1; }
.unlockbar.hidden { display: none; }
.ub-icon { font-size: 24px; line-height: 1; }
.ub-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ub-body b { color: var(--gold); letter-spacing: .14em; font-size: 12.5px; }
.ub-body i { font-style: normal; color: var(--ink); font-size: 12px; line-height: 1.45; }

/* ---- the five acts ---- */
.nb-act { display: flex; justify-content: space-between; align-items: baseline;
  color: var(--gold); letter-spacing: .16em; font-size: 12px; font-weight: bold; }
.nb-act b { color: var(--ink-dim); font-weight: normal; letter-spacing: .06em; }
.nb-actline { color: var(--ink-dim); font-size: 11px; font-style: italic; margin: 2px 0 5px; }
.nb-track.act { margin-bottom: 10px; }
.nb-track.act i { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); opacity: .55; }

/* ---- the album ---- */
.btn-album {
  position: absolute; right: 12px; bottom: 12px; z-index: 6; cursor: pointer;
  font-family: var(--font); font-size: 12px; letter-spacing: .1em;
  color: var(--gold); background: rgba(12,10,6,.9); border: 1px solid var(--gold-dim);
  padding: 7px 11px;
}
.btn-album:hover { background: #1c1710; box-shadow: 0 0 16px rgba(var(--lit-rgb),.3); }
.btn-album.hidden { display: none; }
.album-box { width: min(1000px, 96%); max-height: 94%; overflow-y: auto; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.al-item { cursor: pointer; border: 1px solid var(--line); transition: border-color .12s, transform .12s; }
.al-item:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.al-item canvas { width: 100%; height: auto; display: block; }

/* ---- the thing running the console ---- */
.coldopen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 95;
  background: #05070a; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.coldopen.hidden { display: none; }
.co-inner { width: min(620px, 88%); font-family: var(--font); }
.co-head { color: #4a7d7a; font-size: 11px; letter-spacing: .3em; margin-bottom: 20px; animation: sigflick 3.1s infinite; }
.co-line {
  color: #7fe3d8; font-size: 15px; line-height: 1.9; letter-spacing: .06em;
  text-shadow: 0 0 12px rgba(127,227,216,.45);
  opacity: 1; animation: coIn .5s ease-out backwards;
}
.co-line:empty { height: 10px; }
.co-skip { margin-top: 26px; color: #24403f; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
@keyframes coIn { }
@keyframes sigflick { }

/* ---- A TRANSMISSION IS A BANNER, NOT A DOOR (owner, 2026-09-05: "oyun hala
   5. yılda takılıyor") -------------------------------------------------------
   Measured: `perde=signal ... dg=s01_igigi/adim1 masa=gizli` — the year-5 node
   exactly, with the table hidden and the card waiting in the queue. This layer
   was a FULL-SCREEN scrim at z88 with pointer-events:auto, standing for nine
   seconds and dismissing on a tap. So for nine seconds every press the player
   made was eaten by its dismiss handler while the card they were pressing for
   sat behind it: "basıyorum ama hiçbir şey olmuyor", on whatever year the
   transmission happened to land.

   The ordinary transmission is news; it has no business taking the screen. It
   is a band now: it carries its own ground, it does not dim the game, and it
   does not take a single tap that was not aimed at it. Only .deep — the
   recruitment line, the one that deliberately stops the world clock — is still
   a door, and being a door it is registered in main.js's curtain list.

   NOTE this also decides whether the game treats it as a curtain at all:
   perdeMesgul() skips any layer whose computed pointer-events is `none`, so
   the band stops blocking the dealer for free, and .deep keeps blocking it. */
.signal {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 88;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none; cursor: pointer;
  background: transparent; transition: opacity .45s;
  padding-top: 8px;
}
.signal .sig-inner { pointer-events: auto; }
.signal.show { opacity: 1; }
.signal.hidden { display: none; }
.sig-inner {
  width: min(560px, 88%); border-left: 2px solid #4fd8c8; padding: 12px 16px;
  /* it carries its own ground now that the scrim is gone, or the text would
     sit unreadable on top of whatever the game is drawing underneath */
  background: linear-gradient(90deg, rgba(6,20,22,.94), rgba(4,12,14,.86));
  box-shadow: 0 8px 26px rgba(0,0,0,.6);
  border-radius: 0 3px 3px 0;
}
.sig-head { color: #4a7d7a; font-size: 11px; letter-spacing: .3em; margin-bottom: 8px; animation: sigflick 2.3s infinite; }
#sig-text { color: #9ff0e4; font-size: 15px; line-height: 1.75; letter-spacing: .03em; text-shadow: 0 0 14px rgba(79,216,200,.4); }
#feed li.sig { color: #7fe3d8; border-left: 2px solid #4fd8c8; padding-left: 7px; }
/* a recruitment line takes the whole room */
/* the recruitment line IS a door: it stops the clock, so it takes the screen
   and the taps, and main.js counts it as a curtain */
.signal.deep { background: rgba(1,5,6,.94); pointer-events: auto;
  align-items: center; padding-top: 0; }
.signal.deep .sig-inner { width: min(680px, 92%); border-left-width: 3px; padding: 26px 30px;
  background: linear-gradient(90deg, rgba(14,52,50,.6), rgba(2,8,10,.2)); }
.signal.deep #sig-text { font-size: 18px; line-height: 1.85; }
/* the way out of the modal, said out loud */
.sig-cik { margin-top: 16px; font-size: 10px; letter-spacing: .26em; color: #4fd8c8;
  opacity: .75; animation: sigCik 1.9s ease-in-out infinite; }
@keyframes sigCik { 0%,100% { opacity: .45; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .sig-cik { animation: none; opacity: .8; } }
.signal.deep .sig-head::after { content: ' · PRIORITY'; }

/* ---- your kind's own instrument panel ---- */
/* ---- the other four ---- */
.dp-list { display: grid; gap: 8px; margin-bottom: 6px; }
.dp-card { border: 1px solid var(--line); background: #100e08; padding: 8px 10px; }
.dp-card.pact { border-color: rgba(var(--lit-rgb),.4); }
.dp-card.allied { border-color: var(--good-dim); background: var(--t-panel); }
.dp-card.hostile { border-color: rgba(255,106,90,.4); }
.dp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .1em; }
.dp-head i { font-style: normal; font-size: 11px; color: var(--ink-dim); letter-spacing: .14em; }
.dp-card.allied .dp-head i { color: var(--good); }
.dp-card.hostile .dp-head i { color: var(--bad); }
.dp-bar { height: 4px; background: #0a0805; border: 1px solid var(--line); margin: 5px 0 6px; }
.dp-bar i { display: block; height: 100%; }
.dp-bar i.g { background: var(--good); } .dp-bar i.n { background: var(--gold-dim); } .dp-bar i.b { background: var(--bad); }
.dp-terms { font-size: 11px; color: var(--ink-dim); line-height: 1.45; margin-bottom: 3px; }
.dp-terms b { color: var(--gold-dim); letter-spacing: .08em; }
.dp-moves { display: grid; gap: 4px; margin-top: 6px; }
.dp-btn { font-family: var(--font); font-size: 11px; text-align: left; cursor: pointer;
  color: var(--ink); background: #0c0a06; border: 1px solid var(--line); padding: 6px 8px;
  display: flex; justify-content: space-between; gap: 6px; transition: all .12s; }
.dp-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.dp-btn:disabled { opacity: .35; cursor: not-allowed; }
.dp-btn.bad { color: #e3a893; border-color: rgba(212,105,79,.3); }
.dp-btn.bad:hover:not(:disabled) { color: #ffd4c2; border-color: #d4694f; }

/* ================= THE WHOLE CONSOLE BELONGS TO YOUR KIND ==================
   The theming used to be scoped to #pane-kind, which is why every other screen
   still looked identical. --race / --race-dim / --race-glow now drive the top
   bar, the stat bar, the tabs, the goal bar, the milestone list, the decision
   modal, the world panel, the guide and the menus. Play the Reptilians and the
   instrument is green all the way through. */

body[data-kind] .brand,
body[data-kind] #topbar b,
body[data-kind] .favor-label,
body[data-kind] .favor-label b { color: var(--race) !important; }
body[data-kind] #topbar button:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }
body[data-kind] .spd.sel { background: var(--race-dim); color: #08070a; border-color: var(--race); }

body[data-kind] #statbar b { color: var(--race); }
body[data-kind] .tab.sel { color: var(--race); border-bottom-color: var(--race); }
body[data-kind] .tab:hover { color: var(--race); }
body[data-kind] #tabs { border-bottom-color: var(--race-dim); }

body[data-kind] #next-bar b, body[data-kind] .nb-track i { color: var(--race); }
body[data-kind] .nb-track i { background: linear-gradient(90deg, var(--race-dim), var(--race)); }
body[data-kind] .ms-item.cur { border-color: var(--race-dim); color: var(--race); }
body[data-kind] #milestones li.on { color: var(--race); border-left-color: var(--race); }

/* the decision modal — the screen the player looks at most */
body[data-kind] .dc-box { border-color: var(--race-dim); box-shadow: 0 0 40px var(--race-glow); }
body[data-kind] .dc-box h2, body[data-kind] .dc-eye { color: var(--race); }
body[data-kind] .dc-opt:hover { border-color: var(--race-dim); }
body[data-kind] .dc-label { color: var(--race); }
body[data-kind] .dm b { color: var(--race); }
body[data-kind] .dm-b i.n { background: linear-gradient(90deg, var(--race-dim), var(--race)); }

/* the world panel and its buttons */
body[data-kind] .rg-card.sel { border-color: var(--race-dim); box-shadow: inset 0 0 40px var(--race-glow); }
body[data-kind] .rg-name { color: var(--race); }
body[data-kind] .rg-acts-label { color: var(--race-dim); }
body[data-kind] .ra-cost { color: var(--race-dim); }

/* menus, guide, overlays */
body[data-kind] .gm-box { border-color: var(--race-dim); box-shadow: 0 0 50px var(--race-glow); }
body[data-kind] .gm-box h2 { color: var(--race); }
body[data-kind] .gm-box button:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }
body[data-kind] .gd b { color: var(--race); }
body[data-kind] #ov-title.good { color: var(--race); text-shadow: 0 0 16px var(--race-glow); }
body[data-kind] #ov-sub { color: var(--race); }
body[data-kind] .cine-title { color: var(--race); }
body[data-kind] #genebar b { color: var(--race); }

/* ---- each kind's own material, applied to the whole shell ---- */
body[data-kind="annunaki"] .crt { background:
  repeating-linear-gradient(0deg, rgba(var(--lit-rgb),.018) 0 2px, transparent 2px 6px), #0b0a06; }
body[data-kind="annunaki"] .dc-box h2,
body[data-kind="annunaki"] .brand { letter-spacing: .30em; text-shadow: 0 1px 0 #6a5320; }

body[data-kind="grey"] .crt { background: linear-gradient(180deg, #0b0f12, #05070a); }
body[data-kind="grey"] #statbar b, body[data-kind="grey"] .dm b,
body[data-kind="grey"] .rp-row b { font-variant-numeric: tabular-nums; }
body[data-kind="grey"] .brand, body[data-kind="grey"] .dc-box h2 { letter-spacing: .26em; font-weight: normal; }

body[data-kind="reptilian"] .crt { background:
  repeating-linear-gradient(120deg, rgba(var(--t-rgb),.030) 0 6px, transparent 6px 13px),
  repeating-linear-gradient(-120deg, rgba(var(--t-rgb),.030) 0 6px, transparent 6px 13px), var(--t-bg); }
body[data-kind="reptilian"] .dc-box h2 { font-style: italic; }

body[data-kind="insectoid"] .crt { background:
  repeating-linear-gradient(60deg, rgba(199,138,232,.05) 0 1px, transparent 1px 18px),
  repeating-linear-gradient(-60deg, rgba(199,138,232,.05) 0 1px, transparent 1px 18px), #08050d; }
body[data-kind="insectoid"] .dc-opt, body[data-kind="insectoid"] .ra-btn {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

body[data-kind="nordic"] .crt { background:
  radial-gradient(140% 55% at 50% 0%, rgba(154,212,255,.07), transparent 70%), #05080c; }
body[data-kind="nordic"] .brand, body[data-kind="nordic"] .dc-box h2 { letter-spacing: .3em; font-weight: normal; }

body[data-kind="human"] .crt { background:
  repeating-linear-gradient(0deg, rgba(224,185,138,.022) 0 1px, transparent 1px 24px), #0c0a07; }
body[data-kind="human"] .dc-opt { border-left: 2px solid rgba(224,185,138,.4); }

/* A rival's encounter is theirs, not yours: the box, the eye, the title and the
   option borders all take the rival's colour via inline --race on .dc-box. */
.dc-box.rival { border-color: var(--race); box-shadow: 0 0 44px var(--race-glow); }
.dc-box.rival h2 { color: var(--race); }
.dc-box.rival .dc-opt:hover { border-color: var(--race); }
.dc-box.rival .dc-label { color: var(--race); }
.dc-eye { transition: color .3s; }

/* ---- notices wear your kind's colour and sigil ---- */
.unlockbar { border-left: 3px solid var(--race); box-shadow: 0 0 30px var(--race-glow); }
.unlockbar .ub-sigil { font-size: 17px; margin-right: 2px; opacity: .9; }
.unlockbar .ub-body b { color: var(--race); }
.unlockbar.lore { border-left-color: #b9a8dd; box-shadow: 0 0 34px rgba(185,168,221,.22);
  background: linear-gradient(90deg, rgba(40,30,60,.6), rgba(10,8,6,.94)); }
.unlockbar.lore .ub-body b { color: #cbbdf0; letter-spacing: .22em; }
.unlockbar.lore .ub-body i { color: var(--w-bone); font-style: italic; }
#feed li.lore { color: #cbbdf0; border-left: 2px solid #b9a8dd; padding-left: 7px; }

/* ---- each kind's console is built out of different material ----------------
   Colour was not enough: an Annunaki ledger should look struck in metal, a
   Grey readout should look like an instrument, the lattice should look like a
   lattice. Each kind gets its own surface, typography and rhythm. */

/* ANNUNAKI · a gold ledger stamped into a tablet */
body[data-kind="annunaki"] #pane-kind {
  background:
    repeating-linear-gradient(0deg, rgba(var(--lit-rgb),.030) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #1a1408, #0d0a05);
}
body[data-kind="annunaki"] #pane-kind .cs {
  letter-spacing: .34em; border-bottom: 2px solid var(--race-dim);
}
body[data-kind="annunaki"] #pane-kind .rp-res b,
body[data-kind="annunaki"] #pane-kind .rp-row b {
  text-shadow: 0 1px 0 #6a5320, 0 0 14px rgba(var(--lit-rgb),.5);
}
body[data-kind="annunaki"] #pane-kind .rp-row {
  border-left-width: 3px; background: linear-gradient(90deg, rgba(var(--lit-rgb),.07), transparent);
}
body[data-kind="annunaki"] #pane-kind .ms-endbar,
body[data-kind="annunaki"] #pane-kind .rp-bar { height: 9px; border-color: var(--race-dim); }

/* GREYS · a cold instrument readout, tabular and clipped */
body[data-kind="grey"] #pane-kind {
  background: linear-gradient(180deg, #0d1114, #05070a);
}
body[data-kind="grey"] #pane-kind .cs,
body[data-kind="grey"] #pane-kind .rp-row span,
body[data-kind="grey"] #pane-kind .rp-res span {
  font-variant-numeric: tabular-nums; letter-spacing: .22em; text-transform: uppercase;
}
body[data-kind="grey"] #pane-kind .rp-row {
  border-left: none; border-top: 1px solid rgba(184,196,204,.18); padding-left: 0;
}
body[data-kind="grey"] #pane-kind .rp-row b { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
body[data-kind="grey"] #pane-kind .rp-row::before {
  content: '▚'; color: rgba(184,196,204,.35); font-size: 11px; margin-right: 6px;
}
body[data-kind="grey"] #pane-kind .ms-endbar i, body[data-kind="grey"] #pane-kind .rp-bar i {
  background: repeating-linear-gradient(90deg, var(--race) 0 3px, transparent 3px 6px) !important;
}

/* REPTILIANS · scales, and everything slightly off-centre */
body[data-kind="reptilian"] #pane-kind {
  background:
    repeating-linear-gradient(120deg, rgba(var(--t-rgb),.045) 0 6px, transparent 6px 13px),
    repeating-linear-gradient(-120deg, rgba(var(--t-rgb),.045) 0 6px, transparent 6px 13px),
    #060c07;
}
body[data-kind="reptilian"] #pane-kind .rp-row { transform: skewX(-3deg); }
body[data-kind="reptilian"] #pane-kind .cs { font-style: italic; }

/* INSECTOIDS · the lattice, drawn as a lattice */
body[data-kind="insectoid"] #pane-kind {
  background:
    repeating-linear-gradient(60deg, rgba(199,138,232,.08) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-60deg, rgba(199,138,232,.08) 0 1px, transparent 1px 16px),
    #0a060f;
}
body[data-kind="insectoid"] #pane-kind .rp-row {
  border-left: none; border: 1px solid rgba(199,138,232,.22); padding: 5px 8px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
body[data-kind="insectoid"] #pane-kind .rp-row b { font-variant-numeric: tabular-nums; }
body[data-kind="insectoid"] #pane-kind .cs::after { content: ' ⬡'; opacity: .6; }
body[data-kind="insectoid"] #pane-kind .ms-endbar i, body[data-kind="insectoid"] #pane-kind .rp-bar i {
  background: repeating-linear-gradient(90deg, var(--race) 0 6px, rgba(199,138,232,.35) 6px 9px) !important;
}

/* NORDICS · light, spacing, and nothing sharp */
body[data-kind="nordic"] #pane-kind {
  background: radial-gradient(120% 60% at 50% 0%, rgba(154,212,255,.10), transparent 70%), #060a0e;
}
body[data-kind="nordic"] #pane-kind .cs { letter-spacing: .3em; font-weight: normal; }
body[data-kind="nordic"] #pane-kind .rp-row {
  border-left: none; border-bottom: 1px solid rgba(154,212,255,.14); padding: 6px 0;
}
body[data-kind="nordic"] #pane-kind .rp-res b { text-shadow: 0 0 18px rgba(154,212,255,.7); }

/* HUMANITY · paper, ink and a ruled margin */
body[data-kind="human"] #pane-kind {
  background: repeating-linear-gradient(0deg, rgba(224,185,138,.035) 0 1px, transparent 1px 22px), #0d0a07;
}
body[data-kind="human"] #pane-kind .rp-row {
  border-left: 2px solid rgba(224,185,138,.45); margin-left: 10px;
}
body[data-kind="human"] #pane-kind .cs { border-bottom: 1px dashed var(--race-dim); }

/* ---- your kind's own colour ---- */
:root { --race: var(--acc-lit); --race-dim: #8a7638; --race-glow: rgba(var(--lit-rgb),.18); }
#pane-kind .ms-head { text-shadow: 0 0 18px var(--race-glow); }
#pane-kind .cs { color: var(--race); border-color: var(--race-dim); }
#pane-kind .rp-res b, #pane-kind .rp-row b { color: var(--race); }
#pane-kind .rp-bar i, #pane-kind .ms-endbar i { background: linear-gradient(90deg, var(--race-dim), var(--race)); }
#pane-kind .rp-row { border-left-color: var(--race-dim); }
#pane-kind .dp-btn:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }
#pane-kind { box-shadow: inset 0 0 60px var(--race-glow); }
.kd-creed { font-style: italic; color: var(--race) !important; opacity: .85; }
.kd-fidbar i.g { background: linear-gradient(90deg, var(--gold-dim), var(--good)) !important; }
.kd-fidbar i.n { background: linear-gradient(90deg, var(--gold-dim), var(--gold)) !important; }
.kd-fidbar i.b { background: linear-gradient(90deg, #6b2a22, var(--bad)) !important; }
.ra-btn:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }

/* ---- the parley room ---- */
.parley-box { width: min(620px, 96%); max-height: 94%; overflow-y: auto; text-align: left; }
.pal-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.pl-sigil { font-size: 24px; }
.pl-who { flex: 1; letter-spacing: .16em; font-size: 16px; font-weight: bold; }
.pl-round { color: var(--ink-dim); font-size: 11px; letter-spacing: .14em; }
.pl-power { margin: 12px 0 4px; }
.pl-band { font-size: 11px; letter-spacing: .2em; }
.pl-band.g { color: var(--good); } .pl-band.n { color: var(--gold); } .pl-band.b { color: var(--bad); }
.pl-bar { position: relative; height: 8px; background: #3a1a16; border: 1px solid var(--line); margin: 5px 0 3px; }
.pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--race-dim), var(--race)); transition: width .4s; }
.pl-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; }
.pl-line { color: var(--ink); font-size: 15px; line-height: 1.7; font-style: italic;
  border-left: 2px solid var(--race-dim); padding: 4px 0 4px 12px; margin: 14px 0; }
.pl-log { margin-top: 10px; max-height: 130px; overflow-y: auto; }
.pl-log div { font-size: 11.5px; color: var(--ink-dim); line-height: 1.55; padding: 4px 0; border-top: 1px solid var(--line); }
.pl-log b { color: var(--race); }
.dp-parley { border-color: var(--race-dim) !important; color: var(--race) !important; }

/* ---- disowned ---- */
.creed-box { width: min(560px, 94%); border-color: var(--bad); box-shadow: 0 0 60px rgba(255,106,90,.18); }
.creed-box h2 { color: var(--bad); letter-spacing: .16em; }
.cb-body p { color: var(--ink); font-size: 13.5px; line-height: 1.65; text-align: left; margin: 0 0 10px; }
.cb-fit { color: var(--ink-dim) !important; border-top: 1px solid var(--line); padding-top: 9px; }

/* ============================================================================
   THE COSMIC CHESS — a terminal going down, not a list of options.
   The screen where the player hands the species to one of five, or takes it
   off the board entirely. It read as a settings menu: rounded boxes, two Apple
   emoji, a dashed hint. It is the heaviest decision in the game and it now
   carries the game's own language — absolute black, tarnished gold, square
   corners, one hairline rule, and a drawn mark per ending in that ending's own
   colour (see FIN_ART in endgame.js).
   ========================================================================== */
.finale-box { width: min(760px, 96%); max-height: 94%; overflow-y: auto;
  background: #060709; border: 1px solid rgba(var(--gold-rgb),.4); border-radius: 0; }
/* the title reads as a boot line, ruled on both sides */
#fin-title {
  font-family: var(--font); font-size: clamp(19px, 5vw, 27px); letter-spacing: .3em;
  color: var(--gold); text-align: center; margin: 4px 0 12px;
  display: flex; align-items: center; gap: 12px; justify-content: center;
}
#fin-title::before, #fin-title::after {
  content: ''; flex: 1 1 auto; height: 1px; max-width: 90px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),0), rgba(var(--gold-rgb),.6));
}
#fin-title::after { background: linear-gradient(270deg, rgba(var(--gold-rgb),0), rgba(var(--gold-rgb),.6)); }
/* the situation, typed onto the screen rather than written */
#fin-intro {
  font-family: var(--font); text-transform: uppercase;
  font-size: 11.5px; letter-spacing: .2em; line-height: 2;
  color: #7a6840; text-align: center; margin: 0 auto; max-width: 54ch;
}
/* THE ORDER. Not a hint — the last instruction the console will give. */
.fin-how {
  margin: 16px 0 14px; padding: 11px 13px; text-align: left;
  border: 0; border-left: 4px solid var(--gold); border-radius: 0;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.10), rgba(var(--gold-rgb),0));
  font-size: 11.5px; letter-spacing: .1em; line-height: 1.65; color: #a8946a;
}
.fin-how b { display: block; margin-bottom: 4px; color: var(--gold); letter-spacing: .18em; }

.finale-box .finale-box .fin-opts { display: grid; gap: 7px; text-align: left; margin: 0 0 16px; }
/* ONE AUTHORISATION BLOCK PER ENDING. --acc is the ending's own colour, set
   inline from FIN_ART, so every rule below is written once and each block
   wears its faction without a rule of its own. */
.finale-box .fin-opt {
  --acc: var(--w-gold); --rgb: 197,160,89;
  font-family: var(--font); cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: 26px 30px 1fr; gap: 3px 11px;
  align-items: start; border-radius: 0;
  background: #0b0c10; border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid rgba(var(--rgb), .55);
  padding: 12px 13px;
}
.finale-box .fin-opt:hover:not(:disabled), .fin-opt:focus-visible:not(:disabled) {
  background: rgba(var(--rgb), .09);
  border-color: rgba(var(--rgb), .55);
  border-left-color: var(--acc); outline: none;
}/* press handled by MÜHÜR */

/* THE WAY BACK, AND IT MUST NOT LOOK LIKE A SIXTH PATH. The verdict blocks are
   the decision; this is the one control that declines to make it, so it is
   built the opposite way — no accent rail, no number, no mark, quiet ground,
   full width, under the checklist rather than among the paths. Scoped at
   `.finale-box` because `.gm-box button` already outranks a lone class here and
   has silently eaten a finale rule once before. */
.finale-box .fin-stay {
  display: block; width: 100%; margin: 14px 0 0; padding: 11px 13px;
  font-family: var(--font); text-align: left; cursor: pointer; border-radius: 0;
  background: transparent; border: 1px solid var(--line, rgba(255,255,255,.09));
  color: #9d9484; letter-spacing: .04em;
}
.finale-box .fin-stay b { display: block; color: var(--gold, var(--w-gold));
  font-weight: 400; font-size: 12px; letter-spacing: .18em; }
.finale-box .fin-stay i { display: block; margin-top: 4px; font-style: normal;
  font-size: 11px; color: #6b6152; letter-spacing: .1em; line-height: 1.5; }
.finale-box .fin-stay:hover { border-color: rgba(255,255,255,.2); color: #b9b0a0; }/* press handled by MÜHÜR */

/* the running number, because these are protocols and protocols are numbered */
.fin-n { grid-row: 1 / 3; font-size: 11px; letter-spacing: .1em; color: #4a4232;
  padding-top: 3px; font-variant-numeric: tabular-nums; }
.fin-mk { grid-row: 1 / 3; width: 30px; height: 30px; fill: var(--acc);
  color: var(--acc); }
.fin-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fin-h b { color: var(--acc); letter-spacing: .18em; font-size: 14px; }
.fin-h i { color: #6b6152; font-style: normal; font-size: 11px;
  letter-spacing: .12em; margin-left: auto; text-transform: uppercase; }
.fin-l { display: block; margin-top: 4px; color: #9d9484; font-size: 12.5px;
  line-height: 1.55; }
/* YOUR OWN KIND is named, not decorated — it is a fact about the choice */
.finale-box .fin-opt.own .fin-h i { color: var(--acc); opacity: .85; }

/* ---- THE SIXTH PATH ---------------------------------------------------------
   Locked, it is a rusted door with a stamp across it. Open, it is the brightest
   thing on the screen: the player broke the collar, and every company block
   above should look dim beside it. */
.finale-box .fin-opt.sixth {
  border-width: 1px; border-left-width: 4px;
  background:
    repeating-linear-gradient(45deg, rgba(255,138,31,.05) 0 6px, rgba(0,0,0,0) 6px 12px),
    #0b0c10;
}
.finale-box .fin-opt.sixth:not(.locked) {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 1px rgba(255,138,31,.25), 0 0 26px rgba(255,138,31,.16);
}
.finale-box .fin-opt.sixth:not(.locked) .fin-h b { text-shadow: 0 0 14px rgba(255,138,31,.55); }
.finale-box .fin-opt.locked {
  --acc: #ff3333; --rgb: 255,51,51;
  cursor: not-allowed; opacity: .4; position: relative;
  border-color: rgba(255,51,51,.35); border-left-color: rgba(255,51,51,.6);
  background: repeating-linear-gradient(45deg, rgba(255,51,51,.06) 0 6px, rgba(0,0,0,0) 6px 12px), #0a0708;
  box-shadow: none;
}
.fin-lock { grid-column: 3; display: block; margin-top: 7px; padding-top: 6px;
  border-top: 1px solid rgba(255,51,51,.3);
  color: #ff3333; font-size: 11px; letter-spacing: .1em; line-height: 1.5; }
.fin-lock em { display: block; font-style: normal; font-size: 11.5px;
  letter-spacing: .24em; margin-bottom: 3px; }

@media (max-width: 460px) {
  .finale-box .fin-opt { grid-template-columns: 22px 26px 1fr; gap: 3px 9px; padding: 11px 10px; }
  .fin-mk { width: 26px; height: 26px; }
  .fin-h b { font-size: 13px; letter-spacing: .14em; }
  .fin-h i { flex: 1 1 100%; margin-left: 0; }
  #fin-intro { font-size: 11px; letter-spacing: .14em; line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) { .fin-opt { transition: none; } }

.sx-box { text-align: left; border: 1px solid var(--line); background: #0a0805; padding: 9px 11px; }
.sx-box.open { border-color: var(--good-dim); }
.sx-head { color: var(--good); letter-spacing: .12em; font-size: 12px; margin-bottom: 3px; }
.sx-note { color: var(--ink-dim); font-size: 11px; line-height: 1.5; margin-bottom: 6px; }
.sx-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 0; }
.sx-row.ok { color: var(--good); }
.sx-row.no { color: var(--ink-dim); }
.sx-row b { color: var(--ink); }

.ms-agenda { color: var(--gold); font-size: 11.5px; line-height: 1.55; margin-bottom: 7px; font-style: italic; }
.fs-agenda { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line);
  color: var(--gold-dim); font-size: 11px; line-height: 1.5; font-style: italic; }
.ms-end { color: var(--ink-dim); font-size: 11.5px; line-height: 1.5; margin-bottom: 6px; }
.ms-endbar { height: 6px; background: #0a0805; border: 1px solid var(--line); }
.ms-endbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.ms-endpct { font-size: 11px; color: var(--gold-dim); letter-spacing: .1em; margin: 3px 0 8px; }

/* ---- THE SYSTEM'S VOICE, NORMALISED (Gemini type spec §A) -------------------
   Every category label and machine stamp reads at one size, one tracking, one
   dim gold — deliberately small and slow, the way an authority speaks. These
   were scattered across 10–12px and .1–.22em; one rule ends the drift. */
.rv-tag, #dc-ctx, .rt-g, .mc-tag, .rv-sec, .bf-ck {
  font-family: var(--font); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; line-height: 1.2; }
.rv-tag, .rv-sec { color: var(--gold-dim); }

/* ---- the console changes colour with the age -----------------------------
   Each age tints the console with its own material, which is worth keeping —
   but the old ladder ended at #a8e8ff, a bright cyan, so a late-game watch was
   lit exactly like the terminal green the owner threw out, in a different hue.
   The materials survive; their VALUES are pulled into the tarnished range, so
   the console ages from wet clay through soot to cold alloy without any step
   of it glowing. Saturation stays under 40% and lightness under 66% in every
   row, which is the whole rule. */
/* THE ERA LADDER IS A MATERIAL LADDER, AND A HIVE HAS NO CLAY AGE. These rows
   set --gold on BODY, which beats the inline :root value racePalette writes,
   so without the guard below a Kovan console goes bronze in the bronze age.
   The Hive's console is a machine on its first day and on its last. */
body[data-kind="insectoid"][data-era] {
  --gold: var(--t-hi); --gold-dim: var(--t-ghost); }
body[data-era="clay"]   { --gold: #b08a4e; --gold-dim: #6e5730; }
body[data-era="bronze"] { --gold: #a97c42; --gold-dim: #6a4e2a; }
body[data-era="iron"]   { --gold: #9c8f80; --gold-dim: #625a50; }
body[data-era="marble"] { --gold: #b0a993; --gold-dim: #6e6a5c; }
body[data-era="ink"]    { --gold: #a89b66; --gold-dim: #696141; }
body[data-era="soot"]   { --gold: #9a7340; --gold-dim: #614829; }
body[data-era="steel"]  { --gold: #8d949b; --gold-dim: #585d62; }
body[data-era="glass"]  { --gold: #7d939c; --gold-dim: #4e5c62; }
body[data-era="light"]  { --gold: #93a3ab; --gold-dim: #5b666b; }
.crt, #topbar, #statbar, #tabs, .pane, .dc-box, .gm-box { transition: color .8s, border-color .8s; }

/* ---- mobile ---- */
@media (max-width: 880px) {
  #layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 58%) minmax(0, 42%); }
  #left { border-right: none; }
  #right { border-top: 1px solid var(--line); }
  #feed { height: 84px; }
  .ov-box h1 { font-size: 28px; }
  .ov-story { max-height: 38vh; }
}
@media (max-width: 600px) {
  body { font-size: 13.5px; }
  #topbar { padding: 5px 8px; gap: 4px 8px; font-size: 11px; }
  #topbar button { padding: 5px 9px; font-size: 12px; }
  #statbar { gap: 3px 10px; padding: 5px 8px; font-size: 11px; }
  #viewport { padding: 4px; }
  #genebar { font-size: 11px; padding: 4px 8px; }
  #feed { height: 92px; font-size: 12.5px; padding: 5px 8px; }
  .tab { font-size: 11px; padding: 9px 0; }
  .dc-box { padding: 14px 14px; }
  .dc-box h2 { font-size: 18px; }
  /* 15px is the READABILITY FLOOR for running prose (spec §B) — the old 14px
     override sat under it on the one screen the game actually ships on */
  #dc-text { font-size: 15px; }
  .dc-label { font-size: 14px; }
  #ov-reseed { font-size: 13px; padding: 10px 22px; }
  /* the top bar has to stay usable: drop the least urgent readouts, but never
     the seed chip — copying the world link matters most on a phone */
  .asc-label, #topbar .sep { display: none; }
  #seed-chip { font-size: 11px; }
  .dm { grid-template-columns: 62px 1fr 54px; font-size: 11px; }
  .dc-tone { display: block; float: none; margin-top: 4px; width: fit-content; }
  .sh-btns { flex-direction: column; }
  .sh-text { font-size: 11px; }
  .ov-share { display: block; width: 100%; margin: 0 0 10px; font-size: 12.5px; padding: 10px 0; }
  .ec-name { font-size: 12px; }
}

/* ---- the objective strip: why any of this matters, always on screen -------- */
.objective {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; margin: 0 0 4px;
  font-size: 11px; letter-spacing: .08em; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--race) 14%, transparent), transparent 70%);
  border-left: 3px solid var(--race);
  color: #cfc6b4; overflow: hidden; white-space: nowrap;
}
.objective:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--race) 24%, transparent), transparent 70%); }
.objective .ob-mark { color: var(--race); font-size: 13px; }
.objective .ob-now { color: var(--race); font-weight: 700; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.objective .ob-arrow { opacity: .45; }
.objective .ob-end { opacity: .72; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* ---- HOW TO DO THIS: the levers that actually move the bar ----------------- */
.ms-how {
  margin: 8px 0 4px; padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--race) 34%, transparent);
  background: color-mix(in srgb, var(--race) 7%, transparent);
}
.ms-how-h {
  font-size: 11px; letter-spacing: .13em; color: var(--race);
  margin-bottom: 5px; opacity: .9;
}
.ms-how-i {
  font-size: 11px; line-height: 1.5; color: #b8b0a0;
  padding-left: 12px; position: relative; margin-bottom: 4px;
}
.ms-how-i:last-child { margin-bottom: 0; }
.ms-how-i::before { content: '▸'; position: absolute; left: 0; color: var(--race); opacity: .7; }

/* An ancient-knowledge card now holds for 16s — give it a read-timer edge so it
   is obvious it is going to stay, and that it is going to leave. */
.unlockbar.lore::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--race); width: 100%;
  transform-origin: left; animation: lore-read 16s linear forwards;
}
@keyframes lore-read { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- THE SIGILS: drawn marks, not borrowed emoji --------------------------- */
/* Each sits on the text baseline and takes the colour of whatever it is next to,
   so one mark serves the statbar, the toasts, the chapter head and the pact
   cards without a size or colour rule per site. */
.sig {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -.22em;
  color: inherit; flex: none;
}
.fs-icon .sig    { width: 2.4em; height: 2.4em; vertical-align: middle; }
.cine-icon .sig,
#cine-icon .sig  { width: 1em;   height: 1em;   vertical-align: middle; }
.ms-head .sig    { width: 1.3em; height: 1.3em; }
.ub-sigil .sig   { width: 1.25em; height: 1.25em; opacity: .95; }
.fin-i .sig      { width: 1.5em; height: 1.5em; }
#pl-sigil .sig   { width: 1.6em; height: 1.6em; }
#st-faction .sig { width: 1.1em; height: 1.1em; }
.dc-eye .sig, #dc-eye .sig { width: 1em; height: 1em; }
/* the mark breathes very slightly, so it reads as a live signal not a logo */
@keyframes sig-pulse { 0%,100% { opacity: .92; } 50% { opacity: 1; } }
.ms-head .sig, .fs-icon .sig, #pl-sigil .sig { animation: sig-pulse 4.5s ease-in-out infinite; }

/* ---- readability: the guidance was set too small to read ------------------- */
.ms-how { padding: 10px 11px; }
.ms-how-h { font-size: 11px; letter-spacing: .14em; margin-bottom: 7px; }
.ms-how-i {
  font-size: 13.5px; line-height: 1.62; color: #cbc3b2;
  padding-left: 16px; margin-bottom: 8px;
}
.ms-how-i::before { font-size: 12px; top: 1px; }
.ms-how-i.go {
  cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--race) 40%, transparent);
  padding-bottom: 5px; transition: color .15s, background .15s;
}
.ms-how-i.go:hover { color: var(--race); background: color-mix(in srgb, var(--race) 9%, transparent); }
.ms-go {
  margin-left: 7px; font-size: 11px; letter-spacing: .12em;
  color: var(--race); opacity: .85; white-space: nowrap;
}
.ms-goal { font-size: 13px; line-height: 1.55; }
.ms-prog { font-size: 12.5px; }
.ms-path { font-size: 13px; }
.ms-ch   { font-size: 13.5px; }

/* ---- the kind's material, behind the whole right column -------------------- */
/* One pinned surface, not a canvas inside each scrolling pane: a pane is a
   scroll container, so a canvas inside one slides out of view the moment the
   panel has any length. This one never moves and it is under every tab. */
#right { position: relative; background: var(--panel); }
.kindskin {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* the tabs, the panes and the credit all sit on top of the material */
#right > *:not(.kindskin) { position: relative; z-index: 1; }
/* the panes themselves go transparent so the material shows through, and the
   text keeps its own dark plate so it stays readable over a live surface */
#right .pane { background: transparent; }
#tabs { background: rgba(6,5,8,.86); backdrop-filter: blur(2px); }
/* The panes carry no plate at all now: the material is visible in the gutters
   BETWEEN cards, and every card is opaque, so no glyph ever crosses a letter. */
#right .pane { background: transparent; }
#pane-kind #kind, #pane-pacts #pacts, #pane-mission #mission,
#pane-miles, #pane-regions #regions, #pane-census #census, #pane-annals {
  background: transparent;
  padding: 11px 11px 26px;
  display: flex; flex-direction: column; gap: 11px;
}
#pane-annals, #milestones { gap: 0; }

/* ---- the card ------------------------------------------------------------- */
.pcard {
  background: rgba(9,8,13,.97);
  border: 1px solid var(--line);
  border-left: 3px solid var(--race);
}
.pcard > h3 {
  margin: 0; padding: 10px 13px 9px;
  font-size: 11px; letter-spacing: .2em; font-weight: normal;
  color: var(--race); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--race) 6%, transparent);
}
.pcard > .in { padding: 12px 13px; }
.pcard > .in > *:first-child { margin-top: 0; }

/* the kind's name and its agenda, at the top of every kind screen */
.pc-who {
  color: var(--race); font-size: 15px; letter-spacing: .18em;
  display: flex; align-items: center; gap: 9px;
}
.pc-agenda { font-size: 12px; color: var(--ink-dim); line-height: 1.7; margin-top: 8px; }
.pc-quote { font-style: italic; font-size: 12.5px; line-height: 1.7; color: var(--ink); }

/* a headline figure with its bar underneath */
.pc-big { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc-big span { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); }
.pc-big b { font-size: 24px; line-height: 1; color: var(--race); font-variant-numeric: tabular-nums; }
.pc-big b small { font-size: 14px; color: var(--ink-dim); font-weight: normal; }
.pc-bar { height: 5px; background: #0d0b10; margin: 10px 0 7px; }
.pc-bar i { display: block; height: 100%; background: var(--race); transition: width .4s; }
.pc-bar i.b { background: var(--bad); } .pc-bar i.n { background: var(--gold-dim); }
.pc-cap { font-size: 11px; color: var(--ink-dim); opacity: .8; line-height: 1.55; }
.pc-prose { font-size: 12px; color: var(--ink-dim); line-height: 1.7; }

/* the resource rows, as tiles: the number first and aligned */
.pc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.pc-tile { background: rgba(9,8,13,.97); padding: 11px 12px; min-width: 0; }
.pc-tile b {
  display: block; font-size: 20px; line-height: 1.1; color: var(--race);
  font-variant-numeric: tabular-nums;
}
.pc-tile span {
  display: block; font-size: 11px; letter-spacing: .09em; color: var(--ink);
  margin-top: 5px; overflow-wrap: anywhere;
}
.pc-tile i {
  display: block; font-style: normal; font-size: 11px; color: var(--ink-dim);
  opacity: .78; margin-top: 4px; line-height: 1.5;
}

/* a checklist row (the sixth path, the chapter list) */
.pc-ck {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 9px;
  padding: 8px 0; font-size: 11.5px; border-top: 1px solid rgba(36,31,24,.7);
}
.pc-ck:first-of-type { border-top: 0; }
.pc-ck.no { color: var(--ink-dim); } .pc-ck.yes { color: var(--good); }
.pc-ck b { font-weight: normal; font-variant-numeric: tabular-nums; }

#credit { background: rgba(6,5,8,.92); }
/* the old flat per-kind backgrounds are replaced by the material itself */
body[data-kind] #pane-kind { background: transparent; }

/* ---- PACTS: the four other watchers, loudest first ------------------------- */
.pc-top {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.pc-tally {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.42);
}
.pc-tally b { font-size: 22px; line-height: 1; color: var(--race); }
.pc-tally b.bad  { color: #d4735e; }
.pc-tally b.good { color: var(--good); }
.pc-tally span {
  font-size: 11px; letter-spacing: .1em; text-align: center;
  color: #9a9284; line-height: 1.3;
}
.dp-power {
  font-size: 11px; color: #9a9284; margin: 4px 0 6px;
  letter-spacing: .05em;
}
.dp-power b { color: var(--race); }
/* each card wears the colour of the watcher it is about, not yours */
#pane-pacts .dp-card {
  border-left: 3px solid var(--race);
  background: rgba(0,0,0,.5);
  margin-bottom: 9px; padding: 9px 10px;
}
#pane-pacts .dp-card.hostile { box-shadow: inset 0 0 26px rgba(212,115,94,.13); }
#pane-pacts .dp-card.ally    { box-shadow: inset 0 0 26px rgba(127,201,138,.13); }
#pane-pacts .dp-head { font-size: 13px; }
#pane-pacts .dp-terms { font-size: 11.5px; line-height: 1.5; }

/* ---- the remaining panes, brought onto the card grammar -------------------- */
/* MILESTONES, WORLD, CENSUS and HISTORY were not built out of cards, so they
   each get one card-shaped surface rather than floating on the material. */
#pane-miles > #next-bar,
#pane-miles > #milestones,
#pane-regions > #regions,
#pane-census > #census,
#pane-annals > #annals {
  background: rgba(9,8,13,.97);
  border: 1px solid var(--line);
  border-left: 3px solid var(--race);
  padding: 11px 13px;
  margin: 0;
}
#pane-miles { padding: 11px 11px 26px; display: flex; flex-direction: column; gap: 11px; }
#pane-annals > #annals, #pane-census > #census { list-style: none; }

/* the region cards and milestone rows sit inside their surface, so they lose
   their own borders and keep only the rhythm */
#pane-regions .rg-card { background: transparent; border-left: 0; }
#milestones li { background: transparent; }
#pane-annals #annals li { background: transparent; }

/* the tally strip at the head of PACTS */
.pcard > .pc-top { margin: 0; padding: 11px 11px 0; }
.pcard > .pc-top + .in { padding-top: 10px; }
.pc-tally { border: 1px solid var(--line); background: rgba(0,0,0,.4); }

/* PACTS cards: the head becomes the card's title bar */
.pcard.dp-card > h3.dp-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; letter-spacing: .14em; color: var(--race);
}
.pcard.dp-card > h3.dp-head i { font-style: normal; font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; }
.pcard.dp-card .dp-moves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pcard.dp-card .dp-terms { font-size: 11.5px; line-height: 1.55; margin-top: 6px; color: var(--ink-dim); }
.pcard.dp-card .dp-terms b { color: var(--ink); font-weight: normal; }

/* the chapter card's own bits */
.ms-ch { font-size: 13.5px; letter-spacing: .1em; color: var(--ink); }
.ms-path { font-size: 12.5px; color: var(--race); margin-top: 8px; }
.ms-goal { font-size: 12px; color: var(--ink-dim); line-height: 1.6; margin-top: 5px; }
.pc-big b.urgent { color: var(--bad); }

/* HOW TO DO THIS is a card now, so its old box chrome goes */
.pcard > .in > .ms-how-i:first-child { margin-top: 0; }
.pcard .ms-how-i { margin-bottom: 9px; }
.pcard .ms-how-i:last-child { margin-bottom: 0; }

/* the three figures at the head of PACTS are buttons into the deck */
.pc-tally[data-filter] { cursor: pointer; transition: background .15s, border-color .15s; }
.pc-tally[data-filter]:hover { background: rgba(255,255,255,.05); border-color: var(--race); }
.pc-tally.on { border-color: var(--race); background: color-mix(in srgb, var(--race) 14%, transparent); }
.pc-tally.on span { color: var(--race); }

/* ---- the sixth seat: on the table, not yours to take ----------------------- */
.fs-card.sealed {
  cursor: not-allowed; position: relative;
  filter: grayscale(.55) brightness(.66);
  transition: filter .25s;
}
.fs-card.sealed::before {
  /* a seal across the card, drawn rather than written */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg,
    transparent 0 13px, rgba(216,207,174,.055) 13px 15px);
}
.fs-card.sealed:hover { filter: grayscale(.35) brightness(.82); }
.fs-card.sealed .fs-icon { opacity: .6; }
.fs-refuse {
  min-height: 0; margin-top: 0; padding: 0 0;
  font-size: 12px; line-height: 1.65; color: var(--w-bone);
  border-top: 0 solid transparent; overflow: hidden;
  max-height: 0; opacity: 0;
  /* height applies at once — only the fade is animated, so the answer is on
     screen even where transitions do not run */
  transition: opacity .3s ease;
}
.fs-card.refusing .fs-refuse {
  max-height: 90px; opacity: 1; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(216,207,174,.3);
}
/* the card flinches once, the way a channel closing looks */
@keyframes seal-flinch {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-4px); }
  36%  { transform: translateX(3px); }
  54%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.fs-card.refusing { animation: seal-flinch .34s ease-out; filter: grayscale(.2) brightness(1); }

/* ---- THE RACE HUD: what your kind is counting, big, across the top ---------- */
/* The statbar counts the world. This counts you. */
.racehud {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--race) 9%, rgba(6,5,9,.92)), rgba(6,5,9,.94));
}
.racehud.hidden { display: none; }

/* the two headline figures */
.rh-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.rh-g {
  padding: 9px 16px 10px; min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--race) 22%, transparent);
}
.rh-g-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.rh-g-i { font-size: 14px; color: var(--race); line-height: 1; }
.rh-g-n {
  font-size: 11px; letter-spacing: .13em; color: #9a9284;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-g-v {
  font-size: 30px; line-height: 1.05; color: var(--race);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-shadow: 0 0 22px color-mix(in srgb, var(--race) 45%, transparent);
}
.rh-g-bar { height: 4px; background: #0d0b10; margin: 6px 0 5px; }
.rh-g-bar i {
  display: block; height: 100%; background: var(--race);
  box-shadow: 0 0 10px var(--race); transition: width .5s;
}
.rh-g-note {
  font-size: 11px; line-height: 1.45; color: #7d766a;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* the three forces pushing back */
.rh-press { padding: 8px 16px 9px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rh-p-head {
  font-size: 11px; letter-spacing: .13em; color: #7d766a; margin-bottom: 2px;
}
.rh-p {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 88px 30px;
  align-items: center; gap: 8px; cursor: help;
}
.rh-p-i { font-size: 12px; line-height: 1; text-align: center; }
.rh-p-n {
  font-size: 11px; letter-spacing: .07em; color: #a49c8e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-p-bar { display: block; height: 5px; background: #0d0b10; }
.rh-p-bar i { display: block; height: 100%; transition: width .5s; }
.rh-p-v { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; font-weight: normal; }
.rh-p.low  .rh-p-bar i { background: var(--good); } .rh-p.low  .rh-p-v { color: var(--good); }
.rh-p.mid  .rh-p-bar i { background: var(--w-brass); } .rh-p.mid  .rh-p-v { color: var(--w-brass); }
.rh-p.high .rh-p-bar i { background: #d4735e; box-shadow: 0 0 9px rgba(212,115,94,.65); }
.rh-p.high .rh-p-v { color: #d4735e; }
.rh-p.high .rh-p-n { color: #d4735e; }
.rh-p.high .rh-p-i { animation: blink 1.4s steps(1) infinite; }

@media (max-width: 1250px) {
  .racehud { grid-template-columns: 1fr; }
  .rh-press { border-top: 1px solid color-mix(in srgb, var(--race) 22%, transparent); }
  .rh-g-v { font-size: 25px; }
}

/* ---- what a place still holds about you ----------------------------------- */
.rg-mood {
  display: grid; grid-template-columns: minmax(0,1fr) 74px 34px;
  align-items: center; gap: 8px; margin-top: 7px;
}
.rg-mood-w { font-size: 11px; letter-spacing: .13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-mood-bar { display: block; height: 4px; background: #0d0b10; }
.rg-mood-bar i { display: block; height: 100%; }
.rg-mood b { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; font-weight: normal; }
.rg-mood.fear .rg-mood-w, .rg-mood.fear b { color: #d4735e; }
.rg-mood.fear .rg-mood-bar i { background: #d4735e; }
.rg-mood.love .rg-mood-w, .rg-mood.love b { color: var(--good); }
.rg-mood.love .rg-mood-bar i { background: var(--good); }
.rg-mood.flat .rg-mood-w, .rg-mood.flat b { color: #8d8577; }
.rg-mood.flat .rg-mood-bar i { background: #8d8577; }
.rg-voice {
  font-size: 11px; font-style: italic; line-height: 1.5;
  color: #9a9284; margin-top: 5px; padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--race) 40%, transparent);
}

/* ---- statbar diet ---------------------------------------------------------
   Nine numbers competed for the same attention and perhaps three of them ever
   changed what a player clicked. The read-outs stay — they are still true, and
   the panels use them — but they stop shouting alongside the levers. */
#statbar .st-quiet { opacity: .45; font-size: 11px; transition: opacity .2s; }
#statbar .st-quiet:hover { opacity: 1; }
#statbar .st-quiet b { color: var(--ink-dim); }
@media (max-width: 1400px) { #statbar .st-quiet { display: none; } }

/* ---- the instrument calling your choice before you make it ---------------- */
.dc-predict {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 9px 12px;
  border: 1px solid rgba(184,220,236,.28);
  background: linear-gradient(90deg, rgba(184,220,236,.09), transparent 78%);
  font-size: 12px; line-height: 1.5; color: #b6cdd8;
  animation: dp-in .5s ease-out;
}
.dc-predict.hidden { display: none; }
.dp-mark { color: #9ecbdc; font-size: 13px; animation: blink 2.2s steps(1) infinite; }
.dp-line { flex: 1; min-width: 0; }
.dp-rec {
  font-size: 11px; letter-spacing: .1em; color: #7f97a3;
  border-left: 1px solid rgba(184,220,236,.25); padding-left: 10px; white-space: nowrap;
}
@keyframes dp-in { from { transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- which build you are looking at ---------------------------------------- */
.version {
  margin-left: 10px; padding: 3px 8px;
  font-size: 11px; letter-spacing: .13em; white-space: nowrap;
  color: #7d766a; border: 1px solid var(--line);
  background: rgba(0,0,0,.35); cursor: default; user-select: all;
}
.version:hover { color: var(--race); border-color: color-mix(in srgb, var(--race) 45%, transparent); }

/* ---- the epoch row: what this species has made possible -------------------- */
.rg-acts-label.epoch { color: var(--w-brass); }
.rg-epoch-line {
  font-size: 11px; font-style: italic; line-height: 1.55;
  color: #9a9284; margin: 0 0 7px; padding-left: 9px;
  border-left: 2px solid rgba(201,162,74,.45);
}

/* ---- the chapter purse: favor stops being free ----------------------------- */
.purse {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  font-size: 11px; letter-spacing: .1em; color: #8d8577;
}
.purse.hidden { display: none; }
.purse .pu-l { opacity: .8; }
.purse .pu-bar { display: block; width: 62px; height: 4px; background: #0d0b10; }
.purse .pu-bar i { display: block; height: 100%; background: var(--race); transition: width .4s; }
.purse b { color: var(--ink-dim); font-weight: normal; font-variant-numeric: tabular-nums; }
.purse.low .pu-bar i { background: var(--w-brass); } .purse.low b { color: var(--w-brass); }
.purse.over .pu-bar i { background: #d4735e; } .purse.over b { color: #d4735e; }
.purse .pu-debt {
  font-style: normal; color: #d4735e; font-size: 11px;
  border-left: 1px solid var(--line); padding-left: 7px;
}

/* ---- a rival's plan, with a countdown you can play against ------------------ */
.rh-s {
  display: grid; grid-template-columns: 15px minmax(0,1fr) 34px auto;
  align-items: center; gap: 8px; cursor: help;
}
.rh-s-i { font-size: 12px; text-align: center; color: var(--race); }
.rh-s-n {
  font-size: 11px; letter-spacing: .06em; color: var(--race);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-s-y { font-size: 12px; text-align: right; color: var(--race); font-variant-numeric: tabular-nums; font-weight: normal; }
.rh-s.urgent .rh-s-n, .rh-s.urgent .rh-s-y { color: #d4735e; }
.rh-s.urgent .rh-s-i { animation: blink 1.1s steps(1) infinite; }
.rh-s-b {
  font: 9.5px "Courier New", monospace; letter-spacing: .08em; cursor: pointer;
  padding: 3px 7px; white-space: nowrap;
  background: rgba(0,0,0,.45); color: var(--race);
  border: 1px solid color-mix(in srgb, var(--race) 45%, transparent);
}
.rh-s-b:hover { background: color-mix(in srgb, var(--race) 18%, transparent); }
.rh-s-b.poor { opacity: .4; cursor: not-allowed; }

/* ---- the parley answers back ----------------------------------------------- */
/* Round one they open; after that the line on screen is their reply to what you
   just said, tinted by whether it moved the balance your way. */
.pl-line { transition: color .3s; }
.pl-line.r-won  { color: #8fca8f; }
.pl-line.r-held { color: #cbc3b2; }
.pl-line.r-lost { color: #d4735e; }
.pl-them-said {
  display: block; font-style: italic; color: #a8b6c0;
  padding-left: 10px; margin-top: 3px;
  border-left: 2px solid rgba(168,182,192,.35);
}

/* ==========================================================================
   THE ECONOMY'S TWO SMALL SURFACES (docs/EKONOMI.md, 2026-08-18)
   The bribe strip sits INSIDE the option column but is not an option: dashed,
   quiet, and it never carries the two-tap seal — one tap pays, the card is
   still to be answered. The palace panel lives in the game menu: purse line,
   three wings, and the crooked-ledger toggle, all in the menu's own idiom.
   ========================================================================== */
.dc-bribe { display: block; width: 100%; margin: 0 0 8px; padding: 8px 11px;
  font-family: var(--font); font-size: 11px; letter-spacing: .06em; text-align: left;
  background: transparent; color: var(--gold-dim, #8a744a); cursor: pointer;
  border: 1px dashed var(--line, rgba(255,255,255,.16)); border-radius: 0; }
.dc-bribe:hover:not(:disabled) { color: var(--gold, var(--w-gold)); border-color: var(--gold-dim, #8a744a); }
.dc-bribe:disabled { opacity: .55; cursor: default; }
.dc-bribe.paid { color: var(--gold, var(--w-gold)); border-style: solid; opacity: 1; }

#gm-saray:not(:empty) { margin: 4px 0 6px; padding: 8px 0 2px;
  border-top: 1px solid var(--line, rgba(255,255,255,.12)); }
#gm-saray .sr-h { font-size: 11px; letter-spacing: .13em; color: var(--gold-dim, #8a744a);
  margin: 0 0 7px; }
#gm-saray .sr-h b { color: var(--gold, var(--w-gold)); font-weight: 400; }
#gm-saray .sr-h .sr-k { float: right; font-style: normal; color: #a05c4a; letter-spacing: .08em; }
#gm-saray .sr-t { display: block; width: 100%; margin: 0 0 6px; padding: 8px 10px;
  font-family: var(--font); font-size: 11px; letter-spacing: .08em; text-align: left;
  background: transparent; color: var(--ink, #cfc6b8); cursor: pointer;
  border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 0; }
#gm-saray .sr-t i { display: block; font-style: normal; font-size: 11px; margin-top: 3px;
  color: var(--ink-dim, #8d8375); letter-spacing: .05em; }
#gm-saray .sr-t:disabled { opacity: .45; cursor: default; }
#gm-saray .sr-t.own { border-style: solid; border-color: var(--gold-dim, #8a744a);
  color: var(--gold, var(--w-gold)); cursor: default; }
#gm-saray .sr-t.kacak { border-style: dashed; color: var(--ink-dim, #8d8375); }
#gm-saray .sr-t.kacak.on { border-color: #a05c4a; color: #c07b62; }

/* THE FORESIGHT'S CHIPS (EKONOMİ Faz 3): the bought-back outcome line, under
   the option's own text in the reveal's chip grammar. Small and quiet — it is
   information the player paid for, not decoration. */
/* (b995) .dc-fores kaldirildi: kehanet karttan cikti. */
/* ARSIV KEHANETTEN BASKA BIR SEY SATAR (b978): kehanet konsolun zaten
   gosterdigi olculeri onceden gosterir, arsiv konsolun HIC gostermedigi
   satirlari acar. Ayri gorunmeleri gerekiyor, cunku ayni parayla alinan iki
   farkli bilgi ayni dugme gibi durursa oyuncu ikisini de almaz. */
/* ODENEN HAMLELER SERIDI: siklarin altinda, kartin kendi genisliginde.
   Bir kart zamani hamlesi odedigi seyin yaninda durmali -- bir kasa
   dokumunun dibinde degil. */
/* (b996) .dc-spend kurallari kaldirildi: kart zamani odenen hamlelerin
   ucu de karttan cikti, serit artik hic cizilmiyor. */
/* (b995) .dc-arsiv / .dc-fs.dc-ars kaldirildi: arsiv karttan cikti.
   Seritte artik yalnizca denetci rusveti var. */
.dc-fs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.dc-fs i { font-style: normal; font-size: 11px; letter-spacing: .06em;
  color: var(--ink-dim, #8d8375); }
.dc-fs i.g { color: #7fae6a; }
.dc-fs i.b { color: #c07b62; }


/* ---- cardart :: the single art family ------------------------------------- */
/* Sizing: the card slot, the rite sheet and the era screen all hand the SVG a
   width; the viewBox carries the ratio. Motion is decorative only, and every
   entrance uses keyframe `from` + backwards fill so a paused clock still shows
   the finished scene. */
.ca { display: block; width: 100%; height: auto; }
#dc-scene .ca { max-height: 34vh; }
.ca-sig { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; }
@media (prefers-reduced-motion: no-preference) {
  .ca-breathe { animation: caBr 6s ease-in-out infinite; transform-origin: 50% 80%; }
  @keyframes caBr { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  .ca-shim { animation: caSh 5s ease-in-out infinite; }
  @keyframes caSh { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
  .ca-flick { animation: caFl 3.6s ease-in-out infinite; }
  @keyframes caFl { 0%, 100% { opacity: .8; } 25% { opacity: 1; } 60% { opacity: .7; } }
  .ca-tw { animation: caTw 4.2s ease-in-out infinite; }
  .ca-tw2 { animation: caTw 6s 1.6s ease-in-out infinite; }
  @keyframes caTw { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
  .ca-rise { animation: caInR 1.1s .1s ease-out backwards; }
  @keyframes caInR { from { transform: translateY(28px); } to { transform: translateY(0); } }
  .ca-bloom { transform-origin: 400px 300px; animation: caInB 1.5s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
  @keyframes caInB { from { transform: scale(.5); } to { transform: scale(1); } }
  .ca-fade { animation: caInF 1.6s .8s ease-out backwards; }
  @keyframes caInF { }
  .ca-pour { animation: caInF 2s .7s ease-out backwards; }
  .ca-rays { animation: caRy 160s linear infinite; transform-origin: 400px 300px; }
  @keyframes caRy { to { transform: rotate(360deg); } }
  .ca-blink { transform-box: fill-box; transform-origin: center top; transform: scaleY(0);
    animation: caBl 8s 4s ease-in-out infinite; }
  @keyframes caBl { 0%, 94%, 100% { transform: scaleY(0); } 95.8%, 97.2% { transform: scaleY(1); } }
  .ca-gaze { animation: caGz 12s 3s ease-in-out infinite; }
  @keyframes caGz { 0%, 32%, 100% { transform: translateX(0); } 38%, 50% { transform: translateX(4.5px); }
    56%, 68% { transform: translateX(-3.5px); } 76% { transform: translateX(0); } }
  .ca-data { stroke-dasharray: 3 5; animation: caDa 1.2s linear infinite; }
  @keyframes caDa { to { stroke-dashoffset: -8px; } }
  .ca-cursor { animation: caCu 1.1s steps(1) infinite; }
  @keyframes caCu { }
  .ca-node { animation: caNd 3.4s ease-in-out infinite; }
  .ca-node2 { animation: caNd 3.4s 1.7s ease-in-out infinite; }
  @keyframes caNd { }
  .ca-nib { animation: caNb 7s ease-in-out infinite; }
  @keyframes caNb { }
  .ca-tongue { transform-box: fill-box; transform-origin: center top; transform: scaleY(0);
    animation: caTg 9s 3s ease-out infinite; }
  @keyframes caTg { 0%, 91%, 100% { transform: scaleY(0); } 93%, 95.5% { transform: scaleY(1); } }
  .ca-slit { animation: caSg 11s 2s ease-in-out infinite; }
  @keyframes caSg { 0%, 40%, 100% { transform: translateX(0); } 46%, 60% { transform: translateX(3.5px); }
    66%, 78% { transform: translateX(-3px); } 86% { transform: translateX(0); } }
  .ca-glide { animation: caGd 10s 2.5s ease-in-out infinite; }
  @keyframes caGd { 0%, 35%, 100% { transform: translate(0, 0); } 45%, 58% { transform: translate(9px, 3px); }
    68%, 82% { transform: translate(-7px, -2px); } }
  .ca-tilt { animation: caTi 14s ease-in-out infinite; transform-origin: 400px 380px; }
  @keyframes caTi { 0%, 42%, 100% { transform: rotate(0deg); } 52%, 72% { transform: rotate(-2.2deg); } }
  .ca-antL { animation: caAL 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .ca-antR { animation: caAR 6.5s 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes caAL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
  @keyframes caAR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } }
  .ca-mandL { animation: caML 7s 2s ease-in-out infinite; transform-box: fill-box; transform-origin: top right; }
  .ca-mandR { animation: caMR 7s 2s ease-in-out infinite; transform-box: fill-box; transform-origin: top left; }
  @keyframes caML { 0%, 88%, 100% { transform: rotate(0deg); } 92%, 95% { transform: rotate(7deg); } }
  @keyframes caMR { 0%, 88%, 100% { transform: rotate(0deg); } 92%, 95% { transform: rotate(-7deg); } }
  .ca-iri { animation: caIr 8s ease-in-out infinite; }
  @keyframes caIr { }
  .ca-flow { stroke-dasharray: 26 18; animation: caFw 2.4s linear infinite; }
  @keyframes caFw { to { stroke-dashoffset: -44px; } }
  .ca-fish { animation: caFs 5.2s ease-in-out infinite; }
  .ca-fish2 { animation: caFs 6.4s 1.2s ease-in-out infinite; }
  @keyframes caFs { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-13px) rotate(-5deg); }
    50% { transform: translateY(-5px) rotate(3deg); } 75% { transform: translateY(-15px) rotate(-3deg); } }
  .ca-abzu { animation: caAb 6s ease-in-out infinite; }
  @keyframes caAb { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
  .ca-mote { animation: caMo 6.5s linear infinite; }
  .ca-mote2 { animation: caMo 6.5s 2.1s linear infinite; }
  .ca-mote3 { animation: caMo 6.5s 4.3s linear infinite; }
  @keyframes caMo { 0% { transform: translateY(0); } 100% { transform: translateY(-120px); } }
  .ca-feed { animation: caFd 1.6s linear infinite; }
  @keyframes caFd { to { stroke-dashoffset: -24px; } }
  .ca-claimL { animation: caCl 12s ease-in-out infinite; }
  .ca-claimR { animation: caCl 12s 6s ease-in-out infinite; }
  @keyframes caCl { }
  .ca-ember { animation: caEm 8s linear infinite; }
  .ca-ember2 { animation: caEm 8s 2.7s linear infinite; }
  .ca-ember3 { animation: caEm 8s 5.4s linear infinite; }
  @keyframes caEm { 0% { transform: translateY(0) translateX(0); } 55% { transform: translateY(-90px) translateX(6px); }
    100% { transform: translateY(-170px) translateX(-4px); } }
  .ca-mist { animation: caMi 14s ease-in-out infinite; }
  .ca-mist2 { animation: caMi 18s 4s ease-in-out infinite; }
  @keyframes caMi { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
  .ca-fly { animation: caFy 7s ease-in-out infinite; }
  .ca-fly2 { animation: caFy 9s 2s ease-in-out infinite; }
  .ca-fly3 { animation: caFy 11s 5s ease-in-out infinite; }
  @keyframes caFy { 0%, 100% { transform: translate(0, 0); } 24% { transform: translate(14px, -10px); }
    52% { transform: translate(-10px, 8px); } 78% { transform: translate(8px, 12px); } }
  .ca-spin { animation: caSp 40s linear infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes caSp { to { transform: rotate(360deg); } }
  .ca-crack { stroke-dasharray: 340; stroke-dashoffset: 340; animation: caCk 3s 1s ease-out forwards; }
  @keyframes caCk { to { stroke-dashoffset: 0; } }
  .ca-leak circle { animation: caTw 4.6s ease-in-out infinite; }
  .ca-hover { animation: caHv 7s ease-in-out infinite; }
  @keyframes caHv { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .ca-beam { animation: caBe 5s ease-in-out infinite; }
  @keyframes caBe { }
  .ca-swing { animation: caSw 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .ca-swing2 { animation: caSw 3.1s 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes caSw { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
}


/* ---- choiceecho :: the sealed act, replayed --------------------------------- */
/* THE TIMELINE CONTRACT (owner: "animasyonlar yarıda kesiliyor... bazıları
   tekrar ediyor"). Every one-shot lands its final state by 2.0s — the flow
   holds the card for 2.4s, so nothing is ever cut mid-air. Discrete objects
   (coins, rain, sweeps) play a COUNTED number of passes and settle; the only
   infinite loops are ambient textures (a flowing stream, a shimmering pool),
   which read as continuity rather than repetition. Reduced-motion sees every
   final state at once. */
@media (prefers-reduced-motion: no-preference) {
  .ce-drop { animation: ceDrop .5s .1s cubic-bezier(.6, 0, .8, 1) backwards; }
  @keyframes ceDrop { from { transform: translateY(-140px); } to { transform: translateY(0); } }
  .ce-flash { animation: ceFlash 1.2s .55s ease-out forwards; }
  @keyframes ceFlash { }
  .ce-rise { animation: ceRise .6s .1s ease-out backwards; }
  @keyframes ceRise { from { transform: translateY(26px); } to { transform: translateY(0); } }
  .ce-nova { animation: ceNova 1.2s .4s ease-out forwards; transform-box: fill-box; transform-origin: center; }
  @keyframes ceNova { 0% { transform: scale(.2); } 100% { transform: scale(3.4); } }
  .ce-nova2 { animation: ceNova 1.4s .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
  .ce-plume { animation: cePlume 1.2s .6s ease-out backwards; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes cePlume { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
  .ce-pour { stroke-dasharray: 480; stroke-dashoffset: 480; animation: cePour .6s .2s ease-in forwards; }
  @keyframes cePour { to { stroke-dashoffset: 0; } }
  /* ambient: a stream that keeps flowing IS the settled state */
  .ce-pourflow { stroke-dasharray: 16 12; animation: cePf 1s .8s linear infinite; animation-fill-mode: forwards; }
  @keyframes cePf { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -28px; } }
  .ce-splash { animation: ceSp .55s .85s ease-out 2; }
  @keyframes ceSp { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--dx, 10px), -24px); } }
  .ce-fill { animation: ceFill 1.1s .8s ease-out forwards; }
  @keyframes ceFill { }
  .ce-rain circle { animation: ceRain .75s .35s ease-in 2; }
  .ce-rain2 circle { animation: ceRain .75s .75s ease-in 1; }
  @keyframes ceRain { 0% { transform: translateY(0); } 100% { transform: translateY(150px); } }
  .ce-warm { animation: ceWarm 1s .95s ease-out forwards; }
  @keyframes ceWarm { }
  .ce-hands { animation: ceHands .6s .55s ease-out backwards; }
  @keyframes ceHands { from { transform: translateY(30px); } to { transform: translateY(0); } }
  .ce-lay { animation: ceLay .9s .6s ease-out backwards; }
  @keyframes ceLay { from { transform: translateY(6px); } to { transform: translateY(0); } }
  .ce-st1 { animation: ceRise .4s .1s ease-out backwards; }
  .ce-st2 { animation: ceRise .4s .35s ease-out backwards; }
  .ce-st3 { animation: ceRise .4s .6s ease-out backwards; }
  .ce-st4 { animation: ceRise .4s .85s ease-out backwards; }
  .ce-lines { stroke-dasharray: 140; stroke-dashoffset: 140; animation: ceLine .8s 1.05s ease-out forwards; }
  @keyframes ceLine { to { stroke-dashoffset: 0; } }
  .ce-dust circle { animation: ceDust .62s .7s ease-out 2; }
  @keyframes ceDust { 0% { transform: translateY(0); } 100% { transform: translateY(-40px); } }
  .ce-iris { animation: ceIris .9s .55s ease-out backwards; transform-box: fill-box; transform-origin: center; }
  @keyframes ceIris { from { transform: scale(.1); } to { transform: scale(1); } }
  /* one sweep, then the beam rests where it stopped */
  .ce-scan { animation: ceScan 1.3s .7s ease-in-out forwards; transform-origin: 560px 150px; }
  @keyframes ceScan { 0% { transform: rotate(-14deg); } 100% { transform: rotate(14deg); } }
  .ce-whip { animation: ceWhip .8s .25s cubic-bezier(.6, 0, .6, 1.4) backwards; transform-origin: 280px 60px; }
  @keyframes ceWhip { from { transform: rotate(-38deg); } to { transform: rotate(0deg); } }
  .ce-crack { animation: ceCrack .4s .95s ease-out 2; }
  @keyframes ceCrack { }
  .ce-hand1 { animation: ceH1 .55s .15s ease-out backwards; }
  @keyframes ceH1 { from { transform: translateX(-60px); } to { transform: translateX(0); } }
  .ce-hand2 { animation: ceH2 .55s .15s ease-out backwards; }
  @keyframes ceH2 { from { transform: translateX(60px); } to { transform: translateX(0); } }
  /* three coins, one flight each, staggered — the last lands at ~2.0s */
  .ce-coin { animation: ceCoin 1s .5s ease-in-out forwards; offset-path: path('M-118 -58 Q-10 -150 96 -64'); }
  .ce-coin.c2 { animation-delay: .75s; }
  .ce-coin.c3 { animation-delay: 1s; }
  @keyframes ceCoin { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
  .ce-coindrop circle { animation: ceCd .62s .65s ease-in 2; }
  .ce-coindrop.c2 circle { animation-delay: 1.1s; animation-iteration-count: 1; }
  @keyframes ceCd { 0% { transform: translateY(0); } 100% { transform: translateY(96px); } }
  /* the panel lights come on one by one and STAY on */
  .ce-blip { animation: ceBlip .5s .8s steps(1) forwards; }
  .ce-blip.b2 { animation-delay: 1.1s; }
  .ce-blip.b3 { animation-delay: 1.4s; }
  @keyframes ceBlip { }
  /* ambient: a live data line, like the flowing stream */
  .ce-pulse { animation: cePulse 1.4s .9s linear infinite; }
  @keyframes cePulse { to { stroke-dashoffset: -26px; } }
  .ce-write { stroke-dasharray: 90; stroke-dashoffset: 90; animation: ceLine 1.1s .7s ease-out forwards; }
  .ce-lid { animation: ceLid 1.2s .75s ease-in-out forwards; transform-box: fill-box; transform-origin: center top; transform: scaleY(0); }
  @keyframes ceLid { to { transform: scaleY(.8); } }
  .ce-stampdn { animation: ceStamp .45s .4s cubic-bezier(.7, 0, .9, 1) backwards; }
  @keyframes ceStamp { from { transform: translateY(-90px); } to { transform: translateY(0); } }
  .ce-ring { animation: ceRing 1s .85s ease-out forwards; transform-box: fill-box; transform-origin: center; }
  @keyframes ceRing { 0% { transform: scale(.3); } 100% { transform: scale(2.6); } }
  /* the hit lands ON CAMERA: one 130ms wash of light, then a 400ms shudder */
  .ce-wflash { animation: ceWf .55s .62s ease-out 1; }
  @keyframes ceWf { }
  .ce-shake { animation: ceShk .45s .68s linear 1; }
  @keyframes ceShk { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); }
    40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } }
  /* the sealed act, WRITTEN on the scene — the owner could not read the
     pictures alone ("anlamını çözemedim"), so the frame carries its sentence */
  .ce-cap { animation: ceCap .5s .35s ease-out backwards; }
  @keyframes ceCap { from { transform: translateY(10px); } to { transform: none; } }
  .ce-words > * { animation: ceWord 1.6s .6s ease-out 2; }
  @keyframes ceWord { 0% { transform: translate(0,0); } 100% { transform: translate(60px,-26px); } }
  .ce-actor { animation: ceActor .7s .2s ease-out backwards; }
  @keyframes ceActor { from { transform: translate(-190px, 2px); }
    to { transform: translate(-158px, 2px); } }
  .ce-cost { animation: ceCost .9s 1.15s ease-out forwards; }
  @keyframes ceCost { }
  /* flood: the water table rises once and stays */
  .ce-surge { animation: ceSurge 1.3s .4s ease-out backwards; }
  @keyframes ceSurge { from { transform: translateY(70px); } to { transform: translateY(0); } }
  /* labor: three strokes of the pick, resting raised */
  .ce-pick { animation: cePick .5s .3s ease-in-out 3; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes cePick { 0% { transform: rotate(-30deg); } 55% { transform: rotate(18deg); } 100% { transform: rotate(-30deg); } }
  .ce-spark { animation: ceSpark .4s .55s ease-out 3; }
  .ce-spark.s2 { animation-delay: .8s; animation-iteration-count: 2; }
  @keyframes ceSpark { }
  /* exile: the cast drifts out through the gate and dims */
  .ce-drift { animation: ceDrift 1.05s .45s ease-in forwards; }
  .ce-drift.d2 { animation-delay: .7s; }
  .ce-drift.d3 { animation-delay: .95s; }
  @keyframes ceDrift { to { transform: translate(104px, -20px) scale(.8); } }
  /* fleet: ships cross in and hold formation */
  .ce-sail { animation: ceSail 1.2s .25s ease-out backwards; }
  .ce-sail.f2 { animation-delay: .5s; }
  @keyframes ceSail { from { transform: translateX(-140px); } to { transform: translateX(0); } }
  /* shield: the dome closes over them; two impacts glance off */
  .ce-shield { animation: ceShieldUp .8s .3s ease-out backwards; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes ceShieldUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .ce-ping { animation: cePing .38s 1.2s ease-out 2; }
  .ce-ping.p2 { animation-delay: 1.5s; animation-iteration-count: 1; }
  @keyframes cePing { }
  /* strike: the beam lands once; debris settles and stays down */
  .ce-beam { animation: ceBeam .45s .5s ease-in backwards; transform-box: fill-box; transform-origin: top center; }
  @keyframes ceBeam { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .ce-frag path { animation: ceFrag .8s .9s ease-out forwards; }
  @keyframes ceFrag { to { transform: translate(var(--fx, 20px), 34px) rotate(40deg); } }
  /* submit: the cast bows once and holds the bow */
  .ce-bow { animation: ceBow 1s .5s ease-out forwards; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes ceBow { to { transform: rotate(4deg) translateY(6px); } }
  /* deceive: the written lines flicker and settle on the OTHER set */
  .ce-truth { animation: ceTruth 1.2s .7s steps(2) forwards; }
  @keyframes ceTruth { }
  .ce-lie { animation: ceLie 1.2s .7s steps(2) forwards; }
  @keyframes ceLie { }
  .ce-sealdot { animation: ceSeal .5s 1.3s ease-out forwards; }
  @keyframes ceSeal { }
  /* the subject FAILS: it tilts, it stays down — the act had a target */
  .ce-topple { animation: ceTopple 1.1s .75s cubic-bezier(.5,0,.7,1) forwards;
    transform-box: fill-box; transform-origin: bottom center; }
  @keyframes ceTopple { 0% { transform: rotate(0deg); } 40% { transform: rotate(-3deg); }
    100% { transform: rotate(9deg) translateY(6px); } }
  /* the subject SCORCHES: colour drains toward ash and stays there */
  .ce-scorch { animation: ceScorch 1.4s .5s ease-out forwards; }
  @keyframes ceScorch { to { filter: brightness(.45) saturate(.4); } }
  /* scaffolding rises around what is being built */
  .ce-scaff { stroke-dasharray: 200; stroke-dashoffset: 200; animation: ceLine 1s .5s ease-out forwards; }
  .ce-shadow { animation: ceShadow 1s .9s ease-out forwards; }
  @keyframes ceShadow { }
}
/* reduced-motion: forwards states must not stay invisible */
@media (prefers-reduced-motion: reduce) {
  .ce-cost { opacity: .5; }
  .ce-lie { opacity: 1; }
  .ce-truth { opacity: 0; }
  .ce-shadow { opacity: .55; }
  .ce-topple { transform: rotate(9deg) translateY(6px); }
  .ce-scorch { filter: brightness(.45) saturate(.4); }
  .ce-sealdot { opacity: 1; }
  .ce-flash { opacity: .05; }
  .ce-warm { opacity: .14; }
  .ce-fill { opacity: .35; }
  .ce-blip { opacity: 1; }
}

/* ---- the drawn aftermath (was a looping clip) ------------------------------ */
.rv-after .cf { display:block; width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: no-preference) {
  .cf-row { animation: cfRow .5s ease-out backwards; }
  @keyframes cfRow { from { transform: translateY(10px); } to { transform:none; } }
  .cf-glow { animation: cfGlow 1.2s .5s ease-out forwards; }
  @keyframes cfGlow { }
}
@media (prefers-reduced-motion: reduce) { .cf-glow { opacity:.16; } }


/* ---- the sealed card locks (owner: "ikincisine de tıklanabiliyor") --------- */
#dc-options.locked .dc-opt { pointer-events: none; }
#dc-options.locked .dc-opt:not(.sealed) { animation: none; opacity: .18; filter: saturate(.4);
  transition: opacity .5s ease; }

/* ---- the decree report, softened + shown once ------------------------------ */
.rv-box.rv-file { border: 1px solid rgba(var(--gold-rgb),.5); border-radius: 12px;
  background: linear-gradient(#171208, #0d0a06); }
.rv-file .rv-title { color: var(--acc-lit); }
.rv-once { margin: 8px 0 2px; padding: 7px 10px; border: 1px dashed rgba(var(--gold-rgb),.5);
  border-radius: 8px; font-size: 11px; letter-spacing: .06em; color: var(--w-warm); }

/* ---- the palace sheet ------------------------------------------------------ */
#palace-sheet { position: fixed; inset: 0; z-index: 540; background: rgba(0,0,0,.66);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
#palace-sheet.hidden { display: none; }
.pal-box { width: min(96vw, 560px); max-height: 92vh; overflow: auto;
  background: linear-gradient(#171208, #0c0906); border: 1px solid rgba(var(--gold-rgb),.55);
  border-radius: 14px; padding: 0 0 12px; }
.pl-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(var(--gold-rgb),.3); }
.pal-head b { color: var(--acc-lit); letter-spacing: .18em; font-size: 12px; }
.pal-head button { background: none; border: 1px solid rgba(var(--gold-rgb),.4); color: var(--w-gold);
  border-radius: 6px; min-width: 34px; min-height: 30px; cursor: pointer; }
.pal-hall { display: block; width: 100%; height: auto; border-bottom: 1px solid rgba(var(--gold-rgb),.25); }
.pal-purse { display: flex; gap: 14px; padding: 8px 14px; font-size: 12px; color: #cfc6b8;
  border-bottom: 1px solid rgba(var(--gold-rgb),.2); }
.pal-purse b { color: var(--acc-lit); }
.pal-purse .bad b { color: #c76b45; }
.pal-tabs { display: flex; gap: 8px; padding: 10px 14px 2px; }
.pal-tab { flex: 1; background: #0d0a06; border: 1px solid rgba(var(--gold-rgb),.35); color: var(--w-clay);
  padding: 8px; border-radius: 8px; letter-spacing: .12em; font-size: 11px; cursor: pointer; }
.pal-tab.on { color: var(--acc-lit); border-color: rgba(var(--gold-rgb),.7); background: #241708; }
.pal-pane { padding: 10px 14px 0; }
.pal-pane.hidden { display: none; }


/* the hidden line: a handset */
.ph-shell { background: linear-gradient(#241f16, #14100a); border: 1px solid rgba(var(--gold-rgb),.45);
  border-radius: 16px; padding: 10px 12px 8px; }
.ph-top { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.ph-top b { color: var(--acc-lit); font-size: 11px; letter-spacing: .16em; }
.ph-top i { color: #8d8375; font-size: 11px; font-style: normal; margin-left: auto; }
.ph-ant { width: 3px; height: 16px; background: #6b6152; border-radius: 2px; }
.ph-led { width: 7px; height: 7px; border-radius: 50%; background: #59c2b4;
  box-shadow: 0 0 7px #59c2b4; }
.ph-screen { background: #0a0f0c; border: 1px solid #223028; border-radius: 8px;
  padding: 8px; max-height: 44vh; overflow: auto; }
.ph-quiet { color: #6b8a7a; font-size: 11px; line-height: 1.6; padding: 6px 2px; }
.ph-row { border: 1px solid rgba(141,131,117,.25); border-left: 3px solid var(--race, #8d8375);
  border-radius: 7px; padding: 7px 8px; margin-bottom: 7px; background: rgba(0,0,0,.25); }
.ph-id { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #e8dcc0; }
.ph-id i { color: #8d8375; font-style: normal; font-size: 11px; margin-left: auto; }
.ph-sig svg { width: 18px; height: 18px; vertical-align: -4px; }
.ph-bar { height: 4px; background: #1a1712; border-radius: 3px; margin: 6px 0; overflow: hidden; }
.ph-bar i { display: block; height: 100%; background: var(--race, var(--w-gold)); opacity: .8; }
.ph-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-btn { background: #10140f; border: 1px solid rgba(89,194,180,.35); color: #9fd8c8;
  font-size: 11px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.ph-btn:disabled { opacity: .4; cursor: default; }
.ph-btn span { color: var(--w-warm); margin-left: 5px; }
.ph-grill { display: flex; gap: 4px; justify-content: center; padding-top: 8px; }
.ph-grill s { width: 22px; height: 3px; background: #3a2f22; border-radius: 2px; }

/* topbar palace button inherits .h-btn; the svg needs a size */
#hdr-palace svg { width: 17px; height: 17px; display: block; margin: 0 auto; }


/* ---- family buttons :: one hand for every control -------------------------- */
/* Late in the sheet on purpose: this layer wins the cascade and pulls the
   whole console onto the card family's tokens — etched amber on dark clay. */
.gm-box button, .h-btn, .rt-btn, .dp-btn, .ph-btn, .sr-t, .pal-tab,
#deny-ok, .rv-go, .pg-skip, .fx-rite, .pc-tally, #pal-close,
.ec-list button, #ec-close, .sh-btns button {
  background: linear-gradient(#181207, #100b06);
  border: 1px solid rgba(var(--gold-rgb), .38);
  color: var(--w-sand);
  border-radius: 9px;
  letter-spacing: .07em;
  transition: border-color .15s, box-shadow .15s, transform .06s;
}
.gm-box button:hover, .h-btn:hover, .rt-btn:hover, .dp-btn:hover, .ph-btn:hover,
.sr-t:hover:not(:disabled), .pal-tab:hover, #deny-ok:hover, .fx-rite:hover {
  border-color: rgba(var(--lit-rgb), .8);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), .18), inset 0 0 14px rgba(var(--gold-rgb), .06);
  color: #efe0c8;
}/* press handled by MÜHÜR */

.gm-box button:disabled, .sr-t:disabled, .ph-btn:disabled, .dp-btn:disabled, .fx-rite:disabled {
  opacity: .45; filter: saturate(.5);
}
.dp-btn.bad, .gm-box button.bad { border-color: rgba(199, 107, 69, .55); color: #d9a48c; }
.pal-tab.on { background: #241708; }
/* the primary verbs keep their weight */
.dc-opt, .rv-go { border-width: 1px; }


/* ---- palace pane cards (rebuilt) ------------------------------------------- */
.pal-sec { font-size: 11px; letter-spacing: .14em; color: #8d8375; margin: 10px 2px 7px; }
.pal-card { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: linear-gradient(#181207, #100b06); border: 1px solid rgba(var(--gold-rgb),.35);
  border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; color: var(--w-sand); }
.pal-card.own { border-color: rgba(var(--lit-rgb),.75);
  box-shadow: inset 0 0 18px rgba(var(--gold-rgb),.09); }
.pal-ic { flex: 0 0 30px; color: var(--w-gold); }
.pal-ic svg { width: 30px; height: 30px; display: block; }
.pal-tx { flex: 1; min-width: 0; }
.pal-tx b { display: block; font-size: 12px; letter-spacing: .1em; color: var(--acc-lit); }
.pal-tx i { display: block; font-style: normal; font-size: 11px; color: var(--w-stone); line-height: 1.45; margin-top: 2px; }
.pal-own { font-size: 11px; letter-spacing: .1em; color: #8ce8b4; white-space: nowrap; }
.pal-buy { flex: 0 0 auto; background: #241708; border: 1px solid rgba(var(--lit-rgb),.6);
  color: #f4d98c; border-radius: 9px; padding: 7px 12px; font-size: 12px; cursor: pointer;
  text-align: center; }
.pal-buy i { display: block; font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--w-clay); }
.pal-buy:disabled { opacity: .45; cursor: default; }
.pal-card.ledger { cursor: pointer; }
.pal-card.ledger.on { border-color: rgba(199,107,69,.7); box-shadow: inset 0 0 18px rgba(199,107,69,.12); }
.pal-card.ledger.on .pal-ic, .pal-card.ledger.on .pal-tx b { color: #d98a6a; }
.pal-switch { flex: 0 0 40px; height: 20px; border: 1px solid rgba(var(--gold-rgb),.5);
  border-radius: 12px; position: relative; }
.pal-switch s { position: absolute; top: 2px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #6b6152; transition: left .15s, background .15s; }
.pal-card.ledger.on .pal-switch s { left: 21px; background: #c76b45; }
.pal-edims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pal-edim { display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(#181207, #100b06); border: 1px solid rgba(var(--gold-rgb),.35);
  border-radius: 11px; padding: 10px 6px; color: var(--w-sand); cursor: pointer; }
.pal-edim b { font-size: 11px; letter-spacing: .08em; color: var(--acc-lit); text-align: center; }
.pal-edim i { font-style: normal; font-size: 11px; color: var(--w-stone); text-align: center; line-height: 1.35; }
.pal-cost { font-size: 11px; color: var(--w-warm); margin-top: 2px; }
.pal-edim:disabled { opacity: .45; cursor: default; }
.pal-chip { background: #14100a; border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 8px;
  padding: 4px 10px; font-size: 11.5px; }
@media (max-width: 430px) { .pal-edims { grid-template-columns: 1fr; } }


/* ---- prose voice ------------------------------------------------------------ */
/* The owner asked the type to be fixed game-wide: SENTENCES read in Plex Sans
   (the --read face), labels and verbs stay in the console mono. */
#dc-text, .rv-once, .pal-tx i, .ph-quiet, .pal-edim i, .dp-terms, .pc-cap,
#ov-story p, .pg-cap, .rt-b, .deny-p, .af-p, .fx-p {
  font-family: var(--read); letter-spacing: .01em; line-height: 1.6;
}
#dc-text { font-size: 14.5px; }

/* ---- topbar doors: one optical size ---------------------------------------- */
.vt-door svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
#hdr-palace svg { width: 19px; height: 19px; }

/* ---- palace head: the ✕ sits where a thumb expects it ---------------------- */
.pal-head { position: sticky; top: 0; z-index: 2; background: #171208; border-radius: 14px 14px 0 0; }
.pal-head b { flex: 1; min-width: 0; }
#pal-close { flex: 0 0 38px; min-height: 34px; font-size: 15px; }

/* ---- the commander tab ------------------------------------------------------ */
.pal-reply { margin: 0 0 9px; padding: 8px 11px; border: 1px dashed rgba(89,194,180,.5);
  border-radius: 9px; background: rgba(10,20,16,.6); color: #9fd8c8;
  font-family: var(--read); font-size: 12px; line-height: 1.5; }
.pal-avas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.pal-avac { display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(#181207, #100b06); border: 1px solid rgba(var(--gold-rgb),.35);
  border-radius: 11px; padding: 8px 4px; cursor: pointer; color: var(--w-sand); }
.pal-avac.sel { border-color: rgba(var(--lit-rgb),.85); box-shadow: inset 0 0 16px rgba(var(--gold-rgb),.12); }
.pal-avac b { font-size: 11px; letter-spacing: .12em; color: var(--acc-lit); }
.pal-avac i { font-style: normal; font-size: 11px; color: var(--w-stone); text-align: center; line-height: 1.3; font-family: var(--read); }
.ca-ava { width: 100%; height: auto; border-radius: 8px; display: block; }
.pal-head .ca-ava { width: 30px; height: 33px; border-radius: 6px; }
.pal-headava { flex: 0 0 30px; margin-right: 9px; }
.pal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pal-stat { background: #14100a; border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 9px;
  padding: 8px 10px; }
.pal-stat i { display: block; font-style: normal; font-size: 11px; letter-spacing: .12em; color: #8d8375; }
.pal-stat b { font-size: 15px; color: var(--acc-lit); }
.pal-unvan { text-align: center; margin: 4px 0 10px; }
.pal-unvan b { font-size: 14px; letter-spacing: .22em; color: var(--acc-lit); }
.pal-unvan i { display: block; font-style: normal; font-size: 11px; color: var(--w-stone); font-family: var(--read); margin-top: 3px; }
@media (max-width: 430px) { .pal-avas { grid-template-columns: repeat(2, 1fr); } }


/* ---- title doors: rounded, like everything else ----------------------------- */
.overlay .ov-doors > #ov-resume, .overlay .ov-doors > #ov-reseed,
.overlay .ov-doors > #ov-reset { border-radius: 16px; }

/* ---- console marks: brighter shells, one optical size, traffic colours ------ */
.vt .vt-ic { opacity: 1; }
.vt .vt-ic > svg { width: 23px; height: 23px; opacity: .34; }
.vt .vt-fill svg { width: 23px; height: 23px; opacity: 1; }
.vt.gd .vt-fill { color: #8ce8b4; }
.vt.wr .vt-fill { color: #d98a4a; }
.vt.bd .vt-fill { color: #e64f2e; }
.vt.gd { --line: #8ce8b4; }
.vt.wr { --line: #d98a4a; }
.vt.bd { --line: #e64f2e; }

/* ---- the gear on the card (top-left, mirror of the ?) ----------------------- */
#dc-gear { position: absolute; top: 8px; left: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--t-edge); background: rgba(var(--t-rgb), .06);
  color: var(--t-mid); display: grid; place-items: center; padding: 0; }
#dc-gear svg { width: 17px; height: 17px; }
#dc-gear::after { content: ''; position: absolute; inset: -8px; }/* press handled by MÜHÜR */


/* ---- palace legends + phone effect line ------------------------------------- */
.pal-legend { font-family: var(--read); font-size: 11px; line-height: 1.55;
  color: var(--w-stone); margin: -2px 2px 9px; }
.pal-fx { display: block; margin-top: 5px; color: var(--w-warm); font-size: 11px; }

/* ---- galaxy sheet ------------------------------------------------------------ */
#galaxy-sheet { position: fixed; inset: 0; z-index: 540; background: rgba(0,0,0,.66);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
#galaxy-sheet.hidden { display: none; }
.gal-box { width: min(96vw, 560px); max-height: 92vh; overflow: auto;
  background: linear-gradient(#12101c, #0a0910); border: 1px solid rgba(138,135,176,.55);
  border-radius: 14px; padding: 0 0 12px; }
.gal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(138,135,176,.3);
  position: sticky; top: 0; background: #12101c; border-radius: 14px 14px 0 0; z-index: 2; }
.gal-head b { color: #b8b6d8; letter-spacing: .18em; font-size: 12px; flex: 1; }
#gal-close { flex: 0 0 38px; min-height: 34px; background: none; font-size: 15px;
  border: 1px solid rgba(138,135,176,.4); color: #b8b6d8; border-radius: 9px; cursor: pointer; }
.gal-map { display: block; width: 100%; height: auto; }
.gal-w { cursor: pointer; }
#gal-note { padding: 10px 14px 0; }
.gal-info { border: 1px solid rgba(138,135,176,.35); border-radius: 10px;
  padding: 9px 12px; background: rgba(0,0,0,.3); }
.gal-info b { display: block; font-size: 11.5px; letter-spacing: .12em; color: #d8d6f0; }
.gal-info i { display: block; font-style: normal; font-family: var(--read);
  font-size: 11.5px; color: #a8a6c4; line-height: 1.55; margin-top: 4px; }
.gal-info.active b { color: #8ce8d4; }
.gal-info.locked b { color: #8d8375; }
.gal-foot { font-family: var(--read); font-size: 11px; color: #767490;
  margin: 8px 2px 0; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .gal-ring { animation: galPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes galPulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .2; } }
}


/* ---- the marks read by COLOUR, not by liquid fill --------------------------- */
/* The owner's rule, applied where it can actually be SEEN: the whole glyph is
   painted the band colour at full brightness; the old height-clipped fill (a
   green sliver that vanished exactly when the reading mattered) is retired.
   The 2px underline still carries the percentage. */
/* EQUALIZE UP, NOT DOWN. The first pass shrank the four marks to the doors'
   26px and the glyphs floated off-centre inside their 33px housings — off the
   rule, off the grid. The housing is 33px (index.html), so the glyph is 33px
   and the DOORS grow to meet it. */
#cmd-vitals .vt .vt-ic > svg { width: 33px !important; height: 33px !important; display: block; margin: 0 auto; opacity: .95; fill: var(--w-clay); }
#cmd-vitals .vt .vt-fill { display: none; }
#cmd-vitals .vt.gd .vt-ic > svg { fill: #7fe0a8; }
#cmd-vitals .vt.wr .vt-ic > svg { fill: #e0954e; }
#cmd-vitals .vt.bd .vt-ic > svg { fill: #e6552e; }
/* the legacy dimmers must not re-darken a coloured mark */
#cmd-vitals .vt.low .vt-ic > svg,
#cmd-vitals .vt.thin .vt-ic > svg,
#cmd-vitals .vt.crit .vt-ic > svg { opacity: .95; }
/* one optical size for EVERYTHING on the strip, doors included */
#cmd-vitals .vt-door svg, .vt-doors .vt-door svg { width: 33px !important; height: 33px !important; display: block; margin: 0 auto; }
body.mapless #cmd-vitals .vt-door { width: 38px; height: 38px; opacity: .8; }
/* the 2px reading-bar under each mark wears the SAME band colour as the icon */
body.mapless #cmd-vitals .vt.gd::before { background: #7fe0a8 !important; box-shadow: 0 0 8px rgba(127,224,168,.7) !important; }
body.mapless #cmd-vitals .vt.wr::before { background: #e0954e !important; box-shadow: 0 0 8px rgba(224,149,78,.7) !important; }
body.mapless #cmd-vitals .vt.bd::before { background: #e6552e !important; box-shadow: 0 0 8px rgba(230,85,46,.75) !important; }
/* THE EMPTY TRACK WEARS THE BAND TOO. At a reading of 0-5% the filled part of
   the rule is zero pixels wide, so the only thing under the icon was the dim
   red-gold track — a green icon over a red line ("sence ikonun altındaki bar
   ikonla aynı renk mi?"). The track is the same hue at a quarter strength, so
   icon and rule agree at EVERY value, including empty. */
body.mapless #cmd-vitals .vt.gd::after { background: rgba(127,224,168,.26) !important; }
body.mapless #cmd-vitals .vt.wr::after { background: rgba(224,149,78,.26) !important; }
body.mapless #cmd-vitals .vt.bd::after { background: rgba(230,85,46,.30) !important; }
#cmd-vitals .vt-clock { align-self: center; }
/* the treasury sheet: four currencies, each owning up to its plumbing */
#vhelp .tz { text-align: left; margin: 10px 0 0; padding: 9px 11px;
  border: 1px solid rgba(var(--gold-rgb),.28); border-radius: 10px; }
#vhelp .tz b { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px;
  letter-spacing: .08em; color: var(--acc-lit); margin: 0 0 5px; }
#vhelp .tz b em { margin-left: auto; font-style: normal; font-size: 14px; color: #fff2cf; }
#vhelp .tz i { display: block; font-style: normal; font-size: 11px; line-height: 1.45;
  color: var(--ink-dim, #b0a689); font-family: var(--read, inherit); }
#vhelp .tz .tz-n { color: #d98a4a; margin-top: 3px; }
/* four spendables, 2x2 — a wallet, not a calendar */
body.mapless #cmd-vitals .vt-clock { grid-template-columns: auto auto; gap: 3px 12px; }
body.mapless #cmd-vitals .vt-clock .vc { gap: 6px; }

/* ---- NIBIRU (owner, 2026-08-20): the homeworld skin -------------------------- */
/* Travel is real: on Nibiru the strip trades its gold for the homeworld's rust,
   so one glance at the console says which sky the commander is under. */
body.nibiru.mapless #cmd-vitals { background: #0c0505; border-bottom-color: rgba(199,107,69,.5); }
body.nibiru.mapless #cmd-vitals .vt-clock { color: #e0a05e; }
body.nibiru.mapless #cmd-vitals .vt::after { background: rgba(199,107,69,.26); }
body.nibiru.mapless #cmd-vitals .vt-door { color: #c76b45; opacity: .85; }
body.nibiru.mapless #cmd-vitals .vt .vt-ic > svg { fill: #c98d5e; }

/* ---- the MAKAM chamber (makam.js, mk-*) -------------------------------------- */
#makam-sheet { position: fixed; inset: 0; z-index: 540; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
#makam-sheet.hidden { display: none; }
.mk-box { width: min(96vw, 560px); max-height: 92vh; overflow: auto;
  background: linear-gradient(#1c0d07, #0b0504); border: 1px solid rgba(199,107,69,.6);
  border-radius: 14px; padding: 0 0 12px; }
.mk-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(199,107,69,.35);
  position: sticky; top: 0; z-index: 2; background: #1c0d07; border-radius: 14px 14px 0 0; }
.mk-head b { color: #e8965e; letter-spacing: .18em; font-size: 12px; }
.mk-head button { background: none; border: 1px solid rgba(199,107,69,.45); color: #c76b45;
  border-radius: 6px; min-width: 34px; min-height: 30px; cursor: pointer; }
.mk-hall { display: block; width: 100%; height: auto; border-bottom: 1px solid rgba(199,107,69,.3); }
.mk-box .pal-purse { border-bottom-color: rgba(199,107,69,.25); }
.mk-box .pal-chip { border-color: rgba(199,107,69,.4); color: #e0a05e; }
.mk-box .pal-sec { color: #c98d5e; }
.mk-tabs { display: flex; gap: 8px; padding: 10px 14px 2px; }
.mk-tab { flex: 1; background: #0d0605; border: 1px solid rgba(199,107,69,.4); color: #b07a5e;
  padding: 8px; border-radius: 8px; letter-spacing: .12em; font-size: 11px; cursor: pointer; }
.mk-tab.on { color: #e8965e; border-color: rgba(199,107,69,.75); background: #2a130a; }
.mk-pane { padding: 10px 14px 0; }
.mk-pane.hidden { display: none; }
.mk-lord { border: 1px solid rgba(199,107,69,.35); border-radius: 10px; padding: 9px 11px; margin: 8px 0; }
.mk-lord.owned { border-color: rgba(232,150,94,.7); background: rgba(199,107,69,.08); }
.mk-lord b { display: block; color: #e8b48a; font-size: 12px; letter-spacing: .1em; margin: 0 0 4px; }
.mk-lord i { display: block; font-style: normal; font-size: 11px; line-height: 1.45;
  color: #b09a86; font-family: var(--read, inherit); }
.mk-lord .mk-perk { color: #c98d5e; margin-top: 2px; }
.mk-buy { margin-top: 7px; background: #2a130a; border: 1px solid rgba(199,107,69,.55); color: #e8965e;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; letter-spacing: .08em; }
.mk-buy i { font-style: normal; margin-left: 8px; color: #b07a5e; }
.mk-buy:disabled { opacity: .45; cursor: default; }
.mk-tag { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--acc-lit);
  border: 1px dashed rgba(var(--lit-rgb),.4); border-radius: 7px; padding: 3px 8px; }
.mk-req { display: flex; justify-content: space-between; padding: 7px 10px; margin: 6px 0;
  border: 1px solid rgba(199,107,69,.3); border-radius: 8px; font-size: 11.5px; color: #b09a86; }
.mk-req.ok { border-color: rgba(127,224,168,.5); color: #9fe0b8; }
.mk-req b { color: inherit; }
#mk-walk { width: 100%; margin: 10px 0 4px; padding: 12px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#3a1a0c, #24100a); border: 1px solid #e8965e; color: var(--w-glow);
  letter-spacing: .14em; font-size: 12.5px; }
#mk-walk:disabled { opacity: .5; border-color: rgba(199,107,69,.4); color: #b07a5e; cursor: default; }
.mk-done { margin: 10px 0 4px; padding: 12px; border: 1px solid var(--w-glow); border-radius: 10px;
  color: var(--w-glow); font-size: 12px; letter-spacing: .08em; text-align: center; }
.gal-go { display: block; width: 100%; margin: 8px 0 0; padding: 11px; border-radius: 10px;
  background: linear-gradient(#2a130a, #180a06); border: 1px solid #c76b45; color: #e8965e;
  letter-spacing: .12em; font-size: 12px; cursor: pointer; }/* press handled by MÜHÜR */


/* ---- iPHONE SIRASI (owner, 2026-08-20): the strip must survive 430px -------- */
/* Measured on 430x932 with real-run figures: the plaque grew to 184px and the
   doors ended at x=442. One variable (--ci) sizes all six glyphs so they
   shrink TOGETHER (the equal-size law holds), the plaque keeps the width its
   four figures need, and the strip pays out of its own gaps.
   EVERYTHING !important: sim.css loads BEFORE index.html's inline sheet, so a
   tie on specificity is a silent loss — measured twice before this note. */
@media (max-width: 520px) {
  body.mapless #cmd-vitals { --ci: clamp(24px, 7.8vw, 33px);
    gap: 5px !important;
    padding: 8px max(6px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)) !important; }
  body.mapless #cmd-vitals .vt .vt-ic { width: var(--ci) !important; height: var(--ci) !important; }
  #cmd-vitals .vt .vt-ic > svg { width: var(--ci) !important; height: var(--ci) !important; }
  #cmd-vitals .vt-door svg, .vt-doors .vt-door svg {
    width: var(--ci) !important; height: var(--ci) !important; }
  body.mapless #cmd-vitals .vt-door { width: calc(var(--ci) + 5px) !important; height: calc(var(--ci) + 5px) !important;
    display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }
  body.mapless #cmd-vitals .vt-doors { gap: 6px !important; }
  body.mapless #cmd-vitals .vt-clock { grid-template-columns: auto auto !important;
    gap: 1px 4px !important; padding: 0 !important; flex: 0 0 auto !important; }
  body.mapless #cmd-vitals .vt-clock .vc { gap: 3px !important; justify-content: space-between; }
  /* SYMBOLS ONLY on a phone (owner): the words come off, the treasury sheet
     already teaches what each glyph means. Symbol reads at 12px, value at 13. */
  body.mapless #cmd-vitals .vt-clock .vc i { font-size: 12px !important; letter-spacing: 0 !important; white-space: nowrap; opacity: .8; }
  body.mapless #cmd-vitals .vt-clock .vc b { font-size: 13px !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* ---- the media card joins the family (owner: 'eski dizayndan kalan el
   işaretli bildirim') ---------------------------------------------------------
   The era-media conceit (cave wall, whisper, headline) kept its own six skins
   while the rest of the game moved to one gold-on-black chrome — so the toast
   read as a leftover. The era TAG text stays (it is the flavor); the paint is
   now the family's. !important because index.html's inline sheet loads after
   this file and would otherwise win every tie. */
#mediacard, #mediacard[class] {
  background: linear-gradient(#171208, #0d0a06) !important;
  border: 1px solid rgba(var(--gold-rgb),.55) !important;
  border-radius: 12px !important;
  color: #e0d6c2 !important;
  font-family: var(--font) !important;
  font-style: normal !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.65) !important;
}
#mediacard.show { animation: none !important; filter: none !important; }
#mediacard::after, #mediacard::before { display: none !important; }
#mediacard b { color: var(--acc-lit) !important; font-family: var(--font) !important; }
#mediacard b::before, #mediacard b::after { content: none !important; }
#mediacard .mc-tag { color: var(--w-clay) !important; }
#mediacard small { color: #cfc6b8 !important; font-family: var(--read, inherit) !important; }

/* ---- drawn coin marks on the plaque (owner: 'para ikonu koy') ---------------
   THE MARK HAS TO BE A MARK AT 18 PIXELS. The first cut drew each coin in the
   MIDDLE of a 24-unit box, so a third of every glyph was empty air and the
   thing rendered as a smudge on a phone — reported three times, and each time
   I checked delivery instead of the drawing. The shapes touch the walls of
   their box now, and the size goes up with them. */
@media (max-width: 520px) {
}

/* ---- the odds badge: a real element, never a pseudo ------------------------
   It shared ::before with the 'STANDING SHORT' warning, so on an unaffordable
   option the two texts printed on top of each other. Its own node now. */
.dc-odds { position: absolute; right: 10px; top: 5px; z-index: 2;
  font-family: var(--font); font-size: 11px; letter-spacing: .1em;
  font-style: normal; pointer-events: none; white-space: nowrap; opacity: .9; }
.dc-odds.hi { color: #7fe0a8; }
.dc-odds.ok { color: var(--w-warm); }
.dc-odds.lo { color: #e0954e; }
.dc-odds.bad { color: #e6552e; }
.dc-opt.armed .dc-odds { opacity: 1; }
/* an unaffordable option prints its reason as a block — keep the badge clear
   of it by pinning the warning below the label rather than behind the badge */
.dc-opt.short .dc-odds { top: 4px; font-size: 11px; }

/* ---- AND THE VERDICT LANDS ON THE PLATE ------------------------------------
   The seal was gold whatever fortune said, so the one moment the roll is
   visible said nothing. Green: the decree took. Red: it backfired. */
.dc-opt.sealed-ok { border-color: #7fe0a8 !important;
  animation: optSealOk .5s cubic-bezier(.2,.9,.3,1) backwards !important; }
@keyframes optSealOk {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(127,224,168,.6); }
  24% { transform: scale(.96); box-shadow: 0 0 0 11px rgba(127,224,168,.30);
        background: rgba(127,224,168,.20); }
  100% { transform: scale(1); box-shadow: 0 0 0 24px rgba(127,224,168,0); }
}
.dc-opt.sealed-fail { border-color: #e6552e !important;
  animation: optSealFail .5s cubic-bezier(.3,.8,.4,1) backwards !important; }
@keyframes optSealFail {
  0% { transform: scale(1) translateX(0); box-shadow: 0 0 0 0 rgba(230,85,46,.6); }
  18% { transform: scale(.97) translateX(-4px); background: rgba(230,85,46,.22); }
  34% { transform: scale(.97) translateX(4px); }
  50% { transform: scale(.98) translateX(-2px); box-shadow: 0 0 0 12px rgba(230,85,46,.28); }
  100% { transform: scale(1) translateX(0); box-shadow: 0 0 0 24px rgba(230,85,46,0); }
}
.dc-opt.sealed-ok .dc-odds { color: #7fe0a8 !important; opacity: 1 !important; }
.dc-opt.sealed-fail .dc-odds { color: #e6552e !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .dc-opt.sealed-ok, .dc-opt.sealed-fail { animation: none !important; }
}

/* ---- the docking (nibiruArrival) -------------------------------------------- */
#nb-arrive { position: fixed; inset: 0; z-index: 720; background: #050308;
  cursor: pointer; opacity: 1; transition: opacity .45s ease; }
#nb-arrive.out { opacity: 0; }
#nb-arrive svg { width: 100%; height: 100%; display: block; }
#nb-arrive .nba-stars { animation: nbaStars 2.4s linear both; }
@keyframes nbaStars { from { transform: translateY(-90px); } to { transform: translateY(60px); } }
#nb-arrive .nba-world { transform-origin: 215px 330px; animation: nbaGrow 2.2s cubic-bezier(.2,.7,.3,1) both; }
@keyframes nbaGrow { from { transform: scale(.22); } 30% { opacity: 1; } to { transform: scale(1); } }
#nb-arrive .nba-ring { transform-origin: 215px 330px; animation: nbaRing 2.2s ease-out both; }
@keyframes nbaRing { from { transform: rotate(-40deg) scale(.6); }
  60% { opacity: .5; } to { transform: rotate(0) scale(1); } }
#nb-arrive .nba-t1, #nb-arrive .nba-t2 { opacity: 0; animation: nbaText .5s ease-out forwards; }
#nb-arrive .nba-t1 { animation-delay: 1.15s; }
#nb-arrive .nba-t2 { animation-delay: 1.5s; }
@keyframes nbaText { from { transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #nb-arrive .nba-stars, #nb-arrive .nba-world, #nb-arrive .nba-ring { animation: none; }
  #nb-arrive .nba-t1, #nb-arrive .nba-t2 { animation: none; opacity: 1; }
}
/* ---- THE BRACKETS COME OFF (owner: 'bunların yeri doğru mu sence') ----------
   The [ ] were drawn for a one-line READOUT (YIL 17 · CAN 1.4K). The plaque is
   a four-currency WALLET on two rows now, and a 13px bracket cannot straddle a
   two-row block — it hung in the middle of nothing while eating 24px of a
   430px strip. Off, and the room goes back into the wallet's own breathing. */
body.mapless #cmd-vitals .vt-clock::before,
body.mapless #cmd-vitals .vt-clock::after { content: none !important; }
body.mapless #cmd-vitals .vt-clock { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 520px) {
  body.mapless #cmd-vitals .vt-clock { gap: 2px 7px !important; }
  body.mapless #cmd-vitals .vt-clock .vc { gap: 5px !important; }
}

/* ---- THE CARD'S FOUR CORNERS (owner, 2026-08-20) ----------------------------
   His layout, exactly: what you can SPEND top-left, settings top-right, the
   "?" bottom-right. The strip's plaque is gone with them — a wallet belongs on
   the card you spend it on. !important throughout: index.html's inline sheet
   loads after this file and owns the old positions. */
#dc-purse { position: absolute; top: 8px; left: 10px; z-index: 4;
  display: flex; gap: 9px; align-items: center; cursor: pointer;
  padding: 5px 9px; border-radius: 11px;
  border: 1px solid rgba(var(--gold-rgb),.4); background: rgba(8,6,4,.62);
  backdrop-filter: blur(2px); color: var(--acc-lit); font-family: var(--font); }
#dc-purse .cp-u { display: inline-flex; align-items: center; gap: 3px; }
#dc-purse .cp-u svg { width: 16px; height: 16px; display: block; }
#dc-purse .cp-u b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: #f0dfa8; }/* press handled by MÜHÜR */

#dc-gear { top: 8px !important; left: auto !important; right: 10px !important; }
#dc-why  { top: auto !important; bottom: 10px !important; right: 10px !important; }
@media (max-width: 520px) {
  #dc-purse { gap: 7px; padding: 4px 8px; }
  #dc-purse .cp-u svg { width: 15px; height: 15px; }
  #dc-purse .cp-u b { font-size: 12px; }
}
/* the paid moves, in the sheet they moved into */
#vhelp #sp-acts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
#vhelp #sp-acts .dc-bribe { width: 100%; }
#vhelp .sp-none { font-size: 11.5px; color: var(--ink-dim); font-family: var(--read, inherit);
  padding: 8px 2px; }

/* ---- the recall (five cards at court, then home) ---------------------------- */
#nb-recall { position: fixed; inset: 0; z-index: 700; background: rgba(5,3,2,.82);
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.nbr-box { width: min(94vw, 420px); padding: 20px 18px; border-radius: 14px;
  background: linear-gradient(#14231f, #0a1210); border: 1px solid #59c2b4;
  text-align: center; animation: nbrIn .35s ease-out both; }
@keyframes nbrIn { from { transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.nbr-box b { display: block; color: #8ce8d4; letter-spacing: .14em; font-size: 13px; margin-bottom: 8px; }
.nbr-box i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.5;
  color: #cfe6e0; font-family: var(--read, inherit); margin-bottom: 14px; }
#nbr-ok { width: 100%; padding: 12px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#1c3b35, #10201d); border: 1px solid #59c2b4;
  color: #8ce8d4; letter-spacing: .12em; font-size: 12.5px; font-family: var(--font); }

/* ---- the return door wears EARTH's colour, not the homeworld's --------------- */
.gal-go.earth { background: linear-gradient(#12241f, #08100e) !important;
  border-color: #59c2b4 !important; color: #8ce8d4 !important; }

/* the picture is the frame for its own controls */
#dc-scene { position: relative; }
#dc-scene > #dc-art { display: block; }

/* ---- THE BAND IS TWO GROUPS, NOT FIVE ISLANDS (owner: 'bu kadar hizasız ve
   dağınık olması sence doğru mu?') -------------------------------------------
   It was `space-between`, which was right when a plaque sat in the middle: the
   slack had somewhere to go. With the plaque moved onto the card the same rule
   sprinkled 50px between every mark, so four readings drifted apart and the two
   doors became a separate island. Readings are one group hard left, doors are
   one group hard right, and ALL the slack sits in the one gap between them —
   which is what a console looks like. */
body.mapless #cmd-vitals { justify-content: flex-start !important; gap: 16px !important; }
body.mapless #cmd-vitals .vt-doors { margin-left: auto !important; gap: 10px !important; }
/* the rule under a mark is exactly as wide as the mark — it used to overhang
   3px each side to match a housing that no longer exists */
body.mapless #cmd-vitals .vt::after,
body.mapless #cmd-vitals .vt::before { left: 0 !important; right: 0 !important; }
body.mapless #cmd-vitals .vt::before { width: var(--p, 0%) !important; }
/* doors carry the readings' own bottom padding so every glyph in the band sits
   on one optical line */
body.mapless #cmd-vitals .vt-door { margin-bottom: 8px; }
@media (max-width: 520px) {
  body.mapless #cmd-vitals { gap: 13px !important; }
  body.mapless #cmd-vitals .vt-doors { gap: 9px !important; }
}


/* ---- THE BAND COMES UP OUT OF THE DARK (owner: 'üst menü hala çok karanlık,
   oranın brightness i aç') ----------------------------------------------------
   #060709 was chosen when the strip carried a plaque of bright figures; with
   the plaque gone the whole band read as a black bar with dim marks on it. The
   ground lifts, the rule under it lifts, and every glyph gains weight. */
body.mapless #cmd-vitals {
  background: linear-gradient(#181410, #100d09) !important;
  border-bottom-color: rgba(var(--gold-rgb),.42) !important;
  box-shadow: 0 1px 0 rgba(240,205,122,.10) inset, 0 6px 18px rgba(0,0,0,.5);
}
body.nibiru.mapless #cmd-vitals {
  background: linear-gradient(#1e100a, #140a06) !important;
  border-bottom-color: rgba(199,107,69,.55) !important;
}
/* resting metal is brighter, and the traffic colours keep their meaning */
#cmd-vitals .vt .vt-ic > svg { fill: var(--acc-hi); opacity: 1; }
body.mapless #cmd-vitals .vt::after { background: rgba(217,184,119,.30); }
body.mapless #cmd-vitals .vt-door { opacity: .92; color: var(--w-lit); }
body.mapless #cmd-vitals .vt-door:hover { opacity: 1; }

/* ---- the face on the band ---------------------------------------------------- */
.vt-face { width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb),.55); background: #12100a;
  display: grid; place-items: center; overflow: hidden; flex: none; margin-bottom: 8px; }
.vt-face svg { width: 100%; height: 100%; display: block; }/* press handled by MÜHÜR */

body.nibiru .vt-face { border-color: rgba(199,107,69,.7); }

/* ---- the commander sheet (profile2.js, pr-*) ---------------------------------- */
#profile-sheet { position: fixed; inset: 0; z-index: 560; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
#profile-sheet.hidden { display: none; }
.pr-box { width: min(96vw, 560px); max-height: 92vh; overflow: auto;
  background: linear-gradient(#171208, #0c0906); border: 1px solid rgba(var(--gold-rgb),.55);
  border-radius: 14px; padding: 0 0 14px; }
.pr-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(var(--gold-rgb),.3);
  position: sticky; top: 0; z-index: 2; background: #171208; border-radius: 14px 14px 0 0; }
.pr-head b { color: var(--acc-lit); letter-spacing: .18em; font-size: 12px; }
.pr-head button { background: none; border: 1px solid rgba(var(--gold-rgb),.4); color: var(--w-gold);
  border-radius: 6px; min-width: 34px; min-height: 30px; cursor: pointer; }
.pr-tabs { display: flex; gap: 6px; padding: 10px 14px 4px; }
.pr-tab { flex: 1; background: #0d0a06; border: 1px solid rgba(var(--gold-rgb),.35); color: var(--w-clay);
  padding: 8px 5px; border-radius: 8px; letter-spacing: .06em; font-size: 10.5px; cursor: pointer;
  min-width: 0; white-space: nowrap; flex: 1 1 auto; }
/* dört sekme 375px'e sığmıyordu: GALAKSİ YOLU kırpılıyordu (ölçüldü) */
@media (max-width: 420px) {
  .pr-tabs { gap: 5px; padding: 10px 12px 4px; }
  .pr-tab { font-size: 9.5px; letter-spacing: .02em; padding: 8px 4px; }
}
/* ---- AYARLAR sekmesi: çekmecenin satırları, sayfanın kendi dilinde ---------- */
.pr-ayar { padding: 2px 0 12px; }
.pr-ayar-baslik { margin: 14px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  color: var(--w-clay); }
.pr-ayar-baslik:first-child { margin-top: 6px; }
.pr-ayar-grup { display: flex; flex-direction: column; gap: 6px; }
.pr-ayar-sat { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: #0d0a06; border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 8px;
  color: var(--w-gold); padding: 10px 12px; font-size: 11.5px; letter-spacing: .08em; cursor: pointer; }
.pr-ayar-sat:hover { border-color: rgba(var(--gold-rgb),.65); background: #1a1208; }
.pr-ayar-sat .drw-i { flex: none; width: 18px; height: 18px; opacity: .85; }
.pr-ayar-grup.tehlike .pr-ayar-sat { border-color: rgba(194,90,65,.5); color: #b3604a; }
.pr-ayar-bos { padding: 18px 0; font-size: 11px; color: var(--w-clay); }
/* ayarlar tek başına açıldığında (dişli, SEÇENEKLER): sekmesiz, kart sahnesinin ve ana menünün üstünde */
#profile-sheet.pr-yalniz { z-index: 900; }
#profile-sheet.pr-yalniz .pr-tabs { display: none; }
#profile-sheet.pr-yalniz .pr-box { width: min(96vw, 440px); }

/* ---- KAYIT SAYFASI: ESKİ OYUNU YÜKLE / FARKLI KAYDET ---------------------- */
#kayit-sheet { position: fixed; inset: 0; z-index: 970; background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
.ky-box { width: min(96vw, 460px); max-height: 90vh; max-height: 90dvh; overflow: auto;
  background: linear-gradient(#171208, #0c0906); border: 1px solid rgba(var(--gold-rgb),.55);
  border-radius: 14px; padding: 0 14px 14px; }
.ky-bas { display: flex; justify-content: space-between; align-items: center; margin: 0 -14px 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(var(--gold-rgb),.3);
  position: sticky; top: 0; z-index: 2; background: #171208; }
.ky-bas b { color: var(--acc-lit); letter-spacing: .18em; font-size: 12px; }
.ky-kapat { background: none; border: 1px solid rgba(var(--gold-rgb),.4); color: var(--w-gold);
  border-radius: 6px; min-width: 34px; min-height: 30px; cursor: pointer; }
.ky-form { display: flex; gap: 8px; margin-bottom: 8px; }
.ky-ad { flex: 1; min-width: 0; background: #0d0a06; border: 1px solid rgba(var(--gold-rgb),.45);
  border-radius: 8px; color: #e8dcc4; padding: 10px; font-size: 13px; font-family: inherit; }
.ky-ad:focus { outline: none; border-color: var(--w-gold); }
.ky-kaydet { flex: none; background: #1a1208; border: 1px solid var(--w-gold); color: var(--w-glow);
  border-radius: 8px; padding: 0 14px; letter-spacing: .14em; font-size: 11.5px; cursor: pointer; }
.ky-mesaj { margin: 4px 0 8px; font-size: 11px; color: #c9785f; }
.ky-mesaj.iyi { color: var(--w-gold); }
.ky-alt { margin: 12px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .13em; color: var(--w-clay); }
.ky-liste { display: flex; flex-direction: column; gap: 6px; }
.ky-sat { display: flex; gap: 6px; align-items: stretch; }
.ky-yukle, .ky-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: #0d0a06; border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 8px;
  color: var(--w-gold); padding: 9px 12px; font-family: inherit; }
.ky-yukle { cursor: pointer; }
.ky-yukle:hover { border-color: rgba(var(--gold-rgb),.7); background: #1a1208; }
.ky-yukle b, .ky-bilgi b { font-size: 11.5px; letter-spacing: .08em; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ky-yukle small, .ky-bilgi small { font-size: 10px; color: var(--w-clay); letter-spacing: .03em; }
.ky-yukle em { font-style: normal; font-size: 9.5px; color: #8a7a5c; }
.ky-oto .ky-yukle { border-color: rgba(var(--gold-rgb),.55); }
.ky-sil { flex: none; min-width: 42px; background: #0d0a06; border: 1px solid rgba(194,90,65,.45);
  color: #b3604a; border-radius: 8px; cursor: pointer; font-size: 11px; letter-spacing: .06em; }
.ky-sil.emin { background: #2a0f08; color: #e08a6f; border-color: #c25a41; padding: 0 8px; }
.ky-bos { margin: 10px 0 4px; font-size: 11px; color: var(--w-clay); text-align: center; }

/* ---- ANA MENÜ: DEVAM ET · ESKİ OYUNU YÜKLE ------------------------------- */
#fs-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 9px; }
#fs-ust .fs-ust-tus { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; padding: 8px 8px; cursor: pointer; background: #12100c;
  border: 1px solid #4a3f2c; border-radius: 9px; font-family: var(--font); font-size: 11px;
  letter-spacing: .14em; color: #e8dcc4; transition: border-color .14s; }
#fs-ust #fs-devam { border-color: #8a7240; color: #e8c96a; }
#fs-ust .fs-ust-tus small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 8.5px; letter-spacing: .08em; color: #645b48; margin-top: 3px; }
#fs-ust .fs-ust-tus:hover:not([disabled]) { border-color: #e8c96a; }
#fs-ust .fs-ust-tus[disabled] { opacity: .45; cursor: default; }
.pr-tab.on { color: var(--acc-lit); border-color: rgba(var(--gold-rgb),.7); background: #241708; }
#pr-body { padding: 6px 14px 0; }
.pr-sec { margin: 14px 0 8px; font-size: 11px; letter-spacing: .13em; color: var(--w-clay); }
.pr-id { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0 2px; }
.pr-face { width: 74px; height: 74px; flex: none; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb),.5); background: #0d0a06; }
.pr-face svg { width: 100%; height: 100%; display: block; }
.pr-idt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-idt b { color: var(--w-glow); font-size: 15px; letter-spacing: .1em; }
.pr-idt i { font-style: normal; font-size: 11px; color: var(--w-clay); letter-spacing: .06em; }
.pr-idt em { font-style: normal; font-size: 12px; line-height: 1.45; color: #cfc6b8;
  font-family: var(--read, inherit); }
.pr-line { display: grid; grid-template-columns: 96px 1fr 30px; gap: 8px; align-items: center;
  margin: 5px 0; font-size: 11px; color: #cfc6b8; }
.pr-line > span { letter-spacing: .06em; }
.pr-line > b { text-align: right; color: var(--acc-lit); font-variant-numeric: tabular-nums; }
.pr-line > em { grid-column: 1 / -1; font-style: normal; font-size: 11px; line-height: 1.4;
  color: #8d8375; font-family: var(--read, inherit); margin: -1px 0 6px; }
.pr-line.good > b { color: #7fe0a8; }
.pr-line.bad > b { color: #e0954e; }
.pr-bar { display: block; height: 6px; border-radius: 3px; background: rgba(var(--gold-rgb),.16); overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--w-gold), var(--w-glow)); }
.pr-line.good .pr-bar i { background: linear-gradient(90deg, #4f9d78, #7fe0a8); }
.pr-line.bad .pr-bar i { background: linear-gradient(90deg, #8a5330, #e0954e); }
.pr-world { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-w { padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--gold-rgb),.3); }
.pr-w.earth { border-color: rgba(89,194,180,.45); }
.pr-w.nib { border-color: rgba(199,107,69,.45); }
.pr-w b { display: block; font-size: 11px; letter-spacing: .14em; margin-bottom: 5px; color: #cfc6b8; }
.pr-w i { display: block; font-style: normal; font-size: 11px; color: #8d8375; margin-top: 5px; }
.pr-rep { display: inline-block; font-size: 11px; letter-spacing: .1em; padding: 2px 7px;
  border-radius: 6px; margin-bottom: 6px; }
.rep-love { background: rgba(127,224,168,.18); color: #7fe0a8; }
.rep-good { background: rgba(217,180,106,.18); color: var(--acc-lit); }
.rep-mid  { background: rgba(176,150,106,.16); color: var(--w-clay); }
.rep-cold { background: rgba(224,149,78,.16); color: #e0954e; }
.rep-hate { background: rgba(230,85,46,.18); color: #e6552e; }
.pr-towns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pr-town { display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(var(--gold-rgb),.22); }
.pr-town b { font-size: 11px; color: #cfc6b8; font-weight: 400; }
.pr-town .pr-rep { margin: 0; }
.pr-road { display: flex; flex-direction: column; gap: 8px; }
.pr-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(var(--gold-rgb),.25); }
.pr-step.on { border-color: rgba(127,224,168,.55); background: rgba(127,224,168,.05); }
.pr-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(var(--gold-rgb),.45); color: var(--w-clay); font-size: 11px; }
.pr-step.on .pr-dot { border-color: #7fe0a8; color: #7fe0a8; }
.pr-st b { display: block; font-size: 12px; letter-spacing: .1em; color: var(--acc-lit); }
.pr-step.on .pr-st b { color: #7fe0a8; }
.pr-st i { display: block; font-style: normal; font-size: 11px; color: var(--w-clay); margin: 2px 0; }
.pr-st em { display: block; font-style: normal; font-size: 11px; line-height: 1.45;
  color: #8d8375; font-family: var(--read, inherit); }
.pr-note { margin: 14px 0 2px; font-size: 11px; line-height: 1.5; color: #8d8375;
  font-family: var(--read, inherit); }
@media (max-width: 520px) {
  .pr-line { grid-template-columns: 86px 1fr 28px; font-size: 11px; }
  .pr-world, .pr-towns { grid-template-columns: 1fr; }
  .vt-face { width: 33px; height: 33px; }
}

/* ---- THE ALARM MUST NOT DIM THE INSTRUMENT (owner: 'ikonlar hala çok
   karanlık') ------------------------------------------------------------------
   Measured live: a mark in the critical band was running vtCrit, an animation
   that fades it to 55% opacity twice a second — so the readings that matter
   MOST were the darkest things on the band. An alarm should add light, not
   take it away: the pulse is brightness now, and the glyph never leaves full
   opacity. Same for the doors, which were pinned at 50% by an older rule. */
body.mapless #cmd-vitals .vt.crit { animation: vtCritLit 2.2s ease-in-out infinite !important;
  opacity: 1 !important; }
/* THE ALARM BREATHES ON OPACITY, NOT ON A FILTER. Animating filter forces the
   compositor to re-run a brightness pass over the element every frame for as
   long as a reading is critical — which on a phone is most of a bad watch, and
   it is warm work for a pulse. Opacity is a free compositor property; the
   halo behind it is painted once and never re-rasterised. */
@keyframes vtCritLit {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
body.mapless #cmd-vitals .vt { opacity: 1 !important; }
body.mapless #cmd-vitals .vt .vt-ic > svg,
#cmd-vitals .vt .vt-ic > svg { opacity: 1 !important; }
body.mapless #cmd-vitals .vt-door { opacity: .95 !important; }
body.mapless #cmd-vitals .vt-door:hover,
body.mapless #cmd-vitals .vt-door:active { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.mapless #cmd-vitals .vt.crit { animation: none !important; }
}

/* ---- ONE OPTICAL LINE FOR ALL SEVEN (owner: 'sence hizalamalar doğru mu?') ---
   Live measurement: readings sat 11→52, doors 8→46, the face 8→41, and the
   face rendered 31x34 because its artwork is not square. Every glyph is 33px
   in a 33px box now, and the boxes share one centre line. */
body.mapless #cmd-vitals { align-items: center !important; }
body.mapless #cmd-vitals .vt-face { width: 33px !important; height: 33px !important;
  margin-bottom: 8px !important; padding: 0; }
body.mapless #cmd-vitals .vt-face svg { width: 33px !important; height: 33px !important;
  object-fit: cover; }
body.mapless #cmd-vitals .vt-door { margin-bottom: 8px !important; }
/* ---- the commander mark is a DOOR, not a portrait (owner: 'yuvarlak çerçeve
   içinde de olmasın diğer ikonlar gibi çerçevesiz olsun') --------------------- */
body.mapless #cmd-vitals .vt-face {
  border: 0 !important; background: none !important; border-radius: 0 !important;
  color: var(--w-lit); opacity: .95; overflow: visible !important; }
body.mapless #cmd-vitals .vt-face:hover,
body.mapless #cmd-vitals .vt-face:active { opacity: 1; }
body.nibiru.mapless #cmd-vitals .vt-face { color: #e8965e; }
body.mapless #cmd-vitals .vt-face svg { object-fit: initial !important; }

/* ---- Konsept B: the notch meter on an authored gamble (docs/SANS_UI.md) ----- */
.dc-odds .dc-cent { display: inline-flex; gap: 2px; margin-right: 6px;
  vertical-align: -1px; text-decoration: none; }
.dc-odds .dc-cent s { width: 6px; height: 8px; border-radius: 1.5px;
  background: #3a2f22; text-decoration: none; display: inline-block; }
.dc-odds .dc-cent s.c-t { background: var(--w-clay); }   /* the base chance: ash-gold */
.dc-odds .dc-cent s.c-s { background: #7fe0a8; }   /* your stat's contribution */

/* ================================================================= */
/* THE TITLE, DRESSED (owner, 2026-08-21) — grid drift, embers,       */
/* terminal type-out, glitching emblem, one breathing CTA.            */
/* ================================================================= */

/* -- depth: a grid that drifts down, forever, quietly -------------- */
.overlay.title::before { content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--gold-rgb),.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(var(--gold-rgb),.045) 0 1px, transparent 1px 34px);
  animation: ovGridDrift 22s linear infinite; }
@keyframes ovGridDrift { from { background-position: 0 0, 0 0; }
  to { background-position: 0 34px, 0 0; } }
.overlay.title > .ov-box { position: relative; z-index: 2; }

/* -- the embers: twelve, transform+opacity only -------------------- */
#ov-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#ov-fx s { position: absolute; bottom: -14px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #f7e0a0 0%, var(--w-gold) 55%, transparent 72%);
  opacity: 0; will-change: transform, opacity;
  animation: ovEmber linear infinite; }
@keyframes ovEmber {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  8% { opacity: .75; }
  45% { transform: translate(14px, -46vh) scale(1); opacity: .5; }
  78% { opacity: .55; }
  100% { transform: translate(-10px, -104vh) scale(.6); opacity: 0; } }
#ov-fx s:nth-child(1)  { left: 6%;  animation-duration: 11s;   animation-delay: 0s; }
#ov-fx s:nth-child(2)  { left: 14%; animation-duration: 14s;   animation-delay: 3.2s; width: 3px; height: 3px; }
#ov-fx s:nth-child(3)  { left: 23%; animation-duration: 9.5s;  animation-delay: 1.4s; }
#ov-fx s:nth-child(4)  { left: 31%; animation-duration: 13s;   animation-delay: 5.6s; width: 3px; height: 3px; }
#ov-fx s:nth-child(5)  { left: 42%; animation-duration: 10.5s; animation-delay: 2.3s; }
#ov-fx s:nth-child(6)  { left: 51%; animation-duration: 15s;   animation-delay: 7.1s; width: 5px; height: 5px; }
#ov-fx s:nth-child(7)  { left: 58%; animation-duration: 9s;    animation-delay: .8s; }
#ov-fx s:nth-child(8)  { left: 66%; animation-duration: 12.5s; animation-delay: 4.4s; width: 3px; height: 3px; }
#ov-fx s:nth-child(9)  { left: 74%; animation-duration: 10s;   animation-delay: 6.2s; }
#ov-fx s:nth-child(10) { left: 82%; animation-duration: 13.5s; animation-delay: 1.9s; }
#ov-fx s:nth-child(11) { left: 90%; animation-duration: 11.5s; animation-delay: 8.3s; width: 3px; height: 3px; }
#ov-fx s:nth-child(12) { left: 96%; animation-duration: 14.5s; animation-delay: 3.7s; }

/* -- the terminal: a live caret while a line types, gold on the keys */
.overlay.title .ov-story p.dt-live::after { content: '▌'; color: var(--acc-lit);
  animation: dtCaret 1s steps(1) infinite; margin-left: 1px; }
@keyframes dtCaret { 50% { opacity: 0; } }
.overlay.title .ov-story p.dt-wait { min-height: 1em; }
.overlay.title .ov-story .hl { color: #f7e0a0; font-weight: 600;
  text-shadow: 0 0 8px rgba(var(--lit-rgb),.85), 0 0 20px rgba(var(--gold-rgb),.45); }
.overlay.title .ov-story .dt-term { font-family: var(--font); letter-spacing: .12em;
  font-size: 13px; color: #cfc6b8; }

/* -- the emblem's glitch: a chromatic stutter, thrice a minute ------ */
#ov-logo.glitch { animation: ovGlitch .17s steps(2) 1; }
@keyframes ovGlitch {
  0%   { transform: translate(0, 0); filter: drop-shadow(0 3px 14px rgba(0,0,0,.65)); }
  25%  { transform: translate(-2.5px, 1px) skewX(1.6deg);
         filter: drop-shadow(2px 0 0 rgba(89,194,180,.8)) drop-shadow(-2px 0 0 rgba(230,85,46,.7)); }
  50%  { transform: translate(2px, -1.5px) skewX(-1.2deg);
         filter: drop-shadow(-2px 0 0 rgba(89,194,180,.8)) drop-shadow(2px 0 0 rgba(230,85,46,.7)); }
  100% { transform: translate(0, 0); } }

/* -- the doors: one breathing CTA, two quiet marks ------------------ */
.overlay .ov-doors { flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
.overlay .ov-doors > #ov-resume.ov-cta,
.overlay .ov-doors > #ov-reseed.ov-cta,
.overlay .ov-doors > .ov-door.ov-cta {
  /* the 66px door metrics live at id weight with min/max clamps and
     font-size:0 - every one of them must be explicitly released here */
  min-width: 0 !important; max-width: none !important;
  font-size: 14.5px !important; display: inline-flex !important;
  flex-basis: 100%; order: -1; width: min(84vw, 300px) !important;
  height: auto !important; min-height: 62px; margin: 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 26px !important; border-radius: 14px !important;
  border: 1px solid var(--w-gold) !important;
  background: linear-gradient(#241708, #14100a) !important;
  position: relative; overflow: visible !important;
  animation: ctaBreath 3.4s ease-in-out infinite; }
.overlay .ov-doors > .ov-door.ov-cta .ob-i { width: 22px !important; height: 22px !important; }
.overlay .ov-doors > .ov-door.ov-cta .cta-t { color: var(--w-glow); font-family: var(--font);
  font-size: 14.5px; letter-spacing: .22em; }
@keyframes ctaBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--lit-rgb),.0), 0 6px 22px rgba(0,0,0,.5); }
  50% { transform: scale(1.018); box-shadow: 0 0 26px 2px rgba(var(--lit-rgb),.22), 0 6px 22px rgba(0,0,0,.5); } }
.overlay .ov-doors > .ov-door.ov-cta:hover,
.overlay .ov-doors > .ov-door.ov-cta:active {
  border-color: var(--w-glow) !important;
  box-shadow: 0 0 34px 6px rgba(var(--lit-rgb),.42), 0 0 80px 10px rgba(var(--gold-rgb),.18) !important; }
.overlay .ov-doors > #ov-resume.ov-min,
.overlay .ov-doors > #ov-reseed.ov-min,
.overlay .ov-doors > #ov-reset.ov-min,
.overlay .ov-doors > .ov-door.ov-min {
  min-width: 0 !important; max-width: none !important;
  width: auto !important; height: auto !important; min-height: 0;
  border: 0 !important; background: none !important; border-radius: 0 !important;
  opacity: .55; padding: 6px 8px !important; }
.overlay .ov-doors > .ov-door.ov-min .ob-i { width: 20px !important; height: 20px !important; }
.overlay .ov-doors > .ov-door.ov-min:hover,
.overlay .ov-doors > .ov-door.ov-min:active { opacity: .95; }

@media (prefers-reduced-motion: reduce) {
  .overlay.title::before, #ov-fx s, .overlay .ov-doors > .ov-door.ov-cta { animation: none !important; }
  #ov-logo.glitch { animation: none; }
}

/* =================================================================== */
/* THE STATUS PANEL AS A TERMINAL (owner, 2026-08-21)                  */
/* Cut corners instead of rounded ones, translucent dark-brown ground, */
/* thin amber rules, monospace figures with a faint glow — and the     */
/* settings/go rows become a file list you scan, not a wall of chips.  */
/* =================================================================== */

/* -- the header line: where in the record you are -------------------- */
#hdr-drawer .panel .term-head {
  margin: 0 0 10px; padding: 10px 12px;
  background: rgba(28,20,12,.72);
  border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
#hdr-drawer .panel .th-tag { display: block; font-family: var(--font);
  font-size: 11px; letter-spacing: .13em; color: var(--w-clay); margin-bottom: 5px; }
#hdr-drawer .panel .th-line { display: block; font-family: var(--font);
  font-size: 15px; letter-spacing: .12em; color: var(--w-glow);
  text-shadow: 0 0 10px rgba(var(--lit-rgb),.45); }
#hdr-drawer .panel .th-line s { color: #7a6742; text-decoration: none; margin: 0 4px; }

/* -- the readings: cut boxes, amber hairlines, glowing figures -------- */
#hdr-drawer .panel .term-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#hdr-drawer .panel .term-grid .stat {
  background: rgba(24,17,10,.66) !important;
  border: 1px solid rgba(var(--gold-rgb),.34) !important;
  border-radius: 0 !important; padding: 8px 10px !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
#hdr-drawer .panel .term-grid .stat span {
  font-family: var(--font); font-size: 11px; letter-spacing: .2em; color: #a2896a; }
#hdr-drawer .panel .term-grid .stat b {
  font-family: var(--font); font-size: 16px; letter-spacing: .04em; color: var(--w-glow);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 9px rgba(var(--lit-rgb),.5); }

/* -- settings & go: a list you scan, not chips ------------------------ */
#hdr-drawer .panel .slot { display: flex !important; flex-direction: column !important;
  gap: 0 !important; }
#hdr-drawer .panel .slot > button,
#hdr-drawer .panel .slot > .h-btn {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  display: flex !important; align-items: center; gap: 10px;
  justify-content: flex-start !important; text-align: left !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-left: 2px solid transparent !important;
  border-bottom: 1px solid rgba(var(--gold-rgb),.14) !important;
  padding: 11px 12px !important; margin: 0 !important;
  font-family: var(--font); font-size: 11.5px; letter-spacing: .14em;
  color: #cfc6b8 !important; cursor: pointer;
  transition: border-left-color .14s, background .14s, color .14s, padding-left .14s; }
#hdr-drawer .panel .slot > button:hover,
#hdr-drawer .panel .slot > .h-btn:hover,
#hdr-drawer .panel .slot > button:active {
  border-left-color: var(--acc-lit) !important; background: rgba(var(--gold-rgb),.07) !important;
  color: var(--w-glow) !important; padding-left: 16px !important; }
#hdr-drawer .panel .slot > #btn-reseed { color: #e0954e !important; }
#hdr-drawer .panel .slot > #btn-reseed:hover { border-left-color: #e6552e !important;
  color: #e6552e !important; background: rgba(230,85,46,.08) !important; }
#hdr-drawer .panel .slot > .gone { display: none !important; }

/* -- section titles read as terminal labels --------------------------- */
#hdr-drawer .panel h4 { font-family: var(--font); font-size: 11px !important;
  letter-spacing: .3em !important; color: #8d7a56 !important;
  margin: 16px 0 8px !important; padding-bottom: 5px;
  border-bottom: 1px solid rgba(var(--gold-rgb),.18); }

/* -- the signature at the foot ---------------------------------------- */
#hdr-drawer .panel .term-sig { margin-top: 18px; padding-top: 10px;
  border-top: 1px solid rgba(var(--gold-rgb),.14);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em;
  color: #5f5540; opacity: .8; text-align: left; }

/* -- one row, one language: drawn glyph + what pressing it does ------- */
#hdr-drawer .panel .drw-row { gap: 11px !important; }
#hdr-drawer .panel .drw-i { width: 17px; height: 17px; flex: none; opacity: .85; }
#hdr-drawer .panel .drw-row:hover .drw-i { opacity: 1; }
#hdr-drawer .panel .drw-t { font-family: var(--font); letter-spacing: .14em; }
#hdr-drawer .panel .drw-row.ok { color: #7fe0a8 !important; border-left-color: #7fe0a8 !important; }
#hdr-drawer .panel .drw-row.ok .drw-i { color: #7fe0a8; }

/* =================================================================== */
/* THE PROTOCOL CARD + THE SEAL MODAL (owner, 2026-08-21)              */
/* =================================================================== */

/* -- onboarding: the Council's own transmission --------------------- */
#ob-proto { position: fixed; inset: 0; z-index: 780;
  background: rgba(3,2,1,.90); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: obIn .34s ease-out both; }
#ob-proto.out { animation: obOut .3s ease-in both; }
@keyframes obIn { from { } to { opacity: 1; } }
/* The exit used to be an EMPTY keyframe: a sheet wearing `out` stayed at full
   opacity until its removal timer fired, and if that timer died the sheet
   stood there for good. It fades for real now, and the fade is also what lets
   perdeMesgul tell a corpse from a curtain. */
@keyframes obOut { to { opacity: 0; } }
.ob-box { width: min(94vw, 560px); padding: 26px 24px 22px;
  background: rgba(20,14,8,.92); border: 1px solid rgba(var(--gold-rgb),.55);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: 0 0 60px rgba(0,0,0,.7), inset 0 0 40px rgba(var(--gold-rgb),.05);
  animation: obScale .42s cubic-bezier(.2,.9,.3,1) both; }
@keyframes obScale { from { transform: scale(.94); } to { transform: scale(1); } }
.ob-tag { display: block; font-family: var(--font); font-size: 11px;
  letter-spacing: .3em; color: #8d7a56; margin-bottom: 14px; }
.ob-text { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; line-height: 1.75;
  color: var(--w-glow); text-shadow: 0 0 12px rgba(var(--lit-rgb),.35);
  white-space: pre-wrap; margin: 0 0 18px; min-height: 8.5em; }
#ob-proto:not(.done) .ob-text::after { content: '▌'; animation: dtCaret 1s steps(1) infinite; }
.ob-seals { display: flex; gap: 7px; margin: 0 0 20px; }
.ob-seals s { width: 100%; height: 3px; background: rgba(var(--gold-rgb),.22); text-decoration: none; }
#ob-go { width: 100%; padding: 15px; cursor: pointer;
  background: linear-gradient(#2a1c0a, #16110a); border: 1px solid var(--w-gold);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  color: var(--w-glow); font-family: var(--font); font-size: 13px; letter-spacing: .22em;
  transition: box-shadow .18s, border-color .18s; }
#ob-go:hover { border-color: var(--w-glow); box-shadow: 0 0 30px rgba(var(--lit-rgb),.35); }

/* -- the seal modal -------------------------------------------------- */
#qs-modal { position: fixed; inset: 0; z-index: 760;
  background: rgba(3,2,1,.82); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: obIn .26s ease-out both; }
#qs-modal.out { animation: obOut .24s ease-in both; }
.qs-box { width: min(94vw, 460px); padding: 22px 22px 18px; text-align: center;
  background: rgba(18,13,8,.95); border: 1px solid rgba(var(--gold-rgb),.5);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  animation: qsIn .38s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes qsIn { from { transform: scale(.9); }
  to { transform: scale(1); } }
.qs-head { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .3em;
  color: #7fe0a8; text-shadow: 0 0 14px rgba(127,224,168,.6);
  animation: qsBlink 1.1s steps(1) infinite; }
@keyframes qsBlink { }
.qs-count { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .13em;
  color: #8d7a56; margin: 8px 0 12px; }
.qs-title { margin: 0 0 8px; font-family: var(--font); font-size: 17px; letter-spacing: .14em;
  color: var(--w-glow); }
.qs-note { margin: 0 0 18px; font-family: var(--read, inherit); font-size: 12.5px;
  line-height: 1.55; color: #cfc6b8; }
.qs-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qs-btns button { padding: 12px 8px; cursor: pointer; font-family: var(--font);
  font-size: 11px; letter-spacing: .12em; color: #cfc6b8;
  background: rgba(var(--gold-rgb),.06); border: 1px solid rgba(var(--gold-rgb),.3);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color .15s, color .15s, box-shadow .15s; }
.qs-btns button:hover { border-color: rgba(var(--gold-rgb),.7); color: var(--w-glow); }
.qs-btns button.gold { border-color: var(--w-gold); color: var(--w-glow);
  background: linear-gradient(#2a1c0a, #16110a); }
.qs-btns button.gold:hover { border-color: var(--w-glow); box-shadow: 0 0 24px rgba(var(--lit-rgb),.35); }
@media (prefers-reduced-motion: reduce) {
  #ob-proto, .ob-box, #qs-modal, .qs-box, .qs-head { animation: none !important; }
}

/* -- the road: a sealed step reads as sealed ------------------------- */
.pr-step.on { border-color: rgba(127,224,168,.5) !important;
  background: rgba(127,224,168,.045) !important; opacity: .82; }
.pr-step.on .pr-st b { color: #7fe0a8 !important;
  text-shadow: 0 0 10px rgba(127,224,168,.45); }
.pr-step.on .pr-st i { color: #5fae8b !important; }
.pr-step.on .pr-st em { color: #6f8a7e !important; }
.pr-step.on .pr-dot { border-color: #7fe0a8 !important; color: #0c1a14 !important;
  background: #7fe0a8; font-size: 0; position: relative;
  box-shadow: 0 0 12px rgba(127,224,168,.4); }
/* the company seal, stamped into the disc */
.pr-step.on .pr-dot::after { content: ''; position: absolute; inset: 5px;
  background: #0c1a14;
  clip-path: polygon(46% 0, 100% 30%, 100% 70%, 46% 100%, 0 70%, 0 30%); }
.pr-step.on .pr-dot::before { content: '✓'; position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; font-size: 13px; color: #7fe0a8; }

/* ---- THE COUNCIL'S LINE (owner, 2026-08-21: '01 SİSTEM HATTI uygula') -------
   The strip ran marks hard left and doors hard right with a dead gap between
   them, and everything the world did between two cards went to a log nobody
   has open. The gap is now the line: newest consequence, typed out, cursor
   waiting. It takes the leftover width and never pushes a door — min-width:0
   plus ellipsis, so a long sentence trims instead of wrapping the strip.      */
body.mapless #cmd-vitals .vt-feed {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  justify-content: center; gap: 7px; align-self: center;
  padding: 0 10px; margin-bottom: 8px;
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px; letter-spacing: .05em; line-height: 1;
  color: #59c2b4; white-space: nowrap; overflow: hidden;
}
#cmd-vitals .vt-feed > s { text-decoration: none; flex: none; opacity: .5; }
#cmd-vitals .vt-feed > b {
  font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* the cursor is the only thing on the strip that blinks; it says the channel
   is open even when the Council has nothing to say */
#cmd-vitals .vt-feed > em {
  font-style: normal; flex: none; width: 7px; height: 13px;
  background: currentColor; opacity: .85;
  animation: vtCaret 1.1s steps(1) infinite;
}
@keyframes vtCaret { 50% { opacity: 0; } }
/* the line takes the colour of the news it carries */
#cmd-vitals .vt-feed.gd { color: #7fe0a8; }
#cmd-vitals .vt-feed.wr { color: #e0954e; }
#cmd-vitals .vt-feed.bd { color: #e6552e; }
body.nibiru.mapless #cmd-vitals .vt-feed { color: #d99a5e; }
/* THE LINE STAYS IN THE MIDDLE ON THE PHONE TOO (owner: '02 KAYAN TELGRAF').
   It used to drop to its own full-width row underneath, which is what pushed
   the strip to 124px and started the whole --deck-top fight. Travelling text
   needs no room of its own: it lives in the gap the marks and the doors leave
   between them, and the strip is one row again. */
@media (max-width: 620px) {
  body.mapless #cmd-vitals { flex-wrap: nowrap !important; }
  body.mapless #cmd-vitals .vt-feed {
    display: flex !important; flex: 1 1 auto !important; min-width: 0;
    order: 0; margin: 0 0 7px !important; padding: 0 7px !important;
    border-top: 0; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #cmd-vitals .vt-feed > em { animation: none; }
}

/* ---- THE ROAD, AS A LEDGER (owner, 2026-08-21) ------------------------------
   The road used to be eight identical rows handed over on day one. It reads as
   a ledger now: one card per step, a square seal on the left carrying either a
   check or the step's roman index, the figure it is counted by hard right, the
   bar under it, and the sentence that says why it matters. A sealed step goes
   neon turquoise; an open one stays gold. Steps beyond the working window are
   not drawn at all — the line under the list states how many are still dark. */
.yl-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 2px 2px 10px; }
.yl-head b { font-size: 12px; letter-spacing: .22em; color: var(--acc-hi); font-weight: 400; }
.yl-head i { font-style: normal; font-size: 11px; letter-spacing: .18em; color: #8d8375;
  font-variant-numeric: tabular-nums; }

.yl-road { display: flex; flex-direction: column; gap: 9px; }
.yl-step { display: flex; align-items: stretch; gap: 11px;
  padding: 11px 12px; background: rgba(12,10,7,.72);
  border: 1px solid rgba(var(--gold-rgb),.34);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.yl-no { flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(var(--gold-rgb),.5); color: var(--acc-hi);
  font-size: 13px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.yl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.yl-top { display: flex; align-items: baseline; gap: 10px; }
.yl-top b { flex: 1; min-width: 0; font-size: 13px; font-weight: 400;
  letter-spacing: .14em; color: var(--w-lit); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.yl-top i { font-style: normal; flex: none; font-size: 11.5px; color: #8d8375;
  font-variant-numeric: tabular-nums; }
.yl-track { display: block; height: 3px; background: rgba(var(--gold-rgb),.16); }
.yl-track > u { display: block; height: 100%; text-decoration: none;
  background: var(--w-gold); transition: width .5s ease; }
.yl-step em { font-style: normal; font-family: var(--read); font-size: 11.5px;
  line-height: 1.5; color: var(--w-stone); }

/* a sealed step: the Council has counted it, and it says so in its own colour */
.yl-step.on { border-color: rgba(63,191,160,.6); background: rgba(6,18,15,.72); }
.yl-step.on .yl-no { border-color: rgba(63,191,160,.85); color: #7fe0d0;
  font-size: 15px; }
.yl-step.on .yl-top b { color: #7fe0d0; }
.yl-step.on .yl-track > u { background: #3fbfa0; }
.yl-step.on em { color: #86a89c; }

.yl-dark { margin: 10px 2px 0; font-family: var(--read); font-size: 11px;
  line-height: 1.55; color: #6f6a5e; letter-spacing: .02em; }

/* ---- AN ATTRIBUTE ROW (owner, 2026-08-21) -----------------------------------
   Name and figure share one line in the attribute's own colour (--ac, set per
   row), the rule under them IS the reading, and the sentence beneath explains
   what the attribute actually buys — marked with the console's > so it reads
   as a line off the record. Same shape in KİMSİN and in ÖZELLİKLER, because
   they are the same object seen twice.                                        */
.at-row { display: flex; flex-direction: column; gap: 5px;
  padding: 9px 2px 11px; border-bottom: 1px solid rgba(var(--gold-rgb),.14); }
.at-row:last-child { border-bottom: 0; }
.at-top { display: flex; align-items: baseline; gap: 12px; }
.at-top b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 400;
  letter-spacing: .16em; color: var(--ac); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.at-top i { font-style: normal; flex: none; font-size: 15px; color: var(--ac);
  font-variant-numeric: tabular-nums; }
.at-track { display: block; height: 3px; background: rgba(var(--gold-rgb),.14); }
.at-track > u { display: block; height: 100%; text-decoration: none;
  background: var(--ac); transition: width .5s ease; }
.at-row em { font-style: normal; font-family: var(--read); font-size: 11.5px;
  line-height: 1.55; color: var(--w-stone); display: flex; gap: 6px; }
.at-row em > s { text-decoration: none; flex: none; color: var(--ac); opacity: .7; }
/* the band word: the reading in words, for a player who does not want to
   translate 64 into anything. Quiet on purpose — the number is the headline. */
/* the road's odds, on the panel, before the ride is bought */
.sf-oran { font-family: var(--read); font-size: 11px; line-height: 1.55;
  color: #9c9078; margin: 8px 0 10px; padding-left: 8px;
  border-left: 2px solid rgba(var(--gold-rgb),.3); }
.at-band { flex: none; font-size: 11px; letter-spacing: .13em; color: var(--ac);
  opacity: .62; font-family: var(--ui, inherit); }
/* THE BALANCE LINE. Two columns, not a paragraph: the eye has to be able to see
   that there IS a minus without reading the sentence. The plus takes the
   attribute's own colour, the minus stays neutral — a cost is not an alarm. */
.at-bal { display: grid; grid-template-columns: 10px 1fr; gap: 3px 7px;
  margin-top: 3px; font-family: var(--read); font-size: 11px; line-height: 1.5;
  color: #9c9078; }
.at-bal > b { font-weight: 400; font-size: 12px; line-height: 1.35; }
.at-bal .ab-p { color: var(--ac); }
.at-bal .ab-m { color: #8a7f6c; }
/* the instruments, as a table of what each reading is FOR */
.pr-alet { display: flex; flex-direction: column; }
.al-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px;
  border-bottom: 1px solid rgba(var(--gold-rgb),.1); }
.al-row:last-child { border-bottom: 0; }
.al-row > b { flex: none; min-width: 108px; font-weight: 400; font-size: 11px;
  letter-spacing: .14em; color: var(--ac); }
.al-row > span { flex: 1; min-width: 0; font-family: var(--read); font-size: 11px;
  color: #9c9078; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-row > i { flex: none; font-style: normal; font-size: 11px; letter-spacing: .14em;
  color: #8a7f6c; border: 1px solid rgba(var(--gold-rgb),.18); padding: 2px 6px; }
.al-row > i.al-on { color: var(--ac); border-color: var(--ac); }
@media (max-width: 460px) {
  .al-row { flex-wrap: wrap; }
  .al-row > b { min-width: 0; flex: 1; }
  .al-row > span { flex-basis: 100%; white-space: normal; }
}
/* a weakness states itself by sitting lower, not by turning red — the colour
   already belongs to the attribute */
.at-row.at-low .at-top b, .at-row.at-low .at-top i { opacity: .72; }
.at-row.at-low .at-track > u { opacity: .6; }
/* a step measured by a place, not a number, says so quietly */
.yl-top i.yer { font-size: 11px; letter-spacing: .1em; opacity: .62;
  font-family: var(--read); }

/* ---- THE COMMANDER'S CARD (owner, 2026-08-21) -------------------------------
   Filed the way the Council would file one: portrait in its own square frame,
   the archetype as the name on the file, the service line in bracket notation,
   and the sentence the record keeps about this kind of commander.             */
.km-card { display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; margin: 2px 0 6px;
  background: rgba(12,10,7,.72); border: 1px solid rgba(var(--gold-rgb),.4);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.km-face { flex: 0 0 92px; display: block; padding: 5px;
  border: 1px solid rgba(var(--gold-rgb),.55); background: rgba(0,0,0,.35); }
.km-face svg, .km-face img { display: block; width: 100%; height: auto; }
.km-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.km-id > b { font-size: 17px; font-weight: 400; letter-spacing: .16em;
  color: var(--acc-lit); line-height: 1.1; }
/* the service line: the console's own bracket notation, in the console's colour */
.km-kunye { font-style: normal; align-self: flex-start; max-width: 100%;
  padding: 5px 9px; font-size: 11px; letter-spacing: .06em; line-height: 1.5;
  color: #6fd0c0; border: 1px dashed rgba(89,194,180,.5);
  background: rgba(10,20,16,.55); }
.km-id > em { font-style: italic; font-family: var(--read); font-size: 12px;
  line-height: 1.55; color: var(--w-ash); }

/* strength and weakness: the DIRECTION is the information here, so the console's
   good/bad colours carry the list — the per-attribute palette lives in ÖZELLİK */
.km-list { display: flex; flex-direction: column; gap: 11px; padding: 2px 0 4px; }
.km-row { display: flex; flex-direction: column; gap: 5px; }
.km-top { display: flex; align-items: baseline; gap: 12px; }
.km-top b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 400;
  letter-spacing: .16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-top i { font-style: normal; flex: none; font-size: 15px;
  font-variant-numeric: tabular-nums; }
.km-track { display: block; height: 3px; background: rgba(var(--gold-rgb),.14); }
.km-track > u { display: block; height: 100%; text-decoration: none;
  transition: width .5s ease; }
.km-row.gd .km-top b, .km-row.gd .km-top i { color: #3fe0a0; }
.km-row.gd .km-track > u { background: #3fe0a0; }
.km-row.bd .km-top b, .km-row.bd .km-top i { color: #e2564a; }
.km-row.bd .km-track > u { background: #e2564a; }

.km-note { display: flex; gap: 8px; margin-top: 12px; padding: 10px 12px;
  background: rgba(12,10,7,.6); border: 1px solid rgba(var(--gold-rgb),.28);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-family: var(--read); font-size: 11.5px; line-height: 1.6; color: var(--w-stone); }
.km-note > s { text-decoration: none; flex: none; color: var(--w-gold); opacity: .8; }
@media (max-width: 400px) { .km-face { flex: 0 0 74px; } .km-id > b { font-size: 15px; } }

/* ---- THE ASSET STATEMENT (owner, 2026-08-21: 'para alanı da bu şekilde') ----
   One grammar top to bottom: a mark, a name, a figure hard right. Holdings
   first, then the paid moves as priced rows — a locked one dims behind a
   padlock rather than disappearing, because knowing what you cannot afford
   yet is information.                                                        */
.sp-box .sp-head { display: block; font-size: 11px; letter-spacing: .26em;
  color: var(--w-stone); padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 1px dashed rgba(var(--gold-rgb),.3); }
.sp-rows { display: flex; flex-direction: column; }
.sp-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid rgba(var(--gold-rgb),.12); }
.sp-row:last-child { border-bottom: 0; }
.sp-m { flex: none; display: inline-flex; color: var(--acc-hi); }
.sp-m svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.sp-n { flex: 1; min-width: 0; font-size: 12px; letter-spacing: .13em;
  color: var(--w-sand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row > b { flex: none; font-size: 14px; color: var(--acc-lit);
  font-variant-numeric: tabular-nums; }

/* a paid move is the same row, framed, because it can be pressed */
#sp-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
#sp-acts .sp-act { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; text-align: left; cursor: pointer;
  background: rgba(12,10,7,.6); border: 1px solid rgba(var(--lit-rgb),.7);
  color: var(--acc-lit); font-family: inherit; font-size: 12px; letter-spacing: .1em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
#sp-acts .sp-act .sp-t { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
#sp-acts .sp-act .sp-p { flex: none; display: inline-flex; align-items: center;
  gap: 5px; font-variant-numeric: tabular-nums; }
#sp-acts .sp-act:hover:not(:disabled) { background: rgba(var(--lit-rgb),.1); }
#sp-acts .sp-act:disabled { cursor: default; opacity: .5;
  border-color: rgba(var(--gold-rgb),.25); color: #8d8375; }
#sp-acts .sp-act:disabled .sp-m { color: #8d8375; }
#sp-acts .sp-act.paid { border-color: rgba(63,191,160,.6); color: #7fe0d0; opacity: 1; }
#sp-acts .sp-act.paid .sp-m { color: #7fe0d0; }
.sp-box .sp-seal { display: block; width: 100%; margin-top: 14px; padding: 11px;
  background: none; border: 1px solid rgba(var(--gold-rgb),.35); color: var(--w-ash);
  font-family: inherit; font-size: 11.5px; letter-spacing: .18em; cursor: pointer; }
.sp-box .sp-seal:hover { border-color: rgba(var(--lit-rgb),.7); color: var(--acc-lit); }

/* ---- THE CARD FACE, TIGHTENED (owner, 2026-08-21) ---------------------------
   The body text used to start at the same margin as everything else, so the
   question and the chrome around it read as one column of grey. It gets a rule
   down its left edge now — the mark a clerk puts beside the passage that
   matters — and the options become cut-cornered plates like every other
   pressable thing in the console.                                            */
#dc-text { border-left: 2px solid rgba(var(--gold-rgb),.55); padding-left: 13px; }
.dc-opt {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px),
    calc(100% - 9px) 100%, 0 100%, 0 9px);
}
/* a badge on an option — odds, price, the reason it is closed — sits in its own
   frame hard right, on the option's baseline, never over its words */
.dc-opt .dc-odds, .dc-opt .dc-price {
  border: 1px solid currentColor; padding: 3px 8px; border-radius: 0;
  font-variant-numeric: tabular-nums; }

/* ---- THE PALACE FLOOR (owner, 2026-08-21) -----------------------------------
   Two vault plates at the head, then every group of purchases introduced by the
   money that buys it. A player could stand in this room and not know which
   purse was paying; now the brief says it, and says where that purse fills
   from — the question the owner asked outright ("kasa ne, kese ne").         */
.sr-vaults { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.sr-vault { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 13px; background: rgba(12,10,7,.7);
  border: 1px solid rgba(var(--gold-rgb),.4);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.sr-vault span { font-size: 11px; letter-spacing: .13em; color: var(--w-stone); }
.sr-vault b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sr-vault.own b { color: var(--acc-lit); }
.sr-vault.co b { color: #7fb0d0; }

.sr-brief { position: relative; margin: 16px 0 11px; padding: 9px 0 9px 13px;
  border-left: 2px solid rgba(var(--gold-rgb),.55);
  font-size: 11.5px; letter-spacing: .04em; line-height: 1.6; color: var(--w-stone); }
.sr-brief::before { content: '> '; color: var(--w-gold); }
.sr-brief b { font-weight: 400; letter-spacing: .16em; color: var(--acc-lit); }
.sr-brief i { display: block; margin-top: 5px; font-style: normal;
  font-family: var(--read); color: #8d8375; }
.sr-brief.co { border-left-color: rgba(127,176,208,.55); }
.sr-brief.co::before { color: #7fb0d0; }
.sr-brief.co b { color: #9fd0e8; }

/* a wing: mark, name, what it buys, price hard right */
.sr-card { display: flex; align-items: center; gap: 12px; width: 100%;
  margin-bottom: 9px; padding: 11px 12px; text-align: left; cursor: pointer;
  background: rgba(12,10,7,.66); border: 1px solid rgba(var(--gold-rgb),.3);
  font-family: inherit;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.sr-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(var(--gold-rgb),.35); color: var(--acc-hi); }
.sr-ic svg { width: 19px; height: 19px; display: block; }
.sr-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-w b { font-size: 12.5px; font-weight: 400; letter-spacing: .14em; color: var(--acc-lit); }
.sr-w i { font-style: normal; font-family: var(--read); font-size: 11px;
  line-height: 1.45; color: var(--w-stone); }
.sr-badge { flex: none; padding: 4px 9px; font-size: 11px; letter-spacing: .1em;
  border: 1px solid currentColor; color: var(--acc-hi); font-variant-numeric: tabular-nums; }
.sr-card:hover:not(:disabled):not(.own) { border-color: rgba(var(--lit-rgb),.7);
  background: rgba(var(--lit-rgb),.07); }
/* a price you cannot meet says so in the alarm colour instead of going invisible */
.sr-card.short { cursor: default; }
.sr-card.short .sr-badge { color: #e2564a; }
.sr-card.short .sr-w b, .sr-card.short .sr-ic { opacity: .62; }
.sr-card.own { cursor: default; border-color: rgba(63,191,160,.5); }
.sr-card.own .sr-ic, .sr-card.own .sr-badge { color: #7fe0d0; border-color: rgba(63,191,160,.5); }
.sr-card.own .sr-w b { color: #7fe0d0; }
.sr-card.kacak { border-style: dashed; }
.sr-card.kacak.on { border-style: solid; border-color: rgba(226,86,74,.6); }
.sr-card.kacak.on .sr-ic, .sr-card.kacak.on .sr-badge { color: #e2564a; border-color: rgba(226,86,74,.6); }

/* the acts: three plates side by side, because they are a choice between three */
.sr-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sr-act { display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 9px; text-align: center; cursor: pointer; font-family: inherit;
  background: rgba(12,10,7,.66); border: 1px solid rgba(127,176,208,.3);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.sr-act .sr-ic { border-color: rgba(127,176,208,.35); color: #9fd0e8; }
.sr-act b { font-size: 11px; font-weight: 400; letter-spacing: .12em; color: #9fd0e8; }
.sr-act i { font-style: normal; font-family: var(--read); font-size: 11px;
  line-height: 1.4; color: #8d8375; }
.sr-act .sr-badge { color: #9fd0e8; border-color: rgba(127,176,208,.45); }
.sr-act:hover:not(:disabled) { border-color: rgba(159,208,232,.7);
  background: rgba(127,176,208,.08); }
.sr-act.short { cursor: default; opacity: .55; }
@media (max-width: 400px) { .sr-acts { grid-template-columns: 1fr; }
  .sr-act { flex-direction: row; text-align: left; }
  .sr-act b, .sr-act i { flex: none; } }

/* ---- THE WATCH REPORT: SECTION MARKS AND CLOSING PARAGRAPHS -----------------
   Every section of the dispatch is headed by the same framed mark, so the eye
   can find the seams while scrolling a long report, and the two closing
   readings ('as home sees you', 'as the world sees you') get a rule down their
   left edge — they are the Council's opinion, not the report's own figures.  */
.rv-sec { display: flex; align-items: center; gap: 9px; margin: 18px 0 9px !important; }
.rv-sec::before { content: '\2612'; flex: none; display: grid; place-items: center;
  width: 15px; height: 15px; font-size: 12px; line-height: 1;
  color: #e2564a; }
.rv-sec.rv-nib::before { color: #d99a5e; }
.rv-sec.rv-earth::before { color: #7fd05a; }
.rv-sec.rv-nib, .rv-sec.rv-earth { letter-spacing: .18em; }
/* the two closing readings speak in the Council's voice, so they are quoted
   rather than tabulated */
.rv-sec.rv-nib + .rv-body, .rv-sec.rv-earth + .rv-body {
  border-left: 2px solid rgba(var(--gold-rgb),.4); padding-left: 12px; margin-left: 2px; }
.rv-sec.rv-nib + .rv-body { border-left-color: rgba(217,154,94,.55); }
.rv-sec.rv-earth + .rv-body { border-left-color: rgba(127,208,90,.5); }
/* the stones you reached: framed marks on one line, not a drift of glyphs */
.bf-ms { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-ic { width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 17px; background: rgba(var(--t-rgb),.05);
  border: 1px solid rgba(var(--gold-rgb),.35); cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px),
    calc(100% - 7px) 100%, 0 100%, 0 7px); }
.bf-ic:hover { border-color: rgba(var(--lit-rgb),.7); background: rgba(var(--lit-rgb),.08); }

/* ---- A READING'S STATUS PLATE (owner, 2026-08-21) ---------------------------
   A reading is a dial with a demand on it. The figure leads, the bar carries a
   marker where the Council's demand sits, the ledger line stands as separate
   plates, and the explanation is a list of rules rather than a paragraph.    */
.vh-plate .vh-head { display: block; font-size: 12px; letter-spacing: .2em;
  color: var(--acc-hi); padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px dashed rgba(var(--gold-rgb),.32); }
.vh-plate .vh-v { display: block; text-align: center; font-size: 38px;
  line-height: 1.05; color: var(--acc-lit); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; }
.vh-bar { position: relative; height: 9px; margin: 14px 0 18px;
  background: rgba(var(--gold-rgb),.14); }
.vh-bar > u { display: block; height: 100%; text-decoration: none;
  background: linear-gradient(90deg, #a8863c, var(--acc-lit)); transition: width .6s ease; }
/* the demand: a hairline the fill either reaches or does not */
.vh-bar > i { position: absolute; top: -13px; bottom: -4px; width: 1px;
  background: #e2564a; font-style: normal; font-size: 11px; letter-spacing: .13em;
  color: #e2564a; white-space: nowrap; }
.vh-bar > i::before { content: attr(data-x); }
.vh-plates { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px; margin-bottom: 15px; }
.vh-p { padding: 10px 8px; text-align: center; background: rgba(var(--t-rgb,197,160,89),.05);
  border: 1px solid rgba(var(--gold-rgb),.28);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.vh-p span { display: block; font-size: 11px; letter-spacing: .13em; color: #8d8375;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-p b { display: block; margin-top: 4px; font-size: 15px; color: var(--w-sand);
  font-variant-numeric: tabular-nums; }
.vh-p.co { border-color: rgba(127,176,208,.45); } .vh-p.co b { color: #9fd0e8; }
.vh-p.own { border-color: rgba(var(--lit-rgb),.5); } .vh-p.own b { color: var(--acc-lit); }
.vh-p.bd { border-color: rgba(226,86,74,.5); } .vh-p.bd b { color: #e2564a; }
.vh-rules { padding: 12px 13px; margin-bottom: 4px;
  background: rgba(12,10,7,.5); border: 1px solid rgba(var(--gold-rgb),.22);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.vh-k { display: flex; gap: 8px; font-family: var(--read); font-size: 11.5px;
  line-height: 1.6; color: var(--w-stone); padding: 5px 0; }
.vh-k > s { text-decoration: none; flex: none; color: var(--w-gold); }
.vh-k b { font-weight: 400; color: var(--acc-lit); }
.vh-plate > button { display: block; width: 100%; margin-top: 12px; padding: 12px;
  background: none; border: 1px solid rgba(var(--gold-rgb),.35); color: var(--w-ash);
  font-family: inherit; font-size: 11.5px; letter-spacing: .18em; cursor: pointer; }
.vh-plate > button:hover { border-color: rgba(var(--lit-rgb),.7); color: var(--acc-lit); }
@media (max-width: 380px) { .vh-plates { grid-template-columns: 1fr 1fr; } }
/* the plate wears the reading's traffic band, and the rule that names what can
   go wrong stands apart from the ones that merely explain */
.vh-plate { position: relative; }
.vh-plate.wr .vh-v { color: #e0954e; }
.vh-plate.wr .vh-bar > u { background: linear-gradient(90deg, #9a6526, #e0954e); }
.vh-plate.bd .vh-v { color: #e2564a; }
.vh-plate.bd .vh-bar > u { background: linear-gradient(90deg, #8f2f22, #e2564a); }
.vh-plate.gd .vh-v { color: #3fe0a0; }
.vh-plate.gd .vh-bar > u { background: linear-gradient(90deg, #1f7a58, #3fe0a0); }
.vh-x { position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  display: grid; place-items: center; padding: 0; background: none;
  border: 0; color: #8d8375; cursor: pointer; }
.vh-x:hover { color: #e2564a; }
.vh-x svg { width: 17px; height: 17px; display: block; }
.vh-plate .vh-head { padding-right: 34px; }
.vh-k.risk { margin-top: 6px; padding: 8px 0 8px 11px;
  border-left: 2px solid rgba(226,86,74,.6); color: #d99a8e; }
.vh-k.risk > s, .vh-k.risk b { color: #e2564a; }
/* the figure leads from the left, the way a ledger entry does */
.vh-plate .vh-v { text-align: left !important; }
/* the critical line sits UNDER the bar and points at it; a target sits above */
.vh-bar > i { top: auto !important; bottom: -17px; height: auto;
  padding-left: 3px; border-left: 1px solid currentColor; }
.vh-bar > i:not(:empty) { background: none !important; }
.vh-plate .vh-bar { margin-bottom: 26px; }
/* THE THESIS — the one sentence that says what the number means */
.vh-thesis { margin: 10px 0; padding: 10px 13px;
  border-left: 2px solid rgba(var(--lit-rgb),.65); background: rgba(var(--lit-rgb),.05);
  font-family: var(--read); font-style: italic; font-size: 12px; line-height: 1.6;
  color: var(--w-lit); }
.vh-k.plain { padding: 2px 0 8px; color: var(--w-ash); }
.vh-k.plain > span { font-size: 12px; }
/* the alarm rule is a framed block, not a bullet with a red edge */
.vh-k.risk { margin-top: 10px; padding: 10px 12px !important;
  border: 1px solid rgba(226,86,74,.45); border-left-width: 2px;
  background: rgba(60,12,8,.3); }
/* an INDEX counts up in steps; a stock fills. The segmented bar says which. */
.vh-plate.seg .vh-bar > u {
  background: repeating-linear-gradient(90deg,
    currentColor 0 6px, transparent 6px 9px) !important; }
.vh-plate.seg.wr .vh-bar > u { color: #e0954e; }
.vh-plate.seg.bd .vh-bar > u { color: #e2564a; }
.vh-plate.seg.gd .vh-bar > u { color: #3fe0a0; }
/* the hazard corner takes the plate's own alarm colour */
.vh-plate.bd .vh-x, .vh-plate.wr .vh-x { color: #e0954e; }
.vh-plate.bd .vh-x { color: #e2564a; }
/* the alarm block names itself before it explains */
.vh-k.risk { flex-direction: column; gap: 6px; }
.vh-rt { font-size: 11px; font-weight: 400; letter-spacing: .14em;
  color: #e2564a; }
.vh-k.risk > span { color: #d99a8e; }

/* ---- THE ODDS BADGE LEAVES THE TEXT ALONE (owner: 'yazılar içiçe geçmiş') ---
   It was absolutely positioned in the option's top-right corner, which is
   empty on a short label and directly over the words on a long one — and
   framing it made the collision impossible to miss. The option becomes a
   column and the badge takes the first row, hard right, so it can never sit
   on top of anything it is describing.                                      */
.dc-opt { display: flex; flex-direction: column; align-items: stretch; }
.dc-opt .dc-odds {
  position: static !important; order: -1; align-self: flex-end;
  margin: 0 0 5px; max-width: 100%; white-space: normal; text-align: right; }
.dc-opt.short .dc-odds { top: auto; font-size: 11px; }
/* the hazard mark rides the TITLE, where a mark carries meaning */
.vh-haz { display: inline-flex; vertical-align: -2px; margin-left: 7px; color: #e0954e; }
.vh-plate.bd .vh-haz { color: #e2564a; }
.vh-haz svg { width: 14px; height: 14px; display: block; }
.vh-plate .vh-head { padding-right: 0; }
/* the critical line: its rule stands ON the bar, its label sits clear below */
.vh-bar > i { bottom: -18px; padding-left: 5px; font-size: 11px;
  display: flex; align-items: flex-end; }
.vh-plate .vh-bar { margin-bottom: 30px; }
.vh-plates:empty { display: none; }

/* ---- THE PALACE, REDRAWN IN PLACE (owner: 'saray kısmı da düzenlenmemiş') ---
   The room is palace.js's, so this is where it gets the console's grammar:
   two named vault plates at the head, each group of purchases introduced by
   the money that buys it and where that money comes from, cut corners on
   everything pressable, and a price you cannot meet stated in the alarm
   colour instead of dimmed into invisibility.                               */
.pal-purse { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.pal-vault { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; background: rgba(12,10,7,.7);
  border: 1px solid rgba(var(--gold-rgb),.4);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.pal-vault span { font-size: 11px; letter-spacing: .13em; color: var(--w-stone); }
.pal-vault b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pal-vault i { font-style: normal; font-size: 11px; color: #c76b45; letter-spacing: .08em; }
.pal-vault.own b { color: var(--acc-lit); }
.pal-vault.co b { color: #9fd0e8; }

.pal-brief { margin: 17px 0 11px; padding: 8px 0 8px 13px;
  border-left: 2px solid rgba(var(--gold-rgb),.55);
  font-size: 11.5px; letter-spacing: .04em; line-height: 1.6; color: var(--w-stone); }
.pal-brief::before { content: '> '; color: var(--w-gold); }
.pal-brief b { font-weight: 400; letter-spacing: .16em; color: var(--acc-lit); }
.pal-brief i { display: block; margin-top: 5px; font-style: normal;
  font-family: var(--read); font-size: 11px; color: #8d8375; }
.pal-brief.co { border-left-color: rgba(127,176,208,.55); }
.pal-brief.co::before { color: #7fb0d0; }
.pal-brief.co b { color: #9fd0e8; }

.pal-card, .pal-edim, .pal-buy {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px); }
.pal-buy:disabled { opacity: 1 !important; border-color: rgba(226,86,74,.55) !important;
  color: #e2564a !important; background: rgba(60,12,8,.28) !important; }
.pal-buy:disabled i { color: #c07060 !important; }
.pal-card.locked { opacity: .58; }
.pal-edims { gap: 10px !important; }
.pal-edim:disabled { opacity: .5; }

/* ---- THE DARK NETWORK (owner, 2026-08-21) -----------------------------------
   Every kind on one board: a coloured rail down the left that IS the species,
   its sigil in a framed square, a six-block signal meter, and on the right
   either what it will hear or the price of breaking its frequency open.     */
.ph-top { display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 2px 11px !important; margin-bottom: 12px;
  border-bottom: 1px dashed rgba(var(--gold-rgb),.3); }
.ph-top b { font-size: 13px; letter-spacing: .2em; color: var(--acc-lit); font-weight: 400; }
.ph-top i { font-style: normal; flex: none; padding: 4px 10px; font-size: 11px;
  letter-spacing: .13em; color: #e2564a; border: 1px solid rgba(226,86,74,.6); }
.ph-screen { display: flex; flex-direction: column; gap: 10px; }
.ph-row { display: flex !important; align-items: center; gap: 12px;
  padding: 11px 13px 11px 0; background: rgba(10,9,7,.6);
  border: 1px solid rgba(var(--gold-rgb),.2); }
.ph-rail { flex: none; width: 4px; align-self: stretch; margin-right: 1px;
  background: repeating-linear-gradient(180deg,
    var(--race, #8d8375) 0 4px, transparent 4px 7px); }
.ph-row.dark .ph-rail { opacity: .45; }
.ph-sig { flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  margin-left: 9px; color: var(--race, #8d8375);
  border: 1px solid color-mix(in srgb, var(--race, #8d8375) 55%, transparent);
  background: rgba(0,0,0,.35); }
.ph-sig svg { width: 22px; height: 22px; display: block; }
.ph-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-who b { font-size: 13px; font-weight: 400; letter-spacing: .14em; color: #e4dcc8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-meter { display: flex; gap: 3px; }
.ph-meter s { width: 9px; height: 8px; text-decoration: none;
  background: rgba(var(--gold-rgb),.18); }
.ph-meter s.on { background: var(--race, #8d8375); }
.ph-meter.off s { height: 2px; background: rgba(var(--gold-rgb),.28); }
.ph-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ph-side i { font-style: normal; font-size: 11px; letter-spacing: .13em; color: #6f6a5e; }
.ph-side i.on { color: var(--race, #8d8375); }
.ph-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px;
  background: rgba(12,10,7,.7); border: 1px solid rgba(var(--lit-rgb),.55);
  color: var(--acc-lit); font-family: inherit; font-size: 11px; letter-spacing: .1em;
  cursor: pointer; }
.ph-btn span { color: var(--w-stone); font-variant-numeric: tabular-nums; }
.ph-btn:hover:not(:disabled) { background: rgba(var(--lit-rgb),.1); }
.ph-btn:disabled { cursor: default; opacity: .45; }
.ph-btn.freq { border-color: color-mix(in srgb, var(--race, #8d8375) 60%, transparent);
  color: color-mix(in srgb, var(--race, #8d8375) 88%, white); }
.ph-btn.freq.short { border-color: rgba(226,86,74,.5); color: #e2564a; opacity: 1; }
.ph-row.live { border-color: color-mix(in srgb, var(--race, #8d8375) 45%, transparent); }
@media (max-width: 430px) {
  .ph-row { flex-wrap: wrap; }
  .ph-side { width: 100%; align-items: stretch; }
  .ph-btn { justify-content: space-between; }
}

/* ---- THE LINE ON THE DESKTOP BAR (owner, three times) -----------------------
   #cmd-vitals only exists under 900px. Above it the bar the player sees is
   #hdr-compact, so the feed lives there too — same grammar, sized for a bar
   that is 30px tall instead of 68.                                          */
#hdr-compact .vt-feed {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  justify-content: center; gap: 6px; margin: 0 4px; padding: 0 8px;
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11.5px; letter-spacing: .04em; line-height: 1;
  color: #59c2b4; white-space: nowrap; overflow: hidden;
}
#hdr-compact .vt-feed > s { text-decoration: none; flex: none; opacity: .5; }
#hdr-compact .vt-feed > b { font-weight: 400; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; }
#hdr-compact .vt-feed > em { font-style: normal; flex: none; width: 6px; height: 11px;
  background: currentColor; opacity: .85; animation: vtCaret 1.1s steps(1) infinite; }
#hdr-compact .vt-feed.gd { color: #7fe0a8; }
#hdr-compact .vt-feed.wr { color: #e0954e; }
#hdr-compact .vt-feed.bd { color: #e6552e; }
body.nibiru #hdr-compact .vt-feed { color: #d99a5e; }
/* a narrow desktop window still has the console strip carrying the line, so the
   compact bar yields rather than showing it twice */
@media (max-width: 899px) { #hdr-compact .vt-feed { display: none; } }
@media (prefers-reduced-motion: reduce) { #hdr-compact .vt-feed > em { animation: none; } }
/* (removed) The two-line wrap belonged to the era when the line had a row of
   its own under the strip. With the telegraph it was actively wrong: the text
   wrapped to two lines AND clipped, so a travelling sentence was chopped into
   'u>ırk / larak…' mid-scroll. The line is one row now, always. */

/* ---- EVERY MARK ITS OWN COLOUR (owner's reference strip, 2026-08-21) --------
   The four marks were painted by their traffic band, so on a good watch all
   four were the same green and on a bad one the same red — a row of identical
   glyphs the eye cannot tell apart. Each reading keeps a fixed identity colour
   now (the strip in the owner's reference: ember, gold, teal, violet) and the
   rule under it carries the same hue, so the marks read as four instruments
   rather than one repeated four times. The ALARM still overrides everything:
   a reading under a fifth goes to the alarm colour and breathes, which is the
   one moment the row is supposed to look the same.                          */
body.mapless #cmd-vitals .vt[data-v="protocol"] { --vc: #e0954e; }
body.mapless #cmd-vitals .vt[data-v="authority"] { --vc: var(--acc-lit); }
body.mapless #cmd-vitals .vt[data-v="quota"] { --vc: #3fd0c0; }
body.mapless #cmd-vitals .vt[data-v="anomaly"] { --vc: #a78bd0; }
body.mapless #cmd-vitals .vt[data-v="units"] { --vc: #7fd05a; }
body.mapless #cmd-vitals .vt[data-v="sky"] { --vc: #7fb0d0; }
body.mapless #cmd-vitals .vt[data-v="favor"] { --vc: var(--acc-lit); }
body.mapless #cmd-vitals .vt[data-v="insight"] { --vc: #9fd0e8; }
body.mapless #cmd-vitals .vt:not(.crit) .vt-ic > svg,
#cmd-vitals .vt:not(.crit) .vt-ic > svg { fill: var(--vc, var(--acc-hi)) !important; }
body.mapless #cmd-vitals .vt:not(.crit)::before {
  background: var(--vc, var(--acc-hi)) !important;
  box-shadow: 0 0 7px color-mix(in srgb, var(--vc, var(--acc-hi)) 55%, transparent) !important; }
body.mapless #cmd-vitals .vt:not(.crit)::after {
  background: color-mix(in srgb, var(--vc, var(--acc-hi)) 22%, transparent) !important; }

/* ---- THE THREE DOORS, TOLD APART (owner: 've bunu') -------------------------
   The doors shared one gold and the commander's mark sat in a grey that read
   as disabled next to them. Each door gets its own hue — the palace keeps the
   gold it has always had, the galaxy takes a sky blue that separates it from
   every reading on the left, and the commander gets a warm bone so the face
   looks like a place you can go rather than a greyed-out control.          */
body.mapless #cmd-vitals .vt-door[data-nav="palace"] { color: var(--acc-lit) !important; }
body.mapless #cmd-vitals .vt-door[data-nav="galaxy"] { color: #8fd0ff !important; }
body.mapless #cmd-vitals .vt-face { color: var(--w-bone) !important; opacity: 1 !important; }
body.mapless #cmd-vitals .vt-door { opacity: 1 !important; }
body.mapless #cmd-vitals .vt-door:hover, body.mapless #cmd-vitals .vt-face:hover {
  filter: brightness(1.25); }
body.nibiru.mapless #cmd-vitals .vt-door[data-nav="palace"] { color: #e0a05e !important; }
body.nibiru.mapless #cmd-vitals .vt-door[data-nav="galaxy"] { color: #d99a5e !important; }
body.nibiru.mapless #cmd-vitals .vt-face { color: #e8b98e !important; }

/* ---- THE BAND COMES UP OUT OF THE DARK, AGAIN (owner: 'bu alan çok karanlık')
   The strip sat on #060709 — near-black against a near-black page, so the
   marks had nothing to stand on and read as smudges whatever colour they
   were painted. The ground lifts to a lit console plate, the marks get a
   deliberate glow instead of borrowed opacity, and a hairline along the
   bottom edge separates the band from the card beneath it.                  */
body.mapless #cmd-vitals {
  background: linear-gradient(#14181b, #0c0f11) !important;
  border-bottom: 1px solid rgba(var(--gold-rgb),.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.nibiru.mapless #cmd-vitals {
  background: linear-gradient(#1a0d0a, #0d0605) !important;
  border-bottom-color: rgba(199,107,69,.5) !important;
}
/* the glyphs themselves: full strength, with a soft bloom in their own hue so
   a small mark still reads on a dark plate */
body.mapless #cmd-vitals .vt .vt-ic > svg,
#cmd-vitals .vt .vt-ic > svg {
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px rgba(217, 184, 119, .45));
}
body.mapless #cmd-vitals .vt-door svg, body.mapless #cmd-vitals .vt-face svg {
  filter: drop-shadow(0 0 4px rgba(216, 199, 168, .4)); }
/* the telemetry rule reads as a lit filament, not a painted line */
body.mapless #cmd-vitals .vt:not(.crit)::before {
  box-shadow: 0 0 9px color-mix(in srgb, var(--vc, var(--acc-hi)) 70%, transparent) !important; }
body.mapless #cmd-vitals .vt::after { background: rgba(255,255,255,.09) !important; }
body.mapless #cmd-vitals .vt:not(.crit)::after {
  background: color-mix(in srgb, var(--vc, var(--acc-hi)) 26%, transparent) !important; }
/* and the line under it all sits on the same lit plate */
body.mapless #cmd-vitals .vt-feed { color: #6fd8c8; }
/* the critical mark keeps its glow as a static paint under the breathing */
body.mapless #cmd-vitals .vt.crit .vt-ic > svg {
  filter: drop-shadow(0 0 7px rgba(230,85,46,.6)) !important; }
body.mapless #cmd-vitals .vt.crit { will-change: opacity; }

/* ---- A SHEET NEVER LOSES ITS HEAD (owner: 'bu alanın da üstü sığmıyor') -----
   Two faults, both only visible on a real phone. First, max-height was in vh,
   and on iOS Safari vh does NOT account for the browser chrome — so the box
   was sized taller than the area actually on screen. Second, the overlay
   centred it with align-items:center, and a flex item taller than its
   container overflows in BOTH directions: the half that gets cut is the top,
   which is exactly where the title and the close button live.

   The overlay scrolls instead, the box starts at the top when it is tall, and
   `margin: auto 0` still centres it when it is short. dvh is used where the
   box does keep a cap, because dvh is the one unit that tracks the chrome. */
#palace-sheet, #galaxy-sheet, #vhelp {
  align-items: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
}
.pal-box, .gal-box, .pr-box, .mk-box, .vh-box {
  max-height: none !important;
  overflow: visible !important;
  margin: auto 0 !important;
  flex: 0 0 auto;
}
/* the head stays put while the body scrolls under it */
.pal-head, .gal-head, .pr-head, .mk-head {
  position: sticky !important; top: 0; z-index: 5; }

/* ---- THE MARKS AT THE SIZE THEY WERE APPROVED AT (owner, 2026-08-21) --------
   'ben tam olarak bu ikonları istiyordum, bu büyüklükte'. The reference strip
   carries small, light glyphs — a spark, a crown, an open diamond, an eye —
   at roughly 24px, not the 33px slabs the console had grown. The doors match
   them, because in the reference every mark on the band is one size. The rule
   under each mark keeps the mark's own width.                               */
body.mapless #cmd-vitals .vt .vt-ic,
body.mapless #cmd-vitals .vt .vt-ic > svg,
#cmd-vitals .vt .vt-ic > svg { width: 24px !important; height: 24px !important; }
body.mapless #cmd-vitals .vt-door, body.mapless #cmd-vitals .vt-face {
  width: 26px !important; height: 26px !important; }
#cmd-vitals .vt-door svg, .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-face svg {
  width: 24px !important; height: 24px !important; }
/* a lighter band for lighter marks: less padding, tighter rule */
body.mapless #cmd-vitals .vt { padding-bottom: 7px; }
body.mapless #cmd-vitals .vt::after,
body.mapless #cmd-vitals .vt::before { height: 3px !important; }
body.mapless #cmd-vitals .vt-doors { gap: 12px !important; }
@media (max-width: 380px) {
  body.mapless #cmd-vitals .vt .vt-ic,
  body.mapless #cmd-vitals .vt .vt-ic > svg,
  #cmd-vitals .vt .vt-ic > svg { width: 21px !important; height: 21px !important; }
  #cmd-vitals .vt-door svg, .vt-doors .vt-door svg,
  body.mapless #cmd-vitals .vt-face svg { width: 21px !important; height: 21px !important; }
}

/* ---- AN ALARM DOES NOT ERASE THE INSTRUMENT --------------------------------
   The critical class was repainting the glyph red, so on an opening watch two
   of the four marks were the same alarm colour and the strip lost the four-
   colour reading the owner approved. A mark keeps its identity hue whatever
   state it is in — that is what makes it findable — and the alarm speaks in
   the two channels that do not cost the colour: it breathes, and its halo goes
   red. The rule under it still fills in the alarm colour, because THAT is the
   reading in trouble.                                                       */
body.mapless #cmd-vitals .vt .vt-ic > svg,
#cmd-vitals .vt .vt-ic > svg { fill: var(--vc, var(--acc-hi)) !important; }
body.mapless #cmd-vitals .vt.crit .vt-ic > svg {
  filter: drop-shadow(0 0 7px rgba(230,85,46,.85)) !important; }
body.mapless #cmd-vitals .vt.crit::before {
  background: #e6552e !important;
  box-shadow: 0 0 10px rgba(230,85,46,.9) !important; }
body.mapless #cmd-vitals .vt.crit::after {
  background: rgba(230,85,46,.28) !important; }

/* ---- THE BAND SITS ON ITS OWN CENTRE (owner: 'yukarıya hizalanmış') ---------
   Measured live at 430px: the marks ended at 41px and the line did not start
   until 62px — twenty-one pixels of nothing, which reads as the row being
   shoved up against the top edge. The gap closes and the doors drop to the
   marks' rule so both groups share one optical baseline.                    */
@media (max-width: 620px) {
  body.mapless #cmd-vitals .vt-feed {
    margin-top: 2px !important; padding-top: 5px !important; }
}
body.mapless #cmd-vitals { padding-top: 7px !important; padding-bottom: 6px !important; }
body.mapless #cmd-vitals .vt-door, body.mapless #cmd-vitals .vt-face {
  margin-bottom: 7px !important; }

/* ---- THE TRAVELLING LINE (owner: '02 KAYAN TELGRAF uygula') -----------------
   The Council's line rides the gap between the marks and the doors and runs
   right to left. The travel distance is set in pixels from JS (--bas is the
   container's right edge, --son is just past the text's own left edge), so a
   short sentence and a long one both enter from the same place and cross at
   the same reading speed.                                                    */
@keyframes vtSlide {
  from { transform: translateX(var(--bas, 100%)); }
  to   { transform: translateX(var(--son, -100%)); }
}
#cmd-vitals .vt-feed, #hdr-compact .vt-feed { overflow: hidden; }
#cmd-vitals .vt-feed > b, #hdr-compact .vt-feed > b {
  display: inline-block; white-space: nowrap; overflow: visible;
  text-overflow: clip; will-change: transform; }
/* the caret belongs to a typewriter, not to a telegraph — the leading mark
   stays because it says the channel is the Council's */
#cmd-vitals .vt-feed > em, #hdr-compact .vt-feed > em { display: none; }
#cmd-vitals .vt-feed > s, #hdr-compact .vt-feed > s { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  #cmd-vitals .vt-feed > b, #hdr-compact .vt-feed > b {
    animation: none !important; transform: none !important;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* ---- THE BAND AT THE PURSE'S BRIGHTNESS (owner, 2026-08-21) -----------------
   'yukarıdaki alanın parlaklığı bu para birimlerinin olduğu yerin parlaklığı
   ile aynı olsun'. The card's purse plate is the reference: a lit ground, a
   gold hairline, and figures at full strength. The band takes the same
   treatment — a lifted plate, a gold rule along its foot, and marks that are
   not dimmed on their way out.                                              */
body.mapless #cmd-vitals {
  background: linear-gradient(#1b2024, #10151800) !important;
  background-color: #171c20 !important;
  border-bottom: 1px solid rgba(var(--lit-rgb),.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
              0 2px 10px rgba(0,0,0,.5) !important;
  filter: none !important;
}
body.nibiru.mapless #cmd-vitals {
  background: linear-gradient(#241310, #14090700) !important;
  background-color: #1d0f0c !important;
  border-bottom-color: rgba(224,160,94,.5) !important;
}
/* the marks read at the same weight as the purse's figures */
body.mapless #cmd-vitals .vt .vt-ic > svg,
#cmd-vitals .vt .vt-ic > svg {
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vc, var(--acc-lit)) 60%, transparent)) !important;
}
body.mapless #cmd-vitals .vt-door, body.mapless #cmd-vitals .vt-face { opacity: 1 !important; }
body.mapless #cmd-vitals .vt-door svg, body.mapless #cmd-vitals .vt-face svg {
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent)) !important; }
/* the telegraph sits at reading brightness, not at hint brightness */
#cmd-vitals .vt-feed { color: #7fe0d0 !important; }
#cmd-vitals .vt-feed.gd { color: #8ef0b8 !important; }
#cmd-vitals .vt-feed.wr { color: #f0a860 !important; }
#cmd-vitals .vt-feed.bd { color: #ff6a44 !important; }

/* ---- THE INSTRUMENTS SIT ABOVE THE GLASS (owner: 'sence hepsi aynı
   parlaklıkta mı?' — no, they were not) --------------------------------------
   The CRT scanline sheet covers the whole shell at z-index 30, and it does not
   scale: its 2px black bands take a fixed bite out of whatever is under them.
   On the card's purse plate, drawn large, that bite is a texture. On a 24px
   glyph it eats a third of the mark — which is why the crown and the eye read
   as smudges next to figures that are, by measurement, the same colour.

   The strip is a device panel, not part of the screen the Council is watching
   through, so it goes above the glass. The card keeps its scanlines and its
   atmosphere; the instruments a commander reads are not filtered through the
   tube. Panels (z 540+) still open over everything.                          */
body.mapless #cmd-vitals { position: relative; z-index: 31; }

/* ---- THE GLASS STARTS BELOW THE INSTRUMENTS (owner: 'hala aynı') -----------
   The z-index fix in 360 did nothing, and the reason is a stacking context:
   #layout is position:relative with z-index 5, so the strip's z-index 31 is
   only meaningful INSIDE #layout. At .crt level the comparison is #layout (5)
   against .scanlines (30) — the glass wins every time, whatever the strip
   claims. Measured live: the scan sheet still covered the marks.

   So the sheet is moved instead of the strip. It begins at --deck-top, which
   is the strip's own measured bottom edge and is kept current twice a second,
   so the tube covers exactly what it should — the card and the world — and
   stops short of the panel the commander reads. In map mode the variable is
   unset and the sheet covers everything as before.                          */
body.mapless .scanlines { top: var(--deck-top, 0px) !important; }

/* ---- THE VIGNETTE STOPS AT THE PANEL TOO (owner, build 361: 'hala aynı') ----
   .crt::before is an inset box-shadow — 140px of 85%-opaque black creeping in
   from every edge — at z-index 40, which is above #layout's stacking context
   and therefore above the strip whatever the strip's own z-index says. The
   band sits along the TOP EDGE of the screen, i.e. inside the darkest part of
   that vignette, while the card's purse plate sits ~200px down where the
   vignette has all but faded. That is the whole answer to 'sence hepsi aynı
   parlaklıkta mı?': same hex, different amount of black painted over it.

   Both tube layers — the scanlines and the vignette — now begin at
   --deck-top, the strip's measured bottom edge. The tube covers the world and
   the card; it no longer reaches the instruments.                           */
body.mapless .crt::before { top: var(--deck-top, 0px) !important; }

/* ---- THE PURSE AS A STACK (owner's pick, 2026-08-21: 'yığını seçiyorum') ----
   Three rows down the card's left edge instead of one pill across its top. The
   pill said three different things in one gold, so the eye read them as a
   single mass of "money"; each row now carries its own name and its own hue —
   the same grammar the strip's marks got this session. A hairline grid holds
   them together (1px gaps over a gold ground) so it still reads as ONE control
   you can press, which matters: pressing it opens the asset statement.       */
#dc-purse {
  flex-direction: column !important; gap: 1px !important;
  align-items: stretch !important; padding: 1px !important;
  border-radius: 0 !important; background: rgba(var(--lit-rgb),.22) !important;
  border: 1px solid rgba(var(--lit-rgb),.45) !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px);
}
#dc-purse .cp-u {
  display: flex !important; align-items: center; gap: 8px;
  padding: 5px 10px; min-width: 116px; background: rgba(8,6,4,.94);
}
#dc-purse .cp-u svg { width: 15px !important; height: 15px !important;
  flex: none; color: inherit; fill: currentColor; }
#dc-purse .cp-u i {
  flex: 1; min-width: 0; font-style: normal; font-size: 11px;
  letter-spacing: .15em; color: #8d8375;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#dc-purse .cp-u b {
  flex: none; font-size: 13px !important; font-variant-numeric: tabular-nums;
  color: currentColor !important;
}
/* each holding in its own colour, so a price on the card finds its purse */
#dc-purse .cp-u[data-u="gold"]    { color: #e0b040; }
#dc-purse .cp-u[data-u="wallet"]  { color: var(--acc-lit); }
#dc-purse .cp-u[data-u="favor"]   { color: var(--acc-lit); }
#dc-purse .cp-u[data-u="insight"] { color: #8fd0ff; }
#dc-purse:hover { border-color: rgba(var(--lit-rgb),.75) !important; }
@media (max-width: 520px) {
  #dc-purse { gap: 1px !important; padding: 1px !important; }
  #dc-purse .cp-u { min-width: 108px; padding: 4px 9px; }
  #dc-purse .cp-u b { font-size: 12.5px !important; }
}

/* ---- THE SHEET'S HEAD, SQUARED UP (owner: 'X in hizalanması çok kötü') -----
   Two faults, both from making the head sticky in 348. Its horizontal padding
   had been lost (measured live: `padding: 0 0 8px`), so the crown on the left
   and the ✕ on the right were pressed flat against the box's own border with
   nothing to breathe into — the numbers said "1px inside the edge", which is
   exactly what looked wrong. And the head, being sticky, slid over the tab row
   underneath it and cut its top off.

   The head gets its padding back and a rule under it; the tabs become sticky
   too, docking directly beneath the head instead of passing under it. The ✕
   drops to a square that matches the head's own type size, set in from the
   edge by the same amount as the title.                                     */
.pal-head, .gal-head, .pr-head, .mk-head {
  padding: 11px 14px 9px !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(var(--gold-rgb),.3);
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.75);
}
.pal-head button, .gal-head button, .pr-head button, .mk-head button {
  flex: 0 0 32px !important; width: 32px; height: 32px; min-height: 0 !important;
  display: grid; place-items: center; padding: 0 !important;
  font-size: 14px !important; line-height: 1; border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px);
}
/* the tab row docks under the head rather than being slid over by it */
.pal-tabs { position: sticky; top: 52px; z-index: 4;
  background: #171208; padding: 9px 14px 9px !important;
  box-shadow: 0 6px 12px -8px rgba(0,0,0,.7); }
@media (max-width: 400px) {
  .pal-head, .gal-head, .pr-head, .mk-head { padding: 10px 12px 8px !important; }
  .pal-tabs { top: 49px; padding: 8px 12px !important; }
}

/* ---- THE TELEGRAPH IS ONE ROW, AND THE MARK HOLDS ITS GROUND ---------------
   Two faults in one screenshot. The line still carried the wrapping rule from
   when it lived on its own row (white-space: normal + line-clamp: 2), so a
   travelling sentence broke into two lines and clipped — measured live: 33px
   tall, 2 rows. And the Council's '>' sat in the same flex row as the text
   with no ground of its own, so the sliding words passed straight over it
   ('u>ırk'). One row now, and the mark gets an opaque ground plus a fade, so
   the text disappears INTO it rather than across it.                        */
#cmd-vitals .vt-feed > b, #hdr-compact .vt-feed > b {
  white-space: nowrap !important;
  -webkit-line-clamp: none !important;
  display: inline-block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}
#cmd-vitals .vt-feed > s {
  position: relative; z-index: 2; flex: none;
  padding-right: 7px; margin-right: -1px;
  background: linear-gradient(90deg,
    #171c20 0%, #171c20 62%, rgba(23,28,32,0) 100%);
}
body.nibiru.mapless #cmd-vitals .vt-feed > s {
  background: linear-gradient(90deg, #1d0f0c 0%, #1d0f0c 62%, rgba(29,15,12,0) 100%); }
/* and the row itself is centred on the band, not floating in it */
#cmd-vitals .vt-feed { align-items: center !important; }

/* ---- THE TRAVEL IS A CSS DEFAULT, NOT A JS INSTALL -------------------------
   Measured live on 365: the line was there, one row, correct — and standing
   still, with --bas unset, because the JS that installs the animation carries
   a generation guard and any newer write cancels it. Rebuilding the strip
   produces a fresh <b> with no animation at all, which is the same failure by
   another road. So the animation is declared HERE and always runs; JS only
   writes the three custom properties it reads. A line with no measurement yet
   still travels, using the fallbacks.                                        */
#cmd-vitals .vt-feed > b, #hdr-compact .vt-feed > b {
  animation: vtSlide var(--sure, 13s) linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  #cmd-vitals .vt-feed > b, #hdr-compact .vt-feed > b {
    animation: none !important; transform: none !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    max-width: 100% !important; }
}

/* ---- THE ARROW STANDS BESIDE THE TRACK, NOT IN IT --------------------------
   (owner: 'kayan yazının başındaki ok sanki yanlış durmuyor mu?') — it was.
   The Council's mark was a flex sibling of the sliding text, so the words
   travelled over it and kept going, and their tail came out on the LEFT of the
   arrow: 'ʟ> yılda yenide'. A gradient behind the mark only hid the crossing
   on one side. The text now runs inside its own clipped lane and the mark sits
   outside it — the words enter at the lane's right edge and vanish at its
   left, and the arrow is simply never in their path.                        */
#cmd-vitals .vt-feed, #hdr-compact .vt-feed {
  display: flex !important; align-items: center; gap: 7px;
}
#cmd-vitals .vt-feed > s, #hdr-compact .vt-feed > s {
  flex: none; background: none !important; padding: 0 !important;
  margin: 0 !important; position: static !important; z-index: auto !important;
}
.vt-run {
  flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden;
  height: 1.25em; display: block;
}
.vt-run > b {
  position: absolute; left: 0; top: 50%; margin-top: -0.62em;
  white-space: nowrap !important; will-change: transform;
}

/* the travel declaration has to follow the text into its new lane — with the
   wrapper in place, `.vt-feed > b` stops matching and the line stands still
   (measured live on 368: animation-name none, --bas correctly set at 125px) */
.vt-run > b {
  animation: vtSlide var(--sure, 13s) linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .vt-run > b { animation: none !important; transform: none !important;
    position: static !important; margin-top: 0 !important;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    white-space: nowrap !important; display: block !important; }
}

/* ---- THE CARD IN LANDSCAPE (owner: 'animasyon çok yukarıda kalıyor') -------
   Measured live at 844x390: the box was 272px tall and its contents ran to
   399px — 127px of overflow — with a 35px sigil block sitting ABOVE the scene
   and the scene itself asking for 322px of aspect ratio inside a 126px slot.
   The result reads exactly as the owner described: the picture pinned to the
   top with dead room under it and the rest of the card pushed past the edge.

   On a short landscape screen the card gives up what it can afford to: the
   sigil (the scene already says whose card this is), a third of the scene's
   height, and the air between blocks. The scene is centred in whatever slot
   it ends up with, so a painting that cannot fit is trimmed evenly top and
   bottom rather than hung from its ceiling.                                 */
@media (max-height: 560px) and (orientation: landscape) {
  #dc-eye { display: none !important; }
  .dc-scene.on {
    max-height: 30vh !important; min-height: 84px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
  }
  .dc-scene.on > #dc-art, #dc-scene .ca {
    max-height: 100% !important; width: auto !important; max-width: 100%;
    margin: 0 auto !important;
  }
  #dc-title { font-size: 17px !important; letter-spacing: .12em !important;
    margin: 7px 0 3px !important; }
  #dc-text { font-size: 13px !important; line-height: 1.5 !important;
    margin-bottom: 8px !important; padding-left: 10px !important; }
  #dc-ctx, #dc-cause { font-size: 11px !important; margin-bottom: 5px !important;
    padding-bottom: 5px !important; }
  #dc-options { gap: 6px !important; }
  .dc-opt { padding: 7px 11px !important; }
  .dc-opt .dc-odds { margin-bottom: 3px !important; font-size: 11px !important; }
  #dc-note { display: none !important; }
  /* the purse stack is three rows tall; on a short screen it takes the scene's
     whole left edge, so it tightens with everything else */
  #dc-purse .cp-u { padding: 3px 8px !important; }
  #dc-purse .cp-u b { font-size: 11.5px !important; }
  #dc-purse .cp-u svg { width: 13px !important; height: 13px !important; }
}
/* And a floor under the trimming: whatever is left after the cuts, the card is
   scrollable inside the space between the strip and the screen's foot, so no
   option can end up past the edge on a short landscape screen. The trims above
   remove ~85px of a measured 127px overflow; this covers the rest and anything
   a longer question adds. */
@media (max-height: 560px) and (orientation: landscape) {
  #decision .dc-box {
    max-height: calc(100dvh - var(--deck-top, 47px) - 10px) !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
}

/* ---- THE TRANSMISSION (owner: 'çok basit ilerliyor burası') ----------------
   A call to another species was a button press and one grey line at the top of
   the panel — the only place in the game where somebody ANSWERS you, and the
   quietest screen in it. The call now takes the stage: the kind's sigil in its
   own colour, a carrier that locks before they speak, their reply typed out
   under their name, and a ledger line saying what moved.                     */
#tx-scene { position: fixed; inset: 0; z-index: 620; display: flex;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(2,3,4,.82); animation: txIn .22s ease-out; }
#tx-scene.out { opacity: 0; transition: opacity .22s; }
/* ---- GORUNMEYEN KATMAN DOKUNUS ALMAZ (b964) ------------------------------
   Ayni kural .cine.out'a da yazildi (yukarida) ve sebebi orada anlatiliyor:
   tam ekran bir perde solarken ya da daha ACILMAMISKEN opacity'si 0 olabilir
   ama hala z-index'in tepesinde durur ve altindaki oyunun dokunuslarini yer.
   #cross-teklif bunun en kotu ornegiydi: varsayilan opacity 0, z-index 920,
   pointer-events auto -- yani `acik` sinifini giyene kadar gorunmez bir cam.
   Kural basit ve istisnasiz olmali: gozukmuyorsa dokunulmaz. */
#tx-scene.out, #cross-teklif:not(.acik), #irk-gecis.biter { pointer-events: none; }
@keyframes txIn { from { } to { opacity: 1; } }
.tx-box { width: min(94vw, 460px); max-height: 92dvh; overflow: auto;
  background: linear-gradient(#0e1114, #08090b);
  border: 1px solid color-mix(in srgb, var(--race) 55%, transparent);
  padding: 15px 16px 14px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: txBox .3s cubic-bezier(.2,.7,.3,1); }
@keyframes txBox { from { transform: translateY(10px) scale(.985); } to { transform: none; } }
.tx-top { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 11px; margin-bottom: 13px;
  border-bottom: 1px dashed rgba(var(--gold-rgb),.28); }
.tx-tag { font-size: 11px; letter-spacing: .2em; color: #8d8375; }
/* the carrier: flat until the line locks, then it moves */
.tx-wave { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.tx-wave s { width: 2px; height: 2px; text-decoration: none;
  background: color-mix(in srgb, var(--race) 70%, transparent); }
#tx-scene.live .tx-wave s { animation: txWave 1.1s ease-in-out infinite; }
.tx-wave s:nth-child(2){animation-delay:.08s} .tx-wave s:nth-child(3){animation-delay:.16s}
.tx-wave s:nth-child(4){animation-delay:.24s} .tx-wave s:nth-child(5){animation-delay:.32s}
.tx-wave s:nth-child(6){animation-delay:.40s} .tx-wave s:nth-child(7){animation-delay:.48s}
.tx-wave s:nth-child(8){animation-delay:.56s} .tx-wave s:nth-child(9){animation-delay:.64s}
@keyframes txWave { 0%,100% { height: 2px; } 50% { height: 12px; } }

.tx-face { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.tx-sig { flex: none; width: 54px; height: 54px; display: grid; place-items: center;
  color: var(--race); border: 1px solid color-mix(in srgb, var(--race) 50%, transparent);
  background: rgba(0,0,0,.4); }
.tx-sig svg { width: 30px; height: 30px; display: block; }
#tx-scene.live .tx-sig { box-shadow: 0 0 18px color-mix(in srgb, var(--race) 30%, transparent); }
.tx-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tx-who b { font-size: 15px; font-weight: 400; letter-spacing: .16em; color: var(--race); }
.tx-state { font-style: normal; font-size: 11px; letter-spacing: .13em; color: #6f6a5e; }
#tx-scene.live .tx-state { color: color-mix(in srgb, var(--race) 80%, white); }

/* what you said, then what they said back */
.tx-sent { display: flex; gap: 8px; padding: 9px 11px; margin-bottom: 10px;
  background: rgba(var(--lit-rgb),.06); border-left: 2px solid rgba(var(--lit-rgb),.5);
  font-size: 11.5px; letter-spacing: .1em; color: var(--w-lit); }
.tx-sent > s { text-decoration: none; flex: none; opacity: .6; }
.tx-reply { margin: 0 0 12px; padding: 11px 13px; min-height: 3.2em;
  background: rgba(0,0,0,.42);
  border-left: 2px solid color-mix(in srgb, var(--race) 60%, transparent);
  font-family: var(--read); font-size: 12.5px; line-height: 1.62;
  color: #d2cbbb; white-space: pre-wrap; }
.tx-ledger { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.tx-ledger span { padding: 4px 9px; font-size: 11px; letter-spacing: .12em;
  border: 1px solid rgba(var(--gold-rgb),.3); color: var(--w-stone);
  font-variant-numeric: tabular-nums; }
.tx-ledger .up { color: #7fe0a8; border-color: rgba(127,224,168,.45); }
.tx-ledger .dn { color: #e2564a; border-color: rgba(226,86,74,.45); }
.tx-first { margin-top: 9px; padding: 8px 11px; font-size: 11px; line-height: 1.5;
  color: var(--acc-lit); background: rgba(var(--lit-rgb),.07);
  border: 1px solid rgba(var(--lit-rgb),.3); }
#tx-close { display: block; width: 100%; margin-top: 13px; padding: 11px;
  background: none; border: 1px solid rgba(var(--gold-rgb),.35); color: var(--w-ash);
  font-family: inherit; font-size: 11.5px; letter-spacing: .18em; cursor: pointer; }
#tx-close:hover { border-color: var(--race); color: var(--race); }
@media (prefers-reduced-motion: reduce) {
  #tx-scene, .tx-box, .tx-wave s { animation: none !important; }
}

/* ---- ONE COLOUR PER PURSE, EVERYWHERE ---------------------------------------
   The plate had the company vault and your own pocket in the same gold, which
   is the pair a player most needs to tell apart — one pays the Council, the
   other builds your palace. Four distinct hues now, and the same four are used
   by the strip's readings and the palace plates.                            */
#dc-purse .cp-u[data-u="gold"]    { color: #e0b040; }  /* company — bronze gold */
#dc-purse .cp-u[data-u="wallet"]  { color: #f0d878; }  /* your pocket — bright  */
#dc-purse .cp-u[data-u="favor"]   { color: #e8a54a; }  /* favour — sun          */
#dc-purse .cp-u[data-u="insight"] { color: #8fd0ff; }  /* insight — moon        */
/* four rows fit the stack; the label column tightens to keep it narrow */
#dc-purse .cp-u { min-width: 122px; }
#dc-purse .cp-u i { font-size: 11px; letter-spacing: .13em; }
@media (max-width: 520px) { #dc-purse .cp-u { min-width: 114px; } }
/* one purse plate now, so it takes the row it used to share */
.pal-purse { grid-template-columns: 1fr !important; }
.pal-vault.wide { justify-content: space-between; }
.pal-edim.short { opacity: .5; cursor: default; }
/* two incomes on the plate: gold and the network */
#dc-purse .cp-u[data-u="politics"] { color: #c78ad0; }
#dc-purse .cp-u { min-width: 128px; }
.ph-pol { flex: none; padding: 4px 10px; font-size: 11px; letter-spacing: .14em;
  color: #c78ad0 !important; border: 1px solid rgba(199,138,208,.5);
  font-variant-numeric: tabular-nums; }
.ph-note { font-family: var(--read); font-size: 11px; line-height: 1.55;
  color: #8d8375; margin: -4px 2px 12px; }
.ph-btn .ph-t { flex: 1; min-width: 0; }
/* the palace floor carries the same two incomes as the card */
.pal-purse { grid-template-columns: 1fr 1fr !important; }
.pal-vault.pol b { color: #c78ad0; }
.pal-vault.pol { border-color: rgba(199,138,208,.45); }

/* ---- THE ARITHMETIC UNDER EACH INCOME (owner, 2026-08-21) ------------------
   'ne kadar sıklıkta ne kadar yükseldiği yazsın... nerelere harcanabileceği de
   yazsın'. A currency a player cannot forecast is a currency they hoard — which
   is precisely what happened to insight. Income lines are green and lead with
   +, the spend line is amber and leads with −, and every figure is read off
   the run in progress rather than off the design doc.                       */
.sp-blk { border-bottom: 1px solid rgba(var(--gold-rgb),.12); padding-bottom: 10px;
  margin-bottom: 10px; }
.sp-blk:last-child { border-bottom: 0; margin-bottom: 4px; }
.sp-eq { margin: 7px 0 0 25px; font-family: var(--read); }
.sp-eq p { margin: 0 0 4px; font-size: 11px; line-height: 1.5; }
.sp-eq b { font-weight: 400; font-variant-numeric: tabular-nums; }
.sp-eq i { font-style: normal; opacity: .72; font-size: 11px; }
.sp-in p { color: #86b89c; }
.sp-in b { color: #7fe0a8; }
.sp-out { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(var(--gold-rgb),.18); }
.sp-out p { color: var(--w-stone); }
.sp-blk .sp-row { border-bottom: 0; padding-bottom: 4px; }
/* THE TEXT SITS ON THE ARROW'S LINE (owner: 'okun yanına hizalanması gerekiyor,
   sanki yazı çok yukarıda gibi'). It was pinned with top:50% and a negative
   em margin — a guess at half a line, and wrong for the actual font metrics.
   It could not use translateY either, because the travel animation owns
   transform. Stretching the box top-to-bottom and centring the text inside it
   needs neither: the lane's own height does the alignment. */
.vt-run > b {
  top: 0 !important; bottom: 0 !important; margin-top: 0 !important;
  display: flex !important; align-items: center;
}

/* ---- THE ARROW SHARES THE TEXT'S BASELINE (owner, 2026-08-22: 'bu okun
   yazının ortasında olmasında gerekmiyor mu hizalama olarak') --------------
   The travelling text is not a normal inline box: it is stretched top-to-bottom
   inside the 1.25em lane above and flex-centred there. The '>' beside it was a
   plain flex item of the feed, centred against a different box, and the two
   ended up on DIFFERENT BASELINES — measured live at 375x812: arrow baseline
   y=26.75, text baseline y=23.50, 3.25px apart. That gap is what reads as the
   arrow sitting off the middle of the words.

   Giving the marker the same lane height and the same centring puts both
   glyphs on one baseline, and from there the typeface does the rest: in Plex
   Mono the '>' is drawn on the math axis, 3.55px above the baseline at this
   size, against an x-height centre of 3.05px — half a pixel apart. No optical
   nudge is needed once the baselines agree, and none is applied, because a
   hand-tuned offset would drift the moment the font size changes. */
#cmd-vitals .vt-feed > s,
#hdr-compact .vt-feed > s {
  height: 1.25em; line-height: 1;
  display: flex; align-items: center;
}

/* ============================================================================
   TERMINAL + THE ODDS AS A FRAME (owner's picks, 2026-08-21)
   '01 TERMİNAL olsun, her bir şans durumunun kendine has rengi olsun...
    şıkkın içinden şans yazılarını çıkarıp şans durumuna göre şıkkın
    çerçevesinin rengini değiştir, bu sayede alandan kazan'
   ========================================================================== */

/* ---- 01 TERMINAL: the whole card face speaks in one mono ------------------
   The body used to be the system sans while everything around it was mono, so
   the card had two unrelated voices — and neither was chosen, because the
   named faces were never downloaded. One family now, actually fetched. */
#dc-text {
  font-family: var(--font) !important;
  font-size: 12.5px !important; line-height: 1.72 !important;
  letter-spacing: .01em !important;
}
#dc-title { font-weight: 500; letter-spacing: .24em; }
.dc-opt, .dc-label { font-weight: 500; letter-spacing: .05em; }

/* ---- THE ODDS ARE THE FRAME ----------------------------------------------
   Green high, gold fair, amber low. The border alone carries colour weakly at
   1px, so the tier also rides an inner rail down the left edge — that rail is
   what actually reads at arm's length — and tints the option's text, which
   keeps the tiers apart for a colour-blind player too. */
.dc-opt.talih { position: relative; }
.dc-opt.t-hi  { border-color: #3fe0a0 !important; color: #bff0da !important;
                box-shadow: inset 3px 0 0 #3fe0a0, 0 4px 0 #2b2317, 0 5px 11px rgba(0,0,0,.48); }
.dc-opt.t-ok  { border-color: var(--acc-lit) !important; color: #f0e0ac !important;
                box-shadow: inset 3px 0 0 var(--acc-lit), 0 4px 0 #2b2317, 0 5px 11px rgba(0,0,0,.48); }
.dc-opt.t-lo  { border-color: #e8843c !important; color: #f0c49c !important;
                box-shadow: inset 3px 0 0 #e8843c, 0 4px 0 #2b2317, 0 5px 11px rgba(0,0,0,.48); }
.dc-opt.t-hi:hover { background: rgba(63,224,160,.07); }
.dc-opt.t-ok:hover { background: rgba(var(--lit-rgb),.07); }
.dc-opt.t-lo:hover { background: rgba(232,132,60,.07); }
/* the author-dice pips keep their place, without the words that framed them */
.dc-cent-wrap { display: block; margin-top: 5px; }

/* ---- THE SEAL SPEAKS THICKER THAN THE ODDS -------------------------------
   Both the tier and the outcome are colours on the same border, so they are
   told apart by WEIGHT: odds are a hairline, a sealed result is 3px. */
.dc-opt.sealed-ok, .dc-opt.sealed-fail { border-width: 3px !important; }
.dc-opt.sealed-ok { border-color: #7fe0a8 !important; box-shadow: inset 3px 0 0 #7fe0a8, 0 4px 0 #2b2317, 0 5px 11px rgba(0,0,0,.48); }
.dc-opt.sealed-fail { border-color: #e6552e !important; box-shadow: inset 3px 0 0 #e6552e, 0 4px 0 #2b2317, 0 5px 11px rgba(0,0,0,.48); }

/* ---- THE ODDS KEY IS GONE (owner, 2026-08-22) -----------------------------
   The strip that taught the frame colours under the first five cards. Its
   builder was removed from main.js; the rules went with it so nothing can
   bring it back by setting a class. `.dc-key` carried `display:flex
   !important`, which would have overridden the hiding rule if any old code
   path ever re-applied the class. */

/* ---- THE STATEMENT, AS THE OWNER DREW IT (2026-08-21) ----------------------
   Each income line is a ledger row: name on the left, leader dots across the
   gap, figure on the right in the currency's own colour. A condition (a streak
   running, a ledger shut) gets a tag under its line rather than a parenthesis
   inside the sentence. The spends are a framed block with their own heading,
   because they answer a different question than the income does.           */
.sp-ln { display: flex; align-items: baseline; gap: 7px; margin: 0 0 3px;
  font-family: var(--read); font-size: 11px; line-height: 1.5; }
.sp-ln::before { content: '+'; flex: none; color: #7fe0a8; font-family: var(--font); }
.sp-t { flex: none; color: #b8b2a4; max-width: 68%; }
.sp-ln > s { flex: 1; min-width: 12px; text-decoration: none; height: 1px;
  align-self: center; border-bottom: 1px dotted rgba(var(--gold-rgb),.32); }
.sp-ln > b { flex: none; font-weight: 400; font-family: var(--font); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.sp-blk[data-u="wallet"]   .sp-ln > b { color: #f0d878; }
.sp-blk[data-u="politics"] .sp-ln > b { color: #c78ad0; }
.sp-tag { display: inline-block; margin: 1px 0 7px; padding: 2px 7px;
  font-family: var(--font); font-size: 11px; letter-spacing: .13em;
  border: 1px solid currentColor; color: #8d8375; }
.sp-blk[data-u="wallet"]   .sp-tag { color: #a8894a; }
.sp-blk[data-u="politics"] .sp-tag { color: #9a6ea6; }
.sp-out { margin-top: 9px; padding: 9px 11px; border-top: 0 !important;
  background: rgba(12,10,7,.55); border-left: 2px solid rgba(var(--gold-rgb),.45); }
.sp-blk[data-u="politics"] .sp-out { border-left-color: rgba(199,138,208,.5); }
.sp-out > b { display: block; margin-bottom: 5px; font-weight: 400;
  font-family: var(--font); font-size: 11px; letter-spacing: .13em; color: #8d8375; }
.sp-out > p { margin: 0; font-family: var(--read); font-size: 11px;
  line-height: 1.6; color: var(--w-stone); }
.sp-blk { padding-bottom: 13px; margin-bottom: 13px; }
.sp-blk .sp-n { font-size: 13px; letter-spacing: .18em; }
.sp-blk .sp-row > b { font-size: 15px; }

/* ---- THE SCENE FILLS THE SCREEN (owner: 'altında devasa bir siyah boşluk var
   neden o ekranı tam kaplamıyor?') ------------------------------------------
   #worldview is the world canvas and its pixel buffer is fixed by the map grid
   (64x40 tiles at 13px = 832x520, a 1.6:1 picture). A phone held upright is
   about 0.5:1. Stretched to the viewport that buffer either distorts or, with
   the browser honouring its intrinsic ratio, sits as a band across the top
   with black under it — which is what the owner is looking at.

   object-fit lets the buffer keep its shape and CROP instead: the scene is
   scaled until it covers the screen and the overflow is trimmed evenly from
   both sides. A cinematic wants to fill the frame; losing the far edges of a
   tile map for five seconds costs nothing.                                  */
body.mapless.scene-on #worldview {
  object-fit: cover !important; object-position: center !important;
  width: 100vw !important; height: 100dvh !important;
}

/* ---- THE SEALED CARD HAS NO DEAD FLOOR (owner: 'animasyonun altındaki bu
   boşluk normal mi?') --------------------------------------------------------
   The card box is height:100dvh and a flex column. While the question is being
   asked every block earns its place; the moment it is sealed the title and the
   text withdraw and what is left — the picture and the chosen option — sits at
   the top with the rest of the screen black beneath it.

   The scene takes that space. Its height cap and its aspect lock are released
   only in the sealed state, so the picture grows into the floor the withdrawn
   text left behind, and the sealed option rides at the bottom edge. It also
   happens to be the right beat: the decree is signed, and the picture is the
   only thing still speaking.                                                */
.dc-box.muhurlu .dc-scene.on {
  max-height: none !important; min-height: 0 !important;
  flex: 1 1 auto !important; aspect-ratio: auto !important;
  display: block !important;          /* same stack, same reason */
}
.dc-box.muhurlu .dc-scene.on > #dc-art,
.dc-box.muhurlu #dc-scene .ca {
  width: 100% !important; height: 100% !important;
  max-height: none !important; object-fit: cover;
}
.dc-box.muhurlu #dc-options { margin-top: auto; }

/* ---- THE PICTURE TAKES THE EMPTY FLOOR, ALWAYS ----------------------------
   Measured live at 430x900: the card box is 853px tall and its content ended
   at 512px — 341px of black under it, and the same gap was there BEFORE the
   seal, so it was never about sealing at all. The box is height:100dvh by
   design (it is a full-screen sheet on a phone) and the scene was pinned to
   36vh with flex-grow 0, so nothing could claim the rest.

   The scene grows into it instead: grow 1 so it takes the slack, shrink 6 so
   a long question still wins the space it needs, and the aspect lock released
   so a tall screen gets a tall picture rather than a letterboxed one. On a
   short landscape screen the earlier cap still applies.                     */
body.mapless .dc-scene.on {
  flex: 1 6 auto !important; max-height: none !important;
  aspect-ratio: auto !important; min-height: 132px !important;
  /* NOT display:flex. The slot is a STACK - the ground, the plate, the purse,
     the gear and the '?' all live in it and every one of them is positioned
     against it. Making it a flex row laid the ground and the plate out SIDE
     BY SIDE and the card showed two half-pictures (owner's screenshot). It
     stays a block; the plate is what fills it. */
  display: block !important; position: relative; overflow: hidden;
}
body.mapless .dc-scene.on > #dc-art,
body.mapless #dc-scene .ca {
  width: 100% !important; height: 100% !important;
  max-height: none !important; object-fit: cover;
}
@media (max-height: 560px) and (orientation: landscape) {
  body.mapless .dc-scene.on { flex: 0 6 auto !important; max-height: 30vh !important; }
}

/* ---- SEFER DEFTERİ: the campaign map --------------------------------------
   A sheet of paper on the console's dark table. The chrome keeps the game's
   own tokens; the paper is the one bright surface in the build, which is the
   point — you put a map down under a lamp, you do not back-light it.
   NO SECOND LINE OF TYPE ON THE PAPER. Names only; every state is a mark and
   the waiting count is an app-icon badge (owner: "yazı yerine belirli
   işaretlerle ... notification badge tarzı bir şey"). */
.sefer { position: fixed; inset: 0; z-index: 620; display: flex; flex-direction: column;
  background: #060709; overflow-y: auto; }
.sefer.hidden { display: none; }
.sf-ust { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: #0c0a06; position: sticky; top: 0; z-index: 2; }
.sf-ust b { color: var(--gold); letter-spacing: .2em; font-size: 13px; }
.sf-ust #sf-ozet { margin-left: auto; font-size: 11px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }
.sf-ust #sf-ozet b { color: var(--gold); font-size: 11px; letter-spacing: 0; }
#sf-kapat { font-family: var(--font); font-size: 11px; letter-spacing: .1em; cursor: pointer;
  padding: 6px 10px; color: var(--ink); background: #12100a; border: 1px solid var(--line); }
#sf-kapat:hover { color: var(--gold); border-color: var(--gold-dim); }

.sf-masa { display: grid; gap: 12px; padding: 12px; grid-template-columns: minmax(0, 1fr);
  align-items: start; }
@media (min-width: 900px) { .sf-masa { grid-template-columns: minmax(0, 1fr) 300px; } }

.sf-kagit { position: relative; overflow: hidden; border: 1px solid #3a3120;
  background: radial-gradient(120% 90% at 22% 8%, #d6c9a8 0%, #c9ba95 46%, #b6a67f 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.6); }
.sf-kagit svg { display: block; width: 100%; height: auto; }
.sf-kagit::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 33.1%, rgba(90,76,51,.18) 33.3%, transparent 33.5%),
    linear-gradient(90deg, transparent 66.4%, rgba(90,76,51,.14) 66.6%, transparent 66.8%),
    linear-gradient(0deg,  transparent 49.6%, rgba(90,76,51,.14) 49.8%, transparent 50%),
    radial-gradient(38% 30% at 96% 4%, rgba(120,96,52,.22), transparent 70%); }

/* THE PLACE CARD (Gemini node-card, owner-approved 2026-08-24): tactical
   bracket corners, a pulsing dot on the status tag, the title under a soft
   glow, the lore fenced off with a dashed rule, and label/value rows pushed
   to opposite edges. */
.sf-panel { background: #141210; border: 1px solid #3a3225; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px; position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.8), inset 0 0 20px rgba(0,0,0,.5); }
.sf-panel::before, .sf-panel::after { content: ''; position: absolute;
  width: 12px; height: 12px; border: 2px solid var(--w-tan); opacity: .5; }
.sf-panel::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.sf-panel::after { bottom: 0; right: 0; border-left: none; border-top: none; }
.sf-rozet-ad { align-self: flex-start; display: inline-flex; align-items: center;
  gap: 8px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid #7a7366; color: var(--w-tan);
  background: rgba(207,168,100,.05); }
.sf-rozet-ad::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--w-tan); animation: sfNabiz 1.5s infinite; }
@keyframes sfNabiz {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--w-tan); }
  50% { opacity: .2; box-shadow: none; } }
.sf-panel h3 { margin: 0; color: var(--w-tan); font-size: 18px; font-weight: bold;
  letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(207,168,100,.2); }
.sf-tanim { margin: 0; font-size: 12.5px; line-height: 1.6; color: #7a7366;
  padding-bottom: 14px; border-bottom: 1px dashed #3a3225; }
.sf-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px;
  font-size: 11px; font-variant-numeric: tabular-nums; }
.sf-panel dt { font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #7a7366; align-self: center; }
.sf-panel dd { margin: 0; color: #e0dcd3; font-weight: bold; letter-spacing: 1px;
  text-align: right; }
.sf-panel dd.sf-teh { color: #c05a3c; }
.sf-kapilar { display: flex; flex-direction: column; gap: 4px; }
.sf-kapi { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 9px; border: 1px solid var(--line); background: #12100a; font-size: 11px; }
.sf-kapi b { color: var(--gold); letter-spacing: .14em; }
.sf-kapi span { color: var(--ink-dim); font-size: 11px; text-align: right; }
.sf-kapi.sf-zorla b { color: #c05a3c; }
.sf-git { width: 100%; padding: 14px 0; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase;
  color: #000; background: var(--w-tan); border: 1px solid var(--w-tan);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.sf-git::before { content: '> '; opacity: 0; transition: opacity .2s ease; }
.sf-git::after { content: ' <'; opacity: 0; transition: opacity .2s ease; }
.sf-git:hover:not(:disabled) { background: transparent; color: #e8c488;
  border-color: #e8c488; box-shadow: 0 0 15px rgba(207,168,100,.2); }
.sf-git:hover:not(:disabled)::before, .sf-git:hover:not(:disabled)::after { opacity: 1; }
.sf-git:disabled { color: var(--ink-dim); background: #12100a; border-color: #3a3225;
  cursor: default; letter-spacing: .1em; font-weight: normal; }
@media (prefers-reduced-motion: reduce) {
  .sf-rozet-ad::before { animation: none; }
  .sf-git, .sf-git::before, .sf-git::after { transition: none; }
}

/* ink on the paper */
.sf-pin { cursor: pointer; }
.sf-pin:focus-visible > .sf-vurus { stroke: var(--acc-deep); stroke-width: 2.5; }
.sf-ad { font-family: var(--font); font-weight: bold; font-size: 12px; letter-spacing: .08em;
  fill: #2b2418; paint-order: stroke; stroke: rgba(214,201,168,.85); stroke-width: 3px;
  stroke-linejoin: round; }
.sf-ad.sf-sonuk { fill: var(--w-moss); }
.sf-rozet { font-family: var(--font); font-weight: bold; font-size: 9px; fill: var(--acc-pale); letter-spacing: 0; }
.sf-soru { font-family: var(--font); font-size: 9px; fill: var(--w-moss); }
.sf-olcek { font-family: var(--font); font-size: 8px; letter-spacing: .2em; fill: var(--w-moss); }
@media (prefers-reduced-motion: no-preference) {
  .sf-rota { stroke-dasharray: 5 4; animation: sfYuru 1.1s linear infinite; }
  @keyframes sfYuru { to { stroke-dashoffset: -18; } }
}
/* .sf-kum (− / + / ⛶) removed with its markup — pinch and double-tap do it. */
.sf-kagit { touch-action: none; cursor: grab; }
.sf-kagit:active { cursor: grabbing; }
.sf-bos { margin: 0; font-size: 11px; line-height: 1.55; color: var(--ink-dim); }
.sf-bos b { display: block; margin-top: 6px; color: var(--gold-dim); font-weight: normal;
  font-size: 11px; letter-spacing: .06em; }

/* THE GLOBE IN THE MIDDLE OF THE CONSOLE BAR.
   It takes the slot the council ticker used to scroll through — the map is the
   screen the run opens on and keeps coming back to, so it gets the one place on
   the bar the eye lands on first. Deliberately larger than its neighbours and
   allowed to hang a little below the rule ("hafif aşağı doğru da taşabilir"),
   which is what makes it read as the anchor rather than the fifth of eight
   equal buttons. Nothing else on the bar changes size or position. */
#hdr-compact .h-globe {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; margin: 0 2px;
  border: none; background: none; color: var(--gold);
  transform: translateY(3px);
}
#hdr-compact .h-globe svg { width: 30px; height: 30px; display: block; }
#hdr-compact .h-globe:hover { color: #e8d29a; }/* press handled by MÜHÜR */

#hdr-compact .h-globe:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
/* the ring that says "this one is a place, not a switch" */
#hdr-compact .h-globe::before {
  content: ''; position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold-dim); opacity: .5; pointer-events: none;
}
#hdr-compact .h-globe { position: relative; }

/* THE GLOBE IN THE STRIP'S GAP.
   Drawn as one of the strip's own doors so it borrows their box, their
   currentColor stroke and their hit target — the four marks on the left and the
   three doors on the right are untouched, which was the owner's condition
   ("attığım ekran görüntüsündeki ikonlara dokunma"). Only two things separate
   it from its siblings: it is a touch larger, and it hangs two pixels lower, so
   the eye reads it as the way OUT of this screen rather than the eighth switch
   on it. */
.vt-mid { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.vt-door.vt-globe { width: 34px; height: 34px; color: var(--gold);
  transform: translateY(2px); border-color: transparent; background: none; }
.vt-door.vt-globe svg { width: 26px; height: 26px; }
.vt-door.vt-globe:hover { color: #e8d29a; }/* press handled by MÜHÜR */


/* OPTION 2, THE OWNER'S PICK: 38px globe, hanging ten pixels below the strip.
   Roughly twice its neighbours, so "this is the way out" reads without a label;
   still clear of the card edge below and of the four reading bars to its left,
   which is where option 3 started needing a disc behind it to survive. */
.vt-door.vt-globe { width: 44px; height: 44px; transform: translateY(10px); }
.vt-door.vt-globe svg { width: 38px; height: 38px; }/* press handled by MÜHÜR */

/* the count of places with a conversation waiting — the map's own badge, moved */
.vt-globe-rozet {
  position: absolute; top: 0; right: -2px; min-width: 19px; height: 19px;
  padding: 0 4px; border-radius: 10px; box-sizing: border-box;
  background: var(--acc-deep); border: 2px solid var(--t-panel, #0f0d16);
  color: var(--acc-pale); font-family: var(--font); font-size: 11px; font-style: normal;
  line-height: 15px; text-align: center; letter-spacing: 0; pointer-events: none;
}
.vt-door.vt-globe { position: relative; overflow: visible; }
#cmd-vitals, #cmd-vitals .vt-mid { overflow: visible; }

/* THE PURSE DOOR, ONE TONE BACK FROM THE PALACE.
   Four doors in a row all in the same gold read as one block; the eye could not
   count them. Kasa and saray stay related (both are your own holdings) but not
   identical, orbit is blue and the commander grey — so the row separates into
   four things at a glance, the way the four reading marks on the left already
   do. Spacing came down from 12px to 9px so nine marks fit a 375px phone; if it
   still crowds, the icon shrinks before the gap does. */
.vt-door.vt-kasa { color: #a98b4a; }
.vt-door.vt-kasa:hover { color: var(--gold); }
body.mapless #cmd-vitals .vt-doors { gap: 9px; }

/* THE GLOBE'S SIZE NEEDED THE STRIP'S OWN SPECIFICITY.
   `body.mapless #cmd-vitals .vt-door` is a three-part selector and beat the
   plain `.vt-door.vt-globe` rules above, so the globe kept the doors' 24px box
   and its badge was clipped by their overflow — the owner's screenshot shows a
   small ringed globe with no count. Same declarations, matched weight. */
body.mapless #cmd-vitals .vt-door.vt-globe {
  width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px;
  transform: translateY(10px); color: var(--gold);
  border: none; background: none; overflow: visible; position: relative;
  padding: 0; display: flex; align-items: center; justify-content: center;
}
body.mapless #cmd-vitals .vt-door.vt-globe svg { width: 38px; height: 38px; }/* press handled by MÜHÜR */

body.mapless #cmd-vitals .vt-mid { flex: 1; display: flex; align-items: center;
  justify-content: center; min-width: 0; overflow: visible; }
body.mapless #cmd-vitals { overflow: visible; }

/* ---- THE GLOBE, AGAINST THE STRIP'S OWN !important WALL --------------------
   Three earlier rules were beating the globe and none of them were visible from
   where I was writing: `#cmd-vitals .vt-door svg` forces 33px with !important,
   the phone breakpoint forces the door box with !important, and every door
   carries `margin-bottom: 8px !important` to sit on the readings' optical line.
   So the globe kept the doors' box and could not overhang. Matched flag for
   flag — this is the one place in the file where !important is the correct
   answer, because the wall it is arguing with is built of them. */
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe {
  width: 46px !important; height: 46px !important; min-width: 46px !important;
  flex: 0 0 46px !important; margin-bottom: 0 !important;
  transform: translateY(9px) !important;
  border: none !important; background: none !important; padding: 0 !important;
  overflow: visible !important; position: relative !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--gold) !important; opacity: 1 !important;
}
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe svg {
  width: 40px !important; height: 40px !important; margin: 0 !important;
}/* press handled by MÜHÜR */

body.mapless #cmd-vitals .vt-mid { flex: 1 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  min-width: 0 !important; overflow: visible !important; }
body.mapless #cmd-vitals { overflow: visible !important; }

/* ---- THE FOUR DOORS ON ONE LINE -------------------------------------------
   They were four different boxes: the three .vt-door glyphs at 38px with 33px
   art, the commander .vt-face at 33px with 33px art, and each SVG carrying its
   own padding inside its viewBox. Same box, same art size, centred — so the row
   reads as one row (owner: "ikon yükseklikleri hizalı değil"). */
body.mapless #cmd-vitals .vt-doors { align-items: center !important; }
body.mapless #cmd-vitals .vt-doors .vt-door,
body.mapless #cmd-vitals .vt-doors .vt-face {
  width: 34px !important; height: 34px !important;
  margin-bottom: 8px !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body.mapless #cmd-vitals .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg {
  width: 26px !important; height: 26px !important; margin: 0 !important;
  object-fit: initial !important;
}

/* ---- THE GLOBE HANGS THROUGH THE RULE ------------------------------------
   The reference the owner drew has it crossing the band's bottom border, half
   in and half out. Two things make that work and I had neither: it has to fall
   far enough to actually cross (9px only lowered it inside the band), and the
   band's own border has to stop at its edge — otherwise a hairline runs across
   the globe. The disc behind it is the strip's exact background (#060709), so
   the rule ends where the globe begins and resumes on the other side. */
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe {
  transform: translateY(18px) !important; z-index: 3 !important;
}
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe::before {
  content: ''; position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: #060709; z-index: -1; pointer-events: none;
}
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe svg { position: relative; z-index: 1; }/* press handled by MÜHÜR */

/* the badge rides the globe's shoulder, above the disc */
body.mapless #cmd-vitals .vt-globe-rozet { z-index: 2; border-color: #060709; }

/* ---- THE GLOBE LEAVES THE ROW TO HANG ------------------------------------
   Pushing it with `transform` was the wrong tool twice: the band's height is
   set by its tallest child, so a 46px globe made the band taller and then the
   shove happened INSIDE the taller band — the globe kept landing back on the
   line instead of crossing it. Taking it out of flow ends that argument. The
   band measures itself without it, and the globe is pinned to the band's own
   bottom edge and hangs a fixed distance past it, which is what the owner drew.
   .vt-mid stays in the row as the empty space that keeps the two icon groups
   apart, so nothing else has to move. */
body.mapless #cmd-vitals { position: relative; }
body.mapless #cmd-vitals .vt-mid { position: static !important; }
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe {
  position: absolute !important;
  left: 50% !important; top: auto !important; bottom: -20px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important; z-index: 5 !important;
}/* press handled by MÜHÜR */


/* ---- ONE GAP, BOTH SIDES --------------------------------------------------
   The readings ran at 16px and the doors at 10px, so the two groups were
   spaced by different rules and read as two different rhythms (owner:
   "sağdakiler daha açık soldakiler daha yapışık"). Same number on both sides,
   and the same number again at the phone breakpoint. */
body.mapless #cmd-vitals { gap: 13px !important; }
body.mapless #cmd-vitals .vt-doors { gap: 13px !important; }
@media (max-width: 520px) {
  body.mapless #cmd-vitals { gap: 11px !important; }
  body.mapless #cmd-vitals .vt-doors { gap: 11px !important; }
}

/* ---- THE GAP THE EYE SEES, NOT THE GAP IN THE RULE ------------------------
   Both sides were already set to the same `gap`, and the two groups still read
   differently, because a door is a 34px box holding 26px of art — four pixels
   of padding on each side that the eye adds to the gap. The readings have no
   such padding. So the doors were carrying 13 + 8 and the marks 13. The box is
   the art now; the declared gap is the whole gap on both sides. */
body.mapless #cmd-vitals .vt-doors .vt-door,
body.mapless #cmd-vitals .vt-doors .vt-face {
  width: 27px !important; height: 27px !important;
}
body.mapless #cmd-vitals .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg {
  width: 27px !important; height: 27px !important;
}

/* ---- THE GLOBE WAS NEVER CLIPPED — IT WAS COVERED -------------------------
   Measured on the live page: the globe's bottom sits at 68px, the band's at 49,
   and every ancestor up to <body> is overflow:visible. Nothing cut it. What was
   happening is that the band sits at z-index 31 and the surface below it paints
   later, so the overhanging fifth of the globe was simply painted over — which
   looks exactly like a clean horizontal cut. Four attempts went into opening
   overflows that were already open. The band is raised instead, still under the
   intro overlay at 50 so nothing about the opening screens changes. */
body.mapless #cmd-vitals { z-index: 48 !important; }

/* ---- SAME RHYTHM, NOT JUST THE SAME GAP -----------------------------------
   Also measured: both gaps were already 11px. The groups still read
   differently because the boxes were not the same size — readings 21px, doors
   27px — so the right-hand group covered more width for the same count and
   looked airier. The doors come down to the readings' box. */
body.mapless #cmd-vitals .vt-doors .vt-door,
body.mapless #cmd-vitals .vt-doors .vt-face,
body.mapless #cmd-vitals .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg {
  width: 22px !important; height: 22px !important;
}

/* ---- TWO PLATES, ONE ON EACH SIDE ------------------------------------------
   The owner's sketch: the readings sit inside a framed plate, the doors inside
   another, and the globe hangs in the gap between them. Loose glyphs in a bare
   band read as scatter — a frame tells the eye these four belong together, and
   it buys room to space them without the two groups sliding apart. */
body.mapless #cmd-vitals .vt-group,
body.mapless #cmd-vitals .vt-doors {
  display: flex !important; align-items: center !important;
  gap: 15px !important; padding: 5px 11px 4px !important;
  background: #101018 !important;
  border: 1px solid rgba(var(--t-rgb), .22) !important;
  border-radius: 11px !important;
}
body.mapless #cmd-vitals { gap: 8px !important; padding: 8px 10px 7px 10px !important; }
body.mapless #cmd-vitals .vt-group .vt { margin: 0 !important; }
@media (max-width: 520px) {
  body.mapless #cmd-vitals .vt-group,
  body.mapless #cmd-vitals .vt-doors { gap: 12px !important; padding: 5px 8px 4px !important; }
  body.mapless #cmd-vitals { gap: 6px !important; }
}

/* the globe, re-parented to <body> so it can hang past every layer in #layout */
.vt-globe-free {
  position: fixed !important; z-index: 60 !important;
  transform: translateX(-50%) !important;
  width: 46px !important; height: 46px !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
  background: none !important; color: var(--gold) !important; cursor: pointer;
  display: flex !important; align-items: center; justify-content: center;
  overflow: visible !important;
}
.vt-globe-free svg { width: 40px !important; height: 40px !important; position: relative; z-index: 1; }
.vt-globe-free::before {
  content: ''; position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: #060709; z-index: -1;
}/* press handled by MÜHÜR */


/* ---- THE BOXES WERE ALIGNED; THE DRAWINGS WERE NOT ------------------------
   Measured on the live band: all four doors occupy exactly the same 22px box,
   top 14 to bottom 36. What differs is how much of its own viewBox each glyph
   fills — ink heights came out 19.6 (kasa), 21.3 (saray), 14.8 (orbit) and
   18.5 (commander), and a 6.5px spread between neighbours is what the eye
   calls "hizasız". Sizing the boxes again would not have touched it; that is
   why the last two attempts changed nothing.
   Each glyph is scaled to a 20px ink height and nudged so its ink centre lands
   on the box centre. The factors are measurement / target, not taste. */
body.mapless #cmd-vitals .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg { overflow: visible; }
body.mapless #cmd-vitals .vt-doors [data-nav="kasa"] svg   { transform: translateY(0.10px) scale(1.020); }
body.mapless #cmd-vitals .vt-doors [data-nav="palace"] svg { transform: translateY(-0.14px) scale(0.939); }
/* 1.351 was computed for the old spiral; the ring-and-body glyph that replaced
   it is naturally wide, and the stale factor blew it to 28px in a 22px box
   while its neighbours held 18-20. Width is the constraint for this one. */
body.mapless #cmd-vitals .vt-doors [data-nav="galaxy"] svg { transform: scale(1.15); }
body.mapless #cmd-vitals .vt-doors .vt-face svg            { transform: translateY(-0.70px) scale(1.081); }

/* ---- THE MAP HAS NO HEADER OF ITS OWN -------------------------------------
   The console band is the navigation, everywhere. The paper's old bar carried a
   back arrow to a screen you cannot return to, a title for a screen that fills
   the display, and a count the globe's badge already gives — so it went. Only
   the zoom cluster survives, and it moves onto the paper where the hand is. */
#sefer .sf-ust {
  position: absolute; right: 10px; bottom: 10px; left: auto; top: auto;
  z-index: 4; width: auto; padding: 0; gap: 3px;
  background: rgba(6,7,9,.82); border: 1px solid var(--line); border-radius: 6px;
}
#sefer #sf-kapat, #sefer #sf-baslik, #sefer #sf-ozet { display: none !important; }
#sefer .sf-masa { padding-top: 12px; }
.sf-say { font-size: 11px; letter-spacing: .1em; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }
.sf-say b { color: var(--gold); font-weight: normal; }

/* ---- LAYERS, FINALLY READ OFF THE PAGE INSTEAD OF GUESSED -----------------
   The globe at 60 floated over the intro (overlay z 50) and the transmission
   screens — the owner's screenshot has it hanging over KANAL AÇIK. Measured
   order of what exists outside #layout: card/chapter 45, overlay 50, menus 60,
   rites/tx 620. The globe belongs above the card and below everything else:
   47. The map drops from 620 to 46 for the same reason — above the card it
   replaces, below the globe that operates it, below every real overlay. */
.vt-globe-free { z-index: 47 !important; }
.sefer { z-index: 46 !important; }

/* the speaker's plate, at the foot of the picture */
#dc-kimlik {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px 12px 8px;
  background: linear-gradient(180deg, transparent, rgba(4,3,1,.88) 55%);
  pointer-events: none; text-align: left;
}
#dc-kimlik b { display: block; font-size: 13px; letter-spacing: .22em;
  color: var(--gold); font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,.9); }
#dc-kimlik i { display: block; font-style: normal; font-size: 11px;
  letter-spacing: .06em; color: var(--ink); opacity: .85; margin-top: 2px; }
/* THE YEAR GETS ITS OWN LINE. It sat absolute in the right corner and the
   place line ran underneath it — the owner's screenshot reads
   "başındaYnda12 · İLK ÇAĞ". A place description has no fixed length, so no
   corner is safe; the stamp goes under it as a third line instead. */
#dc-kimlik s { display: block; position: static;
  text-decoration: none; font-size: 11px; letter-spacing: .14em;
  color: var(--ink-dim); font-variant-numeric: tabular-nums; margin-top: 3px; }

/* ---- THE SPEAKER'S FACE (2026-09-03) ---------------------------------------
   The cast was drawn as square portraits, so the plate can show WHO is talking
   and not only their title. Square is the whole reason the slot is safe at any
   size: no crop, no ratio to get wrong. The plate only becomes a row when a
   portrait actually exists (.yuzlu), so a speaker without one keeps the exact
   layout it had. */
/* The portrait now fills the picture slot, so it obeys the same rules the
   drawn art did: fill the box, crop rather than letterbox, stay square-source
   so no ratio can be got wrong. */
/* MEASURED, NOT ASSUMED: with height:100% the portrait kept its natural
   square and OVERFLOWED a 244px slot by 129px -- the height chain through
   #dc-art is not reliable. Absolute inset:0 fills whatever the box actually
   is, and overflow:hidden guarantees it can never spill over the card text. */
#dc-art:has(> img.dk-portre) {
  position: relative; height: 100% !important; overflow: hidden;
}
/* A scrim under the balloon. Moving the face left is not enough on its own:
   every portrait is framed differently and some will always reach into the
   right half. Darkening that side means the text reads on ANY of the 38,
   and the face separates from the words instead of competing with them.
   Only while a balloon is actually up: on a silent card there is nothing to
   read over the picture, so the scrim would just dim a third of the portrait
   for no reason (owner, 2026-09-04: "eğer konuşma balonu yoksa karakteri
   ortala"). */
#dc-art.balonlu:has(> img.dk-portre)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg,
    rgba(6,5,3,0) 30%, rgba(6,5,3,.55) 52%, rgba(6,5,3,.86) 100%);
}
#dc-art > img.dk-portre {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; max-height: none !important;
  object-fit: cover !important;
  /* faces sit high in a square crop; bias the crop up so the eyes stay in
     frame when the slot is short and wide */
  object-position: center 30% !important;
  /* THE BUBBLE OWNS THE RIGHT (owner, 2026-09-04: "karakteri sola kaydırman
     gerekiyor"). The speech balloon sits over the upper right, and a portrait
     centred in a square slot puts the face directly under it. object-position
     alone cannot fix this -- a square image in a square box has no spare width
     to pan. So the picture is pushed in slightly and shifted left; the surplus
     is clipped by #dc-art's overflow, and the face lands in the left third
     with clean wall behind the balloon. A card with nothing to say gets the
     picture back whole and centred -- the shift exists to clear the balloon,
     so with no balloon it is only a worse crop. */
  transform: none;
  transform-origin: 50% 28%;
}
/* The magnification is deliberately modest now. Owner, 2026-09-04: "resim cok
   yakin biraz uzaklassin" -- and the room to step back had to be MADE, since a
   head-and-shoulders crop has no field of view left to reveal. Every portrait
   file was rebuilt with the subject inset to 88% of the frame, so the numbers
   here only have to clear the balloon: 0.88 x 1.10 = 0.97 against the old 1.18,
   about a fifth less face. */
#dc-art.balonlu > img.dk-portre { transform: scale(1.10) translateX(-14%); }
#dc-kimlik.yuzlu { display: flex; align-items: flex-end; gap: 10px; }
#dc-kimlik .dk-yazi { display: block; min-width: 0; }
#dc-kimlik .dk-yuz {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 1px solid rgba(232,201,106,.45);
  box-shadow: 0 2px 10px rgba(0,0,0,.75);
  background: #100c07;
}
@media (max-width: 380px) { #dc-kimlik .dk-yuz { width: 38px; height: 38px; } }
.vt-globe-free[hidden] { display: none !important; }


/* ---- THE 8px MARGIN WAS THE MISALIGNMENT — THIRD REPORT, FOUND -------------
   Every measurement so far compared the four doors to EACH OTHER, and they
   agreed to 0.2px — while all four sat high inside the plate together. The
   doors still carried `margin-bottom: 8px !important` from the era when they
   had to sit on the readings' optical rule; inside a centered plate that
   margin is part of the flex box and shoves the glyph up by 4px. The readings
   keep their padding (their colour rule needs it); the doors drop the margin.
   The plate's own padding evens out (5/4 -> 5/5) for a true centre. */
body.mapless #cmd-vitals .vt-doors .vt-door,
body.mapless #cmd-vitals .vt-doors .vt-face {
  margin-bottom: 0 !important;
}
body.mapless #cmd-vitals .vt-group,
body.mapless #cmd-vitals .vt-doors { padding: 5px 11px !important; }

/* ---- 4) THE SHADER OVER THE PICTURE ---------------------------------------
   Three layers sit on every card picture: the scanline sheet (13% black every
   4px), the CRT inset shadow (85% black, up to 140px deep from every edge),
   and the art's own dark palette. Together they read as a darkening shader
   (owner, second report). The tube keeps its texture but at half strength,
   the vignette pulls back from the picture, and the art itself is lifted. */
/* This block used to halve the comb and pull the vignette back, because the
   two of them together read as a shader over the art. They are removed now, so
   there is nothing left to halve — and the brightness lift that was
   COMPENSATING for them has to go with them, or the picture overshoots. */

/* THE BADGE SANK BEHIND THE GLOBE when the globe moved to <body>: its z-index
   lived under a `#cmd-vitals` selector that no longer matches, so the svg's
   z:1 won. The badge gets its stacking on the class that travels with it. */
.vt-globe-free .vt-globe-rozet { z-index: 3 !important; border-color: #060709; }

/* THE BADGE'S WHOLE DRESS lived under `#cmd-vitals` selectors — position, box,
   colours, everything — and all of it stopped matching when the globe moved to
   <body>. z-index alone could not save an element that had lost its absolute
   positioning. The full dress, on the class that travels with the globe. */
.vt-globe-free .vt-globe-rozet {
  position: absolute !important; top: -2px !important; right: -4px !important;
  min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box;
  border-radius: 10px; background: var(--acc-deep); border: 2px solid #060709;
  color: var(--acc-pale); font-family: var(--font); font-size: 11px; font-style: normal;
  line-height: 15px; text-align: center; letter-spacing: 0;
  z-index: 3 !important; pointer-events: none;
}

/* ---- the gear room (palace DONANIM pane, donanim.js) -------------------------
   Gemini's terminal design, owner-approved 2026-08-23: dark cards with an
   inset shadow, the seller's philosophy split from the wares by a DASHED rule
   ("mekanikle hikayeyi ayirir"), glowing gold stall names, outline price
   buttons that light and swell on touch, and a forge button whose hover
   INVERTS — the one violent gesture on an otherwise quiet sheet. */
#pal-donanim .pal-sec { color: #7a7263; font-size: 12px; letter-spacing: 4px;
  text-transform: uppercase; margin: 22px 0 10px; padding-bottom: 4px;
  border-bottom: 1px solid #332d24; }
.dn-ozet { font-family: var(--read); font-size: 11.5px; line-height: 1.6; color: #c9bda4;
  border: 1px solid #332d24; background: #141210; padding: 10px 12px; margin: 0 0 4px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5); }
.dn-stall, .dn-takim { background: #141210; border: 1px solid #332d24;
  border-radius: 2px; padding: 16px 20px; margin: 0 0 16px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5); }
.dn-stall.kapali { opacity: .55; }
.dn-takim.var { border-color: #5c4e38; }
.dn-irk, .dn-takim > b { display: block; font-weight: bold; font-size: 15px;
  letter-spacing: 2px; color: var(--gold);
  text-shadow: 0 0 5px rgba(207,168,100,.2); margin: 0 0 8px; }
.dn-takim > b em { font-style: normal; font-weight: 400; letter-spacing: .1em;
  text-shadow: none; }
/* the philosophy, fenced off from the wares by the dashed rule */
.dn-soz { display: block; font-style: normal; font-family: var(--read);
  font-size: 12.5px; line-height: 1.5; color: #7a7263; margin: 0 0 14px;
  padding-bottom: 14px; border-bottom: 1px dashed #332d24; }
.dn-yok { font-style: normal; font-family: var(--read); font-size: 12px; color: #7a7263; }
.dn-mal { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 6px 0; }
.dn-ad { flex: 1; font-size: 13px; letter-spacing: 1px; color: #dcdcdc; }
.dn-ad u { text-decoration: none; color: var(--gold); margin-left: 6px; }
.dn-al { font-family: var(--font); font-size: 12.5px; cursor: pointer;
  min-width: 60px; text-align: center; padding: 4px 10px;
  color: var(--gold); background: transparent; border: 1px solid #332d24;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.dn-al:hover:not(:disabled) { border-color: var(--gold);
  background: rgba(207,168,100,.1); box-shadow: 0 0 8px rgba(207,168,100,.3);
  transform: scale(1.05); }
.dn-al:disabled { opacity: .35; cursor: default; }
.dn-al.vergili { color: #d08a6a; border-color: rgba(208,138,106,.5); }
/* the forge card: recipe line above the tale, no divider under the tale */
.dn-tarif { display: block; font-size: 12px; letter-spacing: 1px;
  color: #7a7263; margin: 0 0 8px; }
.dn-ne { display: block; font-style: normal; font-family: var(--read);
  font-size: 12.5px; line-height: 1.5; color: #7a7263; margin: 0 0 4px; }
.dn-dov, .dn-guc { font-family: var(--font); font-size: 13px; letter-spacing: 2px;
  cursor: pointer; padding: 6px 16px; margin-top: 12px;
  color: #dcdcdc; background: transparent; border: 1px solid #7a7263;
  transition: border-color .2s ease, background .2s ease, color .2s ease; }
.dn-dov:hover:not(:disabled), .dn-guc:hover:not(:disabled) {
  border-color: #dcdcdc; background: #dcdcdc; color: #0d0c0b; font-weight: bold; }
.dn-dov:disabled, .dn-guc:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .dn-al, .dn-dov, .dn-guc { transition: none; }
  .dn-al:hover:not(:disabled) { transform: none; }
}

/* dn-soz + dn-al.vergili live in the gear-room block above (Gemini design). */
/* the battle line + the poisoned cup */
#rite .dz-saf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 8px 0; }
#rite .dz-hedef i { display: block; font-style: normal; font-size: 11px; letter-spacing: .1em; opacity: .7; }
#rite .dz-hedef u { display: block; text-decoration: none; font-size: 11px; margin-top: 3px; }
#rite .kd-ipucu { font-family: var(--read, inherit); font-size: 11.5px; line-height: 1.65;
  color: #c9bda4; border: 1px solid rgba(var(--t-rgb),.2); padding: 7px 9px; margin: 0 0 8px; }
#rite .kd-ipucu .kd-fis { color: rgb(var(--t-rgb)); }
#rite .kd-asil { font-size: 11px; }
#rite .dz-saf:has(.kd-asil) { grid-template-columns: repeat(2, 1fr); }

/* ---- KIMLIK VE DONANIM: the equipped commander (Gemini layout) --------------- */
.vk-duzen { display: grid; grid-template-columns: 1fr 150px 1fr; gap: 12px;
  margin: 0 0 8px; }
.vk-kol { display: flex; flex-direction: column; gap: 12px; }
.vk-slot { background: #161410; border: 1px solid #3a3225; border-radius: 4px;
  padding: 12px; flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; transition: border-color .2s; }
.vk-slot:hover { border-color: var(--acc-rim); }
.vk-slot.vk-bos { border: 1px dashed #3a3225; background: transparent; opacity: .6; }
.vk-yuva { display: block; color: #7a7366; font-size: 11px; letter-spacing: 2px;
  margin-bottom: 5px; }
.vk-ad { display: block; color: #e0dcd3; font-size: 12.5px; font-weight: bold;
  letter-spacing: 1px; margin-bottom: 8px; }
.vk-bosad { display: block; color: #7a7366; font-size: 12px; font-style: italic;
  font-weight: 400; margin-bottom: 8px; }
.vk-etki { display: block; font-style: normal; font-family: var(--read);
  color: #7a7366; font-size: 11px; line-height: 1.35; }
.vk-pip { margin-top: 8px; font-size: 14px; letter-spacing: 2px; }
.vk-pip .vk-on { color: #d97b38; text-shadow: 0 0 5px rgba(217,123,56,.4); }
.vk-pip .vk-off { color: #3a3225; }
.vk-portre { background: #161410; border: 1px solid var(--acc-rim); border-radius: 6px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; box-shadow: inset 0 0 30px rgba(0,0,0,.8); }
.vk-portre svg { width: 100%; height: auto; display: block; }
.vk-plaka { background: rgba(13,12,11,.9); width: 100%; text-align: center;
  padding: 8px 4px; border-top: 1px solid var(--acc-rim); }
.vk-plaka b { display: block; color: var(--gold); font-size: 13px;
  letter-spacing: 2px; }
.vk-plaka i { display: block; font-style: normal; font-family: var(--read);
  color: #7a7366; font-size: 11px; margin-top: 2px; }
@media (max-width: 430px) {
  .vk-duzen { grid-template-columns: 1fr 118px 1fr; gap: 8px; }
  .vk-slot { padding: 9px; }
}

/* the player's own quoted verdict at the head of a continuing exchange */
#dc-text .dc-hukum { color: var(--gold); font-style: italic; opacity: .92;
  margin: 0 0 8px; padding-left: 8px; border-left: 2px solid rgba(var(--gold-rgb),.45); }

/* a door not yet introduced (rehber.js): dimmed, and it shivers when refused */
@keyframes kilitSars { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.pal-tab.kilit-sars { animation: kilitSars .18s 2; }

/* ---- the guide's system-message frame (rehber.js, Gemini modal) -------------- */
#rite .rt-box.rh-kart { background: #12100e; border: 1px solid #4a3f2c;
  border-radius: 6px; padding: 4px; position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.8); }
#rite .rh-kart::before, #rite .rh-kart::after { content: '';
  position: absolute; width: 10px; height: 10px; border: 2px solid var(--acc-rim); }
#rite .rh-kart::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
#rite .rh-kart::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
#rite .rh-kart .rh-ic { border: 1px dashed #4a3f2c; border-radius: 4px;
  padding: 22px 24px; background: linear-gradient(to bottom, #161411 0%, #12100e 100%); }
#rite .rh-kart h3 { color: var(--acc-door); font-size: 15px; font-weight: bold;
  letter-spacing: 4px; text-transform: uppercase; margin: 0 0 22px;
  display: flex; align-items: center; gap: 10px; }
#rite .rh-kart h3::before { content: '>'; color: #e0dcd3;
  animation: rhBlink 1s infinite; }
@keyframes rhBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
#rite .rh-kart .rh-blok { display: flex; gap: 14px; margin: 0 0 18px; }
#rite .rh-kart .rh-ikon { text-decoration: none; color: var(--acc-door); font-size: 17px;
  line-height: 1.2; opacity: .8; flex: none; }
#rite .rh-kart .rt-b { color: #a8a090; font-size: 13px; line-height: 1.6; margin: 0; }
#rite .rh-kart .rt-b b, #rite .rh-kart .rt-b strong { color: #e0dcd3;
  letter-spacing: 1px; }
#rite .rh-kart .rt-btn { display: block; margin: 26px auto 0;
  background: transparent; border: 1px solid var(--acc-rim); color: var(--acc-door);
  font-size: 13px; letter-spacing: 4px; padding: 12px 40px; border-radius: 4px;
  text-transform: uppercase; transition: background .2s ease, color .2s ease,
  box-shadow .2s ease; width: auto; }
#rite .rh-kart .rt-btn:hover { background: var(--acc-door); color: #000;
  font-weight: bold; box-shadow: 0 0 15px rgba(var(--door-rgb),.4); }
#rite .rh-kart .rt-btn.ghost { border-color: #4a3f2c; color: #a8a090;
  margin-top: 10px; letter-spacing: 2px; padding: 9px 24px; }
#rite .rh-kart .rt-btn.ghost:hover { background: #4a3f2c; color: #e0dcd3;
  box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  #rite .rh-kart h3::before { animation: none; }
  #rite .rh-kart .rt-btn { transition: none; }
}

/* a strip door whose induction has not run yet (rehber.js): visibly unpressable.
   Still tappable on purpose — the tap answers with WHEN it opens. */
/* !important because the strip's alignment fixes left `opacity: 1 !important`
   on these doors (measured: two such rules match) — an ordinary declaration
   can never dim them again. Specificity is also one class higher, so this
   wins among the importants. */
body.mapless #cmd-vitals .vt-door.vt-kilit { opacity: .3 !important; filter: grayscale(.75); }

/* ---- the title screen (Gemini opening-briefing, owner-approved 2026-08-24) --- */
.overlay.title .ov-box { display: flex; flex-direction: column; align-items: center; }
.overlay.title #ov-logo { width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid #3a3225; display: flex; justify-content: center;
  align-items: center; margin: 0 0 22px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.8), 0 0 15px rgba(var(--door-rgb),.1); }
.overlay.title #ov-logo svg { width: 42px; height: 42px;
  filter: drop-shadow(0 0 4px rgba(var(--door-rgb),.5)); }
.overlay.title #ov-title, .overlay.title #ov-title.good { font-size: 24px;
  font-weight: bold; letter-spacing: 8px; text-transform: uppercase;
  color: var(--acc-door); text-shadow: 0 0 10px rgba(var(--door-rgb),.4);
  text-align: center; margin: 0 0 10px; }
.overlay.title #ov-sub { display: flex; align-items: center; gap: 10px;
  color: var(--acc-door); opacity: .8; font-size: 12px; letter-spacing: 4px;
  text-transform: uppercase; margin: 0 0 24px; }
.overlay.title #ov-sub::before, .overlay.title #ov-sub::after { content: '';
  display: block; width: 30px; height: 1px; background: #3a3225; }
/* the briefing scroll: gold-topped panel, dashed rules between paragraphs */
.overlay.title .ov-story { background: #110e0b; border: 1px solid #3a3225;
  border-top: 2px solid var(--acc-rim); border-radius: 4px; width: 100%;
  max-height: min(280px, 34vh); overflow-y: auto; padding: 20px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.9); scrollbar-width: thin;
  scrollbar-color: #3a3225 transparent; }
.overlay.title .ov-story::-webkit-scrollbar { width: 6px; }
.overlay.title .ov-story::-webkit-scrollbar-thumb { background: #3a3225;
  border-radius: 3px; }
.overlay.title .ov-story p { color: #8a8273; font-size: 12.5px; line-height: 1.6;
  margin: 0 0 18px; padding: 0 0 18px; border-top: none;
  border-bottom: 1px dashed #3a3225; }
.overlay.title .ov-story p:last-child { margin-bottom: 0; padding-bottom: 0;
  border-bottom: none; }
.overlay.title .ov-story p:first-child { color: #8a8273; padding-top: 0; }
.overlay.title .ov-story b, .overlay.title .ov-story strong { color: var(--acc-door);
  font-weight: bold; letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(var(--door-rgb),.3); }
/* the doors, in the design's shapes */
.overlay.title .ov-doors { width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 12px; margin-top: 26px; }
/* ==========================================================================
   MÜHÜRLÜ DEFTER — the approved title design. The save is a ledger on the
   table; its base is the ONE gold bar on the screen. The frames run a step
   brighter than the game's usual .28 line, on the owner's call. Loudness
   ladder: gold bar > ghost bar > the two quiet bottom buttons.
   ========================================================================== */
/* the ledger card */
.overlay.title .ov-defter { width: 100%; border: 1px solid rgba(var(--lit-rgb),.6);
  border-radius: 12px; background: linear-gradient(#12100a, #0c0a06);
  overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 18px rgba(var(--lit-rgb),.07);
  text-align: left; }
.overlay.title .ov-defter.hidden { display: none; }
.overlay.title .df-bas { display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px 11px; border-bottom: 1px solid rgba(var(--lit-rgb),.22); }
.overlay.title .df-bas span:first-child { font-family: var(--font); font-size: 11px;
  letter-spacing: .22em; color: var(--w-olive); }
.overlay.title .df-muhur { width: 34px; height: 34px; border-radius: 50%; position: relative;
  flex: 0 0 auto; background: radial-gradient(circle at 38% 32%, #d05a3e, #8a2f1d 70%);
  box-shadow: 0 0 14px rgba(184,69,47,.45), inset 0 0 6px rgba(0,0,0,.5);
  animation: dfMuhur 3.2s ease-in-out infinite; }
.overlay.title .df-muhur::after { content: '✦'; position: absolute; inset: 0;
  display: grid; place-items: center; color: #f0c9a0; font-size: 15px; }
@keyframes dfMuhur { 50% { box-shadow: 0 0 22px rgba(184,69,47,.7), inset 0 0 6px rgba(0,0,0,.5); } }
.overlay.title .df-gov { padding: 14px 15px 13px; }
.overlay.title .df-ad { color: #efe6d2; font-family: var(--font); font-size: 15px;
  letter-spacing: .12em; font-weight: 600; }
.overlay.title .df-yil { color: var(--w-olive); font-family: var(--font); font-size: 11.5px;
  margin-top: 5px; }
.overlay.title .df-cipler { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.overlay.title .df-cip { border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 6px;
  padding: 4px 8px; font-family: var(--font); font-size: 11px; color: var(--w-olive);
  background: rgba(0,0,0,.3); }
.overlay.title .df-cip b { color: var(--acc-lit); font-weight: 600; }
/* the gold bar: the ledger's own base, and the screen's one loud thing */
.overlay.title .ov-defter > #ov-resume[data-rol="devam"] {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0;
  max-height: none; margin: 0; padding: 14px 0 13px; border: 0; border-radius: 0;
  background: linear-gradient(var(--acc-lit), var(--w-gold)); color: #1a1408; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; white-space: nowrap; text-transform: uppercase;
  transition: background .25s ease; }
.overlay.title .ov-defter > #ov-resume[data-rol="devam"]:hover {
  background: linear-gradient(#f4d87e, #d3af64); }
.overlay.title .ov-defter > #ov-resume.hidden { display: none; }
/* the ghost bar */
.overlay.title #ov-reseed[data-rol="oyna"] {
  width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0;
  max-height: none; white-space: nowrap;
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  gap: 10px; padding: 13px 0; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid rgba(var(--lit-rgb),.5); color: var(--w-gold);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  transition: border-color .25s ease, color .25s ease; }
.overlay.title #ov-reseed[data-rol="oyna"] .obp-ic { font-size: 11px; }
.overlay.title #ov-reseed[data-rol="oyna"]:hover { border-color: var(--acc-lit); color: var(--acc-lit); }
/* the bottom row: two equal quiet buttons, half the row each */
.overlay.title .ov-altsira { display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; width: 100%; }
/* with the crossed-watch panel standing, CHANGE KIND steps out of the row and
   the two that remain share it */
.overlay.title .ov-altsira.ov-iki { grid-template-columns: 1fr 1fr; }
.overlay.title #ov-irk.hidden { display: none !important; }
.overlay.title .ov-altsira > button {
  width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0;
  max-height: none; margin: 0; border-radius: 10px; background: rgba(0,0,0,.25);
  cursor: pointer; font-family: var(--font); padding: 11px 4px 10px;
  text-align: center; transition: border-color .25s ease, color .25s ease; }
.overlay.title .ov-altsira > button b { display: block; font-size: 11px;
  letter-spacing: .16em; font-weight: 600; }
.overlay.title .ov-altsira > button i { display: block; font-style: normal;
  font-size: 9.5px; margin-top: 4px; letter-spacing: .06em; }
.overlay.title #ov-ayar[data-rol="ayar"] { border: 1px solid rgba(var(--gold-rgb),.35);
  color: var(--w-olive); }
.overlay.title #ov-ayar[data-rol="ayar"] i { color: var(--w-moss); }
.overlay.title #ov-ayar[data-rol="ayar"]:hover { border-color: rgba(var(--lit-rgb),.6);
  color: var(--w-gold); }
.overlay.title #ov-reset[data-rol="yenile"] { border: 1px solid rgba(194,90,65,.55);
  background: rgba(0,0,0,.25); color: #9a4c3a; padding: 11px 4px 10px;
  width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0;
  max-height: none; margin: 0; }
.overlay.title #ov-reset[data-rol="yenile"] i { color: #5c3a30; }
.overlay.title #ov-reset[data-rol="yenile"]:hover { border-color: #c25a41;
  color: #c25a41; }
.overlay.title #ov-reset[data-rol="yenile"]:hover i { color: #8a4536; }
.overlay.title .ov-door[data-rol] svg.ob-i { display: none; }
/* the caption row is retired: every control carries its own words now */
.overlay.title .ov-doorcap { display: none; }
/* AN UNTYPED ROW IS NOT A ROW. The typewriter used to create every paragraph
   up front, each drawing its separator while holding no text — the screen
   opened on seven dotted empty lines. A row exists only once it speaks. */
.overlay.title .ov-story p.dt-wait:not(.dt-live) { display: none; }
/* with the ledger on the table the briefing stands down entirely */
.overlay.title.defterli .ov-story { display: none; }
@media (prefers-reduced-motion: reduce) {
  .overlay.title .ov-doors > .ov-door[data-rol] { transition: none; }
  .overlay.title .df-muhur { animation: none; }
}

/* the next reachable places pulse (one ride = one edge; these are the edges) */
.sf-pin .sf-sirada { animation: sfSirada 1.4s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center; }
@keyframes sfSirada {
  0%, 100% { opacity: .9; }
  50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .sf-pin .sf-sirada { animation: none; opacity: .7; } }

@media (max-width: 380px) {
  .overlay.title #ov-reseed[data-rol="oyna"] { letter-spacing: .12em; font-size: 11.5px; }
  .overlay.title .ov-defter > #ov-resume[data-rol="devam"] { letter-spacing: .12em; font-size: 12px; }
}

/* the map's settings gear — same seat as the card's (#dc-gear), top-right */
#sf-ayar { position: absolute; top: 10px; right: 10px; z-index: 30;
  width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0;
  color: var(--w-moss); background: rgba(20,18,16,.85);
  border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 50%; }
#sf-ayar svg { width: 19px; height: 19px; }
#sf-ayar:hover { color: var(--gold); border-color: var(--gold-dim); }

/* the spent card, held on stage until the next one paints (anti-flicker) */
.decision.dc-don { pointer-events: none; }
.decision.dc-don .dc-box { opacity: .55 !important; filter: saturate(.7);
  /* animation: none — the box's dcSheet entry animation can freeze on its
     opacity-0 first frame (this codebase's known stuck-clock class), and a
     frozen card that is invisible is the exact flicker this state exists to
     kill. Measured: computed opacity 0 with only a .55 rule matching. */
  animation: none !important;
  transition: opacity .3s ease, filter .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .decision.dc-don .dc-box { transition: none; } }

/* ==== THE STRIP, IN GEMINI'S TOP-NAV DRESS (owner, 2026-08-24) ================
   gemini-code-1787585873779.html: a 54px charcoal bar with a 2px hairline,
   the two icon groups sunk into inset panels, the four readings keeping their
   own colours over 3px fill bars, the four doors flat and dim until touched,
   and the globe a gold-ringed orb punched through the bar's bottom edge.
   Appended last on purpose: this layer must outrank the strip's scar tissue
   (measured !important walls from the alignment fights). */
body.mapless #cmd-vitals { height: 54px !important; align-items: center !important;
  background: #181a1b !important; border-bottom: 2px solid #3a3225 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.6) !important; }
/* the two panels */
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  /* !important: an older #vt-group skin (bluish #101018, r11) outguns this
     block on specificity — measured, not guessed */
  background: #110f0d !important; border: 1px solid #3a3225 !important;
  border-radius: 4px !important; height: 34px !important; display: flex;
  align-items: center; padding: 0 14px !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.5) !important; }
body.mapless #cmd-vitals #vt-group { gap: 18px !important; }
body.mapless #cmd-vitals .vt-doors { gap: 16px !important; }
/* the readings: icon over its 3px fill, sizes per the design */
body.mapless #cmd-vitals .vt { display: flex; flex-direction: column;
  align-items: center; gap: 4px; width: 24px; }
body.mapless #cmd-vitals .vt .vt-ic { width: 17px !important; height: 17px !important; }
#cmd-vitals .vt .vt-ic > svg { width: 17px !important; height: 17px !important; }
body.mapless #cmd-vitals .vt::after { width: 100%; height: 3px; border-radius: 1px; }
/* the doors: flat, dim, warm on touch, gold when their sheet is open */
body.mapless #cmd-vitals .vt-door:not(.vt-globe), body.mapless #cmd-vitals .vt-face {
  width: auto !important; height: auto !important; padding: 4px !important;
  background: none !important; border: none !important;
  color: #666055 !important; display: flex !important; align-items: center;
  justify-content: center; transition: color .2s ease, filter .2s ease; }
body.mapless #cmd-vitals .vt-door:not(.vt-globe) svg,
body.mapless #cmd-vitals .vt-face svg,
#cmd-vitals .vt-door:not(.vt-globe) svg, .vt-doors .vt-door:not(.vt-globe) svg {
  width: 18px !important; height: 18px !important; fill: currentColor; }
body.mapless #cmd-vitals .vt-door:not(.vt-globe):hover,
body.mapless #cmd-vitals .vt-face:hover {
  color: #e0dcd3 !important; filter: drop-shadow(0 0 4px rgba(224,220,211,.4)); }
body.mapless #cmd-vitals .vt-door.on, body.mapless #cmd-vitals .vt-face.on {
  color: var(--acc-door) !important; filter: drop-shadow(0 0 6px rgba(var(--door-rgb),.5)); }
/* the orb: 40px radial disc, gold ring, black 6px collar cutting the hairline */
.vt-door.vt-globe, body.mapless #cmd-vitals .vt-door.vt-globe {
  width: 40px !important; height: 40px !important;
  background: radial-gradient(circle, #2a2215 0%, #110e0a 100%) !important;
  border: 2px solid var(--acc-rim) !important; border-radius: 50% !important;
  box-shadow: 0 0 0 6px #0a0908, 0 0 15px rgba(140,115,67,.2) !important;
  color: var(--acc-door) !important; display: flex !important; align-items: center;
  justify-content: center; transition: box-shadow .2s ease, border-color .2s ease,
  transform .2s ease; }
.vt-door.vt-globe svg { width: 20px !important; height: 20px !important; }
.vt-door.vt-globe:hover { border-color: var(--acc-door) !important;
  box-shadow: 0 0 0 6px #0a0908, 0 0 20px rgba(var(--door-rgb),.5) !important; }
@media (prefers-reduced-motion: reduce) {
  body.mapless #cmd-vitals .vt-door, .vt-door.vt-globe { transition: none; } }
/* the intro-screen hiding must beat the orb's own display:flex !important —
   this exact regression shipped once (the globe leaking onto the title, again)
   because the orb block above outranked the early [hidden] rule. */
.vt-door.vt-globe[hidden], .vt-globe-free[hidden] { display: none !important; }
/* 2) touch has no hover: the doors' idle must be readable on its own, not a
   state that waits for a mouse. Locked doors stay dimmer than idle. */
body.mapless #cmd-vitals .vt-door:not(.vt-globe), body.mapless #cmd-vitals .vt-face {
  color: #9a9184 !important; }
body.mapless #cmd-vitals .vt-door.vt-kilit { opacity: .35 !important; }

/* the handover from a frozen card: no entry fade, no first black frame */
.dc-box.dc-atla { animation: none !important; opacity: 1 !important; }

/* ---- owner, 2026-08-24: "ikonları küçült, çerçeveyi büyüt" ------------------
   Measured before this block: the reading svg computed 21px inside its 17px
   box — some sizing rule outranked the design block, and the glyphs poked out
   of the sunken panel. This block sits LAST and outguns everything. */
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: 40px !important; }
body.mapless #cmd-vitals #vt-group .vt { width: 22px; gap: 4px; }
body.mapless #cmd-vitals #vt-group .vt .vt-ic {
  width: 14px !important; height: 14px !important; min-width: 0 !important;
  overflow: hidden; }
body.mapless #cmd-vitals #vt-group .vt .vt-ic svg,
body.mapless #cmd-vitals #vt-group .vt .vt-ic > svg {
  width: 14px !important; height: 14px !important;
  max-width: 14px !important; max-height: 14px !important; }
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe) svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg {
  width: 16px !important; height: 16px !important; }

/* ---- THE TESTAMENT (vasiyet.js): the ending as slow terminal slides ---------- */
#vasiyet { position: fixed; inset: 0; z-index: 940; display: none;
  background: radial-gradient(circle at 50% 38%, #15120f 0%, #050403 78%);
  color: #e0dcd3; font-family: var(--font);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 26px; text-align: center; }
#vasiyet.on { display: flex; }
#vasiyet .vs-uyari { color: #c0392b; border: 1px solid #c0392b; padding: 8px 16px;
  font-size: 13px; letter-spacing: 3px; margin: 0 0 26px;
  animation: vsKan 1s steps(2) infinite; }
@keyframes vsKan { 50% { opacity: .25; } }
#vasiyet .vs-mark { width: 64px; height: 64px; color: var(--vs-accent);
  margin: 0 0 22px; filter: drop-shadow(0 0 8px var(--vs-accent)); opacity: .9; }
#vasiyet .vs-baslik { margin: 0 0 20px; font-size: 15px; font-weight: bold;
  letter-spacing: 4px; color: var(--vs-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--vs-accent) 40%, transparent); }
#vasiyet .vs-metin { margin: 0; max-width: 560px; min-height: 8.5em;
  font-family: var(--read); font-size: 14.5px; line-height: 1.85; color: #b8ad8c;
  text-align: left; white-space: pre-wrap; }
#vasiyet.vs-kan .vs-metin { color: #c9a8a0; }
#vasiyet .vs-sayfa { margin-top: 26px; font-size: 11px; letter-spacing: 4px;
  color: #6d6455; }
#vasiyet .vs-devam { margin-top: 14px; background: transparent;
  border: 1px solid var(--vs-accent); color: var(--vs-accent);
  font-family: var(--font); font-size: 13px; letter-spacing: 4px;
  padding: 12px 34px; cursor: pointer; border-radius: 4px;
  transition: background .2s ease, color .2s ease; }
#vasiyet .vs-devam:hover { background: var(--vs-accent); color: #000; }
/* the CRT breathes under the will: a faint per-slide glitch */
#vasiyet .vs-baslik { animation: vsGlitch 4.5s infinite; }
@keyframes vsGlitch {
  0%, 96%, 100% { transform: none; opacity: 1; }
  97% { transform: translateX(2px); opacity: .7; }
  98% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) {
  #vasiyet .vs-uyari, #vasiyet .vs-baslik { animation: none; }
  #vasiyet .vs-devam { transition: none; } }

/* ---- ARAF: the post-verdict world, paler ------------------------------------- */
body.araf .crt { filter: saturate(.62) brightness(.9) sepia(.12); }

/* ---- owner, 2026-08-24: "kasa ve komutan aktif ama soluk görünüyor" ----------
   Measured live (build 498): all four right-strip doors computed the SAME
   #9a9184 — the touch-idle blanket above (its !important ties, its source
   order wins) was eating every door's own hue, so an ACTIVE door looked
   exactly like a disabled control. Each door takes its colour back AFTER the
   blanket; the lock (vt-kilit) keeps its dim greige so locked still reads
   locked, and .on keeps the open-sheet gold. */
body.mapless #cmd-vitals .vt-door.vt-kasa:not(.on) { color: var(--acc-door) !important; }
body.mapless #cmd-vitals .vt-door[data-nav="palace"]:not(.vt-kilit):not(.on) { color: var(--acc-lit) !important; }
body.mapless #cmd-vitals .vt-door[data-nav="galaxy"]:not(.vt-kilit):not(.on) { color: #8fd0ff !important; }
body.mapless #cmd-vitals .vt-face:not(.on) { color: var(--w-bone) !important; }
body.nibiru.mapless #cmd-vitals .vt-door.vt-kasa:not(.on) { color: #d99a5e !important; }
body.nibiru.mapless #cmd-vitals .vt-door[data-nav="palace"]:not(.vt-kilit):not(.on) { color: #e0a05e !important; }
body.nibiru.mapless #cmd-vitals .vt-door[data-nav="galaxy"]:not(.vt-kilit):not(.on) { color: #d99a5e !important; }
body.nibiru.mapless #cmd-vitals .vt-face:not(.on) { color: #e8b98e !important; }

/* ---- THE IMPACT IS LIGHT, NOT MOTION (owner, 2026-08-24: flicker frame) -----
   The shell shake used to translate .crt per frame; any transform made .crt
   the containing block for fixed sheets, which re-anchored and lurched on
   every audit. The lurch is now a one-shot brightness punch — no geometry. */
.crt-vurus-hafif { animation: crtVurus .26s ease-out; }
.crt-vurus-orta  { animation: crtVurus .38s ease-out; }
.crt-vurus-sert  { animation: crtVurusSert .52s ease-out; }
/* AMPLITUDES CUT WAY DOWN (owner's screen recording, 2026-08-25: "rezalet bir
   ekran titremesi"): 1.5 bright then .84 dim across the WHOLE shell reads as a
   strobe on a phone. The pulse stays as feedback but whispers now — a few
   percent, no dip below baseline, ever. */
@keyframes crtVurus {
  0% { filter: brightness(1.05); }
  100% { filter: brightness(1); } }
@keyframes crtVurusSert {
  0% { filter: brightness(1.09) contrast(1.02); }
  100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) {
  .crt-vurus-hafif, .crt-vurus-orta, .crt-vurus-sert { animation: none; } }

/* ---- THE ACQUISITION RITE (palace.js alimToreni) ---------------------------- */
#al-toren { position: fixed; inset: 0; z-index: 960; display: flex;
  align-items: center; justify-content: center;
  /* the rite carries a sentence now, not just a name: it holds for five
     seconds instead of one and a half, and a tap still closes it early */
  background: rgba(4, 3, 2, .74); animation: alFade 5.2s ease forwards; }
#al-toren .al-kutu { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 12px; padding: 40px 48px;
  animation: alKutu .45s cubic-bezier(.2, 1.4, .4, 1); }
#al-toren .al-isin { position: absolute; inset: -70px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--alr) 20%, transparent) 0 5deg, transparent 5deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%);
  mask: radial-gradient(circle, #000 30%, transparent 68%);
  animation: alIsin 9s linear infinite; pointer-events: none; }
@keyframes alIsin { to { transform: rotate(360deg); } }
#al-toren .al-ic { position: relative; width: 62px; height: 62px; color: var(--alr);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--alr) 70%, transparent)); }
#al-toren .al-ic svg { width: 100%; height: 100%; fill: currentColor; }
#al-toren .al-ust { position: relative; font-size: 11px; letter-spacing: 4px;
  color: #8d8371; font-style: normal; }
#al-toren .al-ad { position: relative; font-size: 19px; font-weight: bold;
  letter-spacing: 5px; color: var(--alr); text-align: center;
  text-shadow: 0 0 14px color-mix(in srgb, var(--alr) 55%, transparent); }
#al-toren .al-muhur { position: relative; border: 2px solid var(--alr);
  color: var(--alr); padding: 7px 20px; font-size: 13px; letter-spacing: 4px;
  border-radius: 4px; transform: rotate(-5deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--alr) 35%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--alr) 18%, transparent);
  animation: alMuhur .42s cubic-bezier(.2, 1.7, .4, 1) .2s backwards; }
/* ---- SARAYA ALINAN SEYIN KENDI KARESI (b1026) -----------------------------
   Sahibi: "saraya aldigim her seyin bir resim animasyonu ile cikmasini
   istiyorum". 62px'lik ikon yuvasi bir fotograf icin cok kucuk; kare varken
   yuva bir PLAKAYA doner: ekran genisliginin dortte uculuk, 1:1, altin
   cerceveli. Ustune ince bir yakinlasma biniyor (alYakin) -- durgun bir
   fotografin "animasyon" gibi okunmasini saglayan sey bu; 5.2 saniyelik
   torenin tamamina yayiliyor, yani hareket gorunur ama fark edilmez.
   Alt kenarindan yaziya karisiyor, esik sahnesindeki maskeyle ayni fikir. */
#al-toren .al-ic.al-foto {
  width: min(300px, 74vw); height: auto; aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--alr) 58%, transparent);
  border-radius: 3px; overflow: hidden; filter: none;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.92),
              0 0 26px -8px color-mix(in srgb, var(--alr) 45%, transparent);
}
#al-toren .al-ic.al-foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  animation: alYakin 5.2s cubic-bezier(.25,.5,.3,1) both;
}
@keyframes alYakin { from { transform: scale(1.06); } to { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  #al-toren .al-ic.al-foto img { animation: none; }
}
@keyframes alKutu { from { transform: scale(.82); } }
@keyframes alMuhur {
  from { transform: rotate(-14deg) scale(2.6); }
  to { transform: rotate(-5deg) scale(1); } }
@keyframes alFade { }
@media (prefers-reduced-motion: reduce) {
  #al-toren, #al-toren .al-kutu, #al-toren .al-isin, #al-toren .al-muhur {
    animation: none; } }

/* ---- THE KOVAN CONSOLE (owner's mockup, 2026-08-30; "rengi yeşil değil mor
   yap") -----------------------------------------------------------------------
   The campaign ledger is PARCHMENT for the Annunaki: warm paper, a gold seal, a
   ridge drawn by hand. That is the wrong object in a Hive keeper's hands. They
   are not reading a map — they are looking at the operator screen of the
   simulation they run, and the owner's mockup says exactly that: a terminal
   grid, node names in square brackets, dashed network lines, and a console box
   that ends in a blinking cursor.
   The mockup was green. Violet is right and the owner called it: violet is
   already the Hive's hue (races.js #c78ae8), and this sheet opens DIRECTLY
   under the strip — a green map beneath a violet band would read as two games.
   Structure from the mockup, colour from the kind.
   NOTHING MOVES. No new node, no new box, no changed padding: the layout the
   owner asked to keep is the layout, and every rule below only repaints. */
#sefer.sf-kovan {
  --kv-ac: #c78ae8;      /* the hive's own hue */
  --kv-dim: #6a3f88;
  --kv-line: #2a1f3d;
  --kv-mut: #8a7aa0;
  --kv-ink: #e8dff2;
  background: #0b0813;
}
/* the paper becomes a terminal grid */
#sefer.sf-kovan .sf-kagit, #sefer.sf-kovan #sf-kagit {
  background:
    linear-gradient(rgba(199,138,232,.07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(199,138,232,.07) 1px, transparent 1px) 0 0 / 20px 20px,
    #0e0a18 !important;
  border-color: var(--kv-line) !important; }
#sefer.sf-kovan .sf-kagit::after { display: none; }   /* the parchment vignette */

/* nodes: a hollow ring, lit when it is the one you are standing on */
#sefer.sf-kovan .sf-ad { fill: var(--kv-mut); letter-spacing: .06em; }
#sefer.sf-kovan .sf-ad.sf-sonuk { fill: #5c4f70; }
#sefer.sf-kovan .sf-olcek, #sefer.sf-kovan .sf-soru { fill: #6f5f88; }
#sefer.sf-kovan .sf-rozet { fill: #0b0813; }
/* the route is a data line, not an ink stroke */
#sefer.sf-kovan .sf-rota { stroke: var(--kv-ac) !important; stroke-width: 1.8 !important;
  stroke-dasharray: 4 4; opacity: .8 !important; }
#sefer.sf-kovan .sf-sirada { stroke: var(--kv-ac); }

/* the panel */
#sefer.sf-kovan .sf-panel { background: #0b0813; border-color: var(--kv-line); }
#sefer.sf-kovan .sf-panel::before, #sefer.sf-kovan .sf-panel::after {
  border-color: var(--kv-line); }
#sefer.sf-kovan .sf-rozet-ad { border-color: var(--kv-dim); color: var(--kv-ac);
  background: rgba(199,138,232,.05); }
#sefer.sf-kovan .sf-rozet-ad::before { background: var(--kv-ac); }
#sefer.sf-kovan .sf-panel h3 { color: var(--kv-ink); letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(199,138,232,.25); }
#sefer.sf-kovan .sf-tanim { color: var(--kv-mut); border-bottom-color: var(--kv-line); }
#sefer.sf-kovan .sf-panel dt { color: var(--kv-mut); }
#sefer.sf-kovan .sf-panel dd { color: var(--kv-ink); }
#sefer.sf-kovan .sf-panel dd.sf-teh { color: #e0a04a; }
#sefer.sf-kovan .sf-oran, #sefer.sf-kovan .sf-yoldas, #sefer.sf-kovan .sf-bos {
  color: var(--kv-mut); }
#sefer.sf-kovan .sf-bos b { color: var(--kv-ac); }

/* THE CONSOLE BOX. The mockup's ">_ SISTEM KAYDI SORGUSU / DURUM: … / body /
   N DENETİM TAMAMLANDI ▮" is, line for line, what .sf-iz already prints: the
   header, the verdict, the sentence and the tally. It only needed the frame. */
#sefer.sf-kovan .sf-iz { background: #05030a; border: 1px solid var(--kv-line);
  border-left: 3px solid var(--kv-ac); padding: 14px 15px; }
#sefer.sf-kovan .sf-iz s { color: var(--kv-mut); text-transform: uppercase; }
#sefer.sf-kovan .sf-iz s::before { content: '>_ '; color: var(--kv-ac); }
#sefer.sf-kovan .sf-iz u { color: var(--kv-ac); letter-spacing: 1px; }
#sefer.sf-kovan .sf-iz b { color: var(--kv-mut); }
#sefer.sf-kovan .sf-iz b::after { content: ''; display: inline-block;
  width: 6px; height: 11px; margin-left: 6px; vertical-align: -1px;
  background: var(--kv-ac); animation: kvImlec 1s step-end infinite; }
@keyframes kvImlec { 50% { opacity: 0; } }

/* the ride button */
#sefer.sf-kovan .sf-git { background: var(--kv-dim); color: var(--kv-ac);
  border: 1px solid var(--kv-ac); border-top-width: 1px;
  /* the parchment button sits on a brown plinth (box-shadow 0 4px 0 #2b2317).
     A console key is an area, not a relief: the plinth becomes the grid line. */
  box-shadow: 0 3px 0 0 #241a37, 0 4px 12px rgba(0,0,0,.5); }
#sefer.sf-kovan .sf-git:hover:not(:disabled) { background: var(--kv-ac); color: #0b0813;
  border-color: var(--kv-ac); box-shadow: 0 0 15px rgba(199,138,232,.25); }
#sefer.sf-kovan .sf-git:disabled { background: #100b1a; color: #5c4f70;
  border-color: var(--kv-line); }
#sefer.sf-kovan #sf-ayar { color: var(--kv-mut); border-color: var(--kv-line);
  background: #05030a; }
#sefer.sf-kovan .sf-say { color: var(--kv-mut); }
#sefer.sf-kovan .sf-say b { color: var(--kv-ac); }
#sefer.sf-kovan #sf-varis-ad { background: rgba(11,8,19,.92);
  border-color: rgba(199,138,232,.45); }
#sefer.sf-kovan #sf-varis-ad i { color: var(--kv-mut); }
#sefer.sf-kovan #sf-varis-ad b { color: var(--kv-ac); }
#sefer.sf-kovan .sf-varis-halka { stroke: var(--kv-ac) !important; }
@media (prefers-reduced-motion: reduce) {
  #sefer.sf-kovan .sf-iz b::after { animation: none; } }

/* the pins. A CSS fill beats the inline attribute, so the same drawing pass
   serves both kinds and only the paint changes. */
.sf-hedef { display: none; }
#sefer.sf-kovan .sf-cekirdek { fill: #0e0a18; stroke: var(--kv-mut); stroke-width: 2; }
#sefer.sf-kovan .sf-cekirdek.sf-gidilmis { fill: #241a37; stroke: var(--kv-dim); }
#sefer.sf-kovan .sf-nokta { fill: var(--kv-mut); }
#sefer.sf-kovan .sf-duyulan { stroke: #5c4f70; }
#sefer.sf-kovan .sf-kilitli { fill: #1a1329; stroke: #5c4f70; }
#sefer.sf-kovan .sf-halka { stroke: var(--kv-ac); stroke-width: 1.4;
  filter: drop-shadow(0 0 3px rgba(199,138,232,.7)); }
#sefer.sf-kovan .sf-secim { stroke: var(--kv-dim); }
#sefer.sf-kovan .sf-iz-glif { fill: var(--kv-mut); stroke: var(--kv-mut); }
/* the mockup's pulsing target bracket, on the node you are standing on */
#sefer.sf-kovan .sf-hedef { display: block; stroke: var(--kv-ac);
  animation: kvNisan 2s ease-in-out infinite; transform-box: fill-box;
  transform-origin: center; }
@keyframes kvNisan {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  #sefer.sf-kovan .sf-hedef { animation: none; opacity: .9; } }

/* the last of the parchment: a gold count-badge, a blue-grey river and the
   ground line. A console has none of those -- it has data lines. */
#sefer.sf-kovan .sf-rozet-halka { fill: #0b0813; }
#sefer.sf-kovan .sf-rozet-ic { fill: var(--kv-ac); }
#sefer.sf-kovan .sf-rozet { fill: #0b0813; }
#sefer.sf-kovan .sf-nehir { stroke: var(--kv-dim); stroke-dasharray: 5 5; }
#sefer.sf-kovan .sf-nehir-gen { display: none; }
#sefer.sf-kovan .sf-taban { stroke: var(--kv-line); }

/* THE LABEL HALO IS INVERTED FOR A SCREEN. .sf-ad is written for parchment --
   dark glyph, thick PALE stroke -- which is what makes it legible on light
   paper and exactly what makes it a smear on a dark console. Same technique,
   opposite polarity: light glyph, dark stroke. */
#sefer.sf-kovan .sf-ad { stroke: #0b0813; stroke-width: 3.4px; }
#sefer.sf-kovan .sf-soru { fill: var(--kv-mut); }

/* ---- THE PALACE TIERS (nbharita.js): Nibiru's map is a tower section --------
   Earth's paper is parchment under an open sky; the homeworld has no outside,
   so its map is the palace drawing its own cross-section: copper schematic
   lines on near-black, tiers on lift shafts. One class swaps the whole skin. */
#sefer.sf-nb { background: #0d0705; }
#sefer.sf-nb .sf-kagit, #sefer.sf-nb #sf-kagit {
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(199,107,69,.045) 34px 35px),
    radial-gradient(circle at 50% 18%, #1c0f08 0%, #0d0705 74%) !important;
  border-color: #3a2114 !important; }
.nb-sema { width: 100%; height: 100%; display: block; font-family: var(--font); }
.nb-omurga { stroke: rgba(199,107,69,.16); stroke-width: .6; stroke-dasharray: .7 2.2; }
.nb-saft { stroke: #5e3520; stroke-width: .45; }
.nb-saft.canli { stroke: #c76b45; stroke-width: .65;
  filter: drop-shadow(0 0 1px rgba(199,107,69,.6)); }
.nb-saft.kilitli { stroke-dasharray: 1.4 1.6; }
.nb-siradaki { fill: #f0b26a; animation: nbNefes 1.5s ease-in-out infinite; }
@keyframes nbNefes { }
.nb-kat { cursor: pointer; }
.nb-oda { fill: #190d07; stroke: #8a4f33; stroke-width: .45; }
.nb-kat.secili .nb-oda { stroke: #f0b26a; stroke-width: .6; }
.nb-kat.burada .nb-oda { stroke: #e8955c; }
.nb-cift { fill: none; stroke: #e8955c; stroke-width: .35; }
.nb-kat.kilit { }
.nb-ad { fill: #d8a06a; font-size: 2.55px; text-anchor: middle; letter-spacing: .35px;
  font-weight: bold; }
.nb-kat.burada .nb-ad { fill: #f5c98a; }
.nb-rozet { fill: #c7913f; stroke: #0d0705; stroke-width: .4; }
.nb-rozet-n { fill: #0d0705; font-size: 3px; font-weight: bold; text-anchor: middle; }
.nb-bos { fill: #4a2c1d; }
.nb-kilit rect, .nb-kilit path { stroke: #8a6a4a; stroke-width: .5; fill: none; }
#sefer.sf-nb .sf-panel h3, #sefer.sf-nb #sf-panel h3 { color: #e8955c; }
#sefer.sf-nb .sf-rozet-ad { border-color: #8a4f33; color: #d8a06a; }
.nb-tarif { color: #b08a6a; font-size: 13px; line-height: 1.65; margin: 6px 0 10px; }
.nb-not { margin-top: 10px; padding: 10px 12px; border: 1px dashed #6b3d28;
  color: #b08a6a; font-size: 12px; line-height: 1.5; border-radius: 4px; }
#sefer.sf-nb .sf-git { background: linear-gradient(#d98a52, #b95f33);
  border-color: #8a4f33; color: #190d07; }
#sefer.sf-nb .sf-git:hover:not(:disabled) { color: #e8955c; border-color: #e8955c; }
@media (prefers-reduced-motion: reduce) { .nb-siradaki { animation: none; } }

/* ---- THE STRIP STOPS MOVING (owner, mobile film, 2026-08-24: "seçim sonrası
   ikonlar sağa sola aşağı yukarı oynuyor" + "soldaki ikonlar dünya ikonuna
   girmiş" + "sağdaki kilitli kapılar görünmüyor").
   Measured at 375px: .vt-mid computed 0px — the globe floats fixed over the
   band's centre with NO reserved ground, so both wings ran under it; and the
   doors' x was a function of the left group's width, so every instrument that
   crossed a visibility threshold slid the whole right wing. Three rigid
   zones now: left wing anchored left, a hard 60px berth for the orb, doors
   anchored right. A wing's content can change width all it likes — nothing
   outside it moves a pixel. */
body.mapless #cmd-vitals { display: flex !important; align-items: center; }
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-group {
  flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important;
  display: flex !important; justify-content: flex-start !important;
  gap: 9px !important; }
body.mapless #cmd-vitals .vt-mid {
  flex: 0 0 60px !important; width: 60px !important; align-self: stretch; }
body.mapless #cmd-vitals .vt-doors {
  flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important;
  display: flex !important; justify-content: flex-end !important;
  align-items: center; gap: 8px !important; margin-left: 0 !important; }
/* a locked door is a DOOR YOU CAN SEE IS LOCKED — .35 + grayscale(.75) under
   the CRT filter read as an empty slot on the phone, and the doors "appeared"
   only under a finger because :active repainted them. Visible ghost now. */
body.mapless #cmd-vitals .vt-door.vt-kilit {!important; filter: saturate(.35) brightness(.85) !important; }
/* the countdown badge: a locked door SAYS how many decrees remain, so a dim
   icon reads as "locked until N" rather than "broken". Painted only while
   data-kalan is set (the 500ms heartbeat in main.js maintains it). */
body.mapless #cmd-vitals .vt-door { position: relative; }
body.mapless #cmd-vitals .vt-door.vt-kilit[data-kalan]::after {
  content: attr(data-kalan);
  position: absolute; right: -4px; bottom: -4px;
  min-width: 13px; height: 13px; line-height: 13px;
  font-size: 11px; font-weight: 700; text-align: center;
  color: var(--acc-lit); background: #241408;
  border: 1px solid #6b5142; border-radius: 8px;
  padding: 0 2px; filter: none; pointer-events: none; }

/* ---- NOTHING WIDENS THE SCREEN, EVER (owner, mobile, 2026-08-24: "seçim
   sonrası ikonlar ve ekran sağa sola oynuyor"). The card swap runs entry
   animations and scene plates; any of them poking one frame past the viewport
   lets Safari pan the whole page sideways. The shell and the layout clip the
   X axis outright — a transient overflow now dies at the edge instead of
   moving the world. (clip, not hidden: no new scroll container, no scrollbar,
   fixed anchoring untouched.) */
.crt, #layout { overflow-x: clip !important; }

/* ---- LANGUAGE ON THE FRONT DOOR (owner, 2026-08-25) ------------------------- */
.ov-lang { display: flex; justify-content: center; gap: 10px; margin: 4px 0 14px; }
.ov-lang button { background: transparent; border: 1px solid #4a3f2a; color: #8d8371;
  font-family: var(--font); font-size: 11px; letter-spacing: 3px;
  padding: 8px 18px; border-radius: 4px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease; }
.ov-lang button.on { border-color: var(--gold, var(--w-gold)); color: var(--gold, var(--w-gold));
  box-shadow: 0 0 8px rgba(var(--gold-rgb), .25); }
.ov-lang button:hover { color: #e0d6c2; }

/* the options door beside the language pair on the title screen */
.ov-lang #ov-ayar { display: inline-flex; align-items: center; gap: 6px; }
.ov-lang #ov-ayar svg { }

/* ---- owner, 2026-08-25 (phone screenshot): "badge'lar geldi ve hala yeri
   kötü sağ tarafta ikonların" -------------------------------------------------
   Two measured faults on a ~400px phone. (1) The doors plate (flex:1 ≈ 150px)
   could not hold 4 buttons at gap 11-16 + 14px side padding, and with
   justify-content:flex-end the excess spilled LEFT and overflow:hidden cut the
   purse in half at the plate's edge. (2) The lock countdown pill (13px) sat on
   a 16px glyph, covering nearly half of it. This block is appended last so it
   outranks every earlier strip layer. */
body.mapless #cmd-vitals .vt-doors {
  gap: 10px !important; padding: 0 10px !important; }
@media (max-width: 520px) {
  body.mapless #cmd-vitals .vt-doors { gap: 8px !important; padding: 0 8px !important; }
}
/* the countdown: a small corner tick above the glyph, not a plate over it */
body.mapless #cmd-vitals .vt-door.vt-kilit[data-kalan]::after {
  right: -3px; bottom: auto; top: -3px;
  min-width: 11px; height: 11px; line-height: 11px;
  font-size: 11px; padding: 0 1px; border-radius: 6px;
}

/* ---- owner's phone, 2026-08-25: "bu şekilde çıkıyor hala" -------------------
   Two structural guards so the doors plate can never repeat the screenshot,
   whatever cache or platform quirk is in play. (1) Android Chrome font
   boosting was never disabled site-wide; it inflates generated text like the
   lock countdown into a plate-sized pill. This console types its own sizes —
   no user-agent boosting anywhere. (2) The doors plate may never be narrower
   than its icons: flex is welcome to give it MORE room, never less, so
   overflow-clipping the first icon becomes impossible by construction. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.mapless #cmd-vitals .vt-doors { min-width: max-content !important; }
body.mapless #cmd-vitals .vt-door.vt-kilit[data-kalan]::after {
  max-height: 11px; overflow: hidden; }

/* ---- owner's phone, 2026-08-25 (2): "sol üstteki ikonlar çok sıkışmış" -----
   The min-width:max-content guard above fixed the doors plate by TAKING the
   flex slack from the readings plate — the left panel dropped under its own
   content width and crushed the four meters. The real phone fault was font
   boosting, which text-size-adjust already ended; with gaps at 8-10px both
   plates fit an equal split on every width that exists. So the guard goes,
   the split returns to half-and-half, and the readings plate sheds a little
   side padding so the meters breathe. */
body.mapless #cmd-vitals .vt-doors { min-width: 0 !important; }
body.mapless #cmd-vitals #vt-group { padding: 0 10px !important; }

/* ---- owner's phone, 2026-08-25 (3): "hala düzelmedi" ------------------------
   The countdown badge is withdrawn entirely: on the phone it read as number
   stickers glued over the glyphs, and with the grey desaturation the locked
   pair looked broken rather than locked. A locked door is now simply the same
   door, dim, in its own colour — the tap already answers with when it opens. */
body.mapless #cmd-vitals .vt-door.vt-kilit::after { display: none !important; content: none !important; }
body.mapless #cmd-vitals .vt-door.vt-kilit {
  opacity: .45 !important; filter: none !important; }

/* ---- owner, 2026-08-25 (final spec): "sağ üstteki ikonları sağa align edip
   aralarına da aynı soldaki gibi bir mesafe bırak" ----------------------------
   Implemented literally, with every knob that could ever spread the row pinned
   shut: the plate packs its icons hard right, the gap matches the readings
   plate (9px), and each door is exactly its glyph plus 4px — no inherited
   width, no flex growth, no stray margin from any earlier breakpoint. */
body.mapless #cmd-vitals .vt-doors {
  display: flex !important; flex-wrap: nowrap !important;
  justify-content: flex-end !important; align-items: center !important;
  gap: 9px !important; padding: 0 10px !important; }
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe),
body.mapless #cmd-vitals .vt-doors .vt-face {
  width: auto !important; height: auto !important; min-width: 0 !important;
  flex: 0 0 auto !important; margin: 0 !important; padding: 4px !important; }
@media (max-width: 380px) {
  body.mapless #cmd-vitals .vt-doors { gap: 8px !important; padding: 0 8px !important; }
}

/* ---- owner, 2026-08-25 (root cause, sixth report): the strip must survive
   ANY viewport width, including Android display-zoom phones whose CSS width
   is 320-360 while every test here ran at 412. Fixed breakpoints kept missing
   the owner's real width, so the sizes stop being steps and become continuous:
   every knob is min(design-size, share-of-viewport). At 412px nothing
   changes; as the viewport narrows, glyphs, gaps, paddings and the orb berth
   shrink together and the two plates can never be narrower than their rows. */
body.mapless #cmd-vitals { --di: min(16px, 4.2vw); --gi: min(14px, 3.8vw); }
body.mapless #cmd-vitals .vt-mid {
  flex: 0 0 min(60px, 15vw) !important; width: min(60px, 15vw) !important; }
body.mapless #cmd-vitals .vt-doors {
  gap: min(9px, 2.1vw) !important; padding: 0 min(10px, 2.2vw) !important; }
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe),
body.mapless #cmd-vitals .vt-doors .vt-face {
  padding: min(4px, 1vw) !important; }
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe) svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg {
  width: var(--di) !important; height: var(--di) !important; }
body.mapless #cmd-vitals #vt-group {
  gap: min(9px, 2.1vw) !important; padding: 0 min(10px, 2.2vw) !important; }
body.mapless #cmd-vitals #vt-group .vt { width: auto !important; }
body.mapless #cmd-vitals #vt-group .vt .vt-ic,
body.mapless #cmd-vitals #vt-group .vt .vt-ic svg,
body.mapless #cmd-vitals #vt-group .vt .vt-ic > svg {
  width: var(--gi) !important; height: var(--gi) !important;
  max-width: none !important; max-height: none !important; }

/* ---- owner, 2026-08-25: "dünya ikonu seçeneklerde de çıkıyor" ---------------
   The globe lives on <body> at z-index 47 so it can hang below the strip; the
   settings drawer paints below 47, so the orb floated over the open drawer.
   While the drawer is open the orb simply is not part of the picture. */
body:has(#hdr-drawer.open) .vt-globe-free,
body:has(#hdr-drawer.open) .vt-door.vt-globe { display: none !important; }

/* ---- owner, 2026-08-25: "şimdi de sol tarafı bozdun" ------------------------
   The vw layer above set the readings' boxes to width:auto, which shrank each
   from 22px to its 14px glyph and huddled the row into the plate's left half.
   The right plate was the only patient; the readings go back to exactly their
   pre-518 geometry. */
body.mapless #cmd-vitals #vt-group .vt { width: 22px !important; }
body.mapless #cmd-vitals #vt-group { gap: 9px !important; padding: 0 10px !important; }

/* ---- THE GAME'S OWN CONFIRMATION (main.js onay()) ---------------------------
   Replaces window.confirm(), which a WebView with no WebChromeClient answers
   false without drawing — the packaged app's dead "restart" button. Same frame
   language as the seal modal so a question never looks like a system alert. */
#onay-modal { position: fixed; inset: 0; z-index: 980;
  background: rgba(3,2,1,.86); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: obIn .2s ease-out both; }
.onay-box { width: min(94vw, 420px); padding: 22px 22px 18px;
  background: rgba(18,13,8,.97); border: 1px solid rgba(var(--gold-rgb),.5);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 60px rgba(0,0,0,.7); }
.onay-msg { margin: 0 0 20px; color: #e0dcd3; text-align: center;
  font-family: var(--read, inherit); font-size: 14px; line-height: 1.6; }
.onay-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onay-btns button { padding: 13px 8px; cursor: pointer; font-family: var(--font);
  font-size: 12px; letter-spacing: .18em; color: #cfc6b8;
  background: rgba(10,8,5,.9); border: 1px solid rgba(var(--gold-rgb),.35);
  transition: border-color .18s, color .18s; }
.onay-btns button.gold { border-color: var(--w-gold); color: var(--w-glow); }
.onay-btns button:active { border-color: var(--w-glow); color: var(--w-glow); }

/* ---- THE PICTURE STOPS PUMPING WHILE THE BODY TYPES ------------------------
   Owner's third recording (build 521, 2026-08-25): the flicker was never the
   seal effects. Measured off the video, band by band: the scene swung
   49 → 150 → 49 five times in 0.6s and settled only when the typing stopped,
   while the HUD band never moved at all.

   The cause is a layout feedback loop. The scene box was `flex: 1 6 auto` —
   grow 1, shrink 6 — so its height was simply whatever the card column had
   left over. The body types itself in character by character; every new LINE
   changed that leftover, the box re-solved its height, and
   `#dc-art { height: 100%; object-fit: cover }` rescaled and re-cropped the
   art on every tick. A picture zooming several times a second is exactly what
   a phone reads as violent flicker.

   The box now takes its height from the VIEWPORT, so nothing the typewriter
   does can move it. The card already scrolls when it must (max-height +
   overflow-y: auto), so a long body costs a scroll, never a relayout of the
   art. The sealed state keeps its own grow rule — by then nothing is typing. */
body.mapless .dc-scene.on {
  /* THE PICTURE GIVES WAY FIRST — index.html's own contract, restored. It was
     flex 0 0 (never shrink) to stop the art rescaling while the body typed;
     that is now guaranteed by showDecision reserving the body's final height
     before the first character, so the scene can carry the deficit again and
     the choices stop being pushed off a column that cannot scroll.
     dvh, not vh: the whole shell is dvh, and on iOS Safari vh is the height
     with the toolbars retracted — bigger than what the player can see. */
  flex: 0 6 auto !important;
  height: clamp(150px, 46dvh, 520px) !important;
  min-height: 118px !important; max-height: none !important;
}
body.mapless .dc-box.muhurlu .dc-scene.on {
  flex: 1 1 auto !important; height: auto !important; min-height: 30dvh !important;
}
@media (max-height: 560px) and (orientation: landscape) {
  body.mapless .dc-scene.on { height: 30dvh !important; }
}

/* ---- THE LANGUAGE ROW WEARS FLAGS (owner, 2026-08-25) ----------------------
   "change language yerine de dil bayrakları olsa daha iyi olur" — the row said
   what it would do but never what you were on. Now both flags sit on it: the
   language in play is lit and ringed, the other waits at low light, and a tap
   on either picks that one. */
#btn-lang.drw-lang { display: flex; align-items: center; gap: 10px; }
#btn-lang .drw-t { flex: 1; text-align: left; }
.lang-flags { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lang-flags .lf { display: inline-flex; padding: 2px; border-radius: 4px;
  border: 1px solid transparent; opacity: .38; filter: saturate(.5);
  transition: opacity .18s, filter .18s, border-color .18s; }
.lang-flags .lf.on { opacity: 1; filter: none; border-color: rgba(var(--gold-rgb),.8);
  box-shadow: 0 0 10px rgba(var(--lit-rgb),.25); }
.lang-flags .lf-i { display: block; width: 26px; height: 17px; border-radius: 2px; }

/* the acquisition rite says what the piece DOES, not just its name */
#al-toren .al-ne { display: block; margin: 6px 14px 0; font-style: normal;
  font-family: var(--read, inherit); font-size: 12px; line-height: 1.5;
  color: #cfc6b8; opacity: .92; }

/* ---- THE ICONS SPREAD ACROSS THEIR PLATE (owner, 2026-08-26) ---------------
   "yukarıdaki ikonlar çok sağa ve sola yaslanmış durumda, ekranın boyutuna
   göre onların arasındaki boşluğu açman gerekiyor" — measured: each plate is
   161px wide and its four icons occupy 111px, so ~30px of slack existed and
   both plates dumped it on one side (the readings were packed left, the doors
   packed right). Distributing it instead spreads the icons evenly and, because
   the plates are flex:1, the spacing now scales with the screen on its own. */
body.mapless #cmd-vitals #vt-group,
body.mapless #cmd-vitals .vt-doors {
  justify-content: space-between !important;
}
/* the declared gap becomes a FLOOR on narrow screens, where there is no slack
   left to distribute and space-between would collapse to it anyway */
body.mapless #cmd-vitals #vt-group { gap: 9px !important; }
body.mapless #cmd-vitals .vt-doors { gap: 9px !important; }

/* ---- ADVANCE BAR: the map never has to be solved to keep playing ------------ */
.sf-ilerle { flex: 0 0 auto; padding: 8px 12px 4px; }
.sf-ilerle:empty { display: none; }
.sf-ilerle-btn { display: block; width: 100%; padding: 14px 12px; cursor: pointer;
  background: linear-gradient(#2a1c0a, #16110a); border: 1px solid var(--w-gold);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  color: var(--w-glow); font-family: var(--font); font-size: 12.5px; letter-spacing: .14em;
  transition: box-shadow .18s, border-color .18s; }
.sf-ilerle-btn:active { border-color: var(--w-glow); box-shadow: 0 0 22px rgba(var(--lit-rgb),.3); }

/* ---- THE BILL RIDES THE SEAL CUE (owner, 2026-08-26) ------------------------
   First cut printed the consequence as bordered chips under the label; four of
   them wrapped onto two rows and ate the card ("ekranı çok daraltıyorlar").
   The armed option already spends one row on its SEAL cue, so the two figures
   that matter are appended to that row instead — same information, no new
   pixels, and it stays on one line whatever the wording. */
.dc-opt.armed::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- BREAKING A FREQUENCY (palace.js hatToreni) -----------------------------
   Owner, 2026-08-26: opening a line has to FEEL like something. Three rings go
   out from the dish, the far side answers, and the plate says what the line
   pays. Same frame language as the acquisition rite so the two read as one
   family of "it happened" moments. */
#hat-toren { position: fixed; inset: 0; z-index: 965; display: flex;
  align-items: center; justify-content: center;
  background: rgba(4,3,2,.78); animation: alFade 3.4s ease forwards; }
#hat-toren .ht-kutu { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 34px 40px; text-align: center;
  animation: alKutu .45s cubic-bezier(.2,1.4,.4,1); }
#hat-toren .ht-antenne { position: relative; width: 96px; height: 96px;
  display: grid; place-items: center; margin-bottom: 6px; }
#hat-toren .ht-cak { width: 52px; height: 52px; color: var(--hr); position: relative; z-index: 1;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hr) 70%, transparent)); }
#hat-toren .ht-halka { position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--hr); opacity: 0; animation: htHalka 2.1s ease-out infinite; }
#hat-toren .ht-halka:nth-child(2) { animation-delay: .5s; }
#hat-toren .ht-halka:nth-child(3) { animation-delay: 1s; }
@keyframes htHalka {
  0%   { transform: scale(.35); opacity: .85; }
  100% { transform: scale(1.9); opacity: 0; } }
#hat-toren .ht-ust { font-family: var(--font); font-size: 11px; letter-spacing: 4px;
  color: var(--hr); opacity: .85; font-style: normal; }
#hat-toren .ht-ad { font-family: var(--font); font-size: 19px; letter-spacing: .16em;
  color: #f0e6d2; text-shadow: 0 0 18px color-mix(in srgb, var(--hr) 55%, transparent); }
#hat-toren .ht-ne { font-family: var(--read, inherit); font-size: 12.5px; line-height: 1.55;
  color: #cfc6b8; max-width: 30ch; }
#hat-toren .ht-muhur { margin-top: 4px; font-family: var(--font); font-size: 11px;
  letter-spacing: .18em; color: var(--hr); border: 1px solid currentColor; padding: 4px 12px; }
@media (prefers-reduced-motion: reduce) {
  #hat-toren .ht-halka { animation: none; opacity: .4; }
  #hat-toren .ht-kutu { animation: none; } }

/* ---- THE OBJECTIVE BAND (main.js hedefBandi) --------------------------------
   One line above the card's title: where you stand on the eight-step road and
   what the next step is asking for. The game's spine was three taps deep in the
   profile; a player with no visible long-term goal reads every card as busywork. */
.dc-hedef { display: flex; align-items: baseline; gap: 10px; width: 100%;
  margin: 0 0 8px; padding: 7px 11px; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.13), rgba(var(--gold-rgb),.03));
  border: 1px solid rgba(var(--gold-rgb),.34); border-left: 3px solid var(--gold, var(--acc-lit));
  font-family: var(--font); color: #cfc6b8; }
.dc-hedef.hidden { display: none; }
.dc-hedef b { flex: 0 0 auto; font-size: 11px; letter-spacing: .13em; color: var(--w-glow);
  font-weight: 500; font-variant-numeric: tabular-nums; }
.dc-hedef i { flex: 1; min-width: 0; font-style: normal; font-size: 11px;
  letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-hedef s { text-decoration: none; color: var(--w-mud); }
.dc-hedef:active { border-color: var(--gold, var(--acc-lit)); }

/* ---- THE GROUND'S MEMORY, AND ARRIVING ON IT (seferui.js) -------------------
   Owner, 2026-08-26: every place should show what mark you left on it, and a
   ride should end in a moment rather than a redraw. */
.sf-iz-glif { pointer-events: none; }

@keyframes sfVaris { 0% { r: 9; opacity: .9; } 100% { r: 30; opacity: 0; } }
.sf-varis-halka { animation: sfVaris 1.1s ease-out forwards; }
.sf-varis-halka.sf-gec { animation-delay: .28s; }
#sf-varis-ad { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  text-align: center; pointer-events: none; padding: 7px 16px;
  background: rgba(20,17,12,.9); border: 1px solid rgba(var(--gold-rgb),.5);
  animation: sfVarisAd 2.2s ease forwards; }
#sf-varis-ad i { display: block; font-style: normal; font-family: var(--font);
  font-size: 11px; letter-spacing: .3em; color: var(--w-mud); }
#sf-varis-ad b { display: block; font-family: var(--font); font-size: 13px;
  letter-spacing: .14em; color: var(--w-glow); margin-top: 3px; }
@keyframes sfVarisAd {
  0% { transform: translateX(-50%) translateY(10px); }
  14% { opacity: 1; transform: translateX(-50%) translateY(0); }
  78% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sf-varis-halka { animation: none; opacity: 0; }
  #sf-varis-ad { animation: none; } }

/* a figure that changes says WHICH WAY it went — the purse is the number the
   player actually spends, and it used to change in silence */
#cmd-vitals .flash-up { animation: vtUp .46s ease-out; }
#cmd-vitals .flash-dn { animation: vtDn .46s ease-out; }
@keyframes vtUp { 0% { color: #7fd05a; text-shadow: 0 0 10px rgba(127,208,90,.6); } 100% { } }
@keyframes vtDn { 0% { color: #e0705a; text-shadow: 0 0 10px rgba(224,112,90,.55); } 100% { } }
@media (prefers-reduced-motion: reduce) {
  #cmd-vitals .flash-up, #cmd-vitals .flash-dn { animation: none; } }
/* the cue's wide display spacing is set for two words; with the bill appended
   it needs the tighter setting or the row runs out of button */
.dc-opt.armed.fatura::after { letter-spacing: .1em; font-size: 11px; padding: 0 8px; }

/* an act's NAME must never wrap; the sentence saying what the act BOUGHT must
   never be cut (owner: "AĞIRLANDI — defterler b…"). Same slot, two jobs. */
#sp-acts .sp-act.sp-oldu .sp-t { white-space: normal; overflow: visible;
  text-overflow: clip; line-height: 1.45; }
#sp-acts .sp-act.sp-oldu { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }

/* coming home reuses the departure's whole staging; only the lamp on the night
   side is its own — the branch's light, which is what you are returning to */
#nb-arrive.dunya .nba-lamp { animation: nbaLamp 2.4s ease-out both; }
@keyframes nbaLamp { 0%, 30% { r: 2; }
  62% { opacity: 1; r: 6; } 100% { opacity: .85; r: 4.6; } }
@media (prefers-reduced-motion: reduce) { #nb-arrive.dunya .nba-lamp { animation: none; } }

/* ---- HOW A FINISHED PLACE REMEMBERS YOU (seferui.js izHatirlar) -------------
   Only on ground whose business is done, and it carries the colour of the
   memory: red where they were made afraid, green where they were spared, gold
   where you dug, sand where you merely ruled. */
.sf-iz { margin: 8px 0 4px; padding: 10px 12px; font-family: var(--read, inherit);
  font-size: 12.5px; line-height: 1.55; color: #cfc6b8;
  background: color-mix(in srgb, var(--iz, var(--w-mud)) 14%, rgba(0,0,0,.25));
  border-left: 3px solid var(--iz, var(--w-mud)); }
.sf-iz s { display: block; text-decoration: none; font-family: var(--font);
  font-size: 11px; letter-spacing: .13em; color: var(--w-mud); margin-bottom: 5px; }
.sf-iz u { display: block; text-decoration: none; font-family: var(--font);
  font-size: 15px; letter-spacing: .16em; color: var(--iz, var(--w-mud)); margin-bottom: 5px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--iz, var(--w-mud)) 45%, transparent); }
.sf-iz b { display: block; margin-top: 6px; font-family: var(--font); font-size: 11px;
  letter-spacing: .1em; font-weight: 500; color: var(--w-mud);
  font-variant-numeric: tabular-nums; }

/* the commander's own watch, on the screen that already reports the age */
.es-sicil { border: 1px solid rgba(var(--gold-rgb),.3); background: rgba(0,0,0,.28);
  padding: 12px 14px; margin: 4px 0 10px; }
.es-unvan { font-family: var(--font); font-size: 14px; letter-spacing: .18em;
  color: var(--w-glow); margin-bottom: 8px; }
.es-sc { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0;
  font-family: var(--font); font-size: 11.5px; }
.es-sc + .es-sc { border-top: 1px solid rgba(var(--gold-rgb),.12); }
.es-sc span { color: var(--w-mud); letter-spacing: .06em; }
.es-sc b { color: var(--w-sand); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ============================================================================
   THE PRESS (owner, 2026-08-26: "basma animasyonları, bir şeyleri seçme
   animasyonları daha native ve pürüzsüz geçsin")
   Audited before writing: `-webkit-tap-highlight-color` was set NOWHERE, so on
   Android every single tap flashed the browser's own grey box over the art —
   the loudest "this is a web page" tell there is. And `touch-action:
   manipulation` was on .dc-opt alone, so every other control still paid the
   300ms double-tap wait. One layer fixes both and gives the whole console a
   single press response instead of a dozen ad-hoc :active rules.
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; }
button, .rt-btn, .sf-pin, .sf-git, .dc-opt, .pal-tab, .mk-tab, .pr-tab,
.vt-door, .vt-face, .ms-head, .sp-act, .dn-al, .lf, .sf-ilerle-btn, .onay-btns button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
/* ONE PRESS, EVERYWHERE. Fast in so the finger is answered immediately, springy
   out so the control feels like a physical thing settling back. Transform only —
   it runs on the compositor and cannot cost a layout. */
button, .rt-btn, .sf-git, .dc-opt, .pal-tab, .mk-tab, .pr-tab, .sf-ilerle-btn {
  transition: transform .16s cubic-bezier(.2, .9, .3, 1),
              border-color .18s ease, background-color .18s ease, color .18s ease;
}
button:active, .rt-btn:active, .sf-git:active, .pal-tab:active,
.mk-tab:active, .pr-tab:active, .sf-ilerle-btn:active {          /* the way down is instant; the way back springs */
}/* press handled by MÜHÜR */

/* ARMING SHOULD SLIDE, NOT JUMP. The SEAL cue used to appear whole and the
   option's padding snapped 12px taller in one frame. */
.dc-opt { transition: transform .16s cubic-bezier(.2,.9,.3,1),
                      border-color .2s ease, background-color .2s ease,
                      box-shadow .2s ease, padding-bottom .2s cubic-bezier(.2,.9,.3,1); }
/* THE PRESS BAR HOLDS ITS OWN TEXT, SO IT MUST NOT HOLD A LAYER. With `both`
   the finished slide-in keeps an animated transform on the bar for as long as
   the option is armed; iOS rasterises that layer once and the 13px, wide-
   tracked SEAL line comes back blurred. It ends on transform:none, which is
   also its resting style, so `backwards` looks identical and frees the layer. */
.dc-opt.armed::after { animation: dcSealIn .22s cubic-bezier(.2, .9, .3, 1) backwards; }
@keyframes dcSealIn { from { transform: translateY(100%); } to { transform: none; } }
/* a control that is doing nothing must not look pressable */
button:disabled, .dc-opt:disabled { transition: none; }/* press handled by MÜHÜR */

@media (prefers-reduced-motion: reduce) {
  button, .rt-btn, .sf-git, .dc-opt, .pal-tab, .mk-tab, .pr-tab, .sf-ilerle-btn { transition: none; }/* press handled by MÜHÜR */

  .dc-opt.armed::after { animation: none; }
}

/* ---- THE GEAR HAS A FACE NOW ------------------------------------------------
   The stall listed a name and a price and showed nothing (owner: "donanım
   sekmesinde donanımların resimleri olsun"). Drawn in cardart.js like every
   other picture in this game; coloured by whose stall it came off. */
.dn-ikon { width: 26px; height: 26px; flex: 0 0 26px; display: block;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.dn-mal { display: flex; align-items: center; gap: 9px; }
.dn-mal .dn-ad { flex: 1 1 auto; min-width: 0; }
.dn-ikon + b { margin-left: 2px; }

/* ---- THE COMPANION ---------------------------------------------------------- */
.yc-yoldas { margin: 6px 0 2px; padding: 7px 10px; border-radius: 6px;
  background: rgba(224,176,64,.09); border-left: 2px solid rgba(224,176,64,.55);
  color: #e6cf98; font-size: 12.5px; line-height: 1.45; }
.sf-yoldas { margin: 2px 0 6px; color: #e0b040; font-size: 11.5px;
  letter-spacing: .04em; opacity: .92; }

/* ============================================================================
   THE STILLNESS (owner, 2026-08-26: "oyun telefonda çalışırken telefon aşırı
   ısınıyor")
   Measured on the live build with a card on the table and nobody touching
   anything: SEVENTEEN running animations, and every single one of them
   infinite — no finite ones at all. The page never reaches an idle frame, so
   the compositor and the main thread redraw sixty times a second for as long
   as the app is open. The shell also holds FLAG_KEEP_SCREEN_ON, so the display
   never sleeps either. That combination is the heat.
   None of these carry information: they are ambience — a bust breathing, eyes
   blinking, dust twinkling, a slow ray sweep. A commander reading a card for
   forty seconds does not need any of it moving. So after six quiet seconds the
   ambience holds its pose, and the first touch or the next card starts it again.
   Deliberately NOT paused: vtCritLit (a reading in crisis is a warning, not
   decoration) and the note blink, for the same reason.
   ========================================================================== */
body.dingin .ca-breathe, body.dingin .ca-rise, body.dingin .ca-gaze,
body.dingin .ca-blink, body.dingin .ca-tw, body.dingin .ca-tw2,
body.dingin .ca-rays, body.dingin .ca-nib, body.dingin .ca-shim,
body.dingin .ca-flick, body.dingin .ca-rapor,
body.dingin .dc-scene, body.dingin .decision,
body.dingin .ce-actor, body.dingin .ce-shake, body.dingin .ce-topple, body.dingin .ce-scorch {
  animation-play-state: paused !important;
}
/* the card's own art carries the most expensive one — a transform on the group
   that holds the whole bust, inside an SVG that also paints a grain filter */
body.dingin #dc-art svg *, body.dingin #dc-scene svg * { animation-play-state: paused !important; }

/* ============================================================================
   THE RECKONING — the beat that ends a scene.
   498 closing texts are written into the deck, four per node, one per path, and
   every one of them used to go to the log feed and scroll away behind the next
   card. This is where they live now, and this is what it was asked to be: a page
   that opens with the commander's own sentences, weighs what the scene cost
   against what it gave, opens the door that was actually walked, and ends by
   pointing at the four readings on the strip.
   The whole beat is FINITE — under two seconds, once — so it never argues with
   the stillness layer that keeps the phone cool.
   ========================================================================== */
#dg-hesap { position: fixed; inset: 0; z-index: 715; display: grid; place-items: center;
  background: rgba(5,4,2,.8); padding: 20px; transition: opacity .26s ease; }
#dg-hesap.out { opacity: 0; }
#dg-hesap .dgh-box { width: min(410px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: #12100a; border: 1px solid var(--w-gold); border-radius: 12px; padding: 18px 18px 15px;
  box-shadow: 0 18px 50px rgba(0,0,0,.62);
  animation: dghIn .3s cubic-bezier(.2,.9,.3,1) both; }
@keyframes dghIn { from { transform: translateY(14px) scale(.985); } }
#dg-hesap .dgh-ust { font-family: var(--font); font-size: 11px; letter-spacing: .14em;
  color: var(--w-mud); text-transform: uppercase; }
#dg-hesap h3 { margin: 8px 0 10px; font-size: 14px; letter-spacing: .12em; color: var(--acc-lit);
  font-weight: 500; line-height: 1.3; }
/* the commander's own words, in the order they were said */
#dg-hesap .dgh-soz { border-left: 2px solid var(--w-gold); padding: 2px 0 2px 11px; margin: 0 0 11px; }
#dg-hesap .dgh-soz i { display: block; font-family: var(--font); font-size: 11.5px;
  font-style: italic; color: var(--w-gold); line-height: 1.55; }
#dg-hesap .dgh-soz i + i { margin-top: 4px; }
#dg-hesap p { margin: 0 0 12px; font-size: 13px; line-height: 1.62; color: var(--w-sand); }

/* ---- the balance: three rows, every one of them nameable ------------------- */
#dg-hesap .dgh-terazi { margin: 0 0 4px; padding-top: 11px; border-top: 1px solid #241f16; }
#dg-hesap .dgh-sat { display: grid; grid-template-columns: 78px 1fr 48px;
  align-items: center; gap: 9px; padding: 3px 0; }
#dg-hesap .dgh-ad { font-family: var(--font); font-size: 11px; letter-spacing: .09em;
  color: var(--w-mud); text-align: right; line-height: 1.28; }
#dg-hesap .dgh-cub { height: 9px; background: #191509; border-radius: 2px;
  position: relative; overflow: hidden; }
#dg-hesap .dgh-cub i { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 2px; }
#dg-hesap .dgh-cub i.sag { left: 50%; } #dg-hesap .dgh-cub i.sol { right: 50%; }
#dg-hesap .dgh-cub i.kan { background: #c2412f; }
#dg-hesap .dgh-cub i.iyi { background: #7fd05a; }
#dg-hesap .dgh-cub i.altin { background: var(--acc-lit); }
#dg-hesap .dgh-cub i.bos { background: #2a2417; }
#dg-hesap.ac .dgh-cub i { animation: dghBar .6s cubic-bezier(.2,.9,.3,1) .15s forwards; }
@keyframes dghBar { to { width: var(--w); } }
#dg-hesap .dgh-deg { font-family: var(--font); font-size: 13px; text-align: left;
  font-variant-numeric: tabular-nums; }
#dg-hesap .dgh-deg.kan { color: #e0483a; } #dg-hesap .dgh-deg.iyi { color: #7fd05a; }
#dg-hesap .dgh-deg.altin { color: var(--acc-lit); } #dg-hesap .dgh-deg.bos { color: #5c5646; }
#dg-hesap .dgh-orta { height: 1px; background: #241f16; margin: 6px 0; position: relative; }
#dg-hesap .dgh-orta::after { content: ''; position: absolute; left: 50%; top: -30px; bottom: -30px;
  width: 1px; background: #221d13; }

/* ---- ONE DOOR WALKED, THREE SHUT ------------------------------------------ */
#dg-hesap .dgh-kapilar { display: flex; align-items: flex-end; justify-content: center;
  gap: 8px; margin: 15px 0 24px; padding-top: 13px; border-top: 1px solid #241f16;
  perspective: 520px; perspective-origin: 50% 40%; }
#dg-hesap .dgh-kapi { position: relative; width: 56px; height: 76px; flex: 0 0 56px;
  border: 1.5px solid var(--sonrenk, var(--w-gold)); border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg,#15120a,#0c0a06); transform-style: preserve-3d; }
#dg-hesap .dgh-kapi::before { content: ''; position: absolute; inset: 5px;
  border: 1px solid #2a2417; border-radius: 3px; }
#dg-hesap .dgh-oda { position: absolute; inset: 7px; border-radius: 3px; background: #050403; }
#dg-hesap .dgh-isik { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 0; opacity: 0;
  border-radius: 0 0 3px 3px; pointer-events: none;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--sonrenk,#f0d894) 46%, transparent),
    color-mix(in srgb, var(--sonrenk,#f0d894) 14%, transparent) 55%, transparent); }
#dg-hesap .dgh-kanat { position: absolute; inset: 7px; border-radius: 3px;
  transform-origin: left center; border: 1px solid #3a2f1a;
  background: linear-gradient(100deg,#241d10,#191408 62%,#120e07);
  box-shadow: inset -6px 0 12px rgba(0,0,0,.55); }
#dg-hesap .dgh-kanat span { position: absolute; right: 7px; top: 50%; width: 5px; height: 5px;
  margin-top: -2.5px; border-radius: 50%; background: var(--w-mud); }
#dg-hesap .dgh-kikon { position: absolute; left: 50%; bottom: 17px; width: 26px; height: 26px;
  margin-left: -13px;
  /* the door's own light lives here, not in dghRise's last frame: a filter held
     by a forwards fill keeps this icon on a rasterised layer for good */
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sonrenk,#f0d894) 55%, transparent)); }
#dg-hesap .dgh-kad { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center;
  opacity: 0; font-family: var(--font); font-size: 11px; letter-spacing: .13em;
  color: var(--sonrenk, var(--acc-lit)); white-space: nowrap; }
#dg-hesap .dgh-kkapali { position: relative; width: 56px; height: 76px; flex: 0 0 56px;
  border: 1px solid #2a2417; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg,#0e0c07,#090804); }
#dg-hesap .dgh-kkapali span { position: absolute; inset: 5px; border-radius: 2px;
  background: linear-gradient(100deg,#16120a,#100d07); border: 1px solid #241f16; }
#dg-hesap .dgh-kalt { font-family: var(--font); font-size: 11px; letter-spacing: .1em;
  color: var(--w-olive); text-align: center; margin: 0 0 4px; }
/* the beat */
#dg-hesap.ac .dgh-kanat { animation: dghSwing 1.05s cubic-bezier(.35,.02,.2,1) .35s both; }
@keyframes dghSwing { from { transform: rotateY(0deg); } to { transform: rotateY(-104deg); } }
#dg-hesap.ac .dgh-isik { animation: dghGlow .9s ease-out .72s both; }
@keyframes dghGlow { from { height: 0; } to { height: 48px; opacity: 1; } }
#dg-hesap.ac .dgh-kikon { animation: dghRise .85s cubic-bezier(.2,.9,.3,1) 1.02s both; }
@keyframes dghRise { 0% { transform: translateY(16px) scale(.66); }
  60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
#dg-hesap.ac .dgh-kad { animation: dghAd .5s ease-out 1.5s both; }
@keyframes dghAd { from { transform: translateY(5px); } to { opacity: 1; transform: none; } }
#dg-hesap.ac .dgh-kkapali { animation: dghDim .7s ease-out .5s both; }
@keyframes dghDim { to { opacity: .5; } }

/* ---- and what it did to the strip ----------------------------------------- */
#dg-hesap .dgh-konsol { display: flex; gap: 10px; justify-content: center;
  padding-top: 11px; margin-top: 6px; border-top: 1px solid #241f16; }
#dg-hesap .dgh-sok { text-align: center; width: 60px; }
#dg-hesap .dgh-sic svg { width: 17px; height: 17px; display: block; margin: 0 auto 5px;
  fill: #cbb282; }
#dg-hesap .dgh-sok em { display: block; height: 3px; border-radius: 2px; background: #241f16;
  position: relative; overflow: hidden; }
#dg-hesap .dgh-sok em b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px;
  background: var(--w-gold); }
#dg-hesap.ac .dgh-sok em b { animation: dghBar .7s cubic-bezier(.2,.9,.3,1) .8s forwards; }
#dg-hesap .dgh-sok u { display: block; text-decoration: none; font-family: var(--font);
  font-size: 11.5px; font-weight: 600; margin-top: 4px; opacity: 0;
  font-variant-numeric: tabular-nums; }
#dg-hesap .dgh-sok u.arti { color: #7fd05a; } #dg-hesap .dgh-sok u.eksi { color: #e0a33a; }
#dg-hesap .dgh-sok u.bos { color: #5c5646; }
#dg-hesap.ac .dgh-sok u { animation: dghUcus .8s cubic-bezier(.2,.9,.3,1) both; }
#dg-hesap.ac .dgh-sok:nth-child(1) u { animation-delay: .74s; }
#dg-hesap.ac .dgh-sok:nth-child(2) u { animation-delay: .86s; }
#dg-hesap.ac .dgh-sok:nth-child(3) u { animation-delay: .98s; }
#dg-hesap.ac .dgh-sok:nth-child(4) u { animation-delay: 1.1s; }
@keyframes dghUcus { 0% { transform: translateY(16px); }
  55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* 7px at #4a4235 on #12100a was under 2:1 — the owner could not read it */
#dg-hesap .dgh-sok s { display: block; text-decoration: none; font-family: var(--font);
  font-size: 11px; letter-spacing: .04em; color: var(--w-mud); margin-top: 3px; }
#dg-hesap .dgh-kok { font-family: var(--font); font-size: 11px; letter-spacing: .1em;
  color: var(--w-mud); text-align: center; margin-top: 9px; }

/* ---- the seal -------------------------------------------------------------- */
#dg-hesap .dgh-muhur { display: flex; align-items: center; gap: 10px; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid #241f16; color: var(--w-gold); }
#dg-hesap .dgh-muhur.temiz { color: #5fb3a8; }
#dg-hesap .dgh-muhur svg { flex: 0 0 32px; width: 32px; height: 32px; }
#dg-hesap .dgh-muhur span { font-family: var(--font); font-size: 11.5px; letter-spacing: .12em;
  color: var(--w-mud); line-height: 1.6; }
#dg-hesap .dgh-muhur b { color: #efe6d2; font-weight: 500; }
#dg-hesap button { width: 100%; margin-top: 14px; padding: 11px; background: none; cursor: pointer;
  border: 1px solid var(--w-gold); border-radius: 8px; color: var(--acc-lit);
  font-family: var(--font); font-size: 11px; letter-spacing: .18em; }

@media (prefers-reduced-motion: reduce) {
  #dg-hesap.ac .dgh-kanat { animation: none; transform: rotateY(-104deg); }
  #dg-hesap.ac .dgh-isik { animation: none; height: 48px; opacity: 1; }
  #dg-hesap.ac .dgh-kikon, #dg-hesap.ac .dgh-kad, #dg-hesap.ac .dgh-sok u { animation: none; opacity: 1; transform: none; }
  #dg-hesap.ac .dgh-cub i, #dg-hesap.ac .dgh-sok em b { animation: none; width: var(--w); }
}

/* ---- THE WARNING BEFORE THE FALL -------------------------------------------
   A branch cannot be lost in the first twenty cards, and it is never lost
   without being told why. This is the telling: what is killing them, how many
   of those the commander killed personally, and what to do about it. */
#dg-uyari { position: fixed; inset: 0; z-index: 716; display: grid; place-items: center;
  background: rgba(8,3,2,.84); padding: 20px; transition: opacity .24s ease; }
#dg-uyari.out { opacity: 0; }
#dg-uyari .dgu-box { width: min(410px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: #140c09; border: 1px solid #c2412f; border-radius: 12px; padding: 18px 18px 15px;
  box-shadow: 0 18px 50px rgba(0,0,0,.66);
  animation: dghIn .3s cubic-bezier(.2,.9,.3,1) both; }
#dg-uyari .dgu-ust { font-family: var(--font); font-size: 11px; letter-spacing: .2em;
  color: #e0483a; text-align: center; }
#dg-uyari h3 { margin: 10px 0 11px; font-size: 13.5px; letter-spacing: .1em; color: var(--acc-lit);
  font-weight: 500; line-height: 1.35; text-align: center; }
#dg-uyari p { margin: 0 0 13px; font-size: 13px; line-height: 1.62; color: var(--w-sand); }
#dg-uyari p b, #dg-uyari .dgu-pay b { color: #efe6d2; font-weight: 600; }
#dg-uyari .dgu-bas { font-family: var(--font); font-size: 11px; letter-spacing: .2em;
  color: var(--w-mud); text-transform: uppercase; margin-bottom: 7px; }
#dg-uyari .dgu-liste { border-top: 1px solid #2a1a14; padding-top: 12px; margin-bottom: 13px; }
#dg-uyari .dgu-sat { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 9px; padding: 4px 0; font-size: 12px; }
#dg-uyari .dgu-sat + .dgu-sat { border-top: 1px solid #1f1310; }
#dg-uyari .dgu-sat b { font-family: var(--font); font-size: 12.5px; letter-spacing: .1em;
  color: #e0483a; font-weight: 500; }
#dg-uyari .dgu-sat span { color: var(--w-mud); font-size: 11.5px; }
#dg-uyari .dgu-sat u { text-decoration: none; font-family: var(--font); color: #efe6d2;
  font-variant-numeric: tabular-nums; }
#dg-uyari .dgu-pay { font-size: 12.5px; color: #c2a48a; border-left: 2px solid #c2412f;
  padding-left: 11px; }
#dg-uyari .dgu-ne { border-top: 1px solid #2a1a14; padding-top: 12px; }
#dg-uyari .dgu-ne ul { margin: 0; padding-left: 17px; }
#dg-uyari .dgu-ne li { font-size: 12.5px; line-height: 1.6; color: var(--w-sand); margin-bottom: 5px; }
#dg-uyari .dgu-ne li::marker { color: var(--w-gold); }
#dg-uyari button { width: 100%; margin-top: 14px; padding: 11px; background: none; cursor: pointer;
  border: 1px solid #c2412f; border-radius: 8px; color: var(--acc-lit);
  font-family: var(--font); font-size: 11px; letter-spacing: .18em; }

/* the death row wears a skull instead of three stacked words — no translation,
   no second line, and it reads at a glance which row is the cost */
#dg-hesap .dgh-kafa, #dg-hesap .dgh-sim { width: 19px; height: 19px; display: inline-block;
  vertical-align: middle; }
#dg-hesap .dgh-kafa { color: #c2412f; }
#dg-hesap .dgh-dogum { color: #7fd05a; }
#dg-hesap .dgh-altin { color: var(--acc-lit); }
/* a row of symbols does not need the label column to be as wide as a sentence */
#dg-hesap .dgh-sat { grid-template-columns: 30px 1fr 48px; }
#dg-hesap .dgh-sat:first-child .dgh-ad { text-align: right; padding-right: 2px; }

/* ---- THE SPEAKER'S BALLOON (design B, owner-approved) -----------------------
   The reply leaves the body and speaks from the picture: full-width band over
   the art, tail down to the bust, no name inside — the identity strip below
   already carries it. The bust steps down a breath while the balloon is up;
   transform only, so the flicker fix's rule ("the scene is never re-solved
   while text arrives") holds. */
#dc-art { position: relative; }
/* the owner marked the area: below the gear button, from the upper third down —
   not hugging the top edge where it collided with the settings gear */
/* The balloon used to take the right 54% and land on the speaker's face
   once the cast got real portraits (owner, 2026-09-04). It keeps its
   corner, narrower, and the picture under it is darkened -- see the
   scrim on #dc-art below. */
#dc-balon { position: absolute; left: 58%; right: 9px; top: 15%; z-index: 5;
  background: rgba(10,14,10,.94); border: 1px solid var(--w-gold);
  border-radius: 11px; padding: 9px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.6);
  animation: dbGel .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes dbGel { from { transform: translateY(8px) scale(.97); } }
#dc-balon .db-bt { font-family: var(--font); font-size: 12px; line-height: 1.55;
  color: #efe6d2; }
#dc-balon .db-bt.db-yaziliyor::after { content: '▌'; color: var(--acc-lit); margin-left: 1px;
  animation: dbCarp .7s steps(1) infinite; }
@keyframes dbCarp { 50% { opacity: 0; } }
#dc-balon .db-kuyruk { position: absolute; left: -7px; top: 26px; width: 12px; height: 12px;
  background: rgba(10,14,10,.94);
  border: 1px solid var(--w-gold); border-top: 0; border-left: 0; transform: rotate(135deg); }
/* the sealed card belongs to the echo; the balloon leaves with the question */
.dc-box.muhurlu #dc-balon { display: none; }
@media (prefers-reduced-motion: reduce) {
  #dc-balon { animation: none; }
  #dc-balon .db-bt.db-yaziliyor::after { animation: none; }
}

/* ---- THE WATCH REPORT, AS A GAUGE (design A) --------------------------------
   The sheet used to be seven blocks and two paragraphs, about 68 words. It is
   now one dial, three differences, the stones and two eyes — and the prose it
   replaced is one tap under the eyes rather than gone. Every animation here is
   finite and plays once, so the stillness layer never has to fight it. */
.bf-kadran { position: relative; width: 168px; height: 168px; margin: 2px auto 13px; }
.bf-kadran svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.bf-yay { stroke: var(--acc-lit); }
.bf-yay.g { stroke: #7fd05a; } .bf-yay.b { stroke: #e0483a; }
.rv-box .bf-yay { animation: bfKadran 1.1s cubic-bezier(.2,.9,.3,1) both; }
@keyframes bfKadran { from { stroke-dashoffset: 440; } }
.bf-kic { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.bf-kv { font-family: var(--font); font-size: 31px; font-weight: 600; line-height: 1;
  color: var(--acc-lit); font-variant-numeric: tabular-nums; }
.bf-kv.g { color: #7fd05a; } .bf-kv.b { color: #e0483a; }
.bf-kk { font-family: var(--font); font-size: 11px; letter-spacing: .2em; color: var(--w-mud); margin-top: 6px; }
.bf-ks { font-family: var(--font); font-size: 11px; color: var(--w-olive); margin-top: 5px;
  max-width: 118px; margin-left: auto; margin-right: auto; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-kk { max-width: 128px; margin-left: auto; margin-right: auto; }

/* the three differences — what changed, not what is */
.bf-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 13px; }
.bf-c { border: 1px solid #241f16; border-radius: 8px; background: rgba(0,0,0,.28);
  padding: 9px 4px 8px; text-align: center; }
.bf-ci { width: 19px; height: 19px; display: block; margin: 0 auto 5px; color: var(--w-mud); }
.bf-ci.g { color: #7fd05a; } .bf-ci.b { color: #e0483a; } .bf-ci.n { color: #5c5646; }
.bf-cv { display: block; font-family: var(--font); font-size: 14px; font-weight: 600;
  color: #efe6d2; font-variant-numeric: tabular-nums; }
.bf-cv.g { color: #7fd05a; } .bf-cv.b { color: #e0483a; } .bf-cv.n { color: #5c5646; }
.bf-ck { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .12em;
  color: var(--w-mud); margin-top: 4px; }
.rv-box .bf-c { animation: bfGel .5s cubic-bezier(.2,.9,.3,1) both; }
.rv-box .bf-c:nth-child(2) { animation-delay: .08s; }
.rv-box .bf-c:nth-child(3) { animation-delay: .16s; }
@keyframes bfGel { from { transform: translateY(9px); } }

/* the two eyes, in place of the two paragraphs */
.bf-gozler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 13px 0 0;
  padding-top: 12px; border-top: 1px solid #241f16; }
.bf-gz { border: 1px solid #241f16; border-radius: 8px; padding: 9px 8px 8px; text-align: center;
  background: rgba(0,0,0,.28); cursor: pointer; font-family: inherit;
  transition: border-color .18s ease, background .18s ease; }
.bf-gz.acik { border-color: var(--w-gold); background: rgba(var(--lit-rgb),.08); }
.bf-gz.ev { color: #e0a35e; } .bf-gz.dunya { color: #8fd0c0; }
.bf-gz svg { width: 22px; height: 22px; display: block; margin: 0 auto 6px; }
.rv-box .bf-iris { animation: bfBak 2.2s cubic-bezier(.4,0,.3,1) .5s both; }
@keyframes bfBak { 0% { transform: translateX(0); } 55% { transform: translateX(var(--kay, 0)); }
  100% { transform: translateX(var(--kay, 0)); } }
.bf-gr { display: block; height: 4px; border-radius: 2px; background: #191509;
  position: relative; overflow: hidden; margin-bottom: 6px; }
.bf-gr i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 2px; }
.bf-gr i.g { background: #7fd05a; } .bf-gr i.b { background: #e0a33a; left: auto; right: 50%; }
.rv-box .bf-gr i { animation: bfDol .7s cubic-bezier(.2,.9,.3,1) .35s both; }
@keyframes bfDol { to { width: var(--w); } }
.bf-gz b { display: block; font-family: var(--font); font-size: 12px; letter-spacing: .1em; }
.bf-gz b.g { color: #7fd05a; } .bf-gz b.b { color: #e0a33a; }
.bf-gk { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .16em;
  color: var(--w-mud); margin-top: 3px; }
/* the sentence the eye stands for — one tap away, never four lines tall */
.bf-gsoz { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--w-olive);
  max-height: 0; overflow: hidden; transition: max-height .28s ease, margin .28s ease; }
.bf-gsoz.on { max-height: 130px; }

@media (prefers-reduced-motion: reduce) {
  .rv-box .bf-yay, .rv-box .bf-c, .rv-box .bf-iris, .rv-box .bf-gr i { animation: none; }
  .rv-box .bf-gr i { width: var(--w); }
}

/* ==========================================================================
   CATISMA (js/sim/catisma.js) — the road's fight, in the reckoning's language.
   Two fronts, a declared blow, three stances. The busts are cardart's own, so
   the ambusher on the road is drawn by the machinery that draws every card.
   ========================================================================== */
#rite .ct-serit { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font); font-size: 11px; letter-spacing: .16em; color: var(--ink-dim); }
#rite .ct-raund { display: inline-flex; gap: 7px; align-items: center; }
#rite .ct-raund s { width: 9px; height: 9px; border-radius: 50%; text-decoration: none;
  border: 1px solid rgba(var(--gold-rgb),.4); display: inline-block; }
#rite .ct-raund s.ct-bitti { background: rgba(var(--gold-rgb),.55); border-color: rgba(var(--gold-rgb),.6); }
#rite .ct-raund s.ct-aktif { border-color: var(--acc-lit); box-shadow: 0 0 8px rgba(var(--lit-rgb),.45); }

#rite .ct-cepheler { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 7px;
  margin-top: 12px; align-items: stretch; }
#rite .ct-cephe { position: relative; height: 208px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb),.32);
  background: radial-gradient(ellipse at 50% 28%, #17120a, #0a0805 78%); }
#rite .ct-cephe.ct-karsi { border-color: color-mix(in srgb, var(--irk, #c76b45) 45%, transparent); }
#rite .ct-cephe svg.cb { position: absolute; inset: 0; width: 100%; height: 100%; }
#rite .ct-can { position: absolute; top: 7px; left: 7px; right: 7px; height: 4px; z-index: 3;
  background: #191509; border-radius: 2px; overflow: hidden; }
#rite .ct-can i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px;
  background: #7fd05a; transition: width .45s cubic-bezier(.2,.9,.3,1); }
#rite .ct-karsi-can i { background: var(--irk, #c76b45); }
/* THE NAMES SAT ON THE FIGURE AND VANISHED INTO IT (owner's crop). They get a
   ground of their own — a gradient plate up from the card's foot, the same
   device the card art uses under its nameplate — and the ink moves to the top
   of the palette. */
#rite .ct-ad { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; z-index: 6;
  font-family: var(--font); font-size: 10.5px; letter-spacing: .1em; font-weight: 600;
  color: #efe6d2; padding: 6px 3px 5px;
  background: linear-gradient(rgba(6,5,3,0), rgba(6,5,3,.92) 44%, rgba(6,5,3,.97));
  text-shadow: 0 1px 3px rgba(0,0,0,1); }
#rite .ct-karsi .ct-ad { color: #e6dfc8; }
#rite .ct-sayi { position: absolute; top: 16px; right: 9px; z-index: 3; font-family: var(--font);
  font-size: 17px; font-weight: 700; color: #efe6d2; text-shadow: 0 1px 5px rgba(0,0,0,.9); }
/* THE BLOW, AS A NUMBER (not a feeling): the player has to be able to subtract
   it from their own footing, which is the whole reason the read is a decision. */
#rite .ct-niyet { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--irk, #c76b45);
  background: rgba(6,5,3,.82); border: 1px solid color-mix(in srgb, var(--irk, #c76b45) 55%, transparent);
  border-radius: 6px; padding: 3px 9px; letter-spacing: .06em; }
#rite .ct-niyet.ct-gizli { color: #9fc7d1; border-color: rgba(159,199,209,.5); }
#rite .ct-orta { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; }
#rite .ct-orta s { width: 11px; height: 11px; border-radius: 50%; text-decoration: none;
  border: 1px solid rgba(var(--gold-rgb),.35); }

#rite .ct-soz { margin: 11px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-dim); }
#rite .ct-ilan { margin: 7px 0 0; font-family: var(--font); font-size: 11.5px;
  letter-spacing: .08em; color: var(--w-olive); }
#rite .ct-ilan b { color: #efe6d2; }

#rite .ct-duruslar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 13px;
  min-height: 84px; }
#rite .ct-durus { border: 1px solid rgba(var(--gold-rgb),.4); border-radius: 10px;
  background: rgba(18,16,10,.85); font-family: var(--font); padding: 11px 5px 9px;
  text-align: center; cursor: pointer; color: inherit;
  transition: border-color .18s ease, background .18s ease; }
#rite .ct-durus:hover { border-color: var(--acc-lit); background: rgba(var(--lit-rgb),.08); }/* press handled by MÜHÜR */

#rite .ct-durus .ct-g { display: block; font-size: 17px; color: var(--w-gold); }
#rite .ct-durus b { display: block; font-size: 11px; letter-spacing: .1em; color: #efe6d2;
  margin-top: 5px; font-weight: 600; }
#rite .ct-durus .ct-alt { display: block; font-size: 9.5px; color: var(--w-moss); margin-top: 4px;
  line-height: 1.45; }
#rite .ct-sonuc { grid-column: 1 / -1; align-self: center; text-align: center; margin: 0;
  font-size: 12.5px; line-height: 1.6; animation: ctSonuc .4s ease-out backwards; }
#rite .ct-sonuc b { font-family: var(--font); }
#rite .ct-sonuc.ct-iyi { color: #7fd05a; }
#rite .ct-sonuc.ct-kotu { color: #e0483a; }
@keyframes ctSonuc { from { transform: translateY(6px); } }

#rite .ct-ara { text-align: center; padding: 8px 0 4px; }
#rite .ct-ara-g { font-size: 28px; color: var(--acc-lit); animation: ctGlif .6s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes ctGlif { from { transform: scale(.5); } }
#rite .ct-ara h3 { font-family: var(--font); font-size: 14px; letter-spacing: .16em;
  color: var(--acc-lit); margin: 9px 0 0; }
#rite .ct-ara p { font-size: 13px; line-height: 1.7; color: var(--ink-dim); margin: 9px 0 0; }
#rite .ct-iz { color: var(--w-olive); }
#rite .ct-iz b { color: var(--acc-lit); font-family: var(--font); font-size: 11.5px; letter-spacing: .1em; }
#rite .ct-bedel { color: #c25a41; }
#rite .ct-yoldas .ct-ara-g { color: #c25a41; }
#rite .ct-devam { margin-top: 15px; width: 100%; border: 1px solid rgba(var(--lit-rgb),.5);
  border-radius: 10px; background: transparent; color: var(--w-gold); font-family: var(--font);
  font-size: 12px; letter-spacing: .16em; padding: 12px 0; cursor: pointer; }
#rite .ct-devam:hover { border-color: var(--acc-lit); color: var(--acc-lit); }
@media (prefers-reduced-motion: reduce) {
  #rite .ct-sonuc, #rite .ct-ara-g { animation: none; }
  #rite .ct-can i { transition: none; }
}

/* THE FIGURE STEPS ASIDE FOR THE BALLOON, IN THE DRAWING'S OWN UNITS.
   preserveAspectRatio was doing this and could not: it crops on one axis only,
   and on a wide-short art box (measured on the owner's phone: ~430x286 against a
   viewBox aspect of 1.447) it crops vertically, leaving the horizontal anchor
   nothing to move. The face ended up under the balloon. A translate in user units
   is the same distance on every screen, and the full-viewBox background means it
   cannot open a gap. */
/* 120, not 150: with the crop anchor no longer shifting as well, this is the
   only step the figure takes. Measured over the four real box aspects it holds
   the face between 3.9% and 42.6% of the frame — never off the left edge, and
   always clear of the balloon, which starts at 47%. */
#dc-art.balonlu svg.ca .ca-figur { transform: translateX(-120px) rotate(2deg); }
/* SPOKEN TO, THE FIGURE ATTENDS (rapor mikro-edim 1): the 2-degree lean above,
   and the gaze drift STOPS — an iris resting at centre is an iris looking at
   the player. The blink quickens a touch, the way attention does. */
#dc-art svg.ca .ca-figur { transform-box: fill-box; transform-origin: 50% 88%; }
#dc-art.balonlu svg.ca .ca-gaze { animation: none; }
#dc-art.balonlu svg.ca .ca-blink { animation-duration: 5.5s; }
@media (prefers-reduced-motion: no-preference) {
  #dc-art svg.ca .ca-figur { transition: transform .42s cubic-bezier(.2,.8,.3,1); }
}

/* ==========================================================================
   THE STANCE BEATS (js/sim/catisma.js vurusBeati) — six of them, one second
   each, played once. The busts are never redrawn: the CARDS move and an object
   layer plays over them. Every animation below is finite and none of them
   animates a filter with a forwards fill — the option-plate blur is what taught
   this file that a held filter never lets go of its layer.
   ========================================================================== */
#rite .ct-beat { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
#rite .ct-beat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#rite .ct-flas { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; }

/* the whole pair takes the impact */
#rite .ct-cepheler.ct-oyna { animation: ctSars .95s ease-out 1; }
#rite .ct-cepheler.ct-savun-yok, #rite .ct-cepheler.ct-saldir-yok,
#rite .ct-cepheler.ct-kac-yok { animation: ctSarsSert 1.05s ease-out 1; }
@keyframes ctSars { 0%,34% { transform: none; } 38% { transform: translate(-5px,3px); }
  43% { transform: translate(4px,-3px); } 48% { transform: translate(-2px,1px); }
  54% { transform: none; } }
@keyframes ctSarsSert { 0%,34% { transform: none; }
  38% { transform: translate(-9px,5px) rotate(-.5deg); }
  43% { transform: translate(8px,-4px) rotate(.4deg); }
  48% { transform: translate(-5px,2px); } 52% { transform: translate(3px,-1px); }
  58% { transform: none; } }
@keyframes ctFlas { 0%,34% { } 38% { opacity: .8; } 50% { opacity: 0; } }
#rite .ct-savun-ok .ct-flas { background: radial-gradient(circle at 28% 55%, rgba(240,230,180,.85), transparent 62%);
  animation: ctFlas .95s ease-out 1; }
#rite .ct-savun-yok .ct-flas { background: radial-gradient(circle at 26% 52%, rgba(224,72,58,.75), transparent 58%);
  animation: ctFlas 1.05s ease-out 1; }
#rite .ct-saldir-ok .ct-flas { background: radial-gradient(circle at 72% 50%, rgba(250,240,200,.9), transparent 55%);
  animation: ctFlas .95s ease-out 1; }
#rite .ct-saldir-yok .ct-flas { background: radial-gradient(circle at 62% 50%, rgba(199,107,69,.7), transparent 54%);
  animation: ctFlas 1.05s ease-out 1; }
#rite .ct-kac-yok .ct-flas { background: radial-gradient(circle at 32% 52%, rgba(224,72,58,.6), transparent 58%);
  animation: ctFlas 1.05s ease-out 1; }

/* sparks: each one its own direction and delay, so it reads as a spray */
#rite .ctk { opacity: 0; animation: ctKiv .95s cubic-bezier(.2,.7,.4,1) 1; }
#rite .ctk:nth-child(2) { animation-delay: .02s; }
#rite .ctk:nth-child(3) { animation-delay: .05s; }
#rite .ctk:nth-child(4) { animation-delay: .03s; }
#rite .ctk:nth-child(5) { animation-delay: .07s; }
@keyframes ctKiv { 0%,34% { transform: scale(.2); }
  40% { opacity: 1; transform: scale(1); }
  70% { opacity: 0; transform: translate(var(--dx,-30px), var(--dy,-22px)) scale(.6); }
  100% { opacity: 0; } }

/* ---- 1 GUARD HELD ---- */
#rite .ct-savun-ok .ctKalkan { animation: ctKal1 .95s cubic-bezier(.3,.9,.4,1) 1; }
@keyframes ctKal1 { 0% { transform: translate(-8px,34px) scale(.8) rotate(-8deg); }
  16% { opacity: 1; transform: none; } 34% { transform: translate(-3px,0) scale(1.05); }
  40% { transform: translate(-9px,2px) scale(1.02) rotate(-2deg); }
  52% { transform: none; } 100% { opacity: 1; transform: none; } }
#rite .ct-savun-ok .ctVurus { animation: ctVur1 .95s cubic-bezier(.5,0,.65,1) 1; }
@keyframes ctVur1 { 0%,8% { transform: translateX(230px) scaleX(.6); }
  16% { opacity: 1; } 32% { transform: translateX(46px) scaleX(1.15); opacity: 1; }
  38% { transform: translateX(30px) scaleX(.5); opacity: .5; } 42%,100% { opacity: 0; } }
#rite .ctHalka { animation: ctHal .95s cubic-bezier(.2,.8,.3,1) 1; }
@keyframes ctHal { 0%,34% { transform: scale(.3); }
  42% { opacity: .7; transform: scale(1); } 70% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; } }
#rite .ctToz { opacity: 0; animation: ctToz .95s ease-out 1; }
@keyframes ctToz { 0%,40% { } 52% { opacity: .5; } 86% { opacity: 0; transform: translateY(14px); } }

/* ---- 2 GUARD BROKE ---- */
#rite .ct-savun-yok .ctKalkan { animation: ctKal2 1.05s cubic-bezier(.3,.9,.4,1) 1; }
@keyframes ctKal2 { 0% { transform: translate(-8px,34px) scale(.8); }
  14% { opacity: 1; transform: none; } 38% { transform: rotate(9deg) translate(-6px,3px); }
  47% { transform: rotate(22deg) translate(-16px,14px); }
  64% { opacity: .5; transform: rotate(42deg) translate(-32px,48px); }
  82%,100% { opacity: 0; transform: rotate(58deg) translate(-42px,80px); } }
#rite .ctCatlak { animation: ctCat 1.05s cubic-bezier(.1,.9,.2,1) 1; }
@keyframes ctCat { 0%,32% { stroke-dashoffset: 70; }
  40% { opacity: 1; stroke-dashoffset: 0; } 70% { opacity: 1; } 88%,100% { opacity: 0; } }
#rite .ctKirik { animation: ctKir 1.05s cubic-bezier(.3,.7,.5,1) 1; }
#rite .ctKirik:nth-of-type(2) { animation-delay: .04s; }
#rite .ctKirik:nth-of-type(3) { animation-delay: .08s; }
@keyframes ctKir { 0%,40% { transform: none; } 46% { opacity: 1; }
  84%,100% { opacity: 0; transform: translate(var(--dx,-26px), var(--dy,40px)) rotate(var(--rz,-40deg)); } }
#rite .ct-savun-yok .ctVurus { animation: ctVur2 1.05s cubic-bezier(.5,0,.75,1) 1; }
@keyframes ctVur2 { 0%,6% { transform: translateX(230px) scaleX(.6); }
  14% { opacity: 1; } 36% { transform: translateX(-10px) scaleX(1.2); opacity: 1; }
  52%,100% { transform: translateX(-70px) scaleX(.7); opacity: 0; } }
#rite .ctYara { animation: ctYar 1.05s ease-out 1; }
@keyframes ctYar { 0%,38% { } 44% { opacity: 1; } 92% { opacity: .3; } 100% { opacity: 0; } }
#rite .ct-savun-yok .ct-sen { animation: ctSen2 1.05s cubic-bezier(.3,.8,.4,1) 1; }
@keyframes ctSen2 { 0%,34% { transform: none; } 40% { transform: translateX(-11px) rotate(-1.6deg); }
  46% { transform: translateX(8px) rotate(1.2deg); } 53% { transform: translateX(-5px); }
  62% { transform: none; } }

/* ---- 3 STRIKE LANDED ---- */
#rite .ct-saldir-ok .ct-sen { animation: ctSen3 .95s cubic-bezier(.3,.9,.4,1) 1; }
@keyframes ctSen3 { 0%,10% { transform: none; } 20% { transform: translateX(-11px) rotate(-1deg); }
  32% { transform: translateX(24px) scale(1.04) rotate(1.4deg); }
  44% { transform: translateX(14px); } 58% { transform: translateX(2px); } 100% { transform: none; } }
#rite .ct-saldir-ok .ct-karsi { animation: ctDus3 .95s cubic-bezier(.3,.8,.4,1) 1; }
@keyframes ctDus3 { 0%,34% { transform: none; } 40% { transform: translateX(16px) rotate(2.4deg) scale(.98); }
  50% { transform: translateX(9px) rotate(1deg); } 64%,100% { transform: translateX(4px); } }
#rite .ctYay { animation: ctYay3 .95s cubic-bezier(.15,.9,.25,1) 1; }
@keyframes ctYay3 { 0%,22% { stroke-dashoffset: 340; }
  32% { opacity: 1; stroke-dashoffset: 120; } 38% { opacity: 1; stroke-dashoffset: 0; }
  50%,100% { opacity: 0; } }
#rite .ctIzc { animation: ctIzc .95s ease-out 1; }
@keyframes ctIzc { 0%,28% { } 38% { opacity: .7; } 60%,100% { opacity: 0; } }
#rite .ctEksi { animation: ctEks .95s cubic-bezier(.3,.7,.4,1) 1; }
@keyframes ctEks { 0%,42% { transform: translateY(-14px) scale(.6); }
  50% { opacity: 1; transform: translateY(0) scale(1.08); } 56% { transform: scale(1); }
  88% { opacity: 1; } 100% { opacity: 0; } }

/* ---- 4 STRIKE MISSED ---- */
#rite .ct-saldir-yok .ct-sen { animation: ctSen4 1.05s cubic-bezier(.3,.85,.4,1) 1; }
@keyframes ctSen4 { 0%,10% { transform: none; } 20% { transform: translateX(-11px); }
  31% { transform: translateX(19px) rotate(1.2deg); }
  40% { transform: translateX(-24px) rotate(-3.4deg); }
  52% { transform: translateX(-11px) rotate(-1.4deg); } 70% { transform: translateX(-3px); }
  100% { transform: none; } }
#rite .ct-saldir-yok .ct-karsi { animation: ctDus4 1.05s cubic-bezier(.3,.9,.4,1) 1; }
@keyframes ctDus4 { 0%,32% { transform: none; } 39% { transform: scale(1.06) rotate(-1deg); }
  52% { transform: scale(1.01); } 64% { transform: none; } }
#rite .ct-saldir-yok .ctYay { animation: ctYay4 1.05s cubic-bezier(.15,.9,.25,1) 1; }
@keyframes ctYay4 { 0%,22% { stroke-dashoffset: 340; }
  32% { opacity: .9; stroke-dashoffset: 190; } 38% { opacity: .5; stroke-dashoffset: 170; }
  46%,100% { opacity: 0; } }
#rite .ctSiper { animation: ctSip 1.05s cubic-bezier(.2,.9,.3,1) 1; }
@keyframes ctSip { 0%,30% { transform: scale(.72) translateX(14px); }
  37% { opacity: 1; transform: scale(1) translateX(0); }
  43% { transform: scale(1.08) translateX(-5px); } 64%,100% { opacity: 0; transform: scale(1.02); } }
#rite .ctGeri { animation: ctGer 1.05s ease-out 1; }
@keyframes ctGer { 0%,38% { transform: translateX(0); }
  46% { opacity: 1; transform: translateX(-14px); } 74%,100% { opacity: 0; transform: translateX(-34px); } }

/* ---- 5 BROKE OFF CLEAN ---- */
#rite .ct-kac-ok .ct-sen { animation: ctSen5 1.1s cubic-bezier(.42,0,.22,1) 1; }
@keyframes ctSen5 { 0%,12% { transform: none; opacity: 1; }
  22% { transform: translateX(14px) rotate(1.6deg); } 32% { transform: translateX(2px) rotate(-1deg); }
  70% { transform: translateX(-128%) rotate(-3deg); opacity: 1; }
  84%,100% { transform: translateX(-158%) rotate(-4deg); opacity: 0; } }
#rite .ctCizgi { opacity: 0; animation: ctCiz 1.1s ease-out 1; }
#rite .ctCizgi:nth-of-type(2) { animation-delay: .06s; }
#rite .ctCizgi:nth-of-type(3) { animation-delay: .12s; }
@keyframes ctCiz { 0%,24% { transform: translateX(46px) scaleX(.4); }
  38% { opacity: .9; transform: translateX(-8px) scaleX(1); }
  66%,100% { opacity: 0; transform: translateX(-86px) scaleX(1.5); } }
#rite .ctToz2 { animation: ctToz2 1.1s cubic-bezier(.2,.7,.4,1) 1; }
#rite .ctToz2:nth-of-type(2) { animation-delay: .1s; }
@keyframes ctToz2 { 0%,26% { } 42% { opacity: .6; transform: translate(-16px,-4px) scale(1.3); }
  78%,100% { opacity: 0; transform: translate(-46px,-12px) scale(2); } }
#rite .ctSandik { animation: ctSan 1.1s cubic-bezier(.35,.05,.6,1) 1; }
@keyframes ctSan { 0%,28% { transform: none; }
  38% { opacity: 1; transform: translate(-4px,2px) rotate(-10deg); }
  58% { transform: translate(-10px,26px) rotate(-30deg); }
  70% { transform: translate(-13px,46px) rotate(-44deg); }
  76% { transform: translate(-13px,42px) rotate(-46deg); }
  94%,100% { opacity: 0; transform: translate(-13px,44px) rotate(-46deg); } }
#rite .ct-kac-ok .ct-karsi { animation: ctDus5 1.1s ease-out 1; }
@keyframes ctDus5 { 0%,26% { transform: none; } 50% { transform: translateX(-14px); }
  80%,100% { transform: translateX(-8px); } }

/* ---- 6 CAUGHT ---- */
#rite .ct-kac-yok .ct-sen { animation: ctSen6 1.15s cubic-bezier(.3,.8,.4,1) 1; }
@keyframes ctSen6 { 0%,12% { transform: none; } 28% { transform: translateX(-44%) rotate(-2deg); }
  36% { transform: translateX(-52%) rotate(-2.4deg); } 40% { transform: translateX(-50%) rotate(-1.6deg); }
  54% { transform: translateX(-14%) rotate(2.2deg); } 68% { transform: translateX(-2%) rotate(-.8deg); }
  80% { transform: none; } 100% { transform: none; } }
#rite .ctKement { animation: ctKem 1.15s cubic-bezier(.15,.9,.25,1) 1; }
@keyframes ctKem { 0%,18% { stroke-dashoffset: 380; }
  32% { opacity: 1; stroke-dashoffset: 120; } 38% { opacity: 1; stroke-dashoffset: 0; }
  58% { opacity: 1; } 82%,100% { opacity: 0; } }
#rite .ctGerilim { animation: ctGrl 1.15s ease-out 1; }
@keyframes ctGrl { 0%,38% { } 44% { opacity: 1; } 58% { opacity: .5; } 74%,100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #rite .ct-cepheler.ct-oyna, #rite .ct-beat *, #rite .ct-flas { animation: none !important; }
  #rite .ct-beat { display: none; }
}

/* ==========================================================================
   MÜHÜR — the one press language (owner's choice, A).
   Every control in the game sits on a shelf of clay. Pressing drives its face
   into the clay; releasing springs it back and leaves an impression that fades.
   This block is LAST on purpose: it settles seventy-one separate :active rules
   that each invented their own barely-visible scale.
   ========================================================================== */
.dc-opt, .rt-btn, .ov-door, #ov-ayar, .gal-go, .sf-git, .sf-ilerle-btn, #rite .ct-durus, #rite .ct-devam, #dgh-ok, .cs-go, .dp-btn, .drw-row, .finale-box .fin-opt, .finale-box .fin-stay, .rv-go, .bf-gz, .fs-card, #dc-hedef, .h-btn.drw-row, .nbr-box button, .ov-doors > button {
  /* the shelf: what the face has somewhere to go */
  box-shadow: 0 4px 0 #2b2317, 0 5px 11px rgba(0,0,0,.48);
  transition: transform .34s cubic-bezier(.18,1.5,.4,1),
              box-shadow .34s cubic-bezier(.18,1.5,.4,1),
              border-color .18s ease, background .14s ease;
}
.h-btn, .tab, .spd, #dc-gear, #dc-why, #dc-purse, .vt-door, .vt-face, .vt-clock, .bf-ic, .ms-head, .pg-skip, #cmd-nav .cn, #sf-ayar, body.mapless #cmd-fab, #hdr-compact .h-globe {
  box-shadow: 0 2px 0 #2b2317, 0 3px 7px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.2,1.45,.4,1),
              box-shadow .3s cubic-bezier(.2,1.45,.4,1), border-color .18s ease;
}
/* THE PRESS IS INSTANT. A stamp does not ease in — it lands. */
.mh-bas { transition-duration: .045s !important; transition-timing-function: linear !important; }
.dc-opt.mh-bas, .rt-btn.mh-bas, .ov-door.mh-bas, #ov-ayar.mh-bas, .gal-go.mh-bas, .sf-git.mh-bas, .sf-ilerle-btn.mh-bas, #rite .ct-durus.mh-bas, #rite .ct-devam.mh-bas, #dgh-ok.mh-bas, .cs-go.mh-bas, .dp-btn.mh-bas, .drw-row.mh-bas, .finale-box .fin-opt.mh-bas, .finale-box .fin-stay.mh-bas, .rv-go.mh-bas, .bf-gz.mh-bas, .fs-card.mh-bas, #dc-hedef.mh-bas, .h-btn.drw-row.mh-bas, .nbr-box button.mh-bas, .ov-doors > button.mh-bas {
  transform: translateY(4px) !important;   /* travel only: a scale resamples the label */
  box-shadow: 0 0 0 #2b2317, inset 0 3px 7px rgba(0,0,0,.66) !important;
}
.h-btn.mh-bas, .tab.mh-bas, .spd.mh-bas, #dc-gear.mh-bas, #dc-why.mh-bas, #dc-purse.mh-bas, .vt-door.mh-bas, .vt-face.mh-bas, .vt-clock.mh-bas, .bf-ic.mh-bas, .ms-head.mh-bas, .pg-skip.mh-bas, #cmd-nav .cn.mh-bas, #sf-ayar.mh-bas, body.mapless #cmd-fab.mh-bas, #hdr-compact .h-globe.mh-bas {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 #2b2317, inset 0 2px 5px rgba(0,0,0,.6) !important;
}
/* THE RELEASE IS THE PART THAT SAYS IT HAPPENED. */
.mh-birak { animation: mhZip .38s cubic-bezier(.16,1.6,.36,1) 1; }
@keyframes mhZip {
  0%   { transform: translateY(4px); }
  42%  { transform: translateY(-3px); }
  100% { transform: none; }
}
.mh-hafif.mh-birak { animation: mhZipH .3s cubic-bezier(.18,1.55,.38,1) 1; }
@keyframes mhZipH {
  0%   { transform: translateY(2px); }
  45%  { transform: translateY(-2px); }
  100% { transform: none; }
}
/* the gold rail on a plate's edge catches while it is down */
.dc-opt.mh-bas { border-left-color: var(--acc-lit) !important; }

/* THE IMPRESSION, left in the clay and fading */
.mh-iz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5); opacity: 1;
  animation: mhIz .9s ease-out 1 forwards; z-index: 1; }
@keyframes mhIz { to { } }

/* THE DUST, thrown from where the finger landed */
.mh-toz { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #d9b872; box-shadow: 0 0 5px rgba(217,184,114,.55);
  pointer-events: none; opacity: 0; z-index: 2;
  animation: mhToz .5s cubic-bezier(.2,.7,.4,1) 1; }
@keyframes mhToz { 0% { opacity: .9; transform: none; }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-18px)); } }

/* THE HOST IS POSITIONED IN JS, NOT HERE. This used to be one blanket
   `position: relative` over every control in the list, and it flattened the
   four that had placed themselves — #sf-ayar, #dc-gear, #dc-purse and
   .pg-skip are all `position: absolute` with their own offsets, and this
   rule, being later, dropped them into the flow. CSS cannot say "relative
   only if static", so muhur.js says it instead, per element, at press. */

@media (prefers-reduced-motion: reduce) {
  .mh-birak { animation: none; }
  .mh-iz, .mh-toz { display: none; }
}

/* THE FIRST TAP HAS TO SHOW. Arming an option used to say almost nothing: the
   seal bar appeared underneath and that was all, so the first of the two taps
   read as a press that did nothing. The armed plate now lifts off the sheet and
   its rail burns; the one NOT chosen steps back so the choice reads at a glance. */
#dc-options .dc-opt.armed {
  /* NOT important, deliberately. The flag was here to beat optIn, which is
     true only while optIn runs — 340ms plus a stagger, on a plate that cannot
     be armed until the player has read it. Left important, this declaration
     also beat the press (0,2,0) and the release animation, so arming anything
     silenced every plate on the card — including the second tap, the one that
     signs the decree. */
  transform: translateY(-2px);
  border-color: var(--acc-lit) !important;
  box-shadow: inset 3px 0 0 var(--acc-lit), 0 6px 0 #2b2317, 0 10px 20px rgba(0,0,0,.5),
              0 0 22px rgba(var(--lit-rgb),.18) !important;
}
#dc-options:has(.dc-opt.armed) .dc-opt:not(.armed) {
  /* important for the same reason as the lift above: .dc-opt's own resting
     opacity and its entrance animation both outrank a plain declaration */
  opacity: .52 !important; transform: scale(.985);   /* see the note above */
  transition: opacity .22s ease, transform .22s ease;
}

/* ==========================================================================
   GEÇİŞ — the stamp between screens (js/sim/gecis.js, owner's choice A).
   The press language at screen scale: a ring opens out of the middle, dust
   jumps, the console darkens under the blow, and the new surface rises out of
   the impression. Every animation here is finite and none of them animates a
   filter — the option plate's blur is why that rule exists.
   NOTE: nothing here transforms .crt. A transform of any value on that element
   makes it the containing block for every position:fixed descendant, which is
   already written into main.js as a bug that moved the globe.
   ========================================================================== */
#gecis-muhur { position: fixed; inset: 0; z-index: 900; pointer-events: none;
  display: none; overflow: hidden; }
#gecis-muhur.acik { display: block; }

/* the blow lands on the whole console */
#gecis-muhur .gm-karart { position: absolute; inset: 0; background: #050403; opacity: 0;
  animation: gmKarart .42s cubic-bezier(.3,.7,.4,1) 1; }
@keyframes gmKarart { 0% { } 22% { opacity: .62; } 55% { opacity: .34; }
  100% { opacity: 0; } }

/* the impression, opening outward */
#gecis-muhur .gm-halka { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid var(--acc-lit);
  box-shadow: 0 0 26px rgba(var(--lit-rgb),.5);
  transform: scale(0); opacity: 0;
  animation: gmHalka .46s cubic-bezier(.2,.75,.3,1) 1; }
@keyframes gmHalka { 0% { transform: scale(0); }
  14% { opacity: 1; } 100% { transform: scale(34); opacity: 0; } }
/* coming back OUT of a screen is the same blow reversed */
#gecis-muhur.geri .gm-halka { animation: gmHalkaGeri .46s cubic-bezier(.3,.8,.4,1) 1; }
@keyframes gmHalkaGeri { 0% { transform: scale(34); }
  22% { opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

/* clay thrown from under the seal */
#gecis-muhur .gm-toz { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--w-earth); opacity: 0;
  animation: gmToz .46s cubic-bezier(.2,.7,.4,1) 1; }
@keyframes gmToz { 0% { opacity: .9; transform: none; }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-40px)); } }

/* the surface that rises out of the impression */
.gm-gir { animation: gmGir .42s cubic-bezier(.2,.9,.3,1) 1; }
@keyframes gmGir { 0% { transform: scale(1.045); }
  100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #gecis-muhur { display: none !important; }
  .gm-gir { animation: none; }
}

/* THE ARMED PLATE SPRINGS BACK ONTO ITS LIFT, not down to zero. It is already
   held 2px off the sheet, so the shared release — which ends at `none` — would
   drop it on the last frame of every press. */
#dc-options .dc-opt.armed.mh-birak { animation: mhZipArm .38s cubic-bezier(.16,1.6,.36,1) 1; }
@keyframes mhZipArm {
  0%   { transform: translateY(4px); }
  42%  { transform: translateY(-6px); }
  100% { transform: translateY(-2px); }
}

/* ==========================================================================
   KABURGA — the footing rib (owner's choice, A3).
   Footing now carries between fights and refills only at a settlement, so it
   needs to be readable without opening anything. It rides the full width under
   the vitals strip and costs seven pixels: one segment per point, counted
   rather than measured, which is the arithmetic the fight actually asks for.
   ========================================================================== */
body.mapless #cmd-kaburga {
  /* pinned to the strip's own bottom edge, out of flow: #cmd-stage is a GRID,
     so a sibling landed in the cell BESIDE the strip instead of under it
     (measured). Absolute inside the band costs nothing and always tracks it. */
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 2px; height: 5px; padding: 0 8px; margin: 0;
  /* never a click target: the strip's own doors sit right above it */
  pointer-events: none; z-index: 2;
}
body.mapless #cmd-kaburga > s {
  flex: 1 1 0; min-width: 2px; height: 100%; text-decoration: none;
  background: #241e14; transition: background .22s ease, box-shadow .22s ease;
}
/* the three bands. A rested commander gets no colour at all — the strip should
   not glow while nothing is wrong. */
body.mapless #cmd-kaburga > s.on { background: #6f7f45; }
/* literal, not var(--gold): that token resolves to #9c8f80 in this scope
   (measured), which reads as the same dull clay as the healthy band */
body.mapless #cmd-kaburga > s.az { background: var(--acc-lit); }
body.mapless #cmd-kaburga > s.kt { background: #c76b45; box-shadow: 0 0 5px rgba(199,107,69,.55); }
body.mapless #cmd-kaburga.tam > s.on { background: #4a5230; box-shadow: none; }
/* under a third it breathes, the same single pulse the readings use */
body.mapless #cmd-kaburga.kritik > s.kt { animation: kbNefes 1.9s ease-in-out infinite; }
@keyframes kbNefes {
  0%, 100% { box-shadow: 0 0 4px rgba(199,107,69,.35); }
  50%      { box-shadow: 0 0 9px rgba(199,107,69,.8); }
}
body.nibiru.mapless #cmd-kaburga > s.on { background: #7a5a33; }
@media (prefers-reduced-motion: reduce) {
  body.mapless #cmd-kaburga.kritik > s.kt { animation: none; }
}

/* ==========================================================================
   HESAP SATIRI - the fight's arithmetic, in the open (owner's choice, B1).
   The scene printed two numbers and hid five: the guard's -4, the strike's
   45-90% chance, the -2 it buys, the 75% on breaking off, and the blow's own
   spread. Slay the Spire keeps all of it in front of the player, because the
   game is the subtraction, not the guess. It matters twice as much now that
   footing carries out of one fight and into the next.
   ========================================================================== */
#rite .ct-hesap {
  margin-top: 8px; padding: 7px 9px;
  background: #0e0c07; border: 1px solid #2c261a;
  font-family: var(--font, monospace); font-size: 11.5px; line-height: 1.5;
  font-variant-numeric: tabular-nums; color: #a99c80;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px;
}
#rite .ct-hesap b { color: #c76b45; font-weight: 700; }
#rite .ct-hesap em { font-style: normal; color: #9db35e; font-weight: 700; }
#rite .ct-hesap u { text-decoration: none; color: #6d5f45; }
#rite .ct-hesap b.ct-olum { color: #e05a3a; }
#rite .ct-hesap b.ct-olum::after { content: ' ✝'; }
#rite .ct-hesap.ct-kor .ct-kor-not { color: #6d5f45; font-style: italic; }

#rite .ct-durus .ct-say {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--acc-lit);
}
#rite .ct-durus .ct-say.ct-olum { color: #e05a3a; }
#rite .ct-durus .ct-say.ct-olum::after { content: ' ✝'; }
/* the stance grid was sized for two lines of prose and now carries a third */
#rite .ct-duruslar { min-height: 100px; }

/* ==========================================================================
   VARIS - the descent, and the dossier under it (owner's choice, C1).
   Arriving used to be two rings on a pin for 2.2 seconds, identical for all
   forty locations. Now the camera falls through four silhouette layers drawn
   for the ground the site actually sits on, the place names itself, and the
   dossier says what waits there -- with the real archetypes this terrain can
   deal, and the carried footing measured against the heaviest blow.
   ========================================================================== */
#rite .vr { display: flex; flex-direction: column; }

/* ---- the descent ---- */
#rite .vr-sahne {
  position: relative; width: 100%; aspect-ratio: 9 / 11;
  /* MEASURED: at 46vh the sheet came to 854px on an 812px phone, so STEP IN sat
     below the fold and the dossier had to be scrolled to be acted on. 33vh puts
     the whole arrival on one screen with room to spare. */
  max-height: 33vh; overflow: hidden;
  background: #070603; border: 1px solid #2c261a;
}
#rite .vr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the four layers, falling. `both` holds the FIRST frame during the delay and
   lets go at the end -- the last keyframe is transform:none, so nothing keeps a
   composited layer once the scene has settled. */
#rite .vr-k1 { animation: vrKat 1.5s cubic-bezier(.22,.7,.24,1) both; }
#rite .vr-k2 { animation: vrKat 1.5s cubic-bezier(.22,.7,.24,1) .06s both; }
#rite .vr-k3 { animation: vrKat 1.5s cubic-bezier(.22,.7,.24,1) .12s both; }
#rite .vr-k4 { animation: vrKat 1.5s cubic-bezier(.22,.7,.24,1) .2s both; }
@keyframes vrKat {
  0%   { transform: translateY(-46%) scale(1.5); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* the lamp, the sun, the fireflies: whatever the ground's own light is */
#rite .vr-isik { animation: vrIsik 3.6s ease-in-out .7s infinite; }
@keyframes vrIsik { 0%, 100% { opacity: .34; } 50% { opacity: .68; } }
/* and what drifts up out of it */
#rite .vr-toz circle { animation: vrToz 3.4s linear .6s infinite; opacity: 0; }
@keyframes vrToz {
  0%   { opacity: 0; transform: translateY(0); }
  18%  { opacity: .6; }
  100% { opacity: 0; transform: translateY(-96px); }
}

#rite .vr-ad {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 13px 13px;
  background: linear-gradient(180deg, transparent, rgba(7,6,3,.94) 44%);
  animation: vrAd .7s ease-out 1.05s both;
}
@keyframes vrAd { from { transform: translateY(10px); } to { opacity: 1; transform: none; } }
#rite .vr-ad i {
  display: block; font-style: normal; font-size: 9px; letter-spacing: .26em; color: var(--w-earth);
}
#rite .vr-ad b {
  display: block; font-size: 17px; letter-spacing: .05em; color: var(--acc-lit); margin-top: 3px;
}

/* ---- the dossier ---- */
#rite .vr-kunye { animation: vrAd .6s ease-out 1.32s both; padding-top: 9px; }
#rite .vr-tanim {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: #a99c80;
  font-family: var(--read, Georgia, serif);
}
#rite .vr-dl {
  margin: 11px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
#rite .vr-dl dt { color: var(--w-earth); letter-spacing: .1em; font-size: 9.5px; align-self: center; }
#rite .vr-dl dd { margin: 0; color: #e9e1cc; }
#rite .vr-risk { color: #c76b45; font-weight: 700; }

#rite .vr-iz {
  margin-top: 10px; padding: 7px 9px; background: #100e09;
  border-left: 3px solid var(--iz, #9db35e);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
#rite .vr-iz .vr-iz-e { font-size: 8.5px; letter-spacing: .18em; color: var(--w-earth); width: 100%; }
#rite .vr-iz b { font-size: 12px; letter-spacing: .1em; color: var(--iz, #9db35e); }
#rite .vr-iz i { font-style: normal; font-size: 10px; color: var(--w-earth); }

#rite .vr-teh-bas {
  margin-top: 13px; padding-top: 9px; border-top: 1px solid #2c261a;
  font-size: 9px; letter-spacing: .2em; color: #c76b45;
}
#rite .vr-tehler { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
#rite .vr-teh {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
  background: #100e09; border-left: 3px solid var(--irk, #9db35e); padding: 6px 9px;
}
#rite .vr-teh-y { width: 34px; height: 40px; overflow: hidden; display: block; }
#rite .vr-teh-y .vr-bust { width: 100%; height: 100%; display: block; }
#rite .vr-teh-o { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#rite .vr-teh-o b { font-size: 10.5px; letter-spacing: .08em; color: #e9e1cc; font-weight: 600; }
#rite .vr-teh-o i { font-style: normal; font-size: 9px; color: var(--w-earth); }
#rite .vr-cizgi { display: flex; gap: 2px; margin-top: 2px; }
#rite .vr-cizgi s { width: 7px; height: 4px; background: #2a2418; text-decoration: none; }
#rite .vr-cizgi s.on { background: var(--irk, #9db35e); }
#rite .vr-teh-n {
  font-size: 11px; font-weight: 700; color: var(--irk, #9db35e);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
#rite .vr-bos { margin: 8px 0 0; font-size: 11.5px; color: var(--w-earth); font-style: italic; }

#rite .vr-son {
  margin-top: 11px; padding-top: 9px; border-top: 1px solid #2c261a;
  font-size: 10.5px; color: var(--w-earth); font-variant-numeric: tabular-nums;
}
#rite .vr-son b { color: #e9e1cc; font-weight: 700; }
#rite .vr-son.vr-dar b:first-of-type { color: #c76b45; }

#rite .vr-gir {
  margin-top: 11px; width: 100%; padding: 12px 10px;
  background: #12100a; border: 1px solid #3a3122; border-left: 3px solid var(--acc-lit);
  color: var(--acc-lit); font-family: var(--font, monospace); font-size: 12.5px;
  letter-spacing: .16em; cursor: pointer;
  animation: vrAd .6s ease-out 1.5s both;
}

@media (prefers-reduced-motion: reduce) {
  #rite .vr-k1, #rite .vr-k2, #rite .vr-k3, #rite .vr-k4,
  #rite .vr-ad, #rite .vr-kunye, #rite .vr-gir { animation: none; }
  #rite .vr-isik, #rite .vr-toz circle { animation: none; opacity: .5; }
}

/* ==========================================================================
   SIK PLAKALARI - the bounce and the clipped bill (owner's video, frame by
   frame). This block is late on purpose: it settles rules in both index.html
   and earlier in this file, and every declaration here is load-bearing.
   ========================================================================== */

/* THE ROOM IS RESERVED FOR EVERY PLATE THE MOMENT ANY ONE IS ARMED.
   Arming used to grow only the chosen plate, so switching from one option to
   the other grew one and shrank the other and everything between them moved.
   Measured on a 375px phone: the plate went 62 -> 79px and the second option's
   top edge travelled 19px on every switch. Reserving for all of them makes
   that switch cost exactly zero: the bar moves, the layout does not. One
   growth survives -- the first tap, all plates together -- and that one reads
   as the player starting something rather than as a glitch. */
#dc-options:has(.dc-opt.armed) .dc-opt,
#dc-options:has(.dc-opt.armed) .dc-opt.armed { padding-bottom: 46px !important; }

/* and it grows once, smoothly. The rest of the list matches the MUHUR press
   language so this declaration does not quietly cancel it. */
#dc-options .dc-opt {
  transition: transform .34s cubic-bezier(.18,1.5,.4,1),
              box-shadow .34s cubic-bezier(.18,1.5,.4,1),
              border-color .18s ease, background .14s ease,
              padding-bottom .2s cubic-bezier(.3,.8,.35,1);
}

/* THE BILL HAS TO BE READABLE, WHATEVER IT SAYS.
   The cue was `white-space: nowrap`, so a long bill could not wrap -- it ran
   out of the bar and was clipped at BOTH ends, and the player could not read
   the figures on the decree they were about to seal. Measured: text 345px in
   339px of usable width. */
#dc-options .dc-opt.armed::after {
  white-space: normal !important;
  height: auto !important; min-height: 34px;
  padding: 5px 10px !important;
  line-height: 1.25;
  text-align: center;
  /* GRID, NOT FLEX. Freeing white-space was not enough on its own: measured, a
     very long bill still refused to wrap, because the bar is a flex container
     and its anonymous text item was laid out on one line and overflowed.
     A grid places the same text as normal flow, so it wraps and the box grows,
     while place-items keeps a single line centred exactly as before. */
  display: grid !important; place-items: center;
}
/* the tracking does the real work: at .05em this bill is 24px narrower and
   fits on ONE line, which is where it belongs. Wrapping above is the safety
   net for a longer one, not the normal case. */
#dc-options .dc-opt.armed.fatura::after {
  font-size: 11px !important; letter-spacing: .05em !important;
}
/* WHAT THE 46px ABOVE IS SIZED FOR, measured on a 375px phone at these exact
   metrics (11px / .55px tracking / 13.75px line):
     the real worst case ....... 45 chars -> 1 line, 24px
     one line of headroom ...... 70 chars -> 2 lines, 38px
     would not fit ............. 96 chars -> 3 lines, 51px
   The game cannot reach the third line today: sonucOzeti() in main.js keeps
   exactly TWO figures ("two, never four: this rides one existing row and must
   not wrap it"). If that cap is ever raised, raise this reservation with it. */

/* ============================================================================
   IRK SEÇİMİ — YENİDEN (2026-08-29)
   ============================================================================
   The picker was unreachable for the whole life of the shipped build (the door
   is fixed in main.js), so nothing here had ever been looked at on a phone. It
   was six rounded cards with a 🔒 emoji and three bullet dots, and it was
   asking the single biggest question the game asks.

   WHAT IT IS NOW: six DOSSIERS on one desk. Each is a plate cut at two corners
   in the instrument's own idiom (the same clip the option plates use), with a
   rail down the left in the kind's colour, its mark, its status, one sentence,
   its three verbs, and a bottom row of the two facts that actually decide the
   run — where home is, and what this hand will finally offer the species.

   COLOUR IS THE ONLY THING THAT SEPARATES SIX OTHERWISE IDENTICAL PLATES, so
   it is carried in four places at once (rail, mark, name, wash) rather than
   spent on a border nobody reads. A closed channel keeps its shape and loses
   its colour: it is not a disabled button, it is a hand that has not been
   dealt.                                                                     */
#factionsel .fs-box { width: min(560px, 95%); }
#factionsel #fs-grid { grid-template-columns: 1fr; gap: 9px; padding: 2px 2px 8px; }
@media (min-width: 780px) { #factionsel #fs-grid { grid-template-columns: 1fr 1fr; } }

#fs-grid .fs-card {
  --k: var(--acc-lit);
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.10); border-left: 3px solid var(--k);
  border-radius: 0; background: #0b0a07; padding: 11px 13px 11px;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px,
                     100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
/* the wash sits UNDER the words and over the ground, so the plate is tinted
   without a single piece of text losing contrast */
#fs-grid .fs-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--k); opacity: .055; pointer-events: none;
}
#fs-grid .fs-card > * { position: relative; z-index: 1; }
#fs-grid .fs-card > .fs-sigil { z-index: 0; }
@media (hover: hover) {
  #fs-grid .fs-card:hover { transform: translateX(3px); border-color: rgba(255,255,255,.22);
    box-shadow: -3px 0 0 0 var(--k), 0 8px 26px rgba(0,0,0,.55); }
}
#fs-grid .fs-card:active { transform: translateX(1px); }

/* the mark, blown up and pushed off the corner: a watermark, not a picture */
#fs-grid .fs-sigil { position: absolute; right: -18px; bottom: -24px;
  width: 136px; height: 136px; color: var(--k); opacity: .12; pointer-events: none; }
#fs-grid .fs-sigil svg { width: 136px; height: 136px; display: block; }

#fs-grid .fs-head { display: flex; align-items: center; gap: 8px; }
#fs-grid .fs-mark { width: 20px; height: 20px; color: var(--k); flex: 0 0 auto; }
#fs-grid .fs-mark svg { width: 20px; height: 20px; display: block; }
#fs-grid .fs-name { font-family: var(--font); font-weight: 700; font-size: 14px;
  letter-spacing: .13em; color: var(--k); margin: 0; }
#fs-grid .fs-durum { margin-left: auto; font-size: 9px; letter-spacing: .16em;
  color: var(--k); border: 1px solid currentColor; padding: 2px 6px;
  white-space: nowrap; opacity: .85; }

#fs-grid .fs-lore { font-family: var(--read); letter-spacing: 0;
  font-size: 11.5px; line-height: 1.55; color: #cfd8cf; opacity: .8;
  margin: 8px 0 9px; min-height: 36px; }

#fs-grid .fs-verbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
#fs-grid .fs-verbs span { font-size: 9px; letter-spacing: .14em; padding: 3px 7px;
  border-radius: 0; color: var(--k); border: 1px solid currentColor; opacity: .78; }

/* THE ROW THAT DECIDES THE RUN. Two facts and a meter, on the plate's foot,
   under a hairline — the same footing the dilemma card uses for its bill. */
#fs-grid .fs-alt { display: flex; align-items: flex-end; gap: 14px;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
#fs-grid .fs-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#fs-grid .fs-kv i { font-style: normal; font-size: 8.5px; letter-spacing: .18em; color: #8d8375; }
#fs-grid .fs-kv b { font-size: 10.5px; font-weight: 500; letter-spacing: .05em; color: #e6dfd0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fs-grid .fs-zor { margin-left: auto; align-items: flex-end; }
#fs-grid .fs-zor b { display: flex; gap: 3px; align-items: center; height: 13px; }
#fs-grid .fs-zor s { display: block; width: 13px; height: 5px; background: rgba(255,255,255,.13); }
#fs-grid .fs-zor s.on { background: var(--k); }

/* ---- a channel that has not opened ---------------------------------------
   NOT a greyed-out button. The plate keeps its shape, its words and its
   weight and loses only its colour — the difference between "you may not"
   and "this one is not speaking yet", which is the thing the refusal lines
   underneath are at pains to say.                                          */
#fs-grid .fs-card.sealed { cursor: default; filter: none;
  border-left-color: #4c473f; }
#fs-grid .fs-card.sealed::after { opacity: 0; }
#fs-grid .fs-card.sealed .fs-name,
#fs-grid .fs-card.sealed .fs-durum,
#fs-grid .fs-card.sealed .fs-mark,
#fs-grid .fs-card.sealed .fs-verbs span { color: #837b6d; }
#fs-grid .fs-card.sealed .fs-sigil { color: #837b6d; opacity: .06; }
#fs-grid .fs-card.sealed .fs-zor s.on { background: #837b6d; }
#fs-grid .fs-card.sealed .fs-lore { opacity: .48; }
#fs-grid .fs-card.sealed:hover { filter: none; transform: none; box-shadow: none; }
#fs-grid .fs-card.sealed .fs-refuse { font-family: var(--read); letter-spacing: 0; }

/* ============================================================================
   AÇIK KANALLAR — the title screen's own state
   ============================================================================
   Three lines of weather stood here (CHANNEL OPEN / the WATCH waits / one
   press) and cost a third of the first screen to say nothing actionable. The
   board says the one thing the door under it needs the reader to know: which
   hands exist, in their own colours, so the choice one press away is already
   legible from the title.                                                    */
.ov-kanal { margin: 12px 0 2px; padding-top: 11px;
  border-top: 1px solid rgba(var(--gold-rgb),.13); }
.ov-kanal .ok-bas { font-size: 9px; letter-spacing: .2em; color: var(--t-ghost);
  margin-bottom: 8px; }
.ov-kanal .ok-sira { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-kanal .ok-k { --k: var(--acc-lit); display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 7px; border: 1px solid currentColor; color: var(--k);
  background: rgba(0,0,0,.35);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px,
                     100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.ov-kanal .ok-k i { display: block; width: 15px; height: 15px; flex: 0 0 auto;
  font-style: normal; font-size: 12px; line-height: 15px; text-align: center; }
.ov-kanal .ok-k i svg { width: 15px; height: 15px; display: block; }
.ov-kanal .ok-k b { font-size: 10px; font-weight: 500; letter-spacing: .13em; }
.ov-kanal .ok-k.kapali { color: #6d675c; }

/* ---- the picker's own head, tightened -------------------------------------
   Measured on a 375×812 phone: the title, a three-line subtitle and the box
   padding took 320px of an 812px screen — two and a half plates visible out of
   six, on the screen whose entire job is comparing six things. The subtitle
   also stopped being true (it said FIVE WATCHERS on a screen showing six
   cards) and now says the one fact that matters: two of them are dealt. */
#factionsel .gm-box > h2 { font-size: 17px; letter-spacing: .3em; margin: 0 0 6px; }
#factionsel .fs-sub { font-size: 10.5px; letter-spacing: .14em; margin-bottom: 11px;
  line-height: 1.5; }
#factionsel .gm-box { padding-top: 16px; padding-bottom: 14px; }

/* the watermark was the loudest thing on the plate. It is a WATERMARK: it
   belongs under the numbers, not over them. */
#fs-grid .fs-sigil { right: -22px; bottom: -26px; width: 112px; height: 112px; opacity: .07; }
#fs-grid .fs-sigil svg { width: 112px; height: 112px; }
#fs-grid .fs-card.sealed .fs-sigil { opacity: .045; }

/* four plates on the first screen instead of two and a half */
#fs-grid .fs-card { padding: 10px 12px 10px; }
#fs-grid .fs-lore { margin: 7px 0 8px; min-height: 32px; font-size: 11px; line-height: 1.5; }
#fs-grid .fs-verbs { margin-bottom: 8px; }
#fs-grid .fs-alt { padding-top: 7px; }

/* ---- ◂ IRKI DEĞİŞTİR ------------------------------------------------------
   A quiet third control under the two doors. It is deliberately NOT a door: it
   goes back to a question, and a screen with three equal bars on it stops
   saying which one is the way forward. */
.ov-irk { display: block; width: 100%; margin: 2px 0 0; padding: 9px 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 10.5px; letter-spacing: .18em;
  color: var(--t-ghost); transition: color .15s; }
/* the '◂ ' prefix died with the text-button design: on the icon tile it
   printed a second, contradictory arrow above the swap glyph (owner: 'hem
   geri hem ileri geri') */
.ov-irk:hover, .ov-irk:focus-visible { color: var(--gold); }

/* ---- THE PICKER AS THE BOOT SCREEN ----------------------------------------
   It is the first thing in the game now, so it stops looking like a modal that
   opened over a run: no scrim over furniture, and the plate list gets the
   height the front door used to spend on a briefing nobody had chosen yet. */
#factionsel.fs-kapi { background: #07060a; }
#factionsel.fs-kapi #fs-grid { max-height: min(74vh, 720px); }

/* the chronicle waiting behind a card — the one fact that decides whether the
   door behind it says CONTINUE or SEED */
#fs-grid .fs-kayit { margin-top: 8px; padding-top: 7px;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-size: 9px; letter-spacing: .15em; color: var(--k); opacity: .9; }
#fs-grid .fs-kayit::before { content: '◈ '; }

/* ---- THE FRONT DOOR WEARS THE CHOSEN HAND ---------------------------------
   The kind is picked BEFORE this screen now, so a gold title over a violet
   choice was the interface disagreeing with the player about what they had
   just done. `--gold` is redefined for this subtree only — custom properties
   inherit, so every rule under .overlay.title that already reads var(--gold)
   follows the race without one of them being touched. Annunaki's own hue IS
   gold, so that path is unchanged by construction. */
body[data-kind] .overlay.title { --gold: var(--race); --gold-dim: var(--race-dim); }

/* the chosen hand's standing order, where the channel board used to be */
.ov-kanal.ov-el .ok-gorev { margin: 9px 0 0; font-family: var(--read);
  font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--t-dim); }
.ov-kanal.ov-el .ok-sira { gap: 0; }

/* a kind's name and the run number do not both fit on one 375px line at the
   title's tracking, and the wrap put a lone "1" under the name */
.overlay.title #ov-sub { font-size: 12px; letter-spacing: .18em; }

/* ============================================================================
   IRK SEÇİMİ · A·SAHNE + C·YOKLAMA IZGARASI  (sahip onayı, 2026-08-29)
   ============================================================================
   Six equal plates put two thirds of the first screen behind a hatch. The
   screen is two layers now: the hands that were dealt get a NAMED PLATE each,
   and the four that were not get their marks and their names in a rack, where
   they are still on the table and still answer in their own voice.           */
#factionsel .fs-box { width: min(560px, 95%); }
#factionsel #fs-grid { grid-template-columns: 1fr; gap: 11px; max-height: none;
  overflow: visible; padding: 0; }

#fs-grid .fs-card { padding: 17px 16px 14px; border-left-width: 3px; }
#fs-grid .fs-sigil { right: -30px; bottom: -34px; width: 170px; height: 170px; opacity: .10; }
#fs-grid .fs-sigil svg { width: 170px; height: 170px; }

#fs-grid .fs-head { gap: 9px; }
#fs-grid .fs-mark { width: 26px; height: 26px; }
#fs-grid .fs-mark svg { width: 26px; height: 26px; }
/* the name is the loudest thing on the screen, because the name is the choice */
#fs-grid .fs-name { font-size: 19px; letter-spacing: .13em; }
#fs-grid .fs-lore { margin: 12px 0 13px; min-height: 0; max-width: 31ch;
  font-size: 12px; line-height: 1.6; opacity: .85; }

#fs-grid .fs-alt { gap: 16px; padding-top: 10px; }
#fs-grid .fs-kv i { font-size: 8.5px; }
#fs-grid .fs-kv b { font-size: 11px; }
/* THE WAY IN IS ON THE PLATE. A plate that is a button should say what pressing
   it does, and it changes with the slot behind it: a kind with a sealed
   chronicle offers to go back to it, not to start over. */
#fs-grid .fs-git { margin-left: auto; align-self: flex-end; white-space: nowrap;
  color: var(--k); font-size: 11.5px; font-weight: 700; letter-spacing: .13em; }
#fs-grid .fs-git s { text-decoration: none; margin-left: 3px;
  display: inline-block; transition: transform .15s; }
@media (hover: hover) { #fs-grid .fs-card:hover .fs-git s { transform: translateX(3px); } }

#fs-grid .fs-kayit { margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-size: 9px; letter-spacing: .15em; color: var(--k); opacity: .9; }

/* ---- the rack ------------------------------------------------------------- */
#fs-muhur { margin-top: 17px; text-align: left; }

/* THE LANGUAGE SWITCH ON THE PICKER. It sits under the sealed rack, where the
   owner marked it, and it is deliberately quieter than the two kind plates: it
   is a setting, not a third hand to choose. The flag reads as a small object on
   the left rather than as decoration inside the label. */
#fs-dil {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 14px; padding: 11px 12px;
  background: #0a0908; border: 1px solid #2c2925; cursor: pointer;
  font-family: var(--font); font-size: 11px; letter-spacing: .18em;
  color: var(--t-ghost); transition: border-color .14s, color .14s;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
#fs-dil:hover, #fs-dil:focus-visible { border-color: rgb(var(--t-rgb)); color: rgb(var(--t-hi-rgb, var(--t-rgb))); }
#fs-dil:focus-visible { outline: 2px solid rgb(var(--t-rgb)); outline-offset: 2px; }
#fs-dil .fd-b { display: block; width: 21px; height: 14px; flex: 0 0 auto; }
#fs-dil .fd-b svg { width: 21px; height: 14px; display: block; }
#fs-dil .fd-t { line-height: 1; }
#fs-muhur .fm-bas { font-size: 9px; letter-spacing: .2em; color: var(--t-ghost);
  margin-bottom: 9px; }
#fs-muhur .fm-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#fs-muhur .fm-k { aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  border: 1px solid #2c2925; background: #0a0908; color: #6d675c;
  cursor: pointer; padding: 0; font-family: var(--font);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px,
                     100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: color .15s, border-color .15s; }
#fs-muhur .fm-m { width: 24px; height: 24px; }
#fs-muhur .fm-m svg { width: 24px; height: 24px; display: block; }
#fs-muhur .fm-k i { font-style: normal; font-size: 7.5px; letter-spacing: .1em;
  text-align: center; line-height: 1.2; padding: 0 2px; }
@media (hover: hover) {
  #fs-muhur .fm-k:hover { color: #a49a86; border-color: #453f36; }
}
#fs-muhur .fm-k.refusing { color: #a49a86; border-color: #5a5145;
  animation: seal-flinch .34s ease-out; }
/* the sentence the rack exists to deliver */
#fs-muhur .fm-red { margin: 11px 0 0; min-height: 0; font-family: var(--read);
  font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--w-bone);
  opacity: 0; transition: opacity .3s ease; }
#fs-muhur .fm-red.on { opacity: 1; }

/* ---- THE FRONT DOOR IS THE CHOSEN HAND'S DOOR -----------------------------
   The kind is picked before this screen now, so a gold title over a violet
   choice is the interface disagreeing with the player about what they just
   did. The `--gold` re-scope above is not enough on its own: the title-screen
   rules were written with literal hexes (var(--acc-door), rgba(var(--gold-rgb),…)) rather
   than the token, so they never followed the race. These are the same rules,
   re-stated in the kind's own colour, and they touch nothing outside
   `.overlay.title` — the ending screens and the in-run console are unchanged.
   Annunaki's hue IS gold, so that path is identical by construction.        */
body[data-kind] .overlay.title #ov-title,
body[data-kind] .overlay.title #ov-title.good {
  color: var(--race); text-shadow: 0 0 10px var(--race-glow); }
body[data-kind] .overlay.title #ov-sub { color: var(--race); }
/* FAZ 3 killed the ring around the mark; this line used to restate the
   ringed-era shadow at data-kind weight — on a border-radius:0 element that
   painted a dark SQUARE TILE behind the medallion (owner's screenshot,
   2026-09-02: "ikonun arka plani olmamasi gerekiyor"). The medallion floats
   free; its glow lives on the svg's own drop-shadow below. */
body[data-kind] .overlay.title #ov-logo { box-shadow: none; }
body[data-kind] .overlay.title #ov-logo svg {
  color: var(--race); filter: drop-shadow(0 0 4px var(--race-glow)); }
/* the doors are addressed by their ROLE further up the sheet
   (`#ov-reseed[data-rol="oyna"]` and friends), which outranks a plain
   `.ov-door` selector — measured: the title went violet and the door under it
   stayed gold. Same selectors, same weight, the kind's colour. */
body[data-kind] .overlay.title .ov-doors > .ov-door {
  border-color: var(--race-dim); background: rgba(0,0,0,.25); color: var(--race); }
body[data-kind] .overlay.title .ov-doors > .ov-door:hover { border-color: var(--race); }
body[data-kind] .overlay.title #ov-reseed[data-rol="oyna"] {
  border-color: var(--race-dim); color: var(--race); }
body[data-kind] .overlay.title #ov-reseed[data-rol="oyna"]:hover {
  border-color: var(--race); color: var(--race); }
body[data-kind] .overlay.title .ov-defter > #ov-resume[data-rol="devam"] {
  border-color: var(--race); color: var(--race); }
body[data-kind] .overlay.title #ov-ayar[data-rol="ayar"] { border-color: var(--race-dim); }
body[data-kind] .overlay.title #ov-ayar[data-rol="ayar"]:hover { border-color: var(--race); }
body[data-kind] .overlay.title .ov-doors > .ov-door.armed {
  border-color: var(--race); color: var(--race);
  background: rgba(0,0,0,.4);
  box-shadow: 0 0 0 1px var(--race-dim), 0 0 22px var(--race-glow); }
/* RESET KEEPS ITS RED. Red never means a kind in this game — it means the
   thing you cannot undo — so the danger door is the one control on the screen
   that does not take the race's colour. */
body[data-kind] .overlay.title .ov-doors > #ov-reset { border-color: rgba(230,57,0,.45); }

/* THE FOOTING ROW MUST NOT EAT ITS OWN LABELS. A kind with a chronicle behind
   it says NÖBETE DÖN instead of NÖBETİ AL — four characters wider — and the
   flex row paid for them out of the two columns beside it: measured, KOVAN
   rendered as "KOVA…" and BÜYÜK YÜKLEME as "BÜYÜK YÜKLE…". The columns keep
   their natural width now and the call-to-action drops to its own line when
   there is no room for it beside them. */
#fs-grid .fs-alt { flex-wrap: wrap; row-gap: 9px; }
#fs-grid .fs-kv { flex: 0 0 auto; }
#fs-grid .fs-kv b { overflow: visible; text-overflow: clip; }

/* the resume bar is a FILLED bar, so re-colouring its border did nothing —
   the fill is the control. It belongs to the kind whose chronicle it reopens. */
body[data-kind] .overlay.title .ov-defter > #ov-resume[data-rol="devam"] {
  background: linear-gradient(var(--race), var(--race-dim)); color: #0a0810; }
body[data-kind] .overlay.title .ov-defter > #ov-resume[data-rol="devam"]:hover {
  background: linear-gradient(var(--race), var(--race)); }

/* ---- HATA DEFTERİ ----------------------------------------------------------
   A phone has no console. Every swallowed error in the game writes here, the
   buffer survives the app being killed, and this sheet is how a player reads
   it back and sends it on. Deliberately plain: it is evidence, not a screen. */
.hata-box { width: min(560px, 95%); max-height: 88vh; display: flex; flex-direction: column; }
.hata-metin { flex: 1 1 auto; overflow: auto; margin: 12px 0; padding: 12px;
  background: #0a0908; border: 1px solid var(--line); text-align: left;
  font-family: var(--font); font-size: 10.5px; line-height: 1.55; color: #cfc6b4;
  white-space: pre-wrap; word-break: break-word; max-height: 58vh; }
.hata-dugmeler { display: flex; gap: 8px; }
.hata-dugmeler button { flex: 1; padding: 11px 0; cursor: pointer;
  background: transparent; border: 1px solid var(--gold-dim); color: var(--gold);
  font-family: var(--font); font-size: 11px; letter-spacing: .14em; }
.hata-dugmeler button:hover { border-color: var(--gold); }


/* ============================================================================
   BIR GIRIS ANIMASYONU GORUNURLUGU TASIYAMAZ
   ============================================================================
   AN ENTRANCE MAY MOVE A THING. IT MAY NOT DECIDE WHETHER THE THING EXISTS.

   Reported 2026-08-30: the game is fine on a OnePlus Open and shows a black
   board on a Galaxy S24 Ultra — same build, same save. Not a logic fault, a
   TIMING one. `girisIsaretle()` puts `.gm-gir` on the map sheet and on the
   card, and gmGir began at `opacity: 0`. A device whose animation clock is
   throttled or paused — Samsung power saving does exactly this — holds the
   element on frame zero, which is to say invisible, for ever. The sheet was
   open, laid out, thirty pins drawn, and unreadable. The status strip carries
   no entrance, which is why it was the one thing on screen.

   Measured here too, in my own browser, before the report: `.ca-rise` computed
   opacity 0 and every card bust was blank until the animations were cancelled.

   The file had already learnt this once, for the option plates: optIn's
   keyframes carry NO opacity, only transform, and the plate rests at opacity 1
   in its own rule — so a stopped clock costs it four pixels of travel and
   nothing else. That is now the rule everywhere. Twenty-four entrances were
   rewritten to move without fading.

   If you add an entrance: animate transform. If you must fade, the element's
   own style must already be visible and the keyframes must not mention
   opacity — because the browser is allowed to leave you on the first frame,
   and the first frame has to be a frame the player can read.              */

/* ==== FAZ 3 — SEFER DEFTERI AMBIYANSI (GRAFIK.md) ============================
   Kagit dokusu, murekkep akisi, pin nefesi. Hepsi transform/opacity; kagidin
   uzerine binen iki katman da pointer-events gecirmez. */
.sf-kagit::before { content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0.7 0.7 0 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px; }
#sefer.sf-kovan .sf-kagit::before { mix-blend-mode: normal; opacity: .1; }
@media (prefers-reduced-motion: no-preference) {
  /* BURADASIN halkasi nefes alir — harita acikken tek canli nokta sensin */
  .sf-halka { animation: sfNefes 5s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center; }
  @keyframes sfNefes {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: .72; } }
  /* nehrin genis yatagi murekkep gibi soluk alip verir (26sn — ortam hizi) */
  .sf-nehir-gen { animation: sfAkis 26s ease-in-out infinite; }
  @keyframes sfAkis { 0%, 100% { opacity: .26; } 50% { opacity: .38; } }
}

/* ==== FAZ 4 — MUHUR BAS-COK (GRAFIK.md mikro etkilesim) ======================
   Parmak plakaya degdigi anda plaka coker; muhur animasyonlari (optSealOk/
   optSealFail) zaten parlamayi tasiyor. Yalniz transform — CRT cercevesine
   dokunulmaz. */
@media (prefers-reduced-motion: no-preference) {
  .dc-opt.armed { transition: transform .08s ease; }
  .dc-opt.armed:active { transform: translateY(1.5px) scale(.997); }
}

/* ==== FAZ 1 — YOL KAVGASININ SAHNESI (savas_sahne.js) ========================
   Arazi sahneyi secer, irk boyasi figurlerin rimidir, her durus sahnede oynar.
   Yalniz transform/opacity; kisa ekranda sahne cekilir, mekanik kalir. */
.ct-sahne { margin: 6px 0 8px; border: 1px solid #2a2140; border-radius: 8px;
  overflow: hidden; background: #07060c; }
.ct-sahne svg { display: block; width: 100%; height: auto; max-height: 24vh; }
@media (max-height: 560px) { .ct-sahne { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sv-nefes { animation: svNefes 3.6s ease-in-out infinite alternate;
    transform-box: fill-box; transform-origin: center bottom; }
  @keyframes svNefes { from { transform: scaleY(1); } to { transform: scaleY(1.02); } }
  .sv-fener { animation: svFener 3.2s ease-in-out infinite alternate;
    transform-box: fill-box; transform-origin: top center; }
  @keyframes svFener { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
  .sv-isik { animation: svIsik 2.6s ease-in-out infinite alternate; }
  @keyframes svIsik { from { opacity: .75; } to { opacity: 1; } }
  .sv-sis { animation: svSis 16s ease-in-out infinite; }
  @keyframes svSis { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
  /* vurus beatleri: figur gruplari kayar, geri gelir — 1.1sn, tek easing */
  .sv-atak-sen .sv-bekci { animation: svHamle 1.05s cubic-bezier(.3,1.2,.4,1); }
  @keyframes svHamle { 30% { transform: translateX(96px); } 70% { transform: translateX(96px); } }
  .sv-atak-onlar .sv-dusman { animation: svBaski 1.05s cubic-bezier(.3,1.2,.4,1); }
  @keyframes svBaski { 30% { transform: translateX(-92px); } 70% { transform: translateX(-92px); } }
  .sv-atak-onlar .sv-vagon, .sv-atak-onlar .sv-kervan { animation: svSars .5s .3s; }
  @keyframes svSars { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2.5px, 1px); }
    55% { transform: translate(2.5px, -1px); } 80% { transform: translate(-1.5px, 0); } }
  .sv-cekil .sv-kervan, .sv-cekil .sv-bekci { animation: svCekil 1.05s ease-in forwards; }
  @keyframes svCekil { to { transform: translateX(-150px); opacity: 0; } }
}

/* ==== KAVGANIN KAYNAK SATIRI + OKUMA REHBERI (2026-08-31) ====================
   Donanim ve yoldasin katkisi plakanin USTUNDE yazar; ogretilen kavgada iki
   raundluk okuma rehberi canli sayilarla konusur. */
.ct-kaynak { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
  margin: 6px 0 2px; font-size: 10.5px; letter-spacing: .06em;
  color: var(--t-dim); }
.ct-kaynak u { text-decoration: none; opacity: .4; }
.ct-koc { border: 1px dashed var(--t-ghost); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0 2px; font-size: 11px; line-height: 1.65;
  color: var(--t-dim); background: rgba(0,0,0,.25); }
.ct-koc b { display: block; color: var(--t-hi); letter-spacing: .14em;
  font-size: 10.5px; margin-bottom: 4px; }
.ct-koc p { margin: 3px 0; }
.ct-koc i { color: var(--t-hi); font-style: normal; font-weight: 700; }

/* ==== CAPRAZ KANAL — teklif perdesi + gecis toreni (kesisim.js) ============== */
#cross-teklif { position: fixed; inset: 0; z-index: 920; display: grid;
  place-items: center; background: rgba(4,3,8,.72); opacity: 0;
  transition: opacity .24s ease; font-family: var(--font); }
#cross-teklif.acik { opacity: 1; }
.cx-kutu { width: min(430px, 92vw); max-height: 88vh; overflow-y: auto;
  background: #0d0a14; border: 1px solid var(--t-ghost); border-radius: 12px;
  padding: 16px 16px 12px; color: var(--t-dim); }
.cx-ust { font-size: 10px; letter-spacing: .22em; color: var(--t-ghost); }
.cx-glifler { display: flex; justify-content: center; gap: 18px; font-size: 32px;
  margin: 10px 0 2px; }
.cx-glifler i { color: var(--t-ghost); font-style: normal; font-size: 18px;
  align-self: center; }
.cx-kutu h3 { margin: 6px 0; text-align: center; letter-spacing: .14em;
  color: var(--t-hi); font-size: 13.5px; }
.cx-kutu p { font-size: 12px; line-height: 1.7; margin: 8px 0; }
.cx-not { color: var(--t-ghost); font-size: 11px; }
.cx-sec { display: block; width: 100%; margin-top: 8px; padding: 10px 12px;
  text-align: left; background: #12101c; border: 1px solid var(--t-ghost);
  border-radius: 9px; color: var(--t-mid); font-family: var(--font);
  cursor: pointer; }
.cx-sec b { display: block; letter-spacing: .1em; font-size: 12.5px; }
.cx-sec i { font-size: 10.5px; color: var(--t-ghost); font-style: normal; }
.cx-gec { border-color: var(--cxr); }
.cx-gec b { color: var(--cxr); }
@media (prefers-reduced-motion: no-preference) {
  .cx-sec:active { transform: translateY(1px); } }

#irk-gecis { position: fixed; inset: 0; z-index: 940; pointer-events: none;
  font-family: var(--font); }
#irk-gecis .ig-karart { position: absolute; inset: 0; background: #030208; opacity: 0; }
#irk-gecis.acik .ig-karart { opacity: .97; transition: opacity .5s ease; }
#irk-gecis.biter { transition: opacity .4s ease; opacity: 0; }
#irk-gecis .ig-eski { position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%); font-size: 62px; color: var(--ige);
  opacity: 0; text-shadow: 0 0 34px var(--ige); }
#irk-gecis .ig-seam { position: absolute; left: 8%; right: 8%; top: 44%;
  height: 2px; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, transparent, var(--igy), transparent); }
#irk-gecis .ig-yeni { position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%) scale(.2); font-size: 62px; color: var(--igy);
  opacity: 0; text-shadow: 0 0 34px var(--igy); }
#irk-gecis .ig-ad { position: absolute; left: 0; right: 0; top: 60%;
  text-align: center; letter-spacing: .3em; font-size: 11px;
  color: var(--t-ghost); opacity: 0; }
#irk-gecis .ig-ad b { display: block; margin-top: 7px; font-size: 20px;
  letter-spacing: .24em; color: var(--igy); }
@media (prefers-reduced-motion: no-preference) {
  #irk-gecis.acik:not(.az) .ig-eski { animation: igEski 1.2s .15s cubic-bezier(.4,0,.7,1) forwards; }
  @keyframes igEski {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
    22% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    78% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(.05); filter: brightness(3); } }
  #irk-gecis.acik:not(.az) .ig-seam { animation: igSeam 1s 1.25s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes igSeam {
    0% { transform: scaleX(0); opacity: 0; }
    30% { opacity: 1; }
    85% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: .35; } }
  #irk-gecis.acik:not(.az) .ig-yeni { animation: igYeni .9s 1.75s cubic-bezier(.2,1.3,.35,1) forwards; }
  @keyframes igYeni {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
  #irk-gecis.acik:not(.az) .ig-ad { animation: igAd .7s 2s ease forwards; }
  @keyframes igAd { to { opacity: 1; } }
}
#irk-gecis.acik.az .ig-yeni, #irk-gecis.acik.az .ig-ad { opacity: 1;
  transform: translate(-50%, -50%) scale(1); }
#irk-gecis.acik.az .ig-ad { transform: none; }

/* ==== DUNYALAR ARASI GECIS (dunyagecis.js) ==================================
   Iki el ayri seyahat eder: filo govdesi / orgu dugumu. Yalniz transform ve
   opacity; perde 2sn sonra kendi kendini kaldirir. */
#dunya-gecis { position: fixed; inset: 0; z-index: 930; pointer-events: none;
  display: grid; place-items: center; opacity: 0;
  transition: opacity .32s ease; font-family: var(--font);
  background: radial-gradient(ellipse at 50% 45%, #0e0b18 0%, #050409 70%); }
#dunya-gecis.acik { opacity: 1; }
#dunya-gecis.biter { opacity: 0; }
#dunya-gecis .dg-alan { position: relative; width: min(520px, 92vw); height: 220px; }
#dunya-gecis .dg-yildizlar { position: absolute; inset: 0; overflow: hidden; }
#dunya-gecis .dg-yildizlar i { position: absolute; top: var(--y); left: 100%;
  width: 34px; height: 1.4px; background: linear-gradient(90deg, transparent, #cdbdf0);
  opacity: var(--o); }
#dunya-gecis.an .dg-yildizlar i { background: linear-gradient(90deg, transparent, #e8dcc0); }
#dunya-gecis .dg-arac { position: absolute; left: 50%; top: 50%; width: 148px;
  transform: translate(-50%, -50%); }
#dunya-gecis .dg-ad { position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; }
#dunya-gecis .dg-ad i { display: block; font-style: normal; font-size: 10px;
  letter-spacing: .28em; color: var(--t-ghost); }
#dunya-gecis .dg-ad b { display: block; margin-top: 8px; font-size: 21px;
  letter-spacing: .26em; }
#dunya-gecis.kv .dg-ad b { color: #c78ae8; text-shadow: 0 0 22px rgba(199,138,232,.5); }
#dunya-gecis.an .dg-ad b { color: #e8c96a; text-shadow: 0 0 22px rgba(232,201,106,.5); }
@media (prefers-reduced-motion: no-preference) {
  #dunya-gecis.acik:not(.az) .dg-yildizlar i {
    animation: dgAkis var(--h) linear var(--g) infinite; }
  @keyframes dgAkis {
    from { transform: translateX(0); opacity: var(--o); }
    to { transform: translateX(calc(-100vw - 40px)); opacity: 0; } }
  #dunya-gecis.acik:not(.az) .dg-arac {
    animation: dgArac 2.1s cubic-bezier(.3,.8,.4,1) both; }
  @keyframes dgArac {
    0% { transform: translate(-50%, -50%) scale(.55); opacity: 0; }
    22% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    76% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.35); opacity: .1; } }
  #dunya-gecis.acik:not(.az) .dg-ad b { animation: dgAd .8s .55s ease both; }
  @keyframes dgAd { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; } }
}

/* ==== KOVANDA — ikinci dunya, kafesin kendi derisiyle =======================
   body.nibiru kulenin bakiri; kovan eli ayni yerde kendi menekseSini tasir.
   Yalniz ikinci dunyada acik, Dunya'da hicbir etkisi yok. */
body.kovanda #cmd-vitals { border-bottom-color: rgba(199,138,232,.5); }
body.kovanda #cmd-vitals .vt-clock { color: #d8b8f0; }
body.kovanda #cmd-vitals .vt-door { color: #c78ae8; opacity: .9; }
body.kovanda .vt-face { border-color: rgba(199,138,232,.7); }
body.kovanda #cmd-vitals .vt-face { color: #e2c8f5; }
body.kovanda .gal-go.kovan { border-color: #c78ae8; color: #e2c8f5; }

/* ==== IKINCI DUNYA HARITASI, KOVAN ELINDE ==================================
   (sahip: "kovan altin rengi") — nbharita kulenin bakirini ciziyordu; kovan
   komutani kendi menekseSini gorur. Ayni sema, kafesin boyasi. */
#sefer.sf-kovan .nb-omurga { stroke: rgba(199,138,232,.16); }
#sefer.sf-kovan .nb-saft { stroke: #4a3363; }
#sefer.sf-kovan .nb-saft.canli { stroke: #b58ae0;
  filter: drop-shadow(0 0 1px rgba(199,138,232,.6)); }
#sefer.sf-kovan .nb-siradaki { fill: #e2c8f5; }
#sefer.sf-kovan .nb-oda { fill: #150d24; stroke: #7d57a3; }
#sefer.sf-kovan .nb-kat.secili .nb-oda { stroke: #e2c8f5; }
#sefer.sf-kovan .nb-kat.burada .nb-oda { stroke: #c78ae8; }
#sefer.sf-kovan .nb-cift { stroke: #c78ae8; }
#sefer.sf-kovan .nb-ad { fill: #c9a8e8; }
#sefer.sf-kovan .nb-kat.burada .nb-ad { fill: #f0e6fb; }
#sefer.sf-kovan .nb-rozet { fill: #b58ae0; stroke: #0d0716; }
#sefer.sf-kovan .nb-rozet-n { fill: #0d0716; }
#sefer.sf-kovan .nb-bos { fill: #3a2a54; }
#sefer.sf-kovan .nb-kilit rect, #sefer.sf-kovan .nb-kilit path { stroke: #8a76b8; }
#sefer.sf-kovan.sf-nb .sf-panel h3, #sefer.sf-kovan.sf-nb #sf-panel h3 { color: #d8b8f0; }
#sefer.sf-kovan.sf-nb .sf-rozet-ad { border-color: #7d57a3; color: #c9a8e8; }
#sefer.sf-kovan .nb-tarif { color: #a894c4; }
#sefer.sf-kovan .nb-not { border-color: #5b4178; color: #a894c4; }
#sefer.sf-kovan.sf-nb .sf-git { background: linear-gradient(#c78ae8, #8a5fae);
  border-color: #5b4178; color: #150d24; }
#sefer.sf-kovan.sf-nb .sf-kagit, #sefer.sf-kovan.sf-nb #sf-kagit {
  background:
    radial-gradient(circle at 50% 18%, #150d24 0%, #08050f 74%) !important;
  border-color: #2e2444 !important; }

/* kovanin varis perdesi — gezegen degil, petek */
#nb-arrive.kovan .nba-t1 { letter-spacing: 14px; }

/* ==== KAVGA SADELESTI (2026-08-31, StS niyet dili) ==========================
   Plakada TEK buyuk sayi: o durustan sonra KALAN direnc. Rengi hukumdur:
   yesil temiz, duz sari yara, kirmizi dusebilirsin. Hesap seridi ve rehber
   duvari gitti; tek hedef cumlesi kaldi. */
#rite .ct-hedef { margin: 8px 0 2px; font-size: 12px; line-height: 1.6;
  color: var(--t-dim); }
#rite .ct-hedef b { color: var(--t-hi); }
#rite .ct-durus .ct-kalan { display: block; margin-top: 6px; line-height: 1; }
#rite .ct-durus .ct-kalan i { display: block; font-style: normal; font-size: 8.5px;
  letter-spacing: .24em; color: var(--w-moss); margin-bottom: 3px; }
#rite .ct-durus .ct-kalan em { font-style: normal; font-family: var(--font);
  font-size: 27px; font-weight: 700; color: #efe6d2;
  font-variant-numeric: tabular-nums; }
#rite .ct-durus.ct-temiz { border-color: rgba(127,208,90,.55); }
#rite .ct-durus.ct-temiz .ct-kalan em { color: #7fd05a; }
#rite .ct-durus.ct-kritik { border-color: rgba(224,149,78,.6); }
#rite .ct-durus.ct-kritik .ct-kalan em { color: #e0954e; }
#rite .ct-durus.ct-olur { border-color: rgba(224,72,58,.65); }
#rite .ct-durus.ct-olur .ct-kalan em { color: #e0483a; }
/* kaynak satiri kucuk ve golgede kalir — sayilarin zaten icinde */
#rite .ct-kaynak { font-size: 9.5px; opacity: .75; margin: 4px 0 0; }

/* ==== VARIS TEHDIT SERIDI (2026-09-01) ======================================
   Bes satirlik katalog tek serit oldu: kucuk bustler, en sik rastlanan
   halkali; dokununca tek satirlik not. GUC rozeti b1003'te kalkti -- dovus
   b970'te kaldirilmisti, rozet olu bir raund dongusunun tabanini yaziyordu. */
.vr-tehsira { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin: 4px 0 2px; }
.vr-tk { position: relative; width: 52px; padding: 4px 2px 4px; cursor: pointer;
  background: rgba(0,0,0,.3); border: 1px solid var(--t-edge); border-radius: 9px;
  font-family: var(--font); text-align: center; }
.vr-tk .vr-bust, .vr-tk svg { width: 40px; height: 40px; display: block;
  margin: 0 auto; border-radius: 6px; }
.vr-tk.vr-agir { border-color: var(--irk);
  box-shadow: 0 0 0 1px var(--irk), 0 0 14px -4px var(--irk); }
.vr-tk.vr-sec { background: rgba(255,255,255,.05); border-color: var(--irk); }
.vr-tehnot { min-height: 16px; font-size: 11px; color: var(--t-dim);
  margin: 5px 0 2px; letter-spacing: .03em; }
@media (prefers-reduced-motion: no-preference) {
  .vr-tk:active { transform: translateY(1px); } }

/* ==== HARITA ACIKKEN KARTA DOKUNULAMAZ (2026-09-01 tarama) ==================
   Olculdu: #sefer acikken altindaki #decision hala offsetParent'li ve
   tiklanabilir — parmak kagidin kenarina degdiginde arkadaki sik muhurlenebilir.
   Kagit ustteyken karti girdiye kapatiyoruz; gorunurlugu degistirmiyoruz, cunku
   kagit kapaninca kart oldugu gibi orada durmali. */
body:has(#sefer:not(.hidden)) #decision,
body:has(#galaxy-sheet:not(.hidden)) #decision,
body:has(#palace-sheet:not(.hidden)) #decision { pointer-events: none; }

/* ==== KAPI TEK CUMLE SOYLER (Faz 1) ========================================
   Brifingin ilk satiri gorev tanimidir ve on sayfada kalir; geri kalani
   kullanicinin actigi bir kapinin arkasinda. */
.ov-nasil{
  display:block; width:100%; margin:10px 0 0; padding:9px 12px;
  background:transparent; border:1px dashed var(--t-ghost); border-radius:8px;
  color:var(--t-dim); font-family:var(--font); font-size:11px;
  letter-spacing:.18em; cursor:pointer;
}
.ov-nasil:hover{ color:var(--t-hi); border-color:var(--t-dim); }
.ov-nasil-ic{ margin-top:10px; }
.ov-nasil-ic p{ margin:0 0 10px; }
@media (prefers-reduced-motion: no-preference){
  .ov-nasil{ transition:color .18s ease, border-color .18s ease; }
  .ov-nasil:active{ transform:translateY(1px); }
}

/* ==== KAPININ ARKASINDAKI DIORAMA (Faz 3 · menufon.js) =====================
   Tam kanama bir katman, kutunun arkasinda. Kutu kendi zeminini boyamaya
   devam ediyor; diorama yalniz cerceveyi ve derinligi tasiyor. */
.ov-fon{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  pointer-events:none; border-radius:inherit;
}
.ov-fon svg{ width:100%; height:100%; display:block; }
/* kutu dioramanin ustunde durur — ama ONUNDE degil ICINDE dursun: hafif
   saydamlik + arka plan bulanikligi derinligi kutunun icine tasiyor, metin
   kendi zemininde okunur kalir. Destegi olmayan tarayicida zemin opak. */
.overlay .ov-box{ position:relative; z-index:1; }
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  .overlay:not(.defterli) .ov-box{
    background-color: color-mix(in srgb, var(--t-panel) 88%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    backdrop-filter: blur(7px) saturate(1.1);
  }
}

/* ==== SICILE GECTI SERIDI (Faz 2 · kesinti diyeti) ==========================
   Sahne kapandiginda ekrani kaplayan tam sayfa yerine tek satir. Defterin
   kendisi silinmedi — 'DEFTERI AC' ayni sayfayi getiriyor. */
#dg-serit{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%, 20px);
  z-index:520; display:flex; align-items:center; gap:14px;
  max-width:min(560px, 94vw); padding:10px 12px 10px 16px;
  background:var(--t-panel); border:1px solid var(--t-edge);
  border-left:3px solid var(--acc-lit); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-family:var(--font); opacity:0; pointer-events:none;
}
#dg-serit.ac{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
#dg-serit .dgs-ic{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
#dg-serit .dgs-e{
  font-style:normal; font-size:9px; letter-spacing:.22em; color:var(--t-ghost);
}
#dg-serit .dgs-ad{
  font-size:12.5px; letter-spacing:.06em; color:var(--t-hi); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#dg-serit .dgs-d{
  text-decoration:none; font-size:11px; color:var(--t-dim);
  font-variant-numeric:tabular-nums;
}
#dg-serit .dgs-ac{
  flex:0 0 auto; padding:8px 12px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--t-ghost);
  color:var(--t-mid); font-family:var(--font); font-size:10.5px;
  letter-spacing:.12em; white-space:nowrap;
}
#dg-serit .dgs-ac:hover{ border-color:var(--acc-lit); color:var(--t-hi); }
@media (prefers-reduced-motion: no-preference){
  #dg-serit{ transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1); }
  #dg-serit .dgs-ac:active{ transform:translateY(1px); }
}
@media (max-width: 420px){
  #dg-serit{ left:8px; right:8px; max-width:none; transform:translate(0, 20px); }
  #dg-serit.ac{ transform:translate(0, 0); }
}

/* ==========================================================================
   FAZ 3 · THE FRONT DOOR — a hero, a fitted screen, and one quiet row
   Measured on the live build at 829x419: the box stood 624px tall, so PLAY,
   CHANGE KIND and the bottom row all sat below the fold. Nothing is removed;
   the screen is re-proportioned so the two bars that matter are always on it.
   ========================================================================== */

/* ---- the hero mark ------------------------------------------------------
   80px of ring around a 42px drawing read as a favicon, not as the one object
   the screen is built around. The ring is gone — the medallion IS the object,
   drawn at its own size with the diorama showing through behind it. */
.overlay.title #ov-logo {
  width: clamp(96px, 17vh, 132px); height: clamp(96px, 17vh, 132px);
  border: 0; border-radius: 0; background: none;
  box-shadow: none; margin: 0 0 14px; display: block;
}
.overlay.title #ov-logo svg { width: 100%; height: 100%;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.75))
          drop-shadow(0 0 22px rgba(var(--door-rgb),.30)); }
/* the comb ring turns once every forty seconds — the slowest thing on screen,
   and the only reason to look at the mark twice */
@media (prefers-reduced-motion: no-preference) {
  .overlay.title #ov-logo svg .ca-kovanhalka {
    transform-box: fill-box; transform-origin: center;
    animation: ovHalka 40s linear infinite; }
}
@keyframes ovHalka { to { transform: rotate(360deg); } }

/* ---- the quiet row is three wide now ------------------------------------ */
.overlay.title .ov-altsira { grid-template-columns: 1fr 1fr 1fr; }
.overlay.title #ov-irk[data-rol="el"] {
  width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0;
  max-height: none; margin: 0; padding: 11px 4px 10px; border-radius: 10px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(var(--gold-rgb),.28);
  color: var(--w-olive); font-family: var(--font); text-align: center;
  letter-spacing: .04em; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.overlay.title #ov-irk[data-rol="el"] b { display: block; font-size: 11px;
  letter-spacing: .16em; font-weight: 600; }
/* the longest of the three labels: measured live it was the only one wrapping
   to two lines, which made the row read as uneven rather than as one row */
.overlay.title #ov-irk[data-rol="el"] b { font-size: 10px; letter-spacing: .07em; }
.overlay.title #ov-irk[data-rol="el"] i { display: block; font-style: normal;
  font-size: 9.5px; margin-top: 4px; letter-spacing: .06em; color: var(--w-moss); }
.overlay.title #ov-irk[data-rol="el"]:hover { border-color: rgba(var(--lit-rgb),.6);
  color: var(--w-gold); }

/* ---- a short screen keeps every control on it ---------------------------
   Phones held sideways and small laptop panes are the measured case. The
   ladder is: the mark shrinks first, then the spacing, then the ledger's own
   padding — the two bars never shrink, because they are the point. */
@media (max-height: 720px) {
  .overlay.title .ov-box { padding: 16px 20px; }
  .overlay.title #ov-logo { width: 78px; height: 78px; margin-bottom: 8px; }
  .overlay.title #ov-title, .overlay.title #ov-title.good {
    font-size: 20px; letter-spacing: 6px; margin-bottom: 6px; }
  .overlay.title #ov-sub { margin-bottom: 12px; font-size: 11px; letter-spacing: 3px; }
  .overlay.title .ov-doors { margin-top: 12px; gap: 9px; }
  .overlay.title .df-gov { padding: 10px 14px 11px; }
  .overlay.title .df-bas { padding: 9px 14px 8px; }
  .overlay.title .df-cipler { margin-top: 9px; }
}
@media (max-height: 560px) {
  .overlay.title #ov-logo { width: 58px; height: 58px; margin-bottom: 6px; }
  .overlay.title .df-muhur { width: 26px; height: 26px; }
  .overlay.title .ov-altsira > button i,
  .overlay.title #ov-irk[data-rol="el"] i { display: none; }
}

/* ---- wide and short: the screen becomes two columns ---------------------
   A landscape phone has the width the portrait one does not. The mark, the
   name and the hand move to their own column and stop spending vertical room
   the ledger needs, which is what actually puts PLAY back above the fold. */
@media (min-width: 680px) and (max-height: 620px) {
  .overlay.title .ov-box {
    display: grid; max-width: 860px; width: 100%;
    grid-template-columns: minmax(200px, .8fr) minmax(320px, 1.1fr);
    grid-template-areas: "mark doors" "sub doors";
    align-content: center; align-items: center; column-gap: 30px; row-gap: 0;
    text-align: left;
  }
  .overlay.title .ov-box > #ov-logo { grid-area: mark; justify-self: center;
    align-self: end; width: 104px; height: 104px; margin: 0 0 10px; }
  .overlay.title .ov-box > #ov-title { grid-area: sub; align-self: start;
    text-align: center; font-size: 22px; margin: 0 0 6px; }
  .overlay.title .ov-box > #ov-sub { display: none; }
  .overlay.title .ov-box > .ov-doors { grid-area: doors; margin-top: 0; }
  /* the title needs its own row under the mark; the grid gives the mark row
     the height it asks for and the name row the rest */
  .overlay.title .ov-box { grid-template-rows: auto auto; }
}

/* ---- and the box lets the diorama through where it can ------------------ */
@media (max-height: 720px) {
  .overlay.title .ov-story { max-height: min(180px, 26vh); padding: 14px 16px; }
}

/* ==== YENI BIR KAPI ACILDI (Faz 2 · rehber seridi) =========================
   The three inductions used to take the whole screen and wait. Same words,
   same destinations, one line. It shares the reckoning strip's shape on
   purpose: a strip along the bottom always means "something happened, and you
   may look at it", and the game should only teach that once. */
/* two strips can stand at once — the reckoning takes the floor, the guide
   stacks above it rather than landing on top of it */
@media (prefers-reduced-motion: no-preference){
  #rh-serit{ transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1); }
  #rh-serit button:active{ transform:translateY(1px); }
}
@media (max-width: 520px){
  #rh-serit{ left:8px; right:8px; max-width:none; transform:translate(0, 22px);
    flex-direction:column; align-items:stretch; gap:10px; padding:12px; }
  #rh-serit.ac{ transform:translate(0, 0); }
  #rh-serit .rhs-tus{ display:grid; grid-template-columns:auto 1fr; }
  #rh-serit .rhs-git{ text-align:center; }
}

/* ==== AYARLAR UC OBEK (Faz 3) =============================================
   Same rows, three named groups. The heading is the quietest type on the
   panel; the last group's frame is the only warm one, because it is the only
   group whose contents cannot be taken back. */
#hdr-drawer .drw-baslik{
  margin:14px 0 7px; font-family:var(--font); font-size:9px;
  letter-spacing:.24em; color:var(--t-ghost); font-weight:400;
}
#hdr-drawer .drw-baslik:first-of-type{ margin-top:2px; }
#hdr-drawer .drw-grup{ display:flex; flex-wrap:wrap; gap:8px; }
#hdr-drawer .drw-grup.drw-tehlike{
  border:1px solid rgba(194,90,65,.28); border-radius:10px;
  padding:9px; background:rgba(194,90,65,.05);
}
#hdr-drawer .drw-tehlike .h-btn{ border-color:rgba(194,90,65,.5); color:#b3604a; }
#hdr-drawer .drw-tehlike .h-btn:hover{ border-color:#c25a41; color:#d8785f; }

/* ==== MUHUR JESTI (Faz 4) ==================================================
   A line travels the foot of the armed plate while it is held down, and the
   plate lifts a little when the seal is fully lowered. It costs the card no
   height: the element is absolute, so the owner's ruling against per-option
   chips still holds. Tap-tap is untouched — this is the same decision made
   with a longer gesture. */
#dc-options .dc-opt{ position:relative;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* the ARMED plate owns the finger: without this, the browser reads a held
   press as the start of a scroll, fires pointercancel at the first pixel of
   drift, and the hold dies silently on every phone. Only the armed plate —
   the first tap (arming) must never steal the page's scroll. */
#dc-options .dc-opt.armed{ touch-action:none; }
/* THE FLOOD, NOT A LINE (redesign, 2026-09-01). The old fill was a 2px line
   at the plate's FOOT — which is exactly where a thumb sits, so on a phone the
   player holding the plate physically could not see the one thing drawn for
   them ("dolan bar çıkmıyor"). The fill is the whole plate now: a full-height
   wash of the hand's colour sweeping left to right with a bright leading
   edge. There is no finger large enough to hide it. */
#dc-options .dc-opt .dc-tut{
  position:absolute; left:0; top:0; bottom:0; width:100%; display:block;
  background:linear-gradient(90deg, rgba(var(--lit-rgb),.10), rgba(var(--lit-rgb),.30));
  border-right:3px solid var(--acc-lit);
  transform:scaleX(0); transform-origin:left center;
  opacity:0; pointer-events:none; z-index:0; border-radius:inherit;
}
#dc-options .dc-opt.tut-iniyor .dc-tut{ opacity:1; transform:scaleX(1); }
#dc-options .dc-opt.tut-dolu .dc-tut{ opacity:1; transform:scaleX(1);
  background:linear-gradient(90deg, rgba(var(--lit-rgb),.18), rgba(var(--lit-rgb),.38));
  border-right-color:transparent; }
/* the words ride above the flood */
#dc-options .dc-opt .dc-label, #dc-options .dc-opt .dc-cent-wrap{ position:relative; z-index:1; }
@media (prefers-reduced-motion: no-preference){
  /* ---- DUZ DOLSUN (sahibi, 2026-09-08: "sondaki yavaslamasi cok asiri,
     daha dengeli duzgun ve kisa sursun") ------------------------------------
     Onceki egri (.12,.72,.3,1) ONE YUKLUYDU. Olculdu -- presin
       %15'inde %56 · %25'inde %73 · YARISINDA %92 · %75'inde %99
     yani cubuk yarida bitiyor ve kalan %8 basmanin ikinci yarisini yiyordu.
     Ekranda bu "dolan bar" gibi degil "takilmis bar" gibi okunuyor, ve
     sahibinin sikayeti tam olarak buydu.
     Yeni egri (.35,.35,.6,1) olculdu:
       %15'inde %17 · %25'inde %31 · YARISINDA %66 · %75'inde %91
     yani dolgu zamanla birlikte ilerliyor, sonda yalnizca hafifce yumusuyor.
     Sure de 1000ms -> 700ms: ayni jest, daha kisa.
     --tut-sure'yi main.js kendi zamanlayicisiyla ayni sabitten yaziyor. */
  #dc-options .dc-opt.tut-iniyor .dc-tut{
    transition:transform var(--tut-sure,700ms) cubic-bezier(.35,.35,.6,1), opacity .09s ease; }
}
/* a tap on an armed plate no longer seals; it says so */
#dc-options .dc-opt.tut-ogret{ animation:dcOgret .9s ease-out 1; }
#dc-options .dc-opt.tut-ogret::after{ color:var(--acc-lit); }
@keyframes dcOgret{
  0%,100%{ box-shadow:0 2px 10px rgba(0,0,0,.4); }
  18%{ box-shadow:0 2px 10px rgba(0,0,0,.4), 0 0 0 2px rgba(var(--lit-rgb),.55); }
  46%{ box-shadow:0 2px 10px rgba(0,0,0,.4); }
  64%{ box-shadow:0 2px 10px rgba(0,0,0,.4), 0 0 0 2px rgba(var(--lit-rgb),.55); } }
@media (prefers-reduced-motion: reduce){ #dc-options .dc-opt.tut-ogret{ animation:none; } }
@media (prefers-reduced-motion: reduce){
  /* the gesture still works; the flood arrives without travelling */
  #dc-options .dc-opt.tut-iniyor .dc-tut{ transform:scaleX(1); opacity:.6; }
}

/* ==== ANLATIM: HIKAYE (Faz 5) ==============================================
   NÖBET is the game as authored. HİKÂYE folds a long card to its first lines
   and puts the rest one tap away — nothing is deleted, and the fold resets on
   every new card. The inline min-height the typewriter reserves has to go in
   this mode, or a folded card would still hold the full card's empty room. */
body.metin-kisa #dc-text{
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden; min-height:0 !important;
}
body.metin-kisa #dc-text.acik{
  display:block; -webkit-line-clamp:none; overflow:visible;
}
.dc-devam{
  display:block; margin:7px 0 0; padding:5px 9px; border-radius:7px;
  background:transparent; border:1px solid var(--t-ghost); color:var(--t-mid);
  font-family:var(--font); font-size:10px; letter-spacing:.14em; cursor:pointer;
}
.dc-devam:hover{ border-color:var(--acc-lit); color:var(--t-hi); }
.dc-devam.hidden{ display:none; }
body:not(.metin-kisa) .dc-devam{ display:none; }

/* ==== CAPRAZ NOBET (Faz 5) =================================================
   The other hand offered as a mode rather than as a back arrow. It is the one
   thing on the title screen that is neither the watch you are in nor a
   setting, so it gets its own frame — a hairline in the OTHER hand's colour
   would need a second palette on the page, so it borrows the accent at low
   weight and earns its attention from position, not loudness. */
.overlay.title .ov-capraz{
  width:100%; display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:4px 12px; margin:0; padding:11px 14px; border-radius:10px; cursor:pointer;
  background:linear-gradient(rgba(255,255,255,.028), rgba(0,0,0,.22));
  border:1px solid var(--t-edge); border-left:2px solid var(--acc-lit);
  text-align:left; font-family:var(--font);
  transition:border-color .25s ease, background .25s ease;
}
.overlay.title .ov-capraz.hidden{ display:none; }
.overlay.title .ov-capraz:hover{ border-color:var(--acc-lit);
  background:linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.2)); }
.overlay.title .ov-capraz .cp-e{ grid-column:1; font-style:normal; font-size:9px;
  letter-spacing:.24em; color:var(--t-ghost); }
.overlay.title .ov-capraz .cp-b{ grid-column:1; font-size:12.5px;
  letter-spacing:.14em; color:var(--t-hi); font-weight:600; }
.overlay.title .ov-capraz .cp-n{ grid-column:1; text-decoration:none;
  font-size:10.5px; line-height:1.45; color:var(--t-dim); }
.overlay.title .ov-capraz .cp-ok{ grid-column:2; grid-row:1 / span 3;
  font-size:15px; color:var(--acc-lit); }
@media (max-height: 560px){
  .overlay.title .ov-capraz .cp-n{ display:none; }
  .overlay.title .ov-capraz{ padding:9px 13px; }
}

/* ==== SERIT KARTIN SIKLARINI ORTMEZ ========================================
   Measured live at 419px tall: the guide strip's band (331-401) covered all
   three option plates (263-391), so a player aiming at an option would have
   hit the strip instead. Two independent guards, because one of them depends
   on :has() and a dead tap is not an acceptable failure mode:

   1. The strip's own body passes taps through; only its buttons take them.
      This alone keeps every option reachable even where :has() is not
      supported — the strip is text, and text does not need to be tapped.
   2. Where :has() works, the card also makes room while a strip is standing,
      so nothing is covered at all. It moves BEFORE the strip fades in and
      returns after it leaves, and the transition is slow enough to be read as
      the card stepping back rather than as the screen twitching. */
body:has(#rh-serit.ac) #dc-options,
body:has(#dg-serit.ac) #dc-options{ margin-bottom:94px; }
@media (min-height: 760px){
  /* a tall screen never had the collision; the card should not step back for
     a strip that was already clear of it */
  body:has(#rh-serit.ac) #dc-options,
  body:has(#dg-serit.ac) #dc-options{ margin-bottom:0; }
}
@media (prefers-reduced-motion: no-preference){
  #dc-options{ transition:margin-bottom .3s cubic-bezier(.2,.9,.3,1); }
}

/* ==== SERITLER YUKARI TASINDI (sahibi, 2026-09-01) =========================
   "butonların üstüne biniyor, karışıyor hep." Both strips sat along the bottom,
   which is exactly where every screen in this game keeps the thing you press:
   the card's option plates, the map's ADVANCE bar, the palace's buy row. A
   notification has no business living in the same band as the controls.

   They move under the console strip instead — --deck-top is the strip's own
   measured bottom edge, kept current by syncDeckTop() — where the only thing
   below them is the card's artwork. Covering a picture for eight seconds costs
   the player nothing; covering a button costs them the tap. The two stack in a
   fixed order when both are up, so neither can land on the other. */
/* the reckoning takes the first row; the guide sits under it */
/* the card no longer has to step back for them — nothing is covered now */
body:has(#rh-serit.ac) #dc-options,
body:has(#dg-serit.ac) #dc-options{ margin-bottom:0; }

@media (max-width: 520px){
  #rh-serit, #dg-serit{ left:8px; right:8px; max-width:none; transform:translate(0, -14px); }
  #rh-serit.ac, #dg-serit.ac{ transform:translate(0, 0); }
  body:has(#dg-serit.ac) #rh-serit{ top:calc(var(--deck-top, 56px) + 10px + 96px); }
}

/* ==== HARITA: ILERLE TUSU HER ZAMAN EKRANDA ================================
   "bu alanda buton hep ekranın dışında altta kalıyor ve basabilmek için aşağı
   kaydırmam gerekiyor." The whole screen was one scroller, so the paper and
   the panel between them pushed the one control that matters off the bottom.
   The screen is now three bands: the paper and the panel scroll BETWEEN the
   console and the bar, and the bar itself never moves. The paper is also
   capped, so the panel starts on screen instead of below it. */
#sefer{ overflow:hidden; }
#sefer .sf-masa{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#sefer .sf-ilerle{ flex:0 0 auto; position:relative; z-index:5;
  background:linear-gradient(rgba(6,7,9,0), rgba(6,7,9,.92) 38%); }
#sefer .sf-anahtar{ flex:0 0 auto; }
/* the paper keeps its aspect and simply stops growing */
#sefer .sf-kagit svg{ max-height:min(46svh, 380px); }
/* and the entry underneath it gives up its outer padding first */
#sefer .sf-panel{ padding:14px 15px; }
#sefer .sf-panel h3{ font-size:16px; }
#sefer .sf-panel .sf-tanim{ font-size:12px; line-height:1.5; }
@media (max-height: 720px){
  #sefer .sf-kagit svg{ max-height:38svh; }
  #sefer .sf-masa{ gap:8px; padding:8px; }
  #sefer .sf-panel{ padding:11px 13px; }
}
/* a meeting waiting is a mark on the bar, not a clause in it */
.sf-ilerle-btn .sf-il-var{
  display:inline-block; margin-left:9px; font-size:9px; vertical-align:middle;
  color:var(--acc-lit, currentColor); text-decoration:none;
}

/* ==== FAZ 7 · IS BASKALASIYOR ==============================================
   Three act rules and two new tools. Everything here is ADDITIVE: the patience
   bar never seals for the player, the forbidden plate is marked and not
   disabled, and the tools sit above the options rather than inside them. */

/* ---- ACT II · the Weave's patience ---- */
.f7-sure{ position:relative; height:2px; margin:0 0 8px; border-radius:2px;
  background:rgba(var(--t-rgb),.14); overflow:visible; opacity:0; }
.f7-sure.ac{ opacity:1; }
.f7-sure .f7-dolu{ display:block; height:100%; width:100%; border-radius:2px;
  background:var(--acc-lit); transform-origin:left center; }
@media (prefers-reduced-motion: no-preference){
  .f7-sure.ac .f7-dolu{ animation:f7Sabir 30s linear forwards; }
}
@keyframes f7Sabir{ to{ transform:scaleX(0); } }
.f7-sure.bitti .f7-dolu{ background:#b3604a; transform:scaleX(1); opacity:.55; }
.f7-sure .f7-not{ display:block; position:absolute; left:0; top:6px;
  font-style:normal; font-size:9.5px; letter-spacing:.1em; color:#b3604a; }

/* ---- ACT III · the forbidden answer ---- */
#dc-options .dc-opt.f7-yasak{ border-color:rgba(179,96,74,.55); }
#dc-options .dc-opt.f7-yasak::after{
  content:attr(data-yasak); display:block; margin-top:6px;
  font-size:9px; letter-spacing:.16em; color:#b3604a;
}
#dc-options .dc-opt.f7-yasak.armed{ border-color:#c25a41; }

/* ---- ACT IV · the closed reckoning ---- */
#dg-serit .dgs-d.dgs-kor{ color:var(--t-ghost); font-style:italic; }

/* ---- the desk's new tools ---- */
.f7-alet{ display:flex; gap:8px; margin:0 0 9px; flex-wrap:wrap; }
.f7-alet .f7-a{
  flex:1 1 130px; min-width:0; display:grid; grid-template-columns:auto 1fr;
  grid-template-rows:auto auto; gap:0 8px; align-items:center; text-align:left;
  padding:8px 11px; border-radius:9px; cursor:pointer;
  background:rgba(0,0,0,.26); border:1px solid var(--t-edge);
  color:var(--t-mid); font-family:var(--font);
  transition:border-color .22s ease, color .22s ease;
}
.f7-alet .f7-a s{ grid-row:1 / span 2; text-decoration:none; font-size:16px;
  color:var(--acc-lit); }
.f7-alet .f7-a b{ font-size:10px; letter-spacing:.16em; color:var(--t-hi); font-weight:600; }
.f7-alet .f7-a i{ font-style:normal; font-size:9px; letter-spacing:.04em; color:var(--t-ghost); }
.f7-alet .f7-a:hover:not([disabled]){ border-color:var(--acc-lit); color:var(--t-hi); }
.f7-alet .f7-a[disabled]{ opacity:.42; cursor:default; }
.f7-alet .f7-a.bekliyor s{ color:var(--t-ghost); }
.f7-onsezi{ display:block; margin-top:7px; text-decoration:none;
  font-size:10.5px; line-height:1.45; color:var(--acc-lit); font-style:italic; }
@media (max-width: 420px){
  .f7-alet .f7-a{ flex:1 1 100%; }
}

/* ==== FAZ 8 · GOSTERGE KENDINI OGRETIR =====================================
   No tour, no paragraph. The first time a reading moves in a run it lights for
   two and a half seconds, and one log line names it. After that it never
   explains itself again. */
#cmd-vitals .vt-ogret{
  filter:drop-shadow(0 0 10px rgba(var(--lit-rgb),.85)) brightness(1.35);
}
@media (prefers-reduced-motion: no-preference){
  #cmd-vitals .vt-ogret{ animation:vtOgret 1.3s ease-in-out 2; }
}
@keyframes vtOgret{ 50%{ filter:drop-shadow(0 0 16px rgba(var(--lit-rgb),1)) brightness(1.7); } }

/* ==== IMZA JESTI · NEFES + CAKMA (onaylanan tasarim, 2026-09-01) ============
   The demo page's timings, verbatim: 700ms descent, 900ms pulse, ~380ms
   strike. Everything is additive decoration over the existing hold — no rule
   here changes what a tap or a hold DOES. */

/* ---- the vignette: the room darkens toward the plate ---- */
#mj-perde{ position:fixed; inset:0; z-index:44; pointer-events:none; opacity:0;
  visibility:hidden;
  background:radial-gradient(115% 95% at 50% 60%, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%); }
body.mj-nefes #mj-perde{ opacity:1; visibility:visible; }

/* ---- the card recedes; only the held plate stays lit ---- */
body.mj-nefes #dc-scene, body.mj-nefes #dc-title, body.mj-nefes #dc-text,
body.mj-nefes #dc-ctx, body.mj-nefes #dc-hedef, body.mj-nefes #dc-meters,
body.mj-nefes #dc-legend, body.mj-nefes .f7-alet, body.mj-nefes .dc-note{ opacity:.3; }
body.mj-nefes #dc-options .dc-opt:not(.armed){ opacity:.22; }
/* whatever moves inside the scene art stops moving — the world is waiting */
body.mj-nefes #dc-scene *{ animation-play-state:paused !important; }

/* ---- the held plate brightens; the transform belongs to the press system */
#dc-options .dc-opt.tut-iniyor, #dc-options .dc-opt.tut-dolu{
  border-color:var(--acc-lit); }
/* NOTHING CHANGES COLOUR ANY MORE (owner, 2026-09-01: "renkler karışıyor,
   sonra geri sarıya dönüyor"). The first red pass painted the band and the
   flood tip and the whole plate red and back — a colour that arrives and
   leaves is noise. The hold stays entirely in the hand's colour; the ONE red
   thing in this design is the stamp that lands afterwards, below. */
#dc-options .dc-opt.tut-dolu{
  box-shadow:0 6px 26px rgba(0,0,0,.5), 0 0 26px rgba(var(--lit-rgb),.34); }

/* ---- the strike: the plate ITSELF is the stamp ----------------------------
   The old strike was a 72px hairline ring over the plate's own text — read
   live as "çok belirsiz". The plate now takes the ink: for ~150ms it inverts
   to the hand's colour with dark lettering, the ring lands big and glowing on
   top, and the whole box kicks 4px. Nobody misses a plate turning to gold. */
/* THE STAMP THAT STAYS. One glowing wax-red impression pressed onto the
   plate — slightly rotated the way no machine and every hand stamps — and it
   REMAINS until the card leaves, because a seal that evaporates is not a
   seal. Under it, two or three threads of ink run and dry. */
.mj-muhur{ position:absolute; right:10px; top:50%; width:64px; height:64px;
  margin-top:-32px; border:4px solid var(--t-red); border-radius:50%;
  pointer-events:none; display:grid; place-items:center;
  font-size:26px; line-height:1; color:var(--t-red); text-decoration:none;
  transform:rotate(-7deg); opacity:.92; z-index:2;
  box-shadow:0 0 16px rgba(230,57,0,.55), inset 0 0 10px rgba(230,57,0,.35);
  filter:drop-shadow(0 0 10px rgba(230,57,0,.7));
  background:radial-gradient(circle at 50% 42%, rgba(230,57,0,.18), rgba(230,57,0,.04) 70%); }
.mj-muhur::before{ content:''; position:absolute; inset:6px;
  border:1px dashed rgba(230,57,0,.55); border-radius:50%; }
/* the ink that ran: thin threads under the stamp, drying as they stop */
.mj-damla{ position:absolute; top:82%; width:2px; height:0;
  background:linear-gradient(180deg, var(--t-red), rgba(230,57,0,0));
  border-radius:0 0 2px 2px; pointer-events:none; opacity:.85; }
/* the shockwave the lift throws off, from under the stamp */
.mj-halka{ position:absolute; right:42px; top:50%; width:64px; height:64px;
  margin-top:-32px; border:2px solid var(--t-red); border-radius:50%;
  pointer-events:none; opacity:0; z-index:2;
  animation:mjHalka .62s cubic-bezier(.15,.8,.3,1) 1 forwards; }
@keyframes mjHalka{ 0%{ transform:scale(.35); opacity:.85; }
  100%{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .mj-halka{ display:none; } }
.mj-flas{ position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:rgba(230,57,0,.22); opacity:0; z-index:1; }
.mj-toz{ position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--t-red); pointer-events:none; opacity:0; z-index:3; }

@media (prefers-reduced-motion: no-preference){
  #mj-perde{ transition:opacity .45s ease; }
  body.mj-nefes #dc-scene, body.mj-nefes #dc-title, body.mj-nefes #dc-text,
  body.mj-nefes #dc-ctx, body.mj-nefes #dc-hedef, body.mj-nefes #dc-meters,
  body.mj-nefes #dc-legend, body.mj-nefes .f7-alet, body.mj-nefes .dc-note,
  body.mj-nefes #dc-options .dc-opt:not(.armed){ transition:opacity .4s ease; }
  /* the pulse was a box-shadow keyframe — a large blur repainted every frame.
     brightness composites on the GPU and reads the same. */
  #dc-options .dc-opt.tut-dolu{ animation:mjDoluNabiz 1.8s ease-in-out infinite; }
  .mj-muhur{ animation:mjBasil .34s cubic-bezier(.2,1.5,.4,1) 1; }
  .mj-damla{ animation:mjAk .8s ease-out forwards; animation-delay:var(--gec,.1s); }
  .mj-flas{ animation:mjFlas .3s ease-out 1 forwards; }
  .mj-toz{ animation:mjToz .7s ease-out forwards; }
  /* THE RELEASE IS THE WHOLE ACT (owner, 2026-09-05: "mühür bırakışını
     ağırlaştır"). The seal is now the only way a decree is sealed, so the
     moment the finger lifts is the one moment of authority in the game. The
     box drops further, longer, and settles instead of snapping back. */
  .dc-box.mj-sars{ animation:mjSarsAgir .46s cubic-bezier(.2,.9,.3,1) 1; }
}
@media (prefers-reduced-motion: reduce){
  /* the stamp still lands — it simply arrives without travelling */
  .mj-damla{ height:var(--boy,12px); opacity:.6; }
}
@keyframes mjDoluNabiz{ 50%{ filter:brightness(1.22); } }
@keyframes mjBasil{ 0%{opacity:0; transform:rotate(-14deg) scale(2.1)}
  55%{opacity:1; transform:rotate(-6deg) scale(.95)} 100%{opacity:.92; transform:rotate(-7deg) scale(1)} }
@keyframes mjAk{ 0%{height:0; opacity:.9} 100%{height:var(--boy,14px); opacity:.65} }
@keyframes mjFlas{ 0%{opacity:1} 100%{opacity:0} }
@keyframes mjToz{ 0%{opacity:.9; transform:none} 100%{opacity:0; transform:translate(var(--dx), var(--dy))} }
@keyframes mjSarsAgir{
  0%{ transform:translateY(0); }
  16%{ transform:translateY(9px) scale(.992); }
  38%{ transform:translateY(-3px) scale(1.003); }
  62%{ transform:translateY(3px); }
  100%{ transform:translateY(0) scale(1); } }
@keyframes mjSars{ 0%{transform:none} 35%{transform:translateY(4px)} 100%{transform:none} }

/* ==== HAFIF MOD (telefon, otomatik: pointer coarse) =========================
   The phone pays for paint a desktop never notices. Nothing mechanical is
   gated here — only paint. The big one is first: an feGaussianBlur in the
   scene art forces a full filter repaint whenever anything inside it
   animates, and every card scene carries blurred far planes by design
   (docs/GRAFIK.md). A CSS `filter` beats the SVG presentation attribute, so
   `none` simply switches the far planes to their sharp form on phones. */
body.hafif #dc-scene [filter]{ filter:none !important; }
body.hafif #dc-scene svg *{ animation:none !important; }
/* ...except the eyes. Measured on 775: the blanket rule above also killed the
   blink lids and the gaze drift — on the one device the owner actually plays.
   Both are sub-second transforms on a few tiny paths inside a scene whose
   filters are already off; they are the two micro-acts that make a figure a
   person, so they alone buy their frames back. */
body.hafif #dc-scene svg .ca-blink{ animation:caBl 8s 4s ease-in-out infinite !important; }
body.hafif #dc-art.balonlu svg .ca-blink{ animation-duration:5.5s !important; }
body.hafif #dc-scene svg .ca-gaze{ animation:caGz 12s 3s ease-in-out infinite !important; }
body.hafif #dc-art.balonlu svg .ca-gaze{ animation:none !important; }
/* ambient loops behind the card cost frames the choice screen needs */
body.hafif .ov-fon svg *{ animation:none !important; }
/* the press dust is decoration the thumb never sees under itself */
body.hafif .mh-toz, body.hafif .mj-toz{ display:none; }
/* entry slides on plates: born in place instead */
body.hafif #dc-options .dc-opt{ animation:none !important; }
/* the breath dims instantly — four transitioning surfaces at once is a
   style-recalc storm on a phone, and the drama survives without the fade */
body.hafif #mj-perde,
body.hafif #dc-scene, body.hafif #dc-title, body.hafif #dc-text,
body.hafif #dc-ctx, body.hafif #dc-hedef, body.hafif #dc-meters,
body.hafif #dc-legend, body.hafif .f7-alet, body.hafif .dc-note,
body.hafif #dc-options .dc-opt{ transition:none !important; }

/* ==== IKON KAPI (sahibi, 2026-09-01: "olabildigince ikon bazli") ============
   The pickers speak in marks now. The race door: two big sigil tiles, a name
   and an arrow — the sentence, the verbs, the home/ending pairs all lived on
   this screen and are gone; the prologue says them where they get read. */
#factionsel .gm-box > .fs-sub{ display:none; }
#fs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#fs-grid .fs-card{ display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:20px 10px 14px; text-align:center; border-left-width:1px;
  border-top:3px solid var(--k); }
#fs-grid .fs-sigil{ position:static; width:104px; height:104px; opacity:1;
  pointer-events:none; }
#fs-grid .fs-sigil svg{ width:104px; height:104px; }
#fs-grid .fs-mark, #fs-grid .fs-durum, #fs-grid .fs-lore,
#fs-grid .fs-alt .fs-kv{ display:none; }
#fs-grid .fs-head{ display:block; }
#fs-grid .fs-name{ font-size:13px; letter-spacing:.18em; }
#fs-grid .fs-alt{ display:block; }
#fs-grid .fs-git{ display:inline-block; font-size:0; color:var(--k); }
#fs-grid .fs-git s{ font-size:20px; text-decoration:none; }
#fs-grid .fs-kayit{ font-size:9px; letter-spacing:.08em; opacity:.75; }
@media (max-width:560px){
  #fs-grid .fs-sigil, #fs-grid .fs-sigil svg{ width:84px; height:84px; }
}
/* muhurlu raf: yalniz isaretler */
#fs-muhur .fm-k i{ font-size:8.5px; letter-spacing:.1em; }

/* ---- on kapinin sessiz sirasi: uc ikon karosu ---- */
.overlay.title .ov-altsira{ grid-template-columns:repeat(3, 72px);
  justify-content:center; gap:14px; }
.overlay.title .ov-altsira > button,
.overlay.title #ov-irk[data-rol="el"]{
  width:72px; height:64px; padding:8px 4px 6px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.overlay.title .ov-isvg{ width:22px; height:22px; display:block; }
.overlay.title .ov-kap{ font-size:8px; letter-spacing:.16em; }
.overlay.title #ov-reset[data-rol="yenile"]{ width:72px; height:64px; padding:8px 4px 6px; }

/* ---- muhur tepkisi: portre darbeyi alir ---- */
@media (prefers-reduced-motion: no-preference){
  #dc-scene.mj-tepki{ animation:mjTepki .42s cubic-bezier(.2,1.3,.4,1) 1; }
}
@keyframes mjTepki{ 0%{transform:none} 30%{transform:translateY(3px) rotate(.4deg)} 100%{transform:none} }

/* ==== IRK KAPISI CILASI (sahibi, 2026-09-02: "asiri sade, yazilar kucuk") ====
   The boot picker was a flat black sheet with 9px labels. It is a hall now:
   a starfield with the two hands' colours washing up from below, a glass
   plate over it, and tiles that carry their seal large, their name at title
   size, and a ringed arrow — the same icon-first language as the front door. */
#factionsel.fs-kapi{
  background:
    radial-gradient(90% 46% at 50% -8%, rgba(242,224,157,.075), transparent 62%),
    radial-gradient(55% 38% at 14% 110%, rgba(222,182,242,.10), transparent 70%),
    radial-gradient(55% 38% at 86% 110%, rgba(242,224,157,.07), transparent 70%),
    #07060a;
}
#factionsel.fs-kapi::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(242,224,157,.12) 0 1px, transparent 1.6px);
  background-size: 210px 210px, 340px 340px;
  background-position: 30px 40px, 130px 90px; }
#factionsel.fs-kapi .gm-box{ position:relative; background:rgba(10,8,6,.74);
  backdrop-filter:blur(4px); width:min(600px, 94%); }
#factionsel .gm-box > h2{ font-size:21px; letter-spacing:.4em; padding-left:.4em;
  margin-bottom:14px; }

/* ---- the two dealt plates ---- */
#fs-grid .fs-card{ gap:10px; padding:24px 12px 16px;
  border-color: rgba(255,255,255,.14);
  background: #0b0a07;
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 11%, #0b0a07), #0b0a07 58%); }
#fs-grid .fs-sigil{ width:116px; height:116px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
#fs-grid .fs-sigil{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.6))
  drop-shadow(0 0 22px color-mix(in srgb, var(--k) 36%, transparent)); }
#fs-grid .fs-sigil svg{ width:116px; height:116px; }
#fs-grid .fs-name{ font-size:18px; letter-spacing:.26em; padding-left:.26em; }
#fs-grid .fs-git s{ display:inline-grid; place-items:center; width:36px; height:36px;
  margin-top:2px; border:1px solid var(--k); border-radius:50%; font-size:15px;
  opacity:.85; }
#fs-grid .fs-kayit{ font-size:11px; letter-spacing:.13em; margin-top:10px;
  padding-top:9px; }
@media (hover:hover){
  #fs-grid .fs-card:hover{ transform:translateY(-3px);
    border-color: rgba(255,255,255,.25);
    border-color: color-mix(in srgb, var(--k) 55%, transparent);
    box-shadow: 0 10px 30px rgba(0,0,0,.55); }
}

/* ---- the sealed rack, readable ---- */
#fs-muhur .fm-bas{ font-size:11px; letter-spacing:.24em; }
#fs-muhur .fm-izgara{ gap:10px; }
#fs-muhur .fm-m, #fs-muhur .fm-m svg{ width:34px; height:34px; }
#fs-muhur .fm-k i{ font-size:10px; letter-spacing:.1em; }
@media (max-width:560px){
  #fs-grid .fs-sigil, #fs-grid .fs-sigil svg{ width:104px; height:104px; }
}

/* MUHURLU KANALLAR, 375px (olculdu, 777): dort kolonluk raf tasiyordu —
   INSANLIK ekranin disinda kaldi. Iki kolon, muhur ve isim yan yana. */
@media (max-width:560px){
  #fs-muhur .fm-izgara{ grid-template-columns:repeat(2, 1fr); }
  #fs-muhur .fm-k{ aspect-ratio:auto; flex-direction:row; gap:9px;
    justify-content:flex-start; padding:9px 12px; }
}

/* ==== SECICI TEK EKRANA SIGAR (sahibi, 2026-09-02: "asagi kaydirmama
   gerek kalmasin"). The stacked phone layout was ~950px of content on a
   ~760px screen. The seal now scales with the viewport's HEIGHT (13dvh,
   capped at the old 104px), every band gives back the padding it hoarded,
   and a sub-700px tier compresses once more. The desktop two-column layout
   never overflowed and is left exactly as designed. */
#factionsel.fs-kapi .gm-box{ max-height:100vh; max-height:100dvh; overflow-y:auto; }
@media (max-width:779px){
  #factionsel.fs-kapi .gm-box{ padding:14px 18px 12px; }
  #factionsel .gm-box > h2{ font-size:20px; margin-bottom:8px; }
  #factionsel #fs-grid{ gap:9px; }
  #fs-grid .fs-card{ padding:13px 12px 11px; gap:7px; }
  #fs-grid .fs-sigil, #fs-grid .fs-sigil svg{
    width:clamp(62px, 13vh, 104px); height:clamp(62px, 13vh, 104px); }
  #fs-grid .fs-sigil, #fs-grid .fs-sigil svg{
    width:clamp(62px, 13dvh, 104px); height:clamp(62px, 13dvh, 104px); }
  #fs-grid .fs-git s{ width:30px; height:30px; font-size:13px; margin-top:0; }
  #fs-grid .fs-kayit{ margin-top:6px; padding-top:6px; }
  #fs-muhur{ margin-top:10px; }
  #fs-muhur .fm-bas{ margin-bottom:6px; }
  #fs-muhur .fm-izgara{ gap:8px; }
  #fs-muhur .fm-k{ padding:7px 11px; }
  #fs-muhur .fm-m, #fs-muhur .fm-m svg{ width:28px; height:28px; }
  #fs-dil{ margin-top:10px; padding:9px 12px; }
}
@media (max-width:779px) and (max-height:700px){
  #fs-grid .fs-name{ font-size:15px; }
  #fs-grid .fs-card{ padding:9px 10px 8px; gap:5px; }
  #fs-grid .fs-git s{ width:26px; height:26px; font-size:12px; }
  #fs-muhur .fm-k{ padding:5px 10px; }
  #fs-muhur .fm-k i{ font-size:9px; }
  #fs-muhur .fm-m, #fs-muhur .fm-m svg{ width:23px; height:23px; }
}

/* ==== KART PORTREDE DE TEK EKRANA SIGAR (sahibi, 2026-09-02: "butun oyun
   hep tek ekrana sigacak sekilde yapilansin"). Measured at 382x768: the box
   ran 72..786 with the last plate clipped at the fold — the card was drawn
   for 812+ and shorter phones paid the difference in scroll. Same deal as
   the landscape tier above: the scene gives back height first (it is the
   only elastic block), then the type gives back its air. The box keeps its
   88% + inner-scroll as the last-resort safety for a genuinely long card. */
@media (max-height: 800px) and (orientation: portrait) {
  #dc-scene .ca { max-height: 26vh; }
  #dc-title { font-size: 20px; margin: 6px 0 6px; }
  #dc-text { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
  #dc-options { gap: 6px; }
  .dc-opt { padding: 8px 12px; }
  .dc-hint { font-size: 12px; }
  .dc-box { padding: 16px 18px; }
}
@media (max-height: 690px) and (orientation: portrait) {
  #dc-scene .ca { max-height: 21vh; }
  #dc-title { font-size: 18px; }
  #dc-text { font-size: 13px; }
  .dc-opt { padding: 7px 11px; }
  .dc-hint { font-size: 11.5px; }
}

/* ==== MUHUR MINI SERIDI + KAPI PARLAMASI (sahibi, 2026-09-03) ==============
   The PROTOKOL ONAYLANDI modal is retired; the seal announces itself as a
   strip and the commander door glows until pressed. */
#qs-mini{ position:fixed; left:50%; top:calc(var(--deck-top,54px) + 8px);
  transform:translate(-50%,-14px); opacity:0; z-index:940;
  display:flex; align-items:center; gap:10px; max-width:min(92vw,480px);
  padding:8px 14px; background:rgba(14,12,7,.94); cursor:pointer;
  border:1px solid var(--gold-dim); border-left:3px solid var(--gold);
  font-family:var(--font); transition:opacity .25s, transform .25s; }
#qs-mini.ac{ opacity:1; transform:translate(-50%,0); }
#qs-mini b{ color:var(--gold); font-size:12px; letter-spacing:.14em; white-space:nowrap; }
#qs-mini span{ color:var(--ink); font-size:12px; letter-spacing:.06em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes yolParla{ 0%,100%{ box-shadow:0 2px 0 #2b2317, 0 0 0 rgba(var(--lit-rgb),0); }
  50%{ box-shadow:0 2px 0 #2b2317, 0 0 16px rgba(var(--lit-rgb),.85); } }
#cmd-vitals .vt-face.yol-parla{ animation:yolParla 1.1s ease-in-out infinite;
  border-color:var(--gold) !important; color:var(--gold); }

/* the one-time balance flash — the record entered, the mark says so */
@keyframes vtParla{ 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 10px rgba(var(--lit-rgb),.95)); } }
#cmd-vitals .vt.vt-parla .vt-ic{ animation:vtParla .9s ease-in-out 3; }

/* ==== YOL SAHNEYI SAHIPLENIR (sahibi, 2026-09-03) ===========================
   While the ride runs, the dossier and the advance bar step off: the walking
   dot is the scene. */
#sefer.yolda #sf-panel, #sefer.yolda #sf-ilerle{ display:none !important; }

/* ==== YOL ROZETI (sahibi, 2026-09-03: serit cikti, sayi komutan kapisina) ====
   The unsealed-step count rides the commander door the way the globe wears
   its own count; it disappears the moment the road is walked out. */
#cmd-vitals .vt-face{ position:relative; }
/* CONTAINER-BLIND (owner, 2026-09-04, with screenshot: the palace door's
   badge rendered as a bare strikethrough glued to the glyph — the rule below
   was scoped to .vt-face only, so the door's copy got no styling at all and
   its inline flow shoved the header). One selector, every host: the commander
   door, the palace door, and the profile sheet's road tab. */
.vt-yol-rozet{ position:absolute; top:-5px; right:-5px;
  min-width:15px; height:15px; padding:0 3px; border-radius:8px;
  display:grid; place-items:center; text-decoration:none;
  background:var(--gold); color:#14100a; font-family:var(--font);
  font-size:9.5px; font-weight:700; line-height:1;
  border:1px solid rgba(0,0,0,.55); pointer-events:none; }
#profile-sheet .pr-tab{ position:relative; }
#profile-sheet .pr-tab .vt-yol-rozet{ top:-6px; right:2px; }

/* rehber rozetleri saray kapisinda yasar; kapi da parlamayi bilir */
#cmd-vitals .vt-door{ position:relative; }
#cmd-vitals .vt-door.yol-parla{ animation:yolParla 1.1s ease-in-out infinite;
  border-color:var(--gold) !important; color:var(--gold); }

/* ==== HARITA EKRANA SIGAR (sahibi, 2026-09-04: 'haritayi daralt') ==========
   Portrait: the paper takes a fixed share of the viewport so the dossier and
   the ride bar always fit below it — the pan/zoom camera already owns what
   the crop hides. */
@media (orientation: portrait){
  #sefer .sf-kagit{ max-height:40dvh; }
  #sefer .sf-kagit svg{ height:40dvh; width:auto; min-width:100%; }
}

/* ---- SARAY SEKME ROZETLERI (sahibi, 2026-09-04: "burada da hangi yer
   isteniyorsa badge orada ciksin") — kapidaki altin rozet iceride istenen
   sekmenin omzuna oturur; ayni aile, ayni sinif. */
#palace-sheet .pal-tabs{ overflow:visible; }
#palace-sheet .pal-tab{ position:relative; }
#palace-sheet .pal-tab .vt-yol-rozet{ top:-6px; right:-4px; }

/* ---- DOVUS PLAKASI: HER TERIM SAYI (sahibi, 2026-09-04: "iki tarafin da
   enerjisi kac ... slay the spire matematigini tamamen uygula") — iki cephede
   simdi/azami sayaci, komutanin kendi vurus rozeti altin giyer. */
#rite .ct-sayi i{ font-style:normal; font-size:11px; font-weight:600;
  color:#9b8f74; letter-spacing:.02em; }
#rite .ct-sen .ct-niyet{ color:#e8c96a; border-color:rgba(232,201,106,.55); }

/* ---- KURE KALKTI, SEKIZ IKON ESIT (sahibi, 2026-09-04: "harita ikonuna
   gerek kalmadi, ilerle ile gidebiliyoruz... ust tarafta sadece 8 tane ayni
   buyuklukte ama o alani dolduran ikonlar olsun"). Ortadaki sefer kuresi ve
   gezici kopyasi gorunmez; iki plaka seridi yari yari bolusur, dort gosterge
   ve dort kapi ayni boyda esit araliklarla alani doldurur. */
body.mapless #cmd-vitals .vt-mid { display: none !important; }
/* the orb's own dress says `.vt-door.vt-globe{display:flex!important}` —
   two classes. A one-class closer LOSES that fight on specificity whatever
   its position (measured live, v805: computed display stayed flex). The
   closer wears every selector the dress wears, one line later. */
.vt-door.vt-globe, .vt-globe-free, body > .vt-globe,
body.mapless #cmd-vitals .vt-door.vt-globe,
body.mapless #cmd-vitals .vt-mid .vt-door.vt-globe { display: none !important; }
body.mapless #cmd-vitals { gap: 10px !important; }
body.mapless #cmd-vitals .vt-group { flex: 1 1 0 !important; display: flex !important;
  justify-content: space-evenly !important; align-items: center !important;
  gap: 0 !important; min-width: 0; }
body.mapless #cmd-vitals .vt-doors { flex: 1 1 0 !important; margin-left: 0 !important;
  display: flex !important; justify-content: space-evenly !important;
  align-items: center !important; gap: 0 !important; min-width: 0; }
body.mapless #cmd-vitals .vt .vt-ic,
body.mapless #cmd-vitals .vt .vt-ic > svg,
body.mapless #cmd-vitals .vt .vt-fill > svg { width: 38px !important; height: 38px !important; }
body.mapless #cmd-vitals .vt-doors .vt-door,
body.mapless #cmd-vitals .vt-doors .vt-face { width: 44px !important; height: 44px !important;
  margin-bottom: 0 !important; }
#cmd-vitals .vt-door svg, .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-door svg, body.mapless #cmd-vitals .vt-face svg {
  width: 38px !important; height: 38px !important; }

/* ---- DAHA BUYUK IKON + ROZET ONE (sahibi, 2026-09-04: "badge arkada kalmis
   ayrica ikonlari buyut"). Boy ekrana gore olcek alir: dar telefonda sigar,
   genis ekranda 48'e kadar buyur. Rozetler plakalarin ustune cikar; hicbir
   plaka tasani kirpamaz. */
body.mapless #cmd-vitals .vt .vt-ic,
body.mapless #cmd-vitals .vt .vt-ic > svg,
body.mapless #cmd-vitals .vt .vt-fill > svg {
  width: min(11vw, 48px) !important; height: min(11vw, 48px) !important; }
body.mapless #cmd-vitals .vt-doors .vt-door,
body.mapless #cmd-vitals .vt-doors .vt-face {
  width: min(12vw, 52px) !important; height: min(12vw, 52px) !important; }
#cmd-vitals .vt-door svg, .vt-doors .vt-door svg,
body.mapless #cmd-vitals .vt-door svg, body.mapless #cmd-vitals .vt-face svg {
  width: min(11vw, 48px) !important; height: min(11vw, 48px) !important; }
body.mapless #cmd-vitals,
body.mapless #cmd-vitals .vt-group,
body.mapless #cmd-vitals .vt-doors { overflow: visible !important; }
#cmd-vitals .vt-yol-rozet, #cmd-vitals .vt-rehber-rozet,
#cmd-vitals .vt-door .vt-yol-rozet, #cmd-vitals .vt-face .vt-yol-rozet {
  z-index: 7 !important; top: -4px; right: -3px; }

/* ---- TEK OLCU, TAM DEMIR (sahibi, 2026-09-04: "badge hala yanlis yerde,
   ikonlari biraz daha buyuk"). Iki kusurun koku olculdu: kapilar eski
   `:not(.vt-globe)` kurallarina ozgullukle yenilip 33px kaliyordu; rozet ise
   komutan dugmesi konumsuz kalinca plakanin kosesine demirliyordu. Tek --ikon
   olcusu her sekiz kutuya ayni boyu verir, dugmeler konumludur, rozet kendi
   ikonunun omzuna doner. */
body.mapless #cmd-vitals { padding: 8px 8px 7px 8px !important; gap: 6px !important;
  --ikon: min(10.4vw, 50px); }
body.mapless #cmd-vitals .vt .vt-ic,
body.mapless #cmd-vitals .vt .vt-ic > svg,
body.mapless #cmd-vitals .vt .vt-fill > svg,
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe) svg,
body.mapless #cmd-vitals .vt-doors .vt-face svg,
body.mapless #cmd-vitals .vt-door:not(.vt-globe) svg,
body.mapless #cmd-vitals .vt-face svg {
  width: var(--ikon) !important; height: var(--ikon) !important; }
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe),
body.mapless #cmd-vitals .vt-doors .vt-face {
  width: calc(var(--ikon) + 6px) !important; height: calc(var(--ikon) + 6px) !important;
  position: relative !important; }
#cmd-vitals .vt-door, #cmd-vitals .vt-face { position: relative !important; }

/* ---- SOLUN 14px ZINCIRI KIRILDI (olculdu, v808 canli: sol .vt-ic 14x14,
   sag kapilar 45 — cunku 5833'teki CIFT-ID kural (#cmd-vitals #vt-group)
   tek-ID katmanlarin hepsini ozgullukle eziyordu). Kapatici ayni cift-ID
   silahi tasir; plaka dolgusu incelir, buton ikona yaklasir ki buyume
   tasmadan sigsin. */
body.mapless #cmd-vitals { --ikon: min(11.5vw, 52px); }
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: calc(var(--ikon) + 14px) !important; padding: 0 4px !important; }
body.mapless #cmd-vitals #vt-group .vt { width: auto !important; }
body.mapless #cmd-vitals #vt-group .vt .vt-ic,
body.mapless #cmd-vitals #vt-group .vt .vt-ic svg,
body.mapless #cmd-vitals #vt-group .vt .vt-ic > svg {
  width: var(--ikon) !important; height: var(--ikon) !important;
  max-width: none !important; max-height: none !important; overflow: visible; }
body.mapless #cmd-vitals .vt-doors .vt-door:not(.vt-globe),
body.mapless #cmd-vitals .vt-doors .vt-face {
  width: calc(var(--ikon) + 2px) !important; height: calc(var(--ikon) + 2px) !important; }

/* ---- TAVAN KALIBRASYONU (olculdu, v809: sol 43'e cikti ama 375'te plakaya
   sigmiyor ve cift-ID overflow:hidden kirpiyor). Serit ve plaka dolgulari
   incelir, --ikon plaka matematiginin tavanina oturur, kirpma her katmanda
   acilir — sekiz ikon esit, tasma yok. */
body.mapless #cmd-vitals { --ikon: min(10.6vw, 46px);
  padding: 7px 4px 6px 4px !important; gap: 5px !important; }
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  padding: 0 3px !important; overflow: visible !important;
  justify-content: space-evenly !important; }
body.mapless #cmd-vitals #vt-group { gap: min(7px, 1.7vw) !important; }

/* ---- CUBUK IKONUN ALTINDA, PLAKANIN ICINDE (sahibi, 2026-09-04: "barlar
   arkada kalmis asiri buyumus"). 46 tavani geri cekildi (40); .vt kolonu
   plaka icine sabitlendi ki dolum cubugu ikonun hemen altinda, serit icinde
   dursun — disari sarkamaz, ikon da ortmez. */
body.mapless #cmd-vitals { --ikon: min(9.5vw, 40px); }
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: calc(var(--ikon) + 16px) !important; }
body.mapless #cmd-vitals #vt-group .vt {
  height: calc(var(--ikon) + 10px) !important;
  padding-bottom: 7px !important; justify-content: flex-start; }

/* ---- YANKI NEFES ALIR (sahibi, 2026-09-04: "kart sonrasi animasyonlar da
   hala calismiyor"). Olculdu: 1486 muhur yankisinin 1445'i (%97) icinde tek
   animasyon olmayan STATIK cizimdi — yanki aciliyordu ama kipirdamayan bir
   tabloydu. Her yankiya icerikten bagimsiz iki hareket: yavas Ken Burns
   nefesi ve bir isik supurmesi. Azaltilmis harekette ikisi de susar. */
#dc-scene.on > svg, .dc-scene.on > svg {
  animation: echoKen 3s cubic-bezier(.2,.6,.25,1) both;
  transform-origin: 50% 42%; }
@keyframes echoKen {
  0% { transform: scale(1.07) translateY(5px); filter: brightness(1.3) saturate(1.1); }
  18% { filter: brightness(1) saturate(1); }
  100% { transform: scale(1) translateY(0); } }
#dc-scene.on::after, .dc-scene.on::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255,244,214,.16) 47%, transparent 62%);
  transform: translateX(-130%); animation: echoTara 1.15s ease-out .12s both; }
@keyframes echoTara { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  #dc-scene.on > svg, .dc-scene.on > svg, #dc-scene.on::after, .dc-scene.on::after { animation: none; } }

/* ---- BIR BOY KUCUK, CUBUGA YER (sahibi, 2026-09-04: "barlar hala arkada
   kaliyor daha da kucult"). Ikon 32'ye iner; gosterge kolonunda cubuk icin
   acik 12px'lik bant birakilir ki dolum cizgisi her ekranda ikonun altinda
   GORUNUR dursun. */
body.mapless #cmd-vitals { --ikon: min(8vw, 32px); }
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: calc(var(--ikon) + 18px) !important; }
body.mapless #cmd-vitals #vt-group .vt {
  height: calc(var(--ikon) + 12px) !important; padding-bottom: 8px !important; }

/* ---- CUBUK DIBE, IKON HAFIF ASAGI (sahibi, 2026-09-04) ---- */
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: calc(var(--ikon) + 22px) !important; }
body.mapless #cmd-vitals #vt-group .vt {
  height: calc(var(--ikon) + 18px) !important;
  padding-top: 4px !important; padding-bottom: 5px !important; }

/* ---- CUBUK IKONUN HEMEN ALTINDA (2026-09-04, canli sayfada enjekte edilip
   FOTOGRAFLA dogrulandi — plaka dibine yapisik soluk cizgi yerine ikonun
   4px altinda, 4px kalin, belirgin ray). */
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: calc(var(--ikon) + 16px) !important; }
body.mapless #cmd-vitals #vt-group .vt {
  height: calc(var(--ikon) + 12px) !important; padding: 4px 0 0 0 !important; }
body.mapless #cmd-vitals #vt-group .vt::after,
body.mapless #cmd-vitals #vt-group .vt::before {
  top: calc(var(--ikon) + 8px) !important; bottom: auto !important; height: 4px !important; }
body.mapless #cmd-vitals #vt-group .vt::after { background: rgba(232,201,106,.34) !important; }

/* ---- CUBUK EN ALTA (sahibi, 2026-09-04: "daha da altta olmasi gerek") —
   panelde enjekte edilip FOTOGRAFLANDI: cubuk plaka dibinde, ikondan ayrik. */
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: calc(var(--ikon) + 24px) !important; }
body.mapless #cmd-vitals #vt-group .vt {
  height: calc(var(--ikon) + 20px) !important; padding: 4px 0 0 0 !important; }
body.mapless #cmd-vitals #vt-group .vt::after,
body.mapless #cmd-vitals #vt-group .vt::before {
  top: calc(var(--ikon) + 15px) !important; }

/* ---- CUBUK ARTIK AKISIN KENDISINDE (2026-09-04, panel fotografiyla
   dogrulandi). Mutlak konum her ekran genisliginde kayiyordu; ray artik
   .vt kolonunun akista duran son ogesi: ikon, 7px nefes, 4px ray. Hicbir
   viewport'ta kayamaz. Dolum (::before) ayni banda absolute biner. */
body.mapless #cmd-vitals #vt-group, body.mapless #cmd-vitals .vt-doors {
  height: auto !important; padding: 5px 3px !important; }
body.mapless #cmd-vitals #vt-group .vt { display: flex !important;
  flex-direction: column !important; align-items: center !important;
  height: auto !important; padding: 2px 0 0 0 !important; gap: 0 !important; }
body.mapless #cmd-vitals #vt-group .vt::after { content: '' !important;
  position: static !important; display: block !important; width: 100% !important;
  height: 4px !important; margin-top: 7px !important;
  background: rgba(232,201,106,.34) !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
body.mapless #cmd-vitals #vt-group .vt::before { position: absolute !important;
  left: 0 !important; right: auto !important; bottom: 0 !important; top: auto !important;
  height: 4px !important; z-index: 2 !important; }

/* ---- YESIL BANTLARIN KIMLIGI COZULDU VE KALKTI (sahibi secti, 2026-09-04:
   "tamamen kalksin"). Dort karedir kovalanan "yesil cubuklar" ne ray ne
   harita: seridin dibindeki eski #cmd-kaburga elemani (11 haki segment)
   cikti — canli envanterle tespit, fotografla dogrulandi. Kaburga kapanir;
   altin ray da kalkar; ikon altinda yalniz renkli dolum cubugu kalir. */
#cmd-kaburga { display: none !important; }
body.mapless #cmd-vitals #vt-group .vt::after { display: none !important; content: none !important; }
body.mapless #cmd-vitals #vt-group .vt { padding: 2px 0 6px 0 !important; }

/* ==== KAPI RESKINI — GEMINI CAM PANELI (sahibi, 2026-09-04: "bu sayfanin
   tasarimi gemini html dosyasindaki gibi olsun"). Iskelet ayni kaldi; bu
   katman kapiyi cam panel diline giydirir: blur zemin, yuvarlak koseler,
   altin degrade birincil dugme, kirmizi muhur noktasi, rozetli cip sirasi,
   uc ikonlu eylem cubugu. ==== */
#overlay.title .ov-box{ width:min(380px,92vw) !important; max-height:92dvh;
  overflow-y:auto; background:rgba(25,25,30,.65) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1) !important; border-radius:16px !important;
  padding:26px 20px !important; box-shadow:0 25px 50px rgba(0,0,0,.5) !important;
  display:flex; flex-direction:column; gap:20px; align-items:stretch; }
#overlay.title #ov-logo{ width:80px; height:80px; border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
  display:flex; align-items:center; justify-content:center; margin:0 auto 2px;
  box-shadow:0 0 20px rgba(230,200,117,.12); overflow:hidden; }
#overlay.title #ov-logo svg{ width:56px; height:56px; }
#overlay.title #ov-title{ font-size:30px !important; letter-spacing:6px !important;
  text-align:center; margin:0 !important; color:#fff !important; }
#overlay.title #ov-sub{ font-size:13px !important; letter-spacing:3px !important;
  color:#a0a0a0 !important; text-align:center; text-transform:uppercase;
  margin:0 !important; }
#overlay.title .ov-defter{ background:rgba(15,15,18,.85) !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:12px !important;
  overflow:hidden; padding:0 !important; }
#overlay.title .df-bas{ display:flex; justify-content:space-between; align-items:center;
  padding:12px 15px !important; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:12px !important; letter-spacing:2px !important; color:#a0a0a0 !important; }
#overlay.title .df-muhur{ width:24px; height:24px; border-radius:50%;
  background:#a33b3b !important; border:none !important;
  box-shadow:0 0 10px rgba(163,59,59,.5);
  display:flex; align-items:center; justify-content:center; }
#overlay.title .df-muhur::before{ content:'\2726'; color:#fff; font-size:11px; line-height:1; }
#overlay.title .df-gov{ padding:14px 15px 16px !important; }
#overlay.title .df-ad{ font-size:21px !important; letter-spacing:2px !important;
  color:#fff !important; margin:0 0 4px !important; }
#overlay.title .df-yil{ font-size:12px !important; color:#a0a0a0 !important;
  margin:0 0 14px !important; }
#overlay.title .df-cipler{ display:flex !important; gap:8px !important; margin:0 0 16px !important; }
#overlay.title .df-cip{ flex:1; display:flex; align-items:center; justify-content:center;
  gap:6px; background:rgba(0,0,0,.4) !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:6px !important;
  padding:7px 6px !important; font-size:11px !important; font-weight:600;
  color:#e6e6e6 !important; white-space:nowrap; }
#overlay.title .df-cip:nth-child(1) b{ color:#d94c4c; }
#overlay.title .df-cip:nth-child(2) b{ color:#e6c875; }
#overlay.title .df-cip:nth-child(3) b{ color:#5bc0be; }
#overlay.title #ov-resume{ width:calc(100% - 30px) !important; margin:0 15px 15px !important;
  padding:13px !important; border:none !important; border-radius:8px !important;
  background:linear-gradient(135deg,#e6c875 0%,#c59b3d 100%) !important;
  color:#1a1a1a !important; font-weight:700 !important; letter-spacing:2px !important;
  font-size:15px !important; box-shadow:0 4px 15px rgba(197,155,61,.3) !important;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s ease, box-shadow .2s ease; }
#overlay.title #ov-resume:hover{ transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(197,155,61,.5) !important; }
#overlay.title #ov-resume .obp-ic{ position:static !important; transform:none !important; }
#overlay.title #ov-reseed{ padding:13px !important; border-radius:8px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important; color:#fff !important;
  letter-spacing:2px !important; font-size:15px !important; font-weight:700 !important;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:none !important; }
#overlay.title #ov-reseed:hover{ background:rgba(255,255,255,.1) !important; }
#overlay.title #ov-reseed .ob-i{ width:14px; height:14px; fill:#fff; }
#overlay.title .ov-altsira{ display:flex !important; gap:10px !important; margin:0 !important; }
#overlay.title .ov-altsira button{ flex:1; background:transparent !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:8px !important;
  padding:11px 0 9px !important; color:#a0a0a0 !important;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:10px !important; letter-spacing:1px !important; font-weight:600;
  box-shadow:none !important; transition:all .2s ease; }
#overlay.title .ov-altsira button:hover{ background:rgba(255,255,255,.05) !important;
  color:#fff !important; border-color:rgba(255,255,255,.3) !important; }
#overlay.title #ov-reset:hover{ color:#d94c4c !important; border-color:#d94c4c !important; }
#overlay.title .ov-altsira .ov-isvg{ width:17px; height:17px; }
#overlay.title .ov-doorcap{ display:none !important; }
#overlay.title .ov-story{ font-size:12px; line-height:1.6; color:#b9b1a0; }

/* ---- YANKI PLAKASI (2026-09-03): mühür kapanışında çağ sahnesi ----------
   "çok hafif animasyon": meşale vinyeti nefes alır, plaka 22 saniyede
   belli belirsiz yaklaşır, yalnız ateş sahnesinin alevleri titrer. Hepsi
   bu üç sınıftır; reduced-motion hepsini söndürür. */
#dc-scene .yk-plate .yk-nefes { animation: ykNefes 22s ease-in-out infinite; }
#dc-scene .yk-plate .yk-mesale { animation: ykMesale 9s ease-in-out infinite; }
#dc-scene .yk-plate .yk-alev { animation: ykAlev 2.4s ease-in-out infinite; }
@keyframes ykNefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes ykMesale { 0%, 100% { opacity: 1; } 42% { opacity: .84; } 68% { opacity: .94; } }
@keyframes ykAlev { 0%, 100% { opacity: .95; } 35% { opacity: .72; } 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #dc-scene .yk-plate .yk-nefes,
  #dc-scene .yk-plate .yk-mesale,
  #dc-scene .yk-plate .yk-alev { animation: none; }
}

/* ---- YANKI FOTO PLAKASI (2026-09-03) ------------------------------------
   Bir mührün gerçek görseli varsa çizim yerine o basılıyor. Aynı yuvaya
   oturur, aynı nefesi alır; 8:3 dışındaki bir kaynak gelirse ortadan
   kırpılır ki kutu hiç bozulmasın. */
/* Plaka acikken sahne kutusu resme gore daralir. Kutu normalde
   30dvh'ye sabit (kart resmi onu doldurdugu icin sorun degil); 8:3 plaka
   daha kisa oldugu icin altinda siyah bir bant kaliyordu (sahibin ekrani,
   2026-09-03: "resmin altindaki o siyah bosluk ne"). Sinifi main.js plakayi
   basarken koyar, kartin kendi yeniden cizimi kaldirir. */
/* MUHURSUZ ANDA daralt: kart hala canliyken plaka kutunun tamamini
   doldurmasin. Muhurlu anda ise oyunun kendi tasarimi devreye girer --
   sahne bosalan zemini alir (.dc-box.muhurlu .dc-scene.on { flex:1 1 auto })
   ve plaka o zeminde ORTALANIR; 8:3 resim uzun bir telefon zeminini
   kirpilmadan dolduramaz, o yuzden bosluk alta yigilmak yerine ustte ve
   altta esit paylasilir (sahibin ekrani, 2026-09-03). */
.dc-box:not(.muhurlu) #dc-scene.yk-acik:has(.yk-plate),
body.mapless .dc-box:not(.muhurlu) .dc-scene.on.yk-acik:has(.yk-plate) {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}
#dc-scene.yk-acik > #dc-art:has(.yk-plate),
.dc-box.muhurlu #dc-scene.yk-acik > #dc-art:has(.yk-plate) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}
/* Plaka zemini kaplar, ORANINI KORUYARAK. Olculdu (375x812, gercek kart
   icerigi, muhurlu an): zemin 375x481, yani 0.78 -- dikey. Bu yuzden yeni
   plakalar 4:5 uretiliyor ve buraya neredeyse tam oturuyor. contain oldugu
   icin eski 8:3 plakalar da bozulmadan, ortalanmis olarak gorunmeye devam
   eder; ikisi tek kuralla dogru davranir. */
#dc-scene.yk-acik .yk-plate {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: auto !important;
}

/* ==== İKİNCİ MÜHÜR SLAYTI (main.js ikinciHukumHtml) =======================
   A full-screen beat two decrees in. Built to work with or without its
   painting: the <img> removes itself if the file is not there and the words
   keep the plain cinematic ground, so the slide ships before the art does. */
.ik-slayt { position: fixed; inset: 0; display: block; }
.ik-foto { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%; z-index: 0; }
.ik-yazi { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  text-align: left; padding: 60px 26px calc(30px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(4,3,2,0) 0%, rgba(4,3,2,.66) 24%,
              rgba(4,3,2,.93) 56%, rgba(4,3,2,.985) 100%); }
/* with no picture the words take the middle of the screen instead of its foot */
.ik-slayt.ik-fotosuz .ik-yazi { top: 50%; bottom: auto; transform: translateY(-50%);
  background: none; padding: 0 26px; }
.ik-ust { display: block; font-style: normal; font-size: 10.5px;
  letter-spacing: .32em; color: var(--t-hi); margin-bottom: 14px; }
.ik-yazi p { margin: 0 0 13px; font-size: 15px; line-height: 1.66;
  color: var(--t-mid); max-width: 34em; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.ik-yazi p.ik-vurgu { color: var(--t-hi); font-size: 16px; }
.ik-cik { display: block; margin-top: 20px; text-decoration: none;
  font-size: 10px; letter-spacing: .26em; color: var(--t-hi); opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .ik-yazi p { animation: ikGel .6s ease-out both; }
  .ik-yazi p:nth-child(2) { animation-delay: .1s; }
  .ik-yazi p:nth-child(3) { animation-delay: .2s; }
  .ik-yazi p:nth-child(4) { animation-delay: .3s; }
  .ik-yazi p:nth-child(5) { animation-delay: .4s; }
  .ik-cik { animation: ikYanip 2s ease-in-out infinite; }
}
@keyframes ikGel { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes ikYanip { 0%,100% { opacity: .45; } 50% { opacity: .95; } }
/* the slide owns the whole cinematic, not a centred card in it */
#cine.ik-mod .cine-inner { position: static; text-align: left; }
/* ---- BLACK GROUND, TERMINAL TYPE (owner, 2026-09-06) ---------------------
   The cinematic paints a gold ray sweep behind whatever it is given, and on a
   screen that is four paragraphs of text that sweep is noise the reader has to
   look past. `.ik-mod` is set by the slide itself once it is in the DOM: flat
   black, no rays, and the words struck out one glyph at a time. */
#cine.ik-mod { background: #000 !important; }
#cine.ik-mod::before, #cine.ik-mod::after { display: none !important; }
#cine.ik-mod .ik-yazi p {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-size: 14px; line-height: 1.78; letter-spacing: .012em;
  min-height: 1.78em;                    /* the line keeps its room while empty */
  text-shadow: none; }
#cine.ik-mod .ik-ust, #cine.ik-mod .ik-cik {
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace; }
/* A TERMINAL FILLS DOWNWARD. Vertically centring the block means every new
   line pushes the ones already written UP the screen — the reader's eye is
   dragged off the sentence it is on. In terminal mode the text is pinned near
   the top and grows into the space below it, the way the thing it is imitating
   does. (With a picture the block stays bottom-anchored: there it grows up
   into the image, which is the same idea from the other end.) */
#cine.ik-mod .ik-slayt.ik-fotosuz .ik-yazi {
  top: 16%; bottom: auto; transform: none; }
/* the block cursor rides the line being written */
.ik-yazi p.ik-imlec::after {
  content: '_'; margin-left: 2px; color: var(--t-hi); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .ik-yazi p.ik-imlec::after { animation: ikImlec .9s steps(1) infinite; }
  /* the words are struck, not faded in — the entry animation would fight it */
  #cine.ik-mod .ik-yazi p { animation: none !important; }
}
@keyframes ikImlec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* the way out appears only once there is something to leave */
.ik-cik.ik-gizli { visibility: hidden; }

/* ==== MÜHÜRLÜ AN TAM EKRANDIR (owner, 2026-09-06) ==========================
   "hüküm sonrası çıkan resimler tam ekran olsun, şıklar aşağı insin ve hüküm
   sonrası resmi tam olarak görebileyim."

   MEASURED BEFORE, 375x812: box 758 tall, scene 439 of it, the 560x718 plate
   contained into 375x438 and therefore drawn at 342x438 — 54% of the screen,
   black down both sides — with the title, the body and the option rack taking
   the 320px underneath. The picture was the smallest thing on a screen whose
   only remaining job was the picture.

   Sealed, the card becomes the plate: the scene fills the box, the words that
   have already been read step away, and the answered option rides at the very
   bottom over a scrim instead of holding a row of its own. Nothing about the
   LIVE card changes — every rule here is behind .muhurlu. */
.dc-box.muhurlu { position: relative; }
/* the picture takes the whole box */
.dc-box.muhurlu .dc-scene.on {
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
/* the words have been read; they stop taking room from the picture */
.dc-box.muhurlu #dc-title, .dc-box.muhurlu #dc-text,
.dc-box.muhurlu #dc-ctx, .dc-box.muhurlu #dc-hedef,
.dc-box.muhurlu #dc-meters, .dc-box.muhurlu #dc-legend,
.dc-box.muhurlu .dc-note, .dc-box.muhurlu .f7-alet { display: none !important; }
/* the ground: the plate again, blurred past the edges, so a 4:5 picture on a
   tall phone sits in its own light rather than in black bars */
/* ---- PROSEDUREL YANKININ KENDI ZEMINI (b1016) ----------------------------
   Fotograf plakasinin `.yk-arka`si ile ayni fikir, tek farki kaynagin bir
   <img> degil bir <svg> olmasi: bulanik ve buyutulmus kopya kutuyu doldurur,
   net kopya kendi oraninda ustte durur. Boylece ne kirpma olur ne bosluk --
   ve kutu tam kanama tasariminda kalir. */
#dc-art .ce-arka {
  position: absolute; inset: -12%; z-index: 0; display: block;
  filter: blur(30px) saturate(1.25) brightness(.55); pointer-events: none;
  opacity: .9;
}
#dc-art .ce-arka > svg {
  width: 100% !important; height: 100% !important;
  preserveAspectRatio: none;
}
#dc-art .ce-on {
  position: relative; z-index: 1; display: block;
  width: 100%; margin: auto 0;
}
#dc-art:has(.ce-on) {
  display: flex !important; align-items: center !important;
  position: relative; overflow: hidden;
}
#dc-art .ce-on > svg { width: 100% !important; height: auto !important; display: block; }
/* CIZILMIS PLAKA DA AYNI SARMALA GIRER (b1019). Ic svg `yk-plate` sinifini
   tasiyor ve `#dc-scene.yk-acik .yk-plate` kurali ona height:100% dayatiyor
   -- o kural (1,2,0) ozgullugunde, asagidaki (1,2,1) ile yenilir. object-fit
   zaten satir ici bir <svg>'yi ilgilendirmiyor; oran viewBox'tan gelmeli. */
#dc-art .ce-on > svg.yk-plate,
#dc-scene.yk-acik #dc-art .ce-on > svg.yk-plate {
  width: 100% !important; height: auto !important;
  max-height: none !important; object-fit: initial !important;
}
#dc-art .ce-arka > svg.yk-plate { width: 100% !important; height: 100% !important; }

.yk-arka { position: absolute; inset: -10%; z-index: 0; display: block;
  background-size: cover; background-position: center;
  filter: blur(32px) saturate(1.3) brightness(.6); pointer-events: none; }
/* the sealed answer drops to the foot of the screen and stops being a rack */
.dc-box.muhurlu #dc-options {
  position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 3;
  margin: 0 !important; padding: 46px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, rgba(4,3,2,0), rgba(4,3,2,.72) 40%, rgba(4,3,2,.94)); }
/* only the answer stays; the roads not taken have nothing left to say */
.dc-box.muhurlu #dc-options .dc-opt:not(.sealed) { display: none !important; }

/* ---- A PHOTOGRAPHED PLATE MUST OBEY THE SAME FIT AS A DRAWN ONE -------------
   Owner, 2026-09-04: "muhur sonrasi cikan resimlerde boyutlanma bozulmalari
   var telefonda, resmin bazi yerleri cikmiyor bir turlu". MEASURED in the real
   class chain on the live build: this block used to set height:auto and
   max-height:none, and it BEAT the `.yk-plate { height:100%; object-fit:
   contain }` rule above on specificity (1 id + 2 classes + 2 types against 1 id
   + 2 classes). So the photograph ignored its box entirely and rendered at its
   own aspect off a width of 100%:
     - the 66 portrait plates (560x718) became 375x481 with NO max-height, so on
       any phone whose sealed scene is shorter than 481px the top and bottom of
       the picture were simply cut off -- the "parts that never show";
     - the 10 wide plates (640x240) became 375x141 adrift in a 758px scene.
   The width/height/fit now match the drawn rule exactly, so both shapes fit
   inside whatever the box turns out to be and neither is ever cropped. Only the
   breathing (ykNefes) is this rule's own. */
#dc-scene img.yk-foto,
body.mapless #dc-scene img.yk-foto {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  animation: ykNefes 22s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #dc-scene img.yk-foto { animation: none; }
}

/* ---- RESIM YUKARI YAPISSIN (sahibi, 2026-09-06) ----------------------------
   "resim yukari yapissin, asagida zaten secilen sik var asagida ne kadar alan
   kazanirsak o kadar iyi."

   OLCULDU, 375x812, gercek muhurlu an: kutu 54..812 (ustteki 54px #cmd-vitals),
   plaka kutusu 375x757, resim 560x718 yani 0.78 -- contain ile 375x481 ciziliyor.
   Genislik zaten tam, dolayisiyla resim BUYUYEMEZ; tek mesele nereye oturdugu.
   `object-position: 50% 50%` ile 481'lik resim 757'lik kutunun ortasinda duruyor
   ve ustte 138px, altta 138px bos zemin kaliyor -- sahibin ekranindaki o ust bant
   iste bu 138px. Resmi kutunun tepesine yapistirinca ust bant sifirlaniyor ve
   iki bandin toplami (276px) alta, secilen sikkin bulundugu yere yiginiyor.
   ykNefes olcegi merkezden buyudugu icin tepeye yapisan resmi her nefeste ~8px
   kirpardi; transform-origin da tepeye aliniyor, boylece nefes asagi dogru alinir. */
/* ---- VE SONRA ORTALANDI (sahibi, 2026-09-06, ikinci ekran) ---------------
   "bu resmi yükseklik olarak boş kalan yere ortala, hem altında hem üstünde
   aynı oranda boşluk olsun."

   Tepeye yapistirmak ust bandi kaldirdi ama bu sefer resmin ALTINDA uzun bir
   zemin kaldi. Dogru olcek kutunun tamami degil, SERBEST alan: kart eksi
   cevabin kapladigi opak yukseklik. Plakanin kendi kutusu o kadar kisaltiliyor
   (--muhur-dip, main.js'te elemanin kendisinden olculuyor) ve `contain` resmi
   o kutunun icinde ortaliyor -- yani ustte ve altta ayni bosluk, resmin orani
   ne olursa olsun ve cevap kac satira sararsa sarsin.

   Bulanik zemin (.yk-arka) kisaltilmiyor: o hala tam kadraj, yoksa resmin
   altinda sert bir kenar olurdu. */
.dc-box.muhurlu #dc-scene .yk-plate,
.dc-box.muhurlu #dc-scene img.yk-foto {
  height: calc(100% - var(--muhur-dip, 112px)) !important;
  max-height: calc(100% - var(--muhur-dip, 112px)) !important;
  object-position: 50% 50% !important;
  transform-origin: 50% 50% !important;
  margin: 0 auto !important;
}
.dc-box.muhurlu #dc-scene.yk-acik > #dc-art:has(.yk-plate) {
  align-items: flex-start !important;
}
/* perde daha az yukari tirmansin: resmin altinda kazanilan alan siyaha degil
   sikka kalsin */
.dc-box.muhurlu #dc-options {
  padding-top: 26px !important;
}

/* ==== IRK KAPISI HAREKETI (sahibi, 2026-09-04: "A NABIZ + C YORUNGE olsun") ====
   Four alternatives were measured at 375x812 and the owner chose two, merged:
   the seal BREAKS THE PLATE'S TOP EDGE (C) so it can be 132px without eating
   height (A), breathes while it waits, its dashed ring turns, a satellite
   rides the ring, the Annunaki pupil drifts and the hive's cells light in
   turn. Pressing sinks the plate and turns the dial; releasing lets a shock
   ring out and locks the dial a quarter turn while the left rail floods the
   plate — main.js opens the door 380ms into that. The overlap pays for the
   size: the box bottom sits no lower than before. Reduced motion: no idle
   motion, press is instant. Selectors carry #factionsel.fs-kapi so they
   outrank the polish block above whatever the order. */
#factionsel.fs-kapi #fs-grid .fs-card{
  overflow:visible; clip-path:none;
  margin-top:60px; padding:74px 12px 12px; gap:6px;
  /* NO transform IN THE TRANSITION LIST. Measured live on 894: the plate's
     transform transition sat at currentTime 0, "running", for as long as the
     picker was open, and a transition outranks everything in the cascade —
     class, inline, !important, even WAAPI could not move the plate while it
     held. The seal (its own element, no transition) pressed fine. Without a
     transition on transform the sink applies the moment .basili lands. */
  transition:border-color .13s, box-shadow .13s;
}
#factionsel.fs-kapi #fs-grid .fs-card:first-child{ margin-top:50px; }
#factionsel.fs-kapi #fs-grid .fs-sigil{
  position:absolute; left:50%; top:-60px; width:132px; height:132px;
  margin-left:-66px; z-index:3; opacity:1;
  transform-origin:50% 50%;
}
#factionsel.fs-kapi #fs-grid .fs-sigil svg{ width:132px; height:132px; }
#factionsel.fs-kapi #fs-grid .fs-alt{ margin-top:0; padding-top:0; border-top:0; }
#factionsel.fs-kapi #fs-grid .fs-git s{ margin-top:0; }
#factionsel.fs-kapi #fs-grid .fs-kayit{ margin-top:2px; padding-top:8px; }

/* the three moving parts main.js puts on every dealt plate */
#factionsel.fs-kapi #fs-grid .fs-ray{ position:absolute; left:0; top:0; bottom:0; width:0;
  z-index:0; background:color-mix(in srgb, var(--k) 22%, transparent); pointer-events:none; }
#factionsel.fs-kapi #fs-grid .fs-uydu{ position:absolute; left:50%; top:-60px; width:132px; height:132px;
  margin-left:-66px; z-index:4; pointer-events:none; }
#factionsel.fs-kapi #fs-grid .fs-uydu::before{ content:''; position:absolute; left:50%; top:7px;
  width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--k);
  box-shadow:0 0 8px var(--k), 0 0 18px color-mix(in srgb, var(--k) 60%, transparent); }
#factionsel.fs-kapi #fs-grid .fs-sok{ position:absolute; left:50%; top:-60px; width:132px; height:132px;
  margin-left:-66px; border-radius:50%; border:2px solid var(--k); opacity:0; z-index:2; pointer-events:none; }

/* ---- idle ---- */
@media (prefers-reduced-motion: no-preference){
  #factionsel.fs-kapi #fs-grid .fs-sigil{ animation:ikNabiz 3.4s ease-in-out infinite; }
  #factionsel.fs-kapi #fs-grid .fs-card[data-f="insectoid"] .fs-sigil{ animation-delay:-1.7s; }
  #factionsel.fs-kapi #fs-grid .fs-sigil svg circle[stroke-dasharray]{ transform-origin:50px 50px; animation:ikDon 40s linear infinite; }
  #factionsel.fs-kapi #fs-grid .fs-uydu{ animation:ikDon 9s linear infinite; }
  #factionsel.fs-kapi #fs-grid .fs-card[data-f="insectoid"] .fs-uydu{ animation-duration:12s; animation-direction:reverse; }
  #factionsel.fs-kapi #fs-grid .fs-card[data-f="annunaki"] .fs-sigil svg circle[r="3.4"]{ animation:ikGoz 5.5s ease-in-out infinite; }
  #factionsel.fs-kapi #fs-grid .fs-card[data-f="insectoid"] .fs-sigil svg path[stroke-width="2"][opacity=".8"]{ animation:ikPetek 3.6s ease-in-out infinite; }
  #factionsel.fs-kapi #fs-grid .fs-card[data-f="insectoid"] .fs-sigil svg path[stroke-width="2"][opacity=".8"]:last-of-type{ animation-delay:-1.8s; }
  #factionsel.fs-kapi #fs-grid .fs-card[data-f="insectoid"] .fs-sigil svg path[fill-opacity]{ animation:ikPetek 3.6s ease-in-out -.9s infinite; }
}
@keyframes ikNabiz{
  0%,100%{ transform:scale(1);
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--k) 26%, transparent)); }
  50%{ transform:scale(1.035);
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 30px color-mix(in srgb, var(--k) 52%, transparent)); }
}
@keyframes ikDon{ to{ transform:rotate(360deg); } }
@keyframes ikGoz{ 0%,100%{ transform:translate(0,0); } 30%{ transform:translate(-1.6px,.4px); } 60%{ transform:translate(1.4px,-.3px); } }
@keyframes ikPetek{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---- pressed: the dial turns a few degrees; the PLATE is muhur.js's ----
   Measured on 895: a real press puts .mh-bas on the plate (muhur.js), and
   .fs-card.mh-bas above carries transform:translateY(4px) !important — the
   game's stamp language, "travel only: a scale resamples the label". The
   scale this rule used to set lost to it every time, so it is gone: the
   plate dips and springs (mhZip) exactly like every other button, and this
   rule only adds what is particular to the seal card. */
#factionsel.fs-kapi #fs-grid .fs-card.basili{
  border-color:color-mix(in srgb, var(--k) 55%, transparent); }
#factionsel.fs-kapi #fs-grid .fs-card.basili .fs-sigil{ animation:none;
  transition:transform .18s cubic-bezier(.3,1.2,.4,1); transform:rotate(-8deg) scale(.94);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)) drop-shadow(0 0 10px color-mix(in srgb, var(--k) 40%, transparent)); }
#factionsel.fs-kapi #fs-grid .fs-card.basili .fs-git s,
#factionsel.fs-kapi #fs-grid .fs-card.vur .fs-git s{ background:var(--k); color:#0b0a07; }

/* ---- released: shock ring, quarter-turn lock, rail flood ---- */
@media (prefers-reduced-motion: no-preference){
  #factionsel.fs-kapi #fs-grid .fs-card.vur .fs-sigil{ animation:ikKilit .55s cubic-bezier(.2,1.3,.35,1) forwards; }
  #factionsel.fs-kapi #fs-grid .fs-card.vur .fs-sok{ animation:ikSok .7s cubic-bezier(.2,.8,.2,1) forwards; }
  #factionsel.fs-kapi #fs-grid .fs-card.vur .fs-ray{ animation:ikRay .6s ease-out forwards; }
  #factionsel.fs-kapi #fs-grid .fs-card.vur .fs-name{ animation:ikAcil .55s ease-out; }
}
@keyframes ikKilit{ 0%{ transform:rotate(-8deg) scale(.94); } 60%{ transform:rotate(92deg) scale(1.04); } 100%{ transform:rotate(90deg) scale(1); } }
@keyframes ikSok{ 0%{ transform:scale(.9); opacity:.9; } 100%{ transform:scale(2.3); opacity:0; } }
@keyframes ikRay{ 0%{ width:0; } 100%{ width:100%; } }
@keyframes ikAcil{ 0%{ letter-spacing:.26em; } 35%{ letter-spacing:.42em; } 100%{ letter-spacing:.26em; } }

/* ==== ZAMAN YOLU (zamanyolu.js) — the road that replaced the map =============
   Drawn into #sefer so every gate that reads the sheet keeps working. The
   material follows the era of the node the commander stands on (data-cag):
   stone, bronze, iron, industry, information. Measured on the prova at
   375x812: ring top 228, walker feet 237, dial 311-611, panel 640.          */
#sefer.zy[data-cag="tas"]{--k-zemin:#120d08;--k-alt:#0b0805;--k-altin:#b08a4e;--k-lit:#d8b070;--k-metin:#cbb890;--k-ray:#5a4327;--k-doku:radial-gradient(60% 40% at 30% 30%,rgba(176,138,78,.10),transparent 70%),radial-gradient(50% 35% at 75% 70%,rgba(120,80,40,.12),transparent 70%)}
#sefer.zy[data-cag="tunc"]{--k-zemin:#14100a;--k-alt:#0d0a06;--k-altin:#c79a3c;--k-lit:#f2d272;--k-metin:#d8cfae;--k-ray:#6b4d1b;--k-doku:repeating-linear-gradient(180deg,transparent 0 22px,rgba(242,210,114,.045) 22px 23px)}
#sefer.zy[data-cag="demir"]{--k-zemin:#0e1012;--k-alt:#090b0d;--k-altin:#9c8f80;--k-lit:#d6cfc3;--k-metin:#c9c2b6;--k-ray:#4a4c50;--k-doku:radial-gradient(circle at 12px 12px,rgba(214,207,195,.10) 0 1.5px,transparent 2px);--k-doku-boy:38px 38px}
#sefer.zy[data-cag="sanayi"]{--k-zemin:#0b0a09;--k-alt:#060505;--k-altin:#9a7340;--k-lit:#e0a648;--k-metin:#cdb894;--k-ray:#5c4326;--k-doku:radial-gradient(70% 45% at 50% 100%,rgba(224,166,72,.16),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%)}
#sefer.zy[data-cag="bilgi"]{--k-zemin:#070a0f;--k-alt:#04060a;--k-altin:#7d939c;--k-lit:#bfe4ef;--k-metin:#c4d3d8;--k-ray:#2d3f48;--k-mor:#c78ae8;--k-doku:linear-gradient(90deg,rgba(191,228,239,.06) 1px,transparent 1px),linear-gradient(180deg,rgba(191,228,239,.06) 1px,transparent 1px);--k-doku-boy:34px 34px}
/* THE COSTUME NEVER APPEARED (measured, 2026-09-05). Two blocks selected the
   walking figure and NEITHER could ever match: one asked for `.yuru` when the
   element is `.zy-yuru`, and the other asked for `#sefer .zy-yuru` nested
   inside a second `#sefer`, which no document can satisfy. So the
   `[data-k]{display:none}` default won every time and the Annunaki walked the
   whole road in the bare body - no stone hood, no bronze wings, no iron helm,
   through five eras of costume that were drawn and shipped and never once
   drawn on screen. */
#sefer.zy[data-cag="tas"] .zy-yuru [data-k~="tas"],#sefer.zy[data-cag="tunc"] .zy-yuru [data-k~="tunc"],#sefer.zy[data-cag="demir"] .zy-yuru [data-k~="demir"],
#sefer.zy[data-cag="sanayi"] .zy-yuru [data-k~="sanayi"],#sefer.zy[data-cag="bilgi"] .zy-yuru [data-k~="bilgi"]{display:inline}
#sefer.zy[data-cag="tas"] .zy-yuru .ten{fill:#e6c48a}#sefer.zy[data-cag="tas"] .zy-yuru .koyu{fill:#b98a45}#sefer.zy[data-cag="tas"] .zy-yuru .cizgi{stroke:#e6c48a}
#sefer.zy[data-cag="bilgi"] .zy-yuru .ten{fill:#e8f6fa}#sefer.zy[data-cag="bilgi"] .zy-yuru .koyu{fill:#7d939c}
/* ---- ONE SCREEN, ALWAYS (owner, 2026-09-05: "bu alan bir sayfaya tam
   sigmali") -------------------------------------------------------------------
   The first cut fixed the paper at 520px and the sheet scrolled on any phone
   with less than ~760px of room: the era line was cut off the top and the
   dossier under the button. Nothing here is a fixed height any more. The sheet
   is a column that cannot scroll, the paper takes whatever is left, and the
   ring, the walker and the dial are all sized from the paper's OWN box with
   container units — so the road fits a small phone and a tall one by the same
   arithmetic instead of by a media query per handset. */
#sefer.zy{ display:flex; flex-direction:column; overflow:hidden; }
/* ---- .hidden HER ZAMAN KAZANIR (olculdu, 2026-09-05) ---------------------
   `#sefer.zy` bir id + bir sinif; `.hidden` yalnizca bir sinif. Yani yukaridaki
   satir yazildigi gunden (build 897, Zaman Yolu) beri `.hidden` sinifini
   yeniyor: yol sayfasi KAPATILDIGINDA da ekranda kaliyor -- z46'da, kart
   masasinin (z45) ONUNDE, pointer-events:auto ile. Oyuncunun karta yaptigi her
   dokunus aslinda gorunmeyen yol sayfasina iniyor. Sahibinin "basiyorum ama
   hicbir sey olmuyor"u budur, ve otomatik oyuncum bunu hic goremezdi cunku o
   olaylari dogrudan elemana gonderiyor, parmak gibi koordinata dokunmuyor.
   Olculdu: `#sefer.zy.hidden` -> display:flex; `.sefer.hidden` -> display:none.
   Kural ID'ye baglandi ki bugunku 'zy' gibi ileride eklenecek her varyant da
   kapsansin. */
#sefer.hidden{display:none !important}
/* align-items MUST be stretch here. The paper inherits `align-items:start`
   from the grid version of this row, and `start` on a flex COLUMN is the
   horizontal axis: with size containment on (container-type) the paper's
   content no longer offers a width, so it shrank to its two borders — 2px —
   and the ring, the walker and the dial collapsed with it. Measured, not
   guessed: kagit width 2px, merkez 4px. */
#sefer.zy .sf-masa{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  align-items:stretch; gap:8px; padding:8px 12px 0; grid-template-columns:none; }
#sefer.zy .sf-anahtar{ display:none; }
#sefer.zy .sf-kagit{ background:var(--k-zemin); border-color:color-mix(in srgb,var(--k-altin) 40%,transparent);
  box-shadow:none; flex:1 1 auto; min-height:0; height:auto; max-height:none; aspect-ratio:auto;
  container-type:size; transition:background .8s; }
#sefer.zy .sf-kagit::after{ background:var(--k-doku); background-size:var(--k-doku-boy,auto); }
#sefer.zy .sf-kagit svg{ width:auto; height:auto; }
#sefer.zy .zy-sahne{ position:absolute; inset:0; overflow:hidden; font-family:var(--font); color:var(--k-metin);
  /* --zt yurunen cizgi, --zr halka capi, --zf figur boyu, --zk kadran */
  --zt:120px; --zr:560px; --zf:114px; --zk:300px; }
@supports (height:1cqh){
  #sefer.zy .zy-sahne{
    --zt: clamp(78px, 27cqh, 126px);
    --zr: min(560px, 168cqw);
    --zf: calc(var(--zt) - 6px);
    --zk: min(300px, calc(100cqh - var(--zt) - 16px), 84cqw);
  }
}
/* THE PLATE AND THE WALKER SHARED A ROW (measured live, 375x812, build 901):
   the era plate ran x25-199 and the figure x143-232, so 56px of the age's own
   name was printed underneath a bronze wing. The walker is centred and cannot
   move — it stands on the ring — so the plate is the one that yields: it keeps
   the left corner, wraps its name, and stops short of the figure. */
/* THE PLATE IS A CHIP, SO IT SITS ABOVE THE SCENE (z above the walker). It
   carries its own ground, which is what lets it stay readable when a bronze
   wing sweeps across it — and what lets it be wide enough to say the age's
   name on one line instead of three. */
#sefer.zy .zy-cag{ position:absolute; z-index:4; left:12px; top:11px; display:flex; align-items:flex-start; gap:8px;
  max-width:min(56%, 168px);
  /* the walker's SVG draws past its own box (a bronze wing reaches ~40px left
     of the body), so the plate carries its own ground rather than trusting the
     gap */
  padding:3px 12px 4px 3px; margin:-3px 0 0 -3px; border-radius:3px;
  background:linear-gradient(95deg, rgba(6,4,3,.82) 55%, rgba(6,4,3,0));
  font:700 10px/1.3 var(--font); letter-spacing:.14em; color:var(--k-altin); }
#sefer.zy .zy-cag > span{ min-width:0; }
#sefer.zy .zy-cag small{ display:block; margin-top:6px; font:400 9px/1 var(--font); letter-spacing:.2em; color:var(--k-metin); opacity:.6; }
/* the age's own medallion: once beside its name, once large behind the road */
#sefer.zy .zy-cag s{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; text-decoration:none;
  background-size:cover; background-position:center; border:1px solid color-mix(in srgb,var(--k-altin) 60%,transparent); }
#sefer.zy .zy-arka{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.17; filter:saturate(.65);
  background-size:cover; background-position:center 28%; transition:opacity .8s;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 76%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 76%); }
#sefer.zy.yolda .zy-arka{ opacity:.1; }
#sefer.zy .zy-halka{ position:absolute; left:50%; top:var(--zt); width:var(--zr); height:var(--zr);
  margin-left:calc(var(--zr) / -2); border-radius:50%;
  border:3px solid var(--k-ray); transform:rotate(var(--don,0deg)); transition:transform 1.6s cubic-bezier(.4,0,.2,1); }
#sefer.zy .zy-halka::before{ content:''; position:absolute; inset:14px; border-radius:50%; border:1px dashed color-mix(in srgb,var(--k-altin) 50%,transparent); }
#sefer.zy .zy-dugum{ position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--k-alt); border:2px solid var(--k-ray);
  transform:rotate(var(--a)) translateY(calc(var(--zr) / -2)); transition:opacity .8s; }
#sefer.zy .zy-dugum.zy-gecti{ background:var(--k-altin); border-color:var(--k-altin); }
#sefer.zy .zy-dugum.zy-burada{ background:var(--k-lit); border-color:var(--k-lit); }
#sefer.zy .zy-dugum.zy-sirada{ background:var(--k-lit); border-color:var(--k-lit); animation:zyNabiz 1.5s infinite alternate; }
#sefer.zy .zy-dugum i{ position:absolute; left:50%; top:18px; transform:translateX(-50%) rotate(calc(-1 * var(--a) - var(--don,0deg)));
  font:700 10px/1 var(--font); color:var(--k-lit); white-space:nowrap; font-style:normal; }
#sefer.zy .zy-kapi{ position:absolute; left:50%; top:50%; width:2px; height:30px; margin-left:-1px; background:var(--k-altin);
  transform:rotate(var(--a)) translateY(calc(var(--zr) / -2 - 16px)); transform-origin:50% 0; transition:opacity .8s; }
#sefer.zy .zy-kapi b{ position:absolute; left:50%; top:-16px; transform:translateX(-50%) rotate(calc(-1 * var(--a) - var(--don,0deg)));
  font:700 9px/1 var(--font); letter-spacing:.2em; color:var(--k-altin); white-space:nowrap; }
#sefer.zy .zy-sonuk{ opacity:.28; }
#sefer.zy .zy-merkez{ position:absolute; left:50%;
  /* sits in the middle of whatever room is left under the walked line */
  top:calc(var(--zt) + max(8px, (100cqh - var(--zt) - var(--zk)) * .42));
  width:var(--zk); height:var(--zk);
  margin-left:calc(var(--zk) / -2); border-radius:50%;
  overflow:hidden; border:2px solid var(--k-altin); box-shadow:0 0 40px color-mix(in srgb,var(--k-lit) 22%,transparent);
  background:var(--k-alt); z-index:2; }
#sefer.zy .zy-merkez svg{ width:100%; height:100%; display:block; }
#sefer.zy .zy-yuru svg{ width:100%; height:100%; overflow:visible; }
@keyframes zyNabiz{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--k-lit) 60%,transparent); } 100%{ box-shadow:0 0 0 9px transparent; } }
/* the dial */
#sefer.zy .zy-kd text{ font-family:var(--font); fill:var(--k-metin); }
#sefer.zy .zy-kd .zy-yil, #sefer.zy .zy-kd .zy-deg{ fill:var(--k-lit); }
#sefer.zy .zy-kd .zy-unv{ fill:var(--k-altin); }
#sefer.zy .zy-kd .zy-kota-iz{ stroke:color-mix(in srgb,var(--k-altin) 30%,transparent); }
#sefer.zy .zy-kd .zy-kota{ stroke:var(--k-altin); }
#sefer.zy .zy-kd .zy-cub-iz{ fill:color-mix(in srgb,var(--k-altin) 16%,transparent); }
#sefer.zy .zy-kd .zy-cub{ fill:var(--k-lit); }
/* ---- DORT CUBUK, UC HAL (sahibi 2026-09-08) --------------------------------
   Dordu de ayni altin renkteydi ve yalnizca opaklikla ayriliyordu; ekranda
   14 ile 100 ayni sey gorunuyordu. Renkler oyunun kendi paletinden:
     saglam    --k-altin  (kartin, muhrun, sarayin rengi)
     zorlaniyor--k-lit'in soluk hali
     dibe yakin--k-mor'un uyari ucu (alarm ve haciz bu aileden konusuyor)
   Sayi cubukla ayni sinifi tasir; ustteki `.zy-deg` kurali daha genel
   oldugu icin bunlar ondan SONRA gelmeli. */
#sefer.zy .zy-kd .zy-cub.zy-iyi{  fill:var(--k-altin); fill-opacity:.95; }
#sefer.zy .zy-kd .zy-cub.zy-orta{ fill:var(--k-lit);   fill-opacity:.72; }
#sefer.zy .zy-kd .zy-cub.zy-dip{  fill:#c76b45;        fill-opacity:.92; }
#sefer.zy .zy-kd .zy-deg.zy-iyi{  fill:var(--k-altin); }
#sefer.zy .zy-kd .zy-deg.zy-orta{ fill:var(--k-lit); opacity:.9; }
#sefer.zy .zy-kd .zy-deg.zy-dip{  fill:#c76b45; }
#sefer.zy .zy-kd .zy-rad-iz{ fill:none; stroke:var(--k-altin); opacity:.5; }
#sefer.zy .zy-kd .zy-rad{ fill:var(--k-lit); stroke:var(--k-lit); }
#sefer.zy .zy-kd .zy-fark{ font-weight:700; fill:var(--k-lit); opacity:0; }
#sefer.zy .zy-kd .zy-fark.zy-eksi{ fill:#c76b45; }
#sefer.zy .zy-kd .zy-fark.on{ animation:zyFark 1.4s ease-out forwards; }
@keyframes zyFark{ 0%{ opacity:0; transform:translateY(4px); } 15%{ opacity:1; transform:translateY(0); } 75%{ opacity:1; } 100%{ opacity:0; transform:translateY(-6px); } }
#sefer.zy .zy-kd .zy-parla{ animation:zyParla .7s ease-out; }
@keyframes zyParla{ 0%{ filter:drop-shadow(0 0 8px var(--k-lit)) brightness(1.6); } 100%{ filter:none; } }
#sefer.zy .zy-kd .zy-unv.zy-degisti{ animation:zyUnvan .9s ease-out; }
@keyframes zyUnvan{ 0%{ opacity:0; letter-spacing:.6em; } 100%{ opacity:1; letter-spacing:.24em; } }
/* the sheet's own furniture in the era's colours */
#sefer.zy{ background:var(--k-zemin); }
#sefer.zy .sf-ust{ background:color-mix(in srgb,var(--k-alt) 85%,#000); }
#sefer.zy .sf-panel{ background:color-mix(in srgb,var(--k-alt) 82%,transparent); border-color:color-mix(in srgb,var(--k-altin) 45%,transparent);
  flex:0 0 auto; padding:9px 12px; gap:4px; }
#sefer.zy .sf-panel h3{ font-size:15px; letter-spacing:1.5px; }
#sefer.zy .sf-rozet-ad{ font-size:10px; letter-spacing:2px; padding:3px 8px; }
/* the dossier is two lines and never a third: it cannot push the button off */
#sefer.zy .sf-panel .sf-tanim{ padding-bottom:0; border-bottom:0; font-size:12px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#sefer.zy .sf-ilerle{ flex:0 0 auto; padding:8px 12px 10px; }
#sefer.zy .sf-ilerle-btn{ padding:12px; }
#sefer.zy .sf-panel h3{ color:var(--k-lit); }
#sefer.zy .sf-rozet-ad{ color:var(--k-altin); border-color:color-mix(in srgb,var(--k-altin) 60%,transparent); }
#sefer.zy .sf-rozet-ad::before{ background:var(--k-altin); }
#sefer.zy .sf-ilerle-btn{ background:linear-gradient(180deg,color-mix(in srgb,var(--k-lit) 88%,#fff),var(--k-altin)); color:#0b0a07; border:0;
  font-weight:700; letter-spacing:.22em; }
#sefer.zy.yolda .zy-merkez{ opacity:.35; transition:opacity .6s; }
/* ---- THE SEASONS PASS WHILE THE ROAD IS WALKED ----------------------------
   (owner: "karakter yururken arka planda mevsim gecis efektleri olsun")
   The ride costs no calendar time — the clock is held in turn mode — so this
   is weather rather than a claim: one season crosses per leg, starting from
   the one the world is actually in (zamanyolu.js), so a long road feels like
   the years the arrival card is about to name. Both layers are inert until
   the sheet is .yolda, and both are gone under reduced motion. */
#sefer.zy .zy-mev{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.1s ease, background 1.4s ease; }
#sefer.zy.yolda .zy-mev{ opacity:1; }
#sefer.zy .zy-sahne[data-mev="bahar"] .zy-mev{ background:
  radial-gradient(120% 62% at 50% 0%, rgba(150,205,120,.20), transparent 68%),
  radial-gradient(80% 40% at 50% 100%, rgba(120,170,110,.12), transparent 70%); --zmc:#cfe8a8; }
#sefer.zy .zy-sahne[data-mev="yaz"] .zy-mev{ background:
  radial-gradient(120% 62% at 50% 0%, rgba(240,200,110,.22), transparent 68%),
  radial-gradient(80% 40% at 50% 100%, rgba(210,150,70,.12), transparent 70%); --zmc:#f6e2a6; }
#sefer.zy .zy-sahne[data-mev="guz"] .zy-mev{ background:
  radial-gradient(120% 62% at 50% 0%, rgba(214,130,60,.20), transparent 68%),
  radial-gradient(80% 40% at 50% 100%, rgba(150,80,40,.14), transparent 70%); --zmc:#e8a76a; }
#sefer.zy .zy-sahne[data-mev="kis"] .zy-mev{ background:
  radial-gradient(120% 62% at 50% 0%, rgba(180,210,235,.18), transparent 68%),
  radial-gradient(80% 40% at 50% 100%, rgba(120,150,180,.10), transparent 70%); --zmc:#dbeaf6; }
#sefer.zy .zy-serp{ position:absolute; left:0; right:0; top:-25%; bottom:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .9s ease;
  background-image:
    radial-gradient(circle, var(--zmc,#e8dcc0) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, var(--zmc,#e8dcc0) 0 1px,   transparent 1.8px);
  background-size: 96px 128px, 152px 196px; background-position: 0 0, 40px 60px; }
#sefer.zy.yolda .zy-serp{ opacity:.42; }
@media (prefers-reduced-motion: no-preference){
  #sefer.zy.yolda .zy-serp{ animation:zySerpinti 7s linear infinite; }
}
@keyframes zySerpinti{ to{ background-position: 34px 128px, 4px 256px; } }
/* the walker */
/* ============================================================================
   ANUNNAKİ — tek gövde, beş kılık (data-cag ile). Yürüyüş döngüsü CSS.
   ========================================================================== */
/* ---- FIGUR ZEMINDEN AYRILMALI (sahibi, defalarca: "siluet cok belirsiz,
   daha belirgin olsun ve degisimleri gozlenebilsin") -----------------------
   OLCULDU (b1008). Tas caginda figur #2a1b0e ile ciziliyordu ve o cagin
   zemini #120d08 -- kontrast 1.16:1, yani figur fiilen ZEMINLE AYNI RENK.
   Diger dort cagda ayni figur --k-lit ile ciziliyor ve kontrast 9-15:1:
     tunc 12.85 · demir 12.32 · sanayi 9.15 · bilgi 14.69 · TAS 1.16
   Yani hata tas cagina ozeldi ve dort ay boyunca orada bir golge lekesi
   gorunuyordu. Yeni renk #e6c48a ile kontrast 11.4:1 -- kardeslerinin
   arasinda.
   Ustune iki sey daha: her cagda gecerli bir KOYU DIS HAT (figur acik bir
   zemine denk gelirse de kaybolmasin) ve daha derin bir golge. Ikisi de
   filtre; SVG'nin kendisi degismiyor, yani yuruyus dongusu aynen calisiyor.
   Boyut da buyudu (.74 -> .92 genislik): ekranda ~40px olan figur ~50px. */
#sefer.zy .zy-yuru{position:absolute;left:50%;top:var(--zt);
  width:calc(var(--zf) * .92);height:var(--zf);z-index:3;
  transform:translate(-50%,-100%);pointer-events:none;
  filter:drop-shadow(0 0 1.5px rgba(10,6,3,.95))
         drop-shadow(0 0 3px rgba(10,6,3,.75))
         drop-shadow(0 5px 10px rgba(0,0,0,.7))}
#sefer.zy .zy-yuru svg{width:100%;height:100%;overflow:visible}
#sefer.zy .zy-yuru .gov{animation:zySek 1s ease-in-out infinite}#sefer.zy .zy-yuru.dur .gov{animation:none}
#sefer.zy .zy-yuru .b-on{transform-origin:0 0;animation:zyBacakOn 1s ease-in-out infinite}#sefer.zy .zy-yuru .b-ar{transform-origin:0 0;animation:zyBacakAr 1s ease-in-out infinite}
#sefer.zy .zy-yuru .k-on{transform-origin:0 -40px;animation:zyKolOn 1s ease-in-out infinite}#sefer.zy .zy-yuru .k-ar{transform-origin:0 -40px;animation:zyKolAr 1s ease-in-out infinite}
#sefer.zy .zy-yuru.dur .b-on,#sefer.zy .zy-yuru.dur .b-ar,#sefer.zy .zy-yuru.dur .k-on,#sefer.zy .zy-yuru.dur .k-ar{animation:none}
#sefer.zy .zy-yuru .kanat{transform-origin:0 -30px;animation:zyKanat 2s ease-in-out infinite alternate}
@keyframes zySek{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes zyBacakOn{0%{transform:rotate(-24deg)}50%{transform:rotate(20deg)}100%{transform:rotate(-24deg)}}
@keyframes zyBacakAr{0%{transform:rotate(20deg)}50%{transform:rotate(-24deg)}100%{transform:rotate(20deg)}}
@keyframes zyKolOn{0%{transform:rotate(-6deg)}50%{transform:rotate(9deg)}100%{transform:rotate(-6deg)}}
@keyframes zyKolAr{0%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}100%{transform:rotate(14deg)}}
@keyframes zyKanat{0%{transform:rotate(0) scaleY(1)}100%{transform:rotate(-3deg) scaleY(.95)}}
/* kılık katmanları */
#sefer.zy .zy-yuru [data-k]{display:none}
#sefer.zy[data-cag="tas"] .zy-yuru [data-k~="tas"],#sefer.zy[data-cag="tunc"] .zy-yuru [data-k~="tunc"],#sefer.zy[data-cag="demir"] .zy-yuru [data-k~="demir"],
#sefer.zy[data-cag="sanayi"] .zy-yuru [data-k~="sanayi"],#sefer.zy[data-cag="bilgi"] .zy-yuru [data-k~="bilgi"]{display:inline}
#sefer.zy .zy-yuru .ten{fill:var(--k-lit)}#sefer.zy .zy-yuru .koyu{fill:var(--k-altin)}#sefer.zy .zy-yuru .cizgi{stroke:var(--k-lit)}#sefer.zy .zy-yuru .halo{fill:none;stroke:var(--k-mor,var(--k-lit));stroke-width:1.5;opacity:.9}
#sefer.zy[data-cag="tas"] .zy-yuru .ten{fill:#e6c48a}#sefer.zy[data-cag="tas"] .zy-yuru .koyu{fill:#b98a45}#sefer.zy[data-cag="tas"] .zy-yuru .cizgi{stroke:#e6c48a}
#sefer.zy[data-cag="bilgi"] .zy-yuru .ten{fill:#e8f6fa}#sefer.zy[data-cag="bilgi"] .zy-yuru .koyu{fill:#7d939c}



/* A TOAST OVER THE DIAL (measured live, build 901): #mediacard is z240 and
   drops into the middle of the screen, which on the road is exactly where the
   SÜTUN dial's title and axes are. The map already retires the toast when it
   opens; a toast that ARRIVES afterwards did not know about the road. One
   rule, no new state to leak — and where :has() is missing the rule is simply
   ignored and the old behaviour stands. */
body:has(#sefer.zy:not(.hidden)) #mediacard{ display:none !important; }

/* ==== VARIŞ SAHNELERİ (varis_foto.js) =====================================
   A painted place replaces the four drawn silhouette layers. It fills the same
   frame the descent used, so the name plate, the dossier and the footing line
   all keep their positions; only the ground behind them changed from a drawing
   of a terrain into a picture of THIS place in THIS act. */
.vr-sahne .vr-foto{ position:absolute; inset:0; display:block; z-index:0;
  background-size:cover; background-position:center 42%;
  filter:saturate(.92) contrast(1.04); }
/* the descent still descends: the picture arrives out of a scaled-up start the
   way the drawn layers did, so the screen reads as falling into the place */
@media (prefers-reduced-motion: no-preference){
  .vr-sahne .vr-foto{ animation:vrFotoIn .62s cubic-bezier(.2,.9,.3,1) 1; }
}
@keyframes vrFotoIn{ from{ transform:scale(1.09); opacity:0; } to{ transform:none; opacity:1; } }
/* and the name stays legible over a painting rather than over flat silhouettes */
.vr-sahne.vr-boyali .vr-ad{ text-shadow:0 2px 14px rgba(0,0,0,.95); }
.vr-sahne.vr-boyali::after{ content:''; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,3,2,.5) 0%, rgba(4,3,2,0) 34%,
             rgba(4,3,2,.35) 72%, rgba(4,3,2,.86) 100%); }
/* the return band gets the same picture as its ground, dimmed under the name */
/* ---- RESMI GORULECEK KADAR AYDINLIK, YAZIYI OKUTACAK KADAR KISIK (b1028)
   brightness(.42) resmi neredeyse siliyordu; sahibi yine de "cok guzel bir
   gorsel" dedigine gore altindaki resim iyi. .58'e cikti ve yazinin okunmasi
   artik karartmaya degil, yazinin kendi golgesine bagli. Ustune 2.6 saniyeye
   yayilan cok yavas bir yakinlasma: durgun bir karenin "sahne" gibi
   okunmasini saglayan sey bu. */
.vr-kisa .vr-kisa-foto{ position:absolute; inset:0; z-index:0; display:block;
  background-size:cover; background-position:center 42%;
  filter:brightness(.58) saturate(.95); }
@media (prefers-reduced-motion: no-preference){
  .vr-kisa .vr-kisa-foto{ animation:vrKisaYakin 2.6s cubic-bezier(.25,.5,.3,1) both; }
}
@keyframes vrKisaYakin{ from{ transform:scale(1.0); } to{ transform:scale(1.07); } }
.vr-kisa .vr-kisa-ic b, .vr-kisa .vr-kisa-ic i, .vr-kisa .vr-kisa-ic u{
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 26px rgba(0,0,0,.75); }
.vr-kisa .vr-kisa-ic, .vr-kisa .vr-kisa-cizgi{ position:relative; z-index:1; }

/* ==== TEHDİT PORTRELERİ (tehdit_foto.js) ==================================
   The eight archetypes now have painted faces. They ride in the SAME boxes the
   drawings rode in, so nothing about the dossier's or the fight's layout moves
   — an <i> with a background, sized by its parent, cropped to the face. */
.vr-tk .vr-yuz{ display:block; width:100%; aspect-ratio:1/1; border-radius:2px;
  background-size:cover; background-position:center 30%;
  filter:saturate(.9) contrast(1.05); }
.ct-cephe .ct-yuz{ display:block; width:100%; aspect-ratio:1/1; border-radius:3px;
  background-size:cover; background-position:center 28%;
  border:1px solid color-mix(in srgb, var(--irk, #e8c96a) 45%, transparent);
  box-shadow:inset 0 -22px 30px -18px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: no-preference){
  .ct-cephe .ct-yuz{ animation:ctYuzNefes 4.2s ease-in-out infinite; }
}
@keyframes ctYuzNefes{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.014); } }

/* ==== HÜKMÜN YÜZÜ — the figure the decrees made (zamanyolu.js `huy`) ========
   Five stages on profile.js's force axis. The era costume (`data-k`) and the
   temperament (`data-h`) are separate layers on one body, so a merciful
   commander in the iron age is still wearing the iron age. Nothing here
   recolours the whole figure: mercy adds light, force adds mass and iron, and
   the body underneath is the same body it was in the first act. */
#sefer.zy .zy-yuru [data-h]{ display:none; }
#sefer.zy[data-huy="melek1"] .zy-yuru [data-h~="melek1"],
#sefer.zy[data-huy="melek2"] .zy-yuru [data-h~="melek2"],
#sefer.zy[data-huy="sert1"]  .zy-yuru [data-h~="sert1"],
#sefer.zy[data-huy="sert2"]  .zy-yuru [data-h~="sert2"]{ display:inline; }
#sefer.zy .zy-yuru .halo2{ fill:none; stroke:#ffe9a8; stroke-width:1.6; opacity:.85;
  filter:drop-shadow(0 0 5px rgba(255,233,168,.85)); }
#sefer.zy .zy-yuru .tuy{ fill:#ffe9a8; opacity:.20; }
/* ---- KORKU GOLGELERI DE GORUNSUN (b1008) --------------------------------
   #241109, tas cagi zemini #120d08 ile 1.07:1 kontrast veriyordu -- yani
   hic cizilmemis sayilir. Golge KARANLIK kalmali ama zemine gore degil,
   figure gore: sicak bir kizil-kahve, figurun altin tonundan belirgin
   biçimde koyu, zeminden belirgin biçimde acik. */
#sefer.zy .zy-yuru .korku{ fill:#6b3520; stroke:#6b3520; }
#sefer.zy .zy-yuru .kan{ stroke:#e63900; fill:none;
  filter:drop-shadow(0 0 4px rgba(230,57,0,.8)); }
/* the light and the dread reach past the silhouette */
#sefer.zy[data-huy="melek2"] .zy-yuru{ filter:drop-shadow(0 0 12px rgba(255,233,168,.42)) drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
#sefer.zy[data-huy="sert2"]  .zy-yuru{ filter:drop-shadow(0 0 12px rgba(230,57,0,.34)) drop-shadow(0 5px 10px rgba(0,0,0,.75)); }
/* mercy stands taller and lighter; force stands wider and leans in */
#sefer.zy[data-huy="melek2"] .zy-yuru .gov{ transform:translateY(-2px) scale(.99); }
#sefer.zy[data-huy="sert1"]  .zy-yuru .gov{ transform:scaleX(1.04); }
#sefer.zy[data-huy="sert2"]  .zy-yuru .gov{ transform:scaleX(1.08) rotate(1.4deg); }
/* the radiant one keeps their wings whatever age it is */
#sefer.zy[data-huy="melek2"] .zy-yuru .kanat{ display:inline; }
#sefer.zy[data-huy="melek2"] .zy-yuru .kanat .ten{ fill:#ffe9a8; }

/* the crossing itself: one flare, one line, then gone */
#sefer.zy .zy-yuru.zy-donusum{ animation:zyDonus 1.5s ease-out 1; }
@keyframes zyDonus{
  0%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  22%{ filter:drop-shadow(0 0 22px rgba(255,255,255,.9)) brightness(1.6); }
  100%{ filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); } }
#sefer.zy .zy-huy-not{ position:absolute; left:50%; top:calc(var(--zt) + 6px);
  transform:translateX(-50%); z-index:6; pointer-events:none; white-space:nowrap;
  font-size:9px; letter-spacing:.2em; color:#ffe9a8; text-shadow:0 0 10px rgba(0,0,0,.9);
  background:rgba(8,6,4,.78); border:1px solid rgba(255,233,168,.45);
  padding:4px 9px; border-radius:2px; animation:zyHuyNot 3.4s ease-out 1 forwards; }
#sefer.zy .zy-huy-not.zy-huy-sert{ color:#ffb59a; border-color:rgba(230,57,0,.55); }
@keyframes zyHuyNot{ 0%{ opacity:0; transform:translate(-50%,6px); }
  12%{ opacity:1; transform:translate(-50%,0); }
  78%{ opacity:1; } 100%{ opacity:0; } }

/* ==== KISA VARIŞ — riding back through a place you already know ============
   The full descent is earned once per site (varis.js). The return is a band:
   the ground's own light, the name, the terrain, and it leaves by itself. */
.vr.vr-kisa{ position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.86), var(--vr-yer,#231a0e) 140%); }
.vr-kisa .vr-kisa-ic{ text-align:center; }
.vr-kisa .vr-kisa-ic i{ display:block; font-style:normal; font-size:9px;
  letter-spacing:.34em; opacity:.6; color:var(--vr-isik,#e8c96a); }
.vr-kisa .vr-kisa-ic b{ display:block; margin-top:6px; font-size:20px;
  letter-spacing:.1em; color:var(--vr-isik,#e8c96a); }
.vr-kisa .vr-kisa-ic u{ display:block; margin-top:5px; text-decoration:none;
  font-size:9px; letter-spacing:.26em; opacity:.5; }
.vr-kisa .vr-kisa-cizgi{ position:absolute; left:50%; bottom:34%; width:0; height:1px;
  transform:translateX(-50%); background:var(--vr-isik,#e8c96a); opacity:.5; }
@media (prefers-reduced-motion: no-preference){
  .vr-kisa .vr-kisa-ic{ animation:vrKisaGel .34s ease-out 1; }
  .vr-kisa .vr-kisa-cizgi{ animation:vrKisaCiz 1.15s ease-out 1 forwards; }
}
@keyframes vrKisaGel{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes vrKisaCiz{ from{ width:0; opacity:0; } 30%{ opacity:.5; } to{ width:52%; opacity:.14; } }

@media (prefers-reduced-motion: reduce){
  #sefer.zy .zy-halka{ transition:none; }
  #sefer.zy .zy-mev, #sefer.zy .zy-serp{ display:none; }
  #sefer.zy .zy-dugum.zy-sirada, #sefer.zy .zy-kd .zy-fark.on, #sefer.zy .zy-kd .zy-parla, #sefer.zy .zy-kd .zy-unv.zy-degisti{ animation:none; }
}

/* ==== YOL KAVGASI TEK SAYFAYA SIĞAR (sahibi, 2026-09-06) ====================
   "bu alanın da sayfaya tam sığmasını istiyorum."

   OLCULDU, 375x667 (canli yapi, gercek kavga): kutu 689px, ekran 667, yani
   40px ASAGI TASIYOR ve #rite'in overflow-y:auto'su onu kaydirmaya birakiyor
   -- sahibi kaydirmadigi icin SIPER AL / SALDIR / KAC tuslarinin "KALIR"
   satiri ekranin altinda kaliyor. Blok blok: serit 14 · sahne 122 ·
   cepheler 208 · soz 41 · kaynak 30 · hedef 58 · duruslar 126 + bosluklar 55
   + kutu dolgusu 34.

   Iki buyuk blok EKRANA GORE olculuyor artik (dvh), geri kalan da kisa
   ekranda sikisiyor. Uzun ekranda hicbir sey kaybetmiyor: 812'de cephe 195,
   sahne 122 -- yani bugunku olculerin neredeyse aynisi. Kisa ekranda
   (667) cephe 160, sahne 100 ve kutu ~590'a iniyor.

   Cephe kutusunun boyu ayrica RESMIN KENDI ORANINA yaklasiyor: tehdit
   portresi zaten kare (.ct-yuz aspect-ratio:1/1), 147 genislikte 147
   yuksekligi dolduruyordu ve altinda 61px bos zemin kaliyordu. */
#rite .ct-cephe { height: clamp(132px, 24dvh, 196px); }
.ct-sahne svg { max-height: clamp(76px, 15dvh, 122px); }
#rite .ct-cepheler { margin-top: clamp(7px, 1.5dvh, 12px); }
#rite .ct-soz { margin-top: clamp(6px, 1.4dvh, 11px);
  font-size: clamp(11.5px, 1.55dvh, 12.5px); line-height: 1.55; }
#rite .ct-hedef { margin: clamp(5px, 1.1dvh, 8px) 0 2px;
  font-size: clamp(11px, 1.5dvh, 12px); line-height: 1.5; }
#rite .ct-duruslar { margin-top: clamp(8px, 1.7dvh, 13px); min-height: 0; }
#rite .ct-durus { padding: clamp(7px, 1.4dvh, 11px) 5px clamp(6px, 1.2dvh, 9px); }
#rite .ct-durus .ct-kalan { margin-top: clamp(3px, .8dvh, 6px); }
#rite .ct-durus .ct-kalan em { font-size: clamp(21px, 3.3dvh, 27px); }
@media (max-height: 700px) {
  #rite { padding: 12px !important; }
  .ct-sahne { margin: 5px 0 6px; }
}
/* İKİ ROZET ÇARPIŞIYORDU. `.ct-niyet` kartin ortasinda, `.ct-sayi` sag ustte;
   147px genisligindeki kartta "11/11" sola tasip "⚔ 2"nin uzerine biniyordu
   (sahibin ekraninda "2" ile "10/10" ic ice). Ikisi de artik kendi kosesinde:
   vurus solda, direnc sagda. */
#rite .ct-niyet { left: 7px; right: auto; transform: none; top: 11px; }
#rite .ct-sayi { top: 11px; right: 8px; font-size: 15px; line-height: 1.35; }

/* ==== ANASAYFA AKORDEONU (sahibi, 2026-09-06, onayli tasarim A) =============
   "akordeon menü olsun, annunakiler açık gelsin, şu an için böceksiler ve
   diğerleri kilitli yanında kilit işareti ile gelsin ... change language'in
   üstünde seçenekler butonu da olsun, tek sayfaya sığacak şekilde"
   + "diğer ırkların çerçevesi o ırkların renginde olsun, bu sayede
   ayırtedicilik olmalı".

   OLCULDU (375x667, mockup): baslik 21 + alti satir + acik bolme + dip iki tus
   = 640px, yani 27px bosta. Sayilar buradan geliyor; degistirirken toplami
   akilda tut.

   KILITLI SATIR SOLUK DEGIL, KISIK RENKLI. Ilk denemede kilitlileri %52
   saydamliga dusurmustum: ayirt edici oluyordu ama hepsi ayni griye cokuyordu.
   Simdi saydamlik yok -- cerceve irkin renginin %34'u, acik olaninki %62'si;
   muhur irkin renginde ama %55 opakligda. Alti satir ilk bakista ayriliyor,
   goz yine de tek yere gidiyor. */
#factionsel.fs-kapi .fs-sub { display: none; }
/* "IRKINI SEÇ" seridinin yerini oyunun kendi muhru ve adi aldi (sahibi,
   2026-09-06). Akordeonun kendisi zaten ne istendigini soyluyor. */
#factionsel.fs-kapi .fs-box h2 { display: none; }
#fs-bas { display: flex; align-items: center; justify-content: center; gap: 11px;
  margin: 0 0 9px; }
/* Madalyonun KENDI cemberi var; acilis ekranindaki 80px'lik halka bu boyutta
   sadece isin iki katini yiyor ve icerideki alti basamakli yolu 24px'e
   sikistiriyordu. Halka yok, muhur 42px. */
#fs-bas .fb-m { flex: 0 0 42px; width: 42px; height: 42px; display: block; }
#fs-bas .fb-m svg { width: 42px; height: 42px; display: block;
  filter: drop-shadow(0 0 5px rgba(232,201,106,.35)); }
/* harf araligi son harften sonra da bosluk birakir; kilidi gorsel olarak
   ortalamak icin o boslugu geri aliyoruz */
#fs-bas .fb-t { font-family: var(--font); font-size: 15px; font-weight: 700;
  letter-spacing: .34em; margin-right: -.34em; color: #e8c96a;
  text-shadow: 0 0 10px rgba(232,201,106,.28); }
#factionsel.fs-kapi #fs-grid {
  display: flex !important; flex-direction: column; gap: 5px;
  grid-template-columns: none !important; padding: 0 2px; text-align: left;
}
.fa-sat {
  border: 1px solid color-mix(in srgb, var(--k, #e8c96a) 34%, transparent);
  border-radius: 9px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 4%, #12100c), #12100c 62%);
  transition: border-color .18s ease, background .18s ease;
}
.fa-sat.fa-acik {
  border-color: color-mix(in srgb, var(--k) 62%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 9%, #12100c), #12100c 58%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 12%, transparent),
              0 6px 22px -10px color-mix(in srgb, var(--k) 45%, transparent);
}
/* `.gm-box button` display:block + kendi dolgusu bunlari yeniyordu (0,1,1);
   id ile ozgullugu yukseltiyoruz, yoksa satirin ici alt alta diziliyor. */
#fs-grid .fa-bas {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 5px 10px; min-height: 42px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.fa-mark { width: 22px; height: 22px; flex: 0 0 22px; color: var(--k); opacity: .55; }
.fa-mark svg { width: 22px; height: 22px; display: block; }
.fa-sat.fa-acik .fa-mark { opacity: 1; }
.fa-ad { flex: 1 1 auto; font-family: var(--font); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; color: color-mix(in srgb, var(--k) 42%, #8d8168); }
.fa-sat.fa-acik .fa-ad { color: var(--k); }
.fa-kilit { width: 13px; height: 13px; flex: 0 0 13px; color: var(--k); opacity: .75; display: block; }
.fa-ok { font-size: 10px; color: var(--k); opacity: .8; transition: transform .2s ease; }
.fa-sat.fa-acik .fa-ok { transform: rotate(90deg); }

.fa-gov { padding: 0 10px 8px; animation: faAcil .28s cubic-bezier(.2,.9,.3,1) both; }
@keyframes faAcil { from { opacity: 0; transform: translateY(-5px); } }
.fa-defter { border: 1px solid #4a3f2c; border-radius: 7px; background: #0d0b08;
  padding: 7px 9px 8px; }
.fa-d-bas { font-family: var(--font); font-size: 8.5px; letter-spacing: .24em;
  color: #b08a4e; margin-bottom: 4px; }
.fa-d-ad { font-family: var(--font); font-size: 13.5px; font-weight: 600;
  letter-spacing: .12em; color: #e8dcc4; }
.fa-d-yil { font-size: 10px; color: #8d8168; margin-top: 2px; }
.fa-cip { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.fa-cip span { font-family: var(--font); font-size: 9.5px; letter-spacing: .06em;
  border: 1px solid #4a3f2c; border-radius: 4px; padding: 3px 6px; color: #e8dcc4; }
.fa-vaat { font-family: var(--read, inherit); font-size: 11.5px; line-height: 1.55;
  color: #a99c82; margin: 0 0 2px; letter-spacing: 0; }
#fs-grid .fa-bar { display: block; width: 100%; margin: 6px 0 0; border: 0; border-radius: 7px;
  padding: 7px 0; text-align: center; cursor: pointer; font-family: var(--font);
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
  background: linear-gradient(180deg, #f0d98d, #d8b354); color: #191307; }
#fs-grid .fa-bar.fa-hayalet { background: none; border: 1px solid #4a3f2c; color: #e8c96a;
  font-weight: 600; }
/* ---- BASLANGIC PERDESI ----------------------------------------------------
   Perde donusu yalnizca perde degisirken gorunur; bu liste onu bir secime
   cevirir. Bar degil, cunku ileri goturen sey degil: YENI DUNYA barinin
   ustunde, kartin kendi renginde ince bir satir. */
#fs-grid .fa-perde { display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 8px 0 2px; padding: 5px 8px; border: 1px solid #4a3f2c; border-radius: 7px;
  background: rgba(0,0,0,.25); }
#fs-grid .fa-perde > span { flex: 0 0 auto; font-family: var(--font); font-size: 8.5px;
  font-weight: 600; letter-spacing: .12em; color: #b9ad93; opacity: .8; }
#fs-grid .fa-perde-sec { flex: 1 1 auto; min-width: 0; appearance: none;
  border: 0; border-radius: 5px; padding: 4px 6px; cursor: pointer;
  background: rgba(232,201,106,.10); color: #e8c96a;
  font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
#fs-grid .fa-perde-sec:focus-visible { outline: 2px solid #e8c96a; outline-offset: 1px; }
#fs-grid .fa-perde-sec option { background: #191307; color: #e8c96a; letter-spacing: 0; }
/* DEVAM ET · YÜKLE · YENİ DÜNYA yan yana (sahibin isteği: ırk kartının kendi alanında) */
#fs-grid .fa-uclu { display: grid; grid-template-columns: 1.2fr .85fr 1.2fr; gap: 5px; margin-top: 6px; }
#fs-grid .fa-uclu .fa-bar { margin: 0; padding: 7px 2px; font-size: 10px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fs-grid .fa-uclu .fa-bar small { overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
#fs-grid .fa-uclu .fa-bar[disabled] { opacity: .4; cursor: default; }
#fs-grid .fa-uclu .fa-ik { display: block; width: 18px; height: 18px; margin: 1px auto 3px; overflow: visible; }
#fs-grid .fa-uclu .fa-bar small { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; opacity: .9; margin-top: 0; }
/* akordeon ekrana sığmayınca kendi içinde kayar; alttaki SEÇENEKLER üstüne binmez (375x667 ölçüldü) */
#factionsel.fs-kapi #fs-grid { max-height: calc(min(74vh, 720px) - 20px); overflow-y: auto; overscroll-behavior: contain; }
#fs-grid .fa-bar small { display: block; font-size: 8.5px; font-weight: 400; letter-spacing: .12em;
  opacity: .7; margin-top: 2px; }
/* kilitli irkin cevabi, kendi renginde ve kendi satirinin altinda */
.fa-red { margin: 0; padding: 2px 11px 9px;
  font-family: var(--read, inherit); font-size: 10px; line-height: 1.5; letter-spacing: 0;
  color: color-mix(in srgb, var(--k) 62%, #b9ad93);
  animation: faAcil .25s ease-out both; }

/* ---- DIP: SECENEKLER, ALTINDA DIL --------------------------------------- */
#fs-dip { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
#fs-dip .fs-dip-tus {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; padding: 7px 10px; cursor: pointer;
  background: #12100c; border: 1px solid #4a3f2c; border-radius: 9px;
  font-family: var(--font); font-size: 11px; letter-spacing: .18em; color: #e8dcc4;
  transition: border-color .14s, color .14s;
}
#fs-dip .fs-dip-tus small { display: block; font-size: 8.5px; letter-spacing: .1em;
  color: #645b48; margin-top: 3px; }
#fs-dip .fs-dip-tus:hover, #fs-dip .fs-dip-tus:focus-visible { border-color: #e8c96a; }
/* eski tek basina duran dil tusunun bicimi bu duzende gecmiyor */
#fs-dip #fs-dil { flex-direction: row; gap: 9px; margin-top: 0; clip-path: none;
  color: #e8c96a; background: #12100c; border-radius: 9px; }
#fs-dip #fs-dil .fd-b, #fs-dip #fs-dil .fd-b svg { width: 18px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .fa-gov { animation: none; }
  .fa-ok { transition: none; }
  .fa-red { animation: none; }
}

/* ==== REJİM BANDI (js/sim/rejim.js + main.js rejimDuyur) ====================
   Sahibi, 2026-09-06: "oyuncuya da belirterek, örneğin protokol şu oranın
   altına düştüğü için merkez sorgusu başlıyor veya, insanoğlunun mutluluk
   seviyesi şuraya düştüğü için isyan protokolü açıldı vs".

   BU BİR PERDE DEĞİL VE OLMAYACAK. #signal'in dersi kayıtlı: tam ekran,
   pointer-events:auto bir katman dokuz saniye boyunca her dokunuşu yedi ve
   hicbir perde kaydinda olmadigi icin kimse farkinda degildi. Burada KAP
   dokunus almiyor; yalnizca bandin kendisi aliyor ve tek yaptigi kendini
   kapatmak. Kartin ustune biniyor ama karti tutamaz. */
#rejim {
  position: fixed; left: 0; right: 0; top: var(--deck-top, 54px);
  z-index: 640; pointer-events: none;
  display: flex; justify-content: center;
  padding: 8px 10px 0;
}
#rejim:not(.on) { display: none; }
.rj-bant {
  pointer-events: auto; cursor: pointer;
  width: min(430px, 100%);
  border: 1px solid color-mix(in srgb, var(--rr, #e8c96a) 62%, transparent);
  border-left-width: 3px;
  border-radius: 4px 9px 9px 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rr, #e8c96a) 13%, rgba(8,7,5,.94)), rgba(8,7,5,.96));
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9),
              0 0 0 1px color-mix(in srgb, var(--rr, #e8c96a) 16%, transparent);
  padding: 9px 30px 10px 12px; position: relative;
  animation: rjAcil .9s .56s cubic-bezier(.24,.74,.22,1) both;
}
/* ---- MUHUR SERIDI (b1025) -------------------------------------------------
   Sahibinin sectigi acilis. Sureler bir yerde toplu dursun diye ustte:
     cizgi   0 -> 620ms      govde  560 -> 1460ms
     yazi 1180 -> 1520ms     cizgi sonumu 1240 -> 1560ms
   Govde clip-path ile aciliyor. Yanlar en bastan -40px disarida cunku
   clip golgeyi de keser; yalnizca ALT kenar 100%'den asagi iniyor, yani
   pano gercekten asagi dogru aciliyor. */
@keyframes rjAcil {
  from { clip-path: inset(0 -40px 100% -40px); }
  to   { clip-path: inset(0 -40px -40px -40px); }
}
/* cizgi bandin KARDESI: clip-path cocuklarini da keserdi (bkz. main.js) */
.rj-cizgi {
  position: absolute; top: 8px; left: 10px; right: 10px;
  max-width: 430px; margin-inline: auto; height: 2px; border-radius: 2px;
  background: var(--rr, #e8c96a); transform-origin: left center;
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--rr, #e8c96a) 70%, transparent);
  animation: rjCizgi .62s cubic-bezier(.3,.82,.28,1) both,
             rjCizgiSon .32s 1.24s both;
}
@keyframes rjCizgi { from { transform: scaleX(.05); opacity: .5; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rjCizgiSon { to { opacity: 0; } }
/* yazi panonun ardindan gelir: once resim, sonra hangi kural, sonra neden */
.rj-bant .rj-ne, .rj-bant .rj-metin { animation: rjYazi .34s 1.18s both; }
@keyframes rjYazi { from { opacity: 0; } }
/* icerik acilirken hafifce asagi kayar -- tomar inmis gibi */
.rj-bant.rj-sahne .rj-res { animation: rjIcKay .9s .56s cubic-bezier(.24,.74,.22,1) both; }
@keyframes rjIcKay { from { transform: translateY(-30px); } }
.rj-ust { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rj-ad { font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; color: var(--rr, #e8c96a); }
.rj-olcu { font-family: var(--font); font-size: 9.5px; letter-spacing: .12em;
  color: var(--t-ghost); margin-left: auto; white-space: nowrap; }
.rj-metin { font-family: var(--read, inherit); font-size: 12.5px; line-height: 1.55;
  letter-spacing: 0; color: var(--t-dim); margin: 6px 0 0; }
/* ---- ESIK SAHNESI (b1011) --------------------------------------------------
   Sahibi: "bu tarz uyarilarin da resimle slide gibi cikmasini istiyorum".
   Ayni bant kutusu, ustune 16:9 bir resim ve uc ayri satir:
     rj-ne     canli sayiyi tasir (ses bunu SOYLEYEMEZ, yazili kalir)
     rj-metin  sebep -- "bunu sen yaptin"
     rj-sonuc  sonuc -- "bundan sonra su olacak"
   Resim kutunun tam genisliginde ve ustte; metin altinda okunur. */
.rj-bant.rj-sahne { padding: 0 0 11px; overflow: hidden; }
.rj-bant.rj-sahne .rj-res {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  border-bottom: 1px solid color-mix(in srgb, var(--rr, #e8c96a) 34%, transparent);
  /* alt kenari metne karistir: resim bitiyor gibi degil, yaziya donuyor gibi */
  mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
.rj-bant.rj-sahne .rj-ust { padding: 9px 30px 0 12px; margin-top: -6px; }
.rj-bant.rj-sahne .rj-ne {
  font-family: var(--font); font-size: 11px; letter-spacing: .06em;
  color: var(--rr, #e8c96a); margin: 7px 12px 0; }
.rj-bant.rj-sahne .rj-metin { margin: 6px 12px 0; }
.rj-bant.rj-sahne .rj-sonuc { color: color-mix(in srgb, var(--rr, #e8c96a) 78%, var(--t-dim)); }
@media (prefers-reduced-motion: reduce) { .rj-bant.rj-sahne { animation: none; } }

/* kapanis daha sessiz: ayni bant, kisik kenar */
.rj-bant.rj-kapanis { border-left-width: 2px; opacity: .92; }
.rj-bant.rj-kapanis .rj-ad { font-weight: 600; }
/* sag ustte kucuk bir capraz — "dokun, kapansin" */
.rj-kapat { position: absolute; top: 8px; right: 9px; width: 11px; height: 11px;
  opacity: .5; }
.rj-kapat::before, .rj-kapat::after { content: ''; position: absolute; left: 0; top: 5px;
  width: 11px; height: 1.5px; background: var(--rr, #e8c96a); }
.rj-kapat::before { transform: rotate(45deg); }
.rj-kapat::after { transform: rotate(-45deg); }

/* ---- VE BANDIN İŞARET ETTİĞİ İBRE ---------------------------------------
   PROTOKOL UYUMU hakkinda bir cumle, oyuncu protokol uyumunu bulamiyorsa
   hicbir sey demek degil. Rejim acikken kuralin konustugu alet kendi renginde
   bir halka takiyor; kapaninca cikariyor. Ibresi olmayan okumalar (halkin
   hali, doga) halka takmiyor -- bant yine de konusuyor. */
body.mapless #cmd-vitals .vt.rejimli .vt-ic {
  color: var(--rr, #e8c96a) !important;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rr,#e8c96a) 70%, transparent)) !important;
}
body.mapless #cmd-vitals .vt.rejimli::after {
  background: color-mix(in srgb, var(--rr, #e8c96a) 34%, transparent);
}
body.mapless #cmd-vitals .vt.rejimli::before {
  background: var(--rr, #e8c96a);
}
@media (prefers-reduced-motion: no-preference) {
  body.mapless #cmd-vitals .vt.rejimli .vt-ic { animation: rjNabiz 2.1s ease-in-out infinite; }
}
@keyframes rjNabiz {
  0%, 100% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rr,#e8c96a) 45%, transparent)); }
  50%      { filter: drop-shadow(0 0 11px color-mix(in srgb, var(--rr,#e8c96a) 90%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
  .rj-bant { animation: none; }
  .rj-cizgi { display: none; }
  .rj-bant .rj-ne, .rj-bant .rj-metin, .rj-bant.rj-sahne .rj-res { animation: none; }
}

/* ==== KİLİTLİ KAPI ÇİZİLMEZ (raporun 6. önerisi, 2026-09-06) ================
   SARAY 10., GALAKSİ 20. hükümde açılıyor. O ana kadar ikisi de tam
   parlaklıkta duruyor ve basınca yalnızca bir günlük satırı yazıyordu —
   oyuncunun okumadığı bir yerde. Bir oyuncunun ilk yirmi dakikada şeritten
   öğrendiği şey "bu tuşlar çalışmıyor" olmamalı. */
/* ---- KILITLI KAPI: SILINMEZ, KILITLENIR (b991) -----------------------------
   Bu satir once `display: none` idi ve sebebi vardi: tam parlaklikta cizilen
   kilitli bir tus, ilk yirmi dakikada oyuncuya "bu tuslar calismiyor"
   ogretiyordu. Ama silmek de bir sey ogretiyor, ve daha kotusunu: dort kapilik
   cercevede iki kapi durunca ekran BOZUK gorunuyor (sahibinin sozu: "bug gibi
   gorunuyor").
   Ucuncu hal: kapi yerinde duruyor, ikonu bir KILITLE degistiriliyor, tonu
   dusuruluyor ve dokunulabilir kaliyor -- dokunus ne zaman acilacagini
   soyluyor. Ne bos, ne sahte: "henuz degil". */
body.mapless #cmd-vitals .vt-doors [data-nav].kapi-kilitli { display: flex !important; }
/* Kilit artik gri ciziliyor (main.js), yani kendisi zaten geri planda. Kapinin
   tonunu o kadar kismaya gerek yok -- %34'te kilit de siliniyordu ve "bos"
   izlenimi geri geliyordu. Gorunur bir kilit, gorunmez bir kapidan iyidir. */
#cmd-vitals .vt-doors [data-nav].kapi-kilitli { opacity: .72; cursor: default; }
#cmd-vitals .vt-doors [data-nav].kapi-kilitli:hover { opacity: .88; }
/* Kilit gri cizildigi icin kapinin ayrica %30'a kisilmasina gerek yok --
   o kadar kisilinca kilit de siliniyor ve "bos" izlenimi geri geliyor.
   Gorunur bir kilit, gorunmez bir kapidan iyidir. */
body.mapless #cmd-vitals .vt-door.vt-kilit { opacity: .62 !important; filter: none; }

/* ---- IKI CERCEVE AYNI YUKSEKLIKTE (b994, olculdu) --------------------------
   Sol cerceve 50 piksel, sag cerceve 44 -- ikisinin dolgusu ve kenarligi ayni,
   farki ICERIK yaratiyordu: sol taraftaki ibrelerin altinda birer dolum cizgisi
   var, kapilarda yok. Yani yukseklik tasarlanmamis, olusmustu; iki plaka yan
   yana durunca da alt kenarlari tutmuyordu.
   Ikisi de artik acikca 50: dolu olan olcuyu veriyor, oteki ona uyuyor. */
body.mapless #cmd-vitals .vt-group,
body.mapless #cmd-vitals .vt-doors {
  height: 50px !important; box-sizing: border-box !important;
  align-self: center !important; }
/* kapinin kendi cizimi susar, yerine kilit gecer -- ikisi ust uste binmesin */
#cmd-vitals .vt-doors [data-nav].kapi-kilitli > svg { display: none; }
#cmd-vitals .vt-kilit-ic { display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; }
/* !important, ve sebebi durumun kendisi: bu dosyada kapi cizimlerini
   `width: 33px !important; fill: currentColor` ile sabitleyen dort ayri kural
   var. Asma kilit onlarin altinda kalirsa DOLU ve buyuk cizilir -- yani
   ekranda bir kilit degil, soluk bir leke gorunur (olculdu: hesaplanan
   genislik 30px, fill bir renk). Ayni silahla cevap veriliyor; alternatifi,
   kilidi bir svg olmaktan cikarmak olurdu. */
/* Olculer ve renk artik main.js'ten satir ici `!important` ile veriliyor --
   stil sayfasindan yazilan olcu bu dosyadaki dort kapi kuralini gecemedi
   (olculdu: istenen 18px, hesaplanan 30px kaldi). Burada yalnizca cizimin
   ic parcalari kaliyor. */
#cmd-vitals .vt-doors [data-nav].kapi-kilitli .vt-kilit-ic svg * {
  fill: none !important; }
/* açıldığı hükümde bir kez parlar: bir kapının belirmesi kendi başına olaydır */
@media (prefers-reduced-motion: no-preference) {
  body.mapless #cmd-vitals .vt-doors [data-nav].kapi-yeni { animation: kapiAcildi 2.4s ease-out both; }
}
@keyframes kapiAcildi {
  0%   { opacity: 0; transform: scale(.7); filter: drop-shadow(0 0 0 rgba(232,201,106,0)); }
  22%  { opacity: 1; transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(232,201,106,.95)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 rgba(232,201,106,0)); }
}

/* ==== BEŞİNCİ YUVA: GÖREV İBRESİ (raporun 3. önerisi, 2026-09-06) ===========
   Şerit dört sabit + bir dönen okuma taşıyor artık. ÖLÇÜLDÜ, 375px: sol plaka
   4..185 (181px), sağ plaka 190..371 (181px) — arada 4px boşluk var, yani
   beşinci işaret bugünkü ölçüsüyle (30px + 6.4 boşluk) TAŞAR. Beş işaret
   varken hepsi küçülüyor ve aralık daralıyor; dördü kalınca eski ölçüsüne
   dönüyor. Sayılar ölçülerek kondu, tahminle değil. */
body.mapless #cmd-vitals .vt-group:has(.vt:nth-child(5)) { gap: 3px; }
body.mapless #cmd-vitals .vt-group:has(.vt:nth-child(5)) .vt .vt-ic { width: 27px; height: 27px; }
body.mapless #cmd-vitals .vt-group:has(.vt:nth-child(5)) .vt .vt-ic > svg,
body.mapless #cmd-vitals .vt-group:has(.vt:nth-child(5)) .vt .vt-fill > svg { width: 27px; height: 27px; }

/* ===== ZAMAN GECIYOR: DONEN DUNYA, AKAN YILDIZ, GELISEN FIGUR (b970) =========
   Sahibi: "karakter yururken gercekten dunya donme tarzi animasyon islesin ve
   yildizlar vs kaysin gecsin, yani gercekten zaman ilerliyor hissi olsun."

   Uc katman, ucu de saf CSS ve ucu de prefers-reduced-motion'a saygili:
     zy-yildiz  iki farkli hizda kayan yildiz alani (paralaks)
     zy-dunya   ufkun altindaki disk; meridyenleri oldugu icin donusu okunur
     zy-gel     figurun her bes kartta bir binen yuku

   Yururken hepsi hizlanir, DURURKEN DURMAZ -- dunya komutan dinlenirken de
   doner, ve raporun ogrettigi ders: gizli sekmede gecisler ilerlemez, o yuzden
   burada gecis degil ANIMASYON var (animasyonlar da kisilir ama durum
   birakmazlar: bir animasyon yarida kalirsa katman gorunur kalir, kilitlenmez). */

#sefer.zy .zy-yildiz{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-repeat:repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(232,201,106,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 12%, rgba(232,201,106,.6) 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 84% 38%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 36% 58%, rgba(232,201,106,.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8% 72%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 78%, rgba(232,201,106,.4) 50%, transparent 51%);
  background-size:340px 260px, 340px 260px, 520px 400px, 520px 400px, 240px 190px, 240px 190px;
  animation:zyYildizUzak 190s linear infinite, zyYildizYakin 84s linear infinite;
}
#sefer.zy .zy-yildiz{ opacity:.66; }
@keyframes zyYildizUzak{ to{ background-position:-340px 0, -340px 0, 0 0, 0 0, 0 0, 0 0; } }
@keyframes zyYildizYakin{ to{ background-position:0 0, 0 0, -520px 0, -520px 0, -240px 0, -240px 0; } }
#sefer.zy.yolda .zy-yildiz{
  opacity:.78;
  animation-duration:46s, 19s;   /* yururken yildizlar hizlanir */
}

#sefer.zy .zy-dunya{
  /* OLCULDU (375x812): -108% ve %210 genislikle 580px'lik sahnede diskin
     yalnizca 106 pikseli goruniyordu -- yani bir gezegen degil, ince bir
     cizgi. Ust yayin gorunen payi ~190 piksele cikarildi ve opaklik
     yukseltildi; disk hala z-index 0'da, kadranin ve seridin arkasinda. */
  position:absolute; left:50%; bottom:-84%; width:196%; aspect-ratio:1;
  transform:translateX(-50%); z-index:0; pointer-events:none; opacity:.62;
  filter:drop-shadow(0 -10px 30px rgba(232,201,106,.18));
}
#sefer.zy .zy-dunya svg{ width:100%; height:100%; display:block; }
#sefer.zy .zy-dunya .zy-dg{
  transform-origin:50% 50%;
  animation:zyDunyaDon 240s linear infinite;
}
@keyframes zyDunyaDon{ to{ transform:rotate(360deg); } }
#sefer.zy.yolda .zy-dunya{ opacity:.86; }
#sefer.zy.yolda .zy-dunya .zy-dg{ animation-duration:52s; }
/* meridyenler donerken nefes alsin: donusun yonu boylece belli olur */
#sefer.zy .zy-dunya .zy-mer{ animation:zyMerNefes 9s ease-in-out infinite; }
@keyframes zyMerNefes{ 0%,100%{ opacity:.16 } 50%{ opacity:.3 } }

/* ---- figurun gelisimi: adim >= n olan her katman gorunur ------------------- */
#sefer.zy .zy-yuru .zy-gel > g{ display:none; }
#sefer.zy[data-adim="1"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="2"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="2"] .zy-yuru .zy-gel > g[data-e="2"],
#sefer.zy[data-adim="3"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="3"] .zy-yuru .zy-gel > g[data-e="2"],
#sefer.zy[data-adim="3"] .zy-yuru .zy-gel > g[data-e="3"],
#sefer.zy[data-adim="4"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="4"] .zy-yuru .zy-gel > g[data-e="2"],
#sefer.zy[data-adim="4"] .zy-yuru .zy-gel > g[data-e="3"],
#sefer.zy[data-adim="4"] .zy-yuru .zy-gel > g[data-e="4"],
#sefer.zy[data-adim="5"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="5"] .zy-yuru .zy-gel > g[data-e="2"],
#sefer.zy[data-adim="5"] .zy-yuru .zy-gel > g[data-e="3"],
#sefer.zy[data-adim="5"] .zy-yuru .zy-gel > g[data-e="4"],
#sefer.zy[data-adim="5"] .zy-yuru .zy-gel > g[data-e="5"],
#sefer.zy[data-adim="6"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="6"] .zy-yuru .zy-gel > g[data-e="2"],
#sefer.zy[data-adim="6"] .zy-yuru .zy-gel > g[data-e="3"],
#sefer.zy[data-adim="6"] .zy-yuru .zy-gel > g[data-e="4"],
#sefer.zy[data-adim="6"] .zy-yuru .zy-gel > g[data-e="5"],
#sefer.zy[data-adim="6"] .zy-yuru .zy-gel > g[data-e="6"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="1"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="2"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="3"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="4"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="5"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="6"],
#sefer.zy[data-adim="7"] .zy-yuru .zy-gel > g[data-e="7"],
#sefer.zy[data-adim="8"] .zy-yuru .zy-gel > g{ display:inline; }

/* ---- ve yol uzadikca figur eskir: kirk karttan sonra degisen sey bu -------- */
#sefer.zy .zy-yuru svg{
  filter:sepia(calc(var(--yipran, 0) * 1.1)) saturate(calc(1 - var(--yipran, 0) * .5))
         brightness(calc(1 - var(--yipran, 0) * .22));
}
/* yeni binen parca bir kez parlar: oyuncu degisikligi kacirmasin */
#sefer.zy .zy-yuru .zy-gel > g{ animation:zyGelGir .9s ease-out both; }
@keyframes zyGelGir{ 0%{ opacity:0; transform:translateY(-6px) } 60%{ opacity:1 } 100%{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  #sefer.zy .zy-yildiz, #sefer.zy .zy-dunya .zy-dg, #sefer.zy .zy-dunya .zy-mer,
  #sefer.zy.yolda .zy-yildiz, #sefer.zy.yolda .zy-dunya .zy-dg,
  #sefer.zy .zy-yuru .zy-gel > g{ animation:none; }
  #sefer.zy .zy-yuru .zy-gel > g{ opacity:1; transform:none; }
}

/* ===== ESIK ALARMI (esik.js · b972) =========================================
   Sahibi: "ekrana alarm tarzi bir uyari, ve dusuk cikan alanin ikonu
   parlayarak ... bu sayede oyuncu sunu bilmeli: ben rastgele karar
   vermemeliyim, verdigim karar bir cok seyi etkiliyor."

   Rejim bandi ayni yuvayi kullanir ama alarm ondan AYRILMALI, yoksa oyuncu
   ikisini ayni sey saymayi ogrenir ve ikisi de gurultu olur. Uc fark:
   kirmizi kenar, tarama cizgisi, ve daha uzun durus (12 sn -- uc cumle dokuz
   saniyede okunmuyor; okunmayan bir uyari hic verilmemis demektir). */
.rj-bant.rj-alarm{
  border-color:color-mix(in srgb, var(--rr,#c76b45) 88%, transparent);
  border-left-width:4px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--rr,#c76b45) 22%, rgba(10,6,4,.96)), rgba(10,6,4,.97));
  box-shadow:0 12px 34px -10px rgba(0,0,0,.92),
             0 0 0 1px color-mix(in srgb, var(--rr,#c76b45) 30%, transparent),
             0 0 26px -6px color-mix(in srgb, var(--rr,#c76b45) 40%, transparent);
  /* alarm da ayni muhur seridiyle acilir (b1025); nabiz acilis bitince baslar */
  animation:rjAcil .9s .56s cubic-bezier(.24,.74,.22,1) both,
            esikNabiz 1.5s 1.5s ease-in-out 3;
}
@keyframes esikNabiz{
  0%,100%{ box-shadow:0 12px 34px -10px rgba(0,0,0,.92),
                      0 0 0 1px color-mix(in srgb, var(--rr,#c76b45) 30%, transparent),
                      0 0 26px -6px color-mix(in srgb, var(--rr,#c76b45) 40%, transparent) }
  50%    { box-shadow:0 12px 34px -10px rgba(0,0,0,.92),
                      0 0 0 1px color-mix(in srgb, var(--rr,#c76b45) 62%, transparent),
                      0 0 40px -2px color-mix(in srgb, var(--rr,#c76b45) 72%, transparent) }
}
/* tarama cizgisi: konsolun kendi dili, bir uyarinin makineden geldigini soyler */
.rj-bant.rj-alarm::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--rr,#c76b45) 92%, transparent), transparent);
  animation:esikTara 2.4s linear infinite;
}
@keyframes esikTara{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }
.rj-bant.rj-alarm .rj-ad{ font-weight:700; letter-spacing:.22em; }
.rj-bant.rj-alarm .rj-ad::before{ content: '⚠︎  '; }
.rj-bant.rj-alarm .rj-metin{ color:var(--t-hi, #e8dcc4); }

/* ---- VE DUSUK CIKAN ALANIN IKONU PARLAR --------------------------------
   Rejim halkasi surekli yanar ("bu hal suruyor"); bu TEK SEFERLIK bir
   patlamadir ("su anda bir sey oldu"). 2.6 saniye, cunku gozun banttan
   ibreye gitmesi gerekiyor -- cumle ile aleti birbirine baglayan sey bu. */
body.mapless #cmd-vitals .vt.esik-parla .vt-ic{
  color:var(--er,#c76b45) !important;
  animation:esikParla 2.6s cubic-bezier(.2,.8,.3,1) 1;
}
body.mapless #cmd-vitals .vt.esik-parla::after{
  background:color-mix(in srgb, var(--er,#c76b45) 55%, transparent);
}
@keyframes esikParla{
  0%   { filter:drop-shadow(0 0 0 transparent); transform:scale(1) }
  10%  { filter:drop-shadow(0 0 20px var(--er,#c76b45)); transform:scale(1.34) }
  26%  { filter:drop-shadow(0 0 7px var(--er,#c76b45));  transform:scale(1) }
  42%  { filter:drop-shadow(0 0 20px var(--er,#c76b45)); transform:scale(1.26) }
  58%  { filter:drop-shadow(0 0 7px var(--er,#c76b45));  transform:scale(1) }
  74%  { filter:drop-shadow(0 0 16px var(--er,#c76b45)); transform:scale(1.16) }
  100% { filter:drop-shadow(0 0 5px color-mix(in srgb,var(--er,#c76b45) 55%,transparent)); transform:scale(1) }
}
@media (prefers-reduced-motion: reduce){
  .rj-bant.rj-alarm{ animation:none }
  .rj-bant.rj-alarm::before{ animation:none; opacity:.8 }
  body.mapless #cmd-vitals .vt.esik-parla .vt-ic{
    animation:none; filter:drop-shadow(0 0 9px var(--er,#c76b45)) !important; }
}


/* ============================================================================
   KİL TABLET KARTI (sahibi, 2026-09-15: oyun kartı → "kil tablet güzel görünüyor";
   butonlar "kile oyulmuş", dar ve az padding'li — seçim kaydırmayla olacak).
   Tasarım kanvası: claude.ai/artifact/1dqBjwDjm3hKVnCuQpogn6 ("Son tasarım").
   İkilem sayfası telefonda pişmiş kil tablet: krem gövde, çift çerçeve, üst-alt
   bantta rozet–çivi dizisi, yanlarda çivi dizisi, dört köşede palmet (bunlar
   main.js kaydirmaKur ile #decision'a eklenen .dc-susleme şeritleri), kemerli
   pencerede büyük portre + lapis kakma halka, altında replik, kanatlı güneş +
   başlık, giriş metni, ayakta kile gömük hap seçenekler (← üstteki, → alttaki,
   ↓ üçüncü). body.kartli main.js'te açılır; ?kart=0 eski görünüm.
   Renkler --kt-*: Annunaki krem/altın/lapis; Kovan (body[data-kart-irk=insectoid]) lila/mor.
   ========================================================================== */
.dc-indeks, .dc-susleme { display: none; }
body.kartli { --kt-pale: #f3e6c6; --kt-mid: #e6d3a6; --kt-dark: #d9c290; --kt-ink: #3a2c12;
  --kt-ink2: #5a4a28; --kt-deep: #8c6a1e; --kt-title: #5a4210; --kt-lapis: #1d3a6e; --kt-gold: #c5a059; }
body.kartli[data-kart-irk="insectoid"] { --kt-pale: #ece2f4; --kt-mid: #d9c8ea; --kt-dark: #c7b0de; --kt-ink: #2a1840;
  --kt-ink2: #4a3a60; --kt-deep: #6a3f88; --kt-title: #4a2a6a; --kt-lapis: #2a1f3d; --kt-gold: #c78ae8; }
@media (max-width: 620px) {
  body.kartli .decision { padding: 8px 8px 10px; }
  body.kartli .dc-indeks, body.kartli .dc-susleme { display: block; }
  body.kartli .dc-box {
    border: 0; border-radius: 22px 22px 26px 26px / 22px 22px 30px 30px;
    background: linear-gradient(160deg, var(--kt-pale), var(--kt-mid) 55%, var(--kt-dark));
    box-shadow: inset 0 0 0 1px rgba(140,106,30,.5), inset 0 0 40px rgba(140,106,30,.25), 0 24px 50px rgba(0,0,0,.75);
    outline: 1px solid rgba(140,106,30,.55); outline-offset: -9px;
    padding: 26px 14px 12px; touch-action: pan-y; will-change: transform;
    transition: transform .28s cubic-bezier(.2,.9,.3,1); }
  body.kartli .dc-box.kayiyor { transition: none; }
  body.kartli .dc-box.uc-sik { touch-action: none; }
  /* süslemeler #decision'a bağlı: kartla kaymaz ama kutunun kenarına oturur */
  body.kartli .dc-susleme { position: absolute; z-index: 46; pointer-events: none; }
  body.kartli .dc-susleme.ust { top: 17px; left: 150px; right: 64px; height: 12px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2014%27%3E%3Cg%20transform%3D%27translate%281%201%29%20scale%28.6%29%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%272.2%27%20fill%3D%27%23c5a059%27%2F%3E%3Cpath%20d%3D%27M10%201.5l1.8%205.2L10%209l-1.8-2.3zM10%2018.5l-1.8-5.2L10%2011l1.8%202.3zM1.5%2010l5.2-1.8L9%2010l-2.3%201.8zM18.5%2010l-5.2%201.8L11%2010l2.3-1.8zM4%204l4.9%202.4.5%202.6-2.6-.5zM16%2016l-4.9-2.4-.5-2.6%202.6.5zM16%204l-2.4%204.9-2.6.5.5-2.6zM4%2016l2.4-4.9%202.6-.5-.5%202.6z%27%20fill%3D%27%23c5a059%27%20stroke%3D%27%238c6a1e%27%20stroke-width%3D%27.4%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2819%201%29%20scale%28.6%29%27%3E%3Cpath%20d%3D%27M4%205l7%203.5L4%2012z%27%20fill%3D%27%238c6a1e%27%2F%3E%3Cpath%20d%3D%27M12%208l5%202-5%202z%27%20fill%3D%27%238c6a1e%27%20opacity%3D%27.7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left center / 36px 14px repeat-x; }
  body.kartli .dc-susleme.alt { bottom: 18px; left: 64px; right: 64px; height: 12px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2014%27%3E%3Cg%20transform%3D%27translate%281%201%29%20scale%28.6%29%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%272.2%27%20fill%3D%27%23c5a059%27%2F%3E%3Cpath%20d%3D%27M10%201.5l1.8%205.2L10%209l-1.8-2.3zM10%2018.5l-1.8-5.2L10%2011l1.8%202.3zM1.5%2010l5.2-1.8L9%2010l-2.3%201.8zM18.5%2010l-5.2%201.8L11%2010l2.3-1.8zM4%204l4.9%202.4.5%202.6-2.6-.5zM16%2016l-4.9-2.4-.5-2.6%202.6.5zM16%204l-2.4%204.9-2.6.5.5-2.6zM4%2016l2.4-4.9%202.6-.5-.5%202.6z%27%20fill%3D%27%23c5a059%27%20stroke%3D%27%238c6a1e%27%20stroke-width%3D%27.4%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2819%201%29%20scale%28.6%29%27%3E%3Cpath%20d%3D%27M4%205l7%203.5L4%2012z%27%20fill%3D%27%238c6a1e%27%2F%3E%3Cpath%20d%3D%27M12%208l5%202-5%202z%27%20fill%3D%27%238c6a1e%27%20opacity%3D%27.7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left center / 36px 14px repeat-x; }
  body.kartli .dc-susleme.sol { top: 120px; bottom: 120px; left: 10px; width: 8px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2040%27%3E%3Cg%20transform%3D%27scale%28.6%29%27%3E%3Cpath%20d%3D%27M4%205l7%203.5L4%2012z%27%20fill%3D%27%238c6a1e%27%2F%3E%3Cpath%20d%3D%27M12%208l5%202-5%202z%27%20fill%3D%27%238c6a1e%27%20opacity%3D%27.7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left / 8px 40px repeat-y; }
  body.kartli .dc-susleme.sag { top: 120px; bottom: 120px; right: 10px; width: 8px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2040%27%3E%3Cg%20transform%3D%27scale%28.6%29%27%3E%3Cpath%20d%3D%27M4%205l7%203.5L4%2012z%27%20fill%3D%27%238c6a1e%27%2F%3E%3Cpath%20d%3D%27M12%208l5%202-5%202z%27%20fill%3D%27%238c6a1e%27%20opacity%3D%27.7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left / 8px 40px repeat-y; transform: scaleX(-1); }
  body.kartli .dc-susleme.k1, body.kartli .dc-susleme.k2, body.kartli .dc-susleme.k3, body.kartli .dc-susleme.k4 {
    width: 36px; height: 36px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M6%2034C8%2022%2014%2014%2024%208M6%2034c4-8%2010-14%2020-18M6%2034c2-4%206-8%2012-10%27%20stroke%3D%27%238c6a1e%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M24%208c2%202%202%205%200%207-2-2-2-5%200-7zM26%2016c2%201%203%204%202%206-2-1-3-4-2-6zM18%2024c2%200%204%202%204%204-2%200-4-2-4-4z%27%20fill%3D%27%23c5a059%27%20stroke%3D%27%238c6a1e%27%20stroke-width%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2734%27%20r%3D%272.5%27%20fill%3D%27%23c5a059%27%20stroke%3D%27%238c6a1e%27%20stroke-width%3D%27.5%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
  body.kartli .dc-susleme.k1 { top: 16px; left: 16px; }
  body.kartli .dc-susleme.k2 { top: 16px; right: 16px; transform: scaleX(-1); }
  body.kartli .dc-susleme.k3 { bottom: 18px; left: 16px; transform: scaleY(-1); }
  body.kartli .dc-susleme.k4 { bottom: 18px; right: 16px; transform: scale(-1); }
  body.kartli .dc-indeks { position: absolute; z-index: 46; pointer-events: none; font-family: var(--font);
    font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1; color: var(--kt-deep); }
  body.kartli .dc-indeks.ust { top: 19px; left: 60px; }
  body.kartli .dc-indeks.alt { display: none; }
  body.kartli .dc-box .dc-eye { display: none; }

  /* KEMERLİ PENCERE: portre sahnenin üst %66'sı, altında replik (balon) */
  body.kartli .dc-scene, body.kartli #dc-scene, body.kartli #dc-art { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  body.mapless.kartli .dc-scene.on { height: clamp(220px, 54dvh, 620px) !important; }
  body.kartli #dc-art:has(> img.dk-portre) > img.dk-portre {
    top: 3% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    height: 58% !important; width: auto !important; aspect-ratio: 5 / 6; max-width: 92%;
    transform: translateX(-50%) !important; object-position: center 15% !important;
    border-radius: 50% 50% 12px 12px / 46% 46% 12px 12px;
    box-shadow: 0 0 0 2px #0e0c07, 0 0 0 5px var(--kt-gold), 0 0 0 8px var(--kt-pale), 0 0 0 9px var(--kt-deep), 0 12px 30px rgba(0,0,0,.35);
    outline: 2px dotted var(--kt-deep); outline-offset: 5px; }
  body.kartli #dc-art.balonlu:has(> img.dk-portre)::after { display: none; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik { top: 69%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: 92%; padding: 0 6px; background: none; text-align: center; }
  /* yer satırının başında konum iğnesi: 'kuyu ağzında' bir yer adı, ikon bunu söyler */
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik i::before { content: ''; display: inline-block; width: 11px; height: 11px; margin: 0 4px -1px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c6a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik i { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik b { font-size: 11px; letter-spacing: .24em; color: var(--kt-title); text-shadow: none; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik i { font-size: 10px; margin-top: 1px; color: var(--kt-ink2); opacity: 1; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik s { display: none; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { left: 8px; right: 8px; top: 81%; bottom: 0;
    background: none; border: 0; box-shadow: none; padding: 0 4px; overflow: hidden; animation: none; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-bt { font-family: var(--read); font-style: italic;
    font-size: 13.5px; line-height: 1.45; text-align: center; color: var(--kt-ink); }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-kuyruk { display: none; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-bt.db-yaziliyor::after { color: var(--kt-deep); }

  /* kanatlı güneş + başlık, altında giriş metni */
  body.kartli .dc-box h2 { margin: 2px 0 0; padding: 0 30px; text-align: center; background: none; border: 0;
    font-size: 15px; font-weight: 700; letter-spacing: .26em; color: var(--kt-title); }
  body.kartli .dc-box h2::before { content: ''; display: block; width: 180px; height: 30px; margin: 0 auto 2px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20180%2030%27%20fill%3D%27none%27%20stroke%3D%27%238c6a1e%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2712%27%20r%3D%276%27%20fill%3D%27%23c5a059%27%2F%3E%3Cpath%20d%3D%27M84%2012H50l-6%204%2010-2-8%205%2012-3-6%206%2012-5%27%20fill%3D%27%23e6d3a6%27%2F%3E%3Cpath%20d%3D%27M96%2012h34l6%204-10-2%208%205-12-3%206%206-12-5%27%20fill%3D%27%23e6d3a6%27%2F%3E%3Cpath%20d%3D%27M78%2012H30M102%2012h48%27%20stroke-dasharray%3D%273%203%27%2F%3E%3Cpath%20d%3D%27M86%2018l-3%209M94%2018l3%209M90%2018v11%27%20stroke-width%3D%27.9%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
  body.kartli .dc-box #dc-ctx { margin: 6px 14px 0; padding-bottom: 0; text-align: center; font-size: 10px; line-height: 1.4; color: var(--kt-deep); border: 0; }
  body.kartli .dc-box #dc-cause { margin: 6px 14px 2px !important; text-align: center; color: var(--kt-deep); opacity: 1; }
  body.kartli .dc-box #dc-text { text-align: center; font-style: normal; border-left: 0; padding-left: 0;
    margin: 6px 12px 6px; font-size: 12.5px; line-height: 1.5; color: var(--kt-ink2); scrollbar-width: none; }
  body.kartli .dc-box #dc-text::-webkit-scrollbar { display: none; }
  /* önceki hükmün alıntısı: kremin üstünde altın okunmuyor; koyu mürekkep, noktalı ayraç (sahibi, 2026-09-15) */
  body.kartli .dc-box #dc-text .dc-hukum { color: var(--kt-title); opacity: 1; font-style: italic; border-left: 0;
    padding: 0 0 6px; margin: 0 0 8px; border-bottom: 1px dotted var(--kt-deep); }

  /* AYAK: kile gömük hap seçenekler — dar, az padding; seçim kaydırmayla */
  body.kartli #dc-options { gap: 8px; padding: 0 0 8px; align-items: center; }
  body.kartli #dc-options .dc-opt { width: 90%; margin: 0 auto; min-height: 40px !important; padding: 6px 14px !important;
    border-radius: 999px !important; border: 0; clip-path: none; display: flex; flex-direction: row; align-items: center; gap: 10px;
    background: linear-gradient(180deg, var(--kt-dark), var(--kt-mid)); color: var(--kt-ink); transform: none;
    box-shadow: inset 0 3px 6px rgba(90,66,16,.45), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.6); }
  body.kartli #dc-options .dc-opt:hover { transform: none; }
  body.kartli #dc-options .dc-opt .dc-label { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--kt-ink); }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(1)::before,
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(2)::before,
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(3):nth-last-child(1)::before {
    content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--kt-gold) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233a2c12%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2012H5%27%2F%3E%3Cpath%20d%3D%27M11%206l-6%206%206%206%27%2F%3E%3C%2Fsvg%3E") center / 13px no-repeat;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 1px 2px rgba(90,66,16,.5); }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(2) { flex-direction: row-reverse; }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(2) .dc-label { text-align: right; }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(2)::before { transform: scaleX(-1); }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(3):nth-last-child(1) { justify-content: center; }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(3):nth-last-child(1) .dc-label { flex: 0 1 auto; text-align: center; }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(3):nth-last-child(1)::before { transform: rotate(-90deg); }
  /* kurulu plaka yalnız altın halka alır; BASILI TUT şeridi ve bedel yazısı yok (sahibi, 2026-09-15) */
  body.kartli #dc-options .dc-opt.armed { padding-bottom: 6px !important; min-height: 40px !important;
    align-items: center !important; box-shadow: inset 0 3px 6px rgba(90,66,16,.45), 0 0 0 2px var(--kt-gold); }
  body.kartli #dc-options .dc-opt::after { display: none !important; }
  body.kartli #dc-options .dc-opt.armed .dc-label, body.kartli #dc-options .dc-opt.sealed .dc-label { color: var(--kt-ink); }
  body.kartli #dc-why { top: 6px !important; bottom: auto !important; right: auto !important; left: 8px !important; }
  body.kartli #dc-options .dc-opt.sealed-ok { box-shadow: inset 0 3px 6px rgba(90,66,16,.45), 0 0 0 2px #5a9e6b; }
  body.kartli #dc-options .dc-opt.sealed-fail { box-shadow: inset 0 3px 6px rgba(90,66,16,.45), 0 0 0 2px #b05a4a; }
  /* mühürlenen şık, plakanın altındaki boşluğun tam ortasında */
  body.kartli .dc-box.muhurlu .dc-scene.on { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; }
  /* mühürden sonra: dip şeridi ve karanlık zemin yok, plaka blur'u yok; şık kremin üstünde ortada */
  body.kartli .dc-box.muhurlu #dc-options { position: static !important; margin: auto 0 !important; padding: 0 0 8px !important; background: none !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt { opacity: 1; }
  body.kartli .yk-arka { display: none !important; }
  body.kartli #dc-scene.yk-acik { overflow: hidden; }
  /* MÜHÜR SONRASI — sahibinin telefonu, 2026-09-16 ("bu sence olmuş mu?" → hayır):
     plaka tabletin kenar işlemelerini kapatıyor, mühürlü hap resmin üstüne binip
     okunmuyor, ad plakası alttaki süs bandına taşıyordu. Kartlı kipte sahne
     mutlak (inset:0) değil AKIŞTA: plaka kremin içinde altın çerçeveli, ad
     plakası hemen altında mürekkeple, hap kalan boşluğun ortasında. */
  body.kartli .dc-box.muhurlu .dc-scene.on { position: relative !important; inset: auto !important; z-index: auto !important;
    display: block !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
    margin: 0 !important; padding: 6px 0 0 !important; overflow: visible !important; }
  body.kartli .dc-box.muhurlu #dc-scene.yk-acik { overflow: visible !important; }
  body.kartli .dc-box.muhurlu #dc-scene.yk-acik > #dc-art,
  body.kartli .dc-box.muhurlu #dc-scene.yk-acik > #dc-art:has(.yk-plate) { position: relative; display: block !important;
    width: calc(100% - 36px) !important; height: auto !important; max-height: none !important; margin: 42px auto 0 !important;
    align-items: initial !important; justify-content: initial !important; }
  /* "?" ve bedel satırı mühürden sonra susar; köşe düğmeleri plakanın üstüne binmesin diye plaka 42px aşağıdan başlar */
  body.kartli .dc-box.muhurlu #dc-why, body.kartli .dc-box.muhurlu #dc-cause { display: none !important; }
  body.kartli .dc-box.muhurlu #dc-scene .yk-arka, body.kartli .dc-box.muhurlu #dc-art .ce-arka { display: none !important; }
  body.kartli .dc-box.muhurlu #dc-scene img.yk-foto,
  body.kartli .dc-box.muhurlu #dc-scene .yk-plate { position: static !important; display: block !important; width: 100% !important;
    height: auto !important; max-height: 50dvh !important; object-fit: contain !important; object-position: 50% 50% !important;
    margin: 0 auto !important; animation: none !important; transform: none !important; border-radius: 12px;
    box-shadow: 0 0 0 2px #0e0c07, 0 0 0 5px var(--kt-gold), 0 0 0 8px var(--kt-pale), 0 0 0 9px var(--kt-deep);
    outline: 2px dotted var(--kt-deep); outline-offset: 5px; }
  body.kartli .dc-box.muhurlu #dc-art .ce-on { display: block; width: 100%; }
  body.kartli .dc-box.muhurlu #dc-art .ce-on > svg.yk-plate { aspect-ratio: 8 / 3; }
  body.kartli .dc-box.muhurlu #dc-kimlik { position: static !important; background: none !important; padding: 18px 10px 0 !important;
    text-align: center; pointer-events: none; }
  body.kartli .dc-box.muhurlu #dc-kimlik b { font-size: 11px; letter-spacing: .24em; color: var(--kt-title); text-shadow: none; }
  body.kartli .dc-box.muhurlu #dc-kimlik i { font-size: 10px; color: var(--kt-ink2); opacity: 1; white-space: normal; line-height: 1.25; margin-top: 2px; }
  body.kartli .dc-box.muhurlu #dc-kimlik i::before { content: ''; display: inline-block; width: 11px; height: 11px; margin: 0 4px -1px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c6a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.kartli .dc-box.muhurlu #dc-kimlik s { font-size: 9px; letter-spacing: .22em; color: var(--kt-deep); margin-top: 3px; }
  body.kartli .dc-box.muhurlu #dc-options { position: static !important; margin: auto 0 !important; padding: 10px 0 8px !important; background: none !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt { position: relative; z-index: 2; opacity: 1; }
  /* B · FERMAN — mühürlenen şık parşömen olur (sahibi, 2026-09-16, tuvalden 'B olsun').
     ::before üst satır + kanatlı güneş, .dc-label tırnaklı hüküm, ::after yıl/çağ/huzur satırı
     ve sağda balmumu mühür; .dc-odds köşede mürekkep damgası (hi yeşil, bad kırmızı, ok altın). */
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed { display: block; width: 88%; min-height: 0 !important;
    padding: 12px 16px 14px !important; border-radius: 3px !important; border: 1px solid #c9b07a !important;
    background: linear-gradient(180deg, #f8eed6, #efe0bd) !important; color: var(--kt-ink); text-align: center; transform: rotate(-1.5deg);
    box-shadow: 0 8px 16px rgba(60,40,10,.28), inset 0 0 34px rgba(140,106,30,.14);
    clip-path: polygon(0 2.5%, 2.5% 0, 97% 1%, 100% 3.5%, 99.2% 97%, 96.5% 100%, 3.5% 99%, 0 96%); overflow: visible; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed::before { content: attr(data-ferman-ust); display: block; width: auto; height: auto;
    border-radius: 0; box-shadow: none; transform: none; margin: 0 auto; padding: 0 0 24px; font-size: 9px; font-weight: 700;
    letter-spacing: .28em; color: var(--kt-deep);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-36 -12 72 30'%3E%3Cg fill='none' stroke='%238c6a1e' stroke-width='2.2' stroke-linejoin='round'%3E%3Ccircle r='5' fill='%238c6a1e'/%3E%3Cpath d='M-6 0h-16l-6 4 10-2-8 5 12-3-6 6 12-5'/%3E%3Cpath d='M6 0h16l6 4-10-2 8 5-12-3 6 6-12-5'/%3E%3Cpath d='M-3 6l-3 8M3 6l3 8M0 6v10' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") center bottom / 60px 22px no-repeat; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-label { display: block; margin: 6px 0 0; font-size: 14.5px; font-weight: 600;
    font-style: italic; color: var(--kt-ink); text-align: center; line-height: 1.35; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-label::before { content: '“'; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-label::after { content: '”'; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed::after { content: attr(data-ferman-alt); display: block !important; position: static;
    margin: 10px 0 0; padding: 10px 78px 0 4px; min-height: 56px; box-sizing: border-box; border-top: 1px dotted var(--kt-deep);
    text-align: left; white-space: pre-line; font-size: 8.5px; letter-spacing: .16em; line-height: 1.7; color: var(--kt-deep); opacity: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 84'%3E%3Cdefs%3E%3CradialGradient id='m' cx='40%25' cy='35%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23c8503a'/%3E%3Cstop offset='.7' stop-color='%238f2f22'/%3E%3Cstop offset='1' stop-color='%235e1a10'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M30 0h6v46h-6zM38 0h6v46h-6z' fill='%238f2f22'/%3E%3Cpath d='M30 40l-6 44 12-8zM44 40l6 44-12-8z' fill='%237d2416'/%3E%3Ccircle cx='37' cy='52' r='27' fill='url(%23m)'/%3E%3Ccircle cx='37' cy='52' r='21' fill='none' stroke='%235e1a10' stroke-width='1.6'/%3E%3Ccircle cx='37' cy='52' r='17' fill='none' stroke='%235e1a10' stroke-width='.8' stroke-dasharray='2 2'/%3E%3Cg transform='translate(37 50) scale(.62)'%3E%3Cg fill='none' stroke='%234a130b' stroke-width='2.2' stroke-linejoin='round'%3E%3Ccircle r='5' fill='%234a130b'/%3E%3Cpath d='M-6 0h-16l-6 4 10-2-8 5 12-3-6 6 12-5'/%3E%3Cpath d='M6 0h16l6 4-10-2 8 5-12-3 6 6-12-5'/%3E%3Cpath d='M-3 6l-3 8M3 6l3 8M0 6v10' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3Cellipse cx='27' cy='38' rx='7' ry='4' fill='rgba(255,255,255,.22)' transform='rotate(-30 27 38)'/%3E%3C/svg%3E") right 2px top 4px / 62px 72px no-repeat; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-odds { position: absolute !important; display: inline-block !important; text-decoration: none !important;
    left: 12px !important; right: auto !important; top: 8px !important; bottom: auto !important; margin: 0 !important;
    padding: 3px 9px; border: 2px solid currentColor; border-radius: 4px; background: rgba(243,230,198,.7); transform: rotate(-12deg);
    font-size: 9px !important; font-weight: 700; letter-spacing: .22em; opacity: 1 !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-odds .dc-cent { display: none; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-odds.hi { color: #4f8a5c !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-odds.bad { color: #b05a4a !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-odds.ok { color: var(--kt-deep) !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed-ok, body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed-fail {
    box-shadow: 0 8px 16px rgba(60,40,10,.28), inset 0 0 34px rgba(140,106,30,.14); }
  /* SIĞMAMA (sahibinin telefonu, 2026-09-16: "genel bir sığmama problemi var"):
     1) canlı kart — sahne yüzde konumlarından AKIŞA alındı: #dc-art display:contents ile portre ve
        replik doğrudan sahnenin flex çocukları olur; sıra portre · ad plakası · replik. Balon yer
        satırına binmez, sahneden taşmaz; sahne içeriği kadar uzar.
     2) mühürlü kart — kutu ekran boyu, plaka KALAN alana sığar (flex:1 + min-height:0), ad plakası
        ve ferman her telefonda görünür; alt süs bandına gömülme yok. */
  body.mapless.kartli .dc-scene.on:has(img.dk-portre) { height: auto !important; min-height: 0 !important; max-height: none !important;
    flex: 0 0 auto !important; display: flex !important; flex-direction: column; align-items: center; overflow: visible !important; padding: 6px 0 0 !important; }
  body.kartli #dc-scene:has(img.dk-portre) > #dc-art { display: contents !important; }
  body.kartli #dc-art:has(> img.dk-portre) > img.dk-portre { position: static !important; inset: auto !important; order: 0; display: block; flex: none;
    height: clamp(140px, 28dvh, 300px) !important; width: auto !important; max-width: 84% !important; aspect-ratio: 5 / 6;
    margin: 12px auto 0 !important; transform: none !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik { position: static !important; order: 1; flex: none; transform: none !important;
    width: 92% !important; margin: 18px auto 0 !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { position: static !important; order: 2; flex: none; width: 92%; margin: 8px auto 0 !important;
    overflow: visible !important; z-index: auto; }
  body.kartli .dc-box.muhurlu { display: flex !important; flex-direction: column !important;
    height: calc(100dvh - var(--deck-top, 47px) - 12px) !important; max-height: none !important; overflow: hidden !important; }
  body.kartli .dc-box.muhurlu .dc-scene.on { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; }
  body.kartli .dc-box.muhurlu #dc-scene.yk-acik > #dc-art, body.kartli .dc-box.muhurlu #dc-scene.yk-acik > #dc-art:has(.yk-plate) {
    flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column;
    align-items: center !important; justify-content: center !important; width: 100% !important; margin: 32px 0 0 !important;
    padding: 10px 20px; box-sizing: border-box; }
  body.kartli .dc-box.muhurlu #dc-scene img.yk-foto, body.kartli .dc-box.muhurlu #dc-scene .yk-plate {
    width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; }
  body.kartli .dc-box.muhurlu #dc-art .ce-on { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  body.kartli .dc-box.muhurlu #dc-art .ce-on > svg.yk-plate { width: 100% !important; height: auto !important; max-height: 100% !important; }
  body.kartli .dc-box.muhurlu #dc-kimlik { flex: none; padding: 10px 10px 0 !important; }
  body.kartli .dc-box.muhurlu #dc-options { flex: none; margin: 12px 0 4px !important; }
  /* kısa telefon (375×650): aralıklar sıkı, kutunun altında süs bandı payı — son şık bandın altında kalmaz */
  body.kartli #dc-art:has(> img.dk-portre) > img.dk-portre { height: clamp(140px, 26dvh, 300px) !important; margin-top: 8px !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik { margin-top: 12px !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { margin-top: 4px !important; }
  body.kartli .dc-box h2::before { height: 22px; margin-bottom: 0; }
  body.kartli .dc-box h2 { font-size: 14px; }
  body.kartli .dc-box #dc-text { margin: 4px 12px 4px; }
  body.kartli #dc-options { gap: 6px; }
  body.kartli .dc-box:not(.muhurlu) { padding-bottom: 30px !important; }
  /* SOL PORTRE · ÜSTTE AD · SAĞDA BALON (sahibi, 2026-09-16: "portreyi sola al, yer ve kişi adını portrenin
     üstünde yaz, ne dediğini sağda konuşma balonu olarak göster, yerden kazan"). Sahne ızgara: üst satır ad
     plakası (iki sütun), alt satır portre | balon. #dc-art display:contents olduğu için img ve balon doğrudan
     ızgara hücresi. Balon parşömen renginde, kuyruğu portreye bakar. */
  body.mapless.kartli .dc-scene.on:has(img.dk-portre) { display: grid !important; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "kim kim" "img balon"; column-gap: 14px; row-gap: 0; align-items: start; padding: 2px 8px 0 16px !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik { grid-area: kim; width: auto !important; margin: 0 0 10px !important; text-align: center; }
  body.kartli #dc-art:has(> img.dk-portre) > img.dk-portre { grid-area: img; justify-self: start; height: clamp(118px, 22dvh, 200px) !important;
    max-width: none !important; margin: 10px 0 8px !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { grid-area: balon; align-self: start; width: auto !important; margin: 10px 2px 0 0 !important;
    position: relative !important; padding: 9px 11px !important; overflow: visible !important;
    background: linear-gradient(180deg, #f8eed6, #efe0bd) !important; border: 1px solid var(--kt-deep) !important; border-radius: 12px !important;
    box-shadow: 0 2px 0 rgba(140,106,30,.35), 0 6px 14px rgba(60,40,10,.15) !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-bt { font-size: 12.5px; line-height: 1.4; text-align: left; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-kuyruk { display: block; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px;
    transform: rotate(45deg); background: #f8eed6; border: 0; border-left: 1px solid var(--kt-deep); border-bottom: 1px solid var(--kt-deep); }

  /* FERMAN YALNIZ HÜKMÜ YAZAR (sahibi, 2026-09-16: "yıl 81 neolitik ocak başısı vs yazmasın, yankı resmini büyüt").
     ::before yalnız kanatlı güneş, ::after yalnız balmumu mühür; damga sağ üstte. Kağıt ~80px, kalan yer plakaya. */
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed { padding: 12px 76px 12px 16px !important; text-align: left; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed::before { content: ''; width: 56px; height: 18px; padding: 0; margin: 0 0 4px;
    background-position: left center; background-size: 54px 18px; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-label { text-align: left; margin: 2px 0 0; font-size: 14px; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed::after { content: '' !important; position: absolute !important; right: 12px; top: 50%;
    transform: translateY(-50%); width: 50px; height: 58px; min-height: 0; margin: 0; padding: 0; border: 0;
    background-position: center; background-size: contain; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-odds { left: auto !important; right: 68px !important; top: 8px !important; transform: rotate(-8deg); }

  /* KAYDIRMA İŞARETLERİ KART GİBİ (sahibi, 2026-09-16: "oklar kafa karıştırıcı"): « kart · kart » · kart ⌄, hafif salınır */
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(1)::before,
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(2)::before,
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(3):nth-last-child(1)::before { border-radius: 0; box-shadow: none; width: 34px; height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M9 6l-4 5 4 5M15 6l-4 5 4 5' stroke='%238c6a1e' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='19' y='3' width='11' height='16' rx='2' fill='%23f3e6c6' stroke='%233a2c12' stroke-width='1.6'/%3E%3Cpath d='M22 8h5M22 11h5M22 14h3' stroke='%233a2c12' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: none; animation: kaydirSol 1.7s ease-in-out infinite; }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M25 6l4 5-4 5M19 6l4 5-4 5' stroke='%238c6a1e' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='4' y='3' width='11' height='16' rx='2' fill='%23f3e6c6' stroke='%233a2c12' stroke-width='1.6'/%3E%3Cpath d='M7 8h5M7 11h5M7 14h3' stroke='%233a2c12' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation-name: kaydirSag; }
  body.kartli #dc-options:not(.four) .dc-opt:nth-child(3):nth-last-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Crect x='11.5' y='1' width='11' height='13' rx='2' fill='%23f3e6c6' stroke='%233a2c12' stroke-width='1.6'/%3E%3Cpath d='M14.5 5h5M14.5 8h5M14.5 11h3' stroke='%233a2c12' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M12 17l5 4 5-4M12 22l5 4 5-4' stroke='%238c6a1e' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); height: 28px; animation-name: kaydirAsagi; }
  body.kartli #dc-options .dc-opt.armed::before, body.kartli #dc-options .dc-opt.sealed::before { animation: none !important; }
  @keyframes kaydirSol { 50% { transform: translateX(-4px); } }
  @keyframes kaydirSag { 50% { transform: translateX(4px); } }
  @keyframes kaydirAsagi { 50% { transform: translateY(3px); } }
  @media (prefers-reduced-motion: reduce) { body.kartli #dc-options .dc-opt::before { animation: none !important; } }
  /* balon relative konumda eski top:81% kaymasını almasın; ad plakası ? ve dişli düğmelerinin arasına sığsın */
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-bt { font-size: 12px; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik { padding: 0 44px !important; }
  /* A · SİS — YER GÖRSELİ (sahibi, 2026-09-16, tuvalden "A olsun"): sahnenin ardında düğüme bağlı görsel
     (--dc-yer, main.js yerGorseli), bant boyu, kenarları kreme erir, multiply ile kile işler. Portre, ad
     plakası ve balon katmanın üstünde (relative, z-index 1). --dc-yer yoksa katman yok. */
  body.kartli #dc-scene.on:has(img.dk-portre)::before { content: ''; position: absolute; inset: -34px -14px -6px -14px; z-index: 0;
    pointer-events: none; background: var(--dc-yer, none) center 62% / cover no-repeat; opacity: .34; filter: contrast(1.15);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect; }
  body.kartli #dc-scene.on:not([style*="--dc-yer"])::before { display: none; }
  body.kartli #dc-art:has(> img.dk-portre) > img.dk-portre,
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik,
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { position: relative !important; inset: auto !important; z-index: 1; }
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon { z-index: 2; }
  /* ad ve konum arka plan gelince silikleşti (sahibi, 2026-09-16): koyu mürekkep, krem hale */
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik b { font-size: 12px; font-weight: 800; color: var(--kt-ink);
    text-shadow: 0 0 6px var(--kt-pale), 0 0 2px var(--kt-pale), 0 0 1px var(--kt-pale); }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik i { font-size: 10.5px; font-weight: 600; color: var(--kt-ink);
    text-shadow: 0 0 6px var(--kt-pale), 0 0 2px var(--kt-pale), 0 0 1px var(--kt-pale); }
  body.kartli #dc-scene:has(img.dk-portre) #dc-kimlik i::before { filter: brightness(.55); }
  /* SAHİBİ, 2026-09-17 (dört istek) */
  /* 1) rejim kartı yukarıdan aşağı kağıt gibi açılır: clip-path + hafif rotateX, alt kenarda kıvrım gölgesi */
  body.kartli .rj-bant { transform-origin: 50% 0; animation: kagitAc 1.15s .3s cubic-bezier(.22,.8,.2,1) both !important; }
  @keyframes kagitAc {
    0%   { clip-path: inset(0 -40px 100% -40px); transform: perspective(700px) rotateX(-16deg); }
    55%  { transform: perspective(700px) rotateX(4deg); }
    100% { clip-path: inset(0 -40px -40px -40px); transform: perspective(700px) rotateX(0); } }
  /* 2) fermanda kanatlı güneş ilk harfin üstüne binmesin: kendi satırında, ortada */
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed { display: block !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed::before { display: block !important; position: static !important; float: none;
    width: 60px !important; height: 18px !important; margin: 0 auto 6px !important; background-position: center !important; }
  body.kartli .dc-box.muhurlu #dc-options .dc-opt.sealed .dc-label { display: block !important; margin: 0 !important; padding: 0 !important; text-align: center; }
  /* 3) açıklama metni daha kalın ve koyu */
  body.kartli .dc-box #dc-text { font-weight: 500; color: var(--kt-ink); font-size: 13px; }
  body.kartli .dc-box #dc-text .dc-hukum { font-weight: 500; }
  /* 4) ? ve dişli koyu kahve, altın çerçeve */
  body.kartli #dc-why, body.kartli #dc-gear { background: #3a2c12 !important; border: 1px solid var(--kt-gold) !important; color: var(--kt-pale) !important;
    box-shadow: 0 2px 0 var(--kt-deep), 0 3px 8px rgba(0,0,0,.25) !important; opacity: 1 !important; }
  body.kartli #dc-gear svg { color: var(--kt-pale); stroke: var(--kt-pale); }
  /* kurulu hap BÜYÜMEZ (sahibi, 2026-09-17: "hafif sola kaydırıp bırakınca bu alan büyüyor"):
     taban kuralın 46px alt boşluğu ve basılı-tut çubuğu (.dc-tut) kartlı kipte yok */
  body.kartli .dc-box #dc-options .dc-opt.armed { padding: 6px 14px !important; height: auto !important; min-height: 40px !important; }
  body.kartli .dc-box #dc-options .dc-opt .dc-tut { display: none !important; }
  /* şık yazısı iki satıra sarar (sahibi, 2026-09-17: "niye tamamını göremiyorum, seçenekler 2 satır olabilsin") */
  body.kartli #dc-options .dc-opt .dc-label { white-space: normal !important; text-overflow: clip !important; line-height: 1.25 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; max-height: none !important; }
  body.kartli #dc-options .dc-opt { height: auto !important; max-height: none !important; }
  /* KOŞU RAPORU (2026-09-17): balon 12,5px, portre 24dvh; yol karşılaşması ve ayin kartları parşömen dilinde */
  body.kartli #dc-scene:has(img.dk-portre) #dc-balon .db-bt { font-size: 12.5px !important; }
  body.kartli #dc-art:has(> img.dk-portre) > img.dk-portre { height: clamp(120px, 24dvh, 220px) !important; }
  body.kartli #rite .rt-box { background: linear-gradient(160deg, #f3e6c6, #e6d3a6 55%, #d9c290); color: var(--kt-ink); border: 1px solid var(--kt-deep);
    border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(140,106,30,.5), inset 0 0 30px rgba(140,106,30,.2), 0 20px 50px rgba(0,0,0,.65); }
  body.kartli #rite h3 { color: var(--kt-title); }
  body.kartli #rite p, body.kartli #rite .rt-b, body.kartli #rite .yc-teh, body.kartli #rite li { color: var(--kt-ink2); }
  body.kartli #rite .yc-etap, body.kartli #rite .rt-cap, body.kartli #rite small { color: var(--kt-deep); }
  body.kartli #rite .rt-btn { border: 0; border-radius: 999px; color: var(--kt-ink); min-height: 44px;
    background: linear-gradient(180deg, var(--kt-dark), var(--kt-mid));
    box-shadow: inset 0 3px 6px rgba(90,66,16,.45), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.6); }
  body.kartli #rite .rt-btn.ghost { background: none; box-shadow: none; border: 1px dotted var(--kt-deep); color: var(--kt-deep); }
  body.kartli #rite .rt-btn b, body.kartli #rite .yc-kapi b { color: var(--kt-ink); }
  body.kartli #rite .yc-kapi { color: var(--kt-deep); }
  body.kartli #rite .yc-sahne { margin: 0 0 10px; height: 150px; border-radius: 12px; overflow: hidden; position: relative;
    box-shadow: 0 0 0 2px #0e0c07, 0 0 0 4px var(--kt-gold), 0 0 0 6px var(--kt-pale), 0 0 0 7px var(--kt-deep); }
  body.kartli #rite .yc-sahne img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; filter: sepia(.25) contrast(1.05); }
  body.kartli #rite .yc-sahne::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243,230,198,0) 60%, rgba(243,230,198,.55)); }
}