/*
 * Trebejo UI Contract 1.0
 * Canonical reusable shell for all Trebejo games, including games in other repositories.
 * Same-origin URL: /arcade/trebejo-game-shell.css
 * Game artwork and physics remain isolated inside .tj-stage / iframe.
 */
:root{
  --tj-coal:#0b0d12;
  --tj-coal-soft:#171c26;
  --tj-ivory:#f7f5ee;
  --tj-paper:#fff9ec;
  --tj-ink:#171321;
  --tj-pink:#ff2d55;
  --tj-teal:#00e5d7;
  --tj-yellow:#ffda39;
  --tj-line:#343a48;
  --tj-muted:#a5aab4;
  --tj-radius:14px;
  --tj-gap:8px;
  --tj-control-height:40px;
  --tj-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* Portable standalone game template, for any repository mounted at /<game>/. */
.tj-shell,.tj-shell *{box-sizing:border-box}
.tj-shell{width:100%;min-height:100dvh;margin:0;background:var(--tj-coal);color:var(--tj-ivory);font-family:var(--tj-font);overflow-x:clip}
.tj-shell a{color:inherit;text-decoration:none}
.tj-shell button{font:inherit;cursor:pointer;touch-action:manipulation}
.tj-shell :is(a,button,canvas):focus-visible{outline:3px solid var(--tj-teal);outline-offset:3px}
.tj-shell .tj-header{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:8px;min-height:58px;padding:6px max(12px,env(safe-area-inset-left));
  border-bottom:1px solid #ffffff28;background:var(--tj-coal);
}
.tj-shell .tj-brand{justify-self:start;display:inline-flex;align-items:center;min-width:0;min-height:44px;gap:7px}
.tj-shell .tj-brand img{display:block;width:36px;height:36px;object-fit:contain}
.tj-shell .tj-arcade-link{justify-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;font-size:clamp(17px,4.6vw,27px);font-weight:950;font-style:italic;letter-spacing:-.06em}
.tj-shell .tj-arcade-link strong{color:var(--tj-pink)}
.tj-shell .tj-sound{justify-self:end;min-height:40px;padding:5px 10px;background:var(--tj-coal-soft);border:1px solid var(--tj-line);border-radius:99px;font-weight:800;font-size:11px}
.tj-shell .tj-game{width:min(100%,600px);margin:0 auto;padding:0 8px max(8px,env(safe-area-inset-bottom))}
.tj-shell .tj-gamebar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;min-height:46px;margin:0 auto;color:var(--tj-ivory)}
.tj-shell .tj-gamebar>*{min-width:0}
.tj-shell .tj-gamebar .tj-game-name{font-size:clamp(11px,3.5vw,16px);font-weight:950;letter-spacing:.055em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:center}
.tj-shell .tj-button{min-height:var(--tj-control-height);border:1px solid var(--tj-line);border-radius:10px;padding:7px 12px;font-size:clamp(10px,2.8vw,13px);font-weight:850;white-space:nowrap;background:var(--tj-coal-soft);color:var(--tj-ivory)}
.tj-shell .tj-gamebar .tj-button:last-child{justify-self:end}
.tj-shell .tj-button--primary{background:var(--tj-pink);color:#fff;border-color:var(--tj-pink)}
.tj-shell .tj-button--action{background:var(--tj-teal);color:var(--tj-ink);border-color:var(--tj-ink)}
.tj-shell .tj-button--restart{background:var(--tj-yellow);color:var(--tj-ink);border-color:var(--tj-ink)}
.tj-shell .tj-hud{min-height:47px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:5px 10px;background:var(--tj-ivory);color:var(--tj-ink)}
.tj-shell .tj-hud>div{display:flex;gap:7px;align-items:baseline;min-width:0}
.tj-shell .tj-hud>div:last-child{justify-content:end;text-align:end}
.tj-shell .tj-hud-label{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.tj-shell .tj-hud-value{font-size:clamp(20px,5vw,26px);font-weight:950;line-height:1.1;font-variant-numeric:tabular-nums}
.tj-shell .tj-stage{position:relative;min-width:0;overflow:hidden;background:var(--tj-paper);color:var(--tj-ink);isolation:isolate}
.tj-shell .tj-stage>canvas,.tj-shell .tj-stage>iframe{display:block;max-width:100%;border:0}
.tj-shell .tj-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:6px;padding:5px 6px;background:var(--tj-ivory)}
.tj-shell .tj-actions>*{min-width:0;max-width:100%}
.tj-shell .tj-actions .tj-button{width:100%;padding-inline:4px;overflow:hidden;text-overflow:ellipsis}
.tj-shell .tj-dialog{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12px;background:#0b0d124d}
.tj-shell .tj-dialog[hidden]{display:none}
.tj-shell .tj-dialog-card{width:min(100%,320px);max-height:90%;overflow:auto;padding:20px;border:1px solid #465064;border-radius:var(--tj-radius);background:var(--tj-coal-soft);color:var(--tj-ivory);box-shadow:0 12px 40px #0006;text-align:center}
.tj-shell .tj-dialog-card h2{font-size:clamp(23px,7vw,32px);margin:2px 0 9px;font-weight:950}
.tj-shell .tj-dialog-card p{font-size:13px;line-height:1.4;color:#d2d5df;margin:0 0 14px}
.tj-shell .tj-instructions{font-size:12px;line-height:1.4}
.tj-shell .tj-dialog-card .tj-button--primary{width:100%}
.tj-shell .tj-footer{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px 18px;color:var(--tj-muted);font-size:10px}

/* The existing six games already have a common Arcade host. Normalize its two
 * render paths (canvas engine + native iframe) through the same selectors.
 * This layer deliberately does NOT alter canvas dimensions or game physics. */
.is-playing .gamehead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  align-items:center;gap:clamp(4px,1.5vw,10px);
  width:var(--play-width,100%);max-width:100%;min-width:0;
  margin-inline:auto;padding-inline:clamp(3px,1vw,8px);
  overflow:hidden;box-sizing:border-box;
}
.is-playing .gamehead>*{min-width:0;max-width:100%}
.is-playing .gamehead #back{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-playing .gamehead #gameIndex{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.04em}
.is-playing .gamehead #pause{justify-self:end;white-space:nowrap}
.is-playing .hud,.is-playing .external-hud{
  box-sizing:border-box;min-width:0;max-width:100%;
  font-family:var(--tj-font);font-variant-numeric:tabular-nums;
}
.is-playing .hud span,.is-playing .external-hud span{font-weight:850;letter-spacing:.08em}
.is-playing .hud strong,.is-playing .external-hud strong{font-weight:950;font-variant-numeric:tabular-nums}
.is-playing .machine-controls,.is-playing .external-tools{
  box-sizing:border-box;max-width:100%;min-width:0;gap:6px;
  font-family:var(--tj-font);
}
.is-playing .machine-controls>*,.is-playing .external-tools>*{min-width:0;max-width:100%}
.is-playing .machine-controls .quiet,.is-playing .external-tools .quiet{
  border-radius:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:850;touch-action:manipulation;
}
.is-playing .overlaycard,.is-playing .external-overlay .overlaycard{font-family:var(--tj-font)}
.is-playing .overlaycard p,.is-playing .external-overlay .overlaycard p{line-height:1.42}
.is-playing #restart,.is-playing #exRestart{background:var(--tj-yellow);color:var(--tj-ink);border:1.5px solid var(--tj-ink)}

/* FUSION: explicit three-column bottom rail, never a flex row whose intrinsic
 * button widths overflow the narrow iframe. Also protects future native games. */
.is-playing #game[data-kind="fusion"] .external-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.05fr);
  gap:clamp(3px,1vw,8px);align-items:center;justify-content:stretch;
  width:var(--play-width,100%);max-width:100%;min-width:0;
  margin:0 auto;padding:3px clamp(3px,1vw,8px) 5px;
}
.is-playing #game[data-kind="fusion"] .external-tools #exNextPreview{
  grid-column:1;justify-self:start;display:flex;gap:3px;align-items:center;
  max-width:100%;min-width:0;margin:0;
}
.is-playing #game[data-kind="fusion"] .external-tools #exNext{width:clamp(23px,5vw,32px);height:clamp(23px,5vw,32px)}
.is-playing #game[data-kind="fusion"] .external-tools #exAction{
  grid-column:2;justify-self:stretch;width:100%;margin:0;min-width:0;
  padding-inline:clamp(2px,.8vw,9px);font-size:clamp(9px,2.5vw,12px);
}
.is-playing #game[data-kind="fusion"] .external-tools #exRestart{
  grid-column:3;justify-self:stretch;width:100%;margin:0;min-width:0;
  padding-inline:clamp(2px,.8vw,9px);font-size:clamp(10px,2.6vw,12px);
}
@media(max-width:650px){
  .is-playing .gamehead{gap:4px}
  .is-playing .gamehead .quiet{min-height:32px;padding-inline:clamp(5px,1.2vw,9px);font-size:clamp(10px,2.7vw,12px)}
  .is-playing #gameIndex{font-size:clamp(10px,3.1vw,14px)}
  .is-playing .external-tools .quiet{min-height:32px}
  .is-playing #game[data-kind="fusion"] .external-tools #exNextPreview>span{font-size:clamp(6px,1.8vw,8px);letter-spacing:0}
}
@media(max-width:360px){
  .is-playing #game[data-kind="fusion"] .external-tools{gap:3px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr)}
  .is-playing #game[data-kind="fusion"] .external-tools #exAction{font-size:9px}
  .is-playing #game[data-kind="fusion"] .external-tools #exRestart{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .tj-shell *, .tj-shell *::before,.tj-shell *::after{animation:none!important;transition:none!important}
}

/*
 * UI 1.1 · Tanda A: visual coherence for all SIX playable games.
 * Same chrome and controls, independent artwork inside each board.
 * Tanda B: narrow-screen safe sizing and predictable control placement.
 */
:root{
  --tj-ui-panel:#171c26;
  --tj-ui-paper:#fff9ec;
  --tj-ui-ink:#171321;
  --tj-ui-border:#3b4553;
  --tj-ui-muted:#cbd2dd;
}

/* All three built-in board games and the three iframe games share the
 * same visual frame, scoreboard typography and instruction styling. */
.is-playing #game .machine,
.is-playing #game #externalPanel{
  box-sizing:border-box;
  border-color:transparent;
  border-radius:0;
  box-shadow:none;
  background:var(--tj-ui-paper);
}
.is-playing #game .hud,
.is-playing #game .external-hud{
  background:var(--tj-ivory);
  color:var(--tj-ui-ink);
  border:0;
  border-radius:0;
  min-height:30px;
  max-width:100%;
  padding-inline:clamp(5px,1.8vw,12px);
  gap:clamp(3px,1.5vw,12px);
  line-height:1.1;
  overflow:hidden;
}
.is-playing #game .hud>div,
.is-playing #game .external-hud>div{
  min-width:0;
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:clamp(3px,1.3vw,9px);
}
.is-playing #game .hud .record,
.is-playing #game .external-hud>div:last-child{
  margin-left:auto;
}
.is-playing #game .hud :is(span,#scoreLabel),
.is-playing #game .external-hud span{
  color:#596170;
  font:900 clamp(8px,1.5vw,10px)/1.1 var(--tj-font);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.is-playing #game .hud strong,
.is-playing #game .external-hud strong{
  color:var(--tj-ui-ink);
  font-family:var(--tj-font);
  font-variant-numeric:tabular-nums;
  font-weight:950;
  line-height:1;
}
.is-playing #game #pressure{
  max-width:38%;overflow:hidden;text-overflow:ellipsis;
}
.is-playing #game .boardwrap,
.is-playing #game .external-viewport{
  background:var(--tj-ui-paper);
}
.is-playing #game .status,
.is-playing #game .external-status{
  font-family:var(--tj-font);
  font-weight:750;
}
.is-playing #game .machine-controls,
.is-playing #game .external-tools{
  width:var(--play-width,100%);
  max-width:100%;min-width:0;
  margin:0 auto;
  padding:3px clamp(4px,1vw,8px) 5px;
  overflow:hidden;
  align-items:center;
  background:var(--tj-ivory);
  box-sizing:border-box;
}
.is-playing #game .machine-controls .quiet,
.is-playing #game .external-tools .quiet{
  min-width:0;
  background:var(--tj-ui-panel);
  color:var(--tj-ivory);
  border:1.5px solid var(--tj-ui-border);
  border-radius:9px;
  box-shadow:none;
  font-family:var(--tj-font);
  font-weight:900;
  text-transform:none;
}
.is-playing #game .machine-controls :is(#restart),
.is-playing #game .external-tools :is(#exRestart){
  background:var(--tj-yellow);
  color:var(--tj-ui-ink);
  border-color:var(--tj-ui-ink);
}
.is-playing #game .overlaycard,
.is-playing #game .external-overlay .overlaycard{
  box-sizing:border-box;
  max-width:min(94%,330px);
  max-height:90%;
  overflow-y:auto;
  padding:clamp(13px,3vw,20px);
  border:2px solid var(--tj-ui-border);
  border-radius:15px;
  background:var(--tj-ui-panel);
  color:var(--tj-ivory);
  box-shadow:0 14px 38px #0b0d1280;
  font-family:var(--tj-font);
}
.is-playing #game .overlaycard h2,
.is-playing #game .external-overlay .overlaycard h2{
  font:italic 950 clamp(22px,6.2vw,30px)/1.1 var(--tj-font);
  letter-spacing:-.055em;
  margin:6px 0 10px;
  text-shadow:none;
}
.is-playing #game .overlaycard p,
.is-playing #game .external-overlay .overlaycard p{
  color:var(--tj-ui-muted);
  font:600 clamp(11px,2.9vw,13px)/1.42 var(--tj-font);
  white-space:pre-line;
}
.is-playing #game .overlaycard .eyebrow,
.is-playing #game .external-overlay .overlaycard .eyebrow{
  color:var(--tj-teal);
  font:900 10px/1.3 var(--tj-font);
  letter-spacing:.11em;
}
.is-playing #game .overlaycard .primary,
.is-playing #game .external-overlay .overlaycard .primary{
  min-height:42px;
  max-width:100%;
  background:var(--tj-pink);
  color:#fff;
  border:1.5px solid #ff5a7b;
  border-radius:99px;
  box-shadow:none;
  font:900 13px/1.3 var(--tj-font);
}
.is-playing #game .guide .instructions{
  border-color:var(--tj-ui-border);
  font-family:var(--tj-font);
}
.is-playing #game .guide .instructions p{
  color:#d0d5df;line-height:1.5;
}

/* A fixed right-hand restart position on EVERY game.
 * Canvas games use only slots 1 and 3; external native games reserve slot 3
 * even if they don't have a special ability or preview. */
.is-playing #game .machine-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(3px,1.3vw,8px);
  justify-content:stretch;
}
.is-playing #game .machine-controls #hint{
  grid-column:1;justify-self:start;width:100%;max-width:100%;margin:0;
}
.is-playing #game .machine-controls #restart{
  grid-column:3;justify-self:end;width:100%;max-width:100%;margin:0;
}
.is-playing #game .external-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.05fr);
  gap:clamp(3px,1.3vw,8px);
  justify-content:stretch;
}
.is-playing #game .external-tools #exNextPreview{
  grid-column:1;justify-self:start;margin:0;min-width:0;max-width:100%;
}
.is-playing #game .external-tools #exAction{
  grid-column:2;justify-self:stretch;margin:0;width:100%;max-width:100%;
}
.is-playing #game .external-tools #exRestart{
  grid-column:3;justify-self:stretch;margin:0;width:100%;max-width:100%;
}
.is-playing #game #exNextPreview[hidden],
.is-playing #game #exAction[hidden],
.is-playing #game #hint[hidden]{
  display:none!important;
}
.is-playing #game .external-tools #exNextPreview span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.is-playing #game .external-tools #exAction,
.is-playing #game .external-tools #exRestart{
  padding:5px 3px;
  min-height:34px;
  line-height:1.15;
  font-size:clamp(10px,2.8vw,12px);
}

/* Safe-area, narrow screen and short landscape rules. No horizontal pan/zoom
 * trap: only the actual canvas consumes gestures. */
@media(max-width:650px){
  .is-playing #game,
  .is-playing #game .gamegrid,
  .is-playing #game .machine,
  .is-playing #game #externalPanel{
    min-width:0;max-width:100%;
  }
  .is-playing #game .gamehead{
    width:min(100%,var(--play-width,100%));
    padding-inline:clamp(3px,1vw,8px);
    grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,.8fr);
  }
  .is-playing #game .gamehead #back{
    font-size:clamp(10px,2.6vw,12px);
    padding:5px clamp(3px,.9vw,9px);
  }
  .is-playing #game .gamehead #gameIndex{
    font-size:clamp(10px,2.9vw,13px);
    min-width:0;
  }
  .is-playing #game .gamehead #pause{
    padding:5px clamp(3px,.9vw,9px);
    font-size:clamp(10px,2.6vw,12px);
  }
  .is-playing #game .machine-controls,
  .is-playing #game .external-tools{
    width:min(100%,var(--play-width,100%));
    padding-inline:4px;
    gap:3px;
  }
  .is-playing #game .hud :is(span,#scoreLabel),
  .is-playing #game .external-hud span{
    font-size:clamp(7px,1.8vw,9px);
    letter-spacing:.055em;
  }
  .is-playing #game .hud strong,
  .is-playing #game .external-hud strong{
    font-size:clamp(16px,4.7vw,23px);
  }
  .is-playing #game .machine-controls .quiet,
  .is-playing #game .external-tools .quiet{
    padding:4px clamp(2px,.8vw,7px);
    min-height:32px;
    font-size:clamp(9px,2.5vw,11px);
  }
  .is-playing #game #exNextPreview{gap:2px}
  .is-playing #game #exNextPreview>span{font-size:clamp(6px,1.7vw,8px)}
  .is-playing #game #exNext{width:clamp(22px,6vw,30px);height:clamp(22px,6vw,30px)}
  .is-playing #game .overlaycard,
  .is-playing #game .external-overlay .overlaycard{
    max-width:min(94%,320px);
    padding:clamp(11px,3vw,16px);
  }
}
@media(max-width:360px){
  .is-playing #game .gamehead{
    grid-template-columns:minmax(0,1fr) minmax(0,.67fr) minmax(0,.77fr);
    gap:3px;
  }
  .is-playing #game .external-tools{grid-template-columns:minmax(0,.88fr) minmax(0,1.06fr) minmax(0,1.06fr)}
  .is-playing #game .external-tools #exAction,
  .is-playing #game .external-tools #exRestart{font-size:9px;letter-spacing:-.015em}
}
@media(max-height:520px){
  .is-playing #game .overlaycard,
  .is-playing #game .external-overlay .overlaycard{
    max-height:calc(100% - 12px);
    padding:9px 12px;
  }
  .is-playing #game .overlaycard h2,
  .is-playing #game .external-overlay .overlaycard h2{font-size:20px;margin:4px 0}
  .is-playing #game .overlaycard p,
  .is-playing #game .external-overlay .overlaycard p{font-size:10px;line-height:1.32}
  .is-playing #game .overlaycard .primary,
  .is-playing #game .external-overlay .overlaycard .primary{min-height:36px}
}

/* Short landscape displays: the board can shrink with height but the UI
 * controls must NOT shrink to the board's width. Give action and top rails
 * their own comfortably tappable width, centered inside the viewport. */
@media (orientation:landscape) and (max-height:520px){
  .is-playing #game .gamehead{
    width:min(calc(100vw - 24px),max(320px,var(--play-width,100%)))!important;
    max-width:calc(100vw - 24px)!important;
    grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,1fr);
    margin-inline:auto;
    gap:6px;
    overflow:visible;
  }
  .is-playing #game .gamehead #back,
  .is-playing #game .gamehead #pause{
    min-width:0;
    min-height:34px;
    padding:5px 8px;
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .is-playing #game .machine-controls,
  .is-playing #game .external-tools{
    position:relative;
    left:50%;
    width:min(calc(100vw - 24px),max(320px,var(--play-width,100%)))!important;
    max-width:calc(100vw - 24px)!important;
    transform:translate(-50%,calc(-1 * var(--play-gap,0px)));
    gap:6px;
    overflow:visible;
  }
  .is-playing #game .machine-controls .quiet,
  .is-playing #game .external-tools .quiet{
    min-height:34px;
    font-size:11px;
    padding-inline:6px;
  }
}

/* UI 1.2 · Native iframe startup may briefly report zero play width while
 * its ResizeObserver settles. The game bar must never inherit that zero width.
 * This also keeps all six games on the same header rhythm at narrow sizes. */
.is-playing #game[data-kind="fusion"] .gamehead,
.is-playing #game[data-kind="cerco"] .gamehead,
.is-playing #game[data-kind="hotdog"] .gamehead{
  width:min(calc(100vw - 24px),540px)!important;
  max-width:calc(100vw - 24px)!important;
  min-width:0!important;
  margin-inline:auto!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(5px,1.5vw,12px);
  justify-items:stretch;
  overflow:visible;
}
.is-playing #game[data-kind="fusion"] .gamehead #back,
.is-playing #game[data-kind="cerco"] .gamehead #back,
.is-playing #game[data-kind="hotdog"] .gamehead #back{
  justify-self:start;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.is-playing #game[data-kind="fusion"] .gamehead #pause,
.is-playing #game[data-kind="cerco"] .gamehead #pause,
.is-playing #game[data-kind="hotdog"] .gamehead #pause{
  justify-self:end;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:375px){
  .is-playing #game[data-kind="fusion"] .gamehead,
  .is-playing #game[data-kind="cerco"] .gamehead,
  .is-playing #game[data-kind="hotdog"] .gamehead{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    gap:4px;
  }
  .is-playing #game[data-kind="fusion"] .gamehead .quiet,
  .is-playing #game[data-kind="cerco"] .gamehead .quiet,
  .is-playing #game[data-kind="hotdog"] .gamehead .quiet{
    padding:5px 7px;
    font-size:10px;
  }
}


/*
 * UI 1.3 · Portrait/short-screen HUD and adaptive paper stage.
 * Keep gameplay canvas proportions (560:880) and original button slots.
 * The pressure strip is a full-width second row instead of squeezing
 * between PUNTOS and RÉCORD. The playfield shrinks with available height
 * and the surrounding paper fills any letterboxed space.
 */
@media (max-width:650px), (max-height:520px) and (orientation:landscape){
  .is-playing #game:is([data-kind="impacto"],[data-kind="trama"],[data-kind="colapso"]) .machine{
    grid-template-rows:60px minmax(0,1fr) 40px!important;
    gap:2px;
    overflow:hidden;
    min-height:0;
  }
  .is-playing #game[data-kind="colapso"] .machine{
    grid-template-rows:60px 24px minmax(0,1fr) 40px!important;
  }
  .is-playing #game .machine>.hud{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:29px minmax(24px,1fr)!important;
    grid-auto-flow:row;
    gap:1px 6px;
    align-items:center;
    justify-items:stretch;
    width:100%!important;
    max-width:100%!important;
    min-width:0;
    min-height:0;
    box-sizing:border-box;
    padding:2px clamp(9px,2vw,16px) 4px!important;
    overflow:visible;
    background:var(--tj-ivory);
  }
  .is-playing #game .machine>.hud>div:not(.record){
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start;
    justify-content:flex-start;
    min-width:0;
    white-space:nowrap;
  }
  .is-playing #game .machine>.hud>.record{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end;
    justify-content:flex-end;
    min-width:0;
    white-space:nowrap;
  }
  .is-playing #game .machine>.hud>#pressure{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:center;
    justify-content:center;
    align-self:center;
    max-width:100%;
    width:max-content;
    min-width:0;
    min-height:23px;
    padding:4px clamp(8px,2vw,15px);
    margin:0;
    border-radius:6px;
    background:var(--tj-yellow);
    color:var(--tj-ink);
    box-sizing:border-box;
    white-space:normal!important;
    overflow-wrap:anywhere;
    font:900 clamp(9px,2.7vw,11px)/1.18 var(--tj-font);
    letter-spacing:.025em;
    text-align:center;
  }
  .is-playing #game .machine>.hud>#pressure #pressureText{
    display:inline!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    line-height:1.18!important;
  }
  .is-playing #game .machine>.hud>#pressure #incomingPair{
    flex-shrink:0;
  }

  /* A centered, size-aware canvas on a continuous paper mat. Extra height
     is printed paper, not a brutally cut-off board or stretched cells. */
  .is-playing #game:is([data-kind="impacto"],[data-kind="trama"],[data-kind="colapso"]) .boardwrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    padding:4px;
    box-sizing:border-box;
    border:0;
    border-radius:11px 11px 7px 7px;
    overflow:hidden;
    background-color:#fff7e7;
    background-image:
      radial-gradient(circle at center,rgba(23,19,33,.075) .75px,transparent 1.15px),
      linear-gradient(180deg,#fff9ed 0%,#fff1dc 100%);
    background-size:14px 14px,100% 100%;
    box-shadow:inset 0 0 0 1px #e7dec9;
  }
  .is-playing #game:is([data-kind="impacto"],[data-kind="trama"],[data-kind="colapso"]) #board{
    display:block;
    flex-shrink:0;
    max-width:100%!important;
    max-height:100%!important;
    width:min(100cqw,63.63636cqh)!important;
    height:auto!important;
    aspect-ratio:560/880!important;
    object-fit:contain;
    margin:auto;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 0 0 1px #17132120;
  }
  .is-playing #game .machine-controls{
    border-top:3px solid #fff1dc;
    background:var(--tj-ivory);
    box-sizing:border-box;
  }
}
@media (max-height:520px) and (orientation:landscape){
  .is-playing #game:is([data-kind="impacto"],[data-kind="trama"],[data-kind="colapso"]) .machine{
    grid-template-rows:49px minmax(0,1fr) 37px!important;
  }
  .is-playing #game[data-kind="colapso"] .machine{
    grid-template-rows:49px 20px minmax(0,1fr) 37px!important;
  }
  .is-playing #game .machine>.hud{
    grid-template-rows:23px minmax(21px,1fr)!important;
    padding-block:1px!important;
  }
  .is-playing #game .machine>.hud>#pressure{
    min-height:21px;
    padding-block:2px;
    font-size:9px;
  }
}

/* The previous offset tracked letterboxing by lifting the action rail over
 * the board. The new paper mat consumes that space, so controls stay in their
 * dedicated bottom row and never mask the final tiles. */
@media(max-width:650px) and (orientation:portrait){
  .is-playing #game:is([data-kind="impacto"],[data-kind="trama"],[data-kind="colapso"]) .machine-controls{
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto;
    position:relative;
    left:auto;
    right:auto;
  }
}

/*
 * ART 2.0 · All six boards share a restrained warm-slate backdrop.
 * HUD, game navigation, pause/restart and modals keep their existing layout.
 * Only the game surface changes; no filter/brightness effects on canvas.
 */
:root{
  --tj-stage-slate:#27313e;
  --tj-stage-field:#303b49;
  --tj-stage-grid:#566372;
  --tj-stage-ink:#171321;
  --tj-stage-rose:#e98eae;
  --tj-stage-teal:#79c9c9;
  --tj-stage-gold:#ecd185;
  --tj-stage-lilac:#b4a2de;
  --tj-stage-chalk:#f3f0e5;
}
.tj-shell .tj-stage{
  background:var(--tj-stage-slate);
  color:var(--tj-stage-chalk);
}
.is-playing #game .boardwrap,
.is-playing #game .external-viewport{
  background-color:var(--tj-stage-slate);
  background-image:radial-gradient(circle at center,#bdd0db12 1px,transparent 1.3px),
    linear-gradient(180deg,#303a47,#25303b);
  background-size:20px 20px,100% 100%;
  border-radius:7px;
}
.is-playing #game #board{
  background-color:var(--tj-stage-slate);
  outline-offset:-4px;
  box-shadow:0 0 0 1px #b7cbd227;
}
.is-playing #game #externalPanel,
.is-playing #game .machine{
  background:var(--tj-ivory);
}
.is-playing #game:is([data-kind="colapso"],[data-kind="impacto"],[data-kind="trama"]) .boardwrap{
  background-color:var(--tj-stage-slate);
  background-image:radial-gradient(circle at center,#bdd0db12 1px,transparent 1.3px),
    linear-gradient(180deg,#303a47,#25303b);
  background-size:20px 20px,100% 100%;
  box-shadow:inset 0 0 0 1px #b7cbd223;
}
.is-playing #game .machine-controls,
.is-playing #game .external-tools{
  border-top:1px solid #d8dcd9;
}
@media(prefers-reduced-motion:reduce){
  .is-playing #game .boardwrap,
  .is-playing #game .external-viewport{
    background-image:linear-gradient(180deg,#303a47,#25303b);
  }
}

/*
 * TREBEJO ART 2.1 · Pizarra amable
 * Do not recolor sprites with CSS filters; the live canvas draws variant
 * pigments. Only the board mat and its surrounding chrome are styled here.
 */
:root{
  --tj-stage-slate:#314457;
  --tj-stage-field:#3a4d61;
  --tj-stage-grid:#627487;
  --tj-stage-rose:#ef8fb3;
  --tj-stage-teal:#77d2c6;
  --tj-stage-gold:#f0d36f;
  --tj-stage-lilac:#b7a0eb;
  --tj-stage-chalk:#f4efe4;
  --tj-stage-warm-ink:#decfb6;
}
.is-playing #game{
  --tj-board-variant:#314457;
  --tj-board-variant-soft:#3a4d61;
  --tj-board-dot:#eddcb01c;
}
.is-playing #game[data-kind="fusion"]{
  --tj-board-variant:#30475a;
  --tj-board-variant-soft:#395267;
}
.is-playing #game[data-kind="colapso"]{
  --tj-board-variant:#344756;
  --tj-board-variant-soft:#3d5160;
}
.is-playing #game[data-kind="impacto"]{
  --tj-board-variant:#35485a;
  --tj-board-variant-soft:#3e5264;
}
.is-playing #game[data-kind="trama"]{
  --tj-board-variant:#3a4752;
  --tj-board-variant-soft:#45525c;
}
.is-playing #game[data-kind="cerco"]{
  --tj-board-variant:#304957;
  --tj-board-variant-soft:#395260;
}
.is-playing #game[data-kind="hotdog"]{
  --tj-board-variant:#354956;
  --tj-board-variant-soft:#405462;
}
.tj-shell .tj-stage,
.is-playing #game .boardwrap,
.is-playing #game .external-viewport,
.is-playing #game:is([data-kind="colapso"],[data-kind="impacto"],[data-kind="trama"]) .boardwrap{
  background-color:var(--tj-board-variant,#314457);
  background-image:
    radial-gradient(circle at center,var(--tj-board-dot,#eddcb01c) .65px,transparent 1.1px),
    linear-gradient(180deg,var(--tj-board-variant-soft,#3a4d61),var(--tj-board-variant,#314457));
  background-size:28px 28px,100% 100%;
  box-shadow:inset 0 0 0 1px #f1dfbc36;
}
.is-playing #game #board{
  background:var(--tj-board-variant);
  box-shadow:0 0 0 1px #f1dfbc38;
}
.is-playing #game .machine-controls,
.is-playing #game .external-tools{
  border-top:2px solid #e9dfce;
}
@media(prefers-reduced-motion:reduce){
  .is-playing #game .boardwrap,
  .is-playing #game .external-viewport{
    background-image:linear-gradient(180deg,var(--tj-board-variant-soft),var(--tj-board-variant));
  }
}

/*
 * TREBEJO UI 1.5 · Seamless dark game edge and complete Home identity.
 * The paper tone belongs to the HUD only. The body, board mat and action
 * rail form one charcoal/petrol surface, without a cream frame.
 */
.is-playing #game,
.is-playing #game .gamegrid{
  background:var(--tj-coal)!important;
}
.is-playing #game .machine,
.is-playing #game #externalPanel{
  background:var(--tj-coal)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.is-playing #game .boardwrap,
.is-playing #game .external-viewport{
  border:0!important;
  outline:0;
  box-shadow:none!important;
}
.is-playing #game .machine-controls,
.is-playing #game .external-tools{
  background:var(--tj-coal)!important;
  color:var(--tj-ivory)!important;
  border:0!important;
  border-top:1px solid #f4e4bf24!important;
  box-shadow:none!important;
}
.is-playing #game .external-status,
.is-playing #game .external-rule,
.is-playing #game .external-tools #exNextPreview{
  color:var(--tj-ivory)!important;
}
.is-playing #game .external-tools #exNextPreview>span{
  color:#f4efe4!important;
  letter-spacing:.04em;
}
.is-playing #game .machine-controls :is(#hint,#restart),
.is-playing #game .external-tools :is(#exRestart,#exAction){
  border-radius:10px;
  text-shadow:none;
}
.is-playing #game .machine-controls #restart,
.is-playing #game .external-tools #exRestart{
  background:var(--tj-yellow)!important;
  color:#171321!important;
  border:2px solid #171321!important;
  font-weight:900;
}
.is-playing #game .external-tools #exAction,
.is-playing #game .machine-controls #hint{
  background:#222b39!important;
  color:#f7f5ee!important;
  border:1px solid #8896a8!important;
  font-weight:800;
}
.is-playing #game .external-tools #exAction:disabled,
.is-playing #game .machine-controls #hint:disabled{
  background:#394350!important;
  color:#e7edf2!important;
  border-color:#6c7786!important;
  opacity:.76!important;
}
.is-playing #game .machine-controls :is(#restart,#hint):focus-visible,
.is-playing #game .external-tools :is(#exAction,#exRestart):focus-visible{
  outline:3px solid var(--tj-teal);
  outline-offset:2px;
}
.tj-shell .tj-stage{background:var(--tj-stage-slate);color:var(--tj-stage-chalk)}
.tj-shell .tj-actions{background:var(--tj-coal);color:var(--tj-ivory);border-top:1px solid #f4e4bf24}
.tj-shell .tj-actions .tj-button--restart{background:var(--tj-yellow);color:#171321;border:2px solid #171321}

/* The brand name is part of the mark, including when the title and sound
   control are visible at mobile widths. Keep the Arcade heading centered. */
@media(max-width:650px){
  .arcade-site-header,
  .is-playing .arcade-site-header{
    width:100%;
    grid-template-columns:minmax(92px,1fr) auto minmax(52px,1fr);
    gap:3px;
    padding-inline:clamp(6px,2vw,10px);
  }
  .arcade-site-header #brand{
    gap:3px;
    width:auto;
    max-width:100%;
    min-width:0;
    min-height:36px;
  }
  .arcade-site-header #brand .site-word,
  .is-playing .arcade-site-header #brand .site-word{
    display:inline-block!important;
    font-size:clamp(10px,2.8vw,12px)!important;
    font-weight:900;
    letter-spacing:-.055em;
    line-height:1;
    white-space:nowrap;
  }
  .arcade-site-header .suite-logo,
  .is-playing .arcade-site-header .suite-logo{
    width:clamp(25px,7vw,31px);
    height:clamp(25px,7vw,31px);
    flex-shrink:0;
  }
  .arcade-site-header .arcade-heading,
  .is-playing .arcade-site-header .arcade-heading{
    font-size:clamp(17px,4.55vw,20px);
    letter-spacing:-.06em;
    min-width:0;
  }
  .arcade-site-header #sound,
  .is-playing .arcade-site-header #sound{
    min-width:0;
    min-height:32px;
    padding:4px 6px;
    font-size:9px;
  }
  .is-playing #game .machine-controls,
  .is-playing #game .external-tools{
    border-top-color:#f4e4bf20!important;
  }
}
@media(max-width:350px){
  .arcade-site-header,
  .is-playing .arcade-site-header{
    grid-template-columns:minmax(84px,1fr) auto minmax(43px,1fr);
    gap:2px;
    padding-inline:4px;
  }
  .arcade-site-header #brand .site-word{font-size:10px!important}
  .arcade-site-header .arcade-heading,
  .is-playing .arcade-site-header .arcade-heading{font-size:16px}
  .arcade-site-header #sound{padding-inline:4px}
}

/* A standalone Trebejo game uses exactly the same full brand as Arcade. */
.tj-shell .tj-brand{gap:6px;white-space:nowrap;text-decoration:none}
.tj-shell .tj-brand-word{
  display:inline-block;color:var(--tj-ivory);
  font:900 clamp(11px,1.5vw,17px)/1 var(--tj-font);
  letter-spacing:-.06em;
}
.tj-shell .tj-brand-word span{color:var(--tj-pink)}
@media(max-width:650px){
  .tj-shell .tj-header{gap:3px;grid-template-columns:minmax(90px,1fr) auto minmax(48px,1fr);padding-inline:6px}
  .tj-shell .tj-brand{gap:3px}
  .tj-shell .tj-brand img{width:clamp(24px,6vw,30px);height:clamp(24px,6vw,30px)}
  .tj-shell .tj-brand-word{font-size:clamp(10px,2.8vw,12px)}
  .tj-shell .tj-arcade-link{font-size:clamp(15px,4.2vw,20px)}
  .tj-shell .tj-sound{font-size:9px;padding-inline:5px}
}


/*
 * TREBEJO UI 1.6 · One individual-game layout, six different mechanics.
 * Scorebar: always PUNTOS / RÉCORD. The optional subbar owns the centered
 * context pill and, in COLAPSO, the reward information beneath it.
 * The stage has exactly ONE outer radius; each embedded game's own lines
 * must stay inside that clipping region.
 */
.is-playing #game{
  --tj-score-height:34px;
  --tj-sub-height:33px;
  --tj-rail-height:44px;
  --tj-stage-radius:12px;
}
.is-playing #game[data-kind="colapso"]{--tj-sub-height:60px}
.is-playing #game .machine{
  grid-template-rows:var(--tj-score-height) var(--tj-sub-height) minmax(0,1fr) var(--tj-rail-height)!important;
  gap:0!important;
  min-height:0;
  overflow:hidden;
}
.is-playing #game #externalPanel{
  grid-template-rows:var(--tj-score-height) minmax(0,1fr) var(--tj-rail-height)!important;
  gap:0!important;
  min-height:0;
  overflow:hidden;
}

/* Same cream scorebar and numeric rhythm in built-in and native games. */
.is-playing #game .machine>.hud.tj-scorebar,
.is-playing #game #externalPanel>.external-hud.tj-scorebar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  align-items:center;
  gap:8px;
  width:100%!important;
  height:var(--tj-score-height)!important;
  min-height:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:3px clamp(10px,2.5vw,15px)!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-sizing:border-box;
  background:var(--tj-ivory)!important;
  color:var(--tj-ink)!important;
}
.is-playing #game .machine>.hud.tj-scorebar>div,
.is-playing #game #externalPanel>.external-hud.tj-scorebar>div{
  display:flex;
  grid-row:1!important;
  align-items:baseline;
  justify-content:flex-start;
  gap:clamp(5px,1.4vw,9px);
  min-width:0;
  margin:0;
  white-space:nowrap;
}
.is-playing #game .machine>.hud.tj-scorebar>div:first-child,
.is-playing #game #externalPanel>.external-hud.tj-scorebar>div:first-child{
  grid-column:1!important;
  justify-self:start;
}
.is-playing #game .machine>.hud.tj-scorebar>div.record,
.is-playing #game #externalPanel>.external-hud.tj-scorebar>div:last-child{
  grid-column:2!important;
  justify-self:end;
  justify-content:flex-end;
}
.is-playing #game .tj-scorebar span{
  color:#56616d!important;
  font:900 clamp(9px,2.4vw,11px)/1.1 var(--tj-font)!important;
  letter-spacing:.075em!important;
  text-transform:uppercase;
}
.is-playing #game .tj-scorebar strong:not(#pressure){
  color:var(--tj-ink)!important;
  font:950 clamp(20px,5.4vw,25px)/1 var(--tj-font)!important;
  font-variant-numeric:tabular-nums;
}

/* Native games sometimes report extra resources via the iframe's own HUD.
   Keep the main scorebar to exactly two columns in every game. */
.is-playing #game #externalPanel>.external-hud #exResources[hidden]{
  display:none!important;
}

/* The built-in subbar is ONE cream surface, not an orphan dark row.
   Impacto/Trama have one context pill; Colapso has one additional row. */
.is-playing #game .machine>.tj-subbar{
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  justify-items:center;
  align-items:center;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0 7px 3px;
  background:var(--tj-ivory);
  color:var(--tj-ink);
  box-sizing:border-box;
  overflow:hidden;
}
.is-playing #game .tj-subbar>#pressure{
  grid-column:1;
  grid-row:1;
  justify-self:center;
  display:inline-flex!important;
  gap:4px;
  align-items:center;
  justify-content:center;
  max-width:100%;
  width:max-content;
  min-width:0;
  margin:0;
  padding:5px clamp(8px,2vw,13px);
  border:0;
  border-radius:7px;
  background:var(--tj-yellow);
  color:#292539;
  text-align:center;
  font:900 clamp(10px,2.8vw,12px)/1.18 var(--tj-font)!important;
  letter-spacing:.02em;
  white-space:nowrap!important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.is-playing #game .tj-subbar>#pressure #pressureText{
  display:inline!important;
  font:inherit!important;
  white-space:nowrap!important;
}
.is-playing #game[data-kind="colapso"] .machine>.tj-subbar{
  grid-template-rows:27px minmax(0,1fr);
  gap:0;
  padding-bottom:2px;
}
.is-playing #game[data-kind="colapso"] .tj-subbar-details{
  grid-column:1;
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  justify-items:stretch;
  gap:6px;
  width:100%!important;
  height:100%;
  max-width:100%!important;
  min-width:0;
  margin:0!important;
  padding:2px clamp(6px,1.7vw,10px)!important;
  border:0!important;
  border-radius:0!important;
  background:var(--tj-ivory)!important;
  color:var(--tj-ink)!important;
  box-sizing:border-box;
  overflow:hidden;
  font:900 clamp(9px,2.5vw,11px)/1.1 var(--tj-font)!important;
}
.is-playing #game[data-kind="colapso"] .tj-subbar-details[hidden]{display:none!important}
.is-playing #game[data-kind="colapso"] #colapsoGain{
  display:block;
  min-width:0;
  color:#394452!important;
  white-space:nowrap;
  letter-spacing:.015em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.is-playing #game[data-kind="colapso"] .tj-subbar-details .prize{
  display:inline-flex;
  justify-self:end;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(2px,1vw,6px);
  max-width:100%;
  min-width:0;
  margin:0;
  padding:3px clamp(4px,1.1vw,8px);
  border:1.5px solid #171321;
  border-radius:6px;
  background:#ffe27a;
  color:#171321;
  box-shadow:none;
  white-space:nowrap;
}
.is-playing #game[data-kind="colapso"] .tj-subbar-details .prize strong{
  font:950 clamp(10px,2.7vw,12px)/1.1 var(--tj-font)!important;
  font-variant-numeric:tabular-nums;
}
.is-playing #game[data-kind="colapso"] .tj-subbar-details .prize small{
  font:800 clamp(8px,2.1vw,10px)/1.1 var(--tj-font)!important;
  white-space:nowrap;
}
/* No floating rule strip/status/meter may steal a grid row. */
.is-playing #game .machine>#ruleStrip,
.is-playing #game .machine>.status,
.is-playing #game .machine>.meter,
.is-playing #game .machine>#arrows{
  display:none!important;
}

/* Uniform physical stage. The canvas and iframe provide all drawing,
 * while only the host wraps and rounds the OUTSIDE edge once. */
.is-playing #game .machine>.boardwrap,
.is-playing #game #externalPanel>.external-viewport{
  grid-row:3;
  padding:0!important;
  margin:0!important;
  min-width:0;
  min-height:0;
  overflow:hidden!important;
  border:0!important;
  border-radius:var(--tj-stage-radius)!important;
  outline:0!important;
  box-shadow:none!important;
  background-color:var(--tj-board-variant,#314457);
}
.is-playing #game #externalPanel>.external-viewport{grid-row:2}
.is-playing #game .machine>.boardwrap #board,
.is-playing #game #externalPanel #nativeFrame{
  display:block;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--tj-board-variant,#314457);
}
/*
 * Trebejo UI 1.6.1 · Seamless slate letterboxing.
 * Both the canvas and its surrounding mat use ART 2.1's SAME 48px halftone
 * tile, rather than an unrelated 28px gradient that exposed side gutters.
 * The X origin tracks the measured play width (48px tile => +24px offset).
 * The Y origin tracks the actual native iframe top or built-in canvas gap.
 * Gameplay aspect ratio and hitboxes remain untouched.
 */
.is-playing #game .machine>.boardwrap,
.is-playing #game #externalPanel>.external-viewport{
  background-color:var(--tj-board-variant,#314457)!important;
  background-image:
    radial-gradient(circle at 7px 8px,#d8e2dd24 0 .6px,transparent .9px),
    radial-gradient(circle at 28px 17px,#d8e2dd24 0 .8px,transparent 1.1px),
    radial-gradient(circle at 13px 39px,#d8e2dd24 0 .65px,transparent .95px),
    linear-gradient(to bottom,
      var(--tj-board-variant,#314457) 0 var(--tj-board-split,100%),
      var(--tj-board-variant-soft,#3a4d61) var(--tj-board-split,100%) 100%)!important;
  background-size:48px 48px,48px 48px,48px 48px,100% 100%!important;
  background-repeat:repeat,repeat,repeat,no-repeat!important;
  background-position:
    calc(50% - var(--play-width,100%) / 2 + 24px) var(--tj-mat-top,var(--play-gap,0px)),
    calc(50% - var(--play-width,100%) / 2 + 24px) var(--tj-mat-top,var(--play-gap,0px)),
    calc(50% - var(--play-width,100%) / 2 + 24px) var(--tj-mat-top,var(--play-gap,0px)),
    0 0!important;
}
/* Cropping the native iframe itself exposed a texture-free strip in FUSION. */
.is-playing #game #externalPanel #nativeFrame{
  clip-path:none!important;
}

/* Responsive action rail: 1 centered, 2 symmetrical, 3 balanced.
   The data-actions attribute tracks VISIBLE controls, not DOM count. */
.is-playing #game .tj-actions[data-actions]{
  display:grid!important;
  grid-auto-flow:row;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  align-items:center;
  justify-content:center!important;
  justify-items:stretch;
  gap:clamp(5px,1.4vw,10px)!important;
  width:var(--play-width,100%)!important;
  max-width:100%!important;
  min-width:0;
  min-height:var(--tj-rail-height);
  height:var(--tj-rail-height);
  margin:0 auto!important;
  padding:3px clamp(6px,1.5vw,10px) 5px!important;
  transform:none!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  background:var(--tj-coal)!important;
  box-sizing:border-box;
}
.is-playing #game .tj-actions[data-actions="1"]{
  grid-template-columns:minmax(0,min(56%,210px))!important;
}
.is-playing #game .tj-actions[data-actions="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.is-playing #game .tj-actions[data-actions="3"]{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.15fr) minmax(0,1.05fr)!important;
}
.is-playing #game .tj-actions[data-actions] :is(#hint,#restart,#exAction,#exRestart,#exNextPreview){
  grid-column:auto!important;
  grid-row:1!important;
  justify-self:stretch!important;
  align-self:center;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.is-playing #game .tj-actions[data-actions] :is(#restart,#exRestart,#hint,#exAction){
  min-height:34px;
  height:36px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border-radius:10px;
  box-shadow:none!important;
  font:900 clamp(11px,3vw,13px)/1 var(--tj-font)!important;
  letter-spacing:0;
}
.is-playing #game .tj-actions[data-actions] #exNextPreview{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  overflow:hidden;
}
.is-playing #game .tj-actions[data-actions] :is(#hint,#exAction)[hidden],
.is-playing #game .tj-actions[data-actions] #exNextPreview[hidden]{display:none!important}
.is-playing #game .tj-actions[data-actions] #exNextPreview img{flex-shrink:0}

/* Independent-game template follows exactly the same action cardinality. */
.tj-shell .tj-actions[data-actions]{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:center;
  gap:7px;
}
.tj-shell .tj-actions[data-actions="1"]{grid-template-columns:minmax(0,min(56%,210px))}
.tj-shell .tj-actions[data-actions="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.tj-shell .tj-actions[data-actions="3"]{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.15fr) minmax(0,1.05fr)
}
.tj-shell .tj-actions[data-actions]>:not([hidden]){min-width:0}
.tj-shell .tj-actions[data-actions]>[hidden]{display:none!important}

/* Standalone template uses exactly two score columns and a separate
   contextual subbar. It may be empty in games with no extra meter. */
.tj-shell .tj-hud.tj-scorebar{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:34px;
  padding:5px clamp(9px,2vw,15px);
}
.tj-shell .tj-hud.tj-scorebar>div:last-child{justify-content:end}
.tj-shell .tj-subbar{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  background:var(--tj-ivory);
  color:var(--tj-ink);
  padding:2px 8px 5px;
}
.tj-shell .tj-subbar .tj-context{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:7px;
  padding:5px 10px;
  background:var(--tj-yellow);
  color:var(--tj-ink);
  font:900 11px/1.2 var(--tj-font);
  white-space:nowrap;
}

@media(max-width:650px){
  .is-playing #game{--tj-score-height:33px;--tj-sub-height:30px;--tj-rail-height:43px}
  .is-playing #game[data-kind="colapso"]{--tj-sub-height:56px}
  .is-playing #game[data-kind="colapso"] .machine>.tj-subbar{
    grid-template-rows:26px minmax(0,1fr);
  }
  .is-playing #game .tj-actions[data-actions]{
    width:100%!important;
    padding-inline:6px!important;
    gap:6px!important;
  }
}
@media(max-width:350px){
  .is-playing #game[data-kind="colapso"] .tj-subbar-details{
    gap:3px;
    padding-inline:4px!important;
  }
  .is-playing #game .tj-actions[data-actions="1"]{
    grid-template-columns:minmax(0,min(60%,200px))!important;
  }
}
@media(max-height:520px) and (orientation:landscape){
  .is-playing #game{--tj-score-height:28px;--tj-sub-height:24px;--tj-rail-height:38px}
  .is-playing #game[data-kind="colapso"]{--tj-sub-height:47px}
  .is-playing #game[data-kind="colapso"] .machine>.tj-subbar{grid-template-rows:22px minmax(0,1fr)}
  .is-playing #game .machine>.tj-subbar #pressure{padding-block:3px;font-size:9px!important}
  .is-playing #game .tj-actions[data-actions]{
    width:min(calc(100vw - 24px),max(320px,var(--play-width,100%)))!important;
    max-width:calc(100vw - 24px)!important;
    min-height:var(--tj-rail-height);
    height:var(--tj-rail-height);
  }
  .is-playing #game .tj-actions[data-actions] :is(#restart,#exRestart,#hint,#exAction){
    height:31px;min-height:31px;
  }
}

/* Override all historic per-game row templates, including the !important
   variants that predate this four-region shell. */
.is-playing #game[data-kind] .machine{
  grid-template-rows:var(--tj-score-height) var(--tj-sub-height) minmax(0,1fr) var(--tj-rail-height)!important;
}

/* Keep the slate pigment visible behind start/pause dialogs. An older cream
 * veil washed out HOTDOG's grid while the other game boards stayed dark. */
.is-playing #game #overlay,
.is-playing #game .external-overlay{
  background:rgba(11,13,18,.33)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}