:root { color-scheme: dark; --gold: #d8b35c; --felt: #075735; --felt-dark: #034128; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; padding: 20px; color: #fff; font-family: system-ui, -apple-system, "Yu Gothic", sans-serif; background: radial-gradient( ellipse at center, #116044, #073d2d 55%, #031e17 ); } .game { width: min(1500px, 100%); margin: 0 auto; } h1 { margin: 0 0 5px; color: #f3d98e; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: .08em; text-align: center; } .subtitle { margin: 0 0 20px; color: #c7d9cf; font-size: .85rem; text-align: center; } .top-info { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .info-box { min-width: 130px; padding: 10px 16px; text-align: center; border: 1px solid #b99748; border-radius: 10px; background: #031e17bb; } .info-label { color: #c7d9cf; font-size: .78rem; } .info-value { margin-top: 3px; color: #f3d98e; font-size: 1.25rem; font-weight: 800; } .main-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; gap: 24px; } .wheel-panel { min-width: 0; padding: 16px; border: 1px solid #9e7a36; border-radius: 16px; background: #031e1780; box-shadow: 0 12px 30px #0003; } .panel-title { margin: 0 0 14px; color: #f3d98e; font-size: 1.05rem; text-align: center; } .wheel-wrap { width: 100%; max-width: 540px; aspect-ratio: 1; margin: 0 auto 18px; position: relative; overflow: visible; border-radius: 50%; padding: 3.5%; background: linear-gradient( 135deg, #f5df91, #6b4517 20%, #d4ad53 38%, #42270e 55%, #e8c66d 72%, #4d2b0c ); box-shadow: 0 18px 35px #0009, inset 0 2px 5px #fff8, inset 0 -8px 12px #000a; } .wheel-wrap::before { content: ""; position: absolute; inset: 1.2%; border-radius: 50%; border: 5px solid #3a210c; box-shadow: inset 0 0 0 2px #e7c56c; pointer-events: none; z-index: 3; } #wheel { display: block; width: 100%; height: 100%; border-radius: 50%; } .pointer { position: absolute; z-index: 5; left: 50%; top: 1.5%; transform: translateX(-50%); width: 26px; height: 34px; background: linear-gradient( to bottom, #fff8d5, #f3d98a 45%, #b8862d ); clip-path: polygon( 50% 100%, 0 35%, 28% 35%, 28% 0, 72% 0, 72% 35%, 100% 35% ); filter: drop-shadow(0 2px 3px #000); } #throwHand { position: absolute; z-index: 8; top: 5%; right: -9%; display: inline-block; font-family: Arial, sans-serif; font-size: clamp(40px, 8vw, 58px); line-height: 1; pointer-events: none; transform-origin: 50% 50%; opacity: 0; transition: opacity 1.5s ease; filter: drop-shadow(3px 5px 4px #0008); } #flightBall { position: absolute; z-index: 7; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient( circle at 30% 25%, #fff 0%, #fff 20%, #eeeae0 58%, #aaa79f 100% ); box-shadow: 4px 5px 8px #0009; transform: translate(-50%, -50%); } .controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } button { font-family: inherit; } .controls button { min-width: 125px; padding: 12px 18px; border-radius: 10px; border: 2px solid #e8d18c; font-size: 1rem; font-weight: 800; color: white; cursor: pointer; box-shadow: 0 5px 0 #0005, inset 0 1px 0 #ffffff70; } .controls button:hover:not(:disabled) { filter: brightness(1.12); } .controls button:disabled { opacity: .45; cursor: not-allowed; } #start { background: linear-gradient(#18864b, #07572d); } #stop { background: linear-gradient(#d52d2d, #8c1111); } .result { margin: 18px auto 0; width: min(400px, 100%); padding: 12px 16px; border: 1px solid #c5a24f; border-radius: 12px; background: #031e17b8; box-shadow: inset 0 0 18px #0005; text-align: center; } .result-label { color: #c8d9ce; font-size: .82rem; } .result-main { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 5px; } #number { font-size: 2.5rem; line-height: 1.1; font-weight: 900; color: #f5d987; min-width: 55px; } #colorName { font-size: .95rem; font-weight: 700; } .note { color: #b9cec3; font-size: .75rem; line-height: 1.6; margin-top: 14px; text-align: center; } .betting-panel { min-width: 0; padding: 16px; border: 1px solid #b99a50; border-radius: 16px; background: linear-gradient(145deg, #075735, #034128); box-shadow: 0 12px 30px #0004, inset 0 0 0 3px #c9a34c30; } .betting-title { margin: 0 0 5px; color: #f3d98e; font-size: 1.3rem; text-align: center; } .betting-subtitle { margin: 0 0 14px; color: #c8dfd1; font-size: .78rem; text-align: center; } .chip-heading { margin: 0 0 8px; font-size: .85rem; color: #f4dda0; } .chip-selector { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; } .chip-choice { width: 48px; height: 48px; min-width: 0; padding: 0; border-radius: 50%; border: 4px dashed #fff; color: #fff; font-size: .83rem; font-weight: 900; cursor: pointer; box-shadow: 0 3px 6px #0008; transition: transform .12s, outline .12s; } .chip-choice:hover { transform: translateY(-2px); } .chip-choice.selected { outline: 3px solid #ffe78a; outline-offset: 3px; transform: translateY(-2px); } .chip-1 { background: #e8e8e8; color: #222; border-color: #777; } .chip-5 { background: #c92e35; } .chip-10 { background: #2683df; } .chip-25 { background: #24935b; } .chip-100 { background: #25252a; } .inside-bet-controls { margin: 0 0 12px; padding: 10px; border: 1px solid #c1a05280; border-radius: 8px; background: #021f1780; } .inside-bet-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .inside-bet-choice { min-width: 0; padding: 9px 3px; border: 1px solid #d9c27e; border-radius: 6px; color: #fff; background: linear-gradient(#426451, #203c2e); font-size: .85rem; font-weight: 800; cursor: pointer; } .inside-bet-choice.selected { color: #172217; background: linear-gradient(#ffe9a0, #c99a3b); border-color: #fff1b8; box-shadow: 0 0 0 2px #ffe28a60, inset 0 1px 0 #fff; } .inside-bet-choice:disabled { opacity: .45; cursor: not-allowed; } .inside-bet-hint { margin-top: 8px; color: #f5df9b; font-size: .76rem; line-height: 1.45; text-align: center; } .number-cell.inside-selected { outline: 3px solid #ffe47b; outline-offset: -3px; filter: brightness(1.35); box-shadow: inset 0 0 0 2px #fff4a6, 0 0 8px #ffe47b; z-index: 2; } .betting-table { width: 100%; padding: 8px; border: 2px solid #d5b765; border-radius: 5px; background: #06452d; box-shadow: inset 0 0 0 2px #ffffff15; } .bet-cell { position: relative; min-width: 0; min-height: 44px; display: flex; justify-content: center; align-items: center; padding: 5px 2px; border: 1px solid #d8c98b; border-radius: 2px; background: #075735; color: white; font-size: .9rem; font-weight: 800; cursor: pointer; transition: filter .1s, background .1s; user-select: none; -webkit-tap-highlight-color: transparent; } .bet-cell:hover:not(:disabled) { filter: brightness(1.3); background: #138451; } .bet-cell:disabled { cursor: not-allowed; opacity: .88; } .bet-cell.zero { background: #07864b; } .bet-cell.red { background: #c5212b; } .bet-cell.black { background: #181a1c; } .bet-cell.outside { min-height: 43px; font-size: .79rem; } .bet-cell.dozen { background: #075735; } .bet-cell.column-bet { background: #075735; font-size: .77rem; } .number-layout { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px; margin-bottom: 7px; } .zero-cell { grid-row: 1 / span 12; min-height: 0; font-size: 1.1rem; } .number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(38px, 1fr)); gap: 3px; } .number-cell { min-height: 38px; font-size: .9rem; } .bet-chip-stack { position: absolute; right: 2px; bottom: 3px; display: flex; flex-direction: column-reverse; align-items: center; pointer-events: none; z-index: 4; } .bet-chip { position: relative; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; width: 23px; height: 15px; margin-top: -7px; border: 2px dashed #fff; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 900; line-height: 1; text-shadow: 0 1px 1px #0009; box-shadow: 0 2px 0 #0008, 0 3px 3px #0009, inset 0 1px 1px #ffffffc9, inset 0 -2px 2px #0005; } .bet-chip.chip-1 { background: linear-gradient(#fff, #d5d5d5 55%, #999); border-color: #777; color: #222; text-shadow: 0 1px 0 #fff9; } .bet-chip.chip-5 { background: linear-gradient(#f35b60, #c92e35 55%, #821a20); } .bet-chip.chip-10 { background: linear-gradient(#65b5ff, #2683df 55%, #15508e); } .bet-chip.chip-25 { background: linear-gradient(#55c98b, #24935b 55%, #135a37); } .bet-chip.chip-100 { background: linear-gradient(#55555d, #25252a 55%, #09090b); } .column-bets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 7px; } .column-bets .bet-cell { min-height: 37px; } .dozens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 7px; } .dozens .bet-cell { min-height: 43px; } .outside-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; } .outside-grid .bet-cell { min-height: 48px; padding: 4px 1px; font-size: .7rem; } .color-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 3px; border-radius: 50%; border: 1px solid #fff9; vertical-align: middle; } .color-swatch.red { background: #e52635; } .color-swatch.black { background: #111; } .bet-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .summary-box { padding: 9px 4px; text-align: center; border: 1px solid #c1a05280; border-radius: 7px; background: #021f17b5; } .summary-label { color: #c8d9ce; font-size: .7rem; } .summary-value { margin-top: 3px; color: #ffe39a; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; } .table-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .table-actions button { padding: 9px 14px; border: 1px solid #e5ce8a; border-radius: 7px; color: #fff; font-size: .8rem; font-weight: 800; cursor: pointer; background: linear-gradient(#5b6e60, #263d30); } .table-actions button:hover:not(:disabled) { filter: brightness(1.2); } .table-actions button:disabled { opacity: .45; cursor: not-allowed; } #clearBets { background: linear-gradient(#8c3939, #5b1b1b); } .status-message { min-height: 24px; margin-top: 10px; color: #f5df9b; font-size: .8rem; line-height: 1.5; text-align: center; } @media (max-width: 1050px) { .main-layout { grid-template-columns: minmax(0, 1fr); } .wheel-panel { width: min(680px, 100%); margin: 0 auto; } .wheel-wrap { width: min(76vw, 540px); } .betting-panel { width: min(760px, 100%); margin: 0 auto; } } @media (max-width: 520px) { body { padding: 12px 8px; } .wheel-panel, .betting-panel { padding: 10px; } .wheel-wrap { width: 88vw; } #throwHand { right: -5%; } .number-layout { grid-template-columns: 36px minmax(0, 1fr); gap: 3px; } .number-grid { grid-template-rows: repeat(12, minmax(32px, 1fr)); gap: 2px; } .number-cell { min-height: 32px; font-size: .8rem; } .zero-cell { font-size: .95rem; } .betting-table { padding: 5px; } .bet-cell.outside { font-size: .65rem; } .outside-grid .bet-cell { font-size: .6rem; min-height: 44px; } .chip-choice { width: 43px; height: 43px; } } .info-table-wrap { margin-top: 18px; overflow-x: auto; border-radius: 8px; border: 1px solid #9e7a36; background: rgba(0, 0, 0, 0.25); } .info-table { width: 100%; border-collapse: collapse; color: #e2d2ae; font-size: 0.85rem; text-align: center; } .info-table caption { padding: 8px 12px; color: #f3d98e; font-weight: bold; font-size: 0.9rem; background: rgba(158, 122, 54, 0.2); border-bottom: 1px solid #9e7a36; letter-spacing: 0.05em; } .info-table th, .info-table td { padding: 8px 10px; border-bottom: 1px solid rgba(158, 122, 54, 0.3); white-space: nowrap; } .info-table thead th { background: rgba(158, 122, 54, 0.3); color: #fff; font-weight: 600; } .info-table tbody th { font-weight: normal; text-align: left; color: #f3d98e; } .info-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } .info-table tbody tr:last-child th, .info-table tbody tr:last-child td { border-bottom: none; } .result.win-highlight { animation: winHighlight 3s ease-in-out; } @keyframes winHighlight { 0%, 100% { border-color: #c5a24f; box-shadow: inset 0 0 18px #0005; } 20%, 60% { border-color: #fff176; background: #d16ccc; box-shadow: 0 0 15px #ffd700, 0 0 30px #ffd700, inset 0 0 18px #fff8; } 40%, 80% { border-color: #fff; background: #af3650; box-shadow: 0 0 10px #ffd700; } } .win-message { color: #ff69b4; font-weight: bold; } .keyboard-modal { position: fixed; inset: 0; z-index: 10000; display: flex; justify-content: center; align-items: center; padding: 20px; background: rgba(0, 0, 0, 0.61); } .keyboard-modal[hidden] { display: none; } .keyboard-modal-content { width: 100%; max-width: 362px; padding: 28px 24px; border-radius: 14px; background: #053003; color: #b5bbb8; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .keyboard-modal-content h2 { margin: 0 0 24px; font-size: 22px; } .keyboard-help-item { display: flex; align-items: center; gap: 16px; margin: 14px 0; text-align: left; font-size: 16px; } .keyboard-help-item kbd { display: inline-block; min-width: 85px; padding: 9px 12px; border: 1px solid #010d14; border-radius: 7px; background: #0e5c66; color: #dbd8d8; font-weight: bold; text-align: center; } .keyboard-help-check { display: block; margin: 24px 0 20px; font-size: 14px; cursor: pointer; } .keyboard-help-check input { margin-right: 6px; } #closeKeyboardHelp { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #047904; color: #1d1b1b; font-size: 16px; font-weight: bold; cursor: pointer; } #closeKeyboardHelp:hover { background: #3f33e4; color: #f3ebeb; } .keyboard-help-notice { margin-top: 16px; font-size: 12px; line-height: 1.6; color: #ff8da9; } .keyboard-help-t { margin-top: 16px; font-size: 12px; line-height: 1.6; color: #ff8da9; text-align: left; } #clearWinStatsButton { margin: 10px 0; padding: 8px 16px; border: 1px solid #200505; border-radius: 6px; background: #410238; color: #e9e3e3; font-size: 13px; cursor: pointer; } #clearWinStatsButton:hover { background: #500404; color: #e7e2e2; } .yes { margin: 10px 20px; padding: 6px 16px; border: 0; border-radius: 6px; background: #800523; color: #e9e3e3; font-size: 13px; cursor: pointer; } .no { margin: 10px 20px; padding: 6px 16px; border: 0; border-radius: 6px; background: #051780; color: #e9e3e3; font-size: 13px; cursor: pointer; } .keyboard-modal-content { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .keyboard-modal-content::-webkit-scrollbar { display: none; } html, body { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }