/* Snug Table Solitaire: açık sayfa, yeşil çuha masa, büyük okunaklı kartlar (Spades kart çiziminin büyütülmüşü) */
:root { --bg: #f6f1e7; --card: #fffdf8; --text: #1d140c; --muted: #6b5a45; --line: rgba(29, 20, 12, .12); --green: #1f8f42; color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
a { color: #1f5fb3; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 12px 28px; }
.wrap > .site-bar { padding-left: 4px; padding-right: 4px; }

/* Üst çubuk */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 4px 10px; }
.title h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.info { display: flex; gap: 6px; }
.pill { padding: 4px 12px; border-radius: 999px; background: #1d140c; color: #fff8e6; font-size: 13px; font-weight: 600; }
.pill b { font-size: 15px; margin-left: 3px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tool { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(29, 20, 12, .2); background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.tool:hover:not(:disabled) { background: #f1ebdf; }
.tool:disabled { opacity: .45; cursor: default; }
.tool.busy { opacity: .6; cursor: progress; }
.tool-green { background: var(--green); border-color: var(--green); color: #fff; }
.tool-green:hover { background: #23a04b !important; }

/* Masa */
.felt { padding: 4px; border-radius: 18px; background: radial-gradient(ellipse 80% 70% at 50% 35%, #2c8a5a 0%, #1f6a44 55%, #154a30 100%); box-shadow: inset 0 0 70px rgba(0, 0, 0, .35), 0 8px 24px rgba(40, 25, 10, .18); }
.table { position: relative; isolation: isolate; min-height: 420px; touch-action: none; user-select: none; -webkit-user-select: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #e8f5ec; font-weight: 700; }

.slot, .card { position: absolute; left: 0; top: 0; width: var(--cw, 80px); height: calc(var(--cw, 80px) * 1.42); border-radius: calc(var(--cw, 80px) * .1); }
.slot { display: grid; place-items: center; border: 2px dashed rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .35); font: 800 calc(var(--cw, 80px) * .42) Georgia, serif; }
.slot.found.red { color: rgba(255, 190, 180, .45); }
.slot.stock { cursor: pointer; border-style: solid; font-family: system-ui, sans-serif; }
.slot.stock span { display: none; }
.slot.stock.empty span { display: block; }
.slot.stock.done span { opacity: .3; }
.slot.waste { border-color: transparent; }
.slot.col span { font-size: calc(var(--cw, 80px) * .34); opacity: .6; }

.card { display: block; background: linear-gradient(180deg, #ffffff, #f4efe3); border: 1px solid rgba(80, 60, 30, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 5px rgba(0, 0, 0, .28);
  color: #1d140c; cursor: pointer; transition: transform .2s cubic-bezier(.3, .7, .4, 1), box-shadow .15s; will-change: transform;
  font: 800 calc(var(--cw, 80px) * .3) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.card.red { color: #c0392b; }
.card b { position: absolute; left: 7%; top: 3%; line-height: 1; letter-spacing: -.04em; }
.card i { position: absolute; right: 7%; top: 4%; font-style: normal; font-size: .9em; line-height: 1; }
.card em { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-style: normal; font-size: 1.9em; line-height: 1; opacity: .92; }
.card.back { cursor: default; background: linear-gradient(135deg, #7a4a24, #4a2a12); border-color: #2a1308; }
.card.back::before { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(212, 169, 79, .55); border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(212, 169, 79, .14) 0 4px, transparent 4px 8px); }
.card.back b, .card.back i, .card.back em { display: none; }
.card[data-pile="s"] { cursor: pointer; }
.card.drag { transition: none; box-shadow: 0 14px 28px rgba(0, 0, 0, .4); cursor: grabbing; }
.card.hint, .slot.hint { box-shadow: 0 0 0 3px #f1c75b, 0 0 18px 4px rgba(241, 199, 91, .75); animation: pulse 1s ease-in-out 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #f1c75b, 0 0 26px 8px rgba(241, 199, 91, .9); } }
.card.nope { animation: nope .3s; }
@keyframes nope { 25% { margin-left: -5px; } 75% { margin-left: 5px; } }
/* Dağıtım: kartlar desteden yayılır */
.table.dealing .card { transition-duration: .45s; }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 4px 0; padding: 12px 14px; border-radius: 14px; background: #fff3cf; border: 1px solid rgba(138, 98, 36, .3); color: #4a3310; font-weight: 600; }
.banner span { flex: 1 1 260px; }
.banner.soft { display: block; font-weight: 500; }
.keys { margin: 12px 4px 0; color: var(--muted); font-size: 13px; }
kbd { padding: 0 5px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); background: #fff; font: 600 12px ui-monospace, Consolas, monospace; }

/* Pencereler */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 12, 6, .55); }
.modal-card { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px; border-radius: 18px; background: var(--card); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.modal-card h2 { margin: 0 0 10px; font-size: 22px; }
fieldset { margin: 0 0 12px; padding: 0; border: 0; }
legend { margin-bottom: 4px; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: #8a6224; }
fieldset label { display: block; margin: 4px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-weight: 700; }
fieldset label:has(input:checked) { border-color: var(--green); background: #e3f6e8; }
fieldset small { display: block; margin-left: 24px; font-weight: 500; color: var(--muted); }
.check { display: block; margin: 6px 0; font-weight: 600; }
.deal-no { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.deal-no input { width: 120px; min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid #b9a98c; background: #fff; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(29, 20, 12, .2); background: #fff; font-weight: 700; cursor: pointer; }
.btn:hover { background: #f1ebdf; }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-green:hover { background: #23a04b; }
.win-line { font-size: 18px; margin: 4px 0; }
.win-stats { color: var(--muted); font-weight: 600; margin: 6px 0; }
.hint-text { color: var(--muted); font-size: 14px; }

.about { margin-top: 32px; padding: 22px 4px 0; border-top: 1px solid var(--line); background: none; }
.about-inner { max-width: 720px; }

@media (max-width: 640px) {
  .wrap { padding: 0 6px 24px; }
  .bar { margin: 8px 2px; gap: 6px 10px; }
  .title h1 { font-size: 22px; }
  .tools { margin-left: 0; width: 100%; }
  .tool { flex: 1 1 auto; min-height: 40px; padding: 6px 8px; font-size: 13px; }
  #btnRestart { display: none; }
  #btnLook { flex: 0 0 auto; } #btnLook .tl { display: none; }
  .felt { padding: 2px; border-radius: 12px; }
  .table { min-height: 320px; }
  .card { font-size: calc(var(--cw, 44px) * .36); }
  .card em { font-size: 1.4em; top: 62%; }
  .keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none !important; } .card.hint, .card.nope { animation: none !important; } }
@media (prefers-contrast: more) { .card { border: 2px solid #000; } .card.red { color: #a00; } .slot { border-color: #fff; color: #fff; } }

/* ---------- Görünüm seçenekleri ---------- */
/* Kart arkası */
html[data-back="navy"] .card.back { background: linear-gradient(135deg, #2f5590, #172c52); border-color: #0d1a33; }
html[data-back="navy"] .card.back::before { border-color: rgba(200, 220, 255, .5); background: repeating-linear-gradient(45deg, rgba(200, 220, 255, .14) 0 4px, transparent 4px 8px); }
html[data-back="berry"] .card.back { background: linear-gradient(135deg, #9a3346, #5e1626); border-color: #3a0b16; }
html[data-back="berry"] .card.back::before { border-color: rgba(255, 210, 190, .5); background: repeating-linear-gradient(-45deg, rgba(255, 210, 190, .14) 0 4px, transparent 4px 8px); }
/* Masa */
html[data-felt="blue"] .felt { background: radial-gradient(ellipse 80% 70% at 50% 35%, #2f6f9a 0%, #1f4f74 55%, #14344f 100%); }
html[data-felt="wood"] .felt { background: radial-gradient(ellipse 80% 70% at 50% 35%, rgba(255, 220, 170, .18), transparent 70%), repeating-linear-gradient(92deg, #7a4f2c 0 6px, #714828 6px 13px, #7f5530 13px 21px); }
/* Ekstra büyük kart: köşe yazısı ve orta simge büyür, sayfa genişler */
html.big-cards .wrap { max-width: 1240px; }
html.big-cards .card { font-size: calc(var(--cw, 80px) * .36); }
html.big-cards .card b { letter-spacing: -.06em; }
html.big-cards .card i { font-size: 1em; }
html.big-cards .card em { font-size: 1.6em; top: 62%; }
@media (max-width: 640px) {
  html.big-cards .card { font-size: calc(var(--cw, 44px) * .46); }
  html.big-cards .card i { display: none; }
  html.big-cards .card em { font-size: 1.25em; top: 64%; }
}
/* Seçim kutucukları */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches legend { width: 100%; }
.swatches label { display: flex; align-items: center; gap: 8px; flex: 1 1 110px; margin: 0; }
.swatches input { position: absolute; opacity: 0; }
.swatches label:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.sw { width: 26px; height: 34px; flex: none; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.back-walnut { background: linear-gradient(135deg, #7a4a24, #4a2a12); } .back-navy { background: linear-gradient(135deg, #2f5590, #172c52); } .back-berry { background: linear-gradient(135deg, #9a3346, #5e1626); }
.felt-green { background: #1f6a44; } .felt-blue { background: #1f4f74; } .felt-wood { background: repeating-linear-gradient(92deg, #7a4f2c 0 4px, #6a4424 4px 8px); }
.check small { display: block; margin-left: 24px; font-weight: 500; color: var(--muted); }
/* Şelale tuvali */
.cascade { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 55; cursor: pointer; transition: opacity .4s; }
.cascade.out { opacity: 0; }

/* Koç kutusu (kazanma ve inceleme pencereleri) */
.coach-box { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff3cf; border: 1px solid rgba(138, 98, 36, .3); color: #4a3310; font-size: 15px; line-height: 1.45; }
.coach-box h3 { margin: 6px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #8a6224; }
.coach-box h3:first-child { margin-top: 0; }
.coach-box ul { margin: 0; padding-left: 18px; }
.coach-box li { margin: 4px 0; }
.coach-box p { margin: 4px 0 8px; }
#lostNote { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#lostNote[hidden] { display: none !important; }