:root{
      --bg:#0f1115;
      --panel:#141823;
      --cell:#262b35;
      --cell-hover:#2e3542;
      --text:#c9cdd4;
      --accent:#7bdcff;
      --gap:clamp(6px,1.2vw,14px);
      --radius:16px;
      --cols:5;
      --rows:4;
      --cell-w:120px;
      --cell-h:90px;
      --num-font-size:32px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
      color:var(--text);
      background: var(--bg) url('images/back.jpg') center / cover no-repeat fixed;
    }
    .app{
      height:100dvh;
      display:grid;
      grid-template-rows:auto 1fr;
    }
    .topbar{
      background:var(--panel);
      border-bottom:1px solid rgba(255,255,255,.06);
      display:grid;
      place-items:center;
      padding:10px clamp(10px,2vw,24px);
      position:sticky; top:0; z-index:10;
    }
    .topbar h1{
      margin:0;
      font-weight:700;
      letter-spacing:.3px;
      text-align:center;
      font-size:clamp(16px,2.2vw,26px);
      color:var(--text);
    }
    .board-wrap{
      padding:clamp(8px,1.5vw,18px) clamp(8px,1.5vw,18px) 20px;
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .grid{
      display:grid;
      grid-template-columns: repeat(var(--cols), minmax(0, var(--cell-w)));
      grid-template-rows: repeat(var(--rows), minmax(0, var(--cell-h)));
      gap:var(--gap);
      justify-content:center;
      align-content:center;
      width:100%;
      height:100%;
    }
    .cell{
      appearance:none;
      -webkit-appearance:none;
      border:none;
      outline:none;
      cursor:pointer;
      background:var(--cell);
      color:var(--text);
      border-radius:var(--radius);
      display:grid;
      place-items:center;
      font-weight:700;
      font-variant-numeric: tabular-nums;
      font-size:var(--num-font-size);
      box-shadow: 0 2px 0 rgba(255,255,255,.04) inset,
                  0 14px 40px rgba(0,0,0,.3);
      transition: transform .08s ease, background .15s ease, opacity .2s ease;
      user-select:none;
    }
    .cell:hover{ background:var(--cell-hover); }
    .cell:active{ transform: translateY(1px) scale(.995); }
    .cell.opened{
      background: transparent !important;
      box-shadow:none !important;
      color:transparent !important;
      border: none !important;
      pointer-events:none;
    }
    .overlay{
      position:fixed; inset:0;
      background: rgba(7,9,12,.65);
      display:grid;
      place-items:center;
      opacity:0; visibility:hidden;
      transition: opacity .2s ease, visibility .2s ease;
      padding: 2vh;
	  overflow: auto;
    }
    .overlay.show{ opacity:1; visibility:visible; }
    .modal{
      width:60vw; 
	  height: auto;
      max-width: 100%;
      background: #11151d;
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      box-shadow: 0 30px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
      padding: clamp(16px,2vw,28px);
      display:flex; flex-direction:column;
	  overflow: visible;
    }
    .modal-body{
      flex:1;
      min-height:0;
      padding: 0 50px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap: clamp(14px, 2vw, 24px);
      text-align:center;
      font-size: clamp(22px, 3.2vw, 56px);
      line-height:1.25;
    }
    .modal-body p{ margin:.3em 0 .2em 0; }
    .modal-body img{
      max-width:80%; max-height:50%;
      border-radius:10px;
      display:block; margin:.4em auto 0 auto;
    }
    .spoiler{
      width: min(90%, 900px);
      border:1px dashed rgba(255,255,255,.18);
      border-radius:14px;
      background:#121723;
      padding:0;
    }
    .spoiler summary{
      list-style:none;
      cursor:pointer;
      display:block;
      min-height: clamp(80px, 12vh, 180px);
      padding: 0; margin:0;
    }
    .spoiler summary::-webkit-details-marker{ display:none; }
    .spoiler .answer{
      padding: clamp(12px, 2vw, 18px);
      font-size: clamp(20px, 2.6vw, 44px);
      line-height:1.25;
      text-align:center;
    }
    .modal-body .question-html h1,
    .modal-body .question-html h2,
    .modal-body .question-html h3{ margin:.2em 0; font-size:1em; font-weight:800; }
    .modal-body .question-html ul,
    .modal-body .question-html ol{ display:inline-block; text-align:left; font-size:.9em; }
    @media (max-width: 720px){
      .modal{ width: 90vw; height: 50vh; }
    }
    @media (prefers-reduced-motion: reduce){
      .cell, .overlay{ transition:none !important; }
    }
	.cell{
	  background: rgba(38, 43, 53, 0.35);
	  text-shadow: 0 1px 2px rgba(0,0,0,.6);
	}
	.cell:hover{
	  background: rgba(46, 53, 66, 0.65);
	}
	.cell:active{
	  background: rgba(46, 53, 66, 0.75);
	}

	.cell.opened{
	  background: transparent !important;
	}
	:root{ --spoiler-h: clamp(80px, 12vh, 180px); }
	.spoiler{
	  position: relative;
	  height: var(--spoiler-h);
	}
	.spoiler summary{
	  display: block;
	  height: 100%;
	  margin: 0; padding: 0;
	}
	.spoiler[open] summary{
	  height: 0;
	  overflow: hidden;
	}
	.spoiler .answer{
	  position: absolute;
	  inset: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: clamp(12px, 2vw, 18px);
	  text-align: center;
	}