/* Lobby and waiting room, per the Codex mockups (art/codex). Sizes in cqw/cqh of .stage. */

.sp {
  position: absolute; z-index: 2; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #f8f1e4, #f3ead9);
  border: .1cqw solid rgb(185 154 96 / 55%); border-radius: 1.3cqw;
  box-shadow: 0 1.2cqw 3.5cqw rgb(20 28 22 / 38%);
  color: #2c3a33;
}
.lobby2 { left: 4.3cqw; right: 4.3cqw; top: 4.5cqh; bottom: 9.5cqh; }
.waitroom2 { left: 11cqw; right: 11cqw; top: 5cqh; bottom: 8cqh; }

/* dark header bar with gold frame and fret corners */
.sp-head {
  position: relative; flex: none; display: flex; align-items: center; gap: 1.3cqw;
  height: 10cqh; padding: 0 2.6cqw;
  background: linear-gradient(180deg, #24574e, #1a443d);
  border-bottom: .14cqw solid #b99a60;
  color: #f6efe2;
}
.sp-head::before { content: ""; position: absolute; inset: .45cqw; border: .08cqw solid rgb(201 168 90 / 55%); border-radius: .9cqw; pointer-events: none; }
.cn { position: absolute; width: 1.4cqw; height: 1.4cqw; background: url('/img/ui/corner.svg') no-repeat center / contain; pointer-events: none; }
.cn.tl { left: .7cqw; top: .7cqw; }
.cn.tr { right: .7cqw; top: .7cqw; transform: scaleX(-1); }
.cn.bl { left: .7cqw; bottom: .7cqw; transform: scaleY(-1); }
.cn.br { right: .7cqw; bottom: .7cqw; transform: scale(-1, -1); }
.sp-head h1 { margin: 0; font: 600 2.5cqw/1 'Noto Serif', Georgia, serif; letter-spacing: .01em; white-space: nowrap; color: #f3e9d4; }
.vr { flex: none; width: .1cqw; align-self: stretch; margin: 2.4cqh 0; background: linear-gradient(180deg, transparent, #c9a85a, transparent); }
.logo-tiles { display: flex; gap: .55cqw; }
.sp-head .logo-tile { height: 6.4cqh; filter: drop-shadow(0 .15cqw .2cqw rgb(0 0 0 / 30%)); }
.sp-head .head-sprig { height: 8.2cqh; width: auto; margin: 0 0 .4cqh -.6cqw; align-self: flex-end; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: .9cqw; }
.login { font-weight: 700; font-size: 1.05cqw; }
.rating-pill, .count-pill {
  padding: .25em .85em; border: .1cqw solid #c9a85a; border-radius: 99em;
  background: rgb(10 30 26 / 35%); color: #ecd9a6; font-weight: 700; font-size: 1cqw;
}
.count-pill { margin-left: auto; font-size: 1.2cqw; padding: .2em 1em; letter-spacing: .08em; }
.caps { font-size: .9cqw; letter-spacing: .32em; text-transform: uppercase; color: #e8dcc2; white-space: nowrap; }

.ui-ico { display: block; flex: none; width: auto; height: 1.4cqw; object-fit: contain; }
.ico-tile { height: 4.4cqh; }
.sp-head .ico-tile { height: 6.6cqh; filter: drop-shadow(0 .15cqw .2cqw rgb(0 0 0 / 30%)); }

.ava {
  flex: none; display: inline-grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #efe3cb); border: .14cqw solid #c9a85a;
  color: #1f4e47; font: 700 1.25cqw/1 'Noto Serif', Georgia, serif;
}

.btn.cream { background: #fbf5ea; border-color: #d8c8a6; color: #2c3a33; font-weight: 700; font-size: .95cqw; }
.btn.cream .ui-ico { height: 1.3cqw; }
.btn.gold-outline { background: transparent; border: .12cqw solid #c9a85a; color: #2c3a33; font-weight: 700; padding: .55em 2.4em; }

.btn-big {
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  padding: .55em 2.2em; border: .14cqw solid #c9a85a; border-radius: 99em;
  background: linear-gradient(180deg, #2a6157, #1c4740); color: #fbf5ea;
  font: 700 1.15cqw/1.2 Nunito, sans-serif; cursor: pointer;
  box-shadow: 0 .3cqw .8cqw rgb(16 40 34 / 30%), inset 0 .1cqw 0 rgb(255 255 255 / 12%);
  transition: filter .15s ease, transform .12s ease;
}
.btn-big:hover { filter: brightness(1.08); }
.btn-big:active { transform: translateY(.08cqw); }
.btn-big .ui-ico { height: 1.3cqw; }

.sp-body { position: relative; flex: 1; min-height: 0; padding: 1.6cqw 2cqw; }

/* cards */
.sc {
  position: relative; overflow: hidden; padding: 1.4cqw 1.8cqw;
  background: #fbf7ee; border: .1cqw solid #e5d9c2; border-radius: 1.1cqw;
  box-shadow: 0 .15cqw .5cqw rgb(60 50 30 / 6%);
}
.sc-title { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1.3cqw; }
.sc-title h2 { margin: 0; font: 700 1.6cqw/1.1 'Noto Serif', Georgia, serif; color: #1f3d36; white-space: nowrap; }
.sc-title .rule { flex: 1; height: .1cqw; margin-right: 6cqw; background: linear-gradient(90deg, #c9a85a, rgb(201 168 90 / 15%)); }
.sc-title .ico-tile { height: 5.6cqh; filter: drop-shadow(0 .12cqw .15cqw rgb(0 0 0 / 22%)); }
.ico-trophy { height: 4.4cqh; }
.deco-corner { position: absolute; right: .8cqw; top: .4cqw; width: 8cqw; height: auto; pointer-events: none; }

/* lobby layout */
.lobby-grid { display: grid; grid-template-columns: 1.28fr 1fr; grid-template-rows: auto 1fr; gap: 1.2cqw; }
.new-table { grid-column: 1; }
.open-tables { grid-column: 1; min-height: 0; overflow: auto; }
.rating { grid-column: 2; grid-row: 1 / 3; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.field { color: #2c3a33; font-weight: 700; font-size: .95cqw; gap: .5em; }
.field select {
  appearance: none; -webkit-appearance: none; padding: .6em 2.4em .6em .9em; border: .1cqw solid #d9ccb4; border-radius: .5cqw;
  background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232c3a33' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9em center / .9em;
  font: 600 1cqw Nunito, sans-serif; color: #2c3a33;
}
.new-table .btn-big { display: flex; width: 60%; margin: 1.6cqw auto .8cqw; }
.note { margin: 0; text-align: center; color: #6c6a5e; font-size: .92cqw; line-height: 1.45; }

.empty { display: grid; justify-items: center; gap: .3cqw; padding-top: .4cqw; text-align: center; }
.empty b { font-size: 1.15cqw; color: #2c3a33; }
.empty span { color: #6c6a5e; font-size: .98cqw; }
.empty-art { display: flex; align-items: center; justify-content: center; margin-bottom: .6cqw; }
.empty .empty-art .dragons { height: 13cqh; }
.empty-art .sprig { height: 2.6cqh; margin: 0 -.6cqw; }
.flip { transform: scaleX(-1); }

.room-line { display: flex; align-items: center; gap: 1cqw; padding: .7cqw 0; border-bottom: .08cqw solid #ebe0cc; }
.room-line:last-child { border-bottom: 0; }
.rl-main { flex: 1; display: grid; gap: .1em; font-size: .95cqw; }
.rl-main b { font: 700 1.15cqw 'Noto Serif', Georgia, serif; }

/* rating */
.lb2 { position: relative; z-index: 1; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1cqw; }
.lb2 th { padding: .5em .5em .9em; text-align: left; font-weight: 700; color: #2c3a33; }
.lb2 td { padding: .55em .5em; border-bottom: .08cqw solid #e6dac4; }
.lb2 th:nth-child(n+3), .lb2 td:nth-child(n+3) { text-align: right; }
.lb2 .rank { width: 3cqw; text-align: center; font-weight: 700; }
.lb2 .who { display: flex; align-items: center; gap: .7cqw; }
.lb2 .rt { font-weight: 700; }
.lb2 tr.me td { background: #dfece2; border-bottom-color: transparent; }
.lb2 tr.me td:first-child { border-radius: .6cqw 0 0 .6cqw; }
.lb2 tr.me td:last-child { border-radius: 0 .6cqw .6cqw 0; }
.ico-medal { height: 2.5cqw; margin: auto; }
.deco-bamboo { position: absolute; right: .6cqw; bottom: .2cqw; height: 32cqh; width: auto; opacity: .9; pointer-events: none; }
.deco-sakura-low { position: absolute; right: 6cqw; bottom: 1.2cqw; height: 5cqh; width: auto; transform: rotate(-12deg); pointer-events: none; }

/* waiting room */
.deco-sakura-top { position: absolute; right: 2cqw; top: .6cqw; height: 6cqh; width: auto; transform: rotate(-14deg); pointer-events: none; }
.chips { display: flex; gap: 1.2cqw; margin-bottom: 1.4cqw; }
.chip {
  display: inline-flex; align-items: center; gap: .7em; padding: .45em 1.4em;
  background: #fbf5ea; border: .1cqw solid #d8c39a; border-radius: .7cqw;
  font-weight: 700; font-size: 1cqw;
}
.chip .ui-ico { height: 1.4cqw; }
.seat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw 1.6cqw; }
.seat-card {
  display: flex; align-items: center; gap: 1.4cqw; min-height: 10.5cqh; padding: .8cqw 1.8cqw;
  background: #fbf7ee; border: .1cqw solid #e2d5bd; border-radius: 1cqw;
}
.seat-card.mine { background: #dfece2; border-color: #b9d3c1; }
.seat-card .vr { margin: 1.2cqh 0; background: linear-gradient(180deg, transparent, #b99a60, transparent); }
.ico-wind { height: 7.8cqh; filter: drop-shadow(0 .15cqw .2cqw rgb(0 0 0 / 22%)); }
.seat-main { flex: 1; display: grid; gap: .2em; }
.seat-name { font: 700 1.45cqw/1.15 'Noto Serif', Georgia, serif; color: #1f3d36; }
.seat-main .muted { font-size: 1cqw; color: #7a786c; }
.seat-rt { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: 1.1cqw; }
.ico-mini { height: 1.7cqw; }
.you { padding: .3em 1.1em; border-radius: 99em; background: #1f4e47; border: .1cqw solid #c9a85a; color: #fbf5ea; font-weight: 700; font-size: .95cqw; }
.gold-hr { border: 0; height: .1cqw; margin: 1.5cqw 0; background: linear-gradient(90deg, rgb(201 168 90 / 10%), #c9a85a 20%, #c9a85a 80%, rgb(201 168 90 / 10%)); }
.invite { position: relative; }
.invite .sc-title { margin-bottom: .4cqw; }
.invite .sc-title .rule { margin-right: 12cqw; }
.invite > .muted { margin: 0 0 .9cqw; font-size: .98cqw; }
.invite .deco-bamboo { right: -1cqw; bottom: -2cqw; height: 22cqh; }
.link-row { display: flex; gap: 1.2cqw; align-items: center; margin-right: 6cqw; }
.link-box {
  flex: 1; display: flex; align-items: center; gap: .9em; min-width: 0; padding: .6em 1.2em;
  background: #fffdf8; border: .1cqw solid #d9ccb4; border-radius: .6cqw; font-size: 1.05cqw;
}
.link-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.link-box .ui-ico { height: 1.6cqw; }
.link-row .btn.cream { font-size: 1cqw; padding: .6em 1.8em; }
.wait-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6cqw; }
.wait-foot > .muted { text-align: center; font-size: 1cqw; }
.wait-foot .btn-big { font-size: 1.3cqw; padding: .5em 2.4em; }
.waitroom2 .sp-body { display: flex; flex-direction: column; }
.waitroom2 .wait-foot { margin-top: auto; }
.waitroom2 .gold-hr:last-of-type { margin-top: auto; }
.open-tables { display: flex; flex-direction: column; overflow: hidden; }
.open-tables .rooms { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: center; }
.open-tables .sc-title { margin-bottom: .4cqw; }
.waitroom2 .seat-card { min-height: 13.5cqh; }
.waitroom2 .link-row { margin-right: 9cqw; }
.waitroom2 .btn.gold-outline { font-size: 1.1cqw; padding: .5em 2.6em; }
.new-table .sc-title .ico-tile { transform: rotate(-9deg); }
.new-table .note { white-space: nowrap; }
.invite .sc-title .rule { display: none; }
/* link field takes the button's height */
.waitroom2 .link-row { align-items: stretch; }
.waitroom2 .link-box { padding-block: 0; }
/* sakura sprig under the header (mockup: diagonal branch + two drifting petals) */
.sp-body .deco-sakura-top { right: 2.2cqw; top: .2cqw; height: 9cqh; transform: none; }
.petal { position: absolute; width: .55cqw; height: .3cqw; border-radius: 50%; background: #f0a9b6; opacity: .85; pointer-events: none; }
.petal.p1 { right: 14.6cqw; top: 7.6cqh; transform: rotate(-25deg); }
.petal.p2 { right: 12.9cqw; top: 6.3cqh; width: .45cqw; transform: rotate(20deg); }
/* rating card corner (mockup): pale bamboo behind, large mirrored sakura branch in front, falling petals */
.rating .deco-bamboo { opacity: .6; }
.rating .deco-sakura-low { right: 5cqw; bottom: 1cqh; height: 12.5cqh; transform: scaleX(-1); }
.rating .petal.p1 { right: 21.5cqw; top: auto; bottom: 2.6cqh; }
.rating .petal.p2 { right: 19.8cqw; top: auto; bottom: 1.6cqh; }

/* ---------- auth (login / register), per Codex mockups ---------- */
.auth2 { left: 50%; top: 50%; width: 34cqw; max-height: 97cqh; transform: translate(-50%, -50%); }
.auth2 .sp-head { justify-content: center; height: 8.5cqh; }
/* narrow card: smaller logo so the header row fits */
.auth2 .sp-head .logo-tile { height: 5.2cqh; }
.auth2 .sp-head h1 { font-size: 2.2cqw; }
.auth2 .sp-head .head-sprig { height: 6.8cqh; }
.auth2 .sp-body { padding: 1.6cqh 2.6cqw 2.6cqh; overflow: hidden; }
.auth2 .deco-bamboo { right: -.4cqw; bottom: 0; height: 26cqh; opacity: .75; }
.auth-intro { text-align: center; margin-bottom: 2cqh; }
.auth-intro h2 { margin: 0; font: 700 1.55cqw/1.2 'Noto Serif', Georgia, serif; letter-spacing: .01em; color: #1f3d36; }
.auth-intro p { margin: .3em 0 0; font-size: 1.02cqw; color: #4f5a52; letter-spacing: .02em; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr; width: 24cqw; margin: 0 auto 2.2cqh; padding: .25cqw;
  border: .1cqw solid #c9a85a; border-radius: 99em; background: #fbf5ea;
}
.seg button {
  height: 4.6cqh; border: .1cqw solid transparent; border-radius: 99em; background: none;
  font: 700 1.05cqw Nunito, sans-serif; color: #2c3a33; cursor: pointer;
}
.seg button.on { background: linear-gradient(180deg, #24574e, #1a443d); border-color: #c9a85a; color: #f6efe2; }
#authForm { position: relative; z-index: 1; display: grid; gap: 1.6cqh; }
.af { display: grid; gap: .7cqh; }
.af-label { font: 700 .95cqw Nunito, sans-serif; color: #1f3d36; }
.af-box {
  display: flex; align-items: center; gap: 1.1cqw; height: 5.6cqh; padding: 0 1.2cqw;
  background: #fffdf8; border: .1cqw solid #cdb88f; border-radius: .6cqw;
}
.af-box:focus-within { border-color: #1f4e47; box-shadow: 0 0 0 .15cqw rgb(31 78 71 / 18%); }
.af-box .ui-ico { height: 1.2cqw; }
.af-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 1.02cqw Nunito, sans-serif; color: #2c3a33; }
.af-box input::placeholder { color: #8a8576; }
.eye { display: grid; place-items: center; padding: .3cqw; border: 0; background: none; cursor: pointer; border-radius: .3cqw; }
.eye .ui-ico { height: .85cqw; }
.eye:focus-visible, .seg button:focus-visible, .check input:focus-visible + .box { outline: .15cqw solid #1f4e47; outline-offset: .15cqw; }
.checks { display: grid; gap: 1cqh; margin: .4cqh 0 0 1.4cqw; }
.check { position: relative; display: flex; align-items: flex-start; gap: .8cqw; font-size: .95cqw; color: #2c3a33; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { flex: none; width: 1.4cqw; height: 1.4cqw; background: url('/img/ui/check-off.webp') center / contain no-repeat; }
.check input:checked + .box { background-image: url('/img/ui/check-on.webp'); }
.check a, .legal-links a { color: #1f4e47; text-decoration: underline; text-underline-offset: .2em; }
.hint { margin: 0; text-align: center; font-size: .88cqw; color: #4f5a52; }
.hint[hidden] { display: none; }
.auth2 .err { min-height: 0; text-align: center; color: #a0443c; font-weight: 700; font-size: .92cqw; }
.auth2 .err:empty { display: none; }
.auth-submit { width: 100%; height: 6cqh; justify-content: center; position: relative; font: 800 1.2cqw Nunito, sans-serif; }
.auth-submit .ui-ico { position: absolute; right: 2cqw; height: 1.2cqw; }
.auth-submit:disabled { background: #7f9e8c; border-color: #a9bfae; box-shadow: none; cursor: default; filter: none; color: #f3efe4; }
.legal-links { display: grid; justify-items: center; gap: 1.6cqh; margin-top: 1.2cqh; font-size: .95cqw; }
/* registration has more fields: tighter rhythm so the card fits the screen */
.auth2.reg .sp-body { padding-top: 1cqh; }
.auth2.reg .auth-intro { margin-bottom: 1.2cqh; }
.auth2.reg .seg { margin-bottom: 1.2cqh; }
.auth2.reg #authForm { gap: 1.05cqh; }
.auth2.reg .af-box { height: 5cqh; }
.auth2.reg .auth-submit { height: 5.6cqh; }
.auth2.reg .seg button { height: 4.4cqh; }
.auth2.reg .af { gap: .4cqh; }
.auth2.reg .af-box { height: 4.7cqh; }
/* safety net for short windows: scroll inside the card instead of clipping */
.auth2 .sp-body { overflow-y: auto; }

/* ---------- lobby v2: new table in one row, open tables as cards (per template) ---------- */
.lobby-grid { grid-template-columns: 1.55fr 1fr; }
.new-table .sc-title { margin-bottom: 1cqw; }
.nt-row { display: grid; grid-template-columns: 1fr .85fr auto; gap: 1.8cqw; align-items: end; }
.nt-row .btn-big { width: auto; margin: 0; padding: .55em 1.8em; }
.new-table .note { margin-top: 1cqw; }

.open-tables .sc-title { gap: 1.2cqw; margin-bottom: .9cqw; }
.count-chip { padding: .2em .9em; border: .1cqw solid #d8c39a; border-radius: 99em; background: #fbf5ea; font-weight: 700; font-size: .95cqw; white-space: nowrap; }
.open-tables .sc-title .rule { margin-right: 0; }
.icon-btn { display: grid; place-items: center; padding: .3cqw; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.icon-btn .ui-ico { height: 1.8cqw; }
.icon-btn:hover { background: rgb(31 78 71 / 8%); }
.icon-btn:focus-visible, .room-card .sit:focus-visible { outline: .15cqw solid #1f4e47; outline-offset: .15cqw; }
.open-tables .rooms { display: grid; align-content: start; gap: .8cqw; }
.open-tables .rooms:has(.empty) { align-content: center; }

.room-card {
  display: flex; align-items: center; gap: 1.4cqw; min-height: 12.6cqh; padding: .6cqw 1.4cqw;
  background: #fbf7ee; border: .1cqw solid #e2d5bd; border-radius: 1cqw; transition: background .15s, border-color .15s;
}
.room-card:hover, .room-card:focus-within { background: #e3eee5; border-color: #c9a85a; }
.room-card > .ico-tile { height: 6.6cqh; filter: drop-shadow(0 .12cqw .15cqw rgb(0 0 0 / 22%)); }
.room-card .vr { margin: 1.6cqh 0; background: linear-gradient(180deg, transparent, #c9b48a, transparent); }
.rc-info { flex: 1; min-width: 0; display: grid; gap: .25em; font-size: .95cqw; }
.rc-info b { font: 700 1.75cqw/1.1 'Noto Serif', Georgia, serif; color: #1f3d36; white-space: nowrap; }
.rc-chips { display: flex; gap: .5cqw; flex-wrap: wrap; margin-top: .2em; }
.mini-chip { padding: .1em .6em; border: .08cqw solid #d8c39a; border-radius: .5cqw; background: #fffdf8; font-size: .95cqw; white-space: nowrap; }
.rc-seats { display: grid; justify-items: center; gap: .5cqw; font-size: 1.1cqw; white-space: nowrap; }
.avas { display: flex; gap: .5cqw; }
.seat-ava {
  display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  background: linear-gradient(180deg, #24574e, #1a443d); border: .12cqw solid #c9a85a;
  color: #f6efe2; font: 700 1.3cqw/1 'Noto Serif', Georgia, serif;
}
.seat-ava.free { background: #fbf5ea; border-color: #d8c39a; }
.seat-ava.free .ui-ico { height: 1.3cqw; }
.rc-act { display: grid; justify-items: center; gap: .6cqw; min-width: 11cqw; }
.status { display: inline-flex; align-items: center; gap: .5em; font-size: 1.1cqw; }
.status::before { content: ""; width: .6cqw; height: .6cqw; border-radius: 50%; background: #5ab55e; }
.status.play::before { background: #d6a33c; }
.room-card .sit { font-size: 1.4cqw; padding: .45em 1.7em; }
.room-card .sit .ui-ico { height: 1.2cqw; }
.rooms-note { margin-top: .2cqw; }
/* fit: template proportions (left column ~56%), single-line chips, no horizontal scroll */
.lobby-grid { grid-template-columns: 1.75fr 1fr; }
.open-tables .rooms { overflow-x: hidden; }
.room-card { gap: 1cqw; padding: .5cqw 1.1cqw; }
.room-card > .ico-tile { height: 6cqh; }
.rc-info b { font-size: 1.3cqw; }
.rc-chips { flex-wrap: nowrap; }
.mini-chip { font-size: .82cqw; }
.seat-ava { width: 2.3cqw; height: 2.3cqw; font-size: 1.15cqw; }
.rc-seats { font-size: .92cqw; }
.rc-act { min-width: 9.5cqw; }
.status { font-size: .92cqw; }
.room-card .sit { font-size: 1.05cqw; padding: .4em 1.3em; }
.lobby2 { top: 1.6cqh; bottom: 2.2cqh; }
.room-card { min-height: 11.6cqh; }