/* Klondike Solitaire — Arline Arcade. CSS-drawn cards on the gold-and-felt
   theme from app.css. Cards are absolutely positioned; moving = changing a
   transform, so the CSS transition slides them. */

/* ---- load screen (covers the board until the deck art is ready) ---- */
.sol-load{
  position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(circle at 50% 38%, #0c6b41, #053620 78%);
  transition:opacity .45s ease; opacity:1;
}
.sol-load.gone{ opacity:0; pointer-events:none }
.sol-load-logo{ width:min(58vw,260px); height:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)) }
.sol-load-spinner{
  width:46px; height:46px; border-radius:50%;
  border:4px solid rgba(233,195,74,.25); border-top-color:#e9c34a;
  animation:solSpin .8s linear infinite;
}
.sol-load-text{ font-family:var(--mono,monospace); font-size:.86rem; letter-spacing:.06em; color:#ecd9a0; opacity:.9 }
@keyframes solSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .sol-load-spinner{ animation:none } }

.sol-bar{
  display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
  width:100%; max-width:900px; margin:0 auto; padding:6px clamp(8px,3vw,18px) 2px;
}
.btn{
  font:700 .82rem/1 var(--mono); color:var(--ink); background:var(--gold-grad);
  border:none; border-radius:999px; padding:.6rem 1.2rem; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.4); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.45), 0 0 18px rgba(233,195,74,.4) }
.btn.ghost{ background:rgba(0,0,0,.25); color:var(--gold-hi); box-shadow:inset 0 0 0 1px var(--line) }
.moves{ font-family:var(--mono); font-size:.78rem; color:var(--paper); opacity:.85; margin-left:.3rem }

/* ---- board ---- */
.board{ position:relative; width:100%; max-width:900px; margin:0 auto; min-height:62vh }
.slot{
  position:absolute; left:0; top:0; width:var(--cw,64px); height:var(--ch, calc(var(--cw,64px) * 1.5));
  border-radius:calc(var(--cw,64px) * .1); border:2px dashed rgba(233,195,74,.26);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.slot.stock{ cursor:pointer }
.slot.stock::after{ content:"↻"; position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--cw,64px)*.5); color:rgba(233,195,74,.42) }
.slot.foundation::after{ content:attr(data-suit); position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--cw,64px)*.55); color:rgba(233,195,74,.22) }

/* ---- cards ---- */
.card{
  position:absolute; left:0; top:0; width:var(--cw,64px); height:var(--ch, calc(var(--cw,64px) * 1.5));
  border-radius:calc(var(--cw,64px) * .1); overflow:hidden; cursor:pointer; touch-action:none;
  background:linear-gradient(165deg,#fffdf8,#efe9da); color:#1d1f26;
  border:1px solid rgba(0,0,0,.14);
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 5px 12px rgba(0,0,0,.26);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  will-change:transform; user-select:none; -webkit-user-select:none; font-family:var(--display);
}
.board.no-anim .card{ transition:none }
.card.up{ background:#fff }
.card .cf{ position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:inherit; pointer-events:none }
.card img.cf{ object-fit:cover }   /* court figures fill; inline-SVG number cards use their own preserveAspectRatio */
.card .ix{ position:absolute; display:flex; align-items:center; gap:calc(var(--cw,64px)*.01); line-height:1; font-family:var(--display); font-weight:800 }
.card .ix.tl{ top:7%; left:8% }
.card .ix.br{ bottom:7%; right:8%; transform:rotate(180deg) }
.card .ix b{ font-size:calc(var(--cw,64px)*.48); letter-spacing:-.04em }
.card .ix i, .card .big{ font-family:"Segoe UI Symbol","Noto Sans Symbols2","Noto Sans Symbols","DejaVu Sans",sans-serif; font-style:normal }
.card .ix i{ font-size:calc(var(--cw,64px)*.42) }
.card .big{ position:absolute; left:50%; top:53%; transform:translate(-50%,-50%); font-size:calc(var(--cw,64px)*.98); opacity:.13 }
.card.red .ix, .card.red .big{ color:#c8102e }
.card.up:not(.red) .ix, .card.up:not(.red) .big{ color:#16181f }
.card.dragging{ transition:none !important; cursor:grabbing; box-shadow:0 12px 28px rgba(0,0,0,.55) }
.card.red{ color:var(--red) }
.card.down{
  background-image:url(../../assets/cards/royal/back.jpg); background-size:cover; background-position:center;
  border:none; box-shadow:0 1px 2px rgba(0,0,0,.4), 0 5px 12px rgba(0,0,0,.3);
}
.card.down::after{ content:none }
/* selectable back colours (default blue = back.jpg above) */
html[data-back="red"]      .card.down{ background-image:url(../../assets/cards/royal/back-red.jpg) }
html[data-back="green"]    .card.down{ background-image:url(../../assets/cards/royal/back-green.jpg) }
html[data-back="purple"]   .card.down{ background-image:url(../../assets/cards/royal/back-purple.jpg) }
html[data-back="charcoal"] .card.down{ background-image:url(../../assets/cards/royal/back-charcoal.jpg) }
html[data-back="burgundy"] .card.down{ background-image:url(../../assets/cards/royal/back-burgundy.jpg) }
.card .corner{ position:absolute; left:7%; top:3.5%; display:flex; flex-direction:column; align-items:center; line-height:.92; font-weight:800 }
.card .corner b{ font-size:calc(var(--cw,64px)*.34) }
.card .corner i{ font-size:calc(var(--cw,64px)*.26); font-style:normal; margin-top:1px }
.card .corner.br{ left:auto; top:auto; right:7%; bottom:3.5%; transform:rotate(180deg) }
.card .pip{ position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--cw,64px)*.62); opacity:.92 }
.card.shake{ animation:solBad .32s }
@keyframes solBad{ 0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.35), 0 5px 12px rgba(0,0,0,.26) } 45%{ box-shadow:0 0 0 3px var(--red), 0 6px 14px rgba(0,0,0,.4) } }

/* ---- win ---- */
.win{
  position:fixed; inset:0; z-index:1100; display:none; place-items:center;
  background:radial-gradient(circle at 50% 38%, rgba(6,42,26,.5), rgba(3,12,7,.86));
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.win.show{ display:grid; animation:winFade .4s ease }
.win .panel{
  text-align:center; padding:clamp(22px,5vw,38px) clamp(28px,6vw,52px);
  background:linear-gradient(180deg,rgba(12,70,42,.96),rgba(6,42,26,.98)); border-radius:20px;
  box-shadow:0 0 0 3px var(--gold-2), inset 0 0 0 2px rgba(255,240,176,.25), 0 22px 54px rgba(0,0,0,.6);
}
.win .panel .big{ font-size:clamp(3rem,16vw,5.5rem) }
.win .panel h1{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,8vw,3rem); margin:.2rem 0; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.win .panel p{ color:var(--paper); margin:.2rem 0 1.3rem }
@keyframes winFade{ from{opacity:0} to{opacity:1} }
.confetti{ position:fixed; top:-20px; width:10px; height:14px; border-radius:2px; z-index:1099; pointer-events:none }
@keyframes drop{ to{ transform:translateY(112vh) rotate(720deg); opacity:.25 } }

.credit{ text-align:center; font-family:var(--mono); font-size:.68rem; color:var(--muted); opacity:.75; margin:12px 0 6px }
.credit a{ color:var(--gold); text-decoration:none }

@media (prefers-reduced-motion:reduce){ .card{ transition:none } }

/* ---- Arline's time powers: rewind + magic shuffle pills & effects ---- */
.sol-bar .pill{ min-height:44px; display:inline-flex; align-items:center; gap:.45rem }
.sol-bar .pill .chip{
  font-family:var(--mono); font-size:.66rem; font-weight:800; line-height:1;
  color:var(--ink); background:var(--gold-grad); border-radius:999px; padding:.22rem .44rem;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.sol-bar .pill:disabled{ opacity:.4; cursor:default; pointer-events:none; transform:none }
.sol-bar .pill:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* magic shuffle: brief gold shimmer washing over every face-down card */
.card.down.shimmer{ animation:solShimmer .7s cubic-bezier(0,0,.2,1) }
@keyframes solShimmer{
  0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 5px 12px rgba(0,0,0,.3); filter:none }
  45%{ box-shadow:0 0 0 2px var(--gold-hi), 0 0 20px 5px rgba(233,195,74,.8); filter:brightness(1.25) saturate(1.15) }
}

/* rewind: ~500ms sepia + vignette wash over the whole board */
.rewind-wash{
  position:fixed; inset:0; z-index:1050; pointer-events:none; opacity:0;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(0,0,0,0) 40%, rgba(24,12,2,.7) 100%),
    linear-gradient(rgba(173,124,48,.3), rgba(173,124,48,.3));
}
.rewind-wash.on{ animation:solRewind .5s cubic-bezier(0,0,.2,1) }
@keyframes solRewind{ 0%{ opacity:0 } 30%{ opacity:1 } 100%{ opacity:0 } }

@media (prefers-reduced-motion:reduce){
  .card.down.shimmer{ animation:none }
  .rewind-wash.on{ animation:none; opacity:0 }
}