/* Dernière couche responsive : téléphone, tablette et ordinateur. */
html,body{width:100%;height:100%;min-height:100%;overscroll-behavior:none}
.phone-shell{max-width:100%;max-height:100dvh}
.screen{min-width:0}img,svg,canvas{max-width:100%;height:auto}button,input,select{max-width:100%}

/* Dimensions tactiles et lisibilité conformes aux usages Android/iOS. */
button,input,select{min-height:44px}
button:focus-visible,input:focus-visible,select:focus-visible,.cell:focus-visible{outline:3px solid #9ff9ea;outline-offset:2px}
button:active{filter:brightness(.9)}
.round-button,.top-gems,.quick-settings,.game-topbar button,.modal-close{min-width:44px;min-height:44px}
.play-button,.auth-submit,.profile-continue,.share-button,.install-sheet>button{min-height:48px}
.dock button,.boosters button,.placement-options button,.piece{min-height:44px}
.dock b,.boosters b,.placement-options button b,.placement-options button small{font-size:11px}
input,select{font-size:16px!important} /* évite le zoom automatique d’iOS */
dialog :is(p,li,label,input,select){font-size:11px}
.modal-close{display:grid;place-items:center;padding:0}
.password-field{position:relative;display:block}.password-field input{padding-right:54px!important}.password-field button{position:absolute;right:3px;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:9px;background:transparent;color:#dfeaf5;font-size:18px}.password-field button:hover,.password-field button:focus-visible{background:#ffffff12}

@media(pointer:coarse){
  .dock button,.boosters button,.placement-options button,.piece,dialog button{min-height:48px}
  .round-button,.top-gems,.quick-settings,.game-topbar button,.modal-close{min-width:48px;min-height:48px}
}

/* Le quatrième choix garde sa couleur sur tous les formats. */
.piece:nth-child(4)::before{content:"4";background:#d69b32}
.piece:nth-child(4) .mini-block{background:linear-gradient(145deg,#ffd477,#d68c2e);box-shadow:inset 0 2px #fff0b6,inset 0 -2px #92551e}
.cell[data-piece="4"],.cell[data-preview="4"]{background:linear-gradient(145deg,#ffd477,#d68c2e)!important;box-shadow:inset 0 2px #fff0b6,inset 0 -3px #92551e,0 2px 5px #07101d!important}

@media(max-width:359px){
  .phone-shell{width:100vw;height:100dvh;border:0;border-radius:0}
  .topbar{padding-left:9px;padding-right:9px}.brand{letter-spacing:1.3px}.brand-mark{width:23px;height:23px}
  .game-goal{font-size:6px;padding:5px 7px;white-space:nowrap}
  .grid{width:min(92vw,63dvh);gap:2px;padding:5px}
  .pieces{height:52px!important;margin:3px 4px!important;gap:3px!important}
  .piece{border-radius:10px}.piece::before{left:3px;top:3px;width:16px;height:16px}
  .mini-grid{gap:2px}.mini-block{width:10px!important;height:10px!important;font-size:6px}
  .placement-options{margin-left:7px;margin-right:7px;gap:4px}.placement-options button{padding:4px 6px;min-height:44px}.placement-options button small{display:none}
  .boosters{margin-left:5px;margin-right:5px}.boosters button small{display:none}
  dialog{width:calc(100vw - 12px)!important;max-width:none!important;padding:20px 14px}
}

/* Tablettes et ordinateurs : véritable interface large en deux colonnes. */
@media(min-width:700px) and (min-height:650px){
  body{padding:clamp(10px,2vw,24px)}
  .phone-shell{width:min(calc(100vw - 24px),980px);height:min(calc(100dvh - 24px),900px);border-radius:30px}
  .phone-shell::before,.phone-shell::after{display:none}
  .home-screen .city-art,.home-screen .living-city{inset:0 48% 0 0}
  .home-screen .ambient-shade{background:linear-gradient(90deg,transparent 28%,#09162bd9 52%,#081329 100%)}
  .home-screen .hero-copy{left:clamp(30px,5vw,70px);top:34%}.home-screen .hero-copy h1{font-size:clamp(46px,6vw,68px)}
  .home-screen .home-content{left:52%;right:4%;width:auto;height:76%;bottom:6%;padding:0;justify-content:center;gap:clamp(7px,1.2vh,13px)}
  .home-screen .topbar{padding-left:28px;padding-right:28px}.home-screen .dock button{min-height:48px}.home-screen .dock b{font-size:7px}
  .game-screen .game-topbar{position:absolute;z-index:5;left:0;right:0;top:0;padding:18px 24px 8px;grid-template-columns:48px 1fr 1fr 70px}
  .game-screen .xp-head{position:absolute;z-index:4;left:4%;top:76px;width:43%;margin:0}
  .game-screen .grid{position:absolute;left:4%;top:126px;width:min(43vw,calc(100dvh - 185px),440px);max-height:none;margin:0}
  .game-screen .level-progress{position:absolute;right:5%;top:82px;width:42%;margin:0}
  .game-screen .mode-chip{left:auto;right:5%;top:101px}.game-screen .game-goal{position:absolute;right:5%;top:125px;width:42%;margin:0;text-align:center}
  .game-screen .placement-help{position:absolute;right:5%;top:166px;width:42%;margin:0}
  .game-screen .placement-options{position:absolute;right:5%;top:211px;width:42%;margin:0}
  .game-screen .pieces{position:absolute;right:5%;top:252px;width:42%;height:155px;margin:0;gap:10px}
  .game-screen .piece{min-width:0}.game-screen .mini-block{width:clamp(12px,1.5vw,17px);height:clamp(12px,1.5vw,17px)}
  .game-screen .boosters{position:absolute;right:5%;top:428px;width:42%;margin:0}.game-screen .energy{position:absolute;right:5%;top:500px;width:42%;margin:0}
  .toast{bottom:26px}
  dialog{width:min(520px,calc(100vw - 40px))!important;max-width:520px!important;font-size:clamp(12px,1.5vw,16px)}
}

@media(min-width:700px) and (max-height:649px){
  .phone-shell{width:100vw;height:100dvh;border:0;border-radius:0}
  dialog{max-height:calc(100dvh - 12px);width:min(500px,calc(100vw - 24px))!important;max-width:500px!important}
}
@media(min-width:1400px){.phone-shell{width:1060px;max-width:calc(100vw - 48px)}}
@media(prefers-reduced-motion:reduce){.cell.beginner-target,.cell.expert-target,.pieces .piece:not(.used){animation:none!important}}

/* Encoches, barre d'accueil et zones arrondies des appareils mobiles. */
@supports(padding:max(0px)){
  .topbar,.game-topbar{padding-top:max(15px,env(safe-area-inset-top))}
  .home-content{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  @media(orientation:landscape){
    .phone-shell{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  }
}