/* 新しい UI（2026-11-02〜。docs/design/20-ui-style.md）。色の組み合わせ「新しい見た目」（look.js の THEMES.pop）をえらぶと html に data-ui="pop" がつき、ここが効く。
   ふだんの見た目は変えない。モードがあとから足す CSS より強くするため、どれも :root[data-ui="pop"] から書く。
   決まり：かわいさがいちばん大事（大人っぽくしない）・ひらがなのラベルや「おちた〜」はそのまま・顔のアイコンはいまの物・
   紺の線と固いかげ（A）・押せる物だけツヤ（ぷっくり）・見出しは Mochiy Pop One・数字は Titan One・角丸の四角やカプセルはかたむけない */
:root[data-ui="pop"] {
  --disp: "Mochiy Pop One", "M PLUS Rounded 1c", sans-serif;
  --num: "Titan One", "M PLUS Rounded 1c", sans-serif;
  --night2: #2e3672;
  --sun-t: #ffeb9a; --sun-b: #ffae00; --sun-d: #c26f00;
  --sea: #1bb6e0; --sea-t: #86e4fb; --sea-b: #0c94cb; --sea-d: #0a5f9a;
  --coral: #ff5a7e; --coral-t: #ffa0b5; --coral-b: #ec3b66; --coral-d: #b0204a;
  --leaf: #72d14a; --leaf-t: #c0f28e; --leaf-b: #46ad25; --leaf-d: #2b7419;
  --gloss: radial-gradient(70% 45% at 50% 8%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
}

/* ---------- ボタン：ぷっくり（上に光・下に1段こいふち・紺の線と固いかげ） */
:root[data-ui="pop"] .lb button:where(:not(.lb-sw, .lb-pc, .lb-team, .lb-mc, .lb-dtabs button)), :root[data-ui="pop"] .resbtns button, :root[data-ui="pop"] .escmenu button {
  font-family: var(--disp); font-weight: 400;
  background: var(--gloss), linear-gradient(#ffffff, #eef3fb);
  box-shadow: inset 0 -.14em 0 #cfd8e8, 0 .16em 0 var(--ink);
}
:root[data-ui="pop"] .lb .lb-change, :root[data-ui="pop"] .lb .lb-go, :root[data-ui="pop"] .lb button.main, :root[data-ui="pop"] .lb .lb-pcbtn, :root[data-ui="pop"] .lb .lb-note button,
:root[data-ui="pop"] .lb .lb-seg button.on, :root[data-ui="pop"] .lb .lb-maps button.on, :root[data-ui="pop"] .lb .lb-vols button.on, :root[data-ui="pop"] .lb .lb-keys button.wait,
:root[data-ui="pop"] .resbtns button.main, :root[data-ui="pop"] .escmenu button.main, :root[data-ui="pop"] .escmenu .ms-vol button.on {
  background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--sun-t) 0%, var(--gold) 48%, var(--sun-b) 100%);
  box-shadow: inset 0 -.18em 0 var(--sun-d), 0 .18em 0 var(--ink);
}
:root[data-ui="pop"] .lb .lb-go { color: #fff; text-shadow: none; box-shadow: inset 0 -.12em 0 var(--sun-d), 0 .1em 0 var(--ink); }
/* 部屋のカードの「ぬける・とじる」：カードの中のいちばん弱いボタン（ふちとかげを細く・字を小さく） */
:root[data-ui="pop"] .lb .lb-rout { font-size: .78em; padding: .12em .85em .2em; box-shadow: inset 0 -.1em 0 #cfd8e8, 0 .1em 0 var(--ink); }
/* もう一度おすと とじます：赤い（前は新しい UI のふつうのボタンの白に上書きされていた） */
:root[data-ui="pop"] .lb .lb-danger { color: #fff; background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--coral-t) 0%, var(--coral) 48%, var(--coral-b) 100%); box-shadow: inset 0 -.14em 0 var(--coral-d), 0 .16em 0 var(--ink); }
:root[data-ui="pop"] .lb .lb-danger small { color: #fff; }
:root[data-ui="pop"] .lb .lb-go small { color: var(--ink); opacity: .8; }

/* ---------- 白い字の太いふちどり：字のうしろに、なめらかな線でふちどった同じ字を1枚しく（.ol と data-t）。
   前は字を8方向にずらして重ねていて、大きな字ではふちがギザギザに見えた（ユーザー：ロゴ・スタート・1着のふちがギザギザで気持ち悪い） */
:root[data-ui="pop"] .ol { position: relative; display: inline-block; isolation: isolate; text-shadow: none; }
:root[data-ui="pop"] .ol::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--ink); -webkit-text-stroke: var(--olw, .17em) var(--ink); text-shadow: 0 var(--olx, .09em) 0 var(--ink); pointer-events: none; white-space: nowrap; }
:root[data-ui="pop"] .lb-top h1 { text-shadow: none; }
:root[data-ui="pop"] .lb-top h1 .ol { --olw: .2em; --olx: .1em; }
:root[data-ui="pop"] .lb-top h1 small { text-shadow: none; color: var(--ink); }
:root[data-ui="pop"] .lb .lb-go.on { background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--leaf-t) 0%, var(--leaf) 48%, var(--leaf-b) 100%); box-shadow: inset 0 -.12em 0 var(--leaf-d), 0 .1em 0 var(--ink); }
/* きせかえの絵のボタン：えらんでいる物はいままでどおり黄色い地（白いぷっくりにしない） */
:root[data-ui="pop"] .lb .lb-ch.on, :root[data-ui="pop"] .lb .lb-brow.on, :root[data-ui="pop"] .lb .lb-hat.on, :root[data-ui="pop"] .lb .lb-dslots button.on { background: var(--hl); }
/* せっていの音の行：Mochiy は字がひろいので「♪ ためす」が2行に折れていた */
:root[data-ui="pop"] .lb .lb-vols button { white-space: nowrap; }
:root[data-ui="pop"] .lb button:where(:not(.lb-sw, .lb-pc, .lb-team, .lb-mc, .lb-dtabs button)):active:not([disabled]) { transform: translateY(.1em); box-shadow: inset 0 -.06em 0 #cfd8e8, 0 .05em 0 var(--ink); }

/* ---------- 字：見出しは Mochiy Pop One・数字は Titan One */
:root[data-ui="pop"] .lb-top h1 { font-family: var(--disp); font-weight: 400; letter-spacing: .02em; }
:root[data-ui="pop"] .lb-mname b, :root[data-ui="pop"] .lb-plate .lb-pname, :root[data-ui="pop"] .lb-card h2, :root[data-ui="pop"] .lb-sheet h2,
:root[data-ui="pop"] .you .nm, :root[data-ui="pop"] .awards h3, :root[data-ui="pop"] .awards .aw b, :root[data-ui="pop"] .board h3, :root[data-ui="pop"] .subbanner { font-family: var(--disp); font-weight: 400; }
:root[data-ui="pop"] .lb-card { border-radius: 1.3em; }

/* ---------- レース中：上の時計は紺の札に白い数字・道のりの顔はいまのまま */
:root[data-ui="pop"] .hud-top .teambar { background: none; border: 0; box-shadow: none; padding: 0; }
:root[data-ui="pop"] .tb-mid .tb-timer { display: inline-block; font-family: var(--num); font-weight: 400; font-size: 1.6em; letter-spacing: .03em; color: #fff; padding: .02em .6em .08em; border-radius: .55em;
  background: linear-gradient(var(--night2), var(--ink)); border: .08em solid #fff; box-shadow: 0 0 0 .06em var(--ink), 0 .12em 0 .06em rgba(14, 16, 48, .55); }
:root[data-ui="pop"] .tb-mid .tb-timer.hurry { color: #ffd84d; }
:root[data-ui="pop"] .tb-mid .bo-prog { height: .9em; margin-top: .45em; background: #fff; border-width: .13em; box-shadow: 0 .12em 0 var(--ink); }

/* ---------- レース中：左下は紺の札に大きな数字と、絵＋数字の小さな札（racePop.js の popStatus） */
:root[data-ui="pop"] .status:has(> .bo-pop) { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
:root[data-ui="pop"] .bo-pop { gap: .35em; min-width: 0; align-items: flex-start; }
:root[data-ui="pop"] .bo-pop .bo-head { display: flex; align-items: center; gap: .5em; padding: .25em .8em .3em .6em; border-radius: .9em; color: #fff;
  background: linear-gradient(var(--night2), var(--ink)); border: .1em solid #fff; box-shadow: 0 0 0 .08em var(--ink), 0 .16em 0 .08em rgba(14, 16, 48, .55); }
:root[data-ui="pop"] .bo-pop .bo-place { display: flex; align-items: baseline; gap: .05em; font-size: 1em; font-weight: 400; }
:root[data-ui="pop"] .bo-pop .bo-place b { font-family: var(--num); font-weight: 400; font-size: 2.6em; line-height: 1; color: #ffd84d; }
:root[data-ui="pop"] .bo-pop .bo-place small { font-family: var(--disp); font-size: .95em; margin: 0; }
:root[data-ui="pop"] .bo-pop .bo-place em { font-style: normal; font-family: var(--num); font-size: .95em; opacity: .7; }
:root[data-ui="pop"] .bo-pop .bo-time { font-family: var(--num); font-weight: 400; font-size: 1.5em; color: #fff; }
:root[data-ui="pop"] .bo-pop .bo-chips { display: flex; gap: .3em; }
:root[data-ui="pop"] .bo-pop .bo-chips span { display: inline-flex; align-items: center; gap: .25em; padding: .12em .6em .14em .4em; border-radius: 999px; font-family: var(--num); font-size: .95em; color: #fff;
  background: linear-gradient(var(--night2), var(--ink)); border: .08em solid #fff; box-shadow: 0 0 0 .07em var(--ink); }
:root[data-ui="pop"] .bo-pop .bo-chips .pi { width: 1.05em; height: 1.05em; }
:root[data-ui="pop"] .bo-pop .bo-chips span:nth-child(1) .pi { color: #9fe86a; }
:root[data-ui="pop"] .bo-pop .bo-chips span:nth-child(2) .pi { color: #8fe0ff; }
:root[data-ui="pop"] .bo-pop .bo-chips span:nth-child(3) .pi { color: #ff9ec0; }
:root[data-ui="pop"] .bo-pop > .row { background: var(--card); border: .12em solid var(--ink); border-radius: .7em; padding: .15em .6em; box-shadow: 0 .12em 0 var(--ink); }

/* ---------- こぐボタン：乗り物の絵＋下に「こぐ」（クリックの札は出さない） */
:root[data-ui="pop"] .action { background: var(--gloss), linear-gradient(#ffffff, #e8f4fb); box-shadow: inset 0 -.25em 0 #cfe2ee, 0 .2em 0 var(--ink); }
:root[data-ui="pop"] .action .key { display: none; }
:root[data-ui="pop"] .action .nm { font-family: var(--disp); font-weight: 400; font-size: 1.15em; bottom: -1.5em; padding: .08em .9em .14em; background: linear-gradient(var(--sea-t) -30%, var(--sea) 45%, var(--sea-b)); color: #fff;
  text-shadow: 0 .08em 0 var(--sea-d); border: .1em solid var(--ink); box-shadow: 0 .12em 0 var(--ink); }

/* ---------- 結果の見出し（hud.js の popBanner）：まっすぐのぷっくりした札・リボンは札のうしろ・字がはずんで出る */
:root[data-ui="pop"] .result .banner.pop { transform: translateX(-50%); background: none; border: 0; box-shadow: none; padding: 0; top: 3.5%; font-size: 2.6em; animation: none; }
:root[data-ui="pop"] .banner.pop .bn-plate { position: relative; z-index: 1; display: inline-flex; align-items: center; padding: .12em .95em .22em; border-radius: .55em; border: .07em solid var(--ink);
  font-family: var(--disp); font-weight: 400; color: #fff; text-shadow: none;
  background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--sun-t) 0%, var(--gold) 48%, var(--sun-b) 100%);
  box-shadow: inset 0 -.12em 0 var(--sun-d), 0 .09em 0 var(--ink); animation: bnPop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
:root[data-ui="pop"] .banner.pop.z .bn-plate { background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--sea-t) 0%, var(--sea) 48%, var(--sea-b) 100%); box-shadow: inset 0 -.12em 0 var(--sea-d), 0 .09em 0 var(--ink); }
:root[data-ui="pop"] .banner.pop .bn-plate i { display: inline-block; font-style: normal; animation: bnLetter .5s cubic-bezier(.3, 1.9, .5, 1) both; animation-delay: calc(.2s + var(--i, 0) * .06s); }
:root[data-ui="pop"] .banner.pop .bn-plate i.sp { width: .3em; }
:root[data-ui="pop"] .banner.pop .bn-tail { position: absolute; z-index: 0; top: .32em; width: .9em; height: 1.15em; fill: var(--sun-b); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; animation: bnPop .55s .05s cubic-bezier(.3, 1.6, .5, 1) both; }
:root[data-ui="pop"] .banner.pop .bn-tail.l { left: -.6em; }
:root[data-ui="pop"] .banner.pop .bn-tail.r { right: -.6em; }
:root[data-ui="pop"] .banner.pop.z .bn-tail { fill: var(--sea-b); }
:root[data-ui="pop"] .banner.pop .bn-spark { position: absolute; z-index: 2; width: .38em; height: .38em; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: bnTwinkle 1.4s ease-in-out infinite both; animation-delay: calc(.6s + var(--k) * .22s); filter: drop-shadow(0 0 .04em var(--ink)); }
:root[data-ui="pop"] .banner.pop .bn-spark[style*="--k:0"] { left: -.3em; top: -.25em; }
:root[data-ui="pop"] .banner.pop .bn-spark[style*="--k:1"] { right: -.2em; top: -.35em; width: .5em; height: .5em; }
:root[data-ui="pop"] .banner.pop .bn-spark[style*="--k:2"] { right: 18%; bottom: -.3em; }
:root[data-ui="pop"] .banner.pop .bn-spark[style*="--k:3"] { left: 22%; top: -.4em; width: .3em; height: .3em; }
:root[data-ui="pop"] .banner.pop .bn-spark[style*="--k:4"] { left: 8%; bottom: -.2em; width: .28em; height: .28em; }
@keyframes bnPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bnLetter { 0% { transform: translateY(-.6em) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bnTwinkle { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: 0; } 40% { transform: scale(1.15) rotate(20deg); opacity: 1; } 70% { transform: scale(.9) rotate(30deg); opacity: .9; } }

/* 結果の「おつかれさま！」：ボタンに見えないように、わくもかげもない字だけ（白い字に紺のふち）。かたむけない
   （ユーザー：ボタンと見た目が近すぎて、ボタンに見える） */
:root[data-ui="pop"] .result .allwin { transform: none; background: none; border: 0; box-shadow: none; padding: 0; font-family: var(--disp); font-weight: 400; font-size: 1.5em; color: var(--ink);
  text-shadow: 0 0 .12em #fff, 0 0 .12em #fff, 0 0 .2em #fff, 0 0 .3em #fff; letter-spacing: .03em; }
/* 結果のボタン：もういっかいは黄色、モードをえらぶは水色のぷっくり（どちらもはっきりボタンに） */
:root[data-ui="pop"] .resbtns button:not(.main) { color: #fff; text-shadow: 0 0 .06em var(--sea-d), 0 0 .06em var(--sea-d), 0 .08em 0 var(--sea-d);
  background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--sea-t) 0%, var(--sea) 48%, var(--sea-b) 100%); box-shadow: inset 0 -.18em 0 var(--sea-d), 0 .18em 0 var(--ink); }
:root[data-ui="pop"] .resbtns button { font-size: 1.15em; padding: .35em 1.3em .45em; }
/* 結果の見出しと下の札：すき間をあける（ユーザー：1着のリボンとその下の札の間にすき間がなさすぎる） */
:root[data-ui="pop"] .result .banner.pop { top: 2.5%; font-size: 2.3em; }
:root[data-ui="pop"] .result .subbanner { top: 18% !important; font-size: 1.15em; }
/* スコアとみんなに賞：左下と右下に同じ幅で、下をそろえる。スコアの字はみんなに賞と同じくらいに（ユーザー：スコアが小さすぎる・大きさも配置もばらばら・
   みんなに賞は右下に・12人だと字がはみ出る）。12人でも入るように、賞は2列のまま名前とひとことを折り返す。「おつかれさま！」はボタンの上のまん中へ（左下はスコア） */
:root[data-ui="pop"] .result .awards, :root[data-ui="pop"] .result .board.inresult { box-sizing: border-box; top: auto; bottom: 4%; width: 30%; max-width: none; padding: .7em .9em .8em; opacity: 1; }
:root[data-ui="pop"] .result .awards { right: 1.5%; font-size: 1.05em; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9em; row-gap: .35em; align-items: start; }
:root[data-ui="pop"] .result .awards .aw { font-size: .85em; min-width: 0; align-items: flex-start; }
:root[data-ui="pop"] .result .awards .aw > div { min-width: 0; }
:root[data-ui="pop"] .result .awards .aw b { white-space: normal; line-height: 1.25; }
:root[data-ui="pop"] .result .awards .aw small { display: block; font-size: .85em; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
:root[data-ui="pop"] .result .board.inresult { left: 1.5%; font-size: .8em; }
:root[data-ui="pop"] .result .board.inresult table { width: 100%; }
:root[data-ui="pop"] .result .board.inresult td { padding: .12em .45em; }
:root[data-ui="pop"] .result .board.inresult td.nm { white-space: nowrap; }
:root[data-ui="pop"] .result .board.inresult td.nm svg.face { flex: none; }
:root[data-ui="pop"] .result .allwin { left: 50%; bottom: calc(4% + 3.2em); transform: translateX(-50%); white-space: nowrap; }

/* ---------- ロビーの重ねる画面（モードとマップ・きせかえ・せってい） */
/* モードのカードは、もとの水色と波の絵のまま。題名だけ見出しの字（説明の文は読みやすい字のまま） */
:root[data-ui="pop"] .lb .lb-mc b { font-family: var(--disp); font-weight: 400; }
/* ボタンの中の小さな字（コースの長さ・Enter など）は読みやすい字 */
:root[data-ui="pop"] .lb button small { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; }

/* ---------- Tab の表（順位・そうさ）：ほかの札と同じ太い紺の線と固いかげ。「落ちた」の見出しがたてに折れていた */
:root[data-ui="pop"] .board { background: #fff; border-width: .15em; border-radius: 1.2em; box-shadow: 0 .22em 0 var(--ink); }
:root[data-ui="pop"] .board h3 { font-size: 1.15em; }
:root[data-ui="pop"] .board th small { white-space: nowrap; }
:root[data-ui="pop"] .board h3 small, :root[data-ui="pop"] .lb-sheet h2 small { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; }

/* ---------- ロビー（2026-11-02 ユーザー：C3 のロビーがほとんど前のまま・説明の文がまた出ている・ボタンと札の見分けがつかない）
   決まり：押せる物だけぷっくり（光とかげ）・名前などの札は平ら（かげなし）・いらない説明の文はけずる・必要なラベルは残す・パネルは白 */
/* いらない説明：ひとりのときの「あいた席にはボットが入ります」（看板にも重なっていた）・左の「モード」・下のキーの説明（スタートは Enter の札がボタンにある）・
   ひとりのときの部屋のカード（「ひとりであそぶ」「部屋はまだありません」「部屋をつくると…」）は「友だちをよぶ」ボタンだけに */
:root[data-ui="pop"] .lb-pnote.solo, :root[data-ui="pop"] .lb-mode > .lb-cap, :root[data-ui="pop"] .lb-foot > span:not(.lb-ver),
:root[data-ui="pop"] .lb-room.solo > .lb-cap, :root[data-ui="pop"] .lb-room.solo > .lb-rt, :root[data-ui="pop"] .lb-room.solo > small, :root[data-ui="pop"] .lb-rsub { display: none; }
:root[data-ui="pop"] .lb svg.lb-pop, :root[data-ui="pop"] .lb img.lb-pop { display: block; }   /* 新しい UI だけで出す絵（ふだんは proto.css でかくす） */
:root[data-ui="pop"] .lb-room.solo { background: none; border: 0; box-shadow: none; padding: 0; }
/* 友だちをよぶ：水色のぷっくり（結果の「モードをえらぶ」と同じ、2番めに大事なボタンの色）。1行に */
:root[data-ui="pop"] .lb .lb-room.solo button { display: flex; align-items: center; justify-content: center; gap: .1em; width: 100%; white-space: nowrap; font-size: 1.1em; padding: .5em 1em .6em;
  color: #fff; text-shadow: 0 0 .06em var(--sea-d), 0 0 .06em var(--sea-d), 0 .08em 0 var(--sea-d);
  background: var(--gloss), radial-gradient(120% 90% at 50% 0%, var(--sea-t) 0%, var(--sea) 48%, var(--sea-b) 100%); box-shadow: inset 0 -.18em 0 var(--sea-d), 0 .18em 0 var(--ink); }
:root[data-ui="pop"] .lb .lb-room.solo button .lb-ico { width: 1.25em; height: 1.25em; filter: drop-shadow(0 .06em 0 var(--sea-d)); }
/* 左のモードのカード：下の行の地はクリームをやめてうすい水色（ユーザー：クリーム色はやぼったい） */
:root[data-ui="pop"] .lb-mrows { background: #eef4fc; border: .1em solid #d5e0f0; }
:root[data-ui="pop"] .lb-mode .lb-mname b { font-size: 1.45em; }
/* きせかえ・せってい：白いぷっくりボタンに、色の丸の絵（きせかえはぶどう色・せっていは水色）。字はそのまま */
:root[data-ui="pop"] .lb .lb-menu button { padding: .4em 1em .45em .45em; font-size: 1.1em; }
:root[data-ui="pop"] .lb .lb-menu button .lb-ico { box-sizing: border-box; width: 1.9em; height: 1.9em; padding: .32em; margin-right: .5em; border-radius: 50%; color: #fff; border: .1em solid var(--ink);
  background: var(--gloss), var(--mc, var(--sea)); box-shadow: inset 0 -.12em 0 rgba(0, 0, 0, .18); }
:root[data-ui="pop"] .lb [data-lopen="dress"] .lb-ico { --mc: #a77bf0; }
:root[data-ui="pop"] .lb [data-lopen="settings"] .lb-ico { --mc: var(--sea); }
/* 席：名札は平ら（押せない物はかげなし）。空いた席は「＋」の丸だけがぷっくりしたボタン、「さそう」は字だけ */
:root[data-ui="pop"] .lb-plate { box-shadow: none; }
:root[data-ui="pop"] .lb-pc .lb-pname { font-family: var(--disp); font-weight: 400; }
:root[data-ui="pop"] .lb-plus { color: var(--ink); background: var(--gloss), linear-gradient(#ffffff, #eef3fb); border-width: .06em; box-shadow: inset 0 -.06em 0 #cfd8e8, 0 .07em 0 var(--ink); }
:root[data-ui="pop"] .lb-pc.empty .lb-plate { background: none; border: 0; padding: 0; font-family: var(--disp); font-weight: 400; color: var(--ink); text-shadow: 0 0 .15em #fff, 0 0 .15em #fff, 0 0 .25em #fff; }
/* スタート：再生の絵＋字。Enter は小さな紺のキーの札 */
:root[data-ui="pop"] .lb .lb-go { flex-direction: row; justify-content: center; gap: .3em; padding: .4em .8em .5em; }
:root[data-ui="pop"] .lb .lb-go .lb-play { width: .95em; height: .95em; flex: none; filter: drop-shadow(0 .06em 0 var(--ink)); }
:root[data-ui="pop"] .lb .lb-go small { position: absolute; right: .7em; bottom: -.5em; font-family: var(--num); font-weight: 400; font-size: .32em; letter-spacing: .06em; color: #fff; opacity: 1;
  background: var(--ink); border: .12em solid #fff; border-radius: .5em; padding: .05em .55em .12em; box-shadow: 0 0 0 .1em var(--ink); }
:root[data-ui="pop"] .lb .lb-go { position: relative; }
/* 「さそう」の字は＋の丸のすぐ下に（丸は席のまん中・名札の行は下なので、字だけだと丸からはなれて見えた） */
:root[data-ui="pop"] .lb-pc.empty .lb-plate { margin-top: -4.5em; position: relative; }
:root[data-ui="pop"] .lb-pc.empty small.lb-plate { margin-top: -5.6em; }

/* ---------- モードえらび（2026-11-02 ユーザー：ボタンのほかは前のまま・並べ方も古い・モードの絵がない）
   左は絵のカードを2列（モードの名前と種類だけ。説明は右）、右はえらんだコースの大きな絵・名前・説明・決めごと。コースのボタンにも絵 */
:root[data-ui="pop"] .lb-sheet.lb-msel { width: min(74em, 96%); }
:root[data-ui="pop"] .lb-ms { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
:root[data-ui="pop"] .lb-ms-list > h3 { font-family: var(--disp); font-weight: 400; margin: 0; }
:root[data-ui="pop"] .lb .lb-mc.feat { position: relative; gap: 0; padding: 0; overflow: hidden; background: #fff; border-radius: 1em; transition: transform .1s; }
:root[data-ui="pop"] .lb .lb-mc.feat:hover { transform: translateY(-.12em); }
:root[data-ui="pop"] .lb .lb-mc.feat .lb-mimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: .14em solid var(--ink); }
:root[data-ui="pop"] .lb .lb-mc.feat .mtag { position: absolute; top: .55em; left: .55em; font-size: .72em; box-shadow: 0 0 0 .12em #fff; }
:root[data-ui="pop"] .lb .lb-mc.feat b { padding: .3em .55em .4em; font-family: var(--disp); font-weight: 400; font-size: 1em; line-height: 1.3; }
:root[data-ui="pop"] .lb .lb-mc.feat small { display: none; }
:root[data-ui="pop"] .lb .lb-mc.feat.on { background: var(--hl); }
/* 右：名前・説明・決めごと（大きな絵は出さない。画面の高さが 675px くらいだと、人数・むずかしさが下にかくれた。えらんだモードは左のカード、コースは絵のボタンで分かる） */
:root[data-ui="pop"] .lb-ms-detail { gap: .5em; border-radius: 1.2em; }
:root[data-ui="pop"] .lb-ms-detail > .lb-mname { flex-direction: row; align-items: center; gap: .5em; }
:root[data-ui="pop"] .lb-ms-detail > .lb-mname b { font-family: var(--disp); font-weight: 400; font-size: 1.45em; }
:root[data-ui="pop"] .lb-ms-lines.lb-pop { display: flex; }
:root[data-ui="pop"] .lb-ms-lines { font-size: .76em; line-height: 1.4; order: 9; }   /* 説明は決めごとの下（決めごとが先に見えるように） */
:root[data-ui="pop"] .lb .lb-maps button:has(> .lb-mimg, > .lb-mapkuji) > b { font-size: .88em; line-height: 1.25; }
:root[data-ui="pop"] .lb .lb-maps button:has(> .lb-mimg, > .lb-mapkuji) > small { font-size: .66em; }
:root[data-ui="pop"] .lb-opt h4 { font-family: var(--disp); font-weight: 400; }
/* コース：絵のボタン（絵の下に名前と★・長さ）。おまかせはくじの「？」 */
:root[data-ui="pop"] .lb-maps { grid-template-columns: repeat(auto-fill, minmax(8.6em, 1fr)); gap: .5em; }
:root[data-ui="pop"] .lb .lb-maps button:has(> .lb-mimg, > .lb-mapkuji) { padding: 0 0 .4em; overflow: hidden; gap: .1em; }
:root[data-ui="pop"] .lb .lb-maps button:has(> .lb-mimg, > .lb-mapkuji) > :is(b, small) { padding: 0 .6em; }
:root[data-ui="pop"] .lb .lb-maps .lb-mimg { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; border-bottom: .12em solid var(--ink); margin-bottom: .2em; }
:root[data-ui="pop"] .lb .lb-maps .lb-mapkuji { display: grid; place-items: center; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 6; margin-bottom: .2em; font-family: var(--disp); font-size: 1.7em; color: var(--ink);
  text-shadow: 0 .06em 0 #fff; border-bottom: .055em solid var(--ink);
  /* おまかせ（くじ）：クリーム色に色とりどりの小さな丸（紙ふぶき）。紫は まわりから浮いていた（2026-11-06 ユーザー） */
  background: radial-gradient(circle at 14% 30%, #ff8fb8 0 .09em, transparent .1em), radial-gradient(circle at 30% 76%, #7fd67a 0 .07em, transparent .08em),
    radial-gradient(circle at 74% 24%, #57c0f2 0 .08em, transparent .09em), radial-gradient(circle at 88% 70%, #ffc93c 0 .09em, transparent .1em),
    radial-gradient(circle at 58% 84%, #b89cf2 0 .06em, transparent .07em), var(--gloss), linear-gradient(#fffdf6, #fff0c4); }
/* モードえらびの作りなおし（2026-11-06 ユーザー：モックの案1。docs/design/21-mode-select-mock.html）：
   左にモードのカード（絵と名前）を縦に・ほかのあそびはたためる（ひらいたらカードの絵を低くして、名前が切れないように）。
   右にコースの絵のボタン（4列）と決めごと（名前と、えらぶボタンを1行に）。下の帯に やめる（左下）と 決定（右下・大きな金色）。いつも同じ所 */
:root[data-ui="pop"] .lb-sheet.lb-msel { position: relative; width: min(78em, 96%); height: min(46em, 94%); max-height: 94%; display: flex; flex-direction: column; gap: .7em; }   /* 高さは決めておく（ほかのあそびをひらいても、下の帯が動かない） */
:root[data-ui="pop"] .lb-ms { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); gap: 1em; align-items: stretch; }
:root[data-ui="pop"] .lb-ms-list { gap: .55em; }
:root[data-ui="pop"] .lb .lb-mc.feat { flex: none; }
:root[data-ui="pop"] .lb .lb-mc.feat .lb-mimg { aspect-ratio: auto; height: 5.8em; }
:root[data-ui="pop"] .lb-ms-list.open .lb-mc.feat .lb-mimg { height: 2.6em; }
:root[data-ui="pop"] .lb .lb-mc.feat b { padding: .3em .7em .45em; font-size: 1.15em; }
:root[data-ui="pop"] .lb .lb-mc.feat.on { outline: .25em solid var(--gold); outline-offset: -.05em; }
:root[data-ui="pop"] .lb-ms-list > h4 { margin: .2em 0 0; font-size: .78em; color: var(--muted); }
:root[data-ui="pop"] .lb-ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="pop"] .lb-ms-detail { gap: .75em; }
:root[data-ui="pop"] .lb-ms-maps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root[data-ui="pop"] .lb-ms-row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: center; gap: .8em; }
:root[data-ui="pop"] .lb-ms-row h4 { margin: 0; white-space: nowrap; }
:root[data-ui="pop"] .lb-ms-bar { display: flex; justify-content: space-between; align-items: center; }
:root[data-ui="pop"] .lb .lb-ms-bar button { display: inline-flex; align-items: center; gap: .5em; font-family: var(--disp); font-weight: 400; font-size: 1.05em; padding: .4em 1.3em .5em; }
:root[data-ui="pop"] .lb .lb-ms-bar button.main { font-size: 1.3em; padding: .4em 1.9em .5em; }
:root[data-ui="pop"] .lb-key { font-family: var(--num); font-weight: 400; font-size: .5em; color: #fff; text-shadow: none; background: var(--ink); border-radius: .4em; padding: .2em .55em .25em; letter-spacing: .05em; }
:root[data-ui="pop"] .lb .lb-ms-bar button.main .lb-key { background: rgba(31, 35, 64, .75); }
/* 右の欄を「えらんだモードの中身」に見せる（2026-11-06 ユーザー：モードとマップが同じ物にならんで見える・全部モードか全部マップに見える）：
   右はえらんだモードの色のうすい入れ物（レース＝空・パーティー＝ピンク・ほかのあそび＝むらさき）。えらんだカードも同じ色にして、三角で右の欄につなぐ。
   コースのボタンはふちと影を細く・名前を小さくして、モードのカードより一段軽く。コースと決めごとの間に点線。決めごとは白い台の上に */
:root[data-ui="pop"] .lb-ms { gap: 0; }
:root[data-ui="pop"] .lb-ms-list { padding-right: 1.15em; }
:root[data-ui="pop"] .lb-ms-detail { --tint: #e2f4ff; --tint-d: #9fd6f5; background: var(--tint); box-shadow: inset 0 .25em 0 rgba(31, 35, 64, .06); }
:root[data-ui="pop"] .lb-ms-detail[data-tint="party"] { --tint: #ffe8f1; --tint-d: #f5a9c6; }
:root[data-ui="pop"] .lb-ms-detail[data-tint="other"] { --tint: #eee8ff; --tint-d: #bba8f0; }
:root[data-ui="pop"] .lb .lb-mc.feat { overflow: visible; }
:root[data-ui="pop"] .lb .lb-mc.feat .lb-mimg { border-radius: .85em .85em 0 0; }
:root[data-ui="pop"] .lb .lb-mc.feat.on { background: #e2f4ff; }
:root[data-ui="pop"] .lb .lb-mc.feat.on[data-lmenu="party"] { background: #ffe8f1; }
:root[data-ui="pop"] .lb .lb-mc.feat.on::after { content: ""; position: absolute; right: -1.2em; top: 50%; width: 1.2em; height: 1.9em; transform: translateY(-50%);
  background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
:root[data-ui="pop"] .lb .lb-ms-grid .lb-mc.on { background: #eee8ff; }
:root[data-ui="pop"] .lb-ms-maps { gap: .55em; padding-bottom: .85em; border-bottom: .14em dashed var(--tint-d); }
:root[data-ui="pop"] .lb .lb-ms-maps button { border-width: .1em; box-shadow: 0 .09em 0 var(--ink); border-radius: .7em; }
:root[data-ui="pop"] .lb .lb-ms-maps button > b { font-size: .8em; }
:root[data-ui="pop"] .lb .lb-ms-maps button.on { outline: .2em solid var(--gold); outline-offset: .05em; }
:root[data-ui="pop"] .lb-ms-sets { display: flex; flex-direction: column; gap: .55em; background: rgba(255, 255, 255, .7); border-radius: .9em; padding: .65em .8em; }
/* ロビーの左のカード：上にえらんだコースの絵（カードのふちまで） */
:root[data-ui="pop"] .lb-mode { padding-top: 0; overflow: hidden; }
:root[data-ui="pop"] .lb-mode > .lb-mimg { margin: 0 -.95em .1em; width: calc(100% + 1.9em); aspect-ratio: 16 / 9; object-fit: cover; border-bottom: .15em solid var(--ink); }
:root[data-ui="pop"] .lb-mode > .lb-mimg + .lb-cap + .lb-mname, :root[data-ui="pop"] .lb-mode > .lb-mimg + .lb-mname { margin-top: .1em; }

/* だれかと遊ぶ（2026-11-05）：友だちをよぶの下の白いぷっくり（2番めより弱い）・さがしている間の字・自動でスタートするまでの秒 */
:root[data-ui="pop"] .lb .lb-room.solo button.lb-quick { margin-top: .45em; color: var(--ink); text-shadow: none; background: var(--gloss), linear-gradient(#ffffff, #eef3fb); box-shadow: inset 0 -.14em 0 #cfd8e8, 0 .16em 0 var(--ink); }
:root[data-ui="pop"] .lb-room .lb-qnote { display: block; margin-top: .45em; text-align: center; font-family: var(--disp); font-weight: 400; color: var(--ink); background: #fff; border: .13em solid var(--ink); border-radius: 999px; padding: .35em 1em .4em; }