/* Hold the Gate's screens (gate.js builds them). Same soft UI as the town, fishing and cooking: cream cards, Fredoka, ink
   outlines; orange is the one thing to look at, teal is calm, gold is reward. Rules from the design (section 3): the three
   buttons sit at thumb height (72 / 96 / 72 px, 16 px gaps, nothing else tappable within 24 px); the lantern row is the
   only health bar and the ult ring the only progress bar; every tap answers on the next frame. */

/* the town's buttons step aside while the gate is open */
body.gate .top, body.gate .side, body.gate .bottom, body.gate .sign, body.gate #prompt, body.gate #hint, body.gate #say { opacity: 0 !important; pointer-events: none !important; }
body.gate .top *, body.gate .side *, body.gate .bottom *, body.gate #menu { pointer-events: none !important; }
body.gate #menu { display: none !important; }
body.gate .fx-kidmark { display: none; }

.gt { position: fixed; z-index: 48; font-family: "Fredoka", system-ui, sans-serif; color: var(--ink, #4a3a30); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body:not(.gate) .gt, body:not(.gate) .gt *, body:not(.gate) .gt-root * { visibility: hidden !important; pointer-events: none !important; }   /* gone in town: nothing invisible catches a town tap */
.gt button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; border: 0; touch-action: manipulation; }
.gt-ic { width: 1em; height: 1em; display: block; }

.gt-fade { inset: 0; background: #2a2850; opacity: 0; pointer-events: none; z-index: 70; transition: opacity .25s; }
.gt-fade.on { opacity: 1; }
.gt-vig { inset: 0; pointer-events: none; z-index: 47; --d: 0; background: radial-gradient(ellipse at 50% 50%, rgba(10,5,40,0) 55%, rgba(10,5,40,calc(var(--d) * 3.2)) 100%); transition: background .6s; }
.gt-vig.ice { box-shadow: inset 0 0 90px 10px rgba(150,220,255,.55); }
.gt-flash { inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 62; }
.gt-flash.on { animation: gtFlash .38s ease-out; }
.gt-flash.on.rally, .gt-flash.on.rallygo { background: #ffd54a; }
.gt-flash.on.deepfreeze { background: #bfe6ff; }
.gt-flash.on.starfall { background: #ffb36b; }
@keyframes gtFlash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ---------- the top bar ---------- */
.gt-top { z-index: 58; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 10px 0; display: grid; gap: 6px 8px; pointer-events: none;
  grid-template-columns: auto 1fr auto; grid-template-areas: "town wave gold" "lants lants lants"; align-items: center; }
.gt-btn, .gt-wave, .gt-gold { pointer-events: auto; background: var(--card, #fffdf7); border-radius: 999px; box-shadow: var(--shadow, 0 8px 22px rgba(70,45,20,.16)); font-weight: 600; font-size: 16px; }
.gt-town { grid-area: town; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px 9px 9px; min-height: 44px; }
.gt-town .gt-ic { width: 22px; height: 22px; }
.gt-town:active { transform: scale(.96); }
.gt-wave { grid-area: wave; justify-self: center; padding: 10px 16px; pointer-events: none; font-size: 16px; background: rgba(255,253,247,.94); }
.gt-wave b { font-weight: 700; white-space: nowrap; }
.gt-gold { grid-area: gold; display: flex; align-items: center; gap: 6px; padding: 9px 14px 9px 10px; pointer-events: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.gt-coin { width: 22px; height: 22px; color: #ffc53d; display: inline-block; }
.gt-gold.bump { animation: gtBump .35s cubic-bezier(.2,.9,.3,1.6); }
@keyframes gtBump { 40% { transform: scale(1.18); background: #ffe9a0; } }
.gt-lants { grid-area: lants; justify-self: center; display: flex; gap: 5px; background: rgba(30,26,62,.55); padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.gt-lants i { width: 15px; height: 20px; position: relative; display: block; }
.gt-lants i u { position: absolute; inset: 4px 1px 0; border-radius: 4px 4px 7px 7px; background: #3c3a4c; transition: background .3s, box-shadow .3s; border: 1.5px solid #1c1a2e; }
.gt-lants i::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 5px; border-radius: 3px 3px 0 0; background: #6a6784; }
.gt-lants i.on u { background: radial-gradient(circle at 50% 40%, #fff6c9, #ffcf4a 70%); box-shadow: 0 0 9px 2px rgba(255,200,70,.85); border-color: #a86a14; }
.gt-lants i.out { animation: gtSway .7s ease-out; }
.gt-lants i.flare { animation: gtFlare .6s ease-out; }
@keyframes gtSway { 0% { transform: rotate(0); } 20% { transform: rotate(-22deg) translateY(2px); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-7deg); } 100% { transform: rotate(0); } }
@keyframes gtFlare { 0% { transform: scale(1.7); filter: brightness(1.8); } 100% { transform: scale(1); filter: none; } }
.gt-boss { left: 50%; top: calc(98px + env(safe-area-inset-top)); width: min(320px, 70vw); height: 22px; transform: translateX(-50%); border-radius: 999px; background: rgba(30,26,62,.7); border: 2px solid #fffdf7; display: none; pointer-events: none; overflow: hidden; z-index: 57; }
.gt-boss.on { display: block; }
.gt-boss i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#ffe04a, #ff9a3a); transition: width .15s; }
.gt-boss span { position: absolute; inset: 0; text-align: center; font-size: 13px; font-weight: 700; line-height: 20px; color: #2a2430; }

/* ---------- banners and the combo ---------- */
.gt-banner { left: 50%; top: 24%; transform: translate(-50%, -20px) scale(.9); opacity: 0; pointer-events: none; z-index: 59; white-space: nowrap; font-weight: 700; font-size: 30px; color: #fffdf7;
  background: rgba(40,34,84,.88); padding: 10px 26px; border-radius: 999px; border: 3px solid #fffdf7; box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.gt-banner.on { animation: gtBanner 1.4s cubic-bezier(.2,.9,.3,1.2) forwards; opacity: 1; }
.gt-banner.boss { background: #5a2a46; font-size: 34px; } .gt-banner.mini { background: #6a4a20; }
.gt-banner.clear { background: #2f7d6a; font-size: 24px; } .gt-banner.win { background: #c98a1a; font-size: 34px; }
.gt-banner.ult { font-size: 36px; background: rgba(60,40,10,.9); border-color: #ffd54a; color: #ffe9a0; }
.gt-banner.ult.deepfreeze { background: rgba(20,60,100,.92); border-color: #bfe6ff; color: #dff3ff; }
.gt-banner.ult.starfall { background: rgba(90,30,10,.92); border-color: #ffb36b; }
@keyframes gtBanner { 0% { transform: translate(-50%, -24px) scale(.8); opacity: 0; } 14% { transform: translate(-50%, 0) scale(1.06); opacity: 1; } 22% { transform: translate(-50%, 0) scale(1); } 85% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -8px) scale(1); opacity: 0; } }
.gt-combo { left: 50%; top: 33%; transform: translateX(-50%); pointer-events: none; opacity: 0; text-align: center; z-index: 59; }
.gt-combo.on { animation: gtCombo 1.8s ease-out forwards; }
.gt-combo b { display: block; font-size: 40px; color: #ffe04a; -webkit-text-stroke: 2px #4a3a30; paint-order: stroke fill; text-shadow: 0 4px 0 #4a3a30; }
.gt-combo span { display: inline-block; font-size: 18px; font-weight: 600; background: #fffdf7; padding: 4px 14px; border-radius: 999px; box-shadow: var(--shadow); }
.gt-combo small { display: block; margin-top: 4px; font-size: 14px; color: #fffdf7; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
@keyframes gtCombo { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 12% { transform: translateX(-50%) scale(1.15); opacity: 1; } 20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-18px); opacity: 0; } }

/* ---------- names and floating numbers pinned to the world ---------- */
.gt-tags, .gt-floats { inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.gt-tag { max-width: 124px; overflow: hidden; text-overflow: ellipsis; position: absolute; left: 0; top: 0; will-change: transform; font-weight: 700; font-size: 12px; white-space: nowrap; color: #2a2430; background: var(--pc, #fff); padding: 2px 9px; border-radius: 999px; border: 2px solid #fffdf7; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.gt-tag.me { font-size: 14px; padding: 3px 11px 3px; }
.gt-tag.me .arrow { position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #fffdf7; border-bottom: 0; animation: gtArrow .9s ease-in-out infinite alternate; }
@keyframes gtArrow { to { transform: translateY(4px); } }
.gt-float { position: absolute; left: 0; top: 0; will-change: transform, opacity; font-weight: 700; font-size: 17px; color: #fffdf7; text-shadow: 0 2px 0 rgba(40,20,0,.55), 0 0 6px rgba(0,0,0,.4); white-space: nowrap; }
.gt-float.gold { color: #ffd54a; font-size: 18px; }
.gt-float.spell { font-size: 13px; background: rgba(30,26,62,.7); padding: 2px 9px; border-radius: 999px; text-shadow: none; }
.gt-float.emote { font-size: 22px; background: #fffdf7; color: #4a3a30; padding: 3px 14px; border-radius: 999px; text-shadow: none; box-shadow: var(--shadow); }

/* ---------- teammates, emotes ---------- */
.gt-chips { z-index: 55; left: 10px; right: 62px; bottom: calc(18px + 96px + 28px + env(safe-area-inset-bottom)); display: flex; gap: 6px; pointer-events: none; }
.gt-chip { flex: 1 1 0; min-width: 0; height: 46px; display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255,253,247,.94); border-radius: 14px; border: 2px solid var(--pc, #fff); box-shadow: 0 4px 10px rgba(0,0,0,.25); position: relative; --u: 0%; }
.gt-chip .ring { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#ffc53d var(--u), rgba(74,58,48,.18) 0); }
.gt-chip .ring i { width: 26px; height: 26px; border-radius: 50%; background: var(--hc); display: grid; place-items: center; color: #fffdf7; }
.gt-chip .ring i svg { width: 16px; height: 16px; }
.gt-chip.full .ring { box-shadow: 0 0 0 2px #ffd54a, 0 0 12px #ffd54a; animation: gtPulseS .9s ease-in-out infinite alternate; }
.gt-chip .nm { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gt-chip .nm b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.gt-chip .dots { display: flex; gap: 4px; } .gt-chip .dots u { width: 9px; height: 9px; border-radius: 50%; background: #59c9a5; display: block; transition: background .15s; } .gt-chip .dots u.cool { background: #b7aea3; }
.gt-chip em { position: absolute; right: -4px; top: -6px; width: 17px; height: 17px; background: #8b7a6b; color: #fffdf7; border-radius: 50%; display: grid; place-items: center; }
.gt-chip em svg { width: 11px; height: 11px; }
.gt-chip .tk { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: #3dbb78; color: #fff; display: none; place-items: center; }
.gt-chip .tk svg { width: 13px; height: 13px; }
.gt-chip.ready .tk { display: grid; animation: gtBump .35s; }
.gt-chip .took { position: absolute; inset: 0; border-radius: 12px; background: #fffdf7; display: none; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.05; padding: 2px 4px; }
.gt-chip.flipcard .took { display: flex; animation: gtFlip .3s ease-out; }
.gt-chip.evolved .ring i { box-shadow: 0 0 0 2px #ffd54a; animation: gtSpin 1.4s linear infinite; }
@keyframes gtSpin { to { transform: rotate(360deg); } }
@keyframes gtFlip { from { transform: rotateX(90deg); } }
@keyframes gtPulseS { to { transform: scale(1.1); } }
.gt-emotes { z-index: 56; right: 10px; bottom: calc(18px + 96px + 32px + env(safe-area-inset-bottom)); }
.gt-emo { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,253,247,.94); box-shadow: 0 4px 10px rgba(0,0,0,.25); display: grid; place-items: center; padding: 0; }
.gt-emo svg { width: 26px; height: 26px; color: #4a3a30; }
.gt-emo.cool { opacity: .5; }
.gt-emopop { position: absolute; right: 0; bottom: 50px; display: none; flex-direction: column; gap: 6px; }
.gt-emopop.on { display: flex; }
.gt-emopop button { min-width: 78px; padding: 9px 14px; border-radius: 999px; background: #fffdf7; font-weight: 700; font-size: 16px; box-shadow: var(--shadow); }
.gt-emopop button:active { transform: scale(.94); }

/* ---------- the three buttons ---------- */
.gt-btns { z-index: 56; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; transition: opacity .25s, transform .25s; }
.gt-btns.sec { opacity: .38; pointer-events: none; }
.gt-spell, .gt-ult { position: relative; border-radius: 50%; padding: 0; color: #fffdf7; background: var(--bc, #888); flex: none; width: 72px; height: 72px;
  box-shadow: 0 6px 0 rgba(30,20,60,.45), 0 10px 20px rgba(0,0,0,.35); touch-action: none; transition: background .12s, filter .12s; }
.gt-ult { width: 96px; height: 96px; }
.gt-spell .g, .gt-ult .g { width: 36px; height: 36px; margin: auto; position: relative; z-index: 2; filter: drop-shadow(0 2px 0 rgba(0,0,0,.28)); }
.gt-ult .g { width: 48px; height: 48px; }
.gt-spell .ring, .gt-ult .ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1; }
.gt-spell em, .gt-ult em { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 7px; font-style: normal; font-size: 12px; font-weight: 600; color: #fffdf7; text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; pointer-events: none; }
.gt-spell .cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 700; z-index: 3; color: #fffdf7; text-shadow: 0 2px 4px rgba(0,0,0,.6); pointer-events: none; }
/* cooling: grey, with a clockwise sweep and the seconds inside */
.gt-spell.cool { background: #55526e; filter: saturate(.5); }
.gt-spell.cool .g { opacity: .25; }
.gt-spell.cool .ring { background: conic-gradient(var(--bc) var(--p), rgba(20,16,40,.35) 0); opacity: .75; }
.gt-spell.ready { animation: gtPulse .6s ease-in-out infinite alternate; box-shadow: 0 6px 0 rgba(30,20,60,.45), 0 0 0 4px rgba(255,255,255,.85), 0 10px 24px rgba(0,0,0,.4); }
@keyframes gtPulse { to { transform: scale(1.08); } }
.gt-spell.idle, .gt-ult.idle { filter: saturate(.4) brightness(.8); }
/* the ult: a ring that fills, gold and slow-pulsing when full */
.gt-ult { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bc, #aaa) 80%, #fff), var(--bc, #aaa)); }
.gt-ult .ring { inset: -8px; background: conic-gradient(#ffc53d var(--p), rgba(255,255,255,.28) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.gt-ult.cool, .gt-ult.idle { background: #5b5878; filter: none; } .gt-ult.cool .g, .gt-ult.idle .g { opacity: .5; }
.gt-ult.ready { animation: gtPulseU .9s ease-in-out infinite alternate; box-shadow: 0 6px 0 rgba(30,20,60,.45), 0 0 0 4px #ffd54a, 0 0 30px 6px rgba(255,213,74,.85); }
.gt-ult.ready .ring { background: #ffd54a; }
@keyframes gtPulseU { to { transform: scale(1.12); } }
.gt-ult.evo::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px dashed #fff3b0; animation: gtSpin 6s linear infinite; pointer-events: none; }
.gt-spell.sq, .gt-ult.sq { animation: gtSq .18s ease-out; }
@keyframes gtSq { 0% { transform: scale(1); } 30% { transform: scale(.9); } 100% { transform: scale(1); } }
.gt-spell.no, .gt-ult.no { animation: gtNo .22s linear; }
@keyframes gtNo { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gt-spell.flip, .gt-ult.flip { animation: gtFlipB .5s ease-out; }
@keyframes gtFlipB { 0% { transform: rotateY(90deg) scale(1.2); } 100% { transform: none; } }

/* ---------- the lobby: Wren's line, a hat, Ready ---------- */
.gt-lobby, .gt-shop { z-index: 57; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); opacity: 0; transform: translateY(40px); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.2); }
.gt-lobby.on, .gt-shop.on { opacity: 1; transform: none; pointer-events: auto; }
.gt-lobby { display: flex; flex-direction: column; gap: 10px; }
.gt-wren { background: #fffdf7; border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow); border: 2.5px solid #4a3a30; font-size: 15px; line-height: 1.25; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.gt-wren b { color: #2f9fa8; font-size: 13px; } .gt-wren span.pop { animation: gtPop .3s ease-out; }
@keyframes gtPop { from { opacity: 0; transform: translateY(6px); } }
.gt-hats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gt-hat { background: #fffdf7; border-radius: 16px; padding: 10px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--shadow); border: 3px solid transparent; min-height: 96px; }
.gt-hat .hi { width: 34px; height: 34px; color: var(--hc); }
.gt-hat b { font-size: 16px; } .gt-hat small { font-size: 11px; color: #8b7a6b; line-height: 1.1; text-align: center; }
.gt-hat.on { border-color: #ff8a3d; background: #fff3e6; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(255,138,61,.35); }
.gt-hat:active { transform: scale(.96); }
.gt-go { width: 100%; min-height: 56px; border-radius: 999px; background: #ff8a3d; color: #fff; font-size: 22px; font-weight: 700; box-shadow: 0 5px 0 #c4621f, 0 10px 20px rgba(0,0,0,.25); }
.gt-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #c4621f; }
.gt-go.alt { background: #fffdf7; color: #4a3a30; box-shadow: 0 5px 0 #cfc3b2, 0 10px 20px rgba(0,0,0,.2); font-size: 18px; }
.gt-row { display: flex; gap: 10px; } .gt-row .gt-go { flex: 1; font-size: 18px; padding: 8px 10px; line-height: 1.1; }

/* ---------- the break: three cards, a clock, Ready ---------- */
.gt-shop { background: rgba(255,253,247,.97); border-radius: 22px; padding: 10px 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); border: 2.5px solid #4a3a30; display: flex; flex-direction: column; gap: 8px; }
.gt-shophead { display: flex; justify-content: space-between; align-items: center; font-size: 17px; padding: 0 4px; }
.gt-shopgold { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.gt-timer { height: 7px; background: rgba(74,58,48,.15); border-radius: 99px; overflow: hidden; } .gt-timer i { display: block; height: 100%; width: 100%; background: #2f9fa8; transition: width .12s linear; }
.gt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gt-cardb { background: #fff; border-radius: 16px; padding: 8px 5px 7px; min-height: 142px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 0 #d9cdbc, 0 6px 14px rgba(0,0,0,.15); border: 2.5px solid #eadfcc; position: relative; text-align: center; }
.gt-cardb.mine { border-color: #ffc53d; background: #fffaf0; }
.gt-cardb .ci { width: 38px; height: 38px; border-radius: 50%; background: #2f9fa8; color: #fff; display: grid; place-items: center; }
.gt-cardb.mine .ci { background: #ff8a3d; } .gt-cardb .ci svg { width: 22px; height: 22px; }
.gt-cardb b { font-size: 14px; line-height: 1.05; } .gt-cardb small { font-size: 11px; line-height: 1.1; color: #6b5a4c; flex: 1; }
.gt-cardb .price { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; background: #fff3e6; border-radius: 999px; padding: 3px 11px; }
.gt-cardb .gt-coin { width: 17px; height: 17px; } .gt-cardb .ck { width: 16px; height: 16px; color: #3dbb78; }
.gt-cardb.poor .price { background: #eee; color: #a09080; } .gt-cardb.poor { opacity: .72; }
.gt-cardb.got { background: #e8f8ee; border-color: #3dbb78; } .gt-cardb.got .price { background: #3dbb78; color: #fff; } .gt-cardb.got .ck { color: #fff; }
.gt-cardb.flip { animation: gtFlip .35s ease-out; } .gt-cardb.no { animation: gtNo .22s linear; }
.gt-cardb:active { transform: translateY(2px); }
.gt-cardb .stars { display: flex; gap: 3px; } .gt-cardb .stars s { width: 9px; height: 9px; border-radius: 50%; background: #ddd2c2; display: block; } .gt-cardb .stars s.f { background: #ffc53d; }
.gt-readybtn { min-height: 52px; font-size: 22px; } .gt-readybtn.done { background: #3dbb78; box-shadow: 0 5px 0 #26864f; pointer-events: none; }
.gt-readybtn.done::before { content: "\2713  "; }

/* ---------- reveal, win, lose, ask ---------- */
.gt-reveal { inset: 0; display: none; place-items: start center; padding-top: 24vh; pointer-events: none; z-index: 63; }
.gt-reveal.on { display: grid; }
.gt-revbox { background: rgba(30,26,62,.94); color: #fffdf7; border: 4px solid #ffd54a; border-radius: 26px; padding: 18px 22px 16px; width: min(86vw, 380px); text-align: center; box-shadow: 0 0 60px rgba(255,213,74,.6); animation: gtReveal .5s cubic-bezier(.2,.9,.3,1.3); }
.gt-revbox .spin { width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle, #fff3b0, #ffc53d); display: grid; place-items: center; color: #5a3a00; animation: gtSpin 1.1s ease-out; }
.gt-revbox .rg { width: 52px; height: 52px; } .gt-revbox b { font-size: 24px; line-height: 1.12; display: block; } .gt-revbox small { display: block; margin-top: 6px; font-size: 14px; opacity: .85; }
@keyframes gtReveal { from { transform: scale(.4); opacity: 0; } }
.gt-card { inset: 0; display: none; place-items: center; background: rgba(20,16,50,.55); z-index: 64; padding: 14px; overflow: auto; }
.gt-card.on { display: grid; }
.gt-cardbox { background: #fffdf7; border-radius: 26px; border: 3px solid #4a3a30; padding: 20px 18px 18px; width: min(94vw, 430px); text-align: center; box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 12px; animation: gtReveal .4s cubic-bezier(.2,.9,.3,1.3); }
.gt-cardbox h2 { font-size: 26px; line-height: 1.12; margin: 0; font-weight: 700; }
.gt-cardbox.win h2 { color: #c98a1a; font-size: 32px; } .gt-cardbox .zz { font-size: 30px; font-weight: 700; color: #8b7a6b; letter-spacing: 4px; animation: gtFloatZ 2.4s ease-in-out infinite; }
@keyframes gtFloatZ { 50% { transform: translateY(-8px); opacity: .5; } }
.gt-cardbox .wren { font-size: 15px; line-height: 1.25; margin: 0; background: #f6efe2; border-radius: 14px; padding: 8px 12px; text-align: left; } .gt-cardbox .wren b { color: #2f9fa8; margin-right: 4px; }
.gt-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gt-stats li { display: flex; align-items: center; gap: 10px; background: #f6efe2; border-radius: 14px; padding: 6px 12px 6px 8px; border-left: 6px solid var(--pc); text-align: left; }
.gt-stats li.me { background: #fff3d6; } .gt-stats i { width: 32px; height: 32px; border-radius: 50%; background: var(--pc); display: grid; place-items: center; color: #2a2430; flex: none; } .gt-stats .hi { width: 20px; height: 20px; }
.gt-stats span { flex: 1; font-size: 17px; min-width: 0; } .gt-stats span em { font-size: 11px; font-style: normal; margin-left: 6px; color: #8b7a6b; }
.gt-stats strong { font-size: 24px; text-align: right; line-height: 1; } .gt-stats strong small { display: block; font-size: 11px; font-weight: 500; color: #8b7a6b; }
.gt-card .prize { background: #fff3d6; border: 2px solid #ffc53d; border-radius: 16px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; } .gt-card .prize svg { width: 30px; height: 30px; color: #ffc53d; } .gt-card .prize small { font-size: 13px; color: #6b5a4c; }
.gt-ask { inset: 0; display: none; place-items: center; background: rgba(20,16,50,.55); z-index: 66; }
.gt-ask.on { display: grid; }
.gt-askbox { background: #fffdf7; border-radius: 22px; border: 3px solid #4a3a30; padding: 18px; width: min(90vw, 360px); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.gt-askbox b { font-size: 24px; } .gt-askbox p { margin: 0; font-size: 15px; color: #6b5a4c; }

/* ---------- landscape: wave and lanterns top left, gold top right, chips under it, buttons bottom right ---------- */
@media (min-aspect-ratio: 9/10) {
  .gt-top { grid-template-columns: auto auto auto 1fr auto; grid-template-areas: "town wave lants . gold"; }
  .gt-wave { justify-self: start; }
  .gt-boss { top: calc(62px + env(safe-area-inset-top)); }
  .gt-chips { left: auto; right: 10px; top: calc(66px + env(safe-area-inset-top)); bottom: auto; width: 170px; flex-direction: column; }
  .gt-chip { flex: none; }
  .gt-emotes { right: 190px; top: calc(70px + env(safe-area-inset-top)); bottom: auto; }
  .gt-emopop { bottom: auto; top: 48px; }
  .gt-btns { left: auto; right: 24px; transform: none; bottom: calc(24px + env(safe-area-inset-bottom)); }
  .gt-banner { top: 22%; font-size: 26px; } .gt-banner.boss, .gt-banner.win { font-size: 30px; }
  .gt-lobby, .gt-shop { left: auto; right: 16px; width: min(480px, 54vw); }
  .gt-lobby { bottom: 12px; }
  .gt-cardb { min-height: 118px; padding: 6px 4px; } .gt-cardb small { font-size: 10.5px; }
  .gt-hat { min-height: 84px; }
  .gt-card .gt-cardbox { width: min(94vw, 520px); gap: 8px; padding: 12px 16px; } .gt-cardbox h2 { font-size: 22px; } .gt-cardbox.win h2 { font-size: 26px; }
  .gt-stats li { padding: 3px 10px 3px 8px; } .gt-stats strong { font-size: 20px; }
}
@media (max-height: 460px) {
  .gt-wren { font-size: 13px; padding: 6px 10px; } .gt-go { min-height: 46px; font-size: 19px; }
  .gt-shop { gap: 5px; padding: 8px; } .gt-cardb { min-height: 100px; } .gt-cardb .ci { width: 28px; height: 28px; } .gt-cardb .ci svg { width: 17px; height: 17px; }
  .gt-hat { min-height: 66px; padding: 5px 4px; } .gt-hat small { display: none; }
  .gt-stats .hi { width: 16px; height: 16px; } .gt-stats i { width: 26px; height: 26px; }
  .gt-cardbox .wren { font-size: 12.5px; padding: 5px 9px; } .gt-card .prize { padding: 4px 8px; } .gt-card .prize svg { width: 20px; height: 20px; }
}
@media (max-aspect-ratio: 9/10) { body.gt-break .gt-chips { bottom: calc(var(--shop-h, 270px) + 22px + env(safe-area-inset-bottom)); } body.gt-break .gt-emotes { bottom: calc(var(--shop-h, 270px) + 26px + env(safe-area-inset-bottom)); } body.gt-break .gt-btns { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gt-spell.ready, .gt-ult.ready, .gt-chip.full .ring, .gt-lants i, .gt-tag .arrow { animation: none !important; } }

body.gt-lobbying .gt-chips, body.gt-lobbying .gt-emotes, body.gt-lobbying .gt-btns { opacity: 0; pointer-events: none; }
@media (min-aspect-ratio: 9/10) { .gt-tag { translate: -58px 30px; } .gt-tag.me .arrow { left: auto; right: -12px; top: 50%; margin: -7px 0 0; border: 7px solid transparent; border-left-color: #fffdf7; border-right: 0; } }
@media (min-aspect-ratio: 9/10) { body.gt-break .gt-chips { flex-direction: row; width: 470px; top: calc(64px + env(safe-area-inset-top)); } body.gt-break .gt-chip { flex: 1 1 0; } body.gt-break .gt-emotes { right: 492px; top: calc(66px + env(safe-area-inset-top)); } }
.gt-nudge { background: #fff3d6; border: 2.5px solid #ffc53d; border-radius: 16px; padding: 8px 12px; font-size: 15px; font-weight: 600; line-height: 1.2; color: #4a3a30; box-shadow: var(--shadow); }
.gt-nudge[hidden] { display: none; }

/* a late joiner watching from the wall until the next break (shared runs) */
.gt-watch { position: fixed; left: 50%; top: calc(112px + var(--st, 0px)); transform: translateX(-50%); z-index: 62; pointer-events: none; display: none; max-width: 90vw; text-align: center;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px; background: rgba(74,58,48,.85); color: #fff; padding: 7px 14px; border-radius: 999px; }
body.gt-watching .gt-watch { display: block; }
.gt-go.wait { opacity: .75; }

/* damage numbers: they pop, arc and fall (gate.js moves them) */
.gt-float.dmg { font-size: 22px; font-weight: 700; color: #fffdf7; -webkit-text-stroke: 3px #3a2a1a; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0,0,0,.35); letter-spacing: .5px; }
.gt-float.dmg.big { font-size: 34px; color: #ffe04a; -webkit-text-stroke: 4px #5a2a0a; }
.gt-float.dmg.small { font-size: 15px; -webkit-text-stroke: 2.5px #3a2a1a; opacity: .9; }

/* ============ round 2 (Nov 2): four ability buttons around the ult, level pips, upgrade cards with iconography, no gold ============ */
.gt-top { grid-template-columns: 1fr auto 1fr; grid-template-areas: "town wave ." "lants lants lants"; }
.gt-btns { left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: block; width: 300px; height: 158px; gap: 0; }
.gt-btns .gt-spell, .gt-btns .gt-ult { position: absolute; margin: 0; }
.gt-btns .gt-ult { left: 102px; bottom: 0; }
#gtS1 { left: 14px; bottom: 0; } #gtS2 { right: 14px; bottom: 0; }
#gtS3 { left: 7px; bottom: 90px; width: 66px; height: 66px; } #gtS4 { right: 7px; bottom: 90px; width: 66px; height: 66px; }
.gt-spell .g { width: 30px; height: 30px; margin-top: 11px; }
#gtS3 .g, #gtS4 .g { width: 28px; height: 28px; margin-top: 10px; }
.gt-spell em { top: auto; bottom: 7px; margin: 0; max-width: 62px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 600; letter-spacing: .2px; z-index: 3; }
.gt-spell .pips { position: absolute; left: 0; right: 0; top: 6px; display: flex; justify-content: center; gap: 2.5px; z-index: 3; pointer-events: none; }
.gt-spell .pips s { width: 5.5px; height: 5.5px; border-radius: 50%; background: rgba(255,255,255,.3); display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.22); }
.gt-spell .pips s.f { background: #fff; }
.gt-spell.evo { box-shadow: 0 6px 0 rgba(30,20,60,.45), 0 0 0 3px #ffd54a, 0 0 16px 3px rgba(255,213,74,.8); }
.gt-spell.evo .pips s.f { background: #ffd54a; }
.gt-spell.lvup { animation: gtLvup .8s ease-out; }
@keyframes gtLvup { 0% { transform: scale(1); } 20% { transform: scale(1.3); filter: brightness(1.6); } 100% { transform: scale(1); } }
.gt-spell.cool .cd { font-size: 26px; }
.gt-chip .dots u { width: 7px; height: 7px; }
.gt-chips { bottom: calc(26px + 158px + 26px + env(safe-area-inset-bottom)); }
.gt-emotes { bottom: calc(26px + 158px + 30px + env(safe-area-inset-bottom)); }
.gt-float.lvl { font-size: 15px; }

/* the upgrade cards */
.gt-shophint { font-size: 13px; color: #8b7a6b; font-weight: 500; }
.gt-cardb { padding: 8px 5px 7px; min-height: 208px; gap: 3px; border-color: color-mix(in srgb, var(--fc, #2f9fa8) 35%, #fff); }
.gt-cardb .ci { width: 42px; height: 42px; background: var(--fc, #2f9fa8); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.gt-cardb .ci svg { width: 25px; height: 25px; }
.gt-cardb .role { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--fc, #2f9fa8) 80%, #000); padding: 2px 7px 2px 5px; border-radius: 999px; white-space: nowrap; }
.gt-cardb .role svg { width: 11px; height: 11px; }
.gt-cardb b { font-size: 14px; }
.gt-cardb .lv { font-size: 12px; font-weight: 700; color: #6b5a4c; } .gt-cardb .lv em { font-style: normal; margin: 0 3px; color: var(--fc); }
.gt-cardb .lvp { display: flex; gap: 3px; } .gt-cardb .lvp s { width: 8px; height: 8px; border-radius: 50%; background: #ddd2c2; display: block; } .gt-cardb .lvp s.f { background: var(--fc, #2f9fa8); } .gt-cardb .lvp s.n { background: #fff; box-shadow: 0 0 0 2px var(--fc, #2f9fa8); animation: gtPulseS .6s ease-in-out infinite alternate; }
.gt-cardb .gain { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #4a3a30; background: #f6efe2; border-radius: 999px; padding: 2px 9px 2px 6px; }
.gt-cardb .gain svg { width: 15px; height: 15px; color: var(--fc, #2f9fa8); }
.gt-cardb small { font-size: 10.5px; line-height: 1.12; flex: 1; }
.gt-cardb .pk { font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--fc, #2f9fa8) 18%, #fff); border-radius: 999px; padding: 3px 11px; display: inline-flex; align-items: center; gap: 4px; }
.gt-cardb.evo { border-color: #ffc53d; background: linear-gradient(#fffbe8, #fff); box-shadow: 0 4px 0 #e0b542, 0 0 14px rgba(255,197,61,.7); }
.gt-cardb.evo .pk { background: #ffc53d; color: #4a3a30; }
.gt-cardb.lamp { --fc: #ffb02e; }
.gt-cardb.got { background: #e8f8ee; border-color: #3dbb78; } .gt-cardb.got .pk { background: #3dbb78; color: #fff; } .gt-cardb.got .pk .ck { color: #fff; width: 15px; height: 15px; }
.gt-cardb.off { opacity: .45; filter: grayscale(.6); pointer-events: none; }

/* landscape: the four abilities sit in a block beside the ult, bottom right; the teammate chips ride the top right (no gold pill any more) */
@media (min-aspect-ratio: 9/10) {
  .gt-top { grid-template-columns: auto auto auto 1fr; grid-template-areas: "town wave lants ."; }
  .gt-btns { left: auto; right: 24px; transform: none; width: 262px; height: 150px; bottom: calc(22px + env(safe-area-inset-bottom)); }
  .gt-btns .gt-ult { left: auto; right: 0; bottom: 0; }
  #gtS1, #gtS2, #gtS3, #gtS4 { width: 68px; height: 68px; left: auto; right: auto; }
  #gtS1 { right: 112px; bottom: 0; } #gtS2 { right: 192px; bottom: 0; } #gtS3 { right: 112px; bottom: 80px; } #gtS4 { right: 192px; bottom: 80px; }
  .gt-chips { left: auto; right: 10px; top: calc(10px + env(safe-area-inset-top)); bottom: auto; width: 340px; flex-direction: row; }
  .gt-chip { flex: 1 1 0; }
  .gt-emotes { right: 358px; top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
  .gt-emopop { top: 48px; }
  body.gt-break .gt-chips { flex-direction: row; width: 340px; top: calc(10px + env(safe-area-inset-top)); }
  body.gt-break .gt-emotes { right: 358px; top: calc(12px + env(safe-area-inset-top)); }
  .gt-cardb { min-height: 168px; padding: 6px 4px; gap: 2px; } .gt-cardb .ci { width: 30px; height: 30px; } .gt-cardb .ci svg { width: 19px; height: 19px; }
  .gt-cardb b { font-size: 12.5px; } .gt-cardb small { font-size: 10px; } .gt-cardb .role { font-size: 9.5px; } .gt-cardb .gain { font-size: 11.5px; } .gt-cardb .pk { font-size: 11.5px; padding: 2px 8px; }
  .gt-shop { width: min(520px, 58vw); }
}
@media (max-aspect-ratio: 9/10) { body.gt-break .gt-chips { bottom: calc(var(--shop-h, 330px) + 22px + env(safe-area-inset-bottom)); } body.gt-break .gt-emotes { bottom: calc(var(--shop-h, 330px) + 26px + env(safe-area-inset-bottom)); } }
@media (max-height: 460px) { .gt-cardb { min-height: 150px; } .gt-cardb small { font-size: 9.5px; } }

.gt-spell .g, .gt-ult .g { color: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.gt-spell.cool .g { color: #fff; }

@media (min-aspect-ratio: 9/10) { .gt-emotes, body.gt-break .gt-emotes { right: 10px; top: calc(64px + env(safe-area-inset-top)); } .gt-emopop { top: 48px; right: 0; } }
.gt-spell em { font-size: 9px; letter-spacing: 0; max-width: 64px; }

/* round 2.5: who hits hardest (a ranked damage meter) and push call-outs */
.gt-meter { right: 8px; top: calc(9px + env(safe-area-inset-top)); width: 100px; display: none; flex-direction: column; gap: 2px; z-index: 52; pointer-events: none; }
.gt-meter.on { display: flex; }
.gt-meter .mr { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 3px; height: 13px; font-size: 9.5px; font-weight: 700; color: #fffdf7; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.gt-meter .mr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-meter .mr i { height: 7px; background: rgba(20,16,40,.55); border-radius: 4px; overflow: hidden; display: block; }
.gt-meter .mr i b { display: block; height: 100%; background: var(--pc, #fff); border-radius: 4px; transition: width .25s; }
.gt-meter .mr.me span { color: #ffe9a0; } .gt-meter .mr em { font-style: normal; text-align: right; font-size: 9px; opacity: .9; }
.gt-float.push { font-size: 22px; font-weight: 700; color: #ffd8a0; -webkit-text-stroke: 3px #4a2a0a; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0,0,0,.35); animation: gtPush .9s ease-out forwards; }
@keyframes gtPush { 0% { scale: .5; } 15% { scale: 1.25; } 30% { scale: 1; } }
@media (min-aspect-ratio: 9/10) { .gt-meter { right: 62px; top: calc(66px + env(safe-area-inset-top)); width: 110px; } }

.gt-next { font-size: 13px; font-weight: 600; color: #6b5a4c; padding: 0 4px; line-height: 1.15; margin-top: -2px; }
@media (max-height: 460px) { .gt-next { font-size: 11px; } }

/* a calmer toast slot: a small combo tag and other players' ult names sit in one fixed place above the lane */
.gt-combo.smallc { top: calc(116px + env(safe-area-inset-top)); }
.gt-combo.smallc span { font-size: 13px; padding: 3px 11px; background: rgba(255,253,247,.92); }
.gt-combo.smallc.on { animation: gtComboS 1.4s ease-out forwards; }
@keyframes gtComboS { 0% { transform: translateX(-50%) scale(.7); opacity: 0; } 12% { transform: translateX(-50%) scale(1.05); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-6px); opacity: 0; } }
.gt-combo.bigc { top: 30%; } .gt-combo.bigc b { font-size: 30px; }
.gt-banner.smallb { top: calc(146px + env(safe-area-inset-top)); font-size: 15px; padding: 5px 14px; border-width: 2px; white-space: normal; text-align: center; max-width: 92vw; }
.gt-meter { top: calc(8px + env(safe-area-inset-top)); width: 104px; gap: 1px; }
.gt-meter .mr { height: 11.5px; font-size: 9px; }
.gt-meter .mr i { height: 6px; }
@media (min-aspect-ratio: 9/10) { .gt-meter { right: 62px; top: calc(66px + env(safe-area-inset-top)); width: 104px; } }