/* Wildkin Royal — an original portrait fantasy-game skin. Loaded after style.css. */
:root{--bg:#124b99;--paper:#185db0;--ink:#fff8e1;--muted:#b5d5f4;--green:#edb52e;--light:#266fc0;--line:#0b326b;--orange:#ffd45d;--serif:'Outfit',sans-serif;--sans:'DM Sans',sans-serif;--royal-dark:#081e49;--royal-gold:#e8b947;--royal-white:#fff7e3}
html{min-height:100%;background:#062459;background-image:radial-gradient(ellipse at 50% 10%,#15539b 0,transparent 70%)}
body{width:100%;max-width:520px;min-height:100vh;min-height:100dvh;margin:0 auto;color:var(--royal-white);background-color:#1357a4;background-image:linear-gradient(45deg,#ffffff05 25%,transparent 25%,transparent 75%,#ffffff05 75%),linear-gradient(45deg,#ffffff05 25%,transparent 25%,transparent 75%,#ffffff05 75%),linear-gradient(180deg,#1e68b8,#0d448b);background-size:40px 40px,40px 40px,100% 100%;background-position:0 0,20px 20px,0 0;box-shadow:0 0 0 2px #041d4b,0 0 100px #00122c99;font-size:13px;overscroll-behavior-y:contain;padding-bottom:calc(88px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
button,a{touch-action:manipulation}button{font-weight:700}button:disabled{opacity:.5;filter:saturate(.35)}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #fff3b7;outline-offset:3px}h1,h2,h3,strong,.btn,.nav-btn{text-shadow:0 2px 0 #081f4c70}svg.icon{stroke-width:2}
.header{position:relative;width:100%;height:65px;min-height:65px;padding:7px 14px;margin:0;background:linear-gradient(#1c63aa,#114980);border:0;border-bottom:3px solid #082b61;box-shadow:inset 0 1px 0 #7db7e34d,0 2px 0 #4e8ac140;z-index:10}
.brand{gap:7px;font:800 italic 27px/.9 var(--serif);letter-spacing:-1px;color:#fff3c7;filter:drop-shadow(0 2px 0 #071e4a);text-shadow:1px 2px 0 #071e4a}
.brand-symbol{flex-shrink:0;width:34px;height:39px;font:bold 31px/31px var(--serif);color:#fff4c0;background:linear-gradient(130deg,#ffe8a0,#d49424);border:2px solid #092b61;border-radius:9px 9px 14px 14px;box-shadow:inset 0 2px 0 #fff6c1,inset 0 -4px 0 #b57719;letter-spacing:-4px;padding-right:3px;transform:rotate(-5deg);text-shadow:0 2px #b17526}
.brand-symbol span{color:#fff8cc;font-size:11px;right:-1px;top:-8px}.brand-dot{display:none}.header-right{gap:8px}.header-divider{display:none}.icon-btn{height:38px;width:38px;border:2px solid #082759;background:linear-gradient(#388bd3,#18549e);border-radius:10px;box-shadow:inset 0 2px 0 #74b7e4,0 2px 0 #071f4b;color:#d4edff}.icon-btn .icon{height:19px;width:19px}.avatar{width:37px;height:39px;border-radius:9px;color:#fff5cf;background:linear-gradient(#d8a445,#916323);font:bold 20px var(--serif);border:2px solid #ffe3a0;outline:2px solid #092759;box-shadow:inset 0 0 0 2px #9c701e}.profile{display:none}
.header nav{position:fixed!important;left:50%;right:auto;top:auto!important;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;height:calc(78px + env(safe-area-inset-bottom));padding:5px 9px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;align-items:stretch;background:linear-gradient(#164a89,#0b2e64);border-top:3px solid #d8ae53;box-shadow:0 -3px 0 #061c43,0 -8px 25px #06245470;z-index:45}
.nav-btn{height:64px;min-height:48px;padding:5px 5px 4px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:800 12px/1 var(--serif);letter-spacing:.3px;color:#b3d2f1;border:2px solid transparent;text-shadow:0 2px 0 #071b40;position:relative;background:linear-gradient(#2863a6,#16467f);box-shadow:inset 0 1px #77a4cc40}
.nav-btn>.icon,.nav-btn>span[data-icon]{width:29px;height:29px}.nav-btn .icon{width:28px;height:28px;filter:drop-shadow(0 2px 0 #041c43);stroke-width:2}.nav-btn.active{color:#fff5cf;background:linear-gradient(#4c85b9,#1b568c);border-color:#f4ca64;box-shadow:inset 0 1px #fff2bd90,0 0 14px #f4c14650}.nav-btn.active .icon{color:#ffe187;filter:drop-shadow(0 2px 0 #534c35) drop-shadow(0 0 7px #ffe0a050)}.nav-btn.active:after{display:none}.small-count{position:absolute;top:6px;right:20%;min-width:20px;height:20px;border-radius:6px;background:#f0bb38;color:#5f3c0d;border:1px solid #ffe597;font-size:10px;font-weight:900;text-shadow:none;box-shadow:0 2px 0 #8e5e1b}.nav-status{position:absolute;top:5px;right:24%;width:10px;height:10px;border:2px solid #ffe7a4;background:#f8bd39;box-shadow:0 0 10px #ffce5990}
main{max-width:520px;width:100%;margin:0;padding:11px 12px 0}.page-heading{display:block;margin:0 0 12px;min-width:0}.page-heading>div:first-child{display:none}.resources{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:8px;padding:0;background:none;border:0;border-radius:0;width:100%;margin:0;height:47px}.resource,.resource.population{display:flex;gap:7px;align-items:center;min-width:0;height:42px;border:2px solid #082759;border-radius:11px;background:linear-gradient(#0e3c78,#092d61);box-shadow:inset 0 2px 0 #0b2254,0 2px 0 #4b8bc24d;padding:4px 8px 4px 4px}.resource+.resource{border-left:2px solid #082759;padding-left:4px}.resource>span{width:29px;height:29px;min-width:29px;border-radius:8px;background:linear-gradient(#ffe690,#dc9c27);color:#8d5b10;box-shadow:inset 0 1px #fff3b6,0 2px 0 #071c44}.resource.food>span{background:linear-gradient(#f3a2c2,#c14a90);color:#7b285b}.resource.population>span{background:linear-gradient(#9cdc8e,#4e9d7e);color:#225b63}.resource>span .icon{width:21px;height:21px}.resource small{font-size:7px;line-height:1;letter-spacing:.7px;color:#b0cff0;margin:0 0 2px;font-weight:800}.resource strong{font:800 18px/1 var(--serif);color:#fff6dc;white-space:nowrap}.out-of{font:600 10px var(--serif);color:#82aad6}
.game-layout,.lower-layout,.nursery-layout{display:flex;flex-direction:column;grid-template-columns:1fr;gap:13px}.game-layout .map-panel,.map-panel{width:100%;height:340px;min-height:340px;max-height:340px;flex:none;border:3px solid #0a2859;border-radius:14px;background:#0d3a74;box-shadow:0 0 0 1px #dfb957,inset 0 0 0 1px #ffe6a075,0 5px 0 #082655,0 8px 18px #03245655;overflow:hidden}.canvas-wrap{min-height:0;flex:1;background:#7a9c69}.canvas-wrap canvas{object-fit:cover;object-position:center}.map-toolbar{top:10px;left:9px;right:9px;gap:7px;align-items:flex-start}.location-pill{position:relative;gap:7px;max-width:72%;padding:7px 10px;border-radius:7px;background:linear-gradient(#fff0b7,#ddbd70);border:2px solid #88652a;color:#473c2d;box-shadow:0 3px 0 #57472670,inset 0 1px #fffbd6;text-shadow:0 1px #fff0b1}.location-pill>.icon{color:#82612d;width:18px}.location-pill strong{font:800 14px/1.1 var(--serif);text-shadow:0 1px #fff5cc}.location-pill small{color:#826637;font-size:7px;margin-top:3px;letter-spacing:.2px;font-weight:650}.weather{display:flex;gap:4px;padding:6px;border-radius:7px;color:#fff7d7;background:#113c6ac9;border:1px solid #bed4d259;font-size:8px;white-space:nowrap;box-shadow:0 2px 0 #06284f55}.weather .icon{width:15px;height:15px;color:#ffe496}.map-bottom{bottom:10px;left:10px;right:10px;align-items:flex-end}.map-legend{display:none}.map-buttons{justify-content:space-between;gap:8px;width:100%;align-items:flex-end}.map-btn{min-height:42px;padding:9px 11px;gap:6px;border:2px solid #0b2c5e;border-radius:9px;background:linear-gradient(#428ac5,#2360a3);color:#fff4db;font:750 10px var(--serif);box-shadow:inset 0 2px 0 #8cc1e2,0 3px 0 #092450;text-shadow:0 2px #0c3769}.map-btn .icon{height:17px;width:17px}.map-btn.primary{color:#60420b;background:linear-gradient(#ffe988,#ffcf46 52%,#f3b42d);border-color:#8c5d19;text-shadow:0 1px #fff0a6;box-shadow:inset 0 2px 0 #fff6c2,inset 0 -3px 0 #da8a19,0 3px 0 #5a3e1c}.map-btn.primary .icon{filter:none}.habitat-bar{height:42px;gap:2px;padding:3px 6px;border-top:3px solid #0a2d60;background:linear-gradient(#205b9b,#133d78);box-shadow:inset 0 1px #72a9cd50}.habitat-bar>span{display:none}.habitat-btn{min-height:32px;flex:1;justify-content:center;padding:6px 4px;border-radius:6px;border:1px solid transparent;font-size:9px;font-weight:800;color:#c0d9ef;white-space:nowrap}.habitat-btn.active{color:#fff1c4;border-color:#e6bf68;background:linear-gradient(#3179b5,#1c568e);box-shadow:inset 0 1px #a0c9e970;text-shadow:0 1px #1b3e67}.habitat-btn .icon{height:14px;width:14px}.habitat-bar .map-size{height:32px;width:30px;margin-left:2px;padding:7px 5px;color:#bad9ef}.map-size .icon{height:17px;width:17px}
.side-panel{padding:15px;background:linear-gradient(145deg,#2771b8,#164b93);border:3px solid #0a2c62;border-radius:13px;box-shadow:inset 0 1px 0 #7db5df70,0 3px 0 #082653;color:#fff5dc;min-width:0}.game-layout .side-panel{padding:13px}.panel-heading{gap:8px;min-height:24px}.panel-heading h2{font:800 21px/1 var(--serif);letter-spacing:.1px;color:#fff4d4}.panel-heading>span{padding:5px 6px;border:1px solid #5c96c1;border-radius:5px;background:#0b3b79;color:#d5e8fa;font-size:7px;font-weight:800;white-space:nowrap;gap:4px}.panel-heading>span .icon{height:12px;width:12px;color:#f5b1d8}.side-kicker{font-size:11px;color:#b9d7f0;line-height:1.5;margin:8px 0 0}.parent-pair{grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);margin-top:15px;gap:0}.parent-slot,.nursery-info .parent-slot{min-height:103px;padding:7px 4px;border:2px solid #7da5d0;border-radius:11px;display:flex;flex-direction:column;gap:0;background:linear-gradient(#1c559a,#103b78);box-shadow:inset 0 2px 0 #4783b790,0 2px 0 #07224b;text-align:center}.parent-slot:hover{background:linear-gradient(#2d72b8,#174d8c);border-color:#ffe09a}.parent-slot>svg,.nursery-info .parent-slot>svg{width:66px;height:66px;filter:drop-shadow(0 3px 0 #0a2c5b70)}.parent-slot>strong{font:800 12px/1.1 var(--serif);margin-top:1px;align-self:auto}.parent-slot>small{font-size:8px;color:#aed1ed;margin-top:3px;align-self:auto}.change-parent{right:5px;top:5px;color:#d7e9fa}.change-parent .icon{width:12px;height:12px}.pair-plus{color:#ffdc79}.pair-plus .icon{height:20px;width:20px}.breeding-connection{margin:6px 0 0;color:#88b1dc;font-size:22px;height:16px}.egg-preview{min-height:83px}.egg-preview:before{width:106px;height:31px;background:radial-gradient(ellipse,#d7adf0a0,#8a6dba75 50%,#7e4bad00 72%);box-shadow:none}.egg-art{width:53px;height:65px;border-color:#81659f;background:#f3d7e9;box-shadow:inset -7px -5px 0 #c6a3cf,inset 3px 4px 0 #fff1f6,0 4px 0 #0a2b5e55}.egg-art:before,.egg-art:after{background:#a082c5;box-shadow:18px 24px 0 #a082c5}.egg-art:after{box-shadow:17px -31px 0 #a082c5}.egg-stars{color:#ffe39c;text-shadow:0 0 10px #ffe7ab70}.den-caption{font-size:10px;line-height:1.4;color:#bad8f1;margin:5px 0 13px}.den-caption strong{color:#ffdc8b;font-weight:800}.den-tip{font-size:9px;color:#b7d2eb;margin-top:10px;line-height:1.35}.den-tip .icon{color:#87b9e0}
.btn{min-height:46px;padding:11px 16px;gap:8px;border-radius:10px;border:2px solid #8b5a15;background:linear-gradient(#ffec98,#ffd14e 49%,#f3b42b);color:#5b3a0c;font:800 13px/1.1 var(--serif);letter-spacing:.1px;text-shadow:0 1px 0 #fff3b7;box-shadow:inset 0 2px 0 #fff6ce,inset 0 -4px 0 #d48a1b,0 4px 0 #603e15;transition:filter .15s,transform .15s;white-space:normal}.btn:hover{background:linear-gradient(#fff1b0,#ffda68 49%,#f7be39);filter:brightness(1.03);transform:translateY(-1px)}.btn:active,.map-btn:active{transform:translateY(2px);box-shadow:inset 0 1px #fff3b580,0 1px #603e15}.btn .icon{height:18px;width:18px;stroke-width:2}.btn.secondary{background:linear-gradient(#5b9bd4,#3172b4);border-color:#082959;color:#fff2d3;text-shadow:0 2px #184b80;box-shadow:inset 0 2px #a9d1ec70,inset 0 -3px #20558b,0 4px #082757}.btn.secondary:hover{background:linear-gradient(#68a8df,#3a81c0)}.btn.warm{background:linear-gradient(#ffefa4,#ffd05c,#efac2e);border-color:#91601f;color:#62400e}.btn.ghost{min-height:38px;box-shadow:none;border:0;color:#c2def4;background:none;font-size:10px;text-shadow:none}.button-price{padding-left:10px;border-color:#9c6b2245;color:#825c15;font-size:10px;font-weight:800}.button-price .icon{height:14px;width:14px}
/* The sanctuary den is a compact control panel under the island. */
.home-den{min-height:216px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(80px,.6fr);grid-template-areas:'heading heading' 'parents egg' 'action action' 'tip tip';gap:7px 13px}.home-den .panel-heading{grid-area:heading}.home-den .side-kicker,.home-den .breeding-connection,.home-den>.den-caption{display:none}.home-den .parent-pair{grid-area:parents;margin:0;grid-template-columns:minmax(0,1fr) 21px minmax(0,1fr)}.home-den .parent-slot{min-height:87px;padding:4px 2px}.home-den .parent-slot>svg{height:50px;width:50px}.home-den .parent-slot>strong{font-size:10px}.home-den .parent-slot>small{font-size:7px}.home-den>.egg-preview{grid-area:egg;min-height:84px}.home-den>.btn{grid-area:action;min-height:43px}.home-den>.den-tip{grid-area:tip;margin:1px 0 0;font-size:8px}.home-den:has(.egg-active){grid-template-areas:'heading heading' 'parents egg' 'timer egg' 'progress progress' 'action action';grid-template-rows:auto 30px 24px 5px auto;gap:5px 12px;min-height:217px}.home-den .parent-mini-row{grid-area:parents;margin:0;gap:10px}.home-den .parent-mini-row>svg{height:32px;width:32px}.home-den .egg-active{grid-area:egg}.home-den .egg-active .egg-preview{min-height:68px}.home-den .egg-active .egg-art{height:66px;width:53px}.home-den .timer-text{grid-area:timer;margin:0;font-size:21px}.home-den .progress-track{grid-area:progress;margin:0}.home-den .breeding-sub{display:none}.home-den .breeding-actions{grid-area:action;padding-top:4px;gap:5px}.home-den .breeding-actions .btn{min-height:41px}.home-den .breeding-actions .den-tip{margin:0;font-size:8px}
.lower-layout{margin-top:17px;gap:0}.lower-layout>section:nth-child(2),.daily-card{display:none}.section-head{margin:0 0 9px;min-height:26px}.section-head h2{font:800 19px var(--serif);letter-spacing:0;color:#fff0c8}.section-head h2 small{font:650 10px var(--sans);color:#9cc7e9;margin-left:6px}.text-btn{min-height:32px;gap:4px;padding:4px 1px;font-size:9px;color:#c0def6;font-weight:800}.text-btn .icon{height:14px;width:14px}.monster-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.monster-card{min-height:139px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 4px;border:2px solid #08295d;border-radius:11px;background:linear-gradient(#2e78bd,#195399);box-shadow:inset 0 2px #82bae18c,0 3px #072551;text-align:center;overflow:hidden}.monster-card:hover{border-color:#e5bf72;transform:translateY(-2px)}.monster-card>svg{width:66px;height:66px;filter:drop-shadow(0 3px #05275370)}.monster-card h3{font:800 14px/1 var(--serif);margin:1px 0 5px;color:#fff4d8}.monster-card>div{max-width:100%}.mini-level{margin-top:6px;justify-content:center;font-size:8px;color:#bed9f1;gap:4px}.level-track{width:28px;height:4px;border:1px solid #062858;background:#0b356a}.level-track i{height:3px;background:#9bd964}.monster-card.empty{background:linear-gradient(#174a89,#123c73);border:2px dashed #568dbe;color:#b5d5ed;gap:5px}.monster-card.empty .empty-egg{color:#95c1e6}.empty-egg .icon{height:32px;width:32px}.monster-card.empty span{font-size:10px;font-weight:800}.monster-card.empty small{font-size:8px;color:#85b0d5;max-width:90px;line-height:1.35}.type-tag{font-size:8px;font-weight:800;padding:4px 6px;gap:3px;border-radius:5px;background:#94c97e;color:#254f2d;border:1px solid #c3e4a8;text-shadow:0 1px #c5e4a950}.type-tag .icon{height:10px;width:10px}.type-tag.flame{background:#f5b584;border-color:#ffd1aa;color:#85421f}.type-tag.water{background:#7ac9ed;border-color:#b4e8fc;color:#195e87}.type-tag.spark{background:#f3da73;border-color:#fff1ad;color:#846016}.type-tag.stone{background:#bdc6c6;border-color:#e1e3d9;color:#556573}.type-tag.mystic{background:#c7a0e5;border-color:#ebcefa;color:#69488e}
.bottom-nudge{display:flex;align-items:center;gap:10px;min-height:76px;margin-top:14px;padding:10px 11px;border:2px solid #08285b;border-radius:11px;background:linear-gradient(#1b5594,#103c77);box-shadow:inset 0 1px #6d9fc455,0 2px #082858}.nudge-left{min-width:0;gap:8px}.nudge-left>span{display:none}.nudge-left p{font-size:9px;line-height:1.4;color:#9fc5e7;margin:0}.nudge-left strong{font-size:11px;color:#e5f0fc;line-height:1.3;margin-bottom:3px;font-weight:800}.bottom-nudge .btn{flex-shrink:0;max-width:135px;min-height:43px;padding:8px 10px;font-size:10px;background:linear-gradient(#ffec9b,#ffcf4c,#edb032);border:2px solid #976420;color:#64430f;text-shadow:0 1px #ffefad;box-shadow:inset 0 2px #fff6c7,inset 0 -3px #cb891f,0 3px #593d1b}.bottom-nudge .btn .icon{height:16px;width:16px}
footer{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:15px 1px 1px;padding:2px 0 0;color:#83acd6;font-size:7px}footer>span:first-child{gap:5px}footer>span:nth-child(2){display:none}footer>button{font-size:8px;color:#acd0ec;min-height:32px;gap:5px}.save-dot{height:5px;width:5px;background:#82d297;box-shadow:0 0 5px #8bdda866}footer .icon{height:13px;width:13px}
/* A royal incubator and a readable collection, each built for one thumb. */
.nursery-layout{gap:13px}.nursery-feature{min-height:226px;height:226px;padding:15px 20px;background:radial-gradient(ellipse at 50% 50%,#9972c8 0,#6845a0 42%,#392b70 100%);border:3px solid #1a2456;border-radius:14px;box-shadow:0 0 0 1px #d6ad59,inset 0 2px #c7a7e66b,0 4px #08254e}.nursery-feature:before{color:#ffe5a0;left:15%;top:28%;font-size:24px;text-shadow:0 0 20px #e6c8ff}.nursery-feature:after{color:#caace9;right:12%;top:55%;font-size:35px}.nursery-feature .overline{font-size:8px;letter-spacing:1.7px;font-weight:800;color:#d9c5f0}.nursery-feature .large-egg{transform:scale(1.27);height:65px;margin:14px 0 5px}.nursery-feature h2{font:800 21px/1.1 var(--serif);letter-spacing:0;margin:10px 0 7px;color:#fff1d2;text-align:center}.nursery-feature p{font-size:10px;line-height:1.5;color:#d0bde5;max-width:310px;margin:0}.nursery-feature .egg-preview:before{background:radial-gradient(ellipse,#d7a6f2b0,transparent 70%);width:120px}.nursery-feature .egg-stars{color:#ffebaa}.nursery-info .side-panel{padding:16px;height:auto}.nursery-info .parent-pair{margin-top:12px}.nursery-info .parent-slot{min-height:106px}.nursery-info .parent-slot svg{height:69px;width:69px}.guide-row{display:flex;flex-direction:column;margin-top:16px;gap:8px}.guide-step{gap:10px;padding:12px;background:linear-gradient(#205f9f,#174b88);border:2px solid #08295d;border-radius:10px;box-shadow:inset 0 1px #548ac355}.guide-step>span{font:800 22px var(--serif);color:#e8c775;text-shadow:0 2px #213a5b}.guide-step h3{font:800 13px var(--serif);margin:0 0 4px;color:#fff2d2}.guide-step p{font-size:10px;color:#a9cdec;line-height:1.5}.timer-text{font:800 27px var(--serif);color:#ffe49a;text-shadow:0 2px #263965;margin:6px 0;letter-spacing:1px}.progress-track{height:8px;border:1px solid #082451;background:#092f69;margin:9px 0;box-shadow:inset 0 1px #06214b}.progress-track>i{background:linear-gradient(#b6e880,#77ba57);height:100%;box-shadow:inset 0 1px #e7ffb4}.breeding-sub{color:#b1d2ec;font-size:10px}.parent-mini-row{margin-top:8px;gap:15px}.parent-mini-row>.icon{color:#e8b3d7}.breeding-actions{padding-top:12px}.ready .egg-art{box-shadow:0 0 27px #f9df9d99,inset -7px -5px 0 #c9a9da,inset 3px 4px 0 #fff3f7}
.collection-head{display:block;margin:3px 0 14px}.collection-head h2{font:800 24px/1.1 var(--serif);color:#fff0ca;letter-spacing:0;margin:0 0 6px}.collection-head p{font-size:10px;color:#a8ceed;line-height:1.4}.filter-list{max-width:none;display:flex;gap:5px;margin-top:13px;flex-wrap:wrap}.filter-list button{min-height:34px;padding:7px 10px;border:2px solid #08295c;border-radius:7px;background:linear-gradient(#3477b6,#1d5797);color:#c8e1f5;font-size:10px;box-shadow:inset 0 1px #6ea4d080,0 2px #062855}.filter-list button.active{background:linear-gradient(#ffe58a,#f4bd3b);border-color:#94631e;color:#69430f;text-shadow:0 1px #ffefab;box-shadow:inset 0 1px #fff5c5,0 2px #6d4c22}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.book-card{min-width:0;padding:12px;border:2px solid #082759;border-radius:12px;background:linear-gradient(#2b71b3,#194e91);box-shadow:inset 0 2px #75acda85,0 3px #072552;color:#fff5df;overflow:hidden}.book-card .book-no{left:10px;top:10px;font-size:8px;color:#a0c5e8;font-weight:800;letter-spacing:.5px}.book-card .owned-check{right:10px;top:9px;color:#a9e49c}.book-card .sprite-wrap{height:119px;background:radial-gradient(ellipse at 50% 70%,#7ab3d04d,transparent 68%)}.book-card .sprite-wrap svg{height:105px;width:105px;filter:drop-shadow(0 4px #0a2c6150)}.book-card h3{display:flex;align-items:center;gap:5px;font:800 16px/1.1 var(--serif);margin:4px 0 8px;color:#fff3d5;min-width:0;flex-wrap:wrap}.book-card h3 small{font:700 8px var(--sans);color:#a6c9e7;white-space:nowrap}.book-card p{font-size:9px;line-height:1.55;color:#b1d2ee;margin-top:8px}.book-card.locked{background:linear-gradient(#1c5089,#113968);box-shadow:inset 0 1px #5f8bb560,0 3px #072552}.book-card.locked .sprite-wrap svg{filter:brightness(0) saturate(0);opacity:.28}.book-card.locked h3{color:#9cc0df}.book-card.locked .type-tag{opacity:.7}.no-results{color:#b4d6ef;font-size:12px;padding:30px 10px}
/* Modal game panels share the same tactile edges as the main controls. */
dialog{width:min(calc(100vw - 26px),470px);padding:19px;max-height:calc(100dvh - 40px);border:3px solid #082451;border-radius:15px;color:#fff3dc;background:linear-gradient(145deg,#286db0,#154686);box-shadow:0 0 0 2px #d9b35f,inset 0 2px #75a8d590,0 15px 70px #021431b0;overscroll-behavior:contain}dialog::backdrop{background:#031631c9;backdrop-filter:blur(4px)}.modal-head{margin-bottom:11px;gap:10px}.modal-head h2{font:800 24px/1.1 var(--serif);color:#fff0c6;letter-spacing:0}.close{min-width:34px;width:34px;height:34px;border:2px solid #062854;border-radius:8px;background:linear-gradient(#6598c3,#35679d);color:#ecf7ff;box-shadow:inset 0 1px #aacde3,0 2px #061d43}.close .icon{width:18px;height:18px}.modal-sub{font-size:11px;line-height:1.6;color:#b1d1eb;margin:0 0 15px}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.choice{padding:9px;gap:5px;border:2px solid #082654;border-radius:10px;background:linear-gradient(#3175b5,#1b518e);box-shadow:inset 0 1px #80add685,0 2px #082451}.choice:hover{border-color:#f8d283}.choice strong{font:800 13px var(--serif);color:#fff2d4}.choice small{font-size:9px;color:#b1d1ec}.choice svg{height:75px;width:75px}.monster-detail>.creature-stage,.encounter-stage{background:radial-gradient(ellipse at 50% 75%,#6d9ec57a,#2c619838 49%,transparent 70%)}.monster-detail>.creature-stage{height:150px;margin:0 0 10px}.monster-detail .creature-stage svg{height:145px;width:145px}.monster-detail p{color:#b7d7ef;font-size:11px;line-height:1.65}.stats-grid{gap:7px;margin:14px 0}.stats-grid div{padding:10px 5px;border:2px solid #0b2f61;border-radius:8px;background:#103c78;box-shadow:inset 0 1px #3c75a58c}.stats-grid small{font-size:8px;color:#94bde0;margin-bottom:4px;font-weight:800}.stats-grid strong{font:800 17px var(--serif);color:#ffe4a4}.modal-actions{gap:8px;margin-top:16px}.modal-actions .btn{font-size:12px;padding:10px;min-height:45px}.encounter-stage{height:170px}.encounter-stage svg{height:145px;width:145px}.encounter-title h3{font:800 25px var(--serif);color:#fff2d1;margin:8px 0}.encounter-status{font-size:11px;color:#b3d4ee;line-height:1.55}.hp-row{font-size:9px;color:#b8d7ef;margin-top:15px}.hp-bar{height:9px;border:2px solid #082a59;background:#092e66;margin:7px 0 14px}.hp-bar i{background:linear-gradient(#b7e580,#7bbd5d)}.encounter-buttons{gap:8px}.encounter-buttons .btn{font-size:11px;min-height:48px}.result-art{height:190px;background:radial-gradient(circle,#dfc47655,transparent 67%)}.result-art svg{height:170px;width:170px}.result-heading{font:800 26px var(--serif);color:#fff0be}.result-sub{font-size:11px;line-height:1.6;color:#b2d2ed}.journal-entry{background:#103b74;border:1px solid #427ab0;color:#d7e9f7;padding:11px;border-radius:8px;font-size:11px}.journal-entry small{color:#8cb7dc;font-size:9px}.help-steps p{font-size:11px;color:#bad7ee;line-height:1.7}.help-steps strong{color:#ffe49b}.toast{bottom:calc(92px + env(safe-area-inset-bottom));width:max-content;max-width:min(90vw,440px);padding:11px 18px;border-radius:10px;border:2px solid #e4bc65;background:linear-gradient(#194d83,#092e62);box-shadow:0 4px #052047,0 8px 25px #001b465c;color:#fff0ca;font-size:11px;font-weight:750;text-shadow:0 1px #081e44}
/* Directional touch controls supplied by the app. */
.dpad,.touch-dpad,.movement-controls{position:absolute;left:12px;bottom:65px;z-index:3;display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);gap:3px;pointer-events:auto;filter:drop-shadow(0 2px #09295270)}.dpad button,.touch-dpad button,.movement-controls button{min-width:34px;min-height:34px;background:linear-gradient(#578fbdc9,#1f538dc9);border:2px solid #173961;border-radius:8px;box-shadow:inset 0 1px #bbd6e27a;color:#f9e4b8;display:grid;place-items:center;touch-action:manipulation}.dpad button[data-direction='up'],.touch-dpad button[data-direction='up'],.movement-controls button[data-direction='up']{grid-column:2;grid-row:1}.dpad button[data-direction='left'],.touch-dpad button[data-direction='left'],.movement-controls button[data-direction='left']{grid-column:1;grid-row:2}.dpad button[data-direction='down'],.touch-dpad button[data-direction='down'],.movement-controls button[data-direction='down']{grid-column:2;grid-row:2}.dpad button[data-direction='right'],.touch-dpad button[data-direction='right'],.movement-controls button[data-direction='right']{grid-column:3;grid-row:2}
.map-panel.expanded{position:fixed;left:50%;right:auto;top:12px;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 20px);max-width:500px;height:auto!important;min-height:0!important;max-height:none;z-index:44;box-shadow:0 0 0 100vmax #031d419e,0 0 0 1px #e2b85d}.map-panel.expanded .canvas-wrap{min-height:0;flex:1}
@media(min-width:420px){main{padding-left:14px;padding-right:14px}.game-layout .map-panel,.map-panel{height:355px;min-height:355px;max-height:355px}.resources{gap:10px}.resource{gap:8px}.resource strong{font-size:20px}.resource small{font-size:8px}.map-btn{font-size:11px}.book-grid{gap:11px}.book-card .sprite-wrap{height:132px}.book-card .sprite-wrap svg{height:118px;width:118px}}
@media(min-width:700px){body{margin-top:18px;margin-bottom:18px;min-height:calc(100dvh - 36px);border:3px solid #082652;border-radius:20px;overflow:visible;box-shadow:0 0 0 1px #3173ad,0 20px 90px #001a35b0}.header{border-radius:17px 17px 0 0}.header nav{max-width:514px;bottom:18px;border-radius:0 0 17px 17px}.nav-btn{height:64px}.map-panel.expanded{top:28px;bottom:112px;max-width:490px}.toast{bottom:112px}}
@media(max-width:359px){main{padding:9px 9px 0}.header{padding-left:11px;padding-right:11px}.brand{font-size:24px}.resources{gap:5px}.resource{gap:4px;padding-right:4px}.resource>span{width:25px;min-width:25px;height:27px}.resource>span .icon{width:18px}.resource strong{font-size:17px}.resource small{font-size:6px}.out-of{font-size:9px}.game-layout .map-panel,.map-panel{height:330px;min-height:330px;max-height:330px}.location-pill strong{font-size:12px}.weather{font-size:7px}.map-btn{padding:8px;font-size:9px;gap:4px}.panel-heading h2{font-size:19px}.panel-heading>span{font-size:6px}.home-den{gap:7px 8px}.monster-card h3{font-size:12px}.monster-card>svg{height:58px;width:58px}.monster-card.empty span{font-size:9px}.book-card{padding:10px}.book-card h3{font-size:14px}.book-card p{font-size:8px}.nav-btn{font-size:11px}.small-count{right:15%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.map-dpad{position:absolute;left:14px;bottom:75px;z-index:3;display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:2px;pointer-events:auto;filter:drop-shadow(0 3px 0 #06234d66)}.map-dpad button{display:grid;place-items:center;min-width:34px;min-height:34px;padding:4px;border:2px solid #153763;border-radius:8px;background:linear-gradient(#5a96c5cf,#174c87cf);box-shadow:inset 0 1px #b9d4e877,0 1px #09234c;color:#ffe4a2;touch-action:manipulation}.map-dpad button:active{background:linear-gradient(#ffe7a2,#d4a63e);color:#123e72}.map-dpad .icon{height:18px;width:18px;stroke-width:2.5}.map-dpad .dpad-up{grid-column:2;grid-row:1}.map-dpad .dpad-left{grid-column:1;grid-row:2}.map-dpad .dpad-right{grid-column:3;grid-row:2}.map-dpad .dpad-down{grid-column:2;grid-row:3}.map-dpad .dpad-up .icon{transform:rotate(-90deg)}.map-dpad .dpad-left .icon{transform:rotate(180deg)}.map-dpad .dpad-down .icon{transform:rotate(90deg)}.map-dpad:after{content:'';grid-column:2;grid-row:2;align-self:center;justify-self:center;width:7px;height:7px;border-radius:50%;background:#d7cb9a99;box-shadow:0 1px 0 #092b5366}

/* Keep decorations clear of labels and provide comfortable mobile targets. */
.nursery-feature:after{top:28%;right:14%;font-size:23px;opacity:.5}.nursery-feature h2{font-size:21px;max-width:320px;position:relative;z-index:1}.nursery-feature p{position:relative;z-index:1}.map-dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:2px}.map-dpad button{min-width:40px;min-height:40px}.filter-list button{min-height:40px}.close{min-width:40px;width:40px;height:40px}