/* Butler Shuffle — aanvullingen op stijl.css voor het speelbare spel. stijl.css is de stijl uit de schermontwerpen. */

/* Achtergrond tot de rand van het toestel, ook onder statusbalk en veegbalk en bij stuiteren: nooit wit.
   html krijgt de onderste zeekleur als vangnet; body vult als vaste laag het hele scherm (inset: 0, niet 100vh/100%,
   want op iOS in standalone-modus met viewport-fit=cover komen die niet tot de onderrand). Alleen het spel zelf (#toestel)
   blijft binnen de veilige zone (main.js). */
html { height: 100%; min-height: calc(100% + env(safe-area-inset-top, 0px)); overflow: hidden; background: #0B4777; overscroll-behavior: none; }
body {
  position: fixed; inset: 0; width: auto; height: auto; margin: 0;
  padding: 0; min-height: 0; overflow: hidden; overscroll-behavior: none;
  background: #0B4777 linear-gradient(#2F9CE2 0, #6CC0EC 30%, #2A82BE 55%, #0B4777 100%) no-repeat;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* Het spel is ontworpen op 390×844 en wordt als geheel geschaald (zie main.js). */
/* Het kader met bediening en tekst: 390 breed, zo hoog als de veilige zone (main.js); geschaald op de volle breedte.
   Canvas en achtergronden lopen eruit door tot de randen van het toestel (--vb/--vo/--vol in ontwerp-pixels). */
#toestel.scr {
  position: absolute; inset: auto; left: 50%; top: 0; width: 390px; height: 844px; border-radius: 0;
  overflow: visible; background: none;
  transform-origin: 50% 0; transform: translateX(-50%) scale(var(--schaal, 1));
}
/* Het canvas beslaat het hele scherm, ook naast de kolom; het midden van de wereld blijft in het midden van de kolom. */
#spel { position: absolute; left: calc((390px - var(--vbr, 390px)) / 2); width: var(--vbr, 390px); top: calc(-1 * var(--vb, 0px)); height: var(--vol, 844px); }
#hud { position: absolute; inset: 0; }
/* Schermen (menu, instellen, toss, uitslag …) staan op hun ontwerpmaat 390×844 en worden op een laag toestel gelijkmatig
   kleiner (--f), zodat de indeling nooit overlapt. #scherm-rand vult de rest tot de randen met dezelfde achtergrond. */
#scherm { position: absolute; inset: auto; left: 0; top: var(--f-top, 0px); width: 390px; height: 844px; transform-origin: 50% 0; transform: scale(var(--f, 1)); }
/* #scherm-rand beslaat het hele scherm, ook naast de kolom (--vbr = volle breedte in ontwerp-pixels, main.js). */
#scherm-rand { position: absolute; left: calc((390px - var(--vbr, 390px)) / 2); width: var(--vbr, 390px); top: calc(-1 * var(--vb, 0px)); height: var(--vol, 844px); z-index: 19; pointer-events: none; overflow: hidden; }
#scherm-rand:empty { display: none; }
#laden { top: calc(-1 * var(--vb, 0px)) !important; bottom: calc(-1 * var(--vo, 0px)) !important; }
#spel canvas { display: block; }
#hud { pointer-events: none; z-index: 10; }
#hud .klik { pointer-events: auto; cursor: pointer; }
#hud > svg { position: absolute; inset: 0; width: 390px; height: 844px; }
#hud svg text, #scherm svg text { font-family: var(--f-display); }
#scherm { z-index: 20; display: none; }
#scherm.open { display: block; }
#scherm.doorzichtig { background: none; }
#scherm > svg.scene { position: absolute; inset: 0; width: 390px; height: 844px; display: block; }
/* Brede schermtekeningen tekenen buiten hun kader door tot de randen van het scherm (schermen.js, BX/BY); body knipt af. */
#scherm > svg.scene.breed { overflow: visible; }
#laden { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--ocean-d); color: var(--cream); font: 400 28px var(--f-display); }

.btn, .seg > *, .tog, .char, [data-actie] { cursor: pointer; }
.btn.off, .char.locked { cursor: default; }
.btn:active:not(.off) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--ink); }
.btn.ingedrukt { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--ink); }

/* Wedstrijd-HUD */
#hud .knop { position: absolute; left: 158px; right: 16px; bottom: 40px; height: 62px; z-index: 6; }
#hud .knop.groot { height: 78px; font-size: 30px; border-radius: 24px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), 0 6px 0 var(--ink), 0 0 0 7px rgba(255, 246, 224, .35); }
#hud .status { left: 158px; right: 14px; bottom: 44px; }
/* Hulptekst bovenaan onder de hellingmeter (plan §0), niet meer voor de butler. */
#hud .stap { left: 50%; top: 200px; transform: translateX(-50%); width: max-content; max-width: 220px; text-align: center; }
/* Het lint staat links boven de stap-hint, zodat het bord "100" en de verste zones vrij blijven. */
#hud .lint { left: 14px; top: 546px; max-width: 280px; }
#hud .stop { position: absolute; left: 14px; top: 124px; width: 38px; height: 38px; z-index: 6; }
#hud .melding { position: absolute; left: 0; right: 0; top: 300px; text-align: center; z-index: 6; }
#hud .melding span { display: inline-block; transform: rotate(-3deg); font: 400 40px/1 var(--f-display); color: var(--cream); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); letter-spacing: 1px; }
.verborgen { display: none !important; }

/* Schermen */
.scherm-tekst { color: var(--cream); font: 700 13px/1.4 var(--f-body); text-align: center; }
.keuze { position: absolute; left: 30px; right: 30px; top: 300px; padding: 18px; text-align: center; color: var(--cream); z-index: 8; }
.keuze .h-title { margin-bottom: 14px; }
.keuze .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dim { position: absolute; inset: 0; background: rgba(8, 20, 34, .6); }
.rows .r { min-height: 27px; }

/* Toss: de munt draait */
@keyframes munt-op { 0% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-190px) rotateX(900deg); } 100% { transform: translateY(0) rotateX(1800deg); } }
.munt { position: absolute; left: 159px; top: 250px; width: 72px; height: 72px; z-index: 6; }
.munt.gooi { animation: munt-op 1.3s cubic-bezier(.3, 0, .7, 1); }

/* Overboord: de butler vliegt in een boog naar de jacuzzi */
@keyframes vlucht { 0% { transform: translate(150px, 300px) rotate(-8deg); } 35% { transform: translate(236px, 196px) rotate(6deg); } 62% { transform: translate(288px, 310px) rotate(16deg); } 100% { transform: translate(196px, 588px) rotate(10deg) scale(.8); } }
@keyframes plons { 0%, 70% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.5); } }
.vlieger { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; animation: vlucht 1.5s cubic-bezier(.3, .2, .6, 1) forwards; }
.vlieger svg { position: absolute; left: -70px; top: -130px; width: 140px; height: 160px; overflow: visible; }
.plons { position: absolute; left: 150px; top: 570px; width: 100px; height: 50px; z-index: 5; opacity: 0; animation: plons 1.9s ease-out forwards; }
@keyframes kop-in { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
.kop-in { animation: kop-in .45s ease-out both; }

/* Overboord: kleine ondertitel onderin met de droge opmerking (plan §0); houdt niets op. */
#hud .opmerking { position: absolute; left: 150px; right: 10px; bottom: 8px; z-index: 6; padding: 5px 10px; border-radius: 10px; border: 2px solid var(--ink); background: rgba(20, 14, 10, .82); color: var(--cream); font: italic 600 13px/1.25 var(--f-quote); }
#hud .opmerking b { display: block; font: 900 8px var(--f-body); letter-spacing: 1.2px; color: var(--brass-l); }
#hud .opmerking q { quotes: none; }

/* Super Butler: gouden flits en "SUPER BUTLER ×3" (±1,5 s). */
#hud .aankondiging { position: absolute; inset: 0; z-index: 7; }
#hud .aankondiging .flits { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 232, 140, .9), rgba(242, 194, 48, .4) 38%, rgba(242, 194, 48, 0) 70%); }
#hud .aankondiging span { position: absolute; left: 0; right: 0; top: 340px; text-align: center; opacity: 0; font: 400 42px/1 var(--f-display); color: #F2C230; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); letter-spacing: 1px; }
#hud .aankondiging.speel .flits { animation: goudflits .8s ease-out both; }
#hud .aankondiging.speel span { animation: aankondiging 1.5s ease-out both; }
@keyframes goudflits { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aankondiging { 0% { opacity: 0; transform: scale(.3) rotate(-10deg); } 18% { opacity: 1; transform: scale(1.15) rotate(-3deg); } 30% { transform: scale(1) rotate(-3deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px) rotate(-3deg); } }

/* Ontslag: groot stempel met één regel uitleg, en reacties bij het scorebord. */
#hud .stempel { position: absolute; left: 18px; right: 18px; top: 300px; z-index: 7; text-align: center; }
#hud .stempel .st { display: inline-block; padding: 6px 18px 4px; border: 6px solid #C8281E; border-radius: 12px; background: rgba(255, 246, 224, .94); color: #C8281E; font: 400 54px/1 var(--f-display); letter-spacing: 2px; transform: rotate(-8deg); box-shadow: 0 5px 0 var(--ink); }
#hud .stempel .uitleg { display: inline-block; margin-top: 16px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--ink); background: rgba(20, 14, 10, .88); color: var(--cream); font: 800 14px/1.3 var(--f-body); }
#hud .stempel.speel .st { animation: stempel .35s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes stempel { 0% { opacity: 0; transform: scale(2.6) rotate(-18deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
#hud .reactie { position: absolute; top: 100px; z-index: 7; padding: 4px 9px 3px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--cream); color: var(--ink); font: 400 17px/1 var(--f-display); box-shadow: 0 3px 0 var(--ink); animation: kop-in .3s ease-out both; }
#hud-reactie0 { left: 34px; }
#hud-reactie1 { right: 34px; }

/* Scorebord: gouden ster (Super Butler) en envelopje (ontslag) op de plek van het bolletje. */
.pip.merk { width: 13px; height: 13px; margin: -1.5px 0; border: none; background: none; border-radius: 0; }
.pip.merk svg { display: block; width: 13px; height: 13px; }
.pip.merk.used { opacity: .6; }


/* Zo speel je en Records */
.uitleg-lijst { overflow-y: auto; touch-action: pan-y; padding: 4px 16px; color: var(--ink); font: 600 13px/1.4 var(--f-body); }
.uitleg-blok { padding: 10px 0; border-top: 2px dashed rgba(42, 27, 18, .2); }
.uitleg-blok:first-child { border-top: none; }
.uitleg-blok b { display: block; font: 400 17px/1.2 var(--f-display); margin-bottom: 3px; }
/* Instellingen: tien regels, iets minder ruimte per regel zodat alles boven de quote blijft */
.paper.compact .set { padding: 10px 14px; }
.privacy-code { margin-top: 6px; font: 700 12px/1.3 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.licentie-tekst { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; font: 600 10px/1.35 var(--f-body); opacity: .75; }
.rec-waarde { margin-left: auto; font: 400 18px/1 var(--f-display); color: var(--ink); white-space: nowrap; }
.nieuw-record { position: absolute; left: 0; right: 0; top: 140px; text-align: center; z-index: 6; }
.nieuw-record span { display: inline-block; padding: 6px 14px; border-radius: 14px; border: 3px solid var(--ink); background: #F2C230; color: var(--ink); font: 400 20px/1.1 var(--f-display); transform: rotate(-4deg); box-shadow: 0 4px 0 var(--ink); animation: kop-in .45s ease-out both; }
.nieuw-record small { display: block; font: 800 11px/1.2 var(--f-body); }

/* Oefenbeurt: uitlegkaart over het spel heen */
#hud .oefen { position: absolute; left: 22px; right: 22px; top: 236px; z-index: 8; padding: 12px 14px; border-radius: 16px; border: 3px solid var(--ink); background: rgba(255, 246, 224, .97); color: var(--ink); box-shadow: 0 5px 0 var(--ink); font: 700 14px/1.35 var(--f-body); }
#hud .oefen .stapnr { font: 900 9px var(--f-body); letter-spacing: 1.4px; opacity: .65; margin-bottom: 4px; text-transform: uppercase; }
#hud .oefen .knoppen { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
#hud .oefen .btn { height: 38px; font-size: 15px; padding: 0 14px; }

/* Versienummer onderin het titelscherm: klein en met lage nadruk, binnen de veilige zone. */
.versie { left: 110px; right: 110px; bottom: 6px; padding: 8px 0; text-align: center; color: var(--cream); opacity: .55; font: 700 9px/1 var(--f-body); letter-spacing: .6px; cursor: default; }
.kort .alleen-lang { display: none !important; }

/* Verduistering van dialogen ligt in #scherm-rand (van rand tot rand); die in het scherm zelf vangt alleen tikken op. */
#scherm > .dim { background: none; }
/* De gouden flits van de Super Butler loopt tot de randen van het toestel. */
#hud .aankondiging .flits { top: calc(-1 * var(--vb, 0px)); bottom: calc(-1 * var(--vo, 0px)); }

/* De Tocht: route met stops, detailkaart en de regel op het uitslagscherm */
.tocht-totaal { font: 400 20px/1 var(--f-display); color: #F2C230; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: 1px; }
.tocht-goud { text-align: center; font: 800 12px/1.3 var(--f-body); color: var(--cream); opacity: .85; }
.tocht-stop { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 3px solid var(--ink); background: var(--cream); display: flex; align-items: center; justify-content: center; font: 400 28px/1 var(--f-display); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tocht-stop svg { width: 26px; height: 31px; }
.tocht-stop.dicht { background: #B9B0A0; border-color: #6B6257; box-shadow: 0 4px 0 #6B6257; }
.tocht-stop.vol { background: linear-gradient(#F9E08F, #E2B13C 55%, #C48F1F); }
.tocht-stop.sel { outline: 4px solid var(--cream); outline-offset: 3px; }
.tocht-label { position: absolute; width: 150px; font: 800 13px/1.2 var(--f-body); color: var(--cream); text-shadow: 0 1px 0 var(--ink), 0 0 6px rgba(0, 0, 0, .5); }
.tocht-label .st { display: block; font-size: 19px; letter-spacing: 2px; color: #F2C230; -webkit-text-stroke: 1px var(--ink); line-height: 1.1; min-height: 2px; }
.tocht-detail { padding: 12px 14px; color: var(--ink); }
.tocht-kop { font: 400 24px/1.1 var(--f-display); margin: 2px 0 8px; }
.tocht-tegen { display: flex; align-items: center; gap: 10px; font: 800 13px/1.25 var(--f-body); }
.tocht-tegen small { display: block; font-weight: 700; font-size: 11.5px; opacity: .75; }
.tocht-tegen .av { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2.5px solid; background: #fff; }
.tocht-tegen .av svg { width: 100%; height: 100%; }
.tocht-doel { margin-top: 8px; font: 800 12px/1.35 var(--f-body); opacity: .85; }
.tocht-regel { margin: 4px 10px 10px; padding: 6px 10px; border-radius: 12px; border: 2.5px solid var(--ink); background: #F2C230; color: var(--ink); text-align: center; font: 400 19px/1.15 var(--f-display); letter-spacing: .5px; }
.tocht-regel.verloren { background: var(--cream); font-size: 15px; }
.tocht-regel small { display: block; font: 800 11px/1.2 var(--f-body); letter-spacing: 0; }