/* Operação Piquenique — point and click de pedido (Play a Dois) */
:root{color-scheme:dark;
  --night:#120c20; --ink:#1a1030; --panel:rgba(22,14,40,.86); --line:#6a59a0;
  --cream:#fbf3e4; --gold:#ffd27a; --pink:#ff8fc0; --text:#fff6ea; --muted:#d9cbe8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--text);font-family:'Nunito',system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}

#pq{position:fixed;inset:0;overflow:hidden;background:var(--night);cursor:crosshair}
.pq-back{position:absolute;inset:0;overflow:hidden}
.pq-back img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(18px) brightness(.4)}
.pq-scene{position:absolute;left:0;top:0}
.pq-scene img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block;transition:filter 1.2s}
.pq-scene.night img{filter:brightness(.82) saturate(1.05)}
canvas.pq-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.pq-fade{position:absolute;inset:0;background:#07040e;opacity:0;pointer-events:none;transition:opacity .6s;z-index:12}
.pq-fade.on{opacity:1;pointer-events:auto}

/* HUD */
.pq-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));pointer-events:none}
.pq-room{font:700 clamp(20px,2.7vw,30px) 'Pixelify Sans',monospace;text-shadow:0 2px 0 var(--ink),0 0 12px rgba(0,0,0,.6)}
.pq-room small{display:block;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.pq-tools{display:flex;gap:8px;pointer-events:auto}
.pq-ico{width:42px;height:42px;border-radius:8px;background:var(--panel);border:2px solid var(--line);font:700 clamp(20px,2.3vw,25px) 'Pixelify Sans',monospace;display:grid;place-items:center}
.pq-ico[aria-pressed="false"]{opacity:.55}
.pq-label{position:absolute;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);z-index:6;pointer-events:none;
  font:700 clamp(19px,2.5vw,27px) 'Pixelify Sans',monospace;color:#fff;white-space:nowrap;
  text-shadow:-2px 0 var(--ink),2px 0 var(--ink),0 -2px var(--ink),0 2px var(--ink),0 0 12px rgba(0,0,0,.6)}
.pq-label em{font-style:normal;color:var(--gold)}

/* inventário */
.pq-inv{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;display:flex;gap:6px;
  padding:6px;border-radius:10px;background:var(--panel);border:2px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:calc(100% - 24px);overflow-x:auto}
.pq-inv:empty{display:none}
.pq-slot{width:54px;height:54px;flex:0 0 54px;border-radius:7px;background:rgba(255,255,255,.06);border:2px solid transparent;display:grid;place-items:center;padding:0;position:relative}
.pq-slot canvas{width:40px;height:40px;image-rendering:pixelated}
.pq-slot.sel{border-color:var(--gold);background:rgba(255,210,122,.18);box-shadow:0 0 14px rgba(255,210,122,.4)}
.pq-slot.new{animation:pqNew 1s ease 2}
@keyframes pqNew{50%{transform:translateY(-6px) scale(1.08)}}
.pq-cursor{position:fixed;left:0;top:0;width:36px;height:36px;pointer-events:none;z-index:20;image-rendering:pixelated;display:none;transform:translate(8px,8px)}

/* falas */
.pq-say{position:absolute;z-index:7;transform:translate(-50%,-100%);width:max-content;max-width:min(480px,78vw);overflow-wrap:anywhere;text-align:center;pointer-events:none;
  font:700 clamp(19px,2.5vw,27px)/1.3 'Pixelify Sans',monospace;
  text-shadow:-2px 0 var(--ink),2px 0 var(--ink),0 -2px var(--ink),0 2px var(--ink),-2px -2px var(--ink),2px 2px var(--ink),-2px 2px var(--ink),2px -2px var(--ink)}
.pq-choices{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;width:min(560px,calc(100% - 24px));
  display:grid;gap:6px;padding:10px;border-radius:10px;background:var(--panel);border:2px solid var(--line)}
.pq-choices button{text-align:left;font:700 clamp(19px,2.3vw,25px) 'Pixelify Sans',monospace;color:#ffd9ec;background:none;border:0;padding:8px 10px;border-radius:6px}
.pq-choices button:hover,.pq-choices button:focus-visible{background:rgba(255,255,255,.08);color:#fff}

/* cartões */
.pq-card{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:rgba(8,5,16,.5);opacity:0;pointer-events:none;transition:opacity .4s}
.pq-card.on{opacity:1;pointer-events:auto}
.pq-paper{width:min(400px,100%);background:#fbf3e1;color:#33204a;border-radius:4px;padding:20px 20px 16px;display:grid;gap:10px;
  box-shadow:0 0 0 3px #33204a,0 24px 60px rgba(0,0,0,.55);transform:rotate(-1.3deg)}
.pq-paper .tag{font:700 16px 'Pixelify Sans',monospace;letter-spacing:2px;text-transform:uppercase;color:#c2477a}
.pq-paper .hand{font:600 clamp(29px,5.5vw,38px)/1.2 'Caveat',cursive}
.pq-paper .sig{font:700 28px 'Caveat',cursive;text-align:right;margin-top:-6px}
.pq-paper h2{margin:0;font:700 clamp(26px,5.6vw,34px)/1.05 'Pixelify Sans',monospace;color:#7c58c7}
.pq-btn{font:700 clamp(20px,2.3vw,25px) 'Pixelify Sans',monospace;padding:11px 18px 12px;border-radius:8px;border:2px solid #33204a;background:linear-gradient(#ffe08a,#f4b03e);color:#33204a;box-shadow:0 4px 0 #33204a}
.pq-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #33204a}
.pq-btn.ghost{background:#efe4d0}
.pq-btn.pink{background:linear-gradient(#ffb3d1,#ff7eb6)}
.pq-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* título */
.pq-title{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:20px 16px;background:radial-gradient(ellipse at 50% 55%,rgba(18,12,32,.35),rgba(18,12,32,.85));transition:opacity .8s}
.pq-title.out{opacity:0;pointer-events:none}
.pq-title .eyebrow{font:700 17px 'Pixelify Sans',monospace;color:var(--gold);letter-spacing:3px;text-transform:uppercase}
.pq-title h1{margin:0;font:700 clamp(44px,9vw,92px)/.92 'Pixelify Sans',monospace;color:#fff6e6;text-shadow:0 5px 0 var(--ink),0 0 40px rgba(255,180,220,.35)}
.pq-title p{margin:0;max-width:560px;font:600 clamp(19px,2.4vw,25px)/1.5 'Nunito',sans-serif;color:var(--cream);text-shadow:0 2px 0 var(--ink)}
.pq-title .hand{font:600 clamp(28px,4vw,36px)/1.2 'Caveat',cursive;color:#fff}

/* final */
.pq-ring{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;
  background:rgba(8,5,16,.55);opacity:0;pointer-events:none;transition:opacity .8s}
.pq-ring.on{opacity:1;pointer-events:auto}
.pq-ring canvas{image-rendering:pixelated;max-width:80vw}
.pq-ring .q{font:700 clamp(26px,5vw,44px)/1.1 'Pixelify Sans',monospace;text-align:center;text-shadow:0 4px 0 var(--ink)}
.pq-end{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity 1s}
.pq-end.on{opacity:1;pointer-events:auto}
.pq-end.side{justify-items:end;padding-right:max(24px,4vw)}
.pq-end.side .pq-paper{width:min(380px,38vw)}
.pq-hidden{display:none!important}
@media (max-height:500px){ .pq-slot{width:44px;height:44px;flex-basis:44px} .pq-slot canvas{width:32px;height:32px} .pq-ico{width:36px;height:36px} }

/* Espaço para textos ampliados em telas pequenas. */
.pq-paper{max-height:100%;overflow:auto;overflow-wrap:anywhere}
.pq-title,.pq-ring{overflow:auto;justify-content:safe center}
@media (max-width:600px){
  .pq-label{top:calc(max(10px,env(safe-area-inset-top)) + 56px);width:max-content;max-width:calc(100% - 24px);white-space:normal;text-align:center}
  .pq-end.side{justify-items:center;padding:16px}
  .pq-end.side .pq-paper{width:min(400px,100%)}
}

/* Legibilidade sobre os cenários e alvos maiores no toque. */
.pq-say {
  max-width: min(520px, calc(100vw - 28px));
  padding: 8px 14px;
  border-radius: 10px;
  background: #201431f5;
  border: 1px solid #a78cbd;
  color: #fff6ea;
  font: 800 clamp(17px, 2.1vw, 23px)/1.35 Nunito, system-ui, sans-serif;
  text-shadow: none;
}
.pq-room { line-height: 1.1; }
.pq-ico { width: 46px; height: 46px; }
.pq-choices button { min-height: 44px; }
.pq-paper .tag { font-size: 17px; }
.pq-btn:focus-visible, .pq-ico:focus-visible, .pq-slot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (max-height: 500px) {
  .pq-ico { width: 44px; height: 44px; }
  .pq-say { padding: 5px 10px; }
}