/* Placename-challenge-only additions, layered on top of ../style.css's
   shared base (hint-bar, controls, catchup-panel/list/item, result-panel,
   score-grade/number/message, buttons -- this page reuses those exact IDs
   so a fix to the shared file fixes both pages at once). */

/* Sticks to the viewport top once the header scrolls past it, showing the
   running "question N/M, score so far" summary -- or, once a round's
   done, the archived/finished "已完成挑戰" status (see game.js's
   updateProgressBar()/markQuestionDone()/showArchivedResult(), all of
   which write into #progress-bar-text). Deliberately its OWN bar,
   separate from ../style.css's #hint-bar (the county-overlay toggle +
   help button) which sits above it and is NOT sticky -- ordered
   #tools -> #hint-bar -> #progress-bar -> #canvas-wrap. Hidden in
   lockstep with #hint-bar (see enterDailyMode() etc. in game.js) --
   i.e. visible for the whole time a round/mode is active, only hidden
   entirely on the pool picker. width:100% so it stretches across
   `main`'s own centered column instead of shrinking to its text's width,
   the default for a sticky flex child. */
#progress-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  margin-bottom: 8px;
  border-radius: 0 0 10px 10px;
  background: var(--ocean-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-weight: 700;
  font-size: 0.9rem;
}

#progress-bar[hidden] {
  display: none;
}

#help-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ../style.css's #canvas-wrap sets touch-action: none for the draw
   challenge's own freehand-stroke dragging -- any touch-move while
   drawing there must NOT also scroll the page underneath it. This page
   only ever needs a single tap to place a circle (see the pointerdown
   handler in game.js), never a drag, so blocking every touch gesture on
   the canvas is unnecessarily restrictive here -- and now that the map
   fills most of the screen (see #canvas-wrap's own mobile sizing further
   below), most vertical swipes start on it, making the page nearly
   impossible to scroll. pan-y still lets a tap register immediately
   (pointerdown fires the instant a finger touches down, independent of
   touch-action) while letting a vertical swipe scroll the page normally. */
#canvas-wrap {
  touch-action: pan-y;
}

/* Same wrapper pattern as ../style.css's #challenge-tools (the draw
   challenge's own catch-up button row) -- a separate rule since this
   page names its own version #tools rather than reusing that exact ID. */
#tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Mirrors ../style.css's #catchup-panel/#catchup-list/#catchup-close-btn
   (the draw challenge's catch-up picker) -- same look, separate rule since
   this is its own panel with its own ids. Its rows reuse the shared
   .catchup-item/.catchup-date/.catchup-summary/.catchup-status classes
   as-is, so only the panel/list/button containers need their own CSS. */
#archive-panel {
  width: 100%;
  max-width: 420px;
  margin: 10px auto 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--panel-bg);
}

#archive-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#archive-close-btn {
  margin-top: 10px;
  padding: 6px 16px;
  font-size: 0.8rem;
}

#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
}

#tutorial-overlay[hidden] {
  display: none;
}

#tutorial-modal {
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c5d82 0%, #0b3d5c 100%);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  text-align: left;
}

#tutorial-modal h2 {
  margin: 0 0 14px;
  font-size: 1.3rem;
  text-align: center;
}

#tutorial-modal ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tutorial-modal li {
  font-size: 0.9rem;
  line-height: 1.5;
}

#tutorial-close-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #2a1a00;
  font-weight: 700;
}

#tier-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

/* #tier-picker sets its own `display`, which otherwise beats the UA's
   default [hidden]{display:none} (author rules always win over UA rules
   of any specificity) -- without this override, setting .hidden = true
   on it from game.js would have no visual effect. */
#tier-picker[hidden] {
  display: none;
}

.tier-btn {
  position: relative; /* anchors .tier-count-badge (special mode's remaining-uses count) */
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid var(--ocean-light);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Special mode's "each size usable twice" -- a small corner badge instead
   of stuffing "×N" into the button label, so the label stays identical to
   daily mode's (which never has more than 1 use) rather than growing a
   third clause. */
.tier-count-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #2a1a00;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.tier-btn.used .tier-count-badge {
  background: var(--ocean-light);
  color: var(--ink);
}

.tier-btn:hover:not(:disabled) {
  background: var(--ocean-light);
}

.tier-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #2a1a00;
  font-weight: 700;
}

.tier-btn.used {
  opacity: 0.35;
  border-style: dashed;
  cursor: not-allowed;
}

/* The collapsed-state stand-in for the whole 5-button row (see
   buildTierChip() in game.js) -- a single wide chip instead of a normal-
   width pill, so it reads as "the one control now standing in for a
   whole row" rather than just a smaller version of the same button. */
.tier-chip {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tier-chip-change {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.85;
}

#feedback {
  margin-top: 10px;
  min-height: 1.2em;
  font-weight: 600;
  text-align: center;
}

#confirm-btn {
  background: var(--accent);
  color: #2a1a00;
  font-weight: 700;
}

#breakdown {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

/* Special-mode trivia footnote (see special-data.js's `note` field, and
   renderResults() in game.js) -- sits right under its own .analysis-line
   as a visually secondary aside: smaller, dimmer, and pulled up close via
   a negative top margin (undoes #breakdown's own gap for this one pair)
   so it reads as "attached to" that line rather than its own separate
   entry. */
.analysis-note {
  margin-top: -4px;
  padding: 0 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.75;
}

.analysis-note[hidden] {
  display: none;
}

/* .analysis-line becomes a row (text on the left, the 📖 toggle -- when
   that question has one -- pinned to the right) instead of plain block
   text, so the button reads as attached to its own line rather than
   just trailing text wrapping onto it. */
#breakdown .analysis-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-toggle {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.note-toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

#result-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

#review-btn {
  background: transparent;
  border: 2px solid var(--ocean-light);
  color: var(--ink);
}

#review-btn:hover {
  background: var(--ocean-light);
}

#review-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

#review-controls[hidden] {
  display: none;
}

/* Special mode is freely replayable, unlike daily mode's one-shot days
   (which dropped its retry button entirely) -- distinct green "go again"
   treatment, same idea as the draw game's own #retry-btn. */
#retry-special-btn {
  background: var(--real-color);
  color: #06331a;
  font-weight: 700;
}

/* Mirrors #archive-panel above (same look, its own container) -- rows use
   a dedicated .special-pool-item class rather than .catchup-item since the
   content shape is different (title/description/meta, not a fixed grid of
   date/summary/status). */
#special-pool-picker {
  width: 100%;
  max-width: 420px;
  margin: 14px auto 0;
}

.special-pool-intro {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.8;
}

#special-pool-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* A plain card now (not itself a button -- see renderSpecialPoolList())
   holding two real buttons: play, and review the best attempt. */
.special-pool-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--panel-bg);
  border: 2px solid transparent;
  text-align: left;
}

.special-pool-title {
  font-weight: 700;
  font-size: 1rem;
}

.special-pool-desc {
  font-size: 0.82rem;
  opacity: 0.85;
}

.special-pool-meta {
  font-size: 0.75rem;
  opacity: 0.7;
}

.special-pool-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.special-pool-play-btn {
  flex: 1;
  background: var(--accent);
  color: #2a1a00;
  font-weight: 700;
}

/* Same transparent/outlined look as #review-btn (the in-round "🔍 複習
   地名位置" button) -- both are secondary actions next to a primary one. */
.special-pool-review-btn {
  flex: 1;
  background: transparent;
  border: 2px solid var(--ocean-light);
  color: var(--ink);
}

.special-pool-review-btn:hover:not(:disabled) {
  background: var(--ocean-light);
}

/* Disabled whenever that pool has no best attempt saved to reconstruct
   yet (see renderSpecialPoolList()) -- same dashed/dimmed treatment as
   .tier-btn.used for "can't currently pick this." */
.special-pool-review-btn:disabled {
  opacity: 0.35;
  border-style: dashed;
  cursor: not-allowed;
}

/* Compact mobile layout: mirrors ../style.css's own #controls fixed-
   bottom treatment (see its "Compact mobile layout" comment) -- but here
   #tier-picker (circle-size buttons) and #feedback go along for the
   ride too, wrapped together in #action-dock, since picking a tier is
   the very first step of each question and #feedback shows the result
   right after answering; leaving either in normal flow would mean
   scrolling back up to them while confirm/next already floated. A plain
   flex column handles the stacking automatically -- no need to hand-
   compute each bar's height like a manually offset `bottom` would. */
@media (max-width: 640px) {
  #action-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(6, 38, 59, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  }

  /* Hides the whole dock once there's nothing left in it to show (round
     finished, or a different screen entirely, e.g. the pool picker) --
     #tier-picker and #controls always toggle hidden together (see
     game.js), so checking one is enough. */
  #action-dock:has(> #tier-picker[hidden]) {
    display: none;
  }

  /* Sized off the full viewport height rather than ../style.css's own
     "-190px" (or a page-specific equivalent) -- on a narrow phone this
     page's tall, portrait-oriented map ends up WIDTH-bound anyway (100%
     of `main`'s own column, well under what the height budget alone would
     allow), so subtracting the header's height from that budget barely
     changes the map's own final size; it only shrinks how much of the
     page ends up genuinely scrollable, right when this page's own header
     stack (#tools/#hint-bar/#progress-bar on top of the usual header) is
     taller than the plain draw challenge's. Not enough scroll room means
     #progress-bar (sticky) never actually reaches the top before hitting
     the bottom of the page, so it visually never "floats" -- it just
     looks like a plain top bar. */
  #canvas-wrap {
    width: min(100%, calc(100vh * var(--map-ratio, 0.6)));
    width: min(100%, calc(100dvh * var(--map-ratio, 0.6)));
  }

  /* Extra bottom margin, on top of whatever height the map ends up with
     above, so the page has enough scroll room for #progress-bar to
     actually reach the top and stick there -- needs to be at least
     #progress-bar's own natural distance from the top of the page, i.e.
     roughly --above-h (real height of everything stacked above the map,
     JS-measured -- see updateAboveH() in game.js). Using --above-h itself
     as the margin overshoots that a bit (safety margin) rather than
     trying to hit it exactly.
     Only applied while a round's actually being played (#tier-picker
     visible) -- once it's hidden (round finished, or a different screen
     like the pool picker), the result panel (or whatever comes next)
     supplies its own real content below the map, so keeping this spacer
     would just leave a big empty gap between the map and the score card
     instead of one that scrolls into something. */
  main:has(#tier-picker:not([hidden])) #canvas-wrap {
    margin-bottom: var(--above-h, 220px);
  }

  #action-dock #tier-picker,
  #action-dock #feedback {
    margin: 0;
  }

  /* Neutralizes ../style.css's own fixed-bottom #controls override --
     #action-dock is already the fixed bar now, so #controls just needs
     to be a plain row inside it (higher specificity than that shared
     single-#id rule, so this wins regardless of load order). */
  #action-dock #controls {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }
}