/* v223d: the in-puzzle solve screen (js/puzzle.js shell: .pz) in the canvas look - design-handoff/prev/Puzzles.html.
   Everything is scoped under .pz (the overlay appended to body); evening = html.pv-night .pz */
.pz{--bg:#F6F0E6;--raise:#FFFDF9;--raise2:#F3ECE0;--edge:#E2D6C2;--line:rgba(70,50,25,.12);--line2:rgba(70,50,25,.2);
  --text:#231F1A;--text2:#6B6256;--text3:#9A8F81;--accent:#E5383B;--accent-d:#B3232A;--sun:#E9B949;--sun-d:#B6861B;--gold-ink:#3D2A00;--okg:#3E8A33;
  --ink:var(--text);--muted:var(--text2);--card:var(--raise);--paper:var(--raise2);
  font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 80% 0%,#FBF7F0 0%,rgba(251,247,240,0) 60%),linear-gradient(180deg,#F8F3EA 0%,#F6F0E6 45%,#F0E7D8 100%)}
html.pv-night .pz{--bg:#1C1814;--raise:#2A241E;--raise2:#332C25;--edge:#120F0C;--line:rgba(255,236,210,.08);--line2:rgba(255,236,210,.15);
  --text:#F6EEE2;--text2:#C3B6A3;--text3:#8F8372;--accent:#EF4447;
  background:radial-gradient(120% 60% at 80% 0%,rgba(255,200,120,.07) 0%,rgba(0,0,0,0) 60%),linear-gradient(180deg,#221D18 0%,#1C1814 50%,#171410 100%)}
.pz .pz-in{padding:calc(var(--sat,0px) + 6px) 12px calc(var(--sab,0px) + 10px)}

/* header: back arrow, title, the step / rush counter */
.pz .pz-top{height:48px;gap:10px;margin-bottom:4px;flex:none}
.pz .pz-ib{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;padding:0;background:var(--raise);color:var(--text);box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--edge)}
.pz .pz-ib svg{width:21px;height:21px}
[dir=ltr] .pz .pz-ib svg{transform:scaleX(-1)}
.pz .pz-ttl{min-width:0;font-size:22px;font-weight:900;letter-spacing:-.3px;line-height:1.1}
.pz .pz-step{flex:none;height:30px;padding:0 10px;border-radius:9px;display:inline-flex;align-items:center;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line2);font-size:12px;font-weight:700;color:var(--text2);white-space:nowrap}
.pz .pz-step:empty{display:none}

/* the day's green hero */
.pz .pz-hero{position:relative;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t i" "c i";align-items:center;column-gap:8px;row-gap:6px;margin:2px 0 10px;padding:11px 16px 12px 12px;border-radius:20px;overflow:hidden;color:#fff;
  background:radial-gradient(70% 130% at 20% 45%,#86A42C 0%,#6A8A22 52%,#52701B 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 0 #3A5212,0 14px 26px -12px rgba(58,82,18,.55)}
[dir=ltr] .pz .pz-hero{padding:11px 12px 12px 16px}
.pz .pz-hero::after{content:"";position:absolute;inset:5px;border-radius:15px;border:1.5px solid rgba(242,210,122,.8);pointer-events:none}
.pz .pz-hero img{grid-area:i;width:70px;height:70px;-webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(closest-side,#000 68%,transparent 100%)}
.pz .pz-ht{grid-area:t;min-width:0}
.pz .pz-eb{font-size:11.5px;font-weight:700;letter-spacing:.3px;color:#E9F5C2}
.pz .pz-hbig{font-size:19px;font-weight:900;line-height:1.1;margin-top:3px;text-shadow:0 2px 0 rgba(30,50,5,.3)}
.pz .pz-hchip{grid-area:c;justify-self:start;display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 9px;border-radius:7px;background:rgba(30,50,5,.3);box-shadow:inset 0 0 0 1px rgba(240,255,200,.25);font-size:12px;font-weight:700;color:#F2FADB}
.pz .pz-hchip b{font-size:14px;font-variant-numeric:tabular-nums}
@media (max-height:720px){ .pz .pz-hero{display:none} }

/* rush timer */
.pz .pz-tbar{height:8px;border-radius:4px;background:var(--line2);margin:0 0 8px;flex:none}
.pz .pz-tbar i{background:linear-gradient(180deg,#6FBE5A,#3E8A33);border-radius:4px}
.pz .pz-tbar i.low{background:var(--accent)}

/* the framed felt: opponents, pile + deck, and my hand with its chips */
.pz .pz-felt{position:relative;flex:none;display:flex;flex-direction:column;border-radius:20px;padding:12px 12px 10px;color:#fff;
  background:radial-gradient(90% 55% at 50% 45%,#2A8A5C 0%,#1E6A47 50%,#124530 100%);
  box-shadow:inset 0 0 0 3px #C99A3E,inset 0 0 0 5px #5A3A20,inset 0 0 50px rgba(0,0,0,.35),0 4px 0 #3E2612,0 14px 26px -10px rgba(30,60,40,.55)}
html.pv-night .pz .pz-felt{background:radial-gradient(90% 55% at 50% 45%,#22774F 0%,#175A3C 50%,#0C3423 100%)}
.pz .pz-table{background:none;box-shadow:none;border-radius:0;padding:0;color:#fff}
.pz .pz-opps{flex-wrap:nowrap;justify-content:space-between;gap:4px}
.pz .pz-opp{flex:1 1 0;min-width:0;gap:4px;padding:4px 2px;border-radius:12px}
.pz .pz-opp.act{background:rgba(255,255,255,.13)}
.pz .pz-on{display:flex;align-items:center;gap:6px;max-width:100%;font-size:12.5px;font-weight:800;line-height:1.2}
.pz .pz-on>span:last-child{min-width:0}
.pz .pz-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:12px;color:#fff;box-shadow:0 0 0 2px rgba(255,253,249,.92),0 2px 5px rgba(0,0,0,.3)}
.pz .pz-av .av-art{width:100%;height:100%;object-fit:cover;display:block}
.pz .pz-tot{font-size:11px;font-weight:600;color:#D5EBDD;background:rgba(0,0,0,.24);border-radius:999px;padding:0 6px;white-space:nowrap}
.pz .pz-ocards{min-height:40px;gap:0}
.pz .pz-ocards .pc.xs{width:26px;height:38px;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.pz .pz-ocards .pc+.pc{margin-inline-start:-8px}
.pz .pz-ometa{white-space:normal;text-align:center;font-size:11px;font-weight:700;line-height:1.25;color:#F2D27A;opacity:1}
.pz .pz-mid{gap:24px;margin-top:6px}
.pz .pz-pw,.pz .pz-deck{display:flex;flex-direction:column;align-items:center;gap:5px}
.pz .pz-pw{order:1}
.pz .pz-deck{order:2;width:auto;height:auto;background:none;border:0;box-shadow:none;border-radius:0}
.pz .pz-pw small,.pz .pz-deck small{font-size:11px;font-weight:700;color:#A5CDB5}
.pz .pz-dk{width:46px;height:66px;border-radius:7px;display:grid;place-items:center;font-size:16px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);font-variant-numeric:tabular-nums;
  background-color:#C8202F;background-image:radial-gradient(circle at 50% 50%,rgba(242,210,122,.95) 0 14%,transparent 14.5%),repeating-linear-gradient(45deg,rgba(242,210,122,.3) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(242,210,122,.3) 0 1px,transparent 1px 6px);
  box-shadow:inset 0 0 0 3px #FFFDF9,inset 0 0 0 4.5px #D9A830,2px 2px 0 #FFFDF9,2px 2px 0 1px rgba(70,50,25,.16),4px 4px 0 #F4EEE2,4px 4px 0 1px rgba(70,50,25,.16),6px 8px 14px rgba(0,0,0,.3)}
.pz .pz-pile{min-height:66px;gap:0}
.pz .pz-pile .pc.sm{width:46px;height:66px}
.pz .pz-pile .pc+.pc{margin-inline-start:-16px}
.pz .pz-pile .pc.pz-pick{box-shadow:0 0 0 3px var(--sun),0 6px 12px rgba(0,0,0,.35)}
.pz .pz-pile .pc.pz-pick.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent)}
.pz .pz-me{flex-direction:row;align-items:flex-end;gap:8px;margin-top:4px}
.pz .pz-chips{flex:0 1 92px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:4px}
.pz .pz-turn,.pz .pz-sum{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:3px 9px;border-radius:8px;font-size:12px;font-weight:700;line-height:1.2;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.pz .pz-turn{background:#F2D27A;color:#3D2A00;font-weight:800}
.pz .pz-turn[hidden]{display:none}
.pz .pz-sum{background:rgba(255,253,249,.95);color:#231F1A}
.pz .pz-sum b{font-variant-numeric:tabular-nums}
.pz .pz-hand{--pcw:58px;--pch:83px;flex:1;min-width:0;min-height:0;gap:0;padding-top:24px;justify-content:center}
.pz .pz-hand .pc+.pc{margin-inline-start:-12px}
.pz .pz-hand .pc:first-child,.pz .pz-hand .pc:last-child{translate:0 7px}
.pz .pz-hand .pc:nth-child(2),.pz .pz-hand .pc:nth-last-child(2){translate:0 2px}
.pz .pz-hand .pc:only-child{translate:none}
.pz .pz-hand .pc.sel{box-shadow:0 0 0 3px var(--sun),0 10px 18px -6px rgba(0,0,0,.45)}
@media (max-width:370px){ .pz .pz-hand{--pcw:54px;--pch:77px} .pz .pz-chips{flex-basis:84px} }

/* below the table: the line of the story / the question, then the controls */
.pz .pz-log{min-height:44px;padding:10px 2px 4px;text-align:start;font-size:15px;font-weight:800;line-height:1.3;color:var(--text)}
.pz .pz-red{color:#D7263D}
html.pv-night .pz .pz-red{color:#FF8A8A}
.pz .pz-table .pz-red{color:#FFB3A8}
.pz .pz-intro,.pz .pz-hint{text-align:start;font-size:13px;line-height:1.35;color:var(--text2);margin-bottom:10px}
.pz .pz-hint{min-height:18px}
.pz .pz-sbtn,.pz .pz-dbtn{gap:8px}
.pz .pz-sbtn .btn{flex:1 1 auto;min-width:0;white-space:nowrap}
.pz .pz-sbtn .btn[data-st=prev],.pz .pz-sbtn .btn[data-st=next]{flex:0 0 52px;padding:0}
.pz .pz-sbtn .btn[data-st=skip]{flex:1.4 1 auto}

/* canvas buttons: btn-primary = p (red), btn-ghost = s (paper), btn-navy = g (gold) */
html body .pz .pz-in .btn{appearance:none;border:0;height:auto;min-height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 16px;position:relative;
  font-family:Rubik,sans-serif;font-weight:800;font-size:16px;line-height:1.15;letter-spacing:-.1px;white-space:normal;text-align:center;font-stretch:normal;filter:none}
html body .pz .pz-in .btn::after{content:"";position:absolute;inset:3px;border-radius:11px;border:1.5px dashed rgba(255,255,255,.38);pointer-events:none}
html body .pz .pz-in .btn.btn-sm{min-height:44px;border-radius:12px;font-size:15px;padding:4px 14px}
html body .pz .pz-in .btn.btn-sm::after{border-radius:9px}
html body .pz .pz-in .btn.btn-primary{background:linear-gradient(180deg,#F04D4F,var(--accent));color:#fff;box-shadow:0 4px 0 var(--accent-d),0 10px 18px -6px rgba(179,35,42,.45)}
html body .pz .pz-in .btn.btn-ghost{background:var(--raise);color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--line2),0 4px 0 var(--edge)}
html body .pz .pz-in .btn.btn-ghost::after{border-color:var(--line2)}
html body .pz .pz-in .btn.btn-navy{background:linear-gradient(180deg,#F6CF68,var(--sun));color:var(--gold-ink);border:0;box-shadow:0 4px 0 var(--sun-d),0 10px 18px -6px rgba(182,134,27,.4)}
html body .pz .pz-in .btn.btn-navy::after{border-color:rgba(255,255,255,.55)}
html body .pz .pz-in .btn:active:not(:disabled){transform:translateY(3px)}
html body .pz .pz-in .btn[disabled]{opacity:.45;box-shadow:inset 0 0 0 1px var(--line2)}
html body .pz .pz-in .pz-dbtn .btn.on{box-shadow:0 0 0 3px var(--sun),0 4px 0 var(--edge)}

/* the result sheet (and the rush review) */
html body .pz .pz-sheet{background:var(--raise);color:var(--text);border-radius:24px 24px 0 0;box-shadow:0 -2px 0 var(--edge),0 -14px 34px -12px rgba(40,25,10,.5);padding:16px 16px calc(var(--sab,0px) + 16px)}
/* where :has is supported the sheet takes the room under the felt instead of covering it */
.pz .pz-in:has(>.pz-sheet:not([hidden])) .pz-hero,.pz .pz-in:has(>.pz-sheet:not([hidden])) .pz-ctl{display:none}
html body .pz .pz-in:has(>.pz-sheet:not([hidden])) .pz-sheet{position:relative;inset:auto;flex:1 1 auto;min-height:0;max-height:none;margin:6px -12px calc(-10px - var(--sab,0px))}
.pz .pz-in:has(>.pz-sheet:not([hidden])) .pz-log{min-height:0;padding:8px 2px 2px;font-size:13px;color:var(--text2)}
.pz .pz-res h3{margin:2px 0 6px;font-size:21px;font-weight:900;letter-spacing:-.3px;line-height:1.15}
.pz .pz-stars{color:#E2A92B;font-size:30px}
.pz .pz-res.s0 .pz-stars{color:var(--text3)}
.pz .pz-big{text-align:center;font-size:44px;font-weight:900}
.pz .pz-res .pz-big small{color:var(--text3)}
.pz .pz-yours,.pz .pz-bestm{font-size:14px;line-height:1.4;color:var(--text)}
.pz .pz-loss{color:var(--accent)}
.pz .pz-why{background:var(--raise2);color:var(--text);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.5}
.pz .pz-sec{font-size:15px;font-weight:900;color:var(--text);margin:14px 2px 8px}
.pz .pz-sec small{font-size:11.5px;font-weight:500;color:var(--text3)}
.pz .pz-read{font-size:13.5px;color:var(--text)}
.pz .pz-opts li,.pz .pz-rev li{background:var(--raise);color:var(--text);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line),0 2px 0 var(--edge)}
.pz .pz-opts li{font-size:12.5px;padding:7px 10px}
.pz .pz-opts li.best,.pz .pz-opts li.best.mine{box-shadow:inset 0 0 0 2px var(--okg),0 2px 0 var(--edge)}
.pz .pz-opts li.mine{box-shadow:inset 0 0 0 2px var(--accent),0 2px 0 var(--edge)}
.pz .pz-opts .pz-bar{background:var(--line)}
.pz .pz-opts .pz-bar i{background:linear-gradient(180deg,#6FBE5A,#3E8A33)}
.pz .pz-opts small,.pz .pz-rev li small{color:var(--text3);font-size:11px}
.pz .pz-st{color:#E2A92B}
.pz .pz-note{font-size:11.5px;color:var(--text3)}
.pz .pz-res .btn-row{flex-wrap:wrap;gap:8px;margin-top:14px}
.pz .pz-res .btn-row .btn{flex:1 1 auto;min-width:0;padding-inline:12px}
.pz .pz-flash{background:var(--raise);color:var(--text);box-shadow:inset 0 0 0 1px var(--line),0 4px 0 var(--edge),0 20px 40px -10px rgba(0,0,0,.45)}
.pz .pz-flash.s3{color:var(--okg)}
.pz .pz-flash.s0,.pz .pz-flash.s1{color:var(--accent)}
.pz .pz-flash.s2{color:#B6861B}
.pz .pz-log{flex:none}
@media (max-height:720px){ .pz .pz-in:has(>.pz-sheet:not([hidden])) .pz-me{display:none} }
[dir=ltr] .pz .pz-sbtn .btn[data-st=prev],[dir=ltr] .pz .pz-sbtn .btn[data-st=next]{transform:scaleX(-1)}
/* short screens (iPhone SE 1st gen 320x568): the same layout, packed tighter */
@media (max-height:600px){
  .pz .pz-top{height:44px;margin-bottom:2px} .pz .pz-ib{width:38px;height:38px} .pz .pz-ttl{font-size:20px}
  .pz .pz-felt{padding:8px 10px 8px}
  .pz .pz-ocards{min-height:32px} .pz .pz-ocards .pc.xs{width:22px;height:32px}
  .pz .pz-mid{margin-top:2px} .pz .pz-dk,.pz .pz-pile .pc.sm{width:40px;height:57px} .pz .pz-pile{min-height:57px}
  .pz .pz-hand{--pcw:50px;--pch:72px;padding-top:18px} .pz .pz-me{margin-top:0}
  .pz .pz-log{min-height:0;padding:6px 2px 2px;font-size:14px}
  .pz .pz-intro,.pz .pz-hint{font-size:12.5px;margin-bottom:6px;min-height:0}
  html body .pz .pz-in .btn{min-height:42px} html body .pz .pz-in .btn.btn-sm{min-height:40px}
}
.pz .pz-ctl{margin-top:6px}