/* PRJ-028 H1 Foto-paren, style A on Pausito-kit 2.1.0 (pk-2.1.0.css is loaded first). Generated by platform/build_photopairs.py; do not edit by hand.
   claude-restyle-p4p5-1014 / claude-opus-5-5 / 2026-10-14: frame = kit; the playing cards (.card/.face) keep their own look.
   pv-20261020-foto-paren-01 / claude-opus-5-5 / 2026-10-20 (candidate): frame in the kit's angular form (data-pk-vorm=hoekig, as hub/Sim);
   card states (chosen, found, no pair) carry a mark besides colour, one visible focus ring, #status line, opacity-only screen fade. */
:root{--bg:var(--pk-ink);--cream:var(--pk-cream);--muted:var(--pk-sub);--line:var(--pk-line);--gold:var(--pk-gold);--teal:var(--pk-teal)}
body{margin:0;padding:0 16px 24px}
.screen{max-width:980px;margin:0 auto}
/* Head (N5: the way back to all games stays visible while scrolling and reads as a back button: chevron, 44 px target). */
.bar{position:sticky;top:0;z-index:4;max-width:980px;margin:0 auto 8px;padding:max(8px,env(safe-area-inset-top)) 10px 8px;background:#0C0B14C7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0}
.bar .brand{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border:2px solid var(--pk-line-2);border-radius:var(--pk-r-quiet);background:#0C0B14B8;color:var(--pk-cream);font:600 calc(16px*var(--pk-scale))/1.2 var(--pk-font-text);text-decoration:none}
.bar .brand::before{content:'\2039' / '';font-size:24px;line-height:1;margin-top:-3px}
.bar .brand:hover{background-color:#FEEDBA14}
.bar .pk-head__brand{margin-left:auto;min-width:0;gap:8px;text-align:right;line-height:1.15;font-size:calc(19px*var(--pk-scale))}
.bar .pk-head__brand small{display:inline-block;font-size:calc(13px*var(--pk-scale))}
.bar .pk-head__brand img{width:30px;height:30px}
.bar .pk-head__brand strong{font-weight:600;color:var(--pk-cream)}
/* Menu */
#menu>h1{text-align:center;margin:14px 0 8px}
.hint,.note{text-align:center;color:var(--pk-sub);max-width:520px;margin-inline:auto}
.modes{max-width:520px;margin:20px auto 26px}
.mode{min-height:112px}
.mode[data-mode=expert]{--c:var(--pk-gold);--s:var(--pk-gold-s)}.mode[data-mode=challenge]{--c:var(--pk-teal);--s:var(--pk-teal-s)}.mode[data-mode=casual]{--c:var(--pk-cream);--s:var(--pk-cream-s)}
.mode .pk-card__title{font-size:clamp(24px,7vw,30px)}
.mode .pk-card__sub{font-size:calc(15px*var(--pk-scale));line-height:1.35}
.mode .pk-card__icon svg circle:last-child{fill:currentColor}
/* Game: heading with chips; the cards are the game's own pieces */
.hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 10px}.hud h2{margin:0 auto 0 0;font-size:calc(24px*var(--pk-scale))}
.hud .pk-chip{min-height:36px;padding:0 11px;font-size:calc(15px*var(--pk-scale))}.hud .pk-chip:empty{display:none}#clock{font-variant-numeric:tabular-nums}
.board{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:10px}
/* #status: every pick, pair and miss in one sentence (role=status). Room is reserved for the longest miss (two 31-character names plus
   the expert penalty): three lines on a phone, two up to 759 px, one wider, so the board never jumps. */
.status{min-height:1.45em;margin:0 0 12px;font:600 calc(17px*var(--pk-scale))/1.45 var(--pk-font-text);color:var(--pk-cream)}
.status[data-tone=match]{color:var(--pk-teal)}.status[data-tone=match]::before{content:'\2713\00a0' / ''}
.status[data-tone=miss]{color:var(--pk-coral)}.status[data-tone=miss]::before{content:'\2715\00a0' / ''}
@media (max-width:759px){.status{min-height:2.9em}}
@media (max-width:520px){.status{min-height:4.2em;font-size:calc(15px*var(--pk-scale));line-height:1.4}}
.card{position:relative;aspect-ratio:3/4;border:0;padding:0;background:transparent;cursor:pointer;perspective:700px;border-radius:14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.card .inner{position:absolute;inset:0;transition:transform .32s cubic-bezier(.33,0,.2,1);transform-style:preserve-3d}
.card.up .inner,.card.done .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .2s,background-color .2s}
.front{background:#26203a;border:3px solid var(--pk-line-3);color:var(--pk-sub);font:600 26px var(--pk-font-display)}
.back{transform:rotateY(180deg);background:#15121f;border:3px solid var(--pk-cream)}
/* pn2-20261020-foto-paren-01: real pictures are cropped around their focus point (content focus.x/y, set by app.js as --fx/--fy); when a
   picture cannot load, the card shows its name instead, so the pair stays findable. */
.back img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.back .alt{display:none;padding:6px;text-align:center;font:600 13px/1.25 var(--pk-font-text);color:var(--pk-cream);overflow-wrap:anywhere;hyphens:auto}
.card.noimg .back img{display:none}.card.noimg .back .alt{display:block}
.help{max-width:640px;margin:14px auto 0;text-align:center;color:var(--pk-sub);font-size:calc(14px*var(--pk-scale));line-height:1.4}
@media (max-width:400px){body{padding-inline:10px}.board{gap:7px}}
/* Mouse hover and touch press only on cards that can still be turned; while two cards are shown (aria-busy) nothing invites a tap. */
@media (hover:hover){.card:not(.up,.done):hover .front{border-color:var(--pk-cream);background-color:#2f2747}}
.card:not(.up,.done):active .front{background-color:#1c1729}
.board[aria-busy=true] .card,.card.done{cursor:default}
/* Chosen first card: gold frame. Found: teal frame + check. No pair: coral frame + cross, until the cards turn back. */
.card.sel .back{border-color:var(--pk-gold);outline:3px solid var(--pk-gold);outline-offset:-7px}
.card.done .back{border-color:var(--pk-teal)}.card.miss .back{border-color:var(--pk-coral);outline:3px solid var(--pk-coral);outline-offset:-7px}
.card.done::after,.card.miss::after{position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px;display:grid;place-items:center;font:800 19px/1 var(--pk-font-text);color:var(--pk-on-accent);box-shadow:0 3px 0 #0008}
.card.done::after{content:'\2713' / '';background:var(--pk-teal)}.card.miss::after{content:'\2715' / '';background:var(--pk-coral)}
/* Keyboard focus: one solid ring with a dark gap, readable on every picture (the chosen frame stays gold, focus stays cream). */
.card:focus-visible{outline:3px solid var(--pk-focus);outline-offset:3px;box-shadow:0 0 0 3px var(--pk-ink)}
#menuTitle:focus,#endTitle:focus{outline:none}
@media (min-width:760px){.board{gap:14px}
 /* release60 / evaluator UI2-spel R1: on a wide, low screen the cards (3:4, at most four rows) fit the height, nothing to scroll. */
 .board:has(.card){--kh:max(96px,calc((100dvh - 300px) / 4));max-width:calc(var(--cols,4) * var(--kh) * .75 + (var(--cols,4) - 1) * 14px);margin-inline:auto}}
/* "Gevonden!" as a sticker, over the middle of the board so it never covers the #status sentence (pv-20261020-foto-paren-01). */
.shout{position:fixed;left:50%;top:46%;z-index:6;transform:translateX(-50%) rotate(-2deg);font:600 30px/1.2 var(--pk-font-display);color:var(--pk-on-accent);background:var(--pk-gold);border-radius:var(--pk-r-pill);padding:4px 20px;box-shadow:0 5px 0 var(--pk-gold-s);opacity:0;pointer-events:none;transition:opacity .2s;width:max-content;max-width:calc(100vw - 24px);text-align:center}
.shout.on{opacity:1}
/* pn2-20261020-foto-paren-01: on a phone the sticker stays one short line (it wrapped to three and covered a block of cards). */
@media (max-width:520px){.shout{font-size:22px;padding:3px 14px}}
/* End screen: kit .pk-end with three equal choices (EV-2, D-174): same height and width, colour marks them, nothing starts by itself. */
#end{padding-top:8px}#summary{margin:0;color:var(--pk-sub)}
.gallery{width:100%;list-style:none;padding:0;margin:4px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;text-align:left}
.gallery li{min-width:0}.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);border-radius:var(--pk-r-tile);border:3px solid var(--pk-cream);box-shadow:0 5px 0 var(--pk-cream-s)}
.gallery strong{display:block;margin-top:6px;overflow-wrap:anywhere;hyphens:auto}
.gallery small{display:block;color:var(--pk-sub);font-size:12px;overflow-wrap:anywhere}.gallery a{color:var(--pk-cream)}
.endActions{max-width:980px}
#debug{position:fixed;right:8px;bottom:8px;max-width:min(300px,70vw);max-height:30vh;overflow:hidden;pointer-events:none;opacity:.85;background:#000c;color:#9f9;font:11px/1.3 ui-monospace,monospace;padding:8px;border-radius:8px;z-index:20}
/* Rustig and Tekstgrootte (calm.js values, read in app.js): the kit stops all motion for data-calm and prefers-reduced-motion; text size
   zooms the frame, so the kit's own text scale stays 1 here (no double scaling). */
html[data-calm] *,html[data-calm] *::before,html[data-calm] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.card .inner,.face,.shout{transition:none}}
/* Calm screen change: a short fade (opacity only, no movement), never for Rustig or reduced motion. */
@media (prefers-reduced-motion:no-preference){html:not([data-calm]) .screen:not([hidden]){animation:pp-in .22s ease-out}}
@keyframes pp-in{from{opacity:0}}
html[data-text-size]{--pk-scale:1}
html[data-text-size] .bar,html[data-text-size] #menu,html[data-text-size] .hud,html[data-text-size] #status,html[data-text-size] .help,html[data-text-size] #end>h2,html[data-text-size] #summary,html[data-text-size] .endActions{zoom:var(--ps-text,1)}
/* I-2 / I-10: crawlable explanation and FAQ below the game (native details/summary). */
.seoIntro,.inhoud-faq{max-width:640px;margin:32px auto 56px;padding:0 18px;line-height:1.6;color:var(--pk-sub)}.inhoud-faq{margin-top:0}
.seoIntro h2,.inhoud-intro h2,.inhoud-faq h2{font-size:calc(22px*var(--pk-scale));color:var(--pk-cream)}.seoIntro a,.inhoud-faq a{color:var(--pk-gold)}
.inhoud-faq details{border-top:1px solid var(--pk-line-2);padding:10px 0}.inhoud-faq summary{font-weight:700;color:var(--pk-cream);min-height:44px;display:flex;align-items:center}.inhoud-faq p{margin:8px 0 0}
/* Legal M4: footer link to the legal page. */
.legal{text-align:center;margin:28px 0 20px;font-size:14px}.legal a{color:var(--pk-sub)}

/* Stijl-overhaul 30/10/2026: resten van de ronde vorm. */
[data-pk-vorm="hoekig"] .bar{background:#000}