/* The public DUCKMON page (/duckmon). The player itself is styled by lab.css;
   this file frames it like a little handheld and lays out the guide around it. */

.duckmon-page {
    --dm-fire: #ff8700;
    --dm-water: #3b78ff;
    --dm-nature: #16a34a;
    --dm-earth: #b07a12;
    --dm-electric: #e0b400;
    --dm-ice: #38bdf8;
    --dm-light: #fff1a8;
    --dm-shadow: #b4009e;
    --dm-bezel: #222a2d;
    --dm-bezel-edge: #34464b;
    --dm-screen: #0c0c0c;
}

.page-heading .duckmon-intro { max-width: 40rem; margin-inline: auto; font-size: var(--font-size-lg); text-align: center; }

/* ---- play area: the handheld, with "Start here" beside it */
.duckmon-play {
    display: grid;
    grid-template-columns: minmax(0, 42rem) minmax(15rem, 1fr);
    gap: var(--space-8);
    align-items: start;
}
/* Status and the Play button sit above the screen, where they're seen first. */
.duckmon-console { display: flex; min-width: 0; flex-direction: column; }
.duckmon-console .duckmon-lab__status { order: -2; margin-bottom: var(--space-2); }
.duckmon-console .duckmon-lab__actions { order: -1; margin: 0 0 var(--space-4); }
.duckmon-console [data-dm-play] { min-width: 9rem; font-size: var(--font-size-lg); }

.duckmon-page .duckmon-lab__frame {
    position: relative;
    padding: 2.4rem .8rem .8rem;
    border: 1px solid var(--dm-bezel-edge);
    border-radius: 1.4rem;
    background: var(--dm-bezel);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .06);
}
/* The handheld's name and its eight element lights. */
.duckmon-page .duckmon-lab__frame::before {
    content: "DUCKMON";
    position: absolute;
    top: .8rem;
    left: 1.1rem;
    color: #d6e0e2;
    font-family: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
}
.duckmon-page .duckmon-lab__frame::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    width: 7.9rem;
    height: .55rem;
    background:
        radial-gradient(circle at .275rem 50%, var(--dm-fire) .26rem, transparent .28rem),
        radial-gradient(circle at 1.275rem 50%, var(--dm-water) .26rem, transparent .28rem),
        radial-gradient(circle at 2.275rem 50%, var(--dm-nature) .26rem, transparent .28rem),
        radial-gradient(circle at 3.275rem 50%, var(--dm-earth) .26rem, transparent .28rem),
        radial-gradient(circle at 4.275rem 50%, var(--dm-electric) .26rem, transparent .28rem),
        radial-gradient(circle at 5.275rem 50%, var(--dm-ice) .26rem, transparent .28rem),
        radial-gradient(circle at 6.275rem 50%, var(--dm-light) .26rem, transparent .28rem),
        radial-gradient(circle at 7.275rem 50%, var(--dm-shadow) .26rem, transparent .28rem);
}
.duckmon-page .duckmon-lab__screen {
    border-radius: var(--radius-md);
    background: var(--dm-screen);
    box-shadow: 0 0 0 3px #111618;
}

/* ---- Start here */
.duckmon-start {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.duckmon-start h2 { margin-top: 0; }
.duckmon-start h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-md); }
.duckmon-start__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: dm-step; }
.duckmon-start__steps li { position: relative; padding-left: 2.4rem; counter-increment: dm-step; }
.duckmon-start__steps li::before {
    content: counter(dm-step);
    position: absolute;
    top: -.1rem;
    left: 0;
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-action);
    color: var(--color-text-on-action);
    font-weight: 800;
}
.duckmon-start__phone { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.duckmon-keys { display: grid; gap: var(--space-2); margin: 0; }
.duckmon-keys div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.duckmon-keys dt { white-space: nowrap; }
.duckmon-keys dd { margin: 0; font-size: var(--font-size-sm); }
.duckmon-page kbd {
    display: inline-block;
    min-width: 1.6rem;
    padding: .05rem .4rem;
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 3px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-family: var(--font-family-mono);
    font-size: .8rem;
    line-height: 1.5;
    text-align: center;
}

/* ---- guide sections */
.duckmon-section { margin-top: var(--space-12); }
.duckmon-section > h2 { margin-bottom: var(--space-3); }
.duckmon-section > p { max-width: 46rem; }
.duckmon-page .duckmon-lab__saves { margin-top: var(--space-12); }

.duckmon-list { display: grid; gap: var(--space-3); max-width: 46rem; margin: 0; padding-left: 1.2rem; }

.duckmon-battle__layout {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}
.duckmon-sample {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background: var(--dm-screen);
    color: #cccccc;
    font-family: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
    font-size: .85rem;
    line-height: 1.5;
}
.duckmon-sample .dm-key { color: #f9f1a5; font-weight: 700; }
.duckmon-sample .dm-dim { color: #8a8a8a; }
.duckmon-sample .dm-fire { color: #ff8700; font-weight: 700; }
.duckmon-sample .dm-good { color: #16c60c; font-weight: 700; }
.duckmon-sample .dm-gold { color: #ffd700; font-weight: 700; }

/* The adventure is a real sequence: a numbered trail from Sunny Pond to the Gate. */
.duckmon-path {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-6) 0;
    padding: 0;
    list-style: none;
    counter-reset: dm-stop;
}
.duckmon-path__stop {
    position: relative;
    display: grid;
    gap: var(--space-1);
    align-content: start;
    padding-top: 2.6rem;
    counter-increment: dm-stop;
}
.duckmon-path__stop::before {
    content: counter(dm-stop);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 3px solid var(--color-action);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-action);
    font-weight: 800;
}
.duckmon-path__stop::after {
    content: "";
    position: absolute;
    top: .95rem;
    left: 2rem;
    right: calc(-1 * var(--space-3));
    border-top: 3px dotted var(--color-border-strong);
}
.duckmon-path__stop:last-child::after { display: none; }
.duckmon-path__stop span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.duckmon-path__stop--league::before { border-color: var(--dm-earth); color: var(--dm-earth); }
.duckmon-path__stop--gate::before { border-color: var(--dm-shadow); background: var(--dm-shadow); color: #fff; }

.duckmon-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); margin: 0; }
.duckmon-facts div { padding-top: var(--space-3); border-top: 2px solid var(--color-border); }
.duckmon-facts dt { font-size: var(--font-size-lg); font-weight: 800; }
.duckmon-facts dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }

/* Element chart: each element as a coloured light, like the handheld's. */
.duckmon-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-2) var(--space-8); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.duckmon-chart li { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.duckmon-chart li > .dm-el { font-weight: 800; }
.duckmon-chart__beats { color: var(--color-text-muted); }
.dm-el { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-text); }
.dm-el::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--dm-el-color); box-shadow: 0 0 0 1px rgb(0 0 0 / .25); }
.dm-el--fire { --dm-el-color: var(--dm-fire); }
.dm-el--water { --dm-el-color: var(--dm-water); }
.dm-el--nature { --dm-el-color: var(--dm-nature); }
.dm-el--earth { --dm-el-color: var(--dm-earth); }
.dm-el--electric { --dm-el-color: var(--dm-electric); }
.dm-el--ice { --dm-el-color: var(--dm-ice); }
.dm-el--light { --dm-el-color: var(--dm-light); }
.dm-el--shadow { --dm-el-color: var(--dm-shadow); }

.duckmon-faq__item { max-width: 46rem; border-bottom: 1px solid var(--color-border); }
.duckmon-faq__item summary { min-height: var(--touch-target-min); padding: var(--space-3) 0; font-weight: 700; cursor: pointer; }
.duckmon-faq__item p { margin: 0 0 var(--space-4); }
.duckmon-credits p { max-width: 46rem; }

@media (max-width: 62rem) {
    .duckmon-play, .duckmon-battle__layout { grid-template-columns: minmax(0, 1fr); }
    .duckmon-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duckmon-path { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .duckmon-path__stop { padding: .2rem 0 0 2.9rem; min-height: 2.2rem; }
    .duckmon-path__stop::after { top: 2rem; bottom: calc(-1 * var(--space-4)); left: .95rem; right: auto; border-top: 0; border-left: 3px dotted var(--color-border-strong); }
}
@media (max-width: 40rem) {
    .duckmon-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
    .duckmon-page .duckmon-lab__frame { padding: 2.2rem .45rem .45rem; border-radius: 1rem; }
    .duckmon-keys div { grid-template-columns: 1fr; gap: var(--space-1); }
}