/* ======================================================================== DPH Flow — Responsive Web overrides Activated by class="web" on . Removes the fixed tablet frame and adapts to mobile / tablet / desktop viewports. ======================================================================== */ html.web, html.web body { height: 100%; background: var(--bg-deep); } html.web .stage { padding: 0; min-height: 100vh; align-items: stretch; justify-content: stretch; background: radial-gradient(800px 500px at 20% 0%, rgba(var(--gold-rgb), 0.06), transparent 60%), radial-gradient(600px 400px at 90% 100%, rgba(var(--gold-rgb), 0.04), transparent 60%), var(--bg-deep); } html.web .tablet { width: 100%; max-width: none; height: auto; min-height: 100vh; border-radius: 0; box-shadow: none; background: transparent; } html.web .tablet::before { display: none; } html.web .status-bar { display: none; } html.web .app { max-width: 1100px; width: 100%; margin: 0 auto; background: var(--bg-felt); min-height: 100vh; box-shadow: 0 0 80px -10px rgba(0,0,0,0.4); } /* On wide screens give the "app" some breathing on the sides */ @media (min-width: 1400px) { html.web .stage { padding: 24px; } html.web .app { min-height: calc(100vh - 48px); border-radius: 28px; overflow: hidden; } } /* === Counter: bigger tap circle on desktop === */ @media (min-width: 900px) { html.web .tap-circle { width: 440px; height: 440px; } html.web .tap-circle .num { font-size: 150px; } html.web .tap-circle::after { -webkit-mask: radial-gradient(transparent 214px, #000 216px); mask: radial-gradient(transparent 214px, #000 216px); } html.web .shuffle-timer { width: 420px; height: 420px; } } /* === Tablet & smaller (under 900px) === */ @media (max-width: 900px) { html.web .home-grid { padding: 18px 20px 24px; } html.web .topbar, html.web .section-h, html.web .recent-list, html.web .form-screen, html.web .footer-cta, html.web .hist-list, html.web .std-table, html.web .shuffle-screen, html.web .result-screen { padding-left: 20px; padding-right: 20px; } html.web .login-screen { padding: 40px 30px; } } /* === Mobile (under 640px) === */ @media (max-width: 640px) { html.web .topbar { padding: 14px 16px 12px; } html.web .topbar .title { font-size: 22px; } html.web .home-grid { grid-template-columns: 1fr !important; padding: 16px 16px 20px; gap: 10px; } html.web .action-card { padding: 18px; } html.web .action-card .ti { font-size: 20px; } html.web .section-h, html.web .recent-list, html.web .form-screen, html.web .footer-cta, html.web .hist-list, html.web .std-table, html.web .shuffle-screen, html.web .result-screen, html.web .counter-head, html.web .counter-stats, html.web .counter-foot { padding-left: 16px; padding-right: 16px; } html.web .login-screen { padding: 30px 18px 40px; } html.web .brand-mark { margin-bottom: 30px; } html.web .brand-mark .logo { width: 70px; height: 70px; } html.web .brand-mark .logo svg { width: 40px; height: 40px; } html.web .brand-mark h1 { font-size: 34px; margin-top: 8px; } html.web .brand-mark .tag { font-size: 10px; letter-spacing: 0.24em; } html.web .role-grid { grid-template-columns: 1fr !important; } html.web .role-chip { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; } html.web .role-chip .ic { height: auto; } html.web .role-chip .lb { margin-top: 0; } html.web .croupier-pick { grid-template-columns: repeat(2, 1fr) !important; } html.web .option-grid.g4 { grid-template-columns: repeat(2, 1fr) !important; } html.web .option-grid.g6 { grid-template-columns: repeat(3, 1fr) !important; } html.web .occ { padding: 10px 4px; font-size: 16px; } html.web .occupancy-row { flex-wrap: wrap; } html.web .occupancy-row .occ { flex: 1 1 calc(25% - 6px); min-width: 60px; } html.web .tap-circle { width: 280px; height: 280px; } html.web .tap-circle::after { -webkit-mask: radial-gradient(transparent 134px, #000 136px); mask: radial-gradient(transparent 134px, #000 136px); } html.web .tap-circle .num { font-size: 100px; } html.web .tap-circle .lb { bottom: 70px; font-size: 10px; letter-spacing: 0.24em; } html.web .tap-circle .dph-proj { top: 60px; font-size: 18px; } html.web .counter-head { padding: 16px 16px 12px; flex-direction: column; gap: 12px; align-items: stretch; } html.web .counter-head .iconbtn { align-self: flex-end; margin-top: -50px; } html.web .counter-stats { gap: 10px; } html.web .cstat { padding: 10px 12px; } html.web .cstat .vl { font-size: 20px; } html.web .counter-foot { padding: 14px 16px 16px; gap: 8px; } html.web .counter-foot .btn { padding: 12px 14px; font-size: 14px; } html.web .result-hero .dph-big { font-size: 84px; } html.web .result-hero .who { font-size: 22px; } html.web .metrics-row { grid-template-columns: 1fr 1fr; } html.web .team-bars { height: 130px; } html.web .tb .bar { width: 50px; } html.web .shuffle-timer { width: 280px; height: 280px; } html.web .shuffle-timer .time { font-size: 64px; } html.web .shuffle-timer .ms { font-size: 22px; } html.web .std-row { grid-template-columns: 1fr auto auto auto; gap: 8px; padding: 12px; } html.web .std-row .vl { width: 56px; } html.web .std-row .vl input { width: 50px; font-size: 14px; } html.web .hist-row { padding: 12px; gap: 10px; } html.web .hist-row .date { width: 56px; padding-right: 10px; } html.web .hist-row .info .g { font-size: 13px; } html.web .hist-row .dph { font-size: 18px; } html.web .modal-back { padding: 18px; } html.web .modal { padding: 22px; } html.web .toast { font-size: 12px; padding: 10px 18px; bottom: 18px; } html.web .avatar-pill .nm { display: none; } html.web .avatar-pill .rl { display: none; } html.web .avatar-pill { padding: 4px; } } /* === Very small (under 380px) === */ @media (max-width: 380px) { html.web .croupier-pick { grid-template-columns: 1fr 1fr !important; } html.web .occupancy-row .occ { flex: 1 1 calc(33% - 6px); } }