/* Original warm-neutral UI and locally hosted OFL typography. */
@font-face { font-family: 'Moju UI Sans'; src: url('./moju-ui-sans.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }
:root { --sans: 'Moju UI Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; --serif: var(--sans); --paper: #f6f5f2; --card: #fffefc; --ink: #262624; --muted: #77756e; --green: #575550; --green-dark: #2d2c29; --green-soft: #eeede8; --line: #e5e3de; --vermilion: #95704a; }
body { background: var(--paper); font-family: var(--sans); font-weight: 400; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
button, a, input, select { transition: background-color .16s, border-color .16s, box-shadow .16s, color .16s, transform .16s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .rule-options input:focus-visible + span { outline: 3px solid #6b655a60; outline-offset: 3px; }
.brand { gap: 12px; }
.brand-name { font-family: var(--sans); font-size: 26px; font-weight: 700; letter-spacing: -.05em; }
.brand-mark { border-radius: 13px; background: #29292b; border-color: #29292b; box-shadow: 0 4px 10px #29292b12; }
.brand-mark i { background: #a1a1a6; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: #fff; border: 0; }
.brand-game { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: #eeeeef; color: #6e6e73; letter-spacing: .02em; }
.header-note { color: #86868b; font-size: 12px; letter-spacing: 0; }
.tiny-seal { width: 7px; height: 7px; background: #8e8e93; border: 0; border-radius: 50%; font-size: 0; transform: none; box-shadow: 0 0 0 4px #8e8e9312; }
.site-header { border-bottom-color: #e5e5e7; }
.home-view { gap: 32px; }
.home-intro { border-radius: 24px; border: 1px solid #e5e7e8; padding: 40px; }
.home-intro::after { background: linear-gradient(180deg, #faf8f2c7, #faf8f24a 47%, transparent 70%); }
.home-intro .eyebrow { color: #76715f; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.home-intro .eyebrow > span:first-child { width: 18px; background: #aa8c65; }
.home-intro h1 { font-family: var(--sans); font-size: clamp(38px, 3.7vw, 52px); font-weight: 650; line-height: 1.22; letter-spacing: -.055em; margin-top: 24px; }
.home-intro h1 > span { color: #333336; }
.home-intro .intro-description { font-size: 14px; line-height: 1.9; letter-spacing: 0; color: #6e6e73; }
.home-features { font-size: 11px; font-weight: 500; }
.home-features span { padding: 5px 9px; color: #6e6e73; background: #ffffffc7; border: 1px solid #ffffffdf; border-radius: 6px; }
.home-features span:nth-child(2) { color: #6e6e73; }
.hero-caption { font-size: 12px; letter-spacing: .02em; }
.caption-mark { border-radius: 6px; font-family: var(--sans); font-size: 17px; }
.room-card { border-radius: 22px; padding: 32px; border: 1px solid #e9e9eb; box-shadow: 0 16px 48px #1d1d1f08, 0 2px 6px #1d1d1f04; }
.card-heading { margin-bottom: 16px; }
.section-number { font-size: 11px; font-weight: 500; color: #86868b; letter-spacing: .04em; }
.card-leaf { color: #a1a1a6; }
.room-card h2 { font-size: 26px; font-weight: 650; letter-spacing: -.035em; line-height: 1.4; }
.room-card .card-description { margin-top: 8px; font-size: 13px; color: #6e6e73; }
.play-modes { padding: 4px; margin-top: 20px; border: 1px solid #e7e7e9; border-radius: 11px; gap: 3px; }
.play-modes button { font-size: 13px; min-height: 40px; font-weight: 500; border-radius: 8px; color: #6e6e73; }
.play-modes button[aria-pressed="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 2px 5px #0000000e; }
#createForm { margin-top: 24px; }
label { font-size: 13px; color: #515154; font-weight: 500; margin-bottom: 8px; }
.label-note { font-size: 11px; font-weight: 400; color: #86868b; }
input, .identity-fields select { background: #fdfdfd; border: 1px solid #dedee1; border-radius: 9px; font-size: 14px; color: #3a3a3c; }
input::placeholder { color: #96969c; font-size: 12px; letter-spacing: 0; }
input:hover, .identity-fields select:hover { border-color: #b7b7bd; }
input:focus, .identity-fields select:focus { border-color: #a29c90; box-shadow: 0 0 0 3px #6b655a15; outline: none; }
.identity-fields select { font-size: 12px; }
.rule-choice { margin-top: 16px; }
.rule-choice legend { font-size: 11px; font-weight: 500; color: #6e6e73; margin-bottom: 7px; }
.rule-options { gap: 8px; }
.rule-options span { background: #fff; border-color: #e3e3e6; border-radius: 8px; font-size: 12px; color: #6e6e73; min-height: 38px; }
.rule-options input:checked + span { box-shadow: none; font-weight: 500; }
.rule-options input[value="renju"]:checked + span { box-shadow: none; }
.button { font-size: 13px; font-weight: 500; border-radius: 9px; }
.button-primary { background: #2d2c29; color: #fffefb; border-color: #2d2c29; box-shadow: 0 4px 10px #29282515, inset 0 1px #ffffff1c; }
.button-primary:hover:not(:disabled) { background: #44423e; border-color: #44423e; box-shadow: 0 5px 15px #29282520; }
.button-outline, .button-secondary { color: #515154; border-color: #dedee2; background: #fff; box-shadow: 0 1px 2px #00000004; }
.button-outline:hover:not(:disabled), .button-secondary:hover:not(:disabled) { background: #f5f5f7; border-color: #bdbdc2; }
.button-quiet { background: #ffffffc7; color: #6e6e73; border-color: #e0e0e3; }
.button-quiet:hover:not(:disabled) { background: #fff; }
.create-button { margin-top: 18px; min-height: 48px; }
.create-button > span:last-child { color: #ffffff; }
.form-divider { color: #86868b; font-size: 11px; margin: 22px 0; }
.field-hint { color: #86868b; font-size: 10px; line-height: 1.7; }
.privacy-note { font-size: 10px; color: #86868b; border-top-color: #ebebed; }
.privacy-note svg { stroke: #86868b; }
.site-footer { font-size: 10px; color: #86868b; border-top-color: #e5e5e7; letter-spacing: 0; }
.footer-brand { font-family: var(--sans); letter-spacing: 0; }
.active-game { background: var(--paper); }
.active-game .game-heading h1 { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.rules-badge { background: #eeeeef; color: #6e6e73; padding: 2px 7px; border-radius: 5px; }
.active-game .player-card { border: 1px solid #e2e2e5; background: #fff; border-radius: 11px; box-shadow: 0 2px 4px #1d1d1f03; }
.player-name-line strong { font-size: 13px; font-weight: 600; }
.player-meta { font-size: 10px; margin-top: 3px; color: #86868b; }
.role-label { color: #86868b; }
.active-game #blackPlayer.is-turn { background: #fafafa; border-color: #b0b0b6; box-shadow: inset 3px 0 #48484a; }
.active-game #whitePlayer.is-turn { background: #fafafa; border-color: #b0b0b6; box-shadow: inset 3px 0 #48484a; }
.you-tag { background: #ededee; color: #515154; font-weight: 500; }
.turn-indicator { background: #48484a; font-size: 9px; border-radius: 4px; letter-spacing: 0; }
.active-game #whitePlayer .turn-indicator, .active-game #blackPlayer .turn-indicator { background: #48484a; }
.game-heading .eyebrow { color: #86868b; }
.versus { font-family: var(--sans); color: #b0b0b6; }
.board-turn-strip, .board-turn-strip > span:last-child { color: #86868b; }
.turn-strip-dot { background: #a1a1a6; }
.active-game .board-shell { border-radius: 10px; box-shadow: 0 12px 28px #1d1d1f14, 0 2px 5px #1d1d1f0a; }
.board-surface { background-image: linear-gradient(#fffaf05e, #fffaf05e), url('./board-maple.webp'); }
.active-game .status-card { background: #fff; color: #1d1d1f; border: 1px solid #e5e5e7; border-radius: 16px; box-shadow: 0 4px 16px #00000004; }
.status-card .section-number { color: #86868b; font-size: 10px; }
.active-game .status-emblem { display: flex; width: 34px; height: 34px; font: 600 16px var(--sans); border-radius: 10px; border: 1px solid #e4e4e7; background: #f5f5f7; color: #6e6e73; }
.active-game .status-card h2 { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.status-card > p { color: #6e6e73; font-size: 12px; line-height: 1.9; }
.your-role { color: #86868b; font-size: 11px; border-color: #ededee; }
.panel-tabs { border-radius: 10px; padding: 4px; }
.panel-tabs button { font-size: 12px; border-radius: 7px; color: #6e6e73; }
.panel-tabs button[aria-pressed="true"] { color: #1d1d1f; background: #fff; box-shadow: 0 1px 4px #00000008; font-weight: 500; }
.invite-card, .rematch-card, .rules-card { border: 1px solid #e5e5e7; border-radius: 13px; background: #fff; }
.invite-card h2, .rematch-card h2, .rules-card h2 { font: 600 15px/1.6 var(--sans); letter-spacing: -.01em; }
.invite-card > p, .rematch-card > p, .rules-card p { font-size: 12px; color: #6e6e73; line-height: 1.9; }
.room-code { border: 1px solid #e5e5e7; background: #f5f5f7; border-radius: 9px; }
.room-code > strong { color: #3a3a3c; font: 600 17px/1.5 var(--sans); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.room-code > span { color: #86868b; border-color: #e3e3e6; }
.board-footer { color: #86868b; font-size: 10px; }
.move-idle { font: 400 12px/1.8 var(--sans); color: #86868b; }
.confirm-setting, .move-controls .text-button { font-size: 12px; color: #6e6e73; }
.move-preview { border-radius: 10px; }
.game-tools button { background: #fff; border: 1px solid #e5e5e7; color: #6e6e73; box-shadow: 0 2px 5px #1d1d1f04; }
.game-tools button:first-child { background: #fff; color: #515154; border-color: #e0e0e3; }
.game-tools button.has-notice { background: #48484a; color: #fff; border-color: #48484a; }
.tools-dialog, .leave-dialog { font-family: var(--sans); background: #fafafa; border-color: #e0e0e3; box-shadow: 0 16px 60px #1d1d1f22; }
.tools-heading h2, .leave-dialog h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; }
.leave-dialog p { color: #6e6e73; }
.toast { background: #303033f5; border-color: #555559; border-radius: 12px; box-shadow: 0 8px 28px #1d1d1f22; }
.connection-status { color: #6e6e73; font-size: 11px; }
.connection-status[data-state="connected"] { color: #6e6e73; }
.connection-status[data-state="connected"] .status-dot { background: #8c9893; box-shadow: 0 0 0 3px #8c989315; }
.connection-status[data-state="local"] { color: #6e6e73; }
.play-modes, .panel-tabs { background: #eeede9; border-color: #e7e5e0; }
.rule-options input:checked + span, .rule-options input[value="renju"]:checked + span { background: #f2f0eb; border-color: #b7b1a5; color: #3d3a34; }
.move-preview { background: #f0eee8; border-color: #dfdbd2; }
.vote-status span.has-vote { background: #eeece6; border-color: #d5d0c5; color: #575550; }
.game-heading .eyebrow > span:last-child { color: #77756e; }
@media (max-width: 1050px) and (min-width: 761px) {
  .home-intro { padding: 28px; }
  .home-intro h1 { font-size: 36px; }
  .room-card { padding: 24px; }
}
@media (max-width: 760px) {
  .home-view { gap: 16px; }
  .brand-name { font-size: 23px; }
  .brand-game { font-size: 10px; padding: 2px 6px; }
  .header-note { font-size: 10px; }
  .home-intro { padding: 14px 18px; min-height: 112px; border-radius: 14px; }
  .home-intro::after { background: linear-gradient(90deg, #faf8f2fa, #faf8f2cf 48%, #faf8f200); }
  .home-intro h1 { font-size: 24px; line-height: 1.3; margin: 0; letter-spacing: -.04em; }
  .home-intro h1 > span { font-size: 20px; }
  .home-intro .eyebrow, .home-intro .intro-description { display: none; }
  .home-features { margin-top: 8px; font-size: 9px; }
  .home-features span { padding: 1px 5px; }
  .room-card { padding: 20px; border-radius: 16px; }
  .room-card h2 { font-size: 22px; }
  .room-card .card-description { font-size: 11px; margin-top: 5px; }
  .play-modes { margin-top: 10px; }
  .play-modes button { min-height: 34px; font-size: 12px; }
  #createForm { margin-top: 15px; }
  label { font-size: 12px; }
  .label-note { font-size: 10px; }
  .rule-choice { margin-top: 12px; }
  .rule-choice legend { font-size: 10px; margin-bottom: 6px; }
  .rule-options span { min-height: 36px; font-size: 11px; }
  .create-button { margin-top: 15px; min-height: 46px; }
  .form-divider { margin: 14px 0; font-size: 10px; }
  .privacy-note, .field-hint { font-size: 9px; }
  .active-game .game-heading h1 { font-size: 16px; }
  .active-game .status-emblem { display: none; }
  .player-name-line strong { font-size: 12px; }
  .player-meta { font-size: 9px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .active-game .game-heading h1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  button, a, input, select { transition: none; }
}