:root{
  --bg: #f6f9ff;
  --surface: #ffffff;
  --black: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary-blue: #1a7cf2;
  --primary-blue-dark: #125fbe;
  --primary-blue-light: #eef6ff;
  --green: #22c55e;
  --red: #ef4444;
  /* Dynamic viewport helpers set from JS */
  --vh100: 100vh;
  --header-h: 56px;
  --mobile-top-pad: 72px;
  --mobile-bottom-pad: 90px;
  --mobile-board-size: calc(var(--vh100) - (var(--mobile-top-pad) + var(--mobile-bottom-pad)));
  /* Board sizing helper keeps desktop board slightly smaller than viewport */
  --board-size: clamp(320px, min(88vw, calc(100vh - 200px)), 760px);
  --notation-width: 320px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), #eaf1ff);
  color:var(--black);
  overflow:hidden; /* Static page, no scrolling */
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

/* Compact game-info bar under main navbar */
.topbar{
  padding:10px 0 6px 0;
  min-height:64px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.topbar .navbar-brand{
  display:inline-flex;
  align-items:center;
  font-weight:800;
  color:var(--black);
  letter-spacing:.2px;
  font-size:1.25rem;
  line-height:1;
  text-decoration:none;
}
.topbar .navbar-brand:hover{
  color:var(--black);
  text-decoration:none;
}
.brand-mark{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
  margin-right:8px;
  background:var(--primary-blue);
}
.topbar-right .btn.small{
  margin-left:4px;
}
.brand-inline{display:flex;align-items:center;gap:8px;font-weight:800;}
.brand-dot{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark));display:inline-block;}
.pill-group{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-blue-light);
  border:1px solid rgba(59,130,246,.2);
  color:var(--black);
  font-size:0.9rem;
  white-space:nowrap;
}
.pill-group span{
  font-weight:600;
}
.pill-group.players{background:#f9fafb;border-color:var(--border);}
.dot-sep{opacity:.5;}
.btn.small{padding:8px 10px;font-size:0.9rem;border-radius:10px;}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Shell layout: board + right meta */
.game-shell{
  display:grid;
  grid-template-columns: 1fr clamp(260px, 22vw, 360px);
  grid-template-rows: var(--vh100);
  height:var(--vh100);
}

/* Legacy left panel styles kept for compatibility but unused */
.left-panel{display:none}
.section{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.section h6{margin:0 0 8px 0;font-weight:800;font-size:.95rem}
.btn{border-radius:10px;padding:10px 12px;font-weight:700;font-size:.95rem;background:var(--primary-blue);color:#fff;text-decoration:none;text-align:center;border:1px solid var(--primary-blue);cursor:pointer}
.btn.block{display:inline-flex;justify-content:center;align-items:center;width:100%}
.btn.alt{background:#fff;color:var(--primary-blue);border-color:rgba(45,140,255,.35)}
.mobile-hamburger{display:none}
.mobile-drawer{display:none}
.mobile-notation-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  margin-top:6px;
  box-shadow:none;
}

.mobile-notation-label{font-weight:700;color:var(--black);font-size:.8rem}
.mobile-notation-strip{flex:1;overflow-x:auto;white-space:nowrap;text-overflow:initial;font-family:monospace;font-size:.85rem;color:var(--black);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}
.mobile-notation-strip::-webkit-scrollbar{display:none}
.mobile-nav-bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:8px;padding:10px 18px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-top:1px solid var(--border);z-index:80;transition:transform .25s ease, opacity .25s ease}
.mobile-nav-bar .np-btn{flex:1;max-width:64px;font-size:.78rem;padding:0 10px}
.mobile-result-bar{position:fixed;left:0;right:0;bottom:96px;padding:4px 12px 2px 12px;font-size:.78rem;color:#1f2937;background:rgba(255,255,255,.96);z-index:79;text-align:center;pointer-events:none}
.mobile-result-bar span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:600;color:#1f2937}
.mobile-clock-bar{display:none}
.mobile-side-clock{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:2px 4px;
  background:transparent;
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  gap:10px;
}
.mobile-side-clock-meta{
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
}
.mobile-side-indicator{
  display:none;
}
.mobile-side-name{
  max-width:150px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--primary-blue);
  font-weight:700;
  letter-spacing:0.01em;
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.mobile-side-clock-time{
  font-variant-numeric:tabular-nums;
  font-size:1rem;
  font-weight:800;
  color:var(--primary-blue);
  letter-spacing:0.04em;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.mobile-side-clock.clock-active .mobile-side-clock-time{
  color:var(--primary-blue-dark);
  text-shadow:0 1px 2px rgba(21, 94, 171, 0.45);
}

.drawer-game-meta{
  border-radius:14px;
}
.drawer-meta-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drawer-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.2);
  background:var(--primary-blue-light);
  font-weight:600;
  color:var(--black);
}
.drawer-pill.players{
  justify-content:flex-start;
  flex-wrap:wrap;
  background:#f9fafb;
  border-color:var(--border);
}
.drawer-pill .dot-sep{opacity:.6;}

@media (max-width:992px){
  .topbar .navbar-brand{
    display:none !important;
  }
  .topbar-right .btn.small{
    display:none !important;
  }
}

@media (max-width:768px){
  .topbar{
    padding:6px 0 2px 0;
  }
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .topbar-right{
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .topbar-right .pill-group.players{
    flex:1;
    justify-content:space-between;
  }
  .topbar-right .btn.small{
    margin-left:0;
  }
}
.menu-list{margin:0;padding-left:16px;color:var(--muted)}
.menu-list li{margin:6px 0}
.left-panel .panel-footer{margin-top:auto;padding:10px 14px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border)}
.meta{opacity:.9}

/**************** Board Layout ****************/
.game-shell {
  display: flex;
  height: calc(100vh - var(--header-h, 60px));
  width: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  position: relative;
  gap: 0;
}

.board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  order: 0;
  flex: 1;
  overflow: hidden;
}

.board-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  position: relative;
  margin: 0;
  padding: 0 0 0 0;
  min-width: 0;
}

.board-stack{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  width:100%;
  position:relative;
  max-width:var(--board-size);
}
.board-stack .mobile-clock-white{order:2;align-self:stretch;}
.board-stack .board-embed{order:1;}
.board-stack .mobile-clock-black{order:0;align-self:stretch;}
.board-stack .mobile-notation-bar{order:3;width:100%;}
.board-stack.flipped .mobile-clock-white{order:0;align-self:stretch;}
.board-stack.flipped .board-embed{order:1;}
.board-stack.flipped .mobile-clock-black{order:2;align-self:stretch;}

.board-embed {
  grid-column: 2;
  position: relative;
  aspect-ratio: 1/1;
  width: var(--board-size);
  height: var(--board-size);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.board-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  display: block;
}
/* Notation panel - between board and right panel */
.board-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 0 24px;
  min-width: 0;
  gap: 24px;
}

.notation-panel {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,#ffffff,#f3f6ff);
  border: 1px solid rgba(148,163,184,.6);
  border-left: none;
  width: var(--notation-width);
  max-width: calc(var(--notation-width) + 20px);
  height: var(--board-size);
  max-height: var(--board-size);
  padding: 16px 14px;
  align-self: center;
  border-radius: 14px;      /* match core section card corners */
  box-shadow: 0 14px 30px rgba(15,23,42,.18);
  overflow: hidden;         /* panel stays fixed; inner scrolls */
  position: relative;
  flex-shrink: 0;
}

.notation-header{
  display:flex;
  justify-content:center;
  margin:10px 0;
  order:2;
}
.notation-title{font-weight:800;color:var(--black);font-size:1.1rem}
.brand-link{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.brand-link:hover{text-decoration:none;opacity:.9}
.brand-link:focus-visible{outline:2px solid var(--primary-blue);outline-offset:4px;border-radius:12px;padding:2px 4px}

/* Reader-style toolbar buttons for notation nav */
.notation-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.np-btn{
  min-width:32px;
  height:30px;
  border-radius:999px;
  border:1px solid #ced4da;
  background:#fff;
  color:#374151;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  font-size:0.8rem;
  transition:background-color .15s ease,border-color .15s ease,transform .08s ease;
}
.np-btn:hover{
  background:#f8f9fa;
  border-color:#adb5bd;
}
.np-btn:active{
  transform:translateY(1px);
}
.np-btn:disabled{
  opacity:.45;
  cursor:default;
}
.np-btn .ico{margin-top:1px;}

/* CSS-only icons for nav buttons */
.np-btn .ico{position:relative;display:block;width:16px;height:14px}

/* Prev: triangle pointing left */
.np-prev .ico::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #374151}
.np-prev .ico::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid var(--primary-blue)}

/* Next: triangle pointing right */
.np-next .ico::before{content:"";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid var(--primary-blue)}

/* First: bar + left triangle */
.np-first .ico::before{content:"";position:absolute;left:3px;top:2px;width:2px;height:12px;background:var(--primary-blue);border-radius:1px}
.np-first .ico::after{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid var(--primary-blue)}

/* Last: right triangle + bar */
.np-last .ico::before{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid var(--primary-blue)}
.np-last .ico::after{content:"";position:absolute;right:3px;top:2px;width:2px;height:12px;background:var(--primary-blue);border-radius:1px}

/* Flip: two opposing triangles */
.np-flip .ico::before{content:"";position:absolute;left:2px;top:3px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--primary-blue);opacity:.9}
.np-flip .ico::after{content:"";position:absolute;left:2px;bottom:3px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--primary-blue);opacity:.9}
.notation-moves .current-move,.tablet-notation .current-move{background:var(--primary-blue);color:#fff;border-radius:6px}
.mobile-notation-strip .current-move{background:var(--primary-blue);color:#fff;border-radius:6px;padding:2px 6px;font-weight:700}
.mobile-notation-strip .move-no{color:var(--muted);font-weight:700;margin-right:2px;display:inline-block}
.notation-moves{
  flex:1;
  overflow:auto;
  border:1px solid rgba(148,163,184,.6);
  border-radius:10px;
  padding:8px 8px 10px 8px;
  background:#f3f6ff;
  font-family:monospace;
  font-size:.9rem;
  display:grid;
  grid-auto-rows:min-content;
  row-gap:4px;
  order:3;
}
.notation-moves{
  /* Hide scrollbar visuals while keeping scroll behavior (like lichess) */
  -ms-overflow-style:none; /* IE/Edge */
  scrollbar-width:none;    /* Firefox */
}
.notation-moves::-webkit-scrollbar{
  display:none;            /* Chrome/Safari */
}
.notation-row{display:grid;grid-template-columns:36px 1fr 1fr;column-gap:10px;align-items:center;min-height:1.8em}
.notation-row .no{color:var(--muted);font-weight:700}
.notation-row .mv{display:inline-block;min-width:0;padding:2px 6px;border-radius:6px;line-height:1.6}
.notation-row .mv.current-move{background:var(--primary-blue);color:#fff;border-radius:6px;font-weight:inherit}
.move-entry{padding:4px 6px;border-radius:6px;margin-bottom:4px}
.move-entry:hover{background:rgba(26,124,242,.1)}

/* Notation panel clocks: square/rectangular timers like lichess */
.notation-clocks{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:4px 0 8px 0;
  padding:0;
}
.notation-clock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.85rem;
  padding:4px 10px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.7);
  background:#f9fafb;
  min-height:32px;
  margin:6px 0;
}
.notation-player{
  font-weight:700;
  color:#111827;
  max-width:110px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.notation-clock-time{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:#111827;
  min-width:56px;
  text-align:right;
}
.notation-clock-row.clock-active{
  background:linear-gradient(135deg, rgba(26,124,242,.08), rgba(26,124,242,.16));
  border-color:rgba(26,124,242,.7);
  box-shadow:0 0 0 1px rgba(26,124,242,.35);
}

/* Order clocks relative to moves and nav: default White at bottom, Black at top; flip when board flipped */
.notation-clock-black{order:1;}
.notation-header{order:2;}
.notation-moves{order:3;}
.notation-clock-white{order:4;}
.notation-panel.flipped .notation-clock-black{order:4;}
.notation-panel.flipped .notation-clock-white{order:1;}
.move-entry.active{background:var(--primary-blue);color:#fff}

/* Play vs Computer modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,21,36,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:90;padding:16px}
.modal-backdrop.show{display:flex}
.modal-shell{width:min(360px, 100%);background:var(--surface);border-radius:18px;box-shadow:0 18px 36px rgba(15,23,42,.22);overflow:hidden;border:1px solid var(--border)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal-header h2{margin:0;font-size:1.1rem;font-weight:800;color:var(--black)}
.modal-close{border:1px solid var(--border);background:#fff;border-radius:10px;width:36px;height:32px;cursor:pointer}
.modal-body{padding:18px;display:grid;gap:16px}
.form-group{display:grid;gap:10px}
.form-label{font-weight:700;color:var(--black);font-size:.95rem}
.radio-row{display:flex;gap:10px}
.radio-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;color:var(--black);transition:border-color .2s,color .2s}
.radio-chip input{display:none}
.radio-chip input:checked + span{color:var(--primary-blue)}
.radio-chip:hover{border-color:var(--primary-blue)}
.form-select{border-radius:10px;border:1px solid var(--border);padding:10px 12px;font-size:.95rem;background:#fff;color:var(--black)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}

/* Game Over modal specific tweaks: a bit wider and more readable rating layout */
#gameOverModal{
  /* Ensure the container itself is fully opaque and unfiltered */
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
}
#gameOverModal .modal-shell{
  width:min(420px, 100%);
  /* Ensure the modal content itself is fully opaque and sharp */
  background:#fff !important;
  color:var(--black);
  border-top:4px solid var(--primary-blue);
  padding-top:4px;
  filter:none !important;
  backdrop-filter:none !important;
}
#gameOverModal.modal-backdrop{
  /* Do not blur or darken the whole screen for Game Over */
  background:transparent;
  backdrop-filter:none !important;
}
#gameOverModal .modal-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#gameOverText.game-over-text{
  margin:0;
  white-space:normal;
  line-height:1.5;
  font-size:.95rem;
}
#gameOverText.game-over-text strong{
  font-weight:800;
}
#gameOverText.game-over-text .go-vs-line{
  color:var(--muted-text, #6b7280);
  font-size:.9rem;
}
#gameOverText.game-over-text .go-delta{
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,118,110,0.06);
}
#gameOverText.game-over-text .go-delta-pos{
  color:#16a34a;
}
#gameOverText.game-over-text .go-delta-neg{
  color:#dc2626;
}
#gameOverModal .modal-actions{
  justify-content:center;
}

/* Time control dropdown styling */
#mpTime, #mpTimeMobile {
  background: var(--surface);
  color: var(--black);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.9rem;
  max-width: 200px;
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  cursor: pointer;
}

#mpTime:hover, #mpTimeMobile:hover {
  border-color: var(--primary-blue);
}

#mpTime:focus, #mpTimeMobile:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

#mpTime optgroup, #mpTimeMobile optgroup {
  font-weight: 600;
  color: var(--primary-blue);
  background: var(--bg);
  padding: 4px 8px;
  margin-top: 4px;
}

#mpTime option, #mpTimeMobile option {
  color: var(--black);
  background: var(--surface);
  padding: 4px 8px;
}

/**************** Right Panel ****************/
.right-panel{height:var(--vh100);background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;width:320px;flex:0 0 320px}
.right-panel .panel-body{padding:16px;display:grid;gap:12px;overflow:auto}
.info-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:.95rem}
.info-grid .label{color:var(--muted)}
.info-grid .value.ok{color:var(--green);font-weight:700}
.clock-section{display:none}
.clock-grid{display:grid;gap:6px}
.clock-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:#f9fafb;font-size:.95rem}
.clock-row-white{border-left:3px solid var(--primary-blue)}
.clock-row-black{border-left:3px solid #111827}
.clock-side{font-weight:700;color:var(--muted)}
.clock-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--black)}
.clock-row.clock-active{background:linear-gradient(135deg, rgba(26,124,242,.12), rgba(18,95,190,.16));border-color:rgba(26,124,242,.7)}
.clock-row.flagged{border-color:var(--red);background:rgba(239,68,68,.12)}
.clock-controls{display:none}
.clock-btn{flex:1;font-size:.82rem;padding:8px 6px}
.clock-status{margin-top:6px;font-size:.85rem;color:var(--muted)}
.muted{background:var(--primary-blue-light)}
.muted-text{margin:0;color:#466082}
.opening-section{display:grid;gap:10px;transition:background .25s ease, box-shadow .25s ease}
.opening-section.detected{background:linear-gradient(135deg, rgba(26,124,242,.12), rgba(18,95,190,.18));box-shadow:0 10px 24px rgba(17, 24, 39, .12)}
.opening-section .opening-info{display:grid;gap:8px}
.opening-section .opening-name{font-weight:800;color:var(--black);font-size:1.05rem}
.opening-section .opening-summary{margin:0;color:#2d3b55;line-height:1.45}
.opening-section .opening-link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-weight:700;color:var(--primary-blue);text-decoration:none;border-radius:12px;border:1px solid rgba(26,124,242,.3);background:rgba(26,124,242,.1);transition:color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease}
.opening-section .opening-link:hover{color:var(--primary-blue-dark);border-color:rgba(18,95,190,.5);background:rgba(26,124,242,.16);transform:translateY(-1px)}
.opening-section .opening-link:focus-visible{outline:2px solid var(--primary-blue);outline-offset:3px}
.opening-section .opening-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--primary-blue);color:#fff;font-size:.75rem;line-height:1;box-shadow:0 3px 6px rgba(26,124,242,.25)}
.opening-section .opening-link:hover .opening-link-icon{background:var(--primary-blue-dark)}

/* Game Info connection indicator */
.gi-status-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.gi-indicator{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ef4444; /* default red */
  box-shadow:0 0 0 1px rgba(248,113,113,.6);
}
.gi-indicator.gi-ok{
  background:#22c55e;
  box-shadow:0 0 0 1px rgba(34,197,94,.6);
}

.tablet-moves{display:none}
.tablet-moves-panel[hidden]{display:none}

/**************** Responsive ****************/
@media (max-width: 1200px){
  .game-shell{grid-template-columns: clamp(200px, 26vw, 260px) 1fr 280px}
  .board-embed{width:min(calc(var(--vh100) * 0.84), calc(100vw - 46vw));}
  .notation-panel{min-width:220px;max-width:260px;height:calc((var(--vh100) - 32px) / 2)}
}
body.menu-open .mobile-notation-bar,
body.menu-open .mobile-nav-bar{opacity:0;pointer-events:none;transform:translateY(10px)}
body.menu-open .mobile-clock-bar,body.menu-open .mobile-result-bar{opacity:0;pointer-events:none;transform:translateY(10px)}

@media (min-width: 768px){
  .mobile-moves-section{display:none}
  .mobile-notation-bar,.mobile-nav-bar,.mobile-clock-bar,.mobile-result-bar{display:none}
}

@media (max-width: 992px) {
  .game-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .game-shell {
    padding-left: 0; /* no extra padding on mobile/tablet */
  }
  .topbar-left .pill-group,
  .topbar-right .pill-group{
    display:none;
  }

  .notation-panel {
    display: none;
  }

  .right-panel {
    display: none;
  }
}
@media (max-width: 768px) {
  body {
    padding-top: 0;
    padding-bottom: calc(var(--mobile-bottom-pad) + 40px);
  }
  .game-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .game-shell,
  .board-wrap,
  .board-outer,
  .board-stack,
  .board-embed,
  .board-embed iframe,
  .mobile-side-clock {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
  }
  .mobile-notation-bar{
    display:flex;
    position:static;
    top:auto;
    left:auto;
    right:auto;
    width:100vw;
    max-width:100vw;
    margin:4px 0 0 0;
    padding:0 12px 8px;
  }
  .board-wrap {
    padding: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
  }
  .board-outer {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
  }
  .board-embed {
    width: 100vw;
    max-width: 100vw;
    height: 100vw;
    aspect-ratio: 1/1;
  }
  .board-embed iframe{
    height:100vw;
    border:0;
    display:block;
  }
  .board-stack{
    width: 100vw;
    max-width: 100vw;
    padding:0;
    gap:6px;
  }
  .mobile-side-clock{
    display:flex;
  }
  .board-stack .mobile-clock-white,
  .board-stack.flipped .mobile-clock-black{
    margin-bottom:-2px;
  }
  .board-stack .mobile-clock-black,
  .board-stack.flipped .mobile-clock-white{
    margin-top:-2px;
  }
  /* Hide side panels entirely on mobile */
  .right-panel { display: none; }
  .left-panel{display:none}
  .notation-panel{display:none}
  /* Floating hamburger button */
  .mobile-hamburger{position:fixed;top:10px;left:10px;z-index:120;width:42px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.08)}
  .mobile-hamburger span{display:block;width:20px;height:2px;background:#1f2937;border-radius:2px;position:relative}
  .mobile-hamburger span::before,.mobile-hamburger span::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#1f2937;border-radius:2px}
  .mobile-hamburger span::before{top:-7px}
  .mobile-hamburger span::after{top:7px}
  /* Fullscreen drawer */
  .mobile-drawer{position:fixed;inset:0;z-index:200;display:block;opacity:0;pointer-events:none;transition:opacity .3s ease}
  .mobile-drawer::before{content:"";position:absolute;inset:0;background:rgba(17,24,39,0.55);opacity:0;transition:opacity .3s ease}
  .mobile-drawer .drawer-shell{position:absolute;top:0;bottom:0;left:0;width:min(90vw, 320px);background:#fff;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .34s cubic-bezier(.33,1,.68,1);box-shadow:0 12px 40px rgba(15,23,42,.25)}
  .mobile-drawer .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
  .mobile-drawer .drawer-title{margin:0;font-size:1.05rem;font-weight:800}
  .mobile-drawer .drawer-close{width:38px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff}
  .mobile-drawer .drawer-body{padding:14px;overflow:auto;display:grid;gap:10px;height:100%;padding-bottom:24px}
  .mobile-drawer .section{padding:12px;border-radius:12px}
  .mobile-drawer .quick-actions{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px}
  .mobile-drawer .quick-actions .btn{padding:8px 10px;font-size:.9rem;border-radius:10px;min-height:38px}
  .mobile-drawer .quick-actions .btn.card-full{grid-column:1 / -1}
  .mobile-drawer .drawer-body .btn{font-size:.9rem;padding:8px 12px;border-radius:10px}
  .mobile-drawer .drawer-body .btn.block{min-height:40px}
  .mobile-drawer select,
  .mobile-drawer input{font-size:.9rem;padding:6px 10px;border-radius:9px}
  .mobile-drawer label{font-size:.85rem}
  body.menu-open .mobile-drawer{opacity:1;pointer-events:auto}
  body.menu-open .mobile-drawer::before{opacity:1}
  body.menu-open .mobile-drawer .drawer-shell{transform:translateX(0)}
}

/* Ensure the embedded viewer stays perfectly frameless */
html, body, .board-embed iframe { background: transparent !important; }