/* Plants vs. Zombies 2 Web Remake Stylesheet */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    background: #111827;
    color: #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
}

#appContainer {
    position: relative;
    width: 1080px;
    height: 640px;
    background: #000;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 20px rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #374151;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* TOP HUD BAR */
#topBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    padding: 6px 16px;
    background: linear-gradient(180deg, rgba(20, 20, 25, 0.95) 0%, rgba(20, 20, 25, 0.7) 80%, rgba(20, 20, 25, 0) 100%);
    pointer-events: none;
    z-index: 10;
}

#topBar > * {
    pointer-events: auto;
}

/* SUN COUNTER */
.sun-bank {
    display: flex;
    align-items: center;
    background: #523719;
    border: 3px solid #94682c;
    border-radius: 24px;
    padding: 4px 16px 4px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    margin-right: 14px;
}

.sun-icon {
    width: 36px;
    height: 36px;
    background: radial-gradient(circle, #fffa65 30%, #f39c12 90%);
    border-radius: 50%;
    border: 2px solid #e67e22;
    box-shadow: 0 0 10px #f1c40f;
    margin-right: 8px;
    animation: rotateSun 10s linear infinite;
}

@keyframes rotateSun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#sunCount {
    font-size: 22px;
    font-weight: 900;
    color: #f1c40f;
    text-shadow: 1px 1px 2px #000;
}

/* SEED PACKET BAR */
#seedBar {
    display: flex;
    gap: 6px;
    flex-grow: 1;
    overflow-x: auto;
    padding: 4px 0;
}

.seed-card {
    position: relative;
    width: 60px;
    height: 76px;
    background: #7a5028;
    border: 2px solid #b37e44;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    transition: transform 0.1s, border-color 0.1s;
    overflow: hidden;
}

.seed-card:hover {
    transform: translateY(-2px);
    border-color: #f39c12;
}

.seed-card.selected {
    border-color: #2ecc71;
    box-shadow: 0 0 12px #2ecc71;
    transform: translateY(-4px);
}

.seed-card.disabled {
    filter: brightness(0.6) grayscale(0.5);
    cursor: not-allowed;
    transform: none;
}

.cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    pointer-events: none;
    transition: height 0.1s linear;
}

.card-icon {
    width: 44px;
    height: 40px;
    border-radius: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Plant Card SVG preview approximations */
.card-icon.sunflower { background-color: #f1c40f; border-radius: 50%; }
.card-icon.twin_sunflower { background-color: #f39c12; border-radius: 50%; }
.card-icon.peashooter { background-color: #2ecc71; border-radius: 50%; }
.card-icon.repeater { background-color: #27ae60; border-radius: 50%; }
.card-icon.wallnut { background-color: #b9770e; border-radius: 40%; }
.card-icon.cabbage_pult { background-color: #58d68d; border-radius: 30%; }
.card-icon.iceberg_lettuce { background-color: #5dade2; border-radius: 50%; }
.card-icon.grave_buster { background-color: #8e44ad; border-radius: 40%; }
.card-icon.bonk_choy { background-color: #27ae60; border-radius: 30%; }
.card-icon.spring_bean { background-color: #2ecc71; border-radius: 40%; }
.card-icon.spikeweed { background-color: #7f8c8d; border-radius: 20%; }
.card-icon.snapdragon { background-color: #e74c3c; border-radius: 40%; }
.card-icon.coconut_cannon { background-color: #6e2c00; border-radius: 50%; }
.card-icon.cherry_bomb { background-color: #c0392b; border-radius: 50%; }
.card-icon.winter_melon { background-color: #06b6d4; border-radius: 40%; }
.card-icon.laser_bean { background-color: #14b8a6; border-radius: 50%; }
.card-icon.primal_peashooter { background-color: #15803d; border-radius: 50%; }
.card-icon.torchwood { background-color: #b45309; border-radius: 25%; }
.card-icon.homing_thistle { background-color: #db2777; border-radius: 50%; }
.card-icon.citron { background-color: #f97316; border-radius: 50%; }
.card-icon.escape_root { background: radial-gradient(circle, #b45309 25%, #581c87 85%); border-radius: 45%; border: 1px solid #c084fc; }

.card-name {
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    text-align: center;
    white-space: nowrap;
}

.card-cost {
    font-size: 11px;
    font-weight: 900;
    color: #f1c40f;
    text-shadow: 1px 1px 1px #000;
}

/* PLANT FOOD (绿叶能量豆) */
.food-container {
    display: flex;
    align-items: center;
    background: #1b4332;
    border: 3px solid #2d6a4f;
    border-radius: 20px;
    padding: 4px 10px;
    margin: 0 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: transform 0.1s, box-shadow 0.1s;
}

.food-container:hover {
    transform: scale(1.04);
}

.food-container.active-mode {
    border-color: #52b788;
    box-shadow: 0 0 15px #52b788;
}

.food-slot {
    width: 26px;
    height: 34px;
    margin: 0 3px;
    background: #081c15;
    border: 2px dashed #40916c;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.food-slot.active {
    background: radial-gradient(circle, #74c69d 20%, #2d6a4f 80%);
    border: 2px solid #b7e4c7;
    box-shadow: 0 0 10px #52b788;
}

.food-slot.active::after {
    content: '🍃';
    font-size: 16px;
}

/* ACTION BUTTONS */
.hud-btn {
    width: 44px;
    height: 44px;
    background: #374151;
    border: 2px solid #4b5563;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    transition: background 0.1s, transform 0.1s;
}

.hud-btn:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

.hud-btn.active {
    border-color: #f59e0b;
    background: #78350f;
    box-shadow: 0 0 10px #f59e0b;
}

.hud-btn.no-cd-active {
    border-color: #38bdf8 !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* MODALS & OVERLAYS */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-card {
    background: linear-gradient(135deg, #2e1c0c 0%, #4a2f16 100%);
    border: 4px solid #b38344;
    border-radius: 16px;
    padding: 24px 28px;
    width: 880px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    text-align: center;
}

.modal-card h2 {
    font-size: 32px;
    color: #f3ba2f;
    text-shadow: 2px 2px 4px #000;
    margin-bottom: 16px;
}

.world-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin: 20px 0;
}

.world-card {
    background: #1f2937;
    border: 3px solid #374151;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    text-align: left;
}

.world-card:hover {
    transform: translateY(-4px);
    border-color: #f59e0b;
}

.world-card.egypt {
    background: linear-gradient(180deg, #573a1d 0%, #2b1a0b 100%);
    border-color: #d97706;
}

.world-card.pirate {
    background: linear-gradient(180deg, #13405c 0%, #0c202d 100%);
    border-color: #0284c7;
}

.world-card.endless {
    background: linear-gradient(180deg, #3b0764 0%, #1e1b4b 100%);
    border-color: #a855f7;
}

.world-card.endless:hover {
    border-color: #c084fc;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.world-title {
    font-size: 22px;
    font-weight: bold;
    color: #fef08a;
    margin-bottom: 4px;
}

.world-desc {
    font-size: 13px;
    color: #d1d5db;
    margin-bottom: 12px;
    line-height: 1.4;
}

.level-btn-row {
    display: flex;
    gap: 8px;
}

.level-btn {
    flex: 1;
    padding: 8px 4px;
    background: #374151;
    border: 2px solid #4b5563;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s;
}

.level-btn:hover {
    background: #eab308;
    color: #000;
}

.action-btn {
    padding: 12px 28px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    border: 2px solid #4ade80;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    transition: transform 0.1s;
}

.action-btn:hover {
    transform: scale(1.05);
}

/* SANDBOX PANEL */
#sandboxPanel {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(17, 24, 39, 0.95);
    border: 2px solid #3b82f6;
    border-radius: 10px;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
    width: 280px;
}

#sandboxPanel h4 {
    color: #60a5fa;
    font-size: 14px;
    margin-bottom: 4px;
}

.sandbox-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sandbox-btn {
    padding: 4px 8px;
    font-size: 11px;
    background: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.sandbox-btn:hover {
    background: #2563eb;
}

/* INSTRUCTIONS ACCORDION */
.instructions-box {
    margin-top: 15px;
    width: 1080px;
    background: #1f2937;
    border: 2px solid #374151;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
}

.instructions-box h3 {
    color: #fbbf24;
    margin-bottom: 10px;
}

.instructions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.inst-col h4 {
    color: #38bdf8;
    margin-bottom: 6px;
}

/* Adventure UI: keep the battlefield dominant and actions readable at every size. */
body { justify-content:flex-start; padding:20px 12px 40px; background:#101b16; }
button { font:inherit; }
button:focus-visible, .hud-btn:focus-visible { outline:3px solid #f8d477; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.45; }
.game-header { width:min(1080px,100%); display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.eyebrow { color:#bad6a1; font-size:11px; font-weight:700; letter-spacing:.12em; margin-bottom:5px; }
h1 { font-size:24px; font-weight:800; }
.game-tools, .utility-toolbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.quiet-btn { background:#25372c; color:#e4ecdf; border:1px solid #526247; padding:10px 14px; border-radius:8px; cursor:pointer; min-height:44px; }
.quiet-btn:hover { background:#3b4e31; }
.orientation-tip { display:none; color:#d5dfc5; font-size:13px; margin:0 0 12px; }
.utility-toolbar { width:min(1080px,100%); margin-bottom:10px; }
.utility-toolbar .hud-btn { height:38px; min-width:44px; width:auto !important; padding:0 10px; margin:0; font-size:13px !important; }
#appContainer { width:min(1080px,100%); height:auto; aspect-ratio:1080/640; border:1px solid #526247; box-shadow:0 12px 40px #0006; overflow:hidden; }
#topBar { height:14%; padding:.5% 1.5%; gap:10px; background:linear-gradient(#15241bf5,#15241be0); }
.sun-bank { flex-shrink:0; margin-right:0; padding:4px 10px; }
#seedBar { min-width:0; height:100%; align-items:center; gap:6px; }
.seed-card { flex:0 0 64px; height:76px; padding:2px; }
.seed-card.disabled { cursor:not-allowed; }
.food-container { flex-shrink:0; margin:0; }
#battleInfo { position:absolute; left:0; top:14%; width:100%; height:6%; display:flex; align-items:center; gap:10px; padding:0 16px; background:#14241dea; font-size:11px; white-space:nowrap; pointer-events:none; }
#battleTitle { font-weight:700; color:#e8d99d; }
#waveLabel { color:#e4ecdf; }
.wave-track { height:5px; width:80px; background:#526247; border-radius:8px; overflow:hidden; flex-shrink:0; }
#waveFill { height:100%; background:#c5dd79; transition:width .3s ease; }
#objectiveLabel { margin-left:auto; color:#c5dd79; }
#toast { position:absolute; bottom:12px; left:50%; transform:translate(-50%,8px); background:#17281ff0; color:#fff3c2; border:1px solid #789855; padding:9px 16px; border-radius:8px; max-width:90%; text-align:center; opacity:0; pointer-events:none; transition:opacity .16s,transform .16s; font-size:14px; }
#toast.visible { opacity:1; transform:translate(-50%,0); }
.modal-overlay { position:fixed; inset:0; width:100%; height:100%; padding:20px; z-index:100; overflow:auto; background:#06150fce; backdrop-filter:blur(5px); }
.modal-card { max-width:100%; max-height:100%; overflow:auto; border:1px solid #65764b; background:#1b2a20; border-radius:16px; text-align:left; }
.modal-card h2 { color:#f4e4a5; font-size:28px; text-shadow:none; margin-bottom:0; }
.campaign-panel { width:900px; padding:28px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.muted { color:#bac6b4; font-size:13px; line-height:1.7; margin:10px 0; }
.mode-switch { display:flex; gap:4px; padding:4px; background:#101b16; border-radius:10px; width:fit-content; }
.mode-switch button { border:0; background:transparent; color:#bac6b4; padding:10px 16px; border-radius:7px; min-height:44px; cursor:pointer; }
.mode-switch button[aria-pressed="true"] { background:#c5dd79; color:#1c2c14; font-weight:700; }
.world-grid { grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.world-card { cursor:default; padding:18px; border:1px solid #65764b; box-shadow:none; }
.world-card h3 { font-size:22px; margin-bottom:8px; color:#f4e4a5; }
.world-card:hover { transform:none; }
.world-card.vase { background:#343023; }
.world-desc { min-height:36px; }
.level-btn { min-height:44px; border:1px solid #7f885d; background:#18251c; font-size:13px; }
.level-btn:hover:enabled { background:#c5dd79; color:#1c2c14; }
.plant-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
.picker-plant { border:1px solid #526247; background:#14221a; color:#dce5d1; border-radius:10px; padding:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; cursor:pointer; transition:background .15s,border-color .15s; }
.picker-plant[aria-pressed="true"] { border-color:#c5dd79; background:#34472a; box-shadow:inset 0 0 0 1px #c5dd79; }
.picker-plant span:not(.plant-emoji) { color:#c5dd79; font-size:11px; }
.picker-plant small { font-size:11px; color:#bdc9b4; line-height:1.5; }
.plant-emoji { font-size:28px; }
.goal-strip { background:#101b16; color:#e7d697; padding:12px; font-size:13px; border-radius:8px; line-height:1.6; }
.panel-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; bottom:-28px; background:#1b2a20; padding:16px 0 0; }
.panel-footer p { color:#c5dd79; font-size:13px; }
.action-btn { background:#c5dd79; color:#1c2c14; border:0; font-size:16px; box-shadow:none; min-height:44px; }
.action-btn:hover:enabled { background:#dfecae; }
.pause-panel { width:440px; padding:28px; }
.pause-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.instructions-box { width:min(1080px,100%); background:#18251c; border:1px solid #3d4c35; margin-top:18px; }
.instructions-grid { display:none; }
.instructions-box h3 { color:#c5dd79; font-size:16px; }
#sandboxPanel { max-width:90%; max-height:70%; overflow:auto; z-index:30; }
@media (max-width:900px) {
    body { padding:10px 8px 24px; }
    h1 { font-size:18px; }
    .game-header { gap:8px; }
    .game-header .eyebrow { font-size:9px; }
    .quiet-btn { padding:8px 10px; font-size:12px; }
    #topBar { gap:5px; }
    .seed-card { flex-basis:clamp(32px,5.9vw,64px); height:100%; }
    .card-name { font-size:clamp(7px,1vw,11px); }
    .card-cost { font-size:clamp(9px,1.4vw,14px); }
    .card-icon { width:clamp(17px,3vw,32px); height:clamp(17px,3vw,32px); }
    .sun-bank { padding:2px 6px; border-width:1px; }
    .sun-icon { width:22px; height:22px; margin-right:4px; }
    #sunCount { font-size:16px; }
    .food-slot { width:20px; height:20px; }
    .food-container { gap:3px; padding:4px; }
    #battleInfo { font-size:9px; padding:0 8px; gap:6px; }
    #battleTitle { display:none; }
    .wave-track { width:50px; }
    #toast { font-size:11px; padding:6px 10px; }
    .campaign-panel { padding:20px; }
    .modal-card h2 { font-size:22px; }
    .panel-footer { bottom:-20px; }
}
@media (max-width:600px) and (orientation:portrait) {
    .game-header { flex-direction:column; align-items:flex-start; }
    .orientation-tip { display:block; }
    .game-tools { width:100%; }
    .game-tools button { flex:1; }
    .world-grid { grid-template-columns:1fr; }
    .plant-picker { grid-template-columns:1fr 1fr; }
    .modal-overlay { padding:10px; }
    .campaign-panel { padding:18px; }
    .panel-header { align-items:flex-start; }
    #objectiveLabel { display:none; }
    .food-slot { width:13px; height:13px; }
    .food-container { padding:2px; }
    .sun-icon { width:15px; height:15px; }
    #sunCount { font-size:12px; }
    .panel-footer { bottom:-18px; }
}
@media (max-height:600px) and (orientation:landscape) {
    body { padding:4px 8px; }
    .game-header { margin-bottom:4px; }
    .game-header h1 { font-size:16px; }
    .game-header .eyebrow { display:none; }
    .quiet-btn { min-height:32px; padding:5px 10px; }
    .utility-toolbar { margin-bottom:4px; gap:4px; justify-content:center; }
    .utility-toolbar .hud-btn { height:32px; min-width:36px; padding:0 7px; font-size:11px !important; }
    #appContainer { width:min(1080px,100%,calc((100svh - 84px) * 1.6875)); }
    .instructions-box { display:none; }
    .modal-overlay { padding:8px; }
    .campaign-panel { padding:16px; }
    .plant-picker { grid-template-columns:repeat(5,1fr); }
    .picker-plant { padding:8px; gap:4px; }
    .plant-emoji { font-size:20px; }
    .panel-header { margin-bottom:8px; }
    .panel-footer { bottom:-16px; }
    #topBar .seed-card { flex-basis:9%; }
    #topBar .card-icon { width:20px; height:20px; }
    #topBar .card-name { font-size:8px; }
    #topBar .card-cost { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
}
#appContainer { container-type:inline-size; width:min(1080px,100%,calc((100svh - 150px) * 1.6875)); }
#topBar .seed-card { flex-basis:clamp(28px,5.93cqw,64px); height:100%; max-height:76px; }
#topBar .card-icon { width:clamp(14px,3cqw,32px); height:clamp(14px,3cqw,32px); }
#topBar .card-name { font-size:clamp(7px,1cqw,11px); }
#topBar .card-cost { font-size:clamp(9px,1.3cqw,14px); }
#topBar .sun-icon { width:clamp(15px,3.3cqw,36px); height:clamp(15px,3.3cqw,36px); }
#topBar #sunCount { font-size:clamp(12px,2cqw,22px); }
#topBar .food-slot { width:clamp(13px,3cqw,32px); height:clamp(13px,3cqw,32px); }
#battleInfo { font-size:clamp(8px,1cqw,11px); }
#toast { font-size:clamp(10px,1.3cqw,14px); }
@media (max-height:600px) and (orientation:landscape) { #appContainer { width:min(1080px,100%,calc((100svh - 84px) * 1.6875)); } }
.plant-preview { display:block; width:56px; height:56px; }
.instructions-box summary { cursor:pointer; color:#c5dd79; padding:8px 0; font-size:13px; }
.instructions-box details[open] .instructions-grid { display:grid; }
#foodContainer { cursor:pointer; }
@media (max-height:600px) and (orientation:landscape) { .plant-preview { width:40px; height:40px; } }
@media (max-width:600px) { .instructions-box details[open] .instructions-grid { grid-template-columns:1fr; } .instructions-box .inst-col { grid-column:auto !important; } }