/* ============================================================
   BIBA 文物互動屏 — 9:16 kiosk stylesheet
   設計基準尺寸：1080 × 1920（所有內部數值都以此為 px 單位）
   實際顯示由 js/app.js 用 transform: scale() 等比縮放並置中
   ============================================================ */

:root{
  --ink:#05070c;
  --ink2:#0b1018;
  --gold:#c9a227;
  --gold-soft:#e8cf7a;
  --jade:#2fbf9b;
  --text:#f4efe6;
  --muted:#98a2b3;
  --line:rgba(201,162,39,.30);
  --panel:rgba(255,255,255,.045);
  --nav-h:168px;
  --ease:cubic-bezier(.22,.8,.22,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#000;}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  cursor:none;                 /* kiosk：隱藏游標；要除錯可在 CONFIG.kiosk.hideCursor 關掉 */
}
body.show-cursor{cursor:auto;}

/* ---------- 9:16 舞台 ----------
   注意：不要用 display:grid + place-items:center 來置中！
   當 .app 的版面高度（1920）大於視窗時，Grid 會把整列往「下」溢出而不是上下均分，
   導致 transform-origin 的基準點跑掉、畫面被推到下方（視窗越小切掉越多）。
   改成 position:absolute，由 js/app.js 明確算出置中位移。 */
#viewport{
  position:fixed;inset:0;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,#101725 0%,#05070c 60%,#000 100%);
}
/* 有 JS 時先隱藏，等 fit() 算好縮放再淡入，避免閃一下巨大的未縮放畫布；
   沒 JS 時（html 沒有 .js）就照原本顯示，至少內容還在。 */
html.js #viewport{opacity:0;transition:opacity .2s ease;}
html.js #viewport.ready{opacity:1;}

.app{
  position:absolute;left:0;top:0;
  width:1080px;height:1920px;
  transform-origin:0 0;          /* 位移由 JS 計算，原點固定左上角 */
  background:linear-gradient(180deg,#080c14 0%,#0b1018 55%,#06080d 100%);
  overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.9);
}

/* ---------- 頁面／轉場 ---------- */
.page{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:64px 64px calc(var(--nav-h) + 48px);
  opacity:0;visibility:hidden;
  transform:scale(.995);
  transition:opacity .55s var(--ease),visibility .55s,transform .55s var(--ease);
  pointer-events:none;
}
.page.active{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.page--bleed{padding:0;}

/* ---------- 共用媒體 ---------- */
.media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:#000;
}
.media-fallback{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;
  text-align:center;
  background:
    radial-gradient(70% 50% at 50% 42%,rgba(201,162,39,.14),transparent 70%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 22px,transparent 22px 44px),
    linear-gradient(180deg,#0d1420,#070a11);
}
.media-fallback[hidden]{display:none !important;}
.fallback-title{font-size:34px;letter-spacing:.14em;color:var(--gold-soft);}
.fallback-path{
  font-family:Consolas,Monaco,monospace;
  font-size:26px;color:var(--muted);
  padding:10px 26px;border:1px dashed var(--line);border-radius:10px;
  max-width:820px;word-break:break-all;
}
.fallback-note{font-size:26px;color:var(--muted);}
/* 主頁的佔位內容往上擺，避免壓到下方的標題區塊 */
#homeFallback{justify-content:flex-start;padding-top:280px;}
.scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,5,9,.68) 0%,rgba(3,5,9,.15) 35%,rgba(3,5,9,.85) 100%);
}
.scrim--bottom{background:linear-gradient(180deg,rgba(3,5,9,.55) 0%,rgba(3,5,9,0) 30%,rgba(3,5,9,.92) 82%);}

/* ---------- 主頁 ---------- */
.home-copy{
  position:absolute;left:0;right:0;bottom:330px;
  padding:0 90px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.seal{
  font-family:"Times New Roman",serif;
  font-size:30px;letter-spacing:.5em;text-indent:.5em;
  color:var(--gold);
  border:1px solid var(--line);border-radius:999px;
  padding:12px 34px 12px 40px;
}
.home-copy h1{
  margin:8px 0 0;font-size:88px;line-height:1.14;letter-spacing:.06em;
  font-weight:700;
  background:linear-gradient(180deg,#fff9ea,#d8b455 70%,#9d7a1c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 18px 60px rgba(201,162,39,.18);
}
.home-copy p{margin:0;font-size:34px;color:#d6dbe4;letter-spacing:.16em;}
.cta{
  margin-top:26px;
  display:inline-flex;align-items:center;gap:18px;
  font-size:32px;color:var(--gold-soft);letter-spacing:.1em;
  padding:20px 46px;border:1px solid var(--line);border-radius:999px;
  background:rgba(201,162,39,.07);
}
.pulse{width:16px;height:16px;border-radius:50%;background:var(--jade);animation:pulse 1.8s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(47,191,155,.6);}
  70%{box-shadow:0 0 0 26px rgba(47,191,155,0);}
  100%{box-shadow:0 0 0 0 rgba(47,191,155,0);}
}
.rings{position:relative;width:280px;height:280px;}
.rings span{
  position:absolute;inset:0;border:2px solid var(--line);border-radius:50%;
  animation:ring 3.4s var(--ease) infinite;
}
.rings span:nth-child(2){animation-delay:.5s;}
.rings span:nth-child(3){animation-delay:1s;}
@keyframes ring{
  0%{transform:scale(.35);opacity:.9;}
  100%{transform:scale(1);opacity:0;}
}

/* ---------- 頁首／頁尾 ---------- */
/* 進度靠左跟標題並排：把右上角讓給全螢幕鈕 */
.page-head{padding:6px 0 26px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:28px;}
.page-title{margin:0;font-size:52px;letter-spacing:.14em;font-weight:700;color:var(--gold-soft);}
.page-sub{margin:0;font-size:30px;color:var(--muted);letter-spacing:.08em;font-variant-numeric:tabular-nums;}
.page-sub.done{color:var(--jade);}
.page-foot{padding-top:26px;display:flex;align-items:center;gap:22px;}
.btn{
  font:inherit;font-size:30px;color:#0a0d13;letter-spacing:.08em;
  background:linear-gradient(180deg,#e7cd7f,#c9a227);
  border:0;border-radius:14px;padding:22px 40px;
  box-shadow:0 10px 26px rgba(201,162,39,.22);
  transition:transform .16s var(--ease),filter .16s var(--ease);
  touch-action:manipulation;
}
.btn--ghost{
  background:transparent;color:var(--gold-soft);
  border:1px solid var(--line);box-shadow:none;
}
.btn:active{transform:scale(.96);filter:brightness(1.06);}
.hint{font-size:24px;color:var(--muted);margin-left:auto;letter-spacing:.05em;white-space:nowrap;}

/* ---------- 拼圖 ---------- */
.playfield{
  position:relative;flex:1;
  display:flex;align-items:center;justify-content:center;
  margin:26px 0;
  touch-action:none;
}
.board{
  position:relative;
  border:2px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 80px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.5);
  transition:box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.board.solved{
  border-color:rgba(47,191,155,.7);
  box-shadow:0 0 0 3px rgba(47,191,155,.28),0 0 80px rgba(47,191,155,.28),0 24px 70px rgba(0,0,0,.5);
}
/* 亮出完整圖時要蓋過所有碎片 */
.board.peeking,.board.solved{z-index:40;}
.board-ghost,.board-peek{
  position:absolute;inset:0;border-radius:12px;
  background-size:100% 100%;background-repeat:no-repeat;
}
.board-ghost{opacity:.16;filter:grayscale(.35);}
.board-peek{opacity:0;transition:opacity .55s var(--ease);}
.board.peeking .board-peek{opacity:1;}
.board-grid{
  position:absolute;inset:0;border-radius:12px;opacity:.5;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:calc(100% / var(--n,3)) calc(100% / var(--n,3));
}

.tile{
  position:absolute;top:0;left:0;
  border-radius:6px;
  background-repeat:no-repeat;
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.10);
  opacity:.94;
  z-index:5;
  touch-action:none;
  cursor:grab;
  will-change:left,top,transform;
  transition:left .2s var(--ease),top .2s var(--ease),transform .3s var(--ease),opacity .3s var(--ease),box-shadow .3s var(--ease);
}
.tile.dragging{
  transition:transform .3s var(--ease);
  opacity:1;z-index:60;
  box-shadow:0 26px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.2);
  cursor:grabbing;
}
/* 雙指旋轉中：拿掉 transform 的過場，旋轉才會 1:1 跟著手指 */
.tile.twisting{
  transition:left .2s var(--ease),top .2s var(--ease);
  opacity:1;z-index:60;
  border-radius:8px;
  box-shadow:0 0 0 4px rgba(47,191,155,.65),0 26px 60px rgba(0,0,0,.7);
  cursor:grabbing;
}
.tile.locked{
  z-index:2;opacity:1;cursor:default;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  animation:lockin .45s var(--ease);
}
@keyframes lockin{
  0%{transform:scale(1.06);filter:brightness(1.5);}
  100%{transform:scale(1);filter:none;}
}
.tile.wrong{animation:shake .42s var(--ease);}
@keyframes shake{
  0%,100%{margin-left:0;}
  20%{margin-left:-12px;}
  50%{margin-left:12px;}
  80%{margin-left:-6px;}
}

/* ---------- AR ---------- */
.ar-grid-deco{
  position:absolute;inset:12% 18%;
  border:2px dashed rgba(47,191,155,.35);border-radius:24px;
  background:repeating-linear-gradient(0deg,rgba(47,191,155,.06) 0 2px,transparent 2px 46px);
}
.ar-head{position:absolute;left:0;right:0;top:96px;padding:0 80px;text-align:left;}
.ar-head h1{margin:0;font-size:64px;letter-spacing:.1em;color:#fff;}
.ar-head p{margin:16px 0 0;font-size:30px;color:#cbd3de;letter-spacing:.06em;}
.cards{
  position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + 56px);
  padding:0 58px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.card{
  position:relative;
  min-height:300px;
  padding:28px 22px;
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,rgba(16,22,33,.92),rgba(9,12,19,.92));
  backdrop-filter:blur(8px);
  text-align:left;
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;left:0;top:0;height:6px;width:100%;
  background:linear-gradient(90deg,var(--jade),transparent);
  opacity:0;transition:opacity .28s var(--ease);
}
.card.active{border-color:rgba(47,191,155,.75);transform:translateY(-14px);}
.card.active::before{opacity:1;}
.card-no{font-size:26px;letter-spacing:.2em;color:var(--jade);}
.card-title{margin:14px 0 12px;font-size:34px;color:#fff;line-height:1.25;}
.card-text{margin:0;font-size:24px;line-height:1.5;color:#aab4c2;}

/* ---------- NAV ---------- */
.nav{
  position:absolute;left:0;right:0;bottom:0;height:var(--nav-h);
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,rgba(5,7,12,0) 0%,rgba(5,7,12,.86) 42%,rgba(5,7,12,.98) 100%);
  border-top:1px solid var(--line);
  z-index:80;
}
.nav-btn{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:none;border:0;font:inherit;
  font-size:30px;letter-spacing:.12em;color:var(--muted);
  padding-top:10px;
  transition:color .3s var(--ease);
  touch-action:manipulation;
}
.nav-btn svg{width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:2.1;}
.nav-btn.active{color:var(--gold-soft);}
.nav-btn.active::after{
  content:'';position:absolute;top:0;width:110px;height:6px;border-radius:0 0 6px 6px;
  background:var(--gold);box-shadow:0 0 30px rgba(201,162,39,.9);
}
.nav-btn:active{color:#fff;}

/* ---------- 影片浮層 ---------- */
.veil{
  position:absolute;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  opacity:0;visibility:hidden;
  transition:opacity .85s var(--ease),visibility .85s;
}
.veil.show{opacity:1;visibility:visible;}
.veil video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;
}
.veil-fallback{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;
}
.veil-fallback[hidden]{display:none !important;}
/* 略過鈕放左上：右上角留給全螢幕鈕（全螢幕鈕在浮層之上） */
.veil-skip{
  position:absolute;left:56px;top:56px;z-index:3;
  font:inherit;font-size:28px;letter-spacing:.1em;color:#e9e2d3;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:16px 34px;
}
.veil-skip[hidden]{display:none !important;}

/* ---------- 全螢幕鈕 ---------- */
/* 放在 .page 之外、z-index 高於浮層：三頁都在、播影片時也在 */
.fs-btn{
  position:absolute;right:24px;top:16px;z-index:200;
  width:96px;height:96px;
  display:grid;place-items:center;
  background:rgba(8,11,17,.55);
  border:1px solid var(--line);border-radius:24px;
  color:var(--gold-soft);
  backdrop-filter:blur(6px);
  transition:background .25s var(--ease),transform .16s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  touch-action:manipulation;
}
.fs-btn svg{width:46px;height:46px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.fs-btn .fs-icon-exit{display:none;}
.fs-btn.on{background:rgba(201,162,39,.20);border-color:rgba(201,162,39,.65);color:#fff6df;}
.fs-btn.on .fs-icon-enter{display:none;}
.fs-btn.on .fs-icon-exit{display:block;}
.fs-btn:active{transform:scale(.93);}

/* ---------- Toast ---------- */
/* 固定在上方資訊帶：不會壓到拼圖底部按鈕，也不會壓到 AR 指引卡 */
.toast{
  position:absolute;left:50%;top:236px;
  transform:translate(-50%,-26px);
  z-index:140;
  padding:20px 40px;border-radius:999px;
  background:rgba(8,11,17,.94);border:1px solid var(--line);
  font-size:28px;color:var(--gold-soft);letter-spacing:.06em;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0);}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;}
}