/* 原版介面的細節精修：只調整節奏、手機排版與互動回饋。 */
:root {
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-press-duration: 140ms;
}

/* Desktop spacing rhythm */
.hero {
  padding: 40px 0 76px;
}

.hero-stage {
  gap: clamp(30px, 3.6vw, 42px);
  padding: clamp(42px, 4.2vw, 52px);
}

.intro {
  max-width: 610px;
  margin: 22px 0 0;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.75;
}

.query-form > label {
  margin-top: 29px;
}

.guide-copy {
  padding: 18px 20px 21px;
}

.help-zone {
  margin-top: 16px;
}

.daily-tag-guide {
  gap: 20px;
  padding: 24px;
}

.result-shell {
  padding: 64px 0 88px;
}

.section-heading {
  margin-bottom: 24px;
}

/* Compact presence status: one calm signal, no decorative pulse. */
.online-users {
  min-height: 34px;
  gap: 6px;
  padding: 0 11px 0 10px;
  overflow: visible;
  border-color: rgba(226, 192, 122, 0.22);
  color: var(--muted-strong);
  background: rgba(17, 22, 27, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.online-users::after {
  display: none;
}

.online-signal,
.online-users[data-state="ready"] .online-signal {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 0;
  background: transparent;
}

.online-signal i,
.online-users[data-state="ready"] .online-signal i {
  display: block;
  width: 7px;
  height: 7px;
  background: #78c96b;
  box-shadow: 0 0 0 3px rgba(120, 201, 107, 0.1);
  animation: none;
}

.online-users[data-state="unavailable"] .online-signal i {
  background: var(--muted);
  box-shadow: none;
}

.online-copy {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
}

.online-users strong {
  min-width: 1ch;
  font-size: 13px;
  font-weight: 760;
}

.online-unit {
  margin-left: -3px;
  font-size: 10px;
}

/* Fixed utility appears only after the first viewport has been passed. */
.back-to-top {
  position: fixed;
  z-index: 18;
  right: max(28px, calc(env(safe-area-inset-right) + 18px));
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 22px));
  display: grid;
  width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(226, 192, 122, 0.58);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  color: #f7ead0;
  background: linear-gradient(145deg, rgba(70, 59, 38, 0.96), rgba(25, 29, 35, 0.96));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.38),
    0 0 0 3px rgba(226, 192, 122, 0.08);
  cursor: pointer;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 180ms var(--motion-ease-out),
    transform 180ms var(--motion-ease-out),
    visibility 180ms,
    border-color 140ms ease,
    background-color 140ms ease;
}

.back-to-top[data-visible] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top span {
  font-size: 22px;
  font-weight: 760;
  line-height: 1;
  transform: translateY(-1px);
}

.back-to-top:active {
  transform: translateY(0) scale(0.94);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    border-color: var(--brand-strong);
    background: linear-gradient(145deg, rgba(78, 65, 40, 0.98), rgba(30, 35, 42, 0.98));
  }
}

/* Immediate, interruptible feedback for pressable controls. */
.pwa-install-button,
.input-row > button[type="submit"],
.copy-button,
.share-button,
.subheading a,
.tag-toggle,
.pwa-dialog-heading button,
.pwa-dialog-confirm,
.rtp-tutorial summary {
  touch-action: manipulation;
  transition-timing-function: var(--motion-ease-out);
}

.pwa-install-button,
.input-row > button[type="submit"],
.copy-button,
.share-button,
.subheading a,
.tag-toggle,
.pwa-dialog-heading button,
.pwa-dialog-confirm {
  transition-duration: var(--motion-press-duration);
  transition-property: transform, border-color, background-color, color, opacity;
}

.pwa-install-button:active,
.input-row button:active:not(:disabled),
.input-row > button[type="submit"]:active:not(:disabled),
.copy-button:active,
.share-button:active:not(:disabled),
.subheading a:active,
.tag-toggle:active,
.pwa-dialog-heading button:active,
.pwa-dialog-confirm:active {
  transform: scale(0.97);
}

.rtp-tutorial summary:active {
  transform: scale(0.995);
}

/* Entering content gets a short bridge instead of appearing abruptly. */
.result-shell:not(.is-hidden) {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms var(--motion-ease-out),
    transform 180ms var(--motion-ease-out);
}

@starting-style {
  .result-shell:not(.is-hidden) {
    opacity: 0;
    transform: translateY(6px);
  }
}

.rtp-tutorial[open] > .rtp-tutorial-content {
  animation: disclosure-enter 180ms var(--motion-ease-out) both;
}

.pwa-install-dialog[open] {
  animation: dialog-enter 220ms var(--motion-ease-out) both;
}

.pwa-install-dialog[open]::backdrop {
  animation: backdrop-enter 180ms var(--motion-ease-out) both;
}

.share-preview-dialog[open] {
  animation: share-preview-enter 220ms var(--motion-ease-out) both;
}

.share-preview-dialog[open]::backdrop {
  animation: backdrop-enter 180ms var(--motion-ease-out) both;
}

@keyframes disclosure-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes share-preview-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Existing hover styling is kept for mouse users and neutralized on touch. */
@media (hover: none) {
  .pwa-install-button:hover {
    background: var(--brand-soft);
    transform: none;
  }

  .input-row > button[type="submit"]:hover:not(:disabled) {
    background: var(--brand-strong);
    transform: none;
  }

  .copy-button:hover,
  .subheading a:hover {
    border-color: var(--line-strong);
    color: var(--muted-strong);
    transform: none;
  }

  .tag-history-item:hover,
  .round-card:hover {
    border-color: var(--line);
    transform: none;
  }

  .pwa-install-button:active,
  .input-row > button[type="submit"]:active:not(:disabled),
  .copy-button:active,
  .subheading a:active,
  .tag-toggle:active,
  .pwa-dialog-heading button:active,
  .pwa-dialog-confirm:active {
    transform: scale(0.97);
  }
}

@media (max-width: 980px) {
  .hero-stage {
    padding: 38px;
  }
}

@media (max-width: 820px) {
  .hero-stage {
    gap: 24px;
  }
}

.mobile-section-nav {
  display: none;
}

@media (max-width: 720px) {
  body.mobile-panels-ready {
    min-height: 100dvh;
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body.mobile-panels-ready main > .hero > .hero-stage,
  body.mobile-panels-ready main > .hero > .help-zone,
  body.mobile-panels-ready main > .result-skeleton,
  body.mobile-panels-ready main > .result-shell,
  body.mobile-panels-ready main > .tag-history-section,
  body.mobile-panels-ready main > .empty-state {
    display: none !important;
  }

  body.mobile-panels-ready[data-mobile-panel="query"] main > .hero > .hero-stage {
    display: grid !important;
  }

  body.mobile-panels-ready[data-mobile-panel="guide"] main > .hero > .help-zone {
    display: block !important;
  }

  body.mobile-panels-ready[data-mobile-panel="result"] main > .result-skeleton:not(.is-hidden),
  body.mobile-panels-ready.has-query-result[data-mobile-panel="result"] main > .result-shell,
  body.mobile-panels-ready.has-query-result[data-mobile-panel="replay"] main > .result-shell {
    display: block !important;
  }

  body.mobile-panels-ready[data-mobile-panel="result"] .result-shell > .replay-block {
    display: none !important;
  }

  body.mobile-panels-ready[data-mobile-panel="replay"] .result-shell > :not(.replay-block) {
    display: none !important;
  }

  body.mobile-panels-ready[data-mobile-panel="replay"] .result-shell > .replay-block {
    display: block !important;
    margin-top: 0;
  }

  body.mobile-panels-ready[data-mobile-panel="tags"] main > .tag-history-section {
    display: block !important;
  }

  body.mobile-panels-ready main > .hero {
    padding: 18px 0 34px;
  }

  body.mobile-panels-ready[data-mobile-panel="guide"] main > .hero > .help-zone {
    margin-top: 0;
  }

  body.mobile-panels-ready main > .result-shell,
  body.mobile-panels-ready main > .tag-history-section {
    min-height: calc(100dvh - 144px);
    padding: 26px 0 42px;
    border-top: 0;
  }

  body.mobile-panels-ready footer,
  body.mobile-panels-ready .back-to-top {
    display: none;
  }

  .mobile-section-nav {
    --nav-shift: 0%;
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    width: min(calc(100% - 28px), 380px);
    align-items: center;
    justify-content: space-between;
    isolation: isolate;
    overflow: hidden;
    padding: 4px;
    transform: translate3d(-50%, 0, 0);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background:
      linear-gradient(115deg, rgba(34, 40, 46, 0.92), rgba(14, 18, 22, 0.88) 52%, rgba(42, 35, 25, 0.9));
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.45),
      0 3px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
  }

  .mobile-section-nav-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 5);
    transform: translate3d(var(--nav-shift), 0, 0);
    overflow: hidden;
    border: 1px solid rgba(226, 192, 122, 0.34);
    border-radius: 999px;
    background:
      radial-gradient(circle at 38% 8%, rgba(255, 255, 255, 0.13), transparent 42%),
      linear-gradient(145deg, rgba(226, 192, 122, 0.2), rgba(226, 192, 122, 0.08));
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
    pointer-events: none;
    transition: transform 220ms var(--motion-ease-out);
    will-change: transform;
  }

  .mobile-section-nav-indicator::after {
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.14) 50%, transparent 76%);
    content: "";
  }

  .mobile-section-nav.is-switching .mobile-section-nav-indicator::after {
    transform: translateX(120%);
    transition: transform 220ms var(--motion-ease-out);
  }

  .mobile-section-nav button {
    position: relative;
    z-index: 1;
    display: flex;
    height: 44px;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
    border: 0;
    border-radius: 999px;
    color: rgba(188, 198, 204, 0.62);
    background: transparent;
    cursor: pointer;
    transition: color 160ms ease, transform 140ms var(--motion-ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-section-nav button:active {
    transform: scale(0.92);
  }

  .mobile-section-nav button b {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
  }

  .mobile-section-nav button b svg {
    display: block;
    width: 19px;
    height: 19px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-width 160ms ease;
  }

  .mobile-section-nav button span {
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-section-nav button.is-active {
    color: var(--brand-strong);
  }

  .mobile-section-nav button.is-active b {
    transform: scale(1.04);
    transition: transform 180ms var(--motion-ease-out);
  }

  .mobile-section-nav button.is-active b svg {
    stroke-width: 2;
  }

  html.is-standalone body.mobile-panels-ready {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  html.is-standalone .mobile-section-nav {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px));
  }
}

@media (max-width: 620px) {
  .site-header {
    height: auto;
    min-height: 60px;
    padding-top: env(safe-area-inset-top);
  }

  .site-header-inner {
    min-height: 60px;
  }

  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .brand > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    flex: none;
    gap: 6px;
  }

  .header-ext-btn {
    min-height: 36px;
    padding-inline: 11px;
  }

  .pwa-install-button {
    min-height: 42px;
    padding-inline: 10px;
  }

  .online-users {
    min-height: 36px;
    padding-inline: 9px;
  }

  .online-signal,
  .online-users[data-state="ready"] .online-signal {
    width: 7px;
    height: 7px;
    flex-basis: 7px;
  }

  .back-to-top {
    right: max(22px, calc(env(safe-area-inset-right) + 14px));
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px));
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .hero {
    padding: 14px 0 46px;
  }

  .hero-stage {
    gap: 22px;
    padding: 24px 16px 16px;
  }

  .eyebrow {
    margin-bottom: 13px;
  }

  h1 {
    font-size: clamp(38px, 11.5vw, 50px);
    line-height: 1.03;
  }

  .intro {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.72;
  }

  .query-form > label {
    margin: 25px 0 9px;
  }

  .input-row input {
    min-height: 48px;
  }

  .form-footer {
    min-height: 0;
    padding-top: 8px;
  }

  .spin-guide figure {
    padding: 6px 6px 0;
  }

  .guide-copy {
    padding: 15px 16px 17px;
  }

  .daily-tag-guide {
    gap: 16px;
    padding: 17px;
  }

  .tag-disclaimer {
    padding: 13px 16px;
  }

  .result-shell {
    padding: 44px 0 64px;
  }

  .section-heading,
  .subheading {
    gap: 12px;
  }

  .section-heading {
    margin-bottom: 18px;
  }

  .copy-button,
  .subheading a,
  .tag-toggle {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .result-grid article {
    padding: 16px;
  }

  .tag-guide-block {
    margin-top: 36px;
  }

  .rounds-block,
  .replay-block {
    margin-top: 40px;
  }

  .round-card {
    min-height: 76px;
  }

  .tag-history-section {
    padding: 44px 0 52px;
  }

  .pwa-dialog-heading button {
    width: 44px;
    height: 44px;
  }
}

/* Compact partner promotion: the full offer stays readable without a long sentence. */
.assistant-promo-button {
  position: relative;
  display: inline-flex;
  height: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 7px 0 10px;
  border: 1px solid rgba(226, 192, 122, 0.48);
  border-radius: 999px;
  color: #f7e7c4;
  background:
    linear-gradient(135deg, rgba(226, 192, 122, 0.18), rgba(226, 192, 122, 0.045)),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 8px 22px rgba(0, 0, 0, 0.14);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 140ms var(--motion-ease-out),
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.assistant-promo-icon {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: #e2c07a;
  stroke: currentColor;
}

.assistant-promo-label,
.assistant-promo-label > span {
  display: block;
  line-height: 1;
}

.assistant-promo-label .is-short {
  display: none;
}

.assistant-promo-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 6px;
  border: 1px solid rgba(255, 238, 196, 0.28);
  border-radius: 999px;
  color: #18130a;
  background: #e2c07a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  font-family: "DM Sans", "Noto Sans TC", sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.assistant-promo-button:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .assistant-promo-button:hover {
    border-color: rgba(226, 192, 122, 0.72);
    background:
      linear-gradient(135deg, rgba(226, 192, 122, 0.25), rgba(226, 192, 122, 0.075)),
      color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 9px 26px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
  }
}

/* Independent gold actions: equal geometry and optically centered icons. */
.header-actions > :is(.header-ext-btn, .pwa-install-button) {
  display: inline-flex;
  width: auto;
  min-width: 64px;
  height: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(226, 192, 122, 0.38);
  border-radius: 999px;
  color: #f3d99e;
  background: linear-gradient(135deg, rgba(226, 192, 122, 0.13), rgba(226, 192, 122, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 7px 20px rgba(0, 0, 0, 0.12);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 140ms var(--motion-ease-out),
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.header-actions > :is(.header-ext-btn, .pwa-install-button) > span {
  display: block;
  line-height: 1;
}

.header-actions > :is(.header-ext-btn, .pwa-install-button) :is(.ext-arrow, .pwa-btn-icon) {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin: 0;
  color: #e2c07a;
  stroke: currentColor;
  transform: none;
}

.header-actions > :is(.header-ext-btn, .pwa-install-button):active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .header-actions > :is(.header-ext-btn, .pwa-install-button):hover {
    border-color: rgba(226, 192, 122, 0.62);
    color: #f7e7c4;
    background: linear-gradient(135deg, rgba(226, 192, 122, 0.2), rgba(226, 192, 122, 0.07));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
  }
}

/* Theme picker: compact, anchored to its trigger, and consistent across mobile/PWA. */
.theme-control {
  position: relative;
  flex: none;
}

.theme-trigger {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  cursor: pointer;
  transition:
    transform 140ms var(--motion-ease-out),
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.theme-trigger svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display-trigger-label {
  font-family: "DM Sans", "Noto Sans TC", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.theme-trigger[aria-expanded="true"] {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: var(--brand-soft);
}

.theme-trigger:active {
  transform: scale(0.96);
}

.theme-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  width: 268px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  transform-origin: calc(100% - 18px) top;
  backdrop-filter: blur(22px);
}

.theme-popover:not([hidden]) {
  opacity: 1;
  transform: scale(1);
  transition: opacity 150ms var(--motion-ease-out), transform 150ms var(--motion-ease-out);
  @starting-style {
    opacity: 0;
    transform: scale(0.97);
  }
}

.theme-popover-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px 10px;
}

.theme-popover-heading span {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.theme-popover-heading small {
  color: var(--muted);
  font-size: 9px;
}

.display-settings-label {
  padding: 3px 9px 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.display-settings-label.is-theme-label {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.font-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0 3px 3px;
}

.font-size-options > button {
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  transition:
    transform 140ms var(--motion-ease-out),
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.font-size-options > button:nth-child(2) {
  font-size: 13px;
}

.font-size-options > button:nth-child(3) {
  font-size: 15px;
}

.font-size-options > button[aria-pressed="true"] {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-line) 42%, transparent);
}

.font-size-options > button:active {
  transform: scale(0.97);
}

.theme-popover > button {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted-strong);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: transform 140ms var(--motion-ease-out), background-color 150ms ease, border-color 150ms ease;
}

.theme-popover > button[aria-checked="true"] {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.theme-popover > button:active {
  transform: scale(0.98);
}

.theme-popover > button > span {
  display: grid;
  gap: 2px;
}

.theme-popover b {
  color: var(--text);
  font-size: 12px;
}

.theme-popover small {
  color: var(--muted);
  font-size: 9px;
}

.theme-popover > button > svg {
  width: 17px;
  height: 17px;
  opacity: 0;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-popover > button[aria-checked="true"] > svg {
  opacity: 1;
}

.theme-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.035);
}

.theme-swatch.is-midnight { background: #090c0f; }
.theme-swatch.is-oled { background: #000; }
.theme-swatch.is-light { border-color: rgba(28, 34, 39, 0.18); background: #f2efe9; }

@media (hover: hover) and (pointer: fine) {
  .theme-trigger:hover {
    border-color: var(--brand-line);
    color: var(--brand-strong);
  }

  .theme-popover > button:hover {
    background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  }

  .font-size-options > button:hover {
    border-color: var(--brand-line);
    color: var(--text);
  }
}

/* 閱讀字體模式：保留數值卡片與版面比例，只放大容易看不清楚的說明內容。 */
html[data-font-size="large"] {
  --access-reading-size: 14px;
  --access-small-size: 12px;
  --access-title-size: 15px;
}

html[data-font-size="extra-large"] {
  --access-reading-size: 16px;
  --access-small-size: 14px;
  --access-title-size: 17px;
}

html[data-font-size]:not([data-font-size="standard"]) main :where(p, li, label, figcaption) {
  font-size: var(--access-reading-size) !important;
  line-height: 1.72 !important;
}

html[data-font-size]:not([data-font-size="standard"]) main :where(
  small,
  .eyebrow,
  .form-footer,
  .guide-copy > span,
  .daily-check-flow span,
  .tag-verdict > span,
  .tutorial-section-heading > span,
  .tag-history-note,
  .round-meta
) {
  font-size: var(--access-small-size) !important;
  line-height: 1.65 !important;
}

html[data-font-size]:not([data-font-size="standard"]) main :where(
  .daily-check-flow strong,
  .tag-verdict strong,
  .tag-disclaimer strong,
  .rtp-tutorial summary strong,
  .mode-guide-grid strong,
  .rtp-tutorial-points strong,
  .rtp-scale strong,
  .rtp-scale em,
  .tag-guide-card strong
) {
  font-size: var(--access-title-size) !important;
  line-height: 1.5 !important;
}

/* Semantic result colors never inherit a theme accent. */
.tag-tok.is-very-soft {
  color: var(--semantic-very-soft) !important;
}

.tag-tok.is-prob {
  color: inherit !important;
}

.tag-tok.is-soft {
  color: var(--semantic-soft) !important;
}

.tag-tok.is-baseline {
  color: var(--semantic-baseline) !important;
}

.tag-tok.is-hard {
  color: var(--semantic-hard) !important;
}

.tag-tok.is-bite {
  color: var(--semantic-bite) !important;
}

.metric-card strong,
.tag-guide-card > div > span,
.water-temp-stats b,
.health-status-badge,
.tag-history-badge {
  font-variant-numeric: tabular-nums;
}

.win-card strong { color: var(--number-highlight); }
.free-game-card strong { color: var(--semantic-soft); }

.tag-guide-card.is-very-soft > div > span,
.tag-guide-card.is-watch > div > span,
.tag-summary.is-soft h4 {
  color: var(--semantic-very-soft);
}

.tag-guide-card.is-soft > div > span {
  color: var(--semantic-soft);
}

.tag-guide-card.is-hard > div > span,
.tag-summary.is-hard h4 {
  color: var(--semantic-hard);
}

.water-temp-stats .stat-item.is-soft b,
.water-temp-widget.is-soft .water-temp-label {
  color: var(--semantic-soft);
}

.water-temp-stats .stat-item.is-baseline b { color: var(--semantic-baseline); }
.water-temp-stats .stat-item.is-bite b,
.water-temp-widget.is-bite .water-temp-label { color: var(--semantic-bite); }

.water-gauge-seg.is-soft { background: var(--semantic-soft); }
.water-gauge-seg.is-baseline { background: var(--semantic-baseline); }
.water-gauge-seg.is-bite { background: var(--semantic-bite); }

.health-game-dot.is-very-soft { background: var(--semantic-very-soft); }
.health-game-dot.is-soft { background: var(--semantic-soft); }
.health-game-dot.is-baseline { background: var(--semantic-baseline); }
.health-game-dot.is-hard { background: var(--semantic-hard); }
.health-game-dot.is-bite { background: var(--semantic-bite); }

.health-status-badge.is-very-soft { background: var(--semantic-very-soft); }
.health-status-badge.is-soft { background: var(--semantic-soft); }
.health-status-badge.is-baseline { background: var(--semantic-baseline); }
.health-status-badge.is-hard { border-color: var(--semantic-hard); color: #fff; }
.health-status-badge.is-bite { background: var(--semantic-bite); }

.user-history-card.is-very-soft { border-left-color: var(--semantic-very-soft); }
.user-history-card.is-soft { border-left-color: var(--semantic-soft); }
.user-history-card.is-bite { border-left-color: var(--semantic-bite); }

html[data-theme="oled"] .online-users,
html[data-theme="light"] .online-users,
html[data-theme="oled"] .water-temp-widget,
html[data-theme="light"] .water-temp-widget,
html[data-theme="oled"] .user-history-card,
html[data-theme="light"] .user-history-card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

@media (max-width: 620px) {
  .site-header .brand > span {
    display: none;
  }

  .assistant-promo-button {
    height: 34px;
    min-height: 34px;
    gap: 4px;
    padding-inline: 7px 5px;
  }

  .assistant-promo-label .is-full {
    display: none;
  }

  .assistant-promo-label .is-short {
    display: block;
  }

  .assistant-promo-badge {
    min-height: 18px;
    padding-inline: 5px;
    font-size: 8px;
  }

  .assistant-promo-badge > span {
    display: none;
  }

  .header-actions > :is(.header-ext-btn, .pwa-install-button) {
    height: 34px;
    min-width: 60px;
    min-height: 34px;
    padding-inline: 9px;
  }

  .site-header:has(#pwa-install-button:not([hidden])) .brand > span {
    display: none;
  }

  .theme-trigger {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .theme-popover {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 58px);
    right: 14px;
    width: min(278px, calc(100vw - 28px));
    transform-origin: calc(100% - 72px) top;
  }
}

@media (max-width: 390px) {
  .header-ext-btn {
    width: auto;
    padding-inline: 8px;
    justify-content: center;
  }

  .header-ext-btn > span {
    display: inline;
  }
}

@media (max-width: 350px) {
  .brand > span {
    display: none;
  }

  .header-actions {
    gap: 3px;
  }

  .assistant-promo-button {
    padding-inline: 6px 4px;
  }

  .assistant-promo-label {
    display: none;
  }

  .header-actions > :is(.header-ext-btn, .pwa-install-button) {
    min-width: 50px;
    gap: 5px;
    padding-inline: 7px;
  }

  .online-users {
    gap: 4px;
    padding-inline: 7px;
  }

  .online-copy,
  .online-unit {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-popover:not([hidden]),
  .theme-trigger,
  .theme-popover > button {
    transition-duration: 0.01ms;
  }

  .font-size-options > button {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   霧灰白：完整日間介面
   不是替深色背景加一層灰，而是重新建立明亮表面、邊界與閱讀對比。
   -------------------------------------------------------------------------- */
html[data-theme="light"] body::before {
  background: linear-gradient(rgba(28, 34, 39, 0.028) 1px, transparent 1px);
}

html[data-theme="light"] .site-header {
  box-shadow: 0 1px 0 rgba(28, 34, 39, 0.04);
}

html[data-theme="light"] .brand-icon {
  border-color: var(--brand-line);
  box-shadow: 0 7px 20px rgba(35, 31, 24, 0.12);
}

html[data-theme="light"] :is(
  .hero-stage,
  .spin-guide,
  .daily-tag-guide,
  .rtp-tutorial,
  .result-grid article,
  .fg-prob-card,
  .tag-guide-card,
  .tag-guide-empty,
  .tag-summary,
  .rounds-block,
  .round-card,
  .replay-game-picker,
  .tag-history-group,
  .tag-history-item,
  .health-check-header,
  .health-input-item,
  .health-comparison-card,
  .user-history-card,
  .pwa-install-dialog,
  .share-preview-dialog
) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(35, 31, 24, 0.065);
}

html[data-theme="light"] .hero-stage {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 48%),
    var(--surface);
}

html[data-theme="light"] .hero-stage::after {
  border-color: rgba(128, 91, 28, 0.09);
  background: radial-gradient(circle, rgba(171, 126, 43, 0.09), transparent 68%);
}

html[data-theme="light"] :is(.input-row, .spin-guide img) {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  box-shadow: 0 10px 26px rgba(35, 31, 24, 0.07);
}

html[data-theme="light"] .input-row:focus-within {
  border-color: rgba(88, 117, 0, 0.58);
  box-shadow: 0 0 0 4px rgba(88, 117, 0, 0.08), 0 12px 28px rgba(35, 31, 24, 0.08);
}

html[data-theme="light"] .input-row input::placeholder,
html[data-theme="light"] .health-spin-input::placeholder {
  color: #899198;
}

html[data-theme="light"] :is(
  .input-row > button[type="submit"],
  .health-submit-btn,
  .btn-sub-action,
  .pwa-dialog-confirm
) {
  color: #fff;
  background: var(--accent);
  box-shadow: none;
}

html[data-theme="light"] :is(
  .input-row > button[type="submit"]:hover:not(:disabled),
  .health-submit-btn:hover,
  .user-history-load-btn:hover
) {
  color: #fff;
  background: var(--accent-strong);
}

html[data-theme="light"] :is(.tag-verdict, .tag-disclaimer) {
  background: rgba(255, 255, 255, 0.54);
}

html[data-theme="light"] .rtp-tutorial summary:hover,
html[data-theme="light"] .mode-tab:hover,
html[data-theme="light"] .health-tool-btn:hover,
html[data-theme="light"] .btn-text-action:hover {
  background: var(--surface-soft);
}

html[data-theme="light"] :is(
  .mode-guide-grid article,
  .game-tag-grid article,
  .rtp-tutorial-points article,
  .mixed-tag-values span,
  .tutorial-overview article,
  .tag-tutorial .rtp-scale,
  .tag-tutorial .tutorial-final-note
) {
  border-color: var(--line);
  background: var(--surface-raised);
}

html[data-theme="light"] .tag-card {
  border-color: rgba(88, 117, 0, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(88, 117, 0, 0.09), transparent 68%),
    var(--surface) !important;
}

html[data-theme="light"] :is(.tag-card strong, .tag-tok.is-keyword, .health-game-title, .health-tag-code) {
  color: var(--text) !important;
}

html[data-theme="light"] :is(.player-card p, .metric-card small, .round-meta) {
  color: var(--muted);
}

html[data-theme="light"] .player-card img {
  border-color: rgba(88, 117, 0, 0.22);
  box-shadow: 0 8px 24px rgba(35, 31, 24, 0.13);
}

html[data-theme="light"] .fg-prob-card {
  background:
    radial-gradient(ellipse at top left, rgba(0, 107, 145, 0.055), transparent 52%),
    var(--surface);
}

html[data-theme="light"] :is(.fg-prob-item, .health-trend) {
  border-color: var(--line);
  background: var(--surface-raised);
}

html[data-theme="light"] :is(.fg-prob-bar-wrap, .water-temp-gauge-multi) {
  background: rgba(28, 34, 39, 0.1);
  box-shadow: inset 0 1px 2px rgba(28, 34, 39, 0.08);
}

html[data-theme="light"] :is(.fg-custom-input-wrap, .batch-paste-box textarea, .health-spin-input) {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-raised);
}

html[data-theme="light"] :is(.water-temp-widget, .batch-paste-box, .user-history-card) {
  border-color: var(--line);
  background: rgba(250, 249, 246, 0.92);
  box-shadow: 0 8px 24px rgba(35, 31, 24, 0.05);
}

html[data-theme="light"] :is(.global-tag-total-badge, .stat-count-tag, .health-tool-btn, .btn-sub-action.is-cancel) {
  border-color: var(--line);
  color: var(--muted-strong);
  background: var(--surface-soft);
}

html[data-theme="light"] .water-temp-stats .stat-item.is-soft .stat-count-tag {
  border-color: rgba(80, 111, 0, 0.3);
  color: #415b00;
  background: rgba(80, 111, 0, 0.12);
}

html[data-theme="light"] .water-temp-stats .stat-item.is-baseline .stat-count-tag {
  border-color: rgba(136, 87, 0, 0.28);
  color: #744a00;
  background: rgba(136, 87, 0, 0.1);
}

html[data-theme="light"] .water-temp-stats .stat-item.is-bite .stat-count-tag {
  border-color: rgba(170, 23, 48, 0.28);
  color: #9b152c;
  background: rgba(170, 23, 48, 0.1);
}

html[data-theme="light"] .mode-tabs {
  border-color: var(--line);
  background: rgba(240, 237, 231, 0.88);
}

html[data-theme="light"] .mode-tab.is-active {
  color: var(--mode-active-text);
  background: var(--mode-active-bg);
  box-shadow:
    inset 0 0 0 1px var(--mode-active-border),
    var(--mode-active-shadow);
}

html[data-theme="light"] .mode-tab.is-active :is(.mode-tab-pill, .history-badge) {
  color: var(--mode-active-text);
  background: rgba(88, 117, 0, 0.09);
}

html[data-theme="light"] .input-tool-btn.is-clear {
  border-color: var(--line) !important;
  color: var(--muted) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="light"] .health-input-item:focus-within {
  border-color: var(--accent);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px rgba(88, 117, 0, 0.08);
}

html[data-theme="light"] .game-tag-name {
  color: var(--text);
}

html[data-theme="light"] .health-comparison-card:is(.is-very-soft, .is-soft, .is-baseline, .is-hard, .is-bite) {
  background: var(--surface);
}

html[data-theme="light"] .health-comparison-card.is-empty {
  border-color: var(--line);
  background: var(--surface-soft);
}

html[data-theme="light"] :is(.health-tag-console, .health-tag-console.is-empty, .user-history-tag-box) {
  border-color: var(--line);
  background: var(--surface-soft);
}

html[data-theme="light"] :is(
  .health-status-badge.is-very-soft,
  .health-status-badge.is-soft,
  .health-status-badge.is-baseline,
  .health-status-badge.is-bite
) {
  color: #fff;
  box-shadow: none;
}

html[data-theme="light"] .health-status-badge.is-special,
html[data-theme="light"] .health-status-badge.is-neutral {
  border-color: var(--line);
  color: var(--muted-strong);
  background: var(--surface-soft);
}

html[data-theme="light"] .health-card-view-btn {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-raised);
}

html[data-theme="light"] .health-card-view-btn:hover {
  color: #fff;
  background: var(--accent);
}

html[data-theme="light"] .rounds-block[open] {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

html[data-theme="light"] :is(.rounds-toggle-btn, .tag-history-toggle-hint) {
  border-color: var(--line);
  color: var(--muted-strong) !important;
  background: var(--surface-raised);
}

html[data-theme="light"] .rounds-heading:hover .rounds-toggle-btn {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-raised);
}

html[data-theme="light"] .replay-game-options button[aria-pressed="true"] {
  color: var(--brand-strong);
  background: var(--brand-soft);
}

html[data-theme="light"] .replay-game-options button.is-coming-soon {
  color: var(--muted);
  background: var(--surface-soft);
}

html[data-theme="light"] .tag-history-group.is-bite {
  background: rgba(170, 23, 48, 0.035);
}

html[data-theme="light"] .tag-history-new {
  color: var(--brand-strong);
}

html[data-theme="light"] .pwa-install-dialog {
  background:
    radial-gradient(circle at 90% 0%, rgba(171, 126, 43, 0.1), transparent 38%),
    var(--surface-raised);
}

html[data-theme="light"] :is(.pwa-install-dialog::backdrop, .share-preview-dialog::backdrop) {
  background: rgba(28, 31, 33, 0.45);
}

html[data-theme="light"] .pwa-install-dialog li,
html[data-theme="light"] .share-preview-heading > button,
html[data-theme="light"] .share-preview-download {
  border-color: var(--line);
  background: var(--surface-soft);
}

html[data-theme="light"] .share-preview-dialog {
  background: var(--surface-raised);
  box-shadow: 0 28px 80px rgba(35, 31, 24, 0.22);
}

html[data-theme="light"] .share-preview-frame {
  border-color: var(--line);
  background: #e9e6df;
}

html[data-theme="light"] :is(.header-ext-btn, .share-button) {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: var(--brand-soft);
}

html[data-theme="light"] .header-actions > :is(.header-ext-btn, .pwa-install-button) {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: var(--brand-soft);
  box-shadow: 0 7px 20px rgba(35, 31, 24, 0.08);
}

html[data-theme="light"] .header-actions > :is(.header-ext-btn, .pwa-install-button) :is(.ext-arrow, .pwa-btn-icon) {
  color: var(--brand-strong);
}

html[data-theme="light"] .assistant-promo-button {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: var(--brand-soft);
  box-shadow: 0 7px 20px rgba(35, 31, 24, 0.08);
}

html[data-theme="light"] .assistant-promo-badge {
  border-color: rgba(132, 94, 22, 0.18);
  color: #fff;
  background: var(--brand-strong);
}

html[data-theme="light"] .back-to-top {
  border-color: var(--brand-line);
  color: var(--brand-strong);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(35, 31, 24, 0.14);
}

html[data-theme="light"] .theme-popover {
  box-shadow: 0 20px 52px rgba(35, 31, 24, 0.18);
}

@media (max-width: 720px) {
  html[data-theme="light"] .mobile-section-nav {
    border-color: rgba(28, 34, 39, 0.14);
    background: rgba(250, 249, 246, 0.94);
    box-shadow: 0 14px 38px rgba(35, 31, 24, 0.18);
  }

  html[data-theme="light"] .mobile-section-nav-indicator {
    border-color: var(--brand-line);
    background:
      radial-gradient(circle at 38% 8%, rgba(255, 255, 255, 0.7), transparent 42%),
      var(--brand-soft);
    box-shadow: 0 5px 14px rgba(35, 31, 24, 0.1);
  }

  html[data-theme="light"] .mobile-section-nav button {
    color: rgba(64, 74, 82, 0.66);
  }
}

@media (max-width: 380px) {
  .site-header-inner,
  main,
  footer {
    width: min(100% - 22px, 1180px);
  }

  .brand {
    font-size: 11px;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
  }

  .pwa-install-button {
    min-height: 40px;
    padding-inline: 8px;
  }

  .hero-stage {
    padding-inline: 14px;
  }

  .section-heading h2 {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-shell:not(.is-hidden),
  .rtp-tutorial[open] > .rtp-tutorial-content,
  .pwa-install-dialog[open],
  .pwa-install-dialog[open]::backdrop,
  .share-preview-dialog[open],
  .share-preview-dialog[open]::backdrop,
  .back-to-top,
  .back-to-top[data-visible] {
    transform: none;
  }

  .mobile-section-nav-indicator,
  .mobile-section-nav-indicator::after,
  .mobile-section-nav button,
  .mobile-section-nav button b {
    transition-duration: 0.01ms !important;
  }
}