teambuilding-game |Tú

* { box-sizing: border-box; } body { margin: 0; background: #000 url("https://raw.githubusercontent.com/huyvu15/teambuilding-design-game-planet/main/frontend/image/Image/Image/bg.png") center / cover no-repeat fixed; color: #fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; } .game-screen { position: relative; min-height: 100vh; overflow: hidden; } .bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .stage { position: relative; z-index: 1; min-height: 100vh; padding: 12px; } .galaxy-title { position: fixed; left: 50%; top: 47%; transform: translate(-50%, -50%); max-width: min(80vw, 520px); width: auto; height: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 16px 18px rgba(0,0,0,0.6)); } .planets { list-style: none; margin: 0; padding: 0; position: relative; min-height: calc(100vh - 180px); /* sẽ được tinh chỉnh bởi JS */ } .planet { position: absolute; display: flex; align-items: center; justify-content: center; width: var(--size, 96px); height: var(--size, 96px); transform: scale(var(--scale, 1)); transition: transform 200ms ease; } .planet .img { position: absolute; width: 100%; height: auto; transition: opacity 200ms ease; } .planet .planet-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 12px; background: rgba(5, 10, 30, 0.75); color: #f5f7ff; font-weight: 700; font-size: 12px; line-height: 1.2; text-align: center; letter-spacing: 0.6px; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,0.6); pointer-events: none; display: none; max-width: 120px; word-break: break-word; } .planet.show-message .planet-message { display: block; } .planet .dark { opacity: 1; } .planet .lit { opacity: 0; } .planet.lit .lit, .planet.current .lit { opacity: 1; } .planet.lit .dark, .planet.current .dark { opacity: 0; } .planet .arrow { position: absolute; top: -18px; width: 28px; height: auto; display: none; } .planet.current .arrow { display: block; } .message-box { position: fixed; left: 0; right: 0; height: var(--messageBoxHeight); /* bottom: 24px; */ /* top: auto; */ display: grid; justify-items: center; align-content: end; row-gap: 12px; z-index: 2; } .message-box__layer { position: relative; display: grid; place-items: center; } .message-box__layer--input { margin-bottom: 8px; } .message-box__layer--ranking { margin-top: 12px; } .message-box__input.hidden { display: none; } .message-box.hidden { display: none; } .message-box .input-bg { width: min(92vw, 320px); height: auto; display: block; } .message-input { position: absolute; width: calc(min(92vw, 320px) - 48px); transform: translateY(-6px); padding: 10px 14px; border: none; outline: none; background: transparent; color: #e6ecff; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; } .send-btn { background: none; border: 0; padding: 0; cursor: pointer; } .send-btn img { width: 120px; height: auto; display: block; } .planet.current { position: fixed !important; top: auto !important; left: 50% !important; right: auto !important; bottom: var(--current-bottom, 80px) !important; transform: translateX(-50%) scale(var(--scale, 1.25)) !important; z-index: 2; width: 150px !important; height: 150px !important; } .planet.current .img { width: 100%; } .planet.current .arrow { top: -32px; width: 34px; } .planet.selected { outline: 3px solid #7b5bfc; outline-offset: 4px; border-radius: 50%; } .planet.selectable { filter: brightness(1.1); transition: filter 200ms ease; } .planet.selectable:hover { filter: brightness(1.3); transform: scale(1.05); } .choose-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: none; place-items: center; z-index: 20; } .choose-modal.show { display: grid; } .choose-modal__box { position: relative; width: min(92vw, 520px); aspect-ratio: 520 / 220; display: grid; place-items: center; } .choose-modal__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.5)); } .choose-modal__content { position: relative; width: 100%; padding: 24px 28px 18px; display: grid; justify-items: center; gap: 14px; } .choose-modal__text { margin: 0; color: #e6ecff; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; text-align: center; } .choose-modal__actions { display: flex; align-items: center; gap: 16px; } .choose-btn { background: none; border: 0; padding: 0; cursor: pointer; position: relative; } .choose-btn img { display: block; width: 140px; height: auto; } .choose-btn span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #3a1f00; font-weight: 900; letter-spacing: 0.8px; } .topbar { position: fixed; top: 0; left: 0; right: auto; display: flex; align-items: center; justify-content: flex-start; gap: 8px; z-index: 6; } .pill { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 999px; font-size: 14px; color: #fff; } .pill--button { border: none; background: rgba(255, 255, 255, 0.92); color: #050505; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; padding: 0; } .pill--button:hover, .pill--button:focus-visible { background: rgba(255, 255, 255, 1); transform: translateY(-1px); outline: none; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); } .back-button { width: 60px; height: 60px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); } .back-button__icon svg { width: 68%; height: 68%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); } .back-button:hover, .back-button:focus-visible { transform: translateY(-1px) scale(1.04); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .planet[data-planet="2"] { top: 3vh; left: 23vw; --size: 100px; --scale: 1; } .planet[data-planet="3"] { top: 16vh; left: -7vw; --size: 85px; --scale: 0.95; } .planet[data-planet="4"] { top: 3vh; left: 70vw; --size: 98px; --scale: 0.93; } /* Phải trên */ .planet[data-planet="5"] { top: 23vh; left: 28vw; --size: 85px; --scale: 0.85; } /* Giữa trên giữa */ .planet[data-planet="6"] { top: 30vh; left: 2vw; --size: 96px; --scale: 0.9; } /* Trái giữa */ .planet[data-planet="7"] { top: 20vh; left: 56vw; --size: 88px; --scale: 0.95; } /* Phải giữa */ .planet[data-planet="8"] { top: 30vh; left: 78vw; --size: 90px; --scale: 0.92; } /* Phải dưới */ .planet[data-planet="9"] { top: 55vh; left: 2vw; --size: 98px; --scale: 0.95; } /* Giữa dưới trái */ .planet[data-planet="10"] { top: 52vh; left: 65vw; --size: 130px; --scale: 0.98; } /* Hành tinh lớn ở giữa dưới */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .planet .img { animation: spin var(--spin, 36s) linear infinite; will-change: transform; } .planet[data-planet="1"] { --spin: 40s; } .planet[data-planet="2"] { --spin: 34s; } .planet[data-planet="3"] { --spin: 28s; } .planet[data-planet="4"] { --spin: 38s; } .planet[data-planet="5"] { --spin: 30s; } .planet[data-planet="6"] { --spin: 32s; } .planet[data-planet="7"] { --spin: 26s; } .planet[data-planet="8"] { --spin: 36s; } .planet[data-planet="9"] { --spin: 24s; } .planet[data-planet="10"] { --spin: 42s; } .win-popup { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 30; pointer-events: none; } .win-popup img { max-width: min(80vw, 420px); width: 100%; height: auto; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6)); } .win-popup.show { display: flex; animation: win-popup-fade 0.3s ease forwards; } @keyframes win-popup-fade { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .popup { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); z-index: 50; opacity: 1; transition: opacity 0.3s ease; } .popup.hidden { opacity: 0; pointer-events: none; } .popup-content { position: relative; width: 90%; max-width: 280px; padding: 28px 36px; border-radius: 16px; text-align: center; background: rgba(20, 24, 40, 0.8); border: 1px solid rgba(120, 180, 255, 0.4); color: #e0e6ff; box-shadow: 0 0 25px rgba(120, 180, 255, 0.3), 0 0 60px rgba(80, 150, 255, 0.2); backdrop-filter: blur(10px); animation: fadeInUp 0.5s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .close-btn { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(120, 180, 255, 0.2); color: #e0e6ff; font-size: 22px; line-height: 32px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .close-btn:hover { background: rgba(120, 180, 255, 0.35); transform: scale(1.05); } #popupTitle { font-size: 24px; font-weight: 700; margin: 0 0 12px; text-shadow: 0 0 10px #5ec8ff, 0 0 20px #5ec8ff; letter-spacing: 1px; } .typing { margin: 0; white-space: pre-wrap; line-height: 1.6; font-size: 17px; color: #dfe8ff; text-shadow: 0 0 6px rgba(120, 180, 255, 0.4); } .rules-popup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .rules-popup.show { opacity: 1; pointer-events: auto; } .rules-popup__content { position: relative; width: min(92vw, 420px); display: flex; flex-direction: column; align-items: center; gap: 16px; } .rules-popup__logo { width: min(80%, 280px); height: auto; z-index: 2; } .rules-popup__body { position: relative; width: 100%; display: flex; justify-content: center; } .rules-popup__bg { width: 100%; height: auto; display: block; } .rules-popup__text { position: absolute; padding: 10% 16%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: justify; color: #fff; } .rules-popup__text h2 { margin: 0; font-size: clamp(20px, 4vw, 28px); letter-spacing: 1px; font-weight: 700; } .rules-popup__text p { font-size: clamp(14px, 3vw, 16px); line-height: 1.4; max-width: 320px; } .planet-tooltip { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); display: none; align-items: center; justify-content: center; pointer-events: none; min-width: 80px; } .planet-tooltip.show { display: flex; } .planet-tooltip__bg { /* width: 110px; */ height: auto; display: block; } .planet-tooltip__text { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); color: #1d1f29; font-weight: 700; font-size: 10px; line-height: 1.2; letter-spacing: 0.4px; text-transform: uppercase; max-width: 90px; text-align: center; word-break: break-word; } .ranking-panel { position: relative; display: grid; place-items: center; transform: translateY(0); } .ranking-panel.hidden { display: none; } .ranking-panel__bg { width: min(92vw, 340px); height: auto; display: block; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); transform: translateY(8px); } .ranking-panel__content { position: absolute; inset: 0; padding: 18% 18% 24%; display: grid; align-content: center; justify-items: center; gap: 10px; color: #e6ecff; text-align: center; } .ranking-panel__title { margin: 0; font-size: clamp(17px, 3.6vw, 22px); letter-spacing: 1px; } .ranking-panel__row { margin: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; font-weight: 700; letter-spacing: 1.2px; font-size: clamp(15px, 3.1vw, 19px); } .ranking-panel__row span:last-child { color: #ffe082; } .startGameBtn { background: linear-gradient(180deg, #ffde8a 0%, #ff7f2f 100%); border: 2px solid #ffb23a; color: #4b2000; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; padding: 12px 40px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); transition: all 0.2s ease; } .startGameBtn:hover { transform: scale(1.05); background: linear-gradient(180deg, #ffe299 0%, #ff9d4d 100%); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .startGameBtn:active { transform: scale(0.97); background: linear-gradient(180deg, #ffce70 0%, #ff6a00 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }

Galaxy Education - Planets