* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #10110e; color: #fff7c9; font-family: SimSun, '宋体', serif; padding: 12px 0; }
button, input { font-family: inherit; }
button { cursor: pointer; }
.game-wrapper { -webkit-user-select: none; user-select: none; }
.game-wrapper input, .game-wrapper textarea { -webkit-user-select: text; user-select: text; }
.game-wrapper { width: 800px; height: 600px; position: relative; margin: auto; border: 3px solid #c8b875; border-radius: 3px; background: #06203b url('/assets/blue-texture.png'); box-shadow: 0 0 0 1px #171409, 0 8px 35px #0009; overflow: hidden; }
.window-bar { height: 22px; display: flex; align-items: center; padding: 0 3px; gap: 5px; color: #14224b; background: linear-gradient(#fffef3, #b4b3ad 80%, #e7e5dd); font: 12px SimSun, serif; }
.window-logo { width: 19px; height: 19px; border: 1px solid #876c16; border-radius: 5px; background: #f5df48; color: #322f17; text-align: center; font: bold 16px Arial; transform: rotate(-8deg); }
.window-title { flex: 1; white-space: nowrap; }
.window-link { color: #332216; background: linear-gradient(#fff4d7, #dca183); border: 1px solid #9e7462; border-radius: 12px; padding: 0 10px; font: 12px SimSun, serif; text-decoration: none; }
.music-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 18px; padding: 0; border: 1px solid #90854f; border-radius: 9px; background: linear-gradient(#fffbe1,#d5c87e); color: #4a4217; cursor: pointer; }
.music-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle .music-muted-strike { display: none; stroke-width: 2.4; }
.music-toggle[aria-pressed="false"] .music-muted-strike { display: block; }
.music-toggle[aria-pressed="false"] { background: linear-gradient(#edece5,#bdbbb0); color: #68675f; }
.top-stage { position: relative; height: 122px; background: #6e1005 url('/assets/stage-clean.png') center / 100% 100% no-repeat; border-bottom: 1px solid #eed878; overflow: hidden; }
.stage-title { position: absolute; top: 34px; left: 0; display: flex; white-space: nowrap; pointer-events: none; animation: title-travel 26s linear infinite; animation-delay: -14s; filter: drop-shadow(0 2px 1px #1d0804); }
.stage-title > span { display: inline-block; color: #ffe041; font: 900 24px/30px 'Microsoft YaHei',sans-serif; -webkit-text-stroke: 1px #9e4a0a; paint-order: stroke fill; text-shadow: 1px 2px #9d4204, -1px -1px #fff3a3; animation: title-wave 3.2s ease-in-out infinite; }
.stage-title > span:nth-child(2) { animation-delay: .4s; }
.stage-title > span:nth-child(3) { animation-delay: .8s; }
.stage-title > span:nth-child(4) { animation-delay: 1.2s; }
@keyframes title-travel { from { left: 0; transform: translateX(-100%); } to { left: 100%; transform: translateX(0); } }
@keyframes title-wave { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }
.top-stage .stage-dog { display: none; }
.middle-area { height: 306px; position: relative; padding: 15px 4px 4px; display: flex; gap: 8px; }
.selection-hint { position: absolute; left: 23px; top: 0; font-size: 12px; height: 15px; line-height: 15px; color: #effff3; }
.left-col { width: 628px; flex: none; }
.bet-grid { display: grid; grid-template-columns: 20px repeat(5, 120px); grid-template-rows: 18px repeat(5, 52px); gap: 2px; }
.header-cell { text-align: center; height: 18px; border: 1px solid #f8f1b8; box-shadow: inset 0 0 0 1px #976320; background: linear-gradient(#fffab0, #d38219 48%, #f1ba49); color: #fff; font: bold 16px/16px Arial; text-shadow: 1px 1px #76431c; }
.row-header { grid-column: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #fff994, #e89d4c 35%, #b7302a 80%); border: 1px solid #fff7c7; font: bold 17px Arial; text-shadow: 1px 1px #5d2a22; }
.bet-cell { position: relative; height: 52px; border: 2px solid #e7e09d; border-radius: 3px 3px 9px 3px; box-shadow: inset 0 0 0 1px #8ab8b9, 1px 1px 1px #000; background: linear-gradient(#8ae4ff, #56b4ed 64%, #1593d7 90%, #5ad9ff); color: #152149; padding: 2px 3px; cursor: pointer; overflow: hidden; }
.bet-cell.has-bet { background: linear-gradient(#fffac0, #fce888 65%, #f6c94d); border-color: #fff6b8; }
.bet-cell:active { filter: brightness(1.12); }
.bet-info { display: flex; align-items: center; justify-content: space-between; gap: 2px; white-space: nowrap; height: 18px; font-size: 12px; }
.bet-info > span:first-child { color: #fbf4ca; font: bold 19px/19px Arial; text-shadow: -1px -1px #29375d, 1px 1px #29375d, -1px 1px #29375d, 1px -1px #29375d; }
.bet-info > span:first-child::first-letter { font-size: 18px; }
.bet-info > span:last-child { letter-spacing: -1px; }
.coin-icon { display: none; position: absolute; left: 3px; bottom: 2px; width: 45px; height: 0; pointer-events: none; }
.coin-layer { position: absolute; width: 28px; height: 14px; background: url('/assets/coins.png') left bottom / contain no-repeat; filter: saturate(1.25); }
.bet-coins { position: absolute; bottom: 10px; right: 3px; color: #a41e0c; font: bold 14px Arial; text-shadow: 0 1px #fff8bd; }
.right-panel { width: 146px; flex: none; }
.history-box { position: absolute; top: 6px; right: 5px; width: 146px; height: 295px; background: linear-gradient(90deg,#2c1919,#0f0d0d); border: 2px solid #f4e7a8; box-shadow: inset 0 0 0 1px #7d6e39; border-radius: 5px; overflow: hidden; }
.history-title { display: grid; grid-template-columns: 1fr 1fr; text-align: center; height: 21px; font-size: 12px; }
.history-title span { background: linear-gradient(#8db8c6,#317b9c); border: 1px solid #e9e7b7; }
.history-list { height: 270px; padding: 3px 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ccb98b #251b12; }
.history-item { display: grid; grid-template-columns: 1fr 1fr; height: 26px; line-height: 26px; text-align: center; color: #e9ecba; font: bold 21px/26px Arial; }
.history-item span:first-child { border-right: 1px solid #dacb7c; letter-spacing: 2px; }
.history-item span:last-child { font-size: 18px; }
.status-box { position: absolute; right: 164px; top: 189px; width: 350px; font-size: 12px; text-align: right; line-height: 19px; color: #ffffdc; }
.status-box .account-line { margin-top: 5px; }
.status-box .balance-line { display: inline; }
.status-box .chip-line { display: inline; margin-left: 10px; }
.timer-display { display: inline-block; width: 82px; height: 18px; background: #061824; border: 1px solid #d6d186; color: #81f149; text-align: center; font: 12px/16px Consolas, monospace; }
.countdown-line { display: inline-block; background: linear-gradient(#fff5b1,#eac66b); border: 1px solid #ffeec5; border-radius: 4px; padding: 0 3px; color: #6a320f; }
.control-bar { position: absolute; z-index: 2; top: 412px; left: 151px; width: 482px; height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; color: #ffffdf; font-size: 16px; }
.chip-btn { width: 74px; height: 30px; padding: 0; border: 2px solid #f4dc8d; border-radius: 7px; box-shadow: inset 0 0 0 1px #94f3fb, 0 0 0 1px #176a8d; color: #fffcca; background: linear-gradient(#a9eeff,#2d89bd 35%,#36b6e1 75%,#166395); font: bold 17px Arial; text-shadow: -1px -1px #1d416e, 1px 1px #1d416e; }
.chip-btn { position: relative; }
.chip-btn.active { color: #65300a; background: linear-gradient(#fffbc3,#ffe56a 40%,#e9a72b 80%,#ffd659); border-color: #fffbd4; box-shadow: inset 0 0 0 1px #b67c17, 0 0 7px 2px #ffcf53; text-shadow: 0 1px #fff9be; }
.chip-btn.active::after { content: '✓'; position: absolute; top: -6px; right: -5px; width: 15px; height: 15px; border: 1px solid #fff3b1; border-radius: 50%; background: #5c330c; color: #fff3a0; font: bold 11px/13px Arial; text-shadow: none; }
.chip-btn:focus-visible, .btn-repeat:focus-visible { outline: 2px solid #fff7a1; outline-offset: 2px; }
.btn-clear, .btn-repeat { border: 1px solid #f6dfa4; border-radius: 4px; height: 25px; padding: 0 4px; font-size: 12px; color: #fff9dc; }
.btn-repeat { color: #fff8cf; border-color: #fff0a0; background: linear-gradient(#70cce6,#287da4 50%,#155878); box-shadow: inset 0 0 0 1px #93d9ee; text-shadow: 0 1px #14405d; }
.btn-repeat:not(:disabled):hover { filter: brightness(1.18); }
.btn-clear { background: linear-gradient(#fb8d43,#bd3c13); }
.btn-repeat:disabled { color: #ccc8be; border-color: #9b9482; background: linear-gradient(#848883,#4c504e); box-shadow: none; text-shadow: none; opacity: .65; cursor: default; }
.bottom-area { display: flex; height: 144px; padding: 4px 2px 2px; gap: 4px; border-top: 3px solid #e9ca56; background: linear-gradient(90deg,#9a1808,#342010 35%,#92160a); }
.btm-box { border: 2px solid #f3eab1; border-radius: 6px; background: linear-gradient(#32130b,#1b0d08); overflow: hidden; color: #fff8d0; min-width: 0; }
.box-left { display: flex; width: 260px; flex: none; }
.box-middle { display: flex; width: 214px; flex: none; }
.box-right { display: flex; flex: 1; position: relative; flex-direction: column; padding-right: 25px; }
.btm-title { flex: none; width: 28px; display: flex; align-items: center; justify-content: center; padding: 22px 5px 4px; writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 5px; color: #fff9d7; background: radial-gradient(circle at 50% 10px,#6ddcfa 0 5px,#257ca7 6px,#f8e39a 7px,#791808 9px), linear-gradient(90deg,#b13414,#5e1909); border-right: 2px solid #e8d799; text-shadow: 1px 1px #4f1608; font-size: 14px; }
.btm-content { flex: 1; padding: 4px; min-width: 0; overflow-y: auto; scrollbar-width: thin; font-size: 12px; line-height: 19px; }
.list-row { display: flex; justify-content: space-between; align-items: center; min-height: 23px; padding: 0 3px; border-bottom: 1px solid #83734b; background: linear-gradient(#5d5040,#302215); gap: 4px; }
.list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-val { color: #fff7da; font: 11px Arial; white-space: nowrap; }
.rank-avatar { width: 20px; height: 21px; object-fit: cover; object-position: top; border: 1px solid #d4cfb0; margin-right: 4px; vertical-align: middle; background: #5f4b47; }
.rich-winner { height: 46px; display: flex; align-items: center; gap: 6px; color: #fff7ce; font-size: 12px; }
.rich-winner > img { width: 45px; height: 45px; object-fit: contain; }
.rich-winner .rank-avatar { width: 20px; height: 20px; }
.chat-avatar { width: 16px; height: 16px; object-fit: contain; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.rich-winner span { color: #f9df78; font-size: 11px; }
.my-bets-layout { height: 100%; min-height: 110px; display: flex; flex-direction: column; }
.bet-records { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: column; flex: 1; min-height: 0; overflow-y: auto; column-gap: 6px; padding: 0 2px; background: linear-gradient(90deg,transparent calc(50% - 1px),#deca7e 50%,transparent calc(50% + 1px)); }
.bet-record-item { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; font: 11px/14px SimSun,serif; }
.bet-record-item .combo, .bet-record-item .odds, .bet-record-item .amount { color: #fff9dc; }
.bet-record-item .amount { margin-left: auto; }
.total-row { display: flex; justify-content: flex-end; gap: 5px; height: 18px; line-height: 18px; font-size: 12px; padding-right: 4px; }
.empty-bets { padding: 20px 5px; color: #c3aa75; text-align: center; }
.chat-heading { display: none; }
.chat-panel, .online-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.chat-panel[hidden], .online-panel[hidden] { display: none; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 1px 3px; font: 12px/16px SimSun,serif; color: #fffbe0; }
.chat-msg { overflow-wrap: anywhere; }
.chat-msg span { color: #fff0b0; }
.chat-input-area { display: flex; flex: none; height: 21px; padding: 0 2px 1px; }
.chat-input { min-width: 0; width: 100%; flex: 1; background: white; color: #111; border: 1px solid #e8c76f; border-radius: 3px; padding: 0 3px; font-size: 12px; }
.chat-btn { flex: none; width: 24px; padding: 0; color: white; border: 1px solid #e9deac; background: linear-gradient(#9edbfa,#287ea7); border-radius: 4px; }
.chat-sidebar { position: absolute; right: 1px; top: 13px; bottom: 15px; width: 22px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.chat-sidebar button { flex: none; padding: 5px 2px; writing-mode: vertical-lr; border: 1px solid #f9df99; border-radius: 6px; background: linear-gradient(90deg,#a33e11,#431f0d); color: #fff8d0; font-size: 12px; line-height: 16px; letter-spacing: 3px; }
.chat-sidebar button[aria-selected="true"] { color: #573009; background: linear-gradient(90deg,#ffe9a0,#dba449); box-shadow: inset 0 0 0 1px #fff0c4; }
.chat-sidebar button:focus-visible { outline: 2px solid #fff4bb; outline-offset: 1px; }
.online-heading { flex: none; padding: 3px 4px; border-bottom: 1px solid #b89b514d; color: #ffe39a; font: bold 12px/16px SimSun,serif; }
.online-players { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 0 3px; }
.online-player { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 1px; border-bottom: 1px solid #d4b77326; font: 12px/16px SimSun,serif; }
.online-player-avatar { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.online-player-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.online-self { flex: none; padding: 0 3px; border: 1px solid #c2a554; border-radius: 3px; color: #ffe39a; font-size: 11px; }
.online-note { padding: 8px 2px; color: #d2bc8d; overflow-wrap: anywhere; font: 12px/16px SimSun,serif; }
#race-overlay { display: none; position: absolute; top: 22px; left: 0; width: 100%; height: 428px; z-index: 10; background: #175214; overflow: hidden; color: #fff4ba; }
#race-title { position: absolute; top: 4px; left: 250px; z-index: 8; font: 13px/22px SimSun,serif !important; margin: 0 !important; padding: 0 9px; border-radius: 10px; background: #173419bd; color: #fff3ae !important; }
.race-commentary { position: absolute; z-index: 8; top: 31px; right: 16px; font: 12px/20px SimSun,serif; background: #143c1cb5; border-radius: 10px; padding: 0 8px; }
.race-scenery, .race-start { position: absolute; inset: 0; pointer-events: none; }
.race-scenery { background: url('/assets/race-scenery.png') 0 0 / auto 428px repeat-x; }
.race-start { background: url('/assets/race-track.png') left top / 100% 100% no-repeat; will-change: transform; }
.race-track { width: 3300px; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
.boost-lane { display: none; position: absolute; z-index: 1; left: 0; width: 100%; height: 51px; overflow: hidden; pointer-events: none; background: linear-gradient(transparent,#83ff3038,transparent); border-top: 1px solid #adff6b60; border-bottom: 1px solid #adff6b60; }
.boost-lane[data-active="true"] { display: block; }
.boost-arrows { position: absolute; inset: 0 auto 0 -50px; display: flex; gap: 17px; align-items: center; color: #9bff40; text-shadow: 0 0 4px #43ff00,0 0 9px #43ff0080; font: 900 40px/48px Arial,sans-serif; animation: boost-flow .45s linear infinite; }
.boost-arrows > span { display: block; flex: none; width: 33px; }
@keyframes boost-flow { to { transform: translateX(50px); } }
#race-overlay[data-frozen="true"] .boost-arrows { animation-play-state: paused; }
.distance-marker { position: absolute; top: 69px; padding: 3px 6px; border: 2px solid #e8ce8c; border-radius: 2px; background: #593a1a; color: #fff3c1; font: bold 12px SimSun,serif; box-shadow: 1px 2px 2px #17320b; }
.finish-line { position: absolute; top: 108px; height: 306px; width: 20px; z-index: 0; border-left: 2px solid #fff5ce; border-right: 2px solid #fff5ce; background: repeating-conic-gradient(#fff9df 0% 25%, #1e2117 0% 50%) 0 0 / 16px 16px; box-shadow: 1px 0 4px #092b16; }
.finish-sign { position: absolute; bottom: 100%; left: -12px; width: 40px; margin-bottom: 5px; padding: 4px 0; text-align: center; border: 2px solid #fff3b4; border-radius: 4px; color: #fff7b6; background: #a62612; font: bold 16px SimSun,serif; box-shadow: 1px 2px 3px #0006; }
.lane { position: absolute; left: 0; width: 3300px; height: 51px; background: transparent; }
.lane-1 { top: 108px; z-index: 1; }
.lane-2 { top: 159px; z-index: 2; }
.lane-3 { top: 210px; z-index: 3; }
.lane-4 { top: 261px; z-index: 4; }
.lane-5 { top: 312px; z-index: 5; }
.lane-6 { top: 363px; z-index: 6; }
.dog-icon { position: absolute; left: 0; bottom: -2px; width: 136px; height: 136px; }
.dog-sprite { display: block; width: 136px; height: 136px; background-repeat: no-repeat; background-size: 2400% 100%; filter: drop-shadow(1px 3px 1px #18320c90); }
.dog-1 { background-image: url('/assets/dog-1-gallop.png'); }
.dog-2 { background-image: url('/assets/dog-2-gallop.png'); }
.dog-3 { background-image: url('/assets/dog-3-gallop.png'); }
.dog-4 { background-image: url('/assets/dog-4-gallop.png'); }
.dog-5 { background-image: url('/assets/dog-5-gallop.png'); }
.dog-6 { background-image: url('/assets/dog-6-gallop.png'); }
.arrival-label { position: absolute; left: 3158px; bottom: 0; color: #fff7a3; font: bold 12px SimSun,serif; text-shadow: 1px 1px #17350e; background: #214916bd; padding: 2px 4px; border-radius: 3px; }
.result-overlay { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 440px; padding: 16px 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 2px solid #f9e497; border-radius: 14px; background: linear-gradient(#213c19ed,#0d240de8); box-shadow: 0 5px 24px #07190799, inset 0 0 16px #d5bb4640; text-align: center; }
.result-heading { color: #d5e8a4; font: bold 20px/26px 'Microsoft YaHei',sans-serif; }
.result-combination { color: #ffe9a0; font: 22px/1.35 'Microsoft YaHei',SimSun,sans-serif; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
.result-combo-number { display: inline-block; margin-left: 5px; color: #ffe66b; font: 600 48px/1.05 'Microsoft YaHei',Arial,sans-serif; letter-spacing: 4px; text-shadow: 0 2px #8e5c12, 0 0 8px #ffd23745; }
.result-places { color: #fff4be; font: 16px/23px 'Microsoft YaHei',SimSun,sans-serif; }
.result-places b { color: #ffdd58; }
.result-places > span { margin-left: 28px; }
#race-overlay[data-frozen="true"] #race-title { display: none; }
#race-overlay[data-frozen="true"] .race-commentary { top: 43px; }
@media (max-width: 800px) { body { padding: 0; } .game-wrapper { margin: 0; } }