/* The same deck as Solitaire, arranged for four free cells and eight columns. */
.freecell-page .game-layout { max-width:1120px; }
.freecell-page .game-surface { padding:20px; }
.freecell-page #play,.freecell-page #message { max-width:none; }
.freecell-page .game-toolbar { display:flex; align-items:center; flex-wrap:wrap; }
#freecell-actions { display:flex; flex-wrap:wrap; gap:8px; }
#freecell-actions button { min-height:36px; padding:7px 12px; font-size:12px; border:1px solid var(--border,#ebccdc); border-radius:100px; background:transparent; color:var(--link-text,#a42a63); box-shadow:none; }
#freecell-actions button:hover:not(:disabled) { background:var(--soft-surface,#fff0f6); }
#freecell-actions button:disabled { opacity:.45; cursor:default; }
.freecell-page #round-info { margin-left:auto; font-size:12px; }
.fc-timer { display:block; margin:0 0 8px; color:var(--muted); text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.fc-board { --gap:10px; --card-height:140px; --up-step:30px; padding:20px; border:1px solid #c8dfd3; border-radius:16px; background:#e1eee7; }
.fc-labels { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-bottom:8px; color:#436551; font-size:12px; font-weight:700; }
.fc-top,.fc-columns { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--gap); align-items:start; }
.fc-top { margin-bottom:26px; }
.fc-pile { position:relative; min-width:0; height:var(--card-height); }
.fc-board button { width:100%; height:var(--card-height); margin:0; padding:0; border-radius:5px; box-sizing:border-box; }
.fc-board button.fc-slot { display:grid; place-items:center; border:1px dashed #8faf9b; background:#d3e4d9; color:#456b54; font:30px Georgia,serif; box-shadow:none; }
.fc-board button.fc-card { position:absolute; top:calc(var(--offset,0) * var(--up-step)); left:0; border:1px solid #d9ded9; background:#fff; color:#171717; cursor:grab; touch-action:none; user-select:none; overflow:hidden; box-shadow:none; }
.fc-board button.fc-card:active,.fc-board button.fc-slot:active { transform:none; translate:none; }
.fc-board button.fc-red { color:#df0000; }
.fc-board button:disabled { opacity:1; cursor:default; }
.fc-mobile-index { display:none; }
.fc-board button.fc-card.fc-selected { outline:2px solid #d92573; outline-offset:-2px; }
.fc-legal .fc-slot,.fc-legal .fc-card:last-child { outline:2px solid #a52b62; outline-offset:1px; }
.fc-board .fc-hint,.fc-hint-destination .fc-slot,.fc-hint-destination .fc-card:last-child { outline:3px solid #a76c0c; outline-offset:1px; }
.fc-board button:focus-visible,#freecell-actions button:focus-visible { outline:3px solid #aa245f; outline-offset:2px; }
.fc-card.fc-dragging { opacity:.3; }
.fc-drag-ghost { position:fixed; z-index:10000; pointer-events:none; transform:rotate(2deg); }
.fc-drag-ghost .fc-card { position:absolute; padding:0; border:1px solid #d9ded9; border-radius:5px; background:white; overflow:hidden; }
.fc-drag-ghost .fc-red { color:#df0000; }
.fc-board.fc-won { border-color:var(--accent); }
[data-theme="dark"] .fc-board { background:#1c3028; border-color:#355446; }
[data-theme="dark"] .fc-labels { color:#c0d7c9; }
[data-theme="dark"] .fc-board button.fc-slot { background:#233d30; border-color:#5d806c; color:#b8d3c2; }
@media(max-width:700px) {
 .freecell-page .game-surface { padding:12px; }
 .freecell-page #round-info { order:3; width:100%; margin:0; }
 .freecell-page #restart { margin-left:auto; }
 .fc-board { --gap:6px; --up-step:27px; padding:12px; }
 .fc-top { margin-bottom:22px; }
}
@media(max-width:500px) {
 .freecell-page .game-layout { padding-inline:8px; }
 .freecell-page .game-surface { padding:8px; }
 .fc-board { --gap:4px; --up-step:25px; padding:7px; border-radius:10px; }
 .fc-labels { font-size:11px; }
 .fc-board button.fc-slot { font-size:20px; }
 .fc-mobile-index { display:flex; position:absolute; top:0; left:0; right:0; height:var(--up-step); align-items:flex-start; justify-content:space-between; padding:4px 2px; background:#fff; font:12px/1 Arial,sans-serif; }
 .fc-mobile-index b { font-weight:700; }
 #freecell-actions { gap:5px; }
 #freecell-actions button { padding-inline:9px; }
}