@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Gowun+Batang:wght@400;700&family=Gowun+Dodum&family=Jua&family=Noto+Sans+KR:wght@400;500;600&display=swap');

/* Each portrait owns its typography and palette; the player remains shared. */
:root[data-theme="gekos"] { --portrait-font:'Noto Sans KR','Malgun Gothic',sans-serif; --paper-rgb:13,23,26; --muted:#a2b7ad; --line:rgba(157,198,164,.25); }
:root[data-theme="luciel"] { --portrait-font:'Gowun Batang','Noto Serif KR',Batang,serif; --paper-rgb:16,14,26; --muted:#beb0d2; --line:rgba(184,160,224,.25); }
:root:is([data-theme="gekos"],[data-theme="luciel"]) { color-scheme:dark; scrollbar-color:var(--gold) var(--paper); }
:root:is([data-theme="gekos"],[data-theme="luciel"]) .film { background:var(--paper); }
:root:is([data-theme="gekos"],[data-theme="luciel"]) .film:after {
  background:linear-gradient(90deg,rgba(var(--paper-rgb),.97),rgba(var(--paper-rgb),.78) 21%,transparent 43%,transparent 67%,rgba(var(--paper-rgb),.88) 97%),linear-gradient(0deg,var(--paper),transparent 22%,transparent 78%,rgba(var(--paper-rgb),.85));
}
:root:is([data-theme="gekos"],[data-theme="luciel"]) h1 {color:var(--ink);font-family:var(--portrait-font);text-shadow:0 3px 26px var(--paper);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .occupation,
:root:is([data-theme="gekos"],[data-theme="luciel"]) .story h2,
:root:is([data-theme="gekos"],[data-theme="luciel"]) .story>p:not(.eyebrow),
:root:is([data-theme="gekos"],[data-theme="luciel"]) .caption h2 {font-family:var(--portrait-font);color:var(--ink);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) :is(.eyebrow,.edition span,.facts dt,.hobby>span,.caption>span) {color:var(--gold);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) :is(.caption p,.scroll-hint,.hobby p) {color:var(--muted);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .motion {background:rgba(var(--paper-rgb),.65);border-color:var(--line);color:var(--ink);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .motion:hover {background:rgba(255,255,255,.08);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .stage:before {border-color:var(--line);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .progress-track {background:var(--line);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .quote-mark {color:var(--gold);opacity:.28;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .profile {width:24%;max-width:290px;top:27%;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .occupation {font-size:21px;max-width:none;line-height:1.8;letter-spacing:-.035em;margin-bottom:20px;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .facts {display:grid;gap:13px;padding:17px 0;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .facts>div {display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:baseline;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .facts dt {margin:0;font-size:11px;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .facts dd {font-size:14px;line-height:1.6;overflow-wrap:anywhere;}
.facts dd small {display:block;font-size:10px;line-height:1.65;margin-top:2px;color:var(--muted);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .hobby {gap:16px;padding-top:18px;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .hobby p {font-size:12px;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .story {width:30%;max-width:420px;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .story>p:not(.eyebrow) {white-space:pre-line;line-height:2;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .character-rail {background:var(--paper);border-right-color:var(--line);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .character-card[aria-pressed="true"] {background:rgba(255,255,255,.06);border-color:var(--gold);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .character-card:hover {background:rgba(255,255,255,.09);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) :is(.rail-heading,.member-badge) {color:var(--gold);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .member-badge {border-color:var(--line);}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .character-card img {border-color:var(--line);}

/* GEKOS: restrained field dossier, muted phosphor, precise sans serif. */
:root[data-theme="gekos"] .stage:before {border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);inset:20px;}
:root[data-theme="gekos"] .identity {bottom:30%;}
:root[data-theme="gekos"] h1 {font-size:clamp(46px,5.5vw,82px);font-weight:600;letter-spacing:-.075em;}
:root[data-theme="gekos"] h1 span {font-family:Consolas,monospace;color:var(--gold);letter-spacing:.09em;}
:root[data-theme="gekos"] .identity:before {content:'';display:block;width:32px;height:3px;background:var(--gold);margin-bottom:24px;}
:root[data-theme="gekos"] .story .eyebrow {font-family:Consolas,'Malgun Gothic',monospace;letter-spacing:.12em;border-top:1px solid var(--line);padding-top:18px;}
:root[data-theme="gekos"] .story h2 {font-weight:500;font-size:clamp(28px,2.8vw,42px);line-height:1.55;letter-spacing:-.06em;}
:root[data-theme="gekos"] .quote-mark {display:none;}
:root[data-theme="gekos"] .story-rule {width:76px;height:2px;}
:root[data-theme="gekos"] .profile .eyebrow {font-family:Consolas,'Malgun Gothic',monospace;font-size:10px;letter-spacing:.05em;}
:root[data-theme="gekos"] .occupation {font-weight:400;}

/* LUCIEL: lunar silver, amethyst and the quiet weight of a family chronicle. */
:root[data-theme="luciel"] .edition {font-family:Cinzel,Georgia,serif;letter-spacing:.19em;}
:root[data-theme="luciel"] h1 {font-weight:400;letter-spacing:-.065em;line-height:1.4;}
:root[data-theme="luciel"] h1 span:not(.character-alias) {font-family:Cinzel,Georgia,serif;font-size:9px;letter-spacing:.14em;color:var(--muted);}
:root[data-theme="luciel"] h1 .character-alias {display:block;font-family:'Gowun Batang',serif;font-size:13px;letter-spacing:.13em;line-height:1.8;color:var(--gold);margin-top:18px;}
:root[data-theme="luciel"] .identity:before {content:'✦';display:block;color:var(--gold);font-size:22px;margin-bottom:20px;}
:root[data-theme="luciel"] .story .eyebrow {font-family:Cinzel,Georgia,serif;font-size:10px;letter-spacing:.12em;}
:root[data-theme="luciel"] .story h2 {font-size:clamp(26px,2.5vw,38px);line-height:1.5;color:#e1d5f4;}
:root[data-theme="luciel"] .story>p:not(.eyebrow) {color:#d2c8df;font-size:17px;}
:root[data-theme="luciel"] .story-rule {width:112px;background:linear-gradient(90deg,var(--gold),transparent);}
:root[data-theme="luciel"] .occupation {font-family:'Gowun Batang',serif;font-size:23px;}
:root[data-theme="luciel"] .facts dd {font-family:'Gowun Batang','Segoe UI Symbol',serif;}
:root[data-theme="luciel"] .facts>div:first-child dd {font-family:'Segoe UI Symbol','Noto Sans KR',sans-serif;font-size:13px;letter-spacing:.08em;}
:root:is([data-theme="gekos"],[data-theme="luciel"]) .stage:not([data-scene="0"]) .identity:before {display:none;}

/* Keep every registered member reachable, including on short screens. */
#character-list {min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#596776 transparent;}
.character-card {flex-shrink:0;margin-bottom:8px;}
.next-member {display:none;}
@media(min-width:801px){
  .rail-heading {margin-top:34px;}
  .character-card {padding:12px 7px;gap:8px;}
  .character-card img {width:68px;height:78px;}
  .character-card strong {font-size:12px;}
  .member-badge {font-size:8px;}
}
@media(min-width:801px) and (max-width:1200px){
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .profile {width:26%;right:4%;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .occupation {font-size:17px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .story {width:32%;}
  :root[data-theme="luciel"] .story>p:not(.eyebrow) {font-size:15px;}
}
@media(max-width:800px){
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .film:after {background:linear-gradient(0deg,var(--paper) 0%,rgba(var(--paper-rgb),.4) 26%,transparent 37%,transparent 70%,var(--paper) 90%);}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .identity,
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .stage[data-scene] .identity {top:11%;bottom:auto;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .identity:before {display:none;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) h1,
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .stage[data-scene] h1 {font-size:25px;line-height:1.4;}
  :root[data-theme="luciel"] h1 .character-alias {font-size:10px;line-height:1.4;margin-top:7px;letter-spacing:.03em;}
  :root[data-theme="luciel"] h1 span:not(.character-alias) {font-size:7px;letter-spacing:.03em;margin-top:7px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .profile {top:54%;left:7%;right:7%;width:auto;max-width:none;display:block;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .profile .eyebrow {font-size:9px;margin-bottom:10px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .occupation {font-size:16px;line-height:1.55;margin-bottom:13px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:11px 0;border-top:1px solid var(--line);}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .facts>div {display:block;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .facts dt {font-size:9px;margin-bottom:6px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .facts dd {font-size:12px;}
  .facts dd small {font-size:9px;line-height:1.4;}
  :root[data-theme="luciel"] .facts>div:first-child dd {font-size:11px;letter-spacing:0;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .hobby {padding-top:11px;gap:12px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .hobby p {font-size:11px;line-height:1.7;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .hobby>span {font-size:10px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .story {top:55%;left:7%;width:86%;max-width:none;}
  :root[data-theme="gekos"] .story h2 {font-size:28px;}
  :root[data-theme="luciel"] .story h2 {font-size:23px;margin-bottom:15px;}
  :root[data-theme="luciel"] .story>p:not(.eyebrow) {font-size:14px;line-height:1.85;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .story .eyebrow {font-size:9px;margin-bottom:16px;}
}
@media(max-width:800px) and (max-height:760px){
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .profile {top:46%;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .occupation {font-size:14px;margin-bottom:8px;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .facts {padding:8px 0;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .story {top:47%;}
  :root[data-theme="luciel"] .story h2 {font-size:20px;}
  :root[data-theme="luciel"] .story>p:not(.eyebrow) {font-size:13px;line-height:1.7;}
}
@media(min-width:500px) and (max-width:800px) and (max-height:760px){
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .profile {top:54%;}
  :root:is([data-theme="gekos"],[data-theme="luciel"]) .story {top:55%;}
}
/* Theme layout rules must never reveal an inactive scene. */
.stage .scene-panel[hidden] {display:none!important;}
#character-list {overflow-x:hidden;}
.character-card {min-width:0;}
.character-card strong {max-width:100%;overflow-wrap:anywhere;}

/* MIKAELA: porcelain, winter blue and the fine gold of a celestial archive. */
:root[data-theme="mikaela"] {color-scheme:light;--muted:#637b91;--line:rgba(82,114,146,.23);scrollbar-color:#a5b9cb var(--paper);}
:root[data-theme="mikaela"] .film {background:var(--paper);}
:root[data-theme="mikaela"] .film:after {background:linear-gradient(90deg,rgba(238,243,247,.96),rgba(238,243,247,.88) 23%,transparent 43%,transparent 65%,rgba(238,243,247,.93) 80%,#eef3f7),linear-gradient(0deg,var(--paper),transparent 24%,transparent 78%,rgba(238,243,247,.8));}
:root[data-theme="mikaela"] .stage:before {border-color:var(--line);}
:root[data-theme="mikaela"] :is(.edition,.identity .eyebrow,.story .eyebrow) {font-family:Cinzel,'Noto Serif KR',serif;letter-spacing:.16em;}
:root[data-theme="mikaela"] h1 {color:var(--ink);font-weight:500;letter-spacing:-.07em;text-shadow:0 2px 25px #fff;}
:root[data-theme="mikaela"] h1 span {font-family:Cinzel,Georgia,serif;color:var(--muted);letter-spacing:.12em;}
:root[data-theme="mikaela"] .identity:before {content:'';display:block;width:45px;height:12px;border:1px solid #ad955f;border-radius:50%;box-shadow:0 0 20px rgba(173,149,95,.16);margin-bottom:28px;transform:rotate(-15deg);}
:root[data-theme="mikaela"] .stage:not([data-scene="0"]) .identity:before {display:none;}
:root[data-theme="mikaela"] :is(.eyebrow,.edition span,.facts dt,.hobby>span,.caption>span) {color:var(--gold);}
:root[data-theme="mikaela"] .profile {width:23%;max-width:265px;top:29%;}
:root[data-theme="mikaela"] .profile .eyebrow {font-size:10px;letter-spacing:.09em;}
:root[data-theme="mikaela"] .occupation {font-size:32px;letter-spacing:.08em;}
:root[data-theme="mikaela"] .facts {gap:22px;justify-content:space-between;}
:root[data-theme="mikaela"] .facts dd {font-family:'Noto Serif KR',serif;font-size:16px;white-space:nowrap;}
:root[data-theme="mikaela"] .hobby p {color:var(--muted);font-size:13px;}
:root[data-theme="mikaela"] .story {width:31%;}
:root[data-theme="mikaela"] .story h2 {font-size:clamp(28px,3vw,44px);line-height:1.5;letter-spacing:-.055em;}
:root[data-theme="mikaela"] .story>p:not(.eyebrow) {color:var(--muted);font-size:18px;}
:root[data-theme="mikaela"] .story[data-panel="2"] h2 {font-size:clamp(48px,5vw,72px);font-weight:400;letter-spacing:.03em;}
:root[data-theme="mikaela"] .quote-mark {color:#b7cbdc;opacity:.6;}
:root[data-theme="mikaela"] .story-rule {width:110px;background:linear-gradient(90deg,var(--gold),transparent);}
:root[data-theme="mikaela"] .motion {background:rgba(255,255,255,.68);border-color:var(--line);}
:root[data-theme="mikaela"] :is(.caption p,.scroll-hint) {color:var(--muted);}
:root[data-theme="mikaela"] .progress-track {background:#dce5ed;}
:root[data-theme="mikaela"] .character-rail {background:#e5edf4;color:var(--ink);border-right-color:#c3d2df;}
:root[data-theme="mikaela"] :is(.rail-brand span,.rail-bottom,.rail-heading span) {color:var(--muted);}
:root[data-theme="mikaela"] :is(.rail-heading,.member-badge) {color:var(--gold);}
:root[data-theme="mikaela"] .member-badge {border-color:#c8baa0;}
:root[data-theme="mikaela"] .character-card img {border-color:#b4c5d4;}
:root[data-theme="mikaela"] .character-card[aria-pressed="true"] {background:rgba(255,255,255,.73);border-color:#ab9260;}
:root[data-theme="mikaela"] .character-card:hover {background:rgba(255,255,255,.5);}
@media(max-width:800px){
  :root[data-theme="mikaela"] .film:after {background:linear-gradient(0deg,var(--paper),rgba(238,243,247,.35) 26%,transparent 37%,transparent 70%,var(--paper) 90%);}
  :root[data-theme="mikaela"] .identity:before {display:none;}
  :root[data-theme="mikaela"] .identity,:root[data-theme="mikaela"] .stage[data-scene] .identity {top:12%;}
  :root[data-theme="mikaela"] .profile {top:54%;left:7%;right:7%;width:auto;max-width:none;display:block;}
  :root[data-theme="mikaela"] .profile .eyebrow {font-size:9px;letter-spacing:.04em;}
  :root[data-theme="mikaela"] .occupation {font-size:23px;margin-bottom:16px;}
  :root[data-theme="mikaela"] .facts {border-top:1px solid var(--line);padding:12px 0;}
  :root[data-theme="mikaela"] .facts dd {font-size:14px;}
  :root[data-theme="mikaela"] .hobby {padding-top:13px;gap:18px;}
  :root[data-theme="mikaela"] .hobby p {font-size:12px;}
  :root[data-theme="mikaela"] .story {top:55%;left:7%;width:86%;}
  :root[data-theme="mikaela"] .story .eyebrow {font-size:9px;}
  :root[data-theme="mikaela"] .story h2 {font-size:28px;}
  :root[data-theme="mikaela"] .story>p:not(.eyebrow) {font-size:16px;}
  :root[data-theme="mikaela"] .story[data-panel="2"] h2 {font-size:48px;}
}
@media(max-width:800px) and (max-height:760px){
  :root[data-theme="mikaela"] .profile {top:46%;}
  :root[data-theme="mikaela"] .occupation {font-size:21px;margin-bottom:12px;}
  :root[data-theme="mikaela"] .story {top:48%;}
}
@media(min-width:500px) and (max-width:800px) and (max-height:760px){
  :root[data-theme="mikaela"] .profile {top:54%;}
  :root[data-theme="mikaela"] .story {top:55%;}
}

/* MIKAELIN: a warm pink greeting, rounded lettering and tiny heart details. */
:root[data-theme="mikaelin"] {color-scheme:light;--muted:#85626d;--line:rgba(178,91,121,.22);scrollbar-color:#c594a6 var(--paper);}
:root[data-theme="mikaelin"] .film {background:var(--paper);}
:root[data-theme="mikaelin"] .film:after {background:linear-gradient(90deg,rgba(255,243,243,.98),rgba(255,243,243,.9) 24%,transparent 44%,transparent 64%,rgba(255,243,243,.94) 80%,#fff3f3),linear-gradient(0deg,var(--paper),transparent 24%,transparent 78%,rgba(255,243,243,.85));}
:root[data-theme="mikaelin"] .stage:before {border-color:var(--line);border-radius:24px;}
:root[data-theme="mikaelin"] :is(h1,.occupation,.story h2,.caption h2) {font-family:Jua,'Gowun Dodum','Malgun Gothic',sans-serif;font-weight:400;color:var(--ink);}
:root[data-theme="mikaelin"] h1 {font-size:clamp(46px,5.2vw,76px);letter-spacing:-.035em;line-height:1.35;text-shadow:0 3px 25px #fff5f4;}
:root[data-theme="mikaelin"] .stage:not([data-scene="0"]) h1 {font-size:29px;line-height:1.3;}
:root[data-theme="mikaelin"] h1 span {font-family:'Gowun Dodum',sans-serif;letter-spacing:.1em;font-size:10px;color:var(--muted);}
:root[data-theme="mikaelin"] .identity:before {content:'♡';display:block;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.55);color:var(--gold);font:26px/40px Georgia,serif;text-align:center;transform:rotate(-12deg);margin-bottom:23px;}
:root[data-theme="mikaelin"] .stage:not([data-scene="0"]) .identity:before {display:none;}
:root[data-theme="mikaelin"] :is(.eyebrow,.edition span,.facts dt,.hobby>span,.caption>span) {color:var(--gold);}
:root[data-theme="mikaelin"] .profile {top:29%;width:24%;max-width:280px;}
:root[data-theme="mikaelin"] .profile .eyebrow {font-size:10px;letter-spacing:.07em;}
:root[data-theme="mikaelin"] .occupation {font-size:27px;max-width:none;letter-spacing:-.015em;line-height:1.5;margin-bottom:24px;}
:root[data-theme="mikaelin"] .facts {gap:18px;justify-content:space-between;border-top-style:dashed;border-bottom-style:dashed;}
:root[data-theme="mikaelin"] .facts dd {font-family:'Gowun Dodum',sans-serif;font-size:17px;white-space:nowrap;}
:root[data-theme="mikaelin"] .hobby p {font-family:'Gowun Dodum',sans-serif;font-size:15px;color:var(--muted);}
:root[data-theme="mikaelin"] .story {width:31%;max-width:390px;}
:root[data-theme="mikaelin"] .story .eyebrow {font-size:10px;letter-spacing:.13em;}
:root[data-theme="mikaelin"] .story h2 {font-size:clamp(27px,2.8vw,40px);line-height:1.45;letter-spacing:-.02em;white-space:pre-line;color:#a34c6c;}
:root[data-theme="mikaelin"] .story>p:not(.eyebrow) {font-family:'Gowun Dodum','Malgun Gothic',sans-serif;font-size:18px;line-height:1.9;color:var(--ink);}
:root[data-theme="mikaelin"] .story[data-panel="2"]>p:not(.eyebrow) {font-size:24px;color:var(--gold);letter-spacing:.08em;}
:root[data-theme="mikaelin"] .quote-mark {display:none;}
:root[data-theme="mikaelin"] .story-rule {width:90px;background:linear-gradient(90deg,#c77f99,transparent);position:relative;}
:root[data-theme="mikaelin"] .story-rule:after {content:'♡';position:absolute;left:98px;top:-9px;color:var(--gold);font:16px Georgia,serif;}
:root[data-theme="mikaelin"] .motion {background:rgba(255,250,250,.85);border-color:var(--line);}
:root[data-theme="mikaelin"] :is(.caption p,.scroll-hint) {color:var(--muted);}
:root[data-theme="mikaelin"] .progress-track {background:#f0dbe2;}
:root[data-theme="mikaelin"] .character-rail {background:#f7e5eb;color:var(--ink);border-right-color:#e5c3cf;}
:root[data-theme="mikaelin"] :is(.rail-brand span,.rail-bottom,.rail-heading span) {color:var(--muted);}
:root[data-theme="mikaelin"] :is(.rail-heading,.member-badge) {color:var(--gold);}
:root[data-theme="mikaelin"] .member-badge {border-color:#dbb0c0;border-radius:12px;}
:root[data-theme="mikaelin"] .character-card {border-radius:15px;}
:root[data-theme="mikaelin"] .character-card img {border-color:#d4a0b2;border-radius:45% 45% 12px 12px;}
:root[data-theme="mikaelin"] .character-card[aria-pressed="true"] {background:#fff7f9;border-color:#cd8ea5;box-shadow:0 4px 12px rgba(139,68,92,.05);}
:root[data-theme="mikaelin"] .character-card:hover {background:rgba(255,255,255,.55);}
:root[data-theme="mikaelin"] .character-card[data-character="mikaelin"] strong {font-family:Jua,sans-serif;}
@media(min-width:801px) and (max-width:1200px){
  :root[data-theme="mikaelin"] .occupation {font-size:23px;}
  :root[data-theme="mikaelin"] .story>p:not(.eyebrow) {font-size:16px;}
}
@media(max-width:800px){
  :root[data-theme="mikaelin"] .film:after {background:linear-gradient(0deg,var(--paper),rgba(255,243,243,.3) 26%,transparent 37%,transparent 70%,var(--paper) 90%);}
  :root[data-theme="mikaelin"] .stage:before {border-radius:17px;}
  :root[data-theme="mikaelin"] .identity:before {display:none;}
  :root[data-theme="mikaelin"] .identity,:root[data-theme="mikaelin"] .stage[data-scene] .identity {top:12%;}
  :root[data-theme="mikaelin"] h1,:root[data-theme="mikaelin"] .stage[data-scene] h1,:root[data-theme="mikaelin"] .stage:not([data-scene="0"]) h1 {font-size:31px;line-height:1.2;}
  :root[data-theme="mikaelin"] h1 span {font-size:8px;letter-spacing:.02em;}
  :root[data-theme="mikaelin"] .profile {top:54%;left:7%;right:7%;width:auto;max-width:none;display:block;}
  :root[data-theme="mikaelin"] .profile .eyebrow {font-size:9px;letter-spacing:.02em;}
  :root[data-theme="mikaelin"] .occupation {font-size:23px;margin-bottom:15px;}
  :root[data-theme="mikaelin"] .facts {border-top:1px dashed var(--line);padding:11px 0;}
  :root[data-theme="mikaelin"] .facts dd {font-size:14px;}
  :root[data-theme="mikaelin"] .hobby {padding-top:12px;gap:20px;}
  :root[data-theme="mikaelin"] .hobby p {font-size:13px;}
  :root[data-theme="mikaelin"] .story {top:55%;left:7%;width:86%;max-width:none;}
  :root[data-theme="mikaelin"] .story .eyebrow {font-size:9px;}
  :root[data-theme="mikaelin"] .story h2 {font-size:26px;margin-bottom:15px;}
  :root[data-theme="mikaelin"] .story>p:not(.eyebrow) {font-size:16px;line-height:1.8;}
  :root[data-theme="mikaelin"] .story[data-panel="2"]>p:not(.eyebrow) {font-size:23px;}
}
@media(max-width:800px) and (max-height:760px){
  :root[data-theme="mikaelin"] .profile {top:46%;}
  :root[data-theme="mikaelin"] .occupation {font-size:21px;margin-bottom:12px;}
  :root[data-theme="mikaelin"] .story {top:48%;}
  :root[data-theme="mikaelin"] .story h2 {font-size:23px;}
  :root[data-theme="mikaelin"] .story>p:not(.eyebrow) {font-size:15px;}
}
@media(min-width:500px) and (max-width:800px) and (max-height:760px){
  :root[data-theme="mikaelin"] .profile {top:54%;}
  :root[data-theme="mikaelin"] .story {top:55%;}
}

/* BIA: a honey-coloured sticker book for a very small, very grand queen. */
:root[data-theme="bia"] {color-scheme:light;--muted:#8b6d47;--line:rgba(183,124,40,.25);scrollbar-color:#d8a74c var(--paper);}
:root[data-theme="bia"] .film {background:var(--paper);}
:root[data-theme="bia"] .film:after {background:linear-gradient(90deg,rgba(255,247,223,.98),rgba(255,247,223,.91) 25%,transparent 44%,transparent 64%,rgba(255,247,223,.95) 82%,#fff7df),linear-gradient(0deg,var(--paper),transparent 24%,transparent 77%,rgba(255,247,223,.9));}
:root[data-theme="bia"] .stage:before {border:2px dashed #e7c982;border-radius:30px;inset:14px;}
:root[data-theme="bia"] :is(h1,.occupation,.story h2,.caption h2) {font-family:Jua,'Gowun Dodum',sans-serif;font-weight:400;color:var(--ink);}
:root[data-theme="bia"] h1 {font-size:clamp(40px,4.7vw,68px);letter-spacing:-.04em;line-height:1.3;text-shadow:2px 3px 0 #ffe7a0,0 0 24px #fff7df;}
:root[data-theme="bia"] .stage:not([data-scene="0"]) h1 {font-size:28px;line-height:1.25;}
:root[data-theme="bia"] h1 span:not(.character-alias) {font-family:'Gowun Dodum',sans-serif;font-size:9px;letter-spacing:.08em;color:var(--muted);margin-top:14px;}
:root[data-theme="bia"] h1 .character-alias {display:table;max-width:100%;font-family:'Gowun Dodum',sans-serif;font-size:12px;color:#a95670;letter-spacing:-.02em;line-height:1.5;margin-top:17px;padding:7px 12px;border:1px solid #edc2c6;background:#fff0ef;border-radius:20px;transform:rotate(-3deg);text-shadow:none;}
:root[data-theme="bia"] .identity:before {content:'👑';display:block;width:56px;height:56px;text-align:center;font-size:32px;line-height:56px;margin-bottom:24px;background:#ffe69a;border:3px solid #fffdf3;border-radius:20px;box-shadow:0 3px 0 #e9c779;transform:rotate(-12deg);}
:root[data-theme="bia"] .identity:after {content:'✿';position:absolute;top:36px;left:72px;font-size:27px;color:#d88594;transform:rotate(12deg);}
:root[data-theme="bia"] .stage:not([data-scene="0"]) .identity:before,:root[data-theme="bia"] .stage:not([data-scene="0"]) .identity:after {display:none;}
:root[data-theme="bia"] .identity {bottom:26%;}
:root[data-theme="bia"] :is(.eyebrow,.edition span,.facts dt,.hobby>span,.caption>span) {color:var(--gold);}
:root[data-theme="bia"] .edition {font-size:9px;letter-spacing:.12em;border:1px solid #ead298;background:rgba(255,253,240,.8);padding:10px 16px;border-radius:20px;}
:root[data-theme="bia"] .edition i {border-radius:50%;transform:none;background:#d58697;}
:root[data-theme="bia"] .profile {top:27%;right:4%;width:26%;max-width:300px;padding:24px 22px;background:rgba(255,253,240,.9);border:2px solid #efd394;border-radius:27px;box-shadow:4px 5px 0 rgba(225,186,96,.17);transform:rotate(1deg);}
:root[data-theme="bia"] .profile:after {content:'✿';position:absolute;top:-18px;right:18px;font-size:32px;color:#db91a0;text-shadow:2px 2px 0 #fff;}
:root[data-theme="bia"] .profile .eyebrow {font-size:9px;letter-spacing:.03em;line-height:1.6;margin-bottom:14px;}
:root[data-theme="bia"] .occupation {font-size:26px;max-width:none;letter-spacing:-.035em;line-height:1.4;margin-bottom:19px;}
:root[data-theme="bia"] .facts {display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:12px;padding:14px 0;border-top:1px dashed #ddbd77;border-bottom:1px dashed #ddbd77;}
:root[data-theme="bia"] .facts dt {font-size:10px;margin-bottom:8px;}
:root[data-theme="bia"] .facts dd {font-family:'Gowun Dodum',sans-serif;font-size:15px;}
:root[data-theme="bia"] .facts dd small {font-family:'Gowun Dodum',sans-serif;font-size:10px;line-height:1.5;margin-top:5px;word-break:keep-all;}
:root[data-theme="bia"] .hobby {gap:12px;padding-top:16px;}
:root[data-theme="bia"] .hobby>span {font-size:11px;}
:root[data-theme="bia"] .hobby p {font-family:'Gowun Dodum',sans-serif;font-size:13px;line-height:1.8;color:var(--muted);word-break:keep-all;}
:root[data-theme="bia"] .story {width:32%;max-width:400px;top:35%;}
:root[data-theme="bia"] .story .eyebrow {font-size:9px;letter-spacing:.1em;background:#ffebaf;border:1px solid #eed08a;display:table;padding:7px 12px;border-radius:20px;margin-bottom:17px;}
:root[data-theme="bia"] .story h2 {font-size:clamp(25px,2.65vw,38px);color:#a46129;white-space:pre-line;line-height:1.4;letter-spacing:-.035em;margin-bottom:17px;}
:root[data-theme="bia"] .story>p:not(.eyebrow) {font-family:'Gowun Dodum','Malgun Gothic',sans-serif;font-size:16px;color:var(--ink);line-height:1.85;white-space:pre-line;}
:root[data-theme="bia"] .story[data-panel="2"] h2 {color:#b25e77;}
:root[data-theme="bia"] .story[data-panel="2"]>p:not(.eyebrow):last-of-type {background:rgba(255,251,230,.94);border:1px dashed #deb962;border-radius:17px;padding:12px 15px;font-size:13px;line-height:1.7;margin-top:17px;box-shadow:3px 3px 0 rgba(238,198,111,.18);}
:root[data-theme="bia"] :is(.quote-mark,.story-rule) {display:none;}
:root[data-theme="bia"] .motion {border:1px solid #e9cb86;background:#fffbee;box-shadow:0 3px 0 rgba(229,196,127,.22);}
:root[data-theme="bia"] :is(.caption p,.scroll-hint) {color:var(--muted);}
:root[data-theme="bia"] .caption h2 {font-size:24px;}
:root[data-theme="bia"] .progress-track {background:#f5e6bb;height:5px;}
:root[data-theme="bia"] #progress {background:linear-gradient(90deg,#edbd42,#dd8fa0);border-radius:0 4px 4px 0;}
:root[data-theme="bia"] .chapters button[aria-current] {background:#ffefb6;border:1px solid #eacb7b;border-radius:16px;padding:10px 14px;}
:root[data-theme="bia"] .character-rail {background:radial-gradient(#e5c98c 1px,transparent 1px) 0 0/14px 14px,#fff0c9;color:var(--ink);border-right:2px solid #ebd192;}
:root[data-theme="bia"] :is(.rail-brand span,.rail-bottom,.rail-heading span) {color:var(--muted);}
:root[data-theme="bia"] :is(.rail-heading,.member-badge) {color:var(--gold);}
:root[data-theme="bia"] .member-badge {border-color:#dbb36b;border-radius:12px;background:#fff9e9;}
:root[data-theme="bia"] .character-card {border-radius:20px;}
:root[data-theme="bia"] .character-card img {border:2px solid #fffaf0;border-radius:45% 45% 16px 16px;box-shadow:0 0 0 1px #e0bb71;}
:root[data-theme="bia"] .character-card[aria-pressed="true"] {background:#fffaf0;border:2px solid #e5b34c;box-shadow:0 4px 0 #efd89f;}
:root[data-theme="bia"] .character-card:hover {background:#fff7e1;}
:root[data-theme="bia"] .character-card[data-character="bia"] strong {font-family:Jua,sans-serif;color:#a86a2c;}
.biography-open {pointer-events:auto;background:#ffe598;border:2px solid #ecc262;border-radius:24px;color:#775122;padding:11px 17px;font:16px Jua,'Malgun Gothic',sans-serif;box-shadow:0 4px 0 #e8bc5b;margin-top:5px;}
.biography-open:hover {background:#ffedb5;transform:translateY(-1px);}
.biography-open[hidden] {display:none;}
.biography-dialog {width:min(560px,calc(100vw - 32px));max-height:85svh;overflow:auto;overscroll-behavior:contain;background:#fff9e7;border:3px solid #ebc46c;border-radius:30px;padding:32px;color:#664521;box-shadow:8px 8px 0 rgba(141,92,34,.16);scrollbar-width:thin;scrollbar-color:#d8a74c transparent;}
.biography-dialog::backdrop {background:rgba(59,43,21,.4);backdrop-filter:blur(5px);}
.biography-close {display:block;margin-left:auto;background:#ffedb9;border:1px solid #e7c97f;border-radius:16px;padding:8px 12px;font:14px 'Gowun Dodum',sans-serif;}
.biography-sticker {display:block;font-size:28px;margin:4px 0 12px;letter-spacing:8px;}
.biography-dialog h2 {font:32px/1.35 Jua,sans-serif;margin:0 0 18px;color:#a46628;}
.biography-dialog p {font:16px/1.9 'Gowun Dodum','Malgun Gothic',sans-serif;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;}
#biography-name-note {background:#ffebe9;border:1px dashed #dda7ad;border-radius:16px;padding:13px 15px;font-size:14px;color:#a0586b;margin-bottom:24px;}
@media(min-width:801px) and (max-height:760px){
  :root[data-theme="bia"] .story {top:34%;}
  :root[data-theme="bia"] .story h2 {font-size:29px;margin-bottom:12px;}
  :root[data-theme="bia"] .story>p:not(.eyebrow) {font-size:15px;line-height:1.75;}
  :root[data-theme="bia"] .story .eyebrow {margin-bottom:12px;}
}
@media(min-width:801px) and (max-width:1200px){
  :root[data-theme="bia"] .profile {width:27%;padding:20px 17px;}
  :root[data-theme="bia"] .occupation {font-size:23px;}
  :root[data-theme="bia"] .story {width:34%;}
  :root[data-theme="bia"] .story h2 {font-size:28px;}
}
@media(max-width:800px){
  :root[data-theme="bia"] .film:after {background:linear-gradient(0deg,var(--paper),rgba(255,247,223,.25) 26%,transparent 37%,transparent 70%,var(--paper) 90%);}
  :root[data-theme="bia"] .stage:before {inset:7px;border-radius:20px;border-width:1px;}
  :root[data-theme="bia"] .identity:before,:root[data-theme="bia"] .identity:after {display:none;}
  :root[data-theme="bia"] .identity,:root[data-theme="bia"] .stage[data-scene] .identity {top:10%;left:7%;bottom:auto;}
  :root[data-theme="bia"] h1,:root[data-theme="bia"] .stage:not([data-scene="0"]) h1 {font-size:30px;line-height:1.25;}
  :root[data-theme="bia"] h1 .character-alias {font-size:10px;padding:4px 8px;margin-top:7px;transform:rotate(-2deg);}
  :root[data-theme="bia"] h1 span:not(.character-alias) {display:none;}
  :root[data-theme="bia"] .motion {padding:7px 10px;font-size:11px;}
  :root[data-theme="bia"] .motion span {font-size:10px;}
  :root[data-theme="bia"] .header {top:16px;}
  :root[data-theme="bia"] .profile {top:54%;left:7%;right:7%;width:auto;max-width:none;display:block;transform:none;padding:15px;border-radius:20px;}
  :root[data-theme="bia"] .profile:after {font-size:25px;top:-14px;right:13px;}
  :root[data-theme="bia"] .profile .eyebrow {font-size:8px;margin-bottom:10px;}
  :root[data-theme="bia"] .occupation {font-size:21px;margin-bottom:10px;}
  :root[data-theme="bia"] .facts {padding:9px 0;gap:9px;}
  :root[data-theme="bia"] .facts dt {font-size:9px;margin-bottom:5px;}
  :root[data-theme="bia"] .facts dd {font-size:13px;}
  :root[data-theme="bia"] .facts dd small {font-size:9px;}
  :root[data-theme="bia"] .hobby {padding-top:10px;gap:10px;}
  :root[data-theme="bia"] .hobby p {font-size:11px;}
  :root[data-theme="bia"] .story {top:54%;left:7%;width:86%;max-width:none;}
  :root[data-theme="bia"] .story .eyebrow {font-size:8px;padding:5px 9px;margin-bottom:11px;}
  :root[data-theme="bia"] .story h2 {font-size:25px;margin-bottom:10px;}
  :root[data-theme="bia"] .story>p:not(.eyebrow) {font-size:14px;line-height:1.7;}
  :root[data-theme="bia"] .story[data-panel="2"]>p:not(.eyebrow):last-of-type {font-size:11px;line-height:1.6;padding:9px 10px;margin-top:11px;}
  :root[data-theme="bia"] .biography-open {font-size:13px;padding:9px 12px;}
  :root[data-theme="bia"] .chapters {gap:4px;}
  :root[data-theme="bia"] .chapters button {font-size:10px;}
  :root[data-theme="bia"] .chapters button[aria-current] {padding:8px 9px;border-radius:12px;}
  .biography-dialog {padding:20px;border-radius:23px;max-height:88svh;}
  .biography-dialog h2 {font-size:27px;}
  .biography-dialog p {font-size:15px;}
}
@media(max-width:800px) and (max-height:760px){
  :root[data-theme="bia"] .profile {top:46%;padding:12px 13px;}
  :root[data-theme="bia"] .profile .eyebrow {margin-bottom:7px;}
  :root[data-theme="bia"] .occupation {font-size:20px;margin-bottom:8px;}
  :root[data-theme="bia"] .facts {padding:7px 0;}
  :root[data-theme="bia"] .hobby {padding-top:8px;}
  :root[data-theme="bia"] .story {top:47%;}
  :root[data-theme="bia"] .story h2 {font-size:23px;}
  :root[data-theme="bia"] .story>p:not(.eyebrow) {font-size:13px;line-height:1.6;}
}
@media(min-width:500px) and (max-width:800px) and (max-height:760px){
  :root[data-theme="bia"] .profile {top:54%;}
  :root[data-theme="bia"] .story {top:55%;}
}