/* ═══════════════════════════════════════════════════════════════
   遊戲一 · AR 魔法認知卡 —— 手機優先，滿屏舞台
   ═══════════════════════════════════════════════════════════════ */

html,body{height:100%; overflow:hidden}
body.g1{
  margin:0; color:#fdf7e6;
  background:#17150f;
  font-family:"Noto Sans TC","PingFang TC","Hiragino Sans TC","Microsoft JhengHei",sans-serif;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
.app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── 背景：相機畫面 / 示範模式紙質底 ─────────────────────────── */
.stage-bg{position:absolute; inset:0; overflow:hidden; background:#0f0d09; z-index:0}
#cam{width:100%; height:100%; object-fit:cover; display:none}
.stage-bg.cam-on #cam{display:block}
.paper-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 500px at 20% 8%, rgba(230,0,18,.22), transparent 60%),
    radial-gradient(700px 520px at 84% 92%, rgba(0,153,68,.22), transparent 62%),
    radial-gradient(600px 460px at 90% 6%, rgba(255,241,0,.16), transparent 60%),
    linear-gradient(170deg,#241f16 0%,#191610 52%,#100e0a 100%);
}
.stage-bg.cam-on .paper-bg{display:none}
.paper-bg::after{
  content:""; position:absolute; inset:0; opacity:.16;
  background:
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) 0 0/30px 30px,
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) 0 0/30px 30px;
}
.cam-dim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,13,9,.62) 0%, rgba(15,13,9,.18) 26%, rgba(15,13,9,.2) 62%, rgba(15,13,9,.78) 100%);
}

/* ── 頂欄 ─────────────────────────────────────────────────────── */
.bar{
  position:relative; z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
}
.bar .brand{
  display:flex; align-items:center; gap:9px;
  background:rgba(15,13,9,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(253,247,230,.18);
  border-radius:14px; padding:7px 12px 7px 9px; min-width:0;
}
.bar .brand img{height:26px; width:auto; flex:0 0 auto}
.bar .brand span{font-size:.68rem; font-weight:900; letter-spacing:.03em; line-height:1.2; white-space:nowrap}
.bar .spacer{flex:1}
.iconbtn{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(15,13,9,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(253,247,230,.18); color:#fdf7e6;
  font-size:1.15rem; font-weight:900; cursor:pointer; padding:0;
  transition:transform .15s, background .15s;
}
.iconbtn:active{transform:scale(.92)}
.iconbtn.on{background:var(--yellow,#fff100); color:#2a2205; border-color:transparent}
.iconbtn.wide{width:auto; padding:0 14px; font-size:.86rem; gap:6px}
.iconbtn[aria-pressed="false"] .ib-off{display:inline}
.iconbtn[aria-pressed="true"]  .ib-off{display:none}

/* ── 舞台 ─────────────────────────────────────────────────────── */
.stage{
  position:relative; z-index:5; flex:1;
  display:flex; align-items:center; justify-content:center;
  min-height:0;
  /* 底部留白 = 名牌高度，否則名牌會壓在底部圖卡盤的標籤上 */
  padding:4px 12px 58px;
  perspective:1100px;
}

/* 取景框（相機模式） */
.reticle{
  position:absolute; z-index:4;
  width:min(72vw, 300px); aspect-ratio:1/1;
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.reticle.show{opacity:1}
.reticle svg{width:100%; height:100%; overflow:visible}
.reticle .scanline{
  animation:scan 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scan{0%,100%{transform:translateY(-38%)} 50%{transform:translateY(38%)}}

/* 立體模型：分層 + 陀螺儀視差 = 手機上讀起來就是「浮出來的立體物件」 */
.model{
  position:relative; z-index:5;
  width:min(78vw, 340px); aspect-ratio:1/1;
  transform-style:preserve-3d;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.model.show{opacity:1; pointer-events:auto; cursor:pointer}
.model.pop{animation:pop .72s cubic-bezier(.22,1.4,.36,1) both}
@keyframes pop{
  0%  {transform:scale(.24) translateZ(-160px) rotateX(46deg); opacity:0}
  46% {transform:scale(1.12) translateZ(50px) rotateX(-8deg); opacity:1}
  70% {transform:scale(.95) translateZ(20px) rotateX(4deg)}
  100%{transform:scale(1) translateZ(0) rotateX(0); opacity:1}
}
.model .halo{
  position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,241,0,.34) 0%, rgba(255,241,0,.1) 42%, transparent 66%);
  filter:blur(10px); transform:translateZ(-60px);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:translateZ(-60px) scale(1); opacity:.85} 50%{transform:translateZ(-60px) scale(1.09); opacity:1}}
.model .ground{
  position:absolute; left:12%; right:12%; bottom:2%; height:9%;
  border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  filter:blur(6px); transform:translateZ(-70px);
}
.model .art{
  position:absolute; inset:0;
  transform:translateZ(30px);
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.45));
  transition:opacity .18s;
}
.model .art img{width:100%; height:100%; object-fit:contain}
.model .art.frame-b{opacity:0}
.model.acting .art.frame-a{opacity:0}
.model.acting .art.frame-b{opacity:1}
.model.bounce{animation:bounce .62s cubic-bezier(.3,1.5,.4,1) both}
@keyframes bounce{
  0%{transform:scale(1)} 34%{transform:scale(1.17) rotate(-3deg)}
  62%{transform:scale(.96) rotate(2deg)} 100%{transform:scale(1)}
}
/* 「點我」提示手指 */
.taphint{
  position:absolute; right:4%; bottom:8%; z-index:7;
  width:56px; height:56px; transform:translateZ(60px);
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.model.show .taphint{opacity:1}
.model.acting .taphint,.model.done .taphint{opacity:0}
.taphint svg{width:100%; height:100%; animation:tapping 1.5s ease-in-out infinite}
@keyframes tapping{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6px,-9px) scale(1.1)}}

/* 名牌 */
.nameplate{
  position:absolute; z-index:8; left:50%; bottom:6px;
  transform:translate(-50%, 22px) scale(.7); opacity:0;
  display:flex; align-items:center; gap:11px;
  background:rgba(253,247,230,.96); color:#17150f;
  border-radius:999px; padding:10px 20px;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1), opacity .3s;
  white-space:nowrap;
}
.nameplate.show{transform:translate(-50%, 0) scale(1); opacity:1}
.nameplate .np-name{font-size:1.6rem; font-weight:900; letter-spacing:.04em; line-height:1}
.nameplate .np-group{
  font-size:.72rem; font-weight:900; letter-spacing:.08em;
  background:#17150f; color:#fdf7e6; border-radius:999px; padding:4px 10px;
}
.nameplate .np-say{
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:#8e1f16; color:#fdf7e6; font-size:1rem; display:grid; place-items:center;
}
.nameplate .np-say:active{transform:scale(.9)}

/* 提示語（畫面中央的引導字） */
.hint{
  position:absolute; z-index:6; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(88vw, 420px); text-align:center;
  pointer-events:none; transition:opacity .3s;
}
.hint.hide{opacity:0}
.hint .h1{font-size:1.28rem; font-weight:900; margin:0 0 8px; text-shadow:0 3px 14px rgba(0,0,0,.6)}
.hint .h2{font-size:.95rem; font-weight:700; margin:0; color:rgba(253,247,230,.82); text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* 慶祝彩帶 */
.confetti{position:absolute; inset:0; z-index:9; pointer-events:none; overflow:hidden}
.confetti i{
  position:absolute; width:9px; height:14px; border-radius:2px;
  animation:fall linear forwards;
}
@keyframes fall{
  0%{transform:translateY(-20px) rotate(0) scale(1); opacity:1}
  100%{transform:translateY(78vh) rotate(720deg) scale(.7); opacity:0}
}

/* ── 底部圖卡盤 ───────────────────────────────────────────────── */
.tray-wrap{position:relative; z-index:6; padding:0 0 8px}
.tray-head{
  display:flex; align-items:center; gap:8px;
  padding:0 14px 8px; font-size:.78rem; font-weight:900;
  color:rgba(253,247,230,.78); letter-spacing:.04em;
}
.tray-head .stars{display:flex; gap:3px; margin-left:auto}
.tray-head .stars i{
  width:13px; height:13px; display:block; border-radius:3px;
  background:rgba(253,247,230,.2); transition:background .3s, transform .3s;
}
.tray-head .stars i.on{background:var(--yellow,#fff100); transform:rotate(45deg) scale(.92)}
.tray{
  display:flex; gap:9px; overflow-x:auto; padding:2px 12px 6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tray::-webkit-scrollbar{display:none}
.tcard{
  flex:0 0 auto; scroll-snap-align:center;
  width:76px; border-radius:16px; padding:6px 6px 7px;
  background:rgba(253,247,230,.1); backdrop-filter:blur(8px);
  border:1.5px solid rgba(253,247,230,.2);
  color:#fdf7e6; cursor:pointer; text-align:center;
  transition:transform .16s, background .18s, border-color .18s;
}
.tcard:active{transform:scale(.93)}
.tcard.active{background:var(--yellow,#fff100); color:#2a2205; border-color:transparent}
.tcard.seen::after{content:"✓"; position:absolute}
.tcard .tc-img{
  width:100%; aspect-ratio:1/1; border-radius:11px; overflow:hidden;
  background:rgba(255,255,255,.9); display:grid; place-items:center;
}
.tcard .tc-img img{width:100%; height:100%; object-fit:contain; padding:3px}
.tcard .tc-name{display:block; margin-top:4px; font-size:.74rem; font-weight:900; letter-spacing:.02em}
.tcard.locked{opacity:.42}

/* ── 面板（教師 / 說明 / 語言）─────────────────────────────────── */
.sheet{
  position:fixed; inset:auto 0 0 0; z-index:40;
  max-height:84dvh; overflow-y:auto;
  background:linear-gradient(180deg,#fdfaf2,#f2e9d6);
  color:#17150f; border-radius:26px 26px 0 0;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px rgba(0,0,0,.42);
  transform:translateY(102%); transition:transform .34s cubic-bezier(.3,1,.4,1);
}
.sheet.open{transform:translateY(0)}
.sheet-grip{width:46px; height:5px; border-radius:99px; background:rgba(23,21,15,.24); margin:0 auto 14px}
.sheet h2{margin:0 0 4px; font-size:1.18rem; font-weight:900}
.sheet .sub{margin:0 0 16px; font-size:.88rem; color:rgba(23,21,15,.66); font-weight:700}
.scrim{
  position:fixed; inset:0; z-index:39; background:rgba(15,13,9,.6);
  opacity:0; pointer-events:none; transition:opacity .3s;
  backdrop-filter:blur(3px);
}
.scrim.open{opacity:1; pointer-events:auto}
.row{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; border-radius:16px; margin-bottom:9px;
  background:rgba(23,21,15,.05); border:1.5px solid rgba(23,21,15,.09);
}
.row .rl{flex:1; min-width:0}
.row .rt{display:block; font-weight:900; font-size:.98rem}
.row .rd{display:block; font-size:.82rem; color:rgba(23,21,15,.62); font-weight:600}
.seg{display:flex; gap:4px; background:rgba(23,21,15,.09); border-radius:12px; padding:4px}
.seg button{
  border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-weight:900; font-size:.86rem;
  padding:8px 13px; border-radius:9px; color:rgba(23,21,15,.62);
}
.seg button.on{background:#17150f; color:#fdf7e6}
.bigbtn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  border:none; cursor:pointer; font-family:inherit;
  background:#8e1f16; color:#fdf7e6; font-weight:900; font-size:1rem;
  padding:15px; border-radius:16px; margin-top:6px;
}
.bigbtn.ghost{background:transparent; color:#17150f; box-shadow:inset 0 0 0 2px rgba(23,21,15,.2)}
.note{
  margin:14px 0 0; padding:13px 15px; border-radius:14px;
  background:rgba(230,0,18,.07); border:1.5px solid rgba(230,0,18,.2);
  font-size:.84rem; line-height:1.6; color:rgba(23,21,15,.8);
}
.note b{color:#8e1f16}
.sheet ol,.sheet ul{margin:0; padding-left:20px; font-size:.9rem; line-height:1.75; color:rgba(23,21,15,.8)}
.sheet ol li,.sheet ul li{margin-bottom:5px}
.sheet ol li b{color:#17150f}

/* 計時器藥丸 */
.timer{
  position:absolute; z-index:7; left:50%; top:8px; transform:translateX(-50%);
  display:none; align-items:center; gap:7px;
  background:rgba(15,13,9,.6); backdrop-filter:blur(10px);
  border:1px solid rgba(253,247,230,.2); border-radius:999px;
  padding:5px 13px; font-size:.76rem; font-weight:900; letter-spacing:.03em;
}
.timer.show{display:inline-flex}
.timer.warn{background:#8e1f16; border-color:transparent}
.timer .tdot{width:7px; height:7px; border-radius:50%; background:#5ff0a5}
.timer.warn .tdot{background:var(--yellow,#fff100)}

/* toast */
.toast{
  position:fixed; z-index:50; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%, 24px); opacity:0;
  background:rgba(15,13,9,.92); color:#fdf7e6; backdrop-filter:blur(10px);
  border:1px solid rgba(253,247,230,.2);
  border-radius:14px; padding:11px 18px; font-size:.88rem; font-weight:800;
  max-width:88vw; text-align:center; pointer-events:none;
  transition:transform .3s, opacity .3s;
}
.toast.show{transform:translate(-50%,0); opacity:1}

@media (min-width:720px){
  .model{width:min(46vw, 400px)}
  .tray{justify-content:center}
  .sheet{max-width:560px; margin-inline:auto; inset:auto 0 18px 0; border-radius:26px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .model.pop{animation:none}
}

/* ── 內嵌 SVG 圖示（取代 emoji：Android / 舊 WebView 上 emoji 會變豆腐方塊）── */
.ico{width:21px; height:21px; display:block; flex:0 0 auto}
.iconbtn .ico{width:22px; height:22px}
.iconbtn.wide{gap:7px}
.bigbtn .ico{width:20px; height:20px}
.np-say .ico{width:18px; height:18px}
#btnSound[aria-pressed="true"]  .ic-off{display:none}
#btnSound[aria-pressed="false"] .ic-on {display:none}
#btnSound .ic-on,#btnSound .ic-off{display:flex}