/* Shared device rules. Load after each page's component styles. */
:root {
  --page-gutter: clamp(16px, 3.5vw, 48px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --dialog-top-gap: max(12px, var(--safe-top));
  --dialog-bottom-gap: max(12px, var(--safe-bottom));
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; min-height: 100vh; min-height: 100svh; }
h1, h2, h3 { overflow-wrap: anywhere; }
.wrap, .admin-page .wrap {
  width: auto; max-width: 1320px;
  margin-left: max(var(--page-gutter), var(--safe-left), calc((100% - 1320px) / 2));
  margin-right: max(var(--page-gutter), var(--safe-right), calc((100% - 1320px) / 2));
}
:is(button, a, input, select, textarea, summary) { touch-action: manipulation; }
:is(input, select, textarea) { font: inherit; font-size: 16px; }
:is(input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--gold, #efd08a);
  outline-offset: 3px;
}
:is(.hero-copy, .section-heading > div, .auction-heading > div, .auction-wallet,
  .lot-numbers > div, .leader-copy, .admin-section, .admin-heading-title,
  .admin-header-tools, .countdown-area) { min-width: 0; }
:is(.task-card h3, .task-description, .ticket-origin, .ticket-serial, .ticket-detail,
  .collection-item-caption, .winner-announcement, .winner-player, .result-item,
  .admin-heading-title, .auction-toast) { overflow-wrap: anywhere; }
.site-header { padding-top: var(--safe-top); height: auto; min-height: 110px; gap: 20px; flex-wrap: wrap; }
.site-header .brand { flex-shrink: 0; }
.site-header nav { gap: clamp(12px, 1.6vw, 24px); min-width: 0; max-width: 100%; flex-wrap: wrap; }
.site-header nav a { white-space: normal; overflow-wrap: anywhere; flex-wrap: wrap; }
.site-header nav a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.site-header > .admin-nav-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 14px; border: 1px solid #ff94c2;
  border-radius: 10px; background: linear-gradient(115deg, #ff608f, #ff0873);
  color: #fff; font-size: 12px; white-space: nowrap;
}
.site-footer, .admin-footer { padding-bottom: max(24px, var(--safe-bottom)); }
.admin-page .admin-header { padding-top: max(17px, var(--safe-top)); }
.admin-header { flex-wrap: wrap; }
.admin-header-tools a, .admin-section-nav a { overflow-wrap: anywhere; }
.hero-copy, .task-card-top, .auction-heading, .auction-wallet { overflow-wrap: anywhere; }
.task-card-top, .auction-heading { flex-wrap: wrap; }
.tasks-section .task-card .task-action { min-width: 0; max-width: 100%; overflow-wrap: anywhere; flex-wrap: wrap; }
.auction-wallet { max-width: 100%; }
.hero-art { height: auto; min-height: 470px; }
.hero .gold-ticket, .collection-item .gold-ticket, #dialog-ticket .gold-ticket { min-height: min-content; }
.ticket-main, .ticket-stub { min-width: 0; }
.ticket-main { flex: 1; }
.ticket-stub { flex-shrink: 0; min-width: min-content; }
.ticket-title { overflow-wrap: anywhere; }
.ticket-topline { flex-wrap: wrap; overflow-wrap: anywhere; }
.ticket-topline > span { min-width: 0; max-width: 100%; }
.ticket-stub b { white-space: nowrap; }
.ticket-stub > span:first-child, .ticket-stub > span:last-child { white-space: normal; overflow-wrap: anywhere; text-align: center; }
.admin-lot-meta, .admin-lot-timing { min-width: 0; overflow-wrap: anywhere; }

/* Preserve readable columns; wide records scroll inside their own region. */
:is(.ticket-table-scroll, .participants-scroll, .winners-table-scroll, .auction-table-wrap) {
  max-width: 100%; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.participants-table { table-layout: fixed; width: 100%; }
.player-cell > div { min-width: 0; }
.player-cell > span:last-child { min-width: 0; }
.player-name { max-width: 100%; }
.lot-numbers { flex-wrap: wrap; }
.lot-numbers > div { max-width: 100%; overflow-wrap: anywhere; }
.lot-bid-form .pink-button { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.bid-history-row { flex-wrap: wrap; }
.bid-history-person { flex-basis: 140px; }
.bid-history-amount { min-width: 0; max-width: 100%; flex-shrink: 1; overflow-wrap: anywhere; }
.scheduled-lot > div { min-width: 0; overflow-wrap: anywhere; }
:is(.scheduled-lot, .result-item, .admin-lot-item, .admin-item-preview) > .missing-art {
  width: 46px; height: 46px; flex-basis: 46px;
}
.item-auction .auction-table { table-layout: auto; min-width: 780px; }
.item-auction .auction-table th:first-child { width: 32%; }
.item-auction .auction-table th:nth-child(2) { width: 25%; }
.item-auction .auction-table td { overflow-wrap: anywhere; }
.item-auction .auction-table .result-price { white-space: nowrap; overflow-wrap: normal; }
.item-auction .auction-table .result-price small { white-space: normal; overflow-wrap: anywhere; }
.table-scroll-hint { display: none; }
.ticket-number-button, .result-details-button { min-height: 44px; }
.amount-shortcuts { flex-wrap: wrap; }
.amount-shortcuts button { min-width: 44px; min-height: 44px; }
.dialog-pagination button { width: 44px; height: 44px; }
.ledger-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.ledger-pagination button { min-width: 44px; min-height: 44px; border: 1px solid #c7a8e24d; border-radius: 8px; background: #c7a8e20c; font-size: 12px; padding: 10px 12px; }
.ledger-pagination button:disabled { opacity: .4; cursor: default; }
.ledger-pagination span { font-size: 12px; color: #cbb7dd; }
.admin-page :is(.admin-search-field input, .admin-filters select, .admin-dialog input,
  .admin-dialog select, .admin-dialog textarea, .admin-dialog .admin-editor input),
.demo-player-row input:not([type=checkbox]) { font-size: 16px; }
.admin-page :is(.admin-lot-tabs button, .admin-table-action, .admin-lot-actions button),
.admin-secondary-button, .admin-close, .demo-online { min-height: 44px; }
.admin-close { min-width: 44px; flex-shrink: 0; }
.admin-header-tools a { display: inline-flex; align-items: center; min-height: 44px; }

/* VisualViewport keeps native dialogs inside the area above the keyboard. */
html.device-modal-open { scroll-behavior: auto; }
body.device-modal-open {
  position: fixed; top: var(--locked-scroll-top, 0px); left: 0; right: 0;
  width: auto; overflow: hidden;
}
dialog, .admin-dialog, .all-tickets-dialog, .result-dialog {
  left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right));
  max-width: calc(100% - max(12px, var(--safe-left)) - max(12px, var(--safe-right)));
  max-height: calc(100vh - var(--dialog-top-gap) - var(--dialog-bottom-gap));
  max-height: calc(var(--visual-viewport-height, 100dvh) - var(--dialog-top-gap) - var(--dialog-bottom-gap));
  top: calc(var(--visual-viewport-top, 0px) + var(--dialog-top-gap));
  bottom: calc(100% - var(--visual-viewport-top, 0px) - var(--visual-viewport-height, 100%) + var(--dialog-bottom-gap));
  margin-block: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-block: 20px;
}
.dialog-close, .all-tickets-heading .dialog-close, .result-close {
  width: 44px; height: 44px; top: 12px; right: 12px;
}
.all-tickets-heading { padding-right: 44px; }
.auction-toast {
  left: calc(50% + (max(16px, var(--safe-left)) - max(16px, var(--safe-right))) / 2);
  bottom: max(16px, calc(var(--safe-bottom) + 8px));
  max-width: min(630px, calc(100% - max(16px, var(--safe-left)) - max(16px, var(--safe-right))));
}

@media (max-width: 1200px) {
  .site-header { flex-wrap: wrap; padding-block: max(12px, var(--safe-top)) 12px; gap: 8px 20px; }
  .site-header > .admin-nav-link { margin-left: auto; }
  .site-header nav { order: 4; width: 100%; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 1100px) { .hero-art { min-height: 380px; } }
@media (max-width: 800px) { .hero-art { min-height: 330px; } }
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; min-height: auto; padding-block: 42px; }
  .hero h1 { font-size: clamp(32px, 4.8vw, 46px); }
  .hero-actions { flex-wrap: wrap; }
  .hero .desktop-break { display: none; }
  .event-strip { padding: 0; }
  .event-strip > .wrap {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    height: auto; gap: 14px 24px; padding-block: 18px;
  }
  .event-strip i { display: none; }
  .event-strip span { white-space: normal; font-size: 10px; line-height: 1.8; }
  .event-strip span svg { width: 18px; height: 18px; }
  .admin-section-nav { flex-wrap: wrap; gap: 0 24px; }
}
@media (max-width: 700px) {
  .site-header .brand { width: auto; justify-content: flex-start; gap: 9px; }
  .site-header .brand img { width: 38px; height: 42px; }
  .site-header .brand > span { font-size: 13px; }
  .site-header .brand small, .site-header .back-link { display: none; }
  .site-header > .admin-nav-link { font-size: 10px; padding: 10px; gap: 5px; }
  .site-header.wrap nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px; padding: 8px; border: 1px solid #d7b6ee20;
    border-radius: 14px; background: #21133140; font-size: 12px;
  }
  .site-header nav a, .site-header nav a:first-child { display: flex; padding: 10px 4px; min-height: 46px; border-radius: 9px; }
  .site-header nav .nav-active { background: #f4d18a13; color: #ffe2a2; box-shadow: inset 0 0 0 1px #e8c37d38; }
  .site-header .nav-active::after { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 32px 16px; }
  .hero h1 { font-size: clamp(34px, 8.5vw, 56px); }
  .hero-description { max-width: 480px; font-size: 14px; line-height: 1.9; }
  .hero-art { width: 100%; max-width: 430px; min-height: 320px; margin-inline: auto; }
  .hero-ticket { width: 88%; min-height: 200px; }
  .hero-actions { gap: 16px; }
  .hero .pink-button { min-height: 50px; padding: 14px 17px; gap: 12px; }
  .hero-date { font-size: 10px; line-height: 1.8; }
  .hero-limit { display: block; }
  .task-grid, .ticket-collection { grid-template-columns: minmax(0, 1fr); }
  .task-card { padding: 22px; }
  .task-card h3, .task-description { min-height: 0; }
  .task-progress-label { flex-wrap: wrap; gap: 6px 12px; line-height: 1.7; }
  .tasks-section .task-card .task-action { min-height: 48px; white-space: normal; line-height: 1.6; }
  .section-heading { flex-wrap: wrap; }
  .collection-navigation { flex-direction: column; align-items: stretch; gap: 12px; }
  .collection-navigation .outline-button { white-space: normal; line-height: 1.7; }
  .collection-item .gold-ticket { width: 100%; }
  .event-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .event-tabs a { min-width: 0; min-height: 64px; padding: 12px 10px; gap: 6px; font-size: 11px; line-height: 1.6; }
  .event-tabs a span { font-size: 10px; }
  .participants-heading { flex-wrap: wrap; gap: 10px; }
  .participants-heading h3 { font-size: 17px; }
  .participants-heading > span { font-size: 10px; }
  .participants-table th { font-size: 10px; line-height: 1.6; white-space: normal; }
  .player-name { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  .player-tag { font-size: 10px; }
  .contribution-inputs { flex-direction: column; }
  .contribution-inputs .pink-button { min-height: 50px; }
  .amount-shortcuts button { font-size: 11px; }
  .winners-heading { flex-wrap: wrap; }
  .winners-table { min-width: 560px; }
  .winners-table th { font-size: 11px; padding: 14px 12px; }
  .winners-table td { padding: 16px 12px; }
  .winner-date, .winner-player { font-size: 12px; }
  .winners-table td > small, .winner-player small { font-size: 10px; }
  .winner-stake { font-size: 18px; }
  .winner-prize { font-size: 21px; }
  .table-scroll-hint {
    display: block; margin-top: 14px; padding: 8px 0; color: #d4bddf;
    font-size: 11px; line-height: 1.7; white-space: normal;
  }
  .table-scroll-hint + .auction-table-wrap { margin-top: 0; }
  .auction-wallet { flex-wrap: wrap; gap: 10px 16px; }
  .lot-numbers { flex-wrap: wrap; }
  .lot-leader .leader-crown { flex-shrink: 0; }
  .lot-price { overflow-wrap: anywhere; }
  .auction-empty { padding-inline: 18px; }
  .admin-section-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-block: 8px; }
  .admin-section-nav a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 4px; text-align: center; white-space: normal; font-size: 11px; border-radius: 8px; }
  .admin-section-nav a[aria-current=page] { background: #ff3b9317; }
  .admin-section-nav a[aria-current=page]::after { left: 12px; right: 12px; bottom: 0; }
  .admin-section-heading { flex-wrap: wrap; }
  .admin-lot-tabs button { overflow-wrap: anywhere; }
  .admin-dialog .admin-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .admin-dialog-actions { flex-wrap: wrap; }
  .admin-dialog-actions > button { flex: 1 1 150px; }
  .admin-dialog input[type=datetime-local] { min-height: 48px; }
  .admin-dialog input::-webkit-date-and-time-value { text-align: left; }
  .all-tickets-dialog { padding: 22px 16px; }
  .dialog-content { padding-top: 62px; }
  .result-content { padding-top: 62px; }
  .result-content h2 { font-size: clamp(21px, 6vw, 30px); }
}
@media (max-width: 380px) {
  .site-header { gap: 8px; }
  .site-header .brand > span { font-size: 11px; }
  .site-header .brand img { width: 30px; }
  .site-header.wrap nav { font-size: 11px; }
  .hero-actions { align-items: flex-start; }
  .hero-limit { width: 100%; }
  .hero-limit br { display: none; }
  .hero-limit strong { margin-right: 8px; }
  .hero-art { min-height: 290px; }
  .task-card { padding: 18px; }
  .tasks-section .task-card .task-description { font-size: 14px; }
  .event-strip > .wrap { gap: 12px; }
  .event-strip span { font-size: 9px; }
  .lot-item { flex-direction: column; align-items: flex-start; }
  .lot-art-stage { align-self: center; flex-basis: auto; }
}
@media (max-width: 430px) {
  .bid-history-row { flex-wrap: wrap; }
  .bid-history-person { flex-basis: calc(100% - 42px); }
  .bid-history-amount { margin-left: 42px; text-align: left; }
}

/* The preview also fits inside the narrower admin iframe. */
.raffle-demo-page { min-width: 0; }
.demo-wrap { padding-inline: max(12px, var(--safe-left)) max(12px, var(--safe-right)); padding-bottom: max(18px, var(--safe-bottom)); }
.demo-settings fieldset { margin: 0; padding: 0; }
.demo-online { min-width: 44px; }
@media (max-width: 420px) {
  .demo-editor-head, .demo-player-row { grid-template-columns: minmax(0, 1fr) 76px 44px; gap: 6px; }
  .demo-player-row input:not([type=checkbox]) { padding-inline: 8px; }
  .demo-actions { flex-wrap: wrap; }
  .demo-actions .pink-button { flex-basis: 190px; }
  .raffle-demo-page .participants-heading h3 { font-size: 15px; }
  .raffle-demo-page .player-name { max-width: 100%; font-size: 11px; }
  .raffle-demo-page .participants-table th { font-size: 10px; }
}
@media (hover: none), (pointer: coarse) {
  .pink-button:hover, .collection-item:hover, .tasks-section .task-card .task-action:hover { transform: none; }
  .hero-ticket:hover { transform: rotate(-11deg); }
  .ticket-sheen, .spark, .wheel-spark, .lot-leader.has-leader::after,
  .tasks-section .task-card.is-repeat.is-ready .task-action::after { animation: none; }
  .ticket-sheen, .lot-leader.has-leader::after { opacity: 0; }
  .lot-leader .leader-name { animation: none; }
  dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticket, .hero-ticket:hover { transform: rotate(-8deg); }
}