html,body{margin:0}body{padding:0}[hidden]{display:none!important}img{max-width:100%}
/* Layout: app = barra fixa + coluna de 1180px; jogo = tela inteira (barra, palco, trocador de jogos).
   Linguagem visual: peças de jogo táteis — botões e cartas "grossos", com sombra de borda, cores de tabuleiro. */
:root{
  --bg:#f5f2f9; --surface:#ffffff; --surface-2:#efeaf5; --ink:#2b1f33; --ink-2:#62566d; --ink-3:#8e839a; --line:#e2dbeb;
  --plum:#725977; --plum-d:#533e58; --lav-soft:#ebe8f6; --accent:#725977;
  --coral:#e0604c; --sun:#f3b23a; --teal:#23897d; --sky:#4b8fe0;
  --ok:#1f9d6c; --bad:#d9493e;
  --i1:#725977; --i2:#ee6b57; --i3:#2a9d8f; --i4:#f3b23a; --i5:#e6e2f3; --i6:#8e839a;
  --shadow:0 1px 2px rgba(43,31,51,.05),0 10px 30px rgba(43,31,51,.07);
  --f-d:'Bricolage Grotesque','Nunito',system-ui,sans-serif;
  --f-b:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,4vw,32px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#17121b; --surface:#211a26; --surface-2:#2b2331; --ink:#f3edf7; --ink-2:#bfb3ca; --ink-3:#8c8097; --line:#3a3043;
  --plum:#8b6c91; --plum-d:#4f3a55; --lav-soft:#2f2840; --accent:#d2b4d9; --i5:#3a3150; --i6:#a99cb5;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#17121b; --surface:#211a26; --surface-2:#2b2331; --ink:#f3edf7; --ink-2:#bfb3ca; --ink-3:#8c8097; --line:#3a3043;
  --plum:#8b6c91; --plum-d:#4f3a55; --lav-soft:#2f2840; --accent:#d2b4d9; --i5:#3a3150; --i6:#a99cb5;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3); color-scheme:dark }

/* ---------- peles do palco (cada uma é um mundo visual fixo) ---------- */
[data-skin="mesa"]{
  --st-bg:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1.5px,transparent 1.5px 18px),repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 1.5px,transparent 1.5px 18px),radial-gradient(ellipse at 50% 35%,#2f6ba5,#1e4b7c 60%,#143559);
  --st-fg:#ffffff; --st-muted:#bcd2ea; --st-card:#f7f6f2; --st-card-fg:#2a2622; --st-edge:rgba(0,0,0,.3); --st-pool:rgba(0,0,0,.16);
  --c1:#d34a39; --c2:#2a8f63; --c3:#c27f0e; --c4:#7a4ec2; --tile-fg:#fff; --st-ok:#2fbf7a; --st-bad:#ef5a4a;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#2a8f63; --petal:#f2b134; --seed:#7a4a1c; --st-hole:#0d2440; --mole:#b08562; --wheel:wood; }
[data-skin="lavanda"]{--wheel:color;
  --st-bg:radial-gradient(circle at 1px 1px,rgba(114,89,119,.14) 1.4px,transparent 0) 0 0/22px 22px,linear-gradient(165deg,#f4f0fb,#e7e0f3);
  --st-fg:#2b1f33; --st-muted:#6d6077; --st-card:#ffffff; --st-card-fg:#2b1f33; --st-edge:rgba(43,31,51,.13); --st-pool:rgba(255,255,255,.45);
  --c1:#725977; --c2:#d9573f; --c3:#1f8377; --c4:#b46f0c; --tile-fg:#fff; --st-ok:#1d9566; --st-bad:#d4433a;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#4f9a5b; --petal:#f5b935; --seed:#8a5a2b; --st-hole:#4a3650; --mole:#a7836a; }
[data-skin="lousa"]{--wheel:color;
  --st-bg:radial-gradient(ellipse at 25% 15%,rgba(255,255,255,.08),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(255,255,255,.05),transparent 50%),#23443a;
  --st-fg:#f4f1e4; --st-muted:#b8c8bd; --st-card:rgba(255,255,255,.08); --st-card-fg:#f4f1e4; --st-edge:rgba(0,0,0,.28); --st-pool:rgba(0,0,0,.12);
  --c1:#f2d272; --c2:#f4a3bb; --c3:#93d2f0; --c4:#addf9f; --tile-fg:#1d2b25; --st-ok:#7fd69a; --st-bad:#f28b82;
  --st-font:'Patrick Hand','Nunito',cursive; --st-font-d:'Patrick Hand','Nunito',cursive; --leaf:#addf9f; --petal:#f2d272; --seed:#c9a36a; --st-hole:#142a23; --mole:#c7a588; }
[data-skin="papel"]{--wheel:wood;
  --st-bg:repeating-linear-gradient(97deg,rgba(90,60,20,.035) 0 2px,transparent 2px 7px),repeating-linear-gradient(7deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px),#d6b588;
  --st-fg:#2d2216; --st-muted:#5d4a33; --st-card:#fffaf0; --st-card-fg:#2d2216; --st-edge:rgba(70,45,15,.22); --st-pool:rgba(255,250,240,.35);
  --c1:#c9472a; --c2:#2c4a7c; --c3:#2b7f57; --c4:#7a3f8f; --tile-fg:#fff; --st-ok:#2b7f57; --st-bad:#b8321c;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#2b7f57; --petal:#efb02a; --seed:#7a4a1c; --st-hole:#4a3218; --mole:#9b7656; }
[data-skin="oceano"]{--wheel:color;
  --st-bg:radial-gradient(circle at 12% 80%,rgba(255,255,255,.12) 0 6px,transparent 7px),radial-gradient(circle at 85% 30%,rgba(255,255,255,.1) 0 10px,transparent 11px),radial-gradient(circle at 60% 70%,rgba(255,255,255,.08) 0 4px,transparent 5px),linear-gradient(180deg,#127091,#0a3a52);
  --st-fg:#eaf8ff; --st-muted:#a9d3e3; --st-card:rgba(255,255,255,.12); --st-card-fg:#ffffff; --st-edge:rgba(0,20,35,.35); --st-pool:rgba(0,20,35,.18);
  --c1:#ff8a65; --c2:#ffd166; --c3:#2fe0b0; --c4:#9fd3ee; --tile-fg:#082331; --st-ok:#2fe0b0; --st-bad:#ff6b6b;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#2fe0b0; --petal:#ffd166; --seed:#b5651d; --st-hole:#062433; --mole:#c79a7a; }
[data-skin="espaco"]{--wheel:color;
  --st-bg:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 64%,#fff,transparent),radial-gradient(1px 1px at 34% 78%,#fff,transparent),radial-gradient(1px 1px at 55% 40%,#cfd3ff,transparent),radial-gradient(ellipse at 80% 100%,rgba(124,92,255,.35),transparent 60%),#0d0f2b;
  --st-fg:#eef0ff; --st-muted:#a6abd6; --st-card:rgba(255,255,255,.09); --st-card-fg:#eef0ff; --st-edge:rgba(0,0,0,.4); --st-pool:rgba(255,255,255,.05);
  --c1:#7c5cff; --c2:#e94f97; --c3:#14a3a3; --c4:#d98a1c; --tile-fg:#fff; --st-ok:#2fd18a; --st-bad:#ff5c6c;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#2fd18a; --petal:#ffc547; --seed:#7c5cff; --st-hole:#05061a; --mole:#a58cff; }
.theme-swatch{background:var(--st-bg)}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:500 15px/1.5 var(--f-b);-webkit-font-smoothing:antialiased}
body.playing{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
h1,h2,h3{font-family:var(--f-d);margin:0;text-wrap:balance;letter-spacing:-.02em}
.muted{color:var(--ink-2)} .small{font-size:13px}
.eyebrow{font:800 11.5px/1 var(--f-b);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.ticon{display:block;width:100%;height:100%}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px;font-weight:800;font-size:15px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 var(--line);transition:transform .1s,box-shadow .1s,filter .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.03);transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--line),0 1px 0 var(--line)}
.btn.primary{background:var(--plum);color:#fff;box-shadow:0 4px 0 var(--plum-d)}
.btn.primary:active{box-shadow:0 1px 0 var(--plum-d)}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:12px}
.btn svg{width:18px;height:18px}
.lnk{background:none;border:0;padding:8px 10px;border-radius:10px;font-weight:700;font-size:14px;color:var(--ink-2)}
.lnk:hover{color:var(--ink);background:var(--surface-2)}
.lnk.danger{color:var(--bad)}

/* ---------- barra do topo ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1180px;margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0}
.brand-mark{width:30px;height:30px}
.brand-word{font:800 27px/1 var(--f-d);letter-spacing:-.045em;color:var(--ink)}
.brand-by{font:700 11px/1 var(--f-b);color:var(--ink-3);margin-top:7px}
.topnav{display:flex;align-items:center;gap:4px}

/* ---------- início ---------- */
.home{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,64px);padding-block:clamp(28px,5vw,64px) 36px;align-items:center}
.hero h1{font-weight:800;font-size:clamp(38px,5.6vw,66px);line-height:.98;letter-spacing:-.045em;margin:14px 0 16px}
.hero h1 .hl{color:var(--accent);background:linear-gradient(transparent 70%,color-mix(in srgb,var(--sun) 55%,transparent) 70% 92%,transparent 92%);padding-inline:2px}
.lead{font-size:18px;color:var(--ink-2);max-width:54ch;margin:0}
.composer{margin-top:24px;background:var(--surface);border-radius:22px;padding:18px;box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:12px}
.composer-l{font-weight:800;font-size:15px}
.composer textarea{width:100%;resize:vertical;min-height:62px;font-size:17px;font-weight:600;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.composer textarea:focus,.composer select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--lav-soft)}
.ideas{display:flex;flex-wrap:wrap;gap:6px}
.idea{border-radius:999px;border:1.5px solid var(--line);background:none;padding:5px 11px;font-weight:700;font-size:13px;color:var(--ink-2)}
.idea:hover{border-color:var(--plum);color:var(--ink)}
.composer-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.composer-row .btn{margin-left:auto}
.sel{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:12px;color:var(--ink-2)}
.sel select{padding:9px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;font-size:14px}
.ai-err{color:var(--bad);font-weight:700;font-size:14px}
.composer-alt{font-size:14px;color:var(--ink-2)}
.composer-alt .lnk{padding:4px 6px;text-decoration:underline;text-underline-offset:3px}
.no-ai .composer>:not(.composer-alt){display:none}
.no-ai .composer-alt .ai-only{display:none}
.no-ai .composer-alt .lnk{background:var(--plum);color:#fff;text-decoration:none;padding:12px 18px;border-radius:14px;font-weight:800;font-size:15px;box-shadow:0 4px 0 var(--plum-d)}

.demo{background:var(--surface);border-radius:26px;padding:22px;box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:12px;transform:rotate(.6deg)}
.demo-head{display:flex;flex-direction:column;gap:6px}
.demo-head strong{font:800 22px/1.1 var(--f-d);letter-spacing:-.02em}
.demo-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.demo-items li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;background:var(--bg);font-size:14px}
.demo-items li span{min-width:0;color:var(--ink-2)}
.demo-items li b{color:var(--accent);font-weight:800;white-space:nowrap}
.demo-more{font-size:13px;color:var(--ink-3);padding-left:12px}
.demo-sub{margin-top:4px}
.demo-tpls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tpl-chip{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-size:13px;text-align:left;transition:transform .12s,border-color .12s}
.tpl-chip svg{width:30px;height:30px;flex:none}
.tpl-chip:hover{border-color:var(--plum);transform:translateY(-1px)}

.sec{padding-block:26px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{font-weight:800;font-size:clamp(24px,3vw,32px)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tpl-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--surface);border:0;box-shadow:inset 0 0 0 1.5px var(--line);text-align:left;position:relative;transition:transform .15s,box-shadow .15s}
.tpl-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--plum),var(--shadow)}
.tpl-ic{width:56px;height:56px;border-radius:14px;background:var(--bg);display:grid;place-items:center}
.tpl-ic svg{width:40px;height:40px}
.tpl-txt{display:flex;flex-direction:column;min-width:0}
.tpl-txt strong{font:800 17px/1.2 var(--f-d);letter-spacing:-.01em}
.tpl-txt span{font-size:13px;color:var(--ink-2);line-height:1.35}
.tpl-kind{position:absolute;top:10px;right:12px;font:800 10.5px/1 var(--f-b);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.tpl-kind.apresentar{color:var(--teal)}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.act-card{background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column}
.act-top{height:112px;display:grid;place-items:center;padding:12px}
.act-peek{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.act-peek span{background:var(--st-card);color:var(--st-card-fg);border-radius:10px;padding:5px 10px;font:800 13px/1.2 var(--st-font);box-shadow:0 3px 0 var(--st-edge);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-peek span:nth-child(1){transform:rotate(-3deg)} .act-peek span:nth-child(3){transform:rotate(2.5deg)}
.act-body{padding:14px 16px 4px}
.act-tags{display:flex;gap:6px;flex-wrap:wrap}
.act-tags span{font:800 10.5px/1 var(--f-b);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--lav-soft);padding:5px 8px;border-radius:999px}
.act-body h3{font-size:19px;margin:9px 0 3px}
.act-actions{padding:12px 16px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
.foot{padding-block:40px 56px;color:var(--ink-3);font-size:13px;text-align:center}

/* ---------- editor ---------- */
.editor{max-width:1180px;margin:0 auto;padding:20px var(--gutter) 64px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.ed-main{min-width:0}
.back{margin-left:-10px}
.ed-title{width:100%;font:800 clamp(26px,4vw,40px)/1.15 var(--f-d);letter-spacing:-.03em;border:0;background:transparent;color:var(--ink);padding:6px 0;border-bottom:2px dashed var(--line);outline:none}
.ed-title:focus{border-bottom-color:var(--plum)}
.ed-title::placeholder,.row input::placeholder{color:var(--ink-3)}
.ai-live{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--lav-soft);margin-top:14px}
.ai-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--plum);border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
.ai-msg{flex:1;display:flex;flex-direction:column;font-size:14px;min-width:0}
.ai-msg strong{font-weight:800}
.ai-ok,.ai-warn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;flex:none;background:var(--ok)}
.ai-warn{background:var(--sun);color:#2b1f33}
.ed-bar{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:20px 0 10px}
.ed-bar-l{display:flex;gap:14px;align-items:center}
.switch{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.switch i::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;left:3px;top:3px;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+i{background:var(--plum)}
.switch input:checked+i::after{transform:translateX(16px)}
.switch input:focus-visible+i{outline:3px solid var(--sky);outline-offset:2px}
.rows-head,.row{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) 36px;gap:8px;align-items:center}
.rows-head{font:800 11px/1 var(--f-b);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding-bottom:8px}
.gcol,.in-g{display:none}
.with-groups .rows-head,.with-groups .row{grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) 36px}
.with-groups .gcol,.with-groups .in-g{display:block}
.row{margin-bottom:8px}
.row-n{font-weight:800;font-size:13px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.row input{width:100%;min-width:0;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:15px}
.row input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--lav-soft)}
.row-del{width:36px;height:36px;border-radius:10px;border:0;background:none;color:var(--ink-3);font-size:22px;line-height:1}
.row-del:hover{background:var(--surface-2);color:var(--bad)}
.rows-foot{margin-top:4px;padding-left:36px}
.ed-help{margin-top:26px;padding:16px 18px;border-radius:16px;background:var(--surface-2);font-size:14px;color:var(--ink-2)}
.ed-help strong{color:var(--ink)}
.ed-help ul{padding-left:18px;margin:6px 0 0}
.ed-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);max-height:calc(100vh - 96px);overflow:auto;background:var(--surface);border-radius:20px;padding:16px;box-shadow:inset 0 0 0 1.5px var(--line)}
.side-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.side-head h2{font-size:18px}
.count-pill{background:var(--lav-soft);color:var(--accent);font-weight:800;font-size:12px;border-radius:999px;padding:4px 10px;white-space:nowrap}
.ed-tpls{display:flex;flex-direction:column;gap:4px}
.ed-tpl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:12px;border:0;background:transparent;text-align:left}
.ed-tpl .tpl-ic{width:44px;height:44px;border-radius:12px}
.ed-tpl .tpl-ic svg{width:32px;height:32px}
.ed-tpl .tpl-txt strong{font-size:15px}
.ed-tpl .tpl-txt span{font-size:12.5px}
.ed-tpl:not(.off):hover{background:var(--surface-2)}
.ed-tpl.off{opacity:.5}
.ed-tpl.off .tpl-ic{filter:grayscale(1)}

/* ---------- jogador ---------- */
.player{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--bg);z-index:60}
.pl-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30}
.pl-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pl-t strong{font:800 16px/1.2 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-t span{font-size:12.5px;color:var(--ink-2);font-weight:700}
.pills{display:flex;gap:6px}
.pill{background:var(--surface-2);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.pill b{color:var(--accent);font-size:15px}
.pill.time{min-width:62px;text-align:center}
.pl-ctrls{display:flex;gap:2px;position:relative}
.icon-btn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;flex:none}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:22px;height:22px}
.theme-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border-radius:16px;box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line);padding:6px;display:grid;gap:2px;min-width:180px;z-index:40}
.theme-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:0;background:none;font-weight:700;color:var(--ink);text-align:left}
.theme-opt:hover,.theme-opt.on{background:var(--surface-2)}
.theme-swatch.dot{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12);flex:none}
.stage{position:relative;overflow:hidden;background:var(--st-bg);color:var(--st-fg);font-family:var(--st-font);min-height:0}
.stage-inner{position:absolute;inset:0}
.pl-switch{display:flex;align-items:center;gap:12px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);min-width:0;transition:background .3s}
.pl-switch.pulse{animation:pulseBg 1.4s ease}
.sw-l{font-weight:800;font-size:12px;color:var(--ink-3);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}
.switcher{display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:thin;padding:2px}
.sw-chip{flex:none;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:13.5px}
.sw-chip svg{width:30px;height:30px}
.sw-chip:hover{border-color:var(--plum)}
.sw-chip.on{background:var(--plum);border-color:var(--plum);color:#fff}

/* resultado */
.end{position:absolute;inset:0;z-index:20;background:rgba(20,12,26,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;overflow:auto;font-family:var(--f-b)}
.end-card{background:var(--surface);color:var(--ink);width:min(480px,100%);border-radius:28px;padding:26px 24px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.stars{display:flex;justify-content:center;gap:4px;margin-bottom:6px}
.star{width:58px;height:58px;fill:var(--line);animation:starIn .5s cubic-bezier(.3,1.6,.5,1) both}
.star:nth-child(2){width:70px;height:70px;margin-top:-10px}
.star.on{fill:#f3b23a;filter:drop-shadow(0 3px 0 #c98a14)}
.end-card h2{font-size:28px}
.end-score{margin:4px 0}
.end-score b{font:800 64px/1 var(--f-d);color:var(--accent);letter-spacing:-.04em}
.end-score span{font-weight:800;font-size:20px;color:var(--ink-2)}
.end-meta{color:var(--ink-2);font-weight:700;font-size:14px;min-height:20px}
.end-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.rank{margin-top:20px;text-align:left;display:flex;flex-direction:column;gap:8px}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.rank-list li{display:grid;grid-template-columns:24px 1fr auto auto;gap:10px;padding:6px 10px;border-radius:10px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.rank-list li.me{background:var(--lav-soft)}
.rank-list .rk{color:var(--ink-3)} .rank-list .rt{color:var(--ink-2);min-width:36px;text-align:right}
.rank-form{display:flex;gap:8px}
.rank-form input{flex:1;min-width:0;padding:9px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700}
.review{margin-top:16px;text-align:left}
.review summary{cursor:pointer;font-weight:800;font-size:14px;color:var(--ink-2)}
.review ul{list-style:none;margin:8px 0 0;padding:0;max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.review li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;font-size:13.5px;padding:6px 8px;border-radius:8px;background:var(--bg);align-items:baseline}
.review li b{text-align:right;max-width:45%}
.rv-ic{font-weight:900} .review .ok .rv-ic{color:var(--ok)} .review .bad .rv-ic{color:var(--bad)}

/* ---------- peças comuns dos jogos ---------- */
.g-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:clamp(10px,2.2vh,22px);padding:clamp(12px,2.5vh,28px) clamp(12px,3vw,32px);overflow:auto}
.g-card{background:var(--st-card);color:var(--st-card-fg);border-radius:22px;padding:clamp(12px,2vh,22px) clamp(14px,3vw,28px);box-shadow:0 6px 0 var(--st-edge),0 14px 30px rgba(0,0,0,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);width:min(900px,100%);text-align:center}
.q-num{font:800 12px/1 var(--st-font);text-transform:uppercase;letter-spacing:.12em;opacity:.62;margin-bottom:6px}
.fit{display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;min-height:0;width:100%}
.fit>span{display:block;max-width:100%;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.tile{--tc:var(--c1);background:var(--tc);color:var(--tile-fg);border:0;border-radius:16px;font:800 clamp(16px,2.4vmin,26px)/1.15 var(--st-font);padding:12px 16px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.12);transition:transform .12s,box-shadow .12s,filter .15s,opacity .25s,background .2s;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none}
.tile:hover{filter:brightness(1.07);transform:translateY(-2px)}
.tile:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.1)}
.tile.is-ok{background:var(--st-ok);color:#fff;animation:pop .45s ease}
.tile.is-bad{background:var(--st-bad);color:#fff;animation:shake .4s ease}
.tile.is-dim{opacity:.32}
.tile.reveal{box-shadow:0 0 0 4px var(--st-fg),inset 0 -5px 0 rgba(0,0,0,.2)}
.btn-g{background:var(--c1);color:var(--tile-fg);border:0;border-radius:14px;padding:12px 22px;font:800 17px/1 var(--st-font);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);transition:transform .1s,opacity .2s}
.btn-g:active{transform:translateY(2px)}
.btn-g:disabled{opacity:.4}
.btn-g.ghost{background:var(--st-card);color:var(--st-card-fg);box-shadow:inset 0 -4px 0 var(--st-edge),inset 0 0 0 1.5px var(--st-edge)}
.btn-g.ok{background:var(--st-ok);color:#fff}
.g-tip{font-size:13px;color:var(--st-muted);text-align:center}
.rise{animation:rise .38s cubic-bezier(.2,.8,.2,1) both}
.pop-in{animation:popIn .32s cubic-bezier(.3,1.4,.5,1) both}
.shake{animation:shake .4s ease}
.dnd-ghost{position:fixed!important;left:0;top:0;z-index:150;pointer-events:none;margin:0;box-shadow:0 18px 34px rgba(0,0,0,.28)!important;opacity:.96;transition:none!important;animation:none!important}
.dnd-src{opacity:.3}
.picked{outline:4px solid var(--st-fg);outline-offset:2px;transform:translateY(-3px)}

/* questionário */
.quiz{justify-content:flex-start}
.q-time{width:min(900px,100%);height:8px;border-radius:99px;background:var(--st-edge);overflow:hidden;flex:none}
.q-time i{display:block;height:100%;width:100%;background:var(--c3);border-radius:inherit;animation:drain var(--dur) linear forwards}
.q-time.paused i{animation-play-state:paused}
.q-time.live i{animation:none;transition:width .1s linear}
.q-time.hurry i{background:var(--st-bad)}
.q-card{flex:none}
.q-text{height:clamp(84px,22vh,220px);font:800 clamp(24px,4.8vmin,50px)/1.12 var(--st-font-d);letter-spacing:-.01em}
.q-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(72px,1fr);gap:14px;width:min(900px,100%);flex:1;max-height:44vh;min-height:0}
.q-opt{display:flex;align-items:center;gap:12px;text-align:left;min-height:0}
.q-key{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.26);display:grid;place-items:center;font-size:16px;flex:none}
.q-otext{flex:1;height:100%;justify-content:flex-start;text-align:left;font-size:clamp(17px,3vmin,30px)}

/* combine */
.match{justify-content:flex-start}
.m-board{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;width:min(1100px,100%);margin-block:auto}
.m-rows{display:flex;flex-direction:column;gap:10px}
.m-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-q{width:auto;padding:8px 14px;border-radius:16px;box-shadow:0 4px 0 var(--st-edge)}
.m-qt{height:52px;font:800 clamp(15px,2.2vmin,22px)/1.15 var(--st-font)}
.m-slot{border:3px dashed var(--st-edge);border-radius:16px;min-height:68px;display:flex;flex-direction:column;padding:3px;transition:background .15s,border-color .15s;cursor:pointer}
.m-slot.dnd-over{background:var(--st-pool);border-color:var(--st-fg)}
.m-slot.filled{border-style:solid;border-color:transparent}
.m-slot.is-ok{border-color:var(--st-ok);border-style:solid}
.m-slot.is-bad{border-color:var(--st-bad);border-style:solid}
.m-slot .chip{flex:1;width:100%}
.m-fix{font-weight:800;font-size:13px;color:var(--st-fg);padding:4px 8px 2px}
.m-side{display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:0}
.m-hint{font-size:13px;color:var(--st-muted);text-align:center}
.m-pool{display:flex;flex-wrap:wrap;gap:10px;min-height:120px;padding:12px;border-radius:18px;background:var(--st-pool);border:2px dashed var(--st-edge);align-content:flex-start}
.m-pool.dnd-over{border-color:var(--st-fg)}
.chip{min-height:58px;padding:5px 12px;flex:1 1 140px;touch-action:none;cursor:grab}
.chip.locked{cursor:default}
.chip-t{height:46px;font-size:clamp(14px,2vmin,20px)}

/* memória */
.mem-grid{display:grid;gap:12px;justify-content:center;align-content:center}
.mem-card{width:var(--cw);aspect-ratio:.78;perspective:900px;background:none;border:0;padding:0;animation:rise .4s both}
.mem-inner{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.mem-card.open .mem-inner,.mem-card.done .mem-inner{transform:rotateY(180deg)}
.mem-back,.mem-front{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mem-back{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.2),transparent 50%),var(--c1);color:rgba(255,255,255,.55);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.12)}
.mem-back svg{width:40%;height:40%}
.mem-card:hover .mem-back{filter:brightness(1.08)}
.mem-front{transform:rotateY(180deg);background:var(--st-card);color:var(--st-card-fg);padding:8px;box-shadow:inset 0 -6px 0 var(--st-edge),0 4px 10px rgba(0,0,0,.12);border-top:6px solid var(--c2)}
.mem-front.alt{border-top-color:var(--c3)}
.mem-t{height:100%;font:800 calc(var(--cw)*.13)/1.15 var(--st-font)}
.mem-card.done .mem-front{background:var(--st-ok);color:#fff;border-top-color:transparent;animation:pop .45s ease}
.mem-card.nope{animation:shake .4s}

/* verdadeiro ou falso */
.tf-stack{width:min(720px,100%);display:grid;flex:none}
.tf-card{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.tf-q{height:clamp(70px,17vh,170px);font:800 clamp(22px,4.4vmin,44px)/1.12 var(--st-font-d)}
.tf-arrow svg{width:30px;height:30px;opacity:.5}
.tf-a{background:var(--c1);color:var(--tile-fg);padding:10px 24px;border-radius:999px;font:900 clamp(22px,4.2vmin,42px)/1.1 var(--st-font);max-width:100%}
.tf-fix{font-weight:800;color:var(--st-ok);font-size:18px}
.tf-card.go-ok{box-shadow:0 0 0 5px var(--st-ok),0 6px 0 var(--st-edge)}
.tf-card.go-bad{box-shadow:0 0 0 5px var(--st-bad),0 6px 0 var(--st-edge)}
.tf-card.go-ok.to-left,.tf-card.go-bad.to-left{animation:outL .5s .25s ease-in forwards}
.tf-card.go-ok.to-right,.tf-card.go-bad.to-right{animation:outR .5s .25s ease-in forwards}
.tf-card.go-bad{animation-delay:.9s!important}
.tf-btns{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(720px,100%)}
.tf-btn{height:clamp(70px,13vh,110px);font-size:clamp(20px,3.4vmin,32px);display:flex;align-items:center;justify-content:center;gap:12px}
.tf-btn.yes{--tc:var(--st-ok);color:#fff} .tf-btn.no{--tc:var(--st-bad);color:#fff}
.tf-ic{font-size:1.3em}
.tf-streak{height:26px;font:900 20px/26px var(--st-font-d);color:var(--c2);flex:none}
.tf-streak.on{animation:pop .4s}

/* forca */
.hg-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,3vw,32px);align-items:center;width:min(1000px,100%)}
.hg-fl{display:flex;flex-direction:column;align-items:center;gap:4px}
.flower{height:clamp(140px,30vh,270px);width:auto;overflow:visible}
.petal{transform-box:view-box;transform-origin:60px 60px;transform:rotate(var(--r))}
.petal ellipse{fill:var(--petal);stroke:rgba(0,0,0,.08);stroke-width:1.5}
.petal.fall{animation:petalFall .9s ease-in forwards}
.flower .face{transition:transform .3s}
.flower.happy{animation:bounce .8s ease 2}
.flower.sad .mouth{transform-box:view-box;transform-origin:60px 69px;transform:scaleY(-1)}
.flower.sad{filter:saturate(.5)}
.hg-lives{font-weight:800;font-size:13px;color:var(--st-muted)}
.hg-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.hg-clue{width:100%}
.hg-ct{height:clamp(50px,12vh,110px);font:800 clamp(18px,3.4vmin,32px)/1.15 var(--st-font-d)}
.hg-word{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hg-slot{width:clamp(28px,5.2vmin,52px);height:clamp(36px,6.6vmin,64px);border-bottom:5px solid var(--st-fg);display:grid;place-items:center;font:900 clamp(22px,4.4vmin,44px)/1 var(--st-font-d);color:var(--st-fg)}
.hg-slot.show{animation:popIn .3s both}
.hg-slot.missed{color:var(--st-bad)}
.hg-gap{width:22px}
.hg-kb{display:flex;flex-direction:column;gap:7px;width:min(760px,100%)}
.hg-row{display:flex;gap:6px;justify-content:center}
.hg-key{flex:1;max-width:58px;height:clamp(40px,7vh,58px);border-radius:10px;border:0;background:var(--st-card);color:var(--st-card-fg);font:800 18px/1 var(--st-font);box-shadow:inset 0 -4px 0 var(--st-edge),inset 0 0 0 1px var(--st-edge);touch-action:manipulation}
.hg-key:active{transform:translateY(2px)}
.hg-key.hit{background:var(--st-ok);color:#fff}
.hg-key.miss{opacity:.25}

/* anagrama */
.an-clue{flex:none}
.an-ct{height:clamp(50px,12vh,110px);font:800 clamp(18px,3.6vmin,34px)/1.15 var(--st-font-d)}
.an-slots,.an-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:min(1000px,100%)}
.an-slot{width:var(--lt);height:calc(var(--lt)*1.15);border-radius:12px;border:3px dashed var(--st-edge);background:transparent;font:900 calc(var(--lt)*.55)/1 var(--st-font-d);color:var(--tile-fg);padding:0;transition:background .15s}
.an-slot.filled{background:var(--tc);border:3px solid transparent;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);animation:popIn .2s both}
.an-slot.bad{border-color:var(--st-bad)}
.an-slots.is-ok .an-slot{background:var(--st-ok);color:#fff}
.an-slot.revealed{background:var(--st-card);color:var(--st-card-fg)}
.an-tile{width:var(--lt);height:calc(var(--lt)*1.15);padding:0;font:900 calc(var(--lt)*.55)/1 var(--st-font-d);animation:rise .35s both}
.an-tile.used{opacity:0;transform:scale(.6);pointer-events:none}
.an-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* caça-palavras */
.g-wrap.ws{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:stretch;width:100%}
.ws-area{display:grid;place-items:center;min-height:0;min-width:0}
.ws-board{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);background:var(--st-card);border-radius:14px;box-shadow:0 6px 0 var(--st-edge),0 14px 30px rgba(0,0,0,.1);touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.ws-cell{display:grid;place-items:center;font:800 calc(var(--cell)*.5)/1 var(--st-font);color:var(--st-card-fg);position:relative;z-index:1;pointer-events:none}
.ws-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ws-lines line{stroke-width:.78;stroke-linecap:round}
.ws-hit{opacity:.5;animation:fadeIn .25s}
.ws-hit.given{opacity:.25}
.ws-temp{stroke:var(--st-fg);opacity:0}
.ws-temp.on{opacity:.22}
.ws-side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;align-self:center;max-height:100%}
.ws-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ws-list li{padding:8px 12px;border-radius:12px;background:var(--st-card);color:var(--st-card-fg);box-shadow:0 3px 0 var(--st-edge);transition:opacity .3s}
.ws-list b{font-weight:900;font-size:17px;display:block;letter-spacing:.03em}
.ws-list small{display:block;font-size:12.5px;opacity:.7;line-height:1.3}
.ws-list li.got{opacity:.5}
.ws-list li.got b{text-decoration:line-through;text-decoration-thickness:3px}
.ws-list li.missed b{color:var(--st-bad)}
.ws-side .q-num{color:var(--st-fg)}

/* palavras cruzadas */
.g-wrap.cw{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:20px;align-items:stretch;width:100%}
.cw-area{display:grid;place-items:center;min-height:0;min-width:0;overflow:auto}
.cw-board{display:grid;filter:drop-shadow(0 8px 18px rgba(0,0,0,.14))}
.cw-x{width:var(--cell);height:var(--cell)}
.cw-cell{width:var(--cell);height:var(--cell);position:relative;background:#fffdf8;box-shadow:0 0 0 1px #3b2d42;transition:background .15s}
.cw-cell.hl{background:#fdeaa9}
.cw-cell.cur{background:#ffcf4d}
.cw-cell.good .cw-in{color:#1d8a5e}
.cw-cell.bad{background:#ffd6cf}
.cw-cell.given .cw-in{color:#725977}
.cw-in{width:100%;height:100%;border:0;background:transparent;text-align:center;font:800 calc(var(--cell)*.56)/1 var(--f-b);text-transform:uppercase;caret-color:transparent;outline:none;padding:0;color:#2b1f33}
.cw-n{position:absolute;top:2px;left:3px;font:800 calc(var(--cell)*.25)/1 var(--f-b);color:#7a6c84;pointer-events:none}
.cw-side{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding-bottom:4px}
.cw-clues{display:flex;flex-direction:column;gap:14px}
.cw-cl .q-num{color:var(--st-fg);opacity:.8}
.cw-cl ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cw-cl li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:7px 10px;border-radius:10px;cursor:pointer;font-size:15px;line-height:1.3;color:var(--st-fg)}
.cw-cl li:hover{background:var(--st-pool)}
.cw-cl li.on{background:var(--st-card);color:var(--st-card-fg);font-weight:800;box-shadow:0 3px 0 var(--st-edge)}
.cw-cl li b{font-weight:900}
.cw-cl li em{font-style:normal;opacity:.6;font-size:13px}

/* agrupar */
.gs{justify-content:space-between}
.gs-top{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;justify-content:center;width:100%}
.gs-deck{width:min(460px,92%)}
.gs-card{--tc:var(--st-card);color:var(--st-card-fg);width:100%;min-height:clamp(90px,18vh,170px);display:flex;cursor:grab;touch-action:none;box-shadow:inset 0 -6px 0 var(--st-edge),0 10px 24px rgba(0,0,0,.14)}
.gs-t{height:clamp(70px,14vh,140px);font:800 clamp(22px,4vmin,42px)/1.12 var(--st-font-d)}
.gs-card.fly{animation:flyDown .26s ease-in forwards}
.gs-left{font-weight:800;font-size:13px;color:var(--st-muted)}
.gs-bins{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;width:min(1100px,100%)}
.gs-bin{background:var(--tc);color:var(--tile-fg);border-radius:20px;padding:12px;min-height:clamp(120px,26vh,240px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 6px 14px rgba(0,0,0,.12);display:flex;flex-direction:column;cursor:pointer;transition:transform .15s,box-shadow .15s;min-width:0}
.gs-bin:hover,.gs-bin.dnd-over,.gs-bin.flash{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 4px var(--st-fg),inset 0 -6px 0 rgba(0,0,0,.2)}
.gs-bin.nope{animation:shake .4s}
.gs-name{font:800 clamp(16px,2.6vmin,24px)/1.15 var(--st-font-d);display:flex;align-items:center;gap:8px}
.gs-name kbd{font:800 12px/1 var(--f-b);background:rgba(255,255,255,.28);border-radius:6px;padding:4px 6px}
.gs-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-content:flex-start;overflow:auto;min-height:0;flex:1}
.gs-chip{background:rgba(255,255,255,.92);color:#2b1f33;border-radius:8px;padding:3px 8px;font:800 13px/1.3 var(--f-b);max-width:100%}

/* toupeira */
.whack{justify-content:flex-start}
.wk-q{flex:none}
.wk-t{height:clamp(46px,10vh,100px);font:800 clamp(20px,4vmin,40px)/1.12 var(--st-font-d)}
.wk-field{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,22px);width:min(720px,100%,calc((100vh - 290px) * 1.1));flex:none;margin-block:auto}
.wk-hole{position:relative;aspect-ratio:1/.92}
.wk-hole::before{content:"";position:absolute;left:6%;right:6%;bottom:2%;height:30%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,.55),var(--st-hole) 70%);box-shadow:inset 0 6px 10px rgba(0,0,0,.4)}
.wk-mask{position:absolute;left:0;right:0;top:-12%;bottom:17%;overflow:hidden;border-radius:0 0 46% 46%/0 0 22% 22%}
.wk-mole{position:absolute;left:14%;right:14%;bottom:0;height:86%;border:0;padding:0;background:none;transform:translateY(105%);transition:transform .2s cubic-bezier(.3,1.4,.5,1);touch-action:manipulation}
.wk-mole.up{transform:translateY(6%)}
.wk-body{position:absolute;inset:0;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.25),transparent 45%),var(--mole);border-radius:48% 48% 20% 20%/58% 58% 14% 14%;box-shadow:inset 0 -8px 0 rgba(0,0,0,.15)}
.wk-eye{position:absolute;top:24%;width:10%;aspect-ratio:1;border-radius:50%;background:#2b1f1a}
.wk-eye.l{left:32%} .wk-eye.r{right:32%}
.wk-eye::after{content:"";position:absolute;width:38%;height:38%;border-radius:50%;background:#fff;top:15%;left:20%}
.wk-nose{position:absolute;top:36%;left:50%;width:16%;height:9%;transform:translateX(-50%);border-radius:50%;background:#e8798a}
.wk-sign{position:absolute;left:-10%;right:-10%;bottom:16%;background:#fff;color:#2b1f33;border-radius:10px;padding:5px 6px;font:800 clamp(12px,2.1vmin,19px)/1.15 var(--st-font);box-shadow:0 3px 0 rgba(0,0,0,.2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;overflow-wrap:anywhere}
.wk-mole.bonk .wk-body{transform:scaleY(.82);transform-origin:bottom;background:var(--st-ok)}
.wk-mole.bonk .wk-sign{background:var(--st-ok);color:#fff}
.wk-mole.dizzy{animation:dizzy .5s ease}
.wk-mole.dizzy .wk-sign{background:var(--st-bad);color:#fff}
.wk-rim{position:absolute;left:4%;right:4%;bottom:0;height:16%;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--st-hole);opacity:.9}

/* encontre o par */
.fm-q{flex:none}
.fm-t{height:clamp(56px,13vh,120px);font:800 clamp(20px,4.2vmin,42px)/1.12 var(--st-font-d)}
.fm-grid{display:grid;gap:12px;width:min(1100px,100%);flex:1;min-height:0;align-content:center}
.fm-tile{height:var(--th,84px);padding:8px 12px;animation:rise .35s both}
.fm-bt{height:100%;font-size:clamp(15px,2.5vmin,26px)}
.fm-tile.gone{opacity:0;transform:scale(.6);pointer-events:none}

/* cartões */
.fc-stage{display:flex;align-items:center;gap:14px;width:min(920px,100%);flex:1;min-height:0;max-height:62vh}
.fc-card{flex:1;height:100%;min-height:200px;perspective:1400px;background:none;border:0;padding:0}
.fc-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--st-card);color:var(--st-card-fg);box-shadow:0 8px 0 var(--st-edge),0 20px 40px rgba(0,0,0,.12);padding:20px;display:flex;flex-direction:column;align-items:center}
[data-skin="lousa"] .fc-face.front,[data-skin="oceano"] .fc-face.front,[data-skin="espaco"] .fc-face.front{background:color-mix(in srgb,var(--st-card) 30%,#1b1b2a)}
.fc-face.back{transform:rotateY(180deg);background:var(--c1);color:var(--tile-fg)}
.fc-t{flex:1;font:800 clamp(26px,5.6vmin,62px)/1.1 var(--st-font-d)}
.fc-hint{font-size:13px;opacity:.55;font-weight:700}
.fc-nav{width:52px;height:52px;border-radius:50%;border:0;background:var(--st-card);color:var(--st-card-fg);font:800 32px/1 var(--f-b);box-shadow:0 4px 0 var(--st-edge);flex:none}
.fc-nav:disabled{opacity:.3}
.fc-actions{display:flex;gap:12px}

/* frase embaralhada */
.uj-head{flex:none}
.uj-clue{font:700 clamp(16px,2.6vmin,22px)/1.3 var(--st-font)}
.uj-line{min-height:clamp(74px,12vh,104px);width:min(1000px,100%);border:3px dashed var(--st-edge);border-radius:20px;display:flex;flex-wrap:wrap;gap:10px;padding:12px;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.uj-line.is-ok{border-style:solid;border-color:var(--st-ok);background:color-mix(in srgb,var(--st-ok) 18%,transparent)}
.uj-line.bad{border-color:var(--st-bad)}
.uj-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:min(1000px,100%);min-height:60px}
.uj-chip{font-size:clamp(18px,3vmin,30px);padding:10px 18px;min-height:56px;animation:rise .35s both}
.uj-chip.revealed{--tc:var(--st-card);color:var(--st-card-fg)}

/* toast + confete */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 16px;font-weight:700;z-index:300;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:250}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes wobble{0%{transform:scale(1)}30%{transform:scale(1.08) rotate(-4deg)}60%{transform:scale(.97) rotate(3deg)}100%{transform:scale(1)}}
@keyframes drain{from{width:100%}to{width:0}}
@keyframes outL{to{transform:translateX(-120%) rotate(-12deg);opacity:0}}
@keyframes outR{to{transform:translateX(120%) rotate(12deg);opacity:0}}
@keyframes petalFall{to{transform:rotate(var(--r)) translateY(-50px) scale(.5);opacity:0}}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
@keyframes flyDown{to{transform:translateY(140px) scale(.35);opacity:0}}
@keyframes dizzy{0%,100%{rotate:0deg}25%{rotate:-10deg}75%{rotate:10deg}}
@keyframes starIn{from{transform:scale(0) rotate(-40deg);opacity:0}}
@keyframes pulseBg{0%,100%{background:var(--surface)}30%{background:var(--lav-soft)}}

/* ---------- telas menores ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .demo{transform:none}
  .editor{grid-template-columns:1fr}
  .ed-side{position:static;max-height:none}
  .m-board{grid-template-columns:1fr}
  .m-side{position:static}
  .g-wrap.ws,.g-wrap.cw{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start}
  .ws-side,.cw-side{order:-1;align-self:start}
  .ws-list{flex-direction:row;flex-wrap:wrap}
  .ws-list li{padding:5px 10px}
  .ws-list small{display:none}
  .g-wrap.cw{grid-template-rows:minmax(0,1fr) auto;overflow:auto}
  .cw-side{order:0;overflow:visible}
  .cw-clues{flex-direction:row;gap:12px} .cw-cl{flex:1;min-width:0}
}
@media (max-width:640px){
  .topnav .lnk,.brand-by,.saved{display:none}
  .composer-row .btn{margin-left:0;width:100%}
  .demo-tpls{grid-template-columns:1fr 1fr}
  .with-groups .row .row-n{grid-area:n} .with-groups .row .in-a{grid-area:a} .with-groups .row .in-b{grid-area:b} .with-groups .row .in-g{grid-area:g} .with-groups .row .row-del{grid-area:d}
  .with-groups .rows-head{display:none}
  .rows-foot{padding-left:30px}
  .pl-t span,.sw-l,.pill.prog{display:none}
  .pill{padding:5px 10px}
  .q-grid{grid-template-columns:1fr;grid-auto-rows:64px;max-height:none;flex:none}
  .hg-top{grid-template-columns:96px minmax(0,1fr)}
  .flower{height:150px}
  .gs-bins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cw-clues{flex-direction:column}
  .fc-nav{width:42px;height:42px;font-size:26px}
}
/* roleta */
.wheel{gap:14px}
.w-box{position:relative;flex:none}
.w-canvas{display:block;cursor:pointer;filter:drop-shadow(0 16px 26px rgba(0,0,0,.32))}
.w-pointer{position:absolute;left:-30px;top:50%;width:58px;height:62px;transform:translateY(-50%);transform-origin:20% 50%;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.w-pointer svg{width:100%;height:100%;display:block}
.w-hub{--hub1:#f6f3fa;--hub2:#b3a9c2;position:absolute;left:50%;top:50%;width:19%;height:19%;transform:translate(-50%,-50%);border-radius:50%;border:0;background:radial-gradient(circle at 34% 28%,#fff 0 7%,var(--hub1) 30%,var(--hub2) 100%);box-shadow:0 8px 16px rgba(0,0,0,.35),inset 0 -6px 12px rgba(0,0,0,.22)}
.w-hub:active{transform:translate(-50%,-47%)}
[data-skin="mesa"] .w-hub,[data-skin="papel"] .w-hub{--hub1:#a8733f;--hub2:#4f2c12}
.w-spin{min-width:min(220px,70%);font-size:20px;padding:13px 28px;background:rgba(0,0,0,.55);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8);border-radius:10px}
.w-spin:disabled{opacity:.55}
.w-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;background:rgba(8,5,12,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:5}
.w-zoom{width:min(560px,94%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;border-radius:26px;background:var(--st-card);color:var(--st-card-fg);box-shadow:0 0 0 6px rgba(255,255,255,.92),0 34px 80px rgba(0,0,0,.5);text-align:center;will-change:transform}
[data-skin="mesa"] .w-zoom,[data-skin="papel"] .w-zoom{background:linear-gradient(160deg,#f0d6b0,#d6ad7c);color:#3a210c;box-shadow:0 0 0 8px #6e4119,0 0 0 11px #c9954f,0 34px 80px rgba(0,0,0,.55)}
[data-skin="lousa"] .w-zoom,[data-skin="oceano"] .w-zoom,[data-skin="espaco"] .w-zoom{background:color-mix(in srgb,var(--st-card) 25%,#1c1b2c)}
.w-zimg{display:block;max-width:100%;max-height:min(42vh,320px);object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.w-label{font:800 12px/1 var(--st-font);text-transform:uppercase;letter-spacing:.14em;opacity:.6}
.w-text{height:min(26vh,190px);font:800 clamp(30px,6.4vmin,64px)/1.08 var(--st-font-d)}
.w-text.with-img{height:clamp(44px,9vh,90px)!important}
.w-ans{font:800 clamp(18px,3.4vmin,30px)/1.25 var(--st-font);background:var(--c3);color:var(--tile-fg);padding:10px 20px;border-radius:14px;animation:popIn .3s both;max-width:100%}
.w-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* imagens nos jogos */
.g-img{display:block;max-width:100%;max-height:min(24vh,220px);object-fit:contain;margin:0 auto 6px;border-radius:12px;animation:popIn .3s both;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12))}
.g-img[hidden]{display:none}
.fit.with-img{height:clamp(34px,8vh,80px)!important}
.wk-q .g-img,.fm-q .g-img,.gs-card .g-img{max-height:min(15vh,130px)}
.gs-card{flex-direction:column;align-items:center;justify-content:center}
.m-img{width:54px;height:54px;object-fit:contain;flex:none}
.mem-front.has-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mem-img{max-width:86%;max-height:68%;object-fit:contain}
.mem-front.has-img .mem-t{height:24%;flex:none}
.cw-img{height:30px;width:auto;vertical-align:middle;margin-right:6px;border-radius:4px}
[data-skin="mesa"] .mem-back{background:repeating-linear-gradient(45deg,#b8323a 0 4px,#c94650 4px 8px);box-shadow:inset 0 0 0 5px #f4f3ee,inset 0 0 0 6.5px #8b7458,0 4px 10px rgba(0,0,0,.3);color:rgba(255,255,255,.55)}

/* enfeites de cada estilo */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.stage-inner{z-index:1}
.dc{position:absolute}
.dc svg{display:block;width:100%;height:auto;overflow:visible}
.m-die{left:-14px;top:12%;width:clamp(56px,7vw,92px);transform:rotate(-16deg);filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.m-die2{right:5%;bottom:-16px;width:clamp(40px,5vw,62px);transform:rotate(24deg);filter:drop-shadow(0 6px 5px rgba(0,0,0,.4))}
.m-pawn{left:2.5%;bottom:5%;width:clamp(30px,3.6vw,50px);transform:rotate(-8deg);filter:drop-shadow(6px 8px 5px rgba(0,0,0,.45))}
.m-pawn2{left:-4px;top:48%;width:clamp(28px,3.2vw,44px);transform:rotate(78deg);filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))}
.m-domino{right:-24px;bottom:22%;width:clamp(90px,10vw,140px);transform:rotate(-62deg);filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
.m-board{right:-70px;top:-70px;width:clamp(150px,18vw,240px);transform:rotate(28deg);filter:drop-shadow(0 10px 10px rgba(0,0,0,.45))}
.l-b1{left:-40px;top:-40px;width:170px;opacity:.5}
.l-b2{right:3%;top:9%;width:70px;opacity:.45;transform:rotate(14deg)}
.l-b3{left:3%;bottom:5%;width:150px;opacity:.6}
.l-b4{right:-26px;bottom:-26px;width:140px;opacity:.45;transform:rotate(18deg)}
.c-star{left:3%;top:8%;width:80px;opacity:.35;transform:rotate(-10deg)}
.c-spiral{right:4%;top:11%;width:90px;opacity:.28}
.c-smile{right:5%;bottom:7%;width:84px;opacity:.3}
.c-abc{left:3%;bottom:5%;width:170px;opacity:.3;transform:rotate(-4deg)}
.c-sum{left:42%;top:0;width:150px;opacity:.16}
.p-tape1{left:-16px;top:6%;width:140px;transform:rotate(-24deg)}
.p-tape2{right:-34px;top:32%;width:120px;transform:rotate(70deg)}
.p-tape3{right:9%;bottom:-6px;width:110px;transform:rotate(-6deg)}
.p-pencil{left:2%;bottom:5%;width:min(240px,30vw);transform:rotate(-8deg);filter:drop-shadow(0 5px 3px rgba(0,0,0,.25))}
.p-clip{right:7%;top:-12px;width:34px;transform:rotate(12deg)}
.o-fish1{left:3%;top:14%;width:92px;opacity:.6;animation:swim 9s ease-in-out infinite}
.o-fish2{right:4%;top:42%;width:72px;opacity:.5;animation:swim2 11s ease-in-out infinite}
.o-fish3{left:46%;bottom:3%;width:60px;opacity:.4;animation:swim 13s ease-in-out infinite}
.o-weed{left:-12px;bottom:-12px;width:92px}
.o-bub{right:12%;bottom:3%;width:50px;animation:bub 6s ease-in-out infinite}
.e-planet{right:-46px;bottom:-34px;width:clamp(150px,20vw,260px)}
.e-rocket{left:3%;top:10%;width:clamp(40px,5vw,64px);transform:rotate(30deg);animation:float 5s ease-in-out infinite}
.e-moon{right:8%;top:8%;width:54px;opacity:.8}
@keyframes swim{0%,100%{translate:0 0}50%{translate:40px -10px}}
@keyframes swim2{0%,100%{translate:0 0;transform:scaleX(-1)}50%{translate:-40px 12px;transform:scaleX(-1)}}
@keyframes bub{0%,100%{translate:0 0}50%{translate:0 -24px}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes dealIn{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--rot) - 14deg)) scale(.9)}to{opacity:1;transform:rotate(var(--rot))}}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}

/* painel estilo e música */
.theme-menu{min-width:300px;width:min(340px,calc(100vw - 24px));padding:14px;gap:8px}
.tm-h{font:800 11px/1 var(--f-b);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-top:4px}
.tm-skins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm-skin{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:5px;border-radius:12px;font-weight:700;font-size:12.5px;color:var(--ink)}
.tm-skin:hover{background:var(--surface-2)}
.tm-prev{display:block;width:100%;aspect-ratio:1.5;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative}
.tm-prev i{position:absolute;left:30%;top:24%;width:40%;height:52%;border-radius:4px;background:var(--st-card);box-shadow:0 2px 0 var(--st-edge)}
.tm-skin.on .tm-prev{box-shadow:0 0 0 3px var(--plum)}
.tm-music{display:flex;flex-direction:column;gap:2px}
.tm-track{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:none;border:0;font-weight:700;color:var(--ink);text-align:left}
.tm-track:hover{background:var(--surface-2)}
.tm-track.on{background:var(--lav-soft);color:var(--accent)}
.tm-eq{display:flex;align-items:flex-end;gap:2px;width:16px;height:14px}
.tm-eq i{display:block;width:4px;height:35%;background:currentColor;border-radius:2px;opacity:.5}
.tm-track.on .tm-eq i{opacity:1}
.tm-track.playing .tm-eq i{animation:eq .9s ease-in-out infinite}
.tm-track.playing .tm-eq i:nth-child(2){animation-delay:.2s}
.tm-track.playing .tm-eq i:nth-child(3){animation-delay:.4s}

/* editor: imagem por item */
.rows-head,.row{grid-template-columns:28px 44px minmax(0,1.3fr) minmax(0,1fr) 36px}
.with-groups .rows-head,.with-groups .row{grid-template-columns:28px 44px minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) 36px}
.row-img{width:44px;height:44px;border-radius:12px;border:1.5px dashed var(--line);background:var(--surface);color:var(--ink-3);display:grid;place-items:center;position:relative;padding:0}
.row-img:hover{border-color:var(--plum);color:var(--accent)}
.row-img svg{width:22px;height:22px}
.row-img.has{border-style:solid}
.row-img img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.row-img-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);font:800 14px/20px var(--f-b);text-align:center}
.row.drop{outline:2px dashed var(--plum);outline-offset:4px;border-radius:12px}
.act-peek span{display:inline-flex;align-items:center;gap:4px}
.act-peek img{height:22px;width:auto}
@media (max-width:640px){
  .rows-head,.row{grid-template-columns:22px 40px minmax(0,1fr) minmax(0,1fr) 30px}
  .with-groups .row{grid-template-columns:22px 40px minmax(0,1fr) minmax(0,1fr) 30px;grid-template-areas:"n i a a d" "n i b g d"}
  .with-groups .row .row-img{grid-area:i}
  .row-img{width:40px;height:40px}
  .decor{opacity:.6}
  .m-board,.c-sum,.p-tape2{display:none}
  .w-pointer{left:-18px;width:44px;height:48px}
}

/* abra a caixa: caixinhas de presente */
.ob-grid{display:grid;gap:18px;justify-content:center;align-content:center}
.ob-gift{--ribbon:color-mix(in srgb,var(--tc) 30%,#fff);--bow:color-mix(in srgb,var(--tc) 22%,#fff);width:var(--bw);aspect-ratio:1;position:relative;border:0;padding:0;background:none;transform:rotate(var(--rot));animation:dealIn .5s cubic-bezier(.2,.9,.3,1.1) both;transition:transform .15s}
.ob-gift:hover{transform:rotate(var(--rot)) translateY(-5px)}
.ob-gift:hover .ob-lid{transform:translateY(-5px) rotate(-3deg)}
.ob-shadow{position:absolute;left:12%;right:12%;bottom:-5%;height:10%;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(4px)}
.ob-body{position:absolute;left:9%;right:9%;top:35%;bottom:2%;border-radius:4px 4px 10px 10px;background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 28%,transparent 72%,rgba(0,0,0,.14)),var(--tc);box-shadow:inset 0 -6px 0 rgba(0,0,0,.16);display:grid;place-items:center;overflow:hidden}
.ob-body::before{content:"";position:absolute;left:43%;width:14%;top:0;bottom:0;background:var(--ribbon);box-shadow:inset 2px 0 0 rgba(0,0,0,.06),inset -2px 0 0 rgba(0,0,0,.06)}
.ob-tag{position:relative;z-index:1;width:44%;aspect-ratio:1;border-radius:50%;background:#fff;color:#2b1f33;display:grid;place-items:center;font:800 calc(var(--bw)*.2)/1 var(--st-font-d);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.ob-lid{position:absolute;left:3%;right:3%;top:21%;height:18%;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 65%),var(--tc);box-shadow:0 5px 0 rgba(0,0,0,.2),inset 0 -4px 0 rgba(0,0,0,.1);z-index:2;transition:transform .25s}
.ob-lid::before{content:"";position:absolute;left:43%;width:14%;top:0;bottom:0;background:var(--ribbon)}
.ob-bow{position:absolute;left:50%;bottom:72%;width:64%;transform:translateX(-50%)}
.ob-bow svg{display:block;width:100%;height:auto}
.ob-face{display:none}
.ob-gift.opening .ob-body{animation:wobble .35s ease}
.ob-gift.opening .ob-lid{animation:lidOff .6s cubic-bezier(.3,.6,.4,1) forwards}
.ob-gift.opened .ob-lid,.ob-gift.opened .ob-tag{display:none}
.ob-gift.opened .ob-body{top:30%;box-shadow:inset 0 14px 14px -8px rgba(0,0,0,.35),inset 0 -6px 0 rgba(0,0,0,.16)}
.ob-gift.opened .ob-face{display:flex;position:relative;z-index:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:84%;height:84%;background:#fffdf8;color:#2b1f33;border-radius:8px;padding:6%;font:800 calc(var(--bw)*.1)/1.15 var(--f-b);text-align:center;overflow:hidden;animation:popIn .3s both}
.ob-face img{max-width:90%;max-height:62%;object-fit:contain}
.ob-face span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
@keyframes lidOff{30%{transform:translateY(-35%) rotate(-6deg)}100%{transform:translate(-35%,-260%) rotate(-40deg);opacity:0}}

/* combine volta ao visual original; com imagem fica lado a lado */
.m-q.has-img{display:flex;align-items:center;gap:10px}
.m-q.has-img .fit{flex:1}

/* marca Brincador */
.brand-mark{width:34px;height:34px;overflow:visible}
.brand-loose{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-loose{transform:translate(3px,3px) rotate(10deg)}
.brand-word{font:900 27px/1 var(--f-b);letter-spacing:-.035em}
.bw-a{color:#9d97cf} .bw-b{color:#6e4f72}
:root[data-theme="dark"] .bw-a{color:#b9b4e6} :root[data-theme="dark"] .bw-b{color:#d9b9df}

/* curtidas */
.act-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.like{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--ink-3);font-weight:800;font-size:13px;padding:5px 9px;border-radius:999px;font-variant-numeric:tabular-nums;flex:none}
.like svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.like:hover{background:var(--surface-2);color:#d63c72}
.like.on{color:#d63c72}
.like.on svg{fill:currentColor}
.like.beat svg{animation:pop .4s ease}
.like.big{background:var(--surface-2);padding:10px 18px;font-size:14px;color:var(--ink-2)}
.like.big.on{background:color-mix(in srgb,#d63c72 12%,var(--surface));color:#d63c72}
.end-like{margin-top:14px}

/* abas e opções */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--surface-2);padding:4px;border-radius:12px}
.seg-b{border:0;background:none;padding:7px 12px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink-2)}
.seg-b:hover{color:var(--ink)}
.seg-b.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.opts{margin-top:26px;padding:18px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:18px}
.opts h3{font-size:20px}
.opt{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.opt-l{font-weight:800;font-size:14px}
.opt-l small{font-weight:700;font-size:12px;color:var(--ink-3);margin-left:8px}
.opt-hint{font-size:12.5px;color:var(--ink-3)}
.opt-skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:10px;width:100%}
.opt-skin{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:4px;border-radius:12px;font-weight:700;font-size:12.5px;color:var(--ink);text-align:center}
.opt-skin:hover{background:var(--surface-2)}
.opt-prev{display:block;aspect-ratio:1.45;border-radius:10px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.opt-prev .dc{scale:.38}
.opt-prev i{position:absolute;z-index:1;left:32%;top:26%;width:36%;height:48%;border-radius:4px;background:var(--st-card);box-shadow:0 2px 0 var(--st-edge)}
.opt-skin.on .opt-prev{box-shadow:0 0 0 3px var(--plum)}
.opt-sw{flex-direction:row;flex-wrap:wrap;gap:12px 24px}
.tm-skins{grid-template-columns:repeat(4,1fr)}
.theme-menu{width:min(380px,calc(100vw - 24px))}

/* Bonequinhas e Natureza */
[data-skin="bonecas"]{
  --st-bg:radial-gradient(circle at 10px 10px,rgba(255,255,255,.6) 2.5px,transparent 3px) 0 0/28px 28px,linear-gradient(160deg,#ffd9ea,#f8b4d2);
  --st-fg:#5a2147; --st-muted:#9a5d84; --st-card:#ffffff; --st-card-fg:#5a2147; --st-edge:rgba(150,40,100,.18); --st-pool:rgba(255,255,255,.5);
  --c1:#d94a92; --c2:#8f52d9; --c3:#e0605d; --c4:#1f8f83; --tile-fg:#fff; --st-ok:#22a374; --st-bad:#e0434b;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#7cc49b; --petal:#ff9ec7; --seed:#b5568a; --st-hole:#8a3b63; --mole:#e3a6c5; --wheel:color; }
[data-skin="natureza"]{
  --st-bg:linear-gradient(180deg,#9fd8ff 0%,#d6f0ff 60%,#eaf7d8 100%);
  --st-fg:#1f3b2b; --st-muted:#4f6d5a; --st-card:#ffffff; --st-card-fg:#1f3b2b; --st-edge:rgba(30,70,40,.18); --st-pool:rgba(255,255,255,.5);
  --c1:#2f8f55; --c2:#d65a35; --c3:#2a72b0; --c4:#9a6312; --tile-fg:#fff; --st-ok:#2f9e5e; --st-bad:#d9483b;
  --st-font:var(--f-b); --st-font-d:var(--f-d); --leaf:#2f8f55; --petal:#ffcf3d; --seed:#8a5a2b; --st-hole:#3d5a2a; --mole:#a7836a; --wheel:wood; }
[data-skin="natureza"] .w-zoom{background:linear-gradient(160deg,#f0d6b0,#d6ad7c);color:#3a210c;box-shadow:0 0 0 8px #6e4119,0 0 0 11px #c9954f,0 34px 80px rgba(0,0,0,.5)}
[data-skin="natureza"] .w-hub{--hub1:#a8733f;--hub2:#4f2c12}
.b-doll1{left:1.5%;bottom:-6px;width:clamp(58px,7vw,96px)}
.b-doll2{right:2%;bottom:-6px;width:clamp(54px,6.5vw,90px)}
.b-heart1{left:4%;top:8%;width:54px;transform:rotate(-14deg);animation:float 4s ease-in-out infinite}
.b-heart2{right:7%;top:22%;width:40px;transform:rotate(12deg);animation:float 5s ease-in-out infinite}
.b-heart3{left:16%;bottom:30%;width:30px;opacity:.8}
.b-bow{right:-10px;top:-6px;width:110px;transform:rotate(18deg)}
.b-crown{left:42%;top:-8px;width:80px;opacity:.75;transform:rotate(-6deg)}
.b-sp1{left:24%;top:14%;width:22px;animation:float 3s ease-in-out infinite}
.b-sp2{right:20%;bottom:20%;width:26px;animation:float 3.6s ease-in-out infinite}
.n-sun{left:2%;top:3%;width:clamp(70px,9vw,120px);animation:spinSlow 40s linear infinite}
.n-cloud1{left:22%;top:5%;width:clamp(100px,12vw,170px);animation:drift 30s ease-in-out infinite}
.n-cloud2{right:14%;top:12%;width:clamp(80px,9vw,130px);opacity:.85;animation:drift 38s ease-in-out infinite reverse}
.n-hills{left:0;right:0;bottom:0;height:18%}
.n-hills svg{width:100%;height:100%}
.n-tree1{left:-12px;bottom:4%;width:clamp(80px,10vw,150px)}
.n-tree2{right:-16px;bottom:5%;width:clamp(70px,9vw,130px)}
.n-bunny{right:12%;bottom:2%;width:clamp(44px,5vw,70px)}
.n-bird{right:30%;top:6%;width:54px;animation:float 3s ease-in-out infinite}
.n-fly{left:14%;top:38%;width:40px;animation:float 3.4s ease-in-out infinite}
.n-flowers{left:12%;bottom:1%;width:clamp(80px,10vw,130px)}
@keyframes spinSlow{to{rotate:360deg}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:40px 0}}
@media (max-width:640px){ .b-crown,.n-bird,.n-cloud2{display:none} }

/* ---------- conta, selo da Ludicare ---------- */
.pill-lud{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--sun) 60%,var(--line));background:color-mix(in srgb,var(--sun) 16%,var(--surface));color:var(--ink);font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
.pill-lud:hover{border-color:var(--sun)}
.pill-lud.on{background:var(--lav-soft);border-color:transparent;color:var(--accent)}
.acc{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;border:0;background:var(--plum);color:#fff;font:800 16px/1 var(--f-d)}
.acc-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border-radius:16px;box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line);padding:6px;min-width:230px;display:flex;flex-direction:column;z-index:60}
.acc-menu button{background:none;border:0;text-align:left;padding:9px 12px;border-radius:10px;font-weight:700;color:var(--ink)}
.acc-menu button:hover{background:var(--surface-2)}
.acc-menu .danger{color:var(--bad)}
.acc-who{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column}
.acc-who span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}

/* ---------- janela ---------- */
.mdl{position:fixed;inset:0;z-index:200;background:rgba(20,12,26,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;overflow:auto}
.mdl-card{position:relative;background:var(--surface);color:var(--ink);width:min(440px,100%);border-radius:24px;padding:28px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px}
.mdl-card.wide{width:min(560px,100%)}
.mdl-card h2{font-size:24px;line-height:1.15}
.mdl-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--ink-3);font-size:24px;line-height:1}
.mdl-x:hover{background:var(--surface-2)}
.mdl-mark{width:46px;height:46px}
.mdl-mark svg{width:100%;height:100%}
.mdl-big{width:56px;height:56px;border-radius:16px;background:var(--lav-soft);color:var(--accent);display:grid;place-items:center;font-size:28px;font-weight:900}
.mdl-big.ok{background:color-mix(in srgb,var(--ok) 16%,var(--surface));color:var(--ok)}
.mdl-sub{margin:0;color:var(--ink-2)}
.mdl-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
.mdl-list li::marker{color:var(--plum)}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-weight:800;font-size:13px;margin-top:4px}
.f input,.f select,.link-inp{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-weight:600;font-size:16px}
.f input:focus,.f select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--lav-soft)}
.f-err{color:var(--bad);font-weight:700;font-size:14px}
.f-fine{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.btn.full{width:100%;margin-top:6px}
.btn.google{background:var(--surface);gap:10px}
.btn.google svg{width:20px;height:20px}
.btn.whats{background:#1fa855;color:#fff;box-shadow:0 4px 0 #157a3d;text-decoration:none}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:13px;font-weight:700}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.lnk.tiny{align-self:center;font-size:13px}
.link-row{display:flex;gap:8px}
.link-inp{font-size:14px}

/* ---------- vazios, cota, publicar ---------- */
.empty{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:18px;border:2px dashed var(--line);color:var(--ink-2)}
.empty strong{color:var(--ink)}
.pad{padding:16px}
.composer-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.quota{font-size:12.5px;font-weight:800;color:var(--accent);background:var(--lav-soft);padding:3px 10px;border-radius:999px}
.ed-save{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pub{margin-top:22px;padding:14px 16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:6px}
.row-img.busy{opacity:.55;animation:pulseOp 1s ease-in-out infinite}
@keyframes pulseOp{50%{opacity:.25}}
.btn.send{flex:none}
.btn.send svg{width:16px;height:16px}

/* ---------- fim do jogo da criança ---------- */
.end-sent{margin-top:8px;font-weight:800;font-size:14px;color:var(--ink-2)}
.end-sent.ok{color:var(--ok)} .end-sent.bad{color:var(--bad)}
.pl-switch.brandfoot{justify-content:center;font-size:13px;color:var(--ink-3)}

/* ---------- página da criança ---------- */
.kid-page{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px;background:var(--st-bg);overflow:hidden}
.kid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.kid-card{background:#fffdf9;color:#2b1f33;width:min(460px,100%);border-radius:28px;padding:28px 24px;box-shadow:0 10px 0 rgba(0,0,0,.12),0 30px 60px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.kid-card .eyebrow{color:#8e839a}
.kid-card h1{font:800 clamp(26px,6vw,34px)/1.1 var(--f-d);letter-spacing:-.02em}
.kid-ic{width:72px;height:72px;border-radius:20px;background:#efeaf5;display:grid;place-items:center}
.kid-ic svg{width:52px;height:52px}
.kid-sub{margin:0;color:#62566d;font-size:14px}
.kid-form{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:10px}
.kid-form label{font:800 20px/1.2 var(--f-d)}
.kid-form input{width:100%;padding:16px;border-radius:16px;border:2px solid #e2dbeb;background:#fff;color:#2b1f33;font:800 22px/1 var(--f-b);text-align:center}
.kid-form input:focus{outline:none;border-color:#725977}
.btn.big{padding:16px 22px;font-size:20px;border-radius:16px}
.kid-brand{display:flex;align-items:center;gap:8px;color:var(--st-fg);text-decoration:none;font-size:13px;opacity:.85;background:color-mix(in srgb,var(--st-card) 70%,transparent);padding:6px 12px 6px 8px;border-radius:999px}
.kid-brand svg{width:22px;height:22px}

/* ---------- resultados ---------- */
.res-list{display:flex;flex-direction:column;gap:10px}
.res{background:var(--surface);border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.res-head{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:none;border:0;text-align:left;color:var(--ink)}
.res-head:hover{background:var(--surface-2)}
.res-ic{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center}
.res-ic svg{width:32px;height:32px}
.res-t{display:flex;flex-direction:column;min-width:0}
.res-t strong{font:800 16px/1.2 var(--f-d)}
.res-t span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-n{font-weight:800;font-size:13px;color:var(--ink-3);white-space:nowrap}
.res-n.on{color:var(--accent);background:var(--lav-soft);padding:4px 10px;border-radius:999px}
.res-body{padding:0 14px 14px;overflow-x:auto}
.res-tab{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.res-tab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:8px;border-bottom:1px solid var(--line)}
.res-tab td{padding:9px 8px;border-bottom:1px solid var(--line)}
.foot a{color:inherit}
@media (max-width:640px){
  .pill-lud{display:none}
  .btn.send span{display:none}
  .btn.send{padding:8px 10px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

.stg-badge{position:fixed;left:10px;bottom:10px;z-index:400;background:#d9493e;color:#fff;font:900 11px/1 var(--f-b);letter-spacing:.12em;padding:6px 9px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.25);pointer-events:none}