/* timeline-desktop.css -- desktop horizontal drag-and-drop Timeline.
   All selectors scoped under .tlx- so PB template chrome CSS never collides.
   Vanilla, broad-browser: transform/opacity animations only; no filters. */

/* hidden attribute must always win over the display rules below (overlay/timer/etc.) */
.tlx-app [hidden] { display:none !important; }

.tlx-app { --tlx-bg:#1f2933; --tlx-panel:#2b3742; --tlx-line:#3d4b57; --tlx-ink:#eef2f5;
  --tlx-mut:#9fb0bd; --tlx-accent:#4c9be8; --tlx-good:#3fb56b; --tlx-bad:#e0554b;
  --tlx-gold:#e8b04c; --tlx-tile:#f4f0e6; --tlx-tileink:#2b2620;
  color:var(--tlx-ink); background:var(--tlx-bg); font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none; user-select:none; display:flex; flex-direction:column;
  min-height:520px; border-radius:8px; overflow:hidden; position:relative; }

/* ---- HUD ---- (moved to the BOTTOM of the game area on desktop via flex order) */
.tlx-hud { display:flex; align-items:center; gap:16px; padding:10px 16px;
  background:var(--tlx-panel); border-top:1px solid var(--tlx-line); flex-wrap:wrap; order:10; }
.tlx-lives { letter-spacing:3px; font-size:18px; color:var(--tlx-bad); min-width:60px; }
.tlx-lives .off { color:var(--tlx-line); }
.tlx-score { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.tlx-streak { margin-left:6px; font-size:13px; font-weight:700; color:var(--tlx-gold);
  padding:1px 7px; border:1px solid var(--tlx-gold); border-radius:10px; }
.tlx-streak.hot { color:#fff; background:#c9502e; border-color:#c9502e; }
.tlx-badge { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--tlx-bg);
  background:var(--tlx-gold); padding:2px 8px; border-radius:4px; }
.tlx-spring { flex:1 1 auto; }
.tlx-remain { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--tlx-mut);
  font-variant-numeric:tabular-nums; }
.tlx-remain #tlx-remain-n { font-weight:800; color:var(--tlx-ink); }
/* mini card-stack glyph (pure CSS; echoes the old deck stack, shrunk) */
.tlx-mini-stack { width:13px; height:17px; border-radius:3px; background:var(--tlx-mut);
  box-shadow:2px 2px 0 -1px var(--tlx-panel), 2px 2px 0 0 var(--tlx-mut),
             4px 4px 0 -1px var(--tlx-panel), 4px 4px 0 0 var(--tlx-mut); margin-right:4px; }
.tlx-menu { background:none; border:1px solid var(--tlx-line); color:var(--tlx-ink);
  border-radius:6px; width:34px; height:30px; font-size:16px; cursor:pointer; }

/* ranked countdown */
.tlx-timer { display:flex; align-items:center; gap:8px; min-width:150px; }
.tlx-timer-track { flex:1; height:8px; background:var(--tlx-line); border-radius:4px; overflow:hidden; }
.tlx-timer-fill { height:100%; width:100%; background:var(--tlx-good);
  transition:width .1s linear, background-color .3s; }
.tlx-timer.warn .tlx-timer-fill { background:var(--tlx-gold); }
.tlx-timer.danger .tlx-timer-fill { background:var(--tlx-bad); }
.tlx-timer-num { font-size:13px; font-variant-numeric:tabular-nums; min-width:26px; text-align:right; }

/* ---- overview: A's single continuous strip of all events (context + navigation) ---- */
.tlx-over { position:relative; margin:10px 16px 0; background:#212b34; border:1px solid var(--tlx-line);
  border-radius:8px; cursor:pointer; overflow:hidden; padding:0 4px; }
.tlx-over-strip { display:flex; align-items:flex-end; width:100%; height:62px; }
.tlx-omark { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; padding-bottom:7px; opacity:.55; border-radius:6px; transition:opacity .12s; }
.tlx-omark.inwin { opacity:1; background:rgba(76,155,232,.16); box-shadow:inset 0 -2px 0 var(--tlx-accent); }
.tlx-omark.anchor .tlx-ico { color:var(--tlx-accent); }
.tlx-omark .tlx-ico { color:#a99e84; flex:0 0 auto; }
.tlx-odate { font-weight:800; color:#fff; white-space:nowrap; border-radius:7px; }
.tlx-over-strip.d-lg .tlx-ico { width:20px; height:20px; }
.tlx-over-strip.d-lg .tlx-odate { margin-top:5px; font-size:12px; padding:1px 6px; }
.tlx-over-strip.d-md .tlx-ico { width:17px; height:17px; }
.tlx-over-strip.d-md .tlx-odate { margin-top:4px; font-size:11px; padding:1px 4px; }
.tlx-over-strip.d-sm .tlx-ico { width:14px; height:14px; }
.tlx-over-strip.d-sm .tlx-odate { margin-top:5px; width:5px; height:18px; font-size:0; border-radius:3px; } /* era tick; date on hover / in window */

/* Task 9: "VIEWING" bracket -- spans the in-window marks so the shown slice is obvious */
.tlx-viewing { position:absolute; top:2px; bottom:2px; z-index:3; pointer-events:none;
  border:2px solid var(--tlx-accent); border-radius:8px;
  box-shadow:0 0 0 2px rgba(76,155,232,.14); transition:left .15s ease, width .15s ease; }
.tlx-viewing-tab { position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:var(--tlx-accent); color:#fff; font-size:9px; font-weight:700; letter-spacing:1px;
  line-height:1.5; padding:0 6px; border-radius:0 0 4px 4px; white-space:nowrap; }

/* ---- timeline strip (detail window) ---- */
.tlx-stripwrap { position:relative; flex:1 1 auto; display:flex; align-items:center;
  padding:16px 6px; overflow:hidden; }
.tlx-step { flex:0 0 auto; width:30px; height:64px; border-radius:8px; border:1px solid var(--tlx-line);
  background:var(--tlx-panel); color:var(--tlx-ink); font-size:22px; cursor:pointer; opacity:.85; }
.tlx-step:hover { opacity:1; border-color:var(--tlx-accent); }
.tlx-step[disabled] { opacity:.3; cursor:default; }
.tlx-strip.win { overflow:hidden; justify-content:center; flex-wrap:nowrap; padding:8px 4px 10px; }
.tlx-strip.win .tlx-tile { width:107px; }
.tlx-strip.win .tlx-tile.narrow { width:107px; }
.tlx-endlabel { position:absolute; top:6px; font-size:11px; letter-spacing:1px; color:var(--tlx-mut); }
.tlx-endlabel.left { left:14px; } .tlx-endlabel.right { right:14px; }
.tlx-strip { display:flex; align-items:stretch; gap:0; overflow-x:auto; overflow-y:hidden;
  width:100%; padding:8px 0 14px; scroll-behavior:smooth; }
.tlx-strip::-webkit-scrollbar { height:8px; } .tlx-strip::-webkit-scrollbar-thumb { background:var(--tlx-line); border-radius:4px; }

/* drop gaps */
.tlx-gap { flex:0 0 auto; width:16px; align-self:center; height:150px; border-radius:6px;
  position:relative; cursor:pointer; transition:width .15s ease, background-color .15s; }
.tlx-gap:before { content:""; position:absolute; left:50%; top:12px; bottom:12px; width:2px;
  transform:translateX(-50%); background:var(--tlx-line); border-radius:2px; transition:background-color .15s; }
.tlx-gap:hover:before, .tlx-gap.sel:before { background:var(--tlx-accent); }
.tlx-gap.active { width:120px; background:rgba(76,155,232,.12); }
.tlx-gap.active:before { display:none; }
.tlx-gap.active:after { content:"DROP HERE"; position:absolute; inset:8px; border:2px dashed var(--tlx-accent);
  border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px;
  letter-spacing:1px; color:var(--tlx-accent); }
.tlx-gap.sel { width:118px; }
.tlx-gap.sel .tlx-ghost { display:flex; }
.tlx-ghost { display:none; position:absolute; inset:6px; border-radius:8px;
  background:rgba(244,240,230,.10); border:2px dashed var(--tlx-accent);
  flex-direction:column; align-items:center; justify-content:center; padding:6px; text-align:center; }
.tlx-ghost .tlx-ico { width:26px; height:26px; color:var(--tlx-accent); }
.tlx-ghost span { font-size:11px; color:var(--tlx-accent); margin-top:4px; }

/* ---- tiles ---- */
.tlx-tile { flex:0 0 auto; width:131px; min-height:150px; background:var(--tlx-tile);
  color:var(--tlx-tileink); border-radius:10px; padding:10px; display:flex; flex-direction:column;
  align-items:center; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.35); position:relative; }
.tlx-tile.narrow { width:110px; }
.tlx-tile .tlx-ico { width:30px; height:30px; margin:2px 0 6px; color:#6a5f4a; }
.tlx-tile-title { font-size:12.5px; font-weight:600; line-height:1.25; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
.tlx-chip { margin-top:auto; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums;
  padding:4px 12px; border-radius:12px; color:#fff; background:#6a5f4a; }
.tlx-chip.q { background:#c9bfa8; color:#6a5f4a; letter-spacing:1px; }
.tlx-tile.anchor { outline:2px solid var(--tlx-accent); }

/* ---- Design A: illustrated placed tiles. Picture fills the tile, a solid era-coloured date bar is
   pinned along the bottom (date + era colour always visible), and the title slides up over the picture
   on hover. No category icon. Un-illustrated events fall back to their title as always-on text.
   Scoped to .tlx-strip so the drag-ghost (.tlx-tile.tlx-draghost) keeps its own look. ---- */
.tlx-strip .tlx-tile { padding:0; overflow:hidden; height:158px; min-height:0; justify-content:flex-start; }
.tlx-strip.win .tlx-tile { height:158px; }
.tlx-strip .tlx-pic { position:absolute; inset:0 0 30px 0; background:#efe7d6; display:flex;
  align-items:center; justify-content:center; overflow:hidden; }
.tlx-strip .tlx-tileimg { width:100%; height:100%; object-fit:cover; display:block; }
.tlx-strip .tlx-noimg-t { padding:8px 9px; font-size:12px; font-weight:600; line-height:1.25;
  color:var(--tlx-tileink); text-align:center; }
.tlx-strip .tlx-datebar { position:absolute; left:0; right:0; bottom:0; height:30px; display:flex;
  align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
  font-variant-numeric:tabular-nums; }
.tlx-strip .tlx-titleover { position:absolute; left:0; right:0; bottom:30px; padding:8px 9px;
  background:linear-gradient(to top,rgba(24,20,15,.94),rgba(24,20,15,.82)); color:#fff; font-size:11.5px;
  font-weight:600; line-height:1.25; text-align:center; transform:translateY(101%);
  transition:transform .14s ease; pointer-events:none; }
.tlx-strip .tlx-tile:hover .tlx-titleover { transform:translateY(0); }

/* era tints on revealed chips (era 0..7) */
.era0{background:#7b5ea7}.era1{background:#4f74b8}.era2{background:#3f8fa3}
.era3{background:#3fa36a}.era4{background:#8a9b3f}.era5{background:#c39a3f}
.era6{background:#c96f3f}.era7{background:#c94f6f}

/* reveal feedback */
.tlx-tile.reveal-good { animation:tlx-pop .45s cubic-bezier(.34,1.4,.5,1); outline:2px solid var(--tlx-good); }
.tlx-tile.reveal-bad { animation:tlx-shake .4s ease; outline:2px solid var(--tlx-bad); }
@keyframes tlx-pop { 0%{transform:scale(.82)} 55%{transform:scale(1.07)} 78%{transform:scale(.985)} 100%{transform:scale(1)} }
@keyframes tlx-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* -- placement flare: gilded seal (correct) / slipped pen (incorrect) -- */
.tlx-burst { position:absolute; z-index:60; pointer-events:none; width:0; height:0; }
.tlx-burst .spark { position:absolute; left:-4px; top:-2px; width:10px; height:4px; border-radius:2px;
  box-shadow:0 0 5px rgba(232,176,76,.55); opacity:0; animation:tlx-spark .66s cubic-bezier(.15,.6,.35,1) forwards; }
@keyframes tlx-spark { 0%{opacity:1; transform:translate(0,0) rotate(0) scale(1)} 70%{opacity:1}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4)} }
.tlx-burst .ring { position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%;
  border:2px solid var(--tlx-good); opacity:0; animation:tlx-ring .5s ease-out forwards; }
.tlx-burst.t1 .ring, .tlx-burst.t2 .ring, .tlx-burst.t3 .ring { border-color:var(--tlx-gold); }
.tlx-burst.t2 .ring, .tlx-burst.t3 .ring { width:34px; height:34px; left:-17px; top:-17px; }
@keyframes tlx-ring { 0%{opacity:.9; transform:scale(.4)} 100%{opacity:0; transform:scale(2.4)} }
.tlx-tile.ripple-l { animation:tlx-rip-l .4s ease-out .06s; }
.tlx-tile.ripple-r { animation:tlx-rip-r .4s ease-out .06s; }
@keyframes tlx-rip-l { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-7px)} }
@keyframes tlx-rip-r { 0%,100%{transform:translateX(0)} 35%{transform:translateX(7px)} }
#tlx-score { display:inline-block; }
#tlx-score.bump { animation:tlx-scorebump .35s ease-out; }
@keyframes tlx-scorebump { 0%,100%{transform:scale(1); color:var(--tlx-gold)} 40%{transform:scale(1.28); color:var(--tlx-gold)} }
.tlx-streak.pulse { animation:tlx-stkpulse .3s ease-out; }
@keyframes tlx-stkpulse { 0%,100%{transform:scale(1)} 45%{transform:scale(1.2)} }
.tlx-stripwrap.shudder { animation:tlx-shudder .32s ease-out; }
@keyframes tlx-shudder { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-2px)} }
.tlx-tile.reveal-bad .tlx-chip, .tlx-tile.reveal-bad .tlx-datebar { animation:tlx-inkflash .55s ease; }
@keyframes tlx-inkflash { 0%,40%{outline:2px solid var(--tlx-bad); outline-offset:2px; transform:scale(1.12)}
  100%{outline:2px solid transparent; outline-offset:2px; transform:scale(1)} }
.tlx-heartdrop { position:absolute; z-index:70; pointer-events:none; font-size:20px; color:var(--tlx-bad);
  text-shadow:0 1px 3px rgba(0,0,0,.5); animation:tlx-heartdrop .6s ease-in forwards; }
@keyframes tlx-heartdrop { 0%{opacity:1; transform:translate(0,0) rotate(0)} 100%{opacity:0; transform:translate(6px,42px) rotate(24deg)} }
.tlx-ribbon { position:absolute; z-index:75; top:22%; left:50%; transform:translate(-50%,0); pointer-events:none;
  padding:6px 16px; border-radius:999px; background:rgba(20,26,32,.88); border:1px solid var(--tlx-gold);
  color:var(--tlx-gold); font-weight:800; letter-spacing:2px; font-size:15px; white-space:nowrap;
  animation:tlx-ribbon .7s ease forwards; }
@keyframes tlx-ribbon { 0%{opacity:0; transform:translate(-50%,0) scale(.7)} 20%{opacity:1; transform:translate(-50%,0) scale(1.08)}
  70%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,-14px) scale(1)} }

/* correct/incorrect cues: window flash + big verdict mark */
.tlx-stripwrap.flash-good:after, .tlx-stripwrap.flash-bad:after { content:""; position:absolute;
  inset:0; pointer-events:none; z-index:5; animation:tlx-flash .56s ease; }
.tlx-stripwrap.flash-good:after { background:radial-gradient(ellipse at center, rgba(63,181,107,.32), rgba(63,181,107,0) 70%); }
.tlx-stripwrap.flash-bad:after { background:radial-gradient(ellipse at center, rgba(224,85,75,.34), rgba(224,85,75,0) 70%); }
@keyframes tlx-flash { 0%{opacity:1} 100%{opacity:0} }
#tlx-verdict { position:absolute; top:42%; left:50%; z-index:80; pointer-events:none; opacity:0;
  font-size:96px; font-weight:900; line-height:1; text-shadow:0 3px 14px rgba(0,0,0,.55);
  transform:translate(-50%,-50%); }
#tlx-verdict.good { color:var(--tlx-good); } #tlx-verdict.bad { color:var(--tlx-bad); }
#tlx-verdict.show { animation:tlx-verdict .85s ease; }
@keyframes tlx-verdict { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)} 70%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)} }

/* points fly-up */
.tlx-fly { position:absolute; z-index:40; font-weight:800; font-size:20px; color:var(--tlx-good);
  pointer-events:none; animation:tlx-fly 1s ease forwards; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.tlx-fly.fast { color:var(--tlx-gold); font-size:23px; }
@keyframes tlx-fly { 0%{opacity:0; transform:translateY(6px)} 15%{opacity:1}
  100%{opacity:0; transform:translateY(-46px)} }

/* ---- tray: a centered "draw dock" (current card) + side blurb/hint ---- */
.tlx-tray { display:flex; align-items:center; justify-content:center; gap:24px; padding:16px 18px;
  background:var(--tlx-panel); border-top:1px solid var(--tlx-line); min-height:150px; flex-wrap:wrap; }
/* launch pad: a rounded inset well with a faint upward chevron behind the card */
.tlx-dock { position:relative; flex:0 0 auto; padding:14px 20px 12px; border-radius:16px;
  background:radial-gradient(120% 90% at 50% 130%, rgba(76,155,232,.12), rgba(76,155,232,0) 60%), #232d36;
  box-shadow:inset 0 0 0 1px var(--tlx-line), inset 0 6px 14px rgba(0,0,0,.28); }
.tlx-dock:before { content:""; position:absolute; top:5px; left:50%; width:14px; height:14px;
  border-left:2px solid var(--tlx-accent); border-top:2px solid var(--tlx-accent);
  transform:translateX(-50%) rotate(45deg); opacity:.45; }
.tlx-current { position:relative; z-index:2; width:200px; height:320px; background:var(--tlx-tile);
  color:var(--tlx-tileink); border-radius:12px; padding:0; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; text-align:center; cursor:grab; touch-action:none;
  transition:transform .15s ease, box-shadow .15s ease;
  /* stacked-deck shadow implying more cards behind */
  box-shadow:0 4px 12px rgba(0,0,0,.4),
             5px 5px 0 -1px var(--tlx-panel), 5px 5px 0 0 rgba(244,240,230,.55),
             10px 10px 0 -1px var(--tlx-panel), 10px 10px 0 0 rgba(244,240,230,.30); }
.tlx-current:hover { transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,.45),
             5px 5px 0 -1px var(--tlx-panel), 5px 5px 0 0 rgba(244,240,230,.55),
             10px 10px 0 -1px var(--tlx-panel), 10px 10px 0 0 rgba(244,240,230,.30); }
.tlx-current:active { cursor:grabbing; }
.tlx-current.dragging { opacity:.25; }
.tlx-current.sel { outline:2px solid var(--tlx-accent); outline-offset:2px; }
/* Design 01: illustration fills the top edge-to-edge (icon centred behind it as the fallback). */
.tlx-imgwrap { position:relative; width:100%; height:190px; flex:0 0 190px; display:flex; align-items:center;
  justify-content:center; background:#efe7d6; overflow:hidden; }
.tlx-imgwrap .tlx-ico { width:48px; height:48px; color:#8a7f6b; }
.tlx-cardimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Full Tahoma title -- fills the fixed remaining band, centred, and (sized for the longest titles)
   never clamped on the current-to-place card. Card height stays constant regardless of title length. */
.tlx-current-title { flex:1 1 auto; display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:Tahoma,Geneva,Verdana,sans-serif; font-size:14px; font-weight:700;
  line-height:1.2; color:#2b2620; padding:10px 12px; text-align:center; }
/* -- resolved card shown in the tray during the post-placement hold -- */
.tlx-current.tlx-resolved { cursor:default; animation:tlx-resolve .3s cubic-bezier(.2,.8,.3,1); }
.tlx-current.tlx-resolved:hover { transform:none; }
.tlx-current.tlx-resolved.good { outline:3px solid var(--tlx-good); outline-offset:-1px; }
.tlx-current.tlx-resolved.bad  { outline:3px solid var(--tlx-bad);  outline-offset:-1px; }
.tlx-current.tlx-resolved .tlx-chip { margin:8px auto 12px; }
@keyframes tlx-resolve { 0%{transform:rotateX(30deg) scale(.94); opacity:.35} 100%{transform:none; opacity:1} }
.tlx-vbadge { position:absolute; top:6px; right:8px; font-size:24px; font-weight:900; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.35); }
.tlx-resolved.good .tlx-vbadge { color:var(--tlx-good); }
.tlx-resolved.bad  .tlx-vbadge { color:var(--tlx-bad); }
.tlx-hint.tlx-outcome { font-weight:800; font-size:16px; }
.tlx-outcome.good { color:var(--tlx-good); }
.tlx-outcome.bad  { color:var(--tlx-bad); }
/* -- "new card dealt" deal-in: the fresh card slides up off the deck -- */
.tlx-current.tlx-deal { animation:tlx-deal .34s cubic-bezier(.2,.85,.3,1); }
@keyframes tlx-deal { 0%{transform:translateY(24px) scale(.9) rotate(-2deg); opacity:0}
  55%{opacity:1} 100%{transform:none; opacity:1} }
.tlx-current-title { font-size:15px; font-weight:700; line-height:1.25; }
/* Task 7: canvas-painted card text (unplaced card + drag ghost) -- uncopyable, absent from source */
.tlx-cardtext { display:flex; justify-content:center; }
.tlx-textcanvas { display:block; }
/* Fixed-basis so the dock's horizontal position never depends on blurb length: the side
   column reserves a constant 520px whether the blurb is short, long, hidden (pre-placement)
   or revealed (post-placement). Prevents the card "hopping" left/centre between states. */
.tlx-dockside { flex:0 0 520px; max-width:100%; min-width:0; }
.tlx-blurb { font-size:14px; line-height:1.4; color:var(--tlx-ink); text-align:center; }
.tlx-hint { font-size:13px; color:var(--tlx-mut); margin-top:8px; text-align:center; }

/* floating drag ghost */
.tlx-draghost { position:fixed; z-index:1000; width:140px; pointer-events:none;
  transform:translate(-50%,-50%) rotate(2deg) scale(1.05); }

/* overlay (gameover/menu) */
.tlx-overlay { position:absolute; inset:0; background:rgba(20,26,32,.86); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:100; }
.tlx-card { background:var(--tlx-panel); border:1px solid var(--tlx-line); border-radius:12px;
  padding:24px; max-width:460px; width:100%; text-align:center; }
.tlx-card h2 { margin:0 0 6px; } .tlx-card p { color:var(--tlx-mut); margin:6px 0; }
.tlx-big { font-size:40px; font-weight:800; margin:8px 0; }
.tlx-share { font-family:monospace; font-size:18px; letter-spacing:2px; margin:10px 0; }
.tlx-btn { background:var(--tlx-accent); color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-size:15px; font-weight:700; cursor:pointer; margin:4px; }
.tlx-btn.ghost { background:none; border:1px solid var(--tlx-line); color:var(--tlx-ink); }
.tlx-lb { text-align:left; margin:12px 0; max-height:200px; overflow:auto; }
.tlx-lb-row { display:flex; justify-content:space-between; padding:4px 8px; border-bottom:1px solid var(--tlx-line); font-size:13px; }
.tlx-lb-row.you { background:rgba(76,155,232,.15); border-radius:4px; }

.tlx-toast { position:absolute; left:50%; bottom:170px; transform:translateX(-50%);
  background:#12181e; border:1px solid var(--tlx-line); color:var(--tlx-ink); padding:10px 16px;
  border-radius:8px; font-size:14px; max-width:80%; text-align:center; z-index:60; opacity:0;
  transition:opacity .25s; pointer-events:none; }
.tlx-toast.show { opacity:1; }

.tlx-sronly { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .tlx-tile.reveal-good,.tlx-tile.reveal-bad,.tlx-tile.reveal-bad .tlx-chip,.tlx-tile.ripple-l,.tlx-tile.ripple-r,
  .tlx-fly,.tlx-strip,.tlx-viewing,.tlx-current,#tlx-score.bump,.tlx-streak.pulse,.tlx-stripwrap.shudder,
  .tlx-burst .spark,.tlx-burst .ring,.tlx-heartdrop,.tlx-current.tlx-resolved,.tlx-current.tlx-deal { animation:none!important; transition:none!important; scroll-behavior:auto; }
  .tlx-ribbon { animation:tlx-ribbon-rm 1.1s ease forwards!important; }
}
@keyframes tlx-ribbon-rm { 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
/* small screens: blurb hidden, so let the side column collapse (don't reserve the 520px) and
   keep placed cards ~6.5% narrower here too. */
@media (max-width: 820px) { .tlx-blurb { display:none; } .tlx-tile { width:112px; }
  .tlx-dockside { flex:0 1 auto; } }