@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');

:root {
  --bg: #07090a;
  --surface: #0d1111;
  --surface-2: #121716;
  --line: #26312e;
  --line-soft: #19211f;
  --text: #eef3f0;
  --muted: #73807b;
  --mint: #73f5bd;
  --mint-dim: #153f31;
  --red: #ff5d68;
}

* { scrollbar-color: #34433e transparent; }
html, body { background: var(--bg) !important; }
body {
  color: var(--text) !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  background:
    linear-gradient(rgba(115,245,189,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115,245,189,.025) 1px, transparent 1px),
    var(--bg) !important;
  background-size: 48px 48px !important;
}
main { position: relative; background: transparent !important; }
main::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 50;
  background: var(--mint);
  box-shadow: 0 0 22px rgba(115,245,189,.35);
}

/* Palette reset */
[class*="bg-[#063719]"] { background: #0b3d2f !important; }
[class*="bg-[#0b0b0b]"], [class*="bg-[#101010]"], [class*="bg-[#111]"], [class*="bg-black"] {
  background-color: var(--surface) !important;
}
[class*="border-[#214b28]"], [class*="border-zinc-9"], [class*="border-zinc-8"],
[class*="border-zinc-7"], [class*="border-zinc-6"] { border-color: var(--line) !important; }
[class*="text-lime-3"], [class*="text-lime-2"] { color: var(--mint) !important; }
[class*="text-amber-2"] { color: #e8dec2 !important; }
[class*="text-zinc-4"], [class*="text-zinc-5"] { color: var(--muted) !important; }
[class*="bg-lime-8"] { background: #167f5e !important; }
[class*="bg-zinc-8"], [class*="bg-zinc-9"] { background: #18201e !important; }

/* Landing */
main > div[class*="max-w-[760px]"] {
  max-width: 940px !important;
  padding: clamp(20px, 5vw, 72px) 18px !important;
}
main > div[class*="max-w-[760px]"] > section {
  position: relative;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.42) !important;
}
main > div[class*="max-w-[760px]"] > section::before {
  content: 'K-MAHJONG / 01';
  position: absolute;
  top: -26px; left: 0;
  color: var(--mint);
  font: 700 10px 'Barlow Condensed', sans-serif;
  letter-spacing: .28em;
}
main > div[class*="max-w-[760px]"] > section > div {
  padding: clamp(22px, 4vw, 44px) !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(115,245,189,.035) 72%),
    var(--surface) !important;
}
main > div[class*="max-w-[760px]"] > section > div > div:first-child {
  align-items: flex-end !important;
  padding-bottom: 24px !important;
  border-color: var(--line) !important;
}
main > div[class*="max-w-[760px]"] h1 {
  max-width: 560px;
  color: var(--text) !important;
  font-size: clamp(27px, 5vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
  line-height: 1.05;
}
main > div[class*="max-w-[760px]"] h1 + div {
  margin-top: 9px !important;
  color: #53605b !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: .27em;
}
main > div[class*="max-w-[760px]"] [class*="md:grid-cols-[1fr_1fr]"] { gap: 1px !important; background: var(--line); }
main > div[class*="max-w-[760px]"] form,
main > div[class*="max-w-[760px]"] [class*="md:grid-cols-[1fr_1fr]"] > div {
  padding: 24px !important;
  border: 0 !important;
  background: var(--surface) !important;
}

/* Form system */
input {
  border: 0 !important;
  border-bottom: 1px solid #39443f !important;
  border-radius: 0 !important;
  background: #090c0c !important;
  color: var(--text) !important;
  transition: border-color .16s, background .16s !important;
}
input:focus { border-color: var(--mint) !important; background: #0c1210 !important; box-shadow: none !important; }
button:not([class*="relative shrink-0"]), label[class*="cursor-pointer"] {
  border-radius: 0 !important;
  letter-spacing: .025em;
  transition: color .14s, background .14s, border-color .14s, opacity .14s !important;
}
button:not([class*="relative shrink-0"]):hover:not(:disabled), label[class*="cursor-pointer"]:hover {
  transform: none !important;
  filter: none !important;
  border-color: var(--mint) !important;
  color: var(--mint) !important;
}
button[class*="bg-[#132014]"], button[class*="bg-lime-8"] {
  border-color: var(--mint) !important;
  color: #06110d !important;
  background: var(--mint) !important;
}
button[class*="bg-[#241a05]"] {
  border-color: #44514c !important;
  color: #dbe3df !important;
  background: #171c1a !important;
}
button:disabled { opacity: .25 !important; filter: grayscale(1) !important; }

span[aria-label$="のアイコン"] {
  border-radius: 1px !important;
  border-color: #3b4b45 !important;
  color: var(--mint) !important;
  background-color: #10241d !important;
  box-shadow: none !important;
}

/* Game chrome */
main > div[class*="max-w-[1420px]"] {
  max-width: 1480px !important;
  gap: 10px !important;
  padding: 10px !important;
}
main > div[class*="max-w-[1420px]"] > header {
  min-height: 58px;
  padding: 9px 14px !important;
  border-color: var(--line) !important;
  background: rgba(10,13,13,.96) !important;
  box-shadow: none !important;
}
main > div[class*="max-w-[1420px]"] > header h1 {
  color: var(--text) !important;
  font-size: 14px !important;
  letter-spacing: .015em;
}
main > div[class*="max-w-[1420px]"] > header h1::before {
  content: 'KM  /  ';
  color: var(--mint);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .17em;
}
main > div[class*="max-w-[1420px]"] > header span[class*="rounded"] {
  border-radius: 0 !important;
  border-left: 2px solid var(--mint);
  color: var(--mint) !important;
  background: #101715 !important;
}

/* Player status */
[class*="md:grid-cols-4"] { gap: 6px !important; }
[class*="md:grid-cols-4"] > div {
  padding: 9px 11px !important;
  border-color: var(--line-soft) !important;
  background: var(--surface) !important;
}
[class*="md:grid-cols-4"] > div[class*="border-lime-400"] {
  border-color: var(--mint) !important;
  background: #101b17 !important;
  box-shadow: inset 2px 0 var(--mint) !important;
}

/* Table: flat, precise, no casino ornament */
div[class*="relative min-h-[520px]"] {
  min-height: 610px !important;
  border: 1px solid #315749 !important;
  border-radius: 2px !important;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at center, #0c6249 0, #084633 55%, #063728 100%) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  box-shadow: inset 0 0 100px rgba(0,0,0,.32) !important;
}
div[class*="relative min-h-[520px]"]::after {
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(115,245,189,.12);
}
div[class*="absolute w-[236px]"] {
  border: 0 !important;
  border-left: 1px solid rgba(115,245,189,.35) !important;
  border-radius: 0 !important;
  background: rgba(3,20,15,.62) !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px);
}
div[class*="pointer-events-none absolute inset-0 grid place-items-center"] > div {
  border: 1px solid rgba(115,245,189,.42) !important;
  border-radius: 0 !important;
  background: rgba(5,15,12,.91) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.28) !important;
}
div[class*="pointer-events-none absolute inset-0 grid place-items-center"] [class*="text-3xl"] {
  color: var(--text) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: .24em !important;
}

/* Tiles */
button[class*="relative shrink-0"] {
  border-radius: 2px !important;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.36));
}
button[class*="relative shrink-0"]:hover:not(:disabled) {
  transform: translateY(-4px) !important;
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.38)) brightness(1.03);
}
button[class*="relative shrink-0"]:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
[class*="bg-gradient-to-b"][class*="from-emerald"] {
  border-color: #315d4d !important;
  background: linear-gradient(to bottom, #134f3c, #092c22) !important;
}

/* Panels / log / hand */
div[class*="border border-zinc-800 bg-[#111] p-2"],
div[class*="flex flex-col border border-zinc-800"] {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  background: rgba(10,13,13,.96) !important;
  box-shadow: none !important;
}
div[class*="flex flex-col border border-zinc-800"] > div:first-child {
  color: var(--mint) !important;
  font: 700 10px 'Barlow Condensed', sans-serif;
  letter-spacing: .24em;
}
[class*="border-l border-zinc-700"] { border-color: #2e5145 !important; }

/* Action color hierarchy */
button[class*="border-red"] { border-color: #70343a !important; background: #251012 !important; color: #ff9299 !important; }
button[class*="border-sky"] { border-color: #315866 !important; background: #0c1c20 !important; color: #a7dfe8 !important; }
button[class*="border-amber"] { border-color: #59533f !important; background: #1a1811 !important; color: #ded3ae !important; }

/* Settlement */
div[class*="absolute inset-0 z-10"] { background: rgba(3,7,6,.78) !important; backdrop-filter: blur(8px); }
div[class*="max-w-[460px]"] {
  border-radius: 0 !important;
  border-color: var(--mint) !important;
  background: #0b100e !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5) !important;
}

@media (max-width: 1023px) {
  div[class*="relative min-h-[520px]"] { min-height: 560px !important; }
}
@media (max-width: 720px) {
  body { background-size: 32px 32px !important; }
  main > div[class*="max-w-[760px]"] { padding: 34px 10px 10px !important; }
  main > div[class*="max-w-[760px]"] > section > div { padding: 20px 14px !important; }
  main > div[class*="max-w-[760px]"] form,
  main > div[class*="max-w-[760px]"] [class*="md:grid-cols-[1fr_1fr]"] > div { padding: 16px !important; }
  main > div[class*="max-w-[1420px]"] { padding: 4px !important; }
  main > div[class*="max-w-[1420px]"] > header { padding: 8px !important; }
  div[class*="relative min-h-[520px]"] { min-height: 520px !important; }
  div[class*="absolute w-[236px]"] { width: 188px !important; padding: 5px !important; }
}