:root {
  --mobile-edge: 16px;
  --mobile-touch-target: 44px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-sheet-max-height: calc(100dvh - 24px);
}

@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .container { width: 100%; max-width: 100%; padding: 0; }

  .mobile-tools-trigger {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(14px + var(--mobile-safe-bottom));
    z-index: 35;
    width: 52px;
    min-height: 52px;
  }
  body:not(.has-primer) .mobile-tools-trigger { display: none !important; }

  .floating-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 42;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: var(--mobile-sheet-max-height);
    padding: 16px var(--mobile-edge) calc(16px + var(--mobile-safe-bottom));
    transform: translateY(110%);
  }

  .floating-actions[data-mobile-open="true"] { transform: translateY(0); }
  .floating-action, .floating-actions .theme-toggle { width: 100%; min-height: 52px; }
  .mobile-overlay-lock { position: fixed; width: 100%; overflow: hidden; }
  .mobile-overlay-backdrop { position: fixed; inset: 0; z-index: 41; }
  .history-drawer { z-index: 42; }
  .history-close,
  .history-drawer-toolbar button,
  .history-item-actions button { min-width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); }
  .card-preview-name { min-height: var(--mobile-touch-target); padding: 8px 6px; }
  body:not(.has-primer) .mobile-tools-trigger { display: none; }

  .input-section { flex-direction: column; }
  textarea { height: 200px; }
  .primer-layout { display: block; width: calc(100% - 2 * var(--mobile-edge)); margin: 20px auto 0; }
  .mobile-primer-toc-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; }
  .primer-layout .output { width: 100%; padding: 18px var(--mobile-edge); font-size: 16px; line-height: 1.82; }
  .primer-toc { position: fixed; inset: auto 0 0; z-index: 42; max-height: var(--mobile-sheet-max-height); overflow-y: auto; padding-bottom: calc(16px + var(--mobile-safe-bottom)); transform: translateY(110%); }
  .primer-toc[data-mobile-open="true"] { transform: translateY(0); }
  .primer-toc-list { display: grid; overflow: visible; }
  .primer-section-heading, .primer-detail-heading { scroll-margin-top: 16px; }
  .output .primer-table-scroll, .output pre, .output .section-cards { max-width: 100%; overflow-x: auto; }
  .output .primer-table-scroll > table { width: max-content; min-width: 100%; margin: 0; }
  .output code:not(.mana-cost) { overflow-wrap: anywhere; word-break: break-word; }
  .card-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 42;
    display: block;
    width: min(calc(100vw - (var(--mobile-edge) * 2)), 390px);
    max-width: 390px;
    max-height: var(--mobile-sheet-max-height);
    overflow: auto;
    padding: 12px var(--mobile-edge) calc(16px + var(--mobile-safe-bottom));
    border-radius: 16px;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
  }
  .card-preview[data-mobile-open="true"] { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .card-preview .card-preview-toolbar { display: flex; min-height: var(--mobile-touch-target); justify-content: flex-end; pointer-events: auto; }
  .card-preview-close { display: inline-grid; width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); place-items: center; padding: 0; font-size: 1.7rem; }
  .card-preview-pin, .card-preview-resize-handle, .card-preview-drag-label { display: none; }
  .card-preview-image { max-height: min(58dvh, 560px); }
  .card-preview-image img { max-height: min(58dvh, 560px); object-fit: contain; }
  .card-preview-action:not([hidden]) { display: block; width: 100%; min-height: var(--mobile-touch-target); margin-top: 12px; }
  .card-preview-name { min-height: var(--mobile-touch-target); padding: 8px 6px; }
  .draw-hand-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .draw-hand-button { width: 100%; min-width: 0; min-height: var(--mobile-touch-target); }
  .draw-hand-deck, .draw-hand-shuffle, .draw-hand-playtest { display: none; }
  .draw-hand-inline-undo { min-width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); justify-content: center; }
  .hero { min-height: 180px; }
  .hero-content .primer-hero-title {
    font-size: clamp(1rem, 6vw, 1.4rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .output h3 { margin: 25px 0 11px; padding: 7px 10px; font-size: 1rem; }
  .output h4 { margin: 17px 0 7px; padding: 4px 8px; font-size: .92rem; }
  .strength-weakness-grid,
  .matchup-analysis-grid { grid-template-columns: 1fr; gap: 12px; }
  .strength-weakness-card,
  .matchup-analysis-card { padding: 11px 12px; }
  .primer-reading-card .section-cards {
    position: relative;
    display: block;
    width: 180px;
    height: 150px;
    margin: 4px 0 12px;
    padding: 0;
    overflow: visible;
  }
  .primer-reading-card .section-card {
    position: absolute;
    width: 96px;
    margin: 0;
  }
  .primer-reading-card .section-card:nth-child(1) { top: 0; left: 0; }
  .primer-reading-card .section-card:nth-child(2) { top: 16px; left: 28px; }
  .primer-reading-card .section-card:nth-child(3) { top: 32px; left: 56px; }
  .game-guide-stage-card {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .game-guide-stage-card .section-cards {
    grid-column: 1;
    grid-row: 2;
    transform: none;
  }
  .game-guide-stage-card .winning-route-content {
    grid-column: 1;
    grid-row: 3;
  }
  .primer-detail-heading { scroll-margin-top: 16px; }
  .section-card { width: 120px; }
  .deck-preview-zone-hint { flex-direction: column; align-items: center; gap: 2px; font-size: .54rem; }
  .deck-preview-zone-hint small { font-size: .48rem; }

  .homepage-hero, .hero-inner { min-height: 0; }
  .hero-inner { padding-inline: var(--mobile-edge); }
  .homepage-hero .hero-theme-toggle { top: 18px; right: var(--mobile-edge); }
  .hero-copy { width: 100%; margin: 64px 0 20px; }
  .hero-copy h1 { font-size: clamp(2.25rem, 12vw, 3.5rem); letter-spacing: .01em; }
  .hero-copy h2 { max-width: 100%; font-size: .92rem; line-height: 1.45; letter-spacing: .04em; }
  .hero-copy p { font-size: .85rem; }
  .developer-note-band { padding: 18px var(--mobile-edge); }
  .developer-note-band { display: none; }
  .developer-note { width: 100%; padding: 16px; }
  .developer-note summary { margin-bottom: 10px; }
  .developer-note summary span { font-size: 1.7rem; }
  .developer-note-en-title { margin-bottom: 12px; font-size: .88rem; line-height: 1.45; }
  .developer-note p { font-size: .82rem; line-height: 1.8; letter-spacing: .02em; }
  .developer-note .developer-note-en { font-size: .76rem; line-height: 1.7; }
  .workspace-section .hero-inner { padding: 18px 15px; }
  .hero-workbench { width: 100%; padding: 16px; }
  .workbench-heading { display: block; }
  .workbench-label em { display: block; margin: 7px 0 0 28px; font-size: .54rem; letter-spacing: .1em; }
  .homepage-hero .url-row { flex-direction: column; }
  .homepage-hero .input-section { flex-direction: column; gap: 18px; }
  .homepage-hero .deck-input-column,
  .homepage-hero .format-panel { width: 100%; max-width: none; flex-basis: auto; min-width: 0; }
  .homepage-hero textarea { min-height: 220px; height: 220px; padding-bottom: 46px; }
  .homepage-hero .format-chips { grid-template-columns: 1fr; }
  .homepage-hero .format-chips { display: none; }
  .homepage-hero .mobile-format-select {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid #d8c7a8;
    border-radius: 6px;
    background: #fbf8f1;
    color: #60492e;
    font: 700 1rem/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .homepage-hero .format-group { grid-column: 1 / -1 !important; }
  .homepage-hero .format-group-options,
  .homepage-hero .format-group-constructed .format-group-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homepage-hero .format-group-constructed .format-chip,
  .homepage-hero .format-group-constructed .format-chip:nth-child(n+5) { grid-column: span 1; }
  .homepage-hero .format-chip { min-height: 56px; height: auto; white-space: normal; }
  .homepage-hero button.primary { width: 100%; min-height: 52px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .summary .card { min-height: 92px; padding: 13px 12px; }
  .summary .card .label { margin-top: 7px; font-size: .76rem; }
  .deck-preview { padding: 0; }
  .deck-preview-heading h2 { font-size: 1.05rem; }
  .deck-function-summary { gap: 7px; }
  .deck-function-stat { flex-basis: calc(50% - 4px); }
  .deck-preview-label { font-size: .72rem; }
  .deck-preview-label small { font-size: .5rem; }
  .deck-type-stat { min-width: 96px; flex-basis: auto; padding: 6px 7px; }
  .deck-type-stat strong { font-size: 1.12rem; }
  #deckAnalysisPanels .mc-bar-wrap[role="button"],
  #deckAnalysisPanels .color-breakdown-row[role="button"] { min-width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); }
  .deck-type-icon { font-size: 1.12rem; }
  .deepdeck-inspect-step { width: calc(100% - 24px); margin-top: 20px; }
  .deepdeck-inspect-heading { align-items: flex-start; min-height: var(--mobile-touch-target); }
  .deepdeck-inspect-title-group h2 { font-size: 1.06rem; }
  .deepdeck-inspect-title-group h2 em { display: block; margin: 6px 0 0; font-size: .52rem; letter-spacing: .1em; }
  .deepdeck-inspect-toggle { width: var(--mobile-touch-target); height: var(--mobile-touch-target); flex-basis: var(--mobile-touch-target); font-size: .68rem; }
  .deck-preview-zone-heading { min-height: var(--mobile-touch-target); }
  .admin-entry { width: var(--mobile-touch-target); height: var(--mobile-touch-target); vertical-align: middle; }
  .deepdeck-inspect-step .deck-preview-lanes { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .deepdeck-inspect-step .deck-preview-lane { scroll-snap-align: start; }
  .deepdeck-inspect-step .deck-preview-card { width: 150px; min-width: 150px; }
  .deck-preview-edh-layout .deck-preview-board { display: block; }
  .deck-preview-edh-layout .deck-preview-commander-zone { position: static; width: 100%; }
}

@media (min-width: 769px) {
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .mobile-overlay-lock { position: fixed; width: 100%; overflow: hidden; }
  .mobile-overlay-backdrop { position: fixed; inset: 0; z-index: 41; }
  .card-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 42;
    display: block;
    width: min(calc(100vw - (var(--mobile-edge) * 2)), 390px);
    max-width: 390px;
    max-height: var(--mobile-sheet-max-height);
    overflow: auto;
    padding: 12px var(--mobile-edge) calc(16px + var(--mobile-safe-bottom));
    border-radius: 16px;
    transform: translate(-50%, calc(-50% + 110vh));
  }
  .card-preview[data-mobile-open="true"] { transform: translate(-50%, -50%); }
  .card-preview .card-preview-toolbar { display: flex; min-height: var(--mobile-touch-target); justify-content: flex-end; pointer-events: auto; }
  .card-preview-close { display: inline-grid; width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); place-items: center; padding: 0; font-size: 1.7rem; }
  .card-preview-pin, .card-preview-resize-handle, .card-preview-drag-label { display: none; }
  .card-preview-image { max-height: min(58dvh, 560px); }
  .card-preview-image img { max-height: min(58dvh, 560px); object-fit: contain; }
  .card-preview-action:not([hidden]) { display: block; width: 100%; min-height: var(--mobile-touch-target); margin-top: 12px; }
  .card-preview-name { min-height: var(--mobile-touch-target); padding: 8px 6px; }
  .draw-hand-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .power-score-section-heading { min-height: 44px; }
}

@media (min-width: 769px) {
  .mobile-tools-trigger, .mobile-overlay-backdrop { display: none !important; }
}

@media (min-width: 769px) and (hover: none) and (pointer: coarse) {
  .mobile-tools-trigger {
    display: grid !important;
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(14px + var(--mobile-safe-bottom));
    z-index: 35;
    width: 52px;
    min-height: 52px;
  }
  body:not(.has-primer) .mobile-tools-trigger { display: none !important; }
  .floating-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 42;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px var(--mobile-edge) calc(16px + var(--mobile-safe-bottom));
    transform: translateY(110%);
  }
  .floating-actions[data-mobile-open="true"] { transform: translateY(0); }
  .floating-action, .floating-actions .theme-toggle { width: 100%; min-height: 52px; }
  .history-drawer { z-index: 42; }
  .history-close,
  .history-drawer-toolbar button,
  .history-item-actions button { min-width: var(--mobile-touch-target); min-height: var(--mobile-touch-target); }
  .card-preview-name { min-height: var(--mobile-touch-target); padding: 8px 6px; }
  .mobile-overlay-backdrop:not([hidden]) { display: block !important; }
}

@media (max-width: 480px) {
  :root { --mobile-edge: 12px; }
}