/* Home composition; asset bounds and slice coordinates: src/assets/home/README.md. */
body.at-home{background:radial-gradient(ellipse at top,#674a30,#201711 75%)}
.at-home>.wrap{padding:0}.at-home .mast{display:none}
#workshopHome{
 --objective-height:clamp(72px,19cqw,90px);--cards-height:clamp(64px,17cqw,78px);
 --adventure-height:clamp(88px,25cqw,116px);--footer-height:clamp(64px,18cqw,84px);
 container-type:inline-size;position:relative;isolation:isolate;width:min(100%,480px,56svh);
 height:100svh;min-height:560px;max-height:1080px;margin:0 auto;overflow:hidden;color:#fff1d4;
 background:#39261b url('assets/home/backgrounds/workshop-at-desk.png') center top/110% auto no-repeat;
 box-shadow:0 0 80px #100b0bd9;font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
}
.home-title{position:absolute;z-index:2;top:max(0px,env(safe-area-inset-top));left:1%;width:58%;aspect-ratio:691/326;background:url('assets/home/frames/title-plaque.png') center/contain no-repeat;filter:drop-shadow(0 3px 3px #20120870)}
.home-title h1{position:absolute;inset:28% 14% 32%;margin:0}
.home-title .home-label-wrap{width:100%;height:100%}
.home-title-potion{position:absolute;width:13%;height:34%;top:0;left:45%;object-fit:contain;transform:rotate(-12deg)}
.home-player{position:absolute;top:calc(max(0px,env(safe-area-inset-top)) + 18cqw);left:10%;z-index:2;width:37%;height:6.5cqw;display:flex;justify-content:center;align-items:center;gap:10px;font-size:clamp(11px,3cqw,14px);text-shadow:0 2px 2px #160c07}
.home-player::before{content:"";position:absolute;z-index:-1;inset:-15% -4%;background:url('assets/home/frames/player-plate.png') 65% 58%/119% auto no-repeat}
.home-player b{color:#ffe4ac;font-variant-numeric:tabular-nums}
.home-actions{position:absolute;z-index:3;bottom:0;left:0;width:100%;display:grid;grid-template-rows:var(--objective-height) var(--cards-height) var(--adventure-height) var(--footer-height);gap:7px;padding:0 3.5% max(8px,env(safe-area-inset-bottom))}
.home-actions::before{content:"";position:absolute;z-index:-2;inset:-28px 0 0;pointer-events:none;background:linear-gradient(180deg,transparent,#28190c66 22%,#21130fa8 100%)}
.home-objective,.home-card,.home-adventure,.home-footer{position:relative;isolation:isolate}
.home-objective::before,.home-card::before,.home-adventure::before,.home-footer::before{content:"";position:absolute;z-index:-1;pointer-events:none;border-style:solid;border-color:transparent}
.home-objective{display:flex;align-items:center;gap:5px;width:94%;margin:auto;height:100%;padding:8px 13px 6px 6px;color:#563a23;filter:drop-shadow(0 3px 3px #120a0960)}
.home-objective::before{inset:-18px -6px -12px;border-width:28px 24px 20px;border-image:url('assets/home/frames/objective-panel.png') 100 84 70 84 fill/28px 24px 20px}
.home-objective>img{flex:none;width:16%;height:100%;object-fit:contain}
.home-objective-copy{display:flex;flex-direction:column;min-width:0;gap:1px}
.home-objective small{display:flex;align-items:center;gap:7px;color:#765332;font-size:clamp(10px,2.6cqw,12px);font-weight:700;line-height:1.25}
.home-objective small::after{content:"";width:38px;height:1px;background:linear-gradient(90deg,#a3783b,transparent)}
.home-objective strong{font-size:clamp(14px,4.1cqw,20px);line-height:1.35}
.home-objective-copy>span{font-size:clamp(10px,2.7cqw,13px);line-height:1.4;color:#755436}
.home-cards{display:grid;grid-template-columns:1fr;min-height:0}
#homePrepare{display:block;padding:0;width:100%;justify-self:center;text-shadow:0 2px 3px #102719}
#homePrepare::before{filter:drop-shadow(0 4px 3px #120c08a0)}
#homePrepare .home-card-art img{filter:drop-shadow(0 3px 2px #112516)}
#homePrepare>img:last-child{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:8%;height:32px;object-fit:contain;pointer-events:none}
#homePrepare .home-card-art{position:absolute;left:5%;top:12%;width:23%;height:76%}
#homePrepare .home-label-wrap{position:absolute;left:27%;right:15%;top:18%;width:auto;height:46%;justify-content:center;filter:none}
#homePrepare .home-label{width:100%;height:100%;object-position:center}
#homePrepare small{position:absolute;left:27%;right:15%;top:64%;margin:0;text-align:center;font-size:clamp(11px,2.8cqw,13px);line-height:1.3}
.home-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;min-height:0;padding:9px 7px 12px;border:0;border-radius:13px;background:transparent;text-align:center;text-shadow:0 2px 3px #150a09}
/* Full-height end caps keep the ornate corners in proportion; only the blue middle stretches.
   Source 634x353, visible frame y=37..303 (266px); end caps 180px each. */
.home-card::before{
 inset:calc(var(--cards-height) * -37 / 266) calc(var(--cards-height) * -38 / 266) calc(var(--cards-height) * -50 / 266) calc(var(--cards-height) * -33 / 266);
 border-width:0 calc(var(--cards-height) * 180 / 266);
 border-image:url('assets/home/frames/equipment-card.png') 0 180 0 180 fill / 0 calc(var(--cards-height) * 180 / 266) stretch;
 filter:drop-shadow(0 4px 3px #120c08a0);
}
.home-card-art{position:relative;width:100%;flex:1;min-height:0}
.home-card-art::before{content:"";position:absolute;inset:15% 0 -14%;background:url('assets/home/icons/ivy-left.png') left bottom/44% auto no-repeat;opacity:.42;pointer-events:none}
.home-card-art img{position:absolute;object-fit:contain;filter:drop-shadow(0 3px 3px #160d0980)}
.home-card-art img:nth-child(1){width:49%;height:115%;left:0;bottom:-8%;transform:rotate(-13deg)}
.home-card-art img:nth-child(2){width:48%;height:109%;left:29%;bottom:-1%}
.home-card-art img:nth-child(3){width:44%;height:89%;right:-1%;bottom:-5%}
.crafting .home-card-art img:nth-child(1){width:62%;height:112%;left:0;bottom:-8%;transform:rotate(-5deg);z-index:1}
.crafting .home-card-art img:nth-child(2){width:60%;height:110%;left:auto;right:-1%;bottom:1%;transform:rotate(8deg)}
.home-label-wrap{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.home-label{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.home-card .home-label-wrap{flex:none;width:85%;height:28%;z-index:2;filter:drop-shadow(0 2px 2px #170d0b)}
.home-card small{margin-top:2px;font-size:clamp(11px,2.9cqw,14px);line-height:1.3;color:#fff0cf;white-space:nowrap}
.home-adventure{width:100%;min-height:0;border:0;border-radius:15px;padding:0;background:transparent;text-shadow:0 2px 3px #102719}
/* Full-height end caps: preserve flowers; only the plain middle stretches.
   Source 638x288, visible frame y=37..236 (199px); end caps 180px each. */
.home-adventure::before{
 inset:calc(var(--adventure-height) * -37 / 199) calc(var(--adventure-height) * -28 / 199) calc(var(--adventure-height) * -52 / 199) calc(var(--adventure-height) * -29 / 199);
 border-width:0 calc(var(--adventure-height) * 180 / 199);
 border-image:url('assets/home/frames/adventure-button.png') 0 180 0 180 fill / 0 calc(var(--adventure-height) * 180 / 199) stretch;
 filter:drop-shadow(0 4px 3px #120c08a0);
}
.home-adventure>img:first-child{position:absolute;left:8%;top:50%;width:21%;height:76%;object-fit:contain;filter:drop-shadow(0 3px 2px #112516);transform:translateY(-50%) rotate(-10deg)}
.home-adventure>img:last-child{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:8%;height:32px;object-fit:contain}
.home-adventure>span{position:absolute;left:27%;right:15%;top:12%;bottom:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.home-adventure .home-label-wrap{width:94%;height:70%}
.home-adventure small{color:#fff3ce;font-size:clamp(11px,3cqw,14px);line-height:1.35;white-space:nowrap}
.home-footer{display:grid;grid-template-columns:repeat(3,1fr);min-height:0;margin-top:-9px;padding:4px 2px 8px}
/* Full-height end caps keep the diamond and scrollwork in proportion; only the wood middle stretches.
   Source 855x348, visible frame y=95..247 (152px); end caps 120px each. */
.home-footer::before{
 inset:calc(var(--footer-height) * -95 / 152) calc(var(--footer-height) * -31 / 152) calc(var(--footer-height) * -101 / 152) calc(var(--footer-height) * -27 / 152);
 border-width:0 calc(var(--footer-height) * 120 / 152);
 border-image:url('assets/home/frames/footer-bar.png') 0 120 0 120 fill / 0 calc(var(--footer-height) * 120 / 152) stretch;
}
.home-footer button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:44px;border:0;border-radius:5px;padding:0 4px;background:transparent}
.home-footer button+button::before{content:"✧";position:absolute;left:-5px;top:34%;font-size:17px;color:#b99257;text-shadow:0 1px #1e1108}
.home-footer button>img{width:clamp(32px,10cqw,46px);height:clamp(32px,10cqw,46px);object-fit:contain;filter:drop-shadow(0 2px 2px #170d07)}
.home-footer #homeSettings>img{transform:translateY(2px)}
.home-footer .home-label-wrap{width:76%;height:clamp(16px,4.5cqw,21px)}
.home-footer .label-settings{max-width:45px}
#workshopHome button:focus-visible{outline:3px solid #ffe6a0;outline-offset:-3px}
@media(hover:hover){#workshopHome button:hover{filter:brightness(1.12)}}
@media(prefers-reduced-motion:no-preference){#workshopHome button{transition:filter .15s,transform .15s}#workshopHome button:active{transform:translateY(2px) scale(.99)}}
/* Crop scenery before shrinking type or touch targets. */
@media(max-height:700px){
 #workshopHome{--objective-height:68px;--cards-height:64px;--adventure-height:88px;--footer-height:62px;background-size:100% auto}
 .home-actions{gap:5px}.home-title{width:52%}
 .home-player{top:calc(max(0px,env(safe-area-inset-top)) + 16cqw);width:38%;height:6.5cqw;left:8%}
}
/* Landscape remains scrollable when a full-size portrait UI cannot fit. */
@media(max-height:560px){#workshopHome{width:min(100%,320px)}}
/* Supporting menus share the workshop palette. */
.at-home #infoDialog{background:linear-gradient(135deg,#34291f,#261e1c);border:1px solid #b38b51;border-radius:14px;color:#fff0d4;box-shadow:inset 0 0 0 4px #1b120b,0 16px 65px #100a09b0}
.at-home #infoDialog .dialog-content{color:#e6d3b4}
.at-home #infoDialog h2,.at-home #infoDialog h3,.at-home #infoDialog b{color:#ffe3af}
.at-home #infoDialog button{border-color:#9a7549;background:#4a3727;color:#fff0d4}
#homeBack{margin-bottom:18px}
.home-list-entry{padding:12px 0;border-bottom:1px solid #ac875c44}.home-list-entry p{margin:3px 0}
.home-inventory-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #ac875c44;font-size:13px}
.dialog-content h3{margin-top:16px}.dialog-content [data-home-difficulty][aria-pressed=true]{border-color:var(--gold);background:#574332}