/* 2.1.0 — Helena anfitriã animada e painel de jogo reorganizado.
   Tela larga (≥ 900 px): três colunas — Helena grande à esquerda | tabuleiro | metas e jogadas.
   Tela estreita: metas no topo, tabuleiro, botões e uma doca inferior com a Helena em meio-corpo
   e o balão. A Helena nunca fica por cima do tabuleiro; só o botão "Pular tutorial" recebe toque. */
:root{--lane:clamp(220px,23vw,310px);--hud:clamp(190px,18vw,250px);--dock:150px}
.mode-play .scene-top{top:2px}
.goal-visual img{width:29px;height:29px;object-fit:contain;image-rendering:pixelated}
.guide-card img.power-drawing{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}

/* ---------- anfitriã (comum) */
.helena-host{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;min-height:0;pointer-events:none;isolation:isolate}
.host-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.host-stage::before{content:'';position:absolute;left:8%;right:8%;bottom:0;height:78%;border-radius:50% 50% 12px 12px/40% 40% 12px 12px;background:radial-gradient(ellipse at 50% 38%,#f7dcd2 0,#f1d3c8 45%,#ead0c400 72%);z-index:-1}
.host-stage::after{content:'';position:absolute;left:50%;bottom:4px;width:46%;height:12px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#8a50603a,#8a506000 70%);z-index:-1}
.host-stage canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;flex:none}
.host-bubble{position:relative;background:#fffaf3;border:1px solid #dbc4b8;border-radius:14px;padding:12px 15px 13px;box-shadow:3px 3px 0 #e8d7cf;flex:none}
.host-bubble.pop{animation:host-pop .32s cubic-bezier(.2,.9,.3,1.3)}
.host-label{display:block;color:var(--wine);font:600 9px 'Segoe UI',sans-serif;letter-spacing:1.7px;margin-bottom:6px}
.host-bubble p{font:italic 15px/1.45 Georgia,serif;color:#6c4757;margin:0;overflow-wrap:break-word;min-height:2.9em}
.host-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.host-actions:empty{display:none}
.host-actions button{pointer-events:auto;min-height:44px;padding:8px 14px;border-radius:22px;font-size:12px}
@keyframes host-pop{0%{transform:scale(.94);opacity:.6}100%{transform:none;opacity:1}}

/* ---------- metas e jogadas: cartão compacto */
.hud-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.game-panel .hud-head .text-button{margin:0;font-size:11px}
.game-panel .hud-head .eyebrow{margin:0}
.hud-card{background:#fffaf3;border:1px solid #e3cfc6;border-radius:16px;padding:14px 16px 12px;box-shadow:0 10px 30px #7b3b540f;margin-top:14px}
.hud-card .moves{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:0 0 12px;border:0;border-bottom:1px solid var(--line);max-width:none}
.hud-card .moves strong{font:56px/.9 Georgia;min-width:0}
.hud-card .moves span{font-size:10px;line-height:1.5;letter-spacing:1px;color:#8e6f78}
.hud-card .goals-heading{max-width:none;font-size:10px;margin-bottom:8px}
.hud-card .goals{max-width:none;gap:10px}
.hud-card .goal{grid-template-columns:40px 1fr auto;gap:10px;min-height:42px}
.hud-card .goal-visual{width:40px;height:40px}
.hud-card .goal-visual img{width:32px;height:32px}
.hud-card .goal-name{font-size:13px;color:#5f4450;font-weight:500}
.hud-card .goal-track{height:6px;margin-top:6px}
.hud-card .goal-value{font-size:20px}
.hud-card .goal-value small{font-size:11px}
.hud-card .score-line{max-width:none;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:9px}

/* ---------- treino guiado: marca no tabuleiro e destaque no painel */
.coach{position:absolute;z-index:9;pointer-events:none;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px}
.coach b{display:flex;align-items:center;gap:7px;background:var(--wine);color:#fff8f0;font:600 12px/1.2 'Segoe UI',sans-serif;padding:9px 13px;border-radius:20px;box-shadow:0 6px 18px #5b213a40;white-space:nowrap}
.coach b svg{width:22px;height:22px;flex:none}
.coach i{width:0;height:0;border:8px solid transparent;border-top-color:var(--wine);border-bottom:0}
.coach.bounce{animation:coach-bob 1.1s ease-in-out infinite}
@keyframes coach-bob{50%{transform:translate(-50%,calc(-100% - 5px))}}
.spotlight{position:relative;z-index:2;box-shadow:0 0 0 3px #d9a65e,0 0 0 8px #f3dcc0!important;border-radius:14px;transition:box-shadow .3s}

/* ---------- mini-anfitriã nos diálogos */
.modal-host{display:flex;align-items:flex-end;gap:14px;margin:-6px 0 16px}
.modal-host .mh-art{width:136px;height:120px;flex:none;display:flex;align-items:flex-end;justify-content:center;border-radius:14px;background:radial-gradient(ellipse at 50% 70%,#f5d9cf,#f5d9cf00 70%);overflow:hidden}
.modal-host canvas{display:block;image-rendering:pixelated}
.modal-host p{margin:0 0 6px;font:italic 15px/1.45 Georgia,serif;color:#6c4757;background:#f6ebe4;border-radius:12px;padding:10px 13px;position:relative}
.result .modal-host{justify-content:center;text-align:left}
.pause-menu{display:grid;gap:10px;justify-items:center;margin-top:18px}
.pause-menu .text-button{font-size:13px;min-height:40px}

/* ---------- guia "Como jogar" (cartões com clipe, apresentados pela Helena) */
dialog.guia-aberta{max-width:880px;padding:22px 26px 18px}
.guia{display:grid;grid-template-columns:150px 300px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"host top top" "host clip title" "host clip text" "host nav nav";gap:8px 22px;align-items:start}
.guia-main{display:contents}
.guia-host{grid-area:host;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;min-height:300px}
.guia-host .gh-art{width:150px;height:230px;display:flex;align-items:flex-end;justify-content:center}
.guia-host canvas{display:block;image-rendering:pixelated}
.guia-host::before{content:'';position:absolute;left:4px;right:4px;bottom:0;height:250px;border-radius:50% 50% 14px 14px/34% 34% 14px 14px;background:radial-gradient(ellipse at 50% 42%,#f5dad0,#f1d3c800 72%);z-index:-1}
.guia-host::after{content:'HELENA';position:absolute;bottom:-4px;font:600 9px 'Segoe UI',sans-serif;letter-spacing:1.8px;color:var(--wine)}
.guia-top{grid-area:top;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-right:34px}
.guia-top .modal-eyebrow{margin:0}
.guia-pular{font-size:12px!important;min-height:44px;padding:0 6px!important}
.guia-titulo{grid-area:title;font:30px/1.1 Georgia;margin:0;letter-spacing:-.6px}
.guia-texto{grid-area:text;min-width:0}
.guia-clip{grid-area:clip;touch-action:pan-y;margin:0;position:relative;width:300px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#efe0d6;border:1px solid #e3cfc6}
.guia-clip video,.guia-clip img{display:block;width:100%;height:100%;object-fit:cover}
.guia-clip .clip-play{position:absolute;inset:auto 10px 10px auto;min-height:44px;padding:0 16px;border-radius:22px;background:#fffaf3ee;border:1px solid #dbc4b8;color:var(--wine);font-size:12px}
.guia-fala{position:relative;background:#fffaf3;border:1px solid #dbc4b8;border-radius:14px;padding:11px 14px;box-shadow:3px 3px 0 #e8d7cf;margin:4px 0 0;font:italic 16px/1.45 Georgia,serif;color:#6c4757}
.guia-fala p{margin:0}
.guia-controles{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.guia-controles .ctl{display:flex;align-items:center;gap:10px;background:#f3e6de;border-radius:12px;padding:8px 11px;font:12px/1.4 'Segoe UI',sans-serif;color:#6f5160}
.guia-controles .ctl svg{width:34px;height:34px;flex:none}
.guia-controles .keys{display:grid;grid-template-columns:repeat(2,auto);gap:3px;flex:none}
.guia-controles .ctl kbd{display:inline-block;min-width:22px;padding:2px 5px;border:1px solid #c9aab4;border-bottom-width:2px;border-radius:5px;background:#fffaf3;font:600 11px 'Segoe UI',sans-serif;color:var(--wine);text-align:center}
.guia-troca{font-size:12px!important;margin-top:6px;min-height:36px}
.guia-poderes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:12px}
.guia-poderes div{display:flex;align-items:center;gap:8px;background:#f3e6de;border-radius:10px;padding:6px 8px;font:600 11px/1.25 'Segoe UI',sans-serif;color:#6f5160}
.guia-poderes img{width:32px;height:32px;image-rendering:pixelated;flex:none}
.guia-nav{grid-area:nav;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.guia-nav .secondary,.guia-nav .primary{min-height:46px}
.guia-nav .secondary{min-width:46px}
.guia-nav .primary{min-width:150px;padding:12px 18px}
.guia-nav .primary span{margin-left:12px}
.guia-pontos{display:flex;gap:7px}
.guia-pontos i{width:9px;height:9px;border-radius:50%;background:#e2cdc5;display:block}
.guia-pontos i.on{background:var(--wine)}
.guia-mais{margin-top:10px;font:12px/1.5 'Segoe UI',sans-serif;color:#6f5160}
.guia-mais summary{cursor:pointer;color:var(--wine);font-weight:600;min-height:32px;display:flex;align-items:center}
.guia-mais p{margin:4px 0 0}
.guia-nota{margin:8px 0 0;font:italic 11px/1.4 Georgia,serif;color:#977b83}
.guia .audio-settings{margin-top:12px;padding:8px 14px;gap:6px 14px}
.guia .audio-settings label{font-size:12px}
.guia .audio-settings input,.guia .audio-settings button{min-height:36px}

/* ---------- tela larga: três colunas */
@media(min-width:900px){
 #app.mode-play{grid-template-columns:var(--lane) minmax(0,1fr) var(--hud)!important;grid-template-rows:auto auto;grid-template-areas:"host board hud" "host tools hud";column-gap:18px}
 .mode-play .helena-host{grid-area:host;padding:14px 0 8px}
 .mode-play .helena-host .host-bubble{position:absolute;left:0;right:0;bottom:calc(var(--helena-h,436px) + 16px);z-index:2}
 .mode-play .helena-host .host-bubble::after{content:'';position:absolute;left:calc(50% - 12px);bottom:-8px;width:14px;height:14px;background:#fffaf3;border-right:1px solid #dbc4b8;border-bottom:1px solid #dbc4b8;transform:rotate(45deg)}
 .mode-play .scene-shell{grid-area:board}
 .mode-play .game-panel{grid-area:hud;padding:22px 0 10px}
 .mode-play .game-panel h1{font-size:clamp(24px,2.2vw,32px);max-width:none;margin-top:10px}
 .mode-play .play-toolbar{grid-area:tools;padding:0 0 10px}
}
@media(min-width:900px) and (max-width:1100px){
 .host-bubble p{font-size:14px}
 .hud-card{padding:12px 12px 10px}
 .hud-card .moves strong{font-size:46px}
 .hud-card .goal{grid-template-columns:34px 1fr auto;gap:8px}
 .hud-card .goal-visual{width:34px;height:34px}
 .hud-card .goal-visual img{width:27px;height:27px}
 .hud-card .goal-name{font-size:12px}
 .toolbar-tip{display:none!important}
}

/* ---------- tela estreita: topo compacto, tabuleiro, botões e doca da Helena */
@media(max-width:899px){
 #app.mode-play{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto minmax(var(--dock),1fr);grid-template-areas:"hud" "board" "tools" "host";min-height:calc(100dvh - 67px)!important;padding:0!important}
 .mode-play .game-panel{grid-area:hud;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:10px 16px 0}
 .mode-play .game-panel .hud-head{grid-column:1;justify-content:flex-start;gap:12px}
 .mode-play .game-panel .hud-head .text-button{font-size:11px;min-height:32px}
 .mode-play .game-panel .hud-head .eyebrow{font-size:9px;letter-spacing:1.4px}
 .mode-play .game-panel h1{grid-column:1;font-size:22px;margin:2px 0 0;letter-spacing:-.5px;line-height:1.15;max-width:none}
 .mode-play .hud-card{display:contents}
 .mode-play .hud-card .moves{grid-column:2;grid-row:1/3;flex-direction:column;justify-content:center;gap:2px;margin:0!important;padding:6px 12px!important;border:1px solid #e3cfc6;border-radius:14px;background:#fffaf3;min-width:82px;max-height:none}
 .mode-play .hud-card .moves strong{font-size:36px!important;line-height:1}
 .mode-play .hud-card .moves span{font-size:0}
 .mode-play .hud-card .moves span::before{content:'JOGADAS';font-size:8px;letter-spacing:1.2px}
 .mode-play .hud-card .goals-heading,.mode-play .hud-card .score-line{display:none}
 .mode-play .hud-card .goals{grid-column:1/3;flex-direction:row;gap:10px;margin-top:8px;padding:8px 0;border-block:1px solid var(--line)}
 .mode-play .hud-card .goal{flex:1;grid-template-columns:32px 1fr auto;gap:7px;min-height:34px}
 .mode-play .hud-card .goal-visual{width:32px;height:32px;border-radius:9px}
 .mode-play .hud-card .goal-visual img{width:26px;height:26px}
 .mode-play .hud-card .goal-name{font-size:11px}
 .mode-play .hud-card .goal-track{height:4px;margin-top:4px}
 .mode-play .hud-card .goal-value{font-size:17px;min-width:0}
 .mode-play .hud-card .goal-value small{font-size:9px}
 .mode-play .scene-shell{grid-area:board;width:100%;height:clamp(300px,min(100vw,calc(100dvh - 67px - 112px - var(--dock) - 58px)),560px)!important;min-height:0!important;max-height:none!important;margin:0!important;z-index:1}
 .mode-play .scene-top{display:none}
 #board-access{inset:5% 5%}
 .mode-play .play-toolbar{grid-area:tools;justify-content:center;padding:6px 16px 8px;gap:10px}
 .mode-play .toolbar-tip{display:none}
 .mode-play .play-toolbar .secondary{min-height:44px;padding:10px 18px}
 .mode-play .helena-host{grid-area:host;flex-direction:row;align-items:stretch;gap:10px;min-height:var(--dock);max-height:220px;padding:0 14px 0 8px;border-top:1px solid var(--line);background:linear-gradient(0deg,#f4e4dc,#fbf6ef)}
 .mode-play .host-stage{flex:0 0 auto;width:min(46vw,178px);height:100%;order:1}
 .mode-play .host-stage::before{height:92%;left:4%;right:4%}
 .mode-play .host-bubble{order:2;flex:1;align-self:center;padding:10px 12px;box-shadow:2px 2px 0 #e8d7cf}
 .mode-play .host-bubble::before{content:'';position:absolute;left:-7px;top:40%;width:12px;height:12px;background:#fffaf3;border-left:1px solid #dbc4b8;border-bottom:1px solid #dbc4b8;transform:rotate(45deg)}
 .mode-play .host-label{font-size:8px;letter-spacing:1.4px;margin-bottom:4px}
 .mode-play .host-bubble p{font-size:13px;line-height:1.4;min-height:0}
 .mode-play .host-actions button{min-height:40px;padding:6px 12px}
 .mode-play+footer{display:none}
 .guia{display:block}
 .guia-main{display:flex;flex-direction:column;touch-action:pan-y}
 .guia-host{display:none}
 .guia-titulo{font-size:26px;margin:2px 0 8px}
 .guia-clip{width:100%;max-width:330px;margin:0 auto}
 .guia-fala{display:flex;gap:10px;align-items:flex-end;padding:8px 12px 8px 6px;margin-top:10px;font-size:15px}
 .guia-fala .gf-art{width:66px;height:74px;flex:none;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
 .guia-fala canvas{display:block;image-rendering:pixelated}
 .guia-controles{margin-top:8px}
 .guia-poderes{margin-top:8px}
 dialog.guia-aberta{padding:16px 16px 14px}
}
@media(max-width:899px) and (max-height:700px){:root{--dock:118px}.mode-play .host-bubble p{font-size:12px}}
@media(min-width:600px) and (max-width:899px){:root{--dock:190px}.mode-play .host-stage{width:250px}.mode-play .helena-host{max-height:260px;padding-left:24px}.mode-play .host-bubble p{font-size:15px}}
@media(min-width:900px){.guia-fala .gf-art{display:none}}
@media(prefers-reduced-motion:reduce){.host-bubble.pop,.coach.bounce{animation:none}}

.audio-settings{border:1px solid #dbc4b8;padding:14px 18px;margin-top:20px;display:grid;grid-template-columns:1fr auto;gap:12px 16px;text-align:left}.audio-settings legend{color:var(--wine);font:600 12px "Segoe UI",sans-serif;padding:0 6px}.audio-settings label{font-size:13px;display:flex;justify-content:space-between;gap:16px;grid-column:1/-1}.audio-settings input{width:100%;accent-color:#713e53;min-height:40px}.audio-settings button{font-size:12px;min-height:40px}.audio-settings input:focus-visible{outline:2px solid #713e53;outline-offset:3px}