/* Home hero + loading screen (loaded last). */

/* ---------- loading: a pine grows tier by tier ---------- */
#load-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:72vh!important;padding:24px!important;background:transparent!important;box-shadow:none!important;border:0!important}
#load-state .loading-orbit,#load-state .pine-growth-scene,#load-state .startup-steps{display:none!important}
/* The tree grows once (opaque at rest so it never looks washed out), then sways. */
body:has(#load-state:not([hidden])) .site-header{display:none!important}
/* Fixed to the viewport so the loader is always dead-centre with no scrolling. */
body #load-state:not([hidden]){position:fixed;inset:0;z-index:50;width:auto;max-width:none;margin:0;min-height:0!important;overflow:hidden;background:var(--pl-bg,#f6f5f0)!important}
.pl-fact{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.pl-fact[hidden]{display:none}
.pl-fact{position:relative}
.pl-fact-speak{position:absolute;right:12px;top:42px;z-index:1;width:40px;height:40px;border-radius:50%;border:1px solid #d7e6dd;background:#f2f8f4;color:#1b6b52;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s}
.pl-fact-speak:hover{background:#e3f1e8;transform:scale(1.06)}
.pl-fact-speak[hidden]{display:none}
.pl-fact-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7a8a83}
.pl-fact-card{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:260px;max-width:min(360px,86vw);padding:18px 26px;border:1px solid #e1e9e4;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(15,74,56,.08);font:inherit;color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pl-fact-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,74,56,.12)}
.pl-fact-card.is-in{animation:pl-fact-in .35s ease-out}
@keyframes pl-fact-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pl-fact-lang{font-size:12px;font-weight:700;color:#1b6b52;background:#e7f3ec;border-radius:999px;padding:3px 10px}
.pl-fact-word{font-size:30px;font-weight:800;letter-spacing:-.5px;color:#163a30;line-height:1.25}
.pl-fact-say{font-size:15px;color:#4a5d55;line-height:1.5;text-align:center}
.pl-fact-next{font-size:12.5px;color:#8a978f}
#load-state .loading-cards,#load-state .loading-study-mark,#load-state .pine-growth-fallback{display:none!important}
.pl-loader-stage{position:relative;width:168px;height:168px;display:grid;place-items:center;margin-bottom:4px}
.pl-loader-halo{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 50% 58%,#e3f3ea 0,#eef7f1 46%,rgba(238,247,241,0) 70%);animation:pl-halo 3.2s ease-in-out infinite}
.pl-loader-pine{position:relative;width:104px;height:126px;overflow:visible}
.pl-loader-pine .pl-tier,.pl-loader-pine .pl-trunk,.pl-loader-pine .pl-shine{transform-box:fill-box;transform-origin:50% 100%;animation:pl-grow .55s cubic-bezier(.2,1.3,.4,1) both}
.pl-loader-pine .pl-trunk{animation-name:pl-trunk}
.pl-loader-pine .pl-tier-1{animation-delay:.1s}.pl-loader-pine .pl-tier-2{animation-delay:.25s}.pl-loader-pine .pl-tier-3{animation-delay:.4s}.pl-loader-pine .pl-shine{animation-name:pl-fade;animation-delay:.6s}
.pl-loader-pine .pl-sway{transform-box:fill-box;transform-origin:50% 100%;animation:pl-sway 3.2s ease-in-out 1s infinite}
@keyframes pl-grow{from{transform:translateY(6px) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes pl-trunk{from{transform:scaleY(0)}to{transform:none}}
@keyframes pl-fade{from{opacity:0}to{opacity:.13}}
@keyframes pl-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.2deg)}70%{transform:rotate(2.2deg)}}
@keyframes pl-halo{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
.pl-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#f2c14e;box-shadow:0 0 10px rgba(242,193,78,.7);opacity:0;animation:pl-spark 2.6s ease-in-out infinite}
.pl-spark-1{left:30px;top:52px}.pl-spark-2{right:28px;top:38px;animation-delay:.9s;background:#7fd1a4;box-shadow:0 0 10px rgba(127,209,164,.8)}.pl-spark-3{right:40px;bottom:46px;animation-delay:1.7s;width:5px;height:5px}
@keyframes pl-spark{0%{opacity:0;transform:translateY(8px) scale(.6)}35%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1)}}
#load-state .loading-prelude{margin:2px 0 0;font-size:30px;font-weight:800;letter-spacing:-.8px;color:var(--pl-pine-dark,#0f4a38);-webkit-font-smoothing:antialiased}
#load-state .loading-prelude .brand-pine{color:var(--pl-pine,#1b6b52)}
#load-state .loading-heading{margin:0!important;font-size:16px!important;line-height:1.5!important;font-weight:600;color:#4a5d55;min-height:0!important;letter-spacing:-.2px!important}
.pl-loader-bar{width:180px;height:6px;border-radius:999px;background:#e2eee8;overflow:hidden;margin-top:12px}
.pl-loader-bar span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f8a5f,#53b483);animation:pl-bar 1.15s ease-in-out infinite}
@keyframes pl-bar{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
@media (max-width:640px){#load-state{min-height:calc(100svh - 120px)!important}.pl-loader-stage{width:152px;height:152px}.pl-loader-pine{width:96px;height:116px}#load-state .loading-prelude{font-size:28px}}
@media (prefers-reduced-motion:reduce){.pl-loader-stage *,.pl-loader-bar span{animation:none!important}.pl-spark{display:none}}

/* ---------- home hero ---------- */
.pine-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;margin:4px 0 22px;border-radius:28px;overflow:hidden;background:var(--pl-surface);border:1px solid var(--pl-line);box-shadow:0 20px 50px rgba(20,60,40,.10)}
.ph-scene{position:relative;order:2;min-height:260px}
.ph-land{position:absolute;inset:0;width:100%;height:100%}
.ph-sun{animation:ph-sun 6s ease-in-out infinite;transform-origin:248px 58px}
@keyframes ph-sun{50%{transform:scale(1.08)}}
.ph-pine{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);filter:drop-shadow(0 10px 14px rgba(20,60,40,.18))}
.ph-pine .pine-svg{display:block;animation:ph-sway 5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes ph-sway{50%{transform:rotate(1.5deg)}}
.ph-copy{order:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:34px 34px 30px}
.ph-greeting{margin:0;color:var(--pl-pine);font-weight:800;font-size:14px;letter-spacing:.2px}
.ph-title{margin:0;font-size:clamp(26px,3.4vw,36px);line-height:1.2;letter-spacing:-.8px}
.ph-message{margin:0;color:var(--pl-muted);line-height:1.6;font-size:15px;max-width:44ch}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px}
.ph-chip{padding:6px 12px;border-radius:999px;font-weight:800;font-size:13px}
.ph-streak{background:#fff1dc;color:#8a4b00}.ph-trees{background:var(--pl-pine-soft);color:var(--pl-pine)}
.ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.ph-start{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px 0 10px;border:0;border-radius:999px;background:var(--pl-pine);color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 14px 30px rgba(15,74,56,.28);transition:transform .15s,background .15s}
.ph-start:hover{background:var(--pl-pine-dark);transform:translateY(-1px)}
.ph-play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);font-size:14px}
.pine-hero[data-done=true] .ph-start{background:var(--pl-surface);color:var(--pl-pine);border:1.5px solid var(--pl-pine);box-shadow:none}
.pine-hero[data-done=true] .ph-play{background:var(--pl-pine-soft)}
/* Daily-materials entry adopted into the hero: a compact pill, never a stretched blob. */
.ph-actions .dm-entry{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--pl-line-strong);background:var(--pl-surface);color:var(--pl-ink);font-weight:700;font-size:15px;cursor:pointer}
.ph-actions .dm-entry:hover{background:var(--pl-soft)}
.ph-actions .dm-entry:focus-visible{outline:3px solid var(--pl-pine);outline-offset:2px}
.library-heading>.dm-entry{display:none}
@media (max-width:760px){
  .pine-hero{grid-template-columns:1fr;border-radius:24px}
  .ph-scene{order:1;min-height:170px}
  .ph-pine .pine-svg{width:118px;height:118px}
  .ph-copy{order:2;padding:20px 20px 22px}
  .ph-start{width:100%;justify-content:center;padding:0 20px}
  .ph-actions .dm-entry{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ph-sun,.ph-pine .pine-svg{animation:none}}

/* The old small card style is superseded by the hero. */
.pine-today{display:none}

/* Daily cards size to their own content (no stretched empty card). */
.library-heading{align-items:start!important}
.home-curiosity{height:auto!important;min-height:0!important}
.home-curiosity .curiosity-paper,.home-curiosity .daily-learning-content{min-height:220px!important;height:auto!important;display:grid;place-content:center}

/* ================= Home redesign: clean, calm, one clear path ================= */
/* Header: sticky, light, compact language pair */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--pl-bg) 86%,transparent)!important;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.home-language-settings{padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.home-language-settings .language-pair{gap:8px!important;align-items:end}
.home-language-settings .site-language>span{font-size:11px!important;font-weight:700;color:var(--pl-muted);letter-spacing:.2px}
.home-language-settings select{min-height:40px!important;border-radius:12px!important;border:1px solid var(--pl-line)!important;background-color:var(--pl-surface)!important;font-weight:700}
.site-utility-nav .nav-button{min-height:40px}

/* Section rhythm */
#library-view{max-width:1120px;margin:0 auto}
.library-heading{gap:16px!important;margin-bottom:22px!important}

/* Daily cards: equal height, compact, nothing floating in empty space */
.library-heading{align-items:stretch!important}
.home-curiosity,.daily-quote{border-radius:22px!important;padding:20px 22px!important;box-shadow:0 1px 2px rgba(20,40,32,.04),0 10px 26px rgba(20,40,32,.06)!important;border:1px solid var(--pl-line)!important;display:flex!important;flex-direction:column}
.home-curiosity{background:linear-gradient(160deg,#fffdf4 0%,#fbf6e6 100%)!important}
.daily-quote{background:var(--pl-surface)!important}
.home-curiosity .daily-learning-content,.daily-quote .daily-learning-content{flex:1;min-height:0!important}
.home-curiosity .curiosity-paper{display:grid;place-content:center;min-height:200px!important}
.home-curiosity .curiosity-prompt h2{font-size:clamp(22px,2.4vw,28px)!important;line-height:1.4;letter-spacing:-.4px}
.daily-learning-heading{padding-bottom:12px!important;margin-bottom:6px!important;border-bottom:1px solid var(--pl-line)!important}
.daily-learning-actions{padding-top:12px!important;margin-top:auto!important;border-top:1px solid var(--pl-line)!important}
.daily-quote .outro-quote{font-size:clamp(19px,2vw,23px)!important;line-height:1.4!important}
.daily-quote .quote-meaning{font-size:15px!important}
.daily-quote .quote-sentence-ipa{font-size:13px!important}
/* Key words as a compact row of chips instead of a tall table */
.daily-quote .quote-vocabulary{padding:10px 12px!important;border-radius:14px!important;margin-top:8px}
.daily-quote .quote-vocabulary h3{display:none}
.daily-quote .quote-vocabulary dl{display:flex!important;flex-wrap:wrap;gap:6px 14px;margin:0!important}
.daily-quote .quote-vocabulary dl>div{display:flex!important;align-items:baseline;gap:6px;flex-direction:row!important}
.daily-quote .quote-vocabulary dt{font-weight:800;font-size:14px}
.daily-quote .quote-vocabulary dd{margin:0!important;font-size:12px;color:var(--pl-muted)}
.daily-quote .quote-vocabulary dd+dd{display:none}

/* Learning modes: 4 tinted cards */
#learning-studio::before{content:"";display:block}
.studio-learning-entries{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important}
.studio-learning-entry{min-height:112px;padding:16px 18px!important;gap:16px!important;align-items:center}
.studio-learning-entry img{width:72px!important;height:72px!important;padding:6px!important;border-radius:20px!important}
.studio-learning-entry[data-tone=general]{background:linear-gradient(135deg,#eef8f1,#ffffff 60%)!important;border-color:#cfe6d6!important}
.studio-learning-entry[data-tone=general] img{background:#d9efe0!important}
.studio-learning-entry[data-tone=audio] img{background:#e6eefb!important}
.studio-learning-entry[data-tone=selection] img{background:#fbeee0!important}
.studio-learning-entry[data-tone=typing] img{background:#efe8fa!important}
.studio-entry-copy strong{font-size:18px!important;letter-spacing:-.3px}
.studio-entry-copy span{font-size:13.5px!important;line-height:1.5;color:var(--pl-muted)}
.studio-entry-arrow{width:36px;height:36px;display:grid!important;place-items:center;border-radius:50%;background:var(--pl-soft);font-size:16px!important;flex:none}
.studio-learning-entry:hover .studio-entry-arrow{background:var(--pl-pine);color:#fff}
@media (max-width:760px){.studio-learning-entries{grid-template-columns:1fr}.studio-learning-entry{min-height:92px}.studio-learning-entry img{width:60px!important;height:60px!important}}

/* Footer */
.forest-footer{margin-top:28px!important;padding:22px 0!important;border-top:1px solid var(--pl-line)!important;background:none!important}

/* ================= Readable at every size =================
   Many legacy rules use small fixed px sizes, so on wider screens the whole UI is
   scaled up uniformly (text, buttons, spacing together). Phones keep 100%. */
@media (min-width:1000px){body{zoom:1.12}}
@media (min-width:1360px){body{zoom:1.22}}
@media (min-width:1700px){body{zoom:1.32}}
#library-view{max-width:1240px!important;width:auto;padding-left:24px;padding-right:24px}
.site-header{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:24px!important;padding-right:24px!important}
/* Base text a touch larger everywhere it was set very small. */
.ph-message,.studio-entry-copy span,.daily-quote .quote-meaning{font-size:16px!important}
.ph-greeting{font-size:15px}
.studio-entry-copy strong{font-size:20px!important}
.daily-learning-heading h2,.curiosity-kicker,.daily-quote-heading h2{font-size:16px!important}
.home-curiosity .curiosity-prompt h2{font-size:clamp(26px,2.6vw,34px)!important}
.daily-quote .outro-quote{font-size:clamp(22px,2.2vw,27px)!important}
.daily-quote .quote-vocabulary dt{font-size:16px}.daily-quote .quote-vocabulary dd{font-size:14px}
.home-language-settings .site-language>span{font-size:12.5px!important}
.site-utility-nav .nav-button,.pl-auth-actions a{font-size:15px!important}

/* ---------- hero scene: alive and playful ---------- */
.ph-scene{overflow:hidden}
.pine-hero[data-time=night] .ph-scene{background:#1d2b4f}
.ph-cloud{animation:ph-drift 38s linear infinite}.ph-cloud-2{animation-duration:52s;animation-delay:-20s}
@keyframes ph-drift{from{transform:translateX(-120px)}to{transform:translateX(380px)}}
.ph-birds{animation:ph-fly 22s linear infinite;animation-delay:-6s}
@keyframes ph-fly{0%{transform:translate(-40px,40px)}100%{transform:translate(360px,10px)}}
.ph-star{animation:ph-twinkle 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ph-twinkle{50%{opacity:.25}}
button.ph-pine{border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.ph-pine:focus-visible{outline:3px solid var(--pl-pine);outline-offset:4px;border-radius:16px}
.ph-pine.is-tap .pine-svg{animation:ph-shake .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes ph-shake{0%{transform:rotate(0)}20%{transform:rotate(-6deg) scale(1.04)}45%{transform:rotate(5deg)}70%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.ph-cone{position:absolute;bottom:58%;font-size:22px;pointer-events:none;animation:ph-drop 1.2s cubic-bezier(.5,0,.7,1) forwards}
@keyframes ph-drop{0%{transform:translateY(0) rotate(0);opacity:1}80%{opacity:1}100%{transform:translateY(120px) rotate(200deg);opacity:0}}
.ph-bubble{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:#fff;color:var(--pl-ink);font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.12);white-space:nowrap;opacity:0;pointer-events:none}
.ph-bubble.is-on{animation:ph-bubble 2.6s ease both}
@keyframes ph-bubble{0%{opacity:0;transform:translate(-50%,6px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.ph-grow{display:grid;gap:6px;max-width:420px}
.ph-grow-label{font-size:14px;font-weight:700;color:var(--pl-pine)}
.ph-grow-bar{height:10px;border-radius:999px;background:var(--pl-pine-soft);overflow:hidden}
.ph-grow-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4fb286,var(--pl-pine));transition:width .6s ease}
@media (prefers-reduced-motion:reduce){.ph-cloud,.ph-birds,.ph-star,.ph-pine.is-tap .pine-svg,.ph-cone,.ph-bubble.is-on{animation:none!important}}
/* Three learning modes: one row on wide screens. */
@media (min-width:1000px){.studio-learning-entries{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* ---------- hero game: level, missions, squirrel ---------- */
.ph-level{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ph-level strong{font-size:16px;color:var(--pl-pine-dark)}.ph-level span{font-size:13px;color:var(--pl-muted)}
.ph-game{display:grid;gap:6px;max-width:460px;padding:12px 14px;border-radius:16px;background:var(--pl-surface-2);border:1px solid var(--pl-line)}
.ph-missions-head{font-weight:800;font-size:14px;color:var(--pl-ink)}
.ph-missions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ph-missions li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;font-size:14px}
.ph-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--pl-line-strong);display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff}
.ph-missions li.is-done .ph-check{background:var(--pl-pine);border-color:var(--pl-pine);animation:ac-grow .5s ease}
.ph-missions li.is-done .ph-mission-text{color:var(--pl-muted);text-decoration:line-through}
.ph-mission-meta{font-size:12.5px;font-weight:800;color:#8a5a00;font-variant-numeric:tabular-nums}
.ph-squirrel{position:absolute;left:8%;bottom:4px;border:0;background:none;padding:0;cursor:pointer;animation:ph-peek 7s ease-in-out infinite;transform-origin:50% 100%}
.ph-squirrel img{display:block;width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
@keyframes ph-peek{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-8px) rotate(-4deg)}86%{transform:translateY(0) rotate(3deg)}}
.ph-squirrel.is-hop{animation:ph-hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ph-hop{40%{transform:translateY(-26px) rotate(-8deg)}100%{transform:translateY(0)}}
@media (max-width:760px){.ph-squirrel img{width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){.ph-squirrel,.ph-squirrel.is-hop{animation:none}}

/* ================= Learning modes v3: clean, compact tiles right under the hero ================= */
#learning-studio{margin:0 0 22px!important}
.studio-learning-entries{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0!important}
.studio-learning-entry{display:grid!important;grid-template-columns:52px minmax(0,1fr) 20px!important;align-items:center!important;gap:14px!important;min-height:84px!important;padding:14px 18px!important;border-radius:18px!important;background:var(--pl-surface)!important;border:1px solid var(--pl-line)!important;box-shadow:none!important;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.studio-learning-entry:hover{border-color:var(--pl-pine)!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,60,40,.08)!important}
.studio-learning-entry img{width:52px!important;height:52px!important;padding:4px!important;border-radius:16px!important;object-fit:contain}
.studio-learning-entry[data-tone=general]{background:var(--pl-pine)!important;border-color:var(--pl-pine)!important}
.studio-learning-entry[data-tone=general] img{background:rgba(255,255,255,.92)!important}
.studio-learning-entry[data-tone=general] .studio-entry-copy strong,.studio-learning-entry[data-tone=general] .studio-entry-copy span,.studio-learning-entry[data-tone=general] .studio-entry-arrow{color:#fff!important}
.studio-learning-entry[data-tone=general]:hover{background:var(--pl-pine-dark)!important}
.studio-entry-copy{display:grid;gap:2px;min-width:0}
.studio-entry-copy strong{font-size:18px!important;letter-spacing:-.3px;line-height:1.3}
.studio-entry-copy span{font-size:14px!important;color:var(--pl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-entry-arrow{width:auto!important;height:auto!important;background:none!important;color:var(--pl-muted)!important;font-size:18px!important}
.studio-learning-entry:hover .studio-entry-arrow{background:none!important;color:var(--pl-pine)!important;transform:translateX(3px)}
@media (max-width:900px){.studio-learning-entries{grid-template-columns:1fr!important}}

/* forest decorations + shop */
.ph-decor{position:absolute;inset:0;pointer-events:none}
.ph-decor-item{position:absolute;font-size:28px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15));animation:ac-grow .7s cubic-bezier(.2,1.4,.4,1) both}
.ph-shop{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:8px;border-top:1px dashed var(--pl-line)}
.ph-shop-label{font-size:13px;font-weight:800;color:var(--pl-muted);margin-right:4px}
.ph-shop-item{min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--pl-line-strong);background:var(--pl-surface);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.ph-shop-item:hover:not(:disabled){border-color:#c99a2e;background:#fff8e6}
.ph-shop-item:disabled{opacity:.45;cursor:default}
.ph-shop-item[data-owned=true]{opacity:1;background:var(--pl-pine-soft);border-color:transparent;color:var(--pl-pine)}

/* ---------- Mobile header: two compact rows that scroll away with the page ---------- */
@media (max-width:760px){
  body .site-header{position:static!important;display:grid!important;grid-template-columns:auto 1fr auto auto;grid-template-areas:"brand nav auth" "lang lang lang";align-items:center;gap:8px 6px!important;padding:10px 14px 8px!important;min-height:0!important;height:auto!important;box-shadow:none!important}
  body .site-header .brand{grid-area:brand;gap:6px!important}
  body .site-header .brand-mark{width:26px!important;height:30px!important}
  body .site-header .brand-wordmark{font-size:20px!important}
  body .site-header .language-line-navigation{grid-area:nav;justify-self:end;display:flex!important;gap:2px!important;margin:0!important;padding:0!important}
  body .site-header .language-line-navigation .nav-button{min-width:38px!important;width:38px;height:38px!important;min-height:38px!important;padding:0!important;justify-content:center;border-radius:10px}
  body .site-header .language-line-navigation .nav-button .nav-label,body .site-header .language-line-navigation .profile-menu span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap}
  body .site-header .pl-auth-row{grid-area:auth;display:flex!important;gap:6px;margin:0!important;padding:0!important;width:auto!important;justify-content:flex-end}
  body .site-header .pl-auth-row .pl-upgrade,body .site-header .pl-auth-row .pl-auth-signup{display:none!important}
  body .site-header .pl-auth-row a{min-height:34px!important;padding:0 12px!important;font-size:14px!important;border-radius:999px}
  body .site-header .home-language-settings{grid-area:lang;margin:0!important;padding:0!important;width:100%!important}
  body .site-header .language-pair{gap:6px!important;align-items:center!important}
  body .site-header .language-pair .site-language>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body .site-header .language-pair select{min-height:38px!important;height:38px!important;font-size:15px!important;padding-top:0!important;padding-bottom:0!important}
  body .site-header .language-arrow{width:16px!important}
}