:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ink: #061712;
  --jade: #0d4638;
  --jade-light: #1b8068;
  --gold: #e7c27c;
  --gold-bright: #ffe4a7;
  --ivory: #fffaf0;
  --vermillion: #e45f4b;
  --muted: #9eb7ae;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03100d;
  color: var(--ivory);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button { font: inherit; }
button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.game-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-width: 640px;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(38, 126, 96, .39) 0, rgba(8, 43, 34, .18) 35%, transparent 64%),
    radial-gradient(circle at 16% 20%, rgba(160, 112, 49, .1), transparent 28%),
    linear-gradient(150deg, #041510 0%, #08271e 47%, #03110d 100%);
}

.ambient,
.grain,
.fx-layer { position: absolute; inset: 0; pointer-events: none; }
.ambient { z-index: -1; overflow: hidden; }
.ambient::before {
  content: "";
  position: absolute;
  inset: 42px 0 0;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg width='260' height='100' viewBox='0 0 260 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9b177' stroke-width='1'%3E%3Cpath d='M-8 51h42c0-9 8-16 18-16 5-13 27-14 34 0 10-2 19 5 19 16h39'/%3E%3Cpath d='M154 82h30c0-7 6-12 14-12 6-11 22-10 27 1 9-1 16 4 16 11h27' opacity='.6'/%3E%3Cpath d='M10 15h13v13H10zm224 22h12v12h-12z' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 100px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
}
.ambient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 47%;
  opacity: .38;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 190' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 156 86 96l45 30 90-91 77 76 36-27 72 68 73-105 83 82 67-50 91 72 85-129 112 113 83-53v108H0Z' fill='%23020d0a'/%3E%3Cpath d='m0 171 138-61 76 41 124-72 91 76 123-58 97 61 104-89 91 73 156-58v106H0Z' fill='%23030f0c' opacity='.75'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.grain {
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.aura { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .28; animation: breathe 7s ease-in-out infinite alternate; }
.aura-one { width: 46vw; height: 32vw; left: -12vw; top: -17vw; background: #b27834; }
.aura-two { width: 38vw; height: 30vw; right: -8vw; bottom: -17vw; background: #1fa180; animation-delay: -3s; }
.silk { position: absolute; width: 70vw; height: 30vw; border: 1px solid rgba(224, 193, 128, .12); border-radius: 50%; transform: rotate(-12deg); }
.silk-one { left: -24vw; top: 9vh; }
.silk-two { right: -25vw; bottom: -6vh; transform: rotate(14deg); }

.match-bar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(5px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 5px max(12px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(2, 13, 10, .93), rgba(3, 20, 15, .66));
  border-bottom: 1px solid rgba(231, 194, 124, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  backdrop-filter: blur(16px);
}

.brand-lockup,
.brand-copy,
.match-meta,
.network,
.team,
.level-medallion { display: flex; align-items: center; }
.brand-lockup { width: 210px; gap: 9px; }
.brand-seal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #10251e;
  font: 900 18px/1 "Noto Serif SC", serif;
  background: linear-gradient(145deg, #f3d99e, #ac7639);
  border: 1px solid #ffecb8;
  border-radius: 8px 2px 8px 2px;
  box-shadow: 0 0 16px rgba(224, 180, 96, .26), inset 0 0 0 2px rgba(48, 30, 10, .18);
}
.brand-copy { align-items: flex-start; flex-direction: column; line-height: 1; }
.brand-copy b { white-space: nowrap; font: 700 14px/1 "Noto Serif SC", serif; letter-spacing: .12em; color: #f6e3b7; text-shadow: 0 1px 8px rgba(231, 194, 124, .18); }
.brand-copy b em { padding: 0 .08em; color: #b99555; font-style: normal; }
.brand-copy span { margin-top: 4px; color: #77968b; font-size: 6px; letter-spacing: .2em; }

.match-score {
  position: absolute;
  left: 50%;
  top: 4px;
  height: 37px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(224, 193, 128, .26);
  border-radius: 19px;
  background: rgba(4, 27, 21, .72);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 235, 188, .06), 0 4px 20px rgba(0, 0, 0, .2), 0 0 18px rgba(180, 132, 56, .06);
}
.team { width: 74px; justify-content: center; gap: 8px; font-size: 10px; color: #8daaa0; }
.team strong { color: #f8e5bb; font: 700 18px/1 "Noto Serif SC", serif; }
.team-us strong { color: #8de0c5; }
.level-medallion {
  align-self: stretch;
  min-width: 80px;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  color: #6f8e83;
  font-size: 8px;
  border-inline: 1px solid rgba(224, 193, 128, .16);
  background: linear-gradient(180deg, rgba(174, 126, 53, .12), transparent);
}
.level-medallion b { color: var(--gold-bright); font: 900 23px/1 "Noto Serif SC", serif; text-shadow: 0 0 12px rgba(255, 205, 121, .36); }
.level-medallion em { color: #bca570; font-size: 8px; font-style: normal; }

.match-meta { width: 210px; justify-content: flex-end; gap: 8px; }
.network { gap: 4px; color: #7f9b91; font-size: 7px; }
.network i { width: 5px; height: 5px; border-radius: 50%; background: #55d39e; box-shadow: 0 0 7px #55d39e; }
.room-number { color: #65847a; font-size: 8px; letter-spacing: .06em; }
.round-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #829f95;
  border: 1px solid rgba(203, 226, 217, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s, transform .12s;
}
.round-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.round-button:active { transform: scale(.9); }
.round-button.is-on { color: #d7bf86; }

.arena { position: absolute; inset: 45px 0 0; overflow: hidden; }
.table-inlay {
  position: absolute;
  inset: 9px 56px 32px;
  border: 6px solid transparent;
  border-radius: 48% / 47%;
  background:
    url("data:image/svg+xml,%3Csvg width='90' height='90' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='.28 .8' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.075'/%3E%3C/svg%3E") padding-box,
    radial-gradient(ellipse at 50% 36%, rgba(32, 104, 80, .38), rgba(5, 35, 27, .52) 64%, rgba(2, 19, 14, .72)) padding-box,
    repeating-linear-gradient(8deg, #503620 0 2px, #75502b 3px 5px, #3a281a 6px 8px) border-box;
  box-shadow: inset 0 0 75px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(197, 223, 210, .05), 0 0 0 1px rgba(227, 191, 116, .2), 0 11px 35px rgba(0, 0, 0, .32);
}
.table-inlay::before,
.table-inlay::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(118, 188, 162, .09); border-radius: inherit; }
.table-inlay::after { inset: 17px; border-color: rgba(218, 185, 117, .055); box-shadow: inset 0 0 34px rgba(35, 111, 85, .08); }
.table-inlay span {
  position: absolute;
  left: 50%; top: 49%;
  width: 132px; height: 132px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(218, 185, 117, .045);
  border-radius: 28px;
}

.player-seat { position: absolute; z-index: 8; display: flex; align-items: center; gap: 7px; transition: filter .25s, opacity .25s; }
.seat-top { top: 8px; left: 50%; transform: translateX(-50%); }
.seat-left { left: 14px; top: 43%; transform: translateY(-50%); }
.seat-right { right: 14px; top: 43%; transform: translateY(-50%); flex-direction: row-reverse; text-align: right; }
.seat-bottom { left: 14px; bottom: 12px; }
.avatar-shell { position: relative; width: 49px; height: 49px; flex: 0 0 49px; }
.avatar-shell::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(216, 187, 123, .32);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(4, 21, 16, .72), 0 4px 16px rgba(0, 0, 0, .45);
}
.avatar-shell svg,
.avatar-shell > img { display: block; width: 49px; height: 49px; border-radius: 50%; overflow: hidden; object-fit: cover; }
.partner-mark {
  position: absolute;
  right: -6px;
  bottom: -3px;
  z-index: 2;
  padding: 2px 5px;
  color: #15392f;
  font-size: 7px;
  font-weight: 800;
  border-radius: 6px;
  background: linear-gradient(135deg, #9ce4cb, #54aa8e);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.seat-bottom .partner-mark { background: linear-gradient(135deg, #f7d999, #ba813d); color: #3d2810; }
.seat-copy { min-width: 66px; padding: 5px 8px 6px; border: 1px solid rgba(223, 238, 231, .09); border-radius: 9px; background: linear-gradient(110deg, rgba(2, 17, 13, .82), rgba(11, 48, 38, .64)); box-shadow: 0 5px 15px rgba(0, 0, 0, .24); backdrop-filter: blur(10px); }
.seat-right .seat-copy { background: linear-gradient(250deg, rgba(2, 17, 13, .82), rgba(11, 48, 38, .64)); }
.player-name { display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 10px/1.2 "Noto Serif SC", serif; color: #e9debf; }
.seat-right .player-name { justify-content: flex-end; }
.rank-pip { display: inline-block; width: 4px; height: 4px; border-radius: 1px; transform: rotate(45deg); background: #bb9b5f; box-shadow: 0 0 5px rgba(228, 194, 123, .5); }
.card-count { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; color: #759389; font-size: 7px; white-space: nowrap; }
.seat-right .card-count { justify-content: flex-end; }
.card-count b { color: #f3ddb1; font: 700 12px/1 serif; }
.seat-signal { position: absolute; top: 50%; padding: 4px 7px; color: #b7cec5; font-size: 8px; white-space: nowrap; border: 1px solid rgba(205, 223, 216, .12); border-radius: 9px; background: rgba(3, 19, 15, .86); opacity: 0; transform: translateY(-50%) scale(.8); transition: .2s; }
.seat-left .seat-signal { left: calc(100% + 7px); }
.seat-right .seat-signal { right: calc(100% + 7px); }
.seat-top .seat-signal { top: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.8); }
.seat-bottom .seat-signal { top: auto; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.8); }
.seat-signal.show { opacity: 1; transform: translateY(-50%) scale(1); }
.seat-top .seat-signal.show { transform: translateX(-50%) scale(1); }
.seat-bottom .seat-signal.show { transform: translateX(-50%) scale(1); }
.timer-ring { position: absolute; inset: -7px; z-index: -1; opacity: 0; border-radius: 50%; background: conic-gradient(from -90deg, #fff0b3 0, #d8a64e var(--timer-angle), rgba(255,255,255,.07) var(--timer-angle)); filter: drop-shadow(0 0 4px rgba(238, 187, 91, .32)); transition: opacity .2s; }
.timer-ring::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #09251d; }
.active-turn .timer-ring { opacity: 1; animation: countdown-ring 12s linear infinite; }
.active-turn .avatar-shell::before { border-color: rgba(255, 222, 151, .8); box-shadow: 0 0 0 3px rgba(4, 21, 16, .72), 0 0 18px rgba(230, 190, 104, .42); }
.active-turn .seat-copy { border-color: rgba(230, 195, 119, .28); }
.is-finished { opacity: .55; filter: grayscale(.35); }
.finish-medal { position: absolute; left: -5px; top: -7px; z-index: 3; width: 17px; height: 17px; display: grid; place-items: center; color: #38260e; font: 900 9px serif; border-radius: 50%; background: linear-gradient(135deg, #fff0b7, #bb7e35); }

.trick-stage {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 43%;
  width: min(51vw, 430px);
  height: 126px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.trick-stage::before { content: ""; position: absolute; z-index: -1; width: min(47vw, 392px); height: 104px; border: 1px solid rgba(212, 184, 119, .075); border-radius: 50%; background: radial-gradient(ellipse, rgba(3, 24, 18, .46), rgba(3, 19, 14, .14) 58%, transparent 72%); box-shadow: inset 0 0 28px rgba(0,0,0,.18); }
.trick-empty { display: flex; flex-direction: column; align-items: center; color: #62887a; }
.empty-emblem { position: relative; width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 5px; border: 1px solid rgba(209, 179, 112, .18); border-radius: 50%; font: 700 20px/1 "Noto Serif SC", serif; color: rgba(218, 190, 130, .3); }
.empty-emblem::before { content: ""; position: absolute; inset: 7px; transform: rotate(45deg); border: 1px solid rgba(209, 179, 112, .13); border-radius: 8px; }
.trick-empty span { font-size: 8px; letter-spacing: .28em; }
.trick-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #86a79b; font-size: 8px; }
.trick-heading i { width: 19px; height: 1px; background: linear-gradient(90deg, transparent, #a88b50); }
.trick-heading i:last-child { transform: scaleX(-1); }
.trick-heading b { color: #ebcf90; font: 700 10px/1 "Noto Serif SC", serif; letter-spacing: .1em; }
.table-cards { display: flex; justify-content: center; min-height: 78px; filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .48)); }
.table-card-wrap { width: 51px; height: 76px; margin-left: -12px; transform: rotate(var(--tilt)); animation: deal-in .46s cubic-bezier(.16,.82,.24,1) backwards; animation-delay: var(--delay); }
.table-card-wrap:first-child { margin-left: 0; }

.turn-banner {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 117px;
  transform: translateX(-50%);
  min-width: 106px;
  padding: 4px 16px;
  text-align: center;
  color: #9ab4aa;
  font-size: 8px;
  letter-spacing: .08em;
  border: 1px solid rgba(197, 220, 211, .1);
  border-radius: 12px;
  background: rgba(3, 21, 16, .66);
  backdrop-filter: blur(8px);
}
.turn-banner.me { color: #ffe2a1; border-color: rgba(232, 193, 111, .28); box-shadow: 0 0 16px rgba(225, 177, 83, .08); }
.turn-banner.me::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #e8bd68; box-shadow: 0 0 7px #e8bd68; }

.hand-dock { position: absolute; z-index: 10; left: 92px; right: 168px; bottom: -1px; height: 115px; }
.hand-dock::before { content: ""; position: absolute; left: 3%; right: 3%; bottom: -24px; height: 78px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 20%, rgba(39, 110, 87, .28), rgba(2, 15, 11, .82) 62%); border-top: 1px solid rgba(214, 183, 112, .12); box-shadow: 0 -12px 30px rgba(0,0,0,.2); }
.hand { position: absolute; inset: 8px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: max(2px, env(safe-area-inset-bottom)); }
.hand-card-wrap { position: relative; flex: 0 0 48px; width: 48px; height: 80px; margin-left: clamp(-31px, -3.38vw, -25px); transform: translateY(var(--arc)) rotate(var(--fan)); transform-origin: 50% 135%; transition: transform .16s cubic-bezier(.2,.8,.2,1), filter .16s; cursor: pointer; }
.hand-card-wrap:first-child { margin-left: 0; }
.hand-card-wrap:hover { filter: brightness(1.06); }
.hand-card-wrap.selected { z-index: 40 !important; transform: translateY(calc(var(--arc) - 19px)) rotate(var(--fan)); filter: drop-shadow(0 7px 7px rgba(0,0,0,.45)); }
.hand-card-wrap.selected .card { box-shadow: 0 0 0 2px #f1c76e, 0 7px 18px rgba(0,0,0,.45), 0 0 16px rgba(238, 187, 91, .28); }

.card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #202622;
  border: 1px solid rgba(95, 83, 58, .42);
  border-radius: 5px;
  background:
    url("data:image/svg+xml,%3Csvg width='70' height='70' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='4' seed='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.045'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255,255,255,.94), transparent 32%),
    repeating-linear-gradient(45deg, rgba(137, 117, 79, .028) 0 1px, transparent 1px 4px),
    #fffaf0;
  box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #c7bfae, 0 6px 10px rgba(0, 0, 0, .46), 0 12px 22px rgba(0,0,0,.12);
}
.card::before { content: ""; position: absolute; z-index: 5; left: -75%; top: -20%; width: 52%; height: 145%; pointer-events: none; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); opacity: .42; transition: left .42s ease, opacity .25s; }
.card::after { content: ""; position: absolute; inset: 2px; pointer-events: none; border: 1px solid rgba(126, 106, 67, .08); border-radius: 3px; }
.card.red { color: #c83d36; }
.card.is-level { box-shadow: 0 0 0 2px #d2a54e, 0 2px 0 #9b702a, 0 5px 12px rgba(0,0,0,.48); }
.level-ribbon { position: absolute; z-index: 3; right: -12px; top: 4px; width: 38px; padding: 1px 0; transform: rotate(45deg); text-align: center; color: #fff0bb; font-size: 5px; font-weight: 800; background: linear-gradient(90deg, #9b6829, #e3b75e); }
.wild-gem { position: absolute; z-index: 4; right: 3px; bottom: 3px; display: grid; place-items: center; width: 13px; height: 13px; color: #fff5cc; font-size: 7px; border-radius: 50%; background: #bd4238; box-shadow: 0 0 5px rgba(189,66,56,.55); }
.card-corner { position: absolute; z-index: 2; left: 4px; top: 3px; display: flex; flex-direction: column; align-items: center; line-height: .9; }
.card-rank { font: 800 14px/.9 Arial, sans-serif; letter-spacing: -.06em; }
.card-suit { margin-top: 3px; font-size: 10px; }
.card-center-suit { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: 29px; opacity: .88; text-shadow: 0 1px 0 white; }
.card-watermark { position: absolute; right: -2px; bottom: -9px; font: 900 42px/1 serif; opacity: .05; }
.joker-card { background: linear-gradient(145deg, #fffdf7, #ede6d7); }
.joker-card.big { color: #b93636; }
.joker-card.small { color: #244b53; }
.joker-word { position: absolute; left: 7px; top: 7px; font: 800 7px/1 Arial; letter-spacing: .08em; writing-mode: vertical-rl; }
.joker-figure { position: absolute; right: 3px; bottom: 5px; width: 33px; height: 50px; opacity: .92; }
.joker-title { position: absolute; right: 3px; top: 5px; padding: 2px; color: #fbf0d5; font: 800 7px/1 serif; border-radius: 3px; background: currentColor; box-shadow: inset 0 0 0 10px rgba(0,0,0,.08); }
.joker-title span { filter: invert(1); }

.action-dock { position: absolute; z-index: 18; right: max(8px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 124px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.action-button {
  height: 38px;
  padding: 4px 7px;
  color: #cadbd4;
  border: 1px solid rgba(199, 220, 212, .16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31, 71, 58, .88), rgba(6, 30, 23, .94));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 5px 12px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .14s, filter .16s, opacity .12s, border-color .16s, box-shadow .16s;
}
.action-button span { display: block; font-size: 11px; font-weight: 700; }
.action-button small { display: block; margin-top: 1px; color: #68877c; font: 500 5px/1 Arial; letter-spacing: .16em; }
.action-button.primary { grid-row: span 2; height: 82px; color: #2d210f; border-color: #f6d99a; border-radius: 13px; background: linear-gradient(145deg, #f8dfa4 0%, #d6a557 52%, #9f672e 100%); box-shadow: inset 0 1px #fff2c9, inset 0 -3px rgba(94,54,14,.18), 0 6px 18px rgba(209,151,58,.24); }
.action-button.primary span { font: 900 18px/1.2 "Noto Serif SC", serif; text-shadow: 0 1px rgba(255,255,255,.35); }
.action-button.primary small { color: rgba(65,43,15,.58); }
.action-button:active:not(:disabled) { transform: translateY(2px) scale(.97); filter: brightness(.92); }
.action-button:disabled { opacity: .31; filter: saturate(.4); cursor: default; }
.auto-button { grid-column: 1 / -1; height: 23px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #718e83; font-size: 8px; border: 1px solid rgba(199,220,212,.1); border-radius: 8px; background: rgba(2, 18, 14, .72); cursor: pointer; transition: transform .12s, color .16s, border-color .16s, box-shadow .16s; }
.auto-button i { width: 5px; height: 5px; border-radius: 50%; background: #496158; }
.auto-button.is-on { color: #edcd86; border-color: rgba(231,194,124,.26); }
.auto-button.is-on i { background: #efbd5d; box-shadow: 0 0 7px #efbd5d; }

.toast { position: absolute; z-index: 80; left: 50%; top: 56px; padding: 6px 16px; color: #f5dfb3; font-size: 9px; border: 1px solid rgba(233,197,124,.25); border-radius: 14px; background: rgba(4,19,15,.9); box-shadow: 0 8px 22px rgba(0,0,0,.3); opacity: 0; transform: translate(-50%, -8px); transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.fx-layer { z-index: 70; overflow: hidden; }
.fx-burst { position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.92), rgba(255,202,104,.32) 10%, transparent 38%); animation: screen-flash .72s ease-out both; }
.fx-burst::before { content: ""; position: absolute; inset: -35%; background: repeating-conic-gradient(from 4deg at 50% 48%, rgba(255,224,148,.18) 0 2deg, transparent 2deg 14deg); animation: ray-turn 1.1s ease-out both; }
.fx-burst > i { position: absolute; left: 50%; top: 48%; width: 22vmin; height: 22vmin; border: 1px solid rgba(255,224,156,.72); border-radius: 50%; transform: translate(-50%,-50%); animation: shockwave .9s ease-out both; }
.fx-burst > i:nth-child(2) { animation-delay: .12s; }
.fx-burst > i:nth-child(3) { animation-delay: .24s; }
.fx-burst.is-flush { filter: hue-rotate(80deg); }
.fx-title { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); font: 900 clamp(32px, 7vw, 64px)/1 "Noto Serif SC", serif; color: #ffe6a1; letter-spacing: .12em; text-shadow: 0 0 8px #fff1bd, 0 0 28px #e6623e, 0 5px 25px rgba(0,0,0,.8); animation: fx-title 1.15s both; }
.fx-particle { position: absolute; left: 50%; top: 48%; width: var(--size); height: calc(var(--size) * 3.6); border-radius: 50%; background: linear-gradient(#fff8d0, #e5964a 45%, transparent); transform: rotate(var(--r)) translateY(-20px); transform-origin: 50% 0; animation: particle .9s var(--wait) cubic-bezier(.12,.7,.2,1) both; box-shadow: 0 0 5px #ffd989; }
.flying-stack { position: fixed; z-index: 60; display: flex; pointer-events: none; transition: transform .44s cubic-bezier(.16,.82,.22,1), opacity .4s ease-in; filter: drop-shadow(0 9px 8px rgba(0,0,0,.38)); }
.flying-stack i { width: 25px; height: 37px; margin-left: -16px; border-radius: 3px; background: #fff8e9; border: 1px solid #b99d6a; box-shadow: 0 3px 7px rgba(0,0,0,.4); }
.flying-stack i:first-child { margin-left: 0; }

dialog { color: var(--ivory); }
dialog::backdrop { background: rgba(1, 9, 7, .66); backdrop-filter: blur(4px); }
.sheet-dialog,
.result-dialog { position: relative; width: 300px; padding: 18px; overflow: hidden; border: 1px solid rgba(231,194,124,.28); border-radius: 18px; background: linear-gradient(145deg, rgba(15,59,47,.97), rgba(3,23,18,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.06); }
.dialog-shine { position: absolute; width: 180px; height: 180px; right: -80px; top: -110px; border-radius: 50%; background: rgba(220,178,92,.11); filter: blur(30px); }
.dialog-heading { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; font: 700 16px "Noto Serif SC", serif; border-bottom: 1px solid rgba(255,255,255,.08); }
.dialog-heading button { color: #829e94; font-size: 22px; border: 0; background: none; cursor: pointer; }
.setting-row { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; }
.setting-row b, .setting-row span { display: block; }
.setting-row b { font-size: 11px; }
.setting-row span { margin-top: 3px; color: #78958a; font-size: 8px; }
.switch { position: relative; width: 35px; height: 19px; padding: 0; border: 0; border-radius: 12px; background: #19352c; cursor: pointer; }
.switch i { position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; border-radius: 50%; background: #71887f; transition: .2s; }
.switch.is-on { background: #8c682f; }
.switch.is-on i { left: 18px; background: #ffe1a1; box-shadow: 0 0 8px rgba(255,217,139,.4); }
.dialog-action { width: 100%; height: 34px; color: #d4e2dc; font-weight: 700; border: 1px solid rgba(215,232,225,.15); border-radius: 9px; background: rgba(255,255,255,.06); cursor: pointer; }
.dialog-action.gold { color: #30210d; border-color: #f5d592; background: linear-gradient(145deg, #f4d997, #b77b38); }
.result-dialog { text-align: center; }
.victory-mark { color: #9cb5ab; font-size: 8px; letter-spacing: .28em; }
.result-dialog h2 { margin: 10px 0 7px; color: #ffe2a0; font: 900 27px/1.2 "Noto Serif SC", serif; }
.result-dialog p { min-height: 32px; margin: 0 0 13px; color: #9eb8ae; font-size: 10px; line-height: 1.7; }
.rotate-notice { display: none; }
.reduce-fx .aura,
.reduce-fx .silk { display: none; }

@property --timer-angle { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

@keyframes breathe { to { transform: translate(6vw, 3vw) scale(1.16); opacity: .4; } }
@keyframes countdown-ring { from { --timer-angle: 360deg; } to { --timer-angle: 0deg; } }
@keyframes deal-in { from { opacity: 0; transform: translateY(-25px) rotate(calc(var(--tilt) - 4deg)) scale(.78); filter: blur(1px); } 72% { transform: translateY(2px) rotate(var(--tilt)) scale(1.015); } }
@keyframes fx-title { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 22% { opacity: 1; transform: translate(-50%,-50%) scale(1.13); } 65% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-58%) scale(1.08); } }
@keyframes particle { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) translateY(calc(var(--distance) * -1)) scale(.25); } }
@keyframes screen-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shockwave { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(4.5); border-width: 4px; } }
@keyframes ray-turn { from { opacity: 0; transform: scale(.5) rotate(-8deg); } 24% { opacity: 1; } to { opacity: 0; transform: scale(1.15) rotate(8deg); } }

@media (hover: hover) {
  .round-button:hover:not(:active) { color: #f0d493; border-color: rgba(231,194,124,.34); background: rgba(224,184,104,.09); box-shadow: 0 0 14px rgba(224,184,104,.14); transform: translateY(-1px); }
  .action-button:hover:not(:active):not(:disabled) { filter: brightness(1.14); border-color: rgba(231,205,147,.34); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 7px 18px rgba(0,0,0,.32), 0 0 15px rgba(88,190,153,.09); transform: translateY(-1px) scale(1.015); }
  .action-button.primary:hover:not(:active):not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 1px #fff2c9, inset 0 -3px rgba(94,54,14,.18), 0 8px 22px rgba(209,151,58,.32), 0 0 18px rgba(242,195,105,.22); }
  .auto-button:hover:not(:active) { color: #c4d9d0; border-color: rgba(199,220,212,.24); transform: translateY(-1px); }
  .hand-card-wrap:hover:not(.selected) { transform: translateY(calc(var(--arc) - 7px)) rotate(var(--fan)); z-index: 35 !important; }
  .hand-card-wrap:hover .card::before { left: 125%; opacity: .62; }
  .dialog-action:hover { filter: brightness(1.12); box-shadow: 0 0 14px rgba(231,194,124,.12); }
}

@media (max-width: 720px) {
  .brand-lockup, .match-meta { width: 150px; }
  .room-number { display: none; }
  .table-inlay { inset-inline: 43px; }
  .seat-left { left: 8px; }
  .seat-right { right: 8px; }
  .hand-dock { left: 84px; right: 158px; }
  .action-dock { right: 6px; width: 116px; }
  .hand-card-wrap { flex-basis: 45px; width: 45px; margin-left: -32px; }
}

@media (max-width: 900px) and (max-height: 420px) {
  .hand-dock { right: calc(168px + env(safe-area-inset-right)); }
  .action-dock { right: max(8px, env(safe-area-inset-right)); width: 124px; }
}

@media (max-height: 350px) {
  .match-bar { height: 40px; }
  .arena { top: 40px; }
  .seat-top { top: 4px; }
  .avatar-shell, .avatar-shell svg { width: 42px; height: 42px; }
  .avatar-shell { flex-basis: 42px; }
  .trick-stage { height: 108px; transform: translate(-50%, -59%); }
  .turn-banner { bottom: 105px; }
  .hand-dock { height: 105px; }
  .hand-card-wrap { height: 74px; }
  .action-button.primary { height: 74px; }
  .action-dock { bottom: 7px; }
}

@media (orientation: portrait) and (max-width: 620px) {
  .game-shell { min-width: 0; }
  .match-bar, .arena, .toast { visibility: hidden; }
  .rotate-notice { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 40%, #144b3c, #04130f 68%); }
  .phone-icon { width: 44px; height: 68px; display: grid; place-items: center; margin-bottom: 8px; color: #edca80; font-size: 24px; border: 2px solid #c7a765; border-radius: 8px; transform: rotate(90deg); }
  .rotate-notice b { color: #f3ddb0; font: 700 19px "Noto Serif SC", serif; }
  .rotate-notice span { color: #78978b; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}