/* /play — "เล่นเกม" (storefront/play/index, PlayController). Tiles are the /decks game tiles (pkg-decks.css .sf-dg*);
   here only: the play button and the "soon" state (2026-10-15, owner: the mode links + the note line under the name went,
   "ทำปุ่มให้สวย"). The button = the tile's full width, 50px, a round play badge, a cyan glow (drop-shadow on the link:
   the notch's clip-path would cut a box-shadow); hover keeps buttons.css' pink wipe and the badge turns with it. */
.sf-play .sf-dg-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); }
.sf-play .sf-dg-go { padding-top: 14px; filter: drop-shadow(0 0 10px #00f0ff40); transition: filter .25s; }
.sf-play .sf-dg-btn { width: 100%; min-height: 50px; gap: 10px; padding: 0 18px; font-family: var(--v2-display, Orbitron, 'Noto Sans Thai', sans-serif); font-size: 15px; letter-spacing: .06em;
  background-image: linear-gradient(100deg, #00f0ff 0%, #5ff6ff 55%, #00d4ec 100%);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.sf-play-label { position: relative; }
/* badge at the left edge, label centred on the button (2026-10-16, owner: "icon ชิดด้านซ้าย คำว่า เข้าเล่น อยู่ตรงกลาง"):
   3 columns badge | label | an empty twin of the badge, so the label sits on the button's true centre */
.sf-play .sf-dg-btn { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; padding: 0 10px; }
.sf-play .sf-dg-btn .sf-play-label { justify-self: center; text-align: center; }
/* play badge (2026-10-16, owner: "ปุ่ม icon ทำให้สวยกว่านี้"): dark disc with a cyan → white → pink ring (turns on hover),
   a glossy top, a rounded triangle with a soft glow, a ring that ripples out now and then; one icon only — the arrow went (2026-10-16, owner: "มีทั้งหน้าและหลังเอาสักอัน"); badge + label centred */
@property --play-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sf-play-ic { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 2px solid transparent;
  background: radial-gradient(circle at 50% 35%, #1d2a3a 0%, #04121a 70%) padding-box,
    conic-gradient(from var(--play-a), #00f0ff, #fff 25%, #ff2e88 50%, #8a5cff 75%, #00f0ff) border-box;
  box-shadow: 0 2px 6px #04121a66, inset 0 -3px 6px #00f0ff26;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sf-play-ic::before { content: ''; position: absolute; inset: 1px 4px 50%; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  background: linear-gradient(#ffffff40, #ffffff00); pointer-events: none; transition: opacity .18s; }
.sf-play-ic::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #04121a; opacity: 0;
  pointer-events: none; animation: sf-play-ripple 2.8s ease-out infinite; }
.sf-play-ic svg { position: relative; width: 17px; height: 17px; margin-left: 1px; fill: #00f0ff;
  filter: drop-shadow(0 0 3px #00f0ffb3); transition: fill .18s, filter .18s, transform .25s; }
@keyframes sf-play-ripple { 0%, 55% { transform: scale(1); opacity: 0; } 60% { opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .sf-play .sf-dg:hover .sf-dg-go { filter: drop-shadow(0 0 14px #ff2e8873); }
  /* hover (2026-10-16, owner: "เวลา hover ดูน่าเกลียด" — a white disc + spinning rainbow ring on the pink wipe): the disc
     stays dark, its ring turns a plain white line, the triangle white; one soft white glow */
  /* depth (2026-10-16, owner: "ตอน hover อยากให้มีมิติ"): the disc lifts off the button (raised + a long soft shadow
     below), lit from the top-left (light spot, ring white → pale pink at the foot), a dome gloss, a dark inner rim at
     the bottom, and the triangle raised on it (its own shadow) */
  .sf-play .sf-dg:hover .sf-play-ic { transform: translateY(-2px) scale(1.08);
    background: radial-gradient(circle at 35% 28%, #5a2440 0%, #2a0d1c 38%, #0c0207 80%) padding-box,
      linear-gradient(160deg, #fff 0%, #fff 45%, #ffc2dc 100%) border-box;
    box-shadow: 0 7px 10px -3px #5a0a32b3, 0 2px 3px #3a061f99,
      inset 0 -4px 6px #000a, inset 0 2px 2px #ffffff26; }
  .sf-play .sf-dg:hover .sf-play-ic::after { animation: none; opacity: 0; }
  .sf-play .sf-dg:hover .sf-play-ic::before { opacity: 1; inset: 2px 5px 52%; background: linear-gradient(#ffffff59, #ffffff00); }
  .sf-play .sf-dg:hover .sf-play-ic svg { fill: #fff; transform: translateX(1px);
    filter: drop-shadow(0 2px 1px #000c) drop-shadow(0 0 4px #ff9cc866); }
}
@media (prefers-reduced-motion: reduce) { .sf-play-ic, .sf-play-ic::after { animation: none !important; } }
.effects-off .sf-play-ic, .effects-off .sf-play-ic::after { animation: none !important; }
.sf-play .sf-dg:active .sf-dg-btn { transform: scale(.98); }
/* chips under the name (PlayController::tags): modes that exist, players, card count — a colour per kind */
.sf-play-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.sf-play-tags li { --tc: var(--sf-muted); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px;
  font-size: 12px; font-weight: 700; color: #e9e2f5; white-space: nowrap;
  --te: color-mix(in srgb, var(--tc) 45%, transparent);
  /* the 1px frame is an inset shadow the notch cuts off along both diagonals — draw it back there (like --sf-diag) */
  --tdiag: linear-gradient(to bottom left, transparent calc(50% - .8px), var(--te) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px));
  background: var(--tdiag) top right / 7px 7px no-repeat, var(--tdiag) bottom left / 7px 7px no-repeat, color-mix(in srgb, var(--tc) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--te);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.sf-play-tags li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.sf-play-tags .is-tutorial { --tc: var(--sf-sell, #2ee59d); }
.sf-play-tags .is-ai { --tc: var(--sf-action, #00f0ff); }
.sf-play-tags .is-online { --tc: var(--sf-promo, #ff2e88); }
.sf-play-tags .is-players { --tc: var(--sf-code, #b9a8ff); }
.sf-play-tags .is-cards { --tc: var(--sf-price, #ffd24a); }
.sf-play-tags .is-cards::before { border-radius: 1px; width: 6px; height: 9px; }
.sf-play-tile.is-soon { opacity: .55; }
.sf-play-tile.is-soon .sf-dg-art { filter: grayscale(1); }
@media (max-width: 640px) {
  .sf-play .sf-dg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------------------------
   Buddyfight online lobby + room (/play/buddyfight/online[/{code}], storefront/play/buddyfight-online*) */
.sf-bfo .sf-panel { margin-top: 18px; }
.sf-bfo-alert { margin: 14px 0 0; }
.sf-bfo-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sf-bfo-grid > .sf-panel { margin-top: 18px; }
.sf-bfo-grid > .sf-panel + .sf-panel { margin-top: 18px; }
@media (max-width: 900px) { .sf-bfo-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.sf-bfo-muted { color: var(--v2-muted); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.sf-bfo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-bfo-deck { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #ffffff1a; background: #ffffff05; cursor: pointer; transition: border-color .15s, background .15s; }
.sf-bfo-deck:hover { border-color: #00f0ff66; }
.sf-bfo-deck:has(input:checked) { border-color: var(--sf-action, #00f0ff); background: #00f0ff12; box-shadow: inset 3px 0 0 var(--sf-action, #00f0ff); }
.sf-bfo-deck input { accent-color: var(--sf-action, #00f0ff); width: 18px; height: 18px; flex: none; }
.sf-bfo-deck-body { display: grid; gap: 2px; min-width: 0; }
.sf-bfo-deck-body b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-deck-body small { color: var(--v2-muted); font-size: 12px; }
.sf-bfo-code { display: flex; gap: 8px; margin-bottom: 10px; }
.sf-bfo-code .sf-input { font: 700 18px/1 var(--v2-mono, monospace); letter-spacing: 3px; text-transform: uppercase; min-height: 46px; }
.sf-bfo-rules { margin: 14px 0 0; padding: 12px 0 0 18px; border-top: 1px solid #ffffff14; color: var(--v2-muted); font-size: 12px; line-height: 1.7; }
.sf-bfo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-bfo-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid #ffffff14; background: #ffffff04; color: inherit; text-decoration: none; transition: border-color .15s; }
.sf-bfo-item a:hover, .sf-bfo-item a:focus-visible { border-color: #00f0ff66; outline: none; }
.sf-bfo-item.is-turn a { border-color: #ffcf0099; box-shadow: inset 3px 0 0 #ffcf00; }
.sf-bfo-item.is-done a { opacity: .82; }
.sf-bfo-code-chip { font: 700 13px/1 var(--v2-mono, monospace); letter-spacing: 2px; color: var(--sf-code, #b79cff); padding: 6px 8px; border: 1px solid #b79cff44; }
.sf-bfo-item-main { display: grid; gap: 2px; min-width: 0; }
.sf-bfo-item-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-item-main small { color: var(--v2-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-state { font-size: 13px; font-weight: 700; text-align: right; display: grid; gap: 2px; }
.sf-bfo-state small { font-weight: 400; color: var(--v2-muted); font-size: 11px; }
.sf-bfo-item.is-turn .sf-bfo-state { color: #ffcf00; }
.sf-bfo-item.is-won .sf-bfo-state { color: #4ee28a; }
.sf-bfo-item.is-lost .sf-bfo-state { color: #ff6b7d; }
.sf-bfo-invite { display: flex; gap: 8px; }
.sf-bfo-invite .sf-input { font-family: var(--v2-mono, monospace); min-height: 46px; }
.sf-bfo-big { margin: 18px 0 8px; color: var(--v2-muted); font-size: 13px; }
.sf-bfo-big b { display: block; margin-top: 4px; font: 800 34px/1.1 var(--v2-mono, monospace); letter-spacing: 8px; color: var(--v2-text); }
.sf-bfo-pulse { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: 13px; }
.sf-bfo-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #00f0ff; flex: none; }
.sf-bfo-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #00f0ff; animation: sf-bfo-ping 1.6s ease-out infinite; }
@keyframes sf-bfo-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sf-bfo-dot::after { animation: none; } }
@media (max-width: 680px) {
  .sf-bfo-invite, .sf-bfo-code { flex-direction: column; }
  .sf-bfo-item a { grid-template-columns: minmax(0, 1fr) auto; }
  .sf-bfo-code-chip { grid-column: 1 / -1; justify-self: start; }
  .sf-bfo-big b { font-size: 28px; letter-spacing: 5px; }
}
.sf-bfo-code .button { flex: none; white-space: nowrap; }
.sf-bfo-code .sf-input::placeholder { font: 400 13px/1 'Noto Sans Thai', sans-serif; letter-spacing: 0; text-transform: none; }

/* /play/buddyfight/start — pick a mode (buddyfight-modes.blade, owner 2026-10-15) */
.sf-bfm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.sf-bfm-grid > .sf-panel { margin: 0; }
.sf-bfm-mode { --bfm: #00ffff; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 24px; color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.sf-bfm-mode.is-online { --bfm: #ff2e88; }
.sf-bfm-mode h2 { margin: 0; font-size: 24px; color: var(--sf-heading, #fff); }
.sf-bfm-mode ul { margin: 0; padding-left: 18px; color: var(--sf-muted); line-height: 1.75; font-size: 14.5px; flex: 1; }
.sf-bfm-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; color: var(--bfm);
  background: color-mix(in srgb, var(--bfm) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bfm) 45%, transparent), 0 0 24px color-mix(in srgb, var(--bfm) 22%, transparent); }
.sf-bfm-ic svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-bfm-go { align-self: flex-start; margin-top: 6px; pointer-events: none; }
.sf-bfm-badge { align-self: flex-start; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--sf-text); background: rgba(255,255,255,.08); }
.sf-bfm-badge.is-turn { color: #1a0710; background: #ffcf5a; }
.sf-bfm-more { justify-content: flex-start; margin-top: 18px; font-size: 14px; }
/* สอนเล่น banner above the two modes */
.sf-bfm-learn { --bfm: #ffd34d; position: relative; display: flex; align-items: center; gap: 20px; margin: 18px 0 0; padding: 14px 24px 14px 14px; color: inherit; text-decoration: none;
  background: linear-gradient(100deg, rgba(255, 211, 77, .12), rgba(0, 255, 255, .06) 55%, transparent); transition: transform .18s, box-shadow .18s; overflow: hidden; }
.sf-bfm-learn-face { flex: none; width: 104px; height: 120px; object-fit: contain; object-position: bottom; margin: -6px 0 -14px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.sf-bfm-learn-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sf-bfm-learn-text small { color: var(--bfm); font-weight: 700; font-size: 13px; }
.sf-bfm-learn-text b { color: var(--sf-heading, #fff); font-size: 21px; line-height: 1.3; }
.sf-bfm-learn-text > span { color: var(--sf-muted); font-size: 14.5px; line-height: 1.6; }
.sf-bfm-learn .sf-bfm-go { align-self: center; margin: 0; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .sf-bfm-learn:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--bfm), 0 12px 34px rgba(255, 211, 77, .2); }
}
.sf-bfm-learn:focus-visible { outline: 2px solid var(--bfm); outline-offset: 3px; }
@media (max-width: 720px) {
  .sf-bfm-learn { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
  .sf-bfm-learn-face { width: 70px; height: 84px; margin: 0; }
  .sf-bfm-learn-text { flex-basis: calc(100% - 90px); }
  .sf-bfm-learn-text b { font-size: 18px; }
  .sf-bfm-learn .sf-bfm-go { width: 100%; justify-content: center; }
}
@media (hover: hover) and (pointer: fine) {
  .sf-bfm-mode:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--bfm), 0 12px 34px color-mix(in srgb, var(--bfm) 22%, transparent); }
}
.sf-bfm-mode:focus-visible { outline: 2px solid var(--bfm); outline-offset: 3px; }
@media (max-width: 720px) { .sf-bfm-grid { grid-template-columns: minmax(0, 1fr); } .sf-bfm-mode { padding: 22px 18px 20px; } .sf-bfm-mode h2 { font-size: 20px; } }
/* the mode switch beside the online lobby heading */
.sf-bfo .sf-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---- /play/buddyfight/online as a ROOM BOARD (owner 2026-10-15: "มันควรทำเป็นห้องๆ") ----------------------------------
   bar (สร้างห้อง · code · time rules) → sections of room tiles (storefront/play/_bfo-board): a tile = room no. + tags,
   seats P1 VS P2, a foot with the state and one action. Notched like the site's panels; the cut diagonals are painted
   back in the frame's colour (--bfr) on ::after. */
.sf-bfo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; padding: 14px 16px; background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-bfo-bar-new { flex: none; min-height: 46px; gap: 8px; }
.sf-bfo-bar .sf-bfo-code { flex: 1 1 340px; align-items: center; margin: 0; }
.sf-bfo-code-label { flex: none; font-size: 13px; color: var(--v2-muted); white-space: nowrap; }
.sf-bfo-bar .sf-bfo-code .sf-input { flex: 1 1 auto; min-width: 0; max-width: 260px; }
.sf-bfo-howto { flex: none; margin-left: auto; position: relative; font-size: 13px; }
.sf-bfo-howto summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--v2-muted); padding: 8px 4px; }
.sf-bfo-howto summary::-webkit-details-marker { display: none; }
.sf-bfo-howto summary:hover, .sf-bfo-howto[open] summary { color: var(--sf-action, #00f0ff); }
.sf-bfo-howto .sf-bfo-rules { position: absolute; right: 0; top: 100%; z-index: 5; width: min(420px, 86vw); margin: 4px 0 0; padding: 12px 14px 12px 30px; background: #160a28; border: 1px solid #ffffff24; box-shadow: 0 14px 34px #0009; }

.sf-bfo-sec { margin-top: 26px; }
.sf-bfo-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; }
.sf-bfo-sec-h small { font-size: 12px; font-weight: 400; color: var(--v2-muted); }
.sf-bfo-lamp { width: 10px; height: 10px; border-radius: 50%; background: #ffffff40; flex: none; }
.sf-bfo-lamp.is-open { background: #4ee28a; box-shadow: 0 0 10px #4ee28a; }
.sf-bfo-lamp.is-play { background: #ffcf00; box-shadow: 0 0 10px #ffcf00; }
.sf-bfo-none { margin-top: 12px; }

.sf-bfo-rooms-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sf-bfo-rooms-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sf-bfo-rooms-grid > li { display: flex; min-width: 0; }

/* a tile: --rt = the room's colour (host flag's world; gold when it is your turn) */
.sf-bfo-room { --rt: #00f0ff; --bfr: color-mix(in srgb, var(--rt) 45%, transparent); position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer;
  background: #120720; border: 1px solid var(--bfr);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition: transform .2s, box-shadow .2s; }
.sf-bfo-room::after { content: ''; position: absolute; inset: -1px; z-index: 6; pointer-events: none; color: var(--bfr); background: var(--sf-diag) right top / 16px 16px no-repeat, var(--sf-diag) left bottom / 16px 16px no-repeat; }
.sf-bfo-room:focus-visible { outline: 2px solid var(--rt); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .sf-bfo-room:not(.is-new):not(:disabled):hover { --bfr: var(--rt); transform: translateY(-3px); }
  .sf-bfo-room:hover .sf-bfo-art { transform: scale(1.06); }
  .sf-bfo-room:hover .sf-bfo-vs { transform: translate(-50%, -50%) scale(1.12) rotate(-6deg); }
}

/* the arena: two seats cut by a "\" diagonal, a floor grid, light from each side */
.sf-bfo-arena { position: relative; display: block; height: 210px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 115%, color-mix(in srgb, var(--rt) 30%, transparent), transparent 60%), #0b0416; }
.sf-bfo-arena::before { content: ''; position: absolute; inset: 55% -20% -10%; z-index: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--rt) 55%, transparent) 0 1px, transparent 1px 34px),
              repeating-linear-gradient(0deg, color-mix(in srgb, var(--rt) 55%, transparent) 0 1px, transparent 1px 22px);
  transform: perspective(240px) rotateX(58deg); transform-origin: 50% 0; -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%); }
.sf-bfo-side { --st: #8a7aa8; position: absolute; inset: 0; z-index: 1; overflow: hidden; display: block; }
.sf-bfo-side.is-l { clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%); }
.sf-bfo-side.is-r { clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%); }
.sf-bfo-side::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sf-bfo-side.is-l::before { background: linear-gradient(90deg, color-mix(in srgb, var(--st) 30%, #0b0416e6) 0%, #0b0416b3 38%, #0b041640 56%), linear-gradient(0deg, #0b0416 0%, transparent 45%); }
.sf-bfo-side.is-r::before { background: linear-gradient(270deg, color-mix(in srgb, var(--st) 30%, #0b0416e6) 0%, #0b0416b3 38%, #0b041640 56%), linear-gradient(0deg, #0b0416 0%, transparent 45%); }
/* the deck's buddy art: its half of the arena, dim, facing the middle */
.sf-bfo-art { position: absolute; top: 0; height: 100%; width: 62%; object-fit: cover; object-position: 50% 30%; z-index: 0; opacity: .78; filter: saturate(1.15); transition: transform .45s ease; }
.sf-bfo-side.is-l .sf-bfo-art { left: 0; }
.sf-bfo-side.is-r .sf-bfo-art { right: 0; transform-origin: 70% 50%; }
.sf-bfo-art.is-full { object-position: 60% 18%; } /* the whole official card: aim at its art box */
.sf-bfo-side.is-r .sf-bfo-art { scale: -1 1; }

/* the player in front: profile picture + name */
.sf-bfo-player { position: absolute; z-index: 2; bottom: 12px; display: flex; flex-direction: column; gap: 3px; width: 39%; min-width: 0; }
.sf-bfo-side.is-l .sf-bfo-player { left: 14px; align-items: flex-start; }
.sf-bfo-side.is-r .sf-bfo-player { right: 14px; align-items: flex-end; text-align: right; }
.sf-bfo-ava { --hue: 200; display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 4px; flex: none; overflow: hidden; border-radius: 50%;
  font-weight: 800; font-size: 26px; line-height: 1; color: #fff; background: hsl(var(--hue) 62% 42%);
  border: 3px solid var(--st); box-shadow: 0 0 0 2px #0b0416, 0 0 22px color-mix(in srgb, var(--st) 70%, transparent); }
.sf-bfo-ava img { width: 100%; height: 100%; object-fit: cover; }
.sf-bfo-ava.is-empty { background: #ffffff08; border: 2px dashed #ffffff55; color: #ffffffaa; box-shadow: none; font-size: 28px; font-weight: 400; }
.sf-bfo-side.is-free .sf-bfo-ava.is-empty { border-color: #4ee28a; color: #4ee28a; box-shadow: 0 0 20px #4ee28a55; animation: sf-bfo-seat 1.8s ease-in-out infinite; }
@keyframes sf-bfo-seat { 50% { box-shadow: 0 0 0 6px #4ee28a22, 0 0 26px #4ee28a88; } }
.sf-bfo-seat-tag { font: 700 10px/1 var(--v2-mono, monospace); font-style: normal; letter-spacing: 1.5px; color: color-mix(in srgb, var(--st) 60%, #fff); text-transform: uppercase; }
.sf-bfo-side.is-empty .sf-bfo-seat-tag { color: #ffffff80; }
.sf-bfo-pname { max-width: 100%; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-psub { max-width: 100%; font-size: 11px; color: #ffffffb3; text-shadow: 0 1px 4px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-side.is-empty .sf-bfo-pname { color: #ffffffcc; font-weight: 700; }
.sf-bfo-side.is-free .sf-bfo-pname { color: #4ee28a; }
.sf-bfo-side.is-empty::before { background: repeating-linear-gradient(-55deg, #ffffff06 0 10px, transparent 10px 20px); }
.sf-bfo-side.is-active .sf-bfo-ava { border-color: #ffcf00; box-shadow: 0 0 0 2px #0b0416, 0 0 26px #ffcf00aa; }

/* the diagonal seam + VS */
.sf-bfo-arena > .sf-bfo-vs { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 52px; height: 52px;
  font: 900 italic 19px/1 var(--v2-display, 'Orbitron', sans-serif); letter-spacing: 0; color: #fff; text-shadow: 0 0 8px #ff2e88, 0 0 2px #000;
  background: radial-gradient(circle, #ff2e8866, transparent 70%); transition: transform .25s; }
.sf-bfo-arena::after { content: ''; position: absolute; z-index: 3; inset: -10% auto -10% 50%; width: 3px; transform: translateX(-50%) rotate(8deg); pointer-events: none;
  background: linear-gradient(transparent, var(--rt) 25%, #fff 50%, var(--rt) 75%, transparent); box-shadow: 0 0 14px var(--rt); opacity: .9; }

/* room number + tags over the arena */
.sf-bfo-room-top { position: absolute; z-index: 5; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-bfo-room-no { display: inline-flex; align-items: baseline; gap: 6px; margin-right: auto; padding: 5px 9px; background: #0b0416cc; border: 1px solid #ffffff22; font: 800 16px/1 var(--v2-mono, monospace); letter-spacing: 2px; color: #fff; }
.sf-bfo-room-no small { font: 600 10px/1 'Noto Sans Thai', sans-serif; letter-spacing: 0; color: var(--v2-muted); }
.sf-bfo-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 8px; background: #0b0416cc; border: 1px solid #ffffff2a; color: #ffffffcc; white-space: nowrap; }
.sf-bfo-tag .icon { width: 12px; height: 12px; }
.sf-bfo-tag.is-mine { color: #00f0ff; border-color: #00f0ff77; }
.sf-bfo-tag.is-live { color: #ffcf00; border-color: #ffcf0077; }
.sf-bfo-tag.is-test { color: #ff6b7d; border-color: #ff6b7d88; }
.sf-bfo-tag.is-seats { color: #4ee28a; border-color: #4ee28a77; font-family: var(--v2-mono, monospace); }

/* foot */
.sf-bfo-room-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--bfr); background: linear-gradient(90deg, color-mix(in srgb, var(--rt) 10%, transparent), transparent 70%); font-size: 13px; }
.sf-bfo-foot-main { display: grid; gap: 2px; min-width: 0; }
.sf-bfo-foot-main > b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-foot-main > small { font-size: 11px; color: var(--v2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-waiting { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--v2-muted); }
.sf-bfo-waiting .sf-bfo-dot { width: 8px; height: 8px; }
.sf-bfo-turn { color: var(--v2-muted); }
.sf-bfo-room.is-turn .sf-bfo-turn { color: #ffcf00; }
.sf-bfo-go { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; padding: 9px 13px; color: #0a0014; background: var(--sf-action, #00f0ff); white-space: nowrap; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sf-bfo-room.is-joinable .sf-bfo-go { background: #4ee28a; }
.sf-bfo-room.is-turn .sf-bfo-go { background: #ffcf00; }
.sf-bfo-go.is-ghost { background: transparent; color: var(--sf-action, #00f0ff); padding: 9px 0; clip-path: none; }
.sf-bfo-go .icon { width: 14px; height: 14px; transition: transform .18s; }
@media (hover: hover) and (pointer: fine) { .sf-bfo-room:hover .sf-bfo-go .icon { transform: translateX(3px); } }

/* results: a slim tile, my buddy dim behind */
.sf-bfo-room.is-done { --rt: #8a7aa8; gap: 10px; padding: 12px 14px; overflow: hidden; }
.sf-bfo-done-art { position: absolute; inset: 0 0 0 auto; width: 70%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .22; z-index: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%); }
.sf-bfo-done-art.is-full { object-position: 60% 18%; }
.sf-bfo-done-top, .sf-bfo-done-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-bfo-done-top .sf-bfo-room-no { font-size: 13px; padding: 4px 7px; }
.sf-bfo-result { font-weight: 800; font-size: 12px; padding: 4px 10px; }
.sf-bfo-room.is-won { --rt: #4ee28a; }
.sf-bfo-room.is-won .sf-bfo-result { color: #0a0014; background: #4ee28a; }
.sf-bfo-room.is-lost { --rt: #ff6b7d; }
.sf-bfo-room.is-lost .sf-bfo-result { color: #fff; background: #d23a54; }
.sf-bfo-room.is-draw .sf-bfo-result { color: var(--v2-text); background: #ffffff22; }
.sf-bfo-ava.is-sm { --st: #ffffff55; width: 34px; height: 34px; margin: 0; font-size: 14px; border-width: 2px; box-shadow: none; }
.sf-bfo-done-txt { display: grid; gap: 2px; min-width: 0; }
.sf-bfo-done-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-done-txt small { font-size: 11px; color: var(--v2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .sf-bfo-side.is-free .sf-bfo-ava.is-empty { animation: none; } .sf-bfo-art, .sf-bfo-vs, .sf-bfo-room { transition: none; } }
@media (max-width: 680px) { .sf-bfo-arena { height: 178px; } .sf-bfo-ava { width: 54px; height: 54px; font-size: 22px; } .sf-bfo-pname { font-size: 15px; } }

/* สร้างห้อง = tap a deck (owner 2026-10-15: "ไม่เอา popup", "ตัว select เลือกอาจเปลี่ยนให้ง่ายกว่านี้", "ต้องเป็นฟ้าชมพูไหม"):
   a plain panel, the decks as picture cards (each card IS the button), one switch; ONE accent colour (the site's cyan) */

.sf-bfo-dp { margin: 0; }

.sf-bfo-dp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sf-bfo-dp-grid > li { display: flex; min-width: 0; }
.sf-bfo-dp-card { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; text-align: left; font: inherit; color: var(--v2-text); cursor: pointer; overflow: hidden;
  background: #0f0720; border: 1px solid #ffffff24; border-radius: 6px; transition: border-color .15s, transform .15s; }
.sf-bfo-dp-art { display: block; aspect-ratio: 16 / 9; background: #0b0416; overflow: hidden; }
.sf-bfo-dp-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .3s; }
.sf-bfo-dp-art img.is-full { object-position: 60% 18%; }
.sf-bfo-dp-txt { display: grid; gap: 2px; padding: 10px 12px 4px; min-width: 0; }
.sf-bfo-dp-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-dp-txt small { font-size: 12px; color: var(--v2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-dp-go { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 8px 12px 12px; font-size: 13px; font-weight: 700; color: var(--sf-action, #00f0ff); }
.sf-bfo-dp-go .icon { width: 14px; height: 14px; transition: transform .15s; }
.sf-bfo-dp-card:focus-visible { outline: 2px solid var(--sf-action, #00f0ff); outline-offset: 2px; }
.sf-bfo-dp-card:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .sf-bfo-dp-card:not(:disabled):hover { border-color: var(--sf-action, #00f0ff); transform: translateY(-2px); }
  .sf-bfo-dp-card:not(:disabled):hover .sf-bfo-dp-art img { transform: scale(1.05); }
  .sf-bfo-dp-card:not(:disabled):hover .sf-bfo-dp-go .icon { transform: translateX(3px); }
}
.sf-bfo-none { margin: 4px 0 0; font-size: 14px; color: var(--v2-muted); }

@media (max-width: 680px) {
  .sf-bfo-bar { padding: 12px; }
  .sf-bfo-bar .sf-bfo-code { flex-direction: row; flex-wrap: wrap; }
  .sf-bfo-code-label { width: 100%; }
  .sf-bfo-bar .sf-bfo-code .sf-input { max-width: none; flex: 1 1 140px; }
  .sf-bfo-howto { margin-left: 0; }
  .sf-bfo-howto .sf-bfo-rules { left: 0; right: auto; }
  .sf-bfo-rooms-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-bfo-rooms-grid.is-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-bfo-dp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sf-bfo-dp-txt b { font-size: 14px; }
}

/* deck cards = a CHOICE (owner 2026-10-15: "ทำไมไม่มีเลือกเด็คแล้วละ"): radios, the picked card framed + ✓, then the switch and
   ONE button in a bar under them */
.sf-bfo-dp-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.sf-bfo-dp-h { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--v2-text); }
.sf-bfo-dp-h > span { display: grid; place-items: center; width: 24px; height: 24px; font: 800 12px/1 var(--v2-mono, monospace); color: #0a0014; background: var(--sf-action, #00f0ff); border-radius: 50%; }
.sf-bfo-dp-h small { font-size: 12px; font-weight: 400; color: var(--v2-muted); }
.sf-bfo-dp-card { position: relative; }
.sf-bfo-dp-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sf-bfo-dp-txt { padding-bottom: 12px; }
.sf-bfo-dp-tick { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0b0416b3; border: 2px solid #ffffffb3; color: transparent; transition: background .15s, border-color .15s; }
.sf-bfo-dp-tick .icon { width: 15px; height: 15px; }
.sf-bfo-dp-card:has(input:checked) { border: 2px solid var(--sf-action, #00f0ff); box-shadow: 0 0 0 3px #00f0ff26; }
.sf-bfo-dp-card:has(input:checked) .sf-bfo-dp-tick { background: var(--sf-action, #00f0ff); border-color: var(--sf-action, #00f0ff); color: #0a0014; }
.sf-bfo-dp-card:has(input:focus-visible) { outline: 2px solid var(--sf-action, #00f0ff); outline-offset: 3px; }
.sf-bfo-dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ffffff1a; }
.sf-bfo-dp-submit { min-height: 48px; min-width: 200px; justify-content: center; gap: 8px; margin-left: auto; }
@media (max-width: 680px) { .sf-bfo-dp-submit { width: 100%; } }

/* the "new room" PANEL under the bar (owner 2026-10-15: "แบบเดิมดีกว่า แต่อาจไม่เป็น popup อาจทำเป็นแบบซ่อนและแสดง"):
   hidden until สร้างห้อง, folds open (grid rows 0fr → 1fr); head band | body (1 deck cards, 2 who may join) | foot bar */
.sf-bfo-bar-new { gap: 8px; }
.sf-bfo-bar-new[aria-expanded="true"] svg { transform: rotate(45deg); }
.sf-bfo-bar-new svg { transition: transform .2s; }
.sf-bfo-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s ease, opacity .2s ease, margin .28s ease; }
.sf-bfo-fold.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.sf-bfo-fold > .sf-bfo-maker { min-height: 0; overflow: hidden; }
.sf-bfo-fold:not(.is-open) > .sf-bfo-maker { visibility: hidden; border-width: 0; transition: visibility 0s .28s, border-width 0s .28s; }
@media (prefers-reduced-motion: reduce) { .sf-bfo-fold { transition: none; } }

.sf-bfo-maker { background: #1a0e2e; border: 1px solid #00f0ff66; }
.sf-bfo-mk-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; background: linear-gradient(100deg, #00f0ff2b, transparent 70%), #24133f; border-bottom: 2px solid #00f0ff; }
.sf-bfo-mk-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: #0a0014; background: #00f0ff; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sf-bfo-mk-ic .icon { width: 19px; height: 19px; }
.sf-bfo-mk-titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sf-bfo-mk-titles h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.sf-bfo-mk-titles small { font-size: 12px; color: var(--v2-muted); }
.sf-bfo-mk-x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; background: #ffffff08; border: 1px solid #ffffff2e; color: var(--v2-text); cursor: pointer; transition: border-color .15s, color .15s; }
.sf-bfo-mk-x:hover, .sf-bfo-mk-x:focus-visible { border-color: #00f0ff; color: #00f0ff; outline: none; }
.sf-bfo-mk-body { display: grid; gap: 22px; padding: 18px; }
.sf-bfo-mk-body .sf-bfo-alert { margin: 0; }
.sf-bfo-mk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; background: #0a0414; border-top: 1px solid #ffffff1f; }
.sf-bfo-mk-note { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 240px; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--v2-muted); }
.sf-bfo-mk-note .icon { flex: none; width: 16px; height: 16px; color: #00f0ff; }
.sf-bfo-mk-btns { display: flex; gap: 10px; margin-left: auto; }
.sf-bfo-mk-btns .button { min-height: 46px; gap: 8px; }

/* 2. who may join: two tiles, the picked one ticked */
.sf-bfo-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-bfo-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 14px; cursor: pointer; background: #0f0720; border: 1px solid #ffffff24; border-radius: 6px; transition: border-color .15s, background .15s; }
.sf-bfo-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sf-bfo-opt-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff0f; color: var(--v2-muted); transition: background .15s, color .15s; }
.sf-bfo-opt-ic .icon { width: 19px; height: 19px; }
.sf-bfo-opt-txt { display: grid; gap: 2px; min-width: 0; }
.sf-bfo-opt-txt b { font-size: 15px; }
.sf-bfo-opt-txt small { font-size: 12px; line-height: 1.5; color: var(--v2-muted); }
.sf-bfo-opt-tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ffffff40; color: transparent; transition: background .15s, border-color .15s; }
.sf-bfo-opt-tick .icon { width: 13px; height: 13px; }
.sf-bfo-opt:has(input:checked) { border: 2px solid var(--sf-action, #00f0ff); box-shadow: 0 0 0 3px #00f0ff26; background: #00f0ff0f; }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-ic { background: var(--sf-action, #00f0ff); color: #0a0014; }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-tick { background: var(--sf-action, #00f0ff); border-color: var(--sf-action, #00f0ff); color: #0a0014; }
.sf-bfo-opt:has(input:focus-visible) { outline: 2px solid var(--sf-action, #00f0ff); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sf-bfo-opt:hover { border-color: #00f0ff99; } }
.sf-bfo-maker .sf-bfo-dp-h { margin-bottom: 12px; }

@media (max-width: 680px) {
  .sf-bfo-bar-new { width: 100%; justify-content: center; }
  .sf-bfo-who-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-bfo-mk-head { padding: 12px 12px 12px 14px; }
  .sf-bfo-mk-body { padding: 14px; gap: 18px; }
  .sf-bfo-mk-foot { padding: 12px 14px; }
  .sf-bfo-mk-btns { width: 100%; }
  .sf-bfo-mk-btns .button { flex: 1; justify-content: center; }
}

/* colours of the new-room panel + deck cards (owner 2026-10-15: "ทำเป็นสีที่ดูง่ายหน่อย อาจใช้สีชมพูบ้าง"): PINK = what you
   choose (step numbers, the picked deck / option: frame, tick, icon) and the head's rule; CYAN = only the action button;
   muted text a step brighter */
.sf-bfo-maker, .sf-bfo-dp { --pick: #ff2e88; --pick-soft: #ff2e8824; }
.sf-bfo-maker { border-color: #ff2e8866; }
.sf-bfo-mk-head { background: linear-gradient(100deg, #ff2e8833, #6a2bd12e 55%, transparent), #24133f; border-bottom-color: var(--pick); }
.sf-bfo-mk-ic { background: var(--pick); color: #fff; }
.sf-bfo-mk-titles small, .sf-bfo-opt-txt small, .sf-bfo-dp-txt small, .sf-bfo-mk-note, .sf-bfo-dp-h small { color: #cfc4e2; }
.sf-bfo-mk-x:hover, .sf-bfo-mk-x:focus-visible { border-color: var(--pick); color: var(--pick); }
.sf-bfo-maker .sf-bfo-dp-h > span, .sf-bfo-dp .sf-bfo-dp-h > span { background: var(--pick); color: #fff; }
.sf-bfo-dp-card:has(input:checked), .sf-bfo-opt:has(input:checked) { border-color: var(--pick); box-shadow: 0 0 0 3px var(--pick-soft); background: #ff2e8812; }
.sf-bfo-dp-card:has(input:checked) .sf-bfo-dp-tick, .sf-bfo-opt:has(input:checked) .sf-bfo-opt-tick { background: var(--pick); border-color: var(--pick); color: #fff; }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-ic { background: var(--pick); color: #fff; }
.sf-bfo-dp-card:has(input:focus-visible), .sf-bfo-opt:has(input:focus-visible) { outline-color: var(--pick); }
@media (hover: hover) and (pointer: fine) { .sf-bfo-opt:hover, .sf-bfo-dp-card:not(:has(input:checked)):hover { border-color: #ff2e8899; } }
.sf-bfo-mk-note .icon { color: var(--pick); }
/* "ชมพูฟ้า": the head band + its rule run pink → cyan; the panel's outline shares both */
.sf-bfo-maker { border-color: #ff2e8855; box-shadow: 0 0 0 1px #00f0ff1a; }
.sf-bfo-mk-head { position: relative; border-bottom: 0; background: linear-gradient(100deg, #ff2e8838, #6a2bd12e 50%, #00f0ff2e), #24133f; }
.sf-bfo-mk-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #ff2e88, #00f0ff); }

/* deck tiles in the /decks look (owner 2026-10-15: "ตัวเด็คที่แสดงอาจเป็นแบบนี้"): `.sf-dm` from pkg-decks.css as a radio label;
   picked = pink frame + ✓ on the picture; "ดูการ์ดในเด็ค" under the meta opens the deck popup */
.sf-bfo-dk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.sf-bfo-dk-grid > li { display: flex; min-width: 0; }
.sf-bfo-dk { flex: 1; cursor: pointer; }
.sf-bfo-dk > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sf-bfo-dk .sf-dm-art { cursor: pointer; }
.sf-bfo-dk .sf-bfo-dp-tick { position: absolute; z-index: 5; top: 10px; right: 10px; }
.sf-bfo-dk-name { font-size: 15px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-dk .sf-dm-meta { color: #cfc4e2; }
.sf-bfo-dk-view { align-self: flex-start; min-height: 34px; padding: 0 12px; margin-top: 6px; gap: 6px; font-size: 12px; }
.sf-bfo-dk-view .icon { width: 15px; height: 15px; }
.sf-bfo-dk:has(input:checked) { --sf-edge: #ff2e88; box-shadow: 0 0 0 3px #ff2e8833; }
.sf-bfo-dk:has(input:checked) .sf-bfo-dp-tick { background: #ff2e88; border-color: #ff2e88; color: #fff; }
.sf-bfo-dk:has(input:focus-visible) { outline: 2px solid #ff2e88; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sf-bfo-dk:not(:has(input:checked)):hover { --sf-edge: #ff2e8899; } }

/* the deck popup: head | the cards by tab (scrolls) | foot */
.sf-bfo-dv { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; overflow: hidden; color: var(--v2-text); background: #1a0e2e; border: 1px solid #ff2e8866; box-shadow: 0 24px 70px #000c; }
.sf-bfo-dv[open] { display: flex; flex-direction: column; }
.sf-bfo-dv::backdrop { background: #05000ccc; }
.sf-bfo-dv-head { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; background: linear-gradient(100deg, #ff2e8838, #6a2bd12e 50%, #00f0ff2e), #24133f; }
.sf-bfo-dv-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #ff2e88, #00f0ff); }
.sf-bfo-dv-head .sf-bfo-mk-ic { background: #ff2e88; color: #fff; }
.sf-bfo-dv-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-dv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }
.sf-bfo-dv-foot { flex: none; display: flex; justify-content: flex-end; padding: 12px 18px; background: #0a0414; border-top: 1px solid #ffffff1f; }
.sf-bfo-dv-load { margin: 30px 0; text-align: center; color: #cfc4e2; }
.sf-bfo-dv-sum { margin: 0 0 14px; font-size: 13px; color: #cfc4e2; }
.sf-bfo-dv-sum b { color: var(--v2-text); }
.sf-bfo-dv-zone + .sf-bfo-dv-zone { margin-top: 18px; }
.sf-bfo-dv-zone h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.sf-bfo-dv-zone h3::before { content: ''; width: 4px; height: 16px; background: #ff2e88; }
.sf-bfo-dv-zone h3 small { padding: 1px 8px; font-size: 12px; color: #00f0ff; border: 1px solid #00f0ff55; }
.sf-bfo-dv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; }
.sf-bfo-dv-grid li { position: relative; display: grid; gap: 4px; min-width: 0; }
.sf-bfo-dv-pic { display: grid; place-items: center; aspect-ratio: 63 / 88; overflow: hidden; background: #0b0416; border-radius: 5px; box-shadow: 0 4px 12px #0008; }
.sf-bfo-dv-pic img { width: 100%; height: 100%; object-fit: contain; }
.sf-bfo-dv-pic i { font: 600 10px/1.3 var(--v2-mono, monospace); font-style: normal; color: var(--v2-muted); padding: 6px; text-align: center; }
.sf-bfo-dv-qty { position: absolute; top: 6px; right: 6px; padding: 2px 7px; font: 800 12px/1.3 var(--v2-mono, monospace); color: #fff; background: #ff2e88; border-radius: 10px; box-shadow: 0 2px 6px #0009; }
.sf-bfo-dv-grid small { font-size: 11px; line-height: 1.35; color: #cfc4e2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 680px) {
  .sf-bfo-dk-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* the /decks phone tile = picture left, words right: one a row */
  .sf-bfo-dk-name { font-size: 14px; }
  .sf-bfo-dk-view { align-self: flex-start; }
  .sf-bfo-dv { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; }
  .sf-bfo-dv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
}

/* ==== new-room panel + deck tiles + deck popup: ONE calm colour system (owner 2026-10-15: "สีก็แปลก … ช่วยออกแบบหน่อย") ====
   What was wrong: pink, cyan, purple, the logo red and the flag all at the same loudness; pink meant five things; the picked
   state (thick pink + glow + tint) read as an error; frames inside frames; rounded + cut corners mixed.
   Now: the site's plain panel + one hairline; ONE decorative touch = the pink → cyan rule under the head (+ the step numbers);
   CYAN = picked / action only (2px + a small ✓, no glow, no tint); every tile has the site's cut corner; quiet grey sub-text.
   These rules sit last and win over the earlier tries above. */
.sf-bfo-maker, .sf-bfo-dv { --calm-line: #ffffff1f; --calm-line-hi: #ffffff3d; --calm-sub: #b3a9c6; --calm-tile: #ffffff06; --pick: var(--sf-action, #00f0ff); --pick-soft: transparent; }
.sf-bfo-maker { background: var(--v2-surface); border: 1px solid var(--calm-line); box-shadow: none; }
.sf-bfo-mk-head, .sf-bfo-dv-head { background: transparent; padding: 16px 18px 14px; }
.sf-bfo-mk-head::after, .sf-bfo-dv-head::after { left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, #ff2e88, #00f0ff 60%, transparent); }
.sf-bfo-mk-ic, .sf-bfo-dv-head .sf-bfo-mk-ic { width: 34px; height: 34px; background: transparent; color: #fff; border: 1px solid var(--calm-line-hi); clip-path: none; }
.sf-bfo-mk-titles h2, .sf-bfo-dv-head h2 { font-size: 17px; }
.sf-bfo-mk-titles small { color: var(--calm-sub); }
.sf-bfo-mk-x { background: transparent; border-color: var(--calm-line); }
.sf-bfo-mk-x:hover, .sf-bfo-mk-x:focus-visible { border-color: #fff; color: #fff; }
.sf-bfo-mk-body { gap: 26px; padding: 20px 18px; }
.sf-bfo-mk-foot, .sf-bfo-dv-foot { background: #ffffff05; border-top: 1px solid var(--calm-line); }
.sf-bfo-mk-note, .sf-bfo-mk-note .icon { color: var(--calm-sub); }

/* step heads: a small pink → cyan number, white words, grey count */
.sf-bfo-maker .sf-bfo-dp-h > span, .sf-bfo-dp .sf-bfo-dp-h > span { width: 22px; height: 22px; font-size: 11px; color: #0a0014; background: linear-gradient(135deg, #ff2e88, #00f0ff); }
.sf-bfo-dp-h { font-size: 15px; }
.sf-bfo-dp-h small { color: var(--calm-sub); }

/* deck tiles: the /decks tile, quiet edge; picked = cyan edge + ✓ (no glow) */
.sf-bfo-dk { --sf-edge: var(--calm-line, #ffffff1f); background: var(--calm-tile, #ffffff06); box-shadow: none; }
.sf-bfo-dk .sf-dm-meta, .sf-bfo-dk .sf-dm-meta span { color: var(--calm-sub, #b3a9c6); }
.sf-bfo-dk .sf-bfo-dp-tick { width: 26px; height: 26px; background: #0a0014b3; border: 1.5px solid #ffffff99; }
.sf-bfo-dk:has(input:checked) { --sf-edge: var(--sf-action, #00f0ff); box-shadow: none; background: var(--calm-tile, #ffffff06); }
.sf-bfo-dk:has(input:checked) .sf-bfo-dp-tick { background: var(--sf-action, #00f0ff); border-color: var(--sf-action, #00f0ff); color: #0a0014; }
.sf-bfo-dk:has(input:focus-visible) { outline-color: var(--sf-action, #00f0ff); }
@media (hover: hover) and (pointer: fine) { .sf-bfo-dk:not(:has(input:checked)):hover { --sf-edge: var(--calm-line-hi, #ffffff3d); } }
.sf-bfo-dk-view { border-color: var(--calm-line-hi, #ffffff3d); color: #fff; }

/* who may join: the same cut corner as every tile, quiet edge; picked = cyan edge, icon + ✓ (no glow, no tint) */
.sf-bfo-opt { --oc: var(--calm-line); border-radius: 0; border: 0; padding: 15px 46px 15px 15px; background: var(--calm-tile);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 0 0 1px var(--oc); }
.sf-bfo-opt::after { content: ''; position: absolute; inset: 0; pointer-events: none; color: var(--oc);
  background: var(--sf-diag) right top / 12px 12px no-repeat, var(--sf-diag) left bottom / 12px 12px no-repeat; }
.sf-bfo-opt-ic { background: #ffffff0d; color: var(--calm-sub); }
.sf-bfo-opt-tick { border-color: var(--calm-line-hi); }
.sf-bfo-opt:has(input:checked) { --oc: var(--sf-action, #00f0ff); border: 0; box-shadow: inset 0 0 0 2px var(--oc); background: var(--calm-tile); }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-ic { background: #00f0ff1a; color: var(--sf-action, #00f0ff); }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-tick { background: var(--sf-action, #00f0ff); border-color: var(--sf-action, #00f0ff); color: #0a0014; }
.sf-bfo-opt:has(input:focus-visible) { outline: 0; --oc: #fff; }
@media (hover: hover) and (pointer: fine) { .sf-bfo-opt:not(:has(input:checked)):hover { --oc: var(--calm-line-hi); } }

/* the deck popup: same calm surface; ×n badges cyan on dark, not pink */
.sf-bfo-dv { background: var(--v2-surface); border-color: var(--calm-line-hi); }
.sf-bfo-dv-zone h3::before { background: linear-gradient(#ff2e88, #00f0ff); width: 3px; }
.sf-bfo-dv-zone h3 small { color: var(--calm-sub); border-color: var(--calm-line); }
.sf-bfo-dv-qty { background: #0a0014e6; color: var(--sf-action, #00f0ff); border: 1px solid #00f0ff66; }
.sf-bfo-dv-grid small, .sf-bfo-dv-sum { color: var(--calm-sub); }
/* the /decks tile lights its edge on :hover / :focus-within (pkg-decks .sf-dm:hover, 0,2,0) — here only the PICKED tile is cyan */
.sf-bfo-dk.sf-dm:not(:has(input:checked)):focus-within { --sf-edge: var(--calm-line, #ffffff1f); }
@media (hover: hover) and (pointer: fine) { .sf-bfo-dk.sf-dm:not(:has(input:checked)):hover { --sf-edge: var(--calm-line-hi, #ffffff3d); } }
.sf-bfo-dk.sf-dm:has(input:checked) { --sf-edge: var(--sf-action, #00f0ff); }
.sf-bfo-maker .sf-bfo-dp-h > span, .sf-bfo-dp .sf-bfo-dp-h > span { color: #fff; font-weight: 800; text-shadow: 0 1px 2px #0008; }
.sf-bfo-dk.sf-dm:has(input:checked) { box-shadow: inset 0 0 0 1px var(--sf-action, #00f0ff); }

/* Buddyfight online: optional room password (owner 2026-10-15: "ควรมีแบบ set รหัสผ่านด้วย") — the field under "ใครเข้าห้องได้",
   the same field when joining a locked room, and the password box on the host's waiting page */
.sf-bfo-pw { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(160px, 220px); align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; background: #0f0720; border: 1px solid #ffffff24; border-radius: 6px; }
.sf-bfo-pw:focus-within { border-color: var(--sf-action, #00e5ff); }
.sf-bfo-pw-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff0f; color: var(--v2-muted); }
.sf-bfo-pw:focus-within .sf-bfo-pw-ic { color: var(--sf-action, #00e5ff); }
.sf-bfo-pw-ic .icon { width: 19px; height: 19px; }
.sf-bfo-pw-txt { display: grid; gap: 2px; min-width: 0; }
.sf-bfo-pw-txt b { font-size: 15px; }
.sf-bfo-pw-txt b small, .sf-bfo-pw-txt > small { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--v2-muted); }
.sf-bfo-pw .sf-input { width: 100%; min-height: 44px; font-size: 16px; letter-spacing: .06em; }
.sf-bfo-pw.is-join { margin: 14px 0 0; }
.sf-bfo-pwbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 14px; }
.sf-bfo-pwbox .sf-bfo-big { margin: 0; }
.sf-bfo-pwbox small { flex-basis: 100%; }
@media (max-width: 640px) {
  .sf-bfo-pw { grid-template-columns: 40px minmax(0, 1fr); }
  .sf-bfo-pw .sf-input { grid-column: 1 / -1; }
}

/* ==== new-room panel: a colour per JOB (owner 2026-10-15: "หน้าตาก็ดูยากเพราะสีเดียวกันเกือบหมด") ================================
   The calm version above made every part the same dark tile + hairline, so nothing told the steps apart. Now: each step is its
   own box with a bar + number in its colour (1 เลือกเด็ค cyan · 2 ใครเข้าห้องได้ pink), the two choices carry their own colour
   at rest and fill with it when picked (ทุกคน green = open, เฉพาะเพื่อน violet = private), the password is gold (a lock) and
   only shows under เฉพาะเพื่อน once "ตั้งรหัสผ่านด้วย" is ticked. The main button stays the site's cyan. Last = wins. */
.sf-bfo-maker { --c-deck: #00f0ff; --c-who: #ff2e88; --c-open: #3ee59a; --c-priv: #b48cff; --c-lock: #ffcf3d; }
.sf-bfo-maker .sf-bfo-mk-body { gap: 16px; }
.sf-bfo-step { --st: var(--c-deck); position: relative; padding: 16px 16px 18px 20px !important; background: color-mix(in srgb, var(--st) 5%, #ffffff04);
  border: 1px solid color-mix(in srgb, var(--st) 22%, transparent) !important; }
.sf-bfo-step::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--st); }
.sf-bfo-step.is-who { --st: var(--c-who); }
.sf-bfo-step > legend { float: left; width: 100%; margin-bottom: 14px; }
.sf-bfo-step > legend + * { clear: both; }
.sf-bfo-maker .sf-bfo-step .sf-bfo-dp-h > span, .sf-bfo-dp .sf-bfo-step .sf-bfo-dp-h > span { background: var(--st); color: #0a0014; text-shadow: none; }

/* the two choices: own colour at rest (icon), filled with it when picked */
.sf-bfo-opt.is-public { --on: var(--c-open); }
.sf-bfo-opt.is-private { --on: var(--c-priv); }
.sf-bfo-opt .sf-bfo-opt-ic { background: color-mix(in srgb, var(--on) 14%, transparent); color: var(--on); }
.sf-bfo-opt:has(input:checked) { --oc: var(--on); background: color-mix(in srgb, var(--on) 13%, #0f0720); }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-ic { background: var(--on); color: #0a0014; }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-tick { background: var(--on); border-color: var(--on); color: #0a0014; }
.sf-bfo-opt:has(input:checked) .sf-bfo-opt-txt b { color: var(--on); }
@media (hover: hover) and (pointer: fine) { .sf-bfo-opt:not(:has(input:checked)):hover { --oc: color-mix(in srgb, var(--on) 60%, transparent); } }

/* password: gold, only under a friends-only room, the field only once ticked (no :has support = always shown) */
.sf-bfo-lock { margin-top: 12px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--c-lock) 45%, transparent); background: color-mix(in srgb, var(--c-lock) 6%, transparent); }
.sf-bfo-lock-tick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 15px; }
.sf-bfo-lock-tick small { font-weight: 400; font-size: 12px; color: var(--calm-sub, #b3a9c6); }
.sf-bfo-lock-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-bfo-lock-box { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--c-lock) 70%, transparent); border-radius: 4px; color: transparent; }
.sf-bfo-lock-box .icon { width: 13px; height: 13px; }
.sf-bfo-lock-tick input:checked + .sf-bfo-lock-box { background: var(--c-lock); border-color: var(--c-lock); color: #0a0014; }
.sf-bfo-lock-tick input:focus-visible + .sf-bfo-lock-box { outline: 2px solid #fff; outline-offset: 2px; }
.sf-bfo-lock-ic { width: 18px; height: 18px; color: var(--c-lock); }
.sf-bfo-lock-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.sf-bfo-lock-field .sf-input { width: min(100%, 280px); min-height: 44px; font-size: 16px; letter-spacing: .06em; border-color: color-mix(in srgb, var(--c-lock) 55%, transparent); }
.sf-bfo-lock-field .sf-input:focus { border-color: var(--c-lock); outline: 0; box-shadow: 0 0 0 1px var(--c-lock); }
.sf-bfo-lock-field small { font-size: 12px; color: var(--calm-sub, #b3a9c6); }
@supports selector(:has(*)) {
  .sf-bfo-lock { display: none; }
  .sf-bfo-who:has(.is-private input:checked) .sf-bfo-lock { display: block; }
  .sf-bfo-lock-field { display: none; }
  .sf-bfo-lock:has(input[name=lock]:checked) .sf-bfo-lock-field { display: flex; }
}
/* the same gold on the join form's password box */
.sf-bfo-pw.is-join { border-color: color-mix(in srgb, #ffcf3d 45%, transparent); background: color-mix(in srgb, #ffcf3d 6%, #0f0720); }
.sf-bfo-pw.is-join .sf-bfo-pw-ic { color: #ffcf3d; background: #ffcf3d1f; }
.sf-bfo-pw.is-join .sf-input { border-color: #ffcf3d8c; }
/* the panel's own frame: a soft cyan = the สร้างห้อง button that opened it (owner 2026-10-15: "เส้นด้านนอกควรเป็นสีไหม") — weaker
   than the step boxes inside so they still lead */
.sf-bfo-fold.is-open > .sf-bfo-maker { border: 1px solid #00f0ff59; box-shadow: 0 0 0 1px #00f0ff14, 0 12px 40px -18px #00f0ff40; }
/* step 2 cyan like step 1 (owner 2026-10-15: "ชมพูเปลี่ยนเป็นสีฟ้าหรือดีกว่าไหม") — the steps are structure (box + number);
   colour is left to what means something: ทุกคน green, เฉพาะเพื่อน violet, password gold */
.sf-bfo-maker { --c-who: var(--c-deck); }

/* room tiles: password state beside the room number — green open lock / orange lock (owner 2026-10-15: "อันไหนไม่ใส่รหัสผ่านเป็น
   สีเขียว ล๊อคเป็นสีส้มดีกว่า และมี icon ด้วย"); the panel + join form password follow the same orange */
.sf-bfo-room-no:has(+ .sf-bfo-lockpill) { margin-right: 0; }
.sf-bfo-lockpill { --lk: #3ee59a; display: inline-flex; align-items: center; gap: 5px; margin-right: auto; padding: 4px 8px 4px 6px; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--lk); background: color-mix(in srgb, var(--lk) 16%, #0b0416e6); border: 1px solid color-mix(in srgb, var(--lk) 65%, transparent); }
.sf-bfo-lockpill .icon { width: 14px; height: 14px; }
.sf-bfo-lockpill.is-locked { --lk: #ff9a3d; }
.sf-bfo-maker { --c-lock: #ff9a3d; }
.sf-bfo-pw.is-join { border-color: color-mix(in srgb, #ff9a3d 45%, transparent); background: color-mix(in srgb, #ff9a3d 6%, #0f0720); }
.sf-bfo-pw.is-join .sf-bfo-pw-ic { color: #ff9a3d; background: #ff9a3d1f; }
.sf-bfo-pw.is-join .sf-input { border-color: #ff9a3d8c; }
/* "ส่วนตัว" on my own waiting room sits in the foot line (in the top row it wrapped over the avatar beside the lock badge) */
.sf-bfo-private { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 8px; border-left: 1px solid #ffffff2a; color: #b48cff; font-weight: 700; }
.sf-bfo-private .icon { width: 13px; height: 13px; }

/* waiting tiles take the password colour on the WHOLE frame: green = walk in, orange = a password is asked (owner 2026-10-15:
   "ไม่มีรหัสเป็นสีเขียวทั้งกรอบ และไม่มีไอคอนกุญแจ", "ส่วนมีรหัสเป็นสีส้ม") — replaces the world tint on these tiles; the badge only on a
   locked one. Results are plain tiles, not links ("ไม่ควรคลิ๊กไปหน้าไหนได้"). */
.sf-bfo-room.is-unlocked { --rt: #3ee59a; --bfr: color-mix(in srgb, #3ee59a 85%, transparent); }
.sf-bfo-room.is-locked { --rt: #ff9a3d; --bfr: color-mix(in srgb, #ff9a3d 85%, transparent); }
.sf-bfo-room.is-done { cursor: default; }
@media (hover: hover) and (pointer: fine) { .sf-bfo-room.is-done:hover { transform: none; --bfr: color-mix(in srgb, var(--rt) 45%, transparent); } }
/* เฉพาะเพื่อน = orange too: orange means "not everyone gets in" (owner: "ตัวนี้ควรเปลี่ยนเป็นสีส้ม") */
.sf-bfo-maker { --c-priv: #ff9a3d; }
.sf-bfo-private { color: #ff9a3d; }

/* the 6 password boxes (play/_bfo-pin) */
.sf-bfo-pin { display: flex; gap: 8px; }
.sf-bfo-pin-box { width: 46px; height: 54px; padding: 0; text-align: center; font: 800 24px/1 var(--v2-mono, monospace); color: #fff; caret-color: #ff9a3d;
  background: #0b0416; border: 1.5px solid #ff9a3d66; border-radius: 6px; transition: border-color .12s, box-shadow .12s, background .12s; }
.sf-bfo-pin-box.is-filled { border-color: #ff9a3d; background: color-mix(in srgb, #ff9a3d 10%, #0b0416); }
.sf-bfo-pin-box:focus { outline: 0; border-color: #ff9a3d; box-shadow: 0 0 0 3px #ff9a3d40; }
.sf-bfo-pin.is-wrong .sf-bfo-pin-box:not(.is-filled) { border-color: #ff5d6c; box-shadow: 0 0 0 2px #ff5d6c33; }
.sf-bfo-pin.is-full .sf-bfo-pin-box { border-color: #ff9a3d; }
.sf-bfo-pw.is-join { grid-template-columns: 40px minmax(0, 1fr) auto; }
@media (max-width: 640px) {
  .sf-bfo-pin { gap: 6px; }
  .sf-bfo-pin-box { width: 42px; height: 50px; font-size: 22px; }
  .sf-bfo-pw.is-join .sf-bfo-pin { grid-column: 1 / -1; }
}
.sf-bfo-pin-box::selection { background: transparent; color: #fff; }

/* ==== host's waiting room /play/buddyfight/online/{slug} (owner 2026-10-15: "ขอแบบสวยๆ และแยกโซนให้ดูง่ายกว่านี้") ===============
   three zones: the arena (lobby tile, bigger) | "ชวนเพื่อน" cards (link cyan · room code violet · password orange) / close row */
.sf-bfo-wroom { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "stage share" "close close"; gap: 18px; align-items: start; }
.sf-bfo-wstage { grid-area: stage; cursor: default; }
.sf-bfo-wstage .sf-bfo-arena { height: 330px; }
.sf-bfo-wstage .sf-bfo-ava { width: 84px; height: 84px; font-size: 34px; }
.sf-bfo-wstage .sf-bfo-pname { font-size: 20px; }
.sf-bfo-wstage .sf-bfo-psub { font-size: 12.5px; }
.sf-bfo-wstage .sf-bfo-vs { width: 70px; height: 70px; font-size: 26px; }
.sf-bfo-wstage .sf-bfo-room-no { font-size: 20px; padding: 7px 11px; }
.sf-bfo-tag.is-private { color: #ff9a3d; border-color: #ff9a3d77; }
@media (hover: hover) and (pointer: fine) { .sf-bfo-wstage:hover { transform: none; } .sf-bfo-wstage:hover .sf-bfo-art { transform: none; } }
.sf-bfo-wstatus { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--bfr);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rt) 12%, transparent), transparent 75%); }
.sf-bfo-wstatus > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sf-bfo-wstatus b { font-size: 15px; color: var(--rt); }
.sf-bfo-wstatus small { font-size: 12px; color: var(--v2-muted); }
.sf-bfo-wstatus .sf-bfo-dot { background: var(--rt); }
.sf-bfo-wstatus .sf-bfo-dot::after { background: var(--rt); }
.sf-bfo-wdeck { display: grid; gap: 2px; text-align: right; font-size: 13px; font-weight: 700; max-width: 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bfo-wdeck small { font-size: 11px; font-weight: 400; color: var(--v2-muted); }

.sf-bfo-share { grid-area: share; display: grid; gap: 12px; }
.sf-bfo-share-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 2px; font-size: 18px; color: var(--sf-heading, #fff); }
.sf-bfo-share-h .icon { width: 20px; height: 20px; color: #ff2e88; }
.sf-bfo-share-h small { flex-basis: 100%; font-size: 12.5px; font-weight: 400; color: var(--v2-muted); }
.sf-bfo-scard { --sc: #00f0ff; position: relative; padding: 14px 16px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 9%, #120a20), #120a20 60%);
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); box-shadow: inset 3px 0 0 var(--sc); }
.sf-bfo-scard.is-code { --sc: #b79cff; }
.sf-bfo-scard.is-pw { --sc: #ff9a3d; }
.sf-bfo-scard-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 12px; font-size: 14.5px; font-weight: 800; color: #fff; }
.sf-bfo-scard-h small { flex-basis: 100%; padding-left: 36px; font-size: 12px; font-weight: 400; color: var(--v2-muted); }
.sf-bfo-scard-no { display: grid; place-items: center; width: 26px; height: 26px; flex: none; font: 800 13px/1 var(--v2-mono, monospace); color: #0a0014; background: var(--sc); }
.sf-bfo-scard-no .icon { width: 15px; height: 15px; stroke-width: 2; }
.sf-bfo-linkrow { display: flex; gap: 8px; }
.sf-bfo-linkrow .sf-input { flex: 1; min-width: 0; min-height: 46px; font: 13px/1.2 var(--v2-mono, monospace); color: #cfe9ff; border-color: color-mix(in srgb, var(--sc) 30%, #ffffff1a); }
.sf-bfo-linkrow .button, .sf-bfo-copybtn { flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; min-height: 46px; }
.sf-bfo-linkrow .button .icon, .sf-bfo-copybtn .icon { width: 17px; height: 17px; }
.sf-bfo-copybtn { color: var(--sc); border-color: color-mix(in srgb, var(--sc) 60%, transparent); }
.sf-bfo-digitrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sf-bfo-digits { display: flex; gap: 6px; }
.sf-bfo-digits > span { display: grid; place-items: center; width: 42px; height: 52px; font: 800 28px/1 var(--v2-mono, monospace); color: #fff;
  background: #0b0416; border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); border-bottom: 3px solid var(--sc);
  text-shadow: 0 0 12px color-mix(in srgb, var(--sc) 70%, transparent); }

.sf-bfo-wclose { grid-area: close; display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed #ffffff1f; margin: 0; }
.sf-bfo-wclose span { font-size: 12.5px; color: var(--v2-muted); }

@media (max-width: 1000px) {
  .sf-bfo-wroom { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "share" "close"; }
}
@media (max-width: 560px) {
  .sf-bfo-wstage .sf-bfo-arena { height: 240px; }
  .sf-bfo-wstage .sf-bfo-ava { width: 62px; height: 62px; font-size: 26px; }
  .sf-bfo-wstage .sf-bfo-pname { font-size: 16px; }
  .sf-bfo-wdeck { display: none; }
  .sf-bfo-linkrow { flex-direction: column; }
  .sf-bfo-linkrow .button { justify-content: center; }
  .sf-bfo-digitrow { flex-direction: column; align-items: stretch; }
  .sf-bfo-digits { justify-content: space-between; }
  .sf-bfo-digits > span { width: auto; flex: 1; max-width: 46px; height: 50px; font-size: 26px; }
  .sf-bfo-digitrow .sf-bfo-copybtn { justify-content: center; }
  .sf-bfo-scard-h small { padding-left: 0; }
  .sf-bfo-wclose { justify-content: space-between; }
}

/* ==== lobby: time rules on top + "มีรหัสห้อง" on the right (owner 2026-10-15: "ควรทำให้สวย และอยู่ทางขวาไหม กติกาควรอยู่ด้านบน") ==== */
/* the rules = a popup (owner: "ย้าย กติกาไว้นี้ และทำเป็น popup"): button under the mode switch, chips stacked in the sf-modal */
.sf-bfo-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sf-bfo-rules-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--v2-muted);
  border: 1px solid #ffffff22; background: #ffffff06; transition: color .15s, border-color .15s; }
.sf-bfo-rules-btn .icon { width: 16px; height: 16px; color: #ff2e88; }
.sf-bfo-rules-btn:hover, .sf-bfo-rules-btn:focus-visible { color: var(--sf-action, #00f0ff); border-color: #00f0ff77; }
.sf-bfo-rules-dlg { width: min(520px, calc(100% - 32px)); }
.sf-bfo-rulebar { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.sf-bfo-rulebar > li { --rc: #00f0ff; display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px; color: #d9d0e6; line-height: 1.45;
  background: color-mix(in srgb, var(--rc) 7%, #120a20); border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); box-shadow: inset 3px 0 0 var(--rc); }
.sf-bfo-rulebar > li b { flex: none; min-width: 58px; font: 800 17px/1 'Noto Sans Thai', sans-serif; color: var(--rc); white-space: nowrap; }
.sf-bfo-rulebar > li.is-answer { --rc: #b79cff; }
.sf-bfo-rulebar > li.is-idle { --rc: #ff6b7d; }
@media (max-width: 900px) { .sf-bfo-head-side { align-items: flex-start; } }
.sf-bfo-bar { margin-top: 18px; }
.sf-bfo-bar .sf-bfo-join { flex: 0 1 auto; margin: 0 0 0 auto; display: flex; align-items: center; gap: 12px; }
.sf-bfo-join .sf-bfo-code-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v2-muted); }
.sf-bfo-join .sf-bfo-code-label .icon { width: 16px; height: 16px; color: #b79cff; }
.sf-bfo-join-box { display: flex; align-items: stretch; border: 1px solid #b79cff66; background: #0b0416; transition: border-color .15s, box-shadow .15s; }
.sf-bfo-join-box:focus-within { border-color: #b79cff; box-shadow: 0 0 0 3px #b79cff26; }
.sf-bfo-bar .sf-bfo-join .sf-input { width: 240px; max-width: none; flex: 1 1 auto; border: 0; background: none; box-shadow: none; outline: none; padding: 0 14px;
  font: 800 20px/1 var(--v2-mono, monospace); letter-spacing: 6px; color: #fff; }
.sf-bfo-join .sf-input::placeholder { font: 400 14px/20px 'Noto Sans Thai', sans-serif; letter-spacing: 0; color: #ffffff59; }
.sf-bfo-join-go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 18px; border: 0; font-weight: 800; color: #0a0014; background: #b79cff; }
.sf-bfo-join-go .icon { width: 16px; height: 16px; stroke-width: 2.2; }
@media (max-width: 900px) {
  .sf-bfo-bar .sf-bfo-join { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .sf-bfo-join .sf-bfo-code-label { width: 100%; }
  .sf-bfo-join-box { flex: 1 1 100%; min-width: 0; }
  .sf-bfo-bar .sf-bfo-join .sf-input { width: 0; min-width: 0; }
}
/* room code on the host page = one number, no boxes (the password keeps its boxes) */
.sf-bfo-roomcode { display: grid; gap: 4px; font: 800 34px/1 var(--v2-mono, monospace); letter-spacing: 6px; color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--sc) 70%, transparent); }
.sf-bfo-roomcode small { font: 400 11.5px/1 'Noto Sans Thai', sans-serif; letter-spacing: 0; color: var(--v2-muted); text-shadow: none; }
@media (max-width: 560px) { .sf-bfo-roomcode { font-size: 30px; text-align: center; } }
/* room page: back to the lobby, right of the heading (phones: under it) */
.sf-bfo-back { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; white-space: nowrap; }
.sf-bfo-back .icon { width: 17px; height: 17px; }

/* ==== lobby: my room first + bigger, nicer "enter" buttons (owner 2026-10-15: "ห้องที่เราสร้างจะอยู่อันดับแรกสุด และตัวใหญ่กว่าห้องปกติ
   นิดหน่อย ทำปุ่มเข้าห้องให้สวยหน่อย") ===== */
.sf-bfo-rooms-grid:not(.is-small) { display: flex; flex-wrap: wrap; align-items: flex-end; }
.sf-bfo-rooms-grid:not(.is-small) > li { flex: 0 1 340px; }
.sf-bfo-rooms-grid:not(.is-small) > li.is-mine-li { flex: 0 1 420px; }
.is-mine-li .sf-bfo-room { box-shadow: 0 0 0 1px var(--rt), 0 0 26px color-mix(in srgb, var(--rt) 35%, transparent); }
.is-mine-li .sf-bfo-arena { height: 250px; }
.is-mine-li .sf-bfo-ava { width: 72px; height: 72px; font-size: 30px; }
.is-mine-li .sf-bfo-pname { font-size: 18px; }
.is-mine-li .sf-bfo-room-no { font-size: 18px; }
.is-mine-li .sf-bfo-room-foot { padding: 13px 16px; }
@media (max-width: 720px) { .sf-bfo-rooms-grid:not(.is-small) > li, .sf-bfo-rooms-grid:not(.is-small) > li.is-mine-li { flex: 1 1 100%; } }

/* the tile's enter buttons */
.sf-bfo-go { position: relative; overflow: hidden; }
.sf-bfo-go.is-join, .sf-bfo-go.is-mine { gap: 7px; padding: 10px 14px; font-size: 13.5px; }
.sf-bfo-go.is-join { color: #04140b; background: linear-gradient(135deg, #7dffb3, #3ee59a 55%, #22c27c); box-shadow: inset 0 1px 0 #ffffff80; }
.is-locked .sf-bfo-go.is-join { background: linear-gradient(135deg, #ffc27a, #ff9a3d 55%, #f07a1a); color: #1a0a00; }
.sf-bfo-go.is-mine { color: #00121a; background: linear-gradient(135deg, #7ff8ff, #00f0ff 55%, #00b8d9); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sf-bfo-go-ic { width: 15px !important; height: 15px !important; stroke-width: 2.2; }
.sf-bfo-go::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, #ffffffb0, transparent); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .sf-bfo-room:hover .sf-bfo-go::after { opacity: 1; animation: sf-bfo-shine .6s ease forwards; }
  .sf-bfo-room:hover .sf-bfo-go.is-join, .sf-bfo-room:hover .sf-bfo-go.is-mine { filter: brightness(1.08); }
}
@keyframes sf-bfo-shine { to { left: 120%; } }

/* the bar's "เข้าห้อง" key: violet gradient, notch, shine */
.sf-bfo-join-go { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 18px 0 16px; border: 0; cursor: pointer;
  font: 800 14px/1 'Noto Sans Thai', sans-serif; color: #12002a; background: linear-gradient(135deg, #e0d2ff, #b79cff 50%, #8f6dff); box-shadow: inset 0 1px 0 #ffffff99;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: filter .15s; }
.sf-bfo-join-go::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #ffffffb0, transparent); opacity: 0; }
.sf-bfo-join-go .icon { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .18s; }
@media (hover: hover) and (pointer: fine) {
  .sf-bfo-join-go:hover { filter: brightness(1.08); }
  .sf-bfo-join-go:hover::after { opacity: 1; animation: sf-bfo-shine .6s ease forwards; }
  .sf-bfo-join-go:hover .icon:last-child { transform: translateX(3px); }
}
.sf-bfo-join-go:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.sf-bfo-join-go:active { filter: brightness(.95); }

/* one room per player: the note beside "ห้องของคุณ" */
.sf-bfo-one { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-muted); max-width: 260px; line-height: 1.4; }
.sf-bfo-one .icon { width: 15px; height: 15px; flex: none; color: #00f0ff; }
@media (prefers-reduced-motion: reduce) { .sf-bfo-go::after, .sf-bfo-join-go::after { display: none; } }
/* joining while waiting in your own room: it will close */
.sf-bfo-own-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; font-size: 13px; color: #ffd9a8;
  background: #ff9a3d14; border: 1px solid #ff9a3d55; box-shadow: inset 3px 0 0 #ff9a3d; }
.sf-bfo-own-note .icon { width: 17px; height: 17px; flex: none; color: #ff9a3d; }
/* the code box's placeholder sat ~2px low (owner: "ทำไม placeholder ไม่อยู่กลางแถว"): Chrome puts it on the baseline of the box's 20px mono
   line — so while EMPTY the box itself takes the placeholder's font; typed codes keep the big mono digits */
.sf-bfo-bar .sf-bfo-join .sf-input:placeholder-shown { font: 400 14px/1.2 'Noto Sans Thai', sans-serif; letter-spacing: 0; }
.sf-bfo-join .sf-input::placeholder { font: inherit; }
/* the "เข้าห้อง" key's notch left the box's square border poking out at the corner (owner: "ขอบมุมออกมา"): the BOX is cut now, the key
   inside it is square, and the box's border is painted back along the cut (its colour follows the box's own --jb, focus included) */
.sf-bfo-join-box { --jb: #b79cff66; position: relative; border-color: var(--jb); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.sf-bfo-join-box:focus-within { --jb: #b79cff; }
.sf-bfo-join-box::after { content: ''; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; z-index: 2; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - .8px), var(--jb) calc(50% - .8px), var(--jb) calc(50% + .8px), transparent calc(50% + .8px)); }
.sf-bfo-join-go { clip-path: none; }

/* a mode that is not built yet (ONE PIECE online, 2026-10-16) */
.sf-bfm-mode.is-soon { opacity: .55; cursor: default; }
.sf-bfm-mode.is-soon:hover { transform: none; box-shadow: none; }

/* Buddyfight online: championship decks in the deck choice (owner 2026-10-16: "สามารถเอาเด็คแชมป์มาเล่นได้") */
.sf-bfo-dk-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--v2-text, #fff); }
.sf-bfo-dk-sub small { font-size: 12px; font-weight: 400; color: var(--v2-muted, #b9aed6); }
.sf-bfo-dk-sub .icon { width: 16px; height: 16px; color: #ffcf4a; }
.sf-bfo-nodeck { margin: 0 0 14px; }
.sf-bfo-dk-grid[hidden] { display: none; }
.sf-bfo-champs { margin-top: 20px; }
.sf-bfo-champs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.sf-bfo-champs-head .sf-bfo-dk-sub { margin: 0; }
.sf-bfo-champs-q { position: relative; flex: 0 1 300px; min-width: 200px; }
.sf-bfo-champs-q .icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; color: var(--v2-muted, #b9aed6); pointer-events: none; }
.sf-bfo-champs-q .sf-input { width: 100%; min-height: 40px; padding-left: 36px; }
/* a scrolling grid: ~190 decks would otherwise push "who may join" far down */
.sf-bfo-champ-grid { max-height: min(460px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 4px 2px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); scrollbar-width: thin; scrollbar-color: #ff2e8899 transparent; }
.sf-bfo-champ-grid > li[hidden] { display: none; }
.sf-bfo-champ { --ct: #00f0ff; position: relative; border-top: 3px solid var(--ct); }
.sf-bfo-champ .sf-bfo-dp-art { position: relative; aspect-ratio: 16 / 10; }
.sf-bfo-champ .sf-bfo-dp-txt b { font-size: 14px; }
.sf-bfo-champ-meta { color: #d9cff0 !important; }
.sf-bfo-champ-place { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: #0b0416d9; color: #fff; border: 1px solid #ffffff40; }
.sf-bfo-champ-place.is-gold { background: #ffcf4a; color: #2a1a00; border-color: #ffcf4a; }
.sf-bfo-champ-place.is-silver { background: #d9dde6; color: #1a1d24; border-color: #d9dde6; }
.sf-bfo-champ-place.is-bronze { background: #d98a4a; color: #2a1200; border-color: #d98a4a; }
@media (max-width: 680px) {
  .sf-bfo-champs-q { flex-basis: 100%; }
  .sf-bfo-champ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 58vh; }
}