:root {
  --night: #141940;
  --night-2: #1b2257;
  --night-3: #232c6b;
  --glass: rgba(27, 34, 87, .62);
  --line: rgba(230, 194, 119, .28);
  --line-soft: rgba(230, 194, 119, .14);
  --text: #f3ebda;
  --muted: #a9acc9;
  --gold: #e6c277;
  --gold-2: #f3d99a;
  --gold-d: #b48d3e;
  --cream: #f3ebda;
  --cream-2: #e4d6b8;
  --ink: #1b2150;
  --peri: #7f9bf0;
  --red: #c9554c;
  --red-d: #7d2a2d;
  --red-l: #f0b9a8;
  --blue: #3e62dc;
  --blue-d: #1f3291;
  --blue-l: #b7c7fa;
  --neutral: #e8dcc2;
  --neutral-d: #b7a37a;
  --eclipse: #07081c;
  --radius: 14px;
  --serif: "Noto Serif KR", "Noto Serif CJK KR", "Nanum Myeongjo", serif;
  --sans: "Noto Sans KR", "Pretendard", system-ui, sans-serif;
  --latin: "Cinzel", "Noto Serif KR", serif;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 2C33.8 24.2 39.8 30.2 62 32C39.8 33.8 33.8 39.8 32 62C30.2 39.8 24.2 33.8 2 32C24.2 30.2 30.2 24.2 32 2Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background-color: var(--night);
  background-image:
    url("../img/orbit.svg"),
    url("../img/sky.svg"),
    radial-gradient(900px 520px at 50% -120px, rgba(127, 155, 240, .22), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(230, 194, 119, .08), transparent 70%),
    linear-gradient(180deg, #19205a 0%, var(--night) 55%, #0f1333 100%);
  background-size: min(1400px, 160vw) auto, 1200px 1200px, auto, auto, auto;
  background-position: center 120px, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--gold); }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.eyebrow { font-family: var(--latin); font-size: .72rem; letter-spacing: .32em; color: var(--gold); margin: 0; }
.hint { color: var(--muted); font-size: .8rem; font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .66em 1.25em; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); color: var(--text); font-weight: 600; cursor: pointer; letter-spacing: .02em;
  text-decoration: none; transition: transform .1s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover:not(:disabled) { border-color: var(--gold); background: rgba(230, 194, 119, .08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.big { padding: .9em 1.8em; font-size: 1.02rem; }
.btn.small { padding: .42em .95em; font-size: .84rem; }
.btn.primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, #d4ac5c); color: var(--ink); border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 240, 200, .35) inset, 0 8px 24px rgba(230, 194, 119, .22);
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f8e4b0, var(--gold-2)); box-shadow: 0 0 0 1px rgba(255, 240, 200, .5) inset, 0 10px 30px rgba(230, 194, 119, .35); }
.btn.red { background: linear-gradient(180deg, rgba(201, 85, 76, .35), rgba(125, 42, 45, .35)); border-color: rgba(201, 85, 76, .7); }
.btn.blue { background: linear-gradient(180deg, rgba(62, 98, 220, .38), rgba(31, 50, 145, .38)); border-color: rgba(127, 155, 240, .75); }
.btn.red:hover:not(:disabled) { border-color: var(--red-l); background: rgba(201, 85, 76, .45); }
.btn.blue:hover:not(:disabled) { border-color: var(--blue-l); background: rgba(62, 98, 220, .5); }
.btn.ghost { background: transparent; }
.btn.right { margin-left: auto; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(14px, 3vw, 28px); position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(20, 25, 64, .92), rgba(20, 25, 64, .7));
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft);
}
.topbar::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; transform: translateX(-50%);
  background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; opacity: .7;
}
.brand { display: flex; align-items: center; }
.brand img { height: 38px; width: auto; display: block; }
.topnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.navlink { color: var(--text); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: .88rem; letter-spacing: .04em; }
.navlink:hover { color: var(--gold); }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  border-radius: 999px; padding: 6px 13px; font-size: .86rem; cursor: pointer; transition: border-color .2s;
}
.chip:hover { border-color: var(--gold); }
.chip .lbl { font-family: var(--latin); font-size: .66rem; letter-spacing: .2em; color: var(--gold); }
.chip b { font-family: var(--latin); letter-spacing: .12em; font-weight: 600; }
.chip .ico { width: 15px; height: 15px; color: var(--gold); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.chip.me.red .dot { background: var(--red); box-shadow: 0 0 8px var(--red); }
.chip.me.blue .dot { background: var(--blue); box-shadow: 0 0 8px var(--peri); }
.chip.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.chip.ghost:hover { color: var(--text); }

.mode-notice {
  margin: 0 auto 28px; width: min(680px, calc(100% - 24px)); text-align: center;
  border: 1px dashed var(--line); color: var(--gold-2); padding: 9px 14px; border-radius: 10px; font-size: .8rem; background: rgba(20, 25, 64, .6);
}

.center-msg { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 14px; color: var(--muted); }
.spinner { width: 46px; height: 46px; margin: auto; position: relative; }
.spinner::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line); animation: spin 6s linear infinite; }
.spinner::after { content: ""; position: absolute; inset: 12px; background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; animation: pulse 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(.7) rotate(45deg); opacity: .6; } }

.login { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 36px 16px 60px; }
.gate {
  position: relative; width: min(600px, 100%); padding: 22px 34px 34px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(35, 44, 107, .88), rgba(20, 25, 64, .94));
  border-radius: 6px; box-shadow: 0 40px 90px rgba(5, 7, 30, .6);
  outline: 1px solid var(--line); outline-offset: -10px;
}
.gate::before { content: ""; position: absolute; inset: 15px; border: 1px solid var(--line-soft); pointer-events: none; }
.gate-sky {
  position: absolute; left: 50%; top: -40%; width: 160%; aspect-ratio: 1; transform: translateX(-50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(230, 194, 119, .09) 0deg .6deg, transparent .6deg 7.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 52%); mask: radial-gradient(circle, #000 18%, transparent 52%);
}
.corner { position: absolute; width: 26px; height: 26px; background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; z-index: 2; }
.corner.tl { top: -3px; left: -3px; } .corner.tr { top: -3px; right: -3px; }
.corner.bl { bottom: -3px; left: -3px; } .corner.br { bottom: -3px; right: -3px; }
.gate-logo { position: relative; display: block; width: min(300px, 82%); height: auto; margin: 0 auto -6px; }
.gate-lead { position: relative; font-family: var(--serif); font-size: .93rem; line-height: 1.8; color: #d9d6e6; margin: 0 0 26px; }
.form { position: relative; display: grid; gap: 18px; text-align: left; }
.form label { display: grid; gap: 6px; }
.form label > span { font-size: .78rem; letter-spacing: .08em; color: var(--gold); font-weight: 600; }
.form em { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.form input {
  font: inherit; font-size: 1.05rem; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text); border-radius: 0; transition: border-color .2s;
}
.form input::placeholder { color: rgba(169, 172, 201, .55); }
.form input:focus { outline: none; border-bottom-color: var(--gold); }
.form input.upper { text-transform: uppercase; font-family: var(--latin); letter-spacing: .14em; }
.form .btn { margin-top: 8px; }
.gate-foot { position: relative; display: inline-block; margin-top: 20px; font-size: .84rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-soft); padding-bottom: 2px; }
.gate-foot:hover { color: var(--gold); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; flex-wrap: wrap; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span:first-of-type { width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); position: relative; transition: background .2s; flex: none; }
.switch > span:first-of-type::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: var(--muted); transition: left .2s, background .2s, transform .3s; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.switch input:checked + span { background: rgba(230, 194, 119, .18); border-color: var(--gold); }
.switch input:checked + span::after { left: 23px; background: var(--gold); transform: rotate(45deg); }
.switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: .45em 1.05em; cursor: pointer; font-weight: 600; border-radius: 999px; color: var(--muted); }
.seg button.on { background: var(--gold); color: var(--ink); }

.lobby { max-width: 1120px; margin: 0 auto; padding: 26px 16px 70px; display: grid; gap: 18px; }
.panel { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 22px; backdrop-filter: blur(6px); }
.me-panel { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.me-panel h2 { font-family: var(--serif); font-weight: 700; margin: 4px 0 2px; font-size: 1.55rem; }
.me-panel p { margin: 0; }
.me-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.teams3 { display: grid; grid-template-columns: 1fr .82fr 1fr; gap: 16px; }
.team-col {
  position: relative; border-radius: var(--radius); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 270px;
  border: 1px solid var(--line-soft); background: var(--glass); overflow: hidden;
}
.team-col::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 190px; height: 190px; border-radius: 50%;
  border: 1px dashed currentColor; opacity: .25; pointer-events: none;
}
.team-col h3 { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; margin: 0; display: flex; align-items: baseline; justify-content: space-between; letter-spacing: .04em; }
.team-col .count { font-family: var(--latin); font-size: 1rem; color: var(--muted); }
.team-col.red { color: var(--red-l); background: linear-gradient(170deg, rgba(201, 85, 76, .26), rgba(125, 42, 45, .12) 60%, rgba(27, 34, 87, .5)); border-color: rgba(201, 85, 76, .45); }
.team-col.blue { color: var(--blue-l); background: linear-gradient(170deg, rgba(62, 98, 220, .32), rgba(31, 50, 145, .14) 60%, rgba(27, 34, 87, .5)); border-color: rgba(127, 155, 240, .45); }
.team-col.bench { color: var(--gold); }
.team-col h3, .team-col .pl { color: var(--text); }
.team-col.red h3 { color: var(--red-l); }
.team-col.blue h3 { color: var(--blue-l); }
.team-col.bench h3 { color: var(--gold); }
.team-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; flex: 1; align-content: start; }
.team-col .btn { width: 100%; }
.team-col .sub { margin: 4px 0 0; font-size: .74rem; letter-spacing: .14em; color: var(--muted); }
.team-col.bench ul { flex: none; }
.team-col.bench .btn { margin-top: auto; }
.pl { display: flex; align-items: center; gap: 8px; background: rgba(10, 13, 40, .35); border: 1px solid transparent; border-radius: 10px; padding: 8px 11px; }
.pl.mine { border-color: var(--gold); }
.pl .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 0 4px; opacity: .6; }
.pl .x:hover { opacity: 1; color: var(--text); }
.empty { color: var(--muted); font-size: .86rem; padding: 6px 2px; list-style: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 3px 8px 3px 6px; border-radius: 999px; white-space: nowrap; }
.badge svg { width: 11px; height: 11px; fill: currentColor; }
.badge.spy { background: rgba(230, 194, 119, .16); color: var(--gold-2); border: 1px solid rgba(230, 194, 119, .45); }

.start-panel { display: grid; gap: 14px; justify-items: start; }
.issues { margin: 0; padding-left: 18px; color: var(--red-l); font-size: .9rem; display: grid; gap: 2px; }
.ready { margin: 0; color: var(--gold-2); font-family: var(--serif); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ready::before { content: ""; width: 14px; height: 14px; background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }

.game { max-width: 1320px; margin: 0 auto; padding: 18px clamp(10px, 2vw, 22px) 60px; }
.status { margin-bottom: 16px; }
.banner {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 22px; border-radius: var(--radius); text-align: center;
  background: var(--glass); border: 1px solid var(--line-soft);
}
.banner .turn { display: inline-flex; align-items: center; gap: 10px; }
.banner .turn i { width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(.65) rotate(45deg); opacity: .6; } }
.banner b { font-family: var(--serif); font-weight: 700; font-size: 1.32rem; letter-spacing: .04em; }
.banner.red { color: var(--red-l); border-color: rgba(201, 85, 76, .55); background: linear-gradient(90deg, rgba(125, 42, 45, .55), rgba(27, 34, 87, .6) 50%, rgba(125, 42, 45, .55)); }
.banner.blue { color: var(--blue-l); border-color: rgba(127, 155, 240, .55); background: linear-gradient(90deg, rgba(31, 50, 145, .6), rgba(27, 34, 87, .6) 50%, rgba(31, 50, 145, .6)); }
.banner .muted { color: var(--muted); font-size: .95rem; }
.clue {
  position: relative; display: inline-flex; align-items: stretch; color: var(--ink);
  background: linear-gradient(180deg, #f7f0e1, var(--cream-2)); border-radius: 3px; padding: 0;
  box-shadow: 0 0 0 1px var(--gold-d), 0 0 0 4px rgba(20, 25, 64, .9), 0 0 0 5px var(--gold), 0 10px 24px rgba(0, 0, 0, .3);
  margin: 4px 14px;
}
.clue::before, .clue::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.clue::before { left: -18px; } .clue::after { right: -18px; }
.clue-w { font-family: var(--serif); font-weight: 900; font-size: 1.3rem; padding: 6px 18px; letter-spacing: .06em; }
.clue-n { display: grid; place-items: center; min-width: 42px; font-family: var(--latin); font-weight: 600; font-size: 1.2rem; background: var(--ink); color: var(--gold); }
.banner .guess { font-family: var(--latin); font-size: .82rem; letter-spacing: .14em; color: var(--muted); }
.banner.win { flex-direction: column; gap: 4px; padding: 20px; animation: pop .6s ease; border-color: var(--gold); background: radial-gradient(ellipse at center, rgba(230, 194, 119, .2), rgba(27, 34, 87, .7) 70%); }
.banner.win b { font-size: 2rem; color: var(--gold-2); }
.banner.win.red b { color: var(--red-l); }
.banner.win.blue b { color: var(--blue-l); }
.banner.win span:last-child { color: var(--muted); font-size: .92rem; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

.table { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; gap: 18px; align-items: start; }
.side { position: relative; border-radius: var(--radius); padding: 16px 14px; border: 1px solid var(--line-soft); display: grid; gap: 12px; transition: box-shadow .3s, opacity .3s, border-color .3s; opacity: .72; background: var(--glass); overflow: hidden; }
.side.active { opacity: 1; }
.side.red { border-color: rgba(201, 85, 76, .35); background: linear-gradient(180deg, rgba(125, 42, 45, .4), rgba(27, 34, 87, .55)); }
.side.blue { border-color: rgba(127, 155, 240, .35); background: linear-gradient(180deg, rgba(31, 50, 145, .5), rgba(27, 34, 87, .55)); }
.side.red.active { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 40px rgba(201, 85, 76, .28); }
.side.blue.active { border-color: var(--peri); box-shadow: 0 0 0 1px var(--peri), 0 0 40px rgba(127, 155, 240, .28); }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.side .pl { padding: 6px 9px; font-size: .86rem; flex-wrap: wrap; gap: 5px; }
.side .pl .pname { white-space: normal; }
.score { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.score .team-name { grid-column: 1 / -1; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; margin-bottom: 2px; }
.side.red .team-name, .side.red .num { color: var(--red-l); }
.side.blue .team-name, .side.blue .num { color: var(--blue-l); }
.score .num { font-family: var(--latin); font-weight: 600; font-size: 3.1rem; line-height: .9; }
.score .lbl { font-size: .76rem; color: var(--muted); letter-spacing: .08em; padding-bottom: 4px; }

.board-wrap { display: grid; gap: 12px; }
.spy-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .82rem; color: var(--gold-2); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(230, 194, 119, .06); }
.spy-note svg { width: 12px; height: 12px; fill: var(--gold); }
.tip { margin: 0; text-align: center; font-size: .8rem; color: var(--muted); letter-spacing: .04em; }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.1vw, 14px); perspective: 1000px; }

.card {
  --core: var(--cream);
  position: relative; aspect-ratio: 1.5 / 1; border: 0; border-radius: 8px; padding: 0;
  display: grid; place-items: center; color: var(--ink); cursor: default; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #fbf6ea, transparent 70%),
    linear-gradient(180deg, var(--cream), var(--cream-2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 22px rgba(5, 7, 30, .45), 0 2px 0 #b9a77e;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s;
  font-family: var(--serif);
}
.card .frame { position: absolute; inset: 7px; border: 1px solid rgba(180, 141, 62, .55); border-radius: 4px; pointer-events: none; }
.card .frame::before, .card .frame::after { content: ""; position: absolute; left: 50%; width: 34%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(180, 141, 62, .7), transparent); }
.card .frame::before { top: 22%; } .card .frame::after { bottom: 22%; }
.card .orn { position: absolute; top: 9%; left: 50%; width: 11%; max-width: 16px; aspect-ratio: 1; transform: translateX(-50%); color: var(--gold-d); }
.card .orn svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.card-word { position: relative; font-weight: 700; font-size: clamp(13px, 1.9vw, 25px); letter-spacing: .02em; padding: 0 8%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card.clickable { cursor: pointer; }
.card.clickable:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 30px rgba(5, 7, 30, .55), 0 2px 0 #b9a77e, 0 0 0 1px var(--gold); }
.card.pending { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(230, 194, 119, .55), 0 18px 30px rgba(5, 7, 30, .55); }
.confirm {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center; padding: 6px;
  background: rgba(20, 25, 64, .86); color: var(--gold-2); font-family: var(--sans); font-size: clamp(10px, 1.05vw, 13px); letter-spacing: .04em;
  backdrop-filter: blur(2px); animation: fade .2s ease;
}
.confirm b { font-family: var(--serif); font-size: clamp(13px, 1.7vw, 20px); color: var(--cream); letter-spacing: .04em; }
@keyframes fade { from { opacity: 0; } }

.card.key .key-mark { position: absolute; top: 9%; right: 8%; width: 15%; max-width: 22px; aspect-ratio: 1; }
.card.key .key-mark svg { width: 100%; height: 100%; display: block; }
.card.key .orn { opacity: 0; }
.card.k-red { background: linear-gradient(180deg, #f6dcd3, #e8b8aa); box-shadow: 0 0 0 2px var(--red) inset, 0 10px 22px rgba(5, 7, 30, .45); }
.card.k-red .frame { border-color: rgba(125, 42, 45, .45); }
.card.k-red .key-mark { color: var(--red); fill: var(--red); }
.card.k-red .key-mark svg { fill: var(--red); }
.card.k-blue { background: linear-gradient(180deg, #dfe6fb, #b9c8f3); box-shadow: 0 0 0 2px var(--blue) inset, 0 10px 22px rgba(5, 7, 30, .45); }
.card.k-blue .frame { border-color: rgba(31, 50, 145, .4); }
.card.k-blue .key-mark svg { fill: var(--blue); }
.card.k-neutral .key-mark { color: var(--neutral-d); }
.card.k-neutral .key-mark svg { fill: var(--neutral-d); }
.card.k-assassin { background: radial-gradient(circle at 50% 40%, #262b55, var(--eclipse) 75%); color: var(--cream); box-shadow: 0 0 0 2px var(--gold) inset, 0 10px 22px rgba(5, 7, 30, .5); }
.card.k-assassin .frame { border-color: rgba(230, 194, 119, .35); }
.card.k-assassin .key-mark { color: var(--gold); }
.game:not(.spy-view) .card.key { filter: saturate(.75) brightness(.92); }

.card.rv { cursor: default; }
.card.rv .art { position: absolute; inset: 8% 0 24%; display: grid; place-items: center; }
.card.rv .art svg { height: 100%; max-width: 70%; }
.rv-word { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-weight: 600; font-size: clamp(9px, 1.05vw, 13px); letter-spacing: .08em; white-space: nowrap; opacity: .85; }
.card.rv-red { --core: #fff3e6; color: var(--gold-2); background: radial-gradient(circle at 50% 35%, #d8665b, var(--red) 40%, var(--red-d) 100%); box-shadow: 0 0 0 1px rgba(243, 217, 154, .5) inset, 0 10px 22px rgba(5, 7, 30, .5); }
.card.rv-blue { --core: #fff3e6; color: var(--gold-2); background: radial-gradient(circle at 50% 35%, #5e7ff0, var(--blue) 40%, var(--blue-d) 100%); box-shadow: 0 0 0 1px rgba(243, 217, 154, .5) inset, 0 10px 22px rgba(5, 7, 30, .5); }
.card.rv-red .rv-word, .card.rv-blue .rv-word { color: var(--cream); }
.card.rv-neutral { color: var(--neutral-d); background: linear-gradient(180deg, #d9ceb4, #bfb194); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 6px 14px rgba(5, 7, 30, .4); filter: saturate(.7); }
.card.rv-neutral .art svg { fill: #8d7b54; max-width: 52%; }
.card.rv-neutral .rv-word { color: var(--ink); opacity: .65; }
.card.rv-assassin { color: var(--gold); background: radial-gradient(circle at 50% 42%, #2a2f60, var(--eclipse) 70%); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 30px rgba(230, 194, 119, .25), 0 10px 22px rgba(0, 0, 0, .6); }
.card.rv-assassin .rv-word { color: var(--gold-2); }
.card.flip-in { animation: flip .65s cubic-bezier(.2, .8, .3, 1.15); }
@keyframes flip { 0% { transform: rotateY(90deg) scale(1.04); filter: brightness(1.8); } 100% { transform: none; } }

.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 48px; padding-top: 4px; }
.clue-form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; align-items: center; }
.clue-form input, .clue-form select {
  font: inherit; font-size: 1.05rem; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(243, 235, 218, .96); color: var(--ink); font-family: var(--serif); font-weight: 700;
}
.clue-form input:focus, .clue-form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.clue-form input { flex: 1; min-width: 160px; }
.clue-form select { width: 76px; text-align: center; }

.below { margin-top: 24px; display: grid; gap: 8px; }
.log { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 18px; }
.log summary { cursor: pointer; font-family: var(--latin); font-size: .76rem; letter-spacing: .3em; color: var(--gold); }
.log ol { list-style: none; margin: 10px 0 0; padding: 0; max-height: 220px; overflow: auto; display: grid; gap: 2px; font-size: .88rem; }
.log li { padding: 5px 10px; border-left: 2px solid var(--line-soft); color: #d6d3e4; }
.log li.red { border-color: var(--red); }
.log li.blue { border-color: var(--peri); }

#toast {
  position: fixed; left: 50%; top: 76px; transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  background: var(--cream); color: var(--ink); padding: 11px 20px; border-radius: 999px; font-weight: 600; z-index: 50; font-size: .92rem;
  box-shadow: 0 0 0 1px var(--gold), 0 14px 34px rgba(5, 7, 30, .5); transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
  .teams3 { grid-template-columns: 1fr 1fr; }
  .teams3 .bench { grid-column: 1 / -1; order: 3; min-height: 0; }
  .table { grid-template-columns: 1fr 1fr; gap: 10px; }
  .board-wrap { grid-column: 1 / -1; order: 3; }
  .side { padding: 12px; }
  .score .num { font-size: 2.4rem; }
}
@media (max-width: 560px) {
  .topbar { padding: 8px 12px; }
  .brand img { height: 30px; }
  .navlink { padding: 4px 6px; }
  .chip { padding: 5px 10px; font-size: .8rem; }
  .chip .lbl { display: none; }
  .gate { padding: 18px 22px 28px; }
  .teams3 { grid-template-columns: 1fr; }
  .team-col { min-height: 0; }
  .game { padding: 12px 8px 50px; }
  .banner { gap: 10px; padding: 12px; }
  .banner b { font-size: 1.12rem; }
  .clue-w { font-size: 1.1rem; padding: 5px 12px; }
  .card { aspect-ratio: 1 / 1.08; border-radius: 6px; }
  .card .frame { inset: 4px; }
  .card .frame::before { top: 18%; } .card .frame::after { bottom: 18%; }
  .card-word { font-size: clamp(11px, 3.5vw, 16px); white-space: normal; word-break: keep-all; line-height: 1.2; text-align: center; padding: 0 6%; }
  .rv-word { font-size: 9.5px; letter-spacing: .02em; }
  .side ul { display: flex; flex-wrap: wrap; }
  .score .num { font-size: 2rem; }
}

.gate-title { position: relative; text-align: center; margin: 4px 0 16px; }
.gate.narrow { width: min(400px, 100%); padding-top: 42px; }
.gate-h { position: relative; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; margin: 0 0 8px; }
.gate-empty { position: relative; color: var(--muted); line-height: 1.7; font-size: .92rem; margin: 6px 0 22px; }
.gate .form { margin-top: 10px; }
.name-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 0 0 6px; max-height: 52vh; overflow: auto; padding: 4px 2px; }
.name-pick {
  position: relative; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 13, 40, .35); padding: 14px 10px; cursor: pointer;
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--text); transition: border-color .2s, background .2s, transform .1s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.name-pick::before { content: ""; position: absolute; top: 7px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); background: var(--gold); opacity: .55; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.name-pick:hover { border-color: var(--gold); background: rgba(230, 194, 119, .1); }
.name-pick:active { transform: translateY(1px); }

.join-panel { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 30px 22px; position: relative; overflow: hidden; }
.join-panel h2 { font-family: var(--serif); font-weight: 700; font-size: 1.55rem; margin: 2px 0 0; }
.join-panel p { margin: 0; }
.join-panel .btn { margin-top: 12px; min-width: 240px; }
.join-panel.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(230, 194, 119, .25), 0 0 40px rgba(230, 194, 119, .12); }

.leader { max-width: 980px; margin: 0 auto; padding: 26px 16px 70px; display: grid; gap: 18px; }
.leader-head { text-align: center; padding: 6px 0 4px; }
.leader-head h1 { font-family: var(--serif); font-weight: 700; font-size: 1.9rem; margin: 6px 0 0; letter-spacing: .06em; }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.panel-h h2 { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: .05em; }
.roster-form { display: flex; gap: 8px; margin-bottom: 14px; }
.roster-form input { flex: 1; min-width: 0; font: inherit; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 13, 40, .4); color: var(--text); }
.roster-form input:focus { outline: none; border-color: var(--gold); }
.roster { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 13px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(10, 13, 40, .35); font-size: .92rem; }
.rchip.joined { border-color: var(--gold); color: var(--gold-2); }
.rchip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 6px; }
.rchip button:hover { color: var(--text); }
.rchip.add { cursor: pointer; padding: 6px 13px; color: var(--muted); font: inherit; font-size: .88rem; }
.rchip.add:hover { border-color: var(--gold); color: var(--text); }
.sub-h { margin: 18px 0 8px; font-size: .78rem; letter-spacing: .14em; color: var(--muted); }
.lteams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.lteam { border-radius: 10px; padding: 10px 14px; border: 1px solid var(--line-soft); }
.lteam h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 1rem; display: flex; justify-content: space-between; }
.lteam h4 span { font-family: var(--latin); color: var(--muted); }
.lteam p { margin: 0; font-size: .88rem; color: #d6d3e4; line-height: 1.6; }
.lteam b { color: var(--gold-2); }
.lteam b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.lteam.red { background: rgba(201, 85, 76, .14); border-color: rgba(201, 85, 76, .45); }
.lteam.red h4 { color: var(--red-l); }
.lteam.blue { background: rgba(62, 98, 220, .16); border-color: rgba(127, 155, 240, .45); }
.lteam.blue h4 { color: var(--blue-l); }
.lrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 14px; border-radius: 10px; background: rgba(10, 13, 40, .35); border-left: 3px solid var(--line); }
.lrow.red { border-left-color: var(--red); }
.lrow.blue { border-left-color: var(--peri); }
.lname { font-family: var(--serif); font-weight: 700; }
.lctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg.tiny button { padding: .32em .85em; font-size: .84rem; }
.seg button.on.red { background: var(--red); color: #fff; }
.seg button.on.blue { background: var(--blue); color: #fff; }
.spy-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-soft); background: transparent; color: var(--muted); border-radius: 999px; padding: .32em .8em; font-size: .82rem; cursor: pointer; }
.spy-toggle svg { width: 11px; height: 11px; fill: currentColor; }
.spy-toggle.on { border-color: var(--gold); color: var(--ink); background: var(--gold); }
.spy-toggle:disabled { opacity: .35; cursor: not-allowed; }
.lrow .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.2rem; padding: 0 4px; }
.lrow .x:hover { color: var(--text); }
.lactions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.lactions .switch { margin-left: auto; font-size: .92rem; }
@media (max-width: 560px) {
  .lteams { grid-template-columns: 1fr; }
  .lactions .switch { margin-left: 0; }
  .name-grid { grid-template-columns: repeat(2, 1fr); }
}

.name-pick, .pick-name-title { font-family: "Pretendard Variable", Pretendard, var(--sans); font-weight: 600; letter-spacing: -.01em; }
.pick-name-title { font-size: 1.7rem; margin-top: 2px; }
.pin-form { position: relative; display: grid; justify-items: center; gap: 22px; margin-top: 4px; }
.pin-input { position: absolute; inset: 0 0 auto; height: 56px; width: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.pin-dots { display: flex; gap: 16px; height: 56px; align-items: center; pointer-events: none; }
.pin-dots i { width: 44px; height: 54px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 13, 40, .4); position: relative; transition: border-color .15s, background .15s; }
.pin-dots i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: var(--gold); transform: scale(0) rotate(-45deg); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.pin-dots i.on { border-color: var(--gold); background: rgba(230, 194, 119, .08); }
.pin-dots i.on::after { transform: scale(1) rotate(0); }
.pin-input:focus + .pin-dots i:not(.on):first-child, .pin-input:focus + .pin-dots i.on + i:not(.on) { border-color: var(--peri); box-shadow: 0 0 0 3px rgba(127, 155, 240, .18); }
.pin-form .btn { width: 100%; }
.linkish { background: none; border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; font: inherit; font-size: .84rem; }
.rchip .pin-reset { font-family: var(--latin); font-size: .62rem; letter-spacing: .1em; border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 6px; margin-left: 4px; }
.rchip .pin-reset:hover { border-color: var(--gold); color: var(--gold); }
.gate-empty, .gate-h { word-break: keep-all; }