/* mafia.css: retained cascade position */ /* Neon alley artwork, with quiet opaque surfaces for readable game controls. */
:root {
  --art-background: url('/assets/mafia-v1/background.webp');
  --art-shop-background: url('/assets/mafia-v1/shop-background-v1.webp');
  --art-felt: url('/assets/mafia-v1/game/felt-v1.webp');
  --ink: #f2e9d8;
  --text: #f2e9d8;
  --muted: #b7b4ad;
  --paper: #141820;
  --panel: #171d25f5;
  --line: #76634370;
  --gold: #dfbc78;
  --shadow: 0 12px 35px #0005;
  color-scheme: dark;
  background: #10131b;
}
html {
  scrollbar-color: #9e8557 #151b24;
}
::selection {
  background: #a9844c88;
  color: #fff1d0;
}
body:before {
  background: #10131b var(--art-background) center/cover no-repeat;
}
body:after {
  background: #0c111bd9;
}
body[data-screen='lobby']:after,
body[data-screen='auth']:after {
  background: linear-gradient(180deg, #050a1226, #060a1012 60%, #070b1266);
}
:focus-visible {
  outline-color: #f4d899;
}
.primary {
  background: linear-gradient(135deg, #335357, #1b343c);
  border-color: #b79458;
  color: #fff3db;
  box-shadow:
    inset 0 0 0 3px #d7bd7e12,
    0 3px 8px #0003;
}
.outline,
.header-button {
  background: #1c222cec;
  border-color: #907a53;
  color: #e5c88c;
}
.quiet:hover:not(:disabled) {
  background: #dcb67518;
}
.text-button,
.section-label,
.public-rooms h3,
.icon-button {
  color: #dfbc78;
}
.banner,
.banner.warning,
.maintenance-note {
  background: #30281fec;
  border-color: #ae854d;
  color: #f3dfb5;
}
.banner small {
  color: #d5bd90;
}
.bot-badge {
  background: #193633;
  color: #a5d1be;
  border-color: #608a70;
}
.host-tag {
  background: #3c3020;
  color: #ead29c;
  border-color: #927747;
}
.topbar {
  background: #111820f2;
  border-bottom: 1px solid #786445;
  box-shadow: 0 3px 16px #0005;
}
.player-profile {
  text-align: left;
  border-radius: 8px;
  padding: 4px;
  min-height: 44px;
}
.profile-info {
  min-width: 0;
}
.player-profile:hover:not(:disabled) {
  filter: brightness(1.15);
}
.connection {
  color: #d4b79a;
}
.connection.online {
  color: #8ac6ac;
}
.avatar {
  background: #242934;
  border-color: #b99b60;
}
.portrait-frame {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
}
.portrait-art {
  position: absolute;
  width: 380%;
  max-width: none;
  height: auto;
  left: -159%;
  top: -13%;
  pointer-events: none;
}
.portrait-frame[data-character='black_fan_01'] .portrait-art {
  left: -148%;
  top: -10%;
}
.portrait-frame[data-character='knight'] .portrait-art {
  left: -140%;
  top: -9%;
}
.portrait-frame[data-character='mage'] .portrait-art {
  left: -159%;
  top: -13%;
}
.portrait-frame[data-character='archer'] .portrait-art {
  left: -155%;
  top: -13%;
}
.portrait-frame .image-fallback {
  position: absolute;
  inset: 0;
  padding: 2px;
  font-size: 8px;
  display: grid;
  place-items: center;
}
.coin,
.lobby-wallet .coin {
  color: #efd092;
  background: linear-gradient(#292b2f, #151b23);
  border-color: #a78a52;
  box-shadow:
    inset 0 0 0 2px #d6b27114,
    0 3px 9px #0006;
}
.coin .ui-icon {
  color: #dfb96f;
}
.lobby-profile {
  background: linear-gradient(110deg, #121a25f5, #21222be8);
  border-color: #a28651;
  box-shadow:
    0 4px 15px #0006,
    inset 0 0 0 3px #d5b77814;
}
.lobby-profile .account-name {
  font:
    700 25px/1.4 'Malgun Gothic',
    sans-serif;
  max-width: 230px;
  color: #f0d7a2;
  letter-spacing: 0.5px;
}
.lobby-profile .avatar {
  background: #1e2633;
  box-shadow: 0 0 0 2px #5e4b30;
}
.lobby-tools .header-button {
  background: radial-gradient(circle at 35% 25%, #34343b, #141b24);
  border-color: #a88b57;
  color: #dec18b;
  box-shadow:
    0 3px 8px #0006,
    inset 0 0 0 2px #dcb36b1c;
}
.screen-lobby .hero-character {
  filter: drop-shadow(0 14px 15px #0008);
}
.mode-button {
  border-color: #b99558;
  background: linear-gradient(120deg, #233340, #101b27);
  box-shadow:
    0 5px 0 #0b1018,
    0 10px 22px #0005;
}
.mode-button.mode-join {
  background: linear-gradient(120deg, #482c32, #291c26);
}
.mode-button.mode-bot {
  background: linear-gradient(120deg, #25433f, #16272d);
}
.mode-button:after {
  display: none;
}
.mode-button.art-ready .mode-symbol,
.mode-button.art-ready .mode-arrow {
  display: none;
}
.mode-button.art-ready {
  justify-content: center;
  background: none;
}
.mode-button.art-ready .mode-title {
  font-family: 'Noto Serif KR', Batang, serif;
  letter-spacing: 3px;
  color: #f5e5c5;
  text-shadow:
    0 2px 3px #000,
    0 0 10px #0008;
}
.mode-button.art-ready,
.mode-button.art-ready:hover:not(:disabled) {
  filter: drop-shadow(0 8px 9px #0008);
}
.mode-button.art-ready:hover:not(:disabled) {
  filter: brightness(1.13) drop-shadow(0 8px 9px #0008);
}
.lobby-dock {
  gap: 30px;
}
.dock-button {
  background: linear-gradient(#2d3036, #151b22);
  color: #e7c98f;
  border-color: #a88b57;
  text-shadow: none;
  box-shadow: 0 4px 0 #0b1119;
}
.dock-icon,
.dock-label {
  color: #e7c98f;
}
.dock-button.art-ready .dock-label,
.screen-lobby .dock-button.art-ready .dock-label {
  bottom: 9%;
  transform: translateX(-50%);
  font:
    700 clamp(18px, 2vw, 30px) / 1.2 'Noto Serif KR',
    Batang,
    serif;
  letter-spacing: 1px;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 2px #000;
  color: #f2d59d;
}
.dock-button.art-ready {
  filter: drop-shadow(0 5px 6px #0009);
}
.screen-lobby .lobby-dock {
  justify-content: flex-end;
}
.auth-brand {
  justify-content: center;
  width: 100%;
  text-shadow: none;
}
.auth-logo {
  width: min(320px, 70%);
  height: auto;
  filter: drop-shadow(0 4px 12px #0009);
}
.auth-character {
  height: 77dvh;
  max-height: 780px;
  filter: drop-shadow(0 12px 20px #0008);
}
.auth-panel#main {
  background: #141a24ed;
  border: 1px solid #aa8d57;
  box-shadow:
    0 18px 70px #0007,
    inset 0 0 0 5px #ddbe7b0c;
}
.auth-box > h2 {
  color: #edcf95;
}
.tabs > button.active {
  border-color: #d7b678;
  color: #efd5a6;
}
input,
select {
  background: #10161e;
  color: #f3e8d3;
  border-color: #73664e;
}
input::placeholder {
  color: #969995;
}
.form-error {
  color: #ff9b89;
}
dialog {
  background: #151b24;
  border-color: #a58a56;
  box-shadow: 0 20px 100px #0009;
}
dialog::backdrop {
  background: #05091499;
}
.dialog-head h2 {
  color: #efd19b;
}
.room-symbol {
  background: #252a2f;
  color: #ddbd80;
  border-color: #756448;
}
#toast {
  background: #19222d;
  color: #f5e1bc;
  border-color: #b7975b;
}
.history-dialog {
  width: min(850px, calc(100% - 28px));
  overscroll-behavior: contain;
}
.dialog-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.profile-logout {
  min-height: 40px;
  padding: 7px 14px;
  font-size: 13px;
}
.profile-logout .ui-icon {
  width: 18px;
  height: 18px;
}
.history-dialog .history-list {
  box-shadow: none;
}
.history-dialog .muted {
  margin-top: 0;
}
.invite-strip {
  background: #1b232de8;
}
.invite-strip strong {
  color: #e2c48c;
}
.bot-notice,
.bot-notice strong {
  color: #a9d0be;
}
.seat {
  background: linear-gradient(160deg, #232b36ef, #141b25f5);
  border-color: #726347;
}
.seat-label,
.seat h2 small,
.status-tag {
  color: #c2ae8a;
}
.seat.ready {
  border-color: #77a28b;
  box-shadow:
    inset 0 0 0 2px #70a58a25,
    var(--shadow);
}
.ready .status-tag {
  color: #99ceb1;
}
.seat.vacant {
  background: #171e29c9;
}
.seat.vacant h3 {
  color: #b8b2a4;
}
.game-mode {
  background: #20362e;
  color: #b9d8ba;
  border-color: #657a51;
}
.turn-clock > span {
  color: #b8b9b1;
}
.turn-clock > strong {
  color: #e8c990;
}
.turn-clock .urgent {
  color: #ff9a86;
}
.game-top > .quiet {
  color: #efb1a0;
  background: #36262a;
  border-color: #9b6358;
}
.mini-player {
  background: #1b222dee;
  border-color: #6f624b;
}
.mini-player.active {
  background: #343023;
  border-color: #d1ac63;
  box-shadow: inset 0 0 0 1px #cfad6b33;
}
.mini-player strong small {
  color: #d8bc83;
}
.effect-tag {
  color: #efa38d;
}
.dice-board {
  background: radial-gradient(ellipse at 50% 20%, #284a47, #172e30 70%);
  border-color: #887145;
  box-shadow:
    inset 0 0 0 2px #e7ca8a29,
    inset 0 4px 25px #020c1155,
    0 8px 20px #0004;
}
.roll-button {
  background: linear-gradient(#efd299, #bd985b);
  color: #24231e;
  border-color: #e4c78a;
}
.item-card {
  background: #232b35;
  border-color: #76674c;
  color: #f2e5cc;
}
.item-card small,
.item-availability {
  color: #c5c2b8;
}
.activity summary,
.count {
  color: #d1b77e;
}
.score-panel {
  background: #171e28;
  border-color: #9c8250;
}
.score-heading {
  background: #1d2631;
  color: #f0d39b;
  border-color: #76634370;
}
.score-heading small {
  color: #c6b58f;
}
.attack .item-icon {
  background: #412c30;
  color: #f2b6a2;
  border-color: #9c6958;
}
.buff .item-icon {
  background: #303c2b;
  color: #c3d59e;
  border-color: #788552;
}
.defense .item-icon {
  background: #243d49;
  color: #b5d6e7;
  border-color: #64899d;
}
.item-icon {
  background: #33302b;
  color: #e4c183;
  border-color: #8e754b;
}
.score-scroll th,
.score-scroll td {
  border-color: #65573e66;
}
.score-scroll th:first-child {
  background: #1c2530;
}
.score-scroll thead th,
.score-scroll thead th:first-child {
  background: #2a3037;
  color: #e8d8b8;
}
.score-scroll .current-col {
  background: #233a3c;
}
.score-scroll thead .current-col {
  background: #2e4d4a;
  color: #f4deb1;
}
.score-scroll th small {
  color: #d2b785;
}
.category-face {
  background: #393427;
  color: #edd09c;
  border-color: #89744f;
}
.score-choice {
  color: #f0d698;
  background: #ccad6020;
  border-color: #b3985f;
}
.score-choice:hover {
  background: #cba95b40;
}
.blank {
  color: #898f91;
}
.preview {
  color: #c9be9f;
}
.section-start > th,
.section-start > td,
.subtotal > th,
.subtotal > td {
  border-top-color: #8c774c;
}
.subtotal th,
.subtotal td,
.score-note {
  color: #b9b4a2;
}
.score-scroll tfoot th,
.score-scroll tfoot td,
.score-scroll tfoot th:first-child {
  background: #2b4444;
  color: #ffe2a6;
}
.results-head p,
.history-detail,
.prose p,
.prose dd {
  color: #c5c5bb;
}
.earned {
  background: #19232ef5;
}
.result-row.mine {
  color: #e6c583;
}
.character-card {
  border-color: #847049;
}
.character-art {
  background: radial-gradient(ellipse at 50% 65%, #364047, #1b222e 75%);
}
.shop-art,
.character-card[data-character='black_fan_01'] .shop-art {
  transform: none;
  object-fit: contain;
  object-position: center bottom;
  padding-top: 12px;
}
.character-badge {
  background: #1b2129eb;
  border-color: #a58a55;
  color: #ebcf9a;
}
.history-list summary:before,
.history-list summary > b,
.prose h2,
.prose dt {
  color: #dfbe80;
}
.image-fallback {
  background: #252c36;
  color: #e3c48e;
  border-color: #a18856;
}
.cutscene {
  background: radial-gradient(ellipse at 40% 50%, #2b4b49, #0d1521fa 70%);
}
.cutscene.attack {
  background: radial-gradient(ellipse at 40% 50%, #58323d, #130f1dfa 70%);
}
.cutscene.defense {
  background: radial-gradient(ellipse at 40% 50%, #304d5c, #0e1826fa 70%);
}
@media (max-width: 600px) {
  .lobby-profile .account-name {
    font-size: 17px;
    max-width: 140px;
    letter-spacing: 0;
  }
  .screen-lobby .dock-button.art-ready .dock-label {
    font-size: clamp(15px, 4.7vw, 19px);
    bottom: 10%;
    letter-spacing: 0;
  }
  .dialog-tools {
    gap: 5px;
  }
  .profile-logout {
    padding: 7px 9px;
    font-size: 12px;
  }
  .history-dialog .dialog-head {
    gap: 6px;
  }
  .history-dialog .dialog-head h2 {
    font-size: 19px;
  }
  .auth-brand {
    left: 0;
    top: 12px;
    width: 50%;
    z-index: 2;
  }
  .auth-logo {
    width: 100%;
  }
  .auth-character {
    height: 350px;
  }
  .game-top,
  .mobile-actions {
    background: #131b26f5;
    border-color: #887047;
  }
  .history-list details {
    padding: 15px 12px;
  }
}
@media (min-width: 601px) and (max-height: 540px) {
  .lobby-profile .account-name {
    font-size: 20px;
  }
  .screen-lobby .dock-button.art-ready .dock-label {
    font-size: 14px;
    bottom: 9%;
  }
}

/* Normalize transparent padding using alpha bounds, without changing source files. */
.mode-create {
  --art-left: -1.6346153846153846%;
  --art-top: -41.343669250645995%;
  --art-width: 104.42307692307692%;
  --art-height: 187.08010335917314%;
}
.mode-join {
  --art-left: -1.6445623342175066%;
  --art-top: -64.39169139465875%;
  --art-width: 105.19893899204244%;
  --art-height: 235.31157270029672%;
}
.mode-bot {
  --art-left: -0.14064697609001406%;
  --art-top: -37.65281173594132%;
  --art-width: 101.82841068917018%;
  --art-height: 177.01711491442543%;
}

/* Painted HUD from the concept; the live balance and button semantics remain HTML. */
.lobby-hud {
  --settings-size: clamp(64px, 4.8vw, 84px);
  --wallet-width: clamp(200px, 14vw, 260px);
  --wallet-height: calc(var(--wallet-width) / 4);
  --coin-font: clamp(26px, 1.95vw, 34px);
  --hud-gap: 18px;
}
.lobby-wallet {
  top: calc(
    max(20px, env(safe-area-inset-top)) + (var(--settings-size) - var(--wallet-height)) / 2
  );
  right: calc(max(24px, env(safe-area-inset-right)) + var(--settings-size) + var(--hud-gap));
}
.lobby-wallet .coin-illustrated {
  position: relative;
  isolation: isolate;
  display: flex;
  width: var(--wallet-width);
  height: var(--wallet-height);
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
}
.hud-art {
  position: absolute;
  left: var(--hud-art-left, 0);
  top: var(--hud-art-top, 0);
  width: var(--hud-art-width, 100%);
  height: var(--hud-art-height, 100%);
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.coin-illustrated > b {
  position: relative;
  z-index: 1;
  display: block;
  width: 74%;
  margin-left: 26%;
  text-align: center;
  font:
    400 var(--coin-font) / 1 'Times New Roman',
    Georgia,
    serif;
  font-variant-numeric: lining-nums tabular-nums;
  color: #fff4dc;
  text-shadow: 0 2px 2px #000;
}
.coin-illustrated > .ui-icon {
  position: absolute;
  left: 8%;
  width: 18%;
  height: 60%;
}
.lobby-tools .settings-illustrated {
  position: relative;
  isolation: isolate;
  width: var(--settings-size);
  height: var(--settings-size);
  min-width: 0;
  min-height: 0;
  padding: 0;
}
.lobby-tools .settings-illustrated > .ui-icon {
  width: 48%;
  height: 48%;
}
.lobby-wallet .coin-illustrated.art-ready,
.lobby-tools .settings-illustrated.art-ready {
  background: none;
  border-color: transparent;
  border-width: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 3px #0009);
}
.coin-illustrated.art-ready > .ui-icon,
.settings-illustrated.art-ready > .ui-icon {
  display: none;
}
.lobby-tools .settings-illustrated.art-ready:hover {
  filter: brightness(1.15) drop-shadow(0 3px 3px #0009);
}
@media (max-width: 600px) {
  .lobby-hud {
    --settings-size: 42px;
    --wallet-width: clamp(92px, 26vw, 112px);
    --coin-font: 18px;
    --hud-gap: 10px;
  }
  .screen-lobby .lobby-profile {
    max-width: calc(100% - var(--wallet-width) - 84px);
  }
  .lobby-wallet {
    top: calc(
      max(16px, env(safe-area-inset-top)) + (var(--settings-size) - var(--wallet-height)) / 2
    );
    right: calc(max(10px, env(safe-area-inset-right)) + var(--settings-size) + var(--hud-gap));
  }
}
@media (min-width: 601px) and (max-height: 540px) {
  .lobby-hud {
    --settings-size: 44px;
    --wallet-width: 150px;
    --coin-font: 24px;
    --hud-gap: 14px;
  }
  .lobby-wallet {
    top: calc(10px + (var(--settings-size) - var(--wallet-height)) / 2);
    right: calc(16px + var(--settings-size) + var(--hud-gap));
  }
}

/* Fit the generated alpha bounds without modifying either PNG. */
.coin-illustrated {
  --hud-art-left: -7.333333333333333%;
  --hud-art-top: -32.73942093541203%;
  --hud-art-width: 114.66666666666667%;
  --hud-art-height: 169.71046770601336%;
}
.settings-illustrated {
  --hud-art-left: -14.818652849740932%;
  --hud-art-top: -14.984391259105099%;
  --hud-art-width: 129.94818652849742%;
  --hud-art-height: 130.48907388137357%;
}

/* Approved profile A: reusable brass frame with a live portrait and username. */
.screen-lobby .profile-illustrated {
  isolation: isolate;
}
.screen-lobby .profile-illustrated.art-ready {
  display: block;
  height: auto;
  aspect-ratio: var(--profile-aspect, 2.45);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 4px 4px #0008);
}
.screen-lobby .profile-illustrated.art-ready .avatar {
  position: absolute;
  left: var(--portrait-inset-left, 7.3%);
  top: var(--portrait-inset-top, 14.4%);
  width: var(--portrait-inset-width, 29%);
  height: auto;
  aspect-ratio: 1;
  z-index: 1;
  border: 0;
  box-shadow: none;
  background: #171b23;
}
.screen-lobby .profile-illustrated.art-ready .profile-info {
  position: absolute;
  left: 43%;
  right: 12%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 2;
}
.screen-lobby .profile-illustrated.art-ready .account-name {
  font-family: 'Noto Serif KR', Batang, serif;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.4;
  letter-spacing: 1px;
  color: #f4ddb0;
  text-shadow: 0 2px 3px #000;
}
.screen-lobby .profile-illustrated .connection {
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-lobby .profile-illustrated.art-ready:hover {
  filter: brightness(1.1) drop-shadow(0 4px 4px #0008);
}
@media (max-width: 600px) {
  .screen-lobby .profile-illustrated.art-ready .account-name {
    font-size: clamp(15px, 4.8vw, 20px);
    letter-spacing: 0;
  }
}
@media (min-width: 601px) and (max-height: 540px) {
  .screen-lobby .profile-illustrated.art-ready {
    width: 180px;
  }
  .screen-lobby .profile-illustrated.art-ready .account-name {
    font-size: 18px;
  }
}

.profile-illustrated {
  --profile-aspect: 1805/737;
  --hud-art-left: -3.656509695290859%;
  --hud-art-top: -3.2564450474898234%;
  --hud-art-width: 109.86149584487535%;
  --hud-art-height: 107.59837177747626%;
}