/* 99 Club Studio · extra puzzles + grouped online library v2.04 */

.tt99-extra-next,
.tt99-extra-search-target,
.tt99-extra-op-target{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin:0 0 1rem;padding:.8rem 1rem;border:1px solid #cfe1df;border-radius:16px;
  background:#f5faf9;color:#294f55;font-weight:700
}
.tt99-extra-next strong,.tt99-extra-search-target strong,.tt99-extra-op-target strong{font-size:1.35rem;color:#0f7770}

.tt99-extra-path-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(100%,34rem);margin:0 auto;aspect-ratio:1;border:2px solid #78999d;background:#78999d;gap:1px}
.tt99-extra-path-grid>span,.tt99-extra-path-grid>button{
  display:flex;align-items:center;justify-content:center;min-width:0;border:0;background:#fff;color:#274c53;
  font:700 clamp(.8rem,3vw,1.15rem)/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.tt99-extra-path-grid>span.given,.tt99-extra-path-grid>button.given{background:#eef7f5;color:#0f7770}
.tt99-extra-path-grid>button.user{background:#fbfefd}
.tt99-extra-path-grid>button.wrong{background:#fff0ec;box-shadow:inset 0 0 0 3px #cd765e}
.tt99-extra-path-grid>button.hint{background:#fff7cc;box-shadow:inset 0 0 0 3px #caa624}

.tt99-extra-search-grid{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(100%,38rem);margin:0 auto;aspect-ratio:1;border:2px solid #78999d;background:#78999d;gap:1px}
.tt99-extra-search-grid>span{display:flex;align-items:center;justify-content:center;min-width:0;background:#fff;color:#274c53;font-weight:700}
.tt99-extra-search-grid>span.hint-cell{background:#fff7cc;box-shadow:inset 0 0 0 3px #d3aa18}
.tt99-extra-search-grid>i,.tt99-extra-search-hit{
  position:absolute;left:calc(var(--c) * (100% / var(--n)));top:calc(var(--r) * (100% / var(--n)));
  width:calc(2 * (100% / var(--n)));height:calc(2 * (100% / var(--n)));box-sizing:border-box
}
.tt99-extra-search-grid>i{border:4px solid #0f8a83;background:rgba(15,138,131,.08);pointer-events:none}
.tt99-extra-search-hit{appearance:none;border:0;background:transparent;padding:0;z-index:2}
.tt99-extra-search-hit.selected{border:4px solid #0f8a83;background:rgba(15,138,131,.11)}
.tt99-extra-search-hit.wrong{border-color:#c9624c;background:rgba(201,98,76,.12)}
.tt99-extra-search-hit.hint{border-color:#caa624;background:rgba(250,215,80,.2)}

.tt99-extra-op-equation{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;margin:1rem 0 1.25rem;font-size:clamp(1.25rem,5vw,2rem);color:#294f55}
.tt99-extra-op-equation b,.tt99-extra-op-equation strong{min-width:1.35em;text-align:center}
.tt99-extra-op-equation .blank-op,.tt99-extra-op-equation [data-slot]{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.2em;height:2.2em;border:2px solid #a9c2c4;border-radius:12px;background:#fff;color:#0f7770;font-weight:800
}
.tt99-extra-op-equation [data-slot].selected{border-color:#0f8a83;box-shadow:0 0 0 3px rgba(15,138,131,.12)}
.tt99-extra-op-equation [data-slot].wrong{border-color:#c9624c;background:#fff0ec}
.tt99-extra-op-equation [data-slot].hint{border-color:#caa624;background:#fff7cc}
.tt99-extra-op-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;max-width:34rem;margin:0 auto}
.tt99-extra-op-pad button{min-height:3.25rem;border:1px solid #afc8ca;border-radius:14px;background:#fff;color:#294f55;font:700 1.15rem/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

.tt99-extra-perimeter-grid{
  position:relative;display:grid;
  grid-template-columns:repeat(var(--n),minmax(0,1fr));
  grid-template-rows:repeat(var(--n),minmax(0,1fr));
  grid-auto-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);
  width:min(100%,34rem);margin:0 auto;aspect-ratio:1 / 1;
  box-sizing:border-box;border:3px solid #385a60;background:#fff;touch-action:none
}
.tt99-extra-perimeter-grid>span{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:0;min-height:0;padding:0;
  border:1px solid #9cb3b6;background:#fff;color:#274c53;font-weight:800;line-height:1
}
.tt99-extra-perimeter-controls{position:absolute;inset:0;z-index:4;pointer-events:none}
.tt99-extra-perimeter-edge{position:absolute;appearance:none;border:0;background:transparent;padding:0;margin:0;pointer-events:auto;touch-action:none;cursor:pointer}
.tt99-extra-perimeter-edge.v{top:calc(var(--r) * 100% / var(--n));left:calc(var(--c) * 100% / var(--n) - 18px);width:36px;height:calc(100% / var(--n))}
.tt99-extra-perimeter-edge.h{left:calc(var(--c) * 100% / var(--n));top:calc(var(--r) * 100% / var(--n) - 18px);width:calc(100% / var(--n));height:36px}
.tt99-extra-perimeter-edge:before{content:"";position:absolute;border-radius:999px;background:transparent;transition:background .08s ease,box-shadow .08s ease}
.tt99-extra-perimeter-edge.v:before{top:0;bottom:0;left:16px;width:4px}
.tt99-extra-perimeter-edge.h:before{left:0;right:0;top:16px;height:4px}
.tt99-extra-perimeter-edge:hover:before,.tt99-extra-perimeter-edge:focus-visible:before{background:#9bc9c6}
.tt99-extra-perimeter-edge.is-on:before{background:#0f7770}
.tt99-extra-perimeter-edge.wrong:before{background:#c9624c}
.tt99-extra-perimeter-edge.hint:before{background:#d3aa18;box-shadow:0 0 0 3px rgba(255,230,120,.5)}
.tt99-extra-perimeter-edge:focus-visible{outline:2px solid #4f9fd3;outline-offset:-2px}

.tt99-extra-preview .tt99-extra-path-grid,
.tt99-extra-preview .tt99-extra-search-grid,
.tt99-extra-preview .tt99-extra-perimeter-grid{width:min(100%,330px)}
.tt99-extra-preview .tt99-extra-op-equation{font-size:1.45rem}
.tt99-extra-op-rule{text-align:center;color:#687d81;font-size:.84rem}

/* Grouped Play Online library */
.tt99-play-library-grid.tt99-library-grouped{display:block!important}
.tt99-play-library-group{border:1px solid #d4e3e2;border-radius:16px;background:#fbfdfd;margin:.7rem 0;overflow:hidden}
.tt99-play-library-group>summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1rem;
  cursor:pointer;font-weight:800;color:#294f55;background:#f3f8f7
}
.tt99-play-library-group>summary::-webkit-details-marker{display:none}
.tt99-play-library-group>summary span{display:flex;align-items:center;gap:.55rem}
.tt99-play-library-group>summary b{display:inline-flex;align-items:center;justify-content:center;min-width:1.8rem;height:1.8rem;padding:0 .4rem;border-radius:999px;background:#dceeed;color:#176f69;font-size:.78rem}
.tt99-play-library-group>summary:after{content:"⌄";font-size:1.2rem;transition:transform .15s ease}
.tt99-play-library-group[open]>summary:after{transform:rotate(180deg)}
.tt99-play-library-group-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;padding:.75rem}
.tt99-play-library-group .tt99-play-game-card{width:100%;margin:0;box-sizing:border-box}
.tt99-play-library-group .tt99-play-game-card.is-active{box-shadow:inset 0 0 0 2px #0f8a83}
.tt99-play-library-search-note{margin:.4rem 0 .75rem;color:#6c8185;font-size:.86rem}

@media(max-width:680px){
  .tt99-play-library-group-body{grid-template-columns:1fr;padding:.55rem}
  .tt99-play-library-group>summary{padding:.78rem .82rem}
  .tt99-extra-op-pad{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tt99-extra-op-pad [data-clear]{grid-column:auto/span 2}
}