/* v21 responsive overrides for the "ctf" page group: scoped to its pages, loaded after every other stylesheet. */
/* Scope: main.arena-page (SEO CTF hub, rooms, machines, leaderboard, profiles) and the .arena-complete overlay.
   Rule: page-level text scales with the viewport (clamp(min, rem + vw, max)); text, paddings and icons inside a
   component scale with that component (container-type:inline-size on the component, clamp(min, rem + Ncqi, max)).
   Every max value is the size arena.css already uses, so desktop (1200px and up) looks the same as before.
   Only block-level boxes become containers: a shrink-to-fit element (button, badge, chip) must never be one. */

/* ---------- Containers ---------- */
.arena-page .arena-wrap,
.arena-page .arena-panel,
.arena-page .arena-card,
.arena-page .arena-stat,
.arena-page .arena-task,
.arena-page .arena-q,
.arena-page .arena-cta,
.arena-page .arena-done-banner,
.arena-page .arena-blood,
.arena-complete .arena-complete-box{container-type:inline-size}
.arena-page .arena-layout > *,.arena-page .arena-sticky > *{min-width:0}

/* ---------- Page-level text ---------- */
.arena-page{font-size:clamp(14px,.84rem + .2vw,15px)}
.arena-page .arena-topnav .arena-brand{font-size:clamp(15px,.9rem + .15vw,16px)}
.arena-page .arena-topnav a.arena-tab{font-size:clamp(13px,.78rem + .2vw,14px);padding:clamp(7px,.4rem + .15vw,8px) clamp(11px,.6rem + .35vw,14px);min-height:32px}
.arena-page .arena-backlink{margin:0 0 12px;font-size:clamp(13px,.8rem + .15vw,14px)}
.arena-page .arena-backlink a{display:inline-flex;align-items:center;gap:6px;min-height:24px}
.arena-page .arena-section-title{margin:clamp(22px,1.2rem + 1vw,30px) 0 14px}
.arena-page .arena-section-title h2{font-size:clamp(18px,1rem + .7vw,22px)}
.arena-page .arena-section-title h2 .ctf-count{font-size:clamp(12px,.7rem + .1vw,13px)}
.arena-page .arena-t14{font-size:clamp(13px,.8rem + .15vw,14px)}
.arena-page .arena-t13{font-size:clamp(12px,.72rem + .15vw,13px)}
.arena-page .ctf-group-h{font-size:clamp(15px,.9rem + .2vw,17px)}
.arena-page .ctf-catdesc{font-size:clamp(13px,.8rem + .15vw,14px)}
.arena-page .arena-prose h4{font-size:clamp(15px,.9rem + .15vw,16px)}
.arena-page .arena-pre{padding:clamp(10px,.5rem + .4vw,12px) clamp(10px,.55rem + .5vw,14px)}
.arena-page .arena-pre code{font-size:clamp(12px,.7rem + .2vw,13px)}
.arena-page .arena-empty i{font-size:clamp(26px,1.4rem + .5vw,30px)}
.arena-page .arena-empty h3,.arena-page .arena-empty .uos-empty-title{font-size:clamp(15.5px,.9rem + .25vw,17px)}
.arena-page .arena-roomhead .arena-card-icon{flex-basis:clamp(52px,2.75rem + 1.8cqi,64px);width:clamp(52px,2.75rem + 1.8cqi,64px);height:clamp(52px,2.75rem + 1.8cqi,64px);font-size:clamp(22px,1.2rem + .8cqi,28px);border-radius:clamp(13px,.7rem + .4cqi,16px)}
.arena-page .arena-roomhead h1,.arena-page .arena-hero h1,.arena-page .arena-profile-name{overflow-wrap:anywhere}
.arena-page .arena-profile-name{font-size:clamp(22px,1.2rem + 1.2vw,32px);margin:0 0 4px;line-height:var(--uos-lh-heading)}

/* ---------- Panels ---------- */
.arena-page .arena-panel{padding:clamp(14px,.6rem + 1.5cqi,20px)}
.arena-page .arena-hero{padding:clamp(18px,.8rem + 1.9cqi,28px);gap:clamp(14px,.6rem + 1.1cqi,20px)}
.arena-page .arena-panel-head h2{font-size:clamp(16px,.875rem + .6cqi,18px)}
.arena-page .arena-panel-head h3{font-size:clamp(16px,.875rem + .6cqi,18px)}
.arena-page .arena-panel-head .arena-h17{font-size:clamp(15.5px,.875rem + .4cqi,17px)}
.arena-page .arena-panel-head h2,.arena-page .arena-panel-head h3{min-width:0;overflow-wrap:anywhere}
.arena-page .arena-hero p{font-size:clamp(14px,.82rem + .2cqi,15px)}
.arena-page .arena-hero .ctf-lab-note{font-size:clamp(13px,.76rem + .2cqi,14px)}
.arena-page .arena-cta{padding:clamp(13px,.6rem + .6cqi,16px) clamp(14px,.7rem + .6cqi,18px)}
.arena-page .arena-cta p{min-width:0;overflow-wrap:anywhere}
.arena-page .arena-done-banner{padding:clamp(13px,.6rem + .6cqi,16px) clamp(14px,.7rem + .6cqi,18px)}
.arena-page .arena-done-banner > div{min-width:0;overflow-wrap:anywhere}
.arena-page .arena-done-banner i.fa-trophy{font-size:clamp(22px,1.1rem + 1.1cqi,28px)}
.arena-page .arena-note{margin:12px 0 0;overflow-wrap:anywhere}
.arena-page .arena-kv{font-size:clamp(13px,.6rem + 1.3cqi,14px);grid-template-columns:auto minmax(0,1fr)}
.arena-page .arena-kv dd{overflow-wrap:anywhere}
.arena-page .arena-myrank-num{color:var(--uos-accent-text);font-size:clamp(17px,.9rem + .5cqi,20px)}
.arena-page .arena-panel-head > .arena-mono,.arena-page .arena-panel-head > .arena-muted{min-width:0;overflow-wrap:anywhere}
.arena-page .arena-continue-title{margin:0;font-size:clamp(16px,.75rem + .8cqi,18px);overflow-wrap:anywhere}

/* ---------- Stats (hero + profile) ---------- */
.arena-page .arena-stat{padding:clamp(10px,.5rem + 1.2cqi,12px) clamp(11px,.55rem + 1.5cqi,14px)}
.arena-page .arena-stat strong{font-size:clamp(18px,.95rem + 3.4cqi,22px)}
.arena-page .arena-stat span{font-size:clamp(12px,.5rem + 2.5cqi,13px)}
.arena-page .arena-rankbar .arena-rank-name{font-size:clamp(12px,.72rem + .15cqi,13px)}

/* ---------- Buttons, badges, chips, inputs (sized by the component they sit in) ---------- */
.arena-page .arena-btn{font-size:clamp(13px,.75rem + .3cqi,14px);padding:clamp(9px,.5rem + .3cqi,10px) clamp(13px,.7rem + .6cqi,16px);min-height:24px}
.arena-page .arena-btn-sm{font-size:clamp(12px,.7rem + .2cqi,13px);padding:clamp(6px,.35rem + .2cqi,7px) clamp(10px,.55rem + .4cqi,12px)}
.arena-page .arena-badge{font-size:clamp(11.5px,.5rem + 1.25cqi,12.5px);padding:3px clamp(8px,.4rem + .5cqi,10px)}
.arena-page .arena-chip{font-size:clamp(12px,.5rem + 1.4cqi,13px);padding:clamp(5px,.3rem + .3cqi,6px) clamp(10px,.55rem + .5cqi,12px);min-height:28px}
.arena-page .ctf-count{font-size:clamp(11px,.6rem + .2cqi,12px)}
.arena-page .arena-input{font-size:clamp(13px,.75rem + .3cqi,14px);padding:clamp(9px,.5rem + .3cqi,10px) clamp(10px,.55rem + .4cqi,12px)}
/* hub search: arena.js only shows the long placeholder when it fits; an ellipsis is the no-script fallback, never a sliced glyph */
.arena-page .arena-search .arena-input{text-overflow:ellipsis}
/* machine target URL: field-styled box that wraps the URL (at its slashes first) so the machine slug is never hidden */
.arena-page .arena-target-url{font-size:clamp(13px,.7rem + 1cqi,14px);padding:clamp(9px,.5rem + .3cqi,10px) clamp(10px,.55rem + .4cqi,12px)}
.arena-page .arena-label{font-size:clamp(12px,.7rem + .2cqi,13px)}
.arena-page .arena-hint-btn{font-size:clamp(12px,.6rem + .4cqi,13px);min-height:24px;text-align:left;overflow-wrap:anywhere;white-space:normal}

/* ---------- Cards (hub grid) ---------- */
.arena-page .arena-card{padding:clamp(14px,.5rem + 2.3cqi,18px);gap:clamp(8px,.3rem + .7cqi,10px)}
.arena-page .arena-card h3,.arena-page .arena-card h4{font-size:clamp(15px,.5rem + 2.5cqi,17px);overflow-wrap:anywhere}
.arena-page .arena-card p{font-size:clamp(13px,.55rem + 1.5cqi,14px)}
.arena-page .arena-card small{font-size:clamp(12px,.5rem + 1.4cqi,13px);overflow-wrap:anywhere}
.arena-page .arena-card-foot{font-size:clamp(12px,.5rem + 1.4cqi,13px)}
.arena-page .arena-card-foot > span{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.arena-page .arena-card-icon{flex-basis:clamp(38px,1.5rem + 5.5cqi,44px);width:clamp(38px,1.5rem + 5.5cqi,44px);height:clamp(38px,1.5rem + 5.5cqi,44px);font-size:clamp(16px,.6rem + 2.6cqi,19px);border-radius:clamp(10px,.4rem + 1.6cqi,12px)}
.arena-page .arena-card-top > div{min-width:0}
.arena-page .arena-card.is-owned .arena-card-top{padding-right:clamp(60px,2rem + 11cqi,72px)}

/* ---------- Tasks and questions (rooms, machines) ---------- */
.arena-page .arena-task-head{padding:clamp(12px,.5rem + 1.1cqi,16px) clamp(14px,.6rem + 1.1cqi,18px);gap:clamp(9px,.4rem + .6cqi,12px)}
.arena-page .arena-task-num{flex-basis:clamp(30px,1.6rem + 1.2cqi,34px);height:clamp(30px,1.6rem + 1.2cqi,34px);font-size:clamp(12px,.6rem + .4cqi,13px)}
.arena-page .arena-task-title{font-size:clamp(14.5px,.6rem + .9cqi,16px);overflow-wrap:anywhere}
.arena-page .arena-task-count{font-size:clamp(11px,.55rem + .3cqi,12px)}
.arena-page .arena-task-body{padding:4px clamp(14px,.6rem + 1.1cqi,18px) clamp(14px,.6rem + 1.1cqi,18px)}
.arena-page .arena-q{padding:clamp(12px,.5rem + 1cqi,14px)}
.arena-page .arena-q-pts{font-size:clamp(11px,.55rem + .5cqi,12px)}
.arena-page .arena-q-tools{font-size:clamp(12px,.6rem + .4cqi,13px)}
.arena-page .arena-format{font-size:clamp(11.5px,.6rem + .4cqi,12.5px)}
.arena-page .arena-feedback{font-size:clamp(12.5px,.65rem + .4cqi,13.5px)}
.arena-page .arena-hint,.arena-page .arena-answer,.arena-page .arena-explain{font-size:clamp(13px,.65rem + .55cqi,14px);overflow-wrap:anywhere}
.arena-page .arena-flag-num{font-size:clamp(11px,.55rem + .5cqi,12px)}
.arena-page .arena-blood{padding:clamp(10px,.5rem + .8cqi,12px) clamp(11px,.55rem + .9cqi,14px)}
.arena-page .arena-blood > div{min-width:0;overflow-wrap:anywhere}
.arena-page .arena-blood i{font-size:clamp(17px,.9rem + .9cqi,20px)}

/* ---------- Lists, table, heatmap ---------- */
.arena-page .arena-pos{flex-basis:clamp(26px,1.25rem + 2.4cqi,28px);width:clamp(26px,1.25rem + 2.4cqi,28px);height:clamp(26px,1.25rem + 2.4cqi,28px);font-size:clamp(11px,.55rem + .5cqi,12px)}
.arena-page .arena-list .arena-pts{font-size:clamp(12px,.5rem + 1.5cqi,13px)}
.arena-page .arena-list small{font-size:clamp(12px,.6rem + .4cqi,13px)}
.arena-page .arena-table{font-size:clamp(13px,.7rem + .5cqi,14px)}
.arena-page .arena-table th{font-size:clamp(12px,.65rem + .4cqi,13px)}
.arena-page .arena-table th,.arena-page .arena-table td{padding:clamp(9px,.45rem + .5cqi,12px) clamp(6px,.3rem + .4cqi,10px)}
.arena-page .arena-table td a{display:inline-flex;align-items:center;min-height:24px}
.arena-page .arena-lb-solves{display:none}
.arena-page .arena-avatar{width:clamp(30px,1.6rem + .6cqi,34px);height:clamp(30px,1.6rem + .6cqi,34px)}
.arena-page .arena-profile-head .arena-avatar{width:clamp(64px,3rem + 2cqi,82px);height:clamp(64px,3rem + 2cqi,82px)}
.arena-page .arena-heat-legend{font-size:clamp(11px,.65rem + .15cqi,12px)}

/* ---------- Completion overlay ---------- */
.arena-complete .arena-complete-box{padding:clamp(22px,1rem + 2.6cqi,30px) clamp(16px,.7rem + 2.2cqi,24px)}
.arena-complete .arena-complete-box h2{font-size:clamp(22px,1rem + 2.2cqi,26px)}
.arena-complete .arena-complete-box .arena-trophy{font-size:clamp(38px,1.5rem + 4.8cqi,46px)}
.arena-complete .arena-btn{font-size:clamp(13px,.75rem + .3cqi,14px)}

/* ---------- Phones ---------- */
@media (max-width:639.98px){
    /* leaderboard table fits the screen: the Solves column folds under each player's points (nothing is lost), long names and rank titles wrap */
    .arena-page .arena-table{min-width:0}
    .arena-page .arena-table th:nth-child(4),.arena-page .arena-table td:nth-child(4){display:none}
    .arena-page .arena-lb-solves{display:block;margin-top:2px;color:var(--uos-muted);font-weight:500;font-size:clamp(11px,.55rem + .6cqi,12px);white-space:nowrap}
    .arena-page .arena-table td:nth-child(2),.arena-page .arena-table td:nth-child(3){overflow-wrap:anywhere}
    .arena-page .arena-table td:nth-child(2) .arena-badge{margin-top:4px}
    .arena-page .arena-table th:first-child,.arena-page .arena-table td:first-child{padding-left:4px}
    /* the "Your rank" figure drops under the heading instead of squeezing beside it */
    .arena-page .arena-panel-head > .arena-mono{flex:1 1 100%}
    /* top nav tabs: a touch more height on phones */
    .arena-page .arena-topnav a.arena-tab{min-height:34px}
    /* key/value rows: values may wrap under long labels without pushing the panel wider */
    .arena-page .arena-kv{gap:6px 10px}
    /* the answer row's primary button is full width; hint/answer buttons keep a comfortable tap height */
    .arena-page .arena-hint-btn{padding:6px 0;min-height:32px}
    /* room header meta chips wrap as a block under the title */
    .arena-page .arena-roomhead .arena-card-meta{margin-top:8px}
}
@media (max-width:359.98px){
    .arena-page .arena-stats{grid-template-columns:minmax(0,1fr)}
}
/* ---------- v21 ux-labs: answer rules above Task 1, the rank as a stat, completed machines ---------- */
.arena-page .arena-rules{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:clamp(9px,.5rem + .3vw,11px) clamp(11px,.6rem + .4vw,14px);border:1px solid var(--a-border);border-radius:var(--a-radius-sm);color:var(--a-muted);font-size:clamp(13px,.76rem + .25vw,14px);line-height:1.5}
.arena-page .arena-rules i{margin-top:.28em;color:var(--a-cyan)}
.arena-page .arena-rules span{min-width:0;overflow-wrap:anywhere}
.arena-page .arena-stat-rank strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:clamp(16px,.8rem + 3cqi,22px)}
.arena-page .arena-card-foot .arena-badge-blood{white-space:normal;text-align:left}
.arena-page .arena-card.is-owned .arena-card-top{padding-right:clamp(96px,4.5rem + 8cqi,112px)}
/* ---------- v21 fluid text pass: text that had the same size on a 360px phone and a 1280px desktop (max = today's desktop size) ---------- */
.arena-page .arena-roomhead p,.arena-page .arena-profile-head p.arena-muted,.arena-page .arena-profile-head p.arena-muted .uos-num{font-size:clamp(14.5px,.84rem + .25vw,16px)}
.arena-page .arena-prose p,.arena-page .arena-q-prompt p{font-size:clamp(15px,.82rem + .3cqi + .2vw,16px)}
.arena-page aside .arena-panel-head h3{font-size:clamp(14.5px,.76rem + .5cqi + .2vw,16px)}
.arena-page .arena-list .arena-grow,.arena-page .arena-list .arena-grow a{font-size:clamp(14px,.8rem + .3cqi + .15vw,15px)}
.arena-page .arena-done-banner>div,.arena-page .arena-done-banner>div>strong,.arena-page .arena-done-banner>div>span,.arena-page .arena-blood strong{font-size:clamp(14px,.8rem + .3cqi + .15vw,15px)}
.arena-page .arena-sr{font-size:clamp(14px,.8rem + .3vw,15px)}
/* answer fields stay at least 16px on phones */
@media (max-width:639.98px){.arena-page .arena-input,.arena-page .arena-textarea{font-size:16px}}
.arena-page .arena-list a.arena-grow{padding-top:2px;padding-bottom:2px}