/* Measure typography against the actual game, including desktop's narrow frame. */
#frame{container-type:inline-size;container-name:kingdom}
#view-deck #yourKingCard{padding:46px 16% 34px;min-height:174px;box-sizing:border-box}
#view-deck #yourKingCard .t1{font-size:clamp(18px,5.2cqw,27px);line-height:1.05;margin-bottom:7px}
#view-deck #yourKingCard .tag{font-size:clamp(9px,2.5cqw,12px);white-space:normal}
#view-deck #yourKingCard>.kingPortraitFrame{width:21cqw;height:21cqw;flex-basis:21cqw;flex-shrink:0;max-width:98px;max-height:98px}
#view-social #socialGlory .gloryPlinth{bottom:13.5%;height:19%;left:24%;right:24%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}
#socialGlory .gloryPlinth span{font-size:clamp(9px,2.6cqw,14px);line-height:1;letter-spacing:1px}
#socialGlory #socialGloryValue{font-size:clamp(23px,7.8cqw,40px);line-height:1;font-variant-numeric:tabular-nums}
#view-social #socInvite .t1{font-size:clamp(19px,5.4cqw,27px)}
#view-social #socInvite .t2{font-family:'Russo One',sans-serif;font-size:12px;line-height:1.45}
#view-social #gloryPanel .dCap,#view-social .socCard.soon .t2{display:none}
#view-social #gloryPanel .dSub{font-size:10px;letter-spacing:.5px;line-height:1.4}
#view-social .socCard.soon{min-height:92px;padding-top:32px;padding-bottom:28px;align-items:center}
#view-social .socCard.soon::before{top:9px;height:84px}
#view-social .socCard.soon::after{font-family:'Lilita One';font-size:10px;width:70px}
/* The carousel only clips at the actual game viewport, never at an inset rectangle. */
#view-shop #shopFeature.royalFan{width:100cqw;margin-left:-14px;margin-right:-14px;overflow:hidden;border:0;border-radius:0;box-shadow:none}
#view-shop #shopFeature .fanMain .t{font-size:clamp(24px,7.5cqw,36px)}
#view-shop #shopFeature .fanCard .face{background-size:cover}
#view-shop .shopHead i:not(#shopTimer){display:none}
#view-shop .shopHead{margin-top:30px}
#view-shop #shopPacks .packTile{width:72%;margin:54px auto 18px;padding:0 10px 12px}
#view-shop #shopPacks .packTile>img{width:86%;max-width:235px;margin-top:-38px;filter:drop-shadow(0 6px 6px #0006)}
#view-shop #shopPacks .packTile .t{font-size:18px}
#view-shop #shopPacks .packTile .sub{font-size:11px;line-height:1.4;letter-spacing:.3px}
#view-shop .packTile button{width:84%;margin-top:8px;padding:7px 4px;min-height:38px}
#view-shop .dealGrid,#view-shop .vaultGrid{row-gap:38px;margin-top:38px}
#view-shop .deal,#view-shop .vault{overflow:visible;padding:0 9px 10px!important;align-self:start}
#view-shop .deal>.art,#view-shop .vault>img{width:96px;height:96px;max-width:95%;object-fit:contain;margin-top:-26px;margin-bottom:4px}
#view-shop .deal button{width:88%;min-height:36px;margin:6px auto 0;padding:7px 3px;font-size:13px}
#view-shop .deal .t{font:16px/1.15 'Lilita One';margin:4px 0}
#view-shop .deal .sub{font:10px/1.35 'Russo One';letter-spacing:0}
#view-shop .vault .n{font-size:20px}#view-shop .vault .nm,#view-shop .vault .p{font:12px/1.3 'Lilita One';letter-spacing:.2px}
#view-shop .vault .unit{display:none}
#view-shop #shopBook .deal{padding:10px 12px!important;grid-template-columns:90px minmax(0,1fr);margin-top:25px}
#view-shop #shopBook .art{width:96px;height:105px;max-width:none;margin:-18px 0 0 -6px}
#view-shop .bundle .stack{margin-top:-30px}
#view-shop .bundle{margin-top:24px;padding:0 8px 10px!important}
#view-shop .bundle .save{top:4px;z-index:2}
#view-shop .bundle .sub{font-size:10px;line-height:1.4}
#view-shop .essGrid{padding-top:24px}#view-shop .essTile>img{margin-top:-20px;width:68px;height:68px;object-fit:contain}
#view-shop .essTile{padding:0 6px 9px!important}#view-shop .essTile .own{font:11px 'Russo One'}
/* Source-painted gold / cyan corners and violet edge, just as the reference. */
#passRoad .passChapter{border:12px solid transparent!important;border-image:url('../assets/ui/painted-pass-20260920.webp') 180 150 180 150 fill / 15px / 0 stretch!important;background:none!important;border-radius:0!important;box-shadow:none!important;padding:0 2px 3px!important;margin-bottom:12px}
#passRoad .passChapter::before{display:none!important}
#passRoad .chapterHeading{padding:1px 5px 0;margin-bottom:7px}
#passRoad .chapterHeading h3{font-size:clamp(17px,4.8cqw,25px);line-height:1.12}
#passRoad .chapterHeading small{font-size:10px}
#passRoad .chapterRewards{gap:8px}
#passRoad .chapterRewards>div,#passRoad .chapterRewards>.premiumLane{padding:6px 4px!important;background:linear-gradient(135deg,#27354b8c,#0d1627b5);border-radius:12px}
#passRoad .chapterRewards>.premiumLane{background:radial-gradient(ellipse at top,#9d713255,#31291bbb);border-color:#ffdc8a;box-shadow:inset 0 0 0 1px #eac47940,0 0 6px #ffce4a50}
#passRoad .prw>img{width:59px;height:59px}
#passRoad .prw .t{font-size:12px;line-height:1.2;min-height:28px;margin-top:0}
#passRoad .prw .col{min-height:32px;font-size:11px;padding:5px 3px;margin-top:4px;max-width:130px;align-self:center}
#passRoad .laneLabel{font:12px/1.2 'Lilita One';margin-bottom:4px}
#view-events #suitFinale .cap .b{font-size:clamp(30px,10cqw,48px)}
#suitGoal{min-height:116px;padding:10px 12px 7px;gap:4px;overflow:visible;align-items:center}
#suitGoal img{height:142px;width:34%;margin:-30px 0 -7px;object-position:center bottom}
#suitGoal span{flex:1;min-width:0}#suitGoal strong{font-size:clamp(17px,4.8cqw,24px);line-height:1.1}
#suitGoal small{font:11px/1.25 'Russo One';letter-spacing:.2px}
.royalInfo{display:block;margin:10px auto 18px;padding:9px 14px;border:1px solid #bb944d;border-radius:9px;color:#ffdf90;background:#14253ce8;font:12px 'Russo One';cursor:pointer;min-height:40px}
#view-events #passHead .ribbon,#view-events>.ribbon{font:12px/1.5 'Russo One';letter-spacing:.1px}
@container kingdom (max-width:360px){#view-deck #yourKingCard{padding-left:15%;padding-right:15%;gap:7px}#view-social #socInvite .t2{font-size:11px}#passRoad .chapterRewards{gap:5px}#view-shop .deal .t{font-size:14px}}
#royalLibraryButton{position:absolute;right:10px;top:calc(var(--sat,0px) + 100px);z-index:4;width:58px;height:73px;border:0;background:none;color:#ffe39c;cursor:pointer;padding:0;filter:drop-shadow(0 3px 3px #0008)}
#royalLibraryButton img{display:block;width:54px;height:58px;object-fit:contain;margin:auto}
#royalLibraryButton span{font:10px 'Lilita One';letter-spacing:.4px;background:#111e32cf;border-radius:5px;padding:2px 4px}

#view-deck .dCap{display:none}
#passRoad .chapterRewards .prw>img{width:59px;height:59px}
#passRoad .chapterRewards .prw>.col{min-height:32px;font-size:11px;padding:6px 3px}
#view-shop .bundle .sub{font-family:'Russo One';font-size:11px}

/* Keep the portrait inside the illustrated plaque's inset, below its crest. */
#view-deck #yourKingCard{height:47cqw;min-height:0;max-height:222px;padding:12.3cqw 16.5% 10.5cqw;gap:12px;align-items:center}
#view-deck #yourKingCard>.kingPortraitFrame{width:19cqw;height:19cqw;flex-basis:19cqw;max-width:90px;max-height:90px;border:2px solid #f7d47a;border-radius:15%;box-shadow:0 0 0 2px #423019,inset 0 1px 3px #fff9;margin:0;overflow:hidden}
#view-deck #yourKingCard .tag{font-size:clamp(8px,2.25cqw,11px);padding:4px 5px}
#view-deck .face:has(>.cardPortrait){position:relative;overflow:hidden}
#view-deck .cardPortrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;border-radius:inherit;font:11px 'Russo One';color:#ffe39c}
#view-deck .cardPortrait.portraitFailed{position:static;min-height:75px;object-fit:contain}
#view-events #suitGoal{margin-top:60px;min-height:116px;padding-left:5px;gap:0}
#view-events #suitGoal img{width:40%;height:184px;margin:-60px 0 -8px;object-fit:contain;object-position:center bottom;flex-shrink:0}
#view-events #suitGoal strong{font-size:clamp(15px,4.4cqw,22px)}

#view-events #suitGoal img{width:43%;height:222px;margin:-100px 0 -8px}
/* Pin the visible cutout to the bottom edge at every phone width. */
#view-events #suitGoal{position:relative;padding-left:44%;min-height:116px}
#view-events #suitGoal img{position:absolute;left:0;bottom:0;width:44%;min-width:142px;max-width:190px;height:auto;margin:0}

/* Reward receipts only acknowledge transactions that have already succeeded. */
.rewardReceipt{box-sizing:border-box;width:min(88vw,380px);max-height:90dvh;overflow:hidden;padding:28px 22px 22px;border:2px solid #e6bd68;border-radius:24px;color:#fff0bd;background:radial-gradient(ellipse at 50% 35%,#375475,#14213a 66%);box-shadow:0 15px 65px #000b,inset 0 0 0 5px #d3a55533;text-align:center}
.rewardReceipt::backdrop{background:#050c19bb;backdrop-filter:blur(4px)}
.receiptStack{position:relative;height:180px;margin:8px auto 20px;width:180px;isolation:isolate}
.receiptStack.isCard{height:250px;width:185px}
/* (25.9 Isaac, item 5) THE BLACK SQUARE IS GONE. Each of the nine stacked pictures used to carry its own
   filter:drop-shadow(0 8px 8px #0008) while animating a transform — nine composited, filtered layers whose
   shadows piled up into a black slab behind the coins (and on iOS a filtered composited image shadows its
   whole box, i.e. a rectangle). The picture files themselves are clean (transparent corners, measured).
   One soft ROUND ground shadow under the stack replaces all nine — no filter, no compositing surprise. */
.receiptStack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:receiptArrive .38s cubic-bezier(.16,.7,.25,1) both;animation-delay:calc(var(--i)*.065s)}
.receiptStack::before{content:'';position:absolute;left:10%;right:10%;bottom:-3%;height:20%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,#0009,#0000 72%);animation:receiptLight 1.2s ease-out both}
.receiptStack.isCard::before{left:6%;right:6%;bottom:-4%;height:12%}
.receiptStack.isCard img{object-fit:cover;border-radius:16px;border:2px solid #e8c779;box-sizing:border-box}
.receiptHalo{position:absolute;left:5%;top:5%;width:90%;aspect-ratio:1;background:radial-gradient(ellipse,#ffe9a955,transparent 65%);pointer-events:none;animation:receiptLight 1.2s ease-out both}
.rewardReceipt h2{position:relative;font:clamp(20px,6vw,28px)/1.15 'Lilita One';margin:10px 0}
.receiptCount{position:relative;display:block;font:38px/1.15 'Lilita One';font-variant-numeric:tabular-nums;color:#ffe287;margin:8px 0 20px;text-shadow:0 3px #583b1d}
.rewardReceipt button{position:relative;min-height:46px;width:82%;border:2px solid #ffe498;border-radius:12px;background:linear-gradient(#ffe38e,#d3a145);color:#352714;font:18px 'Lilita One';box-shadow:0 3px #785427;cursor:pointer}
@keyframes receiptArrive{from{transform:translate(-100px,55px) rotate(-13deg) scale(.65);opacity:0}to{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@keyframes receiptLight{from{transform:scale(.6);opacity:0}45%{opacity:1}to{transform:scale(1.1);opacity:.75}}
@media(prefers-reduced-motion:reduce){.rewardReceipt *{animation:none!important}}
/* Retain the painted social frames, fit the contents to their clear insets. */
#view-social #socialGlory .gloryPlinth{left:31%;right:31%;bottom:14%;height:16%;gap:1px}
#socialGlory .gloryPlinth span{font-size:clamp(8px,2.2cqw,11px);letter-spacing:.3px}
#socialGlory #socialGloryValue{font-size:clamp(22px,6.8cqw,33px);line-height:1}
#view-social #socInvite{padding:43px 8% 37px;gap:8px 12px;align-items:center}
#view-social #socInvite .inviteArt{left:6%;top:31px;width:29%;height:100px;object-fit:contain}
#view-social #socInvite .t1,#view-social #socInvite .t2{padding-left:34%;text-align:left}
#view-social #socInvite .t1{font-size:clamp(19px,5.3cqw,25px);padding-top:8px}
#view-social #socInvite .t2{min-height:42px;font-size:clamp(10px,2.8cqw,12px)}
#view-social #socInvite button{min-height:46px;padding:8px 3px;font-size:clamp(11px,3.2cqw,15px);align-self:center}

.rewardReceipt{inset:0;margin:auto;max-height:min(90dvh,640px)}

/* Invitation: center the copy within the painted inset, with a larger envelope. */
#view-social #socInvite{padding:64px 8% 32px;gap:8px 12px;overflow:visible;align-items:center}
#view-social #socInvite .t1,#view-social #socInvite .t2{padding-left:27%;padding-right:0;max-width:none;text-align:center;margin:0;box-sizing:border-box}
#view-social #socInvite .t1{padding-top:0;font-family:'Lilita One',sans-serif;font-size:clamp(19px,5.3cqw,25px);line-height:1.2;letter-spacing:.5px}
#view-social #socInvite .t2{min-height:0;padding-top:2px;padding-bottom:18px;font-family:'Russo One',sans-serif;font-size:clamp(10px,2.8cqw,12px);line-height:1.45;letter-spacing:.2px}
#view-social #socInvite .inviteArt{left:-1%;top:13px;width:38%;height:135px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 6px #0005)}
#view-social #socInvite button{margin:0;min-height:48px;align-self:center}
@container kingdom (max-width:350px){#view-social #socInvite{padding-top:58px}#view-social #socInvite .inviteArt{width:37%;height:119px;top:18px}#view-social #socInvite .t1{font-size:19px}#view-social #socInvite .t2{font-size:10px}}