/* ============================================================
   CARD ART SYSTEM — real front/back PNGs on every card surface.
   Front per value (+1/+2/+5); one shared sealed back. Adds a true
   3D flip for plays + the Main-screen mirror. Reuses Torchlit tokens.
   ============================================================ */

/* any .tcard tagged .art shows the real PNG and drops the synthetic decals */
.tcard.art { background-image: var(--card-art); background-size: cover; background-position: center;
  background-color: transparent; border: none; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.tcard.art .tcard-corner, .tcard.art .tcard-pip, .tcard.art .crf-val,
.tcard.art .crf-tier, .tcard.art .crf-eyebrow, .tcard.art .di-card-val, .tcard.art .di-card-tag { display: none !important; }
/* keep a soft sheen sweeping over the real art */
.tcard.art .tcard-holo { mix-blend-mode: screen; opacity: calc(.18 + var(--active,0) * .3); }
.tcard.art .tcard-foil { opacity: calc(.04 + var(--active,0) * .12); }

/* ---------- reusable 3D flip card (back ⇄ front) ---------- */
.cardflip { perspective: 1100px; }
.cardflip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.cardflip.face-up .cardflip-inner { transform: rotateY(180deg); }
.cardflip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; background-size: cover; background-position: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.55); overflow: hidden; }
.cardflip-back  { background-image: var(--card-back); }
.cardflip-front { background-image: var(--card-front); transform: rotateY(180deg); }
/* one-shot reveal flourish: spin from back to front with an overshoot */
@keyframes cardflip-reveal {
  0%   { transform: rotateY(0deg)   scale(.86); }
  55%  { transform: rotateY(180deg) scale(1.16); }
  72%  { transform: rotateY(180deg) scale(1.16); }
  100% { transform: rotateY(180deg) scale(1); }
}
.cardflip.revealing .cardflip-inner { animation: cardflip-reveal .8s cubic-bezier(.2,.8,.25,1) forwards; }

/* ---------- deck stack — real sealed back + top front art ---------- */
.deck-stack .deck-back { background: none !important; background-image: var(--card-back) !important;
  background-size: cover !important; background-position: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important; }
.deck-stack .deck-back::after { display: none; }
.deck-top-art { position: absolute; inset: 0; z-index: 3; border-radius: 12px; background-image: var(--card-front);
  background-size: cover; background-position: center; box-shadow: 0 6px 16px rgba(0,0,0,.55); }
.deck-stack .deck-top-val { display: none; }   /* value now read from the art */

/* ---------- MAIN-SCREEN MIRROR — a played card flips in with the name ---------- */
.cardmain-layer { position: fixed; inset: 0; z-index: 6000; pointer-events: none;
  display: grid; place-items: center; }
.cardmain { position: relative; width: clamp(180px, 17vw, 260px); aspect-ratio: 5/7;
  animation: cardmain-life 2.4s ease-in-out forwards; }
@keyframes cardmain-life {
  0%   { opacity: 0; transform: translateY(24px) scale(.7); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  82%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(.92); }
}
.cardmain .cardflip { width: 100%; height: 100%; }
.cardmain-bloom { position: absolute; left: 50%; top: 44%; width: 150%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, hsl(var(--primary) / .5), transparent 62%); filter: blur(14px);
  z-index: -1; animation: cardmain-bloom 2.4s ease-out forwards; }
@keyframes cardmain-bloom { 0%{opacity:0; transform:translate(-50%,-50%) scale(.4);} 20%{opacity:1;} 60%{opacity:.7;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.3);} }
.cardmain-ring { position: absolute; left: 50%; top: 44%; width: 90%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; border: 2px solid hsl(var(--primary)); box-shadow: 0 0 40px hsl(var(--primary)); z-index: -1;
  animation: cardmain-ring .9s ease-out .35s forwards; opacity: 0; }
@keyframes cardmain-ring { 0%{opacity:.9; transform:translate(-50%,-50%) scale(.6);} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6);} }
.cardmain-label { position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.5rem); color: hsl(var(--foreground));
  text-shadow: 0 0 18px hsl(var(--primary) / .7), 0 2px 6px #000; letter-spacing: .02em; }
.cardmain-label b { color: hsl(var(--primary)); }
.cardmain-spark { position: fixed; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  background: hsl(var(--primary)); box-shadow: 0 0 9px hsl(var(--primary)); animation: cardmain-spark .8s ease-out forwards; }
@keyframes cardmain-spark { to { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }

/* ---------- player play pop: lift + flip + fade as the card is spent ---------- */
@keyframes card-play-pop {
  0%   { transform: translateY(0) scale(1) rotateY(180deg); }
  45%  { transform: translateY(-120px) scale(1.4) rotateY(360deg); }
  100% { transform: translateY(-210px) scale(1.15) rotateY(540deg); opacity: 0; }
}
.card-reveal-fx.playing .cardflip-inner { animation: card-play-pop .7s cubic-bezier(.2,.7,.3,1) forwards !important;
  filter: drop-shadow(0 0 22px hsl(var(--primary) / .85)); }

@media (prefers-reduced-motion: reduce){
  .cardflip.revealing .cardflip-inner { animation: none; transform: rotateY(180deg); }
  .cardmain { animation: cardmain-life-min 2s ease-out forwards; }
  @keyframes cardmain-life-min { 0%{opacity:0;} 12%{opacity:1;} 82%{opacity:1;} 100%{opacity:0;} }
  .cardmain-ring, .cardmain-bloom { display: none; }
  .card-reveal-fx.playing .cardflip-inner { animation: none !important; opacity: 0; transition: opacity .3s; }
}

/* ============================================================
   DOCK RAIL — Message-GM + 2d6 dice, attached left of the card panel
   ============================================================ */
.dock-rail { display: flex; flex-direction: column; gap: 8px; flex: none; }
.dock-railbtn { position: relative; width: 52px; height: 52px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); background: hsl(var(--surface) / .8);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .06); transition: transform .08s, border-color .2s, box-shadow .2s; }
.dock-railbtn:hover { border-color: hsl(var(--primary) / .6); }
.dock-railbtn:active { transform: scale(.93); }
.dock-railbtn.gm.has-unread { border-color: hsl(var(--primary) / .7); box-shadow: 0 0 16px hsl(var(--primary) / .35); }
.dock-railbtn.gm.pulse { animation: gm-fab-pulse 1.1s ease-in-out 2; }
.dock-railbtn .gm-badge { position: absolute; top: -5px; right: -5px; }
.dock-dice-lbl { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.dock-railbtn.dice.ready { border-color: hsl(var(--primary)); box-shadow: 0 0 16px hsl(var(--primary) / .5); animation: dice-ready-glow 1.3s ease-in-out infinite; }
.dock-railbtn.dice.ready .dock-dice-lbl { color: hsl(var(--primary)); }
@keyframes dice-ready-glow { 0%,100%{ box-shadow:0 0 12px hsl(var(--primary)/.4);} 50%{ box-shadow:0 0 22px hsl(var(--primary)/.75);} }
.dock-railbtn.dice.waiting { opacity:.8; }
.dice-ready-dot { position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%; background:hsl(var(--primary)); box-shadow:0 0 8px hsl(var(--primary)); }

/* d6 face — 3×3 pip grid */
.d6face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 26px; height: 26px; gap: 1px; padding: 3px; box-sizing: border-box; }
.d6face.sm { width: 22px; height: 22px; padding: 2px; }
.d6pip { border-radius: 50%; background: transparent; }
.d6pip.on { background: hsl(var(--foreground)); box-shadow: 0 0 3px hsl(var(--foreground) / .4); }
.die .d6face { width: 64px; height: 64px; gap: 2px; padding: 9px; }
.die .d6pip.on { background: hsl(var(--primary)); box-shadow: 0 0 6px hsl(var(--primary) / .7); }

/* dice modal */
.dice-modal { position: fixed; inset: 0; z-index: 6300; display: grid; place-items: center; padding: 6vw;
  background: hsl(var(--background) / .82); backdrop-filter: blur(6px); animation: gm-fade .2s ease-out; }
.dice-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.7rem 2.2rem;
  border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, hsl(var(--surface)), hsl(var(--background)));
  border: 1px solid hsl(var(--primary) / .4); box-shadow: 0 28px 70px rgba(0,0,0,.65), inset 0 0 40px hsl(var(--primary)/.06);
  min-width: min(330px, 86vw); animation: gm-rise .3s cubic-bezier(.3,.9,.3,1); }
.dice-title { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--foreground)); }
.dice-scope-tag { font-size: .76rem; letter-spacing: .03em; padding: .34rem .8rem; border-radius: 999px; text-align: center;
  color: hsl(var(--muted-foreground)); background: hsl(var(--surface) / .8); border: 1px solid hsl(var(--border)); }
.dice-scope-tag.main { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .1); }
.dice-scope-tag.wait { color: hsl(38 80% 66%); border-color: hsl(38 70% 50% / .5); }
.dice-pair { display: flex; gap: 1.3rem; padding: .4rem 0; }
.die { position: relative; width: 84px; height: 84px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(155deg, hsl(var(--surface)), hsl(var(--background))); border: 1px solid hsl(var(--border));
  box-shadow: inset 0 2px 8px hsl(0 0% 100% / .07), inset 0 -6px 12px rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.5); }
/* roll: a tumbling spin (the JS ramps the face cadence so it visibly decelerates) */
.dice-pair.rolling .die { animation: die-roll .4s cubic-bezier(.45,.05,.55,.95) infinite; }
.dice-pair.rolling .die:last-child { animation-delay: .08s; }
@keyframes die-roll {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  25%  { transform: translateY(-15px) rotate(-95deg) scale(1.05); }
  55%  { transform: translateY(3px) rotate(-185deg) scale(.95); }
  80%  { transform: translateY(-9px) rotate(-275deg) scale(1.03); }
  100% { transform: translateY(0) rotate(-360deg) scale(1); }
}
/* land: an overshoot bounce + a glow flash as the dice settle on the result */
.dice-pair.landed .die { animation: die-land .62s cubic-bezier(.2,1.35,.4,1); }
.dice-pair.landed .die:last-child { animation-delay: .07s; }
@keyframes die-land {
  0%   { transform: scale(1.3) rotate(-10deg); }
  38%  { transform: scale(.9) rotate(4deg); }
  68%  { transform: scale(1.07) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.dice-pair.landed .die::after { content:''; position:absolute; inset:-4px; border-radius:inherit; pointer-events:none; animation: die-flash .6s ease-out; }
@keyframes die-flash { 0%{ box-shadow:0 0 32px 7px hsl(var(--primary)/.75); } 100%{ box-shadow:0 0 0 0 transparent; } }
.dice-pair.landed + .dice-sum b { display:inline-block; animation: sum-pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes sum-pop { 0%{ transform:scale(.4); opacity:.2; } 55%{ transform:scale(1.3); } 100%{ transform:scale(1); opacity:1; } }
.dice-sum { font-size: 1.05rem; color: hsl(var(--muted-foreground)); min-height: 1.6rem; }
.dice-sum b { font-family: var(--font-display); font-size: 1.9rem; color: hsl(var(--primary)); }
.dice-rolling-txt { color: hsl(var(--primary)); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; }
.dice-actions { display: flex; gap: .7rem; margin-top: .2rem; }
.dice-roll-go { font-family: var(--font-display); font-size: 1rem; letter-spacing: .03em; padding: .7rem 1.5rem; border-radius: 14px; cursor: pointer;
  color: hsl(var(--primary-foreground)); border: 1px solid hsl(var(--primary) / .7);
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary) / .8)); box-shadow: 0 0 20px hsl(var(--primary)/.4); }
.dice-roll-go:active:not(:disabled) { transform: scale(.95); }
.dice-roll-go:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Dota-2 themed dice modal (steel hex frame, teal accents) ---- */
.dice-modal.d2-dice { background: radial-gradient(ellipse at 50% 38%, rgba(10,22,28,.92), rgba(4,10,14,.96)) !important; }
.d2-dice .dice-stage { background: linear-gradient(180deg, hsl(202 30% 13%), hsl(206 34% 8%));
  border: 1px solid hsl(192 50% 40% / .55); border-radius: 8px; padding: 0; min-width: min(340px,90vw);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 hsl(190 60% 60% / .25); }
.dice-hexframe { position: relative; padding: 1.5rem 1.6rem 1.3rem; display: flex; flex-direction: column; align-items: center; gap: .9rem;
  background:
    linear-gradient(135deg, hsl(192 50% 45% / .14) 0 14px, transparent 14px) top left / 60px 60px no-repeat,
    linear-gradient(-135deg, hsl(192 50% 45% / .14) 0 14px, transparent 14px) top right / 60px 60px no-repeat;
  border-bottom: 1px solid hsl(192 40% 30% / .4); }
.d2-dice .dice-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .28em; padding-left:.28em; color: hsl(190 55% 78%);
  text-shadow: 0 0 14px hsl(190 70% 50% / .5); }
.d2-dice .dice-scope-tag { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .26rem .7rem; border-radius: 4px;
  color: hsl(190 40% 72%); background: hsl(200 30% 16% / .8); border: 1px solid hsl(192 40% 35% / .5); }
.d2-dice .dice-scope-tag.main { color: hsl(150 60% 72%); border-color: hsl(150 50% 40% / .6); background: hsl(155 40% 14% / .7); }
.d2-dice .die { width: 78px; height: 78px; border-radius: 10px;
  background: linear-gradient(155deg, hsl(202 26% 22%), hsl(206 34% 10%));
  border: 1px solid hsl(192 45% 42% / .5); box-shadow: inset 0 2px 8px hsl(190 60% 60% / .12), inset 0 -8px 14px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.55); }
.d2-dice .die .d6pip.on { background: hsl(188 70% 62%); box-shadow: 0 0 7px hsl(188 80% 55%); }
.d2-dice .dice-pair.landed .die::after { animation: die-flash-teal .6s ease-out; }
@keyframes die-flash-teal { 0%{ box-shadow:0 0 32px 7px hsl(188 75% 55% / .8); } 100%{ box-shadow:0 0 0 0 transparent; } }
.d2-dice .dice-sum { font-size: .92rem; color: hsl(196 22% 70%); }
.d2-dice .dice-sum b { font-family: var(--font-display); font-size: 1.7rem; color: hsl(188 70% 66%); text-shadow: 0 0 16px hsl(188 70% 50% / .6); }
.d2-dice .dice-rolling-txt { color: hsl(188 65% 64%); }
.d2-dice .dice-actions { display: flex; gap: .6rem; padding: 1rem 1.4rem 1.3rem; width: 100%; box-sizing: border-box; }
.d2-dice .dice-roll-go { flex: 1; font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; padding: .8rem; border-radius: 5px; cursor: pointer;
  color: hsl(196 40% 10%); border: 1px solid hsl(188 60% 60%);
  background: linear-gradient(180deg, hsl(188 65% 58%), hsl(190 60% 44%)); box-shadow: 0 0 20px hsl(188 70% 50% / .4), inset 0 1px 0 hsl(188 80% 75% / .5); }
.d2-dice .dice-roll-go:active:not(:disabled) { transform: translateY(1px); }
.d2-dice .dice-roll-go.disabled, .d2-dice .dice-roll-go:disabled { background: hsl(206 20% 22%); color: hsl(196 18% 58%); border-color: hsl(206 20% 30%); box-shadow: none; }
.d2-dice-close { font-family: var(--font-body); font-size: .9rem; padding: .8rem 1.2rem; border-radius: 5px; cursor: pointer;
  color: hsl(196 24% 74%); background: hsl(206 24% 16%); border: 1px solid hsl(206 24% 28%); }
.d2-dice-close:hover { border-color: hsl(192 45% 45%); color: #fff; }

/* ---- MAIN-SCREEN dice broadcast ---- */
.dicemain { position: fixed; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 6000;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none;
  animation: cardmain-life 5s ease-in-out forwards; }
.dicemain-pair { display: flex; gap: 1rem; }
.dicemain .die { width: 88px; height: 88px; }
.dicemain-label { font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.4rem); color: hsl(var(--foreground));
  text-shadow: 0 0 16px hsl(var(--primary) / .7), 0 2px 6px #000; }
.dicemain-label b { color: hsl(var(--primary)); }