/* RestoLounge — Console rétro « Pocket » (jeux pour patienter) */
html, body.arcade{ height:100%; margin:0; background:#111618; overscroll-behavior:none; }
body.arcade{ font-family:'Outfit', system-ui, sans-serif; color:#fff; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.console{ position:relative; min-height:100%; height:100dvh; max-width:520px; margin:0 auto; display:flex; flex-direction:column;
  background: linear-gradient(180deg, #14191b 0%, #14191b 49%, #0f7a85 49.2%, #0b5d66 78%, #08474f 100%); overflow:hidden; }

/* Écran */
.bezel{ flex: 0 0 auto; margin: calc(34px + env(safe-area-inset-top, 0px)) 14px 0; padding: 12px 14px 10px; border-radius: 16px 16px 46px 16px;
  background: linear-gradient(160deg, #3a4146, #23282c); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.45); }
.bezel-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:9.5px; letter-spacing:2.5px; color:#a9b8bb; font-weight:700; }
.led{ width:8px; height:8px; border-radius:50%; background:#3b4a4d; box-shadow: inset 0 1px 1px rgba(0,0,0,.4); transition: background .3s, box-shadow .3s; }
.led.on{ background:#ff6f4f; box-shadow: 0 0 8px #ff6f4f; }
.led.ready{ background:#5df2a0; box-shadow: 0 0 10px #5df2a0; animation: ledBlink .8s ease-in-out infinite; }
@keyframes ledBlink{ 50%{ opacity:.35; } }
.screen-wrap{ background:#0e2523; border-radius:6px; padding:6px; box-shadow: inset 0 0 0 2px #0a1b1a, inset 0 6px 14px rgba(0,0,0,.5); }
#screen{ display:block; width:100%; aspect-ratio: 160 / 144; image-rendering: pixelated; image-rendering: crisp-edges; border-radius:2px; background:#e3f2d6; }
.bezel-brand{ margin-top:8px; font-size:13px; font-style:italic; color:#cfd9db; letter-spacing:.5px; }
.bezel-brand b{ font-style:normal; color:#ff9a7d; font-weight:800; }

/* Suivi de commande */
.order-pill{ position:absolute; top: calc(4px + env(safe-area-inset-top, 0px)); left:50%; transform: translateX(-50%); z-index:5; display:flex; align-items:center; gap:7px;
  max-width:92%; padding:5px 12px; border-radius:999px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); font-size:11.5px; font-weight:600; white-space:nowrap; backdrop-filter: blur(6px); }
.order-pill[hidden]{ display:none; }
.op-dot{ width:7px; height:7px; border-radius:50%; background:#ffd166; box-shadow:0 0 6px #ffd166; animation: ledBlink 1.4s infinite; flex-shrink:0; }
.order-pill.ready{ background: #2e9e6a; border-color: #5df2a0; animation: pillPop .6s cubic-bezier(.34,1.56,.64,1); }
.order-pill.ready .op-dot{ background:#fff; box-shadow:0 0 8px #fff; }
@keyframes pillPop{ 0%{ transform: translateX(-50%) scale(.6); } 100%{ transform: translateX(-50%) scale(1); } }

/* Manette */
.pad-area{ flex:1; position:relative; display:flex; align-items:center; justify-content:space-between; padding: 22px 26px 4px; }
.dpad{ position:relative; width:150px; height:150px; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
.dpad .d{ border:none; padding:0; background: linear-gradient(180deg, #f2ece0, #d9d1c1); position:relative; touch-action:none; }
.dpad .up{ grid-column:2; grid-row:1; border-radius:12px 12px 0 0; }
.dpad .left{ grid-column:1; grid-row:2; border-radius:12px 0 0 12px; }
.dpad .mid{ grid-column:2; grid-row:2; background: #d9d1c1; }
.dpad .mid::after{ content:""; position:absolute; inset:28%; border-radius:50%; background: radial-gradient(circle at 40% 35%, #cfc6b4, #bdb3a0); }
.dpad .right{ grid-column:3; grid-row:2; border-radius:0 12px 12px 0; }
.dpad .down{ grid-column:2; grid-row:3; border-radius:0 0 12px 12px; }
.dpad .d::before{ content:""; position:absolute; left:50%; top:50%; width:0; height:0; border:9px solid transparent; transform: translate(-50%, -50%); opacity:.45; }
.dpad .up::before{ border-bottom-color:#9a917f; margin-top:-5px; }
.dpad .down::before{ border-top-color:#9a917f; margin-top:5px; }
.dpad .left::before{ border-right-color:#9a917f; margin-left:-5px; }
.dpad .right::before{ border-left-color:#9a917f; margin-left:5px; }
.dpad .d.on{ background: linear-gradient(180deg, #d8d0bf, #c4baa6); }

.ab{ position:relative; width:150px; height:150px; transform: rotate(-22deg); }
.ab button{ position:absolute; width:70px; height:70px; border-radius:50%; border:none; font: 800 26px 'Outfit', sans-serif; touch-action:none;
  box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.35); transition: transform .06s, box-shadow .06s; }
.ab .btn-a{ right:0; top:14px; background: radial-gradient(circle at 35% 30%, #ff9f7d, #ff6f4f 60%, #e2533a); color: rgba(255,255,255,.85); }
.ab .btn-b{ left:0; bottom:14px; background: radial-gradient(circle at 35% 30%, #fff6e0, #f2e6c8 60%, #d8c9a4); color: rgba(120,100,60,.6); }
.ab button.on{ transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.2); }

.sys{ position:relative; display:flex; align-items:flex-start; gap:22px; padding: 6px 24px calc(22px + env(safe-area-inset-bottom, 0px)); }
.sys-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.sys-btn:first-child{ margin-right:auto; }
.sys-btn button{ width:52px; height:16px; border-radius:10px; border:none; background: linear-gradient(180deg, #e9e2d3, #bfb5a1); box-shadow: 0 3px 0 rgba(0,0,0,.3); transform: rotate(-22deg); touch-action:none; }
.sys-btn:first-child button{ width:34px; height:34px; border-radius:50%; transform:none; }
.sys-btn button.on{ transform: rotate(-22deg) translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.sys-btn:first-child button.on{ transform: translateY(2px); }
.sys-btn span{ font-size:11px; font-weight:800; letter-spacing:1.2px; color: rgba(255,255,255,.75); }
.grille{ position:absolute; right:26px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display:flex; gap:6px; transform: rotate(-22deg); }
.grille i{ width:5px; height:34px; border-radius:3px; background: rgba(0,0,0,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }

@media (max-height: 700px){
  .dpad, .ab{ width:126px; height:126px; }
  .ab button{ width:60px; height:60px; font-size:22px; }
  .pad-area{ padding-top:12px; }
}
@media (min-width: 560px){ .console{ border-radius: 0 0 40px 40px; box-shadow: 0 0 60px rgba(0,0,0,.6); } }

/* Coque : la partie manette suit directement l'écran (bord arrondi), sans bande vide */
.console{ background:#14191b; }
.pad-area{ margin-top:16px; border-radius: 34px 34px 0 0; background: linear-gradient(180deg, #13909b, #0f7a85 40%, #0b5d66); box-shadow: inset 0 3px 0 rgba(255,255,255,.18); }
.sys{ background: linear-gradient(180deg, #0b5d66, #08474f); }
.pad-area::before{ content:"RESTOLOUNGE"; position:absolute; top:10px; left:50%; transform: translateX(-50%); font-size:12px; font-weight:800; letter-spacing:4px; color: rgba(255,255,255,.35); }