/* Prisma · camada Jogali (carrega DEPOIS de prisma.css)
 * 1) visual: brilho da fase no fundo e no campo, painéis de vidro, placar em degradê
 * 2) celular em pé  ..... o jogo inteiro cabe na tela, sem rolar: [fase | pausa] [placar | linhas | reserva] [meta] [campo | próximas] [botões]
 * 3) celular deitado ... campo com a altura toda da tela; botões de cada polegar de um lado; o menu compacto do Jogali fica no canto de cima à esquerda
 * O tamanho do campo vem só do CSS (container queries): o canvas se ajusta sozinho (ResizeObserver em prisma.js). */

/* ---------- visual (todas as telas) ---------- */
.prisma-page{background:radial-gradient(85% 46% at 50% 0%,color-mix(in srgb,var(--phase) 20%,transparent),transparent 72%),radial-gradient(70% 42% at 100% 100%,color-mix(in srgb,var(--phase-cyan) 13%,transparent),transparent 72%),#070914;background-attachment:fixed}
.board-shell{background:#080a16;border:1px solid color-mix(in srgb,var(--phase) 60%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--phase) 7%,transparent),0 0 70px color-mix(in srgb,var(--phase) 22%,transparent),0 24px 60px #0008;container-type:inline-size}
.hold-panel,.next-panel{background:linear-gradient(165deg,#ffffff10,#ffffff05);border:1px solid #ffffff16;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff12}
.score-panel>strong{background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--phase) 55%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.game-title h1{background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--phase) 50%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.goal-track{height:6px;background:#ffffff14}.goal-track div{box-shadow:0 0 12px color-mix(in srgb,var(--phase) 70%,transparent)}
.stage-intro h2{text-shadow:0 0 30px color-mix(in srgb,var(--phase) 45%,transparent)}
.board-message{font-size:clamp(15px,8cqw,26px)}
.touch-controls button{-webkit-tap-highlight-color:transparent}
.pad{display:flex;gap:9px}
.touch-controls .pad button:last-child{background:#211a34;color:#d6caf5}.touch-controls [data-action=drop]{background:linear-gradient(180deg,#b8a4ff,#8f77e6)!important;color:#170e2b!important;border-color:#d9ccff66!important}
.touch-controls [data-action=hold]{color:#ffd583}

/* ---------- celular em pé ---------- */
@media (max-width:700px) and (min-height:521px),(max-width:700px) and (orientation:portrait){
 html{height:100%;overflow:hidden}
 body.prisma-page{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 #prismaApp{flex:1;min-height:0;width:100%;max-width:none;margin:0;box-sizing:border-box;padding:6px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;gap:6px 8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 74px;grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"stage stage tools" "score stats hold" "goal goal combo" "board board next" "pad pad pad"}
 .game-heading,.arena,.left-sidebar,.right-sidebar{display:contents}
 .game-title,.stage-intro p,.phase-dots,.best-score,.hold-panel p,.hold-panel kbd,.goal-panel p,.board-bottom,.keyboard-help,.local-note,#modeLabel,#settingsButton{display:none!important}
 /* faixa da fase + botões */
 .stage-intro{grid-area:stage;justify-self:start;align-self:center;padding:0;min-width:0}
 .stage-intro .eyebrow{font-size:10px;letter-spacing:.06em}.stage-intro h2{font-size:15px;margin:2px 0 0;letter-spacing:-.2px;white-space:nowrap}
 .game-toolbar{grid-area:tools;justify-self:end;align-self:center;display:flex;gap:6px}
 .game-toolbar .quiet-button{padding:0 11px;height:34px;font-size:12px;line-height:1;border-radius:10px}
 #pauseButton{font-size:0!important;width:36px;padding:0!important}#pauseButton::first-letter{font-size:15px}
 /* placar / linhas e tempo / reserva */
 .score-panel{grid-area:score;padding:0;border:0;min-width:0}.score-panel .eyebrow{font-size:10px;letter-spacing:.08em}.score-panel>strong{font-size:26px;margin:2px 0 0;letter-spacing:-1px}
 .session-stat{grid-area:stats;display:flex;gap:14px;margin:0;align-self:center;justify-content:flex-start;font-size:10px;letter-spacing:.05em}.session-stat b{font-size:15px;line-height:1.5}
 .hold-panel{grid-area:hold;margin:0;padding:4px 6px 3px;border-radius:10px}.hold-panel .panel-label{font-size:9px;letter-spacing:.04em;justify-content:center}.hold-panel canvas{height:32px}
 /* meta da fase (barra) e sequência */
 .goal-panel{grid-area:goal;margin:0;display:flex;align-items:center;gap:8px}.goal-panel .eyebrow{font-size:10px;letter-spacing:.04em;white-space:nowrap}.goal-count{display:flex;align-items:baseline;gap:4px;margin:0;order:3;white-space:nowrap}.goal-count strong{font-size:14px}.goal-count span{display:inline;font-size:11px;margin:0}.goal-track{flex:1;order:2;min-width:30px}
 .combo-panel{grid-area:combo;margin:0;padding:0;border:0;font-size:9px;letter-spacing:0;gap:4px;justify-content:flex-end}.combo-panel strong{font-size:15px}
 /* campo (a altura vem do espaço livre, a largura segue 1:2) e próximas peças */
 .board-column{grid-area:board;container-type:size;display:grid;place-items:center;min-width:0;min-height:0}
 .prisma-page .board-shell{width:auto;min-width:0;max-width:none;height:min(100cqh,200cqw);margin:0;border-radius:10px}
 .next-panel{grid-area:next;align-self:start;margin:0;padding:8px 4px 6px;border-radius:12px}.next-panel .panel-label{font-size:9px;letter-spacing:.06em;padding:0 4px}
 .next-panel canvas{width:100%;height:auto;aspect-ratio:1/3.7;margin-top:4px}
 /* botões de toque: mover à esquerda, ações à direita */
 .touch-controls{grid-area:pad;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding-top:2px}
 .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
 .touch-controls button{min-height:52px;border-radius:12px;font-size:24px;border-color:#ffffff1a;background:#211a34;color:#d6caf5}.touch-controls button span{font-size:9px;margin-top:1px}
 /* textos da abertura proporcionais ao tamanho do campo */
}
@media (max-width:700px) and (max-height:700px) and (orientation:portrait){
 #prismaApp{gap:4px 8px;padding-top:4px}.score-panel>strong{font-size:22px}.touch-controls button{min-height:46px}.stage-intro h2{font-size:14px}
}

/* ---------- celular deitado ---------- */
@media (max-height:520px) and (orientation:landscape){
 html{height:100%;overflow:hidden}
 body.prisma-page{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 #prismaApp{flex:1;min-height:0;width:100%;max-width:none;margin:0;box-sizing:border-box;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));display:grid;gap:6px 14px;grid-template-columns:minmax(0,1fr) calc((100dvh - 12px)/2) minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) auto;grid-template-areas:". board tools" "left board right" "padl board padr"}
 .game-heading,.arena,.touch-controls{display:contents}
 .game-title,.stage-intro p,.phase-dots,.best-score,.hold-panel p,.hold-panel kbd,.goal-panel p,.board-bottom,.keyboard-help,.local-note,#modeLabel,#settingsButton{display:none!important}
 .game-toolbar{grid-area:tools;justify-self:end;align-self:start;display:flex;gap:6px}
 .game-toolbar .quiet-button{padding:0 12px;height:34px;font-size:12px;line-height:1;border-radius:10px}#pauseButton{font-size:0!important;width:36px;padding:0!important}#pauseButton::first-letter{font-size:15px}
 /* esquerda: fase, placar, linhas/tempo, reserva */
 .left-sidebar{grid-area:left;display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0}
 .stage-intro{padding:0}.stage-intro .eyebrow{font-size:10px}.stage-intro h2{font-size:15px;margin:2px 0 0}
 .score-panel{padding:0;border:0}.score-panel .eyebrow{font-size:10px}.score-panel>strong{font-size:26px;margin:2px 0 0;letter-spacing:-1px}
 .session-stat{order:3;display:flex;justify-content:flex-start;gap:22px;margin:0;font-size:10px}.session-stat b{font-size:15px;line-height:1.5}
 .hold-panel{order:4;margin:0;padding:5px 8px;width:96px;border-radius:10px}.hold-panel .panel-label{font-size:9px;justify-content:center}.hold-panel canvas{height:36px}
 /* direita: próximas (coluna) + meta + sequência */
 .right-sidebar{grid-area:right;display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:8px 12px;min-height:0;min-width:0}
 .next-panel{grid-row:1/4;margin:0;padding:6px 3px;border-radius:12px;display:flex;flex-direction:column;min-height:0}.next-panel .panel-label{font-size:9px;letter-spacing:.06em;padding:0 3px}
 .next-panel canvas{flex:1 1 0;height:0;min-height:0;width:100%;margin-top:3px}
 .goal-panel{margin:0}.goal-panel .eyebrow{font-size:10px}.goal-count{margin:4px 0 6px;display:flex;align-items:baseline;gap:5px}.goal-count strong{font-size:22px}.goal-count span{display:inline;font-size:11px;margin:0}
 .combo-panel{margin:0;padding:6px 0 0;font-size:10px;letter-spacing:0}.combo-panel strong{font-size:16px}
 /* campo com a altura toda */
 .board-column{grid-area:board;display:grid;place-items:center;min-width:0;min-height:0}
 .prisma-page .board-shell{width:calc((100dvh - 12px)/2);height:calc(100dvh - 12px);min-width:0;max-width:none;margin:0;border-radius:10px}
 /* polegares: mover na esquerda, ações na direita */
 .pad-l{grid-area:padl}.pad-r{grid-area:padr}
 .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .touch-controls button{min-height:52px;border-radius:12px;font-size:24px;border-color:#ffffff1a;background:#211a34;color:#d6caf5}.touch-controls button span{font-size:9px}
}

/* tablets e telas de toque grandes: mantém o layout de computador com os botões embaixo */
@media (pointer:coarse) and (min-width:701px) and (min-height:521px){.touch-controls{display:flex;justify-content:center;gap:22px}.touch-controls .pad{gap:9px}.touch-controls button{padding:10px 21px}}

/* ---------- tela inicial: minimalista, página inteira, sem placar nem painéis ---------- */
.start-screen{position:fixed;inset:var(--jg-bar,46px) 0 0 0;z-index:5;display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden;background:radial-gradient(75% 55% at 50% 38%,color-mix(in srgb,var(--phase) 24%,transparent),transparent 72%),radial-gradient(60% 40% at 90% 100%,color-mix(in srgb,var(--phase-cyan) 16%,transparent),transparent 70%),#070914;animation:stIn .5s ease both}
.start-screen[hidden]{display:none}
#attract{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.start-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 64% 46% at 50% 50%,#070914 28%,#070914b0 55%,transparent 82%)}   /* limpa o centro: as peças caem só nas laterais */
.start-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(330px,100%);text-align:center;animation:stCard .7s cubic-bezier(.2,1.1,.3,1) .05s both}
.start-mark{display:grid;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(2,22px);gap:3px;margin-bottom:22px;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--phase) 70%,transparent));animation:stFloat 4.5s ease-in-out infinite}
.start-mark i{border-radius:6px;background:linear-gradient(145deg,#d9ccff,var(--phase));box-shadow:inset 0 -3px 0 #0003,inset 0 2px 0 #fff6}
.start-mark i:nth-child(1){grid-column:2}.start-mark i:nth-child(2){grid-column:1;grid-row:2;background:linear-gradient(145deg,#a8f3ff,var(--phase-cyan))}.start-mark i:nth-child(3){grid-column:2;grid-row:2}.start-mark i:nth-child(4){grid-column:3;grid-row:2;background:linear-gradient(145deg,#ffd9e6,#ff789c)}
.start-title{margin:0;font-size:clamp(38px,11vw,54px);line-height:1;letter-spacing:.2em;padding-left:.2em;font-weight:800;background:linear-gradient(180deg,#fff 20%,color-mix(in srgb,var(--phase) 55%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.start-sub{margin:10px 0 28px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#b9b0d4}
.start-card .brand-button{width:100%;padding:17px 18px;font-size:16px;gap:14px;border-radius:16px;box-shadow:0 10px 34px color-mix(in srgb,var(--phase) 45%,transparent)}
.start-card .secondary-button{width:100%;padding:14px;font-size:14px;margin-top:10px;border-radius:14px}
.start-card .text-button{margin-top:6px;padding:12px;font-size:14px;color:#cfc6e8}
.start-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 16px;border-radius:99px;border:1px solid #ffffff22;background:#ffffff0d;color:#d9d1ef;font-size:13px;font-weight:600;transition:background .15s,transform .12s,border-color .15s}
.chip:hover{background:#ffffff1a;border-color:#ffffff40}.chip:active{transform:scale(.95)}.chip:focus-visible{outline:2px solid var(--phase-cyan);outline-offset:2px}.chip[hidden]{display:none}
@keyframes stIn{from{opacity:0}to{opacity:1}}@keyframes stCard{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}@keyframes stFloat{50%{transform:translateY(-6px)}}
@media (max-height:520px) and (orientation:landscape){.start-mark{display:none}.start-title{font-size:32px}.start-sub{margin:6px 0 14px;font-size:11px}.start-card{width:min(300px,100%)}.start-card .brand-button{padding:13px}.start-card .text-button{padding:8px;margin-top:2px}.start-chips{margin-top:10px}}
@media (max-height:640px) and (orientation:portrait){.start-mark{margin-bottom:12px;transform:scale(.8)}.start-sub{margin-bottom:18px}}
@media (prefers-reduced-motion:reduce){.start-screen,.start-card,.start-mark{animation:none}}