:root{
  color-scheme:dark;
  --table:#123d30;
  --ink:#f7f7f3;
  --muted:#b8c6bf;
  --line:rgba(255,255,255,.12);
  --glass:rgba(7,25,20,.62);
  --accent:#f2d177;
  --gap:clamp(4px,1.35vw,10px);
  --max-board:760px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--table);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}
button:disabled{opacity:.35}
.solitaire-app{position:relative;width:100%;height:100dvh;min-height:100svh;overflow:hidden;background:var(--table)}
.solitaire-app::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 20%,transparent 80%,rgba(0,0,0,.07))}
.topbar{position:absolute;z-index:50;left:50%;top:max(7px,env(safe-area-inset-top));transform:translateX(-50%);width:min(var(--max-board),calc(100% - 16px));height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.text-btn{justify-self:start;border:0;background:transparent;padding:8px 5px;font-weight:700;font-size:12px;cursor:pointer}.text-btn:active{opacity:.7}
.titlebox{display:grid;justify-items:center;line-height:1.05}.titlebox strong{font-size:14px}.titlebox small{font-size:9px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.top-actions{justify-self:end;display:flex;gap:6px}.round-btn{width:37px;height:37px;border:1px solid var(--line);border-radius:50%;background:rgba(7,25,20,.48);display:grid;place-items:center;font-size:20px;cursor:pointer;padding:0}.round-btn:active{transform:scale(.96)}
.board{position:absolute;left:50%;top:62px;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(var(--max-board),calc(100% - 12px));overflow:visible}
.upper,.tableau{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}
.upper{height:auto;align-items:start}.spacer{aspect-ratio:5/7}
.pile,.column{position:relative;min-width:0}.pile{aspect-ratio:5/7;border-radius:5%;}
.pile.foundation{border:1px solid rgba(255,255,255,.12);background:rgba(6,26,20,.18)}
.pile.foundation::before{content:attr(data-symbol);position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(23px,7vw,42px);color:rgba(255,255,255,.13);font-family:Georgia,serif}
.stock.empty{border:1px solid rgba(255,255,255,.12);background:rgba(6,26,20,.18)}
.stock.empty::after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(20px,6vw,34px);color:rgba(255,255,255,.38)}
.count-badge{position:absolute;right:-3px;bottom:-3px;z-index:5;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:rgba(5,20,15,.86);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff}
.playing-card{position:absolute;left:0;top:0;width:100%;aspect-ratio:5/7;border-radius:4.5%;overflow:hidden;background:#fff;box-shadow:0 3px 9px rgba(0,0,0,.30);user-select:none;touch-action:none;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,opacity .1s ease}
.playing-card img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}.playing-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.playing-card.selected{box-shadow:0 0 0 2px var(--accent),0 7px 18px rgba(0,0,0,.4);transform:translateY(-5px)}
.playing-card.hint-source{box-shadow:0 0 0 2px var(--accent),0 5px 15px rgba(0,0,0,.42)}

/* Virada física das cartas recém-expostas: mesma linguagem 3D da Sueca.
   A camada é fixa para não participar do layout nem mover as colunas. */
.solitaire-reveal-layer{position:fixed;inset:0;z-index:1100;pointer-events:none;overflow:visible;perspective:760px;perspective-origin:50% 48%}
.solitaire-reveal-card{position:fixed;overflow:visible;transform-style:preserve-3d;pointer-events:none}
.solitaire-reveal-inner{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:88% 88%;will-change:transform}
.solitaire-reveal-face{position:absolute;inset:0;border-radius:4.5%;overflow:hidden;background:transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 3px 9px rgba(0,0,0,.30),inset 0 0 0 1px rgba(0,0,0,.12);transform:translateZ(.01px)}
.solitaire-reveal-face.front{transform:rotateY(180deg) translateZ(.01px)}
.solitaire-reveal-face img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.drop-hint{box-shadow:inset 0 0 0 2px rgba(242,209,119,.82)!important;background:rgba(242,209,119,.08)!important}
.tableau{position:absolute;left:0;right:0;top:120px;bottom:0;align-items:stretch}
.column{height:100%;border-radius:6px}.column.empty-target::after{content:"K";position:absolute;top:0;left:0;right:0;aspect-ratio:5/7;border:1px solid rgba(255,255,255,.09);border-radius:5%;display:grid;place-items:center;color:rgba(255,255,255,.09);font:700 clamp(20px,6vw,36px) Georgia,serif}
.drag-ghost{position:fixed;z-index:1000;pointer-events:none;filter:drop-shadow(0 12px 16px rgba(0,0,0,.38));will-change:left,top}.drag-ghost .ghost-card{position:absolute;left:0;width:100%;aspect-ratio:5/7;border-radius:4.5%;overflow:hidden;background:#fff}.drag-ghost img{display:block;width:100%;height:100%}
body.dragging .playing-card.drag-source{visibility:hidden;opacity:0;transition:none!important}
.toast{position:fixed;z-index:1200;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 12px);transform:translate(-50%,10px);max-width:88vw;padding:7px 11px;border-radius:999px;background:rgba(5,22,16,.9);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:11px;opacity:0;pointer-events:none;transition:.16s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:0;color:var(--ink);background:#112e25;padding:0}dialog::backdrop{background:rgba(0,0,0,.5)}#menuDialog{margin:auto 0 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0}.sheet{padding:8px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));max-width:560px;margin:auto}.grabber{width:34px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:0 auto 10px}.sheet-head,.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.close-btn{border:0;background:transparent;font-size:24px;padding:4px 7px;cursor:pointer}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{min-height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-weight:700;cursor:pointer}.btn.primary{background:#f0d174;color:#193428;border-color:transparent}.row{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px}.row span{color:var(--muted)}.rules-link{width:100%;margin-top:8px;min-height:40px;border:0;background:transparent;color:#f0d174;text-align:left;padding:6px 2px;cursor:pointer}
.modal{width:min(560px,calc(100% - 24px));max-height:76dvh;border-radius:18px;padding:16px}.modal-body{font-size:13px;line-height:1.55;color:#d9e2dd;overflow:auto;max-height:60dvh}.modal-body p{margin:0 0 12px}
.win-dialog{width:min(360px,calc(100% - 28px));border-radius:20px}.win-content{padding:24px;display:grid;justify-items:center;text-align:center;gap:8px}.win-mark{width:54px;height:54px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:grid;place-items:center;font-size:28px;color:#f0d174}.win-content strong{font-size:20px}.win-content span{font-size:11px;color:var(--muted);margin-bottom:10px}.win-content .actions{width:100%}
@media(max-height:620px){.board{top:55px}.topbar{height:42px}}
@media(orientation:landscape) and (max-height:520px){:root{--max-board:680px}.board{top:48px;bottom:3px}.topbar{top:3px;height:40px}.pile{max-height:82px}.upper{grid-auto-rows:minmax(0,82px)}.tableau{top:90px}.titlebox small{display:none}}