:root{--bg:#080a0e;--card-w:min(84vw,340px);--card-h:calc(var(--card-w)*1.40)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080a0e!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff}
#app,#stage{position:relative;width:100%;height:100%;overflow:hidden}
#stage{background:radial-gradient(circle at 50% 18%,rgba(74,89,118,.18),transparent 38%),radial-gradient(circle at 50% 52%,#171d26 0,#0f1319 47%,#080a0e 84%)!important}
.hidden{opacity:0!important;pointer-events:none!important}
.chosen-card{position:absolute;z-index:20;width:var(--card-w);height:var(--card-h);left:50%;top:54%;transform:translate(-50%,-50%) translateZ(0);perspective:1400px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;filter:drop-shadow(0 22px 20px rgba(0,0,0,.58));transition:top .92s cubic-bezier(.18,.76,.2,1),transform .92s cubic-bezier(.18,.76,.2,1),opacity .18s}
.chosen-card.rising{animation:risingSway 1.05s ease-in-out both}.chosen-card.hovering{animation:hoverSway 2.8s ease-in-out infinite}.chosen-card.returning-card{animation:returnSway 1.05s ease-in-out both}
@keyframes risingSway{0%{transform:translate(-50%,-50%) rotate(2.2deg) scale(.94)}45%{transform:translate(-50%,-50%) rotate(-1.6deg) scale(.985)}100%{transform:translate(-50%,-50%) rotate(.5deg) scale(1)}}
@keyframes hoverSway{0%,100%{transform:translate(-50%,-50%) rotate(-.6deg)}50%{transform:translate(-50%,-50%) rotate(.75deg)}}
@keyframes returnSway{0%{transform:translate(-50%,-50%) rotate(.3deg)}55%{transform:translate(-50%,-50%) rotate(-1.4deg) scale(.975)}100%{transform:translate(-50%,-50%) rotate(1.5deg) scale(.92)}}
.card-face{position:absolute;inset:0;border-radius:18px;overflow:hidden;transition:transform .6s cubic-bezier(.2,.75,.25,1);background:#fff!important;border:1.5px solid #e6e6e6;box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 8px #dcdcdc;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.front{color:#151515;display:flex;align-items:center;justify-content:center;transform:rotateY(180deg) translateZ(.1px);background:linear-gradient(#fff,#fbfbfb)!important}.back{transform:rotateY(0deg) translateZ(.1px);background:#fff!important}.chosen-card.face-up .front{transform:rotateY(0deg) translateZ(.1px)}.chosen-card.face-up .back{transform:rotateY(-180deg) translateZ(.1px)}
.front-photo,.back-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}.front.photo-mode .front-generic{display:none}.front.photo-mode .front-photo{display:block!important}.front-generic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#fff,#fbfbfb)!important}.corner{position:absolute;font-family:Georgia,serif;font-weight:700;display:flex;flex-direction:column;align-items:center;line-height:.92;font-size:clamp(29px,9vw,45px)}.corner.tl{top:11px;left:13px}.corner.br{bottom:11px;right:13px;transform:rotate(180deg)}.pip{font-size:clamp(108px,34vw,168px);font-family:Georgia,serif}.front.red .front-generic{color:#c8202f}
#paintCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;background:transparent}

.fishing-line{
  position:absolute;
  z-index:23;
  left:50%;
  top:0;
  width:2px;
  height:0;
  background:linear-gradient(90deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,1) 45%, rgba(215,220,225,.96) 100%);
  box-shadow:0 0 2px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.35);
  opacity:1;
  pointer-events:none;
  transform:translateX(-50%);
  transform-origin:top center;
}
.hook-rig{
  position:absolute;
  z-index:22;
  width:30px;
  height:68px;
  left:50%;
  top:-8px;
  transform:translateX(-50%);
  pointer-events:none;
  transition:none;
}
.hook-layer-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.hook-rig.carry{animation:hookSway 2.8s ease-in-out infinite}
@keyframes hookSway{
  0%,100%{transform:translateX(-50%) rotate(-.45deg)}
  50%{transform:translateX(-50%) rotate(.55deg)}
}
.brush{position:absolute;z-index:24;width:190px;height:58px;left:55%;top:60%;transform:rotate(-24deg);transition:opacity .2s,left .045s linear,top .045s linear;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}.brush-handle{position:absolute;right:0;top:18px;width:127px;height:16px;border-radius:10px}.brush.red .brush-handle{background:linear-gradient(#d34a54,#7f131b 65%,#5c0d14)}.brush.blue .brush-handle{background:linear-gradient(#4e83eb,#1d4592 65%,#163468)}.brush-ferrule{position:absolute;left:40px;top:14px;width:36px;height:24px;border-radius:3px;background:linear-gradient(#f2f2f2,#a2a5aa 52%,#777b80)}.brush-tip{position:absolute;left:0;top:11px;width:48px;height:30px;border-radius:72% 10px 10px 72%}.brush.red .brush-tip{background:linear-gradient(90deg,#6f4325,#ee4c57 65%,#bd2430)}.brush.blue .brush-tip{background:linear-gradient(90deg,#6f4325,#4d83ef 65%,#244eac)}
#secretZone{
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:120px;
  z-index:999;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.setup{position:absolute;inset:0;z-index:100;background:rgba(3,5,8,.94);display:flex;align-items:center;justify-content:center;padding:22px}.setup-panel{width:min(560px,100%);background:#171b24;border:1px solid #303746;border-radius:20px;padding:24px;box-shadow:0 22px 60px rgba(0,0,0,.5)}.setup h1{margin:0 0 8px;font-size:28px}.setup p{opacity:.78;line-height:1.4}.selectors{display:grid;gap:12px;margin:20px 0}.selectors-3{grid-template-columns:1fr 1fr 1fr}label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:#d8dce5}select,button{font:inherit;border-radius:12px;border:1px solid #394153;padding:12px;background:#0f131a;color:#fff}.setup-actions{display:flex;gap:10px}.setup-actions button{flex:1;background:#2768db;border-color:#2768db;font-weight:700}.setup-actions .secondary{background:#232936;border-color:#394153}.setup small{display:block;margin-top:18px;opacity:.58;line-height:1.35}
@media(orientation:landscape){:root{--card-w:min(41vw,305px)}.hook-rig{width:28px;height:63px}}




/* V27 — atravessamento realista usando apenas a própria imagem do anzol.
   A zona intermédia fica oculta pela carta; a curva reaparece abaixo. */
.hook-front-rig{
  z-index:22;
  clip-path:inset(0 0 58% 0);
  -webkit-clip-path:inset(0 0 58% 0);
}
.hook-back-rig{
  z-index:22;
  clip-path:inset(48% 0 0 0);
  -webkit-clip-path:inset(48% 0 0 0);
}


/* V33 — troca real de imagem: anzol inteiro / metade superior */
.hook-back-rig{
  display:none !important;
}
.hook-front-rig{
  clip-path:none !important;
  -webkit-clip-path:none !important;
}