:root{
    --deep-sea: #093C56;
    --lagoon-1: #0B4F6C;
    --lagoon-2: #1789B0;
    --lagoon-3: #4FC3D9;
    --sand: #FBEBC9;
    --sand-dark: #EAD3A0;
    --coral: #F2622E;
    --coral-dark: #D34A1C;
    --teal: #14A085;
    --navy-text: #0B2B3C;
    --gold: #F4B740;
    --tile-purple: #5B3FA0;
    --tile-purple-dark: #452C82;
    --tile-shadow: #33205F;
    --white: #FFFDF8;
  }
  /* palette di card/ruota coerenti col tema di sfondo attivo (sempre leggibili) */
  #app[data-theme="mountain"]{
    --sand: #E9EEF7; --sand-dark: #C4CFE4;
    --tile-purple: #4A63A8; --tile-purple-dark: #324A85; --tile-shadow: #22335E;
  }
  #app[data-theme="desert"]{
    --sand: #F9DFAF; --sand-dark: #E0B274;
    --tile-purple: #C1651F; --tile-purple-dark: #914915; --tile-shadow: #5C2C0C;
  }
  #app[data-theme="forest"]{
    --sand: #E6F3DC; --sand-dark: #C1E0AC;
    --tile-purple: #2E8B57; --tile-purple-dark: #1F6740; --tile-shadow: #143F27;
  }
  #app[data-theme="night"]{
    --sand: #E6E3F7; --sand-dark: #C8C2E8;
    --tile-purple: #5B4C9E; --tile-purple-dark: #40356F; --tile-shadow: #2A2249;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent; user-select:none;}
  html{ height:100%; }
  body{
    margin:0; padding:0; min-height:100%;
    font-family:'Nunito', sans-serif;
    background: var(--deep-sea);
    color: var(--navy-text);
  }
  #app{
    position:relative;
    width:100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-width:480px;
    margin:0 auto;
    display:flex; flex-direction:column;
    overflow-x:hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* sfondo: 5 temi diversi, uno per livello a rotazione, con dissolvenza incrociata */
  #bgLayer{
    position:fixed; inset:0; z-index:0;
    overflow:hidden;
    background: var(--deep-sea);
  }
  .bg-theme{
    position:absolute; inset:0;
    opacity:0;
    transition: opacity 0.9s ease;
  }
  .bg-theme.active{ opacity:1; }
  .bg-theme svg{ position:absolute; left:0; right:0; bottom:0; width:100%; height:220px; display:block; }

  /* --- tema 1: spiaggia --- */
  .theme-beach{ background: linear-gradient(180deg, #6FD6E8 0%, #1789B0 38%, #0B4F6C 70%, #093C56 100%); }
  .theme-beach .bg-sun{
    position:absolute; top:-60px; right:-40px; width:150px; height:150px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #FFF6D6, #F4B740 70%);
    box-shadow: 0 0 60px 10px rgba(244,183,64,0.45);
  }

  /* --- tema 2: montagna --- */
  .theme-mountain{ background: linear-gradient(180deg, #C9D6F0 0%, #8CA0D6 35%, #52619A 70%, #2A3358 100%); }
  .theme-mountain .bg-sun{
    position:absolute; top:-50px; right:-30px; width:120px; height:120px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #FFF8E8, #FFC98A 70%);
    box-shadow: 0 0 50px 8px rgba(255,201,138,0.4);
  }

  /* --- tema 3: deserto --- */
  .theme-desert{ background: linear-gradient(180deg, #FFDCA0 0%, #FDA85C 35%, #E17B3B 70%, #9B4A22 100%); }
  .theme-desert .bg-sun{
    position:absolute; top:-40px; right:-30px; width:170px; height:170px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #FFF3D6, #FFB25C 70%);
    box-shadow: 0 0 70px 12px rgba(255,178,92,0.5);
  }

  /* --- tema 4: foresta --- */
  .theme-forest{ background: linear-gradient(180deg, #CDEFC4 0%, #7ED08A 35%, #359463 70%, #1D5A3E 100%); }
  .theme-forest .bg-sun{
    position:absolute; top:-55px; right:-35px; width:130px; height:130px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #FFFCE0, #FFE79A 70%);
    box-shadow: 0 0 55px 8px rgba(255,231,154,0.4);
  }

  /* --- tema 5: notte stellata --- */
  .theme-night{ background: linear-gradient(180deg, #1B2A5E 0%, #2A1B4D 45%, #170E30 75%, #0B0718 100%); }
  .theme-night .bg-moon{
    position:absolute; top:-30px; right:-10px; width:110px; height:110px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #FFFDF2, #E6E9F5 75%);
    box-shadow: 0 0 45px 10px rgba(230,233,245,0.35);
  }
  .star{
    position:absolute; border-radius:50%;
    background: #FFFDF2;
    animation: twinkle 2.6s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%, 100%{ opacity:0.35; }
    50%{ opacity:1; }
  }

  /* top bar */
  .topbar{
    position:relative; z-index:5;
    display:flex; align-items:center; justify-content:space-between;
    padding: max(10px, env(safe-area-inset-top)) 16px 4px;
  }
  .icon-group{ display:flex; align-items:center; gap:8px; flex: 0 0 auto; }
  .icon-btn{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    color:var(--white);
    font-size:16px;
    cursor:pointer;
    text-decoration:none;
    flex: 0 0 auto;
  }
  .icon-btn:active{ transform: scale(0.96); }
  .icon-btn-wrap{ position:relative; display:inline-block; flex: 0 0 auto; }
  .lang-badge{
    position:absolute; bottom:-3px; right:-5px;
    width:18px; height:18px; border-radius:50%;
    background: var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; line-height:1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  .level-display{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; align-items:baseline; gap:5px;
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    color: var(--white);
    text-shadow: 0 2px 0 rgba(0,0,0,0.18);
  }
  .level-display #levelLabel{ font-size:28px; }
  .pill{
    display:flex; align-items:center; gap:6px;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    color:var(--white);
    padding:5px 12px 5px 6px;
    border-radius:999px;
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:14px;
  }
  button.pill{ cursor:pointer; }
  button.pill:active{ transform: scale(0.96); }
  .pill .icon-badge{
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
  }
  .coin-badge{ background: radial-gradient(circle at 35% 30%, #FFEFAE, var(--gold)); box-shadow: inset 0 -2px 2px rgba(0,0,0,0.15);}
  .lv-label{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:28px;
    opacity:0.85;
    letter-spacing:0.5px;
  }

  .title-wrap{
    position:relative; z-index:5;
    text-align:center;
    padding: 0 0 6px;
    flex: 0 0 auto;
  }
  .title-wrap h1{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size: 19px;
    letter-spacing:0.5px;
    color: var(--white);
    text-shadow: 0 2px 0 rgba(0,0,0,0.18);
    margin: 0;
  }
  .title-wrap .sub{
    font-size:11px;
    color: rgba(255,255,255,0.85);
    font-weight:700;
    margin-top:1px;
  }

  /* words card (elenco parole da trovare) */
  .words-card-wrap{
    position:relative;
    z-index:5;
    margin: 4px 14px 0;
  }
  .words-card{
    position:relative; z-index:5;
    background: var(--sand);
    border-radius: 18px;
    box-shadow: 0 8px 0 var(--sand-dark), 0 14px 20px rgba(0,0,0,0.22);
    padding: 10px 12px;
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: background 0.6s ease, box-shadow 0.6s ease;
  }
  #wordsList{
    display:flex; flex-direction:column; gap:6px;
    align-items:center;
  }
  .word-row{
    display:flex; gap:4px;
    justify-content:center;
  }
  .letter-tile{
    width: var(--tile-size, 28px); height: var(--tile-size, 28px);
    border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size: calc(var(--tile-size, 28px) * 0.5);
    color: var(--navy-text);
    background: var(--white);
    border-bottom: 3px solid #D8C79A;
    flex: 0 0 auto;
  }
  .letter-tile.filled{
    background: linear-gradient(180deg, #FFFFFF, #FDF6E3);
    border-bottom: 3px solid var(--gold);
    animation: pop 0.28s ease;
  }
  .letter-tile.hinted{
    background: linear-gradient(180deg, #FFFFFF, #EAF7F3);
    border-bottom: 3px solid var(--teal);
    color: var(--teal);
    animation: pop 0.28s ease;
  }

  /* overlay che mostra la parola in composizione sopra l'elenco parole */
  .compose-overlay{
    position:absolute; inset:0; z-index:15;
    background: rgba(5,20,28,0.82);
    border-radius: 18px;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition: opacity 0.12s ease;
    backdrop-filter: blur(2px);
  }
  .compose-overlay.show{ opacity:1; }
  #composeText{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    letter-spacing: 4px;
    color: var(--white);
    text-shadow: 0 2px 0 rgba(0,0,0,0.35);
    padding: 0 14px;
    text-align:center;
    word-break: break-all;
    transition: color 0.15s ease;
  }
  /* parola non valida: il testo diventa rosso e trema */
  .compose-overlay.invalid{ background: rgba(120,20,20,0.85); }
  .compose-overlay.invalid #composeText{
    color: #FF6B6B;
    animation: shake 0.42s ease;
  }
  @keyframes shake{
    0%, 100%{ transform: translateX(0); }
    20%{ transform: translateX(-9px); }
    40%{ transform: translateX(8px); }
    60%{ transform: translateX(-6px); }
    80%{ transform: translateX(5px); }
  }
  @keyframes pop{
    0%{ transform:scale(0.6); }
    60%{ transform:scale(1.12); }
    100%{ transform:scale(1); }
  }

  /* middle info row */
  .info-row{
    position:relative; z-index:5;
    display:flex; justify-content:center; align-items:center;
    gap: 10px;
    padding: 14px 0 0;
    min-height: 20px;
    flex: 0 0 auto;
  }
  .extra-counter{
    font-size:11.5px; font-weight:700; color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.15);
    padding:3px 10px; border-radius:999px;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
  }
  .extra-counter:active{ transform: scale(0.96); }

  /* wheel area */
  .wheel-zone{
    position:relative; z-index:5;
    flex: 1 1 auto;
    display:flex; align-items:center; justify-content:center;
    gap: 2px;
    min-height: 250px;
    padding: 4px 4px max(10px, env(safe-area-inset-bottom));
  }
  #wheelSvgLayer{
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none;
  }
  #wheelContainer{
    position:relative;
    width: 232px; height:232px;
    touch-action: none;
    flex: 0 0 auto;
  }
  .life-ring{
    position:absolute; top:50%; left:50%;
    width: 196px; height:196px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border: 12px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.10);
  }
  .tile{
    position:absolute;
    width: 48px; height:48px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size: 20px;
    color: var(--white);
    background: radial-gradient(circle at 32% 28%, var(--tile-purple) 0%, var(--tile-purple-dark) 100%);
    box-shadow: 0 4px 0 var(--tile-shadow), 0 8px 14px rgba(0,0,0,0.35);
    transform: translate(-50%,-50%);
    transition: left 0.32s cubic-bezier(.34,1.56,.64,1), top 0.32s cubic-bezier(.34,1.56,.64,1), transform 0.08s ease, box-shadow 0.6s ease, background 0.6s ease;
    z-index:2;
  }
  .tile.selected{
    background: radial-gradient(circle at 32% 28%, var(--coral) 0%, var(--coral-dark) 100%);
    box-shadow: 0 2px 0 #A2380F, 0 6px 10px rgba(0,0,0,0.35);
    transform: translate(-50%,-50%) scale(1.08);
  }

  /* pulsanti mescola / aiuto ai lati della ruota */
  .side-btn{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; color: var(--white);
    font-family:'Nunito'; font-weight:800; font-size:10px;
    cursor:pointer;
    width: 50px;
    flex: 0 0 auto;
  }
  .side-btn .circle{
    width:40px; height:40px; border-radius:50%;
    background: rgba(255,255,255,0.16);
    border: 2px solid rgba(255,255,255,0.4);
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
    margin: 0 auto;
  }
  .side-btn:active .circle{ transform: translateY(2px); box-shadow:none; }
  .circle-wrap{ position:relative; display:inline-block; }
  .hint-badge{
    position:absolute; top:-5px; right:-7px;
    min-width:17px; height:17px; padding:0 3px;
    border-radius:999px;
    background: var(--coral);
    color:#fff;
    font-family:'Nunito'; font-weight:800; font-size:10px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 0 2px var(--deep-sea);
  }
  .hint-badge.pulse{ animation: badgePulse 0.55s ease; }
  @keyframes badgePulse{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.7); }
    60%{ transform:scale(0.85); }
    100%{ transform:scale(1); }
  }

  /* toast */
  #toast{
    position:fixed; top: 38%; left:50%; transform:translate(-50%,-50%) scale(0.8);
    font-family:'Baloo 2'; font-weight:700; font-size:20px;
    color:var(--white); background: rgba(11,79,108,0.9);
    padding: 10px 22px; border-radius:16px;
    opacity:0; pointer-events:none; z-index:40;
    transition: opacity 0.15s ease, transform 0.15s ease;
    max-width: 85vw; text-align:center;
  }
  #toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

  /* overlays */
  .overlay{
    position:fixed; inset:0; z-index:30;
    background: rgba(9,60,86,0.72);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.25s ease;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .card{
    background: var(--sand);
    border-radius:24px;
    padding: 28px 26px 22px;
    width: 82%;
    max-width:320px;
    text-align:center;
    box-shadow: 0 12px 0 var(--sand-dark), 0 20px 30px rgba(0,0,0,0.35);
    transform: translateY(10px) scale(0.96);
    transition: transform 0.25s ease;
  }
  .overlay.show .card{ transform: translateY(0) scale(1); }
  .card h2{
    font-family:'Baloo 2'; font-size:26px; margin:2px 0 4px; color: var(--navy-text);
  }
  .card p{ font-size:14px; color:#555; margin:4px 0 16px; font-weight:700;}
  .extra-words-grid{
    display:flex; flex-wrap:wrap; gap:8px;
    justify-content:center;
    max-height: 40vh; overflow-y:auto;
    padding: 4px 2px 18px;
  }
  .extra-chip{
    background: linear-gradient(180deg, #FFFFFF, #FDF6E3);
    border-bottom: 3px solid var(--gold);
    border-radius: 10px;
    padding: 7px 12px;
    font-family:'Baloo 2', sans-serif;
    font-weight:700; font-size:14px;
    color: var(--navy-text);
    letter-spacing: 1px;
  }
  .extra-empty{
    font-size:13px; color:#777; font-weight:600;
    padding: 6px 4px 16px; line-height:1.4;
  }

  /* negozio aiuti */
  .shop-balance{
    display:inline-flex; align-items:center; gap:4px;
    background: var(--sand-dark);
    color: var(--navy-text);
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:14px;
    padding:5px 14px; border-radius:999px;
    margin: 2px 0 4px;
  }
  .shop-packages{
    display:flex; flex-direction:column; gap:10px;
    padding: 4px 0 18px;
  }
  .shop-package{
    display:flex; align-items:center; justify-content:space-between;
    background:white; border-radius:14px; padding:10px 14px;
    box-shadow: 0 3px 0 #E2D2A5;
    transition: opacity 0.2s ease;
  }
  .shop-package.disabled{ opacity:0.45; }
  .shop-package-info{ display:flex; align-items:center; gap:10px; }
  .shop-package-hints{
    font-family:'Baloo 2'; font-weight:800; font-size:18px; color: var(--navy-text);
  }
  .shop-package-cost{
    font-family:'Nunito'; font-weight:800; font-size:13px; color:#8A7A55;
  }
  .shop-buy-btn{
    font-family:'Baloo 2'; font-weight:700; font-size:13px;
    background: linear-gradient(180deg, var(--coral), var(--coral-dark));
    color:white; border:none; padding:8px 16px; border-radius:999px;
    box-shadow: 0 3px 0 #A2380F;
    cursor:pointer;
  }
  .shop-buy-btn:active{ transform:translateY(2px); box-shadow:none; }
  .shop-buy-btn:disabled{
    background: #C9C2B4; box-shadow:0 3px 0 #a9a297; cursor:default;
  }
  .confirm-text{
    font-size:15px; color: var(--navy-text); font-weight:700;
    margin: 4px 0 18px; line-height:1.4;
  }

  /* selezione lingua */
  .language-list{
    display:flex; flex-direction:column; gap:10px;
    padding: 4px 0 18px;
  }
  .language-option{
    display:flex; align-items:center; gap:12px;
    width:100%;
    background:white; border-radius:14px; padding:12px 16px;
    box-shadow: 0 3px 0 #E2D2A5;
    border:none; cursor:pointer;
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:16px;
    color: var(--navy-text);
    text-align:left;
  }
  .language-option:active{ transform:translateY(2px); box-shadow:none; }
  .language-option.active{
    outline: 3px solid var(--teal);
    outline-offset: -3px;
  }
  .language-flag{ font-size:22px; }
  .confirm-btn-row{
    display:flex; gap:10px; justify-content:center;
  }
  .secondary-btn{
    font-family:'Baloo 2'; font-weight:700; font-size:15px;
    background: white; color: var(--navy-text); border: 2px solid var(--sand-dark);
    padding:10px 22px; border-radius:999px;
    cursor:pointer;
  }
  .secondary-btn:active{ transform:scale(0.96); }

  /* menu impostazioni (lingua / istruzioni / classifica) */
  .menu-list{ display:flex; flex-direction:column; gap:10px; margin: 4px 0 16px; }
  .menu-row{
    display:flex; align-items:center; gap:10px;
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:15px;
    background:white; color: var(--navy-text);
    box-shadow: 0 3px 0 #E2D2A5;
    border:none; border-radius:14px;
    padding:12px 16px;
    cursor:pointer;
    text-align:left;
  }
  .menu-row:active{ transform:translateY(2px); box-shadow:none; }

  /* istruzioni */
  .tutorial-card{ max-width:340px; }
  .tutorial-row{ display:flex; align-items:center; gap:12px; text-align:left; margin-bottom:14px; }
  .tutorial-icon{ flex:0 0 auto; width:36px; text-align:center; font-size:20px; }
  .tutorial-row p{ margin:0; font-size:12.5px; line-height:1.4; color:var(--navy-text); font-weight:600; }

  /* classifica */
  .leaderboard-list{ display:flex; flex-direction:column; gap:8px; margin: 4px 0 16px; max-height:50vh; overflow-y:auto; }
  .leaderboard-row{
    display:flex; align-items:center; gap:10px;
    background:white; border-radius:12px; padding:9px 14px;
    box-shadow: 0 3px 0 #E2D2A5;
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:14px; color:var(--navy-text);
  }
  .leaderboard-rank{ flex:0 0 auto; width:24px; text-align:center; color:#8A7A55; }
  .leaderboard-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
  .leaderboard-score{ flex:0 0 auto; color: var(--coral-dark); }
  .leaderboard-empty{ font-size:13px; color:#777; font-weight:600; padding: 6px 4px 16px; line-height:1.4; }

  .crown-icon{ font-size:44px; margin-bottom:4px; }
  .stat-row{
    display:flex; justify-content:center; gap:18px; margin: 10px 0 18px;
  }
  .stat{
    background:white; border-radius:14px; padding:8px 14px;
    font-family:'Baloo 2'; font-weight:700; font-size:15px; color:var(--navy-text);
    box-shadow: 0 3px 0 #E2D2A5;
  }
  .stat span{ display:block; font-size:11px; color:#999; font-weight:800; }
  .primary-btn{
    font-family:'Baloo 2'; font-weight:700; font-size:17px;
    background: linear-gradient(180deg, var(--coral), var(--coral-dark));
    color:white; border:none; padding:12px 30px; border-radius:999px;
    box-shadow: 0 5px 0 #A2380F;
    cursor:pointer;
  }
  .primary-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #A2380F;}

  #loadingScreen{
    position:fixed; inset:0; z-index:50;
    background: linear-gradient(180deg, #6FD6E8 0%, var(--lagoon-2) 45%, var(--lagoon-1) 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:white; font-family:'Baloo 2';
    transition: opacity 0.3s ease;
  }
  #loadingScreen .emoji{ font-size:54px; margin-bottom:10px; }
  .spinner{
    width:34px; height:34px; border-radius:50%;
    border:4px solid rgba(255,255,255,0.35); border-top-color:white;
    animation: spin 0.8s linear infinite; margin-top:14px;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .hidden{ display:none !important; }

  /* tablet: la card, la ruota di lettere e le tessere crescono IN
     PROPORZIONE diretta allo schermo (min(vw/vh, tetto in px)) invece di
     scalini fissi indovinati a caso — così qualsiasi tablet, da 10" a 14",
     porta la sua taglia reale. renderWheel()/slotPosition() in script.js
     calcolano la geometria dalla taglia reale del contenitore, quindi
     seguono questi valori automaticamente, anche ruotando lo schermo. */
  @media (min-width: 700px){
    #app{ max-width: min(92vw, 1200px); }
    .title-wrap h1{ font-size:22px; }
    .level-display #levelLabel, .lv-label{ font-size:32px; }
    .words-card{ padding: 14px 16px; }
    #wheelContainer{ width:min(58vw, 58vh, 560px); height:min(58vw, 58vh, 560px); }
    .life-ring{ width:min(49vw, 49vh, 473px); height:min(49vw, 49vh, 473px); }
    .tile{ width:min(12vw, 12vh, 116px); height:min(12vw, 12vh, 116px); font-size:min(4.8vw, 4.8vh, 46px); }
  }
  /* desktop: l'app resta un riquadro "da telefono" ma centrato in verticale,
     invece di stare incollata in cima a un mare di sfondo */
  @media (min-width: 1024px){
    body{ display:flex; align-items:center; }
    #app{
      min-height: auto;
      max-height: 96vh;
      border-radius: 28px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      overflow-y: auto;
    }
    #bgLayer{ position:absolute; }
    .title-wrap h1{ font-size:26px; }
    .level-display #levelLabel, .lv-label{ font-size:36px; }
  }