/* Approved home/lessons materials, scoped to the Practice page.
   Scene: coastal-scene.css/js. Tactile controls: tokens.css .sg-button. */
body.practice-playful{
  --app-paper:#fff9e9;
  --app-surface:#fffdf5;
  --app-ground:transparent;
  --app-ink:#214b40;
  --app-muted:#576d61;
  --app-rim:#ddd5bf;
  --app-sea:#2f6f4e;
  --app-deep:#205443;
  --app-soft:#e4eed9;
  --app-edge:#c9bea2;
  --app-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --app-jp:var(--app-font);
  --practice-heading:'Baloo 2','Hiragino Maru Gothic ProN',var(--app-font);
  --practice-safe-top:env(safe-area-inset-top,0px);
  --practice-safe-right:env(safe-area-inset-right,0px);
  --practice-safe-bottom:env(safe-area-inset-bottom,0px);
  --practice-safe-left:env(safe-area-inset-left,0px);
  position:relative;
  height:auto;
  min-height:100svh;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--sea-fallback-4,#1b6e96);
  color:var(--app-ink);
  font-family:var(--app-font);
}
body.practice-playful.dw-has-shell{padding-top:0}
body.practice-playful.dw-has-nav{padding-bottom:calc(110px + var(--practice-safe-bottom))}
body.practice-playful.lang-jp [data-jp]{font-family:var(--app-font)}

/* A light header, with the same object mark and cream language control as home. */
body.practice-playful .dw-hd{
  position:relative;
  inset:auto;
  width:100%;
  max-width:1000px;
  height:auto;
  min-height:76px;
  margin:0 auto;
  padding:calc(14px + var(--practice-safe-top)) 124px 10px max(20px,var(--practice-safe-left));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:5px;
  background:transparent!important;
  border:0;
  box-shadow:none;
  z-index:10;
}
body.practice-playful .dw-hd .dw-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font:800 20px/1.2 var(--practice-heading);
  letter-spacing:.08em;
  color:var(--sky-ink,var(--app-ink))!important;
  text-shadow:var(--sky-shadow,none);
}
body.practice-playful .dw-brand{display:inline-flex;align-items:center;gap:9px;min-width:0}
body.practice-playful .dw-brand-object{
  display:block;
  width:40px;
  height:40px;
  flex:none;
  object-fit:contain;
  border:2px solid var(--app-paper);
  border-radius:15px;
  background:var(--app-paper);
  box-shadow:0 3px 0 var(--app-edge);
}
body.practice-playful .dw-hd .dw-pill{
  grid-column:1/-1;
  justify-self:start;
  max-width:100%;
  min-height:26px;
  margin:0 0 0 49px;
  padding:3px 9px;
  gap:6px;
  border:1px solid var(--app-rim);
  border-radius:11px;
  background:var(--app-paper);
  box-shadow:inset 0 1px 0 #fffdf5,0 2px 0 #ded5bd;
  color:var(--app-muted);
  font:600 11px/1.5 var(--app-font);
}
body.practice-playful .dw-hd .dw-pill .seg{padding:0;border:0;background:none;box-shadow:none;min-height:0}
body.practice-playful #drewLangToggle{
  position:absolute;
  top:calc(16px + var(--practice-safe-top));
  right:max(20px,var(--practice-safe-right));
  min-height:44px;
  padding:8px 11px;
  border:1px solid var(--app-rim);
  border-radius:16px;
  background:linear-gradient(#fffdf5,#f5e9cf);
  color:var(--app-deep);
  box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--app-edge);
  font:700 13px/1.2 var(--app-font);
  z-index:20;
  transition:transform 150ms ease,box-shadow 150ms ease;
}
body.practice-playful #drewLangToggle:active{transform:translateY(3px);box-shadow:inset 0 1px 1px #214b4020,0 1px 0 var(--app-edge)}

/* Practice keeps its featured conversation, six tools, games and human lesson
   booking in the same order. The illustrations are decorative; the native links
   retain their exact routes and factual review count. */
body.practice-playful #dw-practice{
  position:relative;z-index:1;width:100%;max-width:1000px;height:auto;min-height:0;
  margin:0 auto;padding:12px max(20px,var(--practice-safe-right)) 16px max(20px,var(--practice-safe-left));
  display:flex;flex-direction:column;gap:23px;
}
body.practice-playful #dw-practice > *{animation:none}
body.practice-playful #dw-practice .dw-scene{position:relative;min-height:0;margin:0;padding:2px 2px 0;overflow:visible;background:none}
body.practice-playful #dw-practice .dw-h{margin:0}
body.practice-playful #dw-practice .dw-h .eye{font:700 11px/1.5 var(--app-font);letter-spacing:.13em;color:var(--sky-sub,var(--app-muted));text-shadow:var(--sky-shadow,none)}
body.practice-playful #dw-practice .dw-h .ttl{display:block;margin-top:7px;color:#fff9e9;font:800 clamp(26px,6.7vw,36px)/1.3 var(--practice-heading);letter-spacing:-.035em;text-wrap:balance;text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899}
body.practice-playful #dw-practice .dw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 16px;align-items:stretch}
body.practice-playful #dw-practice :is(.dw-tile,.dw-feat).sg-button{
  --sg-radius:24px;--sg-height:244px;--sg-depth:7px;--sg-press:5px;
  --sg-face-top:#76e6c3;--sg-face-bottom:#38cfa9;--sg-rim:#b3f8df;--sg-base:#168b75;--sg-ink:#123f38;
  --sg-gloss:rgba(255,255,255,.76);--sg-highlight:rgba(255,255,255,.9);--sg-shadow:rgba(8,47,62,.25);
  --practice-art-top:#c4ffe8;--practice-art-bottom:#6fe4c4;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  width:100%;min-width:0;min-height:var(--sg-height);height:auto;padding:9px 9px 13px;
  overflow:hidden;text-align:left;white-space:normal;font-family:var(--app-font);scroll-margin-block:24px 110px;
}
body.practice-playful #dw-practice .sg-button[data-practice="listening"]{--sg-face-top:#96dcfa;--sg-face-bottom:#59baee;--sg-rim:#d5f4ff;--sg-base:#2b84b4;--sg-ink:#133b56;--practice-art-top:#def8ff;--practice-art-bottom:#9addf7}
body.practice-playful #dw-practice .sg-button[data-practice="pronunciation"]{--sg-face-top:#c1b4fa;--sg-face-bottom:#a28aea;--sg-rim:#e8dfff;--sg-base:#7560b6;--sg-ink:#34254f;--practice-art-top:#f0e7ff;--practice-art-bottom:#ccbcfa}
body.practice-playful #dw-practice .sg-button[data-practice="vocabulary"]{--sg-face-top:#b5ed78;--sg-face-bottom:#83d54c;--sg-rim:#e0ffb7;--sg-base:#548f35;--sg-ink:#234416;--practice-art-top:#ecffcd;--practice-art-bottom:#bce988}
body.practice-playful #dw-practice .sg-button[data-practice="mock"]{--sg-face-top:#9ebff7;--sg-face-bottom:#759ce9;--sg-rim:#d6e4ff;--sg-base:#5179b7;--sg-ink:#243653;--practice-art-top:#e3edff;--practice-art-bottom:#b1cef9}
body.practice-playful #dw-practice .sg-button[data-practice="wordex"]{--sg-face-top:#f5bde3;--sg-face-bottom:#e397cf;--sg-rim:#ffe0f5;--sg-base:#b6689e;--sg-ink:#592d4b;--practice-art-top:#ffe9f8;--practice-art-bottom:#f5bfe6}
body.practice-playful #dw-practice .sg-button[data-practice="grammar"]{--sg-face-top:#ffd2b1;--sg-face-bottom:#f4b38f;--sg-rim:#ffead7;--sg-base:#bb8068;--sg-ink:#573428;--practice-art-top:#ffe9d4;--practice-art-bottom:#ffd0ac}
body.practice-playful #dw-practice .sg-button[data-practice="games"]{--sg-face-top:#abddda;--sg-face-bottom:#74c5c0;--sg-rim:#d7fffa;--sg-base:#438f8a;--sg-ink:#194a49;--practice-art-top:#e0fffa;--practice-art-bottom:#a5e6dc}
body.practice-playful #dw-practice .practice-art{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:138px;border-radius:18px;background:radial-gradient(ellipse 80% 90% at 50% 45%,var(--practice-art-top),var(--practice-art-bottom) 68%,transparent 100%);pointer-events:none}
body.practice-playful #dw-practice .practice-category-art{display:block;width:100%;height:100%;max-width:260px;padding:0;object-fit:contain;object-position:center;filter:drop-shadow(0 7px 4px #173f4226);transition:transform 220ms cubic-bezier(.22,1.1,.4,1);pointer-events:none}
body.practice-playful #dw-practice .practice-caption{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;min-height:78px;padding:13px 3px 2px;border-top:1px solid #ffffff80;color:var(--sg-ink)}
body.practice-playful #dw-practice :is(.dw-tile,.dw-feat) .tt{display:block;width:100%;color:var(--sg-ink);font:800 18px/1.35 var(--practice-heading);letter-spacing:-.025em;text-shadow:none;overflow-wrap:break-word;text-wrap:pretty}
body.practice-playful #dw-practice :is(.dw-tile,.dw-feat) .ss{display:block;max-width:100%;padding-right:18px;margin-top:0;color:var(--sg-ink);opacity:1;font:600 12px/1.6 var(--app-font);white-space:normal;overflow:visible;text-overflow:clip;text-shadow:none;overflow-wrap:break-word}
body.practice-playful #dw-practice .practice-arrow{position:absolute;right:12px;bottom:16px;display:flex;align-items:center;justify-content:center;width:19px;height:24px;color:var(--sg-ink);pointer-events:none}
body.practice-playful #dw-practice .practice-arrow svg{display:block;width:19px;height:19px}
body.practice-playful #dw-practice .dw-tile .dw-badge{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border:1px solid #eaffd7;border-radius:12px;background:#2d5b28;color:#fffdf5;box-shadow:0 2px 0 #1b421c;font:800 12px/1 var(--practice-heading)}
body.practice-playful #dw-practice .dw-feat.sg-button{--sg-height:176px;display:grid;grid-template-columns:minmax(100px,36%) minmax(0,1fr) 18px;align-items:center;gap:12px;padding:12px}
body.practice-playful #dw-practice .dw-feat .practice-art{height:150px}
body.practice-playful #dw-practice .dw-feat .tx{display:flex;flex-direction:column;gap:8px;min-width:0}
body.practice-playful #dw-practice .dw-feat .tt{font-size:22px}
body.practice-playful #dw-practice .dw-feat .ss{padding:0;font-size:12px}
body.practice-playful #dw-practice .dw-feat.soft .ss{color:var(--sg-ink);opacity:1}
body.practice-playful #dw-practice .dw-feat .practice-arrow{position:static}
body.practice-playful #dw-practice .dw-ladder{display:flex;align-items:center;gap:14px;min-height:86px;padding:15px 16px;border:1px solid var(--app-rim);border-radius:22px;background:var(--app-paper);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--app-edge);color:var(--app-ink)}
body.practice-playful #dw-practice .dw-ladder .tx{flex:1;min-width:0;font:600 13px/1.7 var(--app-font);text-wrap:pretty}
body.practice-playful #dw-practice .dw-ladder .book{--sg-face-top:#bd7755;--sg-face-bottom:var(--cta-money);--sg-base:#79442e;--sg-rim:#dc9e7b;--sg-ink:#fffdf5;--sg-focus:#79442e;--sg-depth:5px;--sg-press:3px;flex:none;padding:10px 19px;font:800 14px/1.4 var(--app-font);text-shadow:0 1px 0 #79442e33}
body.practice-playful #dw-practice :is(.dw-tile,.dw-feat,.dw-ladder):focus-visible{outline:3px solid #fff9e9;outline-offset:6px}
@media(hover:hover) and (pointer:fine){body.practice-playful #dw-practice .sg-button:hover .practice-category-art{transform:translateY(-3px) rotate(-1deg)}}
@media(min-width:600px){
  body.practice-playful #dw-practice{padding-top:20px;gap:27px}
  body.practice-playful #dw-practice .dw-grid{gap:26px 22px}
  body.practice-playful #dw-practice .dw-tile.sg-button{--sg-radius:27px;--sg-height:286px;padding:11px 11px 14px}
  body.practice-playful #dw-practice .dw-tile .practice-art{height:178px;border-radius:20px}
  body.practice-playful #dw-practice .dw-tile .practice-caption{padding:14px 7px 2px;min-height:80px}
  body.practice-playful #dw-practice .dw-tile .tt{font-size:21px}
  body.practice-playful #dw-practice .dw-tile .ss{font-size:13px}
  body.practice-playful #dw-practice .dw-feat{gap:20px;padding:15px 24px 15px 15px}
  body.practice-playful #dw-practice .dw-feat .practice-art{height:178px}
  body.practice-playful #dw-practice .dw-feat .tt{font-size:28px}
  body.practice-playful #dw-practice .dw-feat .ss{font-size:14px}
}
@media(min-width:880px){
  body.practice-playful #dw-practice{padding:22px 24px 20px;gap:29px}
  body.practice-playful #dw-practice .dw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 20px}
  body.practice-playful #dw-practice .dw-tile .practice-art{height:clamp(160px,15vw,185px)}
  body.practice-playful #dw-practice .dw-tile .tt{font-size:20px}
}
@media(max-width:359px){
  body.practice-playful #dw-practice{padding-left:max(14px,var(--practice-safe-left));padding-right:max(14px,var(--practice-safe-right));gap:21px}
  body.practice-playful #dw-practice .dw-grid{gap:20px 12px}
  body.practice-playful #dw-practice .dw-tile.sg-button{--sg-radius:21px;--sg-height:232px;padding:7px 7px 12px}
  body.practice-playful #dw-practice .dw-tile .practice-art{height:124px;border-radius:16px}
  body.practice-playful #dw-practice .dw-tile .practice-caption{padding:12px 2px 2px;min-height:84px}
  body.practice-playful #dw-practice .dw-tile .tt{font-size:16px}
  body.practice-playful #dw-practice .dw-tile .ss{font-size:11px}
  body.practice-playful #dw-practice .dw-feat.sg-button{grid-template-columns:minmax(96px,35%) minmax(0,1fr) 16px;gap:8px;padding:10px}
  body.practice-playful #dw-practice .dw-feat .tt{font-size:19px}
  body.practice-playful #dw-practice .dw-feat .ss{font-size:11px}
  body.practice-playful #dw-practice .dw-ladder{padding:14px 12px;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  body.practice-playful :is(.practice-category-art,.dw-nav a,#drewLangToggle){transition:none}
  body.practice-playful #dw-practice .sg-button:hover .practice-category-art{transform:none}
}

/* The existing dock keeps its destinations and due counter. */
body.practice-playful .dw-nav{
  position:fixed;
  left:8px;
  right:8px;
  top:auto;
  bottom:0;
  width:auto;
  transform:none;
  display:flex;
  flex-direction:row;
  gap:2px;
  margin:0;
  padding:5px max(4px,var(--practice-safe-right)) calc(8px + var(--practice-safe-bottom)) max(4px,var(--practice-safe-left));
  border:1px solid var(--app-rim);
  border-bottom:0;
  border-radius:25px 25px 0 0;
  background:linear-gradient(#fffdf5,#f9f1df);
  box-shadow:inset 0 2px 0 #fff,0 -3px 18px #123b4f15;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:30;
}
body.practice-playful .dw-nav a{
  flex:1 1 0%;
  min-width:44px;
  min-height:64px;
  padding:4px 0 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:17px;
  color:var(--app-muted);
  opacity:1;
  font:500 11px/1.4 var(--app-font);
  transition:transform 140ms ease,background 140ms ease;
}
body.practice-playful .dw-nav a:last-child{flex-grow:1.25}
body.practice-playful .dw-nav a.on{background:var(--app-soft);box-shadow:inset 0 1px 0 #fff,0 2px 0 #baccb1;color:var(--app-deep);font-weight:800}
body.practice-playful .dw-nav a:active{transform:translateY(2px)}
body.practice-playful .dw-nav a [data-jp]{font:inherit;letter-spacing:normal;white-space:normal;overflow-wrap:normal;word-break:normal}
body.practice-playful .dw-nav .dw-ic{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:none}
body.practice-playful .dw-nav-object{display:block;width:36px;height:36px;object-fit:contain;flex:none}
body.practice-playful .dw-nav-object + svg{display:none}
body.practice-playful .dw-nav .dw-badge{top:0;right:-7px;background:var(--app-sea);border:1px solid var(--app-paper);font:700 10px/1.3 var(--app-font);min-width:17px;height:17px}
body.practice-playful .dw-ft{position:relative;z-index:1;max-width:900px;margin:24px auto 0;padding:0 20px 10px;gap:4px 8px;color:#fff9e9;text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899;opacity:1;font:500 11px/1.6 var(--app-font)}
body.practice-playful .dw-ft a{display:inline-flex;align-items:center;min-height:44px;padding:4px 5px}
body.practice-playful .dw-ft .sep{align-self:center;opacity:.45}
body.practice-playful :is(.dw-nav a,#drewLangToggle,.dw-ft a):focus-visible{outline:3px solid var(--app-deep);outline-offset:4px}
body.practice-playful .dw-ft a:focus-visible{outline-color:#fff9e9}


@media(min-width:880px){
  body.practice-playful{--dw-nav-inset:228px}
  body.practice-playful.dw-has-nav{padding-left:var(--dw-nav-inset);padding-bottom:24px}
  body.practice-playful .dw-hd{display:flex;flex-wrap:wrap;min-height:82px;padding:24px 132px 10px 24px;gap:14px}
  body.practice-playful .dw-hd .dw-pill{margin:0 0 0 auto;font-size:12px}
  body.practice-playful #drewLangToggle{top:24px;right:max(24px,calc((100vw - 228px - 940px)/2))}
  body.practice-playful .dw-nav{left:18px;right:auto;top:20px;bottom:20px;width:190px;flex-direction:column;justify-content:flex-start;gap:9px;padding:15px 10px;border:1px solid var(--app-rim);border-radius:27px;box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--app-edge),0 12px 30px #163c4d14}
  body.practice-playful .dw-nav a{flex:none;width:100%;min-height:56px;flex-direction:row;align-items:center;justify-content:flex-start;padding:8px 9px;gap:10px;font-size:14px;text-align:left}
  body.practice-playful .dw-nav a:last-child{flex-grow:0}
  body.practice-playful .dw-nav .dw-badge{right:-4px;top:-2px}
  body.practice-playful .dw-ft{margin-top:28px;padding-bottom:10px}
}
@media(max-width:359px){
  body.practice-playful .dw-hd{padding-left:max(14px,var(--practice-safe-left));padding-right:112px}
  body.practice-playful .dw-hd .dw-logo{font-size:17px;gap:7px}
  body.practice-playful .dw-brand-object{width:35px;height:35px}
  body.practice-playful .dw-hd .dw-pill{margin-left:42px;font-size:10px}
  body.practice-playful #drewLangToggle{right:max(14px,var(--practice-safe-right))}
  body.practice-playful .dw-nav{left:4px;right:4px}
  body.practice-playful .dw-nav a{font-size:10px}
}
@media(max-width:879px) and (max-height:500px) and (orientation:landscape){
  body.practice-playful .dw-nav a{min-height:44px;flex-direction:row;gap:5px}
  body.practice-playful .dw-nav :is(.dw-ic,.dw-nav-object){width:30px;height:30px}
  body.practice-playful.dw-has-nav{padding-bottom:calc(84px + var(--practice-safe-bottom))}
}

/* All nine primary destinations are within one portrait phone view. At large
   text/zoom or landscape the original natural-flow presentation remains.
   THE CARDS FILL THE SCREEN (Andrew, 13 Oct 2026 06:05, item 4): the heading row, then one row per three cards, however
   many destinations are live, each row an equal share of the height down to the tab bar. A fixed three-row grid left the
   bottom row empty when fewer than seven showed (build 6 shows six). test/cards-fill-height.cjs */
@media(min-width:360px) and (max-width:600px) and (min-height:600px) and (orientation:portrait){
  body.practice-playful.dw-has-nav{padding-bottom:calc(88px + var(--practice-safe-bottom))}
  body.practice-playful .dw-hd{min-height:66px;height:calc(66px + var(--practice-safe-top));padding-top:calc(8px + var(--practice-safe-top));padding-bottom:8px}
  body.practice-playful .dw-hd .dw-pill{display:none}
  body.practice-playful #drewLangToggle{top:calc(9px + var(--practice-safe-top))}
  body.practice-playful #dw-practice{height:calc(100svh - 154px - var(--practice-safe-top) - var(--practice-safe-bottom) - var(--practice-daily-room));padding:4px 16px 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:34px;grid-auto-rows:minmax(108px,1fr);gap:14px 10px}
  body.practice-playful #dw-practice .dw-scene{grid-column:1/-1;padding:0}
  body.practice-playful #dw-practice .dw-h .eye{display:none}
  body.practice-playful #dw-practice .dw-h .ttl{margin:0;font-size:24px;line-height:1.3;color:var(--sky-ink);text-shadow:var(--sky-shadow)}
  body.practice-playful #dw-practice .dw-grid{display:contents}
  body.practice-playful #dw-practice :is(.dw-feat,.dw-tile).sg-button{--sg-radius:20px;--sg-depth:5px;--sg-press:3px;display:flex;flex-direction:column;gap:0;min-height:0;height:100%;padding:5px 6px 8px;overflow:visible}
  body.practice-playful #dw-practice :is(.dw-feat,.dw-tile) .practice-art{position:relative;flex:1;min-height:35px;height:auto;width:100%;border-radius:14px}
  body.practice-playful #dw-practice .practice-category-art{position:absolute;inset:0;width:100%;height:100%}
  body.practice-playful #dw-practice :is(.practice-caption,.dw-feat .tx){display:flex;flex:none;flex-direction:column;align-items:flex-start;gap:3px;min-height:55px;width:100%;padding:6px 1px 0;border-top:1px solid #ffffff80}
  body.practice-playful #dw-practice :is(.dw-feat,.dw-tile) .tt{font-size:14px;line-height:1.3}
  body.practice-playful #dw-practice :is(.dw-feat,.dw-tile) .ss{font-size:10px;line-height:1.3;padding:0}
  body.practice-playful #dw-practice .practice-arrow{display:none}
  body.practice-playful #dw-practice .dw-badge{top:5px;right:5px;min-width:25px;height:25px;font-size:11px}
  body.practice-playful #dw-practice .dw-ladder{min-height:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 8px;border-radius:20px}
  body.practice-playful #dw-practice .dw-ladder .tx{flex:none;font-size:11px;line-height:1.5}
  body.practice-playful #dw-practice .dw-ladder .book{--sg-height:44px;width:100%;padding:8px 5px;font-size:14px}
  body.practice-playful .dw-ft{display:none}
  /* THE DAILY CARD ROW FITS TOO (Andrew, 13 Oct 2026 06:05, item 4, "no scroll"): word-cards-entry.js puts the 今日のことば
     カード row right after the grid. Build 6 sized the grid to the tab bar, so that row sat under the tab bar and the page
     scrolled 142 px to reach it. When the row is there, the grid leaves it an 80 px slot above the tab bar. Only its padding,
     margins and the card's picture size change: its title and line keep their size and wrap if they need to, and the
     card's own label keeps build 6's size. */
  body.practice-playful{--practice-daily-room:0px}
  body.practice-playful:has(#sgwc-daily-entry){--practice-daily-room:80px}
  body.practice-playful #sgwc-daily-entry{box-sizing:border-box;width:auto;max-width:none;height:80px;min-height:0;margin:0 16px;padding:8px 14px;gap:12px}
  body.practice-playful #sgwc-daily-entry .sgwc-entry-card{flex-basis:42px;height:54px}
  body.practice-playful #sgwc-daily-entry .sgwc-entry-front img{width:32px;height:30px}
  body.practice-playful #sgwc-daily-entry .sgwc-entry-copy{gap:2px;line-height:1.35}
  body.practice-playful #sgwc-daily-entry .sgwc-entry-copy strong{font-size:15px}
  body.practice-playful #sgwc-daily-entry .sgwc-entry-copy>span{font-size:11px}
}