/* FreeCell: the table and the cards. Chrome, buttons and dialogs come from classics.css.
   Card sizes are set by game.js as custom properties (--cw, --ch, --cr, --idx) from the room
   the board has, so the same markup works from a 320 px phone to a desktop. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.fc-main{max-width:1040px;padding-top:14px;padding-bottom:20px;min-height:calc(100vh - var(--head));min-height:calc(100dvh - var(--head))}
.fc{position:relative}

/* The bar: which deal, how far along, and the three tools. */
.fc-bar{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;min-height:40px;margin-bottom:12px}
.fc-deal{font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.fc-deal span{font-weight:500;color:var(--muted)}
.fc-count{display:flex;gap:8px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-dot{color:var(--rule)}
.fc-tools{display:flex;gap:4px;margin-left:auto}
.fc-tool{min-height:38px;padding:7px 12px 7px 10px;font-size:14px}
.fc-tool[aria-busy=true] svg{opacity:.35}
/* The shared mobile .btn padding would squeeze icon buttons to a 10 px glyph. */
.cl-actions .icon-btn{padding:0;flex-shrink:0}

/* The table. Everything inside is absolutely placed by game.js. */
.fc-board{position:relative;margin:0 auto;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;--lift:3px}
.fc-board:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--red);border-radius:8px}
.slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:var(--cr);background:#1d1b180d;box-shadow:inset 0 0 0 1px #1d1b1817}
.slot.found svg{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);fill:#1d1b181f}
.slot.found.red svg{fill:#c23f1c26}
.slot.col{background:transparent;box-shadow:inset 0 0 0 1px #1d1b1814}
.slot.can{box-shadow:inset 0 0 0 2px #e2502b99;background:#e2502b0f}
.slot.hint{box-shadow:inset 0 0 0 2px var(--red);background:#e2502b14}
.key{position:absolute;left:0;top:0;z-index:15;font:600 11px/1 var(--mono);color:var(--muted);opacity:0;transition:opacity .2s;pointer-events:none}
.fc-board.keys .key{opacity:1}

/* Cards. The face is plain text and vector pips, so it stays sharp at every size and DPR. */
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:var(--cr);touch-action:none;cursor:grab;transition:transform .17s cubic-bezier(.2,.75,.25,1);-webkit-tap-highlight-color:transparent}
.card.instant,.card.drag{transition:none}
.card.drag{cursor:grabbing}
.card .inner{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;transition:transform .26s cubic-bezier(.3,.7,.3,1)}
.card.down .inner{transform:rotateY(180deg)}
.card .face,.card .back{position:absolute;inset:0;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.card .face{background:#fffdf8;box-shadow:inset 0 0 0 1px #1d1b182e,0 1px 2px #1d1b1814;transition:box-shadow .12s,transform .12s}
.card.drag .face{box-shadow:inset 0 0 0 1px #1d1b182e,0 12px 28px #1d1b182e,0 2px 6px #1d1b181f}
.card.sel .face{transform:translateY(calc(-1 * var(--lift)));box-shadow:inset 0 0 0 2px var(--red),0 4px 10px #1d1b1824}
.card.can .face{box-shadow:inset 0 0 0 2px #e2502b99,0 1px 2px #1d1b1814}
.card.hint .face{box-shadow:inset 0 0 0 2px var(--red),0 1px 2px #1d1b1814;animation:fc-nudge .5s ease-in-out 2}
.card.hop .inner{animation:fc-hop .42s cubic-bezier(.3,.7,.3,1) both}
@keyframes fc-nudge{50%{transform:translateY(calc(-1 * var(--lift)))}}
@keyframes fc-hop{40%{transform:translateY(-14%)}}
.red{color:var(--red-ink)}.black{color:var(--ink)}
.card svg{fill:currentColor}

/* Corner index: rank top left, suit top right, both inside the strip a covered card shows. */
.rk{position:absolute;left:var(--ix);top:var(--iy);font-size:var(--idx);font-weight:800;font-stretch:78%;line-height:1;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.st{position:absolute;right:var(--ix);top:calc(var(--iy) + var(--idx) * .06);width:calc(var(--idx) * .8);height:calc(var(--idx) * .8)}

/* Bodies: a big single pip on small cards, the full pip layout on large ones. */
.big{position:absolute;left:50%;top:calc(var(--vis) + (var(--ch) - var(--vis)) * .48);width:calc(var(--cw) * .5);height:calc(var(--cw) * .5);transform:translate(-50%,-50%)}
/* Pips and court frames start below --vis, the strip a covered card shows, so nothing leaks into it. */
.pips{position:absolute;left:25%;right:25%;top:calc(var(--vis) + var(--pip) * .5 + 2px);bottom:calc(var(--pip) * .62);display:none}
.pips svg{position:absolute;width:var(--pip);height:var(--pip);transform:translate(-50%,-50%)}
.pips svg.flip{transform:translate(-50%,-50%) rotate(180deg)}
.ace .big{width:calc(var(--cw) * .56);height:calc(var(--cw) * .56)}
.ace .mark{position:absolute;left:50%;bottom:9%;width:22%;transform:translateX(-50%);display:none}
.ace .mark{--q-body:var(--ink);--q-eye:#fffdf8}
.full .card:not(.ace):not(.court) .big{display:none}
.full .pips{display:block}
.full .ace .mark{display:block}
.full .ace .big{top:calc(var(--vis) + (var(--ch) - var(--vis)) * .4)}

/* Court cards: a framed panel with a crown and the letter, our own design. */
.court .frame{position:absolute;left:12%;right:12%;top:calc(var(--vis) + 2px);bottom:7%;border-radius:calc(var(--cr) * .7);background:#1d1b180a;box-shadow:inset 0 0 0 1px #1d1b1824;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%}
.court.red .frame{background:#c23f1c0d;box-shadow:inset 0 0 0 1px #c23f1c33}
.court .crown{width:56%;height:auto;aspect-ratio:100/64}
.court .crown{--cut:#fffdf8}
.court.red .crown{--cut:#fbf0ea}
.court .letter{font-size:calc(var(--cw) * .44);font-weight:800;font-stretch:80%;line-height:.82;letter-spacing:-.04em}
.court .fpip{width:20%;height:auto;aspect-ratio:1}
.mini .court .frame{left:10%;right:10%;bottom:8%;gap:0}
.mini .court .crown{width:62%}
.mini .court .fpip{display:none}
.mini .court .letter{font-size:calc(var(--cw) * .4)}
.court .big{display:none}

/* The back: ink, a paper rule, and the quail. Seen while a deal is dealt. */
.card .back{transform:rotateY(180deg);background:var(--ink);box-shadow:inset 0 0 0 1px #000,0 1px 2px #1d1b1820;overflow:hidden}
.card .back:before{content:'';position:absolute;inset:max(3px,7%);border-radius:calc(var(--cr) * .6);box-shadow:inset 0 0 0 1px #f4f1ea4d}
.card .back svg{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%)}
.card .back svg{--q-body:var(--paper);--q-crest:var(--red);--q-eye:var(--ink)}

/* New game dialog. */
.dlg-sub{margin-top:20px;font-size:15px;font-weight:700}
.cl-dialog h2:focus{outline:none}
@media(pointer:coarse){.keys-only{display:none}}
.dlg-note{font-size:14px}
.cl-dialog kbd{font:600 12px/1 var(--mono);padding:2px 5px;border-radius:4px;background:var(--sand);color:var(--ink)}
.fc-choices{display:grid;gap:8px;margin-top:16px}
.fc-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:12px 14px;border:1.5px solid var(--rule);border-radius:12px;background:transparent;text-align:left;transition:border-color .15s,background .15s}
.fc-choice:hover{border-color:var(--ink);background:#fffdf8}
.fc-choice strong{font-size:16px}
.fc-choice span{font-size:14px;color:var(--muted)}
.fc-number{margin-top:16px}
.fc-number label,.fc-cells>span{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.fc-number-row{display:flex;gap:8px}
.fc-number input{flex:1;min-width:0;min-height:40px;padding:8px 14px;border:1.5px solid var(--rule);border-radius:999px;background:#fffdf8;font:inherit;font-variant-numeric:tabular-nums;color:var(--ink)}
.fc-number input:focus{outline:none;border-color:var(--ink)}
.fc-error{margin-top:6px;font-size:13px;color:var(--red-ink)}
.fc-cells{margin-top:16px}
.fc-busy{opacity:.55;pointer-events:none}

@media(max-width:400px){
  .cl-head{gap:10px}
  .cl-head .cl-sep{display:none}
  .cl-actions{gap:2px}
  .cl-actions .icon-btn{width:36px}
}
@media(max-width:360px){#new-btn .long{display:none}#new-btn{padding:7px 14px}}
@media(max-width:640px){
  .fc-main{padding:10px 6px 0}
  .fc-bar{gap:4px 14px;margin:0 6px 10px;min-height:0}
  .fc-deal,.fc-count{font-size:14px}
  .fc-count{margin-left:auto}
  /* Tools sit at the bottom, under the thumb. */
  .fc-tools{position:fixed;left:0;right:0;bottom:0;z-index:15;justify-content:space-around;gap:0;margin:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--rule)}
  .fc-tool{flex-direction:column;gap:3px;min-height:48px;min-width:72px;padding:4px 10px;font-size:12px;border-radius:12px}
  .fc-tool svg{width:21px;height:21px}
  .cl-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .cl-toast{bottom:calc(78px + env(safe-area-inset-bottom))}
}
/* Short landscape phones: the header gives back some height. */
@media(max-height:500px) and (orientation:landscape){
  :root{--head:46px}
  .fc-main{padding-top:8px}
  .fc-bar{margin-bottom:6px}
  .fc-tools{position:static;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .fc-tool{flex-direction:row;min-height:34px;min-width:0;font-size:13px}
  .fc-tool svg{width:18px;height:18px}
  .cl-foot{padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce){.card,.card .inner,.card .face{transition:none!important;animation:none!important}}