/* 月花うらない処 — 枠・ボタン・星は画像素材。CSSで描くのは影・動き・文字だけ(制作規約§5) */
:root{
  --ts:0 0 2px rgb(0 0 0 / .95),0 1px 4px rgb(0 0 0 / .9),0 0 12px rgb(0 0 0 / .65);
  --ink:#4a2e1c; --muted:#8a6a4a; --gold:#a8812e; --cream:#fef8e7;
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","BIZ UDPMincho",serif;
  --gothic:"Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#15132a;overscroll-behavior:none}
body{font-family:var(--gothic);color:var(--ink);-webkit-text-size-adjust:100%}
#app{position:relative;max-width:480px;height:100dvh;margin:0 auto;overflow:hidden;container-type:inline-size;background:#1b1830}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}

/* 画面 */
.screen{position:absolute;inset:0;overflow:hidden;animation:fadein .35s ease}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;z-index:1}
.bg{position:absolute;inset:0;background-size:cover;background-position:center top;z-index:0}
/* 中の画面: 背景を固定したまま、ぼかして暗くし文字を読みやすく */
.bg.dim{filter:blur(6px) brightness(.58) saturate(.9);transform:scale(1.08)}
/* ホーム: 下の注意書きの所だけ暗くする */
.home .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 72%,rgb(14 10 30 / .72))}
.layer{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 4cqw) 5cqw calc(env(safe-area-inset-bottom) + 6cqw)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ロゴ */
.logo{width:88%;margin-top:1cqw;filter:drop-shadow(0 2px 6px rgb(0 0 0 / .55))}
.logo.corner{position:absolute;top:calc(env(safe-area-inset-top) + 1cqw);width:58%;z-index:2}
.logo.corner.r{right:2%}.logo.corner.l{left:2%}

/* ボタン(台は画像、文字はアプリ) */
.btn{all:unset;cursor:pointer;display:grid;place-items:center;width:100%;aspect-ratio:900/176;background:url(assets/ui/btn_00.webp) center/100% 100% no-repeat;
  font-family:var(--mincho);font-weight:700;font-size:6.4cqw;letter-spacing:.1em;color:#5a3418;filter:drop-shadow(0 2px 5px rgb(0 0 0 / .4));transition:transform .08s}
.btn.m{width:47%;aspect-ratio:640/139;background-image:url(assets/ui/btn_01.webp);font-size:4.4cqw;letter-spacing:.06em}
.btn:active{transform:translateY(2px) scale(.97)}
.btn:focus-visible{outline:2px solid #ffe7a8;outline-offset:2px;border-radius:999px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btnrow{display:flex;gap:4cqw;justify-content:center;width:100%}
.btns{display:flex;flex-direction:column;gap:3.4cqw;width:84%;margin-top:auto}
.round{all:unset;cursor:pointer;position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 2.5cqw);left:3cqw;width:12cqw;aspect-ratio:1;background:center/100% 100% no-repeat;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .45))}
.round:active{transform:scale(.94)}
.back{background-image:url(assets/ui/icon_00.webp)}
.snd.r{left:auto;right:3cqw}.snd.l{left:3cqw}

/* パネル枠: 9分割(四隅は元の比率のまま、線と無地だけ伸ばす)。切れ目のすじ対策にクリームの下地 */
.panel{width:100%;border:0 solid transparent;border-image:url(assets/ui/panel.webp) 215 180 fill / 23.9cqw 20cqw stretch;
  background:linear-gradient(var(--cream),var(--cream)) center/calc(100% - 10cqw) calc(100% - 10cqw) no-repeat;
  padding:9cqw 11cqw 12cqw;font-size:3.9cqw;line-height:1.8;color:var(--ink)}
.panel h2{font-family:var(--mincho);font-size:6.6cqw;margin:0;text-align:center;letter-spacing:.06em;line-height:1.4}
.panel .en{font-family:var(--mincho);text-align:center;font-size:3.2cqw;color:var(--muted);letter-spacing:.12em}
.panel .pos{text-align:center;font-weight:700;color:var(--gold);font-size:3.6cqw;margin-top:1cqw}
.panel .kw{text-align:center;color:var(--gold);font-size:3.5cqw;margin:1cqw 0 2.4cqw}
.panel p{margin:0}
.panel dl{margin:2.4cqw 0 0;display:grid;grid-template-columns:auto 1fr;gap:1.2cqw 3cqw;font-size:3.6cqw}
.panel dt{font-weight:700;color:var(--muted);white-space:nowrap}
.panel dd{margin:0}
.panel + .panel{margin-top:3cqw}

.note{font-size:2.9cqw;color:#f4ead6;text-align:center;line-height:1.6;text-shadow:var(--ts);margin-top:3cqw}
.lead{font-family:var(--mincho);font-size:4.6cqw;color:#fff8e6;text-align:center;text-shadow:var(--ts);margin:15cqw 0 4cqw;line-height:1.7}

/* タイトル */
.title .layer{justify-content:space-between}
.title .btns{width:78%;margin-bottom:6cqw}
.title .logo{margin-top:13cqw;width:84%}

/* おみくじ */
.kuji{width:72%;margin:4cqw 0 4cqw;filter:drop-shadow(0 6px 16px rgb(0 0 0 / .5))}
.kuji.pop{animation:pop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.3) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.shake{animation:shake .9s ease-in-out}
@keyframes shake{0%,100%{transform:none}15%{transform:rotate(-7deg)}30%{transform:rotate(6deg)}45%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
.daily{font-family:var(--mincho);font-size:3.8cqw;color:#fff4d8;text-shadow:var(--ts);margin-top:2cqw}

/* 星 */
.stars{display:inline-flex;gap:.8cqw;vertical-align:middle}
.stars i{width:4.6cqw;aspect-ratio:1;background:url(assets/ui/icon_04.webp) center/contain no-repeat}
.stars i.on{background-image:url(assets/ui/icon_03.webp)}

/* 星座 */
.grid12{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;width:100%}
.sz{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:1cqw 0 2cqw;color:#fff8e6;text-shadow:var(--ts)}
.sz img{filter:drop-shadow(0 3px 6px rgb(0 0 0 / .45))}
.sz:active{transform:scale(.96)}
.sz img{width:88%}
.sz b{font-family:var(--mincho);font-size:3.8cqw}
.sz small{font-size:2.7cqw;color:#f4e6c8}
.szhero{position:relative;width:62%;margin:12cqw 0 1cqw}
.rank{position:absolute;right:-8%;top:4%;font-family:var(--mincho);font-weight:700;color:#fff;font-size:6cqw;text-shadow:0 0 6px #b0802a,0 2px 6px rgb(0 0 0 / .7)}
.rank em{font-style:normal;font-size:11cqw}
.ranklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6cqw 4cqw;font-size:3.4cqw}
.ranklist li{display:flex;align-items:center;gap:1.4cqw}
.ranklist li.me{font-weight:700;color:#9a5a1a}
.ranklist img{width:8cqw}
.ranklist .n{width:6cqw;text-align:right;font-family:var(--mincho);font-weight:700;color:var(--gold)}
.linkbtn{all:unset;cursor:pointer;font-size:3.4cqw;color:#fff4d8;text-decoration:underline;text-underline-offset:3px;text-shadow:var(--ts);margin-top:3cqw}

/* タロット */
.deck{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;width:96%;margin-top:2cqw}
.card{position:relative;aspect-ratio:2/3;perspective:600px;cursor:pointer;border:0;padding:0;background:none}
.card .in{position:absolute;inset:0;transition:transform .6s;transform-style:preserve-3d}
.card.open .in{transform:rotateY(180deg)}
.card .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:2cqw;overflow:hidden;box-shadow:0 3px 10px rgb(0 0 0 / .45);background:#2a2440 center/cover no-repeat}
.card .front{transform:rotateY(180deg)}
.card.rev .front{transform:rotateY(180deg) rotate(180deg)}
.card.picked:not(.open){animation:lift .3s forwards}
.card.gone{opacity:.25;pointer-events:none;transition:opacity .3s}
@keyframes lift{to{transform:translateY(-3cqw)}}
.spread{display:flex;gap:3cqw;justify-content:center;width:100%;margin:13cqw 0 4cqw}
.spread .slot{flex:1;max-width:34%;text-align:center}
.spread.one .slot{max-width:66%}
.spread .slot .face img{width:100%;height:100%;object-fit:cover}
.spread .lbl{font-family:var(--mincho);font-weight:700;color:#fff4d8;text-shadow:var(--ts);margin-bottom:1.5cqw;font-size:4cqw}
.spread .bigcard{aspect-ratio:2/3;border-radius:2.4cqw;overflow:hidden;box-shadow:0 6px 18px rgb(0 0 0 / .55);background:center/cover no-repeat;animation:pop .6s cubic-bezier(.2,1.3,.4,1) both}
.spread .bigcard.rev{transform:rotate(180deg);animation:none}
.panel .tag{display:inline-block;font-family:var(--mincho);font-weight:700;color:var(--gold);margin-right:2cqw}

.toast{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);color:#fff;font-size:15px;font-weight:700;white-space:nowrap;text-shadow:0 1px 3px rgb(0 0 0),0 0 8px rgb(0 0 0 / .8);z-index:20;animation:fadein .2s}
@container (min-width:481px){}

.tube{width:40%;margin:2cqw 0 6cqw;filter:drop-shadow(0 8px 14px rgb(0 0 0 / .5));transform-origin:50% 85%}
.home .note{color:#fff8ea}