/* ==========================================================================
   Yamato.com — site theme
   Layered on top of style.css: it keeps every existing component (modals,
   chat, toasts, forms, profile, admin) working while re-skinning the site and
   adding the three-game sidebar.

   Palette follows the traditional Japanese colour names the games belong to:
     藍 ai (indigo)  朱 shu (vermilion)  生成り kinari (raw white)
     墨 sumi (ink)   金 kin (gold)       松葉 matsuba (pine green)
   ========================================================================== */

:root {
  /* --- Japanese palette --- */
  --ya-ai:        #1b3a5c;   /* 藍 — headers, sidebar */
  --ya-ai-deep:   #12283f;
  --ya-ai-soft:   #2d5680;
  --ya-shu:       #c8102e;   /* 朱 — accents, active states */
  --ya-shu-soft:  #e04b5c;
  --ya-kin:       #c9a227;   /* 金 — highlights, leaderboard */
  --ya-kin-soft:  #e3c766;
  --ya-sumi:      #1c1c1c;   /* 墨 */
  --ya-kinari:    #faf6ee;   /* 生成り */
  --ya-washi:     #f3ece0;   /* 和紙 */
  --ya-matsuba:   #2f6b4f;   /* 松葉 */
  --ya-line:      #ddd2bf;
  --ya-muted:     #6d6558;

  /* Map the inherited component variables onto the Japanese palette so every
     button, badge and modal from style.css re-skins without being rewritten. */
  --primary-color: var(--ya-ai);
  --secondary-color: var(--ya-sumi);
  --accent-color: var(--ya-shu);
  --light-color: var(--ya-kinari);
  --dark-color: #2a2620;
  --border-color: var(--ya-line);
  --success-color: var(--ya-matsuba);
  --warning-color: #c98a1f;
  --danger-color: var(--ya-shu);
  --shadow: 0 2px 14px rgba(28, 28, 28, 0.10);

  --ya-font-brush: 'Yuji Syuku', 'Shippori Mincho B1', 'Hiragino Mincho ProN',
                   'Yu Mincho', 'Noto Serif JP', serif;
  --ya-font-mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho',
                    'Noto Serif JP', 'Songti TC', serif;
  --ya-font-ui: 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP',
                'Yu Gothic', Meiryo, system-ui, sans-serif;

  --ya-sidebar-w: 248px;
  --ya-header-h: 62px;
}

body {
  font-family: var(--ya-font-ui);
  background: var(--ya-kinari);
  color: #2a2620;
}

/* A faint 麻の葉 (asanoha) weave behind the page — traditional, but at 3%
   opacity it reads as paper texture rather than pattern. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%231b3a5c' stroke-width='1.2'%3E%3Cpath d='M30 0v26M30 26L7.5 13M30 26L52.5 13M30 26v26M30 52L7.5 39M30 52L52.5 39M30 52v26M30 78L7.5 65M30 78L52.5 65M30 78v26M0 26v26M60 26v26M7.5 13v26M52.5 13v26M7.5 65v26M52.5 65v26'/%3E%3C/g%3E%3C/svg%3E");
}

h1, h2, h3, h4 { font-family: var(--ya-font-mincho); letter-spacing: 0.01em; }

/* ==========================================================================
   Header
   ========================================================================== */
body > header {
  background: linear-gradient(180deg, var(--ya-ai) 0%, var(--ya-ai-deep) 100%);
  border-bottom: 3px solid var(--ya-shu);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  position: sticky;
  top: 0;
  z-index: 900;
}

body > header .container {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--ya-header-h);
  max-width: 1440px;
}

body > header .logo h1 { margin: 0; font-size: 0; line-height: 1; }

body > header .logo a {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: #fff;
  text-decoration: none;
}

.ya-logo-mark {
  font-family: var(--ya-font-brush);
  font-size: 27px;
  color: var(--ya-kin-soft);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.ya-logo-text {
  font-family: var(--ya-font-mincho);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: #fff;
}

.ya-logo-tag {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--ya-font-ui);
}

@media (max-width: 900px) { .ya-logo-tag { display: none; } }

body > header nav { margin-left: auto; }

body > header nav ul {
  display: flex;
  gap: 4px;
  align-items: center;
}

body > header nav a {
  color: rgba(255, 255, 255, 0.86);
  padding: 8px 13px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
}

body > header nav a:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }

body > header nav a.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--ya-kin);
}

.auth-buttons { display: flex; gap: 8px; align-items: center; }

.auth-buttons button {
  /* style.css clips these buttons to a fixed width for its old sidebar rail;
     in a top bar they just need to fit their label. */
  max-width: none;
  min-width: 0;
  width: auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  border: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ya-font-ui);
  transition: filter 0.18s, transform 0.1s;
}

.auth-buttons .login-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.auth-buttons .signup-btn { background: var(--ya-shu); color: #fff; }
.auth-buttons button:hover { filter: brightness(1.12); }
.auth-buttons button:active { transform: translateY(1px); }

/* ==========================================================================
   Layout: sidebar + content
   ========================================================================== */
.ya-shell {
  display: grid;
  grid-template-columns: var(--ya-sidebar-w) minmax(0, 1fr);
  gap: 26px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  align-items: start;
}

.ya-main { min-width: 0; }

/* ---------------------------------------------------------------- sidebar */
.ya-sidebar {
  position: sticky;
  top: calc(var(--ya-header-h) + 18px);
  background: #fff;
  border: 1px solid var(--ya-line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 3px 16px rgba(28, 28, 28, 0.06);
}

.ya-sidebar-title {
  font-family: var(--ya-font-mincho);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ya-muted);
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--ya-line);
  margin-bottom: 8px;
}

.ya-game { border-radius: 9px; margin-bottom: 5px; }

.ya-game-head {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ya-font-ui);
  color: #2a2620;
  transition: background 0.16s;
}

.ya-game-head:hover { background: var(--ya-washi); }

.ya-game-kanji {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-family: var(--ya-font-brush);
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: var(--ya-ai);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}

.ya-game[data-game="shogi"]    .ya-game-kanji { background: #1b3a5c; }
.ya-game[data-game="hanafuda"] .ya-game-kanji { background: #a3243b; }
.ya-game[data-game="daifugo"]  .ya-game-kanji { background: #2f6b4f; }

.ya-game-names { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.ya-game-name { display: block; font-size: 15px; font-weight: 700; }
.ya-game-jp {
  display: block;
  font-size: 11.5px;
  color: var(--ya-muted);
  font-family: var(--ya-font-mincho);
  letter-spacing: 0.04em;
}

.ya-game-caret {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ya-muted);
  transition: transform 0.22s ease;
}

.ya-game.is-open > .ya-game-head .ya-game-caret { transform: rotate(90deg); }
.ya-game.is-open > .ya-game-head { background: var(--ya-washi); }

.ya-game-links {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}
.ya-game.is-open > .ya-game-links { grid-template-rows: 1fr; }
.ya-game-links > ul { overflow: hidden; }

.ya-game-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 1px 4px;
  border-radius: 4px;
  font-size: 13.8px;
  color: #4a443a;
  border: 1px solid transparent;
}

.ya-game-links a i { width: 15px; font-size: 12.5px; color: var(--ya-muted); text-align: center; }
.ya-game-links a:hover { background: var(--ya-washi); color: var(--ya-ai); }

.ya-game-links a.active {
  background: #e9eeed;
  color: var(--ya-ai-deep);
  font-weight: 600;
  border-color: #d5dfdc;
}
.ya-game-links a.active i { color: var(--ya-ai-deep); }

.ya-sidebar-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ya-line);
}

.ya-sidebar-foot a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13.5px;
  color: #4a443a;
}
.ya-sidebar-foot a:hover { background: var(--ya-washi); color: var(--ya-ai); }
.ya-sidebar-foot a i { width: 15px; text-align: center; color: var(--ya-muted); }

/* Mobile: the sidebar becomes a slide-in drawer driven by .menu-toggle. */
.ya-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 40, 63, 0.5);
  z-index: 940;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}

@media (max-width: 980px) {
  .ya-shell { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 48px; gap: 0; }
  header nav { display: none; }

  .ya-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    z-index: 950;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--ya-line);
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 16px;
  }
  body.ya-drawer-open .ya-sidebar { transform: translateX(0); }
  body.ya-drawer-open .ya-sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

@media (min-width: 981px) {
  .menu-toggle { display: none !important; }
  .ya-sidebar-backdrop { display: none; }
}

.menu-toggle {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 8px;
  order: -1;
}

/* ==========================================================================
   Cards & panels
   ========================================================================== */
.ya-panel {
  background: #fff;
  border: 1px solid var(--ya-line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 3px 16px rgba(28, 28, 28, 0.05);
}

.ya-page-head { margin-bottom: 22px; }

.ya-page-head h1 {
  font-size: clamp(24px, 3.2vw, 33px);
  line-height: 1.22;
  margin-bottom: 7px;
}

.ya-page-head .ya-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ya-font-mincho);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ya-shu);
  margin-bottom: 9px;
}

.ya-page-head .ya-kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--ya-shu);
}

.ya-page-head p { color: #55503f; max-width: 74ch; }

/* Section rule with a brush-stroke feel. */
.ya-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--ya-line), transparent);
  margin: 26px 0;
}

/* ==========================================================================
   Home
   ========================================================================== */
.ya-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 40px 36px;
  color: #fff;
  background:
    radial-gradient(120% 150% at 12% 0%, #2d5680 0%, var(--ya-ai) 42%, var(--ya-ai-deep) 100%);
  box-shadow: 0 12px 36px rgba(18, 40, 63, 0.24);
  margin-bottom: 28px;
}

/* 日の出 — a single vermilion disc, the most Japanese mark there is. */
.ya-hero::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.55), rgba(200, 16, 46, 0));
  pointer-events: none;
}

.ya-hero-inner { position: relative; z-index: 1; max-width: 700px; }

.ya-hero h1 {
  font-size: clamp(27px, 4.4vw, 42px);
  line-height: 1.2;
  margin-bottom: 12px;
  color: #fff;
}

.ya-hero .ya-hero-jp {
  font-family: var(--ya-font-brush);
  font-size: clamp(15px, 2vw, 19px);
  color: var(--ya-kin-soft);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: block;
}

.ya-hero p { color: rgba(255, 255, 255, 0.86); font-size: 16px; max-width: 62ch; }

.ya-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}

.ya-hero-stats b { color: #fff; font-size: 17px; }

.ya-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: yaPulse 2s infinite;
}

@keyframes yaPulse {
  70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* --- game cards --- */
.ya-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.ya-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ya-line);
  border-radius: 13px;
  overflow: hidden;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.ya-game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(28, 28, 28, 0.12);
  border-color: #c9bda6;
  color: inherit;
}

.ya-game-art {
  height: 132px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.ya-game-art .ya-art-kanji {
  font-family: var(--ya-font-brush);
  font-size: 58px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  line-height: 1;
}

.ya-game-card[data-game="shogi"] .ya-game-art {
  background: linear-gradient(140deg, #24476d, #12283f);
}
.ya-game-card[data-game="hanafuda"] .ya-game-art {
  background: linear-gradient(140deg, #a3243b, #6d0f24);
}
.ya-game-card[data-game="daifugo"] .ya-game-art {
  background: linear-gradient(140deg, #2f6b4f, #17402f);
}

.ya-game-body { padding: 17px 19px 19px; flex: 1 1 auto; display: flex; flex-direction: column; }
.ya-game-body h3 { font-size: 19px; margin-bottom: 3px; }

.ya-game-body .ya-game-sub {
  font-family: var(--ya-font-mincho);
  font-size: 12.5px;
  color: var(--ya-muted);
  margin-bottom: 9px;
  letter-spacing: 0.05em;
}

.ya-game-body p { font-size: 14px; color: #55503f; flex: 1 1 auto; margin-bottom: 14px; }

.ya-game-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ya-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--ya-washi);
  color: var(--ya-ai);
  border: 1px solid var(--ya-line);
  transition: background 0.16s, color 0.16s;
}
.ya-chip:hover { background: var(--ya-ai); color: #fff; border-color: var(--ya-ai); }
.ya-chip.ya-chip-primary { background: var(--ya-shu); color: #fff; border-color: var(--ya-shu); }
.ya-chip.ya-chip-primary:hover { filter: brightness(1.1); background: var(--ya-shu); color: #fff; }

/* --- feature strip --- */
.ya-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.ya-feature {
  background: #fff;
  border: 1px solid var(--ya-line);
  border-radius: 11px;
  padding: 18px;
}

.ya-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  background: var(--ya-ai);
  margin-bottom: 11px;
}
.ya-feature h3 { font-size: 15.5px; margin-bottom: 5px; }
.ya-feature p { font-size: 13.5px; color: #55503f; }

/* ==========================================================================
   Game page shell (shared by all three games)
   ========================================================================== */
/* Block layout, not grid: the inherited .game-container carries `margin: 0 auto`,
   and auto inline margins on a grid item shrink it to its content instead of
   letting it fill the column. */
.ya-game-shell { display: block; }
.ya-game-shell > * + * { margin-top: 18px; }

.ya-game-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ya-game-header h1 { font-size: clamp(21px, 2.6vw, 27px); margin: 0; }

.ya-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  background: var(--ya-washi);
  color: var(--ya-muted);
  border: 1px solid var(--ya-line);
}
.ya-badge.is-live { background: rgba(47, 107, 79, 0.1); color: var(--ya-matsuba); border-color: rgba(47, 107, 79, 0.28); }

.ya-toolbar { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* The inherited .game-board-container paints a wooden frame sized for a 600px
   xiangqi board. Each Yamato game draws its own surface, and the card tables
   want the whole column, so strip the inherited framing here. */
.ya-stage {
  max-width: none !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
}

.game-container:has(.ya-stage) { max-width: 1040px; }

/* A shogi board still wants a sensible reading width; card tables do not. */
.ya-stage #sg-board, .ya-stage #sg-online-board { max-width: 620px; margin: 0 auto; }

/* Turn / status strip above the board. */
.ya-status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--ya-line);
  border-radius: 11px;
  padding: 11px 15px;
}

.ya-status .ya-turn { font-weight: 700; font-size: 15px; }
.ya-status .ya-turn.is-you { color: var(--ya-shu); }
.ya-status .ya-timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ya-muted); }

/* ==========================================================================
   Rules / tutorial typography
   ========================================================================== */
.ya-prose { max-width: 78ch; }
.ya-prose h2 {
  font-size: 22px;
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ya-line);
}
.ya-prose h2:first-child { margin-top: 0; }
.ya-prose h3 { font-size: 17px; margin: 22px 0 8px; color: var(--ya-ai); }
.ya-prose p { margin-bottom: 13px; line-height: 1.78; color: #3d382f; }
.ya-prose ul, .ya-prose ol { margin: 0 0 14px 22px; }
.ya-prose li { margin-bottom: 7px; line-height: 1.72; list-style: disc; color: #3d382f; }
.ya-prose ol li { list-style: decimal; }
.ya-prose strong { color: var(--ya-ai); }

.ya-jp-term {
  font-family: var(--ya-font-mincho);
  color: var(--ya-shu);
  font-weight: 600;
  white-space: nowrap;
}

.ya-note {
  border-left: 3px solid var(--ya-kin);
  background: #fdf9ee;
  padding: 13px 16px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
  font-size: 14px;
}

.ya-table-wrap { overflow-x: auto; margin: 14px 0 20px; }

.ya-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 460px;
}
.ya-table th, .ya-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ya-line);
}
.ya-table th {
  background: var(--ya-washi);
  font-family: var(--ya-font-mincho);
  font-weight: 700;
  color: var(--ya-ai);
  white-space: nowrap;
}
.ya-table tbody tr:hover { background: #fbf8f2; }
.ya-table td.ya-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Table of contents used by the rules pages. */
.ya-toc {
  background: var(--ya-washi);
  border: 1px solid var(--ya-line);
  border-radius: 10px;
  padding: 15px 18px;
  margin-bottom: 26px;
}
.ya-toc h2 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
             color: var(--ya-muted); border: none; margin: 0 0 8px; padding: 0; }
.ya-toc ol { margin: 0 0 0 18px; columns: 2; column-gap: 26px; }
.ya-toc li { list-style: decimal; margin-bottom: 4px; font-size: 13.6px; }
@media (max-width: 620px) { .ya-toc ol { columns: 1; } }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--ya-ai-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 40px 0 22px;
  margin-top: 40px;
}
footer .container { max-width: 1440px; }
footer h2, footer h3 { color: #fff; }
footer h3 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 11px; }
footer a { color: rgba(255, 255, 255, 0.72); font-size: 14px; }
footer a:hover { color: var(--ya-kin-soft); }
footer .footer-content {
  display: grid;
  grid-template-columns: minmax(220px, 1.65fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
}
footer .footer-content > * { min-width: 0; }
footer .footer-links a { display: inline-block; padding: 4px 0; line-height: 1.5; }
@media (max-width: 1050px) {
  footer .footer-content { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  footer .footer-logo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  footer .footer-logo p { grid-column: 1; }
  footer .ya-lang-menu { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  footer .ya-lang-list { left: auto; right: 0; }
}
@media (max-width: 600px) {
  footer { padding: 28px 0 18px; }
  footer .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  footer .footer-logo { display: block; }
  footer .ya-lang-menu { margin-top: 16px; }
  footer .ya-lang-list { left: 0; right: auto; }
  footer .footer-links a { padding: 7px 0; }
}
footer .footer-logo p { font-size: 13.5px; margin-top: 6px; max-width: 34ch; }
footer .footer-links li { margin-bottom: 7px; }
footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 28px;
  padding-top: 16px;
  font-size: 13px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Leaderboard / profile: three ratings side by side
   ========================================================================== */
.ya-rating-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  margin: 18px 0 6px;
}

.ya-rating-card {
  background: #fff;
  border: 1px solid var(--ya-line);
  border-radius: 11px;
  padding: 16px;
  border-top: 3px solid var(--ya-ai);
}
.ya-rating-card[data-game="shogi"]    { border-top-color: #1b3a5c; }
.ya-rating-card[data-game="hanafuda"] { border-top-color: #a3243b; }
.ya-rating-card[data-game="daifugo"]  { border-top-color: #2f6b4f; }

.ya-rating-card .ya-rc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ya-rating-card .ya-rc-kanji {
  font-family: var(--ya-font-brush);
  font-size: 17px;
  color: var(--ya-ai);
}
.ya-rating-card[data-game="hanafuda"] .ya-rc-kanji { color: #a3243b; }
.ya-rating-card[data-game="daifugo"]  .ya-rc-kanji { color: #2f6b4f; }
.ya-rating-card .ya-rc-name { font-size: 13.5px; font-weight: 700; }
.ya-rating-card .ya-rc-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.ya-rating-card .ya-rc-rank {
  font-family: var(--ya-font-mincho);
  font-size: 13px;
  color: var(--ya-shu);
  margin-bottom: 9px;
}
.ya-rating-card .ya-rc-record {
  font-size: 12.5px;
  color: var(--ya-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ya-rating-card .ya-rc-record b { color: #2a2620; }

/* Segmented control used to switch the leaderboard between games. */
.ya-seg {
  display: inline-flex;
  background: var(--ya-washi);
  border: 1px solid var(--ya-line);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.ya-seg button {
  border: none;
  background: none;
  padding: 8px 15px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ya-muted);
  font-family: var(--ya-font-ui);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ya-seg button:hover { color: var(--ya-ai); }
.ya-seg button.active { background: #fff; color: var(--ya-ai); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
/* The game mark as a small seal, like the sidebar's, so it reads as an icon
   and not as a doubled character next to the name. Muted until chosen. */
.ya-seg button { display: inline-flex; align-items: center; gap: 8px; }
.ya-seg button .ya-seg-kanji {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 5px;
  font-family: var(--ya-font-brush); font-size: 13px; line-height: 1; color: #fff;
  background: var(--ya-ai); box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .18);
  opacity: .55; filter: saturate(.6); transition: opacity .15s, filter .15s;
}
.ya-seg button[data-game="shogi"] .ya-seg-kanji { background: #1b3a5c; }
.ya-seg button[data-game="hanafuda"] .ya-seg-kanji { background: #a3243b; }
.ya-seg button[data-game="daifugo"] .ya-seg-kanji { background: #2f6b4f; }
.ya-seg button:hover .ya-seg-kanji, .ya-seg button.active .ya-seg-kanji { opacity: 1; filter: none; }

/* ==========================================================================
   Small shared bits
   ========================================================================== */
.ya-empty {
  text-align: center;
  padding: 42px 20px;
  color: var(--ya-muted);
}
.ya-empty .ya-empty-kanji {
  font-family: var(--ya-font-brush);
  font-size: 42px;
  color: var(--ya-line);
  display: block;
  margin-bottom: 10px;
}
.ya-empty-title { font-size: 16px; font-weight: 600; color: #4a443a; margin-bottom: 5px; }

.ya-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--ya-ai);
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.ya-skip-link:focus { left: 0; }

/* Keep the inherited modal / toast / chat components on-theme. */
.modal-content { border-radius: 12px; border: 1px solid var(--ya-line); }
.modal-header { border-bottom: 1px solid var(--ya-line); }
.modal-header h2 { font-family: var(--ya-font-mincho); }

/* ==========================================================================
   Override the inherited desktop "header becomes a left rail" layout.
   Yamato has its own sidebar — one that expands per game — so the header goes
   back to being an ordinary top bar at every width. These selectors mirror the
   inherited ones exactly so they win on specificity rather than !important.
   ========================================================================== */
@media (min-width: 1280px) {
  body:has(> header) { padding-left: 0; }

  body > header {
    position: sticky;
    top: 0;
    left: auto;
    bottom: auto;
    width: auto;
    background: linear-gradient(180deg, var(--ya-ai) 0%, var(--ya-ai-deep) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    border-right: none;
    border-bottom: 3px solid var(--ya-shu);
    z-index: 900;
    overflow: visible;
  }

  body > header .container {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    height: auto;
    min-height: var(--ya-header-h);
    max-width: 1440px;
    margin: 0 auto;
  }

  body > header .logo { margin: 0; padding: 0; width: auto; border: none; }
  body > header .logo h1 { margin: 0; font-size: 0; text-align: left; }

  body > header nav { margin: 0 0 0 auto; width: auto; flex: 0 0 auto; padding: 0; }
  body > header nav ul { flex-direction: row; gap: 4px; width: auto; }
  body > header nav ul li { width: auto; margin: 0; }

  body > header nav ul li a {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 8px 13px;
    border-radius: 6px;
    border: none;
    color: rgba(255, 255, 255, 0.86);
    background: none;
    font-size: 14.5px;
    justify-content: center;
  }
  body > header nav ul li a:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
  body > header nav ul li a.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--ya-kin);
  }

  body > header .auth-buttons {
    flex-direction: row;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    gap: 8px;
  }
  body > header .auth-buttons > button { width: auto; margin: 0; }

  /* The account dropdown is anchored to the button again, not to a rail. */
  body > header .auth-buttons .user-profile-dropdown { width: auto; position: relative; }
  body > header .auth-buttons .user-profile-dropdown .profile-btn { width: auto; }
  body > header .auth-buttons .profile-dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    bottom: auto;
    min-width: 210px;
  }

  body:has(> header) main { padding-left: 0; }
}

/* ==========================================================================
   Narrow screens: keep the header to one row.
   The logo will happily take 280px of a 375px viewport and push the auth
   buttons onto a second line, which doubles the header height on a phone.
   ========================================================================== */
@media (max-width: 560px) {
  :root { --ya-header-h: 54px; }

  header .container { gap: 8px; padding: 0 12px; flex-wrap: nowrap; }

  .logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .ya-logo-mark { font-size: 22px; }
  .ya-logo-text { font-size: 17px; letter-spacing: 0.02em; }

  .auth-buttons { margin-left: auto; flex: 0 0 auto; gap: 6px; }
  .auth-buttons button { padding: 7px 10px; font-size: 12.5px; }

  .menu-toggle { font-size: 18px; padding: 4px 6px; }

  .ya-hero { padding: 26px 20px; border-radius: 12px; }
  .ya-hero h1 { font-size: clamp(20px, 6.5vw, 25px); }
  .ya-hero p { font-size: 15px; }
  .ya-hero-stats { gap: 6px 14px; font-size: 13px; }

  .ya-page-head h1 { font-size: 22px; }
  .ya-panel { padding: 16px; }
  .ya-game-art { height: 104px; }
  .ya-game-art .ya-art-kanji { font-size: 46px; }
}

/* Very narrow viewports — split-screen, small legacy phones, embedded panes.
   Below ~380px the wordmark cannot fit beside the auth buttons, so drop it and
   keep the 和 mark rather than letting "Yamato" clip mid-word. */
@media (max-width: 380px) {
  .ya-logo-text { display: none; }
  .ya-logo-mark { font-size: 25px; }
  .auth-buttons button { padding: 7px 9px; font-size: 12px; }
  header .container { gap: 6px; padding: 0 9px; }
  .ya-hero h1 { font-size: 22px; }
  .ya-shell { padding: 12px 10px 40px; }
  .ya-panel { padding: 13px; }
}

/* ==========================================================================
   Footer language picker
   Plain markup, opened by a button. It stays usable without JS: the list is a
   real <ul> of links, so a crawler follows it and a keyboard reaches it even if
   the script never runs.
   ========================================================================== */
.ya-lang-menu { position: relative; margin-top: 14px; display: inline-block; }

.ya-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--ya-font-ui);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.ya-lang-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); }
.ya-lang-btn i:first-child { color: var(--ya-kin-soft); }
.ya-lang-caret { font-size: 11px; opacity: 0.7; transition: transform 0.2s; }
.ya-lang-menu.is-open .ya-lang-caret { transform: rotate(180deg); }

.ya-lang-list {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 168px;
  padding: 6px;
  margin: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--ya-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  z-index: 40;
  list-style: none;
  /* Hidden by default, but reachable: a keyboard user tabbing into a link
     inside it opens it via :focus-within. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.ya-lang-menu.is-open .ya-lang-list,
.ya-lang-menu:not(.is-ready):focus-within .ya-lang-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ya-lang-list li { margin: 0; }

.ya-lang-list a {
  display: block;
  padding: 9px 13px;
  border-radius: 7px;
  font-size: 14px;
  color: #2a2620;
  white-space: nowrap;
}
.ya-lang-list a:hover { background: var(--ya-washi); color: var(--ya-ai); }

.ya-lang-list a.is-current {
  font-weight: 700;
  color: var(--ya-shu);
  background: rgba(200, 16, 46, 0.07);
}
.ya-lang-list a.is-current::after {
  content: '\f00c';                       /* check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  float: right;
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.7;
}

/* Above the footer's own dark ground the dropdown needs its own contrast. */
footer .ya-lang-list a { color: #2a2620; }

@media (max-width: 560px) {
  /* Right-aligning would push the list off the left edge whenever the button
     sits less than its own width from the left — which is where the footer
     puts it on a phone — so it opens rightwards and is clamped to the screen. */
  .ya-lang-list { left: 0; right: auto; max-width: calc(100vw - 32px); }
}

/* Local engraved line icons. Native text suit symbols remain text (not emoji). */
.fas::before,.fa-solid::before {content:""!important;display:inline-block;width:1.05em;height:1.05em;vertical-align:-.14em;background:currentColor;mask:var(--ya-icon) center/contain no-repeat;-webkit-mask:var(--ya-icon) center/contain no-repeat;}
.fa-bars{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E");}
.fa-robot{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v3m-6%200h12v14H6ZM3%2010v5m18-5v5M9%2011h.01M15%2011h.01M9%2016h6%22%2F%3E%3C%2Fsvg%3E");}
.fa-brain{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205c-5-6-10%202-6%205-5%202-3%209%202%208%200%205%204%203%204%200Zm0%200c5-6%2010%202%206%205%205%202%203%209-2%208%200%205-4%203-4%200M8%208l4%203m0%204-4%201m8-8-4%203m0%204%204%201%22%2F%3E%3C%2Fsvg%3E");}
.fa-user{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM4%2021v-2a8%206%200%200%201%2016%200v2%22%2F%3E%3C%2Fsvg%3E");}
.fa-users{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%207a3%203%200%201%201-6%200%203%203%200%200%201%206%200ZM3%2020v-2a7%205%200%200%201%2014%200v2M17%204a3%203%200%200%201%200%206m2%204a5%205%200%200%201%202%206%22%2F%3E%3C%2Fsvg%3E");}
.fa-trophy{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10v7a5%205%200%200%201-10%200ZM7%206H3v3q0%204%205%204m9-7h4v3q0%204-5%204m-4%202v6m-4%200h8%22%2F%3E%3C%2Fsvg%3E");}
.fa-book{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205Q6%201%203%204v15q5-2%209%201%204-3%209-1V4q-5-2-9%201Zm0%200v15%22%2F%3E%3C%2Fsvg%3E");}
.fa-graduation-cap{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%208%2010-5%2010%205-10%205Zm4%203v6q6%205%2012%200v-6m4-3v9%22%2F%3E%3C%2Fsvg%3E");}
.fa-chart-line{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18M6%2016l5-6%204%203%205-8%22%2F%3E%3C%2Fsvg%3E");}
.fa-clock{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");}
.fa-globe{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM3%2012h18M12%203q-8%209%200%2018%208-9%200-18%22%2F%3E%3C%2Fsvg%3E");}
.fa-eye{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012q10-15%2020%200-10%2015-20%200ZM15%2012a3%203%200%201%201-6%200%203%203%200%200%201%206%200Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-envelope{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v14H3Zm0%201%209%207%209-7%22%2F%3E%3C%2Fsvg%3E");}
.fa-chevron-right{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E");}
.fa-chevron-down{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%209%207%207%207-7%22%2F%3E%3C%2Fsvg%3E");}
.fa-chevron-up{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2015%207-7%207%207%22%2F%3E%3C%2Fsvg%3E");}
.fa-info-circle{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM12%2011v6m0-10h.01%22%2F%3E%3C%2Fsvg%3E");}
.fa-copy{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%208h13v13H8ZM4%2016H3V3h13v1%22%2F%3E%3C%2Fsvg%3E");}
.fa-paper-plane{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203%2022%2012%203%2021l3-9Zm3%209h16%22%2F%3E%3C%2Fsvg%3E");}
.fa-bolt{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m13%202-9%2012h7l-1%208%2010-13h-8Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-edit{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2015%2012-12%205%205L9%2020l-6%201ZM13%206l5%205%22%2F%3E%3C%2Fsvg%3E");}
.fa-sign-out-alt{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203H3v18h7m4-15%206%206-6%206m-7-6h13%22%2F%3E%3C%2Fsvg%3E");}
.fa-cog{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2012a3%203%200%201%201-6%200%203%203%200%200%201%206%200ZM9%203h6l1%203%203%201%202%205-2%205-3%201-1%203H9l-1-3-3-1-2-5%202-5%203-1Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-spinner{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-9-9%22%2F%3E%3C%2Fsvg%3E");}
.fa-save{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h15l3%203v15H3ZM7%203v6h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-group{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%207a3%203%200%201%201-6%200%203%203%200%200%201%206%200ZM3%2020v-2a7%205%200%200%201%2014%200v2M17%204a3%203%200%200%201%200%206m2%204a5%205%200%200%201%202%206%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-plus{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM4%2021v-2a8%206%200%200%201%2016%200v2M19%209v6m-3-3h6%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-check{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM4%2021v-2a8%206%200%200%201%2016%200v2m16%2013%203%203%204-5%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-times{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM4%2021v-2a8%206%200%200%201%2016%200v2m17%2010%205%205m0-5-5%205%22%2F%3E%3C%2Fsvg%3E");}

/* Yamato atelier — keep the existing shell, refine its materials and rhythm. */
.ya-page-head {position:static;background:none;box-shadow:none;border:0;padding:0;z-index:auto;}
:root {--ya-ai:#233c49;--ya-ai-deep:#162c36;--ya-shu:#a23e34;--ya-shu-soft:#b55549;--ya-kin:#ac8b50;--ya-kin-soft:#dfc38b;--ya-kinari:#f8f6f0;--ya-washi:#eeebe3;--ya-line:#dfdbd0;--ya-muted:#79756b;}
body {background:radial-gradient(ellipse at 50% 0,#fffdf8 0,transparent 65%),var(--ya-kinari);}
body::before {opacity:.018;}
body > header {background:#1c333e;border-bottom:1px solid #b49a6566;box-shadow:0 3px 15px #182d3314;}
body > header .logo a {align-items:center;gap:10px;}
.ya-logo-mark {width:34px;height:34px;object-fit:contain;filter:none;}
.ya-logo-text {font-size:23px;font-weight:600;letter-spacing:.04em;}
.ya-logo-tag {color:#d9d7c8b8;letter-spacing:.11em;border-left:1px solid #dfc38b50;padding-left:14px;margin-left:4px;}
.ya-sidebar {background:#fffefa;border-radius:8px;box-shadow:0 4px 20px #303a2e05;}
.ya-panel {background:#fffefa;border-radius:8px;box-shadow:0 4px 20px #303a2e05;}
.ya-game-kanji {border-radius:4px;box-shadow:inset 0 0 0 1px #c6b38455;}

.ya-hero {background:#233c49;box-shadow:0 9px 24px #1b303318;border-radius:9px;border:1px solid #405661;}
.ya-hero::after {width:260px;height:260px;right:-50px;top:-25px;border:1px solid #ddc38b24;background:repeating-radial-gradient(circle at 50% 100%,transparent 0 13px,#ddc38b0e 14px 15px,transparent 16px 25px);opacity:.85;}
.ya-hero::before {content:'';position:absolute;inset:0;background:linear-gradient(110deg,#324f5a40,transparent);pointer-events:none;}
.ya-hero h1 {font-weight:600;line-height:1.4;letter-spacing:.035em;}
.ya-hero .ya-hero-jp {font-family:var(--ya-font-mincho);font-size:13px;letter-spacing:.2em;}
.ya-hero p {font-size:15px;line-height:1.9;color:#e7e8dfce;}
.ya-hero-stats {border-top:1px solid #e6d5ad26;padding-top:16px;font-size:12px;gap:8px 16px;}
.ya-live-dot {background:#a2bfa6;animation:none;box-shadow:0 0 0 4px #a2bfa614;}
.ya-game-card {border-radius:8px;border-color:#ddd8cb;box-shadow:0 4px 14px #34362906;}
.ya-game-art {height:172px;border-bottom:1px solid #c6b38466;isolation:isolate;}
.ya-game-art::after {content:'';position:absolute;inset:0;box-shadow:inset 0 0 35px #141a1920;pointer-events:none;}
.ya-game-art .ya-art-kanji {position:absolute;left:20px;top:20px;font-size:26px;z-index:5;color:#f7e8c4;text-shadow:none;writing-mode:vertical-rl;border:1px solid #e1cba749;border-radius:3px;padding:8px 5px;}
.ya-game-card[data-game="shogi"] .ya-game-art {background:linear-gradient(130deg,#36483f,#1a342d);}
.ya-game-card[data-game="hanafuda"] .ya-game-art {background:linear-gradient(115deg,#663631cf,#3c2926e8),url('/images/art/materials/felt.webp') center/cover;}
.ya-game-card[data-game="daifugo"] .ya-game-art {background:linear-gradient(115deg,#24394ccf,#162c40e8),url('/images/art/materials/felt.webp') center/cover;}
.ya-mini-board {position:absolute;inset:20px 15px -35px 65px;transform:rotate(-12deg);background:repeating-linear-gradient(0deg,transparent 0 35px,#503b2780 35px 36px),repeating-linear-gradient(90deg,transparent 0 33px,#503b2780 33px 34px),url('/images/art/materials/kaya.webp') center/cover;border:10px solid #c19756;box-shadow:0 6px 0 #90652e,0 12px 20px #0005;}
.ya-mini-koma {position:absolute;width:72px;height:83px;left:calc(50% - 16px);top:32px;transform:rotate(-12deg);filter:drop-shadow(1px 5px 2px #40270d80);z-index:2;}
.ya-mini-koma::before {content:'';position:absolute;inset:0;clip-path:polygon(50% 0,78% 15%,94% 100%,6% 100%,22% 15%);background:linear-gradient(110deg,#fff3c970,#f4dda538),url('/images/art/materials/kaya.webp') center/cover;}
.ya-mini-koma img {position:relative;width:100%;height:100%;}
.ya-mini-koma.ya-koma-two {left:calc(50% + 50px);top:97px;width:58px;height:68px;}
.ya-display-card {position:absolute;top:21px;width:77px;height:128px;object-fit:cover;border:2px solid #211f19;border-radius:3px;box-shadow:0 3px 0 #3e3027,0 8px 14px #0006;}
.ya-card-left {left:calc(50% - 65px);transform:rotate(-18deg);}
.ya-card-right {left:calc(50% + 35px);transform:rotate(18deg);}
.ya-card-center {left:calc(50% - 14px);top:29px;transform:rotate(-3deg);}
.ya-art-daifugo .ya-display-card {width:86px;height:120px;border-color:#f2e9d6;}
.ya-game-body {padding:21px;}
.ya-game-body h3 {font-size:22px;letter-spacing:.04em;}
.ya-game-body p {line-height:1.85;}
.ya-chip {border-radius:5px;font-size:12px;padding:7px 9px;}
.ya-chip.ya-chip-primary {background:#233c49;border-color:#233c49;}
.ya-feature-icon {background:#eeebe3;color:#846c43;border-radius:8px;}
footer {background:#1c333e;border-top:1px solid #b49a6566;}
.ya-footer-brand {display:flex;gap:10px;align-items:center;font-size:23px;letter-spacing:.04em;}
footer .footer-bottom {border-color:#dfc38b22;color:#e5e2d0a0;}
:focus-visible {outline:2px solid #9e7740;outline-offset:4px;}
@media(max-width:640px) {.ya-hero {padding:27px 23px;}.ya-hero h1{font-size:25px;}.ya-game-art{height:170px;}.ya-game-body{padding:19px;}}
@media(max-width:480px) {body > header .container{gap:7px;}.ya-logo-text{display:inline;font-size:17px;letter-spacing:0;}.ya-logo-mark{width:28px;height:28px;}body > header .logo a{gap:6px;}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* Account, social, and administration icons share the same stroke language. */
.fa-arrow-up-right-from-square{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204h6v6M20%204l-9%209M18%2014v5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1h5%22%2F%3E%3C%2Fsvg%3E");}
.fa-arrow-left{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012H4m6-7-7%207%207%207%22%2F%3E%3C%2Fsvg%3E");}
.fa-calendar{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v16H4ZM4%2010h16M8%203v5m8-5v5%22%2F%3E%3C%2Fsvg%3E");}
.fa-camera{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h5l2-3h4l2%203h5v14H3ZM16%2014a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-chart-bar{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V11h4v10m3%200V3h4v18m3%200V7h4v14M2%2021h21%22%2F%3E%3C%2Fsvg%3E");}
.fa-check{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%205%205L20%206%22%2F%3E%3C%2Fsvg%3E");}
.fa-circle{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-code{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%206-6%206%206%206m8-12%206%206-6%206M14%203l-4%2018%22%2F%3E%3C%2Fsvg%3E");}
.fa-comments{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h15v12H8l-5%204Zm16%205h3v14l-5-3h-6v-2%22%2F%3E%3C%2Fsvg%3E");}
.fa-crop{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%202v15h15M2%207h15v15M3%2021%2021%203%22%2F%3E%3C%2Fsvg%3E");}
.fa-crown{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%206%205%205%204-8%204%208%205-5-2%2014H5Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-exclamation-triangle{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%2010%2018H2Zm0%206v5m0%203h.01%22%2F%3E%3C%2Fsvg%3E");}
.fa-eye-slash{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203l18%2018M10%205q6-1%2012%207l-3%204M6%206l-4%206q8%2012%2016%205M10%2010a3%203%200%200%200%204%204%22%2F%3E%3C%2Fsvg%3E");}
.fa-file-contract{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202h10l6%206v14H4ZM14%202v6h6M8%2012h8m-8%204h6m-6%203h8%22%2F%3E%3C%2Fsvg%3E");}
.fa-fire{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202c0%208-9%207-8%2014%201%209%2015%208%2015-1%200-4-3-6-4-7%200%204-3%204-3%204%202-4%202-7%200-10Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-gamepad{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%206h10q4%200%205%2012%200%205-7-1H9q-7%206-7%201Q3%206%207%206ZM6%2010v6m-3-3h6m7-2h.01m3%203h.01%22%2F%3E%3C%2Fsvg%3E");}
.fa-history{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011a9%209%200%201%201%202%207M3%203v8h8m1-5v6l4%202%22%2F%3E%3C%2Fsvg%3E");}
.fa-home{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%2011%2010-9%2010%209M5%209v13h5v-8h4v8h5V9%22%2F%3E%3C%2Fsvg%3E");}
.fa-language{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%205h12M8%202v3m4%200q-1%208-9%2012m1-9q2%206%209%209m1%205%205-13%205%2013m-8-4h6%22%2F%3E%3C%2Fsvg%3E");}
.fa-lock{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2010h14v12H5ZM8%2010V6a4%204%200%200%201%208%200v4m-4%205v3%22%2F%3E%3C%2Fsvg%3E");}
.fa-medal{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%202%207%209%207-9M3%202h6l3%204%203-4h6M18%2016a6%206%200%201%201-12%200%206%206%200%200%201%2012%200Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-play-circle{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM10%208l6%204-6%204Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-question-circle{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM9%208c0-4%208-3%206%201-1%202-3%201-3%205m0%203h.01%22%2F%3E%3C%2Fsvg%3E");}
.fa-road{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%202%202%2022m15-20%205%2020M12%202v4m0%204v4m0%204v4%22%2F%3E%3C%2Fsvg%3E");}
.fa-rocket{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%208q4-6%2012-5%201%208-5%2012l-7-7Zm-1%201-5%202-1%205%208-1m5%201-1%206%205-1%202-6M7%2018l-4%204m12-14h.01%22%2F%3E%3C%2Fsvg%3E");}
.fa-scale-balanced{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20M5%2022h14M3%206h18M5%206l-4%209h8Zm14%200-4%209h8Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-search{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010a7%207%200%201%201-14%200%207%207%200%200%201%2014%200Zm-2%205%207%207%22%2F%3E%3C%2Fsvg%3E");}
.fa-server{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h18v7H3Zm0%2011h18v7H3ZM6%206h.01M6%2017h.01%22%2F%3E%3C%2Fsvg%3E");}
.fa-shield-alt{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%203%206v6q0%207%209%2010%209-3%209-10V6Zm-5%209%204%204%206-7%22%2F%3E%3C%2Fsvg%3E");}
.fa-sort{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18m-4-14%204-4%204%204M8%2017l4%204%204-4%22%2F%3E%3C%2Fsvg%3E");}
.fa-sort-amount-down{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203v18m-3-4%203%204%203-4M10%204h12M10%209h9m-9%205h6m-6%205h3%22%2F%3E%3C%2Fsvg%3E");}
.fa-sort-amount-up{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V3M1%207l3-4%203%204M10%204h3m-3%205h6m-6%205h9m-9%205h12%22%2F%3E%3C%2Fsvg%3E");}
.fa-times{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%205%2014%2014M5%2019%2019%205%22%2F%3E%3C%2Fsvg%3E");}
.fa-times-circle{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM8%208l8%208m-8%200%208-8%22%2F%3E%3C%2Fsvg%3E");}
.fa-star{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%203%207%207%201-5%205%201%207-6-4-6%204%201-7-5-5%207-1Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-sync-alt{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%200%201%2016-4l2%203m0-7v7h-7m7%205a9%209%200%200%201-16%204l-2-3m0%207v-7h7%22%2F%3E%3C%2Fsvg%3E");}
.fa-tools{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203a6%206%200%200%200-7%208L2%2018l4%204%207-8a6%206%200%200%200%208-8l-4%204-4-4%204-4Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-trash{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M9%206V3h6v3M5%206l1%2016h12l1-16M9%2010v8m6-8v8%22%2F%3E%3C%2Fsvg%3E");}
.fa-undo{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011h12a6%206%200%200%201%200%2012M9%205l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E");}
.fa-upload{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2017V2m-6%206%206-6%206%206M3%2016v6h18v-6%22%2F%3E%3C%2Fsvg%3E");}
.fa-globe-americas{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-redo{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%200%201%2016-4l2%203m0-7v7h-7m7%205a9%209%200%200%201-16%204l-2-3m0%207v-7h7%22%2F%3E%3C%2Fsvg%3E");}
.fa-refresh{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%200%201%2016-4l2%203m0-7v7h-7m7%205a9%209%200%200%201-16%204l-2-3m0%207v-7h7%22%2F%3E%3C%2Fsvg%3E");}
.fa-sort-up{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18m-4-14%204-4%204%204M8%2017l4%204%204-4%22%2F%3E%3C%2Fsvg%3E");}
.fa-sort-down{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18m-4-14%204-4%204%204M8%2017l4%204%204-4%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-clock{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011a9%209%200%201%201%202%207M3%203v8h8m1-5v6l4%202%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-cog{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203a6%206%200%200%200-7%208L2%2018l4%204%207-8a6%206%200%200%200%208-8l-4%204-4-4%204-4Z%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-friends{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h15v12H8l-5%204Zm16%205h3v14l-5-3h-6v-2%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-minus{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200ZM8%208l8%208m-8%200%208-8%22%2F%3E%3C%2Fsvg%3E");}
.fa-user-slash{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203l18%2018M10%205q6-1%2012%207l-3%204M6%206l-4%206q8%2012%2016%205M10%2010a3%203%200%200%200%204%204%22%2F%3E%3C%2Fsvg%3E");}
.fa-search-minus{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010a7%207%200%201%201-14%200%207%207%200%200%201%2014%200Zm-2%205%207%207%22%2F%3E%3C%2Fsvg%3E");}
.fa-search-plus{--ya-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010a7%207%200%201%201-14%200%207%207%200%200%201%2014%200Zm-2%205%207%207%22%2F%3E%3C%2Fsvg%3E");}

.ya-main .secondary-btn {background:#eeebe3;color:#37463f;border:1px solid #d8d2c4;box-shadow:inset 0 1px #fff;border-radius:5px;}
.ya-main .secondary-btn:hover {background:#e5dfd1;color:#233c49;}

/* ==========================================================================
   Online battle: unfinished-game dialog, rematch status
   ========================================================================== */
.resume-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 24, 40, 0.55);
}
.resume-modal {
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.resume-modal-body { padding: 22px 24px 18px; }
.resume-modal-body h4 { margin: 0 0 8px; font-size: 18px; color: var(--ya-ai); }
.resume-modal-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #5a5448; }
.resume-modal-warn {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #a02335;
  background: rgba(200, 16, 46, 0.07);
}
.resume-modal-warn.rm-warn-soft { color: #1f5f7a; background: #e8f2f7; }
.resume-modal-acts { display: flex; gap: 10px; padding: 0 24px 24px; }
.resume-modal-acts button {
  flex: 1;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.resume-modal-acts .rm-primary { background: var(--ya-ai); color: #fff; }
.resume-modal-acts .rm-ghost { background: #eceae4; color: #5a5448; }
@media (max-width: 420px) {
  .resume-modal-acts { flex-direction: column-reverse; }
}

.ya-rematch-status { margin: 8px 0 0; font-size: 13px; color: inherit; opacity: 0.8; text-align: center; }
.ya-rematch-status:empty { display: none; }

/* ==========================================================================
   Line breaking per language
   Korean breaks only between words; Japanese and Chinese keep closing marks with
   their phrase; headings balance so that no line is left holding one character;
   and a long URL or name may still break rather than push the page sideways.
   ========================================================================== */
body { overflow-wrap: break-word; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja), :lang(zh-Hant), :lang(zh-Hans) { line-break: strict; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4,
:lang(ja) button, :lang(ja) .btn { word-break: auto-phrase; }
h1, h2, h3, h4, summary, .btn, button { text-wrap: balance; }
p, li, td { text-wrap: pretty; }

/* The narrowest phones: two footer columns are just wide enough for the longest
   link if the text steps down, and a labelled button keeps to one line. */
@media (max-width: 360px) {
  footer .footer-content { column-gap: 12px; }
  footer .footer-links a { font-size: 13px; white-space: nowrap; }
  #view-profile-btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; font-size: 14px; }
}

/* Top navigation: the current section is marked the way a printed index marks
   it — lighter, warmer type over a short straight rule — rather than a lit tab. */
body > header nav ul li a { position: relative; }
body > header nav ul li a:hover { background: none; color: #fff; }
body > header nav ul li a.active { background: none; box-shadow: none; color: #f3e2b8; font-weight: 600; }
body > header nav ul li a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 2px;
  background: #d2ae68; transform: scaleX(0); transition: transform .2s ease, opacity .2s;
  opacity: 0;
}
body > header nav ul li a:hover::after { transform: scaleX(1); opacity: .35; }
body > header nav ul li a.active::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { body > header nav ul li a::after { transition: none; } }

/* Brush wordmark (tools/site/wordmark.js). The word stays in the page as text,
   for search and for screen readers; only its picture is drawn. */
.ya-logo-text { display: inline-flex; align-items: center; line-height: 0; }
.ya-wordmark { display: block; height: 42px; width: auto; margin: -2px 0 -6px; filter: drop-shadow(0 1px 0 #0c1c2466); }
.ya-logo-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) { .ya-wordmark { height: 30px; margin: -1px 0 -4px; } }
@media (max-width: 360px) { .ya-wordmark { height: 25px; margin: 0 0 -3px; } body > header .logo .ya-logo-mark { width: 24px; height: 24px; } }

/* ---------------------------------------------------------- sister sites
   Rever.si, Gomoku.com and RiichiMahjong.com, linked in the visitor's language.
   They borrow every pattern of Yamato's own games — the nav item, the sidebar
   row with its seal, the footer column, the home card — so the family reads as
   one series; only a small arrow says the link leaves the site. */
.ya-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

body > header nav ul li.ya-nav-sister.is-first { margin-left: 6px; padding-left: 8px; border-left: 1px solid #dfc38b38; }
@media (max-width: 1240px) { .ya-logo-tag { display: none; } }
@media (max-width: 1120px) and (min-width: 981px) {
  body > header nav ul li a { padding-left: 9px; padding-right: 9px; }
  body > header nav ul li a::after { left: 9px; right: 9px; }
}

.ya-sister-group { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--ya-line); }
.ya-sister-group .ya-sidebar-title { padding-top: 10px; }
a.ya-game-head.ya-sister { color: inherit; text-decoration: none; }
.ya-sister .ya-game-caret { font-size: 10.5px; color: var(--ya-muted); transform: none !important; }
.ya-sister:hover .ya-game-caret { color: var(--ya-ai); }
.ya-sister .ya-game-jp { font-family: var(--ya-font-ui); letter-spacing: .02em; }
.ya-sister[data-sister="reversi"] .ya-game-kanji,
.ya-sister-card[data-sister="reversi"] .ya-game-art { background: linear-gradient(140deg, #3a4246, #1d2326); }
.ya-sister[data-sister="gomoku"] .ya-game-kanji { background: #8a5a2b; }
.ya-sister[data-sister="mahjong"] .ya-game-kanji { background: #1f6a63; }
.ya-sister[data-sister="reversi"] .ya-game-kanji { background: #2c3236; }

footer .footer-content { grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1050px) { footer .footer-content { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 820px) { footer .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { footer .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
footer .ya-footer-sisters a { white-space: normal; }
.ya-footer-domain { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.42); letter-spacing: .02em; }
footer .ya-footer-sisters a:hover .ya-footer-domain { color: inherit; }

.ya-sister-section { margin: 4px 0 30px; }
.ya-sister-section h2 { font-family: var(--ya-font-mincho); font-size: 21px; line-height: 1.5; margin: 0 0 4px; color: var(--ya-ai); }
.ya-sister-lead { font-size: 13.5px; color: var(--ya-muted); margin: 0 0 14px; }
.ya-sister-section .ya-game-grid { margin-bottom: 0; }
.ya-sister-card[data-sister="gomoku"] .ya-game-art { background: linear-gradient(130deg, #3c3328, #241d16); }
.ya-sister-card[data-sister="mahjong"] .ya-game-art { background: linear-gradient(130deg, #1f5f58, #0f3a35); }

/* Reversi and Gomoku are real positions drawn as SVG (build.js). */
.ya-art-reversi { position: absolute; left: calc(50% - 30px); top: 22px; width: 150px; height: 150px; transform: rotate(-8deg); border: 7px solid #1a2a22; border-radius: 3px; box-shadow: 0 6px 0 #0d1712, 0 12px 20px #0007; box-sizing: content-box; }
.ya-art-gomoku-board { position: absolute; left: calc(50% - 40px); top: 16px; width: 176px; height: 176px; transform: rotate(-8deg); border-radius: 4px;
  background: linear-gradient(135deg, #e6bf7a, #d4a55c), url('/images/art/materials/kaya.webp') center/cover; background-blend-mode: multiply;
  box-shadow: 0 7px 0 #8a5f2c, 0 14px 20px #0007; }
.ya-art-gomoku-board svg { display: block; width: 100%; height: 100%; }
/* Mahjong: three honour tiles standing on the cloth, RiichiMahjong.com's glyphs
   on an ivory face with the green back showing as the tile's thickness. */
.ya-art-mahjong { position: absolute; left: calc(50% - 56px); top: 34px; display: flex; gap: 6px; transform: rotate(-5deg); }
.ya-art-mahjong i { position: relative; width: 60px; height: 84px; border-radius: 5px / 4px; display: grid; place-items: center;
  background: linear-gradient(165deg, #f8f4e9 0%, #f1eadb 60%, #e3d9c2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #b8ad97, 0 7px 0 #1f3826, 0 8px 0 #12241a, 0 14px 16px #0008; }
.ya-art-mahjong img { width: 78%; height: auto; filter: drop-shadow(0 1px 0 #ffffff80) drop-shadow(0 -.6px .4px #4a3b2447); }

/* ---------------------------------------------------------------- toasts
   A small card of the site's own paper rather than a tinted strip with a
   coloured edge: one hairline border, a soft shadow, and the kind of message
   carried by a small seal in the matching pigment — pine for done, vermilion
   for a problem, ochre for a caution, indigo for news. It sits below the
   header, slides in from the right on a wide screen and drops in on a phone. */
.toast-container { top: calc(var(--ya-header-h, 62px) + 12px); right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.toast-container.chat-position { top: calc(var(--ya-header-h, 62px) + 12px); }
.toast,
.toast.toast-success, .toast.toast-error, .toast.toast-warning, .toast.toast-info,
.toast.toast-rating-gain, .toast.toast-rating-loss, .toast.toast-rank-upgrade {
  --ya-toast-tone: #233c49;
  background: #fffdf7;
  border: 1px solid #e3dccb;
  border-left: 1px solid #e3dccb;
  border-radius: 10px;
  box-shadow: 0 1px 2px #1c281f0f, 0 10px 28px -8px #1c281f40;
  margin: 0;
  padding: 12px 12px 12px 14px;
  gap: 12px;
  width: 340px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.toast.show { transform: none; opacity: 1; }
.toast.hide { transform: translateX(calc(100% + 24px)); opacity: 0; }
.toast.toast-success, .toast.toast-rating-gain, .toast.toast-rank-upgrade { --ya-toast-tone: #2f6b4f; }
.toast.toast-error { --ya-toast-tone: #b3262f; }
.toast.toast-warning { --ya-toast-tone: #a8781c; }
.toast.toast-rating-loss { --ya-toast-tone: #6d6f69; }
.toast .toast-icon,
.toast.toast-success .toast-icon, .toast.toast-error .toast-icon,
.toast.toast-warning .toast-icon, .toast.toast-info .toast-icon {
  flex: 0 0 24px; width: 24px; height: 24px; margin: 0; align-self: flex-start;
  border-radius: 50%; background: var(--ya-toast-tone); color: #fffaf0;
  font: 700 12px/1 var(--ya-font-ui, sans-serif); box-shadow: inset 0 0 0 2px #ffffff1f;
}
.toast .toast-content { flex: 1 1 auto; min-width: 0; }
.toast .toast-title:empty { display: none; }
.toast .toast-title:empty + .toast-message { margin-top: 3px; color: #233c49; font-size: 14px; }
.toast .toast-title { margin: 1px 0 0; color: #233c49; font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.toast .toast-message { margin-top: 2px; color: #5f655f; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.toast .toast-close { align-self: flex-start; flex: 0 0 28px; width: 28px; height: 28px; margin: -4px -4px 0 4px; border-radius: 6px; color: #8b8474; font-size: 18px; }
.toast .toast-close:hover { background: #eeebe3; color: #233c49; }
.toast .toast-close:focus-visible { outline: 2px solid #c9a55c; outline-offset: 1px; }
@media (max-width: 768px) {
  .toast-container, .toast-container.chat-position { top: calc(var(--ya-header-h, 56px) + 8px); left: 12px; right: 12px; align-items: stretch; }
  .toast,
  .toast.toast-success, .toast.toast-error, .toast.toast-warning, .toast.toast-info,
  .toast.toast-rating-gain, .toast.toast-rating-loss, .toast.toast-rank-upgrade {
    min-width: 0; max-width: none; width: auto; transform: translateY(-12px);
  }
  .toast.show { transform: none; }
  .toast.hide { transform: translateY(-12px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s ease; } }

/* The invitation to the interactive lessons at the top of each tutorial. */
.ya-lessons-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 18px; padding: 16px 20px; border-radius: 12px; background: #233c49; color: #f3e6c6; text-decoration: none; border: 1px solid #405661; box-shadow: 0 8px 22px #1b303318; transition: transform .2s, box-shadow .2s; }
.ya-lessons-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px #1b303326; color: #fff; }
.ya-lessons-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; border: 1px solid #ddc38b66; font: 700 26px/1 var(--ya-font-mincho, serif); color: #f3d79c; }
.ya-lessons-text { display: grid; gap: 3px; min-width: 0; }
.ya-lessons-text b { font-family: var(--ya-font-mincho, serif); font-size: 18px; line-height: 1.45; color: #fff8e7; }
.ya-lessons-text span { font-size: 13.5px; line-height: 1.65; color: #d9d7c8; }
.ya-lessons-card > i { font-size: 26px; color: #d2ae68; }
@media (max-width: 560px) { .ya-lessons-card { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; } .ya-lessons-card > i { display: none; } .ya-lessons-mark { width: 44px; height: 44px; font-size: 22px; } .ya-lessons-text b { font-size: 16px; } }

/* Shogi card: a tilted close view of a real board (build.js SHOGI_ART). */
.ya-shogi-view { --cw: 47px; --ch: 51.2px; position: absolute; left: calc(50% - 82px); top: 2px; width: calc(var(--cw) * 5); height: calc(var(--ch) * 3); transform: rotate(-9deg);
  background: linear-gradient(120deg, #fff1c030, #bd873520), url('/images/art/materials/kaya.webp') center/cover;
  box-shadow: 0 0 0 9px #c19756, 0 9px 0 #86572c, 0 18px 26px #0007; }
.ya-shogi-grid { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, #4a3419 0 1.2px, transparent 1.2px var(--cw)), repeating-linear-gradient(0deg, #4a3419 0 1.2px, transparent 1.2px var(--ch));
  background-position: 0 0, 0 calc(var(--ch) * 3); opacity: .85; }
.ya-shogi-star { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #4a3419; left: calc(var(--cw) * var(--c)); top: 0; }
.ya-koma { position: absolute; left: calc(var(--cw) * var(--c)); top: calc(var(--ch) * var(--r)); width: var(--cw); height: var(--ch);
  filter: drop-shadow(0 0 .5px #5a3c16b3) drop-shadow(0 2px 1.4px #3c270e66); }
.ya-koma::before, .ya-koma::after { content: ''; position: absolute; left: calc((100% - 86% * var(--s)) / 2); width: calc(86% * var(--s)); height: calc(91% * var(--s));
  clip-path: polygon(50% 0%, 70% 7.5%, 77.5% 12.5%, 80.2% 16.5%, 80.8% 19%, 94% 100%, 6% 100%, 19.2% 19%, 19.8% 16.5%, 22.5% 12.5%, 30% 7.5%); }
.ya-koma::before { top: calc((100% - 91% * var(--s)) / 2 + 2%); background: linear-gradient(180deg, #c99a55, #8d6430); }
.ya-koma::after { top: calc((100% - 91% * var(--s)) / 2 - 1.5%);
  background: linear-gradient(100deg, #fffaf0a6, #fff6e000 42%), linear-gradient(180deg, #faeccad9, #e6c68bd9), url('/images/art/materials/kaya.webp') center/260%; }
.ya-koma img { position: absolute; z-index: 1; left: calc((100% - 86% * var(--s)) / 2 + 6% * var(--s)); width: calc(74% * var(--s)); top: calc((100% - 91% * var(--s)) / 2 + 3% * var(--s)); height: calc(84% * var(--s)); object-fit: contain; }
.ya-field-rule { margin: 6px 2px 0; font-size: 12.5px; line-height: 1.55; color: #7a7466; }
.ya-field-rule.is-bad { color: #b3262f; font-weight: 600; }
#signup-username[aria-invalid="true"] { border-color: #b3262f; box-shadow: 0 0 0 3px #b3262f1f; }

/* Online lobby: signed in, the name field shows the account's display name and
   cannot be edited; a quiet note under it says why and where to change it. */
.player-form input.name-locked {
  background: var(--ya-washi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6558' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  border-color: var(--ya-line);
  color: var(--ya-ai);
  font-weight: 600;
  padding-right: 38px;
  cursor: default;
}
.player-form input.name-locked:focus { outline: none; border-color: var(--ya-kin); box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); }
.ya-name-note { margin: -12px 0 16px; font-size: 13px; color: var(--ya-muted); line-height: 1.5; }
.ya-name-note a { color: var(--ya-ai-soft); text-decoration: underline; text-underline-offset: 2px; }
.ya-name-note[hidden] { display: none; }

/* Account page: per-game cards and the note that says what they count. */
.ya-section-note { margin: -6px 0 14px; font-size: 13px; color: var(--ya-muted); line-height: 1.6; }
.ya-rating-card .ya-rc-rate { margin-left: auto; }
.ya-rating-card .ya-rc-rate b { color: var(--ya-ai); }
/* Fields filled once the account loads keep their height, so nothing jumps. */
#user-display-name:empty, #user-username:empty, #user-email:empty, #user-joined:empty {
  display: inline-block; min-width: 8em; min-height: 1em; border-radius: 4px;
  background: linear-gradient(90deg, #efe8da 25%, #f7f2e8 50%, #efe8da 75%); background-size: 200% 100%;
  animation: ya-skel 1.2s ease-in-out infinite; vertical-align: middle;
}
#user-display-name:empty { min-height: 1.2em; min-width: 6em; }
@keyframes ya-skel { from { background-position: 100% 0 } to { background-position: -100% 0 } }
@media (prefers-reduced-motion: reduce) { #user-display-name:empty, #user-username:empty, #user-email:empty, #user-joined:empty { animation: none; } }

/* Profile page opened while signed out: an invitation, not an error. */
.error-container.ya-signed-out .error-icon { color: var(--ya-ai); opacity: .85; }
.error-container.ya-signed-out .btn { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 12px 32px; cursor: pointer; }

/* Leaderboards: headings sit exactly over their values. Numbers are right
   aligned in tabular figures, the position is centred, the player takes the
   remaining width; the top three wear gold, silver and bronze. */
.ya-table th.ya-num { text-align: right; }
.ya-lb { table-layout: fixed; min-width: 0; }
/* Fixed layout takes the widths from the heading row; hiding a heading cell
   removes its column cleanly. */
.ya-lb th.ya-lb-pos { width: 64px; }
.ya-lb th.ya-lb-h-rating { width: 104px; }
.ya-lb th.ya-lb-rankcol { width: 112px; }
.ya-lb th.ya-lb-h-n { width: 76px; }
.ya-lb th.ya-lb-h-rate { width: 84px; }
.ya-lb th, .ya-lb td { padding: 12px 14px; vertical-align: middle; }
.ya-lb th { font-size: 13px; letter-spacing: .04em; }
.ya-lb td { font-variant-numeric: tabular-nums; }
.ya-lb .ya-lb-pos { text-align: center; }
.ya-lb-medal { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; font-weight: 700; font-size: 13px; color: var(--ya-ai); }
.ya-lb tr.is-top-1 .ya-lb-medal { background: linear-gradient(135deg, #f2d57b, #c9a227); color: #3d2d00; }
.ya-lb tr.is-top-2 .ya-lb-medal { background: linear-gradient(135deg, #e7e9ec, #b6bcc4); color: #2e3640; }
.ya-lb tr.is-top-3 .ya-lb-medal { background: linear-gradient(135deg, #ecc29b, #b9773f); color: #3b2210; }
.ya-lb-player a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ya-ai); text-decoration: none; }
.ya-lb-player a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ya-lb td.ya-lb-rating { font-weight: 700; font-size: 15px; color: var(--ya-sumi); }
.ya-lb-rank { display: inline-block; padding: 3px 10px; border-radius: 12px; background: #f6efe2; border: 1px solid #e8dcc3; color: #7a5a1e; font-family: var(--ya-font-mincho); font-size: 12.5px; white-space: nowrap; }
.ya-lb-rank-inline { display: none; }
/* Phone: wins and losses go, and the grade moves under the name, so the name
   keeps its width. */
@media (max-width: 640px) {
  .ya-lb th.ya-lb-wl, .ya-lb td.ya-lb-wl, .ya-lb th.ya-lb-rankcol, .ya-lb td.ya-lb-rankcol { display: none; }
  .ya-lb th.ya-lb-pos { width: 40px; }
  .ya-lb th.ya-lb-h-rating { width: 62px; }
  .ya-lb th.ya-lb-h-n { width: 46px; }
  .ya-lb th.ya-lb-h-rate { width: 52px; }
  .ya-lb th, .ya-lb td { padding: 10px 6px; font-size: 13px; }
  .ya-lb-rank-inline { display: inline-block; margin-top: 4px; padding: 1px 7px; font-size: 11px; }
  .ya-lb-medal { min-width: 26px; height: 26px; font-size: 12px; }
}