@property --lift { syntax: '<number>'; inherits: true; initial-value: 0; }
:root { --gx: 50; --gy: 50; --ui: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif; --gold: #f6d85c; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #071f1a; font-family: var(--ui); color: #fff7e0; overscroll-behavior: none; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(#0f3b32, #051812); }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 800px; transform-origin: 50% 50%; overflow: hidden; touch-action: none; background: #0f4036; }
#stage > div { position: absolute; }
#rotate-hint { display: none; position: fixed; inset: 0; background: #0b2d27; z-index: 99; text-align: center; padding-top: 38vh; font-size: 22px; }
#rotate-hint div { font-size: 64px; }
@media (orientation: portrait) and (max-width: 800px) { #rotate-hint { display: block; } }

/* ---------- mesa de feltro ---------- */
#mat { inset: 0; background:
  radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.09), transparent 62%),
  radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
  linear-gradient(#18614f, #0f4036); }
#mat::after { content: ''; position: absolute; inset: 12px; border: 2px dashed rgba(255,235,180,.28); border-radius: 36px; }
.emblem { position: absolute; left: 50%; top: 341px; width: 420px; margin: -210px 0 0 -210px; fill: none; stroke: rgba(255,240,190,.07); stroke-width: 3; }
.divider { position: absolute; left: 90px; right: 90px; top: 340px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,240,190,.22) 20%, rgba(255,240,190,.22) 80%, transparent); }

.slot { position: absolute; left: 0; top: 0; width: 240px; height: 336px; border-radius: 16px; border: 5px solid rgba(255,244,200,.2); background: rgba(0,0,0,.14); box-shadow: inset 0 0 30px rgba(0,0,0,.3); display: grid; place-items: center; transition: box-shadow .2s, border-color .2s, background .2s; }
.slot::before { content: attr(data-label); font: 800 34px var(--ui); letter-spacing: 4px; color: rgba(255,244,200,.26); text-align: center; }
.slot.pile { background: #1a3a85; border-color: rgba(255,255,255,.12); }
.slot.pile::before { content: ''; }
.slot.ok { border-color: #ffe27a; box-shadow: 0 0 40px 8px rgba(255,226,122,.55), inset 0 0 40px rgba(255,226,122,.3); background: rgba(255,226,122,.1); }
.slot.hot { border-color: #fff; box-shadow: 0 0 60px 16px rgba(255,255,255,.7), inset 0 0 50px rgba(255,255,255,.35); background: rgba(255,255,255,.18); }
.slot.bad { border-color: #ff7a6b; box-shadow: 0 0 40px 8px rgba(255,90,70,.5); }
#stage.trainerMode #mat { box-shadow: inset 0 0 120px 20px rgba(255,226,122,.28); }

/* ---------- carta ---------- */
#cards { inset: 0; pointer-events: none; }
.card { position: absolute; left: 0; top: 0; width: 240px; height: 336px; transform-origin: 50% 50%; pointer-events: auto; cursor: grab;
  transition: transform var(--td, .55s) cubic-bezier(.2, .85, .25, 1.06), --lift .35s; will-change: transform; --mx: var(--gx); --my: var(--gy); --glare: .3; }
.card .shadow { position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 calc(6px + var(--lift) * 40px) calc(12px + var(--lift) * 52px) rgba(0,0,0,calc(.5 + var(--lift) * .2)), 0 2px 3px rgba(0,0,0,.6); }
.card .body { position: absolute; inset: 0; }
.card.glow .shadow { box-shadow: 0 0 0 6px #ffe27a, 0 0 50px 14px rgba(255,226,122,.8), 0 8px 18px rgba(0,0,0,.6); }
.card.pulse .shadow { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 6px #ffe27a, 0 0 60px 20px rgba(255,226,122,.95), 0 8px 18px rgba(0,0,0,.6); } }
.nt, .nt * { transition: none !important; }
.face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; color: #1a1206; font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', var(--ui), sans-serif; }
.face.back { background: linear-gradient(135deg, #f7d97a, #c78b1e); padding: 9px; }
.bk { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #17338a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5); }
.swirl { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, #2a5dd0 0 9deg, #14307f 9deg 18deg); opacity: .9; }
.swirl::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 18%, rgba(8,20,70,.55) 70%); }
.ball { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px; border-radius: 50%; border: 5px solid #111; background: linear-gradient(#e8402f 0 46%, #111 46% 54%, #f6f6f6 54%); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.ball i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: #f6f6f6; border: 5px solid #111; }

.frame { position: absolute; inset: 0; padding: 11px 11px 12px; background: linear-gradient(135deg, #fbe98a, #d8a62a 38%, #f6d85c 58%, #b88a1c); }
.inner { position: relative; height: 100%; border-radius: 6px; padding: 6px 7px 5px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(170deg, var(--bg1), var(--bg2)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.t-fire { --c: #e5532d; --bg1: #fbdcc6; --bg2: #ee9d75; --sky: #ffb36b; }
.t-water { --c: #3a8fe0; --bg1: #d7ebfc; --bg2: #86bbec; --sky: #7cc3ff; }
.t-grass { --c: #4fa84a; --bg1: #dbf1c9; --bg2: #96d086; --sky: #b3e68a; }
.t-lightning { --c: #f2c21b; --bg1: #fcf3bd; --bg2: #f2d45a; --sky: #ffe66b; }
.t-psychic { --c: #a053b8; --bg1: #efd8f6; --bg2: #c995e2; --sky: #d9a0f0; }
.t-fighting { --c: #b5703a; --bg1: #eed6ba; --bg2: #cc9c70; --sky: #e6b27a; }
.t-colorless { --c: #a9a395; --bg1: #efebe1; --bg2: #cfc9bc; --sky: #f1ece0; }
.t-trainer { --c: #5b7da8; --bg1: #e5ebf3; --bg2: #b9c8dc; --sky: #a9c4e6; }
.hd { display: flex; align-items: flex-start; justify-content: space-between; min-height: 30px; }
.nm-box { min-width: 0; }
.stage { font: 700 8px/1 var(--ui); letter-spacing: .6px; color: #3a2a08; white-space: nowrap; }
.stage em { font-weight: 500; font-style: italic; letter-spacing: 0; }
.nm { font: 800 21px/1.05 'Gill Sans', 'Trebuchet MS', var(--ui), sans-serif; letter-spacing: -.3px; white-space: nowrap; }
.tr .nm, .en .nm { font-size: 19px; }
.hp { display: flex; align-items: center; gap: 3px; font: 800 18px var(--ui); color: #c11a10; white-space: nowrap; }
.hp small { font-size: 9px; margin-right: 1px; }
.art { position: relative; height: 118px; border-radius: 4px; overflow: hidden; border: 4px solid; border-color: #f4f4f4 #8e8e8e #7a7a7a #e2e2e2; box-shadow: 0 0 0 1px #333; flex: none; background: #888; }
.art.tall { height: 140px; } .art.huge { flex: 1; height: auto; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph { position: absolute; inset: 0; background: linear-gradient(#fff 0, var(--sky) 60%, var(--c)); overflow: hidden; display: grid; place-items: center; }
.ph .rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,255,255,.34) 0 7deg, transparent 7deg 16deg); }
.ph .orb { position: absolute; left: 50%; top: 56%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); }
.ph .ground { position: absolute; left: -10%; right: -10%; bottom: -26px; height: 56px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.28), rgba(0,0,0,.05)); }
.ph .ph-icon { position: relative; width: 66px; height: 66px; filter: drop-shadow(0 6px 5px rgba(0,0,0,.35)); }
.ph .ph-icon svg { width: 62%; height: 62%; }
.ph s { position: absolute; width: 6px; height: 6px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 8px 2px #fff; }
.ph s:nth-of-type(1) { left: 18%; top: 22%; } .ph s:nth-of-type(2) { right: 16%; top: 30%; width: 4px; height: 4px; } .ph s:nth-of-type(3) { left: 28%; bottom: 24%; width: 4px; height: 4px; } .ph s:nth-of-type(4) { right: 26%; bottom: 20%; }
.ph-trainer { width: 70px; height: 70px; border-radius: 50%; border: 5px solid #222; background: linear-gradient(#e8402f 0 46%, #222 46% 54%, #fff 54%); position: relative; box-shadow: 0 6px 6px rgba(0,0,0,.3); }
.ph-trainer i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: #fff; border: 4px solid #222; }
.ty { display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 -2px 2px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.55); vertical-align: middle; }
.ty svg { width: 68%; height: 68%; fill: #fff; filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.ty.fire { background: radial-gradient(circle at 35% 30%, #ff9a5b, #d63a14); } .ty.water { background: radial-gradient(circle at 35% 30%, #7cc3ff, #1f6cc4); }
.ty.grass { background: radial-gradient(circle at 35% 30%, #8fdc6a, #2f8a35); } .ty.lightning { background: radial-gradient(circle at 35% 30%, #fff08a, #d9a400); } .ty.lightning svg { fill: #3a2a00; filter: none; }
.ty.psychic { background: radial-gradient(circle at 35% 30%, #d894ee, #7c34a0); } .ty.fighting { background: radial-gradient(circle at 35% 30%, #d9a06b, #8a4e1f); }
.ty.colorless { background: radial-gradient(circle at 35% 30%, #f7f3ea, #a6a092); } .ty.colorless svg { fill: #3a3326; filter: none; }
.dex { font: italic 8.5px/1 var(--ui); text-align: center; color: #3a2a08; background: rgba(255,255,255,.35); padding: 2px 0; border-radius: 2px; }
.moves { flex: 1; display: flex; flex-direction: column; justify-content: space-around; min-height: 0; }
.mv { display: flex; align-items: center; gap: 5px; }
.cost { width: 58px; display: flex; flex-wrap: wrap; gap: 1px; flex: none; }
.cost .ty { width: 13px; height: 13px; }
.mt { flex: 1; min-width: 0; line-height: 1.05; }
.mt b { display: block; font: 800 14px var(--ui); } .mt span { display: block; font: 500 8px/1.1 var(--ui); color: #2a1f0a; }
.dm { font: 800 21px var(--ui); width: 36px; text-align: right; }
.ft { display: flex; justify-content: space-between; border-top: 1px solid rgba(0,0,0,.35); padding-top: 2px; font: 700 9px var(--ui); }
.ft > div { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; min-height: 28px; } .ft small { font: 500 7px var(--ui); text-transform: uppercase; letter-spacing: .4px; }
.ft .ty { width: 13px; height: 13px; }
.flavor { font: italic 8.5px/1.15 var(--ui); color: #3a2a08; text-align: center; min-height: 20px; }
.meta { display: flex; justify-content: space-between; font: 500 7px var(--ui); color: #4a3a18; }
.tbox { flex: 1; background: rgba(255,255,255,.72); border-radius: 4px; padding: 10px; font: 600 14px/1.25 var(--ui); display: grid; place-items: center; text-align: center; }
.tbox p { margin: 0; }
.ebot { display: flex; align-items: center; gap: 6px; font: 500 9px/1.1 var(--ui); background: rgba(255,255,255,.4); border-radius: 4px; padding: 3px 5px; min-height: 26px; }
.ebot .ty { width: 18px; height: 18px; }
.en .ph .ph-icon { width: 100px; height: 100px; }
.glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light; opacity: var(--glare);
  background: radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgba(255,255,255,.9), rgba(255,255,255,0) 55%); }
.holo .art::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--holo, .5); filter: saturate(1.3);
  background: repeating-linear-gradient(115deg, rgba(255,0,110,.55) 0 8%, rgba(255,200,0,.55) 8% 16%, rgba(0,255,150,.55) 16% 24%, rgba(0,170,255,.55) 24% 32%, rgba(170,80,255,.55) 32% 40%);
  background-size: 300% 300%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%); }
.holo .glare { opacity: calc(var(--glare) + .25); }
.holo .frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.8) 45%, transparent 60%); background-size: 250% 100%; background-position: calc(var(--mx) * 1%) 0; }

/* ---------- fichas ---------- */
#tokens { inset: 0; pointer-events: none; }
.tok { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--ui); color: #fff3e0; text-shadow: 0 1px 0 rgba(0,0,0,.45);
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #d81f12 55%, #8e0b05); box-shadow: inset 0 -3px 4px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.55), 0 3px 4px rgba(0,0,0,.55), 0 0 0 1.5px #6a0a04; transition: left .4s cubic-bezier(.3,1.4,.5,1), top .4s cubic-bezier(.3,1.4,.5,1); }
.tok.t50 { background: radial-gradient(circle at 35% 30%, #ffe08a, #f08a00 55%, #8f4d00); box-shadow: inset 0 -3px 4px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.55), 0 3px 4px rgba(0,0,0,.55), 0 0 0 1.5px #6b3a00; }
.tok.t100 { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: 13px; background: radial-gradient(circle at 35% 30%, #c4cdff, #4a5bd6 55%, #1c2677); box-shadow: inset 0 -3px 4px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.55), 0 3px 4px rgba(0,0,0,.55), 0 0 0 1.5px #151c5c; }
.tok.mk { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 13px; background: radial-gradient(circle at 35% 30%, #d9a0f0, #6d2a96); box-shadow: 0 3px 4px rgba(0,0,0,.55), 0 0 0 2px #fff4; }
.tok.mk.burn { background: radial-gradient(circle at 35% 30%, #ffb26b, #d6360f); }
.tok.mk.cond { background: radial-gradient(circle at 35% 30%, #fff, #8aa0b8); color: #1a2a3a; text-shadow: none; font-size: 11px; width: 32px; margin-left: -16px; border-radius: 13px; }
.tok.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); } .tok.out { transition: opacity .25s; opacity: 0; }
@keyframes pop { from { scale: 2.4; opacity: 0; } 60% { scale: .9; opacity: 1; } to { scale: 1; } }
#tray { right: 12px; top: 430px; width: 96px; padding: 8px 6px 8px; border-radius: 18px; background: rgba(8,24,20,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,244,200,.16); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#tray h4 { margin: 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
#tray p { margin: 0; font-size: 10px; opacity: .6; line-height: 1.1; }
.tray-item { width: 64px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,0,0,.25); touch-action: none; cursor: grab; }
.tray-item .tok { position: relative; margin: 0; transition: none; }
.tray-item .tok.t10 { transform: scale(1.4); } .tray-item .tok.t50 { transform: scale(1.4); } .tray-item .tok.t100 { transform: scale(1.3); }
.tok.drag { position: absolute; pointer-events: none; z-index: 3000; scale: 1.5; transition: none; filter: drop-shadow(0 14px 10px rgba(0,0,0,.5)); }

/* ---------- HUD ---------- */
#hud { inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; position: absolute; }
.pill { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 30px; background: rgba(8,24,20,.6); backdrop-filter: blur(6px); border: 1px solid rgba(255,244,200,.18); line-height: 1; }
.pill b { font-size: 16px; display: block; } .pill small { font-size: 11px; opacity: .75; }
.pill.opp { left: 18px; top: 14px; } .pill.me { left: 18px; top: 722px; display: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff4; background: linear-gradient(#e8402f 0 46%, #111 46% 54%, #f6f6f6 54%); }
.avatar.mine { background: linear-gradient(#3a8fe0 0 46%, #111 46% 54%, #f6f6f6 54%); }
.tr-btns { right: 16px; top: 14px; display: flex; gap: 10px; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,244,200,.3); background: rgba(8,24,20,.65); backdrop-filter: blur(6px); color: #fff7e0; font: 22px var(--ui); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.4); transition: transform .12s; }
.round:active { transform: scale(.92); }
.round.big { width: 62px; height: 62px; font-size: 24px; line-height: 1; padding-top: 6px; } .round.big small { font-size: 10px; margin-top: -2px; }
.tools { left: 18px; top: 722px; display: flex; gap: 10px; }
.cta { right: 18px; top: 730px; padding: 10px 24px; border-radius: 30px; border: 0; cursor: pointer; font: 800 20px var(--ui); color: #3a1a00; background: linear-gradient(#ffe27a, #f2a81c); box-shadow: 0 5px 0 #a8620a, 0 10px 18px rgba(0,0,0,.45); transition: transform .1s, box-shadow .1s; }
.cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #a8620a, 0 3px 8px rgba(0,0,0,.45); }
.cta.huge { position: static; font-size: 30px; padding: 12px 64px; }
#phases { left: 18px; top: 330px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 20px; background: rgba(8,24,20,.6); font-size: 12px; }
#phases .turn { margin-right: 6px; opacity: .8; } #phases button { border: 0; border-radius: 14px; padding: 2px 10px; font: 700 12px var(--ui); background: transparent; color: #fff7e0aa; cursor: pointer; }
#phases button.on { background: #ffe27a; color: #3a1a00; box-shadow: 0 0 12px rgba(255,226,122,.7); }
#coach { left: 50%; top: 46px; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 20px; border-radius: 30px; background: rgba(8,24,20,.78); backdrop-filter: blur(8px); border: 1px solid rgba(255,226,122,.5); font-size: 17px; font-weight: 700; white-space: nowrap; transition: .35s; }
#coach.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#coach button { border: 0; border-radius: 20px; padding: 5px 16px; font: 800 16px var(--ui); background: linear-gradient(#ffe27a, #f2a81c); color: #3a1a00; cursor: pointer; }
#coach button:disabled { opacity: .4; }
#toast { left: 50%; top: 640px; transform: translate(-50%, 10px); z-index: 30; padding: 8px 18px; border-radius: 20px; background: rgba(8,24,20,.85); font-weight: 700; opacity: 0; pointer-events: none; transition: .3s; white-space: nowrap; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#banner { left: 0; right: 0; top: 271px; height: 140px; z-index: 40; pointer-events: none; display: grid; place-items: center; align-content: center; opacity: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.65) 20%, rgba(0,0,0,.65) 80%, transparent); }
#banner b { font: 400 64px 'Lilita One', var(--ui); color: #ffe27a; text-shadow: 0 4px 0 #a8620a, 0 8px 20px rgba(0,0,0,.6); letter-spacing: 3px; text-transform: uppercase; }
#banner small { font-size: 20px; opacity: .85; }
#banner.show { animation: ban 1.6s both; }
@keyframes ban { 0% { opacity: 0; transform: translateX(-120px) scaleY(.4); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(120px); } }

#bubble { display: none; z-index: 50; flex-direction: column; gap: 4px; padding: 8px; border-radius: 18px; background: rgba(10,26,22,.92); backdrop-filter: blur(8px); border: 1px solid rgba(255,226,122,.45); box-shadow: 0 14px 30px rgba(0,0,0,.55); min-width: 170px; animation: bub .18s cubic-bezier(.3,1.5,.5,1); }
@keyframes bub { from { scale: .7; opacity: 0; } }
#bubble button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; padding: 8px 12px; background: rgba(255,255,255,.07); color: #fff7e0; font: 700 16px var(--ui); cursor: pointer; text-align: left; }
#bubble button:active { background: rgba(255,226,122,.35); } #bubble button:disabled { opacity: .35; }
#bubble .row { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; } #bubble .row button { flex: 1; justify-content: center; padding: 8px 10px; white-space: nowrap; }

/* ---------- overlays ---------- */
#overlay { inset: 0; z-index: 60; pointer-events: none; }
#overlay > * { pointer-events: auto; }
.backdrop { position: absolute; inset: 0; background: rgba(2,10,8,.72); backdrop-filter: blur(4px); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 420px; max-width: 1000px; max-height: 720px; padding: 22px 26px; border-radius: 26px; background: linear-gradient(#17463c, #0e3029); border: 2px solid rgba(255,226,122,.45); box-shadow: 0 30px 60px rgba(0,0,0,.6); animation: panelIn .3s cubic-bezier(.3,1.4,.5,1); }
@keyframes panelIn { from { scale: .8; opacity: 0; } }
.panel h2 { margin: 0 0 14px; font: 400 32px 'Lilita One', var(--ui); color: #ffe27a; letter-spacing: 1px; }
.panel .opt { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0; padding: 12px 16px; border-radius: 16px; border: 0; background: rgba(255,255,255,.08); color: #fff7e0; font: 700 19px var(--ui); cursor: pointer; text-align: left; }
.panel .opt:active { background: rgba(255,226,122,.3); }
.panel .opt .costs { display: flex; gap: 2px; width: 70px; } .panel .opt .costs .ty { width: 20px; height: 20px; }
.panel .opt small { display: block; font-weight: 500; font-size: 13px; opacity: .75; } .panel .opt .dmg { margin-left: auto; font: 800 28px var(--ui); color: #ffe27a; }
.grid { display: flex; flex-wrap: wrap; gap: 12px; max-width: 900px; overflow: auto; max-height: 560px; padding: 4px; }
.grid .gc { position: relative; width: 132px; height: 185px; cursor: pointer; }
.grid .gc .card { transform: scale(.55); transform-origin: 0 0; position: absolute; }
.insp { position: absolute; inset: 0; }
.insp .card { cursor: default; --glare: 1; --holo: .8; transition: transform .12s ease-out; }
.insp .info { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 220px; padding: 14px 16px; border-radius: 18px; background: rgba(8,24,20,.7); font-size: 15px; line-height: 1.5; }
.insp .info b { color: #ffe27a; }
.insp .acts { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 12px; }
.insp .acts button { border: 0; border-radius: 22px; padding: 8px 22px; font: 800 18px var(--ui); background: linear-gradient(#ffe27a, #f2a81c); color: #3a1a00; cursor: pointer; }
.insp .acts button.sec { background: rgba(255,255,255,.14); color: #fff7e0; }
/* moeda 3D */
.coin-stage { position: absolute; inset: 0; perspective: 900px; display: grid; place-items: center; }
.coin { position: relative; width: 170px; height: 170px; transform-style: preserve-3d; margin-top: 60px; }
.coin > i, .cf { position: absolute; inset: 0; border-radius: 50%; }
.coin > i { background: #b8861a; border: 3px solid #8a6210; }
.cf { backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; font: 400 54px 'Lilita One', var(--ui); color: #7a5208; background: radial-gradient(circle at 32% 28%, #fff3b0, #f2c230 45%, #b8861a); border: 6px solid #d9a521; box-shadow: inset 0 0 0 5px rgba(122,82,8,.35), inset 0 0 22px rgba(255,255,255,.4); }
.cf.h { transform: translateZ(6px); } .cf.t { transform: rotateX(180deg) translateZ(6px); }
.cf.h::before { content: ''; width: 84px; height: 84px; border-radius: 50%; border: 6px solid #8a6210; background: linear-gradient(#e8a04a 0 46%, #8a6210 46% 54%, #fff3b0 54%); box-shadow: 0 2px 3px rgba(255,255,255,.5) inset; }
.coin-shadow { position: absolute; left: 50%; top: 56%; width: 150px; height: 30px; margin-left: -75px; border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(10px); }
.coin-result { position: absolute; left: 0; right: 0; top: 150px; text-align: center; font: 400 90px 'Lilita One', var(--ui); color: #ffe27a; text-shadow: 0 6px 0 #a8620a, 0 12px 30px #000; opacity: 0; letter-spacing: 4px; }
.coin-result small { display: block; font: 700 22px var(--ui); color: #fff; text-shadow: none; letter-spacing: 0; }
.coin-result.show { animation: res .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes res { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
/* fx */
#fx { inset: 0; pointer-events: none; z-index: 45; }
.spark { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; }
.ring { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 6px solid #fff; }
.float { position: absolute; transform: translate(-50%, -50%); font: 400 46px 'Lilita One', var(--ui); color: #fff; text-shadow: 0 3px 0 #b00, 0 0 12px #f33, 0 4px 14px #000; white-space: nowrap; }
.float.heal { text-shadow: 0 3px 0 #070, 0 0 12px #3f3; }
.flash { position: absolute; inset: 0; background: #fff; animation: flash .35s both; }
@keyframes flash { from { opacity: .75; } to { opacity: 0; } }
.confetti { position: absolute; width: 10px; height: 16px; }
/* título */
#title { inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #1f7260, #0b2d27 75%); transition: opacity .6s, transform .6s; }
#title.gone { opacity: 0; transform: scale(1.1); pointer-events: none; }
.title-cards { position: absolute; inset: 0; overflow: hidden; }
.title-cards .card { cursor: default; pointer-events: none; animation: float 6s ease-in-out infinite alternate; }
@keyframes float { to { translate: 0 -22px; } }
.title-box { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 70px; border-radius: 40px; background: rgba(5,24,20,.55); backdrop-filter: blur(6px); }
.logo span { display: block; font: 400 44px 'Lilita One', var(--ui); letter-spacing: 12px; color: #fff7e0; margin-bottom: -14px; }
.logo b { font: 400 112px/1 'Lilita One', var(--ui); color: #ffe27a; text-shadow: 0 6px 0 #c4780f, 0 12px 0 #7a410a, 0 22px 30px rgba(0,0,0,.6); -webkit-text-stroke: 3px #3a1a00; paint-order: stroke fill; }
.title-box p { margin: 6px 0 14px; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; opacity: .8; }
.title-box small { opacity: .6; margin-top: 10px; }

/* ---------- cartas escaneadas (Base Set) ---------- */
.face.scan, .face.back.cb { border-radius: 12px; background: #1a1a1a; padding: 0; }
.face.scan img, .face.cb img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.face.scan .hl { position: absolute; left: 8%; top: 11.5%; width: 84%; height: 41%; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0; filter: saturate(1.3);
  background: repeating-linear-gradient(115deg, rgba(255,0,110,.55) 0 8%, rgba(255,200,0,.55) 8% 16%, rgba(0,255,150,.55) 16% 24%, rgba(0,170,255,.55) 24% 32%, rgba(170,80,255,.55) 32% 40%);
  background-size: 300% 300%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%); }
.face.scan.holo .hl { opacity: var(--holo, .45); }
.face.scan.holo::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 46%, transparent 62%); background-size: 260% 100%; background-position: calc(var(--mx) * 1%) 0; }
.face.scan .glare { z-index: 3; }

/* ---------- regras: escolha de cartas, botões de turno ---------- */
.gc.sel .card .shadow { box-shadow: 0 0 0 8px #ffe27a, 0 0 40px 12px rgba(255,226,122,.8); }
.pickbar { display: flex; gap: 10px; margin-top: 12px; } .pickbar .opt { margin: 0; justify-content: center; }
.cta.atk { right: 190px; background: linear-gradient(#ff9a7a, #e5532d); color: #fff; box-shadow: 0 5px 0 #8f2a10, 0 10px 18px rgba(0,0,0,.45); }
.cta:disabled { filter: grayscale(.6); cursor: default; }
#phases { width: auto; white-space: nowrap; }

/* faces: garante que o verso/frente nunca vazam (Safari/Firefox ignoram backface-visibility em alguns casos) */
.card.down .face.front { visibility: hidden; }

.face.back.cb { background: #1a1a1a url(../img/baseset/cardback.jpg) center / 100% 100% no-repeat; }

/* moeda fina (Chansey / verso Wizards) */
.coin { position: relative; width: 170px; height: 170px; margin-top: 60px; transform-style: flat; }
.coin .face, .coin .rim { position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center; }
.coin .rim { background: #5f7699; box-shadow: inset 0 0 0 3px #3e5174; }
.coin .face { filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }

/* contadores de dano: adesivos "10" originais (disco translúcido azul, número creme) */
.tok.t10 { width: 28px; height: 28px; margin: -14px 0 0 -14px; font: italic 800 14px/1 'Baloo 2', var(--ui); letter-spacing: -1px; color: #fff8dc; text-shadow: 0 0 2px rgba(10,20,80,.9), 0 1px 1px rgba(0,0,0,.6);
  background: radial-gradient(circle at 32% 26%, rgba(170,195,255,.55), rgba(40,70,170,.78) 55%, rgba(14,28,100,.88));
  border: 1.5px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 3px rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,40,.5), 0 2px 3px rgba(0,0,0,.55); }

/* contador de dano = recorte exato do adesivo original (img/counter10.png) */
.tok.t10 { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: url(../img/counter10.png) center / contain no-repeat; border: 0; box-shadow: none; font-size: 0; color: transparent; text-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.75)) drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.tok.t10 b { display: none; }

.tok.t10 { width: 40px; height: 40px; margin: -20px 0 0 -20px;
  filter: drop-shadow(0 0 1px #0a1650) drop-shadow(0 0 1px #0a1650) drop-shadow(0 0 1.5px #0a1650) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }

/* contador de dano: face original "10" (img/counter10_face.png) em disco, borda clara e relevo mínimo */
.tok.t10 { width: 31px; height: 31px; margin: -15.5px 0 0 -15.5px; border-radius: 50%; filter: none; font-size: 0; color: transparent;
  background: #122560 url(../img/counter10_face.png) center / 118% no-repeat;
  border: 1.5px solid rgba(244,246,255,.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1.5px 2px rgba(0,0,30,.5), 0 1.5px 2.5px rgba(0,0,0,.6); }

/* ordem de empilhamento: cartas e fichas ficam abaixo de HUD, modais e efeitos */
#cards { z-index: 3; } #tokens { z-index: 4; }
/* moeda lançada sobre o feltro, no centro da mesa */
.coin-table { position: absolute; inset: 0; pointer-events: none; }
.coin-table .coin { position: absolute; left: 880px; top: 341px; width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.coin-table .coin-shadow { position: absolute; left: 880px; top: 355px; width: 62px; height: 16px; margin-left: -31px; border-radius: 50%; background: rgba(0,0,0,.6); filter: blur(5px); }
.coin-table .coin-result { position: absolute; left: 700px; width: 360px; top: 240px; text-align: center; font: 400 46px 'Lilita One', var(--ui); color: #ffe27a; text-shadow: 0 3px 0 #a8620a, 0 6px 16px #000; letter-spacing: 3px; opacity: 0; }
.coin-table .coin-result.show { animation: res .4s cubic-bezier(.3,1.6,.5,1) both; }
#hud { z-index: 6; }

/* holográfico só no fundo da arte: máscara por carta (img/mask/N.png) — o desenho do Pokémon fica de fora */
.face.scan.holo .hl { left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; background-size: 260% 260%; }
.face.scan.holo::before { -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: .8; }

.avatar.sprite { border: 0; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: bottom center; }
.pill.opp .avatar.sprite { width: 56px; height: 56px; margin: -14px 0 -6px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }

/* avatares dos treinadores: grandes, atrás das cartas, nos cantos da mesa */
.tavatar { position: absolute; z-index: 1; background: no-repeat; background-size: contain; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); display: none; }
.tavatar.sprite { display: block; }
#oppAvatar { left: 8px; top: 4px; width: 230px; height: 170px; background-position: left top; }
#meAvatar { left: 6px; top: 612px; width: 230px; height: 186px; background-position: left bottom; }
.pill.opp { left: 326px !important; top: 6px !important; } .pill.opp .avatar { display: none; }

/* moeda pousada na mesa */
.coin-table { opacity: 0; transition: opacity .4s; z-index: 8; }
.coin-table.on { opacity: .9; }
.coin-table.need { opacity: 1; }
.coin-table .coin { cursor: pointer; }
.coin-table .halo { position: absolute; inset: -16px; border-radius: 50%; border: 4px solid #ffe27a; box-shadow: 0 0 26px 8px rgba(255,226,122,.85), inset 0 0 16px rgba(255,226,122,.6); opacity: 0; pointer-events: none; }
.coin-table.need .halo { opacity: 1; animation: coinpulse .9s ease-in-out infinite alternate; }
@keyframes coinpulse { from { transform: scale(.92); opacity: .6; } to { transform: scale(1.1); opacity: 1; } }
.coin-table .coin-tip { position: absolute; left: 790px; width: 180px; top: 392px; text-align: center; font: 800 14px var(--ui); color: #ffe27a; text-shadow: 0 2px 4px #000; pointer-events: none; }
.coin-table:not(.need) .coin { filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }

/* tapetes com arte: a arte cobre a mesa, escurecida para as casas continuarem legíveis */
#stage.art-mat #mat { background: radial-gradient(ellipse at 50% 42%, rgba(4,14,12,calc(var(--mat-tint, .5) - .12)), rgba(4,14,12,calc(var(--mat-tint, .5) + .25))), var(--mat) center / cover, #0f4036; }
#stage.art-mat .emblem { display: none; }
#stage.art-mat .slot { border-color: rgba(255,248,215,.5); background: rgba(0,0,0,.32); box-shadow: inset 0 0 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35); }
#stage.art-mat .slot::before { color: rgba(255,248,215,.5); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#stage.art-mat .slot.pile { background: #1a3a85; }
#stage.art-mat .divider { background: linear-gradient(90deg, transparent, rgba(255,248,215,.45) 20%, rgba(255,248,215,.45) 80%, transparent); }
#stage.art-mat #mat::after { border-color: rgba(255,240,190,.4); }

/* plaquinha com o nome embaixo do sprite (esconde cortes na base do desenho) */
.tavatar::after { content: attr(data-name); position: absolute; left: 4px; bottom: 4px; min-width: 128px; padding: 3px 18px 4px 12px; font: 800 17px var(--ui); letter-spacing: .5px; color: #3a1a00; background: linear-gradient(#ffe27a, #f2a81c); border-radius: 6px 16px 16px 6px; box-shadow: 0 3px 0 #a8620a, 0 6px 10px rgba(0,0,0,.5); filter: none; }
#oppAvatar::after { background: linear-gradient(#ffb09a, #e5532d); color: #fff; box-shadow: 0 3px 0 #8f2a10, 0 6px 10px rgba(0,0,0,.5); }

.fx-orb, .fx-ring, .fx-star, .fx-slash { position: absolute; border-radius: 50%; pointer-events: none; } .fx-ring { box-sizing: border-box; } .fx-bolt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .fx-slash { border-radius: 4px; }

.insp .side { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; width: 230px; }
.insp .side button { border: 0; border-radius: 22px; padding: 12px 18px; font: 800 18px var(--ui); background: linear-gradient(#ffe27a, #f2a81c); color: #3a1a00; cursor: pointer; text-align: left; box-shadow: 0 4px 10px rgba(0,0,0,.4); } .insp .side button:disabled { opacity: .4; }
/* diálogos de escolha: não herdar o .grid da coleção (screens.css) */
.panel .grid { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; max-height: 560px; overflow: auto; padding: 4px; grid-template-columns: none; }