:root {
  --ink: #f6f2df;
  --muted: #b9c5bd;
  --paper: #18201d;
  --panel: #222c29;
  --panel-2: #2d3834;
  --line: #46534e;
  --teal: #39c9bf;
  --red: #e4504d;
  --yellow: #f0c45d;
  --blue: #6999ff;
  --green: #75d06b;
  --shadow: rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(57, 201, 191, 0.1), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(240, 196, 93, 0.12), transparent 22rem),
    #111816;
  color: var(--ink);
  font-family:
    "Yu Gothic UI",
    "Meiryo",
    system-ui,
    sans-serif;
  letter-spacing: 0;
}

.boot-status,
.noscript-message {
  width: min(720px, calc(100% - 24px));
  margin: 12px auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1d2824;
  color: var(--muted);
  line-height: 1.45;
}

.noscript-message {
  border-color: var(--yellow);
  color: var(--ink);
}

button {
  color: inherit;
  font: inherit;
}

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 700;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.35rem, 2.7vw, 2.15rem);
  line-height: 1.08;
}

h2 {
  font-size: 0.96rem;
}

.meter-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(98px, 1fr));
  gap: 8px;
  width: min(650px, 100%);
}

.goal-line {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.goal-line strong {
  color: var(--yellow);
}

.goal-progress {
  display: grid;
  gap: 6px;
  align-content: center;
  min-width: 220px;
}

.goal-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}

.goal-progress-head strong {
  color: var(--yellow);
}

.progress-bar {
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #1b2421;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--yellow));
  transition: width 0.3s ease;
}

.meter,
.status-row > div,
.report-line {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #26322f, #1b2421);
}

.meter {
  min-height: 56px;
  padding: 8px 10px;
}

.meter span,
.status-row span,
.report-line span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.meter strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  white-space: nowrap;
}

.save-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin-bottom: 14px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 7px;
  background: rgba(34, 44, 41, 0.94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.save-status[data-state="write_failed"],
.save-status[data-state="session_only"] {
  border-left-color: var(--yellow);
}

.save-status-label {
  color: var(--teal);
  font-size: 0.78rem;
}

.save-status[data-state="write_failed"] .save-status-label,
.save-status[data-state="session_only"] .save-status-label {
  color: var(--yellow);
}

.save-status-text {
  flex: 1;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.save-retry-btn {
  flex: none;
  min-height: 32px;
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 14px;
  align-items: stretch;
}

.store-panel,
.control-panel,
.ledger-panel {
  border: 1px solid var(--line);
  background: rgba(34, 44, 41, 0.94);
  box-shadow: 0 16px 36px var(--shadow);
}

.canvas-wrap {
  position: relative;
  min-height: 280px;
  background: #0b1110;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: auto;
}

.status-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.status-row > div {
  min-height: 56px;
  padding: 8px 10px;
}

.status-row strong {
  display: block;
  margin-top: 2px;
  color: var(--yellow);
  font-size: 1rem;
}

.control-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}

.tab {
  min-height: 44px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #1a2320;
  color: var(--muted);
  cursor: pointer;
}

.tab:last-child {
  border-right: 0;
}

.tab.is-active {
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.tab-panel {
  display: none;
  padding: 12px;
  min-height: 420px;
}

.tab-panel.is-active {
  display: block;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.ghost-btn,
.primary-btn,
.secondary-btn {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  background: #1b2421;
  cursor: pointer;
}

.ghost-btn:hover,
.secondary-btn:hover {
  border-color: var(--teal);
}

.danger {
  color: #ffb6b2;
}

.catalog {
  display: grid;
  gap: 10px;
}

.machine-detail {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #17201d;
  color: var(--muted);
  line-height: 1.45;
}

.machine-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  margin-bottom: 8px;
}

.machine-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  font-size: 0.75rem;
}

.payout-control {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.payout-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
  font-size: 0.74rem;
}

.payout-line input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.payout-line strong {
  color: var(--yellow);
  text-align: right;
}

.payout-note {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.report-payout-note {
  margin-top: 8px;
}

.machine-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 158px;
  overflow: auto;
}

.machine-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #17201d;
  color: var(--muted);
  padding: 0 8px;
  cursor: pointer;
  text-align: left;
}

.machine-row span,
.machine-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-row.is-selected {
  border-color: var(--yellow);
  color: var(--ink);
  background: #26342f;
}

.hire-panel-body {
  display: grid;
  gap: 10px;
}

.hire-summary,
.daily-report-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #17201d;
  padding: 10px;
  color: var(--muted);
}

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

.hire-summary-grid div,
.complaint-list li {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px;
  background: #1b2421;
}

.hire-summary-grid span,
.daily-report-box span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.hire-summary-grid strong,
.daily-report-box strong {
  display: block;
  margin-top: 3px;
  color: var(--yellow);
}

.hire-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1a2421;
  padding: 10px;
}

.hire-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.daily-report-box {
  margin-top: 12px;
}

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

.chart-panel {
  display: grid;
  gap: 6px;
}

.chart-panel canvas {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: #111816;
}

.machine-trend-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px;
  font-size: 0.875rem;
}

.machine-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.machine-trend-legend i {
  flex: 0 0 10px;
  width: 10px;
  height: 3px;
  background: var(--trend-color);
}

.complaint-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.machine-highlight-line {
  color: var(--muted);
  font-size: 0.78rem;
}

.tutorial-hint-line {
  margin-top: 4px;
  border: 1px dashed var(--teal);
  border-radius: 6px;
  padding: 7px 8px;
  color: var(--ink);
  background: rgba(57, 201, 191, 0.1);
  font-size: 0.78rem;
  line-height: 1.4;
}

.report-subhead {
  margin-top: 4px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 700;
}

.type-breakdown-list,
.suggestion-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--muted);
}

.suggestion-list li {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 7px 8px;
  background: #1b2421;
  color: var(--ink);
}

.catalog-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #1a2421;
}

.machine-chip {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.18);
}

.item-main {
  display: grid;
  gap: 7px;
}

.item-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
}

.item-title span:last-child {
  color: var(--yellow);
  white-space: nowrap;
}

.item-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}

.buy-btn,
.ad-btn {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: var(--teal);
  color: #08211e;
  font-weight: 800;
  cursor: pointer;
}

.buy-btn:disabled,
.ad-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.compact .catalog-item {
  grid-template-columns: 1fr;
}

.event-brief {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #19231f;
}

.event-brief + .action-stack {
  margin-top: 0;
}

.event-brief-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.event-brief-head h2 {
  margin-right: auto;
}

.event-help-button {
  min-height: 30px;
  padding-inline: 8px;
  font-size: 0.75rem;
}

.event-brief-text {
  color: #e7eadf;
  font-size: 0.8rem;
  line-height: 1.4;
}

.event-effect-list {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.75rem;
}

.event-effect-list > div {
  display: flex;
  gap: 5px;
}

.event-effect-list dt {
  color: var(--muted);
}

.event-effect-list dd {
  margin: 0;
  color: var(--yellow);
  font-weight: 800;
}

.event-next {
  color: var(--teal);
  font-size: 0.72rem;
  line-height: 1.35;
}

.action-stack {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.speed-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.speed-controls .mini-btn.is-active {
  border-color: var(--yellow);
  color: var(--yellow);
  background: #26342f;
}

.speed-controls .mini-btn {
  min-height: 44px;
  padding-inline: 3px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.volume-control {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) 3.2em;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #1d2824;
}

.volume-control label,
.volume-control output {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.volume-control input {
  width: 100%;
  accent-color: var(--teal);
  cursor: pointer;
}

.volume-control output {
  color: var(--teal);
  text-align: right;
}

:where(
  .eyebrow,
  .goal-line,
  .goal-progress-head,
  .meter span,
  .status-row span,
  .report-line span,
  .section-head span,
  .machine-detail-stats,
  .payout-line,
  .payout-note,
  .hire-summary-grid span,
  .daily-report-box span,
  .hire-card p,
  .machine-highlight-line,
  .tutorial-hint-line,
  .report-subhead,
  .type-breakdown-list,
  .complaint-list,
  .suggestion-list,
  .catalog-item-footer,
  .report-subsection-head,
  .weekly-review-empty,
  .ending-reason,
  .ending-breakdown span,
  .overlay-eyebrow,
  .daily-report-sheet-head > div > p:last-child,
  .sheet-metric span,
  .sheet-section-head small,
  .best-payout-card small,
  .island-summary-line,
  .report-machine-table,
  .report-machine-table td small,
  .report-empty,
  .fixed-cost-note,
  .machine-weekly-head small
) {
  font-size: 0.875rem;
}

.primary-btn {
  min-height: 52px;
  border-color: #f4d87e;
  background: linear-gradient(180deg, #f7d36f, #d7952d);
  color: #2b1707;
  font-weight: 900;
}

.secondary-btn {
  background: #26342f;
}

.lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.ledger-panel {
  padding: 12px;
}

.ledger-panel.full-width .log-list {
  max-height: 240px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 7px 18px;
}

.event-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--yellow);
  background: #1a2320;
}

.log-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 1.25rem;
  max-height: 172px;
  overflow: auto;
}

.log-list li {
  color: #e7eadf;
  line-height: 1.42;
}

.mini-btn {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #1b2421;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
}

.mini-btn:hover {
  border-color: var(--teal);
}

.report-subsection-head {
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.report-subsection-head:first-of-type {
  margin-top: 4px;
  border-top: 0;
  padding-top: 0;
}

.weekly-review-box {
  display: grid;
  gap: 8px;
}

.weekly-review-box .weekly-review-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #17201d;
  color: var(--muted);
  line-height: 1.5;
}

.weekly-review-box .weekly-review-item strong {
  color: var(--yellow);
}

.weekly-review-empty {
  color: var(--muted);
  font-size: 0.8rem;
}

.report-box {
  display: grid;
  gap: 8px;
}

.report-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
}

.report-line.total {
  border-color: var(--yellow);
}

.ending-box {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  min-height: 96px;
  color: var(--muted);
  background: #17201d;
  line-height: 1.55;
}

.ending-box strong {
  color: var(--yellow);
}

.ending-grade {
  font-size: 1.05rem;
  color: var(--ink);
}

.ending-grade strong {
  font-size: 1.3rem;
}

.ending-reason {
  margin-top: 4px;
  color: #ffb6b2;
  font-size: 0.78rem;
  font-weight: 700;
}

.ending-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.ending-breakdown div {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px;
  background: #1b2421;
}

.ending-breakdown span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.ending-breakdown strong {
  display: block;
  margin-top: 3px;
}

.ending-advice {
  margin: 10px 0 0;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .topbar,
  .game-grid,
  .lower-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .control-panel {
    min-height: auto;
  }

  .tab-panel {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .app-shell {
    padding: 10px;
  }

  .save-status {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .save-status-text {
    min-width: calc(100% - 58px);
  }

  .save-retry-btn {
    margin-left: auto;
  }

  .meter-strip,
  .status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .item-meta {
    grid-template-columns: 1fr;
  }

  .machine-stats {
    grid-template-columns: 1fr;
  }

  .machine-row {
    grid-template-columns: 50px minmax(0, 1fr) 44px;
  }
}

.app-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(7, 11, 10, 0.78);
  color: var(--ink);
}

.app-overlay:not([open]) {
  display: none;
}

.app-overlay::backdrop {
  background: transparent;
}

.overlay-card {
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: linear-gradient(180deg, #26322f, #171f1c);
  box-shadow: 0 20px 48px var(--shadow);
}

.overlay-eyebrow {
  margin: 0 0 6px;
  color: var(--yellow);
  font-size: 0.76rem;
  font-weight: 700;
}

.overlay-card h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.overlay-body {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.overlay-alert {
  margin: 12px 0 0;
  padding: 9px 10px;
  border: 1px solid rgba(240, 196, 93, 0.6);
  border-radius: 6px;
  background: rgba(240, 196, 93, 0.1);
  color: #f8d987;
  font-size: 0.84rem;
  line-height: 1.45;
}

.overlay-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.tutorial-overlay {
  background: rgba(7, 11, 10, 0.5);
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 36px;
}

.tutorial-card {
  width: min(460px, 100%);
  border-color: var(--yellow);
}

.tutorial-highlight {
  position: relative;
  z-index: 1001;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--yellow), 0 0 22px 4px rgba(240, 196, 93, 0.6);
}

@media (max-width: 680px) {
  .app-shell {
    padding-bottom: calc(138px + env(safe-area-inset-bottom));
  }

  .app-shell:has(#nextMonthBtn:not([hidden])) {
    padding-bottom: calc(188px + env(safe-area-inset-bottom));
  }

  .canvas-wrap {
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .game-grid,
  .store-panel,
  .control-panel {
    min-width: 0;
    max-width: 100%;
  }


  .canvas-wrap canvas {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .action-stack {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    grid-template-columns: minmax(0, 1fr) minmax(174px, 0.7fr);
    align-items: stretch;
    margin: 0;
    padding:
      8px max(10px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: rgba(24, 32, 29, 0.97);
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
  }

  .event-brief {
    padding: 9px 10px;
  }

  .event-effect-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-stack > .primary-btn {
    grid-column: 1;
  }

  .action-stack > .speed-controls {
    grid-column: 2;
  }

  .action-stack > .volume-control {
    grid-column: 1 / -1;
  }

  .action-stack > .secondary-btn {
    grid-column: 1 / -1;
  }

  .action-stack:has(.tutorial-highlight) {
    z-index: 1002;
  }

  .action-stack:has(.tutorial-highlight) > :not(.tutorial-highlight) {
    pointer-events: none;
  }

  .tutorial-overlay {
    padding-bottom: calc(144px + env(safe-area-inset-bottom));
  }

  button {
    touch-action: manipulation;
  }

  .ghost-btn,
  .secondary-btn,
  .mini-btn,
  .buy-btn,
  .ad-btn,
  .machine-row {
    min-height: 44px;
  }

  .payout-line input[type="range"] {
    min-height: 44px;
  }
}
.daily-report-overlay {
  z-index: 1200;
  align-items: stretch;
  padding: 12px;
}

.daily-report-sheet.overlay-card {
  width: min(1180px, 100%);
  max-height: calc(100vh - 24px);
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-color: rgba(240, 196, 93, 0.5);
}

.daily-report-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #2a3834, #202a27);
}

.daily-report-sheet-head h2,
.daily-report-sheet-head p {
  margin: 0;
}

.daily-report-sheet-head > div > p:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.report-close-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border-color: var(--line);
  background: #17201d;
  color: var(--ink);
  font-size: 1.35rem;
  cursor: pointer;
}

.daily-report-sheet-scroll {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px 20px 22px;
}

.sheet-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sheet-metric {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: #17201d;
}

.sheet-metric span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
}

.sheet-metric strong {
  display: block;
  margin-top: 4px;
  color: var(--yellow);
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.sheet-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(23, 32, 29, 0.88);
}

.sheet-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--yellow);
  font-weight: 800;
}

.sheet-section-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
}

.detailed-chart-wrap {
  overflow-x: auto;
}

.detailed-chart-wrap canvas {
  width: 100%;
  min-width: 720px;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #111816;
}

.sheet-two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.best-payout-grid {
  display: grid;
  gap: 8px;
}

.best-payout-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 9px 10px;
  background: #1d2824;
}

.best-payout-card span,
.best-payout-card small {
  color: var(--muted);
}

.best-payout-card strong {
  color: var(--yellow);
  font-size: 1.05rem;
}

.best-payout-card small {
  grid-column: 1 / -1;
  font-size: 0.7rem;
}

.month-total-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-island-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.report-island-btn {
  min-width: 110px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: var(--line);
  background: #1a2421;
  color: var(--ink);
  cursor: pointer;
}

.report-island-btn strong {
  color: var(--muted);
}

.report-island-btn.is-active {
  border-color: var(--yellow);
  background: #2b352e;
}

.report-island-btn.is-active strong {
  color: var(--yellow);
}

.island-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.island-summary-line strong {
  color: var(--yellow);
}

.report-machine-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.report-machine-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.73rem;
}

.report-machine-table th,
.report-machine-table td {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: right;
  white-space: nowrap;
}

.report-machine-table th:first-child,
.report-machine-table td:first-child {
  text-align: left;
}

.report-machine-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #25312d;
  color: var(--muted);
}

.report-machine-table td strong,
.report-machine-table td small {
  display: block;
}

.report-machine-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
}

.report-machine-table .is-customer-win {
  color: #70e0d0;
}

.report-machine-table .is-store-win {
  color: #ff9a92;
}

.report-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.report-sheet-open {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .daily-report-overlay {
    padding: 0;
  }

  .daily-report-sheet.overlay-card {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .daily-report-sheet-head {
    padding: 12px;
  }

  .daily-report-sheet-scroll {
    padding: 12px 10px 96px;
  }

  .sheet-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sheet-two-column {
    grid-template-columns: 1fr;
  }

  .month-total-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .island-summary-line {
    display: grid;
  }
}
.profit-rate-face {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.profit-rate-face b {
  font-size: 2.15rem;
  line-height: 1;
}

.best-payout-card.is-clickable {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.best-payout-card.is-clickable:hover,
.best-payout-card.is-clickable:focus-visible {
  border-color: var(--yellow);
  background: #26352f;
  outline: none;
}

.closing-notes-section {
  display: grid;
  gap: 10px;
}

.closing-notes-section .sheet-section-head {
  margin-bottom: 0;
}

.closing-comment {
  margin: 0;
  padding: 12px;
  border-left: 4px solid var(--yellow);
  border-radius: 5px;
  background: #111816;
  color: #eff7f1;
  line-height: 1.65;
}

.staff-note-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.staff-note-list p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(112, 224, 208, 0.25);
  border-radius: 6px;
  background: rgba(27, 49, 44, 0.7);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.fixed-cost-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.fixed-cost-note:empty {
  display: none;
}

.report-machine-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.report-machine-link strong {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report-machine-link:hover strong,
.report-machine-link:focus-visible strong {
  color: #70e0d0;
}

.report-machine-link:focus-visible {
  outline: 2px solid #70e0d0;
  outline-offset: 3px;
}

.machine-weekly-panel {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(112, 224, 208, 0.35);
  border-radius: 8px;
  background: #17201d;
}

.machine-weekly-panel[hidden] {
  display: none;
}

.machine-weekly-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}

.machine-weekly-head > div:first-child span,
.machine-weekly-head > div:first-child small,
.machine-weekly-rate small,
.machine-weekly-rate strong {
  display: block;
}

.machine-weekly-head > div:first-child span {
  color: var(--yellow);
  font-weight: 800;
}

.machine-weekly-head small {
  color: var(--muted);
  font-size: 0.7rem;
}

.machine-weekly-rate {
  text-align: right;
}

.machine-weekly-rate strong {
  margin-top: 2px;
  color: #70e0d0;
  font-size: 1.35rem;
}

.machine-weekly-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.machine-weekly-chart-wrap {
  overflow-x: auto;
}

.machine-weekly-chart-wrap canvas {
  width: 100%;
  min-width: 680px;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #111816;
}

.machine-weekly-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  gap: 6px;
  margin-top: 9px;
  overflow-x: auto;
}

.machine-weekly-day {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #111816;
}

.machine-weekly-day span,
.machine-weekly-day small {
  color: var(--muted);
  font-size: 0.64rem;
}

.machine-weekly-day strong {
  color: #70e0d0;
}

@media (max-width: 760px) {
  .profit-rate-face b {
    font-size: 1.8rem;
  }

  .staff-note-list,
  .machine-weekly-summary {
    grid-template-columns: 1fr;
  }

  .machine-weekly-head {
    align-items: flex-start;
  }

  .machine-weekly-days {
    grid-template-columns: repeat(7, minmax(112px, 1fr));
  }
}
.fixed-cost-hire-note {
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px solid rgba(240, 196, 93, 0.28);
  border-radius: 6px;
  background: rgba(240, 196, 93, 0.07);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

:where(
  button,
  [href],
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid #70e0d0 !important;
  outline-offset: 3px !important;
}

@media (max-width: 680px) and (max-height: 520px) {
  .app-shell,
  .app-shell:has(#nextMonthBtn:not([hidden])) {
    padding-bottom: 10px;
  }

  .action-stack {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    margin-top: auto;
    padding: 12px;
    box-shadow: none;
    backdrop-filter: none;
  }

  .tutorial-overlay {
    padding-bottom: 8px;
  }
}

@media (max-height: 520px) {
  .app-overlay {
    align-items: flex-start;
    padding: 8px;
  }

  .overlay-card {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}