:root {
    interpolate-size: allow-keywords;
    --bg4: #3053b3;
    --bg5: #7f7f7f14;
    --txt2: #f1f1f1f2;
    --border1: gainsboro;
    --border2: gray;
    --backdrop: #0000006e;
    --newLink: green;
    --rd-btn: #00000014;
    --muted: #888888;
    --shadow: #111827af;
    --cool: #fe5a3a;
}
@media (prefers-color-scheme: light) { 
    :root {
        --bg1: #aec8ff;
        --bg2: #192236;
        --bg3: #ffffff;
        --c1: #1118279c;
        --txt1: #192236;
        --spice-text: #a300ff;
        --input-bg: aliceblue;
    }
}
@media (prefers-color-scheme: dark)  { 
    :root {
        --bg1: #8f9aab;
        --bg2: #000000;
        --bg3: #1a1a1a;
        --c1: #0000009c;
        --txt1: #faf2de;
        --spice-text: #009546;;
        --input-bg: #140500f2;
    }
}
* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.hueRotate {
    animation: hueRotate 2s linear infinite;
}
@keyframes hueRotate {
  from { filter: invert(1) hue-rotate(0deg); }
  to   { filter: invert(1) hue-rotate(360deg); }
}
.skeleton {
  background: linear-gradient(90deg,var(--c1), var(--bg1), var(--c1));
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: shimmer 1.1s linear infinite;
  border-radius: 0.5rem;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.add-effect {
    animation: popping 0.5s ease-out;
    opacity: 0.7;
    box-shadow: none;
    pointer-events: none;
}
@keyframes popping {
    0%   { transform: scale(1);}
    25%  { transform: scale(0.98);}
    50% { transform: scale(1);}
    75% { transform: scale(0.98);}
    100% { transform: scale(1);}
}
.muted {
    opacity: 0.5;
    pointer-events: none;
}
.active {
    pointer-events: none;
    filter: invert(0.5)
}
.top-bar {
    white-space: nowrap;
    padding-left: 0.5rem;
    height: 2rem;
    line-height: 2rem;
    width: 100%;
    font-size: 0.8rem;
    background-color: var(--c1);
    color: var(--txt2);
}
[hidden] {
    display: none !important;
}
.hover:hover {
  background-color: whitesmoke;
}
#channel_nav a:link,
#topic_nav a:link {
    color: var(--newLink);
}
.topic-views-span {
    white-space: nowrap;
}
.topic-views-span::before {
    content: "👁︎ "
}
label,
select option {
    color: var(--txt1);
    font-size: 0.8rem;
}

/* error message slider - START */
    .msg-div {
        position: fixed;
        top: 20%;
        left: 100vw;
        text-align: center;
        width: 100vw;
        color: white;
        padding: 2rem 1rem;
        font-size: 1rem;
        font-weight: bold;
        box-shadow: 0 0.3rem 0.3rem rgb(0, 0, 0);
        transition: left 0.5s ease-in-out;
        z-index: 20;
    }
    #err_div {
        background-color: rgba(255, 0, 0, 0.867);
    }
    #suc_div {
        background-color: rgb(0, 177, 38);
    }
/* error message slider - END */
h1 {
    max-width: fit-content;
    width: 100%;
    font-size: 1.2rem;
    word-break: break-word;
    font-weight: bold;
    padding: 0.5rem;
    /* background-color: var(--bg2); */
    background: repeating-linear-gradient(45deg, var(--c1), var(--bg2) 5rem);
    color: var(--txt2);
}
.admin {
    width: fit-content;
}
.admin::before {
    content:"👑 ";
}
.admin::after {
    content:" 👑";
}
.common-text {
    color: var(--txt1);
    font-size: 0.8rem;
}
h2 {
    color: var(--c1);
    font-size: 1rem;
}
details summary:hover,
button:hover {
    opacity: 0.8;
}
summary {
    cursor: pointer;
}
button:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}
/*  */
    .btn-type1 {
        all: unset;
        display: initial;
        position: fixed;
        top: 0;
        right: 0;
        width: fit-content;
        padding: 0.7rem 1.4rem;
        border-bottom-left-radius: 0.5rem;
        color: white;
        background-color: var(--cool);
        border: none;
        z-index: 3;
        font-size: 0.8rem;
    }
    .btn-type2 {
        border: none;
        width: stretch;
        padding: 0.5rem;
        font-size: 0.8rem;
        border-radius: 0.5rem;
        color: white;
        background-color: var(--bg2);
    }
    .btn-type3 {
        border-radius: 999px;
        width: 100%;
        padding: 0.75rem 0;
        font-size: 0.9rem;
        cursor: pointer;
        background-color: var(--bg2);
        color: var(--txt2);
        white-space: nowrap;
        border: 0.05rem solid var(--border2);
    }
    .btn-type3::before {
        content: "+ ";
    }
    .btn-type3::after {
        content: " +";
    }
    .btn-type4 {
        background-color: var(--bg4);
        width: stretch;
        color: white;
        margin-left: auto;
        border: none;
        font-size: 0.8rem;
        height: 2.5rem;
        border-radius: 0.5rem
    }
/*  */
.d-none {
    display: none;
}
.d-flex {
    display: flex;
}
.g05 {
    gap: 0.5rem;
}
.spinner {
    display: inline-flex;
    border: 0.2rem solid rgba(0, 0, 0, 0.61);
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 auto;
    border-radius: 50%;
    border-left-color: rgb(255, 255, 255);
    animation: spin 3s ease infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;    
    -ms-text-size-adjust: 100%;     
    text-size-adjust: 100%;        
    font-size: 20px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    background-color: var(--bg1);
}
.coolColor {
    color: var(--cool);
}
/*  */
.access-status {
    min-height: 1.5rem;
    margin: 0.75rem 0 0;
    text-align: center;
}
.access-dialog .close-dialog-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/*  */
/* Popover open */
html:has([popover]:popover-open:not(.popup)),
html:has(dialog[open]) { 
    overflow-y: hidden; 
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100dvh;  
    overflow-x: hidden; 
}
.info-btn {
  appearance:none;
  border: 0.05rem solid var(--border2);
  background:transparent;
  color:var(--txt1);
  width: fit-content;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  border-radius: 0.5rem;
}
dialog::backdrop,
.popover::backdrop {
    background: var(--backdrop);
    backdrop-filter: blur(0.4rem);
    pointer-events: auto;   /* backdrop catches clicks */
    height: 100vh;
}
dialog {    
    background: var(--bg3);
    border: 0.1rem solid var(--border2);
    max-width: 40rem;
    width: 100%;
    overflow: hidden;
    margin: auto;
    height: 80dvh;
    border-radius: 0.5rem;
}
@media (max-width: 800px) {
    dialog {
        border-radius: 0;
        min-height:100dvh;
        padding: 0;
        border: none;
    }
}
.infobox {
    max-width: 35rem;
    border: 0.2rem solid var(--border1);
    box-shadow: 0 0 0.2rem var(--shadow);
    border-radius: 1rem;
    background-color: var(--bg3);
    padding: 0.5rem;
    width: calc(100% - 1rem);
    margin: auto;
}
button, input, select, textarea {
  font-family: inherit;
}
input:disabled {
 background: var(--muted);
}
input, select, textarea {
    background: var(--input-bg);
    color: var(--txt1);
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 2vw;
    margin-top: 1rem;
    margin-bottom: 3rem;
    position: relative;
    width: 100%;
    max-width: 40rem;
    color:var(--txt1)
}

/* popup - START*/
    .popup {
        line-height: 1.1rem;
        position: fixed;
        margin: 0.7rem;
        top:0;
        overflow: hidden;
        max-width: 18rem;
        backdrop-filter: blur(0.3rem);
        width: fit-content;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        background: var(--c1);
        color: var(--txt2);
        border: 0.05rem solid var(--border2);
        font-size: 0.9rem;
        box-shadow: 0 0 0.2rem var(--shadow);
        transform: translateY(1rem);
        pointer-events: none;
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        z-index: 999;
        opacity: 0;
        word-break: break-word;
    }
    .popup:popover-open {
        margin-left: auto;
    }
    .popup-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .popup-success {
        border-left: 0.4rem solid rgb(0, 177, 0); 
    }
    .popup-success::after {
        opacity: 0.8;
        content: " ✔️";
    }
    .popup-error {
        border-left: 0.4rem solid #dc2626; 
    }
    .popup-error::after {
        opacity: 0.8;
        content: " ⛔";
    }
    .popup-neutral {
        border-left: 0.4rem solid var(--bg4); 
    }
/* popup - END */

/* side-slider - START */
    .side-slider {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 180ms ease;
        z-index: 20;
        padding: 0.5rem;
        display: flex;
        overscroll-behavior: none;
        flex-direction: column;
        overflow: hidden;
    }
    .slider-headline {
        color: var(--txt1);
        text-align: center;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 1rem;
        margin-bottom: 0.5rem;
        border-bottom: 0.05rem solid var(--border1);
    }
    .side-slider.is-open {
        transform: translateX(0);
        outline: 0.1rem solid var(--border2);
    }
/* side-slider - END */

/*  */
.creation-div {
    background: var(--c1);
    width: 100%;
    height: 6rem;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--txt1);
    position: relative;
    font-size: 0.8rem;
}
.creation-div .cta-div {
    padding: 0 0.75rem;
    width: 100%;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.creation-div p:first-child {
    color: var(--txt2);
}
.creation-div form {
    border-radius: 0.5rem;
    background-color: var(--bg3);
    padding: 0 0.75rem;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}
.creation-div form div:not(.spinner) {
    display: flex;
    height: 2.5rem;
}
.creation-div form div input {
    border-radius: 0.5rem 0 0 0.5rem;
    height: 100%;
    width: 70%;
    text-align: center;
    border: 0.05rem solid var(--border2);
    border-right: none;
}
.creation-div form div button[type="submit"] {
    background-color: var(--bg4);
    color: var(--txt2);
    border: 0.05rem solid var(--border2);
    border-radius: 0 0.5rem 0.5rem 0;
    width: 30%;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    text-align: center;
}
/*  */
.list-note {
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    line-height: 1rem;
    text-wrap-style: balance;
    color: var(--txt1);
}

.list-note::before {
    content: "❗ ";
}
/*  */
.close-slider-btn {
    min-height: 2rem;
    color: var(--txt2);
    background: var(--c1);
    border: none;
    margin-top: 0.5rem;
    width: 100%;
}
.close-parent-btn,
.close-form-btn {
    cursor: pointer;
    all: unset;
    padding: 0.2rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    position: absolute;
    border: 0.05rem solid var(--border2);
    background: var(--bg3);
    top: -0.2rem;
    right: -0.2rem;
}
/* */
.radio-button {
  cursor: pointer;
  user-select: none;
  display: inline-grid;
  place-items: center;
  flex: auto;
  padding: 0.3rem 0;
  background: var(--rd-btn);
  position: relative;
}
/* hide the actual radio input but keep it clickable via label */
.radio-button > input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
/* show "checked" style on the label when its radio is checked */
.radio-button:has(> input[type="radio"]:checked) {
  background: var(--bg2);
  color: var(--bg1);
}
/*  */
.bottom-bar {
    height: 6vh;
    width: 100%;
    min-height: 2.4rem;
    max-width: 40rem;
    display: flex;
    align-items: center;
    backdrop-filter: blur(0.2rem);
    background-color: var(--c1);
    font-size: 0.8rem;
    justify-content: stretch;
    margin-bottom: 1rem;
}
/*  */
.deleted::before {
    color: red;
    content: "✖ "
}
.deleted::after {
    color: red;
    content: " ✖"
}
/* WHEEL */
    #open_casino_btn {
        all: unset;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 4;
        padding: 0.7rem 1rem;
        border-radius: 0 0.9rem 0 0;
        background: var(--c1);
        color: var(--txt2);
        font-size: 0.7rem;
        cursor: pointer;
        filter: drop-shadow(2px 4px 6px black);
        box-shadow:
            -0.2rem 0.2rem 0.8rem rgba(0,0,0,0.25),
            inset 0 0.05rem 0 rgba(255,255,255,0.08);
    }
    #casino_dialog {
        background: var(--c1);
        color: var(--txt2);
    }
    #casino_dialog > div:first-of-type {
        width: 100%;
        height: 100%;
        padding: 1rem;
    }
    #casino_dialog > div > p:first-of-type {
        text-align: center;
        font-size: 0.8rem;
        width: min-content;
        position: absolute;
        font-weight: 700;
    }
    .casino-container {
        gap: 1rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .wheel-wrap {
        cursor: pointer;
        position: relative;
        gap: 1rem;
        width: 100%;
        max-width: 15rem;
    }
    .wheel-pointer {
        position: absolute;
        top: -1.6rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        font-size: 2rem;
        color: var(--cool);
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px  1px 0 #000,
            1px  1px 0 #000;
    }
    #casino_wheel {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 0.3rem solid rgba(255,255,255,0.12);
        background: conic-gradient(
            #7c3aed 0 72deg,
            #2563eb 72deg 144deg,
            #16a34a 144deg 216deg,
            #f59e0b 216deg 288deg,
            #dc2626 288deg 360deg
        );
        filter: drop-shadow(2px 4px 6px black);
        box-shadow:
            0 0 0 0.35rem rgba(0,0,0,0.18) inset,
            0 0.5rem 1.2rem rgba(0,0,0,0.22);
        transform: rotate(0deg);
        will-change: transform;
        --spin-from: 0deg;
    }
    #casino_wheel.is-spinning {
        animation: casinoWheelSpin 700ms linear infinite;
        pointer-events: none;
    }
    @keyframes casinoWheelSpin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(calc(0deg + 360deg));
        }
    }
    #wheel_txt {
        position: absolute;
        pointer-events: none;
        top: 50%;
        border-radius: 0.5rem;
        background-color: var(--c1);
        left: 50%;
        font-size: 0.8rem;
        padding: 0.5rem;
        transform: translate(-50%, -50%);
        width: fit-content;
        border: 0.05rem solid var(--border1);
    }
    .reward-table tbody tr.reward-hit {
        background: rgba(255, 215, 0, 0.14);
        box-shadow: inset 0 0 0 0.08rem #ffd700;
    }
    .reward-table tbody tr.reward-hit td {
        font-weight: 700;
    }
    .wheel-label {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1.35rem;
        transform-origin: center;
    }
    .label-1 { transform: translate(-50%, -50%) rotate(36deg)  translateY(-5.2rem) rotate(-36deg); }
    .label-2 { transform: translate(-50%, -50%) rotate(108deg) translateY(-5.2rem) rotate(-108deg); }
    .label-3 { transform: translate(-50%, -50%) rotate(180deg) translateY(-5.2rem) rotate(-180deg); }
    .label-4 { transform: translate(-50%, -50%) rotate(252deg) translateY(-5.2rem) rotate(-252deg); }
    .label-5 { transform: translate(-50%, -50%) rotate(324deg) translateY(-5.2rem) rotate(-324deg); }

    .reward-table {
        width: 100%;
        max-width: 20rem;
        overflow: hidden;
        table-layout: fixed;
    }
    .reward-table th,
    .reward-table td {
        padding: 0.3rem;
        text-align: left;
        font-size: 0.9rem;
        border-bottom: 0.1rem solid rgba(255, 255, 255, 0.06);
        white-space: nowrap;
    }
    .reward-table th {
        background: rgba(255,255,255,0.06);
        font-weight: 700;
    }
    .reward-table tbody tr:last-child td {
        border-bottom: none;
    }
    .reward-table th:nth-child(1),
    .reward-table td:nth-child(1) {
        text-align: center;
    }
    .reward-table th:nth-child(3),
    .reward-table td:nth-child(3) {
        text-align: right;
    }
    @media (min-width: 800px) {
        #casino_dialog .close-dialog-btn {
            display: none;
        }
    }
/* WHEEL */
/* post creation - start */
    #create_post_btn {
        background: var(--bg5);
        border-radius: 0.5rem;
        box-shadow: 0 0 0.1rem var(--shadow);
        font-size: 0.8rem;
        border: none;
        color: var(--txt1);
        padding: 0.5rem 2rem;
        width: fit-content;
        height: fit-content;
        margin-left: 0.5rem;
        position: relative;
    }
    #create_post_btn p {
        color: black;
    }
    #create_post_btn span {
        position: absolute;
        margin: 0.5rem;
    }
    #create_post_btn span:first-of-type {
        top: 0;
        left: 0;
        transform: rotate(-90deg);
    }
    #create_post_btn span:nth-of-type(2) {
        top: 0;
        right: 0;
    }
    #create_post_btn span:nth-of-type(3) {
        bottom: 0;
        left: 0;
        transform: rotate(180deg);
    }
    #create_post_btn span:last-of-type {
        bottom: 0;
        right: 0;
        transform: rotate(90deg);
    }
    #create_new_post_form {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;    
        padding: 2rem 0.5rem;
        overflow-y: auto;
        padding: 5vh 5vw;
    }
    #create_new_post_form h3 {
        color: var(--cool);
    }
    #create_new_post_form > div:last-child {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }
    #create_new_post_form fieldset {
        width: 100%;
        border:none;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    #create_new_post_form fieldset legend {
        font-size: 0.9rem;
        margin-bottom: 0.1rem;
        color: var(--txt1);
    }
    #create_new_post_form fieldset input,
    #create_new_post_form fieldset select,
    #create_new_post_form fieldset textarea {
        font-size: 0.8rem;
        width: 100%;
        border-radius: 0.5rem;
        border: none;
        border: 0.05rem solid var(--border2);
        padding: 0.4rem;
    }
    #create_new_post_form textarea {
        height: 10rem;
        resize: none;
    }
/* post creation - end */
@media (max-width: 400px) {
    html {
        font-size: 5vw;
    }
    h1 {
        font-size: 1.1rem;
    }
}