:root{
  --ink:#132019;
  --muted:#dfe7df;
  --forest:#1f4932;
  --forest-dark:#153523;
  --gold:#f4a62a;
  --gold-2:#df7b16;
  --cream:#fff6e3;
  --safe-top:max(10px, env(safe-area-inset-top));
  --safe-right:max(10px, env(safe-area-inset-right));
  --safe-bottom:max(10px, env(safe-area-inset-bottom));
  --safe-left:max(10px, env(safe-area-inset-left));
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
html{background:#17271d}
body{
  overflow:hidden;
  font-family:"Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:#fff;
  background:#17271d;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit}

#game-background{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#23352a;
  pointer-events:none;
}
#game-background-image{
  position:absolute;
  inset:-22px;
  background:url('images/level1.avif') center/cover no-repeat;
  filter:blur(10px) saturate(1.05) brightness(.82);
  transform:scale(1.055);
  transition:background-image .35s ease,filter .25s ease;
}
.game-background-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,220,155,.12),transparent 45%),
    linear-gradient(180deg,rgba(8,17,11,.28),rgba(8,18,12,.55));
}

#app{
  position:relative;
  z-index:1;
  width:100%;
  height:100vh;
  height:100dvh;
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.screen{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

/* shared controls */
.sound-button,
.nav-button,
.reset-button,
.restart-button,
.reward-button,
.primary-cta,
.modal-buttons button{
  border:0;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .14s ease,filter .14s ease,background .14s ease,box-shadow .14s ease;
}
.sound-button:active,
.nav-button:active,
.reset-button:active,
.restart-button:active,
.reward-button:active,
.primary-cta:active,
.modal-buttons button:active{transform:scale(.97)}

.sound-button{
  position:fixed;
  z-index:30;
  top:var(--safe-top);
  right:var(--safe-right);
  width:48px;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(18,48,31,.78);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.sound-button:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sound-icon{font-size:20px;line-height:1}
.sound-label{display:none}

.nav-button{
  min-height:44px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px;
  color:#fff;
  font-weight:750;
  background:rgba(18,48,31,.78);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 7px 20px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-button:hover,.reset-button:hover,.restart-button:hover,.reward-button:hover{filter:brightness(1.1);transform:translateY(-1px)}

.screen-topbar{
  position:relative;
  z-index:3;
  width:min(1180px,100%);
  min-height:56px;
  margin:0 auto;
  padding-right:58px;
  display:grid;
  grid-template-columns:140px 1fr 140px;
  align-items:start;
  gap:12px;
}
.topbar-balance{width:100%}

/* main menu */
.start-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:58px 18px 16px;
}
.start-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:min(780px,92vw);
  text-shadow:0 3px 20px rgba(0,0,0,.36);
}
.brand-mark{
  font-size:clamp(36px,5vw,56px);
  line-height:1;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.25));
}
.brand-kicker{
  margin-top:10px;
  font-size:clamp(9px,1.1vw,12px);
  letter-spacing:.24em;
  font-weight:850;
  color:rgba(255,246,224,.82);
}
.game-title{
  margin:7px 0 8px;
  font-size:clamp(44px,7vw,82px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:900;
  color:#fff7e7;
}
.desc{
  margin:0;
  max-width:560px;
  font-size:clamp(15px,1.8vw,20px);
  line-height:1.45;
  color:rgba(255,255,255,.88);
}
.primary-cta{
  margin-top:clamp(22px,4vh,34px);
  min-width:min(310px,82vw);
  min-height:54px;
  padding:13px 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#ffb536,#e68113);
  box-shadow:0 12px 28px rgba(65,35,8,.28),inset 0 1px 0 rgba(255,255,255,.42);
  font-size:clamp(17px,2vw,20px);
  font-weight:850;
}
.primary-cta:hover{filter:brightness(1.05);transform:translateY(-2px)}
.cta-icon{font-size:15px}
.feature-line{
  margin-top:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.78);
}
.credits{
  position:absolute;
  left:50%;
  bottom:var(--safe-bottom);
  transform:translateX(-50%);
  margin:0;
  font-size:11px;
  color:rgba(255,255,255,.64);
  white-space:nowrap;
}

/* level select */
.level-screen{padding:0 4px 4px;flex-direction:column}
.level-topbar{padding-top:2px}
.level-heading{text-align:center;padding-top:2px}
.level-heading h2{
  margin:0;
  font-size:clamp(24px,3vw,34px);
  line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.level-heading p{
  margin:4px 0 0;
  font-size:12px;
  color:rgba(255,255,255,.74);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.level-content{
  height:calc(100% - 64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:8px 8px 4px;
}
.level-grid{
  width:min(860px,92vw);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(9px,1.2vw,13px);
}
.level-card{
  position:relative;
  min-width:0;
  aspect-ratio:1.55/1;
  overflow:hidden;
  isolation:isolate;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.45)!important;
  background:#38483e;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  text-align:left;
}
.level-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--level-image);
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  transition:transform .18s ease,filter .18s ease;
}
.level-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(3,11,6,.72) 100%);
}
.level-card:hover:not(.locked){transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.24)}
.level-card:hover:not(.locked)::before{transform:scale(1.07)}
.level-card.locked{cursor:not-allowed;box-shadow:none}
.level-card.locked::before{filter:saturate(.45) brightness(.48) blur(1px);transform:scale(1.05)}
.level-card.locked::after{background:linear-gradient(180deg,rgba(9,23,14,.18),rgba(7,20,12,.82))}
.level-card.completed{outline:2px solid rgba(183,239,135,.9);outline-offset:-2px}
.level-number{
  position:absolute;
  left:10px;
  bottom:8px;
  font-size:clamp(11px,1.3vw,15px);
  font-weight:850;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.level-state{
  position:absolute;
  top:7px;
  right:7px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(18,48,31,.82);
  border:1px solid rgba(255,255,255,.22);
  font-size:11px;
  font-weight:900;
}
.level-card.completed .level-state{background:rgba(55,125,56,.92)}
.reset-button,
.restart-button,
.reward-button{
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  color:#fff;
  background:rgba(18,48,31,.76);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  font-size:13px;
  font-weight:750;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.reward-button{
  min-height:42px;
  width:min(180px,100%);
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px;
  border:1px solid rgba(255,220,150,.5);
  color:#fff;
  background:linear-gradient(180deg,#ffb536,#e68113);
  box-shadow:0 8px 22px rgba(70,35,5,.24),inset 0 1px 0 rgba(255,255,255,.35);
  font-size:12px;
  line-height:1.15;
  font-weight:850;
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.reward-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.reward-button:disabled{opacity:.62;cursor:wait;transform:none;filter:none}

/* puzzle */
.puzzle-screen{padding:0 4px 4px;flex-direction:column}
.puzzle-topbar{padding-top:2px}
.puzzle-heading{text-align:center;padding-top:1px}
.hud-title{
  font-size:clamp(21px,2.6vw,30px);
  line-height:1.05;
  font-weight:900;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.hud-tip{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.76);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.puzzle-layout{
  width:min(1060px,96vw);
  height:calc(100% - 64px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,3vw,38px);
  padding:6px 8px 10px;
}
.board-zone{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.board{
  width:min(68dvh,56vw,570px);
  max-width:100%;
  aspect-ratio:1/1;
  display:grid;
  gap:2px;
  padding:3px;
  border-radius:12px;
  background:rgba(255,246,227,.78);
  border:1px solid rgba(255,255,255,.52);
  box-shadow:0 15px 38px rgba(0,0,0,.25);
  touch-action:none;
  user-select:none;
}
.tile{
  width:100%;
  height:100%;
  border-radius:5px;
  background-color:#bbb;
  background-repeat:no-repeat;
  border:1px solid rgba(0,0,0,.06);
  transition:transform .16s ease;
}
.target-zone{
  align-self:center;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}
.target-heading{
  margin-bottom:8px;
  font-size:14px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.86);
}
.preview{
  width:min(150px,100%);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.72);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
}
.target-tip{
  max-width:170px;
  margin:9px 0 11px;
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.82);
}

/* overlays */
.overlay,.modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(6,16,10,.62);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.overlay-card,.modal-card{
  width:min(450px,92vw);
  padding:20px;
  border-radius:18px;
  background:rgba(255,248,235,.97);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  text-align:center;
}
.overlay-title,.modal-title{font-size:20px;font-weight:900}
.overlay-title{margin-bottom:12px}
.modal-title{margin-bottom:8px}
.overlay-sub,.modal-text{font-size:14px;line-height:1.4;color:#657067}
.overlay-sub{margin-top:10px}.modal-text{white-space:pre-line}
.progress{height:10px;border-radius:999px;overflow:hidden;background:#e5dfd3}
.progress-bar{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f6ad31,#dd7a17);transition:width .12s ease}
.modal-buttons{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.modal-buttons button{
  min-height:42px;
  padding:0 17px;
  border-radius:999px;
  background:linear-gradient(180deg,#f6ad31,#da7916);
  color:#fff;
  font-weight:800;
}
.modal-buttons button.secondary{background:#284a35}
.toast{
  position:fixed;
  z-index:90;
  left:50%;
  bottom:calc(var(--safe-bottom) + 4px);
  transform:translateX(-50%);
  padding:9px 14px;
  border-radius:999px;
  color:#fff;
  background:rgba(12,30,19,.94);
  font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}

/* portrait phones/tablets */
@media (orientation:portrait){
  .screen-topbar{
    min-height:54px;
    grid-template-columns:96px 1fr 96px;
    padding-right:54px;
  }
  .level-content{height:calc(100% - 58px);padding-top:4px}
  .level-grid{width:min(620px,94vw);grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .level-card{aspect-ratio:1.42/1}

  .puzzle-layout{
    width:100%;
    height:calc(100% - 58px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    gap:7px;
    padding:4px 8px 8px;
  }
  .target-zone{
    grid-row:1;
    flex-direction:row;
    justify-content:center;
    gap:9px;
  }
  .target-heading{display:none}
  .preview{width:64px;border-radius:9px}
  .target-tip{max-width:210px;margin:0;text-align:left;font-size:11px}
  .restart-button{min-height:40px;padding:0 13px;white-space:nowrap}
  .reward-button{min-height:40px;width:auto;max-width:190px;padding:7px 12px;font-size:11px}
  .board-zone{grid-row:2;justify-content:center;align-items:center;min-height:0}
  .board{
    width:min(94vw,calc(100dvh - 180px),560px);
    max-height:100%;
  }
}

@media (max-width:600px) and (orientation:portrait){
  .sound-button{width:44px;height:44px}
  .screen-topbar{grid-template-columns:72px 1fr 72px;padding-right:48px;gap:5px}
  .nav-button{min-height:42px;padding:0 11px;font-size:13px}
  .level-heading h2{font-size:23px}
  .level-heading p{display:none}
  .level-content{gap:9px;padding-bottom:2px}
  .level-grid{gap:7px}
  .level-card{border-radius:10px!important}
  .level-number{left:7px;bottom:5px;font-size:10px}
  .level-state{width:22px;height:22px;top:5px;right:5px;font-size:9px}
  .reset-button{min-height:38px;padding:0 13px;font-size:11px}

  .start-screen{padding:56px 14px 24px}
  .brand-mark{font-size:40px}
  .brand-kicker{font-size:9px;margin-top:8px}
  .game-title{font-size:clamp(43px,13vw,62px)}
  .desc{max-width:330px;font-size:14px}
  .feature-line{max-width:310px;font-size:10px}
  .primary-cta{min-height:50px;min-width:min(280px,82vw);margin-top:20px}

  .hud-title{font-size:20px}
  .hud-tip{font-size:10px;margin-top:2px}
  .target-zone{gap:7px}
  .preview{width:56px}
  .target-tip{max-width:160px;font-size:10px}
  .restart-button{min-height:36px;padding:0 10px;font-size:11px}
  .reward-button{min-height:36px;padding:6px 10px;font-size:10px}
  .board{width:min(95vw,calc(100dvh - 170px),520px)}
}

/* all landscape, including desktop */
@media (orientation:landscape){
  .puzzle-layout{grid-template-columns:minmax(0,1fr) minmax(145px,190px)}
}

/* short mobile landscape */
@media (orientation:landscape) and (max-height:600px){
  #app{padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
  .sound-button{top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:42px;height:42px}
  .screen-topbar{
    width:100%;
    min-height:45px;
    grid-template-columns:92px 1fr 92px;
    padding-right:48px;
    gap:5px;
  }
  .nav-button{min-height:38px;padding:0 11px;font-size:12px}

  .start-screen{padding:8px 54px 8px;justify-content:center}
  .brand-mark{font-size:30px}
  .brand-kicker{margin-top:4px;font-size:8px}
  .game-title{margin:3px 0 3px;font-size:clamp(35px,10vh,54px)}
  .desc{font-size:12px}
  .primary-cta{margin-top:10px;min-width:220px;min-height:42px;padding:8px 20px;font-size:15px}
  .feature-line{margin-top:6px;font-size:9px}
  .credits{font-size:8px}

  .level-heading h2{font-size:20px}
  .level-heading p{display:none}
  .level-content{height:calc(100% - 47px);gap:6px;padding:1px 4px 2px}
  .level-grid{width:min(900px,92vw);grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
  .level-card{aspect-ratio:1.48/1;border-radius:8px!important}
  .level-number{left:5px;bottom:4px;font-size:9px}
  .level-state{width:19px;height:19px;top:4px;right:4px;font-size:8px}
  .reset-button{min-height:32px;padding:0 11px;font-size:10px}

  .puzzle-heading{padding-top:0}
  .hud-title{font-size:18px}
  .hud-tip{margin-top:1px;font-size:9px}
  .puzzle-layout{
    width:min(920px,96vw);
    height:calc(100% - 47px);
    grid-template-columns:minmax(0,1fr) 125px;
    gap:10px;
    padding:1px 4px 3px;
  }
  .board-zone{justify-content:flex-end}
  .board{width:min(calc(100dvh - 68px),62vw,500px);border-radius:9px}
  .target-heading{margin-bottom:4px;font-size:10px}
  .preview{width:min(92px,20vh);border-radius:8px}
  .target-tip{max-width:120px;margin:5px 0 6px;font-size:9px;line-height:1.25}
  .restart-button{min-height:32px;padding:0 9px;font-size:10px}
  .reward-button{min-height:32px;padding:5px 9px;font-size:9px;max-width:150px}
}

/* very short landscape phones */
@media (orientation:landscape) and (max-height:410px){
  .brand-mark{display:none}
  .brand-kicker{display:none}
  .game-title{font-size:32px}
  .feature-line{display:none}
  .level-grid{gap:4px}
  .level-number{font-size:8px}
  .puzzle-layout{grid-template-columns:minmax(0,1fr) 105px;gap:7px}
  .board{width:min(calc(100dvh - 60px),63vw,430px)}
  .target-tip{display:none}
  .preview{width:min(80px,22vh)}
}

/* very small portrait screens */
@media (orientation:portrait) and (max-height:650px){
  .brand-mark{font-size:30px}
  .brand-kicker{display:none}
  .game-title{font-size:40px}
  .desc{font-size:12px}
  .feature-line{display:none}
  .primary-cta{margin-top:13px;min-height:44px}
  .level-grid{gap:5px}
  .level-content{gap:5px}
  .reset-button{min-height:32px}
  .target-tip{display:none}
  .preview{width:48px}
  .restart-button{min-height:32px}
  .reward-button{min-height:32px;max-width:145px;font-size:9px}
  .board{width:min(94vw,calc(100dvh - 145px),480px)}
}

/* V3 clean controls + tutorial + cardless completion */
.help-button{
  position:fixed;
  z-index:30;
  top:var(--safe-top);
  right:calc(var(--safe-right) + 58px);
  width:48px;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(18,48,31,.78);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .14s ease,filter .14s ease,background .14s ease;
}
.help-button:hover{filter:brightness(1.1);transform:translateY(-1px)}
.help-button:active{transform:scale(.97)}

/* No permanent instruction lines in gameplay. */
.puzzle-heading{display:flex;align-items:center;justify-content:center;min-height:44px}
.target-zone{gap:10px}

.control-hint{
  position:fixed;
  z-index:55;
  left:50%;
  bottom:calc(var(--safe-bottom) + 10px);
  transform:translate(-50%,12px);
  opacity:0;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:calc(100vw - 28px);
  min-height:42px;
  padding:8px 15px;
  border-radius:999px;
  color:#fff;
  background:rgba(10,28,18,.86);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.control-hint.show{opacity:1;transform:translate(-50%,0)}
.control-hand{font-size:18px;animation:hintTap 1.2s ease-in-out infinite}
.control-rotate{font-size:16px;animation:hintSpin 1.3s ease-in-out infinite}
@keyframes hintTap{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) scale(.96)}}
@keyframes hintSpin{0%,35%{transform:rotate(0)}75%,100%{transform:rotate(90deg)}}

.completion-overlay{
  position:fixed;
  inset:0;
  z-index:65;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,13,8,.58);
  backdrop-filter:blur(4px) saturate(.9);
  -webkit-backdrop-filter:blur(4px) saturate(.9);
  opacity:0;
  transition:opacity .2s ease;
  overflow:hidden;
}
.completion-overlay.show{opacity:1}
.completion-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.55);
  animation:completionRise .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes completionRise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.completion-check{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-bottom:12px;
  background:#34b85a;
  box-shadow:0 12px 34px rgba(25,122,58,.35),inset 0 1px 0 rgba(255,255,255,.45);
  font-size:38px;
  line-height:1;
  font-weight:900;
  text-shadow:none;
}
.completion-title{
  font-size:clamp(30px,5vw,58px);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:900;
}
.completion-actions{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.complete-button{
  min-height:46px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  color:#fff;
  background:rgba(18,48,31,.88);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-weight:850;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .14s ease,filter .14s ease;
}
.complete-button.primary{
  border-color:rgba(255,220,150,.5);
  background:linear-gradient(180deg,#ffb536,#e68113);
}
.complete-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.complete-button:active{transform:scale(.97)}

.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti-layer i{
  position:absolute;
  top:-24px;
  width:8px;
  height:14px;
  border-radius:2px;
  background:#ffb72f;
  filter:hue-rotate(var(--hue));
  animation:confettiFall 2.15s cubic-bezier(.22,.61,.36,1) var(--delay) both;
}
@keyframes confettiFall{
  0%{transform:translate3d(0,-4vh,0) rotate(0);opacity:0}
  10%{opacity:1}
  100%{transform:translate3d(var(--drift),105vh,0) rotate(var(--spin));opacity:.95}
}

@media (orientation:portrait){
  .target-zone{gap:10px}
  .control-hint{bottom:calc(var(--safe-bottom) + 8px);font-size:12px;min-height:40px;padding:7px 13px}
}

@media (max-width:600px) and (orientation:portrait){
  .help-button{width:44px;height:44px;right:calc(var(--safe-right) + 52px);font-size:18px}
  .completion-check{width:58px;height:58px;font-size:33px;margin-bottom:10px}
  .completion-title{font-size:clamp(30px,10vw,42px)}
  .completion-actions{margin-top:18px;gap:8px}
  .complete-button{min-height:44px;padding:0 16px;font-size:13px}
}

@media (orientation:landscape) and (max-height:600px){
  .help-button{
    top:max(8px,env(safe-area-inset-top));
    right:calc(max(10px,env(safe-area-inset-right)) + 50px);
    width:42px;
    height:42px;
    font-size:17px;
  }
  .control-hint{bottom:max(8px,env(safe-area-inset-bottom));min-height:34px;padding:5px 12px;font-size:11px}
  .completion-check{width:48px;height:48px;font-size:28px;margin-bottom:7px}
  .completion-title{font-size:clamp(26px,8vh,40px)}
  .completion-actions{margin-top:12px;gap:7px}
  .complete-button{min-height:38px;padding:0 14px;font-size:12px}
}

@media (orientation:landscape) and (max-height:410px){
  .completion-overlay{padding:10px}
  .completion-check{width:40px;height:40px;font-size:24px;margin-bottom:5px}
  .completion-title{font-size:25px}
  .completion-actions{margin-top:9px}
  .complete-button{min-height:34px;padding:0 12px;font-size:11px}
}

/* Reward control responsive placement */
@media (orientation:portrait){
  .target-zone{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:
      "preview restart"
      "reward reward";
    justify-content:center;
    align-items:center;
    gap:7px 9px;
  }
  .target-zone .preview{grid-area:preview}
  .target-zone .restart-button{grid-area:restart}
  .target-zone .reward-button{grid-area:reward;justify-self:center;width:auto;max-width:min(210px,82vw)}
}

@media (orientation:portrait) and (max-height:680px){
  .target-zone{gap:5px 7px}
  .target-zone .preview{width:44px}
  .target-zone .restart-button{min-height:32px;font-size:10px}
  .target-zone .reward-button{min-height:32px;padding:5px 10px;font-size:9px}
  .board{width:min(92vw,calc(100dvh - 180px),470px)}
}

/* =========================================================
   V5 RESPONSIVE FIT SYSTEM
   Designed for desktop, tablet, portrait phones and landscape phones.
   These rules intentionally override earlier sizing rules.
   ========================================================= */
:root{
  --viewport-h:100dvh;
  --viewport-w:100vw;
  --edge-gap:clamp(8px,1.2vmin,16px);
  --header-h:clamp(46px,6.5vmin,58px);
  --round-pill:999px;
}

html,body{
  min-width:100%;
  min-height:100%;
}

body{overflow:hidden}

#app{
  width:100%;
  height:var(--viewport-h,100dvh);
  min-height:0;
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow:hidden;
}

.screen{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

/* ---------- universal top controls ---------- */
.sound-button,
.help-button{
  top:var(--safe-top);
  width:clamp(42px,5vmin,48px);
  height:clamp(42px,5vmin,48px);
}
.sound-button{right:var(--safe-right)}
.help-button{right:calc(var(--safe-right) + clamp(50px,6vmin,58px))}

.screen-topbar{
  position:relative;
  flex:0 0 var(--header-h);
  width:min(1180px,100%);
  min-height:var(--header-h);
  height:var(--header-h);
  margin:0 auto;
  padding:0 clamp(104px,12vmin,122px) 0 0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
}
.level-heading,
.puzzle-heading{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:0;
  min-height:0;
  white-space:nowrap;
  pointer-events:none;
}
.topbar-balance{display:none}

.nav-button{
  min-height:clamp(40px,5vmin,46px);
  padding:0 clamp(12px,1.6vmin,17px);
  flex:0 0 auto;
  white-space:nowrap;
  font-size:clamp(12px,1.45vmin,15px);
}
.level-heading h2{font-size:clamp(22px,3.3vmin,34px)}
.hud-title{font-size:clamp(20px,3.1vmin,31px)}

/* ---------- start screen ---------- */
.start-screen{
  padding:clamp(54px,8vmin,72px) clamp(14px,3vw,30px) clamp(18px,3vmin,30px);
  justify-content:center;
}
.start-content{
  width:min(760px,92vw);
  max-height:calc(var(--viewport-h) - 100px);
  justify-content:center;
}
.brand-mark{font-size:clamp(34px,6vmin,58px)}
.brand-kicker{font-size:clamp(8px,1.25vmin,12px);margin-top:clamp(5px,1vmin,10px)}
.game-title{font-size:clamp(42px,8vmin,82px);margin:clamp(4px,.8vmin,8px) 0}
.desc{font-size:clamp(13px,2.1vmin,20px)}
.primary-cta{
  margin-top:clamp(16px,3.4vmin,32px);
  min-width:min(310px,82vw);
  min-height:clamp(48px,6.3vmin,58px);
  font-size:clamp(16px,2.15vmin,20px);
}
.credits{bottom:var(--safe-bottom);font-size:clamp(9px,1.2vmin,11px)}

/* ---------- level select ---------- */
.level-screen,
.puzzle-screen{
  padding:0;
  display:flex;
  flex-direction:column;
}
.level-topbar,
.puzzle-topbar{padding-top:0}

.level-content{
  flex:1 1 auto;
  width:100%;
  height:auto;
  min-height:0;
  padding:var(--edge-gap) var(--edge-gap) max(4px,var(--safe-bottom));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(8px,1.5vmin,14px);
  overflow:hidden;
}
.level-grid{
  width:min(900px,92vw,calc((var(--viewport-h) - 125px) * 2.35));
  max-height:calc(100% - 48px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(6px,1.15vmin,12px);
}
.level-card{
  width:100%;
  min-width:0;
  aspect-ratio:1.55/1;
  border-radius:clamp(8px,1.4vmin,13px)!important;
}
.level-number{font-size:clamp(9px,1.5vmin,15px)}
.level-state{
  width:clamp(19px,3vmin,27px);
  height:clamp(19px,3vmin,27px);
  font-size:clamp(8px,1.15vmin,11px);
}
.reset-button{
  flex:0 0 auto;
  min-height:clamp(36px,4.8vmin,42px);
  padding:0 clamp(12px,1.7vmin,17px);
  font-size:clamp(10px,1.45vmin,13px);
}

/* ---------- puzzle: shared ---------- */
.puzzle-layout{
  flex:1 1 auto;
  width:min(1120px,100%);
  height:auto;
  min-height:0;
  margin:0 auto;
  padding:clamp(4px,.8vmin,9px) var(--edge-gap) max(4px,var(--safe-bottom));
  display:grid;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.board-zone{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.board{
  width:min(620px,calc(var(--viewport-h) - var(--header-h) - 32px),calc(100vw - 270px));
  max-width:100%;
  max-height:100%;
  aspect-ratio:1/1;
  flex:0 0 auto;
  gap:clamp(1px,.25vmin,2px);
  padding:clamp(2px,.35vmin,4px);
  border-radius:clamp(8px,1.4vmin,13px);
}
.tile{border-radius:clamp(2px,.55vmin,5px)}
.target-zone{
  width:clamp(126px,17vw,190px);
  min-width:0;
  gap:clamp(7px,1.2vmin,11px);
}
.target-heading{margin:0;font-size:clamp(10px,1.5vmin,14px)}
.preview{
  width:clamp(74px,14vmin,150px);
  max-width:100%;
  border-radius:clamp(8px,1.25vmin,12px);
}
.restart-button{
  min-height:clamp(36px,4.8vmin,42px);
  padding:0 clamp(11px,1.5vmin,16px);
  font-size:clamp(10px,1.4vmin,13px);
  white-space:nowrap;
}
.reward-button{
  width:min(180px,100%);
  min-height:clamp(38px,5.4vmin,46px);
  padding:clamp(6px,.9vmin,9px) clamp(9px,1.3vmin,14px);
  font-size:clamp(9px,1.3vmin,12px);
  white-space:normal;
}

/* ---------- normal landscape: desktop + tablets ---------- */
@media (orientation:landscape){
  .puzzle-layout{
    grid-template-columns:minmax(0,1fr) clamp(130px,17vw,190px);
    gap:clamp(12px,2.6vw,38px);
  }
  .target-zone{width:100%}
}

/* ---------- wide desktop ---------- */
@media (orientation:landscape) and (min-width:1200px) and (min-height:700px){
  .puzzle-layout{width:min(1160px,94vw);grid-template-columns:minmax(0,1fr) 190px}
  .board{width:min(620px,calc(var(--viewport-h) - 105px),58vw)}
  .preview{width:145px}
  .level-grid{width:min(900px,80vw)}
}

/* ---------- tablet portrait ---------- */
@media (orientation:portrait) and (min-width:600px){
  .screen-topbar{padding-right:112px}
  .level-grid{
    width:min(700px,92vw);
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(7px,1.2vmin,11px);
  }
  .level-card{aspect-ratio:1.45/1}

  .puzzle-layout{
    width:100%;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:clamp(8px,1.4vmin,13px);
  }
  .board-zone{grid-row:1;justify-content:center}
  .board{
    width:min(600px,92vw,calc(var(--viewport-h) - var(--header-h) - 150px));
  }
  .target-zone{
    grid-row:2;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:12px;
  }
  .target-heading{display:none}
  .preview{width:68px}
  .reward-button{width:auto;max-width:210px}
}

/* ---------- mobile portrait ---------- */
@media (orientation:portrait) and (max-width:599px){
  :root{--header-h:50px;--edge-gap:7px}
  .sound-button,.help-button{width:42px;height:42px}
  .help-button{right:calc(var(--safe-right) + 48px)}
  .screen-topbar{padding-right:94px}
  .nav-button{min-height:40px;padding:0 10px;font-size:12px}
  .level-heading h2{font-size:clamp(20px,6vw,24px)}
  .hud-title{font-size:clamp(19px,5.8vw,23px)}

  .start-screen{padding:52px 14px 24px}
  .start-content{width:94vw;max-height:calc(var(--viewport-h) - 84px)}
  .brand-mark{font-size:clamp(30px,10vw,42px)}
  .brand-kicker{font-size:8px;letter-spacing:.2em}
  .game-title{font-size:clamp(40px,14vw,60px)}
  .desc{max-width:320px;font-size:clamp(12px,3.8vw,15px)}
  .primary-cta{min-width:min(280px,82vw);min-height:48px;margin-top:18px}

  .level-content{gap:7px;padding:5px 7px max(4px,var(--safe-bottom))}
  .level-grid{
    width:min(94vw,430px);
    max-height:calc(100% - 42px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(5px,1.8vw,8px);
  }
  .level-card{aspect-ratio:1.42/1}
  .level-number{left:6px;bottom:5px;font-size:clamp(9px,2.7vw,11px)}
  .level-state{top:5px;right:5px;width:21px;height:21px;font-size:9px}
  .reset-button{min-height:36px;font-size:10px}

  .puzzle-layout{
    width:100%;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:6px;
    padding:2px 6px max(4px,var(--safe-bottom));
  }
  .board-zone{grid-row:1;justify-content:center;align-items:center}
  .board{
    width:min(94vw,calc(var(--viewport-h) - var(--header-h) - 128px),520px);
    max-height:100%;
  }
  .target-zone{
    grid-row:2;
    width:100%;
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:
      "preview restart"
      "reward reward";
    justify-content:center;
    align-items:center;
    gap:5px 8px;
  }
  .target-heading{display:none}
  .target-zone .preview{grid-area:preview;width:48px}
  .target-zone .restart-button{grid-area:restart;min-height:34px;font-size:10px}
  .target-zone .reward-button{
    grid-area:reward;
    justify-self:center;
    width:auto;
    max-width:min(220px,86vw);
    min-height:34px;
    padding:5px 11px;
    font-size:9.5px;
  }
}

/* small/short portrait phones: 320x568 class */
@media (orientation:portrait) and (max-width:599px) and (max-height:680px){
  :root{--header-h:46px}
  .sound-button,.help-button{width:38px;height:38px}
  .help-button{right:calc(var(--safe-right) + 44px)}
  .screen-topbar{padding-right:86px}
  .nav-button{min-height:36px;font-size:11px}
  .start-screen{padding-top:45px}
  .brand-mark{font-size:28px}
  .brand-kicker{display:none}
  .game-title{font-size:clamp(36px,12vw,46px)}
  .desc{font-size:12px}
  .primary-cta{min-height:43px;margin-top:12px;font-size:15px}
  .credits{font-size:8px}

  .level-grid{gap:4px;width:min(92vw,390px)}
  .level-content{gap:4px;padding-top:2px}
  .level-card{border-radius:7px!important}
  .level-number{font-size:8.5px}
  .reset-button{min-height:31px;padding:0 10px;font-size:9px}

  .puzzle-layout{gap:3px;padding-top:0}
  .board{width:min(92vw,calc(var(--viewport-h) - var(--header-h) - 112px),455px)}
  .target-zone{gap:3px 6px}
  .target-zone .preview{width:40px}
  .target-zone .restart-button{min-height:30px;padding:0 9px;font-size:9px}
  .target-zone .reward-button{min-height:30px;padding:4px 9px;font-size:8.5px}
}

/* ---------- mobile landscape ---------- */
@media (orientation:landscape) and (max-height:600px){
  :root{--header-h:44px;--edge-gap:6px}
  #app{
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .sound-button,.help-button{
    top:max(6px,env(safe-area-inset-top));
    width:38px;
    height:38px;
    font-size:16px;
  }
  .sound-button{right:max(8px,env(safe-area-inset-right))}
  .help-button{right:calc(max(8px,env(safe-area-inset-right)) + 44px)}
  .screen-topbar{padding-right:88px;width:100%}
  .nav-button{min-height:36px;padding:0 10px;font-size:11px}
  .level-heading h2,.hud-title{font-size:clamp(18px,5.4vh,23px)}

  .start-screen{padding:6px 92px 6px 12px}
  .start-content{max-height:100%;width:min(580px,80vw)}
  .brand-mark{font-size:clamp(24px,8vh,34px)}
  .brand-kicker{font-size:7px;margin-top:2px}
  .game-title{font-size:clamp(31px,11vh,52px);margin:2px 0}
  .desc{font-size:clamp(10px,3.4vh,13px)}
  .primary-cta{margin-top:8px;min-width:210px;min-height:38px;padding:6px 18px;font-size:14px}
  .credits{font-size:7.5px}

  .level-content{gap:5px;padding:2px 5px max(2px,var(--safe-bottom))}
  .level-grid{
    width:min(760px,90vw,calc((var(--viewport-h) - 92px) * 2.55));
    max-height:calc(100% - 34px);
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
  }
  .level-card{aspect-ratio:1.58/1;border-radius:7px!important}
  .level-number{left:5px;bottom:3px;font-size:clamp(7.5px,2.5vh,10px)}
  .level-state{width:18px;height:18px;top:3px;right:3px;font-size:7px}
  .reset-button{min-height:29px;padding:0 10px;font-size:8.5px}

  .puzzle-layout{
    width:min(920px,100%);
    grid-template-columns:minmax(0,1fr) clamp(110px,19vw,145px);
    gap:clamp(7px,1.8vw,14px);
    padding:0 3px max(2px,var(--safe-bottom));
  }
  .board-zone{justify-content:flex-end}
  .board{
    width:min(calc(var(--viewport-h) - var(--header-h) - 22px),calc(100vw - 190px),450px);
    border-radius:8px;
  }
  .target-zone{width:100%;gap:4px}
  .target-heading{font-size:9px}
  .preview{width:min(74px,20vh)}
  .restart-button{min-height:29px;padding:0 8px;font-size:8.5px}
  .reward-button{min-height:31px;padding:4px 7px;font-size:8px;max-width:135px}

  .control-hint{
    bottom:max(5px,env(safe-area-inset-bottom));
    min-height:31px;
    padding:4px 10px;
    font-size:9.5px;
  }
}

/* very short landscape phones: 568x320 / 640x360 */
@media (orientation:landscape) and (max-height:390px){
  :root{--header-h:39px}
  .sound-button,.help-button{width:34px;height:34px}
  .help-button{right:calc(max(8px,env(safe-area-inset-right)) + 40px)}
  .screen-topbar{padding-right:78px}
  .nav-button{min-height:32px;padding:0 8px;font-size:10px}
  .hud-title,.level-heading h2{font-size:17px}

  .brand-mark,.brand-kicker{display:none}
  .game-title{font-size:clamp(30px,10vh,38px)}
  .desc{font-size:10px}
  .primary-cta{min-height:34px;margin-top:6px;font-size:13px}

  .level-grid{
    width:min(680px,89vw,calc((var(--viewport-h) - 76px) * 2.58));
    gap:3px;
  }
  .level-card{border-radius:6px!important}
  .level-number{font-size:7px}
  .level-state{width:16px;height:16px;font-size:6.5px}
  .reset-button{min-height:25px;font-size:8px}

  .puzzle-layout{
    grid-template-columns:minmax(0,1fr) clamp(98px,18vw,120px);
    gap:6px;
  }
  .board{width:min(calc(var(--viewport-h) - var(--header-h) - 16px),calc(100vw - 165px),390px)}
  .target-heading{font-size:8px}
  .preview{width:min(62px,19vh)}
  .restart-button{min-height:26px;font-size:8px}
  .reward-button{min-height:27px;font-size:7.4px;padding:3px 6px}
}

/* ---------- completion + dialogs fit safely everywhere ---------- */
.completion-overlay,.overlay,.modal{
  padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left));
}
.completion-content{max-width:min(92vw,680px);max-height:92vh}
.completion-title{font-size:clamp(28px,6vmin,56px)}
.completion-actions{gap:clamp(7px,1.4vmin,11px);margin-top:clamp(12px,2.4vmin,22px)}
.complete-button{min-height:clamp(38px,5.2vmin,46px);padding:0 clamp(13px,2vmin,20px);font-size:clamp(11px,1.7vmin,14px)}

@media (orientation:portrait) and (max-width:380px){
  .completion-actions{width:min(300px,92vw)}
  .complete-button{flex:1 1 auto;min-width:82px;padding:0 10px}
}

/* avoid hover motion on touch devices */
@media (hover:none){
  .sound-button:hover,.help-button:hover,.nav-button:hover,.reset-button:hover,
  .restart-button:hover,.reward-button:hover,.primary-cta:hover,.level-card:hover:not(.locked),
  .complete-button:hover{transform:none;filter:none}
}

/* Keep portrait puzzle + controls as one centered group instead of separating them vertically. */
@media (orientation:portrait){
  .puzzle-layout{
    grid-template-rows:auto auto;
    align-content:center;
  }
  .board-zone{align-self:center}
}

/* Portrait gameplay sits near the top with a deliberate breathing gap; controls follow directly below. */
@media (orientation:portrait){
  .puzzle-layout{
    align-content:start;
    padding-top:clamp(20px,8vh,68px);
  }
}
@media (orientation:portrait) and (max-height:680px){
  .puzzle-layout{padding-top:clamp(12px,5vh,28px)}
}

/* =========================================================
   V7 BALANCED DEVICE FIT + TOUCH PERFORMANCE
   Final overrides for consistent sizing on phones/tablets/PC.
   ========================================================= */
:root{
  --ui-control: clamp(42px, 4.6vmin, 48px);
  --ui-header: clamp(50px, 5.8vmin, 58px);
  --ui-gap: clamp(8px, 1.3vmin, 14px);
}

/* Make the real visible viewport authoritative. */
#app{
  height:var(--viewport-h,100dvh);
  max-height:var(--viewport-h,100dvh);
}

/* Consistent control scale. */
.sound-button,.help-button{
  width:var(--ui-control);
  height:var(--ui-control);
  font-size:clamp(18px,2.3vmin,21px);
}
.help-button{right:calc(var(--safe-right) + var(--ui-control) + 8px)}
.screen-topbar{
  flex:0 0 var(--ui-header);
  height:var(--ui-header);
  min-height:var(--ui-header);
  padding-right:calc((var(--ui-control) * 2) + 24px);
}
.nav-button{
  min-height:clamp(40px,4.5vmin,46px);
  padding:0 clamp(12px,1.5vmin,17px);
  font-size:clamp(12px,1.45vmin,15px);
}
.hud-title{font-size:clamp(22px,3vmin,31px)}
.level-heading h2{font-size:clamp(23px,3.1vmin,33px)}

/* Level cards should stay readable instead of becoming tiny. */
.level-grid{
  width:min(880px,92vw);
  gap:clamp(7px,1.05vmin,11px);
}
.level-card{aspect-ratio:1.48/1}
.level-number{font-size:clamp(10px,1.45vmin,14px)}
.level-state{
  width:clamp(21px,2.8vmin,27px);
  height:clamp(21px,2.8vmin,27px);
}

/* Puzzle cluster: board + controls are centered together. */
.puzzle-layout{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:var(--ui-gap) clamp(10px,2vw,24px) max(6px,var(--safe-bottom));
  overflow:hidden;
}
.board-zone{justify-content:center}
.board{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  contain:layout paint style;
}
.tile{
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  margin:0;
  outline:0;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform 95ms cubic-bezier(.2,.78,.3,1), filter 70ms ease;
}
.tile.is-pressed{filter:brightness(.92)}

.target-zone{gap:clamp(8px,1.2vmin,12px)}
.target-heading{font-size:clamp(11px,1.4vmin,14px)}
.preview{width:clamp(76px,12vmin,138px)}
.restart-button{
  min-height:clamp(40px,4.5vmin,44px);
  padding:0 clamp(13px,1.5vmin,17px);
  font-size:clamp(11px,1.35vmin,13px);
}
.reward-button{
  width:min(190px,100%);
  min-height:clamp(42px,5vmin,48px);
  padding:7px 14px;
  font-size:clamp(10px,1.25vmin,12px);
}

/* Desktop / tablet landscape: size from usable height, then center the whole cluster. */
@media (orientation:landscape){
  .puzzle-layout{
    grid-template-columns:auto clamp(138px,16vw,190px);
    justify-content:center;
    align-content:center;
    gap:clamp(14px,2.2vw,32px);
  }
  .board{
    width:min(600px, calc(var(--viewport-h) - var(--ui-header) - 34px), 58vw);
  }
  .target-zone{width:clamp(138px,16vw,190px)}
}

/* Large desktops: avoid a comically huge puzzle. */
@media (orientation:landscape) and (min-width:1200px) and (min-height:700px){
  .board{width:min(590px,calc(var(--viewport-h) - var(--ui-header) - 42px),52vw)}
  .preview{width:132px}
}

/* Tablet portrait: keep puzzle substantial but leave room for controls. */
@media (orientation:portrait) and (min-width:600px){
  .puzzle-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
    align-content:center;
    gap:clamp(12px,1.8vh,18px);
    padding-top:clamp(12px,2vh,22px);
  }
  .board-zone{grid-row:1;width:100%;justify-content:center}
  .board{width:min(72vw,620px,calc(var(--viewport-h) - var(--ui-header) - 190px))}
  .target-zone{
    grid-row:2;
    width:auto;
    display:grid;
    grid-template-columns:auto auto auto;
    grid-template-areas:"preview restart reward";
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .target-heading{display:none}
  .target-zone .preview{grid-area:preview;width:68px}
  .target-zone .restart-button{grid-area:restart}
  .target-zone .reward-button{grid-area:reward;width:auto;max-width:205px}
}

/* Phone portrait: balanced, compact, and easy to tap. */
@media (orientation:portrait) and (max-width:599px){
  :root{--ui-header:50px;--ui-control:44px}
  .screen-topbar{
    padding-right:calc((var(--ui-control) * 2) + 20px);
    width:100%;
  }
  .nav-button{min-height:40px;padding:0 12px;font-size:13px}
  .hud-title{font-size:clamp(22px,6vw,27px)}
  .level-heading h2{font-size:clamp(22px,6vw,27px)}

  .puzzle-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
    align-content:center;
    gap:clamp(10px,1.8vh,15px);
    padding:8px 8px max(8px,var(--safe-bottom));
  }
  .board-zone{grid-row:1;width:100%;justify-content:center}
  .board{
    width:min(88vw, 520px, calc(var(--viewport-h) - var(--ui-header) - 172px));
    max-height:none;
  }
  .target-zone{
    grid-row:2;
    width:100%;
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:
      "preview restart"
      "reward reward";
    align-items:center;
    justify-content:center;
    gap:8px 10px;
  }
  .target-heading{display:none}
  .target-zone .preview{grid-area:preview;width:56px}
  .target-zone .restart-button{grid-area:restart;min-height:42px;font-size:12px}
  .target-zone .reward-button{
    grid-area:reward;
    justify-self:center;
    width:auto;
    min-width:188px;
    max-width:min(220px,78vw);
    min-height:43px;
    font-size:11px;
  }

  .level-content{justify-content:center;gap:9px;padding:6px 8px max(7px,var(--safe-bottom))}
  .level-grid{width:min(380px,94vw);grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .level-card{aspect-ratio:1.35/1}
  .reset-button{min-height:40px;font-size:11px}
}

/* Short portrait phones: fit without making the puzzle or controls tiny. */
@media (orientation:portrait) and (max-width:599px) and (max-height:700px){
  :root{--ui-header:46px;--ui-control:40px}
  .nav-button{min-height:36px;font-size:11px}
  .hud-title{font-size:20px}
  .puzzle-layout{gap:6px;padding-top:4px}
  .board{width:min(84vw,calc(var(--viewport-h) - var(--ui-header) - 142px))}
  .target-zone{gap:5px 8px}
  .target-zone .preview{width:46px}
  .target-zone .restart-button{min-height:36px;font-size:10px}
  .target-zone .reward-button{min-height:37px;min-width:166px;font-size:9.5px}
}

/* Phone landscape: preserve usable puzzle size and center the whole game group. */
@media (orientation:landscape) and (max-height:600px){
  :root{--ui-header:44px;--ui-control:40px}
  #app{padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .screen-topbar{
    width:100%;
    padding-right:calc((var(--ui-control) * 2) + 18px);
  }
  .nav-button{min-height:36px;padding:0 11px;font-size:11px}
  .hud-title{font-size:clamp(19px,5.2vh,24px)}
  .level-heading h2{font-size:clamp(19px,5.2vh,24px)}

  .puzzle-layout{
    grid-template-columns:auto clamp(118px,18vw,150px);
    justify-content:center;
    align-content:center;
    gap:clamp(8px,1.8vw,16px);
    padding:4px 8px max(4px,var(--safe-bottom));
  }
  .board{
    width:min(calc(var(--viewport-h) - var(--ui-header) - 20px), 58vw, 470px);
  }
  .target-zone{width:clamp(118px,18vw,150px);gap:6px}
  .target-heading{font-size:10px}
  .preview{width:min(76px,20vh)}
  .restart-button{min-height:34px;padding:0 10px;font-size:10px}
  .reward-button{min-height:36px;width:100%;padding:5px 8px;font-size:9px}

  .level-content{gap:5px;padding:3px 8px max(4px,var(--safe-bottom))}
  .level-grid{
    width:min(720px,86vw);
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
  }
  .level-card{aspect-ratio:1.55/1}
  .level-number{font-size:9px}
  .level-state{width:19px;height:19px;font-size:8px}
  .reset-button{min-height:34px;font-size:9px}
}

/* Very short landscape screens: keep controls readable, not microscopic. */
@media (orientation:landscape) and (max-height:390px){
  :root{--ui-header:40px;--ui-control:36px}
  .nav-button{min-height:32px;padding:0 9px;font-size:10px}
  .hud-title{font-size:18px}
  .puzzle-layout{grid-template-columns:auto 112px;gap:7px}
  .board{width:min(calc(var(--viewport-h) - var(--ui-header) - 14px),60vw,390px)}
  .target-zone{width:112px;gap:4px}
  .target-heading{font-size:8.5px}
  .preview{width:min(62px,19vh)}
  .restart-button{min-height:30px;font-size:8.5px}
  .reward-button{min-height:31px;font-size:7.8px;padding:4px 6px}
  .level-grid{width:min(620px,84vw);gap:4px}
  .reset-button{min-height:30px}
}

/* Mobile performance: avoid expensive backdrop blur on every control. */
@media (hover:none), (pointer:coarse){
  .sound-button,.help-button,.nav-button,.reset-button,.restart-button,.reward-button,
  .control-hint,.complete-button{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .sound-button,.help-button,.nav-button,.reset-button,.restart-button{background:rgba(18,48,31,.92)}
  #game-background-image{filter:blur(6px) saturate(1.02) brightness(.78)!important;transform:scale(1.035)}
  .tile{transition-duration:85ms}
}