/* TRINITY theme on top of the claim app: night sky, full moon + torii, sakura pink, Japanese type.
   Animations: transform/opacity only; loops pause off screen (.offscreen) and with reduced motion. */
@font-face { font-family: 'Dela'; src: url(../fonts/dela.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Kaku'; src: url(../fonts/kaku.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Kaku'; src: url(../fonts/kaku-b.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Mincho'; src: url(../fonts/mincho-b.woff2) format('woff2'); font-weight: 800; font-display: swap; }
:root {
  --ink: #05060c; --panel: rgba(10, 12, 24, .88); --card: rgba(20, 22, 40, .78); --line: rgba(233, 236, 245, .1);
  --chip: rgba(233, 236, 245, .07); --chip-hover: rgba(233, 236, 245, .12); --chip-text: #e9ecf5;
  --bubble: rgba(255, 158, 193, .1); --bubble-hover: rgba(255, 158, 193, .18); --dim: #a2a7c2; --faint: #62688a;
  --iris: #ff9ec1; --avatar: #2a1830; --avatar-text: #ff9ec1; --red: #ff6b81;
  --sakura: #ff9ec1; --sakura2: #ffd0e0; --sakura3: #ff5c95; --moon: #e9ecf5; --washi: #f3eee4; --gold: #ffd89a;
  --display: 'Dela', 'Kaku', 'Hiragino Sans', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Kaku', 'Hiragino Sans', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif;
}
body { background: var(--ink); color: var(--washi); }

/* sky: the moon + torii art, fading into the night behind the panel */
.sky { position: fixed; inset: 0 0 auto; height: min(78vh, 720px); z-index: -2; overflow: hidden; pointer-events: none; }
.sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .62; transform: scale(1.04); }
.sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 12, .25) 0%, rgba(5, 6, 12, .55) 55%, var(--ink) 100%); }

/* a few sakura petals (8, transform-only, paused when hidden) */
.petals { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.petals i { position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 12px 1px 12px 1px; background: linear-gradient(135deg, #ffd0e0, #ff9ec1);
  opacity: .8; animation: fall 14s linear infinite; will-change: transform; }
.petals i:nth-child(1) { left: 6%; animation-duration: 15s; animation-delay: -2s; }
.petals i:nth-child(2) { left: 18%; animation-duration: 12s; animation-delay: -7s; transform: scale(.7); }
.petals i:nth-child(3) { left: 31%; animation-duration: 17s; animation-delay: -4s; }
.petals i:nth-child(4) { left: 47%; animation-duration: 13s; animation-delay: -10s; }
.petals i:nth-child(5) { left: 62%; animation-duration: 16s; animation-delay: -1s; }
.petals i:nth-child(6) { left: 74%; animation-duration: 11s; animation-delay: -6s; }
.petals i:nth-child(7) { left: 86%; animation-duration: 18s; animation-delay: -12s; }
.petals i:nth-child(8) { left: 94%; animation-duration: 14s; animation-delay: -8s; }
@keyframes fall { 0% { transform: translate3d(0, -20px, 0) rotate(0); } 50% { transform: translate3d(40px, 50vh, 0) rotate(200deg); } 100% { transform: translate3d(-20px, 105vh, 0) rotate(420deg); } }
@media (prefers-reduced-motion: reduce) { .petals { display: none; } }
html.hidden-tab .petals i { animation-play-state: paused; }

/* header */
.hd { border-bottom: 1px solid var(--line); background: rgba(5, 6, 12, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; z-index: 3; }
.hd-name { font-family: var(--display); letter-spacing: .02em; }
.hd-name small { font-family: var(--sans); font-size: .62em; color: var(--sakura); margin-left: 6px; font-weight: 700; letter-spacing: .1em; }
.hd-logo { box-shadow: 0 0 0 2px rgba(255, 158, 193, .5), 0 0 24px rgba(255, 92, 149, .35); }
.hd-r { display: flex; align-items: center; gap: 8px; }
.lng { display: flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; background: rgba(10, 12, 24, .5); }
.lng button { padding: 6px 10px; border-radius: 99px; font-size: 12px; color: var(--dim); min-height: 30px; }
.lng button.on { background: var(--moon); color: var(--ink); font-weight: 700; }
.hd-follow { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--moon); }

/* balance */
.bal { padding-top: 22px; }
.kicker { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; font-size: 12px; letter-spacing: .14em; color: var(--sakura2);
  background: rgba(255, 158, 193, .1); box-shadow: inset 0 0 0 1px rgba(255, 158, 193, .3); margin: 0 0 10px; }
.bal-n { font-family: var(--display); text-shadow: 0 0 40px rgba(255, 92, 149, .35); }
.bal-n .f { color: rgba(243, 238, 228, .45); }
.bal-est { margin: 4px 0 16px; font-size: 12px; color: var(--dim); letter-spacing: .04em; }
.act { background: rgba(233, 236, 245, .07); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.act .ic { color: var(--sakura); }

/* tabs */
.tabs { position: relative; }
.tab { font-family: var(--display); }
.tab.on { color: var(--washi); }
.tag { background: rgba(255, 158, 193, .16); color: var(--sakura2); }
.moon-daruma { position: absolute; right: 4px; bottom: 6px; width: 86px; height: auto; pointer-events: none; animation: bob 4.8s ease-in-out infinite; filter: drop-shadow(0 8px 20px rgba(255, 92, 149, .35)); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@media (max-width: 420px) { .moon-daruma { width: 66px; } .tab { font-size: 15px; } }

/* panel + cards */
.panel { background: linear-gradient(180deg, rgba(10, 12, 24, .82), rgba(5, 6, 12, .98) 260px); border-top: 1px solid var(--line); }
.card { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.t-ic { background: rgba(255, 158, 193, .12); color: var(--sakura); }
.go { background: var(--moon); color: var(--ink); }
.btn-w { background: var(--sakura); color: #2a0614; }
.cl-btn { background: linear-gradient(180deg, #ffb3cf, var(--sakura3)); color: #2a0614; font-family: var(--display); letter-spacing: .02em; box-shadow: 0 12px 34px -12px var(--sakura3); }
.cl-btn:disabled { background: rgba(233, 236, 245, .1); color: var(--faint); box-shadow: none; }
.prog i { background: linear-gradient(90deg, var(--sakura3), var(--sakura), var(--gold)); }
.task.done .t-ic { background: rgba(143, 240, 192, .14); color: #8ff0c0; }
.claimed .tick { background: var(--sakura); color: #2a0614; }
.iris, .amt { color: var(--sakura) !important; }
.recv .amt small { color: var(--dim); font-weight: 400; }
.fine { text-align: center; color: var(--faint); font-size: 12px; margin: 4px 0 0; }

/* the gift card: odds strip */
.gift { box-shadow: inset 0 0 0 1px rgba(255, 158, 193, .35), 0 20px 60px -30px rgba(255, 92, 149, .6); }
.t-ic.env { font-size: 22px; background: rgba(232, 56, 79, .18); }
.odds { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 12px; color: var(--dim); }
.odds i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 158, 193, .25), rgba(255, 216, 154, .6)); }
.odds .jp { color: var(--gold); font-weight: 700; }

/* leaderboard */
.lb .lb-d { color: var(--dim); font-size: 13px; margin: -4px 0 12px; }
.lbl-list li { grid-template-columns: 30px 36px 1fr auto auto; }
.lbl-list .rk { font-size: 15px; text-align: center; font-weight: 700; color: var(--dim); }
.lbl-list li.top { background: rgba(255, 216, 154, .06); border-radius: 12px; }
.lbl-list .rw span { color: var(--dim); font-size: 12px; }

/* reveal: the お年玉 envelope opens, the amount rolls up */
.reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.rv-bg { position: absolute; inset: 0; background: rgba(5, 6, 12, .92); animation: rvFade .3s both; }
.rv-in { position: relative; width: min(360px, 100%); text-align: center; }
.rv-env { position: relative; width: 150px; height: 190px; margin: 0 auto -40px; border-radius: 14px; background: linear-gradient(180deg, #e8384f, #a3121f);
  box-shadow: inset 0 0 0 2px rgba(255, 216, 154, .55), 0 30px 60px rgba(0, 0, 0, .6); animation: envIn .6s cubic-bezier(.34, 1.56, .64, 1) both, envShake .5s .6s ease both; z-index: 1; }
.rv-flap { position: absolute; left: 0; right: 0; top: 0; height: 70px; border-radius: 14px 14px 50% 50%; background: #c41f35; transform-origin: 50% 0;
  box-shadow: inset 0 -2px 0 rgba(255, 216, 154, .5); animation: flap .5s 1.05s ease-in forwards; }
.rv-seal { position: absolute; left: 50%; top: 52px; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #a3121f; font: 800 24px/1 'Mincho', serif; animation: sealOut .4s 1s ease forwards; }
.rv-card { position: relative; z-index: 2; padding: 56px 22px 22px; border-radius: 22px; background: linear-gradient(180deg, #fbf6ec, #efe5d2); color: #2a1a14;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8); transform-origin: 50% 100%; animation: cardUp .7s 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.rv-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #a3121f; font-weight: 700; margin: 0 0 8px; }
.rv-jp { font: 800 30px/1 'Mincho', serif; color: #c41f35; margin: 0 0 8px; animation: pulseJ 1s 2s ease-in-out 3; }
.rv-n { font-family: var(--display); font-size: clamp(34px, 10vw, 46px); line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; }
.rv-n small { font-family: var(--sans); font-size: 14px; color: #6b4b3c; }
.rv-u { font-size: 22px; font-weight: 700; color: #a3121f; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.rv-note { font-size: 11.5px; color: #6b4b3c; margin: 0 0 16px; }
.rv-in.big .rv-card { box-shadow: 0 0 0 3px var(--gold), 0 0 60px rgba(255, 216, 154, .55), 0 40px 80px -20px rgba(0, 0, 0, .8); }
@keyframes rvFade { from { opacity: 0; } }
@keyframes envIn { from { opacity: 0; transform: translateY(40px) scale(.6); } }
@keyframes envShake { 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
@keyframes flap { to { transform: scaleY(-1); } }
@keyframes sealOut { to { opacity: 0; transform: scale(1.6); } }
@keyframes cardUp { from { opacity: 0; transform: translateY(80px) scale(.9); } }
@keyframes pulseJ { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .reveal * { animation-duration: .01ms !important; animation-delay: 0s !important; } }

/* game sheet */
.sheet-in { background: linear-gradient(180deg, #151325, #0a0c18); box-shadow: inset 0 0 0 1px var(--line); }
.cr-stage { background: radial-gradient(circle at 70% 20%, rgba(233, 236, 245, .14), transparent 40%), linear-gradient(180deg, #141a3c, #0a0c18); }
.cr-mult b { font-family: var(--display); }

/* layout fixes (phone) */
.lng button { white-space: nowrap; }
.hd-brand { min-width: 0; }
@media (max-width: 480px) { .hd-name small { display: none; } .hd-in { gap: 8px; } }
.sky img { opacity: .78; }
.bal { position: relative; }
.moon-daruma { right: 0; top: 18px; bottom: auto; width: 92px; }
.tabs .moon-daruma { display: none; }
.bal .moon-daruma { display: block; position: absolute; }
@media (max-width: 420px) { .bal .moon-daruma { width: 74px; top: 22px; } }
.cl-btn, .btn-w, .go, .lng button { font-family: var(--sans); font-weight: 700; }
html[lang="en"] .cl-btn { font-family: var(--display); font-weight: 400; }
.tab { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }