:root{
  --cocoa:#3B2416; --cream:#FFF4DC; --terra:#E0763A; --tang:#FF8A3D; --sun:#FFD23F; --butter:#FFE9A8;
  --leaf:#3FA34D; --leafd:#1F6B3A; --gold:#F2B227;
  --lip:#CDB48E; --shadow: rgba(59,36,22,.28);
  --out: 0 2px 0 var(--cocoa),0 -2px 0 var(--cocoa),2px 0 0 var(--cocoa),-2px 0 0 var(--cocoa),2px 2px 0 var(--cocoa),-2px 2px 0 var(--cocoa),2px -2px 0 var(--cocoa),-2px -2px 0 var(--cocoa),0 4px 0 var(--cocoa);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:'Baloo 2',system-ui,sans-serif;color:var(--cocoa);background:#FC913D;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;-webkit-user-drag:none}

/* ---------- scene ---------- */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:url(assets/sunny_sky.webp) center top/cover no-repeat,#FCE461}
#sun{position:absolute;right:2vw;top:7.5vh;width:min(27vw,21vh);aspect-ratio:506/515;
  filter:drop-shadow(0 4px 8px rgba(224,118,58,.18))}
#sun img{position:absolute}
#sun .rays{left:0;top:0;width:100%;height:100%;animation:spin 100s linear infinite;transform-origin:50% 50%}
#sun .disc{left:20.55%;top:20.2%;width:62.85%;height:61.2%}
@keyframes spin{to{transform:rotate(360deg)}}
#scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(255,150,60,.5),rgba(255,170,70,.14) 55%,transparent)}
#hills{position:absolute;left:0;right:0;bottom:0;height:clamp(90px,24vh,280px);
  background:url(assets/hills_band.webp) center bottom/cover no-repeat}

.screen{position:fixed;inset:0;z-index:1;display:none;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.screen.show{display:flex}

/* ---------- icon buttons ---------- */
.iconbtn{width:clamp(52px,6.4vh + 22px,68px);aspect-ratio:1;padding:3px;border:4px solid var(--cocoa);border-radius:50%;
  background:linear-gradient(#FFFBEF,#FFF4DC);display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 5px 0 var(--lip),0 9px 12px var(--shadow);transition:transform .08s,box-shadow .08s}
.iconbtn img{width:100%;height:100%;object-fit:contain}
.iconbtn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--lip),0 4px 6px var(--shadow)}
.iconbtn:focus-visible,.chip:focus-visible,.big:focus-visible{outline:4px solid var(--tang);outline-offset:3px}
.sound-btn{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:4}

/* ---------- start ---------- */
#start{flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px)}
.s-controls{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.5vh,16px);width:100%;max-width:680px;flex:0 0 auto}
.title{margin:0;height:clamp(88px,16vh,180px);display:flex;justify-content:center;margin-right:22vw}
.title img{height:100%;width:auto;max-width:66vw;object-fit:contain;filter:drop-shadow(0 5px 0 var(--shadow))}
.settings{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.group{display:flex;align-items:center;gap:6px;background:var(--cream);border:4px solid var(--cocoa);border-radius:999px;
  padding:5px 10px 5px 14px;box-shadow:0 5px 0 var(--lip)}
.glabel{font-weight:700;font-size:clamp(18px,2.4vh,22px);white-space:nowrap;margin-right:2px}
.chip{min-height:52px;min-width:52px;padding:0 16px;border:3px solid var(--cocoa);border-radius:999px;background:#FFFBEF;
  font-weight:700;font-size:clamp(18px,2.3vh,21px);box-shadow:0 3px 0 rgba(59,36,22,.3);transition:transform .08s}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,36,22,.3)}
.chip[aria-checked="true"]{background:var(--tang);color:#fff;text-shadow:0 2px 0 rgba(59,36,22,.55)}
.chip.round{padding:0;width:56px;height:56px;display:grid;place-items:center}
.chip.round img{width:74%;height:74%;object-fit:contain}
.chip.round[aria-checked="true"]{background:#FFE2B8;box-shadow:0 0 0 4px var(--tang),0 3px 0 4px rgba(59,36,22,.3)}

.modes{display:flex;flex-direction:column;gap:clamp(8px,1.3vh,14px);width:100%}
.big{display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:clamp(62px,9.6vh,88px);padding:8px 20px;border:4px solid var(--cocoa);border-radius:999px;
  font-family:'Lilita One',sans-serif;font-size:clamp(23px,2.4vh + 8px,30px);line-height:1.05;color:#fff;
  text-shadow:var(--out);letter-spacing:.3px;transition:transform .08s,box-shadow .08s;position:relative}
.big img{width:clamp(38px,6.4vh,54px);height:auto;flex:0 0 auto}
.big span{text-align:center}
.big:active{transform:translateY(3px)}
.big.tangerine{background:linear-gradient(#FFA25A,#FF8A3D 55%,#F0762A);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 6px 0 #B44E1D,0 8px 10px var(--shadow)}
.big.green{background:linear-gradient(#5CC067,#3FA34D 55%,#358F42);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 6px 0 var(--leafd),0 8px 10px var(--shadow)}
.big.sunny{background:linear-gradient(#FFE36B,#FFD23F 55%,#F5C21E);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 6px 0 #C48F10,0 8px 10px var(--shadow)}
.big.cream{background:linear-gradient(#FFFBEF,#FFF4DC);color:var(--cocoa);text-shadow:none;box-shadow:inset 0 3px 0 #fff,0 6px 0 var(--lip),0 8px 10px var(--shadow)}
.big.tangerine:active{box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 3px 0 #B44E1D}
.big.green:active{box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 3px 0 var(--leafd)}
.big.sunny:active{box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 3px 0 #C48F10}
.big.cream:active{box-shadow:inset 0 3px 0 #fff,0 3px 0 var(--lip)}

.hint{margin:0;background:var(--cream);border:4px solid var(--cocoa);border-radius:22px;padding:8px 16px;
  font-weight:600;font-size:clamp(15px,2vh,18px);line-height:1.3;text-align:center;box-shadow:0 5px 0 var(--lip);max-width:100%}
.hint.small{font-size:clamp(13px,1.8vh,16px);padding:6px 12px;border-width:3px}

.boardArea{flex:1 1 auto;min-height:0;min-width:0;width:100%;container-type:size;display:grid;place-items:center}
.board{position:relative;width:min(100cqw,calc(100cqh * 868 / 851));aspect-ratio:868/851;
  filter:drop-shadow(0 10px 0 rgba(59,36,22,.2)) drop-shadow(0 18px 18px rgba(59,36,22,.16))}
.board-img{position:absolute;inset:0;width:100%;height:100%}
.s-board{flex:1 1 auto;width:100%}

/* cells: measured from clay_board.webp (868x851) */
.cell{position:absolute;padding:0;border:0;background:transparent;border-radius:12%;display:grid;place-items:center;outline:none}
.cell .mark{width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(59,36,22,.25));transition:opacity .35s}
.cell .num{position:absolute;left:10%;top:6%;font-family:'Lilita One';font-size:clamp(12px,4cqw,22px);color:rgba(59,36,22,.25);display:none}
body.kbd .cell:not(.filled) .num{display:block}
@media (hover:hover){
  .board.live .cell:not(.filled):hover{background:radial-gradient(circle,rgba(255,226,90,.55),rgba(255,210,63,.18) 70%)}
  .board.starter .cell:not(.filled):hover{background:radial-gradient(circle,rgba(255,226,90,.45),rgba(255,210,63,.14) 70%)}
}
.board.live .cell:not(.filled),.board.starter .cell{background-color:transparent}
.board.live .cell,.board.starter .cell{cursor:pointer}
.cell.sel::after{content:"";position:absolute;inset:5%;border:6px solid var(--tang);border-radius:14%;
  box-shadow:0 0 0 2px rgba(59,36,22,.45),inset 0 0 0 2px rgba(59,36,22,.3);animation:pulse 1.4s ease-in-out infinite;pointer-events:none}
.board.starter .cell.sel::after{inset:9%;border-width:5px}
@keyframes pulse{50%{transform:scale(.94);opacity:.7}}

.mark.pop-x{animation:popx .26s cubic-bezier(.3,1.6,.5,1) both}
@keyframes popx{0%{transform:scale(0) rotate(-8deg)}60%{transform:scale(1.12) rotate(8deg)}80%{transform:scale(.97) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.mark.pop-o{animation:popo .28s ease-out both;transform-origin:50% 100%}
@keyframes popo{0%{transform:translateY(-22%) scale(.9);opacity:0}45%{transform:translateY(0) scale(1.12,.84);opacity:1}70%{transform:translateY(-5%) scale(.95,1.06)}100%{transform:none}}
.cell.win .mark.X{animation:twirl .55s ease-in-out both}
.cell.win .mark.O{animation:wiggle .55s ease-in-out both;transform-origin:50% 100%}
@keyframes twirl{0%{transform:none}40%{transform:translateY(-14%) rotate(180deg) scale(1.1)}100%{transform:rotate(360deg)}}
@keyframes wiggle{0%{transform:none}30%{transform:translateY(-14%) rotate(-10deg) scale(1.08)}55%{transform:translateY(-6%) rotate(9deg)}80%{transform:rotate(-4deg)}100%{transform:none}}
.board.done .cell:not(.win) .mark{opacity:.4}
.board.drawn .cell .mark{opacity:.7}
.board.shrug{animation:shrug .6s ease-in-out}
@keyframes shrug{20%{transform:rotate(-2deg) translateY(-4px)}45%{transform:rotate(2deg)}70%{transform:rotate(-1deg)}100%{transform:none}}
.winline{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
.winline path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- play ---------- */
#play{flex-direction:column;gap:clamp(6px,1.2vh,12px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.mini-title{height:clamp(42px,7vh,60px);width:auto;filter:drop-shadow(0 3px 0 var(--shadow))}
.tb-right{display:flex;gap:10px}
.p-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px)}
.p-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.pill{display:flex;align-items:center;gap:10px;min-height:clamp(46px,7vh,58px);padding:4px 22px 4px 10px;
  border:4px solid var(--cocoa);border-radius:999px;font-weight:800;font-size:clamp(19px,2.6vh,24px);
  box-shadow:0 5px 0 rgba(59,36,22,.3);background:var(--cream);transition:background .2s;flex:0 0 auto}
.pill-mark{width:clamp(30px,4.6vh,40px);height:auto;object-fit:contain}
.pill.X{background:linear-gradient(#7CD487,#5CC067)}
.pill.O{background:linear-gradient(#FFE27A,#FFC93A)}
.pill.end{background:var(--cream)}
.pill .dots{display:none;gap:4px;margin-left:2px}
.pill.thinking .dots{display:flex}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--cocoa);animation:dot .9s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none}30%{transform:translateY(-7px)}}

/* ---------- scores ---------- */
.scores{display:flex;gap:10px;width:100%;max-width:680px;justify-content:center}
.badge{flex:1;max-width:240px;border:4px solid var(--cocoa);border-radius:20px;background:#FFFBEF;overflow:hidden;
  box-shadow:0 5px 0 var(--lip);text-align:center}
  .bh{display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 5px;flex-wrap:wrap;font-weight:800;
  font-size:clamp(17px,2.2vh,20px);line-height:1.15;min-height:38px;border-bottom:3px solid var(--cocoa)}
.bh img{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.badge.win .bh{background:var(--leaf);color:#fff;text-shadow:0 2px 0 rgba(31,60,30,.7)}
.badge.draw .bh{background:var(--cream)}
.badge.loss .bh{background:var(--terra);color:#fff;text-shadow:0 2px 0 rgba(90,40,20,.7)}
.bn{display:block;font-family:'Lilita One';font-size:clamp(30px,5vh,48px);line-height:1.15;padding:2px 0 4px}
.bn.bump{animation:bump .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{40%{transform:scale(1.4) translateY(-4px)}}

/* ---------- end panel ---------- */
#endpanel{position:fixed;inset:0;z-index:10;display:none;place-items:center;background:rgba(59,36,22,.38);padding:16px}
#endpanel.show{display:grid}
.card{background:var(--cream);border:5px solid var(--cocoa);border-radius:32px;padding:18px 22px 24px;
  width:min(460px,100%);text-align:center;box-shadow:0 10px 0 rgba(59,36,22,.35);animation:cardin .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes cardin{from{transform:scale(.6);opacity:0}}
.end-marks{display:flex;justify-content:center;gap:10px}
.end-marks img{height:64px;width:auto}
#end-title{margin:6px 0 16px;font-family:'Lilita One';font-weight:400;font-size:clamp(38px,9vw,54px);line-height:1;color:#fff;
  text-shadow:0 3px 0 var(--cocoa),0 -3px 0 var(--cocoa),3px 0 0 var(--cocoa),-3px 0 0 var(--cocoa),3px 3px 0 var(--cocoa),-3px 3px 0 var(--cocoa),3px -3px 0 var(--cocoa),-3px -3px 0 var(--cocoa),0 6px 0 var(--cocoa)}
#end-title.win{color:#5CC067}#end-title.loss{color:var(--terra)}#end-title.draw{color:var(--tang)}
.end-btns{display:flex;flex-direction:column;gap:14px}
.card .big{font-size:clamp(21px,3vh,26px)}

/* ---------- narrow phones ---------- */
@media (max-width:420px){
  .glabel{font-size:17px}
  .chip{font-size:17px;padding:0 11px;min-height:50px}
  .chip.round{width:52px;height:52px}
  .group{padding:4px 8px 4px 11px;gap:5px}
  .big span{font-size:clamp(20px,2.2vh + 6px,26px)}
  .hint{font-size:14px;padding:6px 10px}
  .bh{font-size:15px;min-height:34px}
  .scores{gap:7px}
  .badge{border-width:3px}
  .bh img{width:21px;height:21px}
  .mini-title{height:40px}
}
@media (max-width:360px){ .big span{font-size:18px} .big img{width:32px} }

/* ---------- landscape ---------- */
@media (min-aspect-ratio:6/5){
  #sun{width:min(12.5vw,26vh);right:2vw;top:84px}
  #start.show{display:grid;grid-template-columns:minmax(300px,40%) minmax(0,1fr) minmax(130px,16%);
    column-gap:2.5vw;align-items:center}
  .s-controls{max-width:none;height:100%;justify-content:center;gap:clamp(8px,1.5vh,16px)}
  .s-board{height:100%;margin:0}
  .title{height:clamp(70px,23vh,200px);margin-right:0}
  .title img{max-width:100%}
  .title{margin-left:6px}
  #play.show{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,16%);grid-template-rows:auto minmax(0,1fr);column-gap:2vw}
  .topbar{grid-column:1 / -1}
  .p-main{grid-column:1;grid-row:2}
  .p-side{grid-column:2;grid-row:2;justify-content:flex-end;padding-top:clamp(110px,30vh,240px);padding-right:1vw}
  .p-scores{flex-direction:column;width:100%;max-width:clamp(160px,15vw,230px);gap:8px}
  .p-scores .badge{max-width:none;width:100%}
  .p-side .hint{max-width:clamp(160px,15vw,240px)}
  .p-main .boardArea{width:100%}
}
@media (min-aspect-ratio:6/5) and (max-height:520px){
  .s-controls{gap:4px}
  .title{height:clamp(50px,18vh,80px)}
  .big{min-height:50px;padding:3px 10px;gap:8px}
  .big img{width:32px}
  .big span{font-size:clamp(17px,2.2vh + 4px,22px)}
  .group{padding:2px 6px 2px 9px}
  .glabel,.chip{font-size:16px}
  .chip{min-height:42px}
  .chip.round{width:42px;height:42px}
  .hint{font-size:11.5px;line-height:1.22;padding:3px 8px;border-width:3px;border-radius:16px}
  .topbar .iconbtn{width:46px}
  .mini-title{height:36px}
  .pill{min-height:42px;font-size:18px;padding:3px 16px 3px 8px}
  .pill-mark{width:26px}
  .bh{font-size:14px;min-height:30px}
  .bh img{width:18px;height:18px}
  .bn{font-size:26px}
  .p-scores{gap:5px}
  .p-side{gap:6px}
  .p-side .hint{display:none}
  #sun{width:min(12vw,24vh);top:62px}
}
@media (max-width:900px) and (max-height:600px) and (min-aspect-ratio:6/5){
  #start{grid-template-columns:minmax(260px,44%) minmax(0,1fr) minmax(110px,15%)}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important} }