:root { --ink:#17265a; --ink2:#273b7b; --paper:#f7f8ff; --gold:#ffcf5c; --coral:#ef705c; --mint:#59cfaa; --muted:#68749c; --shadow:0 12px 28px rgba(11,25,79,.17); font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:#edf0ff; } button { font:inherit; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
#app { min-height:100vh; } .shell { min-height:100vh; max-width:850px; margin:auto; padding:calc(env(safe-area-inset-top, 0px) + 20px) max(18px, env(safe-area-inset-right, 0px)) 28px max(18px, env(safe-area-inset-left, 0px)); overflow:hidden; }
.map-page { color:white; background:radial-gradient(circle at 20% 15%,#4662b6 0,transparent 27%),linear-gradient(160deg,#15255d 0%,#273d85 65%,#17265a 100%); position:relative; } .map-page:before { content:""; position:absolute; inset:0; opacity:.22; background-image:radial-gradient(white 1px,transparent 1.5px); background-size:38px 38px; pointer-events:none; }
.topbar,.map-intro,.route,.study-head,.test-head,.result-box { position:relative; z-index:1; } .topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; } .brand { font-size:1.2rem; font-weight:900; letter-spacing:.02em; } .brand span { color:var(--gold); } .stars { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); padding:8px 12px; border-radius:99px; font-weight:800; }
.map-intro { margin:30px 0 18px; } .map-intro h1 { font-size:clamp(2rem,6vw,3rem); line-height:1.05; margin:0 0 9px; letter-spacing:-.05em; } .map-intro p { margin:0; color:#cad4ff; font-size:1rem; } .progress { margin-top:19px; background:rgba(255,255,255,.14); border-radius:99px; height:12px; overflow:hidden; } .progress i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),#ffad63); border-radius:inherit; transition:width .5s; }
.route { max-width:470px; margin:20px auto 0; padding:5px 0 10px; } .level-row { display:flex; align-items:center; gap:16px; position:relative; min-height:104px; } .level-row:not(:last-child):after { content:""; position:absolute; left:37px; top:78px; height:48px; width:5px; border-radius:9px; background:rgba(255,255,255,.25); transform:rotate(16deg); } .level-row:nth-child(even) { transform:translateX(42px); } .level-row:nth-child(even):after { transform:rotate(-17deg); }
.level-node { flex:0 0 76px; height:76px; border-radius:28px; color:var(--ink); font-size:1.65rem; font-weight:900; background:var(--gold); box-shadow:0 7px 0 #c98b37,0 12px 18px rgba(0,0,0,.2); transition:transform .2s; } .level-node:not(:disabled):hover { transform:translateY(-3px) rotate(-2deg); } .level-node.locked { background:#6976a5; box-shadow:0 7px 0 #465172; color:#dbe1ff; cursor:not-allowed; }
.level-info { flex:1; min-width:0; background:rgba(255,255,255,.12); padding:12px 15px; border-radius:18px; backdrop-filter:blur(6px); } .level-info b { display:block; font-size:1rem; } .level-info small { display:block; margin-top:4px; color:#d4dcff; } .earned { letter-spacing:1px; color:var(--gold); font-size:.9rem; min-height:1.1em; }
.study-page,.test-page,.result-page { background:var(--paper); } .nav-button { padding:10px 12px; border-radius:13px; background:white; box-shadow:0 3px 12px rgba(22,38,90,.08); color:var(--ink); font-weight:800; } .study-head,.test-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; } .study-head h2,.test-head h2 { margin:0; font-size:1.05rem; } .counter { color:var(--muted); font-weight:800; font-size:.9rem; }
.card-wrap { perspective:1300px; max-width:540px; margin:0 auto; } .card { height:min(68vh,540px); min-height:440px; position:relative; transform-style:preserve-3d; transition:transform .66s cubic-bezier(.2,.75,.2,1); } .card.flipped { transform:rotateY(180deg); } .card-face { position:absolute; inset:0; border-radius:30px; backface-visibility:hidden; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .front { background:#fff; } .back { background:linear-gradient(145deg,#1b2c67,#304999); color:white; transform:rotateY(180deg); padding:27px; justify-content:center; text-align:center; }
.scene { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; background:linear-gradient(#dbe9ff 0 60%,#bce7c9 60%); } .scene:before { content:""; position:absolute; width:110%; height:85px; bottom:-55px; background:#84c792; border-radius:50% 50% 0 0; } .scene .place { position:absolute; top:23px; left:24px; font-weight:800; font-size:.8rem; color:#426587; background:#fff9; padding:7px 10px; border-radius:99px; } .scene .sky { position:absolute; top:35px; right:27px; font-size:2.2rem; animation:float 2.8s ease-in-out infinite; } .scene .person { font-size:clamp(7rem,24vw,12rem); line-height:1; position:relative; z-index:1; filter:drop-shadow(0 10px 5px rgba(22,62,87,.17)); animation:bob 2.5s ease-in-out infinite; } .scene .prop { position:absolute; z-index:2; bottom:25%; margin-left:120px; font-size:3.3rem; animation:float 2.4s ease-in-out infinite reverse; } @keyframes bob { 50% { transform:translateY(-8px); }} @keyframes float { 50% { transform:translateY(7px) rotate(4deg); }}
.prompt { padding:26px 26px 31px; text-align:center; } .prompt h1 { margin:0; font-size:clamp(1.75rem,6.5vw,2.4rem); line-height:1.24; } .tap { margin:14px 0 0; color:var(--muted); font-weight:700; font-size:.9rem; } .tap span { display:inline-block; animation:pulse 1.5s infinite; } @keyframes pulse { 50% { transform:scale(1.18); opacity:.65; }}
.english { margin:0; font-size:clamp(2rem,8vw,3.35rem); line-height:1.15; letter-spacing:-.04em; } .speak { align-self:center; margin:22px 0; width:56px; height:56px; border-radius:50%; background:var(--gold); color:var(--ink); font-size:1.45rem; box-shadow:0 5px 0 #c99039; } .example { padding:17px; border-radius:16px; background:rgba(255,255,255,.12); font-size:1rem; line-height:1.55; } .example small { display:block; color:#d7defe; margin-top:5px; }
.rating-row { max-width:540px; margin:18px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .rating { color:white; padding:15px 6px; border-radius:17px; font-weight:900; min-height:54px; } .again { background:#e87065; } .hard { background:#e7a845; } .easy { background:#42b98f; } .rating:disabled { opacity:.48; cursor:not-allowed; }
.test-card { max-width:560px; margin:0 auto; background:white; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); } .test-card .scene { height:240px; flex:none; } .question { padding:19px 22px 23px; text-align:center; } .question h1 { margin:0; font-size:clamp(1.45rem,5vw,2rem); } .options { max-width:560px; margin:17px auto; display:grid; grid-template-columns:1fr 1fr; gap:11px; } .option { min-height:67px; border-radius:16px; padding:10px; background:white; color:var(--ink); box-shadow:0 5px 13px rgba(22,38,90,.09); font-weight:800; font-size:.95rem; } .option.correct { background:#55c99b; color:#073b30; } .option.wrong { background:#f59b8e; color:#6b1820; } .option:disabled { cursor:default; }
.result-page { display:grid; place-items:center; } .result-box { width:min(100%,480px); text-align:center; background:white; border-radius:32px; padding:32px 24px; box-shadow:var(--shadow); } .medal { font-size:5rem; line-height:1; } .result-box h1 { margin:14px 0 8px; font-size:2rem; } .result-box p { color:var(--muted); line-height:1.6; } .score { font-size:3rem; font-weight:900; color:var(--ink); margin:16px 0; } .big-stars { color:var(--gold); font-size:2rem; letter-spacing:5px; } .primary { width:100%; margin-top:20px; padding:16px; border-radius:17px; background:var(--ink); color:white; font-weight:900; } .secondary { width:100%; margin-top:10px; padding:14px; border-radius:17px; background:#e8ecfa; color:var(--ink); font-weight:800; }
.mode-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin:22px 0; } .mode-tile { min-height:124px; padding:16px; text-align:left; border-radius:21px; color:#fff; box-shadow:0 9px 16px rgba(7,17,57,.18); transition:transform .18s; } .mode-tile:hover { transform:translateY(-3px); } .mode-tile b,.mode-tile small,.mode-tile i { display:block; } .mode-tile b { font-size:1.06rem; } .mode-tile small { margin-top:9px; font-size:.78rem; line-height:1.35; color:#edf0ff; } .mode-tile i { margin-top:8px; font-size:.75rem; font-style:normal; font-weight:800; color:var(--gold); } .mode-tile.word { background:linear-gradient(135deg,#4c65c6,#2b3d85); } .mode-tile.talk { background:linear-gradient(135deg,#d75d72,#a73d6e); } .mode-tile.listen { background:linear-gradient(135deg,#229b9b,#176a84); } .mode-tile.daily { background:linear-gradient(135deg,#d89139,#bd5c43); } .route-panel { position:relative; z-index:1; margin:22px -3px 0; padding:20px 13px 4px; border-radius:25px; background:rgba(9,20,63,.24); } .route-title { display:flex; justify-content:space-between; align-items:center; margin:0 7px 5px; } .route-title h2 { font-size:1rem; margin:0; } .route-title span { color:#d5ddff; font-size:.8rem; }
.mode-hero { display:flex; gap:16px; align-items:center; max-width:560px; margin:12px auto 19px; padding:18px; background:linear-gradient(135deg,#f7dfe7,#eee5ff); border-radius:23px; } .mode-hero>span { font-size:3.2rem; } .mode-hero h1 { margin:0 0 5px; font-size:1.2rem; } .mode-hero p { margin:0; color:var(--muted); line-height:1.5; font-size:.88rem; } .scene-list { max-width:560px; margin:auto; display:grid; gap:10px; } .scene-item { display:flex; align-items:center; gap:13px; width:100%; padding:14px; border-radius:19px; background:#fff; color:var(--ink); text-align:left; box-shadow:0 5px 15px rgba(22,38,90,.08); } .scene-item>span { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:#edf0ff; font-size:1.7rem; } .scene-item div { flex:1; } .scene-item b,.scene-item small { display:block; } .scene-item small { margin-top:4px; color:var(--muted); font-size:.77rem; } .scene-item em { font-style:normal; font-size:.78rem; color:#4770a2; font-weight:800; } .scene-locked { filter:saturate(.25); opacity:.65; cursor:not-allowed; }
.dialogue-page,.listening-page { background:linear-gradient(155deg,#f2f5ff,#f7f8ff); } .audio-stage { max-width:560px; min-height:214px; margin:0 auto; padding:23px; border-radius:29px; text-align:center; color:white; background:radial-gradient(circle at 52% 20%,#6e86da,#2a397b 72%); box-shadow:var(--shadow); } .audio-stage.challenge { background:radial-gradient(circle at 52% 20%,#42a8a7,#176376 72%); } .audio-art { font-size:4rem; line-height:1; margin:4px 0 8px; animation:bob 2.1s ease-in-out infinite; } .audio-stage p { margin:0 0 12px; color:#e2e8ff; font-weight:700; } .replay { padding:11px 16px; border-radius:99px; color:#17265a; background:#ffcf5c; font-weight:900; box-shadow:0 4px 0 #bd8437; } .sound-bars { display:flex; align-items:center; justify-content:center; gap:4px; height:27px; margin-top:14px; } .sound-bars i { display:block; width:4px; height:9px; border-radius:5px; background:#bcd7ff; animation:wave .8s ease-in-out infinite alternate; } .sound-bars i:nth-child(2){height:18px;animation-delay:.15s}.sound-bars i:nth-child(3){height:25px;animation-delay:.3s}.sound-bars i:nth-child(4){height:16px;animation-delay:.45s}.sound-bars i:nth-child(5){height:11px;animation-delay:.6s}@keyframes wave{to{transform:scaleY(.45);opacity:.55}}.difficulty { margin-top:12px; font-size:.8rem; color:#d1f3f2; font-weight:800; }
.listen-prompt,.answer-reveal { max-width:560px; margin:18px auto 12px; text-align:center; } .listen-prompt h1 { margin:0; font-size:1.25rem; } .meaning-options { max-width:560px; margin:0 auto; display:grid; gap:10px; } .meaning-options button { min-height:58px; border-radius:16px; padding:12px 16px; text-align:left; background:#fff; color:var(--ink); box-shadow:0 5px 13px rgba(22,38,90,.08); font-weight:800; } .meaning-options button:before { content:'○'; display:inline-block; margin-right:10px; color:#8594c4; } .meaning-options button:hover { background:#edf0ff; } .gentle { text-align:center; color:var(--muted); font-size:.82rem; } .hint { display:inline-block; margin:12px 0 0; padding:10px 13px; border-radius:13px; background:#fff2cf; color:#755719; font-size:.86rem; line-height:1.4; } .reveal-line,.answer-reveal { padding:17px; border-radius:18px; background:#e4f8ee; color:#164b3d; } .reveal-line b,.reveal-line small,.answer-reveal b,.answer-reveal small { display:block; } .reveal-line b,.answer-reveal b { font-size:1.23rem; } .reveal-line small,.answer-reveal small { margin-top:6px; color:#497368; } .mini-speak { margin-top:11px; padding:8px 12px; border-radius:99px; background:#fff; color:#1b725c; font-weight:800; } .next-line { display:block; max-width:560px; margin:16px auto; }
@media (max-width:470px) { .shell { padding-top:calc(env(safe-area-inset-top, 0px) + 16px); } .level-row:nth-child(even) { transform:translateX(18px); } .card { min-height:420px; height:66vh; } .scene .person { font-size:8.7rem; } .back { padding:20px; } .options { gap:9px; } .option { font-size:.85rem; } }
@media (min-width:700px) { .route { margin-top:30px; } .map-intro { margin-top:48px; } }

/* V3 Adventure additions: extend the existing visual system without replacing it. */
.mode-tile.adventure { background:linear-gradient(135deg,#7551c7,#304a9d); }
.mode-tile.review { background:linear-gradient(135deg,#4b8d7a,#25646a); }
.xp { color:#dbe4ff; font-size:.78rem; white-space:nowrap; }
.weak-box { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px 12px; margin:0 0 18px; padding:13px 15px; border-radius:17px; background:rgba(255,255,255,.11); color:#e0e7ff; font-size:.81rem; line-height:1.5; }
.weak-box b { color:var(--gold); }
.adventure-hero { background:linear-gradient(135deg,#e6ddff,#dcecff); }
.adventure-page { background:linear-gradient(155deg,#f4f0ff,#f7f8ff); }
.adventure-stage { max-width:560px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:20px; border-radius:28px; background:linear-gradient(135deg,#563a99,#304986); color:white; box-shadow:var(--shadow); }
.npc { flex:0 0 82px; display:grid; place-items:center; width:82px; height:82px; border:3px solid rgba(255,255,255,.48); border-radius:28px; background:rgba(255,255,255,.15); font-size:3.15rem; animation:bob 2.2s ease-in-out infinite; }
.boss-npc { background:linear-gradient(135deg,#ffcd62,#ec7c4e); }
.npc-bubble { min-width:0; flex:1; }
.npc-bubble b { display:inline-block; padding:4px 8px; border-radius:99px; background:rgba(255,255,255,.18); font-size:.73rem; }
.npc-bubble p { margin:8px 0 11px; color:#e7ebff; line-height:1.45; font-weight:700; }
.adventure-task { max-width:560px; margin:18px auto 12px; text-align:center; }
.adventure-task p { margin:0; font-size:1.1rem; font-weight:900; }
.adventure-task small { display:inline-block; margin-top:9px; padding:7px 10px; border-radius:10px; background:#fff1c9; color:#765519; font-weight:800; }
.speak-out { display:block; width:min(100%,560px); margin:13px auto 0; padding:14px; border-radius:17px; background:#e7e1ff; color:#473583; font-weight:900; }
.adventure-page #av-next { display:none; }
.combo-line { min-height:1.2em; margin:14px 0 0; text-align:center; color:#d26b31; font-size:.86rem; font-weight:900; }
@media (max-width:470px) { .stars { padding:7px 9px; font-size:.85rem; } .v3-grid .mode-tile { min-height:112px; padding:13px; } .adventure-stage { padding:16px; gap:11px; } .npc { flex-basis:68px; width:68px; height:68px; border-radius:22px; font-size:2.55rem; } }

/* V4: original comic-adventure skin. The supplied portrait remains an unscaled photo layer. */
:root { --sky:#0779db; --blue:#097eea; --deep:#08346f; --orange:#ff8a1f; --yellow:#ffd34d; --cream:#fffaf0; --line:#0a3566; --game-shadow:0 7px 0 rgba(4,48,100,.74),0 14px 24px rgba(4,34,76,.22); }
.map-page { background-color:#083d79; background-image:linear-gradient(180deg,rgba(3,19,56,.12),rgba(4,22,65,.76) 55%,#062e62 100%),url('assets/home-photo.jpg'); background-size:cover; background-position:center 42%; background-repeat:no-repeat; isolation:isolate; }
.map-page:before { opacity:.28; background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.7px); }
.map-page:after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,transparent 20%,rgba(3,24,65,.22) 50%,rgba(2,25,58,.52)); }
.map-page .topbar,.map-page .map-intro,.map-page .mode-grid,.map-page .weak-box,.map-page .route-panel { z-index:1; }
.map-page .topbar { padding:4px 3px; }
.map-page .brand { text-shadow:0 2px 0 #063568,0 4px 10px rgba(0,0,0,.45); }
.map-page .stars { border:1px solid rgba(255,255,255,.44); box-shadow:0 3px 10px rgba(0,0,0,.16); }
.map-intro { max-width:500px; margin-top:clamp(88px,18vw,155px); }
.map-intro h1 { max-width:8em; color:#fff; text-shadow:3px 3px 0 #07376d,0 7px 18px rgba(0,0,0,.4); font-family:"Microsoft YaHei",system-ui,sans-serif; font-weight:1000; }
.map-intro p { color:#fff8de; font-weight:800; text-shadow:0 2px 5px rgba(0,0,0,.55); }
.map-page .progress { border:2px solid rgba(255,255,255,.42); box-shadow:inset 0 2px 5px rgba(0,0,0,.24); }
.map-page .progress i { background:linear-gradient(90deg,#ffe04d,#ff911b); }
.mode-grid.v4-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.mode-tile.game-card { position:relative; overflow:hidden; min-height:164px; padding:0; border:2px solid rgba(255,255,255,.9); border-radius:20px; text-align:left; color:#fff; background:#075aa8; box-shadow:var(--game-shadow); isolation:isolate; }
.mode-tile.game-card:before { content:""; position:absolute; inset:0; z-index:-1; opacity:.95; background:linear-gradient(145deg,rgba(255,255,255,.2),transparent 44%),linear-gradient(0deg,rgba(4,20,56,.9),rgba(3,24,67,.02) 72%); }
.mode-tile.game-card:after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 28%); pointer-events:none; }
.mode-tile.game-card:hover { transform:translateY(-3px) scale(1.012); }
.game-card .tile-art { display:block; position:absolute; inset:0 0 35px; overflow:hidden; }
.game-card .tile-art .semantic-art { position:absolute; inset:0; min-height:0; padding:0; background:transparent; }
.game-card .tile-copy { position:absolute; z-index:2; left:12px; right:10px; bottom:10px; }
.game-card b { font-size:1.03rem; color:white; text-shadow:2px 2px 0 #063567; }
.game-card small { margin-top:3px; color:#eef8ff; font-weight:700; font-size:.73rem; }
.game-card i { position:absolute; right:0; bottom:0; font-size:.66rem; color:#fff1a5; text-shadow:1px 1px 0 #063567; }
.game-card.adventure { background:linear-gradient(145deg,#0bc3ff,#126cde); }.game-card.daily { background:linear-gradient(145deg,#ffbf28,#fa6c25); }.game-card.talk { background:linear-gradient(145deg,#f96c4e,#b93f70); }.game-card.listen { background:linear-gradient(145deg,#17afca,#0758a5); }.game-card.word { background:linear-gradient(145deg,#349eea,#0751a1); }.game-card.review { background:linear-gradient(145deg,#16a77b,#087c78); }.game-card.progress-card { background:linear-gradient(145deg,#8557dc,#35459e); }
.tile-svg { width:100%; height:100%; display:block; filter:drop-shadow(0 5px 3px rgba(1,35,75,.24)); }
.tile-cloud { opacity:.92; }.tile-star { fill:#ffe146; stroke:#a75300; stroke-width:3; }.tile-ink { stroke:#0a3566; stroke-width:5; stroke-linejoin:round; stroke-linecap:round; }.tile-skin { fill:#ffc99d; }.tile-shirt { fill:#ff7f28; }.tile-blue { fill:#42c8f4; }.tile-light { fill:#fdfbf2; }.tile-dark { fill:#092f61; }
.weak-box { border:1px solid rgba(255,255,255,.3); background:rgba(6,38,85,.56); backdrop-filter:blur(10px); }
.route-panel { border:1px solid rgba(255,255,255,.25); background:rgba(5,35,79,.72); backdrop-filter:blur(12px); }
.route-title h2 { color:#fff; }.route-title span { color:#ffeebb; }.level-info { border:1px solid rgba(255,255,255,.18); }

/* Semantic illustrations: all are original inline SVG with one comic visual language. */
.semantic-art { display:grid; place-items:center; width:100%; height:100%; min-height:100px; padding:12px; color:#103c6e; background:linear-gradient(145deg,#c9efff,#fef4ce 70%); }
.semantic-art svg { width:min(100%,210px); height:min(100%,180px); overflow:visible; filter:drop-shadow(0 8px 5px rgba(8,67,119,.19)); }
.semantic-art .s-line { stroke:#0b4177; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }.semantic-art .s-skin { fill:#ffd0a6; }.semantic-art .s-hair { fill:#173557; }.semantic-art .s-shirt { fill:#ff7730; }.semantic-art .s-blue { fill:#38bce9; }.semantic-art .s-yellow { fill:#ffd84a; }.semantic-art .s-white { fill:#fffdf6; }.semantic-art .s-green { fill:#63bf77; }.semantic-art .s-red { fill:#ef5c4e; }.semantic-art .s-dark { fill:#124c7e; }
.semantic-art.mini { width:74px; height:74px; min-height:74px; padding:3px; border-radius:18px; flex:0 0 74px; border:2px solid rgba(255,255,255,.35); }
.semantic-art.mini svg { width:66px; height:66px; }
.scene { background:linear-gradient(155deg,#bcecff,#effbff 55%,#a8e0a5 56%); }
.scene:before { background:#65be82; }.scene .place { z-index:4; color:#0d4c85; border:1px solid #acdfff; }.scene .semantic-art { position:absolute; inset:0; padding:18px; background:transparent; }.scene .sky,.scene .person,.scene .prop { display:none; }
.card-face.front .scene { min-height:220px; }.word-answer { display:flex; align-items:center; gap:18px; text-align:left; }.word-answer .english { flex:1; }.word-answer .phonetic { display:block; margin-top:5px; font-size:.9rem; color:#d9ecff; font-weight:700; }
.study-page,.test-page,.result-page,.dialogue-page,.listening-page,.adventure-page { background:linear-gradient(160deg,#eff8ff,#fff9e8 54%,#d7f0ff); }
.study-head,.test-head { padding:5px 2px 13px; border-bottom:3px solid #d5eafa; }.nav-button { border:2px solid #a9d9f2; box-shadow:0 4px 0 #8dc7e7; }.card-face { border:3px solid #fff; }.front .prompt { background:#fffdf7; }.front .prompt h1 { color:#123d70; }.back { background:linear-gradient(145deg,#0752a6,#0b8ee3); }.speak { background:#ffd74c; }.rating { border:2px solid rgba(255,255,255,.8); box-shadow:0 5px 0 rgba(11,52,104,.4); }
.mode-hero,.scene-item,.audio-stage,.adventure-stage { border:2px solid rgba(255,255,255,.8); box-shadow:var(--game-shadow); }
.mode-hero { background:linear-gradient(135deg,#9ce4ff,#fff6bd); }.scene-item { border-color:#b8dcf2; }.scene-item>span { background:linear-gradient(145deg,#d2f3ff,#ffe9a7); border:2px solid #8acdea; }
.audio-stage { position:relative; overflow:hidden; background:linear-gradient(135deg,#0389e4,#0751a7); }.audio-stage:before,.adventure-stage:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.6) 0 3px,transparent 4px),radial-gradient(circle at 74% 24%,rgba(255,255,255,.5) 0 5px,transparent 6px),linear-gradient(145deg,rgba(255,255,255,.18),transparent 50%); pointer-events:none; }.audio-stage>* { position:relative; z-index:1; }
.adventure-stage { position:relative; overflow:hidden; background:linear-gradient(140deg,#0c94e7,#0a4e9d 72%); }.adventure-stage:after { content:""; position:absolute; right:-12px; bottom:-20px; width:155px; height:85px; border-radius:100% 0 0; background:rgba(255,215,74,.3); transform:rotate(-12deg); }.npc { position:relative; z-index:1; background:linear-gradient(145deg,#fff5c2,#59d8f8); border-color:#fff; color:transparent; }.npc .npc-art { width:100%; height:100%; }.npc-bubble { position:relative; z-index:1; }.npc-bubble p strong { font-size:1.16rem; color:white; }.meaning-options button { border:2px solid #b6d7ed; box-shadow:0 4px 0 #9ec5df; }.meaning-options button:before { content:'A'; display:inline-grid; place-items:center; width:25px; height:25px; margin-right:10px; border-radius:50%; color:white; background:#0d78cf; font-weight:900; }.meaning-options button:nth-child(2):before { content:'B'; background:#f49a31; }.meaning-options button:nth-child(3):before { content:'C'; background:#4e9c7d; }.speak-out { border:2px solid #a7d5ff; background:linear-gradient(135deg,#0d93f0,#0871d3); color:#fff; box-shadow:0 5px 0 #07509c; }.adventure-task p { color:#0b4177; }.adventure-task { min-height:26px; }.replay { background:linear-gradient(135deg,#ffe86a,#ffb72f); }
.progress-panel { max-width:560px; margin:auto; padding:20px; border:2px solid #bde0f6; border-radius:27px; background:#fffdf7; box-shadow:var(--game-shadow); }.progress-panel h1 { margin:0 0 6px; }.progress-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:17px; }.progress-stat { padding:14px; border-radius:18px; color:#07386d; background:linear-gradient(145deg,#d4f3ff,#fff1bc); border:1px solid #b7ddf0; font-weight:900; }.progress-stat b { display:block; font-size:1.5rem; }.progress-stat small { color:#316187; font-weight:700; }
@media (max-width:600px) { .map-page { background-image:linear-gradient(180deg,rgba(3,19,56,.14),rgba(4,22,65,.2) 29%,#062e62 53%,#062e62 100%),url('assets/home-photo.jpg'); background-size:100% auto; background-position:center top; }.map-intro { margin-top:clamp(234px,64vw,390px); }.map-intro h1 { font-size:clamp(1.95rem,8.5vw,2.7rem); }.mode-grid.v4-grid { gap:10px; }.mode-tile.game-card { min-height:146px; border-radius:18px; }.game-card .tile-copy { left:10px; bottom:8px; }.game-card b { font-size:.95rem; }.game-card small { font-size:.68rem; }.semantic-art svg { width:160px; height:145px; }.word-answer { gap:10px; }.semantic-art.mini { width:62px; height:62px; min-height:62px; flex-basis:62px; }.semantic-art.mini svg { width:55px; height:55px; } }
.npc .npc-art { min-height:0; padding:0; background:transparent; }
.npc-art .s-line { stroke:#0b4177; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }.npc-art .s-skin { fill:#ffd0a6; }.npc-art .s-hair { fill:#173557; }.npc-art .s-shirt { fill:#ff7730; }.npc-art .s-blue { fill:#38bce9; }.npc-art .s-yellow { fill:#ffd84a; }.npc-art .s-white { fill:#fffdf6; }.npc-art .s-green { fill:#63bf77; }.npc-art .s-red { fill:#ef5c4e; }.npc-art .s-dark { fill:#124c7e; }

.meaning-options button.feedback-selected { color:#fff; transform:translateY(2px); box-shadow:0 2px 0 rgba(5,42,92,.35); }.meaning-options button.feedback-selected:before { color:#0a4a78; background:#fff; }.meaning-options button.feedback-correct { border-color:#16855f; background:linear-gradient(135deg,#23b77d,#11845d); }.meaning-options button.feedback-wrong { border-color:#c94f4f; background:linear-gradient(135deg,#ef7466,#c94f4f); }

/* Character-led module cards and RPG HUD, using local original SVG scene artwork. */
.map-page { padding-bottom:106px; background-position:center 38%; }
.game-topbar { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 1fr 1.35fr; gap:12px; align-items:center; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.52); }
.hero-profile { display:flex; align-items:center; gap:9px; min-width:0; }.hero-profile img { width:56px; height:56px; flex:0 0 56px; object-fit:cover; object-position:32% 42%; border:2px solid #ffe363; border-radius:50%; background:#0c376f; box-shadow:0 3px 0 #071d42; }.hero-profile b,.hero-profile small { display:block; white-space:nowrap; }.hero-profile b { font-size:1rem; }.hero-profile small { margin-top:3px; color:#e5eefc; font-size:.68rem; }
.hero-level { min-width:0; }.hero-level>b { display:block; font-size:1.03rem; }.hero-level small { display:block; margin-top:3px; color:#eaf2ff; font-weight:800; font-size:.7rem; }.hero-xp { height:11px; margin-top:4px; overflow:hidden; border:1.5px solid rgba(255,255,255,.78); border-radius:99px; background:rgba(2,21,54,.74); box-shadow:inset 0 2px 3px rgba(0,0,0,.38); }.hero-xp i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffdb45,#ff8228); box-shadow:0 0 10px #ffbc3e; }
.hero-score { display:grid; grid-template-columns:25px 1fr 25px 1fr; align-items:center; gap:2px 5px; min-width:0; }.hero-score>span { font-size:1.45rem; filter:drop-shadow(0 2px 1px #16325d); }.hero-score>b { font-size:.7rem; line-height:1.05; }.hero-score small { display:block; margin-top:3px; color:#ffd950; font-size:1.08rem; }
.map-intro { position:relative; min-height:330px; max-width:none; margin:28px 0 8px; padding:20px 18px; }.map-intro h1 { position:relative; z-index:1; max-width:6.2em; margin:0; color:#fff; font-family:"STKaiti","KaiTi","Comic Sans MS",cursive; font-size:clamp(2.8rem,8vw,4.7rem); line-height:.97; letter-spacing:.02em; text-shadow:3px 4px 0 #12376b,0 8px 18px rgba(0,0,0,.48); transform:rotate(-3deg); }.hero-en { position:relative; z-index:1; margin:18px 0 0 4px !important; color:#ebeffd !important; font-family:"Comic Sans MS",cursive; font-size:.89rem !important; font-style:italic; letter-spacing:.12em; line-height:1.35; transform:rotate(-5deg); }.hero-script { position:absolute !important; top:88px; right:34px; z-index:1; color:#fff !important; font-family:"STKaiti","KaiTi",cursive; font-size:1.22rem !important; line-height:1.4; text-align:center; transform:rotate(-9deg); opacity:.94; }.hero-bubble { position:absolute; z-index:3; left:18px; bottom:9px; padding:12px 17px; color:#121b2f; background:#fffdf5; border:3px solid #111d35; border-radius:52% 48% 48% 54%; box-shadow:0 4px 0 rgba(0,0,0,.3); font-weight:1000; line-height:1.3; text-align:center; transform:rotate(-5deg); }.hero-bubble:after { content:""; position:absolute; right:14px; bottom:-18px; width:27px; height:28px; background:#fffdf5; border-right:3px solid #111d35; border-bottom:3px solid #111d35; transform:skew(-25deg) rotate(15deg); }
.comic-grid { position:relative; z-index:3; margin-top:0 !important; }.mode-tile.game-card { min-height:228px; border:1.5px solid #ffc95d; background:#0a254b; box-shadow:0 3px 0 #f0b84d,0 9px 17px rgba(0,0,0,.38); }.mode-tile.game-card:before { z-index:1; background:linear-gradient(0deg,rgba(2,13,36,.98) 0%,rgba(2,13,36,.85) 38%,rgba(2,13,36,0) 70%); }.game-card .tile-art { inset:0; }.game-card .tile-art .semantic-art { display:none; }.game-card .tile-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 62%; }.game-card.adventure .tile-art img { object-position:center 46%; }.game-card.word .tile-art img { object-position:center 48%; }.game-card.listen .tile-art img { object-position:center 46%; }.game-card.dialogue .tile-art img { object-position:center 46%; }.game-card.daily5 .tile-art img { object-position:center 46%; }.game-card.review .tile-art img { object-position:center 42%; }.game-card.progress .tile-art img { object-position:center 48%; }.game-card.settings .tile-art img { object-position:center 50%; }.game-card .tile-copy { z-index:2; left:12px; right:10px; bottom:10px; }.game-card b { color:#fff; font-size:1.08rem; text-shadow:2px 2px 0 #061a3e; }.game-card small { max-width:82%; color:#dce8f8; font-size:.74rem; text-shadow:1px 1px 0 #061a3e; }.game-card i { right:30px; color:#ffe054; }.game-card em { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#10264b; background:#fff; box-shadow:0 2px 0 #a9b6c4; font-size:1.6rem; font-style:normal; line-height:1; }
.game-nav { position:fixed; z-index:20; left:50%; bottom:max(9px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); align-items:end; width:min(calc(100% - 20px),830px); height:73px; padding:7px 10px 5px; border:1px solid rgba(255,201,91,.62); border-radius:22px; background:rgba(3,11,29,.94); box-shadow:0 -2px 20px rgba(0,0,0,.28); transform:translateX(-50%); backdrop-filter:blur(12px); }.game-nav button { display:grid; justify-items:center; gap:2px; height:55px; color:#d7ddea; background:transparent; font-size:1.35rem; }.game-nav button small { font-size:.67rem; font-weight:800; }.game-nav button.active { color:#ffb941; }.game-nav .energy { width:65px; height:65px; margin:-27px auto 0; border:3px solid #ffe473; border-radius:50%; color:#d84916; background:radial-gradient(circle at 35% 25%,#fff6a0,#ffbd36 48%,#f16d20 75%); box-shadow:0 0 0 4px rgba(255,139,32,.2),0 0 22px #ff9d22,0 5px 0 #a74418; font-size:2rem; }
.settings-panel { text-align:center; }.settings-panel img { display:block; width:100%; max-width:330px; max-height:220px; margin:0 auto 14px; object-fit:cover; border:2px solid #b7dbef; border-radius:20px; }
.offline-download { margin:18px 0 2px; padding:14px; border:1px solid #c3dfef; border-radius:17px; background:#f4fbff; text-align:left; }.offline-download>b,.offline-download>small { display:block; }.offline-download>b { color:#07386d; font-size:.95rem; }.offline-download>small { min-height:1.35em; margin-top:5px; color:#52718d; font-size:.78rem; line-height:1.35; }.offline-download-button { width:100%; margin-top:11px; }.offline-download-button:disabled { opacity:.68; cursor:wait; }.offline-media-note { max-width:560px; margin:12px auto; padding:10px 13px; border-radius:13px; color:#755719; background:#fff2cf; font-size:.84rem; font-weight:700; text-align:center; }

/* Shared TopNav: topBack(), study cards, tests, dialogue, listening and adventure all use this header. */
:root { --top-nav-clearance: max(24px, calc(env(safe-area-inset-top, 0px) + 8px)); }
.study-page,.test-page,.dialogue-page,.listening-page,.adventure-page { padding-top:0; }
.study-head,.test-head {
  display:grid;
  grid-template-columns:minmax(48px,max-content) minmax(0,1fr) minmax(48px,max-content);
  align-items:center;
  column-gap:10px;
  box-sizing:border-box;
  /* .shell owns the horizontal safe insets; keep this header from applying them twice in landscape. */
  margin:0 0 18px;
  padding:var(--top-nav-clearance) 2px 13px;
}
.study-head .nav-button,.test-head .nav-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-inline-size:48px;
  min-block-size:48px;
  margin:0;
  padding:0 12px;
  touch-action:manipulation;
}
.study-head h2,.test-head h2 { min-width:0; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.study-head .counter,.test-head .counter { display:flex; align-items:center; justify-content:flex-end; min-block-size:44px; min-inline-size:48px; text-align:right; }
@media (max-width:470px) {
  :root { --top-nav-clearance: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); }
  .study-head,.test-head { column-gap:6px; }
  .study-head h2,.test-head h2 { font-size:.98rem; }
  .study-head .counter,.test-head .counter { font-size:.75rem; }
}

/* Clean three-column word route. Old wp/wr layers are intentionally not reused. */
.clean-route-shell { position:relative; z-index:2; isolation:isolate; overflow:hidden; margin:34px -18px -28px; padding:23px 13px 160px; border-radius:0; color:#fff; background:linear-gradient(180deg,rgba(5,43,103,.03),rgba(4,34,88,.32) 7%,rgba(3,26,76,.76) 18%,#041d52 82%); }
.clean-route-shell:before { content:""; position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at 12% 2%,rgba(63,166,255,.27),transparent 25%),radial-gradient(ellipse at 89% 22%,rgba(58,146,255,.18),transparent 21%),radial-gradient(rgba(206,239,255,.42) 1px,transparent 1.4px); background-size:auto,auto,38px 38px; opacity:.8; }.clean-route-shell:after { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:92px; background:linear-gradient(180deg,rgba(3,22,66,0),rgba(3,26,76,.68) 72%,rgba(3,26,76,.95)); pointer-events:none; }
.cr-header { position:relative; display:flex; justify-content:space-between; align-items:flex-start; min-height:91px; max-width:760px; margin:0 auto; }.cr-title { display:block; width:min(50%,278px); height:auto; filter:drop-shadow(0 5px 2px rgba(0,0,0,.42)); }.cr-subtitle { display:block; width:min(74%,424px); height:auto; margin:-9px 0 8px 3%; filter:drop-shadow(0 4px 3px rgba(0,0,0,.28)); }
.cr-map { position:relative; max-width:760px; margin:auto; padding:7px 0 96px; }.cr-row { position:relative; display:grid; grid-template-columns:minmax(105px,24%) minmax(78px,18%) 1fr; align-items:center; min-height:142px; }.cr-route-column { position:relative; display:grid; place-items:center; min-height:139px; }.cr-path { position:absolute; z-index:-1; left:7px; top:83px; width:86px; height:auto; transform:rotate(67deg); transform-origin:center; filter:drop-shadow(0 0 7px rgba(96,221,255,.82)); }.cr-row:nth-child(even) .cr-path { transform:scaleX(-1) rotate(67deg); }.cr-node { width:118px; height:118px; padding:0; background:transparent; filter:drop-shadow(0 7px 9px rgba(0,0,0,.42)); transition:transform .2s ease,filter .2s ease; }.cr-node img { display:block; width:100%; height:100%; object-fit:contain; }.cr-node:not(:disabled):hover { transform:translateY(-4px) scale(1.035); }.cr-available .cr-node { animation:cr-current-pulse 1.6s ease-in-out infinite; filter:drop-shadow(0 0 15px #ffc02e) drop-shadow(0 7px 9px rgba(0,0,0,.42)); }.cr-passed .cr-node { filter:drop-shadow(0 0 13px #ffda55) drop-shadow(0 7px 9px rgba(0,0,0,.42)); }.cr-locked { filter:saturate(.72) brightness(.8); }@keyframes cr-current-pulse { 50% { transform:scale(1.055); filter:drop-shadow(0 0 24px #ffcd33) drop-shadow(0 7px 9px rgba(0,0,0,.42)); } }
.cr-character-column { position:relative; align-self:stretch; min-width:0; }.cr-character { position:absolute; z-index:1; left:50%; bottom:7px; width:112px; max-height:121px; object-fit:contain; object-position:bottom center; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(2px 4px 3px rgba(0,0,0,.3)); }.cr-bag { position:absolute; z-index:0; right:-8px; bottom:8px; width:38px; height:auto; opacity:.88; }
.cr-content-column { position:relative; min-width:0; min-height:113px; padding:15px 104px 12px 18px; overflow:hidden; border:2px solid #5fbdff; border-radius:24px; background:linear-gradient(105deg,rgba(11,72,154,.96),rgba(2,23,69,.98)); box-shadow:inset 0 1px rgba(255,255,255,.3),0 6px 17px rgba(0,7,38,.36); }.cr-available .cr-content-column { border-color:#ffba35; box-shadow:inset 0 1px rgba(255,255,255,.5),0 0 19px rgba(255,151,26,.82),0 6px 17px rgba(0,7,38,.36); }.cr-passed .cr-content-column { border-color:#ffd65c; box-shadow:inset 0 1px rgba(255,255,255,.5),0 0 15px rgba(255,209,62,.46),0 6px 17px rgba(0,7,38,.36); }.cr-copy { position:relative; z-index:2; display:flex; flex-direction:column; min-height:83px; }.cr-copy>b { font-size:clamp(.93rem,3.1vw,1.35rem); line-height:1.18; text-shadow:0 2px 2px #061733; }.cr-copy>small { margin-top:5px; color:#dce9ff; font-size:clamp(.68rem,2.35vw,.98rem); line-height:1.2; }.cr-state { display:flex; align-items:center; gap:6px; margin-top:auto; color:#ffe185; font-size:clamp(.68rem,2.3vw,.9rem); font-weight:900; }.cr-state img { width:61px; height:19px; object-fit:contain; }.cr-locked-state { color:#cbe3ff; }.cr-locked-state img { width:19px; height:19px; }.cr-side-icon { position:absolute; right:13px; top:14px; width:61px; height:61px; object-fit:contain; opacity:.38; }.cr-action { position:absolute; z-index:3; right:9px; bottom:10px; width:min(37%,132px); padding:0; background:transparent; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); transition:transform .18s ease; }.cr-action:hover { transform:translateY(-2px) scale(1.025); }.cr-action img { display:block; width:100%; height:auto; }
.cr-island { position:absolute; z-index:-1; bottom:4px; left:11px; width:109px; height:auto; opacity:.72; }.cr-slogan { position:absolute; left:0; bottom:9px; width:106px; height:auto; transform:rotate(-7deg); filter:drop-shadow(0 5px 4px rgba(0,0,0,.42)); }.cr-bottom-scene { position:absolute; z-index:-1; right:-12px; bottom:0; width:72%; height:auto; opacity:.58; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%); mask-image:linear-gradient(90deg,transparent 0%,#000 34%); }
@media (max-width:600px) { .clean-route-shell { margin:31px -18px -28px; padding:18px 10px 145px; }.cr-header { min-height:76px; }.cr-subtitle { margin:0 0 5px 2%; }.cr-row { grid-template-columns:103px 76px 1fr; min-height:127px; }.cr-route-column { min-height:124px; }.cr-node { width:102px; height:102px; }.cr-path { left:3px; top:71px; width:79px; }.cr-character { width:91px; max-height:105px; bottom:9px; }.cr-bag { right:-10px; width:31px; }.cr-content-column { min-height:100px; padding:12px 82px 10px 13px; border-radius:20px; }.cr-copy { min-height:73px; }.cr-copy>b { font-size:.89rem; }.cr-copy>small { margin-top:4px; font-size:.66rem; }.cr-state { font-size:.65rem; }.cr-locked-state { gap:3px; white-space:nowrap; font-size:.56rem; }.cr-state img { width:53px; height:17px; }.cr-locked-state img { width:16px; height:16px; }.cr-side-icon { top:11px; right:9px; width:47px; height:47px; }.cr-action { right:7px; bottom:7px; width:37%; }.cr-island { width:88px; }.cr-slogan { width:92px; }.cr-bottom-scene { width:80%; } }

/* Final word-route scene: one visual layer per element. */
.word-route-shell { position:relative; z-index:2; isolation:isolate; overflow:hidden; margin:34px -18px -28px; padding:23px 13px 160px; border-radius:0; color:#fff; background:linear-gradient(180deg,rgba(5,43,103,.04),rgba(4,34,88,.36) 7%,rgba(3,26,76,.76) 18%,#041d52 82%); }
.word-route-shell:before { content:""; position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at 12% 2%,rgba(63,166,255,.26),transparent 25%),radial-gradient(ellipse at 89% 22%,rgba(58,146,255,.19),transparent 21%),radial-gradient(rgba(206,239,255,.46) 1px,transparent 1.4px); background-size:auto,auto,38px 38px; opacity:.8; }
.word-route-shell:after { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:92px; background:linear-gradient(180deg,rgba(3,22,66,0),rgba(3,26,76,.68) 72%,rgba(3,26,76,.95)); pointer-events:none; }
.wr-header { position:relative; display:flex; justify-content:space-between; align-items:flex-start; min-height:91px; max-width:760px; margin:0 auto; }
.wr-title { display:block; width:min(50%,278px); height:auto; filter:drop-shadow(0 5px 2px rgba(0,0,0,.42)); }
.wr-progress-image { display:block; width:min(43%,248px); height:auto; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.wr-progress-dynamic { display:flex; align-items:center; gap:8px; min-width:150px; padding:7px 14px 7px 8px; border:2px solid #9bd9ff; border-radius:99px; color:#fff; background:rgba(5,42,101,.84); box-shadow:0 0 13px rgba(77,186,255,.55); font-size:clamp(.86rem,3vw,1.22rem); font-weight:1000; text-shadow:0 2px 3px #04142f; }.wr-progress-dynamic img { width:37px; height:37px; object-fit:contain; }
.wr-subtitle { display:block; width:min(74%,424px); height:auto; margin:-9px 0 8px 3%; filter:drop-shadow(0 4px 3px rgba(0,0,0,.28)); }
.wr-map { position:relative; max-width:760px; margin:auto; padding:7px 0 96px; }
.wr-row { position:relative; display:grid; grid-template-columns:minmax(111px,27%) 1fr; align-items:center; min-height:145px; }
.wr-node-area { position:relative; display:grid; place-items:center; min-height:142px; }
.wr-path { position:absolute; z-index:-1; left:8px; top:82px; width:93px; height:auto; transform:rotate(67deg); transform-origin:center; filter:drop-shadow(0 0 7px rgba(96,221,255,.86)); }
.wr-row:nth-child(even) .wr-path { transform:scaleX(-1) rotate(67deg); }
.wr-node { width:122px; height:122px; padding:0; background:transparent; filter:drop-shadow(0 7px 9px rgba(0,0,0,.42)); transition:transform .2s ease,filter .2s ease; }.wr-node img { display:block; width:100%; height:100%; object-fit:contain; }.wr-node:not(:disabled):hover { transform:translateY(-4px) scale(1.035); }
.wr-available .wr-node { animation:wr-current-pulse 1.6s ease-in-out infinite; filter:drop-shadow(0 0 15px #ffc02e) drop-shadow(0 7px 9px rgba(0,0,0,.42)); }.wr-passed .wr-node { filter:drop-shadow(0 0 13px #ffda55) drop-shadow(0 7px 9px rgba(0,0,0,.42)); }.wr-locked { filter:saturate(.72) brightness(.8); }
@keyframes wr-current-pulse { 50% { transform:scale(1.055); filter:drop-shadow(0 0 24px #ffcd33) drop-shadow(0 7px 9px rgba(0,0,0,.42)); } }
.wr-card-area { position:relative; min-width:0; }.wr-card-image { display:block; width:100%; padding:0; border:0; border-radius:0; background:transparent; text-align:left; }.wr-card-image img { display:block; width:100%; height:auto; border:0; image-rendering:auto; }.wr-card-image:not([aria-disabled="true"]) { cursor:pointer; transition:transform .18s ease,filter .18s ease; }.wr-card-image:not([aria-disabled="true"]):hover { transform:translateY(-2px); filter:brightness(1.07); }
.wr-character { position:absolute; z-index:2; left:-103px; bottom:-1px; width:108px; max-height:129px; object-fit:contain; object-position:bottom center; pointer-events:none; filter:drop-shadow(2px 4px 3px rgba(0,0,0,.3)); }
.wr-card-dynamic { position:relative; display:flex; min-height:112px; padding:15px 108px 13px 23px; overflow:hidden; border:2px solid #5fbdff; border-radius:24px; background:linear-gradient(105deg,rgba(11,72,154,.94),rgba(2,23,69,.97)); box-shadow:inset 0 1px rgba(255,255,255,.28),0 6px 17px rgba(0,7,38,.36); }.wr-card-dynamic>div { display:flex; flex-direction:column; gap:5px; }.wr-card-dynamic b { font-size:clamp(.95rem,3.3vw,1.35rem); }.wr-card-dynamic small { color:#dce9ff; font-size:clamp(.72rem,2.6vw,.98rem); }.wr-card-dynamic span { display:flex; align-items:center; gap:6px; margin-top:auto; color:#ffe185; font-size:.82rem; font-weight:900; }.wr-card-dynamic span img { width:61px; height:19px; object-fit:contain; }.wr-card-dynamic.wr-available { border-color:#ffba35; box-shadow:inset 0 1px rgba(255,255,255,.52),0 0 19px rgba(255,151,26,.8),0 6px 17px rgba(0,7,38,.36); }.wr-card-dynamic.wr-passed { border-color:#ffd65c; box-shadow:inset 0 1px rgba(255,255,255,.52),0 0 15px rgba(255,209,62,.45),0 6px 17px rgba(0,7,38,.36); }.wr-dynamic-icon { position:absolute; right:15px; top:15px; width:58px; height:58px; object-fit:contain; opacity:.32; }.wr-status-button { position:absolute; right:11px; bottom:10px; width:125px; padding:0; background:transparent; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); }.wr-status-button img { display:block; width:100%; height:auto; }
.wr-slogan { position:absolute; left:-2px; bottom:10px; width:108px; height:auto; transform:rotate(-7deg); filter:drop-shadow(0 5px 4px rgba(0,0,0,.42)); }.wr-bottom-scene { position:absolute; z-index:-1; right:-12px; bottom:0; width:72%; height:auto; opacity:.58; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%); mask-image:linear-gradient(90deg,transparent 0%,#000 34%); }
@media (max-width:600px) { .word-route-shell { margin:31px -18px -28px; padding:18px 10px 145px; }.wr-header { min-height:76px; }.wr-subtitle { margin:0 0 5px 2%; }.wr-row { grid-template-columns:105px 1fr; min-height:129px; }.wr-node-area { min-height:126px; }.wr-node { width:107px; height:107px; }.wr-path { left:3px; top:73px; width:82px; }.wr-character { left:-91px; width:95px; max-height:113px; }.wr-card-dynamic { min-height:100px; padding:12px 85px 10px 17px; border-radius:20px; }.wr-dynamic-icon { top:11px; right:10px; width:47px; height:47px; }.wr-status-button { right:7px; bottom:7px; width:36%; }.wr-slogan { width:93px; }.wr-bottom-scene { width:80%; } }

/* Word route: supplied RPG artwork is layered over the existing home scene. */
.word-route-panel { position:relative; z-index:2; isolation:isolate; overflow:hidden; margin:34px -18px -28px; padding:24px 14px 160px; border:0; border-radius:34px 34px 0 0; background:linear-gradient(180deg,rgba(4,39,96,.05) 0%,rgba(4,34,88,.44) 4%,rgba(2,21,65,.9) 17%,#041d52 80%); box-shadow:inset 0 1px rgba(147,214,255,.35); }
.word-route-panel:before { content:""; position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at 16% 4%,rgba(74,174,255,.34),transparent 24%),radial-gradient(ellipse at 87% 32%,rgba(35,139,255,.22),transparent 23%),radial-gradient(rgba(211,241,255,.58) 1px,transparent 1.5px); background-size:auto,auto,37px 37px; opacity:.82; }
.word-route-panel:after { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:88px; background:linear-gradient(180deg,rgba(2,19,57,0),rgba(2,21,65,.62) 80%,rgba(2,21,65,.94)); pointer-events:none; }
.wp-heading { position:relative; display:flex; justify-content:space-between; align-items:flex-start; min-height:94px; max-width:720px; margin:0 auto 0; padding:1px 3px; }
.wp-title-art { width:min(49%,275px); height:auto; filter:drop-shadow(0 5px 2px rgba(0,0,0,.38)); }
.wp-progress-art { position:absolute; top:7px; right:0; width:min(43%,245px); height:auto; filter:drop-shadow(0 4px 9px rgba(0,0,0,.42)); }
.wp-heading>span { position:absolute; top:25px; right:12px; width:min(32%,188px); color:#fff; font-size:clamp(.82rem,3vw,1.22rem); font-weight:1000; line-height:1.2; text-align:center; text-shadow:0 2px 3px #04142f; }
.wp-unlock-banner { display:block; width:min(68%,410px); margin:-8px 0 9px 3%; filter:drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.wp-course { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:7px 2px 100px; }
.wp-level { position:relative; display:grid; grid-template-columns:minmax(104px,27%) 1fr; gap:0; align-items:center; min-height:145px; }
.wp-level:not(:last-of-type):after { content:""; position:absolute; z-index:-1; left:10%; top:94px; width:96px; height:101px; background:url('assets/images/word_path/path-line.png') center/100% 100% no-repeat; filter:drop-shadow(0 0 8px rgba(80,220,255,.8)); transform:rotate(72deg); transform-origin:center; opacity:.92; }
.wp-level:nth-child(even):after { transform:scaleX(-1) rotate(72deg); }
.wp-track { position:relative; display:grid; place-items:center; min-height:142px; }
.wp-path-glow { display:none; }
.wp-node { position:relative; z-index:2; width:124px; height:124px; padding:0; background:transparent; filter:drop-shadow(0 7px 10px rgba(0,0,0,.38)); transition:transform .24s ease,filter .24s ease; }
.wp-node img { display:block; width:100%; height:100%; object-fit:contain; }
.wp-node:not(:disabled):hover { transform:translateY(-5px) scale(1.035); }
.wp-available .wp-node { animation:wp-node-pulse 1.65s ease-in-out infinite; filter:drop-shadow(0 0 13px #ffb526) drop-shadow(0 7px 8px rgba(0,0,0,.38)); }
.wp-passed .wp-node { filter:drop-shadow(0 0 14px #ffd542) drop-shadow(0 7px 8px rgba(0,0,0,.38)); }
.wp-locked { opacity:.7; filter:saturate(.7); }
@keyframes wp-node-pulse { 50% { transform:scale(1.055); filter:drop-shadow(0 0 22px #ffd125) drop-shadow(0 7px 8px rgba(0,0,0,.38)); } }
.wp-card { position:relative; min-width:0; min-height:128px; overflow:hidden; padding:16px 12px 13px 112px; border:2px solid rgba(78,173,255,.9); border-radius:25px; color:#fff; background:linear-gradient(115deg,rgba(10,67,142,.92),rgba(2,24,70,.96)); box-shadow:inset 0 1px rgba(255,255,255,.28),0 7px 18px rgba(0,7,38,.36); }
.wp-card-template { display:none; }
.wp-available .wp-card { border-color:#ffb733; box-shadow:inset 0 1px rgba(255,255,255,.54),0 0 0 2px rgba(255,151,32,.16),0 0 19px rgba(255,146,26,.8),0 7px 18px rgba(0,7,38,.36); }
.wp-passed .wp-card { border-color:#ffd45c; box-shadow:inset 0 1px rgba(255,255,255,.48),0 0 15px rgba(255,210,62,.42),0 7px 18px rgba(0,7,38,.36); }
.wp-character { position:absolute; z-index:1; left:-3px; bottom:0; width:119px; max-height:128px; object-fit:contain; object-position:bottom center; filter:drop-shadow(2px 4px 3px rgba(0,0,0,.32)); }
.wp-copy { position:relative; z-index:2; display:flex; flex-direction:column; min-height:100px; padding-right:5px; }
.wp-copy>b { font-size:clamp(.96rem,3.25vw,1.42rem); line-height:1.18; text-shadow:0 2px 2px #061733; }
.wp-copy>small { margin-top:5px; color:#dce8ff; font-size:clamp(.72rem,2.6vw,1rem); line-height:1.18; }
.wp-score { display:flex; align-items:center; gap:7px; margin-top:auto; color:#ffe188; font-size:clamp(.73rem,2.6vw,1rem); font-weight:900; }
.wp-score img { width:72px; height:21px; object-fit:contain; object-position:left center; }
.wp-lock-copy { color:#cce3ff; }.wp-lock-copy>img { width:20px; height:20px; }
.wp-topic-icon { position:absolute; z-index:1; right:8px; top:11px; width:62px; height:62px; object-fit:contain; opacity:.2; filter:grayscale(.2); }
.wp-action { position:absolute; z-index:4; right:10px; bottom:11px; width:min(38%,158px); padding:0; background:transparent; filter:drop-shadow(0 3px 5px rgba(0,0,0,.42)); transition:transform .18s ease; }
.wp-action:hover { transform:translateY(-2px) scale(1.025); }.wp-action img { display:block; width:100%; height:auto; }
.wp-locked-label { position:absolute; z-index:3; right:10px; bottom:13px; display:none; align-items:center; gap:5px; color:#cce3ff; font-size:.68rem; font-weight:800; }.wp-locked-label img { width:20px; height:20px; }
.wp-world-sign { position:absolute; z-index:2; bottom:7px; left:-6px; width:116px; transform:rotate(-7deg); filter:drop-shadow(0 6px 4px rgba(0,0,0,.4)); }
.wp-scene-bottom { position:absolute; z-index:-1; right:-14px; bottom:-2px; width:72%; border-radius:90% 0 0 0; opacity:.58; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%),linear-gradient(180deg,transparent,#000 36%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0%,#000 34%); }
@media (max-width:600px) { .word-route-panel { margin:31px -18px -28px; padding:18px 10px 146px; border-radius:27px 27px 0 0; }.wp-heading { min-height:77px; }.wp-heading>span { top:20px; right:7px; font-size:.84rem; }.wp-unlock-banner { width:75%; margin:0 0 5px 2%; }.wp-course { padding:5px 0 88px; }.wp-level { grid-template-columns:106px 1fr; min-height:129px; }.wp-level:not(:last-of-type):after { left:4%; top:84px; width:80px; height:90px; }.wp-track { min-height:126px; }.wp-node { width:108px; height:108px; }.wp-card { min-height:116px; padding:13px 9px 11px 91px; border-radius:20px; }.wp-character { width:98px; max-height:116px; }.wp-copy { min-height:90px; }.wp-copy>b { font-size:.95rem; }.wp-copy>small { margin-top:4px; font-size:.71rem; }.wp-score { font-size:.7rem; }.wp-score img { width:59px; height:18px; }.wp-topic-icon { width:48px; height:48px; }.wp-action { right:7px; bottom:8px; width:37%; }.wp-world-sign { width:96px; }.wp-scene-bottom { width:80%; } }

/* Word route v2 — single clean HTML layer, high-resolution transparent character/node assets. */
.word-route-v2 { position:relative; isolation:isolate; overflow:hidden; margin:34px -18px -28px; padding:23px 13px 134px; color:#fff; background:linear-gradient(180deg,rgba(8,45,103,.02),rgba(3,28,78,.42) 6%,rgba(3,24,72,.84) 18%,#041d52 82%); }
.word-route-v2::before { content:""; position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at 12% 1%,rgba(92,190,255,.26),transparent 28%),radial-gradient(ellipse at 87% 28%,rgba(45,128,255,.16),transparent 23%),radial-gradient(rgba(204,239,255,.36) 1px,transparent 1.4px); background-size:auto,auto,38px 38px; opacity:.82; }
.word-route-v2::after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:170px; background:radial-gradient(ellipse at 50% 100%,rgba(38,107,211,.56),transparent 61%),linear-gradient(180deg,transparent,#031744 86%); pointer-events:none; }
.wr2-header { position:relative; display:flex; justify-content:space-between; align-items:flex-start; min-height:88px; max-width:760px; margin:auto; gap:8px; }
.wr2-title { display:block; width:min(52%,285px); height:auto; filter:drop-shadow(0 5px 2px rgba(0,0,0,.45)); }
.wr2-progress { display:flex; align-items:center; justify-content:center; gap:7px; min-width:145px; margin-top:4px; padding:8px 12px 8px 8px; border:2px solid #9cdbff; border-radius:999px; background:linear-gradient(120deg,rgba(20,93,172,.92),rgba(4,31,85,.96)); box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 16px rgba(55,164,255,.42); color:#fff; font-size:clamp(.82rem,2.8vw,1.22rem); font-weight:1000; white-space:nowrap; text-shadow:0 2px 3px #02132f; }
.wr2-progress i { display:grid; width:36px; height:36px; place-items:center; flex:0 0 36px; border-radius:50%; background:radial-gradient(circle at 32% 26%,#ffe99a 0 7%,#ffb91e 13% 52%,#dd6618 78%); box-shadow:0 0 10px #ffc836; }.wr2-progress svg { width:28px; height:28px; fill:#d64c1d; stroke:#d64c1d; stroke-width:1.4; }
.wr2-subtitle { width:min(73%,435px); margin:-8px 0 8px 3%; color:#e1ecff; font-family:"KaiTi","STKaiti",cursive; font-size:clamp(1rem,4.6vw,2rem); font-weight:700; font-style:italic; letter-spacing:.04em; line-height:1.25; text-shadow:0 3px 2px #041536; transform:rotate(-2deg); }.wr2-subtitle::after { content:""; display:block; width:95%; height:2px; margin:3px 0 0 4%; border-radius:9px; background:linear-gradient(90deg,#69c9ff,#e8f7ff,transparent); }
.wr2-map { position:relative; max-width:760px; margin:auto; padding:7px 0 32px; }
.wr2-row { position:relative; display:grid; grid-template-columns:26% 24% 50%; align-items:center; min-height:138px; }.wr2-track { position:relative; z-index:1; display:grid; min-width:0; height:132px; place-items:center; }.wr2-path { position:absolute; z-index:-1; left:7%; top:81px; width:83%; height:115px; overflow:visible; filter:drop-shadow(0 0 6px #68daff); }.wr2-path path { fill:none; stroke:#46d8ff; stroke-width:6; stroke-linecap:round; filter:drop-shadow(0 0 4px #a8efff); }.wr2-row:nth-child(odd) .wr2-path path { stroke:#ffd642; filter:drop-shadow(0 0 4px #ffe996); }
.wr2-node { position:relative; width:118px; height:118px; padding:0; background:transparent; filter:drop-shadow(0 8px 9px rgba(0,0,0,.4)); transition:transform .2s ease,filter .2s ease; }.wr2-island-art { position:absolute; z-index:1; bottom:0; left:1px; width:116px; height:62px; object-fit:contain; object-position:center bottom; }.wr2-orb { position:absolute; z-index:2; top:0; left:22px; display:grid; width:75px; height:75px; place-items:center; border:3px solid #ffe795; border-radius:50%; background:radial-gradient(circle at 30% 24%,#fff7bd 0 7%,#ffcf31 14% 50%,#e66d18 76%); box-shadow:inset 0 0 0 3px #ff8d16,0 0 15px #ffca35; color:#8d2a12; font-weight:1000; text-shadow:0 2px 0 #fff3ad; }.wr2-orb b { font-size:2.45rem; line-height:1; }.wr2-orb i { position:absolute; right:11px; bottom:9px; color:#d94017; font-size:.72rem; font-style:normal; text-shadow:none; }.wr2-orb-passed { background:radial-gradient(circle at 30% 24%,#fff9c6 0 7%,#ffe44a 14% 50%,#ed9214 76%); }.wr2-orb-available { animation:wr2-orb-pulse 1.6s ease-in-out infinite; }.wr2-orb-locked { border-color:#78caff; background:radial-gradient(circle at 30% 24%,#bdeeff 0 7%,#316bad 17% 52%,#10295f 80%); box-shadow:inset 0 0 0 3px #143c7f,0 0 15px #4ac7ff; }.wr2-orb-locked .wr2-lock { width:43px; height:43px; fill:#a5e2ff; stroke:#a5e2ff; stroke-width:1.9; }.wr2-node:not(:disabled):hover { transform:translateY(-4px) scale(1.035); }.wr2-available .wr2-node { animation:wr2-node-pulse 1.6s ease-in-out infinite; filter:drop-shadow(0 0 16px #ffc022) drop-shadow(0 8px 9px rgba(0,0,0,.4)); }.wr2-passed .wr2-node { filter:drop-shadow(0 0 13px #ffdd61) drop-shadow(0 8px 9px rgba(0,0,0,.4)); }.wr2-locked { filter:saturate(.78) brightness(.84); } @keyframes wr2-node-pulse { 50% { transform:scale(1.055); filter:drop-shadow(0 0 26px #ffca2f) drop-shadow(0 8px 9px rgba(0,0,0,.4)); } } @keyframes wr2-orb-pulse { 50% { box-shadow:inset 0 0 0 3px #ff8d16,0 0 25px #ffcf36; } }
.npc-slot { position:relative; z-index:2; display:flex; min-width:0; height:132px; align-items:center; justify-content:center; overflow:visible; }.wr2-character { position:relative; display:block; width:auto; height:auto; max-width:100%; max-height:112px; margin:0; left:auto; top:auto; bottom:auto; object-fit:contain; object-position:center center; transform:translate(var(--npc-x,0px),var(--npc-y,0px)); filter:drop-shadow(2px 5px 3px rgba(0,0,0,.34)); pointer-events:none; }
.wr2-card { position:relative; min-width:0; min-height:115px; padding:14px 10px 12px 16px; overflow:hidden; border:2px solid #63bcff; border-radius:24px; background:linear-gradient(108deg,rgba(13,76,155,.96),rgba(3,28,81,.98)); box-shadow:inset 0 1px rgba(255,255,255,.32),0 7px 17px rgba(0,7,38,.35); }.wr2-available .wr2-card { border-color:#ffba32; box-shadow:inset 0 1px rgba(255,255,255,.58),0 0 19px rgba(255,153,25,.86),0 7px 17px rgba(0,7,38,.35); }.wr2-passed .wr2-card { border-color:#ffd85c; box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 15px rgba(255,213,70,.48),0 7px 17px rgba(0,7,38,.35); }
.wr2-copy { position:relative; z-index:2; display:flex; flex-direction:column; min-height:86px; padding-right:3px; }.wr2-copy>b { font-size:clamp(.94rem,3.2vw,1.38rem); line-height:1.18; text-shadow:0 2px 2px #061733; }.wr2-copy>small { margin-top:5px; color:#dceaff; font-size:clamp(.69rem,2.4vw,.98rem); line-height:1.2; }.wr2-state { display:flex; align-items:center; gap:5px; margin-top:auto; color:#ffe083; font-size:clamp(.66rem,2.25vw,.9rem); font-weight:900; }.wr2-complete-score i { color:#ffcf35; font-style:normal; letter-spacing:1px; text-shadow:0 1px #87520c; }.wr2-locked-state { color:#cae2ff; white-space:nowrap; }.wr2-lock { width:17px; height:17px; fill:#ffcc64; stroke:#ffcc64; stroke-width:2; flex:0 0 17px; }
.wr2-topic-icon { position:absolute; z-index:1; top:12px; right:10px; width:52px; height:52px; opacity:.28; }.wr2-topic-icon svg { width:100%; height:100%; fill:none; stroke:#65a8ee; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }.wr2-topic-icon svg circle { fill:#3978bd; stroke:#65a8ee; }.wr2-topic-icon svg path { fill:#65a8ee; stroke:#65a8ee; }
.wr2-action { position:absolute; z-index:3; right:8px; bottom:9px; display:flex; align-items:center; justify-content:center; gap:3px; min-width:78px; max-width:46%; min-height:30px; padding:5px 8px; border:1px solid #fff1a1; border-radius:999px; background:linear-gradient(#ffe46b,#ffb71d); box-shadow:inset 0 1px #fff9c9,0 0 10px rgba(255,189,33,.6); color:#06275f; font-size:clamp(.57rem,2vw,.78rem); font-weight:1000; white-space:nowrap; text-shadow:0 1px rgba(255,255,255,.44); }.wr2-action span { font-size:1.1em; }.wr2-passed .wr2-action { background:linear-gradient(#ffe47b,#f3a90e); }
.wr2-footer { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; min-height:64px; margin:0 3% -85px; color:#d6ebff; text-shadow:0 3px 3px #031538; }.wr2-footer span { max-width:120px; color:#ffd764; font-family:"KaiTi","STKaiti",cursive; font-size:.94rem; line-height:1.25; transform:rotate(-6deg); }.wr2-footer b { font-family:cursive; font-size:clamp(1.4rem,5vw,2.3rem); transform:rotate(-8deg); }
@media (max-width:600px) { .word-route-v2 { margin:31px -18px -28px; padding:18px 9px 128px; }.wr2-header { min-height:73px; }.wr2-title { width:52%; }.wr2-progress { min-width:130px; margin-top:1px; padding:6px 9px 6px 6px; font-size:.78rem; }.wr2-progress i { width:30px; height:30px; flex-basis:30px; }.wr2-progress svg { width:24px; height:24px; }.wr2-subtitle { margin:0 0 7px 2%; font-size:1.08rem; }.wr2-row { grid-template-columns:26% 24% 50%; min-height:130px; }.wr2-track,.npc-slot { height:126px; }.npc-slot { padding:0 4px; }.wr2-path { left:6px; top:73px; width:81px; height:105px; }.wr2-node { width:100%; max-width:105px; height:105px; }.wr2-island-art { left:0; width:100%; height:56px; }.wr2-orb { left:50%; width:68px; height:68px; transform:translateX(-50%); }.wr2-orb b { font-size:2.18rem; }.wr2-orb-locked .wr2-lock { width:39px; height:39px; }.wr2-character { max-height:108px; }.wr2-card { min-height:104px; margin:0; padding:12px 7px 9px 12px; border-radius:20px; }.wr2-copy { min-height:77px; }.wr2-copy>b { font-size:.88rem; }.wr2-copy>small { margin-top:4px; font-size:.65rem; }.wr2-state { font-size:.63rem; }.wr2-locked-state { gap:3px; font-size:.54rem; }.wr2-lock { width:15px; height:15px; flex-basis:15px; }.wr2-topic-icon { top:9px; right:7px; width:43px; height:43px; }.wr2-action { right:6px; bottom:6px; min-width:65px; min-height:27px; padding:4px 6px; font-size:.55rem; }.wr2-footer { margin:-2px 2% -82px; } }
@media (max-width:600px) { .map-page { background-size:100% auto; background-position:center top; }.game-topbar { grid-template-columns:1.05fr .78fr 1.12fr; gap:6px; }.hero-profile img { width:47px; height:47px; flex-basis:47px; }.hero-profile b { font-size:.86rem; }.hero-profile small { font-size:.58rem; }.hero-level>b { font-size:.88rem; }.hero-level small { font-size:.58rem; }.hero-score { grid-template-columns:20px 1fr 20px 1fr; gap:1px 2px; }.hero-score>span { font-size:1.08rem; }.hero-score>b { font-size:.54rem; }.hero-score small { font-size:.85rem; }.map-intro { min-height:360px; margin-top:15px; padding:17px 4px; }.map-intro h1 { font-size:clamp(2.55rem,12vw,3.55rem); }.hero-script { top:84px; right:3px; font-size:1rem !important; }.hero-bubble { bottom:12px; left:6px; padding:9px 12px; font-size:.79rem; }.mode-tile.game-card { min-height:220px; }.game-card b { font-size:.94rem; }.game-card small { font-size:.66rem; }.game-card i { font-size:.59rem; right:27px; }.game-nav { height:67px; bottom:max(5px,env(safe-area-inset-bottom)); }.game-nav button { height:49px; font-size:1.18rem; }.game-nav .energy { width:58px; height:58px; margin-top:-23px; font-size:1.7rem; } }

/* Homepage: the local basketball artwork fades into the game sky instead of ending on a hard edge. */
.map-page { background:#062e62; background-image:radial-gradient(circle at 18% 38%,rgba(137,212,255,.44) 0 1px,transparent 1.8px),radial-gradient(circle at 79% 52%,rgba(255,255,255,.55) 0 1px,transparent 1.6px),linear-gradient(180deg,#0a4b90 0,#062e62 44%,#041f4d 100%); background-size:41px 41px,57px 57px,100% 100%; background-position:center top; }
.map-page:before { inset:0 0 auto; z-index:0; height:clamp(500px,118vw,860px); opacity:1; background-image:linear-gradient(180deg,rgba(3,22,61,.04) 0%,rgba(4,30,76,.12) 45%,rgba(5,39,91,.72) 76%,#062e62 100%),url('assets/home-photo.jpg'); background-size:100% 100%,100% auto; background-position:center top; background-repeat:no-repeat; }
.map-page:after { z-index:0; opacity:1; background:linear-gradient(180deg,transparent 28%,rgba(4,30,76,.08) 48%,rgba(4,28,69,.68) 69%,rgba(4,31,77,.96) 100%),radial-gradient(circle at 15% 63%,rgba(255,255,255,.52) 0 1px,transparent 1.8px),radial-gradient(circle at 75% 72%,rgba(168,226,255,.5) 0 1px,transparent 1.7px); background-size:100% 100%,43px 43px,61px 61px; }
.map-page .game-topbar,.map-page .map-intro,.map-page .mode-grid,.map-page .weak-box,.map-page .route-panel { position:relative; z-index:2; }

/* Dynamic HUD controls retain the existing three visual groups while making their details available. */
.hero-stat-button,.hero-score-button { padding:0; border:0; color:inherit; background:transparent; text-align:left; text-shadow:inherit; }
.hero-stat-button { min-width:0; }.hero-stat-button:focus-visible,.hero-score-button:focus-visible { outline:2px solid #ffe363; outline-offset:4px; border-radius:8px; }
.hero-score { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.hero-score-button { display:grid; grid-template-columns:25px minmax(0,1fr); align-items:center; gap:5px; min-width:0; }.hero-score-button>span { font-size:1.45rem; filter:drop-shadow(0 2px 1px #16325d); }.hero-score-button>b { min-width:0; font-size:.7rem; line-height:1.05; }.hero-score-button small { display:block; margin-top:3px; color:#ffd950; font-size:.76rem; white-space:nowrap; }
.xp-gain { position:fixed; z-index:60; top:calc(env(safe-area-inset-top,0px) + 72px); left:50%; padding:8px 13px; border:1px solid #fff0a2; border-radius:99px; color:#fff; background:rgba(5,52,112,.94); box-shadow:0 6px 18px rgba(2,25,65,.32); font-weight:900; transform:translateX(-50%); animation:xp-gain-rise 1.4s ease both; pointer-events:none; }@keyframes xp-gain-rise { 0% { opacity:0; transform:translate(-50%,8px) scale(.9); } 20% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-13px) scale(1.02); } }
.status-sheet-backdrop { position:fixed; z-index:70; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:20px max(18px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(18px,env(safe-area-inset-left,0px)); background:rgba(1,18,48,.42); }.status-sheet { position:relative; width:min(100%,520px); padding:25px 24px 22px; border:2px solid #d6efff; border-radius:25px; color:#07386d; background:linear-gradient(145deg,#fffdf6,#dff4ff); box-shadow:0 16px 40px rgba(1,24,63,.35); }.status-sheet b { display:block; padding-right:30px; font-size:1.12rem; }.status-sheet p { margin:10px 0 0; color:#316187; font-weight:700; }.status-sheet-close { position:absolute; top:10px; right:12px; display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#07386d; background:#e6f5ff; font-size:1.6rem; line-height:1; }
.progress-import-label { position:relative; display:block; box-sizing:border-box; text-align:center; cursor:pointer; }.progress-import-label input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
@media (max-width:600px) { .map-page:before { height:clamp(500px,142vw,690px); background-size:100% 100%,100% auto; }.hero-score { gap:3px; }.hero-score-button { grid-template-columns:20px minmax(0,1fr); gap:2px; }.hero-score-button>span { font-size:1.08rem; }.hero-score-button>b { font-size:.54rem; }.hero-score-button small { font-size:.58rem; }.status-sheet { padding:23px 19px 19px; } }