:root{color-scheme:dark;--cream:#f2efe6;--muted:#a1b6ab;--felt:#009400;--scale:1}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--cream);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:radial-gradient(ellipse at 20% 15%,#60897329,transparent 40%),radial-gradient(ellipse at 80% 70%,#2e545033,transparent 45%),linear-gradient(#081512 0%,#0c211c 55%,#122c25 100%);background-attachment:fixed}button,input,select{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffd65b;outline-offset:4px}.home{position:absolute;top:23px;left:28px;text-decoration:none;color:var(--cream);font-size:12px;font-weight:800;letter-spacing:2.5px}main{padding:30px 12px 20px;max-width:1100px;margin:auto}header{text-align:center;margin:0 auto 8px}h1{font-size:52px;letter-spacing:1px;line-height:1.08;margin:10px 0 3px;font-weight:900;color:#fff;text-shadow:1px 3px 2px #0006}nav{display:flex;justify-content:center;align-items:center;gap:7px;font-size:17px;font-weight:700;margin:6px 0 9px}nav button,.footer button{border:0;background:none;color:var(--cream);padding:3px 0}nav button:hover,.footer button:hover{text-decoration:underline}nav span{color:#8ea194}.game-layout{display:flex;flex-direction:column;align-items:center;gap:12px}#table-shell{width:720px;height:616px;position:relative}#table{width:720px;height:616px;position:relative;border:3px solid #f4f4e8;border-radius:31px;background:var(--felt);box-shadow:0 0 5px 3px #ffffff35,0 12px 32px #0007;transform-origin:top left;overflow:hidden;color:white;font-family:Arial,sans-serif}.portrait{position:absolute;width:84px;left:310px;display:flex;flex-direction:column;align-items:center;font-size:14px;line-height:17px;z-index:2}.portrait img{width:51px;height:55px;object-fit:cover;border-radius:48% 48% 42% 42%;filter:drop-shadow(0 2px 2px #0005)}.portrait.opponent{top:8px}.opponent img{object-position:50% 51%}.portrait.player{bottom:5px}.player img{object-position:50% 55%}.portrait small{position:absolute;top:21px;left:75px;background:#ffffc8;color:#232323;border-radius:50%;font-size:10px;font-weight:bold;width:21px;height:21px;line-height:21px}.portrait small:empty{display:none}.hand{position:absolute;display:flex;justify-content:center;width:400px;left:137px;gap:7px;min-height:94px}.hand .card{flex-shrink:0}#opponent-hand{top:89px}#player-hand{top:430px;align-items:flex-end;z-index:5}.card{position:relative;width:67px;height:94px;background:#fff;border:1px solid #c0c0b0;border-radius:7px;box-shadow:1px 2px 2px #0006;padding:0;color:#111;user-select:none;vertical-align:middle;transition:transform .14s,filter .14s;flex-shrink:0;overflow:hidden}.card.red{color:#c31520}.card .corner{position:absolute;left:4px;top:4px;font-family:Georgia,serif;line-height:15px;font-size:19px;font-weight:500;text-align:center;z-index:1}.card .corner.bottom{left:auto;top:auto;bottom:4px;right:4px;transform:rotate(180deg)}.corner b{font-size:16px;display:block;line-height:15px}.card .pips{position:absolute;inset:10px 17px;display:grid;grid-template-columns:1fr 1fr;align-content:space-evenly;font-size:20px;line-height:18px;justify-items:center}.card .pips.single{inset:25px 9px;display:flex;align-items:center;justify-content:center;font-size:37px}.card .court{font-family:Georgia,serif;position:absolute;inset:14px 15px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid currentColor;background:#ffefb8;font-size:28px}.card .court small{font-size:22px}.card.back{background:repeating-conic-gradient(#c22 0 25%,#fff 0 50%) 0 0/5px 5px;border:4px solid #fff;box-shadow:0 0 0 1px #cac5ac,2px 3px 2px #0005}.card.back:after{content:'';position:absolute;inset:1px;border:1px solid #c22;border-radius:2px}.card.ghost{opacity:.25}.card.selected{transform:translateY(-19px);box-shadow:0 0 0 3px #ffff6c,2px 3px 4px #0007}.card.recommended:not(.selected){box-shadow:0 0 0 3px #ffe55a,2px 3px 4px #0007}.card:disabled:not(.back){filter:brightness(.68)}button.card:hover:enabled{transform:translateY(-8px)}button.card.selected:hover{transform:translateY(-19px)}.card img{width:100%;height:100%;display:block}.board-area button{display:block;padding:0;border:0;background:none}#board svg{width:100%;height:100%}#scores{margin:9px auto 0;padding:3px;background:#fff;color:#000;border:2px solid #111;width:135px;font-size:14px}#scores table{border-collapse:collapse;width:100%}#scores td{border:1px solid #111;padding:3px 4px}.dot{display:inline-block;width:13px;height:13px;border:1px solid #111;border-radius:40%;vertical-align:middle}.dot.you{background:#e9423a}.dot.opponent{background:#02baf0}#center{position:absolute;left:135px;top:208px;width:400px;height:145px;display:flex;align-items:center;justify-content:center;gap:16px}#center .play-stack{position:relative;display:flex;align-items:center;justify-content:center;max-width:290px;padding-right:24px}#center .play-stack .card+.card{margin-left:-38px}#center .play-stack .card{transform:rotate(-3deg)}#center .play-stack .card:nth-child(even){transform:rotate(3deg)}#center .count{font-size:30px;position:absolute;left:13px;top:105px;background:#ffffcf;color:#222;border-radius:5px;padding:3px 13px;min-width:56px;text-align:center}#center .starter{position:absolute;left:-110px;top:13px;text-align:center;font-size:11px;color:#fff}#center .starter .card{margin-top:4px;display:block}#center .draw-cards{display:flex;margin-left:45px}#center .draw-cards .card+.card{margin-left:-44px}.big-button,#actions button,.dialog-action{border:1px solid #53634d;border-radius:4px;background:linear-gradient(#fff,#ddd);color:#222;padding:8px 23px;box-shadow:0 1px 2px #0003;min-height:37px}.big-button{min-width:168px;font-size:22px}button:disabled.big-button,#actions button:disabled{opacity:.6}.deck{box-shadow:3px 3px #d4d6ba,6px 6px #afb795,9px 9px #8d9f70!important}.cut-label{font-size:12px;text-align:center}.cut-label .card{display:block;margin:5px auto}.show-cards{display:flex;gap:5px;position:absolute;top:29px}.show-title{position:absolute;top:2px;text-align:center;width:100%;font-size:16px;font-weight:bold}.show-score{position:absolute;top:131px;text-align:center;width:100%;font-size:15px}#message{position:absolute;left:174px;top:370px;width:363px;min-height:41px;background:#eff14e;color:#17200e;border-radius:4px;padding:7px;font-size:13px;line-height:16px;z-index:3}#actions{position:absolute;top:532px;left:92px;width:446px;display:flex;justify-content:center;gap:10px;z-index:6}#actions button{font-size:13px;min-height:28px;padding:4px 12px}#crib{position:absolute;top:95px;left:45px;text-align:center;font-size:12px;color:#fff}#crib .card{display:block;width:45px;height:62px;margin-top:5px;box-shadow:2px 2px #bcc199,4px 4px #90a168}.trainer-area{width:720px;max-width:100%}.trainer-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;width:max-content;margin:auto;user-select:none}.trainer-toggle>span:first-child{font-weight:600}.trainer-toggle input{position:absolute;opacity:0;width:40px;height:24px}.switch{height:23px;width:42px;background:#52605a;border:1px solid #83938a;border-radius:14px;position:relative}.switch:after{content:'';position:absolute;width:17px;height:17px;background:#f2efe6;border-radius:50%;top:2px;left:3px;transition:transform .15s}.trainer-toggle input:checked+.switch{background:#347b52}.trainer-toggle input:checked+.switch:after{transform:translateX(17px)}.trainer-toggle input:focus-visible+.switch{outline:3px solid #ffd65b;outline-offset:4px}#trainer-state{color:#b6c5bc;font-size:12px;width:20px}#trainer{border:1px solid #b9cfbd44;border-radius:9px;background:#07120edb;padding:17px 20px;margin-top:12px;font-size:14px;line-height:1.5}#trainer strong{color:#ffde7e}#trainer h3{font-size:16px;margin:0 0 7px}#trainer p{margin:5px 0}.trainer-numbers{display:flex;gap:22px;margin:12px 0}.trainer-numbers span{display:flex;flex-direction:column;color:#a9beb1;font-size:12px}.trainer-numbers b{color:#f2efe6;font-size:20px;font-weight:600}#trainer .fine{color:#a9beb1;font-size:12px}#trainer details{margin-top:10px}#trainer table{width:100%;border-collapse:collapse;font-size:13px}#trainer td,#trainer th{padding:5px 9px;text-align:left;border-bottom:1px solid #ffffff20}.footer{text-align:center;color:#a9beb1;font-size:12px;margin:18px 0}.footer button{color:#dce7de;font-size:12px;margin-left:5px}dialog{width:min(570px,calc(100vw - 24px));max-height:85dvh;border:1px solid #799283;border-radius:12px;background:#10241d;color:#f2efe6;padding:22px;box-shadow:0 15px 50px #000a}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-head h2{font-size:23px;margin:0}.dialog-head button{font-size:28px;background:none;color:inherit;border:0;padding:0 8px}#dialog-content{line-height:1.55;font-size:15px}#dialog-content h3{font-size:17px;margin-bottom:5px}#dialog-content table{border-collapse:collapse;width:100%;margin:10px 0}#dialog-content td,#dialog-content th{padding:5px;border-bottom:1px solid #ffffff25;text-align:left}#dialog-content .points{text-align:right;font-weight:bold}#dialog-content select{padding:6px;background:#1a3b2e;border:1px solid #829c8d;color:inherit;border-radius:4px}#dialog-content label{display:flex;justify-content:space-between;align-items:center;margin:14px 0}.dialog-actions{display:flex;gap:10px;margin-top:18px}.fine{font-size:12px;color:#a9beb1}.win{font-size:29px;font-weight:bold;text-align:center;width:100%}.win small{display:block;font-size:15px;margin:10px 0;font-weight:normal}#resume-note{font-size:12px}.score-details{color:inherit;background:none;border:0;text-decoration:underline;font-size:13px}@media(max-width:900px){.home{position:relative;display:block;top:auto;left:auto;margin:20px 22px 0}main{padding-top:0}}@media(max-width:580px){h1{font-size:37px;margin-top:12px}nav{font-size:14px;gap:6px}main{padding-left:8px;padding-right:8px}.home{font-size:10px;margin:14px 16px 0}#trainer{padding:14px}.trainer-numbers{gap:15px}.trainer-numbers b{font-size:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Nicu Buculei's original public-domain deck, distributed by cards.js. */
.card{border:0;background:transparent}.card.back{border:0;background:url('assets/cards/cardback_red.svg') center/100% 100% no-repeat}.card.back:after{display:none}.card img{object-fit:fill}
/* Leave room between the hand, action buttons and portrait. */
#message{top:350px}#player-hand{top:407px}#actions{top:509px}.portrait.player{bottom:2px}
/* Phone table keeps readable controls and full-sized touch targets. */
@media(max-width:580px){
 #table-shell{width:100%;height:550px}#table{width:100%;height:550px;border-radius:22px;transform:none!important}
 #scores{width:88px;font-size:11px;margin-top:6px;padding:1px}#scores td{padding:3px 2px}.dot{width:9px;height:9px}
 .portrait.opponent{top:12px;left:calc((100% - 100px)/2 - 35px);width:70px;font-size:13px}.portrait.opponent img{width:42px;height:46px}.portrait small{left:62px;top:14px}
 #opponent-hand{left:10px;top:94px;width:calc(100% - 110px);gap:3px;min-height:58px}#opponent-hand .card{width:31px;height:44px}
 #crib{top:161px;left:12px;font-size:10px}#crib .card{width:29px;height:41px}
 #center{left:10px;top:172px;width:calc(100% - 111px);height:135px;gap:12px}#center>.card{width:48px;height:68px}.big-button{min-width:112px;font-size:18px;padding:8px 12px;min-height:44px}#center .draw-cards{margin-left:25px}#center .draw-cards .card{width:49px;height:69px}#center .draw-cards .card+.card{margin-left:-31px}
 #center .starter{left:0;top:2px;font-size:9px}#center .starter .card{width:37px;height:53px}.play-stack{margin-left:34px}#center .play-stack .card{width:46px;height:65px}#center .play-stack .card+.card{margin-left:-29px}#center .count{left:3px;top:82px;font-size:22px;min-width:40px;padding:3px 7px}
 #center .show-title{top:-12px;font-size:14px}.show-cards{top:26px;gap:3px}.show-cards .card{width:43px;height:61px}.show-score{top:105px!important;font-size:13px!important}
 #message{left:12px;top:359px;width:calc(100% - 24px);min-height:43px;font-size:13px;line-height:16px;padding:7px}
 #player-hand{left:10px;top:423px;width:calc(100% - 20px);gap:4px;min-height:72px}#player-hand .card{width:calc((100vw - 64px)/6);max-width:62px;height:calc((100vw - 64px)/6 * 1.4);max-height:86px;min-width:40px;min-height:57px}
 #actions{top:499px;left:65px;width:calc(100% - 73px);gap:6px}#actions button{min-height:38px;font-size:13px;padding:7px 10px}
 .portrait.player{left:7px;bottom:3px;width:53px;font-size:12px;line-height:14px}.portrait.player img{width:34px;height:37px}.portrait.player small{left:39px;top:7px;font-size:9px;width:16px;height:16px;line-height:16px}
 .win{font-size:24px}.win small{font-size:13px}.cut-label .card{width:50px;height:71px}
}
@media(min-width:420px) and (max-width:580px){#table,#table-shell{height:575px!important}#actions{top:524px}.portrait.player{bottom:3px}}
@media(max-width:580px){#crib{top:18px;left:13px}#opponent-hand .card{width:calc((100% - 15px)/6);max-width:36px;height:auto;aspect-ratio:140/190}#opponent-hand{align-items:flex-start}}

@media(max-width:419px){#table,#table-shell{height:566px!important}#actions{top:515px}}
@media(max-width:580px){.show-cards .card{width:calc((100vw - 150px)/5);max-width:45px;height:auto;aspect-ratio:140/190}#center .draw-cards{margin-left:0}#center .draw-cards .card+.card{margin-left:-34px}}

/* Simple scoreboard; reserve separate vertical rows for scoring, status, and cards. */
.scoreboard{position:absolute;right:14px;top:16px;width:118px;text-align:center}
.score-target{font-size:11px;display:block;margin-bottom:5px;color:#fff}
#scores{width:118px;margin:0;font-size:15px;border-radius:4px;padding:4px}
#scores td{padding:5px 3px}
@media(min-width:581px){
 .portrait{left:calc(50% - 42px)}
 .hand{left:calc(50% - 240px);width:480px}
 #center{left:calc(50% - 200px);top:177px}
 #message{left:calc(50% - 215px);width:430px;top:339px}
 #player-hand{top:407px}
 #actions{left:calc(50% - 223px);top:505px}
}
@media(max-width:580px){
 .scoreboard{right:10px;top:12px;width:88px}
 .score-target{font-size:10px;margin-bottom:3px}
 #scores{width:88px;font-size:12px;padding:2px}
 #scores td{padding:4px 2px}
}
@media(max-width:580px){
 .portrait.opponent{left:calc(50% - 35px)}
 #opponent-hand{left:10px;width:calc(100% - 20px)}
 #center{left:12px;width:calc(100% - 24px)}
}

/* Original-style score announcements beside the two faces. */
.speech{position:absolute;right:calc(100% + 5px);top:0;width:112px;min-height:56px;border:1px solid #111;border-radius:50%;background:white;color:#111;font:15px/18px Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding:9px 12px;z-index:7;filter:drop-shadow(1px 2px 1px #0003)}
.speech[hidden]{display:none}.speech:after{content:'';position:absolute;right:-7px;top:26px;width:13px;height:11px;background:#fff;border-right:1px solid #111;transform:skewY(32deg)}
.score-dialog{background:#eff14e;color:#111;border:1px solid #222;border-radius:5px;padding:16px;width:min(460px,calc(100vw - 24px))}.score-dialog::backdrop{background:#0003;backdrop-filter:none}.score-dialog .dialog-head{margin-bottom:8px}.score-dialog .dialog-head h2{font-size:21px}.scorecard-hand{display:flex;justify-content:center;gap:4px;margin-bottom:10px}.scorecard-hand .card{width:39px;height:55px}.score-dialog #dialog-content{font-size:14px}.score-dialog #dialog-content th,.score-dialog #dialog-content td{border:1px solid #111;padding:5px;text-align:center}.scorecard-table{background:white;color:#111}.red-ink{color:#d00}.scorecard-nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}.score-dialog .dialog-action{font-size:13px;padding:5px 9px;min-height:30px}
@media(max-width:580px){
 #table,#table-shell{height:640px!important}
 #actions{top:515px;left:10px;width:calc(100% - 20px)}
 .portrait.player{left:calc(50% - 35px);bottom:5px;width:70px;font-size:14px;line-height:16px}
 .portrait.player img{width:42px;height:46px}
 .portrait.player small{left:62px;top:14px}
 .speech{width:90px;min-height:48px;font-size:12px;line-height:15px;padding:7px 9px;right:calc(100% + 1px)}
 .speech:after{top:23px}
}
/* Keep the crib beside the lower player, clear of the speech bubbles. */
@media(min-width:581px){#crib{top:435px;left:43px}}
@media(max-width:580px){#crib{top:294px;left:13px}}
@media(max-width:580px){#actions button{min-height:44px}}

.opponent img[data-expression="sad"]{object-position:50% 76%}
.player img[data-expression="happy"]{object-position:50% 52%}
/* Persistent scoring awards beside the running count, beneath played cards. */
#center .play-stack{align-self:flex-start;margin-top:6px}
.points-earned{position:absolute;top:112px;left:85px;width:calc(100% - 85px);padding:4px 8px;border:1px solid #636335;border-radius:5px;background:#ffffcf;color:#111;font:14px/17px Arial,sans-serif}
.points-earned>div{display:flex;align-items:baseline;gap:9px}.points-earned strong{white-space:nowrap}.points-earned span{text-transform:capitalize}
@media(max-width:580px){.points-earned{left:65px;width:calc(100% - 65px);font-size:12px;line-height:16px;padding:4px 6px}.points-earned>div{gap:7px}}

.portrait>span{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;min-height:18px}
.portrait.player small,.portrait.opponent small{position:static;left:auto;top:auto;width:auto;height:18px;line-height:18px;font-size:10px;padding:0 4px;border-radius:3px}