*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:rgba(150,150,150,.25) transparent}
    ::-webkit-scrollbar{width:5px;height:5px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:rgba(150,150,150,.25);border-radius:4px}
    ::-webkit-scrollbar-thumb:hover{background:rgba(150,150,150,.45)}
    :root{--bg-main:#ECF4FB;--bg-panel:#fff;--bg-chat:#1e3a5f;--text-main:#1e3a5f;--text-muted:#4a5f7f;--border:rgba(30,58,95,.12);--shadow:rgba(0,0,0,.06);--accent:#FEE161;--accent-text:#1e3a5f;--link:#4A90E2}
    [data-theme="dark"]{--bg-main:#0f172a;--bg-panel:#1e3a5f;--bg-chat:#0f172a;--text-main:#e0e8f4;--text-muted:#94a3b8;--border:rgba(148,163,184,.2);--shadow:rgba(0,0,0,.3);--accent:#FEE73E;--accent-text:#1e3a5f;--link:#60C0DE}
    html{overflow-x:hidden}
    html{scroll-behavior:smooth}
    ::selection{background:var(--accent);color:var(--accent-text)}
    body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg-main);color:var(--text-main);height:100vh;overflow:hidden;max-width:100vw;transition:background .3s,color .3s}
    h1,h2,h3,h4,h5,h6{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif}
    [hidden]{display:none!important}
    img{-webkit-user-drag:none}

    /* ===== SITE BAR (app chrome: link back to hub and site pages) ===== */
    .app-site-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:.45rem 1rem;min-height:40px;box-sizing:border-box;background:var(--bg-main);border-bottom:1px solid var(--border);max-width:100%;z-index:200;transition:background .2s,border-color .2s}
    .app-site-bar .site-bar-logo{display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--text-main);font-weight:700;font-size:.9rem}
    .app-site-bar .site-bar-logo:hover{color:var(--link)}
    .app-site-bar .site-bar-logo img{width:24px;height:24px;border-radius:50%;border:2px solid var(--accent)}
    .app-site-bar .site-bar-nav{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
    .app-site-bar .site-bar-nav a{color:var(--text-muted);text-decoration:none;font-size:.8rem}
    .app-site-bar .site-bar-nav a:hover{color:var(--link)}
    .app-site-bar .site-bar-nav a.active{color:var(--link)}
    [data-theme="dark"] .app-site-bar{background:var(--bg-panel);border-bottom-color:var(--border)}
    [data-theme="dark"] .app-site-bar .site-bar-logo{color:var(--text-main)}
    [data-theme="dark"] .app-site-bar .site-bar-logo:hover{color:var(--link)}
    [data-theme="dark"] .app-site-bar .site-bar-nav a{color:var(--text-muted)}
    [data-theme="dark"] .app-site-bar .site-bar-nav a:hover{color:var(--link)}
    [data-theme="dark"] .app-site-bar .site-bar-nav a.active{color:var(--link)}

    /* ===== APP SHELL: 3-column, all fixed to viewport height ===== */
    .app-shell{display:flex;height:calc(100vh - 36px - 40px);max-width:1400px;margin:0 auto}
    .panel-chat{width:280px;flex-shrink:0;background:var(--bg-chat);color:#e0dfe4;display:flex;flex-direction:column;border-right:1px solid var(--border);position:relative;z-index:2;transition:background .3s}
    .panel-main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:1rem 1.5rem 2rem;scroll-behavior:smooth;margin-left:-100px;margin-right:-100px;padding-left:calc(1.5rem + 100px);padding-right:calc(1.5rem + 100px);position:relative;z-index:1}
    .panel-rank{width:280px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;position:relative;z-index:2;transition:background .3s}

    @media(max-width:960px){
      body{overflow:hidden;height:100vh}
      #carouselWrapper{overflow-x:hidden;max-width:100%;min-width:0}
      .app-shell{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;height:calc(100vh - 36px - 28px - 40px);width:100%;min-width:0}
      .app-shell::-webkit-scrollbar{display:none}
      .panel-chat{flex:0 0 100%;min-width:0;width:100%;max-width:100%;max-height:none;height:100%;border-right:none;border-bottom:none;border-left:1px solid #2d2a3e;scroll-snap-align:center;scroll-snap-stop:always;z-index:auto}
      .panel-main{flex:0 0 100%;min-width:0;width:100%;max-width:100%;overflow-y:auto;overflow-x:hidden;margin-left:0;margin-right:0;padding-left:1rem;padding-right:1rem;scroll-snap-align:center;scroll-snap-stop:always;border-left:1px solid var(--border);border-right:1px solid var(--border)}
      .panel-rank{flex:0 0 100%;min-width:0;width:100%;max-width:100%;height:100%;border-left:none;border-top:none;border-right:1px solid #e0e0e0;scroll-snap-align:center;scroll-snap-stop:always;z-index:auto}
      .card-flip-wrapper{margin:0;min-height:420px;padding:0 .25rem;max-width:100%;min-width:0}
      .card-flip-container{min-width:0;max-width:100%}
      .card-flip-card{max-width:100%;width:100%;padding:0 .25rem;box-sizing:border-box;min-width:0}
      .card-nav{padding:.5rem .25rem;gap:.6rem}
      .card-arrow{width:28px;height:28px;font-size:1rem}
      /* Roll card stats – mobile responsive (base .roll-card already uses min(480px,100%)) */
      .roll-card{border-radius:12px;min-width:0;overflow-x:hidden}
      .rc-header{padding:.6rem .65rem .5rem;flex-wrap:wrap;gap:.35rem}
      .rc-name{font-size:1rem;min-width:0;word-break:break-word}
      .rc-iter{font-size:.65rem;padding:.15rem .4rem}
      .rc-nature{padding:.5rem .75rem;flex-wrap:wrap;gap:.5rem}
      .rc-nature-name{font-size:1rem}
      .rc-nature-stats{flex-direction:row;flex-wrap:wrap;gap:.25rem}
      .rc-nature-stat{font-size:.65rem;padding:.12rem .4rem}
      .rc-section{padding:.5rem .65rem}
      .rc-section-title{font-size:.6rem}
      .ingr-list{gap:.35rem}
      .ingr-item{flex:1 1 85px;min-width:0}
      .ingr-emoji{font-size:1.5rem}
      .ingr-name{font-size:.6rem;word-break:break-word}
      .ss-row{padding:.25rem .35rem;gap:.3rem}
      .ss-level{font-size:.62rem;min-width:2rem}
      .ss-name{font-size:.72rem;min-width:0;word-break:break-word}
      .rc-rating{padding:.5rem .75rem;gap:.4rem}
      .rc-rating-label{font-size:.65rem}
      .rc-rating .tier-badge{font-size:1.1rem;padding:.3rem .7rem}
      .rc-skill{font-size:.78rem}
      /* Controls: stacked Choose, step hint, full-width Roll, secondary row */
      .controls-row-primary{flex:0 0 auto;width:100%}
      .btn-roll-primary{max-width:none}
      .controls-secondary-row{justify-content:center}
      .rolls-left-uploads{width:100%;text-align:center;margin-left:0;margin-top:.15rem}
      .selected-label{white-space:normal;overflow:visible;text-overflow:clip}
    }
    @media(max-width:400px){
      .card-flip-wrapper{min-height:380px}
      .roll-card{border-radius:10px}
      .rc-header{padding:.5rem .5rem .4rem}
      .rc-name{font-size:.92rem}
      .ingr-item{flex:1 1 45%}
      .ingr-emoji{font-size:1.35rem}
      .ingr-name{font-size:.58rem}
      .rc-nature{padding:.4rem .5rem}
      .rc-nature-name{font-size:.9rem}
      .rc-section{padding:.4rem .5rem}
      .rc-rating{padding:.4rem .5rem}
      .rc-rating .tier-badge{font-size:1rem;padding:.25rem .6rem}
      .rc-nature-stats{flex-direction:column}
      .ss-row{padding:.2rem .3rem}
      .ss-name{font-size:.68rem}
    }

    /* ===== CHAT PANEL ===== */
    .chat-header{padding:.65rem .85rem;border-bottom:1px solid #2d2a3e;display:flex;align-items:center;gap:.55rem;flex-shrink:0}
    .chat-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);background:url('../newrolly.png') no-repeat;background-size:280%;background-position:50% 10%;flex-shrink:0}
    .chat-avatar-ph{display:none}
    .chat-header-name{font-weight:700;font-size:.82rem;color:#c4b5fd}
    .chat-header-status{font-size:.62rem;color:#8b85a0}
    .chat-messages{flex:1;overflow-y:auto;padding:.65rem;display:flex;flex-direction:column;gap:.45rem;min-height:0;scrollbar-color:rgba(255,255,255,.12) transparent}
    .chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
    .chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
    .chat-msg{display:flex;gap:.4rem;align-items:flex-start;animation:chatIn .3s ease}
    .chat-msg-av{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--accent);flex-shrink:0;margin-top:2px;background:url('../newrolly.png') no-repeat;background-size:280%;background-position:50% 10%}
    .chat-msg-av-ph{display:none}
    .chat-bubble{background:#2d2a3e;border-radius:2px 10px 10px 10px;padding:.4rem .6rem;font-size:.75rem;line-height:1.45;max-width:210px;color:#e0dfe4;word-break:break-word}
    .chat-time{font-size:.5rem;color:#5a5670;margin-top:.15rem;display:block}
    .chat-typing{display:inline-flex;gap:3px;padding:.4rem .6rem}
    .chat-typing span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:typDot 1.2s infinite}
    .chat-typing span:nth-child(2){animation-delay:.2s}
    .chat-typing span:nth-child(3){animation-delay:.4s}
    @keyframes typDot{0%,60%,100%{opacity:.3;transform:scale(1)}30%{opacity:1;transform:scale(1.2)}}
    @keyframes chatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
    .chat-input-fake{padding:.45rem .65rem;border-top:1px solid #2d2a3e;flex-shrink:0}
    .chat-input-bar{background:#2d2a3e;border-radius:14px;padding:.35rem .6rem;font-size:.68rem;color:#5a5670}

    /* ===== TITLE BAR ===== */
    .title-bar{display:flex;align-items:center;gap:.85rem;margin-bottom:.85rem;justify-content:space-between;flex-wrap:wrap}
    .title-left{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0}
    .title-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
    .title-nav-compact{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
    .title-nav-desktop{display:none;align-items:center;gap:.5rem;flex-wrap:wrap}
    @media(min-width:1200px){
      .title-nav-compact{display:none}
      .title-nav-desktop{display:flex}
    }
    .title-more-details{position:relative}
    .title-more-summary{list-style:none;cursor:pointer;user-select:none}
    .title-more-summary::-webkit-details-marker{display:none}
    .title-more-summary::after{content:' \25BE';font-size:.65rem;opacity:.7}
    .title-more-details[open] .title-more-summary::after{content:' \25B4'}
    .title-more-panel{position:absolute;right:0;top:calc(100% + 4px);min-width:200px;padding:.4rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px var(--shadow);z-index:150;display:flex;flex-direction:column;gap:.15rem}
    .title-more-link{display:block;padding:.45rem .65rem;border-radius:8px;font-size:.78rem;color:var(--text-main);text-decoration:none;font-weight:500}
    .title-more-link:hover{background:var(--bg-main);color:var(--link)}
    .title-right .title-nav-link{display:none}
    @media(min-width:1200px){.title-right .title-nav-link{display:inline-flex}}
    .title-avatar{width:52px;height:52px;border-radius:50%;border:2.5px solid var(--accent);flex-shrink:0;box-shadow:0 2px 8px rgba(254,225,97,.25);background:url('../newrolly-wave.png') no-repeat;background-size:180%;background-position:50% 15%}
    .title-bar h1{font-size:1.25rem;font-weight:800;color:var(--text-main);line-height:1.2}
    .title-bar .subtitle{color:var(--text-muted);font-size:.8rem;line-height:1.3;margin-top:.15rem}
    .dark-mode-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;cursor:pointer;color:var(--text-main);font-size:.75rem;transition:.2s}
    .dark-mode-toggle:hover{background:var(--bg-panel);border-color:var(--accent)}
    .account-status{display:flex;align-items:center;gap:.5rem;font-size:.75rem}
    .account-status.logged-in{color:var(--text-main)}
    .account-status.logged-out{color:var(--text-muted)}
    .account-email{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .btn-account{background:none;border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;cursor:pointer;color:var(--text-main);font-size:.75rem;transition:.2s}
    .btn-account:hover{background:var(--bg-panel);border-color:var(--accent)}
    .account-status .btn-account-link{color:var(--link);text-decoration:none;font-size:.75rem;margin-right:.35rem}
    .account-status .btn-account-link:hover{text-decoration:underline}
    .account-uid-wrap{margin-left:.25rem}
    .account-uid-wrap .btn-copy-uid{font-size:.7rem;padding:.25rem .4rem}
    .btn-save{background:#10b981;color:#fff;font-size:.7rem;padding:.3rem .6rem;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:.3rem}
    .btn-save:hover{background:#059669}
    .btn-save:disabled{opacity:.4;cursor:not-allowed}
    .btn-save.saved{background:#6b7280;cursor:default}
    .btn-save.saved:hover{background:#6b7280}

    /* ===== CONTROLS BAR ===== */
    .controls-bar{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;padding:.65rem .85rem;background:var(--bg-panel);border-radius:12px;box-shadow:0 1px 4px var(--shadow);margin-bottom:.75rem;z-index:20;transition:background .3s,box-shadow .3s}
    @media(min-width:961px){.controls-bar{position:sticky;top:0}}
    @media(max-width:960px){
      .controls-bar{position:sticky;top:0;z-index:30;box-shadow:0 2px 12px var(--shadow)}
    }
    .controls-row-primary{display:flex;align-items:center;gap:.45rem;width:100%;min-width:0}
    .controls-step-hint{margin:0;font-size:.72rem;color:var(--text-muted);line-height:1.35;min-height:1.1em}
    .controls-primary-cta{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:100%}
    .btn-roll-primary{width:100%;max-width:22rem;margin:0 auto;padding:.65rem 1.25rem;font-size:1rem;font-weight:700;border-radius:12px}
    .rolls-left-primary{text-align:center}
    .controls-secondary-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .65rem;width:100%;padding-top:.15rem;border-top:1px solid var(--border)}
    .btn-action-secondary{font-size:.75rem;padding:.35rem .65rem;font-weight:600;border-radius:9px}
    .rolls-left-uploads{font-size:.72rem;margin-left:auto}
    @media(min-width:961px){
      .controls-secondary-row{justify-content:flex-start;border-top:none;padding-top:0}
      .rolls-left-uploads{margin-left:0}
    }
    .btn{padding:.4rem .75rem;border-radius:10px;border:none;cursor:pointer;font-size:.8rem;font-weight:600;transition:.15s;white-space:nowrap}
    .btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}
    .btn-primary.roll-highlight,.roll-fab.roll-highlight{animation:rollPulse 1.5s ease-in-out infinite;box-shadow:0 0 0 0 rgba(37,99,235,.5)}
    @keyframes rollPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
    .btn-secondary{background:#e5e7eb;color:#333}.btn-secondary:hover{background:#d1d5db}
    .btn:disabled{opacity:.4;cursor:not-allowed}
    .btn-choose{background:var(--accent);color:var(--accent-text);display:flex;align-items:center;gap:.3rem}
    .btn-choose:hover{filter:brightness(0.95)}
    .btn-choose svg{width:14px;height:14px}
    .btn-choose.btn-choose-highlight{padding:.55rem 1rem;font-size:1rem;transition:padding .25s,font-size .25s}
    .btn-choose.btn-choose-highlight svg{width:16px;height:16px}
    .btn-screenshot{background:#f0f7ff;color:#2563eb;border:1px solid #2563eb}
    .btn-screenshot:hover:not(:disabled){background:#dbeafe}
    .selected-label{font-size:.8rem;color:var(--text-main);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .rolls-left{font-size:.75rem;color:var(--text-muted)}
    /* Gold-lock row + progressive disclosure */
    .goldlock-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.65rem;padding:.4rem .85rem;background:var(--bg-panel);border-radius:10px;box-shadow:0 1px 3px var(--shadow);margin-bottom:.6rem;font-size:.72rem;flex-wrap:wrap;transition:background .3s}
    .goldlock-details{flex:1;min-width:min(100%,180px)}
    .goldlock-summary{list-style:none;cursor:pointer;user-select:none;padding:.2rem 0;color:var(--text-main)}
    .goldlock-summary::-webkit-details-marker{display:none}
    .goldlock-summary .gl-label{font-weight:600;color:#92400e}
    .goldlock-summary .gl-optional{color:var(--text-muted);font-weight:500}
    .goldlock-checkboxes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.35rem 0 .15rem}
    .goldlock-checkboxes label{display:flex;align-items:center;gap:.3rem;cursor:pointer;color:var(--text-main)}
    .goldlock-checkboxes label.gl-locked{opacity:.4;cursor:not-allowed;pointer-events:none}
    .goldlock-checkboxes input[type=checkbox]{accent-color:#f59e0b;width:14px;height:14px}
    .goldlock-checkboxes .gl-info{color:#aaa;font-size:.65rem;flex:1 1 100%;margin-top:.15rem}
    .goldlock-actions{display:flex;align-items:center;gap:.45rem;flex-shrink:0;flex-wrap:wrap}
    .milestone-banner{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;margin-bottom:.6rem;background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1px solid #93c5fd;border-radius:10px;font-size:.78rem;color:#1e40af;flex-wrap:wrap}
    .milestone-banner.hidden{display:none}
    .milestone-banner .banner-nr-icon{width:26px;height:26px;border-width:1.5px}
    .milestone-banner-text{flex:1;min-width:0}
    .milestone-banner-dismiss{flex-shrink:0;background:none;border:none;padding:.25rem .4rem;cursor:pointer;color:#1e40af;font-size:.7rem;font-weight:600;border-radius:6px;transition:.15s}
    .milestone-banner-dismiss:hover{background:rgba(30,64,175,.12)}
    [data-theme="dark"] .milestone-banner{background:linear-gradient(135deg,#1e3a5e,#0f172a);border-color:#3b82f6;color:#93c5fd}
    [data-theme="dark"] .milestone-banner-dismiss{color:#93c5fd}
    [data-theme="dark"] .milestone-banner-dismiss:hover{background:rgba(59,130,246,.2)}
    .roll-fab{display:none;position:fixed;bottom:.75rem;right:1rem;width:56px;height:56px;border-radius:50%;border:none;background:#2563eb;color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 14px rgba(37,99,235,.45);z-index:90;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s,opacity .2s}
    .roll-fab:hover{transform:scale(1.05);box-shadow:0 6px 18px rgba(37,99,235,.5)}
    .roll-fab:disabled{opacity:.4;cursor:not-allowed;transform:none}
    .roll-fab:disabled:hover{transform:none}
    /* Mobile: single primary affordance — sticky controls bar; hide FAB (Roll duplicated) */
    @media(max-width:960px){
      .roll-fab,.roll-fab.visible{display:none!important}
    }
    @media(min-width:961px){.roll-fab{display:none!important}}
    .banner-nr-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--accent);background:url('../newrolly.png') no-repeat;background-size:280%;background-position:50% 10%}
    .newrolly-roll-banner{display:none;position:fixed;left:1rem;right:1rem;bottom:5rem;max-width:min(400px,calc(100vw - 2rem));margin:0 auto;padding:.65rem .85rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px var(--shadow);z-index:85;align-items:flex-start;gap:.5rem;opacity:0;transition:opacity .35s ease;pointer-events:none}
    .newrolly-roll-banner.visible{opacity:1;pointer-events:auto}
    .newrolly-roll-banner.fade-out{opacity:0;pointer-events:none}
    .newrolly-roll-banner-msg{flex:1;min-width:0;font-size:.8rem;line-height:1.4;color:var(--text-main)}
    .newrolly-roll-banner-dismiss{flex-shrink:0;background:none;border:none;padding:.2rem;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;border-radius:6px}
    .newrolly-roll-banner-dismiss:hover{background:var(--bg-main);color:var(--text-main)}
    @media(max-width:960px){.newrolly-roll-banner{display:flex;bottom:calc(4.5rem + env(safe-area-inset-bottom));z-index:100}}
    @media(min-width:961px){.newrolly-roll-banner{display:none!important}}
    /* Mobile landing: NewRolly chat notification — swipe left = chat, right = rankings */
    .newrolly-mobile-swipe-hint{display:none;position:fixed;left:1rem;right:1rem;top:calc(40px + 1rem);max-width:min(400px,calc(100vw - 2rem));margin:0 auto;padding:.65rem .85rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px var(--shadow);z-index:90;align-items:flex-start;gap:.5rem;opacity:0;transition:opacity .35s ease;pointer-events:none}
    .newrolly-mobile-swipe-hint.visible{opacity:1;pointer-events:auto}
    .newrolly-mobile-swipe-hint .newrolly-mobile-swipe-hint-msg{flex:1;min-width:0;font-size:.8rem;line-height:1.4;color:var(--text-main)}
    .newrolly-mobile-swipe-hint .newrolly-mobile-swipe-hint-dismiss{flex-shrink:0;background:none;border:none;padding:.2rem;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;border-radius:6px}
    .newrolly-mobile-swipe-hint .newrolly-mobile-swipe-hint-dismiss:hover{background:var(--bg-main);color:var(--text-main)}
    @media(max-width:960px){.newrolly-mobile-swipe-hint{display:flex}}
    @media(min-width:961px){.newrolly-mobile-swipe-hint{display:none!important}}
    .btn-ask-nr{background:var(--accent);color:var(--accent-text);font-size:.68rem;padding:.25rem .55rem;border-radius:8px;border:none;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:.3rem;white-space:nowrap;transition:.15s}
    .btn-ask-nr:hover{filter:brightness(0.95)}
    .btn-ask-nr:disabled{opacity:.4;cursor:not-allowed}
    .btn-ask-nr svg{width:13px;height:13px;fill:currentColor}
    .btn-clear{background:none;border:1px solid #e5e7eb;color:#999;font-size:.62rem;padding:.2rem .45rem;border-radius:6px;cursor:pointer;font-weight:600;transition:.15s;white-space:nowrap}
    .btn-clear:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2}
    /* Badge icons */
    .badge-icon{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid;font-size:0;flex-shrink:0;margin-left:.15rem}
    .badge-bronze{background:#cd7f32;border-color:#a0622a}
    .badge-silver{background:#c0c0c0;border-color:#999}
    .badge-gold{background:#ffd700;border-color:#d4a800}
    .badge-none{background:#e5e5e5;border-color:#ccc}
    .ad-slot-primary{width:100%;max-width:min(480px,100%);margin:0 auto .75rem;box-sizing:border-box}
    [data-theme="dark"] .title-more-panel{background:var(--bg-panel);border-color:var(--border);box-shadow:0 8px 28px rgba(0,0,0,.4)}
    [data-theme="dark"] .goldlock-summary .gl-label{color:#fcd34d}
    .ad-slot-display{min-height:250px;background:#e5e7eb;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:#888;border:1px dashed #ccc;box-sizing:border-box}
    .ad-slot:not(.ad-ready),.ad-slot-display:not(.ad-ready),.desktop-ads .ad-slot:not(.ad-ready){display:none!important}
    #rankBannerVertical:not(.ad-ready),#bannerAd:not(.ad-ready){display:none!important}

    .msg{margin-bottom:.6rem;font-size:.82rem}
    .msg.error{color:#b91c1c;background:#fef2f2;padding:.5rem .75rem;border-radius:8px}
    .msg.info{color:#555;background:#f8f8f8;padding:.5rem .75rem;border-radius:8px}

    /* ===== ROLL CARD: The main event (min() = responsive at all viewport sizes) ===== */
    .roll-card{position:relative;width:100%;max-width:min(480px,100%);margin:0 auto;background:var(--bg-panel);border-radius:16px;overflow:hidden;box-shadow:0 4px 20px var(--shadow);border:1px solid var(--border);transition:background .3s;box-sizing:border-box}
    .roll-card.rc-shiny{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffd700,#ff6ec7,#7df9ff,#ffd700) border-box;box-shadow:0 4px 24px rgba(255,215,0,.25),0 0 12px rgba(255,110,199,.15)}
    .rc-header{padding:.85rem 1rem .6rem;background:linear-gradient(135deg,#1e1b2e 0%,#312e45 100%);color:#fff;display:flex;justify-content:space-between;align-items:center}
    .rc-shiny .rc-header{background:linear-gradient(135deg,#2d1f4e 0%,#4a1942 50%,#1f3a5e 100%)}
    .rc-shiny-badge{background:linear-gradient(135deg,#ffd700,#ff6ec7);color:#fff;font-size:.58rem;padding:.15rem .4rem;border-radius:4px;font-weight:800;margin-left:.4rem;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.3)}
    @keyframes shinyShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
    .rank-item.is-shiny{border-image:linear-gradient(90deg,#ffd700,#ff6ec7,#7df9ff,#ffd700) 1;border-width:1.5px;border-style:solid;background:linear-gradient(90deg,rgba(255,215,0,.06),rgba(255,110,199,.06),rgba(125,249,255,.06));background-size:300% 100%;animation:shinyShimmer 3s linear infinite}
    .rc-name{font-size:1.1rem;font-weight:800}
    .rc-iter{font-size:.72rem;background:rgba(255,255,255,.15);padding:.2rem .55rem;border-radius:8px;font-weight:600}
    .rc-upload-badge{background:#f59e0b;color:#fff;font-size:.65rem;padding:.15rem .4rem;border-radius:4px;font-weight:700;margin-left:.4rem}

    .rc-nature{padding:.7rem 1rem;background:linear-gradient(135deg,#f8f7fc,#ede9fe);display:flex;align-items:center;gap:.75rem;transition:opacity .2s ease}
    .rc-nature-name{font-weight:800;font-size:1.15rem;color:#1e1b2e;flex-shrink:0}
    .rc-nature-stats{display:flex;flex-direction:column;gap:.2rem}
    .rc-nature-stat{font-size:.72rem;padding:.15rem .5rem;border-radius:6px;font-weight:600;display:flex;align-items:center;gap:.3rem}
    .rc-nature-up{background:#dcfce7;color:#166534}
    .rc-nature-down{background:#fee2e2;color:#991b1b}
    .rc-nature-neutral{font-size:.82rem;color:#888;font-style:italic}
    .rc-nature-spinning{opacity:.6}

    .rc-section{padding:.6rem 1rem;border-bottom:1px solid #f0f0f0}
    .rc-section:last-child{border-bottom:none}
    .rc-section-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#999;margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
    .rc-spread-tag{background:#e5e7eb;color:#555;padding:.1rem .35rem;border-radius:4px;font-size:.62rem;text-transform:none;letter-spacing:0;font-weight:600}

    /* Subskills */
    .ss-list{display:flex;flex-direction:column;gap:.3rem}
    .ss-row{display:flex;align-items:center;gap:.45rem;padding:.3rem .45rem;border-radius:8px;transition:.2s}
    .ss-level{font-size:.68rem;font-weight:700;color:#888;min-width:2.2rem;text-align:right;flex-shrink:0}
    .ss-name{font-size:.8rem;font-weight:600;flex:1;padding:.15rem .4rem;border-radius:6px;transition:.3s;text-align:center}
    .ss-gold{background:linear-gradient(90deg,#fef3c7,#fde68a);color:#92400e;border:1px solid #fcd34d}
    .ss-blue{background:linear-gradient(90deg,#dbeafe,#bfdbfe);color:#1e40af;border:1px solid #93c5fd}
    .ss-white{background:#f5f5f5;color:#555;border:1px solid #e5e5e5}
    .ss-hidden{background:#e5e7eb;color:#9ca3af;text-align:center;font-style:italic;border:1px solid #d1d5db}

    /* Spinning animation for subskill reveal */
    @keyframes ssFlash{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
    .ss-spinning .ss-name{animation:ssFlash .12s infinite;background:#e5e7eb;color:#888;border-color:#d1d5db}

    /* Lock icon for unrevealed */
    .ss-lock{font-size:.7rem;color:#ccc;margin-left:auto}

    /* Ingredients (row layout with large emoji) */
    .ingr-list{display:flex;gap:.5rem;flex-wrap:wrap}
    .ingr-item{flex:1;min-width:0;background:#f8f8f8;border-radius:12px;padding:.5rem .4rem .4rem;border:1px solid #e5e5e5;text-align:center;transition:.2s}
    .ingr-emoji{display:block;font-size:1.8rem;line-height:1;margin-bottom:.2rem}
    .ingr-level{display:block;font-size:.55rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem}
    .ingr-name{display:block;font-size:.68rem;font-weight:600;color:#444;line-height:1.2}
    .ingr-spinning .ingr-emoji{animation:ssFlash .12s infinite}
    .ingr-spinning .ingr-name{color:#bbb}

    /* Main Skill */
    .rc-skill{font-size:.85rem;font-weight:600;color:var(--link)}

    /* Rating */
    .rc-rating{padding:.85rem 1rem;background:linear-gradient(135deg,#f8f7fc,#f0eef9);display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
    .rc-rating-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#999}
    .rc-rating .tier-badge{font-size:1.25rem;padding:.35rem .85rem;border-radius:10px}
    .rc-rating-pts{font-size:1rem;font-weight:800;color:#1e1b2e}
    .rc-save-icon{position:absolute;bottom:.5rem;right:.5rem;background:none;border:none;font-size:2rem;opacity:.7;cursor:pointer;padding:.3rem;line-height:1;filter:none;transition:opacity .2s}
    .rc-save-icon:hover,.rc-save-icon:focus{opacity:1}
    .rc-save-tooltip{display:none;position:absolute;bottom:100%;right:0;margin-bottom:.4rem;background:#1e1b2e;color:#fff;font-size:.72rem;padding:.4rem .65rem;border-radius:8px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;z-index:10}
    .rc-save-icon:hover .rc-save-tooltip,.rc-save-icon:focus .rc-save-tooltip,.rc-save-icon.show-tip .rc-save-tooltip{display:block}
    .tier-badge{display:inline-block;padding:.2rem .55rem;border-radius:8px;font-size:.75rem;font-weight:700;color:#fff}
    .tier-Gamebreaking{background:linear-gradient(135deg,#ff006e 0%,#8338ec 50%,#3a86ff 100%);animation:tierPulse 2s ease-in-out infinite}
    .tier-Perfect{background:linear-gradient(135deg,#ffd700 0%,#ff6b35 50%,#f7931e 100%);animation:tierShine 2.5s ease-in-out infinite}
    .tier-Incredible{background:linear-gradient(135deg,#a855f7 0%,#ec4899 50%,#f43f5e 100%)}
    .tier-Amazing{background:#f59e0b}.tier-Great{background:#10b981}.tier-Good{background:#3b82f6}.tier-Okay{background:#6b7280}.tier-Bad{background:#ef4444}.tier-\?\?\?{background:#555;font-style:italic}
    @keyframes tierPulse{0%,100%{box-shadow:0 0 8px rgba(131,56,236,.5)}50%{box-shadow:0 0 16px rgba(131,56,236,.8)}}
    @keyframes tierShine{0%,100%{box-shadow:0 0 6px rgba(255,215,0,.4)}50%{box-shadow:0 0 14px rgba(255,215,0,.7)}}
    .rc-darkrai .rc-header{background:linear-gradient(135deg,#1a0a2e 0%,#2d1144 50%,#0d0d2b 100%)}
    .rank-item.is-darkrai{border-left:3px solid var(--accent);opacity:.7;font-style:italic}

    /* ===== CARD FLIP CONTAINER (min() = responsive at all viewport sizes) ===== */
    .card-flip-wrapper{position:relative;min-height:600px;overflow:hidden}
    @media(min-width:961px){.card-flip-wrapper{max-width:none;margin:0 -60px}}
    .card-flip-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;min-width:0}
    .card-flip-card{position:relative;width:100%;max-width:min(480px,100%);margin:0 auto;transition:transform .4s cubic-bezier(.4,.0,.2,1),opacity .3s ease;box-sizing:border-box}
    .card-flip-card.slide-out-left{transform:translateX(-100%);opacity:0}
    .card-flip-card.slide-out-right{transform:translateX(100%);opacity:0}
    .card-flip-card.slide-in-left{transform:translateX(0);opacity:1}
    .card-flip-card.slide-in-right{transform:translateX(0);opacity:1}
    .card-nav{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.35rem 0}
    .card-pos{font-size:.7rem;color:var(--text-muted);font-weight:600;min-width:5rem;text-align:center}
    .card-arrow{background:var(--bg-panel);border:2px solid var(--border);border-radius:50%;width:30px;height:30px;font-size:1.1rem;color:var(--text-main);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;box-shadow:0 1px 3px var(--shadow);line-height:1}
    .card-arrow:hover{border-color:#2563eb;color:#2563eb;background:var(--bg-main)}
    .card-arrow:disabled{opacity:.3;cursor:not-allowed}

    /* User chat messages */
    .chat-msg-user{flex-direction:row-reverse}
    .chat-msg-user .chat-bubble{background:var(--accent);color:var(--accent-text);border-radius:10px 2px 10px 10px}
    .chat-msg-user .chat-time{text-align:right}
    .chat-input-row{padding:.45rem .65rem;border-top:1px solid #2d2a3e;flex-shrink:0;display:flex;gap:.35rem}
    .chat-real-input{flex:1;background:#2d2a3e;border:1px solid #3d3a5e;border-radius:14px;padding:.35rem .6rem;font-size:.72rem;color:#e0dfe4;outline:none}
    .chat-real-input:focus{border-color:var(--accent)}
    .chat-real-input::placeholder{color:#5a5670}
    .chat-send-btn{background:var(--accent);border:none;border-radius:50%;width:26px;height:26px;color:var(--accent-text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.7rem;transition:.15s}
    .chat-send-btn:hover{filter:brightness(0.95)}

    /* ===== UPLOAD REVIEW ===== */
    .review-section{margin-top:1rem;max-width:min(480px,100%);margin-left:auto;margin-right:auto;box-sizing:border-box}
    .review-section h3{font-size:1rem;margin:0 0 .5rem}
    .upload-preview-wrap{margin-bottom:.75rem;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-main)}
    .upload-preview-img{display:block;max-width:100%;max-height:220px;width:auto;height:auto;object-fit:contain}
    /* Screenshot curtain (slides in from right; user can still use chat) */
    .screenshot-curtain{position:fixed;top:0;right:0;bottom:0;width:min(340px,92vw);max-width:340px;background:var(--bg-panel);border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.12);z-index:500;display:flex;flex-direction:column;transition:transform .25s ease,background .3s,border-color .3s}
    .screenshot-curtain.closed{transform:translateX(100%)}
    .screenshot-curtain .curtain-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;border-bottom:1px solid var(--border);flex-shrink:0}
    .screenshot-curtain .curtain-title{font-size:.8rem;font-weight:700;color:var(--text-main)}
    .screenshot-curtain .curtain-close{background:none;border:none;padding:.25rem;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;border-radius:6px}
    .screenshot-curtain .curtain-close:hover{background:var(--bg-main);color:var(--text-main)}
    .screenshot-curtain .curtain-body{display:flex;flex:1;min-height:0;flex-direction:column}
    .screenshot-curtain .curtain-options{flex:0 0 auto;overflow-y:auto;padding:.6rem .75rem;border-bottom:1px solid var(--border);background:var(--bg-panel)}
    .screenshot-curtain .curtain-image-wrap{flex:1;min-height:0;padding:.6rem;background:var(--bg-main);display:flex;align-items:flex-start;justify-content:center;overflow:auto}
    .screenshot-curtain .curtain-image-wrap img{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;border-radius:8px;border:1px solid var(--border)}
    @media(min-width:961px){
      .screenshot-curtain{width:720px;max-width:720px}
      .screenshot-curtain .curtain-body{flex-direction:row}
      .screenshot-curtain .curtain-options{flex:0 0 200px;border-bottom:none;border-right:1px solid var(--border)}
      .screenshot-curtain .curtain-image-wrap{flex:1;min-height:0;padding:.75rem;align-items:center;justify-content:center}
      .screenshot-curtain .curtain-image-wrap img{max-height:min(78vh,900px);width:auto;max-width:100%}
    }
    .screenshot-curtain .curtain-options-title{font-size:.7rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem}
    .screenshot-curtain .curtain-pills{display:flex;flex-wrap:wrap;gap:.35rem}
    .screenshot-curtain .curtain-pill{padding:.4rem .65rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-main);font-size:.78rem;font-weight:600;cursor:pointer;transition:.15s;color:var(--text-main)}
    .screenshot-curtain .curtain-pill:hover:not(:disabled){border-color:var(--accent);background:var(--bg-panel);color:var(--link)}
    .screenshot-curtain .curtain-pill:disabled{opacity:.5;cursor:not-allowed}
    .screenshot-curtain .curtain-friendship-row{display:flex;gap:.4rem;margin-top:.5rem;align-items:center}
    .screenshot-curtain .curtain-friendship-row input{width:4rem;padding:.35rem .5rem;border-radius:8px;border:1px solid var(--border);font-size:.8rem;background:var(--bg-main);color:var(--text-main)}
    /* Screenshot Review modal: verify + Q&A in one flow */
    .screenshot-review-modal .modal-content{max-width:920px;width:96%;height:90vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
    .screenshot-review-modal .review-modal-body{display:flex;flex:1;min-height:0;flex-direction:column}
    @media(min-width:761px){.screenshot-review-modal .review-modal-body{flex-direction:row}}
    .screenshot-review-modal .review-modal-image{flex:1;min-height:200px;min-width:0;padding:1rem;background:var(--bg-main);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}
    @media(min-width:761px){.screenshot-review-modal .review-modal-image{border-bottom:none;border-right:1px solid var(--border)}}
    .screenshot-review-modal .review-modal-image img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;border:1px solid var(--border)}
    .screenshot-review-modal .review-modal-side{width:100%;overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
    @media(min-width:761px){.screenshot-review-modal .review-modal-side{width:340px;flex-shrink:0}}
    .screenshot-review-modal .review-modal-step-title{font-size:1rem;font-weight:700;color:var(--text-main);margin:0 0 .25rem}
    .screenshot-review-modal .review-modal-step-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:.5rem}
    .screenshot-review-modal .review-form-row{margin-bottom:.5rem}
    .screenshot-review-modal .review-form-row label{display:block;font-size:.72rem;font-weight:600;color:var(--text-muted);margin-bottom:.2rem}
    .screenshot-review-modal .review-form-row select,.screenshot-review-modal .review-form-row input{width:100%;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--border);font-size:.85rem;background:var(--bg-panel);color:var(--text-main)}
    .screenshot-review-modal .review-spread-row.missing select{border-color:#dc2626;background:#fef2f2;box-shadow:0 0 0 2px rgba(220,38,38,.2)}
    .screenshot-review-modal .review-spread-row.missing .review-spread-required-hint{color:#dc2626;font-weight:600}
    .screenshot-review-modal .review-spread-row:not(.missing) .review-spread-required-hint{color:var(--text-muted);font-weight:normal}
    .screenshot-review-modal .review-spread-pills{display:flex;flex-wrap:wrap;gap:.5rem}
    .screenshot-review-modal .review-spread-pill{padding:.6rem 1rem;border-radius:12px;border:2px solid var(--border);background:var(--bg-main);font-size:.9rem;font-weight:700;cursor:pointer;transition:.15s;color:var(--text-main)}
    .screenshot-review-modal .review-spread-pill:hover:not(:disabled){border-color:var(--accent);background:var(--bg-panel);color:var(--link)}
    .screenshot-review-modal .review-spread-pill:disabled{opacity:.5;cursor:not-allowed}
    .screenshot-review-modal .review-friendship-btns{display:flex;gap:.5rem;flex-wrap:wrap}
    .screenshot-review-modal .review-friendship-num{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
    .screenshot-review-modal .review-friendship-num input{width:5rem;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--border);font-size:1rem}
    .review-modal-actions{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border)}
    .review-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem;background:var(--bg-panel);border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:background .3s}
    .review-table th,.review-table td{padding:.45rem .7rem;text-align:left;border-bottom:1px solid var(--border);color:var(--text-main)}
    .review-table th{background:var(--bg-main);font-weight:600;width:35%}
    .review-table tr:last-child td{border-bottom:none}
    .phase2-tiers{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
    .phase2-tier{display:flex;align-items:center;gap:.3rem;font-size:.72rem;cursor:pointer}
    .phase2-tier input{accent-color:var(--accent);width:14px;height:14px}
    /* Auth Modal */
    .auth-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
    .auth-modal-content{background:var(--bg-panel);border-radius:16px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.3);border:1px solid var(--border)}
    .auth-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
    .auth-modal-header h3{margin:0;font-size:1.1rem;color:var(--text-main)}
    .auth-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
    .auth-modal-close:hover{color:var(--text-main)}
    .auth-form-group{margin-bottom:1rem}
    .auth-form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text-main);margin-bottom:.4rem}
    .auth-form-group input{width:100%;padding:.5rem .75rem;border:1px solid var(--border);border-radius:8px;font-size:.85rem;background:var(--bg-main);color:var(--text-main);transition:.2s}
    .auth-form-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(254,225,97,.2)}
    .auth-form-error{background:#fef2f2;color:#b91c1c;padding:.5rem .75rem;border-radius:8px;font-size:.8rem;margin-bottom:1rem;display:none}
    .auth-form-error.show{display:block}
    .auth-form-actions{display:flex;gap:.5rem;margin-top:1.25rem}
    .auth-form-actions .btn{flex:1}
    .auth-form-switch{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--text-muted)}
    .auth-form-switch a{color:var(--link);cursor:pointer;text-decoration:none;font-weight:600}
    .auth-form-switch a:hover{text-decoration:underline}

    /* Pricing / features modal (before auth) */
    .pricing-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
    .pricing-modal-content{background:var(--bg-panel);border-radius:16px;padding:2rem 2.25rem 1.75rem;max-width:780px;width:94%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.3);border:1px solid var(--border)}
    .pricing-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
    .pricing-modal-header h3{margin:0;font-size:1.25rem;font-weight:800;color:var(--text-main)}
    .pricing-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
    .pricing-modal-close:hover{color:var(--text-main)}
    .pricing-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:.5rem}
    @media(max-width:680px){.pricing-plans{grid-template-columns:1fr !important}}
    .pricing-plan{border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;background:var(--bg-main);transition:.15s}
    .pricing-plan:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(254,225,97,.2)}
    .pricing-plan-name{font-weight:800;font-size:1rem;color:var(--text-main)}
    .pricing-plan-price{font-size:.78rem;color:var(--text-muted);font-weight:600;margin-bottom:.15rem}
    .pricing-plan-features{font-size:.74rem;color:var(--text-muted);line-height:1.55;flex:1}
    .pricing-plan-features ul{margin:0;padding-left:1rem}
    .pricing-plan .btn{margin-top:0;width:100%}
    .pricing-modal-footer{text-align:center;margin-top:.5rem;font-size:.8rem;color:var(--text-muted)}
    .pricing-modal-footer a{color:var(--link);cursor:pointer;text-decoration:none;font-weight:600}
    .pricing-modal-footer a:hover{text-decoration:underline}
    .pricing-coupon-note{margin:0 0 .5rem;padding:0}
    .pricing-plan--accent{border-color:var(--accent);box-shadow:0 0 0 2px rgba(254,225,97,.15)}

    /* Interest voting */
    .interest-vote{text-align:center;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
    .interest-vote[hidden]{display:none}
    .interest-vote__prompt{font-size:.92rem;color:var(--text-main);font-weight:600;margin-bottom:.85rem}
    .interest-vote__buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
    .interest-vote__btn{padding:.65rem 2rem;border:none;border-radius:10px;font-size:.92rem;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s,box-shadow .15s}
    .interest-vote__btn:hover{opacity:.9;transform:translateY(-1px)}
    .interest-vote__btn:active{transform:translateY(0)}
    .interest-vote__btn--yes{background:var(--accent);color:var(--accent-text);box-shadow:0 2px 8px rgba(124,58,237,.25)}
    .interest-vote__btn--no{background:var(--bg-main);color:var(--text-muted);border:1px solid var(--border)}
    .interest-vote__btn--no:hover{color:var(--text-main);border-color:var(--text-main)}
    .interest-vote__thanks{text-align:center;font-size:1rem;color:var(--accent);font-weight:700;margin-top:1.25rem;padding:1rem 0 .25rem;border-top:1px solid var(--border)}
    .interest-vote__thanks[hidden]{display:none}
    .btn-link{background:none;border:none;color:var(--link);cursor:pointer;font-weight:600;text-decoration:none;padding:0}
    .btn-link:hover{text-decoration:underline}

    /* ===== RANKING (right panel) ===== */
    .rank-header{padding:.75rem .85rem;border-bottom:1px solid var(--border);flex-shrink:0}
    .rank-header h4{font-size:.85rem;margin:0 0 .4rem;color:var(--text-main)}
    .rank-bp-row{display:flex;align-items:center;gap:.35rem}
    .rank-bp-label{font-size:.68rem;font-weight:600;color:var(--text-muted)}
    .rank-bp-select{padding:.2rem .35rem;border-radius:6px;border:1px solid var(--border);font-size:.7rem;flex:1;background:var(--bg-panel);color:var(--text-main)}
    .rank-scroll{flex:1;overflow-y:auto;padding:.5rem .65rem;min-height:0;display:flex;flex-direction:column;gap:.5rem}
    .rank-banner-vertical{flex-shrink:0;min-height:200px;background:var(--bg-main);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center}
    .rank-banner-inner{font-size:.7rem;color:var(--text-muted)}
    .rank-item{display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;background:var(--bg-panel);border-radius:8px;margin-bottom:.25rem;font-size:.75rem;border:1px solid var(--border);cursor:pointer;transition:.12s}
    .rank-item:hover{border-color:#93c5fd;background:#f0f7ff}
    .rank-item.active{border-color:#2563eb;background:#dbeafe}
    [data-theme="dark"] .rank-item:hover{border-color:var(--link);background:rgba(96,165,250,.15)}
    [data-theme="dark"] .rank-item.active{border-color:var(--link);background:rgba(96,165,250,.25);color:var(--text-main)}
    [data-theme="dark"] .rank-item.active .rank-name,[data-theme="dark"] .rank-item.active .rank-pos,[data-theme="dark"] .rank-item.active .rank-pts{color:var(--text-main)}
    [data-theme="dark"] .rank-item.active .rank-pos,[data-theme="dark"] .rank-item.active .rank-pts{opacity:.9}
    .rank-item.is-upload{border-left:3px solid #f59e0b}
    .rank-item.is-saved{border-left:3px solid #10b981}
    .rank-pos{font-weight:700;color:#999;min-width:1.4rem;text-align:right;font-size:.7rem}
    .rank-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem}
    .rank-source{font-size:.6rem;padding:.1rem .3rem;border-radius:4px;font-weight:600;white-space:nowrap}
    .rank-source.upload{background:#fef3c7;color:#92400e}
    .rank-source.generated{background:#e5e7eb;color:#555}
    .rank-pts{font-size:.65rem;color:#999;white-space:nowrap}
    /* Rank climb animation */
    .rank-item.rank-new-entry{will-change:transform,opacity}
    .rank-item.rank-climbing{transition:transform .35s cubic-bezier(.22,.68,.36,1.2),opacity .3s;opacity:1;will-change:transform,opacity}
    .rank-item.rank-glow{animation:rankGlow .6s ease;border-color:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.35)}
    .rank-item.rank-gold-glow{animation:rankGoldGlow 1s ease;border-color:#ffd700;box-shadow:0 0 16px rgba(255,215,0,.5)}
    @keyframes rankGlow{0%{box-shadow:0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 12px rgba(245,158,11,.5)}100%{box-shadow:0 0 8px rgba(245,158,11,.35)}}
    @keyframes rankGoldGlow{0%{box-shadow:0 0 0 rgba(255,215,0,0)}30%{box-shadow:0 0 20px rgba(255,215,0,.7)}100%{box-shadow:0 0 16px rgba(255,215,0,.5)}}
    /* Celebration particles */
    .rank-celebration{position:absolute;pointer-events:none;z-index:10}
    .rank-particle{position:absolute;border-radius:50%;animation:particlePop linear forwards}
    .rank-die{position:absolute;font-size:1.2rem;animation:dieBurst ease-out forwards;opacity:0}
    @keyframes particlePop{0%{transform:translate(0,0) scale(1);opacity:1}100%{opacity:0}}
    @keyframes dieBurst{0%{transform:translate(0,0) scale(0) rotate(0deg);opacity:1}30%{transform:scale(1.3);opacity:1}100%{opacity:0}}

    /* ===== MODAL: Species Picker ===== */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;animation:modalFadeIn .2s ease}
    @keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
    .modal-content{background:var(--bg-panel);border-radius:16px;max-width:640px;width:94%;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:modalSlideUp .25s ease;transition:background .3s}
    @keyframes modalSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    /* Reward ad interstitial: full-screen overlay, ad container, close when done */
    .reward-interstitial-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}
    .reward-interstitial-overlay[hidden]{display:none}
    .reward-interstitial-content{background:var(--bg-panel);border-radius:16px;min-width:min(320px,100%);min-height:280px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
    .reward-interstitial-content .ad-wrap{width:100%;min-height:250px;display:flex;align-items:center;justify-content:center}
    .reward-interstitial-close{position:absolute;top:.5rem;right:.5rem;width:36px;height:36px;border:none;background:rgba(0,0,0,.15);border-radius:8px;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--text-main);z-index:2}
    .reward-interstitial-close:hover{background:rgba(0,0,0,.25)}
    .reward-interstitial-footer{margin-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
    .reward-interstitial-footer .btn{font-size:.9rem;padding:.5rem 1.25rem}
    .reward-interstitial-countdown{font-size:.85rem;color:var(--text-muted)}
    .reward-interstitial-close:disabled,.reward-interstitial-footer .btn:disabled{opacity:.6;cursor:not-allowed}
    .modal-top{padding:.85rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    .modal-top h3{font-size:1rem;font-weight:700}
    .modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#888;padding:.2rem .4rem;border-radius:8px;line-height:1}
    .modal-close:hover{background:#f5f5f5;color:#333}
    .modal-body{flex:1;overflow-y:auto;padding:.75rem 1rem 1rem;min-height:0}
    .edit-form-row{margin-bottom:.6rem}.edit-form-row label{display:block;font-size:.72rem;font-weight:600;color:var(--text-muted);margin-bottom:.2rem}.edit-form-row select,.edit-form-row input{width:100%;padding:.4rem .5rem;border-radius:8px;border:1px solid var(--border);font-size:.8rem;background:var(--bg-panel);color:var(--text-main)}

    .filters-bar{margin-bottom:.5rem}
    .filter-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;flex-wrap:wrap}
    .filter-label{font-size:.72rem;font-weight:600;color:#555;min-width:55px;flex-shrink:0}
    .pills{display:flex;gap:.2rem;flex-wrap:wrap}
    .pill{padding:.18rem .45rem;border-radius:14px;border:1px solid var(--border);background:var(--bg-panel);font-size:.67rem;cursor:pointer;transition:.12s;color:var(--text-main);white-space:nowrap}
    .pill:hover{border-color:#93c5fd;color:#2563eb}
    .pill.active{color:#fff;border-color:transparent}
    .pill.active[data-val="All"]{background:#2563eb}
    .pill.active[data-val="Berries"]{background:#ef4444}
    .pill.active[data-val="Ingredients"]{background:#f59e0b}
    .pill.active[data-val="Skills"]{background:#8b5cf6}
    .pill.type-pill.active{background:#2563eb}
    .pill.type-pill.active[data-val="Normal"]{background:#a8a878}
    .pill.type-pill.active[data-val="Fire"]{background:#f08030}
    .pill.type-pill.active[data-val="Water"]{background:#6890f0}
    .pill.type-pill.active[data-val="Electric"]{background:#f8d030;color:#333}
    .pill.type-pill.active[data-val="Grass"]{background:#78c850}
    .pill.type-pill.active[data-val="Ice"]{background:#98d8d8;color:#333}
    .pill.type-pill.active[data-val="Fighting"]{background:#c03028}
    .pill.type-pill.active[data-val="Poison"]{background:#a040a0}
    .pill.type-pill.active[data-val="Ground"]{background:#e0c068;color:#333}
    .pill.type-pill.active[data-val="Flying"]{background:#a890f0}
    .pill.type-pill.active[data-val="Psychic"]{background:#f85888}
    .pill.type-pill.active[data-val="Bug"]{background:#a8b820}
    .pill.type-pill.active[data-val="Rock"]{background:#b8a038}
    .pill.type-pill.active[data-val="Ghost"]{background:#705898}
    .pill.type-pill.active[data-val="Dragon"]{background:#7038f8}
    .pill.type-pill.active[data-val="Dark"]{background:#705848}
    .pill.type-pill.active[data-val="Steel"]{background:#b8b8d0;color:#333}
    .pill.type-pill.active[data-val="Fairy"]{background:#ee99ac}
    .pill.sleep-pill.active{background:#6366f1}
    .pill.sleep-pill.active[data-val="Dozing"]{background:#60a5fa}
    .pill.sleep-pill.active[data-val="Snoozing"]{background:#a78bfa}
    .pill.sleep-pill.active[data-val="Slumbering"]{background:#2dd4bf}
    .search-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
    .search-input{padding:.3rem .55rem;border-radius:8px;border:1px solid #ccc;font-size:.78rem;flex:1}
    .search-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.12)}
    .match-count{font-size:.68rem;color:#888}
    .poke-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.3rem}
    .poke-card{padding:.35rem .4rem;border-radius:8px;border:2px solid transparent;cursor:pointer;font-size:.7rem;transition:.1s;text-align:center;line-height:1.25}
    .poke-card:hover{border-color:#93c5fd;background:#f0f7ff}
    .poke-card.selected{border-color:#2563eb;background:#dbeafe}
    .poke-card .poke-name{font-weight:600;display:block}
    .poke-card .poke-meta{color:#888;font-size:.6rem}

    /* ===== EMPTY STATE ===== */
    .empty-state{text-align:center;padding:1rem 1rem 3rem;max-width:500px;margin:0 auto}
    .empty-state-visual{position:relative;display:inline-block;margin-bottom:1.5rem;margin-top:-0.5rem}
    .empty-state .nr-welcome-img{width:100%;max-width:400px;height:auto;margin:0 auto;display:block;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
    [data-theme="dark"] .empty-state .nr-welcome-img{display:none}
    .empty-state .nr-avatar{width:80px;height:80px;border-radius:50%;border:3px solid var(--accent);margin:0 auto;box-shadow:0 4px 16px rgba(254,225,97,.25);background:url('../newrolly-wave.png') no-repeat;background-size:180%;background-position:50% 15%;display:none}
    [data-theme="dark"] .empty-state .nr-avatar{display:inline-block}
    .empty-state h2{font-size:1.05rem;color:var(--text-main);margin-bottom:.35rem}
    .empty-state p{font-size:.82rem;color:var(--text-muted);line-height:1.5}

    /* ===== BANNER AD ===== */
    .banner-ad{height:36px;background:#e5e7eb;text-align:center;line-height:36px;font-size:.72rem;color:#888}
    /* Desktop ad slots below generator */
    .desktop-ads{display:flex;gap:1rem;margin-top:1rem;max-width:560px;margin-left:auto;margin-right:auto}
    .desktop-ads .ad-slot{flex:1;min-height:250px;background:#e5e7eb;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:#888;border:1px dashed #ccc}
    @media(max-width:960px){.desktop-ads{display:none}}

    /* ===== DEV PANEL ===== */
    .dev-wrap{position:relative}
    .btn-dev{background:#6b7280;color:#fff;border:none;border-radius:6px;padding:.25rem .5rem;font-size:.65rem;font-weight:600;cursor:pointer;opacity:.85}
    .btn-dev:hover{opacity:1}
    .dev-panel{position:absolute;top:100%;right:0;margin-top:.25rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:.5rem;min-width:220px;z-index:1001}
    .dev-panel-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.4rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
    .dev-action{display:block;width:100%;text-align:left;padding:.35rem .5rem;margin-bottom:.2rem;font-size:.72rem;background:var(--bg-main);border:1px solid var(--border);border-radius:6px;cursor:pointer;color:var(--text-main)}
    .dev-action:hover{background:#e5e7eb;border-color:#d1d5db}
    .dev-action:last-child{margin-bottom:0}
    .version-badge{font-size:.65rem;color:var(--text-muted);font-weight:500;opacity:.8}
    .version-badge.env-local{color:#059669}.version-badge.env-dev{color:var(--link)}
    /* Skip link: visible on focus for keyboard users */
    .skip-link{position:absolute;left:-9999px;z-index:9999;padding:.5rem 1rem;background:var(--accent);color:var(--accent-text);font-weight:600;border-radius:8px;text-decoration:none;font-size:.85rem}
    .skip-link:focus{left:1rem;top:1rem}
    /* Swipe hints – speech bubbles over NewRolly image */
    .swipe-hints{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;transition:opacity .4s}
    .swipe-hints.dismissed{opacity:0;pointer-events:none}
    .swipe-hint{position:absolute;top:50%;transform:translateY(-50%);opacity:0;animation:swipeHintAlternate 6s ease-in-out 1 forwards}
    .swipe-hint-left{animation-delay:0s}
    .swipe-hint-right{animation-delay:3s}
    @keyframes swipeHintAlternate{0%{opacity:0}6%{opacity:1}40%{opacity:1}46%{opacity:0}100%{opacity:0}}
    .swipe-hint-left{left:24px}
    .swipe-hint-right{right:24px}
    .speech-bubble{position:relative;z-index:2;padding:.65rem 1rem .75rem;border-radius:16px;font-size:.88rem;font-weight:600;color:#1e3a5f;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.18),0 2px 8px rgba(254,225,97,.2);border:1px solid rgba(254,225,97,.35);max-width:140px;line-height:1.35;text-align:center;transition:background .3s,color .3s,border-color .3s}
    .speech-bubble::before{content:'';position:absolute;width:0;height:0;border-style:solid}
    .swipe-hint-left .speech-bubble::before{right:14px;left:auto;top:-10px;bottom:auto;border-width:0 8px 10px;border-color:transparent transparent #fff;filter:drop-shadow(0 -1px 1px rgba(254,225,97,.2))}
    .swipe-hint-right .speech-bubble::before{left:14px;top:-10px;bottom:auto;border-width:0 8px 10px;border-color:transparent transparent #fff;filter:drop-shadow(0 -1px 1px rgba(254,225,97,.2))}
    [data-theme="dark"] .speech-bubble{background:var(--bg-panel);color:var(--text-main);border-color:rgba(254,231,62,.35)}
    [data-theme="dark"] .swipe-hint-left .speech-bubble::before,[data-theme="dark"] .swipe-hint-right .speech-bubble::before{border-bottom-color:var(--bg-panel)}
    .swipe-motion{position:absolute;top:50%;font-size:1.8rem;font-weight:700;line-height:1;animation:swipeMotion 2s ease-in-out infinite;text-shadow:0 1px 2px rgba(0,0,0,.15)}
    .swipe-motion-right{color:#f5c842}
    .swipe-motion-left{color:#3b5cdb}
    .swipe-motion-right{left:-72px;transform:translateY(-50%);animation-name:swipeMotionRight}
    .swipe-motion-left{right:-72px;transform:translateY(-50%);animation-name:swipeMotionLeft}
    @keyframes swipeMotionRight{0%{opacity:.3;transform:translateY(-50%) translateX(0)}50%{opacity:1;transform:translateY(-50%) translateX(14px)}100%{opacity:.3;transform:translateY(-50%) translateX(0)}}
    @keyframes swipeMotionLeft{0%{opacity:.3;transform:translateY(-50%) translateX(0)}50%{opacity:1;transform:translateY(-50%) translateX(-14px)}100%{opacity:.3;transform:translateY(-50%) translateX(0)}}

    /* Mobile swipe indicator (dots) - fixed at bottom above footer */
    .mobile-swipe-nav{display:none;justify-content:center;align-items:center;gap:.75rem;padding:.4rem;background:var(--bg-main);border-top:1px solid var(--border);z-index:60;transition:background .3s,border-color .3s}
    .mobile-swipe-arrow{background:none;border:none;font-size:1rem;color:var(--text-muted);cursor:pointer;transition:color .2s,opacity .2s;padding:.35rem}
    .mobile-swipe-arrow:hover{color:var(--text-main)}
    .mobile-swipe-arrow.active{color:var(--accent);opacity:1}
    .mobile-swipe-arrow:not(.active){opacity:.65}
    .mobile-swipe-arrow-left,.mobile-swipe-arrow-right{font-size:1.1rem;font-weight:700;line-height:1}
    .mobile-swipe-center{font-size:1.1rem;padding:0 .4rem}
    @media(max-width:960px){
      .mobile-swipe-nav{display:flex;position:fixed;bottom:28px;left:0;right:0}
    }
    @media(prefers-reduced-motion:reduce){
      .mobile-swipe-arrow{transition:none}
      .swipe-motion{animation:none;opacity:.3}
      .swipe-hint{animation:none;opacity:.7}
    }

    /* Respect reduced motion */
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    }