@charset "utf-8";
/* CSS Document */

/* =========================================================
   Theme Variables
   ========================================================= */
:root {
  /* Light theme */
  --bg-main: #f5f7f4;
  --card-white: #ffffff;
  --card-border: #e2e8f0;
  --shadow-soft: rgba(27, 94, 32, 0.08);
  --header-dark-green: #134e4a;
  --ink-text: #2d3748;
  --ink-green: #1b5e20;
  --primary-green: #2e7d32;
  --green-soft: #f0f7f0;
  --green-line: #c5e1a5;
  --row-even: #fafdfa;
  --hover-green: #f1f8e9;
  --accent-gold: #a08346;

  /* ---------------------------------------------------------
     Dark theme variables (Neon)
     --------------------------------------------------------- */
  --bg-dark: #121212;
  --text-main: #e0e0e0;
  --text-light: #ffffff;
  --text-muted: #bbb;
  --text-dim: #666;

  --primary-purple: #742a81;
  --primary-purple-soft: #ce93d8;
  --primary-purple-glow: rgba(186, 104, 200, 0.28);
  --accent-lavender: #ece8ff;

  --surface-1: #1e1e1e;
  --surface-2: #222222;
  --surface-3: #2c2c2c;
  --surface-nav: rgba(0, 0, 0, 0.82);

  --border-dark: #333333;
  --border-pill: rgba(255, 255, 255, 0.25);

  --header-grad-start: #1f1c2c;
  --header-grad-end: #928dab;
  --shadow-pack: rgba(0, 0, 0, 0.55);

  --btn-bg: #ffffff;
  --btn-text: #111111;
  --btn-note-bg: rgba(255, 255, 255, 0.75);

  /* ---------------------------------------------------------
     Compatibility aliases (avoid undefined var() in current CSS)
     --------------------------------------------------------- */
  --card: var(--card-white);
  --shadow: var(--shadow-soft);
  --ink: var(--ink-text);
  --green: var(--primary-green);
  --border: var(--card-border);
  --muted: #6b7280;            /* neutral muted text for light pages */
  --greenSoft: var(--green-soft);
  --row-gray: #f3f4f6;
}

/* =========================================================
   Base
   ========================================================= */
body {
  margin: 0;
  min-width: 1050px;
  background-image: url(images/bg_r.png);
  background-size: auto;
  background-position: top center;
  background-repeat: repeat;
  color: #333;
  line-height: 1.8em;
  font-family: "Microsoft JhengHei", Verdana, "微軟正黑體", sans-serif;
  font-size: 17px;
}

.container {
  padding: 30px 0;
}

.info-box {
  background: #f1f8e9;
  border: 1px solid #dcedc8;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
  color: var(--ink-green);
}

/* =========================================================
   Hall / Table (Tasks)
   ========================================================= */
.hall {
  background-color: var(--card-white);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px var(--shadow-soft);
  margin: 20px 0;
}

.hall-header {
  background-color: var(--primary-green);
  color: #ffffff;
  padding: 12px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink-text);
}

/* Table head (single source of truth) */
.task-table thead th {
  background-color: var(--header-dark-green);
  color: #ffffff;
  padding: 12px 15px;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--green-line);
}

/* Column alignment helpers */
.task-table th:nth-child(1),
.task-name {
  text-align: center !important;
}

.task-table th:nth-child(3),
.reward {
  text-align: center !important;
}

.task-table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--card-border);
  line-height: 1.5;
  text-align: center;
}

/* Zebra rows (keep only one) */
.task-table tbody tr:nth-child(even) {
  background-color: var(--row-even);
}

/* Task name cell */
.task-name {
  color: var(--ink-green);
  font-weight: bold;
  background-color: #ffffff;
  vertical-align: middle;
  border-right: 1px solid var(--card-border);
}

/* Reward cell */
.reward {
  font-weight: bold;
  color: var(--primary-green);
}

.reward img {
  height: 1.2em;
  vertical-align: middle;
  margin: 0 4px;
}

/* Hover */
.task-table tbody tr:hover {
  background-color: var(--hover-green);
  transition: background-color 0.2s ease;
}

/* Text helper */
.task-table .notice-table td.text-left,
.task-table td.text-left,
.text-left {
  text-align: left;
}

/* Responsive (optional) */
@media (max-width: 600px) {
  .task-table { font-size: 14px; }
  .task-table td { padding: 10px 8px; }
}

/* =========================================================
   Spring Theme Blocks
   ========================================================= */
.info-bar {
  background: var(--primary-green);
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin: 20px 0 40px;
}

.info-bar span {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
}

.page-title {
  text-align: center;
  font-size: 28px;
  letter-spacing: 6px;
  margin: 25px 0;
  color: var(--ink-green);
  text-shadow: none;
}

.sub {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
}
.sub span { color: var(--primary-green); }

/* Panel */
.panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 3px 10px var(--shadow);
  overflow: hidden;
}

.panel-head {
  background: linear-gradient(135deg, #0b4a3a, #2e7d32);
  border-bottom: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head .title {
  font-size: 20px;
  letter-spacing: 3px;
  color: #fff;
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(46, 125, 50, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink-green);
  font-size: 13px;
  white-space: nowrap;
}

.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(46, 125, 50, .85);
  box-shadow: none;
}

.panel-body { padding: 18px 18px 22px; }

/* Notice (modern) */
.notice {
  background: var(--green-soft);
  border: 1px solid rgba(139, 195, 74, .45);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 18px;
}
.notice strong { color: var(--ink-green); font-weight: 800; }

/* =========================================================
   Grid / Cards
   ========================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  width: 100%;
  max-width: 1200px;
  margin: 30px auto;
}

.reward-section .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  justify-content: center;
  gap: 20px;
}

.card {
  flex: 0 0 auto;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--shadow-soft);
}

/* Meta layout */
.card .meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
}

/* Background compensation only for non full-set cards */
.card:not(:has(.full-set)) .meta {
  background: radial-gradient(circle at 50% 40%, var(--green-soft) 0%, transparent 80%);
}

.card-top {
  padding: 12px 12px 0;
  background: linear-gradient(180deg, rgba(241, 248, 233, .95), rgba(255, 255, 255, .85));
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px var(--shadow-soft);
  border-color: var(--green-line);
}

.name {
  font-size: 1.1rem;
  line-height: 1.75rem;
  letter-spacing: 1px;
  color: var(--ink-green);
  margin: 0 0 8px;
  display: block;
  width: 100%;
  font-weight: 700;
}

.badge {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(46, 125, 50, .35);
  color: var(--ink-green);
  background: rgba(241, 248, 233, .75);
  white-space: nowrap;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Image canvas */
.canvas {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
  background: var(--green-soft);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.fashion-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

/* Single item special zoom */
.single-item .fashion-thumb {
  object-fit: contain;
  transform: scale(1.6);
  transform-origin: bottom center;
  filter: drop-shadow(0 8px 12px var(--shadow-soft));
}

.info {
  padding: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--card-white);
  border-top: 1px solid var(--green-line);
}

.tag {
  font-weight: bold;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--hover-green);
  color: var(--ink-green);
  text-align: center;
  margin: 0 auto;
  padding: 2px 8px;
  display: inline-block;
  width: fit-content;
}

.price {
  text-align: center;
  font-size: 16px;
  display: block;
  color: var(--accent-gold);
  font-weight: bold;
}

/* Footnote */
.footnote {
  background: var(--bg-main);
  padding: 30px;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.footnote h3 {
  margin: 0 0 15px;
  color: var(--ink-green);
}

.footnote ul {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { padding: 28px 12px 44px; }
  .page-title { font-size: 24px; letter-spacing: 4px; }
  .panel-head { flex-direction: column; align-items: flex-start; }
  .grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Page2
   ========================================================= */
.rank-link {
  display: inline-block;
  background: var(--accent-gold);
  color: #fff !important;
  padding: 4px 15px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.2s, background 0.2s;
}

.rank-link:hover {
  background: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.rank-link.is-purple {
  background: var(--primary-purple-soft);
  color: var(--bg-dark);
  padding: 0.25rem 1rem;
  border-radius: 3.125rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
  box-shadow: 0 4px 12px var(--primary-purple-glow);
}

.rank-link.is-purple:hover {
  transform: translateY(-2px);
  background: var(--text-light);
  filter: brightness(1.1);
}

/* Section title */
.title {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-green);
  border-left: 4px solid var(--accent-gold);
  padding-left: 12px;
  margin: 25px 0 10px;
  display: block;
}

/* 麻將產包系列容器佈局 */
.pack-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 30px auto;
}

.section-title {
  color: var(--text-light);
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--primary-purple);
  display: inline-block;
  padding-bottom: 8px;
}

/* 影舞夜行系列專用標註樣式 */
.card-top.is-purple {
  background: linear-gradient(180deg, var(--bg-main), var(--accent-lavender));
}

.is-purple { color: var(--primary-purple); }
.is-purple-glow { color: var(--primary-purple-glow); }
.is-purple-bg { background: var(--primary-purple); }
.is-purple-border { border: 1px solid var(--primary-purple-soft); }

.card.is-purple:hover {
  border-color: var(--primary-purple-soft);
  box-shadow: 0 0 18px rgba(186, 104, 200, 0.28);
}

h3.is-purple { color: var(--primary-purple) !important; }

.item-price { color: #ba68c8; }

.tag.is-purple {
  border: 1px solid var(--card-border);
  background: var(--primary-purple);
  color: var(--text-light);
}

.center {
  margin: 0 auto;
  text-align: center;
}

/* =========================================================
   Legacy / Original CSS (currently unused)
   - Renamed conflicting classes to avoid overriding modern styles
   ========================================================= */

/* 原先的設定 */
/*=============================================================下面暫時沒有用到*/
#outer {
  width: 100%;
  background-image: url(images/bg.png);
  background-size: auto;
  background-position: top center;
  background-repeat: no-repeat;
  color: #000;
  line-height: 1.8em;
  font-family: Verdana, "微軟正黑體", sans-serif;
  font-size: 17px;
}

#outer #weapper {
  width: 1050px;
  margin-right: auto;
  margin-left: auto;
}

#outer #weapper #header {
  height: 550px;
  width: 1050px;
  position: relative;
  background: url(images/header.png) no-repeat top left;
}

#outer #weapper #header #menu {
  width: 881px;
  height: 158px;
  position: absolute;
  top: 400px;
  left: 80px;
}

#logo {
  display: block;
  width: 136px;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 9px;
  z-index: 9;
}

#logo a {
  display: block;
  height: 100px;
}

#outer #weapper #content {
  width: 870px;
  padding: 0px 90px 0px 90px;
  position: relative;
  background: url(images/content_bg.png) repeat-y top center;
  margin-bottom: -2px;
}

#outer #weapper #notice {
  width: 870px;
  visibility: inherit;
  font-size: 14px;
  line-height: 1.8em;
}

.btitle {
  position: absolute;
  top: -75px;
  left: 352px;
}

.red { color: #ff60ee; }
div .red { color: #e80000; }

.blue { color: #0060ff; }
tr .blue { color: #004eff; }

.green { color: #00aea4; }
.mint { color: #00fcff; }
.pink { color: #ff00ea; }
.yellow { color: #fff000; }
.purple { color: #7b00d1; }

/* Renamed to avoid conflict with modern .notice */
.legacy-notice {
  color: #e9051f;
  font-size: 14px;
  line-height: 1.5em;
  background: var(--bg-main);
}

.spnotice {
  background-color: #fffaa8;
  color: #d21400;
  line-height: 1.5em;
}

.stxt { font-size: 14px; }
.width { font-weight: bold; }

/* Renamed to avoid conflict with modern .title */
.legacy-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
  color: var(--ink-green);
}

.icon01 {
  display: block;
  width: 117px;
  height: 65px;
  position: absolute;
  right: -25px;
}
.icon01 a {
  display: block;
  width: 117px;
  height: 65px;
  background-image: url(images/icon_01.png);
  background-repeat: no-repeat;
}
.icon01 a:hover {
  background-image: url(images/icon_01_2.png);
}

.icon02 {
  display: block;
  width: 117px;
  height: 44px;
  position: absolute;
  top: 65px;
  right: -25px;
}
.icon02 a {
  display: block;
  width: 117px;
  height: 44px;
  background-image: url(images/icon_02.png);
  background-repeat: no-repeat;
}
.icon02 a:hover {
  background-image: url(images/icon_02_2.png);
}

.sbut_b1 a {
  display: block;
  width: 200px;
  height: 72px;
  background-image: url(images/sbut_b1.png);
  background-repeat: no-repeat;
}
.sbut_b1 a:hover { background-image: url(images/sbut_b2.png); }

.note { color: #002aa2; }

.but01 {
  display: block;
  width: 288px;
  height: 118px;
  position: absolute;
  left: 7px;
  top: 6px;
}

.but01 a {
  display: block;
  width: 288px;
  height: 118px;
  background-image: url(images/but_01.png);
  background-repeat: no-repeat;
  background-position: 0px 158px;
}
.but01 a:hover { background-position: top left; }

.but02 {
  display: block;
  width: 288px;
  height: 118px;
  position: absolute;
  left: 301px;
  top: 6px;
}
.but02 a {
  display: block;
  width: 288px;
  height: 118px;
  background-image: url(images/but_02.png);
  background-repeat: no-repeat;
  background-position: 0px 158px;
}
.but02 a:hover { background-position: top left; }

.but03 {
  display: block;
  width: 288px;
  height: 118px;
  position: absolute;
  left: 594px;
  top: 6px;
}
.but03 a {
  display: block;
  width: 288px;
  height: 118px;
  background-image: url(images/but_03.png);
  background-repeat: no-repeat;
  background-position: 0px 158px;
}
.but03 a:hover { background-position: top left; }

/* button注意事項 */
.but07 {
  display: block;
  width: 143px;
  height: 58px;
  position: absolute;
  top: 366px;
  right: 142px;
}
.but07 a {
  display: block;
  width: 143px;
  height: 58px;
  background-image: url(images/but_07.png);
  background-repeat: no-repeat;
}
.but07 a:hover { background-image: url(images/but_07_2.png); }

.but072 {
  display: block;
  width: 130px;
  height: 48px;
  position: absolute;
  top: 369px;
  right: 133px;
}
.but072 a {
  display: block;
  width: 130px;
  height: 48px;
  background-image: url(images/but_07.png);
  background-repeat: no-repeat;
}
.but072 a:hover { background-image: url(images/but_07_2.png); }

.p1_sbut01, .p1_sbut02, .p1_sbut03,
.p2_sbut01, .p2_sbut02, .p2_sbut03,
.p3_sbut01, .p3_sbut02, .p3_sbut03, .p3_sbut04,
.p4_sbut01, .p4_sbut02,
.p5_sbut01, .p5_sbut02, .p5_sbut03,
.p6_sbut01, .p6_sbut02 {
  display: block;
  width: 200px;
  height: 60px;
  float: left;
  margin-right: 5px;
}

.p5_sbut01, .p5_sbut02, .p5_sbut03 { width: 120px; height: 80px; }
.p6_sbut01, .p6_sbut02 { width: 116px; height: 80px; }
.p4_sbut01, .p4_sbut02 { height: 70px; }

.p1_sbut01 a:hover, .p1_sbut02 a:hover, .p1_sbut03 a:hover,
.p2_sbut01 a:hover, .p2_sbut02 a:hover, .p2_sbut03 a:hover,
.p3_sbut01 a:hover, .p3_sbut02 a:hover, .p3_sbut03 a:hover, .p3_sbut04 a:hover,
.p4_sbut01 a:hover, .p4_sbut02 a:hover,
.p5_sbut01 a:hover, .p5_sbut02 a:hover, .p5_sbut03 a:hover,
.p6_sbut01 a:hover, .p6_sbut02 a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.slot_link {
  width: 245px;
  height: 195px;
  position: absolute;
  top: 45px;
  right: 20px;
}

.but_buy {
  display: block;
  width: 167px;
  height: 52px;
}
.but_buy a {
  display: block;
  width: 167px;
  height: 52px;
  background-image: url(images/buy.png);
  background-repeat: no-repeat;
  background-position: top left;
}
.but_buy a:hover { background-position: 0px -52px; }

.but_casual {
  width: 100%;
  padding: 20px 0px 10px 0px;
}

.but_align { margin: 0 auto; width: 244px; }
.but_align2 { margin: 0 auto; width: 266px; }
.but_align3 { margin: 0 auto; width: 305px; }

.but_casual .go1 a,
.but_casual .go2 a,
.but_casual .go3 a {
  display: block;
  float: left;
  width: 122px;
  height: 41px;
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 auto;
}
.but_casual .go1 a { background-image: url(images/go_01.png); }
.but_casual .go2 a { background-image: url(images/go_02.png); }
.but_casual .go3 a { background-image: url(images/go_03.png); }
.but_casual .go1 a:hover,
.but_casual .go2 a:hover,
.but_casual .go3 a:hover { background-position: 0px -41px; }

.but_casual .golist a,
.but_casual .golist2 a {
  display: block;
  height: 41px;
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 auto;
}
.but_casual .golist a { width: 207px; background-image: url(images/go_list.png); }
.but_casual .golist2 a { width: 174px; background-image: url(images/go_list2.png); }
.but_casual .golist a:hover,
.but_casual .golist2 a:hover { background-position: 0px -41px; }

.but_casual .go7771 a,
.but_casual .go7772 a {
  display: block;
  float: left;
  height: 41px;
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 auto;
}
.but_casual .go7771 a { width: 162px; background-image: url(images/go_7771.png); }
.but_casual .go7772 a { width: 142px; background-image: url(images/go_7772.png); }
.but_casual .go7771 a:hover,
.but_casual .go7772 a:hover { background-position: 0px -41px; }

.clear { clear: both; }

.bottom {
  height: 90px;
  margin-right: auto;
  margin-left: auto;
  background-image: url(images/content_bottom.png);
  background-size: auto;
  background-position: top center;
  background-repeat: no-repeat;
}

.tb_stxt {
  color: #888;
  font-size: 12px;
  line-height: 1.8em;
}

/* Decorative text styles (kept) */
.gradient-text {
  font-size: 50px;
  font-weight: bolder;
  text-align: center;
  color: rgb(255, 0, 0);
  background-clip: text;
  text-shadow: 2px 2px 1px rgba(128, 128, 128, 0.552);
  padding: 10px;
}

.gradient-text2 {
  margin: 0;
  text-align: center;
  font: bold 60px / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ff2f2f;
  text-shadow: 1px 1px 0 #9b0000, 0 1px 0 #d40000, 0 2px 0 #b10202, 0 3px 0 #940000,
               0 4px 0 #b60000, 0 5px 0 #7a0000, 0 6px 1px rgba(0, 0, 0, 0.1),
               0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
               0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
               0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}