/* Concrete practice materials: large targets, local SVG artwork and touch controls. */
.hero-school-link { display:inline-block; margin-top:20px; color:#fff9df; font-weight:700; text-underline-offset:5px; }
.hero-school-link:hover { color:#fff; }
.activity-story p { font-size:22px; line-height:1.8; margin:12px 0 0; }
.practice-tool-panel .play-header { margin-bottom:16px; gap:16px; }
.practice-tool-panel .play-header .eyebrow { display:none; }
.practice-tool-panel .play-header h2 { font-size:24px; }
.practice-tool-panel .play-header p { font-size:15px; line-height:1.6; }
.practice-settings { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; background:#edf4f6; border:1px solid #d6e2e8; border-radius:18px; margin-bottom:16px; }
.practice-settings label { display:flex; align-items:center; gap:12px; font-weight:700; }
.practice-settings select { min-height:46px; border:1px solid #b1c6d2; border-radius:10px; padding:8px 14px; background:white; color:#263747; font:inherit; }
.practice-settings p { margin:0; font-size:14px; }
.activity-material { padding:24px; background:#f1f6f8; border:1px solid #dbe6ed; border-radius:20px; margin:20px 0; color:#263747; }
.activity-reference { display:grid; justify-items:center; gap:12px; font-weight:700; }
.activity-reference>svg { width:180px; height:180px; padding:14px; background:#fff9ee; border-radius:24px; }
.activity-option-picture { width:110px; height:110px; max-width:100%; }
.react-answers button:has(.activity-option-picture) { display:flex; flex-direction:column; align-items:center; min-height:155px; gap:6px; }
.react-answers button:disabled { opacity:1; cursor:default; }
.activity-objects { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:12px; }
.activity-objects>span { display:block; width:52px; height:52px; }
.activity-objects svg { width:100%; height:100%; }
.activity-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:center; }
.activity-compare>div { background:#fff; border:2px solid #d8e4eb; border-radius:16px; padding:12px 4px; }
.activity-pattern { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; }
.activity-pattern>svg { width:65px; height:65px; }
.activity-pattern>b { font-size:38px; }
.activity-wide-svg { display:block; width:100%; max-width:560px; max-height:340px; margin:auto; }
.activity-clock { display:block; width:min(100%,260px); margin:auto; }
.activity-plates { display:flex; justify-content:center; gap:24px; margin-top:20px; }
.activity-plates>span { display:flex; align-items:center; gap:20px; padding:18px 30px; background:#fff; border:3px solid #cadde9; border-radius:50%; font-size:30px; }
.activity-equation { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; font-size:36px; }
.activity-equation .activity-objects { max-width:210px; }
.activity-unknown { padding:18px 26px; border:3px dashed #a5bdce; background:#fff; border-radius:12px; }
.activity-money { text-align:center; }
.activity-money>div { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.activity-money svg { width:85px; height:85px; }
.activity-money small { display:block; margin-top:14px; color:#536674; }
.activity-code-key { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:24px; padding-bottom:18px; border-bottom:2px solid #d6e2e8; }
.activity-code-key>span { display:flex; align-items:center; gap:6px; font-size:24px; }
.activity-code-key svg { width:42px; height:42px; }
.activity-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:480px; margin:auto; border:3px solid #d2e2df; background:#d2e2df; gap:5px; }
.activity-map>div { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:105px; padding:10px 4px; background:#fffdf7; font-size:14px; }
.activity-map span { font-size:26px; }
.activity-map .map-start { background:#dbedf9; }
.activity-puzzle { display:grid; grid-template-columns:minmax(100px,1fr) minmax(160px,2fr); gap:24px; padding:20px 0; align-items:start; }
.puzzle-reference { text-align:center; }
.puzzle-reference>svg { width:100%; border:3px solid #c4d6de; border-radius:12px; margin-top:10px; }
.puzzle-tiles { display:grid; border:4px solid #7292a5; gap:3px; background:#7292a5; }
.puzzle-tiles button { display:block; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:#fff; line-height:0; touch-action:manipulation; }
.puzzle-tiles button>svg { display:block; width:100%; height:auto; }
.puzzle-tiles button[aria-pressed=true] { outline:5px solid #d59324; outline-offset:-5px; z-index:1; filter:brightness(1.1); }
.activity-check { margin-top:16px; width:100%; }
.activity-listening { padding:20px 0; }
.activity-listening details { margin:18px 0; padding:12px 16px; border:1px solid #c9dce5; border-radius:12px; }
.activity-listening summary { cursor:pointer; padding:8px 0; }
.listening-pictures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.listening-pictures button { position:relative; display:grid; place-items:center; min-height:100px; padding:12px; background:#f4f8fa; border:2px solid #b7cdd9; border-radius:16px; }
.listening-pictures svg { width:65px; max-width:100%; height:65px; }
.listening-pictures span { position:absolute; bottom:2px; right:7px; font-size:16px; font-weight:800; }
.activity-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.activity-controls button,.activity-check,.activity-speaking>button,.activity-listening>button { min-height:48px; padding:12px 18px; border:1px solid #a1bcca; border-radius:12px; background:#fff; color:#263747; font:inherit; font-weight:700; cursor:pointer; }
.activity-controls .primary,.activity-listening>.primary { background:#2a6175; color:#fff; }
.practice-tool-panel button:disabled,.activity-controls button:disabled,.activity-check:disabled { cursor:default; }
.tool-actions button:disabled,.activity-controls button:disabled,.activity-check:disabled,.activity-speaking>button:disabled { opacity:.48; }
.speaking-keyword { margin:20px 0; padding:24px; text-align:center; font-size:38px; font-weight:800; background:#f8ecd8; border-radius:18px; }
.activity-speaking fieldset { margin:12px 0; padding:14px; border:1px solid #c6d9e2; border-radius:12px; }
.activity-speaking fieldset label { display:inline-flex; align-items:center; min-height:44px; margin-right:20px; gap:8px; }
.sort-colour-swatch { display:block; width:70px; height:70px; border:2px solid rgba(0,0,0,.15); border-radius:50%; margin:auto; }
.practice-summary { padding:30px; }
.summary-score strong { display:block; font-size:40px; color:#2a6175; }
.practice-summary li { margin-bottom:18px; }
.practice-summary small { display:block; margin-top:22px; }
.coach-guidance { margin-top:16px; border-top:1px solid #d6e2e8; padding-top:12px; }
.coach-guidance summary { padding:10px 0; cursor:pointer; font-weight:700; }
.game-bonus-options button:has(.activity-option-picture) { display:flex; flex-direction:column; align-items:center; }
.tangram-accessible-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; }
.tangram-accessible-controls label { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.tangram-accessible-controls select,.tangram-accessible-controls button { min-height:44px; padding:8px 14px; border:1px solid #adbfca; border-radius:10px; background:white; color:#263747; font:inherit; }
.practice-tool-panel button:focus-visible,.practice-settings select:focus-visible { outline:3px solid #ba821b; outline-offset:3px; }
@media(max-width:600px) {
  .practice-tool-panel .score-stack { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:12px; padding:9px; min-width:0; }
  .practice-tool-panel .score-stack strong { font-size:20px; }
  .practice-tool-panel .score-stack span { font-size:12px; }
  .practice-tool-panel .task-stage { padding:16px 12px; }
  .activity-material { padding:15px 10px; }
  .activity-reference>svg { width:135px; height:135px; }
  .activity-option-picture { width:80px; height:80px; }
  .react-answers:has(.activity-option-picture) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .react-answers button:has(.activity-option-picture) { min-height:125px; padding:10px 5px; }
  .activity-objects>span { width:36px; height:36px; }
  .activity-pattern { gap:9px; }
  .activity-pattern>svg { width:40px; height:40px; }
  .activity-pattern>b { font-size:26px; }
  .activity-puzzle { grid-template-columns:1fr; gap:14px; }
  .puzzle-reference { width:110px; margin:auto; font-size:13px; }
  .activity-map>div { min-height:90px; font-size:12px; }
  .listening-pictures { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .activity-plates>span { padding:12px 22px; }
  .practice-settings { padding:14px; }
  .practice-summary { padding:20px; }
}
.money-shop { overflow:hidden; border:1px solid #e2d8c8; border-radius:22px; background:#fffdf8; text-align:left; width:100%; }
.shop-awning { height:17px; background:repeating-linear-gradient(90deg,#558979 0 32px,#f3ebda 32px 64px); border-bottom:4px solid #e8dcc7; }
.shop-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 22px; border-bottom:1px solid #e7dfd2; color:#345f51; }
.shop-heading>span { font-weight:800; font-size:20px; }
.shop-heading>small { font-size:12px; }
.shop-order { display:flex; gap:20px; align-items:center; padding:22px; background:#f7f1e5; }
.shop-item { display:grid; place-items:center; width:85px; height:85px; background:#fffdf8; border:1px solid #e5dbc9; border-radius:20px; font-size:45px; flex-shrink:0; }
.shop-order>div { display:grid; gap:5px; }
.shop-order strong { font-size:27px; line-height:1.35; }
.shop-order small { color:#6e7167; font-size:13px; }
.wallet-instruction { padding:0 22px; margin:18px 0 12px; font-size:14px; color:#5a645e; }
.shop-wallet { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0 22px 20px; }
.shop-wallet>button { position:relative; border:1px solid #e5ddce; border-radius:16px; padding:10px 5px; background:white; color:#243d35; cursor:pointer; min-width:0; transition:transform .15s,border-color .15s; }
.shop-wallet>button:hover:not(:disabled) { border-color:#3b8068; background:#f5faf5; }
.shop-wallet>button>span:last-child { position:absolute; top:5px; right:6px; background:#e7f2ec; border-radius:50%; font-size:16px; width:24px; height:24px; }
.hk-cash { display:inline-flex; flex-direction:column; align-items:center; gap:6px; vertical-align:middle; max-width:100%; }
.coin-photo { position:relative; display:block; width:90px; height:90px; overflow:hidden; border-radius:50%; max-width:100%; }
.coin-photo img { display:block; width:100%; height:100%; object-fit:cover; max-width:none; }
.coin-10 .coin-photo img { position:absolute; width:124%; height:124%; left:-12%; top:-12%; }
.hk-coin.coin-2 .coin-photo { border-radius:18%; }
.hk-cash b { font-size:15px; font-weight:800; color:#273d36; }
.payment-tray { margin:0 22px; padding:14px; border:2px dashed #bdd0c2; background:#eff5ef; border-radius:16px; }
.tray-label { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; }
.tray-label output { font-size:24px; font-weight:800; color:#285d47; }
.tray-coins { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:87px; margin-top:10px; }
.tray-coins button { background:#fff; border:1px solid #d0ddcd; border-radius:10px; padding:5px; cursor:pointer; }
.tray-coins .coin-photo { width:45px; height:45px; }
.tray-coins .hk-coin b { font-size:11px; }
.tray-empty { width:100%; text-align:center; color:#6f8073; font-size:13px; }
.money-shop .activity-controls { padding:18px 22px; margin:0; }
.money-shop .activity-controls button { min-height:44px; }
.money-explanation { padding:0 22px; font-size:15px; color:#355c49; }
.coin-guide { padding:16px 22px; border-top:1px solid #e3e2d6; background:#fff; font-size:14px; }
.coin-guide summary,.coin-credits summary { cursor:pointer; font-weight:700; color:#456657; }
.coin-guide p { margin:12px 0; line-height:1.8; }
.coin-reference-row { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin:20px 0; }
.coin-reference-row>div { text-align:center; display:grid; gap:5px; }
.hk-note { width:100%; max-width:210px; }
.note-photo { display:block; position:relative; overflow:hidden; width:100%; border:1px solid #d6ccb8; border-radius:4px; background:#eee8dd; }
.note-photo img { position:absolute; display:block; height:auto; max-width:none; border-radius:0; }
.shop-wallet.wallet-note { grid-template-columns:repeat(3,minmax(0,1fr)); }
.shop-wallet.wallet-note>button { padding:18px 8px 10px; }
.tray-coins .hk-note { width:90px; }
.tray-coins .hk-cash b { font-size:11px; }
.note-reference-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:16px 0; }
.note-reference-grid>div { text-align:center; }
.note-reference-grid small { display:block; margin-top:5px; }
.wallet-tabs { display:flex; gap:8px; padding:0 22px 14px; }
.wallet-tabs button { min-height:44px; border:1px solid #c2d2c5; border-radius:12px; background:#fff; padding:10px 22px; color:#345f51; font:inherit; font-weight:700; cursor:pointer; }
.wallet-tabs button[aria-pressed="true"] { background:#345f51; color:#fff; border-color:#345f51; }
.shop-order strong em { font-size:14px; font-style:normal; padding:4px 9px; background:#fffdf8; border-radius:8px; vertical-align:middle; }
.customer-payment { width:120px; margin-top:6px; }
.customer-payment .hk-cash b { display:none; }
.money-course { margin-top:0; }
.coin-credits { margin-top:15px; font-size:11px; color:#65726c; }
.coin-credits p { margin:5px 0; }
.parent-coach,.practice-paths,.interview-tips:not(.compact) { margin:28px 0; border:1px solid #dddcd2; border-radius:24px; padding:28px; background:#fffdf8; color:#2f3c36; }
.parent-coach>header { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.coach-mark { display:grid; place-items:center; background:#e8efe2; color:#427156; border-radius:16px; width:52px; height:52px; flex-shrink:0; font-size:32px; }
.parent-coach h2,.practice-paths h2,.interview-tips h2 { margin:5px 0; font-size:clamp(20px,2.4vw,28px); line-height:1.4; }
.parent-coach .eyebrow,.practice-paths .eyebrow,.interview-tips .eyebrow { margin:0; color:#628065; font-size:12px; }
.coach-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.coach-card-grid>div { padding:18px; border-radius:16px; background:#f2f3eb; }
.coach-card-grid .coach-cue { background:#f6ede0; }
.coach-label { display:block; font-size:12px; font-weight:800; color:#627260; margin-bottom:8px; }
.coach-card-grid p,.coach-offline p { margin:0; line-height:1.8; font-size:15px; }
.coach-observation { display:flex; flex-wrap:wrap; gap:12px; border:0; border-bottom:1px solid #e6e3d9; margin:18px 0; padding:0 0 18px; }
.coach-observation legend { font-size:12px; font-weight:700; margin-bottom:10px; }
.coach-observation label { display:flex; align-items:center; gap:7px; font-size:13px; padding:8px 12px; border:1px solid #dddcd2; border-radius:30px; cursor:pointer; background:#fff; }
.coach-observation label:has(input:checked) { background:#e6f0e2; border-color:#648762; }
.coach-observation input { width:16px; height:16px; accent-color:#46735b; margin:0; }
.coach-observation>span { flex-basis:100%; font-size:12px; color:#537351; }
.coach-observation>span:empty { display:none; }
.coach-offline { display:grid; gap:5px; }
.coach-offline>strong { color:#557651; font-size:13px; }
.interview-tips.compact { border-top:1px solid #e5e3d8; margin-top:20px; padding-top:17px; }
.interview-tips.compact>summary { cursor:pointer; font-size:14px; font-weight:700; color:#41654c; }
.coach-intro { font-size:14px; color:#677167; line-height:1.8; max-width:850px; }
.interview-habits { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:22px 0; }
.interview-habits article { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #e8e3d7; }
.interview-habits article>span { color:#a3764a; font-size:13px; font-weight:800; padding-top:3px; }
.interview-habits h3 { margin:0 0 7px; font-size:15px; line-height:1.5; }
.interview-habits p { margin:0; font-size:13px; line-height:1.8; color:#687063; }
.interview-day { background:#eef2e7; padding:18px; border-radius:14px; }
.interview-day strong { font-size:14px; }
.interview-day p { font-size:13px; line-height:1.8; margin:6px 0 0; }
.coach-source { margin:16px 0 0; color:#747a70; font-size:12px; }
.coach-source a { color:#456b51; text-decoration:underline; }
.paths-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.paths-heading>a { font-size:12px; color:#5c7551; flex-shrink:0; text-decoration:underline; }
.path-options { display:flex; gap:9px; margin:22px 0 12px; flex-wrap:wrap; }
.path-options button { border:1px solid #d7ddce; background:#fff; padding:12px 16px; border-radius:30px; font-size:14px; font-weight:700; color:#506647; cursor:pointer; min-height:44px; }
.path-options button[aria-pressed="true"] { background:#3e654f; border-color:#3e654f; color:#fff; }
.practice-paths>p { font-size:14px; line-height:1.8; color:#6a7365; }
.path-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
.path-steps>a { display:flex; gap:12px; align-items:center; border:1px solid #dedfcf; border-radius:16px; padding:18px 14px; background:#fff; text-decoration:none; color:#2e4938; }
.path-steps>a>span { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; background:#f0eadc; color:#96734c; font-size:13px; }
.path-steps strong { font-size:15px; }
.path-steps small { display:block; margin-top:5px; font-size:11px; color:#768170; }
.path-steps>a>b { margin-left:auto; }
.share-caption { display:grid; gap:8px; font-size:12px; font-weight:700; margin:16px 0; color:#5c6c64; }
.share-caption textarea { width:100%; min-height:112px; box-sizing:border-box; border:1px solid #d4dfd6; border-radius:12px; padding:13px; font:400 14px/1.75 inherit; font-family:inherit; font-size:14px; line-height:1.75; resize:vertical; color:#344d41; background:#fff; }
.game-share-copy>small { display:block; font-size:12px; line-height:1.7; color:#68776e; }
.bonus-reshare { padding:14px 0; margin-bottom:20px; border-bottom:1px solid #dfebdf; font-size:13px; }
.bonus-reshare>summary { cursor:pointer; font-weight:700; color:#4c7256; }
.money-shop button:focus-visible,.parent-coach summary:focus-visible,.path-options button:focus-visible,.path-steps>a:focus-visible { outline:3px solid #cb9b4a; outline-offset:3px; }
@media(max-width:640px) {
  .practice-tool-panel:has(.money-shop) { padding:14px; }
  .task-stage:has(.money-shop) { padding:0; background:transparent; border:0; }
  .activity-material:has(.money-shop) { padding:0; }
  .money-shop { border-radius:16px; }
  .shop-heading { padding:12px; align-items:flex-start; flex-direction:column; gap:4px; }
  .shop-heading>span { font-size:18px; }
  .shop-order { padding:16px 12px; gap:12px; }
  .shop-item { width:62px; height:62px; font-size:35px; border-radius:14px; }
  .shop-order strong { font-size:22px; }
  .shop-order>div>span { font-size:12px; }
  .wallet-instruction { padding:0 12px; font-size:12px; }
  .shop-wallet { padding:0 12px 16px; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-wallet>button { padding:11px 3px 8px; border-radius:12px; }
  .shop-wallet.wallet-note,.note-reference-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wallet-tabs { padding:0 12px 12px; }
  .shop-wallet .coin-photo { width:74px; height:74px; }
  .shop-wallet .hk-coin b { font-size:12px; }
  .shop-wallet>button>span:last-child { width:17px; height:17px; font-size:12px; top:2px; right:2px; }
  .payment-tray { margin:0 12px; padding:10px; }
  .money-shop .activity-controls { padding:14px 12px; gap:8px; }
  .money-shop .activity-controls button { font-size:13px; padding:9px; }
  .coin-guide { padding:14px 12px; font-size:12px; }
  .coin-reference-row { gap:12px; }
  .coin-reference-row .coin-photo { width:50px; height:50px; }
  .parent-coach,.practice-paths,.interview-tips:not(.compact) { padding:18px; border-radius:18px; }
  .parent-coach>header { gap:10px; }
  .coach-mark { width:40px; height:40px; font-size:27px; border-radius:12px; }
  .coach-card-grid,.interview-habits,.path-steps { grid-template-columns:1fr; }
  .coach-card-grid p,.coach-offline p { font-size:14px; }
  .coach-observation { gap:6px; }
  .coach-observation label { font-size:12px; padding:8px; }
  .paths-heading { flex-direction:column; align-items:flex-start; }
  .path-options { display:grid; grid-template-columns:1fr; }
  .path-options button { border-radius:12px; text-align:left; }
  .path-steps { gap:8px; }
  .path-steps>a { padding:14px; }
}
.shop-wallet button,.money-shop .activity-controls button,.money-shop summary,.practice-settings select { scroll-margin-block:100px 40px; }
html:has(.money-shop) { scroll-padding-top:100px; }
.task-stage { scroll-margin-top:90px; }
.task-stage:focus { outline:none; }