body { background: #071d1c; }
.game-shell { min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 72% 8%, rgba(210,173,82,.09), transparent 27%), #0c2d2a; }
.game-header { display: flex; gap: 22px; align-items: center; justify-content: space-between; padding: 15px clamp(18px,3vw,38px) 12px; border-bottom: 1px solid rgba(210,173,82,.27); background: rgba(7,23,37,.75); }
.game-header h1 { margin: 0; color: var(--maize-pale); font: 500 clamp(28px,3vw,41px)/1 var(--serif); }
.game-header p { margin: 4px 0 0; color: rgba(255,255,255,.5); font: italic 11px var(--serif); }
.game-actions,.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.button { min-height: 36px; padding: 8px 13px; border: 1px solid rgba(238,226,189,.32); border-radius: 3px; background: rgba(255,255,255,.055); color: #fff; cursor: pointer; font-size: 12px; font-weight: 750; }
.button:hover,.button:focus-visible { border-color: var(--maize); background: rgba(210,173,82,.14); outline: 2px solid rgba(210,173,82,.3); outline-offset: 2px; }
.button.primary { border-color: var(--maize); background: var(--maize); color: var(--navy-950); }
.button:disabled { cursor: not-allowed; opacity: .42; }
.euchre-settings { display:flex; flex-wrap:wrap; gap:9px 18px; align-items:end; padding:10px clamp(18px,3vw,38px); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(8,26,30,.7); }
.euchre-settings label { display:grid; gap:4px; color:rgba(255,255,255,.55); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.euchre-settings select { min-width:132px; height:32px; padding:5px 28px 5px 8px; border:1px solid rgba(238,226,189,.25); border-radius:3px; background:#173b3b; color:#fff; font-size:12px; text-transform:none; }
.euchre-settings select:focus { border-color:var(--maize); outline:2px solid rgba(210,173,82,.22); }
.euchre-settings .deck-control{margin-left:0}.euchre-settings .deck-control select{min-width:235px}.euchre-settings .settings-note{align-self:center;margin:13px 0 0 auto;color:rgba(255,255,255,.55);font:italic 11px/1.3 var(--serif)}.euchre-settings .settings-note.is-error{color:#ffaaa2}.euchre-settings input[type="number"]{width:145px;height:32px;padding:5px 8px;border:1px solid rgba(238,226,189,.25);border-radius:3px;background:#173b3b;color:#fff}.stick-control{display:flex!important;min-height:32px;flex-direction:row;gap:7px!important;align-items:center;padding-inline:4px!important;color:rgba(255,255,255,.72)!important;text-transform:none!important;letter-spacing:0!important}.stick-control input{width:16px;height:16px;accent-color:var(--maize)}
.match-bar { display: grid; grid-template-columns: repeat(6,minmax(72px,1fr)); padding: 0 clamp(18px,3vw,38px); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,23,37,.48); }
.match-bar div { display:flex; min-height:72px; flex-direction:column; justify-content:center; padding:12px 14px 12px 0; }
.match-bar span { display: block; color: rgba(255,255,255,.52); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.match-bar strong { display: block; margin-top: 5px; color: var(--maize-pale); font-size: 19px; line-height:1.1; }
.trick-tally-cell { min-width:190px; }
#trick-score { display:flex; gap:18px; align-items:center; }
.trick-side { display:grid!important; min-height:0!important; gap:4px; padding:0!important; color:var(--maize-pale)!important; font-size:12px!important; letter-spacing:0!important; text-transform:none!important; }
.trick-side b { font-size:13px; }
.trick-pips { display:flex!important; min-height:0!important; flex-direction:row!important; gap:4px; padding:0!important; }
.trick-pip { width:10px; height:10px; border:1px solid rgba(238,226,189,.42); border-radius:50%; background:rgba(255,255,255,.04); }
.trick-pip.is-won { border-color:var(--maize); background:var(--maize); box-shadow:0 0 6px rgba(210,173,82,.5); }
.euchre-table { --card-w:clamp(108px,10.4vw,138px); --card-h:calc(var(--card-w) * 1.4); --human-card-w:var(--card-w); --human-card-h:var(--card-h); --opponent-card-w:var(--card-w); --opponent-card-h:var(--card-h); --trick-card-w:clamp(94px,8.2vw,112px); --trick-card-h:calc(var(--trick-card-w) * 1.4); --trick-gap:clamp(16px,1.6vw,22px); --trick-surface-w:clamp(360px,34vw,410px); --trick-surface-h:calc(var(--trick-card-h) * 2 + var(--trick-gap)); --upcard-w:var(--card-w); --upcard-h:var(--card-h); --book-w:clamp(62px,5.8vw,78px); --book-h:calc(var(--book-w) * 1.4); position:relative; flex:1; min-height:900px; overflow:hidden; background:radial-gradient(ellipse at center,#18574a 0,#10463e 54%,#0a302d 100%); box-shadow:inset 0 0 90px rgba(0,0,0,.35); }
.euchre-table::before { content:""; position:absolute; inset:16px; border:1px solid rgba(238,226,189,.14); border-radius:46%; pointer-events:none; }
.player-seat { position: absolute; z-index: 3; display: grid; gap: 7px; justify-items: center; transition: opacity .2s ease,filter .2s ease; }
.seat-north { top: 12px; left: 50%; transform: translateX(-50%); }
.seat-south { bottom: 13px; left: 50%; transform: translateX(-50%); }
.seat-west { top: 50%; left: 16px; transform: translateY(-50%); }
.seat-east { top: 50%; right: 16px; transform: translateY(-50%); }
.seat-heading { display:flex; gap:9px; align-items:center; justify-content:center; min-height:39px; padding:7px 14px; border:1px solid transparent; border-radius:24px; background:rgba(7,23,37,.63); color:#fff; font-size:19px; font-weight:750; white-space:nowrap; }
.player-seat.is-turn .seat-heading { border-color:var(--maize); box-shadow:0 0 0 3px rgba(210,173,82,.13); color:var(--maize-pale); }
.dealer-marker { display:inline-grid; width:27px; height:27px; place-items:center; border-radius:50%; background:var(--maize); color:#152a37; font-size:13px; font-weight:900; }
.caller-marker { display:inline-grid; width:29px; height:29px; place-items:center; border:1px solid var(--maize); border-radius:50%; background:#f1e3bb; color:#16252d; font:900 19px/1 var(--serif); box-shadow:0 0 0 3px rgba(210,173,82,.16); }
.caller-marker.is-red { color:#a22d2d; }
.seat-status { color:var(--maize-pale); font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.player-seat.is-inactive { opacity:.42; filter:grayscale(.75); }
.seat-hand { display:flex; justify-content:center; }
.seat-hand .playing-card { width:var(--opponent-card-w); height:var(--opponent-card-h); flex:0 0 auto; margin-left:calc(var(--opponent-card-w) * -.58); border-radius:5px; }
.seat-hand .playing-card:first-child { margin-left:0; }
.seat-south .seat-hand .playing-card { width:var(--human-card-w); height:var(--human-card-h); margin-left:calc(var(--human-card-w) * -.61); }
.seat-south .seat-hand .playing-card.starts-suit { margin-left:calc(var(--human-card-w) * -.38); }
.seat-west .seat-hand,.seat-east .seat-hand { flex-direction:column; }
.seat-west .seat-hand .playing-card,.seat-east .seat-hand .playing-card { margin-top:calc(var(--opponent-card-h) * -.78); margin-left:0; }
.seat-west .seat-hand .playing-card:first-child,.seat-east .seat-hand .playing-card:first-child { margin-top:0; }
.seat-south .playing-card { cursor:pointer; }
.seat-south .playing-card:hover:not(:disabled),.seat-south .playing-card:focus-visible { z-index:12; transform:translateY(-10px); }
.seat-south .playing-card.is-illegal { filter:brightness(.48) saturate(.65); cursor:not-allowed; }
.seat-south .playing-card.is-illegal::after { content:"Must follow suit"; position:absolute; inset:auto 4px 5px; padding:2px; background:rgba(7,23,37,.85); color:white; font-size:8px; }
.playing-card.shake { animation:illegal-shake .28s ease; }
@keyframes illegal-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)} }
.table-center { position:absolute; z-index:4; top:43%; left:50%; width:min(56%,660px); height:auto; transform:translate(-50%,-50%); display:grid; grid-template-rows:auto auto auto; gap:12px; justify-items:center; align-items:center; }
body[data-phase="play_hand"] .table-center { top:49%; }
.current-trick { position:relative; width:min(var(--trick-surface-w),100%); height:var(--trick-surface-h); overflow:visible; transition:height .18s ease; }
.current-trick[data-card-count="0"] { height:0; }
.trick-card { position:absolute; width:var(--trick-card-w); height:var(--trick-card-h); border-radius:5px; overflow:hidden; box-shadow:0 7px 20px rgba(0,0,0,.42); animation:card-in .24s ease both; }
.trick-card img { width:100%; height:100%; display:block; }
.trick-card::after { content:attr(data-seat-marker); position:absolute; z-index:2; top:5px; left:34px; min-width:18px; padding:3px; border:1px solid rgba(240,200,95,.55); border-radius:12px; background:rgba(7,23,37,.88); color:var(--maize-pale); font:800 9px/1 var(--sans); text-align:center; }
.trick-card[data-seat="north"] { top:0; left:50%; transform:translateX(-50%); }
.trick-card[data-seat="south"] { bottom:0; left:50%; transform:translateX(-50%); }
.trick-card[data-seat="west"] { top:50%; left:0; transform:translateY(-50%) rotate(-2deg); }
.trick-card[data-seat="east"] { top:50%; right:0; transform:translateY(-50%) rotate(2deg); }
.trick-card.is-winner { outline:3px solid var(--maize); box-shadow:0 0 22px rgba(240,200,95,.75); }
@keyframes card-in { from{opacity:0;scale:.88}to{opacity:1;scale:1} }
.up-card-slot { position:absolute; z-index:5; text-align:center; }
.up-card-slot[data-dealer="north"] { top:calc(var(--card-h) + 86px); left:50%; transform:translateX(-50%); }
.up-card-slot[data-dealer="south"] { bottom:8px; left:calc(50% + var(--human-card-w) * 2.02); transform:none; }
.up-card-slot[data-dealer="west"] { top:35%; left:calc(var(--card-w) + 126px); transform:translateY(-50%); }
.up-card-slot[data-dealer="east"] { top:35%; right:calc(var(--card-w) + 126px); transform:translateY(-50%); }
.up-card-slot .playing-card { width:var(--upcard-w); height:var(--upcard-h); cursor:default; }
.up-card-slot small { display:block; margin-top:6px; color:rgba(255,255,255,.68); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.up-card-slot strong { display:block; margin-top:3px; padding:5px 8px; border-radius:4px; background:rgba(7,23,37,.86); color:var(--maize-pale); font-size:13px; white-space:nowrap; }
.books-area { position:absolute; z-index:2; bottom:20px; width:calc(var(--book-w) * 1.65); height:calc(var(--book-h) * 3.08); pointer-events:none; }
.books-area-ns { left:clamp(190px,18vw,230px); }
.books-area-ew { right:clamp(190px,18vw,230px); }
.books-area h3 { position:absolute; z-index:8; bottom:calc(var(--book-h) * 3 + 44px); width:max-content; margin:0; padding:5px 8px; border:1px solid rgba(210,173,82,.28); border-radius:18px; background:rgba(7,23,37,.76); color:rgba(255,255,255,.82); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.books-area-ns h3 { left:0; }.books-area-ew h3 { right:0; }
.books-area h3 span { display:inline-grid; min-width:19px; height:19px; margin-left:5px; place-items:center; border-radius:50%; background:var(--maize); color:var(--navy-950); font-size:11px; }
.books-stack { position:relative; width:100%; height:100%; overflow:visible; }
.book-marker { position:absolute; width:var(--book-w); height:var(--book-h); z-index:var(--book-z); filter:drop-shadow(0 6px 8px rgba(0,0,0,.32)); }
.books-area-ns .book-marker[data-book-index="1"],.books-area-ns .book-marker[data-book-index="2"],.books-area-ns .book-marker[data-book-index="5"] { right:0; }
.books-area-ns .book-marker[data-book-index="3"],.books-area-ns .book-marker[data-book-index="4"] { right:calc(var(--book-w) * .55); }
.books-area-ew .book-marker[data-book-index="1"],.books-area-ew .book-marker[data-book-index="2"],.books-area-ew .book-marker[data-book-index="5"] { left:0; }
.books-area-ew .book-marker[data-book-index="3"],.books-area-ew .book-marker[data-book-index="4"] { left:calc(var(--book-w) * .55); }
.book-marker[data-book-index="1"] { bottom:0; }.book-marker[data-book-index="2"] { bottom:calc(var(--book-h) * .5); }.book-marker[data-book-index="3"] { bottom:var(--book-h); }.book-marker[data-book-index="4"] { bottom:calc(var(--book-h) * 1.5); }.book-marker[data-book-index="5"] { bottom:calc(var(--book-h) * 2); }
.book-layer,.book-top { position:absolute; inset:0; border-radius:5px; overflow:hidden; }
.book-layer { transform:translate(calc(var(--layer) * 1.5px),calc(var(--layer) * 1.5px)); box-shadow:0 0 0 1px rgba(238,226,189,.28); }
.book-top { z-index:5; box-shadow:0 0 0 1px rgba(238,226,189,.34),0 4px 8px rgba(0,0,0,.25); }
.book-layer img,.book-top img { display:block; width:100%; height:100%; }
.books-area-ns .book-marker.is-new { animation:book-arrive-ns .56s cubic-bezier(.2,.72,.2,1) both; }.books-area-ew .book-marker.is-new { animation:book-arrive-ew .56s cubic-bezier(.2,.72,.2,1) both; }
@keyframes book-arrive-ns { from{opacity:0;transform:translate(180px,-110px) rotateY(75deg) scale(1.12)}to{opacity:1;transform:none} }
@keyframes book-arrive-ew { from{opacity:0;transform:translate(-180px,-110px) rotateY(75deg) scale(1.12)}to{opacity:1;transform:none} }
.table-message { max-width:650px; min-height:54px; padding:12px 21px; border:2px solid rgba(210,173,82,.4); border-radius:5px; background:rgba(7,23,37,.88); color:var(--maize-pale); box-shadow:0 7px 20px rgba(0,0,0,.2); font:italic 19px/1.35 var(--serif); text-align:center; }
body[data-phase="play_hand"] .table-message { min-height:48px; padding:9px 18px; }
.action-panel { min-height:50px; width:100%; display:flex; flex-wrap:wrap; gap:7px; align-content:center; justify-content:center; padding:7px; border-radius:5px; background:transparent; }
.action-panel:empty { display:none; min-height:0; padding:0; }
.action-panel .suit-button { min-width:42px; font:700 18px var(--serif); }
.action-panel .suit-button.red { color:#ffb2a9; }
.action-panel .suit-button.is-selected { border-color:var(--maize); background:rgba(210,173,82,.22); }
.toast { position:fixed; z-index:60; right:22px; bottom:22px; padding:11px 15px; border:1px solid var(--maize); border-radius:3px; background:#071725; color:var(--maize-pale); box-shadow:0 8px 28px rgba(0,0,0,.45); font-size:12px; }
.game-dialog { width:min(92vw,470px); padding:0; border:1px solid rgba(210,173,82,.72); border-radius:4px; background:#0f2d38; box-shadow:0 24px 80px rgba(0,0,0,.65); color:#fff; }
.game-dialog [hidden],.control-bar [hidden] { display:none!important; }
.game-dialog::backdrop { background:rgba(3,15,20,.78); backdrop-filter:blur(3px); }
.game-dialog form,.result-dialog>div { display:grid; gap:14px; padding:28px; }
.game-dialog h2 { margin:0; color:var(--maize-pale); font:500 27px/1.1 var(--serif); }.game-dialog p{margin:0;color:rgba(255,255,255,.65);font-size:12px;line-height:1.5}
.game-dialog label { display:grid; gap:5px; color:rgba(255,255,255,.62); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.game-dialog select,.game-dialog input[type="number"] { width:100%; min-height:39px; padding:7px 9px; border:1px solid rgba(238,226,189,.25); border-radius:3px; background:#173b3b; color:#fff; }
.toggle-row { grid-template-columns:auto 1fr!important; align-items:start; gap:10px!important; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:3px; text-transform:none!important; letter-spacing:0!important; }
.toggle-row input { width:18px;height:18px;accent-color:var(--maize)}.toggle-row strong,.toggle-row small{display:block}.toggle-row small{margin-top:3px;color:rgba(255,255,255,.54);font-weight:400;line-height:1.35}
.setting-note { padding:8px 10px; border-left:2px solid var(--maize); background:rgba(210,173,82,.08); }.result-score{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-score span{padding:10px;background:rgba(255,255,255,.055);font-size:11px}.result-score strong{float:right;color:var(--maize-pale);font-size:18px}
.debug-panel { position:fixed; z-index:45; right:8px; bottom:8px; width:min(470px,calc(100vw - 16px)); max-height:42vh; overflow:auto; padding:12px; border:1px solid #d2ad52; background:rgba(7,23,37,.97); color:#d9e8e4; font-size:10px; }.debug-panel header{display:flex;gap:12px;align-items:center;justify-content:space-between}.debug-panel header>div{display:flex;gap:5px}.debug-panel p{margin:5px 0}.debug-panel pre{white-space:pre-wrap;word-break:break-word}.debug-panel.is-collapsed{width:auto;max-height:none;overflow:visible}.debug-panel.is-collapsed p,.debug-panel.is-collapsed pre{display:none}
@media(max-width:1000px){.euchre-table{min-height:860px}.seat-west{left:8px}.seat-east{right:8px}.books-area-ns{left:clamp(142px,20vw,200px)}.books-area-ew{right:clamp(142px,20vw,200px)}}
@media(min-width:1200px){.seat-south{bottom:0}.trick-card[data-seat="north"]{top:20px}}
@media(max-width:700px){.game-header{padding:10px 12px}.game-header p,.game-header .eyebrow{display:none}.euchre-settings{padding:8px 12px}.euchre-settings label{flex:1 1 120px}.euchre-settings .settings-note{flex:1 0 100%;margin:0}.match-bar{grid-template-columns:repeat(3,1fr);padding:0 12px}.match-bar div{min-height:58px;padding-block:8px}.match-bar span{font-size:9px}.match-bar strong{font-size:16px}.trick-tally-cell{min-width:0}#trick-score{gap:10px}.trick-side b{font-size:11px}.trick-pip{width:8px;height:8px}.euchre-table{--card-w:clamp(62px,18vw,82px);--card-h:calc(var(--card-w)*1.4);--trick-card-w:clamp(62px,17vw,74px);--trick-card-h:calc(var(--trick-card-w)*1.4);--trick-gap:14px;--trick-surface-w:clamp(300px,86vw,430px);--book-w:clamp(38px,11vw,46px);--book-h:calc(var(--book-w)*1.4);min-height:820px}.euchre-table::before{inset:8px;border-radius:38%}.seat-north{top:7px}.seat-south{bottom:7px}.seat-west{top:42%;left:4px}.seat-east{top:42%;right:4px}.seat-heading{min-height:32px;font-size:15px;padding:5px 9px}.seat-west .seat-heading,.seat-east .seat-heading{max-width:118px;white-space:normal;text-align:center}.dealer-marker{width:22px;height:22px;font-size:11px}.caller-marker{width:24px;height:24px;font-size:16px}.table-center{top:42%;width:calc(100% - 16px)}body[data-phase="play_hand"] .table-center{top:49%}.current-trick{width:min(var(--trick-surface-w),100%)}.up-card-slot[data-dealer="north"]{top:calc(var(--card-h) + 55px)}.up-card-slot[data-dealer="south"]{bottom:6px;left:calc(50% + var(--card-w) * 1.8)}.up-card-slot[data-dealer="west"]{top:34%;left:calc(var(--card-w) + 68px)}.up-card-slot[data-dealer="east"]{top:34%;right:calc(var(--card-w) + 68px)}.up-card-slot small{font-size:9px}.up-card-slot strong{font-size:10px}.books-area{bottom:calc(var(--card-h) + 78px)}.books-area-ns{left:clamp(56px,18vw,82px)}.books-area-ew{right:clamp(56px,18vw,82px)}.books-area h3{bottom:calc(var(--book-h)*3 + 5px);padding:3px 5px;font-size:8px}.books-area h3 span{min-width:15px;height:15px;font-size:9px}.table-message{min-height:45px;padding:9px 12px;font-size:15px}.action-panel{width:100%;padding:5px}.action-panel:empty{padding:0}.button{min-height:33px;padding:6px 9px;font-size:10px}.seat-south .seat-hand .playing-card{margin-left:calc(var(--card-w)*-.58)}.seat-south .seat-hand .playing-card.starts-suit{margin-left:calc(var(--card-w)*-.34)}}
@media(max-width:390px){.game-header h1{font-size:24px}.game-actions{gap:4px}.match-bar strong{font-size:11px}.euchre-table{min-height:820px;--trick-card-w:64px;--trick-gap:12px}.table-center{top:41%}body[data-phase="play_hand"] .table-center{top:49%}}
@media(prefers-reduced-motion:reduce){.book-marker.is-new,.trick-card{animation:none!important}}