/* Tap Board — styles
   Display discipline (Blueprint §2.1 / Lane 6): dark quiet background,
   off-white buttons with near-black text (contrast > 12:1), Okabe–Ito
   accent colors used as thin category frames only — meaning is never
   carried by color alone (position + picture + printed word repeat it).
   No flashing, no ambient animation; press feedback is a steady outline. */
:root{
  --bg:#14181d;
  --panel:#1d232b;
  --btn:#f7f3e8;
  --btnInk:#141414;
  --ink:#f2efe6;
  --inkDim:#c9cdd4;
  --accent:#e69f00;      /* Okabe–Ito orange */
  --accent2:#0072b2;     /* Okabe–Ito blue */
  --accent3:#009e73;     /* Okabe–Ito bluish green */
  --accent4:#cc79a7;     /* Okabe–Ito reddish purple */
  --accent5:#56b4e9;     /* Okabe–Ito sky blue */
  --accent6:#d55e00;     /* Okabe–Ito vermillion */
  --danger:#e8e3d5;
  --cellMin:104px;       /* LARGEST target tier is the default (age 4) */
  --symMax:76px;
  --labelSize:1.3rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Verdana, Geneva, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.screen{padding:10px; max-width:1200px; margin:0 auto}
button{font:inherit; cursor:pointer}
:focus-visible{outline:4px solid var(--accent5); outline-offset:2px}

.card{background:var(--panel); border-radius:16px; padding:22px; max-width:640px; margin:24px auto}
.card h1{margin:.2em 0 .4em; font-size:2rem}
.card p{line-height:1.5; font-size:1.05rem}
.stamp{border:2px solid var(--accent); color:var(--ink); border-radius:10px; padding:8px 12px; font-weight:bold; letter-spacing:.02em}
.madeFor{font-size:1.15rem}
.bigbtn{
  background:var(--accent2); color:#fff; border:none; border-radius:14px;
  min-height:56px; padding:12px 22px; font-size:1.15rem; font-weight:bold;
}
.bigbtn.small{min-height:52px; font-size:1.02rem; padding:10px 16px; margin:4px 4px 4px 0}
.bigbtn.danger{background:#5a616b}
.checklist{background:var(--panel); border-radius:16px; padding:18px 22px; max-width:640px; margin:16px auto}
.checklist li{margin:.7em 0; line-height:1.5}

/* ===== child surface ===== */
#stripBar{
  display:flex; align-items:stretch; gap:8px; position:sticky; top:0;
  background:var(--bg); padding:6px 2px; z-index:5;
}
#appName{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:4px 8px; min-width:86px; user-select:none; -webkit-user-select:none; touch-action:none;
}
#appNameText{font-weight:bold; font-size:1rem; line-height:1.1}
.expTag{font-size:.68rem; border:1.5px solid var(--accent); border-radius:6px; padding:1px 5px; margin-top:3px; color:var(--ink)}
#strip{
  flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  background:var(--panel); border-radius:12px; padding:8px; min-height:72px;
}
.stripWord{
  background:var(--btn); color:var(--btnInk); border-radius:8px;
  padding:6px 10px; font-size:1.15rem; font-weight:bold; display:flex; align-items:center; gap:6px;
}
.stripWord img{width:30px; height:30px; object-fit:contain}
.chrome{
  border:none; border-radius:12px; background:var(--panel); color:var(--ink);
  min-width:60px; min-height:72px; font-size:1.5rem; padding:6px 10px;
}
.chrome.speak{background:var(--accent3); color:#fff; font-size:1.25rem; font-weight:bold; min-width:104px}
.voiceNote{
  background:#3a2f10; color:#ffe9a8; border:1.5px solid var(--accent);
  border-radius:10px; padding:8px 12px; font-size:1rem; margin:8px 2px;
}
#pageTabs{display:flex; gap:8px; flex-wrap:wrap; margin:8px 2px}
#pageTabs button{
  border:2.5px solid var(--inkDim); background:var(--panel); color:var(--ink);
  border-radius:12px; min-height:54px; padding:8px 16px; font-size:1.1rem; font-weight:bold;
}
#pageTabs button[aria-current="page"]{border-color:var(--accent); background:#2a3138}

#grid, #partnerGrid{
  display:grid; gap:10px; margin-top:6px;
}
.cell{
  background:var(--btn); color:var(--btnInk); border:4px solid transparent; border-radius:16px;
  min-height:var(--cellMin); padding:8px 4px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  text-align:center; position:relative; width:100%;
}
.cell img{width:var(--symMax); height:var(--symMax); max-width:82%; object-fit:contain; pointer-events:none}
.cell .word{font-size:var(--labelSize); font-weight:bold; line-height:1.15; pointer-events:none; overflow-wrap:anywhere}
.cell.cat{border-color:var(--catColor, var(--inkDim))}
.cell.pressed{outline:5px solid var(--accent5); outline-offset:1px}
.cell .novoice{
  position:absolute; top:6px; right:8px; width:12px; height:12px; border-radius:50%;
  background:var(--accent6); border:2px solid #fff;
}
.cell.emptyCell{background:transparent; border:3px dashed #3a424c; color:var(--inkDim)}
.cell.photoBtn img{border-radius:10px; object-fit:cover; width:calc(var(--symMax) + 8px); height:calc(var(--symMax) + 8px)}

/* category frame colors — redundant coding only (word + picture carry meaning) */
.cat-food{--catColor:var(--accent)} .cat-play{--catColor:var(--accent3)}
.cat-people{--catColor:var(--accent4)} .cat-places{--catColor:var(--accent2)}
.cat-feelings{--catColor:var(--accent5)} .cat-school{--catColor:var(--accent6)}

/* ===== setup ===== */
.setupHead{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.setupBlock{background:var(--panel); border-radius:14px; padding:16px 18px; margin:14px 0}
.setupBlock h3{margin-top:0}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0}
.row input[type="text"], .row select{
  font:inherit; padding:10px; border-radius:10px; border:2px solid var(--inkDim);
  background:#fff; color:#141414; min-height:48px;
}
.row input[type="range"]{min-height:48px; flex:1; min-width:140px}
.note{color:var(--inkDim); line-height:1.5}
.fileLabel{display:inline-flex; align-items:center}
#editPages .editGrid{display:grid; gap:8px; margin:8px 0 16px}
.editCell{
  min-height:72px; border-radius:12px; border:3px solid #3a424c; background:#232a32; color:var(--ink);
  font-size:.95rem; padding:6px; overflow-wrap:anywhere;
}
.editCell.filled{border-color:var(--inkDim); background:#2b333d}
.editCell.custom{border-style:dashed}
#recordList .recRow, #autoBackups .bkRow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1.5px solid #333c46; padding:8px 0;
}
.recBadge{font-size:.8rem; border:1.5px solid var(--accent); border-radius:6px; padding:2px 7px}
.recBadge.have{border-color:var(--accent3)}
.modelCard{border:2px solid #333c46; border-radius:12px; padding:10px 14px; margin:10px 0}
.modelCard h4{margin:.2em 0}
.modelCard ul{margin:.3em 0; line-height:1.55}
#importMsg{font-weight:bold}
#partnerGrid .cell{min-height:calc(var(--cellMin) + 30px)}

/* ===== progress journal (setup only) ===== */
.jChip{
  border:2.5px solid var(--inkDim); background:#232a32; color:var(--ink);
  border-radius:999px; min-height:48px; padding:8px 16px; font-weight:bold;
}
.jChip.on{border-color:var(--accent); background:#2a3138}
#journalList .jRow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1.5px solid #333c46; padding:8px 0;
}
.jBadge{font-size:.8rem; border:1.5px solid var(--accent2); border-radius:6px; padding:2px 7px}
.jDate{margin:14px 0 4px}
#voiceStatus{font-weight:bold}

/* ===== tablet (iPad) — her main device =====
   The largest target tier (--cellMin:104px) is already the default
   at every size. On a tablet canvas the cells, strip, and chrome
   grow further, so the board fills the iPad with the biggest
   comfortable targets instead of phone-sized ones. Nothing at
   tablet widths ever shrinks a target. */
@media (min-width:700px){
  :root{--cellMin:132px; --symMax:96px; --labelSize:1.45rem}
  .chrome{min-height:84px; min-width:68px}
  .chrome.speak{min-width:132px}
  #strip{min-height:84px}
  #pageTabs button{min-height:60px}
}
@media (min-width:1100px){
  :root{--cellMin:148px; --symMax:104px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ===== play (v1.2) — games beside the board =====
   Play has its own screens; the board is untouched by anything
   here. Targets stay big, every action is a tap, and the only
   motion is a gentle completion pulse (killed entirely by the
   reduced-motion rule above). No timers, no scores, no flashing. */
.playEntry{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin:4px 0 2px; min-height:64px;
  background:var(--accent3); color:#fff; border:none; border-radius:14px;
  font-size:1.35rem; font-weight:bold;
}
.playEntry .playTri{font-size:1.1rem}
.playCard{
  display:flex; align-items:center; gap:14px; width:100%;
  min-height:88px; margin:10px 0; padding:14px 18px;
  background:var(--btn); color:var(--btnInk); border:none; border-radius:16px;
  font-size:1.4rem; font-weight:bold; text-align:left;
}
.playCardArt{font-size:2rem}
.playHead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.playHead h3{font-size:1.6rem; margin:.3em 0}
.playDone{
  font-size:1.5rem; font-weight:bold; text-align:center;
  background:var(--panel); border:2.5px solid var(--accent3); border-radius:14px;
  padding:12px; margin:12px 0;
}
#colorStage{
  background:#fff; border-radius:16px; padding:10px; margin:8px 0;
}
#colorStage .colorSvg{width:100%; height:auto; max-height:56vh; display:block}
#colorStage .cRegion{cursor:pointer}
#colorStage .cDetail{pointer-events:none}
#colorPalette{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0}
.swatch{
  width:60px; height:60px; border-radius:50%;
  border:3.5px solid #3a424c; padding:0;
}
.swatch.on{border-color:var(--ink); outline:4px solid var(--accent5); outline-offset:2px}
.puzzleBoard{display:grid; gap:8px; max-width:560px; margin:8px auto}
.pSlot{
  aspect-ratio:1; border-radius:12px; padding:0;
  border:3.5px dashed #3a424c; background:#232a32;
  background-repeat:no-repeat;
}
.pSlot.glow{border-style:solid; border-color:var(--accent); box-shadow:0 0 14px 2px rgba(230,159,0,.45)}
.pSlot.filled{border-style:solid; border-color:var(--accent3); background-color:#fff}
.pSlot.ghost{background-color:#fff; opacity:.55}
#puzzleTray{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0}
.pPiece{
  width:104px; height:104px; border-radius:12px; padding:0;
  border:3.5px solid var(--inkDim); background-color:#fff; background-repeat:no-repeat;
}
.pPiece.sel{border-color:var(--accent); outline:5px solid var(--accent5); outline-offset:2px}
.pPiece.nudge{animation:nudge .3s ease}
@keyframes nudge{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
#matchBoard{display:grid; gap:10px; max-width:640px; margin:8px auto}
.mCard{
  aspect-ratio:.92; border-radius:14px; padding:6px;
  border:3.5px solid #3a424c; background:var(--panel); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.mCard .mBack{font-size:2rem; color:var(--accent)}
.mCard.up{background:var(--btn); color:var(--btnInk); border-color:var(--inkDim)}
.mCard.matched{border-color:var(--accent3); outline:3px solid var(--accent3)}
.mCard img{width:72%; height:72%; object-fit:contain; pointer-events:none}
.mCard .mWord{font-size:1.15rem; font-weight:bold}
.celebrate{animation:celebrate .8s ease}
@keyframes celebrate{0%{transform:scale(1)} 40%{transform:scale(1.025)} 100%{transform:scale(1)}}
@media (max-width:520px){
  :root{--cellMin:92px; --symMax:64px; --labelSize:1.15rem}
  .chrome{min-width:52px}
  .chrome.speak{min-width:92px}
}

/* ===== parent gate (v1.2.2) =====
   The hold fill: a bar under the app name that fills while a
   grown-up holds it, so the deliberate gesture is visible while
   it is happening. A plain tap shows nothing and does nothing. */
#appName{position:relative}
#holdFill{
  position:absolute; left:8px; bottom:2px; height:4px; width:0;
  border-radius:2px; background:var(--accent); opacity:0;
}
#appName.holding #holdFill{opacity:1; width:calc(100% - 16px); transition:width 1.2s linear}
.gateOverlay{
  position:fixed; inset:0; z-index:50; padding:16px;
  background:rgba(10,12,14,.72);
  display:flex; align-items:center; justify-content:center;
}
.gateOverlay[hidden]{display:none}
.gateCard{background:var(--panel); border-radius:16px; padding:22px; max-width:430px; width:100%}
.gateQ{font-size:1.9rem; font-weight:bold; margin:12px 0}
.gateCard input{
  font-size:1.25rem; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--accent); background:var(--bg); color:var(--ink);
  max-width:170px;
}
.gateMsg{color:var(--accent3); font-weight:bold; min-height:1.25em}