*{box-sizing:border-box}
:root{
  --green:#006600;
  --green-dark:#004b00;
  --green-deep:#033d13;
  --green-bright:#22b14c;
  --lime:#b7db21;
  --mint:#e8f8ec;
  --bg:#f3f6f3;
  --card:#ffffff;
  --ink:#162019;
  --muted:#738078;
  --line:#e2e8e3;
  --header-h:78px;
  --nav-h:82px;
}
*{-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.app-shell{width:min(100%,760px);margin:0 auto;min-height:100dvh;background:var(--bg)}

.app-header{
  position:fixed;z-index:50;top:0;left:50%;transform:translateX(-50%);
  width:min(100%,760px);min-height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:max(10px,env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(135deg,#006600 0%,#007a12 100%);
  border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,70,0,.16)
}
.header-home,.header-player{min-height:58px;display:flex;align-items:center;width:100%}
.header-home{gap:10px}.header-logo{width:50px;height:50px;border-radius:15px}.header-copy{min-width:0}.header-copy strong{display:block;color:#fff;font-size:22px;line-height:1;font-weight:900;letter-spacing:-.035em}.header-copy small{display:block;color:#cce96a;font-size:11px;font-weight:750;margin-top:5px}.header-spark{margin-left:auto;color:var(--lime);font-size:25px;padding:0 5px}
.header-player{gap:10px}.header-action{width:43px;height:43px;flex:0 0 43px;border:0;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.13);color:#fff}.header-action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.player-title-wrap{min-width:0;flex:1}.player-title-wrap small{display:block;color:#cce96a;font-size:9px;font-weight:900;letter-spacing:.14em}.player-title-wrap strong{display:block;color:#fff;font-size:16px;line-height:1.2;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

.app-content{padding:calc(var(--header-h) + env(safe-area-inset-top) + 18px) 14px calc(var(--nav-h) + env(safe-area-inset-bottom) + 25px)}
.app-view{animation:viewIn .18s ease}.app-view.player-view{animation:none}
@keyframes viewIn{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:none}}

.home-hero{position:relative;min-height:154px;display:flex;align-items:center;overflow:hidden;margin-bottom:24px;padding:22px 20px;border-radius:27px;background:linear-gradient(135deg,#dff4c8,#eff9e9 60%,#d6f0cf);border:1px solid #d6e9cf}.home-hero:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-55px;top:-72px;background:rgba(183,219,33,.24)}.hero-copy{position:relative;z-index:2;max-width:68%}.eyebrow{color:var(--green);font-size:9px;font-weight:950;letter-spacing:.14em}.home-hero h1{margin:6px 0 8px;color:#174719;font-size:27px;line-height:1.02;letter-spacing:-.045em}.home-hero p{margin:0;color:#58705b;font-size:12px;line-height:1.4}.hero-mascot{position:absolute;z-index:1;right:9px;bottom:8px;width:105px;height:105px;filter:drop-shadow(0 9px 10px rgba(0,80,0,.12))}
.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 13px}.section-title-row h2{font-size:21px;line-height:1.1;margin:3px 0 0;color:#173d1d;letter-spacing:-.025em}.count-chip{min-width:29px;height:29px;padding:0 9px;display:grid;place-items:center;border-radius:999px;background:#e6f3e6;color:var(--green);font-size:11px;font-weight:900}

.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.game-card{position:relative;min-width:0;overflow:hidden;border-radius:22px;background:#fff;border:1px solid #e5ebe6;box-shadow:0 7px 22px rgba(24,51,29,.075)}.game-card.featured{grid-column:1/-1}.cover-button,.card-copy{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit}.cover{position:relative;aspect-ratio:1/1;overflow:hidden;background:#daf0dc}.featured .cover{aspect-ratio:1.9/1}.cover>img{display:block;width:100%;height:100%;object-fit:cover}.cover-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#00851a,#005500)}.cover-placeholder img{width:63%;height:63%;object-fit:contain}.new-badge{position:absolute;z-index:2;left:9px;top:9px;padding:6px 9px;border-radius:999px;background:var(--green);color:#fff;font-size:9px;font-weight:950;letter-spacing:.08em}.play-overlay{position:absolute;right:10px;bottom:10px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:var(--green);box-shadow:0 3px 10px rgba(0,0,0,.13)}.play-overlay svg{width:21px;height:21px;fill:currentColor;stroke:none}.heart-btn{position:absolute;z-index:5;right:9px;top:9px;width:39px;height:39px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:#4a514b;box-shadow:0 3px 12px rgba(0,0,0,.13)}.new-badge+.play-overlay{}.heart-btn svg{width:20px;height:20px;fill:transparent;stroke:currentColor;stroke-width:2}.heart-btn.active{color:var(--green)}.heart-btn.active svg{fill:currentColor}.card-copy{padding:12px 13px 13px}.card-title{display:block;font-size:15px;line-height:1.15;font-weight:900;letter-spacing:-.015em}.card-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.4}.card-cta{display:flex;align-items:center;justify-content:space-between;margin-top:9px;color:var(--green);font-size:11px;font-weight:900}.card-cta b{font-size:20px;line-height:1}

.course-promo{width:100%;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:11px;margin-top:22px;padding:13px;border:1px solid #d9eac7;border-radius:20px;background:linear-gradient(135deg,#f0fae5,#e6f5db);text-align:left;color:#174719}.course-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:#fff;color:var(--green);box-shadow:0 4px 12px rgba(0,80,0,.08)}.course-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.course-promo small{display:block;color:#6a835f;font-size:9px;font-weight:900;letter-spacing:.08em}.course-promo strong{display:block;font-size:14px;margin-top:2px}.course-promo>b{font-size:27px;color:var(--green)}

.view-heading{padding:8px 3px 18px}.view-heading h1{margin:4px 0 4px;color:#173d1d;font-size:32px;line-height:1;font-weight:900;letter-spacing:-.045em}.view-heading p{margin:7px 0 0;color:var(--muted);font-size:13px}.search-box{display:flex;align-items:center;gap:9px;margin-bottom:9px;padding:0 14px;border:2px solid #dce5dd;border-radius:18px;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.04)}.search-box:focus-within{border-color:#83bc83;box-shadow:0 0 0 4px rgba(0,102,0,.08)}.search-box svg{width:21px;height:21px;fill:none;stroke:var(--green);stroke-width:2}.search-box input{width:100%;min-width:0;padding:14px 0;border:0;outline:0;background:transparent;font-size:16px}.search-hint{margin:0 4px 15px;color:#939b95;font-size:11px}.search-grid{margin-top:14px}

.empty-state{margin:18px 0;padding:34px 20px;border:1px solid #e3e9e4;border-radius:23px;background:#fff;text-align:center}.empty-state.small{padding:25px 18px}.empty-state img{width:72px;height:72px;margin-bottom:8px}.empty-state strong{display:block;font-size:17px}.empty-state p{margin:6px auto 0;max-width:350px;color:var(--muted);font-size:12px;line-height:1.45}

.player-open .app-content{padding:calc(var(--header-h) + env(safe-area-inset-top)) 0 calc(var(--nav-h) + env(safe-area-inset-bottom))}.player-view{margin:0 -0px}.player-shell{position:relative;height:calc(100dvh - var(--header-h) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:420px;background:#fff}.player-shell iframe{display:block;width:100%;height:100%;border:0;background:#fff}.player-loader{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#f4f8f4;color:#254c2c;text-align:center}.player-loader img{width:77px;height:77px}.player-loader strong{font-size:15px}.player-loader span{color:var(--muted);font-size:11px}.frame-note{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;display:flex;justify-content:center;gap:6px;padding:7px 10px;border-radius:12px;background:rgba(20,32,22,.75);color:#fff;font-size:10px;pointer-events:none;opacity:.72}.frame-note a{color:#d7f368;font-weight:900;pointer-events:auto}

.bottom-nav{position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,760px);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:#006600;border-top:1px solid rgba(255,255,255,.16);box-shadow:0 -8px 22px rgba(0,60,0,.16)}.bottom-nav-item{position:relative;min-height:61px;padding:4px 2px;border:0;background:transparent;color:rgba(255,255,255,.77);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:800}.nav-icon{width:34px;height:29px;display:grid;place-items:center;border-radius:13px}.nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.bottom-nav-item.active{color:#fff}.bottom-nav-item.active .nav-icon{background:rgba(255,255,255,.17)}.bottom-nav-item.active:before{content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 4px 4px;background:var(--lime)}

@media(min-width:600px){.app-content{padding-left:20px;padding-right:20px}.home-hero{min-height:170px}.hero-mascot{width:125px;height:125px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.game-card.featured{grid-column:span 2}.featured .cover{aspect-ratio:1.55/1}.player-open .app-content{padding-left:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){.app-view{animation:none}}