:root{
  --ink:#2b160d;
  --ink-2:#4a2a18;
  --gold:#f5a51b;
  --gold-2:#ffd978;
  --gold-3:#fafafa;
  --cream:#ffffff;
  --cream-2:#ffffff;
  --panel:rgba(255, 255, 255, 0.9);
  --panel-strong:rgba(255,248,227,.96);
  --line:rgba(132,76,18,.16);
  --shadow:0 16px 34px rgba(109,58,14,.18);
  --shadow-soft:0 9px 20px rgba(96,47,8,.12);
  --blue:#2477e5;
  --green:#56b776;
  --red:#de5a45;
  --sidebar:#ffd785;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#000000 url('asets/bg_pages.webp') center top/cover fixed no-repeat;min-height:100vh}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.page{width:min(1440px,calc(100% - 42px));margin:22px auto 34px}
.topbar{height:92px;display:flex;align-items:center;gap:18px;padding:0 28px;border:1px solid rgba(255,255,255,.62);border-radius:20px;background:#ffe89c00;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:35px;letter-spacing:-1.8px;white-space:nowrap}
.brand-mark{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#ffe89c,#f0a615);font-size:27px}
.brand-sub{display:inline-flex;padding:9px 15px;border-radius:20px;background:#f2ab24;font-weight:800;font-size:16px;line-height:1}
.top-spacer{flex:1}
.search{width:270px;height:48px;border:1px solid rgba(130,79,21,.28);border-radius:999px;padding:0 18px;display:flex;align-items:center;gap:10px;background:#fffaf0;color:#7a5734}
.search input{border:0;outline:0;background:transparent;width:100%;color:var(--ink)}
.search input::placeholder{color:#805f3d}
.icon-btn{width:45px;height:45px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;font-size:22px;cursor:pointer;position:relative}
.dot{position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:#df4f43}
.profile{display:flex;align-items:center;gap:10px;font-weight:800}
.avatar{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#f3cf73;border:2px solid #b87515;font-size:23px}
.app-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;margin-top:20px;align-items:start}
/* ========== SIDEBAR ========== */
    #sidebar {
      
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      /* Match main column height so bottoms align */
      min-height: 0;
      align-self: stretch;
      background: transparent;
      backdrop-filter: blur(12px);
      
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    #layout-container:not(.collapsed) #sidebar {
      cursor: default;
    }
    .toggle-container {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
      padding: 0 4px;
    }
    #layout-container.collapsed .toggle-container {
      justify-content: center;
    }
    .toggle-btn {
      padding: 4px;
      border-radius: 6px;
      border: 0;
      background: transparent;
      color: #667085;
      cursor: pointer;
    }
    .toggle-btn:hover { background: rgba(255,255,255,0.6); }

    .nav-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .nav-item {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #475467;
      cursor: pointer;
      transition: all 0.15s;
    }
    .nav-item:hover { background: rgba(255, 255, 255, 0.6); }
    .nav-item svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      color: #667085;
    }
    .nav-item.active {
      background: #D6E7FF;
      color: #1646C7;
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(21, 112, 255, 0.12);
      border-left: 4px solid #1570FF;
      padding-left: 10px;
    }
    .nav-item.active svg {
      color: #1570FF;
      stroke-width: 2.3;
    }

    #layout-container.collapsed .sidebar-text,
    #layout-container.collapsed .pro-plan {
      display: none;
    }
    #layout-container.collapsed .nav-item {
      justify-content: center;
      padding-left: 0 !important;
      padding-right: 0 !important;
      border-left: none !important;
    }

.pro-card{margin-top:30px;border-radius:15px;padding:17px;background:linear-gradient(145deg,#f8b52e,#f3a61c)}
.pro-card .pro-title{font-size:19px;font-weight:950;display:flex;gap:10px;align-items:center}
.pro-card p{margin:5px 0 13px;font-size:14px;font-weight:650;line-height:1.35}
.dark-btn{width:100%;border:0;border-radius:9px;background:#6c250d;color:#ffe99f;padding:11px 14px;font-weight:900;cursor:pointer}
.main{min-width:0}
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.68);border-radius:20px}
.section-pad{padding:30px}
.page-title{margin:0;font-size:60px;line-height:.96;letter-spacing:-2.8px}
.lead{font-size:22px;line-height:1.28;color:#6f4526;margin:10px 0 0}
.toolbar{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:-55px;margin-bottom:22px}
.select-pill,.ghost-pill{height:44px;border-radius:999px;border:1px solid rgba(132,76,18,.2);background:#fff8df;padding:0 18px;color:#6c4524;font-weight:750}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:#fff8e8;border:1px solid rgba(154,94,17,.17);border-radius:15px;padding:12px;display:flex;flex-direction:column;min-height:350px}
.card-art{height:145px;border-radius:11px;overflow:hidden;position:relative;display:grid;place-items:center;border:1px solid rgba(74,39,9,.15);background:#4c2a16}
.card-art .big-letter{font-size:86px;font-weight:950;color:#fff2cc;text-shadow:0 7px 0 rgba(0,0,0,.15)}
.art-rocks{background:radial-gradient(circle at 18% 30%,#89725d 0 7%,transparent 8%),radial-gradient(circle at 74% 22%,#d7b87c 0 6%,transparent 7%),linear-gradient(135deg,#172236,#76604d)}
.art-bike{background:linear-gradient(140deg,#1b263b,#4f6373 48%,#f5a320 49%,#ed6a2c 62%,#142033)}
.art-pirate{background:linear-gradient(180deg,#61b9e2 0 47%,#23475a 48% 100%)}
.art-bubble{background:radial-gradient(circle at 18% 25%,#6dd2e8 0 8%,transparent 9%),radial-gradient(circle at 67% 33%,#f6ba65 0 11%,transparent 12%),radial-gradient(circle at 34% 74%,#f08ac2 0 14%,transparent 15%),#7650a7}
.art-space{background:linear-gradient(#07172c,#0c2445)}
.art-car{background:linear-gradient(180deg,#0a1428 0 55%,#384052 56% 100%)}
.card h3{font-size:24px;text-align:center;margin:10px 4px 8px;letter-spacing:-.7px}
.badges{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.badge{display:inline-flex;gap:5px;align-items:center;padding:4px 9px;border-radius:999px;color:#fff;font-size:13px;font-weight:900}.easy{background:#66b86e}.medium{background:#df8f2b}.hard{background:#db5a45}
.score{margin-top:8px;color:#5e3f25;font-weight:700;font-size:15px}
.play{margin-top:auto;border:0;border-radius:10px;background:#f6a91d;padding:11px 14px;font-size:18px;font-weight:950;cursor:pointer;color:#2b160d}
.play:hover{filter:brightness(1.05);transform:translateY(-1px)}
.footer-note{text-align:center;color:#6b4021;padding:24px;font-size:16px}
/* home */
.landing .topbar{max-width:1200px;margin:0 auto;height:94px}
.landing-main{width:min(1200px,100%);margin:40px auto 0;display:flex;flex-direction:column;gap:26px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;border-radius:18px;overflow:hidden;background:#ffffff;border:1px solid rgba(255,255,255,.75);min-height:380px}
.hero-copy{padding:36px 36px 28px}
.eyebrow{display:inline-block;background:#e8f0fb;color:#2c6bb8;font-weight:900;border-radius:999px;padding:7px 12px;font-size:14px}
.hero h1{font-size:48px;line-height:1.02;letter-spacing:-2px;margin:15px 0 12px}.hero h1 span{display:block}
.hero p{font-size:16px;max-width:530px;line-height:1.5;color:#342315}
.cta-row{display:flex;gap:10px;margin:16px 0}.primary{border:0;border-radius:10px;background:#2477e5;color:#fff;padding:13px 22px;font-weight:900;font-size:17px;cursor:pointer}.secondary{border:0;border-radius:10px;background:#fff6db;padding:13px 18px;font-weight:900;cursor:pointer}
.checks{display:flex;gap:18px;flex-wrap:wrap;color:#3d3227;font-size:14px;font-weight:650}.check{display:flex;align-items:center;gap:6px}.check i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#55b69c;color:#fff;font-style:normal;font-size:12px}
.hero-art{background:radial-gradient(circle at 55% 55%,rgba(255,196,48,.32),transparent 30%),linear-gradient(145deg,#fff6da,#f1c45b);display:grid;place-items:center;position:relative;overflow:hidden}.hero-art img{width:90%;max-height:92%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(79,45,5,.18))}
.begin{padding:26px 26px 20px;background:#fff;border-radius:18px;border:1px solid rgba(255,255,255,.7)}
.center{text-align:center}.begin h2{font-size:40px;margin:0;letter-spacing:-1.6px}.begin .sub{font-size:19px;color:#61452f;margin:5px 0 20px}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step{border-radius:16px;padding:22px 22px 18px;min-height:290px;position:relative;overflow:hidden}.step:nth-child(1){background:#dceafb}.step:nth-child(2){background:#f8dfaf}.step:nth-child(3){background:#cfe8d4}.step-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#2b160d;font-size:25px;margin:0 auto 10px}.step h3{font-size:22px;text-align:center;margin:4px 0 12px}.step p{font-size:15px;line-height:1.45;text-align:center}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.feature{background:rgba(255,255,255,.76);border-radius:13px;padding:14px;display:flex;gap:10px;align-items:flex-start}.feature strong{display:block}.feature small{color:#6b5139}
.quick-drawer{position:fixed;left:14px;top:120px;width:270px;border-radius:18px;background:rgba(255,237,192,.97);padding:18px;border:1px solid rgba(255,255,255,.8);transform:translateX(-310px);transition:.2s;z-index:30}.quick-drawer.open{transform:none}.quick-drawer a{display:block;padding:11px 12px;border-radius:10px;font-weight:800}.quick-drawer a:hover{background:#f7bd40}.drawer-close{margin-left:auto;display:block;border:0;background:transparent;font-size:20px;cursor:pointer}
.floating-nav{position:fixed;left:20px;bottom:24px;width:54px;height:54px;border:0;border-radius:50%;background:#6c250d;color:#fff1bb;font-size:25px;cursor:pointer;z-index:29}
/* game scene */
.game-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.back{border:1px solid var(--line);background:#fff8e5;border-radius:10px;padding:9px 13px;font-weight:900;cursor:pointer}.game-title{font-size:34px;font-weight:950;margin:0}.scene-shell{padding:20px}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:13px}.stat{background:#fff7e5;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;font-weight:850}.stat small{font-weight:700;color:#7a5835}.scene{position:relative;min-height:640px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#a9ddf3 0%,#d9f3fd 52%,#d6b26e 53%,#ba8248 100%);border:1px solid rgba(88,48,11,.2)}
.cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.74);filter:blur(.3px)}.cloud.c1{width:180px;height:55px;left:7%;top:8%}.cloud.c2{width:240px;height:68px;right:5%;top:16%}.cloud.c3{width:150px;height:45px;left:42%;top:12%}
.hills{position:absolute;left:0;right:0;bottom:26%;height:150px;background:linear-gradient(120deg,#7eaa62 0 27%,#6b9955 28% 45%,#82ad62 46% 70%,#709b50 71% 100%);clip-path:ellipse(72% 53% at 50% 100%)}
.ground{position:absolute;left:0;right:0;bottom:0;height:27%;background:repeating-linear-gradient(135deg,rgba(121,78,35,.18) 0 9px,rgba(255,224,155,.15) 9px 18px)}
.house-wrap{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:min(260px,26%);aspect-ratio:1/1;display:grid;place-items:end center;filter:drop-shadow(0 20px 18px rgba(74,41,9,.25));z-index:4}.house-wrap img{width:100%;height:100%;object-fit:contain}.house-glow{position:absolute;inset:auto 15% -3% 15%;height:22px;border-radius:50%;background:rgba(80,43,8,.22);filter:blur(5px)}
.falling-stone{position:absolute;width:72px;height:72px;object-fit:contain;z-index:6;filter:drop-shadow(0 9px 8px rgba(0,0,0,.25));user-select:none;pointer-events:none}.stone-impact{position:absolute;width:110px;height:110px;object-fit:contain;z-index:7;pointer-events:none;transform:translate(-50%,-50%)}
.scene-help{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(255,252,237,.90);border:1px solid rgba(110,69,20,.15);border-radius:999px;padding:9px 16px;font-weight:900;color:#5c3a1f;z-index:10}
.scene-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(52,25,9,.34);z-index:20}.modal{width:min(420px,calc(100% - 30px));background:#fff9e9;border-radius:18px;padding:25px;text-align:center}.modal h2{margin:0 0 6px;font-size:32px}.modal p{margin:6px 0 18px;color:#66452b;line-height:1.45}.modal-row{display:flex;gap:10px;justify-content:center}.danger{background:#de5a45;color:#fff}.hidden{display:none!important}
.health{height:11px;background:#ecd8ad;border-radius:999px;overflow:hidden;flex:1;margin-left:12px}.health>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#59b974,#96cf78);border-radius:999px;transition:.25s}
/* settings */
.settings-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.setting-card{background:#fff7e5;border:1px solid var(--line);border-radius:15px;padding:19px}.setting-card h3{margin:0 0 8px;font-size:23px}.setting-card p{color:#6e4b31;margin:0 0 16px;line-height:1.4}.range-row{display:flex;align-items:center;gap:14px}.range{width:100%;accent-color:#e99d19}.value-chip{min-width:58px;text-align:center;background:#f5d47f;border-radius:999px;padding:7px 8px;font-weight:900}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}.toggle{appearance:none;width:52px;height:29px;border-radius:999px;background:#d5b68a;position:relative;cursor:pointer;outline:0}.toggle::after{content:'';position:absolute;width:23px;height:23px;top:3px;left:3px;border-radius:50%;background:#fff;transition:.18s}.toggle:checked{background:#5bb779}.toggle:checked::after{transform:translateX(23px)}
.toast{position:fixed;right:22px;bottom:22px;background:#6c250d;color:#fff1bb;padding:12px 16px;border-radius:11px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:40}.toast.show{opacity:1;transform:none}
@media (max-width:1100px){.app-grid{grid-template-columns:230px 1fr}.grid-3{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-art{min-height:250px}.settings-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){.page{width:min(100% - 20px,1440px);margin:10px auto 24px}.topbar{height:auto;min-height:80px;flex-wrap:wrap;padding:14px 16px}.brand{font-size:28px}.brand-mark{width:44px;height:44px}.brand-sub{font-size:14px}.search{order:4;width:100%}.app-grid{grid-template-columns:1fr}.sidebar{position:static}.page-title{font-size:45px}.toolbar{margin-top:16px}.grid-3{grid-template-columns:1fr}.step-grid,.feature-strip{grid-template-columns:1fr}.hero h1{font-size:39px}.landing .topbar{margin:0}.scene{min-height:560px}.house-wrap{width:170px}.stats-row{grid-template-columns:1fr}.game-title{font-size:26px}}