/* ===================================================================
   WURA TRIAL STATS V13 — CSS
   只加樣式，不覆蓋 trial-shell.css，不改正式館母版樣式。
   =================================================================== */

/* ---- 結果頁三格 ---- */

.result-stats .trial-stat-unit {
  font-style: normal;
  font-size: 0.42em;
  font-weight: 700;
  margin-left: 3px;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

.result-stats .trial-stat-sub {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.58;
  letter-spacing: 0.01em;
}

.result-stats > div.trial-stat-box > span {
  display: block;
  white-space: nowrap;
  font-weight: 700;
}

/* 三格文字變長（「壞球等待電爆」六個字），窄螢幕要能換行不擠爆 */
@media (max-width: 480px) {
  .result-stats > div.trial-stat-box > span {
    white-space: normal;
    font-size: 13px;
    line-height: 1.3;
  }
  .result-stats .trial-stat-sub {
    font-size: 11px;
  }
}

/* ---- 六球場首頁：每張球場卡自己的戰績 ---- */

.court-card.has-trial-stat {
  position: relative;
}

.trial-court-stat {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  pointer-events: none;
  z-index: 3;
}

.trial-court-stat b,
.trial-court-stat i {
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  background: rgba(20, 20, 20, 0.74);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* 橘色＝試打館識別色，代表「還等著被電爆」 */
.trial-court-stat b {
  background: rgba(230, 106, 22, 0.94);
}

.court-card.unavailable .trial-court-stat {
  display: none;
}

@media (max-width: 380px) {
  .trial-court-stat b,
  .trial-court-stat i {
    font-size: 10px;
    padding: 4px 6px;
  }
}

/* ---- V2：V17「你的壞球進度」區塊 ---- */

.trial-progress-box.is-clickable {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.trial-progress-box.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(230, 106, 22, 0.22);
}

.trial-progress-foot {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.trial-progress-cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border-radius: 999px;
  color: #fff;
  background: #e66a16;
  box-shadow: 0 3px 12px rgba(230, 106, 22, 0.35);
}

.trial-progress-cta:hover {
  background: #f27a24;
}

.trial-progress-cta:active {
  transform: translateY(1px);
}

.trial-progress-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.72;
  text-align: center;
}

@media (max-width: 480px) {
  .trial-progress-cta {
    width: 100%;
    padding: 14px 18px;
  }
}

/* ---- V3：你的贏家進度 — 範圍說明與六球場明細 ---- */

.trial-progress-scope {
  margin: 6px 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.62;
}

.trial-progress-courts {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trial-court-row {
  appearance: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.trial-court-row:hover:not(:disabled) {
  background: rgba(230, 106, 22, 0.14);
  border-color: rgba(230, 106, 22, 0.55);
  transform: translateX(2px);
}

.trial-court-row.is-current {
  border-color: rgba(230, 106, 22, 0.85);
  background: rgba(230, 106, 22, 0.10);
}

.trial-court-row.is-locked {
  opacity: 0.42;
  cursor: default;
}

.trial-court-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trial-court-row-nums {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.trial-court-row-nums i {
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.trial-court-row-nums .n-good { background: rgba(46, 160, 92, 0.92); }
.trial-court-row-nums .n-wait { background: rgba(230, 106, 22, 0.94); }
.trial-court-row-nums .n-done { background: rgba(20, 20, 20, 0.62); }

.trial-court-row.has-badball .n-wait {
  box-shadow: 0 0 0 2px rgba(230, 106, 22, 0.28);
}

.trial-court-row-go {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 13px;
  opacity: 0.6;
}

.trial-good-tile {
  /* 好球格：複製自「找出的壞球」格，樣式沿用，不另外覆寫 */
}

@media (max-width: 560px) {
  .trial-court-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .trial-court-row-name {
    flex: 1 1 100%;
    white-space: normal;
  }
  .trial-court-row-nums {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }
  .trial-court-row-go {
    margin-left: auto;
  }
}

/* ---- V4：球場卡三顆藥丸（好球 / 待電爆 / 已電爆） ---- */

.trial-court-stat i.n-good { background: rgba(46, 160, 92, 0.94); }
.trial-court-stat i.n-wait { background: rgba(230, 106, 22, 0.94); }
.trial-court-stat i.n-done { background: rgba(20, 20, 20, 0.72); }

.court-card.has-badball .trial-court-stat i.n-wait {
  box-shadow: 0 0 0 2px rgba(230, 106, 22, 0.30);
}

@media (max-width: 480px) {
  .trial-court-stat {
    gap: 4px;
  }
  .trial-court-stat i {
    font-size: 10px;
    padding: 4px 6px;
  }
}

/* ---- V5：完成度（分母與進度條） ---- */

.trial-tile-sub {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.6;
  white-space: nowrap;
}

/* 球場卡底部細進度條 */
.trial-court-prog {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.trial-court-prog > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ea05c, #46c47a);
  transition: width .35s ease;
}

/* 明細列進度條 */
.trial-row-prog {
  flex: 1 1 100%;
  height: 5px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.trial-row-prog > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ea05c, #46c47a);
  transition: width .35s ease;
}

.trial-court-row {
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .trial-tile-sub {
    font-size: 10.5px;
    white-space: normal;
  }
}

/* ---- V6：贏家進度按鈕（排在免費試打倒數之前）與覆蓋層 ---- */

.trial-fab {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 20, 20, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.16);
  line-height: 1;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.trial-fab:hover {
  background: rgba(230, 106, 22, 0.24);
  border-color: rgba(230, 106, 22, 0.66);
  transform: translateY(-1px);
}

.trial-fab > strong {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.trial-fab .trial-fab-num {
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.trial-fab.has-badball .trial-fab-num {
  background: rgba(230, 106, 22, 0.96);
}

.trial-fab.is-inline {
  margin-right: 8px;
}

.trial-fab.is-fixed {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* 覆蓋層 */

.trial-ov {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(4, 12, 8, 0.72);
  backdrop-filter: blur(6px);
}

.trial-ov.is-open {
  display: flex;
}

body.trial-overlay-locked {
  overflow: hidden;
}

.trial-ov-card {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: auto 0;
  padding: 26px 22px 22px;
  border-radius: 18px;
  color: #fff;
  background: #0d2118;
  border: 1px solid rgba(230, 106, 22, 0.42);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.trial-ov-close {
  position: absolute;
  top: 10px;
  right: 12px;
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

.trial-ov-close:hover {
  background: rgba(230, 106, 22, 0.55);
}

.trial-ov-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 900;
  color: #f0a565;
  letter-spacing: 0.02em;
}

.trial-ov-scope {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.66;
}

.trial-ov-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.trial-ov-tile {
  text-align: center;
  padding: 14px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.trial-ov-tile > strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: #f07a1e;
}

.trial-ov-tile.is-good > strong { color: #46c47a; }

.trial-ov-tile > span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.82;
}

@media (max-width: 560px) {
  .trial-ov-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .trial-ov-card {
    padding: 22px 14px 16px;
  }
  .trial-fab > strong {
    font-size: 12px;
  }
}


/* ===================================================================
   V13 MOBILE HOTFIX — 只作用於試打館手機版；桌機與正式館不動
   =================================================================== */

.trial-account-trigger{
  appearance:none;border:1px solid rgba(255,255,255,.18);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:0;max-width:180px;padding:8px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);color:#d9f1e2;
  font-size:12px;font-weight:850;line-height:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.trial-account-trigger:hover{border-color:rgba(230,106,22,.6);background:rgba(230,106,22,.12)}
.trial-account-menu{
  position:fixed;z-index:10050;display:none;width:min(300px,calc(100vw - 16px));
  padding:14px;border-radius:14px;background:#0d2118;color:#fff;
  border:1px solid rgba(230,106,22,.46);box-shadow:0 16px 42px rgba(0,0,0,.45)
}
.trial-account-menu.is-open{display:grid;gap:9px}
.trial-account-menu small{opacity:.66;font-size:11px}
.trial-account-menu .trial-account-full{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
#trial-account-logout{
  appearance:none;border:0;cursor:pointer;width:100%;padding:11px 12px;border-radius:10px;
  background:#fff;color:#143a29;font-weight:900
}

.trial-start-account-info{
  display:grid;gap:7px;margin:0 0 18px;padding:13px 14px;border-radius:13px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)
}
.trial-start-account-info>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:start}
.trial-start-account-info span{color:#9ab3a5;font-size:12px}
.trial-start-account-info strong{color:#fff;font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}

.trial-mobile-progress-slot{display:none}

@media (max-width:700px){
  html,body{max-width:100%;overflow-x:clip}
  body *{box-sizing:border-box}

  /* Header 真正改成兩排：第一排品牌＋遮罩帳號；第二排倒數＋購買 */
  header.topbar{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;gap:8px 9px!important;padding:10px!important;
    max-width:100vw!important;width:100%!important;
  }
  header.topbar .brand{
    grid-column:1;grid-row:1;min-width:0!important;width:auto!important;
    display:flex!important;align-items:center!important;gap:8px!important;
    white-space:nowrap!important;overflow:hidden!important;
  }
  header.topbar .brand>img{width:42px!important;height:42px!important;flex:0 0 42px!important}
  header.topbar .brand>span{
    display:block!important;min-width:0!important;white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important;font-size:13px!important;
    line-height:1.2!important;
  }
  header.topbar>#trial-account-trigger{
    grid-column:2;grid-row:1;justify-self:end;max-width:132px;font-size:11px;padding:7px 9px;
  }
  header.topbar .userbox{
    grid-column:1/-1;grid-row:2;width:100%!important;min-width:0!important;
    display:flex!important;align-items:center!important;gap:8px!important;justify-content:stretch!important;
  }
  header.topbar .userbox>#user-chip,
  header.topbar .userbox>#logout-btn{display:none!important}
  #trial-shell-countdown{
    flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:8px 10px!important;
    justify-content:center!important;font-size:12px!important;white-space:nowrap!important;
  }
  #trial-buy-pill{
    flex:0 0 auto!important;margin:0!important;padding:8px 11px!important;
    font-size:12px!important;white-space:nowrap!important;
  }

  /* 贏家進度移出 Header，但仍在每一頁 main 最上方可用 */
  .trial-mobile-progress-slot{
    display:flex;width:100%;max-width:100%;justify-content:flex-end;
    margin:0 0 10px;padding:0;min-width:0
  }
  .trial-fab.is-mobile-block{
    width:auto;max-width:100%;margin:0;padding:9px 12px;flex-wrap:wrap;
  }

  /* 所有主內容都不得比 viewport 寬 */
  main{width:calc(100% - 16px)!important;max-width:100%!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important}
  #training-view,#court-hall-panel,#books-panel,#practice-panel,#result-panel,#badball-panel,
  #courts-root,#books-root,#practice-root,.practice-card,.result-card,.wrong-list,.badball-list,
  .hall-hero-poster,.books-poster-wrap,.court-toolbar,.panel-head{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .courts-grid,.books-grid{min-width:0!important}
  .court-card,.book-card{min-width:0!important;max-width:100%!important}

  /* 題目：單字獨占一列，音標下一列，發音按鈕再下一列 */
  .question-word-row{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:center!important;gap:10px!important;width:100%!important;max-width:100%!important;
    min-width:0!important;margin:20px 0!important;
  }
  .question-word-row>div:first-child{width:100%!important;max-width:100%!important;min-width:0!important;text-align:center!important}
  .question-word{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    white-space:nowrap!important;text-align:center!important;line-height:1.05!important;
    overflow:visible!important;
  }
  .phonetic{max-width:100%!important;overflow-wrap:anywhere!important}
  .speech-tools{
    width:100%!important;max-width:100%!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important;
  }
  .speech-btn{min-width:0!important;max-width:calc(50% - 4px)!important;flex:0 1 auto!important}

  /* 結果／錯題：滿版，長字長答案都不准把頁面撐寬 */
  .result-card{margin:12px auto!important;padding:16px!important}
  .result-stats{width:100%!important;max-width:100%!important}
  .wrong-list article,.badball-list article,.choice-btn,.answer-feedback{
    min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important;
  }
  .wrong-list strong,.wrong-list span,.badball-list strong,.badball-list span{min-width:0!important;overflow-wrap:anywhere!important}

  .trial-start-card{max-width:100%!important;min-width:0!important}
}

@media (max-width:380px){
  header.topbar .brand>img{width:38px!important;height:38px!important;flex-basis:38px!important}
  header.topbar .brand>span{font-size:12px!important}
  header.topbar>#trial-account-trigger{max-width:112px;font-size:10.5px;padding:7px 8px}
  #trial-shell-countdown{font-size:11px!important;padding:7px 8px!important}
  #trial-buy-pill{font-size:11px!important;padding:7px 9px!important}
}


/* WURA_COLOR_V1：待電爆＝紅（警戒）、已電爆＝黃（成功） */
i.n-wait { background:#E53935 !important; color:#ffffff !important; border-color:#E53935 !important; }
i.n-done { background:#FFC83D !important; color:#1b1b1b !important; border-color:#FFC83D !important; }
.trial-fab .trial-fab-num, .trial-fab.has-badball .trial-fab-num { background:#E53935 !important; color:#ffffff !important; }
.trial-ov-tile.is-done > strong { color:#FFC83D !important; }
.trial-ov-tile.is-wait > strong, .trial-ov-tile.is-bad > strong, .trial-ov-tile.is-remaining > strong { color:#E53935 !important; }


/* WURA_BTN_COLOR_V1：壞球區＝紅、電爆區＝黃，四顆同尺寸長條 */
#badball-entry-btn, #practice-badball-area-btn { background:#E53935 !important; color:#ffffff !important; border:none !important; }
#badball-fire-btn, #badball-start-btn { background:#FFC83D !important; color:#1b1b1b !important; border:none !important; }
#badball-entry-btn, #badball-fire-btn, #badball-start-btn, #practice-badball-area-btn {
  display:block; width:100% !important; min-height:56px !important; border-radius:18px !important;
  font-size:18px !important; font-weight:700 !important; box-sizing:border-box; margin:8px 0 !important; box-shadow:none !important;
}
#badball-entry-btn:disabled, #badball-fire-btn:disabled, #badball-start-btn:disabled { opacity:.45; }


/* WURA_BTN_ROW_V1：回選書與壞球區／電爆區並排、同尺寸 */
.wura-btn-row { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; margin:0 0 16px; }
.wura-btn-row > button, .wura-btn-row > #badball-back-btn, .wura-btn-row > #badball-start-btn,
.wura-btn-row > #practice-back-btn, .wura-btn-row > #practice-badball-area-btn {
  flex:0 0 auto; width:auto !important; min-width:140px; min-height:56px !important; margin:0 !important;
  border-radius:18px !important; font-size:18px !important; font-weight:700 !important;
  align-items:center; justify-content:center; padding:0 24px; box-sizing:border-box;
}


/* WURA_HIDE_BADGE_V1：標題列不顯示「免費試打 48H」橘色按鈕 */
#trial-badge, .trial-badge { display:none !important; }