:root {
  --ink: #17100c;
  --paper: #fff0cf;
  --gold: #ffd23f;
  --red: #eb493a;
  --green: #78c84f;
  --muted: #b8a997;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: #0f0c0a; }
body {
  min-height: 100%; margin: 0; color: #fff8eb;
  font-family: "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 50% 4%, rgba(232,73,58,.18), transparent 32%),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.018) 60px),
    #17120f;
  overscroll-behavior: none;
}
button, a { font: inherit; }
button { cursor: pointer; }

.match-shell { width: min(100%, 620px); min-height: 100svh; margin: 0 auto; padding: 16px 18px 30px; }
.game-header { min-height: 58px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 12px; }
.game-header p { margin: 0 0 2px; color: #e46c59; font-size: 9px; letter-spacing: .2em; }
.game-header h1 { margin: 0; font-size: clamp(22px, 7vw, 34px); line-height: 1; }
.game-header h1 span { margin-left: 5px; color: var(--red); }
.back-link, .sound-toggle { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,240,207,.2); border-radius: 50%; color: #fff; background: rgba(255,255,255,.04); text-decoration: none; }
.back-link { font-family: sans-serif; font-size: 34px; line-height: 1; }

.mission-card { position: relative; margin-top: 12px; min-height: 76px; padding: 13px 14px 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; border: 3px solid var(--ink); outline: 2px solid var(--paper); background: linear-gradient(120deg,#cf342e,#ee5d42); box-shadow: 7px 7px 0 #0b0908; clip-path: polygon(0 8%, 97% 0, 100% 87%, 3% 100%); }
.mission-card::after { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-conic-gradient(from 10deg at 20% 50%, transparent 0 12deg,#ffd454 13deg 16deg); }
.mission-copy, .moves-box { position: relative; z-index: 1; }
.mission-copy span, .moves-box span { display: block; font-size: 10px; letter-spacing: .16em; }
.mission-copy strong { display: block; margin-top: 3px; color: #fff3d8; font-size: clamp(19px, 5.5vw, 28px); text-shadow: 3px 3px 0 #621c19; }
.moves-box { min-width: 62px; padding: 7px 8px; text-align: center; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); transform: rotate(2deg); }
.moves-box b { display: block; font-size: 28px; line-height: .9; }
.moves-box span { margin-top: 4px; font-size: 8px; }

.score-strip { height: 48px; margin: 10px 2px 6px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.score-strip div:first-child span { display: block; color: var(--muted); font-size: 9px; }
.score-strip div:first-child strong { font-size: 24px; }
.combo-badge { padding: 5px 10px; border-radius: 99px; color: #462209; background: var(--gold); font-size: 11px; transform: rotate(-2deg); }
.score-strip button { justify-self: end; border: 0; color: #cfbda6; background: transparent; font-size: 10px; }

.board-wrap { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; padding: 12px; overflow: hidden; border: 3px solid #2b211b; border-radius: 23px; background: radial-gradient(circle at 50% 45%,#2b1710 0,#110c09 58%,#080605 100%); box-shadow: inset 0 4px rgba(255,255,255,.08),inset 0 -12px 24px rgba(0,0,0,.65),inset 0 0 70px rgba(255,116,75,.12),0 18px 50px rgba(0,0,0,.52); }
.board-burst { position: absolute; inset: 30%; border-radius: 50%; opacity: .1; background: repeating-conic-gradient(var(--gold) 0 6deg,transparent 7deg 16deg); }
.board { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(7,1fr); gap: clamp(3px,1vw,6px); touch-action: manipulation; }
.tile { position: relative; min-width: 0; padding: 0; display: grid; place-items: center; overflow: hidden; border: 2px solid #050403; border-radius: 14px 17px 12px 16px; color: var(--tile-text,#fff); background: linear-gradient(155deg,#37302a 0%,#15110e 44%,#060504 100%); box-shadow: inset 0 3px 2px rgba(255,255,255,.3), inset 0 -6px 8px rgba(0,0,0,.76), 0 0 0 2px #f5dfb8, 0 0 0 4px #25170e, 5px 7px 0 rgba(0,0,0,.72), 0 10px 18px rgba(0,0,0,.38); transform: translateZ(0); transition: transform .16s cubic-bezier(.2,.8,.2,1), opacity .18s ease, filter .16s ease; }
.tile::after { content: ""; position: absolute; z-index: 2; inset: 4px 8px auto; height: 18%; border-radius: 50%; opacity: .46; background: linear-gradient(180deg,rgba(255,255,255,.7),transparent); pointer-events: none; }
.tile-art { position: absolute; z-index: 1; inset: -12%; display: block; border-radius: 13px; background-image: url("/office-elements-sheet.png"); background-repeat: no-repeat; background-size: 300% 300%; background-position: var(--sprite-position); filter: saturate(1.25) contrast(1.08) drop-shadow(0 7px 3px rgba(0,0,0,.72)); transform: translateY(-2px) scale(1.02); }
.tile.selected { z-index: 3; filter: brightness(1.22) saturate(1.2); transform: translateY(-7px) scale(1.13) rotate(-4deg); box-shadow: inset 0 3px rgba(255,255,255,.55),0 0 0 3px var(--gold),0 0 28px rgba(255,210,63,.9),7px 11px 0 #000; }
.tile.matched { z-index: 4; animation: tile-burst .23s cubic-bezier(.2,.8,.2,1) forwards; }
.tile.matched .tile-art { animation: art-burst .23s ease-out forwards; }
.tile.invalid { animation: invalid .24s ease; }
.tile.special { background: linear-gradient(145deg,#94de57,#2a8a50); }
.tile.special::before { content: "好事"; position: absolute; top: -4px; right: -4px; padding: 2px 4px; border: 2px solid var(--ink); border-radius: 7px; color: #14320e; background: #d7ff71; font-size: 7px; transform: rotate(6deg); }
.tile.bonus { background: linear-gradient(145deg,#ff5d45,#b51f25); }
.board.locked { pointer-events: none; }
.board-message { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; padding: 9px 15px; opacity: 0; border: 4px solid var(--ink); color: #241508; background: var(--gold); box-shadow: 5px 6px 0 rgba(0,0,0,.65); font-size: clamp(18px,6vw,30px); white-space: nowrap; pointer-events: none; transform: rotate(-3deg) scale(.8); transition: .18s ease; }
.board-message.show { opacity: 1; transform: rotate(-3deg) scale(1); }

.goals { margin: 13px 0 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.goals article { min-width: 0; min-height: 64px; padding: 8px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; border: 1px solid rgba(255,240,207,.18); border-radius: 13px; background: rgba(255,255,255,.035); }
.goal-icon { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--ink); border-radius: 9px 12px 8px 11px; color: transparent; background-image: url("/office-elements-sheet.png"); background-size: 300% 300%; box-shadow: 0 0 0 2px var(--paper),3px 4px 0 #000; font-size: 0; font-style: normal; }
.goal-icon.kpi { background-position: 0 50%; }.goal-icon.bug { background-position: 100% 0; }.goal-icon.excel { background-position: 50% 0; }
.goals span { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.goals b { color: var(--gold); font-size: 11px; }.goals em { font-style: normal; font-size: 17px; }
.goals article.done { border-color: #70d95a; background: rgba(102,197,75,.14); }.goals article.done b { color: #87e365; }

.tips { padding: 10px 12px; border-left: 3px solid var(--red); color: var(--muted); background: rgba(255,255,255,.025); font-family: "PingFang SC",sans-serif; font-size: 11px; line-height: 1.6; }
.tips b,.tips span { display: block; }.tips b { color: #fff1dc; }.tips i { color: var(--gold); font-style: normal; font-weight: 800; }

.result-modal { position: fixed; z-index: 20; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(8,6,5,.82); backdrop-filter: blur(10px); }
.result-card { width: min(92vw,390px); padding: 28px 24px; text-align: center; border: 4px solid var(--ink); outline: 3px solid var(--paper); background: linear-gradient(145deg,#30221a,#17110e); box-shadow: 10px 12px 0 rgba(0,0,0,.65); transform: rotate(-1deg); }
.result-card > p:first-child { margin: 0; color: var(--red); font-size: 10px; letter-spacing: .2em; }.result-card h2 { margin: 8px 0; color: var(--gold); font-size: 38px; text-shadow: 4px 4px 0 #7e241b; }
.power-mark { width: 104px; height: 104px; margin: 12px auto; overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; color: transparent; background-image: url("/office-elements-sheet.png"); background-size: 300% 300%; background-position: 50% 100%; box-shadow: 0 0 0 3px var(--paper),0 13px 20px rgba(0,0,0,.55); font-size: 0; }
.power-mark.failed { background-position: 100% 50%; filter: grayscale(.35); }
.result-card > strong { display: block; font-size: 48px; line-height: 1; }.result-card > span { color: var(--muted); font-size: 10px; }.result-card #resultText { min-height: 24px; color: #d9c8b2; font-family: "PingFang SC",sans-serif; font-size: 13px; }
.result-card button { width: 100%; margin: 8px 0 12px; padding: 13px; border: 3px solid var(--ink); border-radius: 12px; color: #32160d; background: linear-gradient(90deg,#ff6955,#f2a042); box-shadow: 4px 5px 0 #000; }
.result-card a { color: var(--muted); font-size: 11px; }

.effect-layer { position: absolute; z-index: 6; inset: 12px; overflow: visible; pointer-events: none; }
.effect-burst { --burst-color: #ffd23f; position: absolute; width: 10px; height: 10px; translate: -50% -50%; }
.effect-burst::before,.effect-burst::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; }
.effect-burst::before { width: 22px; height: 22px; border: 4px solid var(--burst-color); box-shadow: 0 0 18px var(--burst-color); animation: shockwave .48s ease-out forwards; }
.effect-burst::after { width: 13px; height: 13px; background: #fff; box-shadow: 0 0 22px #fff,0 0 38px var(--burst-color); animation: flash-core .3s ease-out forwards; }
.effect-burst i { position: absolute; left: 2px; top: 2px; width: 7px; height: 15px; border: 2px solid #281207; border-radius: 5px; background: linear-gradient(#fff,var(--burst-color)); box-shadow: 0 0 8px var(--burst-color); transform-origin: 3px 3px; animation: spark-fly .55s cubic-bezier(.15,.7,.2,1) forwards; }
.effect-burst.special i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(#fff67c,#48d05b); }
.board.refilling .tile { animation: tile-drop .28s cubic-bezier(.12,.8,.22,1.25) both; animation-delay: calc(var(--tile-row) * 18ms); }
.board-wrap.combo-flash { animation: combo-flash .38s ease-out; }
.board-wrap.special-flash { animation: special-flash .48s ease-out; }

@keyframes invalid { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pop { 50% { transform: scale(1.18) rotate(-5deg); } }
@keyframes tile-burst { 0% { opacity: 1; transform: translateY(-2px) scale(1); filter: brightness(1); } 45% { opacity: 1; transform: translateY(-8px) scale(1.32) rotate(-7deg); filter: brightness(2) saturate(1.6); } 100% { opacity: 0; transform: scale(.12) rotate(22deg); filter: brightness(2.3); } }
@keyframes art-burst { to { filter: saturate(1.7) brightness(2.5) drop-shadow(0 0 15px #fff); } }
@keyframes tile-drop { 0% { opacity: .15; transform: translateY(-38px) scale(.8); } 70% { opacity: 1; transform: translateY(5px) scale(1.04); } 100% { transform: translateY(0) scale(1); } }
@keyframes shockwave { from { opacity: 1; transform: scale(.25); } to { opacity: 0; transform: scale(3.5); } }
@keyframes flash-core { to { opacity: 0; transform: scale(2.4); } }
@keyframes spark-fly { 0% { opacity: 1; transform: rotate(var(--spark-angle)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(calc(var(--spark-distance) * -1)) scale(.2) rotate(120deg); } }
@keyframes combo-flash { 30% { box-shadow: inset 0 0 60px rgba(255,226,65,.68),0 0 28px rgba(255,108,57,.7),0 18px 50px rgba(0,0,0,.52); } }
@keyframes special-flash { 28% { border-color: #baff55; box-shadow: inset 0 0 90px rgba(112,255,70,.72),0 0 36px rgba(255,219,61,.9),0 18px 50px rgba(0,0,0,.52); } }

@media (min-width: 620px) { .match-shell { padding-top: 24px; }.board-wrap { max-height: 570px; } }
@media (max-width: 370px) { .match-shell { padding-left: 10px; padding-right: 10px; }.board-wrap { padding: 9px; }.goals article { grid-template-columns: 28px 1fr; padding: 6px; }.goal-icon { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }