/* Lakorn Games: scoped 3D arcade interface. */
.lacorn-games-page,
#lacorn-games-container {
    --lg-ink: #102a32;
    --lg-muted: #6d7d82;
    --lg-panel: rgba(255, 255, 255, .88);
    --lg-panel-solid: #f9fbf8;
    --lg-line: rgba(15, 74, 78, .14);
    --lg-teal: #0c9d91;
    --lg-teal-dark: #076b68;
    --lg-coral: #ff6b56;
    --lg-gold: #f3ba46;
    --lg-shadow: 0 24px 60px rgba(18, 57, 62, .14);
    color: var(--lg-ink);
}

body.lacorn-dark-theme #lacorn-games-container,
html[data-theme="dark"] #lacorn-games-container,
.dark-theme #lacorn-games-container {
    --lg-ink: #edf9f6;
    --lg-muted: #91aaa9;
    --lg-panel: rgba(15, 38, 45, .9);
    --lg-panel-solid: #10272e;
    --lg-line: rgba(135, 224, 211, .16);
    --lg-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

#lacorn-games-container {
    width: 100%;
    min-width: 0;
    overflow: visible;
}

#lacorn-games-container .lacorn-games-page {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 28px 22px 56px !important;
}

#lacorn-games-container .lacorn-games-page > h1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 72px;
    margin: 0 0 8px !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 900 !important;
    letter-spacing: -.045em;
    color: var(--lg-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 3px 0 rgba(255,255,255,.55);
}

#lacorn-games-container .lacorn-games-page > h1::after {
    content: "PLAYROOM";
    margin-left: 14px;
    padding: 7px 11px;
    border: 1px solid var(--lg-line);
    border-radius: 999px;
    color: var(--lg-teal);
    font-size: 10px;
    letter-spacing: .18em;
    text-shadow: none;
    background: var(--lg-panel);
}

#lacorn-games-container .lacorn-games-subtitle {
    margin: 0 0 28px !important;
    color: var(--lg-muted) !important;
    font-size: 15px !important;
}

#lacorn-games-container .lacorn-games-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    perspective: 1200px;
}

#lacorn-games-container .lacorn-game-card {
    isolation: isolate;
    min-height: 245px;
    padding: 25px !important;
    border: 1px solid var(--lg-line) !important;
    border-radius: 26px !important;
    color: var(--lg-ink) !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(255,255,255,.9) 0 7%, transparent 8%),
        linear-gradient(145deg, var(--lg-panel) 0 62%, rgba(16, 173, 154, .12) 100%) !important;
    box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -5px 0 rgba(8,78,77,.08) !important;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease !important;
}

#lacorn-games-container .lacorn-game-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 9px -7px -9px 9px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--lg-teal), var(--lg-gold), var(--lg-coral));
    opacity: .18;
    filter: blur(1px);
    transform: translateZ(-20px);
}

#lacorn-games-container .lacorn-game-card:hover {
    border-color: rgba(12,157,145,.38) !important;
    box-shadow: 0 34px 75px rgba(20, 68, 71, .2), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg) !important;
}

#lacorn-games-container .lacorn-game-card:active {
    transform: translateY(-1px) scale(.985) !important;
}

#lacorn-games-container .game-icon {
    display: grid !important;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 0 23px !important;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 21px;
    font-size: 34px !important;
    background: linear-gradient(145deg, #fff, #dff3ef);
    box-shadow: 0 14px 26px rgba(10, 91, 89, .18), inset 0 -5px 9px rgba(13, 112, 108, .1);
    transform: translateZ(28px) rotate(-3deg);
}

#lacorn-games-container .game-name {
    margin-bottom: 8px !important;
    color: var(--lg-ink) !important;
    font-size: 21px !important;
    font-weight: 850 !important;
    letter-spacing: -.025em;
}

#lacorn-games-container .game-desc {
    color: var(--lg-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

#lacorn-games-container .game-status-badge,
#lacorn-games-container .game-best {
    border: 1px solid rgba(12,157,145,.18) !important;
    color: var(--lg-teal-dark) !important;
    background: rgba(220, 249, 243, .86) !important;
    box-shadow: none !important;
}

#lacorn-games-container :is(.g2048-layout,.memory-layout,.ms-layout,.dino-layout,.aq-layout,.sq-layout,.pz15-layout) {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 30px 22px 54px !important;
    gap: 28px !important;
}

#lacorn-games-container :is(.g2048-game-column,.memory-game-column,.ms-game-column,.dino-game-column,.aq-game-column,.sq-game-column,.pz15-game-col) {
    flex: 1 1 620px !important;
    min-width: 0 !important;
}

#lacorn-games-container :is(.g2048-lb-column,.memory-lb-column,.ms-lb-column,.aq-lb-column,.sq-lb-column,.pz15-lb-col) {
    flex: 0 1 390px !important;
    min-width: 300px !important;
}

#lacorn-games-container :is(.lacorn-game-2048,.memory-game,.ms-game,.aq-game,.sq-game,.pz15-game,.mo-game,.ma-game) {
    width: 100% !important;
    max-width: 640px !important;
    padding: 24px !important;
    border: 1px solid var(--lg-line);
    border-radius: 28px;
    background: var(--lg-panel) !important;
    box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255,255,255,.72);
}

#lacorn-games-container :is(.g2048-title,.memory-title,.ms-title,.aq-title,.sq-title,.pz15-title) {
    color: var(--lg-ink) !important;
    font-size: clamp(25px, 3vw, 36px) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em;
}

#lacorn-games-container :is(.g2048-board-wrapper,.memory-board,.ms-board,.pz15-board-wrap) {
    width: min(100%, 580px) !important;
    max-width: 580px !important;
    margin-inline: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, #cfdfdc, #eef5f2) !important;
    box-shadow: inset 8px 8px 18px rgba(43,78,77,.16), inset -8px -8px 18px rgba(255,255,255,.8), 0 18px 34px rgba(25,71,73,.13) !important;
}

#lacorn-games-container .ms-board {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 5px !important;
}

#lacorn-games-container .ms-cell {
    min-width: 0;
    border-radius: 9px !important;
    font-size: clamp(14px, 2vw, 20px) !important;
    background: linear-gradient(145deg, #23b8aa, #087b78) !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.38), 0 4px 0 #075b5b, 0 7px 12px rgba(4,72,71,.22) !important;
    transform: translateY(-2px);
}

#lacorn-games-container .ms-cell:hover { background: linear-gradient(145deg, #33caba, #09908a) !important; }
#lacorn-games-container .ms-cell.ms-revealed {
    color: #17373d !important;
    background: #eef4f1 !important;
    box-shadow: inset 2px 2px 5px rgba(31,73,73,.16) !important;
    transform: none;
}

#lacorn-games-container :is(.g2048-btn-primary,.memory-btn-primary,.ms-btn-primary,.aq-btn-primary,.sq-btn-primary,.pz15-btn-primary) {
    min-height: 46px;
    border-radius: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--lg-teal-dark), var(--lg-teal)) !important;
    box-shadow: 0 7px 0 #075755, 0 14px 22px rgba(7,105,101,.22) !important;
}

#lacorn-games-container .lacorn-leaderboard {
    padding: 20px !important;
    border: 1px solid var(--lg-line);
    border-radius: 26px;
    background: var(--lg-panel) !important;
    box-shadow: var(--lg-shadow);
    overflow: hidden;
}

#lacorn-games-container .lacorn-leaderboard h3 {
    margin-bottom: 17px !important;
    color: var(--lg-ink) !important;
    font-size: 19px !important;
    font-weight: 850 !important;
}

#lacorn-games-container .lacorn-lb-table {
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 7px !important;
    background: transparent !important;
}

#lacorn-games-container .lacorn-lb-table thead th {
    border: 0 !important;
    color: var(--lg-muted) !important;
    background: transparent !important;
}

#lacorn-games-container .lacorn-lb-table tbody tr {
    background: rgba(255,255,255,.66);
    box-shadow: 0 7px 17px rgba(22,57,61,.07);
}

#lacorn-games-container .lacorn-lb-table tbody td {
    padding: 12px 9px !important;
    border: 0 !important;
    color: var(--lg-ink) !important;
    background: transparent !important;
}

#lacorn-games-container .lacorn-lb-table tbody td:first-child { border-radius: 13px 0 0 13px; }
#lacorn-games-container .lacorn-lb-table tbody td:last-child { border-radius: 0 13px 13px 0; }
#lacorn-games-container .lacorn-lb-table tbody tr:nth-child(1) { outline: 2px solid rgba(243,186,70,.65); }
#lacorn-games-container .lacorn-lb-table tbody tr:nth-child(2) { outline: 1px solid rgba(155,174,181,.5); }
#lacorn-games-container .lacorn-lb-table tbody tr:nth-child(3) { outline: 1px solid rgba(199,119,65,.45); }
#lacorn-games-container .lacorn-lb-table .lb-avatar { width: 38px !important; height: 38px !important; border: 2px solid #fff; }
#lacorn-games-container .lacorn-lb-table .lb-name { color: var(--lg-ink) !important; font-weight: 750 !important; }
#lacorn-games-container .lacorn-lb-table .lb-score { color: var(--lg-teal) !important; font-size: 15px !important; white-space: nowrap; }

#lacorn-games-container .lacorn-lb-empty,
#lacorn-games-container .lacorn-lb-loading {
    border: 1px dashed var(--lg-line) !important;
    border-radius: 17px !important;
    color: var(--lg-muted) !important;
    background: rgba(255,255,255,.45) !important;
}

#lacorn-games-container .ms-overlay { backdrop-filter: blur(12px); }
#lacorn-games-container .ms-overlay-content {
    border: 1px solid var(--lg-line);
    color: var(--lg-ink);
    background: var(--lg-panel-solid) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

@media (max-width: 1024px) {
    #lacorn-games-container .lacorn-games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #lacorn-games-container :is(.g2048-layout,.memory-layout,.ms-layout,.dino-layout,.aq-layout,.sq-layout,.pz15-layout) { flex-direction: column !important; }
    #lacorn-games-container :is(.g2048-lb-column,.memory-lb-column,.ms-lb-column,.aq-lb-column,.sq-lb-column,.pz15-lb-col) { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 620px) {
    #lacorn-games-container .lacorn-games-page { padding: 18px 12px 90px !important; }
    #lacorn-games-container .lacorn-games-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    #lacorn-games-container .lacorn-game-card { min-height: 205px; padding: 21px !important; }
    #lacorn-games-container :is(.g2048-layout,.memory-layout,.ms-layout,.dino-layout,.aq-layout,.sq-layout,.pz15-layout) { padding: 15px 8px 92px !important; }
    #lacorn-games-container :is(.lacorn-game-2048,.memory-game,.ms-game,.aq-game,.sq-game,.pz15-game,.mo-game,.ma-game) { padding: 15px !important; border-radius: 21px; }
    #lacorn-games-container :is(.g2048-board-wrapper,.memory-board,.ms-board,.pz15-board-wrap) { padding: 7px !important; border-radius: 18px !important; }
    #lacorn-games-container .ms-board { gap: 3px !important; }
    #lacorn-games-container .ms-cell { border-radius: 6px !important; box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), 0 3px 0 #075b5b !important; }
    #lacorn-games-container .lacorn-leaderboard { padding: 13px !important; border-radius: 20px; overflow-x: auto; }
    #lacorn-games-container .lacorn-lb-table { min-width: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    #lacorn-games-container *, #lacorn-games-container *::before, #lacorn-games-container *::after { transition: none !important; animation-duration: .01ms !important; }
}

/* Poster puzzle and cast detective. */
#lacorn-games-container :is(.poster-game-layout,.odd-game-layout) {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
    gap: 28px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 22px 60px;
}
#lacorn-games-container :is(.poster-game-card,.odd-game-card) {
    padding: 25px;
    border: 1px solid var(--lg-line);
    border-radius: 28px;
    background: var(--lg-panel);
    box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255,255,255,.75);
}
#lacorn-games-container :is(.poster-game-head,.odd-game-head) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
#lacorn-games-container :is(.poster-kicker,.odd-game-head > div:first-child > span) {
    color: var(--lg-coral);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}
#lacorn-games-container :is(.poster-game-head h2,.odd-game-head h2) {
    margin: 5px 0 0;
    color: var(--lg-ink);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    letter-spacing: -.04em;
}
#lacorn-games-container :is(.poster-game-stats,.odd-game-score) {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 11px;
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid var(--lg-line);
    border-radius: 17px;
    background: rgba(255,255,255,.62);
}
#lacorn-games-container :is(.poster-game-stats,.odd-game-score) b { color: var(--lg-teal-dark); font-size: 17px; }
#lacorn-games-container :is(.poster-game-stats,.odd-game-score) small { align-self: center; color: var(--lg-muted); font-size: 10px; text-transform: uppercase; }
#lacorn-games-container .poster-game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
#lacorn-games-container :is(.poster-size-switch,#poster-new) { display:flex; padding:4px; border:1px solid var(--lg-line); border-radius:14px; background:rgba(255,255,255,.55); }
#lacorn-games-container :is(.poster-size-switch button,#poster-new) { min-height:38px; padding:8px 14px; border:0; border-radius:10px; color:var(--lg-ink); font-weight:800; background:transparent; cursor:pointer; }
#lacorn-games-container .poster-size-switch button.is-active { color:#fff; background:linear-gradient(135deg,var(--lg-teal-dark),var(--lg-teal)); box-shadow:0 5px 12px rgba(7,105,101,.24); }
#lacorn-games-container .poster-game-title { margin:0 0 9px; color:var(--lg-muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lacorn-games-container .poster-board-shell { position:relative; width:min(100%,620px); aspect-ratio:2/3; margin:0 auto; border-radius:24px; overflow:hidden; background:#dce9e5; box-shadow:inset 8px 8px 18px rgba(29,75,74,.18),0 22px 48px rgba(19,64,66,.2); }
#lacorn-games-container .poster-board { --poster-size:3; display:grid; grid-template-columns:repeat(var(--poster-size),1fr); gap:4px; width:100%; height:100%; padding:8px; }
#lacorn-games-container .poster-tile { min-width:0; border:0; border-radius:9px; background-repeat:no-repeat; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 4px 8px rgba(10,50,52,.2); transition:transform .16s ease,filter .16s ease; }
#lacorn-games-container .poster-tile:hover { filter:brightness(1.08); transform:translateY(-2px); }
#lacorn-games-container .poster-tile.is-empty { opacity:0; pointer-events:none; }
#lacorn-games-container .poster-board-loading { position:absolute; inset:0; display:grid; place-items:center; z-index:2; color:var(--lg-muted); font-weight:800; background:var(--lg-panel-solid); }
#lacorn-games-container .poster-board-loading[hidden] { display:none; }
#lacorn-games-container .poster-game-result { display:flex; justify-content:space-between; gap:12px; min-height:30px; margin-top:14px; color:var(--lg-teal-dark); }
#lacorn-games-container .poster-game-result strong { font-size:18px; }
#lacorn-games-container .poster-game-result span { color:var(--lg-muted); }
#lacorn-games-container .odd-game-task { margin:0 0 18px; color:var(--lg-muted); font-size:14px; }
#lacorn-games-container .odd-actors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; min-height:420px; }
#lacorn-games-container .odd-actor { position:relative; min-width:0; padding:0; border:2px solid transparent; border-radius:20px; overflow:hidden; color:#fff; background:#173941; cursor:pointer; box-shadow:0 16px 30px rgba(17,55,59,.16); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
#lacorn-games-container .odd-actor:hover { transform:translateY(-5px) rotateX(2deg); box-shadow:0 24px 40px rgba(17,55,59,.25); }
#lacorn-games-container .odd-actor img { display:block; width:100%; height:230px; object-fit:cover; }
#lacorn-games-container .odd-actor span { position:absolute; inset:auto 0 0; padding:34px 13px 12px; font-weight:850; text-align:left; background:linear-gradient(transparent,rgba(4,22,27,.94)); }
#lacorn-games-container .odd-actor.is-correct { border-color:#20c997; box-shadow:0 0 0 5px rgba(32,201,151,.17),0 20px 38px rgba(17,55,59,.24); }
#lacorn-games-container .odd-actor.is-wrong { border-color:var(--lg-coral); filter:saturate(.45); }
#lacorn-games-container .odd-feedback { display:flex; flex-wrap:wrap; gap:6px 12px; min-height:52px; padding-top:14px; color:var(--lg-muted); }
#lacorn-games-container .odd-feedback strong { color:var(--lg-teal-dark); }
#lacorn-games-container :is(.odd-loading,.odd-finish) { grid-column:1/-1; display:grid; place-items:center; align-content:center; gap:10px; min-height:380px; border:1px dashed var(--lg-line); border-radius:22px; color:var(--lg-muted); }
#lacorn-games-container .odd-finish > span { font-size:58px; }
#lacorn-games-container .odd-finish > strong { color:var(--lg-ink); font-size:36px; }
#lacorn-games-container .odd-finish button,#lacorn-games-container #odd-retry { padding:12px 18px; border:0; border-radius:13px; color:#fff; font-weight:850; background:linear-gradient(135deg,var(--lg-teal-dark),var(--lg-teal)); cursor:pointer; }

@media (max-width:900px) {
    #lacorn-games-container :is(.poster-game-layout,.odd-game-layout) { grid-template-columns:1fr; }
}
@media (max-width:620px) {
    #lacorn-games-container :is(.poster-game-layout,.odd-game-layout) { padding:14px 8px 95px; gap:16px; }
    #lacorn-games-container :is(.poster-game-card,.odd-game-card) { padding:15px; border-radius:21px; }
    #lacorn-games-container :is(.poster-game-head,.odd-game-head) { flex-direction:column; }
    #lacorn-games-container :is(.poster-game-stats,.odd-game-score) { width:100%; grid-template-columns:auto 1fr auto 1fr; }
    #lacorn-games-container .poster-game-toolbar { align-items:stretch; flex-direction:column; }
    #lacorn-games-container .poster-size-switch { justify-content:center; }
    #lacorn-games-container .poster-board-shell { width:min(100%,410px); }
    #lacorn-games-container .odd-actors { gap:9px; min-height:350px; }
    #lacorn-games-container .odd-actor { border-radius:15px; }
    #lacorn-games-container .odd-actor img { height:180px; }
    #lacorn-games-container .odd-actor span { padding:28px 9px 9px; font-size:12px; }
}