/* Summon's screens (summon.js builds them). Same soft UI as the town and the other games: cream cards, Fredoka, ink outlines. The board itself
   is drawn on the town's canvas by summon-look.js; everything here is a flat bar over it, like a phone game: lives and wave on top, gold and
   the big Summon button at the bottom, where the thumb is. */
body.summon .top, body.summon .side, body.summon .bottom, body.summon .sign, body.summon #prompt, body.summon #hint, body.summon #say { opacity: 0 !important; pointer-events: none !important; }
body.summon .top *, body.summon .side *, body.summon .bottom *, body.summon #menu { pointer-events: none !important; }
body.summon #menu { display: none !important; }
body.summon .fx-kidmark { display: none; }

.sm-root { font-family: "Fredoka", system-ui, sans-serif; color: var(--ink, #4a3a30); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body:not(.summon) .sm-root, body:not(.summon) .sm-root * { visibility: hidden !important; pointer-events: none !important; }
.sm { position: fixed; z-index: 50; }
.sm-root button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; border: 0; touch-action: manipulation; }
.sm-ic { width: 1em; height: 1em; display: block; }
.sm-hit { inset: 0; z-index: 49; touch-action: none; }

/* the top bar */
.sm-top { left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top)) 8px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; pointer-events: none; z-index: 58; }
.sm-btn, .sm-wave, .sm-lives { pointer-events: auto; background: var(--card, #fffdf7); border-radius: 999px; box-shadow: 0 4px 14px rgba(40,30,20,.28); font-weight: 600; }
.sm-town { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px 6px 6px; min-height: 46px; font-size: 16px; }
.sm-town .sm-ic { width: 26px; height: 26px; }
.sm-town:active { transform: scale(.96); }
.sm-wave { justify-self: center; padding: 5px 16px; text-align: center; pointer-events: none; line-height: 1.1; background: #7a5a3a; color: #fff7e6; border: 2px solid #3b2a25; }
.sm-wave b { display: block; font-size: 17px; white-space: nowrap; }
.sm-wave small { display: block; font-size: 12px; opacity: .85; min-height: 14px; }
.sm-lives { white-space: nowrap; display: flex; align-items: center; gap: 5px; padding: 6px 12px 6px 8px; min-height: 46px; pointer-events: none; font-variant-numeric: tabular-nums; }
.sm-lives .sm-ic { width: 24px; height: 24px; color: #6a4c93; }
.sm-lives b { font-size: 17px; } .sm-lives small { font-size: 11px; opacity: .6; }
.sm-lives.low { background: #ffe1dc; } .sm-lives.low .sm-ic { color: #d6382a; }
.sm-lives.hurt { animation: smHurt .45s ease-out; }
@keyframes smHurt { 0% { transform: scale(1.25); background: #ff8a7a; } 100% { transform: scale(1); } }

/* names on the platforms */
.sm-tags { inset: 0; pointer-events: none; z-index: 51; overflow: hidden; }
.sm-tag { position: absolute; left: 0; top: 0; margin-top: -9px; padding: 0 8px; line-height: 15px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c); border: 2px solid #3b2a25; white-space: nowrap; opacity: .92; }
.sm-tag.me { font-size: 12px; }
body.sm-out .sm-tag { font-size: 9px; padding: 0 5px; margin-top: -7px; line-height: 11px; border-width: 1.5px; }
body.sm-teams .sm-tags { display: none; }

/* merge chips float on the cells that hold three of a kind */
.sm-chips { inset: 0; pointer-events: none; z-index: 54; }
.sm-chip { position: absolute; left: 0; top: 0; min-width: 52px; min-height: 26px; padding: 2px 8px; border-radius: 999px; background: #ffc53d; color: #3b2a25; font-weight: 700; font-size: 12.5px; border: 2px solid #3b2a25 !important; box-shadow: 0 3px 8px rgba(0,0,0,.35); pointer-events: auto; animation: smChip .8s ease-in-out infinite; }
@keyframes smChip { 50% { filter: brightness(1.15); margin-top: -4px; } }

.sm-arrow { left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; opacity: 0; z-index: 57; }
.sm-arrow i { display: block; width: 0; height: 0; margin: 6px; border-left: 26px solid #e0443a; border-top: 12px solid transparent; border-bottom: 12px solid transparent; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.sm-arrow.on { animation: smArrow 1.4s ease-out; }
@keyframes smArrow { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

.sm-banner { left: 0; right: 0; top: 18%; text-align: center; pointer-events: none; opacity: 0; z-index: 56; }
.sm-banner b { display: inline-block; font-size: 34px; font-weight: 700; color: #fff7e6; text-shadow: 0 3px 0 #3b2a25, 0 0 12px rgba(0,0,0,.4); -webkit-text-stroke: 2px #3b2a25; paint-order: stroke fill; }
.sm-banner small { display: block; font-size: 15px; color: #fff; text-shadow: 0 2px 0 #3b2a25; }
.sm-banner.on { animation: smBanner 1.8s ease-out; }
@keyframes smBanner { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.sm-ready { left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); display: none; z-index: 58; padding: 11px 22px; min-height: 46px; white-space: nowrap; border-radius: 999px; background: #ffc53d; font-size: 16px; font-weight: 700; box-shadow: 0 4px 14px rgba(40,30,20,.35); border: 2px solid #3b2a25 !important; }
.sm-ready.on { display: block; animation: smChip 1s ease-in-out infinite; }

.sm-zoom { position: relative; justify-self: end; z-index: 57; display: grid; grid-template-columns: auto; justify-items: center; align-content: center; gap: 0; min-height: 60px; min-width: 64px; padding: 5px 10px; border-radius: 18px; background: var(--card, #fffdf7); box-shadow: 0 3px 10px rgba(40,30,20,.25); font-size: 12px; font-weight: 600; line-height: 1.1; }
.sm-zoom .sm-ic { width: 26px; height: 26px; }
.sm-zoom b { font-size: 12.5px; } .sm-mine { font-size: 10px; opacity: .6; font-weight: 600; } .sm-mine i { font-style: normal; }
.sm-feed { display: none; }

/* the bottom: one line about what you picked, then gold, the big Summon button and how full your platform is */
.sm-bottom { left: 0; right: 0; bottom: 0; padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(#5b8f3a00, #3f6a29 28%); z-index: 57; }
.sm-info { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding: 5px 8px 5px 10px; border-radius: 16px; background: rgba(255,253,247,.94); box-shadow: 0 3px 10px rgba(40,30,20,.25); font-size: 14px; line-height: 1.25; }
.sm-line { flex: 1; font-size: 13.5px; } .sm-line.smtoast { font-weight: 700; color: #b3261e; }
.sm-sel { flex: 1; min-width: 0; }
.sm-sel-t { display: flex; align-items: center; gap: 6px; } .sm-sel-t b { font-size: 16px; } .sm-sel-t em { font-style: normal; font-size: 12px; opacity: .65; }
.sm-gem { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #3b2a25; flex: none; }
.sm-say { font-size: 12.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-acts { display: flex; gap: 6px; flex: none; }
.sm-act { min-width: 74px; min-height: 44px; padding: 6px 12px; border-radius: 14px; font-size: 15px; font-weight: 700; background: #ece3d3; border: 2px solid #3b2a25 !important; }
.sm-act.merge { background: #ffc53d; animation: smChip .8s ease-in-out infinite; } .sm-act:active { transform: scale(.95); }
.sm-note { font-style: normal; font-size: 12px; opacity: .7; }
.sm-row { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(170px, 2.2fr) minmax(66px, 1fr); gap: 8px; align-items: center; }
.sm-gold { display: flex; align-items: center; gap: 5px; padding: 8px 10px; min-height: 48px; border-radius: 999px; background: var(--card, #fffdf7); box-shadow: 0 3px 10px rgba(40,30,20,.25); font-variant-numeric: tabular-nums; justify-self: start; }
.sm-gold b { font-size: 20px; } .sm-coin { width: 24px; height: 24px; color: #ffc53d; }
.sm-gold.bump { animation: smBump .35s cubic-bezier(.2,.9,.3,1.6); }
@keyframes smBump { 40% { transform: scale(1.18); background: #ffe9a0; } }
.sm-summon { position: relative; min-height: 72px; border-radius: 22px; background: linear-gradient(#ffd75e, #f5aa1c); border: 3px solid #3b2a25 !important; box-shadow: 0 5px 0 #8a5a12, 0 8px 16px rgba(30,20,10,.35); display: grid; place-items: center; align-content: center; gap: 0; padding: 4px 8px; transition: transform .06s; }
.sm-sl { font-size: 24px; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 #fff6; }
.sm-cost { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; } .sm-coin2 { width: 18px; height: 18px; color: #fff3b0; }
.sm-odds { display: flex; gap: 5px; font-size: 11.5px; font-weight: 600; opacity: .85; align-items: center; } .sm-odds i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); border: 1.5px solid #3b2a25; margin-right: 2px; vertical-align: -1px; }
.sm-summon.hit { transform: translateY(4px) scale(.97); box-shadow: 0 1px 0 #8a5a12, 0 3px 8px rgba(30,20,10,.35); }
.sm-summon.poor { filter: saturate(.55) brightness(.95); }
.sm-summon.no { animation: smNo .26s; }
@keyframes smNo { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.sm-drag { left: 0; top: 0; width: 48px; height: 48px; border-radius: 16px; background: var(--c, #888); border: 3px solid #3b2a25; display: none; place-items: center; font-weight: 800; font-size: 24px; color: #fff; text-shadow: 0 2px 0 #3b2a25; pointer-events: none; z-index: 70; opacity: .92; }
.sm-drag.on { display: grid; }

/* the leave question and the end cards: both buttons are there the instant the card is */
.sm-ask, .sm-end { inset: 0; display: none; place-items: center; background: rgba(30,40,20,.5); z-index: 80; padding: 20px; }
.sm-ask.on, .sm-end.on { display: grid; }
.sm-card { width: min(340px, 100%); padding: 20px 18px 18px; border-radius: 26px; background: var(--card, #fffdf7); text-align: center; box-shadow: 0 14px 40px rgba(20,15,10,.45); border: 3px solid #3b2a25; }
.sm-card h2 { margin: 0 0 6px; font-size: 24px; } .sm-card p { margin: 0 0 16px; font-size: 15px; opacity: .8; }
.sm-btns { display: grid; gap: 10px; }
.sm-big { min-height: 54px; border-radius: 18px; font-size: 19px; font-weight: 700; background: #ffc53d; border: 3px solid #3b2a25 !important; } .sm-big.alt { background: #ece3d3; } .sm-big:active { transform: scale(.97); }
body.sm-won .sm-end .sm-card { border-color: #e0a31c; }
@media (min-width: 700px) { .sm-bottom { max-width: 520px; margin: 0 auto; border-radius: 22px 22px 0 0; }  }

/* the team strip: only zoomed out on a portrait phone, where the board leaves the space above it empty */
.sm-strip { left: 6px; right: 6px; display: none; grid-template-columns: 1fr 1fr; gap: 5px; pointer-events: none; z-index: 51; }
.sm-strip.on { display: grid; }
.sm-sc { height: 54px; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 4px 8px; border-radius: 12px; background: rgba(255,253,247,.92); border: 2px solid var(--c); font-size: 12px; line-height: 1.15; }
.sm-sc i { grid-row: span 3; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #3b2a25; }
.sm-sc b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sm-sc small { opacity: .75; font-size: 11px; font-weight: 600; }
.sm-sc.me { background: #fff3d1; }

/* damage numbers: white with a dark outline, rising and fading (gold and bigger for a jackpot). A friend's hits never show one. */
.sm-nums { inset: 0; pointer-events: none; z-index: 53; overflow: hidden; }
.sm-num { position: absolute; left: 0; top: 0; margin: -10px 0 0 -30px; width: 60px; text-align: center; font-weight: 800; font-size: 17px; color: #fff; -webkit-text-stroke: 4px #3b2a25; paint-order: stroke fill; opacity: 0; will-change: opacity; }
.sm-num.gold { color: #ffbf00; font-size: 25px; -webkit-text-stroke: 5px #3b2a25; }
.sm-num.go { animation: smNum .75s ease-out forwards; }
@keyframes smNum { 0% { opacity: 1; margin-top: -10px; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -42px; } }
.sm-mine { white-space: nowrap; }