.blocks-body{overflow:hidden;height:100vh;height:100dvh}
.blocks{display:flex;flex-direction:column}
.blocks .g-topbar{padding-top:calc(4px + var(--safe-t));padding-bottom:4px}
.stage{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:12px;padding:6px calc(10px + var(--safe-r)) calc(6px + var(--safe-b)) calc(10px + var(--safe-l))}
.panel{width:150px;flex:none;display:flex;flex-direction:column;gap:8px;justify-content:center}
.stat{display:flex;flex-direction:column;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.stat span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat b{font-family:"Cinzel",serif;font-size:22px;color:var(--gold-2);line-height:1.1}
.board-wrap{position:relative;height:100%;aspect-ratio:10/20;max-width:48vw;border:2px solid var(--gold-3);border-radius:10px;background:#0c0b0a;box-shadow:0 0 0 1px rgba(229,199,122,.15),0 20px 50px rgba(0,0,0,.6);overflow:hidden}
.board-wrap canvas#board{width:100%;height:100%;display:block;position:relative;z-index:1}
.board-wrap .wm{position:absolute;left:50%;top:50%;width:80%;transform:translate(-50%,-50%);opacity:.08;pointer-events:none;z-index:0}
.overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(10,9,8,.78);backdrop-filter:blur(3px);text-align:center;padding:16px}
.overlay b{font-family:"Cinzel",serif;letter-spacing:.14em;color:var(--gold-2);font-size:18px}
.overlay span{color:var(--muted);font-size:13px;max-width:240px;line-height:1.5}
.overlay[hidden]{display:none}
.next{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.next span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.next canvas{width:72px;height:72px}
.pad{display:flex;flex-direction:column;align-items:center;gap:6px}
.pad-row{display:flex;gap:6px}
.pad-btn{width:44px;height:44px;border-radius:12px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);color:var(--gold-2);font-size:18px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.4);touch-action:none;user-select:none}
.pad-btn:active{transform:translateY(1px);background:var(--gold-soft)}
.pad-btn.wide{width:144px;height:40px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
@media (max-height:420px){.panel{width:120px}.stat{padding:5px 10px}.stat b{font-size:18px}.pad-btn{width:38px;height:38px}.pad-btn.wide{width:126px;height:34px}.next canvas{width:56px;height:56px}}
@media (min-width:1100px){.panel{width:190px}}

/* Dikey düzen: puanlar üstte, tahta ortada, kontroller altta */
@media (orientation:portrait){
  .stage{flex-direction:column;align-items:center;gap:8px;padding:6px calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l))}
  .panel{width:100%;flex:none;justify-content:center}
  .panel.left{flex-direction:row;gap:6px;order:1}
  .stat{flex:1;padding:5px 8px;min-width:0}
  .stat span{font-size:9.5px}.stat b{font-size:17px}
  .board-wrap{order:2;flex:1;min-height:0;height:auto;width:auto;max-width:100%;aspect-ratio:10/20}
  .panel.right{order:3;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .next{flex-direction:row;padding:4px 8px}
  .next canvas{width:44px;height:44px}
  .pad{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .pad-row{order:0}
  .pad-btn{width:46px;height:46px}
  .pad-btn.wide{width:auto;padding:0 14px;height:46px;order:1}
  .pad-btn[data-k=rot]{order:2}
}