@charset "UTF-8";/*!
 * Bootstrap v5.0.2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-font-sans-serif);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h6,h1,h2,h3,h4,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}img{vertical-align:middle}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}[hidden]{display:none!important}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col-4{flex:0 0 auto;width:33.33333333%}.col-12{flex:0 0 auto;width:100%}.g-2{--bs-gutter-x:0.5rem}.g-2{--bs-gutter-y:0.5rem}@media (min-width:576px){.col-sm-6{flex:0 0 auto;width:50%}}.form-label{margin-bottom:.5rem}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}.form-control-sm{min-height:calc(1.5em + (.5rem + 2px));padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}textarea.form-control{min-height:calc(1.5em + (.75rem + 2px))}textarea.form-control-sm{min-height:calc(1.5em + (.5rem + 2px))}.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;-moz-padding-start:calc(0.75rem - 3px);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select:disabled{background-color:#e9ecef}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label{opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{width:2em;margin-left:-2.5em;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.btn:disabled{pointer-events:none;opacity:.65}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.btn-success:hover{color:#fff;background-color:#157347;border-color:#146c43}.btn-success:focus{color:#fff;background-color:#157347;border-color:#146c43;box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-success.active,.btn-success:active{color:#fff;background-color:#146c43;border-color:#13653f}.btn-success.active:focus,.btn-success:active:focus{box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-success:disabled{color:#fff;background-color:#198754;border-color:#198754}.btn-warning{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#000;background-color:#ffca2c;border-color:#ffc720}.btn-warning:focus{color:#000;background-color:#ffca2c;border-color:#ffc720;box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-warning.active,.btn-warning:active{color:#000;background-color:#ffcd39;border-color:#ffc720}.btn-warning.active:focus,.btn-warning:active:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-warning:disabled{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-danger.active,.btn-outline-danger:active{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.active:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card-body{flex:1 1 auto;padding:1rem 1rem}.card-header{padding:.5rem 1rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.pagination{display:flex;padding-left:0;list-style:none}.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-dismissible{padding-right:3rem}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-info{color:#055160;background-color:#cff4fc;border-color:#b6effb}.alert-warning{color:#664d03;background-color:#fff3cd;border-color:#ffecb5}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.modal{position:fixed;top:0;left:0;z-index:1060;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}.modal-footer>*{margin:.25rem}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.d-grid{display:grid!important}.d-flex{display:flex!important}.d-none{display:none!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.border{border:1px solid #dee2e6!important}.border-0{border:0!important}.w-100{width:100%!important}.flex-fill{flex:1 1 auto!important}.flex-grow-1{flex-grow:1!important}.gap-2{gap:.5rem!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.mt-1{margin-top:.25rem!important}.mt-3{margin-top:1rem!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-3{margin-bottom:1rem!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.pb-3{padding-bottom:1rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fw-lighter{font-weight:lighter!important}.fw-bold{font-weight:700!important}.text-center{text-align:center!important}.text-capitalize{text-transform:capitalize!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-warning{color:#ffc107!important}.text-light{color:#f8f9fa!important}.text-white{color:#fff!important}.text-muted{color:#6c757d!important}.bg-secondary{background-color:#6c757d!important}.bg-success{background-color:#198754!important}.bg-gradient{background-image:var(--bs-gradient)!important}.rounded{border-radius:.25rem!important}

body,html{font-family:helvetica neue,Helvetica,Arial,sans-serif;width:100%;margin:0;padding:0;overflow-x:clip}@-moz-keyframes marquee{0%{transform:translate(0,0)}100%{transform:translate(0,-100%)}}@-webkit-keyframes marquee{0%{transform:translate(0,0)}100%{transform:translate(0,-100%)}}@keyframes marquee{0%{-moz-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-moz-transform:translate(0,-100%);-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}.intro_text{margin-top:10px;margin-bottom:10px;padding:10px!important;border:1px solid #ccc;border-radius:4px;background-color:lightgoldenrodyellow;color:#000;text-align:justify;font-size:small}a{text-decoration:none}hr{margin-top:0;margin-bottom:0}.badge{font-size:95%}.kamal,.red{color:red}.author_name{font-size:25px}.result{text-align:center;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif}@keyframes blinker{25%{color:#fff}75%{color:#ffcb05}}.forum{text-shadow:1px 1px 2px #ff0}.forum .intro_text{padding:3px!important}blockquote{font:15px/20px italic Times,serif;padding:8px;color:#000;background-color:#7fffd4;border-top:1px solid #e1cc89;border-bottom:1px solid #e1cc89;margin:5px}@media screen and (max-width:240px){.badge{font-size:5.5vw!important}.small,small{font-size:60%;font-weight:400}.h3,h3{font-size:5.5vw}.author_name{font-size:6.5vw}}@media screen and (max-width:400px){.h1,h1{font-size:7.5vw}.h2,h2{font-size:6.5vw}.badge{font-size:3.5vw}}@media screen and (max-width:500px){.h1,h1{font-size:7.6vw}.h2,h2{font-size:6.8vw}.badge{font-size:3.5vw}}.purple{color:purple}.blue{color:blue}.darkblue{color:#00008b}.brown{color:brown}.maroon{color:maroon}.green{color:green}.black{color:#000}.btn-color{background-color:#0e1c36;color:#fff}@keyframes textclip{to{background-position:200% center}}.ten{background-color:#5a1a47;color:#FCFEFF}.forty{background-color:#e2d89e;color:#000}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}100%{background-position:250% 0,250% 0}}


/* ── comments.css ─────────────────────────────────────── */
.jumbotron {
    position: relative;
    background: none;
}

.jumbotron:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://cdn.pixabay.com/photo/2014/01/30/01/36/girl-254708_960_720.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
}


/*COMMENT TEXT COLORS*/

.purple {
    color: purple;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.darkblue {
    color: darkblue;
}

.brown {
    color: brown;
}

.maroon {
    color: maroon;
}

.green {
    color: green;
}

.black {
    color: black;
}


/*----------------------*/

/* Chat FAB Button */

@keyframes pulse-chat {
  0%   { box-shadow: 0 4px 15px rgba(255,107,53,0.5); }
  50%  { box-shadow: 0 4px 25px rgba(255,107,53,0.9); }
  100% { box-shadow: 0 4px 15px rgba(255,107,53,0.5); }
}

/* ══════════════════════════════════════
   FORUM HERO H1
══════════════════════════════════════ */
.fh1-wrap {
  position: relative;
  background: linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%);
  border-radius: 0 0 18px 18px;
  padding: 22px 16px 18px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.fh1-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(74,222,128,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.fh1-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #4ade80, #22c55e, #4ade80, transparent);
}
.fh1-badge {
  display: inline-block;
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.35);
  color: #86efac;
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.fh1-title {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.fh1-stars { color: #fbbf24; font-size: clamp(12px, 2.5vw, 16px); letter-spacing: 3px; margin-top: 6px; }

/* ── Intro Text ── */

/* ── H2 ── */

/* ── Rules Section ── */

/* ── New ID Activation ── */

@media (max-width: 480px) {
  .fh1-wrap { padding: 16px 10px 14px; border-radius: 0 0 12px 12px; }
}

/* ══════════════════════════════════════
   POST FORM  (light theme)
══════════════════════════════════════ */
.fpf-wrap {
  background: #ffffff;
  border: 1px solid #e0e7ff;
  border-radius: 16px;
  overflow: hidden;
  margin: 18px 0;
  box-shadow: 0 4px 18px rgba(99,102,241,0.1);
  position: relative;
}
.fpf-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa, #8b5cf6, #6366f1);
  background-size: 200% auto;
  animation: fpf-shine 3s linear infinite;
}
@keyframes fpf-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.fpf-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 10px;
  background: #f5f3ff;
  border-bottom: 1px solid #e0e7ff;
}
.fpf-head-icon { font-size: 22px; }
.fpf-head-title {
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  font-weight: 800;
  color: #4f46e5;
  margin: 0; letter-spacing: 0.3px;
}
.fpf-head-user {
  margin-left: auto;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 700;
  color: #7c3aed;
}
.fpf-body { padding: 14px 16px 6px; }
.fpf-body textarea,
.fpf-body input[type="text"],
.fpf-body select {
  background: #fafafa !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 10px !important;
  color: #1e1b4b !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
}
.fpf-body textarea:focus,
.fpf-body input[type="text"]:focus,
.fpf-body select:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}
.fpf-body textarea::placeholder,
.fpf-body input::placeholder { color: #a5b4fc !important; }
.fpf-body select option {
  background: #ffffff !important;
  color: #1e1b4b !important;
}
.fpf-body label {
  color: #6366f1 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.fpf-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 16px; gap: 10px; flex-wrap: wrap;
  background: #fafafa;
  border-top: 1px solid #e0e7ff;
}
.fpf-btn-emoji {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #d97706;
  font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 50px;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.fpf-btn-emoji:hover {
  background: #fef3c7;
  box-shadow: 0 4px 12px rgba(217,119,6,0.15);
}
.fpf-btn-submit {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border: none;
  color: #fff;
  font-size: 14px; font-weight: 800;
  padding: 10px 28px; border-radius: 50px;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
  white-space: nowrap; letter-spacing: 0.3px;
}
.fpf-btn-submit:hover {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  box-shadow: 0 6px 20px rgba(99,102,241,0.45);
  transform: translateY(-1px);
}

/* ── Login Prompt ── */
.fpf-login-wrap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: #f5f3ff;
  border: 1px dashed #c4b5fd;
  border-radius: 14px;
  padding: 20px 16px;
  margin: 18px 0;
  text-align: center; flex-wrap: wrap;
}
.fpf-login-icon { font-size: 28px; }
.fpf-login-text { color: #6366f1; font-size: 14px; font-weight: 600; }
.fpf-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 9px 22px; border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
  transition: all 0.2s; letter-spacing: 0.3px;
}
.fpf-login-btn:hover {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  box-shadow: 0 6px 20px rgba(99,102,241,0.45);
  color: #fff; transform: translateY(-1px);
}

@media (max-width: 480px) {
  .fpf-head { padding: 12px 14px 8px; }
  .fpf-body { padding: 12px 12px 4px; }
  .fpf-actions { padding: 8px 12px 14px; }
  .fpf-btn-submit { padding: 9px 22px; font-size: 13px; }
}

/* ── H3 Today's Posted Games ── */
.fph3-wrap {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #052e16, #14532d, #166534);
  border-radius: 12px 12px 0 0;
  padding: 13px 18px;
  margin-top: 8px;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 12px rgba(22,163,74,0.25);
}
.fph3-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, #86efac, #4ade80, transparent);
}
.fph3-icon { font-size: 20px; flex-shrink: 0; }
.fph3-title {
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  font-weight: 900;
  color: #fff;
  margin: 0; letter-spacing: 0.4px;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  flex: 1;
}
.fph3-badge {
  background: #16a34a;
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 50px;
  letter-spacing: 1px;
  animation: fph3-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fph3-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}

/* ── Scroll to Bottom btn ── */
.fpscroll-wrap {
  display: flex; justify-content: center;
  padding: 10px 0 6px;
}
.fpscroll-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #065f46, #059669);
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 10px 28px; border-radius: 50px;
  border: none; cursor: pointer; letter-spacing: 0.4px;
  box-shadow: 0 4px 14px rgba(5,150,105,0.4);
  transition: all 0.2s; white-space: nowrap;
}
.fpscroll-btn:hover {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 6px 20px rgba(5,150,105,0.6);
  transform: translateY(-2px);
}
.fpscroll-icon {
  font-size: 18px; line-height: 1;
  animation: fpscroll-bounce 1.4s ease-in-out infinite;
}
@keyframes fpscroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}

@media (max-width: 480px) {
  .fph3-wrap { padding: 11px 14px; border-radius: 10px 10px 0 0; }
  .fpscroll-btn { font-size: 12px; padding: 9px 22px; }
}

/* ══════════════════════════════════════
   COMMENT LIST — Light Theme
══════════════════════════════════════ */
#comment-list {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 0 8px;
}

/* Card */
.comment-box {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  transition: background 0.18s;
}
.comment-box:hover { background: #f8fffe; }

/* Colored top stripe per post (accent line) */
.comment-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #16a34a, #4ade80, #16a34a);
  opacity: 0;
  transition: opacity 0.2s;
}
.comment-box:hover::before { opacity: 1; }

/* ── Header ── */
.fcb-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 6px;
  background: linear-gradient(135deg, #fce4ec 0%, #e8eaf6 35%, #e0f7fa 70%, #f3e5f5 100%);
  border-bottom: 1px solid rgba(180,180,220,0.4);
  position: relative;
  overflow: hidden;
}
.fcb-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f48fb1, #ce93d8, #90caf9, #80deea, #a5d6a7, #ce93d8, #f48fb1);
  background-size: 200% 100%;
  animation: fcb-shimmer 4s linear infinite;
}
.fcb-header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 60%, rgba(244,143,177,0.15) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 40%, rgba(144,202,249,0.18) 0%, transparent 55%);
  pointer-events: none;
}
@keyframes fcb-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
.fcb-avatar-wrap { position: relative; flex-shrink: 0; z-index: 1; }
.fcb-avatar {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #ce93d8, 0 4px 12px rgba(150,100,200,0.3);
  display: block;
}
.fcb-online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: #bdbdbd;
  border-radius: 50%;
  border: 2px solid #fff;
  transition: background 0.4s;
}
.fcb-info { flex: 1; min-width: 0; z-index: 1; }
.fcb-name-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 3px;
}
.commentAuthor {
  font-size: clamp(0.82rem, 2.5vw, 0.95rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg, #e91e63, #9c27b0, #3f51b5, #00bcd4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.commentAuthor:hover {
  background: linear-gradient(90deg, #00bcd4, #3f51b5, #9c27b0, #e91e63) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
}
.fcb-stats {
  display: flex; gap: 8px; flex-wrap: wrap; z-index: 1;
}
.fcb-stat {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(180,130,220,0.35);
  border-radius: 50px;
  padding: 2px 8px;
  font-size: 10px; font-weight: 700; color: #6a1b9a;
  backdrop-filter: blur(6px);
}
.fcb-block-btn {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(239,83,80,0.4);
  border-radius: 8px;
  padding: 5px 8px; font-size: 13px;
  cursor: pointer; flex-shrink: 0; z-index: 1;
  transition: background 0.2s;
}
.fcb-block-btn:hover { background: rgba(255,205,210,0.7); }

/* ── Timestamp strip ── */
.fcb-time {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  background: linear-gradient(90deg, #fce4ec, #e8eaf6);
  border-bottom: 1px dashed rgba(180,130,220,0.4);
  font-size: 10.5px; font-weight: 700;
  color: #6a1b9a; font-style: italic;
  letter-spacing: 0.2px;
}

/* ── Content ── */
.fcb-content-wrap { padding: 10px 12px 8px; }
.article_comment.forum {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-family: "Source Sans Pro", "Arial", sans-serif !important;
  font-size: clamp(0.98rem, 2.7vw, 1.08rem) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-align: center !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
}

/* ── Action buttons ── */
.fcb-actions {
  display: flex; gap: 6px;
  padding: 6px 12px 10px;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
}
.fcb-btn {
  flex: 1;
  display: inline-flex; align-items: center;
  justify-content: center; gap: 5px;
  font-size: clamp(11px, 2vw, 13px); font-weight: 800;
  padding: 7px 10px; border-radius: 8px;
  cursor: pointer; text-decoration: none !important;
  transition: all 0.18s; white-space: nowrap;
  letter-spacing: 0.2px;
}
.fcb-btn-quote {
  background: linear-gradient(135deg, #064e3b, #065f46);
  border: 1.5px solid #059669 !important;
  color: #6ee7b7;
}
.fcb-btn-quote:hover {
  background: linear-gradient(135deg, #059669, #047857);
  border-color: #34d399 !important;
  color: #fff;
  box-shadow: 0 3px 10px rgba(5,150,105,0.45);
}
.fcb-btn-follow {
  background: linear-gradient(135deg, #1e1b2e, #12101f);
  border: 1.5px solid #3b1f6e !important;
  color: #c084fc;
}
.fcb-btn-follow:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #7c3aed !important;
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,58,237,0.4);
}
.fcb-btn-edit {
  background: #fff1f2; border: 1.5px solid #fda4af !important;
  color: #be123c;
}
.fcb-btn-edit:hover {
  background: #e11d48; color: #fff;
  box-shadow: 0 3px 10px rgba(225,29,72,0.3);
}

/* ── Blockquote (quoted posts) ── */
.article_comment.forum blockquote {
  background: linear-gradient(145deg, #fff9f0 0%, #fff3e0 50%, #fef9f0 100%) !important;
  border: 1.5px solid #fed7aa !important;
  border-top: 3px solid #fb923c !important;
  border-radius: 14px !important;
  padding: 0 0 14px 0 !important;
  margin: 12px 0 10px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(251,146,60,0.15), 0 1px 4px rgba(0,0,0,0.06) !important;
  font-family: "Source Sans Pro", "Arial", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  text-align: center !important;
  color: #431407 !important;
}
.article_comment.forum blockquote::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fdba74, #fb923c, #f97316, #fb923c, #fdba74);
}
.article_comment.forum blockquote::after {
  content: '❝';
  position: absolute;
  bottom: 4px; right: 12px;
  font-size: 40px;
  line-height: 1;
  color: rgba(251,146,60,0.12);
  font-style: normal;
}
/* content paragraphs */
.article_comment.forum blockquote p {
  margin: 0 0 4px !important;
  font-family: "Source Sans Pro", "Arial", sans-serif !important;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  text-align: center !important;
  padding: 0 14px !important;
  color: #7c2d12 !important;
}
/* "Originally Posted By: username" header */
.article_comment.forum blockquote p:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  background: linear-gradient(90deg, #fff7ed, #ffedd5) !important;
  color: #9a3412 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  padding: 8px 14px !important;
  border-radius: 11px 11px 0 0 !important;
  letter-spacing: 0.3px;
  margin: 0 0 10px 0 !important;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px dashed #fed7aa;
}
.article_comment.forum blockquote p:first-child::before {
  content: '❝';
  font-size: 16px;
  color: #fb923c;
  flex-shrink: 0;
  line-height: 1;
}
/* username */
.article_comment.forum blockquote p:first-child .kamal {
  color: #ea580c !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 0.4px currentColor !important;
}
/* timestamp line */
.article_comment.forum blockquote p.fw-lighter {
  font-size: 11px !important;
  color: #c2410c !important;
  font-style: normal !important;
  font-weight: 600 !important;
  padding: 0 14px 4px !important;
  margin: 0 0 8px 0 !important;
  text-align: center !important;
  opacity: 0.85;
}
.article_comment.forum blockquote p.fw-lighter::before {
  content: '🕐 ';
  font-style: normal;
}

/* ── Badge ── */
.fcb-name-row .badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 4px 9px !important;
  border-radius: 50px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.fcb-name-row .badge::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-20deg);
}

/* ── Go To Top ── */
.fpscroll-top-wrap { display: flex; justify-content: center; padding: 12px 0 4px; }
.fpscroll-top-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 10px 28px; border-radius: 50px; border: none;
  cursor: pointer; letter-spacing: 0.4px;
  box-shadow: 0 4px 14px rgba(59,130,246,0.4);
  transition: all 0.2s; white-space: nowrap;
}
.fpscroll-top-btn:hover {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  box-shadow: 0 6px 20px rgba(59,130,246,0.6);
  transform: translateY(-2px);
}
.fpscroll-top-icon { font-size: 18px; animation: fpu 1.4s ease-in-out infinite; }
@keyframes fpu { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* ── Responsive ── */
@media (max-width: 480px) {
  .fcb-header { padding: 8px 10px 6px; gap: 8px; }
  .fcb-avatar { width: 38px; height: 38px; }
  .fcb-content-wrap { padding: 8px 10px 6px; }
  .fcb-actions { padding: 6px 10px 8px; gap: 5px; }
  .fpscroll-top-btn { font-size: 12px; padding: 9px 20px; }
}
@media (min-width: 768px) {
  #comment-list { gap: 10px; }
  .comment-box { border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
  .comment-box::before { border-radius: 14px 14px 0 0; }
  .fcb-header { border-radius: 14px 14px 0 0; padding: 12px 16px 8px; }
  .fcb-avatar { width: 50px; height: 50px; }
  .fcb-content-wrap { padding: 12px 16px 10px; }
  .fcb-actions { padding: 8px 16px 12px; gap: 8px; border-radius: 0 0 14px 14px; }
}

/* ══════════════════════════════════════
   PAGINATION & AD BANNER
══════════════════════════════════════ */

/* ── Pagination wrap ── */
#comment-pagination-wrap {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin: 10px 0 6px;
  text-align: center;
}
.fpg-info {
  font-size: 11px; font-weight: 700; color: #166534;
  letter-spacing: 0.3px; margin-bottom: 10px;
}
.fpg-info strong { color: #15803d; font-size: 13px; }

/* Override Bootstrap pagination */
#comment-pagination {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  list-style: none;
  padding: 0; margin: 0;
}
@media (max-width: 480px) {
  #comment-pagination { gap: 4px; }
}

/* ── Ad banner ── */
.fpg-ad-wrap {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: 14px;
  overflow: hidden;
  margin: 10px 0 6px;
  position: relative;
}
.fpg-ad-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa, #8b5cf6, #6366f1);
  background-size: 200% auto;
  animation: fpg-ad-shine 3s linear infinite;
}
@keyframes fpg-ad-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.fpg-ad-label {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 12px 5px;
  font-size: 10px; font-weight: 800;
  color: #94a3b8; letter-spacing: 1.5px; text-transform: uppercase;
}
.fpg-ad-label::before,
.fpg-ad-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,0.3));
}
.fpg-ad-label::after {
  background: linear-gradient(90deg, rgba(148,163,184,0.3), transparent);
}
.fpg-ad-inner { padding: 0 8px 8px; }


/* ══════════════════════════════════════
   LIVE CHAT PANEL
══════════════════════════════════════ */

    /* ── FAB Toggle Button ─────────────────────────────── */
    .chat-fab {
      position: fixed;
      bottom: 95px;
      right: 7px;
      z-index: 1050;
      background: #0a4275;
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 8px 14px;
      font-size: 13px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
      /* large enough touch target */
      min-height: 36px;
      min-width: 70px;
    }

    /* ── Panel shell ───────────────────────────────────── */
    .chat-panel {
      display: none;
      position: fixed;
      z-index: 1049;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 24px rgba(0,0,0,.35);
      flex-direction: column;
      /* Mobile-first: near full-width, sits just above FAB row */
      bottom: 140px;
      left: 7px;
      right: 7px;
      max-height: 70vh;   /* never taller than 70% of viewport */
    }

    /* Desktop: pin to right, fixed 320px wide */
    @media (min-width: 480px) {
      .chat-panel {
        left: auto;
        width: 320px;
        right: 7px;
        max-height: 520px;
      }
    }

    /* Fullscreen state — covers entire viewport */

    /* ── Header ────────────────────────────────────────── */
    .chat-header {
      background: #0a4275;
      color: #fff;
      padding: 10px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .chat-header-title  { font-weight: 600; font-size: 15px; }
    .chat-header-right  { display: flex; align-items: center; gap: 8px; }
    .chat-online-badge  {
      font-size: 11px;
      background: rgba(255,255,255,.18);
      border-radius: 10px;
      padding: 3px 8px;
      white-space: nowrap;
    }
    .chat-fs-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .8;
    }
    .chat-fs-btn:hover { opacity: 1; }

    .chat-close-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      /* 44×44 touch target */
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── Online strip ──────────────────────────────────── */
    .chat-online-strip {
      background: #e8f4fd;
      border-bottom: 1px solid #bee3f8;
      padding: 6px 10px;
      flex-shrink: 0;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    .chat-online-label {
      font-size: 10px;
      color: #0a4275;
      font-weight: 700;
      margin-right: 6px;
    }
    .online-user-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #fff;
      border: 1px solid #bee3f8;
      border-radius: 12px;
      padding: 3px 8px 3px 5px;
      margin-right: 5px;
      vertical-align: middle;
    }
    .online-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #28a745;
      display: inline-block;
      flex-shrink: 0;
      animation: pulse-green 2s infinite;
    }
    .online-chip-avatar { border-radius: 50%; object-fit: cover; }
    .online-chip-name   { font-size: 11px; font-weight: 600; color: #0a4275; }

    /* ── Messages area ─────────────────────────────────── */
    .chat-messages {
      background: #f1f3f5;
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      /* Height adapts: panel is max 70vh, header+strip+input ~120px */
      min-height: 150px;
    }

    /* ── Message bubbles ───────────────────────────────── */
    .chat-you-name { color: #198754 !important; }

    /* ── Input area ────────────────────────────────────── */
    .chat-input-area {
      background: #fff;
      padding: 8px 10px;
      border-top: 1px solid #dee2e6;
      flex-shrink: 0;
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .chat-input {
      flex: 1;
      border: 1px solid #ced4da;
      border-radius: 14px;
      padding: 10px 14px;
      /* 16px prevents iOS auto-zoom on focus */
      font-size: 16px;
      outline: none;
      min-width: 0;           /* allows flex shrink on tiny screens */
      resize: none;           /* hide manual resize handle */
      overflow-y: hidden;     /* auto-grow handles scroll, not scrollbar */
      line-height: 1.4;
      max-height: 100px;      /* cap at ~5 lines before scrolling */
      overflow-y: auto;
      font-family: inherit;
    }
    .chat-send-btn {
      background: #198754;
      color: #fff;
      border: none;
      border-radius: 50%;
      /* 44×44 touch target */
      width: 44px;
      height: 44px;
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat-notice {
      background: #fff3cd;
      border-top: 1px solid #ffc107;
      color: #856404;
      font-size: 11px;
      padding: 5px 10px;
      text-align: center;
      flex-shrink: 0;
      line-height: 1.4;
    }

    /* ── Date separator (WhatsApp-style) ──────────────── */

    /* ── Load Previous button ─────────────────────────── */
    .chat-load-prev-wrap {
      text-align: center;
      padding: 4px 0 6px;
      flex-shrink: 0;
    }
    .chat-load-prev-btn {
      background: none;
      border: 1px solid #ced4da;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 12px;
      color: #0a4275;
      cursor: pointer;
      transition: background .15s;
    }
    .chat-load-prev-btn:disabled {
      color: #aaa;
      border-color: #eee;
      cursor: default;
    }
    .chat-load-prev-btn:not(:disabled):hover {
      background: #e8f4fd;
    }

    /* ── Loading spinner ───────────────────────────────── */
    .chat-spinner {
      display: flex;
      justify-content: center;
      gap: 5px;
      padding: 20px 0;
    }
    .chat-spinner-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #0a4275;
      animation: chat-bounce .9s infinite alternate;
    }
    .chat-spinner-dot:nth-child(2) { animation-delay: .2s; }
    .chat-spinner-dot:nth-child(3) { animation-delay: .4s; }
    @keyframes chat-bounce {
      from { opacity: .25; transform: translateY(0); }
      to   { opacity: 1;   transform: translateY(-5px); }
    }

    /* ── Pulse animation ───────────────────────────────── */
    @keyframes pulse-green {
      0%, 100% { box-shadow: 0 0 0 0 rgba(40,167,69,.5); }
      50%       { box-shadow: 0 0 0 4px rgba(40,167,69,0); }
    }
  

/* ── Emoji Modal ── */

              #emojiModal .emoji-grid { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
              #emojiModal .emoji-grid img { width:56px; height:56px; object-fit:contain; border-radius:8px; background:rgba(0,0,0,0.04); padding:3px; cursor:pointer; transition:transform 0.15s, background 0.15s; }
              #emojiModal .emoji-grid img:hover { transform:scale(1.25); background:rgba(0,0,0,0.1); }
            

/* ── header.html inline styles ────────────────────────── */

/* ── navbar.html inline styles ────────────────────────── */
.smr-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 4px 8px 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #052e16 0%, #14532d 50%, #052e16 100%);
    border: 1px solid rgba(74, 222, 128, 0.25);
    box-shadow:
      0 2px 12px rgba(22, 163, 74, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  .smr-navbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4ade80, #86efac, #4ade80, transparent);
  }

  .smr-nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
  }

  .smr-nav-item {
    flex: 1;
    position: relative;
  }

  /* divider between items */
  .smr-nav-item + .smr-nav-item::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(74, 222, 128, 0.2);
  }

  .smr-navbar .smr-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 11px 6px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    color: #d1fae5 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
  }

  .smr-navbar .smr-nav-link:hover,
  .smr-navbar .smr-nav-link:focus {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80 !important;
    text-decoration: none !important;
  }

  .smr-navbar .smr-nav-link.active {
    background: rgba(22, 163, 74, 0.2);
    color: #fff !important;
  }

  .smr-nav-icon {
    font-size: 15px;
    line-height: 1;
  }

  /* ── Responsive ── */
  @media (max-width: 360px) {
    .smr-navbar { margin: 3px 4px 6px; border-radius: 8px; }
    .smr-navbar .smr-nav-link { font-size: 11px; padding: 10px 4px; gap: 3px; }
    .smr-nav-icon { font-size: 13px; }
  }

  @media (min-width: 361px) and (max-width: 480px) {
    .smr-nav-link { font-size: 11.5px; padding: 10px 5px; }
  }

  @media (min-width: 768px) {
    .smr-navbar { margin: 5px 12px 10px; }
    .smr-nav-link { font-size: 14px; padding: 13px 10px; gap: 7px; }
    .smr-nav-icon { font-size: 17px; }
  }

  @media (min-width: 1024px) {
    .smr-navbar { max-width: 100%; }
    .smr-navbar .smr-nav-link { padding: 14px 18px; }
  }

/* ── forum/footer.html inline styles ──────────────────── */
.smr-footer {
    background: linear-gradient(180deg, #052e16 0%, #0a1f0f 100%);
    color: #e2e8f0;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
  }
  .smr-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #16a34a, #4ade80, #86efac, #4ade80, #16a34a);
    background-size: 200% auto;
    animation: smr-shimmer 3s linear infinite;
  }
  @keyframes smr-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
  }
  .smr-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px 12px;
  }
  .smr-footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
  }
  .smr-footer-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  }
  .smr-fn-home   { background: linear-gradient(135deg, #ca8a04, #fbbf24); color: #1c1917 !important; }
  .smr-fn-forum  { background: linear-gradient(135deg, #15803d, #22c55e); color: #fff !important; }
  .smr-fn-trick  { background: linear-gradient(135deg, #b91c1c, #ef4444); color: #fff !important; }
  .smr-fn-info   { background: linear-gradient(135deg, #0e7490, #22d3ee); color: #fff !important; }
  .smr-fn-app    { background: linear-gradient(135deg, #374151, #9ca3af); color: #fff !important; }
  .smr-fn-policy { background: linear-gradient(135deg, #1d4ed8, #60a5fa); color: #fff !important; }
  .smr-footer-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #166534, transparent);
    margin: 0 16px;
  }
  .smr-footer-bottom {
    background: rgba(0,0,0,0.3);
    padding: 16px;
    text-align: center;
  }
  .smr-footer-brand {
    font-size: 15px;
    font-weight: 800;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .smr-footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22,163,74,0.15);
    border: 1px solid rgba(74,222,128,0.3);
    border-radius: 50px;
    padding: 6px 16px;
    margin: 6px 0;
    font-size: 13px;
    font-weight: 700;
    color: #86efac;
    text-decoration: none;
    transition: background 0.2s;
  }
  .smr-footer-contact:hover {
    background: rgba(22,163,74,0.3);
    color: #4ade80;
  }
  .smr-footer-copy {
    font-size: 11px;
    color: #6b7280;
    margin-top: 8px;
    line-height: 1.8;
  }
  .smr-footer-copy strong { color: #9ca3af; }
  .smr-fab-call {
    position: fixed;
    bottom: 18px; left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #fff;
    font-size: 12px; font-weight: 800;
    padding: 10px 14px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(22,163,74,0.5);
    z-index: 999;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: smr-pulse 2.5s ease-in-out infinite;
  }
  .smr-fab-call:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(22,163,74,0.7); color: #fff; }
  @keyframes smr-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(22,163,74,0.5); }
    50%       { box-shadow: 0 4px 22px rgba(74,222,128,0.8); }
  }
  .smr-fab-refresh {
    position: fixed;
    bottom: 18px; right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    font-size: 12px; font-weight: 800;
    padding: 10px 14px;
    border-radius: 50px;
    border: none; cursor: pointer;
    box-shadow: 0 4px 14px rgba(59,130,246,0.5);
    z-index: 999;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .smr-fab-refresh:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(59,130,246,0.7); }
  .smr-fab-refresh .refresh-icon { display: inline-block; transition: transform 0.4s; }
  .smr-fab-refresh:active .refresh-icon { transform: rotate(360deg); }
  @media (max-width: 480px) {
    .smr-footer-nav a { font-size: 11px; padding: 6px 11px; }
    .smr-footer-brand { font-size: 13px; }
    .smr-fab-call, .smr-fab-refresh { font-size: 11px; padding: 8px 12px; }
  }
  @media (min-width: 768px) {
    .smr-footer-nav { gap: 10px; padding: 24px 20px 14px; }
    .smr-footer-nav a { font-size: 13px; padding: 8px 18px; }
    .smr-footer-brand { font-size: 16px; }
  }.modal-open{overflow:hidden}.page-link{position:relative;display:block;color:#0d6efd;text-decoration:none;background-color:#fff;border:1px solid #dee2e6;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;padding:.375rem .75rem}.page-link:hover{z-index:2;color:#0a58ca;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;color:#0a58ca;background-color:#e9ecef;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.active .page-link{z-index:3;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;background-color:#fff;border-color:#dee2e6}.page-item:first-child .page-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}#comment-pagination .page-item .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:8px!important;border:1.5px solid #bbf7d0!important;background:#fff!important;color:#16a34a!important;font-size:13px;font-weight:700;padding:0 10px;transition:all .18s;box-shadow:0 1px 4px rgba(22,163,74,.1);text-decoration:none}#comment-pagination .page-item .page-link:hover{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important;box-shadow:0 3px 10px rgba(22,163,74,.35);transform:translateY(-1px)}#comment-pagination .page-item.active .page-link{background:linear-gradient(135deg,#16a34a,#15803d)!important;border-color:#15803d!important;color:#fff!important;box-shadow:0 3px 12px rgba(22,163,74,.45);font-weight:900}#comment-pagination .page-item.disabled .page-link{background:#f3f4f6!important;border-color:#e5e7eb!important;color:#d1d5db!important;cursor:not-allowed;transform:none;box-shadow:none}
.chat-msg-other{display:flex;flex-direction:column;align-items:flex-start}.chat-msg-self{display:flex;flex-direction:column;align-items:flex-end}
.chat-date-sep{display:flex;align-items:center;gap:8px;margin:6px 0;flex-shrink:0}.chat-date-sep::before,.chat-date-sep::after{content:'';flex:1;height:1px;background:#ced4da}.chat-date-sep span{font-size:11px;color:#6c757d;background:#f1f3f5;border:1px solid #ced4da;border-radius:10px;padding:2px 10px;white-space:nowrap}
.chat-panel.chat-fullscreen{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-height:100%!important;border-radius:0!important}.chat-panel.chat-fullscreen .chat-messages{max-height:none;min-height:0}
.fi-wrap{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left:5px solid #16a34a;border-radius:0 12px 12px 0;padding:clamp(12px,3vw,18px) clamp(14px,3vw,22px);margin:14px 0;position:relative;overflow:hidden;font-size:clamp(.78rem,2.2vw,.93rem);line-height:1.8;color:#14532d;text-align:justify;box-shadow:0 2px 10px rgba(22,163,74,.1)}.fi-wrap::before{content:'\201C';position:absolute;top:-8px;left:8px;font-size:80px;line-height:1;color:#16a34a;opacity:.12;font-family:Georgia,serif;pointer-events:none}
.fh2-wrap{position:relative;background:linear-gradient(135deg,#7f1d1d,#b91c1c,#dc2626);border-radius:10px;padding:14px 18px 14px 52px;margin:18px 0 10px;overflow:hidden;box-shadow:0 3px 14px rgba(185,28,28,.3)}.fh2-wrap::before{content:'🎯';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:22px}.fh2-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#fca5a5,#f87171,#fca5a5,transparent)}.fh2-title{font-size:clamp(.9rem,3vw,1.15rem);font-weight:900;color:#fff;letter-spacing:.4px;margin:0;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.3)}@media(max-width:480px){.fh2-wrap{padding:12px 14px 12px 44px}}
.fid-wrap{background:linear-gradient(135deg,#1e1b4b,#312e81,#3730a3);border-radius:14px;overflow:hidden;margin:18px 0;box-shadow:0 4px 18px rgba(49,46,129,.35);position:relative}.fid-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(167,139,250,.15) 0%,transparent 65%);pointer-events:none}
.smr-header{margin:6px 8px;text-align:center;border:2px solid #16a34a;border-radius:12px;box-shadow:0 0 0 1px rgba(74,222,128,.15),0 4px 18px rgba(22,163,74,.35),0 1px 4px rgba(22,163,74,.2);background:transparent;overflow:visible;padding:6px 0}.smr-header a{display:inline-block;line-height:0}.smr-header img{max-width:100%;width:auto;height:auto;display:inline-block;border-radius:0}@media(max-width:480px){.smr-header{margin:4px 4px;border-radius:8px}}
.fr-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;margin:12px 0;box-shadow:0 2px 12px rgba(0,0,0,.07)}.fr-head{background:linear-gradient(135deg,#1e293b,#0f172a);padding:12px 18px;display:flex;align-items:center;gap:10px}.fr-head-icon{font-size:20px}.fr-head-title{color:#fff;font-size:clamp(.82rem,2.5vw,.97rem);font-weight:800;letter-spacing:.3px;margin:0}
.fr-body{padding:6px 0}.fr-item{display:flex;align-items:flex-start;gap:12px;padding:10px 18px;border-bottom:1px solid #f3f4f6;font-size:clamp(.78rem,2.2vw,.88rem);color:#374151;line-height:1.6}.fr-item:last-child{border-bottom:none}.fr-num{min-width:26px;height:26px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;margin-top:1px}
.fr-sub{margin:6px 0 0 38px;padding:0;list-style:none}.fr-sub li{font-size:clamp(.75rem,2vw,.84rem);color:#6b7280;padding:3px 0 3px 16px;position:relative}.fr-sub li::before{content:'◆';position:absolute;left:0;color:#16a34a;font-size:8px;top:6px}.fr-alert{background:linear-gradient(135deg,#7f1d1d,#991b1b);color:#fecaca;padding:12px 18px;font-size:clamp(.8rem,2.2vw,.9rem);font-weight:700;text-align:center;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:8px}
.fid-head{padding:16px 18px 12px;text-align:center;border-bottom:1px solid rgba(167,139,250,.25);position:relative}.fid-head-icon{font-size:28px;display:block;margin-bottom:4px}.fid-head-title{font-size:clamp(1rem,3.5vw,1.25rem);font-weight:900;color:#c4b5fd;letter-spacing:1.5px;text-transform:uppercase;margin:0;text-shadow:0 0 20px rgba(167,139,250,.4)}.fid-head-sub{font-size:clamp(.75rem,2vw,.83rem);color:#a5b4fc;margin-top:4px}.fid-body{padding:14px 16px 18px;position:relative}.fid-intro{background:rgba(255,255,255,.07);border:1px solid rgba(167,139,250,.2);border-radius:8px;padding:10px 14px;font-size:clamp(.78rem,2.2vw,.87rem);color:#c7d2fe;line-height:1.7;margin-bottom:14px}.fid-steps{display:flex;flex-direction:column;gap:10px}.fid-step{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.15);border-radius:10px;padding:12px 14px}.fid-step-num{min-width:32px;height:32px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;box-shadow:0 2px 8px rgba(109,40,217,.4)}.fid-step-text{font-size:clamp(.78rem,2.2vw,.87rem);color:#e0e7ff;line-height:1.6;padding-top:5px}.fid-step-text strong{color:#a78bfa}
.chat-header-title{font-weight:600;font-size:15px}.chat-header-right{display:flex;align-items:center;gap:8px}.chat-online-badge{font-size:11px;background:rgba(255,255,255,.18);border-radius:10px;padding:3px 8px;white-space:nowrap}.online-chip-name{font-size:11px;font-weight:600;color:#0a4275}
.chat-meta{display:flex;align-items:center;gap:5px;margin-bottom:3px;flex-wrap:nowrap;max-width:100%}.chat-meta-self{display:flex;align-items:center;gap:5px;margin-bottom:3px;justify-content:flex-end}.chat-avatar-wrap{position:relative;flex-shrink:0}.chat-avatar{border-radius:50%;object-fit:cover;display:block}.chat-online-dot{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;background:#28a745;border:2px solid #f1f3f5}.chat-author{font-weight:700;font-size:12px;color:#0a4275}.chat-badge{font-size:10px;padding:1px 5px;flex-shrink:0}.chat-time{font-size:10px;color:#6c757d;margin-left:auto;white-space:nowrap}.chat-offline{color:#aaa!important}.chat-bubble-other{background:#fff;border:1px solid #dee2e6;border-radius:0 10px 10px 10px;padding:7px 11px;font-size:14px;max-width:88%;word-break:break-word;white-space:pre-wrap;margin-left:33px}.chat-bubble-self{background:#d1e7dd;border:1px solid #a3cfbb;border-radius:10px 0 10px 10px;padding:7px 11px;font-size:14px;max-width:88%;word-break:break-word;white-space:pre-wrap}.chat-login-area{background:#fff;padding:10px;border-top:1px solid #dee2e6;text-align:center;flex-shrink:0}
.btn-block{display:block;width:100%}.modal-confirm .modal-header{border-bottom:none;position:relative;text-align:center;display:block;padding:35px 20px 20px}.modal-confirm .icon-box{width:60px;height:60px;border-radius:50%;border:3px solid #f15e5e;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#f15e5e}
.bg-danger{background-color:#dc3545!important}
.bg-primary{background-color:#0d6efd!important}
.bg-info{background-color:#0dcaf0!important}.bg-warning{background-color:#ffc107!important}.bg-light{background-color:#f8f9fa!important}.bg-dark{background-color:#212529!important}.bg-white{background-color:#fff!important}.bg-black{background-color:#000!important}
.text-dark{color:#212529!important}
.fw-semibold{font-weight:600!important}.user_role{font-size:12px;margin-top:4px}.filter-btn{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;color:#fff;border-radius:8px;padding:6px 14px;font-weight:700;cursor:pointer;transition:opacity .2s}.filter-btn:hover{opacity:.85}
.text-danger{color:#dc3545!important}

/* ══════════════════════════════════════
   COMPETITION SECTION  (cmp-*)
══════════════════════════════════════ */

/* ── Wrapper ── */
.cmp-wrap {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 16px;
  overflow: hidden;
  margin: 14px 0;
  box-shadow: 0 4px 20px rgba(245,158,11,0.15);
  position: relative;
}
.cmp-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b, #d97706, #f59e0b);
  background-size: 200% auto;
  animation: cmp-gold-shine 3s linear infinite;
}
@keyframes cmp-gold-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Head ── */
.cmp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, #1c1917, #292524);
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(251,191,36,0.25);
}
.cmp-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cmp-trophy { font-size: 24px; flex-shrink: 0; }
.cmp-head-game {
  font-size: clamp(0.95rem, 3vw, 1.1rem); font-weight: 900;
  color: #fbbf24; letter-spacing: 1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.cmp-live-badge {
  display: inline-block;
  background: #dc2626; color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 50px;
  animation: cmp-blink 1.2s ease-in-out infinite;
}
@keyframes cmp-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.cmp-head-sub {
  font-size: 11px; color: #a8a29e; margin-top: 2px;
}
.cmp-pts-pill {
  background: linear-gradient(135deg, #92400e, #b45309);
  border: 1px solid #fbbf24;
  color: #fde68a;
  font-size: 12px; font-weight: 800; letter-spacing: 0.3px;
  padding: 5px 12px; border-radius: 50px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Notice body ── */
.cmp-notice-body {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-bottom: 1px dashed #fde68a;
  padding: 10px 14px;
}
.cmp-notice-text {
  font-size: clamp(0.8rem, 2.4vw, 0.88rem);
  color: #78350f; line-height: 1.6; text-align: center;
}

/* ── Demo label (remove before going live) ── */
.cmp-demo-label {
  background: #0f172a; color: #94a3b8;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 5px 14px; text-align: center;
  border-top: 1px dashed #334155; border-bottom: 1px dashed #334155;
}

/* ── State: UPCOMING ── */
.cmp-upcoming-box {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-top: 1px solid #bbf7d0;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.cmp-upcoming-icon { font-size: 28px; flex-shrink: 0; }
.cmp-upcoming-title {
  font-size: clamp(0.85rem, 2.5vw, 0.95rem); font-weight: 800; color: #14532d;
}
.cmp-upcoming-sub { font-size: 11.5px; color: #4b7a59; margin-top: 2px; }
.cmp-countdown {
  margin-left: auto;
  background: linear-gradient(135deg, #14532d, #15803d);
  color: #4ade80;
  font-size: clamp(1rem, 3vw, 1.2rem); font-weight: 900; letter-spacing: 2px;
  padding: 8px 16px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(22,163,74,0.3);
}

/* ── State: OPEN (participate) ── */
.cmp-participate-box {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 14px 16px 12px;
}
.cmp-participate-label {
  font-size: 12px; font-weight: 700; color: #d97706; margin-bottom: 8px;
}
.cmp-participate-row { display: flex; gap: 8px; align-items: stretch; }
.cmp-jodi-input {
  width: 90px; flex-shrink: 0;
  border: 2px solid #fde68a !important;
  border-radius: 10px !important;
  background: #fffbeb !important;
  color: #92400e !important;
  font-size: 1.3rem !important; font-weight: 900 !important;
  text-align: center !important;
  padding: 8px 10px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.cmp-jodi-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.2) !important;
}
.cmp-participate-btn {
  flex: 1;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border: none; border-radius: 10px;
  color: #fff; font-size: 14px; font-weight: 800;
  padding: 10px 16px; cursor: pointer; letter-spacing: 0.3px;
  box-shadow: 0 3px 12px rgba(245,158,11,0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cmp-participate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(245,158,11,0.55);
}
.cmp-time-note {
  margin-top: 7px;
  font-size: 11.5px; color: #6b7280;
}
.cmp-time-left {
  font-weight: 800; color: #d97706;
  font-variant-numeric: tabular-nums;
}

/* ── State: ALREADY ENTERED ── */
.cmp-entered-box {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-top: 1px solid #bbf7d0;
  padding: 14px 16px;
}
.cmp-entered-tick { font-size: 28px; flex-shrink: 0; }
.cmp-entered-title {
  font-size: clamp(0.85rem, 2.5vw, 0.95rem); font-weight: 800; color: #14532d;
}
.cmp-entered-sub { font-size: 12px; color: #4b7a59; margin-top: 2px; }
.cmp-entered-jodi {
  font-size: 1.1rem; font-weight: 900; color: #15803d;
  background: #dcfce7; border: 1.5px solid #4ade80;
  padding: 2px 10px; border-radius: 8px;
}

/* ── State: CLOSED ── */
.cmp-closed-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-top: 1px solid #cbd5e1;
  padding: 12px 16px;
}
.cmp-closed-text {
  flex: 1; font-size: 12.5px; font-weight: 700; color: #475569;
}
.cmp-dots { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.cmp-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8;
  animation: cmp-dot-bounce 1.2s ease-in-out infinite;
}
.cmp-dots span:nth-child(2) { animation-delay: 0.2s; }
.cmp-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cmp-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Participants board ── */
.cmp-participants-wrap {
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
}
.cmp-participants-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.cmp-participants-title {
  font-size: 12px; font-weight: 800; color: #374151; text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cmp-count-pill {
  background: #e5e7eb; color: #374151;
  font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 50px;
}
.cmp-participants-list { display: flex; flex-direction: column; }
.cmp-entry {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}
.cmp-entry:last-child { border-bottom: none; }
.cmp-entry:hover { background: #f9fafb; }
.cmp-entry-av {
  border-radius: 50%; object-fit: cover;
  border: 2px solid #e5e7eb; flex-shrink: 0;
}
.cmp-entry-info {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap;
}
.cmp-entry-name {
  font-size: 12.5px; font-weight: 800; color: #1f2937;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100px;
}
.cmp-entry-jodi {
  margin-left: auto; flex-shrink: 0;
  font-size: 13px; font-weight: 900; color: #374151;
  min-width: 28px; text-align: right;
}
.cmp-jodi-hidden {
  color: #9ca3af; letter-spacing: 3px; font-size: 11px;
}

/* ── Winner highlight ── */
.cmp-entry-winner {
  background: linear-gradient(135deg, #fffbeb, #fef9c3) !important;
  border-left: 3px solid #f59e0b;
}
.cmp-entry-winner:hover { background: #fff8e1 !important; }
.cmp-entry-winner .cmp-entry-av { border-color: #f59e0b; }
.cmp-jodi-winner {
  color: #d97706 !important; font-weight: 900;
}

/* ── Result banner ── */
.cmp-result-banner {
  background: linear-gradient(135deg, #14532d, #15803d, #16a34a);
  padding: 16px 14px;
  text-align: center;
  border-top: 1px solid #bbf7d0;
  position: relative; overflow: hidden;
}
.cmp-result-banner::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, transparent);
}
.cmp-result-title {
  font-size: clamp(1rem, 3vw, 1.2rem); font-weight: 900;
  color: #fff; letter-spacing: 0.5px; margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cmp-result-jodi-row {
  font-size: 13px; font-weight: 700; color: #86efac;
}
.cmp-winning-jodi {
  font-size: 1.6rem; font-weight: 900; color: #fbbf24;
  background: rgba(0,0,0,0.25);
  padding: 2px 14px; border-radius: 8px; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Winners list ── */
.cmp-winners-wrap {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-top: 1px solid #fde68a;
  padding: 10px 14px;
}
.cmp-winners-title {
  font-size: 11px; font-weight: 800; color: #92400e;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.cmp-winner-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed #fde68a;
}
.cmp-winner-row:last-child { border-bottom: none; }
.cmp-winner-rank { font-size: 18px; flex-shrink: 0; line-height: 1; }
.cmp-winner-name {
  font-size: 13px; font-weight: 800; color: #78350f; flex: 1;
}
.cmp-winner-pts {
  font-size: 12px; font-weight: 900; color: #15803d;
  background: #dcfce7; border: 1px solid #4ade80;
  padding: 2px 9px; border-radius: 50px; flex-shrink: 0;
}

@media (max-width: 480px) {
  .cmp-head { padding: 10px 12px 8px; }
  .cmp-trophy { font-size: 20px; }
  .cmp-upcoming-box, .cmp-entered-box, .cmp-closed-box { padding: 12px 12px; }
  .cmp-countdown { font-size: 1rem; padding: 6px 12px; }
  .cmp-participate-box { padding: 12px 12px 10px; }
  .cmp-jodi-input { width: 76px !important; }
  .cmp-entry { padding: 7px 12px; }
  .cmp-entry-name { max-width: 80px; }
  .cmp-result-banner { padding: 14px 12px; }
  .cmp-winners-wrap { padding: 9px 12px; }
  .cmp-winner-row { gap: 6px; }
}