:root{
  --felt:#0b6b4f;--felt-dark:#07533d;--felt-light:#12815f;
  --card:#fffdf8;--ink:#18201d;--muted:#b9d8cc;--gold:#f1c75b;
  --shadow:0 5px 12px rgba(0,0,0,.28);--radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--felt-dark);color:white}
body{overflow-x:hidden}
button{font:inherit}
.app{min-height:100vh;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.06),transparent 35%),linear-gradient(145deg,var(--felt-light),var(--felt) 45%,var(--felt-dark))}
header{height:64px;padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;padding:0 max(14px,calc((100vw - 1200px)/2));background:rgba(0,0,0,.18);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{font-weight:800;letter-spacing:.2px;font-size:20px}
.actions{display:flex;gap:7px;align-items:center}
.btn{border:0;border-radius:9px;padding:9px 12px;cursor:pointer;color:white;background:rgba(255,255,255,.12);transition:.15s transform,.15s background,.15s opacity}
.btn:hover{background:rgba(255,255,255,.19)}.btn:disabled{opacity:.38;cursor:not-allowed}.btn.auto-ready{background:rgba(241,199,91,.22);color:#ffe49a;opacity:1}.btn:active{transform:scale(.96)}.btn.primary{background:var(--gold);color:#3d3213;font-weight:700}
.icon-btn{font-size:17px;padding:8px 10px}.hint-cost{font-size:10px;opacity:.7;margin-left:2px}
main{width:min(1200px,100%);margin:auto;padding:14px 12px calc(28px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.stats{display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);font-size:13px;align-items:center}
.stats b{color:white}
.level-pill{background:rgba(241,199,91,.18);border:1px solid rgba(241,199,91,.35);color:#ffe49a!important;padding:5px 8px;border-radius:999px}
.xpbar{width:130px;height:7px;background:rgba(255,255,255,.13);border-radius:9px;overflow:hidden;display:inline-block;vertical-align:middle}
.xpfill{height:100%;width:0;background:var(--gold);transition:width .35s ease}
.board{position:relative}
.row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(7px,1.2vw,14px)}
.top-row{margin-bottom:18px;grid-template-columns:repeat(7,minmax(0,1fr))}
.pile{position:relative;aspect-ratio:2.5/3.5;min-width:0}
.stock,.waste,.foundation{width:100%;height:100%;border-radius:var(--radius)}
.stock{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;cursor:pointer;background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 3px,transparent 3px 7px),#145f4b;border:2px solid rgba(255,255,255,.28)}
.stock:after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:rgba(255,255,255,.42)}
.foundation{display:grid;place-items:center;color:rgba(255,255,255,.22);font-size:34px;font-weight:700;border:2px dashed rgba(255,255,255,.23)}
.waste{position:relative;overflow:visible}.waste .card{transition:left .18s ease,transform .18s ease,box-shadow .18s ease}.foundation[data-foundation="1"] .slot,.foundation[data-foundation="3"] .slot{color:#bd2437}
.card{position:absolute;width:100%;height:auto;aspect-ratio:2.5/3.5;border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.13);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none;cursor:pointer;will-change:transform;overflow:hidden;transition:top .18s ease,left .18s ease,box-shadow .18s ease}
.card.red{color:#bd2437}.card.black{color:#171b1a}
.card.dragging{transition:none;z-index:5000!important}.touch-ghost{position:fixed!important;left:0;top:0;margin:0!important;pointer-events:none!important;z-index:10000!important;transition:none!important;will-change:left,top,transform;opacity:.92!important}.card.face-down{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 3px,transparent 3px 7px),#174f79;border:4px solid white}
.card.face-down:before{content:"";position:absolute;inset:4px;border:2px solid rgba(255,255,255,.48);border-radius:5px}
.rank{position:absolute;top:4px;left:6px;font-size:clamp(16px,2.2vw,26px);font-weight:800;line-height:1}
.suit{position:absolute;top:25px;left:7px;font-size:clamp(14px,1.8vw,22px)}
.center-suit{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(28px,4vw,48px);opacity:.9}.red-suit{color:#bd2437}
.bottom-rank{position:absolute;right:6px;bottom:3px;transform:rotate(180deg);font-size:clamp(16px,2.2vw,26px);font-weight:800;line-height:1}
.bottom-suit{position:absolute;right:7px;bottom:25px;transform:rotate(180deg);font-size:clamp(14px,1.8vw,22px)}
.tableau{min-height:420px}.column{position:relative;min-height:420px}
.column.empty{border-radius:var(--radius);border:2px dashed rgba(255,255,255,.18)}
.column.empty:after{content:"K";display:grid;place-items:center;height:100%;font-size:30px;color:rgba(255,255,255,.15)}
.selected{outline:3px solid var(--gold);outline-offset:-3px;filter:brightness(1.05);transform:translateY(-2px)}
.dragging{opacity:.72;z-index:1000!important}
.hint{animation:pulse 0.65s ease-in-out 3;outline:3px solid var(--gold);outline-offset:-3px;z-index:3000!important}.hint-destination{animation:hintTarget .6s ease-in-out 3;outline:3px solid var(--gold);outline-offset:4px}
.invalid{animation:shake .22s ease-in-out 2}.hint-arrow{position:fixed;height:4px;background:var(--gold);transform-origin:0 50%;z-index:5500;pointer-events:none;border-radius:9px;box-shadow:0 0 12px rgba(241,199,91,.8)}.auto-target{animation:autoTarget .45s ease-out 1}.hint-arrow:after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border-left:11px solid var(--gold);border-top:7px solid transparent;border-bottom:7px solid transparent}
.fly{animation:fly .24s ease-out}
@keyframes pulse{50%{filter:brightness(1.5);transform:translateY(-6px) scale(1.03)}}@keyframes autoTarget{50%{transform:scale(1.08);filter:brightness(1.55)}}@keyframes hintTarget{50%{filter:brightness(1.6);transform:scale(1.04)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes fly{0%{transform:scale(.96)}100%{transform:scale(1)}}
.help{margin-top:18px;color:rgba(255,255,255,.72);font-size:13px;text-align:center}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);display:none;align-items:center;justify-content:center;padding:20px;z-index:5000}
.modal-backdrop.open{display:flex}.modal{width:min(480px,100%);max-height:90vh;overflow:auto;background:#fff;color:#17211d;border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal h2{margin:0 0 10px}.modal p{line-height:1.55;color:#4b5651}.modal .close{float:right;background:#eef2ef;color:#18201d}
.win{text-align:center}.win .emoji{font-size:52px}.win h2{margin:4px 0}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.menu-card{border:0;border-radius:11px;padding:13px;background:#f0f4f1;color:#18201d;text-align:left;cursor:pointer}
.menu-card b{display:block;margin-bottom:3px}.menu-card span{font-size:12px;color:#68736e}
.setting{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #e5e9e6}
select{border:1px solid #cbd4cf;border-radius:8px;padding:7px;background:white}
.stat-table{width:100%;border-collapse:collapse}.stat-table td{padding:8px 4px;border-bottom:1px solid #e6ebe8}.stat-table td:last-child{text-align:right;font-weight:700}
.level-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.level-row{padding:7px 9px;border-radius:8px;background:#f2f5f3;font-size:13px}.level-row.current{background:#fff0bc}.level-row.locked{opacity:.45}
@media(max-width:700px){
  body{-webkit-text-size-adjust:100%;overscroll-behavior-x:none}
  header{
    height:auto;min-height:58px;flex-wrap:wrap;gap:6px;
    padding:8px max(8px,env(safe-area-inset-left)) 7px max(8px,env(safe-area-inset-right));
  }
  .brand{font-size:19px;flex:1;min-width:120px}
  .actions{
    order:3;flex:1 0 100%;width:100%;min-width:0;
    overflow-x:auto;overflow-y:hidden;justify-content:flex-start;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .actions::-webkit-scrollbar{display:none}
  .actions .btn{flex:0 0 auto;padding:8px 10px;font-size:12px;white-space:nowrap}
  .actions .icon-btn{padding:8px 10px}
  #newBtn{font-size:0}
  #newBtn:after{content:"Novo jogo";font-size:12px}
  main{padding:9px 7px 20px}
  .top-row{margin-bottom:12px}.row{gap:5px}
  .tableau{min-height:0}.column{min-height:330px}
  .help{position:relative;margin-top:10px;padding:8px 10px;z-index:1}
  .rank{top:3px;left:4px}.suit{top:21px;left:5px}
  .bottom-rank{right:4px;bottom:2px}.bottom-suit{right:5px;bottom:21px}
  .stats{gap:7px}.xpbar{width:75px}.help{font-size:11px}
  .menu-grid,.level-list{grid-template-columns:1fr}
}