@charset "UTF-8";
/* ====== RESET & BASE ====== */
* { box-sizing: border-box; }
html, body {
    padding:0; margin:0;
    background: #181e2b; color:#fff;
    font-family: 'Segoe UI', Arial, sans-serif;
}
h1 {
    color: #1860c2 !important;
    text-shadow: 0 2px 10px #e0eaff33;
    font-size: 1.6em;
    margin-bottom: 24px;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: .01em; }
a { color: #3399ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 20px 0;
    position: relative;
}
.title-row h1 {
    margin-bottom: 0;
    margin-right: 18px;
    flex: 1;
    font-size: 1.6em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.backhome-btn {
    background: #eaf3ff;
    border: none;
    color: #1976d2;
    border-radius: 7px;
    font-size: 1.16em;
    cursor: pointer;
    margin-right: 12px;
    box-shadow: 0 2px 12px #aacbf844;
    padding: 8px 13px;
    transition: background 0.15s, color 0.15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.backhome-btn:hover {
    background: #c7e5ff;
    color: #0b4e8e;
}

.site-logo {
    height: 48px;
    max-width: 86px;
    margin-left: 12px;
    margin-right: 0;
    object-fit: contain;
    border-radius: 13px;
    box-shadow: 0 2px 10px #aad3ff36;
}
@media (max-width: 600px) {
  .site-logo { height:32px; max-width: 54px;}
  .title-row { gap:8px;}
  .backhome-btn { padding:5px 7px; font-size:1em;}
  h1 { font-size:1em !important;}
}

/* ====== MAIN CONTAINER ====== */
.container {
    max-width: 1360px;
    margin: 36px auto 32px auto;
    padding: 0;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 24px #ddd;
    overflow: hidden;
}
#gamewrap {
    margin: 0 auto;
    padding: 24px 16px 18px 16px;
    background: #232b45;
    border-radius: 18px;
    box-shadow: 0 3px 24px #1d2538b8;
    max-width: 900px;
}

/* ====== MAIN FLEX LAYOUT ====== */
.main-flex {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}
.sidebar {
    min-width: 260px;
    max-width: 340px;
    background: #f3faff;
    border-right: 1.5px solid #e3f0fc;
    padding: 24px 10px 20px 10px;
    display: flex; flex-direction: column; gap: 16px;
}
.main-content {
    flex: 1; padding: 36px 42px 26px 42px;
    display: flex; flex-direction: column; align-items: stretch;
    min-width: 0;
}

/* ====== TOOLS BAR ====== */
.tools-bar {
    display: flex;
    flex-direction: column;
    gap: 17px;
}
.tools-bar label { font-size: 1.02em; font-weight: 500; color: #185bb3; margin-bottom: 6px; }
.tools-bar input, .tools-bar select {
    border-radius: 7px; border: 1.2px solid #b8b8b8; padding: 8px 14px;
    font-size: 1em; outline: none; width: 100%; margin-bottom:2px;
    box-sizing: border-box;
}
.tools-bar select { background: #fafdff; }

/* ====== INPUTS & SELECT ====== */
input[type="text"], select {
    border-radius: 7px;
    border: 1.3px solid #3399ff;
    padding: 8px 14px;
    font-size: 1.03em;
    background: #f6fcfe;
    color: #1c2747;
    margin: 0 2px;
    min-width: 120px;
    transition: border 0.15s;
}
input[type="text"]:focus, select:focus {
    border-color: #1976d2;
    outline: none;
}

/* ====== BUTTONS ====== */
button, .btn {
    padding: 8px 22px;
    border: none;
    background: #3399ff;
    color: #fff;
    border-radius: 8px;
    font-size: 1.04em;
    cursor: pointer;
    box-shadow: 0 1.5px 9px #2999e640;
    transition: background 0.18s, box-shadow 0.15s;
    margin-top: 9px;
}
button:hover, .btn:hover { background: #1976d2; }
#btnStart {
    display: inline-block;
    margin-bottom: 16px;
}

/* ====== GAME FRAME & CANVAS ====== */
.game-frame, #pacman-canvas {
    background: #222 url('../images/default_wait_bg.gif') center center/cover no-repeat;
    border: 2.5px solid #3399ff; border-radius: 18px;
    width: 100%;
    height: 640px;
    margin-bottom: 24px;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    min-height:320px; box-shadow:0 2px 24px #d5eaff26;
    transition:height 0.2s, background 0.22s;
    max-width: 100vw;
}
.game-frame.has-bg {
    background: #181e2b url('../images/game_play_bg.jpg') center center/cover no-repeat;
}
.game-frame .empty-msg { color:#ccc; font-size:1.18em; text-align:center; }

.dynamic-js-game {
    width: 100%; height: 100%; min-height: 320px;
    display: flex; align-items: center; justify-content: center;
    background: #181e2b;
    border-radius: 14px;
    position: relative;
    z-index: 1;
    animation: fadein 0.32s;
}
#jsGameCanvas {
    background: #101e2e;
    border-radius: 10px;
    box-shadow: 0 2px 14px #3399ff21;
    margin: 0 auto;
    display: block;
    max-width: 100%; max-height: 100%;
}

/* ====== SIDEBAR GAMES ====== */
.sidebar-games {
    flex: 1;
    overflow-y: auto;
    max-height: 70vh;
    margin-top: 14px;
    padding-right: 6px;
    scrollbar-width: thin;
}
.sidebar-games::-webkit-scrollbar { width: 7px; }
.sidebar-games::-webkit-scrollbar-thumb { background: #c8e4ff; border-radius: 9px; }
.sidebar-games::-webkit-scrollbar-track { background: transparent; }

.category-group {
    margin-bottom: 18px;
    background: #e7f1fa;
    border-radius: 12px;
    box-shadow: 0 1px 9px #d2ebff55;
}
.category-header {
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; color: #1668b6; background: #e7f1fa;
    font-size: 1.05em; padding: 8px 9px 6px 11px; border-radius:12px 12px 0 0;
    cursor: pointer; user-select: none;
    transition: background .16s;
}
.category-header:hover { background: #d3e7fa; }
.category-list {
    display: flex; flex-wrap: wrap; gap: 13px 10px;
    padding: 10px 8px 6px 8px;
}

/* ====== GAME ITEM ====== */
.game-item {
    width: 48%; max-width: 140px; min-width: 102px;
    min-height: 98px;
    text-align: center; cursor: pointer;
    background: #f6fbff;
    border: 1.5px solid #c9e3fa;
    padding: 10px 0 7px 0;
    border-radius: 12px;
    transition: all .18s;
    font-size: 1.04em;
    box-shadow:0 2px 7px #daeef7b4;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    color: #1c2747;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 0;
}
.game-item img {
    width: 54px; height: 54px; border-radius: 10px;
    margin-bottom: 8px; background: #fff;
    border: 2.5px solid #e3f1fc;
    box-shadow: 0 1.5px 10px #3399ff21;
    transition: box-shadow .2s, border .18s, transform .16s;
}
.game-item > div:first-child {
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 3px;
    transition: color .18s;
}
.game-item .tags {
    font-size:0.88em; color:#0b4e8e; margin-top:3px; opacity:.68;
}
.game-item.active, .game-item:hover {
    background: #3399ff; color: #fff; border-color: #3399ff;
    box-shadow:0 4px 14px #1976d230;
}
.game-item.active img, .game-item:hover img {
    border:2.5px solid #fff;
    box-shadow:0 4px 18px #3399ff70;
    transform: scale(1.08) rotate(-2deg);
}
.game-item.active > div:first-child,
.game-item:hover > div:first-child {
    color: #fff;
}

/* ====== POPUP ====== */
.popup {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.58);
    display: flex; align-items: center; justify-content: center;
    z-index: 1001;
}
.popup-content {
    background: #fff; color: #232b45;
    padding: 33px 23px 19px 23px;
    border-radius: 15px; min-width: 220px; max-width: 88vw;
    box-shadow: 0 3px 19px #23348e55;
    text-align: center; font-size: 1.12em;
}
.popup-content button {
    margin: 17px 0 2px 0;
}

/* ====== FULLSCREEN BUTTON ====== */
.fullscreen-btn {
    position: absolute; right: 18px; bottom: 18px;
    background: rgba(51,153,255,0.8);
    color: #fff; border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 1.06em;
    z-index: 5;
    transition: background 0.19s;
}
.fullscreen-btn:hover { background:#1976d2; }

/* ====== ANIMATION ====== */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ====== RESPONSIVE ====== */
@media (max-width: 1200px) {
    .container { max-width: 100vw;}
    .main-content { padding: 18px 7px 18px 7px;}
    .game-frame { height: 470px;}
    .sidebar { min-width:130px; padding:22px 8px 14px 8px;}
    .sidebar-games { max-height: 44vh; }
    .game-item { font-size: 0.96em; min-width: 85px; max-width: 120px; }
    .game-item img { width: 42px; height: 42px;}
}
@media (max-width: 900px) {
    .container, #gamewrap { max-width: 99vw; padding: 9px 2vw 12px 2vw; }
    .sidebar { padding:11px 5px 8px 5px; min-width:100px; }
    .main-content { padding: 8px 1vw 8px 1vw;}
    .game-frame { height: 52vw; min-height:160px;}
    .sidebar-games { max-height: 28vh; }
    .game-item { min-width: 68px; max-width: 96px;}
    .game-item img { width: 28px; height: 28px;}
}
@media (max-width: 700px) {
    .main-flex { flex-direction: column;}
    .sidebar { flex-direction:row; flex-wrap:wrap; border:none; border-bottom:1.5px solid #e3f0fc; min-width:0; max-width:100vw; padding:12px 4vw 6px 4vw;}
    .tools-bar { flex-direction:row; gap:7px; width:100vw;}
    .sidebar-games { max-height: 22vh; }
    .main-content { padding: 4vw 2vw 2vw 2vw; }
    .game-frame { height: 60vw; min-height:120px;}
    .game-item { min-width: 45px; max-width: 72px; font-size: 0.89em;}
    .game-item img { width: 22px; height: 22px;}
}
@media (max-width: 540px) {
    h2 { font-size:1.01em; }
    #pacman-canvas, .game-frame { width:99vw; max-width:99vw; }
    #guide { padding: 9px 7px; font-size:0.97em; }
    .sidebar { padding:4vw 2vw 4vw 2vw; }
    .game-item { min-width: 38px; max-width: 62px; }
    .game-item img { width: 18px; height: 18px;}
}
@media (max-width: 500px) {
    .game-frame { height: 66vw; min-height:100px;}
    .main-content { padding: 1vw; }
}