:root{color-scheme:dark;--bg:#0c0f17;--panel:#151a26;--line:#262d3d;--text:#eef1f8;--muted:#a3adc2;--ruby:#ff5a4e;--sapphire:#4f8dff;
  font-family:system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}img{display:block;max-width:100%}

/* Hero: Groudon (left) and Kyogre (right) silhouettes from the opening, whole scenes side by side. */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:auto;overflow:hidden;isolation:isolate}
.half{aspect-ratio:800/480;overflow:hidden}
.half img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c0f1700 30%,#0c0f17d9 85%,var(--bg))}
@media(min-width:1200px){.hero{border-radius:0 0 24px 24px}}
.hero-text{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 clamp(18px,5vw,48px) 18px;max-width:1040px;margin:auto}
.eyebrow{margin:0;font-size:12px;letter-spacing:.14em;color:#ffd9a8;font-weight:700;text-shadow:0 1px 6px #000}
.hero h1{margin:6px 0 6px;font-size:clamp(26px,6vw,44px);letter-spacing:-.03em;text-shadow:0 2px 14px #000c}
.hero h1 span{color:#ffffff99;font-weight:400}
.hero-text p:last-child{margin:0;color:#d6dbe7;font-size:14.5px;text-shadow:0 1px 8px #000}

main{max-width:1040px;margin:auto;padding:8px clamp(16px,5vw,48px) 24px}
h2{display:flex;align-items:center;gap:8px;font-size:18px;margin:30px 0 14px}
.icon{font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}

/* Cards: the game's real title screen on top, a version-coloured rim. */
.card{--c:var(--sapphire);position:relative;border-radius:20px;background:var(--panel);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));box-shadow:0 10px 30px -18px var(--c);transition:transform .18s,box-shadow .18s}
.card.ruby{--c:var(--ruby)}
.card.mine{max-width:560px}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px var(--c)}
.cover{position:relative;aspect-ratio:800/420;background:#000}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,var(--panel))}
.pill{position:absolute;z-index:1;top:12px;left:12px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:#0b0d14cc;color:#cdd3e0;backdrop-filter:blur(6px);border:1px solid #ffffff1f}
.card.on .pill{background:#0f3d24d9;color:#b9f5cf;border-color:#3ddc8455}
.card.on .pill::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.body{padding:4px 18px 18px;margin-top:-18px;position:relative}
.title-row{display:flex;align-items:center;gap:8px}
h3{margin:0;font-size:20px}
.chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.sub{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{flex:1;min-width:120px;text-align:center;text-decoration:none;font-weight:700;border-radius:12px;padding:13px 16px;font-size:15px}
.btn.primary{background:var(--c);color:#fff;box-shadow:0 6px 18px -8px var(--c)}
.btn.ghost{color:var(--text);border:1px solid #ffffff2e;background:#ffffff0a}
.btn:active{transform:scale(.98)}
a:focus-visible{outline:3px solid #a2b5ff;outline-offset:3px}

.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.tip{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.tip b{font-size:14px}
.tip p{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6}
footer{max-width:1040px;margin:auto;padding:8px clamp(16px,5vw,48px) max(28px,env(safe-area-inset-bottom));color:#6f7890;font-size:12px}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}.card.on .pill::before{animation:none}}
/* Phones (after .hero-text so it wins): the banner is short, so the title goes under the pictures instead of over them. */
@media(max-width:700px){.hero-text{position:static;grid-column:1/-1;padding-top:14px}.hero::after{display:none}}
/* Theme switch (top right of the banner) */
.theme-switch{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;padding:3px;border-radius:999px;background:#0b0d14b3;border:1px solid #ffffff26;backdrop-filter:blur(6px)}
.theme-switch button{font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;padding:6px 12px;background:none;color:#cfd5e2;cursor:pointer}
.theme-switch button[aria-pressed=true]{background:#ffffff;color:#111827}
.mascot{display:none}

/* ===== 토끼 / 우사기 themes (html[data-pastel]): pastel sky blue, cream cards, pink buttons.
   토끼 = original bunny (/talk/bunny.svg), 우사기 = /talk/usagi/*.webp (picture variables come from /talk/talk.css) ===== */
html[data-pastel]{color-scheme:light;--bg:#d9ecf7;--panel:#fffaf0;--line:#f0d6c6;--text:#5a4646;--muted:#8d7676;--ruby:#ff8fa8;--sapphire:#7fbbe9;
  background:var(--bg) radial-gradient(#ffffffaa 2px,transparent 2.5px) 0 0/24px 24px}
html[data-pastel] body{background:none}
html[data-pastel] .theme-switch{background:#fffaf0e6;border:2px solid #ffc8d3}
html[data-pastel] .theme-switch button{color:#8d7676}
html[data-pastel] .theme-switch button[aria-pressed=true]{background:#ff9fb4;color:#fff}
html[data-pastel] .hero{border-radius:0 0 28px 28px}
html[data-pastel] .half img{filter:saturate(.75) brightness(1.15)}
html[data-pastel] .hero::after{background:linear-gradient(180deg,#d9ecf700 35%,#d9ecf7e6 85%,var(--bg))}
html[data-pastel] .eyebrow{color:#e57a94;text-shadow:none}
html[data-pastel] .hero h1{color:var(--text);text-shadow:0 2px 0 #fff}
html[data-pastel] .hero h1 span{color:#ff9fb4}
html[data-pastel] .hero-text p:last-child{color:var(--muted);text-shadow:none}
html[data-pastel] .mascot{display:block;position:absolute;z-index:1;right:clamp(10px,6vw,70px);bottom:-6px;width:clamp(84px,14vw,150px);height:auto;filter:drop-shadow(0 6px 10px #7aa9cc66);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}
html[data-pastel] h2{color:var(--text)}
html[data-pastel] .card{border:2.5px solid color-mix(in srgb,var(--c) 45%,#fff);border-radius:26px;box-shadow:0 8px 0 color-mix(in srgb,var(--c) 30%,#fff),0 14px 30px -14px #7aa9cc}
html[data-pastel] .card:hover{box-shadow:0 10px 0 color-mix(in srgb,var(--c) 30%,#fff),0 18px 34px -14px #7aa9cc}
html[data-pastel] .cover::after{background:linear-gradient(180deg,transparent,var(--panel))}
html[data-pastel] .pill{background:#fffaf0e6;color:var(--muted);border:1.5px solid var(--line)}
html[data-pastel] .card.on .pill{background:#e9f9ee;color:#3c8c5a;border-color:#a8e2bd}
html[data-pastel] h3::after{content:"";display:inline-block;width:26px;height:28px;margin-left:6px;vertical-align:-4px;background:var(--u-face,url(/talk/bunny.svg)) center/contain no-repeat}
html[data-pastel] .chip{background:#fff}
html[data-pastel] .btn{border-radius:999px}
html[data-pastel] .btn.primary{box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#a05a6a)}
html[data-pastel] .btn.ghost{background:#fff;color:var(--text);border:2px solid var(--line)}
html[data-pastel] .tip{border:2px solid var(--line);border-radius:20px}
html[data-pastel] footer{color:var(--muted)}
@media(prefers-reduced-motion:reduce){html[data-pastel] .mascot{animation:none}}
/* 토끼: bright Latios / Latias opening scenes instead of the dark silhouettes. 우사기: one wide picture split over the two
   halves (each half shows its side at 200% width). Phones keep the title clear of the mascot. */
html[data-pastel] .half img{opacity:0}
html[data-pastel] .half.ruby{background:url(img/latios.jpg) 55% 50%/cover}
html[data-pastel] .half.sapphire{background:url(img/latias.jpg) 55% 50%/cover}
html[data-theme=usagi] .half.ruby{background:url(img/usagi-banner.webp?v=1) 0 50%/200% auto}
html[data-theme=usagi] .half.sapphire{background:url(img/usagi-banner.webp?v=1) 100% 50%/200% auto}
@media(max-width:700px){html[data-pastel] .hero-text{padding-right:104px}html[data-pastel] .mascot{width:86px;bottom:auto;top:calc(50vw * .6 - 30px)}html[data-theme=usagi] .mascot{width:70px}}
.pc-down{margin:0 0 18px;padding:14px 16px;border-radius:14px;border:1px solid #6b3a3a;background:#2a1b20;color:#f3d9d9;font-size:15px;line-height:1.6;font-weight:600}.pc-down[hidden]{display:none}html[data-pastel] .pc-down{background:#fff0f0;border:2px solid #f2b8bf;color:#7a4048}