/* AI占い師 service site. Ported from the Claude Design hand-off (design/Main.dc.html). Self-contained (published on its own). */
:root{
  --bg: oklch(0.21 0.045 266);
  --bg-2: oklch(0.255 0.05 266);
  --bg-3: oklch(0.3 0.055 266);
  --line: oklch(0.42 0.05 266);
  --text: oklch(0.95 0.012 85);
  --muted: oklch(0.8 0.025 265);
  --gold: oklch(0.82 0.125 85);
  --gold-dim: oklch(0.82 0.125 85 / 0.45);
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;overflow-x:hidden;}
a{color:var(--gold);}
a:hover{color:var(--text);}
h1,h2,h3,p{margin:0;}
.wrap{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;border:1px solid var(--gold);transition:background .2s,color .2s;}
.btn-gold{background:var(--gold);color:var(--bg);}
.btn-gold:hover{background:var(--text);color:var(--bg);}
.btn-ghost{background:transparent;color:var(--gold);}
.btn-ghost:hover{background:var(--gold);color:var(--bg);}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px;}
.btn:focus-visible,.pick:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.brand{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--text);text-decoration:none;letter-spacing:.08em;min-height:44px;display:inline-flex;align-items:center;}
.brand span{color:var(--gold);}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center;}
.nav-links a:hover{color:var(--gold);}
.nav-links a.btn{color:var(--bg);}
.nav-links a.btn-ghost{color:var(--gold);}
.nav-links a.btn-ghost:hover{color:var(--bg);}
@media (max-width:480px){.nav-links{gap:10px;}.nav-links .btn-sm{padding:0 14px;font-size:14px;}}
.nobr{display:inline-block;}
#top h1,#top .eyebrow,#top .lead{text-shadow:0 2px 28px oklch(0.1 0.04 266 / 0.9), 0 0 6px oklch(0.1 0.04 266 / 0.6);}
.mote{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:oklch(0.92 0.12 85);box-shadow:0 0 12px 3px oklch(0.85 0.13 85 / 0.7);filter:blur(0.5px);opacity:0;animation:floatup 16s linear infinite;}
@keyframes floatup{0%{transform:translate(0,0);opacity:0}15%{opacity:.75}85%{opacity:.35}100%{transform:translate(36px,-980px);opacity:0}}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.2) translate(-2.5%,-2%)}}
.beam{position:absolute;top:-10%;height:130%;transform:rotate(18deg);background:linear-gradient(to bottom, transparent, oklch(0.88 0.1 80 / 0.16) 30%, oklch(0.88 0.1 80 / 0.06) 70%, transparent);animation:sway 9s ease-in-out infinite alternate;will-change:transform;}
@keyframes sway{from{opacity:.25;transform:rotate(14deg) translateX(-30px)}to{opacity:1;transform:rotate(22deg) translateX(40px)}}
.mist{position:absolute;left:-30%;width:160%;height:42%;background:radial-gradient(ellipse 40% 50% at 30% 60%, oklch(0.8 0.05 300 / 0.16), transparent 70%), radial-gradient(ellipse 35% 45% at 72% 50%, oklch(0.8 0.05 260 / 0.14), transparent 70%);animation:drift 60s ease-in-out infinite alternate;will-change:transform;}
@keyframes drift{from{transform:translateX(-10%)}to{transform:translateX(10%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowp{0%{opacity:.6}8%{opacity:1}14%{opacity:.7}30%{opacity:.95}45%{opacity:.55}60%{opacity:1}80%{opacity:.75}100%{opacity:.9}}
.glow{animation:glowp 5s ease-in-out infinite;}
@media (min-width:600px){.oneline{white-space:nowrap;}}
.pick{background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;}
.pick:hover .arch{opacity:1 !important;}
.pick-sub{font-family:var(--sans);font-size:13px;color:var(--muted);}
.arch{width:100%;aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;background:var(--bg-3);border:1px solid var(--line);opacity:.7;box-shadow:0 20px 40px oklch(0.1 0.04 266 / 0.5);transition:opacity .2s,border-color .2s;}
.pick[aria-pressed="true"] .arch{border:2px solid var(--gold);opacity:1;box-shadow:0 0 70px oklch(0.82 0.125 85 / 0.35), 0 30px 60px oklch(0.1 0.04 266 / 0.6);animation:bob 7s ease-in-out infinite;}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;}
.pick-name{font-family:var(--serif);font-weight:700;font-size:clamp(14px,2.4vw,20px);color:var(--text);}
.pick[aria-pressed="true"] .pick-name{color:var(--gold);}
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 40%;animation:kb 28s ease-in-out infinite alternate;transition:opacity 1.2s ease;opacity:0;}
.bgimg.on{opacity:1;}
.eyebrow{font-family:var(--sans);font-size:14px;letter-spacing:.18em;color:var(--gold);margin:0;}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.4;margin:0;color:var(--text);}
.lead{font-family:var(--sans);font-size:16px;line-height:1.8;color:var(--muted);margin:0;}
.card{background:oklch(0.255 0.05 266 / 0.82);border:1px solid var(--gold-dim);border-radius:18px;padding:24px;transition:box-shadow .3s,border-color .3s;}
.card:hover{border-color:var(--gold);box-shadow:0 0 40px oklch(0.82 0.125 85 / 0.18);}
header,section,footer{position:relative;z-index:1;}
header,footer{background:oklch(0.21 0.045 266 / 0.9);}
section:not(#top){background:oklch(0.21 0.045 266 / 0.78);}
section.alt{background:oklch(0.2 0.05 266 / 0.66);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--text);opacity:.5;animation:twinkle 5s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.8}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise 1.1s ease-out both;}.rise-2{animation:rise 1.1s .25s ease-out both;}.rise-3{animation:rise 1.1s .5s ease-out both;}
details{border-bottom:1px solid var(--line);}
details summary{list-style:none;cursor:pointer;min-height:44px;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--serif);font-weight:500;font-size:17px;color:var(--text);}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";color:var(--gold);font-size:26px;font-family:var(--sans);line-height:1;}
details[open] summary::after{content:"−";}
details p{margin:0 0 18px;font-family:var(--sans);font-size:15px;line-height:1.8;color:var(--muted);}
.grid{display:grid;gap:20px;}
.three{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.four{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.topline{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--gold);}
.topline.dim{border-top-color:var(--line);padding-top:14px;gap:6px;}
.topline h3{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.5;}
.topline.dim h3{font-size:18px;}
.menu-card{display:flex;flex-direction:column;gap:12px;}
.menu-card h3{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.4;}
.menu-card .foot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;}
.menu-card .cost{font-family:var(--serif);font-size:20px;color:var(--gold);}
.menu-card .time{font-size:15px;color:var(--muted);}
.gamegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:20px;}
.gcard{display:flex;flex-direction:column;gap:10px;position:relative;text-decoration:none;color:var(--text);padding:16px;transition:box-shadow .3s,border-color .3s,transform .3s;}
.gcard:hover{color:var(--text);transform:translateY(-4px);}
.gcard:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.gart{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:12px;border:1px solid var(--gold-dim);background:radial-gradient(ellipse 70% 70% at 50% 50%, oklch(0.34 0.07 285), oklch(0.2 0.05 266));box-shadow:inset 0 0 0 4px oklch(0.2 0.05 266), inset 0 0 0 5px oklch(0.82 0.125 85 / 0.3);overflow:hidden;}
.gtag{position:absolute;z-index:2;top:26px;right:26px;font-size:11px;letter-spacing:.08em;padding:2px 10px;border-radius:999px;background:oklch(0.17 0.045 266 / 0.85);border:1px solid var(--gold-dim);color:var(--gold);}
.gcta{font-size:14px;color:var(--gold);font-weight:700;}
.gcard.soon{cursor:default;opacity:.78;}
.gcard.soon:hover{transform:none;box-shadow:none;border-color:var(--gold-dim);}
.gcard.soon .gcta{color:var(--muted);font-weight:500;}
@media (max-width:600px){.gamegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.gcard{padding:10px;gap:8px;}.gtag{top:18px;right:18px;}.gcard h3{font-size:16px !important;}.gcard .lead{font-size:13px !important;}}
@media (max-width:820px){
  .nav-links .nl{display:none;}
  .sec{padding-top:48px !important;padding-bottom:48px !important;}
}
@media (prefers-reduced-motion: reduce){
  .star,.rise,.rise-2,.rise-3,.arch,.pick .arch{animation:none !important;opacity:1;}
  .gcard{transition:none;}
  .bgimg{animation:none !important;transition:none !important;}
  .mote,.glow,.beam,.mist{animation:none !important;}
  .beam,.mist,.mote{display:none;}
  html{scroll-behavior:auto;}
  .star{opacity:.4;}
}