*{box-sizing:border-box}
:root{--page-bg:#fff;--text:#202636;--muted:#586174;--border:#e7e9ef;--container:1180px}
html{scroll-behavior:smooth}
body{margin:0;padding-top:78px;background:var(--page-bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
/* Soft page wash so glass cards read clearly */
main{
  background:
    radial-gradient(ellipse 80% 50% at 10% 20%, rgba(105,55,216,.06), transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 40%, rgba(20,120,223,.05), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(10,162,118,.05), transparent 50%);
}
a{color:inherit;text-decoration:none}
.arcade-header{position:fixed;top:0;left:0;right:0;width:100%;height:78px;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #eef0f4}
.header-inner{width:min(calc(100% - 48px),var(--container));height:78px;min-height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:41px;height:41px;display:grid;place-items:center;border-radius:12px;color:#fff;background:#6937d8;font-size:12px;font-weight:900}.brand-text{display:flex;flex-direction:column;gap:2px}.brand-text strong{font-size:14px}.brand-text small{color:#7b8496;font-size:10px}
.main-nav{display:flex;align-items:center;gap:28px}.main-nav a{color:#6d7587;font-size:13px;font-weight:700;transition:color .2s}.main-nav a:hover,.main-nav a.active{color:#6937d8}
.arcade-intro{width:min(calc(100% - 48px),var(--container));margin:0 auto;padding:62px 0 34px}.eyebrow{color:#6937d8;font-size:11px;font-weight:900;letter-spacing:1.7px}.arcade-intro h1{margin:9px 0 8px;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-2px}.arcade-intro p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.skill-grid{width:min(calc(100% - 48px),var(--container));margin:0 auto 70px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.skill-card{
  position:relative;min-height:330px;overflow:hidden;
  display:grid;grid-template-columns:53% 47%;
  border:1px solid rgba(255,255,255,.45);
  border-radius:28px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 8px 32px rgba(38,44,65,.08), inset 0 1px 0 rgba(255,255,255,.75);
  isolation:isolate;
  transition:transform .22s,box-shadow .22s,border-color .22s,background .22s;
}
.skill-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 18px 44px rgba(38,44,65,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
.skill-content{position:relative;z-index:3;padding:28px 22px 26px 28px}
/* Icon + title side by side */
.skill-title-row{
  display:flex;align-items:center;gap:14px;
  margin-bottom:12px;
}
.skill-icon{
  width:48px;height:48px;flex:0 0 48px;
  display:grid;place-items:center;border-radius:14px;
  margin:0;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.skill-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.skill-card h2{
  margin:0;font-size:28px;line-height:1.1;letter-spacing:-1px;
}
.skill-card p{max-width:310px;margin:0 0 16px;color:#394152;font-size:13px;line-height:1.65}
.skill-card ul{display:grid;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.skill-card li{display:flex;align-items:center;gap:9px;color:#303746;font-size:11px;font-weight:650}
.skill-card li::before{content:"✓";width:15px;height:15px;display:grid;place-items:center;flex:0 0 15px;border:1.7px solid currentColor;border-radius:50%;font-size:9px;font-weight:900}
/* Bigger Explore buttons */
.skill-button{
  display:inline-flex;align-items:center;gap:12px;
  min-height:48px;padding:0 22px;
  border-radius:12px;color:#fff;
  font-size:13px;font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .18s,filter .18s,box-shadow .18s;
}
.skill-button:hover{transform:translateY(-2px);filter:brightness(.97);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.skill-button span{font-size:18px;line-height:0}
.character-space{position:relative;min-width:0;min-height:100%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.soft-shape{position:absolute;width:128%;height:110%;right:-20%;bottom:-28%;border-radius:45% 0 0 45%;opacity:.8}
.character-space img{position:absolute;z-index:2;right:3%;bottom:0;width:88%;max-width:330px;height:auto;max-height:100%;object-fit:contain;object-position:bottom center;display:block;pointer-events:none}
.wave-placeholder{position:absolute;z-index:1;left:4%;bottom:30%;display:flex;align-items:center;gap:4px;opacity:.7}.wave-placeholder i{width:4px;border-radius:10px;background:currentColor}.wave-placeholder i:nth-child(1){height:14px}.wave-placeholder i:nth-child(2){height:25px}.wave-placeholder i:nth-child(3){height:40px}.wave-placeholder i:nth-child(4){height:24px}.wave-placeholder i:nth-child(5){height:48px}.wave-placeholder i:nth-child(6){height:30px}.wave-placeholder i:nth-child(7){height:18px}.wave-placeholder i:nth-child(8){height:11px}
.vocabulary{border-color:#e6ddfa}.vocabulary .skill-icon{background:#7b45e5;color:#fff}.vocabulary h2,.vocabulary .skill-card li{color:#5e2fc8}.vocabulary .skill-button{background:#6937d8}.vocabulary .soft-shape{background:#f1edff}
.grammar{border-color:#dcefe9}.grammar .skill-icon{background:#0aa276;color:#fff}.grammar h2,.grammar .skill-card li{color:#07966d}.grammar .skill-button{background:#079d73}.grammar .soft-shape{background:#eaf8f4}
.listening{border-color:#dbe9fa}.listening .skill-icon{background:#207ce0;color:#fff}.listening h2,.listening .skill-card li{color:#176fd0}.listening .skill-button{background:#1478df}.listening .soft-shape{background:#edf6ff}.listening .wave-placeholder{color:#3b91ed}
.reading{border-color:#f8dddd}.reading .skill-icon{background:#ef3439;color:#fff}.reading h2,.reading .skill-card li{color:#ed3036}.reading .skill-button{background:#ee3138}.reading .soft-shape{background:#fff0f0}
.writing{border-color:#fae5ca}.writing .skill-icon{background:#f58a09;color:#fff}.writing h2,.writing .skill-card li{color:#ed7d00}.writing .skill-button{background:#f48700}.writing .soft-shape{background:#fff4e6}
.speaking{border-color:#d7edf0}.speaking .skill-icon{background:#0c9eaf;color:#fff}.speaking h2,.speaking .skill-card li{color:#0795a7}.speaking .skill-button{background:#099daf}.speaking .soft-shape{background:#eaf9fb}
.site-footer{border-top:1px solid #edf0f4;text-align:center;padding:25px;color:#8991a1;font-size:10px}
/* Tablet: still 2 columns, slightly tighter */
@media(max-width:1050px){
  .skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .skill-card{min-height:280px}
  .skill-content{padding:22px 18px}
}

/* ========== PHONE: no page scroll, 2×3 grid (3 left + 3 right) ========== */
@media(max-width:700px){
  html, body{
    height:100%;
    height:100dvh;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body{
    padding-top:0 !important;
    display:flex;
    flex-direction:column;
  }
  .arcade-header{
    position:fixed !important;
    top:0; left:0; right:0;
    height:56px !important;
    min-height:calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-top:env(safe-area-inset-top, 0px);
    z-index:100;
  }
  .header-inner{
    width:min(calc(100% - 20px), var(--container));
    height:56px;
    min-height:56px;
    gap:12px;
  }
  .main-nav{display:none}
  .menu-toggle{display:flex}

  main{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding-top:calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    overflow:hidden;
  }

  .arcade-intro{
    width:min(calc(100% - 20px), var(--container));
    margin:0 auto;
    padding:10px 0 8px;
    flex:0 0 auto;
  }
  .arcade-intro .eyebrow{font-size:9px; letter-spacing:1.2px}
  .arcade-intro h1{
    margin:4px 0 2px;
    font-size:clamp(22px, 6.5vw, 28px);
    letter-spacing:-1px;
  }
  .arcade-intro p{display:none} /* save space — no scroll */

  .skill-grid{
    width:min(calc(100% - 16px), var(--container));
    margin:0 auto;
    padding-bottom:8px;
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr; /* 3 left, 3 right */
    grid-template-rows:repeat(3, minmax(0, 1fr));
    gap:8px;
    overflow:hidden;
  }

  .skill-card{
    min-height:0;
    height:100%;
    grid-template-columns:1fr;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    background:rgba(255,255,255,.38);
    backdrop-filter:blur(20px) saturate(1.45);
    -webkit-backdrop-filter:blur(20px) saturate(1.45);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 6px 24px rgba(38,44,65,.08), inset 0 1px 0 rgba(255,255,255,.7);
  }

  .skill-content{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:12px 12px 12px;
    min-height:0;
  }

  .skill-title-row{
    gap:8px;
    margin-bottom:8px;
  }
  .skill-icon{
    width:40px; height:40px; flex:0 0 40px;
    border-radius:12px;
  }
  .skill-icon svg{width:22px; height:22px}

  /* BIG skill names */
  .skill-card h2{
    font-size:clamp(16px, 4.8vw, 20px);
    font-weight:800;
    letter-spacing:-0.5px;
    line-height:1.15;
  }

  /* Hide long description; keep short bullets so cards feel alive */
  .skill-card p{display:none}
  .skill-card ul{
    display:grid;
    gap:4px;
    margin:0 0 10px;
    padding:0;
    list-style:none;
    flex:1 1 auto;
    min-height:0;
  }
  .skill-card li{
    font-size:10px;
    font-weight:650;
    gap:6px;
    line-height:1.25;
  }
  .skill-card li::before{
    width:12px;height:12px;flex-basis:12px;
    font-size:8px;
  }
  /* Show only first 2 bullets on phone */
  .skill-card li:nth-child(n+3){display:none}

  /* BIG Explore buttons */
  .skill-button{
    width:100%;
    justify-content:center;
    min-height:44px;
    padding:0 10px;
    border-radius:11px;
    font-size:clamp(12px, 3.4vw, 14px);
    font-weight:800;
    gap:6px;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
  }
  .skill-button span{font-size:16px}

  /* Soft color blob only — keep pictures if they fit, else hide */
  .character-space{
    display:none; /* necessary for no-scroll; colors stay via soft-shape if we show a strip */
  }

  .site-footer{display:none}
}

/* Very small phones: tighten a bit more */
@media(max-width:380px){
  .skill-grid{gap:6px}
  .skill-content{padding:10px}
  .skill-icon{width:34px;height:34px;flex-basis:34px}
  .skill-card h2{font-size:15px}
  .skill-button{min-height:40px;font-size:12px}
}

/* MOBILE MENU TOGGLE */
.menu-toggle{display:none;width:38px;height:38px;padding:0;border:none;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:700px){
.menu-toggle{display:flex}
}



/* Dark theme: stronger glass */
html[data-theme="dark"] .skill-card,
body.dark-mode .skill-card{
  background:rgba(30,34,48,.55);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .skill-card:hover,
body.dark-mode .skill-card:hover{
  background:rgba(40,46,64,.72);
  border-color:rgba(255,255,255,.18);
}
html[data-theme="dark"] .skill-card p{color:#c5cbe0}
html[data-theme="dark"] .skill-card li{color:#d0d6ea}


/* ========== Theme toggle: never look empty ========== */
.theme-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:40px;
  min-height:40px;
  padding:0 12px;
  border:1px solid #e7e9ef;
  border-radius:12px;
  background:#fff;
  color:#202636;
  font:700 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(32,38,54,.06);
}
.theme-toggle span{font-size:11px;font-weight:700}
html[data-theme="dark"] .theme-toggle{
  background:#1a1f2c;
  border-color:#2e3448;
  color:#f4f6fb;
}

/* ========== Mobile menu panel (hamburger open) ========== */
@media(max-width:700px){
  /* Icon-only theme button so it never collapses to empty */
  .theme-toggle{
    min-width:42px;
    width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    border-radius:12px;
    font-size:18px;
    line-height:1;
  }
  .theme-toggle span{display:none} /* emoji only on phone */

  .main-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    position:absolute;
    top:calc(100% + 8px);
    left:12px;
    right:12px;
    width:auto;
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    padding:0 14px;
    margin:0;
    z-index:200;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,.65);
    border-radius:18px;
    box-shadow:0 16px 40px rgba(32,38,54,.16), inset 0 1px 0 rgba(255,255,255,.8);
    transition:max-height .28s ease, opacity .22s ease, padding .22s ease;
  }
  .main-nav.open{
    max-height:70vh;
    opacity:1;
    pointer-events:auto;
    overflow-y:auto;
    padding:12px 14px 14px;
  }
  .main-nav a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:48px;
    padding:0 14px;
    margin:0;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    color:#3a4154;
    background:transparent;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .main-nav a:hover,
  .main-nav a:active{
    background:rgba(105,55,216,.1);
    color:#6937d8;
  }
  .main-nav a.active{
    background:rgba(105,55,216,.14);
    color:#6937d8;
  }

  html[data-theme="dark"] .main-nav{
    background:rgba(24,28,40,.92);
    border-color:rgba(255,255,255,.1);
    box-shadow:0 16px 40px rgba(0,0,0,.45);
  }
  html[data-theme="dark"] .main-nav a{color:#d5dbeb}
  html[data-theme="dark"] .main-nav a:hover,
  html[data-theme="dark"] .main-nav a:active,
  html[data-theme="dark"] .main-nav a.active{
    background:rgba(139,109,240,.18);
    color:#c4b0ff;
  }

  /* Hamburger → X clearer */
  .menu-toggle{
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid #e7e9ef;
    background:#fff;
  }
  html[data-theme="dark"] .menu-toggle{
    background:#1a1f2c;
    border-color:#2e3448;
  }
}


/* Nav icons (mobile menu) */
.nav-ico{display:none;width:1.4em;text-align:center;margin-right:10px;font-size:1.15em}
@media(max-width:700px){
  .nav-ico{display:inline-block}
  .main-nav a{
    gap:4px;
  }
  /* Round hamburger */
  .menu-toggle{
    border-radius:50% !important;
    width:44px !important;
    height:44px !important;
  }
  .main-nav{
    transform-origin:top center;
    transition:max-height .32s cubic-bezier(.22,1,.36,1), opacity .28s ease, padding .28s ease, transform .32s cubic-bezier(.22,1,.36,1) !important;
    transform:translateY(-8px) scaleY(.96);
  }
  .main-nav.open{
    transform:translateY(0) scaleY(1);
  }
}