@charset "utf-8";
.lmg-container {
--lmg-orange: #ff7a29;
--lmg-orange-dark: #e0611a;
--lmg-orange-light: #ffb37a;
--lmg-bg: #fff4e8;
--lmg-brown: #7a4a2b;
--lmg-text: #3a2a1a;
--lmg-green: #3bb273;
--lmg-red: #e0473e;
--lmg-blue: #3b82c4;
--lmg-purple: #9b59b6;
--lmg-yellow: #f2c14e;
--lmg-scale: 1;
max-width: 720px;
margin: 24px auto;
background: var(--lmg-bg);
border-radius: 20px;
padding: 0;
box-shadow: 0 10px 30px rgba(224, 97, 26, 0.25);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", Sarabun, sans-serif;
color: var(--lmg-text);
overflow: hidden;
box-sizing: border-box;
}
.lmg-container * {
box-sizing: border-box;
}
.lmg-screen {
display: none;
padding: 28px 24px 32px;
animation: lmg-fade-in 0.35s ease;
}
.lmg-screen.lmg-active {
display: block;
}
@keyframes lmg-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.lmg-header {
background: linear-gradient(135deg, var(--lmg-orange), var(--lmg-orange-dark));
color: #fff;
padding: 18px 24px;
text-align: center;
position: relative;
}
.lmg-header-controls {
position: absolute;
top: 10px;
right: 12px;
display: flex;
gap: 6px;
}
.lmg-icon-btn {
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(255, 255, 255, 0.55);
color: #fff;
border-radius: 8px;
padding: 4px 9px;
font-size: calc(13px * var(--lmg-scale, 1));
cursor: pointer;
line-height: 1.4;
}
.lmg-icon-btn:hover {
background: rgba(255, 255, 255, 0.38);
}
.lmg-header h1 {
margin: 0;
font-size: calc(20px * var(--lmg-scale, 1));
font-weight: 700;
}
.lmg-header .lmg-subtitle {
font-size: 13px;
opacity: 0.9;
margin-top: 4px;
}
.lmg-story {
background: #fff;
border-left: 4px solid var(--lmg-orange);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 18px;
line-height: 1.7;
font-size: calc(15px * var(--lmg-scale, 1));
}
.lmg-mission {
font-weight: 700;
font-size: calc(17px * var(--lmg-scale, 1));
color: var(--lmg-orange-dark);
text-align: center;
margin: 14px 0 20px;
}
.lmg-btn {
display: inline-block;
background: var(--lmg-orange);
color: #fff;
border: none;
border-radius: 12px;
padding: 12px 22px;
font-size: calc(15px * var(--lmg-scale, 1));
font-weight: 700;
cursor: pointer;
transition: transform 0.12s ease, background 0.2s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
touch-action: manipulation;
}
.lmg-btn:hover { background: var(--lmg-orange-dark); }
.lmg-btn:active { transform: scale(0.96); }
.lmg-btn.lmg-btn-secondary {
background: #fff;
color: var(--lmg-orange-dark);
border: 2px solid var(--lmg-orange);
}
.lmg-btn.lmg-btn-ghost {
background: transparent;
color: var(--lmg-brown);
border: 2px dashed #c9a67a;
}
.lmg-btn-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.lmg-btn-row.lmg-vertical {
flex-direction: column;
}
.lmg-center {
text-align: center;
} .lmg-energy-wrap {
text-align: center;
}
.lmg-energy-track {
position: relative;
width: 60px;
height: 260px;
margin: 20px auto;
background: #f0e0cc;
border-radius: 30px;
border: 3px solid var(--lmg-brown);
overflow: hidden;
}
.lmg-energy-zone {
position: absolute;
left: 0;
right: 0;
bottom: 85%;
height: 6%;
background: rgba(10, 80, 10, 0.65);
border-top: 2px dashed #0a5a0a;
border-bottom: 2px dashed #0a5a0a;
animation: lmg-zone-blink 0.8s ease-in-out infinite;
}
@keyframes lmg-zone-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.lmg-energy-fill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0%;
background: linear-gradient(180deg, #ffd27a, var(--lmg-orange));
transition: height 0.03s linear;
}
.lmg-energy-needle-label {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-weight: 800;
font-size: 22px;
color: var(--lmg-orange-dark);
top: -34px;
}
.lmg-energy-btn {
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffcf94, var(--lmg-orange) 70%);
color: #fff;
font-size: 18px;
font-weight: 800;
border: 6px solid var(--lmg-orange-dark);
box-shadow: 0 8px 0 #b8460f;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: none;
margin: 12px auto;
display: block;
}
.lmg-energy-btn:active,
.lmg-energy-btn.lmg-pressed {
box-shadow: 0 3px 0 #b8460f;
transform: translateY(5px);
}
.lmg-energy-attempts {
color: var(--lmg-brown);
font-size: 13px;
margin-top: 10px;
}
.lmg-energy-result {
font-size: 17px;
font-weight: 700;
min-height: 26px;
margin-top: 10px;
} .lmg-dialogue-box {
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
position: relative;
}
.lmg-dialogue-avatar {
font-size: 36px;
text-align: center;
margin-bottom: 6px;
}
.lmg-dialogue-text {
font-size: calc(16px * var(--lmg-scale, 1));
line-height: 1.7;
text-align: center;
margin-bottom: 18px;
font-weight: 600;
}
.lmg-reason-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
@media (max-width: 480px) {
.lmg-reason-grid { grid-template-columns: 1fr; }
}
.lmg-reason-btn {
background: #fff8f0;
border: 2px solid var(--lmg-orange-light);
border-radius: 10px;
padding: 10px 12px;
font-size: 13.5px;
text-align: left;
cursor: pointer;
color: var(--lmg-text);
}
.lmg-reason-btn:hover { background: #ffe9d3; } .lmg-land-wrap {
text-align: center;
}
.lmg-color-picker {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: 14px 0;
}
.lmg-color-swatch {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: 13px;
position: relative;
}
.lmg-color-swatch.lmg-selected {
border-color: var(--lmg-text);
transform: scale(1.12);
}
.lmg-color-swatch .lmg-count-badge {
position: absolute;
bottom: -8px;
right: -6px;
background: #fff;
color: var(--lmg-text);
border-radius: 10px;
font-size: 10px;
padding: 1px 5px;
border: 1px solid #ddd;
}
.lmg-grid {
display: grid;
gap: 3px;
margin: 0 auto 16px;
width: fit-content;
max-width: 100%;
touch-action: none;
}
.lmg-cell {
width: 44px;
height: 44px;
background: #e9d3b0;
border: 1px solid #d3b688;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
}
.lmg-cell.lmg-blocked {
background: transparent;
border: none;
cursor: default;
}
@media (max-width: 480px) {
.lmg-cell { width: 36px; height: 36px; }
.lmg-energy-track { height: 220px; }
}
.lmg-toolbar {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.lmg-toolbar button {
background: #fff;
border: 2px solid var(--lmg-orange-light);
border-radius: 10px;
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
}
.lmg-siblings-row {
display: flex;
justify-content: center;
gap: 10px;
margin: 10px 0 4px;
flex-wrap: wrap;
}
.lmg-sibling {
font-size: 26px;
background: #fff;
border-radius: 50%;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.lmg-feedback {
min-height: 24px;
font-weight: 700;
margin: 10px 0;
color: var(--lmg-orange-dark);
font-size: calc(14.5px * var(--lmg-scale, 1));
}
.lmg-hint {
font-size: calc(13px * var(--lmg-scale, 1));
color: var(--lmg-brown);
background: #fff8ea;
border: 1px dashed var(--lmg-yellow);
border-radius: 8px;
padding: 8px 12px;
margin-top: 10px;
} .lmg-confetti {
font-size: 30px;
text-align: center;
margin: 6px 0;
} .lmg-ai-takeover {
text-align: center;
background: #22252b;
color: #fff;
border-radius: 14px;
padding: 22px;
}
.lmg-ai-takeover .lmg-ai-icon {
font-size: 44px;
margin-bottom: 8px;
}
.lmg-ai-log {
font-family: monospace;
font-size: 13px;
color: #7CFC9A;
text-align: left;
background: #101215;
border-radius: 8px;
padding: 10px 12px;
margin: 12px 0;
min-height: 60px;
white-space: pre-line;
} .lmg-reflection-block {
background: #fff;
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 14px;
box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
.lmg-reflection-block h3 {
margin: 0 0 8px;
color: var(--lmg-orange-dark);
font-size: calc(16px * var(--lmg-scale, 1));
}
.lmg-reflection-list {
margin: 0;
padding-left: 18px;
line-height: 1.8;
font-size: calc(14.5px * var(--lmg-scale, 1));
}
.lmg-timer-bar {
height: 8px;
background: #eee;
border-radius: 6px;
overflow: hidden;
margin: 12px 0;
}
.lmg-timer-fill {
height: 100%;
background: var(--lmg-red);
width: 100%;
transition: width 0.1s linear;
}
.lmg-tag {
display: inline-block;
background: var(--lmg-orange-light);
color: #6b3200;
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
} .lmg-mascot-wrap {
display: flex;
justify-content: flex-end;
align-items: flex-end;
gap: 8px;
padding: 0 18px 16px;
}
.lmg-mascot-avatar {
font-size: 30px;
flex-shrink: 0;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
.lmg-mascot-bubble {
background: #fff;
border: 2px solid var(--lmg-orange);
border-radius: 14px 14px 4px 14px;
padding: 8px 13px;
font-size: calc(12.5px * var(--lmg-scale, 1));
max-width: 230px;
line-height: 1.5;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.lmg-mascot-bubble.lmg-show {
opacity: 1;
transform: translateY(0);
}

.pg-form {}
.pg-form .pg-form-responses .error {
color: #e27c7c;
padding: 5px 10px;
margin: 5px 0;
}
.pg-form .pg-form-responses .success {
color: #2f6713;
padding: 5px 10px;
margin: 5px 0;
}
.pg-form-field.error .error-wrap {
display: block !important;
}
.pg-form-field.error .error-wrap {
color: #e27c7c;
}
.PGBlockPostGrid-lazyload {
text-align: center;
padding: 20px 0;
}
.PGBlockPostGrid-pagination.next_previous {
display: flex;
justify-content: space-between;
}
.PGBlockPostGrid-pagination.loadmore .page-numbers {
cursor: pointer;
}
.PGBlockPostGrid-pagination.loadmore .loademore-icon {
margin: 0 10px;
}
.PGBlockPostGrid-pagination .infinite-loader {
display: none;
}
.PGBlockPostGrid-pagination .infinite-loader.visible {
display: block;
}
.loop-loading {
text-align: center;
}
.loop-loading .loademore-icon {
margin: 0 10px;
}
.pg-tabs {}
.pg-tabs-panel {
display: none;
}
.pg-tabs-panel-active {
display: block;
}
.progress {}
.progress-fill {}
.pg-menu-wrap {}
.pg-menu-wrap .pg-menu {}
.pg-menu-wrap .pg-menu .has-child-menu {
margin: 0 10px;
}
.pg-menu-wrap .pg-menu li {
position: relative;
}
.pg-menu-wrap .pg-menu li:hover {}
.pg-menu-wrap .pg-menu li .pg-sub-menu {
display: none; position: absolute;
top: 200%;
transition: ease 1s 0s all; }
.pg-menu-wrap .pg-menu li:hover>.pg-sub-menu,
.pg-menu-wrap .pg-menu li.active>.pg-sub-menu {
display: block;
top: 100%;  }
.pg-menu-wrap .pg-sub-menu .pg-sub-menu {
position: absolute;
top: 0;
left: 100%;
}
.pg-menu-wrap .mobile-menu-toggle {
display: none;
}
.mobile-menu-wrap .pg-menu {
display: block !important;
}
.pg-menu-wrap .mobile-menu-wrap { position: fixed;
top: 0;
right: -100%;
transition: all 1s 0s ease;
}
.pg-menu-wrap .mobile-menu-wrap[active] { display: block;
right: 0;
padding: 20px;
width: 80%;
z-index: 99999;
}
@media (max-width: 900px) {
.pg-menu-wrap {
position: relative;
justify-content: end !important;
}
.pg-menu-wrap nav .pg-menu {
display: none !important;
}
.pg-menu-wrap .mobile-menu-toggle,
.pg-menu-wrap .mobile-menu-wrap {
display: block;
}
.pg-menu-wrap .pg-menu li {}
.pg-menu-wrap .mobile-menu-wrap[active] .pg-menu li .pg-sub-menu { position: relative;  display: block;
}
}