/* The public build (online/server.ts --public adds this sheet and
   <html data-site="public">, see play/site.ts): the printed card faces and
   backs over the drawn cards, the printed board's squares under the pieces,
   and no way to the settings. */

/* ---------------------------------------------------------------- settings */
[data-site="public"] #rulesBadge,
[data-site="public"] #changeRules,
[data-site="public"] [data-tool="diff"],
[data-site="public"] [data-tool="settings"] { display: none !important; }

/* the test table's own tools: AUTO, the seed and the AI's policy, watching a room, the sheet line of a result */
[data-site="public"] #autoPlay,
[data-site="public"] .entry-more,
[data-site="public"] #watch,
[data-site="public"] .yy-rs-steps,
[data-site="public"] .yy-rs-line { display: none !important; }

.entry-public-note { color: var(--sym-ink-soft, inherit); font-size: 14px; opacity: 0.85; flex: 1 1 auto; align-self: center; }
.entry-public-fine { margin: 10px 0 0; font-size: 12px; opacity: 0.6; }

/* ------------------------------------------------------------- card faces */
[data-site="public"] .fu.has-face { background: #111; }
[data-site="public"] .fu > .fu-face {
  inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%;
  border-radius: inherit; z-index: 4; pointer-events: none;
}
/* numbers that change in play stay readable over the printed face */
[data-site="public"] .fu.has-face .fu-c-sum.is-disc { z-index: 5; background: oklch(20% 0.02 60 / 0.9); border-radius: 0.4em; padding: 0 0.2em; }
[data-site="public"] .fu.has-face.fu-sm .fu-hp { z-index: 5; }
[data-site="public"] .fu.has-face.fu-sm .fu-hp .num.hurt,
[data-site="public"] .fu.has-face.fu-sm .fu-hp .num.over { text-shadow: 0 0 0.2em #000, 0 0 0.4em #000; }

/* card backs: the printed back, no drawn mark */
[data-site="public"] .fu-back.has-face { background: #0d2a2e; }

/* ------------------------------------------------------------------ board */
[data-site="public"] .cell { background: url("/play/art/board/void.webp") center / cover no-repeat; }
[data-site="public"] .cell.c-yin { background: url("/play/art/board/yin.webp") center / cover no-repeat; }
[data-site="public"] .cell.c-yang { background: url("/play/art/board/yang.webp") center / cover no-repeat; }
[data-site="public"] .cell.c-taiji { background: url("/play/art/board/taiji.webp") center / cover no-repeat; }
/* the squares carry their own marks */
[data-site="public"] .raden:not(.chip) { display: none; }

/* ------------------------------------------------------------- range */
/* the printed range diagram is a few px wide on a board piece (a phone read it like an eye chart):
   the drawn one goes over it, big enough to read at a glance */
[data-site="public"] .fu-sm.has-face .fu-rblock { z-index: 5; right: 3%; bottom: 3%; height: auto; width: 36%; }
[data-site="public"] .fu-sm.has-face .fu-range,
[data-site="public"] .fu-sm.has-face .fu-range.g5 { width: 100%; box-shadow: 0 0 0 0.06em var(--sym-ink), 0 0.15em 0.4em oklch(0% 0 0 / 0.55); }
@media (max-width: 700px) {
  [data-site="public"] .fu-sm.has-face .fu-rblock { width: 48%; }
  /* the hand card's printed range, the same */
  [data-site="public"] .fu-md.has-face .fu-rblock { z-index: 5; top: auto; right: 4%; bottom: 30%; width: 42%; }
  [data-site="public"] .fu-md.has-face .fu-type { display: none; }
  [data-site="public"] .fu-md.has-face .fu-range,
  [data-site="public"] .fu-md.has-face .fu-range.g5 { width: 100%; box-shadow: 0 0 0 0.06em var(--sym-ink), 0 0.15em 0.4em oklch(0% 0 0 / 0.55); }
}

/* two ways to play (no 観戦): the switch splits in two, not three with an empty third */
[data-site="public"] .mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 「クラウドファンディング実施中 ▶ 支援ページへ」: shown only once the server is given --cf-url
   (online/server.ts marks <html data-cf-url> and points href="#cf" there; the table adds it to the result, play/site.ts). */
.cf-link { display: none; }
html[data-cf-url] .cf-link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px;
  box-sizing: border-box; margin: 18px auto 0; max-width: 520px; padding: 12px 18px;
  border: 1px solid #d7b565; border-radius: 10px;
  background: linear-gradient(180deg, rgba(215, 181, 101, 0.18), rgba(215, 181, 101, 0.06));
  color: #f5f1e2; text-decoration: none; font-weight: 700; line-height: 1.4;
}
html[data-cf-url] .cf-link:hover { background: rgba(215, 181, 101, 0.28); }
.cf-link .cf-tag { color: #f5f1e2; }
.cf-link .cf-go { color: #d7b565; white-space: nowrap; }
/* at the end of a match it leads the result, before もう一戦: a solid gold banner that pulses gently */
html[data-cf-url] .yy-result-actions .cf-link {
  box-sizing: border-box; flex-basis: 100%; max-width: 440px; margin: 2px auto 6px; padding: 12px 16px;
  flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, #f3d98f, #d7b565 55%, #b8913f); border: 1px solid #fbeab8;
  color: #1a1408; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(215, 181, 101, 0.45);
  animation: cf-glow 2.4s ease-in-out infinite;
}
html[data-cf-url] .yy-result-actions .cf-link:hover { background: linear-gradient(180deg, #f8e3a8, #e0c071 55%, #c39b48); }
html[data-cf-url] .yy-result-actions .cf-link .cf-tag { color: #3a2a0c; font-size: 0.82em; letter-spacing: 0.08em; }
html[data-cf-url] .yy-result-actions .cf-link .cf-go { color: #1a1408; font-size: 1.25em; letter-spacing: 0.06em; }
@keyframes cf-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(215, 181, 101, 0.35); }
  50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 30px rgba(243, 217, 143, 0.75); }
}
@media (prefers-reduced-motion: reduce) { html[data-cf-url] .yy-result-actions .cf-link { animation: none; } }
html[data-cf-url] .entry-rules-public .cf-link { margin: 12px 0 0; max-width: none; }
/* 「クラウドファンディング準備中」 until the URL is set (online/server.ts, play/site.ts CF_SOON_HTML): a quiet notice, not a button */
[data-site="public"] .cf-soon {
  display: flex; justify-content: center; box-sizing: border-box; margin: 18px auto 0; max-width: 520px; padding: 8px 16px;
  border: 1px dashed rgba(215, 181, 101, 0.6); border-radius: 10px;
  color: #d7b565; font-weight: 700; line-height: 1.4; letter-spacing: 0.06em;
}
[data-site="public"] .cf-soon .cf-tag { color: #d7b565; }
[data-site="public"] .yy-result-actions .cf-soon { flex-basis: 100%; max-width: 440px; margin: 2px auto 6px; font-size: 0.9em; }
[data-site="public"] .entry-rules-public .cf-soon { margin: 12px 0 0; max-width: none; }
[data-site="public"] .w-top .cf-soon { margin-left: auto; }
/* on a phone the result sits on a small board: a slimmer banner keeps もう一戦 on it */
@media (max-width: 700px) {
  html[data-cf-url] .yy-result-actions .cf-link { padding: 6px 10px; max-width: 300px; }
  html[data-cf-url] .yy-result-actions .cf-link .cf-tag { font-size: 0.72em; }
  html[data-cf-url] .yy-result-actions .cf-link .cf-go { font-size: 1.05em; }
}