/* Layout commun aux écrans joueur/admin : plein écran, largeur max centrée sur grand écran. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #e8e0d8; font-family: 'DM Sans', sans-serif; }

.app-frame { width: 100%; max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; background: #F1BFB6; overflow: hidden; position: relative; }

.blob-red { position: absolute; width: 260px; height: 260px; background: #C2392B; border-radius: 50%; opacity: 0.13; top: -90px; right: -70px; animation: drift 9s ease-in-out infinite; pointer-events: none; z-index: 0; }
.blob-white { position: absolute; width: 140px; height: 140px; background: #fff; border-radius: 50%; opacity: 0.18; bottom: 110px; left: -40px; animation: drift 12s ease-in-out infinite reverse; pointer-events: none; z-index: 0; }
@keyframes drift { 0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-16px) scale(1.04);} }
.basil-deco { position: absolute; bottom: 58px; right: 14px; z-index: 1; opacity: 0.6; animation: sway 5s ease-in-out infinite; transform-origin: bottom center; pointer-events: none; }
@keyframes sway { 0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);} }

.top-bar { position: absolute; top: 0; left: 0; right: 0; text-align: center; padding: 14px 0 8px; z-index: 10; }
.top-bar span { font-size: 10px; font-weight: 300; font-style: italic; color: rgba(42,26,21,0.8); }
.footer { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 10; }
.footer a { font-size: 10px; font-weight: 300; font-style: italic; color: rgba(42,26,21,0.8); text-decoration: underline; cursor: pointer; }
.dot-sep { width: 3px; height: 3px; background: rgba(255,255,255,0.45); border-radius: 50%; }

.content-wrap { position: absolute; top: 56px; bottom: 52px; left: 0; right: 0; overflow: hidden; z-index: 5; }

.screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 0 28px; box-sizing: border-box; transition: transform 0.9s cubic-bezier(.77,0,.18,1), opacity 0.7s ease; }
.screen.active     { transform: translateX(0);     opacity: 1; pointer-events: all; }
.screen.exit-left  { transform: translateX(-110%); opacity: 0; pointer-events: none; }
.screen.exit-right { transform: translateX(110%);  opacity: 0; pointer-events: none; }
.screen.enter-left  { transform: translateX(-110%); opacity: 0; pointer-events: none; }
.screen.enter-right { transform: translateX(110%);  opacity: 0; pointer-events: none; }