@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../assets/fonts/bitter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../assets/fonts/bitter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/source-sans-3-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/source-sans-3-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  color-scheme: dark;
  --accent: #e7be72; --text: #f5eddd; --muted: #c5b6a0; --line: #70583c;
  --wood: #21160f; --raised: #302218; --ink: #17100c; --petrol: #244d47;
  --glass: #241910; --glass2: #302218;
  --edge: 6px; --panel-edge: 10px; --shadow: 0 8px 28px #10090566;
  --kilim: repeating-linear-gradient(135deg, #a25137 0 7px, #c79d56 7px 10px, #294e48 10px 17px, #291d14 17px 20px);
  --panel-top: 104px; --panel-bottom: 174px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #110c08; color: var(--text); font: 16px/1.4 'Source Sans 3', 'Segoe UI', sans-serif; overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-family: 'Bitter', Georgia, serif; font-weight: 600; line-height: 1.25; }
h2 { font-size: 23px; } h3 { font-size: 18px; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hidden { display: none !important; }
.muted, .hint, small { color: var(--muted); }
.btn { min-height: 40px; padding: 8px 14px; border: 1px solid #efcf8c; border-radius: var(--edge); background: linear-gradient(#efd195, #d7aa5a); color: #24170b; font-weight: 700; box-shadow: inset 0 1px #fff4ce77, 0 2px 0 #130c0899; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn.ghost { color: var(--text); background: #34271c; border-color: var(--line); box-shadow: inset 0 1px #ffffff08; }
.btn.ghost[aria-expanded=true], .btn.ghost.has-message { border-color: var(--accent); color: var(--accent); background: #46331d; }
.btn.small { min-height: 32px; padding: 4px 9px; font-size: 14px; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.finish { background: linear-gradient(#f5d699, #e3b154); }
input[type=text], input[type=number], select { min-width: 0; width: 100%; color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: var(--edge); padding: 10px 12px; }
input::placeholder { color: #b5a793; opacity: 1; }
input[type=range], input[type=checkbox] { accent-color: var(--accent); }
select { padding: 7px; font-size: 14px; }
.row { display: flex; gap: 8px; margin-top: 8px; } .row > * { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hint { font-size: 13px; line-height: 1.4; margin-top: 8px; }
kbd { display: inline-block; padding: 3px 4px; color: var(--accent); background: #19110c; border: 1px solid #8a6b3f; border-bottom-width: 2px; border-radius: 3px; font: 600 10px/1 ui-monospace, monospace; vertical-align: 1px; white-space: nowrap; }
.btn:not(.ghost) kbd { color: #291c0a; background: #b88b3b55; border-color: #856224; }

/* A table invitation, with the same wood and woven edge as the room. */
#start { position: fixed; inset: 0; overflow: auto; display: flex; padding: 24px; background: radial-gradient(ellipse at 50% 30%, #50322155, transparent 65%), repeating-linear-gradient(92deg, #23170f 0, #291b12 2px, #24180f 5px, #24180f 70px); }
.card { position: relative; flex: none; width: min(476px, 100%); padding: 32px; background: var(--wood); border: 1px solid var(--line); border-radius: var(--panel-edge); box-shadow: var(--shadow), inset 0 0 0 4px #ffffff03; }
#start .card { margin: auto; border-top: 0; }
#start .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: var(--kilim); border-radius: 10px 10px 0 0; }
.card h1 { color: var(--accent); font-size: 44px; letter-spacing: -.04em; margin: 6px 0 10px; }
.card p.sub { color: var(--muted); margin: 0 0 22px; max-width: 38ch; }
.card label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; }
#code { text-transform: uppercase; letter-spacing: .2em; font-family: ui-monospace, monospace; }
#b-join { flex: 0 0 108px; }
.msg { min-height: 18px; margin-top: 12px; color: #ffc2a6; font-size: 14px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--edge); overflow: hidden; }
.seg button { min-height: 44px; padding: 8px 6px; border: 0; background: var(--ink); color: var(--muted); }
.seg button.on { background: #66502c; color: #fff1d5; font-weight: 700; }

/* Room chrome stays around the table rather than in its center. */
#stage { position: fixed; inset: 0; }
#stage canvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#topbar { position: fixed; z-index: 30; top: 10px; left: 12px; right: 12px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.pill { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--edge); background: var(--wood); font-size: 14px; }
.pill strong { font-family: 'Bitter', Georgia, serif; color: var(--accent); }
.pill.views { justify-self: end; }
#wallet { color: var(--accent); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
#roomwrap { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.code { background: var(--ink); padding: 3px 6px; font: 700 14px ui-monospace, monospace; letter-spacing: .12em; border-radius: 3px; }
#okeyinfo { display: flex; align-items: center; gap: 3px; font-size: 13px; }
#fps { color: var(--muted); font: 11px ui-monospace, monospace; white-space: nowrap; }
#status { grid-row: 2; grid-column: 1 / -1; justify-self: center; max-width: min(620px, calc(100vw - 600px)); padding: 5px 14px; border: 1px solid var(--line); border-radius: var(--edge); color: var(--text); background: var(--wood); font-size: 15px; text-align: center; }
#status.mine { color: var(--accent); border-color: var(--accent); }
.panel { position: fixed; z-index: 35; top: var(--panel-top); width: 248px; max-height: calc(100dvh - var(--panel-top) - var(--panel-bottom)); overflow: auto; scrollbar-width: thin; padding: 15px; background: var(--wood); border: 1px solid var(--line); border-radius: var(--panel-edge); box-shadow: var(--shadow); }
#sec-rules { left: 12px; }
#right { position: fixed; right: 12px; top: var(--panel-top); bottom: 14px; width: 278px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#right > .panel { position: static; width: 100%; max-height: none; pointer-events: auto; flex: none; }
#right > #sec-shisha { flex: 0 1 auto; min-height: 120px; }
#right > #sec-music { margin-top: auto; }
.panel h3 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.panel h3 small { font: 12px 'Source Sans 3', sans-serif; white-space: nowrap; }
.panel .btn { font-size: 14px; padding: 7px 8px; }
#sh-fill, #d-pour { grid-column: 1 / -1; }
.panel-close { display: none; position: sticky; top: 0; float: right; margin: 0 0 10px 8px; z-index: 2; }
body.panels-off .panel { display: none; }
body[data-panel=rules] #sec-rules, body[data-panel=shisha] #sec-shisha, body[data-panel=music] #sec-music, body[data-panel=legend] #legend, body[data-panel=inventory] #inventory { display: block; }
body[data-panel=rules] #sec-rules > .panel-close, body[data-panel=shisha] #sec-shisha > .panel-close, body[data-panel=music] #sec-music > .panel-close, body[data-panel=legend] #legend > .panel-close { display: block; float: none; margin: 0 0 12px auto; width: max-content; }
body[data-panel=legend] #legend { max-height: calc(100dvh - 400px); }
#legend { padding: 10px 14px; }
#legend details { margin: 0; }
#legend summary { font-weight: 600; color: var(--text); }
.keys { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; align-items: center; font-size: 13px; margin-top: 12px; }
.keys kbd { justify-self: start; } .keys span { overflow-wrap: anywhere; }
#panel-nav { position: fixed; z-index: 63; bottom: 12px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px; background: var(--wood); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); width: min(570px, calc(100vw - 600px)); }
#panel-nav .btn { min-height: 44px; padding: 5px; font-size: 14px; white-space: nowrap; }
#panel-nav kbd { display: none; }
#actions { position: fixed; z-index: 40; left: 50%; bottom: 82px; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: min(780px, calc(100vw - 610px)); }
#actions .btn { font-size: 14px; padding: 8px 10px; }
#round-start { position: fixed; z-index: 44; left: 50%; bottom: 82px; transform: translateX(-50%); }
#actions:not(:empty) + #round-start { bottom: 132px; }
#round-start .btn { min-width: 160px; }
body.standing #actions { display: none; }
#log { position: fixed; left: 14px; bottom: 20px; max-width: 270px; font-size: 13px; color: #f9eedc; text-shadow: 0 1px 3px #000, 0 0 8px #000; pointer-events: none; }
#log div { opacity: .75; } #log div:last-child { opacity: 1; }
.plist div { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px; border-radius: 3px; }
.plist .pr { padding: 0; flex: none; } .plist small { font-size: 12px; }
.plist div.turn { background: #66502c; }
.opt { display: flex; gap: 8px; align-items: start; padding: 5px 0; font-size: 15px; }
.opt input { margin: 5px 0 0; } .opt small { display: block; font-size: 12px; }
.panel .mix { font-size: 15px; min-height: 20px; margin-bottom: 8px; }
.glabel { font-size: 12px; color: var(--muted); }
.gauge { height: 6px; border-radius: 3px; background: var(--ink); overflow: hidden; margin: 4px 0 9px; }
.gauge.big { height: 8px; } .gauge i { display: block; height: 100%; }
.g-heat { background: linear-gradient(90deg, #a74c2f, #eaa464); } .g-fill { background: var(--petrol); }
.coals { color: #efa76d; letter-spacing: 1px; } .coals s { text-decoration: none; color: #7e7062; }
.warn { font-size: 14px; color: #ffd4b4; background: #583124; border-left: 3px solid #c1794c; padding: 6px 8px; margin: 6px 0; }
.holder { font-size: 14px; margin: 5px 0; }
.tea { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.tea .gauge { flex: 1; margin: 0; }
details { margin-top: 10px; } summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.chip { min-height: 44px; padding: 5px 2px; font-size: 18px; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: var(--edge); background: #34271c; }
.chip span { font-size: 11px; color: var(--text); max-width: 100%; }
.chip.mine { border-color: var(--accent); background: #594020; }
.np { display: flex; gap: 10px; align-items: center; } .np > div { min-width: 0; }
.np img { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; }
.np b { display: block; font-family: 'Bitter', Georgia, serif; font-size: 16px; } .np small { font-size: 12px; }
.lyrics { margin: 8px 0; min-height: 20px; font-size: 14px; line-height: 1.35; text-align: center; color: var(--muted); }
.lyrics .hi { color: var(--accent); font-weight: 700; }
.mctl { display: flex; gap: 5px; align-items: center; margin: 8px 0; }
.mctl .btn { flex: none; min-width: 34px; padding: 4px 6px; }
.mctl input { width: 100%; min-width: 30px; }
#m-pick { width: 100%; }

/* Private belongings: stitched leather outside, a working phone inside. */
#inventory { top: auto; right: 306px; bottom: var(--panel-bottom); width: 316px; max-height: calc(100dvh - var(--panel-top) - var(--panel-bottom)); z-index: 62; padding: 16px; background: repeating-linear-gradient(35deg, #ffffff02 0 1px, transparent 1px 5px), #3c291d; border: 1px solid #92714b; outline: 1px dashed #b3936855; outline-offset: -7px; border-radius: 12px; }
.bag-top, .inv-heading, .menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bag-top { position: sticky; top: -16px; z-index: 3; padding: 6px 0 12px; border-bottom: 2px solid #1f150e; font-size: 13px; color: var(--muted); background: #3c291d; }
.inv-heading { margin-top: 16px; } .inv-heading h2 { font-size: 22px; }
.inv-pack { margin-top: 12px; padding: 12px; border: 1px solid #957347; border-radius: var(--edge); background: #251b14; box-shadow: inset 3px 0 #b28a4f; }
.inv-pack > small { display: block; margin: 3px 0 6px; }
.pack-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pack-label > span { color: var(--accent); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pack-label small { font-size: 13px; }
.phone { padding: 12px 7px 9px; margin: 16px auto 0; max-width: 290px; background: #131714; border: 2px solid #7f8376; border-radius: 28px; box-shadow: inset 0 0 0 2px #000, 0 6px 15px #100c0a88; }
.phone-speaker { height: 4px; width: 44px; margin: 0 auto 12px; border-radius: 4px; background: #5d6258; }
.phone-screen { padding: 12px; min-height: 320px; border-radius: 16px; background: #20332e; }
.phone-screen .inv-heading { margin: 0 0 15px; padding-bottom: 12px; border-bottom: 1px solid #668477; }
.phone-screen .btn { background: #304b40; border-color: #829584; font-size: 13px; white-space: normal; }
.phone-screen small, .phone-screen .hint { color: #c3d0c1; }
.phone-contact { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; color: var(--text); background: transparent; text-align: left; }
.phone-contact b, .phone-contact small { display: block; } .phone-contact > span:last-child { margin-left: auto; }
.contact-initial { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #526e56; font-family: 'Bitter', Georgia, serif; }
.phone-chat { min-height: 160px; }
.chat-bubble { width: fit-content; max-width: 92%; border-radius: 8px 8px 8px 2px; background: #374a40; padding: 9px 10px; font-size: 14px; }
.chat-bubble.own { margin-left: auto; border-radius: 8px 8px 2px 8px; background: #526444; }
.chat-bubble small { display: block; text-align: right; font-size: 11px; margin-top: 5px; color: var(--text); }
.chat-status { font-size: 13px; color: #c3d0c1; }
.payment { padding: 10px 0 10px 10px; border-left: 2px solid var(--accent); font-size: 13px; } .payment b { display: block; color: var(--accent); }
.phone-home { height: 3px; width: 64px; margin: 9px auto 0; border-radius: 4px; background: #8b9085; }

/* Ayca's menu uses one price column, and keeps recovery apart from ordering. */
#ayca-menu { position: fixed; z-index: 64; left: 50%; top: var(--panel-top); transform: translateX(-50%); width: 352px; max-height: calc(100dvh - var(--panel-top) - var(--panel-bottom)); overflow: auto; padding: 20px; background: var(--wood); border: 1px solid var(--line); border-top: 5px solid #a5753e; border-radius: var(--panel-edge); box-shadow: var(--shadow); }
.menu-heading h2 { color: var(--accent); font-size: 30px; } .menu-heading span { color: var(--muted); font-size: 14px; }
.menu-heading { position: sticky; top: -20px; z-index: 3; padding: 8px 0; background: var(--wood); }
#ayca-menu h3 { font: 600 14px 'Source Sans 3', sans-serif; color: var(--muted); margin: 16px 0 8px; }
.service-status { padding: 10px 12px; margin: 14px 0; border-left: 3px solid var(--accent); background: #302218; font-size: 14px; }
.service-status small { display: block; }
.order-list { display: grid; gap: 5px; }
.order-list .btn { display: flex; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 12px; text-align: left; }
.order-list b { color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; } .order-list small { font-size: 13px; }
.service-reset { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.service-reset .hint { display: block; }

/* Transient information and results. */
#cross { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: #fff4e4; box-shadow: 0 0 0 1.5px #0008; pointer-events: none; display: none; }
body.mouselook #cross { display: block; }
body.standing:not(.mouselook) #cross { display: block; top: auto; bottom: 142px; transform: translateX(-50%); width: auto; height: auto; padding: 5px 10px; border-radius: var(--edge); background: var(--wood); border: 1px solid var(--line); box-shadow: none; font-size: 13px; }
body.standing:not(.mouselook) #cross::after { content: 'Maus frei · Tab: umschauen'; }
body[data-panel]:not([data-panel='']) #cross { display: none; }
#lung { position: fixed; left: 50%; bottom: 160px; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); padding: 9px 12px; border-radius: var(--edge); background: #16100ced; border: 1px solid var(--line); z-index: 66; pointer-events: none; font-size: 12px; }
#lung .breath-gauge { height: 4px; background: #49382c; margin-bottom: 7px; }
#lung i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d9d2c8, #fff); }
#lung .breath-hint { display: block; margin-top: 4px; color: var(--muted); }
.ring-pulse { display: inline-block; width: 12px; height: 12px; border: 2px solid #8d795e; border-radius: 50%; margin-right: 9px; vertical-align: -2px; transform: scale(calc(1 + var(--pulse) * .2)); }
#lung[data-bright="true"] .ring-pulse { border-color: #f6d79a; box-shadow: 0 0 8px #d6aa6155; }
/* An open table owns the lower screen: the breath meter moves aside instead of covering seats or buttons. */
.board-view #lung, body:has(#f4f:not(.hidden)) #lung { top: 64px; bottom: auto; left: auto; right: 16px; transform: none; width: 240px; z-index: 70; }
@media (max-width: 600px) { .board-view #lung, body:has(#f4f:not(.hidden)) #lung { top: 124px; width: 200px; } }
#emotes { position: fixed; top: var(--panel-top); left: 50%; transform: translateX(-50%); z-index: 65; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px; max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--panel-top) - 20px); overflow: auto; background: var(--wood); border: 1px solid var(--line); border-radius: var(--panel-edge); }
#emotes .btn { text-align: left; }
#tip { position: fixed; z-index: 67; background: var(--raised); border: 1px solid var(--line); border-radius: var(--edge); padding: 5px 9px; font-size: 14px; pointer-events: none; }
#toast { position: fixed; left: 50%; bottom: 155px; transform: translateX(-50%); background: #45251b; border: 1px solid #d9906d; color: #ffe0cd; padding: 9px 16px; border-radius: var(--edge); z-index: 80; max-width: 90vw; }
#toast.good { background: #203b30; border-color: #91b395; color: #ecf4df; }
#over { position: fixed; inset: 0; background: #100b08bb; display: grid; place-items: center; z-index: 75; padding: 16px; }
#over .card { width: min(640px, 100%); max-height: 90dvh; overflow: auto; border-top: 5px solid var(--accent); }
#over h2 { color: var(--accent); }
.hrow { margin-top: 14px; } .hand { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.tile { display: inline-grid; place-items: center; width: 24px; height: 33px; border-radius: 4px; background: linear-gradient(160deg, #fffaf0, #efe5cc); box-shadow: 0 2px 0 #b9a77c; font-weight: 700; font-size: 15px; }
.tile.c0 { color: #c8262a; } .tile.c1 { color: #1f4fc6; } .tile.c2 { color: #1b1b1b; } .tile.c3 { color: #976200; }
.tile.joker { color: #2a7a3b; } .tile.wild { outline: 2px solid var(--accent); }
.tile.mini { width: 19px; height: 26px; font-size: 12px; border-radius: 3px; box-shadow: 0 1.5px 0 #b9a77c; }
.tile.big { width: 26px; height: 35px; font-size: 16px; position: relative; margin-left: 4px; vertical-align: middle; }
.tile.big::after { content: '★'; position: absolute; top: -1px; right: 1px; font-size: 8px; color: #e0a000; }

/* Existing canvas table and physical board keep their controls. */
#f4f { position: fixed; inset: 0; z-index: 65; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; perspective: 1300px; perspective-origin: 50% 0; background: radial-gradient(ellipse at 50% 60%, #2b1f14ee, #100c08fa); }
#f4f canvas { aspect-ratio: 1; margin-bottom: 1vh; transform-origin: 50% 100%; touch-action: none; border-radius: 26px; box-shadow: 0 0 0 12px #121212, 0 0 0 15px #3a3a3a, 0 30px 120px #000; }
#f4f-bar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
#f4f-hint { position: absolute; top: 18px; left: 18px; color: var(--muted); font-size: 12px; }
#board-controls { position: fixed; z-index: 60; left: 18px; top: 92px; width: min(330px, 32vw); max-height: calc(100dvh - 115px); overflow: auto; padding: 20px; color: var(--text); background: var(--wood); border: 1px solid var(--line); border-top: 5px solid #a5753e; border-radius: var(--panel-edge); box-shadow: var(--shadow); }
.board-heading { display: flex; gap: 8px; align-items: start; justify-content: space-between; }
.board-heading small { font-size: 12px; } .board-heading h2 { margin: 8px 0 18px; font-size: 23px; }
.board-seats { display: grid; gap: 5px; } .board-seat { padding: 7px 5px; border-left: 2px solid transparent; font-size: 14px; }
.board-seat.active { border-left-color: var(--accent); background: #66502c55; }
.board-color { display: inline-block; min-width: 40px; font-weight: 700; }
.color-0 { color: #ff9697; } .color-1 { color: #94cffa; } .color-2 { color: #a5d9ac; } .color-3 { color: #f6d87a; }
#board-controls p { font-size: 15px; line-height: 1.5; margin: 16px 0; }
.board-turn { font-weight: 700; } #board-timer { float: right; color: var(--accent); }
.board-roll strong { font-size: 24px; } .board-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.board-rules { padding: 16px 0; font-size: 14px; } .board-result { line-height: 2; }
.board-view #right, .board-view #sec-rules, .board-view #log, .board-view #actions, .board-view #cross, .board-view #panel-nav, .board-view #round-start { display: none !important; }
.board-view #status, .board-view [data-cam], .board-view #b-stand, .board-view #b-emote, .board-view #b-f4f, .board-view #b-panels { display: none; }

/* Compact screens have a single scrollable drawer and an always reachable dock. */
@media (max-width: 1180px) {
  :root { --panel-top: 158px; --panel-bottom: 166px; }
  #topbar { grid-template-columns: 1fr; }
  .pill { justify-self: center; max-width: 100%; }
  .pill.views { justify-self: center; flex-wrap: wrap; justify-content: center; }
  #status { grid-row: 3; max-width: 100%; font-size: 14px; }
  #right { display: contents; }
  #sec-rules, #right > .panel, #inventory, #ayca-menu { position: fixed; display: none; top: var(--panel-top); bottom: var(--panel-bottom); left: 50%; right: auto; transform: translateX(-50%); width: min(440px, calc(100vw - 20px)); max-height: none; margin: 0; padding: 16px; }
  body[data-panel=rules] #sec-rules, body[data-panel=shisha] #sec-shisha, body[data-panel=music] #sec-music, body[data-panel=legend] #legend, body[data-panel=inventory] #inventory, body[data-panel=ayca] #ayca-menu { display: block; }
  body[data-panel=legend] #legend { max-height: none; }
  #panel-nav { width: min(570px, calc(100vw - 20px)); }
  #actions { width: min(780px, calc(100vw - 20px)); }
  #log { max-width: 220px; bottom: 170px; font-size: 12px; }
  #inventory { max-width: 360px; }
  #ayca-menu { z-index: 64; }
  #board-controls { width: 310px; }
}
@media (max-width: 600px) {
  :root { --panel-top: 220px; }
  #start { padding: 16px; } #start .card { padding: 26px 22px 18px; }
  .card h1 { font-size: 38px; } .card p.sub { margin-bottom: 16px; }
  #topbar { top: 6px; left: 8px; right: 8px; gap: 6px; }
  .pill { width: 100%; gap: 5px; justify-content: space-between; padding: 5px; font-size: 13px; }
  .pill > strong { display: none; } .pill .btn.small { min-height: 40px; padding: 6px; font-size: 13px; }
  .pill.views { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .views .btn { white-space: nowrap; } .views kbd { display: none; }
  #fps { display: none; } #okeyinfo { display: none; }
  #roomwrap { gap: 3px; } #copy { font-size: 12px; }
  .code { padding: 3px; font-size: 13px; }
  #status { width: 100%; padding: 6px 9px; font-size: 13px; }
  #panel-nav { gap: 3px; padding: 5px; bottom: 8px; }
  #panel-nav .btn { font-size: 13px; padding: 4px 2px; }
  #actions { bottom: 78px; gap: 4px; }
  #actions .btn { min-height: 36px; padding: 6px 8px; font-size: 13px; }
  #round-start { bottom: 82px; }
  #log { left: 12px; max-width: calc(100vw - 24px); bottom: 174px; font-size: 11px; }
  #log div:not(:last-child) { display: none; }
  body[data-panel]:not([data-panel='']) #log { display: none; }
  #emotes { width: calc(100vw - 20px); grid-template-columns: 1fr; }
  #f4f-hint { display: none; } #f4f-bar { top: 8px; right: 8px; }
  #board-controls { top: auto; bottom: 8px; left: 8px; width: calc(100vw - 16px); max-height: 40dvh; padding: 12px; }
  .board-heading h2 { margin: 5px 0 12px; font-size: 20px; }
  .board-seats { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 620px) and (min-width: 1181px) {
  #right { bottom: 12px; overflow: auto; pointer-events: auto; }
  #right > #sec-shisha { flex: none; }
}
@media (max-height: 620px) and (max-width: 1180px) {
  body[data-panel]:not([data-panel='']) { --panel-top: 72px; }
  body[data-panel]:not([data-panel='']) #topbar .views, body[data-panel]:not([data-panel='']) #status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}

/* Shared clock updates its own text, never the rules form. */
#world-time { grid-row: 3; grid-column: 1 / -1; justify-self: center; padding: 3px 10px; color: var(--text); background: var(--wood); border-radius: var(--edge); font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; }
.clock-control { flex-wrap: wrap; gap: 6px; }
.clock-control select { max-width: 100%; margin-left: auto; font: inherit; color: var(--text); background: var(--wood); border: 1px solid var(--line); padding: 5px; }
@media (max-width: 1180px) { #world-time { grid-row: 4; } }

#interaction-help { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 12px; padding: 5px 8px; color: var(--text); background: #251a12cc; border-radius: 4px; font-size: 12px; pointer-events: none; }
body:not(.standing) #interaction-help { bottom: 64px; }
body[data-panel]:not([data-panel='']) #interaction-help, body.board-view #interaction-help { display: none; }
@media (max-width: 1180px) { #interaction-help, body:not(.standing) #interaction-help { bottom: 80px; left: 10px; gap: 9px; font-size: 11px; } }
@media (max-width: 600px) { #interaction-help, body:not(.standing) #interaction-help { top: 234px; bottom: auto; } }

/* Equipment and pockets use the same small outlined silhouettes. */
#b-equipment { pointer-events: auto; padding: 0; border: 0; background: transparent; font-size: inherit; }
.equipment-icon { position: relative; display: inline-block; flex: none; width: 30px; height: 34px; color: var(--accent); border: 2px solid currentColor; border-radius: 4px; }
.equipment-icon i, .equipment-icon::before, .equipment-icon::after { position: absolute; content: ''; display: block; }
.icon-phone { width: 23px; border-radius: 5px; }
.icon-phone::after { width: 7px; height: 2px; background: currentColor; left: 6px; bottom: 3px; }
.icon-pack::before { left: -2px; right: -2px; top: 9px; border-top: 2px solid; }
.icon-pack::after { left: 5px; right: 5px; top: 15px; bottom: 6px; border: 1px solid; transform: rotate(-15deg); }
.icon-hand { width: 25px; height: 26px; border-radius: 6px 6px 10px 10px; border-top: 0; transform: rotate(-15deg); }
.icon-hand::before { width: 7px; height: 20px; border: 2px solid; border-radius: 5px; top: -9px; left: 7px; background: var(--wood); }
.icon-hand::after { width: 6px; height: 14px; border: 2px solid; border-radius: 5px; top: 5px; left: -8px; background: var(--wood); transform: rotate(-25deg); }
.icon-message { width: 34px; height: 27px; border-radius: 7px; }
.icon-message::before { width: 9px; height: 9px; border-left: 2px solid; border-bottom: 2px solid; left: 4px; bottom: -6px; transform: skewY(-35deg); background: #213a33; }
.icon-message::after { top: 8px; left: 6px; right: 6px; height: 6px; border-top: 1px solid; border-bottom: 1px solid; }
.icon-card { width: 36px; height: 26px; }
.icon-card::before { left: 0; right: 0; top: 5px; border-top: 5px solid; }
.icon-card::after { left: 5px; bottom: 5px; width: 8px; border-top: 2px solid; }
.icon-tray { width: 36px; height: 20px; border-radius: 30px 30px 0 0; }
.icon-tray::before { left: -5px; right: -5px; bottom: -5px; border-top: 2px solid; }
.icon-tray::after { width: 4px; left: 14px; top: -6px; height: 4px; border-radius: 50%; background: currentColor; }
.icon-person { width: 34px; height: 19px; border-radius: 20px 20px 4px 4px; margin-top: 14px; }
.icon-person::before { width: 14px; height: 14px; border: 2px solid; border-radius: 50%; left: 8px; top: -19px; }
#equipment-wheel { position: fixed; z-index: 75; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(450px, calc(100vw - 16px)); height: min(450px, calc(100vw - 16px), calc(100dvh - 30px)); border-radius: 50%; background: radial-gradient(circle, #21160fed 0 24%, #302218f5 25% 65%, #19110deb 66%); border: 2px solid var(--line); box-shadow: var(--shadow); }
.wheel-center { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; pointer-events: none; }
.wheel-center b, .wheel-center small { display: block; }
.wheel-center b { font-family: Bitter, Georgia, serif; font-size: 19px; }
.wheel-center small { font-size: 12px; }
.wheel-cigarette, .wheel-cigarette:active { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px; min-height: 44px; width: 110px; font-size: 12px; }
.wheel-page { position: absolute; top: calc(50% + 28px); width: 100%; text-align: center; font-size: 12px; line-height: 1; pointer-events: none; }
.wheel-prev, .wheel-next, .wheel-prev:active, .wheel-next:active { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; min-height: 44px; padding: 0; font-size: 22px; }
.wheel-prev { left: 2%; } .wheel-next { right: 2%; }
#equipment-wheel:focus { outline: none; }
.equipment-slot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 116px; min-height: 100px; padding: 8px; color: var(--text); border: 1px solid transparent; border-radius: 12px; background: transparent; }
.equipment-slot b { font-size: 14px; line-height: 1.1; }
.equipment-slot small { font-size: 12px; line-height: 1.15; }
.equipment-slot[aria-pressed=true], .equipment-slot:hover { background: #725332; border-color: var(--accent); }
.wheel-cancel, .wheel-cancel:active { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); font-size: 12px; padding: 4px 12px; min-height: 44px; }
.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.inventory-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 8px 12px; min-height: 132px; border: 1px solid #8d6c48; border-radius: 6px; background: #241910; }
.inventory-slot[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.inventory-slot b { font-size: 14px; } .inventory-slot small { font-size: 12px; }
.slot-count { position: absolute; right: 8px; top: 6px; font-variant-numeric: tabular-nums; color: var(--accent); }
.inventory-actions { display: flex; flex-direction: column; gap: 6px; }
#phone-device { position: fixed; z-index: 74; right: 28px; bottom: 84px; width: 310px; max-width: none; margin: 0; padding: 12px 8px 9px; }
#phone-device .phone-screen { display: flex; flex-direction: column; height: 462px; max-height: calc(100dvh - 166px); min-height: 0; padding: 14px; overflow: hidden; background: linear-gradient(155deg, #2e4e43, #172d27); }
.phone-status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #cbd6c8; }
.phone-status b { font-family: Bitter, Georgia, serif; letter-spacing: .04em; }
.phone-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 24px 0 12px; }
.phone-heading h2 { font-size: 23px; }
.phone-heading button, .phone-navigation button { min-width: 40px; min-height: 40px; padding: 4px; border: 0; background: transparent; color: #e9d2a3; }
.phone-heading button { font-size: 28px; }
.phone-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.phone-welcome { margin: 0 0 18px; font-size: 14px; color: #d0ddcf; }
.phone-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
.phone-apps button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100px; padding: 12px 4px; border: 0; background: #1a302955; border-radius: 16px; font-size: 14px; }
.phone-apps button:disabled { opacity: .45; cursor: default; }
.phone-apps button:not(:disabled):hover { background: #4e6958; }
.phone-navigation { padding-top: 8px; border-top: 1px solid #78908266; text-align: center; }
.phone-navigation button { width: 100%; }
@media (max-width: 600px) {
  #phone-device { right: 12px; bottom: 80px; width: min(350px, calc(100vw - 24px)); }
  #phone-device .phone-screen { height: min(540px, calc(100dvh - 146px)); max-height: none; }
  .equipment-slot { width: 106px; min-height: 88px; padding: 5px; }
}
@media (max-height: 620px) { #phone-device { bottom: 12px; } #phone-device .phone-screen { max-height: calc(100dvh - 62px); } }

#facility-device { position: fixed; z-index: 72; left: 50%; bottom: 80px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 20px); padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #21160ff5; }

.phone-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px; }
.phone-balances > div { padding: 12px 8px; border-radius: 10px; background: #1a302966; }
.phone-balances dt { font-size: 12px; } .phone-balances dd { margin: 4px 0 0; font-size: 24px; font-variant-numeric: tabular-nums; }
.phone-balances dd small { font-size: 12px; }
.account-history { padding: 0; list-style: none; }
.account-history li { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #78908266; font-size: 13px; }
.account-history small { grid-column: 1 / -1; }
.phone-body .btn { color: var(--text); background: #4e6958; border-color: #9fb19d; }

/* The catalog stays inside the held phone; live updates preserve its form controls. */
.phone-orders { display: grid; gap: 10px; }
.phone-orders > label { display: grid; gap: 5px; font-size: 13px; }
.phone-orders select { width: 100%; min-width: 0; padding: 9px 7px; background: #f1e4cc; color: #292217; border: 1px solid #b6a17a; border-radius: 5px; }
.phone-orders fieldset { border: 1px solid #b6a17a; border-radius: 5px; padding: 8px; }
.phone-orders [data-order-flavors] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; font-size: 12px; }
.phone-orders [data-order-flavors] label { display: flex; align-items: center; gap: 4px; }
.phone-orders input { accent-color: #285c48; }
.phone-orders .order-summary { font-weight: bold; margin: 2px 0; }
.phone-orders .service-status { margin: 0; font-size: 13px; }
.phone-orders .hint { margin: 0; }
.phone-orders [hidden] { display: none; }
.device-card { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 35; width: min(350px, calc(100vw - 28px)); max-height: calc(100dvh - 60px); overflow: auto; padding: 20px; box-sizing: border-box; border: 1px solid #b69a60; border-radius: 10px; background: #18382ff5; color: #f6e5c5; box-shadow: 0 12px 40px #0008; }
.device-card h2 { margin: 0 0 16px; font: bold 23px Georgia, serif; }
.device-card label { display: grid; gap: 6px; }
.device-card input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #b69a60; border-radius: 5px; background: #f1e4cc; color: #292217; font-size: 20px; }
.device-card .device-actions { display: grid; gap: 9px; }
.device-card [hidden] { display: none; }
.device-card .btn { background: #45654f; color: #fff3dc; border-color: #b6a17a; }
.device-card .btn.ghost { background: transparent; }
@media(max-width: 600px) { .device-card { right: 14px; } }
.audio-levels { display: grid; gap: 12px; margin: 14px 0; }
.audio-levels label { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.audio-levels input { min-width: 0; width: 100%; accent-color: #bf9147; }
.phone-chat [hidden] { display: none; }
.phone [aria-disabled=true] { opacity: .65; }
#sec-music [hidden] { display: none; }
/* Set-game docks share the physical scene; only their own picks pass device focus. */
#set-game-controls { position:fixed; z-index:25; top:76px; left:12px; width:320px; max-height:calc(100dvh - 90px); overflow:auto; color:#f5ead1; background:#282019; border:1px solid #a48b59; border-radius:8px; padding:10px; }
#set-game-controls > header { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#set-game-controls h2 { margin:0; font-size:19px; }
#set-game-controls .btn { min-height:44px; margin:4px 4px 4px 0; }
#set-game-controls [data-set-lifecycle] { margin-top:10px; }
.set-game-view #right, .set-game-view #status, .set-game-view #actions, .set-game-view #log, .set-game-view #cross, .set-game-view #round-start, .set-game-view #panel-nav, .set-game-view #topbar .views, .set-game-view #interaction-help { display:none !important; }
@media(max-width:800px) { #set-game-controls { top:auto; bottom:8px; left:8px; width:calc(100vw - 16px); max-height:40dvh; } }

.inventory-cash { border-top: 1px solid #75603d; padding-top: 10px; margin-top: 10px; }
.inventory-cash label { display: grid; gap: 4px; font-size: 12px; }
.inventory-cash input { width: 7rem; padding: 7px; }
.inventory-cash .inventory-actions { align-items: end; flex-wrap: wrap; }

#app-version { position: fixed; right: 8px; bottom: 1px; z-index: 100; color: #bfa77d; font: 10px/12px Arial, sans-serif; pointer-events: none; }