/* ═══════════════════════════════════════════════════════════════════
   Ladder Lessons · ll-base.css
   取代 Bootstrap 5 CDN + Font Awesome CDN。

   點解要拆：Ladder Phonics 係旗艦產品，但係全庫唯一一隻要食 CDN 嘅遊戲。
   Zoom 上網絡一窒、學校網封 cdn.jsdelivr、或者離線用 file:// 開，
   成個版就會散晒。其餘 58 隻已經係 zero-network 單檔。

   載入次序好緊要（同原本 Bootstrap 一樣）：
     ll-base.css  ←  呢個（reboot + utility）
     style.css    ←  原有元件樣式，蓋過 utility
     ll-skin.css  ←  品牌層，最後蓋
   調亂次序 = 元件樣式被 utility 蓋走。

   Bootstrap 原本用咗嘅 class 全部喺呢度重做（app.js 一行都唔使改）。
   2026-08-03
   ═══════════════════════════════════════════════════════════════════ */

/* ── REBOOT ── */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-size:16px;line-height:1.6;
  font-family:ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:600}
h1{font-size:2.25rem}h2{font-size:1.8rem}h3{font-size:1.5rem}
h4{font-size:1.25rem}h5{font-size:1.1rem}h6{font-size:1rem}
img,svg{vertical-align:middle;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding-left:1.4rem}
hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:1rem 0}

/* ── LAYOUT（Bootstrap grid 嘅精簡版）── */
.container,.container-fluid{width:100%;margin-inline:auto;padding-inline:12px}
.container{max-width:1140px}
@media (max-width:1199px){.container{max-width:960px}}
@media (max-width:991px){.container{max-width:720px}}
@media (max-width:767px){.container{max-width:100%}}
.row{display:flex;flex-wrap:wrap;margin-inline:-12px}
.row>*{padding-inline:12px}
.col{flex:1 0 0%}
.col-auto{flex:0 0 auto;width:auto}
.col-12{flex:0 0 auto;width:100%}
.col-6{flex:0 0 auto;width:50%}
.col-4{flex:0 0 auto;width:33.3333%}
.col-3{flex:0 0 auto;width:25%}
.col-2{flex:0 0 auto;width:16.6667%}
.col-5{flex:0 0 auto;width:41.6667%}
.col-8{flex:0 0 auto;width:66.6667%}
.col-9{flex:0 0 auto;width:75%}
/* 響應式 col —— app.js 用緊 col-md-5 / col-md-2 砌配對遊戲兩欄。
   漏咗呢兩條，兩欄就會塌成一欄，連線畫唔到。2026-08-03 補。*/
@media (min-width:768px){
  .col-md-1{flex:0 0 auto;width:8.3333%}
  .col-md-2{flex:0 0 auto;width:16.6667%}
  .col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.3333%}
  .col-md-5{flex:0 0 auto;width:41.6667%}
  .col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.3333%}
  .col-md-8{flex:0 0 auto;width:66.6667%}
  .col-md-9{flex:0 0 auto;width:75%}
  .col-md-10{flex:0 0 auto;width:83.3333%}
  .col-md-12{flex:0 0 auto;width:100%}
  .col-md-auto{flex:0 0 auto;width:auto}
}
/* row gutter */
.g-0{--gx:0;--gy:0}.g-1{--gx:.25rem;--gy:.25rem}.g-2{--gx:.5rem;--gy:.5rem}
.g-3{--gx:1rem;--gy:1rem}.g-4{--gx:1.5rem;--gy:1.5rem}.g-5{--gx:3rem;--gy:3rem}
.row.g-1,.row.g-2,.row.g-3,.row.g-4,.row.g-5{row-gap:var(--gy)}
.row.g-1>*,.row.g-2>*,.row.g-3>*,.row.g-4>*,.row.g-5>*{padding-inline:calc(var(--gx)/2)}
.display-1{font-size:5rem;font-weight:300;line-height:1.1}
.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}
.display-5{font-size:3rem;font-weight:300;line-height:1.2}
.display-6{font-size:2.5rem;font-weight:300;line-height:1.2}

/* ── DISPLAY / FLEX ── */
.d-none{display:none!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}
.d-grid{display:grid!important}
.flex-wrap{flex-wrap:wrap!important}
.flex-nowrap{flex-wrap:nowrap!important}
.flex-column{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.flex-grow-1{flex-grow:1!important}
.align-items-start{align-items:flex-start!important}
.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}
.align-self-center{align-self:center!important}
.justify-content-start{justify-content:flex-start!important}
.justify-content-center{justify-content:center!important}
.justify-content-end{justify-content:flex-end!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-around{justify-content:space-around!important}
.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}
.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}

/* ── SPACING（0–5 = 0 / .25 / .5 / 1 / 1.5 / 3rem，同 Bootstrap 一樣）── */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}
.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}
.m-auto{margin:auto!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}
.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}
.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.my-0{margin-block:0!important}.my-1{margin-block:.25rem!important}.my-2{margin-block:.5rem!important}
.my-3{margin-block:1rem!important}.my-4{margin-block:1.5rem!important}.my-5{margin-block:3rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}
.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}
.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}
.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}
.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}
.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}
.px-2{padding-inline:.5rem!important}.px-3{padding-inline:1rem!important}
.py-2{padding-block:.5rem!important}.py-3{padding-block:1rem!important}

/* ── SIZING ── */
.w-100{width:100%!important}.w-auto{width:auto!important}
.h-100{height:100%!important}.h-auto{height:auto!important}
.mw-100{max-width:100%!important}

/* ── TEXT ── */
.text-start{text-align:left!important}
.text-center{text-align:center!important}
.text-end{text-align:right!important}
.text-nowrap{white-space:nowrap!important}
.fw-normal{font-weight:400!important}.fw-semibold{font-weight:600!important}
.fw-bold{font-weight:700!important}
.fst-italic{font-style:italic!important}
.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}
.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}
.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}
.lh-1{line-height:1!important}

/* ── BORDER / RADIUS / SHADOW ── */
.border{border:1px solid rgba(0,0,0,.14)!important}
.border-0{border:0!important}
.border-bottom{border-bottom:1px solid rgba(0,0,0,.14)!important}
.border-top{border-top:1px solid rgba(0,0,0,.14)!important}
.border-light{border-color:rgba(0,0,0,.08)!important}
.rounded{border-radius:.375rem!important}
.rounded-top{border-radius:.375rem .375rem 0 0!important}
.rounded-bottom{border-radius:0 0 .375rem .375rem!important}
.rounded-circle{border-radius:50%!important}
.rounded-pill{border-radius:9999px!important}
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}
.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}
.overflow-hidden{overflow:hidden!important}
.position-relative{position:relative!important}
.position-absolute{position:absolute!important}

/* ── COLOUR utility（component 色由 style.css 管，呢度只做文字／底色）── */
.text-white{color:#fff!important}
.text-muted{color:#6b7280!important}
.text-primary{color:#4338ca!important}
.text-danger{color:#dc2626!important}
.text-success{color:#16a34a!important}
.bg-white{background-color:#fff!important}
.bg-transparent{background-color:transparent!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ ICON SHIM ═══════════════════════════════════════════════════
   取代 Font Awesome 6（1.2MB CSS + webfont）。app.js 用緊 9 個 icon，
   全部改用 inline SVG mask —— markup <i class="fas fa-play"></i> 唔使改，
   顏色跟 currentColor，同 FA 行為一致。
   ═══════════════════════════════════════════════════════════════ */
.fa,.fas,.far,.fa-solid,.fa-regular{
  display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

.fa-play{-webkit-mask-image:var(--i-play);mask-image:var(--i-play)}
.fa-play-circle{-webkit-mask-image:var(--i-playc);mask-image:var(--i-playc)}
.fa-stop{-webkit-mask-image:var(--i-stop);mask-image:var(--i-stop)}
.fa-microphone{-webkit-mask-image:var(--i-mic);mask-image:var(--i-mic)}
.fa-home{-webkit-mask-image:var(--i-home);mask-image:var(--i-home)}
.fa-arrow-left{-webkit-mask-image:var(--i-left);mask-image:var(--i-left)}
.fa-arrow-right{-webkit-mask-image:var(--i-right);mask-image:var(--i-right)}
.fa-refresh{-webkit-mask-image:var(--i-refresh);mask-image:var(--i-refresh)}
.fa-bolt{-webkit-mask-image:var(--i-bolt);mask-image:var(--i-bolt)}

:root{
  /* app.js 直接引用緊嘅 Bootstrap CSS 變數，拆 CDN 之後要自己補返 */
  --bs-light:#F6EDE0; --bs-dark:#2C3E50; --bs-white:#fff; --bs-body-color:#2C3E50;
  --bs-primary:#FF6B6B; --bs-secondary:#4ECDC4; --bs-success:#22C55E; --bs-danger:#E74C3C;
  --bs-border-color:#E5E7EB; --bs-border-radius:.375rem;

  --i-play:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4.5v15a1 1 0 0 0 1.53.85l12-7.5a1 1 0 0 0 0-1.7l-12-7.5A1 1 0 0 0 7 4.5z'/></svg>");
  --i-playc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 6.3 5 3.2a.6.6 0 0 1 0 1l-5 3.2a.6.6 0 0 1-.9-.5V8.8a.6.6 0 0 1 .9-.5z'/></svg>");
  --i-stop:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='5' width='14' height='14' rx='2'/></svg>");
  --i-mic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 14a3.5 3.5 0 0 0 3.5-3.5v-5a3.5 3.5 0 1 0-7 0v5A3.5 3.5 0 0 0 12 14z'/><path d='M18 10.5a1 1 0 1 0-2 0 4 4 0 0 1-8 0 1 1 0 1 0-2 0 6 6 0 0 0 5 5.9V19H8.5a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2H13v-2.6a6 6 0 0 0 5-5.9z'/></svg>");
  --i-home:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.3 2.4 2.6 9.6a1 1 0 0 0 .64 1.77H4.5V20a1 1 0 0 0 1 1H9.5v-5.5h5V21h4a1 1 0 0 0 1-1v-8.63h1.26a1 1 0 0 0 .64-1.77L12.7 2.4a1 1 0 0 0-1.4 0z'/></svg>");
  --i-left:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 11H7.8l5.1-5.1a1 1 0 1 0-1.4-1.4l-6.8 6.8a1 1 0 0 0 0 1.4l6.8 6.8a1 1 0 1 0 1.4-1.4L7.8 13H20a1 1 0 1 0 0-2z'/></svg>");
  --i-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13h12.2l-5.1 5.1a1 1 0 1 0 1.4 1.4l6.8-6.8a1 1 0 0 0 0-1.4l-6.8-6.8a1 1 0 1 0-1.4 1.4l5.1 5.1H4a1 1 0 1 0 0 2z'/></svg>");
  --i-refresh:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5a7 7 0 0 1 6.32 4h-2.07a1 1 0 0 0 0 2h4.25a1 1 0 0 0 1-1V5.75a1 1 0 1 0-2 0v1.29A9 9 0 0 0 3.05 11a1 1 0 1 0 1.99.22A7 7 0 0 1 12 5zm7.95 7.78a1 1 0 0 0-1.1.88A7 7 0 0 1 5.68 15h2.07a1 1 0 1 0 0-2H3.5a1 1 0 0 0-1 1v4.25a1 1 0 1 0 2 0v-1.29A9 9 0 0 0 20.95 13a1 1 0 0 0-.88-1.1z'/></svg>");
  --i-bolt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.6 2.2 5.2 12.4a.8.8 0 0 0 .62 1.31H10l-1.6 7.8a.6.6 0 0 0 1.06.5l8.4-10.2a.8.8 0 0 0-.62-1.31H13.2l1.46-7.8a.6.6 0 0 0-1.06-.5z'/></svg>");
}