/*
 * JLPT180 Daily Board Rank Base CSS owner.
 * P4.43: base frame/title/tabs/score/realm rules remain here.
 */
/*
 * JLPT180 Daily Board Rank CSS owner.
 * Scope: structural #tdb-rank-board rules shared by the standalone board theme.
 * Scope: #tdb-rank-board only.
 */
#tdb-rank-board,
#tdb-rank-board *{ box-sizing: border-box; }


          #tdb-rank-board{
            --tdb-blue: #1568df;
            --tdb-blue-dark: #093b94;
            --tdb-deep: #063a76;
            --tdb-ink: #082f55;
            --tdb-gold: #d28a00;
            --tdb-gold-soft: #ffe6a3;
            --tdb-silver: #77a6d7;
            --tdb-bronze: #c97335;
            width: 100%;
            min-width: 0;
            position: relative;
            isolation: isolate;
            color: var(--tdb-ink);
          }


          #tdb-rank-board::before,
#tdb-rank-board::after{
            content: "";
            position: absolute;
            pointer-events: none;
            z-index: -1;
          }


          #tdb-rank-board::before{
            inset: -18px;
            border-radius: 34px;
            background:
              radial-gradient(circle at 8% 5%, rgba(255,143,185,.30), transparent 25%),
              radial-gradient(circle at 92% 7%, rgba(255,204,89,.26), transparent 24%),
              linear-gradient(135deg, rgba(228,249,255,.82), rgba(255,244,250,.72) 45%, rgba(255,249,225,.68));
          }


          #tdb-rank-board::after{
            top: 6px;
            right: 36px;
            width: 220px;
            height: 120px;
            background:
              radial-gradient(circle, rgba(255,164,199,.48) 0 6px, transparent 7px) 10px 18px / 42px 38px,
              radial-gradient(circle, rgba(255,215,113,.46) 0 3px, transparent 4px) 0 0 / 34px 34px;
            opacity: .42;
          }


          #tdb-rank-board .tdb-page-title{
            position: relative;
            text-align: center;
            margin: 0 0 16px;
            padding-top: 4px;
          }


          #tdb-rank-board .tdb-page-title::before,
#tdb-rank-board .tdb-page-title::after{
            content: "";
            position: absolute;
            top: 34px;
            width: min(26vw, 245px);
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(210,138,0,.88), rgba(24,91,174,.45), transparent);
            filter: drop-shadow(0 0 7px rgba(255,214,112,.32));
          }


          #tdb-rank-board .tdb-page-title::before{ left: 5%; }


          #tdb-rank-board .tdb-page-title::after{ right: 5%; transform: scaleX(-1); }


          #tdb-rank-board .tdb-page-title h1{
            margin: 0;
            color: #0e4797;
            font-family: Georgia, 'Times New Roman', serif;
            font-size: clamp(34px, 4.7vw, 58px);
            font-weight: 900;
            letter-spacing: .045em;
            line-height: 1.02;
            text-shadow:
              0 4px 0 rgba(255,255,255,.96),
              0 8px 18px rgba(6,54,114,.18),
              0 0 28px rgba(55,139,255,.28);
          }


          #tdb-rank-board .tdb-page-title h1::before,
#tdb-rank-board .tdb-page-title h1::after{
            content: "✦";
            color: #d99000;
            font-size: .42em;
            vertical-align: middle;
            margin: 0 .22em;
            text-shadow: 0 0 12px rgba(255,200,72,.6);
          }


          #tdb-rank-board .tdb-page-title p{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: min(520px, 70%);
            min-height: 38px;
            margin: 10px 0 0;
            padding: 0 34px;
            border-radius: 999px;
            color: #1d5a9f;
            font-size: 16px;
            font-weight: 1000;
            letter-spacing: .08em;
            background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,247,229,.86));
            border: 2px solid rgba(218, 159, 45, .58);
            box-shadow: 0 10px 22px rgba(17,83,152,.1), inset 0 0 0 1px rgba(255,255,255,.85);
          }


          #tdb-rank-board .tdb-tabs{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            max-width: 940px;
            margin: 0 auto 18px;
          }


          #tdb-rank-board .tdb-tab{
            min-height: 70px;
            border: 3px solid rgba(74, 151, 224, .74);
            border-bottom-color: rgba(19, 91, 174, .58);
            border-radius: 22px 22px 10px 10px;
            background:
              linear-gradient(180deg, rgba(255,255,255,.98), rgba(227,244,255,.94)),
              radial-gradient(circle at 50% 0%, rgba(255,229,160,.48), transparent 58%);
            color: #124b83;
            font-size: clamp(14px, 1.25vw, 19px);
            font-weight: 1000;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            box-shadow:
              0 14px 28px rgba(25, 101, 173, .18),
              inset 0 1px 0 rgba(255,255,255,1),
              inset 0 -5px 0 rgba(31,112,190,.08);
          }


          #tdb-rank-board .tdb-tab img{
            width: 36px;
            height: 36px;
            object-fit: contain;
            filter: drop-shadow(0 7px 8px rgba(23,82,148,.25));
          }


          #tdb-rank-board .tdb-tab.is-active{
            color: #fff;
            border-color: rgba(255, 205, 80, .95);
            background:
              radial-gradient(circle at 50% 0%, rgba(93,180,255,.92), transparent 42%),
              linear-gradient(180deg, #2795ff 0%, #145bd5 68%, #0b3fa7 100%);
            box-shadow:
              0 18px 36px rgba(21,89,210,.38),
              0 0 0 2px rgba(255,255,255,.62) inset,
              inset 0 -6px 0 rgba(3,42,128,.22),
              0 0 18px rgba(255,204,72,.3);
            transform: translateY(2px);
          }


          #tdb-rank-board .tdb-board-grid{
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 18px;
            align-items: start;
          }


          #tdb-rank-board .tdb-board-main{
            position: relative;
            overflow: hidden;
            border: 4px solid rgba(191, 112, 0, .98);
            border-radius: 30px;
            background:
              radial-gradient(circle at 50% 0%, rgba(255,226,144,.68), transparent 28%),
              radial-gradient(circle at 0% 14%, rgba(185,226,255,.82), transparent 40%),
              radial-gradient(circle at 100% 78%, rgba(255,190,215,.30), transparent 34%),
              linear-gradient(180deg, rgba(255,252,244,.98), rgba(231,246,255,.91));
            box-shadow:
              0 30px 56px rgba(5,58,116,.30),
              0 0 0 5px rgba(255,255,255,.96) inset,
              0 0 0 2px rgba(255,210,104,.86),
              0 0 44px rgba(255,188,70,.30);
            backdrop-filter: blur(8px);
          }


          #tdb-rank-board .tdb-board-main::before,
#tdb-rank-board .tdb-board-main::after{
            content: "";
            position: absolute;
            pointer-events: none;
          }


          #tdb-rank-board .tdb-board-main::before{
            inset: 13px;
            border: 2px solid rgba(232, 169, 38, .62);
            border-radius: 24px;
            background:
              linear-gradient(90deg, rgba(216,142,0,.42), rgba(216,142,0,0)) left 16px top 16px / 82px 2px no-repeat,
              linear-gradient(180deg, rgba(216,142,0,.42), rgba(216,142,0,0)) left 16px top 16px / 2px 82px no-repeat,
              linear-gradient(270deg, rgba(216,142,0,.42), rgba(216,142,0,0)) right 16px top 16px / 82px 2px no-repeat,
              linear-gradient(180deg, rgba(216,142,0,.42), rgba(216,142,0,0)) right 16px top 16px / 2px 82px no-repeat,
              linear-gradient(90deg, rgba(216,142,0,.42), rgba(216,142,0,0)) left 16px bottom 16px / 82px 2px no-repeat,
              linear-gradient(0deg, rgba(216,142,0,.42), rgba(216,142,0,0)) left 16px bottom 16px / 2px 82px no-repeat,
              linear-gradient(270deg, rgba(216,142,0,.42), rgba(216,142,0,0)) right 16px bottom 16px / 82px 2px no-repeat,
              linear-gradient(0deg, rgba(216,142,0,.42), rgba(216,142,0,0)) right 16px bottom 16px / 2px 82px no-repeat;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), inset 0 0 28px rgba(255,204,86,.10);
          }


          #tdb-rank-board .tdb-board-main::after{
            left: 28px;
            right: 28px;
            top: 13px;
            height: 54px;
            background:
              repeating-linear-gradient(90deg, rgba(15,76,145,.10) 0 1px, transparent 1px 20px),
              linear-gradient(90deg, transparent, rgba(226,166,42,.95), rgba(70,155,229,.58), rgba(226,166,42,.95), transparent);
            clip-path: polygon(0 46%, 42% 46%, 46% 0, 54% 0, 58% 46%, 100% 46%, 100% 54%, 58% 54%, 54% 100%, 46% 100%, 42% 54%, 0 54%);
            opacity: .58;
          }


          #tdb-rank-board .tdb-board-main{
            padding: 20px;
            min-width: 0;
          }


          #tdb-rank-board .tdb-board-panel{
            position: relative;
          }


          #tdb-rank-board .tdb-board-panel::before{
            content: "修 練 道 氣 心 技 体 玄 門";
            position: absolute;
            inset: 26px 24px auto;
            height: 26px;
            color: rgba(12, 73, 141, .105);
            font-family: Georgia, serif;
            font-size: 18px;
            font-weight: 900;
            letter-spacing: .9em;
            text-align: center;
            white-space: nowrap;
            pointer-events: none;
          }


          #tdb-rank-board .tdb-board-panel{ display: none; }


          #tdb-rank-board .tdb-board-panel.is-active{ display: block; }


          #tdb-rank-board .tdb-avatar-layer{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }


          #tdb-rank-board .tdb-realm-pill{
            display: flex;
            width: fit-content;
            max-width: 100%;
            justify-content: center;
            align-items: center;
            min-height: 25px;
            margin: 8px auto;
            padding: 0 12px;
            border-radius: 999px;
            color: #15518a;
            background: linear-gradient(180deg, rgba(235,248,255,.98), rgba(205,235,255,.94));
            border: 2px solid rgba(80, 155, 222, .58);
            font-size: 12px;
            font-weight: 900;
            line-height: 1.1;
            white-space: nowrap;
            box-shadow: 0 5px 10px rgba(28,105,172,.08), inset 0 1px 0 rgba(255,255,255,.94);
          }


          #tdb-rank-board .tdb-score{
            display: flex;
            width: fit-content;
            max-width: 100%;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin: 8px auto 0;
            color: #084d8d;
            font-weight: 1000;
            white-space: nowrap;
          }


          #tdb-rank-board .tdb-score img{
            width: 25px;
            height: 25px;
            object-fit: contain;
            filter: drop-shadow(0 5px 8px rgba(10,78,138,.22));
          }


          #tdb-rank-board .tdb-score small{
            color: #506c82;
            font-size: 11px;
            font-weight: 900;
          }


          #tdb-rank-board .tdb-score-power{
            gap: 8px;
          }


          #tdb-rank-board .tdb-score-power b{
            color: #0b57b0;
            font-size: 18px;
            text-shadow: 0 2px 0 rgba(255,255,255,.92);
          }


          #tdb-rank-board .tdb-score-power small{
            color: #6b4b22;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255,242,203,.82);
            border: 1px solid rgba(219,154,42,.32);
          }


          #tdb-rank-board .tdb-score-streak{ flex-wrap: wrap; max-width: 100%; }


          #tdb-rank-board .tdb-score-streak em{
            width: 100%;
            color: #9a5a18;
            font-size: 10px;
            font-style: normal;
            font-weight: 900;
            line-height: 1.1;
          }


          


          


          


        
          #tdb-rank-board .tdb-board-main{
            box-shadow:
              0 32px 64px rgba(5,58,116,.24),
              0 0 0 5px rgba(255,255,255,.96) inset,
              0 0 0 2px rgba(255,210,104,.86),
              0 0 54px rgba(255,188,70,.38),
              0 0 18px rgba(96,190,255,.16);
          }


          #tdb-rank-board .tdb-board-main::before{
            box-shadow:
              inset 0 0 0 1px rgba(255,255,255,.78),
              inset 0 0 32px rgba(255,204,86,.14),
              0 0 22px rgba(255,204,86,.10);
          }


          #tdb-rank-board .tdb-score-streak b{
            color:#ea580c;
            text-shadow:0 0 14px rgba(251,146,60,.24),0 0 24px rgba(249,115,22,.14);
          }


          #tdb-rank-board .tdb-score-streak em{
            color:#92400e;
            font-weight:1000;
          }


          


        
          #tdb-rank-board .tdb-name-gold{
            color:#a34f00;
            background:none;
            -webkit-text-fill-color:#a34f00;
            text-shadow:
              0 1px 0 rgba(255,255,255,.92),
              0 0 10px rgba(245,158,11,.24),
              0 2px 8px rgba(120,53,15,.12);
            filter:none;
          }


          #tdb-rank-board .tdb-name-blue{
            color:#1759b8;
            background:none;
            -webkit-text-fill-color:#1759b8;
            text-shadow:
              0 1px 0 rgba(255,255,255,.92),
              0 0 10px rgba(96,165,250,.24),
              0 2px 8px rgba(30,64,175,.10);
            filter:none;
          }


          #tdb-rank-board .tdb-name-orange{
            color:#b45309;
            background:none;
            -webkit-text-fill-color:#b45309;
            text-shadow:
              0 1px 0 rgba(255,255,255,.92),
              0 0 10px rgba(251,146,60,.24),
              0 2px 8px rgba(124,45,18,.10);
            filter:none;
          }


          #tdb-rank-board .tdb-name-normal{
            color:#0b4d8b;
            background:none;
            -webkit-text-fill-color:#0b4d8b;
            font-weight:1000;
            text-shadow:0 1px 0 rgba(255,255,255,.86);
          }


          #tdb-rank-board .tdb-realm-pill{
            font-weight:1000;
            border-width:2px;
            box-shadow:
              0 8px 16px rgba(15,23,42,.07),
              inset 0 1px 0 rgba(255,255,255,.94);
          }


          #tdb-rank-board .tdb-realm-n5{
            color:#15803d;
            border-color:rgba(34,197,94,.58);
            background:linear-gradient(180deg,#f0fdf4,#dcfce7);
          }


          #tdb-rank-board .tdb-realm-n4{
            color:#1d4ed8;
            border-color:rgba(14,165,233,.62);
            background:linear-gradient(180deg,#eff6ff,#dbeafe);
          }


          #tdb-rank-board .tdb-realm-n3{
            color:#b45309;
            border-color:rgba(245,158,11,.64);
            background:linear-gradient(180deg,#fffbeb,#fef3c7);
          }


          #tdb-rank-board .tdb-realm-n2{
            color:#7e22ce;
            border-color:rgba(168,85,247,.64);
            background:linear-gradient(180deg,#faf5ff,#ede9fe);
          }


          #tdb-rank-board .tdb-realm-n1{
            color:#b91c1c;
            border-color:rgba(239,68,68,.62);
            background:linear-gradient(180deg,#fff1f2,#ffe4e6);
          }


          #tdb-rank-board .tdb-realm-none{
            color:#475569;
            border-color:rgba(148,163,184,.50);
            background:linear-gradient(180deg,#f8fafc,#e2e8f0);
          }


          #tdb-rank-board .tdb-score{
            color:#0b4d8b;
            font-weight:900;
          }


          #tdb-rank-board .tdb-score b{
            color:#075985;
            -webkit-text-fill-color:#075985;
            font-weight:1000;
            text-shadow:
              0 1px 0 rgba(255,255,255,.90),
              0 0 10px rgba(14,165,233,.18);
          }


          #tdb-rank-board .tdb-score-streak b{
            color:#ea580c;
            -webkit-text-fill-color:#ea580c;
            text-shadow:
              0 1px 0 rgba(255,255,255,.86),
              0 0 10px rgba(249,115,22,.20);
          }


          #tdb-rank-board .tdb-score small,
#tdb-rank-board .tdb-score em{
            color:#475569;
            font-weight:900;
          }