<!-- ============================================================
     Tier List Forge — index-v154
     Full changelog: version-history.md (kept in the repo).
     v154 — SITE CONTROLS (feature toggles + maintenance mode) + small fixes.
       Needs: site-controls.sql (site-controls-v1) + app-config.sql (app-config-v5);
       Edge Functions cast-vote v11, manage-voting v5, upload-image v4,
       manage-premium v7. Docs: IN-CASE-OF-EMERGENCY.md.
       • Owner-only "⚙️ Site controls" in 🛡 Reports: Maintenance (on/off + message),
         Image uploads, New voting sessions, Viewer live updates, Anonymous "try it"
         mode, Playing cards, Spin lab (Off / Owner only / Everyone).
       • Maintenance page for everyone but the owner (checked at start + every
         minute; Staff sign-in link); owner sees a red "maintenance ON" bar.
       • "Server unreachable" page at start (e.g. Supabase paused), auto-retry.
       • Presentation remembers hidden/shown per list; TLF back centred + scales
         with the card; smaller playing-card elements; Elo voting spacing
         (mode bar 30px, voting view 10px); community list race fix + safety net;
         Reveal starts with the first item again + mechanical lever sound; sharper
         download text (no shadows, 4x).
     v153 — polish round (maintenance mode = v154):
       • Hide all ▾ menu: icons in fixed slots (texts aligned); stays open while
         picking; closes on ▾, Hide all, Esc or a click elsewhere.
       • Playing cards: no centre watermark, flat (non-gradient) face. TLF back: bigger
         branding in the detail panel.
       • Reset list keeps the voting panel (refreshes to the "start voting" setup).
       • Active creator Elo voting: 30px above the panel, 0 below.
       • Reveal: revealed items remembered per list AND session (new session = clean
         reveal); no auto-selection, empty top section hidden; Space/Enter = pull
         (hold = endless spin until release), pressed during a spin = skip to result.
       • Download image rendered at 3x-4x (sharper).
       • Sliders (creator, presentation, ballot): grab from the number row below or
         click a number to set it.
     v152 — polish batch (maintenance mode follows as its own backend-staged build):
       • Presentation: Reveal ✓ plays once (row no longer re-shown mid-reveal), button
         just disappears; Hide all + Reveal all collapse to icons at <=1500px.
       • Playing cards = normal card-back option for everyone, site-themed (dark
         purple face, gradient border, pink-red / lavender suits, logo in the two free
         corners + faint centre watermark).
       • Sign-in: "Last used" saves the method actually clicked (not the account's
         first provider), incl. anon popup email; badge shown on every sign-in screen
         (auth screen from anon, anon popup). Anon vote/Elo popups open on Sign In.
       • Phone viewer: tier-list items = pool item size.
       • Creator "Clear list" -> "Reset list": items back to the pool + all slider
         scores reset (all modes), community session/votes cleared, Elo: own matchup
         votes reset too. Items/parameters/text values kept. No auto-save.
       • Reveal: Presentation-style header (logo, controls right, list title below);
         magnify popup rows all full item height.
       • Download: clean export copy — no row controls, equal row heights, rounded
         border, padding, site background; watermark inside the last row (creator +
         community).
       • Creator Auto-rank: Space/Enter selects the next unranked (pool) item.
       • No accidental text/item highlighting app-wide (inputs, share link, admin/
         partner/account panels stay selectable).
     v151 — Presentation fixes + poker-deck card back (admin test):
       • Top bar above the detail panel (Hide menu no longer behind it). Order:
         Details switch, Hide all ▾, Reveal all, Clear list, ↩︎ Revert, Close; all
         compact at the same width (<=1500px). Reset renamed Revert.
       • Details = on/off switch. Reveal button: green ✓ now works (duplicate id
         removed); details slide from where the button was (no bounce).
       • Enlarged text smaller. Elo spacing only changes once voting has started.
       • Parameter manager: smaller ▲▼✕, arrows grouped.
       • Poker deck (admin-only test, "Card back" in the Hide menu): lists <=52
         items; each item gets a stable playing card (seeded per list); Face-down only.
     v150 — Presentation top bar + reveal polish, creator drop animation in
            Presentation, background everywhere, text enlarge, parameter order:
       • Presentation top bar: "🙈 Hide all ▾" (menu: Face-down / Blur), Reveal all,
         🗂 Details toggle, Clear list, Reset, Close. <=1500px: Details/Reset/Close
         icon-only; <=1200px also Clear list. Title row = title only again.
       • Card back logo fixed (each copy gets its own gradient id). Reveal button
         ~70% wide, press animation, turns green ✓, stays during the flip, collapses
         right before the details slide in. Face-down panel no longer enlarges the
         hidden item on click.
       • Presentation Manual drag = the creator's system (markDropPoint make-room +
         insertion line, dashed row/pool highlight).
       • Voter/presentation insertion line centred in the gap (-10.5px for borderless
         .vt-item; creator .item keeps -12.5px).
       • Presentation background (dark + purple glow) on body/creator, viewer, auth
         screens; desktop glow centred on the visible logo, phone centred.
       • Enlarge popup backdrop darker (.9). Text items enlarge wherever images do
         (detail panels, community panel, Reveal stage + magnify, ballot) as a box in
         the item shape with wrapped, fitted text.
       • Creator mode banners: ⓘ moved to the right of the mode bar (no button width
         change), smaller ✕; Elo panel gets more room above (banner hidden), less below.
       • Parameter manager: ▲/▼ to reorder parameters.
     v149 — Presentation polish round 4 + dismissible mode banners:
       • "Send all to pool" -> "Clear list" (next to Reset); new text; items keep
         their hidden state; Manual keeps slider values (Option A).
       • Creator presentation follows the LIST's mode for % ranges (no % on Manual
         even while an Auto/Elo vote session is open).
       • Detail labels: creator "Ranking"; community "Creator ranking" (hidden if none).
       • "Hide as [Face-down|Blur] | Hide all | Reveal all" group + "Hide details"
         toggle in the list-title row (remembered). Details hidden: list full width,
         click empty space deselects, clicking a face-down item flips it.
       • Face-down detail = same panel frame; card back exactly the image size; normal
         Reveal button; flatter flip (no clipping); image flips first, then the details
         slide open.
       • Background glow centred on the visible logo (icon + "Tier List Forge").
       • Creator view: Auto/Elo explanation banners dismissible (✕, remembered per
         mode); ⓘ on the active mode button brings it back.
     v148 — Presentation Phase 2 (pool + live placing) + small fixes:
       • Creator presentation (Manual/Auto; Elo stays view-only, pool hidden): changes
         go straight into the real list (unsaved -> Save/Revert in the creator view).
         "Send all to pool" (confirm) moves every item to the pool, face-down (Auto:
         clears slider values, like dragging to the pool in the editor). Manual: drag
         pool->tier, tier->tier, reorder. Auto: editable sliders in the detail panel;
         a touched item jumps to its score tier live. Drag an item out of the list
         (anywhere not a tier) -> back to the pool. Pool cells can be face-down; the
         pool hides when empty (shows as a drop target while dragging from the list).
         Reset restores the entry snapshot (placement + slider values + unsaved flag).
       • Ballot "Item details": long values wrap. Creator text param field grows to
         show all text. Creator text items use the viewer's text style (fits the shape).
         No focus ring after Esc. Top menu + presentation buttons exactly 30px
         (desktop/tablet), TLF code box 30px.
     v147 — Presentation polish + app-wide colour + browser Back:
       • Presentation header = creator header (same height/padding/centring, h1 brand,
         menu-button-sized controls, reserved scrollbar gutter) — no jump on open/close.
       • Presentation scrolls as a page (pool below the list, never cuts it off); the
         detail panel is sticky. Anon users can present the creator list (reads the
         in-memory itemData so browser-local images show; no server fetch).
       • Detail panels (all, incl. Reveal): long text param values wrap (max 60%).
       • Creator view: text items follow the item shape exactly like image items.
       • Old blue panel colour removed everywhere: standalone boxes -> voting-panel look
         (#1e1e35 / #3a3a55); controls inside panels -> page bg (#1a1a2e); download bg.
       • Enter confirms an auto-rank (parameter) ballot vote.
       • Browser Back: closes Presentation; leaves a code-opened list (back to the
         creator view, Forward reopens it); exits Test vote.
     v146 — Presentation Mode fixes + creator header spacing:
       • Creator view (desktop/tablet): list title, Sort-by bar and tier list pulled
         closer together (the editor column's 14px flex gap was swallowing the v145
         margin tweak). Phone unchanged.
       • Presentation: dark outer frame around the detail panel removed; the stray
         bottom ranking block removed; the in-panel ranking section now shows real
         values — creator presentation: Your ranking only; community presentation:
         Community votes + Community ranking + Your ranking (Elo: win rate in the
         score box, no tally). Elo / community-parameter score boxes are no longer
         overwritten by the authored slider score.
       • Untouched sliders count as 1 (not 0) in the presentation score AND the
         viewer's creator-ranking detail score (detailScoreInfo).
       • Presentation: double spacing under the logo bar; top-bar buttons + Blur/
         Face-down toggle sized exactly like the creator-view buttons.
     v145 — Presentation Mode polish (round 3) + creator sort-by spacing:
       • Header matches the creator view: full-width bar, centered same-size logo,
         controls at the screen edge, button sizes matched.
       • List title moved above the arena so the detail column aligns with the tier
         list (not the title). Initial arrow-nav works (presentation shielded from the
         editor's click-to-deselect). Reveal button press effect (from v144).
       • Detail: single Your/Community ranking set with real tier values; authored
         slider score box now shows (like the creator view). Community 'Reset' hidden.
       • Flip reworked to a one-direction card turn (out 0→90, in −90→0) for both the
         list card and the detail card; detail flips in and settles.
       • Creator view: tightened the margins above/below the sort-by bar.
       No SQL change.
     v144 — Presentation Mode polish (round 2):
       • Stage constrained to the creator-view width (1400px); logo centered with the
         purple-gradient name; detail column sizes to its content (no full-height bg).
       • Item pool: selection highlight + arrow-key nav now work there too.
       • Removed the 🎬 from the title and the detail card back; detail back now shows
         the real logo, text angled −45°; face-down card matches the item's image shape
         (no size bounce on reveal).
       • Flip: list-card and detail-card timings aligned; selected item keeps its grow
         (scale) through the flip (no shrink-then-grow); Reveal button has a press effect.
       • Detail: creator ranking + community ranking (the item's tier on each side).
       • Community presentation: Reset button hidden (Hide all / Reveal all cover it).
       No SQL change.
     v143 — Editor layout fix + Presentation Mode polish:
       • Editor: list header + sort-bar moved to FULL-WIDTH above the columns, so the
         detail panel + QR now align with the top of the tier list.
       • Presentation overlay: top spacing; full-width topbar (TLF logo + name left,
         controls right); title moved to sit with the list; round-edged list; item pool
         rendered (visible, never hidden); editor-style selection (purple ring + grow);
         segmented "Blur / Face-down" toggle; −45° branded card backs ("Tier List Forge"
         / "TLF" on round); detail face-down card shows logo + name + .com; detail now
         uses the creator ranking source so the authored/Elo score shows; arrow-key
         up/down across rows fixed.
       • Community variant: 🎬 Present button on the community results header + community
         placement + live-update as votes arrive.
       Still open (next): "your ranking"/tier row in the detail; card-back logo/TLF
       alternation. See PRESENTATION-MODE.md.
       No SQL change.
     v142 — Presentation Mode (Phase 1, creator list):
       • Presentation overlay (🎬 Present): clean full-screen stage, shows the list as-is,
         global hide style (face-down branded back / blur), fixed detail column, click to
         SELECT + a Reveal button that flips the card (list + detail), arrow-key nav +
         Space/Enter to reveal, controls (Hide all / Reveal all / Reset / style toggle).
         Reuses renderTierListInto + renderDetailContent + the arrow-nav.
       No SQL change.
     v141 — Creator list header refactor + sort-bar move:
       • New header above the creator list (name+status left, 🎬 Present + ⬇️ Download
         right). Below-logo banner removed; Download out of the top toolbar; Present
         hidden on mobile. Sort-by bar moved into the creator column (tier-list width).
       No SQL change.
     v140.1 — Follow-ups to v140 (#2 + #6):
       • "Viewers see" now reflects the session's mode for CLOSED sessions too
         (· voting closed), not just open, and refreshes on start/close/reset — not
         only on reload (updateViewersSee() now runs inside renderVotingState).
       • Clear list also deletes the list's voting session + votes and fully clears
         the community list, so a reset list has no leftover item skeletons (i12 …).
       • Reset confirm text reworded.
     v140 — Private-list + reveal + clear-list fixes:
       • Voting panel gets a 40px top gap when private (QR panel hidden → collapse
         arrow no longer overlaps it).
       • "Viewers see" line reflects the LIVE session's mode (e.g. auto-rank) instead
         of the saved list's mode when a session is running.
       • Arrow-nav works off the auto-selected first ballot item (setLastNav on enter).
       • Dead/private share link → anonymous view for guests (signed-in users fall
         through to their app), instead of the login wall.
       • Reveal reel: reel-only "blank" tier; items with no vote/placement land there
         instead of defaulting to S. Lists unchanged (no-vote items still don't show).
       • Clear list no longer DELETES the saved list — it empties the canvas but keeps
         the list saved (re-saves), so no false "deleted on another device" warning and
         status stays "saved". Genuine remote deletions now say "This list was deleted"
         and grey out Save (no restore).
       No SQL change (still needs private-lists.sql from v137 if not already run).
     v139 — Private-lists UI polish + small visual consistency:
       • Private note de-duplicated: the QR-panel copy is gone; one plain-text note
         (no purple box) + the "Make list public" button now live in a divided block
         at the top of the voting panel. QR panel is hidden entirely while private.
       • Test-vote button gets a gap above Close Voting; the bottom "← Back to Home"
         is hidden during test votes (floating "← Back to editor" is the exit).
       • "Private" tag in My Lists → purple (matches the code tag); "+ Create" button
         → purple; the "All N slots used" note loses its blue box (plain text).
       • Purple "empty text parameter" dot DISABLED (CSS commented out; refreshDot
         logic left intact so it's a one-line re-enable).
       No SQL change (still needs private-lists.sql from v137 if not already run).
     v138 — Private-list voting polish (follow-up to v137):
       • Voting panel is now private/public aware. Private list: a "🔒 test only"
         banner + a single "🧪 Test vote" button in the SETUP box (starts a test
         session AND opens the ballot); the plain "Start Voting" is hidden; the live
         badge reads "🧪 Test voting". Public list: normal Start Voting / Voting is
         live, and NO test-vote button.
       • Test-vote button given full width (was misaligned / clipping Close Voting).
       • Make private now also CLOSES any live session (votes kept) and shows the
         private banner.
       • Test-vote screen: "← Back to editor" aligns to the content column (not the
         viewport corner); the "Tier List Code" badge is hidden when there's no code.
       No SQL change (still needs private-lists.sql from v137 if not already run).
     v137 — Private lists + themed scrollbars + Test vote:
       • Themed scrollbars app-wide (slim, dark, matches borders) — replaces the
         default browser bars that clashed on the dark theme.
       • Lists now save PRIVATE by default and mint NO share code (private lists no
         longer consume a code slot). Save no longer publishes.
       • QR panel is state-aware: private list -> "Make list public" button;
         public list -> QR/code + a "Make private" toggle. makeListPublic() mints the
         code, auto-clears any TEST votes, flips public, reveals QR + community.
         makeListPrivate() hides it again but keeps the code (stable re-publish).
       • "Test vote" button (live voting panel): opens the voting screen with the
         creator's own list + the session they already hold — works with no share
         code. "← Back to editor" exits back to the editor (not the code-entry home).
       • REQUIRES the companion SQL: private-lists.sql (makes tier_lists.share_token
         nullable). Run it in Supabase before/with this build.
     v136 — Arrow-nav fix (real root cause) + ballot/pool progress cleanup:
     Full changelog: version-history.md (kept in the repo).
     v136 — Arrow-nav fix (real root cause) + ballot/pool progress cleanup:
       #1 Arrow-nav: the site-wide "click empty space to deselect" handler was
          running on every voting/viewer item click and nulling the arrow-nav
          selection (lastNavRef) a beat after it was set — the highlight stayed but
          the record was wiped, so arrows had nothing to move from and the page
          scrolled instead. Fix: added .vt-item/.viewer-item/.vote-pool-item and the
          #vp/#vc/#vk detail slots to PROTECTED_SEL so those clicks no longer
          deselect. Works across my-ranking, static viewer, community and creator.
       #2 Ballot/pool text: removed the redundant "Tap an item in your list to place
          it." empty-ballot prompt (the panel now just collapses when nothing is
          selected mid-vote). Moved the "X of Y items voted" progress off the
          right-side ballot into the pool header, e.g. "3 of 18 items voted - Tap an
          item to rank it — or drag it into a tier". Finish celebration unchanged.
     v135 — Reveal scroll fix (CSS only):
       Reveal tier lists now cap to the space actually left on screen and scroll
       inside their own box instead of being clipped by the arena. Replaced the
       hardcoded max-height:calc(100vh-470px) guess with max-height:100%, and made
       the arena stretch its columns so that 100% resolves to a real height. Pool
       given flex-shrink:0 so it can't be squeezed into a phantom scrollbar. Phones
       keep whole-arena scrolling (max-height:none on the list). No logic touched.
     v134 — Arrow-nav global fix + ballot text + spin lab expansion:
       #3 Arrow-nav gate replaced: it now fires whenever currentNavCell() resolves a
          live on-screen selected cell (not the fragile anyItemDetailOpen check that
          failed on every viewer list). Works across editor, voter ballot, static
          viewer, community and creator lists uniformly.
       #4 The ballot empty state no longer always says "you've ranked every item" —
          it shows a neutral "tap an item to vote" + progress until you truly finish.
       #5 Reveal pool no longer shows a phantom scrollbar; tier lists scroll
          internally past the viewport cap while still growing downward below it;
          item size 1.0 → 0.9.
       Spin lab: variant 1 is now a real slow crawl (no jump-over); variant 2's
          overshoot tail slowed with a clean snap-back; added 5 double-hesitation,
          6 fast-then-dead-stop, 7 long slow grind, 8 tease-then-settle.
       Frontend-only; no backend change.
     v133 — Viewer arrow-nav + ballot/reveal/sheet fixes:
       #3 Arrow-nav now works in the STATIC viewer (shared-list view): .viewer-item
          cells carry their id + setLastNav on click, the viewer-item-modal is in the
          open-detail gate, and currentNavCell/allNavCells/navRowOf understand the
          viewer-item class (scoped to its .viewer-items row).
       #4 Closing the ballot by double-click no longer shows the "you've ranked every
          item" celebration — a manual close shows the neutral empty state.
       #5 Reveal tier-list width regression fixed (buildlist fills its column again);
          items bumped to full scale (1.0) so they're clearly bigger.
       #7 Phone sheets: swipe down ANYWHERE on the sheet dismisses it (native feel),
          but only when the sheet content is scrolled to the top; otherwise it scrolls.
       Frontend-only; no backend change.
     v132 — Anon upload fix + reveal/nav/sheet refinements:
       • ANON drag-drop: removed the wrong "sign in to upload" block — anon file
         drops now go to IndexedDB like the 📁 Upload button already does (v98.3
         local-image flow). The pool's item-move dragover no longer shows its dashed
         indicator for FILE drags, so the stray small indicator is gone.
       • Viewer arrow-nav now works: allNavCells is scoped to the current cell's own
         list container (was grabbing .vt-item from every viewer list at once).
       • Ballot (desktop right-rail): second click on the current item closes it.
       • Reveal tier-list items bigger (0.55→0.7); lists grow downward with content
         (no inner scroll) and only cap at the viewport as a last resort.
       • Menu code field smaller: no icon, placeholder "TLF code", narrower input.
       • Phone sheet drag bars much wider (easier swipe-to-close).
       Frontend-only; no backend change.
     v131 — Reveal polish + 4 bug fixes (spam protection deferred to its own build):
       • OAuth "#": ROOT FIX — client now uses flowType:'pkce', so providers return
         ?code=… (query) instead of #access_token=… (hash). No hash to clean; the
         query param is stripped cleanly after exchange. (3 prior symptom-fixes
         failed because the implicit flow keeps re-touching the hash.)
       • Reveal top section always reserves the full (named-item) height so the tier
         lists never jump; Reset now auto-selects the first pool item.
       • Lever reverted to the ball-on-a-line (straight vertical pull); dropped the
         non-3D shifting handle.
       • Reel taller + narrower, with left spacing so the reel+lever block is more
         centred and the empty space above/below is reduced.
       • Drag-drop: unified into ONE editor-wide drop system so the big overlay no
         longer lingers after a pool upload.
       • Ballot sheet: second click on the same item now closes it (matches the
         detail panel).
       • Arrow-nav: ↑/↓ now move by VISUAL LINE (geometry-based), so a wrapped row's
         second line is reachable instead of jumping to the next tier.
       Frontend-only; no backend change.
     v130 — REVEAL MODE + creator-bar refinements:
       • Detail width 300→235px; slider-score bar spans full width, mirrored on
         your side (fills toward the outer edge).
       • First pool item is preselected on open; click anywhere unselects.
       • Lever redesigned to a 3D-look plastic lever that moves straight up→down.
       • Removed the reserved name caption under tier cells; instead the top detail
         area always reserves name height so the lists don't jump for unnamed items.
       • Text items placed in tier cells auto-fit their font so they stay readable.
       • Placed items highlight like the real lists (bigger + purple border) and
         clicking one highlights the same item in BOTH lists.
       • Sounds: new placement "pop", gentler mismatch "thud", mechanical lever
         "ka-chunk".
       • Creator: community list starts visible (no initial blur); blur button moved
         to the left of the collapse arrow; "My Lists" moved next to "Account";
         code field is one combined pill with a subtle red-X on not-found (no more
         permanent error text).
       Frontend-only; no backend change.
     v129 — REVEAL MODE: realistic lever, sound FX, detail/reel fixes:
       • Detail: values now in their own aligned column (numbers stack); long
         labels wrap; the slider-score progress BAR is restored (it had collapsed
         to zero width under the edge-aligned layout).
       • Tier lists: name space is always reserved under each image, so lists no
         longer jump between named/unnamed items.
       • Reel: vertically centred between the two tier lists; no empty gap above
         the S tier (rests centred on a tier); hold free-spin is faster.
       • Realistic tall casino LEVER (long arm + ball handle) that swings down when
         pulled and springs back on release.
       • SOUND FX (Web Audio, synthesized — no files): lever clunk, per-tier ticks
         while spinning, land thunk, match/mismatch result chime. ON by default,
         persistent (localStorage), with a 🔊/🔇 toggle; audio inits on first click.
       • Creator community panel: collapse control shows the arrow from FIRST load
         (renderCreatorCommunity was overwriting it with "Hide"/"Show"); arrow tab
         height matches the neighbouring buttons.
       Frontend-only; no backend change.
     v128 — REVEAL MODE polish + creator-bar collapse fix:
       • Reveal button tooltip: custom, on-theme, appears instantly.
       • Tier-list mirroring reverted (both lists label-on-left).
       • Magnify popup: items are clickable to enlarge on top of the popup.
       • Free-spin (hold): much faster + seamless loop (no blank gap; last tier
         wraps straight to the first).
       • Lever moved to the RIGHT of the reels (slot-machine placement); verdict
         stays centred above.
       • Detail: community slider score hidden in MANUAL mode (community can't set
         sliders there); rows tightened so the value sits by its label; row layout
         mirrored so the LABEL is toward the centre image and the VALUE on the
         outer edge; more top padding above the image.
       • Creator community panel: collapse control is an arrow from first load,
         styled like the QR/share collapse tab (▲/▼).
       • Spin lab variants numbered (1–4) for easy reference.
       Frontend-only; no backend change.
     v127 — REVEAL MODE, Stage 3.4 (real lever, mirroring, magnify, spin lab):
       • Real pull-down LEVER replaces the flat button: click = full spin; click-
         and-HOLD = both reels free-spin until release, then the your-then-community
         resolve plays out (hold only extends anticipation, never the result).
       • MIRRORED layout: community detail side is right-aligned and the community
         tier list is mirrored (labels on the right, items fill from the right),
         symmetric around the centre.
       • MAGNIFY: a corner button on each tier list opens a big read-only overlay
         of that list for close inspection.
       • Reveal button in the creator bar is now ALWAYS visible (discoverable);
         disabled with a note while voting is live, enabled once closed.
       • Slider TOTAL score ("15 / 30 pts • 50%") shown regardless of list mode.
       • Body scroll locked while the stage is open (no phantom page scroll);
         bigger tier lists + items and more gap above them; highlighted pool item
         scales up with the purple frame; tier labels are white (match other views).
       • Owner-only 🧪 SPIN LAB (isAdminUser) to fire each spin style in isolation.
       Frontend-only; no backend change.
     v126 — LOGIN FIX + Reveal mode polish:
       • LOGIN BUG (regression from v119): handleAuth decided login-vs-signup by
         reading the submit button's text ("Sign In"). v119's "Last used" badge
         appends a <span> INTO that button, so its textContent became
         "Sign InLast used" ≠ "Sign In" → handleAuth called signUp → "Signups not
         allowed for this instance" on the 2nd login. Now it reads the active TAB
         (#tab-login.active), immune to button content; and the auth screen resets
         to the login tab whenever shown.
       • Reveal detail: card backgrounds removed (clean, ELO-view look); combined
         "X / Y pts • N% of maximum" score restored; titles are now YOUR RANKING /
         COMMUNITY RANKING (dropped the duplicate sub-headline).
       • Middle section: arena no longer stretches full-height, so the empty gap
         below the tier lists is gone; reels align to the top of the lists; the
         "▲ You / Community ▲" labels removed; community reel spins longer for more
         separation between the two reveals.
       • Pool: arrow-key navigation; Enter pulls the lever for the selected (not-
         yet-revealed) item; arrowing onto a revealed item just shows it.
       • Creator community-results panel: starts blurred (no spoiler) on every
         render; the hide/show blur toggle is now an up/down collapse arrow.
       Frontend-only; no backend change.
     v125 — REVEAL MODE, Stage 3.2 (detail-panel look, persistence, layout):
       • Details area rebuilt to match the regular detail panel (.vdetail/.vd-row/
         vdRow): your side + community side both render as real detail rows with
         tier swatches and purple values. Community section shows the full
         breakdown (tally / slider averages / score / votes / win-rate per mode).
       • Your tier now hidden pre-roll too (revealed on land, like community).
       • Item name hidden when the item has no name; text items show no name label.
       • Bigger centre image (the focal point beside the reels).
       • Verdict text moved ABOVE the reels; the two arrows un-stacked — one per
         reel, each at its reel's centre-slot line.
       • Tier lists height-capped (scroll inside) to reclaim vertical space; reel
         block vertically centred to the lists.
       • Item pool wraps (no horizontal scroll) and uses a lighter, on-theme bg.
       • Revealed items PERSIST per list (localStorage, keyed by list id) across
         closing/reopening the tool; a Reset button clears this list's progress.
       Frontend-only; no backend change.
     v124 — REVEAL MODE, Stage 3.1 (layout polish):
       • Stage content constrained to the creator-view width (max 1400px, centred)
         instead of full-bleed.
       • Top area is now: YOUR stats (left) · centred item image · COMMUNITY
         stats (right). The community breakdown is the full detail-panel breakdown
         (detailCommunityRows) — tier tally / slider averages / score / votes /
         win-rate per mode — revealed after the community reel lands (auto-rank
         sliders stay spoiler-safe until then).
       • Both reel arrows stacked in the CENTRE spine with the match text above
         them (was split to the sides).
       • Tier lists compacted (shorter rows, smaller labels) to reclaim vertical
         space. Frontend-only; no backend change.
     v123 — REVEAL MODE, Stage 3 (twin-reel redesign):
       • Layout reworked: item image + FULL details (name, text params, sliders)
         sit ABOVE the stage; TWO tier lists flank the centre — your ranking
         (left) and the community ranking (right); item pool moved BELOW.
       • TWIN REELS with a shared centre spine and outward-pointing arrows: your
         reel does a short honest spin and lands first (~1.2s), the community reel
         does the full suspense spin (~4s). On the community landing the spine
         flashes GREEN on a tier match / RED with the tier gap on a mismatch.
       • Items drop into each tier list only when that side's reel LANDS (yours on
         the quick land, community on the settle) — not on click. Rolled items
         leave the pool. Click a placed item to pull its details back up (no
         re-roll).
       • Reel physics: the final approach now CREEPS through the intervening tiers
         to the real target instead of hopping across far tiers — "please stop
         there" tension, no teleport.
       • Auto-rank: community slider averages stay hidden until the community reel
         lands (they ARE the ranking — no spoilers); your own sliders show pre-roll.
       • Bigger, shape-aware images, tap-to-enlarge (openSheetImg); no filename
         under images. Frontend-only; no backend change.
     v122 — REVEAL MODE, Stage 2 (real data, building lists, verdict, polish):
       • Reel now lands on the REAL community tier for the item (mode-aware:
         placement winningTier / parameter score / Elo pct — same threshold
         helpers the lists use, so it never disagrees with the results panel).
       • VERDICT + reaction scaled to the your-vs-community tier distance:
         exact match (green, "Chat agreed!"), 1 tier (near), 2+ (far, bigger
         shake). Right-side community panel unblurs with the real vote stats
         (detailCommunityRows) on landing.
       • TWO building tier lists on stage — your list (left) and the community
         list (right) — each item drops into its tier as it's revealed, so the
         comparison assembles live beneath the machine.
       • Reel FEEL: longer, more suspenseful settle (slow final creep ~+0.8s)
         and randomized endings (clean land / hesitate between two tiers / late
         nudge) for variety.
       • Bigger items that follow the list's image SHAPE (square/portrait/etc.),
         matching the detail-panel sizing, in the pool and the big hero.
       Frontend-only; reuses existing results data. No backend change.
     v121 — REVEAL MODE, Stage 1 (feel-first, dummy stop targets):
       New "🎰 Reveal mode" button in the community-results action bar, shown only
       when a voting session is CLOSED. Opens a fullscreen stage: item pool strip
       across the top, the selected item shown big, your (static) tier + stats on
       the left, and a slot-machine community reel in the centre with a lever.
       The reel spins the list's real tier rows with a weighted decelerate +
       springy settle and lands a tier in the centre slot (landing math verified).
       STAGE 1 SCOPE: the stop target is still RANDOM — real community placement,
       the right-side payoff stats, the match/mismatch reaction and the building
       community list come in Stage 2. Frontend-only; no backend change.
     v120 — Fixes + polish over v119:
       1. Arrow-key nav (item 5) now tracks the LAST-selected item explicitly
          (not container order), so the list you touched last is the one that
          moves — fixes creator- and viewer-side "wrong list responds". Viewer
          unranked items navigate too, and ↑/↓ skips empty rows (stay-put at the
          top/bottom ends, no wrap).
       2. Drag external image files anywhere over the tier list: a full-list
          "Drop images to add them to the list" overlay appears for file drags
          only (never for moving existing items) and routes them to the pool.
       3. OAuth "#": strip the bare hash on a short repeating delay after the
          provider return, catching the Supabase client's own late URL rewrite
          (fixes the leftover /# after Discord etc.).
       4. Click an already-selected item again to deselect it and close its
          detail panel / bottom sheet / ballot — in every context.
       5. Open-by-code: removed the button + modal; a compact code field is now
          embedded directly in the top menu (and at the top of the burger on
          phones) for signed-in users.
       6. Code entry now shows the correct 5-digit hint (00000, max 5) on both
          the login view and the new creator-view field.
     v119 — Batch of 6 frontend improvements (+ delete-account v3 backend, separate):
       1. OAuth return: strip any leftover bare "#" from the URL so it never
          lingers after a successful third-party sign-in.
       2. Last-used login badge: on each successful sign-in the method (email/
          google/discord/twitch) is remembered in localStorage; the auth screen
          badges the matching button with a small "Last used" tag.
       3. Drag & drop image FILES onto the item pool (and, in Elo mode, the
          Unranked band) to add them — branches on dataTransfer.files so it never
          collides with the existing item-move drag; funnels into the upload path.
       4. "Admin" button renamed to "Reports" (desktop + burger) and highlighted
          with an open-report count badge when reports are waiting; count is read
          on load and refreshed when the moderation panel closes (no polling).
       5. Arrow-key item navigation: with an item selected and its detail panel /
          bottom sheet / ballot open, ←/→ move within the row and ↑/↓ jump to the
          first item of the neighbouring row. Works in editor, ballot and viewer.
          Only the last-selected item responds (single selectedItemId).
       6. Open-by-code for signed-in users: a "🔍 Open by code" item in the user
          menu / burger opens a small modal with the 6-digit input (existing
          viewByCode path) — no need to sign out to view a list by code.
     v118 — Report console: show when a report's creator deleted their account.
       renderReport now shows "creator deleted their account on <date>" (from the
       owner_deleted_at that delete-account stamps) — this takes priority over the
       existing "list deleted by user" badge (which now shows only when the single
       list was removed while the account still exists). Pairs with admin-moderation
       v6, which forwards owner_deleted_at in list_reports. Frontend only.
     v117 — ACCOUNT DELETION frontend (Build B3; the delete-account Edge Function
       v2 + account-deletion.sql are the backend, deployed separately).
       A "Delete account" danger section at the bottom of the ⚙️ Account panel,
       HIDDEN FOR OWNERS (checked via tlf_is_owner; the function blocks owner
       self-deletion server-side anyway). Clicking it opens a confirmation modal
       explaining the permanent, irreversible effect; the final "Delete my account"
       button unlocks only once the user types DELETE. On confirm it calls
       delete-account {action:'delete'} with the caller's JWT; on success it signs
       out, clears the signed-in canvas cache, and drops to the ANONYMOUS landing
       view (enterAnonMode → manual ranking) with a farewell flash. On error it
       shows the message and stays put (nothing lost). Frontend only.
     v116 — ACCOUNT MANAGEMENT (Build A of 2 — the non-destructive part; deletion is
       a separate later build with its own Edge Function).
       (ACCOUNT PANEL) The top-menu "🔐 Security" button becomes "⚙️ Account", opening a
       reworked panel (openAccount, old openSecurity/closeSecurity kept as aliases) that
       ABSORBS the 2FA panel. New sections above the 2FA content: Your account (email,
       login method from app_metadata/identities, plan from IS_PREMIUM, premium expiry
       from premium_access) with placeholder billing fields ("—" + note) until Stripe;
       and Password (change password via updateUser) shown only for email/password
       accounts (hidden for social logins). Sign Out stays its own separate button.
       (FORGOT PASSWORD) New "Forgot password?" link on the login screen →
       resetPasswordForEmail (neutral "if an account exists…" message). The reset link
       returns in a recovery session; a new #reset-screen ("set a new password") is shown
       via the PASSWORD_RECOVERY auth event AND a boot-time hash safety net
       (#…type=recovery), then updateUser + continue into the app.
       No backend/schema change (all client-side Supabase auth calls). Deletion (Build B)
       is next: a delete-account Edge Function + strong confirmation UX.
     v115 — Small UI fixes.
       (CORNERS) The voter ranking, community results and creator-side community lists
       now round their first/last row corners too — they use .vt-row, which the v114
       .tier-row rule didn't cover, so their square rows still poked past the container.
       (SELECTION) Removed the 2px transparent border on voter pool items; it framed the
       fixed-size image with the dark background, showing as a dark line between the image
       and the purple selection/hover ring.
       (FOOTER) Nudged the ♥ 1px right so it isn't cramped against "with".
       (VIEWER HEADER) Top padding 24 → 16px; the list title now matches the creator view's
       list-name scale (1.05rem, bold) — v114's 1.5rem was too big.
       Frontend only; no backend/schema change.
     v114 — Polish pass: QR bounce, closed-mismatch note, selection ring, corners,
       Unranked band, footer, sort bar, viewer header.
       (QR) The section-slide no longer rubberbands: the target width is now read via
       scrollWidth at width:0 instead of flashing the element to width:auto (which made the
       list jump left, spring back, then shrink). It slides in cleanly from the right.
       (MISMATCH) The closed-session mode-mismatch note now shows — its logic moved into
       updateVoteModeLine (which runs on mode switch), so switching the editor to a
       different mode surfaces "The Voting ran in <mode> mode…" above Reopen/Reset.
       (SELECTION) A selected "to be ranked" voter item now uses the tier list's 4px purple
       RING + grow (no grey inner border), and no longer changes on hover — fixes the
       shrink/shift when hovering a selected item.
       (CORNERS) The first/last tier rows now round to match their container's rounded
       corners on the editor, voter-ranking and community-results lists (they kept
       overflow:visible for the hover-grow, so the square rows had been poking out).
       (UNRANKED BAND) Old #242440 background restored (stands out); dashed dividers on top
       AND bottom, full width like the tier dividers; right spacer dropped so the item area
       runs to the full right edge.
       (FOOTER) "From Berlin with ♥" — the "·" is now inline (like the copyright dots)
       rather than a gap-surrounded separator.
       (SORT BAR) Tighter vertical footprint (smaller padding/margin, 28px controls) — it's
       a low-priority row.
       (VIEWER HEADER) Logo enlarged to 50×44 to match the creator view; brand title bumped
       to 1.8rem (in sync with the creator); the list title is now bigger and white so it
       stands out.
       Frontend only; no backend/schema change.
     v113 — Section-slide fix; mode-mismatch controls kept; UI polish.
       (ANIMATION) The QR/community section slide is fixed: it now animates the container
       width 0->natural (v112 measured the already-shown full width, so it popped in). The
       section grows in from the right and the tier list shrinks smoothly.
       (MODE MISMATCH) The v112 full-panel takeover is removed — it trapped a closed
       mismatched session (Reopen/Reset vanished with no way back). The voting controls now
       always render; the mismatch message sits ABOVE them: the original explanation for an
       OPEN session, and a past-tense note ("The Voting ran in <mode> mode. Switch to
       <mode> to see the community results.") for a CLOSED one. The row-2 community RESULTS
       LIST still hides on mismatch.
       (SELECTION) The selected "to be ranked" voter item now grows (scale) like the hover
       effect, so the current pick is clearer — on manual selection and auto-advance, phone
       and desktop.
       (UNRANKED BAND) Restyled to match a tier row: full-width flush edges, an 80px label
       column (⚖️ stacked above "Unranked") aligned under the tier labels, a right spacer
       aligned with the tier controls column, and a dashed top divider. No more floating box.
       (BUTTON HEIGHTS) Community-panel buttons (🙈 / ⬇️ Download / Hide-Show), image-shape
       buttons (■ ▬ ▮ ● ⬜) and the sort-bar controls (select / ↑Asc-↓Desc / Apply / Undo)
       now share a uniform height each (emoji/glyph differences were changing button height).
       (SORT DROPDOWN) Removed the 🎚️ slider marker from the parameter dropdown — it
       rendered as an up-arrow and was mistaken for a sort-direction cue.
       Frontend only; no backend/schema change.
     v112 — Follow-ups to the v111 QR restructure + community-panel mode-mismatch rework.
       (1a) ROW-2 SPACER width fix: it reserved the QR width PLUS the row gap, double-
       counting the gap and pushing the community list 14px narrow. Now reserves exactly
       the QR width, so both tier lists (and both detail panels) line up.
       (2b) QR EXPAND/RESIZE no longer closes an open community detail: clicking the
       collapse arrow or the S/M/L buttons was treated as an outside-click that closed
       #cc-side. The QR/share column (#share-sticky-wrap) is now excluded from that check.
       (3) GHOST SHEET fixed: after an instant item-switch, the slot kept an inline
       translateY(0) that overrode the .hidden close rule, so it couldn't slide away and
       sat as an un-closable ghost under the next sheet. The inline transform is now cleared.
       (2) SECTION ANIMATION reworked to a WIDTH slide (like the detail panel): the panel
       container animates its width 0->natural with overflow:hidden, so it grows in from
       the right and the tier list shrinks smoothly, all moving together — no instant list
       resize, no clip-wipe, arrow stays put. Same feel as the QR S/M/L resize, with the
       initial reveal added.
       (COMMUNITY PANEL — mode mismatch) When a session is running/closed in a mode other
       than the one being edited, the ENTIRE row-2 community panel (list + its Hide/blur/
       download controls) is now hidden and the community detail closed; a single message
       takes over the voting panel instead ("Running in <mode> mode. Switch to <mode>…"),
       so info + controls live in one place. This also fixes the Hide/Show desync (there's
       no stray Hide button to toggle in the wrong mode) and observation-2 (clicking Show
       in a mismatched mode could surface the other mode's list until the next refresh).
       (TEXT) "Voting live" -> "Voting is live"; the "Voting closed" badge is now red to
       match the green live badge; the vote mode is named with the mode-button labels
       (Manual ranking / Auto-Rank / Elo ranking) in the mode line, setup heads, drift
       warning and the mismatch message.
       Frontend only; no backend/schema change.
     v111 — QR column restructured into row 1 (true row-bounding + aligned lists);
       section-slide reworked; sheet-switch + creator-panel polish.
       (1) QR/COMMUNITY BOUNDED TO ROW 1 (structural). The QR + community column
       (#share-sticky-wrap) is now the THIRD column INSIDE #editor-row-1 (list | detail
       | QR), not a shared column spanning both rows. As a flex child with
       align-self:flex-start its sticky containing block IS row 1, so it can never scroll
       past row 1's bottom, and a QR taller than the list just grows the row (no clipping).
       This replaces the v109/v110 max-height cap + JS height-sync (removed). To keep both
       tier lists the SAME width, row 2 reserves the QR's width on its right via an
       #editor-row2-spacer driven by --editor-rail-w (published from the live QR width by
       ResizeObserver). Both detail panels are now 290px (community detail was 280) so they
       sit directly under each other.
       (2) SECTION SLIDE reworked. The panels now live in an inner #share-panels; the
       reveal is a clip-path wipe on THAT (revealed progressively from the right, no
       reflow / no text break), and the collapse arrow — a sibling outside #share-panels —
       stays put. Replaces the v110 whole-wrap translateX (which shifted the visible block
       left and dragged the arrow along). Collapse stays instant.
       (3) SHEET SWITCH — no re-slide. On phone, tapping another item while a detail sheet
       is already open now just swaps the content with no slide (any list). The first open
       (nothing showing) still slides up. anySheetOpen() captured before the one-sheet
       close; openSlot() shows instantly on a switch.
       (4) CREATOR PANEL — Hide/Show stays in sync across Manual/Elo. renderCreatorCommunity
       now drives the community body visibility AND the button label from the single
       creatorCommunityHidden flag on every render (it used to force the body visible on
       each mode switch, desyncing the toggle).
       (5) CREATOR PANEL — its Hide/Show, blur and Download buttons no longer close an open
       row-1 detail panel. Added .creator-community-head to PROTECTED_SEL so clicking them
       doesn't trigger the global deselect.
       Frontend only; no backend/schema change.
     v110 — Follow-up fixes to the v109 batch (QR column, sheet slide, 2FA, Elo pool).
       (1) QR/COMMUNITY ROW-BOUNDING, DONE RIGHT: v109 dropped the row-1 cap to stop
       clipping, but that let the QR column scroll past row 1's bottom. Now a two-way
       sync grows #editor-row-1's min-height to the QR column's natural height (so it
       makes room — no clipping) AND caps the QR column to the resulting row-1 height
       (so it never leaves row 1). ResizeObserver on both sides, re-entry guarded.
       (2) WHOLE-SECTION SLIDE: the QR/community panel now slides in from the RIGHT as
       one block (transform+opacity on #share-sticky-wrap). v109's per-panel width slide
       grew each panel from the left and squeezed its text; the community panel didn't
       animate with it. Now QR + community move together at final width (no reflow).
       Applies to the collapse-arrow expand and the first QR show; collapse is instant.
       (3) PHONE SHEET FIRST-OPEN (round 2): v109 pre-committed translateY(100%) but the
       .as-sheet transition was live, so the commit itself animated from the ballot's
       translateX(-50%) = a diagonal from the left on the first open. Now the transition
       is disabled during the commit, then restored, so only the upward slide animates.
       (4) 24h 2FA GRACE SURVIVES LOGOUT: v109 cleared the trusted-device marker on
       sign-out, so every re-login re-challenged. The clear is removed — the per-account,
       per-browser 24h window now persists across logout (log out, log back into the same
       account within 24h → no code). Still per-account and still 24h.
       (5) ELO ENTRY — NO EMPTY POOL, NO FLASH: entering Elo briefly showed the pool
       below the list, then items jumped into the mid-list Unranked band, leaving an empty
       "Item Pool" shell. Now #pool-home is hidden in Elo, and the Unranked band is painted
       synchronously on entry (before the async ranking refresh) so items appear there at
       once. (v109's Elo->Manual/Auto band cleanup stays.)
       Frontend only; no backend/schema change.
     v109 — Voting-view + editor bugfixes; 24h trusted-device 2FA grace.
       (1) QR/COMMUNITY NO LONGER CLIPPED: the shared QR + community column was
       capped to row 1's height, so a tier list shorter than the panel clipped its
       bottom (controls unreachable). The cap is dropped — the panel takes its natural
       height and extends the row downward instead. The --editor-row1-h sync is retired.
       (2) QR/COMMUNITY SLIDES IN ON EXPAND: toggling the collapse arrow ON now runs the
       same width slide showQR uses (was an instant pop). Collapse stays instant.
       (3) PHONE SHEET FIRST-OPEN DIRECTION: on a fresh page the first open of any voter
       detail sheet slid in from the LEFT (the slot's committed base transform is the
       ballot's translateX(-50%)). openSlot() now pre-commits translateY(100%) on phone
       for every sheet + every open, so it always slides up from below. Removed the
       per-path v99.7 pre-commit from showPersonalDetail (openSlot owns it now).
       (4) 24h TRUSTED-DEVICE 2FA GRACE: after passing 2FA, this browser is trusted for
       24h (per-user, per-browser via localStorage) — no re-challenge on reload/login in
       the window. Applies to all 2FA users. The marker also satisfies the staff hard-cut
       (Supabase ties powers to a real AAL2 that a reload can't reach without a code), so
       admin/partners stay available during the window. Cleared on explicit sign-out.
       (5) ELO "UNRANKED" BAND CLEANUP: switching Elo -> Manual/Auto left the empty
       Unranked band (with #item-pool nested inside) sitting mid-list. runAutoRank and the
       manual-restore path now return the pool home + remove the band, like runEloRank.
       (6) VOTER-SHEET NAME ALIGNMENT: on phone the detail header was flush-left but
       .detail-params kept 14px left padding, so NAME/value sat left of PARAMETERS + the
       ranking blocks. Params padding zeroed on the voter slots (#vp/#vc/#vk) to match.
       (7) CREATOR-RANKING ITEM SHOWS COMMUNITY VOTES: the creator detail sheet rendered
       with the creator's own source, so the community-votes tally never appeared. The
       tally now always reads the global voteResults (score/params still the creator's),
       matching the community panel.
       (8) FOOTER: "From Berlin with ♥" added right of the T&C text (viewer + creator).
       Frontend only; no backend/schema change.
     v108 — Partner CRM: unlink + proper delete + single-use codes.
       UNLINK: a linked account can now be detached ("Unlink this account") —
       revokes its partner status and frees the record to link the correct
       account. DELETE now cuts all ties: removes the record + invite codes AND
       revokes the linked account's partner-sourced premium (source-of-truth:
       not in the partner section = no partner status). A future paid Stripe sub
       would be left untouched. INVITE CODES are now strictly single-use (the
       "max uses" field is gone) — multi-use created orphan accounts; audience/
       agency distribution is deferred to Phase 8 discount codes. Backend:
       manage-premium v6 (partner_unlink; delete revokes; single-use enforced).
       Frontend only otherwise; no editor/voting change. See SUBSCRIPTIONS-PLAN.md.
     v107 — Partner CRM fixes (stuck save, linked-email in overview, wording, copy feedback).
     v106 — Partner CRM: separate contact email from account search.
     v105 — Partner CRM restructure.
     v104 — SUBSCRIPTIONS PHASE 6 (partner invite codes).
     v101.1 — SUBSCRIPTIONS PHASE 3b (2FA enforcement) + issuer name fix.
       (1) LOGIN CHALLENGE (layer 1): any signed-in user WITH a verified TOTP
       factor must enter a 6-digit code after login / on reload before the app
       opens (full-screen #mfa-screen; Supabase aal1→aal2). Sign-out escape hatch.
       (2) STAFF HARD CUT (layer 2): an owner/moderator gets staff powers only
       with a verified factor AND aal2; un-enrolled staff see a nudge banner but
       keep normal app use (staff-features-only — lockout-safe). (3) enroll() now
       passes issuer:'Tier List Forge' so authenticators show the app name (new
       enrolments only; re-enrol to relabel). Gate hooked into onAuthSuccess() +
       boot() session-restore; all auth entry points (password/OAuth/anon popup)
       converge through it. No editor/voting changes. See SUBSCRIPTIONS-PLAN.md.
     v101 — SUBSCRIPTIONS PHASE 3a (2FA enrolment): Security panel, primary +
       backup TOTP via Supabase MFA. Enrolment only; login unchanged.
     v100 — SUBSCRIPTIONS PHASE 1 (gating foundation): premium save slots
       (free 3 / premium 5) via premium_access + app-config v4 (isPremium +
       per-tier maxLists) + IS_PREMIUM client flag. Server-enforced; no visual
       change. (Deployed live before this build.)
     v99.9 — SHARED QR COLUMN so both rows align automatically. The QR
       (#share-sticky-wrap) used to live inside row 1's .editor-rail, making row 1 a
       three-column row (list | creator detail | QR) while row 2 was two columns
       (community list | community detail). That extra column is why the community
       list never lined up with the main list. Now .main-layout is a flex ROW: a left
       area that stacks the two editor rows (row 1: list + creator detail; row 2:
       community list + community detail), and the QR pulled OUT as a shared right
       column beside both. Both lists are flex:1 in rows of identical structure, so
       they end where the QR column begins and align automatically — at any QR width.
       Removed the v99.8 --editor-rail-w reservation. The QR stays sticky (top:16px),
       height-bounded to row 1 so it top-aligns with the creator detail and stops at
       row 1's bottom. Phone still stacks single-column; the share-drawer anchor and
       v99.8 phone-sheet fix are unchanged.
     Tier List Forge — index-v99.8
     Full changelog: version-history.md (kept in the repo).
     v99.8 — two fixes.
       (1) COMMUNITY LIST ALIGNS WITH THE MAIN LIST (desktop): row 1 has the .editor-rail
       (detail + QR/share column) as a flex sibling of the main list, so the main list
       shrinks by the rail's width. Row 2 (community results) had no matching reservation,
       so the community list ran wider (by the rail width, e.g. 58px with the collapsed
       share arrow) and didn't line up. The rail now publishes its live width to a CSS
       var (--editor-rail-w), updated via ResizeObserver whenever it changes (QR shown/
       hidden/resized, share collapsed/expanded, detail opened/closed). Row 2 reserves
       that same width on its right through a spacer, minus the width #cc-side already
       occupies when open — so the community list shrinks in lockstep and stays aligned
       in every state. Phone (single column) is unaffected.
       (2) VIEWER MY-RANKING SHEET SLIDES FROM THE BOTTOM ON EVERY OPEN (phone): the
       X-button (closePersonalDetail) and swipe (clearVdetailPrompt) close paths stripped
       .as-sheet, dropping #vp-slot to its ballot transform:translateX(-50%); the next
       open then animated diagonally from the left. The outside-tap close never stripped
       it, which is why only some reopens were wrong. Those two paths now keep .as-sheet
       (safe since v99.5 made the sheet position:fixed — no in-flow gap), so every reopen
       starts from translateY(100%) and slides straight up.
     v99.7 — three fixes correcting incomplete v99.6 attempts.
       (1) VIEWER MY-RANKING CORNER-BUILD (desktop): #vp-slot gets .as-sheet on
       desktop too (setVpSheetMode isn't phone-gated), which trips the
       :not(.as-sheet) exclusion on the v98.8 anti-flicker inner pin — so the
       content reflowed into a tall narrow sliver during the width slide (the
       "builds from the corner" flicker). Added a desktop-only pin that survives
       .as-sheet: #vp-slot>*,#vc-slot>*,#vk-slot>* fixed to the slot width. Doesn't
       touch the .as-sheet logic (phone close/swipe rely on it).
       (2) QR/COMMUNITY ALIGNMENT REGRESSION (desktop): v99.6 made the QR + voting
       panels always-rendered at width:0 (instead of display:none) to animate them;
       that gave #share-sticky-wrap a layout footprint when closed, so the row-1
       detail column no longer lined up with the row-2 community detail. Reverted to
       display:none hiding (zero footprint), and the slide now uses a two-step reveal
       (display first, reflow, then animate width next frame) — the reliable pattern,
       no layout regression.
       (3) VIEWER MY-RANKING SLIDES FROM THE LEFT (phone): v99.6's reveal assumed
       #vp-slot was .hidden before opening, but opening the detail from the active
       ballot state it isn't — it sits at the ballot's translateX(-50%), so the
       transform animated diagonally from the left. Now the translateY(100%) start is
       forced explicitly (inline) before opening, regardless of the prior state.
     v99.6 — five sheet/panel animation + interaction fixes.
       (1) MY-RANKING SHEET SLIDES FROM THE BOTTOM (phone): #vp-slot's ballot role has
       transform:translateX(-50%) (full-bleed centring). Opening the detail transitioned
       from that to translateY(0), producing a diagonal-from-left slide. showPersonalDetail
       now adds .as-sheet + commits the translateY(100%) hidden start (reflow) BEFORE
       removing .hidden next frame, so it slides purely up from the bottom.
       (2) MY-RANKING SHEET CLOSE NO LONGER FADES (phone): closePersonalDetail stripped
       .as-sheet immediately, so the slot fell to the opacity-fade rule mid-close. It now
       keeps .as-sheet through the slide-out and strips it after the animation.
       (3) MY-RANKING PANEL NO LONGER BUILDS FROM THE CORNER (desktop): #right-col had no
       fixed-width inner, so its content reflowed during the width slide (built up
       diagonally) and opacity faded. Added #right-col>*{width:290px} + dropped opacity
       from the transition, matching #cc-side's clean width wipe.
       (4) QR + VOTING PANELS SLIDE INSTEAD OF POPPING (desktop): they hid via display:none,
       and a width transition can't fire reliably from display:none, so they popped. They
       now hide via width:0 + overflow:hidden + pointer-events:none (the #cc-side pattern
       that already works), always rendered, so the width slide runs. Removed the fragile
       two-step reveal JS.
       (5) VIEWER CAN CLOSE THE CREATOR-RANKING SHEET BY CLICKING THE CREATOR LIST: the
       outside-click handler excluded the whole #vote-creator-tierlist container, so a
       background click never closed the sheet. Now excludes only .vt-item, so a background
       click closes it (an item click still opens/switches) — matching the community list.
     v99.5 — four sheet/QR animation + layout fixes.
       (1) VIEWER DETAIL SHEET SLIDES (phone): #vp-slot.as-sheet / #vc-slot / #vk-slot
       animated via max-height:0->78dvh + opacity:0->1 (the opacity = a fade, and the
       height-expand isn't a real slide). They now slide up via transform:translateY
       (100%)->0 with NO opacity fade, matching the creator #item-sheet. Scoped to the
       position:fixed sheet roles; the ballot bar (#vp-slot sticky, in-flow) keeps its
       max-height collapse untouched (it needs the height-collapse to not reserve
       layout space — a documented fragile spot).
       (2) PHONE SHEET CONTENT NO LONGER LEFT-SHIFTED: the v98.8 no-reflow flicker rule
       (.detail-slot:not(.as-sheet):not(.ballot-sheet)>*{width:320px}, 300px on tablet)
       also hit detail content shown in a phone sheet, forcing it to 320px inside a
       full-width sheet so the image/title/param values were left-anchored. The width
       pin is now reset to auto on phone (<=640px); the desktop flicker fix is intact.
       (3) QR SLIDES INSTEAD OF FADING: the qr-grow-in keyframe animated max-width +
       opacity (the opacity = the fade). Replaced with the #cc-side-style real-width
       slide (width 0->190/240/320, overflow:hidden, fixed-width inner, NO opacity), so
       it wipes in like the detail panels.
       (4) SHARING PANEL BELOW THE QR NOW ANIMATES: .voting-panel just popped in
       (display:none->block). It now uses the same width-slide as the QR so the two
       animate identically. Both use a two-step reveal (show, then animate width next
       frame) since width can't animate from display:none; collapsed/drawer display
       overrides preserved.
     v99.4 — phone sheet slide + viewer live-update scaling. Pairs with backend
       votes-realtime-v2, tuning-v2, app-config-v3 (deploy those first, in the run
       order below).
       (1) PHONE SHEET SLIDES UP: the creator item-detail + community-detail bottom
       sheets popped in instead of sliding, because .show flipped display:none->block
       AND translateY(100%)->0 in one frame (a transition can't start from
       display:none). revealItemSheet() now shows the sheet at translateY(100%),
       forces a reflow, then adds .show next frame so the bottom-slide actually runs.
       closeItemSheet clears the inline display/transform so the next open is clean.
       (2) VIEWER LIVE UPDATES NOW WORK AT ALL: viewers are anonymous, and the votes
       table had no anon SELECT policy/grant, so Realtime (which enforces RLS)
       delivered nothing to them — they only updated on the poll. votes-realtime-v2
       adds a column-limited anon grant (id/session_id/created_at only) + an anon
       policy scoped to OPEN sessions, so viewer Realtime fires. Payload/fingerprint
       stay locked; hidden results stay protected at the fetch layer.
       (3) SCALING CONTROLS (tunable, read from app-config at boot): realtimeEnabled
       (off = viewers poll only, zero Realtime message spend), viewerPollMs (fallback
       poll interval, was hardcoded 12000), viewerRtJitterMs (spread). At 1000+
       viewers Realtime messages + results refetches are costly, so these throttle it.
       (4) JITTER + SKIP-IF-UNCHANGED: a Realtime ping now schedules each viewer's
       refetch after a random 0..jitter delay, so N viewers pinged by one vote spread
       their results calls instead of stampeding the aggregation function within ~1.5s.
       And applyViewerResults() skips the re-render entirely when the results signature
       (per-item tier + votes + orderScore) is unchanged, avoiding needless DOM churn.
     v99.3 — voting community-section label padding. The list column (.vote-results)
       puts gap:8px + the label's margin-bottom:5px = ~13px below its "Community
       results" label, but the detail slot's "Item details" label had only its 5px
       margin — so the two headlines didn't line up. The detail-slot label's
       margin-bottom is now 13px to match the list column. (Not adding gap to the
       whole slot, which would space out the grab/close/panel too and shift the
       section — v96.4's concern.) NOTE: pairs with backend community-order-v3, which
       fixes the tier-placement average to weight by vote count (3xS + 1xA -> S, not
       A); deploy that SQL separately.
     v99.2 — CLOSE IS INSTANT (fix of v99.1). v99.1 wrongly gave the editor detail
       (#right-col) and community detail (#cc-side) a shrink animation on CLOSE; the
       intent was an instant disappear (open still animates). The .hidden / .cc-hidden
       states now set transition:none, so closing is immediate while opening keeps its
       slide-in from the base rule.
     v99.1 — four animation refinements.
       (1) CLOSE MATCHES THE VIEWER: the editor detail (#right-col) and community
       detail (#cc-side) close states used a sequenced transition (opacity fades over
       .15s, THEN width collapses after a .15s delay), which read as a fade-out. They
       now inherit the base parallel width+opacity shrink (like the viewer's
       .detail-slot), so the close is a clean shrink, not a fade.
       (2) QR GROWS FROM THE RIGHT (no offset): the QR used a translateX transform
       (offset right, then slid into place) — it now animates WIDTH like the panels,
       growing right-to-left on show and shrinking left-to-right on hide. Switched the
       QR collapse from display:none to width:0 + overflow:hidden so width can animate.
       (3) QR + COMMUNITY SECTION IN PARALLEL: the community results section popped in
       instantly while the QR animated. #editor-row-2 now fades/slides in with the
       same duration/easing, firing together with the QR when voting starts.
       (4) COMMUNITY DETAIL ALIGN: #cc-side margin-top 37px→32px (computed from the
       ~22.6px head-button height + 10px head margin) so its top lines up with the
       community tier list.
     v99.0 — four editor-panel refinements on the v98.9 row layout.
       (1) QR TOP-ALIGNED TO THE DETAIL PANEL: the QR and editor detail were separate
       sticky elements; the shorter QR kept sticking after the taller detail hit the
       row bottom, so it drifted below the panel's frozen top. The QR's sticky travel
       is now bounded so it stops with the detail panel, staying top-aligned.
       (2) COMMUNITY DETAIL SLIDES FROM THE RIGHT: #cc-side now opens with a width
       slide (0→280px) that displaces (shrinks) the community list, exactly like the
       creator detail does to the main list — replacing the fade. overflow:hidden +
       a fixed-width inner (#cc-side>*) keeps the content from reflowing into a sliver
       during the slide (the v98.8 flicker cause).
       (3) COMMUNITY DETAIL ALIGNS TO THE TIER LIST TOP: it aligned with the "Live
       community results" title (the top of the community column). It's now offset
       down by the community head's height so its top lines up with the tier list.
       (4) QR SLIDE ON SHOW/HIDE: the QR column now animates its width when shown or
       hidden instead of appearing/disappearing instantly.
     v98.9 — ROW-BASED EDITOR LAYOUT (mirrors the viewer's scroll behaviour).
       The editor was one tall left column (main list + pool + community results)
       plus a separate full-height right column (editor detail) and a QR column, so
       the detail/QR panels weren't bounded to any list's row — with sticky removed
       (v98.7) they scrolled fully out of view; before that they pinned to the top.
       Now the editor is two explicit flex ROWS:
         Row 1: main list + pool (flex:1) | editor detail | QR
         Row 2: community results (flex:1) | community detail
       Each side panel is position:sticky; top:16px; align-self:flex-start with NO
       max-height, so: a panel shorter than its list sticks and scrolls with you
       until its bottom meets the row's (list's) bottom, then stops; a panel taller
       than its list grows the row and pushes the row below down, staying fully
       visible (the page scrolls to reveal it — no internal scroll). The QR sits
       BESIDE the editor detail, top-aligned with it, and stops when it stops; with
       no detail open the QR alone is the sticky row-bounded column. Matches the
       viewer's .vote-row/.detail-slot model, minus the viewport cap (panels here are
       always fully visible). Mobile still stacks single-column (media query intact).
       Also: CLICK-TO-CLOSE COMMUNITY DETAIL fixed — the close check ran after the
       mouseDownInProtected early-return and #creator-community-tierlist is protected,
       so a click in the community list bailed before closing. The check now runs
       before that return, so a community-list background click closes #cc-side.
     v98.8 — detail-panel layout, shared flicker fix, item hover.
       (1) COMMUNITY DETAIL BACK IN #right-col: #cc-side moved out of the .cc-layout
       row (inside the community tier-list container) and back into #right-col,
       stacked below the editor #detail-panel — so both detail panels share the
       right column, community below creator. Keeps v98.7's un-pinned scroll.
       (2+6) SHARED SLIDE-IN FLICKER FIX: the .detail-slot (viewer vp/vc/vk) and the
       old #cc-side slide animated `width` from 0, which forced the tall content into
       a near-zero-width sliver for a frame — the panel briefly rendered very narrow
       and very long, pushing everything below it down. The desktop side-panel now
       reveals via a fixed-width inner (.detail-slot-inner at 320px) clipped by the
       animating outer, so the content never reflows during the slide. Phone .as-sheet
       / .ballot-sheet modes untouched. #cc-side no longer animates width at all now
       that it's a full-width column child, so its flicker is gone too.
       (3) EDITOR DETAIL CLOSE ANIMATES: hideDetailPanel hid #detail-content instantly
       then collapsed the column, so the content vanished before the slide. It now
       lets the column's width animation carry the close, matching the open.
       (4) ITEM HOVER EVERYWHERE: the hover enlarge + purple ring existed only on the
       creator .item (and .viewer-item), with a translucent glow. All item types
       (.item, .vt-item, .vote-pool-item, .viewer-item) now get the same enlarge and
       an OPAQUE purple border ring on hover.
       (5) CLICK-TO-CLOSE COMMUNITY DETAIL: clicking the community tier-list background
       (not an item) closes #cc-side again, matching the creator list — the outside-
       click guard had excluded the whole community tierlist, blocking it.
     v98.7 — editor detail/QR scroll + two detail-panel fixes.
       (1) SCROLL BEHAVIOUR: the editor detail panel (#right-col) and the QR/share
       panel (#share-sticky-wrap) were position:sticky; top:16px, so they pinned to
       the top of the screen on scroll — the editor detail no longer aligned with
       the main list and the community detail (stacked beneath it) only sat right
       when the editor detail was open. Both are now position:relative, so they
       scroll naturally out of view as you move down to the community section. The
       community detail (#cc-side, already beside the community list since v98.5)
       therefore aligns with the top of the community tier list on its own — even
       when the editor detail is closed — matching the viewer side. Collapse-arrow
       containing block preserved (relative still establishes it).
       (2) PARAM ROW ALIGNMENT: v98.5 reserved a phantom swatch on parameter rows,
       which aligned the values but left the names indented under empty space. Param
       rows now sit flush with the section headline (no swatch indent); colored
       tier/placement rows keep their swatch. vdRow gets an explicit noSwatch flag.
       (3) SELECTION BORDER: a selected item's purple ring was a 50%-alpha box-shadow,
       so growing the item let neighbours shine through it. The ring alpha is now
       full (opaque) on both the editor (.item.selected) and voting (.vt-selected)
       selections, so the border reads cleanly over neighbours.
     v98.6 — creator community detail slide-in. The community-results detail panel
       (#cc-side, beside the live community results) was shown/hidden via a display
       toggle, which can't animate — so it popped in with no transition, unlike the
       voting view's slots. It now opens/closes by toggling the .hidden class, so it
       slides in on the same width transition the .cc-layout CSS already defined.
       No layout change — only the show/hide mechanism. (Option 2 of the community-
       detail work: the QR/share and editor detail panel are untouched.)
     v98.5 — six bundled fixes. (1) DETAIL ROW ALIGNMENT: parameter rows in the
       viewer/community detail panels lacked the color swatch that tier/placement
       rows have, so their names sat ~18px further left. vdRow now reserves the
       swatch's width with a transparent placeholder when there's no color, so
       every row's name lines up. Shared helper — fixes all detail panels, desktop
       + phone. (2) BALLOT TEXT-ITEM NAME: a text item in the manual ballot showed
       its name twice — once as the text "image" box, once again underneath. The
       name-below is now gated on it.img (matching the detail panels), so text
       items no longer double up. Desktop + phone ballot. (3) SLOT-OPEN FLICKER
       (desktop): opening a personal detail/ballot slot let its max-height jump to
       calc(100vh-32px) a frame before content sized it, briefly stretching the row
       and pushing the community list down. The visible slot is now sized by its
       content from the first frame (max-height:none once shown), so no overshoot.
       Shared across ballot + detail; phone bottom-sheet + sticky detail untouched.
       (4) CREATOR COMMUNITY DETAIL ALIGNMENT: #cc-side moved out of #right-col into
       the .cc-layout row beside #creator-community-tierlist, so it aligns with the
       "Live community results" block (like the voting view) instead of sliding to
       the top of the right column when no editor detail is open. Mobile hide
       selector broadened to keep the phone sheet the only community detail there.
       (5) REVERT LEFT OF SAVE: the Revert button now precedes Save in the DOM, so
       in the right-anchored menu it pops in on Save's LEFT and Save no longer
       shifts when it appears. (6) ANON EMPTY-LIST DISCARD: signing in from an
       untouched anonymous default list (never edited — _dirty false) no longer
       carries a blank draft into the account; it's discarded and the normal
       post-login load runs (a saved list if any, else a fresh draft). An anon list
       with ANY edit — items, params, tier-row changes, shape/mode — still carries.
     v98.4 — five bundled changes. (1) ANON RENAME: the My Lists panel is now
       reachable by anonymous users (button relabelled "✏️ List name"); it shows
       only the rename row + a save advert, hiding the saved-lists container and
       "create new" row. (2) SAVE ADVERT: a "Keep your work — create a free account
       to save up to {MAX_LISTS} lists…" block in that panel, number pulled live
       from config, with a "Sign in to save" button. (3) SHARE-PANEL COPY rewritten
       (anon): "Share your list in seconds on screen or by link and let your
       community rank your list live with Elo battles or tier placement." + "Sign
       in". (4) SAVE-ON-RENAME: for signed-in users, confirming a title change now
       saves the whole list (saved list persists rename + pending edits; unsaved
       list is created — 3-list cap handled gracefully; a rename with no change
       still no-ops so blur never saves spuriously); anon rename stays in-memory +
       cached. (5) DROP INDICATOR bar moved -10.5px -> -12.5px, the OPTICAL centre
       measured on a real screen (geometric centre looked off — the cause behind
       every prior attempt). Desktop + phone (share notice + panel work on both).
     v98.3 — ANONYMOUS LOCAL IMAGES — second half of stage 3, COMPLETING the
       anonymous "try before you sign up" flow. Anonymous users can now upload
       images: they're compressed and stored in the browser's IndexedDB (not
       Supabase), rendered from object URLs, and persist across reload (init()
       rehydrates them from IndexedDB). On sign-up the carry-over now MIGRATES
       these local images to real storage via the existing upload-image function
       and rewires each item to its real URL, ALL-OR-NOTHING: if any upload fails
       (incl. the server's 100MB storage-quota rejection) nothing is saved and the
       images stay local with a "press Save to try again" prompt; Save re-runs the
       migration. buildSaveData() strips any local ref (blob URL / localImg) as a
       safety net so a local image can never reach the server. Anon reset clears
       IndexedDB. The 25-item anon cap (v98.2) bounds how much can be piled up
       before signup. Migration is exempt from the upload rate limit (one-time).
       Desktop + phone (behavioural; no layout change). NOTE: still behind the
       ?try= dev gate — the flow is now feature-complete but the site stays gated
       until the legal pages land. Follow-ups: tuning.sql consolidation + TUNING-
       GUIDE.md (dedicated build), then docs pass (v95->v98.3) + handoff update.
     v98.2 — APP CONFIG (server-driven limits) — first half of stage 3 of the
       anonymous flow. New SQL (app-config.sql, app-config-v1) exposes the
       tlf_max_*() limits via one RPC (tlf_app_config); the app reads it once at
       boot (loadAppConfig, timeout-guarded so boot never hangs) and overwrites
       its limit constants, so numbers tuned in quota-tuning.sql now apply WITHOUT
       a frontend release. MAX_ITEMS/MAX_PARAMS/MAX_LISTS become defaults/fallbacks
       (kept if the read fails); added MAX_STORAGE_MB and a smaller anon item cap
       (MAX_ITEMS_ANON, default 25) applied via itemCap() in all add paths (upload,
       quick-add, text modal — the last also closes a pre-existing missing-cap
       gap). Console-verify with APP_CONFIG_VERSION; SQL-verify with
       select tlf_app_config_version(). REQUIRES running app-config.sql in
       Supabase. No image work yet — that's the second half of stage 3 (local
       browser images + upload-on-signup). Desktop + phone (limit logic only).
     v98.1 — ANONYMOUS "try before you sign up" flow, STAGE 2 of 3 (still behind
       the ?try= dev preview gate). Adds the in-place account popup + carry-over.
       Hitting an account gate while anonymous — Save, Start voting, or the Elo
       mode button — now opens a compact popup (Sign In / Sign Up toggle, email+
       password, and Google/Discord/Twitch) instead of a dead-end flash; the list
       stays visible behind it. On success the local anon canvas is carried into
       the new session and AUTO-SAVED, with the SERVER as judge on the list limit:
       if it fits it's saved (zero extra clicks), if the account is at its limit it
       lands as an on-screen draft with a clear "free up a slot then Save" message.
       Social logins carry over across their redirect/reload via a pending marker
       (tlf_anon_carry); the full Sign In screen carries over too (marker set on
       entry, cleared by "back to trying it out"). The sharing/community column is
       now VISIBLE to anon as a "sign in to share" notice (desktop sidebar + phone
       drawer) rather than hidden. Elo mode button gated for anon. Stage 3 = local
       (browser) images + upload-on-signup migration, plus the app-config read
       (server-driven limits). Desktop + phone (popup + share-notice on both).
     v98.0 — ANONYMOUS "try before you sign up" flow, STAGE 1 of 3 (behind a dev
       preview gate). A not-signed-in visitor who opens the site with ?try=forge
       once is remembered on that device and lands straight in the editor as an
       anonymous user: full Manual + Auto-Rank, work persisted locally in its own
       cache key ('tlm9_anon', never colliding with a logged-in 'tlm9'). Account-
       only chrome (My Lists / Sign Out / Admin) is swapped for a "Sign In" button;
       Save/community-vote/Elo are the account gates. Save while anonymous shows a
       "sign in to keep this list" flash and opens the sign-in screen (which now has
       a "back to trying it out" link for gated devices). The PUBLIC still sees
       today's auth screen unchanged — the gate is camouflage, not security (real
       protection stays server-side: Save/voting/Elo require auth + RLS). Stage 2 =
       in-place sign-up popup + carry-over of anon work; stage 3 = local (browser)
       images + upload-on-signup migration. Desktop + phone (chrome swap only).
     v97.9 — drop-indicator centering fix. The bar leaned toward the right (hovered)
       item — more room on its left — because its offset (left:-8px) didn't match
       the opened gap. Base flex gap is 6px and the make-room neighbor shifts left
       12px (was 10px), so the opened gap is ~18px; the bar now sits at left:-10.5px
       so its centre is ~9px from each side. Bar stays on the hovered item so it
       still shows for the first item in a row (no make-room neighbor there).
     v97.3 — COMMUNITY INTRA-TIER ORDERING, frontend (stage 3 of 3; needs cast-vote
       v10 + community-order.sql deployed):
       • Placement votes now send tierPos + tierCount (the item's position within
         its tier in the voter's own list, via tierOrderInfo), so the backend can
         build the community row order (average Borda + shrinkage).
       • voteReorderInto now ALWAYS sends after a reorder — a same-tier reorder is
         the core signal and previously never reached the backend — and re-sends
         the WHOLE affected tier(s) (resendTierOrder), since a reorder shifts every
         item's position (votes are upserts, so this just updates positions).
       • Community rows are sorted by the backend's orderScore (higher = front),
         live as votes arrive. Missing score sorts as 0 (safe for mixed sessions).
       Backward-compatible: with the backend not yet deployed, extra payload fields
       are ignored and orderScore is absent (rows keep their prior order).
     v97.1 — v97 follow-up fixes:
       (1) DESELECT on click-away + on selecting a POOL item: both now repaint the
           tier list so the previously-selected item's highlight clears there too.
       (2) MOBILE DRAG-SCROLL — real root cause: the voter view scrolls an INNER
           container (#viewer-screen), not the window, so window.scrollBy did
           nothing. Auto-scroll now scrolls #viewer-screen when it's active.
       (3) DROP INDICATOR: opens a real gap (padding-left, which keeps the box's
           left edge stable so there's no bounce) with the line spaced on both
           sides. Replaces the v97 margin (bounced) and the interim box-shadow (no
           gap).
       (4) END-OF-ROW: dropping on empty row space now appends to the END of the
           tier's order (even same-tier), so items can be repositioned to the end.
       (5) MANUAL prompt: "Tap a tier to vote" moved BELOW the item details, right
           above the tier buttons (was under the image).
     Phone + desktop.
     Recent: v84.6 flash fix + login-lands-on-saved-list + portrait ratio + more.
     v85.1 — community head-to-head pairing variety (viewer ballot sends lastItems;
     cast-vote v8 + elo-pairing-spread.sql v85.1). Plus: shape buttons show aspect
     ratios; creator detail panel drops the % next to the score bar and the bar
     extends fully right; viewer tier-range %s follow the RUNNING session's mode;
     mode-mismatch warnings reworded + cover Elo; drift border clears on reset/close;
     Elo tier-list entry flash fixed; QR arrow right-aligned.
     v86 — deployed as the live build of the v85.1 work (in-file APP_VERSION had not
     been bumped at deploy time; re-synced here).
     v87 — drift border now stays after CLOSING a session (until reset) and also
     appears when the editor mode differs from the SAVED mode (unsaved mode switch),
     in addition to the Save highlight; QR collapse arrow inset 14px to line up with
     the QR code (not the section edge); phone Elo ballot no longer shows the item
     name twice (kept only in the score box).
     v88 — new Revert button (next to Save, shown only when there are unsaved changes
     on a saved list) discards edits and reloads the saved version.
     v89 — phone manual/auto voting ballot is now a fixed, non-blocking bottom SHEET
     (sized to content, grab handle + swipe-down + ✕ close, tier list stays scrollable
     behind it with bottom scroll-padding); manual ballot now shows the item's
     parameters read-only (phone) for context while picking a tier; "Confirm rating"
     flashes a green "✓ Rated!" before auto-advancing (phone + desktop). Desktop
     ballot layout otherwise unchanged.
     v90 — updating an already-voted item no longer auto-advances (stays on that item;
     manual + auto); "Confirm rating" is back to a plain press animation (no green
     flash/delay); the voter's OWN auto-rank list now shows the per-tier % ranges like
     the community list; the ballot now shows the item's details (all params in manual,
     text params below the sliders in auto) read-only on phone AND desktop, styled like
     the creator detail panel.
     v91 — fixes to the v89/v90 ballot work: tier/confirm press animation plays again
     (a brief wait before the re-render that was cutting it off); the ✕ close button no
     longer leaks onto the desktop voting panel; ballot item params read from the right
     field so text values actually show (were "—") and are restyled to match the detail
     panel (no purple box); the voter's personal detail panel now shows the voter's OWN
     score for auto-rank items, like the community panel shows the community score.
     v92 — auto-rank ballot now shows a LIVE score ("X / Y pts", "N% of maximum
     score") that updates as the sliders move; the score no longer appears on closed
     MANUAL sessions (was showing whenever a list merely had sliders — now gated to
     auto-rank); detail-panel values are now purple across all panels for a uniform
     look with the manual ballot params; the Confirm-rating button now flashes green
     with a centred ✓ (subtle) instead of the grow/scale pulse.
     v93 — "Start voting" now saves the current list in the mode you're looking at,
     then starts the vote in that mode (all modes) — no more "save first" / "needs a
     saved list in Elo mode" errors; setup-panel text always reflects the current
     mode; the yellow drift border is now reserved for an actually-running session in
     a different mode (dropped for the pre-start unsaved case); removed the low-value
     "What happens when you start" label; each mode's blurb notes "Starting saves your
     current list." Detail-panel polish: all values purple (incl. the Win-rate and
     slider-score text) for a uniform look; long parameter names wrap instead of "…";
     detail panels now always list every parameter (— for empty text, 1/10 for an
     unset slider) instead of hiding entryless ones.
     v94 — new logo (shorter, pointier anvil horn; mark re-centered so it sits
     centered in circular crops like Discord) applied across the auth screen and both
     headers (favicon left as the simple tier bars). Downloads now use the list name
     as the filename and stamp a subtle Tier List Forge.com watermark into the bottom
     -right (inside the content so it can't be cropped off). Detail-panel fixes: the
     pts/% score no longer shows on manual community items (auto-rank only); empty
     sliders read 1/10 (not —) in the viewer item detail; auto-rank voter ballot now
     shows 1–10 scale labels under each slider; creator community detail says "Your
     Parameters"; the Elo explanation banner is purple (was cyan).
     v94.1 — fixes to v94: the ballot "Item details" block now shows 1/10 for an
     empty slider (was still "—"); the download watermark is repositioned correctly
     (was way off — now sits cleanly in the bottom-right, sized off the smaller image
     dimension, always on-canvas).
     v94.2 — download watermark reworked from feedback: much smaller (hard-capped so
     retina canvases don't blow it up), colorless (single muted grey, no gradient or
     colored tier bars), and reliably in the bottom-right corner within the image.
     v95 — download watermark reworked to a DOM-anchored approach: instead of drawing
     onto the raw canvas (which mis-sized/mis-placed it), a colorless grey logo + "Tier
     List Forge.com" is injected into the bottom-right of the LAST tier row just before
     html2canvas captures, then removed. Falls back to a strip appended below the list
     when the last row is too full. The browser positions it, so render-scale math can
     no longer throw it off.
     ============================================================ -->
<!DOCTYPE html>
<!--
  Tier List Forge — tierlistforge.com
  Copyright (c) 2026 Tier List Forge. All rights reserved.

  This source is delivered to the browser for the sole purpose of running the
  Service. Copying, redistributing, creating derivative works, or reverse
  engineering it is not permitted except where mandatory law allows
  (see Terms, section 10).

  Full changelog: version-history.md (kept in the repo).
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tier List Forge</title>
<!-- v84.6 — favicon as an inline SVG data URI (no external file to host). Three
     stacked tier bars in the brand gradient, longest on top. -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a855f7'/%3E%3Cstop offset='1' stop-color='%236366f1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='%231a1a2e'/%3E%3Crect x='12' y='14' width='40' height='9' rx='3' fill='url(%23g)'/%3E%3Crect x='12' y='27.5' width='30' height='9' rx='3' fill='url(%23g)'/%3E%3Crect x='12' y='41' width='20' height='9' rx='3' fill='%23F5A524'/%3E%3C/svg%3E">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
/* v137 — themed scrollbars, app-wide (previously browser default, which clashed
   with the dark theme). Slim, rounded, matches panel borders. Firefox + WebKit. */
*{scrollbar-width:thin;scrollbar-color:#2d2d44 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2d2d44;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#3a3a55}
::-webkit-scrollbar-corner{background:transparent}
/* v152 — no accidental text/item highlighting when dragging the mouse across the
   page. Re-enabled where selecting/copying is useful (fields, share link, codes,
   admin / partner / account panels). */
body{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable="true"],.qr-share-input,#qr-stream-code,#viewer-code-num,
#admin-overlay,#admin-overlay *,#partners-overlay,#partners-overlay *,#account-overlay,#account-overlay *,
.tlf-selectable,.tlf-selectable *{-webkit-user-select:text;user-select:text}
body{background:#0f0f1e radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e) fixed;color:#eee;font-family:'Segoe UI',sans-serif;min-height:100vh;padding:16px;padding-bottom:120px}
/* Global boot gate: shown until boot() decides & renders the right view. */
#app-boot-gate{position:fixed;inset:0;background:#1a1a2e;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .25s ease;opacity:1}
#app-boot-gate.hide{opacity:0;pointer-events:none}
.boot-spinner{width:42px;height:42px;border-radius:50%;border:4px solid #2d2d44;border-top-color:#a855f7;animation:boot-spin .8s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
.boot-text{color:#888;font-size:.85rem;font-weight:600}

/* AUTH SCREEN */
#auth-screen{position:fixed;inset:0;background:#0f0f1e radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e);z-index:9999;display:flex;align-items:center;justify-content:center}
#auth-screen.hidden{display:none}
/* v101.1 — full-screen 2FA CHALLENGE (layer 1). Sits above the app; only shown
   when a logged-in session has a factor but hasn't satisfied it (AAL1→AAL2). */
#mfa-screen{position:fixed;inset:0;background:#0f0f1e radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px}
/* v116 — password reset screen (recovery link landing). */
#reset-screen{position:fixed;inset:0;background:#0f0f1e radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px}
#reset-screen.show{display:flex}
#reset-screen .auth-box{gap:12px}
#mfa-screen.show{display:flex}
#mfa-screen .auth-box{gap:14px}
.mfa-err{color:#fca5a5;font-size:.8rem;text-align:center;min-height:1em;display:none}
.mfa-err.show{display:block}
.mfa-actions{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}
.mfa-signout{background:none;border:none;color:#888;font-size:.78rem;cursor:pointer;text-decoration:underline;padding:4px}
.mfa-signout:hover{color:#ccc}
/* v101.1 — staff enrolment nudge (layer 2). A small banner when an un-enrolled
   staff member is denied staff powers until they set up 2FA. */
.staff-2fa-nudge{display:none;align-items:center;gap:10px;background:#3a2a1a;border:1px solid #5a3a1a;border-left:3px solid #f59e0b;border-radius:10px;padding:10px 14px;margin:0 0 12px;color:#fdba74;font-size:.82rem;line-height:1.5}
.staff-2fa-nudge.show{display:flex}
.staff-2fa-nudge button{flex:0 0 auto;background:#f59e0b;border:none;color:#1a1a2e;font-weight:800;font-size:.78rem;padding:6px 12px;border-radius:7px;cursor:pointer}
.staff-2fa-nudge button:hover{background:#fbbf24}
.auth-box{background:#1e1e35;border:1px solid #3a3a55;border-radius:16px;padding:40px 32px;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:16px}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.auth-title{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,#a855f7,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-subtitle{font-size:.85rem;color:#888;text-align:center}
/* v119 (item 2) — "Last used" badge on the login button used last on this browser. */
.auth-lastused-host{position:relative}
.auth-lastused-tag{position:absolute;top:-8px;right:10px;background:#a855f7;color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap;z-index:2}
.auth-tabs{display:flex;gap:0;background:#2d2d44;border-radius:8px;padding:3px;width:100%}
.auth-tab{flex:1;padding:7px;background:none;border:none;color:#888;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:6px;transition:all .15s}
.auth-tab.active{background:#1a1a2e;color:#eee}
.auth-input{width:100%;padding:10px 14px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:.9rem;outline:none;-webkit-text-fill-color:#eee}
.auth-input:focus{border-color:#a855f7}
/* override browser autofill white background */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 40px #2d2d44 inset!important;
  -webkit-text-fill-color:#eee!important;
  caret-color:#eee;
  border:1px solid #444;
  border-radius:8px;
}
.auth-btn{width:100%;padding:10px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:8px;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer}
.auth-btn:hover{opacity:.85}
.auth-divider{display:flex;align-items:center;gap:10px;width:100%;color:#555;font-size:.78rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#2d2d44}
.auth-google-btn{width:100%;padding:10px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.auth-google-btn:hover{background:#3a3a55}
.auth-oauth-btn{width:100%;padding:10px;border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.auth-oauth-btn:hover{opacity:.9}
.auth-discord-btn{background:#5865F2}
.auth-twitch-btn{background:#9146FF}
.auth-error{font-size:.82rem;color:#f87171;text-align:center;display:none}
.auth-error.show{display:block}
/* v98.0 — return to the anonymous editor from the sign-in screen (gated devices only) */
.auth-back-link{background:none;border:none;color:#a855f7;font-size:.85rem;font-weight:600;cursor:pointer;padding:6px;margin-top:4px;text-align:center;width:100%}
.auth-back-link:hover{text-decoration:underline}
/* v98.0 stage 2 — in-place account popup for anonymous users */
.anon-auth-box{position:relative;max-width:360px;display:flex;flex-direction:column;gap:10px}
.anon-auth-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;line-height:1;padding:4px}
.anon-auth-close:hover{color:#ccc}
.anon-auth-head{font-size:1.05rem;font-weight:800;color:#eee;text-align:center;padding-right:18px}
.anon-auth-sub{font-size:.82rem;color:#9ca3af;text-align:center;margin-bottom:2px}
.anon-auth-box .auth-tabs{margin-top:2px}
/* v98.0 stage 2 — anonymous sharing notice (replaces live QR/voting for anon) */
.anon-share-note{width:190px;min-width:190px;box-sizing:border-box;background:#1e1e35;border:1px solid #3a3a55;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.anon-share-note-title{font-size:.85rem;font-weight:800;color:#eee;text-align:center}
.anon-share-note-body{font-size:.78rem;color:#9ca3af;line-height:1.4}
.anon-share-note-cta{font-size:.8rem;color:#c4b5fd;font-weight:600;line-height:1.4}
.anon-share-note-btn{margin-top:4px}
/* v98.4 — "Keep your work" advert shown to anon users in the My Lists panel */
.ml-anon-advert{background:#1a1a30;border:1px solid #3a3a55;border-radius:12px;padding:14px;margin:6px 0 2px;display:flex;flex-direction:column;gap:7px}
.ml-anon-advert-title{font-size:.9rem;font-weight:800;color:#eee}
.ml-anon-advert-body{font-size:.8rem;color:#9ca3af;line-height:1.45}
.ml-anon-advert-btn{margin-top:3px}
.auth-success{font-size:.82rem;color:#86efac;text-align:center;display:none}
.auth-success.show{display:block}

/* VIEWER SCREEN */
#viewer-screen{position:fixed;inset:0;background:#0f0f1e radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e);z-index:9998;display:none;flex-direction:column;align-items:center;padding:16px 16px 24px;overflow-y:auto} /* v115 — top padding 24 → 16 */
#viewer-screen.show{display:flex}
.viewer-header{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.viewer-title{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,#a855f7,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.5px} /* v114 — match the creator header brand (.site-title) so both views stay in sync */
.viewer-list-title{font-size:1.05rem;font-weight:800;color:#e8e8f5;margin-bottom:20px;text-align:center} /* v115 — match the creator view's list name (.clb-name) so both views are consistent (was v114 1.5rem) */
.viewer-updated-toast{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;font-size:.78rem;font-weight:700;padding:8px 16px;border-radius:20px;margin-bottom:14px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none;display:none;white-space:nowrap}
.viewer-updated-toast.show{opacity:1;transform:translateY(0);display:inline-block}
.viewer-tierlist{background:#1e1e35;border-radius:12px;border:1px solid #3a3a55;overflow:hidden;width:100%;max-width:800px}
/* ── Voting view (unified, editor-mirrored) ── */
.vote-view{display:none;width:100%;max-width:1150px;margin:0 auto;flex-direction:column;align-items:stretch;gap:14px}
.vote-view.show{display:flex}
/* ── v80: head-to-head matchup view ─────────────────────────────────────────
   Two cards side by side. Deliberately side-by-side on phones too: stacking
   would turn "which is better" into two separate judgements you have to hold in
   your head, which is the one thing this format is supposed to make easy. */
.h2h-view{max-width:760px;margin:0 auto 18px;padding:0 4px}
/* v81 — with side detail drawers open, the pair needs more room. Widened only
   on real desktop width; phones keep the tighter column (drawers move below). */
@media (min-width:900px){.h2h-view.h2h-has-drawers{max-width:1100px}}
.h2h-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.h2h-prompt{font-size:1.05rem;font-weight:800;color:#e8e8f5}
.h2h-progress{font-size:.8rem;color:#8a8aa0;font-weight:700;white-space:nowrap}
.h2h-pair{display:flex;gap:12px;align-items:stretch;justify-content:center}
.h2h-card{
  flex:1 1 0;min-width:0;max-width:260px;             /* v84.2 — hug the image (230 + padding); was 330 which let cards stretch wide */
  background:#1e1e35;border:2px solid #3a3a55;border-radius:14px;
  padding:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color .15s,transform .1s;
}
.h2h-card:hover{border-color:#6d5bd0}
/* v81.1 — no click-shrink: it fought the winner's grow (image dipped then grew).
   The reward animation is the only motion on click now. */
.h2h-card-img{display:flex;align-items:center;justify-content:center;width:100%}
.h2h-card-img img{object-fit:contain;border-radius:10px}
.h2h-card-name{font-size:.92rem;font-weight:700;color:#e8e8f5;text-align:center;word-break:break-word}
.h2h-card-text{display:flex;align-items:center;justify-content:center;text-align:center;
  background:#2d2d44;border-radius:10px;padding:12px 8px;font-weight:700;color:#ddd;width:100%}
.h2h-skip-wrap{text-align:center;margin-top:12px}
.h2h-skip{background:none;border:none;color:#8a8aa0;font-size:.8rem;cursor:pointer;text-decoration:underline}
.h2h-skip:hover{color:#bbb}
.h2h-done{text-align:center;padding:22px 12px;background:#1e1e35;border:1px solid #3a3a55;border-radius:14px}
.h2h-done-title{font-size:1.05rem;font-weight:800;color:#86efac;margin-bottom:6px}
.h2h-done-sub{font-size:.85rem;color:#aaa;margin-bottom:14px;line-height:1.5}
/* ── v81: vote reward, side drawers, unranked pool band ──────────────────────
   The reward classes are applied for a beat after a vote, then the pair swaps.
   Winner scales up + glows; loser dims + shrinks. A delta pill (+/- Elo) shows
   only once the backend returns deltas — dormant until then. */
.h2h-card.h2h-win{border-color:#86efac;box-shadow:0 0 0 2px #86efac,0 0 22px rgba(134,239,172,.55);transform:scale(1.05)}
.h2h-card.h2h-lose{opacity:.45;transform:scale(.92)}
.h2h-card.h2h-win,.h2h-card.h2h-lose{transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease,border-color .22s ease}
.h2h-check{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:#86efac;color:#12351f;font-weight:900;font-size:.95rem;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s;pointer-events:none}
.h2h-card.h2h-win .h2h-check{opacity:1;transform:scale(1)}
.h2h-card{position:relative}                 /* anchor for the check + delta pill */
.h2h-delta{position:absolute;bottom:10px;left:50%;transform:translateX(-50%) translateY(8px) scale(.8);
  font-size:1.05rem;font-weight:900;padding:4px 14px;border-radius:999px;opacity:0;
  transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.h2h-card.h2h-showdelta .h2h-delta{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.h2h-delta.up{background:#86efac;color:#0f3020}
.h2h-delta.down{background:#f87171;color:#3a0f0f}
/* pair fade during the swap to the next matchup */
.h2h-pair.h2h-swapping{opacity:0;transition:opacity .16s} /* v83.5 — matches 160ms resolve */
/* --- side detail drawers (desktop) --- */
.h2h-stage{display:flex;gap:14px;align-items:flex-start;justify-content:center} /* v84.2 — flex-start so a tall drawer (long name) doesn't stretch the image section; images keep their natural size */
.h2h-drawer{flex:0 1 200px;min-width:170px;max-width:300px;background:#191930;border:1px solid #33334d;border-radius:12px;
  padding:12px;overflow:auto;max-height:none}
.h2h-drawer .score-display{margin:0 0 10px}
.h2h-drawer .vd-row{font-size:.82rem}
.h2h-drawer-empty{color:#777;font-size:.82rem;text-align:center;padding:14px 4px}
/* The pair keeps its own width between the two drawers. */
.h2h-stage .h2h-pair{flex:1 1 auto}
/* --- phone fallback: drawers collapse below each card --- */
.h2h-card-detail{width:100%;margin-top:10px;background:#191930;border:1px solid #33334d;border-radius:10px;
  padding:10px;display:none}
.h2h-card-detail.show{display:block}
.h2h-card-detail .score-display{margin:0 0 8px}
.h2h-card-detail .vd-row{font-size:.8rem}
.h2h-detail-toggle{background:none;border:1px solid #3a3a55;color:#9a9ab5;font-size:.74rem;font-weight:700;
  border-radius:8px;padding:5px 10px;cursor:pointer;margin-top:8px}
.h2h-detail-toggle:hover{color:#ccc;border-color:#555}
/* v81.2 — centered down-arrow toggle (replaces the text button on phone). */
.h2h-arrow-toggle{display:block;margin:10px auto 0;background:none;border:none;cursor:pointer;
  color:#9a9ab5;padding:6px 16px;line-height:1}
.h2h-arrow-toggle .h2h-arrow{display:inline-block;font-size:1.5rem;transition:transform .2s}
.h2h-arrow-toggle.open .h2h-arrow{transform:rotate(180deg)}
.h2h-arrow-toggle:hover{color:#ccc}
/* v81.2 — long-press on a card must not select text or pop the iOS callout;
   the card is a vote button, not selectable content. */
.h2h-card,.h2h-card *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* v81.5 — the card is a tap target; manipulation lets the browser fire a clean
   click without the long-press selection/highlight getting in the way. */
.h2h-card{touch-action:manipulation}
/* v81.4 — no sideways jump when phone details open, WITHOUT starving card width.
   The v81.3 `width:0` collapsed the cards; instead stretch the pair to the full
   row and let each card take an equal half. A detail opening below is capped to
   the card's own width, so it can't widen the card. */
@media (max-width:640px), (max-height:600px) and (orientation:landscape) and (pointer:coarse){
/* v81.4 — on phone the drawers are hidden, so the stage must let the pair take
     the whole row (no centering that would leave it narrow). */
  .h2h-stage{justify-content:stretch;gap:0}
  .h2h-stage .h2h-pair{flex:1 1 100%;width:100%;box-sizing:border-box}
  .h2h-pair{justify-content:stretch;align-items:flex-start}
  /* flex-basis 0 (not 50%) so the 12px gap is absorbed by grow and two cards
     never exceed 100% — that overflow was the residual sideways jump. */
  .h2h-card{flex:1 1 0;min-width:0;max-width:none;box-sizing:border-box}
  /* the detail can never be wider than its card, so opening it can't shove the
     cards sideways. */
  .h2h-card-detail{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
  .h2h-card-detail *{max-width:100%;min-width:0;box-sizing:border-box}
}
/* v82.2 — labelled bar row: "Win rate" [====== ] 72% */
.score-bar-row{display:flex;align-items:center;gap:8px}
.score-bar-row .score-bar-wrap{flex:1 1 auto;min-width:0}
.score-bar-label{font-size:.7rem;font-weight:700;color:#9a9ab5;white-space:nowrap}
.score-bar-val{font-size:.75rem;font-weight:800;color:#a855f7;white-space:nowrap;min-width:34px;text-align:right} /* v93 — purple, uniform with other detail values */
/* v85.1 — when the bar's side text is empty (community panels / non-Elo), don't
   let it reserve width or a flex gap, so the bar extends fully to the right edge
   instead of stopping short where the hidden % used to sit. */
.score-bar-row .score-bar-label:empty,.score-bar-row .score-bar-val:empty{min-width:0;margin:0;display:none}
/* v82.1 — "Unranked" band inside the editor tier list (Elo mode). Items the
   creator has not voted on live here, mirroring the voter's community view. */
/* v114 — Unranked band tweaks: restore the old #242440 background so it stands out from
   the tier item areas; dashed dividers on BOTH top and bottom spanning the FULL width
   (like the tier-row borders, all the way right); the right spacer is dropped so the item
   area extends to the full right edge (closing the right gap). The 80px label column stays
   aligned under the tier labels. */
.elo-unranked-band{display:flex;align-items:stretch;gap:0;background:#242440;
  border-top:2px dashed #4a4a6a;border-bottom:2px dashed #4a4a6a;min-height:80px;overflow:hidden}
.elo-unranked-label{flex:0 0 auto;width:80px;min-width:80px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:8px 4px;text-align:center;
  font-size:.78rem;font-weight:800;color:#b7b7d8;letter-spacing:.3px;background:#242440}
.elo-unranked-slot{flex:1 1 auto;min-width:0;padding:10px}
.elo-unranked-icon{font-size:1rem;line-height:1} /* v113 — the ⚖️ sits on its own line above 'Unranked' */
/* the re-parented pool fills the band; its own outer spacing is neutralised */
.elo-unranked-slot #item-pool{margin:0}
/* --- v82/v83.9: creator's own head-to-head voting, now a full-width top band --- */
/* v83.9 — the wrap is a top-level band above main-layout, so it carries the same
   page framing (max-width + centre + side padding) as .main-layout. */
.ch2h-wrap{max-width:1400px;margin:0 auto 14px;padding-left:24px;padding-right:24px;box-sizing:border-box;width:100%}
.ch2h-start{text-align:center;padding:16px 12px;background:#1e1e35;border:1px solid #3a3a55;border-radius:12px}
.ch2h-hint{font-size:.8rem;color:#9a9ab5;margin-top:8px}
/* v82.2 — the creator's matchup view must look IDENTICAL to the viewer's, so it
   carries no styling of its own beyond spacing; .h2h-view supplies the rest. */
.ch2h-view{padding:0 4px}   /* v82.5 — inherit .h2h-view spacing, don't override it */
@media (min-width:900px){.ch2h-view.h2h-has-drawers{max-width:1100px}}
/* v83.9 — in the full-width band the view sizes to its content and CENTRES, so the
   matchup group (cards + drawers) sits in the middle of the page with room on both
   sides — no left-col squeeze, no stretch, no gap. Card max-width (330px) caps the
   image size; fit-content stops the group stretching. */
.ch2h-view{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
@media (max-width:640px){.ch2h-view .h2h-pair{flex:1 1 100%}.ch2h-view .h2h-card{max-width:none}}
.ch2h-actions{text-align:center;margin-top:10px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* v83.9 — Stop returns to the Start screen; neutral styling (not the reset's red,
   which is the destructive clear-my-votes action). */
.ch2h-stop{background:none;border:1px solid #3a3a55;color:#9a9ab5;font-size:.78rem;font-weight:700;
  border-radius:8px;padding:6px 12px;cursor:pointer}
.ch2h-stop:hover{background:#242440;border-color:#555;color:#ccc}
.ch2h-reset{background:none;border:1px solid #5a3a3a;color:#e08b8b;font-size:.78rem;font-weight:700;
  border-radius:8px;padding:6px 12px;cursor:pointer}
.ch2h-reset:hover{background:#2a1c1c;border-color:#7a4a4a;color:#ffaaaa}
/* --- unranked pool band in the community list --- */
.vr-pool-band{display:flex;align-items:center;gap:10px;background:#242440;border:1px dashed #4a4a6a;
  border-radius:10px;padding:8px 10px;margin:4px 0}
.vr-pool-label{font-size:.72rem;font-weight:800;color:#b7b7d8;white-space:nowrap;letter-spacing:.3px}
.vr-pool-items{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.vote-banner{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;font-size:.85rem;font-weight:700;text-align:center;padding:11px 14px;border-radius:10px}
.vote-mylist-label,.vote-pool-label,.vote-results-label{font-size:.68rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
/* per-list row: the list (flex:1) + a collapsible detail slot to its right */
.vote-row{display:flex;gap:16px;align-items:flex-start}
.vote-row .vote-left,.vote-row .vote-results{flex:1;min-width:0}
.vote-left{display:flex;flex-direction:column;gap:8px} /* v96.5 — was 16px; match .vote-results column so the "Your ranking" title gap isn't double the others */
/* detail slot uses the editor blueprint: collapses to 0 width when hidden so the
   list beside it spans full width; slides in when an item is selected */
.detail-slot{width:320px;min-width:320px;position:sticky;top:16px;align-self:flex-start;max-height:calc(100vh - 32px);overflow:hidden;transition:width .3s ease,min-width .3s ease,opacity .3s ease;opacity:1;display:flex;flex-direction:column}
.detail-slot>.vote-mylist-label{flex:0 0 auto;margin-bottom:13px} /* v99.3 — was 5px; the list column (.vote-results) has gap:8px + the label's 5px = 13px below its label, so match that here to line the two headlines up. (v96.4 had trimmed this to 5px from an oversized 21px.) */
.detail-slot .vote-ballot,.detail-slot .detail-panel{margin-top:0}
.detail-slot.hidden{width:0;min-width:0;max-height:0;opacity:0;pointer-events:none}
/* v98.8 — SLIDE-IN FLICKER FIX (the real cause). The slot animates width 320→0.
   Its children are laid out inside that shrinking width, so mid-animation they have
   almost no width and the tall content (image + params) wraps into a very narrow,
   very long column that pushes everything below it down for a frame. Pin the direct
   children to the open width so they DON'T reflow while the container width animates
   — overflow:hidden on the slot just clips/reveals them, giving a clean slide with
   no sliver. Desktop side-panel only: the phone .as-sheet / .ballot-sheet modes size
   themselves in the mobile media query and are excluded here. */
.detail-slot:not(.as-sheet):not(.ballot-sheet)>*{width:320px;box-sizing:border-box;flex-shrink:0}
/* v99.7 — the viewer slots (#vp-slot/#vc-slot/#vk-slot) get .as-sheet added on
   DESKTOP too (setVpSheetMode isn't phone-gated), which trips the :not(.as-sheet)
   exclusion above and removes the anti-flicker pin — so the content reflowed into a
   tall narrow sliver during the width slide (the "builds from the corner" look).
   Re-pin the .as-sheet form at each breakpoint too (320 desktop / 300 tablet / auto
   phone, matching the rules for the non-as-sheet form). */
#vp-slot.as-sheet>*,#vc-slot.as-sheet>*,#vk-slot.as-sheet>*{width:320px;box-sizing:border-box;flex-shrink:0}
.detail-slot.shown{max-height:none}
.detail-slot.scrolly{overflow-y:auto}
.vote-mytierlist{background:#1e1e35;border-radius:12px;border:1px solid #3a3a55;overflow:visible}
.vote-pool-wrap{display:flex;flex-direction:column}
.vote-pool{display:flex;flex-wrap:wrap;gap:8px;min-height:20px;user-select:none;-webkit-user-select:none;-moz-user-select:none}
.vote-pool-item{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;background:#2d2d44;display:flex;align-items:center;justify-content:center} /* v115 — dropped the 2px transparent border: it framed the fixed-size image with the dark background, showing as a dark line between the image and the purple selection/hover ring */
.vote-pool-item.current{border-color:transparent;box-shadow:0 0 0 4px rgb(168,85,247),0 0 16px rgba(168,85,247,.4);transform:scale(1.08);z-index:10;position:relative} /* v114 — match the tier list's .item.selected: a 4px opaque purple RING (not the 2px inner border) + grow, so there's no grey/inner border and the image doesn't sit inside a border */
.vote-pool-item img{display:block}
body.shape-square .vote-pool-item.vote-img,body.shape-square .vote-pool-item.vote-text{width:64px;height:64px}
body.shape-square .vote-pool-item.vote-img img{width:64px;height:64px;object-fit:cover}
body.shape-landscape .vote-pool-item.vote-img,body.shape-landscape .vote-pool-item.vote-text{width:96px;height:64px}
body.shape-landscape .vote-pool-item.vote-img img{width:96px;height:64px;object-fit:cover}
body.shape-portrait .vote-pool-item.vote-img,body.shape-portrait .vote-pool-item.vote-text{width:69px;height:96px}
body.shape-portrait .vote-pool-item.vote-img img{width:69px;height:96px;object-fit:cover}
body.shape-round .vote-pool-item.vote-img,body.shape-round .vote-pool-item.vote-text{width:64px;height:64px;border-radius:50%}
body.shape-round .vote-pool-item.vote-img img{width:64px;height:64px;object-fit:cover;border-radius:50%}
body.shape-nocrop .vote-pool-item.vote-img{max-width:96px;height:64px}
body.shape-nocrop .vote-pool-item.vote-img img{max-width:96px;height:64px;object-fit:contain}
body.shape-nocrop .vote-pool-item.vote-text{max-width:96px;height:64px}
.vote-pool-item .vt-text{font-size:.62rem;text-align:center;padding:4px;color:#ccc;word-break:break-word;line-height:1.15}
/* big detail / ballot */
/* v79.7 — 13px + the 1px border below = a 14px inset, matching .detail-header,
   so the ballot image and the community detail image end up the same width. */
.vote-ballot{background:#1e1e35;border:1px solid #3a3a55;border-radius:14px;padding:13px}
.vote-ballot-empty{text-align:center;font-size:.9rem;color:#86efac;font-weight:600;padding:16px}
.vote-ballot-card{display:flex;flex-direction:column;align-items:center;gap:10px}
/* v92 — live score readout inside the auto-rank ballot (mirrors .vid-score). */
.vb-score{width:100%;background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(99,102,241,.15));border:1px solid rgba(168,85,247,.3);border-radius:10px;padding:9px 14px}
.vb-score-main{font-size:1.15rem;font-weight:800;color:#a855f7;text-align:center}
.vb-score-pct{font-size:.72rem;color:#888;text-align:center;margin-top:2px}
.vb-score-bar{margin-top:8px;background:#2d2d44;border-radius:6px;height:8px;overflow:hidden}
.vb-score-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#6366f1,#a855f7);width:0%;transition:width .25s}
.vote-ballot-img{display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;width:100%}
.vote-ballot-img img{object-fit:cover;max-width:100%}
.vote-ballot-img .vb-text{display:flex;align-items:center;justify-content:center;text-align:center;background:#2d2d44;border-radius:14px;padding:10px;font-size:1.15rem;font-weight:700;color:#ddd;word-break:break-word;width:100%}
.vote-ballot-name{font-size:1.05rem;font-weight:800;color:#fff;text-align:center}
.vote-ballot-prompt{font-size:.72rem;color:#999;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
/* v89/v90/v91 — ballot read-only parameter list (context while voting), styled to
   match the creator detail panel (.vid-param-row): no filled box, just rows with a
   separator line, grey name + purple value. Phone AND desktop. */
.vb-ro-params{width:100%;display:flex;flex-direction:column;gap:0;margin:6px 0 8px}
.vb-ro-title{font-size:.7rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.vb-ro-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem;padding:7px 0;border-bottom:1px solid #2d2d44}
.vb-ro-name{color:#aaa;font-weight:600;flex:1 1 auto;min-width:0;word-break:break-word}
.vb-ro-val{color:#a855f7;font-weight:700;white-space:nowrap;flex:0 0 auto}
.vb-ro-row{align-items:flex-start} /* v148 — long text values wrap (max 60%), like the detail panels */
.vb-ro-val{white-space:normal;flex:0 1 auto;max-width:60%;overflow-wrap:anywhere;text-align:right}
/* v91 — the ballot ✕ close button belongs to the PHONE sheet only. Its display:none
   used to live only inside the phone media query, so on desktop it showed as a stray
   white bar with an ✕ over the voting detail panel. Hide it globally; the phone
   .ballot-sheet rule re-shows it. */
.ballot-close{display:none}
.detail-close{display:none} /* v96.2 — shown only on phone in detail sheets (see mobile rules) */
.vote-tier-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.vote-tier-btn{min-width:52px;padding:12px 16px;border:none;border-radius:10px;font-size:1.05rem;font-weight:800;color:#fff;cursor:pointer;transition:transform .08s;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.vote-tier-btn:hover{transform:scale(1.08)}
.vote-tier-btn:active{transform:scale(.94)}
.vote-tier-btn.tapped{animation:tier-tap .28s ease}
@keyframes tier-tap{0%{transform:scale(1)}40%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(255,255,255,.35)}100%{transform:scale(1)}}
.vote-tier-btn.mine{outline:3px solid #fff;outline-offset:1px}
.vote-progress{text-align:center;font-size:.78rem;color:#aaa;margin-top:10px}
/* Shared read-only detail (mirrors creator .detail-panel) */
.vdetail-panel{padding-bottom:14px}
.vdetail-back{margin:12px 12px 0;background:#2d2d44;border:none;color:#a5b4fc;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer}
.vdetail-back:hover{background:#3a3a55}
.vdetail-name-ro{font-size:1rem;font-weight:700;color:#fff;padding:2px 0}
.detail-text-item{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:1.05rem;font-weight:700;color:#ddd;word-break:break-word}
.vd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.82rem;color:#ccc;padding:3px 0}
.vd-row .vd-tier{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.vd-tier-name{word-break:break-word;overflow-wrap:anywhere} /* v93 — wrap long param names instead of ellipsis */
.vd-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0}
.vd-count{color:#a855f7;font-weight:700;flex-shrink:0;white-space:nowrap} /* v92 — purple values, uniform with the manual-ballot params look */
.vdetail-empty{color:#888;font-size:.85rem;text-align:center;padding:24px 14px}
/* Unified read-only detail panel (community/closed/static) in the right column */
.vdetail{background:#1e1e35;border:1px solid #3a3a55;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.vdetail-back{align-self:flex-start;background:#2d2d44;border:none;color:#a5b4fc;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer;margin-bottom:2px}
.vdetail-back:hover{background:#3a3a55}
.vdetail-img{width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto}
.vdetail-img img{display:block}
body.shape-square .vdetail-img{aspect-ratio:1/1;max-width:240px;border-radius:10px}
body.shape-square .vdetail-img img{width:100%;height:100%;object-fit:cover}
body.shape-landscape .vdetail-img{aspect-ratio:3/2;max-width:280px;border-radius:10px}
body.shape-landscape .vdetail-img img{width:100%;height:100%;object-fit:cover}
body.shape-portrait .vdetail-img{aspect-ratio:285/399;max-width:190px;border-radius:10px}
body.shape-portrait .vdetail-img img{width:100%;height:100%;object-fit:cover}
body.shape-round .vdetail-img{aspect-ratio:1/1;max-width:220px;border-radius:50%}
body.shape-round .vdetail-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
body.shape-nocrop .vdetail-img{aspect-ratio:auto;max-height:240px}
body.shape-nocrop .vdetail-img img{max-width:100%;max-height:240px;object-fit:contain;border-radius:10px}
.vdetail-name{font-size:1rem;font-weight:800;color:#fff;text-align:center}
.vdetail-section-title{font-size:.62rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.6px;margin-top:4px}
.vdetail-breakdown,.vdetail-placement,.vdetail-params,.vdetail-score{display:flex;flex-direction:column;gap:4px}
.vdetail-empty{color:#888;font-size:.8rem;text-align:center;padding:20px 8px}
.vd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem;color:#ccc}
.vd-row .vd-tier{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.vd-tier-name{word-break:break-word;overflow-wrap:anywhere} /* v93 — wrap long param names instead of ellipsis */
.vd-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0}
.vd-count{color:#a855f7;font-weight:700;flex-shrink:0;white-space:nowrap} /* v92 — purple values, uniform */
/* v147 — long TEXT param values wrap (up to 60% of the row) instead of squeezing the
   name and clipping; the name sits at the top when the value wraps. Short values
   (1/10, 3 votes, S) are unchanged. Applies to every detail panel. */
.vd-row{align-items:flex-start}
.vd-count{flex:0 1 auto;max-width:60%;white-space:normal;overflow-wrap:anywhere;text-align:right}
/* shared tier-list rendering (voter list + community) */
.vt-row{display:flex;align-items:stretch;gap:0;min-height:80px;border-bottom:1px solid #2d2d44;overflow:visible}
/* v115 — round the first/last .vt-row outer corners so these lists follow their
   container's 12px rounding, same as the editor's .tier-row (v114). These lists use
   .vt-row (label + items, no controls column), so the right corner rounds .vt-items.
   Covers the voter's ranking (.vote-mytierlist), the community results
   (.vote-results-tierlist) and the creator-side community list (#creator-community-tierlist). */
.vote-mytierlist .vt-row:first-child .vt-label,
.vote-results-tierlist .vt-row:first-child .vt-label,
#creator-community-tierlist .vt-row:first-child .vt-label{border-top-left-radius:11px}
.vote-mytierlist .vt-row:last-child .vt-label,
.vote-results-tierlist .vt-row:last-child .vt-label,
#creator-community-tierlist .vt-row:last-child .vt-label{border-bottom-left-radius:11px}
.vote-mytierlist .vt-row:first-child .vt-items,
.vote-results-tierlist .vt-row:first-child .vt-items,
#creator-community-tierlist .vt-row:first-child .vt-items{border-top-right-radius:11px}
.vote-mytierlist .vt-row:last-child .vt-items,
.vote-results-tierlist .vt-row:last-child .vt-items,
#creator-community-tierlist .vt-row:last-child .vt-items{border-bottom-right-radius:11px}
.vt-row:last-child{border-bottom:none}
.vt-row:not(:last-child){border-bottom:1px solid #2d2d44}
.vt-label{width:80px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1rem;padding:8px 4px;text-align:center;word-break:break-word;overflow-wrap:anywhere;line-height:1.05;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vt-label-range{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.85);margin-top:3px;white-space:nowrap}
.vt-items{flex:1;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:6px;padding:10px;min-height:80px;background:#1e1e35;overflow:visible;user-select:none;-webkit-user-select:none;-moz-user-select:none}
.vt-item{border-radius:6px;overflow:hidden;background:#2d2d44;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vt-item img{display:block}
/* shape-aware content cropping — matches the creator tier list (.item.img-item, 80px) */
body.shape-square .vt-item.vote-img,body.shape-square .vt-item.vote-text{width:80px;height:80px}
body.shape-square .vt-item.vote-img img{width:80px;height:80px;object-fit:cover}
body.shape-landscape .vt-item.vote-img,body.shape-landscape .vt-item.vote-text{width:120px;height:80px}
body.shape-landscape .vt-item.vote-img img{width:120px;height:80px;object-fit:cover}
body.shape-portrait .vt-item.vote-img,body.shape-portrait .vt-item.vote-text{width:86px;height:120px}
body.shape-portrait .vt-item.vote-img img{width:86px;height:120px;object-fit:cover}
body.shape-round .vt-item.vote-img,body.shape-round .vt-item.vote-text{width:80px;height:80px;border-radius:50%}
body.shape-round .vt-item.vote-img img{width:80px;height:80px;object-fit:cover;border-radius:50%}
body.shape-nocrop .vt-item.vote-img{max-width:120px;height:80px}
body.shape-nocrop .vt-item.vote-img img{max-width:120px;height:80px;object-fit:contain}
body.shape-nocrop .vt-item.vote-text{max-width:120px;height:80px}
.vt-dragging{opacity:.45}
.vt-row-drop{outline:2px dashed #a855f7;outline-offset:-2px;background:rgba(168,85,247,.08)}
.vote-pool-item[draggable="true"]{cursor:grab}
.vt-item img{width:100%;height:100%;object-fit:cover}
.vt-item .vt-text{font-size:.62rem;text-align:center;color:#bbb;padding:3px;word-break:break-word;line-height:1.15}
.vt-item.vote-text{overflow:hidden}
.vt-item.vote-text .vt-text{padding:2px 4px;max-height:100%;overflow:hidden}
/* v152 — PHONE viewer: tier-list items take the pool item size */
@media(max-width:640px),(max-height:600px) and (orientation:landscape) and (pointer:coarse){
  body.shape-square #viewer-screen .vt-item.vote-img,body.shape-square #viewer-screen .vt-item.vote-text,
  body.shape-square #viewer-screen .vt-item.vote-img img{width:64px;height:64px}
  body.shape-landscape #viewer-screen .vt-item.vote-img,body.shape-landscape #viewer-screen .vt-item.vote-text,
  body.shape-landscape #viewer-screen .vt-item.vote-img img{width:96px;height:64px}
  body.shape-portrait #viewer-screen .vt-item.vote-img,body.shape-portrait #viewer-screen .vt-item.vote-text,
  body.shape-portrait #viewer-screen .vt-item.vote-img img{width:69px;height:96px}
  body.shape-round #viewer-screen .vt-item.vote-img,body.shape-round #viewer-screen .vt-item.vote-text,
  body.shape-round #viewer-screen .vt-item.vote-img img{width:64px;height:64px}
  body.shape-nocrop #viewer-screen .vt-item.vote-img,body.shape-nocrop #viewer-screen .vt-item.vote-text,
  body.shape-nocrop #viewer-screen .vt-item.vote-img img{max-width:96px;height:64px}
  #viewer-screen .vt-items{min-height:64px}
}
/* community results block */
.vote-results{background:transparent;border:none;border-radius:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vote-results-layout{display:flex;gap:14px;align-items:flex-start}
.vote-results-layout .vote-results-tierlist{flex:1;min-width:0}
.vote-results-side{width:280px;flex-shrink:0;background:#1e1e35;border:1px solid #3a3a55;border-radius:12px;padding:14px;position:sticky;top:16px}
.vrs-empty{color:#888;font-size:.8rem;text-align:center;padding:24px 8px}
.vrs-card{display:flex;flex-direction:column;gap:8px}
.vrs-img{width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto}
.vrs-img img{display:block}
/* shape-aware detail image — mirrors the creator .detail-img-wrap rules */
body.shape-square .vrs-img{aspect-ratio:1/1;max-width:240px;border-radius:10px}
body.shape-square .vrs-img img{width:100%;height:100%;object-fit:cover}
body.shape-landscape .vrs-img{aspect-ratio:3/2;max-width:280px;border-radius:10px}
body.shape-landscape .vrs-img img{width:100%;height:100%;object-fit:cover}
body.shape-portrait .vrs-img{aspect-ratio:285/399;max-width:190px;border-radius:10px}
body.shape-portrait .vrs-img img{width:100%;height:100%;object-fit:cover}
body.shape-round .vrs-img{aspect-ratio:1/1;max-width:220px;border-radius:50%}
body.shape-round .vrs-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
body.shape-nocrop .vrs-img{aspect-ratio:auto;max-height:240px}
body.shape-nocrop .vrs-img img{max-width:100%;max-height:240px;object-fit:contain;border-radius:10px}
.vrs-img .vrs-txt{width:100%;text-align:center;background:#2d2d44;border-radius:10px;padding:18px 10px;font-size:1.05rem;font-weight:700;color:#ddd;word-break:break-word}
.vrs-name{font-size:1rem;font-weight:800;color:#fff;text-align:center}
.vrs-section-title{font-size:.62rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.6px;margin-top:4px}
.vrs-breakdown,.vrs-params{display:flex;flex-direction:column;gap:4px}
.vrs-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem;color:#ccc}
.vrs-row .vrs-tier{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.vrs-tier-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrs-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0}
.vrs-count{color:#eee;font-weight:700;flex-shrink:0;white-space:nowrap}
.vrs-winner{border-top:1px solid #2d2d44;margin-top:4px;padding-top:6px;font-weight:800;color:#fff}
@media(max-width:720px){
  .vote-results-layout{flex-direction:column}
  .vote-results-side{width:100%;position:static}
}
.vote-results-tierlist{display:flex;flex-direction:column;background:#1e1e35;border:1px solid #3a3a55;border-radius:12px;overflow:visible}
.vote-results-hidden{text-align:center;font-size:.82rem;color:#f5d9a5;padding:10px}
/* mobile: stack, ballot+pool FIRST, then the list, then community */
@media(max-width:720px){
  .vote-layout{flex-direction:column}
  .vote-right{width:100%;position:static;order:-1}
  .vote-left{width:100%}
}
/* creator-side community panel */
.creator-community{flex:1;min-width:0;background:transparent;border:none;border-radius:0;padding:0} /* v98.9 — flex:1 in row 2 (was margin-top:16px stacked); the row gap handles spacing */
.creator-community-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
/* v141 — creator list header, mirroring the community head; v143 — full-width band above the columns */
.creator-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 auto 6px;flex-wrap:wrap;max-width:1352px;width:100%;box-sizing:border-box}
.creator-list-head .current-list-banner{margin-bottom:0;justify-content:flex-start}
.creator-list-head-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.creator-community-title{font-size:.82rem;font-weight:800;color:#eee}
.creator-community-toggle{background:#2d2d44;border:none;color:#a5b4fc;font-size:.7rem;font-weight:700;padding:0 10px;border-radius:6px;cursor:pointer;height:26px;display:inline-flex;align-items:center;justify-content:center;line-height:1} /* v113 — fixed height + inline-flex so the emoji buttons (🙈 / ⬇️ Download) and the text-only Hide/Show button are all the same height */
.creator-community-actions{display:flex;gap:6px;align-items:center}
/* ── v121/v123 — REVEAL MODE (slot-machine) stage ────────────────────────── */
.cc-reveal-btn{background:#2a2411!important;border:1px solid #5a4a1e!important;color:#f5d9a5!important}
.cc-reveal-btn:hover{background:#3a3218!important;border-color:#7a6528!important}
.cc-reveal-btn.is-disabled{opacity:.5;cursor:not-allowed}
.cc-reveal-btn.is-disabled:hover{background:#2a2411!important;border-color:#5a4a1e!important}
/* v128 — fast, on-theme tooltip (no browser-default delay) */
.tlf-tip{position:relative}
.tlf-tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:#1e1e35;color:#e9e9f5;border:1px solid #3a3a55;border-radius:8px;padding:6px 10px;font-size:.72rem;font-weight:600;
  white-space:nowrap;max-width:280px;box-shadow:0 4px 14px rgba(0,0,0,.45);opacity:0;pointer-events:none;z-index:60;
  transition:opacity .1s ease,transform .1s ease}
.tlf-tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.tlf-tip::after{white-space:normal;width:200px}}
/* ── v154 — SITE CONTROLS: maintenance page, owner bar, owner panel ── */
#maint-screen{position:fixed;inset:0;z-index:100002;display:none;align-items:center;justify-content:center;padding:24px;background:#0f0f1e radial-gradient(1200px 700px at 50% -10%,#241a3e,#15152a 60%,#0f0f1e)}
#maint-screen.show{display:flex}
.maint-box{max-width:460px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.maint-brand{font-size:1.4rem;font-weight:900;letter-spacing:-.5px;background:linear-gradient(135deg,#a855f7,#6366f1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.maint-title{font-size:1.6rem;color:#eee;margin-top:8px}
.maint-msg{color:#b9b9d0;font-size:.95rem;line-height:1.55;white-space:pre-wrap}
.maint-actions{margin-top:18px}
.maint-link{background:none;border:none;color:#8a8aa8;font-size:.78rem;text-decoration:underline;cursor:pointer}
.maint-link:hover{color:#c4b5fd}
#maint-owner-bar{position:fixed;top:0;left:0;right:0;z-index:100001;display:none;align-items:center;justify-content:center;gap:10px;background:#7f1d1d;color:#fecaca;font-size:.8rem;font-weight:700;padding:5px 10px}
#maint-owner-bar.show{display:flex}
#maint-owner-bar button{background:#fecaca;color:#7f1d1d;border:none;border-radius:6px;font-size:.72rem;font-weight:800;padding:3px 8px;cursor:pointer}
.sc-panel{background:#1a1a2e;border:1px solid #3a3a55;border-radius:12px;padding:12px 14px;margin-bottom:16px}
.sc-head{font-weight:800;color:#eee;font-size:.95rem;margin-bottom:10px}
.sc-sub{font-size:.68rem;font-weight:600;color:#8a8aa8;margin-left:6px}
.sc-row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:9px 0;border-top:1px solid #2d2d44}
.sc-row:first-child{border-top:none}
.sc-row.sc-alert{background:rgba(127,29,29,.25);border-radius:8px;padding:9px 8px}
.sc-name{font-size:.84rem;font-weight:700;color:#e5e5f0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-tag{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:999px}
.sc-tag.srv{background:rgba(34,197,94,.15);color:#86efac}
.sc-tag.app{background:rgba(245,165,36,.15);color:#fcd34d}
.sc-desc{font-size:.72rem;color:#9a9ab5;line-height:1.4;margin-top:2px}
.sc-seg{display:inline-flex;background:#15152a;border:1px solid #3a3a55;border-radius:8px;padding:2px;gap:2px}
.sc-opt{background:none;border:none;color:#9a9ab5;font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.sc-opt:hover{color:#fff}
.sc-opt.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff}
.sc-opt.active.is-off{background:#4b5563}
.sc-maint .sc-opt.active:not(.is-off){background:#dc2626}
.sc-msgrow{grid-column:1 / -1;display:flex;gap:8px;align-items:flex-start}
.sc-msg{flex:1;min-width:0;background:#15152a;border:1px solid #3a3a55;border-radius:8px;color:#eee;font-family:inherit;font-size:.8rem;padding:7px 9px;resize:vertical}
@media(max-width:640px){.sc-row{grid-template-columns:1fr}.sc-msgrow{flex-direction:column}}
/* ── v141 — PRESENTATION MODE ── */
#present-stage{position:fixed;inset:0;z-index:10002;background:radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e);display:none;padding:16px 16px 24px;box-sizing:border-box;overflow-y:auto;scrollbar-gutter:stable} /* v147 — scrolls as a page; 16px padding + reserved scrollbar gutter = the creator page's body padding + scrollbar, so the header lines up exactly */
#present-stage.show{display:block}
/* v147 — the topbar mirrors .site-header exactly (relative flex, centred, min-height 54px)
   with the controls absolutely placed like .user-menu; the brand uses the same h1.site-title. */
.present-topbar{position:relative;z-index:40;display:flex;align-items:center;justify-content:center;min-height:54px;margin:0 0 32px}
.present-brand{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer}
.present-controls{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.present-ctl{height:30px;box-sizing:border-box;padding:0 12px;line-height:28px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#ccc;font-size:.78rem;cursor:pointer;font-weight:600;white-space:nowrap} /* v148 — 30px like the menu buttons */
.present-ctl:disabled{opacity:.4;cursor:default}
.present-ctl:hover{background:#3a3a55;color:#fff}
.present-style-toggle{display:inline-flex;height:30px;box-sizing:border-box;background:#1a1a2e;border:1px solid #3a3a55;border-radius:8px;padding:2px;gap:2px} /* v148 — 30px */
.pst-opt{height:24px;box-sizing:border-box;background:none;border:none;color:#9a9ab5;font-size:.78rem;font-weight:600;padding:0 10px;line-height:24px;border-radius:6px;cursor:pointer;white-space:nowrap}
.pst-opt.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff}
.present-arena{display:flex;gap:20px;width:100%;max-width:1400px;margin:0 auto;align-items:flex-start} /* v147 — no height cap: the stage scrolls */
.present-listcol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.present-titlebar{max-width:1400px;width:100%;margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} /* v149 — title left, hide controls right */
.present-title-ctls{display:flex;align-items:center;gap:8px}
/* v149 — "Hide as" group: one frame so the style toggle reads as part of Hide all */
.present-hide-group{display:inline-flex;align-items:center;height:30px;box-sizing:border-box;background:#1a1a2e;border:1px solid #3a3a55;border-radius:8px;padding:2px;gap:2px}
.phg-label{font-size:.72rem;font-weight:700;color:#8a8aa8;text-transform:uppercase;letter-spacing:.5px;padding:0 6px 0 8px;white-space:nowrap}
.phg-sep{width:1px;height:18px;background:#3a3a55;margin:0 4px}
.pst-opt.phg-act{color:#e0e0f0}
.pst-opt.phg-act:hover{background:#2d2d44;color:#fff}
.present-ctl.active{background:#3a3a55;color:#fff;border-color:#a855f7}
/* v150 — "Hide all ▾" split button with a style menu */
.p-hide-split{position:relative;display:inline-flex}
.p-hide-split .p-hs-main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.p-hide-split .p-hs-caret{border-top-left-radius:0;border-bottom-left-radius:0;padding:0 8px;border-left:1px solid #555}
.p-hs-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:170px;background:#1e1e35;border:1px solid #3a3a55;border-radius:10px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.p-hs-menu.show{display:block}
.p-hs-title{font-size:.66rem;font-weight:700;color:#8a8aa8;text-transform:uppercase;letter-spacing:.6px;padding:6px 8px 4px}
.p-hs-opt{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;color:#ddd;font-size:.8rem;font-weight:600;padding:7px 8px;border-radius:7px;cursor:pointer;text-align:left;white-space:nowrap}
.p-hs-opt:hover{background:#2d2d44;color:#fff}
.p-hs-check{display:inline-block;width:14px;color:#a855f7;visibility:hidden}
.p-hs-ic{display:inline-flex;justify-content:center;width:22px;flex:0 0 22px} /* v153 — fixed icon slot: texts line up */
.p-hs-opt.active .p-hs-check{visibility:visible}
@media(max-width:1500px){#present-stage .pc-tx.pc-c1{display:none}}
/* v151 — Details on/off switch */
.present-ctl.p-switch-btn{display:inline-flex;align-items:center;gap:8px}
.p-switch{position:relative;display:inline-block;width:26px;height:14px;border-radius:7px;background:#4a4a66;transition:background .15s;flex:0 0 auto}
.p-switch-knob{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#bbb;transition:left .15s,background .15s}
.p-switch-btn.on .p-switch{background:#a855f7}
.p-switch-btn.on .p-switch-knob{left:14px;background:#fff}
.p-hs-opt:disabled{opacity:.45;cursor:default}
.p-hs-opt:disabled:hover{background:none;color:#ddd}
.p-hs-note{font-size:.66rem;color:#8a8aa8;padding:0 8px 6px 56px}
.p-hs-sep{height:1px;background:#3a3a55;margin:4px 6px}
/* v151 — poker-deck faces (admin test). Shown only on hidden cells in Face-down style. */
.p-pk{display:none}
:is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden>.p-pk{display:block;opacity:1}
:is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden.p-poker::before,
:is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden.p-poker::after{display:none}
.p-pk{position:absolute;inset:0;z-index:5;box-sizing:border-box;border:1.5px solid transparent;border-radius:inherit;container-type:size;overflow:hidden;color:#e9d5ff;font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(#221c42,#221c42) padding-box,linear-gradient(135deg,#a855f7,#6366f1) border-box} /* v152/v153 — flat face, gradient border */
.p-pk.pk-red{color:#ff6b81}
.pk-wm{position:absolute;left:50%;top:50%;width:72cqw;transform:translate(-50%,-50%);opacity:.08;pointer-events:none;line-height:0}
.pk-wm svg,.pk-logo svg{display:block;width:100%;height:auto}
.pk-logo{position:absolute;width:13cqw;line-height:0;opacity:.95}
.pk-logo.tr{top:5cqh;right:6cqw}
.pk-logo.bl{bottom:5cqh;left:6cqw;transform:rotate(180deg)}
.pk-corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:800;font-size:10cqh;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.pk-corner.tl{top:4cqh;left:6cqw}
.pk-corner.br{bottom:4cqh;right:6cqw;transform:rotate(180deg)}
.pk-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.pk-center .pk-r{font-size:24cqh} /* v154 — smaller */
.pk-center .pk-s{font-size:20cqh}
.pk-pip{position:absolute;transform:translate(-50%,-50%);font-size:12cqh;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.pk-pip.flip{transform:translate(-50%,-50%) rotate(180deg)}
.pk-ace{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:32cqh;line-height:1;text-shadow:0 3px 12px rgba(0,0,0,.5)}
.pk-court{position:absolute;inset:24cqh 23cqw;border:1.5px solid currentColor;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:rgba(168,85,247,.08)}
.pk-court .pk-r{font-size:22cqh;font-weight:800}
.pk-court .pk-s{font-size:15cqh}
body.shape-round .p-pk .pk-corner,body.shape-round .p-pk .pk-logo{display:none}
#pdetail-img .p-pk.pk-big{display:block;position:absolute;inset:0;border-radius:inherit}
#present-stage.p-no-details .present-detailcol{display:none}
.present-list-title{font-size:1.05rem;font-weight:800;color:#eee;margin:0 2px}
.present-pool-wrap{margin-top:14px;background:#141428;border:1px solid #262640;border-radius:12px;padding:10px}
.present-pool-label{font-size:.72rem;font-weight:700;color:#9a9ab5;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.present-pool{display:flex;flex-wrap:wrap;gap:8px}
/* v148 — Phase 2 drag & drop */
#present-stage .vt-item[draggable="true"]{cursor:grab}
#present-stage .vt-item.p-dragging{opacity:.35}
#present-tierlist .vt-items{transition:background .15s} /* v150 — creator drop look */
#present-tierlist .vt-items.drag-over{background:#2a2a4a;outline:2px dashed #a855f7;outline-offset:-2px}
.present-pool-wrap.p-drop-pool{background:#2a2a4a;outline:2px dashed #a855f7;outline-offset:-2px}
#present-stage.p-dragging-list .present-pool-wrap{display:block!important}
.present-pool-hint{display:none;color:#9a9ab5;font-size:.8rem;text-align:center;padding:14px 0}
#present-stage.p-dragging-list .present-pool-wrap.is-empty .present-pool-hint{display:block}
.present-tierlist{width:100%;border-radius:12px;overflow:hidden}
.present-detailcol{flex:0 0 300px;max-width:300px;align-self:flex-start;position:sticky;top:16px;max-height:calc(100vh - 32px);border-radius:12px;overflow-y:auto} /* v147 — sticky while the stage scrolls */ /* v146 — outer dark frame removed (the blue panel is the frame) */ /* v144 — size to content (not full height) */
.present-detail-empty{color:#888;text-align:center;font-size:.85rem;padding:40px 10px}
.present-facedown-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.present-facedown-card{width:100%;max-width:190px;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(135deg,#2b2352,#15122b);border:2px solid #4b3a6b;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.5);text-align:center}
body.shape-portrait .present-facedown-card{aspect-ratio:285/399;max-width:190px}
body.shape-round .present-facedown-card{aspect-ratio:1/1;max-width:220px;border-radius:50%}
body.shape-landscape .present-facedown-card,body.shape-nocrop .present-facedown-card{aspect-ratio:3/2;max-width:240px}
.pfc-inner{display:flex;flex-direction:column;align-items:center;gap:4px;transform:rotate(-45deg)}
.pfc-logo{line-height:0}
.pfc-logo svg{width:44px;height:38px}
.pfc-name{color:#c084fc;font-weight:900;font-size:1rem;letter-spacing:.5px;text-shadow:0 2px 10px #000;line-height:1.05}
.pfc-com{color:#8a7fb8;font-weight:800;font-size:.7rem;letter-spacing:2px}
/* v154 — TLF back: sizes follow the CARD (container units), so every shape fits;
   the logo is nudged left because its drawing has empty space on its left side. */
#pdetail-img .p-cardback{container-type:size}
#pdetail-img .p-cardback .pfc-inner{gap:2.5cqmin}
#pdetail-img .p-cardback .pfc-logo svg{width:30cqmin;height:auto;transform:translateX(-6%)}
#pdetail-img .p-cardback .pfc-name{font-size:11.5cqmin;white-space:nowrap}
#pdetail-img .p-cardback .pfc-com{font-size:6.5cqmin;letter-spacing:.6cqmin}
body.shape-round #pdetail-img .p-cardback .pfc-name{font-size:10cqmin}
.present-reveal-btn{width:70%;position:relative;transition:transform .1s ease,filter .15s ease} /* v150 — ~70% wide */
.present-reveal-btn:hover{filter:brightness(1.1)}
.present-reveal-btn.p-rv-ok{background:linear-gradient(135deg,#22c55e,#16a34a);color:transparent}
.present-reveal-btn.p-rv-ok::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;font-weight:900;animation:vb-check-in .18s ease}

.p-reveal-row{display:flex;justify-content:center;padding:0 14px 14px}
.p-name-head{padding-top:0}
#pdetail-img.p-cb{background:none;overflow:visible;position:relative}
body.shape-nocrop #pdetail-img.p-cb{aspect-ratio:3/2}
#pdetail-img .present-facedown-card.p-cardback{position:absolute;inset:0;width:auto;height:auto;max-width:none;aspect-ratio:auto;box-shadow:none;border-radius:inherit}
@keyframes p-img-flip-out{from{transform:perspective(1400px) rotateY(0)}to{transform:perspective(1400px) rotateY(90deg)}}
@keyframes p-img-flip-in{from{transform:perspective(1400px) rotateY(-90deg)}to{transform:perspective(1400px) rotateY(0)}}
#pdetail-img.p-img-flip-out{animation:p-img-flip-out .18s ease-in forwards}
#pdetail-img.p-img-flip-in{animation:p-img-flip-in .2s ease-out}
.present-reveal-btn:active{transform:scale(.94)}
/* hidden-item styles (applied per cell via .p-hidden; container carries the style-* class) */
.present-arena .vt-item{position:relative}
:is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden>*{opacity:0}
:is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;background:repeating-linear-gradient(-45deg,#241d47,#241d47 8px,#1c1636 8px,#1c1636 16px);border:1px solid #4b3a6b}
:is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden::after{content:'Tier List Forge';position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;transform:rotate(-45deg);color:#c084fc;font-weight:900;font-size:.6rem;letter-spacing:1px;text-align:center;line-height:1.15;text-shadow:0 1px 4px #000;padding:6px;box-sizing:border-box}
body.shape-round :is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden::before{border-radius:50%}
body.shape-round :is(.present-tierlist,.present-pool).style-facedown .vt-item.p-hidden::after{content:'TLF';font-size:.95rem;letter-spacing:2px}
:is(.present-tierlist,.present-pool).style-blur .vt-item.p-hidden{filter:blur(9px) saturate(.75)}
.present-arena .vt-item.p-selected{box-shadow:0 0 0 4px rgb(168,85,247),0 0 16px rgba(168,85,247,.4)!important;transform:scale(1.08);z-index:10;border-radius:8px} /* v143/v144 — match editor .item.selected (ring + grow); list + pool */
@keyframes p-flip-out{from{transform:perspective(600px) rotateY(0)}to{transform:perspective(600px) rotateY(90deg)}}
@keyframes p-flip-out-cell{from{transform:scale(1.08) perspective(600px) rotateY(0)}to{transform:scale(1.08) perspective(600px) rotateY(90deg)}}
@keyframes p-flip-in-cell{from{transform:scale(1.08) perspective(600px) rotateY(-90deg)}to{transform:scale(1.08) perspective(600px) rotateY(0)}}
@keyframes p-detail-reveal{0%{opacity:.2;transform:perspective(700px) rotateY(-90deg)}55%{opacity:1;transform:perspective(700px) rotateY(0)}100%{opacity:1;transform:none}}
:is(.present-tierlist,.present-pool) .vt-item.p-flip-out{animation:p-flip-out-cell .18s ease-in forwards}
:is(.present-tierlist,.present-pool) .vt-item.p-flip-in{animation:p-flip-in-cell .2s ease-out}
.present-facedown-card.p-flip-out{animation:p-flip-out .18s ease-in forwards}
.present-detail-info.p-detail-reveal{transform-origin:top center;animation:p-detail-reveal .4s ease-out}
#reveal-stage{position:fixed;inset:0;z-index:10002;background:radial-gradient(1200px 700px at var(--p-glow-x,50%) -10%,#241a3e,#15152a 60%,#0f0f1e);
  display:none;flex-direction:column;padding:16px 18px 16px;overflow:hidden}
#reveal-stage.show{display:flex}
#reveal-stage{padding:16px 16px 18px!important;overflow-y:auto;scrollbar-gutter:stable} /* v152 — header like Presentation */
#reveal-stage .reveal-topbar2{flex:0 0 auto;width:100%}
#reveal-stage .reveal-titlebar2{flex:0 0 auto}
.reveal-subtitle{font-size:.8rem;font-weight:700;color:#9a9ab5}
#reveal-stage .reveal-close{height:30px}
.reveal-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;max-width:1400px;width:100%;margin-left:auto;margin-right:auto}
.reveal-title{font-size:1rem;font-weight:900;color:#eee;letter-spacing:.02em}
.reveal-close{background:#2d2d44;border:1px solid #444;color:#ccc;font-size:.85rem;font-weight:700;padding:7px 14px;border-radius:9px;cursor:pointer}
.reveal-close:hover{background:#3a3a55}
/* details row: your detail | centred image | community detail (no card bg) */
.reveal-detail{margin:0 auto 26px;padding-top:18px;min-height:210px;display:flex;align-items:flex-start;justify-content:center;max-width:1400px;width:100%;box-sizing:border-box}
.reveal-detail-empty{color:#888;font-size:.9rem;font-weight:600}
.reveal-detail.is-empty{display:none} /* v153 — nothing selected: lists sit right under the title */
.reveal-detail-inner{display:flex;gap:36px;align-items:flex-start;width:100%;justify-content:center}
.reveal-vdetail{flex:0 1 235px;min-width:0;max-width:235px;display:flex;flex-direction:column;gap:4px}
/* v128 — value sits by its label (not pushed to the far edge), and the LABEL is
   toward the centre image while the VALUE is on the outer edge. YOUR side (left):
   value on the far left, label toward centre → row-reverse. COMMUNITY side
   (right): label toward centre (left), value on the outer edge (right) → normal. */
/* v129 — value in its own aligned column (numbers stack); labels wrap when long.
   YOUR side (far left): value column on the OUTER (left) edge, label toward centre.
   COMMUNITY side (far right): label toward centre (left), value on the OUTER (right). */
.reveal-vdetail .vd-row{display:flex;gap:12px;align-items:flex-start;width:100%}
.reveal-vdetail .vd-row .vd-tier{flex:1 1 auto;min-width:0;display:flex;gap:6px;align-items:flex-start}
.reveal-vdetail .vd-row .vd-tier .vd-tier-name{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.reveal-vdetail .vd-row .vd-count{flex:0 1 auto;min-width:58px;max-width:60%;text-align:right} /* v147 — may wrap long text */
/* YOUR side: value column first (outer-left), label after (toward centre) */
.reveal-vdetail.you .vd-row{flex-direction:row-reverse}
.reveal-vdetail.you .vd-row .vd-tier{flex-direction:row-reverse;text-align:right}
.reveal-vdetail.you .vd-row .vd-count{text-align:left}
.reveal-vdetail.you{align-items:stretch;text-align:right}
.reveal-vdetail.you .reveal-score{align-items:flex-end}
.reveal-vdetail.you .vdetail-section-title{text-align:right}
/* COMMUNITY side: label first (toward centre), value column outer-right */
.reveal-vdetail.community{align-items:stretch;text-align:left}
.reveal-vdetail.community .reveal-score{align-items:flex-start}
.reveal-vdetail .vdetail-section-title{margin-top:8px;font-size:.72rem;letter-spacing:.5px}
.reveal-vdetail .vdetail-section-title:first-child{margin-top:0}
.reveal-vdetail .you-title{color:#a5b4fc}
.reveal-vdetail .community-title{color:#f5d9a5}
.reveal-vdetail-locked{color:#777;font-size:.8rem;font-style:italic;padding:4px 0}
.reveal-vdetail .score-display{margin:2px 0 6px}
.reveal-detail-center{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:2px}
.reveal-hero-img{border-radius:12px;overflow:hidden;background:#2d2d44;display:flex;align-items:center;justify-content:center;cursor:zoom-in;box-shadow:0 8px 30px rgba(0,0,0,.55)}
.reveal-hero-img img{width:100%;height:100%}
.reveal-detail-name{font-size:1.2rem;font-weight:900;color:#fff;text-align:center;max-width:260px}
.reveal-score{display:flex;flex-direction:column;gap:2px;padding:4px 0;width:100%}
.reveal-score .rs-main{font-size:.95rem;font-weight:800;color:#fff}
.reveal-score .rs-sub{font-size:.72rem;color:#9a9ab5}
.reveal-score .rs-bar{height:6px;width:100%;background:#2d2d44;border-radius:99px;overflow:hidden;margin-top:3px}
.reveal-score .rs-fill{height:100%;background:linear-gradient(90deg,#a855f7,#c084fc)}
/* your side (left): bar fills toward the outer (left) edge */
.reveal-vdetail.you .reveal-score .rs-fill{margin-left:auto;background:linear-gradient(270deg,#a855f7,#c084fc)}
/* arena — sized to content, pinned to the top (no full-height stretch/gap) */
.reveal-arena{flex:0 1 auto;display:flex;gap:14px;align-items:stretch;min-height:0;max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box;overflow:hidden} /* v135 — stretch so the list columns get a definite height to cap against */
.reveal-listcol{flex:1 1 0;min-width:180px;display:flex;flex-direction:column;gap:6px;min-height:0}
.reveal-buildcol-title{font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:center;flex:0 0 auto}
.reveal-buildcol-title.you{color:#a5b4fc}
.reveal-buildcol-title.community{color:#f5d9a5}
.reveal-listwrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
.reveal-buildlist{width:100%;overflow-y:auto;background:#141428;border:1px solid #262640;border-radius:12px;padding:8px;flex:0 0 auto;align-self:flex-start;height:auto;min-height:200px;max-height:100%} /* v135 — cap to the real available slot (was calc(100vh-470px), a magic guess that let long lists clip) */
/* magnify button, fixed in the list corner */
.reveal-magnify-btn{position:absolute;top:6px;right:6px;z-index:4;width:26px;height:26px;border-radius:7px;border:1px solid #3a3a55;background:#2d2d44cc;color:#cbb6f5;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.reveal-magnify-btn.left{right:auto;left:6px}
.reveal-magnify-btn:hover{background:#3a3a55;color:#fff}
/* compact tier rows to reclaim vertical space */
.rbl-row{display:flex;gap:6px;align-items:stretch;margin-bottom:4px}
.rbl-row:last-child{margin-bottom:0}
.rbl-label{flex:0 0 34px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);font-size:.9rem}
.rbl-items{flex:1;display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;background:#0f0f20;border-radius:6px;padding:4px;min-height:38px}
.rbl-cell{border-radius:6px;overflow:hidden;background:#2d2d44;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s}
.rbl-cell:hover{transform:translateY(-2px);outline:2px solid #a855f7}
/* v130 — selected item highlight in the lists (matches hover: bigger + purple) */
.rbl-cell.rbl-active{transform:scale(1.18);outline:2px solid #a855f7;box-shadow:0 0 0 2px rgba(168,85,247,.4),0 4px 12px rgba(0,0,0,.4);z-index:3;position:relative}
.rbl-cell img{width:100%;height:100%}
@keyframes rbl-drop-in{0%{transform:translateY(-16px) scale(.55);opacity:0}70%{transform:translateY(2px) scale(1.06)}100%{transform:translateY(0) scale(1);opacity:1}}
.rbl-cell.dropped{animation:rbl-drop-in .45s cubic-bezier(.34,1.56,.64,1)}
/* twin reels + verdict-above + centre spine */
.reveal-reels{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px 0 48px;align-self:center}
.reveal-verdict-top{min-height:24px;font-size:1rem;font-weight:900;text-align:center;line-height:1.2;color:#ccc}
.reveal-verdict-top.match{color:#86efac}.reveal-verdict-top.miss{color:#fca5a5}
.reveal-reelpair{display:flex;align-items:flex-end;gap:0}
.reveal-reelpair .lever-machine{margin-left:14px;margin-bottom:6px}
.reel-window{position:relative;overflow:hidden;border-radius:14px;background:#12122a;border:1px solid #2d2d44;box-shadow:inset 0 0 40px rgba(0,0,0,.6);
  -webkit-mask-image:linear-gradient(#0000,#000 20%,#000 80%,#0000);mask-image:linear-gradient(#0000,#000 20%,#000 80%,#0000)}
.reel-window.twin{width:118px;height:280px}
.reel-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.reel-cell{height:40px;display:flex;align-items:center;justify-content:center}
.reel-chip{min-width:92px;height:30px;padding:0 12px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#111;font-weight:900;font-size:1rem}
.reel-frame{position:absolute;top:50%;left:0;right:0;height:40px;transform:translateY(-50%);border-top:2px solid #6b6b8a;border-bottom:2px solid #6b6b8a;pointer-events:none;z-index:2;transition:border-color .2s,box-shadow .2s}
.reel-window.landed .reel-frame{border-color:#a855f7;box-shadow:0 0 18px rgba(168,85,247,.35)}
.reel-window.match .reel-frame{border-color:#4ade80;box-shadow:0 0 20px rgba(74,222,128,.5)}
.reel-window.miss .reel-frame{border-color:#f87171;box-shadow:0 0 20px rgba(248,113,113,.45)}
/* one arrow per reel, at the centre-slot line, pointing into its reel */
.reel-arrow-center{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:#a855f7;z-index:3;pointer-events:none;text-shadow:0 1px 3px #000}
.reel-arrow-center.inner-right{right:5px}
.reel-arrow-center.inner-left{left:5px}
.reel-window.match .reel-arrow-center{color:#4ade80}
.reel-window.miss .reel-arrow-center{color:#f87171}
/* thin spine line between the reels */
.reveal-spine{width:22px;height:280px;position:relative}
.reveal-spine::before{content:'';position:absolute;left:50%;top:14%;bottom:14%;width:2px;transform:translateX(-50%);background:#2d2d44;transition:background .2s}
.reveal-spine.match::before{background:#4ade80}
.reveal-spine.miss::before{background:#f87171}
.reveal-reel-labels{display:flex;justify-content:space-between;width:100%;font-size:.7rem;font-weight:800}
.reveal-reel-labels .you{color:#a5b4fc}.reveal-reel-labels .community{color:#f5d9a5}
/* v131 — simple ball-on-a-line lever: the ball travels straight down the track
   when pulled and springs back up on release. */
.lever-machine{display:flex;flex-direction:column;align-items:center;gap:0;user-select:none;touch-action:none;height:280px;justify-content:flex-start;position:relative;width:44px}
.lever-slot{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:6px;height:210px;border-radius:6px;background:linear-gradient(90deg,#15152a,#33334d 50%,#15152a);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.lever-ball{position:absolute;top:4px;left:50%;transform:translateX(-50%) translateY(0);width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f5b0ff,#c084fc 45%,#7c3aed 100%);border:2px solid #c9a6ff;
  box-shadow:0 4px 10px rgba(0,0,0,.5);cursor:grab;transition:transform .5s cubic-bezier(.34,1.5,.5,1);z-index:2}
.lever-ball.pulled{transition:transform .1s cubic-bezier(.4,0,.7,1);transform:translateX(-50%) translateY(196px)}
.lever-machine.grabbing .lever-ball{cursor:grabbing}
.lever-machine.disabled{opacity:.4;pointer-events:none}
.lever-caption{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:800;color:#cbb6f5;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@keyframes reel-hit-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.reel-window.hit{animation:reel-hit-shake .3s}
@keyframes reel-hit-shake-big{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-10px) rotate(-1deg)}30%{transform:translateX(10px) rotate(1deg)}45%{transform:translateX(-8px)}60%{transform:translateX(8px)}75%{transform:translateX(-5px)}90%{transform:translateX(5px)}}
.reel-window.hit-big{animation:reel-hit-shake-big .5s}
/* v127 — free-spin while the lever is held is driven in JS (Web Animations API)
   so the loop distance is an exact multiple of the tier height (seamless). */
/* pool below — wraps (no horizontal scroll), lighter on-theme bg */
.reveal-pool{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:#1a1a2e;border:1px solid #2d2d44;border-radius:12px;min-height:64px;align-items:flex-start;align-content:flex-start;margin:10px auto 0;max-width:1400px;width:100%;box-sizing:border-box;max-height:26vh;overflow-y:auto;flex-shrink:0} /* v135 — flex-shrink:0 so it can't be squeezed into a phantom scrollbar */
.reveal-pool-item{flex:0 0 auto;border-radius:9px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:#2d2d44;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .12s,border-color .15s,box-shadow .15s}
.reveal-pool-item:hover{transform:translateY(-2px)}
.reveal-pool-item.active{border-color:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,.45),0 6px 16px rgba(0,0,0,.4);transform:scale(1.12);z-index:2}
.reveal-pool-item img{width:100%;height:100%}
.reveal-pool-item .rp-text{font-size:.68rem;font-weight:700;color:#ddd;text-align:center;padding:3px;line-height:1.15;word-break:break-word}
/* score block alignment (mirrored on community side via .community rule above) */
/* magnify + spinlab overlays */
.reveal-magnify-overlay{position:fixed;inset:0;z-index:10010;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:24px}
.reveal-magnify-overlay.show{display:flex}
.reveal-magnify-box{background:#15152a;border:1px solid #2d2d44;border-radius:16px;max-width:900px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.reveal-magnify-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #2d2d44;font-weight:800;color:#eee}
.reveal-magnify-body{padding:16px;overflow:auto}
.reveal-magnify-body .rbl-label{flex-basis:56px;font-size:1.15rem;min-height:56px}
.reveal-magnify-body .rbl-items{min-height:60px}
/* spin lab */
.spinlab-box{max-width:440px}
.spinlab-body{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px}
.spinlab-controls{display:flex;flex-direction:column;gap:8px;width:100%}
.spinlab-controls button{width:100%}
.reveal-pool-tools{display:flex;gap:8px;align-items:center;margin-left:auto}
.reveal-pool-empty{color:#777;font-size:.85rem;font-style:italic;padding:0 8px}
.reveal-btn{background:#a855f7;border:none;color:#fff;font-weight:800;padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.reveal-btn:hover{background:#9333ea}
.reveal-btn.secondary{background:#2d2d44;border:1px solid #444;color:#ccc}
.reveal-btn.secondary:hover{background:#3a3a55}
@media(max-width:900px){
  .reveal-arena{flex-direction:column;overflow:auto;align-items:stretch}
  .reveal-buildlist{max-height:none} /* v135 — phones scroll the whole arena; no per-list cap */
  .reveal-reelpair{transform:scale(.9)}
  .reveal-listcol{min-height:130px}
  .reveal-detail-inner{flex-direction:column;align-items:center}
  .reveal-vdetail{max-width:none;width:100%}
}
.cc-blurable{transition:filter .2s ease}
.cc-blurable.blurred{filter:blur(18px);pointer-events:none;user-select:none}
.creator-community-body{display:flex;flex-direction:column;gap:8px}
/* v99.0 — #cc-side slides in from the right via a WIDTH animation (0→280px) that
   displaces the community list beside it, exactly like the creator detail (#right-col)
   does to the main list. overflow:hidden + a fixed-width inner (#cc-side>*) stop the
   content reflowing into a sliver during the slide (the v98.8 flicker cause).
   margin-top offsets it down by the community head's height so its top aligns with
   the community TIER LIST, not the "Live community results" title above it. */
/* v111 (#1 alignment) — width 280 -> 290 to match the row-1 detail panel (.right-col),
   so the community detail sits directly under the main-list detail. */
#cc-side{width:290px;min-width:290px;position:sticky;top:16px;align-self:flex-start;overflow:hidden;margin-top:32px;
  transition:width .25s ease,min-width .25s ease,opacity .25s ease}
#cc-side>*{width:290px;box-sizing:border-box;flex-shrink:0} /* fixed inner width so the content doesn't reflow while the outer width animates */
/* v99.9 — back to a simple width:0 hidden state. The v99.8 --editor-rail-w reservation
   is no longer needed: with the QR pulled out to a shared column, both rows' lists are
   flex:1 and align automatically, so cc-side just needs to collapse when closed. */
#cc-side.cc-hidden{width:0;min-width:0;opacity:0;pointer-events:none;margin-top:0;transition:none}
.creator-community-meta{font-size:.72rem;color:#aaa;text-align:center}
.creator-community-modenote{font-size:.78rem;color:#c9b47a;background:#2a2618;border:1px solid #4a3f1e;border-radius:8px;padding:8px 10px;text-align:center} /* v85.0 — shown when the editor mode differs from the running session mode */
.viewer-row{display:flex;align-items:stretch;border-bottom:1px solid #2d2d44;min-height:80px}
.viewer-row:last-child{border-bottom:none}
.viewer-label{width:70px;min-width:70px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.viewer-items{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;background:#1e1e35}
.viewer-item{cursor:pointer;border-radius:8px;transition:transform .1s,box-shadow .1s;display:flex}
.viewer-item-img{border-radius:6px;object-fit:cover;display:block}
.viewer-item-text{background:#2d2d44;border-radius:8px;font-size:.78rem;font-weight:600;color:#ddd;min-width:60px;max-width:110px;text-align:center;word-break:break-word;display:flex;align-items:center;justify-content:center;padding:6px 10px;box-sizing:border-box}
/* viewer item detail modal */
.vid-inner{background:#1e1e35;border-radius:14px;padding:20px;width:100%;max-width:340px;border:1px solid #444;max-height:85vh;overflow-y:auto}
.vid-img-wrap{width:100%;max-height:280px;border-radius:10px;overflow:hidden;background:transparent;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.vid-img-wrap img{max-width:100%;max-height:280px;object-fit:contain;display:block}
.vid-name{font-size:1.1rem;font-weight:800;color:#eee;text-align:center;margin-bottom:12px}
.vid-score{background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(99,102,241,.15));border:1px solid rgba(168,85,247,.3);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.vid-score-main{font-size:1.2rem;font-weight:800;color:#a855f7;text-align:center}
.vid-score-pct{font-size:.75rem;color:#888;text-align:center;margin-top:2px}
.vid-score-bar{margin-top:8px;background:#2d2d44;border-radius:6px;height:8px;overflow:hidden}
.vid-score-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#6366f1,#a855f7);width:0%;transition:width .4s}
.vid-params-title{font-size:.7rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.vid-param-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #2d2d44}
.vid-param-row:last-child{border-bottom:none}
.vid-param-name{font-size:.82rem;color:#aaa;font-weight:600;flex:1 1 auto;min-width:0;word-break:break-word} /* v84.6 — wrap long names instead of overlapping the value */
.vid-param-val{font-size:.82rem;color:#a855f7;font-weight:700;white-space:nowrap;flex:0 0 auto}
.vid-noparams{font-size:.82rem;color:#555;font-style:italic;padding:4px 0}
.vid-close{width:100%;margin-top:14px}
.viewer-back-btn{margin-top:20px;padding:10px 24px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#ccc;font-size:.85rem;cursor:pointer}
.viewer-back-btn:hover{background:#3a3a55;color:#fff}
.creator-footer{margin-top:40px;padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;border-top:1px solid #2d2d44}
.viewer-footer{margin-top:32px;padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;border-top:1px solid #2d2d44;width:100%;max-width:800px}
.viewer-footer-link{background:none;border:none;color:#888;font-size:.78rem;cursor:pointer;text-decoration:underline;padding:4px}
.viewer-footer-link:hover{color:#f87171}
.viewer-footer-sep{color:#444;font-size:.78rem}
.viewer-footer-muted{color:#555;font-size:.75rem}
/* v109 (#8) — little "From Berlin with ♥" note, right of the T&C/copyright text. */
.footer-berlin{color:#555;font-size:.75rem;margin-left:-6px} /* v114 — negative margin cancels most of the footer flex gap so the leading "·" sits like the in-text dots rather than in a wide gap */
.footer-heart{color:#f87171;margin-left:1px} /* v115 — 1px breathing room from 'with' */
.report-intro{font-size:.82rem;color:#aaa;margin-bottom:14px;line-height:1.4}
.report-label{display:block;font-size:.7rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.report-select{width:100%;padding:9px 10px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:.9rem;outline:none;margin-bottom:12px;cursor:pointer}
.report-select:focus{border-color:#a855f7}
.report-note{width:100%;min-height:70px;padding:9px 10px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:.88rem;outline:none;margin-bottom:14px;resize:vertical;font-family:inherit}
.report-note:focus{border-color:#a855f7}
.viewer-code-badge{background:#2d2d44;border:1px solid #444;border-radius:10px;padding:10px 20px;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.viewer-code-label{font-size:.72rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.viewer-code-num{font-size:1.8rem;font-weight:900;color:#a855f7;letter-spacing:4px}

/* CODE INPUT */
#code-input-section{width:100%;display:flex;flex-direction:column;align-items:center}
.code-input-title{font-size:.72rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;text-align:center}
.code-input-row{display:flex;gap:8px;justify-content:center}
.code-input-field{flex:1;padding:10px 14px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:1.2rem;font-weight:700;letter-spacing:4px;text-align:center;outline:none;max-width:140px}
.code-input-field:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #2d2d44 inset!important;-webkit-text-fill-color:#eee!important}
.code-input-field:focus{border-color:#a855f7}
.code-input-btn{padding:10px 20px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:8px;color:#fff;font-weight:700;cursor:pointer;font-size:.85rem}
.code-input-btn:hover{opacity:.85}
.code-input-error{font-size:.8rem;color:#f87171;margin-top:6px;display:none}
.code-input-error.show{display:block}

/* HEADER */
.site-header{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:6px;min-height:54px}
.site-header-center{display:flex;align-items:center;gap:12px}
.logo-link{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer}
.burger-btn{display:none;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:1.2rem;line-height:1;padding:8px 12px;cursor:pointer}
.burger-menu{display:none;position:absolute;right:8px;top:calc(100% - 4px);z-index:200;background:#1e1e35;border:1px solid #3a3a55;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);min-width:190px;overflow:hidden}
.burger-menu.show{display:block}
.burger-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid #2d2d44;color:#ddd;font-size:.92rem;font-weight:600;padding:14px 16px;cursor:pointer}
.burger-item.burger-danger{color:#f87171} /* v70 — destructive action stands out */
.burger-item.burger-danger:hover{background:#3a1f24}
.burger-item:last-child{border-bottom:none}
.burger-item:hover{background:#2d2d44}
.burger-tb-only{display:none} /* phone-only burger entries; enabled in @media 640 */
.site-title{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,#a855f7,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.5px}
/* domain suffix — lighter/smaller/muted so the main wordmark stays dominant */
.tld{font-weight:600;font-size:.62em;color:#6b6b8a;-webkit-text-fill-color:#6b6b8a;background:none;letter-spacing:0;vertical-align:baseline}
.subtitle{text-align:center;color:#888;font-size:.8rem;margin-bottom:14px}
.subtitle-short{display:none} /* v73 — phone-only variant; shown in @media 640 */
.current-list-banner{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.clb-name{font-size:1.05rem;font-weight:800;color:#e8e8f5}
.clb-unsaved{font-size:.72rem;font-weight:700;color:#f5a524;display:none}
.clb-unsaved.show{display:inline}

/* USER MENU */
.user-menu{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.user-menu-btn{padding:6px 12px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#ccc;font-size:.78rem;cursor:pointer;font-weight:600;white-space:nowrap}
/* v120 (item 4) — embedded open-by-code field in the top menu + burger. */
.menu-code-box{display:inline-flex;align-items:center;gap:4px}
/* v130 — combined open-by-code pill (icon + inline input + go), subtle X on fail */
.menu-code-combined{display:inline-flex;align-items:center;height:32px;background:#2d2d44;border:1px solid #444;border-radius:8px;padding:0 4px 0 8px;gap:4px;transition:border-color .15s}
.menu-code-combined:focus-within{border-color:#a855f7}
.menu-code-combined.err{border-color:#ef4444;animation:mcc-shake .3s}
@keyframes mcc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.menu-code-combined .mcc-input{width:64px;background:none;border:none;outline:none;color:#eee;font-size:.8rem;font-weight:600;padding:0}
.menu-code-combined .mcc-input::placeholder{color:#888;font-weight:500}
.menu-code-combined .mcc-go{background:#a855f7;border:none;color:#fff;font-weight:800;font-size:.9rem;width:24px;height:24px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-code-combined .mcc-go:hover{background:#9333ea}
.menu-code-combined .mcc-x{display:none;color:#ef4444;font-weight:900;font-size:.85rem;padding:0 2px}
.menu-code-combined.err .mcc-x{display:inline}
.menu-code-input{width:74px;padding:6px 8px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;
  font-size:.85rem;font-weight:700;letter-spacing:3px;text-align:center;outline:none}
.menu-code-input:focus{border-color:#a855f7}
.menu-code-input::placeholder{letter-spacing:3px;color:#666;font-weight:600}
.menu-code-btn{padding:6px 10px;background:#a855f7;border:1px solid #a855f7;border-radius:8px;color:#fff;
  font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.menu-code-btn:hover{background:#9333ea}
.burger-code-row{display:flex;gap:6px;padding:6px 4px;align-items:center}
.burger-code-row .menu-code-input{flex:1;width:auto}
/* v119 (item 4) — highlight the Reports button when open reports are waiting. */
.user-menu-btn.has-reports,.burger-item.has-reports{
  background:#7f1d1d;border-color:#ef4444;color:#fff;
  box-shadow:0 0 0 1px rgba(239,68,68,.4),0 0 10px rgba(239,68,68,.35);
}
.report-count-badge{display:inline-block;min-width:16px;padding:0 5px;margin-left:6px;
  background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;line-height:16px;
  text-align:center;border-radius:999px;vertical-align:middle}
.user-menu-btn:hover{background:#3a3a55;color:#fff}
.user-menu-btn.has-unsaved{border-color:#f5a524;color:#f5d9a5;position:relative}
.user-menu-btn.has-unsaved::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#f5a524;border-radius:50%;border:1.5px solid #1a1a2e}
.saving-indicator{font-size:.75rem;color:#888;display:none;align-items:center;gap:4px;white-space:nowrap}
.saving-indicator.show{display:flex}

/* MY LISTS PANEL */
.my-lists-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;display:none;align-items:flex-start;justify-content:flex-end;padding:60px 16px 16px}
.my-lists-overlay.show{display:flex}
.my-lists-panel{background:#1e1e35;border:1px solid #444;border-radius:14px;padding:18px;width:300px;max-height:80vh;overflow-y:auto}
.my-lists-panel h3{font-size:.9rem;margin-bottom:14px;color:#eee}
.ml-count-badge{font-size:.7rem;font-weight:700;color:#a5b4fc;background:#2d2d44;border-radius:10px;padding:2px 8px;margin-left:6px}
.ml-count-badge.at-limit{color:#fca5a5;background:#3a1e1e}
.ml-limit-note{display:none;font-size:.72rem;line-height:1.4;color:#aaa;background:transparent;border:none;border-radius:0;padding:2px 2px;margin-bottom:12px} /* v139 — blue box removed, plain text */
.ml-limit-note.show{display:block}
.ml-limit-note.warn{color:#f5d9a5;border-color:#5a4a1e;background:#2a2411}
.list-item{display:flex;align-items:center;gap:8px;padding:10px;background:#2d2d44;border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.list-item:hover{border-color:#a855f7}
.list-item.active-list{border-color:#a855f7;background:#2d1f44}
.list-item-info{flex:1;min-width:0}
.list-item-title{font-size:.85rem;font-weight:700;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-meta{font-size:.72rem;color:#888;margin-top:2px}
.list-item-code{font-size:.72rem;color:#a855f7;font-weight:700}
.list-item-private{font-size:.72rem;color:#a855f7;font-weight:700} /* Build F — unpublished draft; v139 purple to match the code tag */
.list-item-del{background:none;border:none;color:#666;cursor:pointer;font-size:.9rem;padding:4px;border-radius:4px}
.list-item-del:hover{color:#f87171;background:#3a1a1a}
.ml-section-label{font-size:.68rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.ml-group-header{font-size:.65rem;color:#a855f7;font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin:12px 0 6px}
.ml-group-header:first-child{margin-top:0}
.unsaved-item{border-style:dashed!important;border-color:#a855f7!important}
.unsaved-badge{color:#f5a524;font-weight:800}
.ml-rename-row{display:flex;gap:6px;margin-bottom:14px}
.ml-rename-row .list-title-input{margin-bottom:0}
.ml-apply-btn{flex-shrink:0;width:38px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:7px;color:#fff;font-size:1rem;font-weight:800;cursor:pointer}
.ml-apply-btn:hover{opacity:.85}
.ml-apply-btn.dirty{animation:tlf-pulse 1.2s ease-in-out infinite}
@keyframes tlf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}50%{box-shadow:0 0 0 4px rgba(168,85,247,0)}}
.ml-new-row{display:flex;gap:6px;margin-top:6px;padding-top:12px;border-top:1px solid #2d2d44}
.ml-new-row .list-title-input{margin-bottom:0}
.new-list-btn{flex-shrink:0;width:auto;padding:9px 14px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:8px;color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;margin-top:0} /* v139 — purple to match the other primary buttons */
.new-list-btn:hover{opacity:.85}
.list-title-input{width:100%;padding:7px 10px;background:#1a1a2e;border:1px solid #444;border-radius:7px;color:#eee;font-size:.85rem;outline:none;margin-bottom:10px}
.list-title-input:focus{border-color:#a855f7}

/* Creator layout: capped width, centered, comfortable side padding.
   .main-layout carries the 24px padding; the standalone bars instead use the
   resulting CONTENT width (1400 - 48 = 1352) so their borders line up exactly
   with #tierlist's border rather than sitting 24px further out. */
.main-layout{max-width:1400px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:border-box;width:100%}
.toolbar,.shape-bar,.sort-bar,.autorank-banner,.creator-footer{max-width:1352px;margin-left:auto;margin-right:auto;box-sizing:border-box;width:100%}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.btn{padding:7px 14px;border:none;border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s}
.btn-primary{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff}
.btn-primary:hover{opacity:.85}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-secondary{background:#2d2d44;color:#ccc;border:1px solid #444}
.btn-secondary:hover{background:#3a3a55;color:#fff}
.btn-secondary:disabled{opacity:.4;cursor:not-allowed}
.btn-danger{background:#7f1d1d;color:#fca5a5;border:1px solid #991b1b}
.btn-danger:hover{background:#991b1b}
.btn-success{background:#14532d;color:#86efac;border:1px solid #166534}
.btn-success:hover{background:#166534}
.btn-mode{background:#2d2d44;color:#ccc;border:none;font-size:.85rem;padding:8px 18px;border-radius:7px}
.btn-mode.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff}

.shape-bar{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.shape-bar label{font-size:.75rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.shape-btn{padding:0 12px;border-radius:7px;border:1px solid #444;background:#2d2d44;color:#aaa;font-size:.78rem;cursor:pointer;font-weight:600;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1} /* v113 — fixed height + inline-flex so the differing glyphs (■ ▬ ▮ ● ⬜) all render at the same button height */
.shape-btn:hover{background:#3a3a55;color:#fff}
.shape-btn.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;border-color:transparent}

.mode-bar{display:flex;gap:6px;justify-content:center;margin-bottom:12px;background:#1e1e35;border-radius:10px;border:1px solid #3a3a55;padding:4px;width:fit-content;margin-left:auto;margin-right:auto}
.autorank-banner{background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(99,102,241,.15));border:1px solid #a855f7;border-radius:10px;padding:10px 16px;margin-bottom:14px;display:none;align-items:center;gap:10px;font-size:.82rem;color:#c4b5fd}
.autorank-banner.show{display:flex}
/* v149 — dismissible explanation banners + ⓘ on the active mode button */
.autorank-banner>span{flex:1 1 auto}
.mode-hint-close{margin-left:auto;flex:0 0 auto;align-self:flex-start;background:none;border:none;color:#c4b5fd;font-size:.7rem;line-height:1;cursor:pointer;padding:4px 5px;border-radius:6px;opacity:.8} /* v150 — smaller */
.mode-hint-close:hover{background:rgba(255,255,255,.1);color:#fff}
/* v150 — ⓘ sits OUTSIDE the mode bar (right of it), so no button changes width */
.mode-bar{position:relative}
.mode-info{display:none;position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:#1e1e35;border:1px solid #3a3a55;color:#c4b5fd;font-size:.8rem;line-height:1;padding:0;cursor:pointer;align-items:center;justify-content:center}
.mode-info.show{display:flex}
.mode-info:hover{background:#2d2d44;color:#fff;border-color:#a855f7}
@media(max-width:640px){.mode-info{left:auto;right:-6px;top:-8px;transform:none;width:20px;height:20px;font-size:.7rem}}
/* v150 — Elo voting panel: more room above when the banner is hidden, less below */
/* v154 — active creator Elo voting (banner hidden): the MODE BAR gets 30px below it;
   the voting view's bottom margin drops from 18px to 10px. */
.mode-bar:has(~ #elo-banner:not(.show) ~ .ch2h-wrap.ch2h-live){margin-bottom:30px}
.ch2h-wrap.ch2h-live{margin-top:0;margin-bottom:0}
.ch2h-wrap.ch2h-live .h2h-view.ch2h-view{margin-bottom:10px}
/* v79 — Elo banner reuses the Auto-Rank banner's shape, in its own colour so the
   two modes are distinguishable at a glance. */
/* v94 — Elo banner now matches the purple auto-rank banner (was cyan). It keeps
   the same class for the markup; the color override is removed so it inherits the
   purple .autorank-banner styling. strong stays purple too. */
.elo-banner strong{color:#c4b5fd}
.autorank-banner strong{color:#a855f7}

/* v98.9 — main-layout now STACKS two editor rows; each row is a flex row that
   bounds its sticky side panels (like the viewer's .vote-row). */
/* v99.9 — .main-layout is a flex ROW now: [.editor-main | #share-sticky-wrap].
   .editor-main (flex:1) stacks the two editor rows; the QR is a shared right column
   beside it. Both rows' lists are flex:1 within .editor-main, so they end where the
   QR column begins and align automatically at any QR width. */
.main-layout{display:flex;flex-direction:row;gap:14px;align-items:flex-start}
.editor-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.editor-row{display:flex;gap:14px;align-items:flex-start}
#editor-row-2{display:none} /* v98.9 — shown (flex) only when community results are active; avoids a stray row gap */
#editor-row-2.row2-in{animation:row2-in .28s ease} /* v99.1 — animate in with the same .28s/ease as the QR so they enter in parallel */
@keyframes row2-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.left-col{flex:1;min-width:0}
.center-col{display:flex;gap:14px;flex:1;min-width:0;align-items:flex-start}
/* v84.0 — closing the panel used to animate width and opacity together, so as the
   290px column shrank it revealed the tier-list edge behind the still-fading panel
   — a grey line at the top. Sequence the CLOSE only: opacity fades first (fast),
   then width/min-width collapse after a short delay, once the panel is invisible.
   Opening (base transition) stays simple so content doesn't fade in before width.
   v98.9 — sticky+align-self:flex-start makes the panel row-bounded: it scrolls with
   the page and sticks at top:16px until its bottom meets the row's (list's) bottom,
   then stops. NO max-height, so a panel taller than its list grows the row (pushing
   row 2 down) and stays fully visible — matching the viewer, minus the viewport cap. */
/* v99.9 — the QR (#share-sticky-wrap) is now a shared right column of .main-layout,
   beside .editor-main. It's sticky at top:16px. To keep it bounded to ROW 1 (top-align
   with the creator detail, stop scrolling when row 1's bottom is reached) rather than
   spanning both rows, its max-height is capped to row 1's height via --editor-row1-h
   (set by JS from the live row-1 height); align-self:flex-start keeps it top-anchored. */
/* v111 (#1) — STRUCTURAL FIX. The QR/community column (#share-sticky-wrap) is now the
   THIRD column INSIDE #editor-row-1 (list | detail | QR), not a shared column spanning
   both rows. As a flex child of row 1 with align-self:flex-start, its sticky containing
   block IS row 1, so it can never travel past row 1's bottom — it's truly row-bounded.
   Row 1 is align-items:flex-start, so a QR taller than the list simply grows the row (no
   clipping) and a shorter QR sits at the top. This replaces the v109/v110 max-height cap
   and the two-way min/max-height JS sync (both removed) — the bounding is now structural.
   Row 2 reserves the QR's width on its right (see --editor-rail-w below) so both lists
   stay equal width. */
#share-sticky-wrap{align-self:flex-start;position:sticky;top:16px}
/* v111 (#1 alignment) — row-2 spacer reserving the QR column's width (--editor-rail-w,
   published by JS from the live QR width). flex:0 0 auto so it holds exactly that width
   and doesn't grow. Defaults to 0 when the var is unset (no QR shown) so row 2's list
   spans full width just like row 1's does when the QR is hidden. */
.editor-row2-spacer{flex:0 0 auto;width:var(--editor-rail-w,0px);min-width:var(--editor-rail-w,0px);align-self:stretch;pointer-events:none}
.right-col{width:290px;min-width:290px;overflow:hidden;position:sticky;top:16px;align-self:flex-start;
  transition:width .25s ease, min-width .25s ease} /* v99.9 — own sticky (the rail used to provide it); v99.6 — pure width wipe, no opacity */
.right-col>*{width:290px;box-sizing:border-box;flex-shrink:0} /* v99.6 — fixed inner width so #detail-panel doesn't reflow while the column width animates (that reflow was the "builds from the top-right corner" effect) */
.right-col.hidden{width:0;min-width:0;opacity:0;pointer-events:none;transition:none} /* v99.2 — INSTANT close (no animation); opening still animates via the base .right-col transition */

/* QR PANEL */
.qr-panel{width:190px;min-width:190px;position:static;display:none;flex-direction:column;align-items:center;gap:10px;overflow:hidden;transition:width .25s ease,min-width .25s ease} /* v99.7 — reverted to display:none hiding (was width:0). display:none = zero layout footprint when closed, so #share-sticky-wrap doesn't disturb the row-1/row-2 detail alignment. The slide is done via a two-step reveal in JS (display, reflow, then animate width). */
/* v83.9 — SIZE THE WRAP TO ITS CONTENT again (reverts v83.4's reserved-L-width).
   v83.4 pinned this to 320px so the QR could grow leftward without a jump, but
   that left a permanent L-sized GAP beside the QR at S/M. Per the desired (and
   original) behaviour: the wrap is as wide as the QR at its current size, and
   growing the QR widens the wrap, which shrinks the tier-list column so its rows
   reflow (items wrap to a second line). The width transitions on the panels keep
   that change animated rather than snapping. Phone still overrides to 100% below. */
.share-sticky-wrap{position:relative;display:flex;flex-direction:column;transition:width .2s,min-width .2s} /* v99.0 — the parent .editor-rail is sticky now; this stays relative for the collapse arrow's containing block. */
/* v111 (#2) — the panels live in an inner #share-panels container so they can animate
   WITHOUT moving the collapse arrow (a sibling, absolutely positioned). */
/* v112 (#2) — WIDTH SLIDE, modelled on the detail panel (#right-col). The section reveals
   by animating the CONTAINER width from 0 to its natural width: overflow:hidden clips the
   fixed-width panels inside so their left edge appears at the right edge of the container
   and is revealed as it widens, and — because #share-panels is a flex child of row 1 — the
   tier list SMOOTHLY shrinks to make room and everything moves together (no instant
   resize, no reflow of the panel text). Same feel as the QR S/M/L resize, plus the initial
   reveal. JS drives the pixel target (width can't transition to auto); .share-sliding gets
   the transition + overflow, and the inline width is cleared to auto on transitionend so
   later content changes size the panel naturally. */
.share-panels{display:flex;flex-direction:column;min-width:0}
.share-panels.share-sliding{overflow:hidden;transition:width .3s cubic-bezier(.22,1,.36,1)}
.share-drawer-btn{display:none} /* phone-only trigger; enabled in @media 640 */
/* v76 — nothing to share until the list is saved; the drawer opened empty. */
.share-drawer-btn:disabled{opacity:.45;cursor:not-allowed}
/* v84.0 — the collapse arrow used to be a flex child ABOVE the QR (align-self +
   margin-bottom), which pushed the whole QR column down so it started lower than
   the tier list / details columns. Float it out of flow (absolute, top-right of the
   sticky wrap) so the QR top-aligns with the other columns. The wrap is position
   :relative (v98.7, was sticky), which still establishes the containing block for
   this absolute position. */
/* v85.1 — align the arrow's RIGHT edge with the QR card's right edge (was inset
   20px, which left it floating short of the QR border). The QR box is width:100%
   of the panel, so its right edge sits at the wrap's right edge — right:0 lines
   the arrow up with it, and stays aligned across the S/M/L QR sizes. */
/* v87 — align the arrow to the QR CODE, not the section: the QR code sits 14px
   in from the section's right border (qr-box padding), so inset the arrow 14px
   to match. (v85.1 used right:0, which lined up with the section edge instead.) */
.share-collapse-tab{position:absolute;top:6px;right:14px;z-index:3;background:#1e1e35;border:1px solid #3a3a55;color:#a5b4fc;font-size:.75rem;font-weight:700;padding:4px 8px;border-radius:8px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.share-collapse-tab:hover{background:#2d2d44}
/* v128 — community-results collapse tab, same look as the share/QR collapse tab */
.cc-collapse-tab{background:#1e1e35;border:1px solid #3a3a55;color:#a5b4fc;font-size:.75rem;font-weight:700;padding:0 10px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cc-collapse-tab:hover{background:#2d2d44}
.share-sticky-wrap.collapsed .qr-panel,.share-sticky-wrap.collapsed .voting-panel{display:none!important}
/* v84.3 — collapsed: don't reserve the QR column's width (that left a size-
   dependent gap). Shrink to just the arrow's footprint but stay RIGHT-anchored
   (margin-left:auto) so the arrow sits at the same fixed spot regardless of the
   pre-collapse QR size, and the tier list reclaims the freed space. */
.share-sticky-wrap.collapsed{min-height:34px;width:auto;min-width:44px;margin-left:auto}
.voting-panel{width:190px;min-width:190px;background:#1e1e35;border:1px solid #3a3a55;border-radius:14px;padding:14px;margin-top:14px;overflow:hidden;box-sizing:border-box;display:none;transition:width .25s ease,min-width .25s ease} /* v99.7 — reverted to display:none hiding (zero footprint when closed); slide via the JS two-step reveal */
.voting-panel.show{display:block}
/* v84.6 — when the list's mode has drifted from the running community session's
   mode, highlight the panel (yellow) so it's clear a Reset + new session is needed
   to switch community voting to the new mode. The drift text explains the detail. */
.voting-panel.drifted{border-color:#e0a92a;box-shadow:0 0 0 1px #e0a92a}
.voting-panel-title{font-size:.85rem;font-weight:800;color:#eee;margin-bottom:10px;text-align:center}
/* v112 — mode-mismatch message inside the voting panel (see markup note). */
.vote-modemismatch{font-size:.78rem;line-height:1.5;color:#c9b8f5;background:#1e1e33;border:1px solid #34345a;border-radius:8px;padding:10px 12px;text-align:center}
.vote-field-label{font-size:.62rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.6px;margin:8px 0 5px}
.vote-mode-list{display:flex;flex-direction:column;gap:6px}
.vote-mode-opt{display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-items:start;background:#1a1a2e;border:1px solid #2d2d44;border-radius:8px;padding:7px 9px;cursor:pointer}
.vote-mode-opt input{grid-row:1/3;align-self:center}
.vote-mode-opt.disabled{opacity:.55;cursor:not-allowed}
.vote-mode-name{font-size:.78rem;font-weight:700;color:#ddd}
.vote-mode-desc{font-size:.64rem;color:#999;line-height:1.3}
.vote-soon{font-size:.55rem;background:#2d2d44;color:#a5b4fc;border-radius:6px;padding:1px 5px;margin-left:4px;font-weight:700;vertical-align:middle}
.vote-seg{display:flex;gap:5px;background:#1a1a2e;border-radius:8px;padding:3px}
.vote-seg.vote-seg-stacked{flex-direction:column}
.vote-seg.vote-seg-stacked .vote-seg-btn{width:100%;text-align:center;padding:8px 4px}
.vote-start-sep{height:1px;background:#2d2d44;margin:12px 0 10px}
.vote-mode-explain{background:#1e1e35;border:1px solid #3a3a55;border-radius:10px;padding:12px 14px}
.vote-mode-explain-head{font-size:.85rem;font-weight:800;color:#c4b5fd;margin-bottom:6px}
.vote-mode-explain-body{font-size:.8rem;color:#bbb;line-height:1.5}
/* parameter-voting ballot sliders */
.vb-sliders{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:12px}
.vb-slider-row{display:flex;flex-direction:column;gap:4px}
.vb-slider-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.78rem;font-weight:700;color:#ddd}
.vb-slider-label>span:first-child{flex:1 1 auto;min-width:0;word-break:break-word} /* v85.0 — long param names wrap instead of colliding with the value */
.vb-slider-val{color:#a855f7;flex:0 0 auto;white-space:nowrap} /* v93 — purple to match the text-param values */
.vb-slider-row input[type=range]{width:100%}
.vote-confirm-btn{width:100%;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;color:#fff;font-size:.9rem;font-weight:800;padding:11px;border-radius:10px;cursor:pointer}
.vote-confirm-btn:hover{filter:brightness(1.1)}
.vote-confirm-btn.confirmed{background:linear-gradient(135deg,#22c55e,#16a34a);color:transparent;position:relative}
.vote-confirm-btn.confirmed::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;font-weight:900;animation:vb-check-in .18s ease}
@keyframes vb-check-in{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* v98.5 — #cc-side moved into .cc-layout; it now sizes via .cc-layout
   .vote-results-side (260px, aligned with the community results). The old
   full-width/margin rule (from when it lived stacked in #right-col) is gone. */
.vote-seg-btn{flex:1;background:transparent;border:none;color:#aaa;font-size:.7rem;font-weight:700;padding:6px 4px;border-radius:6px;cursor:pointer}
.vote-seg-btn.disabled,.vote-seg-btn:disabled{opacity:.4;cursor:not-allowed} /* v96.5 — Elo locks the community-hiding option */
.vote-seg-btn.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff}
.vote-toggle-row{display:flex;align-items:flex-start;gap:7px;font-size:.68rem;color:#bbb;margin:10px 0;line-height:1.35;cursor:pointer}
.vote-toggle-row input{margin-top:1px;flex-shrink:0}
.vote-start-btn{width:100%;margin-top:6px;font-size:.82rem}
.vote-active-badge{font-size:.78rem;font-weight:800;color:#86efac;text-align:center;margin-bottom:8px}
.vote-active-badge.hidden-mode{color:#f5d9a5}
.vote-stat-row{display:flex;justify-content:space-between;font-size:.7rem;color:#bbb;margin-bottom:6px}
.vote-mode-line{font-size:.72rem;font-weight:700;color:#a5b4fc;margin-bottom:8px}
.vote-drift-warn{font-size:.7rem;line-height:1.45;color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.4);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.vote-stat b{color:#eee}
.vote-reveal-btn{width:100%;background:#2a2411;border:1px solid #5a4a1e;color:#f5d9a5;font-size:.72rem;font-weight:700;padding:8px;border-radius:8px;cursor:pointer;margin-bottom:8px}
.vote-reveal-btn:hover{background:#3a3218;border-color:#7a6528}
.vote-reveal-btn.revealed{background:#14532d;border-color:#166534;color:#86efac}
.vote-reveal-btn.revealed:hover{background:#1a6b3a;border-color:#1d7d43}
.vote-close-btn{width:100%;font-size:.78rem}
.vote-closed-badge{font-size:.78rem;font-weight:800;color:#fca5a5;text-align:center;margin-bottom:8px} /* v112 — red to match the green "Voting is live" as the closed-state equivalent */
.vote-reopen-btn{width:100%;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;color:#fff;font-size:.78rem;font-weight:700;padding:9px;border-radius:8px;cursor:pointer;margin-bottom:8px}
.vote-reopen-btn:hover{opacity:.88}
.vote-newsession-btn{width:100%;font-size:.76rem}
.qr-panel.show{display:flex} /* v99.7 — .show restores display; width comes from the base/size rules. The JS adds .qr-anim-collapsed first (width:0 while displayed), reflows, then removes it so the width transition slides it open. */
/* v99.7 — two-step reveal collapse state: the panel is display:flex/block (from
   .show) but clipped to width:0, so removing this class next frame animates the
   width open. This works (unlike animating straight from display:none) because the
   element is already displayed when the width changes. overflow:hidden clips the
   content during the wipe. */
.qr-panel.qr-anim-collapsed,.voting-panel.qr-anim-collapsed{width:0!important;min-width:0!important;overflow:hidden;padding-left:0;padding-right:0;border-left-width:0;border-right-width:0}
.qr-panel.qr-md.show{width:240px;min-width:240px}
.qr-panel.qr-lg.show{width:320px;min-width:320px}
/* v75 — keep the voting panel the same width as the QR above it. */
.share-sticky-wrap.qr-md .voting-panel.show{width:240px;min-width:240px}
.share-sticky-wrap.qr-lg .voting-panel.show{width:320px;min-width:320px}
.qr-box{background:#1e1e35;border:1px solid #3a3a55;border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.qr-label{font-size:.65rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;text-align:center}
.qr-code-wrap{background:#fff;padding:8px;border-radius:6px;line-height:0;margin:12px 0 14px}
.qr-code-wrap img,.qr-code-wrap canvas{display:block;width:100%!important;height:auto!important}
.qr-stream-code{font-size:1.4rem;font-weight:900;color:#a855f7;letter-spacing:3px;text-align:center}
.qr-panel.qr-md .qr-stream-code{font-size:1.7rem}
.qr-panel.qr-lg .qr-stream-code{font-size:2.1rem}
/* blur-until-reveal */
.qr-reveal-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;position:relative;transition:filter .25s}
.qr-reveal-wrap{position:relative}
.qr-reveal-wrap.hidden .qr-blur-content{filter:blur(12px)}
.qr-viewers-see{margin-top:8px;font-size:.68rem;line-height:1.4;text-align:center}
.qr-vs-line{color:#a5b4fc;font-weight:700}
.qr-vs-warn{margin-top:5px;color:#fbbf24;font-weight:700}
.qr-hidden-hint{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:.72rem;color:#e9d5ff;font-weight:600;line-height:1.35;filter:blur(0);background:rgba(30,30,53,.82);border-radius:8px;padding:12px}
.qr-reveal-wrap.hidden .qr-hidden-hint{display:flex}
/* subtle controls row */
.qr-controls{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px}
.qr-eye-btn{background:none;border:none;color:#777;font-size:.95rem;cursor:pointer;padding:2px 4px;border-radius:5px;line-height:1;opacity:.7;transition:opacity .15s,background .15s}
.qr-eye-btn:hover{opacity:1;background:#2d2d44}
.qr-eye-btn.active{opacity:1}
.qr-size-seg{display:flex;margin-left:auto;background:#20203a;border-radius:6px;padding:2px}
.qr-share-row{display:flex;gap:5px;width:100%;margin-top:8px}
/* v137 — private list share state (shown in the QR panel when a list has no share code yet) */
.qr-private-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 4px}
.qr-private-icon{font-size:1.5rem}
.qr-private-title{font-size:.9rem;font-weight:800;color:#eee}
.qr-private-note{font-size:.72rem;color:#9a9ab5;line-height:1.35}
.qr-makepublic-btn{width:100%;margin-top:4px}
.qr-makeprivate-btn{margin-top:8px;background:none;border:1px solid #3a3a55;color:#9a9ab5;font-size:.72rem;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;width:100%}
.qr-makeprivate-btn:hover{background:#2d2d44;color:#cbb6f5}
/* v137 — "Test vote" button in the creator's live voting panel */
.vote-testvote-btn{width:100%;margin-top:8px;margin-bottom:8px} /* v139 — gap so it doesn't touch Close Voting */
/* v139 — private block: plain note (was a purple box) + publish button, divided from the rest */
.vote-private-note{font-size:.74rem;font-weight:500;color:#bbb;line-height:1.45;text-align:center;margin-bottom:10px}
#vote-private-block{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #3a3a55}
.vote-makepublic-btn{width:100%}
/* v140 — when private, the QR panel is hidden so the voting panel sits under the
   collapse arrow; add clearance so the arrow doesn't overlap it. */
.voting-panel.private-topgap{margin-top:40px}
/* v140 — Save greyed out when a save would fail (list deleted remotely). */
#save-btn:disabled{opacity:.45;cursor:not-allowed}
/* v137 — "Back to editor" exit shown only during a creator test-vote */
.viewer-testexit-btn{position:fixed;top:14px;left:max(16px,calc(50% - 575px));z-index:10000;background:#2d2d44;border:1px solid #444;color:#e9d5ff;font-size:.82rem;font-weight:800;padding:8px 14px;border-radius:9px;cursor:pointer;display:none;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.viewer-testexit-btn:hover{background:#3a3a55}
.viewer-testexit-btn.show{display:block}
.qr-share-input{flex:1;min-width:0;padding:6px 8px;background:#20203a;border:1px solid #3a3a55;border-radius:6px;color:#bbb;font-size:.68rem;outline:none;cursor:pointer}
.qr-share-input:focus{border-color:#a855f7}
.qr-copy-btn{flex-shrink:0;padding:6px 10px;background:#2d2d44;border:1px solid #444;border-radius:6px;color:#ccc;font-size:.68rem;font-weight:700;cursor:pointer;white-space:nowrap}
.qr-copy-btn:hover{background:#3a3a55;color:#fff}
.qr-copy-btn.copied{background:#14532d;color:#86efac;border-color:#166534}
.qr-seg-btn{background:none;border:none;color:#666;font-size:.66rem;font-weight:700;cursor:pointer;padding:2px 7px;border-radius:4px;transition:all .15s}
.qr-seg-btn:hover{color:#aaa}
.qr-seg-btn.active{background:#3a3a55;color:#e0e0f0}
.qr-stream-label{font-size:.65rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;text-align:center}

.sort-bar{background:#1e1e35;border-radius:10px;border:1px solid #3a3a55;padding:5px 12px;margin-bottom:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* v145 — tighter vertical footprint */
#left-col .sort-bar{max-width:none;margin-left:0;margin-right:0;width:100%} /* v141 — moved into the creator column: tier-list width, not page width */
.sort-bar label{font-size:.78rem;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:.8px}
.sort-bar select{background:#2d2d44;border:1px solid #444;color:#eee;padding:5px 8px;border-radius:7px;font-size:.82rem;outline:none;cursor:pointer}
.sort-dir-btn{background:#2d2d44;border:1px solid #444;color:#ccc;padding:5px 10px;border-radius:7px;cursor:pointer;font-size:.82rem}
.sort-dir-btn:hover{background:#3a3a55;color:#fff}
/* v113 — give every interactive control in the sort bar the same height so the row lines
   up. It mixed a <select>, .sort-dir-btn and .btn.btn-secondary (Apply/Undo), each with
   its own padding — plus the ↑/↓ glyph on the dir button nudged its height. Scoped to
   .sort-bar so the global .btn style is untouched elsewhere. */
/* v146 — .editor-main is a flex column with gap:14px, which dominated the small
   header/sort-bar margins (why the v145 tweak didn't show). Negative bottom margins
   pull title -> Sort-by -> tier list to ~8px apart. Desktop/tablet only; the phone
   (incl. landscape-coarse) block below restores the original values. */
@media(min-width:641px){#creator-list-head{margin-bottom:-6px}#sort-bar{margin-bottom:-6px}}
@media(max-height:600px) and (orientation:landscape) and (pointer:coarse){#creator-list-head{margin-bottom:6px}#sort-bar{margin-bottom:4px}}
/* v148 — top-right menu buttons + TLF code box exactly 30px (emoji buttons rendered
   taller). Every width >640 EXCEPT the phone-landscape case (coarse, <=600 tall). */
@media (min-width:641px) and (pointer:fine),(min-width:641px) and (min-height:601px),(min-width:641px) and (orientation:portrait){
  .user-menu .user-menu-btn{height:30px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:28px}
  .menu-code-combined{height:30px}
}
.sort-bar select,.sort-bar .sort-dir-btn,.sort-bar .btn{height:28px;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;line-height:1;box-sizing:border-box} /* v114 — 28px (was 34) to tighten this low-priority row */

#tierlist{background:#1e1e35;border-radius:12px;border:1px solid #3a3a55;margin-bottom:12px;overflow:visible}
.tier-row{display:flex;align-items:stretch;border-bottom:1px solid #2d2d44;min-height:80px;position:relative}
/* v114 — the tier-list containers keep overflow:visible (so a hovered/selected item can
   grow past the edge without being clipped), which means the square first/last rows poked
   past the container's 12px rounded corners. Round the outer corners of the first row (top)
   and last row (bottom) so they follow the container. ~11px = container 12px minus its 1px
   border. Applies to the editor (#tierlist), the voter's ranking (.vote-mytierlist) and the
   community results (.vote-results-tierlist). The left corner rounds the colored label; the
   right corner rounds whichever cell is last (the controls column, or the items area when
   controls are hidden on phone). */
#tierlist .tier-row:first-child .tier-label-wrap,
.vote-mytierlist .tier-row:first-child .tier-label-wrap,
.vote-results-tierlist .tier-row:first-child .tier-label-wrap{border-top-left-radius:11px}
#tierlist .tier-row:last-child .tier-label-wrap,
.vote-mytierlist .tier-row:last-child .tier-label-wrap,
.vote-results-tierlist .tier-row:last-child .tier-label-wrap{border-bottom-left-radius:11px}
#tierlist .tier-row:first-child>*:last-child,
.vote-mytierlist .tier-row:first-child>*:last-child,
.vote-results-tierlist .tier-row:first-child>*:last-child{border-top-right-radius:11px}
#tierlist .tier-row:last-child>*:last-child,
.vote-mytierlist .tier-row:last-child>*:last-child,
.vote-results-tierlist .tier-row:last-child>*:last-child{border-bottom-right-radius:11px}
.tier-row:last-child{border-bottom:none}
/* v95 — download watermark, injected as a real DOM element just before html2canvas
   captures, then removed. Anchoring to the DOM (instead of computing raw canvas
   coordinates) means the browser positions it exactly, with no render-scale math to
   get wrong. Colorless grey, semi-transparent so it's fine even over an item. */
.tlf-watermark{position:absolute;right:14px;bottom:10px;display:flex;align-items:center;gap:8px;opacity:.5;pointer-events:none;z-index:5}
.tlf-watermark svg{display:block;height:34px;width:auto}
.tlf-watermark .tlf-wm-text{font-size:22px;font-weight:800;color:#8a8aa0;white-space:nowrap;letter-spacing:.2px}
/* Fallback strip appended below the list when the last row has no room. */
.tlf-watermark-strip{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;background:#1e1e35}
.tlf-watermark-strip svg{display:block;height:30px;width:auto}
.tlf-watermark-strip .tlf-wm-text{font-size:20px;font-weight:800;color:#8a8aa0;white-space:nowrap}
.tier-row.row-drag-over-top{border-top:3px solid #a855f7}
.tier-row.row-drag-over-bottom{border-bottom:3px solid #a855f7}
.tier-label-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;min-width:80px;position:relative;cursor:pointer}
.tier-label{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;text-align:center;gap:2px}
.tier-label-text{font-size:1rem;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);line-height:1.05;word-break:break-word;overflow-wrap:anywhere;max-width:100%;text-align:center}
.tier-label-range{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.85);display:none;white-space:nowrap}
.tier-label-range.show{display:block}

.color-popup{position:fixed;background:#2d2d44;border:1px solid #555;border-radius:12px;padding:10px;z-index:1000;display:none;flex-direction:column;gap:8px;width:210px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.color-popup.show{display:flex}
.popup-rename-input{width:100%;padding:6px 8px;background:#1a1a2e;border:1px solid #555;border-radius:7px;color:#eee;font-size:.85rem;outline:none;font-weight:700}
.popup-rename-row{display:flex;gap:5px;margin-bottom:8px}
.popup-rename-row .popup-rename-input{flex:1;min-width:0}
.popup-rename-confirm{flex-shrink:0;width:32px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:7px;color:#fff;font-size:.9rem;font-weight:800;cursor:pointer}
.popup-rename-confirm:hover{opacity:.85}
.popup-rename-confirm.confirmed{background:#14532d;color:#86efac}
.popup-rename-input:focus{border-color:#a855f7}
.popup-colors{display:flex;flex-wrap:wrap;gap:5px}
.color-swatch{width:24px;height:24px;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:transform .1s}
.color-swatch:hover{transform:scale(1.2);border-color:#fff}
.popup-custom-row{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#888}
.popup-range-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.popup-range-row label{color:#aaa;font-size:.72rem;font-weight:600;width:100%}
.range-inp{width:52px;padding:4px 6px;background:#1a1a2e;border:1px solid #444;border-radius:5px;color:#eee;font-size:.82rem;text-align:center;outline:none;-webkit-appearance:none;-moz-appearance:textfield}
.range-inp::-webkit-inner-spin-button,.range-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.range-inp:focus{border-color:#a855f7}
.range-sep{color:#888;font-size:.8rem}
.popup-range-apply{padding:4px 10px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:6px;color:#fff;font-size:.75rem;cursor:pointer}
.popup-range-row.hidden{display:none}
/* v69 — delete-tier button inside the settings popup. Default-hidden: desktop
   already has the row-level ✕ control, so this is a phone-only affordance
   (enabled in @media 640). Separated by a divider from the settings above. */
.popup-delete-row{display:none;margin-top:8px;padding-top:8px;border-top:1px solid #444}
.popup-delete-btn{width:100%;padding:8px 10px;background:#3a1f24;border:1px solid #a33;border-radius:7px;color:#f4a6a6;font-size:.8rem;font-weight:700;cursor:pointer}
.popup-delete-btn:hover{background:#4a2429}
/* v69 — Auto-Rank sheet confirm button: full-width primary action at the bottom
   of the sheet body. The sheet is phone-only (display:none-default), so this is
   inert on desktop. */
.item-sheet-confirm-btn{width:100%;margin-top:16px;padding:14px;font-size:1rem}
/* v70 — sheet-scoped control sizing. All rules are prefixed #item-sheet so the
   shared desktop detail-panel styles (.param-slider, .detail-name-input,
   .item-sheet-close) are untouched outside the sheet. The sheet itself is
   display:none-default and phone-only, so none of this reaches desktop. */
#item-sheet .item-sheet-close{width:26px;height:26px;font-size:.8rem}
#item-sheet .item-sheet-tier-btn{min-width:42px;padding:10px 12px;font-size:.9rem}
#item-sheet .item-sheet-confirm-btn{margin-top:12px;padding:11px;font-size:.9rem}
#item-sheet .detail-name-input{padding:6px 9px;font-size:.85rem}
/* Sliders: smaller track/thumb, and no press-and-hold highlight or text
   selection flash (bottom sheet only, per Kai). */
#item-sheet .param-slider{height:20px;margin-top:2px;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  /* v76 — MUST NOT be pan-y: that tells the browser horizontal drags belong to
     it rather than the slider, so the thumb only ever jumped on tap. `none`
     hands the gesture to the control, which is the norm for a range input.
     Trade-off: you cannot scroll the sheet by dragging from a slider. */
  touch-action:none}
#item-sheet .param-slider:focus{outline:none}
#item-sheet .param-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px}
#item-sheet .param-slider::-moz-range-track{height:4px;border-radius:2px}
#item-sheet .param-slider::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border-width:2px}
#item-sheet .param-slider::-moz-range-thumb{width:14px;height:14px;border-width:2px}
/* v70 — body scroll lock while a phone overlay (sheet or drawer) is open. This
   is what stops the page behind from scrolling during a sheet drag. */
body.tlf-scroll-lock{overflow:hidden;touch-action:none;overscroll-behavior:none}

.tier-items{flex:1;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:6px;padding:10px;min-height:80px;background:#1e1e35;transition:background .15s;overflow:visible;user-select:none;-webkit-user-select:none;-moz-user-select:none}
.tier-items.drag-over{background:#2a2a4a;outline:2px dashed #a855f7;outline-offset:-2px}
/* v120 (item 3) — external-file drag feedback. The pool/band get a highlight ring;
   the whole-list overlay is the big easy target so you don't have to aim. */
.file-drop-over{outline:3px dashed #a855f7!important;outline-offset:-3px;background:#2a2a4a!important}
.file-drop-overlay{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(26,26,46,.82);border:3px dashed #a855f7;border-radius:12px;pointer-events:none}
.file-drop-overlay.show{display:flex}
.file-drop-overlay-inner{font-size:1.15rem;font-weight:800;color:#e9d5ff;letter-spacing:.01em;
  padding:16px 26px;background:#2d2d44;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.5);text-align:center}
.tier-controls{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px;background:#1a1a30}
.tier-controls.hidden{display:none}
.tier-move-arrows{display:inline-flex;gap:2px}
.tier-move-arrows.hidden{display:none}
.tier-ctrl-btn{background:#2d2d44;border:none;color:#aaa;width:26px;height:26px;border-radius:5px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.tier-ctrl-btn:hover{background:#444;color:#fff}
.tier-ctrl-btn.del:hover{background:#7f1d1d;color:#fca5a5}

.item{position:relative;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:grab;user-select:none;-webkit-user-select:none;-moz-user-select:none;transition:transform .1s,box-shadow .1s,border-color .1s;border:2px solid transparent;flex-shrink:0;overflow:visible}
.item:hover{transform:scale(1.05);box-shadow:0 0 0 2px rgb(168,85,247),0 4px 12px rgba(168,85,247,.3)} /* v98.8 — opaque 2px purple ring on hover (was a translucent glow only) */
/* v98.8 — give the voting/pool/viewer items the same enlarge + opaque purple ring
   on hover that the creator .item has. .vt-item and .vote-pool-item are
   overflow:hidden, which clips children but not the element's own box-shadow, so an
   outer ring shows fine. transition added where missing so the scale animates. */
.vt-item,.vote-pool-item{transition:transform .1s,box-shadow .1s}
.vt-item:hover,.vote-pool-item:hover{transform:scale(1.05);box-shadow:0 0 0 2px rgb(168,85,247),0 4px 12px rgba(168,85,247,.3);z-index:5;position:relative}
/* v114 — a SELECTED pool item keeps its 4px ring + 1.08 grow on hover (don't fall back to
   the 2px/1.05 hover state — that made the ring change size and the image shrink/shift). */
.vote-pool-item.current:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgb(168,85,247),0 0 16px rgba(168,85,247,.4);z-index:10}
.viewer-item:hover{transform:scale(1.06);box-shadow:0 0 0 2px rgb(168,85,247),0 3px 10px rgba(168,85,247,.35)} /* v98.8 — opaque ring (was translucent) */
.item.selected{border-color:#a855f7!important;box-shadow:0 0 0 4px rgb(168,85,247),0 0 16px rgba(168,85,247,.4)!important;transform:scale(1.08)!important;z-index:10} /* v98.7 — solid ring alpha .5→1 (opaque) so a grown item's neighbours don't shine through it */
.vt-item img,.vote-pool-item img{pointer-events:none;-webkit-user-drag:none;user-drag:none}
/* v96 — voter items are draggable=true (see makeVoteDraggable) and the tier rows
   are wired as drop-zones that cast a vote on drop, but on phone a long-press was
   popping the OS image "save/share" callout instead of starting a drag. Suppress
   the callout + selection on the draggable CELL (not the inner img) so the native
   long-press-drag takes over — exactly how .item and .h2h-card already behave.
   Desktop mouse-drag is unaffected. Tap-to-open-ballot still works (short tap). */
.vt-item,.vote-pool-item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.vt-item.vt-selected,.vote-pool-item.vt-selected{box-shadow:0 0 0 4px rgb(168,85,247),0 0 16px rgba(168,85,247,.4);transform:scale(1.08);transition:transform .15s,box-shadow .15s;z-index:10;position:relative} /* v98.7 — solid ring opaque (was .5 alpha) so neighbours don't shine through the grown item */
.item.dragging{opacity:.3}
/* v97.5 — drop-position indicator: a PSEUDO-ELEMENT insertion line in the gap to
   the LEFT of the hovered item. The border approach fought each item's own box:
   on the voter's .vt-item (overflow:hidden + border-radius) a left border curved
   around the corners (the "bend") and sat flush on the item ("stuck"); on the
   creator's .item it was lost against the existing 2px border + filled image. A
   ::before positioned in the gap avoids all of that — a straight bar, not part of
   the item's rounded/clipped box, sitting between items rather than on one.
   .vt-item is overflow:hidden by default, so we flip it to visible while active
   so the bar isn't clipped; both item types get position:relative for the bar. */
.item.drag-insert-before,.item.drop-insert-before,.vt-item.drop-insert-before{
  position:relative;
  overflow:visible;
}
/* v97.7 — open room at the drop point WITHOUT moving layout (bounce-proof). The
   left neighbor slides left via transform:translateX — a visual-only shift that
   does NOT change its layout box, so the hovered item (whose dragover fires) never
   moves and there is no dragleave/dragover bounce. Every layout-based attempt
   (margin/padding on the hovered item OR its neighbor) shoved the hovered item and
   bounced; transform is outside layout, so it can't. Same rule for creator .item +
   voter .vt-item, phone + desktop (both route through markDropPoint/clearDropPoint,
   no platform branching). */
.item.drop-make-room,.vt-item.drop-make-room{
  transform:translateX(-12px);
  transition:transform .12s ease;
}
/* v98.4 — bar on the HOVERED item (so it also shows for the FIRST item in a row,
   which has no make-room neighbor). Position is now -12.5px, set by measuring the
   OPTICAL centre on a real screen (console slider probe) rather than geometric
   centre: item borders/rounding/image fill make true-looking centre sit slightly
   left of the math midpoint, so every prior geometric attempt looked off. The
   neighbor still slides 12px (.drop-make-room); -12.5px is where the bar looks
   centred between the two items to the eye. */
.item.drag-insert-before::before,.item.drop-insert-before::before,.vt-item.drop-insert-before::before{
  content:"";
  position:absolute;
  left:-12.5px; top:4px; bottom:4px;
  width:3px;
  border-radius:2px;
  background:#a855f7;
  z-index:20;
  pointer-events:none;
}
.vt-item.drop-insert-before::before{left:-10.5px} /* v150 — .vt-item has no 2px border: -10.5 centres the bar in the gap (creator .item keeps -12.5) */
.item.img-item{overflow:visible}
.item.img-item img{pointer-events:none;display:block;border-radius:6px;-webkit-user-drag:none;user-drag:none;opacity:1;transition:opacity .25s ease}
.item.text-item{background:#2d2d44;padding:2px 4px;border-radius:8px;font-size:.62rem;line-height:1.15;font-weight:400;color:#ddd;min-width:60px;max-width:110px;text-align:center;word-break:break-word;overflow:visible;display:flex;align-items:center;justify-content:center}
.item.text-item>span{overflow:hidden;max-height:100%;display:block;width:100%}
/* v147 — text items take the exact image-item size per shape (like every other list) */
body.shape-square .item.text-item{width:80px;height:80px;min-width:0;max-width:none}
body.shape-landscape .item.text-item{width:120px;height:80px;min-width:0;max-width:none}
body.shape-portrait .item.text-item{width:86px;height:120px;min-width:0;max-width:none}
body.shape-round .item.text-item{width:80px;height:80px;min-width:0;max-width:none;border-radius:50%;padding:8px} /* v148 — viewer text style (.62rem / 1.15) so the full text fits */
body.shape-nocrop .item.text-item{max-width:120px;height:80px}
body.shape-square .item.img-item{width:80px;height:80px}
body.shape-square .item.img-item img{width:80px;height:80px;object-fit:cover}
body.shape-landscape .item.img-item{width:120px;height:80px}
body.shape-landscape .item.img-item img{width:120px;height:80px;object-fit:cover}
body.shape-portrait .item.img-item{width:86px;height:120px}
body.shape-portrait .item.img-item img{width:86px;height:120px;object-fit:cover}
body.shape-round .item.img-item{width:80px;height:80px;border-radius:50%}
body.shape-round .item.img-item img{width:80px;height:80px;object-fit:cover;border-radius:50%}
body.shape-nocrop .item.img-item{max-width:120px;height:80px}
body.shape-nocrop .item.img-item img{max-width:120px;height:80px;object-fit:contain}
/* v139 — purple "empty text parameter" dot DISABLED at Kai's request. The refreshDot()
   logic still runs (harmlessly toggling the now-invisible .incomplete class); to bring the
   hint back, just un-comment the rule below.
.item.incomplete::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#a855f7;border-radius:50%;border:1.5px solid #1a1a2e;z-index:5}
*/
.item-action-btn{position:absolute;top:-9px;right:-9px;background:#ef4444;border:none;border-radius:50%;width:22px;height:22px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:20;line-height:1}
/* Invisible ring that enlarges the clickable area without changing how it looks. */
.item-action-btn::before{content:'';position:absolute;inset:-7px;border-radius:50%}
.item:hover .item-action-btn{display:flex}
.autorank-mode .item-action-btn{display:none!important}
.autorank-mode .item{cursor:pointer}
.item.uploading{opacity:1}
.item.uploading img{opacity:0}
.item-shimmer{position:absolute;inset:0;border-radius:6px;background:linear-gradient(100deg,#2d2d44 30%,#3d3d5c 50%,#2d2d44 70%);background-size:200% 100%;animation:tlf-shimmer 1.3s ease-in-out infinite;pointer-events:none}
body.shape-round .item-shimmer{border-radius:50%}
@keyframes tlf-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* UPLOAD PROGRESS BANNER */
.upload-progress-banner{background:#1e1e35;border:1px solid #3a3a55;border-radius:10px;padding:10px 14px;margin-bottom:10px;display:none;align-items:center;gap:12px;font-size:.82rem;color:#c4b5fd}
.upload-progress-banner.show{display:flex}
.upload-progress-text{white-space:nowrap;font-weight:600}
.upload-progress-track{flex:1;height:6px;background:#2d2d44;border-radius:3px;overflow:hidden}
.upload-progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#a855f7);width:0%;transition:width .2s}
.upload-progress-cancel{background:#2d2d44;border:1px solid #444;color:#ccc;padding:4px 10px;border-radius:7px;cursor:pointer;font-size:.75rem;white-space:nowrap}
.upload-progress-cancel:hover{background:#3a3a55;color:#fff}

/* LIST LOADING OVERLAY */
.list-loading{position:absolute;inset:0;background:rgba(30,30,53,.82);border-radius:12px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:50}
.list-loading.show{display:flex}
.list-loading-spinner{width:34px;height:34px;border:3px solid rgba(168,85,247,.25);border-top-color:#a855f7;border-radius:50%;animation:tlf-spin .8s linear infinite}
.list-loading-text{font-size:.85rem;color:#c4b5fd;font-weight:600}
@keyframes tlf-spin{to{transform:rotate(360deg)}}

.pool-section{background:#1e1e35;border-radius:12px;border:1px solid #3a3a55;padding:10px;margin-bottom:12px}
.pool-title{font-size:.75rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
#item-pool{display:flex;flex-wrap:wrap;gap:7px;min-height:54px;padding:8px;border-radius:8px;overflow:visible;user-select:none;-webkit-user-select:none;-moz-user-select:none}
/* v73 — empty-state hint, replacing the old demo items. :empty matches only
   while the pool holds nothing, so it needs no JS and can never go stale.
   pointer-events:none keeps the pool usable as a drag-and-drop target. */
#item-pool:empty::before{
  content:"Upload images or add text below, then drag them into the tiers above";
  display:block;width:100%;align-self:center;text-align:center;
  color:#5f6080;font-size:.78rem;font-style:italic;pointer-events:none;padding:10px 6px;
}
#item-pool.drag-over{background:#2a2a4a;outline:2px dashed #a855f7;outline-offset:-2px}
.add-item-bar{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.add-item-bar input{flex:1;min-width:120px;padding:7px 10px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:.85rem;outline:none}
.add-item-bar input:focus{border-color:#a855f7}

.detail-panel{background:#1e1e35;border-radius:14px;border:1px solid #3a3a55;overflow:hidden}
/* v79.7 — the VOTING VIEW's two detail panels match the ballot beside them.
   All three slots (personal / community / creator's authored ranking, shown
   post-close) exist ONLY in the viewer's voting screen, so the creator's own
   editor panels — #detail-panel and #cc-card — are untouched. */
#vp-slot .detail-panel,#vc-slot .detail-panel,#vk-slot .detail-panel{background:#1e1e35;border-color:#3a3a55}
.detail-header{padding:14px 14px 0}
.detail-img-wrap{width:100%;border-radius:10px;overflow:hidden;background:#2d2d44;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.detail-img-wrap.tappable{cursor:zoom-in} /* v83.5 — creator editor image enlarges on click */
.vdetail-img.tappable{cursor:zoom-in}    /* v83.6 — magnifying-glass cursor on the viewer detail images too */
.detail-img-wrap.example-img{background:transparent}
/* v79.6 — the v79.5 rule that lived here has been REMOVED. It capped these two
   wrappers at 200px tall to make them match, but the mismatch was never between
   these two elements: the image being compared was the BALLOT image, which is
   sized separately (see renderBallot). All the rule achieved was shrinking the
   community detail image below where it started. */
.detail-img-wrap img{display:block}
body.shape-square .detail-img-wrap{aspect-ratio:1/1}
body.shape-square .detail-img-wrap img{width:100%;height:100%;object-fit:cover}
body.shape-landscape .detail-img-wrap{aspect-ratio:3/2}
body.shape-landscape .detail-img-wrap img{width:100%;height:100%;object-fit:cover}
body.shape-portrait .detail-img-wrap{aspect-ratio:285/399}
body.shape-portrait .detail-img-wrap img{width:100%;height:100%;object-fit:cover}
body.shape-round .detail-img-wrap{aspect-ratio:1/1;border-radius:50%}
body.shape-round .detail-img-wrap img{width:100%;height:100%;object-fit:cover}
body.shape-nocrop .detail-img-wrap{aspect-ratio:auto;max-height:220px}
body.shape-nocrop .detail-img-wrap img{max-width:100%;max-height:220px;object-fit:contain}
.detail-img-wrap .text-preview{font-size:1.6rem;font-weight:800;color:#a855f7;text-align:center;padding:24px 16px;word-break:break-word;width:100%}
.detail-name-wrap{margin-bottom:10px}
.detail-name-label{font-size:.7rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.detail-name-input{width:100%;padding:8px 10px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;font-size:.95rem;font-weight:700;outline:none}
.detail-name-input:focus{border-color:#a855f7}
.detail-name-row{display:flex;gap:6px}
.detail-name-confirm{flex-shrink:0;width:38px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;display:none}
.detail-name-row.focused .detail-name-confirm{display:block}
.detail-name-confirm:hover{opacity:.85}
.detail-name-confirm.confirmed{background:#14532d;color:#86efac}
.param-input-row{display:flex;gap:6px}
.param-input-row .param-input{flex:1;min-width:0}
.input-confirm-btn{flex-shrink:0;width:34px;background:linear-gradient(135deg,#a855f7,#6366f1);border:none;border-radius:8px;color:#fff;font-size:.95rem;font-weight:800;cursor:pointer;display:none}
.param-input-row.focused .input-confirm-btn{display:block}
.input-confirm-btn:hover{opacity:.85}
.input-confirm-btn.confirmed{background:#14532d;color:#86efac}
.score-display{background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(99,102,241,.15));border:1px solid rgba(168,85,247,.3);border-radius:10px;padding:10px 14px;margin:0 14px 12px;display:none}
.score-display.show{display:block}
.score-main{font-size:1.4rem;font-weight:800;color:#a855f7;text-align:center}
.score-pct{font-size:.8rem;color:#888;text-align:center;margin-top:2px}
.score-bar-wrap{margin-top:8px;background:#141425;border:1px solid #3a3a55;border-radius:6px;height:9px;overflow:hidden}
.score-bar-fill{height:100%;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#6366f1,#a855f7);transition:width .4s;box-shadow:1px 0 0 rgba(255,255,255,.35)}
.detail-params{padding:0 14px 14px}
.detail-params-title{font-size:.7rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.param-row{margin-bottom:10px}
.param-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.param-label{font-size:.8rem;color:#aaa;font-weight:600}
.param-value-badge{font-size:.8rem;font-weight:700;color:#a855f7}
.param-input{width:100%;padding:6px 8px;background:#2d2d44;border:1px solid #444;border-radius:7px;color:#eee;font-size:.82rem;outline:none}
.param-input:focus{border-color:#a855f7}
textarea.param-input{resize:none;overflow:hidden;line-height:1.35;font-family:inherit;display:block} /* v148 — grows with its text */
.param-slider{width:100%;-webkit-appearance:none;height:26px;background:transparent;outline:none;cursor:pointer;margin-top:4px}
.param-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#2d2d44}
.param-slider::-moz-range-track{height:6px;border-radius:3px;background:#2d2d44}
.param-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#6366f1);cursor:pointer;border:2px solid #1a1a2e}
.param-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#6366f1);cursor:pointer;border:2px solid #1a1a2e}
.slider-labels{display:flex;justify-content:space-between;font-size:.62rem;color:#555;margin-top:2px;user-select:none;-webkit-user-select:none}
/* v153 — the number row is part of the slider's grab area: drag along it or click a number */
.param-slider+.slider-labels{cursor:pointer;padding:4px 3px;margin-top:-2px;touch-action:pan-y}
.param-slider+.slider-labels span{padding:2px 3px;border-radius:4px}
.param-slider+.slider-labels span:hover{color:#c4b5fd;background:rgba(168,85,247,.12)}
.detail-no-params{font-size:.82rem;color:#555;font-style:italic;padding:4px 0 8px}
.add-param-detail-btn{width:100%;padding:7px;background:#2d2d44;border:1px dashed #555;border-radius:8px;color:#aaa;font-size:.8rem;cursor:pointer;transition:all .15s;margin-top:4px}
/* v75 — side-panel touch placement. Revealed only by renderDetailTiers() when
   the device is a touch tablet in landscape; inert everywhere else. */
.detail-tiers{margin:12px 0 14px}
.detail-tiers-hint{font-size:.72rem;color:#8a8aa0;text-align:center;margin-bottom:7px}
.detail-tier-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.detail-tier-btn{flex:1 1 auto;min-width:46px;padding:11px 12px;border:none;border-radius:8px;
  color:#fff;font-weight:800;font-size:.9rem;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.detail-tier-btn:active{transform:scale(.96)}
.detail-delete-btn{width:100%;margin-top:14px;padding:10px;background:#3a1f24;border:1px solid #a33;
  border-radius:8px;color:#f4a6a6;font-size:.82rem;font-weight:700;cursor:pointer}
.detail-delete-btn:hover{background:#4a2429}
.add-param-detail-btn:hover{background:#3a3a55;color:#fff;border-color:#a855f7}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:#1e1e35;border-radius:14px;padding:22px;width:100%;max-width:400px;border:1px solid #444;max-height:85vh;overflow-y:auto}
.tlf-confirm-box{max-width:440px}
.ballot-img-big{max-width:92vw;max-height:82vh;display:flex;align-items:center;justify-content:center}
.ballot-img-big img{max-width:92vw;max-height:82vh}
.ballot-img-big .vb-text{background:#2d2d44;border-radius:14px;padding:24px 20px;font-size:1.4rem;font-weight:700;color:#eee;text-align:center}
#ballot-img-modal{background:rgba(0,0,0,.9)} /* v150 — darker behind an enlarged item */
.ballot-img-big .vb-text.vb-text-shaped{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:7%;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;line-height:1.2}
.detail-img-wrap.tappable .detail-text-item,.detail-img-wrap.tappable .text-preview{cursor:zoom-in}
.vote-ballot-img.tappable{cursor:zoom-in}
.tlf-confirm-title{font-size:1.02rem;font-weight:800;color:#eee;margin-bottom:10px}
.tlf-confirm-msg{font-size:.86rem;color:#bbb;line-height:1.5;white-space:pre-line;margin-bottom:18px}
.tlf-confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.tlf-confirm-actions .btn{min-width:104px}
.modal h3{margin-bottom:14px;font-size:1rem}
.pm-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pm-card{background:#2d2d44;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.pm-top{display:flex;gap:7px;align-items:center}
.pm-top input{flex:1;padding:7px 10px;background:#1a1a2e;border:1px solid #444;border-radius:8px;color:#eee;font-size:.85rem;outline:none}
.pm-top input:focus{border-color:#a855f7}
.pm-top button{background:#7f1d1d;border:none;color:#fca5a5;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:.8rem}
.pm-top button.pm-move{background:#2d2d44;color:#ccc;padding:3px 5px;font-size:.6rem;line-height:1;border-radius:6px} /* v150/v151 — reorder, compact */
.pm-arrows{display:inline-flex;gap:2px;flex:0 0 auto}
.pm-top button.pm-del{padding:4px 7px;font-size:.7rem;line-height:1;border-radius:6px} /* v151 — smaller ✕ */
.pm-top button.pm-move:hover:not(:disabled){background:#3a3a55;color:#fff}
.pm-top button.pm-move:disabled{opacity:.3;cursor:default}
.pm-type{display:flex;gap:6px}
.type-btn{padding:5px 12px;border-radius:6px;border:1px solid #444;background:#1a1a2e;color:#888;font-size:.78rem;cursor:pointer;transition:all .15s}
.type-btn.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;border-color:transparent}
.pm-unit{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#888}
.pm-unit input{width:80px;padding:5px 8px;background:#1a1a2e;border:1px solid #444;border-radius:7px;color:#eee;font-size:.82rem;outline:none}
.add-param-btn{background:#2d2d44;border:1px dashed #555;color:#aaa;padding:8px;border-radius:8px;cursor:pointer;font-size:.82rem;width:100%;margin-bottom:12px}
.add-param-btn:hover{background:#3a3a55;color:#fff;border-color:#a855f7}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.text-modal-inner{background:#1e1e35;border-radius:14px;padding:22px;width:100%;max-width:320px;border:1px solid #444}
.text-modal-inner h3{margin-bottom:14px;font-size:1rem}
.text-modal-inner input{width:100%;padding:9px 10px;background:#2d2d44;border:1px solid #444;border-radius:8px;color:#eee;margin-bottom:12px;font-size:.9rem;outline:none}
.text-modal-inner input:focus{border-color:#a855f7}
.flash-stack{position:fixed;top:72px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:340px;pointer-events:none}
.flash-toast{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;background:#14532d;color:#86efac;padding:11px 14px;border-radius:10px;font-size:.85rem;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;transform:translateX(12px);transition:opacity .25s,transform .25s;pointer-events:auto;line-height:1.35}
.flash-toast.show{opacity:1;transform:translateX(0)}
.flash-toast.warn{background:#4a1d1d;color:#fca5a5}
.flash-toast .flash-msg{flex:1;white-space:pre-line}
.flash-toast /* v78 — order:2 + width:100% drops this onto its own line under the message;
   the ✕ takes order:1 so it stays beside the text rather than being pushed to a
   third row. */
.flash-action{background:#3b3b63;border:1px solid #6d5bd0;color:#dcd6ff;font-size:.78rem;font-weight:700;
  border-radius:7px;padding:8px 10px;cursor:pointer;white-space:nowrap;
  order:2;width:100%;margin-left:0;margin-top:2px}
.flash-action:hover{background:#4a4a7a}
.flash-x{order:1;flex-shrink:0;cursor:pointer;color:inherit;opacity:.7;font-weight:800;font-size:.95rem;line-height:1;padding:0 2px;background:none;border:none}
.flash-toast .flash-x:hover{opacity:1}
.flash.show{opacity:1}
/* ADMIN MODERATION */
.admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:10001;display:none;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto}
.admin-overlay.show{display:flex}
.admin-panel{background:#1e1e35;border:1px solid #3a3a55;border-radius:14px;padding:20px;width:100%;max-width:760px}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.admin-header h3{font-size:1.05rem;color:#eee}
.admin-close{background:#2d2d44;border:1px solid #444;color:#ccc;width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:.9rem}
.admin-close:hover{background:#7f1d1d;color:#fca5a5}
.admin-refresh-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.admin-count{font-size:.8rem;color:#888}
.admin-report{background:#1e1e35;border:1px solid #2d2d44;border-radius:12px;padding:14px;margin-bottom:14px}
.admin-report-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.admin-report-title{font-size:.95rem;font-weight:800;color:#eee}
.admin-report-meta{font-size:.72rem;color:#888;margin-top:3px;line-height:1.5}
.admin-reason{display:inline-block;background:#7f1d1d;color:#fca5a5;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:6px;margin-top:4px}
.admin-gone{display:inline-block;background:#3a3a1a;color:#f5d98a;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:6px;margin-left:6px}
.admin-images{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.admin-img{width:96px;border-radius:8px;overflow:hidden;background:#2d2d44;position:relative;border:1px solid #3a3a55;display:flex;flex-direction:column}
.admin-img>img{width:96px;height:84px;object-fit:cover;display:block}
.admin-img-status{font-size:.58rem;font-weight:700;text-align:center;padding:1px 0;background:rgba(0,0,0,.6);color:#f5d98a}
.admin-img-status.status-active{color:#86efac}
.admin-img-status.status-quarantined{color:#f5d98a}
.admin-img-status.status-escalated{color:#fca5a5}
.admin-img-status.status-soft_deleted{color:#fdba74}
.admin-img-acts{display:flex;border-top:1px solid #3a3a55}
.admin-img-btn{flex:1;border:none;padding:4px 0;font-size:.72rem;cursor:pointer;font-weight:700}
.admin-img-btn.admin-dismiss{background:#14532d;color:#86efac}
.admin-img-btn.admin-uphold{background:#7c2d12;color:#fdba74}
.admin-img-btn.admin-escalate{background:#7f1d1d;color:#fca5a5}
.admin-img-btn:hover{filter:brightness(1.3)}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.admin-act-btn{padding:6px 12px;border-radius:7px;font-size:.78rem;font-weight:700;cursor:pointer;border:1px solid}
.admin-dismiss{background:#14532d;color:#86efac;border-color:#166534}
.admin-dismiss:hover{background:#166534}
.admin-uphold{background:#7c2d12;color:#fdba74;border-color:#9a3412}
.admin-uphold:hover{background:#9a3412}
.admin-escalate{background:#7f1d1d;color:#fca5a5;border-color:#991b1b}
.admin-escalate:hover{background:#991b1b}
.admin-empty{font-size:.85rem;color:#666;font-style:italic;padding:20px;text-align:center}
.admin-textitems{margin:10px 0;display:flex;flex-direction:column;gap:6px}
.admin-textitem{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1a1a2e;border:1px solid #2d2d44;border-radius:8px;padding:6px 10px}
.admin-textitem-label{font-size:.82rem;color:#ddd;font-weight:600;word-break:break-word}
.admin-textitem-acts{display:flex;gap:4px;flex-shrink:0}
.admin-textitem-acts .admin-img-btn{border-radius:5px;padding:3px 8px}
.admin-snapshot{background:#1a1a2e;border-radius:8px;border:1px solid #2d2d44;overflow:hidden;margin:8px 0}
.admin-snap-row{display:flex;align-items:stretch;border-bottom:1px solid #2d2d44;min-height:54px}
.admin-snap-row:last-child{border-bottom:none}
.admin-snap-label{width:48px;min-width:48px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:#fff}
.admin-snap-items{flex:1;display:flex;flex-wrap:wrap;gap:4px;padding:5px;background:#1e1e35;align-items:center}
.admin-snap-items img{width:44px;height:44px;object-fit:cover;border-radius:4px}
.admin-snap-cell{cursor:pointer;border-radius:5px;transition:transform .1s,box-shadow .1s;display:flex}
.admin-snap-cell:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(168,85,247,.4)}
.admin-snap-text{background:#2d2d44;padding:3px 7px;border-radius:5px;font-size:.68rem;color:#ddd}

/* v101 — SECURITY / 2FA panel (reuses .admin-overlay + .admin-panel shell). */
.sec-sub{font-size:.82rem;color:#9aa;line-height:1.55;margin:2px 0 16px}
/* v116 — Account panel sections (email/login/plan, password) inside the account overlay. */
.acct-section{padding:14px 0;border-top:1px solid #2d2d44}
.acct-section:first-of-type{border-top:none;padding-top:2px}
.acct-sec-title{font-size:.9rem;font-weight:800;color:#eee;margin-bottom:12px}
.acct-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0;font-size:.86rem}
.acct-label{color:#9aa;font-weight:600;flex:0 0 auto}
.acct-value{color:#eee;font-weight:600;text-align:right;min-width:0;word-break:break-word}
.acct-value.acct-muted,.acct-muted{color:#7a8899;font-weight:500}
.acct-note{font-size:.76rem;line-height:1.5;margin-top:6px}
.acct-pw-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;max-width:340px}
.acct-pw-input{margin:0}
.acct-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acct-msg{font-size:.8rem}
.acct-msg.ok{color:#86efac}
.acct-msg.err{color:#fca5a5}
/* v117 (B3) — delete-account danger zone + confirmation modal. */
.acct-danger{border-top:1px solid #4a2323}
.acct-danger-title{color:#fca5a5}
.acct-danger-text{font-size:.82rem;color:#c99;line-height:1.5;margin-bottom:12px}
.acct-delete-btn{background:#7f1d1d;color:#fecaca;border:1px solid #a13;font-weight:700}
.acct-delete-btn:hover:not(:disabled){background:#991b1b;color:#fff}
.acct-delete-btn:disabled{opacity:.5;cursor:not-allowed}
.delete-account-panel{max-width:440px}
.del-body{font-size:.86rem;color:#ddd;line-height:1.6}
.del-body p{margin:0 0 12px}
.del-type-hint{color:#c99}
#del-confirm-input{margin:0 0 8px;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.del-err{font-size:.8rem;color:#fca5a5;min-height:1em;margin-bottom:8px}
.del-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.sec-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sec-pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid #3a3a55;background:#1e1e35;color:#9aa}
.sec-pill.on{background:#14532d;border-color:#1f6a3d;color:#86efac}
.sec-pill.off{background:#3a2a1a;border-color:#5a3a1a;color:#fdba74}
.sec-factor-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.sec-factor{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1e1e35;border:1px solid #2d2d44;border-radius:10px;padding:10px 12px}
.sec-factor-name{font-size:.86rem;color:#eee;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.sec-factor-name .sec-fn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-factor-tag{font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:6px;background:#2d2d44;color:#c9b8f5;flex:0 0 auto}
.sec-factor-tag.backup{background:#1e3a5a;color:#93c5fd}
.sec-factor-remove{flex:0 0 auto;background:#2d2d44;border:1px solid #444;color:#ccc;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer}
.sec-factor-remove:hover{background:#7f1d1d;color:#fca5a5;border-color:#7f1d1d}
.sec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.sec-note{font-size:.76rem;color:#9aa;line-height:1.55;background:#1a1a30;border:1px solid #2d2d44;border-left:3px solid #6d5bd0;border-radius:8px;padding:10px 12px;margin-top:12px}
/* enrolment sub-flow (QR + verify) */
.sec-enroll{margin-top:16px;padding-top:16px;border-top:1px solid #2d2d44}
.sec-enroll-head{font-size:.92rem;font-weight:800;color:#eee;margin-bottom:4px}
.sec-steps{counter-reset:secstep;display:flex;flex-direction:column;gap:14px;margin-top:12px}
.sec-step{display:flex;gap:11px;align-items:flex-start}
.sec-step::before{counter-increment:secstep;content:counter(secstep);flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#6d5bd0;color:#fff;font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.sec-step-body{flex:1;min-width:0}
.sec-step-body h5{font-size:.84rem;color:#eee;margin:1px 0 5px}
.sec-step-body p{font-size:.78rem;color:#9aa;line-height:1.5;margin:0}
.sec-qr-wrap{background:#fff;border-radius:10px;padding:12px;width:-moz-fit-content;width:fit-content;margin:8px 0}
.sec-qr-wrap img,.sec-qr-wrap svg{display:block;width:172px;height:172px}
.sec-secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:#c9b8f5;background:#1a1a30;border:1px solid #2d2d44;border-radius:7px;padding:8px 10px;margin-top:8px;word-break:break-all;-webkit-user-select:all;user-select:all}
.sec-code-input{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.32em;font-size:1.1rem;text-align:center;width:170px;padding:9px 10px;background:#1a1a30;border:1px solid #3a3a55;border-radius:8px;color:#fff;margin-top:8px}
.sec-code-input:focus{outline:none;border-color:#6d5bd0}
.sec-enroll-err{color:#fca5a5;font-size:.78rem;margin-top:8px;display:none}
.sec-enroll-err.show{display:block}
.sec-busy{opacity:.55;pointer-events:none}

/* v102 — PARTNERS / COMP panel (reuses .admin-overlay + .admin-panel shell). */
.pt-grant{background:#1e1e35;border:1px solid #2d2d44;border-radius:12px;padding:16px}
.pt-grant-head{font-size:.92rem;font-weight:800;color:#eee;margin-bottom:12px}
.pt-field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.pt-field label{font-size:.74rem;color:#9aa;font-weight:600}
.pt-field input,.pt-field select{background:#1a1a30;border:1px solid #3a3a55;border-radius:8px;color:#fff;font-size:.9rem;padding:8px 10px}
.pt-field input:focus,.pt-field select:focus{outline:none;border-color:#6d5bd0}
/* v103 — make the native date-picker calendar icon visible on the dark field
   (default is near-black and invisible). Inverts it to a light glyph. */
.pt-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);cursor:pointer;opacity:.85}
.pt-field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.pt-grant-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.pt-msg{font-size:.8rem}
.pt-msg.ok{color:#86efac}
.pt-msg.err{color:#fca5a5}
.pt-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:#1e1e35;border:1px solid #2d2d44;border-radius:10px;padding:11px 13px;margin-bottom:9px}
.pt-row-off{opacity:.6}
.pt-row-left{min-width:0;flex:1}
.pt-row-email{font-size:.9rem;color:#eee;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row-meta{display:flex;align-items:center;gap:8px;font-size:.74rem;color:#9aa;margin-top:4px}
.pt-pill{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
.pt-pill.on{background:#14532d;color:#86efac}
.pt-pill.off{background:#3a1a1a;color:#fca5a5}
.pt-row-note{font-size:.76rem;color:#9aa;margin-top:6px;line-height:1.45;word-break:break-word}
.pt-revoke{flex:0 0 auto;background:#2d2d44;border:1px solid #444;color:#ccc;font-size:.74rem;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer}
.pt-revoke:hover{background:#7f1d1d;color:#fca5a5;border-color:#7f1d1d}

/* v103 — Partners CRM additions */
.pt-panel{max-width:820px}
.pt-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid #2d2d44}
.pt-tab{background:none;border:none;border-bottom:2px solid transparent;color:#9aa;font-size:.86rem;font-weight:700;padding:8px 14px;cursor:pointer;margin-bottom:-1px}
.pt-tab:hover{color:#ccc}
.pt-tab-on{color:#eee;border-bottom-color:#6d5bd0}
.pt-note-inline{font-size:.76rem;color:#fdba74;background:#3a2a1a;border:1px solid #5a3a1a;border-radius:8px;padding:8px 11px;margin-bottom:12px;line-height:1.45}
.pt-lookup-row{display:flex;gap:8px}
.pt-lookup-row input{flex:1;min-width:0}
.pt-lookup-row .btn{flex:0 0 auto}
.pt-lookup-result{font-size:.8rem;margin-top:7px;min-height:1em}
.pt-lookup-result.ok{color:#86efac}
.pt-lookup-result.err{color:#fca5a5}
/* partner list rows */
.pt-pcard{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1e1e35;border:1px solid #2d2d44;border-radius:10px;padding:12px 14px;margin-bottom:9px;cursor:pointer;transition:border-color .12s,background .12s}
.pt-pcard:hover{border-color:#6d5bd0;background:#23233f}
.pt-pcard-main{min-width:0;flex:1}
.pt-pcard-name{font-size:.94rem;color:#eee;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-pcard-sub{font-size:.75rem;color:#9aa;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pt-lc{display:inline-block;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
.pt-lc.active{background:#14532d;color:#86efac}
.pt-lc.expiring{background:#3a3320;color:#fde68a}
.pt-lc.expired{background:#3a1a1a;color:#fca5a5}
.pt-lc.paused{background:#26263f;color:#c9b8f5}
.pt-lc.prospect{background:#1e3a5a;color:#93c5fd}
.pt-pcard-arrow{flex:0 0 auto;color:#6d5bd0;font-size:1.1rem}
/* detail view */
.pt-back{background:none;border:none;color:#93c5fd;font-size:.82rem;cursor:pointer;padding:4px 0;margin-bottom:12px}
.pt-back:hover{text-decoration:underline}
.pt-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt-field textarea{background:#1a1a30;border:1px solid #3a3a55;border-radius:8px;color:#fff;font-size:.9rem;padding:8px 10px;resize:vertical;font-family:inherit}
.pt-field textarea:focus{outline:none;border-color:#6d5bd0}
.pt-add-channel{background:#2d2d44;border:1px dashed #555;color:#c9b8f5;font-size:.76rem;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer;margin-top:6px}
.pt-add-channel:hover{background:#35354f}
.pt-channel-row{display:flex;gap:8px;margin-bottom:7px}
.pt-channel-row input{background:#1a1a30;border:1px solid #3a3a55;border-radius:8px;color:#fff;font-size:.85rem;padding:7px 9px}
.pt-channel-row input.pt-ch-label{flex:0 0 130px}
.pt-channel-row input.pt-ch-url{flex:1;min-width:0}
.pt-channel-row .pt-ch-del{flex:0 0 auto;background:#2d2d44;border:1px solid #444;color:#ccc;border-radius:7px;cursor:pointer;padding:0 10px;font-size:.8rem}
.pt-channel-row .pt-ch-del:hover{background:#7f1d1d;color:#fca5a5}
.pt-detail-box{background:#1a1a30;border:1px solid #2d2d44;border-radius:10px;padding:13px;margin-top:14px}
.pt-detail-box.pt-dim{opacity:.7}
.pt-box-head{font-size:.82rem;font-weight:800;color:#eee;margin-bottom:9px}
.pt-box-empty{font-size:.78rem;color:#9aa;line-height:1.45}
.pt-detail-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.pt-detail-actions #pd-delete-btn{margin-left:auto}
.pt-acct-line{font-size:.82rem;color:#ddd;line-height:1.6}
.pt-acct-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
@media(max-width:620px){.pt-detail-grid{grid-template-columns:1fr}.pt-channel-row input.pt-ch-label{flex:0 0 92px}}
/* v104 — invite codes + claim banner */
.pt-box-sub{font-weight:400;color:#9aa;font-size:.76rem}
.pt-inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:12px 0}
.pt-inv-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:#141426;border:1px solid #2d2d44;border-radius:9px;padding:10px 12px;margin-bottom:8px}
.pt-inv-left{min-width:0;flex:1}
.pt-inv-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;color:#c9b8f5;font-weight:700;letter-spacing:.03em}
.pt-inv-meta{font-size:.73rem;color:#9aa;margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pt-inv-acts{display:flex;gap:6px;flex:0 0 auto}
.pt-inv-btn{background:#2d2d44;border:1px solid #444;color:#ccc;font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer}
.pt-inv-btn:hover{background:#35354f}
.pt-inv-del:hover{background:#7f1d1d;color:#fca5a5;border-color:#7f1d1d}
.invite-claim-banner{background:#14532d;border:1px solid #1f6a3d;color:#86efac;font-size:.82rem;line-height:1.5;border-radius:10px;padding:11px 13px;text-align:center;width:100%}
@media(max-width:620px){.pt-inv-grid{grid-template-columns:1fr}}
/* v105 — filter row, status line, inline profile grant, hints */
.pt-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pt-filter{background:#1e1e35;border:1px solid #2d2d44;color:#9aa;font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer}
.pt-filter:hover{color:#ccc;border-color:#3a3a55}
.pt-filter-on{background:#26263f;color:#c9b8f5;border-color:#6d5bd0}
.pt-status-line{font-size:.84rem;color:#ddd;margin-bottom:12px}
.pt-status-new{font-size:.8rem;color:#93c5fd}
.pt-hint{font-size:.72rem;color:#7a8899;font-weight:400}
.pt-link-input{flex:1;min-width:0;background:#1a1a30;border:1px solid #3a3a55;border-radius:8px;color:#fff;font-size:.85rem;padding:7px 9px}
.pt-grant-inline{margin-top:12px;padding-top:12px;border-top:1px solid #2d2d44}
.pt-jump-link{color:#93c5fd;text-decoration:underline;cursor:pointer;font-weight:700}
.pt-jump-link:hover{color:#bfdbfe}
.pt-inline-link-btn{padding:4px 10px;font-size:.76rem}
.pt-inv-btn-ok{background:#14532d!important;color:#86efac!important;border-color:#1f6a3d!important;transition:background .1s}

/* ============================================================
   MOBILE / TABLET — STAGE 1 (viewer). Desktop is never affected:
   every rule here lives inside a max-width media query.
   ============================================================ */

/* ---- Tablet: tighten the viewer, keep it usable in portrait ---- */
@media(max-width:1024px){
  .vote-view{max-width:100%;padding:0 4px}
  /* Detail/ballot slots narrow a touch but stay beside the list on tablet. */
  .detail-slot{width:300px;min-width:300px}
  .detail-slot:not(.as-sheet):not(.ballot-sheet)>*{width:300px} /* v98.8 — match the no-reflow child width to the tablet slot */
  #vp-slot.as-sheet>*,#vc-slot.as-sheet>*,#vk-slot.as-sheet>*{width:300px} /* v99.7 — same for the .as-sheet form at tablet width */
}

/* ---- Phone: single column, touch-first ---- */
@media(max-width:640px),(max-height:600px) and (orientation:landscape) and (pointer:coarse){
  body{padding:10px;padding-bottom:90px;overflow-x:hidden}

  /* v99.5 — the v98.8 no-reflow flicker pin (.detail-slot>*{width:320px}) is a
     DESKTOP-only trick for the width-animating side panels. On phone the slot is a
     full-width sheet, so the fixed 320px left-anchored the image/title/param values.
     Reset it to auto here so phone sheet content fills the width and centres. */
  .detail-slot:not(.as-sheet):not(.ballot-sheet)>*{width:auto}
  #vp-slot.as-sheet>*,#vc-slot.as-sheet>*,#vk-slot.as-sheet>*{width:auto} /* v99.7 — reset the desktop .as-sheet pin on phone so sheet content fills width + centres */

  /* Each row stacks: list first, then its slot full-width beneath it. */
  .vote-view{gap:12px}
  .vote-row{flex-direction:column;gap:12px}
  .vote-left{width:100%}

  /* The side slot becomes a full-width block under the list. The desktop
     collapse (width:0) doesn't read on mobile, so we collapse by height. */
  .detail-slot{
    width:100%;min-width:0;position:static;max-height:none;
    top:auto;align-self:stretch;overflow:visible;
  }
  .detail-slot.hidden{
    width:100%;min-width:0;max-height:0;opacity:0;pointer-events:none;
    overflow:hidden;
  }

  /* Ballot: a compact bar pinned to the BOTTOM. Ordering within the column:
       1) the item pool   — stays put while you vote
       2) your ranking    — GROWS DOWNWARD as items land, below the pool, so a
                            growing tier row never shoves the pool under your feet
       3) the ballot slot — sticky at the bottom edge
     This keeps everything you interact with (pool + ballot) still while voting. */
  #vote-personal-row .vote-left{display:flex;flex-direction:column}
  #vote-personal-row #vote-pool-wrap{order:1}
  #vote-personal-row #vote-mytierlist{order:2}
  /* v79.5 — #vc-slot (community detail) gets the same treatment as #vp-slot.
     Shared selector rather than a copied block: duplicated styling is exactly
     why vc-slot was missed when the phone work was done on vp-slot. */
  #vp-slot,#vc-slot,#vk-slot{
    order:3;position:sticky;bottom:0;z-index:40;
    background:#20203c;                       /* distinct, elevated from the page */
    border-top:2px solid #6d5bd0;
    box-shadow:0 -8px 22px rgba(0,0,0,.55);
    /* Full-bleed the bar to the viewport, independent of inherited width:100%
       and any ancestor padding: exactly one viewport wide, centered on it, so
       both edges line up evenly. Avoids the width:100% + negative-margin clash
       that pushed the right edge past the screen. */
    width:100vw;max-width:100vw;
    margin-left:50%;transform:translateX(-50%);
    /* v79.3 — matched to the detail sheet (rounded top, same padding, safe-area
       inset) so the two roles of this slot look like one component. It stays
       STICKY rather than becoming a sheet on purpose: the ballot is what you
       work in, so it must not cover the list you are watching fill up, and
       auto-advance would stutter if it closed and reopened per item. */
    border-radius:16px 16px 0 0;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));box-sizing:border-box;
    max-height:52dvh;overflow-y:auto;
  }
  /* Compact ballot card: small thumbnail + name, tidy buttons. */
  .vote-ballot{padding:6px;border:none;background:transparent}
  .vote-ballot-card{display:flex;flex-direction:column;gap:8px}
  /* v79.3 — was max-width:72px + max-height:72px!important, which forced every
     shape into the same square: a portrait item's aspect-ratio wanted ~108px of
     height and got clipped to 72. Constrain by HEIGHT and let the aspect-ratio
     derive the width, so square, portrait, landscape, round and no-crop each
     keep their proportions (same fix as the viewer detail in v78.3).
     The JS sets the sizes inline on phones, so these are just the guard rails. */
  .vote-ballot-img{max-width:100%;margin:0 auto}
  .vote-ballot-name{font-size:.92rem}

  /* v78.3 — compact the ITEM DETAIL, which shares this slot when no vote is
     running. The cause was .detail-img-wrap being width:100% with a per-shape
     aspect-ratio: on a ~350px-wide phone a portrait item (2/3) computes to over
     500px tall, so the image filled the panel and the name and parameters were
     pushed below the fold — rendered all along, just scrolled past.
     Fixing it by HEIGHT rather than width keeps each shape's crop intact: with
     the aspect-ratio left in place, width follows from height, so square lands at
     100px, portrait ~67px, landscape ~150px, round stays a circle.
     The #vp-slot id prefix is what lets these beat the body.shape-* rules. */
  /* v78.4 — sizing raised from v78.3's 100px, which read as too small once the
     surrounding padding was trimmed. Still constrained by HEIGHT so each shape
     keeps its crop (square 140, portrait ~93 wide, landscape ~210, round circular). */
  #vp-slot .detail-img-wrap,#vc-slot .detail-img-wrap,#vk-slot .detail-img-wrap{width:auto;height:140px;max-width:100%;margin:0 auto 8px} /* v79.5 */
  #vp-slot .detail-img-wrap img,#vc-slot .detail-img-wrap img,#vk-slot .detail-img-wrap img{max-height:140px}
  #vp-slot .detail-img-wrap.tappable{cursor:zoom-in}
  #vp-slot .detail-panel,#vc-slot .detail-panel,#vk-slot .detail-panel{padding:0;border:none;background:transparent}
  #vp-slot .detail-header,#vc-slot .detail-header,#vk-slot .detail-header{padding:0} /* was 14px top — a visible gap above the image */
  /* v109 (#6) — the header (Name label + value) had its 14px left padding zeroed
     above, but .detail-params kept padding:0 14px 14px, so on the phone voter
     sheets the NAME/value sat flush-left while PARAMETERS + the ranking blocks were
     indented 14px. Zero the params' side padding here too so both align to the same
     left edge. Voter side only (#vp/#vc/#vk); desktop keeps its 14px. */
  #vp-slot .detail-params,#vc-slot .detail-params,#vk-slot .detail-params{padding-left:0;padding-right:0}
  #vp-slot .detail-name-label,#vc-slot .detail-name-label,#vk-slot .detail-name-label{font-size:.68rem}
  #vp-slot .vdetail-name-ro,#vc-slot .vdetail-name-ro,#vk-slot .vdetail-name-ro{font-size:.95rem}
  #vp-slot .score-display,#vc-slot .score-display,#vk-slot .score-display{margin-bottom:8px}
  #vp-slot .vd-row,#vc-slot .vd-row,#vk-slot .vd-row{padding:4px 0;font-size:.82rem}
  #vp-slot .detail-params-title,#vc-slot .detail-params-title,#vk-slot .detail-params-title{margin-top:6px}
  #vp-slot .vdetail-panel{padding-bottom:0}

  /* ── v78.4: SHEET MODE ────────────────────────────────────────────────────
     Applied only while the slot shows item detail, never for the ballot.
     • fixed, not sticky: sticky anchors to the bottom of the COLUMN, so scrolling
       past the tier list left the panel stranded above the screen edge. Fixed
       pins it to the viewport, which removes that gap.
     • being fixed also lets the width:100vw + margin-left:50% + translateX(-50%)
       full-bleed hack go: that exists only to escape a padded ancestor, and a
       fixed element already positions against the viewport.
     • dvh, not vh, for the height cap — vh measures the layout viewport on iOS,
       which includes the area behind the browser toolbars. */
  #vp-slot.as-sheet,#vc-slot,#vk-slot{
    position:fixed;left:0;right:0;bottom:0;
    width:auto;max-width:none;margin-left:0;
    transform:translateY(0); /* v99.5 — slides up from below (was transform:none + max-height/opacity animation) */
    transition:transform .28s cubic-bezier(.22,1,.36,1); /* match the creator sheet's slide feel */
    max-height:78dvh;
    border-radius:16px 16px 0 0;
    padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));
    touch-action:pan-y;overscroll-behavior:contain;
  }
  /* The grab handle: hidden by default so the ballot never shows one. */
  .vp-grab{display:none}
  #vp-slot.as-sheet .vp-grab,#vc-slot .vp-grab,#vk-slot .vp-grab{
    display:block;width:33%;min-width:120px;max-width:200px;height:6px;border-radius:3px;background:#5a5a7a; /* v132 — much wider, easier swipe target */
    margin:10px auto 8px;flex:0 0 auto;
    position:sticky;top:0;   /* stays reachable while the content scrolls */
  }
  /* A generous invisible target around the 5px bar, so the swipe is easy to start. */
  #vp-slot.as-sheet .vp-grab::after,#vc-slot .vp-grab::after,#vk-slot .vp-grab::after{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    top:-14px;width:100%;height:40px;   /* v81.2 — wider + taller, and vc-slot now included */
  }
  /* v81.2 — the whole header strip (handle + label) starts the swipe, so you
     don't have to hit the tiny bar. */
  #vc-slot .vote-mylist-label,#vk-slot .vote-mylist-label,#vp-slot.as-sheet #vote-right-label{touch-action:none}
  #vp-slot.as-sheet #vote-right-label,#vc-slot .vote-mylist-label,#vk-slot .vote-mylist-label{text-align:center;margin-bottom:6px}
  /* .detail-slot.hidden (0,2,0) loses to #vp-slot.as-sheet (1,1,0), so a close
     path that doesn't clear the mode first would leave the panel on screen.
     Restate the collapsed state at matching specificity rather than relying on
     every caller getting the order right.
     v96.3 — also collapse on #vp-slot.hidden ALONE (not only .as-sheet.hidden):
     closePersonalDetail() strips .as-sheet on close, so the .as-sheet.hidden
     selector stopped matching and the slot fell back to its base sticky box
     (position:sticky, max-height:52dvh), reserving ~half a screen of in-flow
     space that never collapsed until reload. This is the "big gap after closing
     the your-ranking sheet" bug. #vc-slot/#vk-slot already collapse on .hidden. */
  /* v99.5 — SHEET roles (position:fixed) slide DOWN out of view via translateY,
     no opacity fade — mirroring the open slide. Being fixed, they reserve no
     in-flow space, so no max-height collapse is needed here.
     The BALLOT role (#vp-slot.hidden WITHOUT .as-sheet) is sticky + in-flow, so it
     KEEPS the max-height:0 collapse (the v96.3 "big gap after closing" fix) below. */
  #vp-slot.as-sheet.hidden,#vc-slot.hidden,#vk-slot.hidden{
    transform:translateY(100%);opacity:1;pointer-events:none;overflow:hidden;
    max-height:78dvh; /* v99.5 — keep full height while sliding; overrides the general .detail-slot.hidden max-height:0 that would clip the sheet to nothing mid-slide */
    transition:transform .26s ease; /* animate the slide-down on close */
  }
  #vp-slot.hidden{max-height:0;opacity:0;pointer-events:none;overflow:hidden;padding-top:0;padding-bottom:0}
  .vote-ballot-prompt{font-size:.72rem}
  .vote-tier-btns{gap:7px}
  .vote-tier-btn{min-width:46px;padding:10px 13px;font-size:1rem}
  .vote-confirm-btn{padding:12px;font-size:.95rem}

  /* ── v89: BALLOT SHEET (manual/auto voting) ───────────────────────────────
     The ballot used to be a sticky bottom BAR capped at 52dvh, which left a gap
     below it (you saw the tier list through it), scrolled internally when two
     sliders didn't fit, and had no way to dismiss it. v89 makes it a FIXED,
     non-blocking bottom SHEET instead — same family as the item-detail .as-sheet,
     but its own class so the two roles stay independent:
       • position:fixed at the bottom, sized to CONTENT (no internal scroll until
         the content genuinely exceeds ~82dvh), so two sliders fit and there's no
         dead gap below;
       • NO backdrop and NO body scroll-lock, so the tier list behind stays fully
         scrollable — the voter can still watch it fill up (the original reason the
         ballot wasn't a sheet). #vote-panel gets bottom scroll-padding (below) so
         the list's last rows clear the sheet;
       • grab handle + swipe-down + an explicit ✕ close button (voters asked to be
         able to dismiss it). Auto-advance between items is unchanged. */
  #vp-slot.ballot-sheet{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:auto;max-width:none;margin-left:0;transform:none;
    z-index:45;
    background:#20203c;border-top:2px solid #6d5bd0;
    box-shadow:0 -8px 22px rgba(0,0,0,.55);
    border-radius:16px 16px 0 0;
    padding:0 14px calc(12px + env(safe-area-inset-bottom,0px));box-sizing:border-box;
    /* size to content; only scroll if the content is genuinely taller than this */
    max-height:82dvh;overflow-y:auto;
    touch-action:pan-y;overscroll-behavior:contain;
  }
  /* The grab handle shows in ballot-sheet too (was ballot-only-hidden before). */
  #vp-slot.ballot-sheet .vp-grab{
    display:block;width:44px;height:5px;border-radius:3px;background:#4a4a66;
    margin:10px auto 6px;flex:0 0 auto;position:sticky;top:0;
  }
  #vp-slot.ballot-sheet .vp-grab::after{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    top:-14px;width:100%;height:40px;   /* generous swipe target */
  }
  /* Header strip (handle + "Now voting" label) starts the swipe. */
  #vp-slot.ballot-sheet #vote-right-label{touch-action:none;text-align:center;margin-bottom:6px}
  /* Explicit close button, top-right of the sheet. */
  #vp-slot .ballot-close{display:none}
  #vp-slot.ballot-sheet .ballot-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:8px;right:10px;z-index:2;
    width:32px;height:32px;border-radius:50%;border:1px solid #3a3a55;
    background:#2a2a48;color:#cbd5e1;font-size:1rem;cursor:pointer;
  }
  /* Collapsed state at matching specificity so .hidden still wins. */
  #vp-slot.ballot-sheet.hidden{max-height:0;opacity:0;pointer-events:none;overflow:hidden;padding-top:0;padding-bottom:0}
  /* v96.2 — detail-mode close X for all three detail sheets, mirroring ballot-close.
     Shown on phone: vp-slot only in detail (as-sheet) mode so it never doubles the
     ballot-close; vc-slot and vk-slot whenever open. */
  #vp-slot.as-sheet .detail-close,#vc-slot .detail-close,#vk-slot .detail-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:8px;right:10px;z-index:3;
    width:32px;height:32px;border-radius:50%;border:1px solid #3a3a55;
    background:#2a2a48;color:#cbd5e1;font-size:1rem;cursor:pointer;
  }
  /* While the ballot sheet is open, pad the bottom of the scrolling content so the
     tier list's last rows can scroll up ABOVE the fixed sheet and stay reachable
     (the sheet is ~40-55dvh tall depending on mode; 55dvh is a safe clearance).
     v96 — the padding was on #vote-personal-row, which sits ABOVE the creator and
     community rows, so it injected a big empty gap in the MIDDLE of the list. Move
     it to the bottom of the whole #vote-view container: same clearance for the
     fixed sheet, but it pushes everything up instead of splitting the list. */
  body.ballot-sheet-open #vote-view{padding-bottom:55dvh}
  /* Sliders get a little more room in the sheet (no longer height-starved). */
  #vp-slot.ballot-sheet .vb-sliders{width:100%;margin-bottom:10px}

  /* Parameter sliders: taller track + bigger thumb for fingers. */
  .vb-slider-row input[type=range]{height:26px}

  /* Banner + labels scale down so they don't dominate a small screen. */
  .vote-banner{font-size:.8rem;padding:10px 12px}
  .vote-mylist-label,.vote-pool-label,.vote-results-label{font-size:.64rem}

  /* Pool items and list rows: comfortable tap size. */
  .vote-pool{gap:6px}

  /* Community + creator result lists span full width. */
  .vote-results,.vote-results-tierlist{width:100%}
}

/* ============================================================
   MOBILE / TABLET — STAGE 2 (creator editor). Phone-only; desktop
   and tablet untouched. Everything is inside the media query below.
   ============================================================ */
@media(max-width:640px),(max-height:600px) and (orientation:landscape) and (pointer:coarse){
  /* --- Stack the editor into one column --- */
  .main-layout{padding-left:0;padding-right:0;flex-direction:column;align-items:stretch}
  .editor-row{flex-direction:column;gap:12px;align-items:stretch} /* v98.9 — rows stack on phone */
  .editor-row2-spacer{display:none!important} /* v111 — no reserved rail in the single-column phone layout */
  .editor-rail{flex-direction:column;gap:12px;align-items:stretch;position:static!important} /* v99.0 — rail stacks + not sticky on phone (rail removed in v99.9; kept harmless) */
  .editor-main{gap:12px} /* v99.9 — stacked rows on phone */
  #share-sticky-wrap{position:static!important;max-height:none!important} /* v99.9 — on phone the QR isn't the sticky right column; it moves into the share drawer */
  .creator-community{width:100%;flex:0 1 auto} /* v98.9 — full width in the stacked row */
  .ch2h-wrap{padding-left:0;padding-right:0} /* v83.9 — match main-layout on phone */
  .center-col{flex-direction:column;gap:12px;align-items:stretch}
  .left-col{width:100%;min-width:0}
  /* The desktop sticky sidebar becomes normal flow (its detail panel is replaced
     by the bottom sheet on mobile; the share/voting panel drops full-width). */
  .right-col{
    width:100%!important;min-width:0!important;position:static!important;
    overflow:visible!important;
  }
  .right-col.hidden{width:100%!important;} /* never collapse to 0 on mobile */
  /* Desktop item-detail + community-detail cards are handled by the sheet; hide
     the sidebar detail cards so they don't double up under the list.
     v98.5 — #cc-side moved out of #right-col into .cc-layout, so it's matched
     unscoped now (the old #right-col #cc-side no longer selects it). */
  #right-col #detail-panel,#cc-side{display:none!important}

  /* --- Toolbar / shape / sort bars: wrap + touch sizing --- */
  .toolbar{gap:5px;margin-bottom:8px}
  .toolbar .btn{padding:7px 10px;font-size:.78rem;flex:1 1 auto;min-width:0;white-space:nowrap;
    text-align:center;display:inline-flex;align-items:center;justify-content:center} /* v71 — <label class=btn> needs explicit centring */
  .shape-bar{gap:6px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .shape-btn{padding:9px 13px;font-size:.82rem;white-space:nowrap;flex:0 0 auto}
  .sort-bar{flex-wrap:wrap;gap:8px}

  /* --- Share + voting panel full width, in normal flow (not sticky) --- */
  /* v83.4 — undo the desktop reserved-width/right-align so phone keeps full width. */
  .share-sticky-wrap{width:100%;min-width:0;flex:0 1 auto;align-items:stretch;position:static}
  .share-collapse-tab{display:none}   /* desktop collapse affordance; N/A on mobile */
  .qr-panel,.voting-panel{width:100%;box-sizing:border-box}

  /* --- Community results full width, comfortable --- */
  .creator-community{width:100%}
  .creator-community-head{flex-wrap:wrap;gap:6px}

  /* --- Header: logo left, compact Save + burger right, one clean row --- */
  .site-header{min-height:auto;justify-content:space-between;padding:2px 2px 0}
  .site-header-center{flex:0 1 auto;min-width:0}   /* logo group, left */
  .logo-link{gap:8px}
  .site-title{font-size:1.15rem;line-height:1.05;white-space:nowrap}
  .viewer-title{font-size:1.15rem;line-height:1.05;white-space:nowrap} /* v114 — keep viewer brand in sync with creator on phone */
  .viewer-title .tld{display:none}                 /* v114 — drop ".com" on mobile, like the creator header */
  .site-title .tld{display:none}                   /* drop ".com" on mobile */
  .site-header svg{width:34px;height:auto}
  .menu-hide-mobile{display:none!important}         /* My Lists / Admin / Sign Out -> burger */
  .burger-btn{display:inline-block;padding:7px 10px;font-size:1.1rem}
  /* Controls group: right-aligned, compact, in normal flow (not absolute). */
  .user-menu{position:static;transform:none;flex:0 0 auto;gap:6px}
  .user-menu .user-menu-btn{padding:8px 12px;font-size:.82rem}

  /* --- QR + voting: a prior fix hid the collapse toggle but left the panels
         collapsed with no way to reopen. On mobile, neutralize the collapsed
         hide so each panel's own show/hide logic + natural display win. --- */
  .share-sticky-wrap.collapsed .qr-panel.show{display:flex!important}
  .share-sticky-wrap.collapsed .voting-panel.show{display:block!important}
  /* Full width instead of the desktop 190px sidebar width. */
  .qr-panel,.voting-panel{width:100%;min-width:0;box-sizing:border-box}

  /* --- Sort-by: hidden on mobile (rarely needed on a phone) --- */
  .sort-bar{display:none!important}

  /* --- Image-shape bar: wrap to two rows instead of side-scroll --- */
  .shape-bar{overflow-x:visible;flex-wrap:wrap;justify-content:center}
  .shape-btn{flex:0 0 auto}

  /* --- Tier rows: no per-row controls on mobile; item area fills the row --- */
  .tier-controls{display:none!important}
  .tier-items{flex:1 1 auto;min-width:0}
  .tier-label-wrap{width:64px;min-width:64px}

  /* v68 — Sharing & Voting drawer trigger shown; the in-flow share/voting
     wrap is hidden on phone because it now opens inside the drawer. Community
     results stay in page flow (separate node in left-col). */
  .share-drawer-btn{display:inline-block;flex:1 1 auto;white-space:nowrap}
  .share-sticky-wrap:not(.in-drawer){display:none!important}

  /* v69 — toolbar declutter: hide the secondary toolbar buttons on phone (they
     move into the burger), and reveal their burger counterparts. */
  .tb-hide-mobile{display:none!important}
  .burger-tb-only{display:block}

  /* v69 — shape buttons icon-only on phone: hide the word labels, keep glyphs.
     The "Image Shape:" caption stays (Kai's call). Tighter padding so the row
     fits comfortably. */
  .shape-btn .shape-label{display:none}
  /* v70 — ~30% smaller than v69 (was 9px/12px, 1rem, 44px). */
  /* v71 — fixed uniform square so differing glyph metrics cannot change
     button size (⬜ is emoji-presentation; ■ ▬ ▮ ● are not). */
  .shape-btn{padding:0;font-size:.8rem;width:34px;min-width:34px;height:34px;
    display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}

  /* v69 — delete-tier button shown on phone (row-level ✕ is hidden here). */
  .popup-delete-row{display:block}

  /* v72 — Stage 3 shared-chrome polish (all phone-only).
     Modals: reclaim the frame. Desktop keeps 16px overlay / 22px modal padding. */
  .modal-overlay{padding:10px}
  .modal{padding:16px;max-height:85dvh}
  /* dvh tracks the visible viewport, so a modal with a text input is no longer
     hidden behind the on-screen keyboard the way 85vh allowed. */

  /* My Lists is a right-anchored desktop dropdown (fixed 300px, 60px top offset)
     positioned under the header button. On phone it opens from the burger, so
     centre it and let it use the full width. */
  .my-lists-overlay{align-items:flex-start;justify-content:center;padding:16px 10px}
  .my-lists-panel{width:100%;max-width:none;max-height:85dvh;padding:14px}

  /* Admin panel: trim the heavy nested padding and let the action rows wrap. */
  .admin-overlay{padding:14px 10px}
  .admin-panel{padding:14px}
  .admin-refresh-row{flex-wrap:wrap;gap:8px}

  /* (6) The pool's ✕ is unreachable on touch: tapping the item to reveal it also
     opens the bottom sheet, which covers it. Pool deletion now lives in the sheet
     (trash button). Tier items KEEP their ✕ — that one returns an item to the
     pool, which is still wanted. */
  #item-pool .item-action-btn{display:none!important}

  /* v70 — the S/M/L QR size buttons are inert on phone: .qr-panel is forced to
     width:100% here, which overrides the .qr-md/.qr-lg width classes they set.
     Hide them rather than leave dead controls on screen. Desktop keeps them. */
  .qr-size-seg{display:none!important}

  /* v73 — the full subtitle wraps to two lines on a phone; swap in a shorter
     one. Two spans rather than JS so the desktop text is untouched. */
  .subtitle-full{display:none}
  .subtitle-short{display:inline}
}

/* v76 — phone LANDSCAPE only. 82dvh of a ~400px-tall screen leaves roughly
   330px for the whole sheet, which the portrait sizing overflows. Scoped by
   height + pointer so tablets and desktops are untouched. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .item-sheet{max-height:90dvh;padding-left:12px;padding-right:12px}
  .item-sheet-head{flex-direction:row;gap:10px;text-align:left;padding:2px 0 8px}
  .item-sheet-head .item-sheet-img{height:46px;margin:0}
  .item-sheet-head .item-sheet-title{width:auto;font-size:.92rem}
  .item-sheet-grab{margin:6px auto 4px}
  #item-sheet .item-sheet-tier-btn{padding:7px 10px;font-size:.82rem}
  #item-sheet .item-sheet-confirm-btn{margin-top:8px;padding:9px;font-size:.85rem}
  #item-sheet .param-slider{height:16px}
  .item-sheet-hint{font-size:.68rem;margin-bottom:4px}
}

/* Bottom sheet — only ever shown via JS on phones (openItemSheet checks width).
   Hidden by default everywhere, so desktop is unaffected regardless of width. */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10070;
  display:none;opacity:0;transition:opacity .25s ease;
}
.sheet-backdrop.show{display:block;opacity:1}
.item-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:10071;
  background:#1b1b33;border-top:2px solid #6d5bd0;
  border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.6);
  transform:translateY(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  /* v76 — dvh, not vh: on iOS Safari vh measures the layout viewport, which
     includes the area behind the toolbars, so the sheet stopped short of the
     visible bottom and the page showed through beneath it. Modals moved to dvh
     in v72; the sheet was missed. The safe-area inset clears the home indicator. */
  max-height:82dvh;overflow-y:auto;
  padding:0 16px calc(20px + env(safe-area-inset-bottom,0px));
  display:none;
  /* The scroll lock puts touch-action:none on <body>; without re-allowing
     vertical panning here the sheet could not scroll its own content. */
  touch-action:pan-y;
overscroll-behavior:contain}
.item-sheet.show{display:block;transform:translateY(0)}
.item-sheet-grab{width:33%;min-width:120px;max-width:200px;height:6px;border-radius:3px;background:#5a5a7a;margin:10px auto 6px}
.item-sheet-head{display:flex;align-items:center;gap:12px;padding:4px 0 12px;position:relative}
.item-sheet-img{height:83px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden} /* v72 — +30% (was 64px) */
.item-sheet-img.tappable{cursor:zoom-in}
.item-sheet-img img{display:block;height:100%;width:auto}
.item-sheet-img img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.item-sheet-title{font-size:1rem;font-weight:800;color:#eee;flex:1;min-width:0;word-break:break-word}
.item-sheet-close{background:#2d2d44;border:none;color:#ccc;width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;flex:0 0 auto}
.item-sheet-hint{font-size:.72rem;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.item-sheet-tier-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.item-sheet-tier-btn{min-width:52px;padding:14px 16px;border:none;border-radius:10px;font-size:1.05rem;font-weight:800;color:#fff;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.4);flex:1 1 auto}
.item-sheet-body{padding-bottom:4px}
/* v68 — bottom-sheet head centering when there is no name (phone-only sheet).
   Toggled by JS adding .noname to the head. Sheet is display:none-default so
   this never affects desktop. */
/* v69 — sheet head is a centered column: image centered, name below it. The
   close button is absolutely positioned so it doesn't offset the centering.
   Sheet is display:none-default (phone-only), so desktop is unaffected. */
.item-sheet-head{flex-direction:column;justify-content:center;gap:8px;text-align:center}
.item-sheet-head .item-sheet-img{margin:0 auto}
.item-sheet-head .item-sheet-title{flex:0 0 auto;width:100%}
.item-sheet-head .item-sheet-close{position:absolute;top:0;right:0}
/* v72 — trash sits top-left, balancing the close button top-right. Inside the
   display:none-default sheet, so it is inert on desktop. */
.item-sheet-trash{position:absolute;top:0;left:0;background:#3a1f24;border:1px solid #a33;
  color:#f4a6a6;width:26px;height:26px;border-radius:50%;font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.item-sheet-trash:active{background:#4a2429}
.item-sheet-head.noname .item-sheet-title{display:none}

/* v68 — Sharing & Voting drawer. display:none-default => desktop-inert.
   Only ever opened by openShareDrawer(), which is phone-gated (isPhone()). */
.share-drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10072;
  display:none;opacity:0;transition:opacity .25s ease;
}
.share-drawer-backdrop.show{display:block;opacity:1}
.share-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:10073;
  width:min(88vw,360px);max-width:360px;
  background:#17172e;border-left:2px solid #6d5bd0;
  box-shadow:-10px 0 30px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  display:none;flex-direction:column;overflow-y:auto;
  padding:0 14px 20px;
  /* v70 — stop scroll chaining: without this, hitting the drawer's scroll top
     or bottom hands the gesture to the page behind it. */
  overscroll-behavior:contain;
}
.share-drawer.show{display:flex;transform:translateX(0)}
.share-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:#17172e;padding:14px 0 12px;z-index:1;
  border-bottom:1px solid #2d2d44;margin-bottom:12px;
}
.share-drawer-title{font-size:1rem;font-weight:800;color:#eee}
.share-drawer-close{background:#2d2d44;border:none;color:#ccc;width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;flex:0 0 auto}
/* Inside the drawer the panels are always full-width and statically stacked. */
.share-drawer .share-sticky-wrap{position:static;width:100%}
.share-drawer .qr-panel,.share-drawer .voting-panel{width:100%;min-width:0;box-sizing:border-box}
.share-drawer .share-collapse-tab{display:none}
/* The toolbar trigger button is phone-only; default-hide lives with the
   desktop share rules ABOVE the media queries so the phone rule wins. */
#item-sheet-params{margin-top:16px}
</style>
</head>
<body class="shape-square">

<!-- GLOBAL BOOT/LOADING GATE — covers the screen until the correct view is ready,
     preventing the reload flicker across every screen (editor/viewer/voting). -->
<div id="app-boot-gate">
  <div class="boot-spinner"></div>
  <div class="boot-text">Loading…</div>
</div>

<!-- AUTH SCREEN -->
<div id="auth-screen">
  <div class="auth-box">
    <div class="invite-claim-banner" id="invite-claim-banner" style="display:none"></div>
    <div class="auth-logo">
      <svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" width="46" height="40">
        <g transform="translate(4 4)">
          <defs><linearGradient id="tlfg-auth" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a855f7"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs>
          <g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="url(#tlfg-auth)"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="url(#tlfg-auth)"/></g>
          <g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g>
          <path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="url(#tlfg-auth)"/>
          <path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="url(#tlfg-auth)"/>
          <rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/>
          <rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/>
          <rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/>
        </g>
      </svg>
      <span class="auth-title">Tier List Forge<span class="tld">.com</span></span>
    </div>

    <div id="code-input-section">
      <div class="code-input-title">🔍 View a Tier List</div>
      <div class="code-input-row">
        <input class="code-input-field" id="auth-code-input" type="text" inputmode="numeric" maxlength="5" placeholder="00000" autocomplete="off" name="tlf-view-code" oninput="this.value=this.value.replace(/\D/g,'')" onkeydown="if(event.key==='Enter')viewByCode()">
        <button class="code-input-btn" onclick="viewByCode()">View</button>
      </div>
      <div class="code-input-error" id="auth-code-error">Code not found. Please check and try again.</div>
    </div>

    <div class="auth-divider">or sign in to create</div>

    <div class="auth-tabs">
      <button class="auth-tab active" id="tab-login" onclick="switchTab('login')">Sign In</button>
      <button class="auth-tab" id="tab-signup" onclick="switchTab('signup')">Sign Up</button>
    </div>
    <input class="auth-input" id="auth-email" type="email" placeholder="Email address" autocomplete="email" onkeydown="if(event.key==='Enter')handleAuth()">
    <input class="auth-input" id="auth-password" type="password" placeholder="Password" autocomplete="current-password" onkeydown="if(event.key==='Enter')handleAuth()">
    <!-- v116 — forgot password (email accounts): sends a Supabase reset email. -->
    <button class="auth-back-link" id="auth-forgot-link" onclick="sendPasswordReset()" style="margin-top:0;font-size:.8rem">Forgot password?</button>
    <button class="auth-btn" id="auth-submit-btn" onclick="handleAuth()">Sign In</button>
    <div class="auth-divider">or</div>
    <button class="auth-google-btn" id="auth-google-btn" onclick="handleGoogleAuth()">
      <svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18z"/><path fill="#34A853" d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 0 1-7.18-2.54H1.83v2.07A8 8 0 0 0 8.98 17z"/><path fill="#FBBC05" d="M4.5 10.52a4.8 4.8 0 0 1 0-3.04V5.41H1.83a8 8 0 0 0 0 7.18l2.67-2.07z"/><path fill="#EA4335" d="M8.98 4.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 5.4L4.5 7.49a4.77 4.77 0 0 1 4.48-3.3z"/></svg>
      Continue with Google
    </button>
    <button class="auth-oauth-btn auth-discord-btn" id="auth-discord-btn" onclick="handleDiscordAuth()">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.3.5a15 15 0 0 1 4.2 2 13.4 13.4 0 0 0-11.5 0 15 15 0 0 1 4.2-2L11.7 3A19.8 19.8 0 0 0 6.8 4.4 20.3 20.3 0 0 0 3.3 18a19.9 19.9 0 0 0 6 3l.8-1.3c-.7-.3-1.4-.6-2-1l.5-.4a14.2 14.2 0 0 0 12 0l.5.4c-.6.4-1.3.7-2 1l.8 1.3a19.9 19.9 0 0 0 6-3 20.3 20.3 0 0 0-3.5-13.6zM9 15c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2zm6 0c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2z"/></svg>
      Continue with Discord
    </button>
    <button class="auth-oauth-btn auth-twitch-btn" id="auth-twitch-btn" onclick="handleTwitchAuth()">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M4 2 2.5 6v14h5v3h3l3-3h4l5-5V2H4zm16 11-3 3h-5l-3 3v-3H6V4h14v9zM15 7h-2v5h2V7zm-5 0H8v5h2V7z"/></svg>
      Continue with Twitch
    </button>
    <div class="auth-error" id="auth-error"></div>
    <div class="auth-success" id="auth-success"></div>
    <button class="auth-back-link" id="auth-back-editor" onclick="anonBackToEditor()" style="display:none">← Back to trying it out</button>
  </div>
</div>

<!-- VIEWER SCREEN -->
<div id="viewer-screen">
  <!-- v137 — shown only during a creator "Test vote"; returns to the editor. -->
  <button class="viewer-testexit-btn" id="viewer-testexit-btn" onclick="exitTestVote()">← Back to editor</button>
  <div class="viewer-header">
    <a class="logo-link" href="https://tierlistforge.vercel.app" title="Go to Tier List Forge home">
    <svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" width="50" height="44">
      <g transform="translate(4 4)">
        <defs><linearGradient id="tlfg-viewer" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a855f7"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs>
        <g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="url(#tlfg-viewer)"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="url(#tlfg-viewer)"/></g>
        <g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g>
        <path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="url(#tlfg-viewer)"/>
        <path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="url(#tlfg-viewer)"/>
        <rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/>
        <rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/>
        <rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/>
      </g>
    </svg>
    <span class="viewer-title">Tier List Forge<span class="tld">.com</span></span>
    </a>
  </div>
  <div class="viewer-list-title" id="viewer-list-title">Loading...</div>
  <div class="viewer-updated-toast" id="viewer-updated-toast">🔄 List updated</div>
  <div class="viewer-code-badge" id="viewer-code-badge">
    <div>
      <div class="viewer-code-label">Tier List Code</div>
      <div class="viewer-code-num" id="viewer-code-num">—</div>
    </div>
  </div>
  <div class="viewer-tierlist" id="viewer-tierlist"></div>

  <!-- VOTING VIEW (unified, editor-mirrored layout) -->
  <div class="vote-view" id="vote-view">
    <div class="vote-banner" id="vote-banner">🗳️ Community voting is live — place each item where you think it belongs!</div>

    <!-- HEAD-TO-HEAD: shown instead of the personal row for an Elo session. -->
    <div class="h2h-view" id="h2h-view" style="display:none">
      <div class="h2h-head">
        <div class="h2h-prompt" id="h2h-prompt">Which one is better?</div>
        <div class="h2h-progress" id="h2h-progress"></div>
      </div>
      <!-- v81 — stage holds the two side detail drawers + the pair between them.
           On phones the drawers are empty (display:none via JS) and detail
           collapses below each card instead. -->
      <div class="h2h-stage" id="h2h-stage">
        <div class="h2h-drawer" id="h2h-drawer-left" style="display:none"></div>
        <div class="h2h-pair" id="h2h-pair"></div>
        <div class="h2h-drawer" id="h2h-drawer-right" style="display:none"></div>
      </div>
      <div class="h2h-skip-wrap" id="h2h-skip-wrap">
        <button class="h2h-skip" id="h2h-skip" onclick="h2hSkip()">Can't decide — show another pair</button>
      </div>
      <div class="h2h-done" id="h2h-done" style="display:none">
        <div class="h2h-done-title">✅ All done — thanks for voting!</div>
        <div class="h2h-done-sub" id="h2h-done-sub"></div>
        <button class="btn btn-secondary" onclick="h2hKeepGoing()">Keep voting anyway</button>
      </div>
    </div>

    <!-- PERSONAL ROW: your ranking + its detail/ballot slot -->
    <div class="vote-row" id="vote-personal-row">
      <div class="vote-left">
        <div class="vote-mylist-label" id="vote-mylist-label">Your ranking</div>
        <div class="vote-mytierlist" id="vote-mytierlist"></div>
        <div class="vote-pool-wrap" id="vote-pool-wrap">
          <div class="vote-pool-label" id="vote-pool-label">Tap an item to rank it — or drag it into a tier</div>
          <div class="vote-pool" id="vote-pool"></div>
        </div>
      </div>
      <!-- Personal slot: holds the ballot (live voting) and/or the detail panel -->
      <div class="detail-slot hidden" id="vp-slot">
        <!-- v78.4 — drag handle, shown only in .as-sheet (item detail) mode. -->
        <div class="vp-grab" id="vp-grab"></div>
        <!-- v89 — close button, shown only in .ballot-sheet mode (manual/auto ballot). -->
        <button class="ballot-close" id="ballot-close" onclick="dismissBallotSheet()" aria-label="Close ballot">✕</button>
        <!-- v96.2 — detail-mode close X (the ballot-close above only shows in ballot mode). -->
        <button class="detail-close" id="vp-close" onclick="closePersonalDetail()" aria-label="Close">✕</button>
        <div class="vote-mylist-label" id="vote-right-label">Now voting</div>
        <div class="vote-ballot" id="vote-ballot">
          <div class="vote-ballot-empty" id="vote-ballot-empty" style="display:none">
            🎉 You've ranked every item! Tap any item in your list to change its tier.
          </div>
          <div class="vote-ballot-card" id="vote-ballot-card">
            <div class="vote-ballot-img" id="vote-ballot-img"></div>
            <div class="vote-ballot-name" id="vote-ballot-name">—</div>
            <!-- v92 — live score readout for AUTO-RANK voting; hidden otherwise. -->
            <div class="vb-score" id="vb-score" style="display:none">
              <div class="vb-score-main" id="vb-score-main">0 / 0 pts</div>
              <div class="vb-score-pct" id="vb-score-pct">0% of maximum score</div>
              <div class="vb-score-bar"><div class="vb-score-fill" id="vb-score-fill"></div></div>
            </div>
            <div class="vote-ballot-prompt">Tap a tier to vote</div>
            <div class="vote-tier-btns" id="vote-tier-btns"></div>
          </div>
        </div>
        <div class="vote-progress" id="vote-progress"></div>
        <!-- Personal detail panel (static/closed viewer inspection of own list) -->
        <div class="detail-panel vdetail-panel" id="vdetail" style="display:none">
          <div class="detail-header">
            <div class="detail-img-wrap" id="vdetail-img"></div>
            <div class="detail-name-wrap" id="vdetail-name-wrap">
              <div class="detail-name-label">Name</div>
              <div class="vdetail-name-ro" id="vdetail-name">—</div>
            </div>
          </div>
          <div class="score-display" id="vdetail-score-display">
            <div class="score-main" id="vdetail-score-main">0 / 0</div>
            <div class="score-pct" id="vdetail-score-pct">0%</div>
            <div class="score-bar-row" id="vdetail-score-bar-row">
              <span class="score-bar-label" id="vdetail-score-bar-label"></span>
              <div class="score-bar-wrap"><div class="score-bar-fill" id="vdetail-score-fill" style="width:0%"></div></div>
              <span class="score-bar-val" id="vdetail-score-bar-val"></span>
            </div>
          </div>
          <div class="detail-params" id="vdetail-params-section" style="display:none">
            <div class="detail-params-title">Parameters</div>
            <div id="vdetail-params"></div>
          </div>
          <div class="detail-params" id="vdetail-votes-section" style="display:none">
            <div class="detail-params-title" id="vdetail-votes-title">Community votes</div>
            <div id="vdetail-breakdown"></div>
            <div class="detail-params-title" id="vdetail-placement-title" style="margin-top:10px;display:none">Placement</div>
            <div id="vdetail-placement"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- CREATOR ROW: the creator's authored ranking + its own detail slot -->
    <div class="vote-row" id="vote-creator-row" style="display:none">
      <div class="vote-results">
        <div class="vote-results-label" id="vote-creator-label">Creator's ranking</div>
        <div class="vote-results-tierlist" id="vote-creator-tierlist"></div>
      </div>
      <div class="detail-slot hidden" id="vk-slot">
        <!-- v96.2 — phone drag handle + close X, mirroring #vc-slot (this slot was
             missed in the v79.5 bottom-sheet work and never got either). -->
        <div class="vp-grab" id="vk-grab"></div>
        <button class="detail-close" id="vk-close" onclick="closeCreatorDetail()" aria-label="Close">✕</button>
        <div class="vote-mylist-label">Item details</div>
        <div class="detail-panel vdetail-panel" id="kdetail" style="display:none">
          <div class="detail-header">
            <div class="detail-img-wrap" id="kdetail-img"></div>
            <div class="detail-name-wrap" id="kdetail-name-wrap">
              <div class="detail-name-label">Name</div>
              <div class="vdetail-name-ro" id="kdetail-name">—</div>
            </div>
          </div>
          <div class="score-display" id="kdetail-score-display">
            <div class="score-main" id="kdetail-score-main">0 / 0</div>
            <div class="score-pct" id="kdetail-score-pct">0%</div>
            <div class="score-bar-row" id="kdetail-score-bar-row">
              <span class="score-bar-label" id="kdetail-score-bar-label"></span>
              <div class="score-bar-wrap"><div class="score-bar-fill" id="kdetail-score-fill" style="width:0%"></div></div>
              <span class="score-bar-val" id="kdetail-score-bar-val"></span>
            </div>
          </div>
          <div class="detail-params" id="kdetail-params-section" style="display:none">
            <div class="detail-params-title">Parameters</div>
            <div id="kdetail-params"></div>
          </div>
          <div class="detail-params" id="kdetail-votes-section" style="display:none">
            <div class="detail-params-title" id="kdetail-votes-title">Community votes</div>
            <div id="kdetail-breakdown"></div>
            <div class="detail-params-title" id="kdetail-placement-title" style="margin-top:10px;display:none">Placement</div>
            <div id="kdetail-placement"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- COMMUNITY ROW: community results + its own detail slot -->
    <div class="vote-row" id="vote-community-row">
      <div class="vote-results" id="vote-results">
        <div class="vote-results-label" id="vote-results-label">Community results so far</div>
        <div class="vote-results-tierlist" id="vote-results-tierlist"></div>
        <div class="vote-results-hidden" id="vote-results-hidden" style="display:none">
          🙈 Results are hidden until the host reveals them.
        </div>
      </div>
      <!-- Community detail slot: aligns with the community list -->
      <div class="detail-slot hidden" id="vc-slot">
        <!-- v79.5 — phone drag handle, mirroring #vp-grab. -->
        <div class="vp-grab" id="vc-grab"></div>
        <!-- v96.2 — close X, mirroring the ballot's. -->
        <button class="detail-close" id="vc-close" onclick="closeCommunityDetail()" aria-label="Close">✕</button>
        <div class="vote-mylist-label">Item details</div>
        <div class="detail-panel vdetail-panel" id="cdetail" style="display:none">
          <div class="detail-header">
            <div class="detail-img-wrap" id="cdetail-img"></div>
            <div class="detail-name-wrap" id="cdetail-name-wrap">
              <div class="detail-name-label">Name</div>
              <div class="vdetail-name-ro" id="cdetail-name">—</div>
            </div>
          </div>
          <div class="score-display" id="cdetail-score-display">
            <div class="score-main" id="cdetail-score-main">0 / 0</div>
            <div class="score-pct" id="cdetail-score-pct">0%</div>
            <div class="score-bar-row" id="cdetail-score-bar-row">
              <span class="score-bar-label" id="cdetail-score-bar-label"></span>
              <div class="score-bar-wrap"><div class="score-bar-fill" id="cdetail-score-fill" style="width:0%"></div></div>
              <span class="score-bar-val" id="cdetail-score-bar-val"></span>
            </div>
          </div>
          <div class="detail-params" id="cdetail-params-section" style="display:none">
            <div class="detail-params-title">Parameters</div>
            <div id="cdetail-params"></div>
          </div>
          <div class="detail-params" id="cdetail-votes-section" style="display:none">
            <div class="detail-params-title" id="cdetail-votes-title">Community votes</div>
            <div id="cdetail-breakdown"></div>
            <div class="detail-params-title" id="cdetail-placement-title" style="margin-top:10px;display:none">Placement</div>
            <div id="cdetail-placement"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="viewer-back-btn" id="viewer-back-btn" onclick="backToHome()">← Back to Home</button>

  <footer class="viewer-footer">
    <button class="viewer-footer-link" onclick="openReportModal()">🚩 Report this list</button>
    <span class="viewer-footer-sep">·</span>
    <span class="viewer-footer-muted">© 2026 Tier List Forge · Terms &amp; Impressum coming soon</span>
    <span class="footer-berlin">· From Berlin with <span class="footer-heart">♥</span></span>
  </footer>
</div>

<!-- VIEWER ITEM DETAIL MODAL -->
<div class="modal-overlay" id="viewer-item-modal" style="z-index:10000" onclick="if(event.target===this)closeViewerItemDetail()">
  <div class="vid-inner">
    <div class="vid-img-wrap" id="vid-img-wrap"></div>
    <div class="vid-name" id="vid-name">Item</div>
    <div class="vid-score" id="vid-score">
      <div class="vid-score-main" id="vid-score-main">0 / 0 pts</div>
      <div class="vid-score-pct" id="vid-score-pct">0%</div>
      <div class="vid-score-bar"><div class="vid-score-fill" id="vid-score-fill"></div></div>
    </div>
    <div class="vid-params-title">Parameters</div>
    <div id="vid-params"></div>
    <div class="vid-breakdown" id="vid-breakdown" style="display:none">
      <div class="vid-params-title">Community votes</div>
      <div id="vid-breakdown-rows"></div>
    </div>
    <button class="btn btn-secondary vid-close" onclick="closeViewerItemDetail()">Close</button>
  </div>
</div>

<!-- REPORT MODAL -->
<!-- Mobile creator bottom sheet: item details + (manual) tier buttons. -->
<div class="sheet-backdrop" id="item-sheet-backdrop" onclick="closeItemSheet()"></div>
<div class="item-sheet" id="item-sheet" aria-hidden="true">
  <div class="item-sheet-grab" id="item-sheet-grab"></div>
  <div class="item-sheet-head">
    <div class="item-sheet-img" id="item-sheet-img"></div>
    <div class="item-sheet-title" id="item-sheet-title">—</div>
    <button class="item-sheet-trash" id="item-sheet-trash" onclick="deleteFromSheet()" aria-label="Delete item">🗑</button>
    <button class="item-sheet-close" onclick="closeItemSheet()" aria-label="Close">✕</button>
  </div>
  <div class="item-sheet-tiers" id="item-sheet-tiers" style="display:none">
    <div class="item-sheet-hint">Tap a tier to place this item</div>
    <div class="item-sheet-tier-btns" id="item-sheet-tier-btns"></div>
  </div>
  <div class="item-sheet-body" id="item-sheet-body"></div>
</div>

<div class="modal-overlay" id="ballot-img-modal" style="z-index:10080" onclick="closeBallotImg()">
  <div class="ballot-img-big" id="ballot-img-big"></div>
</div>
<div class="modal-overlay" id="tlf-confirm-modal" style="z-index:10090">
  <div class="modal tlf-confirm-box">
    <div class="tlf-confirm-title" id="tlf-confirm-title">Are you sure?</div>
    <div class="tlf-confirm-msg" id="tlf-confirm-msg"></div>
    <div class="tlf-confirm-actions">
      <button class="btn btn-secondary" id="tlf-confirm-cancel">Cancel</button>
      <button class="btn btn-primary" id="tlf-confirm-ok">Confirm</button>
    </div>
  </div>
</div>
<!-- v98.0 stage 2 — in-place account popup for anonymous users. Opens on Save /
     Start-voting / Elo while anonymous. On success the anon list is carried over
     and auto-saved (server-judged). Sits above everything (z above confirm). -->
<div class="modal-overlay" id="anon-auth-modal" style="z-index:10095" onclick="if(event.target===this)closeAnonAuth()">
  <div class="modal anon-auth-box">
    <button class="anon-auth-close" onclick="closeAnonAuth()" aria-label="Close">✕</button>
    <div class="anon-auth-head" id="anon-auth-head">Create a free account to save</div>
    <div class="anon-auth-sub" id="anon-auth-sub">Your list stays exactly as it is — signing up keeps it for you.</div>
    <div class="auth-tabs">
      <button class="auth-tab" id="anon-tab-login" onclick="anonAuthTab('login')">Sign In</button>
      <button class="auth-tab active" id="anon-tab-signup" onclick="anonAuthTab('signup')">Sign Up</button>
    </div>
    <input class="auth-input" id="anon-auth-email" type="email" placeholder="Email address" autocomplete="email" onkeydown="if(event.key==='Enter')anonHandleAuth()">
    <input class="auth-input" id="anon-auth-password" type="password" placeholder="Password" autocomplete="current-password" onkeydown="if(event.key==='Enter')anonHandleAuth()">
    <button class="auth-btn" id="anon-auth-submit" onclick="anonHandleAuth()">Sign Up</button>
    <div class="auth-divider">or</div>
    <button class="auth-google-btn" id="anon-google-btn" onclick="anonSocial('google')">
      <svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18z"/><path fill="#34A853" d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 0 1-7.18-2.54H1.83v2.07A8 8 0 0 0 8.98 17z"/><path fill="#FBBC05" d="M4.5 10.52a4.8 4.8 0 0 1 0-3.04V5.41H1.83a8 8 0 0 0 0 7.18l2.67-2.07z"/><path fill="#EA4335" d="M8.98 4.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 5.4L4.5 7.49a4.77 4.77 0 0 1 4.48-3.3z"/></svg>
      Continue with Google
    </button>
    <button class="auth-oauth-btn auth-discord-btn" id="anon-discord-btn" onclick="anonSocial('discord')">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.3.5a15 15 0 0 1 4.2 2 13.4 13.4 0 0 0-11.5 0 15 15 0 0 1 4.2-2L11.7 3A19.8 19.8 0 0 0 6.8 4.4 20.3 20.3 0 0 0 3.3 18a19.9 19.9 0 0 0 6 3l.8-1.3c-.7-.3-1.4-.6-2-1l.5-.4a14.2 14.2 0 0 0 12 0l.5.4c-.6.4-1.3.7-2 1l.8 1.3a19.9 19.9 0 0 0 6-3 20.3 20.3 0 0 0-3.5-13.6zM9 15c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2zm6 0c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2z"/></svg>
      Continue with Discord
    </button>
    <button class="auth-oauth-btn auth-twitch-btn" id="anon-twitch-btn" onclick="anonSocial('twitch')">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M4 2 2.5 6v14h5v3h3l3-3h4l5-5V2H4zm16 11-3 3h-5l-3 3v-3H6V4h14v9zM15 7h-2v5h2V7zm-5 0H8v5h2V7z"/></svg>
      Continue with Twitch
    </button>
    <div class="auth-error" id="anon-auth-error"></div>
    <div class="auth-success" id="anon-auth-success"></div>
  </div>
</div>
<div class="modal-overlay" id="report-modal" style="z-index:10000">
  <div class="text-modal-inner">
    <h3>🚩 Report this tier list</h3>
    <p class="report-intro">Tell us what's wrong with this content. Reports are reviewed by our team.</p>
    <label class="report-label">Reason</label>
    <select id="report-reason" class="report-select">
      <option value="illegal">Illegal content</option>
      <option value="harassment">Harassment or abuse</option>
      <option value="spam">Spam</option>
      <option value="copyright">Copyright infringement</option>
      <option value="other">Other</option>
    </select>
    <label class="report-label">Details (optional)</label>
    <textarea id="report-note" class="report-note" maxlength="500" placeholder="Add any details that help us review..."></textarea>
    <div class="modal-btns">
      <button class="btn btn-secondary" onclick="closeReportModal()">Cancel</button>
      <button class="btn btn-danger" id="report-submit-btn" onclick="submitReport()">Submit Report</button>
    </div>
  </div>
</div>

<!-- v101.1 (Subscriptions Phase 3b) — 2FA CHALLENGE SCREEN (layer 1).
     Shown after login / on reload when the session has a verified factor but is
     still at AAL1 (hasn't entered a code this session). Blocks the whole app
     until a valid code lifts the session to AAL2, or the user signs out. -->
<div id="mfa-screen">
  <div class="auth-box">
    <div class="auth-logo">
      <div class="auth-title">🔐 Verify it's you</div>
    </div>
    <div class="auth-subtitle">Enter the 6-digit code from your authenticator app to finish signing in.</div>
    <input class="sec-code-input" id="mfa-code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" onkeydown="if(event.key==='Enter')mfaSubmit()">
    <div class="mfa-err" id="mfa-err"></div>
    <div class="mfa-actions">
      <button class="btn btn-primary" id="mfa-verify-btn" style="width:170px" onclick="mfaSubmit()">Verify</button>
      <button class="mfa-signout" onclick="mfaSignOut()">Sign out instead</button>
    </div>
  </div>
</div>

<!-- v116 — PASSWORD RESET screen. Shown when the user arrives via the reset link
     from the forgot-password email (Supabase puts the session in a recovery state).
     They set a new password here, then continue into the app. Reuses #mfa-screen styling. -->
<div id="reset-screen">
  <div class="auth-box">
    <div class="auth-logo">
      <div class="auth-title">🔑 Set a new password</div>
    </div>
    <div class="auth-subtitle">Choose a new password for your account.</div>
    <input class="auth-input" id="reset-pw" type="password" autocomplete="new-password" placeholder="New password (min 6 chars)">
    <input class="auth-input" id="reset-pw2" type="password" autocomplete="new-password" placeholder="Confirm new password" onkeydown="if(event.key==='Enter')submitPasswordReset()">
    <div class="mfa-err" id="reset-err"></div>
    <div class="mfa-actions">
      <button class="btn btn-primary" id="reset-submit-btn" style="width:200px" onclick="submitPasswordReset()">Save new password</button>
    </div>
  </div>
</div>

<!-- v154 — MAINTENANCE / UNAVAILABLE page (above everything) + owner's reminder bar -->
<div id="maint-screen">
  <div class="maint-box">
    <svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" width="72" height="63"><g transform="translate(4 4)"><g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="#a855f7"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="#a855f7"/></g><g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g><path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="#8b5cf6"/><path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="#8b5cf6"/><rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/><rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/><rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/></g></svg>
    <div class="maint-brand">Tier List Forge</div>
    <h2 class="maint-title" id="maint-title">We'll be right back</h2>
    <p class="maint-msg" id="maint-msg"></p>
    <div class="maint-actions" id="maint-actions">
      <button class="maint-link" id="maint-signin" onclick="tlfMaintStaffSignIn()">Staff sign-in</button>
      <button class="maint-link" id="maint-signout" onclick="tlfMaintSignOut()" style="display:none">Sign out</button>
    </div>
  </div>
</div>
<div id="maint-owner-bar">🚨 Maintenance mode is ON — only you can use the site. <button onclick="openAdmin()">Site controls</button></div>

<!-- MAIN APP -->
<div id="app" style="display:none">
  <div class="site-header">
    <div class="site-header-center">
      <a class="logo-link" href="https://tierlistforge.vercel.app" title="Go to Tier List Forge home">
      <svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" width="50" height="44">
        <g transform="translate(4 4)">
          <defs><linearGradient id="tlfg-app" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a855f7"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs>
          <g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="url(#tlfg-app)"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="url(#tlfg-app)"/></g>
          <g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g>
          <path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="url(#tlfg-app)"/>
          <path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="url(#tlfg-app)"/>
          <rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/>
          <rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/>
          <rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/>
        </g>
      </svg>
      <h1 class="site-title">Tier List Forge<span class="tld">.com</span></h1>
      </a>
    </div>
    <div class="user-menu">
      <!-- v120 (item 4) — embedded open-by-code field for signed-in users -->
      <span class="menu-code-combined menu-hide-mobile anon-hide" id="menu-code-box">
        <input class="mcc-input" id="menu-code-input" type="text" inputmode="numeric" maxlength="5" placeholder="TLF code" autocomplete="off" name="tlf-menu-code" title="Open a shared list by its 5-digit code" oninput="this.value=this.value.replace(/\D/g,'');clearMenuCodeError()" onkeydown="if(event.key==='Enter')openByMenuCode()">
        <button class="mcc-go" onclick="openByMenuCode()" title="Open list">→</button>
        <span class="mcc-x" id="menu-code-x" title="No list found">✕</span>
      </span>
      <!-- v98.5 — Revert precedes Save so it pops in on Save's LEFT (the menu is
           right-anchored, so the group grows leftward) and Save never shifts. -->
      <button class="user-menu-btn" id="revert-btn" onclick="revertUnsavedChanges()" title="Discard unsaved changes and reload the saved version" style="display:none">↩︎ Revert</button>
      <button class="user-menu-btn" id="save-btn" onclick="saveCurrentList()">💾 Save</button>
      <span class="saving-indicator" id="saving-indicator">⏳ Saving...</span>
      <button class="user-menu-btn menu-hide-mobile" id="admin-btn" onclick="openAdmin()" style="display:none">🛡 Reports</button>
      <button class="user-menu-btn menu-hide-mobile" id="partners-btn" onclick="openPartners()" style="display:none">🤝 Partners</button>
      <button class="user-menu-btn menu-hide-mobile ml-open-btn" onclick="openMyLists()">📋 My Lists</button>
      <button class="user-menu-btn menu-hide-mobile anon-hide" id="security-btn" onclick="openAccount()">⚙️ Account</button>
      <button class="user-menu-btn menu-hide-mobile anon-hide" onclick="signOut()">Sign Out</button>
      <button class="user-menu-btn anon-signin-btn" onclick="anonGoSignIn()" style="display:none">Sign In</button>
      <button class="burger-btn" id="burger-btn" onclick="toggleBurger()" aria-label="Menu">☰</button>
    </div>
    <div class="burger-menu" id="burger-menu">
      <button class="burger-item ml-open-btn" onclick="closeBurger();openMyLists()">📋 My Lists</button>
      <div class="burger-code-row anon-hide">
        <input class="menu-code-input" id="burger-code-input" type="text" inputmode="numeric" maxlength="5" placeholder="00000" autocomplete="off" name="tlf-burger-code" title="Open a shared list by its 5-digit code" oninput="this.value=this.value.replace(/\D/g,'')" onkeydown="if(event.key==='Enter'){closeBurger();openByMenuCode('burger-code-input');}">
        <button class="menu-code-btn" onclick="closeBurger();openByMenuCode('burger-code-input')">View</button>
      </div>
      <button class="burger-item" id="burger-admin" onclick="closeBurger();openAdmin()" style="display:none">🛡 Reports</button>
      <button class="burger-item" id="burger-partners" onclick="closeBurger();openPartners()" style="display:none">🤝 Partners</button>
      <button class="burger-item anon-hide" id="burger-security" onclick="closeBurger();openAccount()">⚙️ Account</button>
      <button class="burger-item burger-tb-only" onclick="closeBurger();openTextModal()">✏️ Add Text Item</button>
      <button class="burger-item burger-tb-only" onclick="closeBurger();openParamManager()">⚙️ Parameters</button>
      <button class="burger-item burger-tb-only" onclick="closeBurger();downloadTierList()">⬇️ Download</button>
      <button class="burger-item burger-tb-only burger-danger" onclick="closeBurger();resetAll()">🔄 Reset list</button>
      <button class="burger-item anon-hide" onclick="closeBurger();signOut()">Sign Out</button>
      <button class="burger-item anon-signin-btn" onclick="closeBurger();anonGoSignIn()" style="display:none">Sign In</button>
    </div>
  </div>
  <!-- v101.1 (Phase 3b) — STAFF 2FA NUDGE (layer 2). Shown only to a signed-in
       owner/moderator who has NO verified factor; their staff powers stay hidden
       until they enrol. Regular app use is unaffected (staff-features-only cut). -->
  <div class="staff-2fa-nudge" id="staff-2fa-nudge">
    <span>🔐 Two-factor authentication is required for staff access. Set it up to unlock your admin tools.</span>
    <button onclick="openSecurity()">Set up 2FA</button>
  </div>
  <p class="subtitle"><span class="subtitle-full">Click items to edit • Auto-Rank scores automatically • Click Save to share</span><span class="subtitle-short">Tap items to edit • Save to share</span></p>

  <div class="toolbar">
    <button class="btn btn-primary" id="btn-add-row" onclick="addRowFromButton()">+ Add Row</button>
    <label class="btn btn-secondary" style="cursor:pointer">📁 Upload Images<input type="file" accept="image/*" multiple onchange="uploadImages(this)" style="display:none"></label>
    <button class="btn btn-secondary tb-hide-mobile" onclick="openTextModal()">✏️ Add Text Item</button>
    <button class="btn btn-secondary tb-hide-mobile" onclick="openParamManager()">⚙️ Parameters</button>
    <button class="btn btn-danger tb-hide-mobile" onclick="resetAll()">🔄 Reset list</button>
    <button class="btn btn-secondary share-drawer-btn" id="share-drawer-btn" onclick="openShareDrawer()" disabled title="Save this list first to share it">📤 Sharing &amp; Voting</button>
  </div>

  <div class="shape-bar">
    <label>Image Shape:</label>
    <button class="shape-btn active" data-shape="square" onclick="setShape('square')" aria-label="Square">■ <span class="shape-label">Square 1:1</span></button>
    <button class="shape-btn" data-shape="landscape" onclick="setShape('landscape')" aria-label="Landscape">▬ <span class="shape-label">Landscape 3:2</span></button>
    <button class="shape-btn" data-shape="portrait" onclick="setShape('portrait')" aria-label="Portrait">▮ <span class="shape-label">Portrait 5:7</span></button>
    <button class="shape-btn" data-shape="round" onclick="setShape('round')" aria-label="Round">● <span class="shape-label">Round 1:1</span></button>
    <button class="shape-btn" data-shape="nocrop" onclick="setShape('nocrop')" aria-label="No Crop">⬜ <span class="shape-label">No Crop</span></button>
  </div>

  <div class="mode-bar">
    <button class="btn-mode active" id="mode-manual" onclick="setMode('manual')">✋ Manual Ranking</button>
    <button class="btn-mode" id="mode-auto" onclick="setMode('auto')">⚡ Auto-Rank by Score</button>
    <button class="btn-mode" id="mode-elo" onclick="setMode('elo')">⚔️ Elo — Crowd Decides</button>
    <button class="mode-info" id="mode-info-btn" onclick="showModeHint(currentMode)" title="Show the explanation">ⓘ</button>
  </div>

  <div class="autorank-banner elo-banner" id="elo-banner">
    <span>⚔️ <strong>Elo mode</strong> — items are ranked through head-to-head matchups.
    Every item starts at 1500 points. When you pick a winner, points move from the loser
    to the winner so ratings settle over time — but beating a much weaker-rated item earns
    less than beating a higher one. New items go through a short seeding period where they
    move the ladder faster. Each item's position reflects its win rate against the rest of
    the list.</span>
    <button class="mode-hint-close" onclick="dismissModeHint('elo')" title="Hide this explanation">✕</button>
  </div>
  <div class="autorank-banner" id="autorank-banner">
    ⚡ <span>Auto-Rank mode — items ranked & sorted by score. <strong>Adjust sliders</strong> to re-rank. Click a tier label to edit.</span>
    <button class="mode-hint-close" onclick="dismissModeHint('auto')" title="Hide this explanation">✕</button>
  </div>

  <!-- v83.9 — Creator's own head-to-head voting. MOVED here from inside left-col:
       as a full-width band above main-layout it gets the whole page width, so the
       matchup panels have room and centre naturally, and the tier list / details /
       QR sit in their normal columns below. Only ever visible for an Elo list
       (updateCreatorH2H drives the display). Same experience as the voter's
       matchup screen, but with no vote budget (a running count) and a reset. -->
  <div class="ch2h-wrap" id="ch2h-wrap" style="display:none">
    <div class="ch2h-start" id="ch2h-start">
      <button class="btn btn-primary" onclick="ch2hStart()">▶ Start voting</button>
      <div class="ch2h-hint">Rank your list by picking a winner between two items.</div>
    </div>
    <div class="h2h-view ch2h-view" id="ch2h-view" style="display:none">
      <div class="h2h-head">
        <span class="h2h-prompt" id="ch2h-prompt">Which one is better?</span>
        <span class="h2h-progress" id="ch2h-progress">0 votes</span>
      </div>
      <div class="h2h-stage" id="ch2h-stage">
        <div class="h2h-drawer" id="ch2h-drawer-left" style="display:none"></div>
        <div class="h2h-pair" id="ch2h-pair"></div>
        <div class="h2h-drawer" id="ch2h-drawer-right" style="display:none"></div>
      </div>
      <div class="h2h-skip-wrap" id="ch2h-skip-wrap">
        <button class="h2h-skip" onclick="ch2hSkip()">Can't decide — show another pair</button>
      </div>
      <div class="ch2h-actions">
        <button class="ch2h-stop" onclick="ch2hStop()">■ Stop voting</button>
        <button class="ch2h-reset" onclick="ch2hReset()">🔄 Reset scores</button>
      </div>
    </div>
  </div>

  <div class="main-layout">
    <!-- v99.9 — .editor-main stacks the two editor rows; the QR (#share-sticky-wrap)
         is a shared right column beside it (moved out of row 1). Both rows' lists are
         flex:1 in this column, so they align to the QR column automatically. -->
    <div class="editor-main" id="editor-main">
    <!-- v98.9 — ROW 1: main tier list + pool (left) | editor detail. -->
    <!-- v143 — full-width above all columns so the detail panel + QR align with the tier list. -->
    <div class="creator-list-head" id="creator-list-head">
      <div class="current-list-banner" id="current-list-banner">
        <span class="clb-name" id="clb-name">New List</span>
        <span class="clb-unsaved" id="clb-unsaved">● unsaved changes</span>
      </div>
      <div class="creator-list-head-actions">
        <button class="btn btn-primary present-btn tb-hide-mobile" id="present-btn" onclick="openPresentStage('creator')">🎬 Present</button>
        <button class="btn btn-success tb-hide-mobile" onclick="downloadTierList()">⬇️ Download</button>
      </div>
    </div>
    <div class="sort-bar" id="sort-bar">
      <label>Sort by</label>
      <select id="sort-param"><option value="">— select —</option></select>
      <button class="sort-dir-btn" id="sort-dir-btn" onclick="toggleSortDir()">↑ Asc</button>
      <button class="btn btn-secondary" onclick="applySort()">Apply</button>
      <button class="btn btn-secondary" id="undo-sort-btn" onclick="undoSort()" disabled>↩ Undo</button>
    </div>
    <div class="editor-row" id="editor-row-1">
    <div class="center-col">
      <div class="left-col" id="left-col">
        <div class="upload-progress-banner" id="upload-progress-banner">
          <span class="upload-progress-text" id="upload-progress-text">Uploading 0 / 0</span>
          <div class="upload-progress-track"><div class="upload-progress-fill" id="upload-progress-fill"></div></div>
          <button class="upload-progress-cancel" id="upload-progress-cancel" onclick="cancelUpload()">Cancel</button>
        </div>
        <div style="position:relative">
          <div id="tierlist"></div>
          <div class="list-loading" id="list-loading">
            <div class="list-loading-spinner"></div>
            <div class="list-loading-text">Loading list…</div>
          </div>
          <!-- v120 (item 3) — appears only while dragging external image FILES over
               the list; drop anywhere on it to add them to the pool. -->
          <div class="file-drop-overlay" id="file-drop-overlay">
            <div class="file-drop-overlay-inner">📥 Drop images to add them to the list</div>
          </div>
        </div>
        <div class="pool-section" id="pool-home">
          <div class="pool-title" id="pool-title-anchor">🗂 Item Pool</div>
          <div id="item-pool"></div>
          <div class="add-item-bar" id="pool-add-bar">
            <input type="text" id="quick-text" maxlength="50" placeholder="Quick add text item..." onkeydown="if(event.key==='Enter')quickAdd()">
            <button class="btn btn-primary" onclick="quickAdd()">Add</button>
          </div>
        </div>
      </div>
    </div>
    <div class="right-col hidden" id="right-col">
      <div class="detail-panel" id="detail-panel">
        <div id="detail-content" style="display:none">
          <div class="detail-header">
            <div class="detail-img-wrap" id="detail-img-wrap"></div>
            <div class="detail-name-wrap">
              <div class="detail-name-label">Name</div>
              <div class="detail-name-row" id="detail-name-row">
                <input class="detail-name-input" id="detail-name" maxlength="50" placeholder="Enter name..." oninput="saveDetailName()" onfocus="document.getElementById('detail-name-row').classList.add('focused')" onblur="setTimeout(()=>document.getElementById('detail-name-row').classList.remove('focused'),120)" onkeydown="if(event.key==='Enter'){event.preventDefault();confirmDetailName();}">
                <button class="detail-name-confirm" id="detail-name-confirm" onmousedown="event.preventDefault()" onclick="confirmDetailName()" title="Confirm">✓</button>
              </div>
            </div>
          </div>
          <div class="score-display" id="score-display">
            <div class="score-main" id="score-main">0/0</div>
            <div class="score-pct" id="score-pct">0%</div>
            <div class="score-bar-row" id="score-bar-row">
              <span class="score-bar-label" id="score-bar-label"></span>
              <div class="score-bar-wrap"><div class="score-bar-fill" id="score-bar-fill" style="width:0%"></div></div>
              <span class="score-bar-val" id="score-bar-val"></span>
            </div>
          </div>
          <!-- v75 — touch placement for tablets in landscape. Hidden unless
               renderDetailTiers() enables it; desktop never reveals it. -->
          <div class="detail-tiers" id="detail-tiers" style="display:none">
            <div class="detail-tiers-hint">Tap a tier to place this item</div>
            <div class="detail-tier-btns" id="detail-tier-btns"></div>
          </div>
          <div class="detail-params">
            <div class="detail-params-title">Parameters</div>
            <div id="detail-params-list"></div>
            <button class="add-param-detail-btn" onclick="openParamManager()">+ Add Parameter</button>
          </div>
          <!-- The row-level ✕ only appears on :hover, which touch cannot rely on,
               so the side panel carries its own delete (mirroring the sheet). -->
          <button class="detail-delete-btn" id="detail-delete-btn" style="display:none" onclick="deleteFromDetail()">🗑 Delete item</button>
        </div>
      </div>
    </div>
      <!--share-wrap-home--><div class="share-sticky-wrap" id="share-sticky-wrap">
      <!-- v98.0 stage 2 — anonymous users see the sharing area exists but must
           sign in to use it. Shown only in anon mode (toggled in applyAnonChrome);
           replaces the live QR + voting panels, which stay hidden for anon. -->
      <div class="anon-share-note" id="anon-share-note" style="display:none">
        <div class="anon-share-note-title">📤 Sharing &amp; Community Voting</div>
        <div class="anon-share-note-body">Share your list in seconds on screen or by link and let your community rank your list live with Elo battles or tier placement.</div>
        <button class="btn btn-primary anon-share-note-btn" onclick="openAnonAuth('vote')">Sign in</button>
      </div>
      <button class="share-collapse-tab" id="share-collapse-tab" onclick="toggleSharePanel()" title="Show/hide share &amp; voting panel" style="display:none">▶</button>
      <!-- v111 (#2) — inner container that HOLDS THE PANELS ONLY. The whole-section
           slide animates THIS (a clip-path wipe in from the right), so the collapse
           arrow (a sibling above, absolutely positioned) never moves during the slide. -->
      <div class="share-panels" id="share-panels">
      <div class="qr-panel" id="qr-panel">
        <div class="qr-box" id="qr-box">
          <div class="qr-reveal-wrap" id="qr-reveal-wrap">
            <div class="qr-blur-content" id="qr-blur-content">
              <div class="qr-label">Scan to View</div>
              <div class="qr-code-wrap" id="qr-code-wrap"></div>
              <div class="qr-stream-label">Tier List Code</div>
              <div class="qr-stream-code" id="qr-stream-code">—</div>
              <div class="qr-viewers-see" id="qr-viewers-see" style="display:none">
                <div class="qr-vs-line" id="qr-vs-line">—</div>
                <div class="qr-vs-warn" id="qr-vs-warn" style="display:none">⚠️ Unsaved changes — viewers still see your last saved version. Save to update.</div>
              </div>
            </div>
            <div class="qr-hidden-hint" id="qr-hidden-hint">🔒 This is your list's public share code &amp; QR. Anyone with it can view your list and join community voting. Click 👁 to reveal when you're ready to share.</div>
          </div>
          <div class="qr-controls">
            <button class="qr-eye-btn" id="qr-eye-btn" onclick="toggleQRReveal()" title="Hide/reveal code">👁</button>
            <div class="qr-size-seg">
              <button class="qr-seg-btn active" data-qr="s" onclick="setQRSize('s')">S</button>
              <button class="qr-seg-btn" data-qr="m" onclick="setQRSize('m')">M</button>
              <button class="qr-seg-btn" data-qr="l" onclick="setQRSize('l')">L</button>
            </div>
          </div>
          <div class="qr-share-row">
            <input class="qr-share-input" id="qr-share-input" type="text" readonly onclick="this.select()">
            <button class="qr-copy-btn" id="qr-copy-btn" onclick="copyShareLink()" title="Copy link">📋 Copy</button>
          </div>
          <!-- v137 — reverse the publish: hide from viewers again, keep the same code for later. -->
          <button class="qr-makeprivate-btn" id="qr-makeprivate-btn" onclick="makeListPrivate()" title="Hide this list from viewers again">🔒 Make private</button>
        </div>
      </div>

      <div class="voting-panel" id="voting-panel">
        <div class="voting-panel-title">🗳️ Community Voting</div>
        <!-- v139 — single private block: the (only) private note + the Make-public button,
             shown whenever the list is private. The QR-panel copy of this was removed. -->
        <div id="vote-private-block" style="display:none">
          <div class="vote-private-note">🔒 This list is private — only you can see it and you can test the voting. Publish the list to get a shareable link &amp; QR code and let your audience vote.</div>
          <button class="btn btn-primary vote-makepublic-btn" id="vote-makepublic-btn" onclick="makeListPublic()">🌐 Make list public</button>
        </div>

        <!-- v112 — shown when the editor mode differs from the running session's mode.
             In that case the whole row-2 community panel (list + its Hide/blur/download
             controls) is hidden and this single message takes over the voting panel, so
             there's one consistent place for both the info and the controls. -->
        <div class="vote-modemismatch" id="vote-modemismatch" style="display:none"></div>

        <!-- Setup state: choose mode + options, then Start -->
        <div id="voting-setup" style="display:none">
          <div class="vote-mode-explain" id="vote-mode-explain">
            <div class="vote-mode-explain-head" id="vote-mode-explain-head">—</div>
            <div class="vote-mode-explain-body" id="vote-mode-explain-body">—</div>
          </div>

          <label class="vote-toggle-row">
            <input type="checkbox" id="vote-reveal-hidden">
            <span>Hide results from voters until I reveal them</span>
          </label>

          <div class="vote-field-label">After voting closes, show viewers</div>
          <div class="vote-seg vote-seg-stacked" id="vote-postclose-seg">
            <button class="vote-seg-btn" data-pc="creator" onclick="setPostClose('creator')">Creator's ranking</button>
            <button class="vote-seg-btn active" data-pc="community" onclick="setPostClose('community')">Community ranking</button>
            <button class="vote-seg-btn" data-pc="both" onclick="setPostClose('both')">Both</button>
          </div>

          <div class="vote-start-sep"></div>
          <button class="btn btn-primary vote-start-btn" id="vote-start-btn" onclick="startVoting()">▶ Start Voting</button>
          <!-- v138 — private lists: one clear "Test vote" action (starts a test session + opens the ballot). -->
          <button class="btn btn-primary vote-testvote-btn" id="vote-setup-testvote-btn" onclick="testVote()" style="display:none">🧪 Test vote</button>
        </div>

        <!-- Active state: session running -->
        <div id="voting-active" style="display:none">
          <div class="vote-active-badge" id="vote-active-badge">● Voting is live</div>
          <div class="vote-stat-row">
            <span class="vote-stat"><b id="vote-voter-count">0</b> voters</span>
          </div>
          <div class="vote-mode-line" id="vote-mode-line">—</div>
          <div class="vote-drift-warn" id="vote-drift-warn" style="display:none"></div>
          <button class="vote-reveal-btn" id="vote-reveal-btn" onclick="toggleReveal()" style="display:none">👁 Reveal results to voters</button>
          <!-- v137 — try the voting screen yourself without a share code (works even while private). -->
          <button class="btn btn-primary vote-testvote-btn" id="vote-active-testvote-btn" onclick="testVote()">🗳️ Test vote</button>
          <button class="btn btn-secondary vote-close-btn" onclick="closeVoting()">■ Close Voting</button>
        </div>

        <!-- Closed state: recently closed, offer reopen or new -->
        <div id="voting-closed" style="display:none">
          <div class="vote-closed-badge">■ Voting closed</div>
          <div class="vote-stat-row"><span class="vote-stat"><b id="vote-closed-voters">0</b> voters took part</span></div>
          <!-- v113 — mode-mismatch note, shown above the controls when the closed session's
               mode differs from the editor mode (mirrors the open state's drift-warn). -->
          <div class="vote-drift-warn" id="vote-closed-modenote" style="display:none"></div>
          <button class="vote-reopen-btn" onclick="reopenVoting()">▶ Reopen voting</button>
          <button class="btn btn-secondary vote-newsession-btn" onclick="resetVotingSession()">🔄 Reset</button>
        </div>
      </div>
      </div><!-- /#share-panels -->
      </div>
    </div><!-- /#editor-row-1 -->


    <!-- v98.9 — ROW 2: community results (left) | community detail. Shown only while
         a session is active (toggled with #creator-community). -->
    <div class="editor-row" id="editor-row-2">
      <div class="creator-community" id="creator-community" style="display:none">
        <div class="creator-community-head">
          <span class="creator-community-title">🗳️ Live community results</span>
          <div class="creator-community-actions">
            <button class="creator-community-toggle present-btn tb-hide-mobile" onclick="openPresentStage('community')" title="Present the community ranking">🎬 Present</button>
            <button class="creator-community-toggle cc-reveal-btn tlf-tip" id="cc-reveal-mode-btn" onclick="openRevealStage()" data-tip="Slot-machine reveal: compare your ranking with the community">🎰 Reveal mode</button>
            <button class="creator-community-toggle" onclick="downloadCommunityResults()" title="Download results as an image">⬇️ Download</button>
            <button class="creator-community-toggle" id="cc-blur-btn" onclick="toggleCommunityBlur()" title="Hide/reveal community results">🙈</button>
            <button class="cc-collapse-tab" id="creator-community-toggle" onclick="toggleCreatorCommunity()" title="Collapse">▲</button>
          </div>
        </div>
        <div class="creator-community-modenote" id="creator-community-modenote" style="display:none"></div>
        <div class="creator-community-body" id="creator-community-body">
          <div class="vote-results-tierlist cc-blurable" id="creator-community-tierlist"></div>
          <div class="creator-community-meta" id="creator-community-meta"></div>
        </div>
      </div>
      <!-- v98.9 — community item detail, beside the community results in row 2,
           row-bounded sticky like the viewer. -->
      <div id="cc-side" class="cc-hidden">
        <div class="detail-panel vdetail-panel" id="cc-card">
          <div class="detail-header">
            <div class="detail-img-wrap" id="cc-img"></div>
            <div class="detail-name-wrap" id="cc-name-wrap">
              <div class="detail-name-label">Name</div>
              <div class="vdetail-name-ro" id="cc-name">—</div>
            </div>
          </div>
          <div class="score-display" id="cc-score-display">
            <div class="score-main" id="cc-score-main">0 / 0</div>
            <div class="score-pct" id="cc-score-pct">0%</div>
            <div class="score-bar-row" id="cc-score-bar-row">
              <span class="score-bar-label" id="cc-score-bar-label"></span>
              <div class="score-bar-wrap"><div class="score-bar-fill" id="cc-score-fill" style="width:0%"></div></div>
              <span class="score-bar-val" id="cc-score-bar-val"></span>
            </div>
          </div>
          <div class="detail-params" id="cc-params-section" style="display:none">
            <div class="detail-params-title">Your Parameters</div>
            <div id="cc-params"></div>
          </div>
          <div class="detail-params" id="cc-votes-section" style="display:none">
            <div class="detail-params-title" id="cc-votes-title">Community votes</div>
            <div id="cc-breakdown"></div>
            <div class="detail-params-title" id="cc-placement-title" style="margin-top:10px;display:none">Placement</div>
            <div id="cc-placement"></div>
          </div>
        </div>
      </div>
      <!-- v111 (#1 alignment) — reserves the QR column's width on row 2's right, so the
           community list (flex:1) shrinks by the same amount row 1's list does for the QR,
           keeping the two lists exactly the same width. Width driven by --editor-rail-w
           (published from the live QR width via ResizeObserver). The row gap already sits
           between #cc-side and this spacer, matching row 1's detail↔QR gap. -->
      <div class="editor-row2-spacer" id="editor-row2-spacer" aria-hidden="true"></div>
    </div><!-- /#editor-row-2 -->
    </div><!-- /#editor-main -->
  </div>

  <!-- Sharing & Voting drawer (phone-only). Empty until openShareDrawer() moves
       #share-sticky-wrap in; returned to its home anchor on close. -->
  <div class="share-drawer-backdrop" id="share-drawer-backdrop" onclick="closeShareDrawer()"></div>
  <div class="share-drawer" id="share-drawer" aria-hidden="true">
    <div class="share-drawer-head">
      <span class="share-drawer-title">📤 Sharing &amp; Voting</span>
      <button class="share-drawer-close" onclick="closeShareDrawer()" aria-label="Close">✕</button>
    </div>
    <div class="share-drawer-body" id="share-drawer-body"></div>
  </div>

  <footer class="creator-footer">
    <span class="viewer-footer-muted">© 2026 Tier List Forge · Terms &amp; Impressum coming soon</span>
    <span class="footer-berlin">· From Berlin with <span class="footer-heart">♥</span></span>
  </footer>

  <div class="my-lists-overlay" id="my-lists-overlay" onmousedown="mlOverlayDown(event)" onmouseup="mlOverlayUp(event)">
    <div class="my-lists-panel">
      <h3 id="ml-panel-title">📋 My Tier Lists <span class="ml-count-badge" id="ml-count-badge"></span></h3>
      <div class="ml-limit-note" id="ml-limit-note"></div>
      <div class="ml-section-label" id="current-list-label">Current list name</div>
      <div class="ml-rename-row">
        <input class="list-title-input" id="current-list-title" placeholder="List name..."
          oninput="markTitleDirty()"
          onkeydown="if(event.key==='Enter'){event.preventDefault();applyRenameAndClose();}"
          onblur="applyRename()">
        <button class="ml-apply-btn" id="ml-apply-btn" onclick="applyRenameAndClose()" title="Save name">✓</button>
      </div>
      <!-- v98.4 stage — anonymous users see only the rename row above + this advert;
           the saved-lists container and "create new list" row below are hidden for
           them (nothing to list, can't create/save without an account). Toggled in
           applyAnonChrome via the .ml-account-only class. -->
      <div class="ml-anon-advert" id="ml-anon-advert" style="display:none">
        <div class="ml-anon-advert-title">💾 Keep your work</div>
        <div class="ml-anon-advert-body">Create a free account to save up to <b id="ml-anon-advert-max">3</b> lists — reopen or edit any of them anytime.</div>
        <button class="btn btn-primary ml-anon-advert-btn" onclick="closeMyLists();openAnonAuth('save')">Sign in to save</button>
      </div>
      <div id="my-lists-container" class="ml-account-only"></div>
      <div class="ml-new-row ml-account-only">
        <input class="list-title-input" id="new-list-title" placeholder="New list name (optional)..."
          onkeydown="if(event.key==='Enter'){event.preventDefault();createNewList();}">
        <button class="new-list-btn" onclick="createNewList()">+ Create</button>
      </div>
    </div>
  </div>

  <div class="modal-overlay" id="param-modal" onclick="if(event.target===this)closeParamManager()">
    <div class="modal">
      <h3>⚙️ Manage Parameters</h3>
      <div class="pm-list" id="pm-list"></div>
      <button class="add-param-btn" onclick="addParamField()">+ Add Parameter</button>
      <div class="modal-btns">
        <button class="btn btn-secondary" onclick="closeParamManager()">Cancel</button>
        <button class="btn btn-primary" id="pm-save-btn" onclick="saveParams()">Save</button>
      </div>
    </div>
  </div>

  <div class="modal-overlay" id="text-modal" onclick="if(event.target===this)closeTextModal()">
    <div class="text-modal-inner">
      <h3>✏️ Add Text Item</h3>
      <input type="text" id="modal-text-input" placeholder="e.g. Alice, Bob, Cristina..." onkeydown="if(event.key==='Enter')confirmTextItem()">
      <div class="modal-btns">
        <button class="btn btn-secondary" onclick="closeTextModal()">Cancel</button>
        <button class="btn btn-primary" onclick="confirmTextItem()">Add</button>
      </div>
    </div>
  </div>
</div>

<!-- v121 — REVEAL MODE (slot-machine) fullscreen stage -->
<!-- ── v141 — PRESENTATION MODE overlay ── -->
<div id="present-stage">
  <div class="present-topbar">
    <a class="present-brand" href="https://tierlistforge.vercel.app" title="Tier List Forge home">
      <svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" width="50" height="44">
        <g transform="translate(4 4)">
          <defs><linearGradient id="tlfg-present" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a855f7"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs>
          <g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="url(#tlfg-present)"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="url(#tlfg-present)"/></g>
          <g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g>
          <path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="url(#tlfg-present)"/>
          <path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="url(#tlfg-present)"/>
          <rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/>
          <rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/>
          <rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/>
        </g>
      </svg>
      <h1 class="site-title">Tier List Forge<span class="tld">.com</span></h1>
    </a>
    <div class="present-controls">
      <button class="present-ctl p-switch-btn on" id="present-details-btn" onclick="presentToggleDetails()" title="Show / hide the detail panel">Details<span class="p-switch"><span class="p-switch-knob"></span></span></button>
      <div class="p-hide-split" id="present-style-toggle">
        <button class="present-ctl p-hs-main" id="present-hideall-btn" onclick="presentHideAll();presentCloseHideMenu()" title="Hide every item">🙈<span class="pc-tx pc-c1"> Hide all</span></button>
        <button class="present-ctl p-hs-caret" onclick="presentToggleHideMenu(event)" title="How items are hidden">▾</button>
        <div class="p-hs-menu" id="present-hide-menu">
          <div class="p-hs-title">Hide style</div>
          <button class="p-hs-opt" id="pst-facedown" onclick="presentSetStyle('facedown')"><span class="p-hs-check">✓</span><span class="p-hs-ic">🂠</span>Face-down</button>
          <button class="p-hs-opt" id="pst-blur" onclick="presentSetStyle('blur')"><span class="p-hs-check">✓</span><span class="p-hs-ic">🌫️</span>Blur</button>
          <div id="p-back-section"><!-- v152 — for everyone -->
            <div class="p-hs-sep"></div>
            <div class="p-hs-title">Card back</div>
            <button class="p-hs-opt" id="pbk-tlf" onclick="presentSetBack('tlf')"><span class="p-hs-check">✓</span><span class="p-hs-ic">🂠</span>Tier List Forge</button>
            <button class="p-hs-opt" id="pbk-poker" onclick="presentSetBack('poker')"><span class="p-hs-check">✓</span><span class="p-hs-ic">🃏</span>Playing cards</button>
            <div class="p-hs-note" id="pbk-note" style="display:none">Only for lists up to 52 items</div>
          </div>
        </div>
      </div>
      <button class="present-ctl" id="present-revealall-btn" onclick="presentRevealAll()" title="Reveal every item">👁<span class="pc-tx pc-c1"> Reveal all</span></button>
      <button class="present-ctl" id="present-sendpool-btn" onclick="presentSendAllToPool()" title="Clear list">🧹<span class="pc-tx pc-c1"> Clear list</span></button>
      <button class="present-ctl" id="present-reset-btn" onclick="presentReset()" title="Revert to how the list was when you opened Presentation">↩︎<span class="pc-tx pc-c1"> Revert</span></button>
      <button class="present-ctl" onclick="closePresentStage()" title="Close">✕<span class="pc-tx pc-c1"> Close</span></button>
    </div>
  </div>
  <div class="present-titlebar"><span class="present-list-title"><span id="present-title-txt">Presentation</span></span></div>
  <div class="present-arena">
    <div class="present-listcol">
      <div class="present-tierlist" id="present-tierlist"></div>
      <div class="present-pool-wrap" id="present-pool-wrap" style="display:none">
        <div class="present-pool-label">📦 Item pool</div>
        <div class="present-pool" id="present-pool"></div>
        <div class="present-pool-hint">Drop here to send it back to the pool</div>
      </div>
    </div>
    <div class="present-detailcol">
      <div class="present-detail-empty" id="present-detail-empty">Select an item to present</div>
      <!-- big face-down card + reveal button, shown when the selected item is hidden -->
      <div class="present-facedown-wrap" id="present-facedown-wrap" style="display:none">
        <div class="present-facedown-card" id="present-facedown-card"><div class="pfc-inner"><div class="pfc-logo"><svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4 4)"><defs><linearGradient id="tlfg-pfc" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a855f7"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs><g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="url(#tlfg-pfc)"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="url(#tlfg-pfc)"/></g><g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g><path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="url(#tlfg-pfc)"/><path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="url(#tlfg-pfc)"/><rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/><rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/><rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/></g></svg></div><div class="pfc-name">Tier List Forge</div><div class="pfc-com">.COM</div></div></div>
      </div>
      <!-- revealed details (reuses renderDetailContent with the 'pdetail' prefix) -->
      <div class="detail-panel vdetail-panel present-detail-info" id="pdetail" style="display:none">
        <div class="detail-header">
          <div class="detail-img-wrap" id="pdetail-img"></div>
        </div>
        <!-- v149 — face-down: the card back sits in the image slot, Reveal below it -->
        <div class="p-reveal-row" id="present-reveal-row" style="display:none"><button class="btn btn-primary present-reveal-btn" id="present-reveal-btn" onclick="presentRevealSelected()">👁 Reveal</button></div>
        <div id="pdetail-body"><!-- v149 — slides open after the image flip -->
        <div class="detail-header p-name-head">
          <div class="detail-name-wrap" id="pdetail-name-wrap">
            <div class="detail-name-label">Name</div>
            <div class="vdetail-name-ro" id="pdetail-name">—</div>
          </div>
        </div>
        <div class="score-display" id="pdetail-score-display">
          <div class="score-main" id="pdetail-score-main">0 / 0</div>
          <div class="score-pct" id="pdetail-score-pct">0%</div>
          <div class="score-bar-row" id="pdetail-score-bar-row">
            <span class="score-bar-label" id="pdetail-score-bar-label"></span>
            <div class="score-bar-wrap"><div class="score-bar-fill" id="pdetail-score-fill" style="width:0%"></div></div>
            <span class="score-bar-val" id="pdetail-score-bar-val"></span>
          </div>
        </div>
        <div class="detail-params" id="pdetail-params-section" style="display:none">
          <div class="detail-params-title">Parameters</div>
          <div id="pdetail-params"></div>
        </div>
        <div class="detail-params" id="pdetail-votes-section" style="display:none">
          <div class="detail-params-title" id="pdetail-votes-title">Community votes</div>
          <div id="pdetail-breakdown"></div>
          <div class="detail-params-title" id="pdetail-placement-title" style="margin-top:10px;display:none">Placement</div>
          <div id="pdetail-placement"></div>
        </div>
        </div><!-- /pdetail-body -->
      </div>
    </div>
  </div>
</div>

<div id="reveal-stage">
  <!-- v152 — same header as Presentation: centred logo, controls right, list title below -->
  <div class="present-topbar reveal-topbar2">
    <a class="present-brand" href="https://tierlistforge.vercel.app" title="Tier List Forge home">
      <svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" width="50" height="44">
        <g transform="translate(4 4)">
          <defs><linearGradient id="tlfg-reveal" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a855f7"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs>
          <g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="url(#tlfg-reveal)"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="url(#tlfg-reveal)"/></g>
          <g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g>
          <path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="url(#tlfg-reveal)"/>
          <path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="url(#tlfg-reveal)"/>
          <rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/>
          <rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/>
          <rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/>
        </g>
      </svg>
      <h1 class="site-title">Tier List Forge<span class="tld">.com</span></h1>
    </a>
    <div class="present-controls">
      <button class="present-ctl" id="reveal-sound-btn" onclick="toggleRevealSound()" title="Sound on/off">🔊</button>
      <button class="present-ctl" onclick="closeRevealStage()" title="Close">✕<span class="pc-tx pc-c1"> Close</span></button>
    </div>
  </div>
  <div class="present-titlebar reveal-titlebar2"><span class="present-list-title"><span id="reveal-list-title">Reveal</span><span class="reveal-subtitle"> · 🎰 your ranking vs the community</span></span></div>

  <!-- details + image above the stage: your detail | centred image | community detail -->
  <div class="reveal-detail" id="reveal-detail">
    <div class="reveal-detail-empty" id="reveal-detail-empty">Pick an item from the pool below to begin</div>
    <div class="reveal-detail-inner" id="reveal-detail-inner" style="display:none">
      <div class="reveal-vdetail you" id="reveal-detail-you">
        <div class="vdetail-section-title you-title">Your ranking</div>
        <div id="reveal-you-stats"></div>
      </div>
      <div class="reveal-detail-center">
        <div class="reveal-hero-img" id="reveal-hero-img" title="Click to enlarge"></div>
        <div class="reveal-detail-name" id="reveal-detail-name"></div>
      </div>
      <div class="reveal-vdetail community" id="reveal-detail-community">
        <div class="vdetail-section-title community-title">Community ranking</div>
        <div id="reveal-community-stats"></div>
      </div>
    </div>
  </div>

  <!-- arena: your tier list | twin reels + lever | community tier list -->
  <div class="reveal-arena">
    <div class="reveal-listcol">
      <div class="reveal-buildcol-title you">Your ranking</div>
      <div class="reveal-listwrap">
        <button class="reveal-magnify-btn" onclick="openRevealMagnify('you')" title="Enlarge this list">⛶</button>
        <div class="reveal-buildlist" id="reveal-buildlist-you"></div>
      </div>
    </div>

    <div class="reveal-reels">
      <div class="reveal-verdict-top" id="reveal-verdict"></div>
      <div class="reveal-reelpair">
        <div class="reel-window twin" id="reel-window-you">
          <div class="reel-frame"></div>
          <div class="reel-arrow-center inner-right" aria-hidden="true">◀</div>
          <div class="reel-strip" id="reel-strip-you"></div>
        </div>
        <div class="reveal-spine" id="reveal-spine"></div>
        <div class="reel-window twin" id="reel-window-community">
          <div class="reel-frame"></div>
          <div class="reel-arrow-center inner-left" aria-hidden="true">▶</div>
          <div class="reel-strip" id="reel-strip-community"></div>
        </div>
        <!-- ball-on-a-line lever: straight vertical pull -->
        <div class="lever-machine" id="lever-machine">
          <div class="lever-slot"></div>
          <div class="lever-ball" id="lever-knob"></div>
          <div class="lever-caption" id="lever-caption">Pull</div>
        </div>
      </div>
      <button class="reveal-btn secondary reveal-spinlab-btn" id="reveal-spinlab-btn" onclick="openSpinLab()" style="display:none">🧪 Spin lab</button>
    </div>

    <div class="reveal-listcol">
      <div class="reveal-buildcol-title community">Community ranking</div>
      <div class="reveal-listwrap">
        <button class="reveal-magnify-btn" onclick="openRevealMagnify('community')" title="Enlarge this list">⛶</button>
        <div class="reveal-buildlist" id="reveal-buildlist-community"></div>
      </div>
    </div>
  </div>

  <!-- item pool below -->
  <div class="reveal-pool" id="reveal-pool">
    <div class="reveal-pool-tools">
      <button class="reveal-btn secondary" id="reveal-random-btn" onclick="revealPickRandom()">🎲 Random next</button>
      <button class="reveal-btn secondary" id="reveal-reset-btn" onclick="revealResetProgress()">↺ Reset</button>
    </div>
  </div>

  <!-- magnify overlay: big read-only view of one tier list -->
  <div class="reveal-magnify-overlay" id="reveal-magnify-overlay" onclick="if(event.target===this)closeRevealMagnify()">
    <div class="reveal-magnify-box">
      <div class="reveal-magnify-head"><span id="reveal-magnify-title"></span><button class="reveal-close" onclick="closeRevealMagnify()">✕</button></div>
      <div class="reveal-magnify-body" id="reveal-magnify-body"></div>
    </div>
  </div>

  <!-- owner-only spin lab -->
  <div class="reveal-magnify-overlay" id="spinlab-overlay" onclick="if(event.target===this)closeSpinLab()">
    <div class="reveal-magnify-box spinlab-box">
      <div class="reveal-magnify-head"><span>🧪 Spin lab — try each spin style</span><button class="reveal-close" onclick="closeSpinLab()">✕</button></div>
      <div class="spinlab-body">
        <div class="reel-window twin" id="spinlab-reel-window">
          <div class="reel-frame"></div>
          <div class="reel-strip" id="spinlab-reel-strip"></div>
        </div>
        <div class="spinlab-controls" id="spinlab-controls"></div>
      </div>
    </div>
  </div>
</div>

<!-- ADMIN MODERATION OVERLAY -->
<div class="admin-overlay" id="admin-overlay">
  <div class="admin-panel">
    <div class="admin-header">
      <h3>🛡 Moderation — Open Reports</h3>
      <button class="admin-close" onclick="closeAdmin()">✕</button>
    </div>
    <!-- v154 — SITE CONTROLS (owner only; also needs your 2FA check) -->
    <div class="sc-panel" id="site-controls-panel" style="display:none">
      <div class="sc-head">⚙️ Site controls <span class="sc-sub">owner only · takes effect within about a minute · see IN-CASE-OF-EMERGENCY.md</span></div>
      <div id="sc-rows"></div>
    </div>
    <div class="admin-refresh-row">
      <button class="btn btn-secondary" onclick="loadReports()">↻ Refresh</button>
      <span class="admin-count" id="admin-count"></span>
    </div>
    <div id="admin-reports"></div>
  </div>
</div>

<!-- v101 (Subscriptions Phase 3a) — SECURITY / two-factor authentication panel.
     Enrolment only: set up a primary authenticator + a recommended backup one,
     view enrolled factors, remove a factor. The login CHALLENGE that actually
     enforces 2FA for staff is Phase 3b (v101.1). Supabase provides no recovery
     codes, so "recovery" here = a second TOTP factor (Supabase's own model). -->
<div class="admin-overlay" id="account-overlay">
  <div class="admin-panel">
    <div class="admin-header">
      <h3>⚙️ Account &amp; Security</h3>
      <button class="admin-close" onclick="closeAccount()">✕</button>
    </div>

    <!-- v116 — ACCOUNT section: email, login method, premium/billing. -->
    <div class="acct-section">
      <div class="acct-sec-title">Your account</div>
      <div class="acct-row"><span class="acct-label">Email</span><span class="acct-value" id="acct-email">—</span></div>
      <div class="acct-row"><span class="acct-label">Signed in with</span><span class="acct-value" id="acct-provider">—</span></div>
      <div class="acct-row"><span class="acct-label">Plan</span><span class="acct-value" id="acct-plan">—</span></div>
      <div class="acct-row" id="acct-expiry-row" style="display:none"><span class="acct-label" id="acct-expiry-label">Premium until</span><span class="acct-value" id="acct-expiry">—</span></div>
      <!-- Billing fields are placeholders until Stripe (Phase 7) is live. -->
      <div class="acct-row" id="acct-billing-row"><span class="acct-label">Next payment</span><span class="acct-value acct-muted" id="acct-next-payment">—</span></div>
      <div class="acct-note acct-muted" id="acct-billing-note">Billing details will appear here once paid plans launch.</div>
    </div>

    <!-- v116 — PASSWORD section: change password (email/password accounts only;
         hidden for social logins, which have no password). -->
    <div class="acct-section" id="acct-password-section" style="display:none">
      <div class="acct-sec-title">Password</div>
      <div class="acct-pw-row">
        <input class="auth-input acct-pw-input" id="acct-new-pw" type="password" autocomplete="new-password" placeholder="New password (min 6 chars)">
        <input class="auth-input acct-pw-input" id="acct-new-pw2" type="password" autocomplete="new-password" placeholder="Confirm new password">
      </div>
      <div class="acct-actions">
        <button class="btn btn-secondary" id="acct-pw-btn" onclick="changePassword()">Change password</button>
        <span class="acct-msg" id="acct-pw-msg"></span>
      </div>
    </div>

    <!-- v116 — SECURITY (2FA) section, moved in from the old Security panel. -->
    <div class="acct-section">
      <div class="acct-sec-title">Two-factor authentication</div>
    <div class="sec-sub">Two-factor authentication adds a second step at sign-in: a 6-digit code from an authenticator app on your phone. We strongly recommend setting up a <strong>backup</strong> authenticator on a second device or app too — Tier List Forge doesn't use printable recovery codes, so a backup factor is how you get back in if you lose your phone.</div>

    <div class="sec-status-row" id="sec-status-row">
      <span class="sec-pill" id="sec-status-pill">Checking…</span>
    </div>

    <div class="sec-factor-list" id="sec-factor-list"></div>

    <div class="sec-actions">
      <button class="btn btn-secondary" id="sec-add-primary-btn" onclick="secStartEnroll('primary')">➕ Set up authenticator</button>
      <button class="btn btn-secondary" id="sec-add-backup-btn" onclick="secStartEnroll('backup')" style="display:none">➕ Add backup authenticator</button>
      <button class="btn btn-secondary" onclick="secRefresh()">↻ Refresh</button>
    </div>

    <div class="sec-note" id="sec-backup-nudge" style="display:none">💡 You have one authenticator set up. Add a <strong>backup</strong> on a different device or app now — if you ever lose your primary device, the backup is the only way back into your account.</div>

    <!-- enrolment sub-flow (hidden until "Set up" / "Add backup") -->
    <div class="sec-enroll" id="sec-enroll" style="display:none">
      <div class="sec-enroll-head" id="sec-enroll-head">Set up your authenticator</div>
      <div class="sec-steps">
        <div class="sec-step">
          <div class="sec-step-body">
            <h5>Scan this with your authenticator app</h5>
            <p>Open Google Authenticator, Authy, 1Password, or Apple Passwords and scan the code. Can't scan? Type the key underneath it in by hand.</p>
            <div class="sec-qr-wrap" id="sec-qr"></div>
            <div class="sec-secret" id="sec-secret" title="Manual entry key"></div>
          </div>
        </div>
        <div class="sec-step">
          <div class="sec-step-body">
            <h5>Enter the 6-digit code it shows</h5>
            <p>Your app now shows a code that changes every 30 seconds. Type the current one to confirm.</p>
            <input class="sec-code-input" id="sec-code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" onkeydown="if(event.key==='Enter')secVerifyEnroll()">
            <div class="sec-enroll-err" id="sec-enroll-err"></div>
          </div>
        </div>
      </div>
      <div class="sec-actions" style="margin-top:14px">
        <button class="btn btn-primary" id="sec-verify-btn" onclick="secVerifyEnroll()">Confirm &amp; turn on</button>
        <button class="btn btn-secondary" onclick="secCancelEnroll()">Cancel</button>
      </div>
    </div>
    </div><!-- /2FA section -->

    <!-- v117 (B3) — DELETE ACCOUNT. Danger zone; hidden for owners (acct-danger
         stays display:none until populateAccountInfo shows it for non-owners). -->
    <div class="acct-section acct-danger" id="acct-danger" style="display:none">
      <div class="acct-sec-title acct-danger-title">Delete account</div>
      <div class="acct-danger-text">Permanently delete your account and your tier lists. This cannot be undone.</div>
      <button class="btn acct-delete-btn" onclick="openDeleteAccount()">Delete account</button>
    </div>
  </div>
</div>

<!-- v117 (B3) — delete-account confirmation modal. The final button unlocks only
     once the user types DELETE. -->
<div class="admin-overlay" id="delete-account-overlay">
  <div class="admin-panel delete-account-panel">
    <div class="admin-header">
      <h3>⚠️ Delete your account?</h3>
      <button class="admin-close" onclick="closeDeleteAccount()">✕</button>
    </div>
    <div class="del-body">
      <p>This <strong>permanently deletes</strong> your account and your tier lists. Your uploaded images are removed too. <strong>This cannot be undone</strong> — there is no way to recover your account or lists afterwards.</p>
      <p class="del-type-hint">Type <strong>DELETE</strong> below to confirm.</p>
      <input class="auth-input" id="del-confirm-input" type="text" autocomplete="off" autocapitalize="characters" placeholder="Type DELETE" oninput="onDeleteConfirmInput()">
      <div class="del-err" id="del-err"></div>
      <div class="del-actions">
        <button class="btn btn-secondary" onclick="closeDeleteAccount()">Cancel</button>
        <button class="btn acct-delete-btn" id="del-final-btn" onclick="confirmDeleteAccount()" disabled>Delete my account</button>
      </div>
    </div>
  </div>
</div>

<!-- v103 (Subscriptions Phase 5) — PARTNERS CRM overlay (owner-only).
     Tabs: Partners (records w/ profiles, lifecycle, channels, notes, comp),
     Quick Grant (confirm-first comp by email), Staff (grant/revoke moderator).
     Talks to manage-premium-v2. Codes/conversion panels are present-but-empty
     until Phase 6/8. -->
<div class="admin-overlay" id="partners-overlay">
  <div class="admin-panel pt-panel">
    <div class="admin-header">
      <h3>🤝 Partners</h3>
      <button class="admin-close" onclick="closePartners()">✕</button>
    </div>

    <div class="pt-tabs">
      <button class="pt-tab pt-tab-on" data-tab="partners" onclick="ptTab('partners')">Partners</button>
      <button class="pt-tab" data-tab="staff" onclick="ptTab('staff')">Staff</button>
    </div>

    <!-- ── TAB: Partners (list + detail) ───────────────────────────────── -->
    <div class="pt-tabpane" id="pt-pane-partners">
      <!-- list view -->
      <div id="pt-list-view">
        <div class="admin-refresh-row">
          <button class="btn btn-primary" onclick="ptNewPartner()">＋ New partner</button>
          <button class="btn btn-secondary" onclick="loadPartnersList()">↻ Refresh</button>
          <span class="admin-count" id="pt-list-count"></span>
        </div>
        <div class="pt-filter-row">
          <button class="pt-filter pt-filter-on" data-f="all" onclick="ptFilter('all')">All</button>
          <button class="pt-filter" data-f="active" onclick="ptFilter('active')">Active</button>
          <button class="pt-filter" data-f="expiring" onclick="ptFilter('expiring')">Expiring soon</button>
          <button class="pt-filter" data-f="expired" onclick="ptFilter('expired')">Expired</button>
          <button class="pt-filter" data-f="prospect" onclick="ptFilter('prospect')">Prospect</button>
          <button class="pt-filter" data-f="paused" onclick="ptFilter('paused')">Paused</button>
        </div>
        <div id="pt-partner-list"></div>
      </div>
      <!-- detail / edit view (hidden until a partner is opened/created) -->
      <div id="pt-detail-view" style="display:none">
        <button class="pt-back" onclick="ptCloseDetail()">← Back to list</button>
        <div class="pt-status-line" id="pd-status-line"></div>
        <div class="pt-detail-grid">
          <div class="pt-field">
            <label for="pd-name">Name / handle</label>
            <input id="pd-name" type="text" maxlength="120" placeholder="CoolStreamer">
          </div>
          <div class="pt-field">
            <label for="pd-email">Contact email <span class="pt-hint">(info only — how you reach them; not their login)</span></label>
            <input id="pd-email" type="email" autocomplete="off" placeholder="creator@example.com">
          </div>
        </div>
        <div class="pt-field">
          <label>Channels</label>
          <div id="pd-channels"></div>
          <button class="pt-add-channel" onclick="ptAddChannelRow()">＋ Add channel link</button>
        </div>
        <div class="pt-field">
          <label for="pd-note">Notes</label>
          <textarea id="pd-note" rows="3" maxlength="2000" placeholder="Deal terms, context, anything you want to remember…"></textarea>
        </div>
        <div class="pt-field">
          <label for="pd-lifecycle-override">Status override</label>
          <select id="pd-lifecycle-override">
            <option value="">Automatic (from premium status)</option>
            <option value="prospect">Prospect</option>
            <option value="paused">Paused</option>
          </select>
          <span class="pt-hint">Active / expiring / expired are set automatically. Use this only to mark someone paused or a prospect.</span>
        </div>

        <!-- account link + comp status (only meaningful once linked) -->
        <div class="pt-detail-box">
          <div class="pt-box-head">Account &amp; premium</div>
          <div id="pd-account"></div>
        </div>

        <!-- invite codes (Phase 6) — generate + list, per partner -->
        <div class="pt-detail-box" id="pd-invites-box">
          <div class="pt-box-head">Invite codes <span class="pt-box-sub">— email a code to a creator; they redeem it for partner status</span></div>
          <div id="pd-invites-list"></div>
          <button class="pt-add-channel" id="pd-invite-new-btn" onclick="ptToggleInviteForm()">＋ Generate invite code</button>
          <div id="pd-invite-form" style="display:none">
            <div class="pt-inv-grid">
              <div class="pt-field">
                <label>Grants (partner status)</label>
                <select id="iv-grant-mode" onchange="ptSyncInviteInputs()">
                  <option value="months">For a number of months</option>
                  <option value="date">Until a specific date</option>
                  <option value="none">No expiry</option>
                </select>
              </div>
              <div class="pt-field" id="iv-months-wrap">
                <label>Months</label>
                <input id="iv-months" type="number" min="1" max="120" value="12">
              </div>
              <div class="pt-field" id="iv-grant-date-wrap" style="display:none">
                <label>Premium until</label>
                <input id="iv-grant-date" type="date">
              </div>
              <div class="pt-field">
                <label>Code expires after (days)</label>
                <input id="iv-code-days" type="number" min="0" max="3650" value="30" title="0 = the code never expires">
              </div>
              <div class="pt-field">
                <label>Lock to email (optional)</label>
                <input id="iv-locked-email" type="email" autocomplete="off" placeholder="only this address can redeem">
              </div>
            </div>
            <div class="pt-note-inline" style="margin-top:0">Each code is single-use — it activates one creator's partner account, then it's spent. For handing codes to an audience, discount codes are coming in a later phase.</div>
            <div class="pt-grant-actions">
              <button class="btn btn-primary" id="iv-create-btn" onclick="ptCreateInvite()">Generate code</button>
              <button class="btn btn-secondary" onclick="ptToggleInviteForm(true)">Cancel</button>
              <span class="pt-msg" id="iv-msg"></span>
            </div>
          </div>
        </div>

        <div class="pt-detail-actions">
          <button class="btn btn-primary" id="pd-save-btn" onclick="ptSavePartner()">Create partner</button>
          <button class="btn btn-secondary" id="pd-delete-btn" onclick="ptDeletePartner()">Delete</button>
          <span class="pt-msg" id="pd-msg"></span>
        </div>
      </div>
    </div>

    <!-- ── TAB: Staff (grant/revoke moderator) ──────────────────────────── -->
    <div class="pt-tabpane" id="pt-pane-staff" style="display:none">
      <div class="pt-grant">
        <div class="pt-grant-head">Grant a staff role</div>
        <div class="pt-note-inline">⚠️ Moderators can review reports only — never partners, codes, or grants. Staff must set up 2FA before their powers activate.</div>
        <div class="pt-field">
          <label for="st-email">Account email</label>
          <div class="pt-lookup-row">
            <input id="st-email" type="email" autocomplete="off" placeholder="mod@example.com" onkeydown="if(event.key==='Enter'){event.preventDefault();stLookup();}" oninput="stResetLookup()">
            <button class="btn btn-secondary" id="st-lookup-btn" onclick="stLookup()">Look up</button>
          </div>
          <div class="pt-lookup-result" id="st-lookup-result"></div>
        </div>
        <div id="st-grant-fields" style="display:none">
          <div class="pt-field">
            <label for="st-role">Role</label>
            <select id="st-role">
              <option value="moderator">Moderator</option>
              <option value="owner">Owner</option>
            </select>
          </div>
          <div class="pt-field">
            <label for="st-note">Note (optional)</label>
            <input id="st-note" type="text" maxlength="500" placeholder="e.g. trusted mod since Aug 2026">
          </div>
          <div class="pt-grant-actions">
            <button class="btn btn-primary" id="st-grant-btn" onclick="stGrant()">Grant role</button>
            <span class="pt-msg" id="st-msg"></span>
          </div>
        </div>
      </div>

      <div class="admin-refresh-row" style="margin-top:18px">
        <button class="btn btn-secondary" onclick="loadRoles()">↻ Refresh</button>
        <span class="admin-count" id="st-count"></span>
      </div>
      <div id="st-list"></div>
    </div>

  </div>
</div>

<div class="flash-stack" id="flash-stack"></div>

<script>
const SUPABASE_URL='https://ityoseapwwosgqtvuizc.supabase.co';
// !! Replace this with your new anon key after rotating !!
const SUPABASE_ANON_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml0eW9zZWFwd3dvc2dxdHZ1aXpjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODI4NDQyODUsImV4cCI6MjA5ODQyMDI4NX0.gm3Zj_E7cp6AdyRREDwU4fbwDIMh9yWNOOjpVPYIDLo';
const{createClient}=supabase;
// v131 — PKCE flow: OAuth providers return ?code=… in the QUERY string (not a
// #access_token hash), so there is no bare "#" to clean after login. detectSessionInUrl
// lets the client auto-exchange the code; we then strip the code/state query params.
const sb=createClient(SUPABASE_URL,SUPABASE_ANON_KEY,{auth:{flowType:'pkce',detectSessionInUrl:true,persistSession:true,autoRefreshToken:true}});

const COLORS=['#ef4444','#f97316','#eab308','#22c55e','#3b82f6','#8b5cf6','#ec4899','#14b8a6','#6b7280','#1d4ed8'];
const DEFAULT_AUTO_TIERS=[
  {label:'S',color:'#ef4444',min:95,max:100},{label:'A',color:'#f97316',min:85,max:94},
  {label:'B',color:'#eab308',min:70,max:84},{label:'C',color:'#22c55e',min:50,max:69},
  {label:'D',color:'#3b82f6',min:25,max:49},{label:'F',color:'#8b5cf6',min:1,max:24},
];
// v79.1 — Elo needs its own defaults. The Auto-Rank bands above read as "% of a
// maximum score", where 95+ genuinely means excellent. An Elo percentage means
// something different: it is the item's POSITION IN THIS LIST'S SPREAD, so the
// best item is always exactly 100 and the worst always exactly 0, however close
// the real ratings are. Under the Auto-Rank bands that puts one lone item in S
// and leaves the bottom item at 0 — below F's minimum of 1 — where it could
// never be placed at all.
// Evenly spread, contiguous, starting at 0 so nothing falls off the bottom.
const DEFAULT_ELO_TIERS=[
  // v83.3 — corrected to match the UI and the results path (was S 80–100, which
  // disagreed with what the editor showed, so items placed by the wrong bounds).
  {label:'S',color:'#ef4444',min:95,max:100},{label:'A',color:'#f97316',min:85,max:94},
  {label:'B',color:'#eab308',min:70,max:84},{label:'C',color:'#22c55e',min:50,max:69},
  {label:'D',color:'#3b82f6',min:25,max:49},{label:'F',color:'#8b5cf6',min:1,max:24},
];
const DEFAULT_TIERS=[
  {label:'S',color:'#ef4444',items:[]},{label:'A',color:'#f97316',items:[]},
  {label:'B',color:'#eab308',items:[]},{label:'C',color:'#22c55e',items:[]},
  {label:'D',color:'#3b82f6',items:[]},{label:'F',color:'#8b5cf6',items:[]},
];
// Embedded app logo (transparent rounded corners composited onto the card color).
// v74 — TLF_LOGO_URI removed: the demo logo item was its only consumer (v73).

let params=[], itemData={}, selectedItemId=null, dragSrc=null, dragRowSrc=null;
const APP_VERSION='v154'; // check in console via APP_VERSION; keep in sync with the header comment
// v98.2 — which app-config the SERVER returned this session (null until loaded).
// Console-check with APP_CONFIG_VERSION to confirm the RPC + grant are live.
let APP_CONFIG_VERSION=null;
// v100 (Subscriptions Phase 1) — the GATING FLAG. The server (app-config v4)
// computes premium from the user's premium_access row (expiry-aware) and returns
// it here; loadAppConfig() sets this. This is the single client-side hook every
// premium feature reads. Today the only thing that changes with tier is MAX_LISTS
// (the server already returns the right number), so nothing yet BRANCHES on this
// flag — it's the plumbing so the next gated feature is a one-liner. Never trust
// it for enforcement: the real lock is server-side (RLS + quota triggers); this
// only drives what the UI shows. Console-check with IS_PREMIUM.
let IS_PREMIUM=false;
let idCounter=0, sortDir='asc', currentMode='manual', manualSnapshot=null, preSortSnapshot=null;
let imgShape='square', rowRanges={};
let currentUser=null, currentListId=null, currentListTitle='New List', myLists=[];
let currentShareToken=null; // share_token of the currently loaded/saved list (for QR + voting on reload/save)
// Build F — a list can now exist PRIVATELY (is_public:false) after "Start voting"
// mints it, before the creator explicitly Saves to publish. This tracks the loaded
// list's published state so Save knows whether it's the first publish (flip + QR).
let currentListIsPublic=false;
let listRemoteDeleted=false; // v140 — true when the current list was deleted elsewhere (admin/other device); greys out Save
let votingPanelReady=null;  // promise resolved once the voting panel state is fetched (for boot gate)

// v119 (item 1) — strip any leftover hash from the URL. The OAuth strip rebuilds
// the URL without a hash, but the Supabase client's own getSessionFromUrl can
// asynchronously rewrite the URL to end in a bare "#" AFTER our strip runs. This
// idempotent helper removes both a full "#..." and a bare trailing "#". Safe to
// call any number of times; a no-op when there's nothing to strip.
function stripUrlHash(){
  try{
    if(!window.location.hash && !/#$/.test(window.location.href))return;
    history.replaceState(null,'',window.location.origin+window.location.pathname+window.location.search);
  }catch(e){}
}

// v119 (item 2) — remember the login method last used ON THIS BROWSER so the auth
// screen can badge that button for returning users. Written on every successful
// sign-in (before login there's no user object to read the provider from). Value
// is one of 'email' | 'google' | 'discord' | 'twitch'.
const LAST_LOGIN_KEY='tlf_last_login_method';
function rememberLoginMethod(m){try{if(m)localStorage.setItem(LAST_LOGIN_KEY,m);}catch(e){}}
function getLastLoginMethod(){try{return localStorage.getItem(LAST_LOGIN_KEY)||'';}catch(e){return '';}}

// v98.0 — ANONYMOUS "try before you sign up" flow (stage 1).
// anonMode is true when the editor is running WITHOUT a signed-in account. In
// that state the full Manual/Auto editor works locally; Save / community vote /
// Elo are account-gated (stage 2). Anonymous work persists across reload in its
// OWN cache key ('tlm9_anon') so it can never collide with a logged-in user's
// 'tlm9'. cacheKey() is the single source of truth for which key is read/written.
let anonMode=false;
function cacheKey(){return anonMode?'tlm9_anon':'tlm9';}
// Dev/preview gate (stage 1): during development the public still sees today's
// auth screen unchanged. Visiting with ?try=forge sets a per-device flag so THIS
// browser boots into the new anonymous landing page from then on. This is
// camouflage, NOT security — the real protection is that Save/voting/Elo require
// a real account and Supabase RLS enforces that server-side regardless.
const TLF_PREVIEW_CODE='forge';           // change this word to rotate the door
const TLF_PREVIEW_FLAG='tlf_preview_ok';
function tlfPreviewGatePassed(){
  try{
    const u=new URL(window.location.href);
    if(u.searchParams.get('try')===TLF_PREVIEW_CODE){
      try{localStorage.setItem(TLF_PREVIEW_FLAG,'1');}catch(e){}
      u.searchParams.delete('try');
      history.replaceState(null,'',u.pathname+(u.searchParams.toString()?'?'+u.searchParams:'')+u.hash);
    }
  }catch(e){}
  // v154 — the anon_try site control: off = nobody, everyone = launched,
  // owner (default) = only devices that visited ?try=forge (the old gate).
  const lvl=siteLevel('anon_try','owner');
  if(lvl==='off')return false;
  if(lvl==='everyone')return true;
  try{return localStorage.getItem(TLF_PREVIEW_FLAG)==='1';}catch(e){return false;}
}

function uid(){return 'i'+(++idCounter)}
function pid(){return 'p'+(++idCounter)}

// ── v98.3 STAGE 3A — anonymous LOCAL images (IndexedDB) ──────────────────────
// Anonymous users can't upload to Supabase storage, so their images live in the
// browser. localStorage (which holds the text canvas) can't hold image blobs, so
// we use IndexedDB — the browser's proper store for large binary data. Each anon
// image blob is keyed by a local id ('L'+counter); the item in itemData carries
// that key as `localImg` and renders from an object URL rebuilt at load. On sign-
// up these blobs upload to storage and the items are rewired to real URLs
// (runAnonImageMigration), after which nothing local remains.
const TLF_IDB_NAME='tlf_anon_images', TLF_IDB_STORE='imgs';
let _tlfIdb=null;
function tlfIdbOpen(){
  if(_tlfIdb)return Promise.resolve(_tlfIdb);
  return new Promise((resolve,reject)=>{
    let req;
    try{req=indexedDB.open(TLF_IDB_NAME,1);}catch(e){return reject(e);}
    req.onupgradeneeded=()=>{const db=req.result;if(!db.objectStoreNames.contains(TLF_IDB_STORE))db.createObjectStore(TLF_IDB_STORE);};
    req.onsuccess=()=>{_tlfIdb=req.result;resolve(_tlfIdb);};
    req.onerror=()=>reject(req.error);
  });
}
function tlfIdbPut(key,blob){
  return tlfIdbOpen().then(db=>new Promise((resolve,reject)=>{
    const tx=db.transaction(TLF_IDB_STORE,'readwrite');
    tx.objectStore(TLF_IDB_STORE).put(blob,key);
    tx.oncomplete=()=>resolve(true);tx.onerror=()=>reject(tx.error);
  }));
}
function tlfIdbGet(key){
  return tlfIdbOpen().then(db=>new Promise((resolve,reject)=>{
    const tx=db.transaction(TLF_IDB_STORE,'readonly');
    const r=tx.objectStore(TLF_IDB_STORE).get(key);
    r.onsuccess=()=>resolve(r.result||null);r.onerror=()=>reject(r.error);
  }));
}
function tlfIdbDelete(key){
  return tlfIdbOpen().then(db=>new Promise((resolve)=>{
    const tx=db.transaction(TLF_IDB_STORE,'readwrite');
    tx.objectStore(TLF_IDB_STORE).delete(key);
    tx.oncomplete=()=>resolve(true);tx.onerror=()=>resolve(false);
  })).catch(()=>false);
}
function tlfIdbClear(){
  return tlfIdbOpen().then(db=>new Promise((resolve)=>{
    const tx=db.transaction(TLF_IDB_STORE,'readwrite');
    tx.objectStore(TLF_IDB_STORE).clear();
    tx.oncomplete=()=>resolve(true);tx.onerror=()=>resolve(false);
  })).catch(()=>false);
}
let _tlfLocalImgCounter=0;
function tlfNewLocalKey(){return 'L'+Date.now().toString(36)+'_'+(++_tlfLocalImgCounter);}
// Track object URLs we create so we can revoke them (avoid leaks) when clearing.
const _tlfObjUrls=new Set();
function tlfMakeObjUrl(blob){const u=URL.createObjectURL(blob);_tlfObjUrls.add(u);return u;}
function tlfRevokeObjUrls(){_tlfObjUrls.forEach(u=>{try{URL.revokeObjectURL(u);}catch(e){}});_tlfObjUrls.clear();}

/* ── AUTH ── */
function switchTab(tab){
  document.getElementById('tab-login').classList.toggle('active',tab==='login');
  document.getElementById('tab-signup').classList.toggle('active',tab==='signup');
  document.getElementById('auth-submit-btn').textContent=tab==='login'?'Sign In':'Sign Up';
}

async function handleAuth(){
  const email=document.getElementById('auth-email').value.trim();
  const password=document.getElementById('auth-password').value;
  // v126 — decide login-vs-signup from the ACTIVE TAB, not the submit button's
  // text. v119's "Last used" badge appends a <span> into the button, so reading
  // its textContent ("Sign InLast used") misfired into signUp. The tab's .active
  // class is immune to button content.
  const isLogin=document.getElementById('tab-login').classList.contains('active');
  const errEl=document.getElementById('auth-error');
  const sucEl=document.getElementById('auth-success');
  errEl.classList.remove('show');sucEl.classList.remove('show');
  if(!email||!password){errEl.textContent='Please enter email and password.';errEl.classList.add('show');return;}
  try{
    let res;
    if(isLogin){res=await sb.auth.signInWithPassword({email,password});}
    else{res=await sb.auth.signUp({email,password});}
    if(res.error){
      // v126 — signups are disabled on this instance; make the raw Supabase text clearer.
      let msg=res.error.message;
      if(/signups? not allowed/i.test(msg))msg='New sign-ups are currently disabled. If you already have an account, use the Sign In tab.';
      errEl.textContent=msg;errEl.classList.add('show');return;
    }
    if(!isLogin&&!res.data?.session){sucEl.textContent='Check your email to confirm your account!';sucEl.classList.add('show');return;}
    rememberLoginMethod('email'); // v119 item 2
    currentUser=res.data.user||res.data.session?.user;
    onAuthSuccess();
  }catch(e){errEl.textContent='Something went wrong. Please try again.';errEl.classList.add('show');}
}

const OAUTH_REDIRECT=window.location.origin+window.location.pathname;

// v116 — FORGOT PASSWORD. Send a Supabase reset email to the address in the login
// field. The link returns the user to the site in a recovery session; boot()/the
// auth-state listener detect the recovery event and show #reset-screen.
async function sendPasswordReset(){
  const email=(document.getElementById('auth-email').value||'').trim();
  const errEl=document.getElementById('auth-error');
  const sucEl=document.getElementById('auth-success');
  errEl.classList.remove('show');sucEl.classList.remove('show');
  if(!email){errEl.textContent='Enter your email above first, then tap \u201CForgot password?\u201D.';errEl.classList.add('show');return;}
  try{
    const{error}=await sb.auth.resetPasswordForEmail(email,{redirectTo:OAUTH_REDIRECT});
    if(error){errEl.textContent=error.message;errEl.classList.add('show');return;}
    // Always show success (don't reveal whether the address exists).
    sucEl.textContent='If an account exists for that email, a password reset link is on its way.';
    sucEl.classList.add('show');
  }catch(e){errEl.textContent='Something went wrong. Please try again.';errEl.classList.add('show');}
}

let _inPasswordRecovery=false;
function showResetScreen(){
  _inPasswordRecovery=true;
  hideBootGate();
  document.getElementById('auth-screen').classList.add('hidden');
  document.getElementById('app').style.display='none';
  document.getElementById('reset-screen').classList.add('show');
  setTimeout(()=>{const el=document.getElementById('reset-pw');if(el)el.focus();},60);
}
async function submitPasswordReset(){
  const p1=document.getElementById('reset-pw'),p2=document.getElementById('reset-pw2');
  const errEl=document.getElementById('reset-err');
  const set=(t)=>{if(errEl){errEl.textContent=t;errEl.classList.add('show');}};
  if(errEl)errEl.classList.remove('show');
  const pw=(p1&&p1.value)||'',pw2=(p2&&p2.value)||'';
  if(pw.length<6){set('Password must be at least 6 characters.');return;}
  if(pw!==pw2){set('The two passwords don\u2019t match.');return;}
  const btn=document.getElementById('reset-submit-btn');
  if(btn){btn.disabled=true;btn.textContent='Saving\u2026';}
  try{
    const{error}=await sb.auth.updateUser({password:pw});
    if(error){set(error.message||'Could not set the new password.');if(btn){btn.disabled=false;btn.textContent='Save new password';}return;}
    _inPasswordRecovery=false;
    document.getElementById('reset-screen').classList.remove('show');
    showFlash('\u2705 Password updated. You\u2019re signed in.');
    try{const{data:{user}}=await sb.auth.getUser();if(user)currentUser=user;}catch(e){}
    onAuthSuccess();
  }catch(e){set('Something went wrong. Please try again.');if(btn){btn.disabled=false;btn.textContent='Save new password';}}
}
async function handleGoogleAuth(){
  rememberLoginMethod('google'); // v119 item 2 — badge on next visit
  const{error}=await sb.auth.signInWithOAuth({provider:'google',options:{redirectTo:OAUTH_REDIRECT}});
  if(error)showFlash('⚠️ Google login failed: '+error.message);
}
async function handleDiscordAuth(){
  rememberLoginMethod('discord'); // v119 item 2
  const{error}=await sb.auth.signInWithOAuth({provider:'discord',options:{redirectTo:OAUTH_REDIRECT}});
  if(error)showFlash('⚠️ Discord login failed: '+error.message);
}
async function handleTwitchAuth(){
  rememberLoginMethod('twitch'); // v119 item 2
  const{error}=await sb.auth.signInWithOAuth({provider:'twitch',options:{redirectTo:OAUTH_REDIRECT}});
  if(error)showFlash('⚠️ Twitch login failed: '+error.message);
}

// v119 (item 2) — badge the login button matching the method last used on this
// browser. Idempotent: clears any existing badge first, so it's safe to re-run.
function applyLastUsedBadge(){
  try{
    // remove any prior badge/host marking
    document.querySelectorAll('.auth-lastused-tag').forEach(t=>t.remove());
    document.querySelectorAll('.auth-lastused-host').forEach(h=>h.classList.remove('auth-lastused-host'));
    const m=getLastLoginMethod();
    if(!m)return;
    // v152 — badge BOTH the auth screen and the anon sign-in popup
    const maps=[{email:'auth-submit-btn',google:'auth-google-btn',discord:'auth-discord-btn',twitch:'auth-twitch-btn'},
                {email:'anon-auth-submit',google:'anon-google-btn',discord:'anon-discord-btn',twitch:'anon-twitch-btn'}];
    maps.forEach(map=>{
      const btn=document.getElementById(map[m]);
      if(!btn)return;
      btn.classList.add('auth-lastused-host');
      const tag=document.createElement('span');
      tag.className='auth-lastused-tag';
      tag.textContent='Last used';
      btn.appendChild(tag);
    });
  }catch(e){}
}

async function signOut(){
  // v110 (#4) — the 24h trusted-device marker is deliberately NOT cleared on sign-out.
  // It's keyed per-account and expires after 24h; keeping it across logout is the whole
  // point (log out → log back into the SAME account within 24h → no re-challenge). v109
  // cleared it here, which re-prompted on every login. (clearDeviceTrust remains defined
  // for a possible future explicit "forget this device" control.)
  await sb.auth.signOut();
  // Clear the cached working canvas + last-list pointer. Without this the next
  // account to log in on this browser would see the previous account's list
  // restored from localStorage. (Display preferences are deliberately kept.)
  try{localStorage.removeItem('tlm9');localStorage.removeItem('tlf_last_list_id');}catch(e){}
  stopCreatorRealtime(); // v76 — no cross-account watching on a shared browser
  clearAllFlash(); // v70 — persistent warning toasts must not survive logout
  forceUnlockBodyScroll(); // v70 — never leave the page frozen after sign-out
  currentUser=null;currentListId=null;currentShareToken=null;currentListTitle='New List';
  currentSession=null;voteSession=null;lastCreatorResults=null;voteResults=null;ccSideItemId=null;
  hideCreatorCommunity();hideVotingPanel();hideQR();
  document.getElementById('admin-btn').style.display='none';
  // v98.0 — if this device has the preview gate, signing out returns to the
  // anonymous landing page (a fresh blank anon canvas) rather than the auth wall.
  // Without the gate, behaviour is unchanged: back to the auth screen.
  if(tlfPreviewGatePassed()){
    enterAnonMode();
  }else{
    document.getElementById('app').style.display='none';
    document.getElementById('auth-screen').classList.remove('hidden');
    try{switchTab('login');}catch(e){} // v126 — always return on the Sign In tab
    applyLastUsedBadge(); // v119 item 2
  }
  TLF_IS_OWNER=false;try{tlfApplyMaintenance();}catch(e){} // v154
}

async function onAuthSuccess(){
  _maintSignIn=false;setTimeout(()=>{try{tlfApplyMaintenance();}catch(e){}},0); // v154 — re-check maintenance for the new user
  anonMode=false;                 // v98.0 — leaving the anonymous flow
  applyAnonChrome();
  document.getElementById('auth-screen').classList.add('hidden');
  // v101.1 (Phase 3b, layer 1) — 2FA gate. If the just-signed-in user has a
  // factor but hasn't satisfied it, show the challenge and DON'T reveal the app
  // yet; proceedAfterMfa() continues once they pass. Anon carry-over is handled
  // after the gate so a challenged user still gets their list re-homed on pass.
  const okToProceed=await mfaGate();
  if(!okToProceed){
    // Challenge is up. Stash whether a carry-over was pending so we can run it
    // after verification (proceedAfterMfa doesn't know about carry-over).
    _mfaPendingCarry=anonCarryPending();
    return;
  }
  document.getElementById('app').style.display='block';
  // v98.0 stage 2 — if a carry-over is pending (anon user just signed up/in),
  // re-home + auto-save their anon list instead of loading a fresh/saved one.
  if(anonCarryPending()){
    loadMyLists(true).then(()=>runAnonCarryOver());
    refreshAdminButton();
    redeemPendingInvite();
    return;
  }
  init();
  loadMyLists();
  refreshAdminButton();
  redeemPendingInvite();
}
let _mfaPendingCarry=false;

// v98.0 — ANONYMOUS LANDING PAGE (stage 1).
// Enter the editor with no account: full Manual/Auto editor, local persistence,
// account-gated Save/voting/Elo. Called from boot() when the preview gate is
// passed and there's no Supabase session.
function enterAnonMode(){
  anonMode=true;
  currentUser=null;
  document.getElementById('auth-screen').classList.add('hidden');
  document.getElementById('app').style.display='block';
  applyAnonChrome();
  // Restore local anon work if present, else start a fresh blank canvas. init()
  // and initFresh() are account-agnostic; cacheKey() routes them to 'tlm9_anon'.
  let hasCache=false;
  try{hasCache=!!localStorage.getItem(cacheKey());}catch(e){}
  if(hasCache)init();else initFresh(true);
  refreshAdminButton();           // no user → hides the admin button
}

// Swap header/menu chrome for the current mode. Anonymous users have nothing to
// list, no account to sign out of, and can't be admins — so My Lists / Sign Out /
// Admin are hidden and a "Sign In" button is shown instead. A signed-in session
// restores the normal chrome. Idempotent; safe to call on every auth transition.
function applyAnonChrome(){
  const show=(el,on)=>{if(el)el.style.display=on?'':'none';};
  const signInBtns=document.querySelectorAll('.anon-signin-btn');
  signInBtns.forEach(b=>show(b,anonMode));
  document.querySelectorAll('.anon-hide').forEach(el=>show(el,!anonMode));
  // v98.0 stage 2 — the sharing area is VISIBLE to anon (so they see what an
  // account unlocks) but shows a sign-in notice instead of the live QR/voting.
  const note=document.getElementById('anon-share-note');
  show(note,anonMode);
  // The share wrap has no content of its own for anon (QR/voting stay hidden);
  // the notice gives it width on desktop. On phone the wrap is display:none unless
  // opened via the drawer, so enable the drawer button for anon too.
  const drawerBtn=document.getElementById('share-drawer-btn');
  if(drawerBtn&&anonMode){drawerBtn.disabled=false;drawerBtn.title='Sign in to share your list';}
  // v98.4 — My Lists panel doubles as the anon RENAME + save-advert surface.
  // Anon: relabel the opener ("List name"), hide the saved-lists container +
  // "create new" row, hide the count badge, show the "Keep your work" advert.
  // Signed-in: everything back to normal.
  document.querySelectorAll('.ml-open-btn').forEach(b=>{
    // keep the leading icon, swap the words
    b.textContent = anonMode ? '✏️ List name' : '📋 My Lists';
  });
  document.querySelectorAll('.ml-account-only').forEach(el=>show(el,!anonMode));
  show(document.getElementById('ml-anon-advert'),anonMode);
  const badge=document.getElementById('ml-count-badge');if(badge)show(badge,!anonMode);
  const title=document.getElementById('ml-panel-title');
  if(title)title.firstChild&&(title.childNodes[0].nodeValue=anonMode?'✏️ Your list ':'📋 My Tier Lists ');
  const lbl=document.getElementById('current-list-label');if(lbl)lbl.textContent=anonMode?'List name':'Current list name';
  // advert max-lists number, from live config
  const mx=document.getElementById('ml-anon-advert-max');if(mx)mx.textContent=String(MAX_LISTS);
}

// Send an anonymous user to the sign-in / sign-up screen (kept as a dedicated
// destination per the plan). Their local anon work stays in 'tlm9_anon' and is
// picked up again if they return without signing in. Stage 2 adds carry-over of
// this work into the account on successful sign-up.
function anonGoSignIn(){
  markAnonCarry();   // v98.0 stage 2 — carry the anon list into the account on sign-in too
  document.getElementById('app').style.display='none';
  document.getElementById('auth-screen').classList.remove('hidden');
  const back=document.getElementById('auth-back-editor');
  if(back)back.style.display='';   // let them return to their in-progress anon list
  try{switchTab('login');}catch(e){}
  applyLastUsedBadge(); // v152 — badge here too (signed-out preview devices land here)
}
// Return from the sign-in screen to the anonymous editor without signing in.
// Their local anon work is untouched, so init() restores it exactly.
function anonBackToEditor(){
  clearAnonCarry();   // changed their mind — no pending carry-over
  const back=document.getElementById('auth-back-editor');
  if(back)back.style.display='none';
  enterAnonMode();
}

// ── v98.0 STAGE 2 — in-place account popup + carry-over ──────────────────────
// The anon user hits an account gate (Save / Start voting / Elo). We open a
// compact popup rather than throwing them to the full auth screen, so their list
// stays visible. On success their local anon canvas is carried into the account
// and auto-saved (the server is the judge on the list limit).
const ANON_CARRY_FLAG='tlf_anon_carry';   // survives an OAuth redirect/reload
let anonAuthCtx=null;                       // remembers what they were trying to do

// Open the popup. `ctx` is a short label ('save' | 'vote' | 'elo') used only to
// tailor the heading, so the popup explains why signing up helps right now.
function openAnonAuth(ctx){
  anonAuthCtx=ctx||'save';
  const head=document.getElementById('anon-auth-head');
  const sub=document.getElementById('anon-auth-sub');
  const msg={
    save:['Create a free account to save','Your list stays exactly as it is — signing up keeps it for you.'],
    vote:['Sign in to start community voting','Community voting needs a free account. Your list carries over when you sign up.'],
    elo:['Sign in to use Elo voting','Elo (crowd-decides) needs a free account. Your list carries over when you sign up.']
  }[anonAuthCtx]||['Create a free account','Your work carries over when you sign up.'];
  if(head)head.textContent=msg[0];
  if(sub)sub.textContent=msg[1];
  anonAuthTab((anonAuthCtx==='vote'||anonAuthCtx==='elo')?'login':'signup'); // v152 — "Sign in to…" popups open on Sign In; Save stays Sign Up
  const err=document.getElementById('anon-auth-error');if(err)err.classList.remove('show');
  const suc=document.getElementById('anon-auth-success');if(suc)suc.classList.remove('show');
  document.getElementById('anon-auth-modal').classList.add('show');
}
function closeAnonAuth(){document.getElementById('anon-auth-modal').classList.remove('show');}
function anonAuthTab(tab){
  document.getElementById('anon-tab-login').classList.toggle('active',tab==='login');
  document.getElementById('anon-tab-signup').classList.toggle('active',tab==='signup');
  document.getElementById('anon-auth-submit').textContent=tab==='login'?'Sign In':'Sign Up';
  applyLastUsedBadge(); // v152 — setting textContent removed the badge
}

// Mark that the anon canvas should be carried over + auto-saved after auth. Set
// this BEFORE any auth attempt (incl. before an OAuth redirect) so the return
// path — even after a full page reload — knows to re-home + save the work.
function markAnonCarry(){try{localStorage.setItem(ANON_CARRY_FLAG,'1');}catch(e){}}
function clearAnonCarry(){try{localStorage.removeItem(ANON_CARRY_FLAG);}catch(e){}}
function anonCarryPending(){try{return localStorage.getItem(ANON_CARRY_FLAG)==='1';}catch(e){return false;}}

// Email/password from the popup. On success onAuthSuccess() runs the carry-over.
async function anonHandleAuth(){
  const email=document.getElementById('anon-auth-email').value.trim();
  const password=document.getElementById('anon-auth-password').value;
  const isLogin=document.getElementById('anon-tab-login').classList.contains('active'); // v152 — badge text no longer breaks this
  const errEl=document.getElementById('anon-auth-error');
  const sucEl=document.getElementById('anon-auth-success');
  errEl.classList.remove('show');sucEl.classList.remove('show');
  if(!email||!password){errEl.textContent='Please enter email and password.';errEl.classList.add('show');return;}
  markAnonCarry();
  try{
    let res;
    if(isLogin){res=await sb.auth.signInWithPassword({email,password});}
    else{res=await sb.auth.signUp({email,password});}
    if(res.error){clearAnonCarry();errEl.textContent=res.error.message;errEl.classList.add('show');return;}
    // Sign-up with email confirmation ON: no session yet. Keep the carry flag —
    // when they confirm and return, boot() picks it up. Tell them to check mail.
    if(!isLogin&&!res.data?.session){sucEl.textContent='Check your email to confirm, then sign in — your list is saved on this device.';sucEl.classList.add('show');return;}
    currentUser=res.data.user||res.data.session?.user;
    rememberLoginMethod('email'); // v152 — anon popup email counts too
    closeAnonAuth();
    onAuthSuccess();                          // runs carry-over (flag is set)
  }catch(e){clearAnonCarry();errEl.textContent='Something went wrong. Please try again.';errEl.classList.add('show');}
}

// Social from the popup: set the carry flag, then hand off to the existing OAuth
// handlers (they redirect away; boot() completes the carry-over on return).
function anonSocial(provider){
  markAnonCarry();
  if(provider==='google')handleGoogleAuth();
  else if(provider==='discord')handleDiscordAuth();
  else if(provider==='twitch')handleTwitchAuth();
}

// Carry the anonymous canvas into the freshly signed-in account and auto-save it.
// Called once, after login has populated myLists. The server is the judge on the
// list limit: we ATTEMPT the save; if it succeeds the list is theirs with zero
// extra clicks, and if the server rejects it (limit reached) it stays an on-screen
// draft with a clear message. Either way the anon cache is consumed.
async function runAnonCarryOver(){
  if(!anonCarryPending())return;
  clearAnonCarry();
  let raw=null;
  try{raw=localStorage.getItem('tlm9_anon');}catch(e){}
  if(!raw){loadMyLists();return;}             // nothing to carry — run the normal saved-or-fresh load
  // v98.5 — DISCARD AN UNTOUCHED DEFAULT. If the anon user never edited anything,
  // the cached canvas is the pristine initFresh() default (default tiers, no items,
  // no params, manual/square) and its _dirty flag is false — writeCache() persists
  // it, and every edit path (item/param add, tier-row rename/recolor/reorder/add/
  // delete, shape, mode, placement) routes through saveState()->markDirty() which
  // flips it true. So _dirty===false means "nothing was changed on the default
  // list": don't carry a blank draft into the account (it would show as a new
  // unsaved list and could consume a save slot). Consume the anon cache and run the
  // normal post-login load — a saved list if any, else a fresh draft (initFresh).
  try{
    const chk=JSON.parse(raw);
    if(!chk._dirty){
      localStorage.removeItem('tlm9_anon');
      loadMyLists();                          // saved-or-fresh; no blank carry
      return;
    }
  }catch(e){/* unreadable cache — fall through and let the carry attempt handle it */}
  // Re-home: make the anon canvas the current logged-in working canvas. We write
  // it to 'tlm9' (anonMode is already false here) then init() to paint it as an
  // unsaved, un-owned draft (no _listId), so Save creates a new list.
  try{
    const s=JSON.parse(raw);
    s._listId=null;s._shareToken=null;s._isPublic=false;s._dirty=true;s._savedMode=null;s._serverUpdatedAt=null;
    localStorage.setItem('tlm9',JSON.stringify(s));
    localStorage.removeItem('tlm9_anon');
  }catch(e){return;}
  currentListId=null;currentShareToken=null;currentListIsPublic=false;
  init();                                     // paint the carried draft (reads 'tlm9')
  markDirty();
  // v98.3 — migrate any LOCAL (IndexedDB) images to real storage BEFORE saving,
  // so the saved list references real URLs, not dead local refs. All-or-nothing:
  // if any upload fails, nothing is saved and the images stay local for a retry.
  const localIds=Object.keys(itemData).filter(id=>itemData[id]&&itemData[id].localImg);
  if(localIds.length){
    showFlash('⏳ Saving your images to your account…',{id:'anon-mig'});
    const mig=await runAnonImageMigration(localIds);
    dismissFlash('anon-mig');
    if(!mig.ok){
      writeCache();
      showFlash('⚠️ Couldn\u2019t upload your images just now (they\u2019re still here). Press 💾 Save to try again.',{warn:true});
      return;
    }
    writeCache();                             // persist the rewired (real-URL) refs
  }
  // Attempt the auto-save. saveCurrentList returns false on any failure (incl. the
  // server's list-limit rejection, which it surfaces via a friendly flash).
  const saved=await saveCurrentList();
  if(saved){showFlash('✅ Signed in — your list is saved to your account.');}
  else{showFlash('👋 Signed in! You\u2019re at your list limit — free up a slot, then press Save to keep this list.');}
}

// Upload every local (IndexedDB) image to real storage and rewire its item to the
// returned {publicUrl, imageId}. ALL-OR-NOTHING: on the first failure, revert any
// items already rewired in this pass back to their local refs and return
// {ok:false} so the caller saves nothing. On full success, deletes the migrated
// blobs from IndexedDB. Uses the same upload-image Edge Function as normal uploads
// (server enforces the 100MB storage quota; a quota rejection = a failure ->
// all-or-nothing rollback).
async function runAnonImageMigration(localIds){
  const done=[];                              // {id, prevImg, prevLocalKey}
  for(const id of localIds){
    const d=itemData[id];if(!d||!d.localImg){continue;}
    let blob=null;
    try{blob=await tlfIdbGet(d.localImg);}catch(e){blob=null;}
    if(!blob){rollbackMigration(done);return{ok:false,reason:'missing'};}
    try{
      const token=await getAccessToken();
      if(!token){rollbackMigration(done);return{ok:false,reason:'auth'};}
      const fd=new FormData();
      fd.append('file',blob,'image.jpg');
      const resp=await fetch(`${SUPABASE_URL}/functions/v1/upload-image`,{
        method:'POST',headers:{'Authorization':'Bearer '+token},body:fd
      });
      if(!resp.ok){rollbackMigration(done);return{ok:false,reason:'upload'};}
      const j=await resp.json();
      if(!j||!j.publicUrl||!j.imageId){rollbackMigration(done);return{ok:false,reason:'shape'};}
      done.push({id,prevImg:d.img,prevLocalKey:d.localImg});
      d.img=j.publicUrl;d.imageId=j.imageId;delete d.localImg;
    }catch(e){rollbackMigration(done);return{ok:false,reason:'network'};}
  }
  for(const r of done){try{await tlfIdbDelete(r.prevLocalKey);}catch(e){}}
  return{ok:true,count:done.length};
}
function rollbackMigration(done){
  for(const r of done){
    const d=itemData[r.id];if(!d)continue;
    d.img=r.prevImg;d.localImg=r.prevLocalKey;delete d.imageId;
  }
}

/* ── ADMIN MODERATION ── */
// No admin UUID lives in the client anymore. On login we ask the server
// (admin-moderation "am_i_admin"); the real gate is server-side regardless.
let isAdminUser=false;
async function syncBurgerAdmin(){
  const a=document.getElementById('admin-btn');const ba=document.getElementById('burger-admin');
  if(a&&ba)ba.style.display=a.style.display;
  // v102 — Partners (owner-only) mirrors the same way.
  const p=document.getElementById('partners-btn');const bp=document.getElementById('burger-partners');
  if(p&&bp)bp.style.display=p.style.display;
}
async function refreshAdminButton(){
  const btn=document.getElementById('admin-btn');
  const nudge=document.getElementById('staff-2fa-nudge');
  const ptBtn=document.getElementById('partners-btn');
  if(!btn)return;
  isAdminUser=false;btn.style.display='none';
  if(ptBtn)ptBtn.style.display='none';
  if(nudge)nudge.classList.remove('show');
  if(!currentUser){TLF_IS_OWNER=false;return;}
  try{const{data}=await sb.rpc('tlf_is_owner');TLF_IS_OWNER=!!data;}catch(e){TLF_IS_OWNER=false;} // v154
  tlfApplySiteToggles();
  if((SITE_CONTROLS.maintenance||{}).level==='on'){try{tlfApplyMaintenance();}catch(e){}} // v154 — e.g. after an OAuth sign-in
  try{
    const r=await adminCall({action:'am_i_admin'});
    const isStaff=!!r.admin;
    if(!isStaff){syncBurgerAdmin();return;}
    // v101.1 (Phase 3b, layer 2) — STAFF HARD CUT. A staff member gets staff
    // powers ONLY if they have a verified 2FA factor AND have satisfied it this
    // session (AAL2). Un-enrolled staff: powers stay hidden + a nudge to enrol.
    // Enrolled-but-not-yet-challenged staff: the layer-1 gate handles the code;
    // once at AAL2 this re-runs and reveals the button. Staff-features-only —
    // regular app use is never blocked (lockout-safe).
    const ok2fa=await staffHas2FAatAAL2();
    isAdminUser = isStaff && ok2fa;
    btn.style.display=isAdminUser?'':'none';
    // v102 — PARTNERS is OWNER-ONLY (moderators must never see comp/CRM). Gate it
    // on tlf_is_owner() AND the same 2FA hard-cut. A moderator (staff but not
    // owner) gets the Admin button but NOT Partners.
    if(ptBtn && ok2fa){
      let isOwner=false;
      try{const{data}=await sb.rpc('tlf_is_owner');isOwner=!!data;}catch(e){isOwner=false;}
      ptBtn.style.display=isOwner?'':'none';
      {const scp=document.getElementById('site-controls-panel');if(scp){scp.style.display=isOwner?'':'none';if(isOwner)tlfRenderSiteControls();}} // v154
    }
    if(isStaff && !ok2fa && nudge){
      // Only nudge when the reason is "no verified factor". If they DO have a
      // factor but aren't at AAL2 yet, the challenge screen is (or will be) up,
      // so a banner would be noise.
      const has=await userHasVerifiedFactor();
      if(!has)nudge.classList.add('show');
    }
    syncBurgerAdmin();
  }catch(e){/* not admin or unreachable — keep hidden */}
  // v119 (item 4) — once the Reports button is (maybe) visible, refresh its
  // open-report count highlight. Only for staff at AAL2; cheap, on-demand.
  if(isAdminUser)refreshReportBadge();
}

// v119 (item 4) — badge/highlight the Reports button when open reports exist.
// Fired on load (end of refreshAdminButton) and when the moderation panel closes
// (see closeAdmin). No polling. Safe to call when the button is hidden (no-op).
async function refreshReportBadge(count){
  const setUI=(n)=>{
    ['admin-btn','burger-admin'].forEach(bid=>{
      const b=document.getElementById(bid);if(!b)return;
      // reset to base label then re-apply
      const base=(bid==='admin-btn')?'🛡 Reports':'🛡 Reports';
      b.classList.toggle('has-reports',n>0);
      // strip any existing badge, then add a fresh one when n>0
      b.textContent=base;
      if(n>0){
        const s=document.createElement('span');s.className='report-count-badge';
        s.textContent=n>99?'99+':String(n);
        b.appendChild(document.createTextNode(' '));b.appendChild(s);
      }
    });
  };
  if(typeof count==='number'){setUI(count);return;}
  if(!isAdminUser){setUI(0);return;}
  try{
    const{reports}=await adminCall({action:'list_reports'});
    setUI(reports?.length||0);
  }catch(e){/* leave as-is on failure */}
}

/* ── v101.1 (Subscriptions Phase 3b) — 2FA CHALLENGE + STAFF ENFORCEMENT ────
   Two layers, both on Supabase native MFA (assurance levels aal1/aal2):
     LAYER 1 (mfaGate): anyone WITH a verified factor must enter a code at login
       / on reload before using the app. Blocks the whole app until AAL2.
     LAYER 2 (in refreshAdminButton): staff need a verified factor AND AAL2 to
       get staff powers; un-enrolled staff are nudged, not locked out of the app.
   Lockout-safe: the owner is already enrolled with a backup, and can clear a
   factor via the Supabase dashboard/SQL in the worst case. */

// True if the current user has at least one VERIFIED TOTP factor.
async function userHasVerifiedFactor(){
  try{
    const{data,error}=await sb.auth.mfa.listFactors();
    if(error)return false;
    return !!(data&&data.totp&&data.totp.length>0);
  }catch(e){return false;}
}

// True if the user is a staff member requirement helper: has a verified factor
// AND the session is at AAL2 (they've entered a code this session).
async function staffHas2FAatAAL2(){
  const has=await userHasVerifiedFactor();
  if(!has)return false;
  // v109 (#4) — a trusted device (passed 2FA within 24h) counts as satisfied for the
  // staff hard-cut, even though the reloaded session sits at AAL1. Without this the
  // grace would give app access but hide admin/partners — the exact annoyance it's
  // meant to remove. Still requires a VERIFIED factor (checked above), so a user with
  // no 2FA can never reach staff powers this way.
  if(deviceIsTrusted())return true;
  try{
    const{data,error}=await sb.auth.mfa.getAuthenticatorAssuranceLevel();
    if(error)return false;
    return data&&data.currentLevel==='aal2';
  }catch(e){return false;}
}

// LAYER 1 — the login/reload gate. Resolves to true when it's safe to proceed
// into the app, false when the challenge screen has been shown (caller should
// stop and NOT reveal the app). Only challenges when a factor exists and the
// session needs to step up from aal1 to aal2.
// ── v109 (#4) — 24h TRUSTED-DEVICE 2FA GRACE ───────────────────────────────
// After a user passes the 2FA challenge, this browser is trusted for 24h: they
// aren't re-challenged on reload/login within the window. Per-USER (keyed to the
// user id, so a different account on the same browser doesn't inherit it) and
// per-BROWSER (localStorage — a different browser or cleared storage re-challenges).
// Applies to ALL 2FA users. Trade-off (accepted): anyone with access to this browser
// skips 2FA — including staff powers — for 24h. Because Supabase ties staff powers to
// a real AAL2 session (unreachable without entering a code), the marker is also honoured
// as an AAL2-equivalent for the staff hard-cut during the window; otherwise the grace
// would grant app access but silently strip admin/partners, defeating its purpose.
const TLF_2FA_TRUST_MS=24*60*60*1000;         // 24 hours
function _tlf2faTrustKey(){return currentUser?('tlf_2fa_trusted_'+currentUser.id):null;}
function markDeviceTrusted(){
  const k=_tlf2faTrustKey();if(!k)return;
  try{localStorage.setItem(k,String(Date.now()+TLF_2FA_TRUST_MS));}catch(e){}
}
function deviceIsTrusted(){
  const k=_tlf2faTrustKey();if(!k)return false;
  try{
    const v=parseInt(localStorage.getItem(k)||'',10);
    if(!Number.isFinite(v))return false;
    if(Date.now()>=v){localStorage.removeItem(k);return false;} // expired → clear + re-challenge
    return true;
  }catch(e){return false;}
}
function clearDeviceTrust(){
  const k=_tlf2faTrustKey();if(!k)return;
  try{localStorage.removeItem(k);}catch(e){}
}

async function mfaGate(){
  if(!currentUser)return true;                 // anon / no user → nothing to do
  // v109 (#4) — within the 24h trusted-device window, skip the challenge entirely.
  if(deviceIsTrusted())return true;
  let aal;
  try{
    const{data,error}=await sb.auth.mfa.getAuthenticatorAssuranceLevel();
    if(error)return true;                       // can't tell → don't block the app
    aal=data;
  }catch(e){return true;}
  // nextLevel is what the session SHOULD reach given enrolled factors. A step-up
  // is required exactly when we're at aal1 but should be at aal2.
  if(aal&&aal.currentLevel==='aal1'&&aal.nextLevel==='aal2'){
    showMfaChallenge();
    return false;                               // caller must not proceed
  }
  return true;                                  // already aal2, or no factor → go
}

let _mfaBusy=false;
function showMfaChallenge(){
  // Keep the app hidden underneath while the challenge is up.
  const appEl=document.getElementById('app');
  if(appEl)appEl.style.display='none';
  document.getElementById('auth-screen').classList.add('hidden');
  const scr=document.getElementById('mfa-screen');
  scr.classList.add('show');
  const err=document.getElementById('mfa-err');if(err){err.classList.remove('show');err.textContent='';}
  const inp=document.getElementById('mfa-code');
  if(inp){inp.value='';setTimeout(()=>{try{inp.focus();}catch(e){}},60);}
  hideBootGate();                               // don't leave the boot spinner up
}
function hideMfaChallenge(){
  document.getElementById('mfa-screen').classList.remove('show');
}

// Submit the entered code. On success the session becomes AAL2; we then proceed
// into the app exactly as a normal authenticated boot would.
async function mfaSubmit(){
  if(_mfaBusy)return;
  const err=document.getElementById('mfa-err');
  const code=(document.getElementById('mfa-code').value||'').replace(/\s/g,'');
  err.classList.remove('show');err.textContent='';
  if(!/^\d{6}$/.test(code)){err.textContent='Enter the 6-digit code from your app.';err.classList.add('show');return;}
  _setMfaBusy(true);
  try{
    // Use the first verified TOTP factor for the challenge.
    const{data:lf,error:lfErr}=await sb.auth.mfa.listFactors();
    if(lfErr)throw lfErr;
    const factor=lf&&lf.totp&&lf.totp[0];
    if(!factor)throw new Error('no factor');
    const ch=await sb.auth.mfa.challenge({factorId:factor.id});
    if(ch.error)throw ch.error;
    const vr=await sb.auth.mfa.verify({factorId:factor.id,challengeId:ch.data.id,code});
    if(vr.error)throw vr.error;
    // Success → AAL2. v109 (#4) — trust this browser for 24h so reloads/logins within
    // the window don't re-challenge.
    markDeviceTrusted();
    // Proceed into the app.
    hideMfaChallenge();
    proceedAfterMfa();
  }catch(e){
    const m=(e&&e.message)?e.message:'that code didn’t match';
    err.textContent='Couldn’t verify: '+m+'. Codes refresh every 30s — try the newest.';
    err.classList.add('show');
  }finally{_setMfaBusy(false);}
}

// After a passed challenge, bring the app up. Mirrors the normal signed-in boot:
// reveal the app, restore work, refresh staff button (now AAL2, so it can show).
function proceedAfterMfa(){
  document.getElementById('app').style.display='block';
  // If a challenged user had a pending anon carry-over (they signed up from the
  // anon flow), run it now instead of restoring a cached/saved list.
  if(_mfaPendingCarry){
    _mfaPendingCarry=false;
    anonMode=false;applyAnonChrome();
    loadMyLists(true).then(()=>runAnonCarryOver());
    refreshAdminButton();
    redeemPendingInvite();
    return;
  }
  // Restore the working canvas the same way boot() does for a signed-in reload.
  let hasCache=false;try{hasCache=!!localStorage.getItem('tlm9');}catch(e){}
  if(hasCache){
    init();
    if(!currentListId){
      loadMyLists(true).then(()=>{if(myLists.length>0){const lastId=localStorage.getItem('tlf_last_list_id');const found=myLists.find(l=>l.id===lastId);loadList(found?found.id:myLists[0].id);}});
    }else{
      loadMyLists(true);
    }
  }else{
    init();loadMyLists();
  }
  refreshAdminButton();
  redeemPendingInvite();
}

async function mfaSignOut(){
  hideMfaChallenge();
  try{await signOut();}catch(e){location.reload();}
}

function _setMfaBusy(b){
  _mfaBusy=b;
  const btn=document.getElementById('mfa-verify-btn');
  if(btn){btn.disabled=b;btn.textContent=b?'Verifying…':'Verify';}
}

function openAdmin(){document.getElementById('admin-overlay').classList.add('show');loadReports();tlfSitePoll().then(()=>tlfRenderSiteControls());} // v154 — fresh switches
function closeAdmin(){document.getElementById('admin-overlay').classList.remove('show');refreshReportBadge();/* v119 item 4 */}

/* ── v101 (Subscriptions Phase 3a) — SECURITY / 2FA ENROLMENT ──────────────
   Enrolment + factor management only. The login CHALLENGE that enforces 2FA for
   staff is Phase 3b. Built entirely on Supabase's native MFA (sb.auth.mfa.*):
   no secret handling of our own. "Recovery" = a second (backup) TOTP factor,
   which is Supabase's recommended model (it returns no printable codes).
   This panel is available to ANY signed-in user; it changes nothing about login
   until 3b wires the challenge. */
let _secEnrollKind=null;      // 'primary' | 'backup' while an enrolment is open
let _secPendingFactorId=null; // the unverified factor id (so cancel can unenroll it)
let _secChallengeId=null;
let _secBusy=false;

function openAccount(){
  document.getElementById('account-overlay').classList.add('show');
  secCancelEnroll(true);   // ensure a clean state (no leftover open enrolment)
  populateAccountInfo();    // v116 — email, login method, premium/billing, password section
  secRefresh();
}
function closeAccount(){
  // Leaving with an enrolment half-open? Drop the pending unverified factor so
  // it doesn't linger on the account.
  secCancelEnroll(true);
  document.getElementById('account-overlay').classList.remove('show');
  // clear the change-password fields + message so they don't persist
  const p1=document.getElementById('acct-new-pw'),p2=document.getElementById('acct-new-pw2'),m=document.getElementById('acct-pw-msg');
  if(p1)p1.value='';if(p2)p2.value='';if(m){m.textContent='';m.className='acct-msg';}
}
// v116 — old names kept as aliases so existing callers (staff nudge, close-all list) still work.
function openSecurity(){openAccount();}
function closeSecurity(){closeAccount();}

// v116 — fill the Account section from the session: email, login method, premium
// status + expiry (from premium_access), and show the Password section only for
// email/password accounts (social logins have no password to change).
async function populateAccountInfo(){
  const setTxt=(id,v)=>{const el=document.getElementById(id);if(el)el.textContent=v;};
  // Email
  setTxt('acct-email', (currentUser&&currentUser.email)?currentUser.email:'—');
  // Login method — from the user's provider(s).
  let provider='email';
  try{
    const u=currentUser||{};
    provider=(u.app_metadata&&u.app_metadata.provider)||'email';
    // if multiple identities, list them
    if(Array.isArray(u.identities)&&u.identities.length){
      const provs=[...new Set(u.identities.map(i=>i.provider).filter(Boolean))];
      if(provs.length)provider=provs.join(', ');
    }
  }catch(e){}
  const provLabel={email:'Email & password',google:'Google',discord:'Discord',twitch:'Twitch'};
  const prettyProv=provider.split(',').map(p=>provLabel[p.trim()]||p.trim()).join(', ');
  setTxt('acct-provider', prettyProv||'—');
  // Password section only for email/password accounts.
  const isEmailAccount=/(^|,\s*)email(\s*,|$)/.test(provider) || provider==='email';
  const pwSec=document.getElementById('acct-password-section');
  if(pwSec)pwSec.style.display=isEmailAccount?'':'none';
  // Premium status + expiry.
  setTxt('acct-plan', IS_PREMIUM?'Premium':'Free');
  const expRow=document.getElementById('acct-expiry-row');
  if(expRow)expRow.style.display='none';
  try{
    if(IS_PREMIUM&&currentUser){
      const{data,error}=await sb.from('premium_access').select('expires_at').eq('user_id',currentUser.id).maybeSingle();
      if(!error&&data){
        if(data.expires_at){
          const d=new Date(data.expires_at);
          setTxt('acct-expiry', d.toLocaleDateString(undefined,{year:'numeric',month:'long',day:'numeric'}));
          if(expRow)expRow.style.display='';
        }else{
          // premium with no expiry (e.g. no-expiry grant)
          setTxt('acct-expiry','No expiry');
          if(expRow)expRow.style.display='';
        }
      }
    }
  }catch(e){/* premium_access read is best-effort; the plan line still shows */}
  // v117 (B3) — the Delete account section is hidden for owners (the function
  // blocks owner self-deletion anyway; no point showing a dead button).
  try{
    const danger=document.getElementById('acct-danger');
    if(danger){
      let isOwner=false;
      try{const{data}=await sb.rpc('tlf_is_owner');isOwner=!!data;}catch(e){isOwner=false;}
      danger.style.display=isOwner?'none':'';
    }
  }catch(e){}
}

// v116 — change password (email/password accounts only). Uses Supabase updateUser.
async function changePassword(){
  const p1=document.getElementById('acct-new-pw'),p2=document.getElementById('acct-new-pw2');
  const msg=document.getElementById('acct-pw-msg');
  const set=(t,ok)=>{if(msg){msg.textContent=t;msg.className='acct-msg '+(ok?'ok':'err');}};
  const pw=(p1&&p1.value)||'',pw2=(p2&&p2.value)||'';
  if(pw.length<6){set('Password must be at least 6 characters.',false);return;}
  if(pw!==pw2){set('The two passwords don\u2019t match.',false);return;}
  const btn=document.getElementById('acct-pw-btn');
  if(btn){btn.disabled=true;btn.textContent='Saving…';}
  try{
    const{error}=await sb.auth.updateUser({password:pw});
    if(error){set(error.message||'Could not change password.',false);}
    else{set('Password changed.',true);if(p1)p1.value='';if(p2)p2.value='';}
  }catch(e){set('Something went wrong. Please try again.',false);}
  if(btn){btn.disabled=false;btn.textContent='Change password';}
}

// ── v117 (B3) — DELETE ACCOUNT (frontend) ──────────────────────────────────
function openDeleteAccount(){
  const inp=document.getElementById('del-confirm-input');
  const err=document.getElementById('del-err');
  const btn=document.getElementById('del-final-btn');
  if(inp)inp.value='';
  if(err)err.textContent='';
  if(btn){btn.disabled=true;btn.textContent='Delete my account';}
  document.getElementById('delete-account-overlay').classList.add('show');
  setTimeout(()=>{if(inp)inp.focus();},60);
}
function closeDeleteAccount(){
  document.getElementById('delete-account-overlay').classList.remove('show');
}
// The final button unlocks only when the user has typed exactly DELETE.
function onDeleteConfirmInput(){
  const inp=document.getElementById('del-confirm-input');
  const btn=document.getElementById('del-final-btn');
  const ok=((inp&&inp.value)||'').trim().toUpperCase()==='DELETE';
  if(btn)btn.disabled=!ok;
}
let _deleting=false;
async function confirmDeleteAccount(){
  if(_deleting)return;
  const inp=document.getElementById('del-confirm-input');
  const err=document.getElementById('del-err');
  const btn=document.getElementById('del-final-btn');
  if(((inp&&inp.value)||'').trim().toUpperCase()!=='DELETE'){if(err)err.textContent='Please type DELETE to confirm.';return;}
  _deleting=true;
  if(btn){btn.disabled=true;btn.textContent='Deleting…';}
  if(err)err.textContent='';
  try{
    const{data:{session}}=await sb.auth.getSession();
    if(!session){if(err)err.textContent='Your session has expired. Please sign in again.';_deleting=false;if(btn){btn.textContent='Delete my account';}return;}
    const resp=await fetch(SUPABASE_URL+'/functions/v1/delete-account',{
      method:'POST',
      headers:{'Authorization':'Bearer '+session.access_token,'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY},
      body:JSON.stringify({action:'delete'})
    });
    let out={};try{out=await resp.json();}catch(e){}
    if(!resp.ok||!out.ok){
      if(err)err.textContent=(out&&out.error)?out.error:'Could not delete your account. Please try again.';
      _deleting=false;if(btn){btn.disabled=false;btn.textContent='Delete my account';}
      return;
    }
    // Success — the account is gone server-side. Clear the local session and
    // drop back to the anonymous landing view (manual ranking).
    try{await sb.auth.signOut();}catch(e){}
    closeDeleteAccount();
    closeAccount();
    try{localStorage.removeItem('tlm9');}catch(e){} // clear the signed-in canvas cache
    enterAnonMode();
    showFlash('Your account has been deleted.');
  }catch(e){
    if(err)err.textContent='Something went wrong. Please try again.';
    _deleting=false;if(btn){btn.disabled=false;btn.textContent='Delete my account';}
  }
}

// List enrolled factors and paint status. Verified TOTP factors are "on".
async function secRefresh(){
  const pill=document.getElementById('sec-status-pill');
  const listEl=document.getElementById('sec-factor-list');
  const addPrimary=document.getElementById('sec-add-primary-btn');
  const addBackup=document.getElementById('sec-add-backup-btn');
  const nudge=document.getElementById('sec-backup-nudge');
  pill.className='sec-pill';pill.textContent='Checking…';
  listEl.innerHTML='';
  let factors=[];
  try{
    const{data,error}=await sb.auth.mfa.listFactors();
    if(error)throw error;
    // data.totp = verified TOTP factors; data.all = every factor incl. unverified.
    factors=(data&&data.totp)?data.totp:[];
  }catch(e){
    pill.className='sec-pill off';pill.textContent='⚠ Couldn’t load status';
    listEl.innerHTML='<div class="sec-note">Something went wrong reading your security settings. Try Refresh.</div>';
    return;
  }
  const count=factors.length;
  if(count>0){pill.className='sec-pill on';pill.textContent='✓ Two-factor is ON';}
  else{pill.className='sec-pill off';pill.textContent='Two-factor is OFF';}

  // Paint each factor. The first verified factor reads as "primary", any further
  // ones as "backup" — purely a display convention (Supabase treats them alike).
  factors.forEach((f,i)=>{
    const row=document.createElement('div');row.className='sec-factor';
    const name=(f.friendly_name&&String(f.friendly_name).trim())||('Authenticator '+(i+1));
    const tag=i===0?'<span class="sec-factor-tag">primary</span>':'<span class="sec-factor-tag backup">backup</span>';
    const nmeDiv=document.createElement('div');nmeDiv.className='sec-factor-name';
    nmeDiv.innerHTML='🔑 <span class="sec-fn-label"></span> '+tag;
    nmeDiv.querySelector('.sec-fn-label').textContent=name; // textContent = no HTML injection from friendly_name
    const rm=document.createElement('button');rm.className='sec-factor-remove';rm.textContent='Remove';
    rm.onclick=()=>secRemoveFactor(f.id,name);
    row.appendChild(nmeDiv);row.appendChild(rm);
    listEl.appendChild(row);
  });

  // Button visibility: no factors → offer "Set up". Exactly one → nudge to add a
  // backup. Two+ → both add buttons hidden (enough redundancy; they can still
  // remove then re-add). Add-primary shown only when there are zero.
  addPrimary.style.display = count===0 ? '' : 'none';
  addBackup.style.display  = count===1 ? '' : 'none';
  nudge.style.display      = count===1 ? '' : 'none';
}

// Begin enrolling a new factor: create it (unverified), show its QR + secret.
async function secStartEnroll(kind){
  if(_secBusy)return;
  _secEnrollKind=kind;
  const head=document.getElementById('sec-enroll-head');
  const enrollEl=document.getElementById('sec-enroll');
  const errEl=document.getElementById('sec-enroll-err');
  errEl.classList.remove('show');errEl.textContent='';
  head.textContent = kind==='backup' ? 'Add a backup authenticator' : 'Set up your authenticator';
  // Friendly name helps you tell factors apart later; include a timestamp so a
  // re-add doesn't collide with a name Supabase still remembers.
  const friendly=(kind==='backup'?'Backup':'Primary')+' • '+new Date().toISOString().slice(0,10);
  _setSecBusy(true);
  try{
    const{data,error}=await sb.auth.mfa.enroll({factorType:'totp',issuer:'Tier List Forge',friendlyName:friendly});
    if(error)throw error;
    _secPendingFactorId=data.id;
    // Render QR. Supabase returns an SVG string in data.totp.qr_code (may be a
    // data: URI or raw <svg>). Handle both; fall back to the secret if neither.
    const qrWrap=document.getElementById('sec-qr');
    const raw=data.totp&&data.totp.qr_code?data.totp.qr_code:'';
    qrWrap.innerHTML='';
    if(raw&&raw.trim().slice(0,4).toLowerCase()==='<svg'){qrWrap.innerHTML=raw;}
    else if(raw){const img=document.createElement('img');img.alt='QR code';img.src=raw;qrWrap.appendChild(img);}
    document.getElementById('sec-secret').textContent=(data.totp&&data.totp.secret)?data.totp.secret:'(use the QR code)';
    document.getElementById('sec-code').value='';
    enrollEl.style.display='';
    enrollEl.scrollIntoView({behavior:'smooth',block:'nearest'});
    setTimeout(()=>{try{document.getElementById('sec-code').focus();}catch(e){}},60);
  }catch(e){
    _secPendingFactorId=null;
    showFlash('⚠️ Couldn’t start setup: '+(e&&e.message?e.message:'try again'));
  }finally{_setSecBusy(false);}
}

// Verify the 6-digit code against the pending factor. On success it becomes
// verified (2FA is now live for that factor).
async function secVerifyEnroll(){
  if(_secBusy||!_secPendingFactorId)return;
  const code=(document.getElementById('sec-code').value||'').replace(/\s/g,'');
  const errEl=document.getElementById('sec-enroll-err');
  errEl.classList.remove('show');errEl.textContent='';
  if(!/^\d{6}$/.test(code)){errEl.textContent='Enter the 6-digit code from your app.';errEl.classList.add('show');return;}
  _setSecBusy(true);
  try{
    const ch=await sb.auth.mfa.challenge({factorId:_secPendingFactorId});
    if(ch.error)throw ch.error;
    _secChallengeId=ch.data.id;
    const vr=await sb.auth.mfa.verify({factorId:_secPendingFactorId,challengeId:_secChallengeId,code});
    if(vr.error)throw vr.error;
    // Success — the factor is verified. Clear pending state WITHOUT unenrolling.
    _secPendingFactorId=null;_secChallengeId=null;_secEnrollKind=null;
    document.getElementById('sec-enroll').style.display='none';
    showFlash('✓ Two-factor authentication is on.');
    secRefresh();
  }catch(e){
    const m=(e&&e.message)?e.message:'that code didn’t match';
    errEl.textContent='Couldn’t verify: '+m+'. The code changes every 30s — try the newest one.';
    errEl.classList.add('show');
  }finally{_setSecBusy(false);}
}

// Cancel an in-progress enrolment. Because sb.auth.mfa.enroll creates an
// UNVERIFIED factor immediately, we unenroll the pending one so it doesn't
// linger. quiet=true skips the flash (used on open/close housekeeping).
async function secCancelEnroll(quiet){
  const enrollEl=document.getElementById('sec-enroll');
  if(enrollEl)enrollEl.style.display='none';
  const pending=_secPendingFactorId;
  _secPendingFactorId=null;_secChallengeId=null;_secEnrollKind=null;
  if(pending){
    try{await sb.auth.mfa.unenroll({factorId:pending});}catch(e){/* best-effort cleanup */}
    if(!quiet)secRefresh();
  }
}

// Remove a verified factor (with confirm). If it's the last one, 2FA goes off.
async function secRemoveFactor(factorId,name){
  const ok=await tlfConfirm({
    title:'Remove this authenticator?',
    message:'“'+name+'” will no longer generate sign-in codes. If it’s your only authenticator, two-factor authentication will be turned off.',
    confirmText:'Remove',danger:true
  });
  if(!ok)return;
  try{
    const{error}=await sb.auth.mfa.unenroll({factorId});
    if(error)throw error;
    showFlash('Authenticator removed.');
    secRefresh();
  }catch(e){
    showFlash('⚠️ Couldn’t remove it: '+(e&&e.message?e.message:'try again'));
  }
}

function _setSecBusy(b){
  _secBusy=b;
  const panel=document.getElementById('sec-enroll');
  if(panel)panel.classList.toggle('sec-busy',b);
}

async function adminCall(payload){
  const token=await getAccessToken();
  if(!token)throw new Error('Not signed in');
  const resp=await fetch(`${SUPABASE_URL}/functions/v1/admin-moderation`,{
    method:'POST',
    headers:{'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY,'Authorization':'Bearer '+token},
    body:JSON.stringify(payload)
  });
  const j=await resp.json().catch(()=>({}));
  if(!resp.ok)throw new Error(j.error||('Request failed ('+resp.status+')'));
  return j;
}

/* ── v102 (Subscriptions Phase 4) — PARTNERS / COMP admin ───────────────────
   Direct partner grant: make a KNOWN user premium for free (no checkout, no
   Stripe). Talks to the owner-gated manage-premium Edge Function, which writes
   the premium_access table (source='manual'). Owner-only (same ADMIN_USER_IDS
   gate as moderation) + behind 2FA. This is a separate overlay from moderation. */
async function premiumCall(payload){
  const token=await getAccessToken();
  if(!token)throw new Error('Not signed in');
  const resp=await fetch(`${SUPABASE_URL}/functions/v1/manage-premium`,{
    method:'POST',
    headers:{'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY,'Authorization':'Bearer '+token},
    body:JSON.stringify(payload)
  });
  const j=await resp.json().catch(()=>({}));
  if(!resp.ok)throw new Error(j.error||('Request failed ('+resp.status+')'));
  return j;
}

function openPartners(){
  document.getElementById('partners-overlay').classList.add('show');
  ptTab('partners');
  stResetLookup();
  loadPartnersList();
}
function closePartners(){document.getElementById('partners-overlay').classList.remove('show');}

// ── tabs ───────────────────────────────────────────────────────────────────
let _ptFilter='all'; // v105 — current lifecycle filter
let _ptPartners=[];  // v105 — cached partner list for client-side filtering
function ptTab(name){
  ['partners','staff'].forEach(t=>{
    document.getElementById('pt-pane-'+t).style.display = (t===name)?'':'none';
  });
  document.querySelectorAll('.pt-tab').forEach(b=>{
    b.classList.toggle('pt-tab-on', b.getAttribute('data-tab')===name);
  });
  if(name==='partners'){ptCloseDetail();loadPartnersList();}
  else if(name==='staff'){loadRoles();}
}
function ptFilter(f){
  _ptFilter=f;
  document.querySelectorAll('.pt-filter').forEach(b=>b.classList.toggle('pt-filter-on',b.getAttribute('data-f')===f));
  ptRenderPartnerList();
}

// ── Partner records (CRM list + detail) ────────────────────────────────────
function ptLifecyclePill(lc){
  const label={active:'active',expiring:'expiring',expired:'expired',paused:'paused',prospect:'prospect'}[lc]||lc;
  return '<span class="pt-lc '+lc+'">'+label+'</span>';
}
async function loadPartnersList(){
  const cont=document.getElementById('pt-partner-list');
  cont.innerHTML='<div class="admin-empty">Loading…</div>';
  try{
    const{partners}=await premiumCall({action:'partners_list'});
    _ptPartners=partners||[];
    ptRenderPartnerList();
  }catch(e){
    cont.innerHTML='<div class="admin-empty">⚠️ '+(e&&e.message?e.message:'Could not load')+'</div>';
  }
}
function ptRenderPartnerList(){
  const cont=document.getElementById('pt-partner-list');
  const lc=p=>p.computed_lifecycle||p.lifecycle||'prospect';
  const list=(_ptFilter==='all')?_ptPartners:_ptPartners.filter(p=>lc(p)===_ptFilter);
  document.getElementById('pt-list-count').textContent=list.length+(list.length===1?' partner':' partners')+(_ptFilter!=='all'?(' · '+_ptFilter):'');
  if(!_ptPartners.length){cont.innerHTML='<div class="admin-empty">No partners yet. Create one with “＋ New partner”.</div>';return;}
  if(!list.length){cont.innerHTML='<div class="admin-empty">No partners in “'+_ptFilter+'”.</div>';return;}
  cont.innerHTML='';
  list.forEach(p=>cont.appendChild(ptPartnerCard(p)));
}
function ptPartnerCard(p){
  const card=document.createElement('div');card.className='pt-pcard';
  const main=document.createElement('div');main.className='pt-pcard-main';
  const name=document.createElement('div');name.className='pt-pcard-name';
  name.textContent=p.display_name||'(unnamed partner)';
  const sub=document.createElement('div');sub.className='pt-pcard-sub';
  let statusTxt='no partner status';
  if(p.comp&&p.comp.active_now)statusTxt='partner status'+(p.comp.expires_at?(' · until '+new Date(p.comp.expires_at).toLocaleDateString()):' · no expiry');
  else if(p.comp)statusTxt='partner status (inactive)';
  const lc=p.computed_lifecycle||p.lifecycle||'prospect';
  // v107 — show the LINKED ACCOUNT's real email (their login), not the contact
  // email. Unlinked partners show "not linked" instead.
  const acct=p.linked_email?ptEsc(p.linked_email):'not linked';
  sub.innerHTML=ptLifecyclePill(lc)+'<span>'+acct+'</span><span>·</span><span>'+statusTxt+'</span>';
  main.appendChild(name);main.appendChild(sub);
  const arrow=document.createElement('div');arrow.className='pt-pcard-arrow';arrow.textContent='›';
  card.appendChild(main);card.appendChild(arrow);
  card.onclick=()=>ptOpenDetail(p.id);
  return card;
}
function ptEsc(s){const d=document.createElement('div');d.textContent=s==null?'':String(s);return d.innerHTML;}

let _pdId=null; // current partner id in the detail view (null = new, not yet created)
let _pdLookedUp=null; // {user_id,email} from a confirmed email lookup in the detail form
let _pendingInvite=null; // v104 — an invite code awaiting redemption after auth
async function redeemPendingInvite(){
  if(!_pendingInvite)return;
  const code=_pendingInvite;_pendingInvite=null; // consume once
  // v105 — CONFIRMATION step: show the exact account email before doing anything.
  let email='this account';
  try{const{data:{user}}=await sb.auth.getUser();if(user&&user.email)email=user.email;}catch(e){}
  const ok=await tlfConfirm({
    title:'Activate your partner status?',
    message:'This activates partner status (free premium) on the account “'+email+'” and links it to this partnership. It can’t be moved to a different account afterwards. If this isn’t the right account, cancel and sign in with the correct one.',
    confirmText:'Activate partner status',cancelText:'Cancel'
  });
  if(!ok){
    // Don't consume the code — let them retry on the right account. Re-stash it.
    _pendingInvite=code;
    showFlash('Cancelled — your invite code is still valid. Sign in with the right account and click the link again.');
    return;
  }
  try{
    const r=await premiumCall({action:'redeem',code});
    const until=r.expires_at?(' until '+new Date(r.expires_at).toLocaleDateString()):' (no expiry)';
    showFlash('🎉 Your partner status is active'+until+' — enjoy your premium!');
    try{await loadAppConfig();}catch(e){}
  }catch(e){
    showFlash('⚠️ Invite code: '+(e&&e.message?e.message:'could not be redeemed'));
  }
}

// ── account-box search: find an account to LINK (separate from contact email) ─
// _pdLookedUp holds a confirmed, LINKABLE result (null if none / already-linked).
function pdResetLookup(){
  _pdLookedUp=null;
  const r=document.getElementById('pd-acct-search-result');
  if(r){r.innerHTML='';r.className='pt-lookup-result';}
}
async function pdAcctSearch(){
  const inp=document.getElementById('pd-acct-search');
  const email=(inp&&inp.value||'').trim();
  const r=document.getElementById('pd-acct-search-result');
  _pdLookedUp=null;
  if(!email){r.textContent='Enter the account’s login email to search.';r.className='pt-lookup-result err';return;}
  const btn=document.getElementById('pd-acct-search-btn');btn.disabled=true;btn.textContent='…';
  try{
    const res=await premiumCall({action:'lookup',email});
    if(!res.found){
      r.textContent='No account found for that email. (They may not have signed up yet — send them an invite code instead.)';
      r.className='pt-lookup-result';
    }else if(res.linked_partner_id){
      // already linked to another partner — warn, name it, offer a jump, no link.
      r.className='pt-lookup-result err';
      r.innerHTML='';
      const span=document.createElement('span');
      span.textContent='⚠️ '+res.email+' is already linked to partner: ';
      const a=document.createElement('a');a.href='#';a.className='pt-jump-link';a.textContent=res.linked_partner_name;
      a.onclick=(ev)=>{ev.preventDefault();ptJumpToPartner(res.linked_partner_id);};
      r.appendChild(span);r.appendChild(a);
    }else{
      // linkable
      _pdLookedUp={user_id:res.user_id,email:res.email};
      r.className='pt-lookup-result ok';
      r.innerHTML='';
      const span=document.createElement('span');span.textContent='✓ Found account: '+res.email+' — ';
      const b=document.createElement('button');b.className='btn btn-primary pt-inline-link-btn';b.textContent='Link this account';
      b.onclick=()=>ptLinkConfirmed();
      r.appendChild(span);r.appendChild(b);
    }
  }catch(e){
    r.textContent='⚠️ '+(e&&e.message?e.message:'Search failed');r.className='pt-lookup-result err';
  }finally{btn.disabled=false;btn.textContent='Look up';}
}
// Jump to another partner's profile (from the "already linked" warning). If the
// current record is an unsaved new partner, confirm before leaving.
async function ptJumpToPartner(id){
  if(!_pdId){
    const ok=await tlfConfirm({title:'Leave this new partner?',message:'You haven’t created this partner yet. Leaving will discard what you’ve typed. Continue?',confirmText:'Leave',cancelText:'Stay'});
    if(!ok)return;
  }
  ptOpenDetail(id);
}

// Reflect the "created vs not-yet-created" state across the detail view: before
// creation, grant/codes/link are locked and the primary button says "Create".
function ptSetCreatedState(created){
  const btn=document.getElementById('pd-save-btn');
  btn.textContent = created ? 'Save changes' : 'Create partner';
  btn.disabled=false;   // v107 — always re-enable; the stuck-Save bug was that
                        // success re-rendered here but never cleared disabled.
  document.getElementById('pd-delete-btn').style.display = created ? '' : 'none';
  document.getElementById('pd-invite-new-btn').style.display = created ? '' : 'none';
}

function ptNewPartner(){
  _pdId=null;_pdLookedUp=null;
  document.getElementById('pd-name').value='';
  document.getElementById('pd-email').value='';
  document.getElementById('pd-note').value='';
  document.getElementById('pd-lifecycle-override').value='';
  document.getElementById('pd-channels').innerHTML='';
  document.getElementById('pd-status-line').innerHTML='<span class="pt-status-new">New partner — fill in the details and click “Create partner” to unlock grants &amp; invite codes.</span>';
  document.getElementById('pd-account').innerHTML='<div class="pt-box-empty">Create the partner first, then link an account and grant partner status here.</div>';
  document.getElementById('pd-invites-list').innerHTML='<div class="pt-box-empty">Create the partner first to generate invite codes.</div>';
  document.getElementById('pd-invite-form').style.display='none';
  pdResetLookup();ptPdMsg('');
  ptSetCreatedState(false);
  _showDetail(true);
}
async function ptOpenDetail(id){
  ptPdMsg('');
  try{
    const{partner}=await premiumCall({action:'partner_get',id});
    _pdId=partner.id;_pdLookedUp=null;
    document.getElementById('pd-name').value=partner.display_name||'';
    document.getElementById('pd-email').value=partner.email||'';
    document.getElementById('pd-note').value=partner.note||'';
    // status override: only 'paused'/'prospect' are manual; else 'Automatic'
    const stored=partner.lifecycle||'prospect';
    document.getElementById('pd-lifecycle-override').value=(stored==='paused'||stored==='prospect')?stored:'';
    // computed status line
    const lc=partner.computed_lifecycle||stored;
    document.getElementById('pd-status-line').innerHTML='Status: '+ptLifecyclePill(lc)+(lc!==stored?' <span class="pt-hint">(auto)</span>':'');
    // channels
    const chWrap=document.getElementById('pd-channels');chWrap.innerHTML='';
    (partner.channels||[]).forEach(c=>ptAddChannelRow(c.label,c.url));
    pdResetLookup();
    ptRenderAccountBox(partner);
    loadInvites();
    ptSetCreatedState(true);
    _showDetail(true);
  }catch(e){
    showFlash('⚠️ '+(e&&e.message?e.message:'Could not open partner'));
  }
}
function _showDetail(on){
  document.getElementById('pt-list-view').style.display=on?'none':'';
  document.getElementById('pt-detail-view').style.display=on?'':'none';
}
function ptCloseDetail(){_showDetail(false);loadPartnersList();}
function ptPdMsg(t,kind){const m=document.getElementById('pd-msg');if(!m)return;m.textContent=t;m.className='pt-msg '+(kind||'');}

function ptRenderAccountBox(partner){
  const box=document.getElementById('pd-account');
  if(!partner.user_id){
    // Not linked — self-contained "find account by login email" search.
    box.innerHTML=
      '<div class="pt-box-empty">No account linked yet. Search for the creator’s account by the email they signed up with, then link it — that’s who gets partner status.</div>'+
      '<div class="pt-acct-actions">'+
        '<input id="pd-acct-search" type="email" autocomplete="off" placeholder="account login email" class="pt-link-input" onkeydown="if(event.key===\'Enter\'){event.preventDefault();pdAcctSearch();}" oninput="pdResetLookup()">'+
        '<button class="btn btn-secondary" id="pd-acct-search-btn" onclick="pdAcctSearch()">Look up</button>'+
      '</div>'+
      '<div class="pt-lookup-result" id="pd-acct-search-result"></div>';
    return;
  }
  // Linked. Show the LINKED ACCOUNT's real email distinctly from contact email.
  box.innerHTML='';
  const l=document.createElement('div');l.className='pt-acct-line';
  const linked=partner.linked_email||'(account '+String(partner.user_id).slice(0,8)+'…)';
  // v107 — "partner status" wording + label WHERE the status came from (source),
  // so pre-existing status (e.g. from a redeemed invite) is obvious vs. a manual
  // grant — this is what tells you linking didn't secretly grant anything.
  const srcLabel={manual:'granted manually',invite_code:'from a redeemed invite code',stripe:'from a paid subscription',discount:'from a discount code'};
  let comp='No partner status on this account yet.';
  if(partner.comp&&partner.comp.active_now){
    const src=srcLabel[partner.comp.source]||('source: '+ptEsc(partner.comp.source||'unknown'));
    comp='✓ Partner status active'+(partner.comp.expires_at?(' until '+new Date(partner.comp.expires_at).toLocaleDateString()):' (no expiry)')+' <span class="pt-hint">('+src+')</span>';
  }
  else if(partner.comp){
    const src=srcLabel[partner.comp.source]||('source: '+ptEsc(partner.comp.source||'unknown'));
    comp='Partner status inactive (revoked or expired). <span class="pt-hint">('+src+')</span>';
  }
  l.innerHTML='<strong>Linked account:</strong> '+ptEsc(linked)+'<br><span class="pt-hint">(their actual login — distinct from the contact email above)</span><br>'+comp;
  box.appendChild(l);
  // v108 — Unlink: detach the wrong account (revokes its partner status too).
  const unlinkRow=document.createElement('div');unlinkRow.className='pt-acct-actions';
  unlinkRow.innerHTML='<button class="pt-revoke" onclick="ptUnlinkAccount()">Unlink this account</button>'+
    '<span class="pt-hint">Detaches this account and removes its partner status, so you can link the correct one.</span>';
  box.appendChild(unlinkRow);
  // inline grant form (replaces the old prompt())
  const form=document.createElement('div');form.className='pt-grant-inline';
  form.innerHTML=
    '<div class="pt-inv-grid">'+
      '<div class="pt-field"><label>Grant partner status</label>'+
        '<select id="pg-mode" onchange="ptSyncProfileGrant()">'+
          '<option value="months">For a number of months</option>'+
          '<option value="date">Until a specific date</option>'+
          '<option value="none">No expiry</option>'+
        '</select></div>'+
      '<div class="pt-field" id="pg-months-wrap"><label>Months</label><input id="pg-months" type="number" min="1" max="120" value="12"></div>'+
      '<div class="pt-field" id="pg-date-wrap" style="display:none"><label>Status until</label><input id="pg-date" type="date"></div>'+
    '</div>'+
    '<div class="pt-acct-actions">'+
      '<button class="btn btn-primary" id="pg-grant-btn" onclick="ptProfileGrant(\''+partner.user_id+'\')">'+((partner.comp&&partner.comp.active_now)?'Extend / regrant':'Grant partner status')+'</button>'+
      ((partner.comp&&partner.comp.active_now)?('<button class="pt-revoke" onclick="ptProfileRevoke(\''+partner.user_id+'\')">Revoke</button>'):'')+
      '<span class="pt-msg" id="pg-msg"></span>'+
    '</div>';
  box.appendChild(form);
  ptSyncProfileGrant();
}
function ptSyncProfileGrant(){
  const mode=document.getElementById('pg-mode');if(!mode)return;
  document.getElementById('pg-months-wrap').style.display=mode.value==='months'?'':'none';
  document.getElementById('pg-date-wrap').style.display=mode.value==='date'?'':'none';
}
async function ptProfileGrant(userId){
  const mode=document.getElementById('pg-mode').value;
  const payload={action:'grant',userId};
  const msg=document.getElementById('pg-msg');
  const setMsg=(t,k)=>{if(msg){msg.textContent=t;msg.className='pt-msg '+(k||'');}};
  if(mode==='none')payload.noExpiry=true;
  else if(mode==='months'){
    const m=parseInt(document.getElementById('pg-months').value,10);
    if(!(m>=1&&m<=120)){setMsg('Months must be 1–120.','err');return;}
    payload.months=m;
  }else if(mode==='date'){
    const d=document.getElementById('pg-date').value;
    if(!d){setMsg('Pick a date.','err');return;}
    payload.expiresAt=d;
  }
  const btn=document.getElementById('pg-grant-btn');btn.disabled=true;btn.textContent='Granting…';
  try{
    await premiumCall(payload);
    showFlash('✓ Partner status granted.');
    if(_pdId)ptOpenDetail(_pdId);
  }catch(e){setMsg('⚠️ '+(e&&e.message?e.message:'Grant failed'),'err');btn.disabled=false;}
}
async function ptProfileRevoke(userId){
  const ok=await tlfConfirm({title:'Revoke partner status?',message:'This account will drop back to the free limits. Their saved lists are kept. You can grant again later.',confirmText:'Revoke',danger:true});
  if(!ok)return;
  try{await premiumCall({action:'revoke',userId});showFlash('Partner status revoked.');if(_pdId)ptOpenDetail(_pdId);}
  catch(e){showFlash('⚠️ '+(e&&e.message?e.message:'Revoke failed'));}
}
async function ptLinkConfirmed(){
  if(!_pdId||!_pdLookedUp)return;
  try{
    await premiumCall({action:'partner_link',id:_pdId,userId:_pdLookedUp.user_id});
    showFlash('✓ Account linked.');
    ptOpenDetail(_pdId);
  }catch(e){showFlash('⚠️ '+(e&&e.message?e.message:'Link failed'));}
}
async function ptUnlinkAccount(){
  if(!_pdId)return;
  const ok=await tlfConfirm({
    title:'Unlink this account?',
    message:'This detaches the account from this partner and removes its partner status (it drops back to a regular free account). The partner record stays, so you can link the correct account. Continue?',
    confirmText:'Unlink',danger:true
  });
  if(!ok)return;
  try{
    await premiumCall({action:'partner_unlink',id:_pdId});
    showFlash('Account unlinked and partner status removed.');
    ptOpenDetail(_pdId);
  }catch(e){showFlash('⚠️ '+(e&&e.message?e.message:'Unlink failed'));}
}

// ── invite codes (Phase 6) ─────────────────────────────────────────────────
function ptToggleInviteForm(forceClose){
  const form=document.getElementById('pd-invite-form');
  const open=(forceClose===true)?false:(form.style.display==='none');
  form.style.display=open?'':'none';
  document.getElementById('pd-invite-new-btn').style.display=open?'none':'';
  if(open){document.getElementById('iv-msg').textContent='';ptSyncInviteInputs();}
}
function ptSyncInviteInputs(){
  const mode=document.getElementById('iv-grant-mode').value;
  document.getElementById('iv-months-wrap').style.display=mode==='months'?'':'none';
  document.getElementById('iv-grant-date-wrap').style.display=mode==='date'?'':'none';
}
async function loadInvites(){
  const cont=document.getElementById('pd-invites-list');
  if(!_pdId){cont.innerHTML='<div class="pt-box-empty">Save this partner first to create invite codes.</div>';
    document.getElementById('pd-invite-new-btn').style.display='none';return;}
  document.getElementById('pd-invite-new-btn').style.display='';
  cont.innerHTML='<div class="pt-box-empty">Loading…</div>';
  try{
    const{invites}=await premiumCall({action:'invites_list',partnerId:_pdId});
    if(!invites||!invites.length){cont.innerHTML='<div class="pt-box-empty">No invite codes yet.</div>';return;}
    cont.innerHTML='';
    invites.forEach(iv=>cont.appendChild(ptInviteRow(iv)));
  }catch(e){cont.innerHTML='<div class="pt-box-empty">⚠️ '+(e&&e.message?e.message:'Could not load')+'</div>';}
}
function ptInviteRow(iv){
  const row=document.createElement('div');row.className='pt-inv-row';
  const left=document.createElement('div');left.className='pt-inv-left';
  const codeEl=document.createElement('div');codeEl.className='pt-inv-code';codeEl.textContent=iv.code;
  const meta=document.createElement('div');meta.className='pt-inv-meta';
  // grant description
  let grant='no expiry';
  if(iv.grant_months)grant=iv.grant_months+' months';
  else if(iv.grant_expires_at)grant='until '+new Date(iv.grant_expires_at).toLocaleDateString();
  // status
  const clsMap={active:'on',used:'off',expired:'off'};
  const cls=clsMap[iv.status]||'';
  const uses=iv.max_uses>1?(' · '+iv.uses_count+'/'+iv.max_uses+' used'):'';
  const codeExp=iv.code_expires_at?(' · code exp '+new Date(iv.code_expires_at).toLocaleDateString()):' · code never expires';
  meta.innerHTML='<span class="pt-pill '+cls+'">'+iv.status+'</span> <span>grants '+grant+uses+codeExp+'</span>';
  left.appendChild(codeEl);left.appendChild(meta);
  if(iv.locked_email){const le=document.createElement('div');le.className='pt-row-note';le.textContent='🔒 only '+iv.locked_email;left.appendChild(le);}
  row.appendChild(left);
  const acts=document.createElement('div');acts.className='pt-inv-acts';
  const copy=document.createElement('button');copy.className='pt-inv-btn';copy.textContent='Copy link';
  copy.onclick=()=>ptCopyInvite(iv.code,copy);
  const del=document.createElement('button');del.className='pt-inv-btn pt-inv-del';del.textContent='✕';
  del.title='Delete code';del.onclick=()=>ptDeleteInvite(iv.id,iv.code);
  acts.appendChild(copy);acts.appendChild(del);
  row.appendChild(acts);
  return row;
}
function ptInviteLink(code){return window.location.origin+window.location.pathname+'?invite='+encodeURIComponent(code);}
function ptCopyInvite(code,btn){
  const link=ptInviteLink(code);
  // v107 — inline feedback ON the button (the top-right flash is hidden behind
  // the darkened Partners overlay, so confirm right where the click happened).
  const flash=()=>{
    if(!btn)return;
    const orig=btn.textContent;
    btn.textContent='✓ Copied!';btn.classList.add('pt-inv-btn-ok');
    setTimeout(()=>{btn.textContent=orig;btn.classList.remove('pt-inv-btn-ok');},1400);
  };
  if(navigator.clipboard&&navigator.clipboard.writeText){
    navigator.clipboard.writeText(link).then(flash).catch(()=>prompt('Copy this invite link:',link));
  }else{prompt('Copy this invite link:',link);}
}
async function ptCreateInvite(){
  if(!_pdId){showFlash('Save the partner first.');return;}
  const mode=document.getElementById('iv-grant-mode').value;
  const payload={action:'invite_create',partnerId:_pdId};
  if(mode==='none')payload.grant_no_expiry=true;
  else if(mode==='months'){
    const m=parseInt(document.getElementById('iv-months').value,10);
    if(!(m>=1&&m<=120)){ptIvMsg('Grant months must be 1–120.','err');return;}
    payload.grant_months=m;
  }else if(mode==='date'){
    const d=document.getElementById('iv-grant-date').value;
    if(!d){ptIvMsg('Pick the premium expiry date.','err');return;}
    payload.grant_expires_at=d;
  }
  const days=parseInt(document.getElementById('iv-code-days').value,10);
  if(!(days>=0&&days<=3650)){ptIvMsg('Code expiry days must be 0–3650 (0 = never).','err');return;}
  payload.codeExpiryDays=days;
  const le=(document.getElementById('iv-locked-email').value||'').trim();
  if(le)payload.lockedEmail=le;
  const btn=document.getElementById('iv-create-btn');btn.disabled=true;btn.textContent='Generating…';
  try{
    const r=await premiumCall(payload);
    ptIvMsg('✓ Code created: '+r.code,'ok');
    document.getElementById('iv-locked-email').value='';
    ptToggleInviteForm(true);
    loadInvites();
    // auto-copy the fresh code's link for convenience
    ptCopyInvite(r.code);
  }catch(e){ptIvMsg('⚠️ '+(e&&e.message?e.message:'Create failed'),'err');}
  finally{btn.disabled=false;btn.textContent='Generate code';}
}
function ptIvMsg(t,kind){const m=document.getElementById('iv-msg');if(!m)return;m.textContent=t;m.className='pt-msg '+(kind||'');}
async function ptDeleteInvite(id,code){
  const ok=await tlfConfirm({title:'Delete invite code?',message:'“'+code+'” will stop working immediately. Anyone who already redeemed it keeps their partner status.',confirmText:'Delete',danger:true});
  if(!ok)return;
  try{await premiumCall({action:'invite_delete',id});showFlash('Invite code deleted.');loadInvites();}
  catch(e){showFlash('⚠️ '+(e&&e.message?e.message:'Delete failed'));}
}

// channels editor
function ptAddChannelRow(label,url){
  const wrap=document.getElementById('pd-channels');
  const row=document.createElement('div');row.className='pt-channel-row';
  const l=document.createElement('input');l.className='pt-ch-label';l.placeholder='Twitch';l.value=label||'';
  const u=document.createElement('input');u.className='pt-ch-url';u.placeholder='https://…';u.value=url||'';
  const del=document.createElement('button');del.className='pt-ch-del';del.textContent='✕';
  del.onclick=()=>row.remove();
  row.appendChild(l);row.appendChild(u);row.appendChild(del);
  wrap.appendChild(row);
}
function ptCollectChannels(){
  const rows=document.querySelectorAll('#pd-channels .pt-channel-row');
  const out=[];
  rows.forEach(r=>{
    const label=r.querySelector('.pt-ch-label').value.trim();
    const url=r.querySelector('.pt-ch-url').value.trim();
    if(url)out.push({label,url});
  });
  return out;
}

async function ptSavePartner(){
  const display_name=(document.getElementById('pd-name').value||'').trim();
  if(!display_name){ptPdMsg('A name is required.','err');return;}
  // Lifecycle: only the manual overrides (paused/prospect) are sent; blank means
  // "automatic", which we store as 'prospect' (a neutral base the server then
  // computes over). Active/expiring/expired are never stored manually.
  const override=document.getElementById('pd-lifecycle-override').value;
  const lifecycle=(override==='paused'||override==='prospect')?override:'prospect';
  const payload={
    action:'partner_save',
    display_name,
    email:(document.getElementById('pd-email').value||'').trim(),
    lifecycle,
    note:(document.getElementById('pd-note').value||'').trim(),
    channels:ptCollectChannels()
  };
  const creating=!_pdId;
  if(_pdId)payload.id=_pdId;
  const btn=document.getElementById('pd-save-btn');btn.disabled=true;btn.textContent=creating?'Creating…':'Saving…';
  try{
    const r=await premiumCall(payload);
    _pdId=r.id;
    ptPdMsg(creating?'✓ Partner created — you can now grant partner status and generate invite codes below.':'✓ Saved.','ok');
    // reload the detail so the account box + invites unlock for a fresh record
    ptOpenDetail(_pdId);
  }catch(e){
    ptPdMsg('⚠️ '+(e&&e.message?e.message:'Save failed'),'err');
  }finally{
    // v107 — always restore the button, regardless of success/failure/reload.
    btn.disabled=false;btn.textContent=(_pdId?'Save changes':'Create partner');
  }
}

async function ptDeletePartner(){
  if(!_pdId)return;
  const ok=await tlfConfirm({
    title:'Delete this partner?',
    message:'This cuts all ties: it removes the partner record and its invite codes, and revokes the linked account’s partner status (it becomes a regular free account). A paid subscription, if any, is not affected. This can’t be undone.',
    confirmText:'Delete',danger:true
  });
  if(!ok)return;
  try{
    await premiumCall({action:'partner_delete',id:_pdId});
    showFlash('Partner record deleted.');
    ptCloseDetail();
    loadPartnersList();
  }catch(e){showFlash('⚠️ '+(e&&e.message?e.message:'Delete failed'));}
}

// ── Staff / roles ──────────────────────────────────────────────────────────
let _stLookedUp=null;
function stResetLookup(){
  _stLookedUp=null;
  const r=document.getElementById('st-lookup-result');if(r){r.textContent='';r.className='pt-lookup-result';}
  const gf=document.getElementById('st-grant-fields');if(gf)gf.style.display='none';
  const m=document.getElementById('st-msg');if(m){m.textContent='';m.className='pt-msg';}
}
async function stLookup(){
  const email=(document.getElementById('st-email').value||'').trim();
  const r=document.getElementById('st-lookup-result');
  _stLookedUp=null;document.getElementById('st-grant-fields').style.display='none';
  if(!email){r.textContent='Enter an email to look up.';r.className='pt-lookup-result err';return;}
  const btn=document.getElementById('st-lookup-btn');btn.disabled=true;btn.textContent='…';
  try{
    const res=await premiumCall({action:'lookup',email});
    if(res.found){
      _stLookedUp={user_id:res.user_id,email:res.email};
      r.textContent='✓ Found account: '+res.email;r.className='pt-lookup-result ok';
      document.getElementById('st-grant-fields').style.display='';
    }else{r.textContent='✗ No account found for that email.';r.className='pt-lookup-result err';}
  }catch(e){
    r.textContent='⚠️ '+(e&&e.message?e.message:'Lookup failed');r.className='pt-lookup-result err';
  }finally{btn.disabled=false;btn.textContent='Look up';}
}
async function stGrant(){
  if(!_stLookedUp){return;}
  const role=document.getElementById('st-role').value;
  const note=(document.getElementById('st-note').value||'').trim();
  const m=document.getElementById('st-msg');
  const btn=document.getElementById('st-grant-btn');btn.disabled=true;btn.textContent='Granting…';
  try{
    await premiumCall({action:'role_set',userId:_stLookedUp.user_id,role,note});
    m.textContent='✓ '+role+' role granted to '+_stLookedUp.email+'.';m.className='pt-msg ok';
    document.getElementById('st-email').value='';
    document.getElementById('st-note').value='';
    stResetLookup();
    loadRoles();
  }catch(e){
    m.textContent='⚠️ '+(e&&e.message?e.message:'Grant failed');m.className='pt-msg err';
  }finally{btn.disabled=false;btn.textContent='Grant role';}
}
async function loadRoles(){
  const cont=document.getElementById('st-list');
  cont.innerHTML='<div class="admin-empty">Loading…</div>';
  try{
    const{roles}=await premiumCall({action:'roles_list'});
    document.getElementById('st-count').textContent=(roles?.length||0)+' staff';
    if(!roles||!roles.length){cont.innerHTML='<div class="admin-empty">No staff roles yet.</div>';return;}
    cont.innerHTML='';
    roles.forEach(r=>cont.appendChild(stRow(r)));
  }catch(e){
    cont.innerHTML='<div class="admin-empty">⚠️ '+(e&&e.message?e.message:'Could not load')+'</div>';
  }
}
function stRow(r){
  const row=document.createElement('div');row.className='pt-row';
  const left=document.createElement('div');left.className='pt-row-left';
  const em=document.createElement('div');em.className='pt-row-email';em.textContent=r.email||'(unknown account)';
  const meta=document.createElement('div');meta.className='pt-row-meta';
  const cls=r.role==='owner'?'on':'';
  meta.innerHTML='<span class="pt-pill '+cls+'">'+r.role+'</span>';
  left.appendChild(em);left.appendChild(meta);
  if(r.note){const n=document.createElement('div');n.className='pt-row-note';n.textContent=r.note;left.appendChild(n);}
  row.appendChild(left);
  // Don't offer to clear your OWN owner role (avoid self-lockout via UI).
  const clr=document.createElement('button');clr.className='pt-revoke';clr.textContent='Remove';
  clr.onclick=()=>stClear(r.user_id,r.email,r.role);
  row.appendChild(clr);
  return row;
}
async function stClear(userId,email,role){
  const ok=await tlfConfirm({
    title:'Remove '+role+' role?',
    message:'“'+(email||'this account')+'” will return to a regular user. '+(role==='owner'?'Be careful removing owner access.':'They’ll lose access to reports.'),
    confirmText:'Remove',danger:true
  });
  if(!ok)return;
  try{
    await premiumCall({action:'role_clear',userId});
    showFlash('Role removed.');
    loadRoles();
  }catch(e){showFlash('⚠️ '+(e&&e.message?e.message:'Failed'));}
}

async function loadReports(){
  const cont=document.getElementById('admin-reports');
  cont.innerHTML='<div class="admin-empty">Loading…</div>';
  try{
    const{reports}=await adminCall({action:'list_reports'});
    document.getElementById('admin-count').textContent=(reports?.length||0)+' open';
    refreshReportBadge(reports?.length||0); // v119 item 4 — sync the button badge with what we just fetched
    if(!reports||!reports.length){cont.innerHTML='<div class="admin-empty">No open reports 🎉</div>';return;}
    cont.innerHTML='';
    reports.forEach(r=>cont.appendChild(renderReport(r)));
  }catch(e){
    cont.innerHTML='<div class="admin-empty">⚠️ '+(e.message||'Failed to load')+'</div>';
  }
}

function renderReport(r){
  const card=document.createElement('div');card.className='admin-report';
  const top=document.createElement('div');top.className='admin-report-top';
  const left=document.createElement('div');
  const title=document.createElement('div');title.className='admin-report-title';
  title.textContent=r.list_title||'(untitled list)';
  // v118 — creator-deleted-account note takes priority (it implies the list is
  // either gone via cascade or preserved as evidence). Only when the account
  // still exists but the single list was removed do we show "list deleted by user".
  if(r.owner_deleted_at){
    const g=document.createElement('span');g.className='admin-gone';
    const d=new Date(r.owner_deleted_at);
    const when=isNaN(d)?'':(' on '+d.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}));
    g.textContent='creator deleted their account'+when;
    title.appendChild(g);
  }else if(!r.list_still_exists){
    const g=document.createElement('span');g.className='admin-gone';g.textContent='list deleted by user';title.appendChild(g);
  }
  const meta=document.createElement('div');meta.className='admin-report-meta';
  const when=new Date(r.created_at).toLocaleString();
  meta.innerHTML=`Code: ${r.share_token||'—'} · ${when}<br>Reporter IP: ${r.reporter_ip||'—'}`;
  const reason=document.createElement('div');reason.className='admin-reason';reason.textContent=r.reason||'—';
  left.appendChild(title);left.appendChild(meta);left.appendChild(reason);
  top.appendChild(left);
  card.appendChild(top);

  // snapshot layout (tiers with images/text)
  const snap=r.list_snapshot||{};
  if(snap.tiers&&snap.tiers.length){
    const sd=document.createElement('div');sd.className='admin-snapshot';
    snap.tiers.forEach(t=>{
      const row=document.createElement('div');row.className='admin-snap-row';
      const lbl=document.createElement('div');lbl.className='admin-snap-label';lbl.textContent=t.label;lbl.style.background=t.color||'#6b7280';
      const items=document.createElement('div');items.className='admin-snap-items';
      (t.items||[]).forEach(id=>{
        const it=snap.itemData?.[id];if(!it)return;
        const cell=document.createElement('div');cell.className='admin-snap-cell';cell.title='Click to view details';
        cell.onclick=()=>openAdminItemDetail(snap,id);
        if(it.img){const im=document.createElement('img');im.src=it.img;im.loading='lazy';cell.appendChild(im);}
        else{const tx=document.createElement('div');tx.className='admin-snap-text';tx.textContent=it.name||id;cell.appendChild(tx);}
        items.appendChild(cell);
      });
      row.appendChild(lbl);row.appendChild(items);sd.appendChild(row);
    });
    card.appendChild(sd);
  }

  // flagged images with live status + per-image actions
  if(r.images&&r.images.length){
    const wrap=document.createElement('div');wrap.className='admin-images';
    r.images.forEach(img=>{
      const box=document.createElement('div');box.className='admin-img';
      const im=document.createElement('img');im.src=img.url;im.loading='lazy';box.appendChild(im);
      const st=document.createElement('div');st.className='admin-img-status status-'+img.status;st.textContent=statusLabel(img.status);box.appendChild(st);
      // per-image action buttons
      const acts=document.createElement('div');acts.className='admin-img-acts';
      acts.appendChild(mkImgBtn('✓','admin-dismiss','Dismiss this image',()=>doImageAction('dismiss',r.id,img.id)));
      acts.appendChild(mkImgBtn('⊘','admin-uphold','Uphold (remove) this image',()=>doImageAction('uphold',r.id,img.id)));
      acts.appendChild(mkImgBtn('⚠','admin-escalate','Escalate (illegal) this image',()=>doImageAction('escalate',r.id,img.id)));
      box.appendChild(acts);
      wrap.appendChild(box);
    });
    card.appendChild(wrap);
  }

  // flagged text items with per-item actions
  if(r.textItems&&r.textItems.length){
    const tlist=document.createElement('div');tlist.className='admin-textitems';
    r.textItems.forEach(name=>{
      const rowt=document.createElement('div');rowt.className='admin-textitem';
      const label=document.createElement('span');label.className='admin-textitem-label';label.textContent='“'+name+'”';
      const tacts=document.createElement('div');tacts.className='admin-textitem-acts';
      tacts.appendChild(mkImgBtn('✓','admin-dismiss','Dismiss this text item',()=>doTextAction('dismiss',r.id,name)));
      tacts.appendChild(mkImgBtn('⊘','admin-uphold','Remove this text item',()=>doTextAction('uphold',r.id,name)));
      tacts.appendChild(mkImgBtn('⚠','admin-escalate','Escalate this text item',()=>doTextAction('escalate',r.id,name)));
      rowt.appendChild(label);rowt.appendChild(tacts);
      tlist.appendChild(rowt);
    });
    card.appendChild(tlist);
  }

  // bulk actions for the whole report
  const acts=document.createElement('div');acts.className='admin-actions';
  acts.appendChild(mkActBtn('✓ Dismiss remaining','admin-dismiss',()=>doAction('dismiss',r.id)));
  acts.appendChild(mkActBtn('⊘ Uphold all','admin-uphold',()=>doAction('uphold',r.id)));
  acts.appendChild(mkActBtn('⚠ Escalate all','admin-escalate',()=>doAction('escalate',r.id)));
  card.appendChild(acts);
  return card;
}
function mkActBtn(label,cls,fn){const b=document.createElement('button');b.className='admin-act-btn '+cls;b.textContent=label;b.onclick=fn;return b;}
function mkImgBtn(label,cls,title,fn){const b=document.createElement('button');b.className='admin-img-btn '+cls;b.textContent=label;b.title=title;b.onclick=fn;return b;}
function statusLabel(s){
  return {
    active:'Active',
    quarantined:'Pending Review',
    escalated:'Illegal — Preserved',
    soft_deleted:'Removed'
  }[s]||s;
}

async function doImageAction(action,reportId,imageId){
  const labels={dismiss:'dismiss (restore) this image',uphold:'remove this image from all lists',escalate:'escalate this image as illegal'};
  if(!await tlfConfirm({title:'Confirm moderation action',message:'Are you sure you want to '+labels[action]+'?',confirmText:'Yes, continue',danger:true}))return;
  try{
    await adminCall({action,reportId,imageId});
    showFlash('✅ Image '+action+'ed');
    loadReports();
  }catch(e){showFlash('⚠️ '+(e.message||'Action failed'));}
}

async function doTextAction(action,reportId,textName){
  const labels={dismiss:'dismiss this text item',uphold:'remove this text item from all lists',escalate:'escalate this text item as illegal'};
  if(!await tlfConfirm({title:'Confirm moderation action',message:'Are you sure you want to '+labels[action]+'?',confirmText:'Yes, continue',danger:true}))return;
  try{
    await adminCall({action,reportId,textName});
    showFlash('✅ Text item '+action+'ed');
    loadReports();
  }catch(e){showFlash('⚠️ '+(e.message||'Action failed'));}
}

async function doAction(action,reportId){
  const labels={dismiss:'dismiss this report and restore the images',uphold:'remove (soft-delete) the images',escalate:'escalate as illegal and keep images quarantined'};
  if(!await tlfConfirm({title:'Confirm moderation action',message:'Are you sure you want to '+labels[action]+'?',confirmText:'Yes, continue',danger:true}))return;
  try{
    await adminCall({action,reportId});
    showFlash('✅ Report '+action+'ed');
    loadReports();
  }catch(e){showFlash('⚠️ '+(e.message||'Action failed'));}
}

/* ── VIEWER ── */
async function viewByCode(){
  const code=document.getElementById('auth-code-input').value.trim();
  const errEl=document.getElementById('auth-code-error');
  errEl.classList.remove('show');
  if(!code||code.length<5){errEl.classList.add('show');return;}
  try{
    const{data,error}=await sb.from('tier_lists').select('id,title,data,share_token,is_public,updated_at').eq('share_token',code).eq('is_public',true).single(); // v77 — never user_id
    if(error||!data){errEl.classList.add('show');return;}
    history.pushState({},'',`${window.location.pathname}?code=${encodeURIComponent(code)}`);
    showViewer(data);
  }catch(e){errEl.classList.add('show');}
}

// v120 (item 4/6) — OPEN BY CODE for signed-in users, from the embedded top-menu
// field (desktop) or the burger field (phone). Same public-only lookup as
// viewByCode (never user_id). Codes are 5 digits. On a bad code we flash rather
// than showing an inline error (no dedicated error element in the compact field).
function clearMenuCodeError(){const box=document.getElementById('menu-code-box');if(box)box.classList.remove('err');}
function menuCodeError(){const box=document.getElementById('menu-code-box');if(box){box.classList.add('err');}}
async function openByMenuCode(inputId){
  const inp=document.getElementById(inputId||'menu-code-input');
  const code=(inp&&inp.value.trim())||'';
  clearMenuCodeError();
  if(!code||code.length<5){menuCodeError();if(inp)inp.focus();return;}
  try{
    const{data,error}=await sb.from('tier_lists').select('id,title,data,share_token,is_public,updated_at').eq('share_token',code).eq('is_public',true).single(); // public only, never user_id
    if(error||!data){menuCodeError();return;}
    if(inp)inp.value='';
    history.pushState({},'',`${window.location.pathname}?code=${encodeURIComponent(code)}`);
    showViewer(data);
  }catch(e){menuCodeError();}
}

let viewerPollTimer=null;
let viewerToken=null;
let viewerUpdatedAt=null;
let viewerRealtimeChannel=null; // Supabase Realtime subscription for the viewed list

function setAuthFieldsEnabled(on){
  // When the viewer is showing, disable the (hidden) email/password fields so
  // browsers don't offer to save/fill credentials on a shared-list page.
  ['auth-email','auth-password'].forEach(id=>{
    const el=document.getElementById(id);
    if(el)el.disabled=!on;
  });
}

function showViewer(listData,fromBoot,knownSession){
  document.getElementById('auth-screen').classList.add('hidden');
  document.getElementById('viewer-screen').classList.add('show');
  setAuthFieldsEnabled(false);
  document.getElementById('viewer-code-num').textContent=listData.share_token||'—';
  // v138 — no code (test vote / code-less list): hide the "Tier List Code" badge entirely.
  {const cb=document.getElementById('viewer-code-badge');if(cb)cb.style.display=listData.share_token?'':'none';}
  // v139 — in a creator test vote, hide the bottom "← Back to Home" (goes to login); the
  // floating top-left "← Back to editor" is the correct exit.
  {const bh=document.getElementById('viewer-back-btn');if(bh)bh.style.display=testVoteMode?'none':'';}
  viewerToken=listData.share_token||null;
  viewerUpdatedAt=listData.updated_at||null;
  renderViewerData(listData);
  // Hide the static tier list until the voting-session check resolves, so it
  // doesn't briefly flash before the voting view takes over.
  document.getElementById('viewer-tierlist').style.visibility='hidden';
  startViewerRealtime(listData.id);
  startViewerPolling(); // 60s safety net beneath Realtime (no-op when viewerToken is null)
  // Close/return the detail panel when clicking outside the interactive zones.
  const vs=document.getElementById('viewer-screen');
  if(vs&&!vs._outsideClickWired){
    vs.addEventListener('mousedown',ev=>{voteMouseDownInside=!!(ev.target.closest('#vp-slot')||ev.target.closest('.vt-item')||ev.target.closest('.vote-pool-item'));},true);
    vs.addEventListener('click',handleViewerOutsideClick);
    vs._outsideClickWired=true;
  }
  if(knownSession){
    // v137 — Test vote: we already hold the session, so skip the code-based lookup.
    // All vote actions (cast/results) key on sessionId, so no share code is needed.
    voteSession=knownSession;voteResults=null;
    document.getElementById('viewer-tierlist').style.visibility='';
    castVoteCall({action:'results',sessionId:knownSession.id}).then(r=>{if(r&&r.results){voteResults=r.results;renderVoteResults();}}).catch(()=>{});
    enterVotingMode();
    if(fromBoot)hideBootGate();
  }else{
    checkForVotingSession(listData.share_token,fromBoot); // enter voting mode if a session is live
  }
}

// Apply a freshly fetched list row if it's newer than what we're showing.
function applyViewerUpdate(data){
  if(!data)return;
  if(data.updated_at&&data.updated_at!==viewerUpdatedAt){
    viewerUpdatedAt=data.updated_at;
    renderViewerData(data);
    // If a session is active, rebuild the appropriate view against the new list
    // content. A CLOSED session must stay in post-close (read-only) mode — never
    // resurrect the votable pool/ballot.
    if(voteSession){
      if(voteSession.status==='closed')enterPostCloseMode();
      else refreshVotingViewData();
    }else{
      // v78.1 — the plain (no-voting) case was missed. renderViewerData above
      // rebuilds #viewer-tierlist, but enterStaticView() replaced that container
      // and sets it display:none, so the update landed somewhere invisible and
      // only a page reload showed it. This is the ordinary sharing case, so it
      // affected every viewer of a list without voting.
      enterStaticView();
    }
    showViewerUpdatedToast();
  }
}

// Rebuild voting item order + tiers from the (freshly updated) viewerData,
// keeping existing votes. Drops votes for items that no longer exist.
function refreshVotingViewData(){
  const d=viewerData||{};
  voteTiers=(d.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  const ids=[];
  (d.pool||[]).forEach(id=>{if(d.itemData?.[id]&&!d.itemData[id].example)ids.push(id);});
  (d.tiers||[]).forEach(t=>(t.items||[]).forEach(id=>{if(d.itemData?.[id]&&!d.itemData[id].example&&!ids.includes(id))ids.push(id);}));
  voteItemOrder=ids;
  // Prune votes for items that were removed.
  let changed=false;
  Object.keys(myVotes).forEach(id=>{if(!ids.includes(id)){delete myVotes[id];changed=true;}});
  if(changed)saveMyVotes();
  // If the current ballot item vanished, move to the next unvoted one. v96.4 —
  // on PHONE, only re-select when an item was already active (so a poll refresh
  // doesn't pop the ballot open when the user is just viewing the overview);
  // desktop keeps its inline pre-fill.
  if(voteCurrentItem&&!ids.includes(voteCurrentItem))voteCurrentItem=firstUnvotedItem();
  else if(!voteCurrentItem&&!isPhone())voteCurrentItem=firstUnvotedItem();
  if(voteCurrentItem)setLastNav('vote','vote-pool',voteCurrentItem); // v140 — record for arrow-nav
  renderMyTierList();renderBallot();renderVotePool();renderVoteResults();
}

// ── Realtime push: subscribe to this list row; re-render on any change ──
function startViewerRealtime(listId){
  stopViewerRealtime();
  if(!listId)return;
  try{
    viewerRealtimeChannel=sb.channel('viewer-list-'+listId)
      .on('postgres_changes',
        {event:'UPDATE',schema:'public',table:'tier_lists',filter:'id=eq.'+listId},
        (payload)=>{applyViewerUpdate(payload.new);})
      // Session start/end/reopen: any change to this list's voting sessions
      // re-checks authoritative state and switches the view instantly.
      .on('postgres_changes',
        {event:'*',schema:'public',table:'voting_sessions',filter:'list_id=eq.'+listId},
        ()=>{onSessionRealtimeChange();})
      .subscribe();
  }catch(e){/* Realtime unavailable — the 60s poll still covers updates */}
}
// Re-fetch authoritative session state (via the secure cast-vote fn) and switch
// the viewer between static / live-voting / post-close as needed.
let sessionRealtimeBusy=false;
async function onSessionRealtimeChange(){
  if(sessionRealtimeBusy||!viewerToken)return;
  sessionRealtimeBusy=true;
  try{
    const r=await castVoteCall({action:'session',shareToken:viewerToken});
    const newId=r.session&&r.session.id||null;
    const newStatus=r.session&&r.session.status||null;
    const curId=voteSession&&voteSession.id||null;
    const curStatus=voteSession&&voteSession.status||null;
    // No change -> nothing to do.
    if(newId===curId&&newStatus===curStatus){sessionRealtimeBusy=false;return;}
    if(r.session&&newStatus==='open'){
      voteSession=r.session;voteResults=r.results||null;
      enterVotingMode();
    }else if(r.session&&newStatus==='closed'){
      voteSession=r.session;voteResults=r.results||null;
      enterPostCloseMode();
    }else{
      // Session removed entirely -> back to the static list.
      voteSession=null;enterStaticView();
    }
  }catch(e){/* leave current view; poll will retry */}
  sessionRealtimeBusy=false;
}
function stopViewerRealtime(){
  if(viewerRealtimeChannel){try{sb.removeChannel(viewerRealtimeChannel);}catch(e){}viewerRealtimeChannel=null;}
}

// Pure render — reused by both initial view and polling refresh.
let viewerData=null; // the saved list's .data, for the item-detail modal

function renderViewerData(listData){
  document.getElementById('viewer-list-title').textContent=listData.title||'Tier List';
  const d=listData.data||{};
  viewerData=d;
  const shape=d.imgShape||'square';
  // Apply the list's shape to the body so all shape-aware CSS (incl. the voting
  // and community renderers) shapes image CONTENT correctly, matching the editor.
  document.body.className='shape-'+shape;
  const tl=document.getElementById('viewer-tierlist');tl.innerHTML='';
  (d.tiers||[]).forEach(t=>{
    const row=document.createElement('div');row.className='viewer-row';
    const lbl=document.createElement('div');lbl.className='viewer-label';lbl.textContent=t.label;lbl.style.background=t.color;
    const items=document.createElement('div');items.className='viewer-items';
    (t.items||[]).forEach(itemId=>{
      const it=d.itemData?.[itemId];if(!it)return;
      const wrap=document.createElement('div');wrap.className='viewer-item';wrap.dataset.itemId=itemId;
      wrap.onclick=()=>{setLastNav('viewer','viewer-tierlist',itemId);openViewerItemDetail(itemId);}; // v133 — track for arrow-nav
      const sz=shape==='portrait'?{w:72,h:108}:shape==='landscape'?{w:108,h:72}:{w:72,h:72};
      if(it.img){
        const img=document.createElement('img');img.src=it.img;img.className='viewer-item-img';img.draggable=false;
        img.style.width=sz.w+'px';img.style.height=sz.h+'px';
        if(shape==='round')img.style.borderRadius='50%';
        wrap.appendChild(img);
      } else {
        const txt=document.createElement('div');txt.className='viewer-item-text';txt.textContent=it.name||itemId;
        txt.style.height=sz.h+'px';
        wrap.appendChild(txt);
      }
      items.appendChild(wrap);
    });
    row.appendChild(lbl);row.appendChild(items);tl.appendChild(row);
  });
}

/* ══════════ VOTER SIDE (placement voting) ══════════ */
let voteSession=null;      // {id, mode, reveal_hidden, ...}
let voteResults=null;      // latest results object from cast-vote
let myVotes={};            // { itemId: tier } — this browser's votes
let voteItemOrder=[];      // ordered item ids (creator's pool + tiers)
let voteCurrentItem=null;  // item id currently on the ballot
let _manualBallotClose=false; // v133 — set while closeBallotAny runs to suppress the complete banner
let voteTiers=[];          // [{label,color}]
let votePollTimer2=null;

// Stable per-browser token (anti-spam fingerprint half). Persistent.
function voterToken(){
  let t=null;try{t=localStorage.getItem('tlf_voter_token');}catch(e){}
  if(!t){t='v'+Math.random().toString(36).slice(2)+Date.now().toString(36);try{localStorage.setItem('tlf_voter_token',t);}catch(e){}}
  return t;
}

async function castVoteCall(payload){
  const resp=await fetch(`${SUPABASE_URL}/functions/v1/cast-vote`,{
    method:'POST',
    headers:{'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY},
    body:JSON.stringify(payload)
  });
  const j=await resp.json().catch(()=>({}));
  if(!resp.ok)throw new Error(j.error||('Request failed ('+resp.status+')'));
  return j;
}

// On viewing a list, check for an open session; if present, enter voting mode.
async function checkForVotingSession(shareToken,fromBoot){
  const tl=document.getElementById('viewer-tierlist');
  try{
    const r=await castVoteCall({action:'session',shareToken});
    if(r.session&&r.session.status==='open'){
      voteSession=r.session;voteResults=r.results||null;
      tl.style.visibility='';       // enterVotingMode hides it via display anyway
      enterVotingMode();
    }else if(r.session&&r.session.status==='closed'){
      voteSession=r.session;voteResults=r.results||null;
      tl.style.visibility='';
      enterPostCloseMode();
    }else{
      tl.style.visibility='';
      exitVotingMode();
    }
  }catch(e){tl.style.visibility='';exitVotingMode();}
  if(fromBoot)hideBootGate();
}

// After voting closes: show the creator's choice of creator list / community
// results / both, instead of the live ballot.
function enterPostCloseMode(){
  exitH2HMode(); // v80 — voting is over; the matchup screen goes away
  const pc=(voteSession&&voteSession.postCloseView)||'community';
  const d=viewerData||{};
  voteTiers=(d.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  inspectMode=false;inspectItemId=null;inspectCommunityId=null;
  document.getElementById('vdetail').style.display='none';
  document.getElementById('cdetail').style.display='none';
  document.getElementById('vote-right-label').textContent='Item details';
  const ids=[];
  (d.pool||[]).forEach(id=>{if(d.itemData?.[id]&&!d.itemData[id].example)ids.push(id);});
  (d.tiers||[]).forEach(t=>(t.items||[]).forEach(id=>{if(d.itemData?.[id]&&!d.itemData[id].example&&!ids.includes(id))ids.push(id);}));
  voteItemOrder=ids;
  loadMyVotes();

  const showCreator=(pc==='creator'||pc==='both');
  const showCommunity=(pc==='community'||pc==='both');
  if(votePollTimer2){clearInterval(votePollTimer2);votePollTimer2=null;}

  const vv=document.getElementById('vote-view');
  const hasMyVotes=Object.keys(myVotes).length>0;

  document.getElementById('vote-ballot').style.display='none';
  document.getElementById('vote-progress').style.display='none';
  document.getElementById('vote-pool-wrap').style.display='none';
  // Personal ranking (read-only) if they voted; else hide the personal row.
  // Always show the voter's own ranking first when they took part — the
  // post-close setting only decides what appears BELOW it.
  if(hasMyVotes){
    document.getElementById('vote-personal-row').style.display='';
    document.getElementById('vote-mylist-label').style.display='';
    document.getElementById('vote-mylist-label').textContent='Your ranking';
    document.getElementById('vote-mytierlist').style.display='';
    renderMyTierList(true); // read-only: clicking opens the personal-slot detail
  }else{
    document.getElementById('vote-personal-row').style.display='none';
  }
  // Community row.
  if(showCommunity){
    document.getElementById('vote-community-row').style.display='';
    vv.classList.add('show');
    document.getElementById('vote-banner').style.display='';
    document.getElementById('vote-banner').textContent='🗳️ Voting has ended — here are the community results.';
    document.getElementById('vote-results').style.display='';
    renderVoteResults();
  }else{
    document.getElementById('vote-community-row').style.display='none';
    // Community results are hidden by the creator's choice — but voting HAS
    // ended, so correct the banner instead of leaving "voting is live" up.
    const b=document.getElementById('vote-banner');
    b.style.display='';
    b.textContent=showCreator?'🗳️ Voting has ended — here is the creator\'s ranking.':'🗳️ Voting has ended.';
    if(hasMyVotes)vv.classList.add('show');else vv.classList.remove('show');
  }
  // Creator's authored ranking (post-close "Creator's ranking"): render through
  // the shared renderer + detail slot, NOT the legacy viewer-tierlist + modal.
  document.getElementById('viewer-tierlist').style.display='none';
  // The creator's authored ranking now lives in its OWN row, so it no longer
  // competes with the voter's ranking for a container. That means "Both" can
  // genuinely show both, and "Creator's ranking" no longer erases the voter's.
  if(showCreator){
    document.getElementById('vote-creator-row').style.display='';
    const placement={};voteTiers.forEach(t=>placement[t.id]=[]);
    (d.tiers||[]).forEach(t=>(t.items||[]).forEach(id=>{if(d.itemData?.[id]&&placement[t.id])placement[t.id].push(id);}));
    renderTierListInto(document.getElementById('vote-creator-tierlist'),placement,1,(id)=>showCreatorDetail(id));
    vv.classList.add('show');
  }else{
    document.getElementById('vote-creator-row').style.display='none';
  }
  clearVdetailPrompt(); // slots collapsed until an item is tapped
}

function exitVotingMode(){
  exitH2HMode(); // v80
  // Drop cached results too: if the session was deleted (creator hit Reset) a
  // stale voteResults would otherwise leave an empty community list on screen.
  voteSession=null;voteResults=null;inspectMode=false;inspectItemId=null;inspectCommunityId=null;
  if(votePollTimer2){clearInterval(votePollTimer2);votePollTimer2=null;}
  stopViewerVoteRealtime(); // v97.4
  enterStaticView();
}

// Static (no active voting) viewer: authored list on the left (read-only), the
// unified detail panel on the right. Replaces the old separate viewer-tierlist
// + modal so all viewer detail lives in one place.
function enterStaticView(){
  const d=viewerData||{};
  const kr=document.getElementById('vote-creator-row');if(kr)kr.style.display='none';
  voteTiers=(d.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  document.getElementById('viewer-tierlist').style.display='none';
  document.getElementById('vote-view').classList.add('show');
  document.getElementById('vote-banner').style.display='none';
  document.getElementById('vote-ballot').style.display='none';
  document.getElementById('vote-progress').style.display='none';
  document.getElementById('vote-pool-wrap').style.display='none';
  document.getElementById('vote-personal-row').style.display='';
  document.getElementById('vote-community-row').style.display='none'; // no community in static
  document.getElementById('vote-mylist-label').textContent='Tier list';
  document.getElementById('vote-mylist-label').style.display='';
  document.getElementById('vote-mytierlist').style.display='';
  document.getElementById('vote-right-label').textContent='Item details';
  const placement={};voteTiers.forEach(t=>placement[t.id]=[]);
  (d.tiers||[]).forEach(t=>(t.items||[]).forEach(id=>{if(d.itemData?.[id]&&placement[t.id])placement[t.id].push(id);}));
  renderTierListInto(document.getElementById('vote-mytierlist'),placement,1,(id)=>showPersonalDetail(id));
  clearVdetailPrompt(); // both slots collapsed until an item is tapped
}

// Shape sizing shared with the viewer/creator look.
function voteShapeSize(scale){
  const d=viewerData||{};const shape=d.imgShape||'square';
  const base=scale||1;
  let w,h,round=false,contain=false;
  if(shape==='portrait'){w=77;h=108;}   // v85.0 — 285:399 (was 72x108); height kept, widened
  else if(shape==='landscape'){w=108;h=72;}
  else if(shape==='round'){w=72;h=72;round=true;}
  else if(shape==='nocrop'){w=108;h=72;contain=true;}
  else {w=72;h=72;} // square
  return {w:Math.round(w*base),h:Math.round(h*base),round,contain};
}
// Build a shape-aware item cell (image or text). cls = base class.
function voteItemCell(itemId,cls,scale,onClick){
  const d=viewerData||{};const it=d.itemData?.[itemId]||{};
  const cell=document.createElement('div');
  // cls is the base ('vt-item' or 'vote-pool-item'); add img/text modifier so the
  // body.shape-X CSS rules shape the CONTENT just like the creator's tier list.
  cell.className=cls+(it.img?' vote-img':' vote-text');
  cell.dataset.itemId=itemId;
  if(cls==='vt-item'&&scale)cell.dataset.scale=scale;
  if(it.img){
    const im=document.createElement('img');im.src=it.img;im.draggable=false;
    cell.appendChild(im);
  }else{
    const tx=document.createElement('div');tx.className='vt-text';tx.textContent=it.name||itemId;
    cell.appendChild(tx);
  }
  if(onClick)cell.onclick=onClick;
  return cell;
}

// Shared tier-list renderer. placement: {tierId:[itemIds]}. Renders into el.
function renderTierListInto(el,placement,scale,onItemClick){
  el.innerHTML='';
  // v83.1 — show each tier's % range on community/viewer lists, matching the
  // creator editor. Most tiers have no explicit stored range; their range comes
  // from the default table by label (same fallback as getRowRange). We only show
  // ranges for RANKED lists (Elo/parameter), where a % actually means something.
  // v84.6 — the mode MUST come from an authoritative source. Previously it read
  // lastCreatorResults.currentMode (a results SNAPSHOT), which lagged the actual
  // mode: switching to Manual left the snapshot saying "auto", so ranges leaked
  // onto the community list; saving cleared them but they stayed gone coming back.
  // On the VIEWER side viewerData.currentMode is the saved list's mode (correct);
  // on the CREATOR side the live currentMode is authoritative.
  const rangesSrc=viewerData||lastCreatorResults||null;
  const storedRanges=(rangesSrc&&rangesSrc.rowRanges)||rowRanges||{};
  // v85.1 — item 3: when a community vote is RUNNING, the mode that governs this
  // list is the SESSION's mode, not the saved list's currentMode. Previously
  // listMode read viewerData.currentMode (viewer) / currentMode (creator); if the
  // creator saved the list in a different mode mid-session, that flipped and the
  // per-row % ranges vanished from the viewer's list even though the session was
  // still running in a ranked mode. Map the active session mode to a list mode and
  // prefer it; fall back to the saved mode only when no session is active.
  const _sessMode=(typeof voteSession!=='undefined'&&voteSession&&voteSession.mode)
    ? voteSession.mode
    : ((typeof currentSession!=='undefined'&&currentSession&&currentSession.status==='open'&&currentSession.mode)?currentSession.mode:null);
  const _sessListMode=_sessMode==='head2head'?'elo':(_sessMode==='parameter'?'auto':(_sessMode==='placement'?'manual':null));
  const savedListMode=viewerData?(viewerData.currentMode||'manual'):currentMode;
  // v149 — the creator presentation shows the creator's OWN list: its mode governs.
  const listMode=(el&&el.dataset&&el.dataset.pCreator==='1')?savedListMode:(_sessListMode||savedListMode);
  const showRanges=(listMode==='elo'||listMode==='auto');
  const rangeTable=(listMode==='elo')?DEFAULT_ELO_TIERS:DEFAULT_AUTO_TIERS;
  const effRange=(t)=>{
    if(storedRanges[t.id]&&typeof storedRanges[t.id].min==='number')return storedRanges[t.id];
    const at=rangeTable.find(x=>x.label===t.label);
    return at?{min:at.min,max:at.max}:null;
  };
  voteTiers.forEach(t=>{
    const row=document.createElement('div');row.className='vt-row';
    const lbl=document.createElement('div');lbl.className='vt-label';lbl.style.background=t.color;
    const nm=document.createElement('span');nm.className='vt-label-name';nm.textContent=t.label;lbl.appendChild(nm);
    const rg=showRanges?effRange(t):null;
    if(rg&&typeof rg.min==='number'&&typeof rg.max==='number'){
      const rge=document.createElement('span');rge.className='vt-label-range';
      rge.textContent=Math.round(rg.min)+'–'+Math.round(rg.max)+'%';
      lbl.appendChild(rge);
    }
    const its=document.createElement('div');its.className='vt-items';
    (placement[t.id]||[]).forEach(id=>{
      its.appendChild(voteItemCell(id,'vt-item',scale,onItemClick?(()=>onItemClick(id)):null));
    });
    row.appendChild(lbl);row.appendChild(its);el.appendChild(row);
  });
}

function enterVotingMode(){
  // v80 — head-to-head has its own screen; the per-item ballot has nothing to
  // show for it (no item order, no pool, no per-item votes).
  if(isH2HSession())return enterH2HMode();
  exitH2HMode();
  document.getElementById('viewer-tierlist').style.display='none';
  document.getElementById('vote-view').classList.add('show');
  document.getElementById('vote-personal-row').style.display='';
  document.getElementById('vote-creator-row').style.display='none'; // live voting: no authored list
  document.getElementById('vote-community-row').style.display='';
  document.getElementById('vote-results').style.display='';
  document.getElementById('vote-ballot').style.display='';
  setVpSheetMode(false); // v78.4 — ballot role: no handle, stays sticky
  document.getElementById('vote-progress').style.display='';
  document.getElementById('vote-pool-wrap').style.display='';
  document.getElementById('vote-mylist-label').style.display='';
  document.getElementById('vote-mylist-label').textContent='Your ranking';
  document.getElementById('vote-mytierlist').style.display='';
  document.getElementById('vote-banner').style.display='';
  document.getElementById('vote-right-label').textContent='Now voting';
  // Ballot lives in the personal slot -> keep that slot OPEN; community slot closed.
  // v96.4 — but on PHONE, clear any pre-selection and leave the slot closed so the
  // user sees the overview first (tapping an item opens it via renderBallot).
  if(isPhone())voteCurrentItem=null;
  if(!(isPhone()&&!voteCurrentItem))openSlot('vp-slot');
  closeSlot('vc-slot');
  inspectMode=false;inspectItemId=null;inspectCommunityId=null;
  document.getElementById('vdetail').style.display='none';
  document.getElementById('cdetail').style.display='none';
  document.getElementById('vote-banner').textContent=isParamSession()?'🗳️ Community voting is live — rate each item on the parameters!':'🗳️ Community voting is live — place each item where you think it belongs!';
  const d=viewerData||{};
  voteTiers=(d.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  const ids=[];
  (d.pool||[]).forEach(id=>{if(d.itemData?.[id]&&!d.itemData[id].example)ids.push(id);});
  (d.tiers||[]).forEach(t=>(t.items||[]).forEach(id=>{if(d.itemData?.[id]&&!d.itemData[id].example&&!ids.includes(id))ids.push(id);}));
  voteItemOrder=ids;
  loadMyVotes();
  // v96.4 — PHONE: don't auto-select the first item on entry; that opened the
  // ballot bottom sheet immediately and hid the list. Leave it unset so the user
  // sees the overview and taps an item to start. Desktop keeps the inline ballot
  // pre-filled (it doesn't cover anything there).
  voteCurrentItem=isPhone()?null:firstUnvotedItem();
  if(voteCurrentItem)setLastNav('vote','vote-pool',voteCurrentItem); // v140 — record for arrow-nav so you can move off the first item
  renderMyTierList();renderBallot();renderVotePool();renderVoteResults();
  startVotePolling2();
}

function myVotesKey(){return 'tlf_myvotes_'+(voteSession?voteSession.id:'x');}
function loadMyVotes(){myVotes={};try{const raw=localStorage.getItem(myVotesKey());if(raw)myVotes=JSON.parse(raw)||{};}catch(e){myVotes={};}loadMyOrder();}
function saveMyVotes(){try{localStorage.setItem(myVotesKey(),JSON.stringify(myVotes));}catch(e){}}
// v97 — the voter's intra-tier ORDER, persisted per session. This is the voter's
// equivalent of the creator's tiers[].items array: myOrder[tierId] = [itemId,...].
// It's a display-order store only (community aggregation ignores it for now). The
// renderer reads it for sequence; anything not listed falls back to voteItemOrder.
let myOrder={};
function myOrderKey(){return 'tlf_myorder_'+(voteSession?voteSession.id:'x');}
function loadMyOrder(){myOrder={};try{const raw=localStorage.getItem(myOrderKey());if(raw)myOrder=JSON.parse(raw)||{};}catch(e){myOrder={};}}
function saveMyOrder(){try{localStorage.setItem(myOrderKey(),JSON.stringify(myOrder));}catch(e){}}
// Order the ids of a tier using myOrder as the sequence source: listed ids first
// (in saved order, skipping any no longer in this tier), then any unlisted ids in
// their natural voteItemOrder position appended at the end.
function orderedTierIds(tid,ids){
  const saved=(myOrder[tid]||[]).filter(id=>ids.includes(id));
  const rest=ids.filter(id=>!saved.includes(id));
  return saved.concat(rest);
}
// Record the current DOM order of a tier's items back into myOrder + persist.
function captureTierOrder(tid,orderedIds){myOrder[tid]=orderedIds.slice();saveMyOrder();}

function firstUnvotedItem(){
  for(const id of voteItemOrder){if(!(id in myVotes))return id;}
  return null;
}
function nextUnvotedAfter(itemId){
  const n=voteItemOrder.length;if(!n)return null;
  const start=voteItemOrder.indexOf(itemId);
  for(let k=1;k<=n;k++){const id=voteItemOrder[(start+k)%n];if(!(id in myVotes))return id;}
  return null;
}

// The voter's OWN tier list, built from their votes (myVotes: itemId -> tierId).
let voteDragItemId=null;
let voteDragActive=false;      // v96.6 — true between dragstart and dragend
let voteDragJustEnded=0;       // v96.6 — timestamp of last dragend; guards residual click
function renderMyTierList(readOnly){
  const placement={};voteTiers.forEach(t=>placement[t.id]=[]);
  if(isParamSession()){
    // Parameter mode: my scores -> the creator's auto-rank ranges -> my tier list.
    const scores={};voteItemOrder.forEach(id=>{const v=myVotes[id];if(v&&typeof v==='object')scores[id]=myParamScore(v);});
    const pp=paramPlacementFromScores(scores);
    Object.keys(pp).forEach(k=>{if(placement[k])placement[k]=pp[k];});
  }else{
    voteItemOrder.forEach(id=>{const tid=myVotes[id];if(typeof tid==='string'&&placement[tid])placement[tid].push(id);});
    // v97 — apply the voter's saved intra-tier order to each tier.
    Object.keys(placement).forEach(tid=>{placement[tid]=orderedTierIds(tid,placement[tid]);});
  }
  renderMyTierList._placement=placement;
  const el=document.getElementById('vote-mytierlist');el.innerHTML='';
  // v90 — the voter's OWN list now shows the per-tier % ranges too, matching the
  // community list (which uses renderTierListInto). This renderer is separate and
  // predated the range feature, so it never drew them. Same mode source and
  // fallback table as renderTierListInto: ranges show for ranked lists (auto/elo),
  // preferring the running session's mode over the saved list's mode.
  const _sessMode=(typeof voteSession!=='undefined'&&voteSession&&voteSession.mode)
    ? voteSession.mode
    : ((typeof currentSession!=='undefined'&&currentSession&&currentSession.status==='open'&&currentSession.mode)?currentSession.mode:null);
  const _sessListMode=_sessMode==='head2head'?'elo':(_sessMode==='parameter'?'auto':(_sessMode==='placement'?'manual':null));
  const _savedListMode=viewerData?(viewerData.currentMode||'manual'):currentMode;
  const _listMode=_sessListMode||_savedListMode;
  const _showRanges=(_listMode==='elo'||_listMode==='auto');
  const _rangeTable=(_listMode==='elo')?DEFAULT_ELO_TIERS:DEFAULT_AUTO_TIERS;
  const _storedRanges=((viewerData||lastCreatorResults||{}).rowRanges)||rowRanges||{};
  const _effRange=(t)=>{
    if(_storedRanges[t.id]&&typeof _storedRanges[t.id].min==='number')return _storedRanges[t.id];
    const at=_rangeTable.find(x=>x.label===t.label);
    return at?{min:at.min,max:at.max}:null;
  };
  voteTiers.forEach(t=>{
    const row=document.createElement('div');row.className='vt-row';
    const lbl=document.createElement('div');lbl.className='vt-label';lbl.style.background=t.color;
    const nmSpan=document.createElement('span');nmSpan.className='vt-label-name';nmSpan.textContent=t.label;lbl.appendChild(nmSpan);
    const rg=_showRanges?_effRange(t):null;
    if(rg&&typeof rg.min==='number'&&typeof rg.max==='number'){
      const rge=document.createElement('span');rge.className='vt-label-range';
      rge.textContent=Math.round(rg.min)+'–'+Math.round(rg.max)+'%';
      lbl.appendChild(rge);
    }
    const its=document.createElement('div');its.className='vt-items';
    if(!readOnly){
      // Drop zone: dropping an item here votes it into this tier.
      its.ondragover=e=>{e.preventDefault();row.classList.add('vt-row-drop');};
      its.ondragleave=()=>row.classList.remove('vt-row-drop');
      its.ondrop=e=>{e.preventDefault();row.classList.remove('vt-row-drop');
        const id=voteDragItemId||e.dataTransfer.getData('text/plain');
        // v97.1 — append to the END of this tier's order (beforeId=null). This makes
        // "drop on empty row space" reposition to the end, even within the same tier
        // (castPlacementVote ignored same-tier order, so end-drops did nothing).
        // voteReorderInto also casts the vote if the tier changed.
        if(id&&!isParamSession()){voteReorderInto(id,t.id,null);}
      };
    }
    (placement[t.id]||[]).forEach(id=>{
      const onClick=readOnly
        ? (()=>showPersonalDetail(id))  // closed: read-only detail in personal slot
        : (()=>{
            // v96.6 — ignore the click if it's the residual click from a drag, so
            // dragging an item into a tier doesn't also open the ballot on phone.
            if(voteDragActive||(Date.now()-voteDragJustEnded)<400)return;
            // v131/v132 — second click on the already-current item closes the ballot
            // (desktop right-rail OR phone sheet): vp-slot visible + this item current.
            if(voteCurrentItem===id&&!document.getElementById('vp-slot')?.classList.contains('hidden')){closeBallotAny();return;}
            voteCurrentItem=id;setLastNav('vote','vote-mytierlist',id);renderBallot();renderVotePool();renderMyTierList(); // v120 item 5
          });
      const cell=voteItemCell(id,'vt-item',1,onClick);
      if(id===voteCurrentItem&&!readOnly)cell.classList.add('vt-selected'); // v96.6 — highlight the item currently on the ballot, matching community-results selection
      if(!readOnly&&!isParamSession()){
        makeVoteDraggable(cell,id);
        // v97 — item-level reorder within a tier (mirrors the creator's item drop).
        // Shows the drop indicator, and on drop inserts the dragged item before this
        // one, then persists the tier's new order. If the item came from another
        // tier, also cast the placement vote for this tier.
        cell.ondragover=e=>{const src=voteDragItemId;if(!src)return;e.preventDefault();e.stopPropagation();markDropPoint(cell);};
        cell.ondragleave=()=>clearDropPoint(cell);
        cell.ondrop=e=>{
          const src=voteDragItemId||e.dataTransfer.getData('text/plain');
          clearDropPoint(cell);
          if(!src||isParamSession())return;
          e.preventDefault();e.stopPropagation();
          // v97.8 — dropping on its OWN cell means "stay here": consume the drop
          // (so it doesn't bubble to the row handler, which would append to end)
          // and do nothing. Otherwise insert src before this item.
          if(src===id)return;
          voteReorderInto(src,t.id,id); // insert src before this item in tier t
        };
      }
      its.appendChild(cell);
    });
    row.appendChild(lbl);row.appendChild(its);el.appendChild(row);
  });
}
function makeVoteDraggable(cell,id){
  cell.draggable=true;
  cell.addEventListener('dragstart',e=>{voteDragItemId=id;voteDragActive=true;e.dataTransfer.setData('text/plain',id);e.dataTransfer.effectAllowed='move';cell.classList.add('vt-dragging');});
  cell.addEventListener('dragend',()=>{voteDragItemId=null;cell.classList.remove('vt-dragging');
    // v96.6 — a drag often fires a residual click on touch, which would run the
    // cell's onClick (select item + open ballot). Keep a short guard window so
    // that click is ignored. The drag itself already placed the item.
    voteDragJustEnded=Date.now();voteDragActive=false;
    clearAllDropPoints();}); // v97.6 — clear any lingering indicator/make-room
}

let ballotPopupItem=null;
function openBallotImg(){
  const it=ballotPopupItem;if(!it)return;
  const big=document.getElementById('ballot-img-big');if(!big)return;
  big.innerHTML='';
  const sz=voteShapeSize(1);   // same shape rules as the ballot/list images
  if(it.img){
    const im=document.createElement('img');im.src=it.img;im.draggable=false;
    // v79.4 — same guard openSheetImg got in v72, which this one never received:
    // forcing an aspect ratio while using object-fit:contain letterboxes the
    // picture inside a box it does not fill, so a no-crop portrait shrank to a
    // strip. Cover modes still need the ratio, to crop correctly.
    if(!sz.contain)im.style.aspectRatio=(sz.w/sz.h);
    im.style.objectFit=sz.contain?'contain':'cover';
    im.style.borderRadius=sz.round?'50%':'12px';
    // v79.4 — was width:auto/height:auto, so the image rendered at its NATURAL
    // size: the 92vw/82vh caps only ever shrank it, never grew it, and a modest
    // source came out no bigger than the detail panel it was opened from.
    // Drive HEIGHT off the viewport and let the aspect ratio give the width, so
    // it fills the space whatever the shape (max-width still stops a wide
    // landscape overflowing).
    // v79.5 — 25% smaller than v79.4 (0.78 -> 0.58). Phone keeps natural sizing.
    if(isPhone()){
      im.style.width='auto';im.style.height='auto';
    }else{
      im.style.height=Math.round(window.innerHeight*0.58)+'px';
      im.style.width='auto';im.style.maxWidth='92vw';im.style.maxHeight='82vh';
    }
    big.appendChild(im);
  }else{
    openSheetText(it.name||'',(viewerData&&viewerData.imgShape)||'square');return; // v150 — shaped
  }
  document.getElementById('ballot-img-modal').classList.add('show');
}
function closeBallotImg(){document.getElementById('ballot-img-modal').classList.remove('show');}
// v90 — build a read-only parameter list for the ballot, styled like the creator
// detail panel. `which`:
//   'all'      — every param (used by MANUAL voting: nothing is rated, so all
//                params are just context for choosing a tier).
//   'nonslider'— only text/non-slider params (used by AUTO-RANK: the slider params
//                are the interactive controls, so we only add the fixed facts).
// Returns a DOM node (or null when there are no params to show). Shows both phone
// and desktop now (v90) — the voter wants the item's details in front of them.
function buildBallotParams(d,itemId,which){
  const params=(d.params||[]).filter(p=>which==='all'?true:(p&&p.type!=='slider'));
  if(!params.length)return null;
  // v91 — viewer item values live in paramValues (same source as the detail panel);
  // v90 read .values, which is why every text param showed "—".
  const pv=(d.itemData?.[itemId]||{}).paramValues||{};
  const box=document.createElement('div');box.className='vb-ro-params';box.id='vb-ro-params';
  const title=document.createElement('div');title.className='vb-ro-title';title.textContent='Item details';
  box.appendChild(title);
  params.forEach(p=>{
    const row=document.createElement('div');row.className='vb-ro-row';
    const nm=document.createElement('span');nm.className='vb-ro-name';nm.textContent=(p.name||'Parameter')+(p.unit?' ('+p.unit+')':'');
    const vl=document.createElement('span');vl.className='vb-ro-val';
    vl.textContent=paramDisplayVal(p,pv[p.id]); // v94.1 — empty slider -> 1/10
    row.appendChild(nm);row.appendChild(vl);box.appendChild(row);
  });
  return box;
}
function renderBallot(){
  const empty=document.getElementById('vote-ballot-empty');
  const card=document.getElementById('vote-ballot-card');
  // All items voted (and not currently re-selecting one): move the message to
  // the top banner and collapse the ballot slot so the list spans full width.
  if(!voteCurrentItem){
    if(!_manualBallotClose&&voteSession&&voteSession.status==='open'&&voteItemOrder.length&&Object.keys(myVotes).length>=voteItemOrder.length){
      const banner=document.getElementById('vote-banner');
      banner.style.display='';
      banner.textContent=isParamSession()?'🎉 You\'ve rated every item! Tap any item in your list to change your rating.':'🎉 You\'ve ranked every item! Tap any item in your list to change its tier.';
      closeSlot('vp-slot');
      document.getElementById('vp-slot')?.classList.remove('ballot-sheet'); // v89 — leave sheet mode when nothing to vote
      document.body.classList.remove('ballot-sheet-open');
      return;
    }
    // v134 — the empty ballot state must not always say "you've ranked every item".
    // v136 — nothing selected and not finished: collapse the ballot panel entirely.
    // The old "Tap an item in your list to place it." prompt is removed as redundant —
    // the pool header now carries the "X of Y items voted" progress instead.
    empty.style.display='none';card.style.display='none';
    closeSlot('vp-slot');
    document.getElementById('vp-slot')?.classList.remove('ballot-sheet');
    document.body.classList.remove('ballot-sheet-open');
    return;
  }
  // An item is selected -> ensure the ballot slot is open and banner reset.
  openSlot('vp-slot');
  // v89 — on phones, present the ballot as a fixed, non-blocking bottom sheet
  // (sized to content, dismissable). Desktop keeps the inline panel. This is the
  // ballot role only; the item-detail role uses .as-sheet separately.
  if(isPhone()){
    const s=document.getElementById('vp-slot');
    if(s){s.classList.add('ballot-sheet');s.classList.remove('as-sheet');}
    document.body.classList.add('ballot-sheet-open');   // v89 — enables list bottom scroll-padding
    closeOtherDetailSheets('vp-slot'); // v96.1 — opening the ballot closes any open community/creator detail sheet
  }
  if(voteSession&&voteSession.status==='open'){
    const banner=document.getElementById('vote-banner');
    banner.textContent=isParamSession()?'🗳️ Community voting is live — rate each item on the parameters!':'🗳️ Community voting is live — place each item where you think it belongs!';
  }
  empty.style.display='none';card.style.display='flex';
  const d=viewerData||{};const it=d.itemData?.[voteCurrentItem]||{};
  // Big, shape-aware item image (~3x the tier-list item size).
  const imgWrap=document.getElementById('vote-ballot-img');imgWrap.innerHTML='';
  ballotPopupItem=it;                          // remember for the enlarge popup
  imgWrap.classList.add('tappable');
  imgWrap.onclick=()=>openBallotImg();
  const sz=voteShapeSize(3);
  // v79.3 — on a phone the ballot has little vertical room, so the image is
  // capped by HEIGHT and the width follows from the shape's aspect ratio. Sizing
  // by width instead (as the old CSS did) squashed every shape into the same
  // square. Set here rather than in CSS because these are inline styles, and
  // fighting them from a stylesheet would need !important on every line.
  const phone=isPhone();
  const BALLOT_H=Math.min(140,Math.round(window.innerHeight*0.22)); // fits beside the tier buttons
  if(phone){imgWrap.style.width='auto';imgWrap.style.height='auto';}
  else{
    // v79.6 — was width = sz.w (voteShapeSize(3): a fixed 3x the tier-list item
    // size, so 216px for portrait). That made the ballot image visibly smaller
    // than the community detail image beside it, which fills its wrapper at
    // ~290px. Leaving the width unset lets .vote-ballot-img's stylesheet
    // width:100% apply, so both fill their slot and match.
    // NOTE: the <img> keeps max-height:60vh. On a short window a tall portrait
    // hits that cap while the width stays 100%, so the box stops following the
    // aspect ratio — object-fit:cover means it crops rather than distorts.
    imgWrap.style.width='';imgWrap.style.height='auto';
  }
  if(it.img){
    const im=document.createElement('img');im.src=it.img;im.draggable=false;
    if(phone){im.style.height=BALLOT_H+'px';im.style.width='auto';im.style.maxWidth='100%';}
    else{im.style.width='100%';im.style.maxHeight='60vh';}
    im.style.objectFit=sz.contain?'contain':'cover';
    im.style.borderRadius=sz.round?'50%':'14px';
    im.style.aspectRatio=(sz.w/sz.h);   // shape survives on both
    imgWrap.appendChild(im);
  }else{
    const tx=document.createElement('div');tx.className='vb-text';tx.textContent=it.name||voteCurrentItem;
    // v79.3 — text items follow the same rule. width:100% inside an auto-width
    // wrapper would collapse to nothing on a phone, so size by height there too.
    if(phone){tx.style.height=BALLOT_H+'px';tx.style.width='auto';tx.style.minWidth=BALLOT_H+'px';}
    else{tx.style.width='100%';}
    tx.style.aspectRatio=(sz.w/sz.h);
    imgWrap.appendChild(tx);
  }
  const nm=(it.name||'').trim();
  const nameEl=document.getElementById('vote-ballot-name');
  // v98.5 — only show the name BELOW for IMAGE items. A text item's name is already
  // the .vb-text box itself, so repeating it underneath is redundant (matches the
  // it.img&&nm guard the detail panels use). Gate on it.img, not just nm.
  if(it.img&&nm){nameEl.textContent=nm;nameEl.style.display='';}else{nameEl.style.display='none';}
  const btns=document.getElementById('vote-tier-btns');btns.innerHTML='';
  // v90 — remove any read-only params block from a prior render before rebuilding.
  const oldRO=document.getElementById('vb-ro-params');if(oldRO)oldRO.remove();
  const prompt=document.querySelector('.vote-ballot-prompt');
  if(isParamSession()){
    if(prompt)prompt.textContent='Rate each parameter, then confirm';
    const prior=(typeof myVotes[voteCurrentItem]==='object'&&myVotes[voteCurrentItem])||{};
    const current={};
    // v92 — live score readout: recompute from `current` and paint the ballot's
    // score block on each slider move, so the voter watches their score form.
    const sliderParams=viewerSliderParams();
    const scoreBox=document.getElementById('vb-score');
    const paintScore=()=>{
      if(!scoreBox)return;
      let score=0;sliderParams.forEach(p=>{const v=parseFloat(current[p.id]);if(!isNaN(v))score+=Math.min(10,Math.max(1,v));});
      const max=sliderParams.length*10;const pct=max>0?Math.round(score/max*100):0;
      document.getElementById('vb-score-main').textContent=score+' / '+max+' pts';
      document.getElementById('vb-score-pct').textContent=pct+'% of maximum score';
      document.getElementById('vb-score-fill').style.width=pct+'%';
      scoreBox.style.display=sliderParams.length?'':'none';
    };
    const wrap=document.createElement('div');wrap.className='vb-sliders';
    sliderParams.forEach(p=>{
      const rowEl=document.createElement('div');rowEl.className='vb-slider-row';
      const lab=document.createElement('div');lab.className='vb-slider-label';
      const nameSpan=document.createElement('span');nameSpan.textContent=p.name||'Param';
      const valSpan=document.createElement('span');valSpan.className='vb-slider-val';
      const inp=document.createElement('input');inp.type='range';inp.className='param-slider';inp.min='1';inp.max='10';inp.step='1';
      const init=parseFloat(prior[p.id]);inp.value=isNaN(init)?1:init;
      current[p.id]=parseInt(inp.value,10);valSpan.textContent=inp.value+' / 10';
      inp.oninput=()=>{current[p.id]=parseInt(inp.value,10);valSpan.textContent=inp.value+' / 10';paintScore();};
      lab.appendChild(nameSpan);lab.appendChild(valSpan);
      rowEl.appendChild(lab);rowEl.appendChild(inp);
      // v94 — 1–10 scale labels under the slider, matching the creator editor, so
      // voters can see the scale they're rating on.
      const scale=document.createElement('div');scale.className='slider-labels';
      for(let i=1;i<=10;i++){const s=document.createElement('span');s.textContent=i;scale.appendChild(s);}
      rowEl.appendChild(scale);
      wrap.appendChild(rowEl);
    });
    btns.appendChild(wrap);
    paintScore();   // initial paint from the starting slider values
    // v90 — show the item's NON-slider params (fixed facts like Year/Studio) as
    // read-only context below the sliders, so the voter can see them while rating.
    // Sliders stay interactive above; text params are just information.
    const roBox=buildBallotParams(d,voteCurrentItem,'nonslider');
    if(roBox)btns.appendChild(roBox);
    const confirmBtn=document.createElement('button');confirmBtn.className='vote-confirm-btn';
    confirmBtn.textContent=myVotes[voteCurrentItem]?'✓ Update rating':'✓ Confirm rating';
    confirmBtn.onclick=()=>{
      // v92 — feedback is now a brief GREEN state with a centred ✓ (subtle fade/scale
      // of the check), replacing the grow/scale pulse. Hold it a moment, then cast
      // (which re-renders the ballot). Guard against double-taps during the hold.
      if(confirmBtn.dataset.busy)return;confirmBtn.dataset.busy='1';
      confirmBtn.classList.add('confirmed');
      const vals={...current};
      setTimeout(()=>castParameterVote(voteCurrentItem,vals),200);
    };
    btns.appendChild(confirmBtn);
  }else{
    if(prompt)prompt.textContent='Tap a tier to vote';
    // v92 — no score in manual voting (output is a tier placement, not a score).
    const sb=document.getElementById('vb-score');if(sb)sb.style.display='none';
    // Manual voting: show the item's parameters as READ-ONLY context (phone AND
    // desktop, v90), so the voter can see its stats while choosing a tier. Manual
    // voting has no scores to set (output is a tier placement) — display only.
    const oldRO=document.getElementById('vb-ro-params');if(oldRO)oldRO.remove();
    const roBox=buildBallotParams(d,voteCurrentItem,'all');
    if(roBox)btns.parentNode.insertBefore(roBox,btns);   // sit above the tier buttons
    // v97.1 — move the "Tap a tier to vote" prompt to sit BELOW the details and
    // directly above the buttons (it's authored right under the image in the
    // markup, which put it above the details). Only for manual mode.
    if(prompt)btns.parentNode.insertBefore(prompt,btns);
    const mine=myVotes[voteCurrentItem];
    voteTiers.forEach(t=>{
      const b=document.createElement('button');b.className='vote-tier-btn';b.textContent=t.label;b.style.background=t.color;
      if(mine===t.id)b.classList.add('mine');
      const bid=voteCurrentItem;
      b.onclick=()=>{
        // v91 — same as confirm: show the press animation, then cast a beat later so
        // the re-render doesn't remove the button mid-animation.
        if(b.dataset.busy)return;b.dataset.busy='1';
        b.classList.remove('tapped');void b.offsetWidth;b.classList.add('tapped');
        setTimeout(()=>castPlacementVote(bid,t.id),150);
      };
      btns.appendChild(b);
    });
  }
  // v136 — progress counter moved to the pool header (see renderVotePool); the old
  // right-side #vote-progress readout is no longer populated.
}

// The pool shows only items NOT yet voted (voted ones move into the tier list).
function renderVotePool(){
  const pool=document.getElementById('vote-pool');pool.innerHTML='';
  const unvoted=voteItemOrder.filter(id=>!(id in myVotes));
  // v136 — progress counter now lives in the pool header (moved off the right-side ballot).
  const total=voteItemOrder.length,voted=total-unvoted.length;
  const lbl=document.getElementById('vote-pool-label');
  if(lbl)lbl.textContent=(total?voted+' of '+total+' items voted - ':'')+'Tap an item to rank it — or drag it into a tier';
  if(!unvoted.length){
    document.getElementById('vote-pool-wrap').style.display='none';
    return;
  }
  document.getElementById('vote-pool-wrap').style.display='';
  unvoted.forEach(id=>{
    const cell=voteItemCell(id,'vote-pool-item',1,()=>{if(voteCurrentItem===id&&!document.getElementById('vp-slot')?.classList.contains('hidden')){closeBallotAny();return;}voteCurrentItem=id;setLastNav('vote','vote-pool',id);renderBallot();renderVotePool();renderMyTierList();}); // v120 item 5
    if(id===voteCurrentItem)cell.classList.add('current');
    if(!isParamSession())makeVoteDraggable(cell,id);
    pool.appendChild(cell);
  });
}

// Parameter mode: optimistic like placement — record locally, advance, network in background.
function castParameterVote(itemId,values){
  // v90 — advance to the next item only on a FIRST vote; when UPDATING an item that
  // was already rated, stay on it (the voter is deliberately revising that item).
  const wasVoted=(itemId in myVotes);
  myVotes[itemId]=values;saveMyVotes();
  if(!wasVoted)voteCurrentItem=nextUnvotedAfter(itemId);
  renderMyTierList();renderBallot();renderVotePool();renderVoteResults();
  castVoteCall({sessionId:voteSession.id,token:voterToken(),payload:{itemId,values}})
    .then(r=>{if(r&&r.results){voteResults=r.results;renderVoteResults();}})
    .catch(e=>showViewerVoteError(e.message));
}
// v97.3 — the item's position within its tier in the VOTER's own list, sent with
// each placement vote so the backend can build the community row order (avg Borda).
// tierPos = 0-based index in the tier (in the same order the voter sees, via
// orderedTierIds); tierCount = how many items the voter has in that tier. Computed
// AFTER myVotes[itemId]=tierId is set, so the item is included.
function tierOrderInfo(itemId,tierId){
  const ids=[];
  voteItemOrder.forEach(id=>{if(myVotes[id]===tierId)ids.push(id);});
  const ordered=orderedTierIds(tierId,ids);
  const pos=ordered.indexOf(itemId);
  return {tierPos:pos<0?0:pos,tierCount:ordered.length};
}
function castPlacementVote(itemId,tierId,fromDrag){
  // v90 — same as parameter: advance only on a first vote, stay when re-placing an
  // already-voted item.
  // v96.5 — a DRAG-drop never advances and never opens the ballot: the drag IS the
  // placement, so focus stays on the item just dragged (you can still use the tier
  // buttons to move it), and a closed ballot stays closed. Only the tier-BUTTON tap
  // flow (fromDrag falsy) advances to the next unvoted item as before.
  const wasVoted=(itemId in myVotes);
  // Was the ballot open before this drop? (open = a current item is set and its
  // sheet/panel is showing). We refresh the ballot to the dragged item only if it
  // was already open — a closed ballot stays closed.
  const ballotWasOpen=!!voteCurrentItem;
  // v97 — maintain intra-tier order: if the tier changed on a drag, drop the item
  // out of its old tier's saved order and append to the new tier's order.
  if(fromDrag){
    const from=myVotes[itemId];
    if(from&&from!==tierId&&myOrder[from])myOrder[from]=myOrder[from].filter(x=>x!==itemId);
    if(myVotes[itemId]!==tierId){myOrder[tierId]=(myOrder[tierId]||[]).filter(x=>x!==itemId);myOrder[tierId].push(itemId);saveMyOrder();}
  }
  // Optimistic: record locally and advance IMMEDIATELY (no waiting on network).
  myVotes[itemId]=tierId;saveMyVotes();
  if(fromDrag){
    // Focus stays on the DRAGGED item (not the next one) so its tier buttons can
    // re-place it. Don't force the ballot open: only repaint it if it was open.
    if(ballotWasOpen)voteCurrentItem=itemId;
    renderMyTierList();renderVotePool();renderVoteResults();
    if(ballotWasOpen)renderBallot();
  }else{
    if(!wasVoted)voteCurrentItem=nextUnvotedAfter(itemId);
    renderMyTierList();renderBallot();renderVotePool();renderVoteResults();
  }
  // Fire the vote in the background; refresh results when it returns.
  const _oi=tierOrderInfo(itemId,tierId); // v97.3 — intra-tier order for community ranking
  castVoteCall({sessionId:voteSession.id,token:voterToken(),payload:{itemId,tierId,tierPos:_oi.tierPos,tierCount:_oi.tierCount}})
    .then(r=>{if(r&&r.results){voteResults=r.results;renderVoteResults();}})
    .catch(e=>showViewerVoteError(e.message));
}

function showViewerVoteError(msg){
  const el=document.getElementById('vote-progress');
  if(el){el.textContent='⚠️ '+(msg||'Vote failed');setTimeout(()=>renderBallot(),2500);}
}
// v97 — insert dragged item `src` immediately before `beforeId` within tier `tid`,
// updating the persisted intra-tier order (myOrder). If `src` came from a different
// tier, also record + cast the placement vote for `tid`. Never opens/advances the
// ballot (this is a drag reorder, like castPlacementVote's fromDrag path).
function voteReorderInto(src,tid,beforeId){
  if(isParamSession())return;
  const fromTier=myVotes[src];              // v97.3 — remember source tier before it's overwritten
  const tierChanged=(fromTier!==tid);
  // Build the target tier's current ordered id list (what renderMyTierList shows),
  // excluding src, then splice src in before beforeId.
  const current=[];
  voteItemOrder.forEach(id=>{if(myVotes[id]===tid&&id!==src)current.push(id);});
  const ordered=orderedTierIds(tid,current);
  let idx=ordered.indexOf(beforeId);if(idx<0)idx=ordered.length;
  ordered.splice(idx,0,src);
  // If src is moving from another tier, drop it out of that tier's saved order too.
  if(tierChanged){
    if(fromTier&&myOrder[fromTier])myOrder[fromTier]=myOrder[fromTier].filter(x=>x!==src);
    myVotes[src]=tid;saveMyVotes();
  }
  captureTierOrder(tid,ordered);
  renderMyTierList();renderVotePool();renderVoteResults();
  // v97.3 — reordering shifts EVERY item's position in the tier, so re-send the
  // whole affected tier (not just the moved item), else the others' stored tierPos
  // go stale on the backend and the community order is computed from wrong numbers.
  // Also re-send the SOURCE tier if the item moved between tiers (its remaining
  // items shifted up). Votes are upserts, so re-sending is just position updates.
  resendTierOrder(tid);
  if(tierChanged&&fromTier&&fromTier!==tid)resendTierOrder(fromTier);
}
// Re-send every item currently in `tid` with its up-to-date tierPos/tierCount, so
// the backend's stored positions match the voter's current order. Fire-and-forget;
// the last response refreshes results.
function resendTierOrder(tid){
  const ids=[];voteItemOrder.forEach(id=>{if(myVotes[id]===tid)ids.push(id);});
  const ordered=orderedTierIds(tid,ids);const n=ordered.length;
  ordered.forEach((id,i)=>{
    castVoteCall({sessionId:voteSession.id,token:voterToken(),payload:{itemId:id,tierId:tid,tierPos:i,tierCount:n}})
      .then(r=>{if(r&&r.results){voteResults=r.results;renderVoteResults();}})
      .catch(e=>showViewerVoteError(e.message));
  });
}

// Compute community placement {tierId:[itemIds]} from results.
// ── Parameter-voting helpers (Phase 2) ──
function isParamSession(){return !!(voteSession&&voteSession.mode==='parameter');}
function isH2HSession(){return !!(voteSession&&voteSession.mode==='head2head');}

// ── v80: head-to-head voting ───────────────────────────────────────────────
// A fixed budget, so the end is visible. Elo needs each item in perhaps 10-20
// matchups to place it, and pairs are served least-played-first, so 25 votes
// from each of a handful of people covers a list evenly — far fewer than the
// n(n-1)/2 pairings a naive approach would need.
const H2H_BUDGET=25;
let h2hPair=null;        // the two item ids currently on screen
let h2hBusy=false;       // guards against double-taps casting two votes
let h2hExtra=false;      // set once the voter chooses to carry on past the budget
let h2hNextPair=null;    // v81 — prefetched pair AFTER the current one
let h2hPrefetching=false;// v81 — guards against overlapping prefetch requests
let h2hLoading=false;    // v81.3 — serialises h2hLoadPair so rapid skips can't overlap
let h2hPhoneDetailsOpen=false;// v81.1 — phone: details expanded, remembered across pairs

// Progress is stored per session, so a reload mid-vote doesn't reset the count
// and hand someone a fresh 25.
function h2hCountKey(){return 'tlf_h2h_'+(voteSession?voteSession.id:'none');}
function h2hCount(){try{return parseInt(localStorage.getItem(h2hCountKey())||'0',10)||0;}catch(e){return 0;}}
function h2hBumpCount(){try{localStorage.setItem(h2hCountKey(),String(h2hCount()+1));}catch(e){}}
// v84.3 — persist the viewer's current matchup pair (keyed to the session) so a page
// refresh restores the SAME two items instead of jumping to a fresh pair, mirroring
// the creator side. Cleared implicitly when the session changes (different key).
function h2hPairKeyLS(){return 'tlf_h2hpair_'+(voteSession?voteSession.id:'none');}
function h2hSavePair(ids){try{if(Array.isArray(ids)&&ids.length===2)localStorage.setItem(h2hPairKeyLS(),JSON.stringify(ids));}catch(e){}}
function h2hLoadSavedPair(){
  try{
    const raw=localStorage.getItem(h2hPairKeyLS());if(!raw)return null;
    const ids=JSON.parse(raw);const d=viewerData||{};
    if(Array.isArray(ids)&&ids.length===2&&ids.every(id=>d.itemData&&d.itemData[id]))return ids;
  }catch(e){}
  return null;
}
// v84.3 — warm image bytes for a viewer pair (reads viewerData), same idea as the
// creator's ch2hPreloadImages.
const _h2hPreloaded=new Set();
function h2hPreloadImages(ids){
  if(!Array.isArray(ids))return;const d=viewerData||{};
  ids.forEach(id=>{const src=(d.itemData&&d.itemData[id]||{}).img;
    if(src&&!_h2hPreloaded.has(src)){_h2hPreloaded.add(src);const im=new Image();im.src=src;}});
}

function enterH2HMode(){
  document.getElementById('viewer-tierlist').style.display='none';
  document.getElementById('vote-view').classList.add('show');
  // The per-item machinery has no meaning here: there is no list to work
  // through, so the personal row (ballot, pool, your-ranking list) stays hidden.
  document.getElementById('vote-personal-row').style.display='none';
  document.getElementById('vote-creator-row').style.display='none';
  document.getElementById('vote-community-row').style.display='';
  document.getElementById('h2h-view').style.display='';
  const banner=document.getElementById('vote-banner');
  banner.style.display='';
  banner.textContent='⚔️ Head-to-head voting is live — pick a winner from each pair!';
  const d=viewerData||{};
  voteTiers=(d.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  h2hExtra=false;
  h2hNextPair=null;h2hPrefetching=false;h2hLoading=false;   // v81 — fresh session, no stale prefetch/load
  h2hVotedPairs.clear();h2hRecentPairs.length=0;  // v81.2 — new session, forget history
  renderVoteResults();
  // v84.3 — if the voter was mid-matchup before a refresh, resume the SAME pair
  // (mirrors the creator side) instead of jumping to a fresh one.
  const savedPair=h2hLoadSavedPair();
  if(savedPair&&!(h2hVotedPairs.has(h2hPairKey(savedPair)))){
    h2hPair=savedPair;h2hNoteRecent(h2hPairKey(savedPair));
    h2hPreloadImages(savedPair);
    h2hRenderPair(savedPair);
    h2hPrefetchNext();
  }else{
    h2hRefresh();
  }
  startVotePolling2();
}

function exitH2HMode(){
  const v=document.getElementById('h2h-view');
  if(v)v.style.display='none';
}

// Decide between "show a pair" and "you're done", then draw it.
function h2hRefresh(){
  const done=document.getElementById('h2h-done');
  const pair=document.getElementById('h2h-pair');
  const skip=document.getElementById('h2h-skip-wrap');
  const n=h2hCount();
  document.getElementById('h2h-progress').textContent=
    h2hExtra?(n+' votes cast'):(Math.min(n,H2H_BUDGET)+' of '+H2H_BUDGET);
  if(n>=H2H_BUDGET&&!h2hExtra){
    pair.style.display='none';skip.style.display='none';done.style.display='';
    h2hSetDrawers(null);   // v81 — no pair, so no side drawers
    const ptog=document.getElementById('h2h-phone-details-toggle');if(ptog)ptog.style.display='none';
    document.getElementById('h2h-prompt').textContent='Thanks for voting';
    document.getElementById('h2h-done-sub').textContent=
      'Your '+n+' votes are in. The community ranking below updates as more people vote.';
    return;
  }
  pair.style.display='';skip.style.display='';done.style.display='none';
  pair.classList.remove('h2h-swapping');   // v81 — clear any leftover fade
  document.getElementById('h2h-prompt').textContent='Which one is better?';
  h2hLoadPair();
}

function h2hKeepGoing(){h2hExtra=true;h2hRefresh();}
function h2hSkip(){if(!h2hBusy&&!h2hLoading)h2hLoadPair();}   // no vote cast, just a new pair

// v81 — a prefetched next pair, so a vote swaps to it instantly instead of
// waiting on a fresh matchup request. Fetched in the background while the voter
// looks at the current pair. (State declared with the other h2h vars above.)
// v81.2 — two distinct sets:
//   h2hVotedPairs  : pairs the voter has RESOLVED. Never shown again — showing
//                    one and voting on it is exactly what triggers the backend's
//                    409 "already voted on this matchup". This is the hard filter.
//   h2hRecentPairs : the last few pairs shown (voted or skipped), used only to
//                    avoid an immediate repeat. Skipped pairs may return later.
const h2hVotedPairs=new Set();
const h2hRecentPairs=[];
const H2H_RECENT_MAX=4;
function h2hPairKey(ids){return ids.slice().sort().join('|');}
function h2hNoteRecent(key){h2hRecentPairs.push(key);while(h2hRecentPairs.length>H2H_RECENT_MAX)h2hRecentPairs.shift();}
function h2hIsBlocked(ids,allowRecent){
  const k=h2hPairKey(ids);
  if(h2hVotedPairs.has(k))return true;            // never re-show a voted pair
  if(!allowRecent&&h2hRecentPairs.includes(k))return true; // avoid immediate repeat
  return false;
}
// Fetch a pair that isn't voted (and, on the first pass, isn't a recent repeat).
// Two-pass: first avoid recent repeats; if that keeps failing, accept a non-voted
// repeat rather than dead-ending. Returns null only when EVERY pair is voted.
async function h2hFetchFreshPair(){
  let lastNonVoted=null;
  // v85.1 — tell the backend the pair the voter is looking at now, so the next
  // matchup shares at most one item with it (community pairing variety, cast-vote v8).
  const lastItems=(h2hPair&&h2hPair.length)?h2hPair.slice():[];
  for(let i=0;i<8;i++){
    const r=await castVoteCall({action:'matchup',sessionId:voteSession.id,size:2,lastItems});
    const ids=(r&&r.items)||null;
    if(!ids||ids.length<2)return null;
    if(h2hVotedPairs.has(h2hPairKey(ids))){continue;} // voted -> keep trying
    lastNonVoted=ids;                                  // a re-showable pair
    if(!h2hRecentPairs.includes(h2hPairKey(ids)))return ids; // ideal: not recent
  }
  // Couldn't find a non-recent pair, but found non-voted ones -> reshow one
  // rather than dead-ending. Only truly out when everything is voted.
  return lastNonVoted;
}
function h2hPrefetchNext(){
  if(h2hPrefetching||!voteSession)return;
  h2hPrefetching=true;
  h2hFetchFreshPair().then(ids=>{h2hNextPair=ids;}).catch(()=>{h2hNextPair=null;})
                .finally(()=>{h2hPrefetching=false;});
}

async function h2hLoadPair(){
  if(!voteSession)return;
  if(h2hLoading)return;           // v81.3 — an earlier load is still running; ignore
  h2hLoading=true;
  const wrap=document.getElementById('h2h-pair');
  try{
    // Use the prefetched pair if it isn't a voted pair; otherwise fetch fresh.
    if(h2hNextPair&&!h2hVotedPairs.has(h2hPairKey(h2hNextPair))){
      h2hPair=h2hNextPair;h2hNextPair=null;
      h2hNoteRecent(h2hPairKey(h2hPair));
      h2hSavePair(h2hPair);   // v84.3 — remember for refresh/restore
      wrap.classList.remove('h2h-swapping');
      h2hRenderPair(h2hPair);
      h2hPrefetchNext();
      return;
    }
    h2hNextPair=null;
    wrap.classList.add('h2h-swapping');
    const ids=await h2hFetchFreshPair();
    if(!ids){
      // Genuinely nothing left the voter hasn't already voted on.
      wrap.classList.remove('h2h-swapping');
      wrap.innerHTML='<div class="h2h-done-sub">You\'ve voted on every matchup — thank you! The community ranking below keeps updating as others vote.</div>';
      const skip=document.getElementById('h2h-skip-wrap');if(skip)skip.style.display='none';
      const ptog=document.getElementById('h2h-phone-details-toggle');if(ptog)ptog.style.display='none';
      h2hSetDrawers(null);
      return;
    }
    h2hPair=ids;
    h2hNoteRecent(h2hPairKey(ids));
    h2hSavePair(h2hPair);   // v84.3 — remember for refresh/restore
    h2hRenderPair(h2hPair);   // v84.1 — reveals itself once images are decoded
    h2hPrefetchNext();
  }catch(e){
    wrap.classList.remove('h2h-swapping');
    wrap.innerHTML='<div class="h2h-done-sub">Couldn\'t load a matchup — '+(e.message||'try again')+'</div>';
    h2hSetDrawers(null);
  }finally{
    h2hLoading=false;
  }
}

// v82.3 — ONE renderer for both matchup screens so they can't drift apart. The
// ctx defaults to the viewer, so every existing viewer call is byte-for-byte
// unchanged. Only the plumbing that legitimately differs is parameterised.
const H2H_CTX_VIEWER={
  pair:'h2h-pair', view:'h2h-view', left:'h2h-drawer-left', right:'h2h-drawer-right',
  skipWrap:'h2h-skip-wrap', toggleId:'h2h-phone-details-toggle', cdPrefix:'h2h-cd-',
  imgMax:230,   // v83.6 — viewer has full page width; unchanged from before
  data:()=>viewerData||{},
  fill:(el,id)=>h2hFillDetail(el,id),
  vote:(id)=>h2hVote(id),
  getPhoneOpen:()=>h2hPhoneDetailsOpen,
  setPhoneOpen:(v)=>{h2hPhoneDetailsOpen=v;}
};
const H2H_CTX_CREATOR={
  pair:'ch2h-pair', view:'ch2h-view', left:'ch2h-drawer-left', right:'ch2h-drawer-right',
  skipWrap:'ch2h-skip-wrap', toggleId:'ch2h-phone-details-toggle', cdPrefix:'ch2h-cd-',
  // v83.7 — full-size images (230), same as the viewer. The v83.6 130px cap was a
  // wrong fix for a column that actually has room; it made the images tiny.
  imgMax:230,
  data:()=>buildSaveData(),
  fill:(el,id)=>ch2hFillDetail(el,id),
  vote:(id)=>ch2hVote(id),
  getPhoneOpen:()=>ch2hPhoneDetailsOpen,
  setPhoneOpen:(v)=>{ch2hPhoneDetailsOpen=v;}
};

function h2hRenderPair(ids,ctx){
  ctx=ctx||H2H_CTX_VIEWER;
  const d=ctx.data()||{};
  const wrap=document.getElementById(ctx.pair);wrap.innerHTML='';
  const phone=isPhone();
  // v83.6 — desktop image cap now travels with the context (viewer 230, creator
  // 130) so the creator's narrow column stops overlapping the two cards. Phone is
  // unchanged (150, single card per row anyway).
  const deskMax=(ctx&&ctx.imgMax)||230;
  const imgMaxH=phone?150:deskMax;
  const imgMaxW=phone?150:deskMax;
  ids.forEach(id=>{
    const it=(d.itemData||{})[id]||{};
    const card=document.createElement('div');card.className='h2h-card';
    card.dataset.itemId=id;   // v81.4 — reward beat maps by this, not h2hPair order
    const imgWrap=document.createElement('div');imgWrap.className='h2h-card-img';
    // v84.1 — respect the list's image shape (round / portrait / landscape / nocrop
    // / square), sourced from THIS context's data (creator uses buildSaveData, not
    // viewerData). Previously the card forced object-fit:contain and only applied a
    // round border, so shaped lists looked wrong here. Match the other surfaces:
    // shaped modes crop-to-fill (cover) inside a fixed aspect box; nocrop contains.
    const shape=(d.imgShape||'square');
    const ar=(shape==='portrait')?(285/399):(shape==='landscape')?(120/80):1;
    const contain=(shape==='nocrop');
    const roundImg=(shape==='round');
    if(it.img){
      const im=document.createElement('img');im.src=it.img;im.draggable=false;
      if(contain){
        // nocrop — show the whole image at natural aspect, capped by the max box.
        im.style.maxHeight=imgMaxH+'px';im.style.maxWidth=imgMaxW+'px';
        im.style.height='auto';im.style.width='auto';im.style.objectFit='contain';
        im.style.borderRadius='10px';
      }else{
        // shaped — fixed aspect box, crop to fill.
        const boxW=(ar>=1)?imgMaxW:Math.round(imgMaxH*ar);
        const boxH=(ar>=1)?Math.round(imgMaxW/ar):imgMaxH;
        im.style.width=boxW+'px';im.style.height=boxH+'px';
        im.style.objectFit='cover';
        im.style.borderRadius=roundImg?'50%':'10px';
      }
      imgWrap.appendChild(im);
    }else{
      const tx=document.createElement('div');tx.className='h2h-card-text';
      tx.style.boxSizing='border-box';   // fixed dims include the padding
      // Build Y — give the text box the SAME shape/footprint the image would have,
      // so a text item looks like a proper card (matching box) rather than a tall
      // auto-height rectangle. nocrop has no fixed aspect, so fall back to a square.
      if(contain){
        tx.style.width=imgMaxW+'px';tx.style.height=imgMaxH+'px';tx.style.borderRadius='10px';
      }else{
        const boxW=(ar>=1)?imgMaxW:Math.round(imgMaxH*ar);
        const boxH=(ar>=1)?Math.round(imgMaxW/ar):imgMaxH;
        tx.style.width=boxW+'px';tx.style.height=boxH+'px';
        tx.style.borderRadius=roundImg?'50%':'10px';
      }
      tx.textContent=it.name||id;imgWrap.appendChild(tx);
    }
    card.appendChild(imgWrap);
    // v87 — the name is already shown inside the phone score/detail box
    // (h2hFillDetail adds an h2h-card-name at the top), so the old under-image
    // name here was a duplicate. Removed; the score box is the single place.
    const chk=document.createElement('div');chk.className='h2h-check';chk.textContent='✓';card.appendChild(chk);
    const delta=document.createElement('div');delta.className='h2h-delta';card.appendChild(delta);
    if(phone){
      const det=document.createElement('div');det.className='h2h-card-detail'+(ctx.getPhoneOpen()?' show':'');det.id=ctx.cdPrefix+id;
      det.onclick=(ev)=>ev.stopPropagation();   // tapping detail must not cast a vote
      ctx.fill(det,id);
      card.appendChild(det);
    }
    card.onclick=()=>ctx.vote(id);
    wrap.appendChild(card);
  });
  wrap.dataset.pair=h2hPairKey(ids);
  wrap.dataset.a=ids[0];wrap.dataset.b=ids[1];
  // Desktop: fill the two side drawers, left = first id, right = second id.
  h2hSetDrawers(phone?null:ids,ctx);
  // Phone: a single shared details toggle below the pair.
  h2hSyncPhoneToggle(phone,ids,ctx);
  // v84.1 — the drawers (text) fill instantly from memory, but the <img>s stream
  // in a moment later, so the previous pair's images lingered under the new text
  // for a beat (the "stale" flash). Hold the pair hidden (h2h-swapping = opacity 0)
  // until its images are actually decoded, then reveal — so images and text appear
  // together. Preloaded images are already complete, so this is instant for them.
  const imgs=[...wrap.querySelectorAll('.h2h-card-img img')];
  const reveal=()=>{wrap.classList.remove('h2h-swapping');};
  if(!imgs.length){reveal();return;}
  wrap.classList.add('h2h-swapping');
  let pending=imgs.length;
  const done=()=>{if(--pending<=0)reveal();};
  imgs.forEach(im=>{
    if(im.complete&&im.naturalWidth>0){done();}
    else{im.addEventListener('load',done,{once:true});im.addEventListener('error',done,{once:true});}
  });
  // Safety net: never leave the pair hidden if an image stalls.
  setTimeout(reveal,1200);
}

// v81.2 — a single centered down-arrow toggles BOTH items' detail on phone; it
// rotates up when open. Choice persists across pairs. Centered to match the
// "Can't decide" link below it.
function h2hSyncPhoneToggle(phone,ids,ctx){
  ctx=ctx||H2H_CTX_VIEWER;
  const skipWrap=document.getElementById(ctx.skipWrap);
  let tog=document.getElementById(ctx.toggleId);
  if(!phone){if(tog)tog.style.display='none';return;}
  if(!tog){
    tog=document.createElement('button');tog.id=ctx.toggleId;tog.className='h2h-arrow-toggle';
    tog.setAttribute('aria-label','Show details');
    tog.innerHTML='<span class="h2h-arrow">▾</span>';
    // sits just above the skip link, centered
    if(skipWrap&&skipWrap.parentNode)skipWrap.parentNode.insertBefore(tog,skipWrap);
  }
  tog.style.display='';
  tog.classList.toggle('open',ctx.getPhoneOpen());
  tog.setAttribute('aria-label',ctx.getPhoneOpen()?'Hide details':'Show details');
  tog.onclick=(ev)=>{
    ev.stopPropagation();
    ctx.setPhoneOpen(!ctx.getPhoneOpen());
    const open=ctx.getPhoneOpen();
    document.querySelectorAll('#'+ctx.pair+' .h2h-card-detail').forEach(el=>el.classList.toggle('show',open));
    tog.classList.toggle('open',open);
    tog.setAttribute('aria-label',open?'Hide details':'Show details');
  };
}

// Fill a container with an item's detail (score block + community rows). Reused
// by both the desktop drawers and the phone below-card detail.
function h2hFillDetail(el,id){
  el.innerHTML='';
  const d=viewerData||{};
  const it=(d.itemData||{})[id]||{};
  const nm=(it.name||'').trim();
  if(it.img&&nm){const h=document.createElement('div');h.className='h2h-card-name';h.style.marginBottom='8px';h.textContent=nm;el.appendChild(h);}
  const si=detailScoreInfo(id,d,voteResults);
  if(si&&si.show)el.appendChild(buildScoreDisplay(si));
  const cRows=detailCommunityRows(id,d,voteResults);
  if(cRows&&cRows.length){cRows.forEach(r=>el.appendChild(vdRow(r.color,r.label,r.value)));}
  const plInfo=detailPlacementInfo(id,d,voteResults);
  if(plInfo)el.appendChild(vdRow(plInfo.color,'Community tier',plInfo.label));
  if(!el.children.length){const e=document.createElement('div');e.className='h2h-drawer-empty';e.textContent='No votes for this item yet.';el.appendChild(e);}
}

// Desktop side drawers. ids=null hides them (phone, or no pair).
function h2hSetDrawers(ids,ctx){
  ctx=ctx||H2H_CTX_VIEWER;
  const view=document.getElementById(ctx.view);
  const L=document.getElementById(ctx.left);
  const R=document.getElementById(ctx.right);
  if(!L||!R)return;
  if(!ids){
    L.style.display='none';R.style.display='none';
    if(view)view.classList.remove('h2h-has-drawers');
    return;
  }
  L.style.display='';R.style.display='';
  if(view)view.classList.add('h2h-has-drawers');
  ctx.fill(L,ids[0]);
  ctx.fill(R,ids[1]);
}

async function h2hVote(winnerId){
  if(h2hBusy||!voteSession)return;
  // v81.3 — trust the pair actually ON SCREEN, not the h2hPair variable, which
  // can drift on rapid skips. The winner is the clicked card; the loser is the
  // other stamped id.
  const wrap=document.getElementById('h2h-pair');
  const a=wrap&&wrap.dataset.a, b=wrap&&wrap.dataset.b;
  if(!a||!b||(winnerId!==a&&winnerId!==b))return;   // click didn't match the shown pair
  const loser=(winnerId===a)?b:a;
  const votedKey=h2hPairKey([winnerId,loser]);
  // If this pair was already resolved (shouldn't happen now, but guard anyway),
  // skip the doomed request and just load a fresh pair.
  if(h2hVotedPairs.has(votedKey)){h2hRefresh();return;}
  h2hBusy=true;
  h2hPair=[winnerId,loser];   // resync the variable to what we're voting
  // v83.7 — MATCH THE CREATOR EXPERIENCE (ch2hVote). Previously this awaited the
  // network round trip before showing the reward, so the green border/✓ appeared
  // late, and on a FIRST vote the "before" rating was missing so no delta pill
  // showed. Now we predict the delta with the same Elo formula the server uses and
  // fire the reward beat instantly; the vote call + standings refresh overlap it.
  const ELO_START=1500;
  const before=(voteResults&&voteResults.items)||{};
  const bW=(before[winnerId]&&typeof before[winnerId].rating==='number')?before[winnerId].rating:ELO_START;
  const bL=(before[loser]&&typeof before[loser].rating==='number')?before[loser].rating:ELO_START;
  const mW=(before[winnerId]&&before[winnerId].matches)||0;
  const mL=(before[loser]&&before[loser].matches)||0;
  const kW=(mW<5)?64:32, kL=(mL<5)?64:32;      // new_until=5, k_new=64, k=32
  const ea=1/(1+Math.pow(10,(bL-bW)/400));
  const predW=kW*(1-ea), predL=-kL*(1-ea);
  // Fire the vote in the background; don't make the visual wait on it.
  const votePromise=castVoteCall({
    sessionId:voteSession.id,token:voterToken(),
    payload:{items:[winnerId,loser],order:[winnerId,loser]}   // order = the ranking
  });
  try{
    h2hVotedPairs.add(votedKey);   // v81.2 — never show this pair again
    h2hBumpCount();
    // Reward beat starts NOW with the predicted deltas.
    const rewardDone=h2hRewardBeat(winnerId,loser,predW,predL);
    // The authoritative standings land with the response; apply them (updates the
    // ranking + the exact pill via a re-render) without gating the animation.
    const r=await votePromise;
    if(r&&r.results){voteResults=r.results;renderVoteResults();}
    await rewardDone;
  }catch(e){
    // A 409 "already voted" means this pair was resolved before (votes are
    // final). Retire it so it can't be served again, and move on quietly.
    if(/already voted/i.test(e.message||'')){
      h2hVotedPairs.add(votedKey);
    }else{
      showFlash('⚠️ '+(e.message||'Vote failed'));
    }
  }
  h2hBusy=false;
  h2hRefresh();
}

// Prefer an exact backend delta (r.deltas[id]); fall back to new-minus-old from
// the fresh standings; null if neither is available (pill stays hidden).
function h2hResolveDelta(r,id,beforeRating){
  if(r&&r.deltas&&typeof r.deltas[id]==='number')return r.deltas[id];
  const after=(r&&r.results&&r.results.items&&r.results.items[id]&&r.results.items[id].rating);
  if(typeof after==='number'&&typeof beforeRating==='number')return after-beforeRating;
  return null;
}

// Winner scales + glows + ✓; loser dims. Delta pills (if any). Hold, then fade
// the pair out so the next one slides in cleanly.
function h2hRewardBeat(winnerId,loserId,dW,dL){
  return new Promise(resolve=>{
    const wrap=document.getElementById('h2h-pair');
    const cards=wrap?wrap.querySelectorAll('.h2h-card'):[];
    cards.forEach((card)=>{
      // v81.4 — map by the card's OWN id, not h2hPair position. h2hVote reorders
      // h2hPair to winner-first, so positional mapping painted the wrong card.
      const id=card.dataset.itemId;
      const isWin=(id===winnerId);
      card.classList.add(isWin?'h2h-win':'h2h-lose');
      card.style.cursor='default';card.onclick=null;
      const d=isWin?dW:dL;
      if(typeof d==='number'&&Math.abs(d)>=0.5){
        const pill=card.querySelector('.h2h-delta');
        if(pill){const up=d>0;pill.textContent=(up?'+':'')+Math.round(d)+' Elo';
          pill.classList.add(up?'up':'down');card.classList.add('h2h-showdelta');}
      }
    });
    setTimeout(()=>{
      if(wrap)wrap.classList.add('h2h-swapping');
      setTimeout(resolve,160);   // matches the .h2h-swapping fade
    },1280);                     // v83.5 — 20% shorter than v81.1's 1600ms hold
  });
}
// ─────────────────────────────────────────────────────────────────────────────
// v82 — THE CREATOR'S OWN HEAD-TO-HEAD VOTING
// Same experience as the voter's matchup screen, with three differences:
//   1. No vote budget — the creator votes as long as they like; the counter
//      shows votes given rather than "n of 25".
//   2. Their votes are sent WITH their auth bearer, so cast-vote detects the
//      owner and stores the vote without applying it to community ratings.
//   3. Their ranking is their OWN (replayed from their votes via action:
//      "personal"), so the editor list is empty -> Unranked until they vote.
// ─────────────────────────────────────────────────────────────────────────────
let ch2hPair=null,ch2hBusy=false,ch2hLoading=false,ch2hNextPair=null,ch2hPrefetching=false;
let ch2hPhoneDetailsOpen=false;       // v82.3 — creator phone details toggle state
let ch2hActive=false;                 // v83.9 — creator is mid-voting (survives mode switches)
let ch2hCount=0;                      // votes the creator has cast this session
let creatorPersonal=null;             // {mode:'head2head',items:{id:{rating,matches}}}
let creatorPersonalListId=null;       // v84.6 — which list creatorPersonal was loaded for (so we don't clear/flash on same-list re-entry)
// v83.4 — the creator's OWN Elo numbers, computed by runEloRank (rating+matches+
// normalised pct per voted item). Stashed here so buildSaveData can persist it
// with the list, which is what lets a viewer's "Creator's ranking" detail panel
// show the creator's Elo/matchups/standing (the same way auto-rank's authored
// slider values already ride along in itemData). Only ever populated in Elo mode.
let creatorEloRanking={};
const ch2hVotedPairs=new Set();
const ch2hRecentPairs=[];

// Creator's vote call — same endpoint, but authenticated so isOwner is detected.
async function creatorVoteCall(payload){
  const at=await getAccessToken();
  const headers={'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY};
  if(at)headers['Authorization']='Bearer '+at;
  const resp=await fetch(`${SUPABASE_URL}/functions/v1/cast-vote`,{
    method:'POST',headers,body:JSON.stringify(payload)
  });
  const j=await resp.json().catch(()=>({}));
  if(!resp.ok)throw new Error(j.error||('Request failed ('+resp.status+')'));
  return j;
}

// Show/hide the whole creator-voting block. Only for an Elo list with a session.
// v83.9 — remember whether the creator was mid-voting (ch2hActive). Leaving elo
// hides the whole band, but returning must restore the SAME state — the matchup
// view if they were voting, the Start screen otherwise — instead of always
// snapping back to Start (which looked like the session had stopped). Stopping is
// now an explicit action (ch2hStop), not a side effect of switching modes.
function updateCreatorH2H(){
  const wrap=document.getElementById('ch2h-wrap');
  if(!wrap)return;
  // Build F — creator voting no longer needs a community session. Show the block
  // for any Elo list; "Start voting" mints the list id (privately) if needed.
  const on=(currentMode==='elo');
  wrap.style.display=on?'':'none';
  if(on){
    // Restore whichever screen matches the remembered state.
    const active=ch2hActive;
    document.getElementById('ch2h-view').style.display=active?'':'none';
    document.getElementById('ch2h-start').style.display=active?'none':'';
    if(active&&!ch2hPair){
      // v84.2 — restore the EXACT pair that was showing before a refresh/switch,
      // rather than fetching a fresh one (which felt like the matchup changed).
      const saved=ch2hLoadSavedPair();
      if(saved){ch2hPair=saved;ch2hNoteRecent(ch2hPairKey(saved));ch2hPreloadImages(saved);ch2hRenderPair(saved);ch2hPrefetchNext();}
      else ch2hRefresh();
    }
  }
}
// v84.2 — persist the current matchup pair so a refresh/mode-switch can restore the
// SAME two items. Keyed to the list; cleared on stop/reset/vote-advance.
function ch2hSavePair(ids){
  try{
    if(Array.isArray(ids)&&ids.length===2&&currentListId)
      localStorage.setItem('tlf_ch2h_pair',JSON.stringify({list:currentListId,ids}));
  }catch(e){}
}
function ch2hLoadSavedPair(){
  try{
    const raw=localStorage.getItem('tlf_ch2h_pair');if(!raw)return null;
    const o=JSON.parse(raw);
    if(o&&o.list===currentListId&&Array.isArray(o.ids)&&o.ids.length===2
       &&o.ids.every(id=>itemData[id]))return o.ids;   // both items must still exist
  }catch(e){}
  return null;
}
function ch2hClearSavedPair(){try{localStorage.removeItem('tlf_ch2h_pair');}catch(e){}}

// Build F — "Start voting" mints a PRIVATE list row (is_public:false) if the list
// has no id yet, so the creator can build their Elo ranking without publishing.
// Explicit Save is what flips it public + reveals the QR/community section. Returns
// true if the list has (or now has) an id; false if it couldn't be created.
async function ensureListMinted(){
  if(currentListId)return true;
  if(!currentUser){showFlash('⚠️ Please sign in first.');return false;}
  // Same quota rule as saving a new list — a private in-progress list counts.
  if(myLists.length>=MAX_LISTS){
    showFlash('⚠️ You can have up to '+MAX_LISTS+' lists. Delete one to start a new ranking.');
    return false;
  }
  try{
    const listData=buildSaveData();
    // v137 — private draft with NO share code; a code is only minted on publish.
    const{data,error}=await sb.from('tier_lists')
      .insert({user_id:currentUser.id,title:currentListTitle,data:listData,is_public:false,share_token:null})
      .select().single();
    if(error)throw error;
    currentListId=data.id;
    currentShareToken=null;
    currentListIsPublic=false;
    loadedListSavedAt=data.updated_at?new Date(data.updated_at).getTime():Date.now();
    startCreatorRealtime(currentListId);
    try{localStorage.setItem('tlf_last_list_id',data.id);}catch(e){}
    myLists.unshift(data);
    writeCache();
    await loadMyLists(true);   // refresh picker (marks it private)
    return true;
  }catch(e){
    showFlash('⚠️ '+friendlyQuotaError(e));
    return false;
  }
}

async function ch2hStart(){
  // Build Y — need at least two items to form a matchup; otherwise Start would mint
  // a list and show an empty/one-sided pair.
  if(ch2hLiveItems().length<2){showFlash('⚠️ Add at least 2 items before starting a vote.');return;}
  // Build F — ensure the list has an id (mints a private row if needed). Aborts on
  // quota so the creator can't silently exceed their list limit.
  const ready=await ensureListMinted();
  if(!ready)return;
  ch2hActive=true;   // v83.9 — remember we're mid-voting across mode switches
  try{if(currentListId)localStorage.setItem('tlf_ch2h_active_list',currentListId);}catch(e){}
  document.getElementById('ch2h-start').style.display='none';
  document.getElementById('ch2h-view').style.display='';
  if(!creatorPersonal)await ch2hLoadPersonal();
  // v84.3 — resume the SAME pair we were on (saved by Stop / earlier voting).
  const resumePair=(ch2hPair&&ch2hPair.length===2)?ch2hPair:ch2hLoadSavedPair();
  if(resumePair){
    ch2hPair=resumePair;ch2hNoteRecent(ch2hPairKey(resumePair));
    ch2hPreloadImages(resumePair);
    ch2hRenderPair(resumePair);
    ch2hSavePair(resumePair);
    ch2hPrefetchNext();
    return;
  }
  // v84.2 — no saved pair: warm the FIRST pair before showing it.
  if(!ch2hNextPair){
    try{
      const first=await ch2hFetchFreshPair();
      if(Array.isArray(first)){ch2hNextPair=first;ch2hPreloadImages(first);}
    }catch(e){/* fall through */}
  }
  ch2hRefresh();
  ch2hPrefetchNext();
}

// v84.3 — Stop hides the matchup view but KEEPS the current pair saved, so a later
// Start resumes the SAME matchup (like a refresh / mode switch) rather than jumping
// to a fresh pair. Full reset-to-fresh is what "Reset scores" is for. The community
// session and the creator's votes are untouched either way.
function ch2hStop(){
  ch2hActive=false;
  try{localStorage.removeItem('tlf_ch2h_active_list');}catch(e){} // v84.1
  // NOTE: intentionally do NOT clear ch2hPair or the saved pair here — Start resumes it.
  document.getElementById('ch2h-view').style.display='none';
  document.getElementById('ch2h-start').style.display='';
}

// Pull the creator's own ranking and re-place the editor list from it.
async function ch2hLoadPersonal(fromVote){
  // Build F — the creator's ranking is now list-keyed (creator_elo_matchups),
  // not tied to a community session. Needs a saved list id.
  if(!currentListId)return;
  try{
    const r=await manageVoting({action:'personalRanking',listId:currentListId});
    creatorPersonal=(r&&r.personal)||null;
    creatorPersonalListId=currentListId;   // v84.6 — remember which list this is for
    ch2hCount=creatorPersonalVoteCount();
    runEloRank();               // editor list now reflects the creator's own votes
    if(selectedItemId)renderScoreDisplay(selectedItemId);   // v82.1 — keep panel live
    // v83.1 — a VOTE changed the ranking, so light the save button (voting isn't
    // auto-saved; the creator must save to push the new order to viewers). Loading
    // on open / mode-entry passes no flag and must NOT mark dirty.
    if(fromVote)markDirty();
    // v85.1 — FLASH FIX: this repaint is async, so setMode/boot may have already
    // written the cache with the PREVIOUS mode's layout still in the DOM. Rewrite
    // the cache now that the Elo layout is actually painted, so the next reload
    // restores Elo directly instead of flashing the old (Auto/Manual) arrangement.
    writeCache();
  }catch(e){/* leave as-is; the count line will just show what we have */}
}
// Each matchup adds one match to each of two items, so total votes = sum/2.
function creatorPersonalVoteCount(){
  const items=(creatorPersonal&&creatorPersonal.items)||{};
  let m=0;Object.keys(items).forEach(k=>{m+=(items[k].matches||0);});
  return Math.round(m/2);
}

function ch2hRefresh(){
  const view=document.getElementById('ch2h-view');
  if(!view||view.style.display==='none')return;
  document.getElementById('ch2h-progress').textContent=ch2hCount+(ch2hCount===1?' vote':' votes');
  ch2hLoadPair();
}

function ch2hPairKey(ids){return ids.slice().sort().join('|');}
// v82.2 — the server now picks pairs from THIS caller's own vote history (it
// gets the token), so a single request returns a pair the creator hasn't voted
// on, or exhausted:true. No client-side retry loop needed.
// Build F — the creator's CURRENT items (all non-example items in the editor),
// sent live with each matchup request so a newly added item is votable at once,
// with no list re-save (Option 3).
function ch2hLiveItems(){
  return Object.keys(itemData||{}).filter(id=>itemData[id]&&!itemData[id].example);
}
async function ch2hFetchFreshPair(){
  if(!currentListId)return null;
  const items=ch2hLiveItems();
  if(items.length<2)return 'exhausted';
  // Build Y — send the currently-shown pair as lastPair so the backend avoids
  // repeating an item back-to-back.
  const lastPair=(ch2hPair&&ch2hPair.length===2)?ch2hPair:[];
  const r=await manageVoting({action:'personalMatchup',listId:currentListId,items,lastPair});
  if(r&&r.exhausted)return 'exhausted';
  const ids=(r&&r.items)||null;
  return (ids&&ids.length>=2)?ids:null;
}
function ch2hNoteRecent(k){ch2hRecentPairs.push(k);while(ch2hRecentPairs.length>4)ch2hRecentPairs.shift();}
function ch2hPrefetchNext(){
  if(ch2hPrefetching||!currentListId)return;
  ch2hPrefetching=true;
  ch2hFetchFreshPair().then(ids=>{
    ch2hNextPair=(Array.isArray(ids)?ids:null);
    ch2hPreloadImages(ch2hNextPair);   // v84.0 — warm the browser cache for the next pair
  }).catch(()=>{ch2hNextPair=null;})
    .finally(()=>{ch2hPrefetching=false;});
}
// v84.0 — the prefetch only fetched the next pair's IDS, so when a pair was shown
// the <img> still hit the network and flashed in a moment after the details (which
// come from memory). Preload the actual image bytes off-screen for a set of item
// ids, so by the time the pair renders the images are already cached.
const _ch2hPreloaded=new Set();
function ch2hPreloadImages(ids){
  if(!Array.isArray(ids))return;
  ids.forEach(id=>{
    const src=(itemData[id]||{}).img;
    if(src&&!_ch2hPreloaded.has(src)){_ch2hPreloaded.add(src);const im=new Image();im.src=src;}
  });
}

async function ch2hLoadPair(){
  if(!currentListId||ch2hLoading)return;   // Build F — list-keyed, no session
  ch2hLoading=true;
  const wrap=document.getElementById('ch2h-pair');
  try{
    if(ch2hNextPair&&!ch2hVotedPairs.has(ch2hPairKey(ch2hNextPair))){
      ch2hPair=ch2hNextPair;ch2hNextPair=null;
      ch2hNoteRecent(ch2hPairKey(ch2hPair));
      ch2hSavePair(ch2hPair);   // v84.2 — remember it for refresh/restore
      wrap.classList.remove('h2h-swapping');
      ch2hRenderPair(ch2hPair);ch2hPrefetchNext();return;
    }
    ch2hNextPair=null;
    wrap.classList.add('h2h-swapping');
    const ids=await ch2hFetchFreshPair();
    if(ids==='exhausted'){
      wrap.classList.remove('h2h-swapping');
      wrap.innerHTML='<div class="h2h-done-sub">You\'ve voted on every matchup. Use “Reset scores” to start over.</div>';
      ch2hSetDrawers(null);return;
    }
    if(!ids){
      wrap.classList.remove('h2h-swapping');
      wrap.innerHTML='<div class="h2h-done-sub">Couldn\'t load a matchup — try again.</div>';
      ch2hSetDrawers(null);return;
    }
    ch2hPair=ids;ch2hNoteRecent(ch2hPairKey(ids));
    ch2hSavePair(ch2hPair);   // v84.2 — remember it for refresh/restore
    ch2hRenderPair(ch2hPair);   // v84.1 — reveals itself once images are decoded
    ch2hPrefetchNext();
  }catch(e){
    wrap.classList.remove('h2h-swapping');
    wrap.innerHTML='<div class="h2h-done-sub">Couldn\'t load a matchup — '+(e.message||'try again')+'</div>';
    ch2hSetDrawers(null);
  }finally{ch2hLoading=false;}
}

// v82.3 — the creator uses the SHARED renderer with its own context, so the two
// matchup screens are guaranteed identical. Its own vote/pairing logic is
// unchanged; only the drawing is shared.
function ch2hRenderPair(ids){ h2hRenderPair(ids,H2H_CTX_CREATOR); }
function ch2hSetDrawers(ids){ h2hSetDrawers(ids,H2H_CTX_CREATOR); }
// The creator's drawer shows THEIR rating, not the community's.
// v82.1 — match the voter's drawer: image name, the item's own parameter values
// (what the creator authored), then THEIR Elo standing. The voter's version shows
// community numbers; the creator's shows their own, since this is their ranking.
function ch2hFillDetail(el,id){
  el.innerHTML='';
  const d=buildSaveData();
  const it=(d.itemData||{})[id]||{};
  const nm=(it.name||'').trim();
  // Build Y — only show the name header for IMAGE items. For a text item the text
  // IS the card content, so a name header just duplicates it.
  if(nm&&it.img){const h=document.createElement('div');h.className='h2h-card-name';h.style.marginBottom='8px';h.textContent=nm;el.appendChild(h);}
  // v82.5 — lead with the SAME headline score block the viewer's drawer has
  // (buildScoreDisplay), so the two drawers look identical. Sourced from the
  // creator's OWN rating, with pct across their own spread.
  const mine=(creatorPersonal&&creatorPersonal.items&&creatorPersonal.items[id])||null;
  const rated=mine&&(mine.matches||0)>0;
  let pct=0;
  if(rated){
    const all=(creatorPersonal&&creatorPersonal.items)||{};
    const rs=Object.keys(all).filter(k=>(all[k].matches||0)>0).map(k=>all[k].rating);
    if(rs.length){const lo=Math.min(...rs),hi=Math.max(...rs);pct=(hi>lo)?((mine.rating-lo)/(hi-lo)*100):50;}
  }
  const si=rated
    ? {show:true,main:Math.round(mine.rating)+' Elo',
       sub:(mine.matches||0)+((mine.matches===1)?' matchup':' matchups')+((mine.matches||0)<5?' — still settling':''),
       pct}
    // v84.1 — an unranked item shows the START rating (1500 Elo) rather than "Not
    // yet rated". Every item conceptually begins at 1500; the sub-line makes clear
    // it hasn't been voted on yet, so the number isn't misleading.
    : {show:true,main:'1500 Elo',sub:'Not yet voted on',pct:50};
  el.appendChild(buildScoreDisplay(si));
  // Then the rows, matching the viewer's drawer layout.
  if(rated){
    // v84.3 — Rating and Matchups are redundant with the Elo box above (which
    // shows the number and the matchup count), so only Win rate (formerly
    // "Standing") and Tier remain. No swatch dot except the tier row.
    el.appendChild(vdRow(null,'Win rate',Math.round(pct)+'%'));
    const tid=ch2hTierFor(id,d);
    if(tid){
      const t=(d.tiers||[]).find(x=>x.id===tid);
      if(t)el.appendChild(vdRow(t.color||'#8b7cf6','Tier',t.label||'—'));
    }
  }
  // The creator's own parameter values (below the Elo standing, as extra context).
  const sliders=(d.params||[]).filter(p=>p&&p.type==='slider');
  sliders.forEach(p=>{
    const v=(it.values&&it.values[p.id]);
    if(typeof v==='number')el.appendChild(vdRow(p.color||'#8b7cf6',p.name||'Parameter',v));
  });
  (d.params||[]).filter(p=>p&&p.type!=='slider').forEach(p=>{
    const v=(it.values&&it.values[p.id]);
    if(v!==undefined&&v!==null&&String(v).trim()!=='')el.appendChild(vdRow(p.color||'#6b7280',p.name||'Parameter',String(v)));
  });
}
// Which tier this item currently sits in by the creator's own ranking.
function ch2hTierFor(id,d){
  const mine=(creatorPersonal&&creatorPersonal.items)||{};
  const rated=Object.keys(mine).filter(k=>(mine[k].matches||0)>0);
  if(!rated.length||!mine[id]||!(mine[id].matches>0))return null;
  const rs=rated.map(k=>mine[k].rating);
  const lo=Math.min(...rs),hi=Math.max(...rs);
  const pct=(hi>lo)?((mine[id].rating-lo)/(hi-lo)*100):50;
  return pctToTierId(pct,d);
}

function ch2hSkip(){if(!ch2hBusy&&!ch2hLoading)ch2hLoadPair();}

async function ch2hVote(winnerId){
  if(ch2hBusy||!currentListId)return;
  const wrap=document.getElementById('ch2h-pair');
  const a=wrap&&wrap.dataset.a,b=wrap&&wrap.dataset.b;
  if(!a||!b||(winnerId!==a&&winnerId!==b))return;
  const loser=(winnerId===a)?b:a;
  const key=ch2hPairKey([winnerId,loser]);
  if(ch2hVotedPairs.has(key)){ch2hRefresh();return;}
  ch2hBusy=true;
  // v82.1 — an item with no prior votes has no entry in creatorPersonal, so the
  // "before" rating was undefined and the delta pill never showed on a first
  // matchup. Everything starts at the Elo start rating, so default to that.
  const ELO_START=1500;
  const mineNow=(creatorPersonal&&creatorPersonal.items)||{};
  const beforeW=(mineNow[winnerId]&&typeof mineNow[winnerId].rating==='number')?mineNow[winnerId].rating:ELO_START;
  const beforeL=(mineNow[loser]&&typeof mineNow[loser].rating==='number')?mineNow[loser].rating:ELO_START;
  const mW=(mineNow[winnerId]&&mineNow[winnerId].matches)||0;
  const mL=(mineNow[loser]&&mineNow[loser].matches)||0;
  // Predict the change with the same formula the server uses, so the pill can be
  // shown immediately instead of waiting on a round trip (the authoritative
  // numbers land with the personal refresh a moment later).
  const kW=(mW<5)?64:32, kL=(mL<5)?64:32;
  const ea=1/(1+Math.pow(10,(beforeL-beforeW)/400));
  const dW=kW*(1-ea), dL=-kL*(1-ea);
  // v83 — show the winner highlight INSTANTLY on click. The vote call and the
  // personal refresh run in the background; we don't make the visual wait on the
  // network round trip (that was the lag after clicking).
  // Build F — record against the list-keyed creator store. personalVote returns
  // the refreshed ranking, so we apply it directly (no separate personal fetch).
  const votePromise=manageVoting({action:'personalVote',listId:currentListId,winnerId,loserId:loser});
  try{
    ch2hVotedPairs.add(key);
    ch2hCount++;
    document.getElementById('ch2h-progress').textContent=ch2hCount+(ch2hCount===1?' vote':' votes');
    // Reward beat starts now with the predicted deltas.
    const rewardDone=ch2hRewardBeat(winnerId,loser,dW,dL);
    const r=await votePromise;
    // Apply the authoritative ranking the vote call returned.
    if(r&&r.personal){
      creatorPersonal=r.personal;
      ch2hCount=creatorPersonalVoteCount();
      runEloRank();
      if(selectedItemId)renderScoreDisplay(selectedItemId);
      markDirty();   // voting changed the ranking; creator must save to publish it
    }
    await rewardDone;
  }catch(e){
    if(/already voted/i.test(e.message||''))ch2hVotedPairs.add(key);
    else showFlash('⚠️ '+(e.message||'Vote failed'));
  }
  ch2hBusy=false;
  ch2hRefresh();
}

function ch2hRewardBeat(winnerId,loserId,dW,dL){
  return new Promise(resolve=>{
    const wrap=document.getElementById('ch2h-pair');
    const cards=wrap?wrap.querySelectorAll('.h2h-card'):[];
    cards.forEach(card=>{
      const isWin=(card.dataset.itemId===winnerId);
      card.classList.add(isWin?'h2h-win':'h2h-lose');
      card.style.cursor='default';card.onclick=null;
      const dv=isWin?dW:dL;
      if(typeof dv==='number'&&Math.abs(dv)>=0.5){
        const pill=card.querySelector('.h2h-delta');
        if(pill){const up=dv>0;pill.textContent=(up?'+':'')+Math.round(dv)+' Elo';
          pill.classList.add(up?'up':'down');card.classList.add('h2h-showdelta');}
      }
    });
    setTimeout(()=>{if(wrap)wrap.classList.add('h2h-swapping');setTimeout(resolve,160);},1280); // v83.5 — 20% shorter
  });
}

// Clear the creator's own votes: everything returns to Unranked and the start
// button comes back. Community results are untouched (they never included these).
async function ch2hReset(){
  if(!currentListId)return;
  // v82.1 — use the app's styled confirm, not the browser's.
  const ok=await tlfConfirm({
    title:'Reset your scores?',
    message:'This deletes your own votes for this list and puts every item back to Unranked. The community results are not affected.',
    confirmText:'Reset scores',
    danger:true
  });
  if(!ok)return;
  try{
    await manageVoting({action:'personalReset',listId:currentListId});
    creatorPersonal=null;ch2hCount=0;
    ch2hVotedPairs.clear();ch2hRecentPairs.length=0;ch2hNextPair=null;ch2hPair=null;
    runEloRank();                       // back to all-Unranked
    markDirty();                        // v83.1 — reset changes the list; light Save
    // v82.1 — the detail panel still held the pre-reset rating/matchups, so
    // re-render it (and any open community sheet) from the now-cleared state.
    if(selectedItemId)renderScoreDisplay(selectedItemId);
    ch2hActive=false;   // v83.9 — reset returns to the Start screen
    try{localStorage.removeItem('tlf_ch2h_active_list');}catch(e){} // v84.1
    ch2hClearSavedPair();   // v84.2
    document.getElementById('ch2h-view').style.display='none';
    document.getElementById('ch2h-start').style.display='';
    showFlash('✅ Scores reset');
  }catch(e){showFlash('⚠️ '+(e.message||'Reset failed'));}
}

function viewerSliderParams(d){d=d||viewerData||{};return (d.params||[]).filter(p=>p&&p.type==='slider');}
// Map a summed slider score onto the creator's auto-rank ranges (percent-based).
// Fallbacks: outside all ranges -> nearest range; no ranges at all -> bottom tier.
function scoreToTierId(score,d){
  d=d||viewerData||{};
  const sliders=viewerSliderParams(d);const max=sliders.length*10;
  if(!max)return null;
  return pctToTierId((score/max)*100,d);
}
// v79.2 — head-to-head already knows its percentage (position within the list's
// spread), so the pct->tier step is split out and both paths share it. Keeping
// one implementation is what stops the creator's list and the community list
// disagreeing about where the same value belongs.
function pctToTierId(pct,d){
  d=d||viewerData||{};
  const tiers=d.tiers||[];if(!tiers.length)return null;
  const ranges=d.rowRanges||{};
  // Mirror getRowRange: explicit range, else the default auto-tier for that label.
  const DEFAULTS={S:{min:95,max:100},A:{min:85,max:94},B:{min:70,max:84},C:{min:50,max:69},D:{min:25,max:49},F:{min:1,max:24}};
  let buckets=tiers.map(t=>({id:t.id,r:ranges[t.id]||DEFAULTS[String(t.label||'').trim()]}))
                   .filter(b=>b.r&&b.r.min!==undefined&&b.r.max!==undefined);
  if(!buckets.length){
    // No explicit ranges and non-default labels (e.g. renamed tiers): split
    // 0-100% evenly across the tiers in order, best score -> top tier.
    const n=tiers.length,band=100/n;
    buckets=tiers.map((t,i)=>({id:t.id,r:{min:100-band*(i+1),max:100-band*i}}));
  }
  // v79.1 — same threshold rule as the creator's rankers. The old nearest-band
  // fallback below could push a value UP into a tier it had not reached, which is
  // exactly what the rule forbids.
  const hit=pickTierBand(pct,buckets.map(b=>({id:b.id,min:b.r.min})));
  return hit?hit.id:tiers[tiers.length-1].id;
}
function myParamScore(values,d){
  return viewerSliderParams(d).reduce((a,p)=>{const v=parseFloat(values&&values[p.id]);return a+(isNaN(v)?0:Math.min(10,Math.max(1,v)));},0);
}
function communityAvgScore(itemRes,d){
  const av=(itemRes&&itemRes.avgValues)||{};
  return viewerSliderParams(d).reduce((a,p)=>{const v=parseFloat(av[p.id]);return a+(isNaN(v)?0:v);},0);
}
// {itemId:score} -> {tierId:[itemIds]} via the creator's ranges, best score first.
function paramPlacementFromScores(scoresById,d){
  d=d||viewerData||{};
  const placement={};(d.tiers||[]).forEach(t=>placement[t.id]=[]);
  Object.entries(scoresById).sort((a,b)=>b[1]-a[1]).forEach(([id,score])=>{
    const tid=scoreToTierId(score,d);if(tid&&placement[tid])placement[tid].push(id);
  });
  return placement;
}

function communityPlacement(){
  const d=viewerData||{};
  const items=(voteResults&&voteResults.items)||{};
  if(voteResults&&voteResults.mode==='parameter'){
    const scores={};Object.keys(items).forEach(id=>{if(d.itemData&&d.itemData[id])scores[id]=communityAvgScore(items[id],d);});
    return paramPlacementFromScores(scores,d);
  }
  // v80 — head-to-head. Each item already carries `pct` (its rating rescaled
  // 0-100 across this session), so it goes through the same threshold rule as
  // everything else. Without this branch it fell through to the placement code
  // below and looked for a winningTierId that head-to-head never produces.
  if(voteResults&&voteResults.mode==='head2head'){
    const byTier={};voteTiers.forEach(t=>byTier[t.id]=[]);
    const known=Object.keys(items).filter(id=>d.itemData&&d.itemData[id]&&typeof items[id].pct==='number');
    // v81 — an item with no matchups yet sits in the "⚖️ Unranked" band, not in
    // a tier. It leaves the band the moment it has been in a single matchup.
    // Stashed on the placement object so the renderer can draw the band without
    // recomputing. All items also start unranked before any votes land, so the
    // list opens with everything in the band and empties as votes come in.
    const pool=[];const rated=[];
    // Include every real item, even ones the results haven't mentioned yet
    // (no elo_ratings row) — those are unranked too.
    const seen={};
    known.forEach(id=>{seen[id]=true;((items[id].matches||0)>0?rated:pool).push(id);});
    (d.pool||[]).concat((d.tiers||[]).flatMap(t=>t.items||[])).forEach(id=>{
      if(seen[id])return;if(!d.itemData||!d.itemData[id]||d.itemData[id].example)return;
      seen[id]=true;pool.push(id);
    });
    // Highest rating first, so each tier reads best-to-worst within itself.
    rated.sort((a,b)=>(items[b].rating||0)-(items[a].rating||0));
    rated.forEach(id=>{const tid=pctToTierId(items[id].pct,d);if(tid&&byTier[tid])byTier[tid].push(id);});
    byTier.__unranked=pool;   // consumed + deleted by renderVoteResults
    return byTier;
  }
  const byTier={};voteTiers.forEach(t=>byTier[t.id]=[]);
  Object.keys(items).forEach(id=>{const wt=items[id].winningTierId;if(wt&&byTier[wt])byTier[wt].push(id);});
  // v97.3 — order each community row by orderScore (avg Borda from the backend):
  // higher = further front. Missing score (e.g. a mixed pre-v10 session) sorts as
  // 0. Stable-ish: equal scores fall back to the existing key order.
  Object.keys(byTier).forEach(tid=>{
    byTier[tid].sort((a,b)=>{
      const sa=(items[a]&&typeof items[a].orderScore==='number')?items[a].orderScore:0;
      const sb=(items[b]&&typeof items[b].orderScore==='number')?items[b].orderScore:0;
      return sb-sa;
    });
  });
  return byTier;
}

function renderVoteResults(){
  const hidden=document.getElementById('vote-results-hidden');
  const tlEl=document.getElementById('vote-results-tierlist');
  const label=document.getElementById('vote-results-label');
  if(voteResults&&voteResults.hidden){
    label.style.display='none';tlEl.style.display='none';hidden.style.display='block';return;
  }
  label.style.display='';tlEl.style.display='';hidden.style.display='none';
  // Community items are clickable -> update the side detail panel (no modal).
  const placement=communityPlacement();
  const unranked=placement.__unranked||null;delete placement.__unranked;
  renderTierListInto(tlEl,placement,1,(id)=>inspectCommunityItem(id));
  // v81 — insert the "⚖️ Unranked" band as its own row at the middle of the
  // list. Items with no matchups live here until they have been voted on; the
  // band vanishes once none remain.
  if(unranked&&unranked.length){
    const band=document.createElement('div');band.className='vr-pool-band';
    const lbl2=document.createElement('div');lbl2.className='vr-pool-label';lbl2.textContent='⚖️ Unranked';
    const items2=document.createElement('div');items2.className='vr-pool-items';
    unranked.forEach(id=>items2.appendChild(voteItemCell(id,'vt-item',1,()=>inspectCommunityItem(id))));
    band.appendChild(lbl2);band.appendChild(items2);
    const rows=tlEl.children;const mid=Math.ceil(rows.length/2); // below the middle tier for odd counts
    if(mid>=rows.length)tlEl.appendChild(band);else tlEl.insertBefore(band,rows[mid]);
  }
  const voters=(voteResults&&voteResults.totalVoters)||0;
  label.textContent='Community results so far — '+voters+' voter'+(voters===1?'':'s');
  // Refresh the inspected item's detail if one is currently shown (live counts).
  // v79.4 — renderTierListInto above rebuilds the list from scratch, which
  // destroys the highlight. Re-applying it here is what stops the selection
  // silently vanishing whenever a vote lands or the background poll ticks.
  if(inspectCommunityId){
    renderDetailContent('cdetail',inspectCommunityId);
    highlightVoteItem('vote-results-tierlist',inspectCommunityId);
  }
}

// ── Unified viewer detail panel (community / closed / static) ──
// inspectMode: true while a live-voting session is active and the user tapped a
// community item — the ballot is temporarily replaced and a Back button shows.
let inspectMode=false;
let inspectItemId=null;
let inspectCommunityId=null;
let inspectCreatorId=null;
// v111 (#3 follow-up) — when a detail sheet is ALREADY open and the user taps another
// item (same list or a different one), the new sheet should just swap its content with
// NO slide animation — the sheet is already on screen. anySheetOpen() reports whether any
// of the three voter sheets is currently open; each show fn captures it BEFORE
// closeOtherDetailSheets() (which clears the ids) into _sheetSwitchNoAnim, and openSlot()
// skips its phone slide when that flag is set. Only the FIRST open (nothing showing) slides.
function anySheetOpen(){return inspectItemId!=null||inspectCommunityId!=null||inspectCreatorId!=null;}
let _sheetSwitchNoAnim=false;

// Show read-only detail for an item in the right-column panel.
// opts.fromBallot = true when replacing the live ballot (shows Back button).
// ── Shared detail renderer — fills either the personal slot ('vdetail') or the
// community slot ('cdetail'). Both mirror the creator detail panel. ──
// v83.4 — resultsSource lets a caller supply a non-community source of numbers.
// The creator panel ('kdetail') passes the creator's OWN ranking so it shows the
// creator's Elo/score, not the community's. Undefined = community (voteResults),
// which is what vdetail/cdetail have always used. null = no results at all (the
// authored-score path, used for the creator panel on a parameter list).
function renderDetailContent(prefix,itemId,resultsSource,ownScore){
  const results=(resultsSource===undefined)?voteResults:resultsSource;
  const d=viewerData||{};const it=d.itemData?.[itemId]||{};
  const $=id=>document.getElementById(prefix+'-'+id);
  document.getElementById(prefix).style.display='';
  // Image (shape-aware) / text
  const imgWrap=$('img');imgWrap.innerHTML='';
  imgWrap.classList.remove('tappable');imgWrap.onclick=null; // v78.4 — reset between items
  if(it.img){const im=document.createElement('img');im.src=it.img;im.draggable=false;
    // v79.5 — the v79.4 attempt here was inert: `body.shape-* .detail-img-wrap
    // img{width:100%}` in the stylesheet re-supplies exactly what it removed.
    // The <img> was never the problem — the WRAPPER is width:100% with an
    // aspect-ratio, so it took whatever width each slot had left (216px vs
    // 290px) and the image faithfully filled it. Fixed in CSS instead.
    im.style.width='100%';im.style.height='100%';
    im.style.objectFit=(d.imgShape==='nocrop'?'contain':'cover');imgWrap.appendChild(im);
    // v78.4 — tap to enlarge, matching the creator's sheet. Same modal, same
    // shape arguments; the viewer simply never wired it up.
    {const sh=d.imgShape||'square';
     const round=(sh==='round'),contain=(sh==='nocrop');
     const ar=(sh==='portrait')?(285/399):(sh==='landscape'||sh==='nocrop')?(120/80):1;
     imgWrap.classList.add('tappable');
     imgWrap.onclick=()=>openSheetImg(it.img,round,contain,ar);}
  }
  else{const tx=document.createElement('div');tx.className='detail-text-item';tx.textContent=it.name||itemId;imgWrap.appendChild(tx);
    imgWrap.classList.add('tappable');const _t=it.name||itemId,_s=d.imgShape||'square';imgWrap.onclick=()=>openSheetText(_t,_s);} // v150
  // Name — hidden for text items and unnamed images
  const nameWrap=$('name-wrap');const nm=(it.name||'').trim();
  if(it.img&&nm){$('name').textContent=nm;nameWrap.style.display='';}else{nameWrap.style.display='none';}
  // Score from authored slider params
  const params=d.params||[];const pv=it.paramValues||{};
  // v79.2 — WHAT to show is decided once in detailScoreInfo; this only draws it.
  // v91 — the voter's PERSONAL panel passes ownScore so it shows THE VOTER'S OWN
  // score for the item (from their votes), the way the community panel shows the
  // community score. Other panels pass nothing and keep the existing behaviour.
  const si=ownScore||detailScoreInfo(itemId,d,results);
  const scoreDisp=$('score-display');
  if(si.show){
    $('score-main').textContent=si.main;
    $('score-pct').textContent=si.sub;
    $('score-fill').style.width=si.pct+'%';scoreDisp.classList.add('show');
    // v83.7 — "Win rate xx%" beside the bar for Elo, mirroring the creator editor's
    // detail panel. Only meaningful for head2head; blanked otherwise so parameter/
    // manual panels keep a bare bar. The label/val spans are optional (guarded).
    const isElo=!!(results&&results.mode==='head2head');
    const barLabel=$('score-bar-label'),barVal=$('score-bar-val');
    if(barLabel)barLabel.textContent=isElo?'Win rate':'';
    if(barVal)barVal.textContent=isElo?(Math.round((si.pct||0)*10)/10)+'%':'';
  }else{scoreDisp.classList.remove('show');}
  // Parameters — v93: ALWAYS show every param (— for empty text, 1/10 for empty
  // slider), so the Elo/viewer detail panel no longer hides params with no entry.
  const pSection=$('params-section');const pWrap=$('params');pWrap.innerHTML='';
  if(params.length){pSection.style.display='';params.forEach(p=>{pWrap.appendChild(vdRow(null,paramLabel(p),paramDisplayVal(p,pv[p.id])));});}
  else{pSection.style.display='none';}
  // Community votes (the raw tally) + PLACEMENTS. v96.3 (Stage 2): the placement
  // section now shows ONE labeled row per VISIBLE list (Your / Creator / Community)
  // via visiblePlacements(), so any sheet lets you compare all lists on screen. The
  // community-votes tally block is kept separate (it's the vote breakdown, not a
  // ranking) and shown only when there IS a community result.
  const votesSection=$('votes-section');const bd=$('breakdown');bd.innerHTML='';
  const plTitle=$('placement-title');const plWrap=$('placement');plWrap.innerHTML='';
  const votesTitle=$('votes-title');
  const placements=visiblePlacements(itemId,d,results);
  // v109 (#7) — the community-votes TALLY is inherently community data, so it must read
  // the global voteResults, NOT the per-panel `results`. The creator sheet (#kdetail)
  // passes creatorRankingSource() as `results` (the creator's own Elo/placement), so the
  // tally was computed against that and never appeared. Score/params above still use
  // `results` (the creator's own numbers); only the tally is switched to voteResults, so
  // the creator-ranking item detail now shows the same community vote breakdown the
  // community panel does. Gate its Elo-suppression on the community result's mode too.
  const communityIsElo=!!(voteResults&&voteResults.mode==='head2head');
  const cRows=detailCommunityRows(itemId,d,voteResults);
  // The community-votes tally: only for non-Elo (Elo's tally just repeats the Elo
  // box) and only when a community result exists AND the community list is shown.
  const showTally=!communityIsElo&&cRows&&_rowVisible('vote-community-row');
  if(showTally||placements.length){
    votesSection.style.display='';
    if(showTally){
      if(votesTitle){votesTitle.style.display='';votesTitle.textContent='Community votes';}
      if(cRows.length)cRows.forEach(r=>bd.appendChild(vdRow(r.color,r.label,r.value)));
      else bd.innerHTML='<div class="vd-row" style="color:#888">No votes yet</div>';
    }else{
      if(votesTitle)votesTitle.style.display='none';
    }
    plTitle.style.display='none'; // per-list headings replace the single "Placement" heading
    // v96.4 — block order: Community votes (above) -> Community ranking -> Your
    // ranking -> Creator ranking, so the two community blocks sit together.
    const order=['community','own','creator'];
    const byKey={};placements.forEach(p=>{byKey[p.key]=p;});
    order.forEach(k=>{
      const p=byKey[k];if(!p)return;
      const h=document.createElement('div');h.className='detail-params-title';
      h.style.marginTop='10px';h.textContent=p.label;
      plWrap.appendChild(h);
      plWrap.appendChild(vdRow(p.color,p.tier,''));
    });
  }else{votesSection.style.display='none';}
}
function openSlot(slotId){
  const s=document.getElementById(slotId);
  if(!s)return;
  // v109 (#3) — PHONE first-open direction fix. The phone slots (#vp/#vc/#vk) have a
  // base transform:translateX(-50%) (the ballot's full-bleed centring); .as-sheet
  // overrides it to translateY(0). On a FRESH page load the slot's committed transform
  // is still that translateX(-50%), so the very first open animated diagonally from the
  // LEFT instead of up from the bottom. (Later opens were fine because the close path
  // leaves it committed at translateY(100%).) showPersonalDetail already pre-committed
  // translateY(100%) for its own path; centralise it here so community + creator sheets
  // — and every first open — always start from below. Desktop is untouched (isPhone gate).
  // Pre-commit for the SHEET role only. #vc-slot and #vk-slot are ALWAYS sheets (the CSS
  // styles them as sheets unconditionally; they never carry an .as-sheet class). #vp-slot
  // is a sheet only in detail mode — marked by .as-sheet — and is the sticky voting BALLOT
  // otherwise. The ballot must NOT be pre-committed: it isn't a sheet, so forcing
  // translateY(100%) would shove it down and animate it on every vote. So: pre-commit when
  // the slot is vc/vk, or when vp has .as-sheet.
  const isSheetRole=(slotId==='vc-slot'||slotId==='vk-slot'||s.classList.contains('as-sheet'));
  // v111 (#3 follow-up) — if a sheet was already open (item switch), show the new content
  // instantly with no slide. Clear any committed transform so it sits at rest, and reset
  // the flag (one switch = one skip).
  if(isPhone()&&isSheetRole&&_sheetSwitchNoAnim){
    _sheetSwitchNoAnim=false;
    s.style.transition='none';
    s.style.transform='translateY(0)';     // sit at rest, no animation
    void s.offsetHeight;                    // commit instantly
    s.style.transform='';                   // v112 (#3) — CLEAR the inline transform. Leaving
                                            // translateY(0) inline overrode the .as-sheet.hidden
                                            // rule's translateY(100%), so a later close couldn't
                                            // slide the slot away — it stayed as an un-closable
                                            // ghost beneath the next sheet. Cleared, the class
                                            // rules govern the close again.
    s.style.transition='';                  // hand transition back for future closes
    s.classList.remove('hidden');s.classList.add('shown');
    return;
  }
  if(isPhone()&&isSheetRole){
    // v110 (#3) — the .as-sheet open state carries `transition:transform`. On the FIRST
    // open of a fresh page the slot's committed transform is still the ballot base
    // translateX(-50%), so simply setting translateY(100%) here ANIMATED from that —
    // a diagonal slide in from the left. Kill the transition while we commit the bottom
    // start (so the jump to translateY(100%) is instant), force a reflow, then restore
    // the transition and clear the inline transform so ONLY the upward slide animates.
    s.style.transition='none';
    s.style.transform='translateY(100%)';   // instant bottom start (no animation)
    void s.offsetHeight;                     // commit both with the transition off
    s.style.transition='';                   // hand transition back to the .as-sheet rule
    requestAnimationFrame(()=>{
      s.style.transform='';                  // now animate translateY(100%) -> translateY(0)
      s.classList.remove('hidden');s.classList.add('shown');
    });
    return;
  }
  s.classList.remove('hidden');s.classList.add('shown');
} // v98.5 — .shown drops the viewport max-height cap so the open slot never overshoots (flicker fix)
function closeSlot(slotId){const s=document.getElementById(slotId);if(s){s.classList.add('hidden');s.classList.remove('shown');}}

// Click an item in the PERSONAL ranking (static/closed) -> personal slot detail.
// Highlight the item whose detail is currently open (like the editor's selected
// item), scoped to a container so viewer personal/community + creator community
// each highlight independently.
function highlightVoteItem(containerId,itemId){
  const cont=document.getElementById(containerId);if(!cont)return;
  cont.querySelectorAll('.vt-selected').forEach(el=>el.classList.remove('vt-selected'));
  if(itemId){const cell=cont.querySelector('[data-item-id="'+CSS.escape(itemId)+'"]');if(cell)cell.classList.add('vt-selected');
    setLastNav('vote',containerId,itemId);} // v120 item 5 — track the last-selected voting item
}
function clearVoteHighlights(){
  document.querySelectorAll('.vt-selected').forEach(el=>el.classList.remove('vt-selected'));
}
function showPersonalDetail(itemId){
  // v120 — click the already-shown item again to close its detail + deselect.
  if(inspectItemId===itemId&&!document.getElementById('vp-slot')?.classList.contains('hidden')){
    closeSlot('vp-slot');inspectItemId=null;highlightVoteItem('vote-mytierlist',null);lastNavRef=null;return;
  }
  _sheetSwitchNoAnim=anySheetOpen(); // v111 (#3 follow-up) — capture BEFORE the ids are cleared
  closeOtherDetailSheets('vp-slot'); // v96 — one sheet at a time on phone (all three)
  inspectItemId=itemId;
  setVpSheetMode(true); // v78.4
  document.getElementById('vp-slot')?.classList.remove('ballot-sheet'); // v89 — detail role, not ballot role
  document.body.classList.remove('ballot-sheet-open');
  // v91 — in auto-rank, show the VOTER'S OWN score for this item (from their own
  // slider votes), mirroring how the community panel shows the community score.
  // Other modes have no personal score concept, so pass nothing.
  let ownScore;
  if(isParamSession()){
    const mv=myVotes[itemId];
    if(mv&&typeof mv==='object'){
      const d=viewerData||{};const sliders=viewerSliderParams(d);
      if(sliders.length){
        let score=0;sliders.forEach(p=>{const v=parseFloat(mv[p.id]);if(!isNaN(v))score+=Math.min(10,Math.max(1,v));});
        const max=sliders.length*10;const pct=max>0?Math.round(score/max*100):0;
        ownScore={show:true,main:score+' / '+max+' pts',sub:pct+'% of maximum score',pct};
      }
    }
  }
  renderDetailContent('vdetail',itemId,undefined,ownScore);
  document.getElementById('vote-ballot').style.display='none';
  document.getElementById('vote-progress').style.display='none';
  document.getElementById('vote-right-label').textContent='Item details';
  highlightVoteItem('vote-mytierlist',itemId);
  // v109 (#3) — the PHONE bottom-start pre-commit that used to live here (v99.7) now
  // lives in openSlot(), which forces translateY(100%) on phone for every sheet
  // (personal/community/creator) and every open, including the first on a fresh page.
  openSlot('vp-slot');
}
// Click an item in the CREATOR's authored ranking -> its own slot detail.
// v83.4 — this panel shows the CREATOR'S OWN numbers, never the community's.
//  • Elo list: the creator's saved per-item Elo (rating/matches/pct), shaped like
//    a head2head result so the shared helpers render it. This is the whole point
//    of a creator detail panel on an Elo list — without it the panel just echoed
//    the community standings.
//  • Parameter (auto-rank) list: pass null so detailScoreInfo uses the item's
//    authored slider values (the creator's own score); no community section.
//  • Placement list: null too — placement is the whole story, no numbers.
function creatorRankingSource(){
  const d=viewerData||{};
  const er=d.eloRanking;
  if(d.currentMode==='elo'&&er&&Object.keys(er).length){
    return {mode:'head2head',items:er};
  }
  return null; // authored-score / placement path
}
function showCreatorDetail(itemId){
  // v120 — click the shown item again to close + deselect.
  if(inspectCreatorId===itemId&&!document.getElementById('vk-slot')?.classList.contains('hidden')){
    closeSlot('vk-slot');inspectCreatorId=null;highlightVoteItem('vote-creator-tierlist',null);lastNavRef=null;return;
  }
  _sheetSwitchNoAnim=anySheetOpen(); // v111 (#3 follow-up) — capture BEFORE the ids are cleared
  closeOtherDetailSheets('vk-slot'); // v96 — one sheet at a time on phone (was closing neither)
  inspectCreatorId=itemId;
  // v96.3 — the votes/placement titles are now owned by renderDetailContent
  // (per-list placement headings + a "Community votes" tally title), so the old
  // manual relabel of kdetail-votes-title is dropped.
  renderDetailContent('kdetail',itemId,creatorRankingSource());
  openSlot('vk-slot');
  highlightVoteItem('vote-creator-tierlist',itemId);
}
// Click a COMMUNITY item -> community slot detail (ballot stays untouched).
function inspectCommunityItem(itemId){
  // v120 — click the shown item again to close + deselect.
  if(inspectCommunityId===itemId&&!document.getElementById('vc-slot')?.classList.contains('hidden')){
    closeSlot('vc-slot');inspectCommunityId=null;highlightVoteItem('vote-results-tierlist',null);lastNavRef=null;return;
  }
  // v96 — PHONE ONLY: slots are fixed to the screen bottom, so more than one open
  // at once stacks. Close the other two first. Desktop is unchanged — showing your
  // ranking's detail beside the community's is the point of the two-column layout.
  _sheetSwitchNoAnim=anySheetOpen(); // v111 (#3 follow-up) — capture BEFORE the ids are cleared
  closeOtherDetailSheets('vc-slot');
  inspectCommunityId=itemId;
  renderDetailContent('cdetail',itemId);
  openSlot('vc-slot');
  highlightVoteItem('vote-results-tierlist',itemId);
}
// Kept for compatibility with older call sites; routes to the right slot.
function showInspectDetail(itemId,opts){
  opts=opts||{};
  if(opts.community)inspectCommunityItem(itemId);
  else showPersonalDetail(itemId);
}
let voteMouseDownInside=false;
function handleViewerOutsideClick(e){
  if(!document.getElementById('vote-view')?.classList.contains('show'))return;
  const t=e.target;
  // If the gesture STARTED inside an interactive voting zone (e.g. a tier button
  // that then re-rendered on vote), never treat it as an outside click — this
  // preserves vote auto-advance (the clicked button detaches on re-render, so
  // checking the click target alone is unreliable).
  if(voteMouseDownInside){voteMouseDownInside=false;return;}
  // Community detail: clicking outside the community list/slot closes it.
  // v79.4 — was `!t.closest('.vote-results-tierlist')`, which treated the whole
  // list container as inside, so tapping its empty background never dismissed
  // the detail. Only an actual ITEM counts as inside now.
  if(inspectCommunityId&&!t.closest('#vc-slot')&&!t.closest('.vote-results-tierlist .vt-item')){
    closeCommunityDetail(); // v79.5
  }
  if(inspectCreatorId&&!t.closest('#vk-slot')&&!t.closest('#vote-creator-tierlist .vt-item')){
    // v99.6 — was !t.closest('#vote-creator-tierlist') (whole container), so a
    // background click inside the creator list never closed the sheet. Exclude only
    // .vt-item now (an item click opens/switches; background click closes) — matching
    // the community list's v79.4 fix.
    closeSlot('vk-slot');inspectCreatorId=null;highlightVoteItem('vote-creator-tierlist',null);
  }
  // Personal detail (static/closed): clicking outside the personal list/slot closes it.
  if(inspectItemId&&!t.closest('#vp-slot')&&!t.closest('.vt-item')&&!t.closest('.vote-pool-item')){
    closeSlot('vp-slot');inspectItemId=null;highlightVoteItem('vote-mytierlist',null);
  }
  // Live ballot: clicking outside the voting area deselects + collapses the ballot
  // (list goes full width). Tapping an item brings it back.
  if(voteSession&&voteSession.status==='open'&&voteCurrentItem&&
     !t.closest('#vp-slot')&&!t.closest('.vt-item')&&!t.closest('.vote-pool-item')&&
     !t.closest('.vote-results-tierlist')){
    voteCurrentItem=null;
    closeSlot('vp-slot');
    renderVotePool();   // reflect deselection in the pool highlight
    renderMyTierList(); // v97 — also clear the tier-list highlight (was left selected)
  }
}
// v78.1 — one place that decides how a parameter is labelled, matching the
// editor's "Name (unit)". Three near-duplicate renderers each built this string
// themselves and all three omitted the unit; a shared helper stops the next one
// drifting the same way.
function paramLabel(p){return (p.name||'Param')+(p.unit?` (${p.unit})`:'');}
// v93 — value shown for a param in the detail panels. Params are now ALWAYS shown
// (even with no entry): empty text -> "—", empty slider -> "1/10" (the minimum),
// slider with a value -> "N/10", text with a value -> the raw value.
function paramDisplayVal(p,raw){
  const has=(raw!==undefined&&raw!==null&&String(raw).trim()!=='');
  if(p.type==='slider')return has?(raw+'/10'):'1/10';
  return has?String(raw):'—';
}
// ── v79.2: shared item-detail logic ──────────────────────────────────────
// Three renderers show item detail — the viewer's panel, the creator's community
// panel, and the mobile sheet. They differ in the DOM they write into, but they
// were also each deciding WHAT to show, independently and identically. That is
// what let the same omission happen three times over. These helpers own the
// decisions; the renderers own the drawing.

// The headline score. {show:false} means the item has nothing worth showing.
function detailScoreInfo(itemId,d,results){
  d=d||{};
  const it=(d.itemData||{})[itemId]||{};
  const pv=it.paramValues||{};
  // Elo: the item has no score of its own — its standing is the community's
  // rating. Matchup count is shown because a rating off three matchups is not
  // the same claim as one off thirty.
  if(results&&results.mode==='head2head'){
    const r=(results.items||{})[itemId];
    if(!r||typeof r.rating!=='number')
      // v84.1 — show the START rating (1500) with an explanatory sub, rather than
      // "Not yet rated". Consistent with the creator drawer.
      return {show:true,main:'1500 Elo',sub:'Not yet voted on',pct:50};
    return {show:true,
            main:Math.round(r.rating)+' Elo',
            sub:(r.matches||0)+((r.matches===1)?' matchup':' matchups')+((r.matches||0)<5?' — still settling':''),
            pct:(typeof r.pct==='number')?r.pct:0};
  }
  const sliders=(d.params||[]).filter(p=>p.type==='slider');
  if(!sliders.length)return {show:false};
  // v94 — the pts/% score is only meaningful in PARAMETER (auto-rank) voting. A
  // manual list can still HAVE slider params it doesn't rank by, which used to make
  // this score appear on manual-community detail panels. Gate on the result mode:
  // no results (creator's own editor detail) still shows the authored score; a
  // PLACEMENT (manual) community result shows no score.
  if(results&&results.mode&&results.mode!=='parameter')return {show:false};
  // v96.3 — also gate on the LIST'S OWN saved mode. The creator detail sheet passes
  // results=null even on a manual list, so the gate above was skipped and this
  // summed the authored slider values into a meaningless "x/y pts" on a MANUAL
  // creator sheet. The pts/% score only means something when the list actually
  // ranks by those sliders (auto/parameter mode). Elo is handled above; manual ->
  // no score. (When results IS parameter, keep showing — community average path.)
  const savedMode=(d.currentMode||'manual');
  const listIsParam=(savedMode==='auto'||savedMode==='parameter');
  const resultsIsParam=!!(results&&results.mode==='parameter');
  if(!listIsParam&&!resultsIsParam)return {show:false};
  // In a parameter-mode community result the creator's own values are empty, so
  // the meaningful number is the community average.
  const cRes=results&&results.mode==='parameter'&&results.items&&results.items[itemId];
  let score=0;
  if(cRes)score=communityAvgScore(cRes,d);
  else sliders.forEach(p=>{const v=parseFloat(pv[p.id]||0);if(!isNaN(v))score+=Math.min(10,Math.max(1,v));}); // v146 — untouched slider counts as 1 (matches calcScore)
  const max=sliders.length*10;
  const pct=max>0?Math.round(score/max*100):0;
  return {show:true,main:(cRes?score.toFixed(1):score)+' / '+max+' pts',
          sub:pct+'% of maximum score',pct};
}

// The community breakdown rows. null means "hide the section entirely".
function detailCommunityRows(itemId,d,results){
  const itemRes=results&&results.items&&results.items[itemId];
  if(!itemRes)return null;
  const rows=[];
  if(results.mode==='head2head'){
    // v84.3 — Elo rating and Matchups are redundant with the Elo box above, so the
    // breakdown is just Win rate (formerly "Standing"). The main community panel
    // suppresses even this (see renderDetailContent / showCcSide); the compact
    // drawer keeps it as a one-line summary.
    if(typeof itemRes.pct==='number')rows.push({color:null,label:'Win rate',value:(Math.round(itemRes.pct*10)/10)+'%'});
    return rows;
  }
  if(results.mode==='parameter'){
    const sliders=viewerSliderParams(d);const av=itemRes.avgValues||{};
    sliders.forEach(p=>{const v=parseFloat(av[p.id]);if(isNaN(v))return;
      rows.push({color:null,label:p.name||'Param',value:v.toFixed(1)+' avg'});});
    const score=communityAvgScore(itemRes,d);
    rows.push({color:null,label:'Community score',value:score.toFixed(1)+' / '+(sliders.length*10)});
    rows.push({color:null,label:'Votes',value:String(itemRes.totalVotes||0)});
    return rows;
  }
  // placement
  const tv=itemRes.tierVotes||{};
  voteTiers.forEach(t=>{const n=tv[t.id]||0;if(!n)return;
    rows.push({color:t.color,label:t.label,value:n+' vote'+(n===1?'':'s')});});
  return rows;
}

// Which tier the community put this item in. null means "no placement to show".
function detailPlacementInfo(itemId,d,results){
  const itemRes=results&&results.items&&results.items[itemId];
  if(!itemRes)return null;
  let tid=null;
  if(results.mode==='head2head'){
    if(typeof itemRes.pct!=='number')return null;
    tid=pctToTierId(itemRes.pct,d);
  }else if(results.mode==='parameter'){
    tid=scoreToTierId(communityAvgScore(itemRes,d),d);
  }else{
    if(!Object.keys(itemRes.tierVotes||{}).length)return null;
    tid=itemRes.winningTierId;
  }
  if(!tid)return null;
  const w=voteTiers.find(t=>t.id===tid);
  return {color:w?w.color:null,label:w?w.label:'—'};
}
// v96.3 (Stage 2) — the three-placement comparison. For an item, return one
// labeled placement row per VISIBLE list, in order Your -> Creator -> Community.
// "Visible" is read from the actual row display, so this adapts to whatever the
// user is seeing (live voting shows Your [+ Community]; post-close shows Your if
// they voted, plus Creator and/or Community per the creator's setting; Elo has no
// Your). Each list's tier is derived with the SAME shared threshold helpers, so
// creator and community never disagree about where a value lands.
function _rowVisible(id){
  const el=document.getElementById(id);
  return !!(el&&el.style.display!=='none'&&getComputedStyle(el).display!=='none');
}
// The creator's own tier for an item, from their authored arrangement (manual/
// auto place items directly in d.tiers[].items; Elo uses the saved eloRanking -> pct).
function creatorTierInfo(itemId,d){
  d=d||viewerData||{};
  const er=d.eloRanking;
  if(d.currentMode==='elo'&&er&&er[itemId]&&typeof er[itemId].pct==='number'){
    const tid=pctToTierId(er[itemId].pct,d);const w=(d.tiers||[]).find(t=>t.id===tid);
    return w?{color:w.color,label:w.label}:null;
  }
  const t=(d.tiers||[]).find(t=>(t.items||[]).includes(itemId));
  return t?{color:t.color,label:t.label}:null;
}
// The voter's OWN tier for an item, from their votes. Placement mode: the tier
// they chose. Parameter mode: their slider values -> scoreToTierId. Elo: none.
function ownTierInfo(itemId,d){
  d=d||viewerData||{};
  const mv=myVotes[itemId];
  if(mv==null)return null;
  if(typeof mv==='string'){ // placement vote: tierId
    const w=(d.tiers||[]).find(t=>t.id===mv);
    return w?{color:w.color,label:w.label}:null;
  }
  if(typeof mv==='object'){ // parameter vote: slider values
    const score=myParamScore(mv,d);const tid=scoreToTierId(score,d);
    const w=(d.tiers||[]).find(t=>t.id===tid);
    return w?{color:w.color,label:w.label}:null;
  }
  return null;
}
function visiblePlacements(itemId,d,results){
  d=d||viewerData||{};
  const out=[];
  // v96.4 — one row PER VISIBLE LIST, always. If the list is on screen but has no
  // placement for THIS item, show "—" (e.g. you didn't vote on this item; the
  // creator left it unranked; no community votes yet). A list that isn't on screen
  // is skipped entirely — which is how "missed voting" and "Elo (no personal list)"
  // correctly produce no "Your ranking" block (its row is hidden upstream).
  if(_rowVisible('vote-personal-row')){
    const info=ownTierInfo(itemId,d);
    out.push({key:'own',label:'Your ranking',color:info?info.color:null,tier:info?info.label:'—'});
  }
  if(_rowVisible('vote-creator-row')){
    const info=creatorTierInfo(itemId,d);
    out.push({key:'creator',label:'Creator ranking',color:info?info.color:null,tier:info?info.label:'—'});
  }
  if(_rowVisible('vote-community-row')){
    // Community placement always comes from the global community results, not the
    // per-sheet `results` source (which is null on a manual creator sheet).
    const info=detailPlacementInfo(itemId,d,voteResults);
    out.push({key:'community',label:'Community ranking',color:info?info.color:null,tier:info?info.label:'—'});
  }
  return out;
}
// v79.2 — builds the score block for renderers that have no fixed slots.
function buildScoreDisplay(si){
  const sd=document.createElement('div');sd.className='score-display show';sd.style.margin='0 0 12px';
  const main=document.createElement('div');main.className='score-main';main.textContent=si.main;
  const p2=document.createElement('div');p2.className='score-pct';p2.textContent=si.sub;
  const bw=document.createElement('div');bw.className='score-bar-wrap';
  const bf=document.createElement('div');bf.className='score-bar-fill';bf.style.width=(si.pct||0)+'%';
  bw.appendChild(bf);sd.appendChild(main);sd.appendChild(p2);sd.appendChild(bw);
  return sd;
}
function vdRow(color,name,val){
  const row=document.createElement('div');row.className='vd-row';
  const left=document.createElement('span');left.className='vd-tier';
  // v98.7 — colored rows (tier/placement) get the swatch; parameter rows (no color)
  // sit flush-left, aligned with the section headline. v98.5 reserved a transparent
  // swatch to align names, but that left param names indented under empty space —
  // the flush-left original reads better next to the "Your Parameters" title.
  if(color){const sw=document.createElement('span');sw.className='vd-swatch';sw.style.background=color;left.appendChild(sw);}
  const nm=document.createElement('span');nm.className='vd-tier-name';nm.textContent=name;left.appendChild(nm);
  row.appendChild(left);
  if(val){const v=document.createElement('span');v.className='vd-count';v.textContent=val;row.appendChild(v);}
  return row;
}
// Reset both detail slots to hidden (nothing selected).
// v78.4 — the slot plays two roles. .as-sheet marks the item-detail role, which
// is the only one that gets the handle, the fixed positioning and the swipe. The
// ballot must never have it: swiping the thing you're voting from would be a
// hazard, not a convenience.
function setVpSheetMode(on){
  const s=document.getElementById('vp-slot');
  if(s)s.classList.toggle('as-sheet',!!on);
}
// Swipe the header down to dismiss the detail. Bound once; harmless while the
// slot is in ballot mode because the handle is display:none there.
// v79.5 — parameterised so #vc-slot gets the same gesture.
// v81.2 — the gesture now binds to the whole top strip (grab pill + the header
// label), not just the 5px bar, so it's far easier to start. The label id is
// optional (the personal sheet's is #vote-right-label, community's is the
// .vote-mylist-label inside #vc-slot).
function initSheetSwipeFor(grabId,slotId,onClose,requiresSheetClass){
  const attach=()=>{
    const slot=document.getElementById(slotId);
    if(!slot)return;
    // Every plausible "grab area" at the top of this sheet.
    const handles=[];
    const grab=document.getElementById(grabId);if(grab)handles.push(grab);
    // the header label sitting right under the pill
    const lbl=slot.querySelector('.vote-mylist-label')||document.getElementById('vote-right-label');
    if(lbl&&!handles.includes(lbl))handles.push(lbl);
    // v133 — the whole sheet is a swipe target too (native feel), but only starts a
    // dismiss-drag when the sheet content is scrolled to the TOP; otherwise the
    // gesture scrolls the content normally.
    if(!handles.includes(slot))handles.push(slot);
    if(!handles.length)return;
    let startY=null,dy=0,fromBody=false;
    const onStart=e=>{
      if(requiresSheetClass&&!slot.classList.contains('as-sheet'))return;
      fromBody=(e.currentTarget===slot);
      if(fromBody&&slot.scrollTop>0)return; // not at top → let it scroll
      startY=e.touches[0].clientY;dy=0;slot.style.transition='none';
    };
    const onMove=e=>{
      if(startY===null)return;
      const raw=e.touches[0].clientY-startY;
      // when dragging from the body, a downward pull only dismisses at scrollTop 0;
      // if they scroll up (raw<0) abandon the dismiss so content scrolls instead.
      if(fromBody&&slot.scrollTop>0){startY=null;slot.style.transition='';slot.style.transform='';return;}
      dy=Math.max(0,raw);
      if(dy>0&&e.cancelable)e.preventDefault();   // needs passive:false
      slot.style.transform='translateY('+dy+'px)';
    };
    const end=()=>{
      if(startY===null)return;
      slot.style.transition='';slot.style.transform='';
      const close=dy>70;
      startY=null;dy=0;fromBody=false;
      if(close)onClose();
    };
    handles.forEach(h=>{
      h.addEventListener('touchstart',onStart,{passive:true});
      h.addEventListener('touchmove',onMove,{passive:false});
      h.addEventListener('touchend',end);
      h.addEventListener('touchcancel',end);
    });
  };
  if(document.readyState!=='loading')attach();else document.addEventListener('DOMContentLoaded',attach);
}
initSheetSwipeFor('vp-grab','vp-slot',()=>clearVdetailPrompt(),true);
// v79.5 — closing the community sheet must also clear inspectCommunityId, or the
// next results refresh re-renders into it and it reappears.
initSheetSwipeFor('vc-grab','vc-slot',()=>closeCommunityDetail(),false);
// v96.2 — creator detail sheet finally gets swipe-to-dismiss, mirroring vc-slot.
initSheetSwipeFor('vk-grab','vk-slot',()=>closeCreatorDetail(),false);
// v89 — the BALLOT sheet (manual/auto) gets its own swipe-down + close. It uses
// the .ballot-sheet class (not .as-sheet), so it needs its own binding. Guarded
// by a check for the class inside the handler via requiresSheetClass=false plus
// dismissBallotSheet's own no-op when not in sheet mode.
initSheetSwipeForBallot('vp-grab','vp-slot');
// Dismiss the ballot sheet (swipe-down or ✕). Doesn't cast anything — it just
// hides the sheet; tapping an item or a pool cell reopens it on that item.
function dismissBallotSheet(){
  const s=document.getElementById('vp-slot');
  if(!s||!s.classList.contains('ballot-sheet'))return;
  closeSlot('vp-slot');
  document.body.classList.remove('ballot-sheet-open'); // v89 — drop list scroll-padding
  // v97 — closing the ballot DESELECTS the item. Otherwise it stayed "current"
  // (highlighted), and a later drag saw voteCurrentItem set (ballotWasOpen) and
  // reopened the ballot. Clearing it + repainting drops the highlight everywhere.
  voteCurrentItem=null;
  renderVotePool();renderMyTierList();
}
// v132 — close the ballot on EITHER desktop (right-rail) or phone (sheet). On
// phone the sheet has its own dismiss; on desktop we just clear the current item
// and repaint so the rail empties and the highlight drops.
function closeBallotAny(){
  const s=document.getElementById('vp-slot');
  if(s&&s.classList.contains('ballot-sheet')){dismissBallotSheet();return;}
  // v133 — manual close: don't trigger the "you've ranked every item" celebration;
  // just clear the current item and show the neutral empty ballot state.
  _manualBallotClose=true;
  voteCurrentItem=null;renderBallot();renderVotePool();renderMyTierList();
  _manualBallotClose=false;
}
// A ballot-specific swipe binding (mirrors initSheetSwipeFor, but fires only in
// .ballot-sheet mode and calls dismissBallotSheet). Kept separate so the ballot
// and item-detail roles never cross-trigger each other's close handlers.
function initSheetSwipeForBallot(grabId,slotId){
  const attach=()=>{
    const slot=document.getElementById(slotId);if(!slot)return;
    const handles=[];
    const grab=document.getElementById(grabId);if(grab)handles.push(grab);
    const lbl=document.getElementById('vote-right-label');if(lbl&&!handles.includes(lbl))handles.push(lbl);
    if(!handles.includes(slot))handles.push(slot); // v133 — whole sheet swipes
    if(!handles.length)return;
    let startY=null,dy=0,fromBody=false;
    const onStart=e=>{
      if(!slot.classList.contains('ballot-sheet'))return;   // ballot role only
      fromBody=(e.currentTarget===slot);
      if(fromBody&&slot.scrollTop>0)return; // not at top → let it scroll
      startY=e.touches[0].clientY;dy=0;slot.style.transition='none';
    };
    const onMove=e=>{
      if(startY===null)return;
      if(fromBody&&slot.scrollTop>0){startY=null;slot.style.transition='';slot.style.transform='';return;}
      dy=Math.max(0,e.touches[0].clientY-startY);
      if(dy>0&&e.cancelable)e.preventDefault();
      slot.style.transform='translateY('+dy+'px)';
    };
    const end=()=>{
      if(startY===null)return;
      slot.style.transition='';slot.style.transform='';
      const close=dy>70;startY=null;dy=0;fromBody=false;
      if(close)dismissBallotSheet();
    };
    handles.forEach(h=>{
      h.addEventListener('touchstart',onStart,{passive:true});
      h.addEventListener('touchmove',onMove,{passive:false});
      h.addEventListener('touchend',end);
      h.addEventListener('touchcancel',end);
    });
  };
  if(document.readyState!=='loading')attach();else document.addEventListener('DOMContentLoaded',attach);
}

// One place that closes the community detail, so every path clears the same state.
function closeCommunityDetail(){
  closeSlot('vc-slot');
  inspectCommunityId=null;
  highlightVoteItem('vote-results-tierlist',null);
}
// v96.2 — creator + personal detail closers, mirroring closeCommunityDetail, so
// the new X buttons and swipe on those sheets clear the same state the
// outside-click handler already used.
function closeCreatorDetail(){
  closeSlot('vk-slot');
  inspectCreatorId=null;
  highlightVoteItem('vote-creator-tierlist',null);
}
function closePersonalDetail(){
  // The personal slot doubles as the ballot; only tear down the DETAIL role here.
  closeSlot('vp-slot'); // adds .hidden -> with .as-sheet still on, this slides down via translateY(100%)
  inspectItemId=null;
  // v99.8 — on PHONE, do NOT strip .as-sheet. Stripping it dropped the slot to its
  // ballot transform:translateX(-50%), so the NEXT open animated diagonally from the
  // left. The outside-tap close never stripped it (which is why only X/swipe reopens
  // were wrong). Keeping .as-sheet is safe: since v99.5 the sheet is position:fixed,
  // so .as-sheet.hidden (translateY(100%)) reserves no in-flow space (no gap). It gets
  // reset the next time the slot enters ballot mode. Desktop strips immediately (it
  // has no ballot-transform issue and the side panel isn't a sheet).
  const vps=document.getElementById('vp-slot');
  if(!(vps&&isPhone())){
    setVpSheetMode(false);
  }
  highlightVoteItem('vote-mytierlist',null);
}
// v96 — PHONE ONLY: all three detail slots (personal / community / creator) are
// fixed to the screen bottom, so more than one open at once stacks them. Before
// opening any slot, close the OTHER two. `keep` is the slot about to open, so we
// don't close-then-reopen it. Desktop is untouched — its side-by-side columns are
// meant to show more than one detail at a time.
// v96.1 — also dismiss the open BALLOT sheet. The ballot is vp-slot in
// .ballot-sheet mode (tracked by voteCurrentItem, NOT inspectItemId), so the v96
// version didn't know it was open: tapping a community item during live voting
// opened vc-slot ON TOP of the still-open ballot. dismissBallotSheet() hides it
// cleanly (keeps the item selected so tapping it reopens the ballot). The ballot
// IS vp-slot, so skip this when vp-slot is the one being opened.
function closeOtherDetailSheets(keep){
  if(!isPhone())return;
  if(keep!=='vp-slot'){
    if(typeof dismissBallotSheet==='function')dismissBallotSheet(); // v96.1 — close the ballot if open
    if(inspectItemId!=null){closeSlot('vp-slot');inspectItemId=null;highlightVoteItem('vote-mytierlist',null);}
  }
  if(keep!=='vc-slot'&&inspectCommunityId!=null){closeSlot('vc-slot');inspectCommunityId=null;highlightVoteItem('vote-results-tierlist',null);}
  if(keep!=='vk-slot'&&inspectCreatorId!=null){closeSlot('vk-slot');inspectCreatorId=null;highlightVoteItem('vote-creator-tierlist',null);}
}
function clearVdetailPrompt(){
  // v99.8 — on PHONE keep .as-sheet on #vp-slot (see closePersonalDetail): stripping
  // it drops the slot to its ballot translateX(-50%), so the next detail open slides
  // in diagonally from the left. Safe to keep since the sheet is position:fixed.
  if(!isPhone())setVpSheetMode(false); // v78.4 — back to plain panel/ballot presentation
  // v89 — also drop the ballot-sheet role + its scroll-padding, so the two vp-slot
  // roles (ballot vs item-detail) never leave each other's classes behind.
  document.getElementById('vp-slot')?.classList.remove('ballot-sheet');
  document.body.classList.remove('ballot-sheet-open');
  clearVoteHighlights();
  closeSlot('vp-slot');closeSlot('vc-slot');closeSlot('vk-slot');
  const kd=document.getElementById('kdetail');if(kd)kd.style.display='none';
  inspectCreatorId=null;
  document.getElementById('vdetail').style.display='none';
  document.getElementById('cdetail').style.display='none';
  inspectItemId=null;inspectCommunityId=null;
}
// Legacy no-op-ish: close community inspection (kept for existing call sites).
function closeInspect(){
  inspectMode=false;inspectCommunityId=null;clearVoteHighlights();
  closeSlot('vc-slot');
  document.getElementById('cdetail').style.display='none';
}

// ── Creator-side community detail panel (cc-*) — now mirrors the shared panel ──
let ccSideItemId=null;
function showCcSide(itemId,results,data){
  // v120 — click the shown item again to close + deselect.
  if(ccSideItemId===itemId&&!document.getElementById('cc-side')?.classList.contains('cc-hidden')){
    hideCcSide();lastNavRef=null;return;
  }
  ccSideItemId=itemId;
  const d=data||{};const it=d.itemData?.[itemId]||{};
  const $=id=>document.getElementById('cc-'+id);
  // v99.0 — cc-side opens with a WIDTH slide (removing .cc-hidden animates width
  // 0→280px), displacing the community list like the creator detail. No fade rAF.
  const ccEl=document.getElementById('cc-side');
  ccEl.classList.remove('cc-hidden');
  highlightVoteItem('creator-community-tierlist',itemId);
  $('card').style.display='';
  // Image / text
  const imgWrap=$('img');imgWrap.innerHTML='';
  imgWrap.classList.remove('tappable');imgWrap.onclick=null; // v84.1 — reset between items
  if(it.img){const im=document.createElement('img');im.src=it.img;im.draggable=false;
    // v79.5 — the v79.4 attempt here was inert: `body.shape-* .detail-img-wrap
    // img{width:100%}` in the stylesheet re-supplies exactly what it removed.
    // The <img> was never the problem — the WRAPPER is width:100% with an
    // aspect-ratio, so it took whatever width each slot had left (216px vs
    // 290px) and the image faithfully filled it. Fixed in CSS instead.
    im.style.width='100%';im.style.height='100%';
    im.style.objectFit=(d.imgShape==='nocrop'?'contain':'cover');imgWrap.appendChild(im);
    // v84.1 — tap to enlarge, matching the viewer's community panel. This creator
    // community-detail panel (showCcSide) was the one detail renderer that never
    // wired it up. Same modal + shape args as renderDetailContent.
    {const sh=d.imgShape||'square';
     const round=(sh==='round'),contain=(sh==='nocrop');
     const ar=(sh==='portrait')?(285/399):(sh==='landscape'||sh==='nocrop')?(120/80):1;
     imgWrap.classList.add('tappable');
     imgWrap.onclick=()=>openSheetImg(it.img,round,contain,ar);}
  }
  else{const tx=document.createElement('div');tx.className='detail-text-item';tx.textContent=it.name||itemId;imgWrap.appendChild(tx);
    imgWrap.classList.add('tappable');const _t=it.name||itemId,_s=d.imgShape||'square';imgWrap.onclick=()=>openSheetText(_t,_s);} // v150
  const nameWrap=$('name-wrap');const nm=(it.name||'').trim();
  if(it.img&&nm){$('name').textContent=nm;nameWrap.style.display='';}else{nameWrap.style.display='none';}
  // Score / params / community — decided by the shared helpers (v79.2); this
  // panel has fixed prefixed elements, so it fills them rather than building.
  const params=d.params||[];const pv=it.paramValues||{};
  const si=detailScoreInfo(itemId,d,results);
  const scoreDisp=$('score-display');
  if(si.show){
    $('score-main').textContent=si.main;
    $('score-pct').textContent=si.sub;
    $('score-fill').style.width=si.pct+'%';scoreDisp.classList.add('show');
    // v83.7 — Win rate beside the bar for Elo, consistent with the other panels.
    const isElo=!!(results&&results.mode==='head2head');
    const barLabel=$('score-bar-label'),barVal=$('score-bar-val');
    if(barLabel)barLabel.textContent=isElo?'Win rate':'';
    if(barVal)barVal.textContent=isElo?(Math.round((si.pct||0)*10)/10)+'%':'';
  }else{scoreDisp.classList.remove('show');}

  const pSection=$('params-section');const pWrap=$('params');pWrap.innerHTML='';
  if(params.length){pSection.style.display='';params.forEach(p=>{pWrap.appendChild(vdRow(null,paramLabel(p),paramDisplayVal(p,pv[p.id])));});} // v93 — always show all params
  else{pSection.style.display='none';}

  const votesSection=$('votes-section');const bd=$('breakdown');bd.innerHTML='';
  const plTitle=$('placement-title');const plWrap=$('placement');plWrap.innerHTML='';
  const cRows=detailCommunityRows(itemId,d,results);
  const plInfo=detailPlacementInfo(itemId,d,results);
  // v84.3 — match the viewer community panel: for Elo, drop the redundant breakdown
  // (it just repeats the Elo box) and show only placement.
  const ccElo=!!(results&&results.mode==='head2head');
  const ccVotesTitle=$('votes-title');
  if(ccElo){
    if(plInfo){
      votesSection.style.display='';bd.innerHTML='';
      if(ccVotesTitle)ccVotesTitle.style.display='none';
      plTitle.style.display='';plWrap.appendChild(vdRow(plInfo.color,plInfo.label,''));
    }else{votesSection.style.display='none';}
  }else if(cRows){
    votesSection.style.display='';
    if(ccVotesTitle)ccVotesTitle.style.display='';
    if(cRows.length)cRows.forEach(r=>bd.appendChild(vdRow(r.color,r.label,r.value)));
    else bd.innerHTML='<div class="vd-row" style="color:#888">No votes yet</div>';
    if(plInfo){plTitle.style.display='';plWrap.appendChild(vdRow(plInfo.color,plInfo.label,''));}
    else{plTitle.style.display='none';}
  }else{votesSection.style.display='none';}
  highlightVoteItem('creator-community-tierlist',itemId);
}

// v98.9 — community-detail close. Hides #cc-side (row 2). Independent of the editor
// detail column now, so it no longer touches #right-col. ccSideItemId is cleared so
// the results refresh (startVotePolling2 / realtime) doesn't re-open it.
function hideCcSide(){
  ccSideItemId=null;
  const ccEl=document.getElementById('cc-side');
  if(ccEl)ccEl.classList.add('cc-hidden'); // v99.0 — width collapse animates the close
  highlightVoteItem('creator-community-tierlist',null);
}

function startVotePolling2(){
  if(votePollTimer2)clearInterval(votePollTimer2);
  votePollTimer2=setInterval(async()=>{
    if(!voteSession){clearInterval(votePollTimer2);votePollTimer2=null;return;}
    try{
      const r=await castVoteCall({action:'results',sessionId:voteSession.id});
      if(r.results)applyViewerResults(r.results); // v99.4 — skips re-render if unchanged
    }catch(e){}
  },VIEWER_POLL_MS); // v99.4 — was hardcoded 12000; now tunable via app-config
  if(VIEWER_REALTIME_ENABLED)startViewerVoteRealtime(); // v99.4 — realtime is togglable; poll is the fallback either way
}
// v99.4 — apply a fresh results payload only if it actually changed, so 1000
// viewers refetching don't each trigger a needless full re-render (and DOM churn).
// The signature is cheap: per-item winning tier + vote count + order score.
function viewerResultsSignature(results){
  if(!results||!results.items)return String(results&&results.mode)+'|'+(results&&results.totalVoters);
  const items=results.items;const keys=Object.keys(items).sort();
  let sig=(results.mode||'')+'|'+(results.totalVoters||0)+'|';
  for(const k of keys){const it=items[k]||{};sig+=k+':'+(it.winningTierId||'')+','+(it.totalVotes||0)+','+(it.orderScore||0)+';';}
  return sig;
}
function applyViewerResults(results){
  const sig=viewerResultsSignature(results);
  if(sig===viewerLastResultsSig)return; // nothing changed — skip the render entirely
  viewerLastResultsSig=sig;
  voteResults=results;renderVoteResults();
}
// v97.4 — the viewer previously had NO Realtime subscription on votes, so the
// community results (and the new intra-tier order) only refreshed on the 12s poll
// — hence the multi-second lag. Subscribe to this session's votes and refresh
// results on change, debounced so a burst of votes triggers one refetch. Mirrors
// the creator's startVoteRealtime. The poll remains as a fallback.
let viewerVoteRTChannel=null,viewerVoteRTTimer=null,viewerVoteRTLast=0;
const VIEWER_VOTE_RT_MS=1500; // min debounce so a burst of votes triggers one refetch
// v99.4 — viewer live-update settings, overwritten from tlf_app_config() at boot.
// Defaults match the pre-config behaviour if the config read fails.
let VIEWER_REALTIME_ENABLED=true; // false = viewers poll only, no Realtime subscription
let VIEWER_POLL_MS=15000;         // fallback poll interval (was a hardcoded 12000)
let VIEWER_RT_JITTER_MS=4000;     // random 0..this spread on each Realtime-triggered refetch
let viewerLastResultsSig=null;    // signature of the last results we rendered; skip refetch/render if unchanged
function startViewerVoteRealtime(){
  stopViewerVoteRealtime();
  if(!VIEWER_REALTIME_ENABLED)return; // v99.4 — disabled by config: poll-only, no message spend
  if(!voteSession||!voteSession.id)return;
  try{
    viewerVoteRTChannel=sb.channel('viewer-votes-'+voteSession.id)
      .on('postgres_changes',
        {event:'*',schema:'public',table:'votes',filter:'session_id=eq.'+voteSession.id},
        ()=>{scheduleViewerVoteRefresh();})
      .subscribe();
  }catch(e){/* Realtime unavailable — the poll still covers updates */}
}
function stopViewerVoteRealtime(){
  if(viewerVoteRTChannel){try{sb.removeChannel(viewerVoteRTChannel);}catch(e){}viewerVoteRTChannel=null;}
  if(viewerVoteRTTimer){clearTimeout(viewerVoteRTTimer);viewerVoteRTTimer=null;}
}
function scheduleViewerVoteRefresh(){
  if(viewerVoteRTTimer)return; // one already queued
  const since=Date.now()-viewerVoteRTLast;
  const base=since>=VIEWER_VOTE_RT_MS?0:(VIEWER_VOTE_RT_MS-since);
  // v99.4 — JITTER: add a random 0..VIEWER_RT_JITTER_MS so N viewers pinged by the
  // SAME vote spread their refetches across that window instead of stampeding the
  // results function within one ~1.5s slice. Flattens DB load at scale.
  const jitter=VIEWER_RT_JITTER_MS>0?Math.floor(Math.random()*VIEWER_RT_JITTER_MS):0;
  viewerVoteRTTimer=setTimeout(async()=>{
    viewerVoteRTTimer=null;viewerVoteRTLast=Date.now();
    if(!voteSession)return;
    try{
      const r=await castVoteCall({action:'results',sessionId:voteSession.id});
      if(r&&r.results)applyViewerResults(r.results); // v99.4 — skips re-render if unchanged
    }catch(e){}
  },base+jitter);
}

// Build the viewer's read-only item detail (image/name, parameters, score).
function openViewerItemDetail(itemId,showBreakdown){
  if(!viewerData)return;
  // v120 — click the shown item again to close its modal.
  if(_vidShownId===itemId&&document.getElementById('viewer-item-modal')?.classList.contains('show')){
    closeViewerItemDetail();return;
  }
  _vidShownId=itemId;
  const it=(viewerData.itemData||{})[itemId];if(!it)return;
  const params=viewerData.params||[];
  const pv=it.paramValues||{};
  const sliders=params.filter(p=>p.type==='slider');

  const nameEl=document.getElementById('vid-name');
  const nm=(it.name||'').trim();
  if(nm){nameEl.textContent=nm;nameEl.style.display='';}
  else{nameEl.style.display='none';}
  const imgWrap=document.getElementById('vid-img-wrap');imgWrap.innerHTML='';
  if(it.img){const im=document.createElement('img');im.src=it.img;im.draggable=false;imgWrap.appendChild(im);imgWrap.style.display='';}
  else{imgWrap.style.display='none';}

  // score (only in AUTO-RANK — a manual list can still HAVE slider params it
  // doesn't rank by, so "has sliders" wrongly showed a score on closed manual
  // sessions. v92: gate on the mode being auto-rank, preferring the running/closed
  // session's mode, falling back to the saved list mode.)
  const _sm=(typeof voteSession!=='undefined'&&voteSession&&voteSession.mode)
    ? voteSession.mode
    : ((typeof currentSession!=='undefined'&&currentSession&&currentSession.mode)?currentSession.mode:null);
  const _isAuto=_sm?(_sm==='parameter'):((viewerData.currentMode||'manual')==='auto');
  const scoreEl=document.getElementById('vid-score');
  if(_isAuto&&sliders.length){
    let score=0;sliders.forEach(p=>{const v=parseFloat(pv[p.id]||0);if(!isNaN(v))score+=Math.min(10,Math.max(1,v));});
    const max=sliders.length*10;const pct=max?Math.round(score/max*100):0;
    document.getElementById('vid-score-main').textContent=score+' / '+max+' pts';
    document.getElementById('vid-score-pct').textContent=pct+'%';
    document.getElementById('vid-score-fill').style.width=pct+'%';
    scoreEl.style.display='';
  } else {scoreEl.style.display='none';}

  // parameter list
  const list=document.getElementById('vid-params');list.innerHTML='';
  if(!params.length){list.innerHTML='<div class="vid-noparams">No parameters set for this list.</div>';}
  else{
    params.forEach(p=>{
      const row=document.createElement('div');row.className='vid-param-row';
      const name=document.createElement('span');name.className='vid-param-name';name.textContent=p.name+(p.unit?` (${p.unit})`:'');
      const val=document.createElement('span');val.className='vid-param-val';
      val.textContent=paramDisplayVal(p,pv[p.id]); // v94 — empty slider -> 1/10, empty text -> —
      row.appendChild(name);row.appendChild(val);list.appendChild(row);
    });
  }
  // Community tier-vote breakdown (when opened from the community results).
  const bd=document.getElementById('vid-breakdown');
  const bdRows=document.getElementById('vid-breakdown-rows');
  const itemRes=voteResults&&voteResults.items&&voteResults.items[itemId];
  if(showBreakdown&&itemRes&&itemRes.tierVotes){
    bdRows.innerHTML='';
    const tv=itemRes.tierVotes; // {tierId: count}
    // Show in the list's tier order.
    voteTiers.forEach(t=>{
      const count=tv[t.id]||0;if(!count)return;
      const row=document.createElement('div');row.className='vid-param-row';
      const name=document.createElement('span');name.className='vid-param-name';
      const sw=document.createElement('span');sw.style.cssText='display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle;background:'+t.color;
      name.appendChild(sw);name.appendChild(document.createTextNode(t.label));
      const val=document.createElement('span');val.className='vid-param-val';
      val.textContent=count+' vote'+(count===1?'':'s');
      row.appendChild(name);row.appendChild(val);bdRows.appendChild(row);
    });
    const winner=voteTiers.find(t=>t.id===itemRes.winningTierId);
    const summary=document.createElement('div');summary.className='vid-param-row';
    summary.style.borderTop='1px solid #2d2d44';summary.style.marginTop='4px';summary.style.paddingTop='6px';
    const sn=document.createElement('span');sn.className='vid-param-name';sn.textContent='Community placement';
    const sv=document.createElement('span');sv.className='vid-param-val';sv.textContent=winner?winner.label:'—';
    summary.appendChild(sn);summary.appendChild(sv);bdRows.appendChild(summary);
    bd.style.display='';
  }else{bd.style.display='none';}

  document.getElementById('viewer-item-modal').classList.add('show');
}
function closeViewerItemDetail(){document.getElementById('viewer-item-modal').classList.remove('show');_vidShownId=null;}
let _vidShownId=null; // v120 — currently-shown item in the static viewer modal (for click-to-close)

// Admin: open an item's detail from a report snapshot, reusing the viewer modal.
function openAdminItemDetail(snapshot,itemId){
  viewerData=snapshot; // point the shared modal at the snapshot data
  const modal=document.getElementById('viewer-item-modal');
  modal.style.zIndex='10002'; // above the admin overlay (10001)
  openViewerItemDetail(itemId);
}

function showViewerUpdatedToast(){
  const t=document.getElementById('viewer-updated-toast');if(!t)return;
  t.classList.add('show');
  setTimeout(()=>t.classList.remove('show'),2600);
}

// Poll every 15s; only re-render when updated_at changes (creator saved changes).
function startViewerPolling(){
  stopViewerPolling();
  if(!viewerToken)return;
  viewerPollTimer=setInterval(async()=>{
    if(document.hidden)return; // don't poll a backgrounded tab
    try{
      const{data,error}=await sb.from('tier_lists').select('id,title,data,share_token,is_public,updated_at').eq('share_token',viewerToken).eq('is_public',true).single(); // v77 — never user_id
      if(error||!data)return;
      applyViewerUpdate(data);
    }catch(e){}
    // Also check the voting-session status, so session start/close is caught
    // even when Realtime isn't available (compares + re-renders only on change).
    onSessionRealtimeChange();
  },60000); // 60s safety net beneath Realtime push
}
function stopViewerPolling(){if(viewerPollTimer){clearInterval(viewerPollTimer);viewerPollTimer=null;}}

/* ── CONTENT REPORTING ── */
function openReportModal(){
  const btn=document.getElementById('report-submit-btn');
  btn.disabled=false;btn.textContent='Submit Report';
  document.getElementById('report-reason').value='illegal';
  document.getElementById('report-note').value='';
  document.getElementById('report-modal').classList.add('show');
}
function closeReportModal(){document.getElementById('report-modal').classList.remove('show');}
async function submitReport(){
  if(!viewerToken){showFlash('⚠️ Nothing to report');return;}
  const btn=document.getElementById('report-submit-btn');
  const reason=document.getElementById('report-reason').value;
  const note=document.getElementById('report-note').value.trim();
  btn.disabled=true;btn.textContent='Submitting…';
  try{
    const resp=await fetch(`${SUPABASE_URL}/functions/v1/report-content`,{
      method:'POST',
      headers:{'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY},
      body:JSON.stringify({share_token:viewerToken,reason,note})
    });
    if(!resp.ok){
      let msg='Report failed ('+resp.status+')';
      try{const j=await resp.json();if(j&&j.error)msg=j.error;}catch(_){}
      throw new Error(msg);
    }
    closeReportModal();
    showFlash('✅ Thanks — this has been reported.');
    // brief cooldown feedback on reopen: mark button as recently used
    btn.textContent='✓ Reported';
    setTimeout(()=>{btn.disabled=false;btn.textContent='Submit Report';},3000);
  }catch(e){
    btn.disabled=false;btn.textContent='Submit Report';
    showFlash('⚠️ '+(e.message||'Report failed'));
  }
}

function backToHome(noPush){
  stopViewerPolling();
  stopViewerRealtime();
  exitVotingMode();
  setAuthFieldsEnabled(true);
  document.getElementById('viewer-screen').classList.remove('show');
  document.getElementById('auth-screen').classList.remove('hidden');
  if(!noPush)history.pushState({},'',window.location.pathname); // v147 — Back already moved the URL
}

/* ── LIST MANAGEMENT ── */
async function loadMyLists(skipAutoLoad){
  if(!currentUser)return;
  const{data,error}=await sb.from('tier_lists').select('id,title,share_token,is_public,updated_at').eq('user_id',currentUser.id).order('updated_at',{ascending:false});
  if(error){console.warn(error);hideListLoading();return;}
  myLists=data||[];
  renderMyLists();
  if(skipAutoLoad){hideListLoading();return;} // keep the restored unsaved canvas
  const lastId=localStorage.getItem('tlf_last_list_id');
  const found=myLists.find(l=>l.id===lastId);
  if(found)loadList(found.id);
  else if(myLists.length>0)loadList(myLists[0].id);
  else {initFresh();hideListLoading();}
}

function renderMyLists(){
  const c=document.getElementById('my-lists-container');c.innerHTML='';

  // List-count indicator + at-limit guidance.
  const used=myLists.length;
  const badge=document.getElementById('ml-count-badge');
  if(badge){badge.textContent=used+'/'+MAX_LISTS;badge.classList.toggle('at-limit',used>=MAX_LISTS);}
  const note=document.getElementById('ml-limit-note');
  if(note){
    if(used>=MAX_LISTS&&!currentListId){
      note.textContent='You\u2019ve used all '+MAX_LISTS+' list slots. Delete one below to save your current work \u2014 your unsaved list stays open while you do.';
      note.className='ml-limit-note show warn';
    }else if(used>=MAX_LISTS){
      note.textContent='All '+MAX_LISTS+' list slots used. Delete one to create a new list.';
      note.className='ml-limit-note show';
    }else{
      note.textContent='';note.className='ml-limit-note';
    }
  }

  function header(text){const h=document.createElement('div');h.className='ml-group-header';h.textContent=text;c.appendChild(h);}

  // ── Unsaved section: shown only when the current working list isn't saved yet ──
  if(!currentListId){
    header('Working on (unsaved)');
    const item=document.createElement('div');item.className='list-item active-list unsaved-item';
    const info=document.createElement('div');info.className='list-item-info';
    const title=document.createElement('div');title.className='list-item-title';title.textContent=currentListTitle||'New List';
    const meta=document.createElement('div');meta.className='list-item-meta';
    meta.innerHTML='<span class="unsaved-badge">● Unsaved</span> · not yet in the cloud';
    info.appendChild(title);info.appendChild(meta);
    item.appendChild(info);
    item.onclick=()=>closeMyLists();
    c.appendChild(item);
  }

  // ── Saved section ──
  if(myLists.length)header('Saved lists');
  myLists.forEach(l=>{
    const item=document.createElement('div');item.className='list-item'+(l.id===currentListId?' active-list':'');
    const info=document.createElement('div');info.className='list-item-info';
    const title=document.createElement('div');title.className='list-item-title';title.textContent=l.title||'Untitled';
    const meta=document.createElement('div');meta.className='list-item-meta';
    const date=new Date(l.updated_at).toLocaleDateString();
    // Build F — a list can be a private draft (is_public:false) after "Start
    // voting" but before the creator Saves to publish. Mark it so.
    const tag=l.is_public
      ? ' · <span class="list-item-code">Code: '+l.share_token+'</span>'
      : ' · <span class="list-item-private">Private</span>';
    meta.innerHTML=date+tag;
    info.appendChild(title);info.appendChild(meta);
    const del=document.createElement('button');del.className='list-item-del';del.textContent='✕';
    del.onclick=e=>{e.stopPropagation();deleteList(l.id)};
    item.appendChild(info);item.appendChild(del);
    item.onclick=()=>{loadList(l.id);closeMyLists()};
    c.appendChild(item);
  });
}

function showListLoading(){document.getElementById('list-loading')?.classList.add('show');}
function hideListLoading(){document.getElementById('list-loading')?.classList.remove('show');}

// ── v76: realtime creator sync ────────────────────────────────────────────
// v74 made stale canvases refresh on RELOAD. This makes it live: while the
// editor is open we watch the current list's row, so a save on another device
// lands here immediately.
//
// The awkward part is that YOUR OWN saves echo back on this same subscription.
// Comparing timestamps is not sufficient: the realtime event can arrive before
// the save response has updated our baseline, and in that window our own write
// looks foreign. Because saveList() sets updated_at explicitly, we can remember
// that exact string first and ignore any event carrying it — an exact match, so
// there is no timing window at all.
let creatorRealtimeChannel=null;
let pendingSaveStamp=null;   // updated_at we are about to write (echo guard)

function stopCreatorRealtime(){
  if(creatorRealtimeChannel){try{sb.removeChannel(creatorRealtimeChannel);}catch(e){}creatorRealtimeChannel=null;}
}
function startCreatorRealtime(listId){
  stopCreatorRealtime();
  if(!listId||!currentUser)return;
  try{
    creatorRealtimeChannel=sb.channel('creator-list-'+listId)
      .on('postgres_changes',
        {event:'UPDATE',schema:'public',table:'tier_lists',filter:'id=eq.'+listId},
        (payload)=>{onCreatorListChanged(payload&&payload.new);})
      .on('postgres_changes',
        {event:'DELETE',schema:'public',table:'tier_lists',filter:'id=eq.'+listId},
        ()=>{onCreatorListDeleted();})
      .subscribe();
  }catch(e){/* Realtime unavailable — the reload check still covers it */}
}

async function onCreatorListChanged(row){
  if(!row||!currentListId)return;
  const stamp=row.updated_at||null;
  if(stamp&&pendingSaveStamp&&stamp===pendingSaveStamp)return; // our own save
  const serverAt=stamp?new Date(stamp).getTime():0;
  if(!serverAt||(loadedListSavedAt&&serverAt<=loadedListSavedAt))return;
  if(!listDirty){
    // Nothing unsaved here: this canvas is just an old copy. Refresh it in place.
    await loadList(currentListId);
    showFlash('🔄 Updated — this list was changed on another device');
  }else{
    // Unsaved edits present. There is no merge, so never discard them silently.
    // The id keeps this from stacking up if the other device saves repeatedly.
    showFlash('⚠️ This list was changed on another device. Your unsaved edits are shown — saving will overwrite the other version.',
      {warn:true,id:'remote-change',actionLabel:'Load other version',
       action:()=>{if(currentListId)loadList(currentListId);}}); // v77 — loadList still confirms the discard
  }
}
function onCreatorListDeleted(){
  // v140 — the list was genuinely deleted elsewhere (another device, admin/moderation,
  // account deletion). It stays deleted; there's no restore (that would undermine the
  // admin process). Grey out Save (a save would fail anyway) and say so plainly.
  stopCreatorRealtime();
  listRemoteDeleted=true;
  updateListBanner();   // disables the Save button
  showFlash('⚠️ This list was deleted.',{warn:true,id:'remote-deleted'});
}

// v74 — after restoring a cached canvas, ask the server whether the list has
// moved on. Only compares a timestamp (one tiny query), so it costs nothing when
// nothing changed.
async function checkForRemoteChanges(){
  if(!currentUser||!currentListId)return;      // unsaved canvas: nothing to compare
  try{
    const{data,error}=await sb.from('tier_lists')
      .select('updated_at').eq('id',currentListId).maybeSingle();
    if(error||!data||!data.updated_at)return;  // deleted elsewhere, or unreadable: leave the canvas alone
    const serverAt=new Date(data.updated_at).getTime();
    if(!loadedListSavedAt||serverAt<=loadedListSavedAt)return; // nothing newer
    if(!listDirty){
      // Clean canvas = a stale snapshot of a saved list. Safe to refresh.
      await loadList(currentListId);
      showFlash('🔄 Updated — this list was changed on another device');
    }else{
      // Unsaved edits present. Never discard them silently; there is no merge,
      // so the user has to decide. Warning toasts persist until dismissed.
      showFlash('⚠️ This list was changed on another device. Your unsaved edits are shown — saving will overwrite the other version.',
        {warn:true,id:'remote-change',actionLabel:'Load other version',
         action:()=>{if(currentListId)loadList(currentListId);}}); // v77
    }
  }catch(e){}
}
async function loadList(id,opts){
  opts=opts||{};
  // v77 — this used to overwrite unsaved edits without a word. force:true is for
  // callers where the user has already made the choice explicitly.
  if(listDirty&&!opts.force){
    const ok=await tlfConfirm({
      title:'Discard unsaved changes?',
      message:'This canvas has changes you haven\'t saved.\n\nLoading another version will discard them. There is no way to merge the two.',
      confirmText:'Discard and load',danger:true});
    if(!ok)return;
  }
  showListLoading();
  suppressDirty=true;
  try{
    const{data,error}=await sb.from('tier_lists').select('*').eq('id',id).single();
    if(error||!data)return;
    listRemoteDeleted=false; // v140 — loading a real list clears any prior remote-delete state
    currentListId=id;
    loadedListSavedAt=data.updated_at?new Date(data.updated_at).getTime():null;
    currentListTitle=data.title||'New List';
    document.getElementById('current-list-title').value=currentListTitle;
    localStorage.setItem('tlf_last_list_id',id);
    const d=data.data||{};
    params=d.params||[];itemData=d.itemData||{};idCounter=d.idCounter||0;
    creatorPersonal=null;creatorPersonalListId=null;   // v84.6 — new list; personal loads fresh below
    currentMode=['manual','auto','elo'].includes(d.currentMode)?d.currentMode:'manual'; // v79
    manualSnapshot=d.manualSnapshot||null;
    imgShape=d.imgShape||'square';
    applyShape(imgShape);
    rowRanges=d.rowRanges||{};
    const tl=document.getElementById('tierlist');tl.innerHTML='';
    document.querySelectorAll('.color-popup').forEach(p=>p.remove());
    (d.tiers||[]).forEach(t=>addRow(t.label,t.color,[],t.id));
    const allEls={};
    Object.keys(itemData).forEach(id=>{const dd=itemData[id];allEls[id]=dd.img?buildItemEl(id,'img',dd.img):buildItemEl(id,'text',null,dd.name||id);});
    (d.tiers||[]).forEach(t=>{const zone=document.querySelector(`.tier-items[data-zone="${t.id}"]`);(t.items||[]).forEach(id=>{if(allEls[id]&&zone)zone.appendChild(allEls[id]);});});
    const pool=document.getElementById('item-pool');pool.innerHTML='';
    (d.pool||[]).forEach(id=>{if(allEls[id])addToPool(allEls[id],pool)});
    // v82.4 — SAFETY NET (see other load path): un-orphan any built-but-unplaced item.
    Object.keys(allEls).forEach(id=>{if(!document.getElementById(id))addToPool(allEls[id],pool);});
    refreshSortSelect();applyModeUI();refreshAllDots();
    // Build F — load the creator's own Elo ranking (list-keyed) on open, for any
    // Elo list, so it shows immediately without needing a community session.
    // Build Y — also resume mid-voting on refresh: if we were voting on THIS list
    // before the reload, restore the matchup instead of dropping to Start.
    if(currentMode==='elo'&&currentListId){
      try{if(localStorage.getItem('tlf_ch2h_active_list')===currentListId)ch2hActive=true;}catch(e){}
      ch2hLoadPersonal();
      updateCreatorH2H();
    }
    currentShareToken=data.share_token||null;
    currentListIsPublic=!!data.is_public;   // Build F — Save publishes a private draft
    refreshShareSection();   // v137 — QR if public, "Make list public" button if private
    renderMyLists();
  }finally{
    hideListLoading();
    suppressDirty=false;
    if(currentListId){savedMode=currentMode;savedAt=loadedListSavedAt||Date.now();}
    clearDirty();
    writeCache();  // persist which list is now open (clean state) for reload
    startCreatorRealtime(currentListId); // v76 — watch this list for remote edits
  }
}

async function saveCurrentList(opts){
  const _silentSave=!!(opts&&opts.silent); // v140 — suppress the "Saved!" flash (used by Clear list)
  // v98.0 — anon users can't save; Save is the account gate. Stage 2 opens the
  // in-place popup that carries the anon list over + auto-saves it on success.
  if(!currentUser){
    if(anonMode)openAnonAuth('save');
    else showFlash('⚠️ Please sign in to save.');
    return false;
  }
  // v98.3 — a signed-in user can still hold LOCAL images if a carry-over migration
  // failed and left them local. Retry the migration before saving so the saved
  // list gets real URLs (not the blank refs the safety net would otherwise write).
  // All-or-nothing: if it fails again, don't save — keep the images local.
  {
    const pendLocal=Object.keys(itemData).filter(id=>itemData[id]&&itemData[id].localImg);
    if(pendLocal.length){
      showFlash('⏳ Uploading your images…',{id:'anon-mig'});
      const mig=await runAnonImageMigration(pendLocal);
      dismissFlash('anon-mig');
      if(!mig.ok){showFlash('⚠️ Couldn\u2019t upload your images — they\u2019re still saved on this device. Please try again.',{warn:true});return false;}
      writeCache();
    }
  }
  // Client-side guard for the 3-list cap (DB trigger enforces it airtight too).
  if(!currentListId&&myLists.length>=MAX_LISTS){
    showFlash('⚠️ You can have up to '+MAX_LISTS+' saved lists. Delete one to save a new list.');
    return false;
  }
  const ind=document.getElementById('saving-indicator');ind.classList.add('show');
  const listData=buildSaveData();
  try{
    if(currentListId){
      pendingSaveStamp=new Date().toISOString(); // v76 — echo guard for realtime
      // v137 — Save NO LONGER publishes. It just saves the list's title/data and
      // leaves the public/private state exactly as it is. Publishing is now an
      // explicit action ("Make list public" in the QR panel -> makeListPublic()).
      const patch={title:currentListTitle,data:listData,updated_at:pendingSaveStamp};
      const{data:upd,error}=await sb.from('tier_lists').update(patch).eq('id',currentListId).select('updated_at').single();
      if(error)throw error;
      loadedListSavedAt=upd&&upd.updated_at?new Date(upd.updated_at).getTime():Date.now(); // v74
      refreshShareSection();   // keep the share panel in sync (QR if public, "Make public" if private)
    } else {
      // v137 — new lists are saved PRIVATE with NO share code. A code is only minted
      // when the creator publishes, so private lists never consume a code slot.
      const{data,error}=await sb.from('tier_lists').insert({user_id:currentUser.id,title:currentListTitle,data:listData,is_public:false,share_token:null}).select().single();
      if(error)throw error;
      currentListId=data.id;
      currentListIsPublic=false;
      currentShareToken=null;
      loadedListSavedAt=data.updated_at?new Date(data.updated_at).getTime():Date.now(); // v74
      startCreatorRealtime(currentListId); // v76 — watch the newly created list
      localStorage.setItem('tlf_last_list_id',data.id);
      refreshShareSection();   // shows the "Make list public" button (list is private)
      myLists.unshift(data);
    }
    await loadMyLists(true);   // refresh picker only; keep the current canvas
    savedMode=currentMode;savedAt=Date.now();
    // v83.1 — Model A: the Elo editor list is the creator's OWN personal-vote
    // ranking and nothing else. Saving must NOT re-rank from community standings
    // (that old line caused the order to change on save). The DOM already holds
    // the personal-vote ranking, which is exactly what was saved.
    clearDirty();
    updateVoteModeLine();      // v87 — saved mode now matches editor mode, so clear any unsaved-mode drift border
    writeCache();              // rewrite tlm9 with the (now saved) identity + clean state
    if(!_silentSave)showFlash('✅ Saved!');
    return true;
  }catch(e){
    showFlash('⚠️ '+friendlyQuotaError(e));
    return false;
  }
  finally{ind.classList.remove('show');}
}
// Translate DB trigger errors into clear messages.
function friendlyQuotaError(e){
  const m=(e&&e.message)||String(e);
  // Parse the ACTUAL limit number from the DB error text (e.g. "at most 3 saved
  // lists"), so the message is correct even if the DB limit differs from the
  // client constant. Falls back to the client constant if parsing fails.
  const num=()=>{const mt=m.match(/at most (\d+)/i);return mt?mt[1]:null;};
  if(m.includes('LIST_LIMIT')) return 'You can have up to '+(num()||MAX_LISTS)+' saved lists. Delete one first.';
  if(m.includes('ITEM_LIMIT')) return 'A list can have at most '+(num()||MAX_ITEMS)+' items.';
  if(m.includes('PARAM_LIMIT'))return 'A list can have at most '+(num()||MAX_PARAMS)+' parameters.';
  return 'Save failed: '+m;
}

async function generateUniqueCode(){
  // 5 digits = 90,000 codes (was 4 = 9,000). Existing 4-digit codes keep working:
  // lookup is an exact string match, so both lengths coexist.
  for(let attempt=0;attempt<12;attempt++){
    const code=String(Math.floor(10000+Math.random()*90000));
    const{data}=await sb.from('tier_lists').select('id').eq('share_token',code).maybeSingle();
    if(!data)return code;
  }
  // Twelve collisions in a row means the space is effectively full — surface it
  // rather than looping forever, which is what the old version did.
  throw new Error('Could not allocate a share code — please try again');
}

async function deleteList(id){
  if(!await tlfConfirm({title:'Delete tier list?',message:'This permanently deletes the list and everything in it.\n\nThis cannot be undone.',confirmText:'Delete list',danger:true}))return;
  // Note: Storage files are not deleted here. With dedup, images may be shared across
  // lists; the scheduled cleanup job removes any that become truly unreferenced.
  await sb.from('tier_lists').delete().eq('id',id);
  if(id===currentListId){
    // Deleted the list we're viewing -> reset to a fresh canvas.
    stopCreatorRealtime(); // v76
    currentListId=null;currentShareToken=null;localStorage.removeItem('tlf_last_list_id');
    // v73 — the deleted list's name used to carry over to the fresh canvas.
    // (Reset is different by design: it keeps the name on purpose, so this fix
    // lives here rather than in initFresh(), which both paths share.)
    currentListTitle='New List';
    initFresh();hideQR();writeCache();
    const titleInput=document.getElementById('current-list-title');
    if(titleInput)titleInput.value=currentListTitle;
    updateListBanner();
    await loadMyLists();
  }else{
    // Deleted a DIFFERENT list (e.g. freeing space) -> keep the current working
    // canvas exactly as it is; only refresh the picker. Never auto-load another list.
    await loadMyLists(true);
  }
  showFlash('🗑 List deleted');
}

function buildSaveData(){
  const tiers=[...document.querySelectorAll('.tier-row')].map(row=>({
    id:row.dataset.id,
    label:row.querySelector('.tier-label-text')?.textContent.trim()||'',
    color:row.querySelector('.tier-label-wrap')?.style.background||'#6b7280',
    items:[...row.querySelectorAll('.item')].map(i=>i.id)
  }));
  const pool=[...document.querySelectorAll('#item-pool .item')].map(i=>i.id);
  // imageIds: every image this list uses, by canonical ID — read by the Phase 1
  // public-viewer RLS policy and the cleanup job to answer "which images does
  // this list reference?" without scanning itemData.
  const imageIds=[...new Set(Object.values(itemData).map(it=>it&&it.imageId).filter(Boolean))];
  // v98.3 — SAFETY NET: a local anon image ref (object URL in `img`, IndexedDB
  // key in `localImg`) must never be persisted to the server — it's meaningless
  // there and a blob: URL would render broken for viewers. The sign-up migration
  // rewrites these to real URLs before any save; this strips any that slipped
  // through (defensive), sending a blank image rather than a dead local ref.
  const cleanItemData={};
  Object.keys(itemData).forEach(id=>{
    const it=itemData[id]||{};
    if(it.localImg||(typeof it.img==='string'&&it.img.startsWith('blob:'))){
      const c={...it};c.img='';c.imageId=c.imageId||null;delete c.localImg;
      cleanItemData[id]=c;
    }else cleanItemData[id]=it;
  });
  const eloRanking=(currentMode==='elo')?(creatorEloRanking||{}):{};
  return{params,itemData:cleanItemData,tiers,pool,idCounter,currentMode,manualSnapshot,imgShape,rowRanges,imageIds,eloRanking};
}

function createNewList(){
  const nameInput=document.getElementById('new-list-title');
  const typed=(nameInput?.value||'').trim();
  currentListId=null;currentShareToken=null;
  currentListTitle=typed||'New List';
  document.getElementById('current-list-title').value=currentListTitle;
  if(nameInput)nameInput.value='';
  localStorage.removeItem('tlf_last_list_id');
  // Drop any previous list's voting/community state so a fresh list doesn't
  // show stale results until the next reload.
  currentSession=null;voteSession=null;lastCreatorResults=null;voteResults=null;
  clearCommunityResultsState();
  initFresh();closeMyLists();hideQR();
  updateListBanner();
  writeCache();  // persist the new (unsaved, null-identity) canvas for reload
  showFlash('🆕 New list "'+currentListTitle+'" — hit 💾 Save to keep it');
}

function markTitleDirty(){
  const btn=document.getElementById('ml-apply-btn');
  const val=document.getElementById('current-list-title').value.trim();
  const changed=(val!==currentListTitle&&val!=='');
  if(btn)btn.classList.toggle('dirty',changed);
  // Build Y — a title change is an unsaved change to the list, so light the main
  // Save button too (previously only the little ✓ apply-button reacted).
  if(changed)markDirty();
}

// Apply a rename to the current list. Updates in-memory title, clears the dirty
// cue, and — if this list is already saved — persists just the title to the DB
// immediately so the rename sticks without needing a full Save.
async function applyRename(){
  const input=document.getElementById('current-list-title');
  const val=(input.value||'').trim();
  if(!val){input.value=currentListTitle;markTitleDirty();return false;}
  if(val===currentListTitle){markTitleDirty();return true;}
  currentListTitle=val;
  document.getElementById('ml-apply-btn')?.classList.remove('dirty');
  updateListBanner();
  // v98.4 — a rename is a change the user expects to STICK without a second click.
  // For a signed-in user we therefore SAVE the whole list on rename (not just the
  // title): a saved list persists the rename + any other pending edits in one go;
  // an unsaved list gets created and saved. saveCurrentList handles the 3-list cap
  // gracefully (draft + message) so this never silently fails. Anonymous users
  // can't save, so their rename stays in-memory (persisted to the anon cache).
  if(currentUser){
    writeCache();                 // reflect the new title in cache before the save attempt
    const saved=await saveCurrentList();
    if(saved){
      const l=myLists.find(x=>x.id===currentListId);if(l)l.title=currentListTitle;
      renderMyLists();
      showFlash('✏️ Renamed to "'+currentListTitle+'"');
    }else{
      // Save was blocked (e.g. list limit). The name is applied in-memory; the
      // save-path flash already explained why it couldn't save.
      renderMyLists();
    }
  } else {
    // Anonymous: apply the in-memory name, reflect it, and persist to the anon cache.
    renderMyLists();
    writeCache();
    showFlash('✏️ Name set to "'+currentListTitle+'"');
  }
  return true;
}

// ✓ button: apply the name, then close the panel (works for saved and unsaved lists).
async function applyRenameAndClose(){
  const ok=await applyRename();
  if(ok)closeMyLists();
}
// Only treat a click on the backdrop as "close" when the gesture BOTH started
// and ended on the overlay itself — so selecting text in the name field and
// releasing the mouse outside the panel no longer closes it.
let mlDownOnOverlay=false;
function mlOverlayDown(e){mlDownOnOverlay=(e.target===e.currentTarget);}
function mlOverlayUp(e){if(mlDownOnOverlay&&e.target===e.currentTarget)closeMyLists();mlDownOnOverlay=false;}
function openMyLists(){document.getElementById('my-lists-overlay').classList.add('show');renderMyLists();}
function closeMyLists(){document.getElementById('my-lists-overlay').classList.remove('show');}

/* ── QR ── */
let currentQRCode=null;
// Render the QR at a high pixel resolution (it scales down crisply via CSS),
// so enlarging it for a stream stays sharp. Bumped well above the old 100px.
const QR_RENDER_PX=460;
function renderQRImage(code){
  const url=`${window.location.origin}${window.location.pathname}?code=${code}`;
  const wrap=document.getElementById('qr-code-wrap');wrap.innerHTML='';
  try{new QRCode(wrap,{text:url,width:QR_RENDER_PX,height:QR_RENDER_PX,colorDark:'#1a1a2e',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.M});}
  catch(e){wrap.textContent=code;}
}
function setQRSize(size){
  const panel=document.getElementById('qr-panel');
  panel.classList.remove('qr-md','qr-lg');
  if(size==='m')panel.classList.add('qr-md');
  else if(size==='l')panel.classList.add('qr-lg');
  // v75 — mirror the class onto the wrapper so the Community Voting panel below
  // can match the QR width. Without this it stayed 190px while the QR grew to
  // 240/320px, leaving it visibly narrow inside a wider column.
  const wrap=document.getElementById('share-sticky-wrap');
  if(wrap){wrap.classList.remove('qr-md','qr-lg');if(size==='m')wrap.classList.add('qr-md');else if(size==='l')wrap.classList.add('qr-lg');}
  document.querySelectorAll('.qr-seg-btn').forEach(b=>b.classList.toggle('active',b.dataset.qr===size));
  try{localStorage.setItem('tlf_qr_size',size);}catch(e){}
}
function applyQRShareMask(hidden){
  const input=document.getElementById('qr-share-input');
  if(!input)return;
  const real=input.dataset.url||input.value;
  if(real&&!input.dataset.url)input.dataset.url=real;
  if(hidden){
    input.value='•••••••••••••••••';
    input.readOnly=true;input.style.pointerEvents='none';input.style.filter='blur(4px)';
  }else{
    if(input.dataset.url)input.value=input.dataset.url;
    input.readOnly=true;input.style.pointerEvents='';input.style.filter='';
  }
}
// Styled confirm dialog replacing the browser's confirm().
// Usage: if(!await tlfConfirm({title, message, confirmText, danger})) return;
function tlfConfirm(opts){
  opts=opts||{};
  // v71 — the share drawer (z-index 10073) used to cover the confirm modal, so
  // confirmations triggered from inside it (e.g. Close voting) were invisible
  // and untappable. Close the drawer before showing any confirmation. The modal
  // also now sits at 10090, above every overlay, as a safety net.
  try{
    const dr=document.getElementById('share-drawer');
    if(dr&&dr.classList.contains('show'))closeShareDrawer();
  }catch(e){}
  return new Promise(resolve=>{
    const ov=document.getElementById('tlf-confirm-modal');
    const okBtn=document.getElementById('tlf-confirm-ok');
    const cancelBtn=document.getElementById('tlf-confirm-cancel');
    document.getElementById('tlf-confirm-title').textContent=opts.title||'Are you sure?';
    document.getElementById('tlf-confirm-msg').textContent=opts.message||'';
    okBtn.textContent=opts.confirmText||'Confirm';
    okBtn.className='btn '+(opts.danger?'btn-danger':'btn-primary');
    cancelBtn.textContent=opts.cancelText||'Cancel';
    let done=false;
    const onKey=e=>{
      if(e.key==='Escape'){e.preventDefault();finish(false);}
      else if(e.key==='Enter'){e.preventDefault();finish(true);}
    };
    function finish(v){
      if(done)return;done=true;
      ov.classList.remove('show');
      okBtn.onclick=null;cancelBtn.onclick=null;ov.onclick=null;
      document.removeEventListener('keydown',onKey,true);
      resolve(v);
    }
    okBtn.onclick=()=>finish(true);
    cancelBtn.onclick=()=>finish(false);
    ov.onclick=e=>{if(e.target===ov)finish(false);};
    document.addEventListener('keydown',onKey,true);
    ov.classList.add('show');
    setTimeout(()=>okBtn.focus(),40);
  });
}
// Blur the community results list (stream safety), remembered per browser.
function toggleCommunityBlur(){
  const tl=document.getElementById('creator-community-tierlist');
  const btn=document.getElementById('cc-blur-btn');
  if(!tl||!btn)return;
  const nowBlurred=!tl.classList.contains('blurred');
  tl.classList.toggle('blurred',nowBlurred);
  btn.textContent=nowBlurred?'👁':'🙈';
  try{localStorage.setItem('tlf_cc_blurred',nowBlurred?'1':'0');}catch(e){}
}
function applyCommunityBlurPref(){
  const tl=document.getElementById('creator-community-tierlist');
  const btn=document.getElementById('cc-blur-btn');
  if(!tl||!btn)return;
  // v130 — start VISIBLE (no initial blur); the creator can blur deliberately.
  tl.classList.remove('blurred');
  btn.textContent='🙈';
}
function toggleQRReveal(){
  const wrap=document.getElementById('qr-reveal-wrap');
  const eye=document.getElementById('qr-eye-btn');
  const nowHidden=!wrap.classList.contains('hidden');
  wrap.classList.toggle('hidden',nowHidden);
  eye.classList.toggle('active',!nowHidden);
  eye.textContent=nowHidden?'👁':'🙈';
  applyQRShareMask(nowHidden);
  // v73 — record which list this reveal applies to (or clear it when re-hiding).
  try{
    if(nowHidden)localStorage.removeItem('tlf_qr_revealed_for');
    else if(currentListId)localStorage.setItem('tlf_qr_revealed_for',currentListId);
  }catch(e){}
}
// Collapsible share/voting sidebar: preference persisted per browser.
function toggleSharePanel(){
  const wrap=document.getElementById('share-sticky-wrap');
  const collapsed=wrap.classList.toggle('collapsed');
  document.getElementById('share-collapse-tab').textContent=collapsed?'◀':'▶';
  try{localStorage.setItem('tlf_share_collapsed',collapsed?'1':'0');}catch(e){}
  // v112 (#2) — EXPANDING (arrow toggled ON) slides the section open by width from the
  // right (same as the initial reveal). The panels still carry .show (the .collapsed rule
  // only display:none'd them), so removing .collapsed above restored them; slideInSharePanels
  // animates the width. The arrow (outside #share-panels) stays put. Collapse stays instant.
  if(!collapsed){
    slideInSharePanels();
  }
}
/* v68 — Sharing & Voting drawer (phone-only). Re-parents the existing
   #share-sticky-wrap (QR + voting panels) into the drawer so all existing
   handlers keep working with zero duplication, then returns it to its home
   anchor on close. Community results are a separate node and stay in flow. */
function openShareDrawer(){
  if(!isPhone())return; // desktop keeps the sticky sidebar; never used there
  const wrap=document.getElementById('share-sticky-wrap');
  const body=document.getElementById('share-drawer-body');
  const drawer=document.getElementById('share-drawer');
  const back=document.getElementById('share-drawer-backdrop');
  if(!wrap||!body||!drawer)return;
  if(wrap.parentNode!==body){body.appendChild(wrap);}
  wrap.classList.add('in-drawer');       // opt back into display via the :not() rule
  back.classList.add('show');
  drawer.classList.add('show');drawer.setAttribute('aria-hidden','false');
  lockBodyScroll(); // v70 — page behind must never scroll while the drawer is open
}
function closeShareDrawer(){
  const wrap=document.getElementById('share-sticky-wrap');
  const drawer=document.getElementById('share-drawer');
  const back=document.getElementById('share-drawer-backdrop');
  const wasOpen=drawer&&drawer.classList.contains('show'); // v70
  if(drawer){drawer.classList.remove('show');drawer.setAttribute('aria-hidden','true');}
  if(wasOpen)unlockBodyScroll(); // v70
  if(back)back.classList.remove('show');
  // Return the wrap to its home anchor so DOM order is stable for desktop/resize.
  if(wrap){
    wrap.classList.remove('in-drawer');
    const home=findShareWrapHome();
    if(home&&wrap.previousSibling!==home){home.after(wrap);}
  }
}
// v71 — swipe right to dismiss the share drawer. The drawer enters from the
// right, so a rightward swipe is the natural close gesture. We lock to an axis
// on the first significant move: horizontal follows the finger and closes past
// the threshold; vertical is left alone so the drawer's own scrolling works.
(function initDrawerSwipe(){
  const attach=()=>{
    const drawer=document.getElementById('share-drawer');
    if(!drawer)return;
    let sx=null,sy=null,dx=0,axis=null;
    drawer.addEventListener('touchstart',e=>{
      if(e.touches.length!==1)return;
      sx=e.touches[0].clientX;sy=e.touches[0].clientY;dx=0;axis=null;
      drawer.style.transition='none';
    },{passive:true});
    drawer.addEventListener('touchmove',e=>{
      if(sx===null)return;
      const cx=e.touches[0].clientX,cy=e.touches[0].clientY;
      const ddx=cx-sx,ddy=cy-sy;
      if(axis===null){
        if(Math.abs(ddx)<6&&Math.abs(ddy)<6)return;      // below the noise floor
        axis=Math.abs(ddx)>Math.abs(ddy)?'x':'y';
        if(axis==='y'){drawer.style.transition='';return;} // hand back to scrolling
      }
      if(axis!=='x')return;
      if(e.cancelable)e.preventDefault();                 // stop the drawer scrolling mid-swipe
      dx=Math.max(0,ddx);                                 // rightward only
      drawer.style.transform='translateX('+dx+'px)';
    },{passive:false});
    const end=()=>{
      if(sx===null)return;
      const shouldClose=(axis==='x'&&dx>70);
      // Restore the CSS transition and drop the inline offset before closing,
      // otherwise the offset would persist into the next open.
      drawer.style.transition='';drawer.style.transform='';
      sx=null;sy=null;dx=0;axis=null;
      if(shouldClose)closeShareDrawer();
    };
    drawer.addEventListener('touchend',end);
    drawer.addEventListener('touchcancel',end);
  };
  if(document.readyState!=='loading')attach();else document.addEventListener('DOMContentLoaded',attach);
})();
// Locate the <!--share-wrap-home--> anchor comment node.
function findShareWrapHome(){
  const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null);
  let node;
  while((node=walker.nextNode())){if(node.nodeValue==='share-wrap-home')return node;}
  return null;
}
function applySharePanelPref(){
  let collapsed=false;try{collapsed=localStorage.getItem('tlf_share_collapsed')==='1';}catch(e){}
  const wrap=document.getElementById('share-sticky-wrap');
  const tab=document.getElementById('share-collapse-tab');
  if(!wrap||!tab)return;
  wrap.classList.toggle('collapsed',collapsed);
  tab.textContent=collapsed?'◀':'▶';
}
function applyQRHiddenPref(){
  // v73 — the blur is a "revealing this makes your list publicly viewable"
  // gate, not a cosmetic preference, so it must NOT carry across lists. The old
  // `tlf_qr_hidden` was a single global yes/no: reveal once and every list after
  // it — including brand-new ones — started revealed, so the gate only ever
  // appeared once per browser.
  // We now store WHICH list was revealed. A new or different list is always
  // blurred; reloading the same list keeps it revealed (useful mid-stream).
  let hidden=true;
  try{
    const revealedFor=localStorage.getItem('tlf_qr_revealed_for');
    if(revealedFor&&currentListId&&revealedFor===currentListId)hidden=false;
  }catch(e){}
  const wrap=document.getElementById('qr-reveal-wrap');
  const eye=document.getElementById('qr-eye-btn');
  wrap.classList.toggle('hidden',hidden);
  eye.classList.toggle('active',!hidden);
  eye.textContent=hidden?'👁':'🙈';
  applyQRShareMask(hidden);
}
// v110 (#2) — reveal a share panel (#qr-panel / #voting-panel). The panel is shown at
// its FINAL width immediately (.show; no width animation), and the whole #share-sticky-wrap
// gets a one-shot slide-in-from-right. This replaces the old per-panel width slide, which
// grew each panel from the left and broke its text. Because both panels live in the wrap,
// sliding the wrap moves QR + community together with no reflow. The animation is
// retriggered by removing + reflowing + re-adding the class, so a second panel appearing
// (QR then voting) re-runs the slide as one block rather than animating in isolation.
// v112 (#2) — animate #share-panels' WIDTH from 0 to its natural width (see the CSS note).
// This makes the section grow in from the right and the tier list shrink smoothly, all
// moving together — the same feel as the QR resize, with the initial reveal added. Width
// can't transition to `auto`, so: read the natural width, pin width:0 (no transition),
// reflow, then transition to the pixel target; on transitionend clear the inline width so
// the panel sizes naturally again (and future S/M/L changes animate via .qr-panel's own
// width transition). Re-entrant: a second call (QR then voting panel) restarts from the
// current width to the new natural width.
let _sharePanelsSlideT=0;
function slideInSharePanels(){
  const wrap=document.getElementById('share-sticky-wrap');
  const panels=document.getElementById('share-panels');
  if(!panels||!wrap||wrap.classList.contains('collapsed'))return;
  // v114 (#1) — measure WITHOUT flashing to full width. v113 set width:auto to read the
  // natural width, which momentarily painted the panel full-width (list jumped left), then
  // pinned 0 (list sprang back), then animated (list shrank again) = a rubberband bounce.
  // Instead, pin width:0 with the transition off and read scrollWidth (the content's
  // intrinsic width, reported even while the box is clamped to 0), so the visible element
  // never goes to full width before the animation.
  panels.classList.add('share-sliding');
  panels.style.transition='none';
  panels.style.width='0px';
  void panels.offsetWidth;                    // commit 0 with transition off
  const targetW=Math.round(panels.scrollWidth);
  if(targetW<=0){ // nothing to show yet
    panels.style.width='';panels.style.transition='';panels.classList.remove('share-sliding');
    return;
  }
  panels.style.transition='';                 // hand back to the .share-sliding transition
  requestAnimationFrame(()=>{ panels.style.width=targetW+'px'; }); // animate 0 -> natural width
  const done=(e)=>{
    if(e&&e.propertyName!=='width')return;
    panels.style.width='';          // back to auto so content sizes naturally
    panels.classList.remove('share-sliding');
    panels.removeEventListener('transitionend',done);
    if(_sharePanelsSlideT){clearTimeout(_sharePanelsSlideT);_sharePanelsSlideT=0;}
  };
  panels.addEventListener('transitionend',done);
  // Safety net if transitionend doesn't fire (e.g. width unchanged).
  if(_sharePanelsSlideT)clearTimeout(_sharePanelsSlideT);
  _sharePanelsSlideT=setTimeout(()=>done(),360);
}

function revealShareSlide(el){
  if(!el)return;
  el.classList.add('show');                 // final width right away — no squeeze
  slideInSharePanels();                     // v112 (#2) — width slide from the right
}
// v137 — decide what the share section shows for the current list:
//   no saved list      -> hidden
//   saved + public      -> the QR + share code (showQR)
//   saved + private     -> the "Make list public" button (showPrivateShareState)
function refreshShareSection(){
  if(!currentListId){hideQR();return;}
  if(currentListIsPublic&&currentShareToken){showQR(currentShareToken);}
  else{showPrivateShareState();}
}
// v137 — the private state: the QR box is replaced by a "Make list public" button,
// but the voting panel still shows so the creator can Start Voting + Test vote.
function showPrivateShareState(){
  // v139 — private: hide the QR panel entirely; the publish prompt + button now live
  // at the top of the voting panel (#vote-private-block, toggled in renderVotingState).
  const qp=document.getElementById('qr-panel');if(qp)qp.classList.remove('show');
  const tb=document.getElementById('share-collapse-tab');if(tb)tb.style.display='';
  setShareDrawerEnabled(true);
  applySharePanelPref();
  votingPanelReady=refreshVotingPanel();
}
// v137 — publish: mint a code if the list doesn't have one yet, clear any TEST votes
// (so the public list starts fresh), flip it public, and reveal the QR + community.
async function makeListPublic(){
  if(!currentListId){showFlash('⚠️ Save the list first.');return;}
  const btn=document.querySelector('.qr-makepublic-btn');
  if(btn){btn.disabled=true;btn.textContent='Publishing…';}
  try{
    // A list that has never been public has no code yet — so any session on it is a
    // TEST session. On the FIRST publish, auto-clear it so the public list starts at
    // zero. Re-publishing a previously-public list (it already has a code) keeps its
    // real community votes untouched.
    const firstPublish=!currentShareToken;
    const hadTestSession=firstPublish&&!!currentSession;
    if(hadTestSession){
      try{await manageVoting({action:'delete',listId:currentListId,sessionId:currentSession.id});}catch(e){}
      currentSession=null;voteSession=null;clearCommunityResultsState();voteForceSetup=true;
    }
    if(firstPublish)currentShareToken=await generateUniqueCode();
    const{error}=await sb.from('tier_lists').update({is_public:true,share_token:currentShareToken}).eq('id',currentListId);
    if(error)throw error;
    currentListIsPublic=true;
    showQR(currentShareToken);
    if(hadTestSession)renderVotingState({});   // fresh voting panel (test session was cleared)
    await loadMyLists(true);    // picker now shows the code instead of "Private"
    writeCache();
    showFlash(hadTestSession?'🌐 List is public — test votes cleared.':'🌐 Your list is now public!');
  }catch(e){
    showFlash('⚠️ '+(e.message||'Could not make the list public'));
  }finally{
    if(btn){btn.disabled=false;btn.textContent='🌐 Make list public';}
  }
}
// v137 — reverse of publish: hide from viewers again. Keeps the same share code
// (so re-publishing hands out the same link) and leaves any community votes stored.
async function makeListPrivate(){
  if(!currentListId)return;
  if(!await tlfConfirm({title:'Make this list private?',message:'Viewers will no longer be able to open your list or join community voting.\n\nYour share code is kept, so you can make it public again later with the same link. Any community votes stay stored.',confirmText:'Make private'}))return;
  try{
    // v138 — a private list shouldn't have a live session; close it (votes are kept).
    if(currentSession&&currentSession.status==='open'){
      try{await manageVoting({action:'close',sessionId:currentSession.id});currentSession={...currentSession,status:'closed'};}catch(e){}
    }
    const{error}=await sb.from('tier_lists').update({is_public:false}).eq('id',currentListId);
    if(error)throw error;
    currentListIsPublic=false;
    showPrivateShareState();
    await loadMyLists(true);    // picker now shows "Private"
    writeCache();
    showFlash('🔒 Your list is now private.');
  }catch(e){showFlash('⚠️ '+(e.message||'Could not make the list private'));}
}
// v137 — let the creator trial the voting screen without a share code. The session
// discovery step is the only thing that needs a code; the creator already holds the
// session object (from Start Voting), so we hand it straight to the viewer screen.
let testVoteMode=false;
async function testVote(){
  if(!currentSession){
    await startVoting();          // v138 — start a test session first (works from the setup box)
    if(!currentSession)return;    // start failed (auth/quota) — startVoting already flashed
  }
  testVoteMode=true;
  const row={id:currentListId,title:currentListTitle,data:buildSaveData(),
             share_token:currentShareToken||null,is_public:currentListIsPublic,
             updated_at:new Date().toISOString()};
  const exitBtn=document.getElementById('viewer-testexit-btn');if(exitBtn)exitBtn.classList.add('show');
  showViewer(row,false,currentSession);
  tlfHistPush('testvote'); // v147 — browser Back exits the test vote
}
// v137 — leave the test-vote viewer and return to the editor (which is still mounted
// underneath the overlay). Does NOT go to the "enter a code" home like backToHome().
function exitTestVote(fromPop){
  testVoteMode=false;
  stopViewerPolling();stopViewerRealtime();exitVotingMode();
  voteSession=null;voteResults=null;
  const exitBtn=document.getElementById('viewer-testexit-btn');if(exitBtn)exitBtn.classList.remove('show');
  document.getElementById('viewer-screen').classList.remove('show');
  setAuthFieldsEnabled(true);
  if(!fromPop)tlfHistPopIf('testvote'); // v147
}
function showQR(code){
  const box=document.getElementById('qr-box');if(box)box.style.display='';
  currentQRCode=code;
  renderQRImage(code);
  document.getElementById('qr-stream-code').textContent=code;
  const shareUrl=`${window.location.origin}${window.location.pathname}?code=${code}`;
  const shareInput=document.getElementById('qr-share-input');
  if(shareInput){shareInput.value=shareUrl;shareInput.dataset.url=shareUrl;}
  applyQRHiddenPref(); // set blur state BEFORE showing, so first save isn't briefly unblurred
  const qp=document.getElementById('qr-panel');
  const wasShown=qp.classList.contains('show');
  let saved='s';try{saved=localStorage.getItem('tlf_qr_size')||'s';}catch(e){} // v73 — default S (was M)
  setQRSize(saved);
  if(!wasShown)revealShareSlide(qp); // v99.7 — two-step width slide
  const tb=document.getElementById('share-collapse-tab');if(tb)tb.style.display='';
  setShareDrawerEnabled(true); // v76
  applySharePanelPref();
  votingPanelReady=refreshVotingPanel();
}
async function copyShareLink(){
  const input=document.getElementById('qr-share-input');
  const btn=document.getElementById('qr-copy-btn');
  const realUrl=(input&&(input.dataset.url||input.value))||'';
  if(!realUrl)return;
  try{
    await navigator.clipboard.writeText(realUrl);
  }catch(e){
    // Fallback: temporarily set the real value to select+copy, then restore mask.
    const wasHidden=document.getElementById('qr-reveal-wrap')?.classList.contains('hidden');
    const shown=input.value;input.value=realUrl;input.select();
    try{document.execCommand('copy');}catch(_){}
    input.value=shown;
    if(wasHidden)applyQRShareMask(true);
  }
  btn.classList.add('copied');btn.textContent='✓ Copied';
  setTimeout(()=>{btn.classList.remove('copied');btn.textContent='📋 Copy';},1800);
}
function setShareDrawerEnabled(on){
  const b=document.getElementById('share-drawer-btn');
  if(!b)return;
  b.disabled=!on;
  b.title=on?'':'Save this list first to share it';
}
function hideQR(){setShareDrawerEnabled(false); /* v76 */
  // v110 (#2) — hide instantly (the old .qr-anim-collapsed width-out animation is gone
  // with the per-panel width approach; instant hide is the accepted behaviour). Clear
  // the panel content on hide.
  const qp=document.getElementById('qr-panel');
  if(qp)qp.classList.remove('show');
  document.getElementById('qr-code-wrap').innerHTML='';document.getElementById('qr-stream-code').textContent='—';
  hideVotingPanel();const tb=document.getElementById('share-collapse-tab');if(tb)tb.style.display='none';}

/* ── Community Voting (creator side) ── */
let votePostClose='community';   // what viewers see after close: creator/community/both
let currentSession=null;         // the open session for the current list (or null)
let votePollTimer=null;

async function manageVoting(payload){
  const token=await getAccessToken();
  if(!token)throw new Error('Not signed in');
  const resp=await fetch(`${SUPABASE_URL}/functions/v1/manage-voting`,{
    method:'POST',
    headers:{'Content-Type':'application/json','apikey':SUPABASE_ANON_KEY,'Authorization':'Bearer '+token},
    body:JSON.stringify(payload)
  });
  const j=await resp.json().catch(()=>({}));
  if(!resp.ok)throw new Error(j.error||('Request failed ('+resp.status+')'));
  return j;
}

function setPostClose(v){
  votePostClose=v;
  document.querySelectorAll('#vote-postclose-seg .vote-seg-btn').forEach(b=>b.classList.toggle('active',b.dataset.pc===v));
}

function hideVotingPanel(){
  const p=document.getElementById('voting-panel');if(p)p.classList.remove('show');
  if(votePollTimer){clearInterval(votePollTimer);votePollTimer=null;}
  stopVoteRealtime();
}

// Show the voting panel for a saved list, reflecting any open session.
async function refreshVotingPanel(){
  const panel=document.getElementById('voting-panel');
  if(!panel)return;
  // Voting is only for the creator's own SAVED lists.
  if(!currentUser||!currentListId){hideVotingPanel();hideCreatorCommunity();lastCreatorResults=null;return;}
  voteForceSetup=false;
  // Keep the panel visible and just swap its inner state once we know the
  // session status. We render setup as a neutral default first so nothing
  // flashes, then the status call updates it in place.
  // v99.7 — two-step width slide (display:none -> displayed at width:0 -> animate open)
  const wasVpShown=panel.classList.contains('show');
  if(!wasVpShown)revealShareSlide(panel);
  try{
    const _reqList=currentListId;const r=await manageVoting({action:'status',listId:_reqList});if(currentListId!==_reqList)return; // v154 — ignore a late answer for a list we've left
    currentSession=r.session||null;
    renderVotingState(r);
    // v83.1 — Model A: an Elo list's editor ranking IS the creator's own votes.
    // Load them on open so the list looks exactly as it did (no reset when the
    // creator later presses "Start voting").
    if(currentMode==='elo'&&currentSession&&currentSession.mode==='head2head'){
      // v84.1 — if we were mid-voting on THIS list before a page refresh, restore
      // that state so voting continues instead of dropping back to the Start screen.
      try{if(currentListId&&localStorage.getItem('tlf_ch2h_active_list')===currentListId)ch2hActive=true;}catch(e){}
      ch2hLoadPersonal();
      updateCreatorH2H();   // reflect the restored ch2hActive (show the matchup)
    }
  }catch(e){
    hideVotingPanel();
  }
}

let voteForceSetup=false; // creator clicked "New session" over a closed one

// Show the running session's voting type in the established wording, and warn if
// the community section is now pinned to a different mode than the creator's
// current editor mode. "Pinned" = an open OR closed-but-not-reset session's mode,
// or (when there's no session) the SAVED mode the list is still published in.
// v87 — drift is no longer tied to "session open". It stays on after CLOSE (the
// closed session is still linked to its mode until the creator resets), and it
// also appears when the creator switches editor mode WITHOUT saving (the list
// viewers see is still in the old/saved mode). Only a true reset (no session) +
// being back on the saved mode clears it.
function updateVoteModeLine(){
  const line=document.getElementById('vote-mode-line');
  const warn=document.getElementById('vote-drift-warn');
  const panel=document.getElementById('voting-panel');
  const editorMode=derivedVoteMode(); // the session mode the current editor WOULD start

  // v93 — drift is now reserved for a GENUINELY running (or closed-not-reset)
  // session whose mode differs from the current editor mode. The old pre-start
  // "unsaved mode switch" case was removed: "Start voting" now saves in the current
  // mode and starts in that mode, so a pre-start mode switch is never a mismatch —
  // showing a yellow border there was confusing (the setup text already reflects
  // the current mode). No session -> no drift.
  const pinnedSessionMode=currentSession?currentSession.mode:null;
  const drifted=!!(pinnedSessionMode&&pinnedSessionMode!==editorMode);

  // The mode line only has meaning with a session; keep prior behaviour there.
  if(line&&currentSession){
    // v112 — use the mode-button names so the panel matches the UI the creator knows.
    const wording={placement:'Manual ranking',parameter:'Auto-Rank',head2head:'Elo ranking'};
    line.textContent=wording[pinnedSessionMode]||pinnedSessionMode;
  }

  if(panel)panel.classList.toggle('drifted',drifted); // v84.6 — yellow border cue
  // v114 — the CLOSED-state mode-mismatch note lives here too so it updates on mode switch
  // (this fn runs from applyModeUI), not only on a voting-panel refresh. Past-tense wording.
  {
    const cn=document.getElementById('vote-closed-modenote');
    if(cn){
      if(drifted&&currentSession&&currentSession.status==='closed'){
        const modeName=pinnedSessionMode==='placement'?'Manual ranking':(pinnedSessionMode==='parameter'?'Auto-Rank':'Elo ranking');
        cn.textContent='The Voting ran in '+modeName+' mode. Switch to '+modeName+' to see the community results.';
        cn.style.display='';
      }else{
        cn.style.display='none';
      }
    }
  }
  if(!warn)return;
  if(drifted){
    const listName=currentMode==='auto'?'Auto-Rank':(currentMode==='elo'?'Elo ranking':'Manual ranking'); // v112 — button names
    const sessionModeName=pinnedSessionMode==='placement'?'Manual ranking':(pinnedSessionMode==='parameter'?'Auto-Rank':'Elo ranking');
    const sessionCollecting=pinnedSessionMode==='placement'?'placements'
      :(pinnedSessionMode==='parameter'?'scores':'head-to-head votes');
    warn.style.display='';
    warn.textContent='⚠️ This community vote is running in '+sessionModeName+' mode, but your list is now in '+listName+' mode. The vote keeps collecting '+sessionCollecting+' in '+sessionModeName+' mode until you end it — switching your editor mode doesn\u2019t change it. To run the vote in '+listName+' mode instead, reset the voting and start a new session.';
  }else{
    warn.style.display='none';warn.textContent='';
  }
}

// v112 — decide whether the running/closed session's mode differs from the editor mode,
// and drive the voting panel accordingly. On mismatch: show a single message (using the
// mode-button names) and hide the setup/active/closed blocks. On match: hide the message
// and let the caller render the normal state. Returns true when the mismatch UI is active.
function applyVoteModeMismatch(){
  const note=document.getElementById('vote-modemismatch');
  const setup=document.getElementById('voting-setup');
  const active=document.getElementById('voting-active');
  const closed=document.getElementById('voting-closed');
  const sess=currentSession;
  const sessionEditorMode=sess?(sess.mode==='placement'?'manual':(sess.mode==='parameter'?'auto':(sess.mode==='head2head'?'elo':null))):null;
  const mismatch=!!(sess&&(sess.status==='open'||sess.status==='closed')&&sessionEditorMode&&sessionEditorMode!==currentMode);
  if(mismatch){
    if(note){
      const modeName=sess.mode==='placement'?'Manual ranking':(sess.mode==='parameter'?'Auto-Rank':'Elo ranking');
      // "Community Voting" is already the panel title, so the message just names the mode
      // the vote is running in and how to get back to the results.
      note.textContent='Running in '+modeName+' mode. Switch to '+modeName+' to manage the vote and see the results.';
      note.style.display='';
    }
    if(setup)setup.style.display='none';
    if(active)active.style.display='none';
    if(closed)closed.style.display='none';
    return true;
  }
  if(note)note.style.display='none';
  return false;
}

function renderVotingState(r){
  refreshParameterModeAvailability();
  updateCreatorH2H();   // v82 — session state drives the creator's voting section
  const setup=document.getElementById('voting-setup');
  const active=document.getElementById('voting-active');
  const closed=document.getElementById('voting-closed');
  const sessOpen=currentSession&&currentSession.status==='open';
  const sessClosed=currentSession&&currentSession.status==='closed'&&!voteForceSetup;
  updateViewersSee(); // v140.1 — keep the QR "viewers see" line in sync on start/close/reset
  // v113 — the v112 mode-mismatch TAKEOVER (hiding the whole panel + a solo message) is
  // gone: it trapped the user (a closed mismatched session lost its Reopen/Reset with no
  // way back). The controls now ALWAYS render; the mismatch message sits ABOVE them —
  // the existing drift-warn for the open state, and a dedicated note for the closed state
  // (set in the sessClosed branch below). The row-2 community results list stays hidden on
  // mismatch (handled in renderCreatorCommunity). The old #vote-modemismatch takeover
  // element is left unused/hidden.
  {const mm=document.getElementById('vote-modemismatch');if(mm)mm.style.display='none';}
  // v138 — private/public awareness. While the list is private, voting is a TEST: show
  // the private banner, offer a single "Test vote" button (in setup AND active), and hide
  // the plain "Start Voting" (real voting needs publishing). Publishing flips it back.
  const listPrivate=!currentListIsPublic;
  {const pn=document.getElementById('vote-private-block');if(pn)pn.style.display=listPrivate?'block':'none';}
  {const vp=document.getElementById('voting-panel');if(vp)vp.classList.toggle('private-topgap',listPrivate);} // v140 — clear the collapse arrow when QR panel is hidden
  {const sb2=document.getElementById('vote-start-btn');if(sb2)sb2.style.display=listPrivate?'none':'';}
  {const st=document.getElementById('vote-setup-testvote-btn');if(st)st.style.display=listPrivate?'':'none';}
  {const at=document.getElementById('vote-active-testvote-btn');if(at)at.style.display=listPrivate?'':'none';}
  if(sessOpen){
    setup.style.display='none';active.style.display='block';closed.style.display='none';
    const badge=document.getElementById('vote-active-badge');
    const hidden=!!currentSession.reveal_hidden;
    badge.textContent=listPrivate
      ? (hidden?'🧪 Test voting — results hidden':'🧪 Test voting')
      : (hidden?'● Voting is live — results hidden':'● Voting is live');
    badge.classList.toggle('hidden-mode',hidden);
    updateVoteModeLine();
    const vc=(r&&r.results&&typeof r.results.totalVoters==='number')?r.results.totalVoters:0;
    document.getElementById('vote-voter-count').textContent=vc;
    const rb=document.getElementById('vote-reveal-btn');
    if(hidden){rb.style.display='block';rb.textContent='👁 Reveal results to voters';rb.classList.remove('revealed');}
    else{rb.style.display='none';}
    renderCreatorCommunity(currentSession,r&&r.results);
    startVotePolling();
    startVoteRealtime(currentSession.id); // near-instant updates; poll is the fallback
  }else if(sessClosed){
    setup.style.display='none';active.style.display='none';closed.style.display='block';
    // v87 — a CLOSED session is still linked to its mode until the creator RESETS,
    // so recompute drift (don't blanket-clear). If the editor mode differs from the
    // closed session's mode, the yellow border stays until reset.
    updateVoteModeLine();
    const vc=(r&&r.results&&typeof r.results.totalVoters==='number')?r.results.totalVoters:0;
    document.getElementById('vote-closed-voters').textContent=vc;
    // v114 — the closed-state mode-mismatch note is now set in updateVoteModeLine (which
    // runs on mode switch too, unlike this branch), so it shows immediately when the editor
    // mode drifts from the closed session's mode.
    // Keep showing the community results after close (creator wants the final
    // standings; there just won't be new votes).
    renderCreatorCommunity(currentSession,r&&r.results);
    if(votePollTimer){clearInterval(votePollTimer);votePollTimer=null;}
    stopVoteRealtime();
  }else{
    setup.style.display='block';active.style.display='none';closed.style.display='none';
    // v93 — no session: updateVoteModeLine now clears the drift border (drift is
    // session-only). The setup panel text reflects the current editor mode, and
    // "Start voting" saves in that mode, so a pre-start mode switch isn't a mismatch.
    updateVoteModeLine();
    hideCreatorCommunity();
    if(votePollTimer){clearInterval(votePollTimer);votePollTimer=null;}
    stopVoteRealtime();
  }
}
// v85.1 — single helper so every non-open render path clears the drift cue the
// same way (previously only updateVoteModeLine's open-session path managed it,
// which left the yellow border stuck after reset/close in all modes).
function clearDriftCue(){
  const panel=document.getElementById('voting-panel');if(panel)panel.classList.remove('drifted');
  const warn=document.getElementById('vote-drift-warn');if(warn){warn.style.display='none';warn.textContent='';}
}
// Clear cached community results + any open community detail so a NEW session
// never shows the previous session's numbers.
function clearCommunityResultsState(){
  lastCreatorResults=null;ccSideItemId=null;
  const ccEl=document.getElementById('cc-side');if(ccEl)ccEl.classList.add('cc-hidden'); // v99.0 — width collapse animates the close
  highlightVoteItem('creator-community-tierlist',null);
  const tl=document.getElementById('creator-community-tierlist');if(tl)tl.innerHTML='';
  const meta=document.getElementById('creator-community-meta');if(meta)meta.textContent='';
  hideCreatorCommunity();
}
function backToVotingSetup(){voteForceSetup=true;clearCommunityResultsState();renderVotingState({});}
// Reset voting: DELETES the previous session and its votes, so viewers fall back
// to the creator's plain ranking (as if no voting had happened).
async function resetVotingSession(){
  const hadSession=!!currentSession;
  if(hadSession&&!await tlfConfirm({
    title:'Reset community voting?',
    message:'This only affects COMMUNITY VOTING — your tier list, items and parameters are not touched.\n\nThe previous voting session and all of its community results are permanently deleted. Viewers will see your ranking as if no voting had happened.\n\nThis cannot be undone.',
    confirmText:'Reset voting',danger:true}))return;
  if(hadSession){
    try{await manageVoting({action:'delete',listId:currentListId,sessionId:currentSession.id});}
    catch(e){showFlash('⚠️ '+(e.message||'Could not delete the old session'));return;}
  }
  currentSession=null;voteSession=null;
  clearCommunityResultsState();
  voteForceSetup=true;
  renderVotingState({});
  if(hadSession)showFlash('🔄 Voting reset — previous results deleted');
}

let creatorCommunityHidden=false; // creator's toggle preference
function toggleCreatorCommunity(){
  creatorCommunityHidden=!creatorCommunityHidden;
  const body=document.getElementById('creator-community-body');
  const btn=document.getElementById('creator-community-toggle');
  body.style.display=creatorCommunityHidden?'none':'';
  btn.textContent=creatorCommunityHidden?'▼':'▲'; // v128 — QR-tab style arrow, 90° (up=expanded/collapse, down=collapsed/expand)
  btn.title=creatorCommunityHidden?'Expand':'Collapse';
}

// ── v121 — REVEAL MODE (Stage 1): slot-machine reveal stage ─────────────────
// A fullscreen "compare your ranking vs the community" stage, opened from the
// closed-session community-results bar. Stage 1 builds the whole stage and the
// reel with its real physics (weighted decelerate + springy settle, landing a
// real tier centred under the arrow — landing math verified). The stop TARGET is
// still random in Stage 1; Stage 2 wires the real community placement, the
// right-side payoff stats, the match/mismatch verdict and the building list.
const REEL_CELL=40, REEL_CENTER=3, REEL_LOOPS=6;
let revealData=null;
let revealResults=null;
let revealItemIds=[];       // full reveal set (fixed)
let revealTiers=[];
let reelTiers=[]; // v140 — reel strip tiers = revealTiers + a reel-only "blank" tier for no-vote items
let revealCurrentId=null;
let revealDone=new Set();   // ids revealed (removed from pool, in both lists)
let reelSpinning=false;

function revealShape(scale){
  const shape=(revealData&&revealData.imgShape)||'square';const base=scale||1;
  let w,h,round=false,contain=false;
  if(shape==='portrait'){w=77;h=108;}
  else if(shape==='landscape'){w=108;h=72;}
  else if(shape==='round'){w=72;h=72;round=true;}
  else if(shape==='nocrop'){w=108;h=72;contain=true;}
  else{w=72;h=72;}
  return {w:Math.round(w*base),h:Math.round(h*base),round,contain};
}
function revealCellInto(cell,id,size){
  const it=(revealData.itemData||{})[id]||{};
  cell.style.width=size.w+'px';cell.style.height=size.h+'px';
  if(size.round)cell.style.borderRadius='50%';
  if(it.img){const im=document.createElement('img');im.src=it.img;im.style.objectFit=size.contain?'contain':'cover';im.style.width='100%';im.style.height='100%';cell.appendChild(im);}
  else{
    // v130 — text item: auto-fit the font to the cell so it never overflows.
    const tx=document.createElement('div');tx.className=cell.classList.contains('rbl-cell')?'rbl-text':'rp-text';
    tx.textContent=it.name||id;cell.appendChild(tx);
    fitCellText(tx,size);
  }
}
// v130 — shrink text until it fits within the cell box (both width and height).
function fitCellText(el,size){
  el.style.display='flex';el.style.alignItems='center';el.style.justifyContent='center';
  el.style.width='100%';el.style.height='100%';el.style.overflow='hidden';el.style.textAlign='center';el.style.lineHeight='1.05';
  // start from a size proportional to the cell, then step down if it overflows
  let fs=Math.max(5,Math.min(11,Math.round(size.h/5)));
  el.style.fontSize=fs+'px';
  // measure after insertion (deferred) — clamp with a couple of shrink passes
  requestAnimationFrame(()=>{
    let guard=0;
    while((el.scrollHeight>el.clientHeight||el.scrollWidth>el.clientWidth)&&fs>4&&guard<12){fs-=1;el.style.fontSize=fs+'px';guard++;}
  });
}

// ── mode-aware tier IDs ──
function revealCommunityTierId(id){
  const r=revealResults;const itemRes=r&&r.items&&r.items[id];if(!itemRes)return null;
  if(r.mode==='head2head')return (typeof itemRes.pct==='number')?pctToTierId(itemRes.pct,revealData):null;
  if(r.mode==='parameter')return scoreToTierId(communityAvgScore(itemRes,revealData),revealData);
  if(!Object.keys(itemRes.tierVotes||{}).length)return null;
  return itemRes.winningTierId||null;
}
function revealYourTierId(id){
  const d=revealData;const er=d.eloRanking;
  if(d.currentMode==='elo'&&er&&er[id]&&typeof er[id].pct==='number')return pctToTierId(er[id].pct,d);
  const t=(d.tiers||[]).find(t=>(t.items||[]).includes(id));
  return t?t.id:null;
}
function tierIndexById(tid){return revealTiers.findIndex(t=>t.id===tid);}
// v140 — reel landing index: a real tier's position, or the reel-only blank tier
// (last) when the item has no vote/placement on that side. Keeps no-vote items off S.
function reelIdx(tid){if(!tid)return reelTiers.length-1;const i=reelTiers.findIndex(t=>t.id===tid);return i<0?reelTiers.length-1:i;}

// ── v125 — persist revealed items per list (localStorage, keyed by list id) ──
function revealStorageKey(){ // v153 — per list AND voting session: a new session starts clean
  const sid=(typeof currentSession!=='undefined'&&currentSession&&currentSession.id)?currentSession.id:'nosession';
  return 'tlf_reveal_done_'+(currentListId||'nolist')+'_'+sid;
}
function loadRevealDone(){
  try{const raw=localStorage.getItem(revealStorageKey());if(!raw)return new Set();
    const arr=JSON.parse(raw);return new Set(Array.isArray(arr)?arr:[]);}catch(e){return new Set();}
}
function saveRevealDone(){
  try{localStorage.setItem(revealStorageKey(),JSON.stringify([...revealDone]));}catch(e){}
}

function openRevealStage(){
  // v127 — guard: reveal needs frozen results (session closed).
  if(!currentSession||currentSession.status!=='closed'){
    showFlash('🎰 Reveal mode unlocks after you end voting.');return;
  }
  revealData=buildSaveData();
  revealResults=lastCreatorResults;
  if(!revealResults||!revealResults.items||!Object.keys(revealResults.items).length){
    showFlash('⚠️ No community results to reveal yet.');return;
  }
  revealTiers=(revealData.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  reelTiers=[...revealTiers,{id:'__blank__',label:'—',color:'#3a3a55'}]; // v140 — reel-only blank tier (no-vote items land here, not in the lists)
  const inResults=new Set(Object.keys(revealResults.items));
  const ordered=[];
  (revealData.tiers||[]).forEach(t=>(t.items||[]).forEach(id=>{if(inResults.has(id))ordered.push(id);}));
  (revealData.pool||[]).forEach(id=>{if(inResults.has(id)&&!ordered.includes(id))ordered.push(id);});
  Object.keys(revealResults.items).forEach(id=>{if(!ordered.includes(id))ordered.push(id);});
  revealItemIds=ordered;
  // restore previously-revealed items for THIS list (only ones still in the set)
  const saved=loadRevealDone();
  revealDone=new Set([...saved].filter(id=>inResults.has(id)));
  revealCurrentId=null;
  buildRevealPool();
  buildRevealLists();
  // re-drop the already-revealed items into both tier lists (no animation)
  revealDone.forEach(id=>{
    revealDropInto('you',revealYourTierId(id),id,true);
    revealDropInto('community',revealCommunityTierId(id),id,true);
  });
  resetReel('you');resetReel('community');
  clearRevealDetail();
  setLeverEnabled(false);
  clearSpine();
  // owner-only spin lab button
  {const sb=document.getElementById('reveal-spinlab-btn');if(sb)sb.style.display=siteAllows('spin_lab')?'':'none';} // v154 — site control
  {const snd=document.getElementById('reveal-sound-btn');if(snd)snd.textContent=_revSoundOn?'🔊':'🔇';}
  lockBodyScroll(); // v127 — no phantom page scroll behind the stage
  {const t=document.getElementById('reveal-list-title');if(t)t.textContent=currentListTitle||'Reveal';} // v152
  document.getElementById('reveal-stage').classList.add('show');
  setTimeout(()=>{try{tlfUpdateGlows();}catch(e){}},0); // v152
  // v154 — first not-yet-revealed pool item selected again (top section hides only when nothing is left)
  {const first=revealItemIds.find(id=>!revealDone.has(id));if(first)revealSelect(first);}
}
function closeRevealStage(){
  document.getElementById('reveal-stage').classList.remove('show');
  reelSpinning=false;stopFreeSpin();
  unlockBodyScroll(); // v127
}
// v141 — Presentation mode (Phase 1, creator list). Reuses renderTierListInto for the
// list and renderDetailContent for the detail, plus the existing arrow-nav (setLastNav).
let presentMode=null,presentStyle='facedown',presentHidden=new Set(),presentSelected=null;
let _pSavedViewerData,_pSavedVoteTiers,_pSavedVoteResults;
// v148 — Phase 2 state. _pSnap = the editor arrangement at entry (for Reset);
// _pDragId = presentation item being dragged.
let _pSnap=null,_pDragId=null,_pDragFromList=false;
// v154 — remember hidden/shown per list + presentation (creator/community)
let _pKnown=null;
function presentHiddenKey(){return 'tlf_present_hidden_'+(currentListId||'draft')+'_'+(presentMode||'creator');}
function presentSaveHidden(){
  if(!presentMode||!_pKnown)return;
  try{localStorage.setItem(presentHiddenKey(),JSON.stringify({h:[...presentHidden],k:[..._pKnown]}));}catch(e){}
}
function presentLoadHidden(){
  _pKnown=new Set(presentAllIds());
  try{
    const sv=JSON.parse(localStorage.getItem(presentHiddenKey())||'null');
    if(sv&&Array.isArray(sv.h)){
      const known=new Set(sv.k||[]);
      presentHidden=new Set(sv.h.filter(id=>_pKnown.has(id)));
      // items that didn't exist last time start hidden if anything is still hidden
      if(presentHidden.size)_pKnown.forEach(id=>{if(!known.has(id))presentHidden.add(id);});
    }
  }catch(e){}
}
// v149 — "Hide details" (remembered per browser)
let presentDetailsHidden=false;
let _pfcSeq=0; // v150 — unique gradient ids for card-back copies
let _pRevealingId=null; // v152 — item mid-reveal: keep its (green) Reveal row, don't re-show it
// v151 — POKER DECK card back (admin-only test). Lists with <=52 items: every item
// gets a stable playing card (seeded shuffle per list), shown when hidden face-down.
let presentBack='tlf',_pkMap=null;
const PK_SUITS=['\u2660','\u2665','\u2666','\u2663']; // ♠ ♥ ♦ ♣
const PK_RANKS=['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
function _pkHash(str){let h=2166136261;for(let i=0;i<str.length;i++){h^=str.charCodeAt(i);h=Math.imul(h,16777619);}return h>>>0;}
function _pkRand(a){return function(){a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296;};}
function presentBuildPokerMap(){
  _pkMap=null;
  const idata=(viewerData&&viewerData.itemData)||{};
  const ids=Object.keys(idata).filter(id=>idata[id]&&!idata[id].example).sort();
  if(!ids.length||ids.length>52)return;
  const deck=[];PK_SUITS.forEach((su,si)=>PK_RANKS.forEach(r=>deck.push({r,s:su,red:(si===1||si===2)})));
  const rnd=_pkRand(_pkHash(String(currentListId||currentListTitle||'tlf')));
  for(let i=deck.length-1;i>0;i--){const j=Math.floor(rnd()*(i+1));const t=deck[i];deck[i]=deck[j];deck[j]=t;}
  _pkMap={};ids.forEach((id,i)=>{_pkMap[id]=deck[i];});
}
function presentPokerOn(){return presentBack==='poker'&&!!_pkMap&&presentStyle==='facedown'&&siteAllows('playing_cards');} // v154 — site control
const PK_PIPS={
  '2':[[50,18],[50,82]],
  '3':[[50,18],[50,50],[50,82]],
  '4':[[30,18],[70,18],[30,82],[70,82]],
  '5':[[30,18],[70,18],[50,50],[30,82],[70,82]],
  '6':[[30,18],[70,18],[30,50],[70,50],[30,82],[70,82]],
  '7':[[30,18],[70,18],[50,34],[30,50],[70,50],[30,82],[70,82]],
  '8':[[30,18],[70,18],[50,34],[30,50],[70,50],[50,66],[30,82],[70,82]],
  '9':[[30,18],[70,18],[30,39],[70,39],[50,50],[30,61],[70,61],[30,82],[70,82]],
  '10':[[30,18],[70,18],[50,29],[30,39],[70,39],[30,61],[70,61],[50,71],[30,82],[70,82]]
};
// v152 — solid-colour logo (no gradient ids, so every copy paints)
const PK_LOGO='<svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4 4)"><g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="#a855f7"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="#a855f7"/></g><g stroke="#F5A524" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g><path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="#8b5cf6"/><path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="#8b5cf6"/><rect x="58" y="70" width="40" height="9" rx="3" fill="#E5484D"/><rect x="51" y="83" width="54" height="9" rx="3" fill="#F5A524"/><rect x="44" y="96" width="68" height="9" rx="3" fill="#2F9E62"/></g></svg>';
function presentPokerFace(id,big){
  const c=_pkMap&&_pkMap[id];if(!c)return null;
  const s=c.s+'\uFE0E'; // text-style suit (no emoji rendering)
  const el=document.createElement('div');el.className='p-pk'+(c.red?' pk-red':'')+(big?' pk-big':'');
  ['tr','bl'].forEach(k=>{const l=document.createElement('div');l.className='pk-logo '+k;l.innerHTML=PK_LOGO;el.appendChild(l);}); // v152 — logo in the free corners
  const corner=(cls)=>{const k=document.createElement('div');k.className='pk-corner '+cls;k.innerHTML='<span></span><span></span>';k.children[0].textContent=c.r;k.children[1].textContent=s;return k;};
  el.appendChild(corner('tl'));el.appendChild(corner('br'));
  if(!big){
    const m=document.createElement('div');m.className='pk-center';m.innerHTML='<span class="pk-r"></span><span class="pk-s"></span>';
    m.children[0].textContent=c.r;m.children[1].textContent=s;el.appendChild(m);
  }else if(c.r==='A'){
    const a=document.createElement('div');a.className='pk-ace';a.textContent=s;el.appendChild(a);
  }else if(c.r==='J'||c.r==='Q'||c.r==='K'){
    const f=document.createElement('div');f.className='pk-court';f.innerHTML='<span class="pk-r"></span><span class="pk-s"></span>';
    f.children[0].textContent=c.r;f.children[1].textContent=s;el.appendChild(f);
  }else{
    (PK_PIPS[c.r]||[]).forEach(([x,y])=>{const p=document.createElement('span');p.className='pk-pip'+(y>50?' flip':'');p.style.left=x+'%';p.style.top=y+'%';p.textContent=s;el.appendChild(p);});
  }
  return el;
}
function presentApplyBackToggle(){
  const ok=!!_pkMap;
  {const sec=document.getElementById('p-back-section');if(sec)sec.style.display=siteAllows('playing_cards')?'':'none';} // v154
  const t=document.getElementById('pbk-tlf'),pk=document.getElementById('pbk-poker'),note=document.getElementById('pbk-note');
  if(t)t.classList.toggle('active',!(presentBack==='poker'&&ok));
  if(pk){pk.classList.toggle('active',presentBack==='poker'&&ok);pk.disabled=!ok;}
  if(note)note.style.display=ok?'none':'';
}
function presentSetBack(b){
  presentBack=(b==='poker')?'poker':'tlf';
  try{localStorage.setItem('tlf_present_back',presentBack);}catch(e){}
  presentApplyBackToggle();presentRender();renderPresentDetail();
}
function presentApplyDetails(){
  const st=document.getElementById('present-stage');if(st)st.classList.toggle('p-no-details',presentDetailsHidden);
  const b=document.getElementById('present-details-btn');
  if(b){b.classList.toggle('on',!presentDetailsHidden);b.title=presentDetailsHidden?'Show the detail panel':'Hide the detail panel';} // v151 — switch: on = details shown
}
function presentToggleDetails(){
  presentDetailsHidden=!presentDetailsHidden;
  try{localStorage.setItem('tlf_present_details_hidden',presentDetailsHidden?'1':'0');}catch(e){}
  presentApplyDetails();
  if(!presentDetailsHidden)renderPresentDetail();
}
function presentToggleHideMenu(e){if(e)e.stopPropagation();const m=document.getElementById('present-hide-menu');if(m)m.classList.toggle('show');}
function presentCloseHideMenu(){const m=document.getElementById('present-hide-menu');if(m)m.classList.remove('show');}
document.addEventListener('click',e=>{const m=document.getElementById('present-hide-menu');if(m&&m.classList.contains('show')&&!(e.target.closest&&e.target.closest('.p-hide-split')))m.classList.remove('show');});
function presentCellClick(id){
  presentSelect(id);
  if(presentDetailsHidden&&presentHidden.has(id))presentReveal(id); // no Reveal button: click flips
}
function presentDeselect(){
  presentSelected=null;
  document.querySelectorAll('#present-stage .vt-item.p-selected').forEach(c=>c.classList.remove('p-selected'));
  lastNavRef=null;renderPresentDetail();
}
function presentCenterGlow(){tlfUpdateGlows();} // v150 — generic
// v150 — the purple glow is centred on the VISIBLE logo (icon ink + "Tier List
// Forge", not the icon's empty left margin or the dim ".com"). Desktop only; on a
// phone the logo sits left, so the glow stays at the screen centre.
function tlfGlowFor(target,logo,viewportBased){
  if(!target)return;
  if(typeof isPhone==='function'&&isPhone()){target.style.removeProperty('--p-glow-x');return;}
  if(!logo)return;
  const svg=logo.querySelector('svg'),tt=logo.querySelector('.site-title,.viewer-title');if(!svg||!tt)return;
  const r=svg.getBoundingClientRect();if(!r.width)return; // not on screen
  const tld=tt.querySelector('.tld');
  const left=r.left+r.width*(22/128);                      // icon ink starts at x=22 of 128
  const right=tld?tld.getBoundingClientRect().left:tt.getBoundingClientRect().right;
  const base=viewportBased?0:target.getBoundingClientRect().left;
  target.style.setProperty('--p-glow-x',Math.round((left+right)/2-base)+'px');
}
function tlfUpdateGlows(){
  try{
    tlfGlowFor(document.body,document.querySelector('#app .site-header .logo-link'),true); // body bg is fixed -> viewport coords
    const vs=document.getElementById('viewer-screen');
    if(vs&&vs.classList.contains('show'))tlfGlowFor(vs,vs.querySelector('.viewer-header .logo-link'),false);
    const ps=document.getElementById('present-stage');
    if(ps&&ps.classList.contains('show'))tlfGlowFor(ps,ps.querySelector('.present-brand'),false);
    const rs=document.getElementById('reveal-stage');
    if(rs&&rs.classList.contains('show'))tlfGlowFor(rs,rs.querySelector('.present-brand'),false); // v152
  }catch(e){}
}
function presentIsLive(){return presentMode==='creator'&&currentMode!=='elo';} // creator Manual/Auto: editable
function presentSyncFromEditor(){
  // Re-read placement from the real editor (the source of truth) after any change.
  if(presentMode!=='creator'||!viewerData)return;
  const pd=buildSaveData();
  viewerData.tiers=pd.tiers||[];viewerData.pool=pd.pool||[];viewerData.rowRanges=pd.rowRanges||{};
  voteTiers=(pd.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
}
function presentPoolIds(){
  if(presentMode!=='creator'||currentMode==='elo')return []; // Elo: pool hidden
  return ((viewerData&&viewerData.pool)||[]).filter(id=>viewerData.itemData&&viewerData.itemData[id]&&!viewerData.itemData[id].example);
}
function presentEditorEl(id){const el=document.getElementById(id);return (el&&el.classList.contains('item'))?el:null;}
function presentTakeSnapshot(){
  const tiers={};
  document.querySelectorAll('.tier-items').forEach(z=>{tiers[z.dataset.zone]=[...z.querySelectorAll('.item')].map(e=>e.id);});
  const pool=[...document.querySelectorAll('#item-pool .item')].map(e=>e.id);
  const pv={};Object.keys(itemData||{}).forEach(id=>{pv[id]=JSON.parse(JSON.stringify((itemData[id]&&itemData[id].paramValues)||{}));});
  _pSnap={tiers,pool,pv,dirty:listDirty,changed:false};
}
function presentMarkChanged(){if(_pSnap)_pSnap.changed=true;}
function presentUpdateButtons(){
  const live=presentIsLive();
  const sp=document.getElementById('present-sendpool-btn');
  if(sp){sp.style.display=live?'':'none';sp.disabled=live&&!presentAllPlacedIds().some(id=>!presentPoolIds().includes(id));}
  const rb=document.getElementById('present-reset-btn');if(rb)rb.style.display=live?'':'none'; // v148 — community + Elo: no Reset
}
function presentMarkNav(){
  if(!presentSelected)return;
  const inList=!!document.querySelector('#present-tierlist .vt-item[data-item-id="'+CSS.escape(presentSelected)+'"]');
  setLastNav('vote',inList?'present-tierlist':'present-pool',presentSelected);
}
function presentAfterChange(full){
  presentSyncFromEditor();presentRender();presentMarkNav();presentUpdateButtons();
  if(full)renderPresentDetail();
  else if(presentSelected&&!presentHidden.has(presentSelected))presentAugmentDetail(presentSelected);
}
function presentMoveTo(id,tierId,beforeId){
  const el=presentEditorEl(id);if(!el)return;
  const origParent=el.parentNode,origNext=el.nextElementSibling;
  if(tierId==='pool'){
    const pool=document.getElementById('item-pool');
    if(origParent===pool)return;              // already in the pool
    clearAutoRankScore(id);addToPool(el);   // Auto: loses its ranking (same as the editor)
  }else{
    if(currentMode!=='manual')return;
    const zone=document.querySelector('.tier-items[data-zone="'+CSS.escape(tierId)+'"]');if(!zone)return;
    const before=beforeId?presentEditorEl(beforeId):null;
    if(before&&before!==el&&before.parentNode===zone)zone.insertBefore(el,before);else zone.appendChild(el);
  }
  if(el.parentNode===origParent&&el.nextElementSibling===origNext)return; // dropped in place
  presentMarkChanged();saveState();
  presentAfterChange(true);
}
async function presentSendAllToPool(){
  if(!presentIsLive())return;
  // v149 — "Clear list": items keep their hidden state; Manual keeps slider values.
  const msg=(currentMode==='auto')
    ?'This removes all items from your tier list and resets their scores. This changes your list — use Revert to undo.'
    :'This removes all items from your tier list. This changes your list — use Revert to undo.';
  const ok=await tlfConfirm({title:'Clear list?',message:msg,confirmText:'🧹 Clear list'});
  if(!ok||!presentIsLive())return;
  document.querySelectorAll('.tier-items .item').forEach(el=>{clearAutoRankScore(el.id);addToPool(el);});
  presentMarkChanged();saveState();
  presentAfterChange(true);
  if(!presentSelected)presentSelectFirst();
}
// drag & drop — one stage-level handler decides the target:
//   over a tier row (Manual) -> that tier, before the hovered item
//   anywhere on the tier list otherwise -> nothing
//   anywhere else (pool, detail, empty stage) -> back to the pool
function presentDropTarget(e){
  const t=e.target;if(!t||!t.closest||!_pDragId)return {kind:'none'};
  const row=t.closest('#present-tierlist .vt-row');
  if(row){
    if(currentMode!=='manual')return {kind:'none'};
    const over=t.closest('.vt-item');
    if(over&&over.dataset.itemId===_pDragId)return {kind:'none'}; // over itself: no move
    return {kind:'tier',tierId:row.dataset.tierId,row,before:over||null};
  }
  if(t.closest('#present-tierlist')||t.closest('.present-topbar'))return {kind:'none'};
  if(!_pDragFromList)return {kind:'none'}; // a pool item dropped outside the list stays put
  return {kind:'pool'};
}
function presentClearDropMarks(){
  // v150 — creator system: markDropPoint / clearAllDropPoints + dashed zone highlight
  clearAllDropPoints();
  presentClearZoneMarks();
}
function presentClearZoneMarks(){
  document.querySelectorAll('#present-tierlist .vt-items.drag-over').forEach(x=>x.classList.remove('drag-over'));
  const pw=document.getElementById('present-pool-wrap');if(pw)pw.classList.remove('p-drop-pool');
}
function presentOnDragOver(e){
  if(!_pDragId)return;
  const tg=presentDropTarget(e);
  if(tg.kind==='none'){presentClearDropMarks();return;}
  e.preventDefault();try{e.dataTransfer.dropEffect='move';}catch(_e){}
  if(tg.kind==='tier'){
    presentClearZoneMarks();
    if(tg.before)markDropPoint(tg.before);                       // neighbours make room + insertion line
    else{clearAllDropPoints();const z=tg.row.querySelector('.vt-items');if(z)z.classList.add('drag-over');}
  }else{clearAllDropPoints();presentClearZoneMarks();const pw=document.getElementById('present-pool-wrap');if(pw)pw.classList.add('p-drop-pool');}
}
function presentOnDrop(e){
  if(!_pDragId)return;
  const tg=presentDropTarget(e);const id=_pDragId;
  presentClearDropMarks();
  if(tg.kind==='none')return;
  e.preventDefault();
  presentEndDrag();
  if(tg.kind==='tier')presentMoveTo(id,tg.tierId,tg.before?tg.before.dataset.itemId:null);
  else presentMoveTo(id,'pool',null);
}
function presentEndDrag(){
  _pDragId=null;_pDragFromList=false;presentClearDropMarks();
  const st=document.getElementById('present-stage');if(st)st.classList.remove('p-dragging-list');
  document.querySelectorAll('#present-stage .vt-item.p-dragging').forEach(x=>x.classList.remove('p-dragging'));
}
function presentWireDrag(cell,fromList){
  cell.draggable=true;
  cell.addEventListener('dragstart',e=>{
    _pDragId=cell.dataset.itemId;_pDragFromList=fromList;
    try{e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text/plain',_pDragId);}catch(_e){}
    setTimeout(()=>{cell.classList.add('p-dragging');if(fromList){const st=document.getElementById('present-stage');if(st)st.classList.add('p-dragging-list');}},0);
  });
  cell.addEventListener('dragend',()=>presentEndDrag());
}
function presentOnParamInput(){
  // Auto: the editor's slider handler already stored the value + re-ranked; mirror it.
  if(presentMode!=='creator')return;
  presentMarkChanged();
  presentAfterChange(false);
}
function presentResetToSnapshot(){
  if(!_pSnap||!_pSnap.changed)return;
  Object.keys(_pSnap.pv).forEach(id=>{if(itemData[id])itemData[id].paramValues=JSON.parse(JSON.stringify(_pSnap.pv[id]));});
  Object.keys(_pSnap.tiers).forEach(zid=>{
    const zone=document.querySelector('.tier-items[data-zone="'+CSS.escape(zid)+'"]');if(!zone)return;
    _pSnap.tiers[zid].forEach(id=>{const el=presentEditorEl(id);if(el)zone.appendChild(el);});
  });
  const pool=document.getElementById('item-pool');
  if(pool)_pSnap.pool.forEach(id=>{const el=presentEditorEl(id);if(el)pool.appendChild(el);});
  Object.keys(_pSnap.pv).forEach(id=>{try{refreshDot(id);}catch(_e){}});
  writeCache();
  listDirty=_pSnap.dirty;updateListBanner(); // back to exactly the entry state
  _pSnap.changed=false;
}
function presentApplyStyleToggle(){
  const b=document.getElementById('pst-blur'),f=document.getElementById('pst-facedown');
  if(b)b.classList.toggle('active',presentStyle==='blur');
  if(f)f.classList.toggle('active',presentStyle==='facedown');
}
function presentSetStyle(style){
  presentStyle=(style==='blur')?'blur':'facedown';
  try{localStorage.setItem('tlf_present_style',presentStyle);}catch(e){}
  presentApplyStyleToggle();
  const el=document.getElementById('present-tierlist');if(el)el.className='present-tierlist style-'+presentStyle;
  const pl=document.getElementById('present-pool');if(pl)pl.className='present-pool style-'+presentStyle; // v148
  if(presentMode){presentRender();renderPresentDetail();} // v151 — poker faces depend on the style
}
function presentPlacement(){
  if(presentMode==='community'){const cp=communityPlacement()||{};const pl={};(voteTiers||[]).forEach(t=>pl[t.id]=(cp[t.id]||[]).slice());return pl;}
  const pl={};(voteTiers||[]).forEach(t=>pl[t.id]=[]);
  ((viewerData&&viewerData.tiers)||[]).forEach(t=>{pl[t.id]=(t.items||[]).slice();});
  return pl;
}
function presentAllPlacedIds(){const pl=presentPlacement();const ids=[];Object.keys(pl).forEach(k=>pl[k].forEach(id=>ids.push(id)));return ids;}
function presentAllIds(){return presentAllPlacedIds().concat(presentPoolIds());} // v148 — list + pool
function presentRender(){
  // v154 — items that appear while presenting (e.g. live community votes) start
  // hidden whenever anything else is still hidden (no spoilers); then remember.
  if(_pKnown){presentAllIds().forEach(id=>{if(!_pKnown.has(id)){if(presentHidden.size)presentHidden.add(id);_pKnown.add(id);}});}
  const el=document.getElementById('present-tierlist');
  el.className='present-tierlist style-'+presentStyle;
  el.dataset.pCreator=(presentMode==='creator')?'1':''; // v149 — see renderTierListInto
  renderTierListInto(el,presentPlacement(),1,(id)=>presentCellClick(id));
  const live=presentIsLive();
  el.querySelectorAll('.vt-row').forEach((row,i)=>{if(voteTiers[i])row.dataset.tierId=voteTiers[i].id;}); // v148 — rows render in voteTiers order
  el.querySelectorAll('.vt-item').forEach(c=>{
    const id=c.dataset.itemId;
    if(presentHidden.has(id)){c.classList.add('p-hidden');
      if(presentPokerOn()){const f=presentPokerFace(id,false);if(f){c.classList.add('p-poker');c.appendChild(f);}}} // v151
    if(id===presentSelected)c.classList.add('p-selected');
    if(live)presentWireDrag(c,true); // v148 — list items can be moved / dragged back to the pool
  });
  // v143 — item pool (unplaced items). v148 — can be face-down; hidden when empty.
  const poolWrap=document.getElementById('present-pool-wrap');
  const pool=document.getElementById('present-pool');
  const poolIds=presentPoolIds();
  if(pool){
    pool.className='present-pool style-'+presentStyle;
    pool.innerHTML='';
    poolIds.forEach(id=>{
      const cell=voteItemCell(id,'vt-item vote-pool-item',1,()=>presentCellClick(id));
      if(presentHidden.has(id)){cell.classList.add('p-hidden');
        if(presentPokerOn()){const f=presentPokerFace(id,false);if(f){cell.classList.add('p-poker');cell.appendChild(f);}}} // v151
      if(id===presentSelected)cell.classList.add('p-selected');
      if(live&&currentMode==='manual')presentWireDrag(cell,false); // Auto: placed by sliders
      pool.appendChild(cell);
    });
  }
  if(poolWrap){poolWrap.style.display=poolIds.length?'':'none';poolWrap.classList.toggle('is-empty',!poolIds.length);}
  presentSaveHidden(); // v154
}
function presentTierLabelOf(id,pl){for(const tid in pl){if((pl[tid]||[]).indexOf(id)>=0){const t=(voteTiers||[]).find(x=>x.id===tid);return t?t.label:null;}}return null;}
// v146 — ranking section INSIDE the blue panel (reuses #pdetail-votes-section, the
// same place the viewer renderer draws it). The viewer renderer's own version read
// on-screen viewer rows (not present here) and showed "—", so we rebuild it with real
// values via the shared helpers the creator-view community panel uses.
//   creator presentation  : Your ranking only
//   community presentation: Community votes (not Elo) + Community ranking + Your ranking
function presentFillRankings(id){
  const vs=document.getElementById('pdetail-votes-section');if(!vs)return;
  const bd=document.getElementById('pdetail-breakdown');
  const vt=document.getElementById('pdetail-votes-title');
  const plTitle=document.getElementById('pdetail-placement-title');
  const plWrap=document.getElementById('pdetail-placement');
  bd.innerHTML='';plWrap.innerHTML='';if(plTitle)plTitle.style.display='none';
  const d=viewerData||{};
  const blocks=[];
  let tally=false;
  if(presentMode==='community'){
    const res=voteResults;
    const isElo=!!(res&&res.mode==='head2head');
    if(!isElo){
      tally=true;
      const cRows=detailCommunityRows(id,d,res);
      if(cRows&&cRows.length)cRows.forEach(r=>bd.appendChild(vdRow(r.color,r.label,r.value)));
      else bd.innerHTML='<div class="vd-row" style="color:#888">No votes yet</div>';
    }
    blocks.push({label:'Community ranking',info:detailPlacementInfo(id,d,res)});
  }
  // v149 — creator: "Ranking"; community: "Creator ranking" (only when there is one)
  {const ci=creatorTierInfo(id,d);
   if(presentMode==='community'){if(ci)blocks.push({label:'Creator ranking',info:ci});}
   else blocks.push({label:'Ranking',info:ci});}
  if(vt){vt.style.display=tally?'':'none';vt.textContent='Community votes';}
  blocks.forEach((b,i)=>{
    const h=document.createElement('div');h.className='detail-params-title';
    if(tally||i>0)h.style.marginTop='10px';h.textContent=b.label;
    plWrap.appendChild(h);
    plWrap.appendChild(vdRow(b.info?b.info.color:null,b.info?b.info.label:'—',''));
  });
  vs.style.display='';
}
function presentAugmentDetail(id){
  // v145 — show the authored slider score like the creator view (the viewer renderer
  // suppresses it on manual/elo lists).
  // v146 — untouched sliders count as 1 (like calcScore); and don't overwrite the
  // score box when it already shows an Elo standing or a community-parameter average.
  const d=viewerData||{};const it=(d.itemData||{})[id]||{};const pv=it.paramValues||{};
  const sliders=(d.params||[]).filter(p=>p.type==='slider');
  const rs=(presentMode==='community')?voteResults:creatorRankingSource();
  const keepRendered=!!(rs&&(rs.mode==='head2head'||rs.mode==='parameter'));
  const disp=document.getElementById('pdetail-score-display');
  if(disp&&!keepRendered){
    if(sliders.length){
      let score=0;sliders.forEach(p=>{const v=parseFloat(pv[p.id]||0);if(!isNaN(v))score+=Math.min(10,Math.max(1,v));});
      const max=sliders.length*10;const pct=max>0?Math.round(score/max*100):0;
      document.getElementById('pdetail-score-main').textContent=score+' / '+max+' pts';
      document.getElementById('pdetail-score-pct').textContent=pct+'% of maximum score';
      const fill=document.getElementById('pdetail-score-fill');if(fill)fill.style.width=pct+'%';
      const bl=document.getElementById('pdetail-score-bar-label');if(bl)bl.textContent='';
      const bv=document.getElementById('pdetail-score-bar-val');if(bv)bv.textContent='';
      disp.classList.add('show');
    }else{disp.classList.remove('show');}
  }
  presentFillRankings(id);
}
function renderPresentDetail(){
  const empty=document.getElementById('present-detail-empty');
  const fd=document.getElementById('present-facedown-wrap');
  const info=document.getElementById('pdetail');
  const row=document.getElementById('present-reveal-row'),body=document.getElementById('pdetail-body'),img=document.getElementById('pdetail-img');
  if(fd)fd.style.display='none'; // v149 — only a template now; face-down renders inside the panel
  if(!presentSelected){empty.style.display='';info.style.display='none';return;}
  empty.style.display='none';
  if(presentHidden.has(presentSelected)){
    // v149 — same panel frame; the card back takes the image slot at the image's size
    info.style.display='';
    img.className='detail-img-wrap p-cb';img.innerHTML='';img.onclick=null; // v150 — never enlarge a hidden item
    const tpl=document.getElementById('present-facedown-card');
    const pkf=presentPokerOn()?presentPokerFace(presentSelected,true):null; // v151
    if(pkf){img.appendChild(pkf);}
    else if(tpl){const cb=tpl.cloneNode(true);cb.removeAttribute('id');cb.className='present-facedown-card p-cardback';
      // v150 — the template sits in a hidden element; gradients referenced there don't
      // paint (the anvil + hammer vanished). Give this copy its own gradient id.
      const gid='tlfg-pfc-'+(++_pfcSeq);cb.innerHTML=cb.innerHTML.replace(/tlfg-pfc/g,gid);
      img.appendChild(cb);}
    {const rb=document.getElementById('present-reveal-btn');if(rb){rb.classList.remove('p-rv-ok');rb.textContent='👁 Reveal';}}
    row.classList.remove('p-rv-collapse');row.style.display='';body.style.display='none';
  }
  else{
    if(_pRevealingId!==presentSelected)row.style.display='none'; // v152 — mid-reveal the row stays put
    body.style.display='';img.className='detail-img-wrap';
    renderDetailContent('pdetail',presentSelected,presentMode==='community'?voteResults:creatorRankingSource());presentAugmentDetail(presentSelected);
    // v148 — Auto-rank: the real (editable) sliders, same controls as the creator view.
    if(presentMode==='creator'&&currentMode==='auto'){
      const box=document.getElementById('pdetail-params'),sec=document.getElementById('pdetail-params-section');
      if(box&&sec){renderDetailParams(presentSelected,box);sec.style.display='';}
    }
  }
}
function presentSelect(id){
  if(_pRevealingId&&_pRevealingId!==id)_pRevealingId=null; // v152
  presentSelected=id;
  document.querySelectorAll('#present-stage .vt-item.p-selected').forEach(c=>c.classList.remove('p-selected'));
  let cell=document.querySelector('#present-tierlist .vt-item[data-item-id="'+CSS.escape(id)+'"]');
  let cont='present-tierlist';
  if(!cell){cell=document.querySelector('#present-pool .vt-item[data-item-id="'+CSS.escape(id)+'"]');cont='present-pool';}
  if(cell)cell.classList.add('p-selected');
  setLastNav('vote',cont,id); // reuse arrow-nav (list or pool)
  renderPresentDetail();
}
function presentSelectFirst(){
  const first=document.querySelector('#present-tierlist .vt-item')||document.querySelector('#present-pool .vt-item'); // v148 — pool too
  if(first)presentSelect(first.dataset.itemId);else{presentSelected=null;renderPresentDetail();}
}
function presentRevealSelected(){if(presentSelected)presentReveal(presentSelected);}
function presentSlideOpen(el,delay,startH){
  // v149 — details slide down under the image instead of popping in.
  // v151 — startH: begin at the height the Reveal button used, so the panel never shrinks first.
  if(!el)return;
  el.style.transition='none';el.style.overflow='hidden';el.style.maxHeight=(startH||0)+'px';el.style.opacity='0';
  setTimeout(()=>{
    const h=el.scrollHeight;
    el.style.transition='max-height .38s ease, opacity .32s ease';
    el.style.maxHeight=h+'px';el.style.opacity='1';
    setTimeout(()=>{el.style.transition='';el.style.overflow='';el.style.maxHeight='';el.style.opacity='';},430);
  },delay);
}
function presentReveal(id){
  if(!presentHidden.has(id))return;
  presentHidden.delete(id);presentSaveHidden(); // v154
  const _detailOn=(presentSelected===id)&&!presentDetailsHidden; // v149
  if(_detailOn)_pRevealingId=id; // v152
  if(_detailOn){const rb=document.getElementById('present-reveal-btn');if(rb)rb.classList.add('p-rv-ok');const im=document.getElementById('pdetail-img');if(im)im.classList.add('p-img-flip-out');} // v150 — green ✓, button stays
  const cell=document.querySelector('#present-tierlist .vt-item[data-item-id="'+CSS.escape(id)+'"]')||document.querySelector('#present-pool .vt-item[data-item-id="'+CSS.escape(id)+'"]'); // v148 — pool cards flip too
  if(cell)cell.classList.add('p-flip-out');
  setTimeout(()=>{
    if(cell){cell.classList.remove('p-hidden','p-flip-out');cell.classList.add('p-flip-in');setTimeout(()=>cell.classList.remove('p-flip-in'),210);}
    if(presentSelected===id){
      renderPresentDetail();
      if(_detailOn){
        // v149/v150 — image flips in; the (green) Reveal button stays until the flip
        // is done, collapses, then the details slide open underneath.
        const im=document.getElementById('pdetail-img');
        if(im){im.classList.add('p-img-flip-in');setTimeout(()=>im.classList.remove('p-img-flip-in'),220);}
        // v152 — the row was never hidden, so the ✓ animation plays exactly once.
        const row=document.getElementById('present-reveal-row'),body=document.getElementById('pdetail-body');
        const rb=document.getElementById('present-reveal-btn');
        if(body){body.style.transition='none';body.style.overflow='hidden';body.style.maxHeight='0px';body.style.opacity='0';}
        setTimeout(()=>{
          _pRevealingId=null;
          if(presentSelected!==id)return;
          const rh=row?row.offsetHeight:0;
          if(row)row.style.display='none';            // just disappears
          if(rb)rb.classList.remove('p-rv-ok');
          presentSlideOpen(body,0,rh); // v151 — start where the button was (no bounce)
        },380);
      }
    }
  },180);
}
function presentHideAll(){presentHidden=new Set(presentAllIds());presentRender();renderPresentDetail();} // v148 — pool too
function presentRevealAll(){presentHidden=new Set();presentRender();renderPresentDetail();}
function presentReset(){
  // v148 — back to the arrangement the creator view had when Presentation opened.
  presentResetToSnapshot();
  presentSyncFromEditor();
  presentHidden=new Set();presentSelected=null;presentRender();presentUpdateButtons();presentSelectFirst();
}
function presentKeydown(e){
  if(!document.getElementById('present-stage').classList.contains('show'))return;
  if(e.key==='Escape'){const m=document.getElementById('present-hide-menu');if(m&&m.classList.contains('show')){e.preventDefault();m.classList.remove('show');return;}} // v150
  if(document.querySelector('#tlf-confirm-modal.show'))return; // v148 — the confirm popup owns Esc/Enter
  if(e.key==='Escape'){e.preventDefault();closePresentStage();return;}
  if(e.key===' '||e.key==='Enter'){
    const t=e.target;if(t&&(t.tagName==='INPUT'||t.tagName==='TEXTAREA'||t.tagName==='SELECT'))return;
    e.preventDefault();presentRevealSelected();
  }
  // arrow keys: handled by the global nav handler (lastNavRef points at present-tierlist)
}
function openPresentStage(which){
  which=which||'creator';
  // v147 — anon users may present the CREATOR list (no server involved).
  if(!currentUser&&(which!=='creator'||!anonMode)){showFlash('⚠️ Sign in to present.');return;}
  presentMode=which;presentHidden=new Set();presentSelected=null;
  try{if(document.activeElement&&document.activeElement.blur)document.activeElement.blur();}catch(e){} // v148 — no focus ring on the Present button after Esc
  _pSnap=null;_pDragId=null;_pDragFromList=false;
  if(which==='creator'&&currentMode!=='elo')presentTakeSnapshot(); // v148 — for Reset
  try{presentStyle=localStorage.getItem('tlf_present_style')||'facedown';}catch(e){presentStyle='facedown';}
  // repoint the shared render globals to this list's data (restored on close).
  _pSavedViewerData=viewerData;_pSavedVoteTiers=voteTiers;_pSavedVoteResults=voteResults;
  const pd=buildSaveData();
  // v147 — use the in-memory itemData (not buildSaveData's server-cleaned copy, which
  // blanks browser-local anon images). Presentation reads only from the browser.
  viewerData={itemData:itemData||pd.itemData||{},params:pd.params||[],imgShape:pd.imgShape,pool:pd.pool||[],tiers:pd.tiers||[],rowRanges:pd.rowRanges||{},currentMode:pd.currentMode,eloRanking:(typeof creatorEloRanking!=='undefined'?creatorEloRanking:null)};
  voteTiers=(pd.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  voteResults=(which==='community')?lastCreatorResults:null;
  presentLoadHidden(); // v154 — restore hidden/shown from last time
  document.getElementById('present-title-txt').textContent=(currentListTitle||'Presentation');
  presentUpdateButtons(); // v148 — Send all / Reset only for creator Manual/Auto
  try{presentDetailsHidden=localStorage.getItem('tlf_present_details_hidden')==='1';}catch(e){presentDetailsHidden=false;}
  presentApplyDetails(); // v149
  try{presentBack=localStorage.getItem('tlf_present_back')==='poker'?'poker':'tlf';}catch(e){presentBack='tlf';}
  presentBuildPokerMap();presentApplyBackToggle(); // v151
  document.getElementById('present-stage').classList.add('show');
  if(typeof lockBodyScroll==='function')lockBodyScroll();
  presentApplyStyleToggle();
  presentRender();
  presentSelectFirst();
  document.addEventListener('keydown',presentKeydown,true);
  {const st=document.getElementById('present-stage');if(st)st.scrollTop=0;}
  presentCenterGlow(); // v149
  tlfHistPush('present'); // v147 — browser Back closes the presentation
}
function closePresentStage(fromPop){
  document.getElementById('present-stage').classList.remove('show');
  document.removeEventListener('keydown',presentKeydown,true);
  viewerData=_pSavedViewerData;voteTiers=_pSavedVoteTiers;voteResults=_pSavedVoteResults;
  _pSavedViewerData=_pSavedVoteTiers=_pSavedVoteResults=undefined;
  const _changed=!!(_pSnap&&_pSnap.changed);
  presentMode=null;presentSelected=null;presentHidden=new Set();
  presentSaveHidden();_pKnown=null; // v154
  presentEndDrag();_pSnap=null;presentCloseHideMenu();
  {const b=document.getElementById('pdetail-params');if(b)b.innerHTML='';}
  lastNavRef=null;
  // v148 — refresh the editor's detail panel if presentation changed things
  if(_changed&&selectedItemId&&document.getElementById(selectedItemId)){try{selectItem(selectedItemId);}catch(e){}}
  if(typeof unlockBodyScroll==='function')unlockBodyScroll();
  if(!fromPop)tlfHistPopIf('present'); // v147 — closed via ✕/Esc: drop our history step
}

// pool holds ONLY not-yet-revealed items (rolled items disappear)
function buildRevealPool(){
  const pool=document.getElementById('reveal-pool');
  const tools=pool.querySelector('.reveal-pool-tools');
  pool.querySelectorAll('.reveal-pool-item,.reveal-pool-empty').forEach(n=>n.remove());
  const remaining=revealItemIds.filter(id=>!revealDone.has(id));
  const size=revealShape(0.85);
  const frag=document.createDocumentFragment();
  if(!remaining.length){
    const e=document.createElement('div');e.className='reveal-pool-empty';e.textContent='All items revealed 🎉';frag.appendChild(e);
  }
  remaining.forEach(id=>{
    const cell=document.createElement('div');
    cell.className='reveal-pool-item'+(id===revealCurrentId?' active':'');
    cell.dataset.itemId=id;
    revealCellInto(cell,id,size);
    cell.onclick=()=>revealSelect(id);
    frag.appendChild(cell);
  });
  pool.insertBefore(frag,tools);
}

function buildRevealLists(){
  ['you','community'].forEach(side=>{
    const host=document.getElementById('reveal-buildlist-'+side);
    host.innerHTML='';
    revealTiers.forEach(t=>{
      const row=document.createElement('div');row.className='rbl-row';row.dataset.tierId=t.id;
      const lbl=document.createElement('div');lbl.className='rbl-label';lbl.style.background=t.color||'#6b7280';lbl.textContent=t.label||'—';
      const its=document.createElement('div');its.className='rbl-items';its.dataset.side=side;its.dataset.tierId=t.id;
      row.appendChild(lbl);row.appendChild(its);host.appendChild(row);
    });
  });
}
function revealDropInto(side,tierId,id,noAnim){
  if(!tierId)return;
  const host=document.getElementById('reveal-buildlist-'+side);
  const slot=host.querySelector('.rbl-items[data-tier-id="'+CSS.escape(tierId)+'"]');
  if(!slot)return;
  if(slot.querySelector('[data-item-id="'+CSS.escape(id)+'"]'))return;
  const size=revealShape(0.9); // v134 — 0.9 (was 1.0)
  const cell=document.createElement('div');cell.className='rbl-cell'+(noAnim?'':' dropped');cell.dataset.itemId=id;
  revealCellInto(cell,id,size);
  cell.onclick=()=>revealSelect(id); // click a placed item to re-show details
  slot.appendChild(cell);
  if(!noAnim){setTimeout(()=>cell.classList.remove('dropped'),460);sndPlace();}
}

// details: your stats (left) · centred image · community stats (right).
function clearRevealDetail(){
  document.getElementById('reveal-detail-empty').style.display='';
  document.getElementById('reveal-detail-inner').style.display='none';
  {const d=document.getElementById('reveal-detail');if(d)d.classList.add('is-empty');} // v153
}
// `revealed` gates BOTH tiers (your + community) and the auto-rank community
// sliders — off pre-roll (nothing spoiled), on once this item's reel has landed.
function renderRevealDetail(id,revealed){
  const it=(revealData.itemData||{})[id]||{};
  document.getElementById('reveal-detail-empty').style.display='none';
  document.getElementById('reveal-detail-inner').style.display='';
  {const d=document.getElementById('reveal-detail');if(d)d.classList.remove('is-empty');} // v153
  // centred image (bigger; enhanceable). Text items: show the text inside the box.
  const imgWrap=document.getElementById('reveal-hero-img');imgWrap.innerHTML='';
  const hs=revealShape(2.2);
  imgWrap.style.width=hs.w+'px';imgWrap.style.height=hs.h+'px';imgWrap.style.borderRadius=hs.round?'50%':'12px';
  if(it.img){
    const im=document.createElement('img');im.src=it.img;im.style.objectFit=hs.contain?'contain':'cover';imgWrap.appendChild(im);
    imgWrap.style.cursor='zoom-in';imgWrap.onclick=()=>openSheetImg(it.img,hs.round,hs.contain);
  }else{ // v150 — text items enlarge too (shaped)
    const _t=it.name||id,_s=(revealData&&revealData.imgShape)||'square';
    imgWrap.style.cursor='zoom-in';imgWrap.onclick=()=>openSheetText(_t,_s);
    const tx=document.createElement('div');tx.className='detail-text-item';tx.textContent=_t;imgWrap.appendChild(tx);}
  // Name under the image: shown for IMAGE items that HAVE a name. When absent we
  // keep the element's HEIGHT reserved (visibility:hidden) so the layout below —
  // the tier lists — never jumps up for an unnamed item. v130.
  const nameEl=document.getElementById('reveal-detail-name');
  const nm=(it.name||'').trim();
  nameEl.style.display='';
  if(it.img&&nm){nameEl.textContent=nm;nameEl.style.visibility='';}
  else{nameEl.textContent='\u00a0';nameEl.style.visibility='hidden';}
  renderRevealYouStats(id,revealed);
  renderRevealCommunityStats(id,revealed);
}

// v127 — slider total for the reveal panel, shown REGARDLESS of list mode (unlike
// detailScoreInfo, which suppresses it on manual lists). Sums the given slider
// values → "S / MAX pts • N%". `useCommunity` reads the community averages.
function revealSliderScore(id,useCommunity){
  const sliders=(revealData.params||[]).filter(p=>p&&p.type==='slider');
  if(!sliders.length)return null;
  const it=(revealData.itemData||{})[id]||{};
  const pv=it.paramValues||{};
  const cRes=revealResults&&revealResults.items&&revealResults.items[id];
  const cAvg=(cRes&&cRes.avgValues)||{};
  let sum=0;
  sliders.forEach(p=>{
    const raw=useCommunity?parseFloat(cAvg[p.id]):parseFloat(pv[p.id]);
    if(!isNaN(raw))sum+=raw;
  });
  const max=sliders.length*10;
  const pct=max>0?Math.round(sum/max*100):0;
  const disp=useCommunity?sum.toFixed(1):(Number.isInteger(sum)?sum:sum.toFixed(1));
  return {show:true,main:disp+' / '+max+' pts',sub:pct+'% of maximum',pct};
}
// helper: combined "X / Y pts • N% of maximum" score block (slider lists).
function revealScoreBlock(host,si){
  if(!si||!si.show)return;
  const box=document.createElement('div');box.className='reveal-score';
  const m=document.createElement('div');m.className='rs-main';m.textContent=si.main;box.appendChild(m);
  const s=document.createElement('div');s.className='rs-sub';s.textContent=si.sub;box.appendChild(s);
  const bar=document.createElement('div');bar.className='rs-bar';const f=document.createElement('div');f.className='rs-fill';f.style.width=Math.max(0,Math.min(100,si.pct||0))+'%';bar.appendChild(f);box.appendChild(bar);
  host.appendChild(box);
}

// YOUR side — tier hidden until reveal; your score + params always shown.
function renderRevealYouStats(id,revealed){
  const host=document.getElementById('reveal-you-stats');host.innerHTML='';
  const it=(revealData.itemData||{})[id]||{};
  const pv=it.paramValues||{};
  const tid=revealYourTierId(id);const t=revealTiers.find(x=>x.id===tid);
  // tier row (locked pre-reveal)
  if(revealed&&t)host.appendChild(vdRow(t.color,t.label,''));
  else host.appendChild(lockedRow());
  // your combined score (authored slider values) — not a spoiler
  revealScoreBlock(host,revealSliderScore(id,false));
  // parameters
  const params=revealData.params||[];
  if(params.length){
    addTitle(host,'Parameters');
    params.forEach(p=>host.appendChild(vdRow(null,paramLabel(p),paramDisplayVal(p,pv[p.id]))));
  }
}

// COMMUNITY side — everything hidden until reveal; then tier + score + breakdown.
function renderRevealCommunityStats(id,revealed){
  const host=document.getElementById('reveal-community-stats');host.innerHTML='';
  if(!revealed){host.appendChild(lockedRow());
    const e=document.createElement('div');e.className='reveal-vdetail-locked';e.textContent='Pull the lever to reveal';host.appendChild(e);return;}
  const tid=revealCommunityTierId(id);const t=revealTiers.find(x=>x.id===tid);
  if(t)host.appendChild(vdRow(t.color,t.label,''));
  // community combined score — ONLY meaningful when the community ranks by sliders
  // (parameter/auto mode). In manual (placement) mode the community can't set
  // sliders, so the score is hidden.
  if(revealResults.mode==='parameter')revealScoreBlock(host,revealSliderScore(id,true));
  const rows=detailCommunityRows(id,revealData,revealResults)||[];
  if(rows.length){
    addTitle(host, revealResults.mode==='parameter'?'Community averages':(revealResults.mode==='head2head'?'Standing':'Community votes'));
    rows.forEach(r=>host.appendChild(vdRow(r.color||null,r.label,r.value)));
  }
  if(!rows.length&&!t){const e=document.createElement('div');e.className='reveal-vdetail-locked';e.textContent='No community data.';host.appendChild(e);}
}
function addTitle(host,txt){const d=document.createElement('div');d.className='vdetail-section-title';d.textContent=txt;host.appendChild(d);}
function lockedRow(){const d=document.createElement('div');d.className='vd-row';const l=document.createElement('span');l.className='vd-tier-name';l.style.color='#777';l.style.fontStyle='italic';l.textContent='🔒 hidden until reveal';d.appendChild(l);return d;}

function revealSelect(id){
  if(reelSpinning)return;
  revealCurrentId=id;
  buildRevealPool();
  highlightRevealAcrossLists(id); // v130 — mark this item in BOTH tier lists
  const alreadyDone=revealDone.has(id);
  renderRevealDetail(id,alreadyDone);
  if(alreadyDone){
    snapReel('you',reelIdx(revealYourTierId(id)));
    snapReel('community',reelIdx(revealCommunityTierId(id)));
    setLeverEnabled(false);
    showSpineVerdict(id,true);
  }else{
    resetReel('you');resetReel('community');
    clearSpine();
    setLeverEnabled(true);
  }
}
// v130 — highlight the given item (bigger + purple border) in BOTH tier lists so
// it's easy to spot across them; clears any previous highlight.
function highlightRevealAcrossLists(id){
  document.querySelectorAll('.rbl-cell.rbl-active').forEach(el=>el.classList.remove('rbl-active'));
  if(!id)return;
  document.querySelectorAll('.reveal-buildlist .rbl-cell[data-item-id="'+CSS.escape(id)+'"]').forEach(el=>el.classList.add('rbl-active'));
}

// ── reels ──
function resetReel(side){
  const strip=document.getElementById('reel-strip-'+side);
  buildReelStrip(side);
  // v129 — rest with a real tier centred (no blank gap above S).
  strip.style.transition='none';
  strip.style.transform='translateY('+reelRestY()+'px)';
  const win=document.getElementById('reel-window-'+side);
  win.classList.remove('landed','match','miss','hit','hit-big');
}
function reelRestY(){
  const n=reelTiers.length;
  const stripIndex=1*n+0; // tier 0 of the 2nd loop copy → real tiers above & below
  return -(stripIndex-REEL_CENTER)*REEL_CELL;
}
function reelCell(t){
  const d=document.createElement('div');d.className='reel-cell';
  if(t){const c=document.createElement('div');c.className='reel-chip';c.style.background=t.color||'#6b7280';c.textContent=t.label||'—';d.appendChild(c);}
  return d;
}
function buildReelStrip(side){
  const strip=document.getElementById('reel-strip-'+side);
  strip.innerHTML='';
  // v129 — no leading blank pad (that showed empty space above S at rest).
  for(let loop=0;loop<REEL_LOOPS+3;loop++){reelTiers.forEach(t=>strip.appendChild(reelCell(t)));}
}
function reelFinalY(targetIdx){
  const n=reelTiers.length;
  // v129 — padless strip: land tier targetIdx in the REEL_LOOPS-th copy, centred.
  const stripIndex=REEL_LOOPS*n+targetIdx;
  return -(stripIndex-REEL_CENTER)*REEL_CELL;
}
// Instantly place a reel on a tier (no animation) — for re-showing revealed items.
function snapReel(side,targetIdx){
  if(targetIdx<0)return;
  const strip=document.getElementById('reel-strip-'+side);
  buildReelStrip(side);
  strip.style.transition='none';strip.style.transform='translateY('+reelFinalY(targetIdx)+'px)';
  document.getElementById('reel-window-'+side).classList.add('landed');
}

// Spin a reel to targetIdx. dur = main spin seconds. v123 — the settle CREEPS
// through the last stretch to the target (slow crawl) instead of hopping across
// far tiers: we decelerate to ~1.4 tiers short, then a long slow glide onto the
// exact target. onDone fires after it settles.
// v153 — pending spins, so Space/Enter can skip straight to the result
const _reelPending={};
function skipReels(){
  ['you','community'].forEach(side=>{
    const pd=_reelPending[side];if(!pd)return;
    delete _reelPending[side];
    pd.timers.forEach(t=>clearTimeout(t));
    const strip=document.getElementById('reel-strip-'+side);
    if(strip){strip.style.transition='none';strip.style.transform='translateY('+pd.finalY+'px)';}
    document.getElementById('reel-window-'+side).classList.add('landed');
    pd.onDone&&pd.onDone();
  });
}
function spinReel(side,targetIdx,dur,onDone){
  const strip=document.getElementById('reel-strip-'+side);
  buildReelStrip(side);
  const finalY=reelFinalY(targetIdx);
  const shortOf=finalY+REEL_CELL*1.4; // stop ~1.4 tiers before the target (list still "above" it)
  strip.style.transition='none';strip.style.transform='translateY(0px)';
  void strip.offsetWidth;
  strip.style.transition='transform '+dur+'s cubic-bezier(.1,.6,.12,1)';
  strip.style.transform='translateY('+shortOf+'px)';
  const creep=Math.max(.9,dur*0.42); // slow crawl to the exact target
  const pd={finalY,onDone,timers:[]};_reelPending[side]=pd; // v153
  pd.timers.push(setTimeout(()=>{
    strip.style.transition='transform '+creep+'s cubic-bezier(.33,.9,.28,1)';
    strip.style.transform='translateY('+finalY+'px)';
  },dur*1000));
  pd.timers.push(setTimeout(()=>{if(_reelPending[side]!==pd)return;delete _reelPending[side];document.getElementById('reel-window-'+side).classList.add('landed');onDone&&onDone();},(dur+creep)*1000+40));
}

// ── spine verdict ──
function clearSpine(){
  const s=document.getElementById('reveal-spine');s.classList.remove('match','miss');
  const v=document.getElementById('reveal-verdict');v.textContent='';v.classList.remove('match','miss');
  ['you','community'].forEach(sd=>document.getElementById('reel-window-'+sd).classList.remove('match','miss'));
}
function showSpineVerdict(id,quiet){
  const yi=tierIndexById(revealYourTierId(id));
  const ci=tierIndexById(revealCommunityTierId(id));
  const spine=document.getElementById('reveal-spine');
  const v=document.getElementById('reveal-verdict');
  const yw=document.getElementById('reel-window-you'),cw=document.getElementById('reel-window-community');
  spine.classList.remove('match','miss');yw.classList.remove('match','miss');cw.classList.remove('match','miss');v.classList.remove('match','miss');
  if(yi<0||ci<0){v.textContent='';return {dist:0};}
  const dist=Math.abs(yi-ci);
  if(dist===0){spine.classList.add('match');yw.classList.add('match');cw.classList.add('match');v.classList.add('match');v.textContent='🎯 Match!';}
  else{spine.classList.add('miss');yw.classList.add('miss');cw.classList.add('miss');v.classList.add('miss');
    v.textContent=(dist===1?'1 tier apart':dist+' tiers apart')+(ci<yi?' • chat higher':' • chat lower');}
  return {dist};
}

// ── v129 — synthesized sound FX (Web Audio; no files). ON by default, persistent.
// Audio context is created lazily on first user gesture (autoplay policy).
let _revAudioCtx=null, _revSoundOn=true, _tickTimer=null;
try{_revSoundOn=(localStorage.getItem('tlf_reveal_sound')!=='0');}catch(e){}
function _audioCtx(){
  if(!_revAudioCtx){try{_revAudioCtx=new (window.AudioContext||window.webkitAudioContext)();}catch(e){return null;}}
  if(_revAudioCtx&&_revAudioCtx.state==='suspended')_revAudioCtx.resume();
  return _revAudioCtx;
}
function toggleRevealSound(){
  _revSoundOn=!_revSoundOn;
  try{localStorage.setItem('tlf_reveal_sound',_revSoundOn?'1':'0');}catch(e){}
  const b=document.getElementById('reveal-sound-btn');if(b)b.textContent=_revSoundOn?'🔊':'🔇';
  if(_revSoundOn)_audioCtx(); // warm up on enable
}
function _tone(freq,dur,type,gain,whenOffset){
  if(!_revSoundOn)return;const ctx=_audioCtx();if(!ctx)return;
  const t0=ctx.currentTime+(whenOffset||0);
  const o=ctx.createOscillator(),g=ctx.createGain();
  o.type=type||'sine';o.frequency.setValueAtTime(freq,t0);
  g.gain.setValueAtTime(0.0001,t0);
  g.gain.exponentialRampToValueAtTime(gain||0.15,t0+0.008);
  g.gain.exponentialRampToValueAtTime(0.0001,t0+dur);
  o.connect(g);g.connect(ctx.destination);o.start(t0);o.stop(t0+dur+0.02);
}
function _noiseBurst(dur,gain){
  if(!_revSoundOn)return;const ctx=_audioCtx();if(!ctx)return;
  const n=Math.floor(ctx.sampleRate*dur);const buf=ctx.createBuffer(1,n,ctx.sampleRate);
  const d=buf.getChannelData(0);for(let i=0;i<n;i++)d[i]=(Math.random()*2-1)*(1-i/n);
  const src=ctx.createBufferSource();src.buffer=buf;
  const g=ctx.createGain();g.gain.value=gain||0.2;
  src.connect(g);g.connect(ctx.destination);src.start();
}
// v154 — filtered noise (for metallic clicks / heavy clunks)
function _filtNoise(dur,gain,type,freq,whenOffset,q){
  if(!_revSoundOn)return;const ctx=_audioCtx();if(!ctx)return;
  const t0=ctx.currentTime+(whenOffset||0);
  const n=Math.max(1,Math.floor(ctx.sampleRate*dur));const buf=ctx.createBuffer(1,n,ctx.sampleRate);
  const d=buf.getChannelData(0);for(let i=0;i<n;i++)d[i]=(Math.random()*2-1)*Math.pow(1-i/n,2);
  const src=ctx.createBufferSource();src.buffer=buf;
  const f=ctx.createBiquadFilter();f.type=type||'bandpass';f.frequency.value=freq||2000;f.Q.value=q||1;
  const g=ctx.createGain();g.gain.value=gain||0.2;
  src.connect(f);f.connect(g);g.connect(ctx.destination);src.start(t0);
}
function sndLeverPull(){ // v154 — MECHANICAL: a quick ratchet (4 metal clicks) then a heavy locking clunk
  [0,0.05,0.1,0.15].forEach((t,i)=>{
    _filtNoise(0.018,0.22-i*0.02,'highpass',3200,t,0.7);   // pawl click
    _tone(2400-i*120,0.012,'square',0.035,t);              // tiny metallic tick
  });
  _filtNoise(0.10,0.30,'lowpass',420,0.2,0.9);             // body of the clunk
  _tone(62,0.16,'sine',0.26,0.2);                          // heavy low thump
  _tone(46,0.20,'sine',0.14,0.215);
  _tone(880,0.09,'triangle',0.04,0.2);                     // short metal ring
  _filtNoise(0.03,0.12,'bandpass',1500,0.205,3);           // latch snap
}
function sndTick(){_tone(1100,0.03,'square',0.06);}
function sndLand(){_tone(320,0.12,'triangle',0.2);_noiseBurst(0.05,0.12);}
function sndPlace(){ // v130 — soft "pop" for placing an item into a list
  if(!_revSoundOn)return;const ctx=_audioCtx();if(!ctx)return;
  const t0=ctx.currentTime;const o=ctx.createOscillator(),g=ctx.createGain();
  o.type='sine';o.frequency.setValueAtTime(380,t0);o.frequency.exponentialRampToValueAtTime(760,t0+0.09);
  g.gain.setValueAtTime(0.0001,t0);g.gain.exponentialRampToValueAtTime(0.16,t0+0.01);g.gain.exponentialRampToValueAtTime(0.0001,t0+0.14);
  o.connect(g);g.connect(ctx.destination);o.start(t0);o.stop(t0+0.16);
}
function sndMatch(){[523,659,784,1047].forEach((f,i)=>_tone(f,0.22,'sine',0.16,i*0.09));}
function sndMiss(dist){ // v130 — gentle soft thud (no harsh sawtooth)
  const base=Math.max(150,240-dist*24);
  _tone(base,0.22,'sine',0.16,0);
  _tone(base*0.66,0.26,'triangle',0.1,0.04);
}
// per-tier ticks synced to a spin of duration `dur` (denser near the end).
function startSpinTicks(dur){
  stopSpinTicks();
  if(!_revSoundOn)return;
  let elapsed=0,interval=45;const total=dur*1000;
  const step=()=>{
    sndTick();
    elapsed+=interval;
    interval=45+Math.pow(elapsed/total,2)*180; // slow down toward the end
    if(elapsed<total-100)_tickTimer=setTimeout(step,interval);
  };
  _tickTimer=setTimeout(step,interval);
}
function stopSpinTicks(){if(_tickTimer){clearTimeout(_tickTimer);_tickTimer=null;}}

// ── v129 — the real pull-down lever ────────────────────────────────────────
// Click = the normal full spin (revealPullLever). Click-and-HOLD = both reels
// free-spin (seamless JS loop) until release, then the normal resolve runs. The
// hold only extends anticipation; it never changes the result.
let _leverEnabled=false, _leverHeld=false, _leverHoldTimer=null, _freeSpinAnims=[];
function setLeverEnabled(on){
  _leverEnabled=on;
  const m=document.getElementById('lever-machine');const cap=document.getElementById('lever-caption');
  if(m)m.classList.toggle('disabled',!on);
  if(cap)cap.textContent=on?'Pull':'—';
}
function _reelSetHeight(){const n=reelTiers.length||1;return n*REEL_CELL;}
// Build a gap-free looping strip (no leading blank pad) so the last tier wraps
// straight to the first while free-spinning.
function buildLoopStrip(side){
  const strip=document.getElementById('reel-strip-'+side);
  strip.innerHTML='';
  for(let loop=0;loop<REEL_LOOPS+2;loop++){reelTiers.forEach(t=>strip.appendChild(reelCell(t)));}
}
function startFreeSpin(){
  _freeSpinAnims.forEach(a=>{try{a.cancel();}catch(e){}});_freeSpinAnims=[];
  startSpinTicks(999); // v129 — continuous fast ticks while held (until release)
  ['you','community'].forEach(side=>{
    const strip=document.getElementById('reel-strip-'+side);
    buildLoopStrip(side);
    strip.style.transition='none';strip.style.transform='translateY(0px)';
    const dist=_reelSetHeight(); // exactly one tier-set → seamless loop
    const anim=strip.animate(
      [{transform:'translateY(0px)'},{transform:'translateY(-'+dist+'px)'}],
      {duration:190,iterations:Infinity,easing:'linear'}); // v129 — faster
    _freeSpinAnims.push(anim);
    document.getElementById('reel-window-'+side).classList.remove('landed','match','miss');
  });
}
function stopFreeSpin(){
  _freeSpinAnims.forEach(a=>{try{a.cancel();}catch(e){}});_freeSpinAnims=[];
  stopSpinTicks();
  ['you','community'].forEach(side=>{const s=document.getElementById('reel-strip-'+side);if(s){s.style.transform='translateY(0px)';}});
}
function _leverGrab(){
  const ball=document.getElementById('lever-knob');const m=document.getElementById('lever-machine');
  if(ball)ball.classList.add('pulled');
  if(m)m.classList.add('grabbing');
  sndLeverPull();
}
function _leverRelease(){
  const ball=document.getElementById('lever-knob');const m=document.getElementById('lever-machine');
  if(ball)ball.classList.remove('pulled');
  if(m)m.classList.remove('grabbing');
}
function leverPointerDown(e){
  if(!_leverEnabled||reelSpinning||!revealCurrentId||revealDone.has(revealCurrentId))return;
  e.preventDefault();
  _leverHeld=true;_leverGrab();
  // brief threshold: a quick click (<180ms) is a normal spin; a longer press
  // starts the free-spin that runs until release.
  _leverHoldTimer=setTimeout(()=>{if(_leverHeld){startFreeSpin();}},180);
}
function leverPointerUp(e){
  if(!_leverHeld)return;
  _leverHeld=false;_leverRelease();
  if(_leverHoldTimer){clearTimeout(_leverHoldTimer);_leverHoldTimer=null;}
  const wasFree=_freeSpinAnims.length>0;
  stopFreeSpin();
  // Whether it was a click or a hold, resolve the same way (full spin to target).
  revealPullLever();
}

// ── the lever action: your reel lands first (quick), community settles last ──
function revealPullLever(){
  if(reelSpinning||!revealCurrentId)return;
  const id=revealCurrentId;
  const yIdx=reelIdx(revealYourTierId(id));
  const cIdx=reelIdx(revealCommunityTierId(id));
  if(cIdx<0){showFlash('⚠️ No community placement for this item.');return;}
  reelSpinning=true;
  setLeverEnabled(false);
  clearSpine();
  stopSpinTicks();
  startSpinTicks(5.5); // ticks across the (longest) community spin
  // your reel: short honest spin (~1.2s), lands + drops into YOUR list first
  spinReel('you',yIdx,1.2,()=>{
    if(yIdx>=0)revealDropInto('you',revealYourTierId(id),id);
    const yw=document.getElementById('reel-window-you');
    yw.classList.remove('hit');void yw.offsetWidth;yw.classList.add('hit');setTimeout(()=>yw.classList.remove('hit'),300);
    sndLand(); // v129 — your reel thunk
  });
  // community reel: full suspense spin (~5.5s), starts together, settles last
  spinReel('community',cIdx,5.5,()=>{
    stopSpinTicks();
    sndLand(); // community reel thunk
    const {dist}=showSpineVerdict(id,false);
    const cw=document.getElementById('reel-window-community');
    cw.classList.remove('hit','hit-big');void cw.offsetWidth;cw.classList.add(dist>=2?'hit-big':'hit');
    setTimeout(()=>cw.classList.remove('hit','hit-big'),520);
    setTimeout(()=>{if(dist===0)sndMatch();else sndMiss(dist);},180); // v129 — result chime
    revealDropInto('community',revealCommunityTierId(id),id);
    highlightRevealAcrossLists(id); // v130 — mark in both lists once placed
    renderRevealDetail(id,true);
    revealDone.add(id);
    saveRevealDone();
    buildRevealPool();
    reelSpinning=false;
    setLeverEnabled(false);
  });
}

function revealPickRandom(){
  if(reelSpinning)return;
  const remaining=revealItemIds.filter(id=>!revealDone.has(id));
  if(!remaining.length){showFlash('✅ All items revealed!');return;}
  revealSelect(remaining[Math.floor(Math.random()*remaining.length)]);
}

// v125 — clear this list's reveal progress and start fresh.
async function revealResetProgress(){
  if(reelSpinning)return;
  if(!revealDone.size){showFlash('Nothing to reset yet.');return;}
  const ok=await tlfConfirm({title:'Reset reveal progress?',
    message:'This clears which items you\u2019ve already revealed for THIS list, so you can start the reveal fresh. Your tier list and the community results are not affected.',
    confirmText:'Reset',danger:true});
  if(!ok)return;
  revealDone=new Set();
  try{localStorage.removeItem(revealStorageKey());}catch(e){}
  revealCurrentId=null;
  buildRevealPool();
  buildRevealLists();
  resetReel('you');resetReel('community');
  clearRevealDetail();
  clearSpine();
  setLeverEnabled(false);
  // v154 — first item selected again after reset
  {const first=revealItemIds.find(id=>!revealDone.has(id));if(first)revealSelect(first);}
}
function openRevealMagnify(side){
  const overlay=document.getElementById('reveal-magnify-overlay');
  const body=document.getElementById('reveal-magnify-body');
  const title=document.getElementById('reveal-magnify-title');
  title.textContent=(side==='you')?'Your ranking':'Community ranking';
  body.className='reveal-magnify-body';
  body.innerHTML='';
  const size=revealShape(0.9);
  revealTiers.forEach(t=>{
    const row=document.createElement('div');row.className='rbl-row';
    const lbl=document.createElement('div');lbl.className='rbl-label';lbl.style.background=t.color||'#6b7280';lbl.textContent=t.label||'—';
    const its=document.createElement('div');its.className='rbl-items';
    its.style.minHeight=(size.h+8)+'px';lbl.style.minHeight=(size.h+8)+'px'; // v152 — empty rows = full item height
    revealDone.forEach(id=>{
      const tid=(side==='you')?revealYourTierId(id):revealCommunityTierId(id);
      if(tid===t.id){
        const c=document.createElement('div');c.className='rbl-cell';revealCellInto(c,id,size);
        // v128 — click an item in the magnified list to enlarge it on top of the popup
        const it=(revealData.itemData||{})[id]||{};
        if(it.img){const sh=revealShape(1);c.style.cursor='zoom-in';
          c.onclick=(ev)=>{ev.stopPropagation();openSheetImg(it.img,sh.round,sh.contain);};}
        else{const _t=it.name||id,_s=(revealData&&revealData.imgShape)||'square';c.style.cursor='zoom-in'; // v150
          c.onclick=(ev)=>{ev.stopPropagation();openSheetText(_t,_s);};}
        its.appendChild(c);
      }
    });
    row.appendChild(lbl);row.appendChild(its);body.appendChild(row);
  });
  overlay.classList.add('show');
}
function closeRevealMagnify(){document.getElementById('reveal-magnify-overlay').classList.remove('show');}

// ── v127 — SPIN LAB (owner only): fire each spin style in isolation ──
const SPIN_STYLES=[
  {key:'current',label:'1. Slow crawl to target'},
  {key:'clean',label:'2. Clean decelerate + slow settle'},
  {key:'above',label:'3. Hesitate one tier above, then drop'},
  {key:'below',label:'4. Overshoot below, slow snap back'},
  {key:'double',label:'5. Double hesitation'},
  {key:'deadstop',label:'6. Fast spin, hard dead stop'},
  {key:'grind',label:'7. Long slow grind'},
  {key:'tease',label:'8. Tease one short, then settle'}
];
function openSpinLab(){
  if(!isAdminUser)return;
  const controls=document.getElementById('spinlab-controls');controls.innerHTML='';
  SPIN_STYLES.forEach(s=>{
    const b=document.createElement('button');b.className='reveal-btn secondary';b.textContent='▶ '+s.label;
    b.onclick=()=>spinLabFire(s.key);controls.appendChild(b);
  });
  // build the lab reel strip from real tiers (or a default set)
  spinLabResetStrip();
  document.getElementById('spinlab-overlay').classList.add('show');
}
function closeSpinLab(){document.getElementById('spinlab-overlay').classList.remove('show');}
function spinLabTiers(){return (revealTiers&&revealTiers.length)?revealTiers:[
  {label:'S',color:'#ff7f7f'},{label:'A',color:'#ffbf7f'},{label:'B',color:'#ffff7f'},
  {label:'C',color:'#bfff7f'},{label:'D',color:'#7fbfff'},{label:'F',color:'#bf7fff'}];
}
function spinLabResetStrip(){
  const strip=document.getElementById('spinlab-reel-strip');const tiers=spinLabTiers();
  strip.innerHTML='';strip.style.transition='none';strip.style.transform='translateY(0px)';
  for(let i=0;i<REEL_CENTER;i++)strip.appendChild(reelCell(null));
  for(let loop=0;loop<REEL_LOOPS+2;loop++){tiers.forEach(t=>strip.appendChild(reelCell(t)));}
}
let _spinLabBusy=false;
function spinLabFire(style){
  if(_spinLabBusy)return;_spinLabBusy=true;
  const tiers=spinLabTiers();const n=tiers.length;
  const target=Math.floor(Math.random()*n);
  const strip=document.getElementById('spinlab-reel-strip');
  spinLabResetStrip();
  const finalY=-((REEL_CENTER+REEL_LOOPS*n+target)-REEL_CENTER)*REEL_CELL;
  void strip.offsetWidth;
  const done=()=>{_spinLabBusy=false;};
  if(style==='current'){
    // v134 — REAL crawl: decelerate to ~0.85 tier short, then a long LINEAR crawl
    // straight onto the target (no easing tail that reads as a jump-over).
    const shortOf=finalY+REEL_CELL*0.85;
    strip.style.transition='transform 3s cubic-bezier(.1,.62,.2,1)';strip.style.transform='translateY('+shortOf+'px)';
    setTimeout(()=>{strip.style.transition='transform 1.6s linear';strip.style.transform='translateY('+finalY+'px)';},3000);
    setTimeout(done,4700);
  }else if(style==='clean'){
    const past=finalY-REEL_CELL*0.5;
    strip.style.transition='transform 2.7s cubic-bezier(.12,.62,.12,1)';strip.style.transform='translateY('+past+'px)';
    setTimeout(()=>{strip.style.transition='transform 1.1s cubic-bezier(.22,1,.28,1)';strip.style.transform='translateY('+finalY+'px)';},2700);
    setTimeout(done,3900);
  }else if(style==='above'){
    const above=finalY+REEL_CELL;
    strip.style.transition='transform 2.5s cubic-bezier(.1,.6,.1,1)';strip.style.transform='translateY('+above+'px)';
    setTimeout(()=>{strip.style.transition='transform .9s cubic-bezier(.4,0,.2,1)';strip.style.transform='translateY('+(above-REEL_CELL*0.12)+'px)';},2500);
    setTimeout(()=>{strip.style.transition='transform .7s cubic-bezier(.34,1.4,.5,1)';strip.style.transform='translateY('+finalY+'px)';},3450);
    setTimeout(done,4250);
  }else if(style==='below'){
    // v134 — overshoot below, SLOW to a near-stop half a tier past, then clean snap back.
    const below=finalY-REEL_CELL;
    strip.style.transition='transform 2.6s cubic-bezier(.12,.62,.1,1)';strip.style.transform='translateY('+below+'px)';
    setTimeout(()=>{strip.style.transition='transform 1.1s cubic-bezier(.2,.85,.25,1)';strip.style.transform='translateY('+(below+REEL_CELL*0.5)+'px)';},2600); // slow drift to half-a-tier past
    setTimeout(()=>{strip.style.transition='transform .55s cubic-bezier(.5,0,.5,1)';strip.style.transform='translateY('+finalY+'px)';},3900); // clean snap back
    setTimeout(done,4600);
  }else if(style==='double'){
    // 5 — slows near a wrong tier, nudges toward target, hesitates again, lands.
    const h1=finalY+REEL_CELL*2, h2=finalY+REEL_CELL*0.9;
    strip.style.transition='transform 2.2s cubic-bezier(.1,.6,.15,1)';strip.style.transform='translateY('+h1+'px)';
    setTimeout(()=>{strip.style.transition='transform .8s cubic-bezier(.4,0,.3,1)';strip.style.transform='translateY('+h2+'px)';},2200);
    setTimeout(()=>{strip.style.transition='transform .7s cubic-bezier(.4,0,.3,1)';strip.style.transform='translateY('+(h2-REEL_CELL*0.1)+'px)';},3000); // tiny hesitation
    setTimeout(()=>{strip.style.transition='transform .8s cubic-bezier(.34,1.3,.5,1)';strip.style.transform='translateY('+finalY+'px)';},3700);
    setTimeout(done,4600);
  }else if(style==='deadstop'){
    // 6 — fast spin then a hard clean stop, no bounce.
    strip.style.transition='transform 1.9s cubic-bezier(.15,.75,.25,1)';strip.style.transform='translateY('+finalY+'px)';
    setTimeout(done,2100);
  }else if(style==='grind'){
    // 7 — very gradual deceleration over a long distance, single motion.
    strip.style.transition='transform 5.5s cubic-bezier(.15,.5,.1,1)';strip.style.transform='translateY('+finalY+'px)';
    setTimeout(done,5700);
  }else{ // tease
    // 8 — stop one tier short, pause noticeably, then slowly settle onto the target.
    const shortOf=finalY+REEL_CELL;
    strip.style.transition='transform 2.6s cubic-bezier(.1,.6,.1,1)';strip.style.transform='translateY('+shortOf+'px)';
    setTimeout(()=>{strip.style.transition='transform 1.3s cubic-bezier(.3,.9,.3,1)';strip.style.transform='translateY('+finalY+'px)';},3400); // pause built into the delay
    setTimeout(done,4800);
  }
}

// v126 — keyboard control while the reveal stage is open:
//   ←/→ (and ↑/↓) move through the POOL of not-yet-revealed items, showing each
//     immediately (no Enter needed — it's just the next item).
//   Enter starts the reel for the currently-selected, not-yet-revealed item.
// Selecting a revealed item from a tier list still works via click; the arrows
// walk the pool (the remaining items), which is what you reveal next.
function revealStageOpen(){return document.getElementById('reveal-stage').classList.contains('show');}
// v130 — deselect the current item (back to empty state).
function deselectReveal(){
  if(reelSpinning)return;
  revealCurrentId=null;
  clearRevealDetail();
  resetReel('you');resetReel('community');
  clearSpine();setLeverEnabled(false);
  document.querySelectorAll('.reveal-pool-item.active,.rbl-cell.rbl-active').forEach(el=>el.classList.remove('active','rbl-active'));
}
// v130 — click anywhere on the stage (except interactive bits) unselects.
(function wireRevealDeselect(){
  const stage=document.getElementById('reveal-stage');if(!stage)return;
  stage.addEventListener('click',e=>{
    if(!revealStageOpen()||reelSpinning)return;
    if(e.target.closest('.reveal-pool-item,.rbl-cell,.lever-machine,.reveal-magnify-overlay,.reveal-magnify-btn,button,input,.reveal-spinlab-btn'))return;
    if(revealCurrentId)deselectReveal();
  });
})();
// v127 — wire the lever (pointer down/up, with pointer-cancel safety).
(function wireLever(){
  const m=document.getElementById('lever-machine');if(!m)return;
  m.addEventListener('pointerdown',leverPointerDown);
  window.addEventListener('pointerup',e=>{if(_leverHeld)leverPointerUp(e);});
  window.addEventListener('pointercancel',e=>{if(_leverHeld){_leverHeld=false;_leverRelease();stopFreeSpin();}});
})();
function revealPoolNavigate(dir){
  if(reelSpinning)return;
  const remaining=revealItemIds.filter(id=>!revealDone.has(id));
  if(!remaining.length)return;
  let idx=remaining.indexOf(revealCurrentId);
  if(idx<0){revealSelect(remaining[0]);return;} // nothing selected in pool yet → first
  idx=(idx+dir+remaining.length)%remaining.length; // wrap within the pool
  revealSelect(remaining[idx]);
}
document.addEventListener('keydown',e=>{
  if(!revealStageOpen())return;
  const t=e.target;
  if(t&&(t.tagName==='INPUT'||t.tagName==='TEXTAREA'||t.tagName==='SELECT'||t.isContentEditable))return;
  const k=e.key;
  if(k==='ArrowLeft'||k==='ArrowUp'){e.preventDefault();e.stopPropagation();revealPoolNavigate(-1);}
  else if(k==='ArrowRight'||k==='ArrowDown'){e.preventDefault();e.stopPropagation();revealPoolNavigate(1);}
  else if(k==='Enter'||k===' '){
    // v153 — Space/Enter work like the lever: press = pull, HOLD = endless spin until
    // release. Pressed while the reels run = skip straight to the result.
    e.preventDefault();e.stopPropagation();
    if(e.repeat)return;
    try{if(document.activeElement&&document.activeElement.blur)document.activeElement.blur();}catch(_e){}
    if(reelSpinning){skipReels();return;}
    if(_revKeyHeld)return;
    if(!_leverEnabled||!revealCurrentId||revealDone.has(revealCurrentId))return;
    _revKeyHeld=true;
    leverPointerDown({preventDefault(){}});
  }
},true); // capture — run before the editor's item-nav keydown so the stage owns the keys
let _revKeyHeld=false; // v153
document.addEventListener('keyup',e=>{
  if(e.key!=='Enter'&&e.key!==' ')return;
  if(!revealStageOpen())return;
  e.preventDefault();e.stopPropagation();
  if(!_revKeyHeld)return;
  _revKeyHeld=false;
  leverPointerUp({preventDefault(){}});
},true);
// Render the creator-side community results tier list (uses viewer render helpers,
// but the creator's own list data lives in the editor globals). We build a
// lightweight viewerData-like context from the current editor list so the shared
// renderer can size items by shape.
let lastCreatorResults=null; // cached snapshot for instant render on reload
let _ccRefetchedFor=null; // v154 — safety net: refetch mismatched results once per session
function renderCreatorCommunity(session,results){
  // v143 — if the community presentation is open, refresh it with the new results.
  if(results&&presentMode==='community'&&document.getElementById('present-stage').classList.contains('show')){
    voteResults=results;lastCreatorResults=results;
    const keepSel=presentSelected;presentRender();if(keepSel)presentSelect(keepSel);
  }
  const panel=document.getElementById('creator-community');
  const row2=document.getElementById('editor-row-2');
  const setRow2=(show)=>{if(!row2)return;
    if(show){
      const wasHidden=row2.style.display==='none'||!row2.style.display;
      row2.style.display='flex';
      if(wasHidden){row2.classList.remove('row2-in');void row2.offsetWidth;row2.classList.add('row2-in');} // v99.1 — replay the enter animation, parallel with the QR
      if(typeof syncEditorRow1Height==='function')syncEditorRow1Height(); // v99.9 — refresh the QR's row-1 height cap when row 2 toggles
    }else{row2.style.display='none';row2.classList.remove('row2-in');}
  }; // v98.9 — collapse the empty row-2 so it adds no gap; v99.1 — animate its entrance
  if(!session||(session.status!=='open'&&session.status!=='closed')){panel.style.display='none';setRow2(false);return;}
  setRow2(true);
  // v85.0 — the community results only make sense in the mode the session runs in
  // (placement↔Manual, parameter↔Auto, head2head↔Elo). If the creator has switched
  // the editor to a different mode, hide the community list here and show a short
  // note pointing them back — the results still exist, just aren't relevant to the
  // mode they're now editing in.
  const sessionEditorMode=session.mode==='placement'?'manual':(session.mode==='parameter'?'auto':(session.mode==='head2head'?'elo':null));
  if(sessionEditorMode&&sessionEditorMode!==currentMode){
    // v112/v113 — MODE MISMATCH. The community RESULTS LIST only makes sense in the
    // session's own mode, so hide the whole row-2 panel and close any open community
    // detail. The explanatory message is shown in the voting panel above the controls
    // (drift-warn for open, #vote-closed-modenote for closed) — the controls themselves
    // stay reachable there (v113 removed the old full-panel takeover).
    panel.style.display='none';
    setRow2(false);
    if(typeof hideCcSide==='function')hideCcSide();
    return;
  }
  const bodyEl=document.getElementById('creator-community-body');
  // v111 (creator-A) — honour the creator's Hide/Show preference on every (re)render.
  // This function runs on each mode switch (via applyModeUI), and it used to force the
  // body visible unconditionally — so toggling Hide in Manual then switching to Elo
  // re-showed the list (and the button label + flag drifted out of sync). Drive the
  // body visibility AND the button label from the single creatorCommunityHidden flag.
  if(bodyEl)bodyEl.style.display=creatorCommunityHidden?'none':'';
  {const tgl=document.getElementById('creator-community-toggle');if(tgl)tgl.textContent=creatorCommunityHidden?'▼':'▲';}
  panel.style.display='';
  if(results)lastCreatorResults=results;
  // v127 — Reveal button is ALWAYS visible (discoverable), but disabled while a
  // session is live: reveal needs frozen results, so it's only usable once closed.
  {const rb=document.getElementById('cc-reveal-mode-btn');
   if(rb){const closed=(session.status==='closed');
     // Not natively disabled (that suppresses hover/tooltip) — the click is
     // guarded in openRevealStage; is-disabled just styles it as locked.
     rb.classList.toggle('is-disabled',!closed);
     rb.setAttribute('data-tip',closed?'Slot-machine reveal: compare your ranking with the community':'Reveal mode unlocks after you end voting');}}
  const useResults=results||lastCreatorResults;
  // v82 — the editor list now shows the CREATOR'S OWN Elo ranking (from their
  // votes), so community results must NOT re-place it. The community's ranking
  // lives in this panel only. Previously this line copied the community order
  // into the creator's list, which made the two rankings identical.
  // Build tiers + a viewerData shim from the editor's current list so the shared
  // renderer (voteItemCell/renderTierListInto) can size and draw items.
  const d=buildSaveData();
  viewerData=d;
  voteTiers=(d.tiers||[]).map(t=>({id:t.id,label:t.label,color:t.color}));
  const meta=document.getElementById('creator-community-meta');
  const title=document.querySelector('.creator-community-title');
  if(useResults&&useResults.hidden){
    if(title)title.textContent=session.status==='closed'?'🗳️ Community results (voting closed)':'🗳️ Live community results';
    document.getElementById('creator-community-tierlist').innerHTML='';
    meta.textContent='Results hidden from voters (they see them only after you reveal).';
    return;
  }
  const items=(useResults&&useResults.items)||{};
  // v154 — SAFETY NET: results with votes whose items don't belong to THIS list are
  // stale (another list's answer). Don't draw an empty list — fetch fresh once.
  {const keys=Object.keys(items);const voters=(useResults&&useResults.totalVoters)||0;
   if(keys.length&&voters>0&&!keys.some(id=>d.itemData&&d.itemData[id])){
     if(_ccRefetchedFor!==session.id){_ccRefetchedFor=session.id;setTimeout(()=>{try{refreshVotingPanel();}catch(e){}},250);}
     return;
   }}
  let byTier;let ccUnranked=null;
  if(useResults&&useResults.mode==='parameter'){
    // Parameter session: community averages -> score -> the list's own ranges.
    const scores={};Object.keys(items).forEach(id=>{if(d.itemData&&d.itemData[id])scores[id]=communityAvgScore(items[id],d);});
    byTier=paramPlacementFromScores(scores,d);
  }else if(useResults&&useResults.mode==='head2head'){
    // v81.5 — head2head results carry rating/matches/pct (no winningTierId), so
    // place by pct->tier exactly like the voter side. Items with no matchups yet
    // go to the "Unranked" band, matching what viewers see.
    byTier={};voteTiers.forEach(t=>byTier[t.id]=[]);
    const rated=[];const pool=[];
    Object.keys(items).forEach(id=>{
      if(!d.itemData||!d.itemData[id])return;
      if(typeof items[id].pct!=='number'){return;}
      ((items[id].matches||0)>0?rated:pool).push(id);
    });
    rated.sort((a,b)=>(items[b].rating||0)-(items[a].rating||0));
    rated.forEach(id=>{const tid=pctToTierId(items[id].pct,d);if(tid&&byTier[tid])byTier[tid].push(id);});
    ccUnranked=pool;
  }else{
    byTier={};voteTiers.forEach(t=>byTier[t.id]=[]);
    Object.keys(items).forEach(id=>{const wt=items[id].winningTierId;if(wt&&byTier[wt])byTier[wt].push(id);});
    // v97.4 — order each row by orderScore (avg Borda from the backend), higher =
    // front, matching the voter side (communityPlacement). This branch had its own
    // row-building and never got the v97.3 sort, so the creator's community order
    // never updated. Missing score sorts as 0.
    Object.keys(byTier).forEach(tid=>{
      byTier[tid].sort((a,b)=>{
        const sa=(items[a]&&typeof items[a].orderScore==='number')?items[a].orderScore:0;
        const sb=(items[b]&&typeof items[b].orderScore==='number')?items[b].orderScore:0;
        return sb-sa;
      });
    });
  }
  const ccTl=document.getElementById('creator-community-tierlist');
  renderTierListInto(ccTl,byTier,1,(id)=>{if(isPhone())showCcSheet(id,useResults,d);else showCcSide(id,useResults,d);});
  // v81.5 — unranked band at the middle, same rule as the voter community list.
  if(ccUnranked&&ccUnranked.length){
    const band=document.createElement('div');band.className='vr-pool-band';
    const lbl2=document.createElement('div');lbl2.className='vr-pool-label';lbl2.textContent='⚖️ Unranked';
    const items2=document.createElement('div');items2.className='vr-pool-items';
    ccUnranked.forEach(id=>items2.appendChild(voteItemCell(id,'vt-item',1,()=>{if(isPhone())showCcSheet(id,useResults,d);else showCcSide(id,useResults,d);})));
    band.appendChild(lbl2);band.appendChild(items2);
    const rows=ccTl.children;const mid=Math.ceil(rows.length/2);
    if(mid>=rows.length)ccTl.appendChild(band);else ccTl.insertBefore(band,rows[mid]);
  }
  const voters=(useResults&&useResults.totalVoters)||0;
  const voterStr=voters+' voter'+(voters===1?'':'s')+(session.status==='closed'?' took part':' so far');
  if(title)title.textContent=(session.status==='closed'?'🗳️ Community results (voting closed)':'🗳️ Live community results')+' — '+voterStr;
  if(meta)meta.textContent=''; // count now lives in the title
  // Keep the creator side panel fresh if an item is selected.
  applyCommunityBlurPref();
  // v79.3 — this refresh (new votes arriving) always called the DESKTOP panel,
  // even on a phone: the tap opened the sheet correctly, then the next refresh
  // forced the sidebar open over it. Route it the same way the click does.
  if(ccSideItemId){
    if(isPhone())showCcSheet(ccSideItemId,useResults,d);
    else showCcSide(ccSideItemId,useResults,d);
  }
}
function hideCreatorCommunity(){
  clearVoteHighlights();
  hideCcSide(); // v98.9 — hides #cc-side (row 2)
  const p=document.getElementById('creator-community');if(p)p.style.display='none';
  const row2=document.getElementById('editor-row-2');if(row2)row2.style.display='none'; // v98.9 — collapse the empty row
}

// ── Near-instant community results ─────────────────────────────────────────
// Realtime tells us a vote landed; we then re-fetch results through the secure
// Edge Function (the Realtime payload itself is never trusted). Votes can arrive
// in bursts, so refreshes are DEBOUNCED to at most one per second — 200 votes in
// a second cause one refresh, not 200.
let voteRealtimeChannel=null;
let voteRefreshTimer=null;
let voteRefreshLast=0;
const VOTE_REFRESH_MS=1000;

async function refreshCreatorResultsNow(){
  if(!currentSession||!currentListId)return;
  try{
    const _reqList=currentListId;const r=await manageVoting({action:'status',listId:_reqList});if(currentListId!==_reqList)return; // v154 — ignore a late answer for a list we've left
    currentSession=r.session||null;
    if(!currentSession){renderVotingState(r);return;}
    const vc=(r&&r.results&&typeof r.results.totalVoters==='number')?r.results.totalVoters:0;
    const el=document.getElementById('vote-voter-count');if(el)el.textContent=vc;
    if(currentSession.status==='open')renderCreatorCommunity(currentSession,r&&r.results);
  }catch(e){/* poll fallback will retry */}
}
// Coalesce a burst of vote events into a single refresh.
function scheduleCreatorResultsRefresh(){
  if(voteRefreshTimer)return; // one already queued — it covers this event too
  const since=Date.now()-voteRefreshLast;
  const wait=since>=VOTE_REFRESH_MS?0:(VOTE_REFRESH_MS-since);
  voteRefreshTimer=setTimeout(()=>{
    voteRefreshTimer=null;voteRefreshLast=Date.now();
    refreshCreatorResultsNow();
  },wait);
}
function startVoteRealtime(sessionId){
  stopVoteRealtime();
  if(!sessionId||!sb||!sb.channel)return;
  try{
    voteRealtimeChannel=sb.channel('votes-'+sessionId)
      .on('postgres_changes',
        {event:'*',schema:'public',table:'votes',filter:'session_id=eq.'+sessionId},
        ()=>{scheduleCreatorResultsRefresh();})
      .subscribe();
  }catch(e){/* Realtime unavailable — the status poll still covers updates */}
}
function stopVoteRealtime(){
  if(voteRealtimeChannel){try{sb.removeChannel(voteRealtimeChannel);}catch(e){}voteRealtimeChannel=null;}
  if(voteRefreshTimer){clearTimeout(voteRefreshTimer);voteRefreshTimer=null;}
}

function startVotePolling(){
  if(votePollTimer)clearInterval(votePollTimer);
  votePollTimer=setInterval(async()=>{
    if(!currentSession){clearInterval(votePollTimer);votePollTimer=null;return;}
    try{
      const _reqList=currentListId;const r=await manageVoting({action:'status',listId:_reqList});if(currentListId!==_reqList)return; // v154 — ignore a late answer for a list we've left
      currentSession=r.session||null;
      if(!currentSession){renderVotingState(r);return;}
      const vc=(r&&r.results&&typeof r.results.totalVoters==='number')?r.results.totalVoters:0;
      document.getElementById('vote-voter-count').textContent=vc;
      if(currentSession.status==='open')renderCreatorCommunity(currentSession,r&&r.results);
    }catch(e){}
  },20000); // fallback beneath Realtime (was 10s when polling was the only path)
}

// Parameter voting needs Auto-Rank (>=1 slider param + ranges); gate the option.
// Mode is derived from the list: Auto-Rank -> parameter vote, Manual -> placement.
// v79 — "ranked" = the order is computed rather than dragged. True for both
// Auto-Rank (from parameters) and Elo (from votes). Most existing checks spelled
// this as currentMode!=='auto', which silently treated Elo like Manual — leaving
// items draggable and the % ranges hidden on a list whose order isn't the
// creator's to set.
// v79.1 — THE TIER PLACEMENT RULE. Ranges are thresholds, not proximity: an item
// lands in the highest band whose MINIMUM it meets, and is never rounded up into
// a tier it did not reach. 94.9 stays in A even though S starts at 95.
//
// Matching on min..max instead meant anything falling BETWEEN two bands matched
// nothing at all — with A = 85-94 and S = 95-100, a 94.5 belonged nowhere and the
// item was silently dropped into the pool. Elo percentages are continuous so this
// happened constantly; Auto-Rank's integer scores mostly skipped over the cracks
// but could land in them too.
//
// Sorting by minimum descending makes the upper bound irrelevant: a band runs
// from its own minimum up to the next band's. Gaps become structurally
// impossible rather than patched. The lowest band is the catch-all, which is
// also what lets an Elo list's bottom item — always exactly 0 — be placed at all.
// bands: [{id|zone, min}], returns the winning entry or null.
function pickTierBand(pct,bands){
  if(!bands||!bands.length||typeof pct!=='number'||isNaN(pct))return null;
  const sorted=[...bands].sort((a,b)=>b.min-a.min);
  for(const b of sorted){ if(pct>=b.min)return b; }
  return sorted[sorted.length-1]; // below every minimum -> the lowest band
}
function isRankedMode(){return currentMode==='auto'||currentMode==='elo';}
function derivedVoteMode(){
  // v79 — the creator never picks a voting mode; it follows from how they built
  // the list. manual -> place items in tiers, auto -> rate the parameters,
  // elo -> pick a winner from each pairing.
  if(currentMode==='auto')return 'parameter';
  if(currentMode==='elo')return 'head2head';
  return 'placement';
}
// Keep the old name as an alias — several call sites invoke it after edits.
function refreshParameterModeAvailability(){updateVoteExplain();}
function updateVoteExplain(){
  const head=document.getElementById('vote-mode-explain-head');
  const body=document.getElementById('vote-mode-explain-body');
  if(!head||!body)return;
  if(currentMode==='elo'){
    head.textContent='Elo ranking voting';
    body.textContent='The community votes the same way you do \u2014 one matchup at a time. Each voter gets a budget of 25 votes and results build the community ranking as votes come in. Community votes are tallied separately from yours \u2014 your personal ranking and the community\u2019s never mix. Starting saves your current list.';
    // v96.5 — in Elo the community ranking IS the vote's result, so hiding it
    // (the "Creator's ranking"-only post-close option) would leave nothing
    // meaningful to show. Disable that option and force a community-inclusive one.
    setPostCloseCreatorEnabled(false);
  }else if(currentMode==='auto'){
    head.textContent='Auto-Rank voting';
    body.textContent='Voters rate each item on your slider parameters (1–10). The community tier list is built from the AVERAGE score across all votes, mapped through your tier ranges. Starting saves your current list.';
    setPostCloseCreatorEnabled(true);
  }else{
    head.textContent='Manual ranking voting';
    body.textContent='Voters place each item into a tier. Where an item lands in the community result is the AVERAGE placement across all votes. Starting saves your current list.';
    setPostCloseCreatorEnabled(true);
  }
}
// v96.5 — enable/disable the post-close "Creator's ranking" (community-hiding)
// option. When disabling while it's selected, fall back to "Community ranking".
function setPostCloseCreatorEnabled(on){
  const seg=document.getElementById('vote-postclose-seg');if(!seg)return;
  const btn=seg.querySelector('.vote-seg-btn[data-pc="creator"]');if(!btn)return;
  btn.classList.toggle('disabled',!on);
  btn.disabled=!on;
  btn.title=on?'':'Elo results always include the community ranking';
  let hint=document.getElementById('vote-postclose-hint');
  if(!on){
    if(votePostClose==='creator')setPostClose('community'); // don't leave community hidden in Elo
    if(!hint){
      hint=document.createElement('div');hint.id='vote-postclose-hint';
      hint.style.cssText='font-size:.62rem;color:#999;margin-top:4px';
      hint.textContent='Elo results always include the community ranking.';
      seg.parentNode.insertBefore(hint,seg.nextSibling);
    }
    hint.style.display='';
  }else if(hint){hint.style.display='none';}
}
async function startVoting(){
  if(anonMode){openAnonAuth('vote');return;}   // v98.0 — community voting is account-only
  if(!siteAllows('new_voting')){showFlash('⚠️ Starting new votes is paused right now — please try again later.');return;} // v154
  if(!currentUser){showFlash('⚠️ Please sign in to start voting.');return;}
  const mode=derivedVoteMode();
  // v93 — "Start voting" now SAVES the current list first (in the mode you're
  // looking at), then starts the vote in that mode. This removes the old "Save the
  // list first" / "needs a saved list in Elo mode" errors and guarantees the
  // community vote runs in the mode shown on screen: the backend keys the vote off
  // the list's saved data.currentMode, so we save whenever there's no list yet or
  // the saved mode differs from the current editor mode.
  if(!currentListId||modeDrifted()||effDirty()){
    const ok=await saveCurrentList();
    if(!ok)return;               // save failed (quota/auth) — don't try to start
  }
  if(!currentListId)return;       // safety: save should have set it
  const revealHidden=document.getElementById('vote-reveal-hidden').checked;
  voteForceSetup=false;
  clearCommunityResultsState(); // fresh session -> no stale results on screen
  try{
    const r=await manageVoting({action:'start',listId:currentListId,mode,revealHidden,postCloseView:votePostClose});
    currentSession=r.session;
    renderVotingState(r);
    showFlash('🗳️ Voting started!');
  }catch(e){showFlash('⚠️ '+(e.message||'Could not start voting'));}
}

async function closeVoting(){
  if(!currentSession)return;
  const resultsHidden=!!(currentSession&&currentSession.reveal_hidden);
  if(!await tlfConfirm({
    title:'Close voting?',
    message:'Voters will no longer be able to vote.'+(resultsHidden
      ?'\n\nResults are currently HIDDEN from voters. Closing the vote will REVEAL the community results to them.'
      :''),
    confirmText:'Close voting',danger:true}))return;
  try{
    const _reqList=currentListId;const r=await manageVoting({action:'status',listId:_reqList});if(currentListId!==_reqList)return; // v154 — ignore a late answer for a list we've left
    await manageVoting({action:'close',sessionId:currentSession.id});
    currentSession={...currentSession,status:'closed'};
    voteForceSetup=false;
    renderVotingState(r);
    showFlash('🗳️ Voting closed.');
  }catch(e){showFlash('⚠️ '+(e.message||'Could not close voting'));}
}

async function reopenVoting(){
  if(!currentSession)return;
  if(!siteAllows('new_voting')){showFlash('⚠️ Reopening votes is paused right now — please try again later.');return;} // v154
  try{
    await manageVoting({action:'reopen',sessionId:currentSession.id});
    currentSession={...currentSession,status:'open'};
    voteForceSetup=false;
    // Re-fetch so the community results render immediately (no reload needed).
    const _reqList=currentListId;const r=await manageVoting({action:'status',listId:_reqList});if(currentListId!==_reqList)return; // v154 — ignore a late answer for a list we've left
    currentSession=r.session||currentSession;
    renderVotingState(r);
    showFlash('🗳️ Voting reopened!');
  }catch(e){showFlash('⚠️ '+(e.message||'Could not reopen'));}
}

async function toggleReveal(){
  if(!currentSession)return;
  try{
    await manageVoting({action:'reveal',sessionId:currentSession.id,revealHidden:false});
    currentSession.reveal_hidden=false;
    const badge=document.getElementById('vote-active-badge');
    badge.textContent='● Voting is live';badge.classList.remove('hidden-mode');
    document.getElementById('vote-reveal-btn').style.display='none';
    showFlash('👁 Results revealed to voters');
  }catch(e){showFlash('⚠️ '+(e.message||'Could not reveal'));}
}

/* ── SHAPE ── */
function applyShape(s){
  imgShape=s;
  document.body.className='shape-'+s;
  document.querySelectorAll('.shape-btn').forEach(b=>b.classList.toggle('active',b.dataset.shape===s));
}
function setShape(s){
  applyShape(s);
  if(selectedItemId)refreshDetailImage(selectedItemId);
  // v84.2 — if the creator is mid-voting, re-render the CURRENT pair so the new
  // shape shows immediately instead of only on the next vote.
  if(ch2hActive&&ch2hPair&&document.getElementById('ch2h-view')&&document.getElementById('ch2h-view').style.display!=='none'){
    ch2hRenderPair(ch2hPair);
  }
  saveState();
}

function refreshDetailImage(id){
  const d=itemData[id];if(!d)return;
  const wrap=document.getElementById('detail-img-wrap');if(!wrap)return;
  wrap.innerHTML='';
  wrap.classList.remove('tappable');wrap.onclick=null; // v83.5 — reset between items
  // Example/demo images (e.g. the logo) already carry their own card background,
  // so render them without the grey wrapper backing.
  wrap.classList.toggle('example-img',!!(d.example&&d.img));
  if(d.img){
    const img=document.createElement('img');img.src=d.img;wrap.appendChild(img);
    // v83.5 — tap to enlarge, mirroring the viewer's detail panel. Same modal
    // (openSheetImg) and the same shape-arg derivation, sourced from the editor's
    // imgShape. Example/demo images are decorative, so they stay non-tappable.
    if(!d.example){
      const round=(imgShape==='round'),contain=(imgShape==='nocrop');
      const ar=(imgShape==='portrait')?(285/399):(imgShape==='landscape'||imgShape==='nocrop')?(120/80):1;
      wrap.classList.add('tappable');
      wrap.onclick=()=>openSheetImg(d.img,round,contain,ar);
    }
  }
  else{const prev=document.createElement('div');prev.className='text-preview';const el=document.getElementById(id);prev.textContent=d.name||(el?el.querySelector('span')?.textContent||'':'');wrap.appendChild(prev);
    if(!d.example){const _t=prev.textContent;wrap.classList.add('tappable');wrap.onclick=()=>openSheetText(_t,imgShape);}} // v150
}

function showDetailPanel(){document.getElementById('right-col').classList.remove('hidden');document.getElementById('detail-content').style.display='block';}
function hideDetailPanel(){
  // v99.2 — close is instant (.hidden has transition:none), so just collapse and
  // hide the content immediately; no transitionend/timeout dance needed.
  document.getElementById('right-col').classList.add('hidden');
  document.getElementById('detail-content').style.display='none';
}

/* ── INIT ── */
function init(){
  let raw=null;
  try{raw=localStorage.getItem(cacheKey());}catch(e){raw=null;}
  if(raw){
    try{
      suppressDirty=true;
      const s=JSON.parse(raw);
      // Restore identity so Save targets the right list (no duplicates) and the
      // title matches what the user was working on.
      currentListId=s._listId||null;
      currentListTitle=s._listTitle||'New List';
      currentShareToken=s._shareToken||null;
      currentListIsPublic=(s._isPublic===undefined)?!!s._shareToken:!!s._isPublic;   // Build F — old caches: shared==public
      // v85.0 — restore the SAVED mode so mode-drift (Save highlight) works after a
      // reload. Old caches lack it; fall back to the restored mode (no drift shown
      // until the next real load/save re-establishes the true saved mode).
      savedMode=(s._savedMode!==undefined&&s._savedMode!==null)?s._savedMode:(s.currentMode||null);
      const titleInput=document.getElementById('current-list-title');
      if(titleInput)titleInput.value=currentListTitle;
      params=s.params||[];itemData=s.itemData||{};idCounter=s.idCounter||0;
      currentMode=['manual','auto','elo'].includes(s.currentMode)?s.currentMode:'manual'; // v79
      manualSnapshot=s.manualSnapshot||null;
      imgShape=s.imgShape||'square';rowRanges=s.rowRanges||{};
      applyShape(imgShape);
      const tl=document.getElementById('tierlist');tl.innerHTML='';
      (s.tiers||[]).forEach(t=>addRow(t.label,t.color,[],t.id));
      const allEls={};
      Object.keys(itemData).forEach(id=>{const d=itemData[id];allEls[id]=d.img?buildItemEl(id,'img',d.img):buildItemEl(id,'text',null,d.name||id);});
      // v98.3 — anon local images: the cached `img` is a dead object URL from the
      // previous session. Re-fetch each blob from IndexedDB and swap in a fresh
      // object URL. Async + best-effort: a missing blob just leaves a broken image
      // (the item still exists, so the list structure is intact).
      Object.keys(itemData).forEach(id=>{
        const d=itemData[id];
        if(d&&d.localImg){
          tlfIdbGet(d.localImg).then(blob=>{
            if(!blob)return;
            const url=tlfMakeObjUrl(blob);
            d.img=url;
            const el=document.getElementById(id);const imgEl=el&&el.querySelector('img');
            if(imgEl)imgEl.src=url;
          }).catch(()=>{});
        }
      });
      (s.tiers||[]).forEach(t=>{const zone=document.querySelector(`.tier-items[data-zone="${t.id}"]`);(t.items||[]).forEach(id=>{if(allEls[id]&&zone)zone.appendChild(allEls[id]);});});
      const pool=document.getElementById('item-pool');
      (s.pool||[]).forEach(id=>{if(allEls[id])addToPool(allEls[id],pool)});
      // v82.4 — SAFETY NET: any item that exists in itemData but wasn't placed by
      // the saved tiers/pool (e.g. an older save that lost track of items) goes
      // to the pool, so an item can never be built-but-orphaned again.
      Object.keys(allEls).forEach(id=>{if(!document.getElementById(id))addToPool(allEls[id],pool);});
      refreshSortSelect();applyModeUI();refreshAllDots();
      updateListBanner();
      // Build F — load the creator's list-keyed Elo ranking on reload too.
      // Build Y — and resume the matchup if we were mid-voting before the reload.
      if(currentMode==='elo'&&currentListId){
        try{if(localStorage.getItem('tlf_ch2h_active_list')===currentListId)ch2hActive=true;}catch(e){}
        ch2hLoadPersonal();
        updateCreatorH2H();
      }
      // v137 — restore the share section: QR if public, "Make list public" button if
      // private (a saved private list is no longer hidden — it shows the publish button).
      refreshShareSection();
      // Reopen the detail panel if an item was selected before reload.
      if(s._selectedItemId&&itemData[s._selectedItemId]&&document.getElementById(s._selectedItemId)){
        selectItem(s._selectedItemId);
      }
      suppressDirty=false;
      // Restore the unsaved-changes indicator to match pre-reload state.
      loadedListSavedAt=s._serverUpdatedAt||null; // v74
      if(s._dirty){listDirty=true;updateListBanner();}else{clearDirty();}
      return;
    }catch(e){suppressDirty=false;}
  }
  initFresh();
}

function initFresh(skipOnboarding){
  const prevSuppress=suppressDirty;suppressDirty=true;
  params=[];itemData={};idCounter=0;currentMode='manual';manualSnapshot=null;preSortSnapshot=null;rowRanges={};
  // v83.4 — clear the creator's Elo state so a freshly loaded/created list never
  // saves a previous list's numbers before runEloRank/ch2hLoadPersonal repaint.
  creatorEloRanking={};creatorPersonal=null;ch2hActive=false;currentListIsPublic=false;listRemoteDeleted=false;
  document.getElementById('item-pool').innerHTML='';
  document.getElementById('tierlist').innerHTML='';
  document.querySelectorAll('.color-popup').forEach(p=>p.remove());
  applyShape('square');
  DEFAULT_TIERS.forEach(t=>addRow(t.label,t.color,t.items));
  // (v74: the skipOnboarding argument is now vestigial — callers still pass it,
  // but there are no demo items left to suppress.)
  refreshSortSelect();applyModeUI();refreshAllDots();deselectItem();
  suppressDirty=prevSuppress;
  clearDirty();
}

// True when the list has no real (non-example) items anywhere.
function isListEmpty(){
  const items=document.querySelectorAll('#tierlist .item, #item-pool .item');
  for(const el of items){const d=itemData[el.id];if(!d||!d.example)return false;}
  return true;
}
// v73 — onboarding demo items REMOVED. This used to seed three example items
// (the logo in tier S, a text item in tier A, a pool item) plus two example
// parameters, all flagged example:true. The problem was that it put fake
// content inside the user's own list, which they then had to clean up. The
// item pool now carries an empty-state hint instead (see #item-pool:empty in
// the CSS) — same guidance, nothing to delete.
//
// v74 — the no-op stub and its callers are gone too. The `example` flag handling
// elsewhere STAYS: lists saved before v73 may still contain demo items, and those
// filters are what keep excluding them from counts and exports.


let listDirty=false;
let savedMode=null;
let savedAt=null;
let loadedListSavedAt=null;
let suppressDirty=false; // true during programmatic load/restore so it isn't flagged as a user edit

// v84.6 — the list is "unsaved" if content changed (listDirty) OR the current mode
// differs from the SAVED mode. The latter means: switching Manual↔Auto↔Elo lights
// Save (you must save for viewers to get the new mode), and switching BACK to the
// saved mode clears the highlight when there are no other edits. Only applies to an
// already-saved list (a brand-new list uses listDirty alone).
function modeDrifted(){return !!(currentListId&&savedMode&&currentMode!==savedMode);}
function effDirty(){return listDirty||modeDrifted();}
function updateListBanner(){
  const nameEl=document.getElementById('clb-name');
  if(nameEl)nameEl.textContent=currentListTitle||'New List';
  const dirty=effDirty();
  const uns=document.getElementById('clb-unsaved');
  if(uns)uns.classList.toggle('show',dirty);
  // also reflect on the Save button
  const saveBtn=document.getElementById('save-btn');
  if(saveBtn){
    saveBtn.classList.toggle('has-unsaved',dirty&&!listRemoteDeleted);
    saveBtn.disabled=listRemoteDeleted;                                  // v140 — grey out; a save would fail
    saveBtn.title=listRemoteDeleted?'This list was deleted':'';
  }
  // v88 — Revert is only meaningful when there ARE unsaved changes AND there's a
  // SAVED version to go back to (a brand-new, never-saved list has nothing to
  // revert to — Save is the only move there).
  const revertBtn=document.getElementById('revert-btn');
  if(revertBtn)revertBtn.style.display=(dirty&&currentListId)?'':'none';
  updateViewersSee();
}
// QR "viewers see": which ranking the share code shows, when saved, and whether
// there are edits not yet visible to viewers.
function updateViewersSee(){
  const box=document.getElementById('qr-viewers-see');
  const line=document.getElementById('qr-vs-line');
  const warn=document.getElementById('qr-vs-warn');
  if(!box||!line||!warn)return;
  if(!currentListId||!savedMode){box.style.display='none';return;}
  box.style.display='';
  // v140 — viewers see the SESSION's mode (which can differ from the saved list's
  // mode) whenever a session exists; only fall back to the saved snapshot when there
  // is no session. v140.1 — extended to CLOSED sessions (viewers still see results).
  const sess=(currentSession&&currentSession.mode&&(currentSession.status==='open'||currentSession.status==='closed'))?currentSession:null;
  const m=sess?sess.mode:savedMode;
  const label=m==='auto'?'Auto-ranked list':m==='elo'?'Elo (community-voted) list':m==='parameter'?'Parameter voting':m==='head2head'?'Head-to-head voting':'Manual ranking';
  const suffix=sess?(sess.status==='open'?' · voting live':' · voting closed'):(savedAt?' · saved '+relTime(savedAt):'');
  line.textContent='Viewers see: '+label+suffix;
  warn.style.display=(!sess&&effDirty())?'':'none';
}
function relTime(ts){
  const s=Math.floor((Date.now()-ts)/1000);
  if(s<45)return'just now';
  if(s<3600)return Math.max(1,Math.round(s/60))+' min ago';
  if(s<86400)return Math.round(s/3600)+' h ago';
  return new Date(ts).toLocaleDateString();
}
function markDirty(){if(suppressDirty)return;if(!listDirty){listDirty=true;updateListBanner();}}
function clearDirty(){listDirty=false;updateListBanner();}
// v88 — discard unsaved edits and reload the last SAVED version of this list.
// Needed because edits otherwise persist across reloads (via the tlm9 cache), so
// there was no way to back out of changes short of saving. loadList(force:true)
// re-fetches the saved row, repaints, and in its finally block resets savedMode/
// savedAt, clears dirty, and rewrites the cache — so the discarded edits don't
// come back on the next reload either.
async function revertUnsavedChanges(){
  if(!currentListId||!effDirty())return;   // nothing saved to revert to, or nothing to discard
  const ok=await tlfConfirm({
    title:'Discard unsaved changes?',
    message:'This reloads the last saved version of this list.\n\nYour unsaved changes (including any mode switch) will be discarded. This can\u2019t be undone.',
    confirmText:'Discard and reload',danger:true});
  if(!ok)return;
  await loadList(currentListId,{force:true});
  showFlash('↩︎ Reverted to saved version');
}

function writeCache(){
  try{
    const tiers=[...document.querySelectorAll('.tier-row')].map(row=>({
      id:row.dataset.id,label:row.querySelector('.tier-label-text')?.textContent.trim()||'',
      color:row.querySelector('.tier-label-wrap')?.style.background||'#6b7280',
      items:[...row.querySelectorAll('.item')].map(i=>i.id)
    }));
    const pool=[...document.querySelectorAll('#item-pool .item')].map(i=>i.id);
    // The working cache carries its identity (which list it is, saved or new)
    // so a reload restores the exact working state and Save targets the right list.
    localStorage.setItem(cacheKey(),JSON.stringify({
      params,itemData,tiers,pool,idCounter,currentMode,manualSnapshot,imgShape,rowRanges,
      _listId:currentListId||null,_listTitle:currentListTitle||'New List',_dirty:listDirty,_shareToken:currentShareToken||null,_isPublic:currentListIsPublic,_savedMode:savedMode,_selectedItemId:selectedItemId||null,
      _serverUpdatedAt:loadedListSavedAt||null // v74 — baseline for the remote-change check
    }));
  }catch(e){}
}
function saveState(){
  markDirty();
  writeCache();
}

/* ── MODE ── */
// v79 — single entry point for "re-run whatever ranking this list uses".
// Several places re-rank after an edit; routing them through here means a new
// mode never has to be remembered at each call site.
function reRank(){
  if(currentMode==='auto'){runAutoRank();syncSnapshotRows();}
  else if(currentMode==='elo'){runEloRank();syncSnapshotRows();}
}
function setMode(m){
  // v98.0 — Elo is account-only (creator-side Elo needs the backend). An anon
  // user clicking Elo gets the account popup instead of an empty, dead panel.
  if(m==='elo'&&anonMode){openAnonAuth('elo');return;}
  if(m==='auto'&&!params.some(p=>p.type==='slider')){showFlash('⚠️ To access Auto-Rank, add at least one Slider parameter first!',{id:'need-slider'});return}
  // v79 — three modes. Switching to a ranked mode (Auto/Elo) stashes the
  // hand-made layout first, so switching back to Manual restores exactly what the
  // creator had rather than a computed arrangement they never chose.
  // v81.6 — CRITICAL: only capture the snapshot when leaving a *genuinely manual*
  // state. Previously it re-captured on every entry into a ranked mode, so
  // switching elo→auto (or auto→elo) snapshotted the COMPUTED arrangement as if
  // it were manual — corrupting Manual and risking a Manual save that overwrote
  // the real hand-made list with an Elo/Auto layout.
  if(currentMode==='manual'&&(m==='auto'||m==='elo')){manualSnapshot=snapshotLayout();}
  // v85.1 — FLASH FIX: when we kick off an ASYNC Elo load, the DOM still shows the
  // OLD mode's layout until that load resolves and repaints. If setMode writes the
  // cache now, it captures that stale layout under mode=elo, and every later reload
  // flashes the old arrangement before ch2hLoadPersonal corrects it. So in that
  // case we DON'T write here — ch2hLoadPersonal writes the cache itself, after it
  // paints the real Elo layout.
  let asyncEloLoad=false;
  if(m==='auto'){runAutoRank();}
  else if(m==='elo'){
    // v84.6 — kill the entry flash. Only clear creatorPersonal if it belongs to a
    // DIFFERENT list (genuinely stale). If it's for THIS list (e.g. Stop → switch
    // mode → come back), keep it so runEloRank paints the correct ranking at once.
    if(creatorPersonalListId!==currentListId)creatorPersonal=null;
    if(creatorPersonal&&creatorPersonal.mode==='head2head'){
      // In-memory ranking for this list: paint it immediately, no flash.
      runEloRank();
      if(currentListId)ch2hLoadPersonal();   // refresh in the background (same data)
    }else if(currentListId){
      // No valid in-memory ranking (fresh entry/refresh): the load is async and
      // repaints when it resolves. It also writes the cache after painting, so we
      // skip the stale write below.
      // v110 (#5) — paint the Elo layout SYNCHRONOUSLY first so the switch is instant.
      // Without this, the DOM kept showing the previous mode's pool-below layout until
      // the await resolved, then items jumped into the Unranked band (the flash). With
      // no in-memory ranking, runEloRank() puts every item in the Unranked band right
      // away — exactly the correct entry state — and ch2hLoadPersonal() refines it once
      // the fetch lands.
      runEloRank();
      asyncEloLoad=true;
      ch2hLoadPersonal();
    }else{
      runEloRank();   // brand-new unsaved list: nothing to load, paint Unranked
    }
  }
  else if(manualSnapshot)restoreSnapshot(manualSnapshot);   // -> manual: restore hand-made layout
  currentMode=m;applyModeUI();
  // v84.6 — switching mode now lights Save when it differs from the SAVED mode
  // (you must save for viewers to get the new mode); switching back to the saved
  // mode clears it (if no other edits). updateListBanner reads effDirty(), which
  // includes this mode drift, so just refresh it here. Still not a CONTENT edit, so
  // we don't call markDirty() — the cache write below stays clean.
  updateListBanner();
  // v85.1 — skip the write when an async Elo load will do it after it paints
  // (writing here would cache the pre-paint layout — the flash bug).
  if(!asyncEloLoad)writeCache();
}

// Sync the manual snapshot's ROW set/order to the current tiers without
// disturbing its stored item placement — used when rows are added/removed in
// Auto-Rank so those structural edits survive a switch back to Manual.
function syncSnapshotRows(){
  if(!manualSnapshot)return;
  const curRows=[...document.querySelectorAll('.tier-row')].map(r=>r.dataset.id);
  const prev={};(manualSnapshot.tiers||[]).forEach(t=>prev[t.id]=t.items);
  manualSnapshot.tiers=curRows.map(id=>({id,items:prev[id]||[]})); // new rows start empty
  manualSnapshot.rowOrder=curRows;
}
function snapshotLayout(){
  return{
    tiers:[...document.querySelectorAll('.tier-row')].map(row=>({id:row.dataset.id,items:[...row.querySelectorAll('.item')].map(i=>i.id)})),
    pool:[...document.querySelectorAll('#item-pool .item')].map(i=>i.id),
    rowOrder:[...document.querySelectorAll('.tier-row')].map(r=>r.dataset.id)
  };
}

function restoreSnapshot(snap){
  // v109 (#5) — same Elo-band cleanup as runAutoRank. Switching Elo -> Manual restores
  // the hand-made layout, but the leftover #elo-unranked-band (with #item-pool nested
  // inside it) would otherwise stay mid-list. Return the pool home and drop the band
  // shell before we repopulate.
  returnPoolHome();
  {const oldBand=document.getElementById('elo-unranked-band');if(oldBand)oldBand.remove();}
  const allEls={};document.querySelectorAll('.item').forEach(el=>allEls[el.id]=el);
  if(snap.rowOrder){const tl=document.getElementById('tierlist');snap.rowOrder.forEach(id=>{const row=document.querySelector(`.tier-row[data-id="${id}"]`);if(row)tl.appendChild(row);});}
  document.querySelectorAll('.tier-items').forEach(z=>z.innerHTML='');
  document.getElementById('item-pool').innerHTML='';
  const placed=new Set();
  snap.tiers.forEach(t=>{const zone=document.querySelector(`.tier-items[data-zone="${t.id}"]`);if(!zone)return;t.items.forEach(id=>{placed.add(id);const el=allEls[id]||rebuildItem(id);if(el)zone.appendChild(el);});});
  const pool=document.getElementById('item-pool');
  (snap.pool||[]).forEach(id=>{placed.add(id);const el=allEls[id]||rebuildItem(id);if(el)addToPool(el,pool);});
  Object.keys(itemData).forEach(id=>{if(!placed.has(id)){const el=allEls[id]||rebuildItem(id);if(el)addToPool(el,pool);}});
}

function rebuildItem(id){const d=itemData[id];if(!d)return null;return d.img?buildItemEl(id,'img',d.img):buildItemEl(id,'text',null,d.name||id);}

// v149 — Auto/Elo explanation banners: dismissible (✕), remembered per mode in this
// browser; the ⓘ on the active mode button brings the banner back.
function modeHintDismissed(m){try{return localStorage.getItem('tlf_mode_hint_off_'+m)==='1';}catch(e){return false;}}
function dismissModeHint(m){try{localStorage.setItem('tlf_mode_hint_off_'+m,'1');}catch(e){}applyModeHints();}
function showModeHint(m){try{localStorage.removeItem('tlf_mode_hint_off_'+m);}catch(e){}applyModeHints();}
function applyModeHints(){
  const isAuto=currentMode==='auto',isElo=currentMode==='elo';
  const aOn=isAuto&&!modeHintDismissed('auto'),eOn=isElo&&!modeHintDismissed('elo');
  document.getElementById('autorank-banner').classList.toggle('show',aOn);
  document.getElementById('elo-banner').classList.toggle('show',eOn);
  {const i=document.getElementById('mode-info-btn');if(i)i.classList.toggle('show',(isAuto&&!aOn)||(isElo&&!eOn));}
}
function applyModeUI(){
  const isAuto=currentMode==='auto';
  const isElo=currentMode==='elo';
  // v79 — "ranked" = the order is computed, not dragged. Auto-Rank computes it
  // from parameters, Elo from votes; either way manual dragging is off and the
  // per-row % ranges apply. Most of what used to key off isAuto really meant
  // this, which is why the distinction is drawn here once.
  const isRanked=isAuto||isElo;
  document.getElementById('mode-manual').classList.toggle('active',!isRanked);
  document.getElementById('mode-auto').classList.toggle('active',isAuto);
  document.getElementById('mode-elo').classList.toggle('active',isElo);
  applyModeHints(); // v149 — dismissible banners
  document.getElementById('sort-bar').style.display=isRanked?'none':'flex';
  document.getElementById('btn-add-row').style.display=''; // add-row available in both modes
  document.getElementById('pool-add-bar').style.display='flex';
  const pool=document.getElementById('item-pool');
  // v110 (#5) — in Elo mode #item-pool is re-parented into the mid-list Unranked band,
  // leaving #pool-home (the "🗂 Item Pool" title) as an empty shell below the list. Hide
  // that shell in Elo; show it in Manual/Auto where the pool lives in its home slot.
  {const poolHome=document.getElementById('pool-home');if(poolHome)poolHome.style.display=isElo?'none':'';}
  pool.ondragover=isRanked?null:onDragOver;pool.ondragleave=isRanked?null:onDragLeave;pool.ondrop=isRanked?null:e=>onDrop(e,'pool');
  // v131 — pool file-drop handled by the single editor overlay (see wireListDropOverlay)
  document.querySelectorAll('.tier-items').forEach(z=>{z.ondragover=isRanked?null:onDragOver;z.ondragleave=isRanked?null:onDragLeave;z.ondrop=isRanked?null:e=>onDrop(e,z.dataset.zone);});
  document.querySelectorAll('.item').forEach(el=>el.draggable=!isRanked);
  document.querySelectorAll('.tier-controls').forEach(c=>c.classList.remove('hidden')); // controls always visible now
  document.querySelectorAll('.tier-move-arrows').forEach(a=>a.classList.toggle('hidden',isRanked)); // arrows only in manual
  document.querySelectorAll('.tier-label-range').forEach(r=>r.classList.toggle('show',isRanked)); // Elo needs ranges too
  document.querySelectorAll('.tier-label').forEach(le=>{le.draggable=!isRanked;});
  if(selectedItemId)renderScoreDisplay(selectedItemId);
  updateVoteModeLine();   // v85.0 — always call; it self-clears the drift cue when there's no open session
  updateVoteExplain();    // v93 — keep the setup panel's mode text in sync with the current editor mode
  // v85.0 — re-evaluate the community-list mode gate when the editor mode changes,
  // so switching modes hides/shows it (and its note) without needing a fresh fetch.
  if(currentSession&&(currentSession.status==='open'||currentSession.status==='closed'))renderCreatorCommunity(currentSession,lastCreatorResults);
  updateCreatorH2H();   // v82 — creator's own voting section follows mode/session
}

/* ── AUTO RANK ── */
// Shrink a tier label's font size until it fits its fixed-width area.
function fitTierLabel(lt){
  if(!lt)return;
  // Fixed size matching the community tier list (.vt-label): always 1rem with
  // wrapping, so editor and community labels render identically.
  lt.style.fontSize='1rem';
}
function getRowRange(rowId){
  if(rowRanges[rowId])return rowRanges[rowId];
  const lt=document.querySelector(`.tier-row[data-id="${rowId}"] .tier-label-text`);
  if(lt){
    // v79.1 — an explicit range the creator set always wins. Only the FALLBACK
    // differs by mode, because an Elo percentage means something different from
    // an Auto-Rank one (see DEFAULT_ELO_TIERS).
    const table=currentMode==='elo'?DEFAULT_ELO_TIERS:DEFAULT_AUTO_TIERS;
    const at=table.find(t=>t.label===lt.textContent.trim());
    if(at)return{min:at.min,max:at.max};
  }
  return null;
}
// v79 — place items by their community Elo standing. Mirrors runAutoRank: same
// row ranges, same bucketing, same ordering — only the score differs. `pct` is
// the rating rescaled 0-100 by the results function, so it drops straight into
// the ranges a creator already set.
// Items nobody has voted on yet stay in the pool. Early in a vote that is most
// of them, which is correct: the list fills in as results arrive.
function runEloRank(){
  // v82 — the creator's editor list now reflects THEIR OWN votes, not the
  // community's. Community standings stay in the "Live community results" panel.
  // Items the creator hasn't voted on have no rating and stay in the pool, which
  // is what puts them in the Unranked band until they've been voted on.
  // tlf_elo_personal returns rating/matches but no pct (that normalisation is
  // per-session on the community side), so compute pct across the creator's own
  // spread here — same lowest=0 / highest=100 rule.
  const mine=(creatorPersonal&&creatorPersonal.mode==='head2head')?(creatorPersonal.items||{}):{};
  const res={};
  const ratings=Object.keys(mine).filter(k=>(mine[k].matches||0)>0).map(k=>mine[k].rating);
  if(ratings.length){
    const lo=Math.min(...ratings),hi=Math.max(...ratings);
    Object.keys(mine).forEach(k=>{
      if(!(mine[k].matches>0))return;              // unvoted -> stays in pool
      const r=mine[k].rating;
      // v83.5 — round pct to 1 decimal so the detail panels don't show a long
      // float (e.g. 66.66666%). This is a display value; bucketing still uses
      // threshold (never rounds UP), so 1-decimal rounding can't lift a tier.
      const rawPct=(hi>lo)?((r-lo)/(hi-lo)*100):50;
      res[k]={rating:r,matches:mine[k].matches,pct:Math.round(rawPct*10)/10};
    });
  }
  // v83.4 — remember these numbers so buildSaveData can persist them with the
  // list. This is the creator's own ranking (rating/matches/pct per voted item);
  // a viewer's creator-detail panel reads it back to show the Elo details.
  creatorEloRanking=res;
  const all=[...document.querySelectorAll('.item')];
  document.querySelectorAll('.tier-items').forEach(z=>z.innerHTML='');
  const poolEl=document.getElementById('item-pool');
  poolEl.innerHTML='';
  // v82.4 — the band is no longer a separate container. Unranked items live in
  // the REAL pool (#item-pool), so buildSaveData sees them and save/load can't
  // orphan them. In Elo mode the pool ELEMENT is re-parented into a band wrapper
  // in the middle of the list for display; otherwise it sits in its normal spot.
  // v82.4 — before rebuilding, move the pool back to its home so removing the
  // old band shell never takes the pool (and its items) with it.
  returnPoolHome();
  const oldBand=document.getElementById('elo-unranked-band');
  if(oldBand)oldBand.remove();
  sortRowsByRange();
  const zoneMap=[];
  document.querySelectorAll('.tier-row').forEach(row=>{const r=getRowRange(row.dataset.id);if(r)zoneMap.push({min:r.min,max:r.max,zone:row.querySelector('.tier-items')});});
  zoneMap.sort((a,b)=>b.min-a.min);
  const buckets=zoneMap.map(z=>({...z,els:[]}));
  const unranked=[];
  all.forEach(el=>{
    const r=res[el.id];
    if(!r||typeof r.pct!=='number'){unranked.push(el);return;}
    const bucket=pickTierBand(r.pct,buckets); // v79.1 — threshold, never rounds up
    if(bucket)bucket.els.push({el,score:r.rating||0});else unranked.push(el);
  });
  buckets.forEach(b=>{b.els.sort((x,y)=>y.score-x.score);b.els.forEach(({el})=>b.zone.appendChild(el));});
  // Unranked items go into the REAL pool.
  unranked.forEach(el=>addToPool(el,poolEl));
  if(unranked.length){
    const tl=document.getElementById('tierlist');
    const band=document.createElement('div');
    band.className='elo-unranked-band';band.id='elo-unranked-band';
    // v113 — stack the icon above the word (like the tier labels' column layout) so it
    // fits the 80px column cleanly instead of wrapping mid-word.
    const lbl=document.createElement('div');lbl.className='elo-unranked-label';
    lbl.innerHTML='<span class="elo-unranked-icon">⚖️</span><span>Unranked</span>';
    const slot=document.createElement('div');slot.className='elo-unranked-slot';
    slot.appendChild(poolEl);          // re-parent the real pool into the band
    // v114 — right spacer removed; the item area extends to the full right edge.
    band.appendChild(lbl);band.appendChild(slot);
    // v131 — Elo band file-drop handled by the single editor overlay
    const rows=tl.children;const mid=Math.ceil(rows.length/2);
    if(mid>=rows.length)tl.appendChild(band);else tl.insertBefore(band,rows[mid]);
  }else{
    returnPoolHome();                  // no unranked items -> pool back to its home
  }
}
// v82.4 — put #item-pool back in its normal place under the tier list.
function returnPoolHome(){
  const poolEl=document.getElementById('item-pool');
  const anchor=document.getElementById('pool-title-anchor');
  if(anchor&&poolEl&&poolEl.previousElementSibling!==anchor){
    anchor.parentNode.insertBefore(poolEl,anchor.nextSibling);
  }
}
function runAutoRank(){
  const sliders=params.filter(p=>p.type==='slider');if(!sliders.length)return;
  const maxScore=sliders.length*10;
  // v109 (#5) — clear any leftover Elo "Unranked" band. In Elo mode #item-pool is
  // re-parented INTO #elo-unranked-band mid-list; switching to Auto without undoing
  // that left the empty band shell (with the pool nested inside it) sitting above the
  // list. Return the pool to its home slot first, then remove the band shell — the
  // same cleanup runEloRank already does at its start.
  returnPoolHome();
  {const oldBand=document.getElementById('elo-unranked-band');if(oldBand)oldBand.remove();}
  const all=[...document.querySelectorAll('.item')];
  document.querySelectorAll('.tier-items').forEach(z=>z.innerHTML='');
  document.getElementById('item-pool').innerHTML='';
  sortRowsByRange();
  const zoneMap=[];
  document.querySelectorAll('.tier-row').forEach(row=>{const r=getRowRange(row.dataset.id);if(r)zoneMap.push({min:r.min,max:r.max,zone:row.querySelector('.tier-items')});});
  zoneMap.sort((a,b)=>b.min-a.min);
  const pool=document.getElementById('item-pool');
  const tierBuckets=zoneMap.map(z=>({...z,els:[]}));
  all.forEach(el=>{
    const pv=(itemData[el.id]||{}).paramValues||{};
    const hasAny=sliders.some(p=>pv[p.id]!==undefined&&pv[p.id]!=='');
    if(!hasAny){addToPool(el,pool);return;}
    const score=calcScore(el.id,sliders);
    const pct=maxScore>0?(score/maxScore)*100:0;
    const bucket=pickTierBand(pct,tierBuckets); // v79.1 — threshold, never rounds up
    if(bucket)bucket.els.push({el,score});else addToPool(el,pool);
  });
  tierBuckets.forEach(bucket=>{bucket.els.sort((a,b)=>b.score-a.score);bucket.els.forEach(({el})=>bucket.zone.appendChild(el));});
}
function sortRowsByRange(){
  const tl=document.getElementById('tierlist');
  const rows=[...tl.querySelectorAll('.tier-row')];
  const wr=[],wo=[];
  rows.forEach(row=>{const r=getRowRange(row.dataset.id);r?wr.push({row,min:r.min}):wo.push(row);});
  wr.sort((a,b)=>b.min-a.min);
  [...wr.map(x=>x.row),...wo].forEach(row=>tl.appendChild(row));
}
function calcScore(id,sliders){
  sliders=sliders||params.filter(p=>p.type==='slider');
  const pv=(itemData[id]||{}).paramValues||{};
  return sliders.reduce((s,p)=>{const v=parseFloat(pv[p.id]||0);return s+(isNaN(v)?0:Math.min(10,Math.max(1,v)));},0);
}
function getMaxScore(){return params.filter(p=>p.type==='slider').length*10}

/* ── ROWS ── */
// Button entry point: add a row, and in Auto-Rank open its range editor so the
// creator sets the percentages the new (range-less) row needs to receive items.
function addRowFromButton(){
  const row=addRow();
  if(isRankedMode()){ // v79 — Elo needs the same treatment as Auto-Rank
    applyModeUI();                       // hide the new row's sort arrows in ranked modes
    if(row){
      syncSnapshotRows();                 // keep this row's visible position for Manual (option a)
      const rowId=row.dataset.id;
      const lw=row.querySelector('.tier-label-wrap');
      setTimeout(()=>{toggleColorPicker(rowId,lw);
        const cp=document.getElementById('cp-'+rowId);
        const minI=cp&&cp.querySelector('.range-inp');
        if(minI)minI.focus();
      },30);
      showFlash('➕ New tier added — set its % range so items can land here');
    }
  }
  saveState();
}
function addRow(label='New',color='#6b7280',items=[],existingId=null){
  const tl=document.getElementById('tierlist');
  const rowId=existingId||uid();
  const row=document.createElement('div');row.className='tier-row';row.dataset.id=rowId;
  row.ondragover=e=>{if(!dragRowSrc||dragRowSrc===row)return;e.preventDefault();e.stopPropagation();const rect=row.getBoundingClientRect(),mid=rect.top+rect.height/2;document.querySelectorAll('.tier-row').forEach(r=>r.classList.remove('row-drag-over-top','row-drag-over-bottom'));row.classList.add(e.clientY<mid?'row-drag-over-top':'row-drag-over-bottom');};
  row.ondragleave=e=>{if(!row.contains(e.relatedTarget))row.classList.remove('row-drag-over-top','row-drag-over-bottom')};
  row.ondrop=e=>{if(!dragRowSrc||dragRowSrc===row)return;e.preventDefault();e.stopPropagation();const isTop=row.classList.contains('row-drag-over-top');row.classList.remove('row-drag-over-top','row-drag-over-bottom');isTop?tl.insertBefore(dragRowSrc,row):row.after(dragRowSrc);saveState();};

  const lw=document.createElement('div');lw.className='tier-label-wrap';lw.style.background=color;
  const le=document.createElement('div');le.className='tier-label';
  le.draggable=!isRankedMode(); // v79
  le.ondragstart=e=>{if(isRankedMode())return; // v79
    dragRowSrc=row;e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text/plain','row');e.stopPropagation();setTimeout(()=>row.style.opacity='.4',0);};
  le.ondragend=()=>{row.style.opacity='';dragRowSrc=null;document.querySelectorAll('.tier-row').forEach(r=>r.classList.remove('row-drag-over-top','row-drag-over-bottom'))};

  const lt=document.createElement('span');lt.className='tier-label-text';lt.textContent=label;fitTierLabel(lt);
  const lr=document.createElement('span');lr.className='tier-label-range';
  const at=DEFAULT_AUTO_TIERS.find(t=>t.label===label);
  function updateRangeLabel(){const r=rowRanges[rowId]||(at?{min:at.min,max:at.max}:null);lr.textContent=r?r.min+'–'+r.max+'%':'—';}
  updateRangeLabel();
  if(isRankedMode())lr.classList.add('show'); // v79 — Elo uses ranges too
  le.appendChild(lt);le.appendChild(lr);lw.appendChild(le);

  const popup=document.createElement('div');popup.className='color-popup';popup.id='cp-'+rowId;
  const renameRow=document.createElement('div');renameRow.className='popup-rename-row';
  const ri=document.createElement('input');ri.className='popup-rename-input';ri.placeholder='Tier name...';ri.value=label;ri.maxLength=24;
  ri.oninput=e=>{lt.textContent=e.target.value;fitTierLabel(lt);saveState()};ri.onclick=e=>e.stopPropagation();
  const rcheck=document.createElement('button');rcheck.className='popup-rename-confirm';rcheck.textContent='✓';rcheck.title='Confirm';
  rcheck.onmousedown=e=>e.preventDefault();
  rcheck.onclick=e=>{e.stopPropagation();ri.blur();flashConfirm(rcheck);const cp=document.getElementById('cp-'+rowId);if(cp)cp.classList.remove('show');showFlash('✓ Tier renamed');};
  ri.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();e.stopPropagation();ri.blur();flashConfirm(rcheck);const cp=document.getElementById('cp-'+rowId);if(cp)cp.classList.remove('show');showFlash('✓ Tier renamed');}};
  renameRow.appendChild(ri);renameRow.appendChild(rcheck);
  popup.appendChild(renameRow);
  const cw=document.createElement('div');cw.className='popup-colors';
  COLORS.forEach(c=>{const sw=document.createElement('div');sw.className='color-swatch';sw.style.background=c;sw.onclick=e=>{e.stopPropagation();setRowColor(rowId,c);};cw.appendChild(sw);});
  popup.appendChild(cw);
  const cr=document.createElement('div');cr.className='popup-custom-row';
  const ci=document.createElement('input');ci.type='color';ci.value=color;ci.style.cssText='width:24px;height:24px;border-radius:5px;border:none;cursor:pointer;padding:0';
  ci.oninput=e=>setRowColor(rowId,e.target.value);ci.onclick=e=>e.stopPropagation();
  cr.appendChild(ci);cr.appendChild(Object.assign(document.createElement('span'),{textContent:'Custom color'}));popup.appendChild(cr);
  const rr=document.createElement('div');rr.className='popup-range-row';
  if(!isRankedMode())rr.classList.add('hidden'); // v79
  const rLabel=document.createElement('label');rLabel.textContent='% Range:';
  const curR=rowRanges[rowId]||(at?{min:at.min,max:at.max}:{min:'',max:''});
  const minI=document.createElement('input');minI.className='range-inp';minI.type='number';minI.min=0;minI.max=100;minI.value=curR.min;minI.placeholder='min';
  const rSep=document.createElement('span');rSep.className='range-sep';rSep.textContent='–';
  const maxI=document.createElement('input');maxI.className='range-inp';maxI.type='number';maxI.min=0;maxI.max=100;maxI.value=curR.max;maxI.placeholder='max';
  [minI,maxI].forEach(inp=>{inp.onclick=e=>e.stopPropagation();inp.ondragstart=e=>e.stopPropagation();});
  const applyR=document.createElement('button');applyR.className='popup-range-apply';applyR.textContent='✓ Apply';
  applyR.onclick=e=>{e.stopPropagation();const mn=parseInt(minI.value),mx=parseInt(maxI.value);if(!isNaN(mn)&&!isNaN(mx)){rowRanges[rowId]={min:Math.min(mn,mx),max:Math.max(mn,mx)};updateRangeLabel();}reRank();saveState();closeAllPopups();}; // v79
  // Enter in either range field applies the range (same as the Apply button).
  [minI,maxI].forEach(inp=>{inp.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();e.stopPropagation();applyR.onclick(e);}};});
  rr.appendChild(rLabel);rr.appendChild(minI);rr.appendChild(rSep);rr.appendChild(maxI);rr.appendChild(applyR);
  popup.appendChild(rr);
  // v69 — delete-tier button (phone-only via .popup-delete-row class). On phone
  // the row-level ✕ control is hidden, so this is the way to remove a tier.
  // Routed through the styled confirm modal since deletion is destructive.
  const delRow=document.createElement('div');delRow.className='popup-delete-row';
  const delBtn=document.createElement('button');delBtn.className='popup-delete-btn';delBtn.textContent='🗑 Delete tier';
  delBtn.onclick=async e=>{
    e.stopPropagation();
    const row=document.querySelector('.tier-row[data-id="'+rowId+'"]');
    if(!row)return;
    if(!await tlfConfirm({title:'Delete this tier?',message:'The tier row is removed and any items in it move back to the pool.',confirmText:'Delete tier',danger:true}))return;
    deleteRow(row,rowId);
    reRank();
    saveState();closeAllPopups();
  };
  delRow.appendChild(delBtn);popup.appendChild(delRow);
  document.body.appendChild(popup);
  lw.onclick=e=>{e.stopPropagation();toggleColorPicker(rowId,lw);};

  const zone=document.createElement('div');zone.className='tier-items';zone.dataset.zone=rowId;
  if(!isRankedMode()){zone.ondragover=onDragOver;zone.ondragleave=onDragLeave;zone.ondrop=e=>onDrop(e,rowId);} // v79
  zone.onclick=e=>{if(e.target===zone)deselectItem();};
  items.forEach(txt=>zone.appendChild(makeTextItem(txt)));

  const ctrl=document.createElement('div');ctrl.className='tier-controls';
  // Sort arrows live in their own group so they can hide in Auto-Rank (rows
  // self-order by percentage) while the delete button stays available.
  const arrows=document.createElement('span');arrows.className='tier-move-arrows';
  arrows.appendChild(mkBtn('↑',()=>{moveRow(row,-1);saveState()}));
  arrows.appendChild(mkBtn('↓',()=>{moveRow(row,1);saveState()}));
  ctrl.appendChild(arrows);
  ctrl.appendChild(mkBtn('✕',()=>{deleteRow(row,rowId);reRank();saveState()},'del'));
  row.appendChild(lw);row.appendChild(zone);row.appendChild(ctrl);
  tl.appendChild(row);
  return row;
}

function mkBtn(icon,fn,cls=''){const b=document.createElement('button');b.className='tier-ctrl-btn '+cls;b.textContent=icon;b.onclick=fn;return b}
function setRowColor(rowId,c){const row=document.querySelector(`.tier-row[data-id="${rowId}"]`);if(row){row.querySelector('.tier-label-wrap').style.background=c;saveState();}}
function closeAllPopups(){document.querySelectorAll('.color-popup').forEach(p=>p.classList.remove('show'))}
function toggleColorPicker(rowId,lw){
  const wasOpen=document.getElementById('cp-'+rowId)?.classList.contains('show');
  closeAllPopups();if(wasOpen)return;
  const popup=document.getElementById('cp-'+rowId);if(!popup)return;
  popup.querySelectorAll('.popup-range-row').forEach(rr=>rr.classList.toggle('hidden',!isRankedMode())); // v79
  popup.classList.add('show');
  const rect=lw.getBoundingClientRect();
  let left=rect.right+6,top=rect.top;
  const popW=210,popH=isRankedMode()?300:240; // v79
  if(left+popW>window.innerWidth)left=rect.left-popW-6;
  if(top+popH>window.innerHeight)top=window.innerHeight-popH-8;
  popup.style.left=Math.max(4,left)+'px';popup.style.top=Math.max(4,top)+'px';
  setTimeout(()=>popup.querySelector('.popup-rename-input')?.focus(),50);
}
const POPUP_SAFE_SEL='.color-popup,.tier-label-wrap';
let popupMouseDownInside=false;
document.addEventListener('mousedown',e=>{popupMouseDownInside=!!e.target.closest(POPUP_SAFE_SEL);},true);
document.addEventListener('click',e=>{
  if(popupMouseDownInside){popupMouseDownInside=false;return;}
  if(!e.target.closest(POPUP_SAFE_SEL))closeAllPopups();
});
// Track where a click gesture STARTS, so a text-selection drag that begins
// inside the detail panel/item and releases outside doesn't close the panel.
// v111 (creator-B) — added .creator-community-head so clicking the community panel's
// Hide/Show, blur (🙈) and Download buttons no longer triggers the global deselect,
// which was closing any open row-1 detail panel. The list itself
// (#creator-community-tierlist) was already protected; its header buttons were not.
const PROTECTED_SEL='.item,#detail-panel,#cc-side,#creator-community-tierlist,.creator-community-head,#qr-panel,.qr-controls,.share-collapse-tab,#share-sticky-wrap,.color-popup,.modal-overlay,#auth-screen,.my-lists-overlay,.shape-bar,.vt-item,.viewer-item,.vote-pool-item,#vp-slot,#vc-slot,#vk-slot,#present-stage,.present-btn'; // v136/v145 — voting/viewer cells + presentation are protected, so clicks don't clear the arrow-nav selection
let mouseDownInProtected=false;
document.addEventListener('mousedown',e=>{mouseDownInProtected=!!e.target.closest(PROTECTED_SEL);},true);
document.addEventListener('click',e=>{
  // If any modal/overlay is currently open, never deselect (prevents the detail
  // panel from closing behind an open param manager when its buttons re-render).
  if(document.querySelector('.modal-overlay.show, .admin-overlay.show, .my-lists-overlay.show'))return;
  // v98.9 — CLOSE THE COMMUNITY DETAIL first, before the mouseDownInProtected
  // early-return below. #creator-community-tierlist is in PROTECTED_SEL, so a click
  // starting there set mouseDownInProtected and bailed before this ran — that's why
  // clicking the community list never closed the panel. Close it on any click that's
  // outside the panel and not on a community item (an item click switches it).
  // v112 (#2b) — also skip when the click is inside the QR/share column: expanding or
  // resizing the QR (collapse arrow, S/M/L buttons, QR controls) must NOT close an open
  // community detail. Those controls live in #share-sticky-wrap.
  if(ccSideItemId&&!e.target.closest('#cc-side')&&!e.target.closest('#creator-community-tierlist .vt-item')&&!e.target.closest('#share-sticky-wrap')){
    hideCcSide();
  }
  // Only deselect when the gesture both started and ended outside protected areas.
  if(mouseDownInProtected){mouseDownInProtected=false;return;}
  if(!e.target.closest(PROTECTED_SEL))deselectItem();
});
function moveRow(row,dir){const tl=document.getElementById('tierlist'),rows=[...tl.children],idx=rows.indexOf(row);const t=rows[idx+dir];if(!t)return;dir===-1?tl.insertBefore(row,t):tl.insertBefore(t,row);}
function deleteRow(row,rowId){const pool=document.getElementById('item-pool');row.querySelectorAll('.item').forEach(it=>addToPool(it,pool));const popup=document.getElementById('cp-'+rowId);if(popup)popup.remove();delete rowRanges[rowId];row.remove();}

/* ── ITEMS ── */
// v98.2 — limits are now DEFAULTS/fallbacks. loadAppConfig() (called at boot)
// overwrites them from the server's tlf_app_config() so numbers tuned in
// quota-tuning.sql apply without a frontend release. They stay 'let' for that
// reason. If the config read fails, these values are what the app uses.
let MAX_ITEMS=50, MAX_PARAMS=5, MAX_LISTS=3;
let MAX_STORAGE_MB=100;          // total image storage per account (server-enforced)
let MAX_ITEMS_ANON=25;           // smaller "try it out" cap for anonymous users
// The effective item cap depends on whether we're in the anonymous flow.
function itemCap(){return anonMode?MAX_ITEMS_ANON:MAX_ITEMS;}
function itemCount(){return Object.keys(itemData).filter(id=>!itemData[id]?.example).length;}
function makeTextItem(text){const id=uid();itemData[id]={name:text,img:null,paramValues:{}};return buildItemEl(id,'text',null,text)}
function makeImageItem(src){const id=uid();itemData[id]={name:'',img:src,paramValues:{}};return buildItemEl(id,'img',src)}
// v84.0 — after the user ADDS an item, an Elo list must repaint so the item lands
// in the Unranked band right away (previously it only appeared after the next vote
// re-ran runEloRank). Only for user-initiated adds — NOT the bulk restore loops,
// which paint once at the end. Other modes place items directly, so no-op there.
function afterItemAdded(){if(currentMode==='elo')runEloRank();}

function deleteItemPermanently(id){
  // Note: we intentionally do NOT delete the Storage file here. With account-wide
  // dedup, the same file may be referenced by other items or lists. The scheduled
  // cleanup job removes files that are truly unreferenced.
  delete itemData[id];
}

function textParams(){return params.filter(p=>p.type==='text')}
function refreshDot(id,el){
  el=el||document.getElementById(id);if(!el)return;
  const tp=textParams();if(!tp.length){el.classList.remove('incomplete');return}
  const pv=(itemData[id]||{}).paramValues||{};
  el.classList.toggle('incomplete',tp.some(p=>!pv[p.id]||pv[p.id].trim()===''));
}
function refreshAllDots(){document.querySelectorAll('.item').forEach(el=>refreshDot(el.id,el))}

function buildItemEl(id,type,src,text){
  const d=itemData[id]||{};
  const el=document.createElement('div');el.id=id;el.draggable=!isRankedMode(); // v79
  el.onclick=e=>{e.stopPropagation();if(selectedItemId===id){deselectItem();}else{selectItem(id);}}; // v120 — click again to deselect + close panel
  el.ondragstart=e=>{if(dragRowSrc){e.stopPropagation();return;}onDragStart(e,el)};
  el.ondragend=onDragEnd;
  el.ondragover=e=>{e.preventDefault();e.stopPropagation();if(!dragSrc||dragRowSrc)return;markDropPoint(el)};
  el.ondragleave=()=>clearDropPoint(el);
  el.ondrop=e=>{e.preventDefault();e.stopPropagation();clearDropPoint(el);if(!dragSrc||dragRowSrc)return;if(dragSrc===el)return;el.parentNode.insertBefore(dragSrc,el);}; // v97.8 — dropping on itself stays in place; v78.2 dragend saves
  if(type==='img'||d.img){el.className='item img-item';const img=document.createElement('img');img.src=src||d.img||'';img.draggable=false;el.appendChild(img);}
  else{el.className='item text-item';const span=document.createElement('span');span.textContent=text||d.name||'';el.appendChild(span);}
  const btn=document.createElement('button');btn.className='item-action-btn';btn.textContent='×';
  btn.onclick=e=>{
    e.stopPropagation();
    const isExample=!!(itemData[id]&&itemData[id].example);
    if(isExample){
      // Onboarding example: delete outright (never send to pool) and stop them
      // reappearing on future loads.
      if(selectedItemId===id)deselectItem();
      el.remove();deleteItemPermanently(id);
      saveState();return;
    }
    const inPool=!!el.closest('#item-pool');
    if(inPool){if(selectedItemId===id)deselectItem();el.remove();deleteItemPermanently(id);}
    else{if(selectedItemId===id)deselectItem();clearAutoRankScore(id);addToPool(el);} // v72
    saveState();
  };
  el.appendChild(btn);
  refreshDot(id,el);return el;
}

// v72 — in Auto-Rank an item pooled BY THE USER must lose its ranking. Without
// this, runAutoRank() (which rebuilds the whole board on any slider change) sees
// the still-stored paramValues and pulls the item straight back into a tier —
// dragging every previously pooled item back at once. Deliberately NOT inside
// addToPool(): runAutoRank() and saved-state loading call that too, and clearing
// there would erase ratings for items merely parked in the pool by the ranker.
function clearAutoRankScore(id){
  if(currentMode!=='auto')return;
  const pv=(itemData[id]||{}).paramValues;if(!pv)return;
  params.filter(p=>p.type==='slider').forEach(p=>{delete pv[p.id];});
  refreshDot(id);
}
function addToPool(el,pool){
  pool=pool||document.getElementById('item-pool');
  if(el.classList.contains('text-item')){pool.appendChild(el);}
  else{const ft=pool.querySelector('.text-item');ft?pool.insertBefore(el,ft):pool.appendChild(el);}
}

/* ── DETAIL ── */
// v74 — must stay byte-identical to the CSS condition above, or the styles and
// the behaviour they belong with (bottom sheet, share drawer) disagree.
const PHONE_MQ='(max-width:640px), (max-height:600px) and (orientation:landscape) and (pointer:coarse)';
function isPhone(){return window.matchMedia(PHONE_MQ).matches;}

// v75 — how items get PLACED is a question about the input device, not the
// screen width, so it is tracked separately from isPhone(). Dragging is the
// desktop method and it simply does not work in some mobile browsers, so every
// touch device needs a tap-to-place route.
//   • sheet      — phones (either orientation) and tablets in portrait
//   • side panel — tablets in landscape, which have the width for it
//   • neither    — mouse-driven desktop, unchanged (drag still works everywhere
//                  it worked before; this is additive)
// The side-panel test needs all three parts: landscape alone would catch a
// landscape phone (~400px tall, hence min-height) and min-width keeps a large
// phone from qualifying.
const SIDE_PANEL_MQ='(pointer:coarse) and (orientation:landscape) and (min-height:600px) and (min-width:900px)';
function isTouch(){return window.matchMedia('(pointer:coarse)').matches;}
function useSidePanelPlacement(){return window.matchMedia(SIDE_PANEL_MQ).matches;}
function useSheetPlacement(){return isTouch()&&!useSidePanelPlacement();}
// v70 — body scroll lock for phone overlays. Reference-counted so closing one
// overlay doesn't unlock while another is still open (e.g. tapping a community
// item from inside the drawer). Stops the page behind from scrolling at all,
// including at the overlay's own scroll top/bottom.
let tlfScrollLocks=0;
function lockBodyScroll(){
  tlfScrollLocks++;
  if(tlfScrollLocks===1)document.body.classList.add('tlf-scroll-lock');
}
function unlockBodyScroll(){
  tlfScrollLocks=Math.max(0,tlfScrollLocks-1);
  if(tlfScrollLocks===0)document.body.classList.remove('tlf-scroll-lock');
}
function forceUnlockBodyScroll(){tlfScrollLocks=0;document.body.classList.remove('tlf-scroll-lock');}
// v72 (Stage 3) — the sheet and share drawer already lock the page; the remaining
// overlays did not, so the background scrolled behind them. Rather than editing
// every open/close path, derive the lock from whether any overlay carries .show.
// Phone-only: background scrolling behind a DESKTOP modal is existing behaviour.
(function initOverlayScrollLock(){
  const IDS=['param-modal','text-modal','report-modal','viewer-item-modal',
             'tlf-confirm-modal','my-lists-overlay','admin-overlay','account-overlay','delete-account-overlay','partners-overlay'];
  let held=false;
  const sync=()=>{
    const anyOpen=isPhone()&&IDS.some(id=>document.getElementById(id)?.classList.contains('show'));
    if(anyOpen&&!held){lockBodyScroll();held=true;}
    else if(!anyOpen&&held){unlockBodyScroll();held=false;}
  };
  const attach=()=>{
    const obs=new MutationObserver(sync);
    IDS.forEach(id=>{const el=document.getElementById(id);
      if(el)obs.observe(el,{attributes:true,attributeFilter:['class']});});
    window.addEventListener('resize',sync);
    sync();
  };
  if(document.readyState!=='loading')attach();else document.addEventListener('DOMContentLoaded',attach);
})();
function toggleBurger(){const m=document.getElementById('burger-menu');if(m)m.classList.toggle('show');}
function closeBurger(){const m=document.getElementById('burger-menu');if(m)m.classList.remove('show');}
// Close the burger when tapping outside it.
document.addEventListener('click',e=>{
  const m=document.getElementById('burger-menu');const b=document.getElementById('burger-btn');
  if(m&&m.classList.contains('show')&&!e.target.closest('#burger-menu')&&!e.target.closest('#burger-btn'))m.classList.remove('show');
},true);
window.addEventListener('resize',()=>{if(!isPhone()){const s=document.getElementById('item-sheet');if(s&&s.classList.contains('show'))closeItemSheet();const dr=document.getElementById('share-drawer');if(dr&&dr.classList.contains('show'))closeShareDrawer();}
  // v75 — rotating a tablet moves it between sheet and side-panel placement;
  // re-render so the tier buttons appear or disappear to match.
  if(selectedItemId)renderDetailTiers(selectedItemId);
}); // v68: also close share drawer when leaving phone width
function selectItem(id){
  if(selectedItemId)document.getElementById(selectedItemId)?.classList.remove('selected');
  selectedItemId=id;document.getElementById(id)?.classList.add('selected');
  setLastNav('editor',null,id); // v120 item 5 — this is now the last-selected item
  // v75 — was isPhone(). Tablets are touch devices too and cannot rely on drag,
  // so they now take the sheet in portrait; in landscape they fall through to
  // the side panel below, which grows tier buttons for the same purpose.
  if(useSheetPlacement()){openItemSheet(id);writeCache();return;}
  showDetailPanel();refreshDetailImage(id);
  document.getElementById('detail-name').value=itemData[id]?.name||'';
  renderDetailParams(id);renderScoreDisplay(id);
  renderDetailTiers(id); // v75 — tier buttons + delete, touch-landscape only
  setTimeout(()=>{const sel=document.getElementById(id);if(sel)sel.scrollIntoView({behavior:'smooth',block:'nearest',inline:'nearest'});},320);
  writeCache(); // persist selection so the detail panel reopens on reload
}

// ── Mobile creator bottom sheet ─────────────────────────────────────────────
let sheetItemId=null;
function itemIsInPool(id){return !!document.querySelector('#item-pool #'+CSS.escape(id));}
function nextPoolItemAfter(id){
  const pool=[...document.querySelectorAll('#item-pool .item')].map(el=>el.id);
  if(!pool.length)return null;
  const idx=pool.indexOf(id);
  // next still-pooled item after this one; wrap; exclude the current id
  for(let k=1;k<=pool.length;k++){const cand=pool[(Math.max(0,idx)+k)%pool.length];if(cand!==id)return cand;}
  return null;
}
// v99.4 — the sheet slides up from the bottom via transform:translateY(100%)->0.
// But .show flips display:none->block AND translateY in the SAME frame, and a CSS
// transition can't run from a display:none start state — so the browser jumped
// straight to the end position (looked like a pop/fade, no slide). Fix: if the
// sheet is currently hidden, make it displayed at translateY(100%) first, force a
// reflow, THEN add .show on the next frame so the transition has a start state to
// animate from. If it's already open (re-populating for a new item), just keep it.
function revealItemSheet(sheet){
  if(sheet.classList.contains('show')){sheet.setAttribute('aria-hidden','false');return;}
  sheet.style.display='block';           // render it (still at translateY(100%) from base rule)
  sheet.style.transform='translateY(100%)';
  void sheet.offsetHeight;               // force reflow so the start state is committed
  requestAnimationFrame(()=>{
    sheet.style.transform='';            // let the .show rule's translateY(0) drive the slide
    sheet.classList.add('show');
    sheet.setAttribute('aria-hidden','false');
  });
}
function openItemSheet(id){
  // v70 — auto-advance re-opens the sheet without closing it; capture whether a
  // sheet is already showing so the scroll lock isn't counted twice.
  const sheetWasOpen=document.getElementById('item-sheet')?.classList.contains('show');
  sheetItemId=id;
  const it=itemData[id]||{};
  // image / title — follow the list's shape; never leak the internal id.
  const imgWrap=document.getElementById('item-sheet-img');imgWrap.innerHTML='';
  const el=document.getElementById(id);
  const imgEl=el&&el.querySelector('img');
  const round=(imgShape==='round');
  const contain=(imgShape==='nocrop');
  const ar=(imgShape==='portrait')?(285/399):(imgShape==='landscape'||imgShape==='nocrop')?(120/80):1;
  imgWrap.classList.remove('tappable');imgWrap.onclick=null;
  if(imgEl){
    const im=document.createElement('img');im.src=imgEl.src;im.draggable=false;
    im.style.width='100%';im.style.height='100%';
    im.style.objectFit=contain?'contain':'cover';
    im.style.borderRadius=round?'50%':'10px';
    imgWrap.appendChild(im);
    imgWrap.classList.add('tappable');
    imgWrap.onclick=()=>openSheetImg(imgEl.src,round,contain,ar); // tap to enlarge
  }else{
    // v71 — a text item's content IS its name, which is already shown below the
    // image slot. The old 2-letter placeholder tile just repeated it, so hide
    // the image area entirely for items with no image.
    imgWrap.style.display='none';
  }
  // Restore the slot for image items (the sheet element is reused between opens).
  if(imgEl)imgWrap.style.display='';
  // Aspect ratio for the sheet thumbnail wrapper.
  imgWrap.style.aspectRatio=ar;
  {const tr=document.getElementById('item-sheet-trash');if(tr)tr.style.display='';} // v72 — editable sheet
  document.getElementById('item-sheet-title').textContent=it.name||''; // never the id
  // v68: no name -> center the image (hide empty title, center head).
  {const head=document.querySelector('#item-sheet .item-sheet-head');if(head)head.classList.toggle('noname',!(it.name||'').trim());}

  // Manual mode -> tier buttons (primary action). Auto mode -> no buttons.
  const tiersWrap=document.getElementById('item-sheet-tiers');
  const btnWrap=document.getElementById('item-sheet-tier-btns');
  btnWrap.innerHTML='';
  if(!isRankedMode()){ // v79 — no manual placement in Auto-Rank or Elo
    tiersWrap.style.display='';
    document.querySelectorAll('.tier-row').forEach(row=>{
      const tid=row.dataset.id;
      const label=row.querySelector('.tier-label-text')?.textContent.trim()||'';
      const color=row.querySelector('.tier-label-wrap')?.style.background||'#2d2d44';
      const b=document.createElement('button');b.className='item-sheet-tier-btn';
      b.textContent=label||'—';b.style.background=color;
      b.onclick=()=>placeFromSheet(tid);
      btnWrap.appendChild(b);
    });
  }else{
    tiersWrap.style.display='none';
  }

  // Body: name field + params + score, reusing the existing detail renderers by
  // pointing them at cloned targets would be heavy — instead show a compact,
  // read-through summary with an editable name and the param inputs.
  buildSheetBody(id);

  // v69 — Auto-Rank (parameter) mode has no tier buttons, so give the sheet a
  // Confirm action that advances through the pool just like the manual flow.
  if(currentMode==='auto'){
    const body=document.getElementById('item-sheet-body');
    const wasPooled=itemIsInPool(id);
    const act=document.createElement('button');
    act.className='btn btn-primary item-sheet-confirm-btn';
    act.textContent=wasPooled?'✓ Confirm & Next':'✓ Done';
    act.onclick=()=>confirmFromSheet(wasPooled); // v71 — pooled state as of sheet OPEN
    body.appendChild(act);
  }

  const sheet=document.getElementById('item-sheet');
  revealItemSheet(sheet); // v99.4 — two-step reveal so the bottom-slide actually animates
  // v96.1 — PHONE: no backdrop, no scroll-lock, so the board scrolls behind the
  // sheet just like the viewer-side detail sheet (vc-slot uses neither, which is
  // why it already scrolls). Desktop keeps the modal backdrop + freeze. Because
  // #item-sheet is one reused element, it can't stack with itself, so scrolling
  // to another item and tapping it just re-populates THIS sheet — no overlap.
  if(!isPhone()){
    document.getElementById('item-sheet-backdrop').classList.add('show');
    if(!sheetWasOpen)lockBodyScroll(); // v70 — freeze the page behind the sheet (desktop only now)
  }else{
    document.getElementById('item-sheet-backdrop').classList.remove('show');
  }
}
function buildSheetBody(id){
  const body=document.getElementById('item-sheet-body');body.innerHTML='';
  // Editable name
  const nameLbl=document.createElement('div');nameLbl.className='detail-name-label';nameLbl.textContent='Name';
  const nameInp=document.createElement('input');nameInp.className='detail-name-input';nameInp.value=itemData[id]?.name||'';
  nameInp.oninput=()=>{
    itemData[id]=itemData[id]||{};itemData[id].name=nameInp.value;
    const t=document.getElementById('item-sheet-title');if(t)t.textContent=nameInp.value||id;
    // v70 — .noname hides the title element entirely; without retoggling it here
    // a name typed into a previously-unnamed item stayed invisible until reopen.
    const head=document.querySelector('#item-sheet .item-sheet-head');
    if(head)head.classList.toggle('noname',!nameInp.value.trim());
    saveState();
  };
  nameInp.onkeydown=(e)=>{if(e.key==='Enter'){e.preventDefault();nameInp.blur();}}; // v68: dismiss mobile keyboard
  body.appendChild(nameLbl);body.appendChild(nameInp);
  // Params (slider/text) — reuse renderDetailParams by temporarily retargeting.
  const holder=document.createElement('div');holder.id='item-sheet-params';body.appendChild(holder);
  renderDetailParams(id,holder);
  // v79.2 — the sheet never showed a score in ANY mode. Auto-Rank hid it well
  // (the sliders you are editing imply the total), but an Elo item has no
  // parameters at all, so the sheet was a name box and nothing else.
  // Uses the creator's own list data, and the community standings when this is
  // an Elo list — that IS the item's score there.
  const d={itemData,params,tiers:[],rowRanges};
  const res=(currentMode==='elo')?lastCreatorResults:null;
  const si=detailScoreInfo(id,d,res);
  if(si.show)body.appendChild(buildScoreDisplay(si));
}
// v69 — Auto-Rank confirm: item stays where the auto-ranker placed it (score
// drives its row), so "confirm" just means "I'm done with this one" — save and
// advance to the next pooled item, mirroring placeFromSheet's advance logic.
function confirmFromSheet(wasPooledAtOpen){
  const id=sheetItemId;if(!id)return;
  // v71 — the pooled state MUST come from when the sheet opened. Touching a
  // slider fires runAutoRank(), which places the item and removes it from the
  // pool, so re-reading it here always returned false and the advance never ran.
  const wasPooled=(wasPooledAtOpen===undefined)?itemIsInPool(id):wasPooledAtOpen;
  // v71 — sliders render at 1/10 by default but paramValues stays unset until
  // touched, and runAutoRank only places items that have a value. Commit the
  // displayed default so confirming without touching anything still places the
  // item (at 1 per slider) instead of silently leaving it in the pool.
  if(currentMode==='auto'){
    const sliders=params.filter(p=>p.type==='slider');
    if(sliders.length){
      itemData[id]=itemData[id]||{};
      itemData[id].paramValues=itemData[id].paramValues||{};
      const pv=itemData[id].paramValues;
      sliders.forEach(p=>{if(pv[p.id]===undefined||pv[p.id]==='')pv[p.id]='1';});
    }
    runAutoRank();syncSnapshotRows();
  }
  saveState();
  if(wasPooled){
    const nxt=nextPoolItemAfter(id);
    if(nxt){openItemSheet(nxt);}
    else{closeItemSheet();showFlash('✅ All items placed!');}
  }else{
    closeItemSheet();
  }
}
// v75 — build the side panel's tier buttons. Mirrors the sheet's row, and is a
// no-op in every mode except touch-landscape, so it is safe to call from
// selectItem() unconditionally.
function renderDetailTiers(id){
  const wrap=document.getElementById('detail-tiers');
  const btns=document.getElementById('detail-tier-btns');
  const del=document.getElementById('detail-delete-btn');
  if(!wrap||!btns)return;
  const on=useSidePanelPlacement();
  if(del)del.style.display=on?'':'none';
  btns.innerHTML='';
  // Auto-Rank places by score, so tier buttons would be meaningless there —
  // same rule the sheet follows.
  if(!on||isRankedMode()){wrap.style.display='none';return;} // v79
  wrap.style.display='';
  document.querySelectorAll('.tier-row').forEach(row=>{
    const tid=row.dataset.id;
    const label=row.querySelector('.tier-label-text')?.textContent.trim()||'';
    const color=row.querySelector('.tier-label-wrap')?.style.background||'#2d2d44';
    const b=document.createElement('button');b.className='detail-tier-btn';
    b.textContent=label||'—';b.style.background=color;
    b.onclick=()=>placeFromDetail(tid);
    btns.appendChild(b);
  });
}
// Side-panel equivalent of placeFromSheet(): same auto-advance behaviour, but
// driven by selectedItemId and the detail panel rather than the sheet.
function placeFromDetail(tierId){
  const id=selectedItemId;if(!id)return;
  const el=document.getElementById(id);if(!el)return;
  const wasPooled=itemIsInPool(id);
  const zone=document.querySelector(`.tier-items[data-zone="${tierId}"]`);
  if(zone)zone.appendChild(el);
  saveState();
  if(wasPooled){
    const nxt=nextPoolItemAfter(id);
    if(nxt){selectItem(nxt);}   // advance through the pool, as the sheet does
    else{deselectItem();showFlash('✅ All items placed!');}
  }else{
    deselectItem();             // was fixing one item: place it and close
  }
}
// Matches the sheet's trash: deletes outright, no confirmation.
function deleteFromDetail(){
  const id=selectedItemId;if(!id)return;
  const el=document.getElementById(id);
  deselectItem();
  if(el)el.remove();
  deleteItemPermanently(id);
  reRank();
  saveState();
}
function placeFromSheet(tierId){
  const id=sheetItemId;if(!id)return;
  const el=document.getElementById(id);if(!el)return;
  const wasPooled=itemIsInPool(id);
  const zone=document.querySelector(`.tier-items[data-zone="${tierId}"]`);
  if(zone)zone.appendChild(el);
  saveState();
  // Pooled item -> ranking through the pool: advance to the next pooled item.
  // Already-placed item -> the creator was fixing one item: place and close.
  if(wasPooled){
    const nxt=nextPoolItemAfter(id);
    if(nxt){openItemSheet(nxt);}
    else{closeItemSheet();showFlash('✅ All items placed!');}
  }else{
    closeItemSheet();
  }
}
// Swipe-down on the sheet to dismiss (touch only). Tracks the grab handle area.
(function initSheetSwipe(){
  // v69 — drag-to-dismiss. The old handler bound only the 40x4px grab sliver and
  // referenced a non-existent #item-sheet-head id, so dragging felt dead. Bind
  // the whole header region (grab handle + head, which is a real .class, not id)
  // so a downward drag anywhere on the top of the sheet dismisses it. We ignore
  // drags that start on interactive controls so buttons/inputs still work.
  let startY=null,curY=null,dragging=false;
  const attach=()=>{
    const sheet=document.getElementById('item-sheet');
    const grab=document.getElementById('item-sheet-grab');
    const head=document.querySelector('#item-sheet .item-sheet-head');
    if(!sheet||!grab)return;
    const isInteractive=t=>t&&t.closest&&t.closest('button,input,textarea,select,a');
    const onStart=e=>{
      if(isInteractive(e.target))return;      // let buttons/inputs receive the touch
      startY=e.touches[0].clientY;curY=startY;dragging=true;sheet.style.transition='none';
    };
    const onMove=e=>{
      if(!dragging||startY===null)return;curY=e.touches[0].clientY;
      const dy=Math.max(0,curY-startY);
      // v70 — must be a NON-passive listener for this to take effect. Without
      // it the browser also runs pull-to-refresh (reloading the page) and
      // scrolls the content behind the sheet mid-drag.
      if(e.cancelable)e.preventDefault();
      sheet.style.transform='translateY('+dy+'px)';
    };
    const onEnd=()=>{
      if(!dragging||startY===null){dragging=false;return;}
      const dy=Math.max(0,(curY||0)-startY);
      sheet.style.transition='';sheet.style.transform='';
      if(dy>90)closeItemSheet();
      startY=null;curY=null;dragging=false;
    };
    [grab,head].filter(Boolean).forEach(t=>{
      t.addEventListener('touchstart',onStart,{passive:true});
      t.addEventListener('touchmove',onMove,{passive:false}); // v70 — allows preventDefault
      t.addEventListener('touchend',onEnd);
      t.addEventListener('touchcancel',onEnd);
    });
  };
  if(document.readyState!=='loading')attach();else document.addEventListener('DOMContentLoaded',attach);
})();
// Community result detail in the bottom sheet (mobile). Read-only: image, name,
// community score, and the average parameter / placement breakdown.
function showCcSheet(itemId,results,data){
  // v120 — tap the shown item again to close + deselect.
  if(ccSideItemId===itemId&&document.getElementById('item-sheet')?.classList.contains('show')){
    closeItemSheet();ccSideItemId=null;highlightVoteItem('creator-community-tierlist',null);lastNavRef=null;return;
  }
  ccSideItemId=itemId; // v79.3 — so the results refresh knows what to re-render
  const sheetWasOpen=document.getElementById('item-sheet')?.classList.contains('show'); // v70
  const d=data||{};const it=d.itemData?.[itemId]||{};
  sheetItemId=null; // not an editable item; disables place/advance logic
  // Image (shape-aware) + title
  const imgWrap=document.getElementById('item-sheet-img');imgWrap.innerHTML='';
  const round=(d.imgShape==='round');const contain=(d.imgShape==='nocrop');
  const ar=(d.imgShape==='portrait')?(285/399):(d.imgShape==='landscape'||d.imgShape==='nocrop')?(120/80):1;
  imgWrap.classList.remove('tappable');imgWrap.onclick=null;imgWrap.style.aspectRatio=ar;
  if(it.img){
    const im=document.createElement('img');im.src=it.img;im.draggable=false;
    im.style.width='100%';im.style.height='100%';im.style.objectFit=contain?'contain':'cover';
    im.style.borderRadius=round?'50%':'10px';imgWrap.appendChild(im);
    imgWrap.classList.add('tappable');imgWrap.onclick=()=>openSheetImg(it.img,round,contain,ar);
  }else{
    imgWrap.style.display='none'; // v71 — text item: name alone, no placeholder tile
  }
  if(it.img)imgWrap.style.display=''; // restore for image items (element is reused)
  document.getElementById('item-sheet-title').textContent=it.name||'';
  {const head=document.querySelector('#item-sheet .item-sheet-head');if(head)head.classList.toggle('noname',!(it.name||'').trim());} // v68
  // No tier buttons for a read-only community view.
  document.getElementById('item-sheet-tiers').style.display='none';
  {const tr=document.getElementById('item-sheet-trash');if(tr)tr.style.display='none';} // v72 — read-only view
  // v68: mirror the desktop cc-side panel exactly — name, score+bar, creator's
  // parameters, and community votes + placement/winner.
  const body=document.getElementById('item-sheet-body');body.innerHTML='';
  // v79.2 — same shared helpers as the two desktop renderers. This one BUILDS
  // its elements (the sheet has no fixed slots), which is the only real
  // difference between the three.
  const params=d.params||[];const pv=it.paramValues||{};
  const si=detailScoreInfo(itemId,d,results);
  if(si.show)body.appendChild(buildScoreDisplay(si));

  if(params.length){ // v93 — always show all params (— / 1/10 for empties)
    const t=document.createElement('div');t.className='detail-params-title';t.textContent='Your Parameters';body.appendChild(t);
    params.forEach(p=>{body.appendChild(vdRow(null,paramLabel(p),paramDisplayVal(p,pv[p.id])));});
  }

  const cRows=detailCommunityRows(itemId,d,results);
  if(cRows){
    const t=document.createElement('div');t.className='detail-params-title';t.textContent='Community votes';t.style.marginTop='10px';body.appendChild(t);
    if(cRows.length)cRows.forEach(r=>body.appendChild(vdRow(r.color,r.label,r.value)));
    else{const nr=document.createElement('div');nr.className='vd-row';nr.style.color='#888';nr.textContent='No votes yet';body.appendChild(nr);}
    const plInfo=detailPlacementInfo(itemId,d,results);
    if(plInfo){
      const pt=document.createElement('div');pt.className='detail-params-title';pt.textContent='Placement';pt.style.marginTop='10px';body.appendChild(pt);
      body.appendChild(vdRow(plInfo.color,plInfo.label,''));
    }
  }
  highlightVoteItem('creator-community-tierlist',itemId);
  // v79.4 — RESTORED. v79.2 replaced this function from `const body=` to the end
  // and took these with it, so the sheet was fully populated and never shown.
  // The orphaned `sheetWasOpen` above was the clue: it exists only for this.
  const sheet=document.getElementById('item-sheet');
  revealItemSheet(sheet); // v99.4 — two-step reveal so the bottom-slide actually animates
  // v96.1 — PHONE: no backdrop/lock (board scrolls behind), matching openItemSheet
  // and the viewer detail sheet. Desktop keeps the modal.
  if(!isPhone()){
    document.getElementById('item-sheet-backdrop').classList.add('show');
    if(!sheetWasOpen)lockBodyScroll();
  }else{
    document.getElementById('item-sheet-backdrop').classList.remove('show');
  }
}
// v150 — enlarge a TEXT item: a box in the list's item shape (same size an image
// would get), with the text wrapped and fitted inside it.
function openSheetText(text,shape){
  const big=document.getElementById('ballot-img-big');if(!big)return;
  big.innerHTML='';
  const sh=shape||'square';
  const ar=(sh==='portrait')?(285/399):(sh==='landscape'||sh==='nocrop')?(120/80):1;
  const vw=window.innerWidth,vh=window.innerHeight;
  let h=(typeof isPhone==='function'&&isPhone())?Math.min(vh*0.5,(vw*0.86)/ar):vh*0.58;
  let w=h*ar;if(w>vw*0.92){w=vw*0.92;h=w/ar;}
  const box=document.createElement('div');box.className='vb-text vb-text-shaped';
  box.style.width=Math.round(w)+'px';box.style.height=Math.round(h)+'px';
  box.style.borderRadius=(sh==='round')?'50%':'14px';
  if(sh==='round')box.style.padding='16%';
  box.textContent=text||'';
  big.appendChild(box);
  document.getElementById('ballot-img-modal').classList.add('show');
  // fit: start large, shrink until the text fits the shape
  let fs=Math.max(14,Math.min(isPhone()?26:40,Math.round(h*0.10)));box.style.fontSize=fs+'px'; // v151 — smaller
  let guard=40;while(guard-->0&&fs>12&&(box.scrollHeight>box.clientHeight+1||box.scrollWidth>box.clientWidth+1)){fs-=2;box.style.fontSize=fs+'px';}
}
function openSheetImg(src,round,contain,ar){
  const big=document.getElementById('ballot-img-big');if(!big)return;
  big.innerHTML='';
  const im=document.createElement('img');im.src=src;im.draggable=false;
  im.style.objectFit=contain?'contain':'cover';
  im.style.borderRadius=round?'50%':'12px';
  // v79.5 — openSheetImg is shared by the DESKTOP enlarge and the PHONE sheets.
  // v79.4 sized it from the viewport for desktop and silently enlarged the phone
  // ones too. Branch, so the two platforms stop sharing one number: desktop gets
  // the viewport sizing (25% smaller than v79.4), phone goes back to natural
  // size bounded by the modal caps, exactly as before v79.4.
  if(isPhone()){
    im.style.width='auto';im.style.height='auto';
  }else{
    im.style.height=Math.round(window.innerHeight*0.58)+'px';
    im.style.width='auto';im.style.maxWidth='92vw';im.style.maxHeight='82vh';
  }
  // v72 — no-crop must keep its NATURAL ratio. Forcing ar here while using
  // object-fit:contain letterboxed the image inside a 120/80 box, so a portrait
  // photo shrank to a strip. Cover modes still need ar to crop correctly.
  if(ar&&!contain)im.style.aspectRatio=ar;
  big.appendChild(im);
  document.getElementById('ballot-img-modal').classList.add('show');
}
// v72 — the pool's ✕ is unreachable on touch (the tap that reveals it also opens
// this sheet), so deletion moved here. Deletes outright, no confirmation. Also
// covers Auto-Rank, where .autorank-mode hides the ✕ entirely.
function deleteFromSheet(){
  const id=sheetItemId;if(!id)return;
  const el=document.getElementById(id);
  if(selectedItemId===id)deselectItem();
  if(el)el.remove();
  deleteItemPermanently(id);
  reRank();
  saveState();
  closeItemSheet();
}
function closeItemSheet(){
  const sheet=document.getElementById('item-sheet');
  // v70 — guard: only unlock if the sheet was actually open, so a stray close
  // (backdrop tap after close, resize handler, etc.) can't decrement the scroll
  // lock that the share drawer may still be holding.
  const wasOpen=sheet&&sheet.classList.contains('show');
  sheet.classList.remove('show');sheet.setAttribute('aria-hidden','true');
  // v99.4 — clear the inline display/transform that revealItemSheet set, so the
  // base rule (display:none, translateY(100%)) governs the hidden state again and
  // the next open animates cleanly from scratch.
  sheet.style.display='';sheet.style.transform='';
  document.getElementById('item-sheet-backdrop').classList.remove('show');
  if(selectedItemId){document.getElementById(selectedItemId)?.classList.remove('selected');selectedItemId=null;}
  // Clear any community highlight the community sheet set.
  const cc=document.getElementById('creator-community-tierlist');
  if(cc)highlightVoteItem('creator-community-tierlist',null);
  ccSideItemId=null; // v79.3 — a stale id would let a refresh reopen the panel
  sheetItemId=null;writeCache();
  if(wasOpen)unlockBodyScroll(); // v70 — release the page behind the sheet
}
function deselectItem(){if(selectedItemId)document.getElementById(selectedItemId)?.classList.remove('selected');selectedItemId=null;hideDetailPanel();closeItemSheet();lastNavRef=null;writeCache();} // v120 — also close the sheet + clear nav ref

// ── v120 (item 5) — ARROW-KEY ITEM NAVIGATION ──────────────────────────────
// With an item selected AND its detail panel / bottom sheet / ballot open, the
// arrow keys move the selection: ←/→ within the item's row, ↑/↓ to the FIRST
// item of the nearest NON-EMPTY neighbouring row (empty rows are skipped; at the
// top/bottom end it stays put — no wrap). Works in the editor (.item cells) and
// every voting context (.vt-item / .vote-pool-item cells).
//
// The item that responds is whichever one was selected LAST — tracked explicitly
// in lastNavRef (set at every selection chokepoint: selectItem, highlightVoteItem
// and the two ballot pick points). This is what makes multi-list selection behave:
// clicking an item in list B after list A hands the arrows to B, regardless of
// how many lists still show a highlight. We navigate by re-firing the target
// cell's own .click() so its context's open behaviour runs unchanged.
//
// lastNavRef = { mode:'editor'|'vote', container:<id|null>, itemId:<string> }
let lastNavRef=null;
function setLastNav(mode,container,itemId){lastNavRef={mode,container,itemId};}

// Is any item-detail surface currently open? (Gate: don't hijack arrows otherwise.)
function anyItemDetailOpen(){
  const dp=document.getElementById('detail-panel');
  if(dp&&!dp.classList.contains('hidden')&&selectedItemId)return true;
  const sh=document.getElementById('item-sheet');
  if(sh&&sh.classList.contains('show'))return true;
  for(const sid of ['vp-slot','vc-slot','vk-slot']){
    const s=document.getElementById(sid);
    if(s&&!s.classList.contains('hidden'))return true;
  }
  // ballot open (desktop right rail or phone) — an item is on the ballot
  if(typeof voteCurrentItem!=='undefined'&&voteCurrentItem)return true;
  // v133 — static viewer item modal open
  {const vm=document.getElementById('viewer-item-modal');if(vm&&vm.classList.contains('show'))return true;}
  return false;
}

// Resolve the LIVE cell for the last-selected item, plus its base class. Returns
// null if the tracked item is no longer in the DOM (e.g. list re-rendered away).
function currentNavCell(){
  if(!lastNavRef)return null;
  const {mode,container,itemId}=lastNavRef;
  if(mode==='editor'){
    if(selectedItemId!==itemId)return null; // selection moved on
    const el=document.getElementById(itemId);
    if(el&&el.classList.contains('item'))return {cell:el,cls:'item'};
    return null;
  }
  if(mode==='viewer'){
    // v133 — static viewer: find the .viewer-item by id in the viewer tierlist
    const cont=document.getElementById('viewer-tierlist');
    if(!cont)return null;
    const cell=cont.querySelector('.viewer-item[data-item-id="'+CSS.escape(itemId)+'"]');
    if(!cell)return null;
    return {cell,cls:'viewer-item'};
  }
  // vote: find the cell inside its own container (ids repeat across lists, so we
  // must scope to the container that was last selected).
  const cont=container&&document.getElementById(container);
  if(!cont)return null;
  const cell=cont.querySelector('[data-item-id="'+CSS.escape(itemId)+'"]');
  if(!cell)return null;
  const cls=cell.classList.contains('vote-pool-item')?'vote-pool-item':'vt-item';
  return {cell,cls};
}

// The cell's row container (its parent) + the ordered same-base-class cells in it.
function navRowOf(cell,cls){
  const row=cell.parentElement;if(!row)return null;
  const list=[...row.children].filter(c=>c.classList&&c.classList.contains(cls));
  return {row,cells:list};
}

// Ordered list of candidate rows for ↑/↓ in this context (visual top→bottom).
function navRowsFor(cls,row){
  if(cls==='item'){
    const rows=[...document.querySelectorAll('.tier-items')];
    const pool=document.getElementById('item-pool');if(pool)rows.push(pool);
    return rows;
  }
  if(cls==='vote-pool-item'){
    // the vote pool is a single flat wrap — no vertical neighbours
    return [row];
  }
  // vt-item: all .vt-items rows within the SAME list container (my-ranking,
  // community results, creator list, community results-in-creator-view), in order.
  const listCont=row.closest('.vote-mytierlist,.vote-results-tierlist,#creator-community-tierlist,#vote-creator-tierlist')
    ||row.parentElement;
  return [...listCont.querySelectorAll('.vt-items')];
}

function firstCellIn(row,cls){
  return [...row.children].find(c=>c.classList&&c.classList.contains(cls))||null;
}

function moveNavSelection(dir){
  const cur=currentNavCell();if(!cur)return false;
  const {cell,cls}=cur;
  const rowInfo=navRowOf(cell,cls);if(!rowInfo)return false;
  const {row,cells}=rowInfo;
  const idx=cells.indexOf(cell);if(idx<0)return false;

  if(dir==='left'||dir==='right'){
    const next=cells[idx+(dir==='right'?1:-1)];
    if(next)next.click();
    return true; // swallow either way (at a row end, do nothing but don't scroll)
  }

  // v131 — Up / Down move by VISUAL LINE using geometry: pick the cell whose
  // centre is nearest directly above/below the current one. This reaches the
  // second line of a wrapped row (which is visually below, same tier) before
  // crossing into another tier — matching what the eye expects.
  const all=allNavCells(cls,cell);
  if(all.length<2)return true;
  const cr=cell.getBoundingClientRect();
  const cx=cr.left+cr.width/2, cy=cr.top+cr.height/2;
  const wantBelow=(dir==='down');
  let best=null,bestScore=Infinity;
  all.forEach(el=>{
    if(el===cell)return;
    const r=el.getBoundingClientRect();
    const ex=r.left+r.width/2, ey=r.top+r.height/2;
    const dy=ey-cy;
    if(wantBelow&&dy<=4)return;      // must be on a lower line
    if(!wantBelow&&dy>=-4)return;    // must be on a higher line
    const dx=Math.abs(ex-cx);
    // prefer the closest line (smallest |dy|), then nearest horizontally
    const score=Math.abs(dy)*100+dx;
    if(score<bestScore){bestScore=score;best=el;}
  });
  if(best)best.click();
  return true;
}
// All navigable cells for a class, in DOM order. For viewer/vote cells we scope
// to the CURRENT cell's own list container — ids repeat across the my-ranking,
// community and creator-community lists, so a global query would mix them. v132.
function allNavCells(cls,cell){
  if(cls==='item'){
    return [...document.querySelectorAll('.tier-items .item, #item-pool .item')];
  }
  if(cls==='viewer-item'){
    return [...document.querySelectorAll('#viewer-tierlist .viewer-item')];
  }
  // voting cells: find the nearest enclosing list container and stay within it
  if(cell){
    const cont=cell.closest('.vote-mytierlist,.vote-results-tierlist,#creator-community-tierlist,#vote-creator-tierlist,#vote-pool,.reveal-buildlist,#present-tierlist,#present-pool')||cell.parentElement;
    if(cont)return [...cont.querySelectorAll('.'+cls)];
  }
  return [...document.querySelectorAll('.'+cls)];
}

// v148 — Presentation Phase 2 listeners (installed once).
(function(){
  const st=document.getElementById('present-stage');
  if(st){st.addEventListener('dragover',presentOnDragOver);st.addEventListener('drop',presentOnDrop);
    // v149 — details hidden: clicking empty space unselects
    st.addEventListener('click',e=>{
      if(!presentDetailsHidden||!presentMode)return;
      const t=e.target;if(!t||!t.closest)return;
      if(t.closest('.vt-item')||t.closest('button')||t.closest('a')||t.closest('input')||t.closest('.modal-overlay'))return;
      if(presentSelected)presentDeselect();
    });}
  window.addEventListener('resize',()=>tlfUpdateGlows());
  // v151 — Elo spacing changes only while creator Elo voting runs (#ch2h-view visible)
  {const v=document.getElementById('ch2h-view'),w=document.getElementById('ch2h-wrap');
   if(v&&w){const sync=()=>w.classList.toggle('ch2h-live',v.style.display!=='none');sync();
     try{new MutationObserver(sync).observe(v,{attributes:true,attributeFilter:['style']});}catch(e){}}}
  // v150 — re-centre when the creator / viewer / presentation appear or resize
  try{const ro=new ResizeObserver(()=>tlfUpdateGlows());['app','viewer-screen','present-stage'].forEach(id=>{const el=document.getElementById(id);if(el)ro.observe(el);});}catch(e){}
  setTimeout(tlfUpdateGlows,300);
  const pp=document.getElementById('pdetail-params');
  if(pp)pp.addEventListener('input',presentOnParamInput);
})();
// ═══ v154 — SITE CONTROLS runtime ══════════════════════════════════════════
let _maintSignIn=false,_sitePollTimer=null;
async function tlfProbeBackend(){
  try{
    const ac=new AbortController();const t=setTimeout(()=>ac.abort(),6000);
    const r=await fetch(SUPABASE_URL+'/auth/v1/health',{headers:{apikey:SUPABASE_ANON_KEY},signal:ac.signal});
    clearTimeout(t);return r.status<500;
  }catch(e){return false;}
}
function tlfShowOutage(){
  const ov=document.getElementById('maint-screen');if(!ov)return;
  ov.classList.add('show','outage');
  document.getElementById('maint-title').textContent='Tier List Forge is unavailable right now';
  document.getElementById('maint-msg').textContent='We can\'t reach our server at the moment. This page keeps trying and reloads by itself when we\'re back.';
  document.getElementById('maint-actions').style.display='none';
  try{hideBootGate();}catch(e){}
  setTimeout(async()=>{if(await tlfProbeBackend())location.reload();else tlfShowOutage();},20000);
}
async function tlfApplyMaintenance(){
  const ov=document.getElementById('maint-screen'),bar=document.getElementById('maint-owner-bar');
  if(!ov||ov.classList.contains('outage'))return;
  const m=SITE_CONTROLS.maintenance||{};
  if(m.level!=='on'){ov.classList.remove('show');if(bar)bar.classList.remove('show');return;}
  if(_maintSignIn)return; // the staff sign-in screen is open
  let user=currentUser;
  if(!user){try{const{data:{session}}=await sb.auth.getSession();user=session&&session.user;}catch(e){}}
  let owner=false;
  if(user){try{const{data}=await sb.rpc('tlf_is_owner');owner=!!data;}catch(e){}}
  TLF_IS_OWNER=owner;
  if(owner){ov.classList.remove('show');if(bar)bar.classList.add('show');return;}
  if(bar)bar.classList.remove('show');
  document.getElementById('maint-title').textContent='We\'ll be right back';
  document.getElementById('maint-msg').textContent=m.message||'Tier List Forge is getting a quick tune-up.';
  document.getElementById('maint-actions').style.display='';
  document.getElementById('maint-signin').style.display=user?'none':'';
  document.getElementById('maint-signout').style.display=user?'':'none';
  ov.classList.add('show');
  try{hideBootGate();}catch(e){}
}
function tlfMaintStaffSignIn(){
  _maintSignIn=true;
  document.getElementById('maint-screen').classList.remove('show');
  document.getElementById('app').style.display='none';
  document.getElementById('auth-screen').classList.remove('hidden');
  try{switchTab('login');}catch(e){}
  try{applyLastUsedBadge();}catch(e){}
}
async function tlfMaintSignOut(){try{await sb.auth.signOut();}catch(e){}location.reload();}
function tlfApplySiteToggles(){
  // spin lab + playing cards are read live where they render; viewer live updates:
  if(siteLevel('viewer_realtime')==='off'&&VIEWER_REALTIME_ENABLED){
    VIEWER_REALTIME_ENABLED=false;try{stopViewerVoteRealtime();}catch(e){}
  }
  {const sb2=document.getElementById('reveal-spinlab-btn');if(sb2&&document.getElementById('reveal-stage').classList.contains('show'))sb2.style.display=siteAllows('spin_lab')?'':'none';}
}
async function tlfSitePoll(){
  try{
    const{data,error}=await sb.rpc('tlf_site_controls');
    if(error||!data||typeof data!=='object')return;
    SITE_CONTROLS=data;
    tlfApplySiteToggles();
    await tlfApplyMaintenance();
  }catch(e){/* a failed check never blocks the app */}
}
function tlfStartSitePoll(){
  if(_sitePollTimer)return;
  _sitePollTimer=setInterval(tlfSitePoll,60000);
  document.addEventListener('visibilitychange',()=>{if(document.visibilityState==='visible')tlfSitePoll();});
}
// ── the owner panel (🛡 Reports → ⚙️ Site controls) ──
const TLF_CONTROL_DEFS=[
  {key:'maintenance',label:'🚨 Maintenance mode',levels:['off','on'],srv:'server',desc:'Everyone except you sees the maintenance page. Votes, uploads and voting changes are refused by the server.'},
  {key:'uploads',label:'🖼 Image uploads',levels:['off','owner','everyone'],srv:'server',desc:'Uploading new images. The server refuses uploads the switch doesn\'t allow.'},
  {key:'new_voting',label:'🗳 New voting sessions',levels:['off','owner','everyone'],srv:'server',desc:'Starting or reopening votes. Running votes keep going.'},
  {key:'viewer_realtime',label:'⚡ Viewer live updates',levels:['off','everyone'],srv:'app',desc:'Instant vote updates for viewers. Off = viewers refresh on the slower timer instead (saves realtime messages).'},
  {key:'anon_try',label:'✏️ Anonymous "try it" mode',levels:['off','owner','everyone'],srv:'app',desc:'The editor for visitors without an account. Owner only = only devices that visited ?try=forge.'},
  {key:'playing_cards',label:'🃏 Playing cards',levels:['off','owner','everyone'],srv:'app',desc:'The playing-card back in Presentation.'},
  {key:'spin_lab',label:'🧪 Spin lab',levels:['off','owner','everyone'],srv:'app',desc:'The spin-style test lab in Reveal mode.'}
];
function tlfLevelLabel(key,l){
  if(l==='off')return 'Off';if(l==='on')return 'On';
  if(l==='everyone')return key==='viewer_realtime'?'On':'Everyone';
  if(l==='owner')return key==='anon_try'?'Preview devices':'Owner only';
  return l;
}
function tlfRenderSiteControls(){
  const box=document.getElementById('sc-rows');if(!box)return;
  box.innerHTML='';
  TLF_CONTROL_DEFS.forEach(def=>{
    const cur=siteLevel(def.key,def.key==='maintenance'?'off':'everyone');
    const row=document.createElement('div');row.className='sc-row'+(def.key==='maintenance'?' sc-maint':'')+(def.key==='maintenance'&&cur==='on'?' sc-alert':'');
    const info=document.createElement('div');info.className='sc-info';
    const nm=document.createElement('div');nm.className='sc-name';nm.textContent=def.label;
    const tag=document.createElement('span');tag.className='sc-tag '+(def.srv==='server'?'srv':'app');tag.textContent=def.srv==='server'?'server-enforced':'app only';
    nm.appendChild(tag);info.appendChild(nm);
    const ds=document.createElement('div');ds.className='sc-desc';ds.textContent=def.desc;info.appendChild(ds);
    row.appendChild(info);
    const seg=document.createElement('div');seg.className='sc-seg';
    def.levels.forEach(l=>{
      const b=document.createElement('button');b.className='sc-opt'+(l===cur?' active':'')+(l==='off'?' is-off':'');
      b.textContent=tlfLevelLabel(def.key,l);
      b.onclick=()=>tlfSetControl(def.key,l);
      seg.appendChild(b);
    });
    row.appendChild(seg);
    if(def.key==='maintenance'){
      const mw=document.createElement('div');mw.className='sc-msgrow';
      const ta=document.createElement('textarea');ta.className='sc-msg';ta.id='sc-maint-msg';ta.maxLength=300;ta.rows=2;
      ta.value=(SITE_CONTROLS.maintenance&&SITE_CONTROLS.maintenance.message)||'';
      ta.placeholder='Message visitors see on the maintenance page';
      const sv=document.createElement('button');sv.className='btn btn-secondary';sv.textContent='Save message';
      sv.onclick=()=>tlfSetControl('maintenance',siteLevel('maintenance','off'),ta.value.trim()||null,true);
      mw.appendChild(ta);mw.appendChild(sv);row.appendChild(mw);
    }
    box.appendChild(row);
  });
}
async function tlfSetControl(key,level,message,quiet){
  if(key==='maintenance'&&level==='on'&&siteLevel('maintenance','off')!=='on'){
    const ok=await tlfConfirm({title:'Turn on maintenance mode?',message:'Everyone except you will see the maintenance page within about a minute, and the server stops accepting votes, uploads and voting changes.\n\nYou can keep using the site normally.',confirmText:'🚨 Turn on',danger:true});
    if(!ok)return;
  }
  const msgEl=document.getElementById('sc-maint-msg');
  if(key==='maintenance'&&message===undefined&&msgEl)message=msgEl.value.trim()||null;
  try{
    const{data,error}=await sb.rpc('tlf_set_control',{p_key:key,p_level:level,p_message:message===undefined?null:message});
    if(error)throw error;
    if(data&&typeof data==='object')SITE_CONTROLS=data;
    tlfRenderSiteControls();tlfApplySiteToggles();await tlfApplyMaintenance();
    if(!quiet)showFlash('✅ '+((TLF_CONTROL_DEFS.find(d=>d.key===key)||{}).label||key)+': '+tlfLevelLabel(key,level));
    else showFlash('✅ Maintenance message saved');
  }catch(e){showFlash('⚠️ '+((e&&e.message)||'Could not change the setting'));}
}
// ── v147 — browser Back / Forward ─────────────────────────────────────────
// Presentation and Test vote push their own history step (same URL); closing them via
// their buttons steps back again (ignored here). A list opened by code already pushes
// ?code=…; Back removes it, and we now actually leave the viewer.
let _tlfIgnorePop=false;
function tlfHistPush(tag){try{history.pushState({tlf:tag},'',window.location.href);}catch(e){}}
function tlfHistPopIf(tag){try{if(history.state&&history.state.tlf===tag){_tlfIgnorePop=true;history.back();}}catch(e){}}
function tlfLeaveViewerToEditor(){
  stopViewerPolling();stopViewerRealtime();exitVotingMode();
  voteSession=null;voteResults=null;
  document.getElementById('viewer-screen').classList.remove('show');
  setAuthFieldsEnabled(true);
}
async function tlfReopenByCode(code){
  try{
    const{data,error}=await sb.from('tier_lists').select('id,title,data,share_token,is_public,updated_at').eq('share_token',code).eq('is_public',true).single(); // public only, never user_id
    if(data&&!error)showViewer(data);
  }catch(e){}
}
window.addEventListener('popstate',()=>{
  if(_tlfIgnorePop){_tlfIgnorePop=false;return;}
  const ps=document.getElementById('present-stage');
  if(ps&&ps.classList.contains('show')){closePresentStage(true);return;}
  const vs=document.getElementById('viewer-screen');
  const viewerOpen=!!(vs&&vs.classList.contains('show'));
  if(viewerOpen&&testVoteMode){exitTestVote(true);return;}
  const q=new URLSearchParams(window.location.search);
  const code=(q.get('code')&&!q.get('state'))?q.get('code'):null;
  if(viewerOpen&&!code){
    const appEl=document.getElementById('app');
    if(currentUser&&appEl&&appEl.style.display==='block')tlfLeaveViewerToEditor(); // back to the creator view
    else backToHome(true);
    return;
  }
  if(!viewerOpen&&code&&/^\d{5}$/.test(code))tlfReopenByCode(code); // Forward
});
// v153 — sliders: the 1–10 number row under a slider is part of its grab area.
// Press anywhere on it (or on a number) to set the value; keep dragging to adjust.
(function(){
  let drag=null;
  function valFromX(inp,x){
    const r=inp.getBoundingClientRect();const th=9; // thumb radius
    const min=parseFloat(inp.min||'1'),max=parseFloat(inp.max||'10');
    const ratio=Math.min(1,Math.max(0,(x-r.left-th)/Math.max(1,r.width-2*th)));
    return Math.round(min+ratio*(max-min));
  }
  function setVal(inp,x){
    const v=String(valFromX(inp,x));
    if(inp.value!==v){inp.value=v;inp.dispatchEvent(new Event('input',{bubbles:true}));}
  }
  document.addEventListener('pointerdown',e=>{
    const lab=e.target.closest&&e.target.closest('.slider-labels');if(!lab)return;
    const inp=lab.previousElementSibling;
    if(!inp||inp.tagName!=='INPUT'||inp.type!=='range'||inp.disabled)return;
    drag={inp,id:e.pointerId};
    setVal(inp,e.clientX);
    try{lab.setPointerCapture(e.pointerId);}catch(_e){}
    e.preventDefault();
  });
  document.addEventListener('pointermove',e=>{if(drag&&e.pointerId===drag.id)setVal(drag.inp,e.clientX);});
  const end=e=>{if(drag&&e.pointerId===drag.id){drag.inp.dispatchEvent(new Event('change',{bubbles:true}));drag=null;}};
  document.addEventListener('pointerup',end);document.addEventListener('pointercancel',end);
})();
// v152 — creator Auto-rank: Space / Enter selects the next UNRANKED item (the pool),
// so rating a list is fast. Never while typing, and never over an overlay/modal.
document.addEventListener('keydown',e=>{
  if((e.key!==' '&&e.key!=='Enter')||e.repeat)return;
  if(typeof currentMode==='undefined'||currentMode!=='auto')return;
  const app=document.getElementById('app');if(!app||app.style.display!=='block')return;
  for(const id of ['present-stage','reveal-stage','viewer-screen']){const el=document.getElementById(id);if(el&&el.classList.contains('show'))return;}
  if(document.querySelector('.modal-overlay.show,.my-lists-overlay.show,#admin-overlay.show,#account-overlay.show,#partners-overlay.show,#share-drawer.show'))return;
  const t=e.target;
  if(t&&(t.tagName==='TEXTAREA'||t.tagName==='SELECT'||t.tagName==='BUTTON'||t.tagName==='A'||t.isContentEditable))return;
  if(t&&t.tagName==='INPUT'&&t.type!=='range')return;
  const pool=[...document.querySelectorAll('#item-pool .item')];
  if(!pool.length){showFlash('✅ Every item is ranked',{id:'all-ranked'});e.preventDefault();return;}
  let next=pool[0];
  const i=selectedItemId?pool.findIndex(el=>el.id===selectedItemId):-1;
  if(i>=0)next=pool[(i+1)%pool.length];
  if(next.id===selectedItemId&&pool.length===1){e.preventDefault();return;}
  e.preventDefault();
  selectItem(next.id);
  try{next.scrollIntoView({block:'nearest',behavior:'smooth'});}catch(_e){}
});
// v147 — Enter confirms an auto-rank (parameter) ballot vote, like clicking the button.
document.addEventListener('keydown',e=>{
  if(e.key!=='Enter'||e.repeat)return;
  const vs=document.getElementById('viewer-screen');if(!vs||!vs.classList.contains('show'))return;
  const t=e.target;
  if(t&&(t.tagName==='TEXTAREA'||t.tagName==='SELECT'||t.tagName==='BUTTON'||t.tagName==='A'||t.isContentEditable))return;
  if(t&&t.tagName==='INPUT'&&t.type!=='range')return;
  if(document.querySelector('.modal-overlay.show'))return;
  const btn=[...document.querySelectorAll('#viewer-screen .vote-confirm-btn')].find(b=>b.offsetParent!==null&&!b.dataset.busy);
  if(!btn)return;
  e.preventDefault();btn.click();
});
document.addEventListener('keydown',e=>{
  const k=e.key;
  if(k!=='ArrowLeft'&&k!=='ArrowRight'&&k!=='ArrowUp'&&k!=='ArrowDown')return;
  const t=e.target;
  if(t&&(t.tagName==='INPUT'||t.tagName==='TEXTAREA'||t.tagName==='SELECT'||t.isContentEditable))return;
  // v134 — gate on whether there's a live, on-screen selected cell to move FROM.
  // (Replaces the fragile anyItemDetailOpen() which failed on the viewer lists.)
  const cur=currentNavCell();
  if(!cur||!cur.cell)return;
  const r=cur.cell.getBoundingClientRect();
  if(r.width===0&&r.height===0)return; // not actually on screen
  const dir=k==='ArrowLeft'?'left':k==='ArrowRight'?'right':k==='ArrowUp'?'up':'down';
  if(moveNavSelection(dir))e.preventDefault();
});

function renderDetailParams(id,targetEl){
  const list=targetEl||document.getElementById('detail-params-list');list.innerHTML='';
  if(!params.length){list.innerHTML='<div class="detail-no-params">No parameters yet.</div>';return;}
  const pv=(itemData[id]||{}).paramValues||{};
  params.forEach(p=>{
    const row=document.createElement('div');row.className='param-row';
    const hdr=document.createElement('div');hdr.className='param-row-header';
    const lbl=document.createElement('div');lbl.className='param-label';lbl.textContent=p.name+(p.unit?` (${p.unit})`:'');hdr.appendChild(lbl);
    if(p.type==='slider'){
      const badge=document.createElement('div');badge.className='param-value-badge';const cv=parseFloat(pv[p.id])||1;badge.textContent=cv+'/10';
      hdr.appendChild(badge);row.appendChild(hdr);
      const sl=document.createElement('input');sl.type='range';sl.className='param-slider';sl.min=1;sl.max=10;sl.step=1;sl.value=cv;
      sl.oninput=e=>{if(!itemData[id].paramValues)itemData[id].paramValues={};itemData[id].paramValues[p.id]=e.target.value;badge.textContent=e.target.value+'/10';renderScoreDisplay(id);if(currentMode==='auto')runAutoRank();saveState();};
      row.appendChild(sl);
      const slbls=document.createElement('div');slbls.className='slider-labels';
      for(let i=1;i<=10;i++){const s=document.createElement('span');s.textContent=i;slbls.appendChild(s);}
      row.appendChild(slbls);
    } else {
      row.appendChild(hdr);
      const wrapEl=document.createElement('div');wrapEl.className='param-input-row';
      // v148 — a 1-row textarea that grows with its text (all text visible, no inner
      // scrolling). Enter still confirms; line breaks are never stored.
      const inp=document.createElement('textarea');inp.rows=1;inp.className='param-input';inp.maxLength=50;inp.placeholder=p.unit?`e.g. 25 ${p.unit}`:'value';inp.value=pv[p.id]||'';
      const grow=()=>{inp.style.height='auto';const h=inp.scrollHeight;if(h>0)inp.style.height=h+'px';};
      inp.oninput=()=>{if(/[\r\n]/.test(inp.value))inp.value=inp.value.replace(/[\r\n]+/g,' ');grow();if(!itemData[id].paramValues)itemData[id].paramValues={};itemData[id].paramValues[p.id]=inp.value;refreshDot(id);saveState();};
      requestAnimationFrame(grow);
      const cbtn=document.createElement('button');cbtn.className='input-confirm-btn';cbtn.textContent='✓';cbtn.title='Confirm';
      // checkmark only visible while the field is focused (or being clicked)
      inp.onfocus=()=>{wrapEl.classList.add('focused');grow();};
      inp.onblur=()=>setTimeout(()=>wrapEl.classList.remove('focused'),120);
      inp.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();inp.blur();flashConfirm(cbtn);showFlash('✓ Saved');}};
      cbtn.onmousedown=e=>{e.preventDefault();};
      cbtn.onclick=()=>{inp.blur();flashConfirm(cbtn);showFlash('✓ Saved');};
      wrapEl.appendChild(inp);wrapEl.appendChild(cbtn);
      row.appendChild(wrapEl);
    }
    list.appendChild(row);
  });
}

function renderScoreDisplay(id){
  const disp=document.getElementById('score-display');
  // v79.1 — in Elo mode the item has no score of its own; its standing comes from
  // the community's head-to-head ratings. Show the real Elo number and how many
  // matchups it is based on, so it is visible when a ranking is still settling
  // rather than presenting a rating from 3 matchups as if it were settled.
  if(currentMode==='elo'){
    // v82.1 — the editor list is the CREATOR'S OWN ranking now, so this panel must
    // show their own Elo standing too. It previously read lastCreatorResults (the
    // COMMUNITY standings), which both contradicted the list and left stale
    // numbers behind after "Reset scores" cleared the creator's votes.
    const mine=(creatorPersonal&&creatorPersonal.mode==='head2head'&&creatorPersonal.items)?creatorPersonal.items[id]:null;
    const r=(mine&&(mine.matches||0)>0)?mine:null;
    disp.classList.add('show');
    if(r&&typeof r.rating==='number'){
      document.getElementById('score-main').textContent=Math.round(r.rating)+' Elo';
      document.getElementById('score-pct').textContent=
        r.matches+(r.matches===1?' matchup':' matchups')+
        (r.matches<5?' — still settling':'');
      // pct across the creator's own spread, matching how the list is placed.
      const all=(creatorPersonal&&creatorPersonal.items)||{};
      const rs=Object.keys(all).filter(k=>(all[k].matches||0)>0).map(k=>all[k].rating);
      let pct=50;
      if(rs.length){const lo=Math.min(...rs),hi=Math.max(...rs);pct=(hi>lo)?((r.rating-lo)/(hi-lo)*100):50;}
      document.getElementById('score-bar-fill').style.width=pct+'%';
      // v82.2 — label the bar so it's clear what it means.
      // v85.1 — item 1: drop the % readout next to the bar in the creator editor
      // detail panel (the :empty CSS then lets the bar extend fully right).
      document.getElementById('score-bar-label').textContent='Win rate';
      document.getElementById('score-bar-val').textContent='';
    }else{
      document.getElementById('score-main').textContent='Not yet rated';
      document.getElementById('score-pct').textContent='You haven\'t voted on this item yet';
      document.getElementById('score-bar-fill').style.width='0%';
      document.getElementById('score-bar-label').textContent='Win rate';
      document.getElementById('score-bar-val').textContent='';
    }
    return;
  }
  const sliders=params.filter(p=>p.type==='slider');
  if(!sliders.length){disp.classList.remove('show');return}
  disp.classList.add('show');
  const score=calcScore(id,sliders),max=getMaxScore(),pct=max>0?Math.round(score/max*100):0;
  document.getElementById('score-main').textContent=score+' / '+max+' pts';
  document.getElementById('score-pct').textContent=pct+'% of maximum score';
  document.getElementById('score-bar-fill').style.width=pct+'%';
  // v82.2 — "Win rate" only means something in Elo; blank it elsewhere.
  // v85.1 — item 1: no % next to the bar in the creator editor detail panel
  // (the "X% of maximum score" sub-line above still shows the number).
  document.getElementById('score-bar-label').textContent='';
  document.getElementById('score-bar-val').textContent='';
}

function saveDetailName(){
  if(!selectedItemId)return;
  const val=document.getElementById('detail-name').value;
  if(!itemData[selectedItemId])itemData[selectedItemId]={name:'',img:null,paramValues:{}};
  itemData[selectedItemId].name=val;
  const el=document.getElementById(selectedItemId);
  if(el){const span=el.querySelector('span');if(span)span.textContent=val||'...';}
  const prev=document.querySelector('#detail-img-wrap .text-preview');if(prev)prev.textContent=val||'...';
  saveState();
}
function flashConfirm(btn){if(!btn)return;btn.classList.add('confirmed');setTimeout(()=>btn.classList.remove('confirmed'),900);}
function confirmDetailName(){
  saveDetailName();
  const inp=document.getElementById('detail-name');
  const btn=document.getElementById('detail-name-confirm');
  inp.blur();
  flashConfirm(btn);
  showFlash('✓ Name saved');
}

/* ── DRAG ── */
// v77 — the page never scrolled while dragging, so a tier that was off screen
// could not be reached without dropping the item first.
//
// The scrolling runs on requestAnimationFrame rather than directly inside the
// dragover handler, because dragover fires at an unpredictable rate and STOPS
// firing entirely while the pointer is stationary — which is exactly what you do
// when holding an item at the edge waiting for the list to move. A loop keeps
// scrolling for as long as the pointer stays in the hot zone.
(function initDragAutoScroll(){
  const EDGE=90;      // px from the top/bottom of the window that trigger it
  const MAX_SPEED=18; // px per frame at the very edge, easing to 0 at EDGE
  let pointerY=null,rafId=null;
  const dragging=()=>!!(dragSrc||dragRowSrc||voteDragActive); // v96.6 — also run during VOTER drags
  // v97.1 — WHICH element actually scrolls. The creator page scrolls the WINDOW,
  // but the voter/viewer view is a fixed full-screen overlay (#viewer-screen) with
  // its own overflow-y:auto, so window.scrollBy did nothing during voter drags —
  // THIS is why the voter list never scrolled (not a touch-event issue). Scroll the
  // viewer container when it's the active scroller, else the window.
  const scroller=()=>{
    const vs=document.getElementById('viewer-screen');
    if(vs&&getComputedStyle(vs).display!=='none'&&voteDragActive)return vs;
    return null; // null => use window
  };
  const viewTop=()=>{const s=scroller();return s?s.getBoundingClientRect().top:0;};
  const viewHeight=()=>{const s=scroller();return s?s.clientHeight:window.innerHeight;};
  const doScroll=(dy)=>{const s=scroller();if(s)s.scrollTop+=dy;else window.scrollBy(0,dy);};
  const step=()=>{
    if(pointerY===null||!dragging()){rafId=null;return;}
    const top=viewTop(),h=viewHeight();const rel=pointerY-top;let dy=0;
    if(rel<EDGE)            dy=-MAX_SPEED*(1-rel/EDGE);
    else if(rel>h-EDGE)     dy= MAX_SPEED*(1-(h-rel)/EDGE);
    if(dy)doScroll(dy);
    rafId=requestAnimationFrame(step);
  };
  const stop=()=>{pointerY=null;if(rafId!==null){cancelAnimationFrame(rafId);rafId=null;}};
  // Passive: the drop zones do their own preventDefault, and we must not turn
  // the document itself into a drop target.
  document.addEventListener('dragover',e=>{
    if(!dragging())return;
    pointerY=e.clientY;
    if(rafId===null)rafId=requestAnimationFrame(step);
  },{passive:true});
  document.addEventListener('touchend',stop);
  document.addEventListener('touchcancel',stop);
  document.addEventListener('dragend',stop);
  document.addEventListener('drop',stop);
})();
let dragOrigin=null; // v78.1 — where the dragged item started, to detect no-op drags
function onDragStart(e,el){
  dragSrc=el;
  dragOrigin={parent:el.parentNode,next:el.nextElementSibling};
  e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text/plain',el.id);
  setTimeout(()=>el.classList.add('dragging'),0);
}
// v97.6 — drop-point marking. The HOVERED item gets .drop-insert-before (draws
// the indicator bar in the gap to its left). Its PREVIOUS sibling gets
// .drop-make-room (a margin-right that opens a gap). Opening room on the LEFT
// neighbor — not the hovered item, whose dragover handler is firing — means the
// hovered item's box never moves, so the pointer stays over it and there is no
// dragleave/dragover bounce. Only one drop point is active at a time.
function clearAllDropPoints(){
  document.querySelectorAll('.drag-insert-before,.drop-insert-before').forEach(x=>x.classList.remove('drag-insert-before','drop-insert-before'));
  document.querySelectorAll('.drop-make-room').forEach(x=>x.classList.remove('drop-make-room'));
}
function markDropPoint(el){
  if(el.classList.contains('drop-insert-before'))return; // already the drop point
  clearAllDropPoints();
  el.classList.add('drop-insert-before');
  const prev=el.previousElementSibling;
  if(prev)prev.classList.add('drop-make-room');
}
function clearDropPoint(el){
  el.classList.remove('drop-insert-before','drag-insert-before');
  const prev=el.previousElementSibling;
  if(prev)prev.classList.remove('drop-make-room');
}
function onDragEnd(){
  const el=dragSrc;
  el?.classList.remove('dragging');
  clearAllDropPoints();
  // v78.1 — compare parent AND next sibling, so both "moved to another tier" and
  // "reordered within this one" count, while dropping back in place does not.
  const moved=!!(el&&dragOrigin&&(el.parentNode!==dragOrigin.parent||el.nextElementSibling!==dragOrigin.next));
  dragSrc=null;dragOrigin=null;
  if(moved)saveState();
}
function onDragOver(e){if(dtHasFiles(e))return;e.preventDefault();e.currentTarget.classList.add('drag-over')} // v132 — file drags handled by the overlay
function onDragLeave(e){e.currentTarget.classList.remove('drag-over')}
function onDrop(e,zoneId){
  e.preventDefault();e.currentTarget.classList.remove('drag-over');if(!dragSrc||dragRowSrc)return;
  if(zoneId==='pool'){clearAutoRankScore(dragSrc.id);addToPool(dragSrc);} // v72
  else{const zone=document.querySelector(`.tier-items[data-zone="${zoneId}"]`);if(zone)zone.appendChild(dragSrc);}
  // v78.2 — no saveState() here. This runs BEFORE dragend, so saving here defeated
  // the v78.1 no-op check entirely: dropping an item back on its own row still
  // marked the list unsaved. onDragEnd now decides, once, by comparing where the
  // item ended up against where it started.
}

// v119 (item 3) — DRAG & DROP IMAGE FILES onto the pool / Elo Unranked band to
// add them. These listeners are ALWAYS on (both Manual/Auto and Elo), and act
// ONLY when the drag actually carries files (dataTransfer.files / a "Files" type).
// A same-app item-move drag carries an item id, not files, so it never triggers
// this — and we don't preventDefault for it, so the existing onDrop item-move
// path is untouched. Anonymous users can't upload (server rejects), so we gate on
// a signed-in account and nudge otherwise.
function dtHasFiles(e){
  try{
    const dt=e.dataTransfer;if(!dt)return false;
    if(dt.files&&dt.files.length)return true;
    if(dt.types){for(const t of dt.types){if(t==='Files')return true;}}
  }catch(_e){}
  return false;
}
function onFileDragOver(e){
  if(!dtHasFiles(e))return;            // let item-move drags fall through untouched
  e.preventDefault();e.stopPropagation();
  try{e.dataTransfer.dropEffect='copy';}catch(_e){}
  e.currentTarget.classList.add('file-drop-over');
}
function onFileDragLeave(e){
  e.currentTarget.classList.remove('file-drop-over');
}
function onFileDrop(e){
  if(!dtHasFiles(e))return;            // not a file drop → leave to item-move onDrop
  e.preventDefault();e.stopPropagation();
  e.currentTarget.classList.remove('file-drop-over');
  const files=e.dataTransfer&&e.dataTransfer.files;
  if(!files||!files.length)return;
  // v132 — anon users CAN upload: uploadImages → uploadOneImage routes to IndexedDB
  // for anon (v98.3 local-image flow), same as the 📁 Upload button. No block here.
  uploadImages(files);                 // v119 — accepts a raw FileList now
}
function wireFileDropTarget(el){
  if(!el||el._fileDropWired)return;
  el._fileDropWired=true;              // bind once per element
  el.addEventListener('dragover',onFileDragOver);
  el.addEventListener('dragleave',onFileDragLeave);
  el.addEventListener('drop',onFileDrop);
}
function wireFileDropZones(){
  // v131 — ONE drop system: the whole-editor overlay (wireListDropOverlay) is the
  // single file-drop zone. The pool/Elo band no longer have their own separate
  // file-drop targets, which previously left the big overlay showing after a pool
  // drop (its dragleave counter never rebalanced). The overlay covers those areas
  // anyway, so nothing is lost.
  wireListDropOverlay();
}

// v120 (item 3) — WHOLE-LIST FILE-DROP OVERLAY. While an external image-file drag
// is anywhere over the editor's left column, a big "Drop images…" overlay covers
// the tier list so the creator doesn't have to aim at the pool. It appears ONLY
// for file drags (dtHasFiles) — an in-app item-move drag carries an id, not files,
// so it never triggers and tier-to-tier dragging is untouched. Dropping on the
// overlay routes the files to the pool via the same uploadImages() path.
let _fileDragDepth=0; // dragenter/leave bubble a lot; count to know when we truly left
function _showListDropOverlay(){const o=document.getElementById('file-drop-overlay');if(o){o.classList.add('show');o.style.pointerEvents='auto';}}
function _hideListDropOverlay(){_fileDragDepth=0;const o=document.getElementById('file-drop-overlay');if(o){o.classList.remove('show');o.style.pointerEvents='none';}}
function wireListDropOverlay(){
  const col=document.getElementById('left-col');
  const overlay=document.getElementById('file-drop-overlay');
  if(!col||!overlay||col._listDropWired)return;
  col._listDropWired=true;
  // Only editor mode has a pool to receive uploads; the overlay simply won't show
  // in views without #left-col. Track enter/leave over the whole left column.
  col.addEventListener('dragenter',e=>{
    if(!dtHasFiles(e))return;            // ignore item-move drags
    if(isRankedMode&&isRankedMode()){}   // (Elo still allows adding to pool)
    _fileDragDepth++;_showListDropOverlay();
  });
  col.addEventListener('dragover',e=>{
    if(!dtHasFiles(e))return;
    e.preventDefault();try{e.dataTransfer.dropEffect='copy';}catch(_e){}
  });
  col.addEventListener('dragleave',e=>{
    if(!dtHasFiles(e))return;
    _fileDragDepth=Math.max(0,_fileDragDepth-1);
    if(_fileDragDepth===0)_hideListDropOverlay();
  });
  // The overlay itself catches the drop (pointer-events flip to auto while shown).
  overlay.addEventListener('dragover',e=>{if(dtHasFiles(e)){e.preventDefault();try{e.dataTransfer.dropEffect='copy';}catch(_e){}}});
  overlay.addEventListener('drop',e=>{
    if(!dtHasFiles(e))return;
    e.preventDefault();e.stopPropagation();
    const files=e.dataTransfer&&e.dataTransfer.files;
    _hideListDropOverlay();
    if(!files||!files.length)return;
    uploadImages(files); // v132 — anon uploads go to IndexedDB (no sign-in block)
  });
  // Safety: any drop or dragend anywhere, or leaving the window, hides the overlay.
  document.addEventListener('drop',e=>{if(!e.target.closest('#file-drop-overlay'))_hideListDropOverlay();});
  document.addEventListener('dragend',_hideListDropOverlay);
  window.addEventListener('dragleave',e=>{if(e.clientX<=0||e.clientY<=0||e.clientX>=window.innerWidth||e.clientY>=window.innerHeight)_hideListDropOverlay();});
}

/* ── UPLOAD (Supabase Storage, parallel, compressed, dedup) ── */
let uploadCancelled=false;

/* Dedup, hashing, and the images-table insert now happen SERVER-SIDE in the
   upload-image Edge Function (which also captures uploader IP/UA for the audit
   trail and hosts the abuse-scan hook). The client just sends the file with the
   user's auth token and receives { imageId, publicUrl, deduped }. */
async function getAccessToken(){
  try{
    const{data:{session}}=await sb.auth.getSession();
    return session?.access_token||null;
  }catch(e){return null;}
}

function compressImage(file,maxDim=1600,quality=0.82){
  return new Promise((resolve,reject)=>{
    const url=URL.createObjectURL(file);
    const img=new Image();
    img.onload=()=>{
      let{width,height}=img;
      if(width>maxDim||height>maxDim){
        if(width>height){height=Math.round(height*maxDim/width);width=maxDim;}
        else{width=Math.round(width*maxDim/height);height=maxDim;}
      }
      const canvas=document.createElement('canvas');
      canvas.width=width;canvas.height=height;
      const ctx=canvas.getContext('2d');
      ctx.drawImage(img,0,0,width,height);
      canvas.toBlob(blob=>{
        URL.revokeObjectURL(url);
        blob?resolve(blob):reject(new Error('Compression failed'));
      },'image/jpeg',quality);
    };
    img.onerror=()=>{URL.revokeObjectURL(url);reject(new Error('Could not read image'));};
    img.src=url;
  });
}

function showUploadBanner(total){
  document.getElementById('upload-progress-text').textContent=`Uploading 0 / ${total}`;
  document.getElementById('upload-progress-fill').style.width='0%';
  document.getElementById('upload-progress-banner').classList.add('show');
}
function updateUploadBanner(done,total){
  document.getElementById('upload-progress-text').textContent=`Uploading ${done} / ${total}`;
  document.getElementById('upload-progress-fill').style.width=(total?Math.round(done/total*100):0)+'%';
}
function hideUploadBanner(){
  setTimeout(()=>document.getElementById('upload-progress-banner').classList.remove('show'),400);
}
function cancelUpload(){uploadCancelled=true;showFlash('⏹ Cancelling remaining uploads...');}

async function uploadOneImage(f,pool){
  const id=uid();
  itemData[id]={name:'',img:'',imageId:null,paramValues:{}};
  const el=buildItemEl(id,'img','');
  el.classList.add('uploading');
  const shimmer=document.createElement('div');shimmer.className='item-shimmer';el.appendChild(shimmer);
  addToPool(el,pool);
  if(currentMode==='elo')runEloRank();
  // v98.3 — ANONYMOUS branch: no account, so store the (compressed) blob in
  // IndexedDB and render from a local object URL. `localImg` marks it for the
  // sign-up migration; `img` holds the object URL only for THIS session's render
  // (object URLs die on reload, so init() rebuilds them from the blob). We never
  // let a local ref reach the server (buildSaveData strips them; migration runs
  // before any save).
  if(anonMode){
    try{
      let blob;try{blob=await compressImage(f);}catch(ce){blob=f;}
      const key=tlfNewLocalKey();
      await tlfIdbPut(key,blob);
      const url=tlfMakeObjUrl(blob);
      itemData[id].localImg=key;
      itemData[id].img=url;
      const imgEl=el.querySelector('img');
      if(imgEl){imgEl.draggable=false;await new Promise(res=>{imgEl.onload=res;imgEl.onerror=res;imgEl.src=url;});}
      return{ok:true,deduped:false};
    }catch(e){
      el.remove();delete itemData[id];
      return{ok:false,error:e};
    }finally{el.classList.remove('uploading');shimmer.remove();}
  }
  try{
    // client compresses for speed; the Edge Function validates, hashes the
    // received bytes, dedups, records audit data (IP/UA), and stores the file.
    let blob;
    try{blob=await compressImage(f);}catch(ce){blob=f;}
    const token=await getAccessToken();
    if(!token)throw new Error('Please sign in to upload images');
    const fd=new FormData();
    fd.append('file',blob,((f.name||'image').replace(/\.[^.]*$/,'')||'image')+'.jpg');
    const resp=await fetch(`${SUPABASE_URL}/functions/v1/upload-image`,{
      method:'POST',
      headers:{'Authorization':'Bearer '+token},
      body:fd
    });
    if(!resp.ok){
      let msg='Upload failed ('+resp.status+')';
      try{const j=await resp.json();if(j&&j.error)msg=j.error;}catch(_){}
      throw new Error(msg);
    }
    const j=await resp.json();
    if(!j||!j.publicUrl||!j.imageId)throw new Error('Unexpected server response');
    // Hybrid Option B: canonical reference is imageId; URL is cached for
    // instant rendering and a zero-lookup public viewer.
    itemData[id].img=j.publicUrl;
    itemData[id].imageId=j.imageId;
    const imgEl=el.querySelector('img');
    if(imgEl){imgEl.draggable=false;await new Promise(res=>{imgEl.onload=res;imgEl.onerror=res;imgEl.src=j.publicUrl;});}
    return{ok:true,deduped:!!j.deduped};
  }catch(e){
    el.remove();delete itemData[id];
    return{ok:false,error:e};
  }finally{
    el.classList.remove('uploading');
    shimmer.remove();
  }
}

// v119 (item 3) — `input` may be the <input type=file> element (the 📁 Upload
// button) OR a raw FileList/array of File objects (from a drag-and-drop onto the
// pool / Elo Unranked band). Handle both; only clear .value when it's a real input.
async function uploadImages(input){
  const isInputEl=input&&typeof input==='object'&&'files'in input&&!(input instanceof Array)&&!(typeof FileList!=='undefined'&&input instanceof FileList);
  // v154 — site control: image uploads paused (anon images stay in the browser, so they're unaffected)
  if(!anonMode&&!siteAllows('uploads')){showFlash('⚠️ Image uploads are paused right now — please try again later.');if(isInputEl)input.value='';return;}
  let files=isInputEl?[...input.files]:[...input].filter(f=>f&&f.type&&f.type.startsWith('image/'));
  const cap=itemCap();
  const remaining=cap-itemCount();
  if(remaining<=0){showFlash('⚠️ List is full — max '+cap+' items.');if(isInputEl)input.value='';return;}
  if(files.length>remaining){showFlash('⚠️ Only '+remaining+' more item'+(remaining===1?'':'s')+' allowed — adding the first '+remaining+'.');files.length=remaining;}
  if(isInputEl)input.value='';
  if(!files.length){if(!isInputEl)showFlash('⚠️ No image files found in that drop.');return;}
  const pool=document.getElementById('item-pool');
  uploadCancelled=false;
  showUploadBanner(files.length);
  let completed=0,failed=0,deduped=0,quotaMsg=null;
  // v78 — distinct failure reasons seen this batch. If they all agree we can
  // name the cause; if they differ there is no single thing to report.
  const failReasons=new Set();
  const CONCURRENCY=6;
  let idx=0;
  async function worker(){
    while(idx<files.length){
      if(uploadCancelled)return;
      const f=files[idx++];
      const res=await uploadOneImage(f,pool);
      if(!res.ok){
        failed++;
        // Account quota hit (storage ceiling or rate cap): stop the whole batch —
        // the rest would fail the same way — and surface the server's message.
        const m=res.error&&res.error.message||'';
        if(/^(STORAGE_LIMIT|RATE_LIMIT|PAUSED)/.test(m)){quotaMsg=m.replace(/^[A-Z_]+:\s*/,'');uploadCancelled=true;}
        // Everything else is specific to THIS file — a blocked re-upload, a file
        // that is too large, an unsupported type — so the batch carries on and we
        // just remember why. Strips any MACHINE_CODE: prefix the server used.
        else if(m)failReasons.add(m.replace(/^[A-Z_]+:\s*/,''));
      }else if(res.deduped)deduped++;
      completed++;
      updateUploadBanner(completed,files.length);
    }
  }
  const workers=Array.from({length:Math.min(CONCURRENCY,files.length)},()=>worker());
  await Promise.all(workers);
  afterItemAdded();   // v84.0 — Elo: land the newly uploaded items in Unranked
  hideUploadBanner();
  if(quotaMsg)showFlash('⚠️ '+quotaMsg);
  else if(uploadCancelled)showFlash(`⏹ Upload cancelled (${completed}/${files.length} done)`);
  else if(failed){
    // v78 — say what actually went wrong. Previously every non-quota failure
    // became "N of M uploads failed", so the server's explanation was thrown away.
    const succeeded=files.length-failed;
    const reason=failReasons.size===1?[...failReasons][0]:null;
    let msg=(failed===files.length)
      ? (files.length===1?"This image can't be uploaded":`${failed} images couldn't be uploaded`)
      : `${succeeded} uploaded, ${failed} couldn't be uploaded`;
    if(reason)msg+=' — '+reason;
    showFlash('⚠️ '+msg);
  }
  else showFlash('✅ Images uploaded!');
  saveState();
}

function openTextModal(){document.getElementById('text-modal').classList.add('show');setTimeout(()=>document.getElementById('modal-text-input').focus(),50)}
function closeTextModal(){document.getElementById('text-modal').classList.remove('show');document.getElementById('modal-text-input').value=''}
function confirmTextItem(){const v=document.getElementById('modal-text-input').value.trim();if(!v)return;const cap=itemCap();if(itemCount()>=cap){showFlash('⚠️ List is full — max '+cap+' items.');return;}addToPool(makeTextItem(v));afterItemAdded();saveState();closeTextModal();}
function quickAdd(){const inp=document.getElementById('quick-text'),v=inp.value.trim();if(!v)return;const cap=itemCap();if(itemCount()>=cap){showFlash('⚠️ List is full — max '+cap+' items.');return;}addToPool(makeTextItem(v));afterItemAdded();inp.value='';saveState();}

let tempParams=[];
function openParamManager(){tempParams=params.map(p=>({...p}));if(!tempParams.length)tempParams.push({id:pid(),name:'',unit:'',type:'text'});renderPMList();document.getElementById('param-modal').classList.add('show');}
function closeParamManager(){document.getElementById('param-modal').classList.remove('show')}
function renderPMList(){
  const list=document.getElementById('pm-list');list.innerHTML='';
  tempParams.forEach((p,i)=>{
    const card=document.createElement('div');card.className='pm-card';
    const top=document.createElement('div');top.className='pm-top';
    const ni=document.createElement('input');ni.placeholder='Parameter name';ni.value=p.name;ni.oninput=e=>{tempParams[i].name=e.target.value;updateSaveBtn()};top.appendChild(ni);
    // v150 — reorder
    const arrows=document.createElement('span');arrows.className='pm-arrows'; // v151 — grouped, compact
    const up=document.createElement('button');up.className='pm-move';up.textContent='▲';up.title='Move up';up.disabled=(i===0);
    up.onclick=()=>{if(i<1)return;const t=tempParams[i-1];tempParams[i-1]=tempParams[i];tempParams[i]=t;renderPMList();updateSaveBtn();};arrows.appendChild(up);
    const dn=document.createElement('button');dn.className='pm-move';dn.textContent='▼';dn.title='Move down';dn.disabled=(i===tempParams.length-1);
    dn.onclick=()=>{if(i>=tempParams.length-1)return;const t=tempParams[i+1];tempParams[i+1]=tempParams[i];tempParams[i]=t;renderPMList();updateSaveBtn();};arrows.appendChild(dn);
    top.appendChild(arrows);
    const del=document.createElement('button');del.className='pm-del';del.textContent='✕';del.onclick=()=>{tempParams.splice(i,1);renderPMList()};top.appendChild(del);
    const typeRow=document.createElement('div');typeRow.className='pm-type';
    ['text','slider'].forEach(t=>{const tb=document.createElement('button');tb.className='type-btn'+(p.type===t?' active':'');tb.textContent=t==='text'?'📝 Text':'🎚️ Slider (1–10)';tb.onclick=()=>{tempParams[i].type=t;renderPMList()};typeRow.appendChild(tb);});
    card.appendChild(top);card.appendChild(typeRow);
    if(p.type!=='slider'){const ur=document.createElement('div');ur.className='pm-unit';const ul=document.createElement('label');ul.textContent='Unit:';const ui=document.createElement('input');ui.value=p.unit||'';ui.placeholder='e.g. kg';ui.oninput=e=>tempParams[i].unit=e.target.value;ur.appendChild(ul);ur.appendChild(ui);card.appendChild(ur);}
    list.appendChild(card);
  });
  updateSaveBtn();
}
function updateSaveBtn(){document.getElementById('pm-save-btn').disabled=false} // zero params is valid
function addParamField(){if(tempParams.length>=MAX_PARAMS){showFlash('⚠️ Max '+MAX_PARAMS+' parameters per list.');return;}tempParams.push({id:pid(),name:'',unit:'',type:'text'});renderPMList()}
function saveParams(){
  params=tempParams.filter(p=>p.name.trim()!=='').map(p=>({...p,id:p.id||pid()}));
  if(params.some(p=>p.type==='slider'))dismissFlash('need-slider'); // condition resolved
  // Data hygiene: drop per-item values of parameters that no longer exist.
  const validIds=new Set(params.map(p=>p.id));
  Object.values(itemData).forEach(it=>{if(it&&it.paramValues)Object.keys(it.paramValues).forEach(k=>{if(!validIds.has(k))delete it.paramValues[k];});});
  // Auto-rank needs at least one slider param: if none remain, fall back to manual.
  if(currentMode==='auto'&&!params.some(p=>p.type==='slider')){
    setMode('manual');
    showFlash('ℹ️ Switched to manual mode — no slider parameters left for auto-rank');
  }
  refreshSortSelect();
  if(selectedItemId){
    // Keep the detail panel open and refreshed for the selected item.
    document.getElementById('right-col').classList.remove('hidden');
    document.getElementById('detail-content').style.display='block';
    renderDetailParams(selectedItemId);renderScoreDisplay(selectedItemId);
  }
  if(currentMode==='auto')runAutoRank();refreshAllDots();saveState();closeParamManager();showFlash('✅ Parameters saved!');
}

function refreshSortSelect(){
  const sel=document.getElementById('sort-param'),prev=sel.value;sel.innerHTML='<option value="">— select —</option>';
  params.forEach(p=>{const o=document.createElement('option');o.value=p.id;o.textContent=p.name+(p.unit?` (${p.unit})`:'');sel.appendChild(o);}); // v113 — dropped the ' 🎚️' slider marker (rendered as an up-arrow, read as a sort-direction cue)sel.value=prev||'';
}
function toggleSortDir(){sortDir=sortDir==='asc'?'desc':'asc';document.getElementById('sort-dir-btn').textContent=sortDir==='asc'?'↑ Asc':'↓ Desc'}
function applySort(){
  const pid=document.getElementById('sort-param').value;if(!pid){showFlash('⚠️ Select a parameter first');return}
  preSortSnapshot=snapshotLayout();document.getElementById('undo-sort-btn').disabled=false;
  document.querySelectorAll('.tier-items').forEach(zone=>{
    const items=[...zone.querySelectorAll('.item')];
    items.sort((a,b)=>{const av=parseFloat((itemData[a.id]?.paramValues?.[pid])||'');const bv=parseFloat((itemData[b.id]?.paramValues?.[pid])||'');const an=isNaN(av),bn=isNaN(bv);if(an&&bn)return 0;if(an)return 1;if(bn)return -1;return sortDir==='asc'?av-bv:bv-av;});
    items.forEach(it=>zone.appendChild(it));
  });
  saveState();showFlash('✅ Sorted!');
}
function undoSort(){if(!preSortSnapshot)return;restoreSnapshot(preSortSnapshot);preSortSnapshot=null;document.getElementById('undo-sort-btn').disabled=true;saveState();showFlash('↩ Sort undone!');}

// v94 — filesystem-safe filename from the list title (fallback to a default).
function safeFileName(base,fallback){
  const raw=(base||'').trim()||fallback;
  // Strip characters illegal in filenames; collapse whitespace; cap length.
  return raw.replace(/[\/\\:*?"<>|]+/g,'').replace(/\s+/g,' ').trim().slice(0,80)||fallback;
}
// v95 — colorless grey logo mark + wordmark as an SVG string, for the download
// watermark. Uses the new (v94) horn geometry, single grey ink, no tier colors.
function watermarkMarkupSVG(){
  const ink='#8a8aa0';
  return '<svg viewBox="0 0 128 112" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'
    +'<g transform="rotate(24 90 12)"><rect x="81" y="-2" width="18" height="23" rx="3.5" fill="'+ink+'"/><rect x="97" y="7" width="24" height="8" rx="3.5" fill="'+ink+'"/></g>'
    +'<g stroke="'+ink+'" stroke-width="3.4" stroke-linecap="round"><line x1="66" y1="24" x2="60" y2="18"/><line x1="72" y1="20" x2="70" y2="12"/></g>'
    +'<path d="M 18 43.5 C 30 36, 38 32, 48 32 L 108 32 L 108 52 L 48 52 C 40 52, 32 49, 18 45.5 Z" fill="'+ink+'"/>'
    +'<path d="M 60 52 L 94 52 L 89 66 L 65 66 Z" fill="'+ink+'"/>'
    +'<rect x="58" y="70" width="40" height="9" rx="3" fill="'+ink+'"/>'
    +'<rect x="51" y="83" width="54" height="9" rx="3" fill="'+ink+'"/>'
    +'<rect x="44" y="96" width="68" height="9" rx="3" fill="'+ink+'"/>'
    +'</svg>';
}
// Add the watermark to `container` for capture, returning a cleanup function that
// removes whatever we added. Preferred spot: bottom-right of the LAST tier row's
// items zone. Fallback: a strip appended below the whole container when there's no
// last row, or the last row is too full to fit the mark without heavy overlap.
function addDownloadWatermark(container){
  const cleanup=[];
  const rows=container.querySelectorAll('.tier-row');
  const lastRow=rows.length?rows[rows.length-1]:null;
  const zone=lastRow?lastRow.querySelector('.tier-items'):null;
  // Estimate free space at the right of the last row's items zone.
  let roomy=false;
  if(zone){
    const items=zone.querySelectorAll('.item');
    // crude fit check: total item width vs zone width; leave ~180px for the mark.
    let used=0;items.forEach(it=>{used+=it.getBoundingClientRect().width+8;});
    const zoneW=zone.getBoundingClientRect().width;
    roomy=(zoneW-used)>=180;
  }
  if(zone&&roomy){
    // ensure the zone can host an absolutely-positioned child
    const prevPos=zone.style.position;
    if(getComputedStyle(zone).position==='static')zone.style.position='relative';
    const wm=document.createElement('div');wm.className='tlf-watermark';
    wm.innerHTML=watermarkMarkupSVG()+'<span class="tlf-wm-text">Tier List Forge.com</span>';
    zone.appendChild(wm);
    cleanup.push(()=>{wm.remove();zone.style.position=prevPos;});
  }else{
    // Fallback: a strip appended below the whole list.
    const strip=document.createElement('div');strip.className='tlf-watermark-strip';
    strip.innerHTML=watermarkMarkupSVG()+'<span class="tlf-wm-text">Tier List Forge.com</span>';
    container.appendChild(strip);
    cleanup.push(()=>strip.remove());
  }
  return ()=>cleanup.forEach(fn=>fn());
}

// v152 — download builds a CLEAN copy of the list off-screen and photographs that:
// no row controls / item buttons, every row at least one item tall, rounded border,
// padding and the site background. The watermark always sits INSIDE the last row
// (creator .tier-items and community .vt-items alike).
function tlfExportItemH(){
  const sh=(typeof imgShape!=='undefined'&&imgShape)||'square';
  return sh==='portrait'?120:80;
}
function buildDownloadExport(src){
  const w=Math.max(360,Math.round(src.getBoundingClientRect().width));
  const wrap=document.createElement('div');wrap.className='tlf-export';
  wrap.style.cssText='position:absolute;left:-30000px;top:0;padding:32px;box-sizing:content-box;width:'+w+'px;background:#15152a linear-gradient(180deg,#241a3e 0%,#15152a 55%,#0f0f1e 100%);';
  const list=src.cloneNode(true);
  list.removeAttribute('id');list.classList.remove('blurred','cc-blurable');
  list.querySelectorAll('[id]').forEach(n=>n.removeAttribute('id'));
  list.querySelectorAll('.tier-controls,.item-action-btn,.elo-unranked-band,.upload-progress-banner').forEach(n=>n.remove());
  list.querySelectorAll('.item').forEach(n=>n.classList.remove('selected','incomplete','dragging','drop-insert-before','drop-make-room'));
  list.querySelectorAll('.vt-item').forEach(n=>n.classList.remove('vt-selected','drop-insert-before','drop-make-room'));
  list.querySelectorAll('*').forEach(n=>{n.style.textShadow='none';}); // v154 — shadows soften text edges
  list.style.cssText='width:100%;margin:0;border:1px solid #3a3a55;border-radius:14px;overflow:hidden;background:#1e1e35;box-sizing:border-box';
  const minH=(tlfExportItemH()+20)+'px';
  list.querySelectorAll('.tier-items,.vt-items').forEach(z=>{z.style.minHeight=minH;z.style.outline='none';});
  list.querySelectorAll('.tier-row,.vt-row').forEach(r=>{r.style.minHeight=minH;});
  wrap.appendChild(list);document.body.appendChild(wrap);
  // watermark inside the last row
  const zones=list.querySelectorAll('.tier-items,.vt-items');const zone=zones.length?zones[zones.length-1]:null;
  if(zone){
    let used=0;zone.querySelectorAll('.item,.vt-item').forEach(it=>{used+=it.getBoundingClientRect().width+8;});
    zone.style.position='relative';
    // not enough room beside the items -> give the last row extra space at the bottom
    if((zone.getBoundingClientRect().width-used)<200)zone.style.paddingBottom='54px';
    const wm=document.createElement('div');wm.className='tlf-watermark';
    wm.innerHTML=watermarkMarkupSVG()+'<span class="tlf-wm-text">Tier List Forge.com</span>';
    zone.appendChild(wm);
  }
  return wrap;
}
async function tlfDownloadList(src,fileName,okMsg){
  const wrap=buildDownloadExport(src);
  try{
    const sc=4; // v154 — always 4x (text shadows are also removed in the export copy)
    const canvas=await html2canvas(wrap,{backgroundColor:'#15152a',scale:sc,useCORS:true});
    const a=document.createElement('a');a.download=fileName;a.href=canvas.toDataURL('image/png');a.click();
    showFlash(okMsg);
  }finally{wrap.remove();}
}
async function downloadTierList(){
  const tl=document.getElementById('tierlist');
  try{await tlfDownloadList(tl,safeFileName(currentListTitle,'tierlist')+'.png','✅ Downloaded!');}
  catch(e){showFlash('⚠️ Could not download the list');}
}
// Download the community results tier list as a PNG (mirrors downloadTierList).
async function downloadCommunityResults(){
  const tl=document.getElementById('creator-community-tierlist');
  if(!tl||!tl.children.length){showFlash('⚠️ No community results to download yet');return;}
  try{await tlfDownloadList(tl,safeFileName(currentListTitle,'community-results')+' - community.png','✅ Community results downloaded!');}
  catch(e){showFlash('⚠️ Could not download results');}
}

async function resetAll(){
  // v152 — "Reset list": nothing is deleted any more. Every item goes back to the
  // pool and every slider score is reset (all modes). The community voting session +
  // votes are cleared, and in Elo the creator's own matchup votes are reset too.
  // Items, parameters and text values stay. To delete a list entirely: My Lists.
  // Not auto-saved — the list is marked unsaved (Save / Revert as usual).
  const savedId=listRemoteDeleted?null:currentListId;
  const isElo=currentMode==='elo';
  if(!await tlfConfirm({
    title:'Reset this list?',
    message:'All items go back to the item pool and all slider scores are reset.'
      +(savedId?' Any community voting session and its votes are cleared.':'')
      +(isElo&&savedId?' Your own Elo matchup votes are reset too.':'')
      +'\n\nItems, parameters and text values are kept. To delete the list entirely, use My Lists.',
    confirmText:'Reset list',danger:true
  }))return;
  // community session + votes
  const sessToClear=savedId?currentSession:null;
  if(sessToClear){try{await manageVoting({action:'delete',listId:savedId,sessionId:sessToClear.id});}catch(e){}}
  if(savedId){currentSession=null;voteSession=null;clearCommunityResultsState();
    try{votingPanelReady=refreshVotingPanel();}catch(e){} // v153 — keep the panel; back to the "start voting" setup
  }
  // Elo: the creator's own matchup votes
  if(isElo&&savedId){
    try{await manageVoting({action:'personalReset',listId:savedId});}catch(e){}
    creatorPersonal=null;if(typeof creatorEloRanking!=='undefined')creatorEloRanking={};
    ch2hCount=0;ch2hVotedPairs.clear();ch2hRecentPairs.length=0;ch2hNextPair=null;ch2hPair=null;
    ch2hActive=false;try{localStorage.removeItem('tlf_ch2h_active_list');}catch(e){}
    try{ch2hClearSavedPair();}catch(e){}
    {const v=document.getElementById('ch2h-view'),st=document.getElementById('ch2h-start');if(v)v.style.display='none';if(st)st.style.display='';}
  }
  // slider scores (all modes)
  const sl=params.filter(p=>p.type==='slider');
  Object.keys(itemData).forEach(id=>{const pv=itemData[id]&&itemData[id].paramValues;if(pv)sl.forEach(p=>{delete pv[p.id];});});
  // every item back to the pool
  if(isElo){try{returnPoolHome();}catch(e){}}
  document.querySelectorAll('.tier-items .item').forEach(el=>addToPool(el));
  if(isElo)runEloRank();
  document.querySelectorAll('.item').forEach(el=>{try{refreshDot(el.id,el);}catch(e){}});
  if(selectedItemId&&document.getElementById(selectedItemId)){try{selectItem(selectedItemId);}catch(e){}}
  saveState();
  showFlash('🔄 List reset — items are back in the pool.');
}

// Remove a tagged toast if it's showing (used to auto-clear a warning once the
// condition that caused it is resolved).
function dismissFlash(id){
  const t=document.getElementById('flash-'+id);
  if(t){t.classList.remove('show');setTimeout(()=>t.remove(),250);}
}
// v70 — remove every toast in the stack. Warning toasts are intentionally
// persistent (no auto-dismiss), so without this they survive a sign-out and
// linger on the auth screen / into the next session. Shared by desktop+mobile.
function clearAllFlash(){
  const stack=document.getElementById('flash-stack');
  if(stack)stack.innerHTML='';
}
function showFlash(msg,opts){
  opts=opts||{};
  // Warnings (⚠️/error text) stay until dismissed; successes auto-dismiss.
  const isWarn=opts.warn!==undefined?opts.warn:/⚠️|error|failed|limit|rejected/i.test(msg);
  const stack=document.getElementById('flash-stack');if(!stack)return;
  const toast=document.createElement('div');
  toast.className='flash-toast'+(isWarn?' warn':'');
  if(opts.id){
    // Replace any existing toast with the same id (avoids duplicates).
    const prev=document.getElementById('flash-'+opts.id);if(prev)prev.remove();
    toast.id='flash-'+opts.id;
  }
  const m=document.createElement('div');m.className='flash-msg';m.textContent=msg;
  const x=document.createElement('button');x.className='flash-x';x.textContent='✕';x.setAttribute('aria-label','Dismiss');
  const remove=()=>{toast.classList.remove('show');setTimeout(()=>toast.remove(),250);};
  x.onclick=remove;
  toast.appendChild(m);
  // v77 — optional action, so a warning can offer the fix rather than just
  // reporting the problem.
  if(typeof opts.action==='function'&&opts.actionLabel){
    const a=document.createElement('button');a.className='flash-action';a.textContent=opts.actionLabel;
    a.onclick=()=>{remove();opts.action();};
    toast.appendChild(a);
  }
  toast.appendChild(x);
  stack.appendChild(toast);
  requestAnimationFrame(()=>toast.classList.add('show'));
  if(!isWarn){
    // Duration scales a little with length; short confirmations stay ~2.5s.
    const ms=Math.min(6000,Math.max(2500,msg.length*70));
    setTimeout(remove,ms);
  }
}

/* ── BOOT ── */
// ── DEV STATE RESET (testing aid; no user-visible UI) ────────────────────
// All app state this site keeps in the browser. Auth lives in Supabase's own
// storage and is NOT touched here — use a private window for a fresh login.
const TLF_STATE_KEYS=['tlm9','tlm9_anon','tlf_last_list_id','tlf_qr_hidden','tlf_qr_revealed_for','tlf_qr_size','tlf_share_collapsed','tlf_voter_token','tlf_ch2h_active_list','tlf_ch2h_pair']; // v73 — tlf_qr_hidden kept here only so old values get cleared; v84.1/84.2 — ch2h active list + saved pair; v98.0 — tlm9_anon (anonymous local canvas). NOTE: the preview-gate flag (tlf_preview_ok) is deliberately NOT here — a dev reset shouldn't lock you out of the preview door.
// tlfState() — print what's currently cached, without changing anything.
function tlfState(){
  const out={};
  TLF_STATE_KEYS.forEach(k=>{let v=null;try{v=localStorage.getItem(k);}catch(e){}
    out[k]=v===null?'(not set)':(v.length>80?v.slice(0,80)+'… ('+v.length+' chars)':v);});
  console.table(out);
  return out;
}
// tlfReset(reload=true) — clear all of it for a clean first-time state.
function tlfReset(reload){
  const cleared=[];
  TLF_STATE_KEYS.forEach(k=>{try{if(localStorage.getItem(k)!==null){localStorage.removeItem(k);cleared.push(k);}}catch(e){}});
  console.log('[TLF] cleared:',cleared.length?cleared.join(', '):'(nothing was set)');
  console.log('[TLF] note: login/auth is not cleared — use a private window to test as a new user.');
  if(reload!==false)location.reload();
  return cleared;
}
window.tlfState=tlfState;window.tlfReset=tlfReset;
// ?devreset=1 — clear state, drop the flag from the URL, then continue booting.
function tlfHandleDevResetFlag(){
  try{
    const u=new URL(window.location.href);
    if(u.searchParams.get('devreset')!=='1')return false;
    tlfReset(false);
    u.searchParams.delete('devreset');
    history.replaceState(null,'',u.pathname+(u.searchParams.toString()?'?'+u.searchParams:'')+u.hash);
    setTimeout(()=>showFlash('🧹 App state reset — testing from a clean slate'),400);
    return true;
  }catch(e){return false;}
}

// v98.2 — read tunable limits from the server so quota-tuning.sql changes apply
// without a frontend release. Overwrites the DEFAULT constants above. Fully
// non-fatal: any failure (offline, function missing, bad shape) leaves the
// built-in defaults in place, so the app always has usable numbers. Called once,
// early in boot(), before any editor UI renders.
// v154 — SITE CONTROLS (site-controls.sql via app-config v5). Levels:
// 'off' | 'owner' | 'everyone' (maintenance / live updates: 'off' | 'on'/'everyone').
let SITE_CONTROLS={};
let TLF_IS_OWNER=false;
let _cfgNetFail=false;
function siteLevel(key,dflt){const c=SITE_CONTROLS&&SITE_CONTROLS[key];return (c&&c.level)||dflt||'everyone';}
function siteAllows(key){const l=siteLevel(key);return l==='everyone'||l==='on'||(l==='owner'&&TLF_IS_OWNER);}
async function loadAppConfig(){
  try{
    const{data,error,status}=await sb.rpc('tlf_app_config');
    // v154 — a NETWORK failure (not "function missing") means the server can't be reached
    if(error&&(status===0||status>=500||/fetch|network|load failed/i.test(error.message||'')))_cfgNetFail=true;
    if(error||!data||typeof data!=='object')return;
    if(data.siteControls&&typeof data.siteControls==='object')SITE_CONTROLS=data.siteControls; // v154
    const n=(v,fallback)=>Number.isFinite(+v)&&+v>0?Math.floor(+v):fallback;
    // v100 — premium tier flag (app-config v4). The server already folds the tier
    // into maxLists below (premium 5 / free 3), so no per-tier branching is needed
    // here; we just record the flag for future gated features + UI.
    if(typeof data.isPremium==='boolean')IS_PREMIUM=data.isPremium;
    MAX_LISTS      = n(data.maxLists,      MAX_LISTS);
    MAX_ITEMS      = n(data.maxItems,      MAX_ITEMS);
    MAX_PARAMS     = n(data.maxParams,     MAX_PARAMS);
    MAX_STORAGE_MB = n(data.maxStorageMb,  MAX_STORAGE_MB);
    // anon cap must never exceed the real per-list item cap
    MAX_ITEMS_ANON = Math.min(n(data.maxItemsAnon, MAX_ITEMS_ANON), MAX_ITEMS);
    // v99.4 — viewer live-update controls (see tuning.sql section 5).
    if(typeof data.realtimeEnabled==='boolean')VIEWER_REALTIME_ENABLED=data.realtimeEnabled;
    VIEWER_POLL_MS      = n(data.viewerPollMs,     VIEWER_POLL_MS);
    // jitter may legitimately be 0 (disabled), so accept >=0 rather than >0.
    { const j=+data.viewerRtJitterMs; if(Number.isFinite(j)&&j>=0)VIEWER_RT_JITTER_MS=Math.floor(j); }
    APP_CONFIG_VERSION = (typeof data.configVersion==='string')?data.configVersion:APP_CONFIG_VERSION;
  }catch(e){/* keep defaults */}
}

// v111 (#1 alignment) — publish the QR column's WIDTH to --editor-rail-w so the row-2
// spacer reserves the same width, keeping both tier lists equal width. The QR is now the
// third column of row 1 (list | detail | QR); row 2 has no QR, so without this its list
// would run wider than row 1's by the QR width + gap. We measure #share-sticky-wrap's
// live width (it varies with QR size S/M/L, collapsed, or hidden) and add the row's 14px
// gap. On phone the editor is single-column (QR moves to the drawer), so we clear the var
// (spacer collapses to 0). Function names kept from the retired height-sync so boot() and
// renderCreatorCommunity()'s call sites still resolve.
let _railRO=null,_railRaf=0,_railLastW='';
function _doRailSync(){
  _railRaf=0;
  const root=document.querySelector('.main-layout')||document.documentElement;
  const wrap=document.getElementById('share-sticky-wrap');
  // Phone: single-column — no reserved rail. Clear the var so the spacer is 0.
  if(window.matchMedia&&window.matchMedia(PHONE_MQ).matches){
    if(_railLastW!==''){root.style.removeProperty('--editor-rail-w');_railLastW='';}
    return;
  }
  if(!wrap){if(_railLastW!==''){root.style.removeProperty('--editor-rail-w');_railLastW='';}return;}
  // The QR column's own border-box width. Row 2 already places its own 14px row gap
  // before the spacer — the same gap row 1 has between the detail panel and the QR — so
  // reserving JUST the QR width here makes both lists exactly equal. (v111 added the gap
  // on top, over-reserving by 14px and pushing row 2's list 14px narrow.) If the wrap is
  // display:none (moved to the phone drawer) its width is 0 → var 0.
  const w=Math.round(wrap.getBoundingClientRect().width);
  const want=(w>0)?(w+'px'):'0px';
  if(want!==_railLastW){root.style.setProperty('--editor-rail-w',want);_railLastW=want;}
}
function syncEditorRow1Height(){
  // Name kept for the existing call sites. Debounced via rAF so a burst of RO callbacks
  // collapses into one pass.
  if(_railRaf)return;
  _railRaf=requestAnimationFrame(_doRailSync);
}
function startEditorRow1HeightSync(){
  const wrap=document.getElementById('share-sticky-wrap');
  syncEditorRow1Height();
  if(_railRO)return;
  try{
    // Observe the QR column so any width change (S/M/L, collapse, show/hide) re-publishes.
    _railRO=new ResizeObserver(()=>syncEditorRow1Height());
    if(wrap)_railRO.observe(wrap);
  }catch(e){/* ResizeObserver unavailable — fall back to resize + manual calls */}
  window.addEventListener('resize',syncEditorRow1Height);
}

async function boot(){
  tlfHandleDevResetFlag(); // must run before any cached state is read
  startEditorRow1HeightSync(); // v111 — publish the QR column width to --editor-rail-w so row 2 reserves it (equal list widths)
  // v98.2 — pull server-tuned limits before anything renders, but never let a
  // slow/hung network hold up boot: race the read against a short timeout. On
  // timeout we proceed with the built-in default limits.
  try{await Promise.race([loadAppConfig(),new Promise(r=>setTimeout(r,2500))]);}catch(e){}
  // v154 — LEVEL 2: the server can't be reached at all (e.g. Supabase paused) →
  // show the "unavailable" page and retry instead of a broken app.
  if(_cfgNetFail&&!(await tlfProbeBackend())){tlfShowOutage();return;}
  // v154 — maintenance mode (owner passes) + start the 1-minute switch check
  try{await tlfApplyMaintenance();}catch(e){}
  tlfStartSitePoll();
  // v116 — PASSWORD RECOVERY return: the reset-email link comes back with
  // #access_token=...&type=recovery. Detect it BEFORE the normal OAuth-token
  // handling so we land on the "set a new password" screen rather than dropping
  // the recovery session straight into the app. (The onAuthStateChange
  // PASSWORD_RECOVERY event also covers this; this is the boot-time safety net.)
  if(window.location.hash&&window.location.hash.includes('type=recovery')){
    try{await sb.auth.getSessionFromUrl?.({storeSession:true});}catch(e){}
    history.replaceState(null,'',window.location.origin+window.location.pathname+window.location.search);
    showResetScreen();
    return;
  }
  // v131 — OAuth (implicit-flow legacy) hash safety net: if an old #access_token
  // still arrives, consume + strip it. PKCE returns ?code instead (handled below).
  if(window.location.hash&&window.location.hash.includes('access_token')){
    try{await sb.auth.getSessionFromUrl?.({storeSession:true});}catch(e){}
    try{const{data:{session}}=await sb.auth.getSession();if(session)currentUser=session.user;}catch(e){}
    stripUrlHash();
    [0,50,150,300,600,1000].forEach(ms=>setTimeout(stripUrlHash,ms));
  }
  const urlParams=new URLSearchParams(window.location.search);
  // v131 — PKCE OAuth return carries BOTH ?code and ?state. A tier-list share link
  // carries ?code only. So if ?state is present, this ?code is the OAuth code (the
  // client auto-exchanges it via detectSessionInUrl) — NOT a share code. Wait for
  // the session, then strip code+state for a clean URL.
  if(urlParams.get('code')&&urlParams.get('state')){
    try{const{data:{session}}=await sb.auth.getSession();if(session)currentUser=session.user;}catch(e){}
    const u=new URL(window.location.href);
    u.searchParams.delete('code');u.searchParams.delete('state');
    history.replaceState(null,'',u.pathname+(u.searchParams.toString()?'?'+u.searchParams:''));
  }
  const code=(urlParams.get('code')&&!urlParams.get('state'))?urlParams.get('code'):null;
  if(code){
    document.getElementById('auth-screen').classList.add('hidden');
    try{
      const{data,error}=await sb.from('tier_lists').select('id,title,data,share_token,is_public,updated_at').eq('share_token',code).eq('is_public',true).single(); // v77 — never user_id
      if(data&&!error){showViewer(data,true);return;}
    }catch(e){}
    // v140 — the shared list is private or gone. Strip the dead code, then: an
    // anonymous visitor gets the anon view (not the login wall); a signed-in user
    // falls through to their own app below.
    {const u=new URL(window.location.href);u.searchParams.delete('code');history.replaceState(null,'',u.pathname+(u.searchParams.toString()?'?'+u.searchParams:''));}
    let _codeSess=null;try{const r=await sb.auth.getSession();_codeSess=r.data.session;}catch(e){}
    if(!_codeSess){
      hideBootGate();
      enterAnonMode();
      showFlash('This shared list isn’t available anymore.',{warn:true});
      return;
    }
    currentUser=_codeSess.user;
    // signed in — fall through to the normal boot below (loads their lists).
  }
  // v104 (Phase 6) — partner INVITE redemption. A creator lands on /?invite=CODE.
  // Stash the code; once they're authenticated (existing session, or after they
  // sign up / log in), redeemPendingInvite() grants their free premium. If they
  // aren't signed in yet, show the auth screen with a claim banner.
  const invite=urlParams.get('invite');
  if(invite){
    _pendingInvite=invite.trim();
    const{data:{session:invSess}}=await sb.auth.getSession();
    if(!invSess){
      // Not signed in: show auth with a friendly banner; redeem runs post-auth.
      const b=document.getElementById('invite-claim-banner');
      if(b){b.style.display='';b.textContent='🎁 You’ve been invited! Sign up or log in and your partner status is applied automatically.';}
      document.getElementById('auth-screen').classList.remove('hidden');
      hideBootGate();return;
    }
    // Already signed in — fall through to the normal session path; the invite is
    // redeemed after the 2FA gate clears (see proceedAfterMfa / the session block).
  }
  const{data:{session}}=await sb.auth.getSession();
  if(session){
    currentUser=session.user;
    document.getElementById('auth-screen').classList.add('hidden');
    // v101.1 (Phase 3b, layer 1) — 2FA gate on reload. If this restored session
    // has a factor but is only aal1, show the challenge and stop; proceedAfterMfa
    // restores the canvas once they pass. Preserve any pending carry-over across
    // the challenge.
    const okToProceed=await mfaGate();
    if(!okToProceed){
      _mfaPendingCarry=anonCarryPending();
      hideBootGate();
      return;
    }
    document.getElementById('app').style.display='block';
    // Reload = restore the exact working state (saved list, unsaved edits, or a
    // new unsaved list). tlm9 carries the list identity so Save targets the right
    // list. We still fetch the list list for the picker, but never auto-load over
    // the restored canvas. If there's no cached work, init() falls back to fresh.
    let hasCache=false;
    try{hasCache=!!localStorage.getItem('tlm9');}catch(e){}
    // v98.0 stage 2 — social-login carry-over: a signed-out anon user chose a
    // social provider from the popup/sign-in screen, which redirected away and
    // reloaded the page. We're now signed in with a pending carry flag. Re-home +
    // auto-save the anon list instead of restoring their tlm9 / a saved list.
    if(anonCarryPending()){
      anonMode=false;applyAnonChrome();
      loadMyLists(true).then(()=>runAnonCarryOver());
      refreshAdminButton();
      hideBootGate();
      return;
    }
    if(hasCache){
      init();                 // restore canvas + identity from tlm9
      // v84.6 — if the restored canvas is an UNSAVED draft (no list id) but the
      // user has saved lists, don't strand them on the empty draft: open their most
      // recent saved list instead. A restored SAVED list (has an id) is kept as-is,
      // so a genuine reload still lands exactly where you were.
      if(!currentListId){
        // Draft with no id. If they have saved lists, open the most recent; if they
        // have none, keep the draft (don't wipe it). loadMyLists auto-loads only
        // when a saved list exists — but its empty-case calls initFresh which would
        // clear the draft, so gate on the fetched list count.
        loadMyLists(true).then(()=>{
          if(myLists.length>0){const lastId=localStorage.getItem('tlf_last_list_id');const found=myLists.find(l=>l.id===lastId);loadList(found?found.id:myLists[0].id);}
        });
      }else{
        loadMyLists(true);    // populate picker only; keep the restored saved list
        checkForRemoteChanges();// v74 — refresh if another device moved this list on
        startCreatorRealtime(currentListId); // v76 — then keep watching it live
      }
    }else{
      initFresh(true);showListLoading();
      loadMyLists();          // no cache: load their most recent saved list
    }
    refreshAdminButton();
    redeemPendingInvite();    // v104 — signed-in user landed via ?invite=
  }else if(tlfPreviewGatePassed()){
    // v98.0 — NO session, but this device passed the ?try= preview gate: this is
    // the new anonymous landing page. Show the editor (Manual/Auto only; Save/
    // voting/Elo are account-gated in stage 2) and restore any local anon work.
    enterAnonMode();
  }
  sb.auth.onAuthStateChange((event,session)=>{
    // v116 — arriving from a password-reset link fires PASSWORD_RECOVERY. Show the
    // "set a new password" screen instead of dropping into the app. Guard the SIGNED_IN
    // branch below so the recovery session doesn't auto-proceed.
    if(event==='PASSWORD_RECOVERY'){
      showResetScreen();
      return;
    }
    if(_inPasswordRecovery)return; // stay on the reset screen until they submit
    // v120 (item 1) — ALWAYS strip on SIGNED_IN, even when currentUser is already
    // set (the boot OAuth path sets it before this fires). The client can rewrite
    // the URL to a bare "#" right as this event lands; a short chain catches it.
    if(event==='SIGNED_IN'){[0,50,150,300,600].forEach(ms=>setTimeout(stripUrlHash,ms));}
    if(event==='SIGNED_IN'&&session&&!currentUser){
      currentUser=session.user;
      // v119 (item 2) — remember the provider for the auth-screen "Last used" badge.
      // v152 — app_metadata.provider is the account's FIRST provider, not the one just
      // used, so it overwrote the real choice. The click handlers record the method;
      // only fall back to the provider when nothing was recorded yet.
      try{const p=session.user?.app_metadata?.provider;if(p&&p!=='email'&&!getLastLoginMethod())rememberLoginMethod(p);}catch(e){}
      anonMode=false;applyAnonChrome();   // v98.0 — leaving any anon flow
      document.getElementById('auth-screen').classList.add('hidden');
      document.getElementById('app').style.display='block';
      // v98.0 stage 2 — pending carry-over (e.g. OAuth return) takes precedence
      // over loading a saved list.
      if(anonCarryPending()){
        loadMyLists(true).then(()=>runAnonCarryOver());
        refreshAdminButton();
        return;
      }
      // Fresh sign-in (not a reload): load their most recent saved list.
      initFresh(true);showListLoading();
      loadMyLists();
      refreshAdminButton();
    }
  });
  // Boot decision complete (logged-in rendered, or auth screen shown) — reveal
  // immediately. The voting panel populates a beat later on its own (its inner
  // sections start hidden, so nothing wrong flashes); we don't hold the whole
  // screen on that network call.
  applyLastUsedBadge(); // v119 item 2 — badge the last-used login button if we're on auth
  wireFileDropZones();  // v119 item 3 — bind file-drop on the pool now (idempotent; mode changes re-bind)
  hideBootGate();
}

function hideBootGate(){
  const g=document.getElementById('app-boot-gate');
  if(!g)return;
  g.classList.add('hide');
  setTimeout(()=>{g.style.display='none';},300);
}

boot();
</script>
</body>
</html>