:root {
  --navy: #0b1238;
  --navy2: #16225e;
  --gold: #f5cf6a;
  --gold2: #b98a2c;
  --ink: #f4f6ff;
  --mute: #aab6e8;
  --panel: rgba(18, 28, 78, .72);
  --line: rgba(160, 185, 255, .22);
  --pink: #ff7eb6;
  --cyan: #6fe3ff;
  --r: 18px;
  --gold-grad: linear-gradient(135deg, #fff4c6 0%, #f0c255 30%, #fff1b5 52%, #c8942f 78%, #ffe9a0 100%);
  /* 世界観ごとに変わるトークン（下の html[data-theme] で上書き） */
  --bg-base: #0b1238;
  --bg: radial-gradient(120% 80% at 50% 0%, #2a3fa0 0%, #141f5c 45%, #080d2c 100%);
  --accent: #6fe3ff;
  --hl: #ffe39a;
  --ink2: #dfe5ff;
  --err: #ff9cb0;
  --soft: rgba(255,255,255,.08);
  --input: rgba(5,10,40,.6);
  --toast: rgba(10,16,50,.92);
  --modal: rgba(4,8,30,.86);
  --title-grad: var(--gold-grad);
  --logo-fx: drop-shadow(0 3px 0 #6b4708) drop-shadow(0 0 18px rgba(255, 214, 110, .45));
  --btn-grad: var(--gold-grad);
  --btn-ink: #3a2400;
  --btn-shadow: #8a6012;
  --btn-glow: rgba(255, 220, 120, .9);
  --font-title: 'Dela Gothic One', sans-serif;
  --font-logo: 'Cinzel Decorative', serif;
  --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  --panel-shadow: 0 10px 30px rgba(0,0,0,.25);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-base);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  overflow-x: hidden;
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }

/* 背景 */
#bg { position: fixed; inset: 0; z-index: -1;
  background: var(--bg); transition: background .4s; }
#stars { width: 100%; height: 100%; display: block; }

.screen { display: none; min-height: 100dvh; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; position: relative; }
.screen.on { display: block; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

/* 共通パーツ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 14px 0; backdrop-filter: blur(6px); box-shadow: var(--panel-shadow); }
.btn { border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 900; font-size: 1.05rem; letter-spacing: .04em; transition: transform .12s, filter .12s; }
.btn:active { transform: scale(.96); }
.btn-main { background: var(--btn-grad); color: var(--btn-ink); box-shadow: 0 4px 0 var(--btn-shadow), 0 8px 24px color-mix(in srgb, var(--btn-glow) 40%, transparent); }
.btn-main.glow { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 4px 0 var(--btn-shadow), 0 0 34px var(--btn-glow); filter: brightness(1.08); } }
.btn-sub { background: var(--soft); border: 1px solid var(--line); }
.btn[disabled] { filter: grayscale(1) brightness(.7); pointer-events: none; }
.icon-btn { background: var(--soft); border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.05rem; }
.icon-btn.big { width: 52px; height: 52px; }
.link { background: none; border: 0; color: var(--mute); text-decoration: underline; font-size: .85rem; padding: 6px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.bar-title { font-weight: 900; font-size: 1.05rem; }
.hint { text-align: center; color: var(--mute); font-size: .85rem; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 40px); opacity: 0; background: var(--toast); color: var(--ink); border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px; font-size: .9rem; transition: .3s; z-index: 50; pointer-events: none; max-width: calc(100vw - 32px); white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ロゴ */
.logo { text-align: center; margin: 8px 0; line-height: 1.1; }
.logo-sub { display: block; font-size: .8rem; color: var(--accent); letter-spacing: .2em; margin-bottom: 6px; }
.logo-main { display: inline-block; font-family: var(--font-logo, var(--font-title)); font-weight: 400; font-size: 2.6rem; letter-spacing: .04em;
  background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: var(--logo-fx); }
.logo.small .logo-main { font-size: 1.7rem; }

/* タイトル */
.title-wrap { text-align: center; padding-top: 8px; }
.title-cards { position: relative; height: 230px; margin: 10px auto 0; }
.tc { position: absolute; left: 50%; top: 10px; width: 130px; border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.tc-l { transform: translateX(-125%) rotate(-10deg); animation: floatL 6s ease-in-out infinite; }
.tc-r { transform: translateX(25%) rotate(10deg); animation: floatR 6s ease-in-out infinite 1s; }
.tc-c { transform: translateX(-50%) translateY(-6px); z-index: 1; animation: floatC 6s ease-in-out infinite .5s; }
@keyframes floatL { 50% { transform: translateX(-125%) rotate(-10deg) translateY(-3px); } }
@keyframes floatR { 50% { transform: translateX(25%) rotate(10deg) translateY(-3px); } }
@keyframes floatC { 50% { transform: translateX(-50%) translateY(-10px); } }
.lead { color: var(--mute); font-size: .95rem; }
.login label { display: block; font-weight: 700; margin-bottom: 14px; font-size: .95rem; }
.login input { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font-size: 1.1rem; -webkit-user-select: text; user-select: text; }
#in-pin { letter-spacing: .6em; font-size: 1.4rem; text-align: center; }
.login input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.note { font-size: .8rem; color: var(--mute); line-height: 1.6; margin: 0 0 10px; }
.note b { color: var(--hl); font-weight: 700; }
.err { color: var(--err); font-size: .9rem; min-height: 1.2em; margin: 0 0 10px; }
.login .btn { width: 100%; }

/* ホーム */
.who { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.who-name::after { content: ' さん'; font-weight: 500; color: var(--mute); font-size: .85rem; }
.streak { background: linear-gradient(135deg, #ff8a3d, #ff4f6d); padding: 3px 10px; border-radius: 999px; font-size: .8rem; }
.streak:empty { display: none; }
.today { text-align: center; padding: 22px 18px; }
.today h2 { margin: 0 0 6px; font-size: 1.15rem; }
.today p { margin: 0 0 16px; color: var(--mute); font-size: .9rem; line-height: 1.6; }
.today .btn { width: 100%; font-size: 1.15rem; padding: 17px; }
.today-card { width: 120px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); margin: 4px auto 10px; display: block; cursor: pointer; }
.prog-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 8px; }
.prog-head b { color: var(--gold); font-size: 1.1rem; }
.bar { height: 12px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold-grad); border-radius: inherit; transition: width .8s ease; }
.home-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.home-nav .btn { font-size: .95rem; padding: 12px 8px; }
.news h2 { margin: 0 0 10px; font-size: 1rem; }
.news ul { list-style: none; margin: 0; padding: 0; }
.news li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.6; }
.news li:first-child { border-top: 0; padding-top: 0; }
.news time { color: var(--mute); font-size: .8rem; margin-right: 6px; }
.news .tag { background: var(--pink); color: #fff; font-size: .7rem; font-weight: 900; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
.news b { display: block; }
.foot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dev { color: #ffb36b; }

/* クイズ */
.q-cat { color: var(--accent); font-size: .8rem; margin: 0 0 6px; }
.q-text { font-size: 1.1rem; font-weight: 700; line-height: 1.7; margin: 0 0 16px; }
.choices { display: grid; gap: 10px; }
.choice { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); font-weight: 700; font-size: 1rem; transition: .15s; }
.choice:hover { filter: brightness(1.15); }
.choice.ok { background: linear-gradient(135deg, #1fbf8f, #17a2b8); border-color: transparent; }
.choice.ng { background: #7a2a48; border-color: transparent; opacity: .85; }
.choices.done .choice { pointer-events: none; }
.q-result { margin-top: 18px; animation: fadein .4s ease; }
.q-judge { font-family: var(--font-title); font-size: 1.6rem; text-align: center; margin: 0 0 8px; }
.q-judge.ok { color: #6ff0c0; }
.q-judge.ng { color: #ffb0c4; }
.q-term { font-weight: 900; margin: 0 0 6px; }
.q-desc { color: var(--ink2); font-size: .92rem; line-height: 1.8; margin: 0 0 18px; }
.q-result .btn { width: 100%; }

/* パック（共通の見た目） */
.pack { --h: 210; position: absolute; width: 150px; height: 240px; left: 50%; top: 50%; margin: -120px 0 0 -75px; border-radius: 6px;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) 0 0 / 300% 100%,
    linear-gradient(160deg, hsl(var(--h) 90% 72%), hsl(var(--h) 80% 45%) 45%, hsl(calc(var(--h) + 40) 85% 35%));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.45);
  animation: foil 3.5s linear infinite; cursor: pointer; }
.pack.gold, .bp-body.gold, .bp-top.gold {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 45%, transparent 60%) 0 0 / 300% 100%,
    linear-gradient(160deg, #fff2b8, #e6b345 40%, #9c6a12 100%); }
@keyframes foil { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
.pack::before, .pack::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: inherit; filter: brightness(.85);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.pack::before { top: -10px; transform: scaleY(-1); }
.pack::after { bottom: -10px; }
.pack-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.pack-emblem { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.2) 70%); box-shadow: 0 0 24px rgba(255,255,255,.7); }
.pack-name { font-family: 'Dela Gothic One', sans-serif; font-size: 1rem; line-height: 1.1; text-align: center; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.25); }
.pack-name small { display: block; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: .65rem; letter-spacing: .25em; margin-top: 4px; }
.pack-no { position: absolute; bottom: 10px; right: 10px; font-size: .7rem; font-weight: 900; opacity: .8; }

/* 3Dカルーセル */
.gold-note { text-align: center; margin: 4px 0 0; color: var(--hl); font-weight: 700; animation: glowtext 1.6s ease-in-out infinite; }
@keyframes glowtext { 50% { text-shadow: 0 0 14px rgba(255, 220, 120, .9); } }
.stage { position: relative; height: 400px; perspective: 800px; perspective-origin: 50% 15%; overflow: hidden; touch-action: pan-y; margin: 0 -16px; cursor: grab; }
.stage:active { cursor: grabbing; }
.ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.ring .pack { transition: filter .2s; width: 128px; height: 204px; margin: -102px 0 0 -64px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ring .pack-emblem { width: 58px; height: 58px; font-size: 1.7rem; }
.ring .pack-name { font-size: .85rem; }
.ring .pack.front { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 40px hsl(var(--h) 100% 70% / .8), 0 14px 30px rgba(0,0,0,.5); }
.ring .pack.gold.front { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 46px rgba(255, 215, 110, .95), 0 14px 30px rgba(0,0,0,.5); }
.pick-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.pick-row .btn { min-width: 190px; }

/* 開封 */
#s-open { overflow: hidden; }
#fx { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 2; }
.open-stage { position: relative; height: 66dvh; min-height: 460px; display: grid; place-items: center; perspective: 1200px; z-index: 3; }
.big-pack { position: relative; width: 240px; height: 384px; touch-action: none; }
.big-pack.enter { animation: packIn .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes packIn { from { transform: scale(.3) translateY(200px) rotate(-20deg); opacity: 0; } }
.big-pack.shake { animation: shake .5s linear infinite; }
@keyframes shake { 0%,100% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-4px,2px) rotate(-1.5deg); } 40% { transform: translate(4px,-2px) rotate(1.5deg); } 60% { transform: translate(-3px,-1px) rotate(-1deg); } 80% { transform: translate(3px,2px) rotate(1deg); } }
.big-pack.drop { transition: transform .8s cubic-bezier(.5,0,.8,.4), opacity .8s; transform: translateY(120%) rotate(8deg); opacity: 0; }
.bp-top, .bp-body { position: absolute; left: 0; right: 0; --h: 210;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) 0 0 / 300% 100%,
    linear-gradient(160deg, hsl(var(--h) 90% 72%), hsl(var(--h) 80% 45%) 45%, hsl(calc(var(--h) + 40) 85% 35%));
  background-attachment: local; animation: foil 3.5s linear infinite; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.bp-top { top: 0; height: 52px; border-radius: 8px 8px 0 0; transform-origin: 100% 100%; }
.bp-body { top: 52px; bottom: 0; border-radius: 0 0 8px 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 20px 50px rgba(0,0,0,.5); }
.bp-top::before, .bp-body::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; background: inherit; filter: brightness(.85);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; }
.bp-top::before { top: -12px; transform: scaleY(-1); }
.bp-body::after { bottom: -12px; }
.bp-body .pack-face { gap: 14px; }
.bp-body .pack-emblem { width: 110px; height: 110px; font-size: 3.3rem; }
.bp-body .pack-name { font-size: 1.5rem; }
.bp-top.off { transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s; transform: translate(140px, -260px) rotate(50deg); opacity: 0; }
.cutline { position: absolute; left: -6px; right: -6px; top: 46px; height: 12px; border-top: 3px dashed rgba(255,255,255,.85); filter: drop-shadow(0 0 4px #fff); }
.cutline i { position: absolute; left: 0; top: -5px; height: 7px; width: 0; border-radius: 4px; background: linear-gradient(90deg, #fff, #fffbe0); box-shadow: 0 0 12px 4px rgba(255,255,255,.9), 0 0 30px 8px rgba(255, 230, 140, .7); }
.cutline.done { opacity: 0; transition: opacity .2s; }
.finger { position: absolute; top: -2px; left: 0; font-size: 2.2rem; animation: swipe 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes swipe { 0% { transform: translateX(-10px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(220px); opacity: 0; } }
.open-msg { position: relative; z-index: 3; text-align: center; font-weight: 900; font-size: 1.1rem; margin: 0; min-height: 1.6em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; }
.flash.go { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* 出てくるカード */
.reveal { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.reveal .card3d { width: 230px; opacity: 0; }
.reveal.rise .card3d { animation: rise 1s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes rise { 0% { opacity: 1; transform: translateY(120px) scale(.55); } 100% { opacity: 1; transform: translateY(-10px) scale(.75); } }
.reveal.spin .card3d { opacity: 1; animation: spinup 1.5s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes spinup { 0% { transform: translateY(-10px) scale(.75) rotateY(0); } 100% { transform: translateY(0) scale(1.08) rotateY(1440deg); } }
.reveal.shown { pointer-events: auto; }
.reveal.shown .card3d { opacity: 1; animation: pop .6s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes pop { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }

.card3d { position: relative; aspect-ratio: 2 / 3; transform-style: preserve-3d; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; }
.c-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.4,.5,1); transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.card3d.tilting .c-inner { transition: transform .08s linear; }
.card3d.flipped .c-inner { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.c-face { position: absolute; inset: 0; border-radius: 4.5% / 3%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.c-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.reveal .c-front { transform: rotateY(180deg); }
.shine { position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: .42; pointer-events: none;
  background: repeating-linear-gradient(110deg, #ff7eb6 0%, #ffd56e 8%, #7dffb0 16%, #6fe3ff 24%, #b38bff 32%, #ff7eb6 40%);
  background-size: 300% 300%; background-position: var(--mx) var(--my);
  -webkit-mask: radial-gradient(ellipse 42% 30% at 50% 46%, transparent 55%, #000 100%); mask: radial-gradient(ellipse 42% 30% at 50% 46%, transparent 55%, #000 100%);
  filter: saturate(1.3) brightness(.7); }
.glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.85), rgba(255,255,255,0) 45%); }
.reveal.shown .card3d .c-front { box-shadow: 0 0 60px rgba(160, 220, 255, .8), 0 18px 50px rgba(0,0,0,.55); }

.got { position: relative; z-index: 4; text-align: center; animation: fadein .5s ease .2s both; }
.new-badge { display: inline-block; margin: 0; font-family: 'Dela Gothic One', sans-serif; font-size: 1.4rem; color: #fff; padding: 4px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #ff4f8b, #ff9a3d); box-shadow: 0 0 24px rgba(255, 90, 140, .8); animation: stamp .5s cubic-bezier(.2,1.8,.4,1) both; transform: rotate(-6deg); }
.new-badge.dup { background: linear-gradient(135deg, #4f7bff, #6fe3ff); box-shadow: 0 0 24px rgba(100, 180, 255, .8); }
@keyframes stamp { from { transform: scale(3) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
.got-name { font-size: 1.2rem; margin: 10px 0 14px; }
.got-name b { font-size: 1.5rem; color: var(--gold); }
.got-btns { display: flex; gap: 10px; justify-content: center; }

/* 図鑑 */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
@media (min-width: 520px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.slot { position: relative; border: 0; padding: 0; background: none; border-radius: 6px; aspect-ratio: 2 / 3; }
.slot img { width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.slot.locked img { filter: saturate(.3) brightness(.72); }
.slot.locked::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Dela Gothic One', sans-serif; font-size: 2.6rem; color: rgba(255,255,255,.75); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.slot .no { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: .7rem; font-weight: 900; background: rgba(5,10,40,.75); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.slot .cnt { position: absolute; top: -6px; right: -6px; background: var(--pink); color: #fff; font-weight: 900; font-size: .75rem; border-radius: 999px; padding: 2px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.slot.owned { cursor: pointer; }
.slot.owned:active { transform: scale(.96); }

/* 拡大 */
.modal { position: fixed; inset: 0; z-index: 30; background: var(--modal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; animation: fadein .25s ease; backdrop-filter: blur(4px); }
.modal[hidden] { display: none; }
.card3d.big { width: min(76vw, 340px); }
.m-info { color: var(--mute); font-size: .9rem; margin: 0; }

/* 共有 */
.share-img { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.5); margin: 10px 0 14px; }
.share-img img { width: 100%; display: block; }
.share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-btns .btn { padding: 13px 8px; font-size: .95rem; }
.share-text { white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: .85rem; color: var(--ink2); line-height: 1.7; -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
  .tc, .pack, .bp-top, .bp-body, .btn-main.glow { animation: none !important; }
}

/* ログイン：つづきから／初めての方はこちら */
.entry { display: grid; gap: 12px; }
.entry .btn { width: 100%; padding: 16px; font-size: 1.1rem; }
.entry-note { text-align: center; color: var(--mute); font-size: .8rem; margin: 2px 0 0; }
.form-title { font-family: var(--font-title); font-size: 1.25rem; text-align: center; margin: 0 0 14px; color: var(--hl); }
.login .back { display: block; margin: 10px auto 0; }
.hl { color: var(--hl); font-weight: 700; }

/* 世界観の切り替え（試作用） */
.theme-btn { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--toast); font-size: 1.3rem; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.theme-sheet { position: fixed; inset: auto 0 0 0; z-index: 45; background: var(--toast); color: var(--ink); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.3); animation: up .25s ease; backdrop-filter: blur(10px); }
.theme-sheet[hidden] { display: none; }
@keyframes up { from { transform: translateY(100%); } }
.theme-sheet h2 { margin: 0 0 12px; font-size: 1rem; text-align: center; }
.theme-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
.theme-opt { border: 2px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; text-align: left; background: none; }
.theme-opt.on { border-color: var(--hl); }
.theme-opt .sw { display: block; height: 64px; }
.theme-opt .tn { display: block; padding: 8px 10px; font-weight: 900; font-size: .9rem; background: var(--soft); }
.theme-opt .td { display: block; font-weight: 500; font-size: .72rem; color: var(--mute); margin-top: 2px; }
.sw-night { background: radial-gradient(120% 90% at 50% 0%, #2a3fa0, #080d2c); }
.sw-ehon { background: #d9b98f url("/assets/ehon-bg.jpg") center / cover; }
.sw-library { background: radial-gradient(120% 90% at 50% 10%, #6b4426, #1a0f08); }
.sw-cyber { background: linear-gradient(#05060f, #05060f) padding-box, repeating-linear-gradient(90deg, rgba(0,240,255,.35) 0 1px, transparent 1px 16px), #05060f; box-shadow: inset 0 -20px 30px rgba(255, 61, 242, .35); }

/* ===== えほん（ehon-memory の世界観：ラグの上の絵本・紙とクレヨン） ===== */
html[data-theme="ehon"] {
  --font-logo: var(--font-title);
  --bg-base: #e9cfa6;
  --bg: #d9b98f url("/assets/ehon-bg.jpg") center / cover no-repeat;
  --ink: #5a3a22; --ink2: #6b4a30; --mute: #8a6a50;
  --panel: #fffaf0; --line: #e0c8a8;
  --accent: #ef8a3c; --hl: #e0662a; --gold: #e0662a; --err: #d1452f; --pink: #ef8a3c;
  --soft: #fff3e0; --input: #ffffff;
  --toast: #fffaf0; --modal: rgba(60, 40, 20, .45);
  --title-grad: linear-gradient(180deg, #f7a24e 0%, #e0662a 100%);
  --logo-fx: drop-shadow(0 0 0 #fffaf0) drop-shadow(2px 2px 0 #fffaf0) drop-shadow(-2px -2px 0 #fffaf0) drop-shadow(2px -2px 0 #fffaf0) drop-shadow(-2px 2px 0 #fffaf0) drop-shadow(0 5px 0 rgba(120, 70, 30, .3));
  --btn-grad: #ffe7c7;
  --btn-ink: #5a3a22; --btn-shadow: #e0c8a8; --btn-glow: rgba(239, 138, 60, .55);
  --font-title: 'Zen Maru Gothic', sans-serif;
  --panel-shadow: 0 5px 0 rgba(120, 70, 30, .2);
}
html[data-theme="ehon"] .logo-main { font-weight: 900; letter-spacing: .06em; transform: rotate(-2deg); }
html[data-theme="ehon"] .logo-sub { display: inline-block; background: #fffaf0; border: 3px solid #e0c8a8; border-radius: 14px; padding: 3px 12px; box-shadow: 0 3px 0 rgba(120,70,30,.18); color: #8a6a50; font-weight: 900; letter-spacing: .1em; }
html[data-theme="ehon"] .lead { background: rgba(255,250,240,.85); border-radius: 12px; padding: 6px 10px; color: #6b4a30; font-weight: 700; display: inline-block; }
html[data-theme="ehon"] .panel { border: 4px solid var(--line); border-radius: 22px; backdrop-filter: none; }
html[data-theme="ehon"] .btn { border: 3px solid var(--line); border-radius: 14px; }
html[data-theme="ehon"] .btn-main { box-shadow: 0 4px 0 var(--btn-shadow); }
html[data-theme="ehon"] .btn-main:active, html[data-theme="ehon"] .btn-sub:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
html[data-theme="ehon"] .btn-sub { background: #fff; box-shadow: 0 4px 0 var(--line); }
html[data-theme="ehon"] .icon-btn { background: #fffaf0; border: 3px solid var(--line); box-shadow: 0 3px 0 rgba(120,70,30,.18); }
html[data-theme="ehon"] .bar-title { background: #fffaf0; border: 3px solid var(--line); border-radius: 14px; padding: 4px 12px; box-shadow: 0 3px 0 rgba(120,70,30,.18); }
html[data-theme="ehon"] .who { background: #fffaf0; border: 3px solid var(--line); border-radius: 14px; padding: 4px 6px 4px 12px; box-shadow: 0 3px 0 rgba(120,70,30,.18); }
html[data-theme="ehon"] .choice { background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); }
html[data-theme="ehon"] .choice.ok { background: #5fbf8f; color: #fff; border-color: #3f9e70; box-shadow: 0 3px 0 #3f9e70; }
html[data-theme="ehon"] .choice.ng { background: #e98a7a; color: #fff; border-color: #c96858; box-shadow: 0 3px 0 #c96858; opacity: 1; }
html[data-theme="ehon"] .q-judge.ok { color: #2f9e6e; }
html[data-theme="ehon"] .q-judge.ng { color: #d1452f; }
html[data-theme="ehon"] .bar { background: #f1e2cb; }
html[data-theme="ehon"] .hint, html[data-theme="ehon"] .gold-note, html[data-theme="ehon"] .open-msg, html[data-theme="ehon"] .entry-note { background: rgba(255,250,240,.88); border-radius: 12px; padding: 4px 12px; width: fit-content; margin-left: auto; margin-right: auto; text-shadow: none; color: #5a3a22; }
html[data-theme="ehon"] .open-msg:empty { display: none; }
html[data-theme="ehon"] .theme-btn { border: 3px solid var(--line); background: #fffaf0; }
html[data-theme="ehon"] .theme-sheet { border-top: 4px solid var(--line); }
html[data-theme="ehon"] .share-img, html[data-theme="ehon"] .slot img, html[data-theme="ehon"] .today-card { box-shadow: 0 6px 0 rgba(120,70,30,.22); }
html[data-theme="ehon"] .slot .no { color: #fff; }
html[data-theme="ehon"] .link { color: #6b4a30; background: rgba(255,250,240,.8); border-radius: 8px; }
html[data-theme="ehon"] .tc { box-shadow: 0 8px 0 rgba(120,70,30,.25); }

/* ===== 魔法の書庫 ===== */
html[data-theme="library"] {
  --bg-base: #1a0f08;
  --bg: radial-gradient(120% 80% at 50% 0%, #5c3a20 0%, #2c1a0e 50%, #120a05 100%);
  --ink: #f7ead0; --ink2: #ead8b5; --mute: #c7a97c;
  --panel: rgba(44, 27, 15, .82); --line: rgba(222, 182, 104, .4);
  --accent: #f0c27a; --hl: #ffd88a; --gold: #ffd88a; --err: #ffab91; --pink: #b8452f;
  --soft: rgba(255, 220, 160, .08); --input: rgba(20, 12, 6, .7);
  --toast: rgba(40, 24, 12, .95); --modal: rgba(18, 10, 4, .88);
  --logo-fx: drop-shadow(0 3px 0 #4a2a0a) drop-shadow(0 0 22px rgba(255, 190, 90, .5));
  --btn-ink: #3b1f05; --btn-shadow: #7a4d14; --btn-glow: rgba(255, 196, 100, .9);
  --font-title: 'Shippori Mincho B1', serif;
  --font-body: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  --panel-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 4px rgba(20, 12, 6, .6), inset 0 0 0 5px rgba(222, 182, 104, .25);
}
html[data-theme="library"] .logo-main { font-weight: 800; letter-spacing: .1em; }
html[data-theme="library"] .form-title, html[data-theme="library"] .q-judge { font-weight: 800; }
html[data-theme="library"] .panel { border-radius: 6px; }
html[data-theme="library"] .btn { border-radius: 8px; font-family: 'Shippori Mincho B1', serif; font-weight: 800; }
html[data-theme="library"] .choice { border-radius: 6px; }

/* ===== ネオンAI ===== */
html[data-theme="cyber"] {
  --font-logo: var(--font-title);
  --bg-base: #04050d;
  --bg: radial-gradient(90% 60% at 50% 110%, rgba(255, 61, 242, .25), transparent 70%), radial-gradient(80% 50% at 50% -10%, rgba(0, 240, 255, .18), transparent 70%), #04050d;
  --ink: #e6fbff; --ink2: #bfe9f5; --mute: #7aa3b8;
  --panel: rgba(6, 14, 30, .78); --line: rgba(0, 240, 255, .4);
  --accent: #00f0ff; --hl: #00f0ff; --gold: #ff5cf4; --err: #ff6b9a; --pink: #ff3df2;
  --soft: rgba(0, 240, 255, .07); --input: rgba(0, 10, 20, .8);
  --toast: rgba(4, 10, 22, .95); --modal: rgba(2, 4, 12, .9);
  --title-grad: linear-gradient(90deg, #00f0ff 0%, #8f7bff 50%, #ff3df2 100%);
  --logo-fx: drop-shadow(0 0 6px rgba(0, 240, 255, .8)) drop-shadow(0 0 18px rgba(255, 61, 242, .5));
  --btn-grad: linear-gradient(90deg, #00e5ff, #b26bff);
  --btn-ink: #03121a; --btn-shadow: #00727f; --btn-glow: rgba(0, 240, 255, .9);
  --font-title: 'DotGothic16', sans-serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --panel-shadow: 0 0 0 1px rgba(0, 240, 255, .15), 0 0 24px rgba(0, 240, 255, .12);
}
html[data-theme="cyber"] .panel { border-radius: 4px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
html[data-theme="cyber"] .btn { border-radius: 4px; letter-spacing: .12em; }
html[data-theme="cyber"] .btn-sub { border-color: rgba(0, 240, 255, .5); }
html[data-theme="cyber"] .choice { border-radius: 4px; }
html[data-theme="cyber"] .logo-main { letter-spacing: .08em; }
html[data-theme="cyber"] .logo-sub::before { content: '> '; }
html[data-theme="cyber"] .q-judge.ok { color: #00f0ff; text-shadow: 0 0 12px #00f0ff; }
html[data-theme="cyber"] .q-judge.ng { color: #ff3df2; text-shadow: 0 0 12px #ff3df2; }
html[data-theme="cyber"] .streak { background: linear-gradient(90deg, #ff3df2, #8f7bff); }
.entry[hidden], .login label[hidden] { display: none; }
#in-pin2 { letter-spacing: .6em; font-size: 1.4rem; text-align: center; }

/* えほん版のパック：ホイルではなく、やわらかい色紙 */
html[data-theme="ehon"] .pack, html[data-theme="ehon"] .bp-top, html[data-theme="ehon"] .bp-body {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 45%),
    linear-gradient(170deg, hsl(var(--h) 60% 80%), hsl(var(--h) 48% 66%));
  animation: none; }
html[data-theme="ehon"] .pack.gold, html[data-theme="ehon"] .bp-top.gold, html[data-theme="ehon"] .bp-body.gold {
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 45%), linear-gradient(170deg, #ffe39a, #f2b24b); }
html[data-theme="ehon"] .pack { box-shadow: inset 0 0 0 4px #fffaf0, 0 6px 0 rgba(120,70,30,.25); border-radius: 10px; }
html[data-theme="ehon"] .ring .pack.front { box-shadow: inset 0 0 0 4px #fffaf0, 0 6px 0 rgba(120,70,30,.25), 0 0 0 4px #ef8a3c; }
html[data-theme="ehon"] .ring .pack.gold.front { box-shadow: inset 0 0 0 4px #fffaf0, 0 6px 0 rgba(120,70,30,.25), 0 0 0 4px #e0662a, 0 0 30px rgba(255, 200, 90, .8); }
html[data-theme="ehon"] .bp-top { box-shadow: inset 0 0 0 4px #fffaf0; }
html[data-theme="ehon"] .bp-body { box-shadow: inset 0 0 0 4px #fffaf0, 0 8px 0 rgba(120,70,30,.25); }
html[data-theme="ehon"] .pack-emblem { background: #fffaf0; box-shadow: 0 4px 0 rgba(120,70,30,.2); }
html[data-theme="ehon"] .pack-name { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; color: #fffaf0; text-shadow: 0 2px 0 rgba(90,58,34,.45); }
html[data-theme="ehon"] .pack-no { color: #fffaf0; }

.sw-mori { background: #f6f3dc url("/assets/mori-bg.webp") center / cover; }
.sw-sora { background: linear-gradient(180deg, #6ec1f5, #bfe6ff 60%, #fff1d6); }
.sw-pop { background: radial-gradient(circle, rgba(0,0,0,.18) 1.5px, transparent 2px) 0 0 / 10px 10px, #ffd93b; }

/* ===== もりのえほん（水彩と色鉛筆。手描きのフチ・マスキングテープ） ===== */
html[data-theme="mori"] {
  --font-logo: var(--font-title);
  --bg-base: #f6f3dc;
  --bg: #f6f3dc url("/assets/mori-bg.webp") center / cover no-repeat;
  --ink: #4a3b2a; --ink2: #5a4a36; --mute: #857257;
  --panel: rgba(255, 253, 244, .94); --line: #6b5640;
  --accent: #5f9e45; --hl: #d9692f; --gold: #d9692f; --err: #c4472d; --pink: #e58aa0;
  --soft: #f4f0dc; --input: #fffdf5;
  --toast: #fffdf5; --modal: rgba(74, 59, 42, .45);
  --title-grad: linear-gradient(180deg, #8fcf6a 0%, #4f9a3a 100%);
  --logo-fx: drop-shadow(2px 2px 0 #fffdf5) drop-shadow(-2px -2px 0 #fffdf5) drop-shadow(2px -2px 0 #fffdf5) drop-shadow(-2px 2px 0 #fffdf5) drop-shadow(0 4px 0 rgba(74,59,42,.35));
  --btn-grad: #9fd27c;
  --btn-ink: #2f4a1f; --btn-shadow: #4a3b2a; --btn-glow: rgba(159, 210, 124, .7);
  --font-title: 'Yusei Magic', sans-serif;
  --font-body: 'Klee One', 'Hiragino Maru Gothic ProN', sans-serif;
  --panel-shadow: 3px 4px 0 rgba(74, 59, 42, .25);
}
html[data-theme="mori"] body { font-weight: 600; }
html[data-theme="mori"] .panel, html[data-theme="mori"] .btn, html[data-theme="mori"] .choice, html[data-theme="mori"] .icon-btn, html[data-theme="mori"] .bar-title, html[data-theme="mori"] .who, html[data-theme="mori"] .theme-btn {
  border: 2.5px solid var(--line); border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; }
html[data-theme="mori"] .panel { position: relative; backdrop-filter: none; overflow: visible; }
html[data-theme="mori"] .panel::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(255, 214, 120, .85) 0 8px, rgba(255, 228, 160, .85) 8px 16px); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
html[data-theme="mori"] .panel:nth-of-type(even)::before { transform: translateX(-50%) rotate(4deg); background: repeating-linear-gradient(45deg, rgba(170, 215, 150, .85) 0 8px, rgba(195, 230, 175, .85) 8px 16px); }
html[data-theme="mori"] .btn { box-shadow: 2px 3px 0 var(--line); }
html[data-theme="mori"] .btn:active { transform: translate(2px, 3px); box-shadow: none; }
html[data-theme="mori"] .btn-sub { background: #fffdf5; }
html[data-theme="mori"] .icon-btn, html[data-theme="mori"] .theme-btn { background: #fffdf5; }
html[data-theme="mori"] .logo-main { font-size: 2.9rem; letter-spacing: .04em; }
html[data-theme="mori"] .logo.small .logo-main { font-size: 1.9rem; }
html[data-theme="mori"] .logo-sub { color: #5f9e45; font-weight: 600; }
html[data-theme="mori"] .bar-title, html[data-theme="mori"] .who { background: #fffdf5; padding: 4px 12px; }
html[data-theme="mori"] .lead, html[data-theme="mori"] .hint, html[data-theme="mori"] .gold-note, html[data-theme="mori"] .open-msg, html[data-theme="mori"] .entry-note, html[data-theme="mori"] .link {
  background: rgba(255, 253, 244, .9); border-radius: 12px; padding: 4px 12px; width: fit-content; margin-left: auto; margin-right: auto; color: var(--ink); text-shadow: none; }
html[data-theme="mori"] .lead { display: inline-block; }
html[data-theme="mori"] .open-msg:empty { display: none; }
html[data-theme="mori"] .choice { background: #fffdf5; box-shadow: 2px 3px 0 rgba(74,59,42,.25); }
html[data-theme="mori"] .choice.ok { background: #9fd27c; color: #2f4a1f; }
html[data-theme="mori"] .choice.ng { background: #f2a58e; color: #5a2a1a; opacity: 1; }
html[data-theme="mori"] .q-judge.ok { color: #4f9a3a; }
html[data-theme="mori"] .q-judge.ng { color: #c4472d; }
html[data-theme="mori"] .bar { background: #ece5c8; border: 2px solid var(--line); height: 14px; }
html[data-theme="mori"] .streak { background: #f2a58e; color: #4a2a1a; border: 2px solid var(--line); }
html[data-theme="mori"] .news .tag { background: #e58aa0; }
html[data-theme="mori"] .slot img, html[data-theme="mori"] .today-card, html[data-theme="mori"] .tc, html[data-theme="mori"] .share-img { box-shadow: 3px 5px 0 rgba(74,59,42,.25); }
html[data-theme="mori"] .slot .no { color: #fff; }
/* パック：画用紙に色鉛筆でぬったような色と、ステッチ */
html[data-theme="mori"] .pack, html[data-theme="mori"] .bp-top, html[data-theme="mori"] .bp-body {
  background:
    repeating-linear-gradient(-35deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
    linear-gradient(170deg, hsl(var(--h) 55% 82%), hsl(var(--h) 45% 68%));
  animation: none; }
html[data-theme="mori"] .pack.gold, html[data-theme="mori"] .bp-top.gold, html[data-theme="mori"] .bp-body.gold {
  background: repeating-linear-gradient(-35deg, rgba(255,255,255,.25) 0 2px, transparent 2px 6px), linear-gradient(170deg, #ffeaa0, #f3be55); }
html[data-theme="mori"] .pack { border: 2.5px solid #4a3b2a; border-radius: 12px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.35), 3px 4px 0 rgba(74,59,42,.3); }
html[data-theme="mori"] .pack::before, html[data-theme="mori"] .pack::after { display: none; }
html[data-theme="mori"] .pack-face { outline: 2px dashed rgba(255,255,255,.85); outline-offset: -12px; border-radius: 12px; }
html[data-theme="mori"] .ring .pack.front { box-shadow: inset 0 0 0 5px rgba(255,255,255,.35), 3px 4px 0 rgba(74,59,42,.3), 0 0 0 5px #fff6a8; }
html[data-theme="mori"] .bp-top { border: 2.5px solid #4a3b2a; border-bottom: 0; }
html[data-theme="mori"] .bp-body { border: 2.5px solid #4a3b2a; border-top: 2px dashed #4a3b2a; box-shadow: 4px 6px 0 rgba(74,59,42,.3); }
html[data-theme="mori"] .bp-top::before, html[data-theme="mori"] .bp-body::after { display: none; }
html[data-theme="mori"] .pack-emblem { background: #fffdf5; border: 2.5px solid #4a3b2a; box-shadow: none; }
html[data-theme="mori"] .pack-name { font-family: 'Yusei Magic', sans-serif; color: #fffdf5; text-shadow: 0 2px 0 rgba(74,59,42,.55); font-weight: 400; }
html[data-theme="mori"] .pack-no { color: #4a3b2a; }

/* ===== あさのそら（朝の空・雲・朝日） ===== */
html[data-theme="sora"] {
  --font-logo: var(--font-title);
  --bg-base: #8ccff7;
  --bg: radial-gradient(70% 40% at 85% 100%, rgba(255, 196, 120, .55), transparent 70%), linear-gradient(180deg, #5db8f2 0%, #a9dcfb 45%, #e4f4ff 75%, #fff1d6 100%);
  --ink: #1f3a5f; --ink2: #2c4b73; --mute: #5d7a9e;
  --panel: rgba(255,255,255,.78); --line: rgba(255,255,255,.95);
  --accent: #1f86e0; --hl: #ff7a2e; --gold: #ff7a2e; --err: #d93a4a; --pink: #ff7a2e;
  --soft: rgba(31, 134, 224, .08); --input: #ffffff;
  --toast: rgba(255,255,255,.95); --modal: rgba(20, 60, 110, .45);
  --title-grad: linear-gradient(180deg, #1565c0 0%, #2b97f0 100%);
  --logo-fx: drop-shadow(0 0 1px #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 8px 16px rgba(30, 110, 200, .35));
  --btn-grad: linear-gradient(135deg, #ffb24d, #ff7a2e);
  --btn-ink: #ffffff; --btn-shadow: #d95a1a; --btn-glow: rgba(255, 160, 80, .8);
  --font-title: 'M PLUS Rounded 1c', sans-serif;
  --font-body: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --panel-shadow: 0 10px 30px rgba(40, 110, 190, .18);
}
html[data-theme="sora"] body { font-weight: 700; }
html[data-theme="sora"] .logo-main { font-weight: 900; letter-spacing: .02em; }
html[data-theme="sora"] .logo-sub { color: #fff; text-shadow: 0 1px 4px rgba(30,90,160,.5); font-weight: 800; }
html[data-theme="sora"] .lead { color: #fff; text-shadow: 0 1px 4px rgba(30,90,160,.6); font-weight: 800; }
html[data-theme="sora"] .panel { border-radius: 26px; border-width: 2px; backdrop-filter: blur(10px); }
html[data-theme="sora"] .btn-main { text-shadow: 0 1px 2px rgba(160, 60, 0, .35); }
html[data-theme="sora"] .btn-sub { background: #fff; border: 2px solid #cfe7fb; color: #1f86e0; }
html[data-theme="sora"] .icon-btn, html[data-theme="sora"] .theme-btn { background: rgba(255,255,255,.85); border-color: #fff; color: #1f86e0; }
html[data-theme="sora"] .bar-title, html[data-theme="sora"] .who { color: #fff; text-shadow: 0 1px 4px rgba(30,90,160,.6); }
html[data-theme="sora"] .who-name::after { color: #eaf6ff; }
html[data-theme="sora"] .hint, html[data-theme="sora"] .gold-note, html[data-theme="sora"] .open-msg, html[data-theme="sora"] .entry-note { color: #1f3a5f; text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
html[data-theme="sora"] .choice { background: #fff; border: 2px solid #d7ebfb; }
html[data-theme="sora"] .choice.ok { background: linear-gradient(135deg, #34c48a, #1fae9e); color: #fff; }
html[data-theme="sora"] .choice.ng { background: #f08a95; color: #fff; opacity: 1; }
html[data-theme="sora"] .q-judge.ok { color: #1fae7a; }
html[data-theme="sora"] .q-judge.ng { color: #d93a4a; }
html[data-theme="sora"] .bar { background: #e2f1fd; }
html[data-theme="sora"] .bar i { background: linear-gradient(90deg, #43b7ff, #ffb24d); }
html[data-theme="sora"] .link { color: #fff; text-shadow: 0 1px 3px rgba(30,90,160,.6); }
html[data-theme="sora"] .slot .no { color: #fff; }
html[data-theme="sora"] .pack, html[data-theme="sora"] .bp-top, html[data-theme="sora"] .bp-body {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 60%) 0 0 / 300% 100%, linear-gradient(170deg, hsl(var(--h) 85% 82%), hsl(var(--h) 75% 62%)); }

/* ===== ポップコミック（黄色・水玉・集中線・太い黒フチ） ===== */
html[data-theme="pop"] {
  --font-logo: var(--font-title);
  --bg-base: #ffd93b;
  --bg: radial-gradient(circle, rgba(0,0,0,.13) 1.6px, transparent 2.2px) 0 0 / 12px 12px, repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.35) 0 4deg, transparent 4deg 12deg), #ffd93b;
  --ink: #111111; --ink2: #222222; --mute: #555555;
  --panel: #ffffff; --line: #111111;
  --accent: #1e6bff; --hl: #ff3b3b; --gold: #ff3b3b; --err: #e0002a; --pink: #ff3b3b;
  --soft: #fff6c9; --input: #ffffff;
  --toast: #ffffff; --modal: rgba(17, 17, 17, .55);
  --title-grad: linear-gradient(180deg, #ff5b5b, #ff2626);
  --logo-fx: drop-shadow(3px 0 0 #111) drop-shadow(-3px 0 0 #111) drop-shadow(0 3px 0 #111) drop-shadow(0 -3px 0 #111) drop-shadow(5px 6px 0 #111);
  --btn-grad: #ff3b3b;
  --btn-ink: #ffffff; --btn-shadow: #111111; --btn-glow: rgba(255, 59, 59, .6);
  --font-title: 'Dela Gothic One', sans-serif;
  --font-body: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --panel-shadow: 6px 6px 0 #111;
}
html[data-theme="pop"] body { font-weight: 800; }
html[data-theme="pop"] .panel { border: 3px solid #111; border-radius: 14px; backdrop-filter: none; }
html[data-theme="pop"] .panel:nth-of-type(odd) { transform: rotate(-.6deg); }
html[data-theme="pop"] .panel:nth-of-type(even) { transform: rotate(.6deg); }
html[data-theme="pop"] .btn { border: 3px solid #111; border-radius: 12px; box-shadow: 4px 4px 0 #111; }
html[data-theme="pop"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111; }
html[data-theme="pop"] .btn-main { -webkit-text-stroke: .5px #111; text-shadow: 2px 2px 0 #111; letter-spacing: .08em; }
html[data-theme="pop"] .btn-sub { background: #fff; }
html[data-theme="pop"] .icon-btn, html[data-theme="pop"] .theme-btn { background: #fff; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
html[data-theme="pop"] .logo-main { transform: rotate(-3deg); }
html[data-theme="pop"] .logo-sub { display: inline-block; background: #1e6bff; color: #fff; border: 3px solid #111; padding: 2px 12px; transform: rotate(-2deg); box-shadow: 3px 3px 0 #111; letter-spacing: .1em; }
html[data-theme="pop"] .lead, html[data-theme="pop"] .hint, html[data-theme="pop"] .gold-note, html[data-theme="pop"] .open-msg, html[data-theme="pop"] .entry-note {
  position: relative; background: #fff; border: 3px solid #111; border-radius: 18px; padding: 6px 14px; width: fit-content; margin-left: auto; margin-right: auto; color: #111; text-shadow: none; box-shadow: 3px 3px 0 #111; }
html[data-theme="pop"] .lead { display: inline-block; }
html[data-theme="pop"] .open-msg:empty { display: none; }
html[data-theme="pop"] .bar-title, html[data-theme="pop"] .who { background: #fff; border: 3px solid #111; border-radius: 10px; padding: 3px 10px; box-shadow: 3px 3px 0 #111; }
html[data-theme="pop"] .choice { background: #fff; border: 3px solid #111; border-radius: 12px; box-shadow: 3px 3px 0 #111; }
html[data-theme="pop"] .choice.ok { background: #1ed27a; color: #111; }
html[data-theme="pop"] .choice.ng { background: #ff8a8a; color: #111; opacity: 1; }
html[data-theme="pop"] .q-judge { -webkit-text-stroke: 1.5px #111; text-shadow: 3px 3px 0 #111; font-size: 2rem; }
html[data-theme="pop"] .q-judge.ok { color: #1ed27a; }
html[data-theme="pop"] .q-judge.ng { color: #1e6bff; }
html[data-theme="pop"] .bar { background: #fff; border: 3px solid #111; height: 18px; }
html[data-theme="pop"] .bar i { background: repeating-linear-gradient(-45deg, #ff3b3b 0 8px, #ff6b6b 8px 16px); border-radius: 0; }
html[data-theme="pop"] .streak { background: #1e6bff; border: 2px solid #111; }
html[data-theme="pop"] .news .tag { background: #ff3b3b; border: 2px solid #111; }
html[data-theme="pop"] .link { color: #111; background: #fff; border-radius: 6px; }
html[data-theme="pop"] .new-badge { border: 3px solid #111; box-shadow: 4px 4px 0 #111; -webkit-text-stroke: 1px #111; }
html[data-theme="pop"] .slot img, html[data-theme="pop"] .today-card, html[data-theme="pop"] .tc, html[data-theme="pop"] .share-img { border: 3px solid #111; box-shadow: 5px 5px 0 #111; }
html[data-theme="pop"] .slot .no { color: #fff; }
html[data-theme="pop"] .pack, html[data-theme="pop"] .bp-top, html[data-theme="pop"] .bp-body {
  background: radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 2.6px) 0 0 / 11px 11px, linear-gradient(170deg, hsl(var(--h) 95% 62%), hsl(var(--h) 90% 50%));
  animation: none; }
html[data-theme="pop"] .pack.gold, html[data-theme="pop"] .bp-top.gold, html[data-theme="pop"] .bp-body.gold {
  background: radial-gradient(circle, rgba(255,255,255,.45) 2px, transparent 2.6px) 0 0 / 11px 11px, linear-gradient(170deg, #ffe45c, #ffb800); }
html[data-theme="pop"] .pack { border: 3px solid #111; border-radius: 8px; box-shadow: 5px 5px 0 #111; }
html[data-theme="pop"] .ring .pack.front { box-shadow: 5px 5px 0 #111, 0 0 0 5px #fff, 0 0 0 8px #111; }
html[data-theme="pop"] .bp-top { border: 3px solid #111; border-bottom: 0; }
html[data-theme="pop"] .bp-body { border: 3px solid #111; box-shadow: 7px 7px 0 #111; }
html[data-theme="pop"] .pack-emblem { background: #fff; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
html[data-theme="pop"] .pack-name { color: #fff; -webkit-text-stroke: 1px #111; text-shadow: 2px 2px 0 #111; }

/* ===== パック：デザイン画像（assets/pack.webp 720x1210）。全世界観で共通 ===== */
.pack, .bp-top, .bp-body, html[data-theme] .pack, html[data-theme] .bp-top, html[data-theme] .bp-body {
  background: url("/assets/pack.webp") 0 0 / 100% 100% no-repeat !important; border: 0 !important; animation: none !important; box-shadow: none; }
.pack, html[data-theme] .pack { filter: brightness(var(--b, 1)) drop-shadow(0 10px 18px rgba(0,0,0,.35)); border-radius: 0; box-shadow: none !important; }
.pack::before, html[data-theme] .pack::before { display: none !important; }
.pack::after, html[data-theme] .pack::after { display: block !important; content: ''; position: absolute; inset: 0; height: auto; top: 0; bottom: 0; filter: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) 0 0 / 300% 100%;
  -webkit-mask: url("/assets/pack.webp") 0 0 / 100% 100%; mask: url("/assets/pack.webp") 0 0 / 100% 100%;
  mix-blend-mode: screen; animation: foil 3.2s linear infinite; transform: none; }
.ring .pack { width: 128px; height: 205px; margin: -103px 0 0 -64px; }
.ring .pack.front, html[data-theme] .ring .pack.front { box-shadow: none !important; filter: drop-shadow(0 0 16px rgba(160, 210, 255, .95)) drop-shadow(0 10px 18px rgba(0,0,0,.35)) !important; }
.pack.gold, .bp-top.gold, .bp-body.gold, html[data-theme] .pack.gold, html[data-theme] .bp-top.gold, html[data-theme] .bp-body.gold {
  background: url("/assets/pack.webp") 0 0 / 100% 100% no-repeat !important; }
.gold-tone { filter: sepia(.85) saturate(2.4) hue-rotate(-14deg) brightness(1.1); }
.ring .pack.gold.front, html[data-theme] .ring .pack.gold.front { filter: sepia(.85) saturate(2.4) hue-rotate(-14deg) brightness(1.1) drop-shadow(0 0 18px rgba(255, 210, 100, .95)) !important; }
.ring .pack.gold, html[data-theme] .ring .pack.gold { filter: sepia(.85) saturate(2.4) hue-rotate(-14deg) brightness(calc(var(--b, 1) * 1.1)) drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.big-pack { width: 240px; height: 384px; }
.big-pack.gold-tone .bp-top, .big-pack.gold-tone .bp-body { filter: sepia(.85) saturate(2.4) hue-rotate(-14deg) brightness(1.1); }
.bp-top, html[data-theme] .bp-top { height: 30px; border-radius: 0; background-size: 240px 384px !important; background-position: 0 0 !important; }
.bp-body, html[data-theme] .bp-body { top: 30px; border-radius: 0; background-size: 240px 384px !important; background-position: 0 -30px !important; filter: drop-shadow(0 16px 26px rgba(0,0,0,.35)); }
.bp-top::before, .bp-body::after, html[data-theme] .bp-top::before, html[data-theme] .bp-body::after { display: none !important; }
.cutline { top: 26px; }
.pack-face, .pack-no { display: none !important; }

/* AIMATE ロゴ（英字）。Cinzel は字幅が広いので少し小さめに */
:root:not([data-theme="cyber"]):not([data-theme="ehon"]):not([data-theme="mori"]):not([data-theme="sora"]):not([data-theme="pop"]) .logo-main { font-size: 3rem; letter-spacing: .06em; font-weight: 900; }
:root:not([data-theme="cyber"]):not([data-theme="ehon"]):not([data-theme="mori"]):not([data-theme="sora"]):not([data-theme="pop"]) .logo.small .logo-main { font-size: 1.9rem; }

/* ===== アイコン（線画のSVG。色は文字色） ===== */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; }
.icon-btn .ic { width: 22px; height: 22px; }
.icon-btn.big .ic { width: 26px; height: 26px; stroke-width: 2.4; }
.theme-btn { display: grid; place-items: center; color: var(--ink); }
.theme-btn .ic { width: 24px; height: 24px; }
.link .ic { width: 1em; height: 1em; margin-right: .25em; }
.streak { display: inline-flex; align-items: center; gap: 3px; }
.streak .ic { width: 14px; height: 14px; fill: #ffd27a; stroke: #fff; stroke-width: 1.6; }
.ic-h { width: 1.2em; height: 1.2em; margin-right: .3em; color: var(--hl); stroke-width: 1.8; }
.finger { display: block; width: 40px; height: 40px; top: -6px; }
.finger .ic { width: 40px; height: 40px; fill: #fff; stroke: #1c2450; stroke-width: 1.4; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
#q-next .ic { width: 1.2em; height: 1.2em; stroke-width: 2.4; }
.home-nav .btn .ic, .got-btns .btn .ic { width: 1.25em; height: 1.25em; }

/* ===== 星空ナイトの文字：丸ゴシックをやめて、角ゴシック＋見出しは明朝 ===== */
:root {
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --font-title: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
}
html[data-theme="night"] .q-judge, html[data-theme="night"] .form-title { font-weight: 800; letter-spacing: .04em; }
html[data-theme="night"] .new-badge { font-family: 'Cinzel Decorative', serif; font-weight: 900; letter-spacing: .06em; }
html[data-theme="night"] .today h2, html[data-theme="night"] .news h2, html[data-theme="night"] .bar-title { font-family: var(--font-title); font-weight: 800; letter-spacing: .04em; }
html[data-theme="night"] .btn { letter-spacing: .08em; }
/* えほん（ラグ）は丸ゴシックのまま */
html[data-theme="ehon"] { --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif; }

/* 出てきたカードの光をひかえめに（2026-10-06） */
.reveal.shown .card3d .c-front, html[data-theme] .reveal.shown .card3d .c-front { box-shadow: 0 0 26px rgba(170, 220, 255, .38), 0 18px 40px rgba(0,0,0,.45); }
.reveal .shine { opacity: .22; }
.reveal .glare { opacity: .55; }
.card3d.big .shine { opacity: .28; }

/* 開封後の文字まわりの余白（メッセージ → NEW! → ○○さんをゲット！ → ボタン） */
.open-msg { margin: 6px 0 0; }
.got { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 18px; }
.new-badge { margin: 0; line-height: 1.2; padding: 6px 18px 4px; }
.got-name { margin: 20px 0 22px; line-height: 1.3; }
.got-name b { margin-right: .05em; }
.got[hidden] { display: none; }

/* バグ・ご意見の連絡 */
.report { text-align: center; padding: 16px; }
.report-text { margin: 0 0 12px; color: var(--mute); font-size: .85rem; line-height: 1.6; }
.report-btn { width: 100%; text-decoration: none; color: var(--ink); font-size: .92rem; padding: 12px 10px; }

/* ホーム：今日のパック */
.today-pack { position: relative; width: 112px; margin: 6px auto 14px; cursor: pointer; animation: packBob 3.6s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.today-pack img { width: 100%; display: block; }
.today-pack::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) 0 0 / 300% 100%;
  -webkit-mask: url("/assets/pack.webp") 0 0 / 100% 100%; mask: url("/assets/pack.webp") 0 0 / 100% 100%; mix-blend-mode: screen; animation: foil 3.2s linear infinite; }
@keyframes packBob { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.today-pack:active { transform: scale(.96); }

/* 音の設定 */
.snd-row { display: grid; grid-template-columns: 22px 64px auto 1fr; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto 14px; }
.snd-row .ic { width: 20px; height: 20px; }
.snd-name { font-weight: 700; }
.snd-row input[type=range] { width: 100%; accent-color: var(--hl); }
.snd-row input[type=range]:disabled { opacity: .35; }
.sw-toggle { position: relative; width: 46px; height: 26px; display: inline-block; }
.sw-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw-toggle i { position: absolute; inset: 0; border-radius: 99px; background: rgba(128,128,128,.4); transition: .2s; }
.sw-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sw-toggle input:checked + i { background: var(--hl); }
.sw-toggle input:checked + i::after { transform: translateX(20px); }
.snd-note { text-align: center; color: var(--mute); font-size: .78rem; margin: 4px 0 0; }

/* プレゼント */
.gift { text-align: center; border-color: var(--hl); }
.gift h2 { margin: 0 0 6px; font-size: 1.1rem; }
.gift p { margin: 0 0 12px; color: var(--mute); font-size: .9rem; }
.gift-cards { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gift-cards img { width: 96px; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.gift .btn { width: 100%; }

/* カードを指で回す */
.card3d.spinnable { touch-action: none; cursor: grab; }
.card3d.spinnable:active { cursor: grabbing; }
.modal .m-back { transform: rotateY(180deg); }
.m-hint { color: var(--mute); font-size: .8rem; margin: -4px 0 0; }
.m-close { min-width: 140px; padding: 10px 20px; }

/* 毎日のほめ言葉 */
.praise { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px auto 0; width: fit-content; max-width: 100%; padding: 5px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); font-size: .88rem; font-weight: 700; animation: fadein .6s ease .2s both; }
.praise .ic { width: 15px; height: 15px; color: var(--hl); flex: none; }
.home-nav .wide { grid-column: 1 / -1; }

/* クイズのふりかえり */
.rv-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.rv-stats b { display: block; font-size: 1.5rem; color: var(--hl); }
.rv-stats span { font-size: .78rem; color: var(--mute); }
.rv-item { padding: 0; overflow: hidden; }
.rv-item summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 700; }
.rv-item summary::-webkit-details-marker { display: none; }
.rv-item summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: .2s; flex: none; }
.rv-item[open] summary::after { transform: rotate(-135deg); }
.rv-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.rv-mark .ic { width: 16px; height: 16px; stroke-width: 3; color: #fff; }
.rv-mark.ok { background: #1fae7a; }
.rv-mark.ng { background: #d9576b; }
.rv-day { color: var(--mute); font-size: .82rem; flex: none; }
.rv-term { flex: 1; min-width: 0; }
.rv-item > p { margin: 0 16px 10px; line-height: 1.75; font-size: .9rem; }
.rv-item > p:last-child { margin-bottom: 16px; }
.rv-q { font-weight: 700; }
.rv-a span, .rv-x span { display: inline-block; font-size: .72rem; font-weight: 900; background: var(--hl); color: var(--bg-base); border-radius: 4px; padding: 0 6px; margin-right: 6px; vertical-align: 1px; }
.rv-a em { font-style: normal; color: var(--mute); font-size: .82rem; margin-left: 4px; }
.rv-b { color: var(--ink); }
.rv-d, .rv-x { color: var(--ink2); }