:root {
  --r9-ink: #24211e;
  --r9-paper: #e7e0d1;
  --r9-cream: #f4efe3;
  --r9-orange: #c85c32;
  --r9-red: #a03d30;
  --r9-blue: #385c72;
  --r9-line: rgba(238, 232, 217, .54);
  --r9-shadow: rgba(10, 10, 9, .48);
  --r9-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --r9-mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #11110f;
  color: var(--r9-paper);
  font-family: var(--r9-serif);
}
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #f4aa68; outline-offset: 4px; }
.r9-skip { position: fixed; top: -80px; left: 20px; z-index: 500; padding: 10px 16px; color: #111; background: #fff; }
.r9-skip:focus { top: 20px; }
.r9-app { position: relative; width: 100vw; height: 100dvh; min-height: 560px; overflow: hidden; isolation: isolate; background: #171714; }
.r9-app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .23;
  background-image:
    radial-gradient(circle at 18% 35%, transparent 0 2px, rgba(255,255,255,.09) 2.5px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  background-size: 113px 97px, 100% 4px;
  mix-blend-mode: soft-light;
}
.r9-screen { position: absolute; inset: 0; display: block; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transform: scale(1.025); }
.r9-screen.is-active { z-index: 10; visibility: visible; opacity: 1; pointer-events: auto; transform: scale(1); }
.r9-screen.is-entering { animation: r9-screen-in .75s cubic-bezier(.22,.82,.25,1) both; }
.r9-screen.is-leaving { z-index: 11; visibility: visible; animation: r9-screen-out .38s ease both; }
@keyframes r9-screen-in { from { opacity: 0; transform: scale(1.035); clip-path: inset(0 0 0 100%); } 54% { opacity: 1; } to { transform: scale(1); clip-path: inset(0); } }
@keyframes r9-screen-out { to { opacity: 0; filter: blur(7px) sepia(.35); transform: scale(.98); } }

/* Start */
.r9-start { cursor: pointer; background: #282928; }
.r9-start::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 64%, rgba(92,99,99,.32), transparent 35%),
    linear-gradient(180deg, #343638, #202224 54%, #111923 76%, #080c11);
}
.r9-start::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 57%, transparent 0 23%, rgba(7,8,9,.23) 55%, rgba(8,8,9,.65)); }
.r9-media-slot { background-color: #343534; background-image: linear-gradient(27deg,transparent 49.85%,rgba(234,229,218,.14) 50%,transparent 50.15%),linear-gradient(153deg,transparent 49.85%,rgba(234,229,218,.14) 50%,transparent 50.15%),repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.025) 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.025) 28px); }
.r9-media-slot>span { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.55em 1em;border:1px solid rgba(239,234,222,.17);color:rgba(239,234,222,.27);font:500 clamp(10px,.72vw,14px)/1 var(--r9-mono);letter-spacing:.18em;white-space:nowrap; }
.r9-start-art { position: absolute; inset: 10% 8%; z-index: 2; overflow: hidden; border: 1px solid rgba(235,230,220,.08); opacity:.55; }
.r9-version { position: absolute; z-index: 4; top: 1.4vw; left: 3.3vw; margin: 0; font-size: clamp(14px,1.15vw,26px); color: rgba(255,255,255,.86); }
.r9-start-hit { position: absolute; inset: 0; z-index: 6; border: 0; background: none; cursor: pointer; }
.r9-wordmark { position: absolute; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%,-50%); color: white; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.r9-wordmark b { font-weight: 500; font-size: clamp(42px,6.6vw,126px); letter-spacing: -.08em; white-space: nowrap; }
.r9-wordmark small { margin-top: -1.1vw; font-family: Georgia,serif; font-size: clamp(12px,1.5vw,28px); letter-spacing: .76em; transform: translateX(.38em); }
.r9-start-label { position: absolute; left: 50%; bottom: 15.4%; padding: 0 4vw .4vw; transform: translateX(-50%); font-family: Georgia,serif; font-size: clamp(18px,1.8vw,34px); letter-spacing: .28em; border-bottom: 1px solid rgba(255,255,255,.48); animation: r9-start-pulse 2.4s ease-in-out infinite; }
@keyframes r9-start-pulse { 50% { opacity: .45; letter-spacing: .4em; } }
.r9-tap-hint { position: absolute; z-index: 7; left: 50%; bottom: 5%; margin: 0; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .15em; }
.r9-start-tools { position: absolute; z-index: 8; right: 3vw; top: 46%; display: flex; flex-direction: column; gap: 1.1vw; transform: translateY(-50%); }
.r9-start-tools button { width: clamp(42px,3.5vw,68px); aspect-ratio: 1; border: 0; border-radius: 50%; color: #57595a; background: rgba(230,232,230,.8); font: 500 clamp(20px,1.65vw,32px)/1 var(--r9-mono); box-shadow: 0 5px 18px rgba(0,0,0,.22); cursor: pointer; transition: .25s; }
.r9-start-tools button:hover { color: #222; background: white; transform: scale(1.08); }

/* Shared HUD */
.r9-lobby { background: #888273; }
.r9-lobby::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15,16,15,.5), transparent 20%, transparent 72%, rgba(15,17,18,.43)); }
.r9-lobby-art { position: absolute; inset: 0; animation: r9-lobby-breathe 9s ease-in-out infinite alternate; }
.r9-lobby-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(25,23,20,.26),transparent 25%,transparent 73%,rgba(14,14,13,.34)); }
@keyframes r9-lobby-breathe { to { transform: scale(1.012); filter: brightness(1.06); } }
.r9-hud { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 11.5%; min-height: 72px; display: flex; align-items: flex-start; padding: 1.5vw 2.4vw; background: linear-gradient(180deg,rgba(24,23,21,.5),transparent); }
.r9-profile { position: relative; width: 21%; min-width: 250px; height: 100%; display: grid; grid-template-columns: 7vw 3.6vw; grid-template-rows: 1fr 1fr; align-items: center; }
.r9-level { grid-row: 1/3; display: grid; place-items: center; width: 8vw; max-width: 148px; aspect-ratio: 2/1; color: #dedbd4; font-size: clamp(10px,.75vw,15px); border-radius: 50%; background: radial-gradient(ellipse,rgba(42,45,43,.8),rgba(28,30,29,.26) 66%,transparent 68%); }
.r9-level::before,.r9-level::after { content: ""; position: absolute; left: .2vw; width: 8vw; max-width: 148px; height: 2px; background: rgba(238,235,226,.5); transform: rotate(18deg); }
.r9-level::after { transform: rotate(-12deg); }
.r9-level b { margin-left: .25em; font-size: clamp(23px,2.2vw,42px); font-weight: 400; }
.r9-avatar-mark { grid-row: 1; grid-column: 2; display: grid; place-items: center; width: 3.4vw; aspect-ratio: 1; min-width: 36px; border: 2px solid var(--r9-line); border-radius: 50%; font-size: 1.4vw; }
.r9-profile strong { grid-row: 2; grid-column: 2/4; white-space: nowrap; font-size: clamp(12px,1vw,20px); font-weight: 500; }
.r9-hud-actions { display: flex; height: 5vw; min-height: 52px; margin-left: .6vw; }
.r9-hud-actions button { position: relative; width: 5vw; min-width: 60px; border: 0; color: rgba(242,239,229,.82); background: none; cursor: pointer; }
.r9-hud-actions button::before { content: ""; position: absolute; left: 50%; top: 8%; width: 2vw; min-width: 25px; aspect-ratio: 1; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--r9-line); }
.r9-hud-actions span { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-size: .66vw; letter-spacing: .15em; }
.r9-hud-actions i { position: absolute; z-index: 2; top: -.35vw; right: .1vw; padding: .1em .4em; color: #b7dd85; background: rgba(38,55,38,.78); border-radius: 1em; font-size: .68vw; font-style: normal; }
.r9-currencies { display: flex; align-items: center; height: 2.4vw; min-height: 34px; margin-left: auto; color: #eee9de; background: rgba(38,36,33,.56); border-block: 1px solid rgba(239,235,224,.24); }
.r9-currencies span { display: flex; align-items: center; gap: .75vw; min-width: 8.6vw; padding: 0 .8vw; }
.r9-currencies b { font-size: clamp(16px,1.25vw,24px); font-weight: 400; }
.r9-currencies em { margin-left: auto; font: 300 2vw/1 var(--r9-mono); color: rgba(242,239,229,.66); }
.coin { display: inline-block; width: 1.3vw; min-width: 16px; aspect-ratio: .72; border-radius: 50% 50% 55% 55% / 65% 65% 35% 35%; transform: rotate(9deg); background: linear-gradient(135deg,#f6e7c8,#a77732 67%,#ecd093); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.coin-drop { background: linear-gradient(135deg,#ffe6bd,#c88740 60%,#f9ce77); }
.coin-gem { background: linear-gradient(135deg,#f6d4e8,#aa4c92 60%,#ef91d0); }
.coin-thread { border-radius: 48% 48% 35% 35%; background: linear-gradient(135deg,#fff1c6,#d09a3d 60%,#f1cf78); }
.r9-left-rail { position: absolute; z-index: 25; left: 1.8vw; top: 14%; bottom: 8%; display: flex; flex-direction: column; justify-content: space-between; }
.r9-left-rail button { display: grid; grid-template-columns: 3vw 1fr; align-items: center; width: 7vw; min-width: 94px; border: 0; color: rgba(247,243,233,.85); background: none; text-align: left; cursor: pointer; }
.r9-left-rail i { display: grid; place-items: center; width: 2.7vw; min-width: 36px; aspect-ratio: 1; font: normal clamp(21px,2vw,38px)/1 sans-serif; text-shadow: 0 2px 8px #111; }
.r9-left-rail span { font-size: clamp(12px,1.05vw,20px); text-shadow: 0 2px 6px #111; }
.r9-left-rail button:hover { color: white; transform: translateX(5px); }
.r9-lobby-panel { position: absolute; z-index: 26; top: 10.5%; right: 2.5%; width: min(27vw,530px); bottom: 4%; display: flex; flex-direction: column; gap: 1.2vw; justify-content: center; }
.r9-event-card { position: relative; height: 38%; min-height: 215px; overflow: hidden; border: 0; color: #f7f6f1; background: linear-gradient(140deg,rgba(35,55,65,.9),rgba(18,22,25,.75)); text-align: left; cursor: pointer; clip-path: polygon(5% 0,100% 0,96% 92%,5% 100%,0 55%); }
.r9-event-card::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.28); }
.r9-event-card small { position: absolute; z-index: 2; top: 14%; left: 10%; letter-spacing: .35em; font-size: .55vw; }
.r9-event-card>b { position: absolute; z-index: 2; top: 22%; left: 10%; font: 900 clamp(24px,2.6vw,54px)/.75 Arial,sans-serif; letter-spacing: -.08em; transform: skew(-7deg); text-shadow: 3px 4px 0 #39536a; }
.r9-event-card strong { position: absolute; z-index: 2; left: 11%; bottom: 28%; font-size: clamp(17px,1.5vw,30px); }
.r9-event-card em { position: absolute; z-index: 2; right: 9%; bottom: 10%; padding: .25em 1em; color: #31291d; background: var(--r9-cream); font-style: normal; font-size: 1.1vw; transform: rotate(2deg); }
.r9-orbit { position: absolute; right: 10%; top: 8%; width: 8vw; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.56); border-radius: 50%; animation: r9-orbit 6s linear infinite; }
.r9-orbit::before,.r9-orbit::after { content: ""; position: absolute; inset: 13% -18%; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: rotate(33deg); }
.r9-orbit::after { transform: rotate(-33deg); }
@keyframes r9-orbit { to { rotate: 360deg; } }
.r9-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.r9-shortcuts button,.r9-summon-card { position: relative; min-height: 7.2vw; border: 1px solid rgba(255,255,255,.55); color: white; background: rgba(31,36,37,.72); text-align: left; cursor: pointer; overflow: hidden; }
.r9-shortcuts button::before { content: ""; position: absolute; right: -8%; bottom: -45%; width: 7vw; aspect-ratio: 1; border: 1.2vw solid rgba(255,255,255,.13); border-radius: 50%; }
.r9-shortcuts small,.r9-summon-card small { display: block; padding: 1vw 1vw 0; font: .62vw var(--r9-mono); }
.r9-shortcuts b,.r9-summon-card b { display: block; padding: .2vw 1vw 1vw; font-size: clamp(14px,1.2vw,24px); }
.r9-summon-card { min-height: 6.2vw; background: linear-gradient(90deg,rgba(42,50,52,.9),rgba(55,39,29,.83)); }
.r9-summon-card span { position: absolute; right: 9%; top: 50%; font-size: 4.2vw; color: #ce673b; transform: translateY(-50%); }
.r9-event-card:hover,.r9-shortcuts button:hover,.r9-summon-card:hover { filter: brightness(1.18); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.r9-lobby-panel>p { margin: 0; text-align: right; font-size: 1.05vw; }
.r9-lobby-panel>p i { display: inline-block; width: 3.8vw; height: 1px; background: rgba(255,255,255,.55); vertical-align: middle; }
.r9-dialogue { position: absolute; z-index: 27; left: 3%; right: 4%; bottom: 1.5%; margin: 0; font-size: clamp(12px,1vw,20px); text-shadow: 0 2px 5px #111; }

/* Shared page top */
.r9-page-top { position: absolute; z-index: 40; top: 0; left: 0; right: 0; height: 9%; min-height: 62px; display: flex; align-items: center; padding: .7vw 2.2vw; background: linear-gradient(180deg,rgba(28,27,25,.72),transparent); }
.r9-back { width: 3.1vw; min-width: 43px; aspect-ratio: 1; border: 0; color: #eae6dd; background: none; font: 300 clamp(50px,4vw,78px)/.5 Georgia,serif; cursor: pointer; }
.r9-page-glyph { display: grid; place-items: center; width: 2.8vw; min-width: 40px; aspect-ratio: 1; margin-left: 2vw; border: 2px solid #e8e2d7; font-size: .9vw; }
.r9-tabs { display: flex; height: 3.7vw; min-height: 50px; margin-left: auto; background: rgba(36,34,32,.86); box-shadow: 0 6px 20px rgba(0,0,0,.26); }
.r9-tabs button { min-width: 8vw; padding: 0 2vw; border: 0; border-right: 1px solid rgba(255,255,255,.13); color: rgba(240,235,225,.45); background: none; cursor: pointer; font-size: clamp(13px,1vw,19px); }
.r9-tabs button.is-active { color: #d87844; border-bottom: 2px solid #d87844; }
.r9-tabs button:last-child { min-width: 4.8vw; }
.r9-tabs i { font-style: normal; }

/* Characters */
.r9-characters {
  color: #eee8dc;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(139,110,72,.14),transparent 43%),
    radial-gradient(circle at 82% 15%,rgba(125,66,41,.12),transparent 30%),
    linear-gradient(108deg,#171715 0,#28231e 51%,#171716 100%);
  perspective: 1400px;
}
.r9-characters::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(115deg,transparent 0 8.4%,rgba(215,206,190,.08) 8.45% 8.52%,transparent 8.58% 79%,rgba(178,76,42,.055) 79.05% 79.15%,transparent 79.2%),
    repeating-linear-gradient(90deg,transparent 0 9.92%,rgba(246,238,222,.021) 10% 10.08%),
    repeating-linear-gradient(0deg,transparent 0 33px,rgba(246,238,222,.013) 34px 35px);
}
.r9-characters::after {
  content: "ARCANIST  /  CHARACTER";
  position: absolute;
  z-index: 1;
  right: -4.5%;
  top: 19%;
  color: rgba(207,91,48,.05);
  font: 4.2vw/1 var(--r9-mono);
  letter-spacing: .18em;
  transform: rotate(90deg);
  transform-origin: 100% 0;
  pointer-events: none;
}
.r9-character-top { height: 11%; padding: .85vw 7.2vw 0 2.2vw; background: linear-gradient(180deg,rgba(18,18,17,.92),rgba(21,20,19,.25) 72%,transparent); }
.r9-character-controls { display:flex; align-items:center; gap:1.6vw; }
.r9-character-controls .r9-back { width:3.4vw; border:1px solid transparent; font-size:clamp(56px,4.5vw,86px); transition:.22s; }
.r9-character-controls .r9-back:hover { transform:translateX(-5px); color:#fff; }
.r9-character-home { position:relative; display:grid; place-items:center; width:2.9vw; min-width:42px; aspect-ratio:1; padding:0; border:2px solid rgba(237,231,217,.78); color:rgba(237,231,217,.86); background:rgba(25,25,24,.2); font-size:.74vw; cursor:pointer; }
.r9-character-home::after { content:""; position:absolute; inset:21%; border:1px solid rgba(237,231,217,.38); }
.r9-character-top .r9-tabs { height:4.15vw; min-height:54px; background:rgba(29,29,28,.92); }
.r9-character-top .r9-tabs button { min-width:10.8vw; font-size:clamp(14px,1.12vw,21px); }
.r9-character-top .r9-tabs button.is-active { color:#d66f42; border-bottom-color:#d66f42; }
.r9-character-top .r9-tabs .r9-filter { min-width:5.8vw; padding:0; }
.r9-filter span { position:relative; display:block; width:25px; height:22px; margin:auto; clip-path:polygon(0 0,100% 0,63% 43%,63% 100%,40% 86%,40% 43%); background:#aaa7a0; }

.r9-character-grid {
  position: absolute;
  z-index: 10;
  top: 12.5%;
  bottom: 5.2%;
  left: 7.2%;
  right: 7.2%;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  align-content: start;
  align-items: start;
  gap: clamp(18px,2.4vh,30px) clamp(10px,1.45vw,28px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2vh 1.2vw 5vh;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(197,158,112,.46) rgba(255,255,255,.035);
}
.r9-character-grid::-webkit-scrollbar { width:7px; }
.r9-character-grid::-webkit-scrollbar-track { background:rgba(255,255,255,.035); }
.r9-character-grid::-webkit-scrollbar-thumb { background:rgba(197,158,112,.46);border-radius:10px; }
.r9-character-card {
  --afflatus:#8b7040;
  --rarity-rgb:199,99,44;
  --rarity-deep-rgb:92,43,25;
  --rarity-edge:#f1bd79;
  --rarity-spark:#ffcb81;
  --rarity-square:#ffb658;
  position: relative;
  width: 100%;
  max-width: 286px;
  justify-self: center;
  aspect-ratio: 250 / 555;
  overflow: visible;
  padding: 0;
  border: 0;
  color: #fff9ed;
  background: transparent;
  cursor: pointer;
  text-align: center;
  filter: drop-shadow(0 13px 13px rgba(0,0,0,.42));
  isolation: isolate;
  transform-origin: 50% 100%;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),filter .3s;
}
.r9-character-card:focus-visible { outline:2px solid rgba(255,225,169,.95); outline-offset:5px; }
.r9-character-card::before {
  content: "";
  position: absolute;
  inset: 2.8% 4.7%;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(var(--rarity-rgb),.62);
  border-bottom-color: var(--rarity-edge);
  border-radius: 1.6%;
  box-shadow: inset 0 0 0 1px rgba(48,27,15,.26),0 0 7px rgba(var(--rarity-rgb),.22);
}
.r9-character-card::after {
  content: none;
}
.rarity-6 { --rarity-rgb:199,99,44;--rarity-deep-rgb:92,43,25;--rarity-edge:#f1bd79;--rarity-spark:#ffcb81;--rarity-square:#ffb658; }
.rarity-5 { --rarity-rgb:172,138,48;--rarity-deep-rgb:91,71,28;--rarity-edge:#e8d071;--rarity-spark:#ffcb81;--rarity-square:#ffe758; }
.rarity-4 { --rarity-rgb:132,74,146;--rarity-deep-rgb:70,38,80;--rarity-edge:#d596eb;--rarity-spark:#da81ff;--rarity-square:#da81ff; }
.rarity-3 { --rarity-rgb:63,98,146;--rarity-deep-rgb:31,50,81;--rarity-edge:#82a9dc;--rarity-spark:#82a9dc;--rarity-square:#82a9dc; }
.rarity-2 { --rarity-rgb:74,112,79;--rarity-deep-rgb:37,61,43;--rarity-edge:#8fbd93;--rarity-spark:#8fbd93;--rarity-square:#8fbd93; }
.r9-card-visual { position:absolute; inset:2.7% 5.2%; z-index:1; overflow:hidden; border-radius:1.5%; background:#5b5859; clip-path:polygon(1.5% 0,98.5% 0,100% .7%,100% 99.3%,98.5% 100%,1.5% 100%,0 99.3%,0 .7%); }
.r9-card-visual::before,.r9-card-visual::after { content:none; }
.r9-card-visual img { position:relative;z-index:1;display:block;width:100%; height:100%; object-fit:cover; object-position:center; transition:filter .3s,opacity .24s; user-select:none; }
.r9-character-card.is-skin-profile .r9-card-poster { transform:scale(1.06);transform-origin:50% 12%; }
.r9-card-animation { position:absolute;z-index:1;left:var(--r9-animation-left,0);top:var(--r9-animation-top,0);width:var(--r9-animation-width,100%);height:var(--r9-animation-height,100%);display:block;overflow:visible;pointer-events:none;opacity:0;transform:translate3d(var(--r9-animation-crop-x,0),var(--r9-animation-crop-y,0),0) scale(var(--r9-animation-crop-scale,1)) rotate(var(--r9-animation-rotate,0deg));transform-origin:50% 0;transition:opacity .28s ease; }
.r9-character-card.is-animation-ready .r9-card-animation { opacity:1; }
.r9-character-card.is-animation-ready .r9-card-poster { opacity:0; }
.r9-character-card.is-lucy-card .r9-card-poster,
.r9-character-card.is-lucy-card .r9-card-animation { transition:none; }
.r9-character-card.is-lucy-card.is-lucy-animation-ready .r9-card-poster { opacity:0; }
.r9-character-card.is-lucy-card .r9-card-animation { opacity:0; }
.r9-character-card.is-lucy-card .r9-card-animation.is-active { opacity:1; }
.r9-character-card.is-persistent-card.is-persistent-profile-configured .r9-card-poster { display:none;opacity:0;visibility:hidden;transition:none; }
.r9-character-card.is-persistent-card .r9-card-animation { opacity:0;visibility:hidden;transition:none; }
.r9-character-card.is-persistent-card .r9-card-animation.is-active { opacity:1;visibility:visible; }
.r9-character-card.is-persistent-card .r9-card-visual { background:#5b5859; }
.r9-live2d-canvas,.r9-spine-host,.r9-spine-host>.spine-player,.r9-spine-host .spine-player-canvas { display:block;width:100%!important;height:100%!important; }
.r9-live2d-canvas,.r9-spine-host { position:absolute;inset:0; }
.r9-live2d-hires-host { position:absolute;z-index:1;left:0;top:0;width:600%;height:600%;transform:scale(.166667);transform-origin:0 0; }
.r9-live2d-hires-host>.r9-live2d-canvas { position:absolute;inset:0;display:block;width:100%!important;height:100%!important; }
.r9-card-animation-bg { position:absolute!important;z-index:0!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important; }
.r9-live2d-canvas,.r9-spine-host,.r9-lucy-card-video { z-index:1; }
.r9-lucy-card-video { position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill;object-position:center;pointer-events:none; }
.r9-character-card.is-lucy-card .r9-card-poster { z-index:1; }
.r9-character-card.is-lucy-card.is-lucy-animation-ready .r9-card-poster { opacity:0; }
.r9-lucy-animation-layer.is-video::after { content:none; }
.r9-spine-host>.spine-player { position:absolute;left:calc(-50% + var(--r9-profile-x,0));top:calc(-50% + var(--r9-profile-y,0));width:200%!important;height:200%!important;overflow:hidden;border-radius:0;background:transparent!important;transform:scale(var(--r9-profile-render-scale,.5));transform-origin:50% 50%; }
.r9-spine-host .spine-player-error { display:none!important; }
.r9-spine-host canvas { display:block;width:100%!important;height:100%!important;border-radius:0!important; }
.r9-cardface-host>.spine-player { --r9-profile-render-scale:.5;--r9-profile-x:0%;--r9-profile-y:0%; }
.r9-character-card:hover { z-index: 14; transform: translateY(-7px) scale(1.018); filter:brightness(1.07) drop-shadow(0 19px 16px rgba(0,0,0,.5)); }
.r9-character-card.is-selected { z-index:15; filter:brightness(1.08) drop-shadow(0 0 6px rgba(221,131,73,.72)) drop-shadow(0 18px 16px rgba(0,0,0,.48)); }

.r9-rarity-effect { position:absolute;z-index:10;left:5.2%;bottom:2.7%;width:89.6%;height:50.63%;object-fit:fill;pointer-events:none; }

.r9-afflatus { position:absolute; z-index:12; left:0; top:0; display:grid; place-items:center; width:27.2%; aspect-ratio:.82; color:#fff; background:var(--afflatus); clip-path:polygon(0 0,100% 0,100% 73%,73% 100%,0 100%); box-shadow:inset -1px -1px rgba(30,22,15,.2); }
.r9-afflatus img { position:relative;z-index:2;width:47%;height:auto;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4));transform:translate(-2%,-6%); }
.afflatus-star { --afflatus:#4c7199; }
.afflatus-beast { --afflatus:#b35959; }
.afflatus-plant { --afflatus:#3f8c53; }
.afflatus-mineral { --afflatus:#95703f; }
.afflatus-spirit { --afflatus:#89508e; }
.afflatus-intellect { --afflatus:#9d8d4c; }
.afflatus-dual { --afflatus:#4c7199; }
.r9-afflatus-secondary { position:absolute;z-index:1;left:0;top:0;width:30%;height:100%;background:#95703f;box-shadow:1px 0 rgba(255,255,255,.12); }

.r9-card-switch { position:absolute;z-index:14;top:3.5%;right:7%;display:grid;place-items:center;width:16%;aspect-ratio:1;border:1px solid rgba(235,228,210,.38);border-radius:50%;color:#ddd8ca;background:rgba(25,25,22,.42);cursor:pointer;transition:background .2s,color .2s,opacity .2s,transform .2s; }
.r9-card-switch svg { width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.r9-card-switch>span { position:absolute;right:-20%;bottom:-18%;min-width:1.9em;padding:.16em .3em;border:1px solid rgba(235,228,210,.34);border-radius:999px;color:#f1e7d3;background:rgba(24,22,19,.78);font:600 clamp(6px,.42vw,9px)/1 var(--r9-mono);letter-spacing:0; }
.r9-card-switch:hover,.r9-card-switch:focus-visible { color:#ffe0b0;background:rgba(94,57,38,.78);outline:none;transform:rotate(8deg); }
.r9-card-switch:disabled { opacity:.22;cursor:not-allowed; }
.r9-card-copy { position:absolute; z-index:11; left:2%; right:2%; bottom:4.7%; display:flex; flex-direction:column; align-items:center; text-shadow:0 2px 5px rgba(48,21,12,.92); }
.r9-card-copy strong { max-width:100%; overflow:hidden; margin:.17em 0 .08em; font:500 clamp(10px,.91vw,18px)/1.08 var(--r9-serif); letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }
.r9-card-copy em { max-width:94%; overflow:hidden; color:rgba(255,245,224,.77); font:normal clamp(6px,.47vw,10px)/1.2 Georgia,serif; letter-spacing:.18em; text-overflow:ellipsis; white-space:nowrap; }
.r9-character-count { position:absolute; z-index:8; right:7.2%; bottom:2%; display:flex; align-items:center; gap:.6em; margin:0; color:rgba(230,220,202,.38); font:10px/1 var(--r9-mono); letter-spacing:.2em; }
.r9-character-count b { color:#d16b3f; font-size:15px; }.r9-character-count span{width:4vw;height:1px;background:rgba(230,220,202,.25)}

.r9-characters.is-entering .r9-character-card { animation:r9-character-deal .62s cubic-bezier(.18,.83,.24,1) both; animation-delay:calc(var(--card-index) * 58ms + 70ms); }
@keyframes r9-character-deal {
  from { opacity:0; transform:translate3d(84px,18px,0) rotateY(-9deg) scale(.94); filter:blur(6px) brightness(.72); clip-path:inset(0 0 0 70%); }
  70% { opacity:1; filter:blur(0) brightness(1.08); }
  to { opacity:1; transform:none; filter:none; clip-path:inset(0); }
}

/* Recruitment */
.r9-recruit { color: #292521; background: linear-gradient(110deg,#b7c8ca,#e9e5db 45%,#b8a49a); }
.r9-recruit::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(72deg,transparent 0 46px,rgba(45,68,75,.055) 47px 49px),radial-gradient(circle at 60% 45%,rgba(255,255,255,.65),transparent 32%); }
.r9-recruit-top { color: #f2ede3; }
.r9-recruit-top .r9-currencies { color: #f3ece2; }
.r9-banner-list { position: absolute; z-index: 20; left: 2.6%; top: 16%; bottom: 14%; width: 13%; display: flex; flex-direction: column; gap: 1.1vw; }
.r9-banner-list button { position: relative; flex: 1; min-height: 68px; overflow: hidden; padding: 0; border: 0; background: #4a5458; box-shadow: 0 6px 15px rgba(0,0,0,.25); cursor: pointer; }
.r9-banner-list button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,transparent 25%,rgba(219,105,61,.72) 25% 43%,transparent 43%),linear-gradient(25deg,#39576c,#b8d1cf); opacity: .8; }
.r9-banner-list button:nth-child(2)::before { filter: hue-rotate(95deg) grayscale(.3); }.r9-banner-list button:nth-child(3)::before{filter:hue-rotate(210deg)}.r9-banner-list button:nth-child(4)::before{filter:sepia(.8)}
.r9-banner-list span { position: absolute; left: 0; right: 0; bottom: 0; padding: .25em; color: white; background: rgba(24,24,23,.62); font-size: .7vw; letter-spacing: .08em; }
.r9-banner-list button.is-active { outline: 2px solid #d36d40; outline-offset: 3px; }
.r9-recruit-art { position: absolute; inset: 11% 7% 12% 16%; display:grid;place-items:center;overflow: hidden; border:1px dashed rgba(39,50,55,.3); background:linear-gradient(27deg,transparent 49.85%,rgba(39,50,55,.1) 50%,transparent 50.15%),linear-gradient(153deg,transparent 49.85%,rgba(39,50,55,.1) 50%,transparent 50.15%),rgba(226,226,219,.28); }
.r9-banner-image-slot { padding:.8em 1.2em;border:1px solid rgba(39,50,55,.24);color:rgba(39,50,55,.42);font:500 clamp(10px,.75vw,15px)/1 var(--r9-mono);letter-spacing:.18em; }
.r9-banner-copy { position: absolute; z-index: 22; left: 19%; top: 26%; width: 32%; color: #282625; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.r9-banner-copy small { font: .68vw var(--r9-mono); letter-spacing: .2em; }.r9-banner-copy h1 { margin: .15em 0; font-size: clamp(40px,5vw,92px); line-height: .95; font-weight: 500; }.r9-banner-copy p { width: 72%; font-size: clamp(11px,.85vw,17px); }.r9-banner-copy strong { display: inline-block; margin-top: 4vw; padding: .25em 1em; color: #efe9db; background: rgba(42,48,50,.76); font-size: 1.25vw; font-weight: 400; }
.r9-recruit-guarantee { position: absolute; z-index: 24; top: 13%; right: 2%; display: flex; align-items: baseline; gap: .8em; padding: .4em 1.3em; background: rgba(119,54,35,.77); color: #f7eee0; }
.r9-recruit-guarantee b { color: #f1d08a; font-size: 1.75vw; }.r9-recruit-guarantee span{font-size:1vw}
.r9-recruit-controls { position: absolute; z-index: 26; left: 2.6%; right: 2.8%; bottom: 3.5%; display: flex; justify-content: space-between; align-items: end; }
.r9-recruit-controls>nav { display: flex; gap: 1vw; }.r9-recruit-controls>nav button { min-width: 6.4vw; padding: .7vw; border: 1px solid rgba(38,36,33,.45); color: #38332e; background: rgba(234,229,218,.62); cursor:pointer; }
.r9-recruit-controls>div { display: flex; gap: 1.8vw; }
.r9-pull { position: relative; display: flex; align-items: center; gap: 2.1vw; width: 17vw; min-width: 215px; padding: .7vw 1.5vw; border: 0; color: #211f1b; background: rgba(246,243,235,.94); box-shadow: 0 11px 20px rgba(0,0,0,.24); cursor: pointer; transition: .25s; }
.r9-pull::before { content: ""; width: 1.8vw; aspect-ratio: .7; border-radius: 50%; background: linear-gradient(135deg,#ffeec1,#c8973e); }.r9-pull span { position:absolute;left:4.2vw;font-size:.8vw }.r9-pull b { margin-left: auto; font-size: clamp(18px,1.7vw,32px); font-weight: 500; }
.r9-pull-ten { color: #281b16; background: #cf673c; }.r9-pull:hover{transform:translateY(-5px);filter:brightness(1.08)}.r9-pull.is-pulsing{animation:r9-pull-pulse .65s ease}
@keyframes r9-pull-pulse{50%{box-shadow:0 0 0 12px rgba(225,122,66,.2);transform:scale(.97)}}

/* Event */
.r9-event { color: #f5f2e8; background: linear-gradient(#70a3d2 0 54%,#e4d8c7 54% 100%); }
.r9-event::before { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,49,68,.22),transparent 26%,transparent 74%,rgba(50,37,34,.22)),repeating-linear-gradient(115deg,transparent 0 30px,rgba(255,255,255,.035) 30px 32px); }
.r9-event-sky { position:absolute;inset:0;overflow:hidden;background-color:#59646a; }
.r9-event-image-slot { position:absolute;z-index:5;left:18%;right:16%;top:28%;bottom:8%;display:grid;place-items:center;border:1px dashed rgba(244,239,226,.28);color:rgba(244,239,226,.34);background:linear-gradient(27deg,transparent 49.85%,rgba(244,239,226,.08) 50%,transparent 50.15%),linear-gradient(153deg,transparent 49.85%,rgba(244,239,226,.08) 50%,transparent 50.15%);font:500 clamp(10px,.75vw,15px)/1 var(--r9-mono);letter-spacing:.18em; }
.r9-event-title { position:absolute;z-index:10;left:50%;top:12%;transform:translateX(-50%) rotate(-2deg);text-align:center;text-shadow:3px 5px 0 rgba(41,71,91,.38); }
.r9-event-title small { display:block;font-size:1.5vw; }.r9-event-title b,.r9-event-title strong { display:block;font:900 clamp(42px,5vw,96px)/.72 Arial,sans-serif;letter-spacing:-.07em; }.r9-event-title strong{color:#d84b34}.r9-event-title p{display:inline-block;margin:1.2vw 0 0;padding:.15em .8em;background:rgba(40,55,67,.56);font-size:.8vw;}
.r9-event-nodes { position:absolute;z-index:16;display:flex;flex-direction:column;gap:1.6vw; }
.r9-event-nodes.left{left:2.6%;bottom:6%;}.r9-event-nodes.right{right:2.8%;bottom:10%;align-items:end}
.r9-event-nodes button { display:flex;align-items:center;gap:.8vw;border:0;background:none;color:#f6f0e6;text-align:left;text-shadow:0 2px 6px #23323d;cursor:pointer; }
.r9-event-nodes i { display:grid;place-items:center;width:4.6vw;min-width:58px;aspect-ratio:1;border:3px solid rgba(227,226,213,.72);border-radius:50%;background:rgba(49,89,111,.66);font:normal 2.3vw sans-serif; }
.r9-event-nodes span{font-size:1vw}.r9-event-nodes small{display:block;font-size:.65vw}.r9-event-nodes button:hover i{transform:rotate(9deg) scale(1.07);background:#b94d39}
.r9-event-enter { flex-direction:column!important;align-items:center!important; }.r9-event-enter i{width:7vw!important;border-radius:14%!important;font:900 1.7vw Arial,sans-serif!important;color:#e9cf83;background:repeating-linear-gradient(0deg,#325a6e 0 4px,#416b7c 4px 7px)!important}.r9-event-enter span{font-size:1.6vw}

/* Loading and transitions */
.r9-loading { position:absolute;inset:0;z-index:200;display:grid;place-items:center;visibility:hidden;opacity:0;color:#e9e6de;background:radial-gradient(circle at 50% 45%,#302a26,#171716 58%,#0e0e0e);pointer-events:none; }
.r9-loading.is-visible { visibility:visible;opacity:1;animation:r9-loading-show .45s ease both; }
@keyframes r9-loading-show{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:none}}
.r9-loading-film { position:absolute;left:28%;right:27%;top:27%;height:36%;border-block:1px solid rgba(255,255,255,.18);background:repeating-linear-gradient(90deg,transparent 0 3vw,rgba(255,255,255,.06) 3vw 3.35vw); }
.r9-loading-film span { position:absolute;left:32%;top:14%;width:32%;height:66%;background:linear-gradient(145deg,#1b2930,#598397 55%,#1e2629);filter:blur(1px) sepia(.2);box-shadow:0 0 45px rgba(94,131,147,.2);animation:r9-film-flicker .45s steps(2) infinite; }
.r9-loading-film i { position:absolute;left:62%;top:19%;width:9vw;aspect-ratio:1;border:1px solid #9f5032;border-radius:50%;box-shadow:inset 3vw 0 1.5vw #9e4f2e;animation:r9-loader-turn 2s linear infinite; }
@keyframes r9-film-flicker{50%{opacity:.72;filter:blur(2px)}}@keyframes r9-loader-turn{to{transform:rotate(360deg)}}
.r9-loading p { position:absolute;left:22%;right:22%;bottom:25%;margin:0;text-align:center;font-size:clamp(15px,1.4vw,27px);letter-spacing:.08em; }
.r9-loading>b { position:absolute;right:5%;bottom:4%;font:1.4vw Georgia,serif;letter-spacing:.16em; }.r9-loading>b small{display:block;text-align:center;letter-spacing:.55em;font-size:.5em}
.r9-event-wipe { position:absolute;inset:0;z-index:210;visibility:hidden;opacity:0;display:grid;place-items:center;overflow:hidden;color:#243f55;background:#e9e6dc;pointer-events:none; }
.r9-event-wipe.is-visible { visibility:visible;animation:r9-wipe 4.6s ease both; }
@keyframes r9-wipe{0%{opacity:0;clip-path:circle(0 at 50% 50%)}12%,77%{opacity:1;clip-path:circle(110% at 50% 50%)}100%{opacity:0;clip-path:circle(110% at 50% 50%)}}
.r9-event-wipe::before { content:"";position:absolute;inset:-15%;background:repeating-linear-gradient(110deg,transparent 0 7vw,rgba(49,76,99,.12) 7vw 7.3vw);animation:r9-wipe-paper 4s linear infinite; }
@keyframes r9-wipe-paper{to{transform:translateX(8vw)}}
.r9-atomic-mark { position:relative;width:21vw;aspect-ratio:1;border:2.8vw solid #203b53;border-right-color:transparent;border-radius:50%;transform:rotate(-35deg); }
.r9-atomic-mark::before,.r9-atomic-mark::after { content:"";position:absolute;inset:20% -42%;border:1.1vw solid #315d86;border-radius:50%;transform:rotate(38deg); }
.r9-atomic-mark::after { border-color:#ce4e37;transform:rotate(-38deg); }
.r9-atomic-mark span{position:absolute;left:35%;top:35%;width:30%;aspect-ratio:1;border-radius:50%;background:#d55139}.r9-atomic-mark b{position:absolute;left:50%;top:111%;transform:translateX(-50%) rotate(35deg);font:900 1.1vw Arial,sans-serif;letter-spacing:.35em}
.r9-toast { position:absolute;z-index:400;left:50%;bottom:8%;transform:translate(-50%,18px);visibility:hidden;opacity:0;padding:.65em 1.4em;color:#f6eee1;background:rgba(30,28,26,.88);border:1px solid rgba(255,255,255,.2);font-size:.9vw;transition:.25s; }.r9-toast.is-visible{visibility:visible;opacity:1;transform:translate(-50%,0)}
.r9-noscript { position:fixed;z-index:1000;inset:auto 0 0;margin:0;padding:12px;text-align:center;background:#9f3f31;color:white; }

@media (max-width: 1050px) {
  .r9-app { min-width: 760px; }
  .r9-profile { min-width: 205px; }
  .r9-hud-actions { display:none; }
  .r9-lobby-panel { width: 32vw; }
  .r9-character-top { padding-right:3vw; }
  .r9-character-grid { left:3%;right:3%;gap:clamp(14px,2.1vh,24px) clamp(8px,1.05vw,16px); }
  .r9-banner-copy { left:18%;width:38% }
  .r9-pull { min-width:190px;width:20vw }
}
@media (max-width: 780px) {
  body { overflow:auto;background:#111; }
  .r9-app { width:100%;min-width:0;height:100svh;min-height:630px; }
  .r9-tap-hint,.r9-dialogue { display:none; }
  .r9-profile { min-width:180px;width:44%; }.r9-currencies span{min-width:72px}.r9-currencies span:nth-child(n+3){display:none}.r9-currencies em{font-size:20px}
  .r9-left-rail { top:auto;left:2%;right:2%;bottom:2%;height:58px;flex-direction:row;background:rgba(25,24,22,.62); }.r9-left-rail button{width:auto;min-width:72px;grid-template-columns:1fr;text-align:center}.r9-left-rail i{margin:auto}.r9-left-rail span{display:none}
  .r9-lobby-panel { top:15%;right:3%;bottom:13%;width:42%; }.r9-event-card{min-height:170px}.r9-shortcuts{grid-template-columns:1fr}.r9-shortcuts button:first-child{display:none}.r9-summon-card{min-height:80px}
  .r9-character-top { align-items:flex-start;height:12%;padding:8px 3%; }.r9-character-controls{gap:10px}.r9-character-home{min-width:38px}.r9-character-top .r9-tabs{min-height:44px}.r9-character-top .r9-tabs button{min-width:88px}.r9-character-top .r9-tabs .r9-filter{min-width:52px}
  .r9-character-grid { top:14%;left:3%;right:3%;width:auto;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 8px;padding:8px 8px 40px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none }.r9-character-card{width:100%;min-width:0}.r9-character-count{display:none}
  .r9-tabs button{min-width:88px}.r9-tabs button:nth-child(2),.r9-tabs button:nth-child(3){display:none}
  .r9-banner-list{width:16%;}.r9-banner-copy{left:22%;top:20%;width:45%}.r9-banner-copy p{display:none}.r9-recruit-guarantee{display:none}.r9-recruit-controls>nav{display:none}.r9-recruit-controls{justify-content:flex-end}.r9-pull{width:210px}.r9-pull-one{display:none}
  .r9-event-title{top:18%}.r9-event-nodes.left button:nth-child(n+3){display:none}.r9-event-image-slot{left:24%;right:12%}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important; }
}