/* =========================================================
   RIPONNE FIGHTER · style.css
   Arcade cabinet dressing. No web font: the display face is a
   heavy grotesque skewed and outlined the way a fighting game
   marquee is, and everything inside the canvas uses the 5x7
   bitmap font drawn in art.js.
   ========================================================= */
:root{
  --bg:#0b0912;
  --panel:#100c1e;
  --ink:#f7f4ea;
  --dim:#9a93b8;
  --hot:#ff2f52;
  --gold:#ffc73d;
  --cyan:#3de0ff;
  --line:#2f2750;
  --display:"Arial Black","Arial Bold","Franklin Gothic Heavy","Helvetica Neue",Impact,sans-serif;
  --ui:"Arial Black","Arial Bold","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{font-size:clamp(15px,0.62vw + 11px,21px)}

body{
  background:
    radial-gradient(120% 90% at 50% -10%, #35205c 0%, #150f28 45%, var(--bg) 100%);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* faint scanlines + vignette, the cabinet glass */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
#app{width:100%;height:100%;position:relative}

.screen{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:1.2rem;
  overflow:auto;
}
.screen.active{display:flex}
#scr-controls{gap:.7rem;justify-content:center;padding:1rem}

/* ---------- logo ---------- */
.logo{text-align:center;user-select:none}
.logo h1{
  font-family:var(--display);
  font-size:clamp(2.6rem,9vw,6.4rem);
  line-height:.86;
  letter-spacing:-.015em;
  font-style:italic;
}
.logo h1 span{
  display:block;
  transform:skewX(-7deg);
  -webkit-text-stroke:.13em #14060f;
  paint-order:stroke fill;
}
.logo h1 .l1{
  color:var(--gold);
  text-shadow:0 .05em 0 #b8480b, 0 .1em 0 #6d2405, 0 .14em .04em rgba(0,0,0,.65);
}
.logo h1 .l2{
  color:var(--hot);
  margin-top:-.06em;
  text-shadow:0 .05em 0 #7c0a1d, 0 .1em 0 #43050f, 0 .14em .04em rgba(0,0,0,.65);
}
.logo.small h1{font-size:clamp(1.9rem,4.6vw,3.4rem)}
.tag{
  margin-top:1rem;color:var(--dim);font-size:.72rem;letter-spacing:.28em;
  font-family:var(--ui);
}

/* title screen */
.press{
  font-size:clamp(1rem,2.2vw,1.5rem);
  color:var(--cyan);letter-spacing:.3em;
  animation:blink 1.15s steps(1,end) infinite;
  text-shadow:0 0 .8rem rgba(61,224,255,.55);
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.12}}
.center{text-align:center}

/* ---------- generic bits ---------- */
button{font:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.1em}
.big{
  background:var(--hot);border:0;color:#fff;
  padding:.85rem 1.1rem;font-size:.95rem;
  box-shadow:0 .28rem 0 #8a0a20, 0 .3rem 0 .12rem #200512;
  transition:transform .06s, box-shadow .06s, background .12s;
}
.big:hover{background:#ff5670}
.big:active{transform:translateY(.24rem);box-shadow:0 .04rem 0 #8a0a20, 0 .06rem 0 .12rem #200512}
.ghost{
  background:transparent;border:.16rem solid var(--line);color:var(--dim);
  padding:.75rem 1rem;font-size:.82rem;
}
.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.link{
  background:none;border:0;color:var(--dim);font-size:.68rem;
  letter-spacing:.2em;text-decoration:underline;
}
.link:hover{color:var(--hot)}
.fine{
  font-size:.66rem;color:#7d76a0;line-height:1.75;font-weight:700;
  letter-spacing:.1em;text-transform:none;
}
.ttl{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.3rem,3.4vw,2.2rem);color:var(--gold);letter-spacing:.06em;
  -webkit-text-stroke:.09em #14060f;paint-order:stroke fill;
  text-shadow:0 .05em 0 #8a4b06;
}
.sub{font-size:.78rem;color:var(--cyan);letter-spacing:.24em;min-height:1rem}
.hello{font-size:.7rem;color:var(--dim);letter-spacing:.18em}

/* ---------- menu ---------- */
.menu{display:flex;flex-direction:column;gap:.7rem;width:min(24rem,92vw)}

/* ---------- commandes ---------- */
.ctrlwrap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;
  width:min(52rem,96vw);
}
.ctrlcard{
  background:rgba(12,9,24,.85);border:.16rem solid var(--line);
  padding:.7rem .85rem;
}
.ctrlcard.wide{grid-column:1 / -1}
.ctrlcard h3{
  font-size:.72rem;color:var(--cyan);letter-spacing:.2em;margin-bottom:.5rem;
  padding-bottom:.4rem;border-bottom:.1rem solid var(--line);
}
.keyrow{display:flex;align-items:center;gap:.6rem;padding:.16rem 0;font-size:.66rem;color:var(--dim)}
.keyrow b{color:var(--ink);font-weight:900;letter-spacing:.09em}
.keyrow.hot b{color:var(--hot)}
.keyrow.gold b{color:var(--gold)}
.keys{display:flex;align-items:center;gap:.22rem;flex:0 0 4.6rem}
.keys i{font-style:normal;color:var(--dim)}
kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.45rem;height:1.45rem;padding:0 .3rem;
  font-family:var(--ui);font-size:.68rem;font-weight:900;
  color:#120d1e;background:linear-gradient(#fdfbf3,#c9c3b4);
  border:.09rem solid #0c0814;
  box-shadow:0 .14rem 0 #6f6a5e, 0 .16rem 0 .09rem #0c0814;
}
.ctrlcard .fine{margin-top:.45rem;line-height:1.6}
.ctrlcard .fine kbd{min-width:1.1rem;height:1.1rem;font-size:.58rem;box-shadow:0 .09rem 0 #6f6a5e}

/* ---------- select ---------- */
.roster{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;
  width:min(46rem,96vw);
}
.slot{
  aspect-ratio:1;background:#0a0814;border:.16rem solid var(--line);
  display:flex;align-items:flex-end;justify-content:center;
  position:relative;overflow:hidden;cursor:pointer;padding:0;
}
.slot canvas{width:100%;height:100%;image-rendering:pixelated}
.slot b{
  position:absolute;bottom:0;left:0;right:0;font-size:.6rem;color:var(--dim);
  background:rgba(0,0,0,.72);padding:.2rem 0;letter-spacing:.08em;
}
.slot:hover{border-color:var(--cyan)}
.slot.on{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(255,199,61,.22) inset}
.slot.on b{color:var(--gold)}
.slot.p1{border-color:var(--cyan)}
.slot.p2{border-color:var(--hot)}

.cardwrap{
  display:flex;gap:1rem;align-items:stretch;width:min(46rem,96vw);
  background:rgba(12,9,24,.8);border:.16rem solid var(--line);padding:.8rem;
}
#preview{
  width:9.5rem;height:9.5rem;image-rendering:pixelated;flex:0 0 auto;
  background:#08060f;border:.1rem solid var(--line);
}
.card{font-size:.68rem;line-height:1.9;color:var(--dim);flex:1;min-width:0}
.card h3{color:var(--gold);font-size:1.15rem;letter-spacing:.06em;font-style:italic;font-family:var(--display)}
.card .cat{color:var(--cyan);font-size:.62rem;margin-bottom:.5rem;letter-spacing:.14em}
.card .mv{color:var(--ink);display:flex;gap:.4rem;align-items:baseline}
.card .mv u{
  flex:0 0 4.6rem;text-decoration:none;color:var(--hot);font-size:.6rem;letter-spacing:.06em;
}
.card .mv span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars{display:flex;gap:.6rem;margin:.4rem 0 .6rem;font-size:.55rem}
.bar{flex:1}
.bar u{display:block;text-decoration:none;color:#6f6990;letter-spacing:.1em}
.bar span{display:block;height:.42rem;background:#08060f;border:.08rem solid var(--line);margin-top:.15rem}
.bar span i{display:block;height:100%;background:var(--gold)}

.row{display:flex;gap:.7rem;width:min(46rem,96vw)}
.row>*{flex:1}
.row.narrow{width:min(20rem,92vw)}

/* ---------- stages ---------- */
.stages{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.9rem;
  width:min(50rem,96vw);
}
.stagecard{border:.16rem solid var(--line);background:#0a0814;padding:0;overflow:hidden;cursor:pointer}
.stagecard canvas{display:block;width:100%;image-rendering:pixelated}
.stagecard b{display:block;padding:.6rem;font-size:.72rem;color:var(--dim);letter-spacing:.1em}
.stagecard b span{color:#6f699a;font-size:.6rem;letter-spacing:.06em;text-transform:none}
.stagecard:hover{border-color:var(--gold)}
.stagecard:hover b{color:var(--gold)}

/* ---------- fight ---------- */
#scr-fight{gap:0;padding:0;justify-content:center}
#stagewrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
#game{
  image-rendering:pixelated;
  width:min(100vw - 1rem, (100vh - 2rem) * 16 / 9);
  height:auto;
  background:#000;
  border:.14rem solid #000;
  box-shadow:0 0 0 .12rem var(--line), 0 1.2rem 3rem rgba(0,0,0,.75);
}
.quit,.mute{
  position:absolute;bottom:.5rem;z-index:5;
  background:rgba(8,6,16,.72);border:.08rem solid var(--line);
  padding:.28rem .6rem;text-decoration:none;color:#7c76a0;
}
.quit{right:.7rem}
.mute{left:.7rem}
.quit:hover,.mute:hover{color:var(--gold);border-color:var(--gold)}
.mute.off{color:#4a4560;text-decoration:line-through}

/* ---------- tactile ---------- */
#touch{
  display:none;position:absolute;inset:auto 0 2.3rem 0;
  justify-content:space-between;padding:.4rem;pointer-events:none;
}
#touch .pad,#touch .btns{display:flex;gap:.3rem;pointer-events:auto}
#touch button{
  width:2.5rem;height:2.5rem;padding:0;border-radius:50%;
  border:.14rem solid var(--line);
  background:rgba(10,8,20,.72);color:var(--ink);font-size:.5rem;letter-spacing:0;
}
#touch .btns button:nth-child(1){border-color:var(--hot)}
#touch .btns button:nth-child(2){border-color:var(--cyan)}
#touch .btns button:nth-child(4){border-color:var(--gold)}
@media (pointer:coarse){#touch{display:flex}}

/* un jeu de combat à huit boutons ne tient pas en portrait */
#rotate{
  display:none;position:absolute;inset:0;z-index:10;
  background:var(--bg);
  flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem;
}
#rotate b{font-size:1.1rem;color:var(--gold);letter-spacing:.16em}
#rotate span{font-size:2.6rem;animation:tilt 1.6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
@media (pointer:coarse) and (orientation:portrait){
  #scr-fight.active #rotate{display:flex}
}

/* ---------- fin de match ---------- */
.modal{
  position:fixed;inset:0;background:rgba(4,3,8,.9);display:none;
  align-items:center;justify-content:center;z-index:20;padding:1.2rem;
}
.modal.on{display:flex}
.modalbox{
  background:var(--panel);border:.16rem solid var(--line);padding:1.4rem;
  width:min(26rem,94vw);display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;
}
.modalbox h3{
  font-family:var(--display);font-style:italic;font-size:1.5rem;letter-spacing:.04em;
  -webkit-text-stroke:.08em #14060f;paint-order:stroke fill;
}
.modalbox canvas{image-rendering:pixelated;width:11rem;height:11rem;border:.1rem solid var(--line)}
.modalbox .row{width:100%}

/* ---------- petits écrans ---------- */
@media (max-width:640px){
  .ctrlwrap{grid-template-columns:1fr}
  .roster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cardwrap{flex-direction:column;align-items:center}
  #preview{width:8rem;height:8rem}
}