/* Readable storybook play. Content can scroll; type never shrinks to fit. */
:root { --dim:#ded1ed; --reading:1; }
html,body { font-size:18px; line-height:1.45; }
button,input,select { font:inherit; }
button { touch-action:manipulation; }
#app { width:min(100%,600px); }
#hud { grid-template-columns:1fr 1fr; gap:6px 12px; padding:8px 14px; }
#hudMid { grid-column:1 / -1; grid-row:2; flex-direction:row; justify-content:space-between; }
#hudLeft,#hudRight { min-width:0; }
#hudVillage,#hudVillage.back { font:600 16px 'Fredoka',sans-serif; line-height:1.3; min-height:44px; max-width:none; white-space:normal; padding:5px 12px; }
.hudpill { min-height:44px; }
.hudpill b { font-size:20px; }
#hudTimer { font-size:16px; }
#hudShields .sh { width:14px; height:17px; }
#screens { min-height:0; }
.screen.scrolls { padding:12px 16px 28px; }
.screen.scrolls > * { flex-shrink:0; }
.treasuryhero,.companionhero,.albumhero { min-height:0; height:auto; }
.pet[src*='.sleep.'] { clip-path:inset(20% 0 0); }
.reward-offers .btn { margin-top:10px; }
#onlineFriends { margin:0 0 18px; flex-shrink:0; }
#scr-social form { display:grid; gap:14px; margin:18px 0; }
#scr-social label { display:grid; gap:6px; font-size:18px; }
#scr-social input:not([type=checkbox]),#scr-social select { width:100%; min-width:0; min-height:50px; padding:10px; border:1px solid #c6abd9; border-radius:8px; background:#1d0f32; color:#fff9ed; font-size:18px; }
#scr-social .social-choice { display:flex; align-items:center; gap:12px; }
.social-choice input { width:24px; height:24px; flex-shrink:0; }
.social-status:empty { display:none; }
.social-status { padding:12px; border:1px solid var(--edge); border-radius:12px; }
.social-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.social-tabs [aria-pressed=true] { background:#ffc94a; color:#39240a; }
.social-person { display:flex; flex-wrap:wrap; gap:8px; padding:16px 0; border-bottom:1px solid var(--edge); }
.social-person>div,.social-person>p,.social-person>b { width:100%; margin:0; }
.social-person small { display:block; }
.share-code { display:inline-block; user-select:all; letter-spacing:2px; color:#fff0b3; }
.social-album { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.social-album figure { margin:0; min-width:0; }
.social-album svg { width:100%; height:auto; }
.social-album figcaption { font-size:16px; overflow-wrap:anywhere; }
.social-album figcaption b { display:block; color:#fff0b3; }
#scr-social a { color:#fff0b3; }
.revenge-choices { flex-shrink:0; padding:12px 16px; }
#scr-village.on { display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; padding:0 12px 24px; gap:12px; }
#playTabs { position:sticky; top:0; z-index:15; flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px 0; background:#1d0f32; }
#playTabs button { min-height:48px; border:1px solid var(--edge); border-radius:12px; background:#32204f; color:var(--text); font-weight:600; }
#playTabs button[aria-pressed=true] { background:#ffce62; color:#352008; border-color:#fff0b3; }
#vScene { flex:none; height:auto; min-height:0; aspect-ratio:2 / 3; width:100%; margin:0; border-radius:20px; }
body[data-play-view=wheel] #vScene,body[data-play-view=wheel] #vDone { display:none; }
body[data-play-view=build] #slot { display:none; }
.bg .bgimg { object-fit:fill; filter:none; }
.villageplate { top:12px; left:12px; width:calc(100% - 24px); max-width:none; grid-template-columns:1fr auto; padding:12px; }
.villageplate small { font-size:16px; text-transform:none; letter-spacing:0; color:#57300e; }
.villageplate b { font-size:23px; white-space:normal; line-height:1.2; }
.villageplate em { display:block; font-size:16px; color:#57300e; }
.coach,.buildmarks,.buildscaffold { display:none !important; }
.bldwrap { width:100%; margin:0; }
.bldstage .generated { opacity:1; transform:none; filter:drop-shadow(0 3px 2px #28142b55); }
.plot { transform:translate(-50%,-100%); }
.plot:active { transform:translate(-50%,-100%) scale(.97); }
.plotfoot { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin:2px 0 0; gap:4px; }
.stars { display:flex; gap:3px; }
.stars .st { width:8px; height:8px; }
.tag { min-height:32px; font-size:16px; padding:3px 8px; }
.plot.level-0:before { top:auto; bottom:6%; left:50%; transform:translateX(-50%); width:48px; height:48px; font-size:30px; }
#vDone { padding:4px 0; }
#vDone .btn { width:100%; }
#slot { flex:none; padding:0 0 12px; background:none; display:flex; flex-direction:column; gap:14px; }
#storyBanner { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; width:100%; min-height:150px; padding:18px; border:1px solid #b092674d; border-radius:18px; background:linear-gradient(0deg,#1d0f32f5,#1d0f3266),url('art/bg.gingerbread.webp') center 28% / cover; color:#fff4d3; text-shadow:0 2px 6px #160923; }
#storyBanner span { font:bold 30px Georgia,serif; }
#storyBanner small { font-size:17px; margin:4px 0 8px; }
#storyBanner b { font-size:17px; text-decoration:underline; text-underline-offset:4px; }
#chapterStory { flex:none; padding:16px; border:1px solid #ac905f; border-radius:14px; background:#fff4d3; color:#35263a; }
#chapterStory summary,.map-story summary { cursor:pointer; font:700 21px/1.4 Georgia,serif; min-height:44px; align-content:center; }
#chapterStory p,.map-story p { font-size:18px; line-height:1.55; margin:12px 0; }
#chapterStory small { font-size:16px; }
body[data-play-view=wheel] #chapterStory { display:none; }
.map-story { flex:1 1 100%; padding:8px 0 0 16px; }

#wheelTop { grid-template-columns:1fr auto; gap:12px; padding:0; }
#wheelResult { min-height:62px; line-height:1.4; }
#wheelResult b { font-size:24px; white-space:normal; }
#wheelResult span { display:block; font-size:17px; white-space:normal; overflow:visible; }
#guideBtn { min-width:68px; max-width:110px; height:auto; min-height:48px; padding:6px; line-height:1.25; border-radius:12px; font-size:18px; }
#multiplier { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; border-radius:14px; padding:5px; }
#multiplier button { min-height:48px; height:auto; font-size:20px; border-radius:10px; }
#wheelCabinet { padding:9px 13px; width:100%; margin:0; }
#reels { height:auto; padding:6px; gap:8px; }
.reel { height:auto; aspect-ratio:1; }
#spinRow { width:100%; margin:0; padding:0 2px 8px; }
#spinBtn { min-height:64px; }
#spinBtn .spinword { font-size:27px; letter-spacing:1px; }
#spinBtn .cost { font-size:18px; }
#autoBtn { min-height:64px; min-width:70px; font-size:16px; }
.welcome-guide { padding:14px; border:1px solid var(--edge); border-radius:14px; background:#33204f; }
.welcome-guide p { margin:0 0 10px; }
.welcome-guide .btn { width:100%; }
.pagehead { flex-wrap:wrap; align-items:center; position:relative; padding:4px 0 16px; }
.pagehead h2 { font-size:28px; }
.pagehead span { font-size:16px; }
.btn,.btn.small { font-size:18px; min-height:48px; white-space:normal; padding:12px 16px; }
.footnote,.helprow p,.sheet p { font-size:18px; line-height:1.55; }
.footnote.tiny { font-size:16px; opacity:1; }
.sheet { max-width:480px; max-height:90dvh; padding:24px; }
.sheet h2 { font-size:27px; }
.quickstep strong,.helprow b { font-size:20px; }
.quickstep small { font-size:17px; }
.circlehero small,.circleproject small,.circlecard small,.treasuryhero small,.companionhero small,.albumhero small,.roadhero small,.petmeta small,.chestmeta small { font-size:16px; text-transform:none; letter-spacing:0; }
.circlehero p,.circleproject p,.circlecard p,.treasuryhero p,.companionhero p,.albumhero p,.roadhero p,.helpintro p { font-size:18px; line-height:1.5; }
.circlehero h3,.circleproject h3,.circlecard h3,.treasuryhero b,.companionhero b,.albumhero b,.roadhero b,.helpintro b { font-size:22px; }
.circlecast { grid-template-columns:repeat(2,minmax(0,1fr)); }
.circlemember b,.circlemember i { font-size:16px; }
.circlerow,.postrow,.favourrow { flex-wrap:wrap; gap:12px; }
.favourrow span { flex:1 1 180px; }
.circlerow .btn,.postrow .btn,.favourrow .btn { font-size:18px; min-height:48px; }
.favourrow b,.favourrow i,.trailstatus { font-size:17px; }
.chestcard { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; padding:16px; }
.chestmeta b { font-size:23px; }
.chestcard > strong { grid-column:1 / -1; font-size:18px; text-align:center; border-radius:10px; padding:10px; }
.chestcard[data-poor] { opacity:1; }
.petcard { display:grid; grid-template-columns:90px minmax(0,1fr); gap:14px; padding:16px; }
.petcard>.btn { grid-column:1 / -1; width:100%; }
.petart { width:90px; height:100px; }
.petmeta b { font-size:24px; }
.petmeta i,.petmeta p { font-size:17px; }
.petcard.locked { opacity:1; }
.cardgrid { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 10px 14px; gap:8px; }
.cardslot { min-width:0; }
.setrow { gap:12px; align-items:center; }
.setname { font-size:20px; }
.setcount { font-size:16px; flex-shrink:0; }
.maprow { flex-wrap:wrap; }
.mapname { flex:1; min-width:130px; }
.mapname b { font-size:20px; }
.maprow>em { font-size:16px; }
.mapthumb { width:66px; height:70px; flex-basis:66px; }
#scr-attack,#scr-raid { overflow:auto; }
.scene.atk,.scene.raid { flex:none; min-height:0; height:auto; aspect-ratio:2 / 3; }
.rivalbar { flex-wrap:wrap; }
.rivalbar .who b { font-size:22px; }
.rivalbar .who i,.hintline { font-size:18px; }
.seqfoot { flex:none; }
#dock { grid-template-columns:repeat(6,minmax(0,1fr)); flex:none; min-height:72px; gap:0; padding:4px; }
#dock button { min-width:0; min-height:64px; font-size:16px; padding:6px 1px; gap:5px; }
#dock button svg { width:24px; height:24px; }
#toast { top:8px; font-size:18px; border-radius:14px; }
.sw { height:44px; min-width:58px; }
.sw.on i { transform:translateX(26px); }
.reading-options { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.reading-options .btn[aria-pressed=true] { border:2px solid var(--gold); }
body.large-text { --reading:1.15; }
body.large-text .screen.scrolls,body.large-text .sheet,body.large-text #tourCard { font-size:21px; }
body.large-text p,body.large-text .footnote,body.large-text .petmeta i,body.large-text .favourrow i { font-size:21px; }
body.large-text .btn,body.large-text .setname { font-size:21px; }
#tourShade { position:fixed; inset:0; z-index:110; background:#080410a6; }
#tourFocus { position:fixed; border:3px solid #ffe38a; border-radius:14px; box-shadow:0 0 0 5px #ffe38a33; z-index:111; pointer-events:none; }
#tourCard { position:fixed; z-index:112; width:min(400px,calc(100vw - 24px)); background:#fff4d3; color:#30203f; border-radius:18px; padding:18px; box-shadow:0 10px 50px #0008; max-height:calc(100dvh - 24px); overflow:auto; }
#tourCard h2 { font:700 26px/1.2 Georgia,serif; margin:14px 0 12px; }
#tourCard p { font-size:18px; line-height:1.5; margin:0 0 14px; }
#tourCard small { font-size:16px; }
.story-teller { display:flex; gap:12px; align-items:center; border-bottom:1px solid #d6bd89; padding-bottom:10px; font-weight:600; }
.story-teller img { width:54px; height:60px; object-fit:contain; }
.story-teller small { display:block; font-weight:400; }
.story-page { margin-left:auto; white-space:nowrap; font-size:16px; }
#tourCard .tour-task { padding:12px 14px; border-left:3px solid #a97728; background:#eedcaf; border-radius:0 10px 10px 0; }
#tourCard .tour-story { color:#4a354b; }
#tourCard.story-prologue h2 { font-size:32px; }
.tour-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tour-actions .btn { flex:1; }
.tour-actions .tour-close { flex-basis:100%; background:transparent; color:#493253; }
@media(min-width:950px) {
 #app { width:min(1100px,100%); }
 #hud { grid-template-columns:1fr 1fr 1fr; }
 #hudMid { grid-column:2; grid-row:1; justify-content:center; gap:12px; }
 #hudRight { grid-column:3; }
 #scr-village.on { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:18px; padding:16px 22px 28px; }
 #playTabs { display:none; }
 body[data-play-view=wheel] #vScene,body[data-play-view=build] #vScene { display:block; grid-column:1; grid-row:1; }
 body[data-play-view=wheel] #vDone.on,body[data-play-view=build] #vDone.on { display:block; grid-column:1; grid-row:3; }
 body[data-play-view=build] #slot,#slot { display:flex; grid-column:2; grid-row:1 / span 3; position:sticky; top:0; }
 body[data-play-view=wheel] #chapterStory,#chapterStory { display:block; grid-column:1; grid-row:2; }
 .scene.atk,.scene.raid { width:450px; margin:0 auto; }
 .screen.scrolls { padding-left:max(24px,calc((100% - 750px)/2)); padding-right:max(24px,calc((100% - 750px)/2)); }
}
@media(max-width:380px) {
 #dock { grid-template-columns:repeat(3,1fr); }
 #dock button { flex-direction:row; justify-content:center; min-height:48px; }
 #storyBanner { min-height:108px; padding:12px; }
 #storyBanner span { font-size:26px; }
 #storyBanner small { display:none; }
 .villageplate b { font-size:20px; }
 .villageplate { grid-template-columns:1fr; }
 .villageplate em { position:absolute; top:8px; right:8px; font-size:16px; }
 .tag { font-size:16px; padding:3px 6px; }
}

.cardslot figcaption,.revealcard figcaption { font-size:16px; line-height:1.4; color:var(--text); overflow-wrap:anywhere; }
.revealcard { width:110px; }

@media (min-width:381px) and (max-width:949px) {
 #storyBanner { min-height:120px; padding:12px; }
 #storyBanner span { font-size:28px; }
}
@media (max-height:600px) {
 #tourCard { padding:14px; }
 .story-teller img { width:42px; height:44px; }
}