/* Standalone introduction dialog: no game round or server state is changed. */
#general-rules {
    position: fixed; box-sizing: border-box;
    top: 5%; left: 1.6rem; right: auto; bottom: auto; margin: 0;
    width: 98rem; max-width: calc(100vw - 48.2rem);
    max-height: min(58.5rem, calc(95dvh - 11rem));
    container-type: inline-size;
    padding: 0; border: 2px solid #50b1c6; border-radius: 16px;
    background: #f2f2f7; color: #151515; overflow: hidden;
    font-family: inherit; font-size: 15px;
}
#general-rules[open] { display: flex; flex-direction: column; }
#general-rules::backdrop { background: rgba(0, 35, 48, .2); }
#general-rules * { box-sizing: border-box; }
#general-rules .rules-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 1.3rem; height: 50px; flex: 0 0 50px; padding: 0 .8rem 0 1.3rem; background: #50b1c6; color: white; }
#general-rules h2 { margin: 0; padding: 0; color: white; background: none; border: 0; box-shadow: none; font-size: 2rem; font-weight: 600; }
#general-rules .rules-question { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; font-size: 4rem; line-height: 1; font-weight: 800; transform: rotate(-9deg); }
#general-rules form { margin: 0; }
#general-rules .rules-header form { margin-left: auto; }
#general-rules button { cursor: pointer; font-family: inherit; }
#general-rules .rules-close { position: relative; width: 3.4rem; height: 3.4rem; padding: 0; border: 0; background: url('/bundles/arteneoproject/images/new/utility/close-frame.svg') center / contain no-repeat; }
#general-rules .rules-close::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2rem; height: 2rem; transform: translate(-50%, -50%); background: url('/bundles/arteneoproject/images/new/utility/close-icons.png') -2.8077rem -1.4231rem / 15.7538rem 5.2513rem no-repeat; }
#general-rules .rules-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 28px 50px 30px; }
#general-rules .rules-section-heading { display: flex; gap: 14px; align-items: center; }
#general-rules .rules-section-icon { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 14px; background: #fff; color: #00507b; }
#general-rules .rules-section-icon svg { width: 40px; height: 40px; }
#general-rules .rules-caption { color: #8b8c94; font-size: 12px; margin: 0 0 8px; }
#general-rules h3 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; }
#general-rules em { color: #50b1c6; font-style: normal; }
#general-rules .rules-formula { display: inline-block; margin: 14px 0 6px; padding: 13px 26px; border-radius: 24px; background: rgba(80, 181, 203, 0.20); font-weight: 700; font-size: 14px; line-height: 1.6; }
#general-rules .rules-note { margin: 0; color: #8b8c94; font-size: 12px; }
#general-rules .rules-goal { margin-bottom: 30px; }
#general-rules .rules-years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
#general-rules .rules-year { padding: 18px 14px; border-radius: 15px; background: white; color: #004b6e; box-shadow: 0 5px 10px #00507b10; }
#general-rules .rules-year:first-child { color: #428eb5; }
#general-rules .rules-year:nth-child(2) { color: #287ba5; }
#general-rules h4 { margin: 0 0 10px; padding: 0; height: auto; color: inherit; background: none; border: 0; box-shadow: none; font-size: 18px; font-weight: 700; white-space: nowrap; }
#general-rules h4::before, #general-rules h4::after { display: none; }
#general-rules small { font-size: 12px; color: inherit; }
#general-rules .rules-tag { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px; padding: 5px 9px; border-radius: 20px; background: #e0ebef; font-size: 11px; }
#general-rules .rules-tag svg { flex-shrink: 0; }
#general-rules ul { padding-left: 14px; margin: 0; }
#general-rules li { padding-left: 0; margin: 7px 0 0; color: #171717; line-height: 1.45; font-size: 14px; }
#general-rules li::marker { color: #287ba5; }
#general-rules .rules-footer { flex: 0 0 auto; text-align: center; padding: 16px 32px; background: #f2f2f7; }
#general-rules .rules-understood { border: 0; border-radius: 28px; padding: 10px 30px; background: #50b1c6; color: #fff; font-size: 16px; font-weight: 700; }
#general-rules button:hover { filter: brightness(1.08); }
#general-rules button:focus-visible { outline: 3px solid #00507b; outline-offset: 3px; }
@media (max-width: 1100px), (max-height: 760px) {
    #general-rules { max-width: calc(100vw - 42rem); }
}
@media (max-width: 760px) {
    #general-rules {
        top: 17rem; left: 1rem; width: calc(100vw - 2rem); max-width: none;
        max-height: calc(100dvh - 18rem);
    }
}
@container (max-width: 800px) {
    #general-rules .rules-body { padding: 24px; }
    #general-rules .rules-years { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 800px) {
    #general-rules .rules-body { padding: 24px; }
    #general-rules .rules-years { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 460px) {
    #general-rules { width: calc(100vw - 20px); max-height: calc(100dvh - 18rem); }
    #general-rules .rules-years { grid-template-columns: 1fr; }
    #general-rules .rules-header { padding-left: 1.3rem; gap: 1.3rem; }
}