:root {
    --ink: #15130f;
    --paper: #f4efe4;
    --paper-2: #e7dfcf;
    --night: #11151c;
    --night-2: #1a2029;
    --line: rgba(255, 255, 255, .13);
    --lime: #d7ff3f;
    --coral: #ff684f;
    --blue: #64d7ff;
    --muted: #9ca4ae;
    --radius: 24px;
    --shadow: 0 24px 80px rgba(0, 0, 0, .34);
    --card-gap: 16px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    min-height: 100vh;
    color: #f7f3ea;
    background:
        radial-gradient(circle at 15% 10%, rgba(100, 215, 255, .09), transparent 28rem),
        radial-gradient(circle at 90% 75%, rgba(215, 255, 63, .06), transparent 24rem),
        var(--night);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dp-site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    height: 72px;
    border-bottom: 1px solid rgba(255,255,255,.13);
    background: rgba(4,18,37,.94);
    box-shadow: 0 10px 32px rgba(0,0,0,.18);
    backdrop-filter: blur(16px);
}
.dp-site-header-inner {
    width: min(1400px, calc(100% - 40px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}
.dp-site-brand {
    flex: 0 0 auto;
    color: #fbbf24;
    font: 950 25px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: -1px;
}
.dp-site-brand small {
    display: block;
    margin-top: 5px;
    color: #a9bdd7;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.dp-site-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 28px;
}
.dp-site-nav > a,
.dp-games-menu > summary {
    color: #d8e5f5;
    font-size: 15px;
    font-weight: 700;
}
.dp-site-nav > a:hover,
.dp-games-menu > summary:hover { color: #fbbf24; }
.dp-games-menu { position: relative; }
.dp-games-menu summary {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    cursor: pointer;
}
.dp-games-menu summary::-webkit-details-marker { display: none; }
.dp-games-menu summary i { color: #fbbf24; font-size: 10px; font-style: normal; }
.dp-games-menu > div {
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    width: 200px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: #0b2345;
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
.dp-games-menu > div a {
    display: block;
    padding: 10px;
    border-radius: 7px;
    color: #fff;
    white-space: nowrap;
}
.dp-games-menu > div a:hover,
.dp-games-menu > div a.active { background: rgba(251,191,36,.11); color: #fbbf24; }
.dp-site-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.dp-site-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    color: #fff;
    font-weight: 850;
}
.dp-site-button:hover { border-color: #fbbf24; color: #fbbf24; }
.dp-site-button.gold { border-color: #d99a00; background: #fbbf24; color: #071a35; }
.dp-site-button.gold:hover { background: #ffd056; color: #071a35; }
.dp-site-button img { width: 28px; height: 28px; object-fit: cover; border: 2px solid rgba(7,26,53,.55); border-radius: 50%; }
.landing-page,
.public-result-page {
    background:
        linear-gradient(180deg, rgba(17,21,28,.82), rgba(17,21,28,.94)),
        url('drawpunkt-lobby-bg.webp') center top / cover fixed no-repeat,
        var(--night);
}
.landing-page .brand-row,
.landing-page .entry-page,
.landing-page .online-community,
.landing-page .home-gallery,
.landing-page footer,
.public-result-page .result-shell { position: relative; z-index: 1; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: .12em;
    font: 900 clamp(1.15rem, 3vw, 1.65rem)/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.07em;
}
.brand span { color: var(--lime); }

.entry-page {
    min-height: calc(100vh - 140px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 30px;
    padding: 54px 0 70px;
}
.entry-intro { max-width: 790px; text-align: center; }
.entry-intro h1 { margin: 0; font: 500 clamp(2.8rem, 7vw, 5.8rem)/1 Georgia, serif; letter-spacing: -.05em; }
.entry-intro > p:last-child { max-width: 700px; margin: 18px auto 0; color: #aeb6c0; font-size: 1.05rem; line-height: 1.65; }
.lobby-card {
    width: min(1200px, 100%);
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 25px;
    background: rgba(26,32,41,.78);
    box-shadow: var(--shadow);
}
.lobby-card-compact { margin-top: var(--card-gap); padding: 18px 24px; }
.lobby-card-compact .lobby-status { padding: 0; border-bottom: 0; }
.lobby-card-compact .entry-rules { margin-top: 16px; padding-top: 0; border-top: 0; }
.entry-visual {
    min-height: auto;
    padding: var(--card-gap) 0 0;
}
.entry-visual img {
    display: block;
    width: min(1200px, 100%);
    height: auto;
    border: 1px solid rgba(215,255,63,.22);
    border-radius: 24px;
    box-shadow: 0 32px 90px rgba(0,0,0,.4);
}
.lobby-status { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lobby-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px var(--lime); }
.lobby-status span { color: #d8dee4; font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.lobby-status b { display: grid; width: 34px; height: 34px; margin-left: auto; place-items: center; border: 1px solid rgba(215,255,63,.4); border-radius: 50%; color: var(--lime); font: 500 1.3rem/1 Georgia, serif; }
.lobby-copy { padding: 27px 0 22px; }
.lobby-copy small { color: var(--lime); font-size: .68rem; font-weight: 900; letter-spacing: .15em; }
.lobby-copy h2 { margin: 8px 0 7px; font: 500 clamp(1.8rem, 4vw, 2.7rem)/1.08 Georgia, serif; }
.lobby-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.entry-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.entry-rules span { color: #b8c0c9; font-size: .72rem; line-height: 1.45; }
.entry-rules b { display: block; margin-bottom: 6px; color: var(--coral); font: 800 .68rem/1 ui-monospace, monospace; }

.landing-shell, .result-shell, .color-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}
.brand-row, .play-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line);
}
.quick-entry-bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin-top: var(--card-gap);
    padding: 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: rgba(20,25,33,.88);
    box-shadow: 0 16px 44px rgba(0,0,0,.24);
    backdrop-filter: blur(16px);
}
.quick-entry-bar input {
    min-width: 0;
    height: 50px;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 13px;
    color: #fff;
    background: rgba(255,255,255,.055);
    outline: none;
}
.quick-entry-bar input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(215,255,63,.09); }
.quick-entry-bar input[readonly] { color: var(--lime); border-color: rgba(215,255,63,.3); }
.quick-entry-bar .primary-action,
.quick-entry-bar .switch-player { min-height: 50px; white-space: nowrap; }
.quick-entry-bar .primary-action { border-radius: 13px; padding-inline: 34px; }
.quick-entry-bar .switch-player {
    padding: 0 20px;
    border: 1px solid rgba(215,255,63,.45);
    border-radius: 13px;
    color: var(--lime);
    background: rgba(215,255,63,.045);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.quick-entry-bar .switch-player:hover { transform: translateY(-1px); border-color: var(--lime); background: rgba(215,255,63,.1); }
.quick-entry-bar .form-message { grid-column: 1 / -1; margin: 0 4px; }
.quick-entry-bar .form-message:empty { display: none; }
.identity-pill, .player-name, .secret-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #dce1e8;
    font-size: .84rem;
    font-weight: 750;
}
.online-dot, .secret-badge i {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--lime);
    box-shadow: 0 0 18px var(--lime);
}

.hero-grid {
    min-height: calc(100vh - 78px);
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: clamp(32px, 8vw, 110px);
    align-items: center;
    padding: 72px 0 92px;
}
.eyebrow {
    margin: 0 0 13px;
    color: var(--lime);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.hero-copy h1, .reveal-heading, .color-heading {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .94;
}
.hero-copy h1 { max-width: 760px; font-size: clamp(3.7rem, 8.4vw, 8.2rem); }
.hero-copy h1 em { color: var(--lime); font-weight: 500; }
.lead {
    max-width: 660px;
    margin: 28px 0 34px;
    color: #bdc4cd;
    font-size: clamp(1.04rem, 1.7vw, 1.28rem);
    line-height: 1.7;
}
.primary-action {
    border: 0;
    border-radius: 999px;
    padding: 18px 27px;
    color: var(--ink);
    background: var(--lime);
    font-weight: 950;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 14px 45px rgba(215, 255, 63, .14);
    transition: transform .18s ease, filter .18s ease;
}
.primary-action:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary-action:disabled { opacity: .45; cursor: wait; transform: none; }
.button-note { display: block; margin-top: 13px; color: var(--muted); font-size: .78rem; }
.join-box { max-width: 680px; margin-top: 8px; }
.join-box > label { display: block; margin-bottom: 9px; color: var(--lime); font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.join-box > div { display: flex; gap: 10px; }
.join-box input {
    min-width: 0;
    flex: 1;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 0 21px;
    color: white;
    background: rgba(255,255,255,.055);
    outline: none;
}
.join-box input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(215,255,63,.08); }
.remembered-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px 13px 18px;
    border: 1px solid rgba(215,255,63,.35);
    border-radius: 22px;
    background: rgba(215,255,63,.055);
}
.remembered-player > span { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; }
.remembered-player i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }
.remembered-player small { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.remembered-player strong { color: white; font-size: 1.05rem; }
.setup-warning {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 104, 79, .45);
    border-radius: 14px;
    color: #ffd5ce;
    background: rgba(255, 104, 79, .09);
}

.mystery-card {
    position: relative;
    min-height: 520px;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    box-shadow: var(--shadow);
}
.mystery-card::before {
    content: "";
    position: absolute;
    inset: -80px -120px auto auto;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(215,255,63,.3);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(215,255,63,.035), 0 0 0 90px rgba(215,255,63,.02);
}
.mystery-number { color: var(--lime); font: 850 .78rem/1 ui-monospace, monospace; letter-spacing: .18em; }
.mystery-card h2 { position: relative; max-width: 410px; margin: 115px 0 22px; font: 500 2.75rem/1.05 Georgia, serif; }
.mystery-card p { position: relative; max-width: 440px; color: #b6bdc6; line-height: 1.7; }
.mystery-card ul { position: relative; margin: 25px 0 0; padding: 0; list-style: none; }
.mystery-card li { padding: 12px 0; border-top: 1px solid var(--line); color: #d8dde3; line-height: 1.45; }
.rule-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 38px; }
.rule-strip article { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 18px; border-top: 2px solid var(--lime); background: rgba(255,255,255,.025); }
.rule-strip b { grid-row: 1 / 3; color: var(--lime); font: 500 2.1rem/1 Georgia, serif; }
.rule-strip span { color: #eef1f4; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.rule-strip small { color: var(--muted); line-height: 1.45; }
.landing-shell > footer {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 100%;
    padding: 34px 0 28px;
    color: #89929d;
    font-size: .76rem;
    text-align: center;
}
.landing-shell > footer strong { color: #b9c1ca; font-weight: 650; }
.home-gallery {
    margin-top: var(--card-gap);
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: rgba(20,25,33,.86);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.online-community {
    position: fixed !important;
    z-index: 20 !important;
    top: 96px;
    right: 18px;
    width: min(290px, calc(100vw - 36px));
    max-height: calc(100vh - 114px);
    padding: 17px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(20,25,33,.94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.online-community > header { align-items: flex-start; margin-bottom: 12px; }
.online-community h2 { margin-top: 3px; font-size: 1.28rem; line-height: 1.05; }
.online-community > header, .home-gallery > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.online-community h2, .home-gallery h2 { margin: 0; font: 500 clamp(1.8rem, 4vw, 2.7rem)/1 Georgia, serif; }
.landing-page .online-community > header { align-items: flex-start; margin-bottom: 12px; }
.landing-page .online-community h2 { margin-top: 3px; font-size: 1.28rem; line-height: 1.05; }
.online-community header strong, .home-gallery header strong { color: var(--lime); font-size: .82rem; }
.online-player-list { display: grid; gap: 7px; max-height: calc(100vh - 225px); padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--lime) rgba(255,255,255,.06); scrollbar-width: thin; }
.online-player-chip { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.035); }
.online-player-chip i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(215,255,63,.8); animation: community-dot-blink 1.25s ease-in-out infinite; }
.online-player-chip.drawing i { background: var(--lime); box-shadow: 0 0 10px rgba(215,255,63,.75); animation: none; }
.online-player-chip b { color: #edf0f3; font-size: .78rem; }
.online-player-chip small { margin-left: 2px; color: #bfe88a; font-size: .58rem; letter-spacing: .08em; }
.online-player-chip.drawing small { color: var(--lime); animation: community-status-blink 1.05s ease-in-out infinite; }
@keyframes community-dot-blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.72); } }
@keyframes community-status-blink { 0%,100% { opacity: 1; text-shadow: 0 0 8px rgba(215,255,63,.65); } 50% { opacity: .35; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .online-player-chip i, .online-player-chip.drawing small { animation: none; } }
.empty-community, .gallery-empty { width: 100%; margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); text-align: center; }
.home-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.home-art-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); transition: transform .18s ease, border-color .18s ease; }
.home-art-card:hover { transform: translateY(-3px); border-color: rgba(215,255,63,.55); }
.home-art-card > a { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: white; }
.home-art-card img { width: 100%; height: 100%; object-fit: contain; }
.home-art-card > div { padding: 12px; }
.home-art-card b, .home-art-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-art-card b { font-size: .82rem; }
.home-art-card small { margin-top: 5px; color: var(--muted); font-size: .65rem; }
.like-button,.download-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 11px;border:1px solid rgba(21,19,15,.18);border-radius:999px;color:inherit;background:transparent;text-decoration:none;font:inherit;font-size:.7rem;font-weight:900;cursor:pointer;transition:.18s ease}.like-button:hover,.download-button:hover{transform:translateY(-1px);border-color:#a9ca18}.like-button.liked{color:#fff;border-color:#d42f57;background:#d42f57}.gallery-like{margin-top:10px;color:#e8edf1;border-color:var(--line)}.gallery-like.liked{border-color:#d42f57}.gallery-like b{display:inline;font-size:.72rem}.artwork-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.artist-reactions{display:flex;gap:7px;margin-top:7px}.artist-reactions .like-button,.artist-reactions .download-button{min-height:32px;padding:5px 9px}.artist-ledger .artist-reactions{grid-column:auto}.artwork-variant-bar .download-button,.artwork-variant-bar .like-button{color:var(--ink)}
.gallery-pagination { display: flex; justify-content: center; gap: 7px; padding-top: 25px; }
.gallery-pagination a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #dce1e6; font-weight: 850; }
.gallery-pagination a.active { color: var(--ink); border-color: var(--lime); background: var(--lime); }

.play-header {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}
.secret-badge { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; letter-spacing: .11em; }
.play-shell { width: min(1100px, calc(100% - 28px)); margin: 0 auto; padding: 44px 0 70px; }
.player-roster {
    position: fixed;
    z-index: 8;
    top: 98px;
    right: 18px;
    width: min(230px, calc(100vw - 36px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(26,32,41,.92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(15px);
}
.player-roster > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.player-roster small { color: var(--muted); font-size: .58rem; letter-spacing: .11em; }
.player-roster strong { color: var(--lime); font-size: .68rem; }
.player-roster ol { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.player-roster ol { max-height: calc(100vh - 205px); padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--lime) rgba(255,255,255,.06); scrollbar-width: thin; }
.player-roster li { display: flex; gap: 9px; align-items: center; padding: 7px; border-radius: 10px; color: #dce2e7; font-size: .78rem; }
.player-roster li.you { color: var(--ink); background: var(--lime); font-weight: 850; }
.player-roster li.empty { color: #737d87; border: 1px dashed rgba(255,255,255,.12); font-style: italic; }
.player-roster li b { color: var(--coral); font: 700 .62rem/1 ui-monospace, monospace; }
.player-roster li.you b { color: #6a2c21; }
.waiting-panel, .saving-panel {
    min-height: calc(100vh - 190px);
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}
.waiting-panel h1, .saving-panel h1 { max-width: 700px; margin: 8px 0 10px; font: 500 clamp(2.2rem, 6vw, 4.8rem)/1 Georgia, serif; }
.waiting-panel > p:last-of-type, .saving-panel p { color: var(--muted); }
.pulse-orbit {
    display: grid;
    width: 110px;
    height: 110px;
    margin-bottom: 28px;
    place-items: center;
    border: 1px solid rgba(215,255,63,.48);
    border-radius: 50%;
    box-shadow: 0 0 0 13px rgba(215,255,63,.035), 0 0 45px rgba(215,255,63,.12);
    animation: breathe 1.8s ease-in-out infinite;
}
.pulse-orbit span { font: 500 3.3rem/1 Georgia, serif; color: var(--lime); }
@keyframes breathe { 50% { transform: scale(1.055); box-shadow: 0 0 0 20px rgba(215,255,63,.025), 0 0 70px rgba(215,255,63,.18); } }
.waiting-line { display: flex; gap: 7px; margin-top: 32px; }
.waiting-line i { width: 28px; height: 3px; background: #343b45; animation: loading 1.2s infinite alternate; }
.waiting-line i:nth-child(2){ animation-delay:.15s}.waiting-line i:nth-child(3){animation-delay:.3s}.waiting-line i:nth-child(4){animation-delay:.45s}.waiting-line i:nth-child(5){animation-delay:.6s}
@keyframes loading { to { background: var(--lime); transform: translateY(-3px); } }

.task-briefing { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; align-items:stretch; margin-bottom:20px; }
.task-briefing.no-reference { grid-template-columns:1fr; }
.prompt-card { position:relative; display:flex; flex-direction:column; margin:0; padding:20px 24px 18px 30px; border:1px solid rgba(205,255,45,.22); border-left:5px solid var(--lime); border-radius:0 22px 22px 22px; background:var(--night-2); }
.prompt-card::before { content:""; position:absolute; left:14px; top:-11px; width:20px; height:20px; background:var(--night-2); border-left:1px solid rgba(205,255,45,.22); border-top:1px solid rgba(205,255,45,.22); transform:rotate(45deg); }
.prompt-card small { color: var(--lime); font-weight: 900; letter-spacing: .16em; }
.prompt-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.turn-countdown { min-width:70px; padding:7px 10px; border:1px solid rgba(205,255,45,.48); border-radius:999px; color:var(--lime); background:rgba(205,255,45,.08); font:900 .88rem/1 system-ui,sans-serif; text-align:center; letter-spacing:.08em; }
.turn-countdown.urgent { color:#fff; border-color:#ff506d; background:rgba(215,52,87,.78); animation:turnCountdownPulse .7s ease-in-out infinite alternate; }
@keyframes turnCountdownPulse { to { transform:scale(1.06); box-shadow:0 0 18px rgba(255,80,109,.48); } }
.prompt-card h1 { margin:9px 0 8px; font:500 clamp(1rem,1.88vw,1.6rem)/1.18 Georgia,serif; white-space:pre-line; overflow-wrap:anywhere; }
.prompt-card p { margin:auto 0 0; padding-top:12px; border-top:1px solid rgba(205,255,45,.14); color:var(--lime); font-size:.78rem; font-weight:800; line-height:1.45; letter-spacing:.025em; }
.prompt-help-line{display:flex;align-items:center;gap:14px}.prompt-help-line>span{min-width:0}.game-help-button{flex:0 0 30px;display:grid;width:30px;height:30px;margin-left:auto;padding:0;place-items:center;border:1px solid var(--lime);border-radius:50%;background:rgba(205,255,45,.08);color:var(--lime);font:900 1rem/1 Arial;cursor:pointer;box-shadow:0 0 0 0 rgba(205,255,45,.28);animation:helpPulse 2s infinite}.game-help-button:hover{background:var(--lime);color:var(--night)}@keyframes helpPulse{50%{box-shadow:0 0 0 7px rgba(205,255,45,0)}}
.game-help-dialog{width:min(920px,calc(100% - 28px));max-height:calc(100vh - 30px);padding:0;border:0;border-radius:20px;background:transparent;color:var(--paper)}.game-help-dialog::backdrop{background:rgba(5,9,15,.82);backdrop-filter:blur(5px)}.game-help-card{padding:24px;border:1px solid rgba(205,255,45,.35);border-radius:20px;background:var(--night-2);box-shadow:0 25px 90px rgba(0,0,0,.55)}.game-help-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid rgba(205,255,45,.18)}.game-help-card header small{color:var(--lime);font-weight:900;letter-spacing:.13em}.game-help-card h2{margin:5px 0 0;font:500 clamp(1.35rem,3vw,2rem)/1.1 Georgia,serif}.game-help-card header button{display:grid;flex:0 0 38px;width:38px;height:38px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:var(--paper);font-size:1.7rem;cursor:pointer}.game-help-languages{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.game-help-languages section{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.035)}.game-help-languages strong{display:block;margin-bottom:10px;color:var(--lime);font-size:1rem}.game-help-languages p{margin:0 0 12px;color:var(--paper);font-size:.9rem;line-height:1.6}.game-help-languages p:last-child{margin-bottom:0}
.task-reference { display:flex; flex-direction:column; justify-content:center; width:260px; height:260px; margin:0; padding:11px; border:1px solid rgba(205,255,45,.28); border-radius:14px; background:var(--night-2); text-align:center; overflow:hidden; }
.task-reference img { display:block; width:100%; height:210px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.035); }
.task-reference figcaption { margin-top:8px; color:var(--paper); font-size:.78rem; font-weight:900; letter-spacing:.03em; }
.tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin: 14px 0;
}
.tool, .tool-row label, .quiet-link {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 14px;
    color: #e9edf0;
    background: rgba(255,255,255,.04);
    font-weight: 760;
    cursor: pointer;
}
.tool.active { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.tool.danger { color: #ffc5bb; }
.tool-row label { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.tool-row input { width: 110px; accent-color: var(--lime); }

.canvas-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid #2d343d;
    border-radius: 20px;
    background: white;
    box-shadow: var(--shadow);
    touch-action: none;
    user-select: none;
}
.canvas-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#drawCanvas { z-index: 2; cursor: crosshair; }
.connector {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: var(--connector-size, 11.5%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px dashed rgba(255,104,79,.72);
    border-bottom: 2px dashed rgba(255,104,79,.72);
    color: #5a251d;
    background: rgba(255,104,79,.13);
    font-size: .69rem;
    font-weight: 950;
    letter-spacing: .11em;
    pointer-events: none;
}
.connector-top {
    top: 0;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 7px 13px;
    color: #6f2117;
    background: transparent;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff;
}
.connector-bottom { bottom: 0; }
.submit-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; }
.submit-row p { max-width: 620px; color: var(--muted); font-size: .83rem; line-height: 1.55; }

.result-shell, .color-shell { padding: 16px 0 55px; }
.result-shell { width: min(920px, calc(100% - 28px)); }
.result-top, .color-top { min-height: 66px; display: flex; align-items: center; justify-content: space-between; }
.quiet-link:hover { border-color: var(--lime); }
.reveal-heading, .color-heading { margin-top: 45px; }
.reveal-heading h1, .color-heading h1 { margin: 0; font: 500 clamp(3.2rem, 8vw, 7rem)/.94 Georgia, serif; letter-spacing: -.055em; }
.reveal-heading > p:last-child, .color-heading p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.reveal-heading { margin: 26px auto 20px; text-align: center; }
.reveal-heading h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.reveal-heading > p:last-child { margin: 10px 0 0; font-size: .94rem; }
.reveal-subtitle { max-width: 680px; margin: 18px 0 32px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.final-art-card {
    width: min(560px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 9px solid var(--paper-2);
    border-radius: 10px;
    background: white;
    box-shadow: var(--shadow);
}
.final-art-card img { display: block; width: 100%; max-height: 61vh; height: auto; object-fit: contain; background: white; }
.artwork-variant-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: var(--ink); background: #fff; border-top: 1px solid rgba(21,19,15,.12); }
.artwork-variant-bar strong { font-size: .82rem; }
.artwork-original { appearance: none; border: 1px solid rgba(21,19,15,.2); border-radius: 999px; padding: 8px 12px; color: var(--ink); background: transparent; font: inherit; font-size: .68rem; font-weight: 900; cursor: pointer; }
.artwork-original:hover, .artwork-original.is-active { border-color: #7d9422; background: var(--acid); }
.artist-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; color: var(--ink); background: var(--paper-2); }
.artist-ledger article, .artist-ledger .artist-choice { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 13px; border: 1px solid rgba(21,19,15,.14); border-radius: 13px; color: inherit; background: transparent; text-align: left; font: inherit; }
.artist-ledger .artist-choice { cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.artist-ledger .artist-choice:hover { border-color: #7d9422; background: rgba(215,255,63,.28); transform: translateY(-2px); }
.artist-ledger .artist-choice.is-active { border-color: #7d9422; background: var(--acid); box-shadow: 0 0 0 2px rgba(125,148,34,.12); }
.artist-ledger b { grid-row: 1 / 3; color: #887a65; font: 500 1.6rem/1 Georgia, serif; }
.artist-ledger span { font-weight: 850; }
.artist-ledger small { color: #786f61; }
.color-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 22px; border: 1px solid rgba(215,255,63,.28); border-radius: var(--radius); background: rgba(215,255,63,.05); }
.color-callout h2, .color-gallery h2 { margin: 0 0 8px; font: 500 2rem/1 Georgia, serif; }
.color-callout p { margin: 0; color: var(--muted); }
.color-gallery { margin-top: 50px; }
.color-gallery > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.color-gallery figure { overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: white; }
.color-gallery img { display: block; width: 100%; }
.color-gallery figcaption { margin: 0; padding: 12px; color: var(--ink); background: var(--paper); font-weight: 800; }

.color-toolbar { position: sticky; top: 10px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(17,21,28,.92); backdrop-filter: blur(14px); }
.palette { display: flex; flex-wrap: wrap; gap: 7px; }
.palette button { width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); cursor: pointer; }
.palette button.active { border-color: white; box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--lime); }
.color-canvas-wrap { overflow: hidden; border: 12px solid var(--paper-2); border-radius: 14px; background: white; box-shadow: var(--shadow); touch-action: none; }
#colorCanvas { display: block; width: 100%; height: auto; touch-action: none; }
.color-submit { display: flex; justify-content: flex-end; padding-top: 18px; }
.form-message { min-height: 1.4em; color: #ffd0c7; font-weight: 700; }

@media (min-width: 1101px) {
    .landing-page .landing-shell { padding-right: 305px; }
}

@media (max-width: 1100px) {
    .online-community {
        position: relative !important;
        z-index: 1 !important;
        top: auto;
        right: auto;
        width: 100%;
        max-height: none;
        margin-bottom: 20px;
    }
    .online-player-list { max-height: 300px; }
}

@media (max-width: 820px) {
    .brand-row, .play-header { min-height: 66px; }
    .quick-entry-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .quick-entry-bar .switch-player { grid-column: 1; grid-row: 2; }
    .quick-entry-bar .primary-action { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
    .hero-grid { grid-template-columns: 1fr; padding: 48px 0 60px; }
    .mystery-card { min-height: 390px; padding: 28px; }
    .mystery-card h2 { margin-top: 82px; font-size: 2.15rem; }
    .player-name { display: none; }
    .play-shell { width: min(100% - 18px, 1100px); padding-top: 22px; }
    .player-roster { position: static; width: 100%; max-height: 310px; margin-bottom: 16px; padding: 11px; }
    .player-roster ol { display: grid; max-height: 235px; overflow-x: hidden; overflow-y: auto; padding: 0 4px 0 0; }
    .player-roster li { width: 100%; }
    .task-briefing { grid-template-columns:1fr; }
    .prompt-card { padding:18px 18px 18px 24px; }
    .prompt-card h1 { font-size:clamp(.96rem,4.3vw,1.32rem); }
    .task-reference { width:min(100%,260px); height:260px; margin:0 auto; }
    .task-reference img { height:210px; }
    .game-help-card{padding:18px}.game-help-languages{grid-template-columns:1fr}.game-help-dialog{max-height:calc(100vh - 16px)}
    .tool-row { gap: 6px; }
    .tool, .tool-row label { padding: 9px 11px; font-size: .78rem; }
    .submit-row, .color-callout { align-items: stretch; flex-direction: column; }
    .submit-row .primary-action, .color-callout .primary-action { width: 100%; text-align: center; }
    .artist-ledger, .color-gallery > div { grid-template-columns: 1fr; }
    .home-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .dp-site-header { height: 64px; }
    .dp-site-header-inner { width: calc(100% - 16px); gap: 7px; }
    .dp-site-brand { min-width: 0; font-size: 18px; letter-spacing: -.5px; }
    .dp-site-brand small { font-size: 7px; letter-spacing: .8px; white-space: nowrap; }
    .dp-site-actions { gap: 4px; }
    .dp-site-button { min-height: 34px; padding: 6px 8px; font-size: 11px; white-space: nowrap; }
    .dp-site-button img { width: 23px; height: 23px; }
    .landing-shell, .result-shell, .color-shell { width: min(100% - 22px, 1180px); }
    .quick-entry-bar { grid-template-columns: 1fr; }
    .quick-entry-bar .switch-player,
    .quick-entry-bar .primary-action { grid-column: 1; grid-row: auto; width: 100%; }
    .identity-pill { max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero-copy h1 { font-size: clamp(3.1rem, 18vw, 5rem); }
    .join-box > div { flex-direction: column; }
    .join-box .remembered-player { align-items: stretch; padding: 17px; }
    .remembered-player .primary-action { width: 100%; }
    .join-box input { min-height: 54px; }
    .entry-page { align-content: start; padding-top: 35px; }
    .entry-rules { grid-template-columns: 1fr; }
    .entry-rules span { display: grid; grid-template-columns: 32px 1fr; align-items: center; }
    .entry-rules b { margin: 0; }
    .mystery-card { border-radius: 24px; }
    .rule-strip { grid-template-columns: 1fr; }
    .secret-badge { padding: 8px 10px; font-size: .68rem; }
    .connector { height: 34px; font-size: .54rem; }
    .final-art-card, .color-canvas-wrap { border-width: 6px; }
    .final-art-card img { max-height: 56vh; }
    .artwork-variant-bar { align-items: stretch; flex-direction: column; }
    .artwork-original { width: 100%; }
    .online-community > header, .home-gallery > header { align-items: flex-start; }
    .home-gallery-grid { grid-template-columns: 1fr; }
    .landing-page,
    .public-result-page { background-position: 50% center; background-attachment: scroll; }
    .play-body .canvas-stage { height: clamp(390px, 58vh, 590px); aspect-ratio: auto !important; }
    .play-body .prompt-card h1 { font-size:clamp(.95rem,4.15vw,1.3rem); }
}

@media (max-width: 1050px) {
    .dp-site-nav { display: none; }
}
.remembered-actions { display: flex; align-items: center; gap: 10px; }
.switch-player { min-height: 48px; padding: 0 16px; border: 1px solid rgba(199,255,31,.45); border-radius: 999px; background: transparent; color: #c7ff1f; font: inherit; font-size: .72rem; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
.switch-player:hover { background: rgba(199,255,31,.1); }
.switch-player:disabled { opacity: .55; cursor: wait; }
@media (max-width: 720px) { .remembered-actions { width: 100%; flex-direction: column; } .remembered-actions .primary-action, .switch-player { width: 100%; } }
.game-entry-action { margin: 18px 0 8px; }
.game-entry-action .primary-action { width: 100%; min-height: 58px; }

/* Ortak eser: her çizerin boyaması ve işlemleri tek, düzenli kartta kalır. */
.public-art-result .artwork-variant-bar{display:grid;grid-template-columns:1fr;gap:12px;padding:16px 18px}
.public-art-result .artwork-variant-bar>strong{font-size:.9rem}
.public-art-result .artwork-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
.public-art-result .artwork-actions .like-button{min-width:0}
.public-art-result .artwork-actions .artwork-original{grid-column:1/-1;width:100%}
.public-art-result .artist-ledger{grid-template-columns:1fr;gap:10px;padding:16px}
.public-art-result .artist-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:9px;padding:9px;border:1px solid rgba(21,19,15,.14);border-radius:14px;background:rgba(255,255,255,.24)}
.public-art-result .artist-entry .artist-choice{width:100%;min-width:0;padding:10px;border:0;background:transparent}
.public-art-result .artist-entry .artist-choice:hover{border:0;transform:none}
.public-art-result .artist-entry .artist-choice.is-active{border:0;background:var(--acid);box-shadow:none}
.public-art-result .artist-reactions{display:grid;grid-template-columns:1fr;align-content:center;gap:7px;margin:0}
.public-art-result .artist-reactions .like-button,.public-art-result .artist-reactions .download-button{min-width:108px;min-height:36px;white-space:nowrap}
.public-art-result .artist-reactions .like-button b{grid-row:auto;color:inherit;font:inherit}
@media(max-width:520px){.public-art-result .artwork-actions{grid-template-columns:1fr}.public-art-result .artwork-actions .artwork-original{grid-column:auto}.public-art-result .artist-entry{grid-template-columns:1fr}.public-art-result .artist-reactions{grid-template-columns:1fr 1fr}.public-art-result .artist-reactions .like-button,.public-art-result .artist-reactions .download-button{min-width:0}}