/* PRJ-028 Mahjong (ALFATEGEL-POMA-MAHJONG-20260927). claude-code-pausito-0927 / claude-opus-5-5 / 2026-09-27. Handwritten; loaded after pk-2.1.0.css.
   Big tiles for a phone: six columns fill the width (max 78 px), 3D-ish layer offset, no animation needed to play.
   Modified_by: claude-restyle-p4p5-1014 / claude-opus-5-5 / uitvoerder / 2026-10-14: style A on Pausito-kit 2.1.0. The frame (head with the
   Pausito mark, choice cards, chips, tool buttons, end screen, focus, Rustig) comes from the kit; the tiles below are playing pieces and keep
   their own look, including the teal (picked) and gold (hint) rings. */
: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;font-size:calc(17px*var(--pk-scale))}
.screen{max-width:720px;margin:0 auto}
/* Head (N5, ticket PAUSITO_GSM_EENHANDIG_TERUG_20260927: "‹ Alle spellen" stays visible while scrolling, 44 px target). */
.bar{position:sticky;top:0;z-index:4;max-width:720px;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 0 24px 28px/0 0 22px 26px}
.bar .brand{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px 0 12px;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: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: two kit choice cards */
#menu>h1{text-align:center;margin:14px 0 8px}.hint{text-align:center;color:var(--pk-sub);max-width:520px;margin:0 auto 20px}
.modes{max-width:520px;margin:0 auto}
.mode{min-height:112px;--c:var(--pk-gold);--s:var(--pk-gold-s)}
.mode[data-set=pictures]{--c:var(--pk-teal);--s:var(--pk-teal-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}
/* Game */
.hud{display:flex;gap:10px 16px;align-items:center;justify-content:space-between;margin:4px 0 10px}.hud h2{margin:0;font-size:calc(24px*var(--pk-scale))}
#left{font-variant-numeric:tabular-nums;min-height:36px;padding:0 11px;font-size:calc(15px*var(--pk-scale))}#left:empty{display:none}
.board{--gap:4px;--tw:min(78px,calc((min(100vw,720px) - 32px - 3 * var(--gap)) / var(--cols,6)));--th:calc(var(--tw) * 1.3);position:relative;margin:8px auto 14px;
  width:calc(var(--tw) * var(--cols,6) + 3 * var(--gap));height:calc(var(--th) * var(--rows,6) + 3 * var(--gap));touch-action:manipulation}
/* release60 / evaluator UI2-spel R1: on a wide, low screen the tiles fit the height, so board and tools fit one screen. */
@media (min-width:760px){.board{--tw:min(78px,calc((min(100vw,720px) - 32px - 3 * var(--gap)) / var(--cols,6)),max(40px,calc((100dvh - 330px) / var(--rows,6) / 1.3)))}}
/* pv-20261020-mahjong-01: legend and note above the board take about 40 px more, so the height share is reduced to keep the tools in view. */
@media (min-width:760px){.board{--tw:min(78px,calc((min(100vw,720px) - 32px - 3 * var(--gap)) / var(--cols,6)),max(40px,calc((100dvh - 370px) / var(--rows,6) / 1.3)))}}
.tile{position:absolute;left:calc(var(--x) * var(--tw) + var(--z) * var(--gap));top:calc(var(--y) * var(--th) + (2 - var(--z)) * var(--gap));width:calc(var(--tw) - 2px);height:calc(var(--th) - 2px);
  padding:3px;border:2px solid #b9ab84;border-radius:10px;background:linear-gradient(#fffaf0,#f1e6c8);box-shadow:3px 4px 0 #6d6250,5px 7px 0 #2a2433;cursor:pointer;filter:brightness(.62)}
.tile.free{filter:none}
.tile.picked{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal),3px 4px 0 #6d6250}
.tile.hinted{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold),3px 4px 0 #6d6250}
/* Tile state as a shape too (porta pv-20261020-mahjong-01 / claude-opus-5-5 / 2026-10-20). The colours above stay as they were: blocked
   tiles keep the same dimming and also get stripes; the picked tile lifts a little and gets a check badge, hint tiles a star badge. The badges
   use the existing teal and gold on the existing ink; the face colours (.fr .fb .fg .tb .tr .tg .frame) are untouched. */
.tile.blocked{cursor:not-allowed}
.tile.blocked::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:repeating-linear-gradient(135deg,#0C0B1452 0 3px,#0000 3px 9px)}
.tile.picked{z-index:2;transform:translateY(-5px);transition:transform var(--pk-t-press,90ms) ease-out}
.tile.picked::before,.tile.hinted::before,.tile.nope::before{position:absolute;z-index:3;top:-11px;right:-11px;display:grid;place-items:center;width:26px;height:26px;
  border:2px solid var(--pk-ink);border-radius:50%;font:800 16px/1 var(--pk-font-text,system-ui);color:var(--pk-on-accent);pointer-events:none}
.tile.picked::before{content:"✓";background:var(--teal)}
.tile.hinted:not(.picked)::before{content:"★";background:var(--gold)}
.tile.nope::before{content:"✕";background:var(--pk-cream);border-radius:4px}
.tile.nope::after{background:repeating-linear-gradient(135deg,#0C0B148C 0 3px,#0000 3px 7px)}
.tile svg,.tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;pointer-events:none}
.tile svg .fr{fill:#c0392b}.tile svg .fb{fill:#1f4e9e}.tile svg .fg{fill:#1e7b45}.tile svg .ln{stroke:#f1e6c8;stroke-width:2}
.tile svg text{text-anchor:middle;font-family:"Noto Serif CJK SC","Noto Sans CJK SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB",serif;font-weight:700}
.tile svg .big{font-size:44px}.tile svg .mid{font-size:34px}.tile svg .huge{font-size:62px}
.tile svg .tb{fill:#1b1b1b}.tile svg .tr{fill:#c0392b}.tile svg .tg{fill:#1e7b45}.tile svg .frame{fill:none;stroke:#1f4e9e;stroke-width:5}
.tile:focus-visible{outline:3px dashed var(--pk-cream);outline-offset:3px}
/* Focus sits outside the 4 px teal/gold ring and above the neighbouring tiles. */
.tile:focus-visible{z-index:4;outline-offset:7px}
/* Legend under the HUD: the same shapes in small (a free tile, stripes, check, star). */
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0 auto 2px;padding:0;list-style:none;color:var(--pk-sub);font-size:calc(15px*var(--pk-scale));line-height:1.3}
.legend li{display:inline-flex;align-items:center;gap:7px}
.swatch{position:relative;display:inline-grid;place-items:center;width:17px;height:22px;box-sizing:border-box;border:2px solid #b9ab84;border-radius:4px;background:linear-gradient(#fffaf0,#f1e6c8);
  color:#1b1b1b;font:800 12px/1 var(--pk-font-text,system-ui)}
.swatch.blocked{filter:brightness(.62)}
.swatch.blocked::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0C0B1452 0 2px,#0000 2px 5px)}
.swatch.picked{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.swatch.hinted{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.keys{text-align:center;color:var(--pk-label);font-size:calc(14px*var(--pk-scale));max-width:520px;margin:14px auto 0}
@media (hover:none) and (pointer:coarse){.keys{display:none}}
/* Stuck: the shuffle button gets an extra ring; New game asks for a second tap while a game is under way. */
.tools #shuffle.nudge{outline:3px solid var(--teal);outline-offset:4px}
.tools #new.confirm{outline:3px solid var(--pk-cream);outline-offset:4px}
/* Tools: kit buttons; hint gold (matches the gold hint ring), shuffle teal, undo and new game cream */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;max-width:520px;margin:0 auto}
.tools .pk-btn{width:100%}
#hint{--c:var(--pk-gold);--s:var(--pk-gold-s)}#shuffle{--c:var(--pk-teal);--s:var(--pk-teal-s)}
.tools .pk-btn:disabled{--c:var(--pk-line-3);--s:var(--pk-deep);color:var(--pk-label)}
.note{text-align:center;color:var(--pk-gold);min-height:1.4em;margin:14px auto 0;max-width:520px}
/* The note now sits above the board, so feedback stays in view on a phone; two lines are reserved to keep the board still. */
#game .note{min-height:2.7em;margin:6px auto 4px;line-height:1.35;font-size:calc(16px*var(--pk-scale));display:flex;align-items:center;justify-content:center}
@media (max-width:420px){.tools{gap:12px 10px}.hud{margin:2px 0 6px}.legend{gap:4px 12px;font-size:calc(14px*var(--pk-scale))}#game .note{font-size:calc(15px*var(--pk-scale))}}
@media (max-width:340px){body{padding:0 10px 20px}.board{--tw:min(78px,calc((min(100vw,720px) - 20px - 3 * var(--gap)) / var(--cols,6)))}.tools .pk-btn{padding-inline:10px}}
/* End screen: kit .pk-end; Mahjong has two equal choices (same height and width), side by side once the screen is wide enough. */
#end{padding-top:12px}#summary{margin:0;color:var(--pk-sub)}
@container (min-width:640px){#end .pk-end__choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 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] *{animation:none!important;transition:none!important}
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] .tools,html[data-text-size] .note,html[data-text-size] #end,html[data-text-size] .legend,html[data-text-size] .keys{zoom:var(--ps-text,1)}
/* Legal M4 (release53, zelfstandig-20260928-B): footer link to the legal page. */
.legal{text-align:center;margin:28px 0 20px;font-size:14px}.legal a{color:var(--pk-sub)}

/* Local Mahjong frame geometry; retain all existing palette and playing-piece rules. */
html.pk-root :is(.bar, .bar .brand, .mode.pk-card, .mode .pk-card__icon, .hud .pk-chip, .tools .pk-btn, #end .pk-btn){border-radius:0}

/* porta pn2-20261020-mahjong-01 / claude-opus-5-5 / 2026-10-20 (candidate). Palette, face colours, dimming and rings above stay as they are.
   1. Narrow screens with Tekstgrootte: the zoomed head and HUD no longer push the page sideways (320 px at 1.3 scrolled 59 px). The brand
      drops under the back link only when both do not fit; the HUD title keeps its word whole and the count chip moves to its own line. */
.bar{flex-wrap:wrap;row-gap:4px}
.bar .pk-head__brand{min-width:0}
.hud{flex-wrap:wrap}.hud h2{overflow-wrap:normal}
/* 2. Blocked tiles: the stripes now hatch only the tile's edge (the cream frame around the face), so the face itself is no darker than
      the existing dimming; the tapped-blocked flash (.nope) still hatches the whole tile for a moment. Same for the legend swatch. */
.tile.blocked:not(.nope)::after,.swatch.blocked::after{box-sizing:border-box;padding:6px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tile.blocked:not(.nope)::after{background:repeating-linear-gradient(135deg,#0C0B1480 0 2px,#0000 2px 5px)}
.swatch.blocked::after{padding:3px}
/* 3. Keyboard focus on a tile: the kit's dashed cream line, now on an ink band inside and outside it, so it stays readable where it crosses
      the cream neighbouring tiles; the teal/gold ring of a picked or hint tile stays visible inside the band. */
.tile:focus-visible{outline:3px dashed var(--pk-cream);outline-offset:6px;box-shadow:0 0 0 6px var(--pk-ink),0 0 0 12px var(--pk-ink),3px 4px 0 #6d6250}
.tile.picked:focus-visible{box-shadow:0 0 0 4px var(--teal),0 0 0 6px var(--pk-ink),0 0 0 12px var(--pk-ink)}
.tile.hinted:not(.picked):focus-visible{box-shadow:0 0 0 4px var(--gold),0 0 0 6px var(--pk-ink),0 0 0 12px var(--pk-ink)}
/* Stijl-overhaul 30/10/2026: resten van de ronde vorm. */
[data-pk-vorm="hoekig"] .bar{background:#000}