.card { --ink: #43324f; --soft: #65536f; --mark-alpha: 62%; --ring-radius: 24px; --mark-radius: 23px;
  background-color: #fff3e8; background-image: radial-gradient(#f5d9c7 2.5px, transparent 2.5px); background-size: 34px 34px;
  padding: 30px 36px 38px; display: grid; grid-template-columns: 500px 540px 1fr; grid-template-rows: 1fr auto; gap: 16px; color: var(--ink); font-family: 'Ssurround', 'M PLUS Rounded 1c'; }
.card[data-lang="en"] .time-row strong { width: 112px; }
.card[data-lang="en"] .spec h3 { width: 84px; font-size: 19px; }
.card[data-lang="en"] .spec .chips { flex-wrap: nowrap; gap: 4px; }
.card[data-lang="en"] .spec .chip { height: 40px; padding: 0 8px; font-size: 16px; }
.card[data-lang="en"] .spec { gap: 8px 14px; padding: 12px 20px; }
.card[data-lang="en"] .role { padding: 12px 16px; }
.card[data-lang="en"] .role h4 { margin-bottom: 8px; font-size: 22px; }
.card[data-lang="en"] .role .chip { height: 40px; min-width: 0; padding: 0 10px; font-size: 18px; }
.card[data-lang="en"] .role .chips { gap: 7px 6px; }
.card[data-lang="en"] .ranks { gap: 12px 0; }
.card[data-lang="en"] .title small { margin-top: 2px; font-size: 22px; }
.card[data-lang="ja"] .rk-name { font-size: 14px; }
.card[data-lang="ja"] .title h1 { font-size: 58px; }
.card[data-lang="ja"] .spec h3 { width: 92px; font-size: 19px; }
.card[data-lang="ja"] .spec .chips { flex-wrap: nowrap; gap: 4px; }
.card[data-lang="ja"] .spec .chip { height: 40px; padding: 0 8px; font-size: 16px; }
.card[data-lang="ja"] .spec { gap: 8px 14px; padding: 12px 20px; }
.card[data-lang="ja"] .role { padding: 12px 16px; }
.card[data-lang="ja"] .role h4 { margin-bottom: 8px; font-size: 22px; }
.card[data-lang="ja"] .role .chip { height: 40px; min-width: 0; padding: 0 10px; font-size: 18px; }
.card[data-lang="ja"] .role .chips { gap: 7px 6px; }
.box { border-radius: 34px; padding: 18px 24px 20px; }
.box h3 { font-weight: 400; font-size: 29px; line-height: 1; margin-bottom: 14px; }
.lilac { background: #e8dcfb; } .mint { background: #cdf0df; } .sky { background: #d2e9fb; } .butter { background: #fff0b8; } .peach { background: #ffd9cf; }

.col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.title { display: flex; align-items: center; gap: 14px; padding: 4px 8px; }
.title h1 { font-weight: 400; font-size: 76px; line-height: 1; color: var(--ink); }
.title svg { width: 58px; height: 58px; fill: var(--accent); flex: none; }
.title small { display: block; font-size: 24px; color: var(--soft); margin-top: 8px; }

.ranks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 0; padding: 8px 0 6px; }
.rank { gap: 11px; }
.rk-wrap { width: 84px; height: 84px; }
.rk-name { font-size: 18px; white-space: nowrap; }
.memo-wrap { position: relative; flex: 1; transform: rotate(-1.4deg); background: #fff; border-radius: 12px; padding: 40px 28px 18px; box-shadow: 0 6px 0 #f1dccf; margin: 4px 8px 6px; }
.tape { position: absolute; top: -10px; left: 50%; width: 130px; height: 34px; margin-left: -65px; background: #ffc9dcd9; transform: rotate(1.8deg); }
.memo-wrap h3 { position: absolute; top: 14px; left: 28px; font-weight: 400; font-size: 22px; color: var(--soft); }
.memo { font-family: 'ParkDaHyun', 'Ssurround', 'M PLUS Rounded 1c'; font-size: 45px; line-height: 1.44; max-height: 200px; outline: 0; }

.center { position: relative; overflow: hidden; background: #ffd9cf; border-radius: 44px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.blob { position: absolute; left: 50%; top: 58px; width: 470px; height: 470px; margin-left: -235px; border-radius: 50%; background: #fff3d9; }
.deco { position: absolute; fill: #fff; }
.hero-slot { position: absolute; left: 34px; right: 34px; top: 16px; height: 590px; }
.hero-slot.is-upload { left: 50%; right: auto; top: 58px; width: 470px; height: 470px; margin-left: -235px; border-radius: 50%; overflow: hidden; border: 10px solid #fff; }
.plate { position: relative; background: #fff; border-radius: 30px; padding: 14px 28px 12px; text-align: center; }
.plate input { text-align: center; font-family: 'Ssurround', 'M PLUS Rounded 1c'; color: var(--ink); }
.plate input[data-field="nick"] { height: 74px; }
.plate input[data-field="ign"] { height: 36px; color: var(--soft); }

.agents { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.role { border-radius: 30px; padding: 14px 18px; }
.role-controller { background: #e8dcfb; } .role-duelist { background: #ffd9cf; } .role-initiator { background: #cdf0df; } .role-sentinel { background: #d2e9fb; }
.role h4 { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 25px; margin-bottom: 11px; }
.role h4 .role-icon { width: 19px; height: 19px; }
.chip { height: 46px; min-width: 80px; padding: 0 14px; border-radius: 23px; background: #fff; font-size: 23px; color: var(--soft); }
.chip.on { color: var(--ink); }
.role .chips { gap: 11px 8px; }
.bottom .chip { height: 50px; border-radius: 25px; min-width: 92px; padding: 0 20px; font-size: 25px; }
.bottom .chips { gap: 10px; }
.spec { background: #fff0b8; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 16px 22px; }
.spec > div { display: flex; align-items: center; gap: 10px; }
.spec h3 { width: 76px; flex: none; margin: 0; font-size: 24px; }
.spec .chips { gap: 6px; }
.spec .chip { min-width: 0; padding: 0 12px; font-size: 20px; }

.bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 650px 1fr; gap: 16px; }
.time-row { display: flex; align-items: center; gap: 12px; }
.time-row + .time-row { margin-top: 10px; }
.time-row strong { width: 62px; font-weight: 400; font-size: 24px; }
.bottom .box > h3 { display: inline-block; }
.credit { right: 40px; bottom: 11px; font-family: 'SUIT'; font-weight: 700; font-size: 16px; color: var(--soft); }