/* =========================================================================
   7CHICH — سكّرنا القهوة
   Interface mobile-first, RTL arabe.

   Contraintes qui gouvernent ce fichier :
   • Cibles tactiles ≥ 64 px — on joue avec les pouces, en mouvement.
   • Rien d'important sous les 120 px du bas : c'est là que vivent les boutons.
   • Fortes ombres portées sur le texte : l'écran est lumineux, dehors, en
     terrasse. Un texte fin sur fond clair est illisible au soleil.
   • Pas de police distante : le jeu doit tourner hors-ligne.
   ========================================================================= */

:root {
  --bg: #140c06;
  --wood: #5a3a24;
  --wood-light: #b8824c;
  --cream: #f3e6cf;
  --brass: #d9a441;
  --red: #b8342a;
  --red-hot: #ff2d1f;
  --green: #3f7a4f;
  --ink: #1a1208;

  --hp-player: linear-gradient(180deg, #7ad6a0, #35a06a);
  --hp-boss: linear-gradient(180deg, #ffb347, #e8761f);
  --hp-boss-2: linear-gradient(180deg, #ff6a4d, #c21807);
  --stam: linear-gradient(180deg, #8fd8ff, #3b86c9);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --font-ar: "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro",
             "Tahoma", "Arial", sans-serif;
  --font-dis: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-ar);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }
.muted { opacity: .72; }
.small { font-size: .82rem; }

/* ========================= Voiles ========================= */

#flash {
  position: absolute; inset: 0; pointer-events: none;
  background: #fff; opacity: 0; mix-blend-mode: screen; z-index: 20;
}
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 19;
  opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(190, 20, 10, .62) 100%);
}
#vignette.on { opacity: 1; }

/* ========================= HUD ========================= */

#hud {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r))
           calc(10px + var(--safe-b)) calc(12px + var(--safe-l));
  display: flex; flex-direction: column; justify-content: space-between;
}

.hud-top { display: flex; align-items: flex-start; gap: 10px; }
.hud-brand { position:absolute; top:calc(122px + var(--safe-t)); left:calc(12px + var(--safe-l)); width:104px; height:52px; opacity:.94; }
@media (max-width:600px) { .hud-brand { width:84px; height:42px; top:calc(116px + var(--safe-t)); } }
.bars { flex: 1; min-width: 0; max-width: 680px; margin-inline: auto; }

/* Deuxième ligne : vie/endurance/munitions du joueur, et chrono. */
.hud-sub {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 9px;
}
.hud-spacer { flex: 1; }

.boss-name {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-bottom: 4px;
}
.boss-tag {
  font-family: var(--font-dis); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .14em; color: var(--cream);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.9);
}
.phase-chip {
  font-size: .68rem; padding: 2px 9px; border-radius: 99px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(217,164,65,.6);
  color: var(--brass); white-space: nowrap;
  transition: all .3s ease;
}
.phase-chip.hot {
  background: rgba(190,20,10,.8); border-color: #ff6a4d; color: #fff;
  animation: pulseChip 1.1s ease-in-out infinite;
}
@keyframes pulseChip { 50% { box-shadow: 0 0 16px #ff4422; } }

.bar {
  position: relative; height: 16px; border-radius: 99px; overflow: hidden;
  background: rgba(10,6,2,.78);
  border: 2px solid rgba(0,0,0,.65);
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.boss-bar { height: 19px; }
.bar-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 100%; border-radius: 99px;
  transition: width .09s linear;
}
/* Barre « retard » : le rouge pâle qui rattrape — on VOIT les dégâts. */
.bar-lag {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 100%; background: rgba(255,210,120,.5); border-radius: 99px;
  transition: width .4s cubic-bezier(.2,.7,.3,1) .12s;
}
.bar-mark {
  position: absolute; inset-block: 0; width: 2px;
  background: rgba(255,255,255,.75); z-index: 2;
}
#bossHp { background: var(--hp-boss); }
#bossHp.p2 { background: var(--hp-boss-2); box-shadow: 0 0 14px rgba(255,60,30,.75); }
#playerHp { background: var(--hp-player); }
#playerHp.low { background: linear-gradient(180deg, #ff8a6b, #d02a1a); }
#playerStam { background: var(--stam); }
#playerStam.empty { background: linear-gradient(180deg, #9b9b9b, #5a5a5a); }

.hud-buttons { display: flex; gap: 8px; pointer-events: auto; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem;
  background: rgba(20,12,6,.72); color: var(--cream);
  border: 2px solid rgba(217,164,65,.45);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:active { transform: scale(.93); }

.player-block {
  display: flex; flex-direction: column; gap: 5px;
  width: min(52vw, 260px);
}
.player-bar { height: 15px; }
.stam-bar { height: 8px; }
.ammo { display: flex; gap: 5px; margin-top: 2px; }
.ammo i {
  width: 15px; height: 19px; border-radius: 3px 3px 6px 6px;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.3);
  display: block; transition: all .2s ease;
}
.ammo i.full {
  background: linear-gradient(180deg, #f5f1e8 55%, #b8342a 55%);
  border-color: #fff; box-shadow: 0 0 7px rgba(255,255,255,.45);
}

.hud-timer {
  font-family: var(--font-dis); font-size: 1.05rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.8); opacity: .9;
  white-space: nowrap;
}

/* Bulle de réplique du boss */
.bark {
  position: absolute; top: 19%; inset-inline: 0; margin-inline: auto;
  width: fit-content; max-width: 84vw;
  padding: 10px 18px; border-radius: 18px;
  background: rgba(252,246,236,.96); color: #221508;
  font-size: clamp(1rem, 4.4vw, 1.3rem); font-weight: 700;
  box-shadow: 0 7px 22px rgba(0,0,0,.6);
  animation: barkIn .22s cubic-bezier(.2,1.5,.4,1);
  text-align: center;
}
.bark::after {
  content: ''; position: absolute; bottom: -9px; inset-inline-start: 50%;
  translate: -50% 0; border: 10px solid transparent;
  border-top-color: rgba(252,246,236,.96); border-bottom: 0;
}
.bark.hot { background: #2a0a06; color: #ffb9a8; border: 2px solid #ff4422; }
.bark.hot::after { border-top-color: #2a0a06; }
@keyframes barkIn { from { opacity: 0; transform: translateY(14px) scale(.85); } }

.combo-tag {
  position: absolute; top: 34%; inset-inline-end: 7vw;
  font-family: var(--font-dis); font-weight: 700;
  font-size: clamp(1.4rem, 7vw, 2.4rem); color: var(--brass);
  text-shadow: 0 3px 0 #000, 0 0 20px rgba(255,180,60,.9);
  animation: comboPop .3s cubic-bezier(.2,1.6,.4,1);
}
@keyframes comboPop { from { transform: scale(.4) rotate(-14deg); opacity: 0; } }

/* ========================= Contrôles tactiles ========================= */

#touch {
  position: absolute; inset: 0; z-index: 12; pointer-events: none;
}

/* ATTENTION : `left`/`right` PHYSIQUES, et surtout pas `inset-inline-*`.
   La page est en RTL (dir="rtl") : avec les propriétés logiques, le joystick
   se retrouvait sous le pouce DROIT et les boutons d'action à gauche.
   L'ergonomie des manettes ne suit pas le sens de lecture du texte. */
.stick-zone {
  position: absolute; left: 0; bottom: 0;
  width: 46%; height: 56%;
  pointer-events: auto; touch-action: none;
}
.stick {
  position: absolute; width: 0; height: 0;
  left: 22%; top: 62%;        /* position de repos, avant le premier contact */
  opacity: .45; transition: opacity .18s ease;
}
.stick.active { opacity: 1; }
.stick-base {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.1), rgba(0,0,0,.28));
  border: 2.5px solid rgba(255,255,255,.34);
  box-shadow: inset 0 0 26px rgba(0,0,0,.45);
}
.knob {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #c9b291 65%, #8a7050);
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: 0 5px 14px rgba(0,0,0,.6);
}
.stick-hint {
  position: absolute; left: 18%; bottom: 16%;
  font-size: 1.8rem; opacity: .22; pointer-events: none;
}
.stick.active ~ .stick-hint { opacity: 0; }

.action-cluster {
  position: absolute; right: calc(14px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  display: grid; gap: 10px; pointer-events: none;
  grid-template-areas: ". throw" "dodge punch";
  align-items: end; justify-items: end;
  /* La grille suit le sens d'écriture : en RTL les colonnes s'inversaient et
     « بونية » — le bouton le plus utilisé — se retrouvait à l'intérieur,
     tandis que « تزحلق » débordait du bord de l'écran. On force donc le sens
     physique ici : le poing reste sous le pouce, en bas à droite. */
  direction: ltr;
}
.act {
  pointer-events: auto; touch-action: none; cursor: pointer;
  border-radius: 50%; border: 3px solid rgba(0,0,0,.45);
  display: grid; place-items: center; gap: 0;
  color: #fff; font-family: var(--font-ar); font-weight: 800;
  box-shadow: 0 6px 0 rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.5);
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
  position: relative;
}
.act:active, .act.pressed {
  transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.45);
  filter: brightness(1.25);
}
.act-ico { font-size: 1.5rem; line-height: 1; }
.act-lbl {
  font-size: .66rem; margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.8);
  direction: rtl;          /* le texte arabe reste lu dans le bon sens */
}

.act-punch {
  grid-area: punch; width: 104px; height: 104px;
  background: radial-gradient(circle at 36% 30%, #ff7a5c, #c8281a 70%);
}
.act-punch .act-ico { font-size: 2.1rem; }
.act-dodge {
  grid-area: dodge; width: 80px; height: 80px;
  background: radial-gradient(circle at 36% 30%, #7fd0f5, #2a74b5 70%);
}
.act-throw {
  grid-area: throw; width: 72px; height: 72px;
  background: radial-gradient(circle at 36% 30%, #ffd98a, #c98b20 70%);
}
.act.disabled { filter: grayscale(.85) brightness(.6); }
.act-count {
  position: absolute; top: -3px; left: -3px;
  min-width: 23px; height: 23px; border-radius: 99px;
  background: #1a1208; border: 2px solid var(--brass);
  font-size: .76rem; display: grid; place-items: center; color: var(--brass);
}

/* Anneau de recharge de l'esquive */
.act-dodge::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.75);
  clip-path: inset(0 0 var(--cd, 0%) 0);
  opacity: var(--cdop, 0); pointer-events: none;
}

/* ========================= Grand texte ========================= */

.big-text {
  position: absolute; inset: 0; z-index: 18; pointer-events: none;
  display: grid; place-items: center; text-align: center; padding: 6vw;
}
.big-text span {
  font-size: clamp(1.9rem, 10vw, 4.4rem); font-weight: 900; color: #fff;
  text-shadow: 0 0 34px #ff2d1f, 0 5px 0 #6a0a04, 0 9px 26px rgba(0,0,0,.85);
  animation: bigIn .42s cubic-bezier(.15,1.5,.4,1);
  line-height: 1.25;
}
@keyframes bigIn { from { opacity: 0; transform: scale(.55) rotate(-5deg); } }

/* ========================= Écrans ========================= */

#screens { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: none;
  place-items: center; padding: 16px; overflow-y: auto;
  background: rgba(12,7,3,.82);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  pointer-events: auto;
}
.screen.active { display: grid; animation: fadeIn .22s ease; }
@keyframes fadeIn { from { opacity: 0; } }

.title-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(217,164,65,.22), transparent 58%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 22px, rgba(255,255,255,.015) 22px 44px);
}

.panel {
  position: relative; width: min(560px, 96vw);
  background: linear-gradient(180deg, rgba(38,23,12,.97), rgba(22,13,6,.98));
  border: 3px solid var(--brass);
  border-radius: 22px; padding: 22px 20px calc(22px + var(--safe-b));
  box-shadow: 0 22px 60px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center; max-height: 94vh; overflow-y: auto;
}
.panel h2 {
  margin: 0 0 14px; font-size: 1.5rem; color: var(--brass);
  text-shadow: 0 2px 0 #000;
}

.logo-wrap { display: grid; place-items: center; margin-bottom: 6px; }
#titleLogo { width: min(300px, 70%); height: auto; }

.game-title {
  margin: 4px 0 2px; font-family: var(--font-dis); font-size: clamp(2.4rem, 13vw, 4rem);
  letter-spacing: .07em; color: #fff; line-height: .95;
  text-shadow: 0 4px 0 var(--red), 0 7px 26px rgba(255,60,30,.55);
}
.game-title small {
  display: block; font-family: var(--font-ar); font-size: clamp(1rem, 5vw, 1.5rem);
  letter-spacing: 0; color: var(--brass); margin-top: 8px;
  text-shadow: 0 2px 0 #000;
}
.tagline {
  margin: 10px 0 18px; font-size: clamp(.92rem, 4vw, 1.1rem);
  color: var(--cream); opacity: .93; line-height: 1.6;
}

.btn-row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.btn-row.col { flex-direction: column; align-items: stretch; }

.btn {
  pointer-events: auto; cursor: pointer;
  font-family: var(--font-ar); font-weight: 800; font-size: 1rem;
  color: var(--cream); background: rgba(90,58,36,.75);
  border: 2.5px solid rgba(217,164,65,.55); border-radius: 14px;
  padding: 13px 18px; min-height: 52px;
  box-shadow: 0 4px 0 rgba(0,0,0,.5);
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.5); }
.btn:hover { filter: brightness(1.12); }
.btn-primary {
  background: linear-gradient(180deg, #e8581f, #b8342a);
  border-color: #ffb37a; color: #fff;
}
.btn-big { font-size: 1.25rem; min-height: 62px; }
.btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }

.best-line { margin: 14px 0 0; font-size: .9rem; color: var(--brass); }
.seed-line { margin: 5px 0 0; font-size: .74rem; opacity: .5; font-family: var(--font-dis); }

/* --- Comment jouer --- */
.ctrl-list { display: grid; gap: 9px; margin: 6px 0 14px; text-align: start; }
.ctrl-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.3); border-radius: 12px; padding: 10px 14px;
  border: 1px solid rgba(217,164,65,.22);
}
.ctrl-key {
  min-width: 56px; text-align: center; font-size: 1.4rem;
  font-family: var(--font-dis); color: var(--brass);
}
.ctrl-key.kbd { font-size: .82rem; font-weight: 700; }
.ctrl-txt { flex: 1; font-size: .95rem; line-height: 1.45; }
.howto-head { font-size: .88rem; color: var(--brass); margin: 12px 0 4px; text-align: start; }
.tips { text-align: start; display: grid; gap: 7px; margin: 10px 0 16px; }
.tips div {
  font-size: .88rem; opacity: .88; line-height: 1.5;
  padding-inline-start: 18px; position: relative;
}
.tips div::before { content: '◂'; position: absolute; inset-inline-start: 0; color: var(--brass); }

/* --- Réglages --- */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(217,164,65,.18);
}
.setting-row label { font-size: 1rem; }
.toggle {
  cursor: pointer; min-width: 92px; min-height: 44px; border-radius: 12px;
  font-family: var(--font-ar); font-weight: 800; font-size: .92rem;
  background: rgba(255,255,255,.08); color: var(--cream);
  border: 2px solid rgba(255,255,255,.2);
}
.toggle[aria-checked="true"] {
  background: linear-gradient(180deg, #3f9a62, #2a6e45);
  border-color: #7ad6a0; color: #fff;
}
.select {
  min-height: 44px; min-width: 120px; border-radius: 12px; padding: 0 10px;
  font-family: var(--font-ar); font-size: .95rem;
  background: rgba(255,255,255,.08); color: var(--cream);
  border: 2px solid rgba(255,255,255,.2);
}
.select option { background: #2a1a0e; color: var(--cream); }

/* --- Game over / victoire --- */
.over-title {
  font-family: var(--font-dis); font-size: clamp(2.2rem, 12vw, 3.6rem);
  letter-spacing: .1em; color: #fff; margin: 0;
  text-shadow: 0 4px 0 #8a0f06, 0 0 30px rgba(255,40,20,.75);
  animation: overIn .4s cubic-bezier(.15,1.5,.4,1);
}
@keyframes overIn { from { transform: scale(.6); opacity: 0; } }
.over-sub { font-size: 1.15rem; color: var(--brass); margin: 4px 0 12px; }
.taunt {
  font-size: clamp(1rem, 4.6vw, 1.22rem); font-weight: 700; line-height: 1.6;
  background: rgba(0,0,0,.4); border-radius: 14px; padding: 13px 15px;
  border: 1px solid rgba(217,164,65,.3); margin: 0 0 14px;
}
.stats { display: grid; gap: 7px; margin: 0 0 14px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,.3); border-radius: 11px; padding: 10px 14px;
  font-size: .95rem;
}
.stat-row b { color: var(--brass); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.stat-row.hot b { color: #ff7a5c; }
.record {
  color: #ffd93d; font-weight: 800; font-size: 1.1rem; margin: 0 0 12px;
  animation: pulseChip 1s ease-in-out infinite;
}

.win-panel { border-color: #ffd93d; box-shadow: 0 0 80px rgba(255,217,61,.3), 0 22px 60px rgba(0,0,0,.75); }
.crown { font-size: 3.4rem; animation: bigIn .5s cubic-bezier(.15,1.6,.4,1); }
.win-title {
  font-size: clamp(1.9rem, 10vw, 3rem); color: #ffd93d; margin: 2px 0 0;
  text-shadow: 0 3px 0 #8a6a00, 0 0 30px rgba(255,217,61,.6);
}
.win-sub { color: var(--cream); margin: 4px 0 14px; }

.disclaimer { font-size: .9rem; line-height: 1.75; text-align: start; opacity: .9; }
.link-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }

/* --- Carte partageable --- */
.card-panel { width: min(440px, 94vw); }
#shareCanvas {
  width: 100%; height: auto; border-radius: 14px; margin-bottom: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.65);
}

/* ========================= Divers ========================= */

.toast {
  position: absolute; z-index: 40; bottom: calc(100px + var(--safe-b));
  inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 88vw;
  background: rgba(20,12,6,.95); border: 2px solid var(--brass);
  color: var(--cream); padding: 12px 20px; border-radius: 99px;
  font-weight: 700; box-shadow: 0 8px 26px rgba(0,0,0,.6);
  animation: barkIn .2s ease;
}

.fps {
  position: absolute; top: calc(6px + var(--safe-t)); inset-inline-start: 50%;
  translate: -50% 0; z-index: 41;
  font-family: var(--font-dis); font-size: .78rem; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.6); padding: 3px 9px; border-radius: 8px; opacity: .7;
}

.fatal {
  position: absolute; inset: 0; z-index: 99; display: grid; place-items: center;
  padding: 10vw; text-align: center; font-size: 1.1rem; line-height: 1.8;
  background: #140c06;
}

/* ========================= Adaptations ========================= */

/* Paysage sur téléphone : on ramène les commandes vers les bords. */
@media (orientation: landscape) and (max-height: 500px) {
  .stick-zone { width: 34%; height: 78%; left: 0; }
  .stick { top: 56%; left: 26%; }
  .act-punch { width: 86px; height: 86px; }
  .act-dodge { width: 68px; height: 68px; }
  .act-throw { width: 62px; height: 62px; }
  .panel { padding: 16px; }
  .bark { top: 10%; }
}

/* Grand écran : on cache les commandes tactiles, on garde le clavier. */
@media (hover: hover) and (pointer: fine) {
  #touch.desktop-hide { display: none !important; }
  .hud-timer { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Adventure edition: live character stage, café identity, permanent controls. */
:root { --brass:#e9bd71; --cream:#fff8e6; --red:#e66531; --font-dis:'Arial Black','Segoe UI',sans-serif; }
#scrTitle {background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;display:none;padding:0;overflow:hidden;}
#scrTitle.active {display:block;}
.title-bg {background:linear-gradient(90deg,rgba(10,32,25,.08) 25%,rgba(10,32,25,.38) 54%,rgba(9,31,24,.97) 78%);}
.title-panel {position:absolute;right:5vw;top:50%;transform:translateY(-50%);width:370px;max-height:96vh;padding:22px 0;background:none;border:0;box-shadow:none;overflow:visible;}
.title-kicker {font:700 11px 'Segoe UI',sans-serif;letter-spacing:.24em;color:#e3c896;direction:ltr;margin-bottom:16px;}
#titleLogo {width:100px;height:100px;border-radius:50%;box-shadow:0 5px 24px #061c1844;}
.logo-wrap {margin-bottom:16px;}
.game-title {font:1000 clamp(60px,6.3vw,90px)/.95 'Arial Black','Segoe UI',sans-serif;letter-spacing:-.06em;text-shadow:0 5px 0 #203c32,0 10px 35px #0005;direction:ltr;transform:rotate(-3deg);}
.game-title small {font:800 29px/1.5 'Segoe UI',sans-serif;color:#f2cc82;direction:rtl;margin-top:9px;letter-spacing:0;}
.title-subtitle {font:800 12px 'Segoe UI',sans-serif;letter-spacing:.28em;direction:ltr;color:#fff5de;margin:10px 0 20px;}
.tagline {font-size:17px;color:#d4e3d7;margin:0 0 21px;line-height:1.8;}
.title-panel .btn-row {gap:7px;direction:ltr;}
.title-panel .btn {border:1px solid #b9ccb43b;background:#fff1;font-size:12px;padding:10px 13px;min-height:40px;border-radius:8px;box-shadow:none;}
.title-panel .btn-primary {width:100%;display:flex;justify-content:space-between;align-items:center;background:#f5bc50;color:#203527;border:2px solid #ffdf95;border-radius:13px;min-height:65px;padding:14px 25px;font-size:23px;box-shadow:0 5px 0 #bc7823;}
.title-panel .btn-primary span {font-size:23px;}
.title-panel .best-line {margin-top:16px;font-size:12px;}
.title-panel .seed-line {font-size:10px;}
.hero-caption {position:absolute;left:7vw;bottom:6vh;direction:ltr;text-align:left;display:flex;flex-direction:column;color:white;text-shadow:0 2px 10px #123b2e;pointer-events:none;}
.hero-caption span {font-size:10px;letter-spacing:.25em;}
.hero-caption strong {font-size:44px;line-height:1.45;}
.hero-caption small {font-size:12px;opacity:.85;}
.panel:not(.title-panel) {background:linear-gradient(145deg,#163d31f5,#0d241ef8);border:1px solid #c7d7c66b;border-radius:22px;}
.btn-primary {background:linear-gradient(#ffc75e,#e3a43b);color:#142e24;border-color:#ffe1a0;}
.hud-top {padding:7px 10px;border-radius:14px;background:linear-gradient(90deg,#102d25db,#163529c9);border:1px solid #ffffe733;box-shadow:0 7px 20px #0002;}
.boss-tag {font-family:'Arial Black','Segoe UI',sans-serif;font-size:16px;letter-spacing:.05em;}
.hud-sub {padding:0 8px;}
.player-block::before {content:'TOI · إنت';font-size:10px;font-weight:800;color:#fff8e6;text-shadow:0 2px 4px #000;}
.hud-brand {top:126px;left:18px;width:66px;height:66px;border-radius:50%;box-shadow:0 4px 18px #0002;}
.bar {border:2px solid #193528;border-radius:6px;}
.bar-fill,.bar-lag {border-radius:4px;}
#bossHp {background:linear-gradient(#ffd673,#f3a537);}
.icon-btn {background:#12382e;border:1px solid #fff5;}
.action-cluster {right:24px;bottom:25px;gap:13px;grid-template-areas:'. throw' 'dodge punch';}
.act {border:3px solid #fff9;box-shadow:0 6px 0 #0d2a28ad,0 10px 24px #061b264d;gap:0;align-content:center;}
.act kbd {font:700 9px 'Segoe UI',sans-serif;white-space:nowrap;margin-top:5px;color:white;}
.act-punch {width:110px;height:110px;background:linear-gradient(145deg,#fc8c59,#dc482a);}
.act-dodge {width:96px;height:96px;background:linear-gradient(145deg,#4dd8d3,#167c98);}
.act-throw {width:90px;height:90px;background:linear-gradient(145deg,#f7d375,#c99829);}
.act-lbl {font-size:13px;}
.stick {left:110px;top:auto;bottom:105px;opacity:.85;}
.stick-base {background:#183e37a8;border:2px solid #fff7;box-shadow:inset 0 0 0 14px #ffffff0b,0 5px 20px #0002;}
.knob {translate:none;transform:translate(-50%,-50%);background:linear-gradient(145deg,#f4fff0,#adc7b5);border:3px solid #fff9;}
.stick-hint {left:36px;bottom:20px;text-align:center;direction:ltr;font-size:11px;line-height:1.6;letter-spacing:.12em;opacity:.9;color:#fff;text-shadow:0 2px 4px #000;}
.stick-hint small {font-size:10px;letter-spacing:0;}
@media (min-width:1000px) {.hud-top{max-width:800px;margin:6px auto 0;width:100%;}.hud-sub{margin-top:15px;}.player-block{width:240px}.hud-brand{top:140px;}.bars{max-width:590px;}}
@media (max-width:699px) {
 .title-bg{background:linear-gradient(0deg,#0e3028 0%,#0e3028e8 23%,#0e302800 60%);}
 .title-panel{top:auto;bottom:0;right:0;left:0;transform:none;width:100%;max-height:57vh;padding:8px 24px calc(17px + var(--safe-b));}
 .title-kicker{position:fixed;top:20px;left:0;right:0;font-size:10px;margin:0;text-shadow:0 2px 6px #000;}
 .title-panel .logo-wrap{position:fixed;top:48px;right:18px;margin:0;}
 #titleLogo{width:64px;height:64px;}
 .game-title{font-size:49px;}.game-title small{font-size:22px;margin:0;}
 .title-subtitle{font-size:10px;margin:5px 0 9px;}.tagline{font-size:14px;margin:0 0 10px;line-height:1.45;}
 .hero-caption{display:none;}.title-panel .btn-primary{min-height:56px;font-size:20px;}
 .title-panel .btn{min-height:35px;padding:8px 11px;}.title-panel .seed-line{display:none;}.title-panel .best-line{margin-top:8px;}
 .action-cluster{right:12px;bottom:18px;gap:10px;}.act-punch{width:94px;height:94px;}.act-dodge{width:78px;height:78px;}.act-throw{width:74px;height:74px;}
 .act kbd{font-size:7px;}.act-lbl{font-size:12px;}.act-ico{font-size:21px;}.act-punch .act-ico{font-size:27px;}
 .stick{left:77px;bottom:103px;}.stick-base{width:108px;height:108px;}.knob{width:51px;height:51px;}.stick-hint{left:22px;bottom:29px;font-size:9px;}.stick-hint small{font-size:8px;}
 .hud-brand{width:52px;height:52px;top:140px;left:17px;}.bark{top:25%;font-size:16px;}
}
@media (max-height:500px) and (min-width:700px) {
 .title-panel{width:310px;right:4vw;padding:5px 0;}.title-panel .logo-wrap{position:absolute;left:-82px;top:15px;}#titleLogo{width:66px;height:66px;}
 .game-title{font-size:57px;}.game-title small{font-size:23px;}.title-subtitle{margin:4px 0 9px;}.title-kicker{margin-bottom:9px;}.tagline{font-size:13px;margin-bottom:10px;}.title-panel .btn-primary{min-height:48px;}.title-panel .btn{min-height:33px;padding:7px 12px;}.best-line,.seed-line{display:none;}
 .hero-caption{bottom:4vh;}.hero-caption strong{font-size:29px;}.hero-caption small{display:none;}
 .action-cluster{bottom:13px;gap:9px;}.act-punch{width:84px;height:84px;}.act-dodge{width:72px;height:72px;}.act-throw{width:65px;height:65px;}.act kbd{font-size:7px;}.act-ico{font-size:20px;}.act-punch .act-ico{font-size:27px;}
 .stick{left:86px;bottom:86px;}.stick-base{width:100px;height:100px;}.knob{width:48px;height:48px;}.hud-brand{top:145px;width:42px;height:42px;}.bark{top:27%;font-size:14px;}
}
.action-cluster {grid-template-areas:'jump throw' 'dodge punch';}
.act-jump {grid-area:jump;width:85px;height:85px;background:linear-gradient(145deg,#aaa1f6,#6655bc);}
.act-jump .act-ico{font-size:30px;}
@media(max-width:699px){.act-jump{width:72px;height:72px;}}
@media(max-height:500px) and (min-width:700px){.act-jump{width:65px;height:65px;}}
/* Combat layout: keep the fighting space open and thumb targets separate. */
#hud {padding:calc(12px + var(--safe-t)) calc(18px + var(--safe-r)) 12px calc(18px + var(--safe-l));}
.hud-top {display:contents;background:none;border:0;box-shadow:none;}
.bars {position:absolute;top:calc(15px + var(--safe-t));left:32%;width:36%;max-width:none;margin:0;}
.boss-name {margin-bottom:5px;}
.boss-tag {font-size:14px;letter-spacing:.03em;}
.boss-bar {height:12px;border:1px solid #fff6;box-shadow:0 2px 7px #10282155;}
.hud-sub {position:absolute;left:calc(62px + var(--safe-l));top:calc(16px + var(--safe-t));padding:0;margin:0;display:block;}
.player-block {width:150px;gap:4px;}
.player-block::before {font-size:10px;text-align:left;direction:ltr;}
.player-bar {height:10px;}.stam-bar {height:5px;}.ammo{gap:3px;margin-top:1px;}.ammo i{width:9px;height:11px;}
.hud-brand {left:calc(15px + var(--safe-l));top:calc(22px + var(--safe-t));width:36px;height:36px;box-shadow:0 2px 6px #0003;}
.hud-timer {position:absolute;left:0;top:56px;font:700 10px 'Segoe UI',sans-serif;}
.hud-buttons {position:absolute;right:calc(15px + var(--safe-r));top:calc(14px + var(--safe-t));gap:5px;}
.icon-btn {width:44px;height:44px;border-radius:50%;font-size:19px;background:#183e37b8;border:1px solid #fff8;}
#btnSound {display:none;}
.action-cluster {right:calc(20px + var(--safe-r));bottom:calc(20px + var(--safe-b));grid-template-columns:56px 68px;grid-template-rows:54px 68px;gap:10px;align-items:center;justify-items:center;}
.act {border:2px solid #fff9;box-shadow:0 3px 0 #173c3870,0 5px 12px #10231a22;min-width:0;padding:0;}
.act kbd {display:none;}.act-lbl {font-size:12px;line-height:1.2;}.act-ico,.act-punch .act-ico,.act-jump .act-ico {font-size:23px;line-height:1.2;}
.act-punch {width:68px;height:68px;}.act-dodge{width:56px;height:56px;}.act-throw,.act-jump{width:52px;height:52px;}
.act-count {font-size:10px;width:17px;height:17px;}
.stick-zone {width:185px;height:190px;left:var(--safe-l);bottom:var(--safe-b);}
.stick {left:80px;top:110px;bottom:auto;}.stick-base {width:104px;height:104px;}.knob{width:43px;height:43px;}
.stick-hint {left:28px;bottom:10px;font-size:9px;letter-spacing:0;}.stick-hint small {font-size:8px;}
.bark {top:calc(74px + var(--safe-t));font-size:13px;padding:7px 12px;border-radius:10px;box-shadow:0 2px 6px #0003;max-width:45%;}
.bark::after {display:none;}
@media (pointer:coarse){.stick-hint{display:none;}}
@media (orientation:portrait){
 .bars{left:7%;width:86%;top:calc(78px + var(--safe-t));}
 .hud-sub{top:calc(17px + var(--safe-t));}.player-block{width:125px;}
 .hud-buttons{gap:3px;right:10px;}.icon-btn{width:44px;height:44px;}
 .bark{top:calc(120px + var(--safe-t));max-width:80%;font-size:12px;}
 .action-cluster{right:calc(14px + var(--safe-r));bottom:calc(24px + var(--safe-b));}
 .stick-zone{width:170px;height:190px;}.stick{left:72px;top:110px;}
 .hud-timer{top:42px;}
}
@media (orientation:landscape) and (max-height:500px){
 #hud{padding-top:8px;}.bars{top:8px;left:31%;width:38%;}.boss-name{margin-bottom:3px;}.boss-tag{font-size:12px;}.phase-chip{font-size:9px;padding:1px 7px;}
 .hud-sub{top:9px;}.hud-brand{top:15px;}.player-block{width:125px;}.hud-buttons{top:6px;}.icon-btn{width:44px;height:44px;}
 .bark{top:55px;font-size:12px;padding:5px 10px;}.hud-timer{top:47px;}
 .action-cluster{bottom:calc(12px + var(--safe-b));right:calc(15px + var(--safe-r));gap:7px;}
 .stick-zone{width:170px;height:160px;}.stick{left:78px;top:85px;}.stick-hint{bottom:5px;}
}