body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.kbd { border:1px solid rgb(229 231 235); border-bottom-width:2px; border-radius:.5rem; padding:.125rem .375rem; font-size:.75rem; }
.skeleton { background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.12), rgba(0,0,0,.05)); background-size: 300% 100%; animation: shine 1.2s linear infinite; }
@keyframes shine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.flag-area { width: 640px; height: 400px; max-width: 100%; display: grid; place-items: center; background: rgb(241 245 249); border-radius: 1rem; margin-left:auto; margin-right:auto; position: relative; overflow:hidden; }
.flag-img { width: 560px; height: 360px; max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,.1)); }
@media (max-width: 768px){ .flag-area { height: 300px; } .flag-img { height: 260px; } }
button:disabled { opacity:.5; cursor:not-allowed; }
input:disabled, select:disabled { opacity:.75; background-color: rgb(248 250 252) !important; cursor: not-allowed; }
/* Emplacements pubs (placeholders) */
.ad-slot { border:1px dashed #cbd5e1; background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px); color:#334155; font-size:.85rem; text-align:center; display:grid; place-items:center; border-radius:0.75rem; }
.ad-slot.small { min-height: 90px; }
.ad-slot.banner { min-height: 120px; }
.ad-slot .label { opacity:.8; }
/* Modal bug report */
.modal-mask { background: rgba(2,6,23,.6); }

/* Header mobile: icônes à la place des labels sous 480px */
header .max-w-6xl #btnStart .icon,
header .max-w-6xl #btnPause  .icon,
header .max-w-6xl #btnReset  .icon { display: none !important; }
header .max-w-6xl #btnStart .label,
header .max-w-6xl #btnPause  .label,
header .max-w-6xl #btnReset  .label { display: inline !important; }
@media (max-width: 480px) {
  header .max-w-6xl #btnStart .icon,
  header .max-w-6xl #btnPause  .icon,
  header .max-w-6xl #btnReset  .icon { display: inline !important; font-size: 1.1rem; line-height: 1; }
  header .max-w-6xl #btnStart .label,
  header .max-w-6xl #btnPause  .label,
  header .max-w-6xl #btnReset  .label { display: none !important; }
  header .max-w-6xl > .flex:last-child { max-width: 100%; display:flex; align-items:center; flex-wrap:nowrap; column-gap:.4rem; overflow:hidden; }
  header .max-w-6xl > .flex:last-child .text-slate-500,
  header .max-w-6xl > .flex:last-child .text-xs { display:none; }
  #timer { font-size:.95rem !important; line-height:1; padding:0 .2rem; }
  header .max-w-6xl > .flex:last-child > button { flex:1 1 0; min-width:0; max-width:32%; height:34px; padding:0 .5rem; font-size:.95rem; line-height:1; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 360px) {
  header .max-w-6xl > .flex:last-child > button { height:32px; font-size:.85rem; padding:0 .45rem; max-width:31.5%; }
  #timer { font-size:.9rem !important; }
}