/* ---------- game overlay */
#game {
  position: fixed; inset: 0; z-index: 100; background: #07071a; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: none; font-family: var(--f-text);
}
#game[hidden] { display: none; }
#game canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.screen.active { display: flex; }
#game[data-screen="title"] canvas, #game[data-screen="online"] canvas,
#game[data-screen="settings"] canvas, #game[data-screen="controls"] canvas { filter: saturate(1.1) brightness(.7); }
.screen[data-screen="loading"], .screen[data-screen="select"], .screen[data-screen="vs"] {
  background: url(../assets/ui/posterwall.webp) center/cover;
}
.screen[data-screen="select"]::before, .screen[data-screen="loading"]::before {
  content: ''; position: absolute; inset: 0; background: rgba(255, 60, 142, .35);
}
.screen > * { position: relative; }

/* menus */
.menu { display: flex; flex-direction: column; gap: .55rem; align-items: stretch; min-width: min(320px, 86vw); }
.menu.row { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: 0; }
.menu button, .pause-card button {
  font: 1.45rem/1 var(--f-vinyl); letter-spacing: .03em; padding: .6rem 1.2rem; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  transition: transform .1s, background .1s;
}
.menu button:nth-child(odd) { transform: rotate(-1deg); }
.menu button:nth-child(even) { transform: rotate(1deg); }
.menu button.hot { background: var(--yellow); }
.menu button.ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: none; font-size: 1.1rem; }
.menu button.focus, .menu button:hover, .pause-card button.focus, .pause-card button:hover {
  background: var(--orange); color: var(--paper); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill;
  transform: rotate(0) scale(1.05) translateX(6px);
}
[data-nav].focus { outline: 4px solid var(--yellow); outline-offset: 3px; }
.back {
  position: absolute; left: 18px; top: 18px; font: 1rem var(--f-label); background: var(--ink); color: var(--paper);
  border: 2px solid var(--paper); padding: .5rem .8rem;
}

/* loading */
.load-logo { width: min(520px, 80vw); filter: drop-shadow(6px 8px 0 rgba(0,0,0,.35)); }
.load-bar { width: min(460px, 80vw); height: 30px; margin-top: 1.4rem; background: var(--ink); border: 3px solid var(--ink); transform: rotate(-1deg); }
.load-fill { height: 100%; width: 0; background: var(--orange); -webkit-mask: url(../assets/ui/tape.webp) center/100% 100%; mask: url(../assets/ui/tape.webp) center/100% 100%; transition: width .2s; }
.load-msg { font: 1.2rem var(--f-marker); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }

/* title */
.screen[data-screen="title"] { flex-direction: row; gap: clamp(1rem, 6vw, 6rem); }
.title-logo img { width: min(560px, 46vw); filter: drop-shadow(8px 10px 0 rgba(0,0,0,.4)); transform: rotate(-3deg); animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: rotate(-1.5deg) scale(1.03); } }
.title-foot { position: absolute; bottom: 14px; color: var(--paper); font: .85rem var(--f-label); opacity: .8; }
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .screen[data-screen="title"] { flex-direction: column; gap: .8rem; overflow-y: auto; justify-content: flex-start; padding-top: 24px; }
  .title-logo img { width: min(340px, 70vw); }
  .menu button { font-size: 1.15rem; padding: .45rem 1rem; }
  .title-foot { display: none; }
}

/* select */
.select-title { width: min(620px, 80vw); transform: rotate(-2deg); filter: drop-shadow(5px 6px 0 var(--ink)); }
.select-title-sub { font: 1rem var(--f-label); background: var(--ink); color: var(--yellow); padding: .3rem .7rem; margin: .4rem 0 1rem; }
.pick-row { display: flex; gap: clamp(1rem, 4vw, 3rem); }
.pick-card {
  position: relative; width: clamp(150px, 24vw, 280px); height: clamp(230px, 46vh, 430px); padding: 0;
  border: 4px solid var(--ink); background: radial-gradient(rgba(0,0,0,.2) 1.2px, transparent 1.6px) 0 0/7px 7px, #ffb27a;
  box-shadow: 8px 8px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .12s;
}
.pick-card.green { background-color: #8af0b8; transform: rotate(1.5deg); }
.pick-card.orange { transform: rotate(-1.5deg); }
.pick-card > img:first-child { position: absolute; inset: 4% 0 0; height: 100%; width: 100%; object-fit: contain; object-position: bottom; filter: grayscale(.5) contrast(1.3); transition: filter .15s, transform .2s; }
.pick-card.p1 > img:first-child, .pick-card.p2 > img:first-child, .pick-card:hover > img:first-child { filter: none; transform: scale(1.05); }
.pick-name { position: relative; font: clamp(1.4rem, 3vw, 2.2rem)/1 var(--f-vinyl); background: var(--paper); border-top: 3px solid var(--ink); padding: .4rem; }
.pick-q { position: relative; font: .85rem var(--f-marker); background: var(--paper); padding-bottom: .4rem; }
.pick-card .cursor { position: absolute; width: 64px; top: 10px; display: none; }
.pick-card .c1 { left: 10px; } .pick-card .c2 { right: 10px; }
.pick-card.p1 .c1, .pick-card.p2 .c2 { display: block; animation: pop .3s; }
.pick-card.locked1, .pick-card.locked2 { outline: 6px solid var(--yellow); }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } }
.difficulty { display: flex; gap: .5rem; align-items: center; margin-top: 1.2rem; font: 1rem var(--f-label); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); flex-wrap: wrap; justify-content: center; }
.difficulty[hidden] { display: none; }
.difficulty button, .qual button { font: .95rem var(--f-label); color: var(--ink); text-shadow: none; background: var(--paper); border: 2px solid var(--ink); padding: .35rem .7rem; }
.difficulty button.on, .qual button.on { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.select-hint { color: var(--paper); font: .95rem var(--f-label); text-shadow: 2px 2px 0 var(--ink); text-align: center; }

/* VS: two party posters pasted face to face */
.screen[data-screen="vs"] { flex-direction: row; gap: 0; }
.vs-poster {
  width: min(38vw, 420px); height: min(76vh, 640px); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; overflow: hidden; position: relative;
}
.vs-left { background: radial-gradient(rgba(0,0,0,.2) 1.3px, transparent 1.7px) 0 0/8px 8px, var(--orange); transform: translateX(-120vw) rotate(-4deg); }
.vs-right { background: radial-gradient(rgba(0,0,0,.2) 1.3px, transparent 1.7px) 0 0/8px 8px, var(--green); transform: translateX(120vw) rotate(4deg); }
.vs-right.mirror img { filter: hue-rotate(160deg) contrast(1.2); }
.go .vs-left { animation: slapL .5s cubic-bezier(.2,1.4,.4,1) forwards; }
.go .vs-right { animation: slapR .5s .15s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes slapL { to { transform: translateX(0) rotate(-4deg); } }
@keyframes slapR { to { transform: translateX(0) rotate(4deg); } }
.ce-soir { font: 1.6rem/1 var(--f-label); background: var(--yellow); border: 3px solid var(--ink); padding: .4rem .8rem; margin: 1rem 0 0; transform: rotate(-3deg); z-index: 2; }
.vs-poster img { flex: 1; min-height: 0; object-fit: contain; width: 100%; filter: contrast(1.2); }
.vs-name { font: clamp(2rem, 4.5vw, 3.6rem)/1 var(--f-vinyl); color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); margin: 0; }
.vs-q { font: 1.1rem var(--f-marker); color: var(--ink); background: var(--paper); padding: .2rem .7rem; margin: .4rem 0 1rem; }
.vs-big {
  font: clamp(5rem, 14vw, 11rem)/1 var(--f-vinyl); color: var(--yellow); -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill; text-shadow: 10px 10px 0 var(--ink); margin: 0 -2.4rem; z-index: 3; transform: scale(0) rotate(-12deg);
}
.go .vs-big { animation: vsIn .4s .55s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes vsIn { to { transform: scale(1) rotate(-8deg); } }
.vs-band { position: absolute; bottom: 4%; font: clamp(.9rem, 2vw, 1.3rem) var(--f-label); background: var(--ink); color: var(--yellow); padding: .5rem 1rem; transform: rotate(-1deg); }

/* ---------- HUD */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(8px, 2vw, 22px); padding: 0 clamp(10px, 3vw, 36px); align-items: start; }
.hud-side { --team: var(--orange); }
.hp-bar { position: relative; height: clamp(22px, 3.6vw, 38px); background: rgba(17,17,17,.75); border: 3px solid var(--ink); transform: rotate(-.8deg); }
.p2 .hp-bar { transform: rotate(.8deg) scaleX(-1); }
.hp-fill, .hp-trail { position: absolute; left: 0; top: 0; bottom: 0; }
.hp-trail { background: #fff; opacity: .7; transition: width .05s linear; }
.hp-fill {
  background: var(--team);
  -webkit-mask: url(../assets/ui/tape.webp) left/auto 100% repeat-x; mask: url(../assets/ui/tape.webp) left/auto 100% repeat-x;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 22%, 100% 40%, calc(100% - 7px) 63%, 100% 80%, calc(100% - 4px) 100%, 0 100%);
  transition: width .08s ease-out;
}
.hud-side.low .hp-fill { animation: lowpulse .5s steps(2) infinite; }
@keyframes lowpulse { 50% { filter: brightness(1.5); } }
.hud-side.hit .hp-bar { animation: barhit .25s; }
@keyframes barhit { 30% { transform: translateX(-4px) rotate(-2deg); } 60% { transform: translateX(3px); } }
.p2.hit .hp-bar { animation: barhit2 .25s; }
@keyframes barhit2 { 30% { transform: translateX(4px) rotate(2deg) scaleX(-1); } 60% { transform: translateX(-3px) scaleX(-1); } }
.tear {
  position: absolute; top: -2px; width: 16px; height: calc(100% + 4px); background: var(--team); pointer-events: none;
  clip-path: polygon(0 10%, 80% 0, 100% 40%, 70% 100%, 10% 85%); animation: tear .9s ease-out forwards;
}
@keyframes tear { to { transform: translate(var(--dx), 60px) rotate(var(--rot)); opacity: 0; } }
.rage-sticker { position: absolute; height: 170%; top: -35%; right: 8%; transform: scale(0) rotate(-20deg); filter: drop-shadow(3px 3px 0 var(--ink)); }
.p2 .rage-sticker { transform: scaleX(-1) scale(0); }
.rage-sticker.on { animation: slap .35s cubic-bezier(.2,1.6,.4,1) forwards; }
.p2 .rage-sticker.on { animation: slap2 .35s cubic-bezier(.2,1.6,.4,1) forwards; }
.rage-sticker.used { opacity: .45; filter: grayscale(1); }
@keyframes slap { to { transform: scale(1) rotate(-10deg); } }
@keyframes slap2 { to { transform: scaleX(-1) scale(1) rotate(-10deg); } }
.hud-meta { display: flex; align-items: center; gap: .5rem; margin-top: 6px; }
.p2 .hud-meta { flex-direction: row-reverse; }
.hud-badge { font: .85rem var(--f-label); background: var(--team); color: var(--paper); border: 2px solid var(--paper); border-radius: 999px; padding: .1rem .55rem; box-shadow: 2px 2px 0 var(--ink); }
.hud-name {
  font: clamp(1rem, 2.3vw, 1.7rem)/1 var(--f-vinyl); color: var(--paper); background: var(--team); padding: .25rem .6rem;
  border: 3px solid var(--ink); transform: rotate(-2deg); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill;
}
.pips { display: flex; gap: 5px; }
.pip { width: clamp(16px, 2vw, 24px); height: clamp(16px, 2vw, 24px); background: url(../assets/ui/roundempty.webp) center/contain no-repeat; }
.pip.won { background-image: url(../assets/ui/roundwon.webp); animation: pop .3s; }
.hud-timer {
  width: clamp(70px, 9vw, 112px); aspect-ratio: 512/321; background: url(../assets/ui/gbakaplate.webp) center/100% 100%;
  display: grid; place-items: center; transform: rotate(-1deg); filter: drop-shadow(3px 4px 0 rgba(0,0,0,.6));
}
.timer-num { font: clamp(1.6rem, 3.8vw, 3rem)/1 var(--f-marker); color: var(--ink); }
.hud-timer.alert { animation: alert .5s steps(2) infinite; }
.hud-timer.alert .timer-num { color: #d40000; }
@keyframes alert { 50% { transform: rotate(2deg) scale(1.08); } }
.crowd { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) rotate(-1deg); display: flex; align-items: center; gap: .5rem; }
.crowd span { font: .9rem var(--f-label); background: var(--yellow); border: 2px solid var(--ink); padding: .15rem .5rem; }
.crowd-bar { width: clamp(120px, 22vw, 260px); height: 14px; background: rgba(17,17,17,.7); border: 2px solid var(--ink); }
.crowd-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green)); transition: width .2s; }
.crowd.pump { animation: pump .5s; }
@keyframes pump { 40% { transform: translateX(-50%) scale(1.25) rotate(-3deg); } }
.combo { position: absolute; top: 22%; width: clamp(90px, 12vw, 150px); aspect-ratio: 1; background: url(../assets/ui/combostar.webp) center/contain no-repeat; display: grid; place-content: center; text-align: center; opacity: 0; transform: scale(.4); }
.combo.p1 { left: 3%; } .combo.p2 { right: 3%; }
.combo b { font: clamp(2rem, 4vw, 3.4rem)/.9 var(--f-vinyl); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; color: var(--paper); }
.combo span { font: .8rem var(--f-label); }
.combo.show { animation: comboIn .25s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes comboIn { to { opacity: 1; transform: scale(1) rotate(-8deg); } }
.announce { position: absolute; inset: 0; display: grid; place-items: center; }
.sticker-announce {
  grid-area: 1/1; font: clamp(2.6rem, 9vw, 7rem)/1 var(--f-vinyl); color: var(--orange); -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill; text-shadow: 0 0 0 var(--paper), 7px 8px 0 var(--ink); text-align: center;
  transform: rotate(var(--tilt)); animation: stamp .3s cubic-bezier(.2,1.6,.4,1); transition: opacity .3s, transform .3s;
}
.sticker-announce small { display: block; font: clamp(1rem, 2.4vw, 1.6rem)/1 var(--f-label); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; background: var(--yellow); border: 3px solid var(--ink); padding: .3rem .6rem; width: max-content; margin: 0 auto .4rem; }
.sticker-announce.fight { color: var(--yellow); font-size: clamp(3.4rem, 12vw, 9rem); }
.sticker-announce.ko { color: #ff2b2b; font-size: clamp(4rem, 15vw, 11rem); }
.sticker-announce.perfect { color: var(--yellow); }
.sticker-announce.small { font-size: clamp(1.4rem, 4vw, 2.6rem); align-self: start; margin-top: 18vh; -webkit-text-stroke: 3px var(--ink); }
.sticker-announce.counter { color: var(--paper); }
.sticker-announce.alert { color: #ff2b2b; }
.sticker-announce.rageart { color: var(--rose); }
.sticker-announce.out { opacity: 0; transform: rotate(var(--tilt)) scale(1.3); }
@keyframes stamp { from { transform: rotate(var(--tilt)) scale(2.4); opacity: 0; } }
.adlib-pop { position: absolute; width: clamp(160px, 28vw, 360px); top: 30%; transform: rotate(var(--tilt)); animation: adlib 1.5s cubic-bezier(.2,1.5,.4,1) forwards; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5)); }
.adlib-pop.left { left: 8%; } .adlib-pop.right { right: 8%; }
@keyframes adlib { 0% { transform: rotate(var(--tilt)) scale(0); } 15% { transform: rotate(var(--tilt)) scale(1.1); } 80% { opacity: 1; } 100% { transform: rotate(var(--tilt)) scale(1) translateY(-20px); opacity: 0; } }
.hud-ping { position: absolute; right: 12px; bottom: 12px; font: .75rem var(--f-label); color: var(--paper); background: rgba(0,0,0,.5); padding: .2rem .4rem; }
.pause-btn { pointer-events: auto; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font: 1rem var(--f-label); background: rgba(17,17,17,.6); color: var(--paper); border: 2px solid var(--paper); width: 38px; height: 38px; border-radius: 50%; display: none; }
.hud.training .crowd { opacity: .4; }
.training-panel { position: absolute; left: 12px; bottom: 60px; width: min(360px, 40vw); max-height: 52vh; overflow: auto; background: rgba(250,247,240,.93); border: 3px solid var(--ink); padding: .8rem; font-size: .8rem; }
.training-panel[hidden] { display: none; }
.training-panel .movelist { grid-template-columns: 1fr; font-size: .78rem; }
.pause { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,7,26,.6); }
.pause[hidden] { display: none; }
.pause-card { display: flex; flex-direction: column; gap: .6rem; background: var(--rose); border: 4px solid var(--ink); padding: 1.4rem; box-shadow: 10px 10px 0 var(--ink); transform: rotate(-1deg); }

/* touch controls */
.touch { display: none; position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; padding: 0 max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)); }
@media (pointer: coarse) { .screen[data-screen="fight"] .touch { display: flex; justify-content: space-between; align-items: flex-end; } .pause-btn { display: block; } .crowd { bottom: auto; top: 86px; } }
.touch button { pointer-events: auto; touch-action: none; border: 3px solid var(--ink); background: rgba(250,247,240,.82); font: 1.2rem var(--f-vinyl); box-shadow: 3px 3px 0 var(--ink); }
.touch button.on { background: var(--yellow); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.dpad { display: flex; gap: 8px; align-items: flex-end; }
.dpad button { width: 64px; height: 64px; border-radius: 14px; }
.tbtns { display: grid; grid-template-columns: repeat(3, 58px); grid-auto-rows: 58px; gap: 8px; }
.tbtns button { border-radius: 50%; }
.tbtns button.sm { font-size: .8rem; }
.tbtns button.rage { background: rgba(255,60,142,.9); color: var(--paper); font-size: .85rem; }

/* results: rear of a gbaka */
.screen[data-screen="results"] { gap: 1.4rem; background: rgba(7,7,26,.45); }
.gbaka-back {
  --team: var(--orange);
  position: relative; width: min(560px, 92vw); padding: 18px 22px 26px; border-radius: 26px 26px 14px 14px;
  background: linear-gradient(var(--orange) 0 52%, var(--paper) 52% 56%, var(--green) 56%); border: 5px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink); display: flex; flex-direction: column; align-items: center; transform: rotate(-1deg);
}
.gb-roof { position: absolute; top: -16px; left: 12%; right: 12%; height: 12px; background: #999; border: 3px solid var(--ink); border-radius: 4px; }
.gb-window { width: 92%; height: min(28vh, 220px); background: #131826; border: 4px solid var(--ink); border-radius: 10px; overflow: hidden; display: grid; place-items: end center; }
.gb-window img { height: 120%; width: auto; object-fit: contain; transform: translateY(14%); }
.gb-sticker {
  margin-top: -36px; background: var(--paper); border: 4px solid var(--ink); border-radius: 12px; padding: .4rem 1.2rem .6rem;
  transform: rotate(-4deg); box-shadow: 0 0 0 5px var(--team), 7px 8px 0 5px var(--ink); text-align: center; z-index: 2;
}
.gb-sticker small { display: block; font: .95rem var(--f-label); }
.winner-name { font: clamp(2.4rem, 7vw, 4rem)/1 var(--f-vinyl); color: var(--team); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.gb-plate { margin-top: 1rem; background: var(--yellow); border: 3px solid var(--ink); padding: .3rem 1.2rem; font: 1.8rem var(--f-marker); }
.winner-q { font: 1rem var(--f-marker); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); margin: .6rem 0 0; }
.gb-lights { position: absolute; bottom: 30px; left: 18px; right: 18px; display: flex; justify-content: space-between; }
.gb-lights i { width: 34px; height: 22px; background: #ff3030; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 0 18px #ff3030; }

/* online / controls / settings */
.screen[data-screen="online"], .screen[data-screen="controls"], .screen[data-screen="settings"] { background: rgba(255,60,142,.82); overflow-y: auto; justify-content: flex-start; padding-top: 70px; }
.online-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 340px)); gap: 1.4rem; }
@media (max-width: 640px) { .online-grid { grid-template-columns: 1fr; } }
.online-grid .paper { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.room-code { font: 2.8rem/1 var(--f-marker); letter-spacing: .2em; background: var(--yellow); border: 3px solid var(--ink); padding: .3rem .8rem; margin: 0; user-select: text; }
#join-code { font: 2rem var(--f-marker); letter-spacing: .25em; width: 100%; text-transform: uppercase; border: 3px solid var(--ink); padding: .3rem .6rem; background: #fff; }
.online-status { font: 1.05rem var(--f-label); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); margin: 1.2rem 0; text-align: center; }
.online-status.err { color: #ffd7cf; background: rgba(170, 30, 20, .55); padding: .4rem .8rem; border-radius: 4px; }
.online-status.ok { color: #d9ffd0; }
.room-link { font: .8rem var(--f-label); word-break: break-all; user-select: all; background: #fff; border: 2px solid var(--ink); padding: .2rem .4rem; margin: .4rem 0 0; }
.room-link:empty { display: none; }
.online-lobby { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; justify-content: center; font: 1rem var(--f-label); color: var(--paper); }
.online-lobby[hidden] { display: none; }
.lobby-pick { font: 1.3rem var(--f-vinyl); background: var(--paper); border: 3px solid var(--ink); padding: .5rem 1rem; position: relative; }
.lobby-pick.p1 { box-shadow: 0 0 0 4px var(--orange); }
.lobby-pick.p2 { box-shadow: 0 0 0 4px var(--green); }
.lobby-pick.p1.p2 { box-shadow: 0 0 0 4px var(--orange), 0 0 0 8px var(--green); }
.paper.wide { width: min(900px, 94vw); }
.small-print { font-size: .85rem; margin-top: 1rem; }
.settings { display: flex; flex-direction: column; gap: 1rem; }
.settings label { display: flex; justify-content: space-between; gap: 1rem; font: 1rem var(--f-label); }
.settings input[type=range] { width: 55%; accent-color: var(--orange); }
.qual { display: flex; gap: .5rem; align-items: center; font: 1rem var(--f-label); flex-wrap: wrap; }

/* ---------- small / portrait screens */
@media (max-width: 640px) {
  .hud-top { gap: 6px; padding: 0 8px; }
  .hud-badge { display: none; }
  .hud-name { font-size: .78rem; padding: .18rem .4rem; }
  .hud-meta { gap: .3rem; }
  .pip { width: 12px; height: 12px; }
  .hud-timer { width: 58px; }
  .timer-num { font-size: 1.4rem; }
  .combo { top: 16%; width: 80px; }
  .adlib-pop { width: 46vw; }
}
@media (pointer: coarse) {
  .tbtns { grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 7px; }
  .dpad button { width: 56px; height: 56px; }
}
@media (pointer: coarse) and (max-width: 420px) {
  .tbtns { grid-template-columns: repeat(3, 46px); grid-auto-rows: 46px; gap: 6px; }
  .tbtns button { font-size: 1rem; }
  .dpad { gap: 5px; }
  .dpad button { width: 48px; height: 48px; }
}
.rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .screen[data-screen="fight"] .rotate-hint {
    display: block; position: absolute; top: 34%; left: 50%; transform: translateX(-50%) rotate(-2deg);
    background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
    font: .95rem var(--f-label); padding: .5rem .8rem; white-space: nowrap; pointer-events: none;
    animation: hintOut 5s forwards;
  }
}
@keyframes hintOut { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ---------- select cards: animated screen-print posters (fal.ai loops of the PDF art) */
.pick-card > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: grayscale(.55) contrast(1.15) brightness(.85); transition: filter .2s, transform .3s;
}
.pick-card.p1 > video, .pick-card.p2 > video, .pick-card:hover > video { filter: none; transform: scale(1.04); }
.pick-card.locked1 > video, .pick-card.locked2 > video { filter: saturate(1.2); }
.vs-poster img { object-fit: cover; object-position: center 25%; }
.gb-window img { height: 100%; width: 100%; object-fit: cover; object-position: center 22%; transform: none; }

/* ---------- intro name cards during the close-ups */
.intro-card {
  position: absolute; bottom: 16%; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  animation: cardIn .45s cubic-bezier(.2,1.4,.4,1) both; transition: opacity .3s, transform .3s;
}
.intro-card.p1 { left: 6%; } .intro-card.p2 { right: 6%; align-items: flex-end; }
.intro-card.out { opacity: 0; transform: translateY(20px); }
.ic-badge { font: 1.1rem var(--f-label); color: var(--paper); background: var(--orange); border: 3px solid var(--paper); border-radius: 999px; padding: .2rem .8rem; box-shadow: 3px 3px 0 var(--ink); }
.p2 .ic-badge { background: var(--green); }
.ic-name {
  font: clamp(3rem, 9vw, 7rem)/0.9 var(--f-vinyl); color: var(--orange); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 0 0 var(--paper), 8px 8px 0 var(--ink); transform: rotate(-3deg);
}
.p2 .ic-name { color: var(--green); transform: rotate(2deg); }
.ic-q { font: 1.2rem var(--f-label); background: var(--yellow); border: 3px solid var(--ink); padding: .25rem .7rem; transform: rotate(-1deg); }
.ic-tag { font: 1.15rem var(--f-marker); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
@keyframes cardIn { from { opacity: 0; transform: translateX(-60px) rotate(-6deg); } }
.p2.intro-card { animation-name: cardIn2; }
@keyframes cardIn2 { from { opacity: 0; transform: translateX(60px) rotate(6deg); } }

/* ---------- touch controls: d-pad + POING / PIED, RAGE only when available */
.touch .dpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: 58px 58px; gap: 6px; }
.touch .dpad .up { grid-column: 2; grid-row: 1; }
.touch .dpad .left { grid-column: 1; grid-row: 2; }
.touch .dpad .down { grid-column: 2; grid-row: 2; font-size: .62rem; font-family: var(--f-label); }
.touch .dpad .right { grid-column: 3; grid-row: 2; }
.touch .dpad button { width: 58px; height: 58px; border-radius: 14px; }
.touch .tbtns { display: grid; grid-template-columns: 70px 78px; grid-template-rows: 54px 78px; gap: 10px; align-items: end; }
.touch .tbtns button { border-radius: 50%; }
.touch .tbtns .punch { grid-column: 1; grid-row: 2; width: 78px; height: 78px; background: rgba(242,106,27,.92); color: var(--paper); font-size: 1rem; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.touch .tbtns .kick { grid-column: 2; grid-row: 2; width: 78px; height: 78px; background: rgba(15,157,88,.92); color: var(--paper); font-size: 1rem; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.touch .tbtns .throw { grid-column: 2; grid-row: 1; width: 54px; height: 54px; justify-self: center; font-size: .72rem; }
.touch .tbtns .rage {
  grid-column: 1; grid-row: 1; width: 64px; height: 54px; border-radius: 14px; font-size: .8rem;
  background: var(--rose); color: var(--paper); visibility: hidden; transform: scale(0);
  transition: transform .25s cubic-bezier(.2,1.6,.4,1);
}
.touch .tbtns .rage.ready { visibility: visible; transform: scale(1) rotate(-6deg); animation: ragePulse .8s ease-in-out infinite; }
@keyframes ragePulse { 50% { box-shadow: 0 0 0 6px rgba(255,60,142,.45), 3px 3px 0 var(--ink); } }
@media (pointer: coarse) and (max-width: 420px) {
  .touch .dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: 50px 50px; gap: 5px; }
  .touch .dpad button { width: 50px; height: 50px; }
  .touch .tbtns { grid-template-columns: 62px 70px; grid-template-rows: 48px 70px; gap: 8px; }
  .touch .tbtns .punch, .touch .tbtns .kick { width: 70px; height: 70px; font-size: .9rem; }
}
.room [hidden], .room[hidden] { display: none !important; }