/* ParadoxChess full-screen game layout.
   <body class="oc-game">
     <aside class="oc-left">  back link, h1, .oc-desc, .oc-howto (How to play) </aside>
     <main class="oc-center"> the board (keeps its own ids) </main>
     <aside class="oc-right"> status, bot strength, buttons, game log, extra panels </aside>
   </body> */
body.oc-game{margin:0;height:100vh;height:100dvh;overflow:hidden;display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(250px,330px);gap:0;
  grid-template-rows:minmax(0,1fr);grid-auto-rows:0}
/* Columns always fill the full height; anything else scripts add to <body> gets a zero-height row. */
body.oc-game>.oc-left{grid-area:1/1}body.oc-game>.oc-center{grid-area:1/2}body.oc-game>.oc-right{grid-area:1/3}
.oc-left,.oc-right{overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;
  background:var(--panel,#262421);min-width:0}
.oc-left{border-right:1px solid #0003}.oc-right{border-left:1px solid #0003}
.oc-left h1{margin:0;font-size:1.7rem;line-height:1.15;text-align:left}
.oc-left .back{position:static;margin:0;align-self:flex-start}
.oc-desc{margin:0;color:var(--muted,#bab9b6);font-size:.95rem}
.oc-howto h2,.oc-right h2{margin:0 0 6px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#bab9b6)}
.oc-howto{font-size:.9rem;line-height:1.5}.oc-howto p,.oc-howto ul{margin:0 0 8px}.oc-howto ul{padding-left:18px}
.oc-center{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px;gap:8px;container-type:size}
/* Square boards fill the centre column as large as possible. */
.oc-center .oc-board,.oc-center #board{width:min(100cqw,100cqh - 64px)!important;height:auto;max-width:none!important;
  aspect-ratio:1;flex:none}
.oc-center .oc-board.free,.oc-center .oc-free{width:100%!important;height:100%!important;aspect-ratio:auto}
.oc-center #status,.oc-center .oc-status{font-weight:700;min-height:1.4em;text-align:center}
.oc-right .panel{width:auto;background:transparent;padding:0;border-radius:0}
.oc-right > button,.oc-right .oc-actions button{width:100%}
.oc-log,.oc-right #log,.oc-right #moves{flex:1 1 auto;min-height:120px;max-height:none;overflow-y:auto;
  background:#0002;border-radius:8px;padding:8px 10px;font-size:.85rem}
@media (max-width:900px){
  body.oc-game{height:auto;overflow:auto;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto}
  body.oc-game>.oc-left,body.oc-game>.oc-center,body.oc-game>.oc-right{grid-area:auto}
  .oc-center{order:-1;container-type:inline-size;padding:8px}
  .oc-center .oc-board,.oc-center #board{width:min(100cqw,92vh)!important}
  .oc-left,.oc-right{border:0}
}