/* Launchi party mode: shared look for the phone (index.html) and the big screen (host.html).
   Tokens and the card look are copied from ../index.html so party cards match the solo game. */
:root {
  color-scheme: light;
  --mint: #d6eedf; --cream: #fff6e0; --ink: #26201c; --muted: #5b6760;
  --pink: #ff5c8d; --sky: #7cc6ff; --mustard: #ffd23f; --lilac: #b9a3ff; --tomato: #ff7a5c; --leaf: #1d8a4b; --leaf-soft: #7fcf8a; --bad: #e2452b;
  --pts: #2f86d6; --mul: #e8336f;
  --font: 'Shantell Sans', 'Patrick Hand', 'Comic Sans MS', cursive;
  --blob: 52% 48% 55% 45% / 48% 55% 45% 52%;
  --paper-r: 14px 9px 16px 8px / 9px 15px 8px 16px;
  --cw: 100px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--mint); color: var(--ink); font: 15px/1.3 var(--font); font-variation-settings: "BNCE" 30, "INFM" 60; overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, .card:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-variation-settings: "BNCE" 70, "INFM" 100; line-height: 1.05; }
.kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 2.5px solid var(--ink); border-radius: 16px 12px 18px 10px; background: var(--cream); box-shadow: 3px 3px 0 var(--ink); padding: 8px 16px; font-weight: 800; font-size: 15px; min-height: 44px; text-decoration: none; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.pink { background: var(--pink); color: #fff; } .btn.mustard { background: var(--mustard); } .btn.sky { background: var(--sky); }
.btn.small { min-height: 34px; padding: 4px 10px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }
.panel { background: var(--cream); border: 2.5px solid var(--ink); border-radius: var(--paper-r); box-shadow: 4px 4px 0 var(--ink); }
.face { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 2.5px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--mustard); }
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ico { width: 22px; height: 22px; display: block; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* Cards (same anatomy as the solo game: value blob, name, art, kind, effect) */
.card { --k: var(--pink); --kd: #c2185b; position: relative; box-sizing: border-box; width: var(--cw); display: flex; flex-direction: column; gap: calc(var(--cw) * .03); padding: calc(var(--cw) * .12 + 3px) calc(var(--cw) * .05) calc(var(--cw) * .06); background: var(--cream); border: 2.5px solid var(--ink); border-radius: var(--paper-r); box-shadow: 3px 3px 0 var(--k); font-size: calc(var(--cw) * .08); line-height: 1.15; text-align: left; -webkit-user-select: none; user-select: none; }
.k-build { --k: var(--leaf-soft); --kd: var(--leaf); } .k-signal { --k: var(--mustard); --kd: #9a7300; } .k-meeting { --k: #c9c2b8; --kd: var(--muted); }
.k-oops { --k: var(--tomato); --kd: var(--bad); } .card.k-oops { background: #fff0ea; }
.val { position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% -50%; display: grid; place-items: center; min-width: calc(var(--cw) * .3); height: calc(var(--cw) * .22); padding: 0 calc(var(--cw) * .05); border: 2.5px solid var(--ink); border-radius: var(--blob); color: #fff; font-weight: 800; font-size: calc(var(--cw) * .11); line-height: 1; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.val.p { background: var(--pts); } .val.m { background: var(--mul); } .val.z { background: #b8b1a8; }
.c-name { min-height: 2.2em; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: calc(var(--cw) * .1); line-height: 1.05; font-variation-settings: "BNCE" 70, "INFM" 100; text-wrap: balance; overflow-wrap: anywhere; }
.c-art { position: relative; aspect-ratio: 4 / 3; border: 2px solid var(--ink); border-radius: 9px 6px 11px 6px; overflow: hidden; background: var(--cream); }
.c-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-art.ph { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--k) 45%, #fff), color-mix(in srgb, var(--k) 45%, #fff) 8px, color-mix(in srgb, var(--k) 25%, #fff) 8px, color-mix(in srgb, var(--k) 25%, #fff) 16px); }
.c-art.ph .ico { width: 42%; height: auto; aspect-ratio: 1; }
.c-type { font-size: calc(var(--cw) * .07); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--kd); }
.c-fx { padding: 2px 4px; border-radius: 8px 6px 9px 6px; background: color-mix(in srgb, var(--k) 26%, #fff); font-size: calc(var(--cw) * .075); line-height: 1.12; }
.c-fx.flav { background: transparent; padding: 0; color: var(--muted); font-style: italic; }
.r-legendary { outline: 2.5px solid var(--mustard); outline-offset: 2px; }
.card .fake { position: absolute; z-index: 4; top: 42%; left: 50%; translate: -50% 0; rotate: -12deg; padding: 1px 6px; border: 3px solid var(--bad); color: var(--bad); background: rgba(255,255,255,.92); font-weight: 800; letter-spacing: .08em; font-size: calc(var(--cw) * .12); }

/* Timer bar */
.timer { position: relative; height: 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; }
.timer i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--pink); transform-origin: left; }
.timer.paused i { background: #b8b1a8; }

/* Toast + pause veil */
.toast { position: fixed; z-index: 50; left: 50%; bottom: 18px; translate: -50% 0; max-width: calc(100% - 32px); padding: 10px 16px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--ink); color: #fff; font-weight: 800; box-shadow: 3px 3px 0 var(--pink); }
.veil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(38,32,28,.55); color: #fff; font-weight: 800; font-size: 28px; text-align: center; }
.veil .panel { color: var(--ink); padding: 18px 26px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }