:root{
  --stylesheet-version: '9.0';
  --felt-1-rgb: 14,68,50;
  --felt-2-rgb: 8,44,33;
  --felt-highlight-rgb: 26,122,84;
  --wood-1-rgb: 122,82,48;
  --wood-2-rgb: 74,47,24;
  --wood-3-rgb: 44,28,14;
  --table-opacity: 0.66;
  --wood-1:#7a5230;
  --wood-2:#4a2f18;
  --wood-3:#2c1c0e;
  --brass:#c9a24b;
  --brass-light:#e8c873;
  --ivory:#faf6ec;
  --navy:#16233f;
  --burgundy:#8c1f3b;
  --panel:#0e2f24;
  --panel-line:#1c5340;

  --card-w: clamp(50px, 8.6vw, 100px);
  --card-h: round(calc(var(--card-w) * 1.4523), 1px);
  --gap: clamp(6px, 1.2vw, 14px);

  --card-radius: calc(var(--card-w) * 0.045);
  --face-scale: 1.0;
  --back-scale: 1.0;

  font-size: 16px;
}
*{box-sizing:border-box;}

html,body{
  margin:0; padding:0; height:100%;
  background-color: #f1dbb2;
  background-image: url(images/bg-img.jpg);
  color: var(--ivory);
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  user-select:none;
  -webkit-user-select:none;
  display:flex; flex-direction:column;
}
html{ overflow:hidden; }
body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }

header{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding: 10px clamp(10px,3vw,28px);
  background: url(images/woodb2.jpg);
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid #909090;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.55);
}
.brand{ display:flex; align-items:flex-end; gap:12px; }
.brand-text{ display:flex; flex-direction:column; gap:0; align-items:flex-start; }
.brand .crest{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background: #c5c5c5;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; color:#353535; font-weight:bold; line-height:1;
  border: 1px solid #909090;
}

.brand h1{
  margin:0; height:32px; line-height:32px; font-size:26px; letter-spacing:1px; font-weight:bold;
  font-variant: small-caps; white-space:nowrap;
  color: #353535;
}
.brand small{ display:block; letter-spacing:3px; font-size:9px; color:#c9b89a; opacity:.8; margin-top:-2px;}

@media (max-width:560px){
  .title-suffix{ display:none; }
}

@media (min-width:561px){
  .mobile-only-setting{ display:none; }
}
#game-number-chip-mobile{ display:none; }
button.newgame-btn{ height:32px; padding:0 16px; font-size:14px; display:flex; align-items:center; }

.home-btn{
  aspect-ratio: 1; height: auto; padding:0; flex-shrink:0;
  border-radius:50%; border:1px solid #909090;
  background: #c5c5c5; color: #353535;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer; text-decoration:none;
  font-size:16px; line-height:1;
  transition: background .15s ease, transform .15s ease;
}
.home-btn:hover{ background:#c5c5c5; transform: translateY(-1px); }
.home-btn:active{ transform: scale(.92); }
.brand-actions{ display:flex; align-items:stretch; gap:8px; }

.hud{ display:flex; align-items:center; gap: clamp(5px,1.4vw,12px); flex-wrap:wrap; justify-content:flex-end; }

.bottombar{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  grid-template-areas: "score actions time";
  gap: clamp(10px,4vw,28px);
  padding: 8px clamp(10px,4vw,28px) calc(8px + env(safe-area-inset-bottom, 0px));
  flex-shrink:0;
}

#chip-score{ grid-area: score; justify-self:start; }
#chip-time{ grid-area: time; justify-self:end; }
#game-number-chip-mobile{ display:none; }
.bottombar-actions{ grid-area: actions; display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap: clamp(8px,3vw,24px); }
@media (max-width:560px){
  .bottombar{
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "actions actions actions"
      "score   gamenum time";
    row-gap: 8px;
  }
  #game-number-chip-mobile{ grid-area: gamenum; justify-self:center; }
}
.bottombtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:0px solid var(--panel-line); border-radius:6px;
  background-image: url(images/woodb2.jpg);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.55);
  color: #353535; font-family:inherit; cursor:pointer;
  padding: 8px 18px; min-width:76px;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.bottombtn:active{ transform: scale(.94); }
.bottombtn .bicon{ font-size:19px; line-height:1; }
.bottombtn .bicon img{ display:block; width:19px; height:19px; }

@media (max-width:560px){
  .bottombtn{ padding:6px 10px; min-width:0; }
}
@media (max-width:420px){
  .bottombtn{ padding:8px; }
  .bottombtn .blabel{ display:none; }
}
.bottombtn .blabel{ font-size:10px; letter-spacing:1px; color:#353535; }
.bottombtn.disabled{ opacity:0.4; pointer-events:none; }

.hint-toast{
  position:fixed; left:50%; bottom: 84px; transform: translateX(-50%) translateY(10px);
  background: rgba(14,47,36,0.95); border:1px solid var(--panel-line); color:var(--ivory);
  padding:9px 18px; border-radius:20px; font-size:13px; letter-spacing:.5px;
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
  z-index:150; max-width:88vw; text-align:center;
}
.hint-toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 0 0 3px rgba(0,255,0,0); }
  50%{ box-shadow: 0 0 0 4px rgba(0,255,0,0.9), 0 0 18px rgba(0,255,0,0.7); }
}
.hint-pulse{ animation: pulseGlow 0.7s ease-in-out 2; }

.chip{
  background-image: url(images/woodb2.jpg);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.55);
  height:32px; padding: 0 16px; border-radius: 6px;
  font-size: 13px; letter-spacing: 1px; color:#353535;
  display:flex; gap:6px; align-items:center;
  min-width: 64px; justify-content:center;
}
.chip b{ color: #353535; font-weight:600; }
.iconbtn{
  width:32px; height:32px; border-radius:50%;
  border:1px solid #909090; background: #c5c5c5; color: #353535;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px;
  transition: transform .15s ease, background .15s ease;
}
.iconbtn:hover{ background:#c5c5c5; transform: translateY(-1px); }
.iconbtn:active{ transform: scale(.92); }
.textbtn{
  border:0px solid #adadad; background-image: url(images/woodb2.jpg); color:#353535;
  padding:7px 14px; border-radius:6px; cursor:pointer; font-family:inherit;
  font-size:13px; letter-spacing:1px; font-weight: bold;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.55);
}

.stage{
  max-width: 1024px; margin: 0 auto;
  display:flex; flex-direction:column;
  flex:1; min-height:0; width:100%;
}
.table-frame{
  border-radius: 22px;
  position:relative;
  flex:1; min-height:0; display:flex;
}
.table-frame::before{
  content:""; position:absolute; inset:6px; border-radius:16px;
  pointer-events:none;
}
.table-felt{
  border-radius: 14px;
  padding: clamp(14px,2.2vw,26px) clamp(10px,2.4vw,22px) 18px;
  flex:1; min-height:0; width:100%;
}

.row{ display:flex; gap: var(--gap); }
.top-row{ justify-content:space-between; margin-bottom: clamp(10px,2vw,20px); }
.foundations{ display:flex; gap: var(--gap); }
.stockwaste{ display:flex; gap: var(--gap); }
.freecells{ display:flex; gap: var(--gap); }
.tableau-row{ display:flex; gap: var(--gap); width: calc(100% - var(--card-w) * 0.5); margin:0 auto; }

.tcol{ flex:1; min-width:0; position:relative; }
.tcol{ min-height: var(--card-h); transition: height .2s ease; }

.pile{
  width: var(--card-w); height: var(--card-h);
  border-radius: var(--card-radius); position:relative; flex-shrink:0;
  transition: width .2s ease, height .2s ease;
}
.pile.slot{
  border: 0px solid rgba(232,200,115,0.3);
  background-image: url(images/woodb2.jpg);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.55);
}
.pile.slot .slot-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: calc(var(--card-w)*0.55); color: rgb(141 141 141);
}
.tcol .pile.slot{ position:absolute; top:0; left:0; }

.pile.slot.drop-ok{ border-color:#00FF00; box-shadow: 0 0 14px #00FF0088, inset 0 0 10px rgba(0,0,0,0.35);}
.tcol.drop-ok::after{
  content:""; position:absolute;
  top:-4px; bottom:-4px; left:-4px;
  right: calc(100% - var(--card-w) - 4px);
  border-radius: calc(var(--card-radius) + 3px);
  border:2px solid #00FF00; box-shadow:0 0 14px rgba(0,255,0,0.6);
  pointer-events:none; z-index:500;
}

.card.thoughtful{
  opacity: 0.55;
  filter: grayscale(0.6);
  pointer-events: none;
}
.card{
  position:absolute; left:0; top:0;
  width: var(--card-w); height: var(--card-h);
  border-radius: var(--card-radius);
  background: var(--ivory);
  box-shadow: 0 0 2px rgba(0,0,0,0.33);
  transition: box-shadow .15s ease, width .2s ease, height .2s ease;
  cursor: grab;
  touch-action: none;
  overflow:hidden;
}
.card.dragging{ cursor:grabbing; z-index:999 !important; transition:none; }
.card.selected{ box-shadow: 0 0 0 3px #00FF00, 0 0 10px rgba(0,0,0,.5); }
.face, .back-img-wrap{ position:absolute; inset:0; border-radius:var(--card-radius); overflow:hidden; background:transparent; }
.back-img-wrap{ background:#0d3358; }
.card-face-img, .card-back-img{
  width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none;
}
.card-face-img{ transform: scale(var(--face-scale)); transform-origin:center; }
.card-back-img{ transform: scale(var(--back-scale)); transform-origin:center; }

.img-fallback{ position:absolute; inset:0; background:var(--ivory); border-radius:var(--card-radius); overflow:hidden; }
.img-fallback .fc-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:calc(var(--card-w)*0.05);
  font-size:calc(var(--card-w)*0.26); font-weight:bold; opacity:0.85;
}
.img-fallback .fc-corner{
  position:absolute; left:6%; top:5%; font-size:calc(var(--card-w)*0.17);
  font-weight:bold; line-height:1.1;
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--card-w)*0.02);
}
.img-fallback .fc-corner.stacked{ flex-direction:row; gap:calc(var(--card-w)*0.035); }
.img-fallback .fc-corner.br{ left:auto; right:6%; top:auto; bottom:5%; transform:rotate(180deg); }
.suit-red{ color: var(--burgundy); }
.suit-black{ color: var(--navy); }

.winmask{
  position:fixed; inset:0; background: rgba(4,20,14,0.85); z-index:200;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  opacity:0; pointer-events:none; transition: opacity .4s ease;
}
.winmask.show{ opacity:1; pointer-events:all; }

#winmask{ background: transparent; }
.winmask-modal{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background: rgba(4,20,14,0.92);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: 24px 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  max-width: min(90vw, 380px);
}
.winmask h2{ font-size: clamp(22px,5vw,34px); color: var(--brass-light); letter-spacing:4px; font-variant:small-caps; margin:0; text-shadow:0 0 30px rgba(232,200,115,.5);}
.winmask p{ color:#cfe6d8; letter-spacing:2px; text-align:center;}
#cascade-layer{ position:fixed; inset:0; z-index:150; overflow:hidden; pointer-events:none; }
.cascade-card, .cascade-ghost{ position:fixed; cursor:default; will-change: left, top; }

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
  display:none; align-items:center; justify-content:center;
}
.overlay.show{ display:flex; }
.modal{
  width: min(440px, 92vw); max-height: 90vh; overflow-y:auto;
  background-image: url(images/bg-img.jpg);
  border-radius:14px;
  padding: 22px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal h3{ margin:0 0 4px; color:#353535; font-variant:small-caps; letter-spacing:2px; font-size:22px;}
.modal .sub{ color:#353535; font-size:12px; letter-spacing:1px; margin-bottom:18px;}
.field{ margin-bottom:16px; }
.field > label{ display:block; font-size:13px; letter-spacing:1px; color:#353535; margin-bottom:8px;}
.segmented{ display:flex; border:1px solid #353535; border-radius:10px; overflow:hidden; }
.segmented button{
  flex:1; padding:9px 6px; background-image: url(images/bg-img.jpg); color:#353535; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight: bold; letter-spacing:1px; border-right:1px solid #353535;
}
.segmented button:last-child{ border-right:none; }
.segmented button.active{ background-image: url(images/woodb2.jpg); color:#353535; font-weight:bold; }
.toggrow{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.toggrow span{ font-size:14px; color:#353535;}
.switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; background:#8d8d8d; border-radius:20px; cursor:pointer;
  transition:.2s; border:1px solid #353535;
}
.slider::before{
  content:""; position:absolute; width:20px; height:20px; left:2px; top:2px;
  background: #faf6ec; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background: #8d8d8d; }
.switch input:checked + .slider::before{ transform: translateX(20px); background: #faf6ec; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.modal-actions .textbtn{ flex:1; min-width:100px; text-align:center; }
.fieldnote{ font-size:11px; color:#353535; margin-top:8px; letter-spacing:.3px; line-height:1.4; }
.primary{ background-image: url(images/woodb2.jpg); color:#353535; font-weight:bold;}

.backpicker{ display:flex; gap:10px; flex-wrap:wrap; }
.backswatch{
  width:52px; height:74px; border-radius:3px; cursor:pointer;
  border: 2px solid transparent; position:relative; overflow:hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  background:#353535;
}
.backswatch img{ width:100%; height:100%; object-fit:cover; display:block; }
.backswatch.active{ border-color: #00FF00; }