/* Shared shell for the games. Same palette and faces as the front door. */

:root{
  --bg:#0a0a0f; --surface:#12121b; --surface-2:#171724; --board:#0f0f18;
  --line:#23233460; --line-solid:#242436;
  --text:#f0f0f5; --text-2:#9a9ab0; --text-3:#6c6c85;
  --accent:#6366f1; --accent-2:#a78bfa; --hot:#f472b6;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --grid:#ffffff08;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f8f9fc; --surface:#ffffff; --surface-2:#f2f3f9; --board:#eef0f8;
    --line:#e5e7f1; --line-solid:#dfe1ee;
    --text:#14141f; --text-2:#55556b; --text-3:#8a8aa0;
    --accent-2:#7c5cf0; --ok:#059669; --warn:#b45309; --bad:#dc2626;
    --grid:#00000008;
  }
}
:root[data-theme="light"]{
  --bg:#f8f9fc; --surface:#ffffff; --surface-2:#f2f3f9; --board:#eef0f8;
  --line:#e5e7f1; --line-solid:#dfe1ee;
  --text:#14141f; --text-2:#55556b; --text-3:#8a8aa0;
  --accent-2:#7c5cf0; --ok:#059669; --warn:#b45309; --bad:#dc2626;
  --grid:#00000008;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-block-size:100vh;background:var(--bg);color:var(--text);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(1rem,4vh,2rem) 1rem 2rem;gap:1rem;
  touch-action:manipulation;
}
.wide{inline-size:100%;max-inline-size:460px}

.top{display:flex;align-items:center;gap:1rem}
.back{font-family:var(--mono);font-size:.76rem;color:var(--text-3);text-decoration:none}
.back:hover{color:var(--accent-2)}
.top h1{font-size:1rem;font-weight:600;letter-spacing:-.01em}

.scores{display:flex;gap:.6rem}
.sc{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:.6rem .85rem;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
}
.sc b{font-family:var(--mono);font-size:1.25rem;font-weight:700;color:var(--accent-2);font-variant-numeric:tabular-nums}
.sc span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}

.stage{position:relative}
canvas{
  inline-size:100%;block-size:auto;display:block;
  background:var(--board);border:1px solid var(--line-solid);border-radius:14px;
}
.overlay{
  position:absolute;inset:0;display:grid;place-content:center;gap:.5rem;text-align:center;
  background:color-mix(in srgb,var(--bg) 78%, transparent);
  backdrop-filter:blur(3px);border-radius:14px;padding:1rem;z-index:5;
}
.overlay[hidden]{display:none}
.overlay h2{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.overlay p{margin:0;font-size:.86rem;color:var(--text-2);max-inline-size:32ch}

.btn{
  font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid transparent;border-radius:99px;
  padding:.55rem 1.3rem;transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px);background:var(--accent-2)}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.btn-s{background:transparent;color:var(--text-2);border-color:var(--line-solid)}
.btn-s:hover{background:transparent;color:var(--text);border-color:var(--accent)}
.overlay .btn{justify-self:center;margin-block-start:.5rem}
.bar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
select{
  font-family:var(--mono);font-size:.78rem;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line-solid);border-radius:99px;
  padding:.45rem .8rem;cursor:pointer;
}
select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hint{
  max-inline-size:460px;font-family:var(--mono);font-size:.72rem;color:var(--text-3);
  text-align:center;line-height:1.9;margin:0;
}
kbd{
  font-family:var(--mono);background:var(--surface);border:1px solid var(--line-solid);
  border-radius:5px;padding:.05rem .35rem;font-size:.7rem;color:var(--text-2);
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}}

/* on-screen direction cross — a swipe alone is a poor way to steer on a phone */
.pad{
  direction:ltr;                 /* arrows point where they point, whatever the text does */
  inline-size:100%;max-inline-size:460px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
  gap:.5rem;margin-block-start:.25rem;
}
.pad button{
  font-family:var(--mono);font-size:1.15rem;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line-solid);border-radius:11px;
  padding:.85rem 0;cursor:pointer;
}
.pad button:active{background:var(--surface-2);color:var(--accent-2)}
.pad .up{grid-column:2;grid-row:1}
.pad .left{grid-column:1;grid-row:2}
.pad .down{grid-column:2;grid-row:2}
.pad .right{grid-column:3;grid-row:2}
@media (min-width:620px){.pad{display:none}}

/* fingers need a bigger target than a mouse pointer does */
@media (pointer: coarse){
  .btn, select, .ctl, .cta-btn{min-block-size:44px}
  .keys button, .pad button, .presets button{min-block-size:46px}
  .back{padding-block:.5rem}
}

:root[lang="ar"] body{font-family:"Cairo","Inter",system-ui,sans-serif}
:root[lang="ar"] .hint,:root[lang="ar"] .head p,:root[lang="ar"] .note{font-family:"Cairo","Inter",system-ui,sans-serif}

/* one row shape in both directions: back link at the start, title filling the
   middle, language toggle always last */
.top h1{flex:1;text-align:end;margin:0}
.top h1 + .ctrls{margin-inline-start:.6rem}
/* the back arrow is a pseudo element so the cascade places it on the correct
   side instead of bidi guessing where a character in the string belongs */
:root[lang="ar"] .back::before{content:"→ "}

/* ---- shared page controls: theme + language, always last in the row ---- */
.ctrls{margin-inline-start:auto;display:flex;gap:.4rem;flex:none}
.ctlbtn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line-solid);border-radius:99px;
  padding:.34rem .7rem;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.ctlbtn:hover{color:var(--text);border-color:var(--accent);background:var(--surface-2)}
.ctlbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctlbtn .ico{font-size:.9rem;line-height:1}
@media (max-width:520px){
  .ctlbtn .lbl{display:none}
  .top .back + .back{display:none}
}

/* ---- thumb stick ---- */
.stick{
  position:relative;flex:1 1 auto;max-inline-size:210px;
  block-size:clamp(112px,30vw,150px);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.stick-base{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  inline-size:clamp(104px,28vw,140px);aspect-ratio:1;border-radius:50%;
  background:var(--surface);border:1px solid var(--line-solid);
  display:grid;place-items:center;pointer-events:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),opacity .18s;
}
.stick-base::before{
  content:"";position:absolute;inset:14%;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--text-3) 45%, transparent);
}
.stick-base.on{border-color:var(--accent);background:var(--surface-2)}
.stick-knob{
  inline-size:42%;block-size:42%;border-radius:50%;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px -8px var(--accent);
  transition:transform .09s linear;pointer-events:none;
}
.stick-base.on .stick-knob{transition:none}

/* Where the stick sits matters as much as what it does. On its own it is
   centred, so either thumb reaches it and neither edge of the phone is
   favoured. When a game also has action buttons the row splits the way a
   gamepad does: stick on one side, actions on the other. */
.controls-row{
  inline-size:100%;max-inline-size:460px;min-block-size:0;
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  direction:ltr;margin-block-start:.15rem;
}
.controls-row.split{justify-content:space-between}
.controls-row:not(.split) .stick{inline-size:100%;max-inline-size:none}
.actions-col{display:grid;gap:.5rem;grid-template-columns:1fr 1fr;flex:0 1 210px}
.actions-col button{
  font-family:var(--mono);font-size:1.05rem;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line-solid);border-radius:12px;
  padding:.85rem 0;cursor:pointer;min-block-size:48px;
}
.actions-col button:active{background:var(--surface-2);color:var(--accent-2)}
@media (min-width:760px){.controls-row{display:none}}


/* ---- one screen, no scrolling ---- */
body.fit{
  /* the base rule keeps a min-height of 100vh, and on a phone 100vh is the
     height with the address bar hidden — taller than what is on screen. That
     minimum has to be released or it wins over the measured height. */
  block-size:var(--app-h,100dvh);
  min-block-size:0;
  max-block-size:var(--app-h,100dvh);
  overflow:hidden;
  padding-block:clamp(.45rem,1.6vh,1rem);gap:.55rem;
}
body.fit .stage{flex:1;min-block-size:0;display:flex;align-items:center;justify-content:center;inline-size:100%;max-inline-size:460px}
body.fit .hint{display:none}
body.fit .scores{inline-size:100%;max-inline-size:460px}
@media (min-width:760px){
  body.fit{block-size:auto;overflow:visible}
  body.fit .hint{display:block}
}

/* nothing may escape the screen: the html box is clipped too, and on shorter
   phones the chrome around the board gives up a few pixels so the board keeps
   the space instead */
html:has(body.fit){overflow:hidden}
@media (max-height:860px){
  body.fit{gap:.4rem}
  body.fit .sc{padding-block:.45rem}
  body.fit .keys button{min-block-size:40px;padding-block:.45rem}
  body.fit .bar{gap:.4rem}
  body.fit .btn{padding-block:.45rem}
  body.fit .stick{block-size:clamp(96px,26vw,124px)}
  body.fit .stick-base{inline-size:clamp(92px,24vw,116px)}
  body.fit .actions-col button{min-block-size:42px;padding-block:.55rem}
}