:root {
  --background: oklch(0.16 0.035 163);
  --foreground: oklch(0.96 0.02 95);
  --card: oklch(0.96 0.022 95);
  --card-foreground: oklch(0.25 0.035 163);
  --secondary: oklch(0.91 0.035 95);
  --secondary-foreground: oklch(0.3 0.04 163);
  --muted: oklch(0.88 0.025 95);
  --muted-foreground: oklch(0.68 0.025 150);
  --primary: oklch(0.42 0.1 159);
  --primary-foreground: oklch(0.98 0.015 95);
  --accent: oklch(0.82 0.12 92);
  --accent-foreground: oklch(0.25 0.035 163);
  --destructive: oklch(0.58 0.18 28);
  --border: oklch(0.78 0.05 92 / 0.28);
  --input: oklch(0.78 0.05 92 / 0.4);
  --ring: oklch(0.82 0.12 92);
  --radius: .625rem;
  --radius-xs: calc(var(--radius) * .5);
  --radius-sm: calc(var(--radius) * .75);
  --radius-md: calc(var(--radius) * .875);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.5);
  --font-sans: "IBM Plex Sans KR", "Geist", "Pretendard Variable", "Pretendard", "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-display: "Gowun Batang", "Noto Serif KR", "Nanum Myeongjo", "Iowan Old Style", Georgia, serif;
  --felt: #0a2f26;
  --felt-deep: #06231d;
  --cream: #f5f2e8;
  --cream-2: #ebe6d7;
  --ink: #17332c;
  --muted: #aeb7a5;
  --gold: #d8b86c;
  --gold-light: #f3d78d;
  --line: rgba(224, 210, 163, .24);
  --green: #19b768;
  --blue: #2b80ed;
  --shadow: 0 22px 55px rgba(0, 0, 0, .28);
  font-family: var(--font-sans);
  color: var(--cream);
  background: var(--felt-deep);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--foreground); background: var(--background); font-family: var(--font-sans); }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.hidden { display: none !important; }
.site-shell { min-height: 100vh; position: relative; overflow: hidden; }
.lobby-noise, .game-felt { position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: radial-gradient(rgba(255,255,255,.09) .7px, transparent .7px), radial-gradient(rgba(0,0,0,.24) .7px, transparent .7px); background-position: 0 0, 4px 4px; background-size: 8px 8px; mix-blend-mode: soft-light; }
.lobby-noise { background-color: var(--felt); }
.game-felt { background-color: #12533c; opacity: .42; }
.topbar { height: 76px; display: flex; align-items: center; padding: 0 6.5vw; gap: 44px; position: relative; z-index: 5; border-bottom: 1px solid rgba(224,210,163,.18); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); background: transparent; letter-spacing: .14em; font-size: 13px; font-weight: 900; white-space: nowrap; }
.brand em { color: var(--gold); font-style: normal; font-size: 11px; }
.brand-mark { width: 31px; height: 31px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font-size: 17px; box-shadow: inset 0 0 0 4px rgba(216,184,108,.06); }
.main-nav { display: flex; gap: 3px; }
.main-nav button, .sound-toggle { color: rgba(245,242,232,.62); background: transparent; padding: 10px 14px; font-size: 12px; letter-spacing: .04em; }
.main-nav button:hover, .main-nav button.active { color: var(--gold-light); }
.main-nav button.active::after { content: ""; display: block; width: 4px; height: 4px; margin: 7px auto 0; border-radius: 50%; background: var(--gold); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sound-toggle { border: 1px solid rgba(224,210,163,.3); border-radius: 99px; color: var(--gold-light); }
.profile-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--felt); background: var(--gold); font-size: 12px; font-weight: 900; }
.landing { background: radial-gradient(circle at 84% 21%, rgba(34, 137, 91, .17), transparent 26%), linear-gradient(120deg, #082c22, #0b382c 45%, #06241d); }
.landing-main, .lobby-main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 74px 32px 72px; }
.hero-copy { min-height: 305px; }
.eyebrow, .panel-kicker { color: var(--gold); font-size: 10px; letter-spacing: .22em; font-weight: 800; }
.eyebrow span { display: inline-block; width: 22px; height: 1px; margin-right: 8px; vertical-align: middle; background: var(--gold); }
.hero-copy h1 { max-width: 650px; margin: 14px 0 20px; font-family: Georgia, "Noto Serif KR", serif; font-weight: 500; font-size: clamp(58px, 8vw, 104px); line-height: .93; letter-spacing: -.09em; color: var(--cream); }
.hero-copy h1 strong { color: var(--gold-light); font-weight: 500; }
.hero-copy p { color: rgba(245,242,232,.68); font-size: 14px; line-height: 1.75; }
.hero-foot { display: flex; gap: 15px; align-items: center; color: var(--gold); margin-top: 25px; font-size: 10px; letter-spacing: .08em; }
.hero-foot i { width: 1px; height: 11px; background: rgba(216,184,108,.45); }
.demo-cta { display: flex; align-items: center; gap: 12px; width: min(100%, 330px); margin-top: 28px; padding: 12px 14px; color: var(--cream); border: 1px solid rgba(243,215,141,.38); border-radius: 10px; background: linear-gradient(120deg, rgba(243,215,141,.16), rgba(26,110,77,.24)); box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.12); text-align: left; transition: transform .2s, border-color .2s, background .2s; }
.demo-cta:hover { transform: translateY(-3px); border-color: var(--gold-light); background: linear-gradient(120deg, rgba(243,215,141,.25), rgba(26,110,77,.34)); }
.demo-cta-mark { display: grid; place-items: center; width: 30px; height: 30px; padding-left: 2px; color: var(--felt); border-radius: 50%; background: var(--gold-light); font-size: 10px; }
.demo-cta span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.demo-cta b { color: var(--gold-light); font-size: 11px; letter-spacing: .04em; }
.demo-cta small { color: rgba(245,242,232,.55); font-size: 9px; }
.demo-cta > strong { color: var(--gold-light); font-size: 21px; font-weight: 400; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.entry-card { min-height: 420px; padding: 26px 30px 30px; color: var(--ink); background: var(--cream); box-shadow: var(--shadow); position: relative; }
.entry-card::after { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(71,68,46,.12); }
.entry-card > * { position: relative; z-index: 1; }
.panel-kicker { display: flex; align-items: center; gap: 10px; color: #637062; letter-spacing: .1em; }
.panel-kicker b { margin-left: auto; color: #958c74; font-size: 11px; font-weight: 500; }
.panel-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #245a4b; color: var(--cream); font-size: 21px; font-weight: 300; }
.panel-icon.door { background: #e9eee0; color: #376957; font-size: 18px; }
.entry-card h2 { margin: 19px 0 6px; font-family: Georgia, "Noto Serif KR", serif; font-size: 31px; font-weight: 500; }
.panel-copy { margin: 0 0 24px; color: #7a7b6c; font-size: 12px; }
.form-stack { display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-label { display: grid; gap: 7px; color: #6c6d60; font-size: 10px; letter-spacing: .09em; font-weight: 800; }
.field-label input, .field-label select { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #d8d3c0; border-radius: 2px; color: var(--ink); background: rgba(255,255,255,.56); font-size: 13px; letter-spacing: 0; }
.field-label input::placeholder { color: #b3b1a6; }
.privacy-toggle { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 8px; color: #707367; font-size: 11px; }
.privacy-toggle input { accent-color: #2a6a52; }
.privacy-toggle small { color: #9a9b8d; font-size: 10px; text-align: right; }
.primary-cta, .start-button { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; color: var(--cream); background: #1f5d4b; font-size: 12px; font-weight: 800; letter-spacing: .05em; transition: transform .2s, background .2s; }
.primary-cta:hover, .start-button:hover:not(:disabled) { transform: translateY(-2px); background: #28735c; }
.primary-cta span, .start-button span { color: var(--gold-light); font-size: 22px; font-weight: 300; }
.join-cta { margin-top: 14px; }
.secondary-cta { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 13px; padding: 0; color: #6f776a; background: transparent; font-size: 11px; font-weight: 800; }
.secondary-cta span { color: #a39a7d; font-size: 18px; }
.landing-rule { display: flex; gap: 12px; align-items: center; color: rgba(245,242,232,.32); border-top: 1px solid rgba(224,210,163,.17); padding-top: 17px; margin-top: 42px; font-size: 10px; letter-spacing: .13em; }
.landing-rule span { color: var(--gold); font-size: 16px; }.landing-rule i { margin-left: auto; font-style: normal; letter-spacing: .05em; }
.back-link { padding: 0; color: var(--gold-light); background: transparent; font-size: 11px; }
.lobby-shell { background: linear-gradient(135deg, #092d24, #0e4433); }
.lobby-main { max-width: 1120px; padding-top: 52px; }.page-heading { margin: 28px 0 30px; }.page-heading h1, .lobby-top h1, .rules-page h1 { margin: 14px 0 8px; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(38px, 5vw, 63px); font-weight: 500; letter-spacing: -.06em; }.page-heading p, .lobby-top p { margin: 0; color: rgba(245,242,232,.62); font-size: 13px; }
.rooms-list, .panel { color: var(--ink); background: var(--cream); box-shadow: var(--shadow); }.rooms-list { padding: 26px 30px; }.rooms-list-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #ddd6c3; }.rooms-list h2 { margin: 0; font-family: Georgia, serif; font-size: 26px; font-weight: 500; }.rooms-list h2 span { font-family: system-ui; color: #a09b8c; font-size: 12px; }.rooms-list-head .secondary-cta { width: auto; gap: 25px; margin: 0; color: #1f5d4b; }.room-row { width: 100%; display: grid; grid-template-columns: 42px 1fr 100px 28px; align-items: center; gap: 15px; padding: 20px 4px; color: var(--ink); background: transparent; border-bottom: 1px solid #e0dbcb; text-align: left; transition: padding .2s, background .2s; }.room-row:hover { padding-left: 10px; padding-right: 10px; background: rgba(255,255,255,.42); }.room-index { color: #a29c89; font: 12px Georgia, serif; }.room-info { display: grid; gap: 5px; }.room-info strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }.room-info small, .room-players small { color: #98978b; font-size: 10px; }.room-players { display: grid; gap: 4px; text-align: right; }.room-players b { color: #1f5d4b; font-size: 13px; }.room-arrow { color: #9a916e; font-size: 20px; }.empty-rooms { padding: 65px 20px; color: #849181; text-align: center; }.empty-rooms span { font-size: 36px; color: #779a87; }.empty-rooms h2 { margin: 10px 0 4px; font-family: Georgia, serif; font-weight: 500; }.empty-rooms p { margin: 0; font-size: 12px; }
.lobby-top { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin: 28px 0 34px; }.entry-code { min-width: 180px; padding: 13px 15px; border: 1px solid rgba(224,210,163,.32); color: var(--gold-light); }.entry-code small { display: block; color: rgba(245,242,232,.55); font-size: 9px; letter-spacing: .15em; }.entry-code strong { display: block; margin: 5px 0 8px; font-size: 22px; letter-spacing: .16em; }.entry-code button { padding: 0; color: var(--gold); background: transparent; font-size: 10px; }.lobby-grid { display: grid; grid-template-columns: 1fr .86fr; gap: 18px; }.lobby-card { padding: 26px; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }.panel-heading h2 { margin: 8px 0 18px; font: 27px Georgia, serif; }.panel-heading h2 em { color: #a19c88; font: 12px system-ui; font-style: normal; }.live-pill { color: #258b60; font-size: 10px; letter-spacing: .1em; }.member-list { display: grid; gap: 8px; }.member-row { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 8px 9px; border: 1px solid #e4dece; background: rgba(255,255,255,.35); }.member-row > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }.member-row strong { font-size: 13px; }.member-row small { color: #9a9c8e; font-size: 10px; }.member-chip { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; border-radius: 50%; background: var(--member-color); font-weight: 900; }.team-label { color: #8e907f; font-size: 10px; font-weight: 600; }.empty-seat { color: #aaa99d; border-style: dashed; }.empty-seat > span:first-child { width: 32px; text-align: center; color: #a5a494; font-size: 20px; }.empty-seat small { margin-left: auto; }.invite-mini { display: flex; gap: 11px; align-items: center; margin-top: 19px; padding-top: 17px; border-top: 1px solid #ddd6c3; color: #8c8c7e; font-size: 10px; }.invite-mini strong { color: #1f5d4b; font-size: 16px; letter-spacing: .12em; }.invite-mini button { margin-left: auto; color: #1f5d4b; background: transparent; font-size: 10px; font-weight: 800; }.rules-card { background: linear-gradient(145deg, #f5f2e8, #e9eddf); }.rules-card > p { color: #737a6b; font-size: 12px; line-height: 1.7; }.sequence-mark { color: #a08d58; font-size: 20px; }.turn-reveal { min-height: 132px; display: grid; place-items: center; align-content: center; gap: 6px; margin: 22px 0; border: 1px dashed #c8c3b2; background: rgba(255,255,255,.4); text-align: center; }.turn-reveal.revealed { border-color: #9cb9a4; background: radial-gradient(circle, rgba(74,166,108,.2), transparent 64%); animation: revealGlow .9s ease both; }.turn-reveal strong { color: #1b664e; font: 32px Georgia, serif; animation: winnerPop .75s cubic-bezier(.2,1.45,.4,1) both; }.turn-reveal small { color: #889181; font-size: 10px; }.question-mark { color: #9d9c8b; font: 46px Georgia, serif; }.winner-sparkle { color: #c79d40; animation: sparkle .9s ease infinite alternate; }.rule-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 19px; }.rule-facts span { padding: 12px 5px; color: #8d8e80; background: rgba(255,255,255,.48); text-align: center; font-size: 10px; }.rule-facts b { display: block; color: #23644e; font: 19px Georgia, serif; margin-bottom: 5px; }.start-button { margin-top: 8px; color: #285e4d; background: #dfe8da; }.start-button:disabled { cursor: not-allowed; opacity: .5; }.host-wait { padding: 15px; color: #80867a; background: rgba(255,255,255,.5); font-size: 11px; line-height: 1.6; }
.game-shell { min-height: 100vh; color: var(--cream); background: #0d4b37; }.game-topbar { height: 66px; display: flex; align-items: center; gap: 34px; padding: 0 28px; border-bottom: 1px solid rgba(224,210,163,.22); position: relative; z-index: 4; }.game-room-name { color: rgba(245,242,232,.74); font-size: 12px; letter-spacing: .05em; }.game-room-name small { color: rgba(245,242,232,.4); font-size: 10px; }.room-live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #5fe49a; box-shadow: 0 0 10px #5fe49a; }.light-button { color: var(--gold-light); }.leave-button { padding: 8px 12px; border: 1px solid rgba(224,210,163,.3); border-radius: 2px; color: rgba(245,242,232,.75); background: transparent; font-size: 11px; }.game-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 218px minmax(460px, 1fr) 260px; gap: 20px; max-width: 1440px; margin: 0 auto; padding: 26px 28px 45px; }.side-panel { align-self: start; color: var(--ink); background: rgba(245,242,232,.98); box-shadow: 0 14px 35px rgba(0,0,0,.2); }.players-panel { padding: 17px; }.side-heading { display: flex; justify-content: space-between; align-items: center; color: #265c4b; padding-bottom: 12px; border-bottom: 1px solid #dbd7c8; font: 14px Georgia, serif; }.side-heading-count { color: #969788; font: 10px system-ui; }.player-card { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 4px; border-bottom: 1px solid #e7e2d5; transition: background .2s; }.player-card.is-me { background: rgba(216,184,108,.11); }.player-card.active-turn { margin: 0 -5px; padding-left: 9px; padding-right: 9px; background: #e1efdd; }.player-token { display: grid; place-items: center; flex: none; width: 29px; height: 29px; color: #fff; border-radius: 50%; background: var(--token); font-size: 11px; font-weight: 900; }.player-details { display: grid; gap: 3px; min-width: 0; }.player-details strong { overflow: hidden; color: #345347; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.player-details strong em { color: #9b7e3a; font-size: 9px; font-style: normal; }.player-details small { color: #959a8c; font-size: 9px; }.player-light { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #42cf79; box-shadow: 0 0 0 3px rgba(66,207,121,.18), 0 0 11px #42cf79; animation: turnPulse 1.3s infinite; }.team-scoreboard { margin-top: 19px; }.score-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; padding: 8px 0; color: #777f74; font-size: 10px; }.score-row i { width: 8px; height: 8px; border-radius: 50%; }.score-row strong { color: #255c4b; }.rules-mini, .rules-strip { padding-top: 13px; color: #8c9285; border-top: 1px solid #dcd7c8; font-size: 9px; line-height: 1.6; }.table-center { min-width: 0; }.turn-banner { min-height: 61px; display: flex; align-items: center; gap: 11px; margin-bottom: 13px; padding: 9px 14px; border: 1px solid rgba(224,210,163,.25); background: rgba(7,39,30,.4); }.turn-banner.your-turn { border-color: rgba(90,228,151,.58); box-shadow: 0 0 26px rgba(75,204,130,.1); }.turn-banner.urgent { border-color: #f3b15c; }.turn-icon { display: grid; place-items: center; width: 31px; height: 31px; color: var(--gold-light); border: 1px solid rgba(216,184,108,.45); border-radius: 50%; position: relative; }.turn-banner.your-turn .turn-icon { color: #83f0ae; border-color: #83f0ae; }.turn-light { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid transparent; }.your-turn .turn-light { border-color: rgba(93,235,148,.48); animation: turnPulse 1.3s infinite; }.turn-banner > div:nth-child(2) { display: grid; gap: 2px; flex: 1; }.turn-banner small { color: rgba(245,242,232,.53); font-size: 9px; letter-spacing: .12em; }.turn-banner strong { color: var(--cream); font-size: 12px; }.turn-timer { width: 94px; color: var(--gold-light); text-align: right; font: 19px Georgia, serif; }.turn-timer i { display: block; height: 2px; margin-top: 5px; background: var(--gold); transition: width 1s linear; }.turn-banner.urgent .turn-timer { color: #f8a76c; }.turn-banner.urgent .turn-timer i { background: #f8a76c; }
.board-frame { padding: 10px; background: #1b5f44; border: 1px solid rgba(216,184,108,.63); box-shadow: 0 19px 38px rgba(0,0,0,.27), inset 0 0 0 5px rgba(6,35,29,.22); }.board-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; aspect-ratio: 1 / 1; padding: 4px; background: #104631; }.board-cell { min-width: 0; position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 1px; color: #1a312b; border: 0; border-radius: 4px; background: linear-gradient(145deg, #fcfaf0, #e8e3d4); box-shadow: 0 2px 2px rgba(0,0,0,.25); transition: transform .18s, box-shadow .18s, filter .18s; }.board-cell:disabled { cursor: default; }.board-cell.target-cell { cursor: pointer; box-shadow: 0 0 0 2px #84efad, 0 0 15px rgba(105,239,157,.72); animation: targetPulse 1.1s ease-in-out infinite; z-index: 1; }.board-cell.target-cell:hover { transform: scale(1.1); z-index: 2; }.board-cell.last-move { animation: lastMovePulse 1.4s ease both; }.cell-rank { position: absolute; top: 8%; left: 0; width: 100%; text-align: center; font-size: clamp(10px, 1.3vw, 17px); font-weight: 900; line-height: 1; }.cell-suit { margin-top: 19%; font-size: clamp(9px, 1.25vw, 16px); line-height: 1; }.red-suit { color: #c73449 !important; }.free-cell { color: #af8b42; background: radial-gradient(circle, #f7e6ab, #b99549); box-shadow: inset 0 0 0 3px rgba(92,69,27,.22), 0 2px 2px rgba(0,0,0,.27); }.free-star { font-size: clamp(13px, 2vw, 26px); text-shadow: 0 1px 2px rgba(89,68,30,.4); }.chip-marker { position: absolute; inset: 11%; display: grid; place-items: center; border: clamp(2px, .35vw, 4px) solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; background: var(--chip-color); box-shadow: inset 0 0 0 2px rgba(0,0,0,.16), 0 3px 5px rgba(0,0,0,.28); font-size: clamp(12px, 1.65vw, 22px); font-weight: 900; animation: chipDrop .44s cubic-bezier(.2,1.5,.5,1) both; }.sequence-mark .chip-marker { box-shadow: 0 0 0 2px #f8d982, 0 0 14px var(--chip-color), inset 0 0 0 2px rgba(255,255,255,.7); }.last-ring { position: absolute; inset: -4px; border: 2px solid var(--gold-light); border-radius: 6px; animation: lastRing 1.2s ease-out infinite; }.hand-zone { margin-top: 17px; padding: 17px 18px 13px; border: 1px solid rgba(224,210,163,.24); background: rgba(7,39,30,.46); }.hand-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.hand-header > div:first-child { display: flex; align-items: end; gap: 10px; }.hand-header strong { color: var(--gold-light); font: 28px Georgia, serif; line-height: .8; }.hand-header strong small { margin-left: 4px; color: rgba(245,242,232,.56); font: 11px system-ui; }.hand-controls { display: flex; gap: 5px; }.sort-button { padding: 7px 9px; color: rgba(245,242,232,.55); border: 1px solid rgba(224,210,163,.2); background: transparent; font-size: 10px; }.sort-button.active { color: var(--gold-light); border-color: rgba(216,184,108,.64); background: rgba(216,184,108,.1); }.hand-cards { display: flex; gap: 9px; min-height: 119px; align-items: flex-end; overflow-x: auto; padding: 7px 5px 5px; }.playing-card { position: relative; flex: 1 0 70px; width: 70px; max-width: 104px; height: 111px; color: #162d28; border: 1px solid #bdb8a5; border-radius: 6px; background: linear-gradient(145deg, #fffdf3, #e5dfcd); box-shadow: 0 5px 8px rgba(0,0,0,.2); transition: transform .18s, box-shadow .18s; }.playing-card:hover:not(:disabled), .playing-card.card-selected { transform: translateY(-14px) scale(1.04); z-index: 2; }.playing-card.card-selected { border: 2px solid var(--gold-light); box-shadow: 0 0 0 2px rgba(216,184,108,.35), 0 16px 22px rgba(0,0,0,.34); animation: selectedCard .8s ease-in-out infinite alternate; }.playing-card.last-played-card { border-color: #79dda0; }.card-corner { position: absolute; top: 7px; left: 9px; display: grid; color: inherit; font-size: 16px; font-weight: 900; line-height: .85; text-align: left; }.card-corner i { font-style: normal; font-size: 13px; }.card-center { display: grid; place-items: center; height: 100%; color: currentColor; font-size: 32px; }.card-center small { display: block; margin-top: 3px; color: #688275; font-size: 8px; font-weight: 800; }.jack-glyph { color: #1e654c; font: 30px Georgia, serif; }.dead-badge { position: absolute; right: 5px; bottom: 5px; padding: 3px 4px; color: #aa6841; background: #ffe3c1; font-size: 7px; font-weight: 900; }.hand-help { margin: 6px 0 0; color: rgba(245,242,232,.42); text-align: center; font-size: 10px; }.dead-swap { display: block; margin: 11px auto 0; padding: 8px 12px; color: #f3c675; border: 1px solid rgba(216,184,108,.45); background: rgba(216,184,108,.1); font-size: 10px; }.dead-swap:disabled { opacity: .45; }.chat-panel { padding: 17px; min-height: 430px; display: flex; flex-direction: column; }.chat-live { color: #299462; font: 9px system-ui; }.chat-messages { display: grid; align-content: start; gap: 11px; flex: 1; padding: 14px 0; overflow: auto; }.chat-message { padding: 8px 10px; border-left: 2px solid #bdc9b0; background: #eef0e5; }.chat-message.mine { border-left-color: #caa65e; background: #f1ead6; }.chat-message strong { color: #34644f; font-size: 10px; }.chat-message p { margin: 4px 0 0; color: #6f7b6e; font-size: 10px; line-height: 1.5; }.chat-empty { align-self: center; color: #a0a397; text-align: center; }.chat-empty span { display: block; margin-bottom: 8px; font-size: 32px; color: #88a291; }.chat-empty p { font-size: 10px; line-height: 1.6; }.chat-form { display: flex; gap: 5px; padding-top: 11px; border-top: 1px solid #ddd8ca; }.chat-form input { min-width: 0; flex: 1; height: 31px; padding: 0 8px; color: #435f50; border: 1px solid #d2cebf; background: #faf8ee; font-size: 10px; }.chat-form button { width: 31px; color: #fff; background: #28684f; }.rules-strip { margin-top: 15px; padding-bottom: 0; }.sequence-celebration { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(3,24,18,.66); backdrop-filter: blur(5px); animation: fadeIn .25s ease both; }.celebration-card { min-width: min(490px, 100%); padding: 34px; color: #fff8e7; border: 1px solid rgba(237,206,124,.8); background: radial-gradient(circle at 50% 22%, #2e815b, #0d3f2e 66%); box-shadow: 0 0 80px rgba(118,237,160,.23), 0 24px 70px rgba(0,0,0,.55); text-align: center; }.celebration-label { color: var(--gold-light); font-size: 10px; letter-spacing: .27em; }.celebration-card strong { display: block; margin: 13px 0 19px; font: 42px Georgia, serif; color: #fff4c6; }.celebration-chips { display: flex; justify-content: center; gap: 8px; }.celebration-chips i { display: grid; place-items: center; width: 54px; height: 54px; color: white; border: 4px solid rgba(255,255,255,.65); border-radius: 50%; background: #19b768; box-shadow: 0 0 19px rgba(67,235,150,.9), inset 0 0 0 2px rgba(0,0,0,.18); font-style: normal; font-weight: 900; animation: chipWin .58s var(--delay) cubic-bezier(.16,1.5,.5,1) both; }.celebration-card p { color: rgba(255,248,231,.66); font-size: 12px; }.celebration-card button { margin-top: 10px; padding: 11px 23px; color: #204e3e; background: var(--gold-light); font-weight: 900; }
.rules-page { max-width: 1100px; }.rules-page h1 { margin-bottom: 32px; }.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.rule-card { padding: 28px; min-height: 240px; }.rule-number { color: #a28e5c; font: 13px Georgia, serif; }.rule-card h2 { margin: 45px 0 10px; font: 26px Georgia, serif; }.rule-card p { color: #737b70; font-size: 12px; line-height: 1.8; }
.toast { position: fixed; left: 50%; bottom: 23px; z-index: 30; transform: translate(-50%, 20px); opacity: 0; padding: 11px 16px; color: #f7f1de; border: 1px solid rgba(224,210,163,.34); background: #143f31; box-shadow: var(--shadow); pointer-events: none; font-size: 11px; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes targetPulse { 0%, 100% { box-shadow: 0 0 0 2px #84efad, 0 0 7px rgba(105,239,157,.42); } 50% { box-shadow: 0 0 0 3px #b0ffcb, 0 0 19px rgba(105,239,157,.95); } }
@keyframes chipDrop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.14) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes lastMovePulse { 0% { transform: scale(.8); filter: brightness(1.8); } 50% { transform: scale(1.08); } 100% { transform: scale(1); filter: none; } }
@keyframes lastRing { 0% { opacity: 1; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes selectedCard { to { box-shadow: 0 0 0 3px rgba(216,184,108,.42), 0 19px 28px rgba(0,0,0,.38); } }
@keyframes turnPulse { 0%, 100% { opacity: .7; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.13); } }
@keyframes revealGlow { 0% { transform: scale(.92); opacity: .4; } 65% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
@keyframes winnerPop { 0% { transform: scale(.35) rotate(-8deg); opacity: 0; } 70% { transform: scale(1.1) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes sparkle { from { transform: scale(.75) rotate(0); } to { transform: scale(1.22) rotate(20deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chipWin { 0% { opacity: 0; transform: translateY(30px) scale(.2) rotate(-22deg); } 75% { transform: translateY(-5px) scale(1.14) rotate(5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@media (max-width: 1120px) { .game-layout { grid-template-columns: 190px minmax(400px, 1fr); }.chat-panel { grid-column: 1 / -1; min-height: 190px; }.chat-messages { grid-template-columns: repeat(3, 1fr); }.chat-form { max-width: 520px; }.chat-panel .rules-strip { display: none; } }
@media (max-width: 820px) { .topbar { padding: 0 20px; gap: 18px; }.main-nav { display: none; }.landing-main, .lobby-main { padding: 48px 18px; }.hero-copy { min-height: 270px; }.entry-grid, .lobby-grid, .rules-grid { grid-template-columns: 1fr; }.entry-card { min-height: auto; }.lobby-top { align-items: start; flex-direction: column; }.entry-code { width: 100%; }.game-topbar { padding: 0 14px; gap: 14px; }.game-room-name { display: none; }.game-layout { grid-template-columns: 1fr; gap: 12px; padding: 14px 10px 30px; }.players-panel { order: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; }.players-panel .side-heading, .team-scoreboard, .rules-mini { grid-column: 1 / -1; }.chat-panel { grid-column: auto; order: 3; }.table-center { order: 1; }.board-frame { padding: 6px; }.board-grid { gap: 2px; padding: 2px; }.cell-rank { font-size: 10px; }.cell-suit { font-size: 9px; }.hand-zone { padding: 13px 9px 10px; }.playing-card { flex-basis: 59px; width: 59px; height: 96px; }.card-corner { left: 6px; font-size: 13px; }.card-center { font-size: 25px; }.hand-controls { gap: 3px; }.sort-button { padding: 6px; font-size: 9px; }.turn-banner { padding: 8px; }.turn-timer { width: 72px; font-size: 16px; } }
@media (max-width: 520px) { .hero-copy h1 { font-size: 58px; }.hero-copy p br { display: none; }.field-row { grid-template-columns: 1fr; }.privacy-toggle { grid-template-columns: 18px 1fr; align-items: start; }.privacy-toggle small { grid-column: 2; grid-row: 2; text-align: left; }.rooms-list { padding: 18px 13px; }.rooms-list-head .secondary-cta { gap: 10px; }.room-row { grid-template-columns: 25px 1fr 58px 18px; gap: 7px; padding: 16px 0; }.room-info small { display: none; }.room-info strong { font-size: 15px; }.room-players b { font-size: 11px; }.rule-facts { grid-template-columns: 1fr; }.game-topbar .brand { font-size: 10px; }.game-topbar .brand-mark { width: 26px; height: 26px; }.leave-button { padding: 7px; font-size: 9px; }.hand-header { align-items: flex-end; }.hand-cards { gap: 6px; }.playing-card { flex-basis: 54px; width: 54px; height: 88px; }.cell-rank { font-size: 11px; }.cell-suit { font-size: 10px; }.celebration-card { padding: 25px 15px; }.celebration-card strong { font-size: 32px; }.celebration-chips i { width: 42px; height: 42px; border-width: 3px; }.chat-messages { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Source-owned shadcn-style layer: semantic tokens, restrained surfaces, and responsive primitives. */
button, input, select { border-radius: var(--radius-sm); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 20%, transparent); }
.landing { background: var(--felt-deep); }
.lobby-shell { background: var(--felt); }
.hero-copy h1, .entry-card h2, .page-heading h1, .lobby-top h1, .rules-page h1, .rooms-list h2, .room-info strong, .panel-heading h2, .turn-reveal strong, .rule-card h2, .celebration-card strong { font-family: var(--font-display); letter-spacing: -.045em; }
.hero-copy h1 { font-size: clamp(52px, 7vw, 86px); line-height: .98; }
.hero-copy p, .page-heading p, .lobby-top p, .panel-copy, .rule-card p { line-height: 1.8; }
.entry-card, .rooms-list, .panel, .side-panel { border: 1px solid color-mix(in oklab, var(--border) 76%, transparent); border-radius: var(--radius-lg); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.entry-card::after { inset: 8px; border-radius: var(--radius-sm); }
.entry-card h2 { font-size: 32px; }
.field-label input, .field-label select { border-radius: var(--radius-sm); background: color-mix(in oklab, var(--card) 76%, white); }
.privacy-toggle { grid-template-columns: 18px minmax(0, auto) minmax(0, 1fr); }
.privacy-toggle > span { display: none; }
.privacy-toggle b, .privacy-toggle small { min-width: 0; }
.primary-cta, .start-button { border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-foreground); }
.primary-cta:hover, .start-button:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 88%, white); }
.secondary-cta, .sort-button, .leave-button, .sound-toggle { border-radius: var(--radius-sm); }
.rooms-list, .panel { background: var(--card); color: var(--card-foreground); }
.rules-card { background: var(--card); }
.room-row { border-radius: var(--radius-sm); }
.board-grid { grid-auto-rows: 1fr; }
.board-cell { width: 100%; height: 100%; min-height: 0; border-radius: var(--radius-sm); }
.board-frame, .hand-zone, .turn-banner { border-radius: var(--radius); }
.playing-card { border-radius: var(--radius-sm); }
.chip-marker { min-width: 0; min-height: 0; }
.mobile-nav { display: none; }

@media (max-width: 820px) {
  .topbar { height: auto; min-height: 76px; flex-wrap: wrap; padding: 14px 20px 10px; row-gap: 10px; }
  .topbar .topbar-actions { margin-left: auto; }
  .main-nav { display: none; }
  .mobile-nav { display: grid; grid-template-columns: repeat(3, 1fr); flex-basis: 100%; order: 3; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(224, 210, 163, .16); }
  .mobile-nav button { min-height: 34px; color: rgba(245, 242, 232, .65); background: transparent; font-size: 11px; }
  .mobile-nav button.active { color: var(--gold-light); background: rgba(216, 184, 108, .1); }
  .landing-main, .lobby-main { padding-top: 38px; }
  .hero-copy { min-height: 244px; }
  .hero-copy h1 { max-width: 540px; font-size: clamp(48px, 10vw, 72px); }
  .entry-card, .lobby-card, .rooms-list { padding: 22px; }
  .game-layout { padding-inline: 12px; }
  .board-cell { border-radius: 3px; }
}

@media (max-width: 520px) {
  .topbar { padding-inline: 14px; }
  .brand { gap: 8px; font-size: 11px; letter-spacing: .1em; }
  .brand em { font-size: 9px; }
  .brand-mark { width: 28px; height: 28px; }
  .sound-toggle { padding-inline: 9px !important; font-size: 10px !important; }
  .profile-dot { width: 28px; height: 28px; }
  .landing-main, .lobby-main { padding: 30px 14px 46px; }
  .hero-copy { min-height: 232px; }
  .hero-copy h1 { margin-top: 12px; font-size: 52px; }
  .hero-copy p { max-width: 330px; font-size: 13px; }
  .hero-foot { flex-wrap: wrap; gap: 8px 12px; font-size: 9px; }
  .entry-card, .lobby-card, .rooms-list { padding: 18px 16px; }
  .entry-card h2 { font-size: 28px; }
  .privacy-toggle { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
  .privacy-toggle b { line-height: 1.35; }
  .privacy-toggle small { grid-column: 2; grid-row: 2; text-align: left; line-height: 1.35; }
  .rooms-list-head { align-items: start; gap: 12px; }
  .rooms-list-head h2 { font-size: 23px; }
  .game-layout { padding-inline: 8px; }
  .board-frame { padding: 5px; }
  .board-grid { gap: 2px; padding: 2px; }
  .hand-zone { border-radius: var(--radius-sm); }
  .playing-card { border-radius: 5px; }
  .celebration-card { border-radius: var(--radius-lg); }
}

.mobile-play-cta { display: none; }
@media (max-width: 820px) {
  .game-layout { display: flex; flex-direction: column; }
  .game-layout .players-panel { order: 0; width: 100%; padding: 12px; border: 1px solid rgba(216,184,108,.32); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(9, 64, 46, .96), rgba(19, 91, 63, .92)); color: var(--cream); }
  .game-layout .players-panel .side-heading { color: var(--gold-light); border-color: rgba(224,210,163,.22); }
  .game-layout .players-panel .player-card { min-width: 0; border-color: rgba(224,210,163,.16); }
  .game-layout .players-panel .player-details strong { color: var(--cream); }
  .game-layout .players-panel .player-details small, .game-layout .players-panel .side-heading-count { color: rgba(245,242,232,.58); }
  .game-layout .players-panel .team-scoreboard { display: none; }
  .game-layout .table-center { order: 1; }
  .game-layout .chat-panel { order: 2; }
  .mobile-play-cta { display: block; width: 100%; margin-top: 12px; padding: 13px 18px; border: 1px solid rgba(216,184,108,.55); border-radius: var(--radius-lg); color: #17332c; background: linear-gradient(135deg, #f7d981, #dcae4f); box-shadow: 0 7px 18px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.7); font-size: 13px; font-weight: 900; letter-spacing: .14em; }
  .mobile-play-cta:disabled { opacity: .38; filter: saturate(.45); }
  .game-shell .board-frame { box-shadow: 0 13px 30px rgba(0,0,0,.35), inset 0 0 0 4px rgba(6,35,29,.3); }
}

/* Editorial table layout: the game entry is visible at first glance, beside the thesis. */
@media (min-width: 821px) {
  .landing-main { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(540px, 1.22fr); gap: 30px 46px; align-items: center; max-width: 1240px; padding-top: 64px; }
  .landing-main::after { position: absolute; top: 64px; bottom: 64px; left: calc(39% + 11px); width: 1px; background: linear-gradient(transparent, rgba(216,184,108,.25) 18%, rgba(216,184,108,.25) 82%, transparent); content: ''; }
  .hero-copy { min-height: 0; padding: 42px 0 22px; }
  .hero-copy h1 { font-size: clamp(56px, 6.2vw, 92px); }
  .hero-copy p { max-width: 310px; }
  .entry-grid { grid-column: 2; grid-row: 1; gap: 16px; }
  .entry-card { min-height: 454px; padding: 30px 32px 32px; border-radius: 14px; }
  .entry-card.create-panel { transform: translateY(18px); }
  .entry-card.join-panel { transform: translateY(-18px); background: linear-gradient(145deg, #fffdf3, #e9efdf); }
  .landing-rule { grid-column: 1 / -1; margin-top: 18px; }
}

@media (max-width: 820px) {
  .landing-main { padding-top: 42px; }
  .hero-copy { padding-bottom: 12px; }
}

/* Tabletop board treatment: layered felt, card wells, brass trim, and tactile chips. */
.game-shell {
  background:
    radial-gradient(circle at 50% 30%, rgba(46, 142, 96, .2), transparent 36%),
    linear-gradient(135deg, #062b22 0%, #0a5139 46%, #073326 100%);
}
.game-felt {
  opacity: .72;
  background-color: #0b513a;
  background-image:
    radial-gradient(rgba(255,255,255,.12) .7px, transparent .8px),
    radial-gradient(rgba(0,0,0,.25) .8px, transparent .9px),
    linear-gradient(115deg, rgba(255,255,255,.04), transparent 42%, rgba(0,0,0,.12));
  background-position: 0 0, 4px 4px, 0 0;
  background-size: 9px 9px, 11px 11px, 100% 100%;
  mix-blend-mode: normal;
}
.table-center { filter: drop-shadow(0 24px 26px rgba(0,0,0,.12)); }
.board-frame {
  position: relative;
  padding: 15px;
  border: 1px solid #d8b86c;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 18%, transparent 80%, rgba(0,0,0,.2)),
    linear-gradient(145deg, #9d7735, #e3c878 12%, #765222 44%, #caa751 75%, #63451c);
  box-shadow:
    0 24px 45px rgba(0,0,0,.35),
    0 3px 0 rgba(255,255,255,.18) inset,
    0 -4px 0 rgba(35,20,7,.35) inset;
}
.board-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(255,245,193,.56);
  border-radius: 11px;
  box-shadow: 0 0 0 3px rgba(67,42,12,.28), 0 0 0 5px rgba(255,231,139,.14);
}
.board-grid {
  position: relative;
  z-index: 1;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(216,184,108,.7);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 10%, rgba(92,211,142,.2), transparent 32%),
    linear-gradient(145deg, #0b6545, #073d2d 55%, #0b563b);
  box-shadow: inset 0 0 0 3px rgba(2,24,18,.34), inset 0 0 28px rgba(0,0,0,.32);
}
.board-cell {
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(41,55,43,.16);
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.74), transparent 24%),
    repeating-linear-gradient(0deg, rgba(31,49,40,.025) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #fffdf3 0%, #f2efdf 58%, #ddd9c7 100%);
  box-shadow:
    0 3px 0 rgba(41,34,18,.2),
    0 5px 8px rgba(0,0,0,.18),
    inset 0 1px rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(72,65,45,.1);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.board-cell::before {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(69,77,59,.08);
  border-radius: 3px;
}
.board-cell:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.035);
  filter: brightness(1.05);
  box-shadow: 0 5px 0 rgba(41,34,18,.2), 0 11px 15px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.95);
  z-index: 3;
}
.board-cell.target-cell {
  border-color: #8af2b0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), transparent 27%),
    linear-gradient(145deg, #fffce5, #e5f4db 65%, #c6e5c7);
  box-shadow: 0 0 0 2px rgba(126,244,165,.78), 0 0 22px rgba(89,235,145,.9), 0 5px 0 rgba(41,34,18,.17);
}
.free-cell {
  border-color: #b99443;
  background:
    radial-gradient(circle at 35% 28%, #fff0b1 0 8%, transparent 28%),
    radial-gradient(circle at 50% 50%, #f5dc8e, #b6812e 78%);
  box-shadow: inset 0 0 0 3px rgba(255,239,166,.4), inset 0 0 0 5px rgba(104,69,17,.22), 0 4px 7px rgba(0,0,0,.3);
}
.free-star { color: #fff1b0; font-size: clamp(17px, 2.35vw, 31px); text-shadow: 0 2px 0 #8b6324, 0 0 13px rgba(255,239,145,.72); }
.cell-rank { top: 10%; font-size: clamp(13px, 1.7vw, 23px); text-shadow: 0 1px rgba(255,255,255,.7); animation: cardRankFloat 2.8s ease-in-out infinite; }
.cell-suit { margin-top: 27%; font-size: clamp(12px, 1.6vw, 21px); animation: cardSuitFloat 2.8s ease-in-out .18s infinite; }
.chip-marker {
  inset: 10%;
  border: clamp(2px, .35vw, 4px) solid rgba(255,255,255,.9);
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--chip-color) 55%, white), var(--chip-color) 44%, color-mix(in srgb, var(--chip-color) 70%, black));
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.42),
    inset 0 -4px 5px rgba(0,0,0,.28),
    0 3px 0 rgba(0,0,0,.27),
    0 5px 10px rgba(0,0,0,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.sequence-mark .chip-marker { box-shadow: 0 0 0 2px #fff0a5, 0 0 18px var(--chip-color), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 5px rgba(0,0,0,.28); }
.last-ring { inset: -5px; border: 2px solid #ffe49a; box-shadow: 0 0 12px rgba(255,216,112,.75); }
.board-cell.last-move { border: 3px solid #f6d477; box-shadow: 0 0 0 2px rgba(255,224,133,.72), 0 0 22px rgba(255,211,99,.72), 0 5px 0 rgba(41,34,18,.2), inset 0 1px rgba(255,255,255,.95); z-index: 4; }
.hand-zone {
  position: relative;
  border-color: rgba(226,202,123,.38);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(5,42,31,.86), rgba(8,57,41,.72));
  box-shadow: 0 14px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08);
}
.playing-card {
  border-color: #c9be9d;
  background:
    linear-gradient(145deg, rgba(255,255,255,.8), transparent 22%),
    repeating-linear-gradient(0deg, rgba(50,45,32,.025) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #fffef6, #eee9d6);
  box-shadow: 0 8px 0 rgba(44,34,18,.12), 0 10px 15px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.9);
}
.playing-card:hover:not(:disabled), .playing-card.card-selected { box-shadow: 0 0 0 2px rgba(243,215,141,.72), 0 17px 26px rgba(0,0,0,.37), inset 0 1px rgba(255,255,255,.9); }
.turn-banner.your-turn { background: linear-gradient(100deg, rgba(13,83,55,.92), rgba(21,111,72,.58)); }

@media (max-width: 820px) {
  .board-frame { padding: 9px; border-radius: 12px; }
  .board-grid { gap: 3px; padding: 5px; }
  .board-cell::before { inset: 2px; }
  .chip-marker { inset: 8%; }
}

@keyframes cardRankFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes cardSuitFloat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Shared visual system across landing, lobby, and game surfaces. */
.topbar, .game-topbar { background: linear-gradient(180deg, rgba(3,26,20,.56), rgba(3,26,20,.12)); backdrop-filter: blur(12px); }
.brand { text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.brand-mark { box-shadow: inset 0 0 0 4px rgba(216,184,108,.08), 0 0 22px rgba(216,184,108,.16); }
.landing::before, .lobby-shell::before, .game-shell::before { content: ''; position: absolute; inset: 76px 0 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(129,244,177,.08), transparent 45%); }
.hero-copy { position: relative; }
.hero-copy::before { content: ''; position: absolute; width: 240px; height: 240px; left: -70px; top: 14px; pointer-events: none; border-radius: 50%; background: rgba(89,220,142,.09); filter: blur(60px); }
.entry-card { overflow: hidden; }
.entry-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.65), transparent 28%, transparent 70%, rgba(65,116,84,.08)); }
.entry-card.create-panel { box-shadow: 0 25px 45px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.18) inset; }
.entry-card.join-panel { box-shadow: 0 18px 42px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.55) inset; }
.lobby-shell .page-heading, .lobby-shell .lobby-top { text-shadow: 0 3px 18px rgba(0,0,0,.2); }
.rooms-list, .lobby-card { overflow: hidden; position: relative; }
.rooms-list::before, .lobby-card::before, .side-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.48), transparent 22%, transparent 78%, rgba(40,83,61,.08)); }
.rooms-list > *, .lobby-card > *, .side-panel > * { position: relative; z-index: 1; }
.room-row { transition: transform .2s, background .2s, padding .2s; }
.room-row:hover { transform: translateX(4px); }
.game-topbar { box-shadow: 0 5px 18px rgba(0,0,0,.12); }
.game-room-name { padding: 8px 12px; border: 1px solid rgba(224,210,163,.16); border-radius: 99px; background: rgba(5,36,27,.28); }
.players-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(250,248,237,.98), rgba(227,237,220,.96)); }
.player-card.active-turn { box-shadow: inset 3px 0 var(--green), 0 5px 15px rgba(33,104,67,.08); }
.player-token { box-shadow: inset 0 2px rgba(255,255,255,.42), inset 0 -3px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.16); }
.chat-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(250,248,237,.99), rgba(229,237,222,.97)); }
.chat-panel::after { content: '♧'; position: absolute; right: -18px; top: 46px; color: rgba(50,119,83,.06); font-size: 170px; pointer-events: none; }
.chat-message { border-radius: 8px; box-shadow: 0 3px 9px rgba(36,61,43,.05); }
.chat-form input { border-radius: 99px; }
.chat-form button { border-radius: 50%; box-shadow: 0 3px 8px rgba(25,85,59,.28); }
.hand-header { padding-bottom: 5px; border-bottom: 1px solid rgba(224,210,163,.15); }
.hand-cards { padding-top: 16px; }
.invite-link-button { display: block; margin-top: 8px; padding: 0; color: var(--gold); background: transparent; font-size: 10px; }
.connection-pill { padding: 7px 9px; border: 1px solid rgba(104,225,153,.34); border-radius: 99px; color: #8ef0b2; background: rgba(28,124,77,.2); font-size: 9px; white-space: nowrap; }
.connection-pill.reconnecting { color: #ffd182; border-color: rgba(255,209,130,.4); background: rgba(145,96,30,.2); }
.volume-control { width: 66px; height: 4px; accent-color: var(--gold-light); }
.move-history { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #dcd7c8; color: #8a9184; font-size: 9px; }
.move-history strong { color: #416b56; font-size: 10px; }
.move-history span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-history small { color: #a0a397; }
.game-result-panel { position: fixed; left: 50%; bottom: 28px; z-index: 8; display: grid; justify-items: center; gap: 6px; min-width: min(420px, calc(100% - 32px)); padding: 20px 24px; transform: translateX(-50%); color: var(--cream); border: 1px solid rgba(243,215,141,.72); border-radius: 16px; background: linear-gradient(145deg, rgba(8,69,47,.98), rgba(13,48,37,.98)); box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 32px rgba(216,184,108,.18); text-align: center; }
.game-result-panel strong { color: var(--gold-light); font: 28px var(--font-display); }
.game-result-panel p { margin: 0; color: rgba(245,242,232,.62); font-size: 10px; }
.game-result-panel button { margin-top: 7px; padding: 9px 16px; color: var(--ink); border-radius: 99px; background: var(--gold-light); font-size: 11px; font-weight: 800; }
@media (max-width: 520px) { .connection-pill { display: none; } .volume-control { width: 48px; } .game-result-panel { bottom: 14px; } }
/* Korean-first polish: a quiet card-table frame and clearer hierarchy. */
.site-shell { isolation: isolate; }
.site-shell::before { position: fixed; inset: 0; z-index: -1; border: 1px solid rgba(216, 184, 108, .12); box-shadow: inset 0 0 0 8px rgba(4, 26, 20, .18), inset 0 0 0 9px rgba(216, 184, 108, .05); content: ''; pointer-events: none; }
.eyebrow { font-weight: 800; letter-spacing: .18em; }
.panel-kicker { letter-spacing: .14em; }
.entry-card, .rooms-list, .panel { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.entry-card:hover, .rooms-list:hover, .panel:hover { border-color: color-mix(in oklab, var(--gold-light) 46%, var(--border)); box-shadow: 0 20px 42px rgba(0, 0, 0, .23); }
.room-row { transition: background .2s ease, padding .2s ease, transform .2s ease; }
.room-row:hover { padding-inline: 8px; transform: translateX(3px); background: color-mix(in oklab, var(--card) 88%, var(--gold-light)); }
.game-shell .board-frame { position: relative; }
.game-shell .board-frame::after { position: absolute; inset: 3px; border: 1px solid rgba(244, 211, 128, .2); content: ''; pointer-events: none; }

/* Invitation and exit actions need to read as buttons, not tiny text links. */
.entry-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entry-code small { flex: 1 0 100%; }
.entry-code strong { margin: 0 auto 0 0; }
.entry-code > button, .invite-link-button, .invite-mini button, .back-link, .leave-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.entry-code > button:hover, .invite-link-button:hover, .invite-mini button:hover, .back-link:hover, .leave-button:hover { transform: translateY(-1px); }
.entry-code > button, .invite-link-button { color: var(--gold-light); border-color: rgba(224,210,163,.55); background: rgba(224,210,163,.13); }
.invite-mini { flex-wrap: wrap; }
.invite-mini > span { flex: 1 0 100%; }
.invite-mini button { margin-left: auto; color: #1f5d4b; border-color: rgba(31,93,75,.35); background: rgba(31,93,75,.09); }
.back-link { color: var(--gold-light); border-color: rgba(224,210,163,.45); background: rgba(224,210,163,.1); }
.leave-button { min-width: 88px; color: rgba(245,242,232,.9); border-color: rgba(224,210,163,.5); background: rgba(224,210,163,.1); }
@media (max-width: 820px) {
  .entry-code > button, .invite-link-button, .invite-mini button, .back-link, .leave-button { min-height: 42px; padding: 0 16px; font-size: 12px; }
}