/* MEDIA.CSS */

/* PORTRAIT MICRO */
@media (orientation: portrait) and (max-width:376px) {
:root
{
--scene-top:var(--scene-top-portrait-micro);
--scene-width:var(--scene-width-portrait-micro);
--scene-height:var(--scene-height-portrait-micro);
--scene-scale:var(--scene-scale-portrait-micro);
--var-card-width: var(--var-card-width-portrait-micro); 
--var-gameboy-width: var(--var-gameboy-width-portrait-micro); 
--var-gameboy-top: var(--var-gameboy-top-portrait-micro); 
--var-controls-top: var(--var-controls-top-portrait-micro); 
--var-progress-width: var(--var-progress-width-portrait-micro);
--var-wrapper-top: var(--var-wrapper-top-portrait-micro); 
}
/* DIALOGS */
#external-db-list .external-player{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:7px}
#external-db-list .external-player-photo{width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px}
.external-storage-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
/* LOGOTIPOS */
.logo-retro{width: 330px; height: 100px;margin-bottom: 20px;}
.logo-board{width:250px;height:100px;padding-top:10px;}
/* NES */
.nes-layout{width: 100%;padding:0px;margin: 0px;}
.nes-container{margin:10px;margin-bottom:20px;padding:20px;position:relative;border-radius: 10px;border-width:3px;}
.nes-container.with-title>.title{margin:-35px 0 10px;padding:10px;font-size:15px;display:table;background-color:#fff}
.nes-component {font-size:12px;padding-bottom: 20px;}
.nes-input,.nes-textarea {margin:0px}
.nes-btn,.nes-pager .nes-btn{border-width:4px;border-color:#000;border-image-repeat:stretch;border-image-slice:2;border-image-width:2}
.nes-btn{font-size:12px}
.nes-pager{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:30px;margin-top:10px;justify-items:center}
.nes-pager .nes-btn{margin:0;width:90%;box-sizing:border-box;border-style:solid}
/* NES - BOTÕES DE CONCLUSÃO */
.conclusion-actions{flex-direction:column;gap:20px}
.conclusion-actions .nes-btn{width:90%;max-width:300px;flex:0 0 auto}
/* SESSÕES */
.toolbar{grid-template-columns:1fr}
.session-status{justify-self:start}
.sessions-head{flex-direction:column;align-items:flex-start;gap:12px;font-size:12px}
.session-status-filters{display:grid;grid-template-columns:1fr;max-width:100%}
.status-filter{min-height:50px;font-size:10px}
}

/* RESPONSIVIDADE PORTRAIT */
@media (orientation: portrait) and (min-width:377px) and (max-width:665px) {
:root
{
--scene-top:var(--scene-top-portrait);
--scene-width:var(--scene-width-portrait);
--scene-height:var(--scene-height-portrait);
--scene-scale:var(--scene-scale-portrait);
--var-card-width: var(--var-card-width-portrait); 
--var-gameboy-width: var(--var-gameboy-width-portrait); 
--var-gameboy-top: var(--var-gameboy-top-portrait); 
--var-controls-top: var(--var-controls-top-portrait); 
--var-progress-width: var(--var-progress-width-portrait);
--var-map-top: var(--var-map-top-portrait); 
--var-map-width: var(--var-map-width-portrait); 
--var-map-height: var(--var-map-height-portrait);
--var-wrapper-top: var(--var-wrapper-top-portrait); 
--var-button-size: var(--var-button-size-portrait); 
--var-confirm-bottom: var(--var-confirm-bottom-portrait); 
}
/* CARTUCHOS */
#btn-personalizar {bottom: 20px;}
#top-controls {width: 90%}
#cartucho-info {font-size: 12px;}
.cartridge-navbar {padding: 10px;}
.cartridge-navbar .logo-img { width: clamp(72px, 18vw, 110px); max-height: 110px; }
.cartridge-navbar .logo-text-large { font-size: clamp(.30rem, .95vw, .48rem); }
.cartridge-navbar .logo-text-small { font-size: clamp(.23rem, .8vw, .34rem); }
/* LOGOTIPOS */
.logo-retro{width: 350px; height: 100px;}
.logo-board{width:250px;height:100px;padding-top:20px;}
/* DIÁLOGO - CONECTAR BANCO DE DADOS */
#external-db-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;background:#fff;color:#000;border:0;border-radius:0}
#external-db-dialog::backdrop{background:#fff}
#external-db-dialog .external-db-dialog-content{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:10px;box-sizing:border-box;background:#fff;color:#000;overflow-x:hidden;overflow-y:auto;text-align:center}
#external-db-list .external-player{grid-template-columns:48px minmax(0,1fr);width:100%;padding:8px;background:#fff;color:#000;border-color:#000}
#external-db-list .external-player-photo{width:48px;height:48px;border-color:#000;background:#eee}
.external-storage-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.external-storage-item img{border-color:#000}
.external-db-pages strong,.external-storage-item figcaption{color:#000}
.external-storage-filter select{width:100%;background:#fff;color:#000;border-color:#000}
.external-db-pages{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
.external-db-pages .nes-btn{width:100%}
/* NES */
.nes-layout{width: 100%;padding:0px;margin: 0px;}
.nes-container{margin:10px;margin-bottom:20px;padding:12px;position:relative;border-radius: 10px;border-width:3px;}
.nes-container.with-title>.title{margin:-30px 0 10px;padding:10px;font-size:15px;display:table;background-color:#fff}
.nes-component {font-size:12px;padding-bottom: 20px;}
.nes-input,.nes-textarea {margin:0px}
.nes-btn,.nes-pager .nes-btn{border-width:4px;border-color:#000;border-image-repeat:stretch;border-image-slice:2;border-image-width:2}
.nes-btn{font-size:12px}
.nes-pager{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:30px;margin-top:10px;justify-items:center}
.nes-pager .nes-btn{margin:0;width:90%;box-sizing:border-box;border-style:solid}
/* NES - BOTÕES DE CONCLUSÃO */
.conclusion-actions{flex-direction:column;gap:20px}
.conclusion-actions .nes-btn{width:90%;max-width:300px;flex:0 0 auto}
/* DIALOGS */
#external-db-dialog{width:100%;max-height:90vh;}
.external-player{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:8px}
.external-player-photo{width:44px;height:44px;}
.external-player-data strong{font-size:9px}
.external-player-data small{font-size:7px}
/* QRCODE */
.qr-card .qr-shell{min-height:0;width:100%;padding:10px}
/* ENDEREÇO WEB DA SALA */
.room-url-block,.host-network-box{grid-template-columns:1fr;}
.room-url-actions{grid-column:auto}
.room-url-actions button,.host-network-box button{width:100%}
/* SESSÕES */
.toolbar{grid-template-columns:1fr}
.session-status{justify-self:start}
.sessions-head{flex-direction:column;align-items:flex-start;gap:12px;font-size:12px}
.session-status-filters{display:grid;grid-template-columns:1fr;max-width:100%}
.status-filter{min-height:50px;font-size:10px}
.session-item{grid-template-columns:1fr;flex-direction:column;align-items:stretch;gap:14px;padding:12px}
.session-room-title strong{font-size:11px}
.session-room-info small{font-size:8px}
.session-status{width:100%;min-width:0}
/* WAITING */
.waiting-grid{grid-template-columns:1fr; gap:20px;}
.players-card,.qr-card{min-height:auto}
.match-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.match-summary{grid-template-columns:1fr}
.waiting-layout{padding:10px}
.waiting-header{gap:20px}
.waiting-header h1{font-size:12px}
.waiting-grid{gap:1rem}
.waiting-actions{flex-direction:column}
.waiting-actions button{width:100%}
.waiting-player{grid-template-columns:42px minmax(0,1fr) 40px}
.waiting-player img{width:42px;height:42px}
}



/* LANDSCAPE */
@media (orientation: landscape) and (min-width: 661px) and (max-width: 1000px) {
:root 
{
--scene-top:var(--scene-top-landscape);
--scene-width:var(--scene-width-landscape);
--scene-height:var(--scene-height-landscape);
--scene-scale:var(--scene-scale-landscape);
--var-card-width: var(--var-card-width-landscape);  
--var-gameboy-width: var(--var-gameboy-width-landscape); 
--var-gameboy-top: var(--var-gameboy-top-landscape); 
--var-controls-top: var(--var-controls-top-landscape); 
--var-map-top: var(--var-map-top-landscape);
--var-button-size: var(--var-button-size-landscape);
--var-map-height: var(--var-map-height-landscape); 
--var-wrapper-top: var(--var-wrapper-top-landscape); 
}
/* CARTUCHOS */
#top-controls {width: 90%}
#confirm-menu, #success-ui { bottom: var(--var-confirm-bottom);}
.cartridge-navbar {padding: 10px;}
.cartridge-navbar .logo-img {width: clamp(52px, 12vw, 72px); max-height: 72px;}
.cartridge-navbar .logo-text-large {font-size: clamp(.26rem, 1vw, .38rem);}
.cartridge-navbar .logo-text-small {font-size: clamp(.22rem, .85vw, .32rem);}
/* DIALOGS */
.external-player{padding:6px}
#external-db-dialog .qr-resize-content{max-height:94vh}
#external-db-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;background:#000;color:#fff;border:0;border-radius:0}
#external-db-dialog::backdrop{background:#000}
#external-db-dialog .external-db-dialog-content{width:min(900px,94vw);max-width:900px;max-height:94dvh;margin:auto;padding:18px;box-sizing:border-box;background:#000;color:#fff;overflow-x:hidden;overflow-y:auto}
.external-storage-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#external-db-list .external-player{width:100%}
/* SESSÕES */
.session-status-filters{flex-wrap:nowrap}
.status-filter{flex:1;font-size:8px}
.session-item{min-height:65px;padding:10px}
.session-room-title strong{font-size:10px}
.session-status{min-width:115px;font-size:8px}
/* LOGOTIPOS */
.logo-retro{width: 250px; height: 50px;}
.logo-board{width:250px;height:50px;padding-top:10px;}
/* NES */
.nes-layout{width: 100%;padding:0px;margin: 0px;}
.nes-container{margin:10px;margin-bottom:20px;padding:20px;position:relative;border-radius: 10px;border-width:3px;}
.nes-container.with-title>.title{margin:-30px 0 10px;padding:10px;font-size:15px;display:table;background-color:#fff}
.nes-component {font-size:12px;padding-bottom: 20px;}
.nes-btn,.nes-pager .nes-btn{border-width:4px;border-color:#000;border-image-repeat:stretch;border-image-slice:2;border-image-width:2}
.nes-btn{font-size:12px}
.nes-pager{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:30px;margin-top:10px;justify-items:center}
.nes-pager .nes-btn{margin:0;width:95%;box-sizing:border-box;border-style:solid}
}

/* SITE MOBILE - SETTING */
html,body{padding:0!important;width:100%;min-height:100%;background:#fff!important}
body[data-mode="register"],body[data-mode="login"] {background:#fff!important}
.site-shell{width:100%!important;min-height:100dvh;margin:0!important;padding:10px!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}

/* SITE MOBILE - CARTUCHOS */
body:has(#cartridge-scene){background:#000!important}