:root {
  --board-size: 480px;
  --x:#00ff00; --o:#2196f3;
  --macro-line:#fff; --micro-line:#fff;
  --macro-thickness:14px; --micro-thickness:2px; --mini-inset:12px;
  --win-outline-thickness:4px;
  --sidebar-w: 300px;           /* narrower side panels so they fit within green area */
  --accent: rgba(255,255,255,.18);
  --accent-b: rgba(255,255,255,.35);
}

/* Base ----------------------------------------------------------- */
.super-ttt *,.super-ttt *::before,.super-ttt *::after{box-sizing:border-box}
.super-ttt{color:#f5f5f5; --bar-w:min(92vw,var(--board-size));}
.hidden{display:none!important}
.hidden-vis{visibility:hidden}
.disabled{opacity:.6;pointer-events:none}

/* Buttons --------------------------------------------------------- */
.btn-sm{
  padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-weight:600
}
.btn-sm:hover{background:var(--accent);border-color:var(--accent-b);}

/* Black top bar --------------------------------------------------- */
.super-ttt .game-mode .row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;
  gap:18px;background:#121212;border:3px solid #fff;border-radius:14px;padding:10px 20px;
  width:min(92vw,var(--board-size));margin:14px auto 0;
}
.super-ttt #handlerDiff{
  color:#fff;font-family:"Comic Sans MS","Marker Felt",system-ui;
  font-size:22px;letter-spacing:2px;cursor:pointer
}
.super-ttt #handlerMode{display:flex;align-items:center;justify-content:center;cursor:pointer}
.super-ttt #handlerMode img,
.super-ttt #reset-button img{height:clamp(26px,5vw,36px);width:auto;display:block;pointer-events:none}
.super-ttt #reset-button{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center}
.super-ttt #reset-button:hover{filter:brightness(0.9)}

/* Layout grid ----------------------------------------------------- */
.super-ttt .layout{
  display:grid;
  grid-template-columns:minmax(200px,var(--sidebar-w)) var(--bar-w) minmax(200px,var(--sidebar-w));
  justify-content:center;
  align-items:start;
  column-gap:20px;
  margin:20px auto;
  width:fit-content;
  max-width:calc(var(--bar-w) + 2*var(--sidebar-w) + 60px);
}

/* Side panels ----------------------------------------------------- */
.super-ttt .sidebar{
  width:100%;
  max-width:var(--sidebar-w);
  background:rgba(0,0,0,.32);border-radius:12px;padding:12px;
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.super-ttt .name-static .text{
  font-weight:800;font-size:clamp(22px,2.4vw,34px);
  white-space:nowrap;text-align:center
}
.super-ttt .panel-actions{margin-top:8px}
.super-ttt .done-wrap{margin-top:6px}

/* Edit panels ----------------------------------------------------- */
.super-ttt aside.sidebar > .edit-panel.hidden{display:none!important}
.super-ttt aside.sidebar > .edit-panel:not(.hidden){
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:10px;margin-top:8px;width:100%;
}
.super-ttt .picker,.super-ttt .field{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px
}
.super-ttt .field input[type=text]{
  width:60px;max-width:60px;height:32px;border-radius:10px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;padding:4px 6px
}
.super-ttt .picker input[type=color]{width:44px;height:32px;border:none;border-radius:6px}

/* Board wrapper --------------------------------------------------- */
.super-ttt .wrapper{
  width:var(--bar-w);
  max-width:var(--bar-w);
  margin:0 auto;
}
.super-ttt .frame{width:100%;position:relative;margin:0 auto}
.super-ttt .boardbox{
  position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;
}
.super-ttt .boardbox::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--macro-line),var(--macro-line)) 33.333% 0/ var(--macro-thickness) 100% no-repeat,
    linear-gradient(var(--macro-line),var(--macro-line)) 66.666% 0/ var(--macro-thickness) 100% no-repeat,
    linear-gradient(var(--macro-line),var(--macro-line)) 0 33.333%/ 100% var(--macro-thickness) no-repeat,
    linear-gradient(var(--macro-line),var(--macro-line)) 0 66.666%/ 100% var(--macro-thickness) no-repeat;
}
.super-ttt .boardbox::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);border-radius:10px;z-index:0;
}
.super-ttt .macro{
  width:100%;height:100%;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  position:absolute;inset:0;z-index:2
}

/* Micro grids / cells --------------------------------------------- */
.super-ttt .micro{background:transparent;position:relative;z-index:1}
.super-ttt .micro::before{
  content:"";position:absolute;inset:var(--mini-inset);
  background:
    linear-gradient(var(--micro-line),var(--micro-line)) 33.333% 0/ var(--micro-thickness) 100% no-repeat,
    linear-gradient(var(--micro-line),var(--micro-line)) 66.666% 0/ var(--micro-thickness) 100% no-repeat,
    linear-gradient(var(--micro-line),var(--micro-line)) 0 33.333%/ 100% var(--micro-thickness) no-repeat,
    linear-gradient(var(--micro-line),var(--micro-line)) 0 66.666%/ 100% var(--micro-thickness) no-repeat;
  border-radius:12px
}
.super-ttt .micro-grid{
  position:absolute;inset:var(--mini-inset);display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  z-index:3;pointer-events:auto
}
.super-ttt .cell{
  background:transparent;display:grid;place-items:center;
  font-weight:800;font-size:clamp(18px,2.4vw,28px);cursor:pointer;color:#fff
}
.super-ttt .mark{font-size:1.6em;line-height:1}
.super-ttt .x{color:var(--x)}.super-ttt .o{color:var(--o)}

/* Highlights ------------------------------------------------------ */
.super-ttt .macro-hover{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  z-index:2;pointer-events:none
}
.super-ttt .macro-spot{background:transparent;transition:background .12s ease,opacity .12s ease}
#macroOwn .macro-spot.persistX{background:var(--x);opacity:.28}
#macroOwn .macro-spot.persistO{background:var(--o);opacity:.28}
#macroOpp .macro-spot.highlightX{background:var(--x);opacity:.36}
#macroOpp .macro-spot.highlightO{background:var(--o);opacity:.36}

/* Win outline + banner -------------------------------------------- */
.super-ttt .micro-win{
  position:absolute;inset:var(--mini-inset);
  border:var(--win-outline-thickness) solid transparent;border-radius:12px;z-index:4;
  pointer-events:none; /* ✅ allow clicks to pass through won cities */
}
.super-ttt .win-overlay{
  position:absolute;inset:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .25s ease;
}
.super-ttt .win-overlay.visible{opacity:1}
.super-ttt .win-overlay text{
  font-family:"Luckiest Guy","Bangers","Impact","Comic Sans MS",cursive;
  font-weight:900;letter-spacing:1px;fill:var(--overlay-color,#fff);
  stroke:rgba(0,0,0,0.95);stroke-width:14;paint-order:stroke fill;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))
}
.super-ttt .win-overlay textPath{font-size:clamp(48px,9vw,160px)}

/* Mobile ---------------------------------------------------------- */
@media(max-width:700px){
  .super-ttt .layout{
    grid-template-columns:1fr;
    width:min(92vw,var(--board-size));
  }
  .super-ttt .sidebar{
    max-width:100%;
  }
  .super-ttt .wrapper{
    width:100%;
  }
}

/* === Wider Name field (extends left, right edge stays fixed) === */
.super-ttt { 
  /* tweak the middle value if you want it wider/narrower */
  --name-input-w: clamp(160px, 10vw, 260px);
}

.super-ttt .field input[type="text"]{
  width: var(--name-input-w) !important;
  max-width: var(--name-input-w) !important;
  flex: 0 0 var(--name-input-w) !important;
  margin-left: auto;           /* keeps the right edge anchored */
  text-align: left;            /* normal typing feel */
}