*{box-sizing:border-box}
:root{
  --bg: var(--bg_page);
  --panel: var(--bg_card);
  --panel2: var(--bg_card_darker);
  --line: var(--border_default);
  --text: var(--text_primary);
  --muted: var(--text_secondary);
  --gold: var(--primary);
  --gold2: var(--primary_light);
}
html,body{margin:0;min-height:100%;background:var(--bg_page_dark);color:var(--text_primary);font-family:Arial,Helvetica,sans-serif}
body{min-height:100dvh}
.slots-page{width:min(100%,412px);min-height:100dvh;margin:auto;padding:0 10px 88px;background:linear-gradient(180deg,var(--bg_card) 0,var(--bg_page) 36%,var(--bg_page_dark) 100%);border-left:1px solid var(--border_default);border-right:1px solid var(--border_default)}
.slots-header{height:61px;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--border_default);position:sticky;top:0;z-index:30;background:var(--bg_input);backdrop-filter:blur(12px)}
.back-btn{width:38px;height:38px;border:1px solid var(--border_default);border-radius:11px;background:var(--bg_icon);color:var(--text_primary);display:grid;place-items:center;text-decoration:none;font-size:27px;line-height:1}
.slots-brand{display:flex;justify-content:center;align-items:center;min-width:0;height:38px;text-decoration:none;color:var(--primary_light)}
.slots-brand img{display:block;width:auto;height:29px;max-width:130px;max-height:29px;object-fit:contain}
.slots-brand strong{font-size:15px;letter-spacing:.4px}
.slots-head-actions{display:flex;align-items:center}
.head-login{height:34px;padding:0 11px;border:1px solid var(--primary);border-radius:9px;background:linear-gradient(135deg,var(--primary_light),var(--primary));color:var(--btn_text);text-decoration:none;display:grid;place-items:center;font-size:8px;font-weight:950;letter-spacing:.4px}
.slots-hero{display:flex;align-items:flex-end;justify-content:space-between;padding:18px 3px 13px}
.slots-hero-copy{min-width:0}
.eyebrow{font-size:8px;font-weight:900;letter-spacing:1.4px;color:var(--text_secondary)}
.slots-hero h1{margin:3px 0 4px;font-size:23px;line-height:1;font-weight:950;letter-spacing:.3px}
.slots-hero p{margin:0;color:var(--text_secondary);font-size:9px;line-height:1.4}
.search-btn{width:39px;height:39px;flex:0 0 39px;border:1px solid var(--border_default);border-radius:11px;background:var(--bg_card_darker);color:var(--text_primary);display:grid;place-items:center;font-size:22px;cursor:pointer}
.search-box{height:0;opacity:0;overflow:hidden;display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:11px;background:var(--bg_card);transition:.22s;margin:0 2px}
.search-box.open{height:43px;opacity:1;border-color:var(--border_default);margin:0 2px 10px;padding:0 10px}
.search-box>span{color:var(--text_secondary)}
.search-box input{flex:1;height:100%;border:0;outline:0;background:transparent;color:var(--text_primary);font-size:11px}
.search-box button{border:0;background:none;color:var(--text_secondary);font-size:20px;cursor:pointer}
.providers{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 11px;scrollbar-width:none}
.providers::-webkit-scrollbar{display:none}
.provider{flex:0 0 auto;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border_default);background:var(--bg_card);color:var(--text_secondary);font-size:8px;font-weight:900;cursor:pointer;transition:.2s}
.provider.active{color:var(--primary_light);border-color:var(--primary);background:var(--bg_card_darker);box-shadow:0 4px 15px var(--shadow_card)}
.games-section{border-top:1px solid var(--border_hover);padding-top:13px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 2px 11px}
.section-head h2{margin:3px 0 0;font-size:13px}
.game-count{font-size:8px;color:var(--text_secondary);font-weight:800}
.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.game-card{min-width:0;border:1px solid var(--border_default);border-radius:11px;background:var(--bg_icon);overflow:hidden;cursor:pointer;transition:.2s;position:relative}
.game-card:active{transform:scale(.985)}
.game-image{aspect-ratio:1/1.12;background:var(--bg_card_darker);position:relative;overflow:hidden}
.game-image img{width:100%;height:100%;display:block;object-fit:cover}
.game-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--shadow_card));display:flex;align-items:flex-end;padding:7px;opacity:0;transition:.2s}
.game-card:hover .game-overlay,.game-card:focus-within .game-overlay{opacity:1}
.play-btn{width:100%;height:28px;border-radius:7px;border:1px solid var(--primary);background:linear-gradient(135deg,var(--primary_light),var(--primary_dark));color:var(--btn_text);font-size:8px;font-weight:900}
.game-info{padding:8px 7px 9px}
.game-name{font-size:8px;font-weight:800;color:var(--text_primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-provider{font-size:6.5px;color:var(--text_secondary);margin-top:4px;text-transform:uppercase}
.loading-card{border-radius:11px;overflow:hidden;background:var(--bg_card);border:1px solid var(--border_hover);aspect-ratio:1/1.32;position:relative}
.loading-card span{display:block;height:8px;background:var(--bg_icon);margin:7px 9px;border-radius:4px}
.loading-card span:first-child{height:72%;margin:0;border-radius:0;background:linear-gradient(100deg,var(--bg_card),var(--border_hover),var(--bg_card));background-size:200% 100%;animation:shine 1.2s infinite}
@keyframes shine{to{background-position:-200% 0}}
.empty-state,.error-state{display:none;text-align:center;padding:45px 15px;border:1px dashed var(--border_default);border-radius:12px;background:var(--bg_card);margin-top:8px}
.empty-icon{font-size:26px;color:var(--primary_dark);margin-bottom:8px}
.empty-state strong,.error-state strong{display:block;font-size:10px}
.empty-state span,.error-state span{display:block;font-size:9px;color:var(--text_secondary);margin-top:5px}
.error-state button{margin-top:13px;height:34px;padding:0 15px;border-radius:7px;border:1px solid var(--primary);background:var(--bg_card_darker);color:var(--primary);font-size:8px;font-weight:900}
.guest-login-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
.guest-login-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.guest-login-backdrop{position:absolute;inset:0;background:var(--shadow_card);backdrop-filter:blur(6px)}
.guest-login-box{position:relative;width:min(350px,100%);padding:25px 19px 18px;border:1px solid var(--border_primary);border-radius:20px;background:linear-gradient(145deg,var(--bg_card),var(--bg_page_dark));box-shadow:0 25px 80px var(--shadow_card);transform:translateY(10px) scale(.98);transition:.2s}
.guest-login-modal.open .guest-login-box{transform:none}
.guest-login-close{position:absolute;right:10px;top:9px;width:32px;height:32px;border:0;border-radius:9px;background:var(--border_hover);color:var(--text_primary);font-size:20px;cursor:pointer}
.guest-login-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;background:var(--primary_light);border:1px solid var(--border_primary);color:var(--primary_light);font-size:23px}
.guest-login-title{text-align:center;color:var(--text_primary);font-size:15px;font-weight:900}
.guest-login-text{text-align:center;color:var(--text_secondary);font-size:10px;line-height:1.5;margin:7px auto 17px;max-width:260px}
.guest-login-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.guest-login-primary,.guest-login-secondary{height:40px;border-radius:10px;display:grid;place-items:center;font-size:9px;font-weight:950;cursor:pointer}
.guest-login-primary{text-decoration:none;color:var(--btn_text);background:linear-gradient(135deg,var(--primary_light),var(--primary));border:1px solid var(--primary)}
.guest-login-secondary{color:var(--text_secondary);background:var(--bg_card);border:1px solid var(--border_default)}
@media(min-width:760px){.slots-page{box-shadow:0 0 50px var(--shadow_card)}}

/* PROVIDER BRAND CARDS */
.providers{gap:8px!important;padding:3px 2px 13px!important}
.provider-brand{flex:0 0 104px!important;height:70px!important;padding:7px!important;border-radius:13px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;position:relative;overflow:hidden!important;background:linear-gradient(145deg,var(--bg_card),var(--bg_card_darker))!important}
.provider-brand:before{content:"";position:absolute;inset:-25px;background:radial-gradient(circle at 50% 0,var(--shadow_button),transparent 55%);pointer-events:none}
.provider-brand.active{border-color:var(--primary)!important;background:linear-gradient(145deg,var(--bg_card_darker),var(--bg_page_dark))!important;box-shadow:0 7px 20px var(--shadow_card),inset 0 0 18px var(--shadow_button)!important}
.provider-logo{position:relative;width:38px!important;height:31px!important;border-radius:9px!important;display:grid!important;place-items:center!important;background:var(--bg_card_darker)!important;border:1px solid var(--border_default)!important;overflow:visible!important}
.provider-logo b{font-size:15px!important;font-weight:1000!important;letter-spacing:-1.5px!important;line-height:1!important}
.provider-pragmatic b{color:var(--primary);text-shadow:0 0 10px var(--shadow_button)}
.provider-pg b{color:var(--text_primary)}
.provider-slot88 b{font-size:11px!important;letter-spacing:-1px!important;color:var(--primary_light)}.provider-slot88 b span{color:#4eb9ff}
.provider-pop b{color:var(--primary)}.provider-pop em{position:absolute;right:-7px;bottom:-6px;padding:2px 4px;border-radius:5px;background:var(--primary);color:var(--btn_text);font-size:6px;font-style:normal;font-weight:1000;letter-spacing:.3px;border:1px solid var(--primary)}
.provider-name{position:relative!important;font-size:7px!important;font-weight:950!important;letter-spacing:.35px!important;white-space:nowrap!important;color:var(--text_secondary)!important}
.provider-brand.active .provider-name{color:var(--primary_light)!important}
.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
.game-card{border-radius:12px!important;box-shadow:0 5px 18px var(--shadow_card)}
.game-image{aspect-ratio:1/1.06!important}
.game-image img{transition:transform .28s ease,filter .28s ease}.game-card:hover .game-image img{transform:scale(1.035);filter:saturate(1.08)}
.game-overlay{padding:8px!important;background:linear-gradient(180deg,transparent 28%,var(--shadow_card))!important}
.game-info{padding:8px 8px 10px!important}
.game-name{font-size:8px!important}.game-provider{font-size:6.5px!important}
@media(max-width:700px){.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.provider-brand{flex-basis:92px!important}}
@media(min-width:701px) and (max-width:1000px){.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:1100px){.games-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
.game-badge{position:absolute;left:7px;top:7px;z-index:3;padding:4px 6px;border-radius:6px;background:var(--bg_card);border:1px solid var(--border_primary);color:var(--primary_light);font-size:6px;font-weight:1000;letter-spacing:.5px;backdrop-filter:blur(5px)}
.game-image.image-failed{background:radial-gradient(circle at 50% 30%,var(--primary_dark),var(--bg_card_darker) 60%)}
.game-image.image-failed:after{content:'GAME';position:absolute;inset:0;display:grid;place-items:center;color:var(--primary_dark);font-size:11px;font-weight:1000;letter-spacing:2px}

/* RESPONSIVE PATCH — layout/structure preserved */
html{overflow-x:hidden}
body{overflow-x:hidden}
.slots-page{width:100%;max-width:412px;margin-inline:auto}
.slots-header,.slots-hero,.search-box,.providers,.games-section{max-width:100%;min-width:0}
.slots-header{grid-template-columns:40px minmax(0,1fr) auto}
.slots-brand{min-width:0;overflow:hidden}
.slots-brand img{max-width:100%;}
.slots-head-actions{min-width:0;white-space:nowrap}
.providers{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.provider-brand{flex-shrink:0}
.games-grid{width:100%;min-width:0}
.game-card,.game-image,.game-info{min-width:0}
.game-image img{max-width:100%}
.guest-login-box{max-height:calc(100dvh - 36px);overflow-y:auto}

/* Keep the existing game-card arrangement: 4 / 3 / 2, no extra desktop redesign. */
@media (min-width:701px){
    .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-width:700px){
    .slots-page{padding-left:10px;padding-right:10px}
    .slots-header{gap:6px;padding-left:1px;padding-right:1px}
    .slots-brand img{max-width:120px}
    .head-login{padding-inline:9px}
    .slots-hero{padding-left:2px;padding-right:2px}
    .provider-brand{flex-basis:92px!important}
    .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:360px){
    .slots-page{padding-left:7px;padding-right:7px}
    .slots-header{grid-template-columns:36px minmax(0,1fr) auto;gap:4px}
    .back-btn{width:34px;height:34px}
    .head-login{height:32px;padding-inline:7px;font-size:7px}
    .slots-brand img{max-width:105px}
    .provider-brand{flex-basis:88px!important}
    .games-grid{gap:7px!important}
    .game-info{padding-left:6px!important;padding-right:6px!important}
}

/* =========================================================
   FINAL RESPONSIVE — 3 mobile / 4 tablet / 5 desktop
   Existing slot layout and card style are preserved.
   ========================================================= */
.slots-page{width:100%;max-width:412px;margin-inline:auto}
.games-grid{width:100%;min-width:0}
.game-card,.game-image,.game-info{min-width:0}

@media (max-width:700px){
  .slots-page{max-width:100%;padding-left:10px;padding-right:10px}
  .games-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .provider-brand{flex-basis:92px!important}
  .game-info{padding:7px 6px 8px!important}
  .game-name{font-size:8px!important}
  .game-provider{font-size:6px!important}
}