@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Space+Mono:wght@700&display=swap');

:root {
    --brand-red: #EB0B0F;
    --brand-pink: #FF90E8;
    --brand-yellow: #FFC900;
    --brand-blue: #23A094;
    --gvb-blue: #005EB8; 
    --bg-cream: #F8F7F4;
    --grid-line: #111111;
    --bounce-easing: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --border-thick: 3px solid #111;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::selection {
    background-color: var(--brand-red);
    color: var(--bg-cream);
    text-shadow: none;
}
::-moz-selection {
    background-color: var(--brand-red);
    color: var(--bg-cream);
    text-shadow: none;
}

body {
    background-color: var(--bg-cream); 
    font-family: 'Inter', sans-serif; color: #111;
    padding: 10vh 2rem 50vh 2rem; display: flex; align-items: flex-start; justify-content: center;
    overflow-x: hidden; overscroll-behavior-y: none; 
    background-image: 
        linear-gradient(rgba(17, 17, 17, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px);
    background-size: 30px 30px;
}

h2 { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; letter-spacing: -0.03em; line-height: 1.1; }
p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem; font-weight: 500; }

.inline-link {
    color: #111; text-decoration: none; font-weight: 700;
    border-bottom: 3px solid var(--brand-red); transition: all 0.15s ease-in-out; padding: 0 0.1rem;
}
.inline-link:hover {
    background-color: var(--brand-red); color: var(--bg-cream); border-bottom: 3px solid #111; 
}

.dim-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: grayscale(100%);
    z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}

.grid-wrapper {
    position: relative; width: 100%; max-width: 1400px;
    background-color: var(--grid-line); border: 1px solid var(--grid-line); border-right: none; 
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); gap: 1px; 
    grid-auto-flow: dense; box-shadow: 12px 12px 0px rgba(0,0,0,0.1);
}

.cell {
    background-color: var(--bg-cream); padding: 2.5rem; display: flex; flex-direction: column; 
    position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.bg-dots { background-image: radial-gradient(#ccc 1px, transparent 1px); background-size: 20px 20px; }

.cell-anim { grid-column: span 2; grid-row: span 1; padding: 0; justify-content: flex-end;}
.cell-manifesto, .cell-bio { grid-column: span 2; }
.cell-red { grid-column: span 1; background-color: var(--brand-red); color: var(--bg-cream); justify-content: center; align-items: center; gap: 1.5rem; }
.cell-dots { 
    grid-column: span 1; 
    background-color: var(--bg-cream);
    background-image: radial-gradient(var(--brand-red) 2px, transparent 2.5px);
    background-size: 12px 12px;
    align-items: center; 
    justify-content: center; 
}
/*.cell-dots { 
    grid-column: span 1; 
    background-color: var(--bg-cream);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g transform='translate(52.5, 52.5)'><path fill='%23EB0B0F' d='M83.5664 8.9815C78.168 3.6338 71.4526.8095 64.1438.8095c-6.3246 0-10.5652 2.0931-13.3729 3.4838l-.1013.0574-.1158.0573c-.4197.215-.6224.6882-.4776 1.1326l1.6644 5.0466a.9464.9464 0 0 0 .8973.6452h10.6954c.4053.0143.7671.2724.8973.6595.1303.3871.0001.8172-.3473 1.0609l-8.6403 6.2366c-.3329.2294-.4776.6595-.3474 1.0466l3.2854 10.0788c.1302.3871 0 .8172-.3329 1.0466a.9407.9407 0 0 1-1.1144 0l-8.6548-6.2079c-.3329-.2294-.7815-.2294-1.1144 0l-8.6548 6.2079a.9407.9407 0 0 1-1.1144 0c-.3329-.2437-.4776-.6595-.3474-1.0466l3.2854-10.0788c.1303-.3871 0-.8172-.3474-1.0466l-8.6403-6.2366c-.3328-.2437-.4776-.6595-.3473-1.0609.1302-.3871.4921-.6452.9118-.6452h10.681a.9843.9843 0 0 0 .8973-.6595l1.6644-5.0466c.1447-.4444-.0579-.9175-.4776-1.1326l-.1158-.0573-.1158-.0574C41.4503 2.9026 37.2098.8094 30.8707.8094c-7.3088 0-14.0387 2.8244-19.4226 8.172C4.284 16.0784 0 27.1035 0 38.4583 0 61.813 21.3041 80.8094 47.5 80.8094S95 61.813 95 38.4582c0-11.3548-4.284-22.3656-11.4481-29.4767h.0145Z'/></g></svg>");
    background-size: 22px 22px; 
    background-position: center;
    background-repeat: repeat;
    align-items: center; 
    justify-content: center; 
}*/
.cell-pink { grid-column: span 1; background-color: var(--brand-pink); align-items: center; justify-content: center; } 
.cell-input { grid-column: span 4; background-color: #fff; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; overflow: visible;}
.cell-manifesto span { 
    background-color: #ffd6d6; 
    color: #111; 
    padding: 0.2rem 0.4rem; 
    line-height: 1.6; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break: clone; 
    border-radius: 2px 6px 4px 2px;
    display: inline-block; 
    transform: rotate(-0.5deg); 
}
.cell-manifesto h2 span { background-color: var(--brand-yellow); border: 2px solid #111; }

.promo-box { padding: 2.5rem; display: flex; flex-direction: column; user-select: none; width: 100%; }
.line { display: block; line-height: 0.9; color: var(--brand-red); text-transform: uppercase; transition: all 0.5s var(--bounce-easing); white-space: nowrap; }
.stem-op { font-weight: 500; font-size: clamp(2.2rem, 6vw, 2.5rem); letter-spacing: -0.02em; }
.user-domain-text { white-space: normal; word-break: break-word; margin-bottom: 0.5rem; }
.city { font-weight: 500; font-size: clamp(2.8rem, 10vw, 4rem); letter-spacing: -0.03em; display: flex; align-items: baseline; }
.prefix { display: inline-block; max-width: 600px; opacity: 1; transition: all 0.6s var(--bounce-easing); }
.suffix { display: inline-block; transition: all 0.6s var(--bounce-easing); transform-origin: left bottom; }

.brutalist-mode .stem-op { font-weight: 900; font-size: clamp(2.2rem, 6vw, 3rem); transform: translateY(-5px) rotate(-1.5deg) translateX(-5px); }
.brutalist-mode .prefix { max-width: 0; opacity: 0; pointer-events: none; }
.brutalist-mode .suffix { font-weight: 900; font-size: clamp(4.2rem, 16vw, 7.5rem); transform: scale(1.05) translateY(-5px); text-shadow: 6px 6px 0px #000; margin-left: -4px; }

.dam-portrait-wrapper {
    position: absolute; bottom: -5px; right: -10px; width: clamp(150px, 15vw, 250px); z-index: 5;
    pointer-events: none; transform-origin: bottom right; transform: rotate(45deg) translateY(50px) scale(0.8);
    opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brutalist-mode .dam-portrait-wrapper { transform: rotate(-4deg) translateY(0) scale(1); opacity: 1; transition-delay: 0.4s; }
.dam-portrait { width: 100%; display: block; filter: grayscale(100%) contrast(1.2); }
.dam-portrait-wrapper::after {
    content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--brand-red) 1px, transparent 1.5px);
    background-size: 3px 3px; mix-blend-mode: multiply; opacity: 0.65; 
    mask-image: url('dam.png'); mask-size: 100% 100%; -webkit-mask-image: url('dam.png'); -webkit-mask-size: 100% 100%;
}
.dam-portrait-wrapper {
    pointer-events: auto !important; 
    cursor: pointer;
}

.brutalist-mode .dam-portrait-wrapper:hover {
    transform: rotate(-1deg) translateY(-8px) scale(1.02);
    filter: drop-shadow(8px 8px 0px var(--brand-yellow));
    transition: all 0.2s ease-out, filter 0.2s;
}

.party-logo { width: 100px; height: auto; margin-bottom: 0.5rem; }
.lijst-info { display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); }
.lijst-num { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.plaats-num { font-size: 6.5rem; font-weight: 900; line-height: 0.8; text-shadow: 6px 6px 0px #000; color: #FFF; }

.sticker { 
    display: inline-flex; align-items: center; border: 1.5px solid #000; padding: 0.1rem 0.4rem; margin: 0 0.2rem; 
    font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.9rem; box-shadow: 2px 2px 0px #000; 
    transform: translateY(-1px) rotate(-1deg); background: var(--brand-yellow); color: #111; text-decoration: none; 
    transition: transform 0.1s, box-shadow 0.1s; white-space: nowrap; 
}
.sticker:hover { transform: translateY(0px) rotate(0deg); box-shadow: 1px 1px 0px #000; }

.btn-brutal { 
    width: 100%; height: 100%; min-height: 80px; background-color: #FFF; color: #111; border-radius: 12px; 
    border: var(--border-thick); box-shadow: 6px 6px 0px #000; display: flex; align-items: center; justify-content: center; 
    text-align: center; font-size: 1.2rem; text-transform: uppercase; font-weight: 900; cursor: pointer; text-decoration: none; padding: 1rem; 
}
.btn-brutal:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0px #000; }
.btn-brutal:active { transform: translate(6px, 6px); box-shadow: 0px 0px 0px #000; }

.domain-input-cell { display: flex; width: 100%; max-width: 700px; box-shadow: 8px 8px 0px #000; border-radius: 12px; background: var(--bg-cream); position: relative; }
.domain-input-cell.shake { animation: shake 0.4s ease-in-out; }
.domain-input-cell.show-error .input-wrapper { border-color: var(--brand-red); }
.domain-input-cell.show-error .error-msg { opacity: 1; }

.error-msg { position: absolute; top: -1.8rem; left: 0; color: var(--brand-red); font-family: 'Space Mono', monospace; font-size: 0.95rem; font-weight: 900; opacity: 0; transition: opacity 0.2s; pointer-events: none; }

.input-wrapper { display: flex; align-items: center; flex-grow: 1; background-color: var(--bg-cream); border: var(--border-thick); border-right: none; border-radius: 12px 0 0 12px; position: relative; cursor: text; overflow: hidden; min-width: 0; transition: border-color 0.2s;}
.input-wrapper input { width: 100%; padding: 1.2rem; padding-right: 0; font-size: 1.2rem; font-family: 'Space Mono', monospace; border: none; background: transparent; outline: none; position: relative; z-index: 2; color: #111; font-weight: bold; }
.input-wrapper input:disabled { color: var(--brand-red); -webkit-text-fill-color: var(--brand-red); opacity: 1; cursor: not-allowed; }

.placeholder-text { position: absolute; left: 1.2rem; font-family: 'Space Mono', monospace; font-size: 1.2rem; color: #888; pointer-events: none; z-index: 1; white-space: nowrap; }
.placeholder-text::after { content: '|'; animation: blink 1s step-end infinite; }

.domain-suffix { padding-right: 1.2rem; font-size: 1.2rem; font-family: 'Space Mono', monospace; font-weight: 900; color: #111; white-space: nowrap; flex-shrink: 0; }

.domain-input-cell button { min-width: 140px; padding: 0 2rem; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; background-color: var(--brand-red); color: #fff; border: var(--border-thick); border-radius: 0 12px 12px 0; cursor: pointer; transition: background 0.2s; flex-shrink: 0; display: flex; justify-content: center; align-items: center;}
.domain-input-cell button:hover { background-color: #c7080b; }

.loader { width: 22px; height: 22px; border: 3px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }

.tram-track { position: absolute; top: 0; right: 0px; width: 6px; height: 100%; border-left: 1px solid var(--grid-line); border-right: 1px solid var(--grid-line); z-index: 100; }

.tram { position: absolute; top: -50px; right: -7px; width: 20px; height: 90px; background-color: var(--gvb-blue); border: 2px solid #111; border-radius: 3px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 4px 4px 0px rgba(0,0,0,0.25); z-index: 115; will-change: transform; -webkit-transform: translateZ(0); }
.tram::before, .tram::after { content: ''; width: 100%; height: 18px; background-color: #FFF; display: block; }
.tram::before { border-bottom: 2px solid #111; } .tram::after { border-top: 2px solid #111; border-bottom: 3px solid var(--brand-red); }
.tram-windows { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; height: 100%; padding: 4px 0; }
.tram-window { width: 12px; height: 10px; background-color: #2a2a2a; border-radius: 3px; border: 1px solid #111; }

.tram-stop { position: absolute; background-color: var(--brand-red); border: 1px solid var(--grid-line); width: 12px; height: 12px; right: -6px; transform: translateY(-50%); z-index: 105; pointer-events: none; }
.stop-1 { top: 30%; } .stop-2 { top: 55%; } .stop-3 { top: 75%; }

.flag-wrapper { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 110; perspective: 600px; pointer-events: none; }

.flag { 
    display: flex; flex-direction: column; gap: 0.5rem; border: 2px solid #000; padding: 0.75rem 1rem; 
    box-shadow: 4px 4px 0px #000; transform: rotateX(-90deg); transform-origin: top center; opacity: 0; 
    cursor: pointer; max-width: 260px; pointer-events: auto;
}
.flag.dismissed { opacity: 0 !important; transform: rotateX(-90deg) !important; pointer-events: none; transition: all 0.3s ease-in; }
.flag-header { display: flex; align-items: center; gap: 0.5rem; font-family: 'Space Mono', monospace; font-weight: 900; font-size: 0.95rem; white-space: nowrap; }
.halte-label { background: #111; color: #fff; padding: 2px 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px; }
.flag-body { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.85rem; line-height: 1.4; color: #111; white-space: normal; }

.flag-yellow { background-color: var(--brand-yellow); color: #111; } 
.flag-pink { background-color: var(--brand-pink); color: #111; } 
.flag-blue { background-color: var(--brand-blue); color: #fff; }
.flag-blue .flag-body { color: #fff; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (max-width: 1024px) {
    .grid-wrapper { grid-template-columns: repeat(2, 1fr); }
    .cell-anim, .cell-manifesto, .cell-bio, .cell-input { grid-column: span 2; }
    .cell-red, .cell-pink, .cell-dots { grid-column: span 1; min-height: 250px; }
    .domain-input-cell { max-width: 100%; }
}

@media (max-width: 600px) {
    body { padding: 5vh 1rem 50vh 1rem; }
    .grid-wrapper { grid-template-columns: 1fr; }
    .cell-anim, .cell-manifesto, .cell-bio, .cell-input, .cell-red, .cell-pink, .cell-dots { grid-column: span 1; }
    .cell { padding: 1.5rem; }
    .promo-box { padding: 0; }
    .cell-input { padding: 0; flex-direction: column; justify-content: space-between; gap: 0; }
    .cell-input h2 { padding: 1.5rem 1.5rem 1rem 1.5rem; margin: 0; font-size: 1.6rem; }
    
    .domain-input-cell { flex-direction: column; box-shadow: none; border-radius: 0; border-top: var(--border-thick); width: 100%; }
    .input-wrapper { border-radius: 0; border: none; border-bottom: var(--border-thick); }
    .domain-input-cell button { border-radius: 0; border: none; padding: 1.5rem; width: 100%; }
    .input-wrapper input, .placeholder-text, .domain-suffix { font-size: 1rem; padding: 1rem 0.5rem; }
    .placeholder-text { left: 0.5rem; } .domain-suffix { padding-right: 0.5rem; }
    
    .flag { width: fit-content; max-width: calc(100vw - 60px); min-width: 220px; padding: 0.8rem 1rem; }
    .flag-header { font-size: 0.9rem; white-space: nowrap; }
    .flag-body { font-size: 0.8rem; white-space: normal; }

    .dam-portrait-wrapper::after {
        background-image: radial-gradient(circle, var(--brand-red) 0.5px, transparent 1px)!important;
        background-size: 2px 2px!important; opacity: 0.55!important;
    }
    
    .error-msg {
        top: -1.8rem; 
        left: -2px;
        background-color: var(--brand-red);
        color: var(--bg-cream);
        padding: 0.2rem 0.6rem;
        border: 2px solid #111;
        border-bottom: none;
        font-size: 0.8rem;
    }
    
    .domain-input-cell,
    .domain-input-cell:focus-within {
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
    }
}

body.edit-mode .dim-overlay { opacity: 1; pointer-events: auto; }
body.edit-mode .tram-track, body.edit-mode .tram, body.edit-mode .flag-wrapper, body.edit-mode .tram-stop, body.edit-mode .dam-portrait-wrapper, body.edit-mode .dam-portrait { display: none !important; }

body.edit-mode .cell-manifesto, body.edit-mode .cell-bio, body.edit-mode .cell-input, body.edit-mode .cell-anim {
    z-index: 100; box-shadow: 16px 16px 0px #000; border: 4px solid #111; transform: translate(-8px, -8px); background-color: #fff;
}

body.edit-mode .cell-red { background: repeating-linear-gradient(-45deg, var(--brand-red), var(--brand-red) 15px, #c20000 15px, #c20000 30px); border: 2px solid #111; }
body.edit-mode .cell-pink, body.edit-mode .cell-dots { background: repeating-linear-gradient(-45deg, var(--brand-pink), var(--brand-pink) 15px, #e871d0 15px, #e871d0 30px); border: 2px solid #111; }
body.edit-mode .cell-red > *, body.edit-mode .cell-pink > *, body.edit-mode .cell-dots > * { display: none; }

body.edit-mode .cell-manifesto::before {
    content: 'Pas de tekst aan!'; display: inline-block; background-color: var(--brand-yellow); color: #111; font-family: 'Space Mono', monospace; font-weight: 900; font-size: 0.85rem; padding: 0.3rem 0.6rem; border: 2px solid #111; box-shadow: 3px 3px 0px #111; margin-bottom: 2rem; transform: rotate(-1deg); width: fit-content;
}

body.edit-mode [contenteditable="true"] {
    border: 3px solid #111 !important; background-color: #fff !important; box-shadow: 4px 4px 0px var(--brand-red) !important; 
    padding: 1rem !important; margin: -1rem !important; outline: none !important; transition: all 0.1s ease-in-out; cursor: text;
}
body.edit-mode [contenteditable="true"]:focus {
    background-color: var(--bg-cream) !important; box-shadow: 6px 6px 0px #111 !important; transform: translate(-2px, -2px) !important; 
}

body.edit-mode .prefix, body.edit-mode .suffix {
    max-width: 1000px !important; opacity: 1 !important; font-weight: 900 !important; font-size: clamp(2.5rem, 10vw, 4.5rem) !important; 
    text-shadow: 4px 4px 0px #000 !important; transform: scale(1.05) translateY(-5px) !important;
}
body.edit-mode .stem-op {
    font-weight: 900 !important; font-size: clamp(2.2rem, 6vw, 3rem) !important; transform: rotate(-1.5deg) translateX(-5px) !important;
}
body.edit-mode .city { flex-wrap: wrap; line-height: 0.8; }

body.edit-mode #action-btn {
    position: relative; 
    background-color: var(--brand-red) !important; 
    color: #fff !important;
    animation: none !important;
    overflow: visible; 
    z-index: 10; 
}

@keyframes brutal-sprouts {
    0% {
        transform: scale(1);
        opacity: 1;
        border-width: 4px;
    }
    100% {
        transform: scale(1.15, 1.4);
        opacity: 0;
        border-width: 1px;
    }
}

body.edit-mode #action-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px; 
    border: 4px dashed #111; 
    background-color: transparent;
    z-index: -1;
    animation: brutal-sprouts 1.5s infinite cubic-bezier(0.2, 0.8, 0.2, 1); 
}

body.edit-mode #action-btn:hover {
    box-shadow: 4px 4px 0px #111 !important;
    transform: translate(2px, 2px);
}

body.edit-mode #action-btn:hover::before,
body.edit-mode #action-btn:focus::before {
    animation: none !important;
    opacity: 0 !important;
}

::-webkit-scrollbar {
    width: 14px;
    background-color: var(--bg-cream);
    border-left: 2px solid #111;
}
::-webkit-scrollbar-thumb {
    background-color: var(--brand-red);
    border: 2px solid #111;
    box-shadow: inset 2px 2px 0px rgba(255,255,255,0.2); 
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-yellow);
}

@-moz-document url-prefix() {
    html {
        scrollbar-width: auto;
        scrollbar-color: var(--brand-red) var(--bg-cream);
    }
}

body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='0 0 44 46'><path fill='%23111' d='M19,45.2c-1.2,0.5-2.7,0-3.2-1.3l-4.6-11L5,37.4c-0.1,0.1-0.3,0.2-0.5,0.3c-0.6,0.3-1.4,0.2-2.1-0.1c-0.8-0.4-1.3-1.3-1.3-2.2V2.9c0-1,0.6-1.9,1.5-2.3s2-0.2,2.7,0.5l23,22.8c0.6,0.6,0.9,1.6,0.6,2.5c-0.2,0.7-0.7,1.2-1.4,1.5c-0.2,0-0.3,0.1-0.5,0.1l-7.6,1.2l4.6,11c0.5,1.2,0,2.7-1.3,3.2L19,45.2z'/><path fill='%23EB0B0F' d='M26.5,25.8l-8.8,1.4c-0.9,0.1-1.5,1.1-1.1,2l5.1,12.2L18,43l-5-12.2c-0.3-0.9-1.5-1.2-2.2-0.6l-7.2,5.2V3L26.5,25.8z'/></svg>") 0 0, auto;
}

a, button, .flag, .btn-brutal, [contenteditable="true"], .inline-link {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='0 0 44 46'><path fill='%23111' d='M19,45.2c-1.2,0.5-2.7,0-3.2-1.3l-4.6-11L5,37.4c-0.1,0.1-0.3,0.2-0.5,0.3c-0.6,0.3-1.4,0.2-2.1-0.1c-0.8-0.4-1.3-1.3-1.3-2.2V2.9c0-1,0.6-1.9,1.5-2.3s2-0.2,2.7,0.5l23,22.8c0.6,0.6,0.9,1.6,0.6,2.5c-0.2,0.7-0.7,1.2-1.4,1.5c-0.2,0-0.3,0.1-0.5,0.1l-7.6,1.2l4.6,11c0.5,1.2,0,2.7-1.3,3.2L19,45.2z'/><path fill='%23FFC900' d='M26.5,25.8l-8.8,1.4c-0.9,0.1-1.5,1.1-1.1,2l5.1,12.2L18,43l-5-12.2c-0.3-0.9-1.5-1.2-2.2-0.6l-7.2,5.2V3L26.5,25.8z'/></svg>") 0 0, pointer !important;
}

.sticker-link {
    display: inline-block; 
}
.sticker-link:hover {
    transform: rotate(-3deg) scale(1.05);
    box-shadow: 4px 4px 0px #111;
}

.domain-input-cell {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.domain-input-cell:focus-within {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px #000;
}

.marker-title { 
    position: relative;
    display: inline-block; 
}

.marker-title::after {
    content: '';
    position: absolute;
    bottom: -2px; 
    left: 0;
    width: 100%;
    height: 4px; 
    background-color: var(--brand-red);
    transform: rotate(-0.5deg) translateX(2px);
    border-radius: 2px 8px 3px 5px; 
    opacity: 0.8;
}

@media (max-width: 600px) {
    .marker-title::after {
        display: none;
    }
}

body.edit-mode .marker-title::after {
    display: none;
}