/* Hakoniwami: a garden notebook. Washi paper, sumi ink outlines that wobble like a brush pen,
   one vermilion seal colour for actions, moss and indigo for the rest. Flat fills, no gradients or glass. */
:root{
  --paper:#f5f0e6; --paper-2:#e9e0d1; --card:#fffaf2; --card-2:#f0e8da; --ink:#282d29; --ink-soft:#535f58; --line:rgba(40,45,41,.23);
  --flame:#c8402a; --seal:#47704a; --seal-text:#3b5f3e; --seal-soft:#e1ebd8; --on-seal:#fffaf2; --warn:#a33d52; --moss-ui:#466a47; --moss-soft:#dce9d9; --indigo:#34506b; --gold:#c9962e; --gold-soft:#f2e3bd; --petal:#e48aa0;
  --print:2px 3px 0 rgba(43,38,34,.16);
  --ground:#cdd6c1; --fence:#8a7a62; --step:#b4b3a6; --gravel:#ede6d4; --rake:#cbc3ad; --stone:#7b7e77; --stone-2:#a9aca3; --stone-l:#9a9c93;
  --water:#7fb0bf; --water-hi:#eef6f5; --lily:#5d8a4a; --wood:#8a6a4a; --roof:#3a3f3c; --shoji:#f4efe0;
  --bamboo:#7c9b4b; --bamboo-2:#97b45f; --bamboo-leaf:#6b8e44; --bridge:#c94a32; --soil:#c9ad84; --shade:rgba(38,52,30,.2);
  --moss:#5c8a3a; --moss-2:#86a85c; --glaze:#34506b; --glaze-2:#4b6f8a; --bark:#5a4232;
  --night:#203230; --grass:#5a7a48; --shrub:#2c4430;
  --f-title:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",Georgia,serif;
  --f-body:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#1f1c18; --paper-2:#29251f; --card:#2a2620; --card-2:#332e27; --ink:#efe6d6; --ink-soft:#b5a993; --line:rgba(239,230,214,.22);
  --flame:#ef6f55; --seal:#8fbf84; --seal-text:#a6cf9a; --seal-soft:#2d3a27; --on-seal:#1f1c18; --warn:#e0788a; --moss-ui:#93b56a; --moss-soft:#2f3a24; --gold:#e0b452; --gold-soft:#3d3220; --print:2px 3px 0 rgba(0,0,0,.35);
  --gravel:#3a3730; --rake:#4f4b42; --stone:#8b8e86; --soil:#6a573f; --shade:rgba(0,0,0,.25); --night:#152220; --grass:#3d5532; --bark:#b29a80; color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#1f1c18; --paper-2:#29251f; --card:#2a2620; --card-2:#332e27; --ink:#efe6d6; --ink-soft:#b5a993; --line:rgba(239,230,214,.22);
  --flame:#ef6f55; --seal:#8fbf84; --seal-text:#a6cf9a; --seal-soft:#2d3a27; --on-seal:#1f1c18; --warn:#e0788a; --moss-ui:#93b56a; --moss-soft:#2f3a24; --gold:#e0b452; --gold-soft:#3d3220; --print:2px 3px 0 rgba(0,0,0,.35);
  --gravel:#3a3730; --rake:#4f4b42; --stone:#8b8e86; --soil:#6a573f; --shade:rgba(0,0,0,.25); --night:#152220; --grass:#3d5532; --bark:#b29a80; color-scheme:dark;}

[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1.48;-webkit-tap-highlight-color:transparent;overflow:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px dashed var(--seal);outline-offset:3px}
input{font:inherit;color:var(--ink);background:var(--card);border:none;border-bottom:2px solid var(--ink);border-radius:0;padding:8px 4px;min-width:0}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;filter:url(#rough-i)}
h1,h2,h3{font-family:var(--f-title);font-weight:400;letter-spacing:.01em}

/* ---------- ink: a wobbling brush-pen outline drawn over anything with .ink ---------- */
.ink{position:relative;isolation:isolate}
.ink::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);border-radius:inherit;pointer-events:none;filter:url(#rough);z-index:1}
/* 1.69: a bordered box whose content scrolls keeps its hand-drawn border still: the box clips, an inner .isc scrolls */
.ink.inkScroll{display:flex !important;flex-direction:column;overflow:hidden !important;overflow:clip !important}
.inkScroll>.isc{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.panel.inkScroll>.isc{display:flex;flex-direction:column;gap:inherit}
#fcat .item{min-width:0}#fcat .item .nm{overflow-wrap:anywhere;hyphens:auto}#iPanel .ornBrowse,#iPanel .chips{flex-wrap:wrap;min-width:0}
.ink.thin::after{border-width:1.5px;opacity:.8}
@keyframes boil{0%{filter:url(#rough)}33%{filter:url(#rough-b)}66%{filter:url(#rough-c)}}

.saveWarning{position:fixed;z-index:100;top:env(safe-area-inset-top,0px);left:10px;right:10px;max-width:640px;margin:auto;padding:12px 16px;background:#652e2e;color:#fff9f1;border-radius:12px;box-shadow:0 4px 18px #0004;font-size:14px}
/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(12px) rotate(-.4deg)}to{opacity:1;transform:none}}
@keyframes stamp{0%{transform:scale(1.8) rotate(-14deg);opacity:0}60%{transform:scale(.92) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-6deg)}}
@keyframes sheetUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes bump{30%{transform:scale(1.16) rotate(-3deg)}60%{transform:scale(.97)}}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.4) rotate(220deg);opacity:0}}
@keyframes draw{from{stroke-dashoffset:var(--len,400)}to{stroke-dashoffset:0}}
.stagger>*{animation:rise .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(min(var(--i,0),8)*45ms)}
.tab.show{animation:rise .35s ease}

/* Readability and action hierarchy: keep the objective visible even for step-skimmers. */
.step-label{margin:8px 0 3px;font-family:var(--f-title);font-size:15px;color:var(--ink-soft);letter-spacing:.02em}
.brief .goal{padding:11px 13px;border-left:4px solid var(--seal);background:var(--seal-soft);border-radius:3px 12px 12px 3px;font-size:20px;line-height:1.42}
.brief .steps{gap:10px}
.brief .steps li{padding:9px 11px;background:var(--card-2);border-radius:12px;line-height:1.55;color:var(--ink);font-size:15.5px}
.brief .steps li::before{font-weight:600;font-size:19px}
.btn.primary{font-weight:700}
.btn:focus-visible,nav.tabs button:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ink:hover::after{animation:none}.stagger>*{animation:none}.tab.show{animation:none}.item,.btn{transition:none}}
@media(hover:none){.ink:hover::after{animation:none}.item:hover:not(:disabled){transform:none}}
/* ---------- shell ---------- */
#shell{height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:6px 4px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));position:relative;z-index:6}
.brand{display:flex;align-items:center;gap:6px;min-width:0}
.brand canvas{width:50px;height:50px;flex:none;margin:-4px -2px -4px -6px}
.brand h1{font-size:28px;margin:0;line-height:1;white-space:nowrap}
.hanko{display:inline-grid;place-items:center;writing-mode:vertical-rl;font-family:var(--f-title);font-size:11px;line-height:1;color:var(--on-seal);background:var(--seal);padding:4px 3px;border-radius:3px;transform:rotate(-6deg);margin-left:4px;box-shadow:inset 0 0 0 1.5px rgba(255,248,238,.5)}
.counts{display:flex;gap:6px}
.count{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:12px 14px 11px 15px;background:var(--card);font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.count canvas,.count svg{width:18px;height:18px}
.count.streak svg{color:var(--flame);filter:none}
.count.bump{animation:bump .5s ease}
main{flex:1;min-height:0;position:relative}
.tab{position:absolute;inset:0;overflow-y:auto}
.col{max-width:620px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px 112px;box-sizing:border-box;display:grid;gap:16px}

nav.tabs{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(460px,calc(100% - 24px));display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-radius:18px 22px 17px 21px;box-shadow:var(--print);padding:5px;z-index:8;box-sizing:border-box}
nav.tabs .ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/5);border-radius:14px 12px 15px 11px;background:var(--seal-soft);transition:transform .45s cubic-bezier(.2,1.3,.35,1);z-index:0}
nav.tabs button{border:none;background:none;padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;color:var(--ink-soft);position:relative;z-index:2}
nav.tabs button svg{width:24px;height:24px;transition:transform .3s}
nav.tabs button[aria-current="page"]{color:var(--seal-text,var(--seal))}
nav.tabs button[aria-current="page"] svg{transform:rotate(-6deg) scale(1.1)}
nav.tabs .dot{position:absolute;top:2px;right:calc(50% - 22px);min-width:18px;height:18px;border-radius:50%;background:var(--seal);color:var(--on-seal);font-size:11px;display:grid;place-items:center;transform:rotate(-8deg);font-family:var(--f-title)}

/* ---------- garden (3D) ---------- */
#tab-garden{overflow:hidden}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
/* 1.48: the paper grain lies over the live canvases as a blended layer, so the canvases never paint it themselves */
.paperfx{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.16;background-repeat:repeat;background-size:160px 160px;border-radius:inherit}
html.nopaper .paperfx{display:none}
#world.panning,#world.placing.panning{cursor:grabbing}
#world.placing{cursor:copy}
.ov{position:absolute;z-index:2}
.visit{top:8px;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));margin:0 auto;max-width:520px;background:var(--card);border-radius:14px 18px 13px 17px;padding:8px 10px;display:flex;gap:10px;align-items:center;font-size:14px;animation:rise .4s ease both;box-shadow:var(--print)}
.visit img{width:34px;height:34px;border-radius:50%}
.visit .tx{flex:1;min-width:0;line-height:1.35}
.worldBar{bottom:calc(88px + env(safe-area-inset-bottom,0px));right:max(14px,env(safe-area-inset-right,0px))}
.worldBar.two:not([hidden]){display:flex;gap:8px}
.fab{border:none;background:var(--seal);color:var(--on-seal);border-radius:20px 24px 19px 25px;padding:12px 18px 12px 14px;font-size:17px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--print);animation:rise .5s ease .2s both;transition:transform .2s}
.fab:hover{transform:rotate(-2deg) translateY(-2px)}
.fab.alt{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.fab:active{transform:scale(.95)}
.fab svg{animation:sway 3s ease-in-out infinite}
/* Optional immersive, eye-level garden exploration */
.worldBar:not([hidden]){display:flex;gap:8px;align-items:center}
/* Compact auto-pan control beside Tend, not floating over the garden. */
#bAutoPan{position:relative;flex:0 0 42px;width:42px;height:42px;display:inline-grid;place-items:center;padding:0;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--print);cursor:pointer;transition:background .16s,transform .16s}
#bAutoPan .panGlyph{display:grid;place-items:center;width:25px;height:25px}
#bAutoPan .panGlyph svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:none}
#bAutoPan:hover:not(:disabled){transform:translateY(-2px)}
#bAutoPan[aria-pressed="true"]{background:var(--card-2);color:var(--seal-text,var(--seal))}
#bAutoPan:disabled{opacity:.5;cursor:default}
#bAutoPan:focus-visible{outline:3px solid var(--seal);outline-offset:2px}
#tab-garden.walking #bAutoPan{display:none}
@media(max-width:420px){#bAutoPan{flex-basis:38px;width:38px;height:38px}.worldBar{flex-wrap:wrap;max-width:calc(100% - 24px);justify-content:flex-end}.worldBar .fab{font-size:15px;padding:10px 12px}}
#bWalk{font-size:15px;padding:11px 15px;white-space:nowrap}
#bWalk:disabled{opacity:1;cursor:default;animation:none;transform:none;background:var(--card-2)}
#tab-garden.walking #world{cursor:crosshair}
#tab-garden.walking #world:active{cursor:grabbing}
#tab-garden.walking #bEdit{display:none}
.walkHUD{position:absolute;inset:0;z-index:3;pointer-events:none;color:#fdf8ea;font-family:var(--f-body),sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.walkHUD[hidden]{display:none!important}
.walkGuide{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(31,37,29,.82);border:1px solid rgba(255,255,255,.2);padding:9px 13px;border-radius:13px;white-space:nowrap;font-size:13px;box-shadow:0 3px 16px #0003}
.walkGuide span{opacity:.72}
.walkCrosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 2px #000b)}
.walkCrosshair i{position:absolute;display:block;background:#fff9e7;border-radius:2px}
.walkCrosshair i:first-child{width:2px;height:19px;left:10px;top:1px}
.walkCrosshair i:last-child{height:2px;width:19px;top:10px;left:1px}
.walkCrosshair.near i{background:#f6d18b}
.walkPrompt{position:absolute;left:50%;top:calc(50% + 23px);transform:translateX(-50%);background:rgba(31,37,29,.84);border-radius:9px;padding:7px 12px;font-size:14px;max-width:80%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.walkAction{position:absolute;left:50%;top:calc(50% + 69px);transform:translateX(-50%);background:var(--seal);color:var(--on-seal);border:1px solid #fff5;border-radius:16px;padding:10px 14px;font-size:15px;pointer-events:auto;box-shadow:var(--print)}
.walkAction[hidden]{display:none}
.walkDpad{display:none}
.walkEsc{display:none;position:absolute;right:12px;top:12px;background:rgba(31,37,29,.88);color:#fff9e7;border:1px solid #fff6;border-radius:12px;padding:10px 14px;font:inherit;font-size:13px;pointer-events:auto}
#tab-garden.walking .drawer:not([hidden])~.walkHUD .walkCrosshair{display:none}
@media(pointer:coarse){.walkEsc{display:block}.walkGuide{font-size:12px;top:10px;max-width:calc(100% - 24px);white-space:normal;text-align:center}.walkDpad{position:absolute;left:14px;bottom:calc(106px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:4px;pointer-events:auto;touch-action:none}.walkDpad button{font-size:24px;border-radius:15px;background:#273427cc;color:white;border:1px solid #fff6;touch-action:none;user-select:none}.walkDpad [data-walk="KeyW"]{grid-column:2;grid-row:1}.walkDpad [data-walk="KeyA"]{grid-column:1;grid-row:2}.walkDpad [data-walk="KeyS"]{grid-column:2;grid-row:2}.walkDpad [data-walk="KeyD"]{grid-column:3;grid-row:2}.walkAction{top:calc(50% + 57px)}}
@media(max-width:560px){#bWalk{font-size:14px;padding:10px 12px}.walkGuide{max-width:calc(100% - 20px)}}
.drawer{left:0;right:0;bottom:0;max-height:min(48%,430px);display:flex;flex-direction:column;background:var(--card);border-radius:22px 26px 0 0;z-index:9;animation:sheetUp .45s cubic-bezier(.2,1.1,.35,1) both;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -3px 0 rgba(43,38,34,.08)}
.drawer.collapsed{max-height:60px;overflow:hidden}.drawer.collapsed .db{display:none}.drawer.collapsed .dh{padding-bottom:12px}
.drawer::before{content:"";display:block;width:46px;height:4px;border-radius:3px;background:var(--line);margin:8px auto 0}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:6px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.drawer .dh h3{margin:0;font-size:23px;flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.drawer .dh .sheetPeek{width:38px;height:38px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);border-radius:12px;font-size:22px;flex:none}
.drawer.collapsed .sheetPeek{transform:rotate(180deg)}
@media(max-width:560px){.drawer{max-height:min(44%,370px)}.drawer .dh h3{font-size:18px}.drawer .dh{padding-top:3px}.drawer .db{padding-bottom:10px}.drawer .cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.drawer .dh h3 small{font-family:var(--f-body);font-size:13px;color:var(--ink-soft)}
.x{border:none;background:none;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%}
.x:hover svg{transform:rotate(90deg)}.x svg{transition:transform .3s}
.drawer .db{overflow-y:auto;padding:4px max(16px,env(safe-area-inset-right,0px)) 22px max(16px,env(safe-area-inset-left,0px));display:grid;gap:12px;max-width:860px;width:100%;margin:0 auto;box-sizing:border-box}
.drawer p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.drawer p b{color:var(--ink)}
.seg{display:inline-flex;background:var(--card-2);border-radius:12px 14px 11px 15px;padding:3px;gap:2px}
.seg button{border:none;background:none;padding:7px 14px;border-radius:10px;font-size:15px;color:var(--ink-soft)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--print)}
.cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.item{border:none;background:var(--card-2);border-radius:14px 17px 13px 16px;padding:8px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;min-width:0;transition:transform .2s}
.item:nth-child(3n){border-radius:17px 13px 16px 14px}
.item:hover:not(:disabled){transform:rotate(-1deg) translateY(-3px)}
.item:active:not(:disabled){transform:scale(.96)}
.item canvas{width:72px;height:72px}
.item .nm{font-size:14px;line-height:1.2}
.item .jp{font-size:12px;color:var(--ink-soft)}
.item .meta{font-size:13px;color:var(--ink-soft)}
.item .meta .c{color:var(--seal)}
.item:disabled{opacity:.5;cursor:not-allowed}
.item.locked{opacity:.55}
.item.locked canvas{filter:grayscale(1) contrast(.7)}
.item .lock{font-size:12px;color:var(--ink-soft)}
.item.sel{background:var(--seal-soft)}
/* A tidy ornament browser: search and filters take one compact row on small screens. */
.ornBrowse{display:grid;gap:8px;min-width:0}
#ornSearch{font:inherit;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;min-width:0;box-sizing:border-box}
#ornSearch:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
.ornFilters{display:flex;flex-wrap:wrap;gap:6px}
.ornFilters button{font:inherit;font-size:12.5px;min-height:32px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-soft)}
.ornFilters button[aria-pressed="true"]{background:var(--seal-soft);color:var(--ink);border-color:var(--seal)}
.ornTile{position:relative;min-width:0}
/* 1.67: smaller ornament tiles, so more of the collection fits on screen at once */
#cat{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
#cat .item{padding:6px 4px 7px}#cat .item canvas{width:52px;height:52px}#cat .item .nm{font-size:13px}#cat .item .meta,#cat .item .lock{font-size:12px}
#cat .ornTile>.item{padding-top:8px}
/* 1.68: the furnishing grid uses the same compact tiles as the ornament grid */
#iPanel #fcat{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}#fcat .item{padding:6px 4px 7px}#iPanel #fcat .item canvas{width:52px;height:52px}#fcat .item .nm{font-size:13px}#fcat .item .meta{font-size:12px}
#fcat .ornTile>.item{padding-top:8px}
@media(max-width:560px){#iPanel #fcat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:359px){#iPanel #fcat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.drawer #cat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:359px){.drawer #cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ornTile>.item{width:100%;height:100%;box-sizing:border-box;padding-top:11px}
.ornTile>.ornStar{position:absolute;right:3px;top:3px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink-soft);font-size:23px;line-height:26px;display:grid;place-items:center;z-index:1}
.ornTile>.ornStar.isOn{color:var(--seal);background:var(--seal-soft)}
.ornTile>.ornStar:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.catalogEmpty{grid-column:1/-1;text-align:center;padding:18px;background:var(--card-2);border-radius:12px;color:var(--ink-soft)}
.inspirationCard{border:1px solid var(--line)}
.ideaHead{display:flex;justify-content:space-between;align-items:center}
.inspirationCard .row .btn,.photoCard .btn{min-height:40px}
@media(max-width:350px){.ornFilters{gap:4px}.ornFilters button{font-size:11.5px;padding:5px 8px}.ornTile>.ornStar{width:30px;height:30px}}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px;align-items:center}
.kv span:nth-child(odd){color:var(--ink-soft)}
.lvl{display:flex;gap:5px}
.lvl i{width:22px;height:8px;border-radius:4px 2px 4px 3px;border:1.5px solid var(--ink);display:block;box-sizing:border-box}
.lvl i.on{background:var(--seal)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:none;border-radius:13px 16px 12px 15px;padding:10px 17px;font-size:15.5px;background:var(--card);display:inline-flex;align-items:center;gap:8px;box-shadow:var(--print);transition:transform .15s}
.btn:hover:not(:disabled){transform:translateY(-2px) rotate(-.6deg)}
.btn:active:not(:disabled){transform:translate(2px,3px);box-shadow:none}
.btn.primary{background:var(--seal);color:var(--on-seal)}
.btn.green{background:var(--moss-ui);color:var(--on-seal)}
.btn.gold{background:var(--gold-soft);color:var(--ink)}
.btn.muted{background:var(--card-2);color:var(--ink-soft)}.btn.muted.armed{background:var(--ink-soft)!important;color:var(--card)!important}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary:disabled{opacity:1;background:var(--card-2);color:var(--ink-soft);box-shadow:none}
.btn .n{font-family:var(--f-title)}
.btn.big{padding:13px 22px;font-size:17px}
.btn.quiet{background:none;box-shadow:none;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:5px;text-decoration-color:var(--line);padding:8px 6px}
.btn.quiet::after{display:none}
.frow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:var(--card-2);border-radius:13px 16px 12px 15px;padding:10px 12px}
.frow > span{font-size:13.5px;color:var(--ink-soft);line-height:1.4;grid-column:1}
.frow .btn{grid-row:1/3;grid-column:2;padding:8px 13px;font-size:14px}
.petcard{display:grid;grid-template-columns:72px 1fr;gap:2px 12px;align-items:center;background:var(--card-2);border-radius:14px 17px 13px 16px;padding:10px;animation:rise .4s ease both}
.petcard canvas{width:72px;height:72px;grid-row:1/4}
.petcard b{font-size:17px}
.petcard > span{font-size:13.5px;color:var(--ink-soft)}
.coats{display:flex;gap:8px;flex-wrap:wrap}
.coat{border:none;background:var(--card-2);border-radius:12px 14px 11px 13px;padding:4px 6px 6px;display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--ink-soft);min-width:72px}
.coat canvas{width:56px;height:56px}
.coat.sel{background:var(--seal-soft);color:var(--ink)}
.price{display:flex;align-items:center;gap:6px;justify-content:center;font-size:16px}
.price b{font-family:var(--f-title);font-weight:400;font-size:22px;color:var(--seal)}
.hearts{color:var(--flame);letter-spacing:2px;font-size:12px}
.stylecard{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;background:var(--card-2);border:none;border-radius:14px 17px 13px 16px;padding:8px;transition:transform .2s}
.stylecard:hover:not(:disabled){transform:rotate(-1deg) translateY(-3px)}
.stylecard.cur{background:var(--seal-soft)}
.stylecard canvas{width:120px;height:96px}
.stylecard span{font-size:12.5px;color:var(--ink-soft)}
.stylecard .c{color:var(--seal)}
.stylecard:disabled{opacity:.55;cursor:not-allowed}
.levelbar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.levelbar div{border-bottom:2px solid var(--line);padding:6px 2px;text-align:center;font-size:12.5px;color:var(--ink-soft)}
.levelbar div.on{border-color:var(--seal);color:var(--seal)}

/* ---------- cards on the other tabs ---------- */
.card{background:var(--card);border-radius:18px 22px 17px 21px;padding:16px;display:grid;gap:12px;box-shadow:var(--print)}
.card:nth-of-type(2n){border-radius:21px 17px 22px 18px}
.eyebrow{font-size:13.5px;color:var(--ink-soft)}
.eyebrow b{color:var(--seal);font-weight:600}
.card h2{font-size:28px;margin:0;line-height:1.15;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h2 small,.card h3 small{font-family:var(--f-body);font-size:14px;color:var(--ink-soft)}
.card h3{font-size:22px;margin:0;display:flex;align-items:baseline;gap:10px}
.card p{margin:0;color:var(--ink-soft);line-height:1.5;font-size:14.5px}
.card p b{color:var(--ink)}
.seal-s{flex:none;width:46px;height:46px;border-radius:50%;background:var(--seal);color:var(--on-seal);display:grid;place-content:center;text-align:center;font-family:var(--f-title);font-size:19px;line-height:1;transform:rotate(-6deg);box-shadow:inset 0 0 0 2px rgba(255,248,238,.45)}
.seal-s.off{background:none;color:var(--ink-soft);box-shadow:inset 0 0 0 2px var(--line);transform:none}
.seal-s.done{background:var(--gold-soft);color:var(--ink);box-shadow:inset 0 0 0 2px var(--gold)}
.next{font-size:13px;color:var(--ink-soft);line-height:1.5}
.hint{font-size:13px;color:var(--ink-soft);text-align:center;margin:0}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{height:48px;border-radius:10px 13px 9px 12px;background:var(--card-2);display:grid;place-content:center;text-align:center;font-size:12px;color:var(--ink-soft);min-width:0}
.day b{font-family:var(--f-title);font-weight:400;font-size:15px;color:var(--seal)}
.day.done{background:var(--seal-soft);color:var(--ink)}
.day.now{box-shadow:inset 0 0 0 2px var(--seal)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{background:var(--card);border-radius:14px 17px 13px 16px;padding:10px 12px;box-shadow:var(--print)}
.stat .k{font-size:13px;color:var(--ink-soft)}
.stat .v{font-size:19px;font-variant-numeric:tabular-nums}
.board{display:grid;gap:8px}
.grow{display:grid;grid-template-columns:30px 40px 1fr auto;gap:10px;align-items:center;background:var(--card);border-radius:14px 17px 13px 16px;padding:8px 10px;box-shadow:var(--print);animation:rise .4s ease both;animation-delay:calc(var(--i,0)*50ms)}
.grow.me{background:var(--seal-soft)}
.grow .rk{font-family:var(--f-title);font-size:19px;color:var(--ink-soft);text-align:center}
.grow:nth-child(1) .rk{color:var(--gold)}
.grow img{width:40px;height:40px;border-radius:50%}
.grow .who{min-width:0}
.grow .who b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .who span{font-size:13px;color:var(--ink-soft)}
.grow .sc{text-align:right;font-family:var(--f-title);font-size:19px}
.grow .sc small{display:block;font-family:var(--f-body);font-size:11px;color:var(--ink-soft)}
.grow button{grid-column:3/5;justify-self:end}
textarea{width:100%;box-sizing:border-box;font-family:var(--f-body);font-size:13px;border-radius:12px;border:1.5px dashed var(--line);background:var(--card-2);color:var(--ink);padding:10px;resize:vertical}
.switch{display:flex;gap:10px;align-items:center;font-size:15px}
#xPass,.alias input{width:100%;box-sizing:border-box;font-family:var(--f-body);font-size:15px;border-radius:12px;border:1.5px dashed var(--line);background:var(--card-2);color:var(--ink);padding:10px;margin:4px 0 8px}
.alias{margin-top:10px}.alias label{font-size:13px;color:var(--ink-soft)}
.acct{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}.acct p{margin:2px 0 0;font-size:14px;color:var(--ink-soft)}
.acct .dot{flex:none;width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--line);box-shadow:inset 0 0 0 1.5px var(--ink-soft)}.acct .dot.on{background:var(--moss-ui)}
.privacy{margin-top:10px;font-size:14px}.privacy summary{cursor:pointer;color:var(--ink-soft);text-decoration:underline dashed;text-underline-offset:4px}.privacy ul{margin:8px 0 0;padding-left:18px;color:var(--ink-soft)}.privacy li{margin:4px 0}
.pick2{display:grid;gap:10px;margin:12px 0}.pick2 .btn{display:block;text-align:left;padding:12px 14px;line-height:1.45;font-size:14px;height:auto}.pick2 .lab{display:block;font-family:var(--f-title);font-size:17px;margin-bottom:2px}
.switch input{width:20px;height:20px;accent-color:var(--seal)}
.plots{display:grid;gap:4px}
.plotrow{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:10px 2px;border-bottom:1.5px dashed var(--line);animation:rise .4s ease both;animation-delay:calc(var(--i,0)*60ms)}
.plotrow:last-child{border-bottom:none}
.plotrow .tx{font-size:13.5px;color:var(--ink-soft);min-width:0;line-height:1.35}
.plotrow .tx b{display:block;color:var(--ink);font-size:16.5px;font-weight:600}
.plotrow .how{grid-column:2/-1}
/* Daily: list (default) keeps one line of goal per puzzle; grid packs puzzles into tiles */
.todayhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.todayhead h2{margin:0}
.viewsw button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px}
.viewsw svg.i{width:18px;height:18px}
.plots.list .how span:not(:first-child){display:none}
.plots.list .how span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.plots.list .how{flex-wrap:nowrap;min-width:0}
.plots.list .plotrow{padding:8px 2px}
.plots.grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px}
.plottile{border:none;font:inherit;color:inherit;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:6px 9px;padding:10px;min-height:44px;background:var(--card-2);border-radius:14px 17px 13px 16px;animation:rise .4s ease both;animation-delay:calc(min(var(--i,0),8)*45ms);transition:transform .15s,background .2s}
.plottile:nth-child(3n){border-radius:17px 13px 16px 14px}
.plottile:hover{transform:translateY(-2px) rotate(-.5deg);background:var(--seal-soft)}
.plottile:active{transform:scale(.97)}
.plottile:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.plottile .seal-s{width:36px;height:36px;font-size:16px;grid-row:1/3}
.plottile .tx{font-size:12.5px;color:var(--ink-soft);line-height:1.3;min-width:0}
.plottile .tx b{display:block;color:var(--ink);font-size:15px;font-weight:600}
.plottile .act{justify-self:start;font-size:12.5px;padding:2px 10px;border-radius:9px 11px 8px 10px;background:var(--seal);color:var(--on-seal);font-weight:700}
.plottile .act.seen{background:none;color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px var(--line)}
.how{font-size:12.5px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:3px 10px;margin:0}
.how i{font-style:normal;color:var(--ink)}
.grows{display:grid;gap:6px}
.secrow{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;font-size:14.5px;color:var(--ink-soft)}
.secrow b{color:var(--ink);font-weight:600}
.secrow .mk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;box-shadow:inset 0 0 0 1.5px var(--line)}
.secrow.own .mk{background:var(--moss-ui);color:var(--on-seal);box-shadow:none}
.secrow.next .mk{background:var(--seal);color:var(--on-seal);box-shadow:none}
.secrow small{font-size:12.5px}
.skillbar{height:12px;border-radius:7px 5px 7px 6px;background:var(--card-2);overflow:hidden;position:relative}
.skillbar i{position:absolute;inset:0 auto 0 0;background:var(--moss-ui);border-radius:inherit;transition:width 1s cubic-bezier(.2,1,.3,1)}

/* ---------- page heads, map, settings ---------- */
.pagehead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto;padding:6px max(16px,env(safe-area-inset-left,0px)) 4px;box-sizing:border-box;background:var(--paper)}
.pagehead h2{margin:0;font-size:26px;flex:1}
.pagehead .back{padding-left:0}
#garden2d{width:100%;display:block;touch-action:manipulation;cursor:pointer;border-radius:12px 15px 11px 14px}
.mapcard{padding:10px}
.sheet .x{margin:-6px -6px 0 0}
.sheet h3{flex-wrap:wrap}
.upg{display:grid;gap:6px}
.upg .lvrow{display:flex;gap:6px;flex-wrap:wrap}
.upg .lvrow span{font-size:13px;padding:3px 9px;border-radius:9px 11px 8px 10px;background:var(--card-2);color:var(--ink-soft)}
.upg .lvrow span.on{background:var(--moss-soft);color:var(--ink)}
.set{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1.5px dashed var(--line)}
.set:last-child{border-bottom:none}
.set > span{font-size:15.5px}
.set small{grid-column:1/-1;font-size:13px;color:var(--ink-soft);line-height:1.4}
.set input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--seal);height:24px;border:none;background:none;padding:0}
.tog{position:relative;width:48px;height:28px;border-radius:15px 13px 16px 12px;background:var(--card-2);border:none;padding:0;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s}
.tog::before{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:var(--print);transition:transform .25s cubic-bezier(.2,1.3,.35,1)}
.tog::after{content:"";position:absolute;inset:-8px -4px}
.tog[aria-pressed=true]{background:var(--moss-ui)}
.tog[aria-pressed=true]::before{transform:translateX(20px)}
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important}
html.noboil .ink:hover::after{animation:none}
html.nopaper body::before{display:none}

/* Settings: a short, task-based set of categories rather than a long list. */
#settingsCol.settings-ui{gap:10px;padding-top:2px}
.settingsCategories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;position:sticky;top:50px;z-index:5;background:var(--paper);padding:9px 0 8px}
.settingsCategories button{display:flex;align-items:center;justify-content:center;min-height:42px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink-soft);font-size:14px;font-weight:700;padding:7px 4px}
.settingsCategories button[aria-selected="true"]{background:var(--seal-soft);color:var(--seal-text,var(--seal));border-color:var(--seal)}
.settingsIntro{padding:3px 2px 5px}.settingsIntro h3{font-size:19px;font-family:var(--f-title);font-weight:400;margin:0}.settingsIntro p{font-size:13px;color:var(--ink-soft);margin:2px 0 0;line-height:1.4}
#settingsCol .card{padding:13px 15px;gap:8px}#settingsCol .card h3{font-size:19px}
#settingsCol .set{padding:7px 0;gap:3px 8px}#settingsCol .set>span{font-size:14px}#settingsCol .set small{font-size:12px;line-height:1.3}
#settingsCol .set input[type=range]{height:21px}
#settingsCol .hint{font-size:12px;line-height:1.4}
.settingsMoreDisclosure{min-width:0;display:grid;gap:10px}
.settingsMoreDisclosure>summary{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:13px 15px;cursor:pointer;font-size:14px;font-weight:700;list-style:none}
.settingsMoreDisclosure>summary::-webkit-details-marker{display:none}
.settingsMoreDisclosure>summary::after{content:'+';font:700 22px sans-serif;color:var(--seal-text,var(--seal))}
.settingsMoreDisclosure[open]>summary::after{content:'−'}
.settingsMoreDisclosure>.card{margin-top:8px}
.settingsMoreDisclosure .card+.card{margin-top:8px}
@media(max-width:360px){.settingsCategories button{font-size:12.5px;padding-inline:2px}#settingsCol .card{padding:12px}}

/* ---------- inside the house ---------- */
#interior{position:fixed;inset:0;background:var(--paper);display:flex;flex-direction:column;z-index:20;animation:rise .3s ease both}
#interior .tinner{max-width:900px}
#iName{font-size:21px}
#icv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#iPanelBox{max-height:38vh}
#iPanel .cat{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
#iPanel .item canvas{width:60px;height:60px}
#iPetals{display:inline-flex;align-items:center;gap:4px}
#iPetals canvas{width:16px;height:16px}

/* ---------- puzzle view ---------- */
#task{position:fixed;inset:0;background:var(--paper);display:flex;flex-direction:column;z-index:20;animation:rise .3s ease both}
.tinner{flex:1;min-height:0;width:100%;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-block:10px 14px}
.ttop{display:flex;align-items:center;gap:10px}
.back{border:none;background:none;padding:6px 4px;min-height:44px;font-size:15px;display:inline-flex;gap:4px;align-items:center}
.ttop h2{margin:0;font-size:24px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttag{font-size:13px;color:var(--seal);border:1.5px solid var(--seal);border-radius:9px 11px 8px 10px;padding:2px 9px;transform:rotate(-3deg)}
.ttag.practice{color:var(--moss-ui);border-color:var(--moss-ui)}
.ttabs{display:flex;margin-top:-2px}.ttabs .seg{width:100%}.ttabs .seg button{flex:1;padding:6px 8px;min-height:38px}
.seg.mini button{padding:3px 9px;min-height:30px;font-size:13px}
.coach{display:flex;flex-direction:column;gap:6px;background:var(--card-2);border-radius:12px 14px 11px 13px;padding:8px 10px}
.coach .ctop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.coach .cnow{font-size:14px;color:var(--ink-soft)}.coach .cnow b{font-family:var(--f-title);font-size:22px;color:var(--ink);margin-left:4px}.coach .cnow small{color:var(--ink-soft)}
.coach .cbars{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.coach .cb{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-soft)}.coach .cb em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.coach .cb small{color:var(--seal)}
.coach .ct{height:8px;border:1.5px solid var(--ink);border-radius:6px 4px 7px 5px;background:var(--card);overflow:hidden}.coach .ct i{display:block;height:100%;background:var(--moss-ui);transition:width .4s}
.coach .cmsg{font-size:14px!important;color:var(--ink)!important}.coach .up{color:var(--moss-ui)}.coach .dn{color:var(--warn)}
.lvlook{display:flex;align-items:center;gap:10px;margin:2px 0}.lvlook figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}.lvlook canvas{width:72px;height:72px;background:var(--card-2);border-radius:12px 14px 11px 13px}.lvlook figcaption{font-size:12px;color:var(--ink-soft)}.lvlook .arr{font-size:20px;color:var(--ink-soft)}.lvlook.big canvas{width:128px;height:96px}.pay{font-size:13.5px;color:var(--ink-soft);margin:8px 0 0}.upg .look{font-size:13px;color:var(--ink-soft);margin:0 0 4px}
.linkb{background:none;border:none;padding:0;font:inherit;color:var(--seal);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:3px;cursor:pointer;min-height:0}
.newp{background:var(--card-2);padding:8px 10px;border-radius:10px 12px 9px 11px}
.explain{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}.explain li{display:grid;grid-template-columns:minmax(90px,auto) 40px 1fr;gap:6px;align-items:baseline}#task.briefing #stage{display:none}.explain .pv{font-variant-numeric:tabular-nums;color:var(--ink)}.explain .why{color:var(--ink-soft)}
.daydone{background:var(--card-2);padding:8px 10px;border-radius:10px 12px 9px 11px;font-size:14px;color:var(--ink-soft);line-height:1.5}.daydone .week{display:inline-flex;gap:3px;vertical-align:middle;margin:0 4px}.daydone .wd{width:12px;height:12px;border-width:1.5px}
.btn.armed{background:var(--warn)!important;color:var(--on-seal)!important;border-color:var(--ink)!important}
.guide{position:fixed;z-index:60;max-width:300px;box-sizing:border-box;background:var(--card);border:2px solid var(--ink);border-radius:14px 17px 13px 16px;padding:12px 14px;box-shadow:var(--print);animation:rise .3s ease both}
.guide p{margin:0 0 9px;font-size:13px;line-height:1.38;color:var(--ink)}.guide .row{gap:6px}.guide .btn{min-height:36px;padding:6px 12px}
.guideHead{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.guideCount{color:var(--seal);font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.03em}
.guideHead strong{font-size:15px;line-height:1.25;color:var(--ink)}
.guideActions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.guideActions #guideOk{min-width:94px;min-height:38px}
.guideActions #guideSkip{font-size:12px;min-height:36px;padding:5px 8px}
.guide .garr{position:absolute;width:14px;height:14px;background:var(--card);border:2px solid var(--ink);transform:rotate(45deg)}
.guide.compact{position:fixed;left:max(8px,env(safe-area-inset-left,0px))!important;right:max(8px,env(safe-area-inset-right,0px))!important;top:auto!important;bottom:calc(79px + env(safe-area-inset-bottom,0px));width:auto!important;max-width:none;padding:9px 11px 8px;border-width:1.5px;border-radius:13px;box-shadow:0 4px 16px #0002;animation:none}
.guide.compact .guideHead{margin-bottom:3px}
.guide.compact p{font-size:12.5px;line-height:1.28;margin-bottom:6px;max-height:3.8em;overflow-y:auto}
.guide.compact .guideActions #guideOk{min-height:35px}
@media(max-height:560px){.guide.compact{bottom:calc(60px + env(safe-area-inset-bottom,0px))}.guide.compact p{max-height:2.6em}}
.guide .garr.hide{display:none}.guide .garr.dn{bottom:-9px;border-top:none;border-left:none}.guide .garr.up{top:-9px;border-bottom:none;border-right:none}
.gpulse{animation:gpulse 1.4s ease-in-out infinite!important;position:relative;z-index:2}
@keyframes gpulse{0%,100%{box-shadow:0 0 0 0 rgba(200,69,42,.55)}50%{box-shadow:0 0 0 9px rgba(200,69,42,0)}}
@media (prefers-reduced-motion:reduce){.gpulse{animation:none!important;outline:3px solid var(--seal)}}

.stage{position:relative;flex:1;min-height:0;background:var(--card);border-radius:18px 22px 17px 21px;overflow:hidden;box-shadow:var(--print)}
/* 1.45: the puzzle board is the same size in every game and every state; the panel below takes what is left and scrolls */
/* 1.52: the board takes two thirds of the space under the tabs, the panel the last third (it scrolls inside) */
#stage{flex:2 1 0;height:auto;min-height:200px}
#task .tinner>.panel{flex:1 1 0;min-height:0;overflow-y:auto}
#task.briefing .tinner>.panel{flex:1 1 auto}
.playrow{flex-wrap:nowrap;gap:8px}.playrow>.btn{flex:1 1 0;min-width:0;justify-content:center;padding-inline:10px;white-space:nowrap}.playrow:has(#demoNav:not(:empty)){flex-wrap:wrap}#demoNav .btn{flex:1 1 0;justify-content:center}.toolrow{flex-wrap:wrap;gap:8px}#demoNav{gap:8px;flex-wrap:wrap}#demoNav:empty{display:none}
.howbtn{background:var(--card-2);color:var(--ink);font-weight:700;gap:8px;min-height:50px}
.howbtn svg.i{width:22px;height:22px}
.timer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px!important;color:var(--ink-soft)!important;margin:0}
.timer b{color:var(--ink);font-variant-numeric:tabular-nums}
.timer>b{font-family:var(--f-title);font-size:20px;min-width:3.2ch}
.timer svg.i{width:20px;height:20px}
.timer.low>span>b{color:var(--warn)}
.timenote{font-size:14px!important}
.coach .meter{display:block;height:12px}
.drawer .again{justify-self:start;gap:8px}.drawer .again svg.i{width:20px;height:20px}
.toolnote{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.35;max-width:32ch}
#playPanel{overflow:hidden!important}.coach>*{flex-shrink:0}
/* 1.54: only the upper part scrolls; the action row is an ordinary row at the foot, inside the panel's outline */
#playPanel>.pscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px}
#playPanel>.pscroll>*{flex:none}
#resultPanel{overflow:hidden!important}
#resultPanel>.pscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px}
#resultPanel>.pscroll>*{flex:none}
#resultPanel>.resrow{flex:none;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1.5px dashed var(--line)}
#resultPanel>.resrow>.btn{flex:1 1 auto;justify-content:center}
#playPanel>.playrow{flex:none;padding-top:10px;border-top:1.5px dashed var(--line)}
#task .brief .steps li{font-size:14px}#task .brief .goal{font-size:19px}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.panel{background:var(--card);border-radius:18px 22px 17px 21px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--print);animation:rise .35s ease both}
.panel p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.45}
.brief .goal{font-family:var(--f-title);font-size:21px;color:var(--ink);line-height:1.25}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:5px;counter-reset:s}
.steps li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--f-title);color:var(--seal);font-size:17px;line-height:1.1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;gap:6px;align-items:baseline;background:var(--card-2);border-radius:9px 11px 8px 10px;padding:4px 9px;font-size:13.5px}
.chip b{font-family:var(--f-title);font-weight:400;color:var(--moss-ui)}
.chip span{color:var(--ink-soft);font-size:12.5px}
.tip{font-size:13.5px;color:var(--ink-soft)}
.tip::before{content:"✎ ";color:var(--seal)}
.result{display:flex;gap:16px;align-items:center}
.seal{flex:none;width:84px;height:84px;border-radius:50%;background:var(--seal);color:var(--on-seal);display:grid;place-content:center;text-align:center;transform:rotate(-6deg);box-shadow:inset 0 0 0 3px rgba(255,248,238,.45)}
.seal span{font-family:var(--f-title);font-size:36px;line-height:1}
.seal small{font-size:11px;opacity:.9}
.seal.stamp{animation:stamp .55s cubic-bezier(.2,1.2,.35,1) both}
.bars{flex:1;min-width:0;display:grid;gap:6px}
.bar{display:grid;grid-template-columns:minmax(74px,auto) 1fr 28px;gap:8px;align-items:center;font-size:13.5px}
.bar .lab{color:var(--ink-soft);white-space:nowrap}
.bar .trk{position:relative;display:block;height:14px;border-radius:8px 6px 9px 7px;background:var(--card-2);border:1.5px solid var(--ink);box-shadow:inset 0 2px 0 rgba(43,38,34,.08);overflow:hidden}
.bar .trk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(43,38,34,.18) calc(20% - 1px) 20%);pointer-events:none}
.bar .fill{position:relative;display:block;height:100%;border-radius:6px 4px 7px 5px;transition:width .9s cubic-bezier(.2,1,.3,1);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 3px,transparent 3px 6px),linear-gradient(180deg,#86ab5c,var(--moss-ui) 60%,#4a6b2c);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35)}
.bar .fill::after{content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:3px;background:var(--ink);border-radius:2px;opacity:.75}
.bar .fill[data-v="0"]::after{display:none}
.bar .val{text-align:right;font-variant-numeric:tabular-nums}
.rank{margin:0;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.rank b{color:var(--ink);font-weight:600}
.ledger{display:grid;grid-template-columns:1fr auto;gap:2px 14px;font-size:14px;color:var(--ink-soft);border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);padding:8px 2px}
.ledger span:nth-child(even){color:var(--ink);text-align:right}
.ledger .sum{color:var(--seal)!important;font-family:var(--f-title);font-size:18px}
.toast{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;box-sizing:border-box;bottom:calc(152px + env(safe-area-inset-bottom,0px));text-wrap:balance;background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:12px 15px 11px 14px;font-size:15px;z-index:40;pointer-events:none;max-width:calc(100% - 40px);text-align:center;animation:rise .35s ease both;box-shadow:var(--print)}
.flyPetal{position:fixed;width:18px;height:18px;z-index:50;pointer-events:none;animation:fly .9s ease-in forwards}
.modal{position:fixed;inset:0;z-index:60;background:rgba(43,38,34,.35);display:grid;place-items:center;padding:20px;animation:rise .3s ease both}
.modal .card{max-width:400px;text-align:center;justify-items:center;animation:rise .45s cubic-bezier(.2,1.2,.35,1) both}
.bigseal{display:inline-grid;place-items:center;writing-mode:vertical-rl;font-family:var(--f-title);font-size:22px;line-height:1.05;color:var(--on-seal);background:var(--seal);padding:10px 7px;border-radius:5px;transform:rotate(-6deg);box-shadow:inset 0 0 0 2px rgba(255,248,238,.5);animation:stamp .6s cubic-bezier(.2,1.2,.35,1) both}
.modal canvas.logo{width:132px;height:132px;margin:-8px 0 -10px}
.modal h2{justify-content:center}
.modal .list{font-size:14px;color:var(--ink-soft);line-height:1.5}
@media (max-height:720px){.seal{width:68px;height:68px}.seal span{font-size:28px}.panel{padding:11px;gap:8px}.brief .goal{font-size:19px}}
@media (max-width:440px){.brand h1{font-size:24px}.brand canvas{width:44px;height:44px}.count{font-size:15px;padding:3px 8px 3px 6px}.hanko{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* difficulty of the day: a word and a kanji, never colour alone */
.lvchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-body);font-size:13px;vertical-align:middle;padding:2px 9px;border-radius:9px 11px 8px 10px;border:1.5px solid var(--line);color:var(--ink);background:var(--card-2)}
.lvchip.l2{border-style:double;border-width:3px;border-color:var(--seal)}
.lvchip.l0{border-style:dashed}
.lvl{margin:10px 0 2px;font-size:14px;color:var(--ink-soft)}
#pStreak small{font-size:.7em;opacity:.7;margin-left:1px}
/* stamp book */
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.stamp{display:grid;justify-items:center;text-align:center;gap:3px;padding:8px 4px;border-radius:12px;border:1.5px dashed var(--line);color:var(--ink-soft)}
.stamp .hk{width:42px;height:42px;border-radius:50%;display:grid;place-content:center;font-family:var(--f-title);font-size:21px;border:2px dashed var(--line);color:var(--line)}
.stamp b{font-size:12.5px;font-weight:600}.stamp small{font-size:11.5px;line-height:1.3}
.stamp.got{border-style:solid;color:var(--ink)}
.stamp.got .hk{background:var(--seal);color:#fff6ee;border:2px solid var(--seal);transform:rotate(-6deg);box-shadow:inset 0 0 0 3px var(--seal),inset 0 0 0 4px #fff6ee}
/* the week, one mark per day */
.week{display:flex;gap:8px;justify-content:center;margin:10px 0 4px}
.wd{width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}
.wd.on{background:var(--moss-ui);border-color:var(--moss-ui)}
.wd.rest{border-color:var(--moss-ui);background:radial-gradient(circle,var(--moss-ui) 30%,transparent 34%)}
.wd.now{outline:2px dashed var(--seal);outline-offset:2px}
/* touch: every target at least 44px tall */
.btn,.seg button{min-height:44px}.btn.quiet{min-height:44px}
/* larger text */
html.big .card p,html.big .card li,html.big .steps li,html.big .goal,html.big .tip,html.big .hint,html.big #status,html.big .tx,html.big .how,html.big .eyebrow,html.big .next,html.big .set span,html.big .rank,html.big .ledger,html.big .bar .lab,html.big .stat .k{font-size:17.5px!important;line-height:1.5}
html.big .btn,html.big .seg button,html.big .chip{font-size:17px!important}
html.big .stamp b{font-size:14px}html.big .stamp small{font-size:13px}html.big #toast{font-size:17px}
.hbadge{border:none;background:none;padding:0;margin-left:6px;min-height:0;display:inline-flex;align-items:center;cursor:pointer}.hbadge:empty{display:none}
.badge{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;vertical-align:middle;transform:rotate(-8deg);flex:none}
.badge .hk{font-family:var(--f-title);font-size:15px;line-height:1;color:#fff6ee}
.badge i{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;line-height:1;letter-spacing:-1px;color:var(--ink)}
.badge.t1{background:#a8643a;box-shadow:inset 0 0 0 2px #a8643a,inset 0 0 0 3px #fff6ee}
.badge.t2{background:#8a96a3;box-shadow:inset 0 0 0 2px #8a96a3,inset 0 0 0 3px #fff6ee,inset 0 0 0 5px #8a96a3,inset 0 0 0 6px #fff6ee}
.badge.t3{background:radial-gradient(circle at 35% 30%,#f6dc7c,#c9962a 70%);box-shadow:inset 0 0 0 2px #9a6e14,inset 0 0 0 3px #fff3c4,0 0 0 2px rgba(201,150,42,.35)}
.badge.t3 .hk{color:#5a3a08}
.badge.sm{width:22px;height:22px;margin-left:6px}.badge.sm .hk{font-size:11px}.badge.sm i{font-size:8px;bottom:-4px}
.stamp{font:inherit;background:none;cursor:pointer;position:relative}.stamp:disabled{cursor:default}
.stamp .tier{font-size:11.5px;font-weight:600}
.stamp.t1 .hk{background:#a8643a;border-color:#a8643a;box-shadow:inset 0 0 0 3px #a8643a,inset 0 0 0 4px #fff6ee}
.stamp.t2 .hk{background:#8a96a3;border-color:#8a96a3;box-shadow:inset 0 0 0 3px #8a96a3,inset 0 0 0 4px #fff6ee,inset 0 0 0 7px #8a96a3,inset 0 0 0 8px #fff6ee}
.stamp.t3 .hk{background:radial-gradient(circle at 35% 30%,#f6dc7c,#c9962a 70%);border-color:#9a6e14;color:#5a3a08;box-shadow:inset 0 0 0 3px #9a6e14,inset 0 0 0 4px #fff3c4}
.stamp.worn{outline:2.5px solid var(--seal);outline-offset:2px}.stamp em{position:absolute;top:4px;right:6px;font-size:10.5px;font-style:normal;color:var(--seal);font-weight:700}
/* 1.71: privacy policy, terms and credits, read inside the game */
.legalModal .card{max-width:640px;width:100%;text-align:left;justify-items:stretch}
.legalDoc{font-size:15px;line-height:1.55}.legalDoc h1{font-size:26px;margin:0 0 2px}.legalDoc h2{font-size:17px;font-family:var(--f-body);font-weight:700;margin:18px 0 4px}
.legalDoc p,.legalDoc li{color:var(--ink);font-size:15px}.legalDoc .meta{color:var(--ink-soft);font-size:13px}.legalDoc ul{padding-left:20px;margin:4px 0}
.legalDoc .summary{background:var(--card-2);border-radius:12px;padding:2px 12px}.legalDoc a{color:var(--seal-text,var(--seal));overflow-wrap:anywhere}
.legalDoc,.legalDoc h1,.legalDoc h2,.legalDoc p{text-align:left}
.legalRow .btn{font-size:14px;padding:8px 12px}
/* ================= 1.70 build tray =================
   Like the builders in base-building games: while you lay paths, place or move something, the bottom navigation steps
   aside and one tray docks at the foot of the screen. The whole garden above it stays free to tap, drag and draw on. */
.buildTray{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 20px));box-sizing:border-box;
  background:var(--card);border-radius:18px 22px 17px 21px;box-shadow:var(--print);padding:8px;z-index:9;display:flex;flex-direction:column;gap:8px;animation:sheetUp .35s cubic-bezier(.2,1.1,.35,1) both}
.buildTray[hidden]{display:none!important}
.btRow{display:flex;align-items:center;gap:8px;min-width:0}
.btInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.btName{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btHint{font-size:12.5px;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.btHint.bad{color:var(--warn)}
.btItem{flex:none;width:46px;height:46px;border-radius:12px;background:var(--card-2);display:grid;place-items:center;overflow:hidden}
.btItem canvas{width:42px;height:42px}
.btBtn{flex:none;width:48px;height:48px;border:2px solid var(--ink);border-radius:12px 14px 11px 13px;background:var(--card);color:var(--ink);display:grid;place-items:center;padding:0;box-shadow:var(--print);transition:transform .12s}
.btBtn .i{width:22px;height:22px;stroke-width:2.6}
.btBtn:active:not(:disabled){transform:translate(1px,2px);box-shadow:none}
.btBtn:disabled{opacity:.35;cursor:default}
.btBtn.ok{background:var(--moss-ui);color:#fff}
.btBtn:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.buildTray .dbc{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.buildTray .dbc svg,.buildTray .dbc canvas{width:16px;height:16px}.buildTray .dbc.refund{color:var(--moss-ui)}.buildTray .dbc.poor{color:var(--warn)}
.buildTray .dbc small{font-size:12px;font-weight:600;color:var(--ink-soft)}
.btPal{position:relative;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 4px;scrollbar-width:thin}
.btTool{flex:none;scroll-snap-align:start;width:80px;border:1.5px solid var(--line);background:var(--card-2);border-radius:12px 14px 11px 13px;padding:4px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;line-height:1.15;color:var(--ink-soft);text-align:center}
.btTool canvas{width:40px;height:40px}
.btTool .c{color:var(--seal)}.btTool b{font-size:11.5px;color:var(--ink);font-weight:600;line-height:1.15;min-height:2.3em;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
.btTool[aria-checked="true"]{background:var(--seal-soft);border-color:var(--seal);box-shadow:inset 0 0 0 1.5px var(--seal)}
.btTool:disabled{opacity:.45}
.btTool.sep{margin-left:6px}
html.building nav.tabs{display:none}
html.building .toast{bottom:auto;top:calc(var(--topH,58px) + 8px + env(safe-area-inset-top,0px))}
/* the selected ornament's toolbar docks at the foot too, instead of hovering over the garden */
#ornQuick{top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));position:fixed}
@media(max-width:360px){.btBtn{width:44px;height:44px}.btTool{width:72px}.btItem{display:none}.buildTray{padding:7px}.btRow{gap:6px}}
.waygrp{margin:6px 0 2px}.waygrp>b{display:block;font-size:13px;color:var(--ink-soft);margin:2px 0 4px}
.item.tool.sel{outline:3px solid var(--moss-ui);outline-offset:-3px}

/* Temper-line comparison uses the same line treatments as the blade canvas. */
.bladeCompare{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding:9px 10px;margin-top:7px;border-radius:10px;background:var(--card-2);font-size:13px}
.bladeCompare span{display:flex;align-items:center;gap:7px}
.bladeLine{width:27px;height:0;display:inline-block;border-top:3px solid #087f9e}
.bladeLine.master{border-color:#c9962e;border-top-style:dashed}
/* Compact context controls for a placed ornament; details open only on demand. */
.ornQuick{position:absolute;top:max(9px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:10;
 width:min(356px,calc(100% - 20px));background:var(--card);border:1px solid var(--line);border-radius:16px;
 box-shadow:0 4px 20px rgba(27,33,27,.22);padding:6px;box-sizing:border-box}
.ornQuick[hidden]{display:none!important}
.ornQuickHead{min-height:25px;display:flex;align-items:center;gap:6px;padding:0 2px 4px 7px}
.ornQuickTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700}
.ornQuickLevel{color:var(--ink-soft);font-size:11px;white-space:nowrap}
.ornQuickClose{display:grid;place-items:center;width:26px;height:26px;border:0;background:none;border-radius:8px}
.ornQuickBar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ornQuickAction{position:relative;min-width:0;height:44px;border:1.5px solid var(--line);background:var(--card-2);color:var(--ink);border-radius:12px;
 display:grid;place-items:center;padding:0;box-shadow:inset 0 0 0 2.5px var(--card-2),inset 0 0 0 3.5px var(--line);cursor:pointer;transition:transform .14s,background .14s}
.ornQuickAction:hover:not(:disabled){transform:translateY(-1px)}
.ornQuickAction:active:not(:disabled){transform:scale(.95)}
.ornQuickAction svg,.ornQuickClose svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ornQuickAction svg{width:26px;height:26px;stroke-width:1.9}
.ornQuickAction svg .ac{stroke:var(--flame)}
.ornQuickAction svg .ac.fl{fill:var(--flame);stroke:none}
.ornQuickAction svg rect.ac.fl{stroke:var(--flame);stroke-width:1.2}
.ornQuickAction svg .gd{fill:var(--gold);stroke:currentColor;stroke-width:1.5}
.ornQuickAction svg .gl{stroke:#7a5418;stroke-width:1.1}
.ornQuickAction svg .pp{stroke:var(--card);stroke-width:1.9}
.ornQuickAction svg .pp.fl{fill:var(--card);stroke:none}
.ornQuickAction:disabled{opacity:.4;cursor:default}
.ornQuickAction:focus-visible,.ornQuickClose:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.ornQuickAction.armed{background:var(--gold-soft);color:var(--ink);border-color:var(--gold);box-shadow:inset 0 0 0 2.5px var(--gold-soft),inset 0 0 0 3.5px var(--gold)}
.ornQuickAction[aria-expanded="true"]{background:var(--seal-soft);box-shadow:inset 0 0 0 2.5px var(--seal-soft),inset 0 0 0 3.5px var(--seal)}
.ornQuickMessage{padding:5px 7px 1px;text-align:center;font-size:11px;color:var(--ink-soft);line-height:1.3}
.ornQuickMessage:empty{display:none}
.ornQuickDetails{border-top:1px solid var(--line);margin-top:6px;padding:7px 8px 3px;max-height:min(160px,24vh);overflow-y:auto;font-size:12px;color:var(--ink-soft);line-height:1.4}
.ornQuickDetails p{margin:3px 0 5px}.ornQuickDetails strong{color:var(--ink)}
@media(max-width:350px){.ornQuick{width:calc(100% - 10px);padding:5px}.ornQuickBar{gap:3px}.ornQuickAction{height:42px}.ornQuickAction svg{width:23px;height:23px}}
@media(prefers-reduced-motion:reduce){.ornQuick{transition:none}}
/* 1.69: the toolbar floats just above the selected thing, with a small pointer down to it */
.ornQuick.anchored{transform:none}
.ornQuick.anchored::after{content:"";position:absolute;left:var(--arrowX,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.ornQuick.anchored.below::after{bottom:auto;top:-7px;transform:rotate(225deg)}

/* ================= 1.65.2 responsive layout =================
   Audited on 320×568 to 1440×900, phone landscape and a Quest-size panel (tests/test_layout.py).
   Rules: nothing a player needs is ever cut off or hidden behind something else; tap targets are at least 32px;
   short landscape screens put the board and its controls side by side instead of squeezing them into a stack. */

/* --- header: on narrow phones the counters keep their room and the badge is never covered --- */
.top .counts{flex:none}
.hbadge{min-width:34px;min-height:34px;justify-content:center}
@media (max-width:420px){.brand h1{font-size:22px}}
@media (max-width:374px){.brand canvas{margin-right:2px}}
/* 1.73: the longer name gets smaller with the screen so the badge and counters keep their room; on 340–388 px
   phones the name takes the logo's place, and only below 340 px does the name give way to the logo */
@media (max-width:440px){.brand h1{font-size:22px}}
@media (max-width:400px){.brand h1{font-size:19px;letter-spacing:0}}
@media (max-width:388px) and (min-width:340px){.brand canvas{display:none}.brand h1{font-size:20px;margin-left:2px}}
@media (max-width:359px) and (min-width:340px){.brand h1{font-size:18px}}
@media (max-width:339px){.brand h1{display:none}}

/* --- Tend drawer tabs: compact on phones; when they still don't fit they take a full row (see fitDrawerHead) --- */
#tendSeg{display:inline-flex;flex-wrap:nowrap;max-width:100%}
#tendSeg button{white-space:nowrap}
@media (max-width:560px){#tendSeg button{padding:7px 10px;font-size:14px}}
.drawer .dh.stack{flex-wrap:wrap;row-gap:6px}
.drawer .dh.stack::before{content:attr(data-title);flex:1;min-width:0;font-family:var(--f-title);font-size:18px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .dh.stack h3{order:3;flex:1 0 100%;overflow:visible}
.drawer .dh.stack #tendSeg{display:flex;width:100%;flex-wrap:wrap}
.drawer .dh.stack #tendSeg button{flex:1 1 auto;min-width:0}
.drawer.collapsed .dh.stack h3{display:none}

/* --- puzzle header: the name keeps its room, the Practice/Today tag moves under it when space is short --- */
.ttl{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px}
.ttl h2{flex:0 1 auto!important;font-size:clamp(19px,5.6vw,24px)!important}
.ttl .ttag{flex:none;font-size:12.5px}
@media (max-width:400px){.ttl{row-gap:0}.ttl .ttag{padding:1px 7px;font-size:11.5px}.ttabs .seg button{font-size:14px;padding:5px 6px}}
#iName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#iName{font-size:clamp(16px,5vw,21px)!important}

/* --- puzzle controls: the tool switch (Moss/Pebble, Dig/Mark…) and Start over are always in view, not buried in the scroller --- */
#playPanel>.toolrow{flex:none;padding-top:2px}
#playPanel>.toolrow:has(#extra:empty){display:none}
#extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
#extra .seg{flex:none}
#extra #rReset{min-height:40px;padding:7px 14px;font-size:15px;margin-left:auto}
#extra .toolnote{flex:1 1 100%;max-width:none;margin-top:0;order:3}   /* the note goes under the switch and Start over, not between them */
@media (max-height:900px),(max-width:560px){#extra .toolnote{display:none}}   /* the how-to already says this; on phones the room goes to the board */
#playPanel>.pscroll{min-height:44px;contain:size;padding-bottom:10px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}   /* a soft fade says there is more to scroll */   /* its long contents scroll inside; they must not stretch the panel past the screen */
/* the panel keeps the height of everything fixed in it (score, tools, buttons); the board gives up the space instead */
#task .tinner>#playPanel{overflow:visible!important;min-height:min-content}
@media (max-height:700px) and (orientation:portrait){.drawer{max-height:min(58%,430px)}.stylecard canvas{width:100px;height:80px}}
@media (max-height:620px) and (orientation:portrait){.stylecard{padding:6px;gap:1px}.stylecard canvas{width:72px;height:54px}.stylecard span{font-size:11.5px;line-height:1.25}}
@media (max-width:360px){#extra .seg button{padding:6px 10px;font-size:14px}#extra #rReset{padding:6px 10px;font-size:14px;min-height:38px}}
/* main puzzle buttons: long labels (and longer languages) wrap onto two balanced lines instead of being cut off */
.playrow>.btn{white-space:normal!important;line-height:1.15;text-align:center;text-wrap:balance}
@media (max-width:420px){.playrow>.btn{padding-inline:8px;font-size:15.5px}}
@media (max-width:360px){.playrow>.btn{font-size:14.5px;padding-inline:6px}.playrow>.btn svg{display:none}}
@media (max-height:620px){#stage{min-height:150px}}

/* --- tap targets of at least 32px on touch screens --- */
@media (pointer:coarse){
  .linkb{display:inline-flex;align-items:center;min-height:34px;padding:2px 0}
  .seg.mini button{min-height:34px}
  .seg button{min-width:36px}
  #briefPanel .lvl .seg button,.coach .seg button{min-height:34px}
  .ornQuickClose{width:36px;height:36px}
  select.chip{min-height:36px}
  #settingsCol .set input[type=range],input[type=range]{height:32px;min-height:32px}
  .ornTile>.ornStar{min-width:32px;min-height:32px}
}

/* --- large text: the house cards and settings categories get the room their bigger type needs --- */
@media (orientation:portrait){html.big .drawer{max-height:min(66%,500px)}}
@media (max-width:560px){html.big .settingsCategories{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- walk mode prompt wraps instead of being cut off on small screens --- */
@media (max-width:420px){.walkPrompt{white-space:normal;max-width:calc(100% - 40px)}}

/* --- dialogs never run off a short screen --- */
.modal{overflow-y:auto}
.modal .card{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;box-sizing:border-box}

/* 1.67: a place in ruins */
#sheet .ruin{padding:9px 12px;border-left:4px solid #8a6a4a;background:var(--card-2);border-radius:3px 12px 12px 3px;line-height:1.45}
#sheet .ruin b{color:#7a4a2a}
/* 1.67: in the garden the title floats over the sky with no banner behind it; the overlays that sat at the top move down under it */
#shell{position:relative}
#shell.overTop>.top{position:absolute;top:0;left:0;right:0;background:transparent;pointer-events:none}
#shell.overTop>.top>*{pointer-events:auto}
#shell.overTop .brand h1,#shell.overTop .hbadge{text-shadow:0 0 7px var(--paper),0 0 3px var(--paper),0 0 1px var(--paper)}
#shell.overTop .brand canvas{filter:drop-shadow(0 1px 3px rgba(40,28,20,.25))}
#shell.overTop .visit,#shell.overTop .ornQuick:not(#ornQuick){top:calc(var(--topH,58px) + 4px)}
#shell.overTop .walkGuide,#shell.overTop .walkEsc{top:calc(var(--topH,58px) + 8px)}

/* --- short landscape screens (phones on their side): side-by-side layouts --- */
@media (orientation:landscape) and (max-height:540px){
  .top{padding-block:3px 2px}.brand canvas{width:38px;height:38px}.brand h1{font-size:22px}
  /* the Tend sheet becomes a side panel, so the garden stays in view beside it */
  #shell:has(#drawer:not([hidden]):not(.collapsed)) nav.tabs{display:none}   /* like portrait, the open panel takes the nav's place */
  .drawer{left:auto;top:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));right:max(8px,env(safe-area-inset-right,0px));width:min(440px,54%);max-height:none;border-radius:20px 24px 19px 23px}
  .drawer.collapsed{top:auto;max-height:60px}
  #shell.overTop .drawer:not(.collapsed){top:calc(var(--topH,44px) + 4px)}
  .drawer .cat{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .stylecard canvas{width:92px;height:72px}
  /* puzzles: board on the left, the how-to / controls / result on the right */
  #task .tinner{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42%);grid-template-rows:auto auto minmax(0,1fr);column-gap:16px;row-gap:6px;padding-block:6px 8px}
  #task .ttop{grid-column:1/-1}
  #task .ttabs{grid-column:2;grid-row:2;margin-top:0}
  #task #stage{grid-column:1;grid-row:2/4;min-height:0}
  #task .tinner>.panel{grid-column:2;grid-row:3;min-height:0}
  #task.briefing .ttabs,#task.briefing .tinner>.panel{grid-column:1/-1}
  #extra .toolnote{display:none}
  /* inside the house: room on the left, furniture on the right */
  #interior .tinner{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,40%);grid-template-rows:auto minmax(0,1fr);column-gap:16px;padding-block:6px 8px}
  #interior .ttop{grid-column:1/-1}
  #interior #iStage{grid-column:1;grid-row:2;min-height:0}
  #interior #iPanelBox{grid-column:2;grid-row:2;max-height:none;min-height:0}
  .modal{padding:10px}.modal canvas.logo{width:84px;height:84px;margin:-6px 0 -6px}
}

/* Journal-only organisation. All colours, fonts, ink borders and game visuals are inherited. */
#journalCol{gap:12px;padding-top:4px}
#journalCol .card{padding:14px;gap:10px}
#journalCol h3{font-size:21px;flex-wrap:wrap;gap:5px 10px}
#journalCol h3 small{font-size:12px;color:var(--ink-soft)}
#journalCol .journalStats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
#journalCol .journalStat{min-width:0;display:flex;flex-direction:column;gap:2px}
#journalCol .journalStat .k{font-size:11px;color:var(--ink-soft)}
#journalCol .journalStat .v{font-size:15px;line-height:1.35;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#journalCol .journalActivity{border-top:1px dashed var(--line);padding-top:10px;margin-top:2px;display:grid;gap:8px}
#journalCol .days{gap:5px}
#journalCol .day{height:42px;gap:2px}
#journalCol .day b{font-size:15px;line-height:1}
#journalCol .day small{font-size:9px;line-height:1.2;color:var(--ink-soft)}
#journalCol .journalIdea{display:grid;gap:8px;min-width:0}
#journalCol .ideaHead{display:flex;justify-content:space-between;align-items:center}
#journalCol .journalIdeas p,#journalCol .journalSeason p,#journalCol .journalHelp p{font-size:13px;line-height:1.45}
#journalCol .journalIdeas .row{gap:8px}
#journalCol .journalIdeas .btn{padding:7px 12px;font-size:13px;min-height:40px}
#journalCol .journalPhoto{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px dashed var(--line);padding-top:10px;margin-top:2px}
#journalCol .journalPhoto h3{font-size:18px;margin-bottom:3px}
#journalCol .journalPhoto p{font-size:12px}
#journalCol details{min-width:0}
#journalCol summary{cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;font-size:21px;line-height:1.3;font-family:var(--f-title)}
#journalCol summary::-webkit-details-marker{display:none}
#journalCol summary::after{content:'⌄';margin-left:auto;font-size:19px;color:var(--ink-soft)}
#journalCol details[open]>summary::after{transform:rotate(180deg)}
#journalCol summary small{font-size:12px;color:var(--ink-soft)}
#journalCol details[open]>summary{margin-bottom:10px}
#journalCol .stamps{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:10px}
#journalCol .stamp{min-width:0;padding:7px 4px}
#journalCol .stamp .hk{width:34px;height:34px;font-size:18px}
#journalCol .stamp small{font-size:10px;overflow-wrap:anywhere}
#journalCol .journalHelp p+p{margin-top:8px}
#journalCol .journalHelp summary{font-size:18px}
#journalCol .journalPay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0;font-size:12px}
#journalCol .journalPay span{background:var(--card-2);padding:7px;border-radius:8px 11px 7px 10px}
#journalCol .journalPay b{display:block;color:var(--seal);font-size:16px}
@media(max-width:380px){#journalCol .journalStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}#journalCol .journalStat .v{font-size:14px}#journalCol .journalPhoto{gap:8px}#journalCol .journalPhoto h3{font-size:17px}#journalCol .journalPhoto .btn{flex:none;padding-inline:10px}#journalCol .day small{font-size:8px}}
html.big #journalCol .journalStat .k,html.big #journalCol .journalStat .v,html.big #journalCol .journalIdeas p,html.big #journalCol .journalHelp p{font-size:17.5px}