:root{
  --bg:#17120d;--panel:#251b13;--ink:#fff4d8;--muted:#cbb990;
  --gold:#f0c66d;--edge:#7b542d;--dark:#82512e;--light:#e7c98e;
  --ok:#179355a3;--bad:#ef806f;--cell:clamp(70px,26vmin,132px);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink)}
body{
  min-height:100dvh;
  background:
    radial-gradient(circle at 18% 12%,rgba(240,198,109,.18),transparent 30%),
    linear-gradient(135deg,#120d09,#25170f 52%,#0f0d0c);
}
button{font:inherit;color:inherit}
.app{
  height:100dvh;display:grid;grid-template-rows:auto 1fr auto;
  gap:clamp(8px,1.8vmin,18px);padding:calc(10px + env(safe-area-inset-top)) clamp(10px,3vw,28px) calc(10px + env(safe-area-inset-bottom));
}
header,.controls{
  width:min(920px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
h1{margin:0;font-size:clamp(1.25rem,4vw,2rem);letter-spacing:0;font-weight:850}
.stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pill{
  min-height:38px;display:flex;place-items:center;padding:2px 8px;border:1px solid rgba(240,198,109,.36);
  border-radius:8px;background:rgba(37,27,19,.72);box-shadow:0 8px 24px rgba(0,0,0,.18);font-weight:750;
}
.menu-pill{
  min-width:44px;justify-content:center;font-size:1.35rem;line-height:1;cursor:pointer;
  color:var(--ink);
}
.moves-pill{
  gap:0;padding:0 5px;text-align:center;cursor:pointer;
}
.moves-pill.par-green{
  color:#102215;background:linear-gradient(#a8efb6,#43b96a);
  border-color:rgba(197,255,209,.74);box-shadow:0 10px 26px rgba(67,185,106,.24),inset 0 1px 0 rgba(255,255,255,.42);
}
.moves-pill.par-yellow{
  color:#17100a;background:linear-gradient(#ffe2a0,#d99c37);
  border-color:rgba(255,238,185,.72);box-shadow:0 10px 26px rgba(240,198,109,.24),inset 0 1px 0 rgba(255,255,255,.45);
}
.moves-pill.par-red{
  color:#fff9ef;background:linear-gradient(#e66d55,#8f2d25);
  border-color:rgba(255,183,161,.74);box-shadow:0 10px 28px rgba(230,109,85,.28),inset 0 1px 0 rgba(255,255,255,.26);
}
.move-num{font-size:1.55rem;line-height:1;font-weight:950;margin:0 .5rem}
.move-label{font-size:1rem;line-height:1.1;letter-spacing:.11em;font-weight:950}
.moves-pill.bump{animation:moveBump .34s ease}
@keyframes moveBump{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.12);filter:brightness(1.18)}
  100%{transform:scale(1);filter:brightness(1)}
}
.stage{
  min-height:0;display:grid;grid-template-rows:minmax(92px,24dvh) minmax(0,1fr);
  gap:clamp(8px,2vmin,18px);align-items:center;justify-items:center;
}
.target-wrap,.board-wrap{display:grid;gap:8px;justify-items:center;min-height:0}
.target-wrap{width:max-content;grid-template-columns:auto auto;align-items:center}
.target-wrap .label{grid-column:1/-1}
.label{color:var(--muted);font-size:.79rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.target{
  --cell:clamp(28px,9.2vmin,58px);
  padding:7px;border-radius:8px;background:linear-gradient(#3b291a,#20150e);
  border:1px solid rgba(240,198,109,.34);box-shadow:0 12px 36px rgba(0,0,0,.28);
  transform-origin:center;will-change:transform;
}
.target.spin-left{animation:spinLeft .34s ease forwards}
.target.spin-right{animation:spinRight .34s ease forwards}
.target.flip-horizontal{animation:flipHorizontal .34s ease forwards}
.target.flip-vertical{animation:flipVertical .34s ease forwards}
@keyframes spinLeft{
  0%{transform:rotate(0) scale(1)}
  55%{transform:rotate(-98deg) scale(.92)}
  100%{transform:rotate(-90deg) scale(1)}
}
@keyframes spinRight{
  0%{transform:rotate(0) scale(1)}
  55%{transform:rotate(98deg) scale(.92)}
  100%{transform:rotate(90deg) scale(1)}
}
@keyframes flipHorizontal{
  0%{transform:rotateY(0) scale(1)}
  50%{transform:rotateY(90deg) scale(.94)}
  100%{transform:rotateY(180deg) scale(1)}
}
@keyframes flipVertical{
  0%{transform:rotateX(0) scale(1)}
  50%{transform:rotateX(90deg) scale(.94)}
  100%{transform:rotateX(180deg) scale(1)}
}
.target-tools{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.board{
  display:grid;grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(3,var(--cell));
  padding:clamp(7px,1.3vmin,12px);border-radius:8px;background:#120d09;
  border:2px solid rgba(240,198,109,.42);box-shadow:0 18px 60px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.05);
  touch-action:manipulation;user-select:none;
}
.square{
  position:relative;border:0;display:grid;place-items:center;font-size:calc(var(--cell)*.96);
  background:var(--light);cursor:pointer;min-width:0;min-height:0;
}
.square.dark{background:var(--dark)}
.square:first-child{border-top-left-radius:5px}.square:nth-child(3){border-top-right-radius:5px}
.square:nth-child(7){border-bottom-left-radius:5px}.square:last-child{border-bottom-right-radius:5px}
.piece{
  width:100%;height:100%;display:grid;place-items:center;
  color:#fff8e8;line-height:.9;font-weight:900;
  -webkit-text-stroke:2px #100b07;
  text-shadow:
    0 3px 0 #100b07,0 -2px 0 #100b07,2px 0 0 #100b07,-2px 0 0 #100b07,
    2px 3px 0 #100b07,-2px 3px 0 #100b07,0 8px 14px rgba(0,0,0,.48);
}
.target .piece{font-size:1em;-webkit-text-stroke:1px #100b07}
.selected{box-shadow:inset 0 0 0 5px var(--gold)}
.selected .piece{color:#fffdf4;text-shadow:0 3px 0 #100b07,0 -2px 0 #100b07,2px 0 0 #100b07,-2px 0 0 #100b07,0 0 18px rgba(240,198,109,.85)}
.hint::after{
  content:"";width:45%;aspect-ratio:1;border-radius:40%;background:var(--ok);
  box-shadow:0 0 0 8px rgba(101,214,158,.18),0 0 22px rgba(101,214,158,.8);
}
.last{box-shadow:inset 0 0 0 5px rgba(240,198,109,.48)}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;border:1px solid rgba(240,198,109,.34);border-radius:8px;
  background:linear-gradient(#47311f,#2d1f16);box-shadow:0 8px 20px rgba(0,0,0,.24);
  font-weight:800;cursor:pointer;padding:9px 10px;
}
.tool-btn{min-height:40px;padding:7px 9px;font-size:.9rem}
.icon{font-size:1.18em;margin-right:4px;line-height:1}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(#d4a84e,#8d5928);color:#17100a}
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(330px,calc(100vw - 28px));padding:18px;border-radius:8px;text-align:center;
  background:rgba(20,14,10,.94);border:1px solid rgba(240,198,109,.46);
  box-shadow:0 24px 80px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.toast b{display:block;font-size:1.25rem;margin-bottom:4px;color:var(--gold)}
.win-rating{display:block;margin:5px 0 3px;font-size:clamp(1.65rem,7vw,2.35rem);line-height:1;color:#fff4d8;font-weight:950}
.toast p{margin:0 0 12px;color:var(--muted)}
.toast-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.menu-note{min-height:1.1em;margin:10px 0 0;color:var(--muted)}
.instructions-dialog{
  width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;
  background:#15100c;
}
.instructions-copy{text-align:left;color:var(--muted);font-size:.95rem;line-height:1.38;margin:10px 0 14px}
.instructions-copy p{margin:0}
.rule-block,.piece-rules article{
  padding:10px;border:1px solid rgba(240,198,109,.2);border-radius:8px;background:#201711;margin-bottom:8px;
}
.instructions-copy h2{
  margin:0 0 4px;color:var(--ink);font-size:.86rem;line-height:1.1;text-transform:uppercase;letter-spacing:.08em;
}
.piece-rules article{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}
.rule-piece{
  display:grid;place-items:center;font-size:2.2rem;line-height:1;color:#fff8e8;
  -webkit-text-stroke:1px #100b07;
  text-shadow:0 2px 0 #100b07,1px 0 0 #100b07,-1px 0 0 #100b07,0 5px 10px rgba(0,0,0,.45);
}
.par-dialog p{font-size:1rem;line-height:1.35}
@media (orientation:landscape) and (min-width:680px){
  .app{grid-template-rows:auto 1fr auto}
  .stage{grid-template-columns:minmax(132px,1fr) auto minmax(132px,1fr);grid-template-rows:1fr}
  .target-wrap{grid-column:1;grid-template-columns:auto;align-self:start;justify-self:end;margin-top:4px}
  .target-wrap .label{grid-column:auto}
  .board-wrap{grid-column:2}
  .target{--cell:clamp(34px,7.4vmin,62px)}
  :root{--cell:clamp(72px,21vmin,142px)}
}
@media (max-height:560px){
  .app{padding:calc(7px + env(safe-area-inset-top)) 8px calc(7px + env(safe-area-inset-bottom));gap:7px}
  .label{display:none}.btn{min-height:40px;padding:7px 8px;font-size:.86rem}.pill{min-height:32px}
  :root{--cell:clamp(54px,21vmin,108px)}
  .target{--cell:clamp(24px,8vmin,42px)}
}
@media (orientation:landscape) and (max-height:560px){
  .controls,.target-tools{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .target.spin-left,.target.spin-right,.target.flip-horizontal,.target.flip-vertical,.moves-pill.bump{animation:none}
}