@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{--ink:#08080a;--paper:#e9e5d8;--blue:#5369a5;--darkblue:#263864;--red:#be2d35;--gold:#e9a12a}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}
body{display:grid;place-items:center;font-family:'Press Start 2P',monospace;image-rendering:pixelated;background:#090b12;color:#fff;background:radial-gradient(circle at 50% 40%,#263258 0,#11162a 40%,#06070b 100%)}
.shell{position:relative;width:min(96vw,1050px);height:min(96vh,790px);aspect-ratio:4/3;border:10px solid #10162e;box-shadow:0 0 0 5px #7185bb,0 24px 70px #000;background:#111;display:grid;place-items:center}

/* stone-bevel panel — matches game.html stoneRect() style */
.stone-panel{background:#8e99b9;border:3px solid #1b274b;box-shadow:inset 0 6px 0 -3px #c8cbd4,inset -7px 0 0 -3px #35446f,inset 0 -7px 0 -3px #35446f,inset 6px 0 0 -3px #c8cbd4}
.stone-panel .inner{background:#0d1124;margin:7px;padding:30px 48px 26px;text-align:center;min-width:400px}
.stone-panel .inner .title{color:#f0d65c;font-size:18px;margin-bottom:28px;letter-spacing:2px;transform:none;background:none;-webkit-text-fill-color:#f0d65c;text-shadow:none}
.stone-panel .inner .hint{color:#7a88b0;font-size:9px;margin-top:24px;letter-spacing:1px;text-shadow:1px 1px #000}
.stone-panel .inner .hint .a{font-family:Arial,sans-serif}

/* level select grid */
#lvlGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:14px 0;justify-items:center;align-items:center}
.lvl-item{position:relative;width:64px;padding:14px 0;font-size:14px;color:#8892b0;border:2px solid transparent;text-align:center;cursor:pointer;font-family:'Press Start 2P',monospace;transition:color .1s,background .1s,border-color .1s;background:transparent}
.lvl-item:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04)}
.lvl-item.active{color:#f4f0dd;background:#1b2850}
.lvl-item.active:hover{border-color:inherit}
.lvl-item.t0-b.active{border-color:#4fc561;box-shadow:0 0 12px rgba(79,197,97,.3)}
.lvl-item.t1-b.active{border-color:#f0d65c;box-shadow:0 0 12px rgba(240,214,92,.3)}
.lvl-item.t2-b.active{border-color:#e88b2c;box-shadow:0 0 12px rgba(232,139,44,.3)}
.lvl-item.t3-b.active{border-color:#d74a4c;box-shadow:0 0 12px rgba(215,74,76,.3)}
.lvl-item.t0-b{border-color:rgba(79,197,97,.2)}
.lvl-item.t1-b{border-color:rgba(240,214,92,.2)}
.lvl-item.t2-b{border-color:rgba(232,139,44,.2)}
.lvl-item.t3-b{border-color:rgba(215,74,76,.2)}

/* landing page */
.menu-box{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.title{display:inline-block;font-size:60px;letter-spacing:14px;line-height:1.2;margin-bottom:16px;transform:skew(-6deg);background:linear-gradient(to bottom,#4fc561 0,#4fc561 18%,#f0d65c 18%,#f0d65c 36%,#d74a4c 36%,#d74a4c 54%,#405ccc 54%,#405ccc 72%,#56d6df 72%,#56d6df 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(8px 8px 0 #050507) drop-shadow(4px 4px 0 #10162e)}
.title-bar{display:flex;gap:6px;margin-bottom:28px;height:8px}
.title-bar span{width:20px;height:8px;border:1px solid rgba(0,0,0,.5)}
.title-bar span:nth-child(1){background:#4fc561}
.title-bar span:nth-child(2){background:#f0d65c}
.title-bar span:nth-child(3){background:#d74a4c}
.title-bar span:nth-child(4){background:#405ccc}
.title-bar span:nth-child(5){background:#56d6df}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.blink{animation:blink 1s step-end infinite;cursor:pointer;font-size:12px;color:#f0d65c;text-shadow:3px 3px #000;margin-top:12px}
.button-start{background:#1b2850;border:3px solid #f0d65c;color:#f0d65c;font-family:'Press Start 2P',monospace;font-size:14px;padding:15px 30px;cursor:pointer;letter-spacing:2px;transition:background .1s}
.button-start:hover,.button-start:focus{background:#263864;outline:none}
.credit{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#5369a5;font-size:8px;letter-spacing:1px;pointer-events:none}
#tetroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* =====================================================
   MULTI-BREAKPOINT RESPONSIVE SYSTEM
   Breakpoints: 400px (small phone), 600px (phone→tablet),
   768px (tablet portrait), 1024px (tablet landscape→desktop)
   iOS: uses dvh + env(safe-area-inset-*) throughout
   ===================================================== */

/* --- Small phones (<400px): iPhone SE class --- */
@media(max-width:399px){
  .shell{width:100vw;height:100dvh;aspect-ratio:unset;border-width:3px}
  .stone-panel .inner{min-width:unset;padding:12px 10px 10px;margin:4px}
  .stone-panel .inner .title{font-size:11px;margin-bottom:12px;letter-spacing:1px}
  .stone-panel .inner .hint{font-size:6px;margin-top:10px}
  .title{font-size:clamp(20px,9vw,28px);letter-spacing:clamp(4px,1.5vw,6px);transform:skew(-3deg)}
  .blink{font-size:clamp(7px,3vw,9px);margin-top:8px}
  #lvlGrid{gap:clamp(4px,1.2vw,6px);padding:8px 0}
  .lvl-item{width:clamp(32px,10vw,40px);padding:clamp(6px,1.8vw,8px) 0;font-size:clamp(8px,2.5vw,10px)}
  #selInfo{gap:4px;margin-top:8px;flex-wrap:wrap}
  #selInfo .diffLabel{font-size:clamp(6px,2vw,8px)}
  #selInfo .diffMeter{height:10px}
  #selInfo .diffMeter span{width:clamp(10px,3vw,14px);height:clamp(6px,2vw,8px)}
  .button-start{font-size:clamp(8px,2.5vw,10px);padding:clamp(8px,2vw,10px) clamp(14px,4vw,18px)}
  .credit{font-size:6px;bottom:6px}
  .blink{margin-top:6px}
}

/* --- Standard phones (400-600px): iPhone XS/12/13, most Android --- */
@media(min-width:400px)and(max-width:599px){
  .shell{width:100vw;height:100dvh;aspect-ratio:unset;border-width:4px;padding-bottom:env(safe-area-inset-bottom,0);padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
  .stone-panel .inner{min-width:unset;padding:16px 18px 14px;margin:5px}
  .stone-panel .inner .title{font-size:13px;margin-bottom:16px;letter-spacing:1px}
  .stone-panel .inner .hint{font-size:7px;margin-top:14px}
  .title{font-size:clamp(26px,10vw,38px);letter-spacing:clamp(5px,2vw,8px)}
  .blink{font-size:clamp(9px,3.5vw,11px)}
  #lvlGrid{gap:clamp(5px,1.5vw,8px);padding:10px 0}
  .lvl-item{width:clamp(38px,11vw,48px);padding:clamp(8px,2.2vw,10px) 0;font-size:clamp(9px,2.8vw,11px)}
  #selInfo{gap:6px;margin-top:10px;flex-wrap:wrap}
  #selInfo .diffLabel{font-size:clamp(7px,2.2vw,9px)}
  #selInfo .diffMeter{height:12px}
  #selInfo .diffMeter span{width:clamp(12px,3.5vw,16px);height:clamp(7px,2.2vw,9px)}
  .button-start{font-size:clamp(9px,2.8vw,11px);padding:clamp(9px,2.3vw,12px) clamp(16px,4.5vw,22px)}
}

/* --- Large phones / small tablets in portrait (600-768px) --- */
@media(min-width:600px)and(max-width:767px){
  .shell{width:100vw;height:100dvh;aspect-ratio:unset;border-width:5px;padding-bottom:env(safe-area-inset-bottom,0)}
  .stone-panel .inner{min-width:unset;padding:22px 30px 20px;margin:6px}
  .stone-panel .inner .title{font-size:15px;margin-bottom:20px}
  .stone-panel .inner .hint{font-size:8px;margin-top:18px}
  .title{font-size:clamp(32px,8vw,44px);letter-spacing:clamp(7px,2.5vw,10px)}
  .blink{font-size:clamp(10px,2.5vw,12px)}
  #lvlGrid{gap:clamp(8px,2vw,12px)}
  .lvl-item{width:clamp(46px,10vw,56px);padding:clamp(10px,2.5vw,14px) 0;font-size:clamp(10px,2.5vw,13px)}
  #selInfo{gap:10px;margin-top:14px}
  #selInfo .diffLabel{font-size:clamp(9px,2vw,11px)}
  #selInfo .diffMeter span{width:clamp(16px,3.5vw,20px);height:clamp(9px,2vw,11px)}
  .button-start{font-size:clamp(11px,2.5vw,14px);padding:clamp(11px,2.5vw,15px) clamp(20px,4vw,28px)}
}

/* --- Phone landscape (any width, when height is constrained) --- */
@media(orientation:landscape)and(max-height:500px){
  .shell{width:100vw;height:100dvh;aspect-ratio:unset;border-width:3px;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
  .stone-panel .inner{min-width:unset;padding:8px 14px 8px;margin:4px}
  .stone-panel .inner .title{font-size:10px;margin-bottom:8px;letter-spacing:1px}
  .stone-panel .inner .hint{font-size:6px;margin-top:6px}
  .title{font-size:clamp(16px,5vw,28px);letter-spacing:clamp(3px,1.5vw,6px);transform:skew(-3deg)}
  .blink{font-size:clamp(7px,2vw,10px);margin-top:4px}
  #lvlGrid{gap:clamp(3px,1vw,6px);padding:4px 0}
  .lvl-item{width:clamp(28px,7vw,40px);padding:clamp(4px,1.2vw,8px) 0;font-size:clamp(7px,2vw,10px)}
  #selInfo{gap:4px;margin-top:4px;flex-wrap:wrap}
  #selInfo .diffLabel{font-size:clamp(6px,1.5vw,8px)}
  #selInfo .diffMeter{height:8px}
  #selInfo .diffMeter span{width:clamp(8px,2vw,12px);height:clamp(5px,1.5vw,7px)}
  .button-start{font-size:clamp(8px,2vw,11px);padding:clamp(6px,1.5vw,10px) clamp(10px,3vw,18px)}
  .credit{font-size:5px;bottom:4px}
}

/* --- Tablet portrait (768-1024px) --- */
@media(min-width:768px)and(max-width:1024px)and(orientation:portrait){
  .shell{width:min(94vw,1000px);height:min(92dvh,980px);aspect-ratio:4/3;border-width:7px}
  .stone-panel .inner{min-width:320px;padding:24px 36px 22px;margin:6px}
  .stone-panel .inner .title{font-size:16px;margin-bottom:24px}
  .title{font-size:clamp(40px,8vw,52px);letter-spacing:clamp(10px,2.5vw,14px)}
  .lvl-item{width:56px;padding:12px 0;font-size:13px}
}

/* --- Small desktop / tablet landscape (768-1024px, wide) --- */
@media(min-width:768px)and(max-width:1024px)and(orientation:landscape){
  .shell{width:min(94vw,1000px);height:min(92dvh,740px);aspect-ratio:4/3;border-width:8px}
}

/* --- Full desktop (>1024px) --- uses the base CSS above unchanged */