/* ============================================================
   cms_game - Panel component CSS (auto-extracted)
   Generated from cms_game/templates/cms_game/*.html <style> blocks
   Do not edit directly; edit the source templates or re-run extract.
   ============================================================ */

.cmsgame-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cmsgame-head {
  padding: 14px 20px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; color: #1e3a8a; font-size: 0.95rem;
}
.cmsgame-head a.more { font-size: 0.78rem; font-weight: 400; color: #2563eb; text-decoration: none; }
.cmsgame-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.cmsgame-share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f766e;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.cmsgame-share-action:hover,
.cmsgame-share-action:focus-visible { border-color: #14b8a6; background: #f0fdfa; }
.cmsgame-empty {
  padding: 22px 18px; text-align: center; color: #6b7280;
  font-size: 0.88rem; background: #fff;
}
.cmsgame-empty i { display: block; margin-bottom: 8px; color: #cbd5e1; font-size: 1.8rem; }
.cmsgame-tile {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  overflow: hidden; transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.cmsgame-tile:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.cmsgame-tile-cover {
  aspect-ratio: 16 / 10; background: #1e3a8a;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.4rem; position: relative;
}
.cmsgame-tile-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; }
.cmsgame-tile-title { font-size: 0.88rem; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
.cmsgame-tile-cat { font-size: 0.72rem; color: #6b7280; }
.cmsgame-tile-status {
  width: fit-content; margin-top: 6px; padding: 2px 7px; border-radius: 999px;
  background: #f1f5f9; color: #475569; font-size: 0.66rem; font-weight: 800;
}
.cmsgame-tile-status.is-ready { background: #ccfbf1; color: #0f766e; }
.cmsgame-tile-status.is-planned { background: #e2e8f0; color: #475569; }
.cmsgame-tile-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cmsgame-tile-tags span {
  padding: 2px 6px; border-radius: 999px; background: #f1f5f9;
  color: #475569; font-size: 0.66rem; font-weight: 700;
}
.cmsgame-tile-meta {
  display: flex; gap: 10px; margin-top: auto;
  padding-top: 6px; font-size: 0.72rem; color: #6b7280;
}
.cmsgame-tile-meta i { color: #d97706; }
.cmsgame-badge-new, .cmsgame-badge-featured {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 8px; border-radius: 3px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
}
.cmsgame-badge-new { background: #d1fae5; color: #047857; }
.cmsgame-badge-featured { background: #fef3c7; color: #92400e; }

.cmsgame-cat-tabs { padding: 10px 14px; display: flex; gap: 4px; flex-wrap: wrap; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.cmsgame-cat-tabs a { padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; color: #4b5563; text-decoration: none; }
.cmsgame-cat-tabs a.active { background: #1e3a8a; color: #fff; }
.cmsgame-catalog-search {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(150px, auto) minmax(170px, auto) auto;
  gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; background: #fff;
}
.cmsgame-catalog-search input,
.cmsgame-catalog-search select,
.cmsgame-catalog-search button {
  min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 6px 9px; font: inherit; font-size: 0.82rem;
}
.cmsgame-catalog-search button { background: #1e3a8a; color: #fff; font-weight: 800; }
.qg-filter-static {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
}
.cmsgame-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cmsgame-catalog-section + .cmsgame-catalog-section { border-top: 1px solid #e5e7eb; }
.cmsgame-section-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px 0; color: #475569;
}
.cmsgame-section-head strong { color: #111827; font-size: 0.95rem; font-weight: 900; }
.cmsgame-section-head span { font-size: 0.78rem; font-weight: 800; }
.cmsgame-grid-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cmsgame-feature {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.cmsgame-icon {
  width: 54px; height: 54px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-size: 1.45rem;
  flex: 0 0 auto;
}
.cmsgame-feature-main { min-width: 0; }
.cmsgame-feature-main strong { display: block; color: #111827; font-size: 1.02rem; }
.cmsgame-feature-main p { margin: 4px 0 0; color: #475569; font-size: 0.86rem; line-height: 1.5; }
.cmsgame-tags, .cmsgame-link-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.cmsgame-tags span, .cmsgame-link-row a {
  padding: 4px 9px; border-radius: 999px; background: #f1f5f9;
  color: #475569; font-size: 0.75rem; font-weight: 800; text-decoration: none;
}
.cmsgame-link-row a { background: #eff6ff; color: #1d4ed8; }
.cmsgame-detail-notes { padding: 12px 18px; border-bottom: 1px solid #e5e7eb; }
.cmsgame-detail-notes p { margin: 0 0 10px; color: #475569; font-size: 0.86rem; line-height: 1.5; }
.cmsgame-detail-notes p:last-child { margin-bottom: 0; }
.cmsgame-mini-list { display: grid; gap: 0; }
.cmsgame-mini-list a {
  display: grid; gap: 3px; padding: 12px 18px; border-bottom: 1px solid #e5e7eb;
  color: inherit; text-decoration: none;
}
.cmsgame-mini-list a:hover { background: #f8fafc; }
.cmsgame-mini-list a:last-child { border-bottom: 0; }
.cmsgame-mini-list strong { color: #111827; font-size: 0.9rem; }
.cmsgame-mini-list span { color: #64748b; font-size: 0.78rem; }

.cmsgame-featured-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cmsgame-feat-hero {
  display: flex; padding: 18px; border-radius: 8px; color: #fff;
  text-decoration: none; align-items: center; gap: 14px; min-height: 120px;
  transition: transform 0.15s;
}
.cmsgame-feat-hero:hover { transform: scale(1.02); }
.cmsgame-feat-icon { font-size: 2.4rem; opacity: 0.9; }
.cmsgame-feat-text h3 { margin: 0 0 4px; font-size: 1.1rem; color: #fff; }
.cmsgame-feat-text p { font-size: 0.82rem; margin: 0 0 6px; opacity: 0.9; }
.cmsgame-feat-meta { display: flex; gap: 12px; font-size: 0.76rem; opacity: 0.9; }
.cmsgame-feat-meta i { color: #fbbf24; }

.cmsgame-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

.cmsgame-fav-btn { padding: 6px 12px; border: 1px solid #e5e7eb; background: #fff; color: #dc2626; border-radius: 999px; font-size: 0.8rem; cursor: pointer; }
.cmsgame-fav-btn:hover { background: #fee2e2; }
.cmsgame-playarea { background: #000; position: relative; }
.cmsgame-playarea iframe { width: 100%; height: 100%; border: 0; display: block; }
.cmsgame-playarea-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; text-align: center;
  padding: 20px;
}
.cmsgame-placeholder-icon { font-size: 4rem; margin-bottom: 12px; opacity: 0.85; }
.cmsgame-playarea-placeholder h2 { font-size: 1.6rem; margin: 0 0 8px; color: #fff; }
.cmsgame-playarea-placeholder p { opacity: 0.85; margin: 0 0 14px; }
.cmsgame-playbtn {
  padding: 14px 36px; border: none; border-radius: 999px;
  background: #d97706; color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.cmsgame-playbtn:hover { background: #b45309; }
a.cmsgame-playlink { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cmsgame-playcost { margin-top: 10px; font-size: 0.88rem; opacity: 0.9; }
.cmsgame-playarea-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #0f172a;
  color: #cbd5e1;
}
.cmsgame-playmeta {
  padding: 10px 20px; background: #f8fafc;
  display: flex; gap: 16px; font-size: 0.82rem; color: #6b7280;
  flex-wrap: wrap; align-items: center;
}
.cmsgame-playmeta i { color: #d97706; }

.cmsgame-hist { list-style: none; margin: 0; padding: 0; }
.cmsgame-hist li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f3f4f6; }
.cmsgame-hist li:last-child { border-bottom: none; }
.cmsgame-hist li:hover { background: #f8fafc; }
.cmsgame-hist-icon { width: 40px; height: 40px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.cmsgame-hist-body { flex: 1; min-width: 0; }
.cmsgame-hist-title a { font-weight: 700; color: #1f2937; text-decoration: none; }
.cmsgame-hist-title a:hover { color: #d97706; }
.cmsgame-hist-meta { font-size: 0.76rem; color: #6b7280; margin-top: 2px; }
.cmsgame-hist-meta i { color: #d97706; }

.cmsgame-rank-list { list-style: none; margin: 0; padding: 0; }
.cmsgame-rank-list li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f3f4f6; }
.cmsgame-rank-list li:last-child { border-bottom: none; }
.cmsgame-rank-list li:hover { background: #f8fafc; }
.cmsgame-rank-1 { background: linear-gradient(90deg, #fef3c7, transparent); }
.cmsgame-rank-2 { background: linear-gradient(90deg, #e5e7eb, transparent); }
.cmsgame-rank-3 { background: linear-gradient(90deg, #fed7aa, transparent); }
.cmsgame-rank-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; color: #6b7280; font-weight: 800; flex-shrink: 0; }
.cmsgame-rank-1 .cmsgame-rank-n { background: #fbbf24; color: #fff; }
.cmsgame-rank-2 .cmsgame-rank-n { background: #9ca3af; color: #fff; }
.cmsgame-rank-3 .cmsgame-rank-n { background: #d97706; color: #fff; }
.cmsgame-rank-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1e3a8a, #d97706); color: #fff; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; }
.cmsgame-rank-name { flex: 1; font-weight: 600; color: #1f2937; }
.cmsgame-rank-score { font-family: 'SF Mono', Monaco, monospace; font-weight: 800; color: #d97706; }
.cmsgame-rank-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(239,68,68,0.28);
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.cmsgame-rank-live:hover {
  color: #991b1b;
  text-decoration: none;
  background: #fee2e2;
}
.cmsgame-rank-live em {
  color: inherit;
  font-style: normal;
}

.cmsgame-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

/* QuickGames portal */
.qg-shell, .qg-detail { display: grid; gap: 24px; padding: 8px 0 32px; }
.qg-masthead {
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
  padding: clamp(24px, 4vw, 46px); border: 1px solid #d8dee8; border-radius: 8px;
  background:
    radial-gradient(circle at 18% 20%, rgba(20,184,166,0.18), transparent 34%),
    linear-gradient(135deg, #111827 0%, #233044 52%, #3b2f28 100%);
  color: #fff;
}
.qg-kicker, .qg-arena-label { color: #5eead4; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.qg-masthead h1, .qg-detail-hero h1 { margin: 4px 0; font-size: clamp(2rem, 4vw, 4.2rem); font-weight: 900; letter-spacing: 0; }
.qg-masthead p, .qg-arena-head p, .qg-detail-hero p { margin: 0; color: rgba(255,255,255,0.78); font-style: italic; }
.qg-statbar { display: grid; grid-template-columns: repeat(3, minmax(82px, 1fr)); gap: 10px; min-width: min(360px, 100%); }
.qg-statbar div, .qg-panel, .qg-arena {
  border: 1px solid #d8dee8; border-radius: 8px; background: #fff;
}
.qg-statbar div { padding: 12px; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.qg-statbar strong { display: block; font-size: 1.35rem; line-height: 1; }
.qg-statbar span { color: rgba(255,255,255,0.72); font-size: 0.75rem; }
.qg-arena { overflow: hidden; }
.qg-arena-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 20px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
}
.qg-arena-head h2, .qg-panel-head h2 { margin: 0; font-size: 1.25rem; font-weight: 900; color: #111827; }
.qg-arena-head p { color: #64748b; }
.qg-catalog-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px 140px 130px auto auto;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.qg-catalog-search input,
.qg-catalog-search select,
.qg-catalog-search button,
.qg-filter-clear {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 0.82rem;
}
.qg-catalog-search button {
  background: #0f766e;
  color: #fff;
  font-weight: 900;
}
.qg-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  background: #f1f5f9;
  text-decoration: none;
  font-weight: 800;
}
.qg-filter-clear:hover { color: #111827; background: #e2e8f0; text-decoration: none; }
.qg-primary-action, .qg-action-btn, .qg-icon-btn, .qg-text-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; border-radius: 8px; border: 1px solid transparent;
  text-decoration: none; font-weight: 800; cursor: pointer;
}
.qg-primary-action, .qg-action-btn { min-height: 48px; }
.qg-primary-action { padding: 10px 14px; background: #0f766e; color: #fff; white-space: nowrap; }
.qg-primary-action:hover { color: #fff; background: #115e59; text-decoration: none; }
.qg-hero-actions, .qg-entry-secondary-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px;
}
.qg-guest-note { display: block; margin-top: 8px; color: #d1fae5; font-size: 0.82rem; font-weight: 700; }
.qg-start-actions .qg-primary-action { min-height: 48px; padding-inline: 18px; }
.qg-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; padding: 16px; }
.qg-catalog-subhead { border-top: 1px solid #e5e7eb; }
.qg-arena-head + .qg-catalog-search + .qg-playable-games,
.qg-arena-head + .qg-catalog-search + .qg-planned-games { border-top: 0; }
.qg-game-grid-planned { padding-top: 12px; }
.qg-game-tile {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 76px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px;
  color: #111827; text-decoration: none; background: #fff;
}
.qg-game-tile:hover { border-color: #14b8a6; box-shadow: 0 8px 22px rgba(15,23,42,0.08); color: #111827; text-decoration: none; }
.qg-game-icon { width: 48px; height: 48px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.qg-game-main { display: grid; gap: 3px; min-width: 0; }
.qg-game-main strong, .qg-game-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-game-main small { color: #64748b; font-size: 0.75rem; }
.qg-game-main .qg-game-meta-line { color: #0f766e; font-weight: 800; }
.qg-game-tile.is-planned { background: #f8fafc; border-style: dashed; }
.qg-game-tile.is-planned .qg-game-icon { opacity: 0.72; }
.qg-game-tile.has-title-banner,
.qg-coming-soon-card.has-title-banner,
.qg-board-game-card.has-title-banner {
  position: relative;
  isolation: isolate;
}
.qg-game-tile.has-title-banner {
  overflow: hidden;
  border-color: rgba(15, 23, 42, 0.2);
  background: var(--qg-card-cover-color, #0f172a);
  color: #f8fafc;
}
.qg-game-tile.has-title-banner::before,
.qg-game-tile.has-title-banner::after,
.qg-board-game-card.has-title-banner::before,
.qg-board-game-card.has-title-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.qg-game-tile.has-title-banner::before,
.qg-board-game-card.has-title-banner::before {
  z-index: 0;
  background-image: var(--qg-card-banner);
  background-position: var(--qg-card-position, 50% 50%);
  background-size: cover;
  transform: scale(1.03);
}
.qg-game-tile.has-title-banner::after,
.qg-board-game-card.has-title-banner::after {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7,10,18,0.82), rgba(7,10,18,0.58) 58%, rgba(7,10,18,0.22)),
    linear-gradient(0deg, rgba(7,10,18,0.7), rgba(7,10,18,0.08));
}
.qg-game-tile.has-title-banner > *,
.qg-board-game-card.has-title-banner > * {
  position: relative;
  z-index: 1;
}
.qg-game-tile.has-title-banner:hover { color: #f8fafc; }
.qg-game-tile.has-title-banner .qg-game-icon {
  border: 1px solid rgba(248,250,252,0.28);
  background: rgba(15,23,42,0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px rgba(0,0,0,0.26);
  backdrop-filter: blur(3px);
}
.qg-game-tile.has-title-banner .qg-game-main strong { color: #f8fafc; text-shadow: 0 1px 8px rgba(0,0,0,0.52); }
.qg-game-tile.has-title-banner .qg-game-main small { color: #dbeafe; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.qg-game-tile.has-title-banner .qg-game-main .qg-game-meta-line { color: #99f6e4; }
.qg-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
}
.qg-empty strong { color: #111827; font-weight: 900; }
.qg-home-columns, .qg-play-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); gap: 18px; align-items: start; }
.qg-panel { overflow: hidden; }
.qg-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.qg-panel-note { color: #64748b; font-size: 0.78rem; font-weight: 800; }
.qg-mobile-side-tabs { display: none; }
.qg-mobile-side-tabs a {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.qg-mobile-side-tabs a:hover {
  border-color: #14b8a6;
  color: #0f766e;
}
.qg-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 12px; }
.qg-event-card {
  display: grid; gap: 5px; padding: 12px; border: 1px solid #e5e7eb;
  border-radius: 8px; background: #fff; color: #111827; text-decoration: none;
}
.qg-event-card:hover { border-color: #14b8a6; color: #111827; text-decoration: none; }
.qg-event-card span { color: #0f766e; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.qg-event-card strong { font-size: 0.95rem; font-weight: 900; }
.qg-event-card small { color: #64748b; font-size: 0.78rem; }
.qg-category-list, .qg-list { display: grid; gap: 8px; padding: 12px; }
.qg-category-row, .qg-shogi-card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 10px; border-radius: 8px; color: #111827; text-decoration: none;
}
.qg-category-row:hover, .qg-shogi-card:hover { background: #f1f5f9; color: #111827; text-decoration: none; }
.qg-category-row span, .qg-shogi-mark { width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #334155; }
.qg-category-row small, .qg-shogi-card small { display: block; color: #64748b; }
.qg-panel-accent { border-color: #99f6e4; }
.qg-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.qg-mini-stats span { padding: 12px; border-radius: 8px; background: #f0fdfa; color: #134e4a; }
.qg-mini-stats strong { display: block; font-size: 1.35rem; }
.qg-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; color: #64748b; font-size: 0.85rem; }
.qg-breadcrumb a { color: #0f766e; text-decoration: none; }
.qg-page-hero .qg-detail-icon { background: #0f766e; }
.qg-page-filter {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto auto;
}
.qg-category-list-page { gap: 10px; }
.qg-category-row-wide {
  grid-template-columns: 38px minmax(140px, 0.8fr) minmax(0, 1.2fr) auto;
}
.qg-category-row-wide em {
  color: #0f766e; font-style: normal; font-weight: 900; white-space: nowrap;
}
.qg-leaderboard-list { list-style: none; margin: 0; padding: 0; }
.qg-leaderboard-list li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 100px 150px;
  gap: 12px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.qg-leaderboard-list li:last-child { border-bottom: 0; }
.qg-rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #f1f5f9; color: #64748b; font-weight: 900;
}
.qg-leaderboard-list .is-gold .qg-rank-num { background: #fbbf24; color: #fff; }
.qg-leaderboard-list .is-silver .qg-rank-num { background: #94a3b8; color: #fff; }
.qg-leaderboard-list .is-bronze .qg-rank-num { background: #b45309; color: #fff; }
.qg-rank-player { color: #111827; text-decoration: none; min-width: 0; }
.qg-rank-player strong, .qg-rank-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-rank-player small { color: #64748b; font-size: 0.76rem; }
.qg-rank-rating { color: #0f766e; font-weight: 900; font-variant-numeric: tabular-nums; }
.qg-rank-record { color: #64748b; font-size: 0.8rem; text-align: right; }
.qg-detail-hero {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 24px; border-radius: 8px; border: 1px solid #d8dee8;
  background: linear-gradient(135deg, #0f172a, #1f2937 58%, #2f3b2f); color: #fff;
}
.qg-detail-icon { width: 96px; height: 96px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 2.4rem; }
.qg-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qg-badges span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); font-size: 0.78rem; font-weight: 800; }
.qg-game-route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.qg-game-route-actions .qg-text-btn {
  text-decoration: none;
}
.qg-hub-link-list .qg-list-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.qg-hub-link-list .qg-list-row span {
  display: grid;
  gap: 3px;
}
.qg-hub-link-list .qg-list-row strong,
.qg-hub-link-list .qg-list-row small {
  display: block;
  min-width: 0;
}
.qg-hub-link-list .qg-list-row small {
  color: #64748b;
  font-size: 0.76rem;
}
.qg-game-surface {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #f8fafc;
}
.qg-game-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.qg-game-surface-head h3 {
  margin: 3px 0 0;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 900;
}
.qg-game-surface-badge {
  max-width: 48%;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qg-game-surface-frame,
.qg-game-surface-mount {
  width: 100%;
  min-height: 320px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #0f172a;
}
.qg-game-surface-mount {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
}
.qg-study-placeholder {
  display: grid;
  gap: 6px;
  place-items: center;
  color: #cbd5e1;
  text-align: center;
}
.qg-study-placeholder-label {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 900;
}
.qg-study-placeholder-sub,
.qg-study-placeholder-loading {
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 800;
}
.qg-game-surface[data-qg-mount-state="waiting"] .qg-study-placeholder-loading,
.qg-game-surface[data-qg-mount-state="loading"] .qg-study-placeholder-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qg-game-surface[data-qg-mount-state="waiting"] .qg-study-placeholder-loading::before,
.qg-game-surface[data-qg-mount-state="loading"] .qg-study-placeholder-loading::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid rgba(148, 163, 184, 0.4);
  border-top-color: #22d3ee;
  border-radius: 50%;
  animation: qg-surface-spin 800ms linear infinite;
}
.qg-surface-board-frame {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.qg-surface-board-frame.has-axis {
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  grid-template-rows: 22px minmax(0, 1fr) 22px;
  gap: 4px;
  align-items: stretch;
}
.qg-surface-axis {
  display: grid;
  align-items: center;
  justify-items: center;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.qg-surface-axis--files {
  grid-template-columns: repeat(var(--qg-surface-cols, 8), minmax(0, 1fr));
}
.qg-surface-axis--ranks {
  grid-template-rows: repeat(var(--qg-surface-rows, 8), minmax(0, 1fr));
}
.qg-surface-axis--top { grid-column: 2; grid-row: 1; }
.qg-surface-axis--bottom { grid-column: 2; grid-row: 3; }
.qg-surface-axis--left { grid-column: 1; grid-row: 2; }
.qg-surface-axis--right { grid-column: 3; grid-row: 2; }
.qg-surface-axis-corner {
  min-width: 0;
  min-height: 0;
}
.qg-surface-board {
  display: grid;
  grid-template-columns: repeat(var(--qg-surface-cols, 8), minmax(0, 1fr));
  grid-template-rows: repeat(var(--qg-surface-rows, 8), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: var(--qg-surface-cols, 8) / var(--qg-surface-rows, 8);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.28);
  border-radius: 8px;
  background: #b7793a;
}
.qg-surface-board-frame > .qg-surface-board {
  grid-column: 1;
  grid-row: 1;
}
.qg-surface-board-frame.has-axis > .qg-surface-board {
  grid-column: 2;
  grid-row: 2;
}
.qg-surface-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.18);
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  background: #d8a35c;
  color: #111827;
  font-weight: 900;
}
.qg-surface-cell.is-alt {
  background: #8b5a2b;
  color: #f8fafc;
}
.qg-surface-cell.has-piece {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}
.qg-surface-cell-piece {
  position: relative;
  z-index: 1;
}
.qg-surface-cell-coord {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 2;
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 900;
  opacity: 0.56;
  pointer-events: none;
}
.qg-surface-cell.has-piece .qg-surface-cell-coord {
  opacity: 0.42;
}
.qg-surface-cell.is-movable {
  box-shadow: inset 0 0 0 3px rgba(34, 211, 238, 0.86);
}
.qg-surface-cell.is-destination {
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.92), 0 0 0 2px rgba(251, 191, 36, 0.24);
}
.qg-surface-cell.is-selected {
  background: #fef3c7;
  color: #111827;
  box-shadow: inset 0 0 0 3px rgba(20, 184, 166, 0.95);
}
.qg-surface-cell.is-completed {
  background: #bbf7d0;
  color: #111827;
}

.qg-game-surface--board_9x9_drop .qg-surface-board {
  background:
    linear-gradient(90deg, rgba(120, 53, 15, 0.08), transparent 20%, rgba(120, 53, 15, 0.10) 48%, transparent 75%),
    linear-gradient(180deg, #e7b865, #c98b3f);
  border: 5px solid #8b5a2b;
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 237, 0.22),
    0 16px 34px rgba(0, 0, 0, 0.3);
}
.qg-game-surface--board_9x9_drop .qg-surface-cell,
.qg-game-surface--board_9x9_drop .qg-surface-cell.is-alt {
  overflow: visible;
  background: transparent;
  border-color: rgba(80, 46, 18, 0.46);
  color: #111827;
  text-shadow: none;
}
.qg-game-surface--board_9x9_drop .qg-surface-cell.has-piece {
  background: transparent;
}
.qg-game-surface--board_9x9_drop .qg-surface-cell.has-piece::before {
  content: "";
  position: absolute;
  inset: 7% 12% 6%;
  z-index: 1;
  clip-path: polygon(50% 1%, 91% 29%, 82% 97%, 18% 97%, 9% 29%);
  border: 1px solid rgba(92, 55, 18, 0.42);
  background:
    linear-gradient(140deg, rgba(255, 247, 237, 0.72), transparent 34%),
    linear-gradient(180deg, #f3d89a, #dba958);
  box-shadow:
    inset 0 -4px 0 rgba(92, 55, 18, 0.14),
    inset 0 2px 5px rgba(255, 255, 255, 0.28),
    0 3px 8px rgba(92, 55, 18, 0.28);
}
.qg-game-surface--board_9x9_drop .qg-surface-cell.is-shogi-opponent::before {
  transform: rotate(180deg);
}
.qg-game-surface--board_9x9_drop .qg-surface-cell-piece {
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 100%;
  min-height: 1em;
  color: #3f2411;
  font-size: clamp(0.72rem, 3.2vw, 1.04rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 247, 237, 0.46);
}
.qg-game-surface--board_9x9_drop .qg-surface-cell.is-shogi-opponent .qg-surface-cell-piece {
  transform: rotate(180deg);
}
.qg-game-surface--board_9x9_drop .qg-surface-cell-coord {
  color: rgba(80, 46, 18, 0.58);
}

.qg-game-surface--board_8x8 .qg-surface-board {
  background: #5b3a21;
  border: 4px solid #3f2818;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 214, 0.18),
    0 14px 30px rgba(0, 0, 0, 0.34);
}
.qg-game-surface--board_8x8 .qg-surface-cell {
  background: #ead8b2;
  border-color: rgba(58, 36, 24, 0.22);
  color: #111827;
}
.qg-game-surface--board_8x8 .qg-surface-cell.is-alt {
  background: #815936;
  color: #f8fafc;
}
.qg-game-surface--board_8x8 .qg-surface-cell.has-piece {
  text-shadow: none;
}
.qg-game-surface--board_8x8 .qg-surface-cell-piece {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "Apple Symbols", serif;
  font-size: clamp(1.45rem, 6vw, 2.35rem);
  line-height: 1;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.36));
}
.qg-game-surface--board_8x8 .qg-surface-cell.is-chess-white .qg-surface-cell-piece {
  color: #fffaf0;
  -webkit-text-stroke: 1px rgba(36, 24, 16, 0.62);
}
.qg-game-surface--board_8x8 .qg-surface-cell.is-chess-black .qg-surface-cell-piece {
  color: #17110c;
  text-shadow:
    0 1px 0 rgba(255, 244, 214, 0.28),
    0 2px 2px rgba(0, 0, 0, 0.42);
}

.qg-game-surface--board_19x19 .qg-surface-board {
  background:
    linear-gradient(90deg, rgba(120, 53, 15, 0.08), transparent 20%, rgba(120, 53, 15, 0.1) 46%, transparent 72%),
    #d6aa61;
  border: 5px solid #8a5a25;
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 237, 0.2),
    0 16px 34px rgba(0, 0, 0, 0.28);
}
.qg-game-surface--board_19x19 .qg-surface-cell {
  overflow: visible;
  background: transparent;
  border-color: rgba(75, 44, 18, 0.62);
  color: transparent;
}
.qg-game-surface--board_19x19 .qg-surface-cell.is-alt {
  background: transparent;
}
.qg-game-surface--board_19x19 .qg-surface-cell.has-piece,
.qg-game-surface--board_8x8_flip .qg-surface-cell.has-piece {
  color: transparent;
  text-shadow: none;
}
.qg-game-surface--board_19x19 .qg-surface-cell.has-piece::before,
.qg-game-surface--board_8x8_flip .qg-surface-cell.has-piece::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: 1;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.18),
    inset 0 4px 8px rgba(255, 255, 255, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.34);
}
.qg-game-surface--board_19x19 .qg-surface-cell.is-black-stone::before,
.qg-game-surface--board_8x8_flip .qg-surface-cell.is-black-stone::before {
  background: radial-gradient(circle at 35% 28%, #374151, #050608 72%);
}
.qg-game-surface--board_19x19 .qg-surface-cell.is-white-stone::before,
.qg-game-surface--board_8x8_flip .qg-surface-cell.is-white-stone::before {
  background: radial-gradient(circle at 36% 26%, #ffffff, #e5e7eb 72%);
}
.qg-game-surface--board_19x19 .qg-surface-cell-piece,
.qg-game-surface--board_8x8_flip .qg-surface-cell-piece {
  font-size: 0;
}

.qg-game-surface--board_8x8_flip .qg-surface-board {
  background: #0b3f2a;
  border: 5px solid #052e1d;
  box-shadow:
    inset 0 0 0 1px rgba(187, 247, 208, 0.16),
    0 16px 34px rgba(0, 0, 0, 0.3);
}
.qg-game-surface--board_8x8_flip .qg-surface-cell,
.qg-game-surface--board_8x8_flip .qg-surface-cell.is-alt {
  background: #147a47;
  border-color: rgba(5, 46, 29, 0.64);
}
.qg-game-surface--board_8x8_flip .qg-surface-cell.has-piece::before {
  inset: 10%;
}

.qg-game-surface--board_9x10_river .qg-surface-board {
  background: #b97c35;
  border: 5px solid #7c4a18;
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 237, 0.18),
    0 16px 34px rgba(0, 0, 0, 0.3);
}
.qg-game-surface--board_9x10_river .qg-surface-cell,
.qg-game-surface--board_9x10_river .qg-surface-cell.is-alt {
  background: #d8b168;
  border-color: rgba(92, 55, 18, 0.54);
  color: #111827;
}
.qg-game-surface--board_9x10_river .qg-surface-cell.has-piece {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 0;
  background: #d8b168;
  text-shadow: none;
}
.qg-game-surface--board_9x10_river .qg-surface-cell.has-piece::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 1;
  border-radius: 999px;
  border: 2px solid rgba(91, 53, 20, 0.62);
  background: radial-gradient(circle at 34% 25%, #fff3cf, #e2b86f 76%);
  box-shadow:
    inset 0 -5px 0 rgba(91, 53, 20, 0.16),
    inset 0 4px 7px rgba(255, 255, 255, 0.2),
    0 3px 8px rgba(91, 53, 20, 0.32);
}
.qg-game-surface--board_9x10_river .qg-surface-cell-piece {
  position: relative;
  z-index: 2;
  color: #7f1d1d;
  font-size: clamp(0.92rem, 3vw, 1.24rem);
  line-height: 1;
}
.qg-game-surface--board_9x10_river .qg-surface-cell.is-xiangqi-black .qg-surface-cell-piece {
  color: #111827;
}
.qg-game-surface--board_9x10_river .qg-surface-cell.is-xiangqi-red .qg-surface-cell-piece {
  color: #b91c1c;
}
.qg-game-surface--board_9x10_river .qg-surface-cell.is-river-rank {
  background:
    linear-gradient(90deg, rgba(125, 211, 252, 0.14), rgba(255, 247, 237, 0.2), rgba(125, 211, 252, 0.14)),
    #e4c783;
}
.qg-game-surface--board_9x10_river .qg-surface-cell.is-palace::after {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px dashed rgba(153, 27, 27, 0.32);
  pointer-events: none;
}
.qg-game-surface--board_8x8_jump .qg-surface-board {
  background: #3a2418;
  border: 6px solid #3a2418;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 214, 0.16),
    0 14px 32px rgba(0, 0, 0, 0.38);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell {
  display: grid;
  place-items: center;
  background: #f1d9ad;
  color: #3a2418;
  border-color: rgba(58, 36, 24, 0.28);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-dark,
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-alt {
  background: #6e402a;
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-light {
  background: #f1d9ad;
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.has-piece {
  color: transparent;
  text-shadow: none;
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.has-piece::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid rgba(58, 36, 24, 0.38);
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.18),
    inset 0 4px 8px rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.34);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.has-piece::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 2px rgba(58, 36, 24, 0.2);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-red::before {
  background: linear-gradient(145deg, #ff5a5f, #c62832);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-white::before {
  background: linear-gradient(145deg, #fffaf0, #e8dcc5);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-white::after {
  background: rgba(58, 36, 24, 0.18);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-king {
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.62);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-king::before {
  border-color: #fbbf24;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.18),
    inset 0 4px 8px rgba(255, 255, 255, 0.22),
    0 0 0 2px rgba(251, 191, 36, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.34);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-king::after {
  content: "♛";
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  color: #3a2418;
  background: transparent;
  font-size: clamp(0.85rem, 3vw, 1.2rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.is-checkers-red.is-checkers-king::after {
  color: #fff7ed;
  text-shadow: 0 1px 1px rgba(58, 36, 24, 0.5);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell-piece {
  position: relative;
  z-index: 1;
  font-size: 0;
}
.qg-game-surface--board_8x8_jump .qg-surface-cell-coord {
  color: rgba(248, 230, 190, 0.88);
  opacity: 0.82;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
}
.qg-game-surface--board_8x8_jump .qg-surface-cell.has-piece .qg-surface-cell-coord {
  color: rgba(248, 230, 190, 0.72);
  opacity: 0.9;
}
.qg-game-surface--ancient_capture_grid .qg-surface-board {
  background: #201712;
  border-color: rgba(214, 180, 110, 0.62);
  box-shadow: inset 0 0 0 3px rgba(255, 247, 237, 0.08);
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell {
  display: grid;
  place-items: center;
  background: #c7aa78;
  color: #1f1712;
  border-color: rgba(85, 48, 24, 0.24);
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-dark,
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-alt {
  background: #8c6942;
  color: #f8f0df;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-light {
  background: #d8c09a;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.has-piece {
  position: relative;
  margin: 0;
  border-radius: 0;
  border-color: rgba(85, 48, 24, 0.24);
  color: transparent;
  font-size: 0.92rem;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.has-piece::before {
  content: "";
  position: absolute;
  inset: 13%;
  z-index: 1;
  border-radius: 999px;
  border: 2px solid rgba(31, 23, 18, 0.34);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15), 0 3px 8px rgba(31, 23, 18, 0.3);
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell-piece {
  position: relative;
  z-index: 2;
  color: #1f1712;
  font-size: 0.86rem;
  line-height: 1;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-roman {
  border-color: #d6b46e;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-rebel {
  border-color: #b45309;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-roman::before {
  background: radial-gradient(circle at 34% 25%, #fff7ed, #d8c09a 74%);
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-rebel::before {
  background: radial-gradient(circle at 34% 25%, #374151, #111827 74%);
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-roman .qg-surface-cell-piece {
  color: #7c2d12;
}
.qg-game-surface--ancient_capture_grid .qg-surface-cell.is-latrunculi-rebel .qg-surface-cell-piece {
  color: #f8f0df;
}
.qg-surface-move-list {
  display: grid;
  gap: 4px;
  width: min(100%, 520px);
  margin: 10px 0 0;
  padding-left: 1.25rem;
}
.qg-surface-move-list button {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.7);
  color: #111827;
  text-align: left;
}
.qg-surface-card-table,
.qg-surface-mahjong,
.qg-surface-mancala,
.qg-surface-backgammon {
  display: grid;
  gap: 8px;
  width: min(100%, 560px);
}
.qg-surface-backgammon {
  width: min(100%, 720px);
  gap: 0;
  padding: 10px;
  border: 2px solid rgba(184, 134, 64, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(20, 18, 15, 0.96), rgba(74, 38, 22, 0.86), rgba(20, 18, 15, 0.96)),
    #24140d;
  box-shadow: inset 0 0 0 1px rgba(255, 237, 213, 0.14), 0 18px 34px rgba(15, 23, 42, 0.2);
}
.qg-surface-backgammon-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 124px;
}
.qg-surface-backgammon-rail {
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px;
  border-block: 1px solid rgba(251, 191, 36, 0.28);
  background: linear-gradient(90deg, rgba(9, 7, 5, 0.86), rgba(51, 18, 18, 0.9), rgba(9, 7, 5, 0.86));
}
.qg-surface-backgammon-rail span,
.qg-surface-backgammon-box {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  padding: 2px 8px;
  background: rgba(15, 23, 42, 0.42);
  color: #ffedd5;
  font-size: 0.68rem;
  font-weight: 900;
}
.qg-surface-backgammon-box {
  cursor: pointer;
}
.qg-surface-backgammon-dice {
  gap: 4px;
}
.qg-surface-backgammon-dice b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff7ed;
  color: #7f1d1d;
  box-shadow: inset 0 -2px 0 rgba(127, 29, 29, 0.16);
}
.qg-surface-point--backgammon {
  position: relative;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 0;
  border-color: rgba(255, 237, 213, 0.12);
  background: transparent;
  color: #fff7ed;
  isolation: isolate;
}
.qg-surface-point--backgammon.is-bottom {
  justify-content: flex-end;
}
.qg-surface-point--backgammon::before {
  content: "";
  position: absolute;
  inset-inline: 4px;
  z-index: -1;
  border-inline: 18px solid transparent;
}
.qg-surface-point--backgammon.is-top::before {
  top: 0;
  border-top: 112px solid rgba(127, 29, 29, 0.88);
}
.qg-surface-point--backgammon.is-bottom::before {
  bottom: 0;
  border-bottom: 112px solid rgba(127, 29, 29, 0.88);
}
.qg-surface-point--backgammon.is-black::before {
  border-top-color: rgba(17, 24, 39, 0.9);
  border-bottom-color: rgba(17, 24, 39, 0.9);
}
.qg-surface-point--backgammon span {
  margin: 4px 0;
  color: rgba(255, 247, 237, 0.58);
  font-size: 0.62rem;
  font-weight: 900;
}
.qg-surface-point--backgammon em {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  margin: auto 0;
}
.qg-surface-backgammon-checker {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(120, 53, 15, 0.28);
  background: #fff7ed;
  box-shadow: inset 0 -2px 0 rgba(120, 53, 15, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.qg-surface-point--backgammon.is-opponent .qg-surface-backgammon-checker {
  border-color: rgba(255, 237, 213, 0.2);
  background: #1f2937;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.32);
}
.qg-surface-backgammon-count {
  min-width: 20px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.94);
  color: #451a03;
  font-size: 0.6rem;
  line-height: 18px;
}
.qg-surface-card-table,
.qg-surface-mahjong {
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
}
.qg-surface-mahjong {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 760px);
  gap: 10px;
  padding: 12px;
  border: 2px solid rgba(125, 211, 252, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(20, 184, 166, 0.28), rgba(7, 31, 29, 0.95) 58%),
    #071f1d;
  box-shadow: inset 0 0 0 1px rgba(236, 254, 255, 0.08), 0 18px 36px rgba(15, 23, 42, 0.24);
}
.qg-surface-mahjong-meta,
.qg-surface-mahjong-notes,
.qg-surface-mahjong-analysis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qg-surface-mahjong-meta span,
.qg-surface-mahjong-notes span,
.qg-surface-mahjong-analysis span {
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(2, 6, 23, 0.44);
  color: #ecfeff;
  font-size: 0.72rem;
  font-weight: 900;
}
.qg-surface-mahjong-zone {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 8px;
  background: rgba(2, 44, 34, 0.58);
}
.qg-surface-mahjong-zone h4 {
  margin: 0;
  color: #bae6fd;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-surface-mahjong-zone > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qg-surface-mahjong-rivers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.qg-surface-mahjong .qg-surface-tile {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-height: 52px;
  padding: 5px 4px 4px;
  border-radius: 7px;
  background: linear-gradient(145deg, #fffffc, #eef4ea 76%, #c9d7c8);
  color: #0f172a;
  box-shadow: inset -3px -4px 0 rgba(15, 23, 42, 0.10), inset 2px 2px 0 rgba(255, 255, 255, 0.82), 0 3px 8px rgba(0, 0, 0, 0.26);
}
.qg-surface-mahjong .qg-surface-tile.has-asset {
  width: 42px;
  min-height: 58px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.qg-surface-mahjong .qg-surface-tile.has-asset .qg-surface-asset-img {
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.qg-surface-mahjong .qg-surface-tile-face {
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
}
.qg-surface-mahjong .qg-surface-tile--characters .qg-surface-tile-face,
.qg-surface-mahjong .qg-surface-tile--honor .qg-surface-tile-face {
  color: #111827;
}
.qg-surface-mahjong .qg-surface-tile--dots .qg-surface-tile-face,
.qg-surface-mahjong .qg-surface-tile--dots small {
  color: #2563eb;
}
.qg-surface-mahjong .qg-surface-tile--bamboo .qg-surface-tile-face,
.qg-surface-mahjong .qg-surface-tile--bamboo small {
  color: #15803d;
}
.qg-surface-mahjong .qg-surface-tile-pips,
.qg-surface-mahjong .qg-surface-tile-bamboo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px;
  width: 28px;
  min-height: 26px;
}
.qg-surface-mahjong .qg-surface-tile-pips i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2563eb;
  border: 1px solid rgba(15, 23, 42, 0.14);
}
.qg-surface-mahjong .qg-surface-tile-pips i:nth-child(even) {
  background: #dc2626;
}
.qg-surface-mahjong .qg-surface-tile-bamboo i {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22c55e, #15803d);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.26);
}
.qg-surface-mahjong .qg-surface-tile small {
  display: block;
  width: 100%;
  margin-top: 2px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.54rem;
  line-height: 1;
  text-align: center;
  font-weight: 900;
}
.qg-surface-mahjong .qg-surface-tile.is-safe {
  border-color: #7dd3fc;
  box-shadow: inset 0 -3px 0 rgba(15, 23, 42, 0.12), 0 0 0 2px rgba(125, 211, 252, 0.42);
}
.qg-surface-mahjong .qg-surface-tile.is-danger {
  border-color: #fb7185;
  box-shadow: inset 0 -3px 0 rgba(15, 23, 42, 0.12), 0 0 0 2px rgba(251, 113, 133, 0.42);
}
.qg-surface-mahjong-timeline {
  margin: 0;
  padding: 8px 8px 8px 28px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.5);
  color: #ecfeff;
  font-size: 0.76rem;
}
.qg-surface-mahjong-timeline li.is-mistake button {
  border-color: rgba(251, 113, 133, 0.78);
  background: rgba(127, 29, 29, 0.32);
  color: #ffe4e6;
}
.qg-surface-mahjong-timeline button {
  width: 100%;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.45);
  color: #ecfeff;
  text-align: left;
}
.qg-surface-mahjong-timeline b,
.qg-surface-mahjong-timeline span {
  display: block;
}
.qg-surface-card,
.qg-surface-tile,
.qg-surface-pit,
.qg-surface-store,
.qg-surface-point,
.qg-surface-chip,
.qg-surface-zone-drop,
.qg-surface-actions button,
.qg-surface-footer button {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  font-weight: 900;
}
.qg-surface-card.is-movable,
.qg-surface-tile.is-movable,
.qg-surface-pit.is-movable,
.qg-surface-store.is-movable,
.qg-surface-point.is-movable,
.qg-surface-chip.is-movable,
.qg-surface-zone-drop.is-movable,
.qg-surface-actions button.is-movable,
.qg-surface-backgammon-box.is-movable {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.42), 0 10px 22px rgba(15, 23, 42, 0.22);
}
.qg-surface-card.is-destination,
.qg-surface-tile.is-destination,
.qg-surface-pit.is-destination,
.qg-surface-store.is-destination,
.qg-surface-point.is-destination,
.qg-surface-chip.is-destination,
.qg-surface-zone-drop.is-destination,
.qg-surface-actions button.is-destination,
.qg-surface-backgammon-box.is-destination {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.42), 0 10px 22px rgba(15, 23, 42, 0.22);
}
.qg-surface-card.is-selected,
.qg-surface-tile.is-selected,
.qg-surface-pit.is-selected,
.qg-surface-store.is-selected,
.qg-surface-point.is-selected,
.qg-surface-chip.is-selected,
.qg-surface-zone-drop.is-selected,
.qg-surface-actions button.is-selected,
.qg-surface-backgammon-box.is-selected {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.44), 0 10px 22px rgba(15, 23, 42, 0.22);
}
.qg-surface-card.is-completed,
.qg-surface-tile.is-completed,
.qg-surface-pit.is-completed,
.qg-surface-store.is-completed,
.qg-surface-point.is-completed,
.qg-surface-chip.is-completed,
.qg-surface-zone-drop.is-completed,
.qg-surface-actions button.is-completed,
.qg-surface-backgammon-box.is-completed {
  border-color: #86efac;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.38);
}
.qg-surface-card.is-capture-target,
.qg-surface-tile.is-capture-target,
.qg-surface-pit.is-capture-target,
.qg-surface-store.is-capture-target,
.qg-surface-point.is-capture-target,
.qg-surface-cell.is-capture-target {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.38);
}
.qg-surface-card,
.qg-surface-tile {
  min-height: 82px;
}
.qg-surface-poker-table {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 720px);
  gap: 10px;
  padding: 12px;
  border: 2px solid rgba(251, 113, 133, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(34, 197, 94, 0.18), rgba(31, 15, 22, 0.96) 58%),
    #1f0f16;
}
.qg-surface-poker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qg-surface-poker-meta span,
.qg-surface-chip {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.56);
  color: #ffe4e6;
  font-size: 0.76rem;
}
.qg-surface-poker-zone {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(251, 113, 133, 0.24);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.44);
}
.qg-surface-poker-zone h4 {
  margin: 0;
  color: #fecdd3;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-surface-poker-zone > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.qg-surface-poker-table .qg-surface-card {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 68px;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(145deg, #fffffc, #f1e8d9);
  color: #111827;
  box-shadow: inset -2px -3px 0 rgba(15, 23, 42, 0.10), inset 1px 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(0, 0, 0, 0.24);
}
.qg-surface-poker-table .qg-surface-guided-hint {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: 6px;
  background: rgba(8, 47, 73, 0.54);
  color: #cffafe;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-surface-poker-table .qg-surface-playing-card.is-movable::after {
  content: "クリック";
  position: absolute;
  right: -6px;
  bottom: -7px;
  z-index: 3;
  pointer-events: none;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #facc15);
  color: #082f49;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}
.qg-surface-asset-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.qg-surface-asset-fallback {
  position: relative;
  z-index: 2;
}
.has-asset .qg-surface-asset-fallback {
  opacity: 0;
}
.qg-surface-playing-card.has-asset {
  min-width: 52px;
  min-height: 73px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.qg-surface-playing-card.has-asset .qg-surface-asset-img {
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.qg-surface-playing-card.is-red-card {
  color: #b91c1c;
}
.qg-surface-playing-card.is-black-card {
  color: #111827;
}
.qg-surface-card-corner {
  position: absolute;
  top: 5px;
  left: 5px;
  display: grid;
  justify-items: start;
  gap: 0;
  font-size: 0.62rem;
  line-height: .9;
}
.qg-surface-card-corner--bottom {
  top: auto;
  left: auto;
  right: 5px;
  bottom: 5px;
  justify-items: end;
}
.qg-surface-card-corner b,
.qg-surface-card-corner i {
  display: block;
  font-style: normal;
  font-weight: 950;
}
.qg-surface-card-suit {
  font-size: 1.7rem;
  line-height: 1;
}
.qg-surface-hanafuda-table {
  display: grid;
  gap: 10px;
  width: min(100%, 680px);
}
.qg-surface-hanafuda-zone {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(250, 204, 21, 0.32);
  border-radius: 8px;
  background: rgba(35, 18, 10, 0.72);
}
.qg-surface-hanafuda-zone h4 {
  margin: 0;
  color: #fef3c7;
  font-size: 0.8rem;
  font-weight: 900;
}
.qg-surface-hanafuda-zone > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.qg-surface-card--hanafuda {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  width: 76px;
  min-height: 92px;
  overflow: hidden;
  border-color: rgba(36, 21, 15, 0.74);
  background:
    radial-gradient(circle at 50% 38%, var(--qg-hanafuda-tint, rgba(180, 83, 9, .2)), transparent 42%),
    linear-gradient(180deg, #fff7ed, #f2dfbd);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .74), 0 4px 10px rgba(0, 0, 0, .24);
}
.qg-surface-card--hanafuda.has-asset {
  width: 76px;
  min-height: 112px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.qg-surface-card--hanafuda.has-asset::before {
  content: none;
}
.qg-surface-card--hanafuda.has-asset .qg-surface-asset-img {
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.qg-surface-card--hanafuda::before {
  content: "";
  position: absolute;
  inset: 8px 9px 25px;
  border-radius: 8px;
  background: var(--qg-hanafuda-color, #92400e);
  opacity: .14;
}
.qg-surface-card--hanafuda .qg-surface-hanafuda-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  color: var(--qg-hanafuda-color, #92400e);
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 950;
}
.qg-surface-card--hanafuda .qg-surface-hanafuda-label {
  position: absolute;
  top: 6px;
  left: 7px;
  color: #24150f;
  font-size: 0.64rem;
  font-weight: 950;
}
.qg-surface-card--hanafuda small {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--qg-hanafuda-band, #9f1239);
  color: #fff7ed;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 950;
}
.qg-surface-card--hanafuda.is-bright,
.qg-surface-card--hanafuda.is-light {
  box-shadow: inset 0 0 0 2px #facc15;
}
.qg-surface-card--hanafuda.is-ribbon { --qg-hanafuda-band: #be123c; }
.qg-surface-card--hanafuda.is-animal { --qg-hanafuda-band: #7c2d12; }
.qg-surface-card--hanafuda.is-chaff { --qg-hanafuda-band: #475569; }
.qg-surface-card--hanafuda.is-bright,
.qg-surface-card--hanafuda.is-light { --qg-hanafuda-band: #d97706; }
.qg-surface-card--hanafuda.month-01 { --qg-hanafuda-color: #047857; --qg-hanafuda-tint: rgba(4, 120, 87, .24); }
.qg-surface-card--hanafuda.month-02 { --qg-hanafuda-color: #be123c; --qg-hanafuda-tint: rgba(190, 18, 60, .22); }
.qg-surface-card--hanafuda.month-03 { --qg-hanafuda-color: #db2777; --qg-hanafuda-tint: rgba(219, 39, 119, .22); }
.qg-surface-card--hanafuda.month-04 { --qg-hanafuda-color: #7c3aed; --qg-hanafuda-tint: rgba(124, 58, 237, .20); }
.qg-surface-card--hanafuda.month-05 { --qg-hanafuda-color: #2563eb; --qg-hanafuda-tint: rgba(37, 99, 235, .20); }
.qg-surface-card--hanafuda.month-06 { --qg-hanafuda-color: #e11d48; --qg-hanafuda-tint: rgba(225, 29, 72, .22); }
.qg-surface-card--hanafuda.month-07 { --qg-hanafuda-color: #92400e; --qg-hanafuda-tint: rgba(146, 64, 14, .24); }
.qg-surface-card--hanafuda.month-08 { --qg-hanafuda-color: #64748b; --qg-hanafuda-tint: rgba(100, 116, 139, .22); }
.qg-surface-card--hanafuda.month-09 { --qg-hanafuda-color: #d97706; --qg-hanafuda-tint: rgba(217, 119, 6, .22); }
.qg-surface-card--hanafuda.month-10 { --qg-hanafuda-color: #b91c1c; --qg-hanafuda-tint: rgba(185, 28, 28, .22); }
.qg-surface-card--hanafuda.month-11 { --qg-hanafuda-color: #0f766e; --qg-hanafuda-tint: rgba(15, 118, 110, .23); }
.qg-surface-card--hanafuda.month-12 { --qg-hanafuda-color: #2563eb; --qg-hanafuda-tint: rgba(37, 99, 235, .20); }
.qg-surface-zone-empty {
  color: #fed7aa;
  font-size: 0.76rem;
  font-weight: 800;
}
.qg-surface-zone-drop {
  min-height: 44px;
  padding: 8px 12px;
  border-style: dashed;
  background: rgba(15, 23, 42, 0.42);
  color: #e2e8f0;
}
.qg-surface-hanafuda-timeline {
  margin: 0;
  padding: 8px 8px 8px 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  color: #ffedd5;
  font-size: 0.76rem;
}
.qg-surface-mancala {
  grid-template-columns: minmax(70px, 0.7fr) minmax(0, 6fr) minmax(70px, 0.7fr);
  grid-template-rows: repeat(2, minmax(74px, auto));
  align-items: stretch;
  padding: 10px;
  border: 2px solid rgba(251, 191, 36, 0.46);
  border-radius: 8px;
  background: linear-gradient(135deg, #5c3b1e, #8b5a2b 52%, #4a2d16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 36px rgba(15, 23, 42, 0.24);
}
.qg-surface-mancala-pits {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.qg-surface-mancala-pits--top { grid-row: 1; }
.qg-surface-mancala-pits--bottom { grid-row: 2; }
.qg-surface-pit,
.qg-surface-store {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 74px;
  padding: 7px;
  background: radial-gradient(circle at 50% 38%, #9a6a36, #593519);
  box-shadow: inset 0 9px 18px rgba(0, 0, 0, 0.32);
}
.qg-surface-store {
  grid-row: 1 / span 2;
  min-height: 156px;
  background: radial-gradient(circle at 50% 38%, #b78342, #5c3517);
}
.qg-surface-store--north { grid-column: 1; }
.qg-surface-store--south { grid-column: 3; }
.qg-surface-pit span,
.qg-surface-store span {
  color: #fef3c7;
  font-size: 0.72rem;
}
.qg-surface-pit b,
.qg-surface-store b {
  color: #fff7ed;
}
.qg-surface-pit em,
.qg-surface-store em {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 3px;
  width: 100%;
  min-height: 28px;
  font-style: normal;
}
.qg-surface-pebble,
.qg-surface-pebble-empty {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}
.qg-surface-pebble {
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
}
.qg-surface-pebble--0 { background: #e0f2fe; }
.qg-surface-pebble--1 { background: #fde68a; }
.qg-surface-pebble--2 { background: #fca5a5; }
.qg-surface-pebble--3 { background: #bbf7d0; }
.qg-surface-pebble--4 { background: #ddd6fe; }
.qg-surface-pebble-empty {
  border: 1px dashed rgba(254, 243, 199, 0.42);
}
.qg-surface-mancala-log {
  display: grid;
  gap: 6px;
  width: min(100%, 560px);
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.qg-surface-mancala-log button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 6px;
  padding: 7px 9px;
  background: rgba(67, 42, 20, 0.82);
  color: #fef3c7;
}
.qg-surface-actions,
.qg-surface-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.qg-surface-footer {
  align-items: center;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 800;
}
@keyframes qg-surface-spin {
  to { transform: rotate(360deg); }
}
.qg-game-info-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 14px;
}
.qg-game-info-grid div {
  min-width: 0; padding: 12px; border: 1px solid #e5e7eb;
  border-radius: 8px; background: #f8fafc;
}
.qg-game-info-grid span {
  display: block; color: #64748b; font-size: 0.72rem;
  font-weight: 900; text-transform: uppercase;
}
.qg-game-info-grid strong {
  display: block; margin-top: 5px; color: #111827;
  font-size: 0.9rem; overflow-wrap: anywhere;
}
.qg-game-guide {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 0 14px 14px;
}
.qg-game-guide article {
  padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff;
}
.qg-game-guide h3 {
  margin: 0 0 6px; color: #111827; font-size: 0.9rem; font-weight: 900;
}
.qg-game-guide p {
  margin: 0; color: #475569; font-size: 0.9rem; line-height: 1.6;
}
.qg-game-screenshots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; padding: 0 14px 14px;
}
.qg-game-screenshots img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; border: 1px solid #e5e7eb; background: #f8fafc;
}
.qg-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px; }
.qg-action-btn { padding: 9px 14px; background: #0f766e; color: #fff; }
.qg-action-btn:hover { background: #115e59; }
.qg-action-btn.qg-is-returning { background: #374151; }
.qg-action-btn.qg-is-returning:hover { background: #1f2937; }
.qg-action-dojo {
  background: linear-gradient(135deg, #111827, #7c2d12);
  border-color: rgba(245,158,11,0.34);
}
.qg-action-dojo:hover { background: linear-gradient(135deg, #020617, #92400e); }
.qg-icon-btn { width: 40px; background: #f1f5f9; color: #334155; }
.qg-text-btn { min-height: 32px; padding: 6px 10px; background: #e2e8f0; color: #334155; font-size: 0.78rem; }
.qg-dojo-panel {
  margin: 0 16px 14px;
  border: 1px solid rgba(148,163,184,0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(67,20,7,0.88)),
    #0f172a;
  color: #e2e8f0;
  overflow: hidden;
}
.qg-dojo-panel[hidden] { display: none; }
.qg-dojo-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(148,163,184,0.24);
}
.qg-dojo-head strong {
  color: #f8fafc;
  font-weight: 900;
}
.qg-dojo-head span {
  color: #fbbf24;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-dojo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.qg-dojo-card {
  min-height: 186px;
  border: 1px solid rgba(148,163,184,0.26);
  border-radius: 8px;
  background: rgba(15,23,42,0.76);
  overflow: hidden;
}
.qg-dojo-card:hover {
  border-color: #f59e0b;
  background: rgba(30,41,59,0.88);
}
.qg-dojo-card-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 132px;
  padding: 11px;
  border: 0;
  background: transparent;
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}
.qg-dojo-card-button:disabled {
  cursor: wait;
  opacity: 0.72;
}
.qg-dojo-sigil {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #020617;
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.36);
  box-shadow: 0 0 18px rgba(245,158,11,0.16);
}
.qg-dojo-main {
  min-width: 0;
}
.qg-dojo-main strong,
.qg-dojo-main em,
.qg-dojo-main small,
.qg-dojo-main b {
  display: block;
}
.qg-dojo-main strong {
  color: #f8fafc;
  font-size: 0.86rem;
  line-height: 1.22;
}
.qg-dojo-main em {
  margin-top: 3px;
  color: #fbbf24;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}
.qg-dojo-main small {
  margin-top: 7px;
  color: #cbd5e1;
  font-size: 0.72rem;
  line-height: 1.45;
}
.qg-dojo-main .qg-dojo-learning {
  color: #fef3c7;
  font-weight: 900;
}
.qg-dojo-main b {
  margin-top: 8px;
  color: #5eead4;
  font-size: 0.68rem;
  font-weight: 800;
}
.qg-dojo-meta,
.qg-dojo-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 11px 10px 63px;
}
.qg-dojo-meta span,
.qg-dojo-meta a,
.qg-dojo-traits span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  padding: 3px 7px;
  color: #cbd5e1;
  font-size: 0.66rem;
  font-weight: 900;
  text-decoration: none;
}
.qg-dojo-meta a {
  border-color: rgba(94,234,212,0.34);
  color: #5eead4;
}
.qg-dojo-traits span {
  background: rgba(15,118,110,0.2);
  color: #ccfbf1;
}
.qg-match-options { padding: 0 16px 12px; }
.qg-match-options label {
  display: grid;
  grid-template-columns: auto minmax(180px, 260px);
  align-items: center;
  justify-content: start;
  gap: 10px;
  color: #475569;
  font-weight: 800;
  font-size: 0.86rem;
}
.qg-match-options select {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #111827;
  font-weight: 700;
}
.qg-ai-assist-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 800;
}
.qg-ai-assist-options label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
}
.qg-ai-assist-options label.is-disabled {
  opacity: 0.58;
}
.qg-ai-assist-options input {
  accent-color: #d97706;
}
.qg-entry-time-controls a {
  color: inherit;
  text-decoration: none;
}
.qg-entry-time-controls a:hover { text-decoration: underline; }
.qg-entry-time-controls small {
  margin-left: 4px;
  opacity: .78;
}
.qg-current-user { margin: 0 16px 12px; padding: 9px 10px; border-radius: 8px; background: #f8fafc; color: #475569; font-weight: 700; }
.qg-flow-panel {
  margin: 0 16px 12px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
}
.qg-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.qg-flow-steps span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-flow-steps span.is-active {
  border-color: #0f766e;
  background: #e6fffb;
  color: #0f766e;
}
.qg-flow-steps span.is-complete {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}
.qg-flow-steps strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qg-flow-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.84rem;
}
.qg-flow-message strong { color: #111827; white-space: nowrap; }
.qg-flow-message span { min-width: 0; }
.qg-match-board { margin: 0 16px 16px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.qg-board-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: #111827; color: #fff; flex-wrap: wrap; }
.qg-board-head strong, .qg-board-head span { min-width: 0; }
.qg-board-head > strong { flex: 1 1 220px; }
.qg-board-head > span { flex: 1 1 220px; color: #cbd5e1; font-size: 0.82rem; }
.qg-review-share-cta {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 16px;
}
.qg-review-share-cta[hidden] { display: none; }
.qg-board-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.qg-board-actions[hidden] { display: none; }
.qg-board-exit {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 800;
}
.qg-board-danger {
  border-color: rgba(248,113,113,0.5);
  color: #fecaca;
}
.qg-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,0.56);
}
.qg-choice-modal[hidden] { display: none; }
.qg-choice-dialog {
  width: min(360px, 100%);
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  box-shadow: 0 22px 70px rgba(15,23,42,0.3);
}
.qg-choice-dialog strong { display: block; font-size: 1.05rem; }
.qg-choice-dialog p { margin: 8px 0 14px; color: #64748b; }
.qg-choice-actions { display: flex; gap: 10px; justify-content: flex-end; }
.qg-board-exit[hidden] { display: none; }
.qg-theater-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #0f172a;
  border-bottom: 1px solid rgba(148,163,184,0.24);
  color: #e5e7eb;
}
.qg-theater-players[hidden] { display: none; }
.qg-player-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(148,163,184,0.32);
  border-radius: 8px;
  background: #172033;
}
.qg-player-card.is-turn { border-color: #f59e0b; box-shadow: inset 0 0 0 1px rgba(245,158,11,0.36); }
.qg-player-card > span {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: #0f766e;
  color: #fff;
  font-weight: 900;
}
.qg-player-card strong, .qg-player-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-player-card small { color: #94a3b8; font-size: 0.78rem; }
.qg-player-card em {
  min-width: 72px;
  text-align: right;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
}
.qg-theater-center { display: grid; place-items: center; gap: 2px; min-width: 86px; }
.qg-theater-center span { color: #5eead4; font-size: 0.7rem; font-weight: 900; }
.qg-theater-center strong { color: #fff; font-size: 0.78rem; text-align: center; }
.qg-clockbar {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #7c2d12;
  font-weight: 900;
}
.qg-clockbar[hidden] { display: none; }
.qg-clockbar strong { color: #334155; font-size: 0.78rem; text-align: center; }
.qg-clockbar span { min-width: 0; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.8); }
.qg-clockbar span:last-child { text-align: right; }
.qg-clockbar .is-active { background: #f97316; color: #fff; }
.qg-sfen-debug { margin: 0; min-height: 84px; padding: 12px; white-space: pre-wrap; background: #f8fafc; color: #334155; }
.qg-match-board .qg-shogi-area {
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.75), transparent 42%),
    linear-gradient(180deg, #fbf7ed, #f3ead7);
}
.qg-match-board .qg-shogi-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(34px, 1fr));
  width: 100%;
  max-width: min(560px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 5px;
  border: 3px solid #6f4217;
  border-radius: 6px;
  background: #6f4217;
  gap: 1.5px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(255,255,255,0.24);
}
.qg-match-board .qg-shogi-board-frame {
  width: 100%;
  max-width: min(610px, 96vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  grid-template-rows: 22px minmax(0, 1fr) 22px;
  gap: 4px;
  align-items: stretch;
}
.qg-match-board .qg-shogi-board-frame > .qg-shogi-board {
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  margin: 0;
}
.qg-match-board .qg-shogi-axis {
  display: grid;
  align-items: center;
  justify-items: center;
  color: rgba(107, 75, 42, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.qg-match-board .qg-shogi-axis--files {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.qg-match-board .qg-shogi-axis--ranks {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}
.qg-match-board .qg-shogi-axis--top { grid-column: 2; grid-row: 1; }
.qg-match-board .qg-shogi-axis--bottom { grid-column: 2; grid-row: 3; }
.qg-match-board .qg-shogi-axis--left { grid-column: 1; grid-row: 2; }
.qg-match-board .qg-shogi-axis--right { grid-column: 3; grid-row: 2; }
.qg-match-board .qg-shogi-axis-corner {
  min-width: 0;
  min-height: 0;
}
.qg-match-board .qg-shogi-board.qg-board-waiting::after {
  content: attr(data-board-feedback);
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 6;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,0.82);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(15,23,42,0.22);
}
.qg-match-board .qg-shogi-board.qg-board-ai-thinking::after {
  background: rgba(124,45,18,0.9);
}
.qg-match-board .qg-shogi-cell {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 44%),
    #dfb46b;
  color: #1f2937;
  font: inherit;
  cursor: default;
}
.qg-match-board .qg-shogi-cell:hover { background: #f2c982; }
.qg-match-board .qg-shogi-cell.qg-is-movable { cursor: pointer; box-shadow: inset 0 0 0 3px rgba(13, 148, 136, 0.5); }
.qg-match-board .qg-shogi-cell.qg-is-selected { background: #99f6e4; box-shadow: inset 0 0 0 3px #0f766e; }
.qg-match-board .qg-shogi-cell.qg-is-destination { cursor: pointer; background: #fde68a; box-shadow: inset 0 0 0 3px #d97706; }
.qg-match-board .qg-shogi-cell.qg-is-destination::after {
  content: "";
  position: absolute;
  inset: 34%;
  z-index: 1;
  border-radius: 999px;
  background: rgba(217,119,6,0.34);
  pointer-events: none;
}
.qg-match-board .qg-shogi-cell.qg-is-dragging {
  cursor: grabbing;
  background: #99f6e4;
  box-shadow: inset 0 0 0 3px #0f766e, 0 10px 18px rgba(15,118,110,0.22);
}
.qg-match-board .qg-shogi-cell.qg-is-dragging .qg-shogi-piece,
.qg-match-board .qg-shogi-hand-piece.qg-is-dragging {
  filter: drop-shadow(0 12px 14px rgba(0,0,0,0.26));
}
.qg-match-board .qg-shogi-cell.qg-is-dragging .qg-shogi-piece {
  transform: rotate(var(--qg-shogi-piece-rotation, 0deg)) translateY(-5px) scale(1.04);
}
.qg-match-board .qg-shogi-hand-piece.qg-is-dragging {
  transform: translateY(-5px) scale(1.04);
}
.qg-match-board .qg-shogi-cell.qg-is-drop-target {
  background: #bfdbfe;
  box-shadow: inset 0 0 0 3px #2563eb;
}
.qg-match-board .qg-shogi-cell.qg-is-lastmove::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  border: 2px solid rgba(37,99,235,0.72);
  pointer-events: none;
}
.qg-match-board .qg-shogi-cell.qg-is-check {
  background: #fecaca;
  box-shadow: inset 0 0 0 3px #dc2626;
}
.qg-match-board .qg-shogi-coord {
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 3;
  font-size: 0.58rem;
  line-height: 1;
  color: rgba(51, 65, 85, 0.5);
  opacity: 0;
  pointer-events: none;
}
.qg-match-board .qg-shogi-cell:hover .qg-shogi-coord { opacity: 0.7; }
.qg-match-board .qg-shogi-piece {
  --qg-shogi-piece-rotation: 0deg;
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 74%;
  height: 84%;
  padding-top: 7%;
  border: 1px solid rgba(73, 42, 12, 0.38);
  border-radius: 3px 3px 7px 7px;
  clip-path: polygon(50% 0%, 91% 21%, 83% 100%, 17% 100%, 9% 21%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58), transparent 34%),
    linear-gradient(180deg, #fbe8ad, #d99638);
  color: #111827;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: 0 2px 0 rgba(87, 47, 13, 0.28);
  pointer-events: none;
  transform: rotate(var(--qg-shogi-piece-rotation, 0deg));
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.qg-match-board .qg-shogi-cell.qg-is-check .qg-shogi-piece {
  border-color: rgba(185,28,28,0.72);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.2), 0 2px 0 rgba(87, 47, 13, 0.28);
}
.qg-match-board .qg-shogi-piece-gote {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), transparent 34%),
    linear-gradient(180deg, #ead7b0, #bc8443);
  color: #1f2937;
}
.qg-match-board .qg-shogi-piece-opponent {
  --qg-shogi-piece-rotation: 180deg;
}
.qg-match-board .qg-shogi-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid #e7d7bd;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}
.qg-match-board .qg-shogi-hand-gote { justify-content: flex-start; }
.qg-match-board .qg-shogi-hand-sente { justify-content: flex-end; }
.qg-match-board .qg-shogi-hand-top { justify-content: flex-start; }
.qg-match-board .qg-shogi-hand-bottom { justify-content: flex-end; }
.qg-match-board .qg-shogi-hand-label { color: #6b4b2a; font-size: 0.76rem; font-weight: 900; }
.qg-match-board .qg-shogi-hand-piece {
  appearance: none;
  -webkit-appearance: none;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid #b7791f;
  border-radius: 6px;
  background: #fef3c7;
  color: #1f2937;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.qg-match-board .qg-shogi-hand-piece:disabled { opacity: 0.5; }
.qg-match-board .qg-shogi-hand-piece.qg-is-selected { border-color: #0f766e; background: #99f6e4; }
.qg-match-board .qg-shogi-hand-piece.qg-is-dragging {
  border-color: #2563eb;
  background: #dbeafe;
  box-shadow: 0 10px 18px rgba(37,99,235,0.22);
  cursor: grabbing;
}
.qg-match-board .qg-shogi-hand-empty { color: #a38b70; font-weight: 800; }
.qg-move-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 10px; border-top: 1px solid #e5e7eb; }
.qg-move-form input, .qg-move-form button { min-height: 38px; border-radius: 8px; border: 1px solid #cbd5e1; padding: 0 10px; }
.qg-move-form button { background: #334155; color: #fff; font-weight: 800; }
.qg-move-list { margin: 0; padding: 10px 10px 10px 34px; max-height: 180px; overflow: auto; }
.qg-result-panel {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0 10px 10px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.qg-result-panel[hidden] { display: none; }
.qg-result-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20,184,166,0.16), transparent 36%, rgba(217,119,6,0.16));
}
.qg-result-win { border-color: #14b8a6; box-shadow: 0 12px 28px rgba(20, 184, 166, 0.12); }
.qg-result-loss { border-color: #f97316; box-shadow: 0 12px 28px rgba(249, 115, 22, 0.1); }
.qg-result-draw { border-color: #94a3b8; }
.qg-result-burst {
  position: absolute;
  top: -56px;
  right: -48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 22px solid rgba(20, 184, 166, 0.18);
  animation: qg-result-pulse 1.4s ease-out 2;
}
.qg-result-loss .qg-result-burst { border-color: rgba(249, 115, 22, 0.16); }
.qg-result-main, .qg-result-ratings, .qg-result-review, .qg-result-actions { position: relative; }
.qg-result-kicker {
  margin: 0 0 2px;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qg-result-main h3 { margin: 0; color: #111827; font-size: 1.55rem; font-weight: 900; }
.qg-result-main p { margin: 3px 0 0; color: #475569; }
.qg-result-ratings { display: grid; gap: 8px; }
.qg-rating-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}
.qg-rating-change span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-rating-change strong { color: #111827; }
.qg-rating-change em { min-width: 42px; text-align: right; font-style: normal; color: #64748b; }
.qg-rating-change.is-up em { color: #0f766e; }
.qg-rating-change.is-down em { color: #c2410c; }
.qg-rating-note {
  padding: 9px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 700;
  font-size: 0.82rem;
}
.qg-result-save-toast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, 0.36);
  border-left: 4px solid #0f766e;
  border-radius: 8px;
  background: #f0fdfa;
  color: #134e4a;
}
.qg-result-save-toast[hidden] {
  display: none;
}
.qg-result-save-toast strong,
.qg-result-save-toast span {
  display: block;
}
.qg-result-save-toast strong {
  font-size: 0.9rem;
  font-weight: 900;
}
.qg-result-save-toast span {
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.45;
}
.qg-result-review { display: grid; gap: 8px; }
.qg-result-review > strong { color: #111827; font-size: 0.9rem; }
.qg-review-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qg-review-metrics span {
  padding: 9px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78rem;
}
.qg-review-metrics strong { display: block; color: #111827; font-size: 0.95rem; }
.qg-review-moves { margin: 0; padding-left: 22px; color: #334155; max-height: 120px; overflow: auto; }
.qg-review-learning {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(45, 125, 109, 0.18);
  border-radius: 8px;
  background: rgba(45, 125, 109, 0.08);
  color: #334155;
  font-size: 0.86rem;
}
.qg-review-learning strong { color: #0f766e; }
.qg-review-learning span { flex: 1 1 220px; }
.qg-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qg-more-actions { position: relative; }
.qg-more-actions summary {
  list-style: none;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 800;
  cursor: pointer;
}
.qg-more-actions summary::-webkit-details-marker { display: none; }
.qg-more-actions summary::after { content: '...'; margin-left: 6px; letter-spacing: 2px; }
.qg-more-actions > div {
  position: absolute;
  z-index: 10;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,0.14);
}
.qg-more-actions .qg-text-btn { justify-content: flex-start; }
.qg-review-controls {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}
.qg-review-controls[hidden] { display: none; }
.qg-review-controls button {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
}
.qg-review-controls button:disabled { opacity: 0.45; }
.qg-review-controls span {
  text-align: center;
  color: #334155;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.qg-vs-cutin, .qg-result-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
}
.qg-vs-cutin[hidden], .qg-result-modal[hidden] { display: none; }
.qg-vs-cutin > div, .qg-result-dialog {
  width: min(680px, 92vw);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  text-align: center;
}
.qg-vs-cutin > div {
  display: grid;
  gap: 10px;
  padding: clamp(28px, 6vw, 56px);
  animation: qg-vs-enter 0.24s ease-out;
}
.qg-vs-cutin.is-leaving > div { animation: qg-vs-leave 0.24s ease-in forwards; }
.qg-vs-cutin span, .qg-result-dialog > span {
  color: #5eead4;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-vs-cutin strong {
  color: #fff;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  font-weight: 900;
}
.qg-vs-cutin small { color: #cbd5e1; font-weight: 800; }
.qg-result-dialog {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 5vw, 44px);
}
.qg-result-dialog strong {
  color: #fff;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
}
.qg-result-dialog p { margin: 0; color: #cbd5e1; font-weight: 800; }
.qg-result-modal.qg-result-win .qg-result-dialog { border-color: rgba(20,184,166,0.58); }
.qg-result-modal.qg-result-loss .qg-result-dialog { border-color: rgba(249,115,22,0.58); }
.qg-result-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
@keyframes qg-result-pulse {
  0% { transform: scale(0.82); opacity: 0.45; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes qg-vs-enter {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes qg-vs-leave {
  to { transform: translateY(-8px) scale(0.99); opacity: 0; }
}
.qg-list-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  width: 100%; padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; text-align: left;
}
.qg-list-row:hover { border-color: #14b8a6; }
.qg-list-row-split {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}
.qg-list-main-btn {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.qg-list-main-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qg-list-profile-link,
.qg-list-profile-pair {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-left: 1px solid #e5e7eb;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.qg-list-profile-pair a {
  padding: 5px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  text-decoration: none;
}
.qg-list-profile-link:hover,
.qg-list-profile-pair a:hover {
  color: #fff;
  background: #0f766e;
}
.qg-empty { padding: 12px; color: #64748b; background: #f8fafc; border-radius: 8px; }
.qg-rating-list { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; }
.qg-rating-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px; background: #f8fafc; border-radius: 8px; border: 1px solid transparent; }
.qg-rating-list strong {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.qg-rating-list strong small {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-rating-list span { color: #0f766e; font-weight: 900; }
.qg-rating-list em { font-style: normal; font-weight: 900; color: #a16207; }
.qg-rating-list li.qg-rating-bot {
  background: #111827;
  color: #e2e8f0;
  border-color: rgba(245,158,11,0.34);
}
.qg-rating-list li.qg-rating-bot span { color: #fbbf24; }
.qg-rating-list li.qg-rating-bot em { color: #5eead4; }
.qg-rating-list li.qg-rating-bot strong small { color: #fbbf24; }
.qg-player-link {
  color: inherit;
  text-decoration: none;
}
.qg-player-link:hover {
  color: #0d9488;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qg-rating-bot .qg-player-link:hover {
  color: #99f6e4;
}
.qg-planned-state { display: grid; place-items: center; gap: 8px; min-height: 220px; padding: 24px; color: #64748b; text-align: center; }
.qg-planned-state i { font-size: 2.8rem; color: #334155; }
.qg-planned-state strong { color: #111827; font-size: 1.25rem; }
.qg-planned-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.qg-related { margin-top: 6px; }

body.qg-theater-active .gp-topbar,
body.qg-theater-active .gp-header,
body.qg-theater-active .gp-nav,
body.qg-theater-active .gp-footer {
  display: none;
}
body.qg-theater-active .gp-main {
  width: 100%;
  max-width: none;
  margin-top: 0 !important;
  padding-left: 0;
  padding-right: 0;
}
body.qg-theater-active { background: #0b1020; }

.qg-mode-lobby .qg-match-board,
.qg-mode-matching .qg-match-board {
  display: none;
}
.qg-mode-lobby .qg-play-panel,
.qg-mode-matching .qg-play-panel {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
}
.qg-mode-lobby .qg-actions,
.qg-mode-matching .qg-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
.qg-mode-lobby .qg-action-btn,
.qg-mode-matching .qg-action-btn {
  min-height: 54px;
}
.qg-mode-matching .qg-flow-panel {
  border-color: #f59e0b;
  background: #fffbeb;
}
.qg-mode-matching .qg-flow-message {
  background: #fff7ed;
}

.qg-mode-theater {
  min-height: 100vh;
  padding: 0;
  gap: 0;
  color: #e5e7eb;
}
.qg-mode-theater .qg-breadcrumb,
.qg-mode-theater .qg-detail-hero,
.qg-mode-theater .qg-game-info,
.qg-mode-theater .qg-competition-panel,
.qg-mode-theater .qg-detail-style-router,
.qg-mode-theater .qg-play-side,
.qg-mode-theater .qg-related,
.qg-mode-theater .qg-panel-head,
.qg-mode-theater .qg-start-router,
.qg-mode-theater .qg-actions,
.qg-mode-theater .qg-entry-secondary-actions,
.qg-mode-theater .qg-dojo-panel,
.qg-mode-theater .qg-match-options,
.qg-mode-theater .qg-current-user,
.qg-mode-theater .qg-flow-panel {
  display: none;
}
.qg-mode-theater .qg-play-grid {
  display: block;
}
.qg-mode-theater .qg-play-panel {
  border: 0;
  background: transparent;
}
.qg-mode-theater .qg-match-board {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(250px, 340px);
  grid-template-areas:
    "head head"
    "players players"
    "clock clock"
    "board side"
    "form side"
    "result side";
  gap: 0;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0b1020;
}
.qg-mode-theater .qg-board-head { grid-area: head; min-height: 46px; }
.qg-mode-theater .qg-theater-players { grid-area: players; }
.qg-mode-theater .qg-clockbar { grid-area: clock; }
.qg-mode-theater .qg-shogi-area {
  grid-area: board;
  align-content: center;
  min-height: calc(100vh - 170px);
  padding: clamp(14px, 3vw, 28px);
}
.qg-mode-theater .qg-shogi-board {
  max-width: min(74vh, 760px, 94vw);
}
.qg-mode-theater .qg-shogi-hand {
  min-height: 54px;
  padding: 9px 12px;
  border-color: rgba(250,204,21,0.24);
  background: rgba(8,11,18,0.64);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.qg-mode-theater .qg-shogi-hand-label {
  color: #fde68a;
  font-size: 0.88rem;
  letter-spacing: 0;
}
.qg-mode-theater .qg-shogi-hand-piece {
  min-width: 40px;
  min-height: 38px;
  padding: 6px 10px;
  border-color: rgba(250,204,21,0.52);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbe8ad, #d99638);
  box-shadow: 0 2px 0 rgba(87,47,13,0.28);
}
.qg-mode-theater .qg-shogi-hand-empty {
  color: #94a3b8;
}
.qg-mode-theater .qg-move-form {
  grid-area: form;
  border-top-color: rgba(255,255,255,0.12);
  background: #111827;
}
.qg-mode-theater .qg-move-list {
  grid-area: side;
  max-height: none;
  margin: 0;
  padding: 14px 14px 14px 38px;
  border-left: 1px solid rgba(148,163,184,0.24);
  background: #111827;
  color: #cbd5e1;
}
.qg-mode-theater .qg-move-list::before {
  content: "棋譜";
  display: block;
  margin: 0 0 10px -24px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
  color: #fde68a;
  font-size: 0.82rem;
  font-weight: 900;
}
.qg-mode-theater .qg-move-list:empty::after {
  content: "指し手がここに表示されます";
  display: block;
  margin-left: -24px;
  padding: 12px;
  border: 1px dashed rgba(148,163,184,0.28);
  border-radius: 8px;
  color: #94a3b8;
  font-weight: 800;
}
.qg-mode-theater .qg-move-list li {
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.qg-mode-theater .qg-move-list li.is-current {
  background: #f59e0b;
  color: #111827;
  font-weight: 900;
}
.qg-mode-theater .qg-result-panel {
  grid-area: result;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* QuickGames My Page */
.qg-mypage {
  --qg-dark: #0b1020;
  --qg-panel: #101827;
  --qg-panel-2: #151f32;
  --qg-line: rgba(148,163,184,0.22);
  --qg-text-strong: #f8fafc;
  --qg-text: #cbd5e1;
  --qg-muted: #94a3b8;
  --qg-teal: #14b8a6;
  --qg-gold: #f59e0b;
  color: var(--qg-text);
  display: grid;
  gap: 14px;
}
.qg-mypage a { text-decoration: none; }
.qg-mypage-hero,
.qg-mypage-empty {
  background:
    linear-gradient(135deg, rgba(20,184,166,0.18), rgba(245,158,11,0.08) 42%, rgba(15,23,42,0.95)),
    var(--qg-dark);
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(2,6,23,0.28);
}
.qg-mypage-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.85fr);
  gap: 18px;
  padding: 22px;
}
.qg-mypage-empty {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 24px;
}
.qg-mypage-identity {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}
.qg-mypage-avatar {
  width: 82px;
  height: 82px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #1e293b, #020617);
  border: 1px solid rgba(255,255,255,0.18);
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 900;
  overflow: hidden;
}
.qg-mypage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qg-mypage-title { min-width: 0; }
.qg-mypage-kicker {
  margin: 0 0 6px;
  color: #5eead4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.qg-mypage h1,
.qg-mypage h2 {
  margin: 0;
  color: var(--qg-text-strong);
  letter-spacing: 0;
}
.qg-mypage h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
}
.qg-mypage h2 {
  font-size: 1rem;
}
.qg-mypage-rankline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.qg-mypage-rankline strong {
  color: var(--qg-gold);
  font-size: 1.8rem;
  line-height: 1;
}
.qg-mypage-rankline span,
.qg-mypage-rankline em {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.75rem;
  font-style: normal;
  color: #e2e8f0;
  background: rgba(15,23,42,0.7);
}
.qg-mypage-badges {
  grid-column: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qg-mypage-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.72);
  color: var(--qg-muted);
  font-size: 0.72rem;
  font-weight: 800;
}
.qg-mypage-badges .is-unlocked {
  color: #ecfeff;
  border-color: rgba(20,184,166,0.48);
  background: rgba(13,148,136,0.18);
}
.qg-mypage-new-player {
  border-color: rgba(94, 234, 212, 0.42) !important;
  color: #99f6e4 !important;
}
.qg-mypage-start-state {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px dashed rgba(94, 234, 212, 0.34);
  border-radius: 8px;
  background: rgba(8, 13, 26, 0.5);
}
.qg-mypage-start-state > i { color: #5eead4; font-size: 1.45rem; }
.qg-mypage-start-state strong { color: #f8fafc; }
.qg-mypage-start-state span { color: #94a3b8; font-size: 0.8rem; line-height: 1.55; }
.qg-mypage-start-state a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #0f766e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
}
.qg-rating-chart {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}
.qg-rating-chart > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
}
.qg-rating-chart span {
  color: var(--qg-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-rating-chart strong {
  color: var(--qg-text-strong);
  font-size: 1.6rem;
}
.qg-rating-chart svg {
  width: 100%;
  height: 124px;
  overflow: visible;
}
.qg-rating-chart line {
  stroke: rgba(148,163,184,0.18);
  stroke-width: 1;
}
.qg-rating-chart polyline {
  fill: none;
  stroke: var(--qg-teal);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(20,184,166,0.55));
}
.qg-rating-range {
  display: flex;
  justify-content: space-between;
}
.qg-mypage-summary,
.qg-mypage-cards,
.qg-tactics-grid,
.qg-account-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.qg-account-upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(20,184,166,0.42);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20,184,166,0.2), rgba(15,23,42,0.98));
  box-shadow: 0 18px 46px rgba(2,6,23,0.26);
}
.qg-account-upgrade div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.qg-account-upgrade span {
  color: var(--qg-teal);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-account-upgrade strong {
  color: var(--qg-text-strong);
  font-size: 0.98rem;
  line-height: 1.35;
}
.qg-account-upgrade p {
  margin: 0;
  color: var(--qg-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.qg-mypage-summary > div,
.qg-mypage-cards article,
.qg-tactics-grid article,
.qg-account-grid article {
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--qg-line);
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(17,24,39,0.94));
}
.qg-mypage-summary span,
.qg-mypage-cards span,
.qg-tactics-grid span,
.qg-account-grid span {
  display: block;
  color: var(--qg-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-mypage-summary strong,
.qg-mypage-cards strong,
.qg-tactics-grid strong,
.qg-account-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--qg-text-strong);
  font-size: 1.55rem;
  line-height: 1.05;
}
.qg-mypage-cards em,
.qg-tactics-grid em {
  display: block;
  margin-top: 5px;
  color: var(--qg-gold);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-mypage-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  background: #0f172a;
}
.qg-mypage-tabs button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--qg-muted);
  font-weight: 900;
}
.qg-mypage-tabs button.is-active {
  color: #ecfeff;
  border-color: rgba(20,184,166,0.5);
  background: rgba(20,184,166,0.16);
}
.qg-mypage-tabs button span {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #dc2626;
  font-size: 0.7rem;
}
.qg-mypage-panel {
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  overflow: hidden;
}
.qg-mypage-panel[hidden] { display: none; }
.qg-mypage-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}
.qg-mypage-panel-head h2 {
  color: #111827;
}
.qg-mypage-link,
.qg-mypage-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 6px;
  background: #0f766e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.qg-mypage-primary:hover,
.qg-mypage-link:hover { color: #fff; background: #0d9488; }
.qg-mypage-cards,
.qg-tactics-grid,
.qg-account-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}
.qg-mypage-cards article,
.qg-tactics-grid article,
.qg-account-grid article {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.qg-mypage-cards span,
.qg-tactics-grid span,
.qg-account-grid span { color: #64748b; }
.qg-mypage-cards strong,
.qg-tactics-grid strong,
.qg-account-grid strong { color: #0f172a; }
.qg-ladder-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}
.qg-ladder-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
}
.qg-ladder-grid article.is-unlocked {
  background: #ecfeff;
  border-color: #99f6e4;
}
.qg-ladder-grid article.is-current {
  background: #0f172a;
  border-color: #14b8a6;
  color: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(20,184,166,0.28);
}
.qg-ladder-grid span,
.qg-ladder-grid small {
  display: block;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
}
.qg-ladder-grid strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 1rem;
}
.qg-ladder-grid em {
  display: block;
  margin: 3px 0 7px;
  color: #a16207;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}
.qg-ladder-grid .is-current span,
.qg-ladder-grid .is-current small { color: #94a3b8; }
.qg-ladder-grid .is-current strong { color: #f8fafc; }
.qg-ladder-grid .is-current em { color: #5eead4; }
.qg-mypage-summary-empty {
  display: grid;
  gap: 5px;
  margin: 0 14px 14px;
  padding: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
}
.qg-mypage-summary-empty strong { color: #0f172a; }
.qg-mypage-summary-empty span { font-size: 0.82rem; }
.qg-title-table,
.qg-history-list {
  padding: 12px;
  display: grid;
  gap: 8px;
}
.qg-title-row,
.qg-history-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  color: #111827;
}
.qg-title-row {
  grid-template-columns: minmax(160px, 1.4fr) 90px 110px 90px;
}
.qg-title-row:hover,
.qg-history-row:hover { border-color: #14b8a6; }
.qg-title-row-head {
  min-height: 34px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-title-row span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}
.qg-title-row i {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  background: #0f172a;
  color: #fff;
}
.qg-title-row strong { color: #a16207; }
.qg-title-row em,
.qg-title-row b {
  font-style: normal;
  color: #334155;
}
.qg-title-catalog,
.qg-epithet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 12px 12px;
}
.qg-title-catalog article,
.qg-epithet-grid article {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.qg-title-catalog header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.qg-title-catalog header span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #0f172a;
  font-weight: 900;
}
.qg-title-catalog header i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: #111827;
  color: #fff;
}
.qg-title-catalog header em {
  color: #a16207;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.qg-title-catalog article > div {
  display: grid;
  gap: 7px;
  padding: 10px;
}
.qg-title-catalog article > div > span,
.qg-epithet-grid article {
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}
.qg-title-catalog .is-unlocked,
.qg-epithet-grid .is-unlocked {
  border-color: #99f6e4;
  background: #ecfdf5;
}
.qg-title-catalog .is-locked,
.qg-epithet-grid .is-locked {
  opacity: 0.72;
  filter: grayscale(0.85);
}
.qg-title-catalog strong,
.qg-title-catalog b,
.qg-title-catalog small,
.qg-epithet-grid span,
.qg-epithet-grid strong,
.qg-epithet-grid em,
.qg-epithet-grid small {
  display: block;
}
.qg-title-catalog strong,
.qg-epithet-grid strong {
  color: #0f172a;
  font-size: 0.92rem;
}
.qg-title-catalog b,
.qg-epithet-grid em {
  color: #0f766e;
  font-size: 0.76rem;
  font-style: normal;
}
.qg-title-catalog small,
.qg-epithet-grid small {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.74rem;
}
.qg-epithet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 12px;
}
.qg-epithet-grid article {
  position: relative;
  padding: 14px 14px 14px 52px;
}
.qg-epithet-grid i {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #111827;
  color: #fff;
}
.qg-epithet-grid .is-unlocked i {
  background: #0f766e;
}
.qg-epithet-grid span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-history-row {
  grid-template-columns: 78px minmax(210px, 1fr) 64px 126px 72px;
}
.qg-history-row > div {
  min-width: 0;
}
.qg-history-row strong,
.qg-history-row small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qg-history-row small {
  color: #64748b;
}
.qg-history-result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 900;
}
.qg-result-win .qg-history-result { background: #ccfbf1; color: #0f766e; }
.qg-result-loss .qg-history-result { background: #fee2e2; color: #b91c1c; }
.qg-result-draw .qg-history-result { background: #fef3c7; color: #a16207; }
.qg-history-row em {
  color: #a16207;
  font-style: normal;
  font-weight: 900;
}
.qg-history-row time {
  color: #64748b;
  font-size: 0.78rem;
}
.qg-history-row a {
  display: inline-flex;
  justify-content: center;
  min-height: 30px;
  align-items: center;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-account-grid article.is-linked {
  background: #ecfdf5;
  border-color: #99f6e4;
}
.qg-account-grid article.is-linked strong { color: #0f766e; }
.qg-account-grid article.is-planned strong { color: #64748b; }
.qg-account-protection {
  display: grid;
  gap: 12px;
  margin: 14px;
  padding: 16px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: linear-gradient(135deg, #ecfdf5, #f8fafc);
}
.qg-account-protection.is-protected {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
}
.qg-account-protection-main {
  display: grid;
  gap: 4px;
}
.qg-account-protection-main span {
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 900;
}
.qg-account-protection-main h3 {
  margin: 0;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 900;
}
.qg-account-protection-main p {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.55;
}
.qg-account-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}
.qg-account-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e);
}
.qg-account-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qg-account-option-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 900;
}
.qg-account-option-row span.is-linked {
  border-color: #99f6e4;
  background: #ccfbf1;
  color: #0f766e;
}
.qg-account-option-row span.is-disabled {
  color: #94a3b8;
}
.qg-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 14px 14px;
}
.qg-account-actions .qg-primary-btn,
.qg-account-actions .qg-text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  text-decoration: none;
}
.qg-account-actions--empty {
  margin: 14px 0 0;
}
.qg-account-settings {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
  gap: 12px;
  margin: 0 14px 14px;
}
.qg-account-link-list {
  display: grid;
  gap: 10px;
}
.qg-account-link-list article {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.qg-account-link-list article.is-linked {
  border-color: #99f6e4;
  background: #f0fdfa;
}
.qg-account-link-list article.is-disabled {
  opacity: 0.72;
}
.qg-account-link-list div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.qg-account-link-list span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
}
.qg-account-link-list strong {
  color: #111827;
  font-size: 0.9rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.qg-account-link-list small {
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.45;
}
.qg-auth-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.qg-auth-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.qg-auth-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.qg-auth-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}
.qg-auth-step strong {
  display: block;
  color: #111827;
  font-size: 0.86rem;
  line-height: 1.25;
}
.qg-auth-step p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.45;
}
.qg-auth-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.qg-auth-box {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.qg-auth-box--profile,
.qg-auth-box--primary {
  border-color: #99f6e4;
}
.qg-auth-box--profile {
  background: #ecfdf5;
}
.qg-auth-box--login {
  border-color: #bfdbfe;
}
.qg-auth-box-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}
.qg-auth-box-head span {
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
}
.qg-auth-box-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.45;
}
.qg-auth-box h3 {
  margin: 0;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 900;
}
.qg-auth-form {
  display: grid;
  gap: 8px;
}
.qg-auth-form input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
}
.qg-primary-btn {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: #0f766e;
  color: #fff;
  font-weight: 900;
}
.qg-auth-status {
  padding: 10px 12px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.qg-auth-status.is-error {
  background: #fef2f2;
  color: #b91c1c;
}
.qg-auth-linked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
}
.qg-auth-linked span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 0.84rem;
}
.qg-auth-linked strong {
  color: #0f766e;
  font-size: 0.78rem;
}
.qg-auth-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.qg-auth-provider-grid button {
  min-height: 48px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  font-weight: 900;
  text-align: left;
  padding: 8px 10px;
}
.qg-auth-provider-grid button:disabled {
  opacity: 0.55;
}
.qg-auth-provider-grid small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.72rem;
}
.qg-auth-provider-grid--featured {
  margin-bottom: 12px;
}
.qg-auth-provider-grid--featured button {
  min-height: 58px;
  border-color: #99f6e4;
  background: #ecfdf5;
}
.qg-auth-modal[hidden] {
  display: none;
}
.qg-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.qg-auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(7px);
}
.qg-auth-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.36);
}
.qg-auth-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
}
.qg-auth-modal-head {
  display: grid;
  gap: 4px;
  padding-right: 44px;
}
.qg-auth-modal-head span {
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 900;
}
.qg-auth-modal-head h3 {
  margin: 0;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 900;
}
.qg-auth-modal-head p {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.55;
}
.qg-auth-modal-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.qg-auth-modal-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
}
.qg-auth-modal-tabs button.is-active {
  background: #0f766e;
  color: #fff;
}
.qg-auth-modal-mode[hidden] {
  display: none;
}
.qg-auth-modal-open {
  overflow: hidden;
}
.qg-auth-reset {
  display: grid;
  gap: 10px;
}
.qg-friend-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.qg-friend-section h3 {
  margin: 0;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 900;
}
.qg-friend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.qg-friend-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.qg-friend-card > div {
  min-width: 0;
}
.qg-friend-card strong,
.qg-friend-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qg-friend-card small {
  color: #64748b;
  font-weight: 800;
}
.qg-friend-avatar {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 900;
}
.qg-friend-avatar.is-online::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #14b8a6;
  content: "";
}
.qg-mypage-muted {
  padding: 18px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 7px;
}
.qg-public-profile {
  max-width: 1180px;
  margin: 0 auto;
}
.qg-public-note {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(94, 234, 212, 0.36);
  border-radius: 999px;
  color: #99f6e4;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-bot-profile-panel {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(180px, 260px);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(2,6,23,0.96), rgba(67,20,7,0.74)),
    #0f172a;
  color: #e2e8f0;
}
.qg-bot-profile-sigil {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(245,158,11,0.42);
  background: #020617;
  color: #fbbf24;
  font-size: 1.75rem;
  box-shadow: 0 0 24px rgba(245,158,11,0.16);
}
.qg-bot-profile-main { min-width: 0; }
.qg-bot-profile-main span {
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qg-bot-profile-main h2 {
  margin: 4px 0 6px;
  color: #f8fafc;
  font-size: 1.45rem;
}
.qg-bot-profile-main p {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.86rem;
  line-height: 1.55;
}
.qg-bot-profile-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.qg-bot-profile-line strong,
.qg-bot-profile-line em,
.qg-bot-profile-line b,
.qg-bot-profile-traits span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.28);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 900;
  font-style: normal;
}
.qg-bot-profile-line strong { color: #fbbf24; }
.qg-bot-profile-line em { color: #ccfbf1; }
.qg-bot-profile-line b { color: #5eead4; }
.qg-bot-profile-traits {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.qg-bot-profile-traits span {
  background: rgba(13,148,136,0.18);
  color: #ccfbf1;
}
.qg-bot-profile-traits .is-muted {
  background: rgba(148,163,184,0.12);
  color: #cbd5e1;
}
.qg-public-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}
.qg-public-actions span {
  color: #e2e8f0;
  font-size: 0.86rem;
  font-weight: 900;
}
.qg-public-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.qg-public-history {
  display: grid;
  gap: 8px;
}
.qg-public-history-row {
  display: grid;
  grid-template-columns: 110px 82px minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.qg-public-history-row span,
.qg-public-history-row strong {
  color: #111827;
  font-weight: 900;
}
.qg-public-history-row em {
  min-width: 0;
  overflow: hidden;
  color: #475569;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qg-public-history-row b {
  color: #0f766e;
  text-align: right;
}
.qg-public-review {
  padding: 6px 9px;
  border-radius: 7px;
  color: #fff;
  background: #0f766e;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}
.qg-public-review:hover {
  color: #fff;
  background: #0d9488;
}
.qg-notification-list {
  display: grid;
  gap: 10px;
}
.qg-notification-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.qg-notification-row.is-unread {
  border-color: #14b8a6;
  background: #f0fdfa;
}
.qg-notification-row > i {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #0f766e;
  background: #ccfbf1;
}
.qg-notification-row strong {
  display: block;
  color: #111827;
  font-weight: 900;
}
.qg-notification-row p {
  margin: 2px 0;
  color: #475569;
  font-size: 0.9rem;
}
.qg-notification-row small {
  color: #64748b;
  font-size: 0.75rem;
}
.qg-safety-list {
  display: grid;
  gap: 10px;
}
.qg-safety-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.qg-safety-row span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
}
.qg-safety-row strong a {
  color: #111827;
  text-decoration: none;
}
.qg-safety-row time {
  color: #64748b;
  font-size: 0.78rem;
  text-align: right;
}
.qg-page {
  display: grid;
  gap: 18px;
  padding: 8px 0 32px;
}
.qg-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f172a, #243041 58%, #26352f);
  color: #fff;
}
.qg-hero-compact h1 {
  margin: 4px 0;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 900;
}
.qg-hero-compact p {
  margin: 0;
  color: rgba(255,255,255,0.78);
}
.qg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.qg-btn-primary {
  background: #0f766e;
  color: #fff;
}
.qg-btn-primary:hover {
  background: #115e59;
  color: #fff;
  text-decoration: none;
}
.qg-btn-secondary {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}
.qg-btn-secondary:hover {
  background: #e2e8f0;
  color: #111827;
  text-decoration: none;
}
.qg-submission-list {
  display: grid;
  gap: 0;
}
.qg-submission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid #e5e7eb;
  color: #111827;
  text-decoration: none;
}
.qg-submission-row:first-child {
  border-top: 0;
}
.qg-submission-row:hover {
  background: #f8fafc;
  color: #111827;
  text-decoration: none;
}
.qg-submission-row strong,
.qg-submission-row small,
.qg-submission-row em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.qg-submission-row small {
  color: #64748b;
  font-size: 0.78rem;
}
.qg-submission-row em {
  color: #0f766e;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}
.qg-submission-form {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.qg-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.qg-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.qg-field span {
  color: #111827;
  font-size: 0.84rem;
  font-weight: 900;
}
.qg-field input,
.qg-field select,
.qg-field textarea {
  min-height: 38px;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  color: #111827;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
}
.qg-field textarea {
  min-height: 92px;
}
.qg-field small {
  color: #64748b;
  font-size: 0.75rem;
}
.qg-field em {
  color: #b91c1c;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}
.qg-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}
.qg-muted {
  align-self: center;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 800;
}
.qg-alert {
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.qg-alert strong,
.qg-alert p {
  margin: 0;
}
.qg-alert-warning {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #92400e;
}
.qg-alert-danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

@media (max-width: 900px) {
  .qg-masthead, .qg-arena-head { align-items: stretch; flex-direction: column; }
  .qg-catalog-search { grid-template-columns: 1fr; }
  .qg-home-columns, .qg-play-grid { grid-template-columns: 1fr; }
  .qg-play-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
  }
  .qg-mobile-side-tabs {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
	  .qg-mypage-hero { grid-template-columns: 1fr; }
	  .qg-account-upgrade {
	    align-items: stretch;
	    flex-direction: column;
	  }
	  .qg-account-upgrade .qg-mypage-link {
	    width: 100%;
	  }
	  .qg-rating-chart {
    grid-column: auto;
    grid-row: auto;
  }
  .qg-mypage-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qg-mypage-cards,
  .qg-tactics-grid,
  .qg-account-grid,
  .qg-auth-guide,
  .qg-auth-columns,
  .qg-friend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qg-dojo-grid { grid-template-columns: 1fr; }
  .qg-ladder-grid,
  .qg-title-catalog,
  .qg-epithet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qg-title-row { grid-template-columns: minmax(140px, 1fr) 70px 90px 72px; }
  .qg-history-row { grid-template-columns: 70px minmax(0, 1fr) 56px; }
  .qg-history-row time,
  .qg-history-row a { grid-column: 2 / span 2; }
  .qg-mode-lobby .qg-actions,
  .qg-mode-matching .qg-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qg-mode-theater .qg-match-board {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "players"
      "clock"
      "board"
      "form"
      "side"
      "result";
  }
  .qg-mode-theater .qg-shogi-area { min-height: auto; }
  .qg-mode-theater .qg-move-list {
    max-height: 170px;
    border-left: 0;
    border-top: 1px solid rgba(148,163,184,0.24);
  }
  .qg-theater-players { grid-template-columns: 1fr; }
  .qg-theater-center { order: -1; }
  .qg-bot-profile-panel { grid-template-columns: 64px minmax(0, 1fr); }
  .qg-bot-profile-traits { grid-column: 1 / -1; justify-content: flex-start; }
  .qg-hero { align-items: stretch; flex-direction: column; }
  .qg-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .qg-play-grid { gap: 12px; }
  .qg-detail-hero { grid-template-columns: 1fr; }
  .qg-statbar, .qg-move-form { grid-template-columns: 1fr; }
  .qg-match-options label { grid-template-columns: 1fr; }
  .qg-clockbar {
    grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
    gap: 4px;
    padding: 6px;
  }
  .qg-clockbar span {
    padding: 5px 6px;
    font-size: 0.82rem;
  }
  .qg-clockbar strong {
    font-size: 0.68rem;
    white-space: nowrap;
  }
  .qg-clockbar span:last-child { text-align: right; }
  .qg-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qg-flow-message { grid-template-columns: 1fr; }
  .qg-mypage-empty,
  .qg-mypage-identity { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
  .qg-mypage-tabs,
  .qg-mypage-summary,
  .qg-mypage-cards,
  .qg-tactics-grid,
  .qg-account-grid,
  .qg-auth-guide,
  .qg-auth-columns,
  .qg-auth-provider-grid,
  .qg-account-settings,
  .qg-friend-grid,
  .qg-ladder-grid,
  .qg-title-catalog,
  .qg-epithet-grid,
  .qg-public-history-row { grid-template-columns: 1fr; }
  .qg-bot-profile-panel { grid-template-columns: 1fr; }
  .qg-bot-profile-traits { grid-column: auto; }
  .qg-title-row,
  .qg-history-row { grid-template-columns: 1fr; }
  .qg-history-row time,
  .qg-history-row a { grid-column: auto; }
  .qg-rating-change, .qg-review-metrics, .qg-result-save-toast { grid-template-columns: 1fr; }
  .qg-game-info-grid,
  .qg-game-guide { grid-template-columns: 1fr; }
  .qg-friend-card { grid-template-columns: 42px minmax(0, 1fr); }
  .qg-account-actions { margin-inline: 10px; }
  .qg-account-actions .qg-primary-btn,
  .qg-account-actions .qg-text-btn { width: 100%; }
  .qg-account-link-list article { align-items: flex-start; flex-direction: column; }
  .qg-auth-modal { padding: 10px; }
  .qg-auth-modal-dialog { max-height: calc(100vh - 20px); padding: 14px; }
  .qg-auth-modal-tabs { grid-template-columns: 1fr; }
  .qg-notification-row { grid-template-columns: 38px minmax(0, 1fr); }
  .qg-notification-row .qg-text-btn { grid-column: 2; width: fit-content; }
  .qg-safety-row { grid-template-columns: 1fr; }
  .qg-safety-row time { text-align: left; }
  .qg-submission-row { grid-template-columns: 1fr; }
  .qg-submission-row em { text-align: left; }
  .qg-form-actions { justify-content: stretch; }
  .qg-form-actions .qg-btn { width: 100%; }
  .qg-friend-card .qg-text-btn { width: fit-content; }
  .qg-public-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .qg-public-actions > div { justify-content: flex-start; }
  .qg-game-grid { grid-template-columns: 1fr; }
  .cmsgame-catalog-search { grid-template-columns: 1fr; }
  .qg-theater-players {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }
  .qg-theater-center {
    grid-column: 1 / -1;
    order: -1;
    min-width: 0;
  }
  .qg-theater-center span { display: none; }
  .qg-theater-center strong { font-size: 0.72rem; }
  .qg-player-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
  }
  .qg-player-card > span { width: 32px; height: 32px; }
  .qg-player-card small { font-size: 0.68rem; }
  .qg-player-card em {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 0.9rem;
  }
  .qg-match-board {
    margin: 0 -8px 12px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .qg-board-head {
    position: sticky;
    top: 0;
    z-index: 12;
    align-items: flex-start;
    padding: 9px 10px;
  }
  .qg-board-head > strong,
  .qg-board-head > span { flex-basis: 100%; }
  .qg-board-head > strong { font-size: 0.94rem; }
  .qg-board-head .qg-review-share-cta {
    width: 100%;
    flex-basis: 100%;
  }
  .qg-board-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .qg-board-actions .qg-board-exit {
    max-width: calc(50vw - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qg-board-exit {
    min-height: 38px;
    padding-right: 12px;
    padding-left: 12px;
  }
  .qg-choice-modal {
    align-items: end;
    place-items: end stretch;
    padding: 0;
  }
  .qg-choice-dialog {
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  }
  .qg-choice-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qg-choice-actions button { min-height: 44px; }
  .qg-match-board .qg-shogi-area {
    gap: 8px;
    padding: 8px max(8px, env(safe-area-inset-left));
  }
  .qg-match-board .qg-shogi-board-frame {
    max-width: calc(100vw - 12px);
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    grid-template-rows: 16px minmax(0, 1fr) 16px;
    gap: 2px;
  }
  .qg-match-board .qg-shogi-axis {
    font-size: 0.54rem;
  }
  .qg-match-board .qg-shogi-board {
    grid-template-columns: repeat(9, minmax(30px, 1fr));
    max-width: calc(100vw - 18px);
    padding: 3px;
    border-width: 2px;
    gap: 1px;
  }
  .qg-match-board .qg-shogi-board.qg-board-waiting::after {
    bottom: 6px;
    font-size: 0.72rem;
  }
  .qg-match-board .qg-shogi-cell {
    min-height: min(10.5vw, 44px);
    padding: 1px;
    touch-action: manipulation;
  }
  .qg-match-board .qg-shogi-cell.qg-is-lastmove::before { inset: 2px; }
  .qg-match-board .qg-shogi-piece {
    width: 88%;
    height: 88%;
    font-size: clamp(1rem, 5vw, 1.32rem);
  }
  .qg-match-board .qg-shogi-coord { font-size: 0.5rem; }
  .qg-match-board .qg-shogi-hand {
    min-height: 44px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 6px;
    scrollbar-width: none;
  }
  .qg-match-board .qg-shogi-hand::-webkit-scrollbar { display: none; }
  .qg-match-board .qg-shogi-hand-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .qg-match-board .qg-shogi-hand-piece {
    min-width: 42px;
    min-height: 40px;
    padding: 5px 10px;
    font-size: 0.95rem;
  }
  .qg-play-side {
    max-height: 48vh;
    overflow-y: auto;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 4px;
    padding: 0 8px 12px;
    border-top: 1px solid #dbe3ee;
    border-radius: 12px 12px 0 0;
    background: #f8fafc;
  }
  .qg-mobile-side-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: 0 -8px 2px;
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
  }
  .qg-play-side .qg-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
}

.qg-tutorial-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 16px;
  padding: 16px;
}

.qg-tutorial-copy {
  display: grid;
  align-content: start;
  gap: 14px;
}

.qg-tutorial-copy > p {
  margin: 0;
  color: #475569;
  font-weight: 700;
  line-height: 1.7;
}

.qg-tutorial-panel--inline {
  overflow: hidden;
}

.qg-tutorial-inline-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.qg-tutorial-inline-lead > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.qg-tutorial-inline-lead strong {
  color: #0f172a;
  font-weight: 900;
}

.qg-tutorial-inline-lead p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.55;
}

.qg-tutorial-inline-frame-wrap {
  padding: 12px;
  background: #08111f;
}

.qg-tutorial-inline-frame {
  display: block;
  width: 100%;
  height: 760px;
  min-height: 0;
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 8px;
  background: #07111f;
}

.qg-embedded-game-body {
  margin: 0;
  overflow: hidden;
  background: #07111f;
}

.qg-shogi-tutorial-shell.qg-shogi-tutorial-shell--embed {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px;
  background:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.16), transparent 32%),
    linear-gradient(180deg, #07111f, #0b1220);
}

.qg-shogi-tutorial-embed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.82);
  color: #f8fafc;
}

.qg-shogi-tutorial-embed-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
}

.qg-shogi-tutorial-embed-head h1 {
  margin: 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}

.qg-shogi-tutorial-embed-head p {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.55;
}

.qg-shogi-tutorial-embed-head .qg-shogi-rules-launcher--button {
  margin-right: 14px;
}

.qg-shogi-tutorial-shell--embed .qg-beginner-grid--web {
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr);
  gap: 12px;
}

.qg-shogi-tutorial-shell--embed .qg-beginner-lesson,
.qg-shogi-tutorial-shell--embed .qg-beginner-practice {
  min-width: 0;
}

.qg-shogi-tutorial-shell--embed .qg-beginner-lesson .qg-tutorial-copy {
  padding: 12px;
}

.qg-shogi-tutorial-shell--embed .qg-beginner-practice .qg-match-board {
  margin: 12px;
}

.qg-shogi-tutorial-shell--embed .qg-match-board .qg-shogi-area {
  gap: 8px;
  padding: 10px;
}

.qg-shogi-tutorial-shell--embed .qg-match-board .qg-shogi-board {
  grid-template-columns: repeat(9, minmax(24px, 1fr));
  max-width: min(100%, 520px);
}

.qg-shogi-tutorial-shell--embed .qg-match-board .qg-shogi-piece {
  font-size: clamp(0.9rem, 2.1vw, 1.24rem);
}

.qg-tutorial-focus-list {
  display: grid;
  gap: 8px;
}

.qg-tutorial-focus-list span {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 900;
}

.qg-tutorial-focus-list i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
}

.qg-tutorial-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qg-tutorial-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.qg-tutorial-step > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-weight: 900;
}

.qg-tutorial-step strong {
  display: block;
  margin-bottom: 4px;
  color: #0f172a;
}

.qg-tutorial-step p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.6;
}

.qg-tutorial-actions,
.qg-arena-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.qg-tutorial-board,
.qg-practice-panel,
.qg-match-board-panel,
.qg-embedded-arena {
  min-width: 0;
}

.qg-match-board--practice,
.qg-match-board--embedded {
  margin: 0;
}

.qg-match-board--practice .qg-board-head,
.qg-match-board--embedded .qg-board-head {
  background: #f8fafc;
}

.qg-practice-board-grid .qg-shogi-cell {
  cursor: default;
}

.qg-practice-board-grid .qg-shogi-cell:hover {
  background: #f7d796;
}

.qg-practice-empty {
  margin: 16px;
  padding: 18px;
}

.qg-play-frame iframe {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #0f172a;
}

.qg-arena-actions {
  padding: 14px 16px 16px;
  border-top: 1px solid #e5e7eb;
}

.qg-tutorial-steps-panel--compact .qg-tutorial-step {
  grid-template-columns: 26px minmax(0, 1fr);
  padding: 10px;
}

.qg-tutorial-steps-panel--compact .qg-tutorial-step > span {
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .qg-tutorial-body {
    grid-template-columns: 1fr;
  }

  .qg-tutorial-inline-lead,
  .qg-shogi-tutorial-embed-head {
    align-items: stretch;
    flex-direction: column;
  }

  .qg-tutorial-inline-frame {
    height: 980px;
    min-height: 0;
  }

  .qg-shogi-tutorial-shell--embed .qg-beginner-grid--web {
    grid-template-columns: 1fr;
  }

  .qg-shogi-tutorial-embed-head .qg-shogi-rules-launcher--button {
    margin: 0 14px 14px;
  }
}

.qg-start-router {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.qg-start-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.qg-start-tabs button {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-weight: 900;
}

.qg-start-tabs button.is-active {
  border-color: #14b8a6;
  background: #0f766e;
  color: #fff;
}

.qg-start-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
}

.qg-start-pane[hidden] {
  display: none;
}

.qg-start-pane strong {
  display: block;
  color: #111827;
  font-size: 1rem;
  font-weight: 900;
}

.qg-start-pane p {
  margin: 4px 0 0;
  color: #64748b;
  line-height: 1.55;
}

.qg-start-pane-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.qg-game-info-collapsed {
  padding: 0;
}

.qg-game-info-collapsed > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 14px 16px;
  background: #f8fafc;
  color: #111827;
  cursor: pointer;
  font-weight: 900;
}

.qg-game-info-collapsed > summary small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.qg-list-actions,
.qg-list-profile-pair,
.qg-watch-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.qg-history-row .qg-text-btn,
.qg-list-actions .qg-text-btn {
  min-height: 28px;
  white-space: nowrap;
}

.qg-watch-tags {
  justify-content: flex-start;
  margin-top: 4px;
}

.qg-watch-tags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfeff;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-match-board .qg-shogi-board.qg-board-hint::after {
  content: attr(data-board-feedback);
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 6;
  transform: translateX(-50%);
  max-width: min(420px, calc(100% - 24px));
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,0.86);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 10px 24px rgba(15,23,42,0.22);
}

.qg-match-board .qg-shogi-board.qg-board-hint-error::after {
  background: rgba(185,28,28,0.9);
}

.qg-beginner-shell {
  gap: 18px;
}

.qg-shogi-tutorial-shell {
  margin: -8px 0 -32px;
  padding: clamp(14px, 3vw, 26px);
  color: #e5eef7;
  background:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.16), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(250,204,21,0.12), transparent 26%),
    linear-gradient(180deg, #080b12 0%, #111827 52%, #071316 100%);
}

.qg-shogi-tutorial-shell .qg-breadcrumb {
  color: #9ca3af;
}

.qg-shogi-tutorial-shell .qg-breadcrumb a {
  color: #5eead4;
}

.qg-shogi-tutorial-shell .qg-panel {
  border-color: rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.86);
  color: #e5eef7;
  box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}

.qg-shogi-tutorial-shell .qg-panel-head {
  border-bottom-color: rgba(148,163,184,0.22);
  background: rgba(8,11,18,0.58);
}

.qg-shogi-tutorial-shell .qg-panel-head h2,
.qg-shogi-tutorial-shell .qg-tutorial-step strong {
  color: #f8fafc;
}

.qg-shogi-tutorial-shell .qg-panel-note,
.qg-shogi-tutorial-shell .qg-tutorial-copy > p,
.qg-shogi-tutorial-shell .qg-tutorial-step p {
  color: #cbd5e1;
}

.qg-shogi-tutorial-hero {
  border-color: rgba(148,163,184,0.3);
  background:
    linear-gradient(135deg, rgba(8,11,18,0.94), rgba(17,24,39,0.86) 54%, rgba(43,36,26,0.76)),
    var(--qg-shogi-hero-image, none);
  background-position: center;
  background-size: cover;
}

.qg-beginner-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 18px;
  align-items: start;
}

.qg-beginner-grid--web {
  grid-template-columns: minmax(320px, 0.86fr) minmax(420px, 1.14fr);
}

.qg-beginner-lesson .qg-tutorial-copy {
  padding: 16px;
}

.qg-beginner-flutter iframe {
  width: 100%;
  min-height: 560px;
  display: block;
  border: 0;
  background: #0f172a;
}

.qg-shogi-tutorial-shell .qg-tutorial-step {
  cursor: pointer;
  border-color: rgba(148,163,184,0.24);
  background: rgba(8,11,18,0.48);
}

.qg-shogi-tutorial-shell .qg-tutorial-step:hover,
.qg-shogi-tutorial-shell .qg-tutorial-step.is-active {
  border-color: rgba(250,204,21,0.62);
  background: rgba(250,204,21,0.1);
}

.qg-shogi-tutorial-shell .qg-tutorial-step.is-active > span {
  background: #facc15;
  color: #111827;
}

.qg-app-tutorial-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(94,234,212,0.28);
  border-radius: 8px;
  background: rgba(20,184,166,0.1);
}

.qg-app-tutorial-link strong,
.qg-completion-panel strong {
  color: #f8fafc;
}

.qg-app-tutorial-link p {
  margin: 4px 0 0;
  color: #cbd5e1;
  line-height: 1.55;
}

.qg-beginner-practice .qg-match-board {
  margin: 14px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 8px;
  background: rgba(8,11,18,0.7);
}

.qg-shogi-tutorial-shell .qg-board-head,
.qg-shogi-tutorial-shell .qg-match-board--tutorial .qg-board-head,
.qg-shogi-tutorial-shell .qg-match-board .qg-shogi-hand {
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.82);
  color: #e5eef7;
}

.qg-shogi-tutorial-shell .qg-match-board .qg-shogi-area {
  background: rgba(15,23,42,0.46);
}

.qg-practice-next-actions {
  display: grid;
  gap: 12px;
  padding: 0 14px 16px;
}

.qg-shogi-step-nav {
  margin: 0 14px 12px;
}

.qg-shogi-tutorial-shell .qg-text-btn {
  border-color: rgba(148,163,184,0.32);
  color: #e5eef7;
  background: rgba(15,23,42,0.72);
}

.qg-shogi-tutorial-shell .qg-text-btn:hover {
  border-color: rgba(94,234,212,0.62);
  color: #ccfbf1;
}

.qg-shogi-tutorial-shell .qg-action-btn {
  border-color: rgba(250,204,21,0.48);
  background: rgba(250,204,21,0.16);
  color: #fef3c7;
}

.qg-completion-panel {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
  color: #134e4a;
}

.qg-shogi-tutorial-shell .qg-completion-panel {
  border-color: rgba(94,234,212,0.42);
  background: rgba(20,184,166,0.12);
  color: #ccfbf1;
}

.qg-completion-panel[hidden] {
  display: none;
}

.qg-completion-panel strong {
  color: #0f766e;
}

.qg-practice-help {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 14px 16px 0;
  padding: 10px 12px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}

.qg-practice-help-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(14,165,233,0.12);
  color: #0284c7;
}

.qg-practice-help-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.45;
}

.qg-practice-help-copy strong {
  color: inherit;
  font-size: 0.96rem;
  font-weight: 1000;
  letter-spacing: 0.03em;
}

.qg-practice-help-copy strong[hidden] {
  display: none;
}

.qg-practice-help-copy > span {
  font-size: 0.82rem;
}

.qg-shogi-tutorial-shell .qg-practice-help {
  border-color: rgba(148,163,184,0.28);
  background: rgba(8,11,18,0.48);
  color: #e5eef7;
}

.qg-shogi-tutorial-shell .qg-practice-help-icon {
  background: rgba(56,189,248,0.14);
  color: #7dd3fc;
}

.qg-practice-help[data-state="ok"] {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

.qg-practice-help[data-state="ok"] .qg-practice-help-icon {
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #07111f;
  box-shadow: 0 0 0 4px rgba(20,184,166,0.12);
}

.qg-practice-help[data-state="error"] {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.qg-practice-help[data-state="error"] .qg-practice-help-icon {
  background: rgba(245,158,11,0.18);
  color: #b45309;
}

.qg-shogi-tutorial-shell .qg-practice-help[data-state="ok"] {
  border-color: rgba(94,234,212,0.52);
  background:
    linear-gradient(100deg, rgba(20,184,166,0.2), rgba(250,204,21,0.08)),
    rgba(8,11,18,0.72);
  color: #99f6e4;
  box-shadow: 0 12px 28px rgba(20,184,166,0.12);
}

.qg-shogi-tutorial-shell .qg-practice-help[data-state="error"] {
  border-color: rgba(251,191,36,0.52);
  background: rgba(120,53,15,0.22);
  color: #fde68a;
}

.qg-promotion-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 16px 0;
  padding: 12px;
  border: 1px solid rgba(250,204,21,0.38);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(250,204,21,0.12), rgba(20,184,166,0.1)),
    rgba(15,23,42,0.78);
  color: #f8fafc;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.qg-promotion-choice[hidden] {
  display: none;
}

.qg-promotion-choice > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.qg-promotion-choice strong {
  font-size: 0.95rem;
}

.qg-promotion-choice span {
  color: #cbd5e1;
  font-size: 0.82rem;
  line-height: 1.5;
}

.qg-promotion-choice-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.qg-promotion-choice-actions .qg-button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 8px;
  background: rgba(15,23,42,0.82);
  color: #e5eef7;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.qg-promotion-choice-actions .qg-button:hover,
.qg-promotion-choice-actions .qg-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(94,234,212,0.58);
  outline: none;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.18);
}

.qg-promotion-choice-actions .qg-button--primary {
  border-color: rgba(20,184,166,0.62);
  background: linear-gradient(135deg, #22d3ee, #facc15);
  color: #07111f;
}

@media (max-width: 640px) {
  .qg-promotion-choice {
    align-items: stretch;
    flex-direction: column;
  }

  .qg-promotion-choice-actions {
    width: 100%;
  }

  .qg-promotion-choice-actions .qg-button {
    flex: 1 1 0;
  }
}

.qg-practice-help.is-feedback-active {
  animation: qg-practice-feedback-in 0.46s cubic-bezier(.2,.9,.24,1.15);
}

.qg-answer-feedback-host {
  position: relative;
}

.qg-answer-feedback {
  position: absolute;
  z-index: 24;
  top: 14px;
  left: 50%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: min(360px, calc(100% - 28px));
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;
  color: #f8fafc;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 22px 54px rgba(0,0,0,0.34);
  animation: qg-answer-feedback-float 1.62s cubic-bezier(.2,.86,.24,1) both;
}

.qg-answer-feedback--correct {
  background:
    radial-gradient(circle at 14% 20%, rgba(250,204,21,0.36), transparent 36%),
    linear-gradient(135deg, rgba(14,116,144,0.96), rgba(20,184,166,0.94) 58%, rgba(132,204,22,0.9));
}

.qg-answer-feedback--wrong {
  background:
    radial-gradient(circle at 18% 18%, rgba(251,191,36,0.26), transparent 38%),
    linear-gradient(135deg, rgba(127,29,29,0.96), rgba(190,18,60,0.92) 60%, rgba(88,28,135,0.9));
}

.qg-answer-feedback-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: #06121f;
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.72), 0 10px 22px rgba(0,0,0,0.22);
  animation: qg-answer-mark-pop 0.48s cubic-bezier(.16,1,.3,1);
}

.qg-answer-feedback-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qg-answer-feedback-copy strong {
  font-size: 1.02rem;
  font-weight: 1000;
  letter-spacing: 0.02em;
}

.qg-answer-feedback-copy small {
  color: rgba(248,250,252,0.88);
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.42;
}

.qg-answer-feedback-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: #fde68a;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(18deg);
  animation: qg-answer-feedback-spark 0.86s ease-out both;
}

.qg-answer-feedback--wrong .qg-answer-feedback-spark {
  background: #fecdd3;
}

.qg-answer-feedback-host.is-answer-correct {
  box-shadow: 0 0 0 1px rgba(94,234,212,0.24), 0 0 34px rgba(20,184,166,0.18);
}

.qg-answer-feedback-host.is-answer-wrong {
  box-shadow: 0 0 0 1px rgba(251,113,133,0.24), 0 0 28px rgba(244,63,94,0.14);
  animation: qg-answer-host-shake 0.42s ease-out;
}

.qg-practice-panel--interactive .qg-match-board {
  margin-top: 14px;
}

/* Shogi public CMS site panels */
.qg-shogi-site-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  min-height: 360px;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid #233044;
  border-radius: 8px;
  overflow: hidden;
  color: #f8fafc;
  background:
    linear-gradient(90deg, rgba(8,11,18,0.94), rgba(8,11,18,0.72) 48%, rgba(8,11,18,0.42)),
    var(--qg-shogi-hero-image),
    linear-gradient(135deg, #080b12, #14333a);
  background-position:
    center,
    var(--qg-shogi-hero-position, 50% 50%),
    center;
  background-size:
    cover,
    var(--qg-shogi-hero-size, cover),
    cover;
}

.qg-shogi-site-hero h1 {
  margin: 6px 0 10px;
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  font-weight: 900;
  letter-spacing: 0;
}

.qg-shogi-site-hero p {
  max-width: 720px;
  margin: 0;
  color: #dbeafe;
  line-height: 1.7;
}

.qg-shogi-hero-main {
  position: relative;
  z-index: 1;
  align-self: center;
}

.qg-shogi-site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.qg-shogi-site-menu a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  background: rgba(8,11,18,0.42);
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.qg-shogi-site-menu a:hover {
  border-color: rgba(250,204,21,0.62);
  background: rgba(250,204,21,0.14);
  color: #fef3c7;
}

.qg-shogi-hero-side {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 12px;
  min-width: 0;
}

.qg-shogi-hero-banner {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  background: rgba(8,11,18,0.36);
  box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}

.qg-shogi-hero-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.qg-shogi-hero-routes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.qg-shogi-hero-route {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(203,213,225,0.24);
  border-radius: 8px;
  background: rgba(15,23,42,0.78);
  color: #f8fafc;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.qg-shogi-hero-route:hover {
  border-color: #5eead4;
  color: #fff;
  text-decoration: none;
}

.qg-shogi-hero-route i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
}

.qg-shogi-hero-route strong,
.qg-shogi-hero-route span {
  display: block;
  min-width: 0;
}

.qg-shogi-hero-route span {
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 800;
}

.qg-shogi-style-tabs,
.qg-shogi-learning-grid,
.qg-shogi-rules-grid,
.qg-shogi-training-grid,
.qg-entry-bot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.qg-shogi-style-tabs button,
.qg-shogi-learning-card,
.qg-shogi-rule-row,
.qg-shogi-problem,
.qg-entry-bot {
  min-width: 0;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}

.qg-shogi-style-tabs button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  min-height: 92px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.qg-shogi-style-tabs button i,
.qg-shogi-learning-icon,
.qg-shogi-suggestion-body > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
}

.qg-shogi-style-tabs button strong,
.qg-shogi-style-tabs button small,
.qg-shogi-learning-card strong,
.qg-shogi-learning-card small,
.qg-shogi-learning-card em {
  display: block;
}

.qg-shogi-learning-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.qg-shogi-style-tabs button strong {
  color: #111827;
  font-size: 0.95rem;
  font-weight: 900;
}

.qg-shogi-style-tabs button small,
.qg-shogi-learning-card small,
.qg-shogi-rule-row small,
.qg-shogi-problem p,
.qg-shogi-suggestion-body small {
  color: #64748b;
  line-height: 1.55;
}

.qg-shogi-style-tabs button.is-active {
  border-color: #14b8a6;
  background: #ecfeff;
  box-shadow: inset 0 0 0 1px #14b8a6;
}

.qg-shogi-style-switcher--compact .qg-shogi-style-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

.qg-shogi-style-switcher--compact .qg-shogi-style-tabs button {
  min-height: 54px;
}

.qg-shogi-style-switcher--compact .qg-shogi-style-tabs small {
  display: none;
}

.qg-shogi-learning-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-height: 112px;
  padding: 12px;
  text-decoration: none;
}

.qg-shogi-learning-card:hover {
  border-color: #14b8a6;
  color: #111827;
  text-decoration: none;
}

.qg-shogi-learning-card.is-primary {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fff7ed, #ecfeff);
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.18);
}

.qg-shogi-learning-card.is-primary .qg-shogi-learning-icon {
  background: #f59e0b;
  color: #111827;
}

.qg-shogi-learning-card em {
  width: fit-content;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfeff;
  color: #0f766e;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.qg-shogi-learning-lead {
  margin: 0;
  padding: 0 14px 10px;
  color: #475569;
  font-weight: 800;
  line-height: 1.65;
}

.qg-shogi-rules {
  overflow: hidden;
}

.qg-shogi-rules-static-head {
  align-items: flex-start;
}

.qg-shogi-rules-static-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.qg-shogi-rules-static-copy .qg-kicker {
  width: fit-content;
}

.qg-shogi-rules-static-copy h2,
.qg-shogi-rules-static-copy p {
  margin: 0;
}

.qg-shogi-rules-static-copy p {
  max-width: 64em;
  color: #64748b;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.65;
}

.qg-modal-open {
  overflow: hidden;
}

.qg-shogi-rules-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.qg-shogi-rules-summary::-webkit-details-marker {
  display: none;
}

.qg-shogi-rules-summary::after {
  content: "開く";
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 900;
}

.qg-shogi-rules[open] .qg-shogi-rules-summary::after {
  content: "閉じる";
}

.qg-shogi-rules-launcher-head {
  align-items: center;
}

.qg-shogi-rules-launcher-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.qg-shogi-rules-launcher-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.6;
}

.qg-shogi-rules-launcher--button {
  display: inline-flex;
  min-width: 0;
}

.qg-shogi-rules-trigger {
  white-space: nowrap;
}

.qg-assist-toggle-grid .qg-shogi-rules-launcher--button,
.qg-assist-toggle-grid .qg-shogi-rules-trigger {
  width: 100%;
}

.qg-assist-toggle-grid .qg-shogi-rules-trigger {
  min-height: 46px;
  justify-content: flex-start;
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.62);
  color: #e5edf7;
}

.qg-assist-toggle-grid .qg-shogi-rules-trigger i {
  color: #facc15;
}

.qg-shogi-rules-modal[hidden] {
  display: none;
}

.qg-shogi-rules-modal {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10050;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.qg-shogi-rules-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, 0.72);
  cursor: pointer;
}

.qg-shogi-rules-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, 96vw);
  max-height: min(86vh, 920px);
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 8px;
  background: #0b1220;
  color: #f8fafc;
  box-shadow: 0 26px 80px rgba(0,0,0,0.42);
  outline: none;
}

.qg-shogi-rules-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.96);
}

.qg-shogi-rules-dialog-head h2 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 1.1rem;
}

.qg-shogi-rules-close {
  flex: 0 0 auto;
  border-color: rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.88);
  color: #e5edf7;
}

.qg-shogi-rules-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 14px;
}

.qg-shogi-rules-dialog .qg-shogi-rules-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.qg-shogi-rules-dialog .qg-shogi-rule-row,
.qg-shogi-rules-dialog .qg-shogi-rule-note-group {
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.72);
  color: #e5edf7;
}

.qg-shogi-rules-dialog .qg-shogi-rule-row span,
.qg-shogi-rules-dialog .qg-shogi-rule-row strong,
.qg-shogi-rules-dialog .qg-shogi-rule-note-group h3 {
  color: #fff;
}

.qg-shogi-rules-dialog .qg-shogi-rule-row small,
.qg-shogi-rules-dialog .qg-shogi-rule-note-group li {
  color: #cbd5e1;
}

.qg-shogi-rules-dialog .qg-shogi-rule-notes span {
  border-color: rgba(250,204,21,0.28);
  background: rgba(250,204,21,0.1);
  color: #fde68a;
}

.qg-shogi-rules-dialog .qg-shogi-rule-note-groups {
  padding-bottom: 0;
}

@media (max-width: 720px) {
  .qg-shogi-rules-modal {
    place-items: end center;
    padding: 10px;
  }

  .qg-shogi-rules-dialog {
    width: 100%;
    max-height: 88vh;
  }

  .qg-shogi-rules-dialog-head {
    padding: 12px;
  }

  .qg-shogi-rules-dialog .qg-shogi-rules-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .qg-shogi-rules-dialog .qg-shogi-rule-notes,
  .qg-shogi-rules-dialog .qg-shogi-rule-note-groups {
    padding-inline: 10px;
  }
}

.qg-shogi-learning-next,
.qg-shogi-suggestion-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #f0f9ff;
  color: #334155;
}

.qg-shogi-learning-next strong,
.qg-shogi-suggestion-body strong {
  color: #111827;
  font-weight: 900;
}

.qg-shogi-learning-next span {
  min-width: 0;
}

.qg-shogi-goal-panel {
  display: grid;
  grid-template-columns: minmax(430px, .95fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(250,204,21,0.46);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(250,204,21,0.2), rgba(20,184,166,0.08)),
    rgba(15,23,42,0.9);
  color: #fff7ed;
  box-shadow: inset 0 0 0 1px rgba(250,204,21,0.12), 0 18px 46px rgba(0,0,0,0.22);
}

.qg-shogi-goal-story--compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 312px);
  max-width: 312px;
  margin: 0;
  padding: 8px;
  border-color: rgba(250,204,21,0.28);
  background:
    linear-gradient(135deg, rgba(250,204,21,0.14), rgba(20,184,166,0.06)),
    rgba(15,23,42,0.54);
  box-shadow: none;
}

.qg-shogi-goal-story-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.qg-shogi-goal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #facc15;
  color: #111827;
  font-size: 1.05rem;
}

.qg-shogi-goal-story-title {
  display: block;
  margin: 0 0 6px;
  color: #fff7ed;
  font-size: 1.15rem;
  font-weight: 900;
}

.qg-shogi-goal-story-copy p {
  margin: 0;
  color: #dbeafe;
  font-size: 1rem;
  line-height: 1.75;
}

.qg-shogi-goal-story-copy p strong {
  color: #fde68a;
  font-weight: 900;
}

.qg-shogi-goal-story--compact .qg-shogi-goal-icon {
  width: 34px;
  height: 34px;
  font-size: .9rem;
}

.qg-shogi-goal-story--compact .qg-shogi-goal-story-title {
  font-size: .9rem;
}

.qg-shogi-goal-story--compact .qg-shogi-goal-story-copy p {
  display: none;
}

.qg-shogi-goal-story--compact .qg-shogi-goal-story-copy {
  display: none;
}

.qg-shogi-story-stage {
  position: relative;
  min-height: 276px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(250,204,21,0.15), transparent 42%),
    linear-gradient(180deg, rgba(8,11,18,0.74), rgba(15,23,42,0.92));
}

.qg-shogi-goal-story--compact .qg-shogi-story-stage {
  min-height: 124px;
}

.qg-shogi-story-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 10px;
  opacity: 0;
  transform: translateX(18px) scale(.98);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.qg-shogi-story-card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.qg-shogi-goal-story--compact .qg-shogi-story-card {
  padding: 8px;
}

.qg-shogi-story-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

.qg-story-board {
  position: relative;
  width: min(184px, 100%);
  aspect-ratio: 1;
  border: 3px solid #6f4217;
  border-radius: 6px;
  background:
    linear-gradient(to right, rgba(111,66,23,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,66,23,.55) 1px, transparent 1px),
    linear-gradient(135deg, #f3c77d, #d99a3f);
  background-size: 20% 20%;
  box-shadow: 0 18px 34px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.24);
}

.qg-shogi-goal-story--compact .qg-story-board {
  width: 108px;
  border-width: 2px;
}

.qg-story-piece {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20%;
  height: 24%;
  padding-top: 2%;
  clip-path: polygon(50% 0%, 90% 22%, 82% 100%, 18% 100%, 10% 22%);
  border: 1px solid rgba(73,42,12,.42);
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #fff0bd, #d99638);
  color: #111827;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(87,47,13,.26), 0 10px 16px rgba(0,0,0,.18);
}

.qg-shogi-goal-story--compact .qg-story-piece {
  font-size: .82rem;
}

.qg-story-piece--top { top: 18%; left: 40%; transform: rotate(180deg); }
.qg-story-piece--bottom { bottom: 18%; left: 40%; }
.qg-story-arrow {
  position: absolute;
  z-index: 1;
  width: 26%;
  height: 4px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 14px rgba(20,184,166,.72);
}
.qg-story-arrow::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-top: 4px solid #14b8a6;
  border-right: 4px solid #14b8a6;
  transform: translateY(-50%) rotate(45deg);
}
.qg-story-arrow--top { top: 28%; left: 20%; }
.qg-story-arrow--bottom { bottom: 28%; right: 20%; transform: rotate(180deg); }
.qg-story-player {
  position: absolute;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: #e5edf7;
  font-size: .72rem;
  font-weight: 900;
}
.qg-story-player--top { top: 0; }
.qg-story-player--bottom { bottom: 0; }

.qg-story-piece--attacker {
  top: 38%;
  left: 20%;
  animation: qg-shogi-capture-attacker 1.15s ease-in-out infinite;
}
.qg-story-piece--target {
  top: 38%;
  left: 58%;
  transform: rotate(-14deg);
  animation: qg-shogi-capture-target 1.15s ease-in-out infinite;
}
.qg-story-burst {
  position: absolute;
  top: 42%;
  left: 52%;
  z-index: 1;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(250,204,21,.88), rgba(250,204,21,0) 68%);
  animation: qg-shogi-capture-burst 1.15s ease-in-out infinite;
}

.qg-story-capture-label {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #111827;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(250,204,21,.24);
}

.qg-shogi-goal-story--compact .qg-story-capture-label {
  right: 5px;
  bottom: 5px;
  padding: 3px 7px;
  font-size: .58rem;
}

.qg-story-piece--king {
  top: 39%;
  left: 40%;
  width: 22%;
  height: 26%;
  background: linear-gradient(180deg, #fee2e2, #ef4444);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(248,113,113,.2), 0 0 24px rgba(248,113,113,.52);
}
.qg-story-piece--guard { width: 18%; height: 22%; background: linear-gradient(180deg, #dcfce7, #16a34a); color: #052e16; }
.qg-story-piece--guard-a { top: 18%; left: 40%; }
.qg-story-piece--guard-b { top: 40%; left: 16%; }
.qg-story-piece--guard-c { top: 40%; right: 16%; }
.qg-story-piece--guard-d { bottom: 15%; left: 40%; }
.qg-story-victory {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #111827;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(250,204,21,.26);
}

.qg-shogi-story-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.qg-shogi-story-text em {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(250,204,21,.14);
  color: #fde68a;
  font-size: .7rem;
  font-style: normal;
  font-weight: 900;
}
.qg-shogi-story-text strong {
  color: #fff7ed;
  font-size: 1.05rem;
  font-weight: 900;
}
.qg-shogi-story-text span {
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.55;
}

.qg-shogi-goal-story--compact .qg-shogi-story-text {
  display: none;
}

.qg-shogi-story-controls,
.qg-shogi-story-next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.qg-shogi-story-controls {
  grid-column: 1 / -1;
  justify-content: center;
}
.qg-shogi-story-dots {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.qg-shogi-story-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(203,213,225,.42);
}
.qg-shogi-story-dots button.is-active {
  width: 28px;
  background: #facc15;
}
.qg-shogi-story-next-step {
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(250,204,21,.28);
  border-radius: 8px;
  background: rgba(8,11,18,.38);
}
.qg-shogi-story-next-step strong {
  color: #fff7ed;
  font-weight: 900;
}

.qg-shogi-goal-story--learning .qg-shogi-story-controls {
  grid-column: 2;
  justify-content: center;
  width: 100%;
}

.qg-shogi-goal-story--learning .qg-shogi-story-next-step {
  display: none;
  grid-column: 1;
  grid-row: 2;
  flex-wrap: nowrap;
}

.qg-shogi-goal-story--learning .qg-shogi-story-next-step strong {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

@keyframes qg-shogi-capture-attacker {
  0%, 100% { transform: translateX(0); }
  46%, 58% { transform: translateX(52%); }
}

@keyframes qg-shogi-capture-target {
  0%, 45% { transform: rotate(-14deg) translate(0, 0); opacity: 1; }
  60%, 100% { transform: rotate(24deg) translate(34px, -30px); opacity: .28; }
}

@keyframes qg-shogi-capture-burst {
  0%, 38%, 100% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  52% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

@keyframes qg-goal-surround-center {
  0%, 42% { opacity: 1; transform: scale(1); }
  62%, 100% { opacity: .34; transform: scale(.82); }
}

.qg-goal-story {
  border-color: rgba(250,204,21,0.46);
  background:
    linear-gradient(135deg, rgba(250,204,21,0.2), rgba(20,184,166,0.08)),
    rgba(15,23,42,0.9);
}

.qg-goal-story .qg-shogi-goal-icon,
.qg-goal-story .qg-shogi-story-dots button.is-active,
.qg-goal-story .qg-story-capture-label,
.qg-goal-story .qg-story-victory {
  background: linear-gradient(180deg, var(--qg-goal-accent, #facc15), #f59e0b);
}

.qg-goal-story .qg-shogi-goal-story-copy p strong,
.qg-goal-story .qg-shogi-story-text em {
  color: #fde68a;
}

.qg-goal-story .qg-story-board--turns,
.qg-goal-story .qg-story-board--capture,
.qg-goal-story .qg-story-board--surround,
.qg-goal-story .qg-story-board--victory {
  background:
    linear-gradient(to right, rgba(111,66,23,.46) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,66,23,.46) 1px, transparent 1px),
    linear-gradient(135deg, #f3c77d, #d99a3f);
  background-size: 20% 20%;
}

.qg-goal-story--go .qg-story-board,
.qg-goal-story--reversi .qg-story-board,
.qg-goal-story--latrunculi .qg-story-board {
  border-color: #384838;
  background:
    linear-gradient(to right, rgba(8,11,18,.34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,11,18,.34) 1px, transparent 1px),
    linear-gradient(135deg, #3f7c58, #123726);
  background-size: 20% 20%;
}

.qg-goal-story--chess .qg-story-board,
.qg-goal-story--checkers .qg-story-board {
  border-color: #1f2937;
  background:
    linear-gradient(45deg, #111827 25%, transparent 25%, transparent 75%, #111827 75%),
    linear-gradient(45deg, #111827 25%, #e5e7eb 25%, #e5e7eb 75%, #111827 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
}

.qg-goal-story--poker .qg-story-board,
.qg-goal-story--hanafuda .qg-story-board,
.qg-goal-story--mahjong .qg-story-board {
  border-color: #0f766e;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #064e3b, #06251b);
}

.qg-goal-story--backgammon .qg-story-board {
  border-color: #78350f;
  background:
    repeating-linear-gradient(90deg, rgba(251,191,36,.42) 0 16px, rgba(127,29,29,.48) 16px 32px),
    linear-gradient(135deg, #3a1808, #8a3d14);
}

.qg-goal-story--mancala .qg-story-board {
  border-color: #3f6212;
  background:
    radial-gradient(circle at 18% 50%, rgba(15,23,42,.72) 0 12%, transparent 13%),
    radial-gradient(circle at 38% 50%, rgba(15,23,42,.72) 0 12%, transparent 13%),
    radial-gradient(circle at 58% 50%, rgba(15,23,42,.72) 0 12%, transparent 13%),
    radial-gradient(circle at 78% 50%, rgba(15,23,42,.72) 0 12%, transparent 13%),
    linear-gradient(135deg, #854d0e, #422006);
}

.qg-goal-token--stone,
.qg-goal-token--checker,
.qg-goal-token--chip,
.qg-goal-token--seed {
  clip-path: none;
  border-radius: 999px;
  padding-top: 0;
}

.qg-goal-token--stone,
.qg-goal-token--checker {
  width: 20%;
  height: 20%;
}

.qg-goal-token--black {
  background: linear-gradient(180deg, #334155, #020617);
  border-color: rgba(255,255,255,.18);
}

.qg-goal-token--white {
  background: linear-gradient(180deg, #ffffff, #cbd5e1);
  color: #0f172a;
}

.qg-goal-token--red {
  background: linear-gradient(180deg, #fca5a5, #dc2626);
  color: #fff7ed;
}

.qg-goal-token--card,
.qg-goal-token--tile,
.qg-goal-token--die,
.qg-goal-token--goal {
  clip-path: none;
  border-radius: 6px;
  padding-top: 0;
  background: linear-gradient(180deg, #fff7ed, #f3e8d2);
  color: #111827;
}

.qg-goal-token--tile {
  border-radius: 5px;
  background: linear-gradient(180deg, #ecfeff, #bae6fd);
  color: #064e3b;
}

.qg-goal-token--chip {
  background: linear-gradient(180deg, #bbf7d0, #22c55e);
  color: #052e16;
  border: 3px dashed rgba(255,255,255,.7);
}

.qg-goal-token--seed {
  width: 15%;
  height: 15%;
  background: linear-gradient(180deg, #fef3c7, #d97706);
  border-color: rgba(120,53,15,.62);
}

.qg-goal-token--die {
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  color: #0f172a;
}

.qg-goal-token--goal {
  width: 30%;
  height: 22%;
  font-size: .58rem;
  letter-spacing: 0;
  background: linear-gradient(180deg, #fef3c7, var(--qg-goal-accent, #facc15));
  color: #111827;
}

.qg-goal-token--territory {
  clip-path: none;
  border-radius: 8px;
  background: rgba(15,23,42,.82);
  color: #fef3c7;
}

.qg-goal-token--score,
.qg-goal-token--score-stick {
  clip-path: none;
  padding-top: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fef3c7, var(--qg-goal-accent, #facc15));
  color: #111827;
}

.qg-goal-token--score {
  width: 30%;
  height: 22%;
  font-size: .68rem;
}

.qg-goal-token--score-stick {
  width: 28%;
  height: 10%;
  border-radius: 4px;
  background: linear-gradient(180deg, #f8fafc, #93c5fd);
  font-size: .48rem;
}

.qg-goal-token--territory-white {
  background: rgba(241,245,249,.88);
  color: #0f172a;
}

.qg-story-piece--territory-main { top: 26%; left: 19%; width: 34%; height: 30%; }
.qg-story-piece--territory-sub { right: 15%; bottom: 18%; width: 25%; height: 20%; }
.qg-story-piece--territory-stone-a { top: 18%; left: 24%; }
.qg-story-piece--territory-stone-b { top: 56%; left: 23%; }
.qg-story-piece--territory-stone-c { top: 32%; left: 50%; }
.qg-story-piece--score-a { top: 16%; right: 14%; width: 18%; height: 18%; }

.qg-story-piece--surround-center {
  top: 40%;
  left: 40%;
  animation: qg-goal-surround-center 1.45s ease-in-out infinite;
  box-shadow: 0 0 0 5px rgba(248,250,252,.14), 0 8px 18px rgba(0,0,0,.22);
}
.qg-story-piece--surround-top,
.qg-story-piece--surround-left,
.qg-story-piece--surround-right,
.qg-story-piece--surround-bottom {
  width: 18%;
  height: 18%;
  box-shadow: 0 0 0 3px rgba(15,23,42,.16), 0 8px 16px rgba(0,0,0,.2);
}
.qg-story-piece--surround-top { top: 16%; left: 41%; }
.qg-story-piece--surround-left { top: 41%; left: 17%; }
.qg-story-piece--surround-right { top: 41%; right: 17%; }
.qg-story-piece--surround-bottom { bottom: 17%; left: 41%; }

.qg-story-piece--flip-left { top: 40%; left: 24%; }
.qg-story-piece--flip-mid {
  top: 40%;
  left: 42%;
  animation: qg-goal-flip-stone 1.3s ease-in-out infinite;
}
.qg-story-piece--flip-right { top: 40%; left: 60%; }

.qg-story-piece--count-a { top: 24%; left: 24%; }
.qg-story-piece--count-b { top: 24%; right: 24%; }
.qg-story-piece--count-c { bottom: 24%; left: 24%; }
.qg-story-piece--count-d { bottom: 24%; right: 24%; }

.qg-story-piece--card-field { top: 22%; left: 42%; }
.qg-story-piece--card-hand { bottom: 20%; left: 42%; }
.qg-story-piece--yaku-a { top: 22%; left: 23%; transform: rotate(-12deg); }
.qg-story-piece--yaku-b { top: 18%; left: 42%; }
.qg-story-piece--yaku-c { top: 22%; right: 23%; transform: rotate(12deg); }
.qg-story-piece--yaku-main { bottom: 22%; left: 35%; }

.qg-story-piece--score-main {
  top: 38%;
  left: 35%;
  box-shadow: 0 0 0 5px rgba(250,204,21,.2), 0 0 22px rgba(250,204,21,.42);
}
.qg-story-piece--score-card-a { top: 18%; left: 20%; transform: rotate(-10deg); }
.qg-story-piece--score-card-b { top: 18%; right: 20%; transform: rotate(10deg); }
.qg-story-piece--score-card-c { bottom: 18%; left: 20%; transform: rotate(10deg); }
.qg-story-piece--score-card-d { bottom: 18%; right: 20%; transform: rotate(-10deg); }
.qg-story-piece--score-stick-a { top: 26%; left: 18%; }
.qg-story-piece--score-stick-b { bottom: 26%; right: 18%; }

.qg-story-piece--hand-a { top: 40%; left: 16%; }
.qg-story-piece--hand-b { top: 40%; left: 30%; }
.qg-story-piece--hand-c { top: 40%; left: 44%; }
.qg-story-piece--hand-d { top: 40%; left: 58%; }
.qg-story-piece--hand-e { top: 40%; left: 72%; }

.qg-story-piece--hole-a { bottom: 20%; left: 34%; transform: rotate(-6deg); }
.qg-story-piece--hole-b { bottom: 20%; right: 34%; transform: rotate(6deg); }
.qg-story-piece--community-a { top: 24%; left: 25%; transform: rotate(-8deg); }
.qg-story-piece--community-b { top: 20%; left: 43%; }
.qg-story-piece--community-c { top: 24%; right: 25%; transform: rotate(8deg); }
.qg-story-piece--bet-chip-a { top: 32%; left: 30%; }
.qg-story-piece--bet-chip-b { top: 44%; left: 44%; }
.qg-story-piece--fold-card { top: 32%; right: 24%; transform: rotate(16deg); opacity: .76; }
.qg-story-piece--pot-hand { top: 18%; left: 35%; }
.qg-story-piece--pot-main { top: 40%; left: 35%; }
.qg-story-piece--pot-chip-a { bottom: 20%; left: 26%; }
.qg-story-piece--pot-chip-b { bottom: 18%; left: 43%; }
.qg-story-piece--pot-chip-c { bottom: 20%; right: 26%; }

.qg-story-piece--store-main { top: 36%; left: 34%; }
.qg-story-piece--store-seed-a { top: 24%; left: 24%; }
.qg-story-piece--store-seed-b { top: 24%; right: 24%; }
.qg-story-piece--store-seed-c { bottom: 24%; left: 24%; }
.qg-story-piece--store-seed-d { bottom: 24%; right: 24%; }

@keyframes qg-goal-flip-stone {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); background: linear-gradient(180deg, #334155, #020617); }
}

.qg-tutorial-goal-lead {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(217,199,163,.28);
  border-radius: 8px;
  background: rgba(217,199,163,.08);
  color: var(--qg-chess-ink, #f4efe4);
  line-height: 1.65;
}

.qg-tutorial-goal-lead strong {
  color: var(--qg-chess-accent, #d9c7a3);
  font-weight: 900;
}

.qg-shogi-rule-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 12px;
}

.qg-shogi-rule-row span {
  grid-row: span 2;
  width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #b7791f;
  border-radius: 3px 3px 7px 7px;
  clip-path: polygon(50% 0%, 91% 21%, 83% 100%, 17% 100%, 9% 21%);
  background: linear-gradient(180deg, #fbe8ad, #d99638);
  color: #111827;
  font-weight: 900;
}

.qg-shogi-rule-row strong {
  color: #111827;
  font-weight: 900;
}

.qg-shogi-rule-row small b {
  display: block;
  margin-top: 6px;
  color: #92400e;
  font-weight: 900;
}

.qg-shogi-rule-notes,
.qg-shogi-ai-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.qg-shogi-rule-notes span,
.qg-shogi-ai-options span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 900;
}

.qg-shogi-rule-note-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

.qg-shogi-rule-note-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}

.qg-shogi-rule-note-group h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 0.94rem;
  font-weight: 900;
}

.qg-shogi-rule-note-group ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 1.1rem;
}

.qg-shogi-rule-note-group li {
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.6;
}

.qg-shogi-problem {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.qg-shogi-problem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qg-shogi-problem-head span {
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfeff;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-shogi-choice-list {
  display: grid;
  gap: 7px;
}

.qg-shogi-choice-list button {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  text-align: left;
  font-weight: 800;
}

.qg-shogi-choice-list button.is-correct {
  border-color: #14b8a6;
  background: #ecfeff;
  color: #0f766e;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

.qg-shogi-choice-list button.is-wrong {
  border-color: #fb7185;
  background: #fff1f2;
  color: #9f1239;
  box-shadow: 0 0 0 3px rgba(251,113,133,0.12);
}

.qg-shogi-problem-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(148,163,184,0.26);
  border-radius: 8px;
  background: #f8fafc;
}

.qg-shogi-problem-result > span:not(.qg-training-result-icon),
.qg-shogi-problem-result-actions {
  grid-column: 2;
}

.qg-shogi-problem-result.is-correct {
  border-color: rgba(20,184,166,0.45);
  background:
    linear-gradient(135deg, rgba(20,184,166,0.18), rgba(250,204,21,0.08)),
    #f0fdfa;
  color: #0f766e;
}

.qg-shogi-problem-result.is-wrong {
  border-color: rgba(251,113,133,0.45);
  background:
    linear-gradient(135deg, rgba(251,113,133,0.14), rgba(251,191,36,0.1)),
    #fff7ed;
  color: #7f1d1d;
}

.qg-shogi-problem-result[hidden] {
  display: none;
}

.qg-entry-bot {
  overflow: hidden;
}

.qg-entry-bot-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
  color: #111827;
  text-decoration: none;
}

.qg-entry-bot-main:hover {
  color: #111827;
  text-decoration: none;
  background: #f8fafc;
}

.qg-entry-bot-main span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #111827;
  color: #fbbf24;
}

.qg-entry-bot-main strong,
.qg-entry-bot-main em,
.qg-entry-bot-main small {
  display: block;
  min-width: 0;
}

.qg-entry-bot-main strong {
  font-weight: 900;
}

.qg-entry-bot-main em,
.qg-entry-bot-main small {
  color: #64748b;
  font-size: 0.76rem;
  font-style: normal;
}

.qg-entry-bot-profile {
  display: block;
  padding: 8px 11px;
  border-top: 1px solid #e5e7eb;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.qg-style-learn #qg-side-rating,
.qg-style-learn .qg-competition-panel {
  display: none;
}

.qg-style-competitive .qg-shogi-learning-hub .qg-learn-flow {
  opacity: 0.82;
}

html[data-qg-play-style="learning"] .qg-competitive-only,
html[data-qg-play-style="research"] .qg-learn-only {
  display: none;
}

.qg-shogi-play-shell {
  padding: clamp(14px, 3vw, 28px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 4%, rgba(180,108,38,0.2), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(20,184,166,0.12), transparent 30%),
    linear-gradient(180deg, #080b12 0%, #111827 46%, #0b1220 100%);
  color: #e5edf7;
}

.qg-shogi-play-shell .qg-panel,
.qg-shogi-play-shell .qg-detail-hero {
  border-color: rgba(255,255,255,0.14);
  background: rgba(15,23,42,0.82);
  color: #e5edf7;
  box-shadow: 0 18px 46px rgba(0,0,0,0.22);
  backdrop-filter: blur(14px);
}

.qg-shogi-play-shell .qg-detail-hero h1,
.qg-shogi-play-shell .qg-panel-head h2,
.qg-shogi-play-shell .qg-start-pane strong {
  color: #fff7ed;
}

.qg-shogi-play-shell .qg-detail-hero p,
.qg-shogi-play-shell .qg-panel-note,
.qg-shogi-play-shell .qg-start-pane p,
.qg-shogi-play-shell .qg-flow-text,
.qg-shogi-play-shell .qg-empty {
  color: #b6c3d4;
}

.qg-shogi-play-shell .qg-primary-action {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #111827;
}

.qg-shogi-play-shell .qg-action-btn,
.qg-shogi-play-shell .qg-text-btn,
.qg-shogi-play-shell .qg-icon-btn {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #e5edf7;
}

.qg-growth-step-tabs a {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
}

.qg-growth-step-tabs a:hover,
.qg-growth-step-tabs a.is-active {
  border-color: rgba(250,204,21,0.48);
  background: rgba(250,204,21,0.12);
  color: #fff7ed;
}

.qg-start-pane-play {
  align-items: center;
}

.qg-shogi-play-shell .qg-match-board {
  border-color: rgba(250,204,21,0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.34);
}

.qg-shogi-site {
  display: grid;
  gap: 18px;
  padding: clamp(14px, 3vw, 28px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 0%, rgba(180,108,38,0.22), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(20,184,166,0.16), transparent 32%),
    linear-gradient(180deg, #080b12 0%, #111827 44%, #0b1220 100%);
  color: #e5edf7;
}

.qg-shogi-site > * {
  min-width: 0;
}

.qg-shogi-training-app .qg-game-surface--iframe {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.qg-shogi-training-app .qg-game-surface-frame {
  display: block;
  border: 0;
  border-radius: 8px;
  background: #070b12;
}

.qg-shogi-site .qg-panel {
  margin: 0;
  border-color: rgba(255,255,255,0.13);
  background: rgba(15,23,42,0.88);
  color: #e5edf7;
  box-shadow: 0 18px 46px rgba(0,0,0,0.22);
}

.qg-shogi-site .qg-panel-head h2,
.qg-shogi-site .qg-entry-section-head h3,
.qg-shogi-site .qg-shogi-page-head h1 {
  color: #fff7ed;
}

.qg-shogi-site .qg-panel-note,
.qg-shogi-site .qg-entry-section-head span,
.qg-shogi-site .qg-empty,
.qg-shogi-site .qg-shogi-page-head p {
  color: #b6c3d4;
}

.qg-shogi-page-head {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,11,18,0.94), rgba(8,11,18,0.66)),
    var(--qg-shogi-hero-image, url('/static/games/shogi_banner.png')),
    linear-gradient(135deg, #080b12, #26311d);
  background-position: center;
  background-size: cover;
}

.qg-shogi-page-head h1 {
  margin: 4px 0 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0;
}

.qg-shogi-page-head p {
  max-width: 780px;
  margin: 0;
  line-height: 1.7;
}

.qg-shogi-page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qg-shogi-site .qg-shogi-site-menu a.is-active {
  border-color: rgba(250,204,21,0.72);
  background: rgba(250,204,21,0.16);
  color: #fef3c7;
}

.qg-shogi-site .qg-primary-action {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #111827;
}

.qg-shogi-site .qg-action-btn,
.qg-shogi-site .qg-text-btn {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #e5edf7;
}

.qg-shogi-site .qg-action-btn:hover,
.qg-shogi-site .qg-text-btn:hover {
  border-color: rgba(250,204,21,0.5);
  background: rgba(250,204,21,0.12);
  color: #fef3c7;
}

.qg-shogi-site .qg-shogi-learning-card,
.qg-shogi-site .qg-shogi-research-card,
.qg-shogi-site .qg-shogi-rule-row,
.qg-shogi-site .qg-shogi-problem,
.qg-shogi-site .qg-entry-bot,
.qg-shogi-site .qg-entry-section {
  border-color: rgba(255,255,255,0.13);
  background: rgba(8,11,18,0.46);
  color: #e5edf7;
}

.qg-shogi-site .qg-shogi-learning-card.is-primary {
  border-color: rgba(250,204,21,0.42);
  background: linear-gradient(135deg, rgba(250,204,21,0.15), rgba(20,184,166,0.1));
}

.qg-shogi-site .qg-shogi-learning-card:hover,
.qg-shogi-site .qg-shogi-research-card:hover,
.qg-shogi-site .qg-entry-bot-main:hover,
.qg-shogi-site .qg-live-card:hover {
  border-color: rgba(250,204,21,0.45);
  background: rgba(250,204,21,0.1);
  color: #fff7ed;
}

.qg-shogi-site .qg-shogi-learning-card strong,
.qg-shogi-site .qg-shogi-research-card strong,
.qg-shogi-site .qg-shogi-rule-row strong,
.qg-shogi-site .qg-shogi-problem strong,
.qg-shogi-site .qg-entry-bot-main strong,
.qg-shogi-site .qg-shogi-suggestion-body strong {
  color: #fff7ed;
}

.qg-shogi-site .qg-shogi-learning-card small,
.qg-shogi-site .qg-shogi-research-card small,
.qg-shogi-site .qg-shogi-rule-row small,
.qg-shogi-site .qg-shogi-problem p,
.qg-shogi-site .qg-entry-bot-main em,
.qg-shogi-site .qg-entry-bot-main small,
.qg-shogi-site .qg-shogi-suggestion-body small {
  color: #b6c3d4;
}

.qg-shogi-site .qg-shogi-learning-icon,
.qg-shogi-site .qg-shogi-suggestion-body > span,
.qg-shogi-site .qg-entry-bot-main span {
  background: #9a5a19;
  color: #fff7ed;
}

.qg-shogi-site .qg-shogi-learning-card.is-primary .qg-shogi-learning-icon {
  background: #facc15;
  color: #111827;
}

.qg-shogi-site .qg-shogi-learning-card em,
.qg-shogi-site .qg-shogi-problem-head span,
.qg-shogi-site .qg-shogi-problem-meta em,
.qg-shogi-site .qg-shogi-research-card em {
  background: rgba(250,204,21,0.14);
  color: #fde68a;
}

.qg-shogi-problem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.qg-shogi-problem-meta em,
.qg-shogi-research-card em {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
}

.qg-shogi-solution-line {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.08);
}

.qg-shogi-solution-line span {
  color: #0369a1;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-shogi-solution-line strong {
  color: #0f172a;
  font-size: 0.86rem;
  line-height: 1.45;
}

.qg-shogi-site .qg-shogi-solution-line {
  border-color: rgba(125, 211, 252, 0.24);
  background: rgba(14, 165, 233, 0.1);
}

.qg-shogi-site .qg-shogi-solution-line span {
  color: #7dd3fc;
}

.qg-shogi-site .qg-shogi-solution-line strong {
  color: #e0f2fe;
}

.qg-shogi-research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.qg-shogi-research-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
}

.qg-shogi-research-card .qg-action-btn {
  grid-column: 1 / -1;
  justify-content: center;
}

.qg-shogi-research-capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.qg-shogi-research-capability {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.qg-shogi-capability-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qg-shogi-capability-head i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
}

.qg-shogi-capability-head h3 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
}

.qg-shogi-capability-list,
.qg-shogi-opening-groups,
.qg-shogi-analysis-rows {
  display: grid;
  gap: 10px;
}

.qg-shogi-capability-list article,
.qg-shogi-opening-groups article,
.qg-shogi-analysis-rows article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.qg-shogi-capability-list strong,
.qg-shogi-opening-groups strong,
.qg-shogi-analysis-rows strong {
  color: #111827;
  font-size: 0.92rem;
}

.qg-shogi-capability-list span,
.qg-shogi-analysis-rows span {
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.55;
}

.qg-shogi-capability-list small,
.qg-shogi-opening-groups span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qg-shogi-capability-list b,
.qg-shogi-opening-groups b {
  border: 1px solid #fde68a;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.72rem;
  padding: 3px 8px;
}

.qg-shogi-site .qg-shogi-research-capability {
  border-color: rgba(255,255,255,0.12);
  background: rgba(8,11,18,0.62);
}

.qg-shogi-site .qg-shogi-capability-head i {
  background: rgba(250,204,21,0.14);
  color: #fde68a;
}

.qg-shogi-site .qg-shogi-capability-head h3,
.qg-shogi-site .qg-shogi-capability-list strong,
.qg-shogi-site .qg-shogi-opening-groups strong,
.qg-shogi-site .qg-shogi-analysis-rows strong {
  color: #f8fafc;
}

.qg-shogi-site .qg-shogi-capability-list article,
.qg-shogi-site .qg-shogi-opening-groups article,
.qg-shogi-site .qg-shogi-analysis-rows article {
  border-color: rgba(148,163,184,0.2);
  background: rgba(15,23,42,0.64);
}

.qg-shogi-site .qg-shogi-capability-list span,
.qg-shogi-site .qg-shogi-analysis-rows span {
  color: #cbd5e1;
}

.qg-shogi-site .qg-shogi-capability-list b,
.qg-shogi-site .qg-shogi-opening-groups b {
  border-color: rgba(250,204,21,0.28);
  background: rgba(250,204,21,0.1);
  color: #fde68a;
}

.qg-shogi-site .qg-shogi-learning-next,
.qg-shogi-site .qg-shogi-suggestion-body,
.qg-shogi-site .qg-shogi-problem-result {
  border-color: rgba(250,204,21,0.22);
  background: rgba(250,204,21,0.08);
  color: #e5edf7;
}

.qg-shogi-site .qg-entry-time-controls {
  margin: 0 14px 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(8,11,18,0.4);
}

.qg-shogi-site .qg-entry-time-controls span {
  color: #fde68a;
}

.qg-shogi-site .qg-entry-time-controls em {
  background: rgba(255,255,255,0.08);
  color: #e5edf7;
}

.qg-shogi-site .qg-entry-time-controls em.is-default {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.16);
}

.qg-shogi-site .qg-entry-time-controls a,
.qg-shogi-site .qg-entry-row,
.qg-shogi-site .qg-entry-bot-main,
.qg-shogi-site .qg-entry-bot-profile {
  color: inherit;
}

.qg-shogi-site .qg-entry-list .qg-empty {
  background: rgba(8,11,18,0.32);
}

.qg-entry-bot-main b {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(250,204,21,0.16);
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 900;
}

.qg-mini-shogi-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(18px, 1fr));
  max-width: 276px;
  border: 1px solid rgba(146,64,14,0.72);
  background: #c98739;
}

.qg-mini-shogi-board span,
.qg-mini-shogi-board button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0;
  border-right: 1px solid rgba(92,47,12,0.34);
  border-bottom: 1px solid rgba(92,47,12,0.34);
  background: rgba(255,255,255,0.08);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.qg-mini-shogi-board span.has-piece,
.qg-mini-shogi-board button.has-piece {
  background: linear-gradient(180deg, #f6d48a, #d99a3e);
}

.qg-mini-shogi-board span.is-gote,
.qg-mini-shogi-board button.is-gote {
  transform: rotate(180deg);
}

.qg-mini-shogi-board span.is-source,
.qg-mini-shogi-board button.is-source {
  outline: 2px solid #14b8a6;
  outline-offset: -2px;
}

.qg-mini-shogi-board span.is-target,
.qg-mini-shogi-board button.is-target {
  outline: 2px solid #facc15;
  outline-offset: -2px;
}

.qg-mini-shogi-board button:hover,
.qg-mini-shogi-board button:focus-visible,
.qg-mini-shogi-board button.is-selected {
  outline: 2px solid #5eead4;
  outline-offset: -2px;
}

.qg-mini-shogi-board button.is-candidate {
  box-shadow: inset 0 0 0 3px rgba(250,204,21,0.76);
}

.qg-shogi-problem.is-board-dragging .qg-mini-shogi-board button {
  touch-action: none;
}

.qg-mini-shogi-board button.is-dragging {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 14px rgba(20,184,166,0.24), inset 0 0 0 2px #14b8a6;
  cursor: grabbing;
}

.qg-mini-shogi-board button.is-drop-target {
  background: #bfdbfe;
  box-shadow: inset 0 0 0 3px #2563eb;
}

.qg-board-answer-hint {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 800;
}

.qg-board-answer-hint i {
  color: #5eead4;
}

.qg-live-primary {
  padding: 0 14px 14px;
}

.qg-live-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.qg-live-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(8,11,18,0.42);
  color: #e5edf7;
  text-decoration: none;
}

.qg-live-card-status {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(239,68,68,0.18);
  color: #fecaca;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-shogi-site .cmsgame-rank-live {
  border-color: rgba(248,113,113,0.42);
  background: rgba(127,29,29,0.24);
  color: #fecaca;
}

.qg-shogi-site .cmsgame-rank-live:hover {
  background: rgba(248,113,113,0.18);
  color: #fee2e2;
}

.qg-live-card strong {
  color: #fff7ed;
}

.qg-live-card small {
  color: #b6c3d4;
}

.qg-live-card em {
  color: #fde68a;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 900px) {
  .qg-shogi-site-hero,
  .qg-shogi-style-tabs,
  .qg-shogi-learning-grid,
  .qg-shogi-rules-grid,
  .qg-shogi-rule-note-groups,
  .qg-shogi-training-grid,
  .qg-entry-bot-grid {
    grid-template-columns: 1fr;
  }
  .qg-shogi-learning-next,
  .qg-shogi-suggestion-body,
  .qg-shogi-goal-panel {
    grid-template-columns: 1fr;
  }
  .qg-shogi-goal-story--learning .qg-shogi-story-controls,
  .qg-shogi-goal-story--learning .qg-shogi-story-next-step {
    grid-column: 1;
    grid-row: auto;
  }
  .qg-shogi-goal-story--learning .qg-shogi-story-next-step {
    flex-wrap: wrap;
  }
  .qg-shogi-site-hero {
    min-height: 520px;
    align-content: end;
  }
  .qg-start-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qg-start-pane,
  .qg-beginner-grid {
    grid-template-columns: 1fr;
  }
  .qg-app-tutorial-link {
    grid-template-columns: 1fr;
  }
  .qg-start-pane-actions {
    justify-content: flex-start;
  }
  .qg-beginner-flutter iframe {
    min-height: 480px;
  }
}

@media (max-width: 720px) {
  .qg-shogi-goal-story--learning .qg-shogi-story-next-step {
    display: flex;
  }
}

@media (max-width: 560px) {
  .qg-start-tabs {
    grid-template-columns: 1fr;
  }
  .qg-game-info-grid,
  .qg-game-guide {
    grid-template-columns: 1fr;
  }
  .qg-shogi-tutorial-shell {
    padding: 12px;
  }
  .qg-shogi-tutorial-shell .qg-detail-hero {
    grid-template-columns: 1fr;
  }
  .qg-practice-next-actions .qg-tutorial-actions > * {
    width: 100%;
  }
  .qg-beginner-flutter iframe {
    min-height: 420px;
  }
}

/* Shogi UI audit refinements */
body:has(.qg-shogi-site),
body:has(.qg-shogi-play-shell),
body:has(.qg-shogi-tutorial-shell),
body:has(.qg-shogi-page-head) {
  background:
    radial-gradient(circle at 18% 0%, rgba(154,90,25,0.22), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(20,184,166,0.16), transparent 30%),
    #070b12;
}

.gameportal:has(.qg-shogi-site),
.gameportal:has(.qg-shogi-play-shell),
.gameportal:has(.qg-shogi-tutorial-shell),
.gameportal:has(.qg-shogi-page-head) {
  --gp-page-bg: #070b12;
  --gp-page-text: #e5edf7;
  --gp-header-bg: rgba(7,11,18,0.94);
  --gp-header-text: #f8fafc;
  --gp-header-border: rgba(148,163,184,0.18);
  --gp-header-shadow: 0 10px 30px rgba(0,0,0,0.24);
  --gp-nav-bg: rgba(7,11,18,0.9);
  --gp-nav-text: #cbd5e1;
  --gp-nav-border: rgba(148,163,184,0.16);
  --gp-nav-link-hover: #fde68a;
  --gp-nav-active: #facc15;
  --gp-nav-active-border: #facc15;
  --gp-input-bg: rgba(15,23,42,0.86);
  --gp-input-focus-bg: rgba(15,23,42,0.98);
  --gp-input-text: #e5edf7;
  --gp-input-placeholder: #94a3b8;
  --gp-icon-hover-bg: rgba(250,204,21,0.12);
  background:
    radial-gradient(circle at 16% 0%, rgba(154,90,25,0.2), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(20,184,166,0.15), transparent 32%),
    linear-gradient(180deg, #070b12 0%, #0b1220 55%, #080b12 100%);
}

.gameportal:has(.qg-shogi-site) .gp-main,
.gameportal:has(.qg-shogi-play-shell) .gp-main,
.gameportal:has(.qg-shogi-tutorial-shell) .gp-main,
.gameportal:has(.qg-shogi-page-head) .gp-main {
  margin-top: 0 !important;
  padding-top: clamp(18px, 3vw, 32px);
  padding-bottom: clamp(22px, 4vw, 42px);
}

.gameportal:has(.qg-shogi-site) .gp-header-search input,
.gameportal:has(.qg-shogi-play-shell) .gp-header-search input,
.gameportal:has(.qg-shogi-tutorial-shell) .gp-header-search input,
.gameportal:has(.qg-shogi-page-head) .gp-header-search input,
.gameportal:has(.qg-shogi-site) .gp-language-select,
.gameportal:has(.qg-shogi-play-shell) .gp-language-select,
.gameportal:has(.qg-shogi-tutorial-shell) .gp-language-select,
.gameportal:has(.qg-shogi-page-head) .gp-language-select {
  border-color: rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.86);
  color: #e5edf7;
}

.gameportal:has(.qg-shogi-site) .store-breadcrumb,
.gameportal:has(.qg-shogi-play-shell) .store-breadcrumb,
.gameportal:has(.qg-shogi-tutorial-shell) .store-breadcrumb,
.gameportal:has(.qg-shogi-page-head) .store-breadcrumb {
  color: #94a3b8;
}

.gameportal:has(.qg-shogi-site) .breadcrumb a,
.gameportal:has(.qg-shogi-play-shell) .breadcrumb a,
.gameportal:has(.qg-shogi-tutorial-shell) .breadcrumb a,
.gameportal:has(.qg-shogi-page-head) .breadcrumb a {
  color: #5eead4;
}

.gameportal:has(.qg-shogi-site) .breadcrumb-item.active,
.gameportal:has(.qg-shogi-play-shell) .breadcrumb-item.active,
.gameportal:has(.qg-shogi-tutorial-shell) .breadcrumb-item.active,
.gameportal:has(.qg-shogi-page-head) .breadcrumb-item.active {
  color: #cbd5e1;
}

.qg-shogi-site {
  margin: 0;
  border-color: rgba(148,163,184,0.12);
  background:
    radial-gradient(circle at 14% 0%, rgba(154,90,25,0.18), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(20,184,166,0.12), transparent 30%),
    rgba(7,11,18,0.72);
  box-shadow: 0 26px 80px rgba(0,0,0,0.26);
}

.qg-shogi-site .qg-panel,
.qg-shogi-play-shell .qg-panel,
.qg-shogi-play-shell .qg-play-panel,
.qg-shogi-play-shell .qg-detail-hero {
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.72);
  color: #e5edf7;
  box-shadow: 0 18px 46px rgba(0,0,0,0.26);
  backdrop-filter: blur(16px);
}

.qg-shogi-site .qg-panel-head,
.qg-shogi-play-shell .qg-panel-head,
.qg-shogi-site .qg-entry-section-head,
.qg-shogi-play-shell .qg-entry-section-head {
  border-bottom-color: rgba(148,163,184,0.18);
  background:
    linear-gradient(90deg, rgba(15,23,42,0.94), rgba(15,23,42,0.68));
  color: #f8fafc;
}

.qg-shogi-site .qg-panel-head h2,
.qg-shogi-play-shell .qg-panel-head h2,
.qg-shogi-site .qg-entry-section-head h3,
.qg-shogi-play-shell .qg-entry-section-head h3 {
  color: #fff7ed;
}

.qg-shogi-site .qg-panel-note,
.qg-shogi-play-shell .qg-panel-note,
.qg-shogi-site .qg-entry-section-head span,
.qg-shogi-play-shell .qg-entry-section-head span {
  color: #aebbd0;
}

.qg-shogi-site .qg-match-entry > .qg-panel-head {
  border-bottom-color: rgba(148,163,184,0.18);
  background:
    linear-gradient(90deg, rgba(15,23,42,0.94), rgba(15,23,42,0.68));
  color: #f8fafc;
}

.qg-shogi-site .qg-match-entry > .qg-panel-head h2,
.qg-shogi-site .qg-match-entry .qg-entry-hero strong {
  color: #fff7ed;
}

.qg-shogi-site .qg-empty,
.qg-shogi-play-shell .qg-empty,
.qg-shogi-site .qg-entry-planned,
.qg-shogi-play-shell .qg-entry-planned {
  border-color: rgba(148,163,184,0.24);
  background: rgba(8,11,18,0.46);
  color: #cbd5e1;
}

.qg-shogi-site .qg-empty strong,
.qg-shogi-play-shell .qg-empty strong {
  color: #f8fafc;
}

.qg-shogi-empty-state {
  place-items: start;
}

.qg-shogi-empty-state i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(250,204,21,0.14);
  color: #fde68a;
  font-size: 1.05rem;
}

.qg-shogi-empty-state .qg-action-btn {
  width: fit-content;
  margin-top: 4px;
}

.qg-shogi-site .qg-shogi-learning-card,
.qg-shogi-site .qg-shogi-research-card,
.qg-shogi-site .qg-shogi-rule-row,
.qg-shogi-site .qg-shogi-problem,
.qg-shogi-site .qg-entry-section,
.qg-shogi-site .qg-entry-row,
.qg-shogi-site .qg-entry-hero,
.qg-shogi-site .qg-entry-stats span,
.qg-shogi-site .qg-event-card,
.qg-shogi-site .qg-live-card,
.qg-shogi-play-shell .qg-list-row,
.qg-shogi-play-shell .qg-event-card,
.qg-shogi-play-shell .qg-game-tile,
.qg-shogi-play-shell .qg-game-info-collapsed > summary,
.qg-shogi-play-shell .qg-game-info-grid div,
.qg-shogi-play-shell .qg-game-guide article {
  border-color: rgba(148,163,184,0.2);
  background: rgba(8,11,18,0.42);
  color: #e5edf7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.qg-shogi-site .qg-shogi-learning-card:hover,
.qg-shogi-site .qg-shogi-research-card:hover,
.qg-shogi-site .qg-shogi-problem:hover,
.qg-shogi-site .qg-entry-row:hover,
.qg-shogi-play-shell .qg-list-row:hover,
.qg-shogi-play-shell .qg-game-tile:hover {
  border-color: rgba(250,204,21,0.5);
  background: rgba(250,204,21,0.1);
  color: #fff7ed;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

.qg-shogi-site .qg-shogi-choice-list button,
.qg-shogi-play-shell .qg-choice-dialog,
.qg-shogi-play-shell .qg-more-actions summary,
.qg-shogi-play-shell .qg-more-actions > div,
.qg-shogi-play-shell .qg-review-controls button {
  border-color: rgba(148,163,184,0.26);
  background: rgba(15,23,42,0.82);
  color: #e5edf7;
}

.qg-shogi-site .qg-shogi-choice-list button:hover {
  border-color: rgba(250,204,21,0.5);
  background: rgba(250,204,21,0.1);
}

.qg-shogi-site .qg-shogi-choice-list button.is-correct {
  border-color: rgba(94,234,212,0.62);
  background: rgba(20,184,166,0.18);
  color: #99f6e4;
}

.qg-shogi-site .qg-shogi-choice-list button.is-wrong {
  border-color: rgba(248,113,113,0.62);
  background: rgba(127,29,29,0.28);
  color: #fecaca;
}

.qg-shogi-site .qg-tutorial-copy > p,
.qg-shogi-site .qg-tutorial-step p,
.qg-shogi-site .qg-shogi-learning-lead {
  color: #cbd5e1;
}

.qg-shogi-site .qg-tutorial-step,
.qg-shogi-site .qg-tutorial-focus-list span,
.qg-shogi-site .qg-tutorial-board,
.qg-shogi-site .qg-match-board--practice {
  border-color: rgba(148,163,184,0.22);
  background: rgba(8,11,18,0.46);
  color: #e5edf7;
}

.qg-shogi-site .qg-tutorial-step strong,
.qg-shogi-site .qg-match-board--practice .qg-board-head strong {
  color: #fff7ed;
}

.qg-shogi-site .qg-tutorial-focus-list i {
  background: #facc15;
  color: #1f2937;
}

.qg-shogi-site .qg-match-board--practice .qg-board-head,
.qg-shogi-site .qg-match-board--practice .qg-shogi-hand {
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.86);
  color: #e5edf7;
}

.qg-shogi-site .qg-match-board--practice .qg-shogi-area {
  background:
    radial-gradient(circle at 50% 0%, rgba(250,204,21,0.12), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,0.78), rgba(8,11,18,0.92));
}

.qg-shogi-site .qg-rating-list li,
.qg-shogi-play-shell .qg-rating-list li {
  border-color: rgba(148,163,184,0.2);
  background: rgba(8,11,18,0.5);
  color: #e5edf7;
}

.qg-shogi-site .qg-rating-list span,
.qg-shogi-play-shell .qg-rating-list span {
  color: #5eead4;
}

.qg-shogi-site .qg-rating-list strong,
.qg-shogi-play-shell .qg-rating-list strong,
.qg-shogi-play-shell .qg-game-main strong,
.qg-shogi-play-shell .qg-game-info-grid strong,
.qg-shogi-play-shell .qg-game-guide h3,
.qg-shogi-play-shell .qg-result-main h3,
.qg-shogi-play-shell .qg-result-review > strong,
.qg-shogi-play-shell .qg-rating-change strong {
  color: #fff7ed;
}

.qg-shogi-site .qg-rating-list em,
.qg-shogi-play-shell .qg-rating-list em {
  color: #fbbf24;
}

.qg-shogi-play-shell .qg-game-main small,
.qg-shogi-play-shell .qg-event-card small,
.qg-shogi-play-shell .qg-game-info-grid span,
.qg-shogi-play-shell .qg-game-guide p,
.qg-shogi-play-shell .qg-result-main p,
.qg-shogi-play-shell .qg-review-moves,
.qg-shogi-play-shell .qg-review-controls span,
.qg-shogi-play-shell .qg-rating-change,
.qg-shogi-play-shell .qg-result-save-toast,
.qg-shogi-play-shell .qg-review-learning {
  color: #cbd5e1;
}

.qg-shogi-site .qg-event-card span,
.qg-shogi-play-shell .qg-event-card span,
.qg-shogi-play-shell .qg-event-card strong {
  color: #fff7ed;
}

.qg-shogi-site .qg-shogi-page-head {
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(8,11,18,0.95), rgba(8,11,18,0.68)),
    var(--qg-shogi-hero-image, url('/static/games/shogi_banner.png')),
    linear-gradient(135deg, #080b12, #26311d);
  box-shadow: 0 22px 60px rgba(0,0,0,0.24);
}

.qg-shogi-site .qg-shogi-site-menu {
  margin-top: 12px;
}

.qg-shogi-site .qg-shogi-site-menu a,
.qg-shogi-play-shell .qg-mobile-side-tabs a {
  border-color: rgba(148,163,184,0.24);
  background: rgba(8,11,18,0.42);
  color: #e5edf7;
  backdrop-filter: blur(10px);
}

.qg-shogi-site .qg-shogi-site-menu a:hover,
.qg-shogi-site .qg-shogi-site-menu a.is-active,
.qg-shogi-play-shell .qg-mobile-side-tabs a:hover {
  border-color: rgba(250,204,21,0.56);
  background: rgba(250,204,21,0.12);
  color: #fef3c7;
}

.qg-shogi-site-hero {
  box-shadow: 0 28px 80px rgba(0,0,0,0.28);
}

.qg-hero-actions--single {
  margin-top: 18px;
}

.qg-hero-actions--single .qg-primary-action {
  min-height: 48px;
  padding-inline: 18px;
}

.qg-shogi-hero-routes {
  grid-template-columns: 1fr;
}

.qg-shogi-hero-route {
  min-height: 64px;
  background: rgba(15,23,42,0.64);
}

.qg-shogi-play-shell {
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(154,90,25,0.2), transparent 32%),
    radial-gradient(circle at 88% 9%, rgba(20,184,166,0.14), transparent 30%),
    linear-gradient(180deg, #070b12 0%, #0b1220 52%, #080b12 100%);
}

.qg-shogi-play-shell .qg-breadcrumb {
  color: #94a3b8;
}

.qg-shogi-play-shell .qg-breadcrumb a {
  color: #5eead4;
}

.qg-shogi-play-shell .qg-detail-hero {
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 18px;
}

.qg-shogi-play-shell .qg-detail-icon {
  width: 72px;
  height: 72px;
  font-size: 1.8rem;
}

.qg-shogi-play-shell .qg-growth-steps {
  display: none;
}

.qg-shogi-play-shell .qg-play-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.qg-shogi-play-shell .qg-play-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(420px, 1.24fr);
  grid-template-areas:
    "head board"
    "start board"
    "options board"
    "user board"
    "flow board";
  gap: 12px 14px;
  align-items: start;
  padding: 14px;
}

.qg-shogi-play-shell .qg-play-panel > .qg-panel-head {
  grid-area: head;
  margin: -14px -14px 0;
  border-radius: 8px 0 0 0;
}

.qg-shogi-play-shell .qg-start-router {
  grid-area: start;
}

.qg-shogi-play-shell .qg-match-options {
  grid-area: options;
  padding: 0;
}

.qg-shogi-play-shell .qg-current-user {
  grid-area: user;
  margin: 0;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(8,11,18,0.5);
  color: #cbd5e1;
}

.qg-shogi-play-shell .qg-flow-panel {
  grid-area: flow;
  margin: 0;
}

.qg-shogi-play-shell .qg-match-board {
  grid-area: board;
  align-self: stretch;
  min-height: 100%;
  margin: 0;
  border-color: rgba(250,204,21,0.26);
  background: rgba(8,11,18,0.62);
  box-shadow: 0 24px 70px rgba(0,0,0,0.36);
}

.qg-shogi-play-shell.qg-mode-lobby .qg-match-board,
.qg-shogi-play-shell.qg-mode-matching .qg-match-board {
  display: block;
}

.qg-shogi-play-shell.qg-mode-lobby .qg-play-panel,
.qg-shogi-play-shell.qg-mode-matching .qg-play-panel {
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.68);
}

.qg-shogi-play-shell .qg-start-pane {
  grid-template-columns: 1fr;
  align-items: stretch;
  margin: 0;
  padding: 12px;
  border-color: rgba(148,163,184,0.2);
  background: rgba(8,11,18,0.42);
}

.qg-shogi-play-shell .qg-start-pane-actions {
  gap: 8px;
  justify-content: flex-start;
}

.qg-shogi-play-shell .qg-start-pane-actions .qg-primary-action,
.qg-shogi-play-shell .qg-start-pane-actions .qg-action-btn,
.qg-shogi-play-shell .qg-start-pane-actions .qg-text-btn {
  min-width: 112px;
  justify-content: center;
}

.qg-shogi-play-shell .qg-match-options label,
.qg-shogi-play-shell .qg-ai-assist-options {
  color: #cbd5e1;
}

.qg-shogi-play-shell .qg-time-control-field,
.qg-shogi-play-shell .qg-ai-assist-options {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  background: rgba(7,11,18,0.36);
}

.qg-shogi-play-shell .qg-option-title,
.qg-shogi-play-shell .qg-ai-assist-options > span {
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 900;
}

.qg-native-time-select {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0 !important;
}

.qg-time-control-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
}

.qg-time-control-segments button,
.qg-assist-toggle {
  display: grid;
  gap: 3px;
  min-height: 58px;
  align-content: center;
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
  color: #e5edf7;
  padding: 8px 10px;
  text-align: left;
}

.qg-time-control-segments button strong {
  font-size: 0.86rem;
  line-height: 1.2;
}

.qg-time-control-segments button small,
.qg-assist-toggle small {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 800;
}

.qg-time-control-segments button:hover,
.qg-time-control-segments button:focus-visible {
  border-color: rgba(94,234,212,0.48);
  background: rgba(20,184,166,0.12);
}

.qg-time-control-segments button.is-active {
  border-color: rgba(250,204,21,0.62);
  background:
    linear-gradient(135deg, rgba(20,184,166,0.28), rgba(250,204,21,0.12)),
    rgba(15,23,42,0.86);
  box-shadow: 0 10px 26px rgba(20,184,166,0.12);
}

.qg-time-control-segments button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.qg-assist-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.qg-assist-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
}

.qg-assist-toggle i {
  color: #5eead4;
}

.qg-assist-toggle.is-on {
  border-color: rgba(94,234,212,0.4);
  background: rgba(20,184,166,0.14);
}

.qg-assist-toggle.is-off {
  border-color: rgba(148,163,184,0.18);
  background: rgba(15,23,42,0.5);
  opacity: 0.78;
}

.qg-assist-toggle.is-disabled {
  opacity: 0.58;
}

.qg-shogi-play-shell .qg-match-options select,
.qg-shogi-play-shell .qg-move-form input {
  border-color: rgba(148,163,184,0.28);
  background: rgba(8,11,18,0.76);
  color: #e5edf7;
}

.qg-shogi-play-shell .qg-ai-assist-options label {
  border-color: rgba(148,163,184,0.22);
  background: rgba(8,11,18,0.46);
  color: #cbd5e1;
}

.qg-watch-insight {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 12px 0;
}

.qg-watch-insight[hidden] {
  display: none;
}

.qg-watch-insight span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  background: rgba(7,11,18,0.42);
  color: #cbd5e1;
  min-width: 0;
}

.qg-watch-insight i {
  color: #5eead4;
}

.qg-watch-insight strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 900;
}

.qg-shogi-play-shell .qg-flow-panel,
.qg-shogi-play-shell.qg-mode-matching .qg-flow-panel {
  border-color: rgba(250,204,21,0.24);
  background: rgba(8,11,18,0.44);
}

.qg-shogi-play-shell .qg-flow-steps span {
  border-color: rgba(148,163,184,0.2);
  background: rgba(15,23,42,0.62);
  color: #94a3b8;
}

.qg-shogi-play-shell .qg-flow-steps span.is-active {
  border-color: rgba(250,204,21,0.5);
  background: rgba(250,204,21,0.12);
  color: #fde68a;
}

.qg-shogi-play-shell .qg-flow-steps span.is-complete {
  border-color: rgba(94,234,212,0.42);
  background: rgba(20,184,166,0.12);
  color: #99f6e4;
}

.qg-shogi-play-shell .qg-flow-message,
.qg-shogi-play-shell.qg-mode-matching .qg-flow-message {
  background: rgba(15,23,42,0.66);
  color: #cbd5e1;
}

.qg-shogi-play-shell .qg-flow-message strong {
  color: #fff7ed;
}

.qg-shogi-play-shell .qg-match-board .qg-board-head,
.qg-shogi-play-shell .qg-match-board .qg-shogi-hand {
  border-color: rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.86);
  color: #e5edf7;
}

.qg-shogi-play-shell .qg-match-board .qg-shogi-area {
  min-height: 100%;
  align-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(250,204,21,0.12), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,0.78), rgba(8,11,18,0.92));
}

.qg-shogi-play-shell .qg-match-board .qg-shogi-board {
  max-width: min(560px, 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.36),
    0 0 0 1px rgba(250,204,21,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.18);
}

.qg-shogi-play-shell .qg-match-board .qg-shogi-hand-label,
.qg-shogi-play-shell .qg-match-board .qg-shogi-hand-empty {
  color: #fde68a;
}

.qg-shogi-play-shell .qg-play-side {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.qg-shogi-play-shell .qg-play-side .qg-panel {
  min-width: 0;
}

.qg-shogi-play-shell .qg-result-panel,
.qg-shogi-play-shell .qg-rating-change,
.qg-shogi-play-shell .qg-review-metrics span,
.qg-shogi-play-shell .qg-result-save-toast,
.qg-shogi-play-shell .qg-rating-note {
  border-color: rgba(148,163,184,0.22);
  background: rgba(8,11,18,0.54);
  color: #cbd5e1;
}

.qg-shogi-play-shell .qg-result-save-toast {
  border-left-color: #14b8a6;
}

.qg-shogi-play-shell .qg-result-save-toast strong {
  color: #fff7ed;
}

.qg-shogi-play-shell .qg-review-learning {
  border-color: rgba(94,234,212,0.28);
  background: rgba(20,184,166,0.1);
}

.qg-shogi-play-shell.qg-mode-theater {
  padding: 0;
}

.qg-shogi-play-shell.qg-mode-theater .qg-play-panel {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.qg-shogi-play-shell.qg-mode-theater .qg-match-board {
  position: static;
  display: grid;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .qg-shogi-play-shell .qg-play-panel {
    grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 1.15fr);
  }
  .qg-shogi-play-shell .qg-play-side {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 900px) {
  .qg-shogi-play-shell .qg-play-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "board"
      "head"
      "start"
      "options"
      "user"
      "flow";
  }
  .qg-shogi-play-shell .qg-play-panel > .qg-panel-head {
    margin: 0;
    border-radius: 8px;
  }
  .qg-shogi-play-shell .qg-match-board {
    min-height: auto;
  }
  .qg-shogi-play-shell .qg-play-side {
    grid-template-columns: 1fr;
  }
  .qg-shogi-site-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .gameportal:has(.qg-shogi-site) .gp-main,
  .gameportal:has(.qg-shogi-play-shell) .gp-main,
  .gameportal:has(.qg-shogi-tutorial-shell) .gp-main {
    padding-top: 12px;
  }
  .qg-shogi-site,
  .qg-shogi-play-shell {
    padding: 10px;
  }
  .qg-shogi-play-shell .qg-play-panel {
    padding: 10px;
  }
  .qg-shogi-play-shell .qg-match-board {
    margin: 0;
    border: 1px solid rgba(250,204,21,0.24);
    border-radius: 8px;
  }
  .qg-shogi-play-shell .qg-play-side {
    max-height: none;
    overflow: visible;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
  }
  .qg-shogi-play-shell .qg-mobile-side-tabs {
    margin: 0;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 8px;
    background: rgba(8,11,18,0.54);
  }
  .qg-shogi-site .qg-shogi-site-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shogi UIUX follow-up refinements */
.qg-shogi-site .qg-shogi-page-head {
  background-position:
    center,
    var(--qg-shogi-head-position, 50% 50%),
    center;
  background-size:
    cover,
    var(--qg-shogi-head-size, cover),
    cover;
}

.qg-shogi-hero-route {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 92px;
}

.qg-shogi-hero-route-icon {
  display: grid;
  place-items: center;
}

.qg-shogi-hero-route-icon i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
}

.qg-shogi-hero-route-copy {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.qg-shogi-hero-route-copy small {
  display: block;
  min-width: 0;
  color: #b6c3d4;
  font-size: 0.76rem;
  line-height: 1.45;
}

.qg-shogi-hero-route-copy > span {
  width: fit-content;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(94,234,212,0.12);
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 900;
}

.qg-shogi-hero-route-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(250,204,21,0.22);
  border-radius: 999px;
  background: rgba(250,204,21,0.08);
  color: #fde68a;
}

.qg-shogi-hero-route-arrow i {
  width: auto;
  height: auto;
  background: transparent;
  color: inherit;
}

.qg-shogi-hero-route:hover .qg-shogi-hero-route-arrow,
.qg-shogi-hero-route:focus-visible .qg-shogi-hero-route-arrow {
  border-color: rgba(250,204,21,0.62);
  background: rgba(250,204,21,0.18);
  transform: translateX(2px);
}

.qg-entry-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 8px;
  min-width: min(520px, 100%);
}

.qg-entry-stats span {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  background: rgba(8,11,18,0.42);
}

.qg-entry-stats strong {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.qg-entry-stats small {
  color: #aebbd0;
  font-size: 0.72rem;
  font-weight: 900;
}

.qg-entry-stats span.has-count {
  border-color: rgba(94,234,212,0.42);
  background:
    linear-gradient(135deg, rgba(20,184,166,0.18), rgba(250,204,21,0.08)),
    rgba(8,11,18,0.52);
  box-shadow: 0 12px 28px rgba(20,184,166,0.12);
}

.qg-entry-stats span.has-count strong {
  color: #99f6e4;
}

.qg-entry-stats span[data-qg-entry-stat="watch"].has-count {
  border-color: rgba(250,204,21,0.46);
}

.qg-entry-stats span[data-qg-entry-stat="watch"].has-count strong {
  color: #fde68a;
}

.qg-entry-stats span.is-zero {
  display: none;
}

.qg-entry-stats span.is-updated,
.qg-shogi-live-strip span.is-updated {
  animation: qg-live-stat-glow 0.72s ease-out;
}

.qg-live-summary {
  margin: 10px 0 0;
  color: #aebbd0;
  font-size: 0.84rem;
  font-weight: 800;
}

.qg-shogi-live-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  max-width: 480px;
}

.qg-shogi-live-strip span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 8px;
  background: rgba(8,11,18,0.42);
}

.qg-shogi-live-strip strong {
  color: #f8fafc;
  font-size: 1.3rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.qg-shogi-live-strip small {
  color: #aebbd0;
  font-size: 0.72rem;
  font-weight: 900;
}

.qg-shogi-live-strip span.has-count {
  border-color: rgba(94,234,212,0.42);
  background:
    linear-gradient(135deg, rgba(20,184,166,0.18), rgba(250,204,21,0.08)),
    rgba(8,11,18,0.52);
  box-shadow: 0 12px 28px rgba(20,184,166,0.12);
}

.qg-shogi-live-strip span.has-count strong {
  color: #99f6e4;
}

.qg-shogi-live-strip span[data-qg-live-stat="watchable"].has-count {
  border-color: rgba(250,204,21,0.46);
}

.qg-shogi-live-strip span[data-qg-live-stat="watchable"].has-count strong {
  color: #fde68a;
}

.qg-shogi-live-strip span.is-zero {
  display: none;
}
.qg-shogi-live-strip.is-empty { display: none; }

.qg-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.qg-shogi-training-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  background: rgba(7,11,18,0.34);
}

.qg-training-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.qg-training-filter-group > span,
.qg-training-filter-status {
  color: #aebbd0;
  font-size: 0.78rem;
  font-weight: 900;
}

.qg-training-filter-group button {
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 999px;
  background: rgba(15,23,42,0.72);
  color: #cbd5e1;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 900;
}

.qg-training-filter-group button:hover,
.qg-training-filter-group button:focus-visible {
  border-color: rgba(94,234,212,0.48);
  background: rgba(20,184,166,0.12);
  color: #f8fafc;
}

.qg-training-filter-group button.is-active {
  border-color: rgba(250,204,21,0.62);
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #07111f;
}

.qg-training-filter-status {
  justify-self: end;
}

.qg-training-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.qg-training-shortcuts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 999px;
  background: rgba(15,23,42,0.56);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 900;
}

.qg-training-shortcuts i {
  color: #5eead4;
}

.qg-training-progress,
.qg-practice-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 4px 0 14px;
}

.qg-training-progress > span,
.qg-practice-progress > span {
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  overflow: hidden;
}

.qg-training-progress i,
.qg-practice-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #facc15);
  transition: width 0.22s ease;
}

.qg-training-progress strong,
.qg-practice-progress strong {
  color: #fde68a;
  font-size: 0.78rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.qg-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qg-shogi-problem {
  position: relative;
}

.qg-shogi-problem.is-celebrating {
  animation: qg-training-card-success 0.72s ease-out;
}

.qg-shogi-problem.is-celebrating::after {
  content: "○";
  font-family: inherit;
  font-weight: 1000;
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #042f2e;
  box-shadow: 0 0 22px rgba(20,184,166,0.42);
  font-size: 1.25rem;
  animation: qg-training-check-pop 0.5s ease-out;
}

.qg-training-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20,184,166,0.16);
  color: #0f766e;
  font-size: 1.05rem;
}

.qg-training-result-icon[data-state="correct"] {
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #06121f;
  box-shadow: 0 0 0 4px rgba(20,184,166,0.12);
}

.qg-training-result-icon[data-state="wrong"] {
  background: linear-gradient(135deg, #fb7185, #f97316);
  color: #fff7ed;
  box-shadow: 0 0 0 4px rgba(251,113,133,0.12);
}

.qg-shogi-problem.is-missed {
  border-color: rgba(251,113,133,0.42);
  animation: qg-answer-host-shake 0.42s ease-out;
}

.qg-training-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.qg-training-result-actions .qg-text-btn,
.qg-training-result-actions .qg-primary-action {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.82rem;
}

.qg-training-result-actions .qg-text-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.qg-practice-panel--interactive {
  position: relative;
}

.qg-success-burst {
  position: absolute;
  top: 78px;
  right: 24px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 52px;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #07111f;
  box-shadow: 0 18px 40px rgba(20,184,166,0.26);
  font-size: 0.9rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.qg-success-burst > i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}

.qg-success-burst > b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #fde68a;
  opacity: 0;
}

.qg-success-burst.is-active > b {
  animation: qg-success-spark 0.82s ease-out both;
}

.qg-success-burst > b:nth-of-type(1) { --qg-spark-x: -66px; --qg-spark-y: -35px; transform: rotate(18deg); }
.qg-success-burst > b:nth-of-type(2) { --qg-spark-x: -78px; --qg-spark-y: 8px; transform: rotate(42deg); background: #5eead4; }
.qg-success-burst > b:nth-of-type(3) { --qg-spark-x: -42px; --qg-spark-y: 35px; transform: rotate(72deg); }
.qg-success-burst > b:nth-of-type(4) { --qg-spark-x: 50px; --qg-spark-y: -38px; transform: rotate(24deg); background: #5eead4; }
.qg-success-burst > b:nth-of-type(5) { --qg-spark-x: 75px; --qg-spark-y: 4px; transform: rotate(58deg); }
.qg-success-burst > b:nth-of-type(6) { --qg-spark-x: 48px; --qg-spark-y: 34px; transform: rotate(84deg); background: #5eead4; }

.qg-success-burst[hidden] {
  display: none;
}

.qg-success-burst.is-active {
  animation: qg-success-burst 1.18s cubic-bezier(.2,.9,.24,1.08);
}

.qg-match-board .qg-shogi-board.qg-practice-success {
  animation: qg-practice-board-success 1.08s ease-out;
}

.qg-match-board .qg-shogi-board.qg-practice-error {
  animation: qg-practice-board-error 0.42s ease-out;
}

.qg-match-board .qg-shogi-cell.qg-is-answer-correct {
  z-index: 2;
  box-shadow:
    inset 0 0 0 3px #14b8a6,
    inset 0 0 18px rgba(250,204,21,0.34),
    0 0 20px rgba(20,184,166,0.48);
}

.qg-match-board .qg-shogi-cell.qg-is-answer-correct .qg-shogi-piece {
  animation: qg-answer-piece-land 0.58s cubic-bezier(.2,.9,.24,1.2);
}

.qg-shogi-step-nav .qg-primary-action.is-ready {
  border-color: rgba(250,204,21,0.68);
  box-shadow: 0 0 0 1px rgba(250,204,21,0.18), 0 0 24px rgba(20,184,166,0.24);
  animation: qg-next-ready 0.72s ease-out;
}

.qg-shogi-site .qg-shogi-rules-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.qg-shogi-site .qg-shogi-rule-row {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  min-height: 128px;
  padding: 14px;
}

.qg-shogi-site .qg-shogi-rule-row span {
  width: 50px;
  height: 56px;
  font-size: 1rem;
}

.qg-shogi-site .qg-shogi-rule-row strong {
  line-height: 1.35;
}

.qg-shogi-site .qg-shogi-rule-row small {
  grid-column: 2;
  max-width: 34em;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.qg-shogi-site .qg-shogi-rule-row small b {
  color: #fef3c7;
}

.qg-shogi-site .qg-shogi-rule-notes {
  padding-top: 2px;
}

.qg-shogi-site .qg-shogi-rule-notes span {
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.62);
  color: #cbd5e1;
}

.qg-shogi-site .qg-shogi-rule-note-group {
  border-color: rgba(148,163,184,0.2);
  background: rgba(8,11,18,0.5);
  color: #e5edf7;
}

.qg-shogi-site .qg-shogi-rule-note-group h3 {
  color: #fff7ed;
}

.qg-shogi-site .qg-shogi-rule-note-group li {
  color: #cbd5e1;
}

.qg-shogi-problem,
.qg-shogi-research-card,
.qg-shogi-site .qg-entry-row,
.qg-shogi-site .qg-rating-list li,
.qg-match-board .qg-shogi-cell,
.qg-match-board .qg-shogi-hand-piece {
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.qg-shogi-problem {
  position: relative;
  outline: none;
}

.qg-shogi-problem.is-active,
.qg-shogi-problem:focus-within,
.qg-shogi-problem:focus-visible {
  border-color: rgba(250,204,21,0.68);
  background:
    linear-gradient(135deg, rgba(250,204,21,0.13), rgba(20,184,166,0.08)),
    rgba(8,11,18,0.5);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(250,204,21,0.2);
}

.qg-shogi-problem.is-active::before {
  content: "選択中";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(250,204,21,0.18);
  color: #fde68a;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-shogi-problem.is-solved {
  border-color: rgba(94,234,212,0.56);
}

.qg-shogi-problem.is-missed {
  border-color: rgba(248,113,113,0.42);
}

.qg-shogi-problem.is-active .qg-mini-shogi-board {
  box-shadow: 0 0 0 2px rgba(250,204,21,0.22);
}

.qg-shogi-choice-list button:focus-visible,
.qg-shogi-research-card:focus-within,
.qg-shogi-site .qg-entry-row:focus-visible,
.qg-shogi-site .qg-player-link:focus-visible {
  outline: 2px solid rgba(94,234,212,0.78);
  outline-offset: 2px;
}

.qg-shogi-research-card:focus-within,
.qg-shogi-research-card:hover,
.qg-shogi-site .qg-entry-row:focus-visible,
.qg-shogi-site .qg-entry-row:hover,
.qg-shogi-site .qg-rating-list li:has(a:focus-visible),
.qg-shogi-site .qg-rating-list li:hover {
  border-color: rgba(250,204,21,0.5);
  background: rgba(250,204,21,0.1);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

.qg-shogi-research-card .qg-action-btn::after {
  content: "\f061";
  margin-left: 8px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.qg-board-idle-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px solid rgba(94,234,212,0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20,184,166,0.12), rgba(250,204,21,0.08)),
    rgba(8,11,18,0.58);
  color: #dbeafe;
}

.qg-board-idle-callout > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(94,234,212,0.16);
  color: #99f6e4;
}

.qg-board-idle-callout strong,
.qg-board-idle-callout p {
  display: block;
  min-width: 0;
}

.qg-board-idle-callout strong {
  color: #fff7ed;
}

.qg-board-idle-callout p {
  margin: 3px 0 0;
  color: #b6c3d4;
  line-height: 1.55;
}

.qg-shogi-play-shell:not(.qg-mode-lobby):not(.qg-mode-matching) .qg-board-idle-callout,
.qg-shogi-play-shell.qg-mode-theater .qg-board-idle-callout {
  display: none;
}

.qg-match-board .qg-shogi-board.qg-board-hint::after,
.qg-match-board .qg-shogi-board.qg-board-waiting::after {
  animation: qg-board-feedback-pop 0.18s ease-out;
}

.qg-match-board .qg-shogi-cell.qg-is-movable {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.32), transparent 44%),
    #e8bc6f;
}

.qg-match-board .qg-shogi-cell.qg-is-movable .qg-shogi-piece {
  filter: drop-shadow(0 0 8px rgba(20,184,166,0.24));
}

.qg-match-board .qg-shogi-cell.qg-is-selected {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 3px #0f766e,
    0 8px 18px rgba(20,184,166,0.2);
}

.qg-match-board .qg-shogi-cell.qg-is-destination::after {
  animation: qg-destination-pulse 1.1s ease-out infinite;
}

.qg-match-board .qg-shogi-cell.qg-is-legal-hover::after {
  content: "";
  position: absolute;
  inset: 35%;
  z-index: 1;
  border-radius: 999px;
  opacity: 0.72;
  background: #14b8a6;
  box-shadow: 0 0 14px rgba(20,184,166,0.46);
  pointer-events: none;
}

.qg-match-board .qg-shogi-cell.qg-has-piece:hover .qg-shogi-piece,
.qg-match-board .qg-shogi-cell.qg-has-piece:focus-visible .qg-shogi-piece {
  transform: rotate(var(--qg-shogi-piece-rotation, 0deg)) translateY(-3px) scale(1.02);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,0.22));
}

.qg-shogi-learning-quests {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(94,234,212,0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20,184,166,0.11), rgba(250,204,21,0.07)),
    rgba(8,11,18,0.42);
}

.qg-learning-quest-head,
.qg-shogi-learning-quests li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.qg-learning-quest-head > span,
.qg-shogi-learning-quests li > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(20,184,166,0.15);
  color: #99f6e4;
  font-weight: 900;
}

.qg-learning-quest-head strong,
.qg-shogi-learning-quests li strong {
  color: #fff7ed;
}

.qg-learning-quest-head small,
.qg-shogi-learning-quests li small {
  display: block;
  margin-top: 3px;
  color: #aebbd0;
  line-height: 1.55;
}

.qg-shogi-learning-quests ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qg-shogi-learning-quests li {
  padding: 10px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  background: rgba(15,23,42,0.48);
  opacity: 0.7;
}

.qg-shogi-learning-quests li.is-active {
  border-color: rgba(250,204,21,0.52);
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(250,204,21,0.16);
}

.qg-shogi-learning-quests li.is-complete {
  border-color: rgba(94,234,212,0.38);
  opacity: 1;
}

.qg-shogi-learning-quests li.is-complete > span {
  background: rgba(20,184,166,0.24);
}

.qg-learning-quest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qg-shogi-learning-quests.is-celebrating {
  animation: qg-training-card-success 0.72s ease-out;
}

.qg-research-review-row {
  grid-template-columns: 58px auto minmax(0, 1fr) auto;
  align-items: center;
}

.qg-review-thumb {
  display: grid;
  gap: 2px;
  place-items: center;
  width: 52px;
  min-height: 52px;
  border: 1px solid rgba(250,204,21,0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(250,204,21,0.16), rgba(20,184,166,0.12));
  color: #fde68a;
  line-height: 1;
}

.qg-review-thumb em {
  color: #99f6e4;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.qg-research-review-row .qg-review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.qg-research-review-row .qg-review-badges b {
  border: 1px solid rgba(94,234,212,0.24);
  border-radius: 8px;
  padding: 4px 8px;
  background: rgba(20,184,166,0.08);
  color: #99f6e4;
  font-size: 0.7rem;
  line-height: 1.2;
}

.qg-research-review-row .qg-review-badges .is-opening {
  border-color: rgba(250,204,21,0.42);
  background: rgba(250,204,21,0.1);
  color: #fde68a;
}

.qg-research-review-row .qg-review-badges .is-result {
  border-color: rgba(248,113,113,0.32);
  background: rgba(248,113,113,0.1);
  color: #fecaca;
}

.qg-community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.qg-community-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.qg-community-chat-drawer {
  position: sticky;
  top: 84px;
  min-width: 0;
}

.qg-community-hub {
  --qg-community-teal: #2dd4bf;
  --qg-community-amber: #fbbf24;
  --qg-community-violet: #a78bfa;
  --qg-community-panel: rgba(8, 15, 28, 0.9);
  --qg-community-border: rgba(148, 163, 184, 0.22);
  display: grid;
  gap: 18px;
  min-width: 0;
  color: #e5edf7;
}

.qg-community-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 0.95fr);
  gap: 22px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 22px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.18), transparent 38%),
    radial-gradient(circle at 94% 100%, rgba(167, 139, 250, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(8, 15, 28, 0.98), rgba(15, 23, 42, 0.94));
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.24);
}

.qg-community-command-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.qg-community-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.qg-community-command h2 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(1.42rem, 2.25vw, 2.15rem);
  line-height: 1.2;
}

.qg-community-command p {
  max-width: 680px;
  margin: 0;
  color: #aebbd0;
  line-height: 1.65;
}

.qg-community-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px;
}

.qg-community-action {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 82px;
  border: 1px solid var(--qg-community-border);
  border-radius: 16px;
  padding: 11px;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.qg-community-action > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(45, 212, 191, 0.12);
  color: var(--qg-community-teal);
}

.qg-community-action.is-ask > i {
  background: rgba(251, 191, 36, 0.12);
  color: var(--qg-community-amber);
}

.qg-community-action.is-play > i {
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
}

.qg-community-action.is-share {
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.qg-community-action.is-share > i {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

.qg-community-action strong,
.qg-community-action small {
  display: block;
}

.qg-community-action strong {
  color: #f8fafc;
  font-size: 0.86rem;
  line-height: 1.25;
  word-break: keep-all;
}

.qg-community-action small {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 0.67rem;
  line-height: 1.35;
}

.qg-community-action:hover,
.qg-community-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(45, 212, 191, 0.58);
  background: rgba(30, 41, 59, 0.92);
  color: #fff;
}

.qg-community-purpose-nav {
  position: sticky;
  top: 64px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid var(--qg-community-border);
  border-radius: 16px;
  padding: 7px;
  background: rgba(7, 13, 24, 0.92);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.2);
  backdrop-filter: blur(16px);
}

.qg-community-purpose-nav.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qg-community-purpose-nav a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 11px;
  color: #cbd5e1;
  font-size: 0.79rem;
  font-weight: 800;
  text-decoration: none;
}

.qg-community-purpose-nav a:hover,
.qg-community-purpose-nav a:focus-visible {
  background: rgba(45, 212, 191, 0.12);
  color: #99f6e4;
}

.qg-community-theme-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
  gap: 20px;
  scroll-margin-top: 128px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 32px);
  background:
    linear-gradient(115deg, rgba(120, 53, 15, 0.2), transparent 50%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 28, 0.98));
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.22);
}

.qg-community-theme-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.qg-community-theme-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.qg-community-theme-labels span,
.qg-community-theme-labels em {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 900;
  font-style: normal;
}

.qg-community-theme-labels span {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
}

.qg-community-theme-labels em {
  border: 1px solid rgba(45, 212, 191, 0.38);
  color: #99f6e4;
}

.qg-community-theme-labels em::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
  content: '';
}

.qg-community-theme-card h2 {
  margin: 0;
  color: #fff7d6;
  font-size: clamp(1.55rem, 2.8vw, 2.45rem);
  line-height: 1.2;
}

.qg-community-theme-card p {
  max-width: 900px;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.75;
}

.qg-community-viewpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.qg-community-viewpoints > span {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: #dbe7f5;
  font-size: 0.76rem;
  line-height: 1.45;
}

.qg-community-viewpoints b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.13);
  color: #fde68a;
}

.qg-community-theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.qg-community-theme-actions a,
.qg-community-section-head > a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  padding: 9px 13px;
  background: rgba(15, 23, 42, 0.72);
  color: #dbe7f5;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.qg-community-theme-actions .qg-community-theme-cta {
  border-color: rgba(251, 191, 36, 0.48);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #291605;
}

.qg-community-debate-guide {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 16px;
  padding: 16px;
  background: rgba(30, 27, 75, 0.26);
}

.qg-community-debate-guide > strong {
  color: #ddd6fe;
  font-size: 0.88rem;
}

.qg-community-debate-guide ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qg-community-debate-guide li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #cbd5e1;
  font-size: 0.75rem;
}

.qg-community-debate-guide li span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.14);
  color: #ddd6fe;
  font-weight: 900;
}

.qg-community-debate-guide > p {
  border-top: 1px solid rgba(167, 139, 250, 0.2);
  padding-top: 11px;
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5;
}

.qg-community-section-head {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  scroll-margin-top: 128px;
}

.qg-community-section-head > div {
  display: grid;
  gap: 2px;
}

.qg-community-section-head span {
  color: #5eead4;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.qg-community-section-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.18rem;
}

.qg-community-section-head > a {
  border-color: rgba(45, 212, 191, 0.34);
  color: #99f6e4;
}

.qg-community-chat-drawer,
.qg-community-main,
.qg-community-match-section {
  scroll-margin-top: 128px;
}

.qg-community-starter-box {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 14px;
  padding: 11px;
  background: rgba(15, 23, 42, 0.58);
}

.qg-community-starter-box > span {
  color: #99f6e4;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-community-starter-box > div {
  display: grid;
  gap: 6px;
}

.qg-community-starter-box button {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(15, 23, 42, 0.7);
  color: #cbd5e1;
  font: inherit;
  font-size: 0.71rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.qg-community-starter-box button:hover,
.qg-community-starter-box button:focus-visible {
  border-color: rgba(45, 212, 191, 0.5);
  color: #99f6e4;
}

.qg-community-match-section {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.2), rgba(8, 15, 28, 0.78));
}

.qg-community-match-lead {
  margin: 0;
  color: #aebbd0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.qg-community-free-lead {
  margin: 0;
  color: #aebbd0;
  font-size: 0.82rem;
  line-height: 1.65;
}

body.theme-game-theme .qg-community-hub .cmsqa-card,
body.theme-game-theme .qg-community-hub .cmsqa-filter-wrap,
body.theme-game-theme .qg-community-hub .cmsc-card {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(8, 15, 28, 0.72) !important;
  color: #e5edf7 !important;
}

body.theme-game-theme .qg-community-hub .cmsqa-ql-row {
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #e5edf7 !important;
}

body.theme-game-theme .qg-community-hub .cmsqa-ql-row:hover {
  background: rgba(45, 212, 191, 0.07) !important;
}

body.theme-game-theme .qg-community-hub .cmsqa-ql-title {
  color: #f8fafc !important;
}

body.theme-game-theme .qg-community-hub .cmsqa-ql-meta,
body.theme-game-theme .qg-community-hub .cmsqa-filter-sort,
body.theme-game-theme .qg-community-hub .cmsc-chat-entry-body p {
  color: #aebbd0 !important;
}

body.theme-game-theme .qg-community-hub .cmsqa-ql-stat,
body.theme-game-theme .qg-community-hub .cmsqa-filter-tab {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.78) !important;
  color: #cbd5e1 !important;
}

body.theme-game-theme .qg-community-hub .cmsqa-filter-active {
  border-color: rgba(45, 212, 191, 0.5);
  background: rgba(45, 212, 191, 0.12) !important;
  color: #99f6e4 !important;
}

.qg-community-formula {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
}

.qg-community-formula span {
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(45, 212, 191, 0.08);
  color: #99f6e4;
  font-size: 0.7rem;
  font-weight: 800;
}

.qg-community-formula i {
  color: #64748b;
  font-size: 0.65rem;
}

.qg-shogi-site--community .cmsqa-card,
.qg-shogi-site--community .cmsqa-filter-wrap,
.qg-shogi-site--community .cmsc-card {
  border-color: rgba(148,163,184,0.2) !important;
  background: rgba(8,11,18,0.52) !important;
  color: #e5edf7 !important;
}

.qg-shogi-site--community .cmsqa-ql-row {
  border-color: rgba(148,163,184,0.16) !important;
  color: #e5edf7 !important;
}

.qg-shogi-site--community .cmsqa-ql-row:hover {
  background: rgba(250,204,21,0.08) !important;
}

.qg-shogi-site--community .cmsqa-ql-title {
  color: #fde68a !important;
}

.qg-shogi-site--community .cmsqa-ql-meta,
.qg-shogi-site--community .cmsqa-filter-sort,
.qg-shogi-site--community .cmsc-chat-entry-body p {
  color: #aebbd0 !important;
}

.qg-shogi-site--community .cmsqa-ql-stat,
.qg-shogi-site--community .cmsqa-filter-tab {
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(15,23,42,0.72) !important;
  color: #cbd5e1 !important;
}

.qg-shogi-site--community .cmsqa-filter-active {
  border-color: rgba(250,204,21,0.52);
  background: rgba(250,204,21,0.16) !important;
  color: #fde68a !important;
}

.qg-shogi-site--community .cmsc-chat-log {
  max-height: min(62vh, 620px);
}

/* The shared Community template also serves the eleven non-shogi sites. */
.qg-board-game-site--community .cmsqa-card,
.qg-board-game-site--community .cmsqa-filter-wrap,
.qg-board-game-site--community .cmsc-card,
.qg-board-game-site--community .cmsc-panel {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(8, 17, 31, .9) !important;
  color: #e5edf7 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .24);
}

.qg-board-game-site--community .cmsqa-head {
  border-bottom-color: rgba(148, 163, 184, .18) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .94)) !important;
  color: #f8fafc !important;
}

.qg-board-game-site--community .cmsqa-head a.more,
.qg-board-game-site--community .cmsqa-empty a,
.qg-board-game-site--community .cmsqa-ql-title {
  color: #67e8f9 !important;
}

.qg-board-game-site--community .cmsqa-empty,
.qg-board-game-site--community .cmsqa-ql-meta,
.qg-board-game-site--community .cmsqa-filter-sort,
.qg-board-game-site--community .cmsc-chat-entry-body p,
.qg-board-game-site--community .cmsc-empty {
  color: #aebbd0 !important;
}

.qg-board-game-site--community .cmsqa-question-list {
  background: transparent !important;
}

.qg-board-game-site--community .cmsqa-ql-row {
  border-color: rgba(148, 163, 184, .16) !important;
  background: transparent !important;
  color: #e5edf7 !important;
}

.qg-board-game-site--community .cmsqa-ql-row:hover {
  background: rgba(34, 211, 238, .08) !important;
}

.qg-board-game-site--community .cmsqa-ql-stat,
.qg-board-game-site--community .cmsqa-filter-tab {
  border: 1px solid rgba(148, 163, 184, .2) !important;
  background: rgba(15, 23, 42, .78) !important;
  color: #cbd5e1 !important;
}

.qg-board-game-site--community .cmsqa-filter-active {
  border-color: rgba(34, 211, 238, .54) !important;
  background: rgba(34, 211, 238, .15) !important;
  color: #cffafe !important;
}

.qg-board-game-site--community .cmsc-chat-log {
  max-height: min(62vh, 620px);
}

.qg-match-board .qg-shogi-cell.qg-is-lastmove::before {
  border-color: rgba(250,204,21,0.82);
  box-shadow: inset 0 0 0 1px rgba(250,204,21,0.2);
  animation: qg-lastmove-glow 1.2s ease-out 1;
}

.qg-match-board .qg-shogi-cell.qg-is-check {
  animation: qg-check-pulse 1.2s ease-in-out infinite;
}

.qg-match-board .qg-shogi-hand-piece.qg-is-selected {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(20,184,166,0.2);
}

.qg-vs-cutin {
  background:
    radial-gradient(circle at 50% 45%, rgba(250,204,21,0.18), transparent 28%),
    rgba(8,11,18,0.8);
}

.qg-vs-cutin > div {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.96), rgba(45,31,13,0.94)),
    #111827;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.42),
    0 0 0 1px rgba(250,204,21,0.18);
}

.qg-vs-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
}

.qg-vs-players > b {
  align-self: center;
  color: #fde68a;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.qg-vs-player {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  background: rgba(7,11,18,0.42);
  text-align: left;
}

.qg-vs-player > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #07111f;
  font-size: 1rem;
  font-weight: 900;
}

.qg-vs-player strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f8fafc;
  font-size: 0.98rem;
}

.qg-vs-player small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: 0.72rem;
}

.qg-vs-player em {
  grid-column: 1 / -1;
  width: fit-content;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 999px;
  padding: 2px 8px;
  color: #cbd5e1;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 900;
}

.qg-vs-player.is-bot em {
  border-color: rgba(250,204,21,0.42);
  color: #fde68a;
}

.qg-vs-player.is-guest em {
  border-color: rgba(94,234,212,0.36);
  color: #99f6e4;
}

@keyframes qg-board-feedback-pop {
  from { transform: translateX(-50%) translateY(4px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes qg-destination-pulse {
  0% { transform: scale(0.8); opacity: 0.78; }
  70% { transform: scale(1.15); opacity: 0.26; }
  100% { transform: scale(1.2); opacity: 0.18; }
}

@keyframes qg-lastmove-glow {
  from { box-shadow: inset 0 0 0 1px rgba(250,204,21,0.2), 0 0 0 rgba(250,204,21,0); }
  50% { box-shadow: inset 0 0 0 1px rgba(250,204,21,0.28), 0 0 18px rgba(250,204,21,0.42); }
  to { box-shadow: inset 0 0 0 1px rgba(250,204,21,0.2), 0 0 0 rgba(250,204,21,0); }
}

@keyframes qg-check-pulse {
  0%, 100% { box-shadow: inset 0 0 0 3px #dc2626; }
  50% { box-shadow: inset 0 0 0 3px #dc2626, 0 0 16px rgba(248,113,113,0.46); }
}

@keyframes qg-live-stat-glow {
  0% { transform: translateY(0); box-shadow: 0 0 0 rgba(250,204,21,0); }
  38% { transform: translateY(-1px); box-shadow: 0 0 18px rgba(250,204,21,0.26); }
  100% { transform: translateY(0); box-shadow: 0 0 0 rgba(250,204,21,0); }
}

@keyframes qg-training-card-success {
  0% { box-shadow: 0 0 0 rgba(20,184,166,0); }
  45% { box-shadow: 0 0 24px rgba(20,184,166,0.34); }
  100% { box-shadow: 0 0 0 rgba(20,184,166,0); }
}

@keyframes qg-training-check-pop {
  from { transform: scale(0.78); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes qg-answer-feedback-float {
  0% { transform: translateX(-50%) translateY(10px) scale(0.9); opacity: 0; }
  18% { transform: translateX(-50%) translateY(0) scale(1.04); opacity: 1; }
  72% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-8px) scale(0.98); opacity: 0; }
}

@keyframes qg-answer-mark-pop {
  0% { transform: scale(0.62) rotate(-10deg); opacity: 0; }
  62% { transform: scale(1.16) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes qg-answer-feedback-spark {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--qg-fx-x)), calc(-50% + var(--qg-fx-y))) scale(1) rotate(120deg);
    opacity: 0;
  }
}

@keyframes qg-answer-host-shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-3px); }
  46% { transform: translateX(3px); }
  68% { transform: translateX(-2px); }
}

@keyframes qg-success-burst {
  0% { transform: translateY(8px) scale(0.72); opacity: 0; }
  22% { transform: translateY(0) scale(1.08); opacity: 1; }
  72% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-5px) scale(0.98); opacity: 0; }
}

@keyframes qg-success-spark {
  0% { translate: 0 0; scale: 0.45; opacity: 0; }
  22% { opacity: 1; }
  100% { translate: var(--qg-spark-x) var(--qg-spark-y); scale: 1; opacity: 0; }
}

@keyframes qg-practice-board-success {
  0% { box-shadow: 0 0 0 rgba(20,184,166,0); }
  38% { box-shadow: 0 0 0 3px rgba(250,204,21,0.34), 0 0 34px rgba(20,184,166,0.42); }
  100% { box-shadow: 0 0 0 rgba(20,184,166,0); }
}

@keyframes qg-practice-board-error {
  0%, 100% { transform: translateX(0); box-shadow: 0 0 0 rgba(245,158,11,0); }
  22% { transform: translateX(-4px); box-shadow: 0 0 20px rgba(245,158,11,0.2); }
  48% { transform: translateX(4px); }
  72% { transform: translateX(-2px); }
}

@keyframes qg-practice-feedback-in {
  from { transform: translateY(-5px) scale(0.985); opacity: 0.45; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes qg-answer-piece-land {
  0% { transform: translateY(-12px) scale(0.72); opacity: 0; }
  65% { transform: translateY(2px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes qg-next-ready {
  0% { transform: translateX(0); }
  45% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

@media (max-width: 900px) {
  .qg-community-command {
    grid-template-columns: 1fr;
  }
  .qg-community-theme-card {
    grid-template-columns: 1fr;
  }
  .qg-community-layout {
    grid-template-columns: 1fr;
  }
  .qg-community-chat-drawer {
    position: static;
  }
  .qg-research-review-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .qg-research-review-row > strong,
  .qg-research-review-row > em {
    grid-column: 2;
  }
  .qg-board-idle-callout {
    grid-template-columns: 1fr;
  }
  .qg-entry-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .qg-shogi-hero-route {
    min-height: 88px;
  }
  .qg-training-filter-status {
    justify-self: start;
  }
  .qg-watch-insight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .qg-community-hub {
    gap: 14px;
  }
  .qg-community-command {
    gap: 16px;
    border-radius: 17px;
    padding: 16px;
  }
  .qg-community-command h2 {
    font-size: 1.36rem;
  }
  .qg-community-command p {
    font-size: 0.82rem;
  }
  .qg-community-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qg-community-action {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 94px;
    padding: 9px 5px;
    text-align: center;
  }
  .qg-community-action > i {
    width: 34px;
    height: 34px;
  }
  .qg-community-action strong {
    font-size: 0.72rem;
  }
  .qg-community-action small {
    display: none;
  }
  .qg-community-purpose-nav {
    top: 56px;
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 13px;
    scrollbar-width: none;
  }
  .qg-community-purpose-nav::-webkit-scrollbar {
    display: none;
  }
  .qg-community-purpose-nav a {
    flex: 0 0 auto;
    padding: 0 11px;
    white-space: nowrap;
  }
  .qg-community-theme-card {
    gap: 16px;
    border-radius: 17px;
    padding: 17px;
  }
  .qg-community-theme-card h2 {
    font-size: 1.48rem;
  }
  .qg-community-theme-card p {
    font-size: 0.82rem;
  }
  .qg-community-viewpoints {
    grid-template-columns: 1fr;
  }
  .qg-community-theme-actions,
  .qg-community-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .qg-community-theme-actions a,
  .qg-community-section-head > a {
    width: 100%;
  }
  .qg-community-chat-drawer {
    position: static;
  }
  .qg-community-match-section {
    border-radius: 17px;
    padding: 15px;
  }
  .qg-entry-stats {
    grid-template-columns: 1fr;
  }
  .qg-shogi-live-strip {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .qg-shogi-hero-route {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .qg-shogi-hero-route .qg-shogi-hero-route-arrow {
    display: none !important;
  }
  .qg-shogi-site .qg-shogi-rule-row {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: auto;
  }
  .qg-shogi-site .qg-shogi-rule-row span {
    width: 46px;
    height: 52px;
  }
  .qg-shogi-problem.is-active::before {
    position: static;
    width: fit-content;
    order: -1;
  }
  .qg-training-progress,
  .qg-practice-progress {
    grid-template-columns: 1fr;
  }
  .qg-success-burst {
    top: 88px;
    right: 16px;
    min-width: 100px;
    height: 44px;
    padding: 0 12px;
  }
  .qg-watch-insight {
    grid-template-columns: 1fr;
  }
  .qg-learning-quest-head,
  .qg-shogi-learning-quests li {
    grid-template-columns: 1fr;
  }
  .qg-vs-players {
    grid-template-columns: 1fr;
  }
  .qg-vs-players > b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qg-match-board .qg-shogi-board.qg-board-hint::after,
  .qg-match-board .qg-shogi-board.qg-board-waiting::after,
  .qg-match-board .qg-shogi-cell.qg-is-destination::after,
  .qg-match-board .qg-shogi-cell.qg-is-lastmove::before,
  .qg-match-board .qg-shogi-cell.qg-is-check,
  .qg-vs-cutin > div,
  .qg-entry-stats span.is-updated,
  .qg-shogi-live-strip span.is-updated,
  .qg-training-progress i,
  .qg-practice-progress i,
  .qg-shogi-problem.is-celebrating,
  .qg-shogi-problem.is-celebrating::after,
  .qg-shogi-learning-quests.is-celebrating,
  .qg-success-burst.is-active,
  .qg-answer-feedback,
  .qg-answer-feedback-mark,
  .qg-answer-feedback-spark,
  .qg-answer-feedback-host.is-answer-wrong,
  .qg-match-board .qg-shogi-board.qg-practice-success,
  .qg-match-board .qg-shogi-board.qg-practice-error,
  .qg-practice-help.is-feedback-active,
  .qg-match-board .qg-shogi-cell.qg-is-answer-correct .qg-shogi-piece,
  .qg-shogi-step-nav .qg-primary-action.is-ready,
  .qg-success-burst.is-active > b {
    animation: none;
    transition: none;
  }
}

/* QuickGamesArena portal UI/UX refresh */
.qg-discovery-shell {
  gap: 28px;
}

.qg-discovery-hero {
  border: 1px solid rgba(20, 184, 166, 0.22);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(12, 90, 96, 0.92) 54%, rgba(112, 67, 32, 0.9) 100%);
  color: #f8fafc;
}

.qg-discovery-hero .qg-kicker,
.qg-discovery-hero p,
.qg-discovery-hero .qg-guest-note {
  color: #dbeafe;
}

.qg-portal-actions {
  align-items: center;
}

.qg-coming-soon-showcase {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.qg-game-tile-visual.is-planned {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  filter: grayscale(0.18);
}

.qg-game-tile-visual.is-planned::after {
  content: "近日公開";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 800;
}

.qg-game-tile-visual .qg-game-icon {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  opacity: 0.82;
}

.qg-genre-hub-v2 {
  display: grid;
  gap: 18px;
  border-color: rgba(132, 204, 22, 0.2);
  background:
    radial-gradient(circle at top left, rgba(132, 204, 22, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.98), rgba(20, 83, 45, 0.86) 58%, rgba(71, 52, 33, 0.72));
}

.qg-genre-hub-v2::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.8), rgba(132, 204, 22, 0.72), rgba(20, 184, 166, 0.72));
}

.qg-genre-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(132, 204, 22, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.72), rgba(31, 41, 55, 0.68)),
    repeating-linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0 1px, transparent 1px 18px);
}

.qg-genre-hero strong,
.qg-genre-hero h1 {
  display: block;
  margin: 0 0 5px;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 900;
}

.qg-genre-hero p {
  margin: 0 0 10px;
  color: #dbeafe;
}

.qg-genre-live-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.qg-genre-live-strip span,
.qg-genre-widget,
.qg-genre-subcategory {
  border: 1px solid rgba(132, 204, 22, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
}

.qg-genre-live-strip span {
  display: grid;
  gap: 2px;
  min-height: 72px;
  place-items: center;
  padding: 12px;
}

.qg-genre-live-strip strong {
  color: #bef264;
  font-size: 1.35rem;
}

.qg-genre-live-strip small {
  color: #cbd5e1;
  font-weight: 700;
}

.qg-genre-link-row a {
  min-height: 42px;
}

.qg-genre-subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.qg-genre-subcategory {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.qg-genre-subcategory header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qg-genre-subcategory h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1rem;
}

.qg-genre-subcategory p {
  margin: 2px 0 0;
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 700;
}

.cmsgame-grid-compact {
  grid-template-columns: 1fr;
}

.cmsgame-grid-compact .cmsgame-tile {
  min-height: 112px;
}

.cmsgame-grid-compact .cmsgame-tile-cover {
  min-height: 72px;
}

.qg-genre-widgets {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.9fr;
  gap: 14px;
}

.qg-genre-widget {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.qg-genre-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qg-genre-widget-head h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1rem;
}

.qg-genre-widget-head a,
.qg-genre-widget-head span {
  color: #bef264;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.qg-genre-rank-list,
.qg-genre-event-list,
.qg-genre-planned-list {
  display: grid;
  gap: 8px;
}

.qg-genre-rank-row,
.qg-genre-event-row,
.qg-genre-planned-row {
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #e2e8f0;
  text-decoration: none;
}

.qg-genre-rank-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

.qg-genre-rank-row span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 900;
}

.qg-genre-rank-row strong,
.qg-genre-event-row strong,
.qg-genre-planned-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-genre-rank-row small,
.qg-genre-event-row small {
  color: #cbd5e1;
  font-weight: 700;
}

.qg-genre-planned-row {
  grid-template-columns: 38px minmax(0, 1fr);
}

.qg-genre-planned-row span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
}

.qg-quickmatch-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.qg-quickmatch-tile {
  display: grid;
  gap: 5px;
  min-height: 98px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(250, 204, 21, 0.32);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  text-decoration: none;
}

.qg-quickmatch-tile:hover {
  border-color: rgba(250, 204, 21, 0.72);
  transform: translateY(-1px);
}

.qg-quickmatch-tile span {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.qg-quickmatch-tile strong {
  color: #e2e8f0;
  font-size: 0.8rem;
}

.qg-quickmatch-tile em {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: #facc15;
  color: #422006;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.qg-shogi-hero-routes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qg-shogi-hero-route {
  min-height: 132px;
}

.qg-shogi-play-shell .qg-breadcrumb {
  display: none;
}

.qg-shogi-play-shell .qg-play-focus-hero {
  grid-template-columns: 54px minmax(0, 1fr);
  margin-bottom: 14px;
  padding: 12px 14px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

.qg-shogi-play-shell .qg-play-focus-hero .qg-detail-icon {
  width: 54px;
  height: 54px;
  font-size: 1.35rem;
}

.qg-shogi-play-shell .qg-play-focus-hero h1 {
  margin-bottom: 4px;
  font-size: 1.45rem;
}

.qg-shogi-play-shell .qg-play-focus-hero p {
  max-width: 720px;
  margin-bottom: 8px;
}

.qg-shogi-play-shell .qg-play-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
}

.qg-shogi-play-shell .qg-play-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "board"
    "options"
    "start"
    "user"
    "flow";
}

.qg-shogi-play-shell .qg-play-panel > .qg-panel-head {
  border-radius: 8px 8px 0 0;
}

.qg-shogi-play-shell .qg-match-board {
  min-height: 680px;
}

.qg-shogi-play-shell .qg-start-pane {
  grid-template-columns: minmax(0, 1fr) auto;
}

.qg-shogi-play-shell .qg-start-pane-actions .qg-primary-action,
.qg-shogi-play-shell .qg-start-pane-actions .qg-action-btn {
  min-height: 42px;
}

.qg-shogi-play-shell .qg-play-side {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow: auto;
  scrollbar-width: thin;
}

.qg-shogi-play-shell .qg-play-side > .qg-panel {
  min-width: 0;
}

.qg-shogi-play-shell .qg-mobile-side-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
}

.qg-shogi-play-shell .qg-game-info-collapsed,
.qg-shogi-play-shell .qg-growth-steps,
.qg-shogi-play-shell .qg-related {
  display: none !important;
}

@media (max-width: 1080px) {
  .qg-genre-subcategory-grid,
  .qg-genre-widgets,
  .qg-shogi-play-shell .qg-play-grid {
    grid-template-columns: 1fr;
  }

  .qg-shogi-play-shell .qg-play-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .qg-genre-hero,
  .qg-genre-live-strip,
  .qg-quickmatch-tiles,
  .qg-shogi-hero-routes,
  .qg-shogi-play-shell .qg-start-pane {
    grid-template-columns: 1fr;
  }

  .qg-genre-rank-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .qg-genre-rank-row small {
    grid-column: 2;
  }

  .qg-shogi-play-shell .qg-match-board {
    min-height: 560px;
  }
}

/* QuickGamesArena v2 UI refinements */
.qg-coming-soon-carousel {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.qg-coming-soon-carousel:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.32);
  outline-offset: 4px;
}

.qg-coming-soon-card {
  display: grid;
  flex: 0 0 clamp(148px, 18vw, 210px);
  grid-template-rows: 104px auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.qg-coming-soon-card:hover,
.qg-coming-soon-card:focus-visible {
  border-color: rgba(13, 148, 136, 0.38);
  transform: translateY(-1px);
}

.qg-coming-soon-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--qg-card-cover-color, #0f172a);
  color: #ffffff;
  font-size: 2rem;
  isolation: isolate;
}

.qg-coming-soon-card.has-title-banner .qg-coming-soon-cover {
  background-image:
    linear-gradient(180deg, rgba(7,10,18,0.08), rgba(7,10,18,0.68)),
    var(--qg-card-banner);
  background-position: var(--qg-card-position, 50% 50%);
  background-size: cover;
}

.qg-coming-soon-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.46));
  z-index: -1;
}

.qg-coming-soon-cover em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.qg-coming-soon-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}

.qg-coming-soon-copy strong,
.qg-coming-soon-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-coming-soon-copy strong {
  font-size: 0.94rem;
}

.qg-coming-soon-copy small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.qg-board-game-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qg-board-game-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: #0f172a;
  text-decoration: none;
}

.qg-board-game-card.is-playable {
  grid-column: 1 / -1;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 150px;
  border-color: rgba(13, 148, 136, 0.34);
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.92), rgba(15, 23, 42, 0.92)),
    #0f766e;
  color: #ffffff;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.18);
}

.qg-board-game-card.is-coming-soon {
  min-height: 92px;
  background: #f8fafc;
  filter: grayscale(0.28);
  opacity: 0.7;
}

.qg-board-game-card:hover,
.qg-board-game-card:focus-visible {
  border-color: rgba(13, 148, 136, 0.44);
  opacity: 1;
  transform: translateY(-1px);
}

.qg-board-card-cover {
  position: relative;
  display: grid;
  min-height: 72px;
  place-items: center;
  background: var(--qg-card-cover-color, #0f172a);
  color: #ffffff;
  font-size: 1.55rem;
  overflow: hidden;
  isolation: isolate;
}

.qg-board-game-card.has-title-banner .qg-board-card-cover {
  background-image:
    linear-gradient(180deg, rgba(7,10,18,0.08), rgba(7,10,18,0.62)),
    var(--qg-card-banner);
  background-position: var(--qg-card-position, 50% 50%);
  background-size: cover;
}

.qg-board-game-card.has-title-banner .qg-board-card-cover i,
.qg-coming-soon-card.has-title-banner .qg-coming-soon-cover i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(248,250,252,0.3);
  border-radius: 8px;
  background: rgba(7,10,18,0.42);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  backdrop-filter: blur(3px);
}

.qg-board-game-card.is-playable .qg-board-card-cover {
  min-height: 100%;
  background-color: rgba(255, 255, 255, 0.16);
  font-size: 2.25rem;
}

.qg-board-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: center;
  padding: 10px;
}

.qg-board-card-status {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.qg-board-game-card.is-playable .qg-board-card-status {
  background: rgba(250, 204, 21, 0.92);
  color: #422006;
}

.qg-board-card-body strong,
.qg-board-card-body small,
.qg-board-card-body em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-board-card-body strong {
  font-size: 0.98rem;
}

.qg-board-game-card.is-playable .qg-board-card-body strong {
  font-size: 1.28rem;
}

.qg-board-card-body small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.qg-board-game-card.is-playable .qg-board-card-body small {
  color: #ccfbf1;
}

.qg-board-card-body em {
  justify-self: start;
  margin-top: 4px;
  color: #0f766e;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.qg-board-game-card.is-playable .qg-board-card-body em {
  padding: 5px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
}

.qg-live-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.qg-live-dashboard-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: #ffffff;
}

.qg-live-dashboard-list {
  display: grid;
  gap: 8px;
}

.qg-live-dashboard-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  text-decoration: none;
}

.qg-live-dashboard-row:hover,
.qg-live-dashboard-row:focus-visible {
  border-color: rgba(13, 148, 136, 0.36);
  background: #ecfeff;
}

.qg-live-dashboard-row strong {
  color: #0f766e;
  font-size: 0.82rem;
}

.qg-live-dashboard-row span,
.qg-live-dashboard-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-play-side .qg-panel-head h2,
.qg-play-side .qg-panel-head .qg-text-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.qg-play-side .qg-panel-head .qg-panel-note {
  min-width: 0;
  margin-left: auto;
}

.qg-live-dashboard-row span {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
}

.qg-live-dashboard-row em {
  color: #0f766e;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.qg-shogi-play-shell .qg-play-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.qg-shogi-play-shell .qg-play-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "start"
    "flow"
    "board"
    "options"
    "user";
  gap: 10px;
}

.qg-shogi-play-shell .qg-match-board {
  min-height: min(78vh, 860px);
}

.qg-shogi-play-shell .qg-match-board .qg-shogi-board {
  max-width: min(72vh, 680px, 100%);
}

.qg-shogi-play-shell .qg-start-router,
.qg-shogi-play-shell .qg-match-options,
.qg-shogi-play-shell .qg-current-user,
.qg-shogi-play-shell .qg-flow-panel {
  max-width: 1120px;
}

.qg-shogi-play-shell .qg-start-pane {
  grid-template-columns: minmax(0, 1fr) auto;
}

.qg-shogi-play-shell .qg-play-side {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  position: static;
  max-height: none;
  overflow: visible;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(8, 11, 18, 0.38);
}

.qg-shogi-play-shell .qg-mobile-side-tabs {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  position: static;
  overflow-x: auto;
  scrollbar-width: none;
}

.qg-shogi-play-shell .qg-mobile-side-tabs a {
  flex: 0 0 auto;
}

.qg-shogi-play-shell .qg-play-side > .qg-panel {
  min-width: 0;
  max-height: 238px;
  overflow: auto;
  scrollbar-width: thin;
}

@media (max-width: 1120px) {
  .qg-live-dashboard,
  .qg-shogi-play-shell .qg-play-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .qg-coming-soon-card {
    flex-basis: 154px;
  }

  .qg-board-game-shelf,
  .qg-live-dashboard,
  .qg-shogi-play-shell .qg-play-side {
    grid-template-columns: 1fr;
  }

  .qg-board-game-card.is-playable {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 126px;
  }

  .qg-live-dashboard-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .qg-live-dashboard-row em {
    grid-column: 2;
  }

  .qg-shogi-play-shell .qg-match-board {
    min-height: 560px;
  }
}

/* QuickGamesArena premium visual system */
body.theme-game-theme {
  --qga-font-sans: "Inter", "Roboto", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --qga-premium-bg: #070a12;
  --qga-premium-panel: rgba(15, 23, 42, 0.84);
  --qga-premium-panel-strong: rgba(20, 30, 48, 0.94);
  --qga-premium-card: rgba(15, 23, 42, 0.72);
  --qga-premium-card-hover: rgba(22, 34, 55, 0.92);
  --qga-premium-border: rgba(148, 163, 184, 0.22);
  --qga-premium-border-strong: rgba(125, 211, 252, 0.36);
  --qga-premium-text: #e5edf7;
  --qga-premium-muted: #a7b4c8;
  --qga-premium-soft: rgba(34, 211, 238, 0.12);
  --qga-premium-blue: #60a5fa;
  --qga-premium-cyan: #22d3ee;
  --qga-premium-teal: #2dd4bf;
  --qga-premium-violet: #a78bfa;
  --qga-premium-amber: #fbbf24;
  --qga-premium-rose: #fb7185;
  --qga-card-radius: 8px;
  --qga-control-radius: 8px;
  --qga-shadow-card: 0 18px 46px rgba(0, 0, 0, 0.28);
  --qga-shadow-hover: 0 24px 58px rgba(0, 0, 0, 0.36);
  --qga-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.34);
  --qga-motion-fast: 160ms ease;
  --qga-motion-base: 220ms ease;
}

body.theme-game-theme .qg-shell,
body.theme-game-theme .qg-detail,
body.theme-game-theme [data-qg-style-scope] {
  color: var(--qga-premium-text);
  font-family: var(--qga-font-sans);
}

body.theme-game-theme .qg-shell,
body.theme-game-theme .qg-detail {
  gap: 22px;
}

body.theme-game-theme .qg-masthead,
body.theme-game-theme .qg-detail-hero,
body.theme-game-theme .qg-shogi-site-hero {
  border: 1px solid var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  background:
    linear-gradient(135deg, rgba(12, 35, 52, 0.96), rgba(15, 23, 42, 0.96) 58%, rgba(61, 38, 13, 0.9));
  color: var(--qga-premium-text);
  box-shadow: var(--qga-shadow-card);
}

body.theme-game-theme .qg-masthead h1,
body.theme-game-theme .qg-detail-hero h1,
body.theme-game-theme .qg-shogi-site-hero h1 {
  color: #f8fafc;
  font-weight: 900;
  letter-spacing: 0;
}

body.theme-game-theme .qg-masthead p,
body.theme-game-theme .qg-detail-hero p,
body.theme-game-theme .qg-shogi-site-hero p,
body.theme-game-theme .qg-arena-head p {
  color: #c7d2e5;
  font-style: normal;
}

body.theme-game-theme .qg-kicker,
body.theme-game-theme .qg-arena-label {
  color: var(--qga-premium-cyan);
  letter-spacing: 0;
}

body.theme-game-theme .qg-panel,
body.theme-game-theme .qg-arena,
body.theme-game-theme .qg-genre-hub,
body.theme-game-theme .qg-genre-hero,
body.theme-game-theme .qg-genre-subcategory,
body.theme-game-theme .qg-genre-widget,
body.theme-game-theme .qg-live-dashboard-panel,
body.theme-game-theme .qg-play-panel,
body.theme-game-theme .qg-play-side,
body.theme-game-theme .qg-game-surface {
  border-color: var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  background: var(--qga-premium-panel);
  color: var(--qga-premium-text);
  box-shadow: var(--qga-shadow-card);
  backdrop-filter: blur(14px);
}

body.theme-game-theme .qg-arena-head,
body.theme-game-theme .qg-panel-head,
body.theme-game-theme .qg-catalog-search,
body.theme-game-theme .qg-entry-section-head,
body.theme-game-theme .cmsgame-head {
  border-color: var(--qga-premium-border);
  background: var(--qga-premium-panel-strong);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-genre-hub {
  gap: 0;
  overflow: hidden;
}

body.theme-game-theme .qg-genre-hero {
  margin: 14px;
  background:
    radial-gradient(circle at 8% 12%, rgba(45, 212, 191, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(31, 41, 55, 0.82));
}

body.theme-game-theme .qg-genre-hero strong,
body.theme-game-theme .qg-genre-hero h1,
body.theme-game-theme .qg-genre-hero p {
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-genre-hero p {
  color: var(--qga-premium-muted);
}

@media (max-width: 640px) {
  body.theme-game-theme .qg-genre-hub .cmsgame-head {
    min-height: 44px;
    padding: 9px 12px;
  }

  body.theme-game-theme .qg-genre-hero {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    margin: 10px;
    padding: 12px;
  }

  body.theme-game-theme .qg-genre-hero .cmsgame-icon {
    width: 48px;
    height: 48px;
  }

  body.theme-game-theme .qg-genre-hero h1 {
    font-size: 1.08rem;
  }

  body.theme-game-theme .qg-genre-hero p {
    display: -webkit-box;
    margin-bottom: 6px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  body.theme-game-theme .qg-genre-hero .cmsgame-tags {
    gap: 4px;
  }

  body.theme-game-theme .qg-genre-hero .cmsgame-tags span {
    padding: 3px 7px;
    font-size: 0.67rem;
  }

  body.theme-game-theme .qg-genre-live-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
  }

  body.theme-game-theme .qg-genre-live-strip span {
    min-height: 54px;
    padding: 6px;
  }

  body.theme-game-theme .qg-genre-live-strip strong {
    font-size: 1rem;
  }

  body.theme-game-theme .qg-genre-live-strip small {
    font-size: 0.68rem;
  }

  body.theme-game-theme .qg-genre-link-row {
    display: none;
  }
}

body.theme-game-theme .cmsgame-tags span {
  border: 1px solid var(--qga-premium-border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-genre-link-row {
  padding: 0 14px 14px;
}

body.theme-game-theme .qg-genre-link-row a {
  border: 1px solid var(--qga-premium-border);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: var(--qga-premium-cyan);
}

body.theme-game-theme .qg-genre-link-row a:hover,
body.theme-game-theme .qg-genre-link-row a:focus-visible {
  border-color: var(--qga-premium-cyan);
  background: rgba(34, 211, 238, 0.2);
  color: #f8fafc;
  text-decoration: none;
}

body.theme-game-theme .qg-arena-head h2,
body.theme-game-theme .qg-panel-head h2,
body.theme-game-theme .qg-game-surface-head h3,
body.theme-game-theme .qg-entry-section-head h3,
body.theme-game-theme .qg-genre-widget-head h3,
body.theme-game-theme .qg-genre-subcategory h3,
body.theme-game-theme .cmsgame-head span {
  color: #f8fafc;
  font-weight: 900;
}

body.theme-game-theme .cmsgame-share-action {
  border-color: rgba(94, 234, 212, .3);
  background: rgba(20, 184, 166, .12);
  color: #99f6e4;
}

body.theme-game-theme .cmsgame-share-action:hover,
body.theme-game-theme .cmsgame-share-action:focus-visible {
  border-color: #5eead4;
  background: rgba(20, 184, 166, .22);
  color: #f8fafc;
}

@media (max-width: 520px) {
  .cmsgame-head { align-items: flex-start; gap: 8px; }
  .cmsgame-head-actions { flex-wrap: wrap; gap: 6px; }
  .cmsgame-share-action { min-height: 32px; padding-inline: 9px; }
  .cmsgame-head a.more { white-space: nowrap; }
}

body.theme-game-theme .qg-panel-note,
body.theme-game-theme .qg-game-main small,
body.theme-game-theme .qg-event-card small,
body.theme-game-theme .qg-category-row small,
body.theme-game-theme .qg-live-dashboard-row span,
body.theme-game-theme .qg-board-card-body small,
body.theme-game-theme .qg-coming-soon-copy small,
body.theme-game-theme .qg-genre-subcategory p,
body.theme-game-theme .qg-mypage-muted,
body.theme-game-theme .qg-hub-link-list .qg-list-row small {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-catalog-search input,
body.theme-game-theme .qg-catalog-search select,
body.theme-game-theme .qg-catalog-search button,
body.theme-game-theme .qg-filter-clear,
body.theme-game-theme .qg-native-time-select,
body.theme-game-theme .qg-time-control-segments button,
body.theme-game-theme .qg-assist-toggle,
body.theme-game-theme .qg-more-actions summary,
body.theme-game-theme .qg-review-controls button {
  border-color: var(--qga-premium-border);
  border-radius: var(--qga-control-radius);
  background: rgba(8, 13, 26, 0.78);
  color: var(--qga-premium-text);
}

body.theme-game-theme .cmsgame-catalog-search,
body.theme-game-theme .cmsgame-event-panel {
  border-color: var(--qga-premium-border);
  background: var(--qga-premium-panel);
  color: var(--qga-premium-text);
}

body.theme-game-theme .cmsgame-catalog-search input,
body.theme-game-theme .cmsgame-catalog-search select,
body.theme-game-theme .qg-filter-static {
  border-color: var(--qga-premium-border);
  background: rgba(8, 13, 26, 0.78);
  color: var(--qga-premium-text);
}

body.theme-game-theme .cmsgame-catalog-search button {
  border-color: transparent;
  background: var(--qga-premium-teal);
  color: #07111f;
  font-weight: 900;
}

body.theme-game-theme .cmsgame-mini-list a,
body.theme-game-theme .cmsgame-rank-list li {
  border-color: var(--qga-premium-border);
  background: rgba(8, 13, 26, 0.62);
  color: var(--qga-premium-text);
}

body.theme-game-theme .cmsgame-mini-list a:hover,
body.theme-game-theme .cmsgame-rank-list li:hover {
  background: rgba(15, 23, 42, 0.92);
}

body.theme-game-theme .cmsgame-mini-list strong,
body.theme-game-theme .cmsgame-rank-name {
  color: var(--qga-premium-text);
}

body.theme-game-theme .cmsgame-mini-list span {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .cmsgame-rank-1 {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.16), rgba(8, 13, 26, 0.62));
}

body.theme-game-theme .cmsgame-rank-2 {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(8, 13, 26, 0.62));
}

body.theme-game-theme .cmsgame-rank-3 {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.16), rgba(8, 13, 26, 0.62));
}

body.theme-game-theme .qg-catalog-search input:focus,
body.theme-game-theme .qg-catalog-search select:focus,
body.theme-game-theme .qg-native-time-select:focus,
body.theme-game-theme .qg-time-control-segments button:focus-visible,
body.theme-game-theme .qg-assist-toggle:focus-visible,
body.theme-game-theme .qg-primary-action:focus-visible,
body.theme-game-theme .qg-action-btn:focus-visible,
body.theme-game-theme .qg-text-btn:focus-visible,
body.theme-game-theme .qg-board-game-card:focus-visible,
body.theme-game-theme .qg-game-tile:focus-visible,
body.theme-game-theme .qg-coming-soon-card:focus-visible,
body.theme-game-theme .qg-shogi-hero-route:focus-visible {
  border-color: var(--qga-premium-cyan);
  box-shadow: var(--qga-focus-ring);
  outline: none;
}

body.theme-game-theme .qg-primary-action,
body.theme-game-theme .qg-action-btn,
body.theme-game-theme .qg-catalog-search button {
  min-height: 48px;
  border: 0;
  border-radius: var(--qga-control-radius);
  background: linear-gradient(135deg, var(--qga-premium-cyan), var(--qga-premium-teal) 54%, var(--qga-premium-amber));
  color: #07111f;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(34, 211, 238, 0.18);
  transition: transform var(--qga-motion-fast), box-shadow var(--qga-motion-fast), filter var(--qga-motion-fast);
}

body.theme-game-theme .qg-action-btn {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.94), rgba(167, 139, 250, 0.9));
  color: #f8fafc;
}

body.theme-game-theme .qg-text-btn,
body.theme-game-theme .qg-filter-clear {
  border: 1px solid var(--qga-premium-border);
  background: rgba(15, 23, 42, 0.74);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-primary-action:hover,
body.theme-game-theme .qg-action-btn:hover,
body.theme-game-theme .qg-catalog-search button:hover,
body.theme-game-theme .qg-text-btn:hover,
body.theme-game-theme .qg-filter-clear:hover {
  color: #f8fafc;
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: var(--qga-shadow-hover);
}

body.theme-game-theme .qg-statbar div,
body.theme-game-theme .qg-entry-stats span,
body.theme-game-theme .qg-genre-live-strip span,
body.theme-game-theme .qg-shogi-live-strip span,
body.theme-game-theme .qg-mini-stats span {
  border-color: var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  background: rgba(8, 13, 26, 0.62);
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-statbar strong,
body.theme-game-theme .qg-entry-stats strong,
body.theme-game-theme .qg-genre-live-strip strong,
body.theme-game-theme .qg-shogi-live-strip strong,
body.theme-game-theme .qg-mini-stats strong {
  color: var(--qga-premium-cyan);
}

body.theme-game-theme .qg-game-tile,
body.theme-game-theme .qg-event-card,
body.theme-game-theme .qg-board-game-card,
body.theme-game-theme .qg-coming-soon-card,
body.theme-game-theme .qg-live-dashboard-row,
body.theme-game-theme .qg-genre-rank-row,
body.theme-game-theme .qg-genre-event-row,
body.theme-game-theme .qg-genre-planned-row,
body.theme-game-theme .qg-shogi-hero-route,
body.theme-game-theme .qg-category-row,
body.theme-game-theme .qg-list-row,
body.theme-game-theme .qg-entry-row,
body.theme-game-theme .qg-mypage-panel,
body.theme-game-theme .qg-mypage-cards > *,
body.theme-game-theme .qg-mypage-summary > * {
  border: 1px solid var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  background: var(--qga-premium-card);
  color: var(--qga-premium-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color var(--qga-motion-fast), transform var(--qga-motion-fast), box-shadow var(--qga-motion-fast), background var(--qga-motion-fast);
}

body.theme-game-theme .qg-game-tile:hover,
body.theme-game-theme .qg-event-card:hover,
body.theme-game-theme .qg-board-game-card:hover,
body.theme-game-theme .qg-coming-soon-card:hover,
body.theme-game-theme .qg-live-dashboard-row:hover,
body.theme-game-theme .qg-genre-rank-row:hover,
body.theme-game-theme .qg-genre-event-row:hover,
body.theme-game-theme .qg-genre-planned-row:hover,
body.theme-game-theme .qg-shogi-hero-route:hover,
body.theme-game-theme .qg-category-row:hover,
body.theme-game-theme .qg-list-row:hover,
body.theme-game-theme .qg-entry-row:hover {
  border-color: var(--qga-premium-border-strong);
  background: var(--qga-premium-card-hover);
  color: var(--qga-premium-text);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--qga-shadow-hover);
}

body.theme-game-theme .qg-game-tile.is-ready,
body.theme-game-theme .qg-board-game-card.is-playable {
  border-color: rgba(45, 212, 191, 0.46);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(37, 99, 235, 0.82) 58%, rgba(15, 23, 42, 0.92));
  color: #f8fafc;
}

body.theme-game-theme .qg-game-tile.is-planned,
body.theme-game-theme .qg-board-game-card.is-coming-soon,
body.theme-game-theme .qg-coming-soon-card.is-planned {
  opacity: 0.74;
  filter: grayscale(0.25) saturate(0.78);
}

body.theme-game-theme .qg-game-tile.is-planned:hover,
body.theme-game-theme .qg-board-game-card.is-coming-soon:hover,
body.theme-game-theme .qg-coming-soon-card.is-planned:hover {
  opacity: 0.94;
  filter: grayscale(0.08) saturate(0.94);
}

body.theme-game-theme .qg-game-icon,
body.theme-game-theme .qg-board-card-cover,
body.theme-game-theme .qg-coming-soon-cover,
body.theme-game-theme .qg-shogi-hero-route-icon,
body.theme-game-theme .qg-category-row span {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.theme-game-theme .qg-coming-soon-carousel {
  gap: 14px;
  padding: 6px 2px 18px;
  scroll-snap-type: x mandatory;
}

body.theme-game-theme .qg-coming-soon-card {
  grid-template-rows: 116px auto;
  flex-basis: clamp(158px, 190px, 220px);
  min-height: 198px;
}

body.theme-game-theme .qg-coming-soon-cover::after {
  background: linear-gradient(180deg, rgba(7, 10, 18, 0.06), rgba(7, 10, 18, 0.7));
}

body.theme-game-theme .qg-coming-soon-cover em,
body.theme-game-theme .qg-board-card-status,
body.theme-game-theme .qg-badges span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.7);
  color: #f8fafc;
}

body.theme-game-theme .qg-board-game-card.is-playable .qg-board-card-status {
  background: rgba(251, 191, 36, 0.94);
  color: #1f1300;
}

body.theme-game-theme .qg-board-game-card.is-playable .qg-board-card-body em {
  background: rgba(248, 250, 252, 0.96);
  color: #0f766e;
}

body.theme-game-theme .qg-quickmatch-tiles {
  gap: 12px;
}

body.theme-game-theme .qg-quickmatch-tile {
  min-height: 116px;
  padding: 18px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: var(--qga-card-radius);
  background:
    linear-gradient(145deg, rgba(14, 165, 233, 0.88), rgba(99, 102, 241, 0.84) 52%, rgba(15, 23, 42, 0.86));
  color: #f8fafc;
  box-shadow: 0 18px 40px rgba(14, 165, 233, 0.2);
}

body.theme-game-theme .qg-quickmatch-tile.is-default {
  border-color: rgba(251, 191, 36, 0.52);
  background:
    linear-gradient(145deg, rgba(45, 212, 191, 0.9), rgba(37, 99, 235, 0.86) 52%, rgba(251, 191, 36, 0.82));
}

body.theme-game-theme .qg-quickmatch-tile:hover,
body.theme-game-theme .qg-quickmatch-tile:focus-visible {
  color: #f8fafc;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 26px 58px rgba(14, 165, 233, 0.28);
}

body.theme-game-theme .qg-quickmatch-tile span,
body.theme-game-theme .qg-quickmatch-tile strong,
body.theme-game-theme .qg-quickmatch-tile em {
  color: inherit;
}

body.theme-game-theme .qg-shogi-hero-routes {
  gap: 12px;
}

body.theme-game-theme .qg-shogi-hero-banner {
  border: 1px solid var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  overflow: hidden;
  box-shadow: var(--qga-shadow-card);
}

body.theme-game-theme .qg-live-dashboard {
  gap: 12px;
}

body.theme-game-theme .qg-live-dashboard-panel {
  min-height: 176px;
}

body.theme-game-theme .qg-empty,
body.theme-game-theme .cmsgame-empty {
  border: 1px dashed var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  background: rgba(8, 13, 26, 0.62);
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-empty strong,
body.theme-game-theme .cmsgame-empty strong {
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-skeleton,
body.theme-game-theme .qg-card-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  border: 1px solid var(--qga-premium-border);
  border-radius: var(--qga-card-radius);
  background: rgba(15, 23, 42, 0.72);
}

body.theme-game-theme .qg-skeleton::after,
body.theme-game-theme .qg-card-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: qga-skeleton-sweep 1.35s ease infinite;
}

@keyframes qga-skeleton-sweep {
  to { transform: translateX(100%); }
}

body.theme-game-theme .qg-shogi-play-shell .qg-play-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.theme-game-theme .qg-shogi-play-shell .qg-play-panel {
  background: rgba(7, 10, 18, 0.82);
}

body.theme-game-theme .qg-shogi-play-shell:not(.qg-mode-lobby):not(.qg-mode-matching) .qg-match-board {
  min-height: min(84vh, 920px);
  border-color: rgba(125, 211, 252, 0.26);
  box-shadow: var(--qga-shadow-lg);
}

body.theme-game-theme .qg-shogi-play-shell .qg-match-board .qg-shogi-area {
  min-height: min(76vh, 820px);
  align-content: center;
}

body.theme-game-theme .qg-shogi-play-shell .qg-match-board .qg-shogi-board {
  max-width: min(76vh, 720px, 100%);
}

body.theme-game-theme .qg-shogi-play-shell .qg-play-side {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  box-shadow: none;
}

body.theme-game-theme .qg-shogi-play-shell .qg-play-side > .qg-panel {
  max-height: 236px;
  overflow: auto;
}

body.theme-game-theme .qg-mobile-side-tabs a {
  border-color: var(--qga-premium-border);
  background: rgba(15, 23, 42, 0.76);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-mobile-side-tabs a:hover,
body.theme-game-theme .qg-mobile-side-tabs a:focus-visible {
  border-color: var(--qga-premium-cyan);
  color: var(--qga-premium-cyan);
}

body.theme-game-theme .qg-mypage,
body.theme-game-theme .qg-public-profile,
body.theme-game-theme .qg-community-layout,
body.theme-game-theme .cmsc-shell,
body.theme-game-theme .cmsqa-question-list {
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-mypage-hero,
body.theme-game-theme .qg-mypage-empty,
body.theme-game-theme .qg-notification-panel,
body.theme-game-theme .cmsc-panel,
body.theme-game-theme .cmsqa-question-list,
body.theme-game-theme .cmsqa-question-card {
  border-color: var(--qga-premium-border);
  background: var(--qga-premium-panel);
  color: var(--qga-premium-text);
  box-shadow: var(--qga-shadow-card);
}

body.theme-game-theme .qg-mypage-tabs button {
  border-color: var(--qga-premium-border);
  background: rgba(15, 23, 42, 0.7);
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-mypage-tabs button.is-active,
body.theme-game-theme .qg-mypage-tabs button:hover {
  border-color: var(--qga-premium-cyan);
  background: var(--qga-premium-soft);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-mypage-panel-head,
body.theme-game-theme .qg-mypage-cards article,
body.theme-game-theme .qg-tactics-grid article,
body.theme-game-theme .qg-account-grid article,
body.theme-game-theme .qg-ladder-grid article,
body.theme-game-theme .qg-mypage-summary-empty {
  border-color: var(--qga-premium-border);
  background: rgba(8, 13, 26, 0.66);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-mypage-panel-head h2,
body.theme-game-theme .qg-mypage-cards strong,
body.theme-game-theme .qg-tactics-grid strong,
body.theme-game-theme .qg-account-grid strong,
body.theme-game-theme .qg-ladder-grid strong,
body.theme-game-theme .qg-mypage-summary-empty strong {
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-mypage-cards span,
body.theme-game-theme .qg-tactics-grid span,
body.theme-game-theme .qg-account-grid span,
body.theme-game-theme .qg-ladder-grid span,
body.theme-game-theme .qg-ladder-grid small,
body.theme-game-theme .qg-mypage-summary-empty span {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-ladder-grid article.is-unlocked {
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(20, 184, 166, 0.12);
}

body.theme-game-theme .qg-ladder-grid article.is-current {
  border-color: var(--qga-premium-teal);
  background: rgba(20, 184, 166, 0.2);
}

body.theme-game-theme .qg-account-protection {
  border-color: rgba(20, 184, 166, 0.42);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(15, 23, 42, 0.96));
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-account-protection.is-protected {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.28), rgba(15, 23, 42, 0.96));
}

body.theme-game-theme .qg-account-protection-main h3 {
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-account-protection-main p {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-account-progress {
  background: rgba(148, 163, 184, 0.22);
}

body.theme-game-theme .qg-account-option-row span {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.74);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-account-option-row span.is-linked {
  border-color: rgba(20, 184, 166, 0.55);
  background: rgba(20, 184, 166, 0.18);
  color: var(--qga-premium-cyan);
}

body.theme-game-theme .qg-account-option-row span.is-disabled {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-account-link-list article,
body.theme-game-theme .qg-auth-box,
body.theme-game-theme .qg-auth-modal-dialog {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.96);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-account-link-list article.is-linked,
body.theme-game-theme .qg-auth-box--profile,
body.theme-game-theme .qg-auth-box--primary {
  border-color: rgba(20, 184, 166, 0.42);
  background: rgba(20, 184, 166, 0.12);
}

body.theme-game-theme .qg-account-link-list span,
body.theme-game-theme .qg-account-link-list small,
body.theme-game-theme .qg-auth-box-head p,
body.theme-game-theme .qg-auth-modal-head p {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-account-link-list strong,
body.theme-game-theme .qg-auth-box h3,
body.theme-game-theme .qg-auth-modal-head h3 {
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-auth-box-head span,
body.theme-game-theme .qg-auth-modal-head span {
  color: var(--qga-premium-cyan);
}

body.theme-game-theme .qg-auth-modal-close,
body.theme-game-theme .qg-auth-modal-tabs,
body.theme-game-theme .qg-auth-provider-grid button {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.74);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-auth-provider-grid--featured button {
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(20, 184, 166, 0.14);
}

body.theme-game-theme .qg-auth-provider-grid small {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-auth-form input {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(2, 6, 23, 0.64);
  color: var(--qga-premium-text);
}

body.theme-game-theme .qg-auth-form input::placeholder {
  color: rgba(167, 180, 200, 0.78);
}

body.theme-game-theme .qg-auth-modal-tabs button {
  color: var(--qga-premium-muted);
}

body.theme-game-theme .qg-auth-modal-tabs button.is-active {
  background: var(--qga-premium-cyan);
  color: #03111f;
}

@media (max-width: 1120px) {
  body.theme-game-theme .qg-shogi-play-shell .qg-play-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.theme-game-theme .qg-masthead,
  body.theme-game-theme .qg-detail-hero,
  body.theme-game-theme .qg-shogi-site-hero {
    padding: 22px 16px;
  }

  body.theme-game-theme .qg-coming-soon-card {
    flex-basis: 162px;
  }

  body.theme-game-theme .qg-board-game-card.is-playable {
    min-height: 138px;
  }

  body.theme-game-theme .qg-shogi-play-shell .qg-play-side {
    grid-template-columns: 1fr;
  }

  body.theme-game-theme .qg-shogi-play-shell:not(.qg-mode-lobby):not(.qg-mode-matching) .qg-match-board,
  body.theme-game-theme .qg-shogi-play-shell .qg-match-board .qg-shogi-area {
    min-height: 620px;
  }

  body.theme-game-theme .qg-shogi-play-shell .qg-start-pane {
    grid-template-columns: 1fr;
  }

  body.theme-game-theme .qg-shogi-play-shell .qg-start-pane-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.theme-game-theme .qg-shogi-play-shell .qg-start-pane-actions .qg-primary-action,
  body.theme-game-theme .qg-shogi-play-shell .qg-start-pane-actions .qg-action-btn,
  body.theme-game-theme .qg-shogi-play-shell .qg-start-pane-actions .qg-text-btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    white-space: normal;
  }

  .qg-shogi-play-shell .qg-start-pane {
    grid-template-columns: 1fr !important;
  }

  .qg-shogi-play-shell .qg-start-pane-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-content: stretch;
    width: 100%;
  }

  .qg-shogi-play-shell .qg-start-pane-actions .qg-primary-action,
  .qg-shogi-play-shell .qg-start-pane-actions .qg-action-btn,
  .qg-shogi-play-shell .qg-start-pane-actions .qg-text-btn {
    width: 100%;
    min-width: 0 !important;
    min-height: 48px;
    white-space: normal !important;
    writing-mode: horizontal-tb;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-game-theme .qg-skeleton::after,
  body.theme-game-theme .qg-card-skeleton::after {
    animation: none;
  }

  body.theme-game-theme .qg-game-tile,
  body.theme-game-theme .qg-event-card,
  body.theme-game-theme .qg-board-game-card,
  body.theme-game-theme .qg-coming-soon-card,
  body.theme-game-theme .qg-quickmatch-tile,
  body.theme-game-theme .qg-primary-action,
  body.theme-game-theme .qg-action-btn,
  body.theme-game-theme .qg-text-btn {
    transition: none;
  }
}

/* QuickGamesArena v4 shogi visual correction: restore battle image, readable route cards, and crisp CTAs. */
body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-site-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(20px, 3vw, 34px);
  min-height: clamp(560px, 64vh, 760px);
  padding: clamp(28px, 4vw, 64px);
  border-color: rgba(125, 211, 252, 0.22);
  background:
    linear-gradient(90deg, rgba(7, 10, 18, 0.92), rgba(7, 10, 18, 0.78) 44%, rgba(7, 10, 18, 0.36) 74%),
    radial-gradient(circle at 12% 14%, rgba(251, 191, 36, 0.16), transparent 34%),
    var(--qg-shogi-hero-image),
    linear-gradient(135deg, #07111f, #092b2f 58%, #3b230d);
  background-position:
    center,
    center,
    var(--qg-shogi-hero-position, 50% 50%),
    center;
  background-size:
    cover,
    cover,
    var(--qg-shogi-hero-size, cover),
    cover;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36);
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 10, 18, 0.08), rgba(7, 10, 18, 0.28)),
    radial-gradient(circle at 72% 30%, rgba(96, 165, 250, 0.12), transparent 30%);
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-main,
body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-side {
  position: relative;
  z-index: 1;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-main {
  max-width: 760px;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-site-hero h1 {
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.54);
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-site-hero p,
body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-guest-note {
  color: #e2edf9;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

body.theme-game-theme .qg-shogi-site .qg-shogi-page-head[data-qg-shogi-page-head],
body.theme-game-theme .qg-shogi-page-head[data-qg-shogi-page-head] {
  min-height: clamp(260px, 29vw, 360px);
  border-color: rgba(125, 211, 252, 0.2);
  background:
    linear-gradient(90deg, rgba(7, 10, 18, 0.92), rgba(7, 10, 18, 0.66) 55%, rgba(7, 10, 18, 0.36)),
    radial-gradient(circle at 18% 18%, rgba(251, 191, 36, 0.16), transparent 34%),
    var(--qg-shogi-head-image, var(--qg-shogi-hero-image, url('/static/games/shogi_banner.png'))),
    linear-gradient(135deg, #07111f, #092b2f 58%, #3b230d);
  background-position:
    center,
    center,
    var(--qg-shogi-head-position, 50% 50%),
    center;
  background-size:
    cover,
    cover,
    var(--qg-shogi-head-size, cover),
    cover;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

body.theme-game-theme .qg-shogi-page-head[data-qg-shogi-page-head] h1,
body.theme-game-theme .qg-shogi-page-head[data-qg-shogi-page-head] p,
body.theme-game-theme .qg-shogi-page-head[data-qg-shogi-page-head] .qg-kicker {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.78);
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-quickmatch-tiles {
  grid-template-columns: repeat(3, minmax(142px, 1fr));
  max-width: 680px;
  gap: 12px;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-quickmatch-tile {
  min-height: 112px;
  border: 1px solid rgba(250, 204, 21, 0.34);
  background:
    linear-gradient(145deg, rgba(14, 165, 233, 0.92), rgba(37, 99, 235, 0.84) 52%, rgba(76, 29, 149, 0.82));
  color: #f8fafc;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.36);
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-quickmatch-tile.is-default {
  background:
    linear-gradient(145deg, rgba(45, 212, 191, 0.94), rgba(37, 99, 235, 0.86) 50%, rgba(251, 191, 36, 0.9));
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-quickmatch-tile em {
  background: #facc15;
  color: #1f1300;
  text-shadow: none;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-routes {
  grid-template-columns: 1fr;
  gap: 12px;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route {
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 88px;
  padding: 14px;
  border-color: rgba(226, 232, 240, 0.2);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.74));
  backdrop-filter: blur(12px);
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route-icon i {
  width: 44px;
  height: 44px;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route-copy {
  gap: 4px;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route-copy strong {
  color: #f8fafc;
  font-size: 0.98rem;
  line-height: 1.25;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route-copy small {
  color: #d7e1ef;
  font-size: 0.84rem;
  line-height: 1.5;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route-copy > span {
  max-width: 100%;
  color: #bffcf2;
}

body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route:hover,
body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route:focus-visible {
  border-color: rgba(250, 204, 21, 0.54);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(51, 65, 85, 0.82));
}

body.theme-game-theme .qg-match-entry .qg-entry-actions--compact {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

body.theme-game-theme .qg-match-entry .qg-watch-only {
  border: 1px solid rgba(125, 211, 252, 0.32);
  background: rgba(14, 165, 233, 0.14);
  color: #dff8ff;
  box-shadow: none;
}

body.theme-game-theme .qg-match-entry .qg-watch-only:hover,
body.theme-game-theme .qg-match-entry .qg-watch-only:focus-visible {
  border-color: rgba(125, 211, 252, 0.68);
  background: rgba(14, 165, 233, 0.24);
  color: #f8fafc;
}

.qg-sfen-embed {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
}

.qg-sfen-embed-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.qg-sfen-embed-head span {
  display: block;
  color: #5eead4;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.qg-sfen-embed-head strong {
  color: #f8fafc;
  font-size: 1rem;
}

.qg-sfen-embed-head small {
  color: #94a3b8;
  font-weight: 800;
}

.qg-sfen-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(22px, 1fr));
  width: min(100%, 360px);
  aspect-ratio: 1;
  border: 2px solid #7c4a16;
  border-radius: 6px;
  overflow: hidden;
  background: #d9a85f;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.qg-sfen-square {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid rgba(92, 54, 13, 0.42);
  background: linear-gradient(135deg, #f1cc82, #d9a85f);
  color: #1f2937;
  font-size: clamp(0.72rem, 2.1vw, 1rem);
  font-weight: 900;
}

.qg-sfen-square.is-gote {
  transform: rotate(180deg);
}

.qg-sfen-code {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(7, 10, 18, 0.62);
  color: #cbd5e1;
  font-size: 0.78rem;
}

.cmsqa-position-helper {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
}

body.theme-game-theme .cmsqa-position-helper {
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
}

.cmsqa-position-helper code {
  display: block;
  max-width: 100%;
  color: #0f766e;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.cmsqa-position-helper > * {
  min-width: 0;
  max-width: 100%;
}

body.theme-game-theme .cmsqa-position-helper code {
  color: #99f6e4;
}

.cmsqa-position-helper a {
  width: fit-content;
  color: #0f766e;
  font-weight: 900;
  text-decoration: none;
}

.cmsqa-position-helper a:hover,
.cmsqa-position-helper a:focus-visible {
  color: #0f172a;
  text-decoration: underline;
}

body.theme-game-theme .cmsqa-position-helper a {
  color: #67e8f9;
}

body.theme-game-theme .cmsqa-position-helper a:hover,
body.theme-game-theme .cmsqa-position-helper a:focus-visible {
  color: #fef3c7;
}

@media (max-width: 900px) {
  body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-site-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-quickmatch-tiles,
  body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-routes {
    grid-template-columns: 1fr;
  }

  body.theme-game-theme .qg-shogi-site.qg-shogi-site--top .qg-shogi-hero-route {
    min-height: 82px;
  }

  .qg-sfen-embed-head {
    display: grid;
  }
}

.qg-study-panel .qg-empty,
.qg-study-module-panel .qg-empty {
  margin: 16px;
}

.qg-study-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px;
}

.qg-study-track-grid.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.qg-study-track,
.qg-study-module-card,
.qg-study-item-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.92);
  padding: 16px;
  color: #111827;
}

.qg-study-track {
  --qg-study-accent: #14b8a6;
  align-content: start;
  border-top: 3px solid var(--qg-study-accent);
}

.qg-study-track-main,
.qg-study-module-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.qg-study-track-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--qg-study-accent, #14b8a6) 18%, #ffffff);
  color: var(--qg-study-accent, #0f766e);
  font-size: 1rem;
}

.qg-study-track h3,
.qg-study-module-card strong,
.qg-study-item-card strong {
  margin: 0;
  color: #0f172a;
  font-weight: 900;
}

.qg-study-track p,
.qg-study-module-card p,
.qg-study-item-card p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.qg-study-meta,
.qg-study-track-counts,
.qg-study-module-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.qg-study-meta span,
.qg-study-track-counts span,
.qg-study-module-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(20, 184, 166, 0.09);
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 900;
}

.qg-study-track-counts strong {
  margin-right: 4px;
  color: #0f172a;
}

.qg-study-module-list,
.qg-study-item-grid {
  display: grid;
  gap: 10px;
}

.qg-study-item-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qg-study-item-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
}

.qg-study-item-list span {
  border-radius: 6px;
  padding: 3px 7px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
}

.qg-study-cta {
  justify-self: start;
}

.qg-study-module-detail {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.qg-study-body {
  color: #334155;
}

.qg-study-notation {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.38);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.04);
}

.qg-study-notation span {
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 900;
}

.qg-study-notation code {
  white-space: normal;
  color: #334155;
  font-size: 0.8rem;
}

.qg-study-choice-list {
  display: grid;
  gap: 8px;
}

.qg-study-choice-list button {
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-weight: 800;
  text-align: left;
}

.qg-study-choice-list button.is-correct {
  border-color: rgba(20,184,166,0.62);
  background: #ecfeff;
  color: #0f766e;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

.qg-study-choice-list button.is-wrong {
  border-color: rgba(251,113,133,0.62);
  background: #fff1f2;
  color: #9f1239;
  box-shadow: 0 0 0 3px rgba(251,113,133,0.12);
}

.qg-study-attempt-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,0.26);
  border-radius: 8px;
  background: rgba(248,250,252,0.92);
  color: #334155;
  font-weight: 900;
}

.qg-study-attempt-result[hidden] {
  display: none;
}

.qg-study-attempt-result::before {
  content: "•";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(148,163,184,0.16);
  color: #475569;
  font-size: 1.2rem;
  line-height: 1;
}

.qg-study-attempt-result[data-qg-attempt-tone="correct"],
.qg-study-attempt-result[data-qg-attempt-tone="complete"] {
  border-color: rgba(20,184,166,0.44);
  background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(250,204,21,0.08)), #f0fdfa;
  color: #0f766e;
}

.qg-study-attempt-result[data-qg-attempt-tone="correct"]::before,
.qg-study-attempt-result[data-qg-attempt-tone="complete"]::before {
  content: "○";
  background: linear-gradient(135deg, #14b8a6, #facc15);
  color: #06121f;
  font-weight: 1000;
}

.qg-study-attempt-result[data-qg-attempt-tone="wrong"],
.qg-study-attempt-result[data-qg-attempt-tone="error"] {
  border-color: rgba(251,113,133,0.44);
  background: linear-gradient(135deg, rgba(251,113,133,0.14), rgba(251,191,36,0.08)), #fff7ed;
  color: #7f1d1d;
}

.qg-study-attempt-result[data-qg-attempt-tone="wrong"]::before,
.qg-study-attempt-result[data-qg-attempt-tone="error"]::before {
  content: "×";
  background: linear-gradient(135deg, #fb7185, #f97316);
  color: #fff7ed;
  font-weight: 1000;
}

.qg-study-item-card.is-study-correct {
  border-color: rgba(20,184,166,0.38);
  box-shadow: 0 0 0 1px rgba(20,184,166,0.14), 0 18px 38px rgba(20,184,166,0.1);
}

.qg-study-item-card.is-study-wrong {
  border-color: rgba(251,113,133,0.38);
}

body.theme-game-theme .qg-study-track,
body.theme-game-theme .qg-study-module-card,
body.theme-game-theme .qg-study-item-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.72);
  color: #e5edf7;
}

body.theme-game-theme .qg-study-track h3,
body.theme-game-theme .qg-study-module-card strong,
body.theme-game-theme .qg-study-item-card strong,
body.theme-game-theme .qg-study-track-counts strong {
  color: #f8fafc;
}

body.theme-game-theme .qg-study-track p,
body.theme-game-theme .qg-study-module-card p,
body.theme-game-theme .qg-study-item-card p,
body.theme-game-theme .qg-study-body {
  color: #a7b4c8;
}

body.theme-game-theme .qg-study-track-icon {
  background: color-mix(in srgb, var(--qg-study-accent, #22d3ee) 22%, rgba(15, 23, 42, 0.84));
  color: #f8fafc;
}

body.theme-game-theme .qg-study-meta span,
body.theme-game-theme .qg-study-track-counts span,
body.theme-game-theme .qg-study-module-head span {
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(125, 211, 252, 0.1);
  color: #67e8f9;
}

body.theme-game-theme .qg-study-item-list span {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

body.theme-game-theme .qg-study-notation {
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(7, 10, 18, 0.46);
}

body.theme-game-theme .qg-study-notation span,
body.theme-game-theme .qg-study-notation code {
  color: #99f6e4;
}

body.theme-game-theme .qg-study-choice-list button {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.8);
  color: #e5edf7;
}

body.theme-game-theme .qg-study-choice-list button.is-correct {
  border-color: rgba(94,234,212,0.58);
  background: rgba(20,184,166,0.18);
  color: #99f6e4;
}

body.theme-game-theme .qg-study-choice-list button.is-wrong {
  border-color: rgba(251,113,133,0.58);
  background: rgba(127,29,29,0.3);
  color: #fecdd3;
}

body.theme-game-theme .qg-study-attempt-result {
  border-color: rgba(148,163,184,0.22);
  background: rgba(7,10,18,0.52);
  color: #cbd5e1;
}

body.theme-game-theme .qg-study-attempt-result[data-qg-attempt-tone="correct"],
body.theme-game-theme .qg-study-attempt-result[data-qg-attempt-tone="complete"] {
  border-color: rgba(94,234,212,0.42);
  background: linear-gradient(135deg, rgba(20,184,166,0.2), rgba(250,204,21,0.08)), rgba(7,10,18,0.72);
  color: #99f6e4;
}

body.theme-game-theme .qg-study-attempt-result[data-qg-attempt-tone="wrong"],
body.theme-game-theme .qg-study-attempt-result[data-qg-attempt-tone="error"] {
  border-color: rgba(251,113,133,0.42);
  background: linear-gradient(135deg, rgba(127,29,29,0.34), rgba(251,191,36,0.08)), rgba(7,10,18,0.72);
  color: #fecdd3;
}

.qg-generic-play-shell {
  align-items: start;
}

.qg-generic-move-box {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.04);
}

.qg-generic-legal-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qg-inline-move-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.qg-inline-move-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-weight: 800;
}

.qg-result-review pre[data-qg-generic-state] {
  max-height: 280px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.05);
  color: #334155;
  font-size: 0.8rem;
}

body.theme-game-theme .qg-generic-move-box {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.72);
  color: #e5edf7;
}

body.theme-game-theme .qg-inline-move-form input {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(7, 10, 18, 0.72);
  color: #f8fafc;
}

body.theme-game-theme .qg-result-review pre[data-qg-generic-state] {
  border-color: rgba(125, 211, 252, 0.18);
  background: rgba(7, 10, 18, 0.54);
  color: #cbd5e1;
}

@media (max-width: 620px) {
  .qg-study-track-grid,
  .qg-study-module-detail {
    padding: 12px;
  }

  .qg-study-track-main,
  .qg-study-module-summary {
    grid-template-columns: 1fr;
  }

  .qg-inline-move-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Chess site (国際チェス) — classical monochrome / dark-wood theme
   Scoped under .qg-chess-site. See cms_game/chess_site.py.
   ============================================================ */
.qg-chess-site {
  --qg-chess-ink: #ece7d8;
  --qg-chess-muted: #b7b1a1;
  --qg-chess-parchment: #e8e2d4;
  --qg-chess-line: rgba(232, 226, 212, 0.18);
  --qg-chess-panel: rgba(20, 20, 24, 0.62);
  --qg-chess-board-light: #f0d9b5;
  --qg-chess-board-dark: #b58863;
  --qg-chess-board-frame: #3a2c20;
  --qg-chess-accent: #d9c7a3;
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
}

/* Page head (banner) */
.qg-chess-page-head {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--qg-chess-line);
  background: linear-gradient(135deg, #100d0a, #2a2018);
}
/* Banner crop layer — each subpage shows a distinct slice via --qg-chess-head-position. */
.qg-chess-page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--qg-chess-head-image, url('/static/games/chess_banner.png'));
  background-position: var(--qg-chess-head-position, 50% 50%);
  background-size: var(--qg-chess-head-size, cover);
}
/* Reveal gradient — dark on the left for legible text, fading right so the banner art shows. */
.qg-chess-page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,7,6,0.95) 0%, rgba(8,7,6,0.8) 32%, rgba(8,7,6,0.4) 60%, rgba(8,7,6,0.08) 84%, rgba(8,7,6,0) 100%),
    linear-gradient(0deg, rgba(8,7,6,0.55), rgba(8,7,6,0) 60%);
}
.qg-chess-page-head .qg-kicker { color: var(--qg-chess-accent); letter-spacing: .14em; }
.qg-chess-page-head h1 {
  margin: 4px 0 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  color: #fbf8f0;
}
.qg-chess-page-head p { max-width: 780px; margin: 0; line-height: 1.7; color: var(--qg-chess-ink); }
.qg-chess-site-menu {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.qg-chess-site-menu a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--qg-chess-line);
  background: rgba(10, 9, 8, 0.42);
  color: var(--qg-chess-ink); font-size: .86rem; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.qg-chess-site-menu a:hover { border-color: var(--qg-chess-accent); }
.qg-chess-site-menu a.is-active {
  border-color: rgba(217, 199, 163, 0.8);
  background: rgba(217, 199, 163, 0.18);
  color: #fbf8f0;
}
.qg-chess-page-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.qg-chess-site .qg-primary-action {
  border-color: var(--qg-chess-accent);
  background: linear-gradient(135deg, #e8d9b6, #c9b489);
  color: #2a2018; font-weight: 700;
}
.qg-chess-page-head-copy { display: grid; gap: 4px; }

/* Static FEN board */
.qg-chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  border: 6px solid var(--qg-chess-board-frame);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  margin: 4px 0;
}
.qg-chess-board--compact { width: min(240px, 100%); }
.qg-chess-sq {
  display: flex; align-items: center; justify-content: center;
  position: relative; aspect-ratio: 1 / 1;
}
.qg-chess-sq.is-light { background: var(--qg-chess-board-light); }
.qg-chess-sq.is-dark { background: var(--qg-chess-board-dark); }
.qg-chess-sq.is-hl::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 3px rgba(106, 153, 30, 0.85);
  background: rgba(155, 199, 0, 0.32);
}
.qg-chess-pc {
  font-size: clamp(1.1rem, 4.4vw, 2rem); line-height: 1; position: relative; z-index: 1;
}
.qg-chess-pc--white { color: #fbfbf7; text-shadow: 0 0 1px #2b2b2b, 0 1px 2px rgba(0,0,0,.55); }
.qg-chess-pc--black { color: #1c1b18; text-shadow: 0 1px 1px rgba(255,255,255,.25); }

/* Rules cheatsheet */
.qg-chess-rules-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.qg-chess-rule-row {
  display: grid; gap: 4px; padding: 12px 14px;
  border: 1px solid var(--qg-chess-line); border-radius: 12px;
  background: var(--qg-chess-panel);
}
.qg-chess-rule-piece { font-weight: 800; color: var(--qg-chess-accent); }
.qg-chess-rule-row strong { color: #fbf8f0; }
.qg-chess-rule-row small { color: var(--qg-chess-muted); line-height: 1.6; }
.qg-chess-rule-row small b { color: var(--qg-chess-ink); }
.qg-chess-rule-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qg-chess-rule-notes span {
  padding: 5px 11px; border-radius: 999px; font-size: .8rem;
  border: 1px solid var(--qg-chess-line); background: rgba(232,226,212,.06);
  color: var(--qg-chess-ink);
}
.qg-chess-rule-note-groups {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.qg-chess-rule-note-group {
  padding: 14px 16px; border: 1px solid var(--qg-chess-line);
  border-radius: 12px; background: var(--qg-chess-panel);
}
.qg-chess-rule-note-group h3 { margin: 0 0 8px; color: var(--qg-chess-accent); font-size: .98rem; }
.qg-chess-rule-note-group ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.qg-chess-rule-note-group li { color: var(--qg-chess-ink); line-height: 1.6; font-size: .9rem; }

/* Learning hub */
.qg-chess-learning-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.qg-chess-learning-card {
  display: flex; gap: 12px; padding: 14px;
  border: 1px solid var(--qg-chess-line); border-radius: 14px;
  background: var(--qg-chess-panel); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.qg-chess-learning-card:hover { border-color: var(--qg-chess-accent); transform: translateY(-2px); }
.qg-chess-learning-card.is-primary { border-color: rgba(217,199,163,.55); }
.qg-chess-learning-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 10px; background: rgba(217,199,163,.14); color: var(--qg-chess-accent);
}
.qg-chess-learning-main { display: grid; gap: 3px; }
.qg-chess-learning-main strong { color: #fbf8f0; }
.qg-chess-learning-main small { color: var(--qg-chess-muted); line-height: 1.55; }
.qg-chess-learning-main em { color: var(--qg-chess-accent); font-style: normal; font-size: .78rem; }
.qg-chess-learning-next {
  display: grid; gap: 6px; margin-top: 14px; padding: 16px;
  border: 1px solid var(--qg-chess-line); border-radius: 14px;
  background: rgba(217,199,163,.06);
}
.qg-chess-learning-next strong { color: #fbf8f0; }
.qg-chess-learning-next span { color: var(--qg-chess-muted); }
.qg-chess-learning-next .qg-primary-action { justify-self: start; margin-top: 6px; }
.qg-chess-learning-quests { margin-top: 14px; padding: 16px; border: 1px solid var(--qg-chess-line); border-radius: 14px; background: var(--qg-chess-panel); }
.qg-chess-quest-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.qg-chess-quest-head span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(217,199,163,.14); color: var(--qg-chess-accent); }
.qg-chess-quest-head strong { color: #fbf8f0; display: block; }
.qg-chess-quest-head small { color: var(--qg-chess-muted); }
.qg-chess-learning-quests ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qg-chess-learning-quests li { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; opacity: .55; }
.qg-chess-learning-quests li.is-active { opacity: 1; border-color: var(--qg-chess-line); background: rgba(232,226,212,.05); }
.qg-chess-learning-quests li.is-complete { opacity: .8; }
.qg-chess-learning-quests li span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: rgba(217,199,163,.18); color: var(--qg-chess-accent); font-weight: 700; }
.qg-chess-learning-quests li strong { color: #fbf8f0; display: block; }
.qg-chess-learning-quests li small { color: var(--qg-chess-muted); }
.qg-chess-quest-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Training */
.qg-chess-training-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }
.qg-chess-filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qg-chess-filter-label { color: var(--qg-chess-muted); font-size: .82rem; margin-right: 2px; }
.qg-chess-chip {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: .82rem;
  border: 1px solid var(--qg-chess-line); background: rgba(10,9,8,.4); color: var(--qg-chess-ink);
  transition: background .15s ease, border-color .15s ease;
}
.qg-chess-chip:hover { border-color: var(--qg-chess-accent); }
.qg-chess-chip.is-active { background: rgba(217,199,163,.2); border-color: var(--qg-chess-accent); color: #fbf8f0; }
.qg-chess-training-count { margin-left: auto; color: var(--qg-chess-muted); font-size: .82rem; }
.qg-chess-training-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.qg-chess-problem {
  display: grid; gap: 10px; padding: 16px; align-content: start;
  border: 1px solid var(--qg-chess-line); border-radius: 14px; background: var(--qg-chess-panel);
}
.qg-chess-problem-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.qg-chess-problem-tags { display: block; color: var(--qg-chess-accent); font-size: .76rem; }
.qg-chess-problem-head strong { color: #fbf8f0; }
.qg-chess-problem-diff { color: var(--qg-chess-accent); font-size: .82rem; white-space: nowrap; }
.qg-chess-problem .qg-chess-board { justify-self: center; }
.qg-chess-problem-q { color: var(--qg-chess-ink); margin: 0; line-height: 1.6; }
.qg-chess-choice-list { display: grid; gap: 6px; }
.qg-chess-choice {
  text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--qg-chess-line); background: rgba(10,9,8,.4); color: var(--qg-chess-ink);
  transition: border-color .15s ease, background .15s ease;
}
.qg-chess-choice:hover { border-color: var(--qg-chess-accent); }
.qg-chess-choice.is-correct { border-color: #6a991e; background: rgba(106,153,30,.22); color: #eaffd0; }
.qg-chess-choice.is-wrong { border-color: #b45454; background: rgba(180,84,84,.18); color: #ffe2e2; }
.qg-chess-problem-result { font-weight: 700; font-size: .9rem; }
.qg-chess-problem-result.is-correct { color: #b6e388; }
.qg-chess-problem-result.is-wrong { color: #f0a3a3; }
.qg-chess-problem-explain { color: var(--qg-chess-muted); line-height: 1.6; font-size: .9rem; }
.qg-chess-problem-explain p { margin: 4px 0; }
.qg-chess-solution-line b { color: var(--qg-chess-accent); }
.qg-chess-reveal { justify-self: start; }
.qg-chess-empty { grid-column: 1 / -1; }

/* Research */
.qg-chess-research-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.qg-chess-research-card {
  display: flex; gap: 12px; padding: 14px; align-items: flex-start;
  border: 1px solid var(--qg-chess-line); border-radius: 14px; background: var(--qg-chess-panel);
}
.qg-chess-research-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; background: rgba(217,199,163,.14); color: var(--qg-chess-accent); }
.qg-chess-research-icon--sm { width: 30px; height: 30px; }
.qg-chess-research-main { display: grid; gap: 5px; }
.qg-chess-research-main strong { color: #fbf8f0; }
.qg-chess-research-main small { color: var(--qg-chess-muted); line-height: 1.55; }
.qg-chess-research-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.qg-chess-research-tags b { padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: rgba(232,226,212,.08); color: var(--qg-chess-ink); }
.qg-chess-research-capabilities { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.qg-chess-research-capability { padding: 14px 16px; border: 1px solid var(--qg-chess-line); border-radius: 12px; background: var(--qg-chess-panel); }
.qg-chess-capability-head { display: flex; gap: 9px; align-items: center; margin-bottom: 10px; color: var(--qg-chess-accent); }
.qg-chess-capability-head h3 { margin: 0; font-size: .96rem; color: #fbf8f0; }
.qg-chess-capability-list, .qg-chess-opening-groups, .qg-chess-analysis-rows { display: grid; gap: 8px; }
.qg-chess-capability-list article, .qg-chess-opening-groups article { display: grid; gap: 3px; }
.qg-chess-capability-list strong, .qg-chess-opening-groups strong { color: #fbf8f0; }
.qg-chess-capability-list span, .qg-chess-opening-groups span { color: var(--qg-chess-muted); font-size: .86rem; line-height: 1.55; }
.qg-chess-opening-groups span b { display: inline-block; margin: 2px 6px 0 0; padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: .76rem; background: rgba(232,226,212,.08); color: var(--qg-chess-ink); }
.qg-chess-analysis-rows article { display: flex; gap: 10px; align-items: flex-start; }
.qg-chess-analysis-rows strong { color: #fbf8f0; display: block; }
.qg-chess-analysis-rows span { color: var(--qg-chess-muted); font-size: .86rem; line-height: 1.5; }

/* Chess tutorial */
.qg-chess-tutorial-shell { display: grid; gap: clamp(16px, 2.4vw, 26px); }
.qg-chess-tutorial-shell .qg-beginner-grid--web { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: start; }
@media (max-width: 900px) { .qg-chess-tutorial-shell .qg-beginner-grid--web { grid-template-columns: 1fr; } }
.qg-chess-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qg-chess-lesson { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--qg-chess-line); border-radius: 12px; background: var(--qg-chess-panel); }
.qg-chess-lesson-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: rgba(217,199,163,.14); color: var(--qg-chess-accent); }
.qg-chess-lesson strong { color: #fbf8f0; display: block; margin-bottom: 2px; }
.qg-chess-lesson p { margin: 0; color: var(--qg-chess-muted); line-height: 1.6; font-size: .9rem; }
.qg-chess-lesson-rules { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--qg-chess-line); border-radius: 12px; background: rgba(232,226,212,.05); }
.qg-chess-lesson-rules h3 { margin: 0 0 8px; color: var(--qg-chess-accent); font-size: .96rem; }
.qg-chess-lesson-rules ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.qg-chess-lesson-rules li { color: var(--qg-chess-ink); font-size: .88rem; line-height: 1.5; }
.qg-chess-lesson-rules li strong { color: #fbf8f0; }

.qg-chess-practice { display: grid; gap: 12px; }
.qg-chess-practice-hint { margin: 0; color: var(--qg-chess-ink); line-height: 1.6; }
.qg-chess-practice-hint.is-ok { color: #b6e388; }
.qg-chess-practice-hint.is-wrong { color: #f0a3a3; }
.qg-chess-board--practice { width: min(420px, 100%); justify-self: center; }
.qg-chess-board button.qg-chess-sq { border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; }
.qg-chess-board button.qg-chess-sq.is-sel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(217,199,163,.9); }
.qg-chess-practice-foot { display: grid; gap: 8px; }
.qg-chess-practice-turn { color: var(--qg-chess-accent); font-weight: 700; }
.qg-chess-move-log { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 110px; overflow: auto; }
.qg-chess-move-log li { padding: 3px 9px; border-radius: 6px; font-size: .82rem; background: rgba(232,226,212,.08); color: var(--qg-chess-ink); }
.qg-chess-practice-note { margin: 0; color: var(--qg-chess-muted); font-size: .8rem; }

/* DRY board-game landing hero — one template for all games (board_game_hero.html).
   Theme via --qg-bg-accent/--qg-bg-image set inline from board_game_sites.py. */
.qg-bg-hero {
  position: relative;
  min-height: clamp(380px, 44vh, 500px);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--qg-bg-line, rgba(232,226,212,.18));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.qg-bg-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--qg-bg-hero-image, url('/static/games/chess_banner.png'));
  background-position: var(--qg-bg-hero-position, 50% 42%);
  background-size: var(--qg-bg-hero-size, cover);
  transform: scale(1.02);
}
.qg-bg-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(102deg, rgba(8,7,6,0.95) 0%, rgba(8,7,6,0.86) 34%, rgba(8,7,6,0.45) 60%, rgba(8,7,6,0.08) 82%, rgba(8,7,6,0) 100%),
    linear-gradient(0deg, rgba(8,7,6,0.92) 0%, rgba(8,7,6,0.25) 26%, rgba(8,7,6,0) 52%);
}
.qg-bg-hero-glow {
  position: absolute; z-index: -1; right: 8%; top: 30%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,199,163,0.22), rgba(217,199,163,0) 70%);
  filter: blur(6px); pointer-events: none;
}
.qg-bg-hero-inner {
  position: relative; z-index: 1;
  max-width: 640px;
  padding: clamp(24px, 4vw, 48px);
  display: grid; gap: 12px;
}
.qg-bg-hero-banner {
  position: absolute;
  z-index: 0;
  right: clamp(18px, 3vw, 34px);
  top: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  width: min(46%, 560px);
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(248,250,252,.2);
  box-shadow: 0 22px 58px rgba(0,0,0,.42);
  background: rgba(2,6,23,.28);
}
.qg-bg-hero-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--qg-bg-hero-position, 50% 50%);
}
.qg-bg-hero-inner .qg-kicker { color: var(--qg-bg-accent, #d9c7a3); letter-spacing: .16em; }
.qg-bg-hero-inner h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 900; line-height: 1.02;
  color: #fcf9f1;
  text-shadow: 0 3px 22px rgba(0,0,0,.6);
}
.qg-bg-hero-inner > p {
  margin: 0; max-width: 560px; line-height: 1.7;
  color: #f1ebdd; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.qg-bg-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.qg-bg-hero-play {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 14px 26px; border-radius: 8px; text-decoration: none;
  background: linear-gradient(135deg, var(--qg-bg-accent, #f3e4c0), #f8fafc);
  color: #07111f; font-weight: 800; font-size: 1.12rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .14s ease, box-shadow .14s ease;
}
.qg-bg-hero-play:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.5); }
.qg-bg-hero-play i { font-size: 1rem; }
.qg-bg-hero-play em { font-style: normal; font-weight: 600; font-size: .76rem; opacity: .7; letter-spacing: .08em; }
.qg-bg-hero-links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.qg-bg-hero-links a {
  color: #f8fafc; text-decoration: none; font-size: .92rem; font-weight: 700;
  border-bottom: 1px solid rgba(248,250,252,.45);
}
.qg-bg-hero-links a:hover { color: var(--qg-bg-accent, #d9c7a3); border-color: currentColor; }
.qg-bg-hero-secondary, .qg-bg-hero-watch { backdrop-filter: blur(3px); }
.qg-bg-hero .qg-bg-hero-secondary {
  border: 1px solid rgba(244,239,228,.45); background: rgba(12,10,8,.42); color: #f4efe4;
}
.qg-bg-hero-watch { color: #f1ebdd; }

.qg-bg-quickmatch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.qg-bg-quickmatch .qg-quickmatch-tile {
  display: grid; gap: 1px; padding: 8px 14px; border-radius: 10px; text-decoration: none;
  border: 1px solid rgba(244,239,228,.28); background: rgba(12,10,8,.5); color: #f4efe4;
  transition: border-color .14s ease, background .14s ease;
}
.qg-bg-quickmatch .qg-quickmatch-tile:hover { border-color: var(--qg-bg-accent, #d9c7a3); background: rgba(12,10,8,.66); }
.qg-bg-quickmatch .qg-quickmatch-tile span { font-size: 1.05rem; font-weight: 800; color: var(--qg-bg-accent, #d9c7a3); }
.qg-bg-quickmatch .qg-quickmatch-tile strong { font-size: .82rem; font-weight: 600; }
.qg-bg-quickmatch .qg-quickmatch-tile em { font-style: normal; font-size: .68rem; color: #b6e388; }
.qg-bg-quickmatch .qg-quickmatch-tile.is-default { border-color: rgba(217,199,163,.7); }

.qg-bg-hero-live { display: flex; gap: 18px; margin-top: 6px; }
.qg-bg-hero-live span { display: inline-flex; align-items: baseline; gap: 6px; color: #d9d2c4; }
.qg-bg-hero-live strong { font-size: 1.2rem; font-weight: 800; color: #fcf9f1; }
.qg-bg-hero-live small { font-size: .76rem; color: #b7b1a1; }
.qg-bg-hero-live span.has-count strong { color: var(--qg-bg-accent, #d9c7a3); }

.qg-board-signal {
  display: grid; gap: 10px;
  margin: 14px 0 0;
}
.qg-board-signal-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 8px;
  background: rgba(15,23,42,.58);
}
.qg-board-signal-row a {
  display: inline-flex; align-items: baseline; gap: 7px;
  min-height: 34px; padding: 5px 10px;
  color: #cbd5e1; text-decoration: none; border-radius: 6px;
}
.qg-board-signal-row a:hover { background: rgba(148,163,184,.12); color: #f8fafc; }
.qg-board-signal-row i { font-size: .52rem; color: #64748b; }
.qg-board-signal-row strong { color: #f8fafc; font-size: 1.1rem; }
.qg-board-signal-row span { font-size: .82rem; }
.qg-board-signal-row a.has-count i,
.qg-board-signal-row a.has-count strong { color: var(--qg-bg-accent, #7dd3fc); }
.qg-board-signal-row a.is-zero { display: none; }
.qg-board-signal-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid rgba(94, 234, 212, .28);
  border-radius: 8px;
  background: rgba(20, 184, 166, .08);
  color: #cbd5e1;
  text-decoration: none;
}
.qg-board-signal-empty i { color: #5eead4; }
.qg-board-signal-empty span { min-width: 0; }
.qg-board-signal-empty strong { margin-left: auto; color: #99f6e4; white-space: nowrap; }
.qg-board-signal.has-live-activity .qg-board-signal-empty { display: none; }
.qg-board-signal:not(.has-live-activity) .qg-board-signal-row { display: none; }
.qg-board-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(125,211,252,.35);
  background: rgba(14,165,233,.12);
  color: #f8fafc; text-decoration: none;
}
.qg-board-resume:hover { border-color: rgba(125,211,252,.7); color: #f8fafc; }
.qg-board-resume strong { display: block; }
.qg-board-resume small { color: #cbd5e1; }

.qg-board-route-copy em {
  display: inline-flex; width: fit-content;
  margin: 2px 0 1px; padding: 2px 7px; border-radius: 999px;
  background: rgba(125,211,252,.12); color: #bae6fd;
  font-style: normal; font-size: .75rem; font-weight: 700;
}

.qg-board-about {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: end;
}
.qg-board-about--with-story {
  grid-template-columns: minmax(0,1fr) minmax(240px, 312px) auto;
  align-items: center;
}
.qg-board-about--with-story .qg-board-about-copy {
  align-self: center;
}
.qg-board-about--with-story .qg-shogi-goal-story--compact {
  align-self: center;
  justify-self: end;
}
.qg-board-about--with-story .qg-board-about-actions {
  align-self: end;
}
.qg-board-about h2 { margin: 2px 0 8px; font-size: 1.35rem; }
.qg-board-about p { margin: 0; max-width: 820px; color: var(--gp-text-muted, #a7b4c8); line-height: 1.75; }
.qg-board-about-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.qg-board-about-actions a,
.qg-board-breadcrumb {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid rgba(148,163,184,.22);
  color: #e5edf7; text-decoration: none; font-weight: 700;
}
.qg-board-about-actions a:hover,
.qg-board-breadcrumb:hover {
  border-color: var(--qg-bg-accent, #7dd3fc); color: #f8fafc; text-decoration: none;
}
.qg-board-breadcrumb {
  width: fit-content; margin-bottom: 10px;
  background: rgba(15,23,42,.42); font-size: .84rem;
}

.qg-bg-hero-nav {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px clamp(16px, 3vw, 28px);
  background: linear-gradient(0deg, rgba(8,7,6,.7), rgba(8,7,6,.2));
  border-top: 1px solid var(--qg-bg-line, rgba(232,226,212,.18));
}
.qg-bg-hero-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: .82rem; text-decoration: none;
  border: 1px solid rgba(244,239,228,.2); background: rgba(12,10,8,.4); color: #f1ebdd;
  transition: border-color .14s ease, background .14s ease;
}
.qg-bg-hero-nav a:hover { border-color: var(--qg-bg-accent, #d9c7a3); }
.qg-bg-hero-nav a.is-active { border-color: rgba(217,199,163,.8); background: rgba(217,199,163,.18); color: #fcf9f1; }

.qg-bg-hero--poker::after {
  background:
    linear-gradient(105deg, rgba(2, 10, 24, .96) 0%, rgba(3, 31, 38, .88) 36%, rgba(5, 46, 22, .5) 62%, rgba(5, 46, 22, .12) 100%),
    linear-gradient(0deg, rgba(2, 8, 23, .94) 0%, rgba(2, 8, 23, .28) 45%, rgba(2, 8, 23, 0) 100%);
}
.qg-bg-hero--poker .qg-bg-hero-glow {
  background: radial-gradient(circle, rgba(34, 197, 94, .28), rgba(34, 197, 94, 0) 68%);
}
.qg-bg-hero--poker .qg-bg-hero-play {
  background: linear-gradient(135deg, #38e58a, #14b8a6);
  color: #04111a;
}
.qg-bg-hero--poker .qg-bg-quickmatch .qg-quickmatch-tile.is-default,
.qg-bg-hero--poker .qg-bg-hero-nav a.is-active {
  border-color: rgba(34, 197, 94, .78);
  background: rgba(34, 197, 94, .17);
}

.qg-bg-hero--backgammon::after {
  background:
    linear-gradient(105deg, rgba(13, 9, 6, .97) 0%, rgba(75, 23, 23, .86) 34%, rgba(127, 29, 29, .48) 60%, rgba(24, 10, 8, .16) 100%),
    linear-gradient(0deg, rgba(13, 9, 6, .92) 0%, rgba(13, 9, 6, .28) 48%, rgba(13, 9, 6, 0) 100%);
}
.qg-bg-hero--backgammon .qg-bg-hero-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, .3), rgba(245, 158, 11, 0) 68%);
}
.qg-bg-hero--backgammon .qg-bg-hero-play {
  background: linear-gradient(135deg, #fbbf24, #dc2626);
  color: #1c0c05;
}
.qg-bg-hero--backgammon .qg-bg-quickmatch .qg-quickmatch-tile.is-default,
.qg-bg-hero--backgammon .qg-bg-hero-nav a.is-active {
  border-color: rgba(245, 158, 11, .82);
  background: rgba(127, 29, 29, .26);
}

.qg-bg-hero--checkers::after {
  background:
    linear-gradient(105deg, rgba(17, 24, 39, .97) 0%, rgba(127, 29, 29, .84) 34%, rgba(239, 68, 68, .38) 62%, rgba(15, 23, 42, .16) 100%),
    linear-gradient(0deg, rgba(15, 23, 42, .94) 0%, rgba(15, 23, 42, .3) 46%, rgba(15, 23, 42, 0) 100%);
}
.qg-bg-hero--checkers .qg-bg-hero-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, .3), rgba(239, 68, 68, 0) 68%);
}
.qg-bg-hero--checkers .qg-bg-hero-play {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff7ed;
}
.qg-bg-hero--checkers .qg-bg-quickmatch .qg-quickmatch-tile.is-default,
.qg-bg-hero--checkers .qg-bg-hero-nav a.is-active {
  border-color: rgba(239, 68, 68, .82);
  background: rgba(239, 68, 68, .2);
}

.qg-bg-hero--latrunculi::after {
  background:
    linear-gradient(105deg, rgba(20, 14, 10, .97) 0%, rgba(75, 45, 22, .86) 36%, rgba(214, 180, 110, .32) 62%, rgba(28, 18, 12, .14) 100%),
    linear-gradient(0deg, rgba(20, 14, 10, .93) 0%, rgba(20, 14, 10, .34) 48%, rgba(20, 14, 10, 0) 100%);
}
.qg-bg-hero--latrunculi .qg-bg-hero-glow {
  background: radial-gradient(circle, rgba(214, 180, 110, .3), rgba(214, 180, 110, 0) 68%);
}
.qg-bg-hero--latrunculi .qg-bg-hero-play {
  background: linear-gradient(135deg, #f8f0df, #d6b46e);
  color: #24140b;
}
.qg-bg-hero--latrunculi .qg-bg-quickmatch .qg-quickmatch-tile.is-default,
.qg-bg-hero--latrunculi .qg-bg-hero-nav a.is-active {
  border-color: rgba(214, 180, 110, .84);
  background: rgba(214, 180, 110, .18);
}

@media (max-width: 980px) {
  .qg-board-about--with-story {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  }
  .qg-board-about--with-story .qg-board-about-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.qg-bg-hero--mahjong::after {
  background:
    linear-gradient(105deg, rgba(3, 25, 29, .97) 0%, rgba(5, 68, 65, .88) 36%, rgba(20, 184, 166, .38) 62%, rgba(7, 89, 133, .12) 100%),
    linear-gradient(0deg, rgba(2, 8, 23, .94) 0%, rgba(2, 8, 23, .32) 46%, rgba(2, 8, 23, 0) 100%);
}
.qg-bg-hero--mahjong .qg-bg-hero-glow {
  background: radial-gradient(circle, rgba(125, 211, 252, .28), rgba(125, 211, 252, 0) 68%);
}
.qg-bg-hero--mahjong .qg-bg-hero-play {
  background: linear-gradient(135deg, #7dd3fc, #20d7a0);
  color: #03191d;
}
.qg-bg-hero--mahjong .qg-bg-quickmatch .qg-quickmatch-tile.is-default,
.qg-bg-hero--mahjong .qg-bg-hero-nav a.is-active {
  border-color: rgba(125, 211, 252, .82);
  background: rgba(20, 184, 166, .19);
}

@media (max-width: 720px) {
  .qg-bg-hero::after { background: linear-gradient(0deg, rgba(8,7,6,0.95) 0%, rgba(8,7,6,0.6) 45%, rgba(8,7,6,0.25) 100%); }
  .qg-bg-hero-inner { max-width: 100%; }
  .qg-bg-hero-banner { display: none; }
  .qg-board-about { grid-template-columns: 1fr; }
  .qg-board-about--with-story .qg-shogi-goal-story--compact {
    justify-self: start;
  }
  .qg-board-about-actions { justify-content: flex-start; }
}

/* #4 Mobile-first-view ordering: バナー(対局開始)→ロビー→上達→詳細 を強制 */
@media (max-width: 760px) {
  .qg-board-game-site,
  .qg-chess-site { display: flex; flex-direction: column; }
  .qg-board-game-site > *,
  .qg-chess-site > * { order: 5; }
  .qg-board-game-site > .qg-bg-hero,
  .qg-chess-site > .qg-bg-hero { order: 0; }
  .qg-board-game-site > .qg-match-entry,
  .qg-chess-site > .qg-match-entry { order: 1; }   /* ロビー・観戦を最優先で引き上げ */
  .qg-board-game-site > .qg-study-panel,
  .qg-chess-site > .qg-study-panel { order: 3; }
  .qg-board-game-site > .cmsgame-detail-summary,
  .qg-chess-site > .cmsgame-detail-summary { order: 9; }  /* 詳細は最下部へ降格 */
}

/* Chess scenario-driven tutorial drills (#5) */
.qg-chess-scenario-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.qg-chess-scenario-progress { margin: 0; color: var(--qg-chess-muted); font-size: .82rem; }
.qg-chess-scenario .qg-chess-board--practice { justify-self: center; }

/* Chess record viewer board (#3 — chess records render a chess board, not shogi) */
.qg-record-board.is-chess {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border: 6px solid #3a2c20;
  background: #b58863;
}
.qg-record-board.is-chess .qg-record-square {
  border: 0;
  font-size: clamp(1rem, 3.4vw, 2rem);
  color: #1c1b18;
}
.qg-record-board.is-chess .qg-record-square.is-light { background: #f0d9b5; }
.qg-record-board.is-chess .qg-record-square.is-dark { background: #b58863; }
.qg-record-board.is-chess .qg-record-square.qg-rc-white { color: #fbfbf7; text-shadow: 0 0 1px #2b2b2b, 0 1px 2px rgba(0,0,0,.5); }
.qg-record-board.is-chess .qg-record-square.qg-rc-black { color: #1c1b18; }

/* Generic CMS-driven beginner tutorial pages */
.qg-generic-tutorial-shell {
  display: grid;
  gap: 18px;
}
.qg-generic-tutorial-shell.qg-generic-tutorial-shell--embed {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 10%, rgba(20, 184, 166, .16), transparent 32%),
    linear-gradient(180deg, #07111f, #0b1220);
}
.qg-generic-tutorial-embed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .82);
  color: #f8fafc;
}
.qg-generic-tutorial-embed-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
}
.qg-generic-tutorial-embed-head h1 {
  margin: 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}
.qg-generic-tutorial-embed-head p {
  margin: 0;
  color: #cbd5e1;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.55;
}
.qg-generic-tutorial-embed-head .qg-shogi-rules-launcher--button {
  margin-right: 14px;
}
.qg-generic-tutorial-hero p strong {
  color: #f8fafc;
  font-weight: 900;
}
.qg-generic-tutorial-grid {
  align-items: start;
}
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-grid {
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1fr);
  gap: 12px;
}
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-lesson,
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-practice {
  min-width: 0;
}
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-lesson .qg-tutorial-copy {
  padding: 12px;
}
.qg-generic-tutorial-lesson .qg-tutorial-step {
  cursor: pointer;
}
.qg-generic-tutorial-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qg-generic-tutorial-tab {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 8px;
  background: rgba(15, 23, 42, .62);
  color: #dbeafe;
  font-weight: 900;
}
.qg-generic-tutorial-tab.is-active,
.qg-generic-tutorial-tab:hover {
  border-color: rgba(34, 211, 238, .78);
  background: rgba(34, 211, 238, .18);
  color: #f8fafc;
}
.qg-generic-tutorial-stage {
  display: grid;
  min-height: 360px;
}
.qg-generic-step-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 0 0;
}
.qg-generic-step-status {
  min-width: 0;
  color: #a7b4c6;
  font-size: .86rem;
  font-weight: 800;
  text-align: center;
}
.qg-generic-step-nav button:disabled {
  cursor: not-allowed;
  opacity: .45;
  filter: saturate(.65);
}
.qg-generic-step-surface {
  display: grid;
  gap: 12px;
}
.qg-generic-step-surface[hidden] {
  display: none !important;
}
.qg-generic-step-copy {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(15, 23, 42, .46);
}
.qg-generic-step-copy > span {
  color: #67e8f9;
  font-size: .74rem;
  font-weight: 900;
}
.qg-generic-step-copy h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 900;
}
.qg-generic-step-copy p,
.qg-generic-step-body {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.68;
}
.qg-generic-step-body p {
  margin: 0;
}
.qg-generic-tutorial-practice .qg-game-surface {
  margin: 0;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(2, 6, 23, .56);
}
.qg-generic-tutorial-practice .qg-game-surface-head h3 {
  color: #f8fafc;
}
.qg-generic-tutorial-practice .qg-game-surface-frame,
.qg-generic-tutorial-practice .qg-game-surface-mount {
  min-height: 280px;
}
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-stage {
  min-height: 0;
}
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-practice .qg-game-surface-frame,
.qg-generic-tutorial-shell--embed .qg-generic-tutorial-practice .qg-game-surface-mount {
  min-height: 220px;
}
.qg-generic-step-empty {
  min-height: 220px;
}
.qg-generic-step-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: .84rem;
}
.qg-generic-step-note code {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(34, 211, 238, .12);
  color: #a5f3fc;
  font-weight: 900;
}
@media (max-width: 640px) {
  .qg-generic-step-nav {
    grid-template-columns: 1fr 1fr;
  }
  .qg-generic-step-status {
    grid-column: 1 / -1;
    order: -1;
    text-align: left;
  }
}

.qg-game-learning-center {
  display: grid;
  gap: 16px;
}

/* Size learning chapters by their labels and wrap only when the row is truly full. */
.qg-learning-chapter-menu {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px !important;
  width: 100%;
}

.qg-learning-chapter-menu a {
  flex: 1 1 auto;
  justify-content: center;
  min-width: max-content;
  height: 100%;
  gap: 6px !important;
  padding-inline: 8px !important;
  text-align: center;
  line-height: 1.35;
  white-space: nowrap;
}

.qg-learning-chapter-menu a span {
  white-space: nowrap;
}

/* Rule names are content, so keep them outside fixed decorative piece shapes. */
.qg-shogi-rule-row.qg-shogi-rule-row--readable {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 7px;
  min-height: 0;
}

.qg-shogi-rule-piece-label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid #c98219;
  border-radius: 999px;
  clip-path: none;
  background: linear-gradient(135deg, #fff7d6, #f4bd54);
  color: #3b2508;
  box-shadow: 0 4px 12px rgba(154, 90, 25, .18);
  font-size: .84rem;
  font-weight: 950;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.qg-shogi-rule-piece-label::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #9a5a19;
  transform: rotate(45deg);
}

.qg-shogi-rule-row.qg-shogi-rule-row--readable > .qg-shogi-rule-move-title {
  display: block;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.qg-shogi-rule-row.qg-shogi-rule-row--readable > .qg-shogi-rule-detail {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Shared visual language for the rules catalog and the learning-top cast. */
.qg-notation-guide {
  display: grid;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 14px;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .14), transparent 38%),
    linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(5, 16, 30, .96));
  color: #f8fafc;
}

.qg-notation-guide-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qg-notation-guide-head > div {
  min-width: 0;
}

.qg-notation-guide-head h2 {
  margin: 3px 0 0;
  color: #f8fafc;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 950;
}

.qg-notation-guide-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, .4);
  border-radius: 10px;
  background: rgba(34, 211, 238, .12);
  color: #67e8f9;
}

.qg-notation-guide-pairs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.qg-notation-guide-pairs > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(2, 6, 23, .45);
}

.qg-notation-guide-pairs > article > span:not(.qg-notation-example) {
  grid-column: 1 / -1;
  color: #94a3b8;
  font-size: .7rem;
  font-weight: 800;
}

.qg-notation-guide-pairs strong {
  min-width: 0;
  color: #e2e8f0;
  overflow-wrap: anywhere;
}

.qg-notation-guide code {
  align-self: center;
  padding: 3px 7px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-radius: 6px;
  background: rgba(250, 204, 21, .1);
  color: #fde68a;
  font-size: .82rem;
  font-weight: 900;
  white-space: nowrap;
}

.qg-notation-example {
  align-self: center;
  padding: 3px 7px;
  border: 1px solid rgba(34, 211, 238, .26);
  border-radius: 6px;
  background: rgba(34, 211, 238, .1);
  color: #f8fafc;
  font-size: .92rem;
  font-weight: 950;
  white-space: nowrap;
}

.qg-notation-guide-pairs > i {
  color: #67e8f9;
}

.qg-notation-guide > p {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0;
  color: #cbd5e1;
  font-size: .78rem;
  line-height: 1.5;
}

.qg-notation-guide > p i {
  margin-top: .2em;
  color: #67e8f9;
}

@media (max-width: 560px) {
  .qg-notation-guide-pairs {
    grid-template-columns: minmax(0, 1fr);
  }

  .qg-notation-guide-pairs > i {
    transform: rotate(90deg);
    justify-self: center;
  }

  .qg-notation-guide-pairs > article {
    grid-template-columns: minmax(0, 1fr);
  }

  .qg-notation-guide code {
    justify-self: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.qg-piece-catalog,
.qg-learning-cast {
  --qg-catalog-accent: #facc15;
  min-width: 0;
  border: 1px solid rgba(94, 234, 212, .22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .11), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(5, 16, 30, .96));
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.qg-piece-catalog {
  display: grid;
  gap: 14px;
  margin: 0 14px 4px;
  padding: 14px;
}

.qg-piece-catalog-head,
.qg-learning-cast-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.qg-piece-catalog-head > div,
.qg-learning-cast-head > div {
  min-width: 0;
}

.qg-piece-catalog-head h2,
.qg-learning-cast-head h2 {
  margin: 4px 0 5px;
  color: #f8fafc;
  font-size: clamp(1.15rem, 2.2vw, 1.48rem);
  font-weight: 950;
}

.qg-piece-catalog-head p,
.qg-learning-cast-head p {
  max-width: 68ch;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.6;
}

.qg-piece-catalog-total,
.qg-learning-cast-note {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(250, 204, 21, .35);
  border-radius: 999px;
  background: rgba(250, 204, 21, .1);
  color: #fde68a;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
}

.qg-piece-catalog-groups {
  display: grid;
  gap: 12px;
}

.qg-piece-catalog-group {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(2, 6, 23, .38);
}

.qg-piece-catalog-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qg-piece-catalog-group > header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: .96rem;
  font-weight: 950;
}

.qg-piece-catalog-group > header span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34, 211, 238, .1);
  color: #a5f3fc;
  font-size: .7rem;
  font-weight: 900;
  white-space: nowrap;
}

.qg-piece-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 7px;
}

.qg-piece-catalog-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 62px;
  padding: 7px;
  border: 1px solid rgba(203, 213, 225, .16);
  border-top-color: var(--qg-catalog-accent, #facc15);
  border-radius: 7px;
  background: rgba(15, 23, 42, .76);
}

.qg-piece-catalog-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qg-piece-catalog-copy strong {
  color: #f8fafc;
  font-size: .78rem;
  font-weight: 950;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.qg-piece-catalog-copy small {
  color: #94a3b8;
  font-size: .67rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.qg-catalog-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 48px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid var(--qg-catalog-accent, #facc15);
  border-radius: 8px;
  background: linear-gradient(155deg, #fff7d6, #e8b44e);
  color: #111827;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .24);
}

.qg-catalog-visual b {
  display: block;
  max-width: 100%;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.qg-catalog-visual small {
  position: absolute;
  top: 3px;
  left: 4px;
  color: color-mix(in srgb, var(--qg-catalog-accent, #facc15) 78%, #111827);
  font-size: .5rem;
  font-weight: 950;
  line-height: 1;
}

.qg-catalog-visual--piece {
  clip-path: polygon(50% 0, 92% 20%, 84% 100%, 16% 100%, 8% 20%);
  border-radius: 3px 3px 8px 8px;
}

.qg-catalog-visual--card,
.qg-catalog-visual--hanafuda {
  height: 54px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--qg-catalog-accent) 22%, white) 0 28%, transparent 29%),
    linear-gradient(150deg, #fff, #f3efe5);
}

.qg-catalog-visual--hanafuda::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--qg-catalog-accent);
  opacity: .28;
}

.qg-catalog-visual--tile {
  height: 52px;
  background: linear-gradient(155deg, #fffef4, #dcebe2);
  box-shadow: inset -4px -5px 0 rgba(15, 118, 110, .18), 0 7px 15px rgba(0, 0, 0, .24);
}

.qg-catalog-visual--role {
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--qg-catalog-accent) 34%, white), transparent 36%),
    linear-gradient(145deg, #1e293b, #020617);
  color: #fff;
}

.qg-catalog-visual--tile b {
  font-family: "Noto Sans Symbols 2", "Apple Symbols", sans-serif;
  font-size: 1.55rem;
}

.qg-catalog-visual--stone-dark,
.qg-catalog-visual--stone-light,
.qg-catalog-visual--checker,
.qg-catalog-visual--checker-king,
.qg-catalog-visual--seed {
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 999px;
}

.qg-catalog-visual--stone-dark,
.qg-catalog-visual--checker {
  background: radial-gradient(circle at 34% 28%, #64748b, #020617 72%);
  color: #fff;
}

.qg-catalog-visual--stone-light {
  background: radial-gradient(circle at 34% 28%, #fff, #cbd5e1 72%);
  color: #0f172a;
}

.qg-catalog-visual--checker {
  background: radial-gradient(circle at 34% 28%, #fca5a5, #b91c1c 72%);
}

.qg-catalog-visual--checker-king {
  background: radial-gradient(circle at 34% 28%, #fde68a, #b45309 72%);
  color: #fff7ed;
}

.qg-catalog-visual--seed {
  width: 48px;
  border-radius: 52% 48% 55% 45%;
  background: linear-gradient(145deg, #fde68a, #92400e);
}

.qg-catalog-visual--cube {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: linear-gradient(145deg, #fff, #cbd5e1);
  box-shadow: inset -6px -6px 0 rgba(51, 65, 85, .16), 0 7px 15px rgba(0, 0, 0, .24);
}

.qg-catalog-visual--pit {
  width: 50px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #1e293b 0 43%, #a16207 46% 72%, #f59e0b 76%);
  color: #fff;
}

.qg-learning-cast {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.qg-learning-cast-stage {
  position: relative;
  min-width: 0;
  min-height: 274px;
}

.qg-learning-cast-card {
  position: relative;
  display: none;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  min-width: 0;
  min-height: 274px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, .18);
  border-top: 3px solid var(--qg-catalog-accent, #facc15);
  border-radius: 9px;
  background: rgba(15, 23, 42, .86);
  animation: qg-learning-cast-enter .28s ease both;
}

.qg-learning-cast-card.is-active {
  display: grid;
}

@keyframes qg-learning-cast-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .qg-learning-cast-card {
    animation: none;
  }
}

.qg-learning-cast-portrait {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--qg-catalog-accent) 26%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(2, 6, 23, .46));
}

.qg-learning-cast-portrait::before,
.qg-learning-cast-portrait::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 1px;
  background: var(--qg-catalog-accent);
  opacity: .36;
}

.qg-learning-cast-portrait::before { transform: rotate(36deg); }
.qg-learning-cast-portrait::after { transform: rotate(-36deg); }

.qg-learning-cast-portrait .qg-catalog-visual {
  z-index: 1;
  width: 112px;
  height: 132px;
  font-size: 1.6rem;
  transform: translateY(2px) rotate(-2deg);
  box-shadow: 0 15px 24px rgba(0, 0, 0, .34), 0 0 24px color-mix(in srgb, var(--qg-catalog-accent) 24%, transparent);
}

.qg-learning-cast-portrait .qg-catalog-visual b {
  font-size: 2.25rem;
}

.qg-learning-cast-portrait .qg-catalog-visual--card,
.qg-learning-cast-portrait .qg-catalog-visual--hanafuda,
.qg-learning-cast-portrait .qg-catalog-visual--tile {
  width: 96px;
  height: 136px;
}

.qg-learning-cast-portrait .qg-catalog-visual--role {
  width: 122px;
  height: 122px;
  border-width: 4px;
}

.qg-learning-cast-portrait .qg-catalog-visual--role b {
  padding: 8px;
  font-size: 1.55rem;
  line-height: 1.15;
}

.qg-learning-cast-portrait .qg-catalog-visual--stone-dark,
.qg-learning-cast-portrait .qg-catalog-visual--stone-light,
.qg-learning-cast-portrait .qg-catalog-visual--checker,
.qg-learning-cast-portrait .qg-catalog-visual--checker-king {
  width: 104px;
  height: 104px;
}

.qg-learning-cast-portrait .qg-catalog-visual--seed {
  width: 124px;
  height: 78px;
}

.qg-learning-cast-portrait .qg-catalog-visual--pit {
  width: 132px;
  height: 78px;
}

.qg-learning-cast-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 24px;
}

.qg-learning-cast-role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.qg-learning-cast-role {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qg-catalog-accent) 16%, transparent);
  color: color-mix(in srgb, var(--qg-catalog-accent) 76%, white);
  font-size: .67rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.qg-learning-cast-role-note {
  color: #94a3b8;
  font-size: .72rem;
  font-weight: 900;
}

.qg-learning-cast-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 950;
  overflow-wrap: anywhere;
}

.qg-learning-cast-copy p {
  margin: 0;
  color: #cbd5e1;
  font-size: .95rem;
  line-height: 1.65;
}

.qg-learning-cast-copy p b {
  display: inline-block;
  margin-right: 5px;
  color: #67e8f9;
  font-size: .78rem;
}

.qg-learning-cast-strength {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: #94a3b8;
  font-size: .74rem;
  font-weight: 900;
}

.qg-learning-cast-strength strong {
  color: #f8fafc;
  font-size: .76rem;
}

.qg-learning-cast-meter {
  display: grid;
  grid-template-columns: repeat(5, minmax(6px, 1fr));
  gap: 3px;
}

.qg-learning-cast-meter i {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .22);
}

.qg-learning-cast-meter i.is-on {
  background: var(--qg-catalog-accent, #facc15);
  box-shadow: 0 0 8px color-mix(in srgb, var(--qg-catalog-accent) 54%, transparent);
}

.qg-learning-cast-disclaimer {
  color: #64748b;
  font-size: .68rem;
  line-height: 1.45;
}

.qg-learning-cast-controls {
  display: grid;
  grid-template-columns: auto minmax(124px, 1fr) auto auto;
  gap: 9px;
  align-items: center;
}

.qg-learning-cast-controls .qg-action-btn,
.qg-learning-cast-controls .qg-primary-action {
  justify-content: center;
  margin: 0;
}

.qg-learning-cast-status {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  color: #94a3b8;
  font-size: .8rem;
  font-weight: 900;
}

.qg-learning-cast-status strong {
  color: #fde68a;
  font-size: 1.12rem;
}

.qg-learning-cast-status small {
  min-width: 0;
  margin-left: 8px;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-learning-cast-toggle[data-running="0"] {
  border-color: rgba(94, 234, 212, .44);
  color: #99f6e4;
}

.qg-learning-cast-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
}

.qg-learning-cast-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #facc15);
  transition: width .25s ease;
}

.qg-learning-cast-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(2, 6, 23, .38);
}

.qg-learning-cast-picker > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cbd5e1;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.qg-learning-cast-picker select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid rgba(94, 234, 212, .28);
  border-radius: 7px;
  background: #0f172a;
  color: #f8fafc;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
}

.qg-learning-chapter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(15, 23, 42, .76);
}

.qg-learning-chapter-actions .qg-action-btn,
.qg-learning-chapter-actions .qg-primary-action {
  margin: 0;
}

@media (max-width: 980px) {
  .qg-generic-tutorial-stage {
    min-height: 0;
  }
  .qg-generic-tutorial-shell--embed .qg-generic-tutorial-grid,
  .qg-generic-tutorial-shell--embed .qg-beginner-grid--web {
    grid-template-columns: 1fr;
  }
  .qg-generic-tutorial-embed-head {
    align-items: stretch;
    flex-direction: column;
  }
  .qg-generic-tutorial-embed-head .qg-shogi-rules-launcher--button {
    margin: 0 14px 14px;
  }
  .qg-learning-chapter-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .qg-learning-chapter-actions .qg-action-btn,
  .qg-learning-chapter-actions .qg-primary-action {
    justify-content: center;
  }
  .qg-learning-cast-card {
    grid-template-columns: minmax(180px, .64fr) minmax(0, 1.36fr);
  }
}

@media (max-width: 640px) {
  .qg-learning-chapter-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qg-learning-chapter-menu a {
    min-width: 0;
    white-space: normal;
  }
  .qg-learning-chapter-menu a span {
    white-space: normal;
  }
  .qg-piece-catalog,
  .qg-learning-cast {
    padding: 12px;
  }
  .qg-piece-catalog {
    margin-inline: 10px;
  }
  .qg-piece-catalog-head,
  .qg-learning-cast-head {
    flex-direction: column;
    gap: 10px;
  }
  .qg-piece-catalog-total,
  .qg-learning-cast-note {
    white-space: normal;
  }
  .qg-piece-catalog-group > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .qg-piece-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qg-piece-catalog-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }
  .qg-piece-catalog-item .qg-catalog-visual {
    transform: scale(.9);
    transform-origin: center;
  }
  .qg-learning-cast-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 190px minmax(0, 1fr);
  }
  .qg-learning-cast-copy {
    padding: 16px;
  }
  .qg-learning-cast-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .qg-learning-cast-toggle {
    grid-column: 1 / -1;
  }
  .qg-learning-cast-status small {
    display: none;
  }
  .qg-learning-cast-picker {
    grid-template-columns: minmax(0, 1fr);
  }
  .qg-learning-cast-picker > span {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   QuickGamesArena 極意 reader — shared shell, Shogi scroll manuscript theme
   -------------------------------------------------------------------------- */
.qg-shogi-site--gokui {
  --qg-gokui-ink: #241b12;
  --qg-gokui-muted: #6d5841;
  --qg-gokui-paper: #efe0bd;
  --qg-gokui-paper-deep: #ddc491;
  --qg-gokui-vermilion: #9f2f20;
  --qg-gokui-gold: #c49a45;
  --qg-gokui-lacquer: #21140f;
}

.qg-shogi-site--gokui .qg-shogi-page-head {
  border-color: rgba(196, 154, 69, .32);
  background:
    linear-gradient(90deg, rgba(13, 9, 7, .96), rgba(36, 24, 15, .76)),
    var(--qg-shogi-head-image, url('/static/games/shogi_banner.webp')),
    linear-gradient(135deg, #120c08, #3f2715);
  background-position: var(--qg-shogi-head-position, 0% 100%);
  background-size: var(--qg-shogi-head-size, cover);
}

.qg-shogi-site--gokui .qg-shogi-page-head .qg-kicker,
.qg-shogi-site--gokui .qg-shogi-page-head h1 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.qg-gokui {
  --qg-gokui-ink: #241b12;
  --qg-gokui-muted: #6d5841;
  --qg-gokui-paper: #efe0bd;
  --qg-gokui-paper-deep: #ddc491;
  --qg-gokui-vermilion: #9f2f20;
  --qg-gokui-gold: #c49a45;
  --qg-gokui-lacquer: #21140f;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(18px, 3vw, 34px);
  min-width: 0;
  padding: clamp(12px, 2.6vw, 30px);
  overflow: clip;
  border: 1px solid rgba(196, 154, 69, .28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 4%, rgba(196, 154, 69, .15), transparent 26%),
    radial-gradient(circle at 92% 28%, rgba(122, 62, 26, .16), transparent 31%),
    linear-gradient(135deg, rgba(14, 9, 7, .98), rgba(34, 21, 13, .98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .34);
  color: var(--qg-gokui-ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.qg-gokui::before,
.qg-gokui::after {
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(196, 154, 69, .13);
  border-radius: 50%;
  content: "";
}

.qg-gokui::before { top: -148px; left: -118px; }
.qg-gokui::after { right: -132px; bottom: 12%; }

.qg-gokui-cover {
  position: relative;
  display: grid;
  grid-template-columns: clamp(24px, 4vw, 42px) minmax(0, 920px) clamp(24px, 4vw, 42px);
  justify-content: center;
  align-items: stretch;
  width: min(100%, 1000px);
  min-height: clamp(390px, 52vw, 560px);
  margin: 0 auto;
  filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .38));
}

.qg-gokui-cover-shadow {
  position: absolute;
  right: 5%;
  bottom: -18px;
  left: 5%;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  filter: blur(16px);
}

.qg-gokui-scroll-rod {
  position: relative;
  z-index: 3;
  margin-block: -10px;
  border: 1px solid rgba(239, 210, 139, .25);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #100a07 0 16%, #70431f 42%, #2b180d 70%, #0c0806 100%);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .28),
    0 6px 16px rgba(0, 0, 0, .45);
}

.qg-gokui-scroll-rod::before,
.qg-gokui-scroll-rod::after {
  position: absolute;
  left: 50%;
  width: 155%;
  height: 24px;
  border: 1px solid #9d713b;
  border-radius: 50%;
  background: radial-gradient(circle, #c79950 0 15%, #5b351b 44%, #1c100a 76%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .42);
  content: "";
  transform: translateX(-50%);
}

.qg-gokui-scroll-rod::before { top: -7px; }
.qg-gokui-scroll-rod::after { bottom: -7px; }

.qg-gokui-cover-paper {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  min-width: 0;
  padding: clamp(38px, 7vw, 78px) clamp(30px, 7vw, 86px);
  overflow: hidden;
  border-block: 2px solid rgba(120, 74, 30, .44);
  background:
    linear-gradient(90deg, rgba(90, 53, 20, .15), transparent 8% 92%, rgba(90, 53, 20, .18)),
    repeating-linear-gradient(0deg, rgba(80, 56, 26, .032) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 72% 20%, rgba(102, 66, 24, .09), transparent 22%),
    linear-gradient(135deg, #f3e7c8, #e4cd9f 72%, #d3b47d);
  box-shadow: inset 0 0 56px rgba(90, 51, 17, .24);
  text-align: center;
  transform-origin: center;
  transition: clip-path .9s cubic-bezier(.2, .76, .2, 1), opacity .55s ease, transform .9s cubic-bezier(.2, .76, .2, 1);
}

.qg-gokui[data-qg-gokui-state="closed"] .qg-gokui-cover-paper {
  clip-path: inset(0 43% round 1px);
  opacity: .48;
  transform: scaleX(.34);
}

.qg-gokui[data-qg-gokui-state="open"] .qg-gokui-cover-paper {
  clip-path: inset(0);
  opacity: 1;
  transform: scaleX(1);
}

.qg-gokui-cover-paper::before,
.qg-gokui-cover-paper::after {
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(81, 47, 18, .3) 0 5px, transparent 5px 9px);
  content: "";
}

.qg-gokui-cover-paper::before { left: 22px; }
.qg-gokui-cover-paper::after { right: 22px; }

.qg-gokui-cover-kicker {
  position: relative;
  z-index: 2;
  color: #7e3a29;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.qg-gokui-artifact-label {
  position: relative;
  z-index: 2;
  margin-top: -7px;
  color: rgba(83, 55, 28, .75);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.qg-gokui-cover h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #24170f;
  font-size: clamp(2.5rem, 7vw, 5.3rem);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.14;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .26);
  white-space: nowrap;
  word-break: keep-all;
}

/* Title-length variants keep every secret-book title on one deliberate line. */
.qg-gokui[data-qg-game-gokui="chess"] .qg-gokui-cover h2,
.qg-gokui[data-qg-game-gokui="reversi"] .qg-gokui-cover h2,
.qg-gokui[data-qg-game-gokui="mancala"] .qg-gokui-cover h2,
.qg-gokui[data-qg-game-gokui="poker"] .qg-gokui-cover h2 {
  font-size: clamp(1.8rem, 5vw, 4.9rem);
  letter-spacing: .045em;
}

.qg-gokui[data-qg-game-gokui="xiangqi"] .qg-gokui-cover h2,
.qg-gokui[data-qg-game-gokui="checkers"] .qg-gokui-cover h2,
.qg-gokui[data-qg-game-gokui="latrunculi"] .qg-gokui-cover h2 {
  font-size: clamp(1.5rem, 4.3vw, 4.35rem);
  letter-spacing: .025em;
}

.qg-gokui[data-qg-game-gokui="backgammon"] .qg-gokui-cover h2 {
  font-size: clamp(1.28rem, 3.55vw, 3.7rem);
  letter-spacing: .015em;
}

.qg-gokui-cover p {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 0;
  color: #503d2a;
  font-size: clamp(.95rem, 2vw, 1.14rem);
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.9;
}

.qg-gokui-piece-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(86, 47, 17, .055);
  font-size: clamp(16rem, 38vw, 31rem);
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.qg-gokui-cloud {
  position: absolute;
  width: 170px;
  height: 70px;
  border: 2px solid rgba(120, 73, 31, .1);
  border-radius: 50%;
}

.qg-gokui-cloud--one { top: 44px; left: -72px; }
.qg-gokui-cloud--two { right: -82px; bottom: 52px; transform: scale(.78); }

.qg-gokui-cover-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.qg-gokui-cover-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 11px;
  border: 1px solid rgba(97, 56, 22, .22);
  border-radius: 999px;
  background: rgba(255, 249, 229, .34);
  color: #6b4b2b;
  font-size: .74rem;
  font-weight: 800;
}

.qg-gokui-cover-meta b { color: #8c2f23; font-size: 1rem; }

.qg-gokui-cover-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.qg-gokui-open,
.qg-gokui-index-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 4px;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
}

.qg-gokui-open {
  border: 1px solid #661c16;
  background: linear-gradient(180deg, #ad3a29, #7d211b);
  box-shadow: 0 5px 12px rgba(91, 30, 18, .24);
  color: #fff8e8;
}

.qg-gokui-index-link {
  border: 1px solid rgba(86, 50, 20, .33);
  background: rgba(255, 249, 230, .35);
  color: #4c311c;
}

.qg-gokui-open:hover,
.qg-gokui-index-link:hover { filter: brightness(1.07); }

.qg-gokui-seal {
  position: absolute;
  right: clamp(28px, 6vw, 68px);
  bottom: clamp(26px, 5vw, 56px);
  display: grid;
  width: 66px;
  aspect-ratio: 1;
  place-items: center;
  border: 4px double rgba(143, 36, 28, .7);
  color: rgba(143, 36, 28, .78);
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.1;
  transform: rotate(-5deg);
  writing-mode: vertical-rl;
}

.qg-gokui-reading-progress {
  position: sticky;
  z-index: 20;
  top: 94px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
}

.qg-gokui-reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8e291f, #e0b65a);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.qg-gokui-chapter-nav {
  position: sticky;
  z-index: 18;
  top: 102px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(222, 187, 111, .26);
  border-radius: 11px;
  background: rgba(25, 15, 10, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(13px);
}

.qg-gokui-chapter-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e7c982;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.qg-gokui-chapter-nav > div {
  display: flex;
  gap: 7px;
  min-width: 0;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-color: rgba(224, 182, 90, .42) transparent;
  scrollbar-width: thin;
}

.qg-gokui-chapter-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  max-width: 210px;
  padding: 7px 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
  background: rgba(255, 255, 255, .045);
  color: #e6d9c1;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: .74rem;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-gokui-chapter-nav a.is-active,
.qg-gokui-chapter-nav a:hover {
  border-color: rgba(224, 182, 90, .54);
  background: rgba(159, 47, 32, .31);
  color: #fff1cf;
}

.qg-gokui-chapter-nav a.is-proverbs { border-color: rgba(159, 47, 32, .34); }

.qg-gokui-reader {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid rgba(216, 174, 89, .36);
  border-radius: 8px 15px 15px 8px;
  background:
    linear-gradient(90deg, rgba(18, 9, 6, .96), rgba(75, 38, 16, .93) 4%, rgba(30, 16, 9, .98) 8%),
    #1c100a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}

.qg-gokui-binding {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding-block: 36px;
}

.qg-gokui-binding::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 5px;
  border-radius: 99px;
  background: #283548;
  box-shadow: inset 1px 0 rgba(255, 255, 255, .17), 2px 0 8px rgba(0, 0, 0, .5);
  content: "";
  transform: translateX(-50%);
}

.qg-gokui-binding span {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 10px;
  border: 3px solid #56677e;
  border-inline-width: 4px;
  border-radius: 50%;
  background: #182130;
  transform: rotate(-8deg);
}

.qg-gokui-manuscript {
  min-width: 0;
  padding: clamp(12px, 3vw, 30px);
  border: 1px solid rgba(111, 67, 26, .42);
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(90deg, rgba(82, 50, 19, .12), transparent 7% 94%, rgba(82, 50, 19, .12)),
    repeating-linear-gradient(0deg, rgba(91, 61, 29, .025) 0 1px, transparent 1px 8px),
    #e9d5a8;
  box-shadow: inset 0 0 50px rgba(86, 48, 15, .16);
}

.qg-gokui-sheet {
  position: relative;
  min-width: 0;
  margin: 0 0 24px;
  padding: clamp(24px, 4.5vw, 52px);
  border: 1px solid rgba(101, 63, 26, .25);
  background:
    radial-gradient(circle at 88% 8%, rgba(102, 58, 19, .06), transparent 18%),
    linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 8% 92%, rgba(91, 52, 18, .05)),
    rgba(245, 232, 199, .78);
  box-shadow: 0 9px 24px rgba(89, 50, 18, .12);
  scroll-margin-top: 190px;
}

.qg-gokui[data-qg-gokui-ready="true"] .qg-gokui-sheet[data-qg-gokui-section] {
  display: none;
}

.qg-gokui[data-qg-gokui-ready="true"] .qg-gokui-sheet[data-qg-gokui-section].is-current {
  display: block;
  animation: qg-gokui-page-enter .38s ease both;
}

@keyframes qg-gokui-page-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.qg-gokui-sheet:last-child { margin-bottom: 0; }

.qg-gokui-sheet::after {
  position: absolute;
  right: 13px;
  bottom: 11px;
  width: 42px;
  height: 42px;
  border-right: 1px solid rgba(128, 53, 34, .16);
  border-bottom: 1px solid rgba(128, 53, 34, .16);
  content: "";
}

.qg-gokui-sheet > p > a[id]:only-child,
.qg-gokui-sheet > a[id]:empty {
  display: block;
  height: 0;
  scroll-margin-top: 190px;
}

.qg-gokui-sheet h2,
.qg-gokui-sheet h3,
.qg-gokui-sheet h4 {
  color: #2d1d11;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.qg-gokui-sheet h2 {
  margin: 0 0 30px;
  padding: 7px 0 12px 18px;
  border-left: 5px solid var(--qg-gokui-vermilion);
  border-bottom: 1px solid rgba(111, 64, 25, .24);
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.5;
}

.qg-gokui-sheet--chapter h2::before {
  display: block;
  margin-bottom: 4px;
  color: #9d6a31;
  content: "兵法秘伝";
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .24em;
}

.qg-gokui-sheet h3 {
  margin: 34px 0 12px;
  font-size: clamp(1.14rem, 2.3vw, 1.45rem);
  font-weight: 800;
  line-height: 1.65;
}

.qg-gokui-sheet h3::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border: 1px solid #8e291f;
  background: rgba(142, 41, 31, .14);
  content: "";
  transform: rotate(45deg) translateY(-2px);
}

.qg-gokui-sheet p,
.qg-gokui-sheet li,
.qg-gokui-sheet td,
.qg-gokui-sheet th {
  color: var(--qg-gokui-ink);
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
}

.qg-gokui-sheet p {
  margin: 0 0 1.2em;
  line-height: 2.05;
  text-align: justify;
  text-justify: inter-ideograph;
}

.qg-gokui-sheet ul,
.qg-gokui-sheet ol {
  display: grid;
  gap: 8px;
  margin: 16px 0 24px;
  padding-left: 1.55em;
}

.qg-gokui-sheet li { line-height: 1.75; }

.qg-gokui-sheet hr {
  width: min(190px, 42%);
  height: 13px;
  margin: 34px auto;
  border: 0;
  background:
    radial-gradient(circle, #8f3025 0 3px, transparent 4px) center / 13px 13px no-repeat,
    linear-gradient(90deg, transparent, rgba(105, 58, 22, .42), transparent) center / 100% 1px no-repeat;
}

.qg-gokui-internal-link {
  color: #7b251d;
  font-weight: 800;
  text-decoration-color: rgba(123, 37, 29, .42);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.qg-gokui-internal-link:hover { color: #a23225; }

.qg-gokui-maxim {
  position: relative;
  margin: 26px 0 30px !important;
  padding: 18px 22px 18px 72px;
  border: 1px solid rgba(113, 44, 31, .35);
  border-left: 5px solid #8e291f;
  background:
    linear-gradient(90deg, rgba(151, 47, 32, .08), transparent),
    rgba(255, 248, 226, .42);
  box-shadow: inset 0 0 20px rgba(91, 48, 15, .06);
  color: #342116 !important;
  font-size: clamp(1.02rem, 1.7vw, 1.16rem) !important;
  font-weight: 700;
  line-height: 1.85 !important;
  text-align: left !important;
}

.qg-gokui-maxim::before {
  position: absolute;
  top: 50%;
  left: 18px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid rgba(142, 41, 31, .68);
  color: #8e291f;
  content: "訣";
  font-size: 1.08rem;
  font-weight: 900;
  transform: translateY(-50%) rotate(-4deg);
}

.qg-gokui-maxim strong { color: #84261e; }

.qg-gokui-table-wrap {
  max-width: 100%;
  margin: 20px 0 26px;
  overflow-x: auto;
  border: 1px solid rgba(91, 53, 20, .3);
  background: rgba(255, 248, 226, .4);
}

.qg-gokui-table {
  width: 100%;
  min-width: 590px;
  border-collapse: collapse;
}

.qg-gokui-table th,
.qg-gokui-table td {
  padding: 11px 13px;
  border-right: 1px solid rgba(91, 53, 20, .18);
  border-bottom: 1px solid rgba(91, 53, 20, .18);
  line-height: 1.6;
  text-align: left;
}

.qg-gokui-table th {
  background: rgba(103, 51, 27, .1);
  color: #5f241b;
  font-weight: 900;
}

.qg-gokui-sheet--overview {
  border-top: 4px solid #8e291f;
  background:
    linear-gradient(135deg, rgba(146, 57, 34, .1), transparent 42%),
    rgba(245, 232, 199, .82);
  font-size: 1.05rem;
}

.qg-gokui-sheet--guide h2 { border-left-color: #8a6a32; }

.qg-gokui-volume-pager {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 4px 2px;
  color: #d8bd82;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

.qg-gokui-volume-pager > span {
  overflow: hidden;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qg-gokui-volume-pager button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(222, 187, 111, .3);
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  color: #f0d999;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}

.qg-gokui-volume-pager button:hover:not(:disabled) { background: rgba(159, 47, 32, .26); }
.qg-gokui-volume-pager button:disabled { opacity: .28; cursor: default; }

.qg-gokui-sheet--proverbs {
  background:
    radial-gradient(circle at 91% 4%, rgba(151, 47, 32, .11), transparent 19%),
    rgba(242, 224, 185, .86);
}

.qg-gokui-sheet--proverbs h3 {
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid rgba(112, 66, 26, .28);
  border-left: 4px solid #8e291f;
  background: rgba(255, 248, 225, .34);
}

.qg-gokui-sheet--proverbs h3::before {
  width: auto;
  height: auto;
  margin-right: 10px;
  border: 0;
  background: none;
  color: #8e291f;
  content: "格";
  font-size: .83rem;
  transform: none;
}

.qg-gokui-sheet--proverbs h3 + p {
  margin: -4px 0 22px;
  padding: 0 16px 16px;
  border-right: 1px solid rgba(112, 66, 26, .2);
  border-bottom: 1px solid rgba(112, 66, 26, .2);
  border-left: 1px solid rgba(112, 66, 26, .2);
  background: rgba(255, 248, 225, .22);
}

.qg-gokui-sheet p.qg-gokui-anchor,
.qg-gokui-sheet--proverbs h3 + p.qg-gokui-anchor {
  width: 0;
  height: 0;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: none;
}

.qg-gokui-sheet--proverbs h4 {
  margin: 28px 0 10px;
  padding: 18px 0 8px;
  border-top: 1px solid rgba(112, 66, 26, .2);
  color: #4a2618;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.qg-gokui-colophon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 20px 22px;
  border: 1px solid rgba(222, 187, 111, .25);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: #e8dbc1;
}

.qg-gokui-colophon > span {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(224, 182, 90, .48);
  color: #e6c878;
  font-size: 1.25rem;
  font-weight: 900;
  transform: rotate(45deg);
}

.qg-gokui-colophon > span::first-letter { transform: rotate(-45deg); }
.qg-gokui-colophon strong { color: #fff0ca; font-size: 1.02rem; }
.qg-gokui-colophon p { margin: 4px 0 0; color: #bcae95; font-size: .82rem; }
.qg-gokui-colophon a { color: #e6c878; font-size: .82rem; font-weight: 900; }

.qg-gokui-back-to-top {
  position: fixed;
  z-index: 30;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(231, 201, 130, .48);
  border-radius: 50%;
  background: rgba(31, 18, 12, .92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  color: #efd797;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

.qg-gokui-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .qg-gokui {
    gap: 16px;
    padding: 8px;
    border-radius: 12px;
  }

  .qg-gokui-cover {
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    min-height: 430px;
  }

  .qg-gokui-scroll-rod { margin-block: 0; }
  .qg-gokui-scroll-rod::before,
  .qg-gokui-scroll-rod::after { width: 145%; height: 16px; }

  .qg-gokui-cover-paper { padding: 52px 25px 64px; }
  .qg-gokui-cover-paper::before { left: 12px; }
  .qg-gokui-cover-paper::after { right: 12px; }
  .qg-gokui-seal { right: 25px; bottom: 20px; width: 52px; font-size: 1rem; }

  .qg-gokui-chapter-nav {
    top: 196px;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    border-radius: 7px;
  }

  .qg-gokui-chapter-nav-label { display: none; }
  .qg-gokui-reading-progress { top: 192px; }
  .qg-gokui-chapter-nav a { max-width: 170px; }

  .qg-gokui-reader {
    grid-template-columns: 17px minmax(0, 1fr);
    padding: 7px;
    border-radius: 4px 9px 9px 4px;
  }

  .qg-gokui-binding { padding-block: 22px; }
  .qg-gokui-binding span { width: 13px; height: 7px; border-width: 2px 3px; }
  .qg-gokui-manuscript { padding: 8px; }

  .qg-gokui-sheet {
    margin-bottom: 12px;
    padding: 25px 20px;
    scroll-margin-top: 260px;
  }

  .qg-gokui-sheet > p > a[id]:only-child,
  .qg-gokui-sheet > a[id]:empty { scroll-margin-top: 260px; }

  .qg-gokui-sheet h2 {
    margin-bottom: 23px;
    padding-left: 13px;
    font-size: 1.45rem;
  }

  .qg-gokui-sheet p { text-align: left; }
  .qg-gokui-maxim { padding: 62px 17px 17px; }
  .qg-gokui-maxim::before { top: 16px; left: 17px; transform: rotate(-4deg); }

  .qg-gokui-colophon {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
  }

  .qg-gokui-colophon a { grid-column: 1 / -1; }

  .qg-gokui-volume-pager {
    grid-template-columns: 1fr 1fr;
  }

  .qg-gokui-volume-pager > span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .qg-gokui-volume-pager button { justify-content: center; }
}

@media (max-width: 420px) {
  .qg-gokui-cover { min-height: 400px; }
  .qg-gokui-cover-paper {
    gap: 10px;
    padding: 32px 20px 44px;
  }
  .qg-gokui-cover h2 { font-size: 2.35rem; }
  .qg-gokui-cover p {
    display: -webkit-box;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .qg-gokui-cover-meta span { padding: 5px 8px; }
  .qg-gokui-cover-actions { flex-direction: column; gap: 6px; width: 100%; }
  .qg-gokui-open,
  .qg-gokui-index-link { width: 100%; min-height: 44px; }
  .qg-gokui-sheet { padding: 23px 16px; }
  .qg-gokui-sheet h3 { font-size: 1.08rem; }
  .qg-gokui-sheet p,
  .qg-gokui-sheet li { font-size: .96rem; line-height: 1.9; }
  .qg-gokui-volume-pager button span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qg-gokui-cover-paper,
  .qg-gokui-back-to-top,
  .qg-gokui[data-qg-gokui-ready="true"] .qg-gokui-sheet[data-qg-gokui-section].is-current {
    transition: none !important;
    animation: none !important;
  }

  .qg-gokui[data-qg-gokui-state="closed"] .qg-gokui-cover-paper {
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   極意 reader — one reading system, twelve materially distinct artifacts
   -------------------------------------------------------------------------- */
.qg-gokui:not(.qg-gokui--shogi-scroll)[data-qg-gokui-state="closed"] .qg-gokui-cover-paper {
  clip-path: inset(0);
  opacity: .78;
  transform: translateY(9px) scale(.965);
}

.qg-gokui:not(.qg-gokui--shogi-scroll)[data-qg-gokui-state="open"] .qg-gokui-cover-paper {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
}

/* Chess — illuminated manuscript */
.qg-gokui--chess-illuminated {
  --qg-gokui-ink: #2e2318;
  --qg-gokui-vermilion: #812e35;
  background:
    radial-gradient(circle at 50% -12%, rgba(222, 186, 95, .2), transparent 35%),
    linear-gradient(135deg, #101c33, #23152d 58%, #090f1e);
  border-color: rgba(219, 182, 86, .5);
}
.qg-gokui--chess-illuminated .qg-gokui-cover {
  grid-template-columns: 13px minmax(0, 880px) 13px;
}
.qg-gokui--chess-illuminated .qg-gokui-scroll-rod {
  margin: 10px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #6c4316, #e0bb58 45%, #74501d);
}
.qg-gokui--chess-illuminated .qg-gokui-scroll-rod::before,
.qg-gokui--chess-illuminated .qg-gokui-scroll-rod::after { display: none; }
.qg-gokui--chess-illuminated .qg-gokui-cover-paper {
  border: 8px double #b28a35;
  background:
    radial-gradient(circle at 7% 9%, #9b2f38 0 9px, #d4ae4f 10px 13px, transparent 14px),
    radial-gradient(circle at 93% 91%, #31518b 0 9px, #d4ae4f 10px 13px, transparent 14px),
    linear-gradient(90deg, rgba(95, 52, 25, .11), transparent 9% 91%, rgba(95, 52, 25, .11)),
    #f1e4bd;
  box-shadow: inset 0 0 0 3px #213d74, inset 0 0 60px rgba(91, 51, 20, .2);
}
.qg-gokui--chess-illuminated .qg-gokui-cover-paper::before,
.qg-gokui--chess-illuminated .qg-gokui-cover-paper::after {
  width: 4px;
  background: linear-gradient(#b18c3c, #31518b 50%, #b18c3c);
}
.qg-gokui--chess-illuminated .qg-gokui-piece-mark { color: rgba(31, 55, 102, .075); }
.qg-gokui--chess-illuminated .qg-gokui-cover-kicker { color: #6f2430; }
.qg-gokui--chess-illuminated .qg-gokui-artifact-label { color: #79602f; }
.qg-gokui--chess-illuminated .qg-gokui-reader {
  border: 4px double #a88236;
  background: linear-gradient(90deg, #26132c, #142445 9%, #0f1b33);
}
.qg-gokui--chess-illuminated .qg-gokui-binding::before { background: #b59141; }
.qg-gokui--chess-illuminated .qg-gokui-binding span { border-color: #d1ad55; background: #263e6b; }
.qg-gokui--chess-illuminated .qg-gokui-manuscript { background: #dfcd9e; }
.qg-gokui--chess-illuminated .qg-gokui-sheet {
  border: 4px double rgba(164, 124, 43, .45);
  background: radial-gradient(circle at 94% 5%, rgba(49, 81, 139, .1), transparent 18%), #f2e5be;
}
.qg-gokui--chess-illuminated .qg-gokui-sheet h2::first-letter { color: #8b2834; font-size: 1.35em; }
.qg-gokui--chess-illuminated .qg-gokui-sheet--chapter h2::before { content: "ILLUMINATED DOCTRINE"; }

/* Go — ink accordion book */
.qg-gokui--go-ink-orihon {
  --qg-gokui-ink: #171817;
  --qg-gokui-vermilion: #a12c24;
  background:
    radial-gradient(ellipse at 18% 15%, rgba(0, 0, 0, .23), transparent 16%),
    radial-gradient(ellipse at 86% 74%, rgba(0, 0, 0, .16), transparent 20%),
    linear-gradient(145deg, #d8d8d0, #8e938e);
  border-color: rgba(15, 18, 16, .38);
}
.qg-gokui--go-ink-orihon .qg-gokui-cover { grid-template-columns: minmax(0, 920px); }
.qg-gokui--go-ink-orihon .qg-gokui-scroll-rod,
.qg-gokui--go-ink-orihon .qg-gokui-binding { display: none; }
.qg-gokui--go-ink-orihon .qg-gokui-cover-paper {
  border: 1px solid #343a37;
  border-inline: 13px solid #252a27;
  background:
    radial-gradient(ellipse at 75% 24%, rgba(10, 12, 11, .14), transparent 15%),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 1px), rgba(30, 34, 31, .14) calc(16.66% - 1px) 16.66%),
    linear-gradient(135deg, #f3f1e6, #d8d7cc);
}
.qg-gokui--go-ink-orihon .qg-gokui-piece-mark { color: rgba(0, 0, 0, .06); }
.qg-gokui--go-ink-orihon .qg-gokui-cover-kicker { color: #1e2521; letter-spacing: .45em; }
.qg-gokui--go-ink-orihon .qg-gokui-artifact-label { color: #5c625e; }
.qg-gokui--go-ink-orihon .qg-gokui-reader {
  grid-template-columns: minmax(0, 1fr);
  padding: 12px;
  border: 1px solid #202522;
  border-radius: 2px;
  background: #282d2a;
}
.qg-gokui--go-ink-orihon .qg-gokui-manuscript {
  background: repeating-linear-gradient(90deg, #e9e7dc 0 calc(16.66% - 1px), #b9bbb4 calc(16.66% - 1px) 16.66%);
}
.qg-gokui--go-ink-orihon .qg-gokui-sheet {
  background:
    radial-gradient(ellipse at 94% 10%, rgba(0, 0, 0, .055), transparent 19%),
    rgba(246, 244, 235, .86);
  border-color: rgba(25, 30, 27, .21);
}
.qg-gokui--go-ink-orihon .qg-gokui-volume-pager { grid-column: 1; }
.qg-gokui--go-ink-orihon .qg-gokui-sheet--chapter h2::before { content: "墨譜"; }

/* Xiangqi — Chinese thread-bound book */
.qg-gokui--xiangqi-threadbound {
  --qg-gokui-ink: #281a13;
  --qg-gokui-vermilion: #a22b20;
  background: linear-gradient(145deg, #182f35, #497063 50%, #14252a);
  border-color: rgba(213, 190, 126, .32);
}
.qg-gokui--xiangqi-threadbound .qg-gokui-cover { grid-template-columns: minmax(0, 900px); }
.qg-gokui--xiangqi-threadbound .qg-gokui-scroll-rod { display: none; }
.qg-gokui--xiangqi-threadbound .qg-gokui-cover-paper {
  border: 1px solid #172d33;
  border-left: 38px solid #244754;
  background:
    linear-gradient(90deg, transparent 0 25px, rgba(164, 35, 27, .5) 25px 27px, transparent 27px),
    repeating-linear-gradient(0deg, rgba(32, 61, 66, .035) 0 1px, transparent 1px 6px),
    #d9d0ad;
  box-shadow: inset 8px 0 0 rgba(231, 219, 177, .55), inset 0 0 45px rgba(32, 61, 66, .2);
}
.qg-gokui--xiangqi-threadbound .qg-gokui-cover-paper::before { left: 17px; width: 9px; background: radial-gradient(circle, #e2d7b2 0 3px, #9f2b23 4px 5px, transparent 6px) center / 9px 54px repeat-y; }
.qg-gokui--xiangqi-threadbound .qg-gokui-cover-paper::after { display: none; }
.qg-gokui--xiangqi-threadbound .qg-gokui-reader { background: linear-gradient(90deg, #1d3b45, #335c64 7%, #18343d); }
.qg-gokui--xiangqi-threadbound .qg-gokui-binding::before { width: 4px; background: #ad3428; }
.qg-gokui--xiangqi-threadbound .qg-gokui-binding span { border-color: #d6ba75; background: #9f2d23; }
.qg-gokui--xiangqi-threadbound .qg-gokui-manuscript,
.qg-gokui--xiangqi-threadbound .qg-gokui-sheet { background-color: #ddd3af; }
.qg-gokui--xiangqi-threadbound .qg-gokui-sheet--chapter h2::before { content: "象棋兵法"; }

/* Checkers — Victorian competition rulebook */
.qg-gokui--checkers-victorian-rules {
  --qg-gokui-ink: #221b17;
  --qg-gokui-vermilion: #7b252c;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #192b27, #3d171d);
  border-color: rgba(198, 165, 91, .42);
}
.qg-gokui--checkers-victorian-rules .qg-gokui-cover { grid-template-columns: minmax(0, 850px); }
.qg-gokui--checkers-victorian-rules .qg-gokui-scroll-rod { display: none; }
.qg-gokui--checkers-victorian-rules .qg-gokui-cover-paper {
  border: 10px double #b08c43;
  outline: 1px solid #29181a;
  outline-offset: -18px;
  background:
    repeating-conic-gradient(from 45deg at 50% 50%, rgba(49, 24, 28, .045) 0 25%, transparent 0 50%) 0 0 / 34px 34px,
    #d9caa5;
}
.qg-gokui--checkers-victorian-rules .qg-gokui-cover h2,
.qg-gokui--checkers-victorian-rules .qg-gokui-cover-kicker { font-family: Georgia, "Times New Roman", "Yu Mincho", serif; }
.qg-gokui--checkers-victorian-rules .qg-gokui-cover-kicker { color: #542027; }
.qg-gokui--checkers-victorian-rules .qg-gokui-reader { border: 5px double #a68444; background: #2b171b; }
.qg-gokui--checkers-victorian-rules .qg-gokui-binding::before { background: #7c5b31; }
.qg-gokui--checkers-victorian-rules .qg-gokui-manuscript { background: #cdbb91; }
.qg-gokui--checkers-victorian-rules .qg-gokui-sheet { border: 3px double rgba(87, 54, 31, .35); background-color: #e7d9b7; }
.qg-gokui--checkers-victorian-rules .qg-gokui-sheet--chapter h2::before { content: "COMPETITION MAXIM"; }

/* Reversi — black-and-white inventor folio */
.qg-gokui--reversi-inventor-folio {
  --qg-gokui-ink: #111;
  --qg-gokui-vermilion: #202020;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    #171a1d;
  background-size: 24px 24px;
  border-color: rgba(255, 255, 255, .22);
}
.qg-gokui--reversi-inventor-folio .qg-gokui-cover { grid-template-columns: minmax(0, 920px); }
.qg-gokui--reversi-inventor-folio .qg-gokui-scroll-rod { display: none; }
.qg-gokui--reversi-inventor-folio .qg-gokui-cover-paper {
  border: 2px solid #111;
  background:
    linear-gradient(90deg, transparent 74%, rgba(21, 55, 87, .12) 74% 74.3%, transparent 74.3%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(40, 75, 104, .16) 27px 28px),
    #e9e7dc;
  box-shadow: 12px 12px 0 #a9aba7, 22px 22px 0 rgba(255, 255, 255, .12);
}
.qg-gokui--reversi-inventor-folio .qg-gokui-cover-paper::before { left: auto; right: 18px; width: 70px; height: 16px; border: 2px solid #5e6260; border-radius: 12px; background: none; transform: rotate(8deg); }
.qg-gokui--reversi-inventor-folio .qg-gokui-cover-paper::after { display: none; }
.qg-gokui--reversi-inventor-folio .qg-gokui-cover-kicker { color: #151515; font-family: ui-monospace, monospace; letter-spacing: .18em; }
.qg-gokui--reversi-inventor-folio .qg-gokui-artifact-label { font-family: ui-monospace, monospace; }
.qg-gokui--reversi-inventor-folio .qg-gokui-reader { background: #111; border-color: #606468; }
.qg-gokui--reversi-inventor-folio .qg-gokui-binding::before { background: #c6c6c2; }
.qg-gokui--reversi-inventor-folio .qg-gokui-binding span { border-color: #bbb; background: #222; }
.qg-gokui--reversi-inventor-folio .qg-gokui-manuscript { background: #c7c8c3; }
.qg-gokui--reversi-inventor-folio .qg-gokui-sheet { border: 1px dashed #595d5a; background: repeating-linear-gradient(0deg, #f1f0e8 0 31px, #dce3e6 31px 32px); }
.qg-gokui--reversi-inventor-folio .qg-gokui-sheet--chapter h2::before { content: "INVENTOR'S NOTE"; }

/* Mancala — carved wooden seed box */
.qg-gokui--mancala-seed-box {
  --qg-gokui-ink: #29190e;
  --qg-gokui-vermilion: #8a3f20;
  background:
    repeating-linear-gradient(92deg, rgba(72, 31, 10, .2) 0 2px, transparent 2px 27px),
    linear-gradient(135deg, #4b2511, #a96934 52%, #3d1d0e);
  border: 5px solid #3a1b0c;
}
.qg-gokui--mancala-seed-box .qg-gokui-cover { grid-template-columns: minmax(0, 900px); }
.qg-gokui--mancala-seed-box .qg-gokui-scroll-rod { display: none; }
.qg-gokui--mancala-seed-box .qg-gokui-cover-paper {
  border: 13px ridge #8b4f26;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 8% 50%, #3d1d0e 0 8%, #7d4725 9% 12%, transparent 13%),
    radial-gradient(ellipse at 92% 50%, #3d1d0e 0 8%, #7d4725 9% 12%, transparent 13%),
    repeating-linear-gradient(4deg, rgba(76, 34, 12, .14) 0 2px, transparent 2px 20px),
    #b8793f;
  box-shadow: inset 0 0 70px rgba(48, 20, 7, .38);
}
.qg-gokui--mancala-seed-box .qg-gokui-cover-paper::before,
.qg-gokui--mancala-seed-box .qg-gokui-cover-paper::after { display: none; }
.qg-gokui--mancala-seed-box .qg-gokui-cover h2,
.qg-gokui--mancala-seed-box .qg-gokui-cover p { color: #271408; text-shadow: 0 1px rgba(255, 222, 167, .35); }
.qg-gokui--mancala-seed-box .qg-gokui-reader { border: 9px ridge #8b4f26; border-radius: 20px; background: #4a220e; }
.qg-gokui--mancala-seed-box .qg-gokui-binding::before { background: #281006; }
.qg-gokui--mancala-seed-box .qg-gokui-binding span { width: 18px; height: 18px; border: 2px solid #331406; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0a55e, #6f3517); }
.qg-gokui--mancala-seed-box .qg-gokui-manuscript { background: #af6f38; }
.qg-gokui--mancala-seed-box .qg-gokui-sheet { border-radius: 12px; background: #ead7ad; }
.qg-gokui--mancala-seed-box .qg-gokui-sheet h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); }
.qg-gokui--mancala-seed-box .qg-gokui-sheet--chapter h2::before { content: "SEED WISDOM"; }

/* Latrunculi — wax tablet */
.qg-gokui--latrunculi-wax-tablet {
  --qg-gokui-ink: #261c14;
  --qg-gokui-vermilion: #6d3324;
  background: linear-gradient(145deg, #2d1a10, #6d4225 50%, #20130c);
  border-color: #8c6139;
}
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover { grid-template-columns: minmax(0, 900px); }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-scroll-rod { display: none; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover-paper {
  border: 22px ridge #765033;
  border-radius: 7px;
  background:
    repeating-linear-gradient(4deg, rgba(255, 224, 174, .045) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 30% 35%, rgba(255, 211, 144, .09), transparent 24%),
    #3e3329;
  box-shadow: inset 0 0 55px #17110d;
}
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover h2,
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover p { color: #e4c79c; text-shadow: 1px 1px #17100c; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover-kicker,
.qg-gokui--latrunculi-wax-tablet .qg-gokui-artifact-label { color: #bd986a; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover-meta span { border-color: #957250; background: rgba(20, 14, 10, .38); color: #dbc093; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-cover-meta b { color: #f0d09e; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-reader { border: 13px ridge #765033; background: #2c2119; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-binding::before { background: #b58a58; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-manuscript { background: #4b3a2b; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-sheet { background: linear-gradient(135deg, rgba(255,255,255,.13), transparent 40%), #c79b5d; border-color: #73502e; }
.qg-gokui--latrunculi-wax-tablet .qg-gokui-sheet--chapter h2::before { content: "TABULA TACTICA"; }

/* Poker — leather ledger */
.qg-gokui--poker-leather-ledger {
  --qg-gokui-ink: #241a13;
  --qg-gokui-vermilion: #842b2f;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.055), transparent 45%),
    #0e3a2c;
  border-color: rgba(205, 170, 90, .42);
}
.qg-gokui--poker-leather-ledger .qg-gokui-cover { grid-template-columns: minmax(0, 850px); }
.qg-gokui--poker-leather-ledger .qg-gokui-scroll-rod { display: none; }
.qg-gokui--poker-leather-ledger .qg-gokui-cover-paper {
  border: 9px double #bd9952;
  border-radius: 15px 5px 5px 15px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.045), transparent 15%),
    repeating-linear-gradient(110deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px),
    #4d181b;
  box-shadow: inset 18px 0 25px rgba(0,0,0,.34), inset 0 0 0 3px #271012;
}
.qg-gokui--poker-leather-ledger .qg-gokui-cover h2,
.qg-gokui--poker-leather-ledger .qg-gokui-cover p,
.qg-gokui--poker-leather-ledger .qg-gokui-cover-kicker,
.qg-gokui--poker-leather-ledger .qg-gokui-artifact-label { color: #e0c278; }
.qg-gokui--poker-leather-ledger .qg-gokui-piece-mark { color: rgba(232, 198, 116, .065); }
.qg-gokui--poker-leather-ledger .qg-gokui-cover-meta span { border-color: #a88749; background: rgba(18,5,7,.32); color: #dec78f; }
.qg-gokui--poker-leather-ledger .qg-gokui-cover-meta b { color: #f1d487; }
.qg-gokui--poker-leather-ledger .qg-gokui-reader { border: 7px double #9b793d; background: #3b1317; }
.qg-gokui--poker-leather-ledger .qg-gokui-binding::before { background: #b99143; }
.qg-gokui--poker-leather-ledger .qg-gokui-binding span { border-color: #d5b364; background: #44202a; }
.qg-gokui--poker-leather-ledger .qg-gokui-manuscript { background: #cab382; }
.qg-gokui--poker-leather-ledger .qg-gokui-sheet { background: repeating-linear-gradient(0deg, #eadab5 0 34px, #d9c89e 34px 35px); }
.qg-gokui--poker-leather-ledger .qg-gokui-sheet--chapter h2::before { content: "TABLE LEDGER"; }

/* Backgammon — folding travel board */
.qg-gokui--backgammon-travel-board {
  --qg-gokui-ink: #261b13;
  --qg-gokui-vermilion: #7e2d2d;
  background: linear-gradient(135deg, #182c29, #755035 48%, #172824);
  border-color: rgba(211, 180, 117, .4);
}
.qg-gokui--backgammon-travel-board .qg-gokui-cover { grid-template-columns: minmax(0, 920px); }
.qg-gokui--backgammon-travel-board .qg-gokui-scroll-rod { display: none; }
.qg-gokui--backgammon-travel-board .qg-gokui-cover-paper {
  border: 13px ridge #7b5738;
  border-radius: 15px;
  background:
    linear-gradient(90deg, transparent 49.6%, #674329 49.6% 50.4%, transparent 50.4%),
    conic-gradient(from 24deg at 12% 0, transparent 0 42deg, rgba(116, 35, 35, .19) 43deg 70deg, transparent 71deg),
    conic-gradient(from -24deg at 88% 100%, transparent 0 42deg, rgba(25, 62, 55, .2) 43deg 70deg, transparent 71deg),
    #d7bd8b;
}
.qg-gokui--backgammon-travel-board .qg-gokui-cover-paper::before,
.qg-gokui--backgammon-travel-board .qg-gokui-cover-paper::after { display: none; }
.qg-gokui--backgammon-travel-board .qg-gokui-reader { border: 10px ridge #765234; border-radius: 18px; background: linear-gradient(90deg, #27423c 0 49%, #1a2c28 49% 51%, #633438 51%); }
.qg-gokui--backgammon-travel-board .qg-gokui-binding::before { width: 8px; background: #ae8a56; }
.qg-gokui--backgammon-travel-board .qg-gokui-binding span { border-color: #c0a16d; background: #3f2a1d; }
.qg-gokui--backgammon-travel-board .qg-gokui-manuscript { background: #c5a977; }
.qg-gokui--backgammon-travel-board .qg-gokui-sheet { background-color: #ead9b4; }
.qg-gokui--backgammon-travel-board .qg-gokui-sheet h2 { font-size: clamp(1.45rem, 3vw, 2.08rem); }
.qg-gokui--backgammon-travel-board .qg-gokui-sheet--chapter h2::before { content: "TRAVELLER'S NOTE"; }

/* Mahjong — Showa tactics notebook */
.qg-gokui--mahjong-showa-notebook {
  --qg-gokui-ink: #172326;
  --qg-gokui-vermilion: #bb3f32;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #214e54;
  background-size: 20px 20px;
  border-color: rgba(228, 198, 129, .35);
}
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover { grid-template-columns: minmax(0, 850px); transform: rotate(-.4deg); }
.qg-gokui--mahjong-showa-notebook .qg-gokui-scroll-rod { display: none; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover-paper {
  border: 2px solid #153b40;
  border-left: 46px solid #d9c9a0;
  background:
    linear-gradient(90deg, transparent 17%, rgba(240, 209, 145, .7) 17% 17.4%, transparent 17.4%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 8px),
    #2c6a70;
  box-shadow: 9px 10px 0 rgba(0,0,0,.25), inset 0 0 40px rgba(0,0,0,.18);
}
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover h2,
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover p { color: #f3e9cc; text-shadow: 1px 2px #173a3d; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover-kicker,
.qg-gokui--mahjong-showa-notebook .qg-gokui-artifact-label { color: #f1d998; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover-meta span { background: rgba(5,31,34,.3); color: #f3e5bf; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-cover-meta b { color: #ffd671; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-reader { background: #1a4044; border-color: #d4bd83; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-binding::before { width: 3px; background: #d7d3c6; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-binding span { border-color: #ece8dc; background: #20494d; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-manuscript { background: #d4caa8; }
.qg-gokui--mahjong-showa-notebook .qg-gokui-sheet { background: repeating-linear-gradient(0deg, #f3eedb 0 30px, #b9d2d5 30px 31px); }
.qg-gokui--mahjong-showa-notebook .qg-gokui-sheet--chapter h2::before { content: "実戦覚書"; }

/* Hanafuda — lacquer box and seasonal accordion */
.qg-gokui--hanafuda-lacquer-orihon {
  --qg-gokui-ink: #251814;
  --qg-gokui-vermilion: #a12824;
  background:
    radial-gradient(circle at 10% 10%, rgba(211, 158, 49, .18), transparent 20%),
    linear-gradient(135deg, #090807, #351014 52%, #080707);
  border: 2px solid #b4832d;
}
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover { grid-template-columns: minmax(0, 900px); }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-scroll-rod,
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-binding { display: none; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover-paper {
  border: 12px double #c89a3b;
  border-radius: 8px;
  background:
    radial-gradient(circle at 13% 19%, #b52f28 0 13px, #d7a53d 14px 17px, transparent 18px),
    radial-gradient(circle at 87% 23%, #f0dcad 0 11px, #a12925 12px 16px, transparent 17px),
    radial-gradient(ellipse at 82% 85%, rgba(196, 143, 38, .28), transparent 18%),
    linear-gradient(140deg, #190a0b, #471117 55%, #120809);
  box-shadow: inset 0 0 55px #000, 0 0 0 4px #1c0a0c;
}
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover h2,
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover p { color: #f0db9c; text-shadow: 1px 2px #000; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover-kicker,
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-artifact-label { color: #d8a945; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-piece-mark { color: rgba(221, 172, 69, .06); }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover-meta span { border-color: #b98b39; background: rgba(0,0,0,.28); color: #ead49a; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover-meta b { color: #f6ca5d; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-reader { grid-template-columns: minmax(0, 1fr); border: 10px double #b18435; background: #16090b; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-manuscript { background: repeating-linear-gradient(90deg, #d2bb88 0 calc(16.66% - 1px), #a78c59 calc(16.66% - 1px) 16.66%); }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-sheet { background: radial-gradient(circle at 91% 8%, rgba(164, 38, 32, .13), transparent 18%), #ead8ad; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-volume-pager { grid-column: 1; }
.qg-gokui--hanafuda-lacquer-orihon .qg-gokui-sheet--chapter h2::before { content: "四季口伝"; }

@media (max-width: 760px) {
  .qg-mypage-start-state { grid-column: 1; grid-row: auto; width: 100%; }
  .qg-board-signal-empty { align-items: flex-start; flex-wrap: wrap; }
  .qg-board-signal-empty strong { width: 100%; margin-left: 25px; }
  .qg-gokui--go-ink-orihon .qg-gokui-cover,
  .qg-gokui--hanafuda-lacquer-orihon .qg-gokui-cover { grid-template-columns: minmax(0, 1fr); }
  .qg-gokui--xiangqi-threadbound .qg-gokui-cover-paper { border-left-width: 27px; }
  .qg-gokui--mahjong-showa-notebook .qg-gokui-cover-paper { border-left-width: 29px; }
  .qg-gokui--latrunculi-wax-tablet .qg-gokui-cover-paper { border-width: 13px; }
  .qg-gokui--mancala-seed-box .qg-gokui-cover-paper { border-width: 8px; }
}