/* ===== V2 : outils d'interface partagés, App Store, réglages, positions ===== */

/* Position du téléphone à l'écran */
#root.pos-right { right: 3vw; left: auto; transform-origin: bottom right; }
#root.pos-left { left: 3vw; right: auto; transform-origin: bottom left; }
#root.pos-center { left: 50%; right: auto; transform-origin: bottom center; translate: -50% 0; }

/* Couleur de coque (châssis) */
#phone[data-case="noir"] { background: linear-gradient(145deg, #4a4b50 0%, #1d1e21 30%, #3b3c41 55%, #141518 80%, #333438 100%); }
#phone[data-case="bleu"] { background: linear-gradient(145deg, #8fa7c4 0%, #2f4a6b 30%, #6d88aa 55%, #22384f 80%, #57718f 100%); }
#phone[data-case="rose"] { background: linear-gradient(145deg, #f6d6d8 0%, #c98f95 30%, #efc4c7 55%, #b57a80 80%, #e4b0b4 100%); }

/* Accueil défilant */
.home { padding: 62px 0 0; display: flex; flex-direction: column; height: 100%; }
.home-scroll { flex: 1; overflow-y: auto; padding: 8px 24px 12px; display: flex; flex-direction: column; }
.home-scroll .grid { flex: none; }
.home-scroll .fold-btn { margin-top: auto; flex: none; }
.unfolded-span .home-scroll { padding-bottom: 34px; }
.home-scroll::-webkit-scrollbar { display: none; }
.home .dock { margin: 0 24px 26px; }
.unfolded-span .grid { grid-template-columns: repeat(8, 1fr); }
.app-icon .ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* En-tête standard */
.ui-head-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 4px 14px 2px; gap: 8px; }
.ui-head-left, .ui-head-right { display: flex; align-items: center; gap: 10px; min-width: 60px; }
.ui-head-right { justify-content: flex-end; }
.ui-head-title { font-weight: 600; font-size: 17px; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-back { display: flex; align-items: center; gap: 2px; }
.ui-back svg, .ui-act svg { width: 24px; height: 24px; fill: var(--accent); }
.link.danger, .danger { color: var(--red) !important; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-ic { width: 38px; height: 38px; fill: var(--muted); opacity: .5; }

/* Modales */
.ui-modal { position: absolute; inset: 0; z-index: 90; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; animation: fadeIn .2s; }
.ui-modal.out { animation: fadeOut .2s forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.ui-sheet { width: 100%; max-height: 82%; background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; animation: sheetUp .3s cubic-bezier(.2,.9,.3,1); }
.ui-sheet.tall { height: 82%; }
@keyframes sheetUp { from { transform: translateY(100%); } }
.ui-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; font-size: 17px; }
.ui-sheet-body { overflow-y: auto; padding: 4px 16px 30px; display: flex; flex-direction: column; gap: 10px; }
.ui-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.ui-field input, .ui-field textarea, .ui-field select {
  font-size: 16px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); outline: none; resize: none;
}
.ui-field input:focus, .ui-field textarea:focus { border-color: var(--accent); }
.ui-actions { width: 100%; padding: 0 10px 26px; display: flex; flex-direction: column; gap: 1px; animation: sheetUp .3s cubic-bezier(.2,.9,.3,1); }
.ui-actions-title { background: var(--card); border-radius: 14px 14px 0 0; padding: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.ui-actions button { background: var(--card); backdrop-filter: blur(20px); padding: 15px; font-size: 17px; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 8px; }
.ui-actions button svg { width: 20px; fill: currentColor; }
.ui-actions .ui-actions-title + button, .ui-actions > button:first-child { border-radius: 14px 14px 0 0; }
.ui-actions .ui-actions-title + button { border-radius: 0; }
.ui-actions button:nth-last-child(2) { border-radius: 0 0 14px 14px; }
.ui-actions.long .ui-actions-search { background: var(--card); border: 0; padding: 11px 14px; font-size: 15px; color: var(--text); outline: none; }
.ui-actions-scroll { display: flex; flex-direction: column; gap: 1px; max-height: 46vh; overflow-y: auto; border-radius: 0 0 14px 14px; }
.ui-actions-scroll button { border-radius: 0 !important; flex-shrink: 0; }
.ui-actions.long > .ui-actions-search:first-child { border-radius: 14px 14px 0 0; }
.ui-actions .ui-cancel { margin-top: 8px; border-radius: 14px; font-weight: 600; }
.vid-badge { position: absolute; right: 4px; bottom: 4px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.photos div { position: relative; }

/* Réglages V2 */
.row.setting.col { flex-direction: column; align-items: stretch; gap: 10px; cursor: default; }
.row.setting.col input[type=range] { width: 100%; accent-color: var(--accent); }
.segmented { display: flex; background: rgba(118,118,128,.16); border-radius: 9px; padding: 2px; }
.segmented button { flex: 1; padding: 6px 4px; font-size: 13px; border-radius: 7px; }
.segmented button.on { background: var(--card); box-shadow: 0 2px 6px rgba(0,0,0,.15); font-weight: 600; }
.swatches { display: flex; gap: 12px; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.swatches button.on { border-color: var(--accent); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* App Store */
.store-ic, .ic.big { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.store-ic svg { width: 30px; fill: #fff; }
.ic.big { width: 96px; height: 96px; border-radius: 22px; }
.ic.big svg { width: 54px; fill: #fff; }
.store-ic img, .ic.big img { width: 100%; height: 100%; object-fit: cover; }
.get-btn { padding: 6px 16px; border-radius: 16px; background: rgba(10,132,255,.12); color: var(--accent); font-weight: 700; font-size: 14px; min-width: 76px; display: grid; place-items: center; }
.get-btn.open { background: rgba(118,118,128,.16); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(10,132,255,.25); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.store-detail { display: flex; gap: 16px; align-items: center; padding: 10px 4px 16px; }
.store-name { font-size: 22px; font-weight: 700; }
.store-detail .get-btn { margin-top: 10px; }
.store-desc { font-size: 15px; line-height: 1.45; padding: 0 4px 20px; }
.list-grid { display: grid; grid-template-columns: 1fr 1fr; }
.list-grid .row + .row::before { display: none; }
.row.hidden { display: none; }

/* Apps tierces */
.custom-app { padding-top: 54px; background: var(--bg); }
.custom-app iframe { flex: 1; border: 0; width: 100%; background: transparent; }

/* Boutons et éléments communs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; font-size: 16px; }
.btn.secondary { background: rgba(118,118,128,.16); color: var(--text); }
.btn.block { width: 100%; }
.btn svg { width: 18px; fill: currentColor; }
.chip { display: inline-flex; padding: 5px 11px; border-radius: 14px; background: rgba(118,118,128,.16); font-size: 13px; }
.fab { position: absolute; right: 18px; bottom: 34px; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; z-index: 22; box-shadow: 0 8px 20px rgba(10,132,255,.4); }
.fab svg { width: 26px; fill: #fff; }
/* Textes saisis par les joueurs : un mot très long (lien, « aaaaa… ») passe à la ligne au lieu de sortir de l'écran */
.buzz-text, .pixa-caption, .mail-body, .mail-read h2, .sh-msg, .bz-detail, .soc-prof-bio, .soc-notif-txt, .flame-chat .bubble, .fc-info p, .sv-al-msg, .b-text, .soc-prof-name, .rem-title, .nt-editor .nt-title,
.nw-app h1, .nw-app h2, .nw-app h3, .nw-app p { overflow-wrap: anywhere; }
/* Annonces Bazaar : un titre très long ne fait plus sortir la grille de l'écran (cartes invisibles) */
.bz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz-grid.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bz-card { min-width: 0; }
.list .nt-row .r-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.list .nt-row .nt-pin { vertical-align: -2px; margin-right: 4px; }