/* Keep the entry action inside the phone's usable viewport, including browser chrome. */
@media (max-width:600px) and (orientation:portrait) {
  .topbar {display:none}
  .stage {height:calc(100dvh - 26px - env(safe-area-inset-bottom));min-height:0}
  .game-footer {height:calc(26px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .controls .spin {width:clamp(64px,11dvh,88px);height:clamp(64px,11dvh,88px)}
  body.splash-open {height:100dvh;overflow:hidden;overscroll-behavior:none}
  body.splash-open .topbar {display:none}
  .splash {inset:0;height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;place-items:center;overflow:hidden}
  .splash-card {width:100%;max-width:440px;max-height:100%;margin:0;display:flex;flex-direction:column;gap:8px}
  .splash .eyebrow {font-size:7px;line-height:10px;letter-spacing:3px}
  .splash-logo {width:82%;height:clamp(85px,17dvh,140px);object-fit:contain;flex:none;margin:0 auto}
  .splash h1 {font-size:18px;line-height:1.15;margin:0;letter-spacing:-.5px}
  .splash-sub {font-size:11px;line-height:14px;margin:0}
  .feature-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .feature-cards article {min-height:0;padding:9px 10px 11px;text-align:center;border-width:2px}
  .feature-cards img {position:static;display:block;margin:0 auto 4px;width:57px;height:57px;filter:drop-shadow(0 2px 3px #0004)}
  .feature-cards article>span {display:block;font-size:7px;line-height:10px;letter-spacing:.5px}
  .feature-cards h2 {font-size:15px;line-height:18px;margin:4px 0 5px}
  .feature-cards p {font-size:11px;line-height:1.4}
  .feature-cards article:last-child {grid-column:1/-1;position:relative;padding:11px 12px 12px 80px;text-align:left}
  .feature-cards article:last-child img {position:absolute;left:9px;top:50%;transform:translateY(-50%);width:64px;height:70px;margin:0}
  .splash-extra {font-size:9px;line-height:1.4;letter-spacing:0;margin:0}
  .splash-bottom {display:grid;grid-template-columns:1fr 1fr;gap:9px 8px;flex:none}
  .splash-bottom .pink-button {grid-column:1/-1;order:0;width:100%;min-height:48px;padding:12px 18px;font-size:12px;letter-spacing:1px}
  .sound-option {grid-column:1;grid-row:2;justify-content:center;gap:5px;font-size:10px;white-space:nowrap;min-height:22px}
  .sound-option input {width:16px;height:16px;margin:0}
  .sound-option>span {display:none}
  .splash-note {grid-column:2;grid-row:2;align-self:center;font-size:9px}
  .loading-track {flex:none;margin:0 auto;height:2px;width:120px}
}
@media (max-width:600px) and (orientation:portrait) and (max-height:700px) {
  .splash {padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .splash-card {gap:6px}
  .splash-logo {height:clamp(70px,14dvh,96px)}
  .splash h1 {font-size:17px}
  .splash-sub {display:none}
  .feature-cards img {width:43px;height:43px}
  .feature-cards article {padding:7px 8px 9px}
  .feature-cards h2 {font-size:14px;margin:3px 0}
  .feature-cards p {font-size:10.5px;line-height:1.35}
  .feature-cards article:last-child {padding:9px 10px 10px 73px}
  .feature-cards article:last-child img {width:58px;height:62px;left:8px}
  .splash-bottom {gap:7px}
}
@media (max-width:600px) and (orientation:portrait) and (max-height:560px) {
  .splash .eyebrow,.splash h1,.splash-extra,.loading-track {display:none}
  .splash-logo {height:66px}
  .splash-card {gap:5px}
}
@media (max-height:500px) and (orientation:landscape) {
  body.splash-open {height:100dvh;overflow:hidden;overscroll-behavior:none}
  body.splash-open .topbar {display:none}
  .splash {inset:0;height:100dvh;overflow:hidden;padding:8px max(14px,env(safe-area-inset-left))}
  .splash-card {max-width:940px;display:flex;flex-direction:column;gap:6px}
  .splash .eyebrow,.splash h1,.splash-sub,.loading-track {display:none}
  .splash-logo {width:230px;height:62px;object-fit:contain;margin:0 auto}
  .feature-cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .feature-cards article {min-height:0;padding:48px 10px 10px;border-width:2px}
  .feature-cards img {width:43px;height:43px;top:3px;left:calc(50% - 21px)}
  .feature-cards article>span {font-size:7px}
  .feature-cards h2 {font-size:14px;line-height:16px;margin:4px 0}
  .feature-cards p {font-size:10.5px;line-height:1.35}
  .splash-extra {font-size:9px;line-height:12px;margin:0}
  .splash-bottom {gap:18px}
  .splash-bottom .pink-button {padding:11px 25px;min-height:44px}
  .sound-option,.splash-note {font-size:9px}
}
/* Keep both feature actions on the visible parchment on small phones. */
@media(max-width:600px) and (orientation:portrait){
 dialog.bonus-menu .panel-heading{padding-inline:24px;min-height:28px;margin-bottom:2px;padding-bottom:5px}
 dialog.bonus-menu .panel-heading h2{font-size:clamp(21px,6vw,25px)}
 dialog.bonus-menu #panel-body{margin-bottom:16px;display:flex;flex-direction:column;overflow-y:auto}
 .bonus-menu .buy-stake{margin:4px 0 7px;gap:10px;flex:none}
 .bonus-menu .buy-options{margin:3px 0 0;gap:7px;flex:1;min-height:0}
 .bonus-menu .buy-card{padding:7px 5px;display:flex;flex-direction:column;align-items:center}
 .bonus-menu .buy-card img{width:clamp(38px,8dvh,60px);height:clamp(38px,8dvh,60px)}
 .bonus-menu .buy-card h3{font-size:clamp(17px,4.8vw,21px);margin:3px 0 5px;min-height:2.1em}
 .bonus-menu .buy-card p{min-height:0;font-size:10px;line-height:1.35;margin:3px 0 6px;flex:1}
 .bonus-menu .buy-card .price{font-size:20px;margin:3px 0 2px}
 .bonus-menu .buy-card .price small{font-size:7px;letter-spacing:.2px;margin-top:2px}
 .bonus-menu .buy-card .pink-button{flex:none;min-height:34px;font-size:9px;line-height:1.1;margin-top:6px;padding:7px 2px}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:620px){
 dialog.bonus-menu{--panel-height:96dvh;padding-top:calc(var(--panel-height)*.175);padding-bottom:calc(var(--panel-height)*.18)}
 dialog.bonus-menu .panel-heading h2{font-size:19px}
 dialog.bonus-menu .panel-heading{padding-inline:17px}
 .bonus-menu .buy-card img{width:30px;height:30px}
 .bonus-menu .buy-card h3{font-size:17px;margin-bottom:2px}
 .bonus-menu .buy-card p{font-size:9px;line-height:1.2}
 .bonus-menu .buy-card .price{font-size:18px}
 .bonus-menu .buy-stake .asset-stepper{height:30px;width:30px}
}
@media(max-width:600px) and (orientation:portrait){
 dialog.bonus-confirm .panel-heading{min-height:28px;padding-bottom:5px;margin-bottom:2px}
 dialog.bonus-confirm .panel-heading h2{font-size:24px}
 dialog.bonus-confirm #panel-body{margin-bottom:16px}
 .bonus-confirm .buy-confirm img{width:52px;height:52px}
 .bonus-confirm .buy-confirm h3{font-size:25px;line-height:1.05;margin:5px 0 9px}
 .bonus-confirm .buy-receipt{padding:9px 0;margin:9px 0}
 .bonus-confirm .buy-receipt p{font-size:11px;line-height:1.3;margin:10px 0}
 .bonus-confirm .buy-receipt p.total{font-size:15px}
 .bonus-confirm .buy-confirm>.small{font-size:9px;line-height:1.3;margin:8px 0 10px}
 .bonus-confirm .confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
 .bonus-confirm .confirm-actions button{min-height:38px;padding:9px 3px;font-size:10px;letter-spacing:.2px;line-height:1.15}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:620px){
 dialog.bonus-confirm{--panel-height:96dvh;padding-top:calc(var(--panel-height)*.175);padding-bottom:calc(var(--panel-height)*.18)}
 dialog.bonus-confirm .panel-heading h2{font-size:21px}
 .bonus-confirm .buy-confirm img{width:38px;height:38px}
 .bonus-confirm .buy-confirm h3{font-size:21px;margin:3px 0 6px}
 .bonus-confirm .buy-receipt{padding:5px 0;margin:6px 0}
 .bonus-confirm .buy-receipt p{font-size:10px;margin:8px 0}
 .bonus-confirm .buy-receipt p.total{font-size:13px}
 .bonus-confirm .confirm-actions button{min-height:35px;font-size:9px}
}