/* FreeCell Now — production stylesheet */
/* Self-hosted variable fonts. Place the WOFF2 files in /assets/fonts/. */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-variable.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}

:root{
  /* JS chooses --card-w and --fan from the real board width/height. These
     literals are safe no-JS fallbacks; sizing is intentionally aspect-ratio agnostic. */
  --card-w:112px; --card-h:calc(var(--card-w) * 1.4);
  --fan:31px; --fan-min:27px; --lane-gap:clamp(3px,.55vw,9px); --radius:clamp(4px,calc(var(--card-w) * .102),12px);
  --upper-separation:clamp(24px,4.2vw,72px);
  --board-pad-top:clamp(82px,9.5vh,108px);
  --board-pad-bottom:clamp(36px,4.8vh,56px);
  --tableau-top-gap:clamp(16px,2.4vh,28px);
  --toolbar-menu-top:64px;
  --playfield-w:calc((var(--card-w) * 8) + (var(--lane-gap) * 7));

  /* Shared layout rails. Keep structural widths here so page-specific
     stylesheets cannot drift out of alignment. */
  --site-shell-max:1180px;
  --game-editorial-max:940px;
  --game-editorial-gutter:20px;
  --content-layout-max:1060px;
  --content-reading-max:780px;
  --content-hero-max:860px;

  /* Card typography scales with the actual card width. The compact line-height
     is intentional: it keeps rank + suit readable when a long column compresses. */
  --card-index-x:clamp(3px,calc(var(--card-w) * .055),11px);
  --card-index-y:clamp(3px,calc(var(--card-w) * .040),8px);
  --card-index-gap:clamp(1px,calc(var(--card-w) * .018),4px);
  --card-rank-size:clamp(9px,calc(var(--card-w) * .195),48px);
  --card-suit-size:clamp(8px,calc(var(--card-w) * .150),38px);
  --card-pip-size:clamp(16px,calc(var(--card-w) * .460),96px);
  --card-face-size:clamp(16px,calc(var(--card-w) * .440),92px);

  --gold:#d7b76b; --gold2:#f4dfa3; --red:#a62b2f;
  --felt1:#154333; --felt2:#08251d; --feltGlow:rgba(255,255,255,.09);
  --felt-grain-opacity:.32;
  --felt-vignette-mid:rgba(0,0,0,.14);
  --felt-vignette-edge:rgba(0,0,0,.25);
  --wood1:#18110c; --wood2:#080706;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#050605;color:#f6f0e5;font-family:"Manrope",sans-serif}
/* Keep vertical scrolling functional while hiding the browser scrollbar. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{overflow-x:hidden;overflow-y:auto;background:
 radial-gradient(circle at 50% -15%,rgba(255,231,175,.08),transparent 36%),
 linear-gradient(118deg,var(--wood2),var(--wood1) 45%,#080706);}
button,input,select{font:inherit}
button{user-select:none}
.hidden{display:none!important}

/* Shared rails for every editorial block rendered below the game.
   Home, Daily, Puzzles and fixed deals all use the same 940px axis. */
.game-seo-content{padding-inline:var(--game-editorial-gutter)}
.game-seo-content__inner{width:min(var(--game-editorial-max),100%);margin-inline:auto}
#ambient{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.23;background:
 radial-gradient(circle at 15% 20%,rgba(255,255,255,.04),transparent 16%),
 radial-gradient(circle at 80% 14%,rgba(255,231,166,.04),transparent 18%),
 repeating-linear-gradient(28deg,rgba(255,255,255,.007) 0 1px,transparent 1px 5px);
 mix-blend-mode:screen;animation:ambientShift 16s ease-in-out infinite alternate}
@keyframes ambientShift{from{transform:scale(1)}to{transform:scale(1.04) translateY(-1%)}}

body.theme-bordeaux{--felt1:#5a181d;--felt2:#25090d;--feltGlow:rgba(255,220,210,.08);--wood1:#24140e;--wood2:#0d0806}
body.theme-midnight{--felt1:#16283d;--felt2:#081321;--feltGlow:rgba(190,220,255,.09);--wood1:#141619;--wood2:#08090b}

.app{position:relative;z-index:1;width:100vw;height:100vh;height:100dvh;padding:0}
.frame{position:relative;width:100%;height:100%;margin:0;border-radius:0;overflow:hidden;border:0;display:flex;flex-direction:column;background:transparent;box-shadow:none;backdrop-filter:none}
.topbar{position:absolute;z-index:20;top:0;left:0;right:0;min-height:0;padding:12px clamp(10px,2.15vw,31px) 16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;background:transparent;border:0;pointer-events:none}
.brand,.crest{display:none!important}
.stats,.actions{pointer-events:auto}
.stats{display:flex;gap:clamp(8px,1.6vw,17px);justify-self:start;padding:7px 10px;border-radius:12px;background:rgba(4,18,14,.24);backdrop-filter:blur(6px)}
.stat{text-align:center;min-width:52px}.stat span{display:block;color:rgba(240,236,226,.64);font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}.stat strong{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:7px;justify-content:flex-end;justify-self:end;min-width:0}
.btn{min-height:37px;padding:0 12px;border-radius:10px;cursor:pointer;color:#e9e1d5;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
 border:1px solid rgba(255,255,255,.105);box-shadow:inset 0 1px rgba(255,255,255,.055);transition:transform .15s ease,border-color .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-1px);border-color:rgba(215,183,107,.43);filter:brightness(1.08)}.btn.gold{border-color:rgba(215,183,107,.4);color:var(--gold2);background:linear-gradient(180deg,rgba(215,183,107,.105),rgba(215,183,107,.03))}
.icon-btn{width:38px;padding:0;display:grid;place-items:center}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:none}
.undo-control{position:relative;display:flex;gap:4px;flex:0 0 auto}
.undo-rewind-toggle{font-size:10px;}
.undo-rewind{position:absolute;top:calc(100% + 8px);left:0;z-index:45;width:min(280px,calc(100vw - 24px));padding:13px 14px 12px;border-radius:14px;color:#e9e1d5;background:rgba(12,16,13,.97);border:1px solid rgba(215,183,107,.30);box-shadow:0 18px 48px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.055);backdrop-filter:blur(12px)}
.undo-rewind__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}.undo-rewind__head span{font:600 15px "Fraunces",serif;color:#f0e8da}.undo-rewind__head strong{font-size:11px;font-weight:650;color:var(--gold2);font-variant-numeric:tabular-nums}
.undo-rewind input[type="range"]{display:block;width:100%;margin:0;accent-color:var(--gold);cursor:ew-resize}.undo-rewind input[type="range"]:disabled{cursor:not-allowed;opacity:.45}
.undo-rewind__scale{display:flex;justify-content:space-between;margin-top:5px;color:rgba(233,225,213,.54);font-size:9px;font-variant-numeric:tabular-nums}.undo-rewind p{margin:8px 0 0;color:rgba(233,225,213,.60);font-size:9px;line-height:1.35}

/* Board surface -----------------------------------------------------------
   The felt uses a small grayscale raster tile rather than directional CSS
   lines. Soft-light blending lets the same grain work across every theme. */
.board-shell{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--felt2)}
.board{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:var(--board-pad-top) clamp(8px,2.15vw,31px) var(--board-pad-bottom);
  perspective:1200px;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 50% -5%,var(--feltGlow),transparent 34%),
    radial-gradient(ellipse at 24% 34%,color-mix(in srgb,var(--felt1) 28%,transparent),transparent 31%),
    radial-gradient(ellipse at 79% 72%,rgba(0,0,0,.12),transparent 44%),
    linear-gradient(140deg,var(--felt1) 0%,color-mix(in srgb,var(--felt1) 70%,var(--felt2)) 54%,var(--felt2) 100%);
  box-shadow:inset 0 0 175px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.03);
}
.board::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("../img/felt-grain-premium.png") 0 0 / 256px 256px repeat;
  opacity:var(--felt-grain-opacity);
  mix-blend-mode:soft-light;
  filter:contrast(112%) brightness(104%);
}
.board::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 54%,transparent 0 40%,rgba(0,0,0,.05) 68%,var(--felt-vignette-mid) 84%,var(--felt-vignette-edge) 100%),
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.028),transparent 38%);
  opacity:.96;
}
.board > *{position:relative;z-index:1}
.upper{display:flex;justify-content:center;gap:var(--upper-separation);position:relative;z-index:2;width:min(calc(var(--playfield-w) + var(--upper-separation) - var(--lane-gap)),100%);max-width:100%;margin-inline:auto}.group{display:flex;gap:var(--lane-gap);position:relative;flex:0 0 auto}
.slot{width:var(--card-w);height:var(--card-h);border-radius:var(--radius);position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);color:rgba(255,255,255,.15);
 background:linear-gradient(145deg,rgba(0,0,0,.16),rgba(255,255,255,.055));box-shadow:inset 0 9px 20px rgba(0,0,0,.13),0 1px rgba(255,255,255,.03)}
.slot::before{content:attr(data-label);font-family:"Fraunces",serif;font-size:clamp(12px,calc(var(--card-w) * .22),44px)}.slot.freecell-slot::before{content:""}.slot.foundation::before{font-size:clamp(26px,calc(var(--card-w) * .42),84px);line-height:1}.slot.foundation.red{color:rgba(170,45,48,.34)}
.slot.valid-target{outline:none;border-color:rgba(215,183,107,.34);background:linear-gradient(145deg,rgba(215,183,107,.035),rgba(255,255,255,.05));box-shadow:0 0 0 2px rgba(244,223,163,.20),0 0 14px rgba(215,183,107,.14),inset 0 9px 20px rgba(0,0,0,.13),inset 0 0 0 1px rgba(215,183,107,.10),0 1px rgba(255,255,255,.03)}
.column.valid-target{outline:1px solid rgba(244,223,163,.23);outline-offset:3px;filter:drop-shadow(0 0 8px rgba(215,183,107,.10))}
.slot.hint,.column.hint{animation:hintPulse 1s ease-in-out 2}
@keyframes hintPulse{50%{filter:drop-shadow(0 0 14px rgba(239,205,119,.98))}}
.tableau{position:relative;z-index:2;display:grid;grid-template-columns:repeat(8,var(--card-w));justify-content:center;gap:var(--lane-gap);width:var(--playfield-w);max-width:100%;margin:var(--tableau-top-gap) auto 0;flex:1 1 auto;min-height:0}.column{width:var(--card-w);min-height:100%;border-radius:14px;position:relative}
.column.empty::after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:var(--card-h);border-radius:var(--radius);border:1px dashed rgba(255,255,255,.12);background:rgba(0,0,0,.038)}

.card{position:absolute;left:0;width:var(--card-w);height:var(--card-h);border-radius:var(--radius);color:#111313;cursor:grab;user-select:none;touch-action:none;--card-lift:calc(var(--card-w) * -.065);transition:opacity .16s ease}
.card-surface{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;will-change:transform,box-shadow;background:linear-gradient(115deg,rgba(255,255,255,.9),transparent 18%),repeating-linear-gradient(0deg,rgba(70,62,52,.018) 0 1px,transparent 1px 3px),linear-gradient(145deg,#fffef9,#f1ede3 57%,#dad4c8);border:1px solid rgba(36,31,26,.19);box-shadow:0 3px 5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.10),inset 0 -1px rgba(0,0,0,.06);transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .46s cubic-bezier(.22,1,.36,1)}
.card-surface::before{content:"";position:absolute;inset:1px;border-radius:calc(var(--radius) - 2px);pointer-events:none;border:1px solid rgba(115,95,67,.08);box-shadow:inset 0 0 18px rgba(130,114,91,.05);transition:border-color .38s ease,box-shadow .42s ease}
.card-surface::after{content:"";position:absolute;inset:-25%;pointer-events:none;opacity:.025;background:radial-gradient(circle at 36% 24%,rgba(255,255,255,.34),transparent 34%),linear-gradient(118deg,transparent 38%,rgba(255,255,255,.72) 48%,transparent 58%);transform:translateX(-38%);transition:opacity .46s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1)}
@media (any-hover:hover) and (any-pointer:fine){
 .card:hover:not(.dragging) .card-surface{transform:translateY(var(--card-lift));box-shadow:0 5px 8px rgba(0,0,0,.18),0 2px 3px rgba(0,0,0,.10),inset 0 -1px rgba(0,0,0,.06)}
 .card:hover:not(.dragging) .card-surface::after{opacity:.085;transform:translateX(-30%)}
}
.card.selected{outline:none}
.card.selected .card-surface{transform:translateY(var(--card-lift));box-shadow:0 0 0 2px rgba(244,223,163,.50),0 0 15px rgba(215,183,107,.20),0 5px 8px rgba(0,0,0,.18),0 2px 3px rgba(0,0,0,.10),inset 0 -1px rgba(0,0,0,.06)}
.card.selected .card-surface::before{border-color:rgba(215,183,107,.58);box-shadow:inset 0 0 18px rgba(130,114,91,.05),inset 0 0 0 1px rgba(215,183,107,.20)}
.card.selected .card-surface::after{opacity:.07;transform:translateX(-31%)}
@media (any-hover:hover) and (any-pointer:fine){
 .card.selected:hover:not(.dragging) .card-surface{transform:translateY(var(--card-lift));box-shadow:0 0 0 2px rgba(244,223,163,.50),0 0 15px rgba(215,183,107,.20),0 5px 8px rgba(0,0,0,.18),0 2px 3px rgba(0,0,0,.10),inset 0 -1px rgba(0,0,0,.06)}
 .card.selected:hover:not(.dragging) .card-surface::after{opacity:.09;transform:translateX(-29%)}
}
.card.dragging{opacity:.52}
.card.drag-source .card-surface{opacity:0!important}
.card.drag-proxy{position:fixed!important;margin:0!important;pointer-events:none!important;cursor:grabbing!important;will-change:transform;transform:translate3d(0,0,0);transition:none!important}
.card.drag-proxy .card-surface{transform:none!important;opacity:1!important;box-shadow:0 7px 11px rgba(0,0,0,.20),0 3px 4px rgba(0,0,0,.11),inset 0 -1px rgba(0,0,0,.06)!important;transition:box-shadow .2s ease!important}
.card.drag-proxy .card-surface::after{opacity:.06!important;transform:translateX(-31%)!important}
.card.drag-proxy.drag-settling{transition:transform .27s cubic-bezier(.22,1,.36,1)!important}
.card.drag-proxy.drag-settling .card-surface{box-shadow:0 3px 5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.10),inset 0 -1px rgba(0,0,0,.06)!important}
.card.drag-landing-hidden .card-surface{opacity:0!important}
.board.drag-active,.board.drag-active .card{cursor:grabbing!important}
.slot.drag-hover-target{border-color:rgba(244,223,163,.58);box-shadow:0 0 0 2px rgba(244,223,163,.28),0 0 19px rgba(215,183,107,.22),inset 0 9px 20px rgba(0,0,0,.13),inset 0 0 0 1px rgba(215,183,107,.15),0 1px rgba(255,255,255,.03)}
.column.drag-hover-target{outline:2px solid rgba(244,223,163,.33);outline-offset:3px;filter:drop-shadow(0 0 11px rgba(215,183,107,.16))}
.card.red{color:var(--red)}
.card:focus-visible{outline:3px solid rgba(237,205,121,.97);outline-offset:3px}.slot:focus-visible,.column:focus-visible{outline:2px solid rgba(237,205,121,.8);outline-offset:4px}
/* Card typography ----------------------------------------------------------
   Rank + suit are intentionally compact but visually strong. Their line box
   tracks the readable fan floor used by the layout engine, while the maximums
   are high enough that 1440p / ultrawide cards no longer look under-labelled. */
.corner{position:absolute;left:var(--card-index-x);top:var(--card-index-y);z-index:2;display:flex;align-items:center;gap:var(--card-index-gap);white-space:nowrap;line-height:.80;text-align:center;font-family:"Fraunces",serif;font-weight:650}
.corner .rank{font-size:var(--card-rank-size)}
.corner .suit{font-size:var(--card-suit-size);margin-top:0}
.corner.bottom{left:auto;top:auto;right:var(--card-index-x);bottom:var(--card-index-y);transform:rotate(180deg)}
.pip{position:absolute;inset:calc(var(--card-h) * .18) calc(var(--card-w) * .14) calc(var(--card-h) * .15);display:grid;place-items:center;font-family:"Fraunces",serif;font-size:var(--card-pip-size);line-height:1;text-shadow:0 1px rgba(255,255,255,.55)}
.pip.face{inset:18% 20%;text-shadow:none}
.pip.face-letter{font-size:var(--card-face-size);font-weight:650;letter-spacing:-.035em}

/* Card deck styles --------------------------------------------------------- */
.top-suit{display:none}

/* Original: the reference scale. Rank + suit stay on one compact line. */
body.deck-original .corner{font-family:"Fraunces",serif}
body.deck-original .pip{font-size:clamp(20px,calc(var(--card-w) * .56),114px);text-shadow:0 1px rgba(255,255,255,.55)}

/* Essence: modern split index; rank left, suit right, larger central mark. */
body.deck-essence .card{border-radius:calc(var(--radius) * .82)}
body.deck-essence .card-surface{background:#fff;border:1px solid #c8c8c5;box-shadow:0 2px 4px rgba(0,0,0,.14)}
body.deck-essence .card-surface::before,body.deck-essence .card-surface::after{display:none}
body.deck-essence .corner{left:var(--card-index-x);top:var(--card-index-y);display:block;font-family:"Manrope",sans-serif;line-height:.82;text-align:left}
body.deck-essence .corner .suit,body.deck-essence .corner.bottom{display:none}
body.deck-essence .corner .rank{font-family:"Manrope",sans-serif;font-size:var(--card-rank-size);font-weight:750;letter-spacing:-.055em}
body.deck-essence .top-suit{display:block;position:absolute;z-index:3;right:var(--card-index-x);top:var(--card-index-y);font-family:"Fraunces",serif;font-size:var(--card-suit-size);line-height:.82}
body.deck-essence .pip{inset:18% 14% 15%;font-family:"Fraunces",serif;font-size:clamp(20px,calc(var(--card-w) * .60),120px);font-weight:700;text-shadow:none;letter-spacing:0}

/* Montecarlo: bold poker indices, slightly denser than Original. */
body.deck-montecarlo .card{border-radius:calc(var(--radius) * .94)}
body.deck-montecarlo .card-surface{background:linear-gradient(155deg,#ffffff 0%,#fcfcfb 66%,#f1f1ee 100%);border:1px solid #a9aaa6;box-shadow:0 4px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.60)}
body.deck-montecarlo .card-surface::after{display:none}
body.deck-montecarlo .corner{left:var(--card-index-x);top:var(--card-index-y);font-family:"Manrope",sans-serif;line-height:.78;transform:scaleX(.94);transform-origin:top left}
body.deck-montecarlo .corner.bottom{left:auto;top:auto;right:var(--card-index-x);bottom:var(--card-index-y);transform:rotate(180deg) scaleX(.94);transform-origin:center}
body.deck-montecarlo .corner .rank{font-family:"Manrope",sans-serif;font-size:clamp(9px,calc(var(--card-w) * .20),48px);font-weight:800;letter-spacing:-.08em}
body.deck-montecarlo .corner .suit{font-family:"Fraunces",serif;font-size:clamp(8px,calc(var(--card-w) * .15),38px);font-weight:700}
body.deck-montecarlo .pip{font-family:"Fraunces",serif;font-size:clamp(20px,calc(var(--card-w) * .56),114px);text-shadow:none}
body.deck-montecarlo .pip.face{width:calc(var(--card-w) * .46);height:calc(var(--card-w) * .57);inset:50% auto auto 50%;transform:translate(-50%,-50%);border:2px solid currentColor;border-radius:calc(var(--radius) * .66);font-family:"Manrope",sans-serif;font-size:clamp(14px,calc(var(--card-w) * .34),68px);font-weight:800;background:rgba(0,0,0,.018)}

/* Royale Gold: same information hierarchy, warmer decorative treatment. */
body.deck-royale-gold .card{border-radius:calc(var(--radius) * 1.08);color:#252019}
body.deck-royale-gold .card.red{color:#8f2429}
body.deck-royale-gold .card-surface{background:linear-gradient(116deg,rgba(255,255,255,.55),transparent 18%,rgba(255,255,255,.16) 43%,transparent 58%),repeating-linear-gradient(100deg,rgba(92,64,18,.035) 0 1px,transparent 1px 4px),linear-gradient(145deg,#fff7d8 0%,#e9cc7b 32%,#c49a42 66%,#f2dc99 100%);border:1px solid #9e772c;box-shadow:0 4px 8px rgba(0,0,0,.19),inset 0 -2px rgba(91,61,14,.12)}
body.deck-royale-gold .card-surface::before{display:none}
body.deck-royale-gold .card-surface::after{display:block;inset:-35%;transform:rotate(15deg);background:linear-gradient(90deg,transparent 38%,rgba(255,255,255,.24) 48%,transparent 58%);opacity:.48}
body.deck-royale-gold .corner,body.deck-royale-gold .pip{font-family:"Fraunces",serif;z-index:2}
body.deck-royale-gold .corner .rank{font-family:"Fraunces",serif;font-size:var(--card-rank-size);font-weight:700;text-shadow:0 1px rgba(255,255,255,.35)}
body.deck-royale-gold .corner .suit{font-family:"Fraunces",serif;font-size:var(--card-suit-size)}
body.deck-royale-gold .pip{font-size:clamp(20px,calc(var(--card-w) * .54),110px);text-shadow:0 1px rgba(255,255,255,.30),0 1px 1px rgba(80,54,10,.10)}
body.deck-royale-gold .pip.face{inset:18% 14% 15%;width:auto;height:auto;transform:none;border:0;border-radius:0;background:transparent;font-family:"Fraunces",serif;font-size:clamp(14px,calc(var(--card-w) * .50),100px)}


/* Classic: crisp traditional playing-card stock. Familiar, high contrast and
   deliberately restrained so it reads like a physical deck rather than a UI skin. */
body.deck-classic .card{border-radius:calc(var(--radius) * .72);color:#11120f}
body.deck-classic .card.red{color:#c7252c}
body.deck-classic .card-surface{background:linear-gradient(145deg,#fff 0%,#fffefa 62%,#f5f3ed 100%);border:1px solid rgba(43,42,38,.28);box-shadow:0 3px 5px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.08)}
body.deck-classic .card-surface::before{inset:1px;border-radius:calc(var(--radius) * .55);border-color:rgba(52,48,41,.055);box-shadow:none}
body.deck-classic .card-surface::after{display:none}
body.deck-classic .corner,body.deck-classic .pip{font-family:"Fraunces",serif}
body.deck-classic .corner{gap:clamp(1px,calc(var(--card-w) * .014),3px);line-height:.78}
body.deck-classic .corner .rank{font-size:clamp(9px,calc(var(--card-w) * .202),50px);font-weight:720;letter-spacing:-.035em}
body.deck-classic .corner .suit{font-size:clamp(8px,calc(var(--card-w) * .152),39px);font-weight:650}
body.deck-classic .pip{font-size:clamp(20px,calc(var(--card-w) * .56),114px);text-shadow:none}
body.deck-classic .pip.face{font-size:clamp(16px,calc(var(--card-w) * .46),94px);font-weight:700}

/* Jumbo Index: accessibility-first FreeCell deck. The corner index is the visual
   priority so ranks and suits remain scannable even when long columns overlap. */
body.deck-jumbo .card{border-radius:calc(var(--radius) * .78);color:#0b0d0c}
body.deck-jumbo .card.red{color:#c8202b}
body.deck-jumbo .card-surface{background:linear-gradient(150deg,#fff 0%,#fdfdf9 72%,#f0eee8 100%);border:1px solid rgba(28,31,29,.24);box-shadow:0 3px 5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.09)}
body.deck-jumbo .card-surface::after{display:none}
body.deck-jumbo .corner{left:clamp(3px,calc(var(--card-w) * .045),9px);top:clamp(2px,calc(var(--card-w) * .028),6px);gap:clamp(1px,calc(var(--card-w) * .012),3px);font-family:"Manrope",sans-serif;line-height:.76;transform:scaleX(.96);transform-origin:top left}
body.deck-jumbo .corner.bottom{left:auto;top:auto;right:clamp(3px,calc(var(--card-w) * .045),9px);bottom:clamp(2px,calc(var(--card-w) * .028),6px);transform:rotate(180deg) scaleX(.96);transform-origin:center}
body.deck-jumbo .corner .rank{font-family:"Manrope",sans-serif;font-size:clamp(11px,calc(var(--card-w) * .23),58px);font-weight:800;letter-spacing:-.075em}
body.deck-jumbo .corner .suit{font-family:"Fraunces",serif;font-size:clamp(9px,calc(var(--card-w) * .178),45px);font-weight:750}
body.deck-jumbo .pip{font-family:"Fraunces",serif;font-size:clamp(20px,calc(var(--card-w) * .55),112px);text-shadow:none}
body.deck-jumbo .pip.face{font-family:"Manrope",sans-serif;font-size:clamp(16px,calc(var(--card-w) * .39),80px);font-weight:800;letter-spacing:-.055em}

/* Vintage: warm ivory stock, softened ink and a very subtle print/paper texture. */
body.deck-vintage .card{border-radius:calc(var(--radius) * .82);color:#27231d}
body.deck-vintage .card.red{color:#9b3431}
body.deck-vintage .card-surface{background:repeating-linear-gradient(0deg,rgba(88,69,42,.018) 0 1px,transparent 1px 4px),radial-gradient(circle at 24% 18%,rgba(255,255,255,.55),transparent 30%),linear-gradient(145deg,#fbf3dc 0%,#eee1c3 68%,#ddcda9 100%);border:1px solid rgba(99,73,39,.40);box-shadow:0 4px 7px rgba(0,0,0,.17),0 1px 2px rgba(0,0,0,.08),inset 0 0 18px rgba(111,79,36,.045)}
body.deck-vintage .card-surface::before{inset:calc(var(--card-w) * .025);border-radius:calc(var(--radius) * .62);border:1px solid rgba(112,81,42,.16);box-shadow:inset 0 0 14px rgba(88,61,28,.035)}
body.deck-vintage .card-surface::after{display:none}
body.deck-vintage .corner,body.deck-vintage .pip{font-family:"Fraunces",serif}
body.deck-vintage .corner{gap:clamp(1px,calc(var(--card-w) * .016),3px);line-height:.79}
body.deck-vintage .corner .rank{font-size:clamp(9px,calc(var(--card-w) * .198),49px);font-weight:700;letter-spacing:-.025em;text-shadow:0 1px rgba(255,255,255,.25)}
body.deck-vintage .corner .suit{font-size:clamp(8px,calc(var(--card-w) * .148),38px);font-weight:650}
body.deck-vintage .pip{font-size:clamp(20px,calc(var(--card-w) * .54),110px);text-shadow:0 1px rgba(255,255,255,.24)}
body.deck-vintage .pip.face{font-size:clamp(16px,calc(var(--card-w) * .45),92px);font-weight:680}

/* Black: matte charcoal stock with ivory/vermillion ink. It stays high contrast
   without relying on an additional font or neon effects. */
body.deck-black .card{border-radius:calc(var(--radius) * .82);color:#f2eee4}
body.deck-black .card.red{color:#ff6468}
body.deck-black .card-surface{background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.025),transparent 30%),linear-gradient(145deg,#262927 0%,#171a18 58%,#0e100f 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 7px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.12),inset 0 -1px rgba(0,0,0,.32)}body.deck-black .card-surface::before{display:none}
body.deck-black .card-surface::after{display:none}
body.deck-black .corner{font-family:"Manrope",sans-serif;line-height:.78;gap:clamp(1px,calc(var(--card-w) * .016),3px)}
body.deck-black .corner .rank{font-family:"Manrope",sans-serif;font-size:clamp(9px,calc(var(--card-w) * .20),50px);font-weight:780;letter-spacing:-.065em}
body.deck-black .corner .suit{font-family:"Fraunces",serif;font-size:clamp(8px,calc(var(--card-w) * .15),39px);font-weight:700}
body.deck-black .pip{font-family:"Fraunces",serif;font-size:clamp(20px,calc(var(--card-w) * .56),114px);text-shadow:0 1px 1px rgba(0,0,0,.45)}
body.deck-black .pip.face{font-family:"Manrope",sans-serif;font-size:clamp(16px,calc(var(--card-w) * .43),88px);font-weight:800;letter-spacing:-.045em}
.deal-in{animation:dealIn .42s cubic-bezier(.18,.75,.22,1) both}@keyframes dealIn{from{opacity:0;transform:translateY(-170px) rotate(var(--deal-rot,0deg)) scale(.88)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:26px;z-index:80;transform:translate(-50%,18px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:12px;color:#f5ebd5;background:rgba(9,11,9,.91);border:1px solid rgba(215,183,107,.35);box-shadow:0 18px 46px rgba(0,0,0,.42);backdrop-filter:blur(12px);font-size:12px;transition:.22s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(36,72,56,.45),transparent 35%),rgba(4,6,5,.74);backdrop-filter:blur(14px)}
.panel{width:min(535px,94vw);border-radius:24px;padding:32px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(215,183,107,.08),transparent 34%),linear-gradient(155deg,#1a1d19,#0c0f0d);border:1px solid rgba(215,183,107,.36);box-shadow:0 44px 130px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.06)}
.panel .mini-crest{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font:600 30px "Fraunces",serif;color:var(--gold2);border:1px solid rgba(215,183,107,.52);box-shadow:inset 0 0 0 6px rgba(215,183,107,.05)}
.splash-title{font:600 clamp(34px,5vw,52px) "Fraunces",serif;letter-spacing:.025em;color:#f1eadf;margin:0 0 12px;text-shadow:0 2px 18px rgba(0,0,0,.28)}.panel h2{font:600 34px "Fraunces",serif;letter-spacing:.04em;margin:5px 0 8px}.panel p{color:#aaa498;line-height:1.55;margin:0 auto 20px;max-width:410px;font-size:13px}.cta{min-height:46px;padding:0 20px;font-weight:650;letter-spacing:.04em}
.start-meta{display:flex;justify-content:center;gap:18px;margin:17px 0 22px;color:#878178;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.start-meta span strong{display:block;color:#d8d0c3;font-size:14px;letter-spacing:0;margin-top:4px}
/* Splash / Daily / Deal CTAs -------------------------------------------------
   Keep action labels on one line. The two stable slots preserve the no-CLS
   behavior: with Resume hidden, the primary CTA is visually centered; with
   Resume visible, both buttons are centered as a group. */
.start-actions{--start-action-gap:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-content:center;width:min(100%,460px);margin-inline:auto;gap:var(--start-action-gap)}
.start-actions #startBtn,.start-actions #resumeBtn{grid-row:1;width:100%;min-width:0;margin:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1.1}
.start-actions #startBtn{grid-column:1}
.start-actions #resumeBtn{grid-column:2}
.start-actions:has(#resumeBtn.hidden) #startBtn{grid-column:1/-1;width:calc((100% - var(--start-action-gap)) / 2);justify-self:center}
.start-actions #resumeBtn.hidden{display:none!important}
.start-actions .cta,.splash-cta{white-space:nowrap;padding-inline:18px}
.settings{position:fixed;right:18px;top:var(--toolbar-menu-top);z-index:110;width:310px;padding:18px;border-radius:18px;background:rgba(16,19,17,.96);border:1px solid rgba(215,183,107,.26);box-shadow:0 28px 80px rgba(0,0,0,.48);backdrop-filter:blur(14px)}
.settings h3{font:600 20px "Fraunces",serif;margin:0 0 15px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12px}.setting-row:first-of-type{border-top:0}
.switch{width:44px;height:25px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:#1b201c;position:relative;cursor:pointer}.switch::after{content:"";width:19px;height:19px;border-radius:50%;position:absolute;top:2px;left:2px;background:#777;transition:.18s}.switch.on{background:rgba(215,183,107,.18);border-color:rgba(215,183,107,.38)}.switch.on::after{left:21px;background:var(--gold2)}
.select{background:#151815;color:#ddd5c9;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 8px}.remember-row{align-items:flex-start}.remember-row>span{max-width:205px;line-height:1.45}.remember-row .switch{flex:0 0 auto;margin-top:1px}.setting-note{margin:0;padding:0 54px 2px 0;color:rgba(221,213,201,.58);font-size:10px;line-height:1.45}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:120}.win-panel .crown{font-size:46px;color:var(--gold2);filter:drop-shadow(0 8px 18px rgba(215,183,107,.15))}.win-panel h2{font-size:32px}.best{color:var(--gold2)!important}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:#bcb4a7;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 9px;background:rgba(255,255,255,.03);margin-bottom:12px}
/* -------------------------------------------------------------------------
   Adaptive board geometry
   Card width and vertical fan are computed in assets/js/ui/layout.js from the
   actual board dimensions and longest tableau column. There are deliberately
   no 16:9 / 21:9 / 32:9 card-size breakpoints here.

   Covered-card indices stay compact so the JS readability floor can guarantee
   rank + suit visibility before it considers making cards larger.
   ------------------------------------------------------------------------- */
@media (min-width:761px){
 :root{--card-index-gap:clamp(2px,calc(var(--card-w) * .018),4px)}
}
@media(max-width:760px){
 :root{--game-editorial-gutter:16px}
 :root{--upper-separation:clamp(10px,2.6vw,18px);--toolbar-menu-top:90px;--card-index-x:clamp(2px,calc(var(--card-w) * .06),5px);--card-index-y:clamp(3px,calc(var(--card-w) * .07),4px);--card-index-gap:1px}
 .topbar{grid-template-columns:1fr;justify-items:center;gap:5px;padding:8px 8px 12px}.actions{justify-self:center;gap:4px}.actions .btn:not(.icon-btn){padding:0 8px}.btn{min-height:33px;font-size:11px}.icon-btn{width:34px}.undo-rewind-toggle{width:30px}.undo-rewind{left:0;width:min(260px,calc(100vw - 16px))}.stats{order:2;justify-self:center;gap:8px;padding:4px 8px;background:rgba(4,18,14,.2)}.stat{min-width:48px}.stat span{font-size:7px}.stat strong{font-size:12px}.board{padding-top:clamp(100px,13vh,114px);padding-left:6px;padding-right:6px}.tableau{margin-top:clamp(12px,2.5vh,22px)}.settings{right:8px;left:8px;width:auto}.panel{padding:26px 20px}
}
@media(max-width:380px){
 :root{--lane-gap:3px}.actions{gap:3px}.actions .btn:not(.icon-btn){padding:0 6px}.btn{font-size:10px}.stats{gap:5px}.stat{min-width:43px}.board{padding-left:4px;padding-right:4px}
}
@media(max-height:560px){
 :root{--toolbar-menu-top:48px}
 .topbar{grid-template-columns:1fr auto;padding-top:7px;padding-bottom:8px;gap:10px}.stats{order:0;justify-self:start;padding:4px 7px}.actions{justify-self:end}.stat span{font-size:6px}.stat strong{font-size:11px}.btn{min-height:30px}.board{padding-top:58px;padding-bottom:clamp(24px,4vh,32px)}.tableau{margin-top:9px}.overlay{padding:8px}.panel{max-height:calc(100dvh - 16px);padding:12px 18px}.panel .mini-crest{width:40px;height:40px;margin-bottom:6px;font-size:20px}.badge{margin-bottom:5px;padding:3px 7px}.splash-title{font-size:30px;margin-bottom:6px}.panel h2{font-size:23px;margin:2px 0 4px}.panel p{font-size:10px;line-height:1.25;margin-bottom:8px}.start-meta{margin:6px 0 8px;gap:10px}.cta{min-height:34px}
}
@media(max-width:760px) and (max-height:560px){
 .topbar{grid-template-columns:1fr auto;justify-items:stretch}.stats{justify-self:start}.actions{justify-self:end}.board{padding-top:58px}
}

@media (prefers-reduced-motion:reduce){.card,.card-surface,.card.drag-proxy{transition:none!important}.card:hover .card-surface,.card.selected .card-surface{transform:none!important}}

/* --- Editorial start screen ------------------------------------------------ */
.start-overlay{
  background:
    radial-gradient(circle at 50% 22%,rgba(215,183,107,.09),transparent 24%),
    radial-gradient(circle at 50% 54%,rgba(36,72,56,.34),transparent 42%),
    rgba(3,7,5,.76);
}
.start-panel{
  position:fixed;
  width:min(610px,94vw);
  padding:clamp(28px,4.2vw,44px) clamp(22px,4.8vw,52px) clamp(26px,4vw,40px);
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% -5%,rgba(244,223,163,.105),transparent 31%),
    linear-gradient(160deg,rgba(27,31,27,.985),rgba(10,14,12,.985) 72%);
  border-color:rgba(215,183,107,.30);
  box-shadow:0 34px 100px rgba(0,0,0,.54),inset 0 1px rgba(255,255,255,.055);
}
.start-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.38;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.start-panel::after{
  content:"";
  position:absolute;
  left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,223,163,.78),transparent);
  box-shadow:0 0 20px rgba(215,183,107,.18);
}
.splash-cards{
  position:relative;
  height:94px;
  width:190px;
  margin:0 auto 7px;
  filter:drop-shadow(0 9px 9px rgba(0,0,0,.16));
}
.splash-card{
  position:absolute;
  left:50%;bottom:3px;
  width:58px;height:81px;
  margin-left:-29px;
  border-radius:7px;
  color:#151715;
  background:linear-gradient(145deg,#fffdf6,#eee8dc);
  border:1px solid rgba(51,43,34,.20);
  box-shadow:0 2px 3px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.92);
  font-family:"Fraunces",serif;
  transform-origin:50% 108%;
  opacity:0;
  animation:splashCardDeal .76s cubic-bezier(.18,.78,.2,1) forwards;
}
.splash-card::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:4px;
  border:1px solid rgba(117,93,60,.08);
  pointer-events:none;
}
.splash-card span{
  position:absolute;
  left:7px;top:5px;
  font-size:17px;
  font-weight:650;
  line-height:1;
}
.splash-card b{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:27px;
  font-weight:500;
}
.splash-card.red{color:#a62b2f}
.splash-card-1{--card-final:translateX(-47px) rotate(-17deg);animation-delay:.02s}
.splash-card-2{--card-final:translateX(-17px) rotate(-6deg);animation-delay:.09s}
.splash-card-3{--card-final:translateX(17px) rotate(6deg);animation-delay:.16s}
.splash-card-4{--card-final:translateX(47px) rotate(17deg);animation-delay:.23s}
@keyframes splashCardDeal{
  0%{opacity:0;transform:translateY(-22px) scale(.9) rotate(0deg)}
  100%{opacity:1;transform:var(--card-final)}
}
.splash-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:18px;
  margin:0 auto 4px;
  color:rgba(244,223,163,.62);
  font-family:"Fraunces",serif;
  font-size:11px;
  letter-spacing:.06em;
  opacity:0;
  animation:splashReveal .55s .26s ease forwards;
}
.splash-rule span:nth-child(2),.splash-rule span:nth-child(4){color:rgba(190,73,76,.72)}
.start-panel .splash-title{
  margin:0;
  font:600 clamp(39px,5.4vw,45px)/.98 "Fraunces",serif;
  letter-spacing:-.025em;
  color:#f4ede2;
  text-shadow:0 2px 16px rgba(0,0,0,.24);
  opacity:0;
  transform:translateY(8px);
  animation:splashReveal .66s .31s cubic-bezier(.22,1,.36,1) forwards;
}
.start-panel .splash-tagline{
  max-width:none;
  margin:12px auto 0;
  color:#ddd4c4;
  font:500 clamp(13px,1.65vw,16px)/1.45 "Manrope",sans-serif;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(7px);
  animation:splashReveal .62s .39s cubic-bezier(.22,1,.36,1) forwards;
}
.start-panel .splash-copy{
  max-width:440px;
  margin:8px auto 0;
  color:#948e84;
  font-size:11px;
  line-height:1.5;
  opacity:0;
  transform:translateY(6px);
  animation:splashReveal .58s .46s cubic-bezier(.22,1,.36,1) forwards;
}
.splash-benefits{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 9px;
  margin:15px auto 0;
  opacity:0;
  transform:translateY(6px);
  animation:splashReveal .56s .52s cubic-bezier(.22,1,.36,1) forwards;
}
.splash-benefits span{
  position:relative;
  color:#aaa297;
  font-size:9px;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.splash-benefits span+span::before{
  content:"·";
  position:relative;
  margin-right:9px;
  color:rgba(215,183,107,.62);
}
.start-panel .start-meta{
  position:relative;
  margin:18px auto 20px;
  padding-top:17px;
  opacity:0;
  transform:translateY(6px);
  animation:splashReveal .56s .58s cubic-bezier(.22,1,.36,1) forwards;
}
.start-panel .start-meta::before{
  content:"";
  position:absolute;
  top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
}
.start-panel .start-actions{
  opacity:0;
  transform:translateY(6px);
  animation:splashReveal .54s .64s cubic-bezier(.22,1,.36,1) forwards;
}
.splash-cta{
  min-width:0;
  width:100%;
  border-color:rgba(215,183,107,.52)!important;
  background:linear-gradient(180deg,rgba(215,183,107,.16),rgba(215,183,107,.055))!important;
  box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07);
}
.splash-cta:hover{
  box-shadow:0 9px 22px rgba(0,0,0,.20),0 0 0 1px rgba(244,223,163,.08),inset 0 1px rgba(255,255,255,.08);
}
@keyframes splashReveal{to{opacity:1;transform:translateY(0)}}

@media(max-width:560px){
  .start-panel{padding:27px 19px 25px;border-radius:21px}
  .start-actions{width:100%;--start-action-gap:8px}
  .start-panel .splash-cta,.start-actions .cta{min-width:0;width:100%;padding-inline:8px;font-size:10px;letter-spacing:.02em;white-space:nowrap}
  .start-panel #resumeBtn{padding-inline:6px;font-size:10px}
  .splash-cards{height:82px;width:165px;margin-bottom:5px}
  .splash-card{width:50px;height:70px;margin-left:-25px;border-radius:6px}
  .splash-card span{left:6px;top:5px;font-size:15px}.splash-card b{font-size:23px}
  .splash-card-1{--card-final:translateX(-40px) rotate(-17deg)}
  .splash-card-2{--card-final:translateX(-14px) rotate(-6deg)}
  .splash-card-3{--card-final:translateX(14px) rotate(6deg)}
  .splash-card-4{--card-final:translateX(40px) rotate(17deg)}
  .start-panel .splash-title{ font-size:clamp(27px,9.2vw,40px); white-space:nowrap; }
  .start-panel .splash-tagline{font-size:13px;margin-top:10px}
  .start-panel .splash-copy{font-size:10px;margin-top:6px}
  .splash-benefits{margin-top:12px;gap:5px 7px}.splash-benefits span{font-size:8px}.splash-benefits span+span::before{margin-right:7px}
  .start-panel .start-meta{margin:15px auto 16px;padding-top:14px}
}

@media(max-height:620px){
  .start-panel{padding-top:14px;padding-bottom:14px}
  .splash-cards{height:54px;width:132px;margin-bottom:1px}
  .splash-card{width:39px;height:55px;margin-left:-19.5px;border-radius:5px}
  .splash-card span{left:5px;top:4px;font-size:11px}.splash-card b{font-size:18px}
  .splash-card-1{--card-final:translateX(-31px) rotate(-17deg)}
  .splash-card-2{--card-final:translateX(-11px) rotate(-6deg)}
  .splash-card-3{--card-final:translateX(11px) rotate(6deg)}
  .splash-card-4{--card-final:translateX(31px) rotate(17deg)}
  .splash-rule{margin-bottom:1px;min-height:12px;font-size:8px}
  .start-panel .splash-title{font-size:29px;margin:0}
  .start-panel .splash-tagline{font-size:10px;line-height:1.2;margin-top:5px}
  .start-panel .splash-copy{font-size:8px;line-height:1.25;margin-top:3px}
  .splash-benefits{margin-top:6px;gap:3px 6px}.splash-benefits span{font-size:6.5px}.splash-benefits span+span::before{margin-right:6px}
  .start-panel .start-meta{margin:7px auto 7px;padding-top:7px}.start-panel .start-meta span{font-size:7px}.start-panel .start-meta span strong{font-size:10px;margin-top:1px}
  .start-panel .cta{min-height:32px}
}

@media(prefers-reduced-motion:reduce){
  .splash-card,.splash-rule,.start-panel .splash-title,.start-panel .splash-tagline,.start-panel .splash-copy,.splash-benefits,.start-panel .start-meta,.start-panel .start-actions{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .splash-card-1{transform:translateX(-47px) rotate(-17deg)!important}
  .splash-card-2{transform:translateX(-17px) rotate(-6deg)!important}
  .splash-card-3{transform:translateX(17px) rotate(6deg)!important}
  .splash-card-4{transform:translateX(47px) rotate(17deg)!important}
}

/* --- Page skins ------------------------------------------------------------
   A skin is page-level presentation. It is independent from the player's
   normal table theme and can be selected with data-skin on <body>.
---------------------------------------------------------------------------- */
/* =========================================================
   FreeCellNow — Deal 11982
   Skin: Deep Blue / Gold Slots
   ---------------------------------------------------------
   Cambios:
   - Topbar oculta
   - Sin borde dorado exterior
   - Sin marca de agua 11982
   - Borde oro fino SOLO en FreeCells y Foundations
   - Mantiene paño azul petróleo oscuro
   - Hereda textura granular premium + viñeta del tablero base

   Uso: <body data-skin="deal-11982">
   ========================================================= */

body[data-skin="deal-11982"] {
  --felt1: #0a2230;
  --felt2: #041018;
  --feltGlow: rgba(112, 196, 221, .10);
  --felt-grain-opacity: .28;
  --felt-vignette-mid: rgba(0, 0, 0, .16);
  --felt-vignette-edge: rgba(0, 0, 0, .29);

  --wood1: #0d1820;
  --wood2: #02070b;

  --gold-slot: rgba(202, 169, 91, .58);
  --gold-slot-soft: rgba(202, 169, 91, .14);
  --gold-slot-highlight: rgba(236, 207, 137, .22);

  --blueprint-dim: rgba(183, 231, 242, .34);
}

/* =========================================================
   Ocultar topbar en este skin
   ========================================================= */

body[data-skin="deal-11982"] .topbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Mantener visibles las opciones/controles del toolbar */
body[data-skin="deal-11982"] .topbar .toolbar,
body[data-skin="deal-11982"] .toolbar {
  display: flex;
  position: relative;
  z-index: 2;
}

/* =========================================================
   Marco exterior neutro — sin oro
   ========================================================= */

body[data-skin="deal-11982"] .board-shell {
  position: relative;
  padding: 0;

  border: none;

  background: transparent;

  box-shadow:
    0 20px 52px rgba(0, 0, 0, .42);
}

/* Eliminar decoraciones heredadas del marco */
body[data-skin="deal-11982"] .board-shell::before,
body[data-skin="deal-11982"] .board-shell::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   Paño azul petróleo
   Hereda el grano premium y la viñeta del tablero base.
   ========================================================= */

body[data-skin="deal-11982"] .board {
  background:
    radial-gradient(ellipse at 50% -10%,rgba(137,211,230,.10),transparent 34%),
    radial-gradient(ellipse at 50% 48%,rgba(38,111,136,.10),transparent 58%),
    linear-gradient(145deg,#0c2a39 0%,#081d29 44%,#031019 100%);
  box-shadow:inset 0 0 190px rgba(0,0,0,.57),inset 0 1px rgba(255,255,255,.035);
}

/* =========================================================
   FreeCells + Foundations
   Borde oro fino y discreto
   ========================================================= */

body[data-skin="deal-11982"] .freecell-slot,
body[data-skin="deal-11982"] .foundation-slot {
  border: 1px solid var(--gold-slot);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(0,0,0,.055)
    );

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.16),
    0 0 0 1px rgba(202,169,91,.025);
}

/* Leve brillo al interactuar */
body[data-skin="deal-11982"] .freecell-slot:hover,
body[data-skin="deal-11982"] .foundation-slot:hover {
  border-color: rgba(225, 192, 113, .72);

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.14),
    0 0 0 1px rgba(225,192,113,.045),
    0 0 14px rgba(202,169,91,.055);
}

/* Si existe una clase genérica .slot, evitar que agregue borde azul */
body[data-skin="deal-11982"] .slot:not(.freecell-slot):not(.foundation-slot) {
  border-color: rgba(180, 204, 211, .13);
}

/* =========================================================
   Panel inicial
   ========================================================= */

body[data-skin="deal-11982"] .start-overlay {
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(68,146,171,.11),
      rgba(2,8,12,.74) 58%,
      rgba(1,5,8,.90)
    );
}

body[data-skin="deal-11982"] .start-panel {
  position: fixed;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(9,32,44,.96),
      rgba(4,17,25,.97)
    );

  border: 1px solid rgba(138, 181, 194, .16);

  box-shadow:
    0 28px 70px rgba(0,0,0,.58),
    inset 0 1px rgba(255,255,255,.035);
}

/* =========================================================
   Botones / controles
   ========================================================= */

body[data-skin="deal-11982"] button,
body[data-skin="deal-11982"] .btn {
  border-color: rgba(147, 187, 198, .18);
}

body[data-skin="deal-11982"] button:hover,
body[data-skin="deal-11982"] .btn:hover {
  border-color: rgba(180, 214, 223, .28);

  box-shadow:
    0 6px 18px rgba(0,0,0,.22);
}

body[data-skin="deal-11982"] select,
body[data-skin="deal-11982"] input {
  border-color: rgba(147, 187, 198, .15);
  background-color: rgba(4,16,24,.86);
}

/* =========================================================
   Labels / textos secundarios
   ========================================================= */

body[data-skin="deal-11982"] .label,
body[data-skin="deal-11982"] .section-label,
body[data-skin="deal-11982"] .eyebrow {
  color: var(--blueprint-dim);
  letter-spacing: .08em;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 700px) {
  body[data-skin="deal-11982"] .board-shell {
    padding: 0;
  }

  body[data-skin="deal-11982"] .freecell-slot,
  body[data-skin="deal-11982"] .foundation-slot {
    border-width: 1px;
  }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  body[data-skin="deal-11982"] *,
  body[data-skin="deal-11982"] *::before,
  body[data-skin="deal-11982"] *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* --- Deal navigation + site footer ---------------------------------------- */
body[data-deal] .board > .deal-home-link{
  position:absolute;
  left:clamp(12px,2.15vw,31px);
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:12;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border-radius:8px;
  color:rgba(240,236,226,.64);
  background:rgba(4,18,14,.20);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
  font-size:11px;
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease,transform .15s ease;
}
body[data-deal] .board > .deal-home-link:hover{
  color:var(--gold2);
  border-color:rgba(215,183,107,.30);
  background:rgba(4,18,14,.34);
  transform:translateY(-1px);
}
body[data-deal] .board > .deal-home-link:focus-visible{
  outline:2px solid rgba(244,223,163,.72);
  outline-offset:2px;
}

.site-footer{
  --footer-bg:#f5f1e8;
  --footer-ink:#173129;
  --footer-muted:#637169;
  --footer-faint:#7c877f;
  --footer-accent:#9b7837;
  --footer-line:rgba(23,49,41,.12);

  position:relative;
  z-index:2;
  width:100%;
  padding:48px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  color:var(--footer-ink);
  background:var(--footer-bg);
  border-top:1px solid var(--footer-line);
  box-shadow:inset 0 1px rgba(255,255,255,.58);
}
.site-footer__inner{
  width:min(var(--site-shell-max),100%);
  margin:0 auto;
}
.site-footer__main{
  display:grid;
  grid-template-columns:minmax(260px,1.25fr) minmax(420px,1fr);
  gap:clamp(48px,8vw,112px);
  align-items:start;
  padding-bottom:38px;
}
.site-footer__brand-block{max-width:430px}
.site-footer__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--footer-ink);
  text-decoration:none;
}
.site-footer__brand-mark{
  width:29px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid rgba(23,49,41,.14);
  border-radius:5px;
  color:#173d31;
  background:linear-gradient(145deg,#fffdf8,#eee8dc);
  box-shadow:0 4px 12px rgba(41,54,46,.08),inset 0 1px rgba(255,255,255,.95);
  font:700 17px/1 "Fraunces",serif;
}
.site-footer__brand strong{
  font:600 20px/1 "Fraunces",serif;
  letter-spacing:-.02em;
}
.site-footer__description{
  max-width:410px;
  margin:17px 0 0;
  color:var(--footer-muted);
  font-size:12px;
  line-height:1.72;
}
.site-footer__nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(110px,1fr));
  gap:30px;
}
.site-footer__group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
}
.site-footer__label{
  margin-bottom:2px;
  color:var(--footer-accent);
  font-size:9px;
  font-weight:750;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.site-footer__group a{
  color:var(--footer-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
  transition:color .15s ease,transform .15s ease;
}
.site-footer__group a:hover{
  color:#173d31;
  transform:translateX(1px);
}
.site-footer__brand:focus-visible,
.site-footer__group a:focus-visible{
  outline:2px solid rgba(23,61,49,.42);
  outline-offset:4px;
  border-radius:4px;
}
.site-footer__bottom{
  min-height:42px;
  padding-top:22px;
  border-top:1px solid var(--footer-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:var(--footer-faint);
  font-size:10px;
  line-height:1.5;
}
.site-footer__note{text-align:right}

@media(max-width:560px){
  body[data-deal] .board > .deal-home-link{
    left:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    min-height:28px;
    padding:4px 7px;
    font-size:10px;
  }
  .site-footer{padding:36px 20px max(22px,env(safe-area-inset-bottom))}
  .site-footer__main{grid-template-columns:1fr;gap:32px;padding-bottom:30px}
  .site-footer__brand-block{max-width:none}
  .site-footer__description{max-width:480px}
  .site-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .site-footer__bottom{align-items:flex-start;flex-direction:column;gap:6px;padding-top:18px}
  .site-footer__note{text-align:left}
}


@media(max-width:420px){
  .site-footer__nav{grid-template-columns:1fr 1fr;row-gap:28px}
  .site-footer__group:last-child{grid-column:1 / -1}
}

/* --- Footer IA expansion: Play / Learn / FreeCell Now / Follow ------------ */
.site-footer__main{
  grid-template-columns:minmax(250px,1fr) minmax(560px,1.45fr);
  gap:clamp(42px,7vw,92px);
}
.site-footer__nav{
  grid-template-columns:repeat(4,minmax(100px,1fr));
  gap:24px;
}

@media(max-width:820px){
  .site-footer__main{grid-template-columns:1fr;gap:34px}
  .site-footer__nav{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:620px){
  .site-footer__nav{grid-template-columns:1fr 1fr;row-gap:26px}
}

@media(max-width:420px){
  .site-footer__group:last-child{grid-column:auto}
}

.puzzle-heading-prefix,
.puzzle-heading-name {
  display: block;
}

.puzzle-heading-name {
  font-size: 0.8em;
  margin-top:0.3em;
}
/* --- Game modes: Daily Challenge + classic numbered deals ---------------- */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.stat.deal-stat{min-width:82px}

.splash-mode-actions{
  grid-column:1/-1;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin-top:4px;
}
.mode-link,.mode-back-link{
  border:0;
  padding:5px 2px;
  color:#aaa297;
  background:transparent;
  font:650 9px "Manrope",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:color .15s ease;
}
.mode-link:hover,.mode-back-link:hover{color:#f0e8da}
.mode-divider{width:1px;height:14px;background:rgba(255,255,255,.12)}

.new-game-menu{
  position:absolute;
  z-index:75;
  top:var(--toolbar-menu-top);
  right:72px;
  width:310px;
  padding:18px;
  border-radius:18px;
  background:rgba(16,19,17,.96);
  border:1px solid rgba(215,183,107,.26);
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  backdrop-filter:blur(14px);
}
/* Match the Settings panel hierarchy: same title face, size and spacing. */
.new-game-menu__title{
  margin:0 0 15px;
  padding:0;
  color:#f1eadf;
  font:600 20px "Fraunces",serif;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
}
.new-game-menu__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.06);
  border-radius:0;
  color:#ddd5c9;
  background:transparent;
  text-align:left;
  text-decoration:none;
  font-size:12px;
  line-height:1.35;
  cursor:pointer;
}

.new-game-menu__item:hover,.new-game-menu__item:focus-visible{background:rgba(255,255,255,.045);outline:none}
.new-game-menu__item>span:last-child{min-width:0}
.new-game-menu__item small{display:block;margin-top:3px;color:rgba(221,213,201,.58);font-size:10px;line-height:1.4}
.new-game-menu__icon{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.045);color:var(--gold2);font-size:14px}
.new-game-menu__rule{height:1px;margin:6px 0;background:rgba(255,255,255,.07)}

.deal-picker-panel{width:min(445px,94vw);padding:29px}
.mode-eyebrow{margin-bottom:10px;color:#a69e91;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.deal-picker-panel h2{margin:0 0 8px}
.deal-picker-panel>p{font-size:12px;color:#9e978c;margin:0 auto 18px;line-height:1.5}
.deal-entry{display:flex;gap:8px;max-width:330px;margin:8px auto 10px}
.deal-input{min-width:0;flex:1;height:46px;border-radius:10px;border:1px solid rgba(255,255,255,.13);background:#101310;color:#f4ede2;padding:0 14px;outline:none;font-size:16px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.deal-input::-webkit-outer-spin-button,.deal-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.deal-input:focus{border-color:rgba(215,183,107,.58);box-shadow:0 0 0 3px rgba(215,183,107,.09)}
.deal-go{min-width:95px}
.deal-picker-panel .mode-microcopy{margin:8px auto 0;color:#706b64;font-size:10px}
.deal-picker-panel .deal-error{margin:4px auto 0;color:#d98b8d;font-size:10px}
.deal-picker-panel .mode-back-link{display:inline-block;margin-top:14px}

.daily-start-panel{width:min(520px,94vw);padding:31px}
.daily-badge{display:inline-flex;align-items:center;gap:6px;margin-bottom:13px;padding:6px 9px;border:1px solid rgba(215,183,107,.25);border-radius:999px;color:#c7bdac;background:rgba(215,183,107,.04);font-size:9px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.daily-start-panel .daily-title{margin:0 0 8px;color:#f1eadf;font:600 34px "Fraunces",serif;letter-spacing:.01em}
.daily-start-panel .daily-date{margin:0 auto 17px;color:#cfc7bb;font-size:13px}
.daily-deal-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:8px 11px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.19);color:#afa89d;font-size:11px}
.daily-deal-chip strong{color:var(--gold2);font-size:13px;font-variant-numeric:tabular-nums}
.daily-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:3px 0 21px}
.daily-stat{padding:11px 8px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.025)}
.daily-stat span{display:block;margin-bottom:4px;color:#777269;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.daily-stat strong{color:#ded6c9;font-size:13px;font-variant-numeric:tabular-nums}
.daily-start-panel .start-actions{margin-top:0}
.daily-start-panel .daily-note{margin:12px auto 4px;color:#7d776e;font-size:10px}
.daily-home-link{display:inline-block;margin-top:8px}

@media(max-width:760px){
  .stat.deal-stat{min-width:66px}
  .new-game-menu{right:47px}
}
@media(max-width:560px){
  .splash-mode-actions{gap:10px;margin-top:3px}
  .mode-link{font-size:8px}
  .daily-start-panel{padding:25px 18px}
  .daily-start-panel .daily-title{font-size:30px}
  .daily-stats{gap:5px}
}
@media(max-width:380px){
  .stat.deal-stat{min-width:60px}
  .new-game-menu{right:42px;width:min(310px,calc(100vw - 16px));padding:16px}
  .splash-mode-actions{gap:7px}.mode-link{font-size:7.5px}.mode-divider{height:12px}
}
@media(max-height:620px){
  .splash-mode-actions{margin-top:0}.mode-link{padding:2px;font-size:7px}
  .daily-start-panel{padding-top:14px;padding-bottom:14px}
  .daily-badge{margin-bottom:6px;padding:4px 7px;font-size:7px}
  .daily-start-panel .daily-title{font-size:25px;margin-bottom:4px}
  .daily-start-panel .daily-date{font-size:10px;margin-bottom:8px}
  .daily-deal-chip{padding:5px 8px;margin-bottom:8px;font-size:9px}
  .daily-deal-chip strong{font-size:10px}
  .daily-stats{margin-bottom:8px}.daily-stat{padding:6px}.daily-stat span{font-size:6px}.daily-stat strong{font-size:10px}
  .daily-start-panel .daily-note{font-size:8px;margin-top:6px}.daily-home-link{font-size:7px;margin-top:3px}
}

/* ==========================================================================
   CURSORES — MESA DE JUEGO
   --------------------------------------------------------------------------
   Regla UX:
   - Flecha dorada = superficies NO accionables.
   - Mano = cualquier elemento accionable/clickable.
   - Las cartas jugables siempre muestran la mano, también en hover y drag.
   - Las cartas en Foundation no son accionables y conservan la flecha.

   Ruta solicitada:
     ../assets/img/cursors/mesa/
   ========================================================================== */

:root{
  --cursor-default:
    url("../img/cursors/mesa/default.png") 11 5,
    default;

  --cursor-pointer:
    url("../img/cursors/mesa/pointer.png") 26 5,
    pointer;
}

/* --------------------------------------------------------------------------
   1. BASE — todo comienza como NO accionable
   -------------------------------------------------------------------------- */
html,
body,
body *{
  cursor:var(--cursor-default)!important;
}

/* --------------------------------------------------------------------------
   2. CONTROLES ACCIONABLES — siempre mano
   -------------------------------------------------------------------------- */
a[href],
button:not(:disabled),
.btn:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[onclick]:not([aria-disabled="true"]),
summary,
select:not(:disabled),
textarea:not(:disabled),
input:not(:disabled),
label[for],
.switch:not(.disabled):not(.is-disabled),
.mode-link,
.mode-back-link,
.new-game-menu__item:not([aria-disabled="true"]),
[data-action]:not([aria-disabled="true"]){
  cursor:var(--cursor-pointer)!important;
}

/* Los descendientes de un control deben conservar la mano. Esto evita que el
   selector global `body *` vuelva a colocar la flecha sobre iconos/spans. */
a[href] *,
button:not(:disabled) *,
.btn:not(:disabled) *,
[role="button"]:not([aria-disabled="true"]) *,
[onclick]:not([aria-disabled="true"]) *,
summary *,
label[for] *,
.switch:not(.disabled):not(.is-disabled) *,
.mode-link *,
.mode-back-link *,
.new-game-menu__item:not([aria-disabled="true"]) *,
[data-action]:not([aria-disabled="true"]) *{
  cursor:var(--cursor-pointer)!important;
}

/* --------------------------------------------------------------------------
   3. CARTAS — mano únicamente cuando la carta puede jugarse
   -------------------------------------------------------------------------- */
.card:not([data-source-type="foundation"]),
.card:not([data-source-type="foundation"]) *,
.card:not([data-source-type="foundation"]):hover,
.card:not([data-source-type="foundation"]):hover *,
.card:not([data-source-type="foundation"]):focus,
.card:not([data-source-type="foundation"]):focus *,
.card:not([data-source-type="foundation"]):focus-visible,
.card:not([data-source-type="foundation"]):focus-visible *,
.card:not([data-source-type="foundation"]).selected,
.card:not([data-source-type="foundation"]).selected *{
  cursor:var(--cursor-pointer)!important;
}

/* Las cartas de Foundation son informativas/no movibles en esta implementación. */
.card[data-source-type="foundation"],
.card[data-source-type="foundation"] *{
  cursor:var(--cursor-default)!important;
}

/* Si hay una carta seleccionada, los destinos del tablero pasan a ser
   accionables mediante click y por eso muestran la mano. */
.board:has(.card.selected) [data-dest-type],
.board:has(.card.selected) [data-dest-type] *{
  cursor:var(--cursor-pointer)!important;
}

/* Fallback semántico que el renderer ya aplica a destinos válidos. */
.valid-target,
.valid-target *,
.drag-hover-target,
.drag-hover-target *{
  cursor:var(--cursor-pointer)!important;
}

/* --------------------------------------------------------------------------
   4. DRAG & DROP — mantener SIEMPRE la mano custom
   -------------------------------------------------------------------------- */
.card.dragging,
.card.dragging *,
.card.drag-source,
.card.drag-source *,
.card.drag-proxy,
.card.drag-proxy *,
.board.drag-active,
.board.drag-active *,
.board.drag-active .card,
.board.drag-active .card *{
  cursor:var(--cursor-pointer)!important;
}

/* Pointer Capture puede mantener el puntero fuera del board durante el drag.
   Mientras exista .drag-active, forzamos la mano en toda la app para evitar
   que el navegador vuelva temporalmente a la flecha nativa/custom. */
html:has(.board.drag-active),
html:has(.board.drag-active) body,
html:has(.board.drag-active) body *{
  cursor:var(--cursor-pointer)!important;
}

/* --------------------------------------------------------------------------
   5. NO ACCIONABLE / DESHABILITADO — vuelve a la flecha
   -------------------------------------------------------------------------- */
button:disabled,
button:disabled *,
input:disabled,
select:disabled,
textarea:disabled,
[disabled],
[disabled] *,
[aria-disabled="true"],
[aria-disabled="true"] *,
.disabled,
.disabled *,
.is-disabled,
.is-disabled *{
  cursor:var(--cursor-default)!important;
}