@charset "utf-8";
/* CSS Document */
@import url('reset.min.1.2.css');
@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&family=Cinzel:wght@400..900&family=Comfortaa:wght@300..700&family=Corinthia:wght@400;700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Modak&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200..900&family=Varela+Round&display=swap');

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  /*Safari Chrome*/
  -moz-box-sizing: border-box;
  /*Firefox*/
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 18px;
  /*font-weight: bold;*/
  background-color: #f0cfc9;
  font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, 'Maven Pro', 'Droid Sans', 'Myriad Pro', Verdana, Geneva, sans-serif;
  color: #714242;
  text-align: center;
  line-height: 1.8rem;
  letter-spacing: normal;
}

div {
  font-size: 1rem;
}

img {
  width: 100%;
  height: auto;
  font-size: 0;
}

body>table:nth-of-type(1) img {
  width: initial;
}

a {
  width: 100%;
  height: auto;
  display: block;
}

a:hover {
  cursor: pointer;
}

/*像素比例尺*/
.ruler {
  height: 18px;
  background: url(../images/ruler.png) no-repeat left top;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: none;
}

.clear {
  height: 0;
  clear: both;
  font-size: 0em !important;
}

/*---debug---*/
/**{outline: 1px solid white;}*/

/* 修正粗體 */
@font-face {
  font-family: '微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  /* ASCII (碧筵綰) */
  font-style: normal;
  font-weight: bold;
  src: local(Yu Gothic), local(MS Gothic);
}

/* 一般粗細的時候改回微軟正黑 */
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  /* ASCII (碧筵綰) */
  font-style: normal;
  font-weight: normal;
  src: local(微軟正黑體);
}

#canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 20;
  opacity: 0.85;

  pointer-events: none;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  height: auto;
  background-image: url(../images/bg1.webp), url(../images/bg2.webp);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: 100% auto, 100% auto;
  background-attachment: scroll, fixed;
  overflow: hidden;
}

.container {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 1000px;
  position: relative;
  z-index: 2;
}

/*選單*/
.topbtn {
  width: 27%;
  height: auto;
  position: absolute;
  right: -3%;
  margin-top: 1%;
  z-index: 99;
  animation: 2s fadeInDownBig 1.5s forwards;
  -webkit-animation: 2s fadeInDownBig 1.5s forwards;
  opacity: 0;
}

.topbtn ul {
  width: 100%;
  height: auto;
  display: flex;
  /*for all browser*/
  display: -ms-flexbox;
  /*for ie10*/
  flex-direction: row;
  /*for all browser*/
  -ms-flex-direction: row;
  /*for ie10*/
  justify-content: center;
  /*for all browser*/
  -ms-flex-pack: justify;
  /*for ie10*/
  flex-wrap: nowrap;
  /*for all browser*/
  -ms-flex-wrap: nowrap;
  /*for ie10*/
}

.topbtn_g1,
.topbtn_g2,
.topbtn_g3 {
  width: auto;
  height: 28px;
}

.topbtn_g1 img,
.topbtn_g2 img,
.topbtn_g3 img {
  width: 100%;
  transform: scale(1, 1);
  transition: all 0.5s ease-out;
  /*chrome*/
  -webkit-transition: all 0.5s ease-out;
  /*firefox*/
  -moz-transition: all 0.5s ease-out;
}

.topbtn_g1 img:hover,
.topbtn_g2 img:hover,
.topbtn_g3 img:hover {
  filter: brightness(120%);
  filter: invert(100%);
}

/*LOGO*/
.logo {
  margin: 0 auto;
  width: 55%;
  height: auto;
  max-width: 550px;
  position: relative;
  padding-top: 1%;
  z-index: 98;
  opacity: 0;
  animation: 1s logo 1s forwards;
  -webkit-animation: 1s logo 1s forwards;
}

@-webkit-keyframes logo {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes logo {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.logo img {
  width: 100%;
  transition: all 0.3s ease-out;
  /*chrome*/
  -webkit-transition: all 0.3s ease-out;
  /*firefox*/
  -moz-transition: all 0.3s ease-out;
}

.logo img:hover {
  filter: brightness(120%);
  transform: translateY(-1.5px);
}

.ch_l {
  width: 100%;
  position: absolute;
  margin-top: 0%;
  margin-left: 0%;
  animation: fadeInLeftBig 1s;
  -webkit-animation: fadeInLeftBig 1s;
}

.character04 {
  width: 20%;
  max-width: 200px;
  position: absolute;
  margin-top: 1%;
  margin-left: -25.5%;
  animation: 0.5s fadeInLeftBig 0.5s forwards;
  -webkit-animation: 0.5s fadeInLeftBig 0.5s forwards;
  opacity: 0;
}

.character01 {
  width: 54%;
  max-width: 550px;
  position: relative;
  margin-top: -13.5%;
  margin-left: -17%;
}

.ch_r {
  width: 100%;
  position: absolute;
  margin-top: 0%;
  margin-left: 0%;
  animation: fadeInRightBig 1s;
  -webkit-animation: fadeInRightBig 1s;
}

.character02 {
  width: 41%;
  max-width: 490px;
  position: absolute;
  margin-top: -7%;
  margin-left: 66.7%;
}

.character03 {
  width: 25%;
  max-width: 250px;
  position: relative;
  margin-top: 27.5%;
  margin-left: 94.5%;
  animation: 0.5s fadeInRightBig 0.5s forwards;
  -webkit-animation: 0.5s fadeInRightBig 0.5s forwards;
  opacity: 0;
}

.am_pulse {
  animation: 7s pulse 2s infinite;
  -webkit-animation: 7s pulse 2s infinite;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}

/*主標*/
.slogan {
  margin: 0 auto;
  width: 53.7%;
  max-width: 537px;
  height: auto;
  position: relative;
  margin-top: 0%;
  z-index: 2;
}

.zoomIn-slogan {
  animation: 0.6s bounceOut2 1.2s forwards ease-out, shine1 infinite 4s;
  -webkit-animation: 0.6s bounceOut2 1.2s forwards ease-out, shine1 infinite 4s;
  opacity: 0;
}

@media (max-width: 1600px) {
  .slogan {
    margin-top: -3%;
  }
}

@media (max-width: 576px) {
  .slogan {
    margin-top: 12%;
  }
}

/*-----------主選單---------*/
.BTN {
  margin: 0 auto;
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 0%;
  margin-bottom: 2rem;
  z-index: 98;
  opacity: 0;
  animation: 1s logo 1s forwards;
  -webkit-animation: 1s logo 1s forwards;
}

.BTN ul {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: center;
  -ms-justify-content: center;
}

.b01,
.b02,
.b03 {
  width: 33%;
  max-width: 332px;
  position: relative;
}

.b01 a,
.b02 a,
.b03 a,
.b04 a,
.b05 a,
.b06 a,
.b07 a,
.b08 a,
.b09 a {
  width: 100%;
  height: auto;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
}

.b01 a {
  background: url('../images/btn_01_a.png') no-repeat top;
  background-size: cover;
  position: relative;
  top: 0%;
  left: 0;
  z-index: 99;
}

.b02 a {
  background: url('../images/btn_02_a.png') no-repeat top;
  background-size: cover;
  position: relative;
  top: 0%;
  left: 0;
  z-index: 99;
}

.b03 a {
  background: url('../images/btn_03_a.png') no-repeat top;
  background-size: cover;
  position: relative;
  top: 0%;
  left: 0;
  z-index: 99;
}

.b01 a:hover,
.b02 a:hover,
.b03 a:hover,
.b04 a:hover,
.b05 a:hover,
.b06 a:hover,
.b07 a:hover,
.b08 a:hover,
.b09 a:hover {
  filter: brightness(120%);
  animation: pulse 1s;
  -webkit-animation: pulse 1s;
}

/* -----回到最上按鈕------ */
.btn_top_block {
  width: 100%;
  max-width: 1100px;
  position: fixed;
  bottom: 12rem;
  z-index: 999;
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -webkit-filter: drop-shadow(0 3px 3px rgba(10, 10, 10, 0.3));
  filter: drop-shadow(0 3px 3px rgba(10, 10, 10, 0.3));
}

#btn_top {
  width: 10.8%;
  max-width: 108px;
  min-width: 108px;
  position: absolute;
  right: 0;
}

#btn_top a img {
  width: 100%;
  transform: scale(1, 1);
  transition: all 1s ease-out;
  /*chrome*/
  -webkit-transition: all 1s ease-out;
  /*firefox*/
  -moz-transition: all 1s ease-out;
}

#btn_top a img:nth-of-type(1) {
  position: absolute;
}

#btn_top a img:nth-of-type(2) {
  position: relative;
}

#btn_top a:hover img {
  filter: brightness(120%);
}

#btn_top a:hover img:nth-of-type(1) {
  animation: bounce infinite linear 1s;
  -webkit-animation: bounce infinite linear 1s;
}

/* -----內頁版型------ */
.page {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 1000px;
  z-index: 90;
}

.page_content {
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 1rem;
}

.mid_top {
  width: 100%;
  height: auto;
}

.mid_bottom {
  width: 100%;
  height: auto;
}

.mid_center {
  width: 100%;
  height: auto;
  background: url(../images/mid_center.png) repeat-y center top;
  background-size: 100%;
}

.p_title {
  width: 100%;
  height: auto;
  max-width: 420px;
  margin: 0 auto;
}

.p_title:nth-of-type(n + 2) {
  padding-top: 2rem;
}

.p_title_s {
  position: relative;
  width: 60%;
  margin: 2rem 1rem 1rem 1rem;
}

.p_title_bg {
  width: 100%;
  display: block;
  /* 讓圖片自動縮放 */
}

.p_title_wrap {
  position: relative;
  width: 50%;
  /* 可調整 */
  margin: 1rem;
}

.p_title_bg,
.p_title_frame {
  width: 100%;
  display: block;
}

.p_title_frame {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  /* 避免框擋住文字或點擊 */
}

.p_txt {
  margin: 0 auto;
  width: 95%;
}

/*內文圓角底色*/
.p_box {
  margin: 1rem 0px;
  padding: 1rem;
  border-radius: 1rem;
  background-color: #fbf3d1;
}

.p_box span {
  font-weight: normal;
}

/*內文左右兩邊*/
.p_apart {
  width: 95%;
  height: auto;
  margin: 0 auto;
  display: flex;
  /*for all browser*/
  display: -ms-flexbox;
  /*for ie10*/
  flex-direction: row;
  /*for all browser*/
  -ms-flex-direction: row;
  /*for ie10*/
  justify-content: center;
  /*for all browser*/
  -ms-flex-pack: center;
  /*for ie10*/
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.p_txt_width {
  width: 73%;
}

.img_01 {
  width: 27%;
  max-width: 200px;
}

.img_03 {
  margin: 0 auto;
  width: 100%;
  max-width: 490px;
  padding: 1rem 0;
}

.p_txt ul {
  width: 100%;
  height: auto;
  display: flex;
  /*for all browser*/
  display: -ms-flexbox;
  /*for ie10*/
  flex-direction: row;
  /*for all browser*/
  -ms-flex-direction: row;
  /*for ie10*/
  justify-content: center;
  /*for all browser*/
  -ms-flex-pack: justify;
  /*for ie10*/
  flex-wrap: nowrap;
  /*for all browser*/
  -ms-flex-wrap: nowrap;
  /*for ie10*/
}

/* -----內頁文字------ */
.page p {
  text-align: left;
  text-shadow: 0px 0px 1px white;
}

h1 {
  text-align: left;
  font-weight: bolder;
}

span {
  display: inline-block;
  font-family: Arial;
  font-weight: bold;
}

table span {
  font-size: 16px;
  color: #714242;
}

/* 表格字 */
.highlight {
  color: #f43a04;
}

/* 內文重點字 */
.highlight2 {
  color: #fff;
}

/* 表格標題字 */

/*活動2-3 輪播*/
.swiper_block {
  width: 100%;
  max-width: 800px;
  padding: 0 8%;
  margin: 0 auto;
}

.swiper_select {
  position: relative;
}

.swiper_select a:hover .video_play {
  filter: brightness(1.3);
}

.swiper_pic {
  width: 100%;
  max-width: 650px;
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.swiper_pic_s {
  width: 100%;
  max-width: 532px;
  position: relative;
  top: 0;
  left: 0%;
  display: none;
}

/*活動3-1 btn*/
.fsm_logo,
.steam_logo {
  width: 50%;
  max-width: 220px;
}

.fsm_logo img,
.steam_logo img {
  width: 100%;
  transition: all 0.3s ease-out;
  /*chrome*/
  -webkit-transition: all 0.3s ease-out;
  /*firefox*/
  -moz-transition: all 0.3s ease-out;
}

.fsm_logo img:hover,
.steam_logo img:hover {
  transform: translateY(-2px);
}

/* -----all表格統一設定------ */
.page table {
  margin: 1rem 0;
  width: 100%;
  height: auto;
  border: 1px solid #c46eb2;
  /* ✅ 外框 */
  border-radius: 12px;
  /* ✅ 圓角 */
  border-collapse: separate;
  border-spacing: 0;
  /* 消除縫隙 */
  overflow: hidden;
}

.page table thead td {
  text-align: center;
  background-color: #ac4b99;
  word-break: keep-all;
  padding: 0.5rem 0;
}

.page table tr {
  color: #fff;
}

.page table td {
  border-right: 1px solid #c46eb2;
  border-bottom: 1px solid #c46eb2;
  padding: 1rem;
}

/* 最右邊的格子不畫右線 */
.page table td:last-child {
  border-right: none;
}

/* 最下面的格子不畫下線 */
.page table tr:last-child td {
  border-bottom: none;
}

.page table tr:nth-child(odd) {
  background-color: #f2e1ce;
}

.page table tr:nth-child(even) {
  background-color: #fbf5de;
}

.page table img {
  max-width: 32px;
  min-width: 32px;
}

.page table tr td:nth-of-type(1) {
  width: 10%;
}

.page table tr td:nth-of-type(2) {
  width: 30%;
}

.page table tbody tr td:nth-of-type(3) {
  text-align: left;
}


@media (max-width: 1200px) {

  /* -----回到最上按鈕------ */
  .btn_top_block {
    right: 0;
  }
}

@media (max-width: 1100px) {
  .topbtn {
    right: 0;
  }

  .character01 {
    margin-left: -9%;
  }

  .character02 {
    margin-left: 60%;
    width: 37%;
  }

  .character03,
  .character04 {
    display: none;
  }
}

@media (max-width: 1000px) {
  .wrapper {
    margin: 0 auto;
    width: 100%;
    height: auto;
    background-image: url(../images/bg1_l.webp), url(../images/bg2_l.webp);
    background-size: 100% auto, 100% auto;
  }
}

@media (max-width: 800px) {

  .b01,
  .b02,
  .b03 {
    width: 50%;
  }

  .p_txt_width {
    width: 100%;
  }

  .img_01 {
    width: 100%;
    padding: 1rem 0;
  }

  .p_box span {
    display: block;
    text-align: center;
  }

  .p_title_s {
    width: 90%;
  }
}

@media (max-width: 640px) {
  #canvas {
    display: none;
  }

  html,
  body {
    font-size: 16px;
  }

  .wrapper {
    background-image: url(../images/bg_s.webp);
  }

  .topbtn {
    position: relative;
    width: 60%;
    margin: 0 auto;
    margin-top: 3%;
    right: auto;
  }

  .logo {
    width: 80%;
  }

  .ch_r {
    margin-top: 3%;
  }

  .ch_l {
    margin-top: 6%;
  }

  .page table thead {
    display: none;
  }

  .page table tr {
    display: block;
  }

  .page table td {
    width: 100% !important;
    padding: 0;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    justify-content: center;
    -ms-flex-pack: center;
  }

  .page table td {
    border-right: 0px solid #c46eb2;
    border-bottom: 1px solid #c46eb2;
    padding: 0rem;
  }

  .page table tbody td>span {
    width: 75%;
    display: inline-block;
  }

  .page table tbody td>span,
  .page table tbody td::before {
    font-size: 15px;
    font-weight: bold;
    padding: 0.5rem;
  }

  .page table tbody td::before {
    width: 25%;
    background-color: #ac4b99;
    color: white;
    display: inline-block;
  }

  .page table tbody>tr>td:nth-of-type(1)::before {
    content: '圖片';
  }

  .page table tbody>tr>td:nth-of-type(2)::before {
    content: '道具名稱';
  }

  .page table tbody>tr>td:nth-of-type(3)::before {
    content: '說明';
  }

  .page table tbody>tr>td:nth-of-type(3) {
    text-align: center;
  }

  .swiper_pic {
    display: none;
  }

  .swiper_pic_s {
    display: block;
  }

  /* -----回到最上按鈕------ */
  #btn_top {
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  div {
    font-size: 0.9rem;
  }

  /* -----回到最上按鈕------ */
  #btn_top {
    min-width: 70px;
  }
}

/* =========================================================
   2026 18週年活動頁｜最終整合版
   主色：皇家藍 / 天藍 / 亮金 / 奶油白
   ========================================================= */

:root {
  --event-blue: #15578e;
  --event-blue-deep: #0b3f72;
  --event-blue-soft: #3d6f9f;
  --event-blue-title: #245f9f;
  --event-blue-light: #e9f5ff;
  --event-gold: #e1a83c;
  --event-gold-deep: #b97917;
  --event-gold-text: #a36c16;
  --event-cream: #fffdf2;
  --event-cream-2: #f8f1db;
  --event-text: #4f5f70;
  --event-text-soft: #66788a;
}

/* 整體文字與內容寬度 */
body,
.page,
.p_txt,
.partner-copy {
  color: var(--event-text);
}

.page_content {
  width: 82%;
  padding-bottom: 2.4rem;
}

.page p {
  color: var(--event-text);
  line-height: 1.9;
  text-shadow: none;
}

/* 大分類標題：18週年慶祝活動 / 合作活動 / 了解幻世錄 */
.p_title {
  width: min(100%, 440px);
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 4px 6px rgba(56, 43, 16, 0.15));
}

.p_title:nth-of-type(n + 2) {
  padding-top: 3rem;
}

/* 每個活動以留白分段，不加多餘分隔線 */
.page_content>section {
  position: relative;
  padding-bottom: 1.35rem;
  margin-bottom: 1.4rem;
}

.page_content>section::after {
  content: none !important;
  display: none !important;
}

/*
  活動小標題
  重點：縮短標題本體寬度並靠左，避免「元素靠左但文字仍看起來在頁面中央」。
*/
.p_title_s.event-heading {
  width: 60%;
  max-width: 620px;
  min-height: 64px;
  margin: 1.8rem auto 1.15rem auto !important;
  margin: auto;
  padding: 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: url("../images/p_title_a01.png") left center / 100% auto no-repeat;

  color: var(--event-blue-title);
  font-family: "Chiron GoRound TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98),
    0 2px 3px rgba(26, 79, 135, 0.14);
}

.event-heading+.p_txt {
  margin-top: -0.1rem;
}

/* 活動時間：維持簡潔文字，不做膠囊 badge */
.event-date {
  margin-bottom: 0.35rem;
  color: #52677a;
  font-size: 17px;
  line-height: 1.75;
  text-align: left;
  font-weight: 800;
}

.event-date span {
  color: var(--event-blue-soft);
  font-family: inherit;
  font-weight: 800;
}

.event-date span+span::before {
  content: "～ ";
  color: #7d8fa0;
}

/* 若 HTML 還殘留 date-label class，也恢復成普通文字 */
.event-date .date-label {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #52677a;
  font-size: inherit;
  line-height: inherit;
  text-shadow: none;
}

/* 重點文字 */
.highlight {
  color: var(--event-gold-text);
  font-weight: 800;
}

/* 期間 / 重點資訊框 */
.p_box {
  margin: 0.7rem 0;
  padding: 0.72rem 1rem 0.72rem 1.15rem;
  border: 1px solid rgba(38, 115, 170, 0.2);
  border-left: 4px solid var(--event-gold);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(234, 246, 255, 0.82), rgba(255, 253, 242, 0.88));
  color: #516477;
}

/* 活動圖片 */
.event-gift img,
.role-slide img,
.partner-group img {
  display: block;
  border: 1px solid rgba(187, 126, 28, 0.62);
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(48, 62, 76, 0.12);
}

/* 表格：皇家藍 + 金色 */
.page table {
  border: 1px solid #c9983e;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(66, 74, 84, 0.08);
}

.page table thead td {
  background: linear-gradient(180deg, #2477b1 0%, #15578e 100%);
  color: #fff;
}

.page table td {
  border-right-color: rgba(185, 121, 23, 0.32);
  border-bottom-color: rgba(185, 121, 23, 0.25);
}

.page table tr:nth-child(odd) {
  background-color: #fffdf5;
}

.page table tr:nth-child(even) {
  background-color: #f3f8fb;
}

.page table span {
  color: #506174;
}

.page table thead span,
.page table thead .highlight2 {
  color: #fff;
}

/* 幻世錄合作介紹 */
.partner-title,
.role-slide figcaption {
  font-family: "Chiron GoRound TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--event-blue-deep);
  font-weight: 900;
}

.partner-title {
  margin: 1.8rem 0 0.8rem;
  font-size: 24px;
}

.partner-copy {
  margin: 0.8rem 0;
}

.partner-link {
  width: fit-content;
  min-width: 190px;
  margin: 1.5rem auto 0;
  padding: 0.62rem 1.4rem;
  border: 1px solid #d9a33f;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8d8 0%, #f0ca68 100%);
  color: #174f82;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow: 0 3px 0 #bc8121, 0 7px 13px rgba(71, 61, 40, 0.16);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.partner-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.role-slide figcaption {
  font-size: 20px;
}

.role-controls button {
  width: 44px;
  height: 44px;
  border: 2px solid #e1b150;
  background: linear-gradient(180deg, #277ab3 0%, #15578e 100%);
  box-shadow: 0 3px 8px rgba(26, 75, 112, 0.18);
}

.role-controls button:hover,
.role-controls button:focus-visible {
  background: #2e84bc;
  filter: brightness(1.06);
}

/* 平板 */
@media (max-width: 800px) {
  .page_content {
    width: 86%;
  }

  .p_title_s.event-heading {
    width: 84%;
    max-width: 620px;
    min-height: 58px;
    margin-left: 0 !important;
    padding: 0 48px;
    font-size: 20px;
  }
}

/* 手機 */
@media (max-width: 640px) {
  .page_content {
    width: 90%;
  }

  .p_title {
    width: min(86%, 380px);
    margin-bottom: 0.7rem;
  }

  .p_title:nth-of-type(n + 2) {
    padding-top: 2.2rem;
  }

  .page_content>section {
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
  }

  .p_title_s.event-heading {
    width: 100%;
    max-width: none;
    min-height: 52px;
    margin: 1.4rem 0 1rem !important;
    padding: 0 38px;
    font-size: 18px;
    letter-spacing: 0.01em;
  }

  .event-date {
    font-size: 15px;
  }

  .p_txt {
    width: 96%;
  }

  .page table tbody td::before {
    background: linear-gradient(180deg, #2477b1 0%, #15578e 100%);
    color: #fff;
  }
}

/* 恢復登入獎勵圖文左右排版，優先於一般內文寬度。 */
#anniversary-2 .p_txt_width,
#collaboration-1 .p_txt_width {
  width: 73%;
}

@media (max-width: 800px) {

  #anniversary-2 .p_txt_width,
  #collaboration-1 .p_txt_width {
    width: 100%;
  }
}

/* 底部下載：遊戲 Logo 與 Steam 按鈕左右並排。 */
.download-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 464px;
  margin: 1.5rem auto;
}

.download-logos>a {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
}

.download-logos img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .download-logos {
    gap: 12px;
  }
}