:root {
      --navy: #254763;
      --blue: #648fa9;
      --sea: #dcebf1;
      --cream: #faf8f3;
      --gold: #c5a66a;
    }

    * {
      box-sizing: border-box;
    }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--navy);
  font-family: "Microsoft JhengHei", sans-serif;
}

main {
  flex: 1;
  width: 100%;
  max-width: 1050px;
  margin: 50px auto;
  padding: 0 20px;
}

    header {
      padding: 40px 24px;
      text-align: center;
      background: linear-gradient(
        180deg, #edf5f8, #dcebf1
      );
      border-bottom: 2px solid var(--gold);
    }

    header h1 {
      margin: 0;
      font-size: 32px;
      letter-spacing: 4px;
    }

    header p {
      margin-bottom: 0;
      letter-spacing: 2px;
      color: #607e91;
    }

    .welcome {
      text-align: center;
      margin-bottom: 35px;
    }

    .welcome h2 {
      font-size: 25px;
    }

    .menu {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .card {
      padding: 35px 20px;
      text-align: center;
      background: white;
      border: 1px solid var(--gold);
      border-radius: 10px;
      box-shadow: 0 5px 15px #2547630c;
    }

    .card h3 {
      font-size: 23px;
      margin: 10px 0;
    }

    .card p {
      color: #748996;
      font-size: 14px;
    }

    .card .symbol {
      font-size: 35px;
    }

    footer {
      margin-top: 80px;
      padding: 35px 20px;
      text-align: center;
      background: var(--sea);
      color: var(--navy);
      border-top: 1px solid var(--gold);
    }

    @media (max-width: 650px) {
      header h1 {
        font-size: 24px;
      }

      .menu {
        grid-template-columns: 1fr;
      }

      main {
        margin-top: 30px;
      }
    }

/* 每日收益結算 */

#income-section,
#lottery-section,
#history-section {
  margin-bottom: 40px;
  padding: 28px;
  background: white;
  border: 1px solid var(--gold);
  border-radius: 10px;
}

#income-section h2 {
  margin-top: 0;
}

.income-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 90px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5edf1;
}

.income-row input {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-size: 16px;
  text-align: center;
}

@media (max-width: 600px) {
#income-section,
#lottery-section,
#history-section {
  padding: 16px;
}

  .income-row {
    grid-template-columns: minmax(0, 1fr) 85px 65px;
    gap: 6px;
    font-size: 12px;
  }
}

/* ⚓ 儲存結算按鈕 */
#save-settlement-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--navy);
  color: white;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

#save-settlement-btn:hover {
  background: var(--blue);
}

/* ===== 頁面切換 ===== */

#income-section,
#lottery-section,
#history-section {
  display: none;
}

#home-section {
  display: block;
}

/* 首頁功能卡片互動效果 */

.menu .card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.menu .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px #25476320;
}

/* ===== 返回首頁按鈕 ===== */

.back-home {
  display: inline-block;
  margin-bottom: 24px;
  padding: 10px 20px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.back-home:hover {
  background: var(--sea);
  transform: translateX(-3px);
}

.back-home:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ===== 薪資分配人數選單 ===== */

#salary-count {
  padding: 9px 14px;
  min-width: 100px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

#salary-count:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ===== 薪資分配結果 ===== */

#income-total {
  font-size: 24px;
  font-weight: bold;
  color: var(--blue);
}

#salary-section {
  margin-top: 28px;
  padding: 24px;
  background: #f5f9fb;
  border: 1px solid #dcebf1;
  border-radius: 10px;
}

#salary-section h3 {
  margin-top: 0;
  color: var(--navy);
}

#salary-members {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

#salary-remainder {
  font-size: 18px;
  font-weight: bold;
  color: var(--blue);
}

@media (max-width: 600px) {
  #salary-section {
    padding: 16px;
  }
}
/* 道具圖示與名稱 */
.income-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.income-item-label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.income-item-icon {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
  clip-path: inset(2px round 5px);
}

@media (max-width: 600px) {
  .income-item-label {
    gap: 6px;
  }

  .income-item-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}

/* ===== 物品抽籤 ===== */

.lottery-panel {
  margin-top: 20px;
  padding: 20px;
  background: #f5f9fb;
  border: 1px solid var(--sea);
  border-radius: 10px;
}

.lottery-panel h3 {
  margin-top: 0;
}

.lottery-panel label {
  display: block;
  margin: 14px 0 8px;
}

.lottery-panel input,
.lottery-panel textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font: inherit;
}

.lottery-panel textarea {
  resize: vertical;
  line-height: 1.7;
}

.lottery-panel button {
  margin-top: 12px;
  padding: 10px 16px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

.lottery-panel button:hover:not(:disabled) {
  background: var(--sea);
}

.lottery-panel button:disabled {
  opacity: 0.5;
  cursor: default;
}

.lottery-panel :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

#lottery-draw {
  background: var(--navy);
  color: white;
}

#lottery-draw:hover:not(:disabled) {
  background: var(--blue);
}

#lottery-message {
  font-weight: bold;
  line-height: 1.7;
}

#lottery-prizes,
#lottery-results {
  padding-left: 24px;
  line-height: 1.8;
}

.lottery-panel p,
.lottery-panel li {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .lottery-panel {
    padding: 16px;
  }

  #lottery-draw,
  #lottery-reset {
    display: block;
    width: 100%;
  }
}

/* ===== 抽籤動畫 ===== */

#lottery-animation {
  max-width: 100%;
  padding: 9px 12px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font: inherit;
}

#lottery-stage {
  min-height: 150px;
  padding: 12px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--sea);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.lottery-ticker {
  max-width: 100%;
  font-size: 28px;
  text-align: center;
}

.lottery-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  min-height: 100px;
  padding: 8px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: #f5f9fb;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background 0.15s, color 0.15s;
}

.lottery-card.is-active {
  background: var(--navy);
  color: white;
}

/* ===== 抽籤頁：左右分欄 ===== */

.lottery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  gap: 20px;
  margin-top: 20px;
}

.lottery-settings,
.lottery-main {
  min-width: 0;
}

.lottery-settings > summary {
  padding: 10px 0;
  font-weight: bold;
}

.lottery-settings summary {
  cursor: pointer;
}

.lottery-settings > .lottery-panel {
  margin-top: 12px;
  padding: 16px;
}

.lottery-roster-editor > summary {
  color: var(--navy);
}

#lottery-roster-status {
  margin-bottom: 0;
  color: #607e91;
  font-size: 14px;
  line-height: 1.7;
}

.lottery-prize-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 10px;
}

.lottery-prize-fields > div {
  min-width: 0;
}

.lottery-main {
  margin-top: 0;
}

.lottery-animation-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.lottery-animation-picker h3 {
  flex: 1 1 auto;
  margin: 0;
}

.lottery-animation-picker label {
  margin: 0;
}

.lottery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lottery-actions button {
  margin-top: 0;
}

.lottery-result-area {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sea);
}

.lottery-result-area h3 {
  margin-bottom: 8px;
}

#lottery-results {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .lottery-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .lottery-main {
    padding: 16px;
  }
}

/* ===== 首頁四格與摸魚區 ===== */

#games-section {
  display: none;
  padding: 28px;
  background: white;
  border: 1px solid var(--gold);
  border-radius: 10px;
}

.games-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.games-menu button {
  flex: 0 1 auto;
  padding: 10px 16px;
  background: #f5f9fb;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font: inherit;
}

@media (max-width: 650px) {
  #games-section {
    padding: 16px;
  }
}

/* ===== 貓餅小拉霸 ===== */

#slot-game {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 24px 16px;
  background: #f5f9fb;
  border: 1px solid var(--gold);
  border-radius: 12px;
  text-align: center;
}

.slot-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 390px;
  margin: 24px auto;
}

.slot-reel {
  aspect-ratio: 1;
  overflow: hidden;
  background: white;
  border: none;
  border-radius: 12px;
}

.slot-reel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(3px round 8px);
}

#slot-spin-btn {
  padding: 12px 32px;
  background: var(--navy);
  color: white;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

#slot-spin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

#slot-message {
  min-height: 48px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .slot-reels {
    gap: 6px;
  }
}

/* 拉霸慶祝效果 */

.slot-confetti {
  position: absolute;
  top: 45px;
  font-size: 24px;
  pointer-events: none;
}

/* ===== 記憶點點名 ===== */

#memory-game {
  margin-top: 16px;
  padding: 24px 16px;
  background: #f5f9fb;
  border: 1px solid var(--gold);
  border-radius: 12px;
  text-align: center;
}

.memory-score {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 20px 0;
}

#memory-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 460px;
  margin: 24px auto;
}

.memory-pet {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  padding: 4px;
  background: white;
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.memory-pet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
  clip-path: inset(3px round 7px);
}

.memory-pet.is-lit {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px #c5a66a55;
  transform: scale(1.06);
}

.memory-pet:disabled {
  cursor: default;
}

.memory-pet:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

#memory-start-btn {
  padding: 12px 28px;
  background: var(--navy);
  color: white;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

#memory-start-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

#memory-message {
  min-height: 48px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  #memory-board {
    gap: 8px;
  }

  .memory-pet {
    padding: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-pet.is-lit {
    transform: none;
  }
}

/* ===== 遊戲選單改為橫向頁籤 ===== */

.games-menu button[aria-expanded="true"] {
  background: var(--navy);
  color: white;
}

.games-menu button:disabled {
  opacity: 0.5;
}

@media (max-width: 600px) {
  .games-menu {
    gap: 6px;
  }

  .games-menu button {
    flex: 1 1 100px;
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* ===== 寵物翻牌配對 ===== */

#pairs-game {
  margin-top: 16px;
  padding: 24px 16px;
  background: #f5f9fb;
  border: 1px solid var(--gold);
  border-radius: 12px;
  text-align: center;
}

.pairs-controls,
.pairs-score {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 18px 0;
}

.pairs-controls select,
.pairs-controls button {
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 7px;
  font: inherit;
}

.pairs-controls select {
  background: white;
  color: var(--navy);
}

.pairs-controls button {
  background: var(--navy);
  color: white;
  cursor: pointer;
}

.pairs-controls button:disabled {
  opacity: 0.6;
  cursor: default;
}

#pairs-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  margin: 24px auto;
}

#pairs-board.pairs-hard {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 660px;
}

.pairs-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  perspective: 600px;
  cursor: pointer;
}

.pairs-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s;
}

.pairs-card.is-open .pairs-card-inner,
.pairs-card.is-matched .pairs-card-inner {
  transform: rotateY(180deg);
}

.pairs-card-back,
.pairs-card-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 10px;
  backface-visibility: hidden;
}

.pairs-card-back {
  background: var(--navy);
  color: white;
  font-size: 28px;
}

.pairs-card-front {
  background: white;
  transform: rotateY(180deg);
}

.pairs-card-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(3px round 7px);
}

.pairs-card.is-matched {
  opacity: 0.65;
}

.pairs-card:disabled {
  cursor: default;
}

.pairs-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

#pairs-message {
  min-height: 48px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  #pairs-board,
  #pairs-board.pairs-hard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #pairs-game {
    padding: 20px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pairs-card-inner {
    transition: none;
  }
}

/* ===== 收益日曆 ===== */

.calendar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 24px 0 18px;
}

.calendar-nav h3 {
  margin: 0;
  min-width: 150px;
  text-align: center;
}

.calendar-nav button {
  width: 40px;
  height: 40px;
  padding: 0;
  background: #f5f9fb;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 7px;
  font-size: 26px;
  cursor: pointer;
}

.calendar-weekdays,
#income-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar-weekdays {
  margin-bottom: 8px;
  text-align: center;
  color: #607e91;
}

.calendar-weekdays span {
  padding: 8px 0;
}

.calendar-day {
  min-width: 0;
  min-height: 76px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: white;
  color: var(--navy);
  border: 1px solid #e5edf1;
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
}

.calendar-day.has-record {
  background: #edf5f8;
}

.calendar-day.is-today {
  border-color: var(--gold);
}

.calendar-day[aria-pressed="true"] {
  background: var(--navy);
  color: white;
}

.calendar-day-number {
  font-weight: bold;
}

.calendar-day-amount {
  font-size: 14px;
  white-space: nowrap;
}

.calendar-day-dot {
  display: none;
}

.calendar-note {
  margin: 14px 0;
  color: #607e91;
  font-size: 13px;
}

.calendar-details {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--sea);
}

#calendar-selected-date {
  margin: 0;
}

#calendar-day-total {
  color: #607e91;
}

#settlement-history .calendar-record {
  margin-top: 12px;
  padding: 14px;
  background: #f5f9fb;
  border: 1px solid var(--sea);
  border-radius: 8px;
}

.calendar-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-record-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}

.calendar-record-values dt {
  color: #607e91;
  font-size: 13px;
}

.calendar-record-values dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.calendar-nav button:focus-visible,
.calendar-day:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .calendar-nav {
    gap: 12px;
  }

  .calendar-weekdays,
  #income-calendar {
    gap: 3px;
  }

  .calendar-day {
    min-height: 48px;
    padding: 6px 2px;
  }

  .calendar-day-amount {
    display: none;
  }

  .calendar-record-values {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calendar-record-values > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .calendar-record-values dd {
    margin: 0;
  }
}

/* 結算資訊統一橫向排列 */
#settlement-history .calendar-record {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
  align-items: center;
  gap: 20px;
}

.calendar-record-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
}

.calendar-record-header strong::before {
  content: "總收益";
  display: block;
  margin-bottom: 4px;
  color: #607e91;
  font-size: 13px;
  font-weight: normal;
}

.calendar-record-values {
  margin: 0;
}

@media (max-width: 600px) {
  #settlement-history .calendar-record {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* 寵物格子：淡奶茶底與柔和陰影 */
.slot-reel,
.memory-pet,
.pairs-card-front {
  background: #eee4d3;
  box-shadow: 0 2px 5px #25476318;
}

.memory-pet.is-lit {
  background: #ffe3a3;
  box-shadow: 0 0 0 4px #c5a66a55;
}

/* 手機抽籤卡牌縮小，三張並排 */
@media (max-width: 600px) {
  .lottery-card {
    width: 70px;
    min-height: 85px;
    padding: 6px;
  }

  #lottery-stage {
    gap: 6px;
  }
}

/* ===== 共用記帳解鎖 ===== */

#ledger-access {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sea);
}

#ledger-access p {
  font-size: 14px;
  line-height: 1.7;
}

#ledger-access label {
  display: block;
  margin: 14px 0 8px;
}

.ledger-unlock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#ledger-passcode {
  flex: 1 1 180px;
  min-width: 0;
  width: 100%;
}

#ledger-passcode,
#ledger-recorder {
  max-width: 100%;
  padding: 10px 12px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font: inherit;
}

#ledger-unlock-btn,
#ledger-lock-btn {
  padding: 10px 16px;
  background: var(--navy);
  color: white;
  border: 1px solid var(--gold);
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

#ledger-access button:disabled,
#ledger-recorder:disabled {
  opacity: 0.55;
  cursor: default;
}

#ledger-access :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}