/* Castle Trading — shared styles for XP widget, toasts, and reusable components */

/* Metric-matched local fonts keep fallback text visible and reduce swap shifts.
   Measured against the homepage headline at the mobile Lighthouse viewport. */
@font-face{
  font-family:'Castle Display Fallback';
  src:local('Times New Roman'),local('Liberation Serif');
  size-adjust:109.02%;ascent-override:99.25%;descent-override:23.02%;line-gap-override:0%;
}
@font-face{
  font-family:'Castle Display Fallback';font-weight:700 900;
  src:local('Times New Roman Bold'),local('Liberation Serif Bold');
  size-adjust:109.02%;ascent-override:99.25%;descent-override:23.02%;line-gap-override:0%;
}
@font-face{
  font-family:'Castle Body Fallback';
  src:local('Arial'),local('Liberation Sans');
  size-adjust:100.2%;ascent-override:99.8%;descent-override:30.94%;line-gap-override:0%;
}
@font-face{
  font-family:'Castle Body Fallback';font-weight:600 900;
  src:local('Arial Bold'),local('Liberation Sans Bold');
  size-adjust:100.2%;ascent-override:99.8%;descent-override:30.94%;line-gap-override:0%;
}

/* XP / rank widget */
.ct-xp-widget{
  display:inline-flex;align-items:center;gap:0.75rem;
  background:rgba(201,168,76,0.08);
  border:1px solid rgba(201,168,76,0.2);
  padding:0.45rem 0.9rem;border-radius:999px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:0.78rem;line-height:1;color:#F5E6A3;
  white-space:nowrap;
}
.ct-xp-rank{font-size:1.05rem;display:inline-flex;align-items:center;padding:0 2px}
.ct-xp-meta{display:flex;flex-direction:column;gap:0.4rem;min-width:96px;padding:2px 0}
.ct-xp-num{font-weight:700;color:#F5E6A3;font-size:0.72rem;letter-spacing:0.02em;line-height:1}
.ct-xp-bar{display:block;width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.ct-xp-bar > span{display:block;height:100%;background:linear-gradient(90deg,#C9A84C,#F5E6A3);border-radius:3px;transition:width 0.4s ease}
.ct-xp-streak{font-weight:700;color:#FFB74D;font-size:0.78rem;display:inline-flex;align-items:center;gap:3px;padding-left:4px;border-left:1px solid rgba(201,168,76,0.18)}

/* Hover tooltips for XP widget pieces (and any element with .ct-tip[data-tip]) */
.ct-tip{position:relative;cursor:help}
.ct-tip::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 10px);right:0;
  background:linear-gradient(135deg,#1A1A1A,#0A0A0A);
  border:1px solid rgba(201,168,76,0.4);
  color:#F5E6A3;font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:500;
  line-height:1.45;letter-spacing:0.01em;
  padding:0.55rem 0.75rem;border-radius:8px;
  white-space:normal;width:max-content;max-width:240px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity 0.15s ease,transform 0.15s ease;
  z-index:10000;
}
.ct-tip::before{
  content:'';position:absolute;top:calc(100% + 4px);right:14px;
  border:6px solid transparent;border-bottom-color:rgba(201,168,76,0.4);
  opacity:0;transition:opacity 0.15s ease;pointer-events:none;z-index:10001;
}
.ct-tip:hover::after,.ct-tip:focus-visible::after{opacity:1;transform:translateY(0)}
.ct-tip:hover::before,.ct-tip:focus-visible::before{opacity:1}

/* Toasts */
#ct-xp-toasts{position:fixed;top:88px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none}
.ct-toast{
  background:linear-gradient(135deg,#1A1A1A,#0D0D0D);
  border:1px solid rgba(201,168,76,0.35);
  color:#F5E6A3;font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:700;
  padding:0.7rem 1.1rem;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,0.6);
  transform:translateX(120%);opacity:0;transition:transform 0.35s cubic-bezier(.2,.9,.3,1.2),opacity 0.3s;
}
.ct-toast.show{transform:translateX(0);opacity:1}
.ct-toast-rank{border-color:#F5E6A3;background:linear-gradient(135deg,#3a2c00,#0D0D0D);color:#fff}

/* Game education panel (4-section) */
.edu-panel{
  background:linear-gradient(180deg,#0F0F0F,#0A0A0A);
  border:1px solid rgba(201,168,76,0.18);
  border-radius:14px;padding:1.1rem 1.2rem;margin:0.5rem 0 1rem;
  font-family:'DM Sans',sans-serif;color:#D8D8D8;display:none;
}
.edu-panel.show{display:block;animation:eduIn 0.3s ease}
@keyframes eduIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.edu-row{display:flex;gap:0.7rem;align-items:flex-start;padding:0.55rem 0;border-top:1px solid rgba(255,255,255,0.05)}
.edu-row:first-child{border-top:none;padding-top:0}
.edu-icon{font-size:1.1rem;line-height:1.3;flex-shrink:0;width:1.8rem;text-align:center}
.edu-body{flex:1;font-size:0.86rem;line-height:1.55}
.edu-label{display:block;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:#C9A84C;font-weight:800;margin-bottom:0.15rem}
.edu-text{color:#D8D8D8}
.edu-text strong{color:#F5E6A3;font-weight:700}

/* Mobile tightening */
@media (max-width:600px){
  .ct-xp-widget{font-size:0.7rem;padding:0.4rem 0.7rem;gap:0.55rem}
  .ct-xp-meta{min-width:74px;gap:0.35rem}
  .ct-xp-num{font-size:0.65rem}
  .ct-tip::after{max-width:200px;font-size:0.68rem}
  .edu-panel{padding:0.85rem 0.95rem}
  .edu-body{font-size:0.8rem}
  #ct-xp-toasts{top:72px;right:10px;left:10px}
  .ct-toast{transform:translateY(-120%)}
  .ct-toast.show{transform:translateY(0)}
}

/* Homepage below-the-fold components (scoped to avoid cross-page collisions). */

/* Defer layout/paint of long offscreen sections, not their content or links.
   The browser renders each section as it approaches the viewport. */
body.ct-home > section:not(#home), body.ct-home > footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
        /* ============================
           GOLD GLOW EFFECTS
        ============================ */
        :where(body.ct-home) .gold-glow {
            box-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
        }

        :where(body.ct-home) .gold-glow-hover:hover {
            box-shadow: 0 0 30px rgba(201, 168, 76, 0.3);
        }

        /* ============================
           CARD STYLES
        ============================ */
        :where(body.ct-home) .game-card, :where(body.ct-home) .course-card {
            background: #1A1A1A;
            border: 1px solid rgba(201, 168, 76, 0.1);
            border-radius: 12px;
            padding: 2rem;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        :where(body.ct-home) .game-card:hover, :where(body.ct-home) .course-card:hover {
            transform: translateY(-6px);
            border-color: rgba(201, 168, 76, 0.5);
            box-shadow: 0 12px 40px rgba(201, 168, 76, 0.15);
        }

        /* ============================
           PRICING CARD GLOW
        ============================ */
        :where(body.ct-home) .pricing-card {
            position: relative;
            overflow: hidden;
        }

        :where(body.ct-home) .pricing-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #C9A84C, #F5E6A3, #C9A84C, #F5E6A3);
            background-size: 400% 400%;
            z-index: -1;
            border-radius: 14px;
            animation: ctHomeBorderGlow 6s ease infinite;
        }

        @keyframes ctHomeBorderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* ============================
           SCROLL ANIMATIONS
        ============================ */
        :where(body.ct-home) .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        :where(body.ct-home) .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================
           FAQ ACCORDION
        ============================ */
        :where(body.ct-home) .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
        }

        :where(body.ct-home) .faq-answer.open {
            max-height: 300px;
        }

        /* ============================
           STAR RATING
        ============================ */
        :where(body.ct-home) .stars {
            color: #C9A84C;
        }

        /* ============================
           BADGE STYLES
        ============================ */
        :where(body.ct-home) .badge-beginner {
            background: rgba(76, 175, 80, 0.15);
            color: #66BB6A;
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        :where(body.ct-home) .badge-intermediate {
            background: rgba(255, 183, 77, 0.15);
            color: #FFB74D;
            border: 1px solid rgba(255, 183, 77, 0.3);
        }

        :where(body.ct-home) .badge-advanced {
            background: rgba(239, 83, 80, 0.15);
            color: #EF5350;
            border: 1px solid rgba(239, 83, 80, 0.3);
        }

        :where(body.ct-home) .badge-all {
            background: rgba(201, 168, 76, 0.15);
            color: #C9A84C;
            border: 1px solid rgba(201, 168, 76, 0.3);
        }

        /* ============================
           NUMBER COUNTER
        ============================ */
        :where(body.ct-home) .counter {
            display: inline-block;
        }