:root {
  --sky-top: #9fd0f0;
  --sky-bottom: #f6ecd8;
  --cream: #fbf5e6;
  --parchment: #f3e7c9;
  --gold: #c9a24a;
  --gold-deep: #9c7a2c;
  --ink: #1f2f45;
  --ink-soft: #52627a;
  --red: #c8202c;
  --good: #2f8a4c;
  --bad: #b3261e;
  --shadow: 0 6px 18px rgba(31, 47, 69, 0.22);
  --safe-top: var(--ogp-safe-top-inset, 0px);
  --safe-bottom: var(--ogp-safe-bottom-inset, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, #cfe6f4 45%, var(--sky-bottom) 100%);
  background-attachment: fixed;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
kbd {
  font-family: ui-monospace, monospace; font-size: 0.7em; padding: 1px 5px; margin-left: 6px;
  border: 1px solid currentColor; border-radius: 4px; opacity: 0.7;
}

.stage { position: fixed; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
.fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.fade.on { opacity: 1; }
.riding-elevator #explore { visibility:hidden; }
.elevator-ride { position:absolute; inset:0; z-index:1000; overflow:hidden; pointer-events:auto; border:18px solid #665335; box-shadow:inset 0 0 0 4px #b59a66; }
.elevator-ride[hidden] { display:none; }
.elevator-panel { position:absolute; top:0; bottom:0; width:50%; background:repeating-linear-gradient(90deg,#444b49 0,#68706a 2px,#555d56 4px,#505750 80px); border:2px solid #afa47a; box-shadow:inset 0 0 80px #101714aa; transition:transform .65s cubic-bezier(.4,0,.2,1); }
.elevator-panel.left { left:0; transform:translateX(-102%); }
.elevator-panel.right { right:0; transform:translateX(102%); }
.elevator-ride.closed .elevator-panel { transform:translateX(0); }
.elevator-indicator { position:absolute; z-index:2; top:4%; left:50%; transform:translateX(-50%); min-width:220px; padding:14px 24px; text-align:center; background:#121917; border:3px solid #b59a66; color:#ffdda0; box-shadow:0 5px 20px #0009; font:30px monospace; }
.elevator-indicator small { display:block; margin-top:8px; font:16px Georgia; }
.elevator-ride.moving .elevator-arrow { animation:elevator-pulse .45s alternate infinite; }
@keyframes elevator-pulse { to { opacity:.25; } }
.elevator-rail { position:absolute; bottom:19%; left:5%; right:5%; height:12px; background:linear-gradient(#c9b07b,#725c39); box-shadow:0 6px 12px #0008; opacity:0; transition:opacity .3s; }
.elevator-ride.closed .elevator-rail { opacity:1; }
#room-picker { display:none; position:fixed; left:18px; bottom:calc(24px + var(--safe-bottom)); z-index:10; pointer-events:none; }
#room-picker.open { display:block; }
.modal-card.elevator-controls { position:relative; width:min(300px,calc(100vw - 36px)); padding:22px 20px; pointer-events:auto; background:linear-gradient(110deg,#281d20,#42322c,#21191e); border:8px double #b59a66; color:#fff6e7; box-shadow:0 0 0 5px #171917,0 0 25px #ffb64d35; }
.elevator-controls h2 { color:#fff6e7; text-shadow:0 2px 3px #000; letter-spacing:2px; }
#room-links { flex-direction:column; }
#room-links button { display:flex; align-items:center; gap:16px; text-align:left; }
.elevator-controls h2 { font-size:19px; }
.elevator-controls #room-links button { background:#141c19; color:#fff9ef; border:2px solid #9e865a; padding:8px; gap:9px; font-size:16px; font-weight:700; text-shadow:0 1px 2px #000; box-shadow:inset 0 1px 0 #ffffff20; }
.elevator-controls #room-links button:disabled { cursor:default; opacity:.65; }
.elevator-controls #room-links button:hover { background:#33413b; border-color:#fff0c0; }
.marquee-bulbs { position:absolute; inset:5px; pointer-events:none; }
.marquee-bulbs i { position:absolute; width:10px; height:10px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 40% 35%,#fffdf0,#ffe198 45%,#bf8c3f 75%); box-shadow:0 0 7px #ffd485,0 0 15px #ffb54b; animation:marquee-chase 1.6s linear infinite; animation-delay:calc(var(--phase)*-.4s); }
@keyframes marquee-chase { 0%,20%,85%,100% { opacity:1; filter:brightness(1.3); } 35%,65% { opacity:.35; filter:brightness(.55); box-shadow:0 0 2px #ffd485; } }
@media(prefers-reduced-motion:reduce) { .marquee-bulbs i { animation:none; } }
#room-links button b { display:inline-grid; place-items:center; width:38px; height:38px; background:#191e1b; color:#ffdf91; border:2px solid #b59a66; border-radius:50%; }
.elevator-controls #room-links button b { flex-shrink:0; width:30px; height:30px; }

/* ---------- the Office: 1950s noir ---------- */
.stage.noir canvas { filter: grayscale(1) contrast(1.35) brightness(0.95) sepia(0.12); }
#tutorial { flex-direction: column; justify-content: flex-end; }
.tut-grain, .tut-vignette { position: absolute; inset: 0; pointer-events: none; }
.tut-vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.85) 100%); }
.tut-grain {
  opacity: .16; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .4s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-6px, 4px); } 50% { transform: translate(5px, -7px); } 75% { transform: translate(-3px, -4px); } }
.tut-box {
  position: relative; margin: 0 16px 10px; padding: 14px 18px 18px; min-height: 96px; pointer-events: auto; cursor: pointer;
  background: rgba(8, 8, 8, .88); border: 1px solid #6b6258; color: #e8e2d4;
  font-family: 'Courier New', ui-monospace, monospace; font-size: 18px; line-height: 1.4; letter-spacing: .3px;
}
.tut-name { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 3px; color: #9a9284; margin-bottom: 4px; }
.tut-text { margin: 0; min-height: 1.4em; }
.tut-more { position: absolute; right: 14px; bottom: 6px; font-size: 12px; animation: blink 1s steps(2) infinite; }
.tut-more[hidden] { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.tut-answer { margin-top: 10px; }
.tut-answer[hidden] { display: none; }
.tut-slots { display: flex; gap: 8px; margin-bottom: 8px; }
.tut-slots span { width: 44px; height: 56px; border: 1px dashed #9a9284; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.tut-pad { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.tut-pad button { background: #1c1a18; color: #e8e2d4; border: 1px solid #6b6258; padding: 8px 0; font-family: 'Courier New', monospace; font-weight: 700; }
.tut-slaps { position: absolute; inset: 0; pointer-events: none; }
.call-bank { position: absolute; top: 48%; transform: translateY(-50%); width: clamp(94px, 14vw, 170px); display: grid; gap: 8px; }
.call-left { left: max(12px, var(--safe-top)); }
.call-right { right: 12px; }
.call-bank .slap { padding: 12px 6px; font-size: 15px; min-height: 46px; }
.answering .tut-slaps { visibility: hidden; }
.in-danger .tut-score { color: #ffb1a4; font-weight: bold; }
.tut-slaps .slap { background: #1c1a18; color: #e8e2d4; border-color: #6b6258; box-shadow: 0 2px 0 #000; }
.tut-slaps .slap:disabled { opacity: .35; }
.tut-score { position: absolute; top: 54px; left: 16px; right: 16px; text-align: center; color: #e8e2d4; font: 14px 'Courier New', monospace; text-shadow: 0 2px 4px #000; }
.tut-poster-toggle { position: absolute; top: 12px; left: 16px; padding: 5px 12px; background: #d9ccb0; border: 1px solid #80715a; color: #28221b; }
.tut-poster { position: absolute; top: 8%; left: 50%; transform: translateX(-50%) rotate(-1deg); width: min(620px, calc(100% - 32px)); max-height: 80%; overflow: auto; pointer-events: auto; padding: 20px 26px; color: #302820; background: #e7d8b8; border: 7px double #463b2b; box-shadow: 0 15px 60px #000b; text-align: center; z-index: 5; }
.tut-poster[hidden], .tut-poster-toggle[hidden], .tut-score[hidden] { display: none; }
.tut-poster small { letter-spacing: 4px; font: 10px 'Courier New', monospace; }
.tut-poster h2 { font: bold 38px Georgia, serif; letter-spacing: 3px; margin: 6px 0; }
.poster-motto { font: 11px 'Courier New', monospace; letter-spacing: 2px; margin: 0 0 16px; }
.poster-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #80715a; text-align: left; }
.poster-grid article { padding: 10px 12px; border-bottom: 1px solid #80715a; }
.poster-grid article:nth-child(odd) { border-right: 1px solid #80715a; }
.poster-grid h3 { margin: 0 0 4px; font-size: 18px; }
.poster-grid strong { font: bold 18px Georgia, serif; letter-spacing: 2px; }
.poster-grid p { margin: 5px 0 0; font: 12px/1.35 Georgia, serif; }
.poster-foot { font: 12px/1.5 Georgia, serif; text-align: left; }
.tut-poster-close { padding: 8px 20px; background: #302820; color: #e7d8b8; border: 0; }
@media (max-width: 560px) { .tut-poster { top: 8%; padding: 14px 12px; } .tut-poster h2 { font-size: 29px; } .poster-grid article { padding: 8px; } .poster-grid h3 { font-size: 16px; } .poster-grid strong { font-size: 15px; } .call-bank { width: 94px; top: 51%; gap: 7px; } .call-left { left: 8px; } .call-right { right: 8px; } .call-bank .slap { padding: 9px 4px; font-size: 12px; min-height: 44px; } }
@media (max-width: 560px) { .tut-pad { grid-template-columns: repeat(7, 1fr); } .tut-box { font-size: 16px; } }

/* Screens are overlays on the world; only their controls catch input. */
.screen { display: none; position: fixed; inset: 0; pointer-events: none; }
.screen.active { display: flex; }
.screen button, .screen input, .screen select, .menu-card, .controls { pointer-events: auto; }

/* ---------- coin balance ---------- */
.coin-box { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; }
.coin-box[hidden] { display: none; }
.coin-box small { opacity: .75; font-size: 12px; }
.coin-box a.btn { text-decoration: none; }
/* ---------- opening ---------- */
#intro-gate { align-items: center; justify-content: center; background: #000; pointer-events: auto; }
.intro-begin { background: none; border: 0; color: #cdbf9f; font-family: 'Cinzel', serif; letter-spacing: 4px; font-size: 15px; cursor: pointer; padding: 24px; }
.intro-blood { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(120, 0, 6, .55) 82%, rgba(70, 0, 4, .85)); }
.tut-black { position: absolute; inset: 0; background: #000; z-index: 30; pointer-events: none; transition: opacity 2.2s ease .4s; }
.tut-black.lift { opacity: 0; }
.intro-veil { position: absolute; inset: 0; background: #000; pointer-events: none; }
/* Character creation: the card sits beside your pig in the alley instead of covering him. */
body.creating #menu { background: transparent; justify-content: flex-end; padding: 16px max(16px, 5vw); }
body.creating .menu-card { background: rgba(251, 245, 230, .93); animation: card-in .6s ease-out; }
body.creating .closet { grid-template-columns: 1fr; }
body.creating .logo, body.creating .tagline, body.creating .preview, body.creating #rules-btn, body.creating #office-btn { display: none; }
body.creating .wallet-status { display: none; }
/* Returning players only reconnect their wallet: no name or look to pick again. */
body.signing-in .field, body.signing-in .closet { display: none; }
body.creating .wallet-access { margin: 14px 0; }
@keyframes card-in { from { opacity: 0; transform: translateX(30px); } }
@media (max-aspect-ratio: 1/1) {
  body.creating #menu { justify-content: center; align-items: flex-end; padding-bottom: 12px; }
  body.creating .menu-card { padding: 16px 18px; }
  body.creating .logo { font-size: 34px; }
  body.creating .tagline { display: none; }
  body.creating .field input { padding: 8px 10px; }
}

/* ---------- menu ---------- */
#menu {
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(10, 8, 12, 0.55);
  pointer-events: auto;
}
.menu-card {
  position: relative; width: min(440px, 100%); padding: 28px 24px;
  background: var(--cream); border: 2px solid var(--gold); border-radius: 18px; box-shadow: var(--shadow);
  text-align: center;
}
.logo {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: clamp(44px, 12vw, 64px); margin: 0;
  background: linear-gradient(180deg, #e8c86e, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 1px;
}
.tagline { font-family: 'Cinzel', serif; letter-spacing: 4px; font-size: 13px; margin: 4px 0 20px; color: var(--ink-soft); }
.field { display: block; text-align: left; font-weight: 700; }
.field input {
  width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 18px;
  border: 1.5px solid var(--gold); border-radius: 10px; background: #fff;
}
.closet { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-top: 14px; }
.preview { height: 160px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff3e6, #e8d6bd); border: 1.5px solid var(--gold); overflow: hidden; }
.preview canvas { display: block; width: 100%; height: 100%; }
.look-picker { display: grid; gap: 6px; text-align: left; }
.look-picker label { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.look-picker .buy { padding: 6px 10px; font-size: 14px; }
.look-picker .buy[hidden] { display: none; }
.look-picker select { font: inherit; font-size: 15px; padding: 4px 6px; border: 1.5px solid var(--gold); border-radius: 8px; background: #fff; min-width: 0; }
.menu-buttons { display: grid; gap: 10px; }
.btn {
  border: 1.5px solid var(--gold); background: var(--parchment); border-radius: 12px; padding: 12px 16px;
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 17px; box-shadow: 0 2px 0 var(--gold-deep);
  transition: transform .06s, filter .15s;
}
.btn small { display: block; font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.gold { background: linear-gradient(180deg, #f0d78a, var(--gold)); }
.btn.ghost { background: transparent; box-shadow: none; }
.error { color: var(--bad); min-height: 1.2em; margin: 10px 0 0; font-weight: 700; }

/* ---------- game ---------- */
#game, #explore { flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.hud {
  color: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px; font-size: 17px;
}
.hud-mid { display: flex; gap: 12px; font-family: 'Cinzel', serif; font-size: 14px; }
.hud-right b { font-family: 'Cinzel', serif; }
.icon-btn { border: 1.5px solid var(--gold); background: var(--cream); color: var(--ink); border-radius: 50%; width: 34px; height: 34px; }

.table { position: relative; flex: 1; min-height: 0; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.sit-prompt {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: rgba(251, 245, 230, .95); border: 2px solid var(--gold); border-radius: 14px;
  padding: 10px 22px; font-family: 'Cinzel', serif; box-shadow: var(--shadow); animation: deal .2s;
}
.sit-prompt b { font-size: 18px; }
.sit-prompt span { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--ink-soft); }
.sit-prompt[hidden] { display: none; }
.walk-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(255,240,230,.6); font-size: 14px; white-space: nowrap; }
.joystick { display: none; position: absolute; left: 24px; bottom: 36px; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); pointer-events: auto; touch-action: none; }
.joystick i { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,240,245,.7); }
@media (pointer: coarse) { .joystick { display: block; } .walk-hint { display: none; } }
.chat-log { position: absolute; left: 16px; bottom: 150px; width: min(360px, 70vw); margin: 0; padding: 0; list-style: none; font-size: 15px; pointer-events: none; }
.chat-log li { background: rgba(10, 8, 12, .6); color: #f3eadf; padding: 3px 8px; border-radius: 6px; margin-top: 3px; transition: opacity 1s; }
.chat-log li b { color: #ffb3d1; }
.chat-log li.old { opacity: .35; }
.chat-form { position: absolute; left: 16px; bottom: 104px; width: min(360px, 70vw); display: none; }
.chat-form.open { display: block; }
.chat-form input { width: 100%; padding: 8px 12px; font: inherit; font-size: 16px; border-radius: 10px; border: 2px solid var(--gold); background: rgba(255,250,240,.96); pointer-events: auto; }
.chat-btn { position: absolute; right: 16px; bottom: 56px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); background: var(--cream); font-size: 22px; }
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: var(--cream); border: 2px solid var(--bad);
  border-radius: 10px; padding: 8px 16px; opacity: 0; pointer-events: none; font-weight: 700; z-index: 20; }
.toast.show { animation: toast 3s; }
@keyframes toast { 10%, 80% { opacity: 1; } }
.center {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cream);
  text-shadow: 0 1px 4px #000;
}
.pile-meta { font-size: 15px; opacity: .9; }
.lobby-msg { font-family: 'Cinzel', serif; font-size: 16px; text-align: center; max-width: 240px; }

/* The pile reads as one stack: depth shadow grows with the card count. */
.pile @keyframes deal { from { transform: translateY(-14px) scale(1.08); opacity: 0; } }


.flash {
  position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(.8); opacity: 0;
  font-family: 'Cinzel', serif; font-weight: 800; font-size: clamp(22px, 6vw, 40px); color: #fff;
  text-shadow: 0 2px 0 var(--gold-deep), 0 4px 16px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap;
}
.flash.show { animation: flash 1.1s ease-out; }
.flash { top:20%;padding:12px 22px;border-radius:10px;background:#171c23eb;border:2px solid #e4c780;box-shadow:0 0 28px #f5d47755;max-width:90vw;font-size:clamp(18px,3vw,34px);white-space:normal;text-align:center;z-index:4; }
.flash.bad { color: #ffd6d2; }
@keyframes flash { 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -60%) scale(1); } }

.controls { padding: 8px 16px 12px; display: grid; gap: 8px; }
.slaps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#game .controls, #game .slaps { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; }
#game .call-bank { top: auto; bottom: calc(12px + var(--safe-bottom)); transform: none; }
#danger-msg { color: #a02020; background: #ffe9db; padding: 3px 7px; border-radius: 4px; font: bold 12px Georgia, serif; }
#danger-msg:empty { display: none; }
.slap {
  border: 1.5px solid var(--gold); background: var(--cream); border-radius: 12px; padding: 16px 4px;
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 16px; line-height: 1.1;
  box-shadow: 0 2px 0 var(--gold-deep);
}
.slap small { display: block; font-family: 'Cormorant Garamond', serif; font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.slap:active:not(:disabled), .slap.hit { transform: translateY(2px); box-shadow: none; background: #f3d27a; }
.slap:disabled { opacity: .45; }

/* ---------- modals ---------- */
.modal { display: none; position: fixed; inset: 0; background: rgba(31, 47, 69, .5); align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal.open { display: flex; }
#forfeit-confirm { z-index: 30; }
.modal-card {
  width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--cream); border: 2px solid var(--gold);
  border-radius: 16px; padding: 20px; text-align: center; box-shadow: var(--shadow);
}
.modal-card h2 { font-family: 'Cinzel', serif; margin: 0 0 8px; }
.wallet-choices { display: grid; gap: 8px; margin: 12px 0; }
.wallet-choices .btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wallet-choices img { width: 24px; height: 24px; border-radius: 6px; }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.slots { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.slot {
  width: 56px; height: 72px; border: 2px dashed var(--gold); border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 24px; font-weight: 800; background: #fff;
}
.slot.filled { border-style: solid; }
.rank-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rank-pad button { border: 1.5px solid var(--gold); background: #fff; border-radius: 8px; padding: 8px 0; font-family: 'Cinzel', serif; font-weight: 700; }
.timer-bar { height: 5px; background: #e8dcc0; border-radius: 3px; margin-top: 14px; overflow: hidden; }
.timer-bar i { display: block; height: 100%; background: var(--gold-deep); width: 100%; }
.rules-card { width: min(640px, 100%); }
.rules-card img { width: 100%; border-radius: 10px; }
.rules-notes { text-align: left; font-size: 16px; }

@media (max-width: 560px) {
          .slap small { display: none; }
  .slap { font-size: 11px; letter-spacing: -0.2px; padding: 16px 2px; }
  .controls { padding: 8px 10px 12px; }
}

.mute-btn { position: absolute; bottom: 22px; right: 78px; pointer-events: auto; }
.mute-panel { position: absolute; bottom: 80px; right: 20px; width: 260px; max-height: 280px; overflow-y: auto; padding: 14px; background: #211b21; color: #fff0d1; border: 1px solid #bca67b; border-radius: 10px; pointer-events: auto; }
.mute-panel[hidden] { display: none; }
.mute-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.mute-panel span { overflow-wrap: anywhere; }

.tut-callout { position:absolute; top:100px; left:50%; transform:translateX(-50%); padding:12px 24px; background:#f7e8c5; color:#322221; font:bold 24px Georgia; opacity:0; pointer-events:none; white-space:nowrap; border-radius:8px; } .tut-callout.show { animation:call-name 1.6s ease-out forwards; } .tut-callout.bad { background:#9d3439; color:white; } @keyframes call-name { 0% { opacity:0; } 12%,75% { opacity:1; } 100% { opacity:0; } }
.call-bank .slap { display:flex; align-items:center; gap:8px; text-align:left; } .slap kbd { display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; height:24px; border:1px solid #bdab89; border-radius:4px; color:#f6e7c8; background:#211c1a; font:bold 15px monospace; } .slap span { flex:1; }
.tut-practice-ready { position:absolute; top:65px; right:16px; padding:10px 16px; background:#ecd9ae; color:#30251c; border:1px solid #b49b6b; border-radius:5px; font:16px Georgia; cursor:pointer; }
.call-bank .slap { pointer-events:none; cursor:default; }
.tut-slaps[hidden] { display:none; }
 .wallet-access{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0;font-size:14px}
 .wallet-access .btn{font-size:13px;padding:7px 10px}
 .wallet-status{display:block;flex-basis:100%;color:#ede2cd;text-align:center}