/* ===========================================================================
   You.Goat.Magic! — Digital MVP stylesheet (approved-mockup layout)
   ---------------------------------------------------------------------------
   Workshop CENTERED, four bars around it (top / left / right / bottom):
     • TOP    — brand + seed/new-game + AP pips + the ONE gold flashing banner.
     • LEFT   — opponent stations (avatar + funny name + hand backs + hidden +
                tokens; the active opponent gets a gold ring + "playing now").
     • CENTER — the Workshop: Faded Amulets, each placed Goat Arcana rendered as
                the ACTUAL card at card proportions with a drop shadow + tilt.
     • RIGHT  — FULL viewport height. Rush + Deck + Discard on ONE row pinned at
                the top; then Wolf Incognito, Your Amulet Tokens, Hidden Amulets,
                and the Action Log pinned at the BOTTOM (scrolls internally).
     • BOTTOM — action buttons + the hand strip ("Your hand"); LEFT/CENTER only,
                never under the right bar.
   ONE standard card size is used EVERYWHERE (deck, discard, rush, wolf, hidden,
   hand, and the cards placed on amulet corners) — Stefano's tweak #2.
   =========================================================================== */
:root{
  --bg:#1a1226; --bg2:#241a38; --panel:#2e2246; --panel2:#261d3c;
  --ink:#f4eefb; --muted:#b6a8d0; --gold:#e9b53a; --line:#4a3a68;
  --blue:#4f9dff; --green:#33c07c; --pink:#ff69c8; --yellow:#ffcb47;
  --radius:12px; --shadow:0 6px 22px rgba(0,0,0,.45);
  /* THE ONE STANDARD CARD SIZE — used for EVERY card in the game (tweak #2). */
  --card-w:88px; --card-h:137px;              /* ~0.643 arcana aspect */
  --amulet-w:196px; --amulet-h:338px;         /* ~0.58 amulet aspect, big & central */
  --left-w:236px; --right-w:396px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:"Segoe UI",system-ui,sans-serif;
  background:radial-gradient(1200px 700px at 50% -10%,#33254e 0%,var(--bg) 60%);
  color:var(--ink); overflow:hidden;
}
h1,h2,h3{margin:0;}

/* ===== APP GRID =============================================================
   Two columns: [ left+center | right bar ]. Three rows: top bar / middle /
   bottom bar. The right bar SPANS the middle + bottom rows so it reaches the
   very BOTTOM of the viewport (tweak #1). The top bar spans both columns; the
   bottom action/hand bar occupies the LEFT column only (never under the right
   bar). */
#app{
  height:100vh; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr) var(--right-w);
  overflow:hidden;
}
#topbar{grid-column:1 / span 2; grid-row:1;}
#middle{grid-column:1; grid-row:2;}
#bottom-bar{grid-column:1; grid-row:3;}
#right-bar{grid-column:2; grid-row:2 / span 2;}

/* ---------- TOP BAR — brand + seed/new-game + AP pips + the flash banner ---- */
/* Canonical header: matches the shared .ah-topbar (accent border via --hdr-accent
   set inline on #topbar) AND sits ABOVE the z-index:800 overlays, so the header
   controls (New Game, How to Play, 🔊, 🎵, ← Arcade) stay clickable even while the
   start screen / end scoreboard is showing. This is the fix for the music toggle
   not stopping music after a game — the end-game overlay was covering the button.
   The old arcade-bridge floating pill is hidden (#arcade-home{display:none}), so no
   left-padding clearance is needed. */
#topbar{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:16px; padding:0 16px; height:52px;
  background:linear-gradient(#2a1f42,#221935);
  border-bottom:2px solid var(--hdr-accent,#e08a2b);
  position:relative; z-index:900;
}
.brand{font-weight:800;color:var(--gold);font-size:20px;white-space:nowrap;}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-right{display:flex;align-items:center;gap:12px;justify-content:flex-end;}
.stat{font-size:12px;color:var(--muted);background:#1e1730;padding:4px 10px;
  border-radius:999px;border:1px solid var(--line);white-space:nowrap;cursor:pointer;}
#ap-tracker{display:flex;align-items:center;gap:10px;}
.ap-label{font-size:11px;letter-spacing:1.5px;color:var(--muted);}
.ap-pips{display:inline-flex;gap:6px;}
.pip{width:15px;height:15px;border-radius:50%;border:2px solid var(--gold);}
.pip.spent{background:transparent;opacity:.3;}
.pip.left{background:var(--gold);box-shadow:0 0 8px var(--gold);}
#btn-newgame{background:#3a2c58;color:var(--ink);border:1px solid var(--line);
  padding:6px 14px;border-radius:8px;font:inherit;font-size:12px;cursor:pointer;}
#btn-newgame:hover{background:#573f86;}
#btn-mute,#btn-music{background:#3a2c58;border:1px solid var(--line);padding:4px 9px;border-radius:8px;
  font-size:15px;line-height:1;cursor:pointer;}
#btn-mute:hover,#btn-music:hover{background:#573f86;}
/* Music-off reads as dimmed + struck-through so 🎵 alone isn't ambiguous. */
#btn-music.off{opacity:.4;text-decoration:line-through;text-decoration-thickness:2px;}

/* The flashing notification banner — carries ALL status/instruction text AND
   opponent actions. #turn-status keeps the turn/AP context; #event-flash is the
   line every game event writes into. */
.tb-center{display:flex;justify-content:center;min-width:0;}
#flash{
  display:flex;align-items:center;gap:12px; max-width:900px; width:100%;
  padding:7px 16px;border-radius:10px;min-width:0;
  background:linear-gradient(90deg,rgba(233,181,58,.10),rgba(233,181,58,.20));
  border:1px solid rgba(233,181,58,.55);
  box-shadow:0 0 18px rgba(233,181,58,.30);
  animation:flashpulse 1.4s ease-in-out infinite;
}
@keyframes flashpulse{0%,100%{box-shadow:0 0 10px rgba(233,181,58,.20);}50%{box-shadow:0 0 24px rgba(233,181,58,.5);}}
#flash .who{font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:#1a1226;background:var(--gold);padding:3px 9px;border-radius:6px;font-weight:800;white-space:nowrap;flex:0 0 auto;}
#flash .who.ai{background:#c9b3ef;color:#1a1226;}
#flash .who.bad{background:#e5646a;color:#160a0c;}
#flash .msg{font-weight:700;color:var(--gold);font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* One-shot pulse re-triggered on every new event (see main.js toast()). */
#flash .msg.flash{animation:msgflash .5s ease-out;}
@keyframes msgflash{0%{color:#fff;transform:scale(1.02);}100%{color:var(--gold);transform:scale(1);}}
#flash .msg.bad{color:#ffb3b6;}

/* ---------- MIDDLE: left bar | center Workshop (right bar is a sibling) ------ */
#middle{
  display:grid;
  grid-template-columns:var(--left-w) minmax(0,1fr);
  min-height:0; overflow:hidden;
}
.bar-h{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}

/* ---- LEFT BAR — opponent stations ---------------------------------------- */
#left-bar{
  background:var(--panel2); border-right:1px solid var(--line);
  padding:14px 12px; overflow-y:auto; min-height:0;
}
#left-bar .bar-h{text-align:center;}
#opponents:empty::after{content:"Solo game — no opponents.";color:var(--muted);font-size:12px;}
.opp-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px; margin-bottom:12px;
}
.opp-card.active{border-color:var(--gold);box-shadow:0 0 14px rgba(233,181,58,.35);}
.opp-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.opp-avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  border:2px solid var(--line);background:#1e1730;}
.opp-card.active .opp-avatar{border-color:var(--gold);}
.opp-name{font-weight:800;font-size:14px;line-height:1.15;}
.opp-name .ai{color:var(--muted);font-weight:600;font-size:11px;}
.opp-turn{font-size:10px;color:var(--gold);letter-spacing:.5px;}
.opp-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted);}
.opp-row .lbl{width:56px;flex:0 0 auto;}
/* hand shown as face-down backs — count visible, faces not */
.hand-backs,.mini-hidden{display:flex;}
.hand-backs .back{width:24px;height:37px;border-radius:4px;background-size:cover;background-position:center;
  margin-left:-12px;border:1px solid #0007;box-shadow:1px 0 3px #0006;}
.hand-backs .back:first-child{margin-left:0;}
.mini-hidden .back{width:22px;height:38px;border-radius:4px;background-size:cover;background-position:center;
  margin-left:-10px;border:1px solid #0007;}
.mini-hidden .back:first-child{margin-left:0;}
.opp-tokens{display:flex;gap:4px;flex-wrap:wrap;}
.opp-tokens img{width:26px;height:30px;border-radius:4px;object-fit:cover;}
.opp-tokens .none,.hand-backs .none,.mini-hidden .none{font-size:11px;color:var(--muted);}
.count-chip{background:#1e1730;border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font-size:11px;color:var(--ink);font-weight:700;}

/* ---- CENTER — the Workshop, front and center ----------------------------- */
#center{position:relative;padding:16px 20px;overflow:auto;display:flex;flex-direction:column;min-height:0;}
/* Dramatic "RUSH!" flash over the center Workshop when a Rush triggers (tweak
   #2). Scales in + fades over ~0.9s; never blocks input (pointer-events:none). */
#rush-flash{
  position:absolute;inset:0;z-index:20;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:min(22vw,190px);letter-spacing:6px;
  color:var(--gold);text-shadow:0 6px 30px rgba(233,181,58,.7),0 2px 6px #000;
  -webkit-text-stroke:3px #1a1226;
}
#rush-flash[hidden]{display:none;}
#rush-flash.go{animation:rush-flash-in .9s ease-out forwards;}
@keyframes rush-flash-in{
  0%{opacity:0;transform:scale(.2) rotate(-8deg);}
  35%{opacity:1;transform:scale(1.12) rotate(-2deg);}
  55%{transform:scale(1) rotate(0);}
  100%{opacity:0;transform:scale(1.25) rotate(2deg);}
}
#center .bar-h{text-align:center;letter-spacing:3px;font-size:13px;color:var(--gold);}

/* ==========================================================================
   MULTIPLAYER LEGIBILITY (Sept 2026)
   At a real-player table every player must SEE what the others did. All of the
   surfaces below are driven purely from the authoritative state snapshot, so
   they fire identically on every screen — not only on the acting player's.
   ========================================================================== */

/* ---- Uploaded (image) avatars + leaderboard rank chip -------------------- */
.opp-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.opp-avatar:has(.opp-avatar-img){padding:0;overflow:hidden;}
.rank-chip{
  display:inline-block;margin-right:6px;padding:0 6px;border-radius:999px;
  background:rgba(233,181,58,.18);border:1px solid rgba(233,181,58,.55);
  color:var(--gold);font-size:11px;font-weight:800;vertical-align:1px;
}
/* The "you" station reuses the opponent-card look with a cooler accent so your
   own row never reads as an opponent. */
#me-station{margin-bottom:14px;}
.opp-card.me{border-color:rgba(122,160,230,.45);}
.opp-card.me .opp-avatar{border-color:rgba(122,160,230,.7);}
.opp-card.me .opp-turn{color:#8fd3a0;}

/* ---- IT'S YOUR TURN ------------------------------------------------------
   Three reinforcing cues while the turn is mine: a green banner (instead of the
   ambient gold), a breathing gold frame around the whole board, and the one-shot
   centre "YOUR TURN" flash below. */
#flash.mine{
  background:linear-gradient(90deg,rgba(93,201,131,.16),rgba(93,201,131,.30));
  border-color:rgba(93,201,131,.75);
  box-shadow:0 0 22px rgba(93,201,131,.45);
  animation:mineflash 1.1s ease-in-out infinite;
}
@keyframes mineflash{
  0%,100%{box-shadow:0 0 14px rgba(93,201,131,.30);}
  50%{box-shadow:0 0 30px rgba(93,201,131,.65);}
}
body.my-turn #center{
  box-shadow:inset 0 0 0 2px rgba(233,181,58,.55),inset 0 0 34px rgba(233,181,58,.14);
  border-radius:12px;
  animation:mineframe 2.2s ease-in-out infinite;
}
@keyframes mineframe{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(233,181,58,.40),inset 0 0 22px rgba(233,181,58,.10);}
  50%{box-shadow:inset 0 0 0 2px rgba(233,181,58,.85),inset 0 0 44px rgba(233,181,58,.22);}
}
#turn-flash{
  position:absolute;inset:0;z-index:22;pointer-events:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:900;font-size:min(11vw,104px);line-height:1;letter-spacing:4px;
  color:#8fe3ac;text-shadow:0 6px 30px rgba(93,201,131,.65),0 2px 6px #000;
  -webkit-text-stroke:3px #10241a;
}
#turn-flash[hidden]{display:none;}
#turn-flash.go{animation:turn-flash-in 1.25s ease-out forwards;}
@keyframes turn-flash-in{
  0%{opacity:0;transform:scale(.55);}
  22%{opacity:1;transform:scale(1.06);}
  45%{transform:scale(1);}
  100%{opacity:0;transform:scale(1.14);}
}

/* ---- OPPONENT ACTION FLASH (Draw / Take Hidden / Reveal) ----------------- */
#act-flash{
  position:absolute;inset:auto 0 12% 0;z-index:21;pointer-events:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:900;font-size:min(4.6vw,38px);line-height:1.15;
  padding:0 8%;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.85);
}
#act-flash[hidden]{display:none;}
#act-flash .who{color:var(--gold);}
#act-flash.go{animation:act-flash-in 1.5s ease-out forwards;}
@keyframes act-flash-in{
  0%{opacity:0;transform:translateY(14px) scale(.94);}
  15%{opacity:1;transform:translateY(0) scale(1);}
  70%{opacity:1;}
  100%{opacity:0;transform:translateY(-10px);}
}
/* The piles / rail area that an action CONSUMED FROM pulses in sympathy, so the
   flash text and the board agree about what just happened. */
.zone-hit{animation:zonehit 1.15s ease-out 2;}
@keyframes zonehit{
  0%{box-shadow:0 0 0 0 rgba(233,181,58,0);}
  25%{box-shadow:0 0 0 3px rgba(233,181,58,.95),0 0 34px rgba(233,181,58,.65);}
  100%{box-shadow:0 0 0 0 rgba(233,181,58,0);}
}
.opp-card.zone-hit{border-color:var(--gold);}

/* ---- AMULET COMPLETED — the over-the-top celebration, for EVERY player ---
   Stefano's note: winning an amulet reads clearly for the winner and is
   invisible to everyone else. Now every screen gets the burst, the code, and
   who took the token. */
#amulet-flash{
  position:absolute;inset:0;z-index:23;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;
}
#amulet-flash[hidden]{display:none;}
#amulet-flash .af-burst{
  position:absolute;width:min(90vw,780px);height:min(90vw,780px);border-radius:50%;
  background:radial-gradient(circle,rgba(233,181,58,.55) 0%,rgba(233,181,58,.22) 38%,rgba(233,181,58,0) 68%);
}
#amulet-flash .af-code{
  font-weight:900;font-size:min(13vw,128px);line-height:1;letter-spacing:6px;
  color:var(--gold);text-shadow:0 8px 40px rgba(233,181,58,.85),0 2px 6px #000;
  -webkit-text-stroke:3px #23180a;
}
#amulet-flash .af-title{font-weight:900;font-size:min(5vw,42px);letter-spacing:3px;color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.9);}
#amulet-flash .af-sub{font-weight:700;font-size:min(3.2vw,22px);color:#ffe9b0;
  text-shadow:0 3px 14px rgba(0,0,0,.9);}
#amulet-flash.go .af-burst{animation:af-burst 2.3s ease-out forwards;}
#amulet-flash.go .af-code{animation:af-code 2.3s cubic-bezier(.2,1.5,.4,1) forwards;}
#amulet-flash.go .af-title{animation:af-line 2.3s ease-out .12s forwards;}
#amulet-flash.go .af-sub{animation:af-line 2.3s ease-out .24s forwards;}
@keyframes af-burst{
  0%{opacity:0;transform:scale(.2);}
  18%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.5);}
}
@keyframes af-code{
  0%{opacity:0;transform:scale(.3) rotate(-10deg);}
  22%{opacity:1;transform:scale(1.18) rotate(3deg);}
  40%{transform:scale(1) rotate(0);}
  62%{transform:scale(1.06);}
  100%{opacity:0;transform:scale(1.1);}
}
@keyframes af-line{
  0%{opacity:0;transform:translateY(16px);}
  25%{opacity:1;transform:translateY(0);}
  78%{opacity:1;}
  100%{opacity:0;transform:translateY(-8px);}
}
/* Whoever took the token gets a gold shockwave on their station. */
.opp-card.scored{animation:scored 1.9s ease-out forwards;}
@keyframes scored{
  0%{box-shadow:0 0 0 0 rgba(233,181,58,.9);border-color:var(--gold);}
  40%{box-shadow:0 0 0 8px rgba(233,181,58,0),0 0 40px rgba(233,181,58,.8);border-color:var(--gold);}
  100%{box-shadow:0 0 0 0 rgba(233,181,58,0);}
}

/* ---- AUTO END TURN countdown (visible to the whole table) ---------------- */
#autoend-flash{
  position:absolute;inset:0;z-index:24;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;background:radial-gradient(circle at 50% 45%,rgba(10,6,20,.72) 0%,rgba(10,6,20,0) 62%);
}
#autoend-flash[hidden]{display:none;}
#autoend-flash .ae-who{
  font-weight:900;font-size:min(5.2vw,44px);line-height:1.15;color:#fff;
  max-width:80%;text-shadow:0 4px 22px rgba(0,0,0,.9);
}
#autoend-flash .ae-ring{
  width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:5px solid rgba(233,181,58,.85);background:rgba(20,12,32,.75);
  font-weight:900;font-size:56px;color:var(--gold);
  box-shadow:0 0 34px rgba(233,181,58,.5);
}
#autoend-flash .ae-ring span.tick{animation:ae-tick .9s ease-out;}
@keyframes ae-tick{0%{transform:scale(1.6);opacity:.2;}100%{transform:scale(1);opacity:1;}}
#autoend-flash .ae-sub{font-weight:700;letter-spacing:2px;font-size:14px;color:#ffe9b0;text-transform:uppercase;}

#workshop{
  flex:1; display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:26px;
}
#workshop>p{color:var(--muted);align-self:center;}
.amulet-slot{display:flex;flex-direction:column;align-items:center;gap:8px;}
.amulet{
  position:relative;width:var(--amulet-w);height:var(--amulet-h);
  border-radius:14px;overflow:visible;box-shadow:var(--shadow);flex:0 0 auto;
}
.amulet-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:14px;border:2px solid #0006;}
/* corner drop-zones */
.corner{position:absolute;width:48%;height:32%;display:flex;align-items:center;
  justify-content:center;border-radius:10px;transition:transform .12s ease, box-shadow .12s ease;}
.corner.tl{top:0;left:0;} .corner.tr{top:0;right:0;}
.corner.br{bottom:0;right:0;} .corner.bl{bottom:0;left:0;}
/* VACANT corner — an open ring + the arcana icon name, on a legible scrim. */
.corner.vacant{flex-direction:column;gap:3px;}
.corner.vacant .dot{width:20px;height:20px;border-radius:50%;border:3px solid #fff;background:transparent;
  box-shadow:0 1px 3px #000a;}
.corner.vacant span{font-size:10px;color:#fff;font-weight:800;text-shadow:0 1px 3px #000,0 0 4px #000;
  background:rgba(20,14,32,.6);border-radius:8px;padding:1px 6px;}
.corner.vacant .dot.blue{border-color:var(--blue);}
.corner.vacant .dot.green{border-color:var(--green);}
.corner.vacant .dot.pink{border-color:var(--pink);}
.corner.vacant .dot.yellow{border-color:var(--yellow);}
/* FILLED corner — the ACTUAL played Goat Arcana card at the STANDARD card size,
   with a drop shadow + a slight tilt (NOT a square). It STAYS on the corner
   until the amulet activates (deferred discard). */
.corner.filled .played-card{
  width:var(--card-w);height:var(--card-h);border-radius:8px;object-fit:cover;
  border:2px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.7);
}
.corner.tl.filled .played-card{transform:rotate(-4deg);}
.corner.tr.filled .played-card{transform:rotate(4deg);}
.corner.bl.filled .played-card{transform:rotate(4deg);}
.corner.br.filled .played-card{transform:rotate(-4deg);}
/* A small colored strip keeps the played card's color unambiguous over the art. */
.corner.filled .played-strip{position:absolute;top:6px;left:6px;width:14px;height:14px;border-radius:4px;
  box-shadow:0 0 0 2px #000a;}
/* Placement highlighting (controller adds .legal/.illegal/.hover). */
.corner.legal{box-shadow:0 0 0 3px #fff, 0 0 18px 5px var(--gold);transform:scale(1.06);cursor:pointer;}
.corner.illegal{opacity:.32;}
.corner.hover{transform:scale(1.14);}
.dot.blue{background:var(--blue);} .dot.green{background:var(--green);}
.dot.pink{background:var(--pink);} .dot.yellow{background:var(--yellow);}
.amulet .count{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  background:#000b;border-radius:999px;padding:2px 12px;font-size:12px;font-weight:800;color:#fff;}
.amulet-code{font-family:ui-monospace,monospace;font-weight:800;letter-spacing:2px;
  color:var(--gold);background:#1e1730;border:1px solid var(--line);
  padding:3px 12px;border-radius:999px;font-size:15px;}

/* ---- RIGHT BAR — FULL HEIGHT (spans the middle + bottom rows) ------------- */
#right-bar{
  background:var(--panel2);border-left:1px solid var(--line);
  padding:12px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:0;
}
.rb-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;flex:0 0 auto;}
/* Deck+Rush+Discard cluster — pinned (sticky) at the TOP of the sidebar, all on
   ONE row, NEVER wraps. */
#piles-box{position:sticky;top:0;z-index:3;background:var(--panel);}
#piles{display:flex;gap:12px;align-items:flex-start;justify-content:center;flex-wrap:nowrap;}
.pile{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;}
.pile[hidden]{display:none;}
.pile-card{
  width:var(--card-w);height:var(--card-h);border-radius:10px;
  background-size:cover;background-position:center;border:2px solid var(--line);
  box-shadow:var(--shadow);}
.pile-card.empty{border-style:dashed;background:#1a1226;}
.pile-label{font-size:11px;color:var(--muted);text-align:center;line-height:1.35;}
.pile-label b{color:var(--ink);font-size:12px;}
/* Rush slot (gold) — appears in the top row on a Rush. */
#rush-slot .pile-card{border-color:var(--gold);box-shadow:0 0 16px rgba(233,181,58,.6);}
#rush-slot.chained .pile-card{box-shadow:0 0 22px rgba(233,181,58,.9);border-color:#fff3c0;}
.rush-tag{background:var(--gold);color:#1a1226;font-size:10px;font-weight:800;
  letter-spacing:1px;padding:2px 8px;border-radius:5px;}
#rush-slot #rush-chain{color:var(--gold);font-weight:800;}
/* No-match Rush reveal: the flipped card is shown face-up in the slot, SHAKEN,
   then SLID to the Discard pile (right of the Deck) before it lands in discard.
   Presentation only — the engine still discards the card. The slide distance is
   set at runtime via --slide-x / --slide-y (main.js measures slot -> discard). */
@keyframes rush-shake{
  0%,100%{transform:translateX(0) rotate(0);}
  15%{transform:translateX(-6px) rotate(-3deg);}
  30%{transform:translateX(6px) rotate(3deg);}
  45%{transform:translateX(-5px) rotate(-2deg);}
  60%{transform:translateX(5px) rotate(2deg);}
  75%{transform:translateX(-3px) rotate(-1deg);}
  90%{transform:translateX(3px) rotate(1deg);}
}
#rush-card.no-match-shake{animation:rush-shake .5s ease-in-out;}
@keyframes rush-slide-discard{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--slide-x,90px),var(--slide-y,0)) scale(.8);opacity:0;}
}
#rush-card.no-match-slide{animation:rush-slide-discard .45s ease-in forwards;}
/* A no-match reveal tints the slot red-gold so it reads as "rejected". */
#rush-slot.no-match .pile-card{border-color:#e0574f;box-shadow:0 0 18px rgba(224,87,79,.6);}
#rush-slot.no-match .rush-tag{background:#e0574f;color:#1a1226;}
/* On the human's Rush the deck becomes the click-to-flip target (cursor) and its
   card carries a steady gold ring so the "click the Arcana Deck to flip"
   affordance stays clear WITHIN the pulsing box. */
#deck-pile.rush{cursor:pointer;}
#deck-pile.rush .pile-card{border-color:var(--gold);box-shadow:0 0 18px rgba(233,181,58,.7);}
/* RUSH PULSE (tweak #3): the ENTIRE top-right box — Rush slot + Arcana Deck +
   Discard — pulses gold while a Rush is resolving (human OR AI), pulling the
   eye to the top-right corner. Applied to #piles-box, not just the deck card. */
#piles-box.rush-pulse{
  border:1px solid var(--gold);
  animation:rush-box-pulse 1s ease-in-out infinite;
}
@keyframes rush-box-pulse{
  0%,100%{box-shadow:0 0 8px 1px rgba(233,181,58,.35);}
  50%{box-shadow:0 0 26px 6px rgba(233,181,58,.85);}
}
#rush-prompt{margin-top:8px;font-size:11.5px;color:var(--gold);text-align:center;line-height:1.4;}
#rush-prompt[hidden]{display:none;}
/* Wolf Incognito (standard card size). */
.wolf-box{display:flex;flex-direction:column;align-items:center;gap:8px;}
.wolf-box .pile-card{border-color:#6b5a8f;object-fit:cover;}
.wolf-box .nm{font-weight:800;color:var(--ink);font-size:13px;}
.tok-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.tok-head h3{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
/* Your Amulet Tokens — LARGE / clearly visible. */
#token-tray{display:flex;gap:8px;flex-wrap:wrap;}
#token-tray:empty::after,#hidden-tray:empty::after{content:"none";color:var(--muted);font-size:12px;}
#token-tray img{width:46px;height:53px;border-radius:6px;border:1px solid var(--line);
  box-shadow:0 3px 8px #0006;object-fit:cover;}
#hidden-tray{display:flex;gap:8px;flex-wrap:wrap;}
#hidden-tray .hidden-card{width:var(--card-w);height:var(--card-h);border-radius:10px;
  background-size:cover;background-position:center;border:2px solid var(--line);box-shadow:var(--shadow);}
#hidden-tray .none{font-size:12px;color:var(--muted);}
/* Action Log — pinned at the BOTTOM of the full-height sidebar; scrolls. */
#log-box{flex:1 1 auto;min-height:120px;display:flex;flex-direction:column;}
#log-box h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;flex:0 0 auto;}
#log{overflow-y:auto;font-size:11px;color:var(--muted);line-height:1.7;flex:1 1 auto;min-height:0;user-select:text;}
.log-row{display:flex;gap:8px;}
.log-row .log-turn{color:var(--gold);font-weight:700;flex:0 0 auto;}
.log-row.rush .log-msg{color:var(--gold);}
.log-row.event .log-msg{color:var(--ink);}

/* ---------- BOTTOM BAR — action buttons + "Your hand" (left/center only) ---- */
#bottom-bar{
  background:linear-gradient(#221935,#2a1f42);border-top:1px solid var(--line);
  padding:12px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;
}
/* Two-column grid so the five action buttons stay evenly sized (the primary
   Play button spans the top row). Cancel replaces its slot when placing. */
#actions-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center;width:320px;}
#act-play{grid-column:1 / span 2;}
.act{background:#3a2c58;color:var(--ink);border:1px solid var(--line);
  padding:8px 12px;border-radius:8px;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer;text-align:center;}
.act:hover:not(:disabled){background:#573f86;}
.act:disabled{opacity:.4;cursor:not-allowed;}
.act.primary{background:var(--gold);color:#1a1226;font-weight:800;border-color:var(--gold);}
.act.action.active{background:#fff3c0;color:#1a1226;box-shadow:0 0 12px rgba(233,181,58,.6);}
.act.end{background:#4a2c4a;}
.act.cancel{background:#5a2f2f;}
.act[hidden]{display:none;}
#hand-wrap{display:flex;flex-direction:column;gap:8px;min-width:0;}
#hand-wrap .bar-h{margin:0;}
#hand{display:flex;gap:12px;align-items:flex-end;overflow-x:auto;padding-bottom:2px;}
.arcana{
  width:var(--card-w);height:var(--card-h);border-radius:10px;border:2px solid var(--line);
  box-shadow:var(--shadow);position:relative;flex:0 0 auto;}
.arcana img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;}
.arcana .corner-strip{position:absolute;top:6px;left:6px;width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 2px #000a;}
.arcana .tag{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  background:#000b;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;}
.arcana.placeable{cursor:grab;outline:2px solid var(--green);outline-offset:1px;}
.arcana.selected{outline:3px solid var(--gold);box-shadow:0 0 14px rgba(233,181,58,.6);}
.arcana.dragging{opacity:.35;}

/* Drag ghost (follows the pointer while dragging). */
#drag-ghost{
  position:fixed;z-index:999;width:var(--card-w);height:var(--card-h);border-radius:9px;
  pointer-events:none;box-shadow:0 14px 30px rgba(0,0,0,.6);transform:translate(-50%,-50%);
  background:#12101c center/cover no-repeat;border:2px solid var(--gold);
}
#drag-ghost[hidden]{display:none;}

/* ---- Overlays (start + scoreboard) --------------------------------------- */
.overlay{
  position:fixed;inset:0;z-index:800;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,7,18,.82);backdrop-filter:blur(3px);
}
.overlay[hidden]{display:none;}
.panel{
  position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 34px;box-shadow:var(--shadow);width:min(560px,92vw);
}
.modal-close{
  position:absolute;top:12px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:#3a2c58;color:var(--ink);border:1px solid var(--line);
  font-size:22px;line-height:1;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:#573f86;color:var(--gold);}
.start-panel{text-align:center;}
.game-title{font-size:40px;color:var(--gold);letter-spacing:.5px;}
.tagline{color:var(--muted);margin:10px 0 22px;}
.field{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:12px 0;text-align:left;}
.field label{font-size:13px;color:var(--muted);}
.field select,.field input{
  width:100%;padding:10px 12px;border-radius:8px;font-size:15px;
  background:#1c1530;color:var(--ink);border:1px solid var(--line);
}
.primary{
  margin-top:14px;background:var(--gold);color:#221;font-weight:800;
  border:none;padding:12px 22px;border-radius:10px;font-size:16px;width:100%;cursor:pointer;
}
.primary:hover{filter:brightness(1.06);}
.hint{color:var(--muted);font-size:12px;margin-top:16px;}

/* ---- "Back to Arcade" escape hatch (secondary/ghost, never competes with the
   primary action) — appears on the start screen and the end-game scoreboard. -- */
.btn-arcade{
  background:#3a2c58;color:var(--ink);border:1px solid var(--line);
  font-weight:700;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn-arcade:hover{background:#573f86;color:var(--gold);}
/* Start screen: full-width, tucked under the gold "Start game" primary. */
.start-panel .btn-arcade{width:100%;margin-top:10px;padding:11px 20px;font-size:15px;}
/* Scoreboard: sits in the button row beside "Play a new game" / "Close". */
.score-buttons .btn-arcade{flex:0 0 auto;margin-top:0;padding:12px 18px;font-size:15px;}

/* ---- Start-screen roster (KK-multiplayer-style table builder) ------------
   Replaces the old mode <select>. #ygm-roster is a 2-col grid of seat cards
   (You pinned + 1–3 AI), an Add-AI button, and a live table count. Solo is
   retired: the roster always has at least You + 1 AI. Palette is YGM's own
   (purple/gold), not KK's. */
.game-logo{display:block;width:min(320px,78%);height:auto;margin:2px auto 6px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.ygm-section-label{
  display:flex;align-items:baseline;gap:8px;text-align:left;
  font-size:12px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;
  font-weight:800;margin:18px 0 10px;
}
.ygm-section-hint{color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:none;font-size:12px;}
.ygm-roster{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:520px){ .ygm-roster{grid-template-columns:1fr;} }
.ygm-seat{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:12px;display:flex;align-items:center;gap:10px;text-align:left;min-height:64px;
}
.ygm-seat-you{border-color:var(--gold);box-shadow:0 0 0 1px rgba(233,181,58,.25) inset;}
.ygm-seat-av{font-size:28px;line-height:1;flex:0 0 auto;width:40px;text-align:center;}
.ygm-seat-id{flex:1 1 auto;min-width:0;}
.ygm-seat-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ygm-seat-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.ygm-tag{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:800;
  padding:2px 6px;border-radius:5px;line-height:1;}
.ygm-tag-host{background:rgba(233,181,58,.16);color:var(--gold);border:1px solid rgba(233,181,58,.4);}
.ygm-tag-ai{background:rgba(79,157,255,.16);color:var(--blue);border:1px solid rgba(79,157,255,.4);}
.ygm-seat-ctrls{display:flex;gap:6px;flex:0 0 auto;}
.ygm-icon-btn{
  width:30px;height:30px;border-radius:8px;background:#3a2c58;color:var(--ink);
  border:1px solid var(--line);font-size:15px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.ygm-icon-btn:hover{background:#573f86;color:var(--gold);}
.ygm-add-ai{
  width:100%;margin-top:10px;background:transparent;color:var(--gold);
  border:1.5px dashed var(--line);border-radius:12px;padding:11px;font-size:14px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}
.ygm-add-ai:hover:not(:disabled){border-color:var(--gold);background:rgba(233,181,58,.06);}
.ygm-add-ai:disabled{opacity:.4;cursor:not-allowed;}
.ygm-add-plus{font-size:18px;line-height:1;}
.ygm-setup-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;}
.ygm-table-count{font-size:13px;color:var(--muted);text-align:left;}
.ygm-table-count b{color:var(--ink);}
/* Footer START button sits beside the count, so drop the full-width default. */
.ygm-setup-footer .primary{width:auto;margin-top:0;flex:0 0 auto;}
@media (max-width:400px){ .ygm-setup-footer{flex-direction:column;align-items:stretch;}
  .ygm-setup-footer .primary{width:100%;} }

/* ---- Turn modal (Feature B: pre-turn summary + pacing gate) -------------- */
.turn-panel{text-align:center;width:min(440px,92vw);}
.turn-avatar{
  font-size:64px;line-height:1;margin:2px auto 10px;
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1e1730;border:2px solid var(--gold);
  box-shadow:0 0 22px rgba(233,181,58,.35);
}
.turn-name{font-size:28px;color:var(--gold);letter-spacing:.5px;margin:0;}
.turn-sub{color:var(--muted);margin:6px 0 18px;font-size:15px;}
.turn-summary{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;
}
.turn-stat{
  background:#1e1730;border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;min-width:74px;
}
.turn-stat .v{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.1;}
.turn-stat .l{display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:2px;}

/* ---- Action Log: hidden-by-default eye + spoiler warning (Feature C) ----- */
.log-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;}
.log-head h3{margin-bottom:0;}
.log-eye{
  background:#3a2c58;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;width:32px;height:28px;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.log-eye:hover{background:#573f86;color:var(--gold);}
.log-hidden-note{font-size:11px;color:var(--muted);margin-top:8px;font-style:italic;}
/* When the log is revealed, the header keeps the eye (now a "hide" toggle) and
   the hidden-note collapses. */
#log-box:not(.log-hidden) .log-hidden-note{display:none;}
#log-box.log-hidden{flex:0 0 auto;min-height:0;}
.log-warning-panel{width:min(480px,92vw);text-align:left;}
.lw-title{font-size:24px;color:var(--gold);margin:0;}
.lw-tag{color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:2px 0 14px;}
.lw-body{color:var(--ink);font-size:14px;line-height:1.6;margin:0 0 20px;}
.lw-buttons{display:flex;gap:12px;}
.lw-buttons .primary,.lw-buttons .secondary{margin-top:0;flex:1 1 0;width:auto;}
.lw-buttons .secondary{
  background:#3a2c58;color:var(--ink);border:1px solid var(--line);
  font-weight:700;padding:12px 22px;border-radius:10px;font-size:15px;cursor:pointer;
}
.lw-buttons .secondary:hover{background:#573f86;color:var(--gold);}

/* ---- Scoreboard (end-of-game Wolf Incognito walkthrough) ----------------- */
.score-panel{width:min(720px,94vw);max-height:92vh;display:flex;flex-direction:column;overflow-y:auto;}
/* The Wolf Incognito card art anchors the window (visual centerpiece). */
.score-anchor{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px;}
.score-wolf{
  width:96px;height:auto;border-radius:10px;border:2px solid var(--gold);
  box-shadow:0 0 22px rgba(233,181,58,.35);object-fit:contain;
}
#score-title{color:var(--gold);text-align:center;font-size:24px;line-height:1.25;margin:0;}

/* Per-player result card holding the five-step walkthrough. */
#score-body{padding-right:4px;flex:0 0 auto;}
.score-card{
  padding:12px 14px;border-radius:12px;background:#241b3a;
  border:1px solid var(--line);margin-bottom:12px;
}
.score-card.winner{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.sc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line);}
.sc-name{font-size:18px;font-weight:800;color:var(--ink);}
.sc-final{font-size:26px;font-weight:800;color:var(--gold);white-space:nowrap;}
.sc-final span{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px;}

/* The ordered walkthrough: numbered steps, label on the left, detail on right. */
.sc-steps{list-style:none;margin:0;padding:0;counter-reset:scstep;}
.sc-step{
  display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:start;
  padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.06);
}
.sc-step:last-child{border-bottom:none;}
.sc-step-label{
  counter-increment:scstep;font-weight:700;color:var(--muted);font-size:13px;
}
.sc-step-label::before{
  content:counter(scstep) ". ";color:var(--gold);font-weight:800;
}
.sc-step-detail{color:var(--ink);font-size:13.5px;line-height:1.5;user-select:text;}
.sc-step-detail b{color:var(--gold);}
.sc-code{
  display:inline-block;font-family:ui-monospace,monospace;font-size:12px;
  background:#160f28;border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;color:var(--ink);
}
.sc-note{color:var(--muted);font-size:12px;}
.sc-step.sc-total{margin-top:4px;padding-top:9px;border-top:1px solid var(--line);}
.sc-step.sc-total .sc-step-label{color:var(--ink);}
.sc-sum{font-size:15px;font-weight:700;color:var(--ink);}
.sc-sum b{font-size:18px;}

.sc-collection{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;}
.sc-collection img{width:30px;height:30px;object-fit:contain;}

/* Two clear buttons instead of the old dismiss sentence. */
.score-buttons{display:flex;gap:12px;margin-top:16px;flex:0 0 auto;}
.score-buttons .primary{margin-top:0;flex:1 1 0;}
.score-buttons .secondary{
  flex:0 0 auto;background:#3a2c58;color:var(--ink);font-weight:700;
  border:1px solid var(--line);padding:12px 26px;border-radius:10px;
  font-size:16px;cursor:pointer;
}
.score-buttons .secondary:hover{background:#573f86;color:var(--gold);}
.tiebreak{color:var(--muted);font-size:12px;text-align:center;margin-top:6px;}

/* "Lambdalf's Secret" — the Krafting Krowns carry-over panel on the scoreboard.
   Gold-accented callout consistent with the winner card + score buttons. */
.lambdalf-secret{
  margin-top:6px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(160deg,#2b2147 0%,#241b3a 100%);
  border:1px solid var(--gold);box-shadow:0 0 0 1px rgba(233,181,58,.25) inset;
}
.ls-head{font-size:16px;font-weight:800;color:var(--gold);margin-bottom:6px;}
.ls-intro{color:var(--ink);font-size:13.5px;line-height:1.5;margin:0 0 10px;}
.ls-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.ls-chip{
  display:inline-flex;align-items:center;font-size:17px;line-height:1;
  background:#160f28;border:1px solid var(--line);border-radius:8px;
  padding:5px 8px;letter-spacing:1px;
}
.ls-code-row{display:flex;gap:8px;align-items:stretch;margin-bottom:12px;}
.ls-code{
  flex:1 1 auto;min-width:0;font-family:ui-monospace,monospace;font-size:14px;
  letter-spacing:.5px;background:#160f28;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;color:var(--ink);
}
.ls-code:focus{outline:none;border-color:var(--gold);}
.ls-copy{
  flex:0 0 auto;background:#3a2c58;color:var(--ink);font-weight:700;
  border:1px solid var(--line);border-radius:8px;padding:9px 16px;
  font-size:14px;cursor:pointer;
}
.ls-copy:hover{background:#573f86;color:var(--gold);}
.ls-copy.copied{background:var(--gold);color:#1a1226;border-color:var(--gold);}
.ls-continue{
  display:inline-block;background:var(--gold);color:#1a1226;font-weight:800;
  text-decoration:none;border-radius:10px;padding:11px 18px;font-size:15px;
}
.ls-continue:hover{filter:brightness(1.06);}

/* ============================================================================
   WIN-SCREEN SHARE — unified copy-paste-first share block inside #scoreboard.
   Additive; matches the dark/purple theme. Victory card is drawn on
   #end-share-card (see ui/main.js buildVictoryImage).
   ============================================================================ */
#end-share-wrap{margin-top:16px;padding-top:14px;border-top:1px solid rgba(192,123,255,.25);}
#end-share-wrap .share-label{font-size:10px;color:#a894c4;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 8px;text-align:center;}
/* Card + action buttons sit SIDE BY SIDE (card left, Share/Save/caption right) to
   reclaim vertical space — they used to stack below the card, squeezing the score
   recap above. Reflows to a single column on narrow screens. */
#end-share-wrap .share-main{display:flex;gap:18px;align-items:stretch;}
#end-share-wrap .share-actions{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
#end-share-wrap .share-actions .share-label{text-align:left;margin-top:0;}
.share-card{width:210px;flex:0 0 auto;align-self:flex-start;display:block;margin:0;border-radius:14px;border:1px solid rgba(192,123,255,.3);background:#000;}
#end-share-wrap textarea.cap{width:100%;flex:1 1 auto;display:block;box-sizing:border-box;min-height:70px;resize:vertical;background:rgba(255,255,255,.05);color:#f2ecf6;border:1px solid rgba(192,123,255,.3);border-radius:12px;padding:11px;font:inherit;font-size:14px;line-height:1.45;}
#end-share-wrap .primary{width:100%;margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:7px;}
@media(max-width:560px){
  #end-share-wrap .share-main{flex-direction:column;align-items:center;}
  .share-card{width:200px;}
}
#end-share-wrap .share-row{display:flex;gap:8px;justify-content:center;}
#end-share-wrap .share-btn{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:9px 4px;border-radius:10px;cursor:pointer;border:1px solid rgba(192,123,255,.3);background:rgba(255,255,255,.05);color:#d8c8ee;font:inherit;font-size:10px;font-weight:700;}
#end-share-wrap .share-btn .si{font-size:19px;line-height:1;}
#end-share-wrap .share-btn:hover{border-color:#c07bff;}