*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-tap-highlight-color:transparent}
:root{
  --cream:#f7f0df;
  --cream2:#fff9eb;
  --berry:#a64f79;
  --muted:#b7aea0;
  --slate:#596c7d;
  --slate2:#4e6171;
  --wall:#f5efdf;
  --yellow:#f2b635;
}
html,body{width:100%;min-height:100%}
body{
  min-height:100vh;min-height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.82) 0 18%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,var(--cream2),var(--cream));
  color:#3f4144;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
          max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.hidden{display:none!important}
button{border:0;font:inherit;cursor:pointer;transition:transform .13s ease,filter .13s ease,box-shadow .13s ease,opacity .13s ease}
button:active{transform:scale(.95)}
button:disabled{opacity:.38;cursor:default}

.game-card{
  width:min(560px,92vw);
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.menu-screen{
  width:100%;
  display:grid;
  justify-items:center;
  gap:0;
  padding:0;
  transform:translateY(-2.4vh);
}
.game-title{
  text-align:center;
  color:var(--berry);
  font-size:clamp(38px,7vw,52px);
  font-weight:950;
  letter-spacing:-1.55px;
  margin:0 0 24px;
  text-shadow:0 4px 12px rgba(166,79,121,.12);
}
.difficulty-list{
  display:grid;
  gap:14px;
  width:min(500px,88vw);
}
.difficulty-btn{
  --accent:var(--berry);
  --pill-bg:#eee7d9;
  width:100%;
  min-height:66px;
  padding:15px 16px 15px 24px;
  border-radius:19px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(126,112,89,.06);
  color:#41403d;
  text-align:left;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px 10px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(90,75,48,.055), 0 1px 0 rgba(255,255,255,.7) inset;
}
.difficulty-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:5px;
  border-radius:0 999px 999px 0;
  background:var(--accent);
}
.difficulty-btn:hover{transform:translateY(-2px);filter:brightness(1.01);box-shadow:0 12px 24px rgba(90,75,48,.07), 0 1px 0 rgba(255,255,255,.75) inset}
.diff-name{
  font-size:clamp(16px,2.9vw,18px);
  font-weight:950;
  color:var(--accent);
  letter-spacing:-.15px;
}
.continue-pill{
  padding:7px 12px;
  border-radius:999px;
  background:var(--pill-bg);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.15px;
  min-width:72px;
  text-align:center;
}
.difficulty-btn.easy{
  --accent:#4fb9b5;
  --pill-bg:#e8f8f6;
}
.difficulty-btn.medium{
  --accent:#f0a538;
  --pill-bg:#fff3df;
}
.difficulty-btn.hard{
  --accent:#e26b95;
  --pill-bg:#ffe8ef;
}
@media(max-width:680px){
  .game-card{width:min(94vw,520px)}
  .menu-screen{transform:translateY(-1.4vh)}
  .game-title{font-size:clamp(34px,10.2vw,45px);margin:0 0 20px}
  .difficulty-list{width:min(92vw,500px);gap:13px}
  .difficulty-btn{min-height:62px;padding:14px 14px 14px 22px;border-radius:17px}
  .difficulty-btn::before{top:12px;bottom:12px;width:5px}
  .diff-name{font-size:16px}
  .continue-pill{padding:7px 11px;font-size:10px;min-width:66px}
}


.game-card:has(.game-screen:not(.hidden)){
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
}
.game-screen{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  justify-items:stretch;
  padding:
    max(clamp(8px,1.8vmin,22px),env(safe-area-inset-top))
    max(clamp(8px,2.4vmin,30px),env(safe-area-inset-right))
    max(clamp(8px,1.6vmin,20px),env(safe-area-inset-bottom))
    max(clamp(8px,2.4vmin,30px),env(safe-area-inset-left));
}
.play-topbar{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(6px,1.4vmin,14px);
}
.level-stack{
  justify-self:center;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(2px,.45vmin,5px);
}
.mode-badge{
  min-width:clamp(92px,13vw,132px);
  padding:clamp(4px,.7vmin,6px) clamp(12px,2vmin,18px);
  border-radius:999px;
  background:#b9b0a5;
  color:white;
  text-align:center;
  font-size:clamp(9px,1.15vmin,12px);
  line-height:1;
  font-weight:950;
  letter-spacing:.6px;
}
.level-badge{
  color:var(--berry);
  background:transparent;
  padding:0;
  border-radius:0;
  font-size:clamp(22px,4.2vmin,38px);
  font-weight:950;
  line-height:1.02;
  letter-spacing:-.9px;
  text-transform:capitalize;
  white-space:nowrap;
}
.header-actions{
  display:flex;
  gap:clamp(5px,.9vmin,9px);
  justify-self:end;
}
.menu-btn,.undo-btn{
  width:clamp(38px,5.4vmin,48px);
  height:clamp(38px,5.4vmin,48px);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 20px rgba(99,79,48,.09);
}
.menu-btn{
  color:#c56f98;
  font-family:Georgia,serif;
  font-size:clamp(30px,4.4vmin,38px);
  font-weight:900;
  line-height:.8;
  padding-bottom:4px;
}
.undo-btn{color:#9b948a;font-size:clamp(18px,2.6vmin,22px);font-weight:900}
.undo-btn.danger{color:#d56262;animation:undoPulse .8s ease-in-out infinite alternate}
@keyframes undoPulse{to{box-shadow:0 8px 24px rgba(213,98,98,.24)}}
.hint-btn{
  height:clamp(38px,5.4vmin,48px);
  min-width:clamp(74px,11vmin,104px);
  padding:0 clamp(10px,1.8vmin,17px);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,.8vmin,7px);
  background:linear-gradient(180deg,#f7c34e,#ecac28);
  color:white;
  font-size:clamp(9px,1.25vmin,12px);
  font-weight:950;
  letter-spacing:.6px;
  box-shadow:0 6px 0 rgba(196,137,26,.20),0 10px 22px rgba(194,139,33,.14);
}
.hint-icon{font-size:clamp(13px,1.8vmin,17px);transform:translateY(-1px)}

.status{
  width:100%;
  min-height:clamp(14px,2.4vmin,22px);
  text-align:center;
  color:#a59b8d;
  font-size:clamp(8px,1.15vmin,11px);
  font-weight:850;
  letter-spacing:.3px;
}
.status.bad{color:#d46969}.status.hinting{color:#d79d22}.status.complete{color:#68a653}

.board-stage{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(1px,.8vmin,8px) 0 clamp(2px,1vmin,10px);
}
.canvas-stack{
  position:relative;
  width:1px;
  height:1px;
  max-width:100%;
  max-height:100%;
  flex:none;
}
.canvas-stack canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
#gameCanvas{touch-action:none}
#fxCanvas{pointer-events:none}
.controls-hint{
  width:100%;
  text-align:center;
  color:#aea396;
  font-size:clamp(7px,.95vmin,9px);
  font-weight:750;
  letter-spacing:.45px;
  opacity:.70;
  margin-top:1px;
  white-space:nowrap;
}

/* The board itself is sized continuously by ResizeObserver in game.js.
   These rules only simplify controls when space becomes tight. */
@media(max-width:680px){
  .controls-hint{display:none}
}
@media(max-height:560px){
  .controls-hint{display:none}
  .game-screen{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}
}


/* ---------- V31 strong text-only level-complete reward ---------- */
.success-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  z-index:7;
}
.success-overlay.show{
  visibility:visible;
  animation:successOverlayIn 1.02s ease both;
}
.success-title{
  color:#9F3F70;
  font-size:clamp(25px,3vw,34px);
  line-height:1;
  font-weight:1000;
  letter-spacing:1.8px;
  white-space:nowrap;
  text-shadow:
    0 3px 0 rgba(255,255,255,.95),
    0 7px 18px rgba(126,63,96,.20),
    0 0 24px rgba(255,255,255,.72);
}
.success-overlay.show .success-title{
  animation:successTextPop .78s cubic-bezier(.15,1.12,.24,1) both;
}
@keyframes successOverlayIn{
  0%{opacity:0}
  10%{opacity:1}
  80%{opacity:1}
  100%{opacity:0}
}
@keyframes successTextPop{
  0%{transform:scale(.68);opacity:0;filter:blur(2px)}
  34%{transform:scale(1.13);opacity:1;filter:blur(0)}
  54%{transform:scale(.97)}
  72%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
@media(max-width:680px){
  .success-title{font-size:24px;letter-spacing:1.2px}
}

/* ---------- Famobi mobile-landscape adaptation ----------
   Portrait and desktop layouts are intentionally left unchanged. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  /* Menu: use the available width instead of keeping the portrait stack. */
  .game-card{
    width:min(96vw,960px);
  }
  .menu-screen{
    transform:none;
    padding:clamp(8px,2vh,16px) 0;
  }
  .game-title{
    font-size:clamp(28px,7vh,42px);
    margin:0 0 clamp(10px,2.6vh,18px);
    letter-spacing:-1.1px;
  }
  .difficulty-list{
    width:min(94vw,900px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(10px,1.8vw,18px);
  }
  .difficulty-btn{
    min-height:clamp(76px,21vh,112px);
    padding:clamp(12px,3vh,18px) clamp(12px,1.7vw,20px);
    border-radius:18px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
    text-align:center;
    gap:8px;
  }
  .difficulty-btn::before{
    left:0;
    right:0;
    top:0;
    bottom:auto;
    width:auto;
    height:5px;
    border-radius:18px 18px 999px 999px;
  }
  .diff-name{
    font-size:clamp(15px,4vh,20px);
  }
  .continue-pill{
    min-width:76px;
    padding:6px 11px;
    font-size:clamp(9px,2.5vh,11px);
  }

  /* Gameplay: let the board use nearly the full short axis. The controls sit
     above it rather than consuming a dedicated row of vertical space. */
  .game-screen{
    display:block;
    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));
  }
  .play-topbar{
    position:absolute;
    z-index:10;
    top:max(7px,env(safe-area-inset-top));
    left:max(9px,env(safe-area-inset-left));
    right:max(9px,env(safe-area-inset-right));
    width:auto;
    align-items:start;
    pointer-events:none;
  }
  .play-topbar button,
  .level-stack{
    pointer-events:auto;
  }
  .menu-btn,.undo-btn{
    width:clamp(40px,10vh,52px);
    height:clamp(40px,10vh,52px);
  }
  .hint-btn{
    height:clamp(40px,10vh,52px);
    min-width:clamp(84px,19vh,112px);
  }
  .mode-badge{
    min-width:clamp(88px,19vh,120px);
    font-size:clamp(9px,2.2vh,12px);
  }
  .level-badge{
    font-size:clamp(23px,7.4vh,36px);
  }
  .status{
    position:absolute;
    z-index:9;
    left:50%;
    top:clamp(62px,15vh,82px);
    width:min(60vw,420px);
    transform:translateX(-50%);
    min-height:0;
    font-size:clamp(8px,2vh,10px);
    pointer-events:none;
  }
  .board-stage{
    position:absolute;
    /* Keep a dedicated clear zone below the header so the board can never
       collide with the level label on short mobile-landscape viewports. */
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    top:clamp(72px,19vh,94px);
    bottom:max(5px,env(safe-area-inset-bottom));
    width:auto;
    height:auto;
    padding:0;
    place-items:center;
  }
  .controls-hint{display:none}
  .success-title{
    font-size:clamp(22px,6vh,31px);
  }
}

/* Extra-short browser viewports (mobile browser chrome visible). */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 1000px) {
  .play-topbar{top:max(4px,env(safe-area-inset-top));}
  .menu-btn,.undo-btn{width:38px;height:38px;}
  .hint-btn{height:38px;min-width:82px;}
  .mode-badge{min-width:84px;padding:3px 11px;font-size:9px;}
  .level-badge{font-size:23px;}
  .status{top:52px;}
  .board-stage{top:62px;bottom:max(3px,env(safe-area-inset-bottom));}
}