/* Go 9x9: a warm wooden board on a dark walnut table, over the kit's shell. */
:root{
  --lacquer:#2B2118;--lacquer-hi:#3A2C1F;--ink:#FAF4E8;--ink-soft:#E3D5BC;--ink-dim:#B09C7C;
  --hair:rgba(242,201,76,.36);--brass:#F2C94C;--brass-lo:#C99A22;--brass-hi:#FBE7A6;--jade:#3C9A6A;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs:300px;
}
body{background:radial-gradient(ellipse at 50% 30%,#4A3826,#2E2319 70%,#211912);font-size:19px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}

/* stones as little drawings, for the logo and the bar */
.st{display:inline-block;width:1em;height:1em;border-radius:50%;flex:none}
.st.b{background:radial-gradient(circle at 35% 30%,#777,#1a1a1a 55%,#000);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.st.w{background:radial-gradient(circle at 35% 30%,#fff,#ece8de 60%,#b9b2a3);box-shadow:0 2px 4px rgba(0,0,0,.5)}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.lead{display:flex;flex-direction:column;align-items:center;gap:.45em}
.logo{display:flex;gap:.15em;font-size:2.2em}
.logo .st:nth-child(2){transform:translateY(-.25em)}
.home .title{font-family:var(--serif);font-size:clamp(2.6em,12vw,4.8em);font-weight:900;color:var(--brass-hi);letter-spacing:.01em;
  text-shadow:0 3px 0 #6B4A0E,0 8px 22px rgba(0,0,0,.45)}
.tagline{margin:0;color:var(--ink);font-size:1.15em;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.55em;width:min(24em,100%)}
.levels,.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.modes{grid-template-columns:1fr 1fr}
.levels .choice,.modes .choice{min-height:50px;min-width:44px;padding:.2em;font:800 1em/1.1 var(--serif);color:var(--ink);background:rgba(30,20,10,.72);
  border:2px solid rgba(227,213,188,.25);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:.25em}
.levels .choice[aria-pressed=true],.modes .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(250,244,232,.94);color:#2B2118;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:.9em}}
@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}
  .logo{font-size:1.6em}
  .menu-col{gap:.3em}
  .menu-col .pill{min-height:44px;padding-top:.45em;padding-bottom:.45em}
  .levels .choice,.modes .choice{min-height:44px}
  .tagline{font-size:1em}
  .lvl-note{font-size:.85em;min-height:0}
}
@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 game: bar, board, buttons stacked; on a wide screen the board on the left, the rest beside it */
#game{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar" "board" "side";
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#game[hidden]{display:none!important}
#game .bar{grid-area:bar;padding:.4em .6em .3em;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%,#5A4430,#2B2118 70%)}
.jewel:disabled{opacity:.4}
.players{flex:1;display:flex;justify-content:center;gap:.45em;min-width:0}
.pl{display:flex;align-items:center;gap:.35em;min-width:0;background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.12);border-radius:999px;padding:.2em .7em;flex:none;transition:border-color .2s,background .2s}
.pl.on{border-color:var(--brass);background:rgba(242,201,76,.16)}
.pl.thinking{animation:think 1s ease-in-out infinite}
@keyframes think{50%{box-shadow:0 0 0 4px rgba(242,201,76,.25)}}
.pl .st{width:.95em;height:.95em}
.pl span{font-weight:800;font-size:.9em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl b{font:900 1.15em/1.1 var(--serif);min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums;color:var(--brass-hi)}
.pl b.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.5);color:#fff}}
.boardwrap{grid-area:board;display:grid;place-items:center;min-height:0;min-width:0}
#board{display:block;width:var(--bs);height:var(--bs);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 3px #8A5A1C;touch-action:none;cursor:pointer}
.boardwrap.shake #board{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.3em .6em .6em}
.msg{margin:0;font:800 1.2em/1.25 var(--serif);text-align:center;color:var(--ink);min-height:2.6em;display:flex;flex-direction:column;justify-content:center;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.msg small{font:700 .72em/1.3 var(--sans);color:var(--ink-soft)}
.msg.dots::after{content:"…";animation:dots 1s steps(3) infinite;display:inline}
@keyframes dots{0%{opacity:.3}50%{opacity:1}}
.acts{display:flex;gap:.6em;justify-content:center;width:min(22em,100%)}
.btn{flex:1;min-height:52px;border-radius:14px;border:2px solid rgba(250,244,232,.35);background:rgba(30,20,10,.75);color:var(--ink);font:800 1.1em/1 var(--serif);padding:0 .8em}
.btn:active{transform:translateY(2px)}
.btn.go{background:var(--brass);color:#3B2A06;border-color:#fff}
.btn:disabled{opacity:.4}
.btn:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
#fx{position:fixed;inset:0;pointer-events:none;z-index:15;width:100%;height:100%}

#game.wide{grid-template-columns:var(--bs) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"board bar" "board side";
  column-gap:12px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
#game.wide .bar{flex-wrap:wrap;padding:.2em 0;align-content:flex-start}
#game.wide .players{order:3;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:.35em}
#game.wide .pl{justify-content:space-between}
#game.wide .side{justify-content:center;padding:.3em 0}
#game.wide .acts{flex-direction:column;width:min(16em,100%)}
@media (max-height:420px){#game.wide .players{flex-direction:row;flex-wrap:wrap;justify-content:center}#game.wide .pl{flex:1 1 auto}
  .msg{min-height:2.4em;font-size:1.1em}#game.wide .acts{flex-direction:row}}

/* cards */
.card{animation:rise .2s ease-out}
@keyframes rise{from{transform:translateY(12px) scale(.97);opacity:0}}
.card .big{font:900 1.5em/1.2 var(--serif);text-align:center;margin:.1em 0 .3em;color:var(--brass-hi)}
.how{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:.35em}
@media (max-height:480px){.card .big{font-size:1.2em;margin:0}}

/* narrow phones: the two name pills shrink to fit between Pause and Hint */
@media (max-width:420px){#game .bar{padding-left:.4em;padding-right:.4em;gap:.3em}.players{gap:.3em}.pl{padding:.2em .5em;gap:.3em;flex:0 1 auto}.pl span{font-size:.8em}.pl b{font-size:1em}}
@media (max-height:480px){.card .note{margin:.2em 0}}