/* ============================================================
   NowPlayGames — 牌桌式官網 v0.5
   素材替換點都標了 [ASSET]，之後換圖只動那幾行
   ============================================================ */

/* 溶解特效用的自訂屬性（卡牌落桌後從中心燒開） */
@property --burn {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  --felt-1: #43484d;        /* 桌面亮部 */
  --felt-2: #2b2e31;        /* 桌面暗部 */
  --edge:   #1a1c1e;        /* 桌框 */
  --green:  #3ddc6e;        /* NPG 卡牌綠 */
  --green-d:#1fa64c;
  --ink:    #15171a;
  --text:   #e8e8e6;
  --text-dim:#9aa0a6;
  --card-w: 210px;          /* 手牌寬，高度由 5:7 比例推出 */
  --card-h: calc(var(--card-w) * 1.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Noto Sans TC", system-ui, sans-serif;
  color: var(--text);
  background: var(--edge);
  overflow: hidden;
}

/* ---------- 牌桌 ---------- */
.table {
  position: relative;
  height: 100dvh;
  /* [ASSET] 桌面背景圖換這裡：background: url(../assets/table.jpg) center/cover; */
  background:
    radial-gradient(ellipse 120% 90% at 50% 30%, var(--felt-1), var(--felt-2) 75%);
  box-shadow: inset 0 0 0 10px var(--edge), inset 0 0 120px rgba(0,0,0,.55);
  overflow: hidden;
}

/* ---------- 全螢幕背景影片（出牌時淡入，最底層；無素材時隱形 → 露出上方 gradient） ---------- */
.bgvideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* 橫/直影片都裁切填滿；手機換直立版時自然貼合 */
  z-index: 0;                   /* 在 brand(5)/stage(6)/手牌 之下，gradient 之上 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.table.is-playing .bgvideo { opacity: 1; }

/* ---------- 品牌列 ---------- */
.brand {
  position: absolute;
  top: 22px; left: 26px;
  display: flex; align-items: center; gap: 12px;
  z-index: 5;
}
.brand__logo {
  /* [ASSET] Logo 換這裡：背景改 url(../assets/logo.png) center/contain no-repeat */
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--green);
  color: var(--ink);
  font-weight: 900; font-size: 15px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.brand__text h1 { font-size: 20px; font-weight: 900; letter-spacing: .5px; }
.brand__text p  { font-size: 12px; color: var(--text-dim); }

/* ---------- 中央提示 ---------- */
.hint {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  pointer-events: none;
  transition: opacity .35s;
}
.hint.is-hidden { opacity: 0; }
.hint h2 { font-size: clamp(22px, 4vw, 34px); font-weight: 900; }
.hint p  { margin-top: 8px; color: var(--text-dim); font-size: clamp(12px, 2vw, 15px); }
.hint__glow {
  position: absolute; left: 50%; top: 50%;
  width: 420px; height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(61,220,110,.10), transparent 65%);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: .7; }
  50%      { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}

/* ---------- 舞台：專案棋盤 ----------
   N1：往上頂滿；N2：卡片加大、允許底列被手牌稍微壓住（添質感） */
.stage {
  position: absolute;
  /* RWD 硬化：1600 高時 ≈ 原值(84/16)，矮螢幕自動往下縮，clamp 鎖上限不超過設計稿 */
  left: 0; right: 0; top: clamp(56px, 5.25dvh, 84px);    /* 專案顯示範圍往下移 */
  bottom: clamp(8px, 1dvh, 16px);                         /* 不再為手牌讓位，手牌疊在上層 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
.stage[hidden] { display: none; }

.board {
  position: relative;
  width: min(1480px, calc(100% - 20px));   /* 左右各延伸 100px（1280 → 1480） */
  height: 100%;
}
.board[hidden] { display: none; }
/* 桌機：橫向滑動（滾輪 / 拖曳 / 箭頭），2 列多欄
   捲動由 JS ElasticScroller 接管（Unity ScrollView 阻尼 + 回彈） */
.board__scroll {
  height: 100%;
  display: flex;
  align-items: flex-start;         /* 棋盤往上頂，吃掉上方空白（N1） */
  overflow: hidden;
  touch-action: none;              /* 觸控也交給彈性捲動物理 */
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
}
.board__scroll.is-dragging { cursor: grabbing; }
.board__scroll.is-centered { justify-content: center; }
.board__grid {
  --col-w: clamp(252px, 24vw, 330px);
  display: grid;
  grid-auto-flow: column;          /* 直向先填滿 2 列，再往右長 → 橫向翻閱 */
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: var(--col-w);
  gap: 20px;
  padding: 12px 54px;
  will-change: transform;
}
.snav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 76px;
  z-index: 2;
  border: none;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.snav:hover { background: rgba(61,220,110,.4); }
.snav--l { left: 0; }
.snav--r { right: 0; }
.snav[disabled] { opacity: .2; cursor: default; }

/* ---------- 影片牆（影片型卡牌：丟出後整個中段播影片） ---------- */
.vwall {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-start;       /* 頂部對齊：影片下緣超寬後塞進手牌後方 */
  justify-content: center;
}
.vwall[hidden] { display: none; }
.vwall__frame {
  position: relative;
  height: 100%;                    /* 影片高度 = 整個專案範圍高度（寬度由 JS 設） */
  background: #000;
  border: 4px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    inset 0 10px 26px rgba(0,0,0,.7),
    0 24px 70px rgba(0,0,0,.55),
    0 0 90px rgba(61,220,110,.18);
  animation: vwallOn .45s ease-out;
}
@keyframes vwallOn {
  0%   { transform: scale(.82); opacity: 0; filter: brightness(4); }
  35%  { opacity: 1; filter: brightness(2.6); }
  50%  { filter: brightness(.55); }
  68%  { filter: brightness(1.9); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
.vwall__frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 影片載不到 / 沒素材 → 顯示 16:9 範圍框 */
.vph {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 60%, rgba(61,220,110,.12), transparent 60%),
    #07090a;
}
.vph::before {
  content: "";
  position: absolute; inset: 14px;
  border: 2px dashed rgba(61,220,110,.45);
  border-radius: 12px;
}
.vph__icon  { font-size: 58px; animation: vphPulse 3s ease-in-out infinite; }
.vph__label { font-size: 18px; font-weight: 900; letter-spacing: 2px; }
.vph__sub   { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
@keyframes vphPulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* 專案小卡（介面按鈕：點了開大型 DIALOG） */
.item {
  background: #26292d;
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  padding: 0;
  box-shadow: 0 14px 28px rgba(0,0,0,.5), 0 3px 0 rgba(0,0,0,.3);
  /* tilt 由 JS 塞 inline transform: rotate(--tilt)，這裡只管 hover 的位移 */
  transition: translate .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.item:hover, .item:focus-visible {
  translate: 0 -8px;
  box-shadow: 0 22px 38px rgba(0,0,0,.55), 0 0 0 2px var(--green);
}
.item__thumb {
  /* [ASSET] 專案縮圖：JS 會塞 background-image。
     桌機在 16:9 基礎上每張 +75px 高（2 列共 +150px，整區往上長） */
  aspect-ratio: auto;
  /* 16:9 基礎再加高：加高量 RWD 硬化，1600 高 ≈ +60px，矮螢幕縮到 +28px 免爆版 */
  height: calc(var(--col-w) * 9 / 16 + clamp(28px, 3.75dvh, 60px));
  display: grid; place-items: center;
  font-size: 44px;
  background-size: cover; background-position: center;
  border-bottom: 3px solid var(--ink);
}
.item__info { padding: 13px 15px 15px; }
.item__info h3 { font-size: 15.5px; font-weight: 700; }
.item__info p {
  margin-top: 4px;
  font-size: 12.5px; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 底部手牌 ---------- */
.hand {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  height: calc(var(--card-h) * 0.74);
  z-index: 10;
  /* 整組手牌緩慢繞圈飄動，模擬拿在手上的呼吸感 */
  animation: handBreathe 6.5s ease-in-out infinite;
  transition: bottom .42s cubic-bezier(.4, 0, .2, 1);
}
/* 有牌丟出後整個牌組下沉（讓出專案範圍空間）；用 bottom 不跟 handBreathe 的 transform 打架
   下沉量綁定 card-h：桌機(294px)≈-95px、手機(188px)≈-61px，隨卡牌尺寸自動等比 */
.hand.is-down { bottom: calc(var(--card-h) * -0.323); }
@keyframes handBreathe {
  0%   { transform: translate(-50%, 0); }
  25%  { transform: translate(calc(-50% + 7px), -8px); }
  50%  { transform: translate(-50%, -12px); }
  75%  { transform: translate(calc(-50% - 7px), -5px); }
  100% { transform: translate(-50%, 0); }
}
.card {
  position: absolute;
  left: 50%; bottom: calc(var(--card-h) * -0.30);
  width: var(--card-w); height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  transform-origin: 50% 100%;
  /* 由左至右排列疊放：--shift / --drop / --rot 由 JS layoutHand() 計算 */
  transform: translateX(var(--shift)) translateY(var(--drop)) rotate(var(--rot));
  border: none; padding: 0;
  cursor: pointer;
  background: transparent;
  /* hover 平滑 tween 浮起（easeInOut），離開時也是動畫滑回去 */
  transition: transform .38s cubic-bezier(.45,.05,.55,.95), filter .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.card:hover, .card:focus-visible {
  transform: translateX(var(--shift)) translateY(calc(var(--drop) - 58px)) rotate(0deg) scale(1.08);
  z-index: 99 !important; /* 蓋過 JS 設定的疊牌順序 */
}
/* 每張卡各自微晃，相位錯開 → 牌距會微妙地變化 */
.card__sway {
  width: 100%; height: 100%;
  animation: cardSway 5s ease-in-out infinite;
}
@keyframes cardSway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(2px, -5px) rotate(.9deg); }
  66%      { transform: translate(-2px, -2px) rotate(-.7deg); }
}
/* 已丟出：半透明灰階躺在手牌位置，再點一次收回 */
.card.is-played {
  filter: grayscale(1) opacity(.4);
}
.card.is-played:hover, .card.is-played:focus-visible {
  filter: grayscale(.8) opacity(.6);
  transform: translateX(var(--shift)) translateY(calc(var(--drop) - 24px)) rotate(var(--rot));
}

.card__face {
  /* [ASSET] 卡牌圖換這裡：背景改 url(...) center/cover，拿掉文字 */
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, var(--green), var(--green-d));
  border: 5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.25);
  color: var(--ink);
}
.card__face .npg   { font-size: 28px; font-weight: 900; letter-spacing: 1px; }
.card__face .icon  { font-size: 40px; }
.card__face .label { font-size: 20px; font-weight: 900; }

/* ---------- 飛行中的卡（JS 生成） ---------- */
.flier {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  will-change: transform, opacity;
}
.flier .card__sway { animation: none; } /* 飛行中不疊加呼吸晃動 */
/* 落桌溶解：從中心往外燒掉 + 綠光 */
.flier.is-dissolving .card__face {
  -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent var(--burn), #000 calc(var(--burn) + 22%));
  mask-image: radial-gradient(circle at 50% 45%, transparent var(--burn), #000 calc(var(--burn) + 22%));
  filter: drop-shadow(0 0 20px rgba(61,220,110,.9)) brightness(1.35);
  animation: burnAway .55s ease-in forwards;
}
@keyframes burnAway {
  from { --burn: 0%;   opacity: 1; }
  to   { --burn: 130%; opacity: 0; }
}
/* 收牌倒帶：溶解倒放，卡牌在落點重新凝聚 */
.flier.is-materializing .card__face {
  -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent var(--burn), #000 calc(var(--burn) + 22%));
  mask-image: radial-gradient(circle at 50% 45%, transparent var(--burn), #000 calc(var(--burn) + 22%));
  filter: drop-shadow(0 0 18px rgba(61,220,110,.85)) brightness(1.3);
  animation: burnIn .23s ease-out forwards;
}
@keyframes burnIn {
  from { --burn: 130%; opacity: .25; }
  to   { --burn: 0%;   opacity: 1; }
}

/* 落桌閃光（白心綠暈）——範圍放大，吃滿畫面中段 */
.flash {
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(61,220,110,.45) 35%, transparent 70%);
  z-index: 47;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 衝擊波 */
.ring {
  position: fixed;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border: 3px solid var(--green);
  border-radius: 50%;
  z-index: 48;
  pointer-events: none;
}

/* 粒子 */
.spark {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  z-index: 49;
  pointer-events: none;
}

/* ---------- 專案大型 DIALOG ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(5px);
}
.modal__card {
  position: relative;
  width: min(960px, calc(100% - 28px));
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  background: #1d2023;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 60px rgba(61,220,110,.12);
  scrollbar-width: thin;
  will-change: transform;
}
/* 影片占滿 DIALOG 上半（= 網頁中間大塊），點它就關閉 */
.modal__media { background: #000; cursor: pointer; }
.modal__media video,
.modal__media .ph,
.modal__media img {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  border: none;
  object-fit: cover;
}
.modal__media .ph {
  display: grid; place-items: center;
  font-size: 64px;
  color: rgba(255,255,255,.85);
}
.modal__body { padding: 22px 26px 20px; }
.modal__body h3 { font-size: 24px; font-weight: 900; }
.modal__tag { margin-top: 4px; font-size: 13px; color: var(--green); font-weight: 700; }
.modal__text { margin-top: 14px; font-size: 14.5px; line-height: 1.8; color: #c8ccd0; }
.modal__text p + p { margin-top: 10px; }
.modal__yt { margin-top: 18px; }
.modal__yt iframe {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  border: none;
  border-radius: 10px;
}
.modal__hint {
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255,255,255,.3);
}

/* ---------- 頁腳 ---------- */
.foot {
  position: absolute;
  bottom: 10px; right: 16px;
  font-size: 11px; color: rgba(255,255,255,.3);
  z-index: 4;
}

/* ============================================================
   手機版：棋盤改 2 欄直向捲動，其餘體驗一致
   ============================================================ */
@media (max-width: 720px) {
  :root { --card-w: 134px; }

  .brand { top: 14px; left: 14px; gap: 9px; }
  .brand__logo { width: 38px; height: 38px; font-size: 12px; border-radius: 10px; }
  .brand__text h1 { font-size: 16px; }
  .brand__text p  { font-size: 10.5px; }

  .stage {
    top: 56px;
    bottom: 0;
  }
  .board { width: 100%; height: 100%; }
  .board__scroll {
    display: block;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent);
  }
  .board__scroll.is-centered { justify-content: initial; }
  .board__grid {
    grid-auto-flow: row;             /* 直向捲動，2 欄往下長 */
    grid-template-rows: none;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: initial;
    gap: 12px;
    /* 底部 padding 讓最後一列能滑出手牌覆蓋區 */
    padding: 10px 12px calc(var(--card-h) * 0.72);
  }
  .snav { display: none; }           /* 手機直接用手指滑 */

  /* 手機直向：影片放大、垂直置中，比例改高一點讓 object-fit:cover 裁掉左右、聚焦中間主體 */
  .vwall { top: 0; bottom: calc(var(--card-h) * 0.6); align-items: center; }
  /* aspect-ratio 第二個數字越大 = 框越高 = 影片越大、左右裁越多
     16/10≈裁10% · 16/11≈裁20% · 4/3(16/12)≈裁25% · 16/13≈裁30% */
  .vwall__frame { width: 100% !important; height: auto; aspect-ratio: 4 / 3; }
  .vph__icon  { font-size: 40px; }
  .vph__label { font-size: 14px; }
  .vph__sub   { font-size: 10.5px; }

  .item { border-width: 2px; border-radius: 11px; }
  .item__thumb { aspect-ratio: 16 / 9; height: auto; border-bottom-width: 2px; font-size: 32px; }
  .item__info { padding: 9px 10px 11px; }
  .item__info h3 { font-size: 13.5px; }
  .item__info p  { font-size: 11.5px; }

  .card__face .npg   { font-size: 17px; }
  .card__face .icon  { font-size: 25px; }
  .card__face .label { font-size: 14px; }
  .card__face { border-width: 3px; border-radius: 11px; }

  .card:hover, .card:focus-visible {
    transform: translateX(var(--shift)) translateY(calc(var(--drop) - 36px)) rotate(0deg) scale(1.06);
  }
  @keyframes handBreathe {
    0%   { transform: translate(-50%, 0); }
    25%  { transform: translate(calc(-50% + 4px), -5px); }
    50%  { transform: translate(-50%, -8px); }
    75%  { transform: translate(calc(-50% - 4px), -3px); }
    100% { transform: translate(-50%, 0); }
  }

  .modal__card { width: calc(100% - 16px); max-height: calc(100dvh - 32px); border-radius: 14px; }
  .modal__body { padding: 16px 16px 14px; }
  .modal__body h3 { font-size: 19px; }
  .modal__text { font-size: 13.5px; }

  .hint h2 { padding: 0 24px; }
  .hint p  { padding: 0 28px; }
  .foot { display: none; }
}