/* INKWAVE — friend match screens (menus.js 'friend' + 'lobby') and the "waiting for players" line over the fade. */

/* ------------------------------------------------------------------ waiting (inside #fade) */
.iw-netwait {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font: 800 18px/1.3 'Rubik', system-ui, sans-serif; letter-spacing: .06em; text-align: center; white-space: nowrap;
  animation: iw-netwait 1.4s ease-in-out infinite;
}
@keyframes iw-netwait { 50% { opacity: .45; } }

/* ------------------------------------------------------------------ shared */
.iw-room__status { min-height: 1.4em; font: 700 var(--fs-m) / 1.35 'Rubik', sans-serif; color: rgba(255, 255, 255, .8); overflow-wrap: anywhere; }
.iw-room__status.is-error { color: #ff8da1; }
.iw-room__status.is-ok { color: #9dffcf; }
.iw-room__status.is-busy::after { content: ''; display: inline-block; width: .9em; height: .9em; margin-left: .5em; vertical-align: -.1em;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--a); border-radius: 50%; animation: iw-spin .8s linear infinite; }
.iw-room__status.is-shake { animation: iw-shake .4s; }
@keyframes iw-spin { to { transform: rotate(360deg); } }
.iw-btn:disabled { opacity: .45; cursor: default; }
.iw-btn:disabled .iw-btn__blob { display: none; }

/* ------------------------------------------------------------------ friend (create / join) */
.iw-room__body { position: absolute; left: calc(var(--u) * 3.6); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 50), 60vw);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.iw-room__card { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); }
.iw-room__text { margin: 0; font: 600 var(--fs-m) / 1.45 'Rubik', sans-serif; color: rgba(255, 255, 255, .78); }
.iw-room__input { font-size: calc(var(--u) * 2.4); letter-spacing: .35em; text-transform: uppercase; }
.iw-room__input::placeholder { color: rgba(255, 255, 255, .25); letter-spacing: .2em; }
.iw-room.is-busy .iw-btn { pointer-events: none; opacity: .7; }

/* ------------------------------------------------------------------ lobby */
.iw-lobby__body { position: absolute; left: calc(var(--u) * 3.6); right: calc(var(--u) * 3.6); top: calc(var(--u) * 10.4); bottom: calc(var(--u) * 6);
  display: grid; grid-template-columns: 1.45fr 1fr; gap: calc(var(--u) * 2.2); align-items: start; }
.iw-lobby__main { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); min-width: 0; }
.iw-lobby__code { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8); flex-wrap: wrap; }
.iw-lobby__codetext { --k: #15121c; font-size: calc(var(--u) * 3.6); letter-spacing: .22em; color: #fff; user-select: text; -webkit-user-select: text; pointer-events: auto; }
.iw-lobby__code .iw-btn { margin-left: auto; }

.iw-lobby__teams { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); }
.iw-lteam { --c: var(--a); display: flex; flex-direction: column; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.5);
  background: linear-gradient(170deg, rgba(38, 31, 58, .9), rgba(18, 14, 30, .92));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 calc(var(--u) * .45) 0 var(--c), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .38); }
.iw-lteam--b { --c: var(--b); }
.iw-lteam__head { display: flex; align-items: center; gap: .6em; padding: calc(var(--u) * .5) calc(var(--u) * .2) calc(var(--u) * .2); font: 400 calc(var(--u) * 1.7) / 1 'Titan One', sans-serif; }
.iw-lteam__head span { margin-left: auto; font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .08em; opacity: .75; }
.iw-lteam__dot { width: .8em; height: .8em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.iw-lteam__slots { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.iw-lslot { display: flex; align-items: center; gap: calc(var(--u) * .8); height: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * .9); border-radius: calc(var(--u) * .9);
  background: rgba(255, 255, 255, .07); font: 800 var(--fs-m) / 1 'Rubik', sans-serif; min-width: 0; }
.iw-lslot.is-self { background: color-mix(in srgb, var(--c) 30%, rgba(20, 16, 32, .9)); box-shadow: inset 0 0 0 2px var(--c); }
.iw-lslot.is-cpu { opacity: .55; font-weight: 600; font-style: italic; }
.iw-lslot__icon { flex: none; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.2); color: var(--c); }
.iw-lslot.is-cpu .iw-lslot__icon { color: rgba(255, 255, 255, .7); }
.iw-lslot.is-open { opacity: .35; }
.iw-lslot__icon svg { width: 100%; height: 100%; }
.iw-lslot__name { flex: 1; min-width: 4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-lslot__tag { flex: none; display: flex; align-items: center; gap: .3em; padding: .3em .55em; border-radius: 999px; background: rgba(255, 255, 255, .12);
  font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .06em; }
.iw-lslot__tag.is-host { background: #ffd21a; color: #2a2210; padding: .3em .4em; }
.iw-lslot__tag i { width: 1.1em; height: 1.1em; }
.iw-lslot__tag i svg { width: 100%; height: 100%; }
.iw-lteam__join { justify-content: center; }

.iw-lobby__side { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6); }
.iw-lstage { display: flex; align-items: center; gap: calc(var(--u) * 1.1); width: 100%; padding: calc(var(--u) * .6); border: 0; border-radius: calc(var(--u) * 1.2);
  background: rgba(20, 16, 32, .9); color: #fff; text-align: left; cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 calc(var(--u) * .42) 0 rgba(0, 0, 0, .45); transition: transform .35s var(--spring); }
.iw-lstage.is-focus { transform: scale(1.03); }
.iw-lstage.is-locked { cursor: default; }
.iw-lstage__art { flex: none; width: calc(var(--u) * 11); aspect-ratio: 16 / 9; border-radius: calc(var(--u) * .8); overflow: hidden; background: rgba(255, 255, 255, .06); }
.iw-lstage__art img, .iw-lstage__art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.iw-lstage__text { display: flex; flex-direction: column; gap: .3em; min-width: 0; flex: 1; }
.iw-lstage__text small { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .15em; opacity: .7; }
.iw-lstage__text b { font: 400 calc(var(--u) * 1.7) / 1.05 'Titan One', sans-serif; }
.iw-lstage__time { font: 700 var(--fs-s) / 1 'Rubik', sans-serif; opacity: .8; }
.iw-lstage__arrows { flex: none; display: flex; gap: .2em; margin-right: calc(var(--u) * .5); }
.iw-lstage__arrows i { display: block; width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); color: var(--a); }
.iw-lstage__arrows i svg { width: 100%; height: 100%; }
.iw-lstage.is-locked .iw-lstage__arrows { display: none; }
.iw-lobby__side .iw-wchip { flex: none; }
.iw-lobby__start { width: 100%; }
.iw-lobby__wait { display: flex; align-items: center; justify-content: center; gap: .8em; min-height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1);
  border-radius: calc(var(--u) * 1.2); background: rgba(255, 255, 255, .06); font: 800 var(--fs-m) / 1.3 'Rubik', sans-serif; text-align: center; }
.iw-lobby__dots { display: flex; gap: .3em; }
.iw-lobby__dots b { width: .55em; height: .55em; border-radius: 50%; background: var(--a); animation: iw-dot 1.1s ease-in-out infinite; }
.iw-lobby__dots b:nth-child(2) { animation-delay: .15s; } .iw-lobby__dots b:nth-child(3) { animation-delay: .3s; }
@keyframes iw-dot { 40% { transform: translateY(-.45em); } }
.iw-lobby__row { display: flex; justify-content: flex-end; }

/* ------------------------------------------------------------------ phones */
html.is-touch .iw-room__body { left: var(--ml); top: var(--mt); bottom: var(--mb); width: min(560px, calc(100vw - var(--ml) - var(--mr)));
  pointer-events: auto; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; gap: 10px; }
html.is-touch .iw-lobby__body { left: var(--ml); right: var(--mr); top: var(--mt); bottom: var(--mb); gap: 12px; }
html.is-touch .iw-lobby__main, html.is-touch .iw-lobby__side { max-height: 100%; pointer-events: auto; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; }
html.is-touch .iw-lobby__code { padding: 8px 12px; }
html.is-touch .iw-lobby__side { padding: 10px; gap: 8px; }
html.is-touch .iw-lslot { height: 34px; }
html.is-touch .iw-room .iw-prompts, html.is-touch .iw-lobby .iw-prompts { display: none; }