/* Game interface · 2077 HUD · warning yellow / cyan / signal red
 * Shared chrome only. Board geometry, game colors and canvas rendering stay local. */
html:has(> body[data-wg-home]) {
  overflow-x: clip;
}

body[data-wg-home] {
  --game-control-cut: polygon(0 0, calc(100% - var(--cut-sm)) 0,
    100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
  --game-frame-cut: polygon(var(--cut-md) 0, 100% 0,
    100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%,
    0 100%, 0 var(--cut-md));
  color: var(--color-ink);
  font-family: var(--font-body);
  background-color: var(--color-paper);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-line) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-line) 24%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  overflow-x: clip;
}

/* Keep each game's own dimensions and overflow behavior, including wide boards. */
body[data-wg-home] > .wrap,
body[data-wg-home] > .panel {
  background: var(--color-surface);
  border-color: var(--color-line);
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--color-line),
    0 24px 64px color-mix(in srgb, var(--color-paper) 85%, transparent);
}

/* Cut only the decorative frame. Clipping a game container would cut its board,
 * focus rings, or scrollable minefield along with the corners. */
body[data-wg-home] > .wrap::before,
body[data-wg-home] > .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border: 1px solid var(--color-line);
  clip-path: var(--game-frame-cut);
  background:
    linear-gradient(135deg, transparent 46%, var(--color-accent) 47% 53%, transparent 54%)
      top left / var(--cut-md) var(--cut-md) no-repeat,
    linear-gradient(135deg, transparent 46%, var(--color-red) 47% 53%, transparent 54%)
      bottom right / var(--cut-md) var(--cut-md) no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent))
      top right / 48px 2px no-repeat,
    linear-gradient(var(--color-cyan), var(--color-cyan))
      bottom left / 32px 2px no-repeat;
}

body[data-wg-home] .overlay {
  background:
    linear-gradient(90deg, var(--color-accent-soft), transparent 48%),
    color-mix(in srgb, var(--color-paper) 97%, transparent);
  color: var(--color-ink);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--color-line),
    inset 3px 0 0 var(--color-accent);
  backdrop-filter: blur(8px);
}

body[data-wg-home] .overlay :is(.icon-big, .big, .ant-big) {
  filter: grayscale(1);
  opacity: .5;
  animation: none;
}

body[data-wg-home] :is(.title, .over-title, .ov-title, .head h1, .overlay h3) {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  text-shadow: none;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-wg-home] :is(.title .sub, .title .en, .head .sub) {
  color: var(--color-cyan);
  font-family: var(--font-mono);
  opacity: 1;
}

body[data-wg-home] :is(.tip, .hint, .best, .over-sub, .ov-sub, .ov-tip, .overlay p) {
  color: var(--color-muted);
  opacity: 1;
}

body[data-wg-home] :is(.tip b, .hint b, .over-sub b, .overlay p b) {
  color: var(--color-ink);
}

body[data-wg-home] :is(.counter, .stat, .hud-item, .sidenote > .panel) {
  background: var(--color-surface-raised);
  border-color: var(--color-line);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--color-line),
    inset 2px 0 0 var(--color-accent);
}

body[data-wg-home] :is(.counter, .stat, .hud-item, .score-final, .hud-val) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

body[data-wg-home] :is(.counter, .stat, .hud-item) small {
  color: var(--color-muted);
  opacity: 1;
}

body[data-wg-home] :is(.counter.accent, .hud-item.accent, .score-final) {
  color: var(--color-accent);
  text-shadow: none;
}

body[data-wg-home] :is(.btn-primary, .btn-ghost) {
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  clip-path: var(--game-control-cut);
  box-shadow: none;
  white-space: nowrap;
  letter-spacing: .04em;
  transition: transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

body[data-wg-home] .btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

body[data-wg-home] .btn-ghost {
  background: linear-gradient(135deg, var(--color-control-line) 0 1px,
    var(--color-surface-raised) 1px);
  color: var(--color-ink);
  border-color: var(--color-control-line);
}

body[data-wg-home] .btn-primary:hover:not(:disabled) {
  background: var(--color-ink);
}

body[data-wg-home] .btn-ghost:hover:not(:disabled) {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

body[data-wg-home] :is(.btn-primary, .btn-ghost):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

body[data-wg-home] :is(.btn-primary, .btn-ghost):disabled {
  opacity: .45;
  cursor: not-allowed;
}

body[data-wg-home] :is(button, a):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* An unclipped keyboard focus ring stays visible around cut-corner controls. */
body[data-wg-home] :is(.btn-primary, .btn-ghost):focus-visible,
body[data-wg-home] .footer .wg-tools :is(#mute-btn, .wg-home-btn, .wg-lang-btn):focus-visible {
  clip-path: none;
}

body[data-wg-home] .new-record {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 0;
  animation: none;
}

/* This footer remains a mount point for i18n.js; it contains no promotional copy. */
body[data-wg-home] .footer {
  max-width: 100%;
  color: var(--color-muted);
  font-family: var(--font-body);
}

body[data-wg-home] .footer .wg-tools {
  gap: var(--space-sm);
  margin-bottom: 0;
}

/* i18n.js injects its styles late; explicit specificity keeps the shared skin. */
body[data-wg-home] .footer .wg-tools :is(#mute-btn, .wg-home-btn, .wg-lang-btn) {
  color: var(--color-ink) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-control-line) !important;
  border-radius: 0 !important;
  clip-path: var(--game-control-cut);
  box-shadow: none !important;
  min-height: 44px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-inline: 12px !important;
}

body[data-wg-home] .footer .wg-tools :is(#mute-btn, .wg-home-btn, .wg-lang-btn):hover {
  color: var(--color-cyan) !important;
  border-color: var(--color-cyan) !important;
}

body[data-wg-home] .footer .wg-tools #mute-btn[data-wg-mute="1"] {
  color: var(--color-red) !important;
  border-color: var(--color-red) !important;
}

body[data-wg-home] .wg-lang-menu {
  color: var(--color-ink);
  background: var(--color-surface-raised);
  border-color: var(--color-control-line);
  border-radius: 0;
  box-shadow: 0 8px 32px var(--color-paper);
}

body[data-wg-home] .wg-lang-menu button {
  min-height: 44px;
  color: var(--color-ink);
  border-radius: 0;
  font-family: var(--font-body);
}

body[data-wg-home] .wg-lang-menu button:is(:hover, [aria-current="true"]) {
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

/* Preserve the underlying emoji text: the mute observer reads it as state. */
body[data-wg-home] .footer .wg-ico {
  font-size: 0 !important;
}

body[data-wg-home] .footer .wg-ico::after {
  font-family: var(--font-mono);
  font-size: 18px;
}

body[data-wg-home] #mute-btn .wg-ico::after { content: "♪"; }
body[data-wg-home] #mute-btn[data-wg-mute="1"] .wg-ico::after { content: "×"; }
body[data-wg-home] .wg-home-btn .wg-ico::after { content: "⌂"; }
body[data-wg-home] .lottery-next-game .wg-ico::after { content: none !important; }
body[data-wg-home] .wg-lang-btn .wg-ico::after { content: "文"; }

@media (prefers-reduced-motion: reduce) {
  body[data-wg-home] :is(.btn-primary, .btn-ghost),
  body[data-wg-home] .footer * {
    transition: none !important;
  }
}