/* =========================================================
   平台共用：主題外觀、頭像、得到貼紙的畫面、貼紙簿（shared/themes.css）
   配色與動畫取自原本的生字賓果（2026-10-21 已移除）。
   各工具只要在外框加上 data-skin="ocean"（或 space、dino、dessert），裡面就能用下面的顏色變數：
     --stage、--stage2  背景的漸層兩色　　--stageink  背景上的文字顏色
     --cardbg、--cardink、--cardline  卡片（選項）的底色、文字色、框線色　　--acc  強調色
   ========================================================= */

/* ---------- 主題配色 ---------- */
[data-skin]{--cardbg:#fff;--cardline:#ccc;--cardink:#222;--stage:#eee;--stage2:#ddd;--stageink:#222;--acc:#333;--soft:#ddd;--mark:#cfe8d6}
[data-skin=ocean]{--stage:#0d4a66;--stage2:#082f45;--stageink:#eaf8ff;--cardbg:#e9f8fd;--cardline:#7fd0e8;--cardink:#0b3954;--acc:#ffb020;--soft:#13617f;--mark:#8fe0c9}
[data-skin=space]{--stage:#211651;--stage2:#110b30;--stageink:#f1ecff;--cardbg:#f4f0ff;--cardline:#b6a6f5;--cardink:#2a1b5e;--acc:#ff9f2e;--soft:#33236e;--mark:#ffe08a}
[data-skin=dino]{--stage:#cfe3b4;--stage2:#a9cd8a;--stageink:#253815;--cardbg:#fff9e8;--cardline:#c9b27a;--cardink:#3a2f12;--acc:#e3672f;--soft:#bcd99c;--mark:#9fdc7a}
[data-skin=dessert]{--stage:#ffe1ea;--stage2:#ffc7d8;--stageink:#5e2a35;--cardbg:#fffaf3;--cardline:#f3a3bd;--cardink:#5e2a35;--acc:#d9447a;--soft:#ffd2df;--mark:#ffd1e0}
.skin-bg{background:radial-gradient(circle at 20% 10%,var(--stage),var(--stage2));color:var(--stageink)}

/* ---------- 選主題的大按鈕 ---------- */
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:18px}
.theme{border:4px solid transparent;border-radius:24px;padding:18px 14px 16px;display:grid;justify-items:center;gap:8px;font-size:28px;
  background:linear-gradient(160deg,var(--stage,#fff),var(--stage2,#eee));color:var(--stageink,#222)}
.theme svg{width:110px;height:110px}
.theme small{font-size:17px;opacity:.85;text-align:center}
.theme.none{background:#fff;color:#1f3d36;border-color:#c8d8cf}

/* ---------- 頭像（卡通動物或照片） ---------- */
.av{--s:2.4em;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;flex:none;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);background:#cfd8d3;vertical-align:middle}
.av img,.av svg{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 得到貼紙的畫面 ---------- */
.reveal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(20,30,10,.6);padding:16px;overflow:hidden}
.reveal .rays2{position:absolute;width:150vmax;height:150vmax;left:50%;top:50%;margin:-75vmax 0 0 -75vmax;
  background:repeating-conic-gradient(var(--rc) 0 9deg,transparent 9deg 18deg);opacity:.35;
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 45%);mask:radial-gradient(circle,#000 8%,transparent 45%)}
.reveal .box{position:relative;background:#fffaf0;border-radius:28px;border:6px solid var(--rc);padding:22px 34px 26px;display:grid;justify-items:center;
  gap:6px;text-align:center;color:#3a2f12;max-width:92vw;box-sizing:border-box}
.reveal .box > svg{width:min(62vw,46vh);height:auto}
/* 得到貼紙的大畫面接近滿版（2026-10-24 維護者要求） */
.reveal .box{width:min(94vw,860px);min-height:min(88vh,920px);align-content:center}
.reveal .box .go{font-size:24px;padding:14px 36px}
/* 平板一屏放得下（2026-10-31 維護者要求）：圖、星星、名字依螢幕高度縮放，按鈕不用往下滑；
   還是放不下時（例如手機橫放）框裡面可以捲動，不會把按鈕切掉 */
.reveal .box{min-height:0;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding-block:14px 18px}
.reveal .box > svg{width:min(62vw,36vh);max-height:36vh}
.reveal .stars{font-size:clamp(28px,min(6vw,6.5vh),60px)}
.reveal .rname{font-size:clamp(30px,min(6vw,8vh),68px);line-height:1.15}
.reveal .box .go{padding:12px 36px}
.reveal .who2{display:flex;align-items:center;gap:10px;font-size:24px}
.reveal .who2 .av{--s:56px}
.reveal .stars{font-size:clamp(40px,6vw,60px);color:#f5b400;letter-spacing:.12em;line-height:1}
.reveal .rname{font-size:clamp(36px,6vw,68px);font-weight:700}
.reveal .rare{font-size:20px;padding:4px 18px;border-radius:999px;background:var(--rc);color:#3a2f12;font-weight:700}
/* 矮螢幕（手機橫放、矮筆電）：圖再縮小、拿掉頭像那一行和重複的句子，按鈕還是看得到 */
@media (max-height:620px){.reveal .box{gap:2px}.reveal .box > svg{width:min(62vw,30vh);max-height:30vh}.reveal .box > div:nth-last-of-type(1){display:none}.reveal .box .go{font-size:20px;padding:8px 28px}}
@media (max-height:480px){.reveal .who2{display:none}.reveal .box > svg{max-height:26vh;width:min(62vw,26vh)}.reveal .rare{font-size:16px;padding:2px 14px}}
@media (prefers-reduced-motion:no-preference){
  .reveal .rays2{animation:spin 14s linear infinite}
  .reveal .box{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}

/* ---------- 扭蛋機（識字評量 gacha.js，2026-10-24）：拉拉桿 → 搖一搖 → 轉蛋掉出來 → 依星等不同的特效打開 ----------
   動畫只在電腦沒設「減少動態效果」時播；沒有快速閃爍（光敏性癲癇），變暗、發光都是慢慢淡入 */
/* 極稀有、傳說的鋪陳：整個畫面慢慢變暗，扭蛋機和轉蛋留在亮處 */
.gbox::before{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .8s;pointer-events:none}
.suspense .gbox::before{opacity:.5}
.reveal.gacha{padding:0}
/* 滿版（2026-10-24 維護者要求） */
.gbox{position:relative;background:#fffaf0;width:100vw;height:100vh;height:100dvh;overflow:hidden;display:grid;justify-items:center;align-content:center;gap:10px;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));text-align:center;color:#3a2f12;box-sizing:border-box}
.gsay{margin:0;font-size:clamp(20px,3vw,26px);font-weight:700}
.gstage{position:relative;z-index:1;height:min(60vh,140vw);aspect-ratio:200/330;max-width:86vw}
.gmac{width:100%;height:auto;display:block;overflow:visible}
/* 拉桿：機器側邊的底座＋一根桿子＋頂端圓球；拉的時候圓球往下滑、桿子跟著變長變短（位置由 gacha.js 的 setP 算） */
.glever{position:absolute;left:74%;top:16%;width:30%;height:58%;background:none;border:0;padding:0;cursor:grab;touch-action:none}
.glever .gbase{position:absolute;left:0;top:46%;width:62%;height:18%;background:var(--gbase,#c8322a);border:3px solid #2d2a26;border-radius:0 14px 14px 0;box-sizing:border-box}
.glever .grod{position:absolute;left:50%;width:14%;transform:translateX(-50%);background:#dfe3e8;border:3px solid #2d2a26;border-radius:8px;box-sizing:border-box}
.glever .gknob{position:absolute;left:50%;width:46%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#ffd23f;border:3px solid #2d2a26;box-sizing:border-box;box-shadow:inset -4px -4px 0 rgba(0,0,0,.12)}
.glever:focus-visible{outline:none}
.glever:focus-visible .gknob{outline:4px solid #2a78d6;outline-offset:3px}
.gdrop{position:absolute;left:50%;top:56%;width:30%;transform:translate(-50%,0) scale(.3);opacity:0}
.gcap{width:100%;height:auto;display:block;overflow:visible}
.gcap .gtop{transition:transform .45s,opacity .45s;transform-origin:50% 50%}
.gfx{position:absolute;left:50%;top:83%;width:0;height:0}
.gfx i{position:absolute;left:-5px;top:-7px;width:10px;height:14px;border-radius:3px;opacity:0}
.grain{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.grain i{position:absolute;top:-24px;width:8px;height:12px;border-radius:2px;opacity:0}
.gcrank,.gballs,.gbub{transform-box:fill-box;transform-origin:50% 50%}
.gflame{transform-box:fill-box;transform-origin:50% 0}   /* 太空主題：火箭底下的火焰 */
.reveal.gacha .row{gap:10px}
@media (prefers-reduced-motion:no-preference){
  .glever:not(.held) .gknob{animation:gnudge 1.6s ease-in-out infinite}
  .pulled .gmac{animation:gshake .6s ease-in-out 2}
  .dropped .gdrop{animation:gdrop .55s cubic-bezier(.3,1.4,.5,1) forwards}
  .turning .gcrank{animation:gcrank 1s ease-in-out}
  .turning .gballs{animation:gjiggle .25s ease-in-out 4}
  .gbub{animation:gbub 3.2s ease-in infinite}   /* 海洋主題：泡泡慢慢往上飄 */
  .gflame{animation:gflame 1.2s ease-in-out infinite}
  .turning .gflame{animation:gflamebig .25s ease-in-out 4}
  .shaking .gdrop .gcap{animation:gwobble .667s ease-in-out 3}
  .pre.s2 .gdrop,.pre.s3 .gdrop,.pre.s4 .gdrop{filter:drop-shadow(0 0 22px var(--gc));transition:filter .6s}
  .pre.s4 .gdrop .gcap{animation:gglow 1.8s ease-in forwards}
  .opened .grain i{animation:gfall 2.6s linear infinite}
  .opened .gcap .gtop{transform:translate(18%,-45%) rotate(35deg);opacity:0}
  .opened .gdrop{filter:drop-shadow(0 0 14px var(--gc))}
  .opened.t3 .gdrop::before,.opened.t4 .gdrop::before{content:"";position:absolute;left:50%;top:50%;width:420%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
    background:repeating-conic-gradient(var(--gc) 0 10deg,transparent 10deg 20deg);opacity:.5;
    -webkit-mask:radial-gradient(circle,#000 10%,transparent 60%);mask:radial-gradient(circle,#000 10%,transparent 60%);animation:spin 8s linear infinite}
  .opened.t4 .gfx::before{content:"";position:absolute;left:-40px;bottom:0;width:80px;height:340px;background:linear-gradient(to top,rgba(255,210,63,.85),rgba(255,243,160,0));
    border-radius:40px;animation:gpillar .7s ease-out forwards;transform-origin:bottom}
  .opened .gfx i{animation:gburst 1s ease-out forwards}
}
@keyframes gnudge{0%,70%,100%{transform:translateX(-50%)}80%{transform:translateX(-50%) translateY(14%)}}
@keyframes gshake{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes gdrop{0%{opacity:1;transform:translate(-50%,0) scale(.3)}100%{opacity:1;transform:translate(-50%,100%) scale(1.1)}}
@keyframes gwobble{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes gcrank{to{transform:rotate(360deg)}}
@keyframes gjiggle{25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)}}
@keyframes gglow{to{transform:scale(1.15)}}
@keyframes gfall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:.9}100%{opacity:.9;transform:translateY(110vh) rotate(540deg)}}
@keyframes gburst{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(200deg)}}
@keyframes gbub{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
@keyframes gflame{50%{transform:scaleY(1.15)}}
@keyframes gflamebig{50%{transform:scaleY(1.6)}}
@keyframes gpillar{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}

/* ---------- 結果卡片上的小貼紙 ---------- */
.sticker{display:flex;align-items:center;gap:12px;background:#fff5d6;border-radius:14px;padding:8px 14px;font-size:18px}
.sticker svg{width:64px;height:64px;flex:none}
.rstar{color:#e0a800;letter-spacing:.08em}

/* ---------- 貼紙簿 ---------- */
.stkrow{display:flex;flex-wrap:wrap;gap:12px}
.stk{width:116px;text-align:center;font-size:15px;display:grid;justify-items:center;gap:2px}
.stk svg{width:96px;height:96px}
.stk.no{color:#8aa39a}
/* 貼紙簿：還沒收集的一、二星灰色、三四星全黑剪影；傳說加金框（2026-10-24） */
.stk.gray svg{filter:grayscale(1);opacity:.45}
.stk.shadow svg{filter:brightness(0);opacity:.85}
.stk.lgd{box-sizing:border-box;border:3px solid #e0a800;border-radius:14px;padding:4px 2px;background:linear-gradient(#fff8d6,#fff);box-shadow:0 0 0 3px #fff3b0}
.stk .legendtag{font-weight:700;color:#b07800;letter-spacing:.2em}
.stk .evo{font-size:12px;color:#7a5cc0}
/* 貼紙簿的抽中機率：彩色長條（照比例分段）＋文字 */
.odds{margin:14px 0 0}
.card.odds{background:var(--card,#fff);border:2px solid #2d2a26;border-radius:16px;padding:12px 18px}
.oddsbar{display:flex;height:14px;border-radius:7px;overflow:hidden;border:2px solid #2d2a26;max-width:520px}
.oddsbar span{display:block}
.oddstxt{margin:6px 0 0;font-size:15px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.oddstxt i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px;border:1px solid #2d2a26}
.oddstxt span{white-space:nowrap}
.oddstxt .evo{color:#7a5cc0}