/* v11.10.1 — unified portrait geometry, richer readable themes and safe exterior ornament */
#characterGrid{
  gap:42px 38px;
  padding:16px 14px 24px;
  overflow:visible;
}
.character-card{
  --theme-primary:var(--frame-accent,#d2b174);
  --theme-secondary:#796047;
  --theme-deep:#17151b;
  --theme-surface:#25212a;
  --theme-soft:rgba(210,177,116,.13);
  position:relative;
  isolation:isolate;
  overflow:visible!important;
  border-radius:24px!important;
  border-color:color-mix(in srgb,var(--theme-primary) 56%,#332e39)!important;
  background:
    radial-gradient(circle at 78% -8%,color-mix(in srgb,var(--theme-secondary) 24%,transparent),transparent 35%),
    radial-gradient(circle at 8% 26%,color-mix(in srgb,var(--theme-primary) 13%,transparent),transparent 31%),
    linear-gradient(155deg,color-mix(in srgb,var(--theme-surface) 94%,var(--theme-primary) 6%),var(--theme-deep) 82%)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.32),inset 0 0 0 1px color-mix(in srgb,var(--theme-primary) 14%,transparent)!important;
  transform:none;
}
.character-card:hover{
  transform:translateY(-4px)!important;
  border-color:color-mix(in srgb,var(--theme-primary) 76%,#fff 5%)!important;
  box-shadow:0 28px 68px rgba(0,0,0,.40),0 0 26px color-mix(in srgb,var(--theme-primary) 13%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--theme-primary) 18%,transparent)!important;
}
.character-card::before{
  inset:7px!important;
  border-radius:18px!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-primary) 25%,transparent),inset 0 0 26px color-mix(in srgb,var(--theme-primary) 7%,transparent)!important;
}
.character-card::after{
  left:30px!important;
  right:30px!important;
  background:linear-gradient(90deg,transparent,var(--theme-primary),color-mix(in srgb,var(--theme-secondary) 76%,#fff 7%),transparent)!important;
}
.character-card .portrait{
  height:238px!important;
  min-height:238px!important;
  margin:10px 10px 0!important;
  clip-path:none!important;
  transform:none!important;
  border:1px solid color-mix(in srgb,var(--theme-primary) 54%,transparent)!important;
  border-radius:18px 18px 14px 14px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 0 3px color-mix(in srgb,var(--theme-secondary) 10%,transparent),inset 0 0 24px color-mix(in srgb,var(--theme-primary) 8%,transparent)!important;
}
.character-card .portrait img,
.character-card .portrait .initials{
  transform:none!important;
  clip-path:none!important;
}
.character-card .portrait::before{
  border-radius:inherit!important;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 5%,transparent),transparent 42%),
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--theme-secondary) 4%,transparent) 0 1px,transparent 1px 15px)!important;
  opacity:.68!important;
}
.character-card .card-body{
  background:linear-gradient(180deg,color-mix(in srgb,var(--theme-surface) 88%,transparent),color-mix(in srgb,var(--theme-deep) 92%,transparent))!important;
  border-color:color-mix(in srgb,var(--theme-primary) 15%,transparent)!important;
}
.character-card .card-ribbon{
  border-color:color-mix(in srgb,var(--theme-primary) 24%,transparent)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--theme-secondary) 19%,transparent),color-mix(in srgb,var(--theme-primary) 11%,transparent),transparent)!important;
}
.character-card .card-ribbon strong,
.character-card .card-identity-copy small,
.character-card .character-vital strong{
  color:color-mix(in srgb,var(--theme-primary) 80%,#fff)!important;
}
.character-card .card-preview-quote{
  border-color:color-mix(in srgb,var(--theme-primary) 62%,transparent)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--theme-secondary) 16%,transparent),rgba(255,255,255,.018))!important;
  color:color-mix(in srgb,var(--theme-primary) 24%,#f4ece2)!important;
}
.character-card .tag{
  border-color:color-mix(in srgb,var(--theme-primary) 18%,rgba(255,255,255,.05))!important;
  background:color-mix(in srgb,var(--theme-primary) 7%,rgba(255,255,255,.025))!important;
}
.character-card .btn.primary{
  background:linear-gradient(135deg,color-mix(in srgb,var(--theme-secondary) 70%,#241b29),color-mix(in srgb,var(--theme-primary) 50%,#4b2638))!important;
}

/* saturated, clearly separated palettes */
.frame-classic{--theme-primary:#d9b56f;--theme-secondary:#805b35;--theme-deep:#151217;--theme-surface:#29232b;--frame-accent:#d9b56f!important}
.frame-royal{--theme-primary:#ffd05c;--theme-secondary:#b51e52;--theme-deep:#1c0d18;--theme-surface:#351723;--frame-accent:#ffd05c!important}
.frame-infernal{--theme-primary:#ff6038;--theme-secondary:#b40f2d;--theme-deep:#190b10;--theme-surface:#36151a;--frame-accent:#ff6038!important}
.frame-arcane{--theme-primary:#bd83ff;--theme-secondary:#4f79ff;--theme-deep:#100d24;--theme-surface:#241b43;--frame-accent:#bd83ff!important}
.frame-verdant{--theme-primary:#73dd83;--theme-secondary:#d0b64e;--theme-deep:#0d1811;--theme-surface:#173522;--frame-accent:#73dd83!important}
.frame-frost{--theme-primary:#83e5ff;--theme-secondary:#708cff;--theme-deep:#0a1520;--theme-surface:#153447;--frame-accent:#83e5ff!important}
.frame-cursed{--theme-primary:#ff4777;--theme-secondary:#833fff;--theme-deep:#180914;--theme-surface:#35132f;--frame-accent:#ff4777!important}
.frame-celestial{--theme-primary:#ffe88c;--theme-secondary:#779fff;--theme-deep:#101526;--theme-surface:#232b4b;--frame-accent:#ffe88c!important}
.frame-shadow{--theme-primary:#a176ff;--theme-secondary:#41306f;--theme-deep:#090812;--theme-surface:#1b1730;--frame-accent:#a176ff!important}
.frame-storm{--theme-primary:#55ceff;--theme-secondary:#9b73ff;--theme-deep:#0c1421;--theme-surface:#1a2c45;--frame-accent:#55ceff!important}
.frame-tide{--theme-primary:#36dbc7;--theme-secondary:#287fd9;--theme-deep:#07191b;--theme-surface:#103a43;--frame-accent:#36dbc7!important}
.frame-dawn{--theme-primary:#ffad4d;--theme-secondary:#ffe071;--theme-deep:#20100c;--theme-surface:#4a251b;--frame-accent:#ffad4d!important}

/* one emblem + one flourish + one motion accent: no duplicated stacked ornaments */
.character-card .theme-decor{
  position:absolute;
  inset:-18px;
  z-index:8;
  pointer-events:none;
  overflow:visible;
}
.character-card .theme-emblem{
  position:absolute;
  left:-2px;
  top:32px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--theme-primary) 62%,transparent);
  border-radius:14px;
  color:color-mix(in srgb,var(--theme-primary) 86%,#fff);
  background:radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--theme-primary) 22%,transparent),rgba(9,9,14,.94) 68%);
  box-shadow:0 10px 24px rgba(0,0,0,.42),0 0 18px color-mix(in srgb,var(--theme-primary) 20%,transparent),inset 0 0 12px color-mix(in srgb,var(--theme-secondary) 13%,transparent);
  font:700 22px/1 Georgia,serif;
  text-shadow:0 0 12px color-mix(in srgb,var(--theme-primary) 62%,transparent);
  animation:themeEmblemBreathe 5.8s ease-in-out infinite;
}
.character-card .theme-flourish{
  position:absolute;
  right:0;
  bottom:28px;
  width:64px;
  height:64px;
  opacity:.78;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--theme-primary) 20%,transparent));
}
.character-card .theme-motion{
  position:absolute;
  right:20px;
  top:34px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--theme-primary);
  box-shadow:0 0 12px var(--theme-primary);
  opacity:.38;
}
@keyframes themeEmblemBreathe{0%,100%{transform:translateY(0);filter:brightness(.94)}50%{transform:translateY(-3px);filter:brightness(1.18)}}
@keyframes themeOrbit{to{transform:rotate(360deg)}}
@keyframes themeFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(5deg)}}
@keyframes themeFlicker{0%,100%{opacity:.24;transform:scale(.8)}18%{opacity:.78;transform:scale(1.18)}24%{opacity:.42}52%{opacity:.9;transform:translate(-5px,-8px) scale(.72)}65%{opacity:.3}82%{opacity:.68;transform:translate(3px,-4px)}}
@keyframes themeWave{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-7px) translateY(-3px)}}
@keyframes themePulse{0%,100%{opacity:.28;filter:blur(.2px)}50%{opacity:.88;filter:blur(0)}}

.frame-classic .theme-flourish{border-right:2px solid color-mix(in srgb,var(--theme-primary) 54%,transparent);border-bottom:2px solid color-mix(in srgb,var(--theme-primary) 54%,transparent);border-radius:0 0 18px 0}
.frame-classic .theme-flourish::before,.frame-classic .theme-flourish::after{content:'';position:absolute;background:var(--theme-primary);opacity:.55}
.frame-classic .theme-flourish::before{right:7px;bottom:18px;width:2px;height:28px}
.frame-classic .theme-flourish::after{right:18px;bottom:7px;width:28px;height:2px}
.frame-classic .theme-motion{animation:themePulse 4.8s ease-in-out infinite}

.frame-royal .theme-emblem{border-radius:8px 18px 18px 18px;background:linear-gradient(145deg,rgba(181,30,82,.92),rgba(20,10,16,.96));}
.frame-royal .theme-flourish{clip-path:polygon(0 72%,12% 18%,29% 60%,50% 0,71% 60%,88% 18%,100% 72%,83% 63%,68% 100%,50% 70%,32% 100%,17% 63%);background:linear-gradient(180deg,var(--theme-primary),color-mix(in srgb,var(--theme-secondary) 72%,transparent));opacity:.45}
.frame-royal .theme-motion{background:var(--theme-secondary);box-shadow:0 0 14px var(--theme-secondary);animation:themeFloat 4.4s ease-in-out infinite}

.frame-infernal .theme-emblem{border-radius:50% 50% 50% 12px;background:radial-gradient(circle at 42% 24%,#ffb45c,rgba(180,15,45,.82) 42%,rgba(20,7,10,.98) 74%)}
.frame-infernal .theme-flourish{background:linear-gradient(145deg,transparent 40%,var(--theme-secondary) 41% 49%,transparent 50%),linear-gradient(35deg,transparent 50%,var(--theme-primary) 51% 58%,transparent 59%);clip-path:polygon(50% 0,64% 30%,91% 23%,73% 51%,100% 68%,62% 69%,55% 100%,41% 72%,8% 83%,29% 52%,0 34%,38% 35%)}
.frame-infernal .theme-motion{animation:themeFlicker 2.9s ease-in-out infinite}

.frame-arcane .theme-emblem{border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-secondary) 12%,transparent),0 0 22px color-mix(in srgb,var(--theme-primary) 32%,transparent)}
.frame-arcane .theme-flourish{border:1px solid color-mix(in srgb,var(--theme-primary) 58%,transparent);border-radius:50%;animation:themeOrbit 13s linear infinite}
.frame-arcane .theme-flourish::before{content:'';position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--theme-secondary) 66%,transparent);border-radius:50%}
.frame-arcane .theme-flourish::after{content:'✦';position:absolute;right:-4px;top:25px;color:var(--theme-primary);font:14px Georgia,serif}
.frame-arcane .theme-motion{animation:themeOrbit 6s linear infinite;transform-origin:-24px 22px}

.frame-verdant .theme-emblem{border-radius:48% 48% 48% 12px;background:radial-gradient(circle at 30% 20%,rgba(208,182,78,.28),rgba(19,62,34,.95) 64%)}
.frame-verdant .theme-flourish{border-left:3px solid color-mix(in srgb,var(--theme-primary) 58%,transparent);border-bottom:2px solid color-mix(in srgb,var(--theme-secondary) 44%,transparent);border-radius:0 0 0 54px;transform:rotate(-8deg);transform-origin:bottom left}
.frame-verdant .theme-flourish::before,.frame-verdant .theme-flourish::after{content:'';position:absolute;width:17px;height:9px;border-radius:100% 0 100% 0;background:var(--theme-primary)}
.frame-verdant .theme-flourish::before{left:-9px;top:18px;transform:rotate(-28deg)}
.frame-verdant .theme-flourish::after{left:5px;top:35px;transform:rotate(34deg);background:var(--theme-secondary)}
.frame-verdant .theme-motion{animation:themeFloat 5.2s ease-in-out infinite}

.frame-frost .theme-emblem{border-radius:10px;transform:rotate(45deg);background:linear-gradient(135deg,rgba(239,252,255,.38),rgba(21,52,71,.96))}
.frame-frost .theme-emblem{animation:themeFrostBreathe 6s ease-in-out infinite}
.frame-frost .theme-emblem{font-size:18px}.frame-frost .theme-emblem::first-letter{transform:rotate(-45deg)}
@keyframes themeFrostBreathe{0%,100%{filter:brightness(.9);box-shadow:0 9px 22px rgba(0,0,0,.42),0 0 15px rgba(131,229,255,.18)}50%{filter:brightness(1.22);box-shadow:0 9px 22px rgba(0,0,0,.42),0 0 28px rgba(131,229,255,.38)}}
.frame-frost .theme-flourish{clip-path:polygon(50% 0,60% 38%,94% 18%,69% 48%,100% 58%,63% 62%,78% 100%,53% 69%,28% 100%,40% 63%,0 74%,31% 52%,5% 23%,42% 39%);background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary));opacity:.45}
.frame-frost .theme-motion{animation:themeFloat 4.7s ease-in-out infinite}

.frame-cursed .theme-emblem{border-radius:50%;background:radial-gradient(circle,rgba(255,71,119,.18) 0 21%,rgba(131,63,255,.48) 22% 31%,rgba(20,6,17,.98) 32%)}
.frame-cursed .theme-flourish{width:3px;height:68px;right:29px;background:linear-gradient(180deg,transparent,var(--theme-primary) 20% 42%,var(--theme-secondary) 44% 62%,transparent);transform:rotate(-13deg)}
.frame-cursed .theme-flourish::before,.frame-cursed .theme-flourish::after{content:'';position:absolute;left:0;width:30px;height:2px;background:inherit;transform-origin:left}
.frame-cursed .theme-flourish::before{top:23px;transform:rotate(32deg)}.frame-cursed .theme-flourish::after{top:45px;transform:rotate(-38deg)}
.frame-cursed .theme-motion{animation:themeFlicker 4s steps(5,end) infinite}

.frame-celestial .theme-emblem{border-radius:50%;background:radial-gradient(circle,#fff8c8 0 8%,rgba(255,232,140,.24) 10% 35%,rgba(15,19,37,.97) 66%)}
.frame-celestial .theme-flourish{border:1px solid color-mix(in srgb,var(--theme-secondary) 62%,transparent);border-radius:50%;transform:rotate(-18deg);animation:themeOrbit 18s linear infinite reverse}
.frame-celestial .theme-flourish::before{content:'';position:absolute;width:9px;height:9px;border-radius:50%;right:2px;top:11px;background:var(--theme-primary);box-shadow:0 0 14px var(--theme-primary)}
.frame-celestial .theme-flourish::after{content:'✦';position:absolute;left:12px;bottom:7px;color:var(--theme-secondary)}
.frame-celestial .theme-motion{animation:themeFloat 5.8s ease-in-out infinite}

.frame-shadow .theme-emblem{border-radius:50%;background:radial-gradient(circle at 68% 38%,transparent 0 36%,rgba(161,118,255,.78) 37% 46%,rgba(8,7,15,.98) 47%)}
.frame-shadow .theme-flourish{border-radius:50%;background:radial-gradient(circle at 68% 42%,transparent 0 46%,color-mix(in srgb,var(--theme-primary) 52%,transparent) 47% 53%,transparent 54%);opacity:.55}
.frame-shadow .theme-motion{background:var(--theme-primary);animation:themePulse 5.5s ease-in-out infinite}

.frame-storm .theme-emblem{border-radius:12px 12px 4px 12px;background:linear-gradient(145deg,rgba(85,206,255,.22),rgba(21,36,67,.97))}
.frame-storm .theme-flourish{clip-path:polygon(53% 0,20% 52%,48% 47%,31% 100%,84% 37%,56% 42%,78% 0);background:linear-gradient(180deg,var(--theme-primary),var(--theme-secondary));opacity:.7}
.frame-storm .theme-motion{animation:themeFlicker 2.2s steps(4,end) infinite}

.frame-tide .theme-emblem{border-radius:50% 50% 50% 12px;background:radial-gradient(circle at 28% 22%,rgba(54,219,199,.35),rgba(10,49,58,.97) 64%)}
.frame-tide .theme-flourish{border-bottom:3px solid var(--theme-primary);border-radius:50%;transform:rotate(-12deg);animation:themeWave 4.8s ease-in-out infinite}
.frame-tide .theme-flourish::before,.frame-tide .theme-flourish::after{content:'';position:absolute;left:4px;right:4px;height:22px;border-bottom:2px solid color-mix(in srgb,var(--theme-secondary) 72%,transparent);border-radius:50%}
.frame-tide .theme-flourish::before{bottom:11px}.frame-tide .theme-flourish::after{bottom:23px;opacity:.45}
.frame-tide .theme-motion{animation:themeFloat 4.2s ease-in-out infinite}

.frame-dawn .theme-emblem{border-radius:50%;background:radial-gradient(circle,#fff0a1 0 13%,rgba(255,173,77,.44) 15% 42%,rgba(57,24,14,.97) 65%)}
.frame-dawn .theme-flourish{border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--theme-primary) 56%,transparent) 0 5deg,transparent 5deg 20deg);mask:radial-gradient(circle,transparent 0 34%,#000 36%);animation:themeOrbit 28s linear infinite}
.frame-dawn .theme-motion{background:var(--theme-secondary);box-shadow:0 0 16px var(--theme-primary);animation:themePulse 3.8s ease-in-out infinite}

body.calm-mode .character-card .theme-decor *,
body.effects-off .character-card .theme-decor *{animation:none!important}
@media (prefers-reduced-motion:reduce){.character-card .theme-decor *{animation:none!important}}

/* relationship focus is now explicit and discoverable */
.relation-focus-control{
  display:grid;
  grid-template-columns:auto minmax(190px,310px) auto;
  align-items:center;
  gap:8px;
  min-width:min(100%,520px);
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.relation-focus-control label{color:var(--gold-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.relation-focus-control .relation-focus{min-width:0}
.relation-focus-control small{grid-column:1/-1;color:var(--muted);line-height:1.4}
.network .node{transition:opacity .25s ease,filter .25s ease}
.network .node:hover circle{stroke-width:3;filter:drop-shadow(0 0 10px var(--node-accent,var(--gold)))}
.network .node.active circle{stroke-width:4;filter:drop-shadow(0 0 14px var(--node-accent,var(--gold)))}
.network-focus-caption{margin:10px 2px 0;color:var(--muted);font-size:12px;line-height:1.45}
@media(max-width:760px){
  #characterGrid{gap:30px 16px;padding:12px 5px 20px}
  .character-card .theme-decor{inset:-11px}
  .character-card .theme-emblem{left:1px;top:30px;width:36px;height:36px;font-size:18px;border-radius:12px}
  .character-card .theme-flourish{right:3px;bottom:22px;width:50px;height:50px;opacity:.52}
  .relation-focus-control{grid-template-columns:1fr;width:100%}
  .relation-focus-control label,.relation-focus-control small{grid-column:1}
}