/* Point Dental Academy — learning path + Duolingo-style lessons */
:root{--pl-bg:#faf6f0;--pl-card:#ffffff;--pl-line:#e4d9cc;--pl-ink:#2b1d16;--pl-sub:#6b5648;--pl-bur:#7a2630;--pl-bur-d:#561a22;--pl-bur-l:#f6e7e8;--pl-ok:#2f7d32;--pl-ok-bg:#e7f4e4;--pl-ok-d:#1f5e22;--pl-bad:#b3261e;--pl-bad-bg:#fbe6e4;--pl-bad-d:#8c1d17;--pl-gold:#c8a046}
#screen-learn{background:var(--pl-bg)}
#screen-learn .screen-scroll{padding:12px 14px 96px;background:var(--pl-bg)}
.pl-head{background:linear-gradient(160deg,#8a2d38,#5c1c24);color:#fff;border-radius:18px;padding:14px 16px 12px;box-shadow:0 4px 0 #3a1218;font-family:var(--font-body)}
.pl-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pl-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#f3d9dc;font-weight:600}
.pl-title{font-size:20px;font-weight:700;line-height:1.2;margin-top:2px}
.pl-ring{--p:0;width:58px;height:58px;border-radius:50%;flex:0 0 58px;display:grid;place-items:center;background:conic-gradient(#e8c878 calc(var(--p)*1%),rgba(255,255,255,.18) 0)}
.pl-ring span{width:46px;height:46px;border-radius:50%;background:#6a222b;display:grid;place-items:center;font-size:12px;font-weight:700}
.pl-head-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pl-head-stats span{background:rgba(255,255,255,.14);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:600}
.pl-continue{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:12px 0 4px;padding:12px 16px;min-height:56px;border:2px solid var(--pl-bur);border-radius:16px;background:#fff;color:var(--pl-ink);font-family:var(--font-body);text-align:left;box-shadow:0 4px 0 var(--pl-bur);cursor:pointer}
.pl-continue:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pl-bur)}
.pl-continue-k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pl-bur)}
.pl-continue-t{font-size:15px;font-weight:600;margin-top:2px}
.pl-unit{margin-top:18px}
.pl-banner{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--pl-line);border-left:6px solid var(--pl-bur);border-radius:16px;padding:12px 12px 12px 14px;font-family:var(--font-body);min-height:72px;position:relative;overflow:hidden}
.pl-unit.is-done .pl-banner{border-left-color:var(--pl-gold)}
.pl-banner-txt{flex:1;min-width:0}
.pl-banner-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pl-bur)}
.pl-banner-t{font-size:17px;font-weight:700;color:var(--pl-ink);line-height:1.25;margin-top:2px}
.pl-banner-s{font-size:13px;color:var(--pl-sub);margin-top:3px;line-height:1.35}
.pl-banner-coach{width:56px;height:72px;object-fit:contain;object-position:bottom;margin:-6px -2px -12px 0;image-rendering:auto;flex:0 0 56px}
.pl-track{display:flex;flex-direction:column;align-items:center;padding:14px 0 4px}
.pl-node-wrap{position:relative;display:flex;flex-direction:column;align-items:center;transform:translateX(var(--x,0));margin:4px 0}
.pl-node{width:72px;height:66px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:24px;color:#fff;background:var(--pl-bur);box-shadow:0 6px 0 var(--pl-bur-d);transition:transform .08s}
.pl-node:active{transform:translateY(5px);box-shadow:0 1px 0 var(--pl-bur-d)}
.pl-node.done{background:linear-gradient(180deg,#e8c878,#c8a046);box-shadow:0 6px 0 #8b6914;color:#3a2a10}
.pl-node.locked{background:#ddd3c7;box-shadow:0 6px 0 #b9ab9b;color:#6e6052;font-size:20px}
.pl-node.current{outline:4px solid rgba(122,38,48,.22);outline-offset:5px;animation:plPulse 1.6s ease-in-out infinite}
@keyframes plPulse{0%,100%{outline-offset:5px}50%{outline-offset:9px}}
.pl-node-ico{line-height:1}
.pl-node-lbl{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--pl-ink);margin-top:10px;max-width:180px;text-align:center;line-height:1.25}
.pl-node-lbl small{display:block;font-weight:500;color:var(--pl-sub);font-size:12px}
.pl-start-tip{position:absolute;top:-34px;background:#fff;color:var(--pl-bur);border:2px solid var(--pl-line);font:700 13px var(--font-body);text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:10px;animation:plBob 1.4s ease-in-out infinite;z-index:1}
.pl-start-tip::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.pl-node-wrap:has(.pl-start-tip){margin-top:34px}
@keyframes plBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pl-foot{font-family:var(--font-body);font-size:13px;color:var(--pl-sub);text-align:center;margin:22px 8px 8px;line-height:1.45}

/* lesson overlay */
body.pl-lock{overflow:hidden}
.pl-overlay{position:fixed;inset:0;z-index:9000;background:var(--pl-bg);display:flex;flex-direction:column;font-family:var(--font-body);color:var(--pl-ink);padding-top:env(safe-area-inset-top)}
.pl-overlay.hidden{display:none}
.pl-top{display:flex;align-items:center;gap:12px;padding:12px 14px 6px}
.pl-x{width:44px;height:44px;border:0;background:transparent;font-size:22px;color:#8a7a6c;cursor:pointer;border-radius:12px;flex:0 0 44px}
.pl-x:active{background:#efe6da}
.pl-prog{flex:1;height:16px;border-radius:999px;background:#e8ded2;overflow:hidden}
.pl-prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(180deg,#a3404c,var(--pl-bur));transition:width .35s ease;box-shadow:inset 0 4px 0 rgba(255,255,255,.25)}
.pl-hearts{font-size:18px;color:#c62f3b;font-weight:700;white-space:nowrap;min-width:44px;text-align:right}
.pl-hearts b{color:#c62f3b}
.pl-shake{display:inline-block;animation:plShake .4s}
@keyframes plShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.pl-body{flex:1;overflow-y:auto;padding:8px 18px 16px;-webkit-overflow-scrolling:touch}
.pl-prompt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pl-bur);margin:6px 0 6px}
.pl-redo{display:inline-block;margin-right:8px;color:#8c5a00;background:#fff3d6;border-radius:6px;padding:2px 7px;text-transform:none;letter-spacing:0}
.pl-q{font-size:21px;line-height:1.35;font-weight:700;margin:0 0 18px;color:var(--pl-ink);font-family:var(--font-body)}
.pl-area{display:flex;flex-direction:column;gap:10px}
.pl-card{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 14px;border:2px solid var(--pl-line);border-bottom-width:4px;border-radius:16px;background:#fff;font:600 16px/1.35 var(--font-body);color:var(--pl-ink);text-align:left;cursor:pointer;transition:transform .06s}
.pl-card:active{transform:translateY(2px)}
.pl-card.sel,.pl-img-card.sel,.pl-chip.sel{border-color:var(--pl-bur);background:var(--pl-bur-l);color:var(--pl-bur-d)}
.pl-card.right,.pl-img-card.right,.pl-chip.right{border-color:var(--pl-ok);background:var(--pl-ok-bg);color:var(--pl-ok-d)}
.pl-card.wrong,.pl-img-card.wrong,.pl-chip.wrong{border-color:var(--pl-bad);background:var(--pl-bad-bg);color:var(--pl-bad-d)}
.pl-key{flex:0 0 28px;height:28px;border-radius:8px;border:2px solid var(--pl-line);display:grid;place-items:center;font-size:13px;color:var(--pl-sub);font-weight:700}
.sel>.pl-key{border-color:var(--pl-bur);color:var(--pl-bur)}
.pl-area-tf{flex-direction:row}
.pl-tf{flex:1;flex-direction:column;justify-content:center;min-height:120px;font-size:18px;text-align:center;gap:6px}
.pl-tf-ico{font-size:28px}
.pl-area-image{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-img-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:10px;border:2px solid var(--pl-line);border-bottom-width:4px;border-radius:16px;background:#fff;cursor:pointer;font:600 14px/1.25 var(--font-body);color:var(--pl-ink)}
.pl-img-card img{width:100%;height:112px;object-fit:contain;mix-blend-mode:multiply}
.pl-slots{min-height:120px;border:2px dashed #d4c6b6;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:8px;background:#fffdf9}
.pl-slot-hint{color:var(--pl-sub);font-size:14px;text-align:center;margin:auto;padding:16px}
.pl-bank{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pl-bank-wrap{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.pl-chip{min-height:48px;padding:10px 14px;border:2px solid var(--pl-line);border-bottom-width:4px;border-radius:14px;background:#fff;font:600 15px/1.3 var(--font-body);color:var(--pl-ink);cursor:pointer;text-align:left}
.pl-chip-row{display:flex;align-items:center;gap:10px;width:100%}
.pl-chip.used{background:#efe7dd;color:transparent;border-color:#e4d9cc;box-shadow:none}
.pl-chip.used *{visibility:hidden}
.pl-bank-wrap .pl-chip.used{color:transparent}
.pl-area-match{flex-direction:row;gap:10px;align-items:stretch}
.pl-col{flex:1;display:flex;flex-direction:column;gap:10px}
.pl-match{flex:1;text-align:center;min-height:62px;font-size:14px;display:flex;align-items:center;justify-content:center}
.pl-match:disabled{opacity:.55}
.pl-gap-q{line-height:1.8}
.pl-blank{display:inline-block;min-width:110px;border-bottom:3px solid var(--pl-bur);margin:0 4px;padding:0 6px;text-align:center;color:var(--pl-bur);cursor:pointer;border-radius:4px}
.pl-blank.filled{background:var(--pl-bur-l)}
.pl-blank.right{color:var(--pl-ok-d);border-color:var(--pl-ok);background:var(--pl-ok-bg)}
.pl-blank.wrong{color:var(--pl-bad-d);border-color:var(--pl-bad);background:var(--pl-bad-bg)}
.pl-foot-bar{border-top:2px solid var(--pl-line);padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:var(--pl-bg)}
.pl-foot-bar.ok{background:var(--pl-ok-bg);border-top-color:#bfe0b8}
.pl-foot-bar.bad{background:var(--pl-bad-bg);border-top-color:#f1c2bd}
.pl-sheet{animation:plUp .22s ease-out;margin-bottom:12px;max-height:40vh;overflow:auto}
@keyframes plUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.pl-sheet-h{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.pl-sheet.ok .pl-sheet-h{color:var(--pl-ok-d)}
.pl-sheet.bad .pl-sheet-h{color:var(--pl-bad-d)}
.pl-sheet-ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;flex:0 0 32px}
.pl-sheet.ok .pl-sheet-ico{background:var(--pl-ok)}
.pl-sheet.bad .pl-sheet-ico{background:var(--pl-bad)}
.pl-sheet-ans{font-size:16px;font-weight:600;color:var(--pl-bad-d);margin:6px 0 0 42px;line-height:1.4}
.pl-sheet-why{font-size:15px;color:#3c2a20;margin:6px 0 0 42px;line-height:1.45}
.pl-check{display:block;width:100%;min-height:52px;border:0;border-radius:16px;background:var(--pl-bur);color:#fff;font:800 17px var(--font-body);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 0 var(--pl-bur-d);cursor:pointer}
.pl-check:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pl-bur-d)}
.pl-check:disabled{background:#ddd3c7;color:#6e6052;box-shadow:0 4px 0 #c4b6a6;cursor:default;transform:none}
.pl-foot-bar.ok .pl-check{background:var(--pl-ok);box-shadow:0 4px 0 var(--pl-ok-d)}
.pl-foot-bar.bad .pl-check{background:var(--pl-bad);box-shadow:0 4px 0 var(--pl-bad-d)}
.pl-ghost{display:block;width:100%;min-height:48px;margin-top:10px;border:2px solid var(--pl-line);border-radius:16px;background:#fff;color:var(--pl-bur);font:700 15px var(--font-body);cursor:pointer}
.pl-end{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 22px calc(24px + env(safe-area-inset-bottom));position:relative;overflow:hidden}
.pl-end h2{font-size:28px;font-weight:800;color:var(--pl-bur);margin:10px 0 4px}
.pl-end p{font-size:16px;color:var(--pl-sub);margin:0 0 20px;line-height:1.45}
.pl-end-ico{font-size:64px}
.pl-end-coach{height:170px;width:auto;object-fit:contain;animation:plPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes plPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.pl-stats{display:flex;gap:10px;width:100%;margin-bottom:24px}
.pl-stat{flex:1;border-radius:14px;border:2px solid;overflow:hidden;background:#fff}
.pl-stat b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#fff;padding:5px 2px}
.pl-stat span{display:block;font-size:18px;font-weight:800;padding:10px 2px}
.pl-stat.xp{border-color:#b8892a}.pl-stat.xp b{background:#b8892a;color:#2b1d06}.pl-stat.xp span{color:#7a5a12}
.pl-stat.acc{border-color:var(--pl-ok)}.pl-stat.acc b{background:var(--pl-ok)}.pl-stat.acc span{color:var(--pl-ok-d)}
.pl-stat.tm{border-color:var(--pl-bur)}.pl-stat.tm b{background:var(--pl-bur)}.pl-stat.tm span{color:var(--pl-bur)}
.pl-end .pl-check{max-width:420px}
.pl-confetti{position:absolute;inset:0;pointer-events:none}
.pl-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.9;animation:plFall 2.4s linear forwards}
.pl-confetti i:nth-child(3n){background:var(--pl-bur)}.pl-confetti i:nth-child(3n+1){background:#e8c878}.pl-confetti i:nth-child(3n+2){background:#d9a7ad}
@keyframes plFall{to{transform:translateY(110vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.pl-node.current,.pl-start-tip,.pl-confetti i,.pl-end-coach{animation:none}.pl-confetti{display:none}}
@media (min-width:600px){.pl-body,.pl-foot-bar>*{max-width:560px;margin-left:auto;margin-right:auto}}
.pl-confetti i:nth-child(1){left:10%;animation-delay:0.44s;animation-duration:3.36s}.pl-confetti i:nth-child(2){left:71%;animation-delay:0.17s;animation-duration:2.35s}.pl-confetti i:nth-child(3){left:25%;animation-delay:0.29s;animation-duration:3.04s}.pl-confetti i:nth-child(4){left:43%;animation-delay:0.79s;animation-duration:3.32s}.pl-confetti i:nth-child(5){left:83%;animation-delay:0.65s;animation-duration:3.25s}.pl-confetti i:nth-child(6){left:85%;animation-delay:0.45s;animation-duration:3.30s}.pl-confetti i:nth-child(7){left:71%;animation-delay:0.15s;animation-duration:2.66s}.pl-confetti i:nth-child(8){left:38%;animation-delay:0.09s;animation-duration:2.17s}.pl-confetti i:nth-child(9){left:90%;animation-delay:0.36s;animation-duration:2.74s}.pl-confetti i:nth-child(10){left:40%;animation-delay:0.19s;animation-duration:2.61s}.pl-confetti i:nth-child(11){left:40%;animation-delay:0.14s;animation-duration:2.51s}.pl-confetti i:nth-child(12){left:30%;animation-delay:0.54s;animation-duration:2.26s}.pl-confetti i:nth-child(13){left:44%;animation-delay:0.66s;animation-duration:2.46s}.pl-confetti i:nth-child(14){left:23%;animation-delay:0.76s;animation-duration:2.82s}.pl-confetti i:nth-child(15){left:60%;animation-delay:0.64s;animation-duration:2.13s}.pl-confetti i:nth-child(16){left:73%;animation-delay:0.43s;animation-duration:2.16s}.pl-confetti i:nth-child(17){left:60%;animation-delay:0.28s;animation-duration:2.47s}.pl-confetti i:nth-child(18){left:42%;animation-delay:0.34s;animation-duration:2.38s}.pl-confetti i:nth-child(19){left:18%;animation-delay:0.03s;animation-duration:2.63s}.pl-confetti i:nth-child(20){left:36%;animation-delay:0.48s;animation-duration:3.19s}.pl-confetti i:nth-child(21){left:51%;animation-delay:0.42s;animation-duration:3.29s}.pl-confetti i:nth-child(22){left:25%;animation-delay:0.75s;animation-duration:2.43s}.pl-confetti i:nth-child(23){left:74%;animation-delay:0.21s;animation-duration:3.15s}.pl-confetti i:nth-child(24){left:12%;animation-delay:0.41s;animation-duration:2.28s}.pl-confetti i:nth-child(25){left:36%;animation-delay:0.78s;animation-duration:3.30s}.pl-confetti i:nth-child(26){left:29%;animation-delay:0.14s;animation-duration:2.60s}.pl-confetti i:nth-child(27){left:92%;animation-delay:0.24s;animation-duration:2.69s}
/* Weeks screen: path rows */
.weeks-path .weeks-path-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:56px;margin:8px 0;padding:10px 12px;border:2px solid #2A1C14;border-radius:10px;background:#F3E6C8;color:#2A1C14;text-align:left;cursor:pointer;font-family:var(--font-body)}
.weeks-path .weeks-path-row:active{transform:translateY(1px)}
.wp-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wp-t strong{font-size:14px}
.wp-t small{font-size:12px;color:#4a3428;line-height:1.3}
.wp-n{flex:0 0 auto;font:700 13px var(--font-body);background:#7a2630;color:#fff;border-radius:999px;padding:4px 10px}
/* Bigger hit areas for the small HUD buttons, same look */
#btn-theme,#btn-how{position:relative}
#btn-theme::after,#btn-how::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
#board-toggle button{min-height:44px}
#btn-dlg-skip,#btn-treatment-photo{position:relative}
#btn-dlg-skip::after,#btn-treatment-photo::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.pl-complete{cursor:default}