@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#eee9dd;background:#102821;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#244739,#102821 70%);min-height:100vh}header{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px}header a{font-weight:700;letter-spacing:3px;color:#e9c887;text-decoration:none}header a span{font-size:9px;display:block;letter-spacing:5px}nav{display:flex;gap:6px}button{font:inherit;cursor:pointer;border:1px solid #668174;background:#274638;color:#fff9e9;border-radius:9px;padding:10px 16px}button:hover{background:#42644f}button:focus-visible{outline:3px solid #e9c887;outline-offset:3px}button:disabled{opacity:.4;cursor:default}main{max-width:1000px;margin:auto;padding:0 24px}.intro{display:flex;align-items:center;justify-content:space-between;margin:22px 0 25px}.eyebrow{font-size:10px;letter-spacing:2px;color:#cbb68b}h1{font:700 54px 'Playfair Display',Georgia,serif;margin:8px 0}h1 i{font-weight:400;color:#e9c887}.goal{text-align:right;color:#9db5a7;line-height:1.7;font-size:14px}.goal strong{color:#eee9dd}#scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.player{border:1px solid #496454;border-radius:12px;padding:16px;display:flex;justify-content:space-between;background:#16362a}.player.active{border-color:#e9c887;box-shadow:0 0 0 1px #e9c887}.player b{display:block;font-size:16px}.player small{display:block;color:#9db5a7;margin-top:6px}.score{font:36px Georgia;color:#edce91}.table{border:1px solid #597565;border-radius:24px;background:radial-gradient(ellipse,#315d44,#214532);padding:22px;min-height:435px;box-shadow:0 22px 50px #06140e80}.table-top{display:flex;justify-content:space-between;color:#cbbd9c;font-size:12px;letter-spacing:1px}#status{text-align:center;min-height:45px;padding:18px 0;font-weight:600}#center{display:flex;gap:14px;justify-content:center;min-height:115px;align-items:center}#actions{text-align:center;margin:12px 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}#last{text-align:center;font-size:12px;color:#d1dbc6;min-height:22px}.hand-label{text-align:center;font-size:12px;color:#c3cfbb;padding:10px}#cards{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.card{background:#faf5e7;color:#17291e;border:1px solid #e4dcc8;border-radius:10px;min-width:69px;width:85px;height:115px;display:inline-flex;flex-direction:column;justify-content:space-between;text-align:left;padding:9px;box-shadow:0 5px 12px #0a251b60;font:600 23px Georgia;position:relative;transition:transform .15s}.card.red{color:#b63d42}.card .symbol{font-size:35px;text-align:center}.card .bottom{text-align:right;font-size:15px}.card:hover:not(:disabled){background:#fffaf0;transform:translateY(-7px)}.card:disabled{opacity:.48}.played{text-align:center}.played small{display:block;font:11px system-ui;margin-top:6px;color:#eee9dd}.back{background:repeating-linear-gradient(45deg,#284839,#284839 4px,#3b604b 4px,#3b604b 6px);color:#e9c887;border:3px solid #c5b384;text-align:center;justify-content:center}.badge{font-size:9px;background:#e9c887;color:#17291e;border-radius:4px;padding:2px 4px;margin-left:5px}details{margin-top:20px;color:#b0c1b4;font-size:13px}summary{cursor:pointer}table{width:100%;border-collapse:collapse;margin:16px 0}th,td{text-align:center;padding:8px;border-bottom:1px solid #55705f}footer{display:flex;justify-content:center;gap:10px;color:#718e7c;font-size:11px;margin:30px}dialog{max-width:540px;width:calc(100% - 32px);background:#18392b;color:#eee9dd;border:1px solid #7c8e66;border-radius:18px;padding:30px;line-height:1.6}dialog::backdrop{background:#03130dbb}.close{float:right;padding:0 9px;font-size:24px}dialog h2{font:30px Georgia;color:#e9c887}dialog input,dialog select{width:100%;padding:12px;border:1px solid #668174;border-radius:8px;margin:5px 0 12px;background:#102b20;color:white}dialog label{font-size:13px}dialog li{margin-bottom:10px}.primary{background:#e9c887;color:#173421;border-color:#e9c887}.primary:hover{background:#f8dda3}@media(max-width:600px){header{padding:16px}nav button{padding:8px;font-size:12px}main{padding:0 12px}.intro{margin:10px 0 20px}h1{font-size:38px}.goal{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1px}.player{padding:11px 9px}.player b{font-size:13px}.score{font-size:29px}.player small{font-size:10px}.table{padding:15px 10px;border-radius:18px}.card{width:58px;min-width:51px;height:91px;font-size:19px;padding:7px}.card .symbol{font-size:29px}#cards{gap:5px}#scores{gap:7px}}

/* v1.1.0: four-card trump pile, kept on the left */
.play-area{display:grid;grid-template-columns:110px minmax(0,1fr) 110px;gap:12px;align-items:center;min-height:178px}#kitty{text-align:center;font-size:12px;align-self:start}#kitty strong,#kitty small{display:block;margin-top:7px}#kitty small{font-size:10px;color:#d1dbc5}.kitty-stack{position:relative;width:85px;height:131px;margin:5px auto 0}.kitty-stack>.card{position:absolute;top:0;left:0;opacity:1;pointer-events:none}.kitty-stack>.back-one{top:15px;left:-9px}.kitty-stack>.back-two{top:10px;left:-6px}.kitty-stack>.back-three{top:5px;left:-3px}.pickup-note{color:#d1dbc5;text-align:center;font-size:13px;line-height:1.6}.play-area #center{min-width:0;gap:8px}@media(max-width:600px){.play-area{grid-template-columns:66px minmax(0,1fr);gap:8px;min-height:160px}.pile-balance{display:none}.kitty-stack{width:58px;height:107px;margin-left:9px}.play-area #center .card{width:51px;min-width:45px}.play-area #center{gap:5px}#kitty strong{font-size:11px}}

/* Shared SOGS game navigation */
header.game-nav{max-width:none;background:#063d32;padding:0 22px;min-height:58px;display:flex;gap:24px;border-bottom:1px solid #b5d5bf33;position:sticky;top:0;z-index:10;flex-wrap:wrap}
.game-nav .game-title{color:#f6efda;font:700 27px Georgia,serif;letter-spacing:-.7px;text-decoration:none;white-space:nowrap;padding:12px 24px 12px 0;border-right:1px solid #a7cdb653}.game-title .title-mark{display:inline;color:#d95455;font:27px Georgia,serif;letter-spacing:normal;margin-right:5px}
.game-nav nav{display:flex;align-items:center;gap:8px;flex:1}.game-nav nav button{display:flex;align-items:center;gap:8px;border:0;padding:11px 10px;border-radius:5px;background:transparent;color:#f3eedb;font-size:14px;white-space:nowrap}.game-nav nav button:hover{background:#ffffff12}.game-nav nav button span{font-size:20px;line-height:1;color:#d5e9dc}
.nav-progress{padding:10px 0 10px 18px;border-left:1px solid #a7cdb653;font:600 16px Georgia,serif;white-space:nowrap;color:#d1e4d6}dialog a{color:#e9c887}body.large-cards #cards .card{width:98px;height:132px}
@media(max-width:900px){header.game-nav{gap:12px;padding:0 14px}.game-nav .game-title{font-size:22px;padding-right:14px}.game-nav nav{gap:0}.game-nav nav button{font-size:12px;padding:10px 8px}.nav-progress{font-size:14px;padding-left:12px}}
@media(max-width:700px){header.game-nav{gap:0;justify-content:space-between;padding:0 12px}.game-nav .game-title{font-size:22px;border:0;padding:12px 0}.nav-progress{order:1;font-size:14px}.game-nav nav{order:2;flex-basis:100%;justify-content:space-between;border-top:1px solid #ffffff17;padding:4px 0}.game-nav nav button{font-size:12px;gap:6px;padding:9px 5px}.game-nav nav button span{font-size:17px}main{padding-top:22px}body.large-cards #cards .card{width:66px;height:105px}}

/* Shared Nancy's Solitaire card backs */
main{padding-top:24px}.back{background-image:linear-gradient(#081c1866,#081c1822),url('/games/nancy_solitaire/assets/card-maple.jpg');background-size:cover;background-position:center;border-color:#fff9e9;text-shadow:0 1px 4px #000;color:#fff9e9}
[data-back="aurora"] .back{background-image:linear-gradient(#061d2666,#061d2622),url('/games/nancy_solitaire/assets/card-aurora.png')}
[data-back="mountain"] .back{background-image:linear-gradient(#071d3366,#071d3322),url('/games/nancy_solitaire/assets/card-mountain.jpg')}
.back-preview{display:flex;justify-content:center;margin:0 0 16px}.back-preview .card{width:65px;min-width:65px;height:90px}dialog input[type="range"]{padding:0;accent-color:#e9c887}dialog output{float:right;color:#e9c887}

@media(max-width:700px){.game-nav nav button{white-space:normal;min-width:0;flex:1;font-size:11px;gap:4px;justify-content:center}.game-nav nav button span{flex-shrink:0}}

/* v1.2.2: aligned table header and left-side choices */
.table{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:22px;row-gap:10px;padding:22px;min-height:390px;align-content:start}
.table-top{grid-column:1/-1;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:18px;align-items:center;margin-bottom:14px}
#status{padding:0;min-height:0;font-size:14px;line-height:1.4;letter-spacing:0;color:#fff9e9}
#hand,#trump{white-space:nowrap}.play-area{display:contents}#kitty{grid-column:1;grid-row:2;align-self:start}
.play-area #center{grid-column:2;grid-row:2;align-self:start;align-items:flex-start;padding-top:5px;min-height:131px;gap:16px}
.spare-hand{text-align:center}.spare-hand small{display:block;margin-top:8px;font-size:12px;color:#d1dbc5}
#actions{grid-column:1;grid-row:3;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:0;gap:8px}#actions:empty{display:none}#actions button{width:100%;font-size:13px;padding:10px 8px}
#last{grid-column:2;grid-row:3;align-self:center;line-height:1.5}#label{grid-column:2;grid-row:4;padding:0}#cards{grid-column:2;grid-row:5;padding:0 12px 6px;gap:10px}
@media(max-width:600px){.table{grid-template-columns:92px minmax(0,1fr);gap:9px;padding:15px 12px;min-height:345px}.table-top{gap:8px;margin-bottom:10px;font-size:10px}#status{font-size:11px}.play-area #center{gap:6px;min-height:107px;flex-wrap:wrap}.play-area #center .card{width:50px;min-width:45px}#actions button{font-size:11px;padding:10px 5px}#cards{gap:5px;padding:0 0 6px}#last{font-size:10px}.kitty-stack{margin-left:auto;margin-right:auto}}

/* v1.2.3: screen-centred cards and a tighter table */
.table{grid-template-columns:150px minmax(0,1fr) 150px;column-gap:16px;row-gap:8px;padding-top:12px;min-height:350px}
.table-top{margin-bottom:5px;grid-template-columns:1fr minmax(0,3fr) 1fr}#trump{text-align:right}.table-sidebar{grid-column:1;grid-row:2/6;display:flex;flex-direction:column;gap:10px;align-self:start;min-width:0}
.play-area #center{grid-column:2;grid-row:2;min-height:142px;padding-top:5px}
#last{grid-column:2;grid-row:3;min-height:16px}#label{grid-column:2;grid-row:4}#cards{grid-column:2;grid-row:5;padding:0 0 6px;gap:8px}
@media(max-width:700px){.table{grid-template-columns:92px minmax(0,1fr);column-gap:9px;padding-top:10px}.table-top{grid-template-columns:max-content minmax(0,1fr) max-content;gap:8px}.play-area #center,#last,#label,#cards{grid-column:2}.play-area #center{min-height:130px}#cards{gap:5px}}

/* v2.0.1: lobby, Euchre packet deal, court faces and results */
[hidden]{display:none!important}#welcome,#lobby{max-width:720px;margin:20px auto;padding:24px;background:#163b2e;border:1px solid #68866d;border-radius:18px}#welcome h1,#lobby h1{font:38px Georgia;margin:8px 0 24px}#welcome input,#welcome select{display:block;width:100%;padding:12px;margin:5px 0 18px;border:1px solid #668174;border-radius:8px;background:#102b20;color:white;font:inherit}#welcome label{font-size:13px}.seat{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #ffffff26;gap:12px}.seat span{color:#d1e4d6;font-size:13px}.quiet{background:transparent;border:0;padding:6px 9px;font-size:12px}.lobby-actions,.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}#error,#connection{color:#ffd0bd;text-align:center;font-size:13px}#error:empty,#connection:empty{display:none}.stats-group{margin:18px 0}.stats-group h3{font:22px Georgia;color:#e9c887}.stats-group td:first-child,.stats-group th:first-child{text-align:left}.stats-group th{color:#d1e4d6}#results-modal{max-width:650px}#results-modal h2{margin-top:8px}.court{position:absolute;inset:24% 18%;background-image:url('/games/nancy_solitaire/assets/court-faces.png');background-repeat:no-repeat;background-size:300% 100%}.court-11{background-position:0 50%}.court-12{background-position:50% 50%}.court-13{background-position:100% 50%}.deal-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:100%;width:100%;padding-bottom:8px}.deal-pile{text-align:center;min-width:0}.deal-pile .card{width:65px;min-width:55px;height:90px}.deal-pile small{display:block;margin-top:7px;font-size:11px}.deal-count{display:block;color:#e9c887;font:14px Georgia}.flying-card{position:fixed!important;z-index:200;pointer-events:none;width:65px!important;min-width:65px!important;height:90px!important}.lead-note{color:#b0c4ac}.played>.card:disabled{opacity:1}.table:has(.deal-board) .play-area #center{min-height:150px}.table:has(.deal-board) #label{visibility:hidden}@media(max-width:700px){.deal-board{grid-template-columns:repeat(2,1fr);gap:8px}.deal-pile .card{width:48px;min-width:48px;height:70px}.deal-pile small{font-size:10px}#welcome,#lobby{padding:18px}.seat{flex-wrap:wrap}.table:has(.deal-board) .play-area #center{min-height:200px}.result-actions button{flex:1}}

/* Keep court figures clear of both corner indices at every card size. */
.card .court{inset:32% 25%}
