@font-face {
 font-family:"Relic Info Rounded";
 src:url('/ui-soft/relic-rounded-full.woff2') format('woff2');
 font-style:normal;font-weight:800;font-display:swap;
}
:root { --relic-info-font:"Relic Info Rounded","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; }
.page,.shot-dialog { font-family:var(--relic-info-font);font-synthesis:none; }

.info-nav,.info-footer { display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;line-height:1.7;padding:18px 12px;color:#fff4d2; }
.info-nav a,.info-footer a { padding:5px 0;color:inherit;text-underline-offset:4px; }
a:focus-visible { outline:3px solid #49a6ce;outline-offset:5px; }
.info-page { font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;margin:0;background:#123b30;color:#352718; }
.info-wrap { width:min(900px,calc(100% - 28px));margin:16px auto 36px; }
.info-brand { display:block;color:#fff4d2;text-decoration:none;font-size:1.3rem;font-weight:800;padding:12px 4px; }
.info-content { padding:clamp(20px,5vw,42px);background:#fff4d7;border:4px solid #c79950;border-radius:20px;overflow-wrap:anywhere; }
.info-content h1 { margin:0 0 14px;font-size:clamp(1.65rem,5vw,2.5rem);line-height:1.4; }
.info-content h2 { margin:32px 0 12px;font-size:1.3rem;color:#663d19; }
.info-content h3 { font-size:1.1rem;margin:22px 0 8px; }
.info-content p,.info-content li { line-height:1.9; }
.info-content a { color:#155b68;text-underline-offset:4px; }
.info-content ul,.info-content ol { padding-left:1.4em; }
.info-note { padding:14px 18px;background:#f0e1b9;border-left:4px solid #9c6b28; }
.info-content dt { font-weight:bold;margin-top:20px; }.info-content dd { margin:6px 0;line-height:1.8; }
.info-content .info-button { display:inline-block;background:#1d674b;color:white;border-radius:10px;padding:12px 20px;text-decoration:none; }
.info-toc { display:flex;flex-wrap:wrap;gap:10px 18px;padding:16px;background:#f0e1b9;border-radius:12px; }
.info-date { color:#6a583c;font-size:.9rem; }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

.info-footer a { margin:0; }

.info-nav { background:#123b30ed;border:1px solid #a68a49;border-radius:12px;margin:16px 0; }
.page h1 { font-size:clamp(1.7rem,3.6vw,2.6rem); }
@media(max-width:600px) {
 .page header { flex-direction:column;align-items:flex-start;gap:8px; }
 .page h1 { font-size:clamp(1.7rem,7vw,2rem); }
}

/* Game introduction: cards and loadout choices */
.genre-tags { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }
.genre-tags span { font-size:.85rem;line-height:1.5;padding:6px 11px;background:#e9dbab;border:1px solid #b29756;border-radius:30px; }
.hero-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.hero-choices .feature p + p { margin-top:14px; }
.card-examples { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:min(680px,100%);margin:24px auto; }
.card-examples figure { margin:0;text-align:center; }
.card-examples img { width:100%;height:auto;border-radius:18px;border:3px solid #c69d54;background:#fff8e6; }
.card-examples figcaption { margin-top:10px;font-size:.95rem;line-height:1.6; }
.choice-note { border-left:4px solid #a77a32;padding:12px 18px;background:#f1e1b7; }
.world-showcase { display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center; }
.world-showcase figure { margin:0; }
.world-showcase img { width:100%;height:auto;border:4px solid #be8c43;border-radius:18px; }
.page .section > .eyebrow { margin:0 0 10px; }
@media(max-width:900px) { .hero-choices,.world-showcase { grid-template-columns:1fr; } }
@media(max-width:480px) { .card-examples { gap:8px; }.card-examples figcaption { font-size:.78rem; } }

/* Unmodified game captures with a separate explanation layer. */
.hero-with-game { display:block;padding:clamp(16px,3vw,34px); }
.intro-heading { display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center; }
.intro-heading h1 { font-size:clamp(2rem,4vw,3.1rem); }
.intro-heading .lead { font-size:1.05rem; }
.capture-note { color:#5c4d36;font-size:.85rem;margin:26px 0 14px; }
.screenshot-toc { display:flex;justify-content:center;flex-wrap:wrap;gap:9px 22px;margin:30px 0 6px;color:#fff5d7;line-height:1.8; }
.screenshot-toc a { text-underline-offset:5px;padding:4px 0; }
.page section[id] { scroll-margin-top:18px; }
.game-shot { margin:24px 0 0;min-width:0; }
.shot-open { display:block;width:100%;padding:0;background:#112c2f;border:2px solid #7d5d33;border-radius:12px;overflow:hidden;cursor:zoom-in;color:inherit;font:inherit;text-align:left; }
.shot-frame { display:block;position:relative;isolation:isolate; }
.shot-frame > img { display:block;width:100%;height:auto; }
.shot-arrows { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none; }
.shot-arrows path { stroke:#6ce1ff;stroke-width:.35;fill:none;filter:drop-shadow(0 1px 2px #092b3d); }
.shot-arrows circle { fill:#112f49;fill-opacity:.24;stroke:#6ce1ff;stroke-width:.35; }
.shot-label { position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:7px;max-width:25%;padding:7px 10px 7px 7px;border:1px solid #8ce8ff;border-radius:8px;background:#073146f5;color:#fff;font-family:var(--relic-info-font);font-size:clamp(.7rem,1.35vw,1rem);font-weight:700;line-height:1.35;box-shadow:0 2px 5px #0005;pointer-events:none; }
.shot-label b,.shot-key b { display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#82e4fa;color:#0c3042;font-family:var(--relic-info-font);font-size:14px; }
.game-shot figcaption { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:12px;color:#59472e;font: .82rem/1.7 var(--relic-info-font); }
.shot-actions { display:flex;flex-wrap:wrap;flex-shrink:0;gap:8px 14px; }
.shot-actions button { border:0;padding:0;background:transparent;color:#145568;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
.shot-actions a { color:#145568; }
.shot-key { list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;font: .9rem/1.75 var(--relic-info-font); }
.shot-key li { display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:#fff8e6;border-radius:9px; }
.shot-key b { margin-top:2px; }
.shot-subtitle { margin-top:38px; }
.section-takeaway { margin:22px 0 0;padding:14px 18px;background:#ecdfb9;border-left:4px solid #99652f; }
.skill-summary { margin-top:26px; }
.skill-summary article { padding:18px;background:#fff8e6;border-radius:12px; }
.skill-summary p { margin-bottom:0; }
.screen-excerpt { margin-top:24px;padding:14px 18px;border:1px solid #b58b48;border-radius:10px;background:#fff8e6; }
.screen-excerpt summary { cursor:pointer;font-weight:700;line-height:1.8; }
.screen-excerpt img { margin:18px auto 0;width:auto;max-width:100%;height:auto; }
.screen-excerpt p { font-size:.85rem;margin-bottom:0; }
.screen-crop { display:block;position:relative;overflow:hidden;margin:18px auto 0; }
.screen-crop img { position:absolute;left:0;top:0;width:var(--crop-width);max-width:none;height:auto;margin:0;transform:translate(var(--crop-x),var(--crop-y)); }
.mobile-showcase { display:grid;grid-template-columns:minmax(0,390px) 1fr;gap:40px;align-items:center;margin-top:38px; }
.mobile-showcase .game-shot { margin:0; }
.mobile-showcase .shot-label { max-width:64%;font-size:12px; }
.mobile-showcase figcaption { display:block; }
.mobile-showcase .shot-actions { margin-top:8px; }
.mobile-showcase .shot-key { grid-template-columns:1fr; }
.shot-dialog { width:min(1420px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:16px;border:2px solid #c79950;border-radius:16px;background:#fff4d7;color:#352718;box-sizing:border-box; }
.shot-dialog::backdrop { background:#061917dd; }
.shot-dialog-bar { display:flex;justify-content:space-between;align-items:center;gap:18px; }
.shot-dialog h2 { font:700 1.1rem/1.5 var(--relic-info-font);margin:0; }
.shot-dialog-close { flex-shrink:0;border:1px solid #8f6a3d;background:#164c3a;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer;font:inherit; }
.shot-dialog-hint { font:.8rem/1.6 var(--relic-info-font);margin:10px 0; }
.shot-dialog-body { overflow:auto;max-height:calc(100dvh - 172px);border-radius:8px;background:#143831; }
.shot-dialog-body .shot-frame { min-width:900px;max-width:1309px;margin:auto; }
.shot-dialog-body .shot-frame.is-portrait { min-width:390px;max-width:440px; }
.shot-dialog-body .shot-label { font-size:16px; }
.shot-dialog-body .is-portrait .shot-label { max-width:65%;font-size:12px; }
@media(max-width:900px) {
 .intro-heading { grid-template-columns:1fr;gap:0; }
 .intro-heading .eyebrow { margin-top:0; }
 .intro-heading h1 { margin-bottom:0; }
 .mobile-showcase { grid-template-columns:1fr;gap:24px; }
 .mobile-showcase .game-shot { max-width:390px;margin:auto; }
 .game-shot figcaption { flex-direction:column;gap:7px; }
}
@media(max-width:600px) {
 .hero-with-game { padding:15px; }
 .page .section { padding:18px 14px; }
 .game-shot { margin-top:18px; }
 .shot-label { padding:2px;border:none;border-radius:50%;max-width:none;gap:0; }
 .shot-label > span { display:none; }
 .shot-label b { width:23px;height:23px;font-size:13px; }
 .shot-key { grid-template-columns:1fr;gap:6px;font-size:.86rem; }
 .shot-key li { padding:9px; }
 .shot-dialog-body .shot-label { padding:7px;border:1px solid #8ce8ff;border-radius:8px;gap:7px;max-width:25%; }
 .shot-dialog-body .shot-label > span { display:inline; }
 .screenshot-toc { gap:6px 16px;font-size:.9rem; }
 .shot-dialog { padding:10px; }
 .shot-dialog h2 { font-size:.9rem; }
}