.eo { --cw:clamp(34px, 10.2vw, 76px); width:min(780px,100%); }
.eo-top { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; align-items:center; }
.eo-row { display:grid; gap:6px; justify-items:center; width:100%; }
.eo-row.found { grid-template-columns:repeat(4, var(--cw)); justify-content:center; }
.eo-row.cells { grid-template-columns:repeat(8, 1fr); }
.slot { width:var(--cw); aspect-ratio:5/7; border:2px dashed rgba(255,255,255,.3); border-radius:8px; display:grid; place-items:center; color:rgba(255,255,255,.4); font-size:calc(var(--cw) * .5); cursor:pointer; }
.slot .pcard { margin:0; }
.slot.has { border:0; }
.cols { display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; justify-items:center; align-items:start; min-height:calc(var(--cw) * 4.6); }
.col { display:flex; flex-direction:column; align-items:center; width:100%; min-height:calc(var(--cw) * 1.4); border-radius:8px; }
.col.empty { border:2px dashed rgba(255,255,255,.28); }
.col .pcard + .pcard { margin-top:calc(var(--cw) * -1.04); }
.pcard.sel { transform:translateY(-4px); outline:3px solid #fbbf24; }
.pcard.hint { box-shadow:0 0 0 3px #4ade80, 0 3px 8px rgba(0,0,0,.4); }
.bar button { min-height:44px; }