:root{
    --bg:#0f1720; /* dark background */
    --bg-rgb: 15,23,32;
    --card:#ffffff;
    --muted:#6b7280;
    --primary:#1e88e5;
    --accent:#10b981;
    --rating-fill:#FBBF24; /* amber/yellow for rating circles */
    --glass: rgba(255,255,255,0.06);
    --container-max:1100px;
    --radius:12px;
    /* hero height is responsive: min 320px, prefers 30vw, max 720px (increased for a larger hero) */
    --hero-height: clamp(320px, 30vw, 720px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,"Helvetica Neue",Arial;color:#0b1720;background:var(--bg);} 


.backdrop{
    position:fixed;left:0;right:0;top:0;z-index:0;background-color:transparent;padding:0;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* inner hero centered to content width and shorter; shows full image using contain */
.backdrop-inner{pointer-events:auto;width:100%;max-width:var(--container-max);height:var(--hero-height);border-radius:8px;overflow:hidden;background-position:center;background-repeat:no-repeat;background-size:cover;background-color:transparent;box-shadow:0 10px 40px rgba(2,6,23,0.6);position:relative;z-index:1} 

/* subtle vignette overlay on the hero to draw focus toward the center */
.backdrop-inner{position:relative}
.backdrop-inner::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* removed vignette so the hero image sits directly on the page background */
    background: none;
    filter: none;
    transition: none;
}

    /* soft halo behind the hero to feather its outer edges into the page background */
    /* remove halo behind hero */
    .backdrop-inner::before{display:none}

/* side fades to emulate letterbox feel (soft vignetting) */
.backdrop::before{content:"";position:absolute;inset:0;pointer-events:none;
    /* disable the extra backdrop overlay so the hero's inner fades control the edge blending
       (this prevents double gradients and visual edges). The page background is already black. */
    background: none;
}

/* If needed by JS, keep a clear state to slightly increase brightness */
.backdrop.clear{filter:brightness(1.05) saturate(1.06);transition:filter .25s ease}

/* When backdrop is 'clear' reduce the heavy side vignette so the image appears more revealed */
.backdrop.clear::before{background:linear-gradient(90deg, rgba(var(--bg-rgb),0.35) 0%, rgba(var(--bg-rgb),0.18) 8%, rgba(var(--bg-rgb),0) 24%, rgba(var(--bg-rgb),0) 76%, rgba(var(--bg-rgb),0.18) 92%, rgba(var(--bg-rgb),0.35) 100%);transition:background .22s ease}

.container{
    max-width:var(--container-max);
    margin:calc(var(--hero-height) - 40px) auto 48px; /* position below hero with overlap (reduced to start content higher) */
    padding:28px;
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.95));
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(2,6,23,0.6);
    position:relative;
    z-index:1;
}

/* Make the container slightly translucent if explicitly toggled */
.container.transparent{background: rgba(255,255,255,0.9);backdrop-filter: blur(3px);transition:background .28s ease}

.game-header{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}

#gameImage{width:200px;height:auto;border-radius:10px;object-fit:cover;border:1px solid rgba(0,0,0,0.06);box-shadow:0 6px 18px rgba(2,6,23,0.12)}

/* Cover box with title overlay similar to playedGames */
.cover-box{position:relative;width:200px}
.cover-box #gameImage{width:100%;height:auto;border-radius:10px}
.cover-title-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);color:#fff;padding:8px;border-radius:0 0 8px 8px;font-weight:700;text-align:center}

.game-info{padding-top:6px}
#gameName{font-size:28px;margin:0;color:#0b1320;font-weight:700}
#gameYear{font-size:14px;color:var(--muted);margin-top:6px}
#gameDescription{font-size:15px;color:#334155;margin-top:12px;line-height:1.5}

.meta-row{display:flex;gap:12px;align-items:center;margin-top:14px}
#averageRating{font-weight:700;color:#111827}

.actions{display:flex;gap:10px;flex-wrap:wrap}
button{background:var(--primary);color:white;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 6px 14px rgba(30,136,229,0.12);transition:transform .12s ease,box-shadow .12s ease}
button.secondary{background:transparent;color:var(--primary);border:1px solid rgba(30,136,229,0.15)}
button.ghost{background:transparent;color:var(--muted);border:1px solid rgba(0,0,0,0.06)}
button:hover{transform:translateY(-2px)}

.tabs{display:flex;gap:8px;margin-top:26px}
.tablink{background:transparent;border:none;padding:10px 14px;border-radius:10px;color:var(--muted);cursor:pointer}
.tablink.active{background:var(--glass);color:#0b1320;font-weight:700}

.tabcontent{margin-top:18px;background:transparent;padding:0}

/* Additional Info layout (two-column on desktop, stack on mobile) */
.additional-info-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start;margin-top:12px}
.meta-column{background:linear-gradient(180deg,#fff,#fbfdff);padding:14px;border-radius:10px;border:1px solid rgba(2,6,23,0.04);box-shadow:0 8px 20px rgba(2,6,23,0.04)}
.media-column{display:flex;flex-direction:column;gap:8px}
.info-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed rgba(2,6,23,0.03)}
.info-row:last-child{border-bottom:none}
.info-label{min-width:84px;color:var(--muted);font-weight:700}
.info-value{flex:1;color:#334155}
.info-value a{color:var(--primary);text-decoration:none}

/* Make genre/developer links look like subtle pills */
.info-value a{display:inline-block;margin:4px 6px 4px 0;padding:6px 10px;border-radius:999px;background:rgba(2,6,23,0.03);font-weight:600}
.info-value a:hover{background:rgba(30,136,229,0.08)}

.trailer-link{display:inline-block;padding:8px 12px;border-radius:8px;background:linear-gradient(180deg,var(--primary),#0b66b0);color:white;font-weight:700}

@media (max-width:980px){
    .additional-info-grid{grid-template-columns:1fr;}
    .meta-column{order:2}
    .media-column{order:1}
}

#reviewForm{margin-top:8px}
#reviewText{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(15,23,36,0.06);resize:vertical;min-height:100px}
#imageUpload{margin-top:8px}

.review-list{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.review{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(2,6,23,0.06);border:1px solid rgba(2,6,23,0.04)}
.review-header{display:flex;align-items:center;gap:12px}
.review-header img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.review-header strong{font-size:15px;color:#0b1320}
.review-text{color:#334155;margin-top:8px}
.review-image{max-width:100%;height:auto;border-radius:8px;margin-top:10px}
.review-tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.tag{background:rgba(30,136,229,0.12);color:var(--primary);padding:6px 10px;border-radius:999px;font-size:13px}
.review-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.like-btn{background:var(--accent);color:white;padding:8px 12px;border-radius:10px;border:none}

.progress-bar-container{width:100%;background:#f1f5f9;border-radius:10px;height:14px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#06b6a4);transition:width .36s ease}

.popup{display:none;position:fixed;inset:0;background:rgba(2,6,23,0.6);backdrop-filter:blur(4px);z-index:1200;}
.popup.show{display:flex;align-items:center;justify-content:center;overflow:auto}
.popup-content{width:100%;max-width:840px;background:linear-gradient(180deg,#fff,#fbfdff);padding:20px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.45);position:relative}
/* Ensure popup content never exceeds viewport height and becomes scrollable internally */
.popup-content{max-height:calc(100vh - 96px);overflow:auto}
.close{position:absolute;right:14px;top:10px;color:var(--muted);font-size:22px;border:none;background:transparent}

.add-post-btn{width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,var(--accent),#059669);border:none;color:white;font-size:22px}

.screenshots-container{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.screenshots-container .screenshot-wrapper{width:100%}
.screenshots-container img.screenshot{max-width:100%;height:auto;border-radius:8px;display:block}

/* Arrow buttons overlayed on the screenshot */
.main-screenshot-display{width:100%;display:block;border-radius:10px;overflow:hidden;position:relative}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(2,6,23,0.6);color:white;border:none;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 8px 20px rgba(2,6,23,0.4);z-index:50}
.nav-arrow.left{left:12px}
.nav-arrow.right{right:12px}
.nav-arrow:hover{transform:translateY(-50%) scale(1.04)}

/* Hero vote control: overlayed on the active screenshot (bottom-left) */
#heroVoteControl{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;align-items:center;z-index:80}
.hero-vote-btn{background:linear-gradient(180deg,var(--accent),#059669);color:white;border:none;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(16,185,129,0.12)}
.hero-vote-btn[disabled]{opacity:0.6;cursor:default;box-shadow:none}
.hero-vote-count{font-weight:700;color:var(--muted);background:rgba(255,255,255,0.9);padding:6px 8px;border-radius:8px}

/* Main screenshot larger presentation */
.main-screenshot-display{width:100%;display:block;border-radius:10px;overflow:hidden}
.main-screenshot-display .screenshot-wrapper{display:block}
.main-screenshot{width:100%;height:auto;object-fit:contain;max-height:520px;border-radius:8px}

.thumbnails-container{display:flex;gap:8px;margin-top:10px;align-items:center;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;width:auto;flex-wrap:nowrap;max-width:720px}
.thumbnails-container::-webkit-scrollbar{height:10px}
.thumbnails-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:6px}
.screenshot-thumb{width:96px;height:54px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;box-shadow:0 6px 18px rgba(2,6,23,0.06);flex:0 0 auto}
.screenshot-thumb.active{border-color:var(--accent);transform:scale(1.02)}
.screenshot-thumb:hover{transform:scale(1.03)}

@media (max-width:900px){
    .main-screenshot{max-height:400px}
    .screenshot-thumb{width:80px;height:46px}
    /* On small screens thumbnails should use full width and not be capped */
    .thumbnails-container{width:100%;max-width:none}
}

@media (max-width:560px){
    .main-screenshot{max-height:300px}
    .screenshot-thumb{width:64px;height:36px}
}

.platform-icons{display:flex;gap:8px;margin-top:8px}
.platform-icon{width:28px;height:28px}

/* Defensive: ensure any images inside the Quests tab / quest list stay small and don't break layout */
#Quests #questList img,
#questList .quest img {
    max-width: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block;
}

/* Quest list row layout: left logo box + right content (modern card style) */
.quest{
    display:flex;
    align-items:center; /* vertically center content */
    gap:16px;
    padding:12px 14px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius:12px;
    border:1px solid rgba(2,6,23,0.04);
    margin-bottom:12px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.04);
    transition: transform .12s ease, box-shadow .12s ease;
}

.quest:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(2,6,23,0.08);
}

.quest-logo-box{
    width:64px;
    min-width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(15,23,32,0.03);
    border-radius:8px;
    flex-shrink:0;
}

.quest-logo{
    width:48px;
    height:48px;
    object-fit:contain;
    display:block;
}

.quest-content{flex:1 1 auto;display:flex;flex-direction:column;gap:8px}

.quest-content h3{font-size:1.05rem;margin:0;color:#0b1320;font-weight:700}
.quest-content p{margin:0;color:#475569;font-size:0.95rem;line-height:1.35}

/* Truncate long descriptions to two lines */
.quest-content p{
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp: 2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Action button inside quest card */
.quest-content button{
    align-self:flex-start;
    margin-top:4px;
    background: linear-gradient(180deg,var(--primary),#0b66b0);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 6px 14px rgba(11,102,176,0.08);
}

.quest-content button:hover{transform:translateY(-2px)}

@media(max-width:760px){
    .quest{padding:10px;gap:12px}
    .quest-logo-box{width:48px;min-width:48px;height:48px}
    .quest-logo{width:36px;height:36px}
    .quest-content h3{font-size:1rem}
}

@media(max-width:480px){
    .quest{flex-direction:row;align-items:center;padding:10px}
    .quest-logo-box{width:44px;min-width:44px;height:44px}
    .quest-logo{width:32px;height:32px}
}

.task-option{padding:10px;border-radius:10px;border:1px solid rgba(2,6,23,0.04);margin-bottom:8px;background:linear-gradient(180deg,#fff,#fbfdff)}
.task-header{display:flex;align-items:center;gap:10px}
.task-header img{width:44px;height:44px;border-radius:8px}
.task-header.selected{outline:2px solid rgba(16,185,129,0.14);box-shadow:0 6px 16px rgba(16,185,129,0.06);}

.task-container{margin-top:12px}

.review-quest{margin-top:12px;padding:12px;border-radius:10px;background:#fbfdff;border:1px solid rgba(2,6,23,0.03)}

@media (max-width:900px){
    .container{margin:40px 16px;padding:18px}
    .game-header{grid-template-columns:120px 1fr}
    #gameImage{width:120px}
}

@media (max-width:560px){
    .game-header{grid-template-columns:1fr;gap:12px}
    #gameImage{width:100%;border-radius:10px}
    .tabs{overflow:auto}
}

/* Related content styles */
.related-section{margin-top:12px;background:linear-gradient(180deg,#fff,#fbfdff);padding:10px;border-radius:10px;border:1px solid rgba(2,6,23,0.04)}
.related-heading{font-weight:700;color:#0b1320;margin-bottom:8px}
.related-list{display:flex;gap:8px;flex-wrap:wrap}
.related-card{display:inline-block;padding:8px 12px;border-radius:10px;background:rgba(2,6,23,0.03);text-decoration:none;color:var(--primary);font-weight:700;border:1px solid rgba(0,0,0,0.04)}
.related-card:hover{background:rgba(30,136,229,0.06)}
.related-name{display:inline-block;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Related game box reusing playedGames visual style but smaller */
.related-list{display:flex;gap:12px;margin-top:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.related-list::-webkit-scrollbar{height:10px}
.related-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:6px}
.related-game-box{width:120px;height:160px;position:relative;overflow:hidden;border-radius:8px;flex:0 0 120px}
.related-game-box .game-image{width:100%;height:100%;object-fit:cover;display:block}
.related-game-box .game-title-overlay{position:absolute;left:6px;right:6px;bottom:8px;background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));color:#fff;padding:6px 8px;border-radius:6px;font-size:13px;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.related-game-box:hover .game-title-overlay{opacity:1;transform:translateY(0)}

/* Types list above combined related content */
.related-types{color:#475569;font-size:13px;margin-top:8px;margin-bottom:6px}

/* Small badge on tile to indicate relation type */
.relation-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.6);color:#fff;padding:4px 6px;border-radius:6px;font-size:11px;font-weight:700}

.reply-form {
    margin-top: 10px;
}

.reply-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Modern review form styles */
.review-form .form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-form .input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(2,6,23,0.06);background:linear-gradient(180deg,#fff,#fbfdff);font-size:14px}
.review-form .input-textarea{min-height:120px;resize:none;overflow:hidden;max-height:50vh}
/* If textarea internally needs to scroll (after max), allow it */
.review-form .input-textarea{overflow:auto}

/* Strongly remove the native resize handle for the review textarea across browsers */
textarea.input-textarea, .input-textarea {
    resize: none !important;
    overflow: auto !important;
}
/* Hide webkit resize grip */
textarea.input-textarea::-webkit-resizer { display: none !important; }
/* Hide firefox resize grip */
textarea.input-textarea::-moz-resizer { display: none !important; }
.review-form .small-input{width:110px;padding:8px}
.file-row{align-items:center}
.file-btn{display:inline-block;padding:8px 12px;border-radius:8px;background:linear-gradient(180deg,#fff,#f3f9f7);border:1px solid rgba(2,6,23,0.06);cursor:pointer;color:var(--primary);font-weight:700}
.file-name{color:var(--muted);font-size:13px}
.tag-selection{display:flex;gap:8px;flex-wrap:wrap}
.tag-pill{background:transparent;border-radius:999px;padding:4px}
.tag-pill input{display:none}
.tag-pill span{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(30,136,229,0.06);color:var(--primary);font-weight:600;cursor:pointer}
.tag-pill input:checked + span{background:linear-gradient(180deg,var(--primary),#0b66b0);color:white;box-shadow:0 10px 30px rgba(11,102,176,0.12)}
.review-options .option{display:flex;align-items:center;gap:8px;color:var(--muted)}
.pill-toggle{display:inline-flex;align-items:center}
.pill-toggle input{display:none}
.pill-toggle span{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,0.04);color:var(--muted);font-weight:700;cursor:pointer;border:1px solid rgba(0,0,0,0.04)}
.pill-toggle input:checked + span{background:linear-gradient(180deg,#ef4444,#dc2626);color:white;box-shadow:0 10px 30px rgba(220,38,38,0.12);border-color:rgba(0,0,0,0.04)}
.quest-selection .btn{padding:8px 12px}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.btn{padding:8px 12px;border-radius:10px;border:none;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,var(--primary),#0b66b0);color:white;font-weight:700}
.btn.secondary{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--primary)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--muted)}

/* Visually hidden for accessibility labels */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:560px){
    .review-form .form-row{flex-direction:column;align-items:stretch}
    .form-actions{justify-content:stretch}
}

.task-option, .subtask-option {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.task-header, .subtask-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.task-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.task-list-popup {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

#addToListBtn {
    background-color: #ff9800;
    color: white;
    margin-left: 5px;
}

/* Played icon button: icon-only, no background or shadow */
#togglePlayedBtn{padding:0;border-radius:0;background:transparent;border:none;box-shadow:none;display:inline-flex;align-items:center;justify-content:center}
#togglePlayedBtn img#playedIcon{width:32px;height:32px;display:block;object-fit:contain}
#togglePlayedBtn:hover{transform:none}
#togglePlayedBtn:focus{outline:2px solid rgba(30,136,229,0.18);outline-offset:4px;border-radius:6px}

/* Actions panel that groups play/backlog/list and rating */
.actions-panel{margin-top:12px;padding:12px;background:linear-gradient(180deg,#ffffff,#fbfdff);border-radius:10px;border:1px solid rgba(2,6,23,0.04);box-shadow:0 8px 20px rgba(2,6,23,0.04)}
.actions-row{display:flex;gap:10px;align-items:center}
.panel-rating{margin-top:10px}
.rating-controls{display:flex;gap:8px;align-items:center;margin-top:6px}
.rating-controls input[type="number"]{width:86px;padding:6px;border-radius:8px;border:1px solid rgba(2,6,23,0.06)}
.rating-controls button{padding:8px 12px;border-radius:8px}

/* Hide explicit submit button because rating auto-submits on click */
#submitRatingBtn{display:none}

/* Circle rating picker */
.rating-circles{display:flex;gap:8px;align-items:center}
.rating-circles button{width:34px;height:34px;border-radius:50%;border:2px solid rgba(2,6,23,0.08);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}
.rating-circles button:hover{transform:scale(1.06)}
.rating-circles button .dot{width:16px;height:16px;border-radius:50%;background:transparent;transition:background .18s ease,transform .12s ease}
.rating-circles button.filled{background:rgba(251,191,36,0.12);box-shadow:0 6px 18px rgba(251,191,36,0.12);border-color:rgba(251,191,36,0.18)}
.rating-circles button.filled .dot{background:var(--rating-fill);transform:scale(1)}
.rating-circles button.selected{outline:2px solid rgba(251,191,36,0.18)}

@media (max-width:560px){
    .actions-row{flex-wrap:wrap}
    .rating-controls{width:100%}
    .rating-controls button{flex:0 0 auto}
}

#addToListBtn:hover {
    background-color: #e68900;
}

#addToListPopup .popup-content {
    max-width: 400px;
}

#userListsContainer {
    margin: 10px 0;
    max-height: 200px;
    overflow-y: auto;
}

.user-list-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.user-list-option:last-child {
    border-bottom: none;
}

.user-list-radio {
    margin-right: 10px;
}

#addToListMessage {
    font-size: 1em;
}