/* Vrij spelen: activiteitenbord, 'Mooi gedaan!'-kaartje, rustige meldingen, spelinstellingen. Zie QUESTS.md */

/* knop 🧭 in #hud-feat (duim-groot) */
.board-btn{min-width:48px;height:48px;padding:0 10px;font-size:24px;line-height:1}

/* bord */
#board{position:absolute;inset:0;z-index:15;background:#0b123377;display:flex;align-items:center;justify-content:center;padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))}
.bd-box{position:relative;width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;padding:12px 14px;text-align:left}
.bd-h{margin:0 44px 2px 0;font-size:20px}
.bd-tip{margin:0 0 6px;font-size:13px;opacity:.75}
.bd-tabs{display:flex;gap:6px;margin:4px 0 8px;flex-wrap:wrap}
.bd-tabs .chip{min-height:48px;padding:6px 12px;font-size:14px}
.bd-body{overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:2px 2px 6px;min-height:0}
.bd-x{width:48px;height:48px;font-size:16px}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.bd-card{position:relative;background:#fff;border:3px solid var(--navy);border-radius:16px;box-shadow:0 3px 0 var(--navy);padding:8px 10px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.bd-card.soon{opacity:.6;background:#eef0f6}
.bd-ic{font-size:34px;line-height:1.1}
.bd-ct b{display:block;font-size:15px;overflow-wrap:anywhere}
.bd-ct small,.bd-pr{display:block;font-size:12px;font-weight:700;opacity:.75;line-height:1.25}
.bd-badge{position:absolute;right:6px;top:6px;background:var(--pink);color:#fff;border:2px solid var(--navy);border-radius:10px;padding:0 7px;font-size:11px}
.bd-badge.soon{background:#9aa3b8}
.bd-bar{display:block;height:8px;border:2px solid var(--navy);border-radius:6px;background:#e6dcc8;overflow:hidden;margin-top:3px}
.bd-bar u{display:block;height:100%;background:var(--pink)}
.bd-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.bd-btns .chip{min-height:48px;padding:6px 10px;font-size:13px}
.bd-btns .chip.go{background:var(--yellow)}
.bd-btns .chip:disabled{opacity:.4}
.bd-fact{margin-top:10px;background:#fff3c4;border:3px solid var(--navy);border-radius:14px;padding:6px 12px}
.bd-fact h4,.bd-disc h4{margin:2px 0 4px}
.bd-fact p{margin:4px 0 8px;line-height:1.4}
.bd-fact .chip{min-height:48px}
.bd-dr{display:flex;align-items:center;gap:10px;margin:8px 0}
.bd-dr .vi{font-size:26px;width:34px;text-align:center}
.bd-dt{flex:1;min-width:0}.bd-dt b{margin-right:8px}
@media(max-height:480px){.bd-box{padding:8px 12px}.bd-h{font-size:17px}.bd-tip{display:none}.bd-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.bd-ic{font-size:26px}}
.bd-tabs .chip.on{background:var(--yellow)}

/* logboek (modal) */
.qhint{font-size:13px;opacity:.75}
.qbtns{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.qbtns .chip{min-height:48px;padding:5px 10px;font-size:13px}
.qbtns .chip.alt{background:#fff}
.qsec.qdone{opacity:.7}

/* tracker: alleen bij een vastgepind (of voorgesteld) doel; ✕ = loslaten */
#quest.hidden{display:none}
.q-eye{font-size:15px;font-weight:900}

/* rustige meldingen: klein, bovenin, niet over het midden */
#qbanner{top:calc(104px + env(safe-area-inset-top));left:auto;right:calc(70px + env(safe-area-inset-right));transform:translate(0,-20px) scale(.9);padding:5px 10px;gap:7px;max-width:min(240px,calc(100vw - 160px))}
#qbanner.show{transform:translate(0,0) scale(1)}
#qbanner .qi{font-size:20px}#qbanner b{font-size:13px}#qbanner small{font-size:11px}
@media(max-width:700px){#qbanner{left:10px;right:auto;top:calc(104px + env(safe-area-inset-top))}#quest:not(.hidden)~#qbanner{top:calc(160px + env(safe-area-inset-top))}}
#qdone{position:absolute;left:10px;top:calc(162px + env(safe-area-inset-top));z-index:9;display:none;align-items:center;gap:8px;max-width:min(330px,calc(100vw - 80px));background:#b7f0a6;padding:6px 30px 6px 10px;flex-wrap:wrap}
#qdone.show{display:flex;animation:qpop .5s ease-out}
#qdone .qi{font-size:28px}
#qdone b{display:block;font-size:15px}#qdone small{display:block;font-size:12px;opacity:.85;font-weight:700}
#qdone .big{font-size:14px;padding:6px 12px;min-height:48px}
.qd-x{position:absolute;right:4px;top:4px;width:26px;height:26px;border-radius:50%;border:2px solid var(--navy);background:#fff;font:inherit;font-size:11px;padding:0;cursor:pointer}
#screen-world.editing #qdone,#screen-world.editing #board{display:none!important}

/* tips-balk: wegklikbaar */
#hintbar:not(.off){pointer-events:auto;cursor:pointer}

/* spelinstellingen in de instellingen-dialoog */
.set-play h4,#modal-body h4{margin:12px 0 4px;text-align:left}
.set-row{display:flex;align-items:center;gap:10px;margin:8px 0;text-align:left}
.set-row .vi{font-size:26px;width:34px;text-align:center}
.set-t{flex:1;min-width:0}.set-t label{display:block;font-size:15px}.set-t small{display:block;font-size:12px;opacity:.7;font-weight:700}
.set-sw{min-width:72px;min-height:48px;border:3px solid var(--navy);border-radius:22px;background:#e4e7f0;font:inherit;font-size:14px;color:var(--navy);cursor:pointer;box-shadow:0 3px 0 var(--navy)}
.set-sw.on{background:#8fd96b}
.set-sw:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}

/* telefoon: tips-balk boven de emote-snelbalk (die staat op 168px) en niet over de joystick/springknop */
@media(max-width:700px){#hintbar{bottom:calc(220px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px)}}