/* The periodic table: the real 18 by 10 grid. On a phone it scrolls sideways rather than
   shrinking to unreadable, because the shape of the table is the thing being learned. */
.el-table-wrap{
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  padding:10px 2px 14px;margin:0 -4px;
}
.el-table{
  display:grid;grid-template-columns:repeat(18,var(--el-size));grid-auto-rows:var(--el-size);
  gap:3px;justify-content:center;min-width:min-content;margin:0 auto;
}
:root{--el-size:34px}
@media (min-width:900px){:root{--el-size:44px}}
@media (min-width:1500px){:root{--el-size:52px}}

.el-tile{
  -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  width:100%;height:100%;padding:2px 0;
  border:1px solid rgba(32,33,36,.12);border-radius:4px;color:#202124;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),outline-color var(--fast) var(--ease);
  outline:2px solid transparent;
}
.el-tile:hover:not(:disabled){transform:translateY(-2px) scale(1.06);box-shadow:var(--e2);z-index:2}
.el-tile:disabled{cursor:default}
.el-tile.out{opacity:.38}
.el-tile .el-num{font-size:calc(var(--el-size) * .22);line-height:1;opacity:.7}
.el-tile .el-sym{font-size:calc(var(--el-size) * .42);line-height:1.1}
.el-tile.right{outline-color:var(--green);box-shadow:0 0 0 3px rgba(30,142,62,.25);z-index:3}
.el-tile.wrong{outline-color:var(--red);box-shadow:0 0 0 3px rgba(217,48,37,.22);z-index:3}

.el-tile.big{width:64px;height:64px;flex:0 0 auto;border-radius:8px}
.el-tile.big .el-num{font-size:12px}
.el-tile.big .el-sym{font-size:26px}

.el-prompt-tile{
  width:112px;height:112px;margin:16px auto 6px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(32,33,36,.12);color:#202124;
  box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px rgba(60,64,67,.15);
  animation:rise 380ms var(--ease-out) both;
}
.el-prompt-tile .el-num{font-size:14px;opacity:.7}
.el-prompt-tile .el-sym{font-size:46px;line-height:1.05}

.el-status{display:flex;justify-content:center;min-height:38px;padding:6px 0 0}
.el-choice{justify-content:center;text-align:center}

.el-fact-head{display:flex;align-items:center;gap:14px}
.el-name-big{font-size:22px;color:var(--text);line-height:1.2}