@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/montserrat-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/montserrat-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/montserrat-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/montserrat-900.ttf) format('truetype');
}

*{box-sizing:border-box}html,body{margin:0;height:100%;background:#303030;color:#fff;font-family:Montserrat,Arial,sans-serif}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit;background:#555;border-radius:7px;transition:background .15s,filter .15s}button:hover{filter:brightness(1.12)}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible{outline:3px solid #ffe08b;outline-offset:3px}button:disabled{cursor:default;filter:none;opacity:.55}[hidden]{display:none!important}header{height:48px;flex-shrink:0;display:flex;align-items:center;padding:0 20px;gap:18px;background:#414141;z-index:4}.logo{width:202px;height:auto}.demo{font-size:11px;letter-spacing:.8px;color:#bcbcbc;white-space:nowrap}.header-right{margin-left:auto;display:flex;gap:15px;align-items:center}.help{padding:8px 15px;font-size:14px;white-space:nowrap}.balance{background:#555;border-radius:5px;min-width:180px;padding:7px 20px;display:flex;align-items:center;justify-content:flex-end;gap:13px;font-size:14px;font-variant-numeric:tabular-nums}.balance b,.presets b{font-family:Arial;background:#fff;color:#555;border-radius:50%;width:18px;height:18px;text-align:center;line-height:18px;display:inline-block;font-size:13px}.icon{font-size:24px;background:transparent;width:30px;line-height:32px}main{display:flex;flex:1;min-height:0;flex-direction:column}#board{position:relative;flex:1;min-height:220px;background:#74706d;overflow:hidden}canvas{width:100%;height:100%;display:block}.topline{position:absolute;top:5px;left:10px;display:flex;gap:14px;font-size:12px;color:#e6e6e6;background:#43434375;border-radius:5px;padding:4px 8px;pointer-events:none}#lastWin{color:#92df8f}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#706b67;z-index:2}#progress{position:absolute;right:16px;top:12px;font-size:13px;background:#414141b3;padding:7px 12px;border-radius:6px}#toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:#292929e8;padding:12px 20px;border-radius:8px;text-align:center;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}.controls{background:#303030;padding:24px 26px 9px;flex-shrink:0}.control-panel{border:2px solid #535353;border-radius:18px;background:#414141;box-shadow:inset 0 0 5px #555;display:grid;grid-template-columns:244px minmax(270px,1fr) 328px;gap:20px;padding:16px;align-items:stretch}fieldset{border:0;margin:0;padding:0;min-width:0}.bet-input{background:#555;padding:7px 9px;border-radius:8px;display:flex;align-items:center;gap:5px;height:49px;box-shadow:0 3px 3px #333}.bet-input button{background:#696969;font-size:13px;border-radius:3px;padding:7px}.bet-input input{background:transparent;border:0;color:#fff;text-align:center;min-width:0;width:100%;font-size:14px;appearance:textfield}.bet-input input::-webkit-inner-spin-button{appearance:none}.bet-input>span{font-size:14px;color:#ccc}.presets{display:flex;gap:10px;margin-top:12px}.presets button{flex:1;font-size:13px;white-space:nowrap;height:39px;box-shadow:0 3px 3px #303030}.difficulty{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.difficulty-label{display:flex;justify-content:space-between;font-size:14px;gap:10px}.difficulty-label span:last-child{color:#b4b4b4;font-size:13px}.levels{display:flex;background:#545454;padding:4px;border-radius:7px;height:39px;box-shadow:0 3px 3px #303030}.levels button{flex:1;background:transparent;font-size:14px;padding:4px}.levels button[aria-pressed=true]{background:#696969}.actions{display:flex;gap:10px;min-width:0}.actions button{flex:1;font-size:29px;font-weight:700;background:#67bf61;box-shadow:0 3px 4px #303030;min-height:97px;padding:12px;min-width:0}#cashout{background:#e7ac36;font-size:15px;color:#29200d}#cashout strong{display:block;font-size:22px;margin-top:5px}.foot{display:flex;justify-content:flex-end;font-size:11px;color:#aaa;padding:9px 4px 0}.win{position:absolute;top:21%;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#486c32f5,#243721f5);border:2px solid #d8e974;border-radius:20px;box-shadow:0 15px 70px #0006,0 0 40px #c1e95a30;text-align:center;padding:25px 45px;min-width:310px;animation:winIn .3s}.win>span{font-size:17px;letter-spacing:1px;color:#efffc3}.win strong{display:block;font-size:42px;margin:12px 0;color:#fff7c7}.win b{display:block;color:#d3f779;font-size:23px}.win small{display:block;font-size:12px;color:#c4d6bc;margin-top:16px}@keyframes winIn{from{opacity:0;scale:.85}to{opacity:1;scale:1}}#menu{position:absolute;z-index:8;right:12px;top:53px;width:305px;background:#444;padding:20px;border:1px solid #626262;border-radius:12px;box-shadow:0 15px 60px #0008}.profile{display:flex;align-items:center;gap:15px;padding-bottom:20px;border-bottom:1px solid #666}.profile>span{font-size:40px}.profile button{display:block;background:none;color:#aaa;font-size:12px;padding:6px 0}#menu label{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:15px 0}input[type=checkbox]{accent-color:#6cc963;width:19px;height:19px}#menu>button{display:block;width:100%;padding:12px 0;text-align:left;background:none;font-size:14px}#menu p{font-size:12px;line-height:1.6;color:#bdbdbd;border-top:1px solid #666;padding-top:14px}dialog{width:min(580px,92vw);max-height:85dvh;border:0;border-radius:14px;padding:30px 34px;background:#535353;color:#fff;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.dialog-header h2{font-size:20px;margin:0}.dialog-header button{background:none;font-size:30px;padding:0 5px}#dialogContent{font-size:14px;line-height:1.6}#dialogContent ol{padding-left:22px}#dialogContent li{padding-left:8px;margin:15px 0}.history-row{display:flex;justify-content:space-between;border-top:1px solid #777;padding:13px 0;gap:15px}.history-row strong{color:#b6f29f}.avatars{display:flex;gap:12px;flex-wrap:wrap}.avatars button{font-size:36px;padding:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1500px){.control-panel{max-width:1500px;margin:auto}}@media(max-width:1000px){.demo{display:none}.control-panel{grid-template-columns:205px 1fr 230px;gap:15px}.difficulty-label{flex-direction:column;gap:5px}.difficulty{gap:10px}.actions button{font-size:23px}.help{padding:8px}.controls{padding:16px 16px 8px}.header-right{gap:10px}.logo{width:180px}}@media(max-width:720px){header{padding:0 10px;height:52px;gap:8px}.logo{width:140px}.help span,#fullscreen{display:none}.help{font-size:20px;background:none;padding:0}.header-right{gap:7px}.balance{min-width:0;padding:7px 9px;gap:7px;font-size:12px}.balance b{width:16px;height:16px;line-height:16px}.icon{font-size:21px;width:25px}.controls{padding:12px 10px 8px}.control-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px;padding:12px;border-radius:14px}.difficulty{grid-row:1;grid-column:1/-1;gap:10px}.difficulty-label{flex-direction:row;font-size:13px}.difficulty-label span:last-child{font-size:12px}.levels{height:38px}.levels button{font-size:13px}.presets{gap:5px;margin-top:9px}.presets button{height:35px;font-size:12px}.presets b{width:15px;height:15px;font-size:11px;line-height:15px}.bet-input{height:42px;padding:5px}.bet-input button{font-size:11px;padding:6px}.actions button{font-size:22px;min-height:86px;padding:8px}.actions:has(#cashout:not([hidden])){flex-direction:column;gap:7px}.actions:has(#cashout:not([hidden])) button{min-height:40px;font-size:17px;padding:5px}#cashout strong{font-size:16px;display:inline;margin:0 0 0 5px}#cashout{font-size:12px!important}.foot{font-size:10px;justify-content:center}#keyboardHint{display:none}#progress{top:40px;font-size:12px}.topline{font-size:11px}.win{padding:22px;min-width:270px}.win strong{font-size:32px}dialog{padding:24px}#board{min-height:180px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Activity feed, matching the reference while clearly identifying the demo. */
.live-feed{position:absolute;top:8px;left:12px;max-width:calc(100% - 24px);color:#f5f5f5;pointer-events:none;border-radius:9px;background:#393b356b;overflow:hidden;padding:7px 10px 9px;contain:layout paint}.live-heading{display:flex;align-items:center;gap:11px;font-size:14px;white-space:nowrap;color:#dbddd9}.live-heading small{font-size:12px;color:#d4d9ca;margin-left:4px}.online-dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#67ef69;box-shadow:0 0 6px #78ef7b80}.live-row{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:16px;font-weight:700;height:29px}.live-person{position:relative;flex:0 0 28px;height:28px;margin-right:3px}#liveAvatar{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;font-size:15px;background:#e16b68}.flag-fr{position:absolute;right:-5px;bottom:-3px;width:19px;height:12px;box-shadow:0 0 0 1px #ffffff70;background:linear-gradient(to right,#002395 0 33.333%,white 33.333% 66.666%,#ed2939 66.666%)}#liveName{max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#liveAmount{color:#70f575;font-variant-numeric:tabular-nums;white-space:nowrap}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#menu{max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}#progress{top:auto;bottom:14px;font-variant-numeric:tabular-nums}.win{max-width:calc(100% - 24px)}.win strong{overflow-wrap:anywhere}.win b{overflow-wrap:anywhere}
@media(max-width:720px){
 body{min-height:520px;overflow-y:auto;overscroll-behavior-y:none}header{height:56px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:4px}.logo{width:clamp(115px,33vw,150px)}.header-right{gap:1px;min-width:0}.help,.icon{min-width:40px;min-height:44px;line-height:44px}.balance{font-size:13px;padding:9px 7px;gap:5px;white-space:nowrap;min-width:0}.balance #balance{max-width:116px;overflow:hidden;text-overflow:ellipsis}.help{order:2}#menuButton{order:3}.balance{order:1}#board{min-height:215px}.live-feed{top:8px;left:8px;max-width:calc(100% - 16px);padding:7px 9px 8px;border-radius:8px}.live-heading{font-size:12px;gap:7px}.live-heading small{font-size:12px;margin-left:2px}.live-row{font-size:14px;gap:8px;margin-top:10px}#liveName{max-width:142px}.live-person,#liveAvatar{width:26px;height:26px}.live-person{flex-basis:26px}#liveAmount{font-size:14px}#progress{bottom:12px;right:10px;padding:6px 9px;font-size:12px;top:auto}
 .controls{padding:8px 8px max(8px,env(safe-area-inset-bottom));}.control-panel{display:grid;grid-template-columns:minmax(0,1fr);padding:10px;gap:10px;border-radius:15px}.difficulty{grid-column:1;grid-row:1;gap:0}.difficulty-label{display:none}.levels{height:44px;padding:2px;box-shadow:none}.levels button{font-size:13px;min-height:40px}.difficulty-label span:last-child{display:none}#betControls{grid-row:2;display:grid;grid-template-columns:1fr;gap:8px}.bet-input{height:44px;padding:0 5px;box-shadow:none}.bet-input button{height:38px;min-width:44px;font-size:12px}.bet-input input{font-size:16px}.presets{margin:0;gap:8px}.presets button{height:44px;font-size:14px;box-shadow:none}.presets b{width:17px;height:17px;font-size:12px;line-height:17px}.actions,.actions:has(#cashout:not([hidden])){grid-row:3;display:flex;flex-direction:row;gap:8px}.actions button,.actions:has(#cashout:not([hidden])) button{min-height:58px;padding:8px;font-size:22px;border-radius:10px}#cashout{font-size:13px!important;flex:1.05}#cashout strong{display:block;font-size:clamp(14px,4vw,19px);margin:3px 0 0;overflow-wrap:anywhere}.foot{display:none}.win{top:25%;min-width:0;width:min(340px,calc(100% - 32px));padding:20px 16px;border-radius:16px}.win>span{font-size:14px;letter-spacing:.5px}.win strong{font-size:clamp(20px,6.5vw,28px);margin:12px 0}.win b{font-size:20px}.win small{font-size:12px;line-height:1.4;margin-top:12px}#toast{max-width:calc(100% - 24px);width:max-content;padding:10px 14px;font-size:13px;bottom:45px}dialog{width:calc(100% - 24px);max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px;overscroll-behavior:contain}.dialog-header h2{font-size:18px}.dialog-header button{min-width:44px;min-height:44px}#menu{top:60px;right:8px;width:min(320px,calc(100vw - 16px));padding:18px}#menu label,#menu>button{min-height:48px}.history-row{font-size:13px;flex-wrap:wrap}
}
@media(max-width:350px){.logo{width:110px}.help{display:none}.live-heading{gap:6px;font-size:11px}.live-heading small{font-size:11px}.live-row{gap:6px}#liveName{max-width:127px}#liveAmount{font-size:13px}}
@media(max-height:500px) and (orientation:landscape){body{min-height:0}header{height:44px}.controls{padding:6px}.control-panel{grid-template-columns:1fr 1fr;gap:6px;padding:6px}.difficulty{grid-column:1;grid-row:1}.levels{height:40px}#betControls{grid-column:1;grid-row:2;display:block}.presets,.difficulty-label{display:none}.actions,.actions:has(#cashout:not([hidden])){grid-row:1/3;grid-column:2}#board{min-height:160px}.win{top:8%;padding:12px}.win small{display:none}.win strong{margin:5px 0}.live-feed{top:4px}.live-row{margin-top:4px}}
.live-heading{flex-wrap:wrap;column-gap:9px;row-gap:5px}.live-heading small{order:1}.live-heading>b{order:0}.live-heading .online-dot{order:2}.live-heading .live-online{order:3}.live-feed{width:max-content;max-width:calc(100% - 24px)}
@media(max-width:720px){.live-feed{width:calc(100% - 16px);max-width:350px}.live-heading{font-size:12px;column-gap:7px}.live-heading .live-online{font-size:11px}.live-heading .online-dot{width:6px;height:6px;margin-left:auto}.live-heading small{font-size:11px;margin-left:0}.live-heading>b{font-size:12px}.live-row{justify-content:flex-start}#liveName{max-width:none;min-width:0;flex:1}#liveAmount{margin-left:auto}}
@media(max-width:350px){.live-heading .live-online,.live-heading .online-dot{display:none}.live-heading small{margin-left:auto}}
.win .offer-button{display:block;width:100%;min-height:54px;margin-top:18px;padding:12px 16px;background:#f0bd4d;color:#282211;font-size:17px;font-weight:800;line-height:1.3;border-radius:10px;box-shadow:0 3px 0 #bc8735}.win #offerNote{display:block;font-size:12px;line-height:1.35;margin:12px 0 0;color:#d1dfc7}.win .continue-demo{display:block;margin:4px auto -8px;padding:10px;min-height:44px;background:transparent;font-size:13px;color:#e8efd9;text-decoration:underline;text-underline-offset:3px}.actions #play.offer-button{font-size:19px;line-height:1.3;background:#f0bd4d;color:#282211;padding:12px 20px}.win{max-height:calc(100% - 20px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:720px){.win{top:50%;transform:translate(-50%,-50%);padding:18px 16px}.win .offer-button{font-size:15px;min-height:52px;margin-top:14px;padding:10px}.actions #play.offer-button{font-size:17px;min-height:58px;padding:10px 18px}.win #offerNote{font-size:12px}.win .continue-demo{font-size:13px}}
@media(max-height:650px) and (max-width:720px){.win{padding:12px 14px}.win strong{margin:6px 0;font-size:23px}.win b{font-size:17px}.win .offer-button{margin-top:10px;min-height:44px}.win #offerNote{margin-top:8px}.win .continue-demo{min-height:38px;padding:8px}.win>span{font-size:13px}}
.win .offer-button,.actions #play.offer-button{background:#ff8a1f;color:#24170a;box-shadow:0 3px 0 #c9610b}.win .offer-button:hover,.actions #play.offer-button:hover{background:#ff9c3e;filter:none}.actions:has(#depositCondition:not([hidden])){flex-wrap:wrap;align-content:center;gap:8px}.actions:has(#depositCondition:not([hidden])) #play{flex-basis:100%}.actions #depositCondition{width:100%;text-align:center;font-size:12px;line-height:1.4;color:#d7d7d7}.win .offer-button{line-height:1.45}.actions #play.offer-button{line-height:1.4;font-size:18px}.win #offerNote{margin-bottom:0}
@media(max-width:720px){.actions #play.offer-button{font-size:16px;min-height:58px;padding:10px 14px}.win .offer-button{font-size:15px;padding:10px 12px}.actions #depositCondition{font-size:12px}}

.win .offer-button{margin-bottom:2px}

/* Larger touch targets for stake adjustment. */
.bet-input #decreaseBet,
.bet-input #increaseBet {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.bet-input { min-height: 58px; }

/* Gentle emphasis on the popup action. */
#winOffer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: offerPulse 2.8s ease-in-out infinite;
  transition: filter .18s ease, transform .18s ease;
}
#winOffer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, #ffffff40 48%, transparent 70%);
  transform: translateX(-130%);
  animation: offerShine 4.5s ease-in-out infinite;
}
@keyframes offerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 0 #c9610b, 0 0 0 0 #ffb34700; }
  50% { transform: scale(1.025); box-shadow: 0 4px 0 #c9610b, 0 0 18px 3px #ffb34766; }
}
@keyframes offerShine {
  0%, 60% { transform: translateX(-130%); }
  90%, 100% { transform: translateX(130%); }
}
#winOffer:hover { animation-play-state: paused; filter: brightness(1.08); }
#winOffer:active { animation: none; transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 #c9610b; }
@media (prefers-reduced-motion: reduce) {
  #winOffer, #winOffer::after { animation: none !important; transition: none; }
  #winOffer::after { display: none; }
}

/* The offer is a native modal: only its controls can receive interaction. */
dialog.win {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(580px, calc(100vw - 32px));
  min-width: 0;
  max-height: calc(100dvh - 32px);
  color: #fff;
}
dialog.win::backdrop { background: rgba(0, 0, 0, .45); }
@media (max-width: 720px) {
  dialog.win { width: min(340px, calc(100vw - 32px)); }
}

/* Keep the live feed readable while the offer blocks the game. */
body:has(#win[open]) > header,
body:has(#win[open]) .controls,
body:has(#win[open]) #scene,
body:has(#win[open]) #progress,
body:has(#win[open]) #toast,
body:has(#win[open]) #menu {
  filter: blur(5px);
}
dialog.win::backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}