/* Cribbage Board: green baize, a maple board, big plain cards, over the kit's shell. */
:root{
  --lacquer:#123F31;--lacquer-hi:#18503E;--ink:#F6F3EA;--ink-soft:#D3E4D9;--ink-dim:#9DBBAA;
  --hair:rgba(242,201,76,.36);--brass:#F2C94C;--brass-lo:#C99A22;--brass-hi:#FBE7A6;--jade:#2E9E6E;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --you:#3D7BF0;--cpu:#E5533D;--cw:56px;
}
body{background:radial-gradient(ellipse at 50% 30%,#2A7556,#174A39 70%,#123F31);font-size:19px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.home .title{font-family:var(--serif);font-size:clamp(2.5em,11vw,4.6em);font-weight:900;color:var(--brass-hi);letter-spacing:.01em;
  text-shadow:0 3px 0 #6B4A0E,0 8px 22px rgba(0,0,0,.4)}
.tagline{margin:0;color:var(--ink);font-size:1.15em;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(24em,100%)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.levels .choice{min-height:50px;min-width:44px;padding:.2em;font:800 1em/1.1 var(--serif);color:var(--ink);background:rgba(10,40,30,.72);
  border:2px solid rgba(211,228,217,.25);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:.25em}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#3B2A06}
.levels .choice:disabled{opacity:.5}
.levels .choice svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lvl-note{margin:0;color:var(--ink);font-weight:700;font-size:.95em;min-height:1.4em;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.menu-col .pill{min-width:12em;min-height:52px;font-family:var(--serif)}
.pill.alt{background:rgba(246,243,234,.94);color:#123F31;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--brass-hi);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (max-width:420px){.levels .choice{font-size:.92em}}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:1.5em;padding:.5em 1em}
  .home .lead{flex:1 1 0;min-width:0}
  .home .menu-col{flex:none;width:min(24em,max(400px,56%))}
  .home .title{font-size:2.6em}
  .menu-col{gap:.35em}
  .menu-col .pill{min-height:46px}
  .levels .choice{min-height:46px}
  .tagline{font-size:1em}
  .lvl-note{font-size:.85em}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:2.1em}.home .tagline{font-size:.9em}}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) .home .lead{padding-top:3em}}

/* the bar */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .3em max(.6em,env(safe-area-inset-left));gap:.5em}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-color:var(--brass);
  background:radial-gradient(circle at 35% 30%,#2C6A52,#123F31 70%)}
.scores{flex:1;display:flex;justify-content:center;gap:.5em;min-width:0}
.sc{display:flex;align-items:center;gap:.35em;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.2em .75em;flex:none}
.sc i{width:.75em;height:.75em;border-radius:50%;background:var(--cpu);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.sc.you i{background:var(--you)}
.sc span{font-weight:700;font-size:.85em;color:var(--ink-soft);white-space:nowrap}
.sc b{font:900 1.4em/1.1 var(--serif);min-width:1.7em;text-align:right;font-variant-numeric:tabular-nums}
.sc b.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.35);color:var(--brass-hi)}}

/* board above the table, or beside it on a short wide screen */
.layout{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:.35em;
  padding:0 max(.5em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.5em,env(safe-area-inset-left))}
.boardwrap{height:clamp(90px,20vh,190px);position:relative;min-width:0}
#board{position:absolute;inset:0;display:block}
@media (max-height:520px) and (min-aspect-ratio:4/3){
  .layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,34%) minmax(0,1fr)}
  .boardwrap{height:auto}
}
.tablearea{position:relative;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:2px}

/* cards: plain faces drawn in CSS; size from --w */
.cf{--w:var(--cw);position:relative;flex:none;width:var(--w);height:calc(var(--w)*1.4);border-radius:calc(var(--w)*.11);
  background:linear-gradient(165deg,#FFFFFF,#F2EEE3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.35);color:#1C1C1C;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;transition:transform .15s,box-shadow .15s}
.cf.red{color:#C62828}
.cf .r{position:absolute;left:9%;top:4%;font-weight:800;font-size:calc(var(--w)*.44);line-height:1;letter-spacing:-.05em}
.cf .s{position:absolute;left:10%;top:calc(var(--w)*.5);font-size:calc(var(--w)*.32);line-height:1}
.cf .big{position:absolute;right:8%;bottom:5%;font-size:calc(var(--w)*.66);line-height:1}
.cb{--w:var(--cw);flex:none;width:var(--w);height:calc(var(--w)*1.4);border-radius:calc(var(--w)*.11);
  background:repeating-linear-gradient(45deg,#2C5DB0 0 5px,#3A6DC6 5px 10px);border:calc(var(--w)*.06) solid #F6F3EA;box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* the computer's hand: small backs */
.cpu-hand{display:flex;justify-content:center;min-height:calc(var(--cw)*.56);padding-top:2px}
.cb.mini{--w:calc(var(--cw)*.4);margin:0 calc(var(--cw)*-.06)}

/* starter, crib, the pile and the count */
.mid{display:flex;align-items:center;gap:calc(var(--cw)*.15);width:100%;max-width:44em}
.stock{display:flex;gap:max(6px,calc(var(--cw)*.12));flex:none}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:calc(var(--cw)*.8)}
.slot small{font-size:.66em;font-weight:700;color:var(--ink-soft);white-space:nowrap;line-height:1.1}
.slot .cf,.slot .cb{--w:calc(var(--cw)*.8)}
.slot .empty{width:calc(var(--cw)*.8);height:calc(var(--cw)*1.12);border:2px dashed rgba(255,255,255,.22);border-radius:calc(var(--cw)*.09)}
.cb.crib{background:repeating-linear-gradient(45deg,#A63A2B 0 5px,#C04A39 5px 10px)}
.cb.crib.mine{background:repeating-linear-gradient(45deg,#2C5DB0 0 5px,#3A6DC6 5px 10px)}
.cf.flip{animation:flip .45s ease-out}
@keyframes flip{0%{transform:rotateY(90deg) scale(.9)}100%{transform:none}}
.pile{flex:1;position:relative;height:calc(var(--cw)*.92*1.4 + 8px);min-width:0}
.pile .cf{--w:calc(var(--cw)*.92);position:absolute;top:4px}
.pile .cf.cpu{top:0}
.pile .cf.you{top:8px}
.pile .cf.old{filter:brightness(.6) saturate(.6)}
.pile .cf.in-you{animation:inYou .28s ease-out}
.pile .cf.in-cpu{animation:inCpu .32s ease-out}
@keyframes inYou{from{transform:translateY(110%) scale(.85);opacity:.3}}
@keyframes inCpu{from{transform:translateY(-110%) scale(.7);opacity:.3}}
.count{flex:none;display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.15em .55em;min-width:3.3em}
.count small{font-size:.66em;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.count b{font:900 1.7em/1.05 var(--serif);font-variant-numeric:tabular-nums}
.count.hot b{color:#FFD166}

.msg{margin:0;min-height:1.35em;line-height:1.35;font-weight:800;text-align:center;font-size:1.05em;color:var(--ink);text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* your hand */
.you-hand{display:flex;justify-content:center;gap:calc(var(--cw)*.07);padding-top:calc(var(--cw)*.24);min-height:calc(var(--cw)*1.64)}
.hc{padding:0;border:0;background:none;border-radius:calc(var(--cw)*.11);transition:transform .14s;touch-action:manipulation;min-width:44px;min-height:44px}
.hc:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}
.hc.sel{transform:translateY(calc(var(--cw)*-.24))}
.hc.sel .cf{box-shadow:0 0 0 3px var(--brass),0 6px 14px rgba(0,0,0,.45)}
.hc.dim .cf{filter:brightness(.62)}
.hc.wait .cf{filter:brightness(.86)}
.hc.hinted .cf{animation:glow .8s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 4px #FFD166,0 0 18px #FFD166}}
.hc.shake{animation:shake .3s}
.hc.dealt{animation:dealIn .35s ease-out backwards}
@keyframes dealIn{from{transform:translateY(-80%) scale(.7);opacity:0}}
.you-hand.quiet{opacity:.35}
.act-row{min-height:50px;display:flex;align-items:center}
.act-row .pill{min-height:48px;padding:.4em 1.8em;font-family:var(--serif);font-size:1.1em}
.act-row .pill:disabled{filter:grayscale(.6) brightness(.8);opacity:.75}

/* the show: the count, item by item */
.sheet{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px 8px;
  background:rgba(12,44,34,.95);border:1px solid var(--hair);border-radius:16px}
.show-head{display:flex;align-items:baseline;gap:.6em;font:900 1.25em/1.1 var(--serif)}
.show-head .who.you{color:#9DC0FF}
.show-head .who.cpu{color:#FFB3A6}
#sheet-total{font-size:1.5em;color:var(--brass-hi);font-variant-numeric:tabular-nums}
.show-cards{display:flex;gap:calc(var(--cw)*.08);align-items:center;padding-top:calc(var(--cw)*.1)}
.show-cards .cf{--w:calc(var(--cw)*.82)}
.show-cards .cf.lit{transform:translateY(calc(var(--cw)*-.1));box-shadow:0 0 0 3px #FFD166,0 0 14px #FFD166}
.show-cards .plus{font:900 1.3em var(--serif);color:var(--ink-soft)}
.show-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5em,1fr));gap:4px 8px;width:min(100%,30em);overflow:auto;min-height:0;align-content:start}
.show-list .row{padding:.28em .7em;font-weight:700}
.show-list .row b{color:var(--brass-hi);font-size:1.1em}
.show-act .pill{min-height:48px;padding:.35em 2em;font-family:var(--serif)}

/* words that float up, and speech bubbles */
.float{position:absolute;transform:translate(-50%,-50%);font:900 1.35em/1 var(--serif);color:#FFE08A;text-shadow:0 2px 6px rgba(0,0,0,.7);
  pointer-events:none;animation:floatUp 1.35s ease-out forwards;white-space:nowrap;z-index:8}
.float.you{color:#BFD5FF}
.float.cpu{color:#FFC4B8}
.float.big{font-size:1.9em;color:#FFE08A}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%)}}
.bubble{position:absolute;transform:translate(-50%,-50%);background:#fff;color:#1b1b1b;font:900 1.3em/1 var(--serif);padding:.3em .9em;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);animation:bub 1.2s forwards;z-index:8;pointer-events:none}
.bubble.you{border:3px solid var(--you)}
.bubble.cpu{border:3px solid var(--cpu)}
@keyframes bub{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}15%{transform:translate(-50%,-50%) scale(1.1);opacity:1}80%{opacity:1}100%{opacity:0}}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}

/* cards over the table */
.card{background:var(--lacquer-hi)}
.card .actions{background:var(--lacquer-hi)}
.card .big{font:900 1.4em/1.3 var(--serif);text-align:center;margin:0 0 .3em;color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul.how{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.2em 0}
.card .pill,.card .row,.card .choice,.card .link{min-height:44px}
.card .row{color:var(--ink);font-weight:700}
@media (max-height:420px){.card{font-size:.9em}.card .big{margin:0 0 .2em}.card .stats{margin:0 0 .2em}}

/* short screens: tighter bar and type */
@media (max-height:480px){
  #game .bar{padding-top:max(.2em,env(safe-area-inset-top));padding-bottom:.15em}
  #game .bar .jewel{width:44px;height:44px}
  .sc b{font-size:1.25em}
  .msg{font-size:.95em;min-height:1.25em}
  .act-row{min-height:46px}
  .act-row .pill{min-height:44px;padding:.2em 1.4em}
  .count b{font-size:1.4em}
  .show-head{font-size:1.05em}
  .show-list .row{padding:.15em .6em;min-height:0}
  .show-act .pill{min-height:44px}
  .sheet{gap:3px}
}
@media (max-width:420px){.scores{gap:.3em}.sc{gap:.25em;padding:.15em .55em}.sc span{font-size:.76em}.sc b{min-width:1.45em;font-size:1.22em}}
@media (max-width:340px){.sc span{display:none}}