:root{--primary-blue: #0ea5e9;--primary-blue-dark: #0369a1;--primary-blue-light: #38bdf8;--accent-yellow: #84cc16;--accent-yellow-light: #a3e635;--accent-orange: #4d7c0f;--accent-gold: #65a30d;--game-green: #10B981;--game-red: #EF4444;--game-purple: #8B5CF6;--game-cyan: #06B6D4;--game-pink: #EC4899;--white: #FFFFFF;--black: #000000;--gray-light: #F3F4F6;--gray: #9CA3AF;--gray-dark: #374151;--gradient-main: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);--gradient-gold: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-gold) 100%);--shadow-button: 0 4px 0 var(--accent-orange);--shadow-card: 0 8px 32px rgba(0, 0, 0, .3);--shadow-text: 2px 2px 0 rgba(0, 0, 0, .3);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-xxl: 32px;--font-family: "Cairo", sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 22px;--font-size-xxl: 28px;--font-size-hero: 36px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background:var(--gradient-main);color:var(--white);min-height:100vh;min-height:100dvh;overflow-x:hidden;line-height:1.4;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right)}body{overscroll-behavior-y:contain}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}h1{font-size:var(--font-size-hero)}h2{font-size:var(--font-size-xxl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 20px;font-family:var(--font-family);font-size:var(--font-size-md);font-weight:700;text-decoration:none;border:2px solid var(--black);border-radius:var(--radius-md);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;transform:skew(-2deg);position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation;min-height:48px}.btn-primary{background:var(--accent-yellow);color:var(--black);box-shadow:var(--shadow-button)}.btn-primary:hover,.btn-primary:focus{transform:skew(-2deg) translateY(2px);box-shadow:0 2px 0 var(--accent-orange)}.btn-primary:active{transform:skew(-2deg) translateY(4px);box-shadow:0 0 0 var(--accent-orange)}.btn-secondary{background:var(--primary-blue-light);color:var(--white);box-shadow:0 4px 0 var(--primary-blue-dark)}.btn-secondary:hover,.btn-secondary:focus{transform:skew(-2deg) translateY(2px);box-shadow:0 2px 0 var(--primary-blue-dark)}.btn-secondary:active{transform:skew(-2deg) translateY(4px);box-shadow:0 0 0 var(--primary-blue-dark)}.btn span{transform:skew(2deg)}.btn-block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.game-card{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:var(--space-md);text-align:center;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-gold)}.game-card:hover,.game-card:focus{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--accent-yellow)}.game-card:active{transform:translateY(0)}.game-card-icon{font-size:36px;margin-bottom:var(--space-sm);line-height:1}.game-card-title{font-size:var(--font-size-lg);font-weight:800;margin-bottom:2px;line-height:1.2}.game-card-desc{font-size:var(--font-size-xs);opacity:.75;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.game-card-players{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-sm);padding:3px 10px;background:#ffffff26;border-radius:var(--radius-xl);font-size:var(--font-size-xs)}.header{text-align:center;padding:var(--space-lg) var(--space-md) var(--space-md)}.logo{font-size:var(--font-size-hero);font-weight:800;text-shadow:2px 2px 0 rgba(0,0,0,.3);margin-bottom:2px;background:var(--gradient-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}.tagline{font-size:var(--font-size-md);opacity:.9}.container{width:100%;max-width:500px;margin:0 auto;padding:0 var(--space-md)}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);padding:var(--space-sm) 0 var(--space-lg)}.input{width:100%;padding:var(--space-md);font-family:var(--font-family);font-size:var(--font-size-md);border:2px solid rgba(255,255,255,.4);background:#0000004d;color:var(--white);text-align:center;border-radius:var(--radius-md);min-height:48px;-webkit-appearance:none;appearance:none;opacity:1;transform:translateZ(0);transition:all .2s ease}.input::placeholder{color:#fff9;opacity:1}.input:focus{outline:none;border-color:var(--accent-yellow);background:#00000080;transform:scale(1.02)}.room-code{display:inline-block;padding:var(--space-md) var(--space-lg);background:var(--accent-yellow);color:var(--black);font-size:var(--font-size-xxl);font-weight:800;letter-spacing:6px;border-radius:var(--radius-md);border:2px solid var(--black);font-family:Courier New,monospace}.player-list{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;padding:var(--space-sm) 0}.player-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:#fff3;border-radius:var(--radius-xl);font-size:var(--font-size-sm);border:1px solid rgba(255,255,255,.3)}.player-chip.host{background:var(--accent-yellow);color:var(--black);border-color:var(--black)}.text-center{text-align:center}.text-right{text-align:right}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.flex-center{display:flex;align-items:center;justify-content:center}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.animate-pulse{animation:pulse 2s infinite}.animate-float{animation:float 3s ease-in-out infinite}.timer{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}.icon-correct,.icon-skip,.icon-forbidden{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-weight:700;font-size:14px;font-family:Arial,sans-serif}.icon-correct{background:#22c55e;color:#fff}.icon-correct:before{content:"✓"}.icon-skip{background:#f59e0b;color:#fff}.icon-skip:before{content:"»"}.icon-forbidden{background:#ef4444;color:#fff}.icon-forbidden:before{content:"✕"}.icon-wrong{background:#ef4444;color:#fff}.icon-wrong:before{content:"✕"}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:16px 16px;pointer-events:none;z-index:-1}@media(min-width:481px){:root{--font-size-hero: 42px;--font-size-xxl: 32px;--font-size-xl: 24px;--font-size-lg: 20px;--space-md: 16px;--space-lg: 24px}.container{max-width:600px}.games-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.game-card{padding:var(--space-lg);min-height:150px}.game-card-icon{font-size:48px}.btn{padding:14px 28px;font-size:var(--font-size-lg)}}@media(min-width:769px){:root{--font-size-hero: 48px}.container{max-width:700px}.games-grid{grid-template-columns:repeat(3,1fr)}}@media(display-mode:standalone){body{-webkit-user-select:none;user-select:none}}button,.btn,.game-card{-webkit-user-select:none;user-select:none}html{scroll-behavior:smooth}:focus-visible{outline:2px solid var(--accent-yellow);outline-offset:2px}:focus:not(:focus-visible){outline:none}.room-code-input::placeholder{letter-spacing:normal!important;opacity:.7}input[style*=letter-spacing]::placeholder{letter-spacing:normal!important}body.streamer-mode-active .room-code,body.streamer-mode-active .room-code-input,body.streamer-mode-active .header-room-code,body.streamer-mode-active .room-code-header,body.streamer-mode-active .room-code-btn{filter:blur(8px);transition:filter .2s ease;cursor:help}body.streamer-mode-active .room-code:hover,body.streamer-mode-active .room-code-input:hover,body.streamer-mode-active .header-room-code:hover,body.streamer-mode-active .room-code-header:hover,body.streamer-mode-active .room-code-btn:hover,body.streamer-mode-active .room-code:focus,body.streamer-mode-active .room-code-input:focus{filter:none;cursor:text}