/* The Inn: the Meditation rewards dialog and its guide, the energy refill, and the ad demo. */
.ad-demo {
  padding: 15px;
}
.ad-demo h3 {
  font-size: 18px;
  margin: 13px 0;
}
.ad-demo p {
  font-size: 12px;
}
.ad-demo #ad-count {
  font-size: 30px;
  color: #fff3af;
  margin-top: 20px;
}
.inn-coin-pile {position:relative;width:80px;height:70px}
.meditation-modal{background:transparent;border:0;box-shadow:none;overflow:visible}
.meditation-modal>.modal-title{display:none}
.meditation-modal>.modal-body{padding:0;background:transparent;overflow:auto;border-radius:16px}
.meditation-scene{display:block;width:100%;aspect-ratio:1.9;object-fit:cover;object-position:center 40%;border:3px solid var(--slate-900);border-radius:16px 16px 0 0}
.meditation-heading{display:flex;align-items:center;justify-content:center;position:relative;padding:12px 34px;background:linear-gradient(#ffe04a,#ffbd0c);border:3px solid var(--slate-900);border-top:0}
.meditation-heading h3{margin:0;font-size:24px;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.meditation-heading .info-button{position:absolute;right:8px}
.meditation-content{background:var(--slate-300);border:3px solid var(--slate-900);border-top:0;border-radius:0 0 16px 16px;padding:12px 16px 18px;text-align:center}
.meditation-subtitle{margin:0 0 5px!important;color:var(--slate-800)!important;font-size:13px!important}
[data-meditation-time]{font-size:18px;color:white}
.meditation-rates{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:20px 0 16px}
.meditation-rates>div{height:29px;position:relative;border:2px solid var(--slate-950);border-radius:18px;background:var(--slate-900);color:white;display:flex;justify-content:flex-end;align-items:center;padding:0 10px 0 30px;font-size:17px}
.meditation-rate-art{position:absolute;left:-7px;top:-6px;width:36px;height:36px;display:grid;place-items:center}
.meditation-rewards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:110px;padding:12px 10px;background:var(--slate-500);border:3px solid var(--slate-700);border-bottom-color:#cfebf1;border-radius:16px}
.meditation-reward{background:#15bef4;border:2px solid var(--slate-900);border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:5px 2px;min-width:0;color:white}
.meditation-reward b{font-size:16px;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}
.meditation-reward small{font-size:10px;line-height:11px}
.meditation-max{display:block;margin:12px 0;font-size:21px;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.meditation-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.meditation-actions .btn{min-width:0;margin:0;padding:10px 12px;}
.meditation-actions .btn.blue{max-width:55%}
@media(max-width:360px){.meditation-content{padding:10px}.meditation-heading h3{font-size:21px}.meditation-rates{gap:12px;font-size:14px}.meditation-rates>div{font-size:14px}.meditation-rewards{gap:4px;padding:10px 6px}
}

.meditation-max-art {flex-direction:column;gap:2px}
.meditation-max-art b,.meditation-quick-art b {font-size:25px;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.meditation-quick-art b {position:absolute;bottom:0;right:0}
@media(max-width:360px){.inn-coin-pile{width:68px;height:60px}.meditation-guide .modal-title{font-size:19px}
}

.energy-refill-modal .modal-title{background:var(--purple);box-shadow:inset 0 4px var(--purple-top);border-bottom:3px solid var(--slate-900);font-size:clamp(21px,4.8vw,28px);padding:17px 35px}
.energy-refill-modal .modal-body{padding:22px;display:flex;justify-content:center}
.energy-refill-card{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--slate-500);border-radius:14px;width:220px;max-width:100%;padding:20px 18px 16px}
.energy-refill-art{display:flex;align-items:center;justify-content:center;min-height:94px}
.energy-refill-quantity{font-size:30px;line-height:1;color:white;font-weight:400;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
.energy-refill-card .btn{width:100%;margin:4px 0 0;padding:8px 20px}
.energy-refill-timer{margin:0;font-size:18px;color:white;-webkit-text-stroke:2px var(--slate-950);paint-order:stroke fill}
.energy-refill-left{font-size:13px;color:var(--slate-200)}

/* The Inn list: once a friend joins, the Inn button lists a banner per character. */
.inn-list-modal .modal-body{padding:12px 12px 16px}
.inn-list-heading{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.inn-list-heading p{margin:0;font-size:14px;color:white;-webkit-text-stroke:2.5px var(--slate-900);paint-order:stroke fill}
.inn-banners{display:flex;flex-direction:column;gap:12px}
.inn-banner{position:relative;aspect-ratio:1.9;border:3px solid var(--slate-900);border-radius:14px;overflow:hidden;background:var(--slate-500)}
.inn-banner-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.inn-banner-name{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;padding:2px 10px 2px 2px;background:var(--slate-900);border-radius:18px;color:white;font-size:15px}
.inn-banner-name .painted-sprite{width:30px;height:30px}
.inn-banner-time{position:absolute;top:8px;right:10px;font-size:22px;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.inn-banner-open{position:absolute;left:10px;bottom:60px}
.inn-banner-actions{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.inn-banner-actions .btn{margin:0;min-width:128px;padding:8px 10px;font-size:14px}
.inn-banner-special{position:relative;display:flex;align-items:center;gap:4px;height:30px;padding:0 10px 0 4px;border:2px solid var(--slate-950);border-radius:16px;background:var(--slate-900);color:white;font-size:15px}
/* A gear reward sits on its grade's colour, like gear in the bag. */
.inn-gear{display:inline-grid;place-items:center;flex-shrink:0;box-sizing:border-box;border-radius:50%;background:var(--grade);border:2px solid var(--slate-900)}
@media(max-width:360px){.inn-banner-actions .btn{min-width:112px;padding:7px 8px;font-size:12px}.inn-banner-time{font-size:18px}}

/* Remove Ads: a yellow ribbon over a blue panel; the clapper sits on turning rays and the
   perks pop in one after another. */
.no-ads-modal{container-type:inline-size;background:transparent;border:0;box-shadow:none;overflow:visible}
.no-ads-modal .modal-title{position:relative;z-index:1;align-self:center;width:86%;padding:10px 4px;border:3px solid var(--slate-900);border-radius:9px;background:var(--yellow);box-shadow:inset 0 4px var(--yellow-top),0 3px var(--slate-950);font-size:clamp(20px,8.4cqw,30px);white-space:nowrap;color:white;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
.no-ads-modal .modal-title::before,.no-ads-modal .modal-title::after{content:"";position:absolute;z-index:-1;top:15px;width:32px;height:45px;background:var(--yellow);border:3px solid var(--slate-900);box-shadow:0 3px var(--slate-950)}
.no-ads-modal .modal-title::before{left:-29px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,25% 50%)}
.no-ads-modal .modal-title::after{right:-29px;clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}
.no-ads-modal>.close-modal{top:76px;right:-10px;z-index:2}
.no-ads-modal .modal-body{padding:0;margin-top:-26px}
.no-ads-panel{overflow:hidden;padding:0 12px 14px;background:radial-gradient(ellipse 90% 60% at 50% 24%,var(--blue-top),var(--blue) 45%,color-mix(in srgb,var(--blue) 72%,var(--ink)) 100%);border:3px solid var(--slate-900);border-radius:18px;box-shadow:0 6px #14213080}
.no-ads-hero{position:relative;display:grid;place-items:center;height:clamp(150px,54cqw,196px);margin:0 -12px;padding-top:26px}
.no-ads-hero>.painted-sprite,.no-ads-hero>svg{position:relative;width:min(132px,40cqw);height:auto;z-index:2;filter:drop-shadow(0 4px 0 #0d1a2a66);animation:no-ads-art-in .5s cubic-bezier(.3,1.6,.5,1) both,no-ads-art-bob 2.6s ease-in-out .5s infinite}
.no-ads-rays{position:absolute;left:50%;top:58%;width:460px;height:460px;margin:-230px 0 0 -230px;background:radial-gradient(circle,#fff 0 8%,transparent 42%),repeating-conic-gradient(#ffffff55 0deg 11deg,transparent 11deg 24deg);mask-image:radial-gradient(circle,black 12%,transparent 58%);animation:no-ads-rays-turn 24s linear infinite}
.no-ads-sparkles{position:absolute;inset:0;z-index:3;pointer-events:none;color:white}
.no-ads-sparkles svg{position:absolute;height:auto;filter:drop-shadow(0 0 4px var(--blue-top));animation:no-ads-twinkle 1.8s ease-in-out calc(var(--i) * .3s) infinite both}
.no-ads-card{position:relative;z-index:1;padding:10px 12px 16px;background:color-mix(in srgb,var(--blue-soft) 45%,white);border:3px solid var(--slate-900);border-radius:16px;box-shadow:inset 0 -4px color-mix(in srgb,var(--blue-soft) 70%,white)}
.no-ads-card h3{margin:0 0 8px;font-size:16px;color:white;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.no-ads-perks{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.no-ads-perks li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px 4px 8px;background:var(--blue);border:2px solid var(--slate-900);border-radius:12px;box-shadow:inset 0 3px var(--blue-top),0 3px var(--slate-900);text-align:left;font-size:clamp(13px,5cqw,18px);line-height:1.1;color:white;-webkit-text-stroke:2.5px var(--slate-950);paint-order:stroke fill;animation:no-ads-perk-in .42s cubic-bezier(.3,1.4,.5,1) calc(.3s + var(--i) * .18s) both}
.no-ads-perks li>svg,.no-ads-perks li>.painted-sprite{flex:none;width:30px;height:30px}
.no-ads-perks em{font-style:normal;color:var(--green-top)}
.no-ads-card>.btn{display:flex;width:min(100%,220px);margin:18px auto 0;animation:no-ads-perk-in .42s cubic-bezier(.3,1.4,.5,1) 1.1s both}
@keyframes no-ads-perk-in{0%{opacity:0;transform:scale(.86);filter:brightness(2.4) saturate(0)}55%{opacity:1;transform:scale(1.04);filter:brightness(1.5) saturate(.5)}100%{opacity:1;transform:none;filter:none}}
@keyframes no-ads-art-in{from{opacity:0;transform:scale(.4) rotate(-14deg)}}
@keyframes no-ads-art-bob{50%{translate:0 -5px}}
@keyframes no-ads-rays-turn{to{transform:rotate(360deg)}}
@keyframes no-ads-twinkle{0%,100%{opacity:.25;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
@container(max-width:320px){.no-ads-perks li{gap:7px;padding-inline:6px 8px}}
@media(prefers-reduced-motion:reduce){.no-ads-hero>svg,.no-ads-hero>.painted-sprite,.no-ads-rays,.no-ads-sparkles svg,.no-ads-perks li,.no-ads-card>.btn{animation:none}}