:root{--ink:#132016;--muted:#667268;--line:#cbd8cc;--green:#176b3a;--green-dark:#0e4c29;--paper:#f7faf5;--card:#fff;--red:#a31d2d}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background-color:#dfeadb;background-image:linear-gradient(rgba(23,107,58,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(23,107,58,.07) 1px,transparent 1px);background-size:14px 14px;color:var(--ink);font-family:"Trebuchet MS",Verdana,sans-serif;display:grid;place-items:center;padding:20px}
.task-shell{width:min(880px,100%)}.page{display:none;background:rgba(247,250,245,.96);border:1px solid var(--line);padding:clamp(24px,5vw,52px);box-shadow:0 24px 70px rgba(25,57,34,.12)}.page.active{display:block;animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.eyebrow{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.15em;color:var(--green);margin:0 0 8px}h1{font-size:clamp(34px,7vw,68px);line-height:.94;letter-spacing:-.055em;margin:0 0 22px}p{line-height:1.65;color:var(--muted)}
.instruction-grid,.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:28px 0}.instruction-grid article,.result-grid article{background:var(--card);border:1px solid var(--line);padding:16px}.instruction-grid span,.result-grid span{display:block;color:var(--muted);font-size:13px;margin-top:6px}.result-grid strong{font-size:30px}
button,.button-link{min-height:46px;border:1px solid var(--green-dark);background:#fff;color:var(--green-dark);padding:0 22px;font:800 15px/1 "Trebuchet MS",sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--green-dark);color:#fff}.primary:hover,button:hover{transform:translateY(-2px)}
.task-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.progress{height:8px;background:#d9e4d9;flex:1;max-width:420px}.progress span{display:block;height:100%;width:0;background:var(--green);transition:width .25s ease}
.table{margin:26px 0;background:linear-gradient(145deg,#237b46,#145f35);border:8px solid #774b26;min-height:520px;padding:28px;display:grid;grid-template-rows:1fr auto 1fr;gap:16px;color:#fff}.hand-block{display:grid;justify-items:center;align-content:center;gap:10px}.hand-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase}.cards{display:flex;justify-content:center;gap:8px;min-height:120px}.playing-card{width:78px;height:112px;border-radius:7px;background:#fff;color:#111;border:2px solid #111;display:grid;place-items:center;font-size:25px;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.18);animation:deal .25s ease both}.playing-card.red{color:var(--red)}.playing-card.back{background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/16px 16px;color:transparent}
@keyframes deal{from{opacity:0;transform:translateY(-18px) rotate(-3deg)}to{opacity:1;transform:none}}.score{font-size:20px}.message{text-align:center;min-height:24px;font-weight:800}.actions{display:flex;justify-content:center;gap:12px}.actions button{min-width:130px}
@media(max-width:600px){body{padding:0}.page{min-height:100vh;border:0}.table{min-height:480px;padding:18px}.playing-card{width:62px;height:90px}.task-header{align-items:flex-start;flex-direction:column}.progress{width:100%}}