:root {
  color-scheme: dark;
  --cream: #fff8e9;
  --gold: #e9b85e;
  --jade: #62dabd;
  --ink: #17090a;
  --red: #7d1018;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #100706;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button, a { font: inherit; }
button { color: inherit; }

.game-shell {
  position: relative;
  width: min(100vw, 560px);
  height: 100dvh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(11, 5, 4, .22), rgba(40, 1, 7, .28)),
    url("../../assets/game-art/photon-mahjong-table.png") center/cover no-repeat,
    #5c080f;
  box-shadow: 0 0 70px #000;
}

.game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(5, 0, 1, .28) 100%);
}

.ambient-glow {
  position: absolute;
  z-index: 0;
  width: 45vw;
  max-width: 260px;
  aspect-ratio: 1;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(88, 255, 224, .1);
  filter: blur(50px);
  pointer-events: none;
}

#fxCanvas { position: absolute; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

.screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  opacity: 0;
}

.screen.active { display: flex; animation: screenIn .35s ease both; }

@keyframes screenIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.round-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 238, 198, .28);
  border-radius: 50%;
  color: #fff0ce;
  text-decoration: none;
  background: rgba(30, 11, 10, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 5px 18px rgba(0,0,0,.28);
  cursor: pointer;
}

.round-button:active { transform: translateY(2px); }

.menu-screen { flex-direction: column; padding: max(22px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom)); }
.menu-top { display: flex; justify-content: space-between; }

.title-lockup { position: relative; z-index: 1; text-align: center; margin-top: clamp(30px, 8vh, 82px); }
.kicker { margin: 0 0 9px; color: #e8ba68; font-size: 10px; font-weight: 800; letter-spacing: .3em; }
.title-lockup h1 { margin: 0; color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-size: clamp(37px, 10vw, 58px); font-weight: 500; line-height: .9; letter-spacing: -.04em; text-shadow: 0 4px 22px #170000; }
.title-lockup h1 span { display: block; color: #73e3cb; font-size: .46em; font-family: inherit; font-style: italic; letter-spacing: .14em; text-transform: uppercase; }
.title-cn { margin: 12px 0 0; color: rgba(255,241,212,.68); font-family: "STKaiti", "KaiTi", serif; font-size: 16px; letter-spacing: .5em; text-indent: .5em; }

.mini-stack { position: relative; height: 128px; width: 200px; margin: 15px auto 2px; perspective: 700px; }
.demo-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 88px;
  border: 2px solid #fff8df;
  border-radius: 9px;
  color: #bc2029;
  background: linear-gradient(145deg, #fffff8, #e8debd 72%, #cdbd91);
  box-shadow: 0 8px 0 #a99770, 0 14px 18px rgba(0,0,0,.48), inset 0 0 0 3px rgba(91,69,36,.12);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
}
.demo-tile span { font-size: 13px; }
.demo-one { left: 18px; top: 24px; color: #168666; transform: rotate(-12deg); }
.demo-two { left: 68px; top: 6px; z-index: 2; }
.demo-three { right: 12px; top: 28px; color: #d3242e; transform: rotate(12deg); }

.menu-card {
  width: 100%;
  margin-top: auto;
  padding: 17px;
  border: 1px solid rgba(255, 225, 165, .27);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(34, 12, 11, .93), rgba(19, 8, 8, .88));
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.menu-label { margin: 0 0 10px 4px; color: #b79d77; font-size: 9px; font-weight: 800; letter-spacing: .24em; }
.level-choice {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 43px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255,240,208,.2);
  border-radius: 15px;
  text-align: left;
  color: #2b130b;
  background: linear-gradient(135deg, #f5d69a, #d49d4b);
  box-shadow: inset 0 1px #fff1c5, 0 6px 0 #6b2817, 0 11px 18px rgba(0,0,0,.3);
  cursor: pointer;
}
.level-choice:active { transform: translateY(3px); box-shadow: inset 0 1px #fff1c5, 0 3px 0 #6b2817; }
.level-choice.locked { color: rgba(255,239,210,.45); background: linear-gradient(135deg, #392120, #241313); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 0 #100706; cursor: not-allowed; }
.level-number { font-family: Georgia, serif; font-size: 25px; border-right: 1px solid currentColor; }
.level-choice strong { display: block; font-family: Georgia, serif; font-size: 16px; }
.level-choice small { display: block; margin-top: 3px; font-size: 10px; opacity: .68; }
.level-choice b { font-size: 10px; letter-spacing: .15em; }
.rule-note { margin: 17px 3px 0; color: #b5a490; font-size: 10px; line-height: 1.55; }

.play-screen { flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 17px max(14px, env(safe-area-inset-bottom)); }
.game-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.chapter-heading { text-align: center; text-shadow: 0 2px 8px #130000; }
.chapter-heading small, .status-bar small, .combo-readout small, .result-stats small { display: block; color: #caa974; font-size: 8px; font-weight: 800; letter-spacing: .22em; }
.chapter-heading strong { display: block; margin-top: 3px; color: #fff4d8; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }

.status-bar { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; margin-top: 11px; padding: 8px 16px; border-block: 1px solid rgba(241,192,108,.2); background: linear-gradient(90deg, transparent, rgba(25,5,6,.45), transparent); }
.status-bar > div:first-child { text-align: left; }
.status-bar > div:last-child { text-align: right; }
.status-bar strong { display: block; margin-top: 1px; color: #fff7e7; font-family: Georgia, serif; font-size: 21px; font-variant-numeric: tabular-nums; }
.seal { display: grid; place-items: center; width: 38px; height: 38px; margin: auto; border: 1px solid #eab95d; border-radius: 50%; color: #eac273; background: rgba(100,13,18,.72); box-shadow: inset 0 0 0 3px rgba(234,185,93,.12); font-family: "STKaiti", "KaiTi", serif; font-size: 20px; }

.board-wrap { position: relative; flex: 1 1 auto; min-height: 390px; margin: 7px -4px 4px; perspective: 1100px; }
.board-halo { position: absolute; inset: 11% 3% 7%; border-radius: 45%; background: rgba(101,255,225,.06); filter: blur(22px); pointer-events: none; }
.tile-board { position: absolute; inset: 0; transform: rotateX(5deg); transform-origin: 50% 70%; }

.mahjong-tile {
  --edge: #9a8966;
  position: absolute;
  z-index: var(--zi);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--tw);
  height: var(--th);
  padding: 0;
  border: 2px solid #fffceb;
  border-radius: clamp(6px, 1.7vw, 10px);
  color: #b21621;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(145deg, #fffff7 2%, #f2e9cd 60%, #d5c69c 100%);
  box-shadow:
    0 calc(var(--depth) + 2px) 0 var(--edge),
    0 calc(var(--depth) + 5px) 12px rgba(4,0,0,.58),
    inset 0 0 0 2px rgba(99,72,30,.13),
    inset 0 -5px 10px rgba(114,86,42,.12);
  transform: translate3d(0, 0, 0);
  transition: filter .18s, opacity .18s, transform .2s, box-shadow .2s;
  cursor: pointer;
  will-change: transform, opacity;
}
.mahjong-tile::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(104,76,34,.16); border-radius: 5px; pointer-events: none; }
.mahjong-tile .mark { position: relative; z-index: 1; display: grid; place-items: center; min-width: 78%; color: var(--tile-color); font-family: "STKaiti", "KaiTi", "Songti SC", serif; font-size: var(--glyph-size); font-weight: 900; line-height: .92; text-shadow: 0 1px rgba(255,255,255,.8); }
.mahjong-tile .corner { position: absolute; left: 7%; top: 7%; color: var(--tile-color); font-family: Georgia, serif; font-size: max(7px, calc(var(--tw) * .17)); font-weight: 800; line-height: .85; }
.mahjong-tile .corner.bottom { left: auto; top: auto; right: 7%; bottom: 7%; transform: rotate(180deg); }
.mahjong-tile .pip-grid, .mahjong-tile .bamboo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 75%; height: 75%; align-items: center; justify-items: center; }
.mahjong-tile .pip { width: clamp(5px, calc(var(--tw) * .19), 11px); aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; color: var(--pip-color, #167b6c); background: radial-gradient(circle, #f5d95f 0 18%, currentColor 20% 38%, transparent 40%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.mahjong-tile .bamboo { width: clamp(4px, calc(var(--tw) * .12), 8px); height: clamp(11px, calc(var(--th) * .24), 18px); border-radius: 50% 50% 35% 35%; background: linear-gradient(90deg, #14735d, #42a47d 45%, #10614f); transform: rotate(var(--rot, 0)); box-shadow: inset 0 2px rgba(255,255,255,.35); }
.mahjong-tile.blocked { filter: brightness(.58) saturate(.65); opacity: .78; cursor: default; }
.mahjong-tile.free { filter: brightness(1.03); }
.mahjong-tile.free:active { transform: translateY(3px) scale(.98); }
.mahjong-tile.selected { z-index: 2000; transform: translateY(-7px) scale(1.045); filter: brightness(1.16); box-shadow: 0 calc(var(--depth) + 6px) 0 #8a7350, 0 0 0 3px #74f6dd, 0 0 26px rgba(87,255,224,.9), 0 18px 24px rgba(0,0,0,.55); }
.mahjong-tile.hinting { animation: hintPulse .72s ease 2; }
.mahjong-tile.shake { animation: tileShake .3s ease; }
.mahjong-tile.removing { z-index: 3000; pointer-events: none; animation: tileVanish .55s cubic-bezier(.16,.8,.27,1) forwards; }

@keyframes hintPulse { 50% { transform: translateY(-8px) scale(1.06); filter: brightness(1.28); box-shadow: 0 calc(var(--depth) + 5px) 0 #8a7350, 0 0 0 3px #efc96f, 0 0 30px #ffd465; } }
@keyframes tileShake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes tileVanish { 20% { transform: translateY(-13px) scale(1.08); filter: brightness(1.8); } 100% { transform: translateY(-25px) scale(.12) rotate(8deg); filter: brightness(2); opacity: 0; } }

.board-message { position: absolute; z-index: 4000; left: 50%; top: 12px; transform: translateX(-50%) translateY(-8px); margin: 0; padding: 7px 13px; border: 1px solid rgba(255,220,154,.25); border-radius: 99px; color: #fff1cf; background: rgba(20,6,7,.85); box-shadow: 0 8px 20px rgba(0,0,0,.26); font-size: 10px; letter-spacing: .08em; opacity: 0; transition: .2s; pointer-events: none; white-space: nowrap; }
.board-message.show { opacity: 1; transform: translateX(-50%); }

.play-footer { display: grid; grid-template-columns: 1fr 58px 1fr; align-items: center; gap: 8px; }
.action-button { min-height: 47px; border: 1px solid rgba(255,230,184,.2); border-radius: 13px; color: #dcc8a6; background: rgba(26,9,9,.78); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 6px 15px rgba(0,0,0,.25); font-size: 11px; font-weight: 800; cursor: pointer; }
.action-button span { color: #65e5cb; margin-right: 5px; }
.action-button.primary { color: #2b1009; border-color: #f4d284; background: linear-gradient(135deg, #f1d184, #c99139); box-shadow: inset 0 1px #fff3c8, 0 5px 0 #6d2818; }
.action-button.primary span { color: #7d171b; }
.action-button:active { transform: translateY(2px); }
.combo-readout { text-align: center; }
.combo-readout strong { color: #72e6cc; font-family: Georgia, serif; font-size: 20px; }
.combo-readout.bump strong { display: block; animation: comboBump .35s ease; }
@keyframes comboBump { 50% { transform: scale(1.35); color: #ffe189; } }

.result-screen { flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: radial-gradient(circle at 50% 43%, rgba(66,222,192,.15), rgba(20,4,6,.42) 42%, rgba(12,3,4,.82)); }
.result-screen h2 { position: relative; z-index: 2; margin: 0; color: #fff6df; font-family: Georgia, serif; font-size: clamp(38px, 11vw, 58px); font-weight: 500; }
.result-seal { position: relative; z-index: 2; display: grid; place-items: center; width: 104px; height: 104px; margin: 28px 0; border: 2px solid #f2c66e; border-radius: 50%; color: #ffe49a; background: rgba(101,10,18,.75); box-shadow: inset 0 0 0 8px rgba(237,187,91,.08), 0 0 40px rgba(87,255,220,.24); font-family: "STKaiti", "KaiTi", serif; font-size: 51px; }
.result-orbit { position: absolute; width: 250px; height: 250px; top: 28%; border: 1px solid rgba(100,235,210,.16); border-radius: 50%; animation: orbit 10s linear infinite; }
.result-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #74f9df; box-shadow: 0 0 16px #7ffff0; }
.result-orbit i:nth-child(1) { left: 30px; top: 38px; }.result-orbit i:nth-child(2) { right: 8px; top: 112px; }.result-orbit i:nth-child(3) { left: 90px; bottom: -3px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.result-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 310px); margin-bottom: 28px; }
.result-stats > div + div { border-left: 1px solid rgba(255,225,173,.2); }
.result-stats strong { display: block; margin-top: 6px; color: #fff4d7; font-family: Georgia, serif; font-size: 29px; }
.continue-button { position: relative; z-index: 2; width: min(100%, 310px); min-height: 57px; border: 1px solid #ffe2a1; border-radius: 14px; color: #2a1009; background: linear-gradient(135deg, #f3d686, #c98b34); box-shadow: inset 0 1px #fff5cc, 0 6px 0 #712716, 0 13px 24px rgba(0,0,0,.32); font-size: 12px; font-weight: 900; letter-spacing: .13em; cursor: pointer; }
.continue-button span { float: right; font-size: 25px; line-height: 13px; }
.text-button { position: relative; z-index: 2; margin-top: 17px; padding: 4px; border: 0; color: #d6c09b; background: none; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.text-button + .text-button { margin-top: 9px; }

@media (min-width: 561px) {
  body { background: radial-gradient(circle, #38201c, #0d0606 65%); }
  .game-shell { border-inline: 1px solid rgba(255,220,160,.12); }
}

@media (max-height: 700px) {
  .game-shell { min-height: 560px; }
  .title-lockup { margin-top: 16px; }
  .mini-stack { height: 100px; transform: scale(.82); margin-top: 5px; margin-bottom: -8px; }
  .menu-card { padding: 12px 15px; }
  .rule-note { margin-top: 11px; }
  .board-wrap { min-height: 345px; }
  .game-header .round-button { width: 39px; height: 39px; }
  .game-header { grid-template-columns: 39px 1fr 39px; }
}

@media (max-height: 760px) {
  .title-lockup { margin-top: 10px; }
  .mini-stack { height: 92px; margin: 2px auto -5px; transform: scale(.74); }
  .menu-card { padding: 11px 14px; }
  .level-choice { min-height: 52px; margin-top: 7px; padding-block: 6px; }
  .rule-note { margin-top: 10px; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}