/* «Моя Аура» v2. Палитра cardgen: глубокий фиолетовый, золото.
   Текст — системный гротеск (читаемость), Cormorant — только заголовки и имена карт. */
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/CormorantGaramond-Bold.ttf');
  font-weight: 700;
}

:root[data-theme="silver"] {
  --bg-top: #0B1230; --bg-bottom: #26336B;
  --gold: #CBD6F5; --gold-bright: #E4ECFF; --gold-dim: #93A3D6;
  --panel: rgba(203,214,245,.08); --panel-border: rgba(203,214,245,.42);
  --gray: #9FAAD0;
}
:root[data-theme="velvet"] {
  --bg-top: #26081A; --bg-bottom: #4E1234;
  --gold: #F2AEC6; --gold-bright: #FFD0E0; --gold-dim: #C07E96;
  --panel: rgba(242,174,198,.09); --panel-border: rgba(242,174,198,.42);
  --gray: #C495AA;
}
:root[data-theme="emerald"] {
  --bg-top: #05201A; --bg-bottom: #0F4433;
  --gold: #8FDDB5; --gold-bright: #B8F2D2; --gold-dim: #5FA886;
  --panel: rgba(143,221,181,.09); --panel-border: rgba(143,221,181,.4);
  --gray: #8AB8A0;
}
:root[data-theme="dawn"] {
  --bg-top: #22120A; --bg-bottom: #503116;
  --gold: #F5BE6B; --gold-bright: #FFDA95; --gold-dim: #C4913F;
  --panel: rgba(245,190,107,.09); --panel-border: rgba(245,190,107,.45);
  --gray: #C4A585;
}
:root {
  --bg-top: #0D0221;
  --bg-bottom: #1A0A3E;
  --gold: #C9A84C;
  --gold-bright: #E8C96A;
  --gold-dim: #A08237;
  --white: #F5F0E8;
  --gray: #A99CC4;
  --panel: rgba(245,240,232,.07);
  --panel-border: rgba(201,168,76,.38);
  --card-w: min(60vw, 230px);
  --serif: 'Cormorant', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom) 60%, #12062B);
  color: var(--white);
  min-height: 100vh;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

#root { min-height: 100vh; display: flex; flex-direction: column; }

/* ── Сплэш ── */
.splash {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .5s; gap: 8px;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash .logo-moon { font-size: 64px; filter: drop-shadow(0 0 24px rgba(201,168,76,.55)); animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
.splash h1 { font-family: var(--serif); font-size: 40px; color: var(--gold); letter-spacing: 1px; }
.splash .tagline { color: var(--gray); font-size: 15px; margin-bottom: 26px; }
.splash .load-bar { width: 200px; height: 7px; border-radius: 4px; background: rgba(245,240,232,.13); overflow: hidden; }
.splash .load-bar i { display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); transition: width .35s; }
.splash .load-note { color: var(--gray); font-size: 13px; margin-top: 10px; min-height: 18px; }

.loading { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40vh; }
.moon-loader { width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--gold-dim); border-top-color: var(--gold-bright); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Оверлей действия: гасит двойные тапы */
.busy-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(13,2,33,.55);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }

/* ── HUD-шапка ── */
.hud {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 10px;
  background: linear-gradient(180deg, rgba(13,2,33,.97), rgba(13,2,33,.86));
  border-bottom: 1px solid rgba(201,168,76,.22);
}
.ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #2A1157, #170735);
  border: 1.5px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; color: var(--gold); font-weight: 700;
}
.hud .who { flex: 1; min-width: 0; }
.hud .who .nm { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .who .lv { color: var(--gray); font-size: 12.5px; }
.hud .who .lv b { color: var(--gold); font-weight: 700; }
.moon-chip .crescent { color: var(--gold-bright); font-size: 17px; margin-right: 2px;
  text-shadow: 0 0 8px rgba(201,168,76,.6); }
.hud .chip {
  display: flex; align-items: center; gap: 5px; flex: none;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 6px 12px; font-size: 14.5px; font-weight: 700;
}

/* ── Экраны ── */
.screen { flex: 1; padding: 18px 16px calc(88px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; width: 100%; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }
.screen.center { display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; min-height: 82vh; padding-bottom: 24px; }

h1 { font-family: var(--serif); font-size: 32px; color: var(--gold); font-weight: 700; letter-spacing: .5px; }
h2 { font-family: var(--serif); font-size: 25px; color: var(--gold); font-weight: 700; margin-bottom: 12px; }
.muted { color: var(--gray); }
.small { font-size: 14.5px; }

/* ── Карта ── */
.card-scene { perspective: 1200px; margin: 20px auto; }
.tarot-card {
  width: var(--card-w); aspect-ratio: 3/5; position: relative;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,.1,.2,1);
  cursor: pointer;
}
.tarot-card.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 16px; border: 1.5px solid var(--gold-dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px; box-shadow: 0 12px 44px rgba(0,0,0,.55);
}
.card-back {
  background:
    radial-gradient(circle at 50% 36%, rgba(201,168,76,.2), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-opacity='.13'%3E%3Cpath d='M28 8a9 9 0 0 0 0 12 7 7 0 1 1 0-12z'/%3E%3Ccircle cx='28' cy='42' r='1.6' fill='%23C9A84C' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='6' cy='28' r='1.1' fill='%23C9A84C' fill-opacity='.16' stroke='none'/%3E%3Ccircle cx='50' cy='28' r='1.1' fill='%23C9A84C' fill-opacity='.16' stroke='none'/%3E%3Cpath d='M0 0l4 4M52 52l4 4M56 0l-4 4M4 52l-4 4' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #1D0A42, #0D0221);
}
.card-back .sigil {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: var(--gold);
  box-shadow: inset 0 0 30px rgba(201,168,76,.15);
}
.card-front {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #21104A, #0D0221);
  gap: 10px;
}
.card-front .name { font-family: var(--serif); font-size: 26px; font-weight: 700;
  color: var(--gold-bright); text-align: center; line-height: 1.15; }
.card-front .axis { font-size: 14px; color: var(--gray);
  border: 1px solid var(--gold-dim); border-radius: 12px; padding: 3px 13px; }
.card-front .glyph { font-size: 54px; }

.pulse-hint { animation: pulse 2.2s ease-in-out infinite; color: var(--gray); margin-top: 14px; font-size: 15px; }
@keyframes pulse { 50% { opacity: .4; } }

/* ── Кнопки, поля ── */
.btn {
  display: block; width: 100%; padding: 16px; margin-top: 14px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #14052E; font-family: inherit; font-size: 17.5px; font-weight: 800;
  border: 0; border-radius: 14px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,168,76,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:active { transform: translateY(1px); }
.btn.ghost { background: none; border: 1.5px solid var(--gold-dim); color: var(--gold);
  font-weight: 600; box-shadow: none; }
.btn:disabled { opacity: .5; }
input {
  width: 100%; padding: 15px; margin-top: 10px;
  background: rgba(245,240,232,.07); border: 1.5px solid var(--gold-dim);
  border-radius: 12px; color: var(--white); font-family: inherit; font-size: 18px;
  text-align: center;
}
input::placeholder { color: rgba(169,156,196,.7); }

.reading {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 18px; margin: 16px 0; line-height: 1.6;
  text-align: left; white-space: pre-wrap; font-size: 16.5px;
}
.reading .speaker { font-family: var(--serif); color: var(--gold); font-size: 19px; font-weight: 700; }

/* ── Прогресс альбома ── */
.album-strip { margin: 14px 0 4px; width: 100%; }
.album-strip .bar { height: 8px; background: rgba(245,240,232,.13); border-radius: 4px; overflow: hidden; }
.album-strip .fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  border-radius: 4px; transition: width .6s; }
.album-strip .label { font-size: 13.5px; color: var(--gray); margin-top: 6px; text-align: center; }

/* ── Навигация ── */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: rgba(13,2,33,.96); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(201,168,76,.28);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1; padding: 11px 0 9px; background: none; border: 0; color: var(--gray);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; position: relative;
}
.tabs button .ico { display: block; font-size: 23px; margin-bottom: 3px; filter: grayscale(.6) opacity(.7); }
.tabs button .ico svg { width: 23px; height: 23px; display: block; margin: 0 auto; }
.tabs button.active { color: var(--gold-bright); }
.tabs button.active .ico { filter: none; transform: scale(1.12); }
.tabs button .dot {
  position: absolute; top: 6px; right: calc(50% - 20px);
  width: 9px; height: 9px; border-radius: 50%; background: #E8626A;
  box-shadow: 0 0 6px rgba(232,98,106,.8);
}

/* ── Колода ── */
.deck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.deck-grid .mini {
  aspect-ratio: 3/5; border-radius: 10px; border: 1px solid rgba(201,168,76,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 600; text-align: center; padding: 4px 3px; cursor: pointer;
  background: linear-gradient(160deg, #1D0A42, #0D0221); color: var(--gold-bright);
  line-height: 1.12; overflow: hidden; word-break: break-word; hyphens: auto;
}
.deck-grid .mini .g { font-size: 21px; }
.deck-grid .mini.locked { color: rgba(169,156,196,.4); border-color: rgba(169,156,196,.16);
  background: rgba(245,240,232,.03); }
.deck-grid .mini.locked .g { opacity: .35; }

/* ── Списки, строки ── */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid rgba(201,168,76,.24);
  border-radius: 14px; padding: 15px 16px; margin-top: 10px; cursor: pointer;
}
.row .t { flex: 1; font-size: 16px; }
.row.selected { border-color: var(--gold-bright); background: rgba(201,168,76,.13);
  box-shadow: 0 0 0 1px var(--gold-bright); }
.badge { color: var(--gold-bright); font-size: 15px; white-space: nowrap; font-weight: 700; }
.done { color: var(--gray); text-decoration: line-through; }
.stat-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-top: 14px; }
.stat {
  background: var(--panel); border: 1px solid rgba(201,168,76,.24);
  border-radius: 14px; padding: 15px; text-align: center;
}
.stat { display: flex; flex-direction: column; justify-content: center; min-height: 86px; }
.stat .v { font-size: 26px; color: var(--gold-bright); font-weight: 800; line-height: 1.1; }
.stat .k { font-size: 12.5px; color: var(--gray); margin-top: 4px; line-height: 1.25; }

.was-price { color: var(--gray); text-decoration: line-through; margin-right: 6px; font-size: 14px; }
.free-tag { color: var(--gold-bright); font-size: 14px; font-weight: 700; }

.toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(26,10,62,.97); border: 1px solid var(--gold); color: var(--white);
  border-radius: 12px; padding: 12px 18px; z-index: 300; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); animation: fadein .25s;
  max-width: 92vw; width: max-content; text-align: center; line-height: 1.35;
}

.modal {
  position: fixed; inset: 0; z-index: 60; background: rgba(13,2,33,.88);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal .sheet {
  background: linear-gradient(180deg, #21104A, #12062B); width: 100%; max-width: 560px;
  border-radius: 20px 20px 0 0; border: 1px solid var(--panel-border); border-bottom: 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto;
  animation: sheetup .3s ease;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } }

/* Переходный экран Салона */
.transition-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 60vh; gap: 14px; animation: fadein .5s;
}
.transition-screen .big { font-size: 52px; filter: drop-shadow(0 0 18px rgba(201,168,76,.4)); }

/* ── Дом ── */
.home-hero {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(201,168,76,.05));
  border: 1.5px solid var(--gold-dim); border-radius: 16px; padding: 16px;
  cursor: pointer; box-shadow: 0 6px 24px rgba(201,168,76,.12);
}
.home-hero.claimed { opacity: .85; cursor: default; border-style: dashed; }
.home-hero .hero-card {
  width: 52px; height: 84px; border-radius: 9px; flex: none;
  border: 1.5px solid var(--gold-dim);
  background: radial-gradient(circle at 50% 40%, rgba(201,168,76,.25), transparent 60%),
    linear-gradient(160deg, #1D0A42, #0D0221);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--gold-bright);
  animation: heropulse 2.4s ease-in-out infinite;
}
.home-hero.claimed .hero-card { animation: none; }
@keyframes heropulse { 50% { box-shadow: 0 0 18px rgba(201,168,76,.5); } }
.home-hero .hero-t { flex: 1; font-size: 16px; }

/* ── Тайлы Дома ── */
.tile-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 11px; margin-top: 14px; }
.tile {
  background: var(--panel); border: 1px solid rgba(201,168,76,.26);
  border-radius: 16px; padding: 15px 14px 13px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform .12s;
}
.tile:active { transform: scale(.97); }
.tile .ti { font-size: 25px; margin-bottom: 4px; }
.tile b { font-size: 16px; }
.tile i { font-style: normal; font-size: 13px; color: var(--gray);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.alert { border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(201,168,76,.25); }
.tile.alert i { color: var(--gold-bright); }

.hud-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }

.sec-h { font-family: var(--serif); font-size: 19px; color: var(--gray);
  font-weight: 700; margin: 18px 0 2px; }
.unlock-bar { margin: 6px 0 4px; }
.locked-row { opacity: .55; }

/* Колода секциями */
.deck-sec { margin-top: 20px; }
.deck-sec-h { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; }
.deck-sec-h b { font-family: var(--serif); font-size: 19px; color: var(--gold); }
.deck-sec-h i { font-style: normal; font-size: 13px; color: var(--gray); }
.deck-sec.complete .deck-sec-h b { color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(232,201,106,.5); }
.deck-sec.complete .deck-grid { padding: 8px; border-radius: 14px;
  border: 1.5px solid var(--gold-bright);
  background: rgba(201,168,76,.07);
  box-shadow: 0 0 22px rgba(201,168,76,.22), inset 0 0 18px rgba(201,168,76,.08); }
.deck-sec.complete .deck-sec-h i { color: var(--gold-bright); }

/* Ярусные достижения */
.ach-list { display: flex; flex-direction: column; gap: 10px; }
.ach-card { display: flex; align-items: center; gap: 13px;
  background: var(--panel); border: 1px solid rgba(201,168,76,.24);
  border-radius: 14px; padding: 13px 15px; }
.ach-card .ai { font-size: 25px; flex: none; }
.ach-card .at { flex: 1; min-width: 0; }
.ach-card .at b { font-size: 15.5px; }
.ach-card .stars { color: var(--gold-bright); font-size: 13px; letter-spacing: 2px; }
.ach-card .stars .off { color: rgba(169,156,196,.35); }
.ach-card .ach-bar { height: 5px; border-radius: 3px; background: rgba(245,240,232,.12);
  margin-top: 6px; overflow: hidden; }
.ach-card .ach-bar i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.ach-card .an { flex: none; text-align: right; font-size: 12px; color: var(--gray); }

/* Кот */
.cat-hero { display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin: 18px 0 8px; }
.cat-face {
  width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid var(--gold-dim);
  background:
    radial-gradient(circle at 36% 32%, rgba(255,255,255,.08), transparent 50%),
    linear-gradient(160deg, #241052, #0D0221);
  display: flex; align-items: center; justify-content: center;
  font-size: 76px; cursor: pointer; user-select: none;
  box-shadow: 0 0 34px rgba(201,168,76,.25);
  transition: transform .15s;
}
.cat-face:active { transform: scale(.94); }
.cat-name-h { font-family: var(--serif); font-size: 27px; color: var(--gold-bright);
  font-weight: 700; }

/* Сеты колоды */
.set-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; }
.set-chip { flex: none; border: 1px dashed rgba(201,168,76,.4); border-radius: 12px;
  padding: 7px 12px; text-align: center; }
.set-chip b { display: block; font-size: 12px; }
.set-chip i { font-style: normal; font-size: 11px; color: var(--gray); }
.set-chip.done { border-style: solid; border-color: var(--gold-bright);
  background: rgba(201,168,76,.1); }

/* Старший аркан — особое сияние */
.nc-card.major { border-width: 2.5px;
  box-shadow: 0 0 70px rgba(232,201,106,.65), inset 0 0 30px rgba(201,168,76,.25);
  animation: ncReveal .9s cubic-bezier(.2,.9,.3,1.2), majorPulse 2.2s ease-in-out 1s infinite; }
@keyframes majorPulse { 50% { box-shadow: 0 0 100px rgba(232,201,106,.85), inset 0 0 34px rgba(201,168,76,.3); } }

/* Медальоны клиентов */
.medal {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(160deg, #241052, #12062B);
  border: 1.5px solid var(--medal-hue, var(--gold-dim));
  box-shadow: 0 0 10px color-mix(in srgb, var(--medal-hue, #A08237) 35%, transparent);
}
.row.with-medal { align-items: center; }

/* Веер карт в салоне */
.fan { display: flex; justify-content: center; margin: 26px 0 6px; height: 170px; }
.fan-card {
  width: 88px; height: 148px; border-radius: 12px; margin: 0 -12px;
  border: 1.5px solid var(--gold-dim); cursor: pointer;
  transform: rotate(var(--rot));
  transform-origin: bottom center;
  background:
    radial-gradient(circle at 50% 38%, rgba(201,168,76,.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-opacity='.13'%3E%3Cpath d='M28 8a9 9 0 0 0 0 12 7 7 0 1 1 0-12z'/%3E%3Ccircle cx='28' cy='42' r='1.6' fill='%23C9A84C' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='6' cy='28' r='1.1' fill='%23C9A84C' fill-opacity='.16' stroke='none'/%3E%3Ccircle cx='50' cy='28' r='1.1' fill='%23C9A84C' fill-opacity='.16' stroke='none'/%3E%3Cpath d='M0 0l4 4M52 52l4 4M56 0l-4 4M4 52l-4 4' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #1D0A42, #0D0221);
  display: flex; align-items: center; justify-content: center;
  color: rgba(201,168,76,.6); font-size: 22px;
  transition: transform .35s, opacity .4s;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.fan-card:active { transform: rotate(var(--rot)) translateY(-8px); }
.fan-card.fade { opacity: 0; pointer-events: none; }
.fan-card.chosen {
  transform: rotate(0) translateY(-12px) scale(1.35); z-index: 5;
  border-color: var(--gold); box-shadow: 0 0 34px rgba(201,168,76,.45);
}
.fan-face { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; }
.fan-face .fg { font-size: 25px; }
.fan-face .fn { font-family: var(--serif); font-size: 12.5px; font-weight: 700;
  color: var(--gold-bright); text-align: center; line-height: 1.1; }

/* Празднование новой карты */
.modal.celebrate { align-items: center; background: rgba(13,2,33,.93); }
.new-card-wrap { display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px; animation: fadein .3s; }
.nc-label { color: var(--gray); font-size: 15px; letter-spacing: 2px;
  text-transform: uppercase; }
.nc-card {
  width: min(56vw, 210px); aspect-ratio: 3/5; border-radius: 16px;
  border: 1.5px solid var(--gold); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 14px;
  background: linear-gradient(180deg, #21104A, #0D0221);
  animation: ncReveal .8s cubic-bezier(.2,.9,.3,1.2);
  box-shadow: 0 0 40px rgba(201,168,76,.4);
}
@keyframes ncReveal {
  0% { transform: rotateY(90deg) scale(.7); opacity: 0; }
  60% { transform: rotateY(-12deg) scale(1.05); opacity: 1; }
  100% { transform: rotateY(0) scale(1); }
}
.nc-card .glyph { font-size: 48px; }
.nc-card .name { font-family: var(--serif); font-size: 23px; font-weight: 700;
  color: var(--gold-bright); text-align: center; line-height: 1.15; }
.nc-card .axis { font-size: 13px; color: var(--gray);
  border: 1px solid var(--gold-dim); border-radius: 12px; padding: 2px 12px; }

/* Рубашки в колоде */
.deck-grid .mini.back {
  background:
    radial-gradient(circle at 50% 38%, rgba(201,168,76,.14), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-opacity='.13'%3E%3Cpath d='M28 8a9 9 0 0 0 0 12 7 7 0 1 1 0-12z'/%3E%3Ccircle cx='28' cy='42' r='1.6' fill='%23C9A84C' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='6' cy='28' r='1.1' fill='%23C9A84C' fill-opacity='.16' stroke='none'/%3E%3Ccircle cx='50' cy='28' r='1.1' fill='%23C9A84C' fill-opacity='.16' stroke='none'/%3E%3Cpath d='M0 0l4 4M52 52l4 4M56 0l-4 4M4 52l-4 4' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #1D0A42, #0D0221);
  border-color: rgba(201,168,76,.22); cursor: default;
}
.deck-grid .mini.back .back-sigil {
  width: 58%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(201,168,76,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: rgba(201,168,76,.55);
}

/* ── Профиль ── */
.profile-head { display: flex; align-items: center; gap: 16px; padding: 4px 2px; }
.profile-head > div:last-child { flex: 1; min-width: 0; }
.profile-head h2 { font-size: 23px; line-height: 1.2; }
.profile-head p { margin-top: 2px; }
.ava.big { width: 64px; height: 64px; font-size: 30px; border-width: 2px; flex: none; }
.row .t .muted.small { display: inline-block; }
.row > span { flex: none; white-space: nowrap; }
.ach-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.ach {
  aspect-ratio: 1; border-radius: 13px; border: 1px solid var(--panel-border);
  background: var(--panel); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 4px; text-align: center;
}
.ach span { font-size: 21px; }
.ach i { font-style: normal; font-size: 9.5px; color: var(--gray); line-height: 1.15; }
.ach.locked { opacity: .35; filter: grayscale(1); }

.level-orb {
  width: 96px; height: 96px; border-radius: 50%;
  border: 2.5px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 44px; font-weight: 700; color: var(--gold-bright);
  box-shadow: 0 0 44px rgba(201,168,76,.5), inset 0 0 24px rgba(201,168,76,.2);
  animation: ncReveal .8s cubic-bezier(.2,.9,.3,1.2);
}
.theme-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  margin-right: 4px; vertical-align: -2px; border: 1px solid rgba(255,255,255,.3); }
.theme-dot.th-classic { background: linear-gradient(135deg, #C9A84C, #1A0A3E); }
.theme-dot.th-silver { background: linear-gradient(135deg, #B8C4E8, #1A2450); }
.theme-dot.th-velvet { background: linear-gradient(135deg, #E8A0B4, #3A0E28); }
.theme-dot.th-dawn { background: linear-gradient(135deg, #F5BE6B, #503116); }
.theme-dot.th-emerald { background: linear-gradient(135deg, #8FDDB5, #0F4433); }

/* Кнопка-цена: покупаемое видно сразу */
.price-btn {
  flex: none; padding: 9px 14px; border: 0; border-radius: 11px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #14052E; font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(201,168,76,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.price-btn:active { transform: translateY(1px); }

.next-hint { color: var(--gold-bright); font-size: 15px; font-weight: 600;
  margin: 8px 0 2px; cursor: pointer; }

/* Аура: пассивное накопление */
.aura-orb-row {
  display: flex; align-items: center; gap: 13px; margin-top: 12px;
  background: var(--panel); border: 1px solid rgba(201,168,76,.24);
  border-radius: 16px; padding: 12px 15px; cursor: pointer;
}
.aura-orb-row .t { flex: 1; font-size: 16px; }
.aura-orb-row.ready { border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(201,168,76,.28); }
.aura-orb {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; color: var(--gold-bright);
  background: radial-gradient(circle at 40% 32%, rgba(232,201,106,.4), rgba(201,168,76,.08) 70%);
  border: 1.5px solid var(--gold-dim);
  animation: auraBreath 3.2s ease-in-out infinite;
}
.aura-orb-row.ready .aura-orb { border-color: var(--gold-bright);
  box-shadow: 0 0 22px rgba(232,201,106,.5); }
@keyframes auraBreath { 50% { transform: scale(1.07); box-shadow: 0 0 26px rgba(201,168,76,.4); } }

/* Типографские знаки карт */
.mark { font-family: var(--serif); font-weight: 700; letter-spacing: .5px; }
.deck-grid .mini .g.mark { font-size: 17px; color: var(--gold-bright); }
.card-front .glyph.mark { font-size: 44px; color: var(--gold-bright); }
.nc-card .glyph.mark { font-size: 40px; color: var(--gold-bright); }

/* Звёздный бёрст при празднованиях */
.nc-card { position: relative; }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-bright);
  animation: burstFly 1s ease-out forwards; opacity: 0; }
.burst i:nth-child(1) { --bx: -90px; --by: -110px; animation-delay: .15s; }
.burst i:nth-child(2) { --bx: 90px; --by: -100px; animation-delay: .2s; }
.burst i:nth-child(3) { --bx: -120px; --by: 10px; animation-delay: .25s; }
.burst i:nth-child(4) { --bx: 120px; --by: 0; animation-delay: .18s; }
.burst i:nth-child(5) { --bx: -70px; --by: 120px; animation-delay: .3s; }
.burst i:nth-child(6) { --bx: 80px; --by: 115px; animation-delay: .22s; }
.burst i:nth-child(7) { --bx: 0; --by: -140px; animation-delay: .28s; }
.burst i:nth-child(8) { --bx: 0; --by: 140px; animation-delay: .35s; }
.burst i:nth-child(9) { --bx: -140px; --by: -50px; animation-delay: .32s; }
.burst i:nth-child(10) { --bx: 140px; --by: -55px; animation-delay: .26s; }
@keyframes burstFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(.2); opacity: 0; }
}

/* Строгий запрет горизонтального скролла */
.screen, .modal .sheet { overflow-x: hidden; }
.row .t { min-width: 0; overflow-wrap: break-word; }

.deck-grid .mini.back.skin-golden {
  background:
    radial-gradient(circle at 50% 38%, rgba(232,201,106,.22), transparent 60%),
    linear-gradient(160deg, #2E2008, #14090A);
  border-color: rgba(232,201,106,.5);
}
.deck-grid .mini.back.skin-golden .back-sigil { color: rgba(232,201,106,.8);
  border-color: rgba(232,201,106,.55); }

/* Дом-сцена: центр + колонки иконок */
.scene { display: flex; gap: 8px; margin-top: 6px; align-items: stretch; }
.scene-center { flex: 1; text-align: center; min-width: 0; }
.scene-greet { font-family: var(--serif); font-size: 21px; color: var(--gold);
  font-weight: 700; line-height: 1.2; }
.scene-col { display: flex; flex-direction: column; gap: 14px; justify-content: center;
  width: 64px; flex: none; }
.ico-btn { display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; position: relative; }
.ico-btn .ico-face {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--gold-dim);
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--gold-bright);
  transition: transform .12s;
}
.ico-btn:active .ico-face { transform: scale(.92); }
.ico-btn i { font-style: normal; font-size: 11px; color: var(--gray);
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-btn.alert .ico-face { border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(232,201,106,.4); animation: heropulse 2.4s infinite; }
.ico-btn .ico-badge { position: absolute; top: -2px; right: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: #E8626A; box-shadow: 0 0 6px rgba(232,98,106,.8); }
.ico-face.aura-mini { font-family: var(--serif); font-weight: 800; font-size: 19px;
  background: radial-gradient(circle at 40% 32%, rgba(232,201,106,.35), rgba(201,168,76,.06) 70%); }
.ico-face.medal-face { background: none; border: 0; }
.ico-face.medal-face .medal { width: 54px; height: 54px; }
.scene-card { width: min(46vw, 175px); margin: 0 auto; }
.scene-card.flipped-static .card-back .sigil { opacity: .55; }
.scene-card.flipped-static { opacity: .8; }

/* Лестница приглашений */
.ladder { display: flex; gap: 10px; margin-top: 4px; }
.ladder-step {
  flex: 1; text-align: center; border: 1px dashed rgba(201,168,76,.4);
  border-radius: 13px; padding: 10px 6px;
}
.ladder-step b { display: block; font-size: 21px; color: var(--gray); }
.ladder-step i { font-style: normal; font-size: 11.5px; color: var(--gray); line-height: 1.2; display: block; }
.ladder-step.got { border-style: solid; border-color: var(--gold-bright);
  background: rgba(201,168,76,.1); }
.ladder-step.got b { color: var(--gold-bright); }

/* Скин рубашки «Лунная» — награда за первую подругу */
.deck-grid .mini.back.skin-lunar {
  background:
    radial-gradient(circle at 50% 38%, rgba(160,190,255,.18), transparent 60%),
    linear-gradient(160deg, #17204E, #0A0E2B);
  border-color: rgba(170,190,255,.35);
}
.deck-grid .mini.back.skin-lunar .back-sigil { color: rgba(185,200,255,.65);
  border-color: rgba(170,190,255,.4); }

.starfield { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.starfield span { position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(245,240,232,.7); animation: pulse 3s ease-in-out infinite; }