* { box-sizing: border-box }
body.menu-body {
  margin: 0; min-height: 100vh; display: flex; background: #10261d; color: #fff;
  font-family: system-ui, sans-serif;
}
.home-button {
  position: fixed; top: 12px; left: 12px; color: #fff; text-decoration: none; display: flex; gap: 6px;
  align-items: center; background: #0004; padding: 8px 12px; border-radius: 10px
}
.container { margin: auto; text-align: center; padding: 24px; max-width: 560px; width: 100% }
h1 { font-size: clamp(28px, 6vw, 44px); margin: 0 0 6px }
.subtitle { opacity: .85; margin: 0 0 24px }
.modes { display: grid; gap: 12px; margin-bottom: 20px }
.mode {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px;
  background: #feb854; color: #222; text-decoration: none; border: 3px solid transparent
}
.mode b { font-size: 22px }
.mode span { font-size: 14px; opacity: .8 }
.mode.last { border-color: #fff }
.mode:hover, .mode:focus-visible { filter: brightness(1.08) }
.note { margin: 0; padding: 10px 14px; border-radius: 12px; background: #0004; font-size: 14px }
.mode:focus-visible, .home-button:focus-visible { outline: 3px solid #ffdc00; outline-offset: 2px }
.mode:active { transform: scale(.98) }
.mode.saved span::after { content: ' · partie en cours'; font-weight: 700 }

/* V6 : adversaire, personnalisation, modales (style V5 : bleu ciel, coins arrondis, flou) */
:root { --line: rgba(80,190,240,.28); --accent: #5bc8f5; --txt: #e0f4ff; --pale: #8dc8e8 }
.seg { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: #0004 }
.seg button { flex: 1; min-height: 44px; padding: 8px 10px; border: 2px solid transparent; border-radius: 10px; background: none; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer; transition: background .2s, transform .1s }
.seg button:hover { background: rgba(255,255,255,.1) }
.seg button:active { transform: scale(.97) }
.seg button[aria-checked="true"] { background: #feb854; color: #222; border-color: #fff }
.cfg { display: block; width: 100%; min-height: 44px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(91,200,245,.12); color: var(--txt); font: 700 15px system-ui, sans-serif; cursor: pointer; transition: background .2s, transform .1s }
.cfg small { font-weight: 400; opacity: .85 }
.cfg:hover { background: rgba(91,200,245,.28) }
.cfg:active { transform: scale(.98) }
.seg button:focus-visible, .cfg:focus-visible, .btn:focus-visible, .x:focus-visible, .sw:focus-within { outline: 3px solid #ffdc00; outline-offset: 2px }
.ov { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(1,6,18,.82); backdrop-filter: blur(6px); z-index: 10 }
.ov[hidden] { display: none }
.modal { position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; padding: 24px 20px; border-radius: 22px; text-align: left; background: linear-gradient(160deg, #0a1f3a, #030f22); border: 1px solid var(--line); box-shadow: 0 24px 64px rgba(0,0,0,.7); font: 14px/1.45 system-ui, sans-serif; color: var(--txt) }
.modal h2 { margin: 0 0 8px; font-size: 21px; color: var(--accent); text-align: center }
.modal p { margin: 0 0 12px; color: var(--pale); text-align: center }
.x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--pale); font-size: 18px; cursor: pointer }
.x:hover { background: rgba(255,255,255,.1) }
.sw { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: background .2s, border-color .2s }
.sw:hover { background: rgba(255,255,255,.06) }
.sw:has(input:checked) { border-color: var(--accent); background: rgba(91,200,245,.14) }
.sw input { appearance: none; flex: none; width: 46px; height: 26px; margin: 2px 0 0; border-radius: 13px; background: #445; position: relative; cursor: pointer; transition: background .2s }
.sw input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s }
.sw input:checked { background: #0a8fd6 }
.sw input:checked::after { transform: translateX(20px) }
.sw span { display: flex; flex-direction: column; gap: 2px }
.sw b { font-size: 15px } .sw small { color: var(--pale); font-size: 13px }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 12px }
.btn { display: block; width: 100%; min-height: 44px; padding: 12px 18px; border: 0; border-radius: 14px; font: 700 16px system-ui, sans-serif; color: #fff; text-align: center; cursor: pointer; background: linear-gradient(135deg, #0077b6, #023e8a); box-shadow: 0 6px 18px rgba(0,119,182,.4); transition: filter .2s, transform .1s }
.btn:hover { filter: brightness(1.12) } .btn:active { transform: scale(.97) }
.btn.sec { background: rgba(255,255,255,.07); box-shadow: none; border: 1px solid rgba(255,255,255,.14) }
@media (max-height: 460px) { .modal { padding: 14px 16px } .stack { flex-direction: row; flex-wrap: wrap } .stack .btn { flex: 1 1 140px } }