/* =============================================================
   Durian Puzzle (Jigsaw) – warm-cream theme, modelled on durian-memory
   ============================================================= */

:root {
    --ink:       #18311d;
    --ink-soft:  rgba(24, 49, 29, 0.78);
    --card-bg:   rgba(255, 250, 240, 0.95);
    --line:      rgba(24, 49, 29, 0.12);
    --green:     #5f8128;
    --green-deep:#284b2d;
    --orange:    #e8a03f;
    --shadow:    0 22px 60px rgba(15, 35, 17, 0.18);
    --dp-amber-500: #f59e0b;
    --dp-radius: 0.75rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(232, 160, 63, 0.35), transparent 26%),
        radial-gradient(circle at top right, rgba(95, 129, 40, 0.28), transparent 22%),
        linear-gradient(180deg, #16361f 0%, #2f6a3d 23%, #dce6bf 58%, #f5e8ce 100%);
}

a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.game-page {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0 2.5rem;
}

.layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}

.game-panel {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 1.8rem;
    padding: 1.4rem;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}

.info-panel { display: grid; gap: 1rem; }

.info-panel .card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    padding: 1.1rem;
    box-shadow: var(--shadow);
}

.info-panel .card h2 {
    margin: 0 0 .65rem;
    font-size: 1rem;
    color: var(--green-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.info-panel .card ul {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.75;
    color: var(--ink-soft);
    font-size: .9rem;
}

.how-list {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.how-list li {
    display: flex;
    gap: .5rem;
    line-height: 1.5;
    align-items: flex-start;
}
.how-list li::before {
    content: "›";
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    min-width: 1.2rem;
    text-align: center;
}
.how-list li:has(.icon)::before { display: none; }

.learn-links { display: flex; flex-direction: column; gap: .35rem; }
.learn-links a {
    color: var(--green-deep);
    font-weight: 600;
    font-size: .9rem;
}
.learn-links a:hover { text-decoration: underline; }

/* Title row */
.title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #75510a;
    margin-bottom: .3rem;
}

h1, h2 { font-family: Georgia, "Times New Roman", serif; }

.title-row h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    color: var(--ink);
    line-height: 1.15;
}

.lead {
    color: var(--ink-soft);
    font-size: .96rem;
    margin: .35rem 0 1rem;
    line-height: 1.65;
}

/* Difficulty bar */
.difficulty-bar {
    display: flex;
    gap: .45rem;
    margin-bottom: 1rem;
}

.diff-btn {
    flex: 1;
    padding: .45rem .7rem;
    border: 2px solid var(--line);
    border-radius: var(--dp-radius);
    background: transparent;
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.diff-btn:hover {
    border-color: var(--green);
    color: var(--green);
}

.diff-btn.is-active {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: #fff;
}

.pick-label {
    font-size: .88rem;
    color: var(--ink-soft);
    margin: 0 0 .65rem;
}

/* Durian gallery */
.durian-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .65rem;
}

.gallery-card {
    position: relative;
    border-radius: var(--dp-radius);
    overflow: hidden;
    border: 2px solid var(--line);
    cursor: pointer;
    background: #f8fafc;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.gallery-card:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    box-shadow: 0 6px 20px rgba(22, 101, 52, 0.15);
}

.gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.gallery-card .card-name {
    display: block;
    padding: .4rem .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 252, 244, 0.95);
}

/* Game HUD */
.game-hud {
    display: flex;
    gap: .85rem;
    margin-bottom: 1rem;
    padding: .6rem 1rem;
    background: rgba(95, 129, 40, 0.1);
    border: 1px solid var(--line);
    border-radius: var(--dp-radius);
    flex-wrap: wrap;
}

.game-hud .hud-item {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.game-hud .hud-label {
    font-size: .72rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.game-hud .hud-item strong {
    font-size: 1.05rem;
    color: var(--green-deep);
    font-weight: 800;
}

/* Puzzle area – keep dark game viewport */
.puzzle-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    background: #0d3320;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}

/* Fullscreen button */
.canvas-fullscreen-button {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 6;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(255, 252, 244, 0.9);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease, background 160ms ease;
    fill: var(--ink);
}

.canvas-fullscreen-button:hover { transform: translateY(-2px); background: #fff; }
.canvas-fullscreen-button svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.puzzle-board {
    display: grid;
    gap: 2px;
    background: var(--green-deep);
    border: 3px solid var(--green-deep);
    border-radius: 6px;
    overflow: hidden;
    touch-action: none;
    max-width: 100%;
}

.board-cell {
    aspect-ratio: 1;
    background: rgba(220, 252, 231, 0.35);
    position: relative;
    transition: background 150ms ease;
}

.board-cell.is-highlight { background: rgba(245, 158, 11, 0.25); }

.board-cell .cell-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(22, 101, 52, 0.18);
    pointer-events: none;
}

/* Puzzle pieces */
.puzzle-piece {
    border-radius: 3px;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    background-repeat: no-repeat;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    box-sizing: border-box;
}

.puzzle-piece:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,.22); }

.puzzle-piece.is-selected {
    outline: 3px solid var(--dp-amber-500);
    outline-offset: -1px;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
    z-index: 2;
}

.puzzle-piece.is-locked {
    cursor: default;
    outline: 3px solid #22c55e;
    outline-offset: -1px;
    animation: lockFlash 400ms ease;
}

.puzzle-piece.is-locked:hover { transform: none; box-shadow: none; }

@keyframes lockFlash {
    0%   { outline-color: #86efac; }
    50%  { outline-color: #22c55e; }
    100% { outline-color: #22c55e; }
}

.piece-tray .puzzle-piece { border: 1px solid rgba(255,255,255,.15); }
.board-cell .puzzle-piece { width: 100% !important; height: 100% !important; border-radius: 0; }

.puzzle-piece.is-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: .85;
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
}

/* Hint overlay */
.puzzle-hint-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    z-index: 5;
}

.puzzle-hint-overlay.is-visible { opacity: .88; }

/* Piece tray */
.tray-label {
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: .6rem 0 .3rem;
    align-self: flex-start;
}

.piece-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: .55rem;
    background: rgba(255,255,255,.08);
    border: 1px dashed rgba(255,255,255,.2);
    border-radius: 6px;
    min-height: 50px;
    width: 100%;
    touch-action: none;
    box-sizing: border-box;
}

/* Game actions */
.game-actions { display: flex; gap: .65rem; margin-top: .9rem; }

/* Buttons */
.primary-button, .control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    transition: transform 150ms ease, background 150ms ease;
}

.primary-button {
    padding: .65rem 1.4rem;
    border: none;
    background: var(--green-deep);
    color: #fffaf0;
    font-weight: 700;
    font-size: .96rem;
}

.primary-button:hover { background: #1a3320; transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }

.control-button {
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    background: rgba(24, 49, 29, 0.08);
    color: var(--ink);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}

.control-button:hover { background: rgba(24, 49, 29, 0.15); transform: translateY(-1px); }
.control-button:active { transform: translateY(0); }

/* Brand ribbon */
.brand-ribbon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    padding: .4rem .8rem;
    border-radius: var(--dp-radius);
    background: rgba(95, 129, 40, 0.08);
    border: 1px solid var(--line);
    font-size: .85rem;
    font-weight: 700;
    color: var(--green-deep);
}

.brand-ribbon-icon { width: 22px; height: 22px; }

/* Reference image */
.ref-image {
    display: block;
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--line);
}

/* Complete screen */
.complete-card { text-align: center; }

.complete-kicker {
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #16a34a;
    background: rgba(95, 129, 40, 0.12);
    padding: .3rem .7rem;
    border-radius: 999px;
    margin-bottom: .5rem;
}

.complete-card h2 { margin: .25rem 0 .5rem; font-size: 1.65rem; color: var(--ink); }
.complete-stats { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1.25rem; }

.complete-image {
    max-width: 360px;
    margin: 0 auto 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid var(--green-deep);
}
.complete-image img { display: block; width: 100%; }

/* Durian facts */
.durian-facts {
    text-align: left;
    background: rgba(95, 129, 40, 0.08);
    border: 1px solid var(--line);
    border-radius: var(--dp-radius);
    padding: 1.1rem;
    margin-bottom: 1.1rem;
}

.durian-facts h3 { margin: 0 0 .65rem; font-size: 1rem; color: var(--green-deep); }

.facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem 1.1rem;
    margin-bottom: .65rem;
}

.fact-item { display: flex; flex-direction: column; }

.fact-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
}

.fact-value { font-size: .9rem; color: var(--ink); line-height: 1.4; }
.facts-description { font-size: .88rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

.complete-actions { display: flex; justify-content: center; gap: .65rem; flex-wrap: wrap; }

/* Card header row */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.share-card .social-share-container { margin: 0; }

.card-header-row h2 { margin: 0; }

.card-link-button {
    background: rgba(24, 49, 29, 0.08);
    border: none;
    color: var(--green-deep);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-family: inherit;
    transition: background .15s;
}

.card-link-button:hover { background: rgba(24, 49, 29, 0.15); }

/* Leaderboard */
.leaderboard-intro, .leaderboard-status, .leaderboard-note {
    margin: 0;
    color: var(--ink-soft);
    font-size: .85rem;
    line-height: 1.6;
}

.leaderboard-status { margin-top: .5rem; }
.leaderboard-note   { margin-top: .2rem; font-size: .78rem; }

.leaderboard-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.leaderboard-tab {
    border: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 700;
    font-size: .82rem;
    transition: background .15s, color .15s, border-color .15s;
}

.leaderboard-tab:hover { background: var(--green); border-color: var(--green); color: #fff; }

.leaderboard-tab.is-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.leaderboard-form {
    display: grid;
    gap: .45rem;
    margin-top: .6rem;
}

.leaderboard-form.is-hidden { display: none; }
.leaderboard-label { font-weight: 700; font-size: .88rem; color: var(--ink); }

.leaderboard-form-row { display: flex; gap: .45rem; flex-wrap: wrap; }

.leaderboard-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--dp-radius);
    padding: .45rem .75rem;
    font: inherit;
    font-size: .9rem;
    background: rgba(255, 252, 244, 0.9);
    color: var(--ink);
    outline: none;
}

.leaderboard-input::placeholder { color: var(--ink-soft); }
.leaderboard-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 220px;
    overflow-y: auto;
}

.leaderboard-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    align-items: center;
    padding: .3rem .45rem;
    border-radius: .4rem;
    font-size: .88rem;
}

.leaderboard-entry:nth-child(odd) { background: rgba(95, 129, 40, 0.06); }

.leaderboard-rank {
    min-width: 1.5rem;
    font-weight: 700;
    color: var(--ink-soft);
    font-size: .8rem;
    text-align: right;
}

.leaderboard-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-score { font-weight: 700; color: var(--green-deep); white-space: nowrap; }
.leaderboard-empty { color: var(--ink-soft); font-size: .88rem; line-height: 1.6; padding: .3rem 0; text-align: center; }

/* Fullscreen mode */
#puzzle-area:fullscreen,
#puzzle-area:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    padding: 1rem;
    background: linear-gradient(180deg, #0d3320 0%, #14532d 100%);
    overflow-y: auto;
}

#puzzle-area:fullscreen .puzzle-board,
#puzzle-area:-webkit-full-screen .puzzle-board { max-width: min(90vw, 80vh); max-height: 80vh; }

#puzzle-area:fullscreen .piece-tray,
#puzzle-area:-webkit-full-screen .piece-tray { max-width: min(90vw, 80vh); }

#puzzle-area:fullscreen .tray-label,
#puzzle-area:-webkit-full-screen .tray-label { max-width: min(90vw, 80vh); width: 100%; }

/* Responsive */
@media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; }
    .info-panel { order: 2; }
}

@media (max-width: 540px) {
    .game-page { width: min(100% - 1rem, 100%); }
    .game-panel { padding: 1rem; }
    .title-row h1 { font-size: 1.35rem; }
    .difficulty-bar { flex-direction: column; }
    .diff-btn { width: 100%; }
    .durian-gallery { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
    .game-hud { flex-wrap: wrap; gap: .45rem .8rem; }
    .facts-grid { grid-template-columns: 1fr; }
    .complete-image { max-width: 100%; }
    .complete-actions { flex-direction: column; }
    .leaderboard-tabs { flex-direction: column; }
    .leaderboard-tab { text-align: center; }
    .leaderboard-form-row { flex-direction: column; }
    .leaderboard-input { width: 100%; }
}

@media (max-width: 380px) {
    .game-panel { padding: .75rem; }
    .puzzle-area { padding: 6px; }
    .info-panel .card { padding: .85rem; }
    .canvas-fullscreen-button { width: 2rem; height: 2rem; top: .3rem; right: .3rem; }
    .canvas-fullscreen-button svg { width: .95rem; height: .95rem; }
}