@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  --ink: #17221f;
  --cream: #f4efe3;
  --paper: #fffdf7;
  --green-950: #062923;
  --green-900: #0a372f;
  --green-800: #0e4b40;
  --green-700: #126352;
  --mint: #9dd9bd;
  --gold: #d3a642;
  --red: #bd3f39;
  --line: rgba(23, 34, 31, .14);
  --shadow: 0 24px 70px rgba(5, 31, 26, .18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
.grain { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 99; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { height: 76px; padding: 0 clamp(22px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 46px; border-radius: 7px; display: grid; place-items: center; color: white; background: var(--green-800); transform: rotate(-5deg); font-size: 24px; box-shadow: 3px 4px 0 var(--gold); }
.brand > span:last-child { display: flex; flex-direction: column; line-height: .92; letter-spacing: .12em; }
.brand strong { font-size: 16px; }
.brand em { font-style: normal; font-size: 10px; color: var(--green-700); margin-top: 5px; letter-spacing: .32em; }
.header-note, .signed-in { color: #66726e; font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 20px; }.header-actions > a { color: var(--green-700); text-decoration: none; font-size: 12px; font-weight: 800; }
.signed-in { font-weight: 700; color: var(--ink); margin-right: 16px; }
.text-button, .back-link { border: 0; background: none; color: var(--green-700); font-weight: 700; padding: 7px; }
.landing { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; max-width: 1180px; margin: auto; padding: 50px clamp(24px, 5vw, 70px) 70px; gap: clamp(50px, 8vw, 120px); }
.hero-copy { position: relative; }
.hero-copy::before { content: ''; position: absolute; width: 320px; height: 320px; background: #dbe9d7; border-radius: 50%; filter: blur(1px); z-index: -1; top: -40px; left: -90px; opacity: .75; }
.eyebrow { color: var(--green-700); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 800; }
.hero-copy h1, .lobby-title h1, .waiting-card h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(54px, 7vw, 88px); line-height: .9; letter-spacing: -.045em; margin: 20px 0 26px; }
.hero-copy h1 span { color: var(--green-700); font-style: italic; }
.lede { font-size: 17px; color: #58635f; line-height: 1.65; max-width: 480px; }
.suit-row { display: flex; gap: 22px; font-size: 27px; margin-top: 38px; }
.red { color: var(--red) !important; }
.auth-card { background: var(--paper); border: 1px solid rgba(15, 72, 61, .13); box-shadow: var(--shadow); border-radius: 18px; padding: 9px 34px 36px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin: 0 -10px 30px; }
.auth-tabs button { border: 0; background: transparent; padding: 18px 8px 14px; color: #87908d; font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; }
.auth-tabs button.active { color: var(--green-700); border-color: var(--green-700); }
.form-intro h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; margin: 0 0 6px; }
.form-intro p { color: #7b8581; font-size: 13px; margin: 0 0 27px; }
label { display: block; font-size: 12px; font-weight: 700; margin: 15px 0; }
input { display: block; width: 100%; border: 1px solid #ced5d1; background: white; border-radius: 8px; margin-top: 7px; padding: 12px 13px; outline: none; }
input:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(18, 99, 82, .11); }
.primary, .secondary { border-radius: 8px; padding: 12px 18px; font-weight: 800; font-size: 13px; border: 1px solid var(--green-700); transition: transform .15s, box-shadow .15s, background .15s; }
.primary { color: white; background: var(--green-700); box-shadow: 0 5px 0 var(--green-950); }
.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--green-950); }
.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-950); }
.secondary { color: var(--green-700); background: white; }
.secondary:hover:not(:disabled) { background: #edf5f0; }
.wide { width: 100%; margin-top: 12px; }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 25px); opacity: 0; background: #302f2d; color: white; padding: 12px 18px; border-radius: 8px; z-index: 200; font-size: 13px; box-shadow: 0 8px 30px #0004; pointer-events: none; transition: .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.success { background: var(--green-700); }

/* Lobby */
.lobby-shell { max-width: 1080px; margin: auto; padding: 60px 25px 80px; }
.lobby-title { text-align: center; }
.lobby-title h1 { font-size: clamp(46px, 6vw, 70px); margin: 12px 0 13px; }
.lobby-title > p:last-child { color: #69736f; }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.game-catalog { display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; margin-top: 42px; }
.game-tile { min-height: 280px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(20, 48, 39, .09); }
.euchre-tile { display: grid; grid-template-columns: 42% 58%; background: var(--green-900); color: white; }
.game-art { position: relative; min-height: 280px; background: radial-gradient(circle at 35% 38%, #20715e, #092f28 68%); overflow: hidden; }
.game-art::before { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; top: 30px; left: 20px; box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 58px rgba(255,255,255,.02); }
.game-art span { position: absolute; width: 105px; height: 148px; display: grid; place-items: center; border-radius: 10px; background: #fffdf6; color: #17221f; font-family: 'Fraunces', Georgia, serif; font-size: 28px; box-shadow: 0 15px 30px #001c; border: 1px solid #e4ddcf; }
.game-art span:first-child { left: 48px; top: 70px; transform: rotate(-13deg); color: var(--red); }.game-art span:last-child { left: 122px; top: 54px; transform: rotate(9deg); }
.game-info { padding: 34px 34px 28px; display: flex; flex-direction: column; justify-content: center; }
.game-info h2, .coming-tile h2, .room-heading h2 { font-family: 'Fraunces', Georgia, serif; }.game-info h2 { font-size: 42px; margin: 10px 0 7px; }.game-info p { color: #bdd0c9; line-height: 1.6; font-size: 13px; margin: 0; }
.available-pill, .soon-pill { align-self: flex-start; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 20px; padding: 5px 9px; }.available-pill { color: var(--green-950); background: var(--gold); }.game-meta { display: flex; gap: 15px; color: #8faf9f; font-size: 10px; margin-top: 24px; }
.coming-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 30px; background: #e8e3d5; border-style: dashed; }.coming-suits { color: var(--green-800); font-size: 24px; letter-spacing: .12em; }.coming-suits i { color: var(--red); font-style: normal; }.soon-pill { color: #6f7773; background: rgba(255,255,255,.6); }.coming-tile h2 { font-size: 25px; line-height: 1.1; margin: 12px 0 8px; }.coming-tile p { font-size: 12px; color: #737b77; line-height: 1.55; margin: 0; }
.euchre-room { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }.room-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.room-heading .eyebrow { margin: 0 0 4px; }.room-heading h2 { margin: 0; font-size: 32px; }.room-heading a { color: var(--green-700); font-size: 12px; font-weight: 800; text-decoration: none; }
.lobby-card { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; padding: 32px; box-shadow: 0 12px 35px rgba(30, 48, 42, .07); }
.lobby-card.create-card { background: var(--green-900); color: white; }
.lobby-card h2 { font-family: 'Fraunces', Georgia, serif; font-size: 29px; margin: 18px 0 8px; }
.lobby-card p { color: #6f7b76; font-size: 14px; line-height: 1.55; min-height: 44px; }
.lobby-card.create-card p { color: #bcd0c8; }
.lobby-card.create-card .primary { background: var(--gold); border-color: var(--gold); color: var(--green-950); box-shadow: 0 5px 0 #8d6a20; }
.partner-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }.partner-options button { min-height: 54px; border-radius: 8px; padding: 9px 11px; font-size: 12px; font-weight: 800; }.player-count-button { display: flex; flex-direction: column; align-items: flex-start; color: white; border: 1px solid #6ca18f; background: rgba(255,255,255,.07); text-align: left; }.player-count-button small { color: #a9c7bc; font-size: 9px; margin-top: 2px; }.player-count-button:hover:not(:disabled) { background: rgba(255,255,255,.15); border-color: var(--gold); }.player-count-button:first-child { color: var(--green-950); background: var(--gold); border-color: var(--gold); }.player-count-button:first-child small { color: #5d4c25; }
.big-icon { font-size: 30px; color: var(--gold); }
.code-label { margin: 20px 0 4px; }
.code-input { text-align: center; text-transform: uppercase; letter-spacing: .24em; font-weight: 800; font-size: 18px; }
.rules-summary { margin: 25px auto; max-width: 720px; color: #65706c; font-size: 13px; line-height: 1.6; }
.rules-summary summary { cursor: pointer; text-align: center; color: var(--green-700); font-weight: 700; }

/* Waiting room */
.waiting-room { padding: 28px 25px 80px; text-align: center; }
.back-link { display: block; margin-bottom: 40px; }
.waiting-card { max-width: 620px; margin: auto; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 50px; border-radius: 18px; }
.waiting-card h1 { font-size: 46px; margin: 12px 0; }
.waiting-card > p:not(.eyebrow) { color: #71807a; }
.pulsing-suits { display: flex; justify-content: center; gap: 10px; font-size: 22px; color: var(--green-800); }
.pulsing-suits span:nth-child(2), .pulsing-suits span:nth-child(3) { color: var(--red); }
.pulsing-suits span { animation: bob 1.8s ease-in-out infinite; }
.pulsing-suits span:nth-child(2) { animation-delay: .15s; }.pulsing-suits span:nth-child(3) { animation-delay: .3s; }.pulsing-suits span:nth-child(4) { animation-delay: .45s; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.game-code { border: 1px dashed #9eb4aa; background: #edf5ef; color: var(--green-900); border-radius: 10px; padding: 16px 22px; font-size: 28px; font-weight: 800; letter-spacing: .22em; margin: 22px 0; }
.game-code small { font-size: 10px; letter-spacing: .05em; vertical-align: middle; margin-left: 8px; color: var(--green-700); text-transform: uppercase; }
.waiting-line { display: flex; align-items: center; gap: 14px; color: #84908b; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-top: 20px; }
.waiting-line i { height: 1px; background: #d9dfdc; flex: 1; }
.seating-card { max-width: 720px; }.waiting-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 20px; text-align: left; }.waiting-teams section { border: 1px solid #d9dfdc; border-radius: 11px; padding: 10px; background: #f7f7f2; }.waiting-teams h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; color: var(--green-800); font-family: 'Fraunces', Georgia, serif; font-size: 15px; }.waiting-teams h3 small { color: #87918c; font-family: 'DM Sans', sans-serif; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }.waiting-seat { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px; margin-top: 7px; border: 1px solid #d8dedb; border-radius: 9px; background: white; text-align: left; }.waiting-seat:not(:disabled):hover { border-color: var(--gold); transform: translateY(-1px); }.waiting-seat > span { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 50%; background: #e8eeea; color: var(--green-800); font-size: 11px; font-weight: 800; }.waiting-seat > div { display: flex; flex-direction: column; overflow: hidden; }.waiting-seat b { color: var(--ink); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.waiting-seat small { color: #88918d; font-size: 8px; }.waiting-seat.reserved { border-color: #88b6a4; background: #eff6f1; }.waiting-seat.reserved > span { color: white; background: var(--green-700); }.waiting-seat.mine { box-shadow: inset 0 0 0 2px var(--gold); }.waiting-seat.bot { border-style: dashed; }.start-game-button { display: block; min-width: 180px; margin: 5px auto 22px; }

/* Game table */
.game-shell { height: calc(100vh - 76px); min-height: 690px; background: #e9e5da; overflow: hidden; position: relative; }
.scorebar { height: 70px; display: grid; grid-template-columns: 40px 1fr 150px 1fr 40px; align-items: center; max-width: 950px; padding: 0 18px; margin: auto; gap: 12px; }
.score-team { display: flex; align-items: center; gap: 13px; }
.score-team.opponents { justify-content: flex-end; }
.score-team small { font-size: 11px; color: #68736f; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-team strong { font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--green-800); }
.mobile-score-name { display: none; }
.score-center { text-align: center; display: flex; flex-direction: column; }
.score-center span { font-size: 8px; letter-spacing: .15em; color: #929a96; }
.score-center b { font-size: 11px; text-transform: capitalize; margin-top: 3px; }
.table-id { border: 0; background: transparent; padding: 1px 4px; color: #76827d; font-size: 8px; line-height: 1.2; letter-spacing: .13em; font-weight: 800; border-radius: 4px; }.table-id:hover { color: var(--green-700); background: #dfe9e3; }
.icon-button { width: 34px; height: 34px; border: 1px solid #cbd1cd; border-radius: 50%; background: #f6f4ed; color: var(--green-800); font-weight: 800; }
.table-wrap { height: calc(100% - 70px); display: flex; flex-direction: column; align-items: center; padding: 3px 25px 15px; }
.felt { position: relative; height: calc(100% - 95px); min-height: 510px; width: min(960px, 94vw); border-radius: 48% / 22%; background: radial-gradient(circle at 50% 43%, #166451, #0b493d 70%); border: 9px solid #785b3c; box-shadow: inset 0 0 0 3px #a98b63, inset 0 0 70px #001c1488, 0 12px 30px #29322e35; }
.felt::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(223, 203, 155, .22); border-radius: inherit; pointer-events: none; }
.seat { position: absolute; z-index: 4; }
.seat.north { top: 15px; left: 50%; transform: translateX(-50%); }
.seat.south { bottom: -72px; left: 50%; transform: translateX(-50%); }
.seat.west { top: 43%; left: 18px; transform: translateY(-50%); }
.seat.east { top: 43%; right: 18px; transform: translateY(-50%); }
.player-tag { display: flex; align-items: center; gap: 8px; background: rgba(5, 36, 30, .88); border: 1px solid rgba(255,255,255,.16); color: white; border-radius: 25px; padding: 5px 10px 5px 5px; min-width: 130px; box-shadow: 0 6px 15px #001b1666; }
.seat.active .player-tag { box-shadow: 0 0 0 3px var(--gold), 0 6px 15px #001b1666; }
.avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--mint); color: var(--green-950); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.player-tag div { display: flex; flex-direction: column; overflow: hidden; }
.player-tag strong { font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 105px; }
.player-tag small { font-size: 8px; color: #9fb9b0; }
.badge { margin-left: auto; background: var(--gold); color: #17332c; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
.badge.call { background: #dfeee7; margin-left: 2px; }
.sitting-out { opacity: .48; }
.mini-hand { display: flex; justify-content: center; height: 27px; margin-top: -2px; }
.mini-hand i { width: 19px; height: 27px; border: 1px solid #e7d9bf; border-radius: 3px; background: repeating-linear-gradient(45deg, #a43431 0 2px, #852824 2px 4px); margin-left: -8px; box-shadow: 1px 2px 3px #0018; transform: rotate(calc((var(--i) - (var(--n) / 2)) * 4deg)); transform-origin: top center; }
.my-hand { display: flex; justify-content: center; margin-top: 5px; height: 125px; min-width: 410px; }
.my-hand .card { margin-left: -20px; transform: translateY(0) rotate(calc((var(--i, 0)) * 1deg)); }
.my-hand .card:first-child { margin-left: 0; }
.card { position: relative; width: 73px; height: 104px; flex: 0 0 73px; background: #fffefa; color: #17201e; border: 1px solid #d7d1c5; border-radius: 7px; box-shadow: 0 5px 10px #001a; padding: 0; overflow: hidden; }
.card:disabled { opacity: 1; }
.card.playable { cursor: pointer; box-shadow: 0 0 0 2px #f0c75e, 0 7px 12px #001b; transition: transform .16s; }
.card.playable:hover { transform: translateY(-13px); }
.card > strong { font-size: 35px; position: absolute; inset: 0; display: grid; place-items: center; }
.corner { position: absolute; top: 5px; left: 6px; display: flex; flex-direction: column; line-height: .85; z-index: 1; }
.corner b { font-size: 13px; }.corner i { font-style: normal; font-size: 11px; }
.corner.bottom { top: auto; left: auto; right: 6px; bottom: 5px; transform: rotate(180deg); }
.table-center { position: absolute; inset: 22% 24%; display: grid; place-items: center; z-index: 2; }
.status-chip { position: absolute; top: -8px; background: rgba(5,40,33,.8); border: 1px solid #ffffff2b; border-radius: 20px; color: #bfd0ca; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; padding: 5px 12px; }
.status-chip.your-turn { color: #18382f; background: var(--gold); border-color: #efd68c; font-weight: 800; }
.table-notice { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 330px; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; color: white; background: rgba(4,42,34,.88); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 7px 14px; box-shadow: 0 5px 14px rgba(0,20,15,.28); }.table-notice b { font-size: 10px; }.table-notice span { color: #a9c4ba; font-size: 8px; margin-top: 2px; }
.personal-turn { width: max-content; max-width: 220px; margin: 0 auto 7px; display: flex; align-items: center; gap: 7px; color: var(--green-950); background: var(--gold); border: 1px solid #f0d88e; border-radius: 18px; padding: 5px 10px; box-shadow: 0 4px 12px rgba(0,28,21,.35); animation: turnPulse 1.8s ease-in-out infinite; }.personal-turn b { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.personal-turn span { color: #4a452e; font-size: 8px; }.seat.south.active .player-tag { box-shadow: 0 6px 15px #001b1666; }
.bottom-turn-notice { position: absolute; left: 50%; bottom: 27%; transform: translateX(-50%); z-index: 7; margin: 0; }
@keyframes turnPulse { 50% { box-shadow: 0 4px 12px rgba(0,28,21,.35), 0 0 0 4px rgba(211,166,66,.18); } }
.table-monogram { font-family: 'Fraunces', Georgia, serif; font-size: 52px; color: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.07); width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; }
.trick-area { width: 260px; height: 210px; position: relative; }
.table-monogram, .trump-watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none; }.trump-watermark { width: 126px; height: 126px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; color: rgba(255,255,255,.14); font-family: Georgia, serif; font-size: 91px; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.12); }.trump-watermark.red { color: rgba(255,177,168,.18) !important; }
.played-card { position: absolute; z-index: 1; }
.played-card .card, .up-card .card { width: 62px; height: 88px; flex-basis: 62px; }
.played-card .card > strong, .up-card .card > strong { font-size: 29px; }
.played-north { top: 4px; left: 99px; }.played-south { bottom: 4px; left: 99px; }.played-west { top: 62px; left: 30px; transform: rotate(90deg); }.played-east { top: 62px; right: 30px; transform: rotate(-90deg); }
.played-card.just-played.played-north .card { animation: throwNorth .48s cubic-bezier(.2,.8,.2,1); }.played-card.just-played.played-south .card { animation: throwSouth .48s cubic-bezier(.2,.8,.2,1); }.played-card.just-played.played-west .card { animation: throwWest .48s cubic-bezier(.2,.8,.2,1); }.played-card.just-played.played-east .card { animation: throwEast .48s cubic-bezier(.2,.8,.2,1); }
@keyframes throwNorth { from { transform: translateY(-140px) rotate(-9deg) scale(.85); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes throwSouth { from { transform: translateY(150px) rotate(8deg) scale(.85); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes throwWest { from { transform: translateY(150px) rotate(-8deg) scale(.85); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes throwEast { from { transform: translateY(150px) rotate(8deg) scale(.85); opacity: .2; } to { transform: none; opacity: 1; } }
.up-card { position: absolute; inset: 30px 0 0; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #d8e7e1; }
.up-card small { font-size: 8px; letter-spacing: .15em; }
.card-back { display: grid; place-items: center; border-color: #e9d7b5; background: repeating-linear-gradient(45deg, #a43431 0 4px, #7d2522 4px 8px); box-shadow: inset 0 0 0 4px #f4ead6, inset 0 0 0 6px #8b2a27, 0 5px 10px #001a; }.card-back i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #f4ead6; background: #0e4b40; border: 1px solid #d3a642; font-family: 'Fraunces', Georgia, serif; font-size: 12px; font-style: normal; }
.trick-score { position: absolute; bottom: 26px; right: 42px; color: white; display: flex; align-items: baseline; gap: 6px; background: rgba(1,31,25,.45); border-radius: 20px; padding: 5px 12px; }
.trick-score span { font-size: 7px; letter-spacing: .14em; color: #9cb8ae; }.trick-score b { font-family: 'Fraunces', serif; font-size: 17px; }.trick-score i { font-style: normal; color: #7d9c91; }
.action-panel { width: min(820px, 94vw); min-height: 76px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 8px 25px #273a3222; border-radius: 12px; padding: 14px 18px; margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; z-index: 5; }
.action-panel > div:first-child { display: flex; flex-direction: column; }.action-panel strong { font-size: 14px; }.action-panel span { font-size: 11px; color: #75807b; }
.action-hint { text-transform: uppercase; letter-spacing: .1em; }
.waiting-action { justify-content: center; }
.waiting-action p { font-size: 12px; color: #6d7773; }
.spinner { width: 15px; height: 15px; border: 2px solid #c7d3cd; border-top-color: var(--green-700); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.call-panel .button-row { display: flex !important; flex-direction: row !important; gap: 18px; margin-left: auto; }
.bower-label { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; border-radius: 10px; padding: 2px 6px; color: var(--green-950); background: var(--gold); font-style: normal; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.card.bower { box-shadow: inset 0 0 0 2px rgba(211,166,66,.72), 0 5px 10px #001a; }.card.bower.playable { box-shadow: inset 0 0 0 2px rgba(211,166,66,.72), 0 0 0 2px #f0c75e, 0 7px 12px #001b; }
.alone-check { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.alone-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--green-700); }
.alone-check span { display: flex; flex-direction: column; color: var(--ink); font-weight: 700; }.alone-check small { color: #89928e; font-weight: 400; }
.suit-buttons { display: flex !important; flex-direction: row !important; gap: 6px; }
.suit-button { border: 1px solid #ccd4d0; background: white; border-radius: 7px; padding: 6px 11px; display: flex; align-items: center; gap: 5px; color: var(--ink); }
.suit-button b { font-size: 20px; }.suit-button span { font-size: 9px; }
.result-panel { background: #fffdf7; color: var(--ink); border-radius: 14px; width: 290px; padding: 24px; text-align: center; box-shadow: 0 16px 45px #001f1888; z-index: 3; }
.result-panel small { font-size: 8px; color: var(--green-700); letter-spacing: .15em; font-weight: 800; }.result-panel h2 { font-family: 'Fraunces', Georgia, serif; font-size: 25px; margin: 7px 0; }.result-panel p { color: #6f7975; font-size: 12px; margin: 0 0 15px; }
.game-log { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; background: var(--paper); z-index: 20; box-shadow: -10px 0 35px #0015; padding: 20px; transform: translateX(105%); transition: transform .25s; }
.game-log.open { transform: translateX(0); }.log-head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.log-head button { border: 0; background: none; font-size: 23px; }.game-log p { font-size: 12px; border-bottom: 1px solid #ece9e0; padding: 9px 0; margin: 0; color: #5f6b66; }

/* Table motion */
.deal-animation, .collect-animation { position: absolute; inset: 0; z-index: 12; pointer-events: all; overflow: hidden; border-radius: inherit; }
.deal-animation::before { content: ''; position: absolute; width: 34px; height: 48px; left: calc(50% - 17px); top: calc(46% - 24px); border-radius: 4px; background: repeating-linear-gradient(45deg, #a43431 0 3px, #76221f 3px 6px); box-shadow: 0 4px 0 #f2e8d4, 0 8px 0 #812621, 0 10px 18px #001a; }
.deal-animation > span { position: absolute; left: 50%; top: 57%; transform: translateX(-50%); color: #d2e3dc; background: #052f27c7; padding: 5px 11px; border-radius: 20px; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.deal-card { --deal-x: 50%; --deal-y: 45%; position: absolute; left: 50%; top: 45%; width: 30px; height: 43px; border: 1px solid #f0dfbf; border-radius: 4px; opacity: 0; background: repeating-linear-gradient(45deg, #ac3833 0 3px, #79231f 3px 6px); box-shadow: 0 3px 7px #0018; animation: dealCard .4s cubic-bezier(.22,.8,.28,1) forwards; animation-delay: calc(var(--deal-index) * .04s); }
.deal-to-north { --deal-x: 50%; --deal-y: 10%; }.deal-to-south { --deal-x: 50%; --deal-y: 86%; }.deal-to-west { --deal-x: 8%; --deal-y: 46%; }.deal-to-east { --deal-x: 89%; --deal-y: 46%; }
@keyframes dealCard { 0% { left: 50%; top: 45%; opacity: 0; transform: translate(-50%,-50%) rotate(0) scale(.7); } 18% { opacity: 1; } 100% { left: var(--deal-x); top: var(--deal-y); opacity: 1; transform: translate(-50%,-50%) rotate(calc((var(--deal-index) - 10) * .6deg)) scale(1); } }
.animating-deal .seat .my-hand, .animating-deal .seat .mini-hand { opacity: 0; animation: revealHand .01s forwards 1.1s; }
@keyframes revealHand { to { opacity: 1; } }
.collect-animation { display: grid; place-items: center; background: radial-gradient(circle at center, rgba(5,47,39,.18), transparent 55%); }
.collect-stage { position: relative; width: 260px; height: 210px; }
.collect-card { position: absolute; z-index: 2; animation: collectTrick 2.1s ease-in-out forwards; }.collect-card .card { width: 62px; height: 88px; flex-basis: 62px; }.collect-card .card > strong { font-size: 29px; }
.collect-from-north { top: 4px; left: 99px; }.collect-from-south { top: 118px; left: 99px; }.collect-from-west { top: 62px; left: 30px; }.collect-from-west .card { transform: rotate(90deg); }.collect-from-east { top: 62px; left: 168px; }.collect-from-east .card { transform: rotate(-90deg); }
.last-thrown.collect-from-north .card { animation: throwNorth .48s cubic-bezier(.2,.8,.2,1); }.last-thrown.collect-from-south .card { animation: throwSouth .48s cubic-bezier(.2,.8,.2,1); }.last-thrown.collect-from-west .card { animation: throwWest .48s cubic-bezier(.2,.8,.2,1); }.last-thrown.collect-from-east .card { animation: throwEast .48s cubic-bezier(.2,.8,.2,1); }
.trick-winner-callout { position: absolute; top: calc(50% - 18px); left: 50%; transform: translate(-50%,-50%); z-index: 5; background: var(--gold); color: var(--green-950); border-radius: 20px; padding: 7px 13px; font-size: 10px; box-shadow: 0 6px 18px #0018; animation: winnerCallout 2.05s ease forwards; white-space: nowrap; }.trick-winner-callout b { font-weight: 900; }
@keyframes collectTrick { 0%, 62% { transform: translate(0,0) scale(1); opacity: 1; } 87% { transform: translate(var(--collect-x),var(--collect-y)) scale(.82); opacity: 1; } 100% { transform: translate(var(--collect-x),var(--collect-y)) scale(.7); opacity: 0; } }
@keyframes winnerCallout { 0%, 10% { opacity: 0; transform: translate(-50%,0); } 24%, 74% { opacity: 1; transform: translate(-50%,-50%); } 100% { opacity: 0; transform: translate(-50%,-80%); } }

/* Saved tables */
.your-tables { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }.table-list { display: grid; gap: 9px; min-height: 55px; }.table-list > .spinner { margin: 18px auto; display: block; }.saved-table { width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 11px; padding: 12px 16px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; text-align: left; color: var(--ink); transition: border-color .15s, transform .15s; }.saved-table:hover { transform: translateY(-1px); border-color: var(--green-700); }.saved-game-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--green-800); font-size: 19px; }.saved-table > span:nth-child(2) { display: flex; flex-direction: column; }.saved-table strong { font-size: 13px; }.saved-table small { color: #78827e; font-size: 10px; margin-top: 2px; }.saved-table > b { color: var(--green-700); font-size: 11px; }.empty-tables { margin: 0; padding: 18px; border: 1px dashed #c7d0cb; border-radius: 10px; color: #79837f; text-align: center; font-size: 12px; }

/* Rules */
.rules-page { max-width: 780px; padding: 65px 25px 100px; margin: auto; }.rules-page > h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(48px, 8vw, 76px); line-height: .95; letter-spacing: -.04em; margin: 16px 0 20px; }.rules-lede { color: #64706b; font-size: 18px; line-height: 1.6; border-bottom: 1px solid var(--line); padding-bottom: 34px; }.rules-page section { padding: 20px 0; border-bottom: 1px solid var(--line); }.rules-page h2 { font-family: 'Fraunces', Georgia, serif; font-size: 27px; margin: 5px 0 9px; }.rules-page section p { color: #59645f; line-height: 1.7; font-size: 14px; }.rules-page table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; }.rules-page th, .rules-page td { padding: 11px; text-align: left; border-bottom: 1px solid #dce1de; }.rules-page th { color: var(--green-700); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.rules-play { display: inline-block; text-decoration: none; margin-top: 32px; }

@media (max-width: 760px) {
  .site-header { height: 64px; }.header-note { display: none; }
  body.in-game { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body.in-game .site-header { display: none; }
  .landing { min-height: calc(100vh - 64px); display: block; padding-top: 45px; }.hero-copy h1 { font-size: 58px; }.hero-copy .lede, .suit-row { display: none; }.auth-card { margin-top: 40px; }
  .game-catalog, .lobby-grid { grid-template-columns: 1fr; }.euchre-tile { grid-template-columns: 38% 62%; }.game-art span { width: 80px; height: 116px; }.game-art span:first-child { left: 20px; top: 86px; }.game-art span:last-child { left: 70px; top: 67px; }.coming-tile { min-height: 210px; }.lobby-title h1 { font-size: 48px; }.lobby-card p { min-height: auto; }
  .game-shell { height: 100vh; height: 100dvh; min-height: 0; padding-top: env(safe-area-inset-top); }.scorebar { height: 54px; grid-template-columns: 34px 1fr 82px 1fr 34px; padding: 0 6px; gap: 5px; }.score-center { overflow: hidden; }.score-center b { font-size: 9px; }.score-team { gap: 5px; min-width: 0; }.score-team small { max-width: none; min-width: 0; }.score-team strong { font-size: 23px; }.desktop-score-name { display: none; }.mobile-score-name { display: inline; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
  .table-wrap { height: calc(100% - 54px); padding: 0 5px max(5px, env(safe-area-inset-bottom)); }.felt { flex: 1 1 auto; height: auto; width: 100%; min-height: 0; border-radius: 25% / 12%; border-width: 6px; }.seat.north { top: 8px; }.seat.west { top: 31%; left: 4px; }.seat.east { top: 31%; right: 4px; }.player-tag { min-width: 104px; padding-right: 6px; }.player-tag strong { max-width: 70px; }.seat.west .mini-hand, .seat.east .mini-hand { display: none; }
  .seat.west .player-tag, .seat.east .player-tag { min-width: 0; max-width: 112px; gap: 5px; }.seat.west .player-tag small, .seat.east .player-tag small { display: none; }.seat.west .player-tag strong, .seat.east .player-tag strong { max-width: 54px; }.seat.west .badge, .seat.east .badge { width: 18px; height: 18px; flex: 0 0 18px; }
  .seat.south { bottom: 7px; display: flex; flex-direction: column-reverse; align-items: center; }.my-hand { min-width: 340px; height: 101px; margin: 0 0 -2px; align-items: flex-end; }.card { width: 64px; height: 92px; flex-basis: 64px; }.my-hand .card { margin-left: -13px; }.table-center { inset: 18% 10% 25%; }.trick-score { right: 12px; bottom: 48px; }
  .showing-result .seat.west, .showing-result .seat.east { top: 21%; }.showing-result .seat.south { bottom: 12px; }.showing-result .trick-score { display: none; }.showing-result .table-center { inset: 25% 6% 20%; }
  .action-panel { flex: 0 0 auto; width: min(98vw, 820px); margin-top: 5px; min-height: 54px; padding: 8px 11px; gap: 10px; }.action-panel strong { font-size: 12px; }.action-panel > div:first-child > span, .waiting-action p { font-size: 9px; }.action-hint { display: none; }.call-panel { flex-wrap: wrap; }.call-panel > div:first-child { flex: 1; }.call-panel .button-row { margin-left: 0; }.second-round > div:first-child { display: none; }.second-round .alone-check { order: 2; }.suit-buttons { order: 1; }.second-round > .secondary { order: 3; }
}

@media (max-width: 480px) {
  .signed-in { display: none; }.landing { padding: 35px 20px; }.hero-copy h1 { font-size: 49px; }.hero-copy::before { width: 240px; height: 240px; }.auth-card { padding: 8px 22px 28px; }
  .waiting-card { padding: 35px 20px; }.game-code { font-size: 23px; }.waiting-teams { grid-template-columns: 1fr; }.lobby-shell { padding-top: 38px; }.euchre-tile { display: block; }.game-art { min-height: 190px; }.game-art span:first-child { top: 35px; left: calc(50% - 75px); }.game-art span:last-child { top: 28px; left: calc(50% - 10px); }.game-info { padding: 27px; }.game-info h2 { font-size: 36px; }.room-heading { align-items: center; }.partner-options { grid-template-columns: 1fr; }
  .score-team small { font-size: 9px; }.avatar { width: 24px; height: 24px; flex-basis: 24px; }.player-tag { min-width: 102px; }.player-tag strong { max-width: 68px; }.player-tag small { display: block; max-width: 72px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 7px; }.seat.west .player-tag small, .seat.east .player-tag small { display: none; }
  .card { width: 58px; height: 84px; flex-basis: 58px; }.my-hand { min-width: 305px; height: 93px; }.my-hand .card { margin-left: -9px; }.trick-area { transform: scale(.82); }.result-panel { width: min(260px, 78vw); padding: 19px; }.result-panel h2 { font-size: 22px; }.suit-button { padding: 5px 8px; }.suit-button span { display: none; }.table-notice { max-width: 255px; }.table-notice b { font-size: 9px; }.personal-turn span { display: none; }.bottom-turn-notice { bottom: 118px; }
}

@media (max-width: 760px) and (max-height: 650px) {
  .scorebar { height: 48px; }.table-wrap { height: calc(100% - 48px); }
  .seat.west, .seat.east { top: 28%; }.table-notice span { display: none; }
  .card { width: 54px; height: 78px; flex-basis: 54px; }.my-hand { height: 86px; }.my-hand .card { margin-left: -8px; }
  .action-panel { min-height: 48px; }.action-panel > div:first-child > span { display: none; }
}