/* Safari applies its own native styling to <button> elements, which
   overrides border-radius and custom backgrounds. Resetting appearance
   fixes this on desktop and iOS Safari, and is a no-op elsewhere. */
button{
  -webkit-appearance:none;
  appearance:none;
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --felt-1:#2c5c85;
  --felt-2:#132845;
  --felt-3:#1f4569;
  --ink:#241d12;
  --ink-soft:#a8c9b8;
  --brass:#c9a05e;
  --brass-bright:#e6c383;
  --brass-line:rgba(201,160,94,.45);
  --burgundy:#8a3542;
  --charcoal:#2b2620;
  --card-face:#faf5e8;
  --cream:#f3ead6;
  --panel-bg:#0f2038;
  --accent: var(--brass);
  --accent-ink: var(--ink);
}

*{box-sizing:border-box;}

body{
  margin:0; min-height:100vh;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 2px, transparent 2px, transparent 5px),
    repeating-linear-gradient(-55deg, rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 2px, transparent 2px, transparent 5px),
    radial-gradient(ellipse at 50% 0%, var(--felt-1) 0%, var(--felt-3) 55%, var(--felt-2) 100%);
  font-family:'Inter',sans-serif;
  color:var(--cream);
  padding:0;
  display:flex; flex-direction:column; align-items:center;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

.k-frame{ width:100%; max-width:1200px; display:flex; flex-direction:column; }

header{
  width:100%;
  align-self:stretch;
  background:linear-gradient(155deg,var(--panel-bg),#081422);
  border-bottom:3px solid var(--brass);
  box-sizing:border-box;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto;
  padding:14px 20px;
  flex-wrap:wrap; gap:10px;
}
.k-action-row{
  display:flex; gap:10px; justify-content:center;
  padding:10px 20px;
  background:rgba(0,0,0,.12);
  border-bottom:1px solid var(--brass-line);
}
.k-action-row .k-btn{ padding:8px 18px; font-size:12px; }
.k-brand{ display:flex; flex-direction:column; }
.k-eyebrow{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-bright); font-weight:600;
}
.k-title{ font-family:'Fraunces',serif; font-size:22px; font-weight:500; color:var(--cream); }

.k-hud{ display:flex; align-items:center; gap:16px; }
.k-stat{ text-align:right; }
.k-stat label{
  display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(243,234,214,.5); margin-bottom:1px;
}
.k-stat .val{ font-family:'Fraunces',serif; font-size:16px; color:var(--cream); }

.k-icon-btn{
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--brass-line);
  color:var(--brass-bright); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.k-icon-btn:disabled{ opacity:.35; cursor:default; }
.k-icon-btn-labeled{
  width:auto; padding:0 12px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
}
.k-icon-btn-labeled .k-ico{ font-size:14px; margin-right:5px; }

.k-board{
  flex:1; position:relative;
  padding:20px 18px 30px;
  display:flex; flex-direction:column; gap:22px;
}

.k-top-row{ display:flex; justify-content:space-between; align-items:flex-start; }
.k-stock-waste{ display:flex; gap:12px; }
.k-foundations{ display:flex; gap:10px; }

.k-slot{
  width:64px; height:90px; border-radius:8px;
  border:1.5px dashed var(--brass-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--brass-line); font-size:22px;
  position:relative;
  cursor:pointer;
  user-select:none;
}
.k-slot-icon{ opacity:.7; }
.k-foundation.can-drop{ border-color:var(--brass-bright); background:rgba(230,195,131,.08); }

.k-waste{ position:relative; width:64px; height:90px; }

.k-card{
  width:64px; height:90px; border-radius:7px;
  background:var(--card-face);
  border:1px solid var(--brass);
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  position:absolute; top:0; left:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:5px 6px;
  font-family:'Fraunces',serif;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.k-card.dragging{ cursor:grabbing; z-index:500; box-shadow:0 8px 18px rgba(0,0,0,.45); }
.k-card.selected{ outline:2px solid var(--brass-bright); outline-offset:1px; }
.k-card.red{ color:var(--burgundy); }
.k-card.black{ color:var(--charcoal); }
.k-card .corner{ font-size:13px; line-height:1.05; font-weight:500; }
.k-card .corner.bottom{ align-self:flex-end; transform:rotate(180deg); }
.k-card .pip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:22px; }

.k-card.back{
  background-color:#132845;
  background-image:repeating-linear-gradient(45deg, #2c5c85 0 4px, #132845 4px 8px);
  border:1px solid var(--brass);
  cursor:pointer;
}
.k-card.back::after{
  content:''; position:absolute; top:5px; right:5px; bottom:5px; left:5px;
  border:1px solid var(--brass-bright); border-radius:4px; opacity:.5;
}

.k-tableau{ display:flex; gap:12px; justify-content:space-between; flex:1; }
.k-column{ position:relative; width:64px; min-height:120px; }
.k-column .k-card{ position:absolute; left:0; }
.k-column.can-drop::before{
  content:''; position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px;
  border:2px dashed var(--brass-bright); border-radius:10px;
  pointer-events:none;
}

.k-center-message{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  font-family:'Fraunces',serif; font-size:14px; color:var(--brass-bright);
  text-align:center; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.k-center-message.show{ opacity:1; }

.k-bottom-bar{
  display:flex; gap:12px; justify-content:center; padding:0 20px 22px;
  flex-wrap:wrap;
}
.k-btn{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.02em;
  background:rgba(255,255,255,.06); color:var(--cream);
  border:1px solid var(--brass-line); border-radius:22px;
  padding:11px 22px; cursor:pointer;
}
.k-btn-accent{ background:var(--brass); color:var(--panel-bg); border-color:var(--brass); }

footer{
  text-align:center; font-size:11px; color:rgba(243,234,214,.45);
  padding:14px 20px 26px; font-family:'Inter',sans-serif;
}

.k-panel-overlay{
  display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;
  background:rgba(20,30,22,.7);
  align-items:center; justify-content:center;
  padding:20px;
}
.k-panel-overlay.open{ display:flex; }
.k-panel{
  background:var(--panel-bg); border:1px solid var(--brass-line);
  border-radius:14px; padding:24px; max-width:340px; width:100%;
  color:var(--cream);
}
.k-panel h2{ font-family:'Fraunces',serif; font-weight:500; margin:0 0 16px; }
.k-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid rgba(243,234,214,.1);
  font-size:13px;
}
.k-switch{ position:relative; display:inline-block; width:40px; height:22px; }
.k-switch input{ opacity:0; width:0; height:0; }
.k-slider{
  position:absolute; cursor:pointer; top:0; right:0; bottom:0; left:0;
  background:rgba(255,255,255,.15); border-radius:22px; transition:.2s;
}
.k-slider::before{
  content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
  background:var(--cream); border-radius:50%; transition:.2s;
}
.k-switch input:checked + .k-slider{ background:var(--brass); }
.k-switch input:checked + .k-slider::before{ transform:translateX(18px); }

.k-rules-list{ margin:0; padding-left:18px; font-size:13px; line-height:1.7; color:var(--ink-soft); }
.k-rules-list li{ margin-bottom:4px; }

.k-cascade-card{
  position:fixed; top:-100px; width:50px; height:70px;
  border-radius:6px; background:var(--card-face); border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:24px;
  z-index:2000; pointer-events:none;
  animation-name: kCascadeFall;
  animation-timing-function: cubic-bezier(.5,0,.75,0);
  animation-fill-mode: forwards;
}
@keyframes kCascadeFall{
  0% { transform:translateY(0) rotate(0deg); }
  60% { transform:translateY(calc(100vh - 160px)) rotate(180deg); }
  75% { transform:translateY(calc(100vh - 100px)) rotate(220deg); }
  90% { transform:translateY(calc(100vh - 160px)) rotate(260deg); }
  100% { transform:translateY(100vh) rotate(340deg); }
}

.k-hint-glow{
  animation: kHintPulse 1s ease-in-out 2;
  outline:3px solid var(--brass-bright);
  outline-offset:2px;
}
@keyframes kHintPulse{
  0%, 100% { box-shadow:0 0 0 rgba(230,195,131,0); }
  50% { box-shadow:0 0 14px 4px rgba(230,195,131,.7); }
}

.k-win-panel{ text-align:center; }
.k-win-stats{ color:var(--ink-soft); font-size:13px; margin-bottom:18px; }

@media (max-width:640px){
  .k-title{ font-size:18px; }
  .k-hud{ gap:10px; }
  .k-stat .val{ font-size:14px; }
  .k-slot, .k-card, .k-waste{ width:46px; height:66px; }
  .k-card .corner{ font-size:11px; }
  .k-card .pip{ font-size:16px; }
  .k-tableau{ gap:6px; }
  .k-top-row{ gap:8px; }
  .k-stock-waste, .k-foundations{ gap:6px; }
  .k-board{ padding:14px 10px 24px; gap:16px; }
}