/*
 * Trebejo Arcade · capa visual unificada con trebejo-home.
 * El motor, los canvases y la geometría de los seis juegos siguen intactos.
 * Mantener esta capa DESPUÉS de style.css y mobile-install.css.
 */
:root{
  color-scheme:dark;
  --trebejo-coal:#0b0d12;
  --trebejo-coal2:#10141d;
  --trebejo-ivory:#f7f5ee;
  --trebejo-pink:#ff2d55;
  --trebejo-teal:#00e5d7;
  --trebejo-border:#282c36;
  --bg:var(--trebejo-coal);
  --panel:#171c26;
  --line:#343947;
  --text:var(--trebejo-ivory);
  --muted:#a5aab4;
}
html,body{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
html{touch-action:pan-y}
body{
  -webkit-font-smoothing:antialiased;
  font-family:Inter,"Arial Black",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:not(.is-playing){
  min-height:100dvh;
  background-color:var(--trebejo-coal);
  background-image:
    radial-gradient(ellipse 470px 370px at calc(100% + 190px) 120px,#ff2d5517,transparent 75%),
    radial-gradient(ellipse 410px 370px at -150px 680px,#00e5d710,transparent 75%);
}
body.is-playing{background:var(--trebejo-coal)!important}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--trebejo-teal);outline-offset:3px}
::selection{background:var(--trebejo-pink);color:#fff}

/* El logo SIEMPRE vuelve al Home; el título de Arcade ocupa el centro real. */
.arcade-site-header{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:14px;
  width:min(calc(100% - 88px),1216px);max-width:none;height:78px;
  margin:0 auto;padding:0;background:transparent;
  border:0;border-bottom:1px solid #ffffff22;
}
.arcade-site-header #brand{
  grid-column:1;display:inline-flex;flex-direction:row;align-items:center;
  gap:10px;justify-self:start;min-width:0;width:max-content;
  font-style:normal;transform:none;letter-spacing:0;
  text-decoration:none;z-index:1;
}
.arcade-site-header .suite-logo{
  display:block;width:42px;height:42px;flex:0 0 auto;border-radius:0;object-fit:contain;
}
.arcade-site-header .site-word{
  color:var(--trebejo-ivory);font-size:22px;letter-spacing:-1.1px;
  font-style:normal;font-weight:900;line-height:1;white-space:nowrap;
}
.arcade-site-header .site-word span{color:var(--trebejo-pink)}
.arcade-site-header .arcade-heading{
  grid-column:2;justify-self:center;display:block;min-width:0;
  margin:0;color:var(--trebejo-ivory);text-align:center;
  font:italic 950 clamp(22px,2.8vw,37px)/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.065em;white-space:nowrap;text-shadow:none;
}
.arcade-site-header .arcade-heading strong{color:var(--trebejo-pink);font-weight:950}
.arcade-site-header #sound{
  grid-column:3;justify-self:end;z-index:1;
  min-height:36px;padding:6px 13px;
  color:var(--trebejo-ivory);font-size:11px;font-weight:850;
  border:1px solid #3c4250;border-radius:30px;background:#171b25;box-shadow:none;
}
.arcade-site-header #sound:hover{border-color:var(--trebejo-teal);background:#1e2833}
.arcade-site-header #brand:hover .site-word,
.arcade-site-header #brand:focus-visible .site-word{color:var(--trebejo-teal)}

main{max-width:1305px;width:100%;min-width:0}
body:not(.is-playing) main{padding:0 34px}
#menu .menu-title{
  width:min(100%,1080px);max-width:1080px;margin:30px auto 0;
  color:var(--trebejo-ivory);text-shadow:none;
  font:italic 950 clamp(26px,3.6vw,43px)/1.06 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.055em;
}
#menu .menu-title::after{
  content:"";display:block;margin-top:12px;width:57px;height:4px;
  border-radius:12px;background:var(--trebejo-teal);
}
#menu .cards{
  max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;padding:22px 3px 26px;
}
#menu .card{
  display:flex;flex-direction:column;align-items:stretch;
  min-width:0;min-height:304px;padding:19px 19px 0;
  color:var(--trebejo-ivory);text-align:left;
  border:1px solid #343a48;border-radius:20px;background:#161b25;
  box-shadow:0 16px 35px #0004;transform:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
  overflow:hidden;
}
#menu .card:hover{transform:translateY(-3px);border-color:var(--accent);background:#1b2230;box-shadow:0 16px 35px #0004}
#menu .fusion-card{--accent:#f9d36d}
#menu .coral{--accent:#f38cab}
#menu .mint{--accent:#72d6b6}
#menu .violet{--accent:#d5beff}
#menu .cerco-card{--accent:#8ed8ba}
#menu .hotdog-card{--accent:#ffa06b}
#menu .cardtop{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.11em;
}
#menu .cardtop>span:last-child{font-size:19px}
#menu .card canvas{
  display:block;width:100%;height:112px;min-height:0;
  margin:10px 0 9px;flex:0 0 auto;
  background:#222738;border:1px solid #ffffff15;border-radius:12px;
  object-fit:contain;pointer-events:none;
}
#menu .card h2{
  color:var(--trebejo-ivory);font:italic 950 26px/1.04 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.045em;margin:0 0 9px;white-space:nowrap;text-shadow:none;
}
#menu .card p{color:#c3c8d1;font-size:12px;line-height:1.45;margin:0 0 13px}
#menu .card-record{
  position:static;display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:auto;padding:6px 0 11px;
  text-align:left;color:#aab5c6;font-size:9px;font-weight:850;letter-spacing:.09em;
}
#menu .card-record b{color:var(--trebejo-ivory);font-size:18px;letter-spacing:0}
#menu .cardfoot{
  display:flex;justify-content:flex-end;align-items:center;
  width:100%;padding:12px 0 15px;border-top:1px solid #ffffff20;
}
#menu .cardfoot b{
  display:inline-flex;align-items:center;justify-content:center;min-height:34px;
  padding:8px 15px;color:#0b0d12;background:var(--accent);
  border:none;border-radius:99px;box-shadow:none;transform:none;
  font-size:12px;font-weight:900;letter-spacing:0;
}
#menu .cardfoot b span{margin-left:12px}
#menu .card:active .cardfoot b{filter:brightness(.93)}
#menu .mobile-install{margin:1px auto 20px;text-align:center}
#menu .mobile-install-button{
  color:var(--trebejo-ivory)!important;background:#171b25!important;
  border:1px solid #454b59!important;border-radius:99px!important;
  box-shadow:none!important;font:800 11px Inter,system-ui,sans-serif!important;
}
#menu .mobile-install-dialog{background:#171c26;color:var(--trebejo-ivory);border-color:#3b4452}
#menu .mobile-install-close{background:var(--trebejo-pink)!important;color:white!important}
.arcade-footer{
  max-width:1216px;width:min(calc(100% - 88px),1216px);
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;margin:0 auto;padding:22px 0 26px;
  border:0;border-top:1px solid #ffffff22;
  color:#b8c0c9;font-size:11px;letter-spacing:0;
}
.arcade-footer .footer-brand{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--trebejo-ivory);font-size:19px;font-weight:900;letter-spacing:-1px;text-decoration:none;
}
.arcade-footer .footer-brand img{width:28px;height:28px;object-fit:contain}
.arcade-footer .footer-brand span{color:var(--trebejo-pink)}
.arcade-footer .footer-signoff{
  display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:0;
}
.arcade-footer .creator-logo{
  position:static;width:28px;height:28px;opacity:.85;
  filter:grayscale(1) brightness(0) invert(1);
}

/* La carcasa toma el diseño del Home; los tableros mantienen su arte y mecánica. */
.is-playing .arcade-site-header{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  width:100%;height:40px;max-width:none;padding:3px max(10px,env(safe-area-inset-left));
  background:var(--trebejo-coal);border-bottom:1px solid #ffffff24;
}
.is-playing .arcade-site-header .suite-logo{width:32px;height:32px}
.is-playing .arcade-site-header .site-word{font-size:15px}
.is-playing .arcade-site-header .arcade-heading{font-size:23px;letter-spacing:-.055em}
.is-playing .arcade-site-header #sound{min-height:30px;padding:4px 10px;font-size:10px}
.is-playing main{background:var(--trebejo-coal)}
.is-playing .gamehead{background:transparent}
.is-playing #gameIndex{color:var(--trebejo-ivory);font-weight:900}
.is-playing .gamehead .quiet{
  color:var(--trebejo-ivory);background:#1b202b;
  border:1px solid #444a58;border-radius:9px;box-shadow:none;
}
.is-playing .gamehead .quiet:hover{color:var(--trebejo-teal);background:#252d3b}
.is-playing .gamehead #pause{
  background:var(--trebejo-pink);color:white;border-color:var(--trebejo-pink);
}
.is-playing .machine,#externalPanel{
  background:#f7f5ee;color:#1c2030;border-color:transparent;box-shadow:none;
}
.is-playing .hud span,.external-hud span{color:#565e69}
.is-playing .hud strong,.external-hud strong{color:#171a26}
.is-playing #ruleStrip,.external-rule{
  background:#d9faf5;color:#182634;border:1px solid #81d6cb;
  border-radius:6px;box-shadow:none;
}
.is-playing .status,.external-status{color:#353e4e}
.is-playing .external-status{background:#e6f9f4;color:#1d2936;border:1px solid #acd9d0}
.is-playing .machine-controls .quiet,.external-tools .quiet{
  background:#202632;color:#fff;border:1px solid #333a48;border-radius:8px;box-shadow:none;
}
.is-playing .machine-controls .quiet:hover,.external-tools .quiet:hover{background:#323d4d;color:var(--trebejo-teal)}
.is-playing .overlaycard,.external-overlay .overlaycard{
  background:#161c27;color:var(--trebejo-ivory);
  border:1px solid #3b4553;border-radius:16px;
  box-shadow:0 18px 55px #0008;transform:none;
}
.is-playing .overlaycard h2,.external-overlay .overlaycard h2{color:var(--trebejo-ivory)}
.is-playing .overlaycard p,.external-overlay .overlaycard p{color:#c7cdd6}
.is-playing .overlaycard .eyebrow,.external-overlay .overlaycard .eyebrow{color:var(--trebejo-teal)}
.is-playing .primary,.external-overlay .primary{
  min-height:42px;color:white;background:var(--trebejo-pink);
  border:1px solid #ff5a7b;border-radius:99px;
  box-shadow:none;font-weight:900;
}
.is-playing .primary:hover,.external-overlay .primary:hover{background:#fb456b}
.is-playing #overlay,.external-overlay{
  background:#0b0d1245!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.is-playing .machine-reset:focus-visible,.external-tools .quiet:focus-visible{outline-color:var(--trebejo-teal)}
/* Controles y señales dentro de los tableros con contraste propio. */
.is-playing #game[data-kind=trama] .machine{background:#fff}
.is-playing #game[data-kind=trama] #ruleStrip{background:#e8def3}
.is-playing #game[data-kind=cerco] #exCords{color:#161321}
.is-playing .colapso-score{color:#171321}
.is-playing .pressure-urgent{color:#171321}

@media(max-width:1000px){
  .arcade-site-header,.arcade-footer{width:calc(100% - 48px)}
  body:not(.is-playing) main{padding-inline:24px}
  #menu .cards{gap:14px}
  #menu .card{padding-inline:15px}
}
@media(max-width:650px){
  .arcade-site-header{
    width:calc(100% - 32px);height:65px;padding:0;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;
  }
  .arcade-site-header .suite-logo{width:36px;height:36px}
  .arcade-site-header .site-word{display:none}
  .arcade-site-header .arcade-heading{
    font-size:clamp(19px,5.8vw,25px);letter-spacing:-.06em;
  }
  .arcade-site-header #sound{min-height:34px;font-size:9px;padding:5px 8px}
  body:not(.is-playing) main{padding:0 14px}
  #menu .menu-title{font-size:29px;margin:19px 6px 0}
  #menu .menu-title::after{margin-top:8px;width:42px;height:3px}
  #menu .cards{grid-template-columns:minmax(0,1fr);gap:10px;padding:13px 3px 17px}
  #menu .card{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,31%);
    grid-template-rows:15px 34px 22px;
    gap:1px 10px;min-height:115px;padding:12px 12px;
    border-radius:15px;box-shadow:none;
  }
  #menu .cardtop{grid-column:1;grid-row:1;font-size:8px;letter-spacing:.09em}
  #menu .cardtop>span:last-child{display:none}
  #menu .card h2{grid-column:1;grid-row:2;font-size:23px;align-self:center;margin:1px 0}
  #menu .card p{display:none}
  #menu .card-record{
    grid-column:1;grid-row:3;display:flex;justify-content:flex-start;
    align-items:baseline;gap:7px;margin:0;padding:0;
    font-size:8px;align-self:center;
  }
  #menu .card-record b{font-size:16px}
  #menu .card canvas{
    grid-column:2;grid-row:1/3;display:block;align-self:center;
    width:100%;height:67px;margin:0;
    border:0;border-radius:9px;
  }
  #menu .cardfoot{
    grid-column:2;grid-row:3;
    padding:0;border:0;justify-content:flex-end;align-items:center;
    min-height:0;
  }
  #menu .cardfoot b{
    padding:4px 10px;min-height:24px;font-size:10px;box-shadow:none;white-space:nowrap;
  }
  #menu .cardfoot b span{margin-left:6px}
  #menu .card:hover{transform:none}
  .arcade-footer{
    flex-direction:column;align-items:center;justify-content:center;
    width:calc(100% - 32px);gap:12px;padding:17px 0 27px;text-align:center;
  }
  .arcade-footer .footer-signoff{justify-content:center;flex-wrap:wrap;font-size:10px}
  .is-playing .arcade-site-header{height:40px;padding:2px 9px}
  .is-playing .arcade-site-header .suite-logo{width:28px;height:28px}
  .is-playing .arcade-site-header .arcade-heading{font-size:20px}
  .is-playing .arcade-site-header #sound{min-height:28px;padding:3px 7px;font-size:9px}
}
@media(max-width:375px){
  .arcade-site-header .arcade-heading{font-size:19px}
  #menu .card{grid-template-columns:minmax(0,1fr) 96px;gap:0 7px}
  #menu .card h2{font-size:21px}
  #menu .cardfoot b{font-size:9px;padding:4px 8px}
}
@media(max-width:650px) and (max-height:700px){
  #menu .menu-title{margin-top:12px;font-size:26px}
  #menu .cards{gap:7px;padding-top:11px}
  #menu .card{min-height:100px;padding-block:9px}
}
@media(hover:none) and (pointer:coarse){
  #menu .card:hover{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  #menu .card{transition:none!important}
}

/* v0.43 · Si falla la carga, el catálogo es visible y el problema se explica. */
#arcadeStartupWarning[hidden]{display:none!important}
#arcadeStartupWarning{max-width:1080px;margin:14px auto 0;padding:14px 17px;border:1px solid #ff6584;border-radius:12px;background:#3b1d2a;color:#fff;font:600 13px/1.55 Inter,system-ui,sans-serif}
#arcadeStartupWarning strong{font-weight:900}
#arcadeStartupWarning a{color:#00e5d7;text-decoration:underline;font-weight:900}
#menu .card{text-decoration:none;cursor:pointer}
#menu .card:focus-visible{outline:3px solid #00e5d7;outline-offset:3px}
@media(max-width:650px){#arcadeStartupWarning{margin-inline:6px;font-size:12px}}

/* Trebejo Arcade v0.45 · ajustes de continuidad entre Home y el Arcade */
:root{
  --trebejo-coal:#0b0d12;
  --trebejo-ivory:#f7f5ee;
  --trebejo-pink:#ff2d55;
  --trebejo-teal:#00e5d7;
  --trebejo-border:#282c36;
}
.arcade-skip{
  position:absolute;z-index:120;top:-120px;left:12px;
  border-radius:10px;background:var(--trebejo-ivory);color:var(--trebejo-coal);
  padding:12px 16px;font:800 14px/1.3 Inter,system-ui,sans-serif;text-decoration:none;
}
.arcade-skip:focus-visible{top:max(12px,env(safe-area-inset-top))}
.arcade-site-header .suite-logo{border-radius:0;box-shadow:none}
.arcade-footer .creator-logo{filter:none;opacity:1;object-fit:contain}
#menu .card{isolation:isolate}
#menu .card:focus-visible .cardfoot b{background:var(--trebejo-teal);color:var(--trebejo-coal)}
.is-playing #back,.is-playing #pause{touch-action:manipulation}
@media(min-width:651px) and (max-width:920px){
  #menu .cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:740px}
  #menu .card{min-height:280px}
  #menu .card canvas{height:105px}
}
@media(max-width:650px){
  .arcade-site-header{height:61px;min-height:61px}
  .arcade-site-header #brand{min-width:44px;min-height:44px;align-items:center}
  .arcade-site-header #sound{min-height:42px;min-width:56px}
  #menu .menu-title{margin-top:13px;font-size:clamp(23px,6.5vw,28px)}
  #menu .cards{padding-top:12px;gap:9px}
  #menu .card{min-height:108px;min-width:0}
  #menu .card canvas{height:64px}
  #menu .cardfoot b{min-height:27px}
  .arcade-footer{padding-block:16px 24px}
  .is-playing .arcade-site-header{height:40px;min-height:0}
  .is-playing .arcade-site-header #sound{min-height:28px;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #menu .card{transition:none!important}
}

/* v0.46: the centered Arcade wordmark is also a navigation target. */
.arcade-site-header .arcade-heading a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;color:inherit;text-decoration:none;touch-action:manipulation;border-radius:8px}
.arcade-site-header .arcade-heading a strong{color:var(--trebejo-pink)}
.arcade-site-header .arcade-heading a:hover strong,.arcade-site-header .arcade-heading a:focus-visible strong{color:var(--trebejo-teal)}
.arcade-site-header .arcade-heading a:focus-visible{outline:3px solid var(--trebejo-teal);outline-offset:3px}
@media(max-width:650px){.arcade-site-header .arcade-heading a{min-height:40px}.is-playing .arcade-site-header .arcade-heading a{min-height:34px}}
/* Panel legal compartido, mismo lenguaje que la portada. */
.arcade-footer{flex-wrap:wrap}
.arcade-privacy-footer{display:flex;justify-content:center;gap:7px 16px;align-items:center;flex-wrap:wrap;flex-basis:100%;width:100%;border-top:1px solid #ffffff20;padding-top:11px;color:#bdc7d4;font-size:11px}
.arcade-privacy-footer a,.arcade-privacy-footer button{color:inherit;text-underline-offset:3px;text-decoration:underline}
.arcade-privacy-footer a:hover,.arcade-privacy-footer button:hover{color:#00e5d7}
@media(max-width:650px){.arcade-privacy-footer{gap:5px 12px;font-size:10px}}