/* Mobile browser layout. Desktop artwork coordinates remain untouched. */
@media(max-width:900px){
 dialog{overscroll-behavior:contain;scrollbar-gutter:stable}
 #profile-dialog,#help-dialog,#paytable-dialog,#shop-dialog,#legal-gate{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));scroll-padding:16px}
 #profile-close,#close-help,#close-paytable,#close-shop{min-width:44px;min-height:44px}
 .room-bar{flex-wrap:wrap;gap:8px}.room-bar #room-name{min-width:0;overflow-wrap:anywhere}
 .room-bar #invite{min-height:44px;padding:8px 10px;font-size:10px}
 #profile-name,#profile-email{font-size:16px}
}
@media(max-width:600px) and (orientation:portrait){
 body{overflow-x:clip}main{padding:12px max(8px,env(safe-area-inset-left)) 16px}
 html:has(body.fullscreen-active){overflow:auto}
 body.fullscreen-active{overflow:auto;height:auto;min-height:100dvh}
 body.fullscreen-active #game-content{position:relative;left:auto;top:auto;width:100%;max-width:none;transform:none;min-height:100dvh;padding:8px max(8px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom))}
 body.fullscreen-active.app-fullscreen{height:100dvh;overflow:auto}
 header .login{font-size:9px;padding:4px;min-width:0;overflow-wrap:anywhere}
 #lobby{padding:18px 0}#lobby .arena-cards{margin:16px auto;gap:12px}
 #lobby .arena-card{min-height:180px}#lobby h1{margin:8px 0}
 #battle-stage{aspect-ratio:4/5;overflow:visible;border-radius:12px;background-size:cover}
 #battle-stage .stage-logo{left:34%;top:3%;width:32%;height:14%}
 #battle-stage .stage-panel{top:0;width:32%;height:22%}
 #battle-stage .panel-you{left:0}#battle-stage .panel-rival{right:0}
 #battle-stage .panel-data{font-size:2.7cqw;gap:.6cqw}
 #battle-stage .panel-data strong{font-size:5cqw}
 #battle-stage .panel-data small{font-size:3cqw;margin-top:1.5cqw}
 #battle-stage .panel-data>span:last-child{font-size:2.1cqw}
 #battle-stage .fighter-you{left:3%;top:calc(22.5% - 5px);width:29%;height:22%}
 #battle-stage .fighter-rival{left:68%;top:calc(22.5% - 5px);width:29%;height:22%}
 #battle-stage .platform-you{left:0;top:calc(40.5% - 2px);width:35%;height:7.5%}
 #battle-stage .platform-rival{left:65%;top:calc(40.5% - 2px);width:35%;height:7.5%}
 #battle-stage .player-panel-win-fx{top:0;width:32%;height:22%}
 #battle-stage .panel-fx-you{left:0}#battle-stage .panel-fx-rival{left:68%;right:auto}
 #battle-stage .podium-win-fx{top:calc(38.5% - 2px);width:38%;height:12%}
 #battle-stage .podium-you{left:-1%}#battle-stage .podium-rival{left:63%}
 #battle-stage #player-beam{left:1%;top:calc(20.5% - 5px);width:32%;height:26%}
 #battle-stage #rival-beam{left:67%;top:calc(20.5% - 5px);width:32%;height:26%}
 #battle-stage .machine-art{left:-4%;top:36%;width:108%;height:59%}
 #game-content #battle-stage #arena{left:3.6%;top:48.2%;width:93.4%!important;height:40.4%!important}
 #battle-stage .stage-pot{left:27%;top:37.8%;width:46%;height:6.4%}
 #battle-stage .stage-pot>span{font-size:2.8cqw}
 #battle-stage .stage-pot strong{font-size:5cqw}#battle-stage .stage-pot small{font-size:2.4cqw}
 #battle-stage .battle-status{left:17%;top:90%;width:66%;height:3.4%;font-size:2.1cqw}
 #battle-stage #opponent-choice{left:17%;top:51%;width:66%;padding:10px;gap:8px}
 #battle-stage #opponent-choice button{min-height:44px;font-size:11px}
 #battle-stage #opponent-choice small{font-size:11px}
 .portrait-controls{position:relative;min-height:48px;gap:6px}
 .portrait-controls button{min-width:0;min-height:48px;font-size:10px}
 body.lines-selecting .portrait-controls{visibility:hidden;min-height:130px}
 #battle-stage dialog#lines-dialog{inset:calc(100% + 10px) auto auto 0;width:100%;height:126px;padding:4px 5px;border-radius:10px}
 #battle-stage dialog#lines-dialog .line-header{height:40px;margin:0 94px 3px 0}
 #battle-stage dialog#lines-dialog .line-header h2{font-size:10px}
 #battle-stage dialog#lines-dialog .actions{top:4px;right:48px}
 #battle-stage dialog#lines-dialog #auto-pick{min-height:36px;font-size:9px;padding:4px 6px}
 #battle-stage dialog#lines-dialog #close-lines{min-height:36px;min-width:36px;font-size:15px;top:4px;right:5px}
 #battle-stage dialog#lines-dialog .lines{height:74px;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,36px);gap:2px}
 #battle-stage dialog#lines-dialog .line{display:flex;flex-direction:column;justify-content:center;min-height:36px;padding:2px 0}
 #battle-stage dialog#lines-dialog .line svg{height:17px;width:100%}
 #battle-stage dialog#lines-dialog .line span{font-size:10px;line-height:12px}
 #battle-stage .win-popup{left:7%!important;top:46%;width:86%!important;height:43%;padding:7cqw 6cqw}
 #battle-stage .win-title{font-size:3cqw}#battle-stage .win-popup strong{font-size:8cqw}#battle-stage .win-unit{font-size:2.5cqw}
 #battle-stage .win-popup:has(~.win-popup){left:15%!important;top:44%;width:70%!important;height:25%;padding:4cqw}
 #battle-stage .win-popup~.win-popup{left:15%!important;top:69%;width:70%!important;height:25%;padding:4cqw}
 #battle-stage .win-popup .win-detail{max-height:12cqw}
 #battle-stage .win-popup .win-mini-record{font-size:2cqw;padding:1cqw}
 #battle-stage .win-mini-record img{width:5cqw;height:5cqw}
 #battle-stage .win-mini-record b{font-size:2.2cqw}
}

/* Flow-based portrait gifts: no fixed wheel/result/button overlaps. */
@media(max-width:600px){
 #daily-dialog,#bonus-dialog{width:min(96vw,440px);max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;scroll-padding:12px;border-radius:18px}
 .wheel-stage,.bonus-stage{min-height:0;aspect-ratio:auto;border-radius:18px;clip-path:none;padding:14px 12px 16px;background-color:#07182df5}
 .wheel-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
 .wheel-stage::before{background:url('/assets/casino/fighter-blue.png') 12px 52px/58px auto no-repeat;mask-image:linear-gradient(#000 80%,transparent);height:150px}
 #daily-dialog .wheel-stage h2{position:relative;inset:auto;width:auto;max-width:calc(100% - 84px);margin:0;font-size:20px;min-height:30px}
 #daily-dialog .daily-close,.bonus-stage>.daily-close{top:8px;right:8px;min-width:44px;min-height:44px;padding:8px}
 #daily-dialog .daily-wallet{position:relative;inset:auto;align-self:flex-start;font-size:13px;min-height:32px}
 #daily-dialog .daily-art{position:relative;inset:auto;width:min(100%,calc(100dvh - 270px));min-width:190px;flex-shrink:0;margin:0 auto}
 #daily-dialog .daily-result{position:relative;inset:auto;width:100%;font-size:16px;line-height:1.3;white-space:normal;margin:0}
 #daily-dialog .daily-spin,.wheel-login{position:relative;inset:auto;width:90%;min-height:46px;height:auto;padding:10px;font-size:15px;flex-shrink:0}
 .wheel-fineprint{margin:8px 0 0;flex-wrap:wrap;gap:8px}
 .wheel-fineprint>small{font-size:11px;text-align:left}
 #daily-dialog .wheel-fineprint details[open]{position:static;width:100%;padding:8px;max-width:100%}
 .bonus-stage{padding-top:150px;display:flex;flex-direction:column;gap:14px;align-items:center}
 .bonus-stage::before{height:155px;pointer-events:none}
 .bonus-stage h2{top:12px;left:15%;width:70%;font-size:20px}
 .bonus-content{position:relative;inset:auto;width:100%;padding:0 8px}
 .bonus-content>p:first-child{font-size:21px;font-weight:800;margin:0}
 .bonus-amount{font-size:60px;line-height:1.15;margin:6px 0}
 .bonus-content .bonus-message{font-size:16px;line-height:1.3;margin-top:8px}
 .bonus-days{position:relative;inset:auto;width:100%;height:90px;gap:0;flex-shrink:0;isolation:isolate}
 .bonus-days::before{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/daily/bonus-popup.webp') 74.25% 85.88%/150.15% 666.67% no-repeat}
 .bonus-days .daily-day{padding:2px 0}
 .bonus-days .daily-day b{font-size:clamp(16px,4.6vw,21px);margin:5px 0}
 .bonus-days .daily-day small,.bonus-days .daily-day span{font-size:9px}
 .bonus-collect{position:relative;inset:auto;width:90%;min-height:46px;padding:10px;font-size:15px;height:auto}
 #profile-dialog{padding:16px}.profile-summary{gap:12px}.profile-summary img{width:80px;height:80px}.profile-summary strong{font-size:26px}
 #profile-title{font-size:27px}.profile-help{overflow-wrap:anywhere}
 #shop-dialog #close-shop{min-width:44px;min-height:44px}
}
@media(max-width:360px) and (orientation:portrait){header #open-help,header #sound,header #fullscreen,header #rotate-screen,header #open-shop{width:34px!important;min-width:34px!important;flex-basis:34px!important}}
@media(orientation:landscape) and (max-height:500px){
 #lobby{padding:8px 0}#lobby h1{font-size:22px;margin:2px 0}#lobby .lobby-heading{gap:4px}
 #lobby .star-progress{padding:6px 12px;margin:6px auto}#lobby .arena-cards{margin:8px auto;gap:10px}
 #lobby .arena-card{min-height:175px;padding:12px 8px;gap:6px}#lobby .arena-card span{font-size:13px}#lobby .arena-card strong{font-size:22px}#lobby .arena-card b{padding:8px 22px}
 #daily-dialog{width:min(92vw,calc((100dvh - 66px)*1.5096));min-height:0;max-height:calc(100dvh - 12px);overflow:visible}
 #bonus-dialog{width:min(92vw,calc((100dvh - 20px)*1.5096));min-height:0;max-height:calc(100dvh - 12px);overflow:visible}
 .wheel-fineprint{margin-top:6px;padding:4px 8px;gap:8px}
 #daily-dialog .wheel-fineprint details,.wheel-fineprint>small{font-size:10px}
 .bonus-content>p:first-child{font-size:clamp(14px,4.5dvh,20px)}
 .bonus-content .bonus-message{font-size:clamp(11px,3.2dvh,15px);margin-top:6px}
 .bonus-amount{font-size:12dvh}
 #daily-dialog .daily-close,.bonus-stage>.daily-close{top:17%;right:5%;min-width:40px;min-height:40px;padding:4px}
 #battle-stage dialog#lines-dialog{top:76%;height:24%}
 #battle-stage dialog#lines-dialog .lines{grid-template-columns:repeat(20,minmax(0,1fr));grid-template-rows:1fr;gap:2px}
 #battle-stage dialog#lines-dialog .line{min-height:30px}
 #battle-stage dialog#lines-dialog .line svg{height:16px}
 #battle-stage dialog#lines-dialog .line span{font-size:10px}
 .room-bar .lobby-return{min-height:40px;padding:6px 12px}
}
/* Balance stays in the single toolbar row; its unit is never ambiguous. */
@media(max-width:900px) and (orientation:portrait){
 header .profile-chip #account{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.05}
 header .profile-chip .account-coins{font-size:clamp(15px,4.2vw,19px);font-weight:800}
 header .profile-chip .account-unit{display:block;font-size:8px;letter-spacing:.7px;text-transform:uppercase;color:#b8d7ed}
}
/* Keep portrait bonus text on the original artwork, with no duplicate cards. */
@media(max-width:600px) and (orientation:portrait){
 header .brand{grid-column:1/4;grid-row:1;min-width:0}
 header .header-logo{width:100%;max-width:200px}
 header .room-bar{display:none;grid-column:4/-1;grid-row:1;justify-self:end;margin:0;gap:5px;flex-wrap:nowrap}
 body:has(#duel:not([hidden])) header .room-bar{display:flex}
 header .room-bar #room-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 header .room-bar #invite,header .room-bar .lobby-return{width:40px;min-width:40px;min-height:40px;padding:4px;font-size:0;display:grid;place-items:center;border-radius:10px}
 header .room-bar #invite::before,header .room-bar .lobby-return::before{content:'';display:block;width:26px;height:26px;margin:0;background:currentColor;mask:center/contain no-repeat var(--room-icon)}
 header .room-bar #invite{--room-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4M8.6 13.5l6.8 4'/%3E%3C/svg%3E")}
 header .room-bar .lobby-return{--room-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-8H9v8H4a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E")}
 #bonus-dialog{overflow:visible;border:0;background:transparent;box-shadow:none}
 #bonus-dialog .bonus-stage{display:block;container-type:inline-size;aspect-ratio:2512/1664;min-height:0;padding:0;background:url('/assets/daily/bonus-popup.webp') center/100% 100% no-repeat;border:0;border-radius:0;clip-path:polygon(0 15%,20% 10%,34% 0,65% 0,80% 10%,100% 15%,100% 94%,96% 98%,75% 98%,72% 100%,26% 100%,22% 98%,4% 98%,0 94%)}
 #bonus-dialog .bonus-stage::before,#bonus-dialog .bonus-days::before{content:none}
 #bonus-dialog .bonus-stage h2{top:4%;left:32%;width:36%;font-size:4cqw;line-height:1.2;margin:0}
 #bonus-dialog .bonus-content{position:absolute;left:45%;top:25%;width:45%;padding:0}
 #bonus-dialog .bonus-content>p:first-child{font-size:3.3cqw;line-height:1.15;margin:0}
 #bonus-dialog .bonus-amount{display:block;font-size:11cqw;line-height:1.1;margin:1cqw 0}
 #bonus-dialog .bonus-content>span{font-size:3cqw}
 #bonus-dialog .bonus-content .bonus-message{font-size:2.4cqw;line-height:1.2;margin:2cqw 0 0}
 #bonus-dialog .bonus-days{position:absolute;left:24.8%;top:73%;width:66.6%;height:15%;gap:0}
 #bonus-dialog .bonus-days .daily-day{background:none;border:0;box-shadow:none;border-radius:0;padding:0;min-width:0}
 #bonus-dialog .bonus-days .daily-day b{font-size:3.6cqw;line-height:1.1;margin:1px 0}
 #bonus-dialog .bonus-days .daily-day small,#bonus-dialog .bonus-days .daily-day span{font-size:1.9cqw;line-height:1.1}
 #bonus-dialog .bonus-collect{position:absolute;left:29.3%;top:91.6%;width:41.4%;height:5.2%;min-height:0;padding:0;font-size:2.5cqw;line-height:1}
 #bonus-dialog .bonus-stage>.daily-close{top:15%;right:3%;min-width:32px;min-height:32px;width:32px;height:32px;font-size:18px;padding:3px}
}