
/* Keep the play surface readable instead of shrinking twelve columns. */
@media (max-width:760px){
 #velvet-roulette-root{min-width:0}#velvet-roulette-root headerr{height:auto;min-height:64px;padding:10px 12px;gap:10px;flex-wrap:wrap}#velvet-roulette-root .brand{flex-shrink:0}#velvet-roulette-root .brand-sub{display:none}#velvet-roulette-root .header-actions{flex:1;justify-content:flex-end;min-width:0}#velvet-roulette-root .sound-toggle,#velvet-roulette-root .player-button{min-height:40px;font-size:12px}#velvet-roulette-root .player-button{max-width:clamp(90px,28vw,170px)}
 #velvet-roulette-root main{padding:20px 12px max(20px,env(safe-area-inset-bottom))}#velvet-roulette-root .heading{gap:12px;align-items:flex-start;margin-bottom:18px}#velvet-roulette-root .heading>div:first-child{min-width:0}#velvet-roulette-root h1{font-size:clamp(23px,5.8vw,32px);line-height:1.1;margin-top:8px}#velvet-roulette-root .eyebrow{font-size:10px;letter-spacing:1px}#velvet-roulette-root .balance{flex-shrink:0;max-width:44%;overflow-wrap:anywhere}#velvet-roulette-root .balance strong{font-size:clamp(18px,4.8vw,25px)}#velvet-roulette-root .balance small{display:block;margin:1px 0 0;font-size:12px}
 #velvet-roulette-root .game{border-radius:14px}#velvet-roulette-root .table-top{padding:12px;gap:10px;align-items:flex-start;flex-wrap:wrap}#velvet-roulette-root .table-label{font-size:11px;line-height:1.5;max-width:100%;overflow-wrap:anywhere}#velvet-roulette-root .recent{margin-left:auto;min-width:0}#velvet-roulette-root #history{gap:4px;flex-wrap:wrap;justify-content:flex-end}#velvet-roulette-root .history-number{width:25px;height:25px;font-size:12px}
 #velvet-roulette-root .felt{padding:12px 10px 10px}#velvet-roulette-root .table-scroll{overflow:visible;padding:0}#velvet-roulette-root .betting{min-width:0;width:100%;max-width:540px;margin:0 auto;grid-template-columns:minmax(0,1fr) 36px 40px;grid-template-rows:40px 540px 38px;gap:4px}
 #velvet-roulette-root .zero{grid-column:1;grid-row:1;border-radius:15px 15px 3px 3px;font-size:24px}#velvet-roulette-root .numbers{grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:3px}
 #velvet-roulette-root .numbers>[data-bet^="n"]{grid-column:var(--mobile-column);grid-row:var(--mobile-row);min-width:0;font-size:20px;padding:0 0 0 5px;text-align:left;padding-left:14px}#velvet-roulette-root .columns{grid-column:1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;gap:3px}#velvet-roulette-root .columns>[data-bet="c1"]{grid-column:1;grid-row:1}#velvet-roulette-root .columns>[data-bet="c2"]{grid-column:2;grid-row:1}#velvet-roulette-root .columns>[data-bet="c3"]{grid-column:3;grid-row:1}
 #velvet-roulette-root .dozens{grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:3px}#velvet-roulette-root .outside{grid-column:3;grid-row:2;grid-template-columns:1fr;grid-template-rows:repeat(6,minmax(0,1fr));gap:3px}#velvet-roulette-root .dozens button,#velvet-roulette-root .outside button{writing-mode:vertical-rl;text-orientation:mixed;font-size:13px;letter-spacing:1px;padding:5px 0;display:flex;align-items:center;justify-content:center}#velvet-roulette-root .outside .diamond{width:17px;height:17px;flex-shrink:0}
 #velvet-roulette-root .numbers .joint{left:var(--mobile-x)!important;top:var(--mobile-y)!important;width:27px;height:20px}#velvet-roulette-root .numbers .joint.horizontal{width:20px;height:28px}#velvet-roulette-root .numbers .joint.corner{width:23px;height:23px}#velvet-roulette-root .numbers .joint.zero-split{left:var(--mobile-x)!important;top:-3px!important;width:28px;height:20px}#velvet-roulette-root .joint-dot{background:#f1dab1aa}#velvet-roulette-root .joint.corner .joint-dot{width:6px;height:6px}
 #velvet-roulette-root .bet-chip{min-width:25px;height:25px;max-width:90%;padding:0 2px;right:2px;bottom:2px;font-size:10px}#velvet-roulette-root .win-gain{font-size:10px;padding:1px 3px;top:-4px;max-width:125%;overflow:hidden;text-overflow:ellipsis}#velvet-roulette-root .joint .win-gain{top:-21px}#velvet-roulette-root .felt-caption{gap:8px;flex-wrap:wrap;padding:12px 0 0;font-size:9px;letter-spacing:1px}#velvet-roulette-root .table-bottom{padding:12px;gap:8px;align-items:flex-start}#velvet-roulette-root .status{font-size:13px;line-height:1.5;max-width:none;flex:1;min-width:0;overflow-wrap:anywhere}#velvet-roulette-root .table-bottom .text-button{font-size:12px;min-height:40px;flex-shrink:0}
 #velvet-roulette-root .controls{position:sticky;bottom:0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;background:#0b211bed;border:1px solid #6b856055;border-radius:14px 14px 0 0;backdrop-filter:blur(16px);padding:12px 12px max(12px,env(safe-area-inset-bottom));margin:16px -4px 0;box-shadow:0 -8px 28px #0004}#velvet-roulette-root .chip-area{min-width:0}#velvet-roulette-root .label{font-size:10px;letter-spacing:1px;margin-bottom:10px}#velvet-roulette-root .chips{gap:clamp(9px,3vw,17px);padding:3px 3px 0}#velvet-roulette-root .chip{width:42px;height:42px;flex-shrink:0;font-size:12px}#velvet-roulette-root .chip.selected{outline-offset:3px;transform:translateY(-1px)}#velvet-roulette-root .bet-total{min-width:60px;max-width:130px;padding-left:12px;overflow-wrap:anywhere}#velvet-roulette-root .bet-total strong{font-size:20px}#velvet-roulette-root .bet-total small{display:block;font-size:11px;margin:0}#velvet-roulette-root .actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(135px,1fr);gap:12px;width:100%;margin:0}#velvet-roulette-root .minor-actions{display:flex;gap:0;justify-content:space-between}#velvet-roulette-root .minor-actions button{font-size:12px;min-height:44px;padding:5px 7px}#velvet-roulette-root .actions .spin{width:100%;max-width:none;margin:0;padding:12px 8px;min-height:48px;font-size:11px;letter-spacing:.7px}#velvet-roulette-root .spin span{font-size:17px;margin-left:7px}
 #velvet-roulette-root .bet-guidance{font-size:12px;line-height:1.6;gap:6px;margin-top:18px}#velvet-roulette-root .bet-guidance span{display:block;width:100%}
 #velvet-roulette-root .game .overlay{position:fixed;inset:0;z-index:100;min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));justify-content:flex-end;gap:12px;animation:none;overflow-y:auto}#velvet-roulette-root .overlay .wheel-wrap{width:min(92vw,calc(100dvh - 205px),520px);max-width:100%;flex-shrink:0}#velvet-roulette-root .overlay .spin-heading{font-size:12px;text-align:center;line-height:1.5}#velvet-roulette-root .overlay .spin-result{font-size:clamp(20px,5vw,28px);line-height:1.35;min-height:0;max-width:100%;margin:0}#velvet-roulette-root .overlay .continue{min-height:48px;font-size:15px;margin:0;padding:12px 24px}
 #velvet-roulette-root .leaderboard{padding:20px 12px;margin-top:26px;border-radius:14px}#velvet-roulette-root .leaderboard-heading{gap:10px}#velvet-roulette-root .leaderboard-heading h2{font-size:29px}#velvet-roulette-root .leaderboard-heading .eyebrow{font-size:9px}#velvet-roulette-root .leaderboard-heading button{min-height:44px}#velvet-roulette-root .leaderboard table{table-layout:fixed;white-space:normal}#velvet-roulette-root .leaderboard th,#velvet-roulette-root .leaderboard td{padding:12px 6px;font-size:12px;overflow-wrap:anywhere}#velvet-roulette-root .leaderboard th{font-size:10px;letter-spacing:.3px}#velvet-roulette-root .leaderboard th:first-child,#velvet-roulette-root .leaderboard td:first-child{width:12%}#velvet-roulette-root .leaderboard th:nth-child(2){width:40%}#velvet-roulette-root .leaderboard th:nth-child(3){width:30%}#velvet-roulette-root .leaderboard th:last-child{width:18%}#velvet-roulette-root .leaderboard-caption{font-size:12px;line-height:1.5}#velvet-roulette-root .leaderboard-scroll{overflow:visible}#velvet-roulette-root footerr{gap:10px;font-size:11px}#velvet-roulette-root footerr button{min-height:44px}
 #velvet-roulette-root dialog,#velvet-roulette-root #profile-dialog{width:calc(100% - 20px);max-width:540px;max-height:calc(100dvh - 24px);padding:26px 18px;overflow-y:auto;margin: 50px auto auto;overscroll-behavior:contain}#velvet-roulette-root dialog h2{font-size:28px}#velvet-roulette-root dialog .close{min-width:40px;min-height:40px;top:3px;right:6px}#velvet-roulette-root #profile-dialog h2{padding-right:24px}#velvet-roulette-root .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#velvet-roulette-root .avatar-choice{min-width:0;min-height:82px;font-size:12px;overflow-wrap:anywhere}#velvet-roulette-root .avatar-icon{font-size:28px}#velvet-roulette-root #save-profile{max-width:none;margin:0;font-size:13px;min-height:48px}
}
@media(max-width:359px){#velvet-roulette-root headerr{gap:4px}#velvet-roulette-root .brand{font-size:17px!important;letter-spacing:2px!important}#velvet-roulette-root .brandmark{display:none}#velvet-roulette-root .sound-toggle,#velvet-roulette-root .player-button{font-size:11px;padding:7px}#velvet-roulette-root .header-actions{gap:4px}#velvet-roulette-root main{padding-inline:8px}#velvet-roulette-root .betting{grid-template-columns:minmax(0,1fr) 30px 34px}#velvet-roulette-root .numbers>[data-bet^="n"]{font-size:18px;padding-left:8px}#velvet-roulette-root .controls{padding-inline:9px}#velvet-roulette-root .chips{gap:8px}#velvet-roulette-root .chip{width:38px;height:38px;border-width:4px}#velvet-roulette-root .bet-total{padding-left:8px}#velvet-roulette-root .actions{grid-template-columns:1fr;gap:5px}#velvet-roulette-root .minor-actions{justify-content:space-around}#velvet-roulette-root .minor-actions button{padding:3px 12px;min-height:36px}#velvet-roulette-root .actions .spin{min-height:44px}#velvet-roulette-root .avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:520px) and (max-width:950px){#velvet-roulette-root .game .overlay{position:fixed;inset:0;z-index:100;padding:12px;gap:6px;animation:none}#velvet-roulette-root .overlay .wheel-wrap{width:min(50vw,calc(100dvh - 135px));flex-shrink:0}#velvet-roulette-root .overlay .spin-heading{font-size:11px}#velvet-roulette-root .overlay .spin-result{font-size:20px}#velvet-roulette-root .overlay .continue{min-height:40px;margin:0;padding:8px 20px}#velvet-roulette-root .controls{position:static}}

/* Center the mobile wheel within the iframe; allow scrolling on short screens. */
@media(max-width:760px), (max-height:520px) and (max-width:950px){
 #velvet-roulette-root .game .overlay{justify-content:center;justify-content:safe center}
 #velvet-roulette-root .game .overlay .spin-heading{margin-top:0}
}

/* The wheel's center is exactly halfway down the iframe viewport. */
@media(max-width:760px), (max-height:520px) and (max-width:950px){
 #velvet-roulette-root .game .overlay{position:fixed;inset:0;width:100%;height:100%;min-height:0;max-height:100%;box-sizing:border-box;padding:0 16px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);gap:0;justify-items:center;align-items:center;overflow-y:auto}
 #velvet-roulette-root .game .overlay[hidden]{display:none}
 #velvet-roulette-root .game .overlay .spin-heading{grid-column:1;grid-row:1;align-self:end;margin:0 0 12px;text-align:center}
 #velvet-roulette-root .game .overlay .wheel-wrap{grid-column:1;grid-row:2;width:min(92vw,calc(100dvh - 240px),520px);max-width:100%;margin:0}
 #velvet-roulette-root .game .overlay .spin-result{grid-column:1;grid-row:3;align-self:start;margin:12px 0 0;text-align:center}
 #velvet-roulette-root .game .overlay .continue{grid-column:1;grid-row:3;align-self:start;margin:64px 0 0;min-height:44px}
}
@media(max-height:520px) and (max-width:950px){
 #velvet-roulette-root .game .overlay .wheel-wrap{width:min(50vw,calc(100dvh - 190px))}
 #velvet-roulette-root .game .overlay .spin-heading{margin-bottom:6px}
 #velvet-roulette-root .game .overlay .spin-result{margin-top:6px;font-size:18px}
 #velvet-roulette-root .game .overlay .continue{margin-top:40px;min-height:40px}
}

/* Mobile wheel center: 40% of the iframe height (two fifths). */
@media(max-width:760px), (max-height:520px) and (max-width:950px){
 #velvet-roulette-root .game .overlay .spin-heading,#velvet-roulette-root .game .overlay .wheel-wrap,#velvet-roulette-root .game .overlay .spin-result,#velvet-roulette-root .game .overlay .continue{position:relative;top:-10vh}
}

