.page-heading { display:flex; align-items:center; gap:16px; }
.page-heading h1 { margin:0; min-width:0; overflow-wrap:anywhere; }
.page-back { flex:0 0 42px; width:42px; height:42px; border:1px solid #92784b; border-radius:8px; background:#10231c; font-size:26px; }
.page-back:hover { background:#294536; box-shadow:0 0 16px #e0b15b22; }
.character-roster { margin:32px 0; padding:0 20px 24px; border:1px solid #947747; border-radius:8px; background:linear-gradient(135deg,#24392ef5,#101c17fa); box-shadow:0 10px 30px #0004; }
.v2-site .feature-title { position:relative; width:fit-content; max-width:100%; margin:-24px auto 20px; padding:12px 20px; border:1px solid #ae8c4e; border-radius:8px; background:#111e17; font-size:20px; text-align:center; box-shadow:0 6px 14px #0005; }
.roster-summary { display:flex; justify-content:space-between; gap:16px; padding:4px 0 20px; color:#cad5c5; }
.character-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
.character-card { min-width:0; padding:20px 14px; text-align:center; border-right:1px solid #a48a4938; }
.character-card:last-child { border-right:0; }
.v2-site .character-portrait { display:block; width:88px; height:88px; max-width:88px; object-fit:cover; margin:0 auto 16px; border-radius:50%; border:1px solid #ac8c4e; background:#0e1b16; box-shadow:0 0 20px #d3ae5220; }
.v2-site .character-identity h3 { font:700 20px/1.3 var(--body); overflow-wrap:anywhere; margin:0 0 6px; color:#f1d8a3; }
.character-identity>span { color:#adbcad; }
.character-card dl { margin:20px 0 16px; }
.character-card dl>div { display:flex; justify-content:space-between; gap:6px; padding:7px 0; border-bottom:1px solid #a48a4922; }
.character-card dt { font-weight:400; color:#b8c7ba; }
.character-card dd { margin:0; color:#f4d18d; overflow-wrap:anywhere; }
.character-card dl>.character-playtime { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; min-height:76px; margin-top:14px; padding:10px 8px; border:1px solid #947747; border-radius:4px; background:#10231c; }
.character-playtime dt { font-size:14px; line-height:1.4; }
.character-playtime dt .icon { color:#d8b977; margin-right:4px; }
.character-playtime dd { font-size:18px; line-height:1.4; font-variant-numeric:tabular-nums; }
.character-rank-link { display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; }
.character-debug { margin-top:16px; }
.character-debug .button { display:flex; width:100%; min-width:0; padding:9px; gap:7px; font-size:14px; line-height:1.4; }
.character-debug .button>span { min-width:0; overflow-wrap:anywhere; }
.character-debug .button>.icon { flex-shrink:0; }
.character-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#829d8d; min-height:320px; }
.character-empty>.icon { font-size:36px; opacity:.5; }
.site-utilities { position:fixed; right:18px; bottom:18px; z-index:40; display:flex; flex-direction:column; align-items:center; gap:6px; }
.a2g-certificate { width:78px; height:86px; object-fit:contain; filter:drop-shadow(0 2px 8px #0008); pointer-events:none; }
.site-footer .footer-bottom { align-items:center; padding-right:56px; }
.cookie-manage,.chat-launcher { width:42px; height:42px; border:1px solid #a88b50; border-radius:50%; background:#14291f; box-shadow:0 4px 16px #0006; }
.cookie-dialog { width:min(680px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #aa8b4c; border-radius:8px; background:#14251d; color:#d6dfd1; box-shadow:0 24px 90px #0009; overflow:auto; }
.cookie-dialog::backdrop { background:#030a07b8; }
.cookie-dialog:not([open]) { display:none; }
.cookie-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; }
.v2-site .cookie-dialog h2 { font-size:20px; margin:0; }
.cookie-dialog .consent-art { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:112px; overflow:hidden; background:#14291f; border-block:1px solid #a88b5066; }
.consent-art .consent-landscape { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 65%; }
.cookie-dialog .consent-art::after { content:''; position:absolute; inset:0; background:#102b1ba6; }
.consent-art .consent-brand { position:relative; z-index:1; width:110px; height:110px; object-fit:contain; }
.cookie-content { padding:16px 20px; }
.cookie-content p { line-height:1.5; margin:0 0 8px; }
.cookie-option { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0; padding:14px 0; border-bottom:1px solid #a88b5038; cursor:pointer; }
.cookie-option strong,.cookie-option small { display:block; }
.cookie-option strong { color:#f1d49c; font-size:17px; }
.cookie-option small { font-size:14px; color:#b2c4b6; line-height:1.4; }
.cookie-option input { appearance:auto; width:22px; height:22px; flex:0 0 22px; accent-color:#d1b16a; }
.cookie-dialog footer { display:flex; gap:10px; flex-wrap:wrap; padding:16px 20px; background:#0e1c16; }
.cookie-dialog footer .button { min-width:0; flex:1 1 auto; padding:10px 12px; font-size:15px; }
.cookie-dialog button:focus-visible,.page-back:focus-visible { outline:2px solid #f3d28d; outline-offset:3px; }
@media(max-width:1100px) { .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .character-card { border-bottom:1px solid #a48a4938; } }
@media(max-width:700px) { .character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .character-roster { padding:0 12px 16px; } .character-card { padding:20px 10px; } .a2g-certificate { width:58px; height:64px; } .site-utilities { right:12px; bottom:12px; } .page-heading { gap:12px; } }
@media(max-width:420px) { .character-grid { grid-template-columns:1fr; } .character-card { border-right:0; } .character-empty { min-height:140px; } .cookie-dialog header,.cookie-content,.cookie-dialog footer { padding:12px 16px; } .cookie-dialog .consent-art { height:88px; } .consent-art .consent-brand { width:86px; height:86px; } }