/* © WatchJunk */
/* coded by nya & suzunay */

:root{
--blue:#00a3ff;
--blue-dark:#0084d1;
--black:#0a0a0a;
--black-card:#1a1a1a;
--white:#ffffff;
--white-70:rgba(255,255,255,0.7);
--white-50:rgba(255,255,255,0.5);
--red:#e74c3c;
--font-title:'Oswald',sans-serif;
--font-body:'Poppins',sans-serif;
--radius:12px
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{
font-family:var(--font-body);
background-color:var(--black);
background-image:repeating-linear-gradient(45deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .03) 1px, transparent 1px, transparent 30px);
color:var(--white);
min-height:100vh;
line-height:1.5;
-webkit-font-smoothing:antialiased
}
.game-container {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}
.game-header-section{
position:relative;
margin-bottom:30px;
}
.game-header-section h1{
text-align:center;
font-size:2.5rem;
margin-bottom:10px;
color:#e0e7ff;
}
.game-main{padding-top:0;min-height:100vh;height:100vh}
#gameScreen{
height:100vh;
background:linear-gradient(180deg,#0a1520 0%,var(--black) 100%);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.game-ui{
display:flex;
flex-direction:column;
align-items:center;
padding:15px;
width:100%;
max-width:420px;
height:100%
}
.game-hud{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
padding:12px 18px;
background:rgba(30,41,59,0.6);
border:1px solid rgba(0,163,255,0.25);
border-radius:var(--radius);
margin-bottom:15px
}
.hud-score{
font-family:var(--font-title);
font-size:1.5rem;
font-weight:700;
color:var(--blue);
display:flex;
align-items:center;
gap:8px
}
.countdown-overlay{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.85);
z-index:150;
pointer-events:none;
}
.countdown-overlay.active{
display:flex;
}
.countdown-number{
font-family:var(--font-title);
font-size:8rem;
font-weight:700;
color:var(--blue);
text-shadow:0 0 12px rgba(0,163,255,0.8);
animation:countdownPulse 0.5s ease-out;
}
@keyframes countdownPulse{
0%{transform:scale(0.5);opacity:0}
50%{transform:scale(1.2)}
100%{transform:scale(1);opacity:1}
}
.hud-highscore{display:flex;flex-direction:column;align-items:center;flex:1}
.hud-highscore small{font-size:0.65rem;color:var(--white-50);text-transform:uppercase}
.hud-highscore span{font-family:var(--font-title);font-size:1.3rem;font-weight:600;color:#33b5ff}
.hud-lives{display:flex;gap:6px}
.hud-lives i{color:var(--red);font-size:1.1rem}
.hud-lives i.empty{opacity:0.3}
.game-canvas-container{
flex:1;
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:0
}
#gameCanvas{
background:linear-gradient(180deg,#1a2a3a 0%,#0a1520 100%);
border-radius:var(--radius);
border:2px solid rgba(0,163,255,0.3);
width:100%;
max-width:420px;
height:auto;
aspect-ratio:360/520;
touch-action:none;
-webkit-tap-highlight-color:transparent
}
.game-hint{
padding:12px;
font-size:0.85rem;
color:var(--white-50);
display:flex;
align-items:center;
gap:10px
}
.arrow-keys{
display:inline-flex;
flex-direction:column;
align-items:center;
gap:3px;
margin-left:4px;
vertical-align:middle;
}
.arrow-key-row{
display:flex;
gap:3px;
justify-content:center;
}
.arrow-key{
width:32px;
height:32px;
border:2px solid var(--white-50);
border-radius:4px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
background:rgba(255,255,255,0.05);
transition:all 0.15s ease;
}
.arrow-key.active{
background:rgba(0,163,255,0.3);
border-color:var(--blue);
box-shadow:0 0 10px rgba(0,163,255,0.5);
transform:scale(0.95);
}
.arrow-key-row:first-child{
margin-bottom:3px;
}
.esc-key{
font-size:0.75rem;
font-weight:600;
padding:8px 12px;
min-width:60px;
height:auto;
font-family:var(--font-body);
text-transform:none;
letter-spacing:normal;
color:var(--white);
}
.esc-key:hover{
background:rgba(0,163,255,0.3);
border-color:var(--blue);
}
.esc-key:active{
transform:scale(0.95);
}
.mobile-pause-btn{
position:fixed;
top:15px;
right:15px;
width:50px;
height:50px;
background:rgba(30,41,59,0.9);
border:2px solid rgba(0,163,255,0.4);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
color:var(--blue);
font-size:1.5rem;
cursor:pointer;
z-index:100;
transition:all 0.3s;
}
.mobile-pause-btn:hover{
background:rgba(0,163,255,0.2);
border-color:var(--blue);
transform:scale(1.05);
}
.mobile-pause-btn:active{
transform:scale(0.95);
}
#gameOverOverlay{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.92);
z-index:200;
padding:20px
}
#gameOverOverlay.active{display:flex}
#pauseOverlay{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.92);
z-index:200;
padding:20px
}
#pauseOverlay.active{display:flex}
.gameover-box{
background:rgba(30,41,59,0.95);
border:1px solid rgba(0,163,255,0.3);
border-radius:var(--radius);
padding:32px 24px;
max-width:520px;
width:100%;
text-align:center
}
.gameover-icon{
width:84px;height:84px;
background:linear-gradient(135deg,var(--blue),var(--blue-dark));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:2.1rem;
color:var(--white);
margin:0 auto 18px;
box-shadow:0 8px 10px rgba(0,163,255,0.3)
}
.gameover-box h2{
font-family:var(--font-title);
font-size:1.9rem;
font-weight:700;
color:var(--white);
margin-bottom:18px;
letter-spacing:2px
}
.score-box{
background:rgba(30,41,59,0.8);
border:2px solid var(--blue);
border-radius:var(--radius);
padding:22px 34px;
margin:0 auto 18px;
max-width:280px
}
.score-box small{
display:block;
font-size:0.85rem;
color:var(--white-70);
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:8px
}
.score-box small:last-child{margin-top:8px;margin-bottom:0}
.score-big{
font-family:var(--font-title);
font-size:4rem;
font-weight:700;
color:var(--blue);
line-height:1;
text-shadow:0 0 10px rgba(0,163,255,0.5)
}
.gameover-buttons{
display:flex;
gap:12px;
justify-content:center;
margin-top:18px;
flex-wrap:wrap
}
/* cd-btn mapped to hj-btn system – keep game-specific overrides only */
#gameOverOverlay .hj-btn-primary,
#gameOverOverlay .hj-btn-secondary{
box-shadow:none;
cursor:pointer !important;
}
#gameOverOverlay .hj-btn-primary:hover,
#gameOverOverlay .hj-btn-secondary:hover{
box-shadow:none;
cursor:pointer !important;
}
@media (max-width:480px){
html{font-size:14px}
.game-main{padding-top:0;height:100vh}
#gameScreen{height:100vh}
.game-ui{padding:8px;max-width:100%}
.game-hud{padding:10px 14px;margin-bottom:10px;min-height:50px;flex-wrap:nowrap}
.hud-score{font-size:1.2rem}
.hud-highscore{display:flex !important;flex:1;min-width:0}
.hud-highscore small{font-size:0.7rem;white-space:nowrap}
.hud-highscore span{font-size:1.3rem;font-weight:700;color:#33b5ff !important;white-space:nowrap;overflow:visible}
.hud-lives{display:flex;gap:4px;flex-shrink:0}
.hud-lives i{font-size:1rem}
.game-hud>div:last-child{display:none}
.game-hint{display:none}
.mobile-pause-btn{display:flex !important}
.score-big{font-size:2.8rem}
.gameover-box{padding:24px 18px}
.gameover-icon{width:70px;height:70px;font-size:1.8rem}
.gameover-box h2{font-size:1.6rem}
.score-box{padding:18px 24px;max-width:240px}
.countdown-number{font-size:6rem}
#gameCanvas{max-width:100%;width:100%}
.game-canvas-container{min-height:0;flex:1;display:flex;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}
.game-modal {
    padding: 0 !important;
    margin: 0 !important;
}
.game-modal .modal-dialog {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
}
.game-modal .modal-content {
    background: var(--black);
    border: none;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.game-modal .modal-header {
    display: none;
}
.game-modal .modal-body {
    padding: 0;
    flex: 1;
    overflow: hidden;
    margin: 0;
}
@media (max-width:480px){
.game-modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;border-radius:0}
.game-modal .modal-dialog{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;max-width:none}
.game-modal .modal-content{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;border-radius:0}
.game-modal .modal-body{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0}
.game-container{width:100vw;height:100vh;height:100dvh;margin:0;padding:0;position:absolute;top:0;left:0}
}
.game-modal #gameScreen,
.game-modal #gameScreen * {
    cursor: none !important;
}
#gameOverOverlay,
#gameOverOverlay * {
    cursor: auto !important;
}
#pauseOverlay {
    cursor: auto !important;
}
#pauseOverlay button:hover,
#pauseOverlay button:hover * {
    cursor: pointer !important;
}