/* Game artwork uses a 750px canvas. main.js scales the root rem to its width. */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
html { background: #102c24; }
body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-x: hidden; color: #fff5d7; font-family: Arial, 'Microsoft YaHei', sans-serif; -webkit-user-select: none; user-select: none; touch-action: manipulation; background: #102c24; }
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(rgba(8,31,24,.6), rgba(8,31,24,.8)), url(../image/GameBg.jpg) center / cover; filter: blur(14px); pointer-events: none; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .65; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #ffe39b; outline-offset: 3px; }
[hidden] { display: none !important; }
ul { list-style: none; padding: 0; margin: 0; }
.GameBoxBg { position: relative; flex: 0 0 auto; width: 23.4375rem; height: 52.53125rem; overflow: hidden; background: url(../image/GameBg.jpg) center top / 100% 100% no-repeat; box-shadow: 0 0 3rem #061b1b66; isolation: isolate; }
.GameHeader { position: relative; z-index: 2; padding: .9rem .85rem 0; }
.headerStats { display: flex; align-items: center; gap: .35rem; min-height: 2.1rem; }
.scoreBox, .ctBox { padding: .45rem .6rem; border: 1px solid #ffd2a0; border-radius: .65rem; background: linear-gradient(#ef8659, #cb4e30); box-shadow: 0 .15rem 0 #85352177; color: #fff; font-size: .72rem; line-height: 1.3; font-weight: 700; white-space: nowrap; }
.scoreTitle, .ctBox p { font-size: inherit; margin: 0; }
.scoreNum, #ct { color: #fff386; font-variant-numeric: tabular-nums; }
.lolgBox { margin-left: auto; flex: 0 0 9.7rem; height: 2.1rem; }
.gameLogo { display: block; width: 100%; height: 100%; object-fit: contain; }
.listBOx { margin-top: .55rem; }
.timeBox { display: inline-flex; align-items: center; padding: .1rem .65rem; border-radius: 2rem; color: #fff4d3; background: #184632d9; border: 1px solid #ffffff66; font-size: .7rem; line-height: 1.5; box-shadow: 0 .1rem .3rem #0d35272b; }
.timeNum { font-size: 1.3rem; color: #ffe081; font-variant-numeric: tabular-nums; }
.accountBar { position: absolute; top: 4.8rem; left: .85rem; right: 4rem; z-index: 3; padding: .6rem .7rem; border: 1px solid #ffffff45; border-radius: .8rem; background: linear-gradient(135deg, #123f33ed, #1e5b3de8); box-shadow: 0 .2rem .7rem #0a392c3b; font-size: .72rem; line-height: 1.35; }
#accountName { display: block; color: #fff1b5; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.accountActions { display: flex; gap: .4rem; margin: .45rem 0; }
.smallAction { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 2rem; padding: .4rem .6rem; border: 1px solid #e8bc66; border-radius: .5rem; background: linear-gradient(#fff0ac, #eabe62); box-shadow: 0 .1rem 0 #936d36; color: #3b3b20; font-size: .69rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: filter .15s, transform .15s; }
.accountActions .smallAction { flex: 1; white-space: nowrap; padding-left: .3rem; padding-right: .3rem; }
#logoutBtn { flex: 0 0 auto; }
#savedTime { display: block; font-size: .66rem; color: #cfe4c5; }
.controlsBox { position: absolute; top: 4.8rem; right: .65rem; z-index: 3; }
.controlsBox li { text-align: center; margin-bottom: .55rem; }
#musicBtn, .btn_ranking { display: block; width: 2.5rem; height: 2.5rem; border: 0; padding: 0; background-color: transparent; background-repeat: no-repeat; background-size: 100% auto; filter: drop-shadow(0 .12rem .12rem #19382266); }
#musicBtn { background-image: url(../image/iconMis.png); background-position: 0 0; }
#musicBtn.musicS { background-position: 0 -2.5rem; }
.btn_ranking { background-image: url(../image/ranking.png); }
.rankingBox p { margin: .15rem 0 0; color: #fff9da; font-size: .64rem; font-weight: 700; text-shadow: 0 1px 2px #133c2a; }
.gameMessage { position: absolute; top: 9rem; left: .9rem; right: .9rem; z-index: 5; padding: .45rem .7rem; border-radius: .5rem; background: #143c2bee; border: 1px solid #eac97588; color: #fff1c2; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.gameMessage:empty { display: none; }
.startBox, .gameOverBox { position: absolute; z-index: 4; left: 1.75rem; right: 1.75rem; padding: 1.1rem 1rem .85rem; border: 1px solid #f6db8e99; border-radius: 1.25rem; background: linear-gradient(155deg, #163e32f2, #1e563bea); box-shadow: 0 .5rem 1.5rem #092c2873, inset 0 1px #ffffff1f; text-align: center; }
.startBox { top: 22rem; display: flex; flex-direction: column; gap: .75rem; }
.durationPicker { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: center; text-align: left; }
.durationPicker label { margin: 0; color: #ffedbe; font-size: .78rem; font-weight: 700; }
.durationPicker select { width: 100%; min-height: 2.25rem; padding: .4rem .45rem; border: 1px solid #ffffff40; border-radius: .55rem; background: #fef3d4; color: #21442c; font-size: .75rem; }
.durationPicker select:disabled { opacity: 1; color: #cedfc9; background: #2c6248; -webkit-text-fill-color: #cedfc9; }
.durationPicker span { grid-column: 1 / -1; color: #c9dfbc; font-size: .67rem; line-height: 1.5; text-align: center; }
.start, .restart { position: static; display: block; width: 100%; min-height: 3.2rem; margin: .15rem 0 .2rem; padding: .45rem .3rem; border: 1px solid #ffe997; border-radius: .8rem; color: #874011; background: linear-gradient(#ffed5d, #ffbd24); box-shadow: 0 .2rem 0 #ac731e, inset 0 1px #fff6b0; font-family: Impact, 'Arial Black', Arial, sans-serif; font-size: 1.6rem; font-weight: 900; line-height: 1.2; letter-spacing: .025rem; }
.btn_rules { position: static; align-self: center; display: inline-block; min-height: 1.7rem; padding: .25rem .8rem; margin: .25rem 0 0; border: 1px solid #d4e9c955; border-radius: 2rem; color: #e6f0d4; background: #ffffff0d; font-size: .73rem; }
.gameOverBox { display: none; top: 20rem; }
.over { position: static; margin: 0 0 .8rem; color: #ffe695; font-size: 2rem; line-height: 1.2; font-weight: 900; text-shadow: 0 .1rem #8f5422; }
.settlementBox { position: static; margin: 0 0 1rem; }
.settlementTitle { margin: 0; font-size: .9rem; color: #e1edcf; }
#settlementNum { color: #ffe48a; font-size: 1.6rem; font-weight: 700; }
.overWallet { position: static; display: flex; width: 100%; margin: .9rem 0 .5rem; min-height: 2.2rem; font-size: .75rem; }
.wolfTarget { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Use pixels in dialogs so forms stay readable as the artwork scales. */
.modal { font-size: 15px; line-height: 1.5; color: #234333; }
.modal-dialog { width: auto; max-width: 460px; margin: 20px auto; padding: 0 12px; }
.modal-dialog-centered { min-height: calc(100% - 40px); }
.modal-dialog-centered::before { height: calc(100vh - 40px); }
.modal-content { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); border: 1px solid #e8d4a6; border-radius: 18px; background: #fffaf0; box-shadow: 0 18px 70px #092c2873; overflow: hidden; }
.modal-header { flex-shrink: 0; align-items: center; padding: 18px 20px; border-bottom: 1px solid #e9dfc9; background: #f6edd8; }
.modal-header h5 { margin: 0; color: #2e553d; font-size: 20px; font-weight: 700; }
.modal-header .close { float: none; flex: 0 0 32px; width: 32px; height: 32px; margin: 0 0 0 12px; padding: 0; border-radius: 50%; background: #e8ddc7; color: #365341; font-size: 24px; line-height: 32px; text-shadow: none; opacity: 1; }
.modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-backdrop.show { opacity: .65; }
.accountModal label { display: block; margin: 12px 0 6px; color: #3c5946; font-size: 13px; font-weight: 700; }
.accountModal input { height: 46px; padding: 10px 12px; border: 1px solid #d7dbc9; border-radius: 9px; background: #fff; color: #243e2d; font-size: 16px; -webkit-user-select: text; user-select: text; }
.accountModal input:focus { border-color: #6a9774; box-shadow: 0 0 0 3px #7da97024; }
.accountModal .btn { min-height: 44px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.accountModal .btn-warning { background: linear-gradient(#ffde7a, #f2c253); border-color: #e5b245; color: #62431e; }
.accountModal .btn-link { color: #477850; font-size: 13px; }
.accountModal .btn-outline-secondary { color: #47604a; border-color: #b5c3ab; }
.accountModal h6 { margin: 22px 0 10px; font-size: 14px; font-weight: 700; }
.walletSummary { margin: 0; padding: 14px; border-radius: 10px; border: 1px solid #d6dfc9; background: #eaf0df; color: #486444; font-size: 14px; line-height: 1.8; }
.walletSummary strong { color: #245331; font-size: 18px; white-space: nowrap; }
.storeGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.storeCard { min-width: 0; min-height: 76px; padding: 12px 8px; border: 1px solid #e8cea2; border-radius: 10px; background: linear-gradient(#fff3d4, #f9e9c5); color: #68532d; font-size: 14px; line-height: 1.5; font-weight: 700; white-space: normal; transition: border-color .15s, background .15s, transform .15s; }
.needsBalance .storeCard { border-color: #cb883c; box-shadow: 0 0 0 1px #cb883c44; }
.modalMessage { margin: 14px 0; color: #99512b; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.modalMessage:empty { margin: 12px 0; }
.modalMessage:not(:empty) { padding: 10px 12px; border-radius: 8px; background: #f5e8ce; }
.storeNote { margin: 16px 0 0; color: #728168; font-size: 12px; line-height: 1.7; }
.gameRules .modal-body { font-size: 14px; }
.gameRules li { padding: 10px 0; border-bottom: 1px solid #e9e2cf; }
.gameRules li:last-child { border-bottom: 0; }
.gameRules .table { font-size: 14px; margin: 0; color: #36533c; }
.gameRules .table th, .gameRules .table td { padding: 12px 8px; border-color: #e3e5d6; }
@media (hover: hover) {
  .smallAction:hover, .start:hover, .restart:hover { filter: brightness(1.07); }
  .storeCard:hover { border-color: #a99564; background: #ffebbc; transform: translateY(-2px); }
  .btn_rules:hover { background: #ffffff20; }
}
.smallAction:active, .start:active, .restart:active { transform: translateY(2px); }
@media (max-width: 359px) {
  .accountActions .smallAction { font-size: .72rem; }
  .modal-body { padding: 16px; }
  .storeGrid { gap: 6px; }
  .storeCard { padding: 10px 4px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .fade { transition: none !important; }
}
/* Keep controls outside the wolf field so they never hide the timer or targets. */
.gameShell { position: relative; z-index: 1; display: flex; flex-direction: column; width: 23.4375rem; height: 100vh; height: 100dvh; flex: 0 0 auto; margin: 0; overflow: hidden; border: 1px solid #ffffff29; border-radius: 1rem; background: #153e30; box-shadow: 0 .5rem 3rem #051c2380; }
.gameShell .GameBoxBg { width: 100%; height: auto; min-height: 0; flex: 1 1 0; background: none; box-shadow: none; }
.wolfStage { position: absolute; top: 0; left: 50%; margin-left: -11.71875rem; width: 23.4375rem; height: 31.25rem; background: url(../image/GameBg-compact.png) center top / 100% auto no-repeat; transform-origin: center top; }
.gameShell .accountBar, .gameFooter { flex: 0 0 auto; }
.gameShell .accountBar { position: relative; inset: auto; display: flex; flex-direction: column; gap: .45rem; padding: .65rem .8rem; border: 0; border-bottom: 1px solid #ffffff26; border-radius: 0; box-shadow: none; }
.accountIdentity { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-width: 0; }
.accountIdentity #accountName { min-width: 0; flex: 1; }
.accountIdentity #savedTime { flex: 0 0 auto; font-size: .65rem; }
.gameShell .accountActions { margin: 0; gap: .5rem; }
.gameShell .smallAction { min-height: 2rem; }
.gameShell .GameHeader { padding: .7rem .7rem 0; }
.gameShell .headerStats { gap: .3rem; }
.gameShell .scoreBox, .gameShell .ctBox { padding: .4rem .5rem; font-size: .72rem; }
.gameShell .listBOx { margin-top: .65rem; }
.gameShell .timeBox { padding: .15rem .7rem; }
.gameShell .controlsBox { top: 3.1rem; right: .65rem; }
.gameShell .startBox, .gameShell .gameOverBox { position: relative; inset: auto; padding: .75rem .9rem; border: 0; border-top: 1px solid #f6db8e55; border-radius: 0; box-shadow: none; background: #153e30; }
.gameFooter { display: grid; }
.gameFooter .startBox, .gameFooter .gameOverBox { grid-area: 1 / 1; }
.gameFooter .gameOverBox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: center; gap: .5rem; visibility: hidden; pointer-events: none; }
.isGameOver .gameFooter .startBox { visibility: hidden; pointer-events: none; }
.isGameOver .gameFooter .gameOverBox { visibility: visible; pointer-events: auto; }
.gameFooter .gameOverBox .restart { grid-column: 1 / -1; }
.gameFooter .gameOverBox .over { margin: 0; font-size: 1.25rem; }
.gameFooter .gameOverBox .settlementBox { margin: 0; }
.gameFooter .gameOverBox .settlementTitle { font-size: .75rem; }
.gameFooter .gameOverBox #settlementNum { font-size: 1.2rem; }
.gameFooter .gameOverBox .overWallet, .gameFooter .gameOverBox .btn_rules { width: 100%; min-height: 2.2rem; margin: 0; }
.gameShell .startBox { gap: .5rem; }
.gameShell .durationPicker { gap: .3rem .65rem; }
.gameShell .durationPicker span { font-size: .65rem; }
.gameShell .start, .gameShell .restart { min-height: 2.8rem; font-family: Arial, sans-serif; font-size: 1.3rem; letter-spacing: .02rem; }
.gameShell .btn_rules { margin-top: 0; min-height: 1.45rem; font-size: .65rem; padding: .15rem .8rem; }
.gameShell .gameMessage { position: absolute; top: 8.5rem; left: .7rem; right: 3.8rem; z-index: 8; margin: 0; border-radius: .5rem; padding: .55rem .8rem; font-size: .7rem; }
@media (max-width: 767px) { .gameShell { margin: 0; border: 0; border-radius: 0; box-shadow: none; } }
.gameShell .GameBoxBg { background: #167c62; }
/* Reserve more screen space for the undistorted field. Both footer states
   share the same grid cell so starting and ending never shift the layout. */
.gameShell .accountBar { padding: .35rem .6rem; gap: .25rem; }
.gameShell .accountBar .smallAction { min-height: 1.8rem; padding-top: .25rem; padding-bottom: .25rem; }
.gameShell .startBox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; padding: .35rem .6rem; }
.gameShell .durationPicker { grid-column: 1 / -1; gap: .2rem .5rem; }
.gameShell .durationPicker select { min-height: 1.9rem; padding: .2rem .4rem; }
.gameShell .durationPicker span { font-size: .6rem; line-height: 1.2; }
.gameShell .startBox .start { min-height: 2.4rem; margin: 0; font-size: 1.2rem; }
.gameShell .startBox .btn_rules { align-self: stretch; margin: 0; }
.gameFooter .gameOverBox { padding: .35rem .6rem; gap: .2rem .5rem; }
.gameFooter .gameOverBox .restart { min-height: 2.4rem; margin: 0; }
.gameFooter .gameOverBox .overWallet, .gameFooter .gameOverBox .btn_rules { min-height: 1.7rem; padding-top: .2rem; padding-bottom: .2rem; }