/* Visit streak card + toast, and the "add to home screen" card. Trading-post look: teal leather, brass rules, cream ink. */
.stk-card{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:linear-gradient(180deg,var(--lg-lea-1,#123c3c),var(--lg-lea-2,#0c2b2b));border:1px solid rgba(var(--lg-brass-rgb,201,162,74),.45);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.28);color:var(--lg-ink,#f3e9d2)}
.stk-ic{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,210,122,.28),transparent 70%)}
.stk-ic svg{width:44px;height:44px;filter:drop-shadow(0 0 8px rgba(255,200,110,.45))}
.stk-b{min-width:0;flex:1}
.stk-k{margin:0;font:italic 500 15px/1.2 "Ledger",Georgia,serif;color:var(--lg-brass-l,#e2c27a)}
.stk-t{margin:2px 0 8px;font:600 26px/1.1 "Ledger",Georgia,serif;color:var(--lg-ink,#f3e9d2)}
.stk-marks{list-style:none;margin:0 0 8px;padding:0;display:flex;gap:8px;align-items:center}
.stk-m{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1.5px dashed rgba(var(--lg-brass-rgb,201,162,74),.55)}
.stk-m i{width:10px;height:10px;border-radius:50%;background:transparent}
.stk-m.on{border:1.5px solid var(--lg-gold,#e8b84a);background:rgba(232,184,74,.16)}
.stk-m.on i{background:radial-gradient(circle at 40% 40%,#fff4d6,var(--lg-gold,#e8b84a))}
.stk-m.sh{width:28px;height:28px}.stk-m.sh svg{width:20px;height:20px;opacity:.55}.stk-m.sh.on svg{opacity:1}
.stk-p{margin:0;font-size:15px;line-height:1.45;color:var(--lg-ink-m,#cbbf9f)}
.stk-s{margin:8px 0 0;font-size:14px;color:var(--lg-ink-m,#cbbf9f)}.stk-s b{color:var(--lg-gold,#e8b84a);font-weight:600}
.stk-gain{margin:0 0 2px;font:700 15px/1.2 var(--display,inherit);color:var(--lg-gold,#e8b84a)}
.stk-sec{margin-top:8px}
.prof-stk{margin:18px 0}
.stk-pop{position:fixed;right:18px;bottom:calc(18px + var(--ad-notice-h,0px));z-index:60;width:min(380px,calc(100vw - 24px));animation:stk-in .35s ease-out}
.stk-pop .stk-card{padding:14px 40px 14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.stk-pop .stk-t{font-size:22px}.stk-pop .stk-p{font-size:14px}
.stk-pop.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.stk-x,.inst-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;background:none;color:var(--lg-ink-m,#cbbf9f);font-size:22px;line-height:1;cursor:pointer;border-radius:8px}
.stk-x:focus-visible,.inst-x:focus-visible,.inst-go:focus-visible{outline:3px solid var(--lg-gold,#e8b84a);outline-offset:2px}
@keyframes stk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stk-pop,.inst-pop{animation:none}}
@media (max-width:600px){.stk-pop{left:12px;right:12px;bottom:calc(12px + var(--ad-notice-h,0px));width:auto}.stk-card{padding:16px}.stk-t{font-size:23px}.stk-ic{width:46px;height:46px}.stk-ic svg{width:38px;height:38px}.stk-marks{gap:6px}}

/* Add to home screen card */
.inst-pop{position:fixed;left:50%;bottom:calc(16px + var(--ad-notice-h,0px));transform:translateX(-50%);z-index:61;width:min(420px,calc(100vw - 24px));display:flex;gap:14px;align-items:center;padding:14px 44px 14px 14px;background:linear-gradient(180deg,var(--lg-lea-1,#123c3c),var(--lg-lea-2,#0c2b2b));border:1px solid rgba(var(--lg-brass-rgb,201,162,74),.5);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.45);color:var(--lg-ink,#f3e9d2);animation:stk-in .35s ease-out}
.inst-pop img{flex:none;width:52px;height:52px;border-radius:12px}
.inst-pop h3{margin:0 0 2px;font:600 20px/1.15 "Ledger",Georgia,serif}
.inst-pop p{margin:0;font-size:14px;line-height:1.4;color:var(--lg-ink-m,#cbbf9f)}
.inst-pop .inst-go{margin-top:8px;font:600 15px var(--text,inherit);padding:8px 16px;border:0;border-radius:10px;cursor:pointer;color:var(--lg-on-brass,#2a1b0c);background:linear-gradient(180deg,var(--lg-brass-l,#e2c27a),var(--lg-brass,#c9a24a))}
.inst-pop svg.ios-share{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin:0 1px}

/* Island signboards (Coin Shop, Home): Fredoka display font on small rounded wooden-cream plaques with a teal rim,
   hung on a short post so each one stays attached to its building. Always shown, so nothing pops in over the games. */
@font-face{font-family:"Fredoka";src:url("/assets/fonts/fredoka/fredoka.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
.cove .lh-tip,.cove .sh-link .sh-tip{font-family:"Fredoka",var(--text),sans-serif;font-weight:600;font-size:15px;line-height:1;letter-spacing:.01em;text-transform:none;color:#1d4f4c;text-shadow:none;
  padding:6px 12px 7px;border-radius:11px;background:linear-gradient(#fbf1d8,#eedcb2);border:2px solid #2f6f6c;
  box-shadow:0 0 0 1.5px rgba(251,241,216,.35),0 3px 0 #1d4a49,0 6px 14px rgba(0,0,0,.45);opacity:1;transform:translate(-50%,-12px);white-space:nowrap}
.cove .lh-tip::after,.cove .sh-link .sh-tip::after{content:"";position:absolute;left:50%;bottom:-12px;width:2px;height:9px;margin-left:-1px;background:#2f6f6c;opacity:1}
.cove .lh-link:hover .lh-tip,.cove .lh-link:focus-visible .lh-tip,.cove .sh-link:hover .sh-tip,.cove .sh-link:focus-visible .sh-tip{opacity:1;transform:translate(-50%,-15px);background:linear-gradient(#fff7e2,#f3e3bd)}
.cove[data-sky="day"] .lh-tip{color:#1d4f4c;text-shadow:none}
.cove .lh-hover{display:none}
.cove.has-coach .lh-tip{opacity:0!important}
@media (max-width:639px){.cove .lh-tip,.cove .sh-link .sh-tip{font-size:12.5px;padding:4px 9px 5px;border-radius:9px;border-width:1.5px;box-shadow:0 2px 0 #1d4a49,0 4px 10px rgba(0,0,0,.45);transform:translate(-50%,-9px)}
  .cove .lh-tip::after,.cove .sh-link .sh-tip::after{bottom:-9px;height:7px}}
@media (prefers-reduced-motion:reduce){.cove .lh-tip,.cove .sh-tip{transition:none}}
.cove .lh-tip{transition:opacity .25s,transform .18s}
.cove .lh-tip.tip-off,.cove .lh-link:hover .lh-tip.tip-off,.cove .sh-link:hover .sh-tip.tip-off{opacity:0!important}
.cove .sh-dock .sh-tip{left:84%;bottom:62%}
.cove .lh-link .lh-tip.side{left:100%;bottom:auto;top:2px;transform:translate(10px,0)}
.cove .lh-link .lh-tip.side::after{left:-12px;bottom:auto;top:50%;width:10px;height:2px;margin:-1px 0 0}
.cove .lh-link:hover .lh-tip.side{transform:translate(12px,0)}

/* Room for the ads notice bar on game pages: the play area ends above the bar (phone and desktop, every game),
   and toasts sit above it. --stage-top is measured by site.js; --ad-notice-h by ads.js (0 once dismissed). */
.stage{max-height:calc(100vh - 180px - var(--ad-notice-h,0px))}
.stage[data-orientation="portrait"]{max-width:min(100%,calc((100vh - 180px - var(--ad-notice-h,0px)) * .5625))}
.toasts{bottom:calc(24px + var(--ad-notice-h,0px))}
.demo-flag{bottom:calc(16px + var(--ad-notice-h,0px))}
@media (max-width:760px){
  .stage[data-orientation="any"]{height:max(420px,calc(100svh - var(--stage-top,84px) - var(--ad-notice-h,0px) - 12px))}
  .stage[data-orientation="landscape"]{max-height:calc(100svh - var(--hdr,60px) - 24px - var(--ad-notice-h,0px))}
  .stage[data-orientation="portrait"]{max-width:min(100%,calc((100svh - var(--stage-top,84px) - var(--ad-notice-h,0px) - 12px) * .5625))}
  .toasts{bottom:calc(12px + var(--ad-notice-h,0px))}
}
@media (min-width:761px){
  .stage{max-height:max(360px,calc(100vh - var(--stage-top,180px) - var(--ad-notice-h,0px) - 12px))}
  .stage[data-orientation="portrait"]{max-width:min(100%,calc(max(360px,calc(100vh - var(--stage-top,180px) - var(--ad-notice-h,0px) - 12px)) * .5625))}
}