/* === Cartalya v1.3.4 === */
:root{--opacityFondjeu:0.25;--opacityApp:0.95;--colorBtn:#2f80ed}
*,*:before,*:after{box-sizing:border-box}
html,body{min-height:100%;height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===== IPHONE : pas de page figée pendant la saisie clavier ===== */
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial;
  background:#f8f9fb;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  width:100%;
  min-height:100svh;
  overflow:auto;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/applications/Cartalya/assets/fondjeu.png');
  background-size: cover;
  background-position: center;
  opacity: var(--opacityFondjeu);
  z-index: -1;
}

.app{
  max-width:900px;
  margin:12px auto 42px;
  background:rgba(255,255,255,var(--opacityApp));
  border:1px solid #e8edf4;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:14px;
  min-height:calc(100svh - 54px);
  max-height:calc(100svh - 54px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

@supports (height:100dvh){
  body{min-height:100dvh}
  .app{min-height:calc(100dvh - 54px);max-height:calc(100dvh - 54px)}
}

/* Anti-zoom et anti-agrandissement iPhone */
input, select, textarea, button{
  font-size:16px !important;
  max-width:100%;
}
input, select, textarea{
  min-height:44px;
  line-height:1.25;
}
button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.brand{margin:0;font-size:22px}
.tour{display:inline-flex;gap:.5rem;align-items:center;background:#f5f7ff;border:1px solid #dde6ff;border-radius:999px;padding:.35rem .8rem;font-weight:700}
.tour.muted{opacity:.6}
.grid{display:grid;gap:8px}
.row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(72px,.9fr) auto auto;gap:8px;align-items:center;border:1px solid #eef2f7;border-radius:10px;background:#fff;padding:8px}
.name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.edit-btn{background:#f0f3f8;border:1px solid #e0e6ef;border-radius:10px;padding:.55rem .6rem;cursor:pointer;min-height:44px}
.score{width:100%;text-align:right;padding:.55rem .6rem;border:1px solid #d9dfe8;border-radius:8px}
.score:focus{outline:none;border-color:var(--colorBtn)}
.total{min-width:5.5ch;text-align:right;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--colorBtn);color:#fff;border:none;border-radius:12px;padding:.95rem 1.1rem;min-height:52px;font-weight:700;cursor:pointer}
.btn.secondary{background:#eef2f7;color:#0a0a0a}
.btn.warn{background:#e63946}
.btn.small{min-height:40px;padding:.5rem .8rem}
.actions{display:grid;gap:8px;margin-top:10px}
@media(min-width:640px){.actions{grid-template-columns:repeat(3,1fr)}}
.settings{position:fixed;left:12px;bottom:12px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #e1e6ef;box-shadow:0 6px 18px rgba(0,0,0,.12);cursor:pointer;z-index:1000}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:1100}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:10px;z-index:1200}
.modal[open]{display:flex}
.backdrop[open]{display:block}
.card{width:min(640px,92vw);max-height:calc(100dvh - 24px);overflow:auto;background:#fff;border-radius:12px;padding:14px;box-shadow:0 14px 36px rgba(0,0,0,.22)}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.kv{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.ver{margin-top:8px;padding-top:8px;border-top:1px dashed #e3e7ef;opacity:.85}
.miss{border-color:#e63946!important;box-shadow:0 0 0 3px rgba(230,57,70,.18)}

/* ===== POPUP DE FIN GÉANTE ===== */
.fun{
  font-size:1.2rem;
  line-height:1.6;
  text-align:center;
  padding:10px 0;
}
.fun .winner{
  display:block;
  font-size:clamp(2rem, 15vw, 4rem);
  font-weight:900;
  letter-spacing:-0.5px;
  margin:20px 0 15px;
  background:linear-gradient(135deg, #f5af19, #f12711);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:2px 2px 10px rgba(241,39,17,0.3);
  animation:tada 0.9s ease-in-out 2;
}
.fun .tada{display:inline-block;animation:none}
@keyframes tada{
  0%,100%{transform:scale(1)}
  20%{transform:scale(1.08) rotate(-2deg)}
  40%{transform:scale(1.12) rotate(1deg)}
  60%{transform:scale(1.08) rotate(-1deg)}
  80%{transform:scale(1.04)}
}
.fun .criterion{display:block;margin-top:20px;font-size:1rem;opacity:0.8}

/* ===== Vue setup ===== */
.setup .h2{margin:.2rem 0 6px;font-size:1.1rem}
.mode-select{display:flex;gap:18px;margin:8px 0;flex-wrap:wrap}
.pane.hidden{display:none}
.list{display:grid;gap:8px;margin:8px 0}
.input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.input input{width:100%;min-width:0;padding:.5rem .6rem;border:1px solid #d9dfe8;border-radius:8px}
.hint{font-size:.9rem;opacity:.7}
.editlist{display:grid;gap:8px}
.editrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,auto);gap:8px;align-items:center}
.app-footer{position:fixed;bottom:5px;right:10px;font-size:.75rem;color:#666;opacity:.7;z-index:999;background:rgba(255,255,255,.65);border-radius:6px;padding:2px 4px}

/* Force l'affichage/masquage des vues */
#setupView.hidden, #gameView.hidden{display:none !important}
#gameView:not(.hidden){display:block !important}

@media(max-width:640px){
  .app{
    margin:6px 6px 44px;
    padding:10px;
    border-radius:12px;
    min-height:calc(100svh - 52px);
    max-height:calc(100svh - 52px);
  }
  @supports (height:100dvh){
    .app{min-height:calc(100dvh - 52px);max-height:calc(100dvh - 52px)}
  }
  .brand{font-size:20px}
  .head{align-items:flex-start}
  .tour{padding:.3rem .65rem;font-size:.95rem}
  .mode-select{flex-direction:column;gap:8px}
  .row{grid-template-columns:minmax(0,1fr) minmax(68px,84px) minmax(44px,auto) 44px;gap:6px;padding:7px}
  .score{padding:.45rem .5rem}
  .btn{min-height:48px;padding:.75rem .85rem}
  .btn.small{min-height:44px}
  .settings{width:48px;height:48px;left:8px;bottom:8px}
}