@import url("lobby.css");
/* The game rooms (Lock Breaker, Checkers, Dominoes): the lobby and pages, and the HUD over
   the 3D scene. The site's dark glass and gold, as in Ship Sinker. Each game adds its own
   small stylesheet for the things only it has. */
:root {
  --glass: rgba(9, 12, 17, 0.66);
  --line: rgba(220, 232, 255, 0.12);
  --ink: #ecebe6;
  --mute: #a3a7ad;
  --gold: #d9b26b;
  --gold-2: #f1d59a;
  --tile: rgba(11, 14, 20, 0.84);
  --hit: #ff6a3d;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #040506; color-scheme: dark; overflow: hidden; color: var(--ink); font-family: var(--font); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
#hud[hidden] { display: none; }
#hud button, #hud .menu-list, #hud .over, #hud .chat, #hud input { pointer-events: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.gu-nav { background: linear-gradient(180deg, #040506f2, #080a0ecc); border-bottom-color: rgba(217,178,107,0.18); }
.nogl { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink); font-size: 16px; line-height: 1.6; }

/* ================================================================ the lobby */
/* the dimming over the scene is on the lobby layer itself, so it is there from the first frame */
#lobby { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 40%, rgba(4,5,8,0.12), rgba(4,5,8,0.82) 70%), linear-gradient(180deg, rgba(4,5,8,0.55), rgba(4,5,8,0.18) 40%, rgba(4,5,8,0.78)); }
.lobby { min-height: 100%; padding: calc(84px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
.lobby-main { width: min(1040px, 100%); margin: 0 auto; }
@media (max-width: 820px) { .lobby { padding-top: calc(76px + env(safe-area-inset-top, 0px)); } }

/* the buttons and rows of choices the room's pages and the table share (the desk's own are lobby.css's) */
.segs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.segs.wrap { flex-wrap: wrap; border-radius: 16px; }
.seg { appearance: none; border: 0; background: transparent; color: var(--ink); padding: 7px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; }
.seg[aria-pressed=true] { background: rgba(217,178,107,0.2); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(217,178,107,0.55); }
.seg:focus-visible, .go:focus-visible, .fold summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.go { appearance: none; display: inline-block; margin-top: 12px; padding: 11px 22px; border-radius: 10px; border: 0; font-size: 15px; font-weight: 600; text-decoration: none;
  color: #1d150a; background: linear-gradient(180deg, #f1d59a, #c99b4f); box-shadow: 0 6px 18px rgba(201,155,79,0.25); }
.go:hover { filter: brightness(1.06); }
.go:disabled { opacity: .55; cursor: progress; }
.go.quiet { background: transparent; color: var(--gold-2); border: 1px solid rgba(217,178,107,0.45); box-shadow: none; }
.go.quiet:hover { background: rgba(217,178,107,0.12); }
.go.small { margin: 0; padding: 7px 14px; font-size: 13px; }
.go.danger { background: linear-gradient(180deg, #f0a58b, #c8553a); color: #1c0905; box-shadow: 0 6px 18px rgba(200,85,58,0.25); }
.fold { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; margin-bottom: 12px; }
.fold summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--gold-2); list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "+ "; color: var(--gold); }
.fold[open] summary::before { content: "− "; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.field label { font-size: 13px; color: var(--mute); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #d6d4cc; margin: 10px 0 2px; line-height: 1.4; }
.check input { margin-top: 2px; accent-color: var(--gold); }
.pulse { animation: pulse 2.4s ease-in-out infinite; color: var(--mute) !important; }
@keyframes pulse { 50% { opacity: .45; } }
.go.start { min-width: 160px; padding: 12px 24px; font-size: 16px; }

/* ================================================================ the room's pages */
.room-page { padding-bottom: 24px; }
.room-page .shop-title { font: 400 34px/1.1 var(--gu-serif); color: #f6ecd8; margin: 34px 0 6px; }
.shop-section { margin: 0 0 14px; }
.shop-section h2 { font: 400 26px/1.1 var(--gu-serif); color: #f6ecd8; margin: 0 0 4px; }
.shop-section > .fine { margin: 0 0 12px; color: var(--mute); font-size: 13px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.shop-item { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(11,14,20,0.84); border: 1px solid rgba(217,178,107,0.18); }
.shop-item.on { border-color: rgba(217,178,107,0.6); box-shadow: inset 0 0 0 1px rgba(217,178,107,0.25); }
.shop-text strong { display: block; font-size: 15px; color: #f6ecd8; }
.shop-text span { display: block; font-size: 13px; color: var(--mute); line-height: 1.45; margin-top: 2px; }
.shop-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.shop-act small { color: var(--mute); font-size: 12px; }
.shop-act .using { color: var(--gold-2); font-size: 13px; letter-spacing: .06em; }
.shop-act .go:disabled { opacity: .45; cursor: not-allowed; }
.swatch { border-radius: 10px; position: relative; overflow: hidden; }
.page-toast { position: fixed; z-index: 7; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 9px 18px; border-radius: 999px; background: rgba(11,14,20,0.94); border: 1px solid rgba(217,178,107,0.35); color: var(--gold-2); font-size: 14px; transition: opacity .25s, transform .25s; }
.page-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================ at the table */
.menu-wrap { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); z-index: 4; }
.burger { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 46px; height: 46px; padding: 0 13px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.burger span { display: block; height: 2px; border-radius: 1px; background: var(--ink); }
.burger[aria-expanded=true] { border-color: rgba(217,178,107,0.6); }
.burger.unread::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.menu-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px; min-width: 190px; border-radius: 12px; background: rgba(9,11,15,0.95); border: 1px solid var(--line); }
.menu-list button { text-align: left; padding: 11px 14px; border-radius: 9px; border: 0; background: transparent; font-size: 14px; }
.menu-list button:hover, .menu-list button:focus-visible { background: rgba(217,178,107,0.12); outline: 0; }
.menu-list .danger { color: #ffc2ae; }

.score { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 6px; align-items: stretch; z-index: 3; }
.side { min-width: 210px; padding: 8px 12px 9px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, box-shadow .3s; }
.side.turn { border-color: rgba(217,178,107,0.7); box-shadow: 0 0 0 1px rgba(217,178,107,0.25), 0 0 22px rgba(217,178,107,0.15); }
.side .who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.side .who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.side .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.side.turn .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.side .away { color: #f0b39f; font-size: 11px; }
.side .acc { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.clock { align-self: flex-end; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.clock.mine { color: var(--gold-2); border-color: rgba(217,178,107,0.5); }
.clock.low { color: #ffd0bd; border-color: rgba(220,90,60,0.7); background: rgba(80,20,10,0.6); }

.dock-wrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; }
.dock { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dock:empty { display: none; }
.dock .go { margin: 0; white-space: nowrap; }
.dock .go.quiet { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.status { max-width: 100%; padding: 8px 16px; border-radius: 18px;
  font-size: 14px; color: #dcdad3; background: var(--glass); border: 1px solid var(--line); text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.status:empty { display: none; }

.banner { position: absolute; top: 24%; left: 50%; transform: translate(-50%, -8px) scale(.96); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  font: 400 clamp(30px, 6vw, 56px)/1.05 var(--gu-serif); text-align: center; color: #f6ecd8; text-shadow: 0 4px 30px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); max-width: 90vw; }
.banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.banner.good { color: #ffd98f; }
.banner.big { color: #ffcf7a; letter-spacing: .01em; font-size: clamp(36px, 7vw, 68px); }
.banner.bad { color: #ff9f8a; }
.banner.info { color: #dfe6ee; font-size: clamp(24px, 4vw, 38px); }
.toast { position: absolute; top: calc(78px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -8px); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; background: rgba(9,11,15,0.92); border: 1px solid rgba(217,178,107,0.35); color: var(--gold-2); font-size: 14px; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.coord { position: fixed; left: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: rgba(9,11,15,0.88); border: 1px solid rgba(217,178,107,0.45); color: var(--gold-2); font: 600 13px var(--font); pointer-events: none; }

.over { position: absolute; inset: 0; display: flex; overflow-y: auto; padding: 16px 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); z-index: 5; }
.over .card, .handover .card { margin: auto; width: min(520px, calc(100vw - 32px)); padding: 28px 30px 24px; border-radius: 18px; background: rgba(10,13,18,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(217,178,107,0.28); box-shadow: 0 30px 80px rgba(0,0,0,.6); text-align: center; }
.over h2, .handover h2 { font: 400 34px/1.1 var(--gu-serif); margin: 4px 0 10px; color: #f6ecd8; }
.over p, .handover p { color: #d6d4cc; line-height: 1.55; font-size: 15px; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.result.lost .eyebrow { color: #f0a58b; }
.result.drawn .eyebrow { color: #cfd6de; }
.over .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.over .tally { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 6px; }
.over .tally div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.over .tally dt { font-size: 11px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; }
.over .tally dd { margin: 4px 0 0; font-size: 17px; color: #f6ecd8; }
.over .earned { list-style: none; margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: rgba(217,178,107,0.1); border: 1px solid rgba(217,178,107,0.3); color: var(--gold-2); font-size: 14px; }
.over .earned li { margin: 3px 0; }
.over .earned li:first-child { font-weight: 700; font-size: 17px; }
.result .medal { width: 64px; height: 64px; margin: -6px auto 8px; display: grid; place-items: center; border-radius: 50%; font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #d9a54e 55%, #8a5d1f); color: #2a1a06; box-shadow: 0 6px 24px rgba(217,165,78,0.45), inset 0 -3px 6px rgba(0,0,0,0.3); }
.result.won .medal { animation: medal 1.1s cubic-bezier(.2,1.6,.4,1) both; }
.result.lost .medal, .result.drawn .medal { background: radial-gradient(circle at 35% 30%, #c9ced6, #6b7380 55%, #2c3139); color: #10141a; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
@keyframes medal { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.result.won .card { border-color: rgba(217,178,107,0.6); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(217,178,107,0.18); }
.over .go.big { padding: 13px 26px; font-size: 16px; }
.over .row.links { margin-top: 14px; gap: 18px; }
.over .link { border: 0; background: none; padding: 4px 2px; color: var(--gold-2); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(241,213,154,0.4); text-underline-offset: 3px; }
.over .link:hover { text-decoration-color: currentColor; }
.after-bar { display: flex; gap: 10px; }
.after-bar .go { margin: 0; white-space: nowrap; }
.after-bar .go.quiet { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.over.help .card { text-align: left; }
.over.help h3 { margin: 18px 0 6px; font-size: 14px; color: var(--gold-2); letter-spacing: .08em; text-transform: uppercase; }
.over.help ul { margin: 0; padding-left: 18px; color: #d6d4cc; line-height: 1.55; font-size: 14px; }
.over.help .go { display: block; margin: 18px auto 0; }
.over.ask { z-index: 6; }
.handover { position: absolute; inset: 0; display: flex; z-index: 6; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 40%, #16120c, #030406) #030406; }
.handover .card { background: rgba(14,18,26,0.92); }

.chat { position: absolute; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(70px + env(safe-area-inset-top, 0px)); width: min(320px, calc(100vw - 24px)); max-height: 44vh; display: flex; flex-direction: column;
  border-radius: 12px; background: rgba(9,11,15,0.92); border: 1px solid var(--line); overflow: hidden; z-index: 4; }
.chat header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--gold-2); }
.chat-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mute); }
.chat-log { list-style: none; margin: 0; padding: 10px 12px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.45; user-select: text; }
.chat-log li { margin: 4px 0; overflow-wrap: anywhere; }
.chat-log b { color: var(--gold-2); font-weight: 600; }
.chat-log li.mine b { color: var(--mute); }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--ink); font: 13px var(--font); }

/* phones: a smaller scoreboard, room for the thumb */
@media (max-width: 640px), (max-height: 520px) {
  .side { min-width: 0; padding: 6px 10px 7px; }
  .side .who { font-size: 13px; }
  .side .who strong { max-width: 110px; }
    .side .acc { display: none; }
  .status { font-size: 13px; padding: 7px 13px; }
  .dock { gap: 8px; }
  .dock .go { padding: 10px 14px; font-size: 14px; }
  .over h2, .handover h2 { font-size: 28px; }
  .over .card, .handover .card { padding: 22px 20px 20px; }
}
@media (max-height: 520px) {
  .score { flex-direction: row; align-items: flex-start; }
  .banner { top: 18%; }
}
/* portrait phones: the two players side by side in one row beside the menu button */
@media (max-width: 560px) and (orientation: portrait) {
  .score { left: calc(66px + env(safe-area-inset-left, 0px)); flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .side { flex: 1 1 0; min-width: 0; padding: 6px 9px; }
  .side .who strong { max-width: 100%; }
      .clock { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .toast, .banner, .side { transition: none; } }

/* a little preview of an item in the collection */
.swatch { height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #0d0f13; border: 1px solid rgba(255,255,255,0.06); }

/* choosing a level on a ladder of chapters (games/common/src/levels.ts) */
.levels { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); }
.levels-head strong { display: block; color: var(--gold-2); font-weight: 600; }
.levels-head span { color: var(--mute); font-size: 13px; }
.level-chapters { position: relative; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.level-chapter { flex: 0 0 auto; scroll-snap-align: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #f6ecd8; display: grid; place-items: center; position: relative; overflow: hidden; cursor: pointer; font: inherit; }
.level-chapter b { font: 600 15px/1 var(--gu-serif); position: relative; }
.level-chapter i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--done); background: linear-gradient(90deg, #b8892f, #f0d08a); }
.level-chapter.here { border-color: rgba(217,178,107,.55); }
.level-chapter.on { background: rgba(217,178,107,.22); border-color: var(--gold); }
.level-chapter:disabled { opacity: .35; cursor: default; }
.level-title { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.level-title strong { font: 400 17px var(--gu-serif); color: #f6ecd8; }
.level-title span { font-size: 12px; color: var(--mute); }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.level { min-height: 44px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--mute); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; }
.level.done { color: #f6ecd8; border-color: rgba(217,178,107,.35); background: rgba(217,178,107,.1); }
.level.done::after { content: ' ✓'; color: var(--gold); font-size: 11px; }
.level.here { color: #1b1206; background: linear-gradient(180deg, #f1d59a, #d9b26b); border-color: var(--gold-2); }
.level:disabled { opacity: .4; cursor: default; }
.level:not(:disabled):active, .level-chapter:not(:disabled):active { transform: translateY(1px); }
.level:focus-visible, .level-chapter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }