*{box-sizing:border-box}
:root{
 --bg:#f6f7fb;
 --paper:#ffffff;
 --paper2:#fbfbfd;
 --text:#10182f;
 --muted:#667089;
 --line:#e8ebf1;
 --navy:#0d1b37;
 --navy2:#132443;
 --yellow:#ffcc19;
 --purple:#7d2ae8;
 --pink:#ff5f93;
 --green:#27b95f;
 --blue:#389bf4;
 --orange:#ff9a2f;
 --shadow:0 8px 24px rgba(32,42,72,.10);
}
html[data-theme="dark"]{
 --bg:#11131a;
 --paper:#191c25;
 --paper2:#151821;
 --text:#f4f5f7;
 --muted:#a4abc0;
 --line:#2a3040;
 --shadow:0 8px 24px rgba(0,0,0,.25);
}
body{
 margin:0;background:var(--bg);color:var(--text);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 min-height:100vh;
}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:334px minmax(0,1fr);min-height:100vh}
.sidebar{
 background:
  radial-gradient(circle at -12% 108%,rgba(76,99,255,.27),transparent 270px),
  linear-gradient(180deg,#0d1b37,#091529);
 color:#fff;padding:22px 20px 18px;position:relative;min-height:100vh;overflow:visible;
 border-right:1px solid rgba(255,255,255,.05);
}
.side-brand{padding:0 8px 26px;border-bottom:1px solid rgba(255,255,255,.13)}
.side-logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.side-logo-face{font-size:53px;line-height:1;filter:drop-shadow(0 5px 7px rgba(0,0,0,.18))}
.side-logo-text{font-size:34px;font-weight:900;letter-spacing:-.055em}
.side-logo-text span{color:var(--yellow)}
.side-slogan{font-size:14px;font-weight:750;font-style:italic;margin:7px 0 0 16px}
.side-swoosh{width:220px;height:5px;background:var(--yellow);border-radius:100%;margin:9px 0 0 13px;transform:rotate(-4deg)}
.top-rated-section{padding:24px 0 0}
.top-rated-title{text-transform:uppercase;font-size:16px;font-weight:900;color:#fff;padding:0 8px 15px;display:flex;align-items:center;gap:8px}
.top-rated-title span:first-child{font-size:19px}
.tiny-star{margin-left:auto;color:var(--yellow);font-size:21px}
.top-rated-list{display:grid;gap:9px}
.top-joke{
 width:100%;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);
 color:#fff;border-radius:15px;padding:12px 10px;display:grid;grid-template-columns:34px 1fr 16px;gap:9px;text-align:left;
 box-shadow:inset 0 1px rgba(255,255,255,.025);transition:.15s ease;
}
.top-joke:hover{transform:translateX(3px);background:rgba(255,255,255,.08)}
.top-joke.featured{border-color:rgba(255,204,25,.85);box-shadow:0 0 0 1px rgba(255,204,25,.15)}
.rank{
 width:30px;height:30px;border-radius:50%;background:#fff;color:#26324a;display:grid;place-items:center;font-weight:900;
}
.featured .rank{background:var(--yellow);color:#2b2409}
.top-copy{min-width:0;display:grid;gap:5px}
.top-text{font-weight:750;font-size:14px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.top-stars{font-size:12px;color:var(--yellow);white-space:nowrap}
.top-stars small{color:#d3d7e2;margin-left:6px}
.top-tag{
 width:max-content;max-width:100%;background:#fff;color:#5e6471;font-size:10px;font-weight:800;
 border-radius:999px;padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top-arrow{align-self:center;color:#dfe4ee;font-size:24px}
.sidebar-bottom{margin-top:14px;position:relative}
.view-top-btn{
 width:100%;height:43px;border-radius:12px;border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;
 display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;
}
.view-top-btn b{margin-left:auto;margin-right:10px}
.side-doodle{
 width:76px;height:49px;border:3px solid rgba(96,168,255,.85);border-radius:50%;
 color:#57a7ff;display:grid;place-items:center;font-size:20px;font-weight:900;transform:rotate(-8deg);
 margin:28px auto 0;position:relative;
}
.side-doodle:after{content:"";position:absolute;width:16px;height:12px;border-left:3px solid #57a7ff;bottom:-8px;left:10px;transform:rotate(30deg)}
.main{min-width:0}
.hero{
 background:
  radial-gradient(circle at 86% 26%,rgba(255,213,61,.22),transparent 210px),
  linear-gradient(180deg,#dff2ff 0%,#edf8ff 69%,#fff 100%);
 border-bottom:1px solid #e2e8f0;
}
html[data-theme="dark"] .hero{background:linear-gradient(180deg,#18243a,#151b2a)}
.hero-inner{padding:16px 26px 16px;max-width:1260px;margin:auto}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-title-wrap{display:flex;align-items:center;gap:11px}
.hero-title-rays{color:var(--yellow);font-size:28px;transform:rotate(-10deg)}
.hero h1{
 margin:0;font-size:42px;line-height:1;font-weight:950;font-style:italic;letter-spacing:-.055em;color:#112044;
}
html[data-theme="dark"] .hero h1{color:#fff}
.hero h1:after{
 content:"";display:block;width:88%;height:5px;background:var(--yellow);border-radius:100%;margin-top:7px;transform:rotate(-1deg)
}
.theme-switch{
 border:0;background:#10203e;border-radius:999px;padding:3px;display:flex;gap:2px;box-shadow:0 4px 10px rgba(0,0,0,.15)
}
.theme-switch span{width:28px;height:24px;display:grid;place-items:center;border-radius:999px;background:#fff}
.theme-switch span:last-child{background:transparent}
.hero-search-row{display:grid;grid-template-columns:minmax(0,760px) 1fr;align-items:center;gap:22px;margin-top:15px}
.search-form{
 height:66px;border-radius:999px;background:#fff;display:grid;grid-template-columns:50px 1fr 56px;align-items:center;padding:0 7px 0 15px;
 box-shadow:0 7px 18px rgba(49,73,111,.16);border:1px solid rgba(20,44,80,.05)
}
.search-icon{font-size:30px;color:#15254a;transform:rotate(-20deg)}
.search-form input{border:0;outline:0;font-size:17px;color:#273249;background:transparent}
.search-form input::placeholder{color:#7b8498}
.search-form button{
 width:49px;height:49px;border:0;border-radius:50%;background:var(--yellow);color:#111a31;font-size:28px;font-weight:900
}
.hero-fun{height:80px;position:relative}
.ha-bubble{position:absolute;right:192px;top:-25px;font-size:24px;line-height:.83;font-weight:950;transform:rotate(-9deg);color:#111b37}
.hero-laugher{position:absolute;right:65px;top:-45px;font-size:101px;filter:drop-shadow(0 11px 12px rgba(0,0,0,.12))}
.lol-cup{
 position:absolute;right:7px;top:22px;background:#103767;color:#ffd728;font-weight:900;border-radius:9px 9px 14px 14px;
 width:50px;height:42px;display:grid;place-items:center;transform:rotate(2deg);box-shadow:0 4px 10px rgba(0,0,0,.18)
}
.category-strip{display:flex;gap:9px;align-items:center;overflow:auto;padding:12px 0 2px;scrollbar-width:none}
.category-strip::-webkit-scrollbar{display:none}
.category-chip{
 flex:0 0 auto;height:43px;padding:0 18px;border:0;border-radius:999px;background:#fff;color:#17233f;font-weight:800;
 box-shadow:0 5px 12px rgba(37,55,87,.10);display:flex;align-items:center;gap:8px;transition:.15s ease
}
.category-chip:hover{transform:translateY(-1px)}
.category-chip.active{background:var(--yellow)}
.chip-icon{font-size:17px}.more-chip b{font-size:17px}
.catalog{max-width:1260px;margin:auto;padding:12px 26px 27px}
.db-count-row{display:flex;align-items:center;gap:14px;margin:0 0 11px}
.db-count-pill{background:#fff1c4;border-radius:999px;padding:10px 16px;font-weight:850;color:#1d2640}
html[data-theme="dark"] .db-count-pill{background:#382f19;color:#ffe7a4}
.count-doodle{font-size:33px;color:#8e38ef;transform:rotate(-13deg)}
.results-toolbar{
 background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:10px 13px 10px 16px;
 display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow);margin-bottom:14px;
}
.results-count{font-size:16px;font-weight:800}
.results-count strong{font-size:30px;color:var(--purple);margin-right:6px}
.results-count:after{content:"";display:block;height:4px;width:63px;background:var(--yellow);border-radius:99px;margin-top:2px}
.toolbar-right{display:flex;align-items:center;gap:8px}
.toolbar-right label{font-weight:750}
.toolbar-right select{
 height:42px;border:1px solid var(--line);border-radius:13px;padding:0 40px 0 15px;background:var(--paper);color:var(--text);font-weight:650;outline:0
}
.view-toggle{width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:21px}
.view-toggle.active{background:var(--yellow);color:#121a30}
.active-filters:empty{display:none}
.joke-grid{display:grid;gap:14px}
.joke-card{
 --accent:var(--pink);
 background:var(--paper);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);
 display:grid;grid-template-columns:minmax(0,1fr) 100px 280px 95px;align-items:stretch;overflow:hidden;position:relative;
 min-height:166px;transition:.16s ease;
}
.joke-card:hover{transform:translateY(-2px);box-shadow:0 13px 29px rgba(30,42,72,.13)}
.joke-card:before{content:"";width:8px;background:var(--accent);position:absolute;left:0;top:0;bottom:0}
.accent-0{--accent:var(--pink)}
.accent-1{--accent:var(--green)}
.accent-2{--accent:var(--yellow)}
.accent-3{--accent:var(--blue)}
.joke-main{padding:18px 19px 13px 28px;display:grid;align-content:center;gap:9px;min-width:0}
.qa-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center}
.qa-badge{
 width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-weight:950;font-size:19px;color:#14203c
}
.qa-badge.q{background:var(--accent)}
.qa-badge.a{background:#ffe95d}
.qa-copy{
 min-width:0;padding:8px 13px;border-radius:10px;font-size:18px;font-weight:850;line-height:1.3;
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%, white),rgba(255,255,255,0));
}
html[data-theme="dark"] .qa-copy{background:color-mix(in srgb,var(--accent) 18%, #1b1e27)}
.answer-row .qa-copy{background:linear-gradient(90deg,#fff2dc,rgba(255,255,255,0))}
html[data-theme="dark"] .answer-row .qa-copy{background:#242020}
.tag-row{display:flex;gap:7px;padding-left:51px;flex-wrap:wrap}
.tag{
 border-radius:999px;background:#eef2ff;color:#2b50b2;padding:4px 9px;font-size:12px;font-weight:750;display:flex;align-items:center;gap:5px
}
.tag.secondary{background:#f3eaff;color:#7632b7}
.score-col{
 border-left:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px
}
.score-col span{font-size:13px;color:var(--muted)}
.score-col strong{font-size:31px;line-height:1;color:var(--purple)}
.rating-block{display:flex;flex-direction:column;justify-content:center;padding:0 23px;gap:8px}
.rating-row{display:flex;align-items:center;gap:9px}
.stars{display:flex;gap:1px}
.star{border:0;background:transparent;padding:0;color:#c9cdd6;font-size:24px;line-height:1}
.star.filled{color:#ffbd00}
.star:not(:disabled):hover{transform:scale(1.15)}
.rating-summary{font-size:13px;color:#4d566b}
html[data-theme="dark"] .rating-summary{color:#c0c7d6}
.my-rating{font-size:12px;color:#6f2bd8;display:flex;align-items:center;gap:8px;font-weight:650}
.mini-stars{display:flex;gap:2px;color:#c9cdd6;font-size:18px}
.mini-stars .on{color:#ffbd00}
.card-actions{display:flex;align-items:center;justify-content:center;gap:10px;padding-right:15px}
.round-action{
 width:45px;height:45px;border:0;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;
 background:#eaf2ff;color:#215eea;transition:.15s ease
}
.round-action.share-btn{background:#eef9e8;color:#27892f}
.round-action:hover{transform:translateY(-2px) rotate(-2deg)}
.bottom-row{display:flex;align-items:center;justify-content:center;position:relative;margin-top:19px;min-height:64px}
.pagination{display:flex;gap:8px;align-items:center}
.page-btn{
 min-width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--text);font-weight:800;box-shadow:0 4px 9px rgba(31,45,72,.07)
}
.page-btn.active{background:var(--purple);color:white;border-color:var(--purple)}
.page-ellipsis{padding:0 6px}
.surprise-fab{
 position:absolute;right:5px;height:56px;border:0;border-radius:18px;padding:0 22px;background:linear-gradient(90deg,#7f20e8,#c218e0);
 color:white;font-size:20px;font-weight:900;display:flex;align-items:center;gap:11px;box-shadow:0 9px 19px rgba(111,33,213,.25);
}
.surprise-fab:hover{transform:translateY(-2px)}
.surprise-fab .dice{font-size:25px}.surprise-fab b{margin-left:4px;font-size:25px}
.empty-state{padding:45px;background:var(--paper);border:1px solid var(--line);border-radius:17px;text-align:center;color:var(--muted)}
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:18px}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,11,24,.62);backdrop-filter:blur(5px)}
.modal-panel{
 position:relative;z-index:2;width:min(980px,100%);background:var(--paper);border-radius:22px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.30)
}
.modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--paper2);color:var(--text);font-size:24px}
.modal-label{font-size:12px;font-weight:900;color:var(--purple);letter-spacing:.12em;margin-bottom:14px}
.modal .joke-card{grid-template-columns:minmax(0,1fr) 90px 260px 90px}
.modal-actions{display:flex;justify-content:center;margin-top:15px}
.primary-btn{border:0;background:linear-gradient(90deg,#7f20e8,#bd28dc);color:#fff;padding:12px 18px;border-radius:13px;font-weight:850}
body.modal-open{overflow:hidden}

@media(max-width:1120px){
 .app-shell{grid-template-columns:280px minmax(0,1fr)}
 .sidebar{padding-left:14px;padding-right:14px}
 .side-logo-text{font-size:29px}.side-logo-face{font-size:44px}
 .hero-search-row{grid-template-columns:minmax(0,1fr) 220px}
 .hero-laugher{font-size:82px;right:38px}
 .ha-bubble{right:132px}
 .joke-card{grid-template-columns:minmax(0,1fr) 80px 230px 82px}
 .rating-block{padding:0 12px}
 .star{font-size:20px}
}
@media(max-width:900px){
 .app-shell{display:block}
 .sidebar{position:relative;height:auto;display:none}
 .hero-inner,.catalog{padding-left:16px;padding-right:16px}
 .hero h1{font-size:34px}
 .hero-search-row{grid-template-columns:1fr}
 .hero-fun{display:none}
 .joke-card{grid-template-columns:1fr 80px}
 .rating-block{grid-column:1;padding:0 24px 16px}
 .card-actions{grid-column:2;grid-row:2;padding:0 12px 12px}
 .score-col{grid-column:2;grid-row:1}
 .surprise-fab{position:static;margin-left:auto}
 .bottom-row{justify-content:space-between}
}
@media(max-width:620px){
 .hero h1{font-size:28px}
 .search-form{height:58px;grid-template-columns:40px 1fr 48px}
 .search-form button{width:43px;height:43px}
 .db-count-pill{font-size:13px}
 .results-toolbar{align-items:flex-start;flex-direction:column}
 .toolbar-right{width:100%}
 .toolbar-right label,.view-toggle{display:none}
 .toolbar-right select{width:100%}
 .joke-card{display:block;min-height:0}
 .joke-main{padding:16px 14px 12px 21px}
 .qa-copy{font-size:16px}
 .score-col{border:0;border-top:1px solid var(--line);flex-direction:row;justify-content:flex-start;padding:10px 20px;gap:8px}
 .score-col strong{font-size:22px}
 .rating-block{padding:10px 20px}
 .card-actions{justify-content:flex-start;padding:0 20px 15px}
 .bottom-row{flex-direction:column;gap:15px}
 .surprise-fab{margin:0;width:100%;justify-content:center}
 .modal .joke-card{display:block}
}


/* v10 cleanup and interaction fixes */
.hero-actions{
 display:flex;
 align-items:center;
 gap:12px;
}
.top-db-count{
 background:rgba(255,255,255,.82);
 color:#17233f;
 border-radius:999px;
 padding:9px 14px;
 font-size:13px;
 font-weight:850;
 box-shadow:0 5px 14px rgba(37,55,87,.10);
 white-space:nowrap;
}
html[data-theme="dark"] .top-db-count{
 background:rgba(20,26,40,.85);
 color:#f5f7fb;
}
.db-count-row{display:none!important}

.hero-search-row{
 grid-template-columns:minmax(0,760px) minmax(330px,1fr);
}
.hero-fun{
 height:126px;
 position:relative;
 overflow:visible;
}
.hero-mascot-img{
 position:absolute;
 right:-22px;
 bottom:-32px;
 width:min(510px,42vw);
 max-width:none;
 height:auto;
 pointer-events:none;
 user-select:none;
 filter:drop-shadow(0 12px 18px rgba(40,68,110,.10));
}

/* Categories can expand to show all database categories. */
.category-strip.expanded{
 flex-wrap:wrap;
 overflow:visible;
}

/* Flexible joke structures */
.dialogue-joke{
 display:grid;
 gap:7px;
}
.dialogue-row{
 display:grid;
 grid-template-columns:auto minmax(0,1fr);
 align-items:start;
 gap:9px;
}
.speaker-pill{
 min-width:58px;
 max-width:120px;
 padding:5px 9px;
 border-radius:999px;
 background:color-mix(in srgb,var(--accent) 20%,white);
 color:#17213a;
 font-size:11px;
 font-weight:900;
 text-align:center;
}
html[data-theme="dark"] .speaker-pill{
 color:#fff;
 background:color-mix(in srgb,var(--accent) 25%,#242937);
}
.dialogue-copy{
 padding:5px 3px;
 font-size:16px;
 line-height:1.38;
 font-weight:690;
}
.plain-joke{
 display:grid;
 grid-template-columns:42px minmax(0,1fr);
 gap:9px;
 align-items:start;
}
.plain-icon{
 width:35px;
 height:35px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:var(--accent);
 color:#15203a;
 font-weight:950;
}
.paragraph-stack{
 min-width:0;
 border-radius:11px;
 padding:7px 13px;
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,white),rgba(255,255,255,0));
 font-size:17px;
 line-height:1.38;
 font-weight:730;
}
html[data-theme="dark"] .paragraph-stack{
 background:color-mix(in srgb,var(--accent) 13%,#1d212b);
}
.paragraph-stack>div+div{
 margin-top:5px;
}
.paragraph-stack .punchline{
 font-weight:860;
}
.list-joke ul{
 margin:0;
 padding:6px 13px 6px 30px;
 border-radius:11px;
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,white),rgba(255,255,255,0));
 font-size:16px;
 line-height:1.4;
 font-weight:690;
}
.list-joke li+li{margin-top:4px}

/* Both sort-side buttons now have real behaviors. */
.view-toggle{
 transition:transform .14s ease,background .14s ease;
}
.view-toggle:hover{transform:translateY(-1px)}
.view-toggle.active{background:var(--yellow);color:#121a30}

/* Compact view */
.compact-view .joke-grid{gap:9px}
.compact-view .joke-card{
 min-height:116px;
 grid-template-columns:minmax(0,1fr) 80px 240px 86px;
}
.compact-view .joke-main{padding-top:11px;padding-bottom:9px;gap:6px}
.compact-view .qa-copy,
.compact-view .paragraph-stack{font-size:15px;padding-top:5px;padding-bottom:5px}
.compact-view .qa-badge,
.compact-view .plain-icon{width:29px;height:29px;font-size:15px}
.compact-view .qa-row,
.compact-view .plain-joke{grid-template-columns:35px minmax(0,1fr)}
.compact-view .tag-row{padding-left:44px}
.compact-view .star{font-size:19px}
.compact-view .round-action{width:39px;height:39px}

/* The old redundant sidebar action is removed; keep decoration centered. */
.sidebar-bottom{margin-top:22px}

@media(max-width:1120px){
 .hero-search-row{grid-template-columns:minmax(0,1fr) 300px}
 .hero-mascot-img{width:390px;right:-18px;bottom:-21px}
 .top-db-count{font-size:12px;padding:8px 11px}
}
@media(max-width:900px){
 .top-db-count{display:none}
 .hero-search-row{grid-template-columns:1fr}
 .hero-fun{display:none}
}
@media(max-width:620px){
 .hero-actions{margin-left:auto}
 .compact-view .joke-card{display:block}
}


/* =========================================================
   v11 — clean mascot, single editable rating, top surprise
   ========================================================= */

/* Top actions */
.hero-actions{
 display:flex;
 align-items:center;
 gap:9px;
 flex-wrap:nowrap;
}
.top-surprise-btn{
 height:40px;
 border:0;
 border-radius:999px;
 padding:0 15px;
 display:flex;
 align-items:center;
 gap:7px;
 background:linear-gradient(100deg,#7b26ee,#d71bd3);
 color:#fff;
 font-weight:900;
 font-style:italic;
 box-shadow:0 7px 17px rgba(124,38,225,.23);
 transition:transform .15s ease,box-shadow .15s ease;
 white-space:nowrap;
}
.top-surprise-btn:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 20px rgba(124,38,225,.30);
}
.top-surprise-btn .dice{font-size:18px;font-style:normal}

/* Hide old bottom button styling remnants */
.surprise-fab{display:none!important}
.bottom-row{min-height:50px}

/* Native mascot: no image boundaries, no baked-in buttons */
.hero-fun{
 height:120px;
 position:relative;
 overflow:visible;
 min-width:330px;
}
.css-mascot{
 position:absolute;
 right:5px;
 bottom:-27px;
 width:292px;
 height:165px;
 pointer-events:none;
}
.mascot-body{
 position:absolute;
 right:15px;
 bottom:3px;
 width:155px;
 height:79px;
 border-radius:55% 45% 22px 36px;
 background:linear-gradient(150deg,#2084d8,#1257a5 70%);
 transform:rotate(-4deg);
 box-shadow:inset -12px -10px 15px rgba(10,49,104,.16);
}
.mascot-head{
 position:absolute;
 right:35px;
 top:7px;
 width:135px;
 height:135px;
 border-radius:50%;
 background:
   radial-gradient(circle at 34% 24%,rgba(255,255,255,.38),transparent 19%),
   linear-gradient(145deg,#ffe943,#ffb915 74%);
 box-shadow:
   inset -11px -13px 18px rgba(185,102,0,.12),
   0 15px 26px rgba(168,105,0,.15);
 transform:rotate(5deg);
}
.mascot-glasses{
 position:absolute;
 left:15px;
 top:24px;
 width:108px;
 height:43px;
 transform:rotate(7deg);
}
.glass{
 position:absolute;
 top:0;
 width:48px;
 height:38px;
 border-radius:12px 12px 19px 19px;
 background:linear-gradient(150deg,#192339,#05070d 72%);
 border:4px solid #17223a;
 box-shadow:inset 8px 6px 8px rgba(255,255,255,.16);
}
.glass-left{left:0;transform:rotate(-5deg)}
.glass-right{right:0;transform:rotate(5deg)}
.glass-bridge{
 position:absolute;
 left:45px;
 top:13px;
 width:20px;
 height:5px;
 background:#17223a;
 border-radius:99px;
}
.mascot-mouth{
 position:absolute;
 left:31px;
 top:74px;
 width:82px;
 height:47px;
 background:#20101d;
 border-radius:9px 9px 43px 43px;
 overflow:hidden;
 transform:rotate(2deg);
}
.mascot-teeth{
 position:absolute;
 left:8px;
 right:8px;
 top:0;
 height:13px;
 background:#fff;
 border-radius:0 0 50% 50%;
}
.mascot-tongue{
 position:absolute;
 left:22px;
 bottom:-4px;
 width:47px;
 height:22px;
 border-radius:50% 50% 0 0;
 background:#fa557b;
 transform:rotate(-5deg);
}
.mascot-arm-left{
 position:absolute;
 left:31px;
 top:74px;
 width:87px;
 height:29px;
 border-radius:22px;
 background:linear-gradient(90deg,#ffd538,#ffbf1c);
 transform:rotate(-24deg);
 transform-origin:right center;
 z-index:2;
 box-shadow:inset 0 -5px 7px rgba(182,100,0,.10);
}
.mascot-hand-left{
 position:absolute;
 left:9px;
 top:42px;
 color:#ffc62b;
 font-size:45px;
 font-weight:900;
 transform:rotate(-21deg);
 z-index:3;
 text-shadow:0 4px 4px rgba(132,79,0,.12);
}
.mascot-cup{
 position:absolute;
 right:0;
 bottom:2px;
 width:48px;
 height:57px;
 border-radius:8px 8px 13px 13px;
 background:#073a72;
 color:#ffd42d;
 display:grid;
 place-items:center;
 font-size:14px;
 font-weight:950;
 transform:rotate(2deg);
 box-shadow:0 6px 11px rgba(10,39,81,.20);
}
.mascot-cup:after{
 content:"";
 position:absolute;
 right:-14px;
 top:15px;
 width:16px;
 height:20px;
 border:5px solid #073a72;
 border-left:0;
 border-radius:0 12px 12px 0;
}
.hero-ha{
 position:absolute;
 right:196px;
 top:2px;
 font-size:27px;
 line-height:.78;
 font-weight:1000;
 letter-spacing:-.08em;
 color:#102046;
 transform:rotate(-9deg);
 z-index:2;
}
html[data-theme="dark"] .hero-ha{color:#eaf1ff}

/* One editable rating row only */
.rating-block{
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0 21px;
}
.editable-rating{
 width:100%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:13px;
}
.user-stars{
 display:flex;
 gap:2px;
 flex:0 0 auto;
}
.user-stars .star{
 border:0;
 background:transparent;
 padding:1px;
 color:#c8ced8;
 font-size:25px;
 line-height:1;
 cursor:pointer;
 transition:transform .10s ease,color .10s ease;
}
.user-stars .star.filled{color:#ffbd00}
.user-stars .star:hover,
.user-stars .star:focus{
 transform:scale(1.16);
 outline:none;
}
.rating-numbers{
 min-width:73px;
 display:flex;
 align-items:baseline;
 gap:5px;
 white-space:nowrap;
 color:var(--muted);
}
.rating-numbers strong{
 font-size:14px;
 color:var(--text);
}
.rating-numbers span{
 font-size:11px;
}

/* Remove old second-rating-row remnants if cached markup appears */
.rating-row,
.my-rating,
.mini-stars{
 display:none!important;
}

/* slightly simplify rating column */
.joke-card{
 grid-template-columns:minmax(0,1fr) 100px 250px 95px;
}
.compact-view .joke-card{
 grid-template-columns:minmax(0,1fr) 80px 215px 86px;
}

@media(max-width:1120px){
 .top-surprise-btn span:nth-child(2){display:none}
 .top-surprise-btn{width:40px;padding:0;justify-content:center}
 .css-mascot{transform:scale(.88);transform-origin:right bottom}
 .hero-fun{min-width:285px}
 .joke-card{grid-template-columns:minmax(0,1fr) 80px 220px 82px}
}
@media(max-width:900px){
 .top-surprise-btn span:nth-child(2){display:inline}
 .top-surprise-btn{width:auto;padding:0 14px}
 .hero-actions{gap:8px}
}
@media(max-width:620px){
 .top-surprise-btn span:nth-child(2){display:none}
 .top-surprise-btn{width:40px;padding:0;justify-content:center}
 .editable-rating{justify-content:flex-start}
 .rating-numbers{margin-left:7px}
}


/* v12 fixes */
.user-stars,
.user-stars .star{
 position:relative;
 z-index:5;
 pointer-events:auto!important;
}
.user-stars .star{
 cursor:pointer!important;
}
.round-action.share-btn svg{
 width:22px;
 height:22px;
 fill:currentColor;
 stroke:currentColor;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.round-action.share-btn svg circle{
 fill:currentColor;
 stroke:none;
}
.round-action.share-btn svg path{
 fill:none;
}
.top-db-count{
 padding-left:14px;
}


/* v13 interaction fixes */
.search-form{
 grid-template-columns:50px minmax(0,1fr) 34px 56px;
}
.clear-search-btn{
 width:30px!important;
 height:30px!important;
 border-radius:50%!important;
 border:0!important;
 background:#eef1f6!important;
 color:#5b6478!important;
 font-size:19px!important;
 line-height:1!important;
 display:grid!important;
 place-items:center!important;
 box-shadow:none!important;
 padding:0!important;
}
.clear-search-btn:hover{
 background:#e2e7ef!important;
 transform:none!important;
}
.clear-search-btn.hidden{
 visibility:hidden!important;
 pointer-events:none!important;
}
.category-chip .chip-icon{
 display:inline-flex;
}
.category-chip:not([data-category="all"]) .chip-icon{
 display:none!important;
}


/* v14 modal rating + universal share icon */
.round-action.share-btn .share-icon{
 width:22px;
 height:22px;
 overflow:visible;
}
.round-action.share-btn .share-icon path{
 fill:none;
 stroke:currentColor;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.round-action.share-btn .share-icon circle{
 fill:currentColor;
 stroke:none;
}

#randomContent .joke-card,
#randomContent .rating-block,
#randomContent .editable-rating,
#randomContent .user-stars,
#randomContent .star{
 position:relative;
}
#randomContent .user-stars,
#randomContent .star{
 z-index:12;
 pointer-events:auto!important;
}
#randomContent .star{
 cursor:pointer!important;
}


/* =========================================================
   v15 foldable / tablet layout fixes
   ========================================================= */

.app-shell,
.main-content,
.content-wrap,
.results-area,
.results-column,
.jokes-wrap,
.joke-list{
    min-width:0;
}

.main-content,
.content-wrap,
.results-area,
.results-column,
.jokes-wrap,
.joke-list,
.joke-card{
    width:100%;
    max-width:none;
    box-sizing:border-box;
}

/*
 Opened foldables commonly land in the 900–1150px range.
 The old desktop sidebar consumed too much horizontal room there.
*/
@media (max-width:1180px){
    .app-shell{
        display:block!important;
        width:100%!important;
        max-width:none!important;
    }

    .sidebar{
        position:relative!important;
        width:100%!important;
        max-width:none!important;
        min-height:0!important;
        height:auto!important;
        overflow:visible!important;
    }

    .sidebar .top-rated,
    .sidebar .sidebar-top-rated{
        display:none!important;
    }

    .main-content{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding-left:20px!important;
        padding-right:20px!important;
    }

    .hero,
    .results-area,
    .joke-list,
    .joke-card{
        width:100%!important;
        max-width:none!important;
    }

    .joke-card{
        grid-template-columns:minmax(0,1fr) 92px 220px 92px!important;
    }
}

@media (max-width:920px){
    .main-content{
        padding-left:14px!important;
        padding-right:14px!important;
    }

    .joke-card,
    .compact-view .joke-card{
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:12px!important;
    }

    .joke-card .rating-block{
        grid-column:1 / 2;
        margin-top:4px;
    }

    .joke-card .card-actions{
        grid-column:2 / 3;
        align-self:end;
        justify-self:end;
    }
}

@media (max-width:620px){
    .main-content{
        padding-left:10px!important;
        padding-right:10px!important;
    }

    .joke-card,
    .compact-view .joke-card{
        display:block!important;
        width:100%!important;
        max-width:none!important;
    }

    .score-block,
    .rating-block,
    .card-actions{
        margin-top:10px;
    }

    .card-actions{
        display:flex!important;
        justify-content:flex-end;
        gap:8px;
    }
}


/* =========================================================
   v18 — podium Top 3, real responsive grid, category browser
   ========================================================= */

/* Sidebar: exactly three podium cards */
.top-rated-title{margin-bottom:2px}
.top-rated-list{gap:11px}
.top-joke.podium{
 position:relative;
 overflow:hidden;
 border-width:1px;
 border-style:solid;
 padding:12px 10px;
 min-height:96px;
 transform:none;
}
.top-joke.podium:hover{transform:translateY(-2px);}
.top-joke.podium .medal-rank{
 width:42px;height:42px;min-width:42px;
 border-radius:50%;
 display:grid;place-items:center;
 position:relative;
 font-size:18px;
 font-weight:1000;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 13px rgba(0,0,0,.22);
}
.top-joke.podium .medal-rank b{position:relative;z-index:2}
.top-joke.podium .medal-symbol{
 position:absolute;inset:0;display:grid;place-items:center;
 opacity:.20;font-size:31px;transform:rotate(-12deg);
}
.podium-label{font-size:8px;font-weight:1000;letter-spacing:.14em;opacity:.82}

.top-joke.gold{
 background:
  radial-gradient(circle at 92% 12%,rgba(255,244,169,.24),transparent 80px),
  linear-gradient(135deg,rgba(255,205,42,.20),rgba(255,255,255,.055));
 border-color:rgba(255,207,55,.80);
 box-shadow:0 8px 24px rgba(219,161,0,.16),inset 0 0 0 1px rgba(255,231,133,.07);
}
.top-joke.gold:after{
 content:"✦";position:absolute;right:28px;top:3px;color:#ffd84c;font-size:16px;
 text-shadow:-30px 23px 0 rgba(255,216,76,.45),20px 42px 0 rgba(255,216,76,.28);
}
.top-joke.gold .medal-rank{background:linear-gradient(145deg,#fff2a1,#f4b600 68%,#c68700);color:#5a3700;border:1px solid #ffe26d}
.top-joke.gold .podium-label{color:#ffe16c}

.top-joke.silver{
 background:linear-gradient(135deg,rgba(211,220,234,.16),rgba(255,255,255,.045));
 border-color:rgba(207,218,232,.62);
 box-shadow:0 6px 18px rgba(160,177,200,.10);
}
.top-joke.silver .medal-rank{background:linear-gradient(145deg,#f9fbff,#b9c4d2 68%,#7d8a99);color:#34404d;border:1px solid #e9eff5}
.top-joke.silver .podium-label{color:#d9e1ec}

.top-joke.bronze{
 background:linear-gradient(135deg,rgba(202,126,73,.18),rgba(255,255,255,.04));
 border-color:rgba(206,130,78,.62);
 box-shadow:0 6px 18px rgba(149,77,30,.11);
}
.top-joke.bronze .medal-rank{background:linear-gradient(145deg,#edbd8d,#b96f36 68%,#7b3f1d);color:#3c1b0a;border:1px solid #e2a56f}
.top-joke.bronze .podium-label{color:#e6a46e}

/* Sidebar category counts */
.sidebar-categories-section{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10)}
.sidebar-section-title{
 text-transform:uppercase;font-size:13px;font-weight:950;letter-spacing:.06em;
 padding:0 8px 10px;color:#fff;display:flex;align-items:center;gap:8px;
}
.sidebar-category-list{display:grid;gap:3px}
.sidebar-category-link{
 border:0;background:transparent;color:#dfe6f5;width:100%;
 min-height:34px;border-radius:9px;padding:6px 8px;
 display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
 transition:.12s ease;
}
.sidebar-category-link:hover,.sidebar-category-link.active{background:rgba(255,255,255,.09);color:#fff}
.sidebar-category-link.active{box-shadow:inset 3px 0 0 var(--yellow)}
.sidebar-category-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;font-weight:760}
.sidebar-category-name b{width:17px;text-align:center;color:#ffd72f}
.sidebar-category-count{
 min-width:29px;text-align:center;border-radius:999px;padding:3px 6px;
 background:rgba(255,255,255,.09);font-size:10px;font-weight:900;color:#fff;
}
.sidebar-category-empty{padding:8px;color:#9da8be;font-size:12px}

/* Hero mascot must stay in its own lane and never cover category chips. */
.hero-search-row{align-items:start}
.hero-fun{height:145px;min-height:145px;overflow:visible}
.css-mascot{bottom:4px}
.hero-ha{top:8px}
.category-strip{position:relative;z-index:5;margin-top:1px}

/* Real list view (default). */
.list-view .joke-grid{display:grid;grid-template-columns:1fr;gap:14px}

/* Real box/grid view. auto-fit gives 2, 3 or more columns when space allows. */
.grid-view .joke-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr));
 gap:16px;
 align-items:stretch;
}
.grid-view .joke-card{
 min-height:250px;
 height:100%;
 display:grid;
 grid-template-columns:minmax(0,1fr) 82px;
 grid-template-rows:minmax(145px,auto) auto;
 align-items:stretch;
}
.grid-view .joke-main{grid-column:1;grid-row:1;padding:19px 16px 13px 25px;align-content:start}
.grid-view .score-col{
 grid-column:2;grid-row:1;
 border-left:1px solid var(--line);border-right:0;border-bottom:1px solid var(--line);
 min-width:0;
}
.grid-view .rating-block{
 grid-column:1;grid-row:2;
 padding:13px 12px 14px 23px;
 border-top:1px solid var(--line);
 justify-content:flex-start;
}
.grid-view .editable-rating{justify-content:flex-start;flex-wrap:wrap}
.grid-view .card-actions{
 grid-column:2;grid-row:2;
 border-left:1px solid var(--line);
 padding:10px 8px;
 gap:7px;
 flex-direction:column;
}
.grid-view .round-action{width:40px;height:40px;font-size:19px}
.grid-view .user-stars .star{font-size:20px}
.grid-view .qa-copy,.grid-view .paragraph-stack{font-size:16px}
.grid-view .tag-row{padding-left:44px}
.grid-view .qa-row,.grid-view .plain-joke{grid-template-columns:35px minmax(0,1fr)}
.grid-view .qa-badge,.grid-view .plain-icon{width:29px;height:29px;font-size:15px}

/* 2 columns already on medium desktops/tablets; collapse cleanly on narrow screens. */
@media(min-width:1500px){
 .catalog,.hero-inner{max-width:1540px}
 .grid-view .joke-grid{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
}
@media(min-width:1900px){
 .catalog,.hero-inner{max-width:1760px}
}
@media(max-width:1180px){
 .hero-fun{height:132px;min-height:132px}
 .css-mascot{bottom:5px}
 .sidebar{padding-bottom:20px}
}
@media(max-width:900px){
 .hero-fun{display:none!important}
 .category-strip{margin-top:10px}
 .grid-view .joke-grid{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
}
@media(max-width:700px){
 .grid-view .joke-grid{grid-template-columns:1fr}
 .grid-view .joke-card{display:block;min-height:0}
 .grid-view .score-col,.grid-view .rating-block,.grid-view .card-actions{border-left:0}
 .grid-view .card-actions{flex-direction:row;justify-content:flex-start}
}


/* =========================================================
   v19 — About + "world's largest" mission banner
   ========================================================= */

.worlds-largest-banner{
  width:min(900px,calc(100% - 305px));
  margin:4px 0 14px;
  min-height:58px;
  border:1px solid rgba(87,55,196,.18);
  border-radius:18px;
  background:
    radial-gradient(circle at 8% 20%,rgba(255,219,75,.38),transparent 24%),
    linear-gradient(110deg,#fff8c9 0%,#fff 34%,#f0eaff 100%);
  box-shadow:0 10px 30px rgba(66,45,130,.10);
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 16px;
  text-align:left;
  cursor:pointer;
  color:#20264a;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.worlds-largest-banner::after{
  content:"";
  position:absolute;
  inset:-120% -30%;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.76) 49%,transparent 56%);
  transform:translateX(-60%);
  animation:worldShine 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes worldShine{
  0%,60%{transform:translateX(-60%)}
  82%,100%{transform:translateX(60%)}
}
.worlds-largest-banner:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 34px rgba(66,45,130,.16);
  border-color:rgba(87,55,196,.30);
}
.worlds-largest-spark{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#5a3bc7;color:#ffe248;
  font-size:20px;
  box-shadow:0 4px 13px rgba(90,59,199,.24);
}
.worlds-largest-copy{display:grid;gap:2px;min-width:0;line-height:1.1}
.worlds-largest-copy strong{
  font-size:13px;
  letter-spacing:.065em;
  font-weight:900;
  color:#4930a4;
}
.worlds-largest-copy small{
  font-size:12px;
  color:#65708a;
  white-space:normal;
}
.worlds-largest-arrow{
  margin-left:auto;
  font-size:29px;
  line-height:1;
  color:#6f56ca;
  font-weight:300;
}

.sidebar-about-link{
  width:100%;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.055);
  color:#dfe6f5;
  border-radius:11px;
  padding:10px 12px;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:.18s ease;
}
.sidebar-about-link:hover{
  background:rgba(255,255,255,.11);
  color:white;
  transform:translateY(-1px);
}

.about-panel{
  width:min(760px,calc(100vw - 28px));
  max-height:min(820px,calc(100vh - 34px));
  overflow:auto;
  padding:32px 34px 28px;
}
.about-kicker{
  display:inline-flex;
  border-radius:999px;
  background:#efe9ff;
  color:#6547c3;
  padding:7px 11px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
}
.about-panel h2{
  margin:13px 0 8px;
  font-size:clamp(27px,4vw,42px);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--ink);
}
.about-lead{
  margin:0 0 20px;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
  max-width:650px;
}
.about-highlight{
  display:flex;
  gap:14px;
  align-items:center;
  padding:17px 18px;
  border-radius:17px;
  background:linear-gradient(110deg,#fff5bb,#f0e9ff);
  border:1px solid rgba(94,59,201,.12);
  margin-bottom:18px;
}
.about-highlight-icon{font-size:30px}
.about-highlight div{display:grid;gap:3px}
.about-highlight strong{color:#4930a4;font-size:16px}
.about-highlight span{color:#6a7186;font-size:13px}
.about-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.about-card{
  border:1px solid var(--line);
  border-radius:15px;
  padding:16px;
  background:var(--card);
}
.about-card-icon{font-size:24px;display:block;margin-bottom:9px}
.about-card strong{font-size:14px;color:var(--ink)}
.about-card p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.about-footnote{
  margin:17px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}
.about-done-btn{
  margin-top:18px;
  width:100%;
  justify-content:center;
}

[data-theme="dark"] .worlds-largest-banner{
  background:
    radial-gradient(circle at 8% 20%,rgba(255,219,75,.13),transparent 24%),
    linear-gradient(110deg,#2b2940,#25263a 48%,#32284c);
  border-color:rgba(184,164,255,.20);
}
[data-theme="dark"] .worlds-largest-copy strong{color:#d9ccff}
[data-theme="dark"] .worlds-largest-copy small{color:#aeb6c9}
[data-theme="dark"] .about-kicker{background:#332d50;color:#d5c9ff}
[data-theme="dark"] .about-highlight{
  background:linear-gradient(110deg,#3a3426,#312947);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .about-highlight strong{color:#e0d7ff}
[data-theme="dark"] .about-highlight span{color:#b4bac9}

@media (max-width:1100px){
  .worlds-largest-banner{width:calc(100% - 235px)}
}
@media (max-width:880px){
  .worlds-largest-banner{width:100%}
}
@media (max-width:650px){
  .worlds-largest-banner{
    margin-top:7px;
    padding:10px 12px;
    border-radius:15px;
  }
  .worlds-largest-copy strong{font-size:11px}
  .worlds-largest-copy small{font-size:11px}
  .worlds-largest-spark{width:34px;height:34px;flex-basis:34px}
  .about-panel{padding:25px 18px 20px}
  .about-grid{grid-template-columns:1fr}
}


/* v20 — quieter, compact About link */
.sidebar-about-link{
  width:auto !important;
  align-self:flex-start;
  display:inline-flex !important;
  padding:6px 9px !important;
  border-color:transparent !important;
  background:transparent !important;
  color:rgba(223,230,245,.68) !important;
  font-size:11px !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
.sidebar-about-link:hover{
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  transform:none !important;
}


/* v20 — ranking identity inside Top Rated popup */
.modal-top-rank{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 12px;
  padding:10px 13px;
  border-radius:13px;
  border:1px solid var(--line);
  background:var(--card);
}
.modal-top-rank .modal-medal{
  width:35px;height:35px;flex:0 0 35px;
  display:grid;place-items:center;
  border-radius:50%;
  font-weight:900;
}
.modal-top-rank span:last-child{display:grid;gap:1px}
.modal-top-rank strong{font-size:12px;letter-spacing:.055em}
.modal-top-rank small{font-size:10px;color:var(--muted)}
.modal-top-rank.rank-1{
  background:linear-gradient(105deg,rgba(255,226,91,.22),var(--card));
  border-color:rgba(207,164,0,.30);
}
.modal-top-rank.rank-1 .modal-medal{background:#f3cc3f;color:#5c4600}
.modal-top-rank.rank-2{
  background:linear-gradient(105deg,rgba(215,221,231,.25),var(--card));
  border-color:rgba(139,149,166,.28);
}
.modal-top-rank.rank-2 .modal-medal{background:#d8dde5;color:#505866}
.modal-top-rank.rank-3{
  background:linear-gradient(105deg,rgba(204,137,76,.18),var(--card));
  border-color:rgba(166,101,47,.28);
}
.modal-top-rank.rank-3 .modal-medal{background:#c98248;color:#fff}


/* v20.1 — About link must size to content, never stretch across sidebar */
.sidebar-bottom{
  align-items:flex-start !important;
}

.sidebar-about-link{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  justify-self:start !important;
  padding:5px 8px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(223,230,245,.68) !important;
  font-size:11px !important;
  font-weight:650 !important;
}

.sidebar-about-link:hover{
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  transform:none !important;
}


/* v20.2 — About sits beside Surprise Me */
.hero-action-pair{
  display:inline-flex;
  align-items:stretch;
  gap:8px;
  flex-wrap:wrap;
}

.hero-action-pair > button{
  min-height:42px;
}

.about-inline-button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:92px;
  padding:0 16px !important;
  white-space:nowrap;
}

/* Remove any legacy sidebar footprint */
.sidebar-about-link{
  display:none !important;
}


/* v20.3 — one About trigger only; About matches Surprise Me */
.worlds-largest-banner{
  display:none !important;
}

.hero-action-pair{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.hero-action-pair > #surpriseButton,
.hero-action-pair > #aboutButton{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:52px !important;
  padding:0 24px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  font:inherit;
}

/* About inherits the same classes as Surprise. Prevent any old secondary-button
   rules from making it rectangular/white. */
#aboutButton.about-inline-button{
  box-shadow:inherit !important;
  line-height:1 !important;
}

@media (max-width:700px){
  .hero-action-pair{
    gap:7px;
    flex-wrap:wrap;
  }
  .hero-action-pair > #surpriseButton,
  .hero-action-pair > #aboutButton{
    min-height:44px !important;
    padding:0 16px !important;
  }
}


/* v20.4 — copy/share success feedback */
.round-action.action-success{
  transform:scale(.94);
}


/* =========================================================
   v20.5 — reliable custom sharing + rating audio
   ========================================================= */
.share-panel{
  width:min(560px,calc(100vw - 28px));
  padding:28px;
}
.share-kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#efe9ff;
  color:#6547c3;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
}
.share-panel h2{
  margin:12px 0 5px;
  color:var(--ink);
  font-size:30px;
  line-height:1;
}
.share-lead{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
}
.share-textarea{
  width:100%;
  min-height:145px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  color:var(--ink);
  padding:14px;
  font:inherit;
  font-size:14px;
  line-height:1.5;
  box-sizing:border-box;
}
.share-textarea:focus{
  outline:2px solid rgba(112,73,221,.25);
  border-color:#7656d7;
}
.share-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.share-big-action{
  min-height:44px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
}
.share-status{
  min-height:18px;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.share-status.success{color:#2f8b4b}
.share-status.warning{color:#b57916}

[data-theme="dark"] .share-kicker{
  background:#332d50;
  color:#d5c9ff;
}

@media(max-width:520px){
  .share-panel{padding:23px 17px}
  .share-actions-grid{grid-template-columns:1fr}
}


/* =========================================================
   v20.6 — foldable/mobile header and full-width content
   ========================================================= */

/* Header actions must shrink instead of creating a side column. */
.hero-top,
.hero-header,
.topbar,
.hero-actions,
.hero-action-pair{
  min-width:0;
}

.hero-action-pair{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

/* About follows Surprise height, but can shrink harder. */
#aboutButton.about-inline-button{
  flex:0 1 auto !important;
  min-width:0 !important;
  padding-inline:18px !important;
  gap:6px;
}
#aboutButton .about-icon{display:inline-flex}
#aboutButton .about-label{display:inline}

/* Theme toggle must never reserve its own layout column. */
#themeButton.theme-compact-button{
  flex:0 0 auto !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
}

/* Let the actual app/content consume width on narrow and foldable devices. */
.main-shell,
.app-shell,
.main-content,
.content,
.content-area,
.jokes-section,
.jokes-list,
#jokesList,
.results-shell,
.results-area{
  min-width:0 !important;
  max-width:none !important;
}

/* Foldable/tablet widths: avoid right-side whitespace/column. */
@media (max-width:980px){
  .main-shell,
  .app-shell{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .main-content,
  .content,
  .content-area{
    width:100% !important;
    max-width:100% !important;
  }

  /* Sidebar may already become drawer/stacked in existing CSS;
     do not allow it to force main content narrower. */
  .sidebar{
    max-width:100%;
  }

  .hero-top,
  .hero-header,
  .topbar{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:minmax(0,1fr) auto !important;
  }
}

/* Honor Magic V2 / narrow foldable portrait-like layouts */
@media (max-width:760px){
  .hero-action-pair{
    gap:6px !important;
  }

  #aboutButton.about-inline-button{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    justify-content:center !important;
  }

  #aboutButton .about-label{
    display:none !important;
  }

  #aboutButton .about-icon{
    font-size:16px;
    line-height:1;
  }

  #themeButton.theme-compact-button{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
  }

  /* Header controls stay on one compact row where possible. */
  .hero-top,
  .hero-header,
  .topbar{
    gap:8px !important;
  }

  /* Eliminate accidental reserved right gutter. */
  body,
  .page,
  .main-shell,
  .app-shell,
  .main-content,
  .content,
  .content-area{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden;
  }

  .joke-card,
  #jokesList,
  .jokes-list{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Very narrow phones: keep Surprise primary, About icon, theme tiny. */
@media (max-width:520px){
  #surpriseButton{
    padding-inline:14px !important;
    min-width:0 !important;
  }

  #aboutButton.about-inline-button{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    min-height:40px !important;
  }

  #themeButton.theme-compact-button{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
  }
}


/* =========================================================
   v20.7 — unified round mobile header controls
   ========================================================= */

@media (max-width:760px){
  /* Exact same geometry for all three header controls */
  #surpriseButton,
  #aboutButton.about-inline-button,
  #themeButton.theme-compact-button{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    line-height:1 !important;
  }

  #surpriseButton .surprise-label,
  #aboutButton .about-label{
    display:none !important;
  }

  #surpriseButton .surprise-icon,
  #aboutButton .about-icon{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    font-size:17px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  #themeButton .theme-button-inner{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    margin:0;
  }

  .hero-action-pair{
    gap:7px !important;
  }
}

@media (max-width:520px){
  #surpriseButton,
  #aboutButton.about-inline-button,
  #themeButton.theme-compact-button{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    flex-basis:40px !important;
  }
}

/* Desktop/tablet: keep existing look, but make theme control visibly circular
   in dark mode with a subtle ring/background. */
[data-theme="dark"] #themeButton.theme-compact-button{
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.045) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset !important;
}

[data-theme="dark"] #themeButton.theme-compact-button:hover{
  border-color:rgba(255,255,255,.26) !important;
  background:rgba(255,255,255,.075) !important;
}


/* =========================================================
   v20.8 — exact mobile circles + visible theme ring + safe pager
   ========================================================= */

/* Theme toggle should read as a circle even when its old button styles
   previously removed border/background. */
#themeButton.theme-compact-button{
  border:1px solid rgba(64,70,92,.20) !important;
  background:rgba(255,255,255,.58) !important;
  box-shadow:0 1px 3px rgba(30,34,52,.07) !important;
  border-radius:50% !important;
}

#themeButton.theme-compact-button:hover{
  border-color:rgba(64,70,92,.32) !important;
  background:rgba(255,255,255,.78) !important;
}

[data-theme="dark"] #themeButton.theme-compact-button{
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(255,255,255,.065) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 1px 4px rgba(0,0,0,.14) !important;
}

[data-theme="dark"] #themeButton.theme-compact-button:hover{
  border-color:rgba(255,255,255,.36) !important;
  background:rgba(255,255,255,.10) !important;
}

@media (max-width:760px){
  /* Do not merely set width/height: make the complete painted box identical.
     This removes Surprise's old extra padding/shadow/border footprint. */
  #surpriseButton,
  #aboutButton.about-inline-button{
    box-sizing:border-box !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    flex:0 0 44px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(91,63,189,.18) !important;
    box-shadow:0 4px 12px rgba(79,56,170,.14) !important;
    line-height:1 !important;
    overflow:hidden !important;
  }

  /* Keep the two purple action buttons visually identical. */
  #surpriseButton,
  #aboutButton.about-inline-button{
    background:var(--purple, #6847c7) !important;
    color:#fff !important;
  }

  #surpriseButton:hover,
  #aboutButton.about-inline-button:hover{
    transform:none !important;
  }

  #themeButton.theme-compact-button{
    box-sizing:border-box !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    flex:0 0 44px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
  }

  /* Mobile paging must remain inside viewport and centered.
     Covers current and legacy pager class names. */
  .pagination,
  .pagination-row,
  .pager,
  .pager-row,
  .page-controls,
  #pagination,
  #paginationControls{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
    justify-content:center !important;
    transform:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
  }

  .pagination::-webkit-scrollbar,
  .pagination-row::-webkit-scrollbar,
  .pager::-webkit-scrollbar,
  .pager-row::-webkit-scrollbar,
  .page-controls::-webkit-scrollbar,
  #pagination::-webkit-scrollbar,
  #paginationControls::-webkit-scrollbar{
    display:none;
  }

  /* Prevent first page button from inheriting a negative margin/translate. */
  .pagination > :first-child,
  .pagination-row > :first-child,
  .pager > :first-child,
  .pager-row > :first-child,
  .page-controls > :first-child,
  #pagination > :first-child,
  #paginationControls > :first-child{
    margin-left:0 !important;
    transform:none !important;
  }
}

@media (max-width:520px){
  #surpriseButton,
  #aboutButton.about-inline-button,
  #themeButton.theme-compact-button{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    flex:0 0 40px !important;
  }
}


/* =========================================================
   v20.9 — fix actual active-page and Surprise sizing causes
   ========================================================= */

/* Active pager buttons must occupy exactly the same box as inactive ones.
   In particular: no scale, translate, extra width, negative margin or
   outline that can push page 1 outside the viewport. */
.page-btn,
.page-btn.active{
  box-sizing:border-box !important;
  transform:none !important;
  translate:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
}

.page-btn.active{
  scale:1 !important;
  outline:none !important;
}

/* Give the pager a tiny physical safety inset so even the active first
   button cannot paint beyond the viewport edge. */
@media (max-width:760px){
  .pagination{
    box-sizing:border-box !important;
    width:calc(100% - 12px) !important;
    max-width:calc(100% - 12px) !important;
    margin-left:6px !important;
    margin-right:6px !important;
    padding-left:2px !important;
    padding-right:2px !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  /* Surprise had an older min-height:52px !important rule. Override every
     vertical sizing property so it cannot become elliptical. */
  .hero-action-pair > #surpriseButton,
  #surpriseButton{
    box-sizing:border-box !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    padding:0 !important;
    border-radius:9999px !important;
    aspect-ratio:1 / 1 !important;
    flex:0 0 44px !important;
    align-self:center !important;
    line-height:1 !important;
  }

  .hero-action-pair > #aboutButton,
  #aboutButton.about-inline-button{
    box-sizing:border-box !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    padding:0 !important;
    border-radius:9999px !important;
    aspect-ratio:1 / 1 !important;
    flex:0 0 44px !important;
    align-self:center !important;
    line-height:1 !important;
  }
}

@media (max-width:520px){
  .hero-action-pair > #surpriseButton,
  #surpriseButton,
  .hero-action-pair > #aboutButton,
  #aboutButton.about-inline-button{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    flex:0 0 40px !important;
  }
}