/* 遊戲內視窗精簡模式，由 _header.ejs 載入。

   為什麼需要：
   遊戲登入器的內嵌視窗實測是 337x400（縮小）與 778x400（放大），
   高度**兩種都是 400**（尺寸量自客戶端外框圖 4130.png 的透明區）。
   在 400px 高的視窗裡，原本的頁首 91px、頁尾 41px、遊戲內導覽列 42px
   合計 174px，等於 43% 的畫面都是框架，真正看內容只剩 226px。

   這支樣式在「視窗高度 <= 480」時把框架壓到最小，內容區大約可以多出一半。
   用 max-height 而不是 max-width：放大視窗有 778 寬但一樣只有 400 高，
   用寬度判斷會漏掉它。 */

@media (max-height: 480px) {

  /* 頁首：91px -> 約 34px。品牌縮成一行，英文副標在小視窗沒有資訊量，收起來 */
  header.top .wrap { padding: 3px 8px; }
  header.top .brand { font-size: 13px; line-height: 1.2; }
  header.top .brand small,
  header.top .brand .crest,
  header.top .brand .sub,
  header.top .brand em { display: none; }
  header.top .brand img { height: 20px; }
  header.top .brand b { font-size: 13px; }
  header.top .wrap > * + * { margin-left: 5px; }
  header.top a[class^="nav"] { font-size: 11px; padding: 2px 7px; margin: 0 2px; }

  /* 頁尾：遊戲內看不到也點不到，直接收起來，省 41px */
  footer.foot { display: none; }

  /* 面板：標題列與內距都縮一階 */
  .panel-head { padding: 4px 9px; font-size: 12.5px; }
  .panel > .pad { padding: 8px 9px; }
  .panel { margin-bottom: 8px; }

  /* 遊戲內導覽列：42px -> 約 32px */
  .qnav { padding: 2px 3px; }
  .qnav button { padding: 3px 2px; font-size: 11px; }

  /* 內文整體收一階，行距不要太鬆 */
  body { font-size: 13px; line-height: 1.45; }
  h1, h2 { font-size: 15px; margin: 6px 0; }
  p { margin: 6px 0; }
  .rewards li { padding: 4px 6px; }
  .gift.solo { width: 128px; height: 176px; background-size: 128px 176px; }
  .gift.big { width: 128px; height: 176px; background-size: 128px 176px; }
  .giftsolo { padding: 2px 0; }
  .chest-actions { margin-top: 4px; }
}

/* IE11 WebBrowser 的重繪負擔較高：大面積區塊改為實色，避免捲動或重排時重算漸層／陰影。 */
body.ie-stable {
  background-color: #140508;
  background-image: none;
  background-attachment: scroll;
}
body.ie-stable .top { background:#26090F; }
body.ie-stable .panel { background:#2C0C13; box-shadow:none; }
body.ie-stable .panel-head { background:#3A1119; }
body.ie-stable .panel-head .rule { background:#5C2029; }
body.ie-stable .qnav { background:#26090F; box-shadow:none; }
body.ie-stable .qnav button { background:#3C121A; box-shadow:none; border:1px solid #43151E; }
body.ie-stable .qnav button:active { background:#5C2029; }
body.ie-stable button.gift.solo,
body.ie-stable .gift.glow,
body.ie-stable .gift.pop,
body.ie-stable .burst .rays,
body.ie-stable .burst .halo,
body.ie-stable .sp,
body.ie-stable .shine { animation: none; }
body.ie-stable .burst .rays,
body.ie-stable .burst .halo,
body.ie-stable .sp { opacity: 0; }
body.ie-stable .gift { transition: none; }

@media (max-width: 420px) {
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list thead { display: none; }
  table.list tr { padding: 7px 0; border-bottom: 1px solid #5c2029; }
  table.list td { padding: 2px 4px; border: 0; text-align: left; }
  table.list td:first-child { font-size: 16px; }
  table.list td.num { display: inline-block; width: auto; margin-right: 12px; }
  table.list td.num:nth-of-type(2):before { content: '等級 '; }
  table.list td.num:nth-of-type(3):before { content: '轉生 '; }
}

/* 放大視窗（778x400）：寬度夠就讓內容並排，不要再直直往下排 */
@media (max-height: 480px) and (min-width: 560px) {
  .stage { display: block; }
  .stage > .panel + .panel { margin-left: 0; }
  .panel-head { font-size: 12px; }
}