html.mobile-play, .mobile-play body { width:100%;height:100%;margin:0;overflow:hidden;background:#09121a;overscroll-behavior:none; }
#unity-container:fullscreen, #unity-container:-webkit-full-screen { position:fixed;inset:0;width:100vw;height:100dvh;transform:none;margin:0;border-radius:0; }
#unity-container:fullscreen #unity-canvas, #unity-container:-webkit-full-screen #unity-canvas { width:100%!important;height:100%!important;border-radius:0; }
#unity-container:fullscreen #unity-footer, #unity-container:-webkit-full-screen #unity-footer { display:none!important; }
.mobile-play #unity-container.unity-mobile { position:fixed;left:0;top:var(--game-top,0);width:var(--game-width,100vw);height:var(--game-height,100dvh);transform:none;box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.mobile-play.keyboard-open #unity-container.unity-mobile { top:0!important;width:var(--game-width)!important;height:var(--game-height)!important; }
.mobile-play #unity-canvas { width:100%!important;height:100%!important;border-radius:0;box-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; }
.mobile-play #unity-footer { display:none!important; }
#mobile-toggle { background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600; }
#mobile-toggle:disabled { opacity:.45;cursor:wait; }
#mobile-orientation { display:none; }
#mobile-play-fullscreen { display:none; }
#mobile-play-fullscreen[hidden] { display:none!important; }
#welcome-screen { position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;background:#060d17ed;color:white;font:16px system-ui,sans-serif; }
#welcome-screen section { max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:stretch;border:1px solid #b99a62;border-radius:14px;overflow:hidden;background:#102332; }
.welcome-art { overflow:auto;max-height:var(--welcome-image-height,calc(100dvh - 100px));touch-action:pan-x pan-y; }
.welcome-art img { display:block;max-height:var(--welcome-image-height,calc(100dvh - 100px));max-width:var(--welcome-image-width,94vw);width:auto;height:auto;object-fit:contain; }
.welcome-art.enlarged img { max-height:none;width:min(1100px,var(--welcome-image-width,94vw));max-width:none; }
.welcome-actions { display:flex;gap:12px;padding:8px 12px;flex-shrink:0; }
.welcome-actions button { flex:1;min-width:120px;min-height:46px;border:1px solid #b99a62;border-radius:8px;background:#243b4a;color:#f5e6c9;font:18px system-ui,sans-serif;touch-action:manipulation; }
#welcome-close { background:#9c7128;color:white; }
.welcome-status:empty { display:none; }
.welcome-status { padding:8px;text-align:center; }
#party-native-input { position:fixed;left:0;right:0;z-index:170;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;background:#050d16dc;color:#edf2f7;font:18px/1.5 system-ui,sans-serif; }
#party-native-input form { width:min(560px,100%);max-height:100%;overflow:auto;border:1px solid #b99a62;border-radius:14px;padding:18px;box-sizing:border-box;background:#102332; }
#party-native-input label { display:block;font-size:22px;color:#f0d497;margin-bottom:12px; }
#party-native-input input { width:100%;height:50px;box-sizing:border-box;padding:10px;border:1px solid #718595;border-radius:8px;background:#182c39;color:#fff;font:20px system-ui,sans-serif; }
#party-native-input p { font-size:15px;margin:10px 0; }
#party-native-input form>div { display:flex;gap:12px; }
#party-native-input button { flex:1;min-height:48px;border:1px solid #b99a62;border-radius:8px;background:#243b4a;color:#f5e6c9;font:18px system-ui,sans-serif;touch-action:manipulation; }
.mobile-play #mobile-play-fullscreen { display:block;position:fixed;z-index:80;right:calc(env(safe-area-inset-right) + 84px);top:calc(env(safe-area-inset-top) + 9px);min-width:84px;height:40px;border:1px solid #b99a62;border-radius:10px;background:#0c1927e8;color:#f0d497;font:15px system-ui,sans-serif;touch-action:manipulation; }
#mobile-fullscreen-help { position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:18px;background:#050d16db;color:#edf2f7;font:18px/1.65 system-ui,sans-serif; }
#mobile-fullscreen-help section { max-width:590px;max-height:85vh;overflow:auto;border:1px solid #b99a62;border-radius:16px;padding:20px 26px;background:#102332; }
#mobile-fullscreen-help h2 { margin:0 0 12px;font-size:24px;color:#f0d497; }
#mobile-fullscreen-help p { margin:10px 0; }
#mobile-fullscreen-help button { min-height:48px;width:100%;border:1px solid #b99a62;border-radius:9px;background:#284252;color:#fff0cf;font:18px system-ui,sans-serif; }
#mobile-chat { position:fixed;z-index:120;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;gap:6px;max-width:760px;margin:0 auto;padding:6px;box-sizing:border-box;border:2px ridge #cbd2df;border-radius:2px;background:#24272d;box-shadow:0 4px 20px #0008; }
#mobile-chat input { min-width:0;flex:1;height:44px;box-sizing:border-box;border:1px solid #929aab;border-radius:2px;background:#111319;color:#fff;font:18px system-ui,sans-serif;padding:8px 10px; }
#mobile-chat button { min-width:54px;border:2px outset #d5dbea;border-radius:2px;background:linear-gradient(#eef1f7,#bbc8e0);color:#263347;font:17px system-ui,sans-serif;touch-action:manipulation; }
.mobile-play #unity-loading-bar { padding:24px;border:1px solid #b99a62;border-radius:16px;background:#0c1927ef;color:#ead6ab; }
.mobile-play #unity-loading-bar::after { content:'168RO · กำลังเตรียมเกม';display:block;margin-top:14px;text-align:center;white-space:nowrap;font:15px system-ui,sans-serif; }
@media(orientation:portrait) {
 .mobile-play #mobile-orientation { position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0b1621f5;color:#f4e9d3;text-align:center;font:18px/1.7 system-ui,sans-serif;padding:24px; }
 #mobile-orientation strong { font-size:28px;color:#e8c98b; }
 #mobile-fullscreen { border:1px solid #c4a266;border-radius:12px;padding:14px 24px;color:#fff0d4;background:#21384a;font:inherit; }
}
#itemcode-window { position:fixed;inset:0;z-index:175;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;background:#050d16dc;color:#edf2f7;font:18px/1.5 system-ui,sans-serif; }
#itemcode-window form { width:min(520px,100%);max-height:100%;overflow:auto;border:1px solid #b99a62;border-radius:16px;padding:20px;box-sizing:border-box;background:#102332; }
#itemcode-window h2 { margin:0 0 8px;font-size:23px;color:#f0d497; }
#itemcode-window p { margin:8px 0;white-space:pre-line; }
#itemcode-window label { display:block;margin-top:14px; }
#itemcode-input { display:block;width:100%;height:50px;box-sizing:border-box;padding:10px;border:1px solid #718595;border-radius:8px;background:#182c39;color:#fff;font:21px system-ui; }
#itemcode-window small { display:block;margin-top:6px;font-size:13px;color:#adc2d0; }
#itemcode-window form>div { display:flex;gap:12px;margin-top:15px; }
#itemcode-window button { flex:1;min-height:46px;border:1px solid #b99a62;border-radius:8px;background:#243b4a;color:#fff0d4;font:18px system-ui;touch-action:manipulation; }
#itemcode-window button:disabled { opacity:.55; }
#itemcode-status { color:#ffd196;font-size:16px; }
#itemcode-status.success { color:#a4edc4; }

/* Minimal mobile HUD: native Unity controls carry the same translucent theme. */
.mobile-play #mobile-play-fullscreen { right:calc(env(safe-area-inset-right) + 14px);top:calc(env(safe-area-inset-top) + 76px);min-width:56px;height:28px;border:1px solid #ffffff40;border-radius:5px;background:#11192324;color:#f3f7fb;font:11px system-ui,sans-serif; }
.mobile-play #mobile-chat { border:1px solid #ffffff50;border-radius:7px;background:#111923b8;box-shadow:none;padding:5px; }
.mobile-play #mobile-chat input { border:0;border-radius:4px;background:#00000035;font:16px system-ui,sans-serif; }
.mobile-play #mobile-chat button { border:1px solid #ffffff35;border-radius:4px;background:#ffffff14;color:#f3f7fb;font:14px system-ui,sans-serif; }

.mobile-play #desktop-mode-recovery { top:114px!important;bottom:auto;right:12px!important;padding:4px 8px!important;border:1px solid #ffffff40!important;border-radius:5px!important;background:#11192340!important;color:#f3f7fb!important;font:11px system-ui,sans-serif!important; }

/* Glass drawers are scoped to mobile mode; desktop dialogs keep their skin. */
.mobile-play :is(#social-window,#itemcode-window,#party-native-input,#bank-layer,#mobile-fullscreen-help,#gacha-layer,#vip-window){
 background:transparent;align-items:center;justify-content:flex-end;place-items:center end;
 padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));
 color:#f0f7fc;
}
.mobile-play :is(#social-window .social-panel,#itemcode-window form,#party-native-input form,#bank-layer section,#mobile-fullscreen-help section,#gacha-layer section,#vip-window section){
 width:min(54vw,560px);max-width:calc(100vw - 24px);max-height:calc(var(--visible-height,100dvh) - 24px);
 box-sizing:border-box;overflow:auto;background:rgba(7,15,21,.42);border:1px solid #ffffff40;
 border-radius:10px;box-shadow:none;color:#f0f7fc;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.mobile-play :is(#social-window,#itemcode-window,#party-native-input,#bank-layer,#mobile-fullscreen-help,#gacha-layer,#vip-window) :is(h2,h3,label,dt,dd,small,p){color:inherit}
.mobile-play :is(#social-window,#bank-layer,#gacha-layer,#vip-window) header{background:transparent;border-bottom:1px solid #ffffff26;color:#f0f7fc;padding:12px 16px}
.mobile-play :is(#social-window,#bank-layer,#gacha-layer,#vip-window) main{background:transparent;padding:14px 16px;min-height:0}
.mobile-play :is(#social-window,#itemcode-window,#party-native-input,#bank-layer,#mobile-fullscreen-help,#gacha-layer,#vip-window) button{
 border:1px solid #ffffff3b;background:#ffffff0c;border-radius:5px;color:#f0f7fc;min-height:40px;
 box-shadow:none;touch-action:manipulation;
}
.mobile-play :is(#social-window,#itemcode-window,#party-native-input,#bank-layer,#gacha-layer,#vip-window) :is(input,select){
 border:1px solid #ffffff45;background:#00000024;color:#f0f7fc;border-radius:5px;font-size:16px;
}
.mobile-play :is(#social-window,#itemcode-window,#party-native-input,#bank-layer,#gacha-layer,#vip-window) :is(input,select):focus-visible{
 outline:2px solid #ffffffa6;outline-offset:2px;
}
.mobile-play #social-window :is(nav,.card,.history){background:#ffffff08}
.mobile-play #social-window nav{padding:7px 12px;flex-wrap:wrap}
.mobile-play #social-window nav button{flex:1;padding:7px 10px;white-space:nowrap}
.mobile-play #social-window :is(button.active,.primary){background:#ffffff21;border-color:#ffffffb3;color:#fff}
.mobile-play #social-window :is(.card,.row,footer){border-color:#ffffff26}
.mobile-play #social-window .cols{grid-template-columns:1fr;gap:10px}
.mobile-play #social-window .card{padding:12px;border-radius:6px}
.mobile-play #social-window :is(.money,.room-title,.history strong,footer){color:#eff7ff}
.mobile-play #social-window :is(.muted,.empty,.item-detail){color:#c8d8e4}
.mobile-play #bank-layer dl div{border-color:#ffffff26}
.mobile-play #bank-layer dd{color:#fff}
.mobile-play #bank-layer input{background:#00000024;color:white}
.mobile-play #bank-layer :is(h2,p,small){color:#f0f7fc}
.mobile-play :is(#itemcode-window form,#party-native-input form){padding:18px}
.mobile-play #itemcode-window h2{font-size:21px;margin-bottom:14px}
.mobile-play #itemcode-window p{font-size:15px}
.mobile-play #itemcode-window form>div{gap:8px}
.mobile-play #itemcode-status.success{color:#a4edc4}
@media(max-height:520px){
 .mobile-play :is(#social-window,#itemcode-window,#party-native-input,#bank-layer,#gacha-layer,#vip-window){padding-top:8px;padding-bottom:8px}
 .mobile-play :is(#social-window .social-panel,#itemcode-window form,#party-native-input form,#bank-layer section){max-height:calc(var(--visible-height,100dvh) - 16px)}
 .mobile-play :is(#social-window,#bank-layer,#gacha-layer,#vip-window) header{padding:8px 12px}
 .mobile-play :is(#social-window,#bank-layer,#gacha-layer,#vip-window) main{padding:10px 12px}
 .mobile-play :is(#itemcode-window form,#party-native-input form){padding:12px}
}
@media(orientation:portrait){
 .mobile-play :is(#social-window .social-panel,#itemcode-window form,#party-native-input form,#bank-layer section,#mobile-fullscreen-help section,#gacha-layer section,#vip-window section){width:calc(100vw - 24px)}
}


.mobile-play :is(#gacha-layer,#vip-window) :is(.intro,.vip-time,.vip-detail,.vip-note,h3){color:#d2e0e9}
.mobile-play #vip-window :is(.vip-bonus,.vip-confirm){background:#ffffff0c;border-color:#ffffff40;color:white}
.mobile-play #vip-window :is(.vip-bonus strong,.vip-confirm strong){color:white}

.mobile-play.mobile-dialog :is(#mobile-play-fullscreen,#desktop-mode-recovery){display:none!important}