* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #e9dcc0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: #333; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
.screen { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: 6px; gap: 6px; }
.screen.hidden { display: none; }
button { border: none; border-radius: 8px; padding: 9px 6px; font-size: 14px; background: #fff; color: #333; }
button:active { transform: scale(.96); }
button:disabled { opacity: .4; }
button.primary { background: #b8442e; color: #fff; }
button.ad::before { content: "▶ "; color: #d06a00; }
button.primary.ad::before { color: #ffd27a; }
.kai, .tile, .scard, .cell, #slot, .nm, .album b { font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; }

/* 首页 */
#home { justify-content: center; gap: 14px; padding: 20px; }
#home h1 { text-align: center; margin: 0; font-size: 28px; }
#home .sub, #day { text-align: center; color: #6a5a3a; font-size: 14px; }
button.big { font-size: 18px; padding: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 牌局 */
#top { display: flex; align-items: center; gap: 6px; font-size: 14px; }
#top b { font-size: 16px; }
#top #left { color: #6a5a3a; margin-right: auto; }
#top button { padding: 6px 10px; }
#board { position: relative; width: 100%; }
.tile { position: absolute; background: #fffaf0; border: 1px solid #b89a60; border-bottom-width: 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #3a2a1a; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: filter .3s; cursor: pointer; }
.tile.cov { filter: brightness(.55) saturate(.6); cursor: default; }
.tile.nope { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.tile.lit { animation: lit .4s ease-out; }
@keyframes lit { 0% { transform: scale(.94); } 45% { transform: scale(1.07); filter: brightness(1.2); box-shadow: 0 0 8px 2px #ffe08a; } 100% { transform: scale(1); } }
.tile.flipc { animation: flipc .3s; }
@keyframes flipc { 50% { transform: scaleX(0); } }
.flying { z-index: 100 !important; }
#out { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
#out .tile { position: relative; width: 40px; height: 44px; font-size: 22px; }
#slot { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; background: #7a4a2a; padding: 5px; border-radius: 10px; }
#slot { position: relative; }
.namepop { position: absolute; left: 50%; top: -24px; z-index: 130; transform: translate(-50%, 0); font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 26px; font-weight: bold; text-shadow: 0 0 4px #fff, 0 0 8px #fff; pointer-events: none; white-space: nowrap; animation: namepop .8s ease-out forwards; }
@keyframes namepop { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } 30% { transform: translate(-50%, -14px) scale(1.1); } to { opacity: 0; transform: translate(-50%, -30px) scale(1); } }
#slot.danger { background: #b8442e; animation: warn 1s infinite; }
#slot.danger2 { animation: warn .45s infinite; }
@keyframes warn { 50% { background: #e8603a; box-shadow: 0 0 0 3px rgba(232,72,40,.55), 0 0 16px rgba(232,72,40,.9); } }
.cell { aspect-ratio: 1; background: rgba(255,255,255,.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; }
.scard { position: absolute; z-index: 50; background: #fffaf0; color: #3a2a1a; border-radius: 6px; border-bottom: 3px solid #b89a60; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; pointer-events: none; transition: left .18s ease-out, top .18s ease-out; }
.scard.burst { animation: burst .36s ease-out forwards; transform-origin: 50% 50% !important; }
@keyframes burst { 0% { transform: scale(1); } 30% { transform: scale(1.2); background: #fff3b0; box-shadow: 0 0 14px 5px #ffd84a; } 100% { transform: scale(1.6); opacity: 0; background: #fff3b0; } }
.spark { position: absolute; z-index: 120; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; animation: spark .5s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
#tools { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
#tools button { background: #ffe1a8; }

#toast { position: fixed; left: 50%; top: 35%; transform: translateX(-50%); background: rgba(40,25,10,.88); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 15px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 999; max-width: 85%; text-align: center; line-height: 1.5; }
#toast b { font-size: 20px; }
#toast.show { opacity: 1; }

#modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
#modal.hidden { display: none; }
#modal-box { background: #fffaf0; border-radius: 12px; padding: 16px; width: 88%; max-width: 420px; max-height: 82%; overflow: auto; font-size: 14px; }
#modal-box h3 { margin: 0 0 10px; }
#modal-box .row { display: flex; gap: 8px; margin-top: 10px; }
#modal-box .row:empty { display: none; }
#modal-box .row button { flex: 1; border: 1px solid #e0d2b0; }
.tip { color: #888; font-size: 12px; }
.share { background: #fff1c8; padding: 8px; border-radius: 8px; }
.adbox { text-align: center; padding: 30px 0; font-size: 16px; }
.sec { font-weight: bold; margin: 10px 0 4px; }
.names { display: flex; flex-wrap: wrap; gap: 6px; }
.nm { background: #fff; border: 1px solid #d8c8a0; border-radius: 6px; padding: 3px 8px; font-size: 18px; font-weight: bold; }
.nm small { font-family: sans-serif; font-size: 10px; color: #888; margin-left: 3px; font-weight: normal; }
.nm.done { opacity: .35; text-decoration: line-through; }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.album .card { background: #fff; border-radius: 8px; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; position: relative; }
.album .card b { font-size: 17px; }
.album .card small { font-size: 10px; color: #777; }
.album .card i { position: absolute; top: 2px; right: 5px; font-size: 10px; color: #b8442e; font-style: normal; }
.album .card.no { opacity: .45; }

/* v2：本关名单、补字区、隐藏人物、图鉴稀有度 */
#list { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; padding-bottom: 2px; scrollbar-width: none; }
#list::-webkit-scrollbar { display: none; }
#list .nm { font-size: 14px; padding: 1px 6px; flex: none; }
.nm.grab { opacity: .5; background: #ddd; color: #888; }
.nm.hid { color: #8a3ab8; border-color: #c9a0e0; }
#btn-restart.hidden { display: none; }
.sec.r1 { color: #3a8a4a; } .sec.r2 { color: #3a6ea5; } .sec.r3 { color: #c0503a; } .sec.r4 { color: #b8860b; }
.album { grid-template-columns: repeat(4, 1fr); }
.album .card em { font-style: normal; font-size: 9px; color: #fff; background: #8a3ab8; border-radius: 4px; padding: 0 3px; align-self: center; }