/* ============ MONTE SUA PIPOCA - estilos ============ */
.monte-sec .game-bg{background:linear-gradient(180deg,#FF8DB8 0%,#FFB4D2 45%,#CDEBFF 100%)}
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;max-width:1040px;margin:0 auto;align-items:start}

/* palco */
.stage-card{position:relative;border-radius:34px;border:6px solid #fff;overflow:hidden;box-shadow:0 12px 0 rgba(0,0,0,.12),0 30px 50px rgba(120,20,80,.28);padding:14px 14px 10px;isolation:isolate;background:#FFD3E4;position:sticky;top:96px}
.stage-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.1)),url(../img/reino-fundo.webp) center/cover}
.name-ribbon{display:flex;justify-content:center;margin-bottom:6px}
.name-ribbon span{max-width:100%;font-family:var(--f-d);font-size:clamp(1.25rem,3.6vw,1.9rem);color:var(--red);background:#fff;border:4px solid var(--pink);border-radius:999px;padding:.12em .9em;box-shadow:0 5px 0 rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-1.5deg)}
.stage-wrap{position:relative;display:grid;place-items:center}
#stage{width:100%;height:auto;max-height:min(58svh,560px);touch-action:none;user-select:none;-webkit-user-select:none;display:block;overflow:visible}
.empty-hint{position:absolute;left:50%;top:38%;translate:-50% -50%;background:#fff;color:var(--ink);font-family:var(--f-d);font-size:1.1rem;padding:.5em 1.1em;border-radius:20px;box-shadow:0 5px 0 rgba(0,0,0,.15);pointer-events:none;animation:wiggle 1.6s ease-in-out infinite;text-align:center}
.top{cursor:grab;transition:transform .55s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 3px 2px rgba(60,20,90,.3))}
.top.dragging{transition:none;cursor:grabbing;filter:drop-shadow(0 8px 6px rgba(60,20,90,.4))}
.top.dropping{pointer-events:none}
.ring{pointer-events:none;animation:spinRing 8s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spinRing{to{transform:rotate(360deg)}}
.ctl-btn{cursor:pointer}
.ctl-btn:hover circle{filter:brightness(1.12)}

/* Pipoo do jogo */
.m-pipoo{left:6px;bottom:0;width:clamp(70px,13vw,110px);pointer-events:auto;cursor:pointer}
.m-pipoo img{pointer-events:auto}
.m-pipoo .speech{bottom:92%;left:55%;font-size:.85rem;max-width:170px}

/* bandeja */
.tray-card{grid-template-columns:minmax(0,1fr);background:rgba(255,255,255,.96);border-radius:34px;padding:14px;border:6px solid #fff;box-shadow:0 12px 0 rgba(0,0,0,.12),0 30px 50px rgba(120,20,80,.22);display:grid;gap:12px}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:var(--cream);padding:5px;border-radius:20px}
.tab{display:grid;justify-items:center;gap:0;padding:6px 2px;border-radius:15px;font-family:var(--f-d);font-size:.95rem;color:var(--ink-s);transition:.2s var(--pop)}
.tab span{font-size:1.6rem;line-height:1.1}
.tab.on{background:linear-gradient(#FF8DBA,#F0488C);color:#fff;box-shadow:0 4px 0 #B72A66;transform:translateY(-2px)}
.tray-hint{text-align:center;font-weight:600;color:var(--ink-s);font-size:.95rem}
.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:330px;overflow:auto;padding:4px 2px 6px}
.pick{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;background:var(--cream);border:3px solid #FFE0A0;border-radius:20px;padding:8px 4px 6px;font-size:.82rem;font-weight:600;line-height:1.15;text-align:center;transition:transform .2s var(--pop),border-color .2s,background .2s}
.pick svg{width:100%;max-width:74px;height:64px;display:block}
.pick.cup svg{height:78px;max-width:90px}
.pick:hover{transform:translateY(-4px) rotate(-2deg) scale(1.04);border-color:var(--pink)}
.pick.on,.pick.has{border-color:var(--mint);background:#F0FFF8}
.cnt{position:absolute;top:-8px;right:-4px;min-width:24px;height:24px;border-radius:12px;background:var(--mint);color:#fff;font-family:var(--f-d);font-weight:400;font-size:.9rem;display:grid;place-items:center;padding:0 6px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.cnt:empty{display:none}
.name-box{display:grid;gap:6px}
.name-box label{font-family:var(--f-d);font-size:1.05rem}
.name-row{display:flex;gap:8px}
.name-row input{flex:1;min-width:0;font:inherit;padding:.6em 1em;border:3px solid #F2D9E4;border-radius:16px;background:#FFFBFD;color:var(--ink)}
.name-row input:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,111,168,.25)}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions-row .btn{flex:1;min-width:96px}
.actions-row .snd{width:48px;height:44px;flex:none}
.finish{display:grid;gap:10px}
.page-monte .game-cta{margin-top:50px}

@media (max-width:860px){
  .studio{display:block}
  .stage-card{position:sticky;top:64px;z-index:6;margin-bottom:16px}
  #stage{max-height:33svh}
  .stage-card{padding:8px 8px 6px;border-width:4px;border-radius:26px}
  .name-ribbon{margin-bottom:2px}
  .name-ribbon span{font-size:1.05rem}
  .m-pipoo{width:64px}
  .tray{max-height:none;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:420px){
  .tray-card{padding:10px;border-width:4px;border-radius:26px}
  .tray{gap:7px}
  .pick{font-size:.72rem;padding:6px 2px 5px;border-width:2px;border-radius:16px}
  .pick svg{height:46px;max-width:60px}
  .pick.cup svg{height:62px;max-width:76px}
  .cnt{min-width:20px;height:20px;font-size:.8rem;top:-6px;right:-2px}
  .tab{font-size:.85rem}
  .tab span{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .ring,.empty-hint{animation:none}
}

.monte-sec{overflow:clip}

.tray-card .btn{white-space:normal;text-align:center;line-height:1.15}
@media (max-width:420px){.finish .btn{font-size:1.05rem;padding:.65em .8em}}

.tray-card,.stage-card,.studio{max-width:100%}
.pick{min-width:0}
