/* Word Garden (native build). Generated by tools/build_garden.py from the standalone game file.
   Everything is scoped under .wg so it cannot clash with the rest of the site. */
.wg{
    --sky-top:#BEE7FF;
    --sky-bottom:#EAF9FF;
    --sun:#FFD166;
    --sun-glow:#FFF3D0;
    --grass-dark:#4C9A5B;
    --grass-light:#7FC77F;
    --soil:#9A7350;
    --soil-dark:#7C5844;
    --card-bg:#FFFFFF;
    --text-dark:#3A3A3A;
    --text-soft:#6B6B6B;
    --pink:#FF6B9D;
    --purple:#B185DB;
    --orange:#FF9F5B;
    --red:#FF6B6B;
    --blue:#5DA9E9;
    --shadow-soft: 0 8px 24px rgba(60,50,30,0.15);
    --radius-lg: 28px;
    --radius-md: 18px;
  }
.wg, .wg *{box-sizing:border-box;}
.wg, .wg{margin:0;padding:0;height:100%;}
.wg{-webkit-text-size-adjust:100%;}
.wg{
    font-family:'Quicksand',sans-serif;
    color:var(--text-dark);
    min-height:100vh;
    min-height:calc(var(--vh, 1vh) * 100);
    background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bottom) 55%, var(--grass-light) 55%, var(--grass-dark) 100%);
    position:relative;
    overscroll-behavior-y:contain;
    -webkit-tap-highlight-color:transparent;
  }
.wg button, .wg input{touch-action:manipulation;}
.wg button{-webkit-tap-highlight-color:transparent;}
.wg h1, .wg h2, .wg h3, .wg .display{font-family:'Baloo 2',sans-serif;}
.wg /* Custom garden-spade cursor */
  html, .wg, .wg a, .wg .bed, .wg .level-tab, .wg .voice-item, .wg .practice-chip{
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%20transform%3D%22rotate%28-40%2016%2016%29%22%3E%0A%20%20%3Crect%20x%3D%2214.5%22%20y%3D%2210%22%20width%3D%223%22%20height%3D%2220%22%20rx%3D%221.5%22%20fill%3D%22%238B5E3C%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20L18.2%206.2%20L24.5%206.2%20L19.4%209.9%20L21.3%2016%20L16%2012.2%20L10.7%2016%20L12.6%209.9%20L7.5%206.2%20L13.8%206.2%20Z%22%20fill%3D%22%23FFD166%22%20stroke%3D%22%23E8A93A%22%20stroke-width%3D%220.8%22/%3E%0A%3C/g%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%221.4%22%20fill%3D%22%23FFE9A0%22/%3E%0A%3Ccircle%20cx%3D%2226%22%20cy%3D%224%22%20r%3D%221%22%20fill%3D%22%23FFE9A0%22/%3E%0A%3Ccircle%20cx%3D%2227%22%20cy%3D%2210%22%20r%3D%221.3%22%20fill%3D%22%23FFE9A0%22/%3E%0A%3C/svg%3E") 11 10, auto;
  }
.wg button{font-family:'Quicksand',sans-serif;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%20transform%3D%22rotate%28-40%2016%2016%29%22%3E%0A%20%20%3Crect%20x%3D%2214.5%22%20y%3D%2210%22%20width%3D%223%22%20height%3D%2220%22%20rx%3D%221.5%22%20fill%3D%22%238B5E3C%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20L18.2%206.2%20L24.5%206.2%20L19.4%209.9%20L21.3%2016%20L16%2012.2%20L10.7%2016%20L12.6%209.9%20L7.5%206.2%20L13.8%206.2%20Z%22%20fill%3D%22%23FFD166%22%20stroke%3D%22%23E8A93A%22%20stroke-width%3D%220.8%22/%3E%0A%3C/g%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%221.4%22%20fill%3D%22%23FFE9A0%22/%3E%0A%3Ccircle%20cx%3D%2226%22%20cy%3D%224%22%20r%3D%221%22%20fill%3D%22%23FFE9A0%22/%3E%0A%3Ccircle%20cx%3D%2227%22%20cy%3D%2210%22%20r%3D%221.3%22%20fill%3D%22%23FFE9A0%22/%3E%0A%3C/svg%3E") 11 10, auto;border:none;}
.wg input[type="text"]{cursor:text;}
.wg button:focus-visible, .wg input:focus-visible{outline:3px solid var(--blue); outline-offset:3px;}
.wg .sun-rays{
    position:absolute; top:calc(30px - 55px); right:calc(8% - 55px); width:200px; height:200px;
    pointer-events:none; background:var(--sun); opacity:0.55;
    clip-path:polygon(50.0% 2.0%, 56.18% 30.98%, 78.21% 11.17%, 66.18% 38.24%, 95.65% 35.17%, 70.0% 50.0%, 95.65% 64.83%, 66.18% 61.76%, 78.21% 88.83%, 56.18% 69.02%, 50.0% 98.0%, 43.82% 69.02%, 21.79% 88.83%, 33.82% 61.76%, 4.35% 64.83%, 30.0% 50.0%, 4.35% 35.17%, 33.82% 38.24%, 21.79% 11.17%, 43.82% 30.98%);
    animation:wg-rayShine 4s ease-in-out infinite;
  }
@keyframes wg-rayShine{0%,100%{opacity:0.7; transform:scale(1);}50%{opacity:1; transform:scale(1.08);}}
.wg .sun{
    position:absolute; top:30px; right:8%; width:90px; height:90px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #FFE7A3, var(--sun));
    box-shadow:0 0 0 18px var(--sun-glow), 0 0 40px rgba(255,209,102,0.6);
    animation:wg-pulse 4s ease-in-out infinite;
  }
@keyframes wg-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.wg .cloud{position:absolute; opacity:0.9; pointer-events:none;}
.wg .cloud svg{display:block;}
.wg .cloud1{top:60px; left:6%; width:120px; animation:wg-drift 26s linear infinite;}
.wg .cloud2{top:130px; left:60%; width:90px; animation:wg-drift 32s linear infinite reverse;}
.wg .cloud3{top:20px; left:38%; width:70px; opacity:0.75; animation:wg-drift 38s linear infinite;}
@keyframes wg-drift{0%{transform:translateX(0);}50%{transform:translateX(40px);}100%{transform:translateX(0);}}
.wg .bird{position:absolute; width:36px; opacity:0; pointer-events:none;}
.wg .bird svg{display:block; width:100%; height:auto;}
.wg .bird1{top:14%; animation:wg-flyAcross 26s linear infinite; animation-delay:2s;}
.wg .bird2{top:22%; animation:wg-flyAcross 32s linear infinite; animation-delay:14s;}
@keyframes wg-flyAcross{
    0%{transform:translateX(-10vw) translateY(0); opacity:0;}
    5%{opacity:0.8;}
    45%{transform:translateX(55vw) translateY(-14px);}
    95%{opacity:0.8;}
    100%{transform:translateX(120vw) translateY(6px); opacity:0;}
  }
.wg .butterfly{position:absolute; width:34px; pointer-events:none;}
.wg .butterfly svg{display:block; width:100%; height:auto; overflow:visible;}
.wg .butterfly1{top:38%; left:8%; animation:wg-flutterPath1 18s ease-in-out infinite;}
.wg .butterfly2{top:55%; left:80%; animation:wg-flutterPath2 22s ease-in-out infinite; animation-delay:3s;}
.wg .wing{transform-origin:20px 14px; animation:wg-wingFlap 0.5s ease-in-out infinite alternate;}
.wg .wing-right{transform-origin:20px 14px; animation-delay:0.05s;}
@keyframes wg-wingFlap{0%{transform:scaleX(1);}100%{transform:scaleX(0.55);}}
@keyframes wg-flutterPath1{
    0%{transform:translate(0,0) rotate(0deg);}
    25%{transform:translate(60px,-30px) rotate(8deg);}
    50%{transform:translate(20px,-70px) rotate(-6deg);}
    75%{transform:translate(-40px,-30px) rotate(6deg);}
    100%{transform:translate(0,0) rotate(0deg);}
  }
@keyframes wg-flutterPath2{
    0%{transform:translate(0,0) rotate(0deg);}
    30%{transform:translate(-70px,-20px) rotate(-8deg);}
    60%{transform:translate(-30px,-60px) rotate(5deg);}
    100%{transform:translate(0,0) rotate(0deg);}
  }
.wg .grass-line{
    position:fixed; left:0; right:0; bottom:0; height:38px; z-index:1; pointer-events:none;
    display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  }
.wg .blade{
    width:7px; margin:0 -1px; border-radius:6px 6px 0 0; transform-origin:bottom center;
    animation:wg-swayBlade 3s ease-in-out infinite;
  }
@keyframes wg-swayBlade{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
.wg .wg-wrap{
    max-width:1400px; width:100%; margin:0 auto;
    padding:calc(160px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(130px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
    position:relative; z-index:2; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100);
    display:flex; flex-direction:column;
  }
.wg .screen.active{flex:1; display:flex; flex-direction:column; min-height:0;}
.wg .screen{display:none;}
.wg .screen.active{display:block; animation:wg-fadeIn .4s ease;}
@keyframes wg-fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.wg /* ---------- Welcome screen ---------- */
  #screen-welcome.active{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;}
.wg #screen-welcome .wg-card{
    background:var(--card-bg); border-radius:36px; box-shadow:var(--shadow-soft);
    padding:clamp(24px,5vh,70px) clamp(20px,5vw,50px); text-align:center; width:100%; max-width:760px;
    border:6px solid #EAF6E8; max-height:96vh; overflow:auto;
  }
.wg #screen-welcome h1{font-size:clamp(2.2rem,6vh,4.2rem); margin:0 0 14px; color:#2E6B3E; line-height:1.05;}
.wg #screen-welcome p.sub{color:var(--text-soft); margin:0 0 clamp(18px,4vh,38px); font-size:clamp(1.1rem,2.6vh,1.7rem); font-weight:600;}
.wg #nameInput{
    font-family:'Baloo 2',sans-serif; font-size:clamp(1.3rem,3vh,2rem); padding:clamp(12px,2.5vh,20px) 24px; border-radius:20px;
    border:4px solid #DDEFDD; width:100%; max-width:440px; text-align:center; margin-bottom:clamp(16px,3vh,32px);
  }
.wg .big-btn{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(1.3rem,3vh,1.9rem); color:#fff;
    background:linear-gradient(180deg, #6FCB79, #4C9A5B); padding:clamp(16px,3vh,24px) clamp(30px,5vw,52px); border-radius:26px;
    box-shadow:0 8px 0 #3a7d47, 0 14px 24px rgba(0,0,0,0.18);
    transition:transform .08s ease;
  }
.wg .big-btn:active{transform:translateY(6px); box-shadow:0 2px 0 #3a7d47;}
.wg .grown-up-note{
    margin-top:clamp(16px,3vh,36px); font-size:0.9rem; color:var(--text-soft); background:#FBF7EE;
    border-radius:16px; padding:14px 18px; text-align:left; line-height:1.45;
  }
.wg .disclaimer-note{
    margin-top:12px; background:#FFF4F4; font-size:0.8rem;
  }
.wg .disclaimer-list{
    margin:8px 0 0; padding-left:18px;
  }
.wg .disclaimer-list li{
    margin-bottom:6px;
  }
.wg .disclaimer-list li:last-child{
    margin-bottom:0;
  }
.wg /* ---------- Garden screen ---------- */
  .top-tabs-row{
    display:flex; justify-content:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;
  }
.wg .welcome-tab{
    background:#FFF1E0; color:#B5651D; border:3px solid #FFD3A8;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(0.8rem,1.8vh,1rem);
    padding:7px 18px; border-radius:16px; box-shadow:var(--shadow-soft);
  }
.wg .welcome-tab:hover{color:#8a4a10;}
.wg .voice-tab{
    background:#F3E9FB; color:#7a4fa0; border:3px solid #DCC3F0;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(0.8rem,1.8vh,1rem);
    padding:7px 18px; border-radius:16px; box-shadow:var(--shadow-soft);
  }
.wg .voice-tab:hover{color:#5a2f78;}
.wg #screen-garden.active{position:relative;}
.wg .garden-header{display:flex; align-items:center; justify-content:center; margin-top:0; margin-bottom:clamp(6px,1.5vh,10px); flex-wrap:wrap; gap:14px; text-align:center; position:relative;}
.wg .garden-header h1{margin:0; font-size:clamp(1.6rem,4.5vh,3rem); color:#2E6B3E;}
.wg .stars-badge{
    background:#fff; border-radius:24px; padding:clamp(8px,1.6vh,14px) clamp(14px,2.5vw,26px); box-shadow:var(--shadow-soft);
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(1.1rem,2.8vh,1.7rem); color:#B8860B;
    display:flex; align-items:center; gap:10px;
  }
.wg .level-tabs{display:flex; gap:clamp(8px,1.5vw,14px); margin-bottom:clamp(10px,2vh,28px); flex-wrap:wrap; justify-content:center;}
.wg .level-tab{
    background:#fff; border-radius:18px; padding:clamp(8px,1.6vh,14px) clamp(14px,2.5vw,22px); box-shadow:var(--shadow-soft);
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(1rem,2.4vh,1.35rem); color:var(--text-soft);
    border:4px solid transparent;
  }
.wg .level-tab.active{border-color:var(--grass-dark); color:#2E6B3E;}
.wg .level-tab .prog{font-size:clamp(0.75rem,1.7vh,0.95rem); color:var(--text-soft); font-family:'Quicksand',sans-serif; display:block; font-weight:700;}
.wg .sub-tabs{margin-top:-14px;}
.wg .sub-tabs .level-tab{
    padding:clamp(6px,1.2vh,10px) clamp(12px,2vw,18px); font-size:clamp(0.85rem,2vh,1.05rem);
    background:#EAF5FC; border-width:3px; border-color:#CFE6F5; color:#3d7fb5;
  }
.wg .sub-tabs .level-tab .prog{color:#5b96bd;}
.wg .sub-tabs .level-tab.active{background:#DCEEFA; border-color:var(--blue); color:#265d80;}
.wg .practice-box{
    background:#FFF8E7; border:3px dashed #FFD166; border-radius:20px;
    padding:clamp(10px,2vh,16px) clamp(12px,2.5vw,18px); margin-bottom:clamp(10px,2vh,16px);
    max-height:min(160px, 22vh); overflow-y:auto; flex-shrink:0;
  }
.wg .practice-box-title{
    font-family:'Baloo 2',sans-serif; font-weight:700; color:#B8860B;
    font-size:clamp(0.95rem,2.2vh,1.15rem); margin:0 0 8px;
  }
.wg .practice-box-empty{margin:0; color:var(--text-soft); font-size:clamp(0.85rem,2vh,1rem);}
.wg .practice-chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.wg .practice-chip{
    background:#fff; border:2px solid #FFD166; border-radius:14px; padding:6px 10px 6px 14px;
    font-family:'Baloo 2',sans-serif; font-weight:700; color:#7a4c00; font-size:clamp(0.9rem,2vh,1.05rem);
    display:flex; align-items:center; gap:6px;
  }
.wg .practice-chip button{
    background:none; border:none; font-size:0.9em; padding:2px; line-height:1; cursor:pointer;
  }
.wg .review-practice-btn{
    display:block; margin:0 0 10px; background:#FFD166; color:#7a4c00; border:none;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(0.85rem,2vh,1rem);
    padding:8px 16px; border-radius:14px; box-shadow:0 3px 0 #cf9a2e;
  }
.wg .review-practice-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #cf9a2e;}
.wg .raffy-caption{
    text-align:center; font-family:'Baloo 2',sans-serif; font-weight:700; color:#5A8A5A;
    font-size:clamp(0.85rem,2vh,1.05rem); margin:0 0 clamp(6px,1.2vh,10px);
  }
.wg .raffy-journey{
    position:relative; height:clamp(40px,6vh,54px); margin:0 0 clamp(8px,1.6vh,14px);
    background:#EAF6E8; border-radius:20px; border:3px solid #CFEBD1; overflow:visible;
  }
.wg .raffy-path{
    position:absolute; top:50%; left:22px; right:34px; height:4px; transform:translateY(-50%);
    background:repeating-linear-gradient(90deg,#B7DDB0 0 8px, transparent 8px 16px);
    border-radius:2px;
  }
.wg .raffy-flags{
    position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:clamp(1.1rem,2.6vh,1.5rem);
  }
.wg .raffy-icon{
    position:absolute; top:50%; left:0%; transform:translate(-10%,-50%) scaleX(-1); font-size:clamp(1.5rem,3.4vh,2rem);
    transition:left 1s ease; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25));
  }
.wg .helper-text{
    font-family:'Baloo 2',sans-serif; font-weight:700; color:#5A8A5A; font-size:clamp(1rem,2.4vh,1.3rem);
    margin:0 0 clamp(10px,2vh,20px); text-align:center;
  }
.wg .garden-arrow{
    text-align:center; font-size:clamp(1.4rem,3.2vh,2rem); line-height:1;
    margin:-6px 0 10px; animation:wg-bounceArrow 1.1s ease-in-out infinite;
  }
@keyframes wg-bounceArrow{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
.wg .step-label{
    font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--text-soft); font-size:clamp(0.9rem,2vh,1.1rem);
    margin:-4px 0 clamp(10px,2vh,20px);
  }
.wg .match-heading{margin:0 0 6px; color:#2E6B3E; font-size:clamp(1.3rem,3.4vh,1.9rem);}
.wg .bed-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:20px; align-content:start;
    max-width:1100px; margin:0 auto; justify-content:center; width:100%;
    flex:1; min-height:0; overflow-y:auto; padding:6px 6px 20px;
  }
.wg .bed{
    background:var(--soil); border-radius:24px; padding:22px 14px 16px;
    box-shadow:var(--shadow-soft); text-align:center; position:relative; min-height:170px;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    border:4px solid #7C5844; transition:transform .2s ease, box-shadow .2s ease;
  }
.wg .bed:hover{
    transform:translateY(-5px); box-shadow:0 12px 22px rgba(0,0,0,0.22);
  }
.wg .bed::after{
    content:"🦋"; position:absolute; top:-10px; right:8px; font-size:1.5rem; line-height:1;
    opacity:0; transform:translate(14px,-16px) scale(0.5) rotate(-18deg);
    transition:opacity .3s ease, transform .3s ease; pointer-events:none;
  }
.wg .bed:hover::after{
    opacity:1; transform:translate(0,0) scale(1) rotate(0deg);
    animation:wg-bedButterflyFlutter 1.4s ease-in-out infinite;
  }
@keyframes wg-bedButterflyFlutter{
    0%,100%{transform:translate(0,0) scale(1) rotate(-4deg);}
    50%{transform:translate(0,-4px) scale(1) rotate(4deg);}
  }
.wg .bed.recommended{box-shadow:0 0 0 6px var(--sun), var(--shadow-soft);}
.wg .bed .batch-label{
    font-family:'Baloo 2',sans-serif; color:#fff; font-size:1.3rem; margin-bottom:10px; font-weight:700;
  }
.wg .bed .flowers{font-size:2.3rem; line-height:1.1; margin-bottom:8px;}
.wg .bed .stars-earned{font-size:1rem; color:#FFE7A3; font-weight:800;}
.wg .bed .start-badge{
    background:var(--sun); color:#7a4c00; font-size:0.9rem; font-weight:800; border-radius:12px;
    padding:4px 12px; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    font-family:'Baloo 2',sans-serif;
  }
.wg .bed .seedling{font-size:2.4rem;}
.wg /* ---------- Flashcard / Match screens ---------- */
  .practice-shell{
    background:var(--card-bg); border-radius:40px; box-shadow:var(--shadow-soft);
    padding:clamp(16px,3vh,60px) clamp(16px,4vw,40px); text-align:center; margin-top:0; position:relative;
    flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
    border:6px solid #EAF6E8; overflow-y:auto;
  }
.wg .back-link{
    background:#fff; color:var(--text-soft); border:3px solid #E4E4E4;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(1rem,2.4vh,1.3rem);
    padding:10px 22px; border-radius:18px; box-shadow:var(--shadow-soft);
    margin-bottom:clamp(10px,2vh,22px);
  }
.wg .progress-dots{display:flex; justify-content:center; gap:clamp(8px,1.5vh,14px); margin-bottom:clamp(10px,2vh,30px);}
.wg .dot{width:clamp(14px,2vh,22px); height:clamp(14px,2vh,22px); border-radius:50%; background:#E4E4E4;}
.wg .dot.done{background:var(--grass-dark);}
.wg .dot.current{background:var(--sun);}
.wg .word-card{
    font-family:'Baloo 2',sans-serif; font-size:clamp(3rem, 16vh, 9rem); font-weight:800; color:#2E6B3E;
    background:#F5FBF3; border-radius:32px; padding:clamp(20px,4vh,50px) clamp(20px,4vw,40px); margin:0 auto clamp(16px,3vh,36px);
    width:100%; max-width:700px; border:5px dashed #CFEBD1; line-height:1;
  }
.wg .word-card.fly-away{
    animation:wg-flyToFooter 0.55s ease-in forwards;
    pointer-events:none;
  }
@keyframes wg-flyToFooter{
    0%{transform:translateY(0) rotate(0deg) scale(1); opacity:1;}
    100%{transform:translateY(65vh) rotate(18deg) scale(0.6); opacity:0;}
  }
.wg .hear-btn{
    background:var(--blue); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:800;
    font-size:clamp(1.1rem,2.6vh,1.8rem); padding:clamp(12px,2.2vh,22px) clamp(20px,4vw,42px); border-radius:24px; box-shadow:0 7px 0 #3d7fb5;
    margin-bottom:clamp(12px,2.5vh,34px);
  }
.wg .hear-btn:active{transform:translateY(4px); box-shadow:0 3px 0 #3d7fb5;}
.wg .choice-row{display:flex; gap:clamp(10px,2vw,22px); justify-content:center; flex-wrap:wrap;}
.wg .know-btn{
    background:linear-gradient(180deg,#6FCB79,#4C9A5B); color:#fff; box-shadow:0 7px 0 #3a7d47;
  }
.wg .practice-btn{
    background:linear-gradient(180deg,#FFC26F,#FF9F5B); color:#7a4300; box-shadow:0 7px 0 #cf7a30;
  }
.wg .choice-row button{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(1.1rem,2.4vh,1.7rem); padding:clamp(14px,2.4vh,22px) clamp(18px,3vw,34px); border-radius:24px;}
.wg .choice-row button:active{transform:translateY(4px);}
.wg .match-options{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vh,24px); width:100%; max-width:680px; margin:0 auto;}
.wg .match-btn{
    font-family:'Baloo 2',sans-serif; font-size:clamp(1.6rem, 5vh, 3rem); font-weight:800; color:#2E6B3E;
    background:#F5FBF3; border:5px solid #CFEBD1; border-radius:24px; padding:clamp(16px,3vh,36px) 16px;
    transition:transform .1s ease;
  }
.wg .match-btn:active{transform:scale(0.96);}
.wg .match-btn.correct{background:#DFF5E1; border-color:var(--grass-dark); color:#2E6B3E;}
.wg .match-btn.wrong{background:#FFE3E3; border-color:var(--red); color:#B33; animation:wg-shake .35s;}
.wg .spell-input{
    font-family:'Baloo 2',sans-serif; font-size:clamp(1.8rem,5vh,3rem); font-weight:700; color:#2E6B3E;
    text-align:center; padding:clamp(12px,2.5vh,22px) 20px; border-radius:22px;
    border:4px solid #CFEBD1; width:100%; max-width:420px; margin:0 auto clamp(14px,2.5vh,24px);
    background:#F5FBF3;
  }
.wg .spell-input:disabled{opacity:0.7;}
.wg .submit-btn{margin-top:0;}
.wg .build-answer{
    display:flex; justify-content:center; gap:8px; flex-wrap:wrap; min-height:clamp(46px,8vh,70px);
    margin:0 0 clamp(12px,2.5vh,22px);
  }
.wg .build-slot{
    width:clamp(34px,7vh,54px); height:clamp(34px,7vh,54px); border-radius:12px;
    background:#F5FBF3; border:3px solid #CFEBD1; display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(1.2rem,4vh,2rem); color:#2E6B3E;
  }
.wg .build-tile-row{
    display:flex; justify-content:center; gap:8px; flex-wrap:wrap; max-width:560px; margin:0 auto;
  }
.wg .build-tile{
    width:clamp(38px,7.5vh,58px); height:clamp(38px,7.5vh,58px); border-radius:12px;
    background:linear-gradient(180deg,#FFC26F,#FF9F5B); border:none; box-shadow:0 4px 0 #cf7a30;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(1.2rem,4vh,2rem); color:#fff;
  }
.wg .build-tile:active{transform:translateY(3px); box-shadow:0 1px 0 #cf7a30;}
.wg .build-tile.used{visibility:hidden;}
.wg .spell-feedback{
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(1.1rem,2.6vh,1.5rem);
    min-height:1.6em; margin:clamp(10px,2vh,18px) 0 0;
  }
.wg .spell-feedback.correct{color:#2E6B3E;}
.wg .spell-feedback.wrong{color:#B33;}
.wg .voice-list{
    display:flex; flex-direction:column; gap:12px; width:100%; max-width:560px;
    margin:0 auto; overflow-y:auto; flex:1; min-height:0; padding:4px;
  }
.wg .voice-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:#F5FBF3; border:4px solid #CFEBD1; border-radius:18px;
    padding:clamp(12px,2.5vh,18px) clamp(14px,3vw,22px);
    font-family:'Baloo 2',sans-serif; font-weight:700; color:#2E6B3E; text-align:left;
  }
.wg .voice-item.selected{border-color:var(--grass-dark); background:#DFF5E1;}
.wg .voice-item .voice-name{font-size:clamp(1rem,2.4vh,1.25rem); flex:1;}
.wg .voice-item .voice-check{font-size:1.4rem; width:1.4em; text-align:center; flex-shrink:0;}
.wg .voice-play{
    background:var(--blue); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:700;
    font-size:clamp(0.85rem,2vh,1rem); padding:10px 16px; border-radius:14px; flex-shrink:0;
    box-shadow:0 4px 0 #3d7fb5;
  }
.wg .voice-play:active{transform:translateY(3px); box-shadow:0 1px 0 #3d7fb5;}
@keyframes wg-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
.wg /* Magic wand click sparkle */
  .magic-spark{
    position:fixed; z-index:9999; pointer-events:none; font-size:1.1rem;
    transform:translate(-50%,-50%) scale(0.3);
    animation:wg-magicSparkFly .6s ease-out forwards;
  }
@keyframes wg-magicSparkFly{
    0%{transform:translate(-50%,-50%) scale(0.3) rotate(0deg); opacity:1;}
    100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(90deg); opacity:0;}
  }
.wg /* ---------- General hover feedback for clickable items ---------- */
  .big-btn, .wg .hear-btn, .wg .know-btn, .wg .practice-btn, .wg .match-btn:not(.correct):not(.wrong), .wg .level-tab, .wg .voice-item, .wg .voice-play, .wg .welcome-tab, .wg .voice-tab, .wg .back-link, .wg .practice-chip button{
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
    cursor:pointer;
  }
.wg .big-btn:hover, .wg .hear-btn:hover, .wg .know-btn:hover, .wg .practice-btn:hover, .wg .match-btn:not(.correct):not(.wrong):hover, .wg .voice-item:hover, .wg .voice-play:hover, .wg .practice-chip button:hover{
    transform:translateY(-3px); filter:brightness(1.06);
  }
.wg .level-tab:hover, .wg .welcome-tab:hover, .wg .voice-tab:hover, .wg .back-link:hover{
    transform:translateY(-2px); filter:brightness(1.08);
  }
.wg /* ---------- Complete screen ---------- */
  #screen-complete .practice-shell h1{font-size:clamp(1.6rem,4.5vh,2.6rem);}
.wg #screen-complete .practice-shell p{font-size:clamp(1rem,2.6vh,1.4rem);}
.wg .bloom-row{font-size:clamp(2rem,8vh,4.4rem); margin:clamp(12px,3vh,26px) 0; letter-spacing:clamp(4px,1.5vw,10px);}
.wg .bloom-row span{display:inline-block; opacity:0; transform:scale(0.2); animation:wg-bloom .5s ease forwards;}
@keyframes wg-bloom{to{opacity:1; transform:scale(1);}}
.wg .mystery-note{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(1rem,2.6vh,1.3rem);
    background:linear-gradient(90deg,#FF6B9D,#FFD166,#5DA9E9,#B185DB);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:wg-mysteryShine 2s linear infinite; margin:0 0 8px;
  }
@keyframes wg-mysteryShine{
    0%{filter:hue-rotate(0deg);} 100%{filter:hue-rotate(360deg);}
  }
.wg-petal{position:fixed; top:-20px; font-size:1.4rem; z-index:5; animation:wg-fall linear forwards;}
@keyframes wg-fall{to{transform:translateY(110vh) rotate(360deg); opacity:0.2;}}
@media (prefers-reduced-motion: reduce){.wg, .wg *{animation:none !important; transition:none !important;}}
@media (max-width:700px){.wg .practice-shell{padding-top:clamp(30px,6vh,40px);}
.wg .wg-wrap{padding-left:calc(14px + env(safe-area-inset-left)); padding-right:calc(14px + env(safe-area-inset-right)); padding-top:calc(132px + env(safe-area-inset-top)); padding-bottom:calc(78px + env(safe-area-inset-bottom));}
.wg .level-tabs{
      flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
      -webkit-overflow-scrolling:touch; padding-bottom:6px; margin-left:-4px; margin-right:-4px; padding-left:4px; padding-right:4px;
    }
.wg .level-tab{flex:0 0 auto; white-space:nowrap;}
.wg .bed-grid{grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px;}
.wg .bed{min-height:130px; padding:16px 10px 12px;}
.wg .bed .flowers{font-size:1.6rem;}
.wg .bed .seedling{font-size:1.8rem;}
.wg .match-options{grid-template-columns:1fr 1fr !important; gap:10px;}
.wg .match-btn{font-size:clamp(1.3rem, 5.5vw, 2.2rem); padding:clamp(14px,2.5vh,28px) 8px;}
.wg .word-card{font-size:clamp(2.6rem, 15vw, 6rem);}}
@media (max-height:480px){.wg .word-card{padding:14px 20px;}
.wg .practice-shell{padding-top:14px; padding-bottom:14px;}
.wg .helper-text{margin-bottom:6px;}}

/* ---- fit into the Ms Rae site ---- */
.wg{position:relative;overflow:hidden;font-size:16px;line-height:1.5;
  min-height:calc(100vh - 68px);min-height:calc((var(--vh,1vh) * 100) - 68px)}
.wg .wg-wrap{padding:36px 24px 84px;min-height:calc(100vh - 68px);min-height:calc((var(--vh,1vh) * 100) - 68px)}
.wg .grass-line{position:absolute;z-index:1}
.wg h1,.wg h2{margin-top:0}
.wg .screen.active{display:block}
.wg #screen-welcome .wg-card{max-height:none;overflow:visible}
.wg #screen-welcome.active{display:flex}
@media (max-width:700px){.wg .wg-wrap{padding:24px 14px 70px}}
.wg-spark{position:fixed;z-index:9999;pointer-events:none;font-size:1.1rem}

/* scrolling: let the mouse wheel scroll the page everywhere, including over the game */
.wg{overscroll-behavior:auto;overflow:hidden;overflow:clip}
.wg .wg-wrap,.wg .screen,.wg .wg-card,.wg .practice-shell{overscroll-behavior:auto}

/* reduced motion: keep the bloom reward visible even though animations are off */
@media (prefers-reduced-motion:reduce){.wg .bloom-row span{opacity:1 !important;transform:none !important}}