.ludoHome { position: absolute; z-index: 9999; top: 0; right: 0; left: 0; bottom: 0; background-color: #9797979e; } #ludo, .topbar, .ludoHome .bg-primary { width: 400px; max-width: 100%; height: 400px; background: #fff; margin: auto; } .ludoHome .bg-primary { height: 25px; margin-top: 5px; background-color: #337ab7; } .hideLudo .topbar, .hideLudo #ludo, .hideLudo .exitludo { display: none; } .hideludo, .exitludo { width: 12%; height: 100%; background-image: url(../img/d01.png); background-repeat: no-repeat; background-position: bottom; background-size: contain; min-width: 50px; } .exitludo { float: right; background-image: url(../img/d00.png); } .hideLudo.ludoHome { width: 60px; height: 0; top: 85%; } .hideLudo .hideludo { background-image: url(../img/d02.png); width: 100%; } .gameOver { width: 100%; text-align: center; line-height: 50px; font-size: 30px !important; height: 30%; margin-bottom: 7px; border-bottom: 1px solid #337ab7; } .win1, .win2, .win3 { width: 100%; height: 100%; } .gameOver .ov1, .gameOver .ov2, .gameOver .ov3 { width: 30%; height: 100%; border-radius: 50%; margin: auto; background-size: contain; display: block; background-position: center; background-repeat: no-repeat; } .gameOver .ov3 { background-image: url(../img/ov3.png), url(../img/users/3.png); } .gameOver .ov2 { background-image: url(../img/ov2.png), url(../img/users/2.png); } .gameOver .ov4 { background-image: url(../img/ov2.png), url(../img/users/2.png); } .gameOver .topic { float: right; width: 85%; height: 100%; } .gameOver .w1:nth-child(1), .gameOver .w2:nth-child(1), .gameOver .w3:nth-child(1), .gameOver .w4:nth-child(1) { background-color: #faebd7; text-align: center; line-height: 26px; } .gameOver .topic > div { margin: 5px; text-align: right; } .ludo-board { overflow: hidden; background: rgba(255, 255, 255, 0.56); border-radius: 20px; border: none; width: 99%; height: 99%; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); margin: 0.5%; float: left; background-image: url(../img/b2.png); background-size: 100%; background-position: center; background-repeat: no-repeat; } .red-home { grid-column: 1/7; grid-row: 1/7; } .green-home { grid-column: 10/16; grid-row: 1/7; } .blue-home { grid-column: 1/7; grid-row: 10/16; } .yellow-home { grid-column: 10/16; grid-row: 10/16; } .winner-home { border-radius: 16px; grid-column: 7/10; grid-row: 7/10; } .step { display: flex; justify-content: center; align-items: center; font-size: 0; } .step .player { position: absolute; } .step .player:nth-child(1) { margin-top: 0; margin-left: 0; } .step .player:nth-child(2) { margin-top: 3px; margin-left: 3px; } .step .player:nth-child(3) { margin-top: 6px; margin-left: 6px; } .step .player:nth-child(4) { margin-top: 6px; margin-left: 6px; } .step .player:nth-child(5) { margin-top: 9px; margin-left: 9px; } .step .player:nth-child(6) { margin-top: 12px; margin-left: 12px; } .step .player:nth-child(7) { margin-top: 15px; margin-left: 15px; } .white-box { width: 80%; height: 80%; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; } .player-room { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 60%; height: 60%; margin: 20%; } .super-center { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .player { display: flex; justify-content: center; align-items: center; height: 25px; width: 25px; border-radius: 50%; } .timer { display: flex; justify-content: center; align-items: center; border-radius: 10px; padding: 10px; color: #fff; font-weight: 700; font-size: large; display: inline-block; } .test_controller button { width: 45px; height: 45px; float: left; } .lobby { padding: 20px 40px; } .control3 button { width: 40px; height: 40px; } .control3 .lb { margin-top: 15px; display: flex; justify-content: start; align-items: center; font-size: larger; } .f { display: flex; align-items: center; } .cun { border-radius: 10px; border: 1px solid #000; padding: 0 5px; } .bot { margin-left: 10px; background-color: transparent; border: none; background-repeat: no-repeat; background-size: contain; } .botoff { background-image: url(../img/nobot.png); } .boton { background-image: url(../img/bot.png); } .playersel { background-image: url(../img/bat.png); background-position: center; background-repeat: no-repeat; background-size: contain; } .player { background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #ffffff00; } .player[data-color='red'] { background-image: url(../img/red.png); } .player[data-color='green'] { background-image: url(../img/green.png); } .player[data-color='blue'] { background-image: url(../img/blue.png); } .player[data-color='yellow'] { background-image: url(../img/yellow.png); } .ludoHome.blue .step .player[data-color='blue'], .ludoHome.green .step .player[data-color='green'], .ludoHome.red .step .player[data-color='red'], .ludoHome.yellow .step .player[data-color='yellow'] { z-index: 9; } .white-box.super-center > .player-room > .player { height: 70%; width: 70%; margin-bottom: -1px; margin: 15%; } .icon { height: 15px; } .icon2 { height: 50px; } .topbar { height: 50px; display: table; justify-content: space-between; background-color: #fff; } .sidebar { display: flex; flex-direction: column; flex-wrap: wrap; gap: 20px; } .test_controller { float: left; width: 100%; background-color: #fff; margin-top: -1.5px; } .winner-home { padding: 15px; display: grid; grid-template-columns: 1fr 1fr; } .stack .player { position: absolute; } .stack .player:nth-child(1) { margin-top: 4px; margin-left: 4px; } .stack .player:nth-child(2) { margin-top: 8px; margin-left: 8px; } .stack .player:nth-child(3) { margin-top: 12px; margin-left: 12px; } .stack .player:nth-child(4) { margin-top: 16px; margin-left: 16px; } .rwh.stack .player:nth-child(1) { margin-top: 0; margin-left: -16px; } .rwh.stack .player:nth-child(2) { margin-top: 29px; margin-left: -16px; } .rwh.stack .player:nth-child(3) { margin-top: 14px; margin-left: -2px; } .rwh.stack .player:nth-child(4) { margin-top: 14px; margin-left: -14px; } .ywh.stack .player:nth-child(1) { margin-top: 5px; margin-left: 20px; } .ywh.stack .player:nth-child(2) { margin-top: -27px; margin-left: 20px; } .ywh.stack .player:nth-child(3) { margin-top: -11px; margin-left: 5px; } .ywh.stack .player:nth-child(4) { margin-top: -11px; margin-left: 19px; } .gwh.stack .player:nth-child(1) { margin-top: -15px; margin-left: 5px; } .gwh.stack .player:nth-child(2) { margin-top: -15px; margin-left: -25px; } .gwh.stack .player:nth-child(3) { margin-top: 0; margin-left: -10px; } .gwh.stack .player:nth-child(4) { margin-top: -12px; margin-left: -10px; } .bwh.stack .player:nth-child(1) { margin-top: 18px; margin-left: 0; } .bwh.stack .player:nth-child(2) { margin-top: 18px; margin-left: 27px; } .bwh.stack .player:nth-child(3) { margin-top: 5px; margin-left: 13px; } .bwh.stack .player:nth-child(4) { margin-top: 17px; margin-left: 13px; } .winner-home .player { width: 22px; height: 22px; } #dice, #dice2 { height: 50px; width: 50px; background-color: transparent; border: none; background-position: center; background-repeat: no-repeat; background-size: contain; } #dice2 { display: none; } .ludoHome.yellow #dice2, .ludoHome.green #dice { float: right; } .ludoHome.red #dice, .ludoHome.green #dice, .ludoHome.yellow #dice2, .ludoHome.blue #dice2 { display: inline; } .ludoHome.yellow #dice, .ludoHome.blue #dice, .ludoHome.red #dice2, .ludoHome.green #dice2 { display: none; } .dice { width: 40px; height: 40px; display: none; background-repeat: no-repeat; background-position: center; background-size: cover; } .dice.activ { display: block; } .nard0 { background-size: 115%; background-image: url(../img/d0.png); } .nard1 { background-image: url(../img/d1.png); } .nard2 { background-image: url(../img/d2.png); } .nard3 { background-image: url(../img/d3.png); } .nard4 { background-image: url(../img/d4.png); } .nard5 { background-image: url(../img/d5.png); } .nard6 { background-image: url(../img/d6.png); } .player_1 .player[data-itme='1'], .player_2 .player[data-itme='2'], .player_3 .player[data-itme='3'], .player_4 .player[data-itme='4'] { animation: circle-size 0.3s cubic-bezier(0.03, 1.58, 0, -2.04) infinite alternate; } @keyframes circle-size { from { box-shadow: 1px 0 5px 5px #fff; } to { box-shadow: 1px 0 3px 3px #fff; } } @keyframes boxtop { 0% { margin-left: -100%; background-color: green; } 25% { margin-left: 0%; background-color: green; } 50% { margin-left: 0%; background-color: green; } 51% { margin-left: 0%; background-color: #e7c600; } 75% { margin-left: 0%; background-color: #e7c600; } 76% { margin-left: 0%; background-color: red; } 100% { margin-left: 0%; background-color: red; } } @keyframes boxright { 0% { margin-top: -100%; background-color: green; } 25% { margin-top: -100%; background-color: green; } 50% { margin-top: 0%; background-color: green; } 51% { margin-top: 0%; background-color: #e7c600; } 75% { margin-top: 0%; background-color: #e7c600; } 76% { margin-top: 0%; background-color: red; } 100% { margin-top: 0%; background-color: red; } } @keyframes boxbottom { 0% { margin-right: -100%; background-color: green; } 50% { margin-right: -100%; background-color: green; } 51% { margin-right: -100%; background-color: #e7c600; } 75% { margin-right: 0%; background-color: #e7c600; } 76% { margin-right: 0%; background-color: red; } 100% { margin-right: 0%; background-color: red; } } @keyframes boxleft { 0% { margin-top: 0%; background-color: #fff; } 75% { margin-top: 0%; background-color: #fff; } 76% { margin-top: 0%; background-color: red; } 100% { margin-top: -99%; background-color: red; } } /* .ludobox.blue { background-image: url(../img/users/1.png); background-size: 100% 100%; filter: contrast(0.5); } .ludobox.green { background-image: url(../img/users/3.png); background-size: 100% 100%; filter: contrast(0.5); } */ .ludobox { width: 50px; height: 50px; margin: 2px; float: right; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } .boxtop, .boxbottom { width: 100%; height: 3px; background-color: red; display: none; } .boxright, .boxleft { width: 3px; height: 100%; background-color: red; display: none; } .ludobox.activ .boxtop, .ludobox.activ .boxbottom, .ludobox.activ .boxright, .ludobox.activ .boxleft { display: block; } .boxtop { animation: boxtop 10s linear; float: left; } .boxright { margin-left: -4px; animation: boxright 10s linear; float: right; } body > div.ludoHome.red > div.topbar > div.ludobox.red.activ > div.boxleft { margin-top: -100%; animation: boxleft 10s linear; float: none; } .boxbottom { animation: boxbottom 10s linear; margin-top: -2px; float: right; } .ludoUser { width: 45px; height: 45px; background-color: #fff; margin: 2px; float: none; background-repeat: no-repeat; background-position: center; background-size: cover; display: none; } .ludoUser.red { background-image: url(../img/users/1.png); } .ludoUser.green { background-image: url(../img/users/2.png); } .ludoUser.yellow { background-image: url(../img/users/3.png); } .ludoUser.blue { background-image: url(../img/users/4.png); } :root { --go-w: 400px; --go-radius: 16px; --go-bg: rgba(15, 18, 25, 0.72); --go-panel: rgba(255, 255, 255, 0.1); --go-border: rgba(255, 255, 255, 0.18); --go-text: #f7f7fb; --go-sub: #c9c9d3; --gold: #f0c419; --silver: #c0c6cf; --bronze: #d89b6c; --accent: #3b82f6; } .ludo-over-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(59, 130, 246, 0.09), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(250, 204, 21, 0.08), transparent 60%), var(--go-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--go-text); direction: rtl; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Cairo', sans-serif; } .ludo-over-card { width: min(92%, var(--go-w)); border-radius: var(--go-radius); border: 1px solid var(--go-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); padding: 18px 18px 16px; position: relative; overflow: hidden; } .ludo-over-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } .ludo-over-title { font-weight: 800; font-size: 20px; letter-spacing: 0.2px; } .ludo-over-sub { color: var(--go-sub); font-size: 13px; margin-top: 2px; text-align: center; } .medal { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.05)), linear-gradient(135deg, #fff, #fafafa); position: relative; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.35); } .medal.gold { background: conic-gradient(from 20deg, #f8e38a, #f3c21d, #fff1a6, #f8e38a); box-shadow: 0 0 0 4px rgba(240, 196, 25, 0.2), 0 12px 28px rgba(240, 196, 25, 0.35); } .medal.silver { background: conic-gradient(from 20deg, #e7edf5, #c7ced9, #f7fafc, #e7edf5); box-shadow: 0 0 0 4px rgba(192, 198, 207, 0.2), 0 12px 28px rgba(192, 198, 207, 0.35); } .medal.bronze { background: conic-gradient(from 20deg, #f3c6a1, #d49364, #ffe1c8, #f3c6a1); box-shadow: 0 0 0 4px rgba(216, 155, 108, 0.2), 0 12px 28px rgba(216, 155, 108, 0.35); } .medal span { font-weight: 900; font-size: 22px; color: #1a1a1a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } .win-hero { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 8px; } .wreath { width: 88px; height: 88px; border-radius: 18px; position: relative; overflow: hidden; background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 60%), rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.35); } .wreath:before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><g fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="2"><circle cx="70" cy="70" r="66"/></g></svg>') center/cover no-repeat; pointer-events: none; } .avatar { position: absolute; inset: 6px; border-radius: 12px; background-size: cover; background-position: center; } .go-msg { text-align: center; font-size: 16px; margin: 2px 0 10px; } .go-msg .hl { font-weight: 800; } .go-actions { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 6px; } .btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); } .ribbon { position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); opacity: 0.9; } .shimmer { position: absolute; inset: -60% -60% auto -60%; height: 120%; transform: rotate(8deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { from { transform: translateX(-30%) rotate(8deg); } to { transform: translateX(30%) rotate(8deg); } } .ludoRequestOverlay { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%), rgba(10, 12, 20, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); direction: rtl; font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #fff; } .ludoRequestCard { width: min(92vw, 420px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); padding: 18px 16px 14px; text-align: center; position: relative; overflow: hidden; } .ludoRequestCard::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); opacity: 0.95; } .ludoRequestTitle { font-size: 18px; font-weight: 800; margin-bottom: 6px; } .ludoRequestText { font-size: 14px; opacity: 0.95; } .ludoRequestActions { margin-top: 12px; display: flex; justify-content: center; } .ludoRequestBtn { appearance: none; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 12px; font-weight: 800; background: #fff; color: #d61f1f; box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25); transition: transform 0.08s ease, box-shadow 0.18s ease, opacity 0.18s ease; min-width: 140px; } .ludoRequestBtn:hover { box-shadow: 0 10px 24px rgba(255, 255, 255, 0.35); } .ludoRequestBtn:active { transform: translateY(1px); } .ludoConfrontOverlay { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%), rgba(10, 12, 20, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); direction: rtl; color: #fff; font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .ludoConfrontCard { width: min(92vw, 420px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); padding: 18px 16px 14px; text-align: center; position: relative; overflow: hidden; } .ludoConfrontCard::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); opacity: 0.95; } .lc-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; } .lc-sub { font-size: 14px; opacity: 0.95; margin-bottom: 12px; } .lc-user { display: flex; align-items: center; gap: 10px; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 8px 10px; margin: 8px 0 12px; } .lc-avatar { width: 42px; height: 42px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .lc-name { font-weight: 900; font-size: 15px; } .lc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 2px; } .lc-btn { appearance: none; border: 0; cursor: pointer; border-radius: 12px; padding: 10px 14px; font-weight: 800; min-width: 130px; transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease; } .lc-btn:active { transform: translateY(1px); } .lc-btn-accept { background: linear-gradient(180deg, #5ea3ff, #3b82f6); color: #fff; box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35); } .lc-btn-accept:hover { box-shadow: 0 10px 24px rgba(59, 130, 246, 0.45); } .lc-btn-decline { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .lc-btn-decline:hover { background: rgba(255, 255, 255, 0.14); } #xo-win-overlay { position: fixed; inset: 0; display: none; place-items: center; z-index: 4000; background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 70%); backdrop-filter: blur(2px); } .xo-win-card { padding: 18px 22px; border-radius: 16px; text-align: center; color: #fff; background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(244, 63, 94, 0.22)); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-family: 'Cairo', system-ui; min-width: 260px; } .xo-win-title { font-size: 22px; font-weight: 900; letter-spacing: 0.4px; } .xo-win-sub { font-size: 14px; opacity: 0.9; margin-top: 6px; } @keyframes xo-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .xo-animate-pop { animation: xo-pop 0.35s ease-out both; } :root { --bg: #0b1020; --grid: #2d3b8e; --glow1: #ff3b6b; --glow2: #22d3ee; --panel: #0f1629; --text: #e6edf7; } #xo-modal { display: none; position: fixed; inset: 0; z-index: 3000; } #xo-modal::before { content: ''; position: absolute; inset: 0; background: #5959595c; } #xo-neon-bg { position: absolute; inset: 0; opacity: 0.35; pointer-events: none; overflow: hidden; background: #c4c4c48f; } #xo-card { position: relative; margin: auto; inset: 0; display: flex; flex-direction: column; width: min(420px, 92vw); border-radius: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(135deg, #40404f, #5a5a6e, #767692, #a5a5c7); } #xo-header { display: flex; align-items: center; justify-content: space-between; padding: 4px; color: var(--text); background: linear-gradient(135deg, rgb(93 93 113), rgba(34, 211, 238, 0.14)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #xo-title { font-family: 'el messiri'; font-weight: 300 !important; letter-spacing: 0.5px; } #xo-close { border: 0; background: transparent; color: var(--text); opacity: 0.85; cursor: pointer; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; } #xo-close:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; } #xo-body { padding: 14px 14px 16px; } #xo-status { color: var(--text); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 8px 12px !important; margin: 0 auto 12px; display: inline-block; font-weight: 800 !important; font-size: 13px !important; min-width: 200px; text-align: center; display: contents; } #xo-board { --cell: 110px; display: grid; grid-template-columns: repeat(3, var(--cell)); gap: 12px; justify-content: center; margin-top: 8px; position: relative; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.5)); } @media (max-width: 480px) { #xo-board { --cell: 92px; gap: 10px; } } .xo-cell { width: var(--cell); height: var(--cell); border-radius: 18px; background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.08)); display: grid; place-items: center; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease; border: 1px solid #a3a3a3; } .xo-cell:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } .xo-cell.is-disabled { opacity: 0.6; cursor: not-allowed !important; } .xo-img { width: 72%; height: 72%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.22)); } .xo-x .xo-img { filter: drop-shadow(0 0 14px rgba(244, 63, 94, 0.65)); } .xo-o .xo-img { filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.65)); } #xo-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%); mix-blend-mode: soft-light; opacity: 0.35; animation: scan 6s linear infinite; } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .games-duo { display: flex; gap: 6px; align-items: stretch; margin-top: 3px; } .games-duo .btn { flex: 1 1 50%; } .xo-name { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; max-width: 10ch; } .xo-turn-mine { animation: xoPulse 1.6s ease-in-out infinite; } .xo-chip.O { background: #9976c1; } .xo-chip.X { background: #3a8eb6; } @keyframes xoPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.35) inset, 0 0 16px rgba(76, 201, 240, 0.25); } 50% { box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.5) inset, 0 0 24px rgba(76, 201, 240, 0.35); } } #xo-body { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 8px; } .xo-avatars { display: flex; align-items: center; gap: 10px; padding-inline: 6px; min-height: 44px; } .xo-avatars-top { justify-content: flex-start; } .xo-avatars-bottom { justify-content: flex-end; } .xo-av { width: 48px; height: 48px; background: #222 center/cover no-repeat; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } @media (min-width: 640px) { .xo-av { width: 56px; height: 56px; } } .xo-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.2; direction: rtl; } .xo-name { display: inline-block; max-width: 10ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; unicode-bidi: plaintext; } .xo-you { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); } .xo-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; font-weight: 800; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); } .xo-turn-badge { display: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); } .xo-avatars.is-turn .xo-turn-badge { display: inline-flex; } @keyframes xoPulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(76, 201, 240, 0.35) inset; } 50% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(76, 201, 240, 0.55) inset; } } .xo-avatars.is-turn .xo-av { animation: xoPulse 1.4s ease-in-out infinite; border-color: rgba(76, 201, 240, 0.55); } .ludobox.yellow { --dur: 10s; position: relative; } .ludobox.yellow .boxtop { position: absolute; left: 0; right: 0; top: 0; height: 3px; } .ludobox.yellow .boxright { position: absolute; top: 0; right: 0; bottom: 0; width: 3px; } .ludobox.yellow .boxbottom { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; } .ludobox.yellow .boxleft { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; margin: 0; } .ludobox.yellow .boxtop, .ludobox.yellow .boxright, .ludobox.yellow .boxbottom, .ludobox.yellow .boxleft { background: transparent !important; overflow: hidden; } .ludobox.yellow .boxtop::before, .ludobox.yellow .boxright::before, .ludobox.yellow .boxbottom::before, .ludobox.yellow .boxleft::before { content: ''; position: absolute; background: green; } @keyframes grow-top { 0% { width: 0%; } 25% { width: 100%; } 100% { width: 100%; } } @keyframes grow-right { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 100% { height: 100%; } } @keyframes grow-bottom { 0% { width: 0%; } 50% { width: 0%; } 75% { width: 100%; } 100% { width: 100%; } } @keyframes grow-left { 0% { height: 0%; } 75% { height: 0%; } 100% { height: 100%; } } @keyframes col-shift { 0%, 50% { background: green; } 50.01%, 75% { background: #e7c600; } 75.01%, 100% { background: red; } } .ludobox.yellow .boxtop::before { top: 0; left: 0; height: 100%; width: 0%; animation-name: grow-top, col-shift; animation-duration: var(--dur), var(--dur); animation-timing-function: linear, linear; animation-iteration-count: 1, 1; animation-fill-mode: forwards, forwards; } .ludobox.yellow .boxright::before { right: 0; top: 0; width: 100%; height: 0%; animation-name: grow-right, col-shift; animation-duration: var(--dur), var(--dur); animation-timing-function: linear, linear; animation-iteration-count: 1, 1; animation-fill-mode: forwards, forwards; } .ludobox.yellow .boxbottom::before { bottom: 0; right: 0; height: 100%; width: 0%; animation-name: grow-bottom, col-shift; animation-duration: var(--dur), var(--dur); animation-timing-function: linear, linear; animation-iteration-count: 1, 1; animation-fill-mode: forwards, forwards; } .ludobox.yellow .boxleft::before { left: 0; bottom: 0; width: 100%; height: 0%; animation-name: grow-left, col-shift; animation-duration: var(--dur), var(--dur); animation-timing-function: linear, linear; animation-iteration-count: 1, 1; animation-fill-mode: forwards, forwards; } .winner-home .player { box-shadow: none !important; filter: none !important; outline: none !important; }