*{box-sizing:border-box;margin:0;padding:0;user-select:none}
:root{--panel:#151b25;--line:#2d3849;--text:#fff;--muted:#9fb1c7;--accent:#00ffd5;--accent2:#3aa8ff;--danger:#ef4444;--gold:#ffd166}
body{min-height:100vh;background:radial-gradient(circle at top,#263d5c,#090b0f 68%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;overflow-y:auto}
.screen{display:none;min-height:100vh;width:100%;padding:16px}.screen.active{display:flex}
#start-screen,#result-screen,#ranking-screen{align-items:center;justify-content:center}
.panel{width:min(560px,94vw);background:rgba(19,24,34,.96);border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.title-panel{text-align:center}.badge{display:inline-block;font-size:.75rem;font-weight:900;color:#061015;background:linear-gradient(135deg,var(--gold),#ff9f1c);padding:6px 10px;border-radius:999px;margin-bottom:12px}
h1{font-size:2.1rem;line-height:1.05;margin-bottom:8px}h1 span{color:var(--accent)}.subtitle{color:var(--muted);margin-bottom:20px}
.input-label{display:block;text-align:left;font-weight:800;margin-bottom:6px;color:var(--accent)}
#player-name{width:100%;padding:14px;border-radius:14px;border:2px solid #334155;background:#0e141d;color:#fff;font-size:1.1rem;margin-bottom:16px}
.mode-buttons{display:flex;flex-direction:column;gap:12px}.mode-btn,.sub-btn{border:0;border-radius:16px;padding:15px 16px;cursor:pointer;color:#061015;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:900;box-shadow:0 10px 24px rgba(0,255,213,.18)}
.mode-btn strong{display:block;font-size:1.05rem}.mode-btn span{display:block;font-size:.8rem;opacity:.76;margin-top:4px}.sub-btn{margin-top:16px;background:#2a3444;color:#fff;box-shadow:none}.single{width:100%;margin-top:18px}
.mini-rules{margin-top:16px;text-align:left;background:#0d131b;border-radius:14px;padding:12px;color:#d4deeb;font-size:.84rem}.mini-rules h2{font-size:1rem;color:#fff;margin-bottom:4px}

#game-screen{flex-direction:column;align-items:center;padding:0}
#hud{width:100%;display:grid;grid-template-columns:repeat(4,1fr);background:#121821;border-bottom:2px solid var(--line)}
#hud div{text-align:center;padding:8px 3px;border-right:1px solid #293241}#hud small{display:block;color:#8da0b9;font-size:.65rem}#hud strong{display:block;color:#fff;font-size:1.02rem;margin-top:2px}
#subhud{width:100%;display:grid;grid-template-columns:repeat(3,1fr);background:#1d2533;border-bottom:1px solid #303b4d;font-size:.76rem;color:#b8c5d6;text-align:center}
#subhud div{padding:5px 2px;border-right:1px solid #303b4d}#subhud strong{color:var(--accent)}#fever-box.on{background:linear-gradient(90deg,#ff3860,#ff9f1c);color:#fff}#fever-box.on strong{color:#fff}
#message{width:100%;text-align:center;background:#202939;color:var(--accent);padding:7px 6px;min-height:32px;font-size:.86rem}

#cube-wrap{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#25364d,#0d1118)}
#cube-net{display:grid;grid-template-columns:repeat(4,74px);grid-template-rows:repeat(3,86px);gap:6px;align-items:center;justify-content:center}
.face-slot{display:flex;flex-direction:column;align-items:center;gap:3px}.face-name{font-size:.72rem;font-weight:900;color:#93c5fd}.face-name.front{color:var(--accent)}
.face{width:74px;height:74px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:3px;background:#05070a;border-radius:10px;border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}
.main-face{transform:scale(1.12);border:2px solid #fff}.cell{border-radius:5px;box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.3)}
.face.complete{box-shadow:0 0 18px var(--accent)}
.face.anim-right .cell{animation:slideRight .1s linear}.face.anim-left .cell{animation:slideLeft .1s linear}.face.anim-up .cell{animation:slideUp .1s linear}.face.anim-down .cell{animation:slideDown .1s linear}
@keyframes slideRight{0%{transform:translateX(-18px);opacity:.7}100%{transform:translateX(0);opacity:1}}
@keyframes slideLeft{0%{transform:translateX(18px);opacity:.7}100%{transform:translateX(0);opacity:1}}
@keyframes slideUp{0%{transform:translateY(18px);opacity:.7}100%{transform:translateY(0);opacity:1}}
@keyframes slideDown{0%{transform:translateY(-18px);opacity:.7}100%{transform:translateY(0);opacity:1}}
#effect-layer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;font-size:2rem;font-weight:1000;color:var(--gold);text-shadow:0 4px 20px rgba(0,0,0,.8)}
.effect-pop{animation:pop .7s forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.1)}}

#controller{margin-top:auto;width:100%;max-width:590px;padding:10px 10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(10,14,20,.72)}
.side-col{display:flex;flex-direction:column;gap:12px;width:68px}.side-btn{height:68px;border:2px solid #3c4656;border-radius:14px;background:#252c38;color:#fff;font-weight:900;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.side-btn.red{background:#9b2c28;border-color:#ef4444}.center-pad{display:flex;flex-direction:column;align-items:center;gap:10px}
#pad-grid{display:grid;grid-template-columns:repeat(3,68px);grid-template-rows:repeat(3,68px);gap:9px}
.pad,.slice{border:2px solid #505b6b;border-radius:14px;background:linear-gradient(135deg,#3a4250,#202630);color:#fff;font-size:1.25rem;font-weight:1000;touch-action:manipulation;position:relative;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.pad small,.slice small{display:block;font-size:.58rem;color:var(--accent);margin-top:2px}.pad.center{background:linear-gradient(135deg,#6c3cff,#312064)}
.pad.pressing,.slice.pressing{outline:3px solid var(--accent);filter:brightness(1.2);transform:translateY(2px)}
#slice-row{display:grid;grid-template-columns:repeat(3,68px);gap:9px}.slice{height:52px;background:linear-gradient(135deg,#d46b08,#78350f);font-size:1rem}

#flick-guide{position:fixed;left:0;top:0;width:132px;height:132px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .08s,transform .08s;z-index:9999}
#flick-guide.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.guide-arrow{position:absolute;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,255,213,.95);color:#061015;font-weight:1000;font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.guide-up{left:45px;top:0}.guide-right{right:0;top:45px}.guide-down{left:45px;bottom:0}.guide-left{left:0;top:45px}
.guide-center{position:absolute;left:42px;top:48px;width:48px;height:36px;border-radius:999px;background:rgba(255,255,255,.95);color:#111;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}
.guide-arrow.active{background:var(--gold);transform:scale(1.18)}

.result-panel{text-align:center}#rank-title{font-size:2rem;font-weight:1000;color:var(--gold);margin:8px 0 12px}
#result-summary{display:grid;gap:8px;margin:14px 0;text-align:left;background:#101722;padding:14px;border-radius:14px}.passcode-box{background:#07110f;border:1px dashed var(--accent);border-radius:14px;padding:12px}
#passcode{display:block;margin-top:8px;color:var(--accent);word-break:break-all;font-size:.96rem}
.tab-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.rank-tab{border:0;border-radius:10px;background:#263244;color:#fff;padding:10px;font-weight:900}.rank-tab.active{background:var(--accent);color:#061015}
#ranking-list{margin-top:12px;display:grid;gap:8px;max-height:55vh;overflow:auto}.rank-item{background:#101722;border-radius:12px;padding:10px;font-size:.88rem}.rank-item strong{color:var(--accent)}
@media(max-height:720px){#cube-net{grid-template-columns:repeat(4,60px);grid-template-rows:repeat(3,70px)}.face{width:60px;height:60px}#pad-grid{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px)}#slice-row{grid-template-columns:repeat(3,58px)}.side-btn{height:58px}}


/* READY / COUNTDOWN / SHUFFLE 演出 */
#ready-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.58);
  z-index:8000;
}
#ready-overlay.visible{display:flex}
.ready-card{
  width:min(360px,90vw);
  background:rgba(15,22,32,.96);
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  padding:28px 20px;
  text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
#ready-title{
  font-size:2.2rem;
  font-weight:1000;
  color:var(--gold);
  margin-bottom:18px;
}
#ready-button{
  border:0;
  border-radius:18px;
  padding:16px 32px;
  font-size:1.25rem;
  font-weight:1000;
  color:#061015;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 28px rgba(0,255,213,.25);
}
#countdown-number{
  font-size:4.8rem;
  line-height:1;
  font-weight:1000;
  color:var(--accent);
  margin:12px 0;
  min-height:78px;
  text-shadow:0 0 30px rgba(0,255,213,.45);
}
#countdown-number.pulse{animation:countPulse .55s ease}
@keyframes countPulse{
  0%{transform:scale(.8);opacity:.4}
  45%{transform:scale(1.18);opacity:1}
  100%{transform:scale(1);opacity:1}
}
#shuffle-status{
  color:#d8e4f2;
  min-height:24px;
  font-size:.95rem;
}
.back-shuffle-mode #face-U{
  border:3px solid var(--gold);
  box-shadow:0 0 28px rgba(255,209,102,.9);
}
.back-shuffle-mode .face-name:first-child{
  color:var(--gold);
}


/* 練習用タイムアタック設定 */
#practice-options{
  text-align:left;
  background:#0d131b;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:12px;
  margin:0 0 16px;
}
#practice-options label{
  display:block;
  color:var(--accent);
  font-weight:900;
  margin-bottom:8px;
}
.practice-select-row{
  display:grid;
  grid-template-columns:1fr 80px 58px;
  gap:8px;
  align-items:center;
}
#practice-shuffle-count{
  width:100%;
  accent-color:var(--accent);
}
#practice-shuffle-select{
  width:100%;
  padding:8px;
  border-radius:10px;
  border:1px solid #334155;
  background:#101722;
  color:#fff;
  font-weight:900;
}
#practice-shuffle-label{
  color:var(--gold);
  text-align:right;
}
#practice-options p{
  margin-top:8px;
  color:#b8c5d6;
  font-size:.78rem;
}
.practice-btn{
  background:linear-gradient(135deg,#ffd166,#ff8c1a);
}

/* =========================================================
   MOBILE SAFE AREA FIX
   追加内容：
   1. 開始画面・終了画面・ランキング画面は、スマホで内容がはみ出した場合に縦スクロール可能にする。
   2. ゲーム画面の下部操作パネルを約30px上げ、スマホ下部バーに隠れにくくする。
   3. iPhone/Androidのブラウザ下部UI・セーフエリアにも対応する。
   ========================================================= */
html{
  min-height:100%;
  height:100%;
  overflow:hidden;
}
body{
  min-height:100%;
  height:100%;
  overflow:hidden;
}
#app{
  width:100%;
  height:100%;
  min-height:100%;
}
.screen{
  height:100dvh;
  min-height:100dvh;
}
#start-screen.active,
#result-screen.active,
#ranking-screen.active{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-top:calc(16px + env(safe-area-inset-top));
  padding-right:16px;
  padding-bottom:calc(36px + env(safe-area-inset-bottom));
  padding-left:16px;
}
#start-screen .panel,
#result-screen .panel,
#ranking-screen .panel{
  margin:auto 0;
}
#game-screen.active{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
#controller{
  margin-bottom:calc(30px + env(safe-area-inset-bottom));
}
@media(max-width:430px){
  #start-screen.active,
  #result-screen.active,
  #ranking-screen.active{
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-right:10px;
    padding-bottom:calc(44px + env(safe-area-inset-bottom));
    padding-left:10px;
  }
  .panel{
    width:100%;
    padding:18px;
    border-radius:20px;
  }
  #start-screen .panel,
  #result-screen .panel,
  #ranking-screen .panel{
    margin:0;
  }
  #controller{
    margin-bottom:calc(30px + env(safe-area-inset-bottom));
  }
}
@media(max-height:680px){
  #controller{
    padding-top:8px;
    padding-bottom:10px;
    margin-bottom:calc(30px + env(safe-area-inset-bottom));
  }
  #cube-wrap{
    min-height:0;
  }
}


/* =========================================================
   MOBILE SCROLL FIX 2
   目的：開始画面・終了画面・ランキング画面を、スマホで確実に
   指スクロール可能にする。ゲーム画面だけは従来どおり固定表示。
   前回の height:100dvh + body overflow:hidden だけでは、端末や
   ブラウザによってタッチスクロール対象が作られないことがあるため、
   非ゲーム画面では body 自体をスクロール可能に戻す。
   ========================================================= */
html{
  height:auto !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
body{
  height:auto !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:auto;
}
body.screen-game{
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none;
}
#app{
  height:auto !important;
  min-height:100dvh !important;
}
body.screen-game #app{
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}
.screen{
  height:auto !important;
  min-height:100dvh !important;
}
#start-screen.active,
#result-screen.active,
#ranking-screen.active{
  display:block !important;
  height:auto !important;
  min-height:100dvh !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding-top:calc(16px + env(safe-area-inset-top)) !important;
  padding-right:16px !important;
  padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important;
  padding-left:16px !important;
}
#start-screen .panel,
#result-screen .panel,
#ranking-screen .panel{
  margin:0 auto !important;
}
#game-screen.active{
  display:flex !important;
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}
#controller{
  margin-bottom:calc(30px + env(safe-area-inset-bottom)) !important;
}
#ranking-list{
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
@media(max-width:430px){
  #start-screen.active,
  #result-screen.active,
  #ranking-screen.active{
    padding-top:calc(12px + env(safe-area-inset-top)) !important;
    padding-right:10px !important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important;
    padding-left:10px !important;
  }
  #start-screen .panel,
  #result-screen .panel,
  #ranking-screen .panel{
    width:100% !important;
    margin:0 auto !important;
  }
}

/* =========================================================
   MOBILE SCROLL FIX 3 - TRUE TOUCH SCROLL LAYER
   原因対策：Android/iPhoneでは body スクロールだけだと、100vh系レイヤーや
   ブラウザ下部UIの影響で開始・終了画面が指スクロール対象にならない場合がある。
   そのため、開始・終了・ランキングの active screen 自体を fixed の独立スクロール
   レイヤーにし、必ず touch-action: pan-y + overflow-y: scroll にする。
   ========================================================= */
body.screen-start,
body.screen-result,
body.screen-ranking{
  position:static !important;
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
}
body.screen-start #app,
body.screen-result #app,
body.screen-ranking #app{
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
}
#start-screen.active,
#result-screen.active,
#ranking-screen.active{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100svh !important;
  min-height:0 !important;
  display:block !important;
  overflow-x:hidden !important;
  overflow-y:scroll !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
  padding-top:calc(16px + env(safe-area-inset-top)) !important;
  padding-right:12px !important;
  padding-bottom:calc(140px + env(safe-area-inset-bottom)) !important;
  padding-left:12px !important;
}
#start-screen.active::after,
#result-screen.active::after,
#ranking-screen.active::after{
  content:"";
  display:block;
  height:96px;
  width:100%;
}
#start-screen.active .panel,
#result-screen.active .panel,
#ranking-screen.active .panel{
  width:min(560px,96vw) !important;
  max-width:560px !important;
  margin:0 auto !important;
}
#start-screen.active *,
#result-screen.active *,
#ranking-screen.active *{
  touch-action:pan-y;
}
#start-screen.active button,
#result-screen.active button,
#ranking-screen.active button,
#start-screen.active input,
#start-screen.active select,
#start-screen.active textarea,
#ranking-screen.active button{
  touch-action:manipulation !important;
}
body.screen-game,
body.screen-game #app,
#game-screen.active{
  position:relative !important;
  overflow:hidden !important;
}
@supports(height:100dvh){
  #start-screen.active,
  #result-screen.active,
  #ranking-screen.active{
    height:100dvh !important;
  }
}
@media(max-width:430px){
  #start-screen.active,
  #result-screen.active,
  #ranking-screen.active{
    padding-top:calc(12px + env(safe-area-inset-top)) !important;
    padding-right:10px !important;
    padding-bottom:calc(160px + env(safe-area-inset-bottom)) !important;
    padding-left:10px !important;
  }
  #start-screen.active::after,
  #result-screen.active::after,
  #ranking-screen.active::after{
    height:120px;
  }
}


/* =========================================================
   FINAL MOBILE PC-MODE ZOOM FIX
   目的：スマホのPC表示でも、開始画面・終了画面・ランキング画面を
   ピンチ拡大縮小できるようにする。
   重要：touch-action: pan-y は縦スクロールには有効だが、端末・ブラウザに
   よってはピンチズームを抑止するため、非ゲーム画面では auto に戻す。
   ========================================================= */
html{
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  touch-action:auto !important;
}
body{
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  touch-action:auto !important;
  overscroll-behavior-y:auto !important;
}
#app{
  width:100% !important;
  min-height:100dvh !important;
  height:auto !important;
  overflow:visible !important;
  touch-action:auto !important;
}
body.screen-start,
body.screen-result,
body.screen-ranking{
  position:static !important;
  height:auto !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  touch-action:auto !important;
}
body.screen-start #app,
body.screen-result #app,
body.screen-ranking #app{
  height:auto !important;
  min-height:100dvh !important;
  overflow:visible !important;
  touch-action:auto !important;
}
#start-screen.active,
#result-screen.active,
#ranking-screen.active{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:100dvh !important;
  height:auto !important;
  display:block !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:auto !important;
  touch-action:auto !important;
  padding-top:calc(16px + env(safe-area-inset-top)) !important;
  padding-right:12px !important;
  padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important;
  padding-left:12px !important;
}
#start-screen.active *,
#result-screen.active *,
#ranking-screen.active *{
  touch-action:auto !important;
}
#start-screen.active .panel,
#result-screen.active .panel,
#ranking-screen.active .panel{
  width:min(560px,96vw) !important;
  max-width:560px !important;
  margin:0 auto !important;
}
#ranking-list{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:auto !important;
}
body.screen-game{
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.screen-game #app,
#game-screen.active{
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
  position:relative !important;
}
.pad,
.slice,
.side-btn,
#ready-button{
  touch-action:manipulation !important;
}
#controller{
  margin-bottom:calc(30px + env(safe-area-inset-bottom)) !important;
}
@media(max-width:430px){
  #start-screen.active,
  #result-screen.active,
  #ranking-screen.active{
    padding-top:calc(12px + env(safe-area-inset-top)) !important;
    padding-right:10px !important;
    padding-bottom:calc(140px + env(safe-area-inset-bottom)) !important;
    padding-left:10px !important;
  }
  #start-screen.active .panel,
  #result-screen.active .panel,
  #ranking-screen.active .panel{
    width:100% !important;
  }
}

/* =========================================================
   MOBILE GAME SCREEN 1:4:4:1 LAYOUT FIX
   目的：スマホ縦画面で、上から
   スコア表示：キューブ展開表示：操作表示：下マージン = 1：4：4：1
   になるようにゲーム画面だけを4段グリッド化する。
   ========================================================= */
#score-area{
  width:100%;
}
#game-bottom-margin{
  display:none;
}

@media (max-width:700px){
  body.screen-game{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  body.screen-game #app{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  body.screen-game #game-screen.active{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) minmax(0,4fr) minmax(0,4fr) minmax(0,1fr) !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    padding:0 !important;
    align-items:stretch !important;
  }

  #score-area{
    grid-row:1 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#121821;
  }
  #hud{
    flex:1 1 42% !important;
    min-height:0 !important;
    border-bottom:1px solid var(--line) !important;
  }
  #hud div{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:0 !important;
    padding:1px 2px !important;
  }
  #hud small{
    font-size:clamp(.46rem,1.65vh,.65rem) !important;
    line-height:1 !important;
  }
  #hud strong{
    font-size:clamp(.68rem,2.15vh,1rem) !important;
    line-height:1.05 !important;
    margin-top:1px !important;
  }
  #subhud{
    flex:0 0 26% !important;
    min-height:0 !important;
    font-size:clamp(.48rem,1.65vh,.76rem) !important;
    border-bottom:1px solid #303b4d !important;
  }
  #subhud div{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:0 !important;
    padding:0 2px !important;
  }
  #message{
    flex:0 0 32% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:0 !important;
    height:auto !important;
    padding:1px 6px !important;
    font-size:clamp(.48rem,1.65vh,.78rem) !important;
    line-height:1.05 !important;
    overflow:hidden !important;
  }

  #cube-wrap{
    grid-row:2 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:2px 0 !important;
  }
  #cube-net{
    --face-size:clamp(48px,7.4vh,74px);
    display:grid !important;
    grid-template-columns:repeat(4,var(--face-size)) !important;
    grid-template-rows:repeat(3,calc(var(--face-size) + 14px)) !important;
    gap:clamp(3px,.8vh,6px) !important;
    align-items:center !important;
    justify-content:center !important;
    max-width:100% !important;
    max-height:100% !important;
  }
  .face-slot{
    gap:2px !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  .face-name{
    font-size:clamp(.48rem,1.45vh,.72rem) !important;
    line-height:1 !important;
  }
  .face{
    width:var(--face-size) !important;
    height:var(--face-size) !important;
    border-radius:8px !important;
    padding:2px !important;
    gap:2px !important;
  }
  .main-face{
    transform:scale(1.08) !important;
  }
  .cell{
    border-radius:4px !important;
  }

  #controller{
    grid-row:3 !important;
    align-self:stretch !important;
    justify-self:center !important;
    width:100% !important;
    max-width:590px !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(4px,.8vh,10px) 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(6px,1.3vw,10px) !important;
    background:rgba(10,14,20,.82) !important;
    overflow:hidden !important;
  }
  .side-col{
    width:clamp(48px,14vw,68px) !important;
    height:auto !important;
    gap:clamp(6px,1.3vh,12px) !important;
    flex:0 0 auto !important;
  }
  .side-btn{
    width:100% !important;
    height:clamp(48px,7.2vh,68px) !important;
    border-radius:12px !important;
    font-size:clamp(.66rem,1.7vh,.9rem) !important;
    line-height:1.1 !important;
  }
  .center-pad{
    height:auto !important;
    min-height:0 !important;
    gap:clamp(6px,1.1vh,10px) !important;
    flex:0 0 auto !important;
  }
  #pad-grid{
    --pad-size:clamp(48px,7.2vh,68px);
    grid-template-columns:repeat(3,var(--pad-size)) !important;
    grid-template-rows:repeat(3,var(--pad-size)) !important;
    gap:clamp(5px,.95vh,9px) !important;
  }
  #slice-row{
    --pad-size:clamp(48px,7.2vh,68px);
    grid-template-columns:repeat(3,var(--pad-size)) !important;
    gap:clamp(5px,.95vh,9px) !important;
  }
  .pad,
  .slice{
    border-radius:12px !important;
    font-size:clamp(.86rem,2.2vh,1.25rem) !important;
    line-height:1.05 !important;
  }
  .pad small,
  .slice small{
    font-size:clamp(.42rem,1.25vh,.58rem) !important;
    line-height:1 !important;
    margin-top:1px !important;
  }
  .slice{
    height:clamp(36px,5.4vh,52px) !important;
    font-size:clamp(.72rem,1.9vh,1rem) !important;
  }

  #game-bottom-margin{
    grid-row:4 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    background:linear-gradient(180deg,rgba(10,14,20,.82),rgba(10,14,20,.2)) !important;
    pointer-events:none !important;
  }
}

@media (max-width:380px){
  #controller{
    gap:5px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }
  .side-col{
    width:45px !important;
  }
  #pad-grid,
  #slice-row{
    --pad-size:47px !important;
  }
}