/* Chinese Chess: a lacquered table, a wooden board, ivory pieces. Over the kit's shell. */
:root{
  --lacquer:#3B1A0C;--lacquer-hi:#53271A;--ink:#FBF1E0;--ink-soft:#E9D3B0;--ink-dim:#BFA27C;
  --hair:rgba(240,196,110,.34);--brass:#F0C46E;--brass-lo:#C48A2E;--brass-hi:#FFE3A6;--jade:#2F8F5B;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --han:"Songti SC","STSong","SimSun","Noto Serif CJK SC","Source Han Serif SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;
  --wood:#E7C07A;--wood-dk:#D2A257;--line:#5E3512;--red:#B3261E;--blk:#1D2629;
}
body{background:radial-gradient(ellipse at 50% 30%,#5C2A16,#2E1408 75%);font-size:19px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}

/* 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.6em,12vw,4.6em);font-weight:900;color:var(--brass-hi);text-shadow:0 3px 0 #6E3A10,0 8px 22px rgba(0,0,0,.5)}
.crest{display:flex;gap:.4em;justify-content:center}
.crest .pc{position:relative;left:0;top:0;transform:none;--u:3.1em}
.tagline{margin:0;color:var(--ink);font-size:1.12em;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.55em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(23em,100%)}
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%}
.levels .choice{min-height:50px;min-width:44px;padding:.2em;font:800 1.3em/1 var(--serif);color:var(--ink);background:rgba(30,12,4,.7);border:2px solid rgba(240,196,110,.28);border-radius:14px}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#3B1A0C}
.levels .choice:disabled{opacity:.42}
.levels .choice svg{width:.75em;height:.75em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.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,.7)}
.menu-col .pill{min-width:12em;min-height:52px}
.pill.alt{background:rgba(251,241,224,.94);color:#3B1A0C;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.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,.8)}
@media (max-width:420px){.levels{grid-template-columns:repeat(3,1fr)}}
@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(23em,max(392px,56%))}
  .home .title{font-size:2.6em}
  .crest{display:none}
  .lvl-note{font-size:.85em}
  .menu-col{gap:.35em}
  .menu-col .pill{min-height:46px}
  .levels .choice{min-height:46px}
  .tagline{font-size:1em}
}
@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}}

/* the game: a bar (top on a tall screen, a side column on a wide one) and the board */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .3em max(.7em,env(safe-area-inset-left));gap:.6em;
  background:linear-gradient(180deg,rgba(30,12,4,.75),rgba(30,12,4,.35))}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-color:var(--brass)}
#game .bar .jewel.on{background:radial-gradient(circle at 35% 30%,#7a5a20,#3B1A0C 75%);box-shadow:0 0 0 3px var(--brass-hi),0 0 16px var(--brass)}
.tools{display:flex;gap:.5em;flex:none}
.hud{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15;color:var(--ink)}
.hud b{font:800 .95em/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--ink-soft)}
.hud span{font:900 1.3em/1.2 var(--serif);white-space:nowrap;color:var(--brass-hi);transition:transform .15s,color .2s}
.hud span.warn{color:#FF8A7A}
.hud span.pop{transform:scale(1.15)}
.felt{flex:1;position:relative;min-height:0;touch-action:none}
@media (min-aspect-ratio:6/5){
  #game{flex-direction:row}
  #game .bar{flex-direction:column;justify-content:center;width:clamp(8.4em,21vw,14em);flex:none;gap:1em;
    padding:max(.5em,env(safe-area-inset-top)) .5em .5em max(.6em,env(safe-area-inset-left));background:linear-gradient(90deg,rgba(30,12,4,.7),rgba(30,12,4,.2))}
  .hud{flex:none;text-align:center;gap:.2em}
  .hud b,.hud span{white-space:normal}
}
@media (min-aspect-ratio:6/5) and (max-height:480px){#game .bar{gap:.5em}.hud span{font-size:1.1em}.hud b{font-size:.85em}}

/* the board: --u is one point's spacing, set from the space there is */
.board{position:absolute;left:50%;top:50%;width:calc(var(--u)*9);height:calc(var(--u)*10);transform:translate(-50%,-50%);--u:40px;cursor:pointer}
.board .grid{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:calc(var(--u)*.18);
  box-shadow:0 0 0 calc(var(--u)*.08) #8A5226,0 0 0 calc(var(--u)*.13) #5A2E12,0 calc(var(--u)*.25) calc(var(--u)*.6) rgba(0,0,0,.55)}
.board .grid text{font:700 .5px var(--han);fill:var(--line);opacity:.55}
.pc{position:absolute;left:calc(var(--u)*.05);top:calc(var(--u)*.05);width:calc(var(--u)*.9);height:calc(var(--u)*.9);pointer-events:none;
  transform:translate(calc(var(--u)*var(--c,0)),calc(var(--u)*var(--r,0)));transition:transform .24s cubic-bezier(.3,.8,.35,1.08);z-index:2}
.pc .face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%,#FFFBEF,#F3E0B9 62%,#DDBF86);
  box-shadow:0 calc(var(--u)*.05) 0 #946232,0 calc(var(--u)*.09) calc(var(--u)*.14) rgba(0,0,0,.45);
  font:900 calc(var(--u)*.56)/1 var(--han);transition:transform .16s,box-shadow .16s,opacity .3s}
.pc .face::before{content:"";position:absolute;inset:calc(var(--u)*.065);border-radius:50%;border:calc(var(--u)*.028) solid currentColor;opacity:.7}
.pc.r{color:var(--red)}.pc.b{color:var(--blk)}
.pc .face svg{width:60%;height:60%;fill:currentColor;position:relative}
.pc .face span{position:relative;margin-top:-.04em}
.pc.moving{z-index:5}
.pc.sel{z-index:4}
.pc.sel .face{transform:translateY(calc(var(--u)*-.08)) scale(1.1);box-shadow:0 0 0 calc(var(--u)*.05) #FFE07A,0 calc(var(--u)*.16) calc(var(--u)*.24) rgba(0,0,0,.5)}
.pc.check .face{animation:checkp .9s ease-in-out infinite}
@keyframes checkp{50%{box-shadow:0 0 0 calc(var(--u)*.07) #FF4A3A,0 0 calc(var(--u)*.5) #FF4A3A}}
.pc.gone{z-index:1}
.pc.gone .face{transform:scale(1.35);opacity:0}
.pc.nope .face{animation:nope .32s}
@keyframes nope{25%{transform:translateX(calc(var(--u)*-.08))}75%{transform:translateX(calc(var(--u)*.08))}}
.mk{position:absolute;pointer-events:none;border-radius:50%;left:calc(var(--u)*(var(--c) + .5));top:calc(var(--u)*(var(--r) + .5));transform:translate(-50%,-50%)}
.mk.dot{width:calc(var(--u)*.3);height:calc(var(--u)*.3);background:rgba(36,128,72,.85);box-shadow:0 0 0 calc(var(--u)*.04) rgba(255,255,255,.55);z-index:3;animation:popin .18s ease-out}
.mk.take{width:calc(var(--u)*1.02);height:calc(var(--u)*1.02);border:calc(var(--u)*.07) solid rgba(36,160,82,.9);z-index:3;animation:popin .18s ease-out}
.mk.last{width:calc(var(--u)*.98);height:calc(var(--u)*.98);border:calc(var(--u)*.045) dashed rgba(40,90,190,.75);z-index:1}
.mk.from{width:calc(var(--u)*.4);height:calc(var(--u)*.4);background:rgba(40,90,190,.35);z-index:1}
.mk.hint{width:calc(var(--u)*1.04);height:calc(var(--u)*1.04);border:calc(var(--u)*.08) solid #FFC93A;z-index:4;animation:hintp .8s ease-in-out infinite}
.mk.cur{width:calc(var(--u)*1.06);height:calc(var(--u)*1.06);border:calc(var(--u)*.06) solid #3A8DFF;z-index:6;border-radius:22%;display:none}
.board.kbd .mk.cur{display:block}
@keyframes popin{from{transform:translate(-50%,-50%) scale(.2);opacity:0}}
@keyframes hintp{50%{transform:translate(-50%,-50%) scale(1.12)}}
.flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:8;white-space:nowrap;
  font:900 calc(var(--u)*1.1)/1 var(--serif);color:#fff;-webkit-text-stroke:calc(var(--u)*.03) #7A1A10;text-shadow:0 4px 0 #7A1A10,0 10px 30px rgba(0,0,0,.6)}
.flash.go{animation:flash 1.1s ease-out}
@keyframes flash{15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* cards */
.card{background:var(--lacquer-hi)}
.card .actions{background:var(--lacquer-hi)}
.card .big{font:900 1.35em/1.3 var(--serif);text-align:center;margin:0 0 .4em;color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:44px}
.card .row{color:var(--ink);font-weight:700}
.card .seg{display:flex;gap:.3em}
.card .seg button{min-height:44px;min-width:44px;padding:.2em .7em;border-radius:12px;border:2px solid var(--hair);background:rgba(0,0,0,.2);font-weight:800}
.card .seg button[aria-pressed=true]{background:var(--brass);color:#3B1A0C;border-color:#fff}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:.35em .8em;margin:.3em 0 .6em}
.legend div{display:flex;align-items:center;gap:.5em}
.legend .pc{position:relative;left:0;top:0;transform:none;--u:2.1em;flex:none}
@media (max-height:420px){.card{font-size:.9em}.card .big{margin:0 0 .2em}}
@media (max-height:480px){#game .bar .jewel{width:44px;height:44px}}