*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  background:radial-gradient(120% 140% at 50% -10%,#354567 0%,#19394a 55%,#182b40 100%);
  color:#eaf4ee;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}
[hidden]{display:none!important}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;flex-wrap:wrap}
#brand{font-weight:800;letter-spacing:.14em;font-size:15px;color:#8ff0c0;display:flex;align-items:center;gap:8px;text-shadow:0 0 14px rgba(90,230,160,.35)}
.leaf{width:14px;height:14px;border-radius:0 60% 0 60%;background:linear-gradient(135deg,#7df0b4,#2fae76);box-shadow:0 0 10px rgba(100,240,170,.5);transform:rotate(-18deg)}
#hud{display:flex;align-items:center;gap:14px;margin-inline:auto;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;min-width:52px}
.stat .label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a7bdcc}
.stat .value{font-size:17px;font-weight:700;color:#f2f8f4;font-variant-numeric:tabular-nums}
#hudLives .value{color:#ffd27a;letter-spacing:2px;font-size:15px}
.homes .value{display:flex;gap:5px}
.home{width:13px;height:13px;border-radius:50%;background:#1d2c3f;border:2px solid #33506b;transition:all .35s}
.home.lit{background:radial-gradient(circle at 35% 35%,#d6ffe9,#57e6a6 55%,#1d8a5e);border-color:#8ff0c0;box-shadow:0 0 12px rgba(110,240,175,.75)}
#timebar{width:130px;height:8px;border-radius:6px;background:#1a2740;overflow:hidden;border:1px solid #2c3f5c}
#timefill{height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#ff9d4d,#ffd27a);transition:width .12s linear}
#btns{display:flex;gap:8px}
.pill{background:rgba(28,44,66,.85);color:#cfe6da;border:1px solid #3a5878;border-radius:999px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;min-width:52px;min-height:40px}
.pill:active{transform:scale(.95)}
#stage{flex:1;display:flex;align-items:stretch;justify-content:center;gap:14px;min-height:0;padding:4px 14px calc(10px + env(safe-area-inset-bottom))}
#board{flex:1 1 auto;min-width:0;height:100%;border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 1px rgba(90,140,120,.25);touch-action:none}
#dpad{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.dbtn{width:58px;height:58px;border-radius:16px;border:1px solid #3a5878;background:rgba(30,48,72,.9);
  color:#9ff0c6;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dbtn:active{background:rgba(60,100,90,.9);transform:scale(.94)}
@media (orientation:landscape){
  #dpad{display:flex}
  #dpad .grid{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:8px}
  .dbtn.up{grid-area:1/2}.dbtn.left{grid-area:2/1}.dbtn.down{grid-area:2/2}.dbtn.right{grid-area:2/3}
}
#overlays{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.overlay{pointer-events:auto;background:rgba(7,13,23,.88);backdrop-filter:blur(6px);
  border:1px solid rgba(120,200,160,.25);border-radius:22px;padding:26px 34px;max-width:min(92vw,560px);
  text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.overlay h1{font-size:34px;letter-spacing:.2em;color:#9ff5c9;text-shadow:0 0 24px rgba(100,240,175,.45);margin-bottom:8px}
.overlay h2{font-size:26px;color:#cfeadd;margin-bottom:10px}
.tag{color:#93aec4;font-size:15px;margin-bottom:14px}
.rules{list-style:none;text-align:left;margin:0 auto 18px;max-width:440px;font-size:14px;color:#c8dccf;line-height:1.75}
.rules li{padding-left:18px;position:relative}
.rules li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:#57e6a6;box-shadow:0 0 8px rgba(87,230,166,.8)}
.big{background:linear-gradient(180deg,#3fdca0,#1f9e6d);color:#06281c;border:none;border-radius:14px;
  font-size:18px;font-weight:800;padding:14px 34px;min-width:180px;min-height:52px;cursor:pointer;
  box-shadow:0 8px 24px rgba(40,200,140,.35)}
.big:active{transform:translateY(2px)}
.big.ghost{background:rgba(30,48,72,.9);color:#cfe6da;border:1px solid #3a5878;box-shadow:none}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.inline{background:none;border:none;color:#ffd27a;font-weight:700;cursor:pointer;text-decoration:underline;padding:4px}
.inline.ghost{color:#93aec4}
.small{font-size:12px;color:#a7bdcc;margin-top:16px}
.small a{color:#8ff0c0;text-decoration:none}
.score{font-size:30px;font-weight:800;color:#ffd27a;margin:8px 0 18px;font-variant-numeric:tabular-nums}
@media (orientation:portrait){
  #stage{flex-direction:column;padding:4px 10px 8px}
  #board{flex:1 1 auto;width:100%;min-height:0}
  #dpad{display:flex;flex-direction:row;width:100%;height:auto;gap:10px;padding-bottom:env(safe-area-inset-bottom)}
  #dpad .dbtn{flex:1;height:62px;position:static}
  #dpad .dbtn.up{order:0}.dbtn.left{order:1}.dbtn.right{order:2}.dbtn.down{order:3}
  #hud{gap:10px}
  #timebar{width:90px}
  .stat{min-width:44px}
}

/* Tablet QA refinements */
.pill{min-height:52px}.inline{min-height:44px;min-width:52px}
#timeText{font-size:13px;font-variant-numeric:tabular-nums;color:#ffd27a;min-width:32px}
.arcade-nav{color:#9edabc;text-decoration:none;font-size:13px;padding:12px 8px;border-radius:12px;white-space:nowrap}
.arcade-nav:focus-visible,button:focus-visible{outline:2px solid #ffd27a;outline-offset:3px}
.overlay{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
#dpad{touch-action:none}
@media(orientation:portrait){#topbar{justify-content:center;gap:6px;padding:6px 10px}#hud{order:3;width:100%;justify-content:center}#brand{font-size:13px}#btns{margin-left:auto}.pill{padding:8px 12px}#dpad{height:130px;flex:none}#dpad .grid{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:6px}#dpad .dbtn{width:58px;height:58px;min-width:58px;flex:none}.dbtn.up{grid-area:1/2}.dbtn.left{grid-area:2/1}.dbtn.down{grid-area:2/2}.dbtn.right{grid-area:2/3}#board{height:0;flex:1;min-height:0}}
@media(max-width:800px){#brand{display:none}#hud{gap:8px}#timebar{width:70px}.stat{min-width:40px}.overlay{padding:20px}.overlay h1{font-size:28px}}